/* ============================================================
   Maître Esteban Rodriguez — Avocat en droit du travail
   Système de design — V2 du site
   ============================================================ */

/* Polices auto-hébergées (/assets/fonts/, licence SIL OFL 1.1) : aucune requête vers
   Google, donc aucune adresse IP de visiteur transmise à un tiers (RGPD).
   Fichiers variables : une seule fonte couvre toutes les graisses utilisées.
   « latin » couvre le français (é, œ, €, ’…) ; « latin-ext » n'est téléchargé que si
   un caractère rare l'exige (unicode-range). Les deux fichiers « latin » principaux
   sont préchargés dans le <head> de chaque page. */
@font-face{
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Newsreader'; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Newsreader'; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Couleurs — identité conservée : bleu nuit + or, sur fond ivoire */
  --navy: #0E1B2C;
  --navy-2: #16283F;
  --navy-soft: #22364F;
  --ivory: #FAF7F1;
  --ivory-2: #ECE3D0; /* crème des sections alternées — assombrie d'env. 3 % pour mieux détacher les sections claires */
  --paper: #FFFFFF;
  --ink: #1C1B18;
  --ink-soft: #4A4842;
  --gold: #A9812F;
  --gold-light: #D8B667;
  --gold-cta: #BE8A2C; /* or du bouton « prendre rendez-vous » — légèrement plus soutenu, pour la conversion */
  --gold-text: #87641E; /* variante plus foncée, utilisée pour le texte (contraste WCAG AA ≥ 4.5:1) */
  --line: #DDD5C2;
  --line-input: #8A8373; /* bordure des champs de formulaire : 3,8:1 sur blanc (WCAG 1.4.11) */
  --gold-focus: #7A5A1B; /* contour de focus : 5:1 sur crème, 5,9:1 sur ivoire (WCAG 1.4.11, contraste non textuel, seuil 3:1) */
  --line-dark: rgba(250,247,241,0.16);

  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1180px;
  --content: 680px;
  --radius: 3px;
}

*, *::before, *::after{ box-sizing: border-box; }
/* Défilement doux uniquement si l'utilisateur n'a pas demandé de réduire les animations */
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } }
body{
  margin:0;
  font-family: var(--font-sans);
  background: var(--ivory);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--navy);
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 500; }
h2{ font-size: clamp(1.6rem, 2.8vw, 2.15rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1.1em; }
p.lead{ font-size: 1.18rem; color: var(--ink-soft); }
ul, ol{ padding-left: 1.25em; margin: 0 0 1.1em; }
li{ margin-bottom: 0.45em; }
.serif{ font-family: var(--font-serif); }

:focus-visible{ outline: 2px solid var(--gold-focus); outline-offset: 3px; }
/* Sur fond marine, l'or clair contraste mieux (8,9:1) */
.section--navy :focus-visible, .site-footer :focus-visible, .cta-banner :focus-visible, .contact-phone-card :focus-visible{ outline-color: var(--gold-light); }
/* Cible du lien d'évitement (tabindex="-1") : focalisable, sans contour */
main:focus{ outline: none; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.prose{ max-width: var(--content); }

/* Liens dans le corps de texte : soulignement doré toujours visible (repère),
   trait plus clair qui se déploie de gauche à droite au survol/focus. */
.prose a{
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold-text), var(--gold-text));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.22,1,.36,1);
}
.prose a:hover, .prose a:focus-visible{ background-size: 100% 1px, 100% 1px; }
@media (prefers-reduced-motion: reduce){
  .prose a{ transition: none; }
}
.section{ padding: 88px 0; }
.section--tight{ padding: 56px 0; }
.section--navy{ background: var(--navy); color: var(--ivory); }
.section--navy h2, .section--navy h3{ color: var(--ivory); }
.section--navy p{ color: rgba(250,247,241,0.82); }
.section--cream{ background: var(--ivory-2); }
.section--paper{ background: var(--paper); }
.divider{ border:0; border-top:1px solid var(--line); margin: 0; }

