/* site.css — site public — s’appuie sur socle.css pour TOUTE couleur.
   ⚠ AUCUN bloc :root ici : la palette vit dans socle.css, qui doit
     être chargé AVANT ce fichier. Voir l’en-tête de socle.css. */

@font-face{font-family:"Adorage";font-weight:400;font-display:swap;
  src:url("/assets/fonts/Adorage.otf") format("opentype");}
@font-face{font-family:"Amalfi";font-weight:400;font-display:swap;
  src:url("/assets/fonts/AmalfiCoast.ttf") format("truetype");}
@font-face{font-family:"Poppins";font-weight:300;font-display:swap;src:url("/assets/fonts/Poppins-Light.ttf") format("truetype");}
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url("/assets/fonts/Poppins-Regular.ttf") format("truetype");}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url("/assets/fonts/Poppins-Medium.ttf") format("truetype");}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url("/assets/fonts/Poppins-SemiBold.ttf") format("truetype");}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url("/assets/fonts/Poppins-Bold.ttf") format("truetype");}

/* ============================================================
   CHARTE v2 — ivoire lumineux · vert profond · or bijou
   Le vert profond fait chanter l'or et apporte le végétal.
   Titres en quasi-noir : contraste franc, pas de brun terne.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--ground);color:var(--ink-2);
  font-family:"Poppins",system-ui,sans-serif;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0;line-height:1.14;text-wrap:balance;color:var(--ink);font-weight:700;letter-spacing:-.022em;}
.blk h2,.hero h1,.contact h2{font-family:"Adorage","Poppins",serif;font-weight:400;letter-spacing:.004em;line-height:1.1;}
/* trait signature sous les titres, repris du document */
.blk h2::after{content:"";display:block;width:58px;height:5px;background:var(--or);margin-top:18px;border-radius:2px;}
.contact h2::after{margin-left:auto;margin-right:auto;}
p{margin:0;}
img{max-width:100%;display:block;}
.wrap{max-width:1160px;margin:0 auto;padding:0 26px;}
.narrow{max-width:730px;}
/* ⚠ CE CONTOUR ÉTAIT INVISIBLE. Il appelait var(--or-fonce), un jeton qui
   n’a jamais existé — le vrai nom est --or-f. Quelqu’un qui navigue au
   clavier ne voyait donc pas où il se trouvait sur le site public. */
:focus-visible{outline:2px solid var(--or-f);outline-offset:3px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* --- Libellé fin doré, répété comme signature --- */
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or-texte);display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--or);flex:none;}
.eyebrow.center{justify-content:center;}

/* --- BOUTONS : couleurs figées, jamais héritées --- */
a.btn,button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bg);border-radius:999px;
  padding:14px 30px;font-family:"Poppins",sans-serif;font-size:14.5px;font-weight:600;
  text-decoration:none;cursor:pointer;letter-spacing:.01em;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;}
