/* =====================================================================
   KLAÏS AVOCATS — Design tokens & composants partagés
   Charte : pétrole #09768F + aubergine (colibri) · Cormorant Garamond + Barlow
   Utilisé par toutes les maquettes (accueil, avocats, compétences, honoraires)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Barlow:wght@300;400;500;600;700&display=swap');

:root{
  /* Marque */
  --petrole:#09768F;
  --petrole-deep:#0A5063;
  --petrole-ink:#0A2E38;
  --petrole-ink2:#0C3946;
  --aubergine:#7E1A6F;
  --aubergine-deep:#5E1453;

  /* Neutres chauds */
  --encre:#15222A;
  --texte:#2C3841;
  --gris:#5F6E77;
  --gris-clair:#93A0A6;
  --blanc:#FFFFFF;
  --ivoire:#FBFAF7;      /* blanc chaud (sections alternées) */
  --lin:#F4F0E9;         /* alt plus chaud */
  --voile:#EEF5F6;       /* voile pétrole */
  --voile2:#E4EFF0;
  --filet:#E7E4DC;       /* hairline chaud */
  --filet-froid:#E3E8E9;

  /* Typo */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Rythme */
  --wrap:1240px;
  --wrap-narrow:940px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(72px,10vw,140px);

  --shadow-sm:0 10px 30px rgba(10,46,56,.06);
  --shadow-md:0 24px 60px rgba(10,46,56,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--texte);background:var(--blanc);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--petrole);color:#fff}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--encre);line-height:1.08;letter-spacing:.004em}

/* Layout */
.container{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.container--narrow{max-width:var(--wrap-narrow)}
.section{padding:var(--sec) 0}
.bg-ivoire{background:var(--ivoire)}
.bg-lin{background:var(--lin)}
.bg-ink{background:var(--petrole-ink);color:#E7EFF0}

/* Filet + ornement colibri */
.rule{height:1px;background:var(--filet);border:0;width:100%}
.ornament{display:flex;align-items:center;gap:16px;color:var(--petrole)}
.ornament::before,.ornament::after{content:"";height:1px;background:var(--filet);flex:1}
.ornament img{height:26px;width:auto;opacity:.9}

/* Eyebrow */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--petrole);display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--petrole);display:inline-block}
.eyebrow--center{justify-content:center}

/* Titres de section */
.sec-head{max-width:760px;margin-bottom:clamp(40px,6vw,66px)}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.15rem);margin-top:20px;font-weight:500}
.sec-head p{margin-top:22px;color:var(--gris);font-size:19px;line-height:1.75;max-width:64ch}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head--center p{margin-left:auto;margin-right:auto}

/* Boutons filaires (prestige) */
.btn{
  display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);
  font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:16px 32px;border:1px solid var(--petrole);color:var(--petrole);
  background:transparent;cursor:pointer;transition:all .3s var(--ease);border-radius:1px;
}
.btn:hover{background:var(--petrole);color:#fff}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn--solid{background:var(--petrole);color:#fff}
.btn--solid:hover{background:var(--petrole-deep);border-color:var(--petrole-deep)}
.btn--ghost{border-color:var(--filet);color:var(--encre)}
.btn--ghost:hover{background:var(--encre);border-color:var(--encre);color:#fff}
.btn--light{border-color:rgba(255,255,255,.55);color:#fff}
.btn--light:hover{background:#fff;color:var(--petrole-ink)}

/* CTA « Nous contacter » de l'en-tête : plein pétrole, blanc, arrondi, plus grand, survol aubergine */
.site-nav .btn{
  background:var(--petrole);color:#fff;border-color:var(--petrole);
  border-radius:100px;padding:15px 34px;font-size:13.5px;letter-spacing:.11em;
  box-shadow:0 4px 14px rgba(9,118,143,.20);
}
.site-nav .btn:hover{
  background:var(--aubergine);border-color:var(--aubergine);color:#fff;
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(126,26,111,.30);
}

/* Lien texte souligné animé */
.link-underline{position:relative;color:var(--petrole);font-weight:500}
.link-underline::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--petrole);transition:width .3s var(--ease)}
.link-underline:hover::after{width:100%}

/* ===== En-tête ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .35s var(--ease);padding:22px 0}
.site-header.scrolled{background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--filet);padding:12px 0;box-shadow:0 6px 24px rgba(10,46,56,.05)}
.site-header__row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header__logo img{height:68px;width:auto;transition:height .35s var(--ease)}
.site-header.scrolled .site-header__logo img{height:54px}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--charbon,#2C3841);position:relative;padding:4px 0}
.site-nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--petrole);transition:width .3s var(--ease)}
.site-nav a:not(.btn):hover{color:var(--petrole)}
.site-nav a:not(.btn):hover::after{width:100%}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:var(--encre);transition:.3s var(--ease)}

/* ===== Pied de page ===== */
.site-footer{background:var(--encre);color:#AEC0C6;padding:78px 0 30px;font-size:14px}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer__brand img{height:60px;width:auto;margin-bottom:20px;filter:brightness(0) invert(1);opacity:.94}
.site-footer__brand p{color:#8EA0A6;max-width:36ch;line-height:1.75}
.site-footer h4{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.site-footer ul{list-style:none;display:grid;gap:12px}
.site-footer a{color:#AEC0C6;transition:color .25s var(--ease)}
.site-footer a:hover{color:#7FD0DC}
.site-footer__bottom{padding-top:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#7C8E94;font-size:13px}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

/* ===== Responsive ===== */
@media(max-width:960px){
  .site-nav{position:fixed;inset:0 0 0 auto;width:min(84vw,350px);background:#fff;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;padding:60px 42px;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-12px 0 44px rgba(0,0,0,.13)}
  .site-nav.open{transform:none}
  .site-nav a{font-size:18px}
  .burger{display:flex}
  .site-header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(max-width:720px){
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:560px){
  body{font-size:16px}
  .site-footer__grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* Texte justifié (demande cabinet 29/07) */
.prose p,.longform p,.service-block>p,.aside-block p,.about__body p,.page-hero__lead{text-align:justify;-webkit-hyphens:auto;hyphens:auto}