/* =========================================================
   3 coups de Chœur — feuille de style
   Redesign - Overhaul (mise en page uniquement) : la palette,
   la typographie (Fraunces + Work Sans + Space Mono) et les
   corrections de contraste WCAG AA de la passe précédente sont
   verrouillées et reprises telles quelles. Ce qui change ici :
   la composition. Fini le gabarit "landing page" (hero scindé
   50/50, eyebrow au-dessus de chaque titre, grilles de 3 cartes
   égales, étapes à gros numéros) — chaque section a sa propre
   famille de mise en page, aucune ne se répète. Voir le rapport
   de fin de session pour le détail.
   ========================================================= */

:root{
  --ink:#241934;
  --ink-soft:#3a2a4d;
  --paper:#f7efe3;
  --paper-2:#f0e5d4;
  --brick:#bd5138;
  --brick-dark:#9c4029;
  --brick-tint:#dda896; /* même teinte que --brick, éclaircie pour rester lisible sur fond encre */
  --line: rgba(36,25,52,0.14);
  --shadow: 0 20px 50px -20px rgba(36,25,52,0.35);
  --radius: 8px;
  --ff-display: "Fraunces", serif;
  --ff-body: "Work Sans", sans-serif;
  --ff-mono: "Space Mono", monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
ol,ul{margin:0;}
blockquote{margin:0;}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
section{position:relative;}
::selection{background:var(--brick-tint); color:var(--ink);}

/* Visible uniquement aux lecteurs d'écran */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Lien d'évitement, visible seulement au focus clavier */
.skip-link{
  position:absolute;
  top:-100px; left:16px;
  background:var(--ink);
  color:var(--paper);
  padding:12px 20px;
  border-radius:var(--radius);
  z-index:200;
  text-decoration:none;
  font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{top:16px;}

:focus-visible{
  outline:2.5px solid var(--brick-dark);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- NAV (inchangé) ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:130;
  transition:box-shadow .35s ease;
  contain:layout style;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  transition:padding .35s ease, background .35s ease;
}
.site-header.scrolled .nav-inner{
  padding:14px 32px;
  background:rgba(247,239,227,0.88);
  backdrop-filter:blur(10px);
}
.site-header.scrolled{box-shadow:0 1px 0 var(--line);}
.nav-logo{
  font-family:var(--ff-display);
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:-0.01em;
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color:var(--ink);
}
.nav-logo .nav-full-logo{height:42px; width:auto; display:block;}
.nav-links ul{
  display:flex; gap:34px; list-style:none; margin:0; padding:0;
  font-size:0.92rem; font-weight:500;
}
.nav-links a{
  text-decoration:none;
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:var(--brick);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{transform:scaleX(1);}
.nav-cta{
  background:var(--ink);
  color:var(--paper) !important;
  padding:10px 20px;
  border-radius:100px;
  text-decoration:none;
  font-size:0.88rem;
  font-weight:600;
  letter-spacing:0.01em;
  transition:transform .25s ease, background .25s ease;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--brick-dark); transform:translateY(-2px);}
.burger{display:none; background:none; border:none; cursor:pointer; padding:6px; z-index:120;}
.burger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s;}
.burger[aria-expanded="true"] span{background:var(--paper);}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
/* Menu ouvert : le header passe au-dessus du panneau (--ink) désormais qu'il
   n'est plus masqué dessous (voir z-index de .site-header) ; le logo, sinon
   --ink sur --ink, deviendrait invisible sur ce fond. */
.nav-inner:has(.burger[aria-expanded="true"]) .nav-logo{color:var(--paper);}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-panel{
  position:fixed; inset:0; background:var(--ink); color:var(--paper);
  z-index:110; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:32px 40px; gap:22px;
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.6,0,.2,1);
}
.mobile-panel.open{transform:translateY(0);}
.mobile-panel a{
  font-family:var(--ff-display); font-size:2rem; text-decoration:none; color:var(--paper);
}
.mobile-panel .mp-cta{
  margin-top:12px; background:var(--brick-dark); color:var(--paper); padding:12px 26px; border-radius:100px;
  font-family:var(--ff-body); font-size:1rem; font-weight:600;
}