a.btn:hover,button.btn:hover{background:var(--btn-bg-hover);transform:translateY(-2px);box-shadow:var(--shadow-xl);}
a.btn--lg{padding:17px 38px;font-size:16px;}
a.btn--outline{background:transparent;color:var(--ink);border-color:var(--line-s);}
a.btn--outline:hover{background:var(--panel);color:var(--ink);border-color:var(--or);}
a.btn--onvert{background:var(--or);color:#173247;border-color:var(--or);}
a.btn--onvert:hover{background:var(--or-c);color:#173247;}

/* --- NAV --- */
nav.site{position:sticky;top:0;z-index:60;background:var(--nav-bg);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav-in{max-width:1160px;margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:8px;}
.nav-logo{height:48px;width:auto;}
.nav-menu{display:flex;gap:30px;margin-left:auto;align-items:center;}
a.nav-link{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--muted);white-space:nowrap;
  transition:color .16s ease;}
a.nav-link:hover{color:var(--ink);}
a.nav-espace{text-decoration:none;font-size:13.5px;font-weight:600;color:var(--ink);
  border:1px solid var(--line-s);border-radius:999px;padding:9px 17px;white-space:nowrap;}
a.nav-espace:hover{border-color:var(--or);background:var(--panel);}
@media(max-width:960px){a.nav-link{display:none;}}

/* --- LE MENU DE REPLI (sous 960 px) ---
   ⚠ Jusqu'au 29/09/2026, la ligne ci-dessus masquait les six liens de
     navigation sans rien mettre à la place : sur téléphone et sur tablette,
     l'en-tête ne proposait plus que « Mon espace » et « Prendre rendez-vous ».
     Les pages restaient atteignables par le pied, tout en bas — autant dire
     par personne. */
/* ⚠ ON DÉSHABILLE D'ABORD. Plus bas dans cette feuille, `details{...}` pose
     le costume de l'accordéon de la FAQ : fond, bordure, coins, marge — et
     surtout `overflow:hidden`, plus un chevron en `summary::after`. Posé tel
     quel, ce menu héritait des deux : le panneau était découpé aux 42 px du
     bouton (invisible, et insensible au clic — vérifié par
     `elementFromPoint`, qui renvoyait le titre de la page au travers), et le
     chevron de la FAQ s'affichait à la place du pictogramme. Deux symptômes,
     une seule cause, et elle ne se voyait pas dans le gabarit. */
.nav-repli{display:none;position:relative;overflow:visible;
  background:none;border:0;border-radius:0;margin:0;box-shadow:none;}
.nav-repli[open]{border:0;box-shadow:none;}
.nav-repli summary{list-style:none;cursor:pointer;width:42px;height:42px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-s);border-radius:var(--radius-sm);
  transition:border-color .15s;}
.nav-repli summary::-webkit-details-marker{display:none;}
.nav-repli summary::marker{content:"";}
.nav-repli summary::after{display:none;}
/* ⚠ flex:none, sinon la barre se réduit à rien. Le <summary> est un conteneur
   flex de 42 px : sans cette ligne l'icône était un élément flexible que le
   navigateur comprimait à 0 px de large — elle avait bien ses 21 px de haut,
   et pas un pixel de large. */
.nav-repli summary svg{flex:none;width:21px;height:21px;fill:none;stroke:var(--ink);
  stroke-width:2;stroke-linecap:round;}
.nav-repli[open] summary{border-color:var(--or);}
.nav-repli .panneau{position:absolute;right:0;top:calc(100% + 12px);min-width:215px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:9px;z-index:70;}
.nav-repli .panneau a{display:block;padding:11px 14px;border-radius:var(--radius-sm);
  text-decoration:none;font-size:15px;color:var(--ink);white-space:nowrap;}
.nav-repli .panneau a:hover{background:var(--panel);}
.nav-repli .panneau a.est-actif{color:var(--or-texte);font-weight:600;}
.nav-repli .panneau a.espace{margin-top:6px;padding-top:14px;
  border-top:1px solid var(--line);color:var(--or-texte);font-weight:600;border-radius:0;}

@media(max-width:960px){
  .nav-repli{display:block;}
  .nav-menu{margin-left:auto;gap:9px;}
  /* ⚠ Et on empêche le bouton de rendez-vous de se casser en trois lignes :
     à 375 px il s'affichait « Prendre / rendez- / vous » dans une pastille
     ronde deux fois plus haute que le logo. */
  nav.site .nav-menu .btn{font-size:13.5px;padding:11px 15px;white-space:nowrap;}
  a.nav-espace{white-space:nowrap;}
}
@media(max-width:430px){
  /* Sous cette largeur, les deux boutons et la pastille ne tiennent plus
     ensemble : « Mon espace » se retrouve dans le panneau ci-dessus et
     dans le panneau, l'en-tête garde l'action qui rapporte. */
  a.nav-espace{display:none;}
}

/* --- HERO : deux colonnes, plus personnel --- */
.hero{padding:64px 0 78px;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;top:-320px;right:-220px;width:820px;height:820px;
  border-radius:50%;background:radial-gradient(circle,rgba(201,162,92,.20),transparent 64%);
  pointer-events:none;}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center;position:relative;}
