/* ============================================================
   REFONTE GRAPHIQUE — registre "cabinet d'avocat" clair
   Feuille d'override chargée en dernier sur chaque page :
   fond clair, marine, laiton, titres Garamond.
   Ne modifie ni le contenu ni la structure des pages —
   uniquement le registre visuel (couleurs, fond, typographie).
   Référence : brief d'implémentation du 20 juillet 2026.
   ============================================================ */

/* ---------- Jetons de couleur (annexe du brief) ---------- */
:root{
  --fond-page:#FBFAF8;
  --texte-courant:#4C5568;
  --titres:#182338;
  --marine:#16233C;
  --marine-dark:#101a2c;
  --marine-deep:#0d1522;
  --marine-night:#0a1119;
  --laiton:#9C7A45;
  --vert-wa:#1EA952;
  --filet:#E6E1D8;

  /* Redéclaration des variables CSS déjà utilisées par le site
     (gabarits "article" et gabarits à variables --indigo/--jaune) :
     ces redéclarations, chargées en dernier, l'emportent sur les
     :root d'origine (css/style.css et les blocs <style> de page). */
  --indigo:var(--marine);
  --indigo-dark:var(--marine-dark);
  --indigo-deep:var(--marine-deep);
  --indigo-night:var(--marine-night);
  --indigo-pale:#F3F1EC;
  --indigo-soft:var(--filet);
  --jaune:var(--laiton);
  --ink:var(--titres);
  --muted:var(--texte-courant);
  --line:var(--filet);
  --fond:var(--fond-page);
  --blanc:#FFFFFF;
  --brass:var(--laiton);
  --brass-light:var(--laiton);
}

/* ---------- Typographie serif pour les titres ---------- */
h1,h2,h3,
.une-corps h3,.card-publie h3,.card h3,.card-avenir h3,
.jugement-corps h3,.faq-item summary,.faq-item h3{
  font-family:'EB Garamond',Georgia,serif !important;
}
body{
  background-color:var(--fond-page) !important;
  color:var(--texte-courant) !important;
}

/* ---------- Fond de page : suppression de tout motif décoratif ---------- */
body{
  background-image:none !important;
}