.eyebrow{
  display:block;
  position: relative;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-text);
  margin-bottom: 0.6em;
}
/* Filet doré au-dessus des sur-titres — repère éditorial discret (signature du cabinet) */
.eyebrow::before, .hero-kicker::before{
  content:""; display:block; width: 46px; height: 2px;
  background: var(--gold); margin-bottom: 0.9em;
}
.section--navy .eyebrow::before{ background: var(--gold-light); }
/* Numéro serif — utilisé uniquement comme index de lecture sur la page d'accueil */
.eyebrow-no{
  font-family: var(--font-serif); font-weight: 500; font-size: 1.05em;
  color: var(--gold); margin-right: 0.55em;
}
.section--navy .eyebrow-no{ color: var(--gold-light); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.brand{
  font-family: var(--font-serif); font-size: 1.28rem; color: var(--navy);
  text-decoration:none; display:flex; align-items:center; gap:12px; line-height:1.15;
}
.brand-mark{ height:40px; width:auto; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; }
.brand strong{ font-weight:600; }
.brand span{ font-family: var(--font-sans); font-size: 0.78rem; letter-spacing:.02em; color: var(--ink-soft); font-weight:500; }
@media (max-width: 480px){ .brand-mark{ display:none; } }

.nav-primary{ display:flex; align-items:center; gap: 30px; }
.nav-primary > ul{ display:flex; align-items:center; gap: 26px; list-style:none; margin:0; padding:0; font-size:0.96rem; font-weight:500;}
.nav-primary a{ text-decoration:none; color: var(--navy); transition: color .2s ease; }
.nav-primary a:hover{ color: var(--gold); }

.nav-dropdown{ position:relative; }
.nav-dropdown summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:5px; }
.nav-dropdown summary::-webkit-details-marker{ display:none; }
.nav-dropdown summary::after{ content:"▾"; font-size:0.65em; opacity:.7; }
.nav-dropdown details[open] summary::after{ content:"▴"; }
.nav-dropdown summary.is-current{ color: var(--gold-text); }
.nav-dropdown .dropdown-panel{
  position:absolute; top: calc(100% + 14px); left: -18px;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  min-width: 300px; padding: 10px; box-shadow: 0 18px 40px rgba(14,27,44,0.12);
}
.nav-dropdown .dropdown-panel a{
  display:block; padding: 10px 14px; border-radius: 2px; font-weight: 500; font-size:0.94rem;
}
.nav-dropdown .dropdown-panel a:hover{ background: var(--ivory-2); color: var(--navy); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-sans); font-weight:600; font-size:0.96rem;
  padding: 13px 26px; border-radius: var(--radius); text-decoration:none;
  border: 1px solid transparent; cursor:pointer;
  transition: background .22s cubic-bezier(.22,1,.36,1), color .22s cubic-bezier(.22,1,.36,1), border-color .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1);
}
.btn--primary{ background: var(--navy); color: var(--ivory); }
.btn--primary:hover{ background: var(--navy-soft); }
.btn--gold{ background: var(--gold-cta); color: var(--navy); }
.btn--gold:hover{ background: var(--gold-light); }
.btn--ghost{ background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover{ background: var(--navy); color: var(--ivory); }
.btn--ghost-light{ background: transparent; color: var(--ivory); border-color: var(--line-dark); }
.btn--ghost-light:hover{ background: rgba(250,247,241,0.1); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--radius); width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background: var(--navy); position:relative; transition: all .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ---------- Hero ---------- */
.hero{ padding: 64px 0 88px; }
.hero .container{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:64px; align-items:center; }
.hero-photo{ position:relative; }
.hero-photo img{ width:100%; height:auto; border-radius: var(--radius); box-shadow: 0 26px 52px -16px rgba(14,27,44,0.20); }
.hero-photo::after{
  content:""; position:absolute; inset: -18px; pointer-events:none;
  border: 1px solid var(--gold); border-radius: var(--radius);
}

/* ---------- Figure : portraits encadrés + réservation d'espace pour de futures photos ---------- */
.figure{ margin: 0; }
.figure img{ display:block; width:100%; height:auto; border-radius: var(--radius); }
/* Motif « portrait encadré » — même langage visuel que la photo du hero */
.figure--portrait{ position: relative; }
.figure--portrait img{ box-shadow: 0 24px 50px -16px rgba(14,27,44,0.20); }
.figure--portrait::after{
  content:""; position:absolute; inset: -18px; pointer-events:none;
  border: 1px solid var(--gold); border-radius: var(--radius);
}
/* Quand une vraie photo de ratio connu sera intégrée, ajouter .figure--reserved
   pour figer la place (aucun décalage de page au chargement) : */
.figure--reserved{ aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); }
.figure--reserved img{ width:100%; height:100%; object-fit: cover; }
.hero-kicker{ color: var(--gold-text); font-weight:600; font-size:1.02rem; margin-bottom: 0.5em; display:block; }
.hero h1{ margin-bottom: 0.32em; }
.hero .lead{ margin: 0.6em 0 1.6em; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap: 26px; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; text-decoration:none; color:inherit; display:block;
  transition: border-color .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1);
}
/* Effet de survol réservé aux cartes qui sont des liens (les div.card informatives n'en ont pas) */
a.card:hover{ border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(14,27,44,0.06); }
.card h3{ margin-bottom:0.4em; font-size:1.18rem; }
.card p{ color: var(--ink-soft); font-size:0.98rem; margin-bottom:0.6em; }
.card .card-link{ font-weight:600; font-size:0.92rem; color: var(--navy); transition: color .2s ease; }
a.card:hover .card-link{ color: var(--gold); }