.hero h1{font-size:clamp(34px,4.9vw,57px);}
.hero h1 .em{font-family:"Amalfi","Poppins",cursive;font-weight:400;color:var(--or-texte);
  font-size:1.02em;letter-spacing:.005em;}
.kicker{font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--or-texte);line-height:1.65;margin-bottom:22px;max-width:40ch;}
.hero .sub{font-size:18.5px;color:var(--muted);max-width:46ch;margin-top:24px;font-weight:300;}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px;}
.hero-note{margin-top:22px;font-size:13.5px;color:var(--faint);}

.hero-visual{position:relative;}
.hero-photo{aspect-ratio:4/5;border-radius:230px 230px 22px 22px;overflow:hidden;
  background:linear-gradient(165deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-s);display:grid;place-items:center;box-shadow:var(--shadow-lg);}
.hero-photo span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  text-align:center;line-height:2;padding:0 32px;}
.hero-badge{position:absolute;left:-22px;bottom:38px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:15px 20px;box-shadow:var(--shadow-lg);}
.hero-badge .n{font-size:27px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;}
.hero-badge .l{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:5px;font-weight:600;}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:44px;}
  .hero-photo{max-width:330px;margin:0 auto;}.hero-badge{left:0;}}

/* --- PROMESSES --- */
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:0;
  margin-top:12px;border-top:1px solid var(--line);}
.promise{padding:26px 26px 26px 0;border-right:1px solid var(--line);}
.promise:last-child{border-right:0;}
.promise .ic{width:38px;height:38px;border-radius:50%;
  background:var(--panel);display:grid;place-items:center;margin-bottom:14px;}
.promise .ic svg{width:18px;height:18px;stroke:var(--or-texte);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.promise p{font-size:15px;line-height:1.58;font-weight:500;color:var(--ink);}
@media(max-width:880px){.promise{border-right:0;border-bottom:1px solid var(--line);padding-right:0;}}

/* --- BANDEAU VERT : les chiffres, en bijou --- */
.stats{background:var(--nuit);color:#FFFFFF;padding:60px 0;margin-top:70px;position:relative;overflow:hidden;}
.stats::before{content:"";position:absolute;top:-140px;left:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,92,.14),transparent 66%);}
.stats-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:34px;
  text-align:center;position:relative;}
.stat .n{font-size:clamp(34px,4.7vw,50px);font-weight:700;color:var(--or);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;}
.stat .l{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:#C9D6DE;margin-top:11px;font-weight:600;}

/* --- SECTIONS --- */
/* ⚠ 88 px EN HAUT ET EN BAS, ÇA FAIT 176 px ENTRE DEUX SECTIONS. Mesuré le
   01/10/2026 sur la page d'accueil : 178 px et 207 px de vide réel d'un
   contenu à l'autre — assez pour qu'on croie la page finie avant la suite.
   Le rembourrage d'une section se lit toujours DOUBLÉ, puisqu'il rencontre
   celui de la section voisine ; c'est l'erreur de calcul la plus facile à
   faire en mise en page.

   À 56 px, l'écart tombe à 112 px : la page respire encore, sans trou. Et il
   se resserre encore sur les petits écrans, où la hauteur est rare. */
section.blk{padding:56px 0;}
@media(max-width:760px){section.blk{padding:40px 0;}}
.blk h2{font-size:clamp(28px,3.7vw,42px);}
.blk .lead{font-size:18.5px;color:var(--muted);margin-top:20px;font-weight:300;line-height:1.78;}

.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;}
.about-photo{aspect-ratio:1;border-radius:50%;background:linear-gradient(150deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-s);display:grid;place-items:center;position:relative;box-shadow:var(--shadow-lg);}
.about-photo::after{content:"";position:absolute;inset:-13px;border-radius:50%;
  border:1px solid var(--or);}