/* Étiquette de section : version pleine (mono, tracké, majuscules) réservée
   à 3 sections (héros, "pas pour vous", contact). Les autres gardent leur
   texte mais sans ce motif répété (eyebrow restraint), et celui de la
   section Cynthia est devenu sr-only : redondant avec la légende du
   portrait juste à côté dans la nouvelle composition. */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:0.78rem;
  color:var(--ink-soft);
  display:inline-block;
  margin-bottom:20px;
}
.eyebrow--stamp{
  color:var(--brick-dark);
  text-transform:uppercase;
  letter-spacing:0.14em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow--stamp::before{content:""; width:26px; height:1px; background:var(--brick-dark);}
.not-for-you .eyebrow--stamp{color:var(--brick-tint);}
.not-for-you .eyebrow--stamp::before{background:var(--brick-tint);}

/* ---------- HERO — masthead éditorial (famille 1 : titre pleine largeur,
   visuel en aparté, pas de split 50/50) ---------- */
.hero{
  padding:150px 0 110px;
}
.hero-layout{max-width:1180px;}
.hero h1{
  margin-top:22px;
  font-size:clamp(2.1rem, 4.8vw, 3.8rem);
  line-height:1.02;
  color:var(--ink);
  max-width:16ch;
}
.hero h1 em{
  font-style:italic;
  color:var(--brick);
}
.hero-foot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:end;
  margin-top:64px;
}
.hero-sub{
  font-size:1.14rem;
  max-width:460px;
  color:var(--ink-soft);
}
.hero-actions{
  margin-top:36px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px;
  border-radius:100px;
  font-size:0.95rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{background:var(--brick-dark); color:var(--paper);}
.btn-primary:hover{background:var(--ink); transform:translateY(-2px);}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:var(--paper); transform:translateY(-2px);}

.hero-photo-slot{
  justify-self:end;
  width:100%;
  max-width:520px;
  margin:0;
}
.photo-frame{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:var(--radius);
  background:var(--paper-2);
  border:1px solid var(--line);
}

/* ---------- SECTION HEADERS ---------- */
.section-pad{padding:120px 0;}
.section-head{
  max-width:640px;
  margin-bottom:64px;
}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  line-height:1.1;
}
.section-head p{
  margin-top:18px;
  font-size:1.05rem;
  color:var(--ink-soft);
}

/* ---------- EXPERIENCE — frise chronologique horizontale (famille 2,
   choix client explicite : 3 étapes reliées par un filet --line, repère
   discret --brick par étape, réplique en frise verticale sous 900px) ---------- */
.experience{background:var(--paper-2);}
.timeline{
  list-style:none;
  margin:0;
  padding:22px 0 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  top:22px; left:0; right:0;
  height:1px;
  background:var(--line);
}
.t-step{
  position:relative;
  padding-top:34px;
}
.t-mark{
  position:absolute;
  top:17.5px; left:0;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--brick);
}
.t-step h3{
  font-size:1.5rem;
  margin-bottom:12px;
}
.t-step p{
  color:var(--ink-soft);
  font-size:1rem;
}

/* ---------- CYNTHIA — portrait en marge fixe + colonne de texte
   (famille 3, conservée : c'est déjà une composition asymétrique) ---------- */