/* ---------- En-têtes / bandeaux (gabarits à variables CSS) ---------- */
.site-header{background:var(--marine) !important;color:#fff !important;border-bottom:0;}
.site-header .brand,.site-header .brand strong{color:#fff !important;}
.brand span,.brand .brand-stars{color:var(--laiton) !important;}
.header-contact{background:#fff !important;color:var(--titres) !important;}
.header-contact a{color:var(--titres) !important;}
.header-contact a:hover{color:var(--laiton) !important;}
.header-contact a.btn-jaune{background:var(--marine) !important;color:#fff !important;}
.header-contact a.btn-jaune:hover{background:var(--marine-dark) !important;color:#fff !important;}
.header-contact a.btn-ghost{background:#fff !important;color:var(--marine) !important;border-color:var(--laiton) !important;}
.site-header .brand .sous{color:var(--laiton) !important;}
.mainnav{background:var(--marine-dark) !important;border-bottom:1px solid rgba(255,255,255,.08);}
.mainnav a{color:#fff !important;}
.mainnav a:hover{color:var(--laiton) !important;border-bottom-color:var(--laiton) !important;}
.art-hero,.hub-hero{background:var(--marine) !important;color:#f3f4f6 !important;}
.art-hero h1,.hub-hero h1{color:#fff !important;}
.art-hero .eyebrow{color:var(--marine-deep) !important;background:var(--laiton) !important;}
.hub-hero .eyebrow{color:var(--marine-deep) !important;background:var(--laiton) !important;}
.art-hero .art-meta,.art-hero .art-meta strong,.hub-hero .lede{color:rgba(255,255,255,.85) !important;}

/* ---------- Boutons : fond marine, texte blanc (jamais laiton) ---------- */
.btn-jaune,.mnav2-panel a.mcta,.mn-cta,a.mcta{
  background:var(--marine) !important;
  color:#fff !important;
}
.btn-jaune:hover,.mnav2-panel a.mcta:hover,.mn-cta:hover,a.mcta:hover{
  background:var(--marine-dark) !important;
}

/* ---------- Panneau menu mobile (charte marine) ---------- */
.mnav2-panel{background:var(--marine-dark) !important;}
.mnav2-panel a{color:#fff !important;}
.mnav2-panel a:hover,.mnav2-panel a:active{background:rgba(255,255,255,.08) !important;color:var(--laiton) !important;}
.mnav2 summary{background:rgba(255,255,255,.04) !important;}

/* ---------- Focus / liens / accents fins ---------- */
.art-page a:focus-visible,.art-page button:focus-visible,
.hub-page a:focus-visible,.hub-page button:focus-visible,
:focus-visible{outline-color:var(--laiton) !important;}
.skip-link{background:var(--laiton) !important;color:#fff !important;}

/* ---------- Gabarits à classes Tailwind littérales (pages "avocat-…") ----------
   css/style.css contient déjà plusieurs couches d'overrides historiques sur
   "header.bg-indigo-700" (élément + classe, donc plus spécifiques qu'une
   simple règle de classe) qui forcent le charcoal/jaune (#3f3e3b / #ffd400 /
   #26282c / #141413) avec !important. On reproduit ici les MÊMES sélecteurs
   (même spécificité), chargés en dernier, pour être certain de l'emporter. */
.bg-indigo-700,.bg-indigo-800,.bg-indigo-900,
header.bg-indigo-700,header.bg-indigo-700.bg-indigo-700{background-color:var(--marine) !important;color:#fff !important;}
.text-indigo-700,.text-indigo-800{color:var(--marine) !important;}
.text-indigo-900,header.bg-indigo-700 .text-indigo-900{color:#fff !important;}
.text-yellow-200,.text-yellow-300,.text-yellow-400,
header.bg-indigo-700 p.text-yellow-300,
header.bg-indigo-700 .bg-indigo-800\/70 .text-yellow-200,
.hover\:text-yellow-200:hover,.hover\:text-yellow-300:hover{color:var(--laiton) !important;}
header.bg-indigo-700 p.text-white{color:#fff !important;}
header.bg-indigo-700 .bg-indigo-800\/70{background:#fff !important;color:var(--titres) !important;}
header.bg-indigo-700 .bg-indigo-800\/70 .text-white,
header.bg-indigo-700 .bg-indigo-800\/70 a{color:var(--titres) !important;}
.bg-yellow-100,.bg-yellow-300,.bg-yellow-400,
.hover\:bg-yellow-100:hover,.hover\:bg-yellow-400:hover{
  background-color:var(--marine) !important;color:#fff !important;
}
.border-yellow-300,.border-yellow-400{border-color:var(--laiton) !important;}

/* ---------- Pagehead (gabarits "avocat-…", hors .art-hero/.hub-hero) ---------- */
.pagehead h1,.pagehead .lede,.pagehead p{color:var(--titres) !important;}
.pagehead .eyebrow{color:var(--marine-deep) !important;}

/* ---------- Barres flottantes (nouveau markup, voir injection HTML) ---------- */
.floating-actions{
  position:fixed; right:16px; bottom:16px; z-index:9995;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.fab{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px; border-radius:999px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px;
  text-decoration:none; color:#fff;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.4);
  transition:transform .12s, box-shadow .12s;
}
.fab:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(0,0,0,.45); text-decoration:none; }
.fab-wa{ background:var(--vert-wa); }
.fab-call{ background:var(--marine); }
@media(max-width:520px){
  .fab span{ display:none; }
  .fab{ padding:14px; }
}

/* ---------- Ancien bouton flottant "Réserver" de l'accueil : recoloré, pas supprimé ---------- */
.cta-book-floating{background:var(--marine) !important;color:#fff !important;}

/* ============================================================
   Contraste de texte — gabarit partagé ".fresque-page"
   (css/style.css). Ce gabarit assombrissait la page entière et
   éclaircissait le texte hors bandeau (fil d'Ariane, bloc de
   liens en pied de page, footer du site) en conséquence : sur
   fond clair, ce texte blanc/pâle devient illisible. On rétablit
   ici un texte sombre, avec la même spécificité + !important que
   les règles d'origine pour être certain de les emporter.
   ============================================================ */
body.fresque-page .breadcrumb{color:var(--texte-courant) !important;border-bottom-color:var(--filet) !important;}
body.fresque-page .breadcrumb a{color:var(--marine) !important;}
body.fresque-page .breadcrumb .sep{color:#9CA3AF !important;}
body.fresque-page .breadcrumb span{color:var(--titres) !important;}

body.fresque-page .bg-gray-50.border-b{background:var(--fond-page) !important;border-color:var(--filet) !important;}
body.fresque-page .bg-gray-50.border-b .text-gray-500{color:var(--texte-courant) !important;}
body.fresque-page .bg-gray-50.border-b a{color:var(--marine) !important;}

body.fresque-page section.max-w-5xl{background:#fff !important;}
body.fresque-page section.max-w-5xl .text-gray-500{color:var(--texte-courant) !important;}
body.fresque-page section.max-w-5xl .text-gray-700{color:var(--titres) !important;}
body.fresque-page section.max-w-5xl a{color:var(--marine) !important;}
body.fresque-page section.max-w-5xl a:hover{color:var(--laiton) !important;}

body.fresque-page footer.text-center{background:var(--fond-page) !important;color:var(--texte-courant) !important;border-color:var(--filet) !important;}
body.fresque-page footer.text-center a{color:var(--marine) !important;}

body.fresque-page .site-footer{background:var(--fond-page) !important;}

body.fresque-page.hub-page h2.zone-titre,
body.fresque-page.hub-page main > .wrap > h2{color:var(--titres) !important;}

/* Cartes blanches sur fond crème : on garde le blanc pur pour un
   léger contraste avec le fond de page (#FBFAF8), conforme au
   principe "cartes blanches sur fond clair" du brief. */
body.fresque-page section > .container,
body.fresque-page article.art-body,
body.fresque-page article.une,
body.fresque-page .deja-publie,
body.fresque-page .a-paraitre{background:#fff !important;box-shadow:0 1px 4px rgba(24,35,56,.08) !important;}

/* ============================================================
   Correctifs de spécificité — bandeaux ".art-hero"/".hub-hero"
   (gabarits articles/hub). css/style.css force un fond
   transparent via un sélecteur très spécifique
   (body.fresque-page.art-page .art-hero) qui battait ma règle
   générique ".art-hero{background:...}". On reproduit ici le
   MÊME sélecteur pour être certain de l'emporter.
   ============================================================ */
body.fresque-page.art-page .art-hero,
body.fresque-page.hub-page .hub-hero{background:var(--marine) !important;}

/* ---------- Bouton "Contactez-nous" (fond jaune) dans l'encart
   contact du header — devait passer en marine/texte blanc, pas
   en texte marine sur fond marine (illisible). Sélecteur plus
   spécifique que la règle générale de contraste du header. ---------- */
header.bg-indigo-700 .bg-indigo-800\/70 a.bg-yellow-300,
header.bg-indigo-700 .bg-indigo-800\/70 a.bg-yellow-400{
  background:var(--marine) !important;color:#fff !important;
}

/* ---------- Barres flottantes bespoke de la page /contact/
   (".sctaA"/".scta-call"/".scta-wa" — jaune par défaut). ---------- */
.scta-call{background:var(--marine) !important;color:#fff !important;border-color:var(--marine) !important;box-shadow:none !important;}
.scta-call:hover{background:var(--marine-dark) !important;}
.scta-wa{background:var(--vert-wa) !important;border-color:var(--vert-wa) !important;}
.btn-heroline{border-color:var(--titres) !important;color:var(--titres) !important;}

/* ---------- Barre de navigation secondaire ".mn-nav" (gabarits
   "avocat-…", articles, hub) — 3 couches historiques dans
   css/style.css forçaient un fond charcoal + accents jaunes. ---------- */
.mn-nav{background:var(--marine-dark) !important;}
.mn-nav .mn-active{border-color:var(--laiton) !important;background:rgba(156,122,69,.15) !important;color:var(--laiton) !important;}
.mn-nav .mn-top:hover,.mn-nav .mn-item:focus-within .mn-trig{background:rgba(156,122,69,.12) !important;border-color:var(--laiton) !important;color:var(--laiton) !important;}
.mn-nav .mn-cta{background:var(--marine) !important;color:#fff !important;border-color:var(--marine) !important;box-shadow:none !important;}
.mn-nav .mn-cta:hover{background:var(--marine-dark) !important;color:#fff !important;}
.mn-nav .mn-drop{background:#fff !important;border:1px solid var(--filet) !important;box-shadow:0 12px 30px rgba(24,35,56,.15) !important;}
.mn-nav .mn-drop a{color:var(--titres) !important;}
.mn-nav .mn-drop a:hover{background:var(--fond-page) !important;color:var(--marine) !important;}

/* ---------- Barres flottantes : le texte héritait parfois de
   ".hub-page a{color:var(--indigo)}" (plus spécifique que .fab),
   ce qui rendait le bouton "Être rappelé" illisible (texte de
   la même couleur que le fond). On fige le blanc avec !important. ---------- */
.fab{color:#fff !important;}

/* ---------- Bandeau "hero" bespoke du calculateur d'indemnisation ---------- */
body.fresque-page .hero{background:var(--marine) !important;background-image:none !important;color:#f3f4f6 !important;}
.hero .eyebrow{color:var(--laiton) !important;}
.hero .lead{color:rgba(255,255,255,.88) !important;}
.hero .notice{background:#fff !important;color:var(--texte-courant) !important;border-left-color:var(--laiton) !important;}
.hero .notice strong{color:var(--titres) !important;}
.hero .badge{background:#fff !important;border:1px solid var(--filet) !important;color:var(--texte-courant) !important;}

/* ============================================================
   Page d'accueil — gabarit bespoke "Fresque Sarfati" (classes
   propres à index.html : .topA/.hero-accueil/.sec/.silo-card/…)
   ============================================================ */
header.topA{background:var(--marine) !important;}
.brand .brand-sub{color:var(--laiton) !important;}
nav.main-nav a:hover{color:var(--laiton) !important;}
nav.main-nav > a:hover,nav.main-nav .nav-item > a:hover,nav.main-nav .nav-item:focus-within > a{background:rgba(156,122,69,.15) !important;border-color:var(--laiton) !important;color:var(--laiton) !important;}
nav.main-nav .nav-drop{background:#fff !important;border:1px solid var(--filet) !important;box-shadow:0 12px 30px rgba(24,35,56,.15) !important;}
nav.main-nav .nav-drop a{color:var(--titres) !important;}
nav.main-nav .nav-drop a:hover{background:var(--fond-page) !important;color:var(--marine) !important;}

.mnav-panel{background:#fff !important;border:1px solid var(--filet) !important;box-shadow:0 14px 34px rgba(24,35,56,.18) !important;}
.mnav-panel a{color:var(--titres) !important;}
.mnav-panel a.sub{color:var(--texte-courant) !important;}
.mnav-panel a:hover,.mnav-panel a:active{background:var(--fond-page) !important;color:var(--marine) !important;}

.btn{background:var(--marine) !important;color:#fff !important;border-color:var(--marine) !important;box-shadow:none !important;}
.btn:hover{background:var(--marine-dark) !important;}
.btn .arrow{background:rgba(255,255,255,.18) !important;}
a.btn.cta-wa,.cta-wa{background:var(--vert-wa) !important;border-color:var(--vert-wa) !important;}
.cta-call .phone-ic{background:rgba(255,255,255,.18) !important;}
.cta-call svg{stroke:#fff !important;}

.hero-accueil h1{color:var(--titres) !important;}
.hero-accueil .hero-sub{color:var(--texte-courant) !important;}
.hero-accueil p.lead{color:var(--texte-courant) !important;}
.hero-accueil p.lead strong{color:var(--titres) !important;}
.hero-accueil p.lead-more{color:var(--texte-courant) !important;}
.hero-accueil p.lead-more strong{color:var(--titres) !important;}
.hero-ctaA .meta{color:var(--texte-courant) !important;border-left-color:var(--laiton) !important;}
.hero-ctaA .meta b{color:var(--laiton) !important;}

section.alt strong{color:var(--titres) !important;}
section.alt span{color:var(--texte-courant) !important;}

.sec{border-top-color:var(--filet) !important;}
.sec .eyebrow{color:var(--marine-deep) !important;}
.sec h2{color:var(--titres) !important;}
.sec .sec-intro{color:var(--texte-courant) !important;}

.silo-card{background:#fff !important;border:1px solid var(--filet) !important;}
.silo-icon{display:block;margin:0 0 12px;width:52px;height:52px;}
.silo-card:hover{border-color:var(--laiton) !important;background:#fff !important;}
.silo-card h3{color:var(--titres) !important;}
.silo-card p{color:var(--texte-courant) !important;}
.silo-card .go{color:var(--marine) !important;}

.proof-item h3{color:var(--marine) !important;}
.proof-item p{color:var(--texte-courant) !important;}

.hp-step{background:#fff !important;border:1px solid var(--filet) !important;}
.hp-step .n{background:var(--marine) !important;color:#fff !important;}
.hp-step h3{color:var(--titres) !important;}
.hp-step p{color:var(--texte-courant) !important;}
.hp-step a{color:var(--marine) !important;}

.postes a{background:#fff !important;border:1px solid var(--filet) !important;color:var(--texte-courant) !important;}
.postes a:hover{border-color:var(--laiton) !important;color:var(--marine) !important;}

.faq details{border-bottom-color:var(--filet) !important;}
.faq summary{color:var(--titres) !important;}
.faq summary::after{color:var(--laiton) !important;}
.faq details p{color:var(--texte-courant) !important;}
.faq details p a{color:var(--marine) !important;}

.cta-band{background:#fff !important;border:1px solid var(--filet) !important;}
.cta-band .ct{color:var(--texte-courant) !important;}
.cta-band .tel-line{color:var(--texte-courant) !important;}
.cta-band .tel-line a{color:var(--marine) !important;}

footer{background:var(--fond-page) !important;color:var(--texte-courant) !important;border-color:var(--filet) !important;}
footer a{color:var(--marine) !important;}
.home-seo-footer{border-color:var(--filet) !important;}
.home-seo-footer,.home-seo-footer p{color:var(--texte-courant) !important;}
.home-seo-footer span{color:var(--titres) !important;}
.home-seo-footer a{color:var(--marine) !important;}
.home-seo-footer a:hover{color:var(--laiton) !important;}

/* ============================================================
   Accueil — finitions : respiration et rythme visuel entre les
   sections (moins "gabarit répété").
   ============================================================ */
.sec{padding:88px 0 !important;}
.sec .sec-intro{margin:0 0 42px !important;}
.sec h2{margin:0 0 18px !important;}
@media(max-width:600px){.sec{padding:56px 0 !important;}}

.silo-grid{gap:22px !important;}
.proof-grid{gap:40px 32px !important;}
.hp-steps{gap:24px !important;}
.postes{gap:11px !important;margin-top:26px !important;}

/* Alternance de fond très subtile pour marquer les sections
   sans casser la charte (fond crème / ton légèrement plus froid
   en alternance, ciblée par id plutôt que nth-of-type car
   ".alt" et ".sec" sont tous deux des <section>, ce qui fausse
   le comptage nth-of-type). */
section.alt,#pourquoi,#prejudices,#faq{background:var(--indigo-pale) !important;}

/* ============================================================
   Accueil — nouveaux blocs de contenu (bio du cabinet, avis
   clients réels, résultats chiffrés) : mêmes jetons de couleur
   que le reste du gabarit "Fresque Sarfati".
   ============================================================ */
.cabinet-prose p{color:var(--texte-courant) !important;}
.cabinet-prose p strong{color:var(--titres) !important;}
.cabinet-link{color:var(--marine) !important;}
.cabinet-link:hover{color:var(--laiton) !important;}
.cabinet-photo{border-color:var(--filet) !important;}
.cabinet-photo figcaption{background:#fff !important;color:var(--texte-courant) !important;}
.highlight-personal{background:#fff !important;border:1px solid var(--filet) !important;border-left:4px solid var(--laiton) !important;}
.highlight-personal h3{color:var(--titres) !important;}
.highlight-personal p{color:var(--texte-courant) !important;}
.highlight-personal p a{color:var(--marine) !important;}
.highlight-personal p a:hover{color:var(--laiton) !important;}

.testi-card{background:#fff !important;border:1px solid var(--filet) !important;}
.testi-card p{color:var(--texte-courant) !important;}
.testi-card footer{color:var(--titres) !important;}
.testi-card footer .stars{color:#f2b12c !important;}
.testi-card .testi-meta{color:#8a92a3 !important;}

.stat-card{background:#fff !important;border:1px solid var(--filet) !important;}
.stat-card .amount{color:var(--marine) !important;}
.stat-card .stat-label{color:var(--texte-courant) !important;}
.stat-card .stat-court{color:var(--laiton) !important;}
.sec-note{color:var(--texte-courant) !important;}
.sec-note strong{color:var(--titres) !important;}

.actu-card{background:#fff !important;border:1px solid var(--filet) !important;}
.actu-card:hover{border-color:var(--laiton) !important;}
.actu-card .actu-date{color:var(--laiton) !important;}
.actu-card h3{color:var(--titres) !important;}
.actu-card .go{color:var(--marine) !important;}