.about-photo span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  text-align:center;line-height:2;}
.signature{font-family:"Amalfi","Poppins",serif;font-size:31px;color:var(--or-texte);margin-top:26px;}
@media(max-width:880px){.about{grid-template-columns:1fr;gap:38px;}.about-photo{max-width:280px;margin:0 auto;}}

/* --- MÉTHODE --- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px;margin-top:46px;}
.step{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 26px;
  box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.step .num{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--nuit);color:var(--or);font-size:16px;font-weight:700;margin-bottom:17px;}
.step h3{font-size:17.5px;margin-bottom:10px;}
.step p{font-size:14.5px;color:var(--muted);line-height:1.65;}

/* --- TÉMOIGNAGES --- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:44px;}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 28px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:17px;}
.quote .mark{font-family:"Amalfi","Poppins",serif;font-size:52px;color:var(--or-f);line-height:.55;height:24px;}
.quote p{font-size:15.5px;line-height:1.75;color:var(--ink-2);}
.quote .who{font-size:13.5px;color:var(--muted);margin-top:auto;}
.quote .who b{color:var(--ink);font-weight:600;}
.rating{display:flex;gap:3px;}
.rating svg{width:15px;height:15px;fill:var(--or-f);}
.avis-bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:34px;padding:22px 28px;background:var(--panel);border:1px dashed var(--line-s);
  border-radius:16px;font-size:14px;color:var(--muted);text-align:center;}

/* --- FAQ --- */
details{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden;}
details[open]{border-color:var(--or);box-shadow:var(--shadow);}
summary{padding:21px 24px;font-size:16.5px;font-weight:500;color:var(--ink);cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--or-f);
  border-bottom:2px solid var(--or-f);transform:rotate(45deg);flex:none;margin-top:-5px;
  transition:transform .2s ease;}
details[open] summary::after{transform:rotate(-135deg);margin-top:3px;}
details p{padding:0 24px 23px;font-size:15.5px;color:var(--muted);line-height:1.78;}

/* --- CONTACT sur fond vert --- */
.contact{background:var(--nuit);color:#FFFFFF;border-radius:30px;padding:62px 50px;
  text-align:center;position:relative;overflow:hidden;}
.contact::before{content:"";position:absolute;bottom:-190px;right:-130px;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(circle,rgba(201,162,92,.18),transparent 65%);}
.contact>*{position:relative;}
.contact h2{color:var(--or);max-width:19ch;margin:0 auto;}
.contact .lead{color:var(--sur-nuit-2);max-width:52ch;margin:20px auto 0;}
.form-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;
  margin-top:38px;text-align:left;}
.field{background:rgba(255,255,255,.10);border:1px solid rgba(244,239,228,.22);border-radius:12px;padding:14px 17px;}
.field .lab{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);font-weight:600;}
.field .val{font-size:14px;color:var(--sur-nuit-2);margin-top:4px;}
.field.wide{grid-column:1/-1;background:transparent;border:0;padding:8px 0 0;}

/* --- FOOTER ---

   ⚠ LE PIED EST BLEU NUIT, ET IL L'ÉTAIT DÉJÀ « À MOITIÉ ». Relevé le
     29/09/2026 sur le site en ligne : ce fond valait var(--panel) — #F2F5F7,
     un gris très clair — pendant que _pied.blade.php écrivait TOUS ses styles
     pour une surface sombre. Deux fichiers, deux avis, et c'est l'écran qui
     tranchait :

       « La lettre de Laetitia »   blanc sur #F2F5F7  → contraste 1,09:1
       son texte, et la signature  #C9D6DE            → contraste 1,35:1
       le champ e-mail             fond et bordure blancs à 6 % et 22 %,
                                   texte saisi en blanc

     Le minimum lisible est 4,5:1. Autrement dit : sur TOUTES les pages du
     site, le bloc d'inscription à la lettre était invisible, et une visiteuse
     qui l'aurait trouvé aurait tapé du blanc sur du blanc.

     Le socle a la paire faite pour ça — --fond-nuit / --sur-nuit /
     --sur-nuit-2 — et elle ne bascule pas avec le thème, justement parce
     qu'une surface toujours sombre a besoin de couleurs toujours claires.
     C'est elle qu'on emploie ici, et --or-c (clair) et non --or-texte
     (#8F6A22, fait pour du texte sur fond blanc).                          */