.motto{
  max-width:820px;
  margin:0 auto 90px;
  text-align:center;
  position:relative;
  padding:0 20px;
}
.motto::before{
  content:"";
  display:block;
  width:40px;
  height:2px;
  background:var(--brick);
  margin:0 auto 32px;
}
.motto p{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.5rem, 3.2vw, 2.15rem);
  line-height:1.45;
  color:var(--ink);
}
.cynthia{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:70px;
  align-items:flex-start;
}
.cynthia-portrait{
  position:sticky; top:110px;
  margin:0;
}
.portrait-slot{
  aspect-ratio:3/4;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.portrait-slot img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.portrait-tag{
  margin-top:20px;
  font-family:var(--ff-mono);
  font-size:0.8rem;
  color:var(--ink-soft);
}
.portrait-tag strong{display:block; font-family:var(--ff-body); font-weight:600; color:var(--ink); font-size:1rem; margin-bottom:4px;}

.bio p{
  margin-bottom:22px;
  font-size:1.03rem;
  color:var(--ink-soft);
}

/* ---------- NOT FOR YOU — manifeste plein cadre, fond inversé
   (famille 4, conservée) ---------- */
.not-for-you{
  background:var(--ink);
  color:var(--paper);
  padding:120px 0;
}
.where-when{
  background:var(--ink);
  color:var(--paper);
  padding:100px 0;
}
.ww-inner{max-width:680px;}
.where-when h2{
  color:var(--paper);
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  line-height:1.15;
  margin-bottom:24px;
}
.where-when p{
  color:rgba(247,239,227,0.78);
  font-size:1.05rem;
  max-width:560px;
  margin-bottom:16px;
}
.where-when p:last-child{margin-bottom:0;}
.ww-accent{
  font-weight:700;
  color:var(--brick-tint);
}
.ww-accent--caps{
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.nfy-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
  align-items:start;
}
.not-for-you h2{
  color:var(--paper);
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  line-height:1.15;
}
.not-for-you .lead{
  margin-top:20px;
  color:rgba(247,239,227,0.65);
  font-size:1.02rem;
  max-width:420px;
}
.nfy-list{list-style:none; margin:0; padding:0;}
.nfy-list li{
  display:flex;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid rgba(247,239,227,0.14);
  font-family:var(--ff-display);
  font-size:1.18rem;
  color:rgba(247,239,227,0.92);
  align-items:flex-start;
}
.nfy-list li:first-child{padding-top:0;}
.nfy-list li::before{
  content:"×";
  font-family:var(--ff-mono);
  font-style:normal;
  font-size:1rem;
  color:var(--brick-tint);
  border:1px solid var(--brick-tint);
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  margin-top:4px;
}

/* ---------- TEMOIGNAGES — citations éditoriales empilées, alignement
   alterné (famille 5 : plus de cartes, plus de grille de 3) ---------- */
.testi-list{
  display:flex;
  flex-direction:column;
}
.testi-item{
  display:flex;
  gap:28px;
  align-items:flex-start;
  max-width:680px;
  padding:44px 0;
  border-top:1px solid var(--line);
}
.testi-item:first-child{border-top:1px solid var(--ink);}
.testi-item:nth-child(1){margin-right:auto;}
.testi-item:nth-child(2){margin-left:auto; flex-direction:row-reverse; text-align:right;}
.testi-item:nth-child(3){margin-right:auto; margin-left:64px;}
.testi-content{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.testi-quote{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1rem, 1.9vw, 1.2rem);
  line-height:1.5;
  color:var(--ink);
  margin:0;
}
.testi-name{
  margin-top:18px;
  font-family:var(--ff-mono);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--brick-dark);
}
.testi-avatar{
  width:88px;
  height:88px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--brick);
  flex-shrink:0;
}

/* ---------- RENCONTRE — programme tabulaire, dates en colonne de marge
   (famille 6 : différente de la liste "témoignages" et de la grille
   "3 cartes" bannie) ---------- */
.meet{background:var(--paper-2);}
.agenda{
  display:flex;
  flex-direction:column;
}
.agenda-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:40px;
  padding:32px 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.agenda-row:first-child{border-top:1px solid var(--ink);}
.agenda-date{
  font-family:var(--ff-mono);
  font-size:0.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--brick-dark);
  margin:0;
  line-height:1.6;
  padding-right:24px;
  border-right:1px solid var(--line);
}
.agenda-body h3{
  font-size:1.2rem;
  margin-bottom:8px;
  font-weight:500;
}
.agenda-body p{
  color:var(--ink-soft);
  font-size:0.96rem;
  margin:0;
}

/* ---------- CONTACT — déclaration centrée + barre de coordonnées
   horizontale (famille 7 : seule section volontairement centrée,
   les autres varient leurs alignements) ---------- */
.contact{
  padding:130px 0 60px;
  text-align:center;
}
.contact-lead{
  max-width:720px;
  margin:0 auto 60px;
}
.contact h2{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  line-height:1.06;
}
.contact h2 em{font-style:italic; color:var(--brick);}
.contact-bar{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
}
.contact-link{
  flex:1 1 220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:28px 24px;
  text-decoration:none;
  color:var(--ink);
  border-right:1px solid var(--line);
  margin:0;
}
.contact-link:last-child{border-right:none;}
.contact-link--static{cursor:default;}
.contact-link .label{
  font-family:var(--ff-mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-soft);
}
.contact-link .value{
  font-family:var(--ff-display);
  font-size:1.3rem;
  transition:color .25s ease;
}
.contact-link:hover .value, .contact-link:focus-visible .value{color:var(--brick-dark);}

/* Formulaire de contact (Formspree) + bloc RGPD : seul bloc de la section
   remis à gauche, le reste de .contact restant centré. */