.step{ padding-top: 4px; }
.step .step-num{ font-family: var(--font-serif); font-size:1.6rem; color: var(--gold); display:block; margin-bottom:0.3em; }

.value-card{ padding: 8px 0; }
.value-card h3{ font-size: 1.1rem; }
.value-card p{ color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Fee blocks ---------- */
.fee-highlight{
  background: var(--navy); color: var(--ivory); border-radius: var(--radius);
  padding: 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.fee-highlight .price{ font-family: var(--font-serif); font-size: 3rem; color: var(--gold-light); }
.fee-table{ width:100%; border-collapse: collapse; margin: 1.2em 0; }
.fee-table th, .fee-table td{ text-align:left; padding: 14px 12px; border-bottom: 1px solid var(--line); font-size:0.98rem; }
.fee-table th{ font-family: var(--font-sans); color: var(--ink-soft); font-weight:600; font-size:0.88rem; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-item summary{ cursor:pointer; font-weight:600; font-family: var(--font-serif); font-size:1.12rem; color: var(--navy); list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family: var(--font-sans); color: var(--gold); font-size:1.3rem; flex-shrink:0; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top: 0.8em; color: var(--ink-soft); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size: 0.86rem; color: var(--ink-soft); padding-top: 22px; }
.breadcrumb a{ text-decoration:none; color: var(--ink-soft); }
.breadcrumb a:hover{ color: var(--gold); }

/* ---------- CTA banner ---------- */
.cta-banner{ background: var(--navy); color: var(--ivory); border-radius: var(--radius); padding: 56px; text-align:left; }
.cta-banner h2{ color: var(--ivory); }
.cta-banner p{ color: rgba(250,247,241,0.82); }

/* ---------- Article cards (rubrique Articles) ---------- */
.article-card{ border-bottom: 1px solid var(--line); padding: 30px 0; display:flex; justify-content:space-between; gap:24px; align-items:baseline; text-decoration:none; color:inherit; }
.article-card:hover h3{ color: var(--gold); }
.article-card .tag{ font-size:0.82rem; color: var(--gold-text); font-weight:600; }
.article-card h3{ margin: 0.3em 0 0.3em; }
.article-card p{ color: var(--ink-soft); margin:0; font-size:0.97rem; }
.article-card .arrow{ font-family: var(--font-serif); font-size:1.4rem; color: var(--navy); flex-shrink:0; }
/* Métadonnées d'un article (date de publication, temps de lecture). */
.article-meta{
  margin-top: 0.6em !important;
  font-size: 0.85rem !important;
  color: var(--ink-soft) !important;
  font-style: italic;
}

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
.form-field{ margin-bottom: 20px; }
.form-field label{ display:block; font-weight:600; font-size:0.92rem; margin-bottom: 6px; color: var(--navy); }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 13px 14px; border:1px solid var(--line-input); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 1rem; background: var(--paper); color: var(--ink);
}
.form-field textarea{ min-height: 130px; resize: vertical; }
.form-check{ display:flex; align-items:flex-start; gap:10px; font-size:0.92rem; color: var(--ink-soft); }
.form-check input{ margin-top: 4px; }
/* Aide visible sous un libellé de champ (reliée au champ par aria-describedby) */
.form-help{ font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 8px; }
/* Page Contact, section marine : note sur les documents à réunir */
.contact-steps-note{ color: rgba(250,247,241,0.82); max-width: 76ch; margin: 0.4em 0 1.2em; font-size: 0.97rem; }
.form-note{ margin-bottom: 1.2em; }
.form-note a{ color: var(--navy); font-weight: 600; }
/* Note discrète sous un bloc de coordonnées (accueil, bloc « Le cabinet ») */
.cabinet-note{ font-size: 0.88rem; color: var(--ink-soft); margin: 14px 0 0; }
.form-note{ font-size: 0.86rem; color: var(--ink-soft); background: var(--ivory-2); border-left:3px solid var(--gold); padding: 14px 16px; border-radius: 2px; }
/* Encadré « En pratique » des articles */
.article-encadre{ background: var(--ivory-2); border-left:3px solid var(--gold); padding: 1.6em 1.75em; border-radius: 2px; margin: 2.2em 0 2.4em; }
.article-encadre > :first-child{ margin-top: 0; }
.article-encadre > :last-child{ margin-bottom: 0; }
.article-encadre h3{ margin-top:0; margin-bottom: 0.6em; }
.article-encadre ul{ margin-bottom:0; }
.article-encadre li{ margin-bottom: 0.7em; }
.article-encadre li:last-child{ margin-bottom: 0; }
/* Encart de prise de rendez-vous en fin d'article : question propre au sujet, bouton, rappel du tarif. */
.article-rdv{ background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold-cta); border-radius: var(--radius); padding: 28px 30px; margin: 3em 0 0; }
.article-rdv p{ margin: 0 0 0.75em; }
.article-rdv .article-rdv__question{ font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--navy); }
.article-rdv .btn-row{ margin-top: 1.1em; }
.article-rdv .btn{ background-image: none; transition: background .22s cubic-bezier(.22,1,.36,1); } /* neutralise le soulignement des liens de .prose */
.article-rdv .article-rdv__tarif{ font-size: 0.9rem; color: var(--ink-soft); margin: 0.9em 0 0; }
/* ---------- Articles : confort de lecture (classe .prose--article sur le corps de l'article) ---------- */
.prose--article{ line-height: 1.75; }
.prose--article > p{ margin-bottom: 1.25em; text-wrap: pretty; }
.prose--article > h2{ margin: 2.2em 0 0.7em; line-height: 1.2; text-wrap: balance; scroll-margin-top: 104px; }
.prose--article > h3{ margin: 1.8em 0 0.55em; font-size: 1.25rem; line-height: 1.3; text-wrap: balance; scroll-margin-top: 104px; }
.prose--article > h2 + h3{ margin-top: 0; }
.prose--article > :first-child{ margin-top: 0; }
.prose--article > ul, .prose--article > ol{ margin: 0 0 1.6em; padding-left: 1.4em; }
.prose--article > ul > li, .prose--article > ol > li{ margin-bottom: 0.75em; }
.prose--article > ul > li:last-child, .prose--article > ol > li:last-child{ margin-bottom: 0; }
#questions-frequentes{ scroll-margin-top: 104px; }
@media (max-width: 480px){
  .prose--article > h2{ font-size: 1.5rem; margin-top: 2em; }
  .prose--article > h3{ font-size: 1.15rem; margin-top: 1.6em; }
  .article-encadre{ padding: 1.25em 1.15em; }
  .article-rdv{ padding: 22px 20px; }
}
/* Sommaire des articles longs */
.article-sommaire{ margin: 2em 0 0; padding: 1.25em 1.5em; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.article-sommaire__titre{ font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; color: var(--navy); margin: 0 0 0.4em; }
.article-sommaire ol{ margin: 0; padding-left: 1.4em; }
.article-sommaire li{ margin: 0; }
.article-sommaire a{ display: block; padding: 0.4em 0; background-image: none; text-decoration: none; }
.article-sommaire a:hover{ color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.info-block{ margin-bottom: 30px; }
.info-block h3{ font-size:1.02rem; margin-bottom:0.4em; }
.info-block p{ color: var(--ink-soft); margin:0; }
.info-block .info-link{ margin-top: 8px; }
.info-block a{ color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.info-block a:hover{ color: var(--gold-text); }
/* Bloc "Première consultation 100 €" — version renforcée pour la conversion :
   on détache le prix comme argument de réassurance visible avant même le formulaire. */
.info-block--price{
  background: var(--ivory-2);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.info-block--price h3{ margin-bottom: 0.6em; }
.info-price{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px !important;
}
.info-price-amount{
  font-family: var(--font-serif);
  font-size: 1.9rem;
  color: var(--gold-text);
  font-weight: 500;
  line-height: 1;
}
.info-price-note{
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Page Contact : en-tête, étapes, formulaire en carte, colonne d'informations */
.contact-hero{ padding-top: 44px; }
.contact-hero-text{ max-width: 760px; }
.contact-hero .lead{ margin-bottom: 0.8em; }
.contact-secret{ font-size: 0.95rem; color: var(--ink-soft); border-left: 3px solid var(--gold); padding-left: 14px; margin-bottom: 1.8em; max-width: 52ch; }
.contact-steps{ list-style:none; padding:0; margin: 2em 0 0; }
.contact-steps li{ margin:0; }
.contact-steps h3{ font-size: 1.15rem; }
/* Phrase de transition vers le formulaire (évite l'effet "le visiteur se demande où est le formulaire") */
.contact-steps-coda{
  margin: 2.2em 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(250,247,241,0.82);
  font-style: italic;
}
.contact-form-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 40px; box-shadow: 0 24px 50px -24px rgba(14,27,44,0.18);
}
.contact-form-title{ font-size: clamp(1.4rem, 2.2vw, 1.7rem); margin-bottom: 0.3em; }
.form-intro{ font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 1.6em; }
.form-field input, .form-field select, .form-field textarea{ transition: border-color .2s ease; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover{ border-color: var(--gold-light); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--gold); }
.form-check label{ margin:0; font-weight:400; }
.form-field.form-check input{ width:auto; flex-shrink:0; }
.btn--block{ width:100%; }
/* Piège anti-robots : retiré de l'écran (pas display:none, que certains robots détectent) */
.form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Messages après envoi : masqués, affichés quand l'URL cible leur ancre (#envoi-ok, #envoi-erreur) */
/* Bandeaux d'envoi : cachés par défaut, affichés via :target (quand l'URL contient
   #envoi-ok ou #envoi-erreur). L'attribut hidden="until-found" permet à :target
   de prendre le dessus même si le HTML a un style="display:none" inline. */
.form-status[hidden]{ display:none; }
.form-status[hidden]:target{ display:block !important; }
.form-status{ padding: 16px 18px; border-radius: 2px; margin-bottom: 1.6em; font-size: 0.95rem; scroll-margin-top: 110px; }
.form-status:focus{ outline: none; }
.form-status--ok{ background: var(--ivory-2); border-left: 3px solid var(--gold); color: var(--ink); }
.form-status--error{ background: #F6E7E4; border-left: 3px solid #9B3B2E; color: var(--ink); }
.form-status a{ color: var(--navy); font-weight:600; }
#formulaire{ scroll-margin-top: 84px; }
#acces{ scroll-margin-top: 110px; }
.contact-phone-card{ background: var(--navy); color: var(--ivory); border-radius: var(--radius); padding: 30px 28px; margin-bottom: 34px; }
.contact-phone-card h3{ color: var(--ivory); font-size: 1.12rem; margin-bottom: 0.5em; }
.contact-phone-card p{ color: rgba(250,247,241,0.82); margin:0; font-size: 0.95rem; }
.contact-phone{ font-family: var(--font-serif); font-size: 1.7rem; color: var(--gold-light); text-decoration:none; line-height:1.4; }
.contact-phone:hover{ color: var(--ivory); }
@media (prefers-reduced-motion: reduce){
  .form-field input, .form-field select, .form-field textarea{ transition: none; }
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color: rgba(250,247,241,0.75); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line-dark); }
.footer-grid h3{ color: var(--ivory); font-family: var(--font-sans); font-size:0.88rem; font-weight:600; margin-bottom: 14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom: 10px; font-size: 0.92rem; }
.footer-grid a{ text-decoration:none; color: inherit; }
.footer-grid a:hover{ color: var(--gold-light); }
.footer-brand{ font-family: var(--font-serif); color: var(--ivory); font-size:1.2rem; margin-bottom:10px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top: 26px; font-size: 0.84rem; }
.footer-bottom a{ color: inherit; text-decoration:none; }
.footer-bottom a:hover{ color: var(--gold-light); }

/* ---------- Utilities ---------- */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin: 1.2em 0; }
.tag-pill{ border:1px solid var(--line); border-radius: 20px; padding: 7px 14px; font-size:0.86rem; color: var(--ink-soft); text-decoration:none; }
.tag-pill:hover{ border-color: var(--gold); color: var(--navy); }
.quote-block{ border-left: 3px solid var(--gold); padding-left: 24px; font-family: var(--font-serif); font-size: 1.28rem; font-style: italic; color: var(--navy); margin: 1.6em 0; }
.skip-link{ position:absolute; left:-999px; top:auto; background:var(--navy); color:var(--ivory); padding:12px 18px; z-index:100; }
.skip-link:focus{ left: 14px; top: 14px; }

/* ---------- Contraste : filet entre deux sections claires consécutives ---------- */
.section:not(.section--navy) + .section:not(.section--navy){ border-top: 1px solid var(--line); }

/* ---------- Apparition au défilement (amélioration progressive) ----------
   État de repos = visible. L'effet ne s'applique que si le JS a posé .js-reveal
   ET si l'utilisateur n'a pas demandé de réduire les animations. */
@media (prefers-reduced-motion: no-preference){
  html.js-reveal .rev{ opacity: 0; transform: translateY(18px); }
  html.js-reveal .rev.is-visible{
    opacity: 1; transform: none;
    transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  }
}

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; gap: 40px; }
  .hero-photo{ max-width: 320px; }
  .grid--3, .grid--4{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }}
@media (max-width: 820px){
  /* Replie en une colonne les blocs "texte + image" dont la grille est posée en style inline */
  [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
}
/* ---------- En-tête : espacements resserrés entre 961 et 1100 px ---------- */
@media (min-width: 961px) and (max-width: 1100px){
  .nav-primary{ gap: 18px; }
  .nav-primary > ul{ gap: 16px; font-size: 0.92rem; }
  .brand{ font-size: 1.12rem; gap: 10px; }
  .brand-mark{ height: 34px; }
  .nav-primary .btn{ padding: 11px 18px; font-size: 0.9rem; }
}
/* ---------- Menu mobile (≤ 960 px : téléphones et tablettes en portrait) ----------
   Point de rupture à garder égal à MOBILE_BREAKPOINT dans main.js. Le panneau fermé est
   aussi masqué par visibility, pour sortir ses liens de l'ordre de tabulation. */
@media (max-width: 960px){
  .nav-primary{ position:fixed; inset: 84px 0 0 0; background: var(--ivory); flex-direction:column; align-items:flex-start;
    padding: 26px 28px; transform: translateX(100%); visibility:hidden; overflow-y:auto;
    transition: transform .25s ease, visibility 0s linear .25s; }
  .nav-primary.is-open{ transform: translateX(0); visibility:visible; transition: transform .25s ease, visibility 0s; }
  .nav-primary > ul{ flex-direction:column; align-items:flex-start; gap:6px; width:100%; font-size: 0.96rem; }
  .nav-primary > ul > li{ width:100%; }
  .nav-primary > ul > li > a, .nav-dropdown summary{ padding: 12px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-dropdown .dropdown-panel{ position:static; box-shadow:none; border:0; padding: 0 0 0 14px; min-width:0; }
  .nav-primary .btn{ margin-top: 14px; width:100%; }
  .nav-toggle{ display:flex; }
  /* Icône hamburger -> croix quand le menu mobile est ouvert */
  .nav-toggle[aria-expanded="true"] span{ background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before{ top:0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after{ top:0; transform: rotate(-45deg); }
  /* Verrou de scroll pendant que le menu mobile plein écran est ouvert */
  body.nav-open{ overflow: hidden; }
}
@media (max-width: 680px){
  .grid--3, .grid--4, .grid--2{ grid-template-columns: 1fr; }
  .section{ padding: 56px 0; }
  .fee-highlight{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns: 1fr; }
  .cta-banner{ padding: 34px 24px; }
  .contact-form-card{ padding: 28px 20px; }  .article-card{ flex-direction:column; gap:6px; }
}

/* ---------- Réduction des animations : aucun mouvement ni transition ---------- */
@media (prefers-reduced-motion: reduce){
  .card, .btn, .nav-primary, .nav-primary.is-open, .nav-primary a, .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ transition: none; }
  a.card:hover{ transform: none; }
}

/* ---------- Impression ---------- */
@media print{
  .skip-link, .site-header, .nav-toggle, #assistant-widget{ display:none !important; }
  html.js-reveal .rev{ opacity:1 !important; transform:none !important; }
  .article-sommaire{ display:none; }
  .prose--article > h2, .prose--article > h3{ break-after:avoid; }
  .article-encadre, .article-rdv{ break-inside:avoid; }
}