footer.site{background:var(--fond-nuit);padding:62px 0 36px;margin-top:88px;}
/* ⚠ QUATRE COLONNES POUR QUATRE BLOCS. Il y en avait trois déclarées, et le
   gabarit en pose quatre depuis toujours : « Informations » basculait seul
   sur une deuxième ligne, sous le logo, et donnait au pied son air décousu. */
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px;}
.foot-grid h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-c);
  margin-bottom:16px;font-weight:600;}
a.foot-link{font-size:14px;color:var(--sur-nuit-2);text-decoration:none;display:block;margin-bottom:9px;}
a.foot-link:hover{color:var(--sur-nuit);}
.foot-grid p{font-size:14px;color:var(--sur-nuit-2);line-height:1.68;}
.seo-line{font-size:13px;color:var(--sur-nuit-2);line-height:1.72;margin-top:38px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);opacity:.82;}
.legal{font-size:11.5px;color:var(--sur-nuit-2);margin-top:18px;line-height:1.72;opacity:.82;}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:34px;}}
@media(max-width:620px){.foot-grid{grid-template-columns:1fr;gap:30px;}}
@media(max-width:820px){.contact{padding:42px 24px;}}

/* --- LES COMPTES PUBLICS ---
   Deux présentations pour un seul gabarit (site/_reseaux.blade.php) : des
   pastilles dans le pied, des cartes nommées sur la page Témoignages. */
.reseaux{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.reseaux a{display:flex;align-items:center;text-decoration:none;}
.reseaux svg{width:20px;height:20px;fill:currentColor;flex:none;}

.reseaux--icones a{width:40px;height:40px;justify-content:center;border-radius:50%;
  color:var(--sur-nuit-2);border:1px solid rgba(255,255,255,.22);
  transition:color .15s,background-color .15s,border-color .15s;}
.reseaux--icones a:hover{color:var(--btn-or-fg);background:var(--or);border-color:var(--or);}
/* Le nom reste dans le flux pour les lecteurs d'écran, hors de l'œil. */
.reseaux--icones span{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

.reseaux--cartes{gap:12px;}
.reseaux--cartes a{gap:10px;padding:12px 18px;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--line-s);color:var(--ink);
  font-size:14.5px;font-weight:600;transition:border-color .15s,box-shadow .15s,transform .15s;}
.reseaux--cartes a:hover{border-color:var(--or);box-shadow:var(--shadow);transform:translateY(-1px);}
.reseaux--cartes svg{color:var(--or-texte);}
@media(max-width:520px){.reseaux--cartes a{flex:1 1 100%;justify-content:center;}}

/* ---------------------------------------------------------------
   Découpage en pages : liens de suite, onglet actif, mentions
   légales restant à renseigner.
   --------------------------------------------------------------- */
.lien-suite{color:var(--or-texte);font-weight:600;text-decoration:none;font-size:14.5px;}
.lien-suite:hover{text-decoration:underline;}

.nav-link.est-actif{color:var(--or-texte);font-weight:600;}

/* Signale visiblement une mention légale non encore fournie. */
.a-completer{background:#FBF3E1;color:#8A6414;border:1px dashed #8A6414;
  border-radius:5px;padding:1px 7px;font-size:.88em;font-weight:600;font-style:normal;}

/* Pages légales : titres de section lisibles dans un texte long. */
.blk h2{margin-top:38px;margin-bottom:12px;font-size:20px;}
.blk h2:first-of-type{margin-top:26px;}