.contact-form-wrap{
  max-width:560px;
  margin:64px auto 0;
  text-align:left;
}
.form-intro{
  color:var(--ink-soft);
  font-size:1rem;
  margin-bottom:8px;
}
.form-required-note{
  font-family:var(--ff-mono);
  font-size:0.75rem;
  color:var(--ink-soft);
  margin-bottom:32px;
}
.form-error{
  margin-bottom:24px;
  padding:14px 18px;
  border-radius:var(--radius);
  background:var(--paper-2);
  border-left:3px solid var(--brick-dark);
  color:var(--ink);
  font-size:0.95rem;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-field label{
  font-family:var(--ff-mono);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-soft);
}
.form-field .req{color:var(--brick-dark);}
.form-field input,
.form-field textarea{
  font-family:var(--ff-body);
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:10px 2px;
}
.form-field input:focus-visible,
.form-field textarea:focus-visible{
  outline:none;
  border-bottom-color:var(--brick-dark);
}
.form-field textarea{resize:vertical; min-height:120px;}
.contact-form .btn{align-self:flex-start; margin-top:6px;}
.form-privacy{
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.form-privacy h3{
  font-size:1rem;
  margin-bottom:14px;
}
.form-privacy p{
  color:var(--ink-soft);
  font-size:0.88rem;
  line-height:1.7;
}

/* ---------- MERCI — page de remerciement post-formulaire (utilitaire,
   autonome, noindex, zéro JS — voir DESIGN.md). Le burger/menu mobile est
   absent de cette page (il dépend de script.js) : sous 900px, les liens de
   nav restent visibles et passent à la ligne au lieu de se cacher derrière
   un bouton qui ne répondrait à aucun clic. ---------- */
.thanks{
  min-height:calc(100vh - 250px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:190px 0 110px;
  text-align:center;
}
.thanks-inner{max-width:560px; margin:0 auto;}
.thanks-mark{display:block; width:48px; height:auto; margin:0 auto 28px;}
.thanks h1{font-size:clamp(2rem, 4.4vw, 2.9rem); line-height:1.15; color:var(--ink);}
.thanks p{margin-top:22px; font-size:1.1rem; color:var(--ink-soft);}
.thanks-back{
  display:inline-block;
  margin-top:40px;
  font-family:var(--ff-mono);
  font-size:0.9rem;
  color:var(--brick-dark);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.thanks-back:hover, .thanks-back:focus-visible{border-color:var(--brick-dark);}

body.page-merci .nav-inner{flex-wrap:wrap; row-gap:14px;}
@media (max-width:900px){
  body.page-merci .nav-links{display:block;}
  body.page-merci .nav-links ul{flex-wrap:wrap; gap:16px 28px;}
}

.site-footer{padding:0 0 60px;}
.footer-row{
  padding-top:34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  font-size:0.85rem;
  color:var(--ink-soft);
}
.footer-logo{
  font-family:var(--ff-display);
  font-size:1.1rem;
  color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.footer-logo .footer-heart{height:18px; width:auto; display:block;}

/* reveal on scroll (progressive enhancement, see script.js — <noscript> fallback in index.html shows content immediately without JS) */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}

/* Barre d'action fixe mobile (voir script.js — apparaît une fois le hero
   sorti du viewport) : masquée par défaut, réactivée dans le breakpoint
   900px ci-dessous. */
.mobile-cta-bar{display:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .nav-links{display:none;}
  .burger{display:block;}
  .hero-foot{grid-template-columns:1fr; align-items:start;}
  .hero-photo-slot{justify-self:stretch; max-width:100%; margin-top:36px;}
  .cynthia{grid-template-columns:1fr; gap:40px;}
  .cynthia-portrait{position:static;}
  .portrait-slot{max-width:340px;}
  .timeline{grid-template-columns:1fr; gap:36px; padding-top:0;}
  .timeline::before{top:0; bottom:0; left:4px; right:auto; width:1px; height:auto;}
  .t-step{padding-top:0; padding-left:36px;}
  .t-mark{top:6px; left:0;}
  .nfy-grid{grid-template-columns:1fr; gap:36px;}
  .testi-item{flex-direction:column; gap:16px;}
  .testi-item:nth-child(2){margin-left:0; text-align:left; flex-direction:column;}
  .testi-item:nth-child(3){margin-left:0;}
  .agenda-row{grid-template-columns:1fr; gap:12px;}
  .agenda-date{border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:10px;}
  .contact-bar{flex-direction:column;}
  .contact-link{border-right:none; border-bottom:1px solid var(--line);}
  .contact-link:last-child{border-bottom:none;}
  .section-pad{padding:80px 0;}
  .container{padding:0 22px;}
  .mobile-cta-bar{
    display:flex;
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:100;
    gap:14px;
    justify-content:center;
    padding:14px 20px calc(14px + env(safe-area-inset-bottom));
    background:var(--paper);
    border-top:1px solid var(--line);
    opacity:0;
    transform:translateY(100%);
    transition:opacity .3s ease, transform .3s ease;
  }
  .mobile-cta-bar.visible{opacity:1; transform:translateY(0);}
}
@media (max-width: 560px){
  .hero{padding:120px 0 70px;}
  .hero h1{font-size:2.3rem; max-width:none;}
}