/* =========================================================
   BOUSSOLE & SENS — feuille de style principale
   Palette dérivée du logo : bleu marine, bleu, vert, gris perle
   Typographies : Spectral (titres) + Karla (textes / interface)
   ========================================================= */

/* Polices auto-hébergées (Karla, Spectral — SIL Open Font License 1.1)
   Servies depuis le domaine : aucune requête vers Google, aucune IP visiteur transmise. */
@font-face{font-family:"Karla";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Karla-400-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:"Karla";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Karla-400-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:"Karla";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Karla-600-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:"Karla";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Karla-600-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:"Karla";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Karla-700-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:"Karla";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Karla-700-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:"Spectral";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/Spectral-300i-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:"Spectral";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/Spectral-300i-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:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/Spectral-300-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:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/Spectral-300-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:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Spectral-400-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:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Spectral-400-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:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Spectral-600-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:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Spectral-600-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;}


:root{
  /* Couleurs du logo */
  --bleu-nuit:  #0E3E63;
  --bleu:       #1A6CA8;
  --bleu-clair: #4E9AC9;
  --vert:       #6FAF22;
  --vert-clair: #A5D45A;
  --ambre:      #D89A2B;   /* uniquement pour le jalon « PENDANT » */

  /* Neutres */
  --encre:      #12293A;
  --gris:       #5F7382;
  --gris-clair: #8FA3AE;
  --ligne:      #DCE8ED;
  --brume:      #F3F8F9;
  --brume-2:    #E9F2F4;
  --blanc:      #FFFFFF;

  /* Rythme */
  --rayon:      18px;
  --rayon-l:    28px;
  --max:        1120px;
  --max-texte:  720px;
  --section:    clamp(64px, 9vw, 128px);

  --ombre:      0 18px 50px -30px rgba(14,62,99,.45);
  --ombre-douce:0 10px 30px -22px rgba(14,62,99,.55);

  --t: .45s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--blanc);
  color:var(--encre);
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
svg{ display:block; max-width:100%; }
svg[viewBox="0 0 24 24"]{ width:24px; height:24px; flex:none; }

/* ---------- Justification des textes ----------
   Le texte courant est justifié. La césure automatique (lang="fr" sur <html>)
   est indispensable ici : sans elle, la justification creuse de larges blancs
   entre les mots, surtout dans les colonnes étroites et sur mobile. */
main p{
  text-align:justify;
  text-wrap:pretty;
  -webkit-hyphens:auto;
          hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}

/* Les listes à tirets ne sont jamais justifiées : la justification décale les
   valeurs les unes par rapport aux autres et casse leur alignement vertical. */
main .liste-puces li{ text-align:left; }

/* Exceptions : blocs centrés par le design, libellés et textes courts,
   que la justification dégraderait. */
main .entete-section.centre p,
main .bandeau-cta p,
main .phrase-forte__texte,
main .mention-tarifs,
main .portrait__role,
main .aide,
main .champ__erreur,
main .hero__signature,
main .offre__accroche{
  text-align:inherit;
  -webkit-hyphens:manual;
          hyphens:manual;
}

/* Sous 640px la colonne tombe à ~37 caractères par ligne. À cette largeur la
   justification creuse des blancs béants entre les mots, d'autant que la césure
   automatique n'est pas garantie sur tous les navigateurs (Chrome dépend d'un
   dictionnaire téléchargé). On revient donc au fer à gauche sur petit écran.
   Pour justifier malgré tout partout, supprimer ce bloc. */
@media (max-width:640px){
  main p{ text-align:left; }
}

h1,h2,h3,h4{
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-weight:300;
  color:var(--bleu-nuit);
  line-height:1.18;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); }
h2{ font-size:clamp(1.65rem,3.1vw,2.5rem); }
h3{ font-size:clamp(1.2rem,1.9vw,1.5rem); font-weight:400; }
h4{ font-size:1.05rem; font-weight:600; font-family:"Karla",sans-serif; letter-spacing:0; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:700; color:var(--bleu-nuit); }

a{ color:var(--bleu); text-decoration:none; transition:color .25s ease; }
a:hover{ color:var(--vert); }

:focus-visible{
  outline:3px solid var(--vert);
  outline-offset:3px;
  border-radius:4px;
}

.saut-contenu{
  position:absolute; left:-9999px; top:0;
  background:var(--bleu-nuit); color:#fff; padding:12px 20px; z-index:999; border-radius:0 0 12px 0;
}
.saut-contenu:focus{ left:0; color:#fff; }

/* ---------- Structure ---------- */
.contenant{ width:min(100% - 40px,var(--max)); margin-inline:auto; }
.contenant-etroit{ width:min(100% - 40px,var(--max-texte)); margin-inline:auto; }

section{ position:relative; }
.section{ padding-block:var(--section); }
.section--brume{ background:var(--brume); }
.section--nuit{ background:var(--bleu-nuit); color:#D9E6EE; }
.section--nuit h2,.section--nuit h3{ color:#fff; }
.section--nuit p{ color:#C3D6E2; }

.entete-section{ max-width:640px; margin-bottom:clamp(36px,5vw,60px); }
.entete-section.centre{ margin-inline:auto; text-align:center; }

.surtitre{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.735rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--vert); margin-bottom:18px;
}
.surtitre::before{
  content:""; width:26px; height:1px; background:var(--vert); flex:none;
}
.entete-section.centre .surtitre::after{
  content:""; width:26px; height:1px; background:var(--vert);
}
.section--nuit .surtitre{ color:var(--vert-clair); }
.section--nuit .surtitre::before,.section--nuit .surtitre::after{ background:var(--vert-clair); }

.chapo{ font-size:1.15rem; color:var(--gris); line-height:1.75; }
.section--nuit .chapo{ color:#B7CCDA; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:999px;
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform var(--t),background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
  text-align:center;
}
.btn svg{ width:17px; height:17px; flex:none; transition:transform var(--t); }
.btn:hover svg{ transform:translateX(4px); }

.btn--principal{ background:var(--vert); color:#fff; box-shadow:0 12px 26px -16px rgba(111,175,34,.9); }
.btn--principal:hover{ background:#5F9A19; color:#fff; transform:translateY(-2px); }

.btn--fantome{ border-color:var(--ligne); color:var(--bleu-nuit); background:rgba(255,255,255,.6); }
.btn--fantome:hover{ border-color:var(--bleu-clair); color:var(--bleu); background:#fff; }

.section--nuit .btn--fantome{ border-color:rgba(255,255,255,.28); color:#fff; background:transparent; }
.section--nuit .btn--fantome:hover{ border-color:var(--vert-clair); color:var(--vert-clair); }

.groupe-btn{ display:flex; flex-wrap:wrap; gap:14px; }

.lien-fleche{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem; }
.lien-fleche svg{ width:16px; height:16px; transition:transform var(--t); }
.lien-fleche:hover svg{ transform:translateX(4px); }

/* ---------- En-tête ---------- */
.entete{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.entete.est-defilee{ border-bottom-color:var(--ligne); box-shadow:0 8px 30px -26px rgba(14,62,99,.7); }
.entete__interieur{
  width:min(100% - 40px,1260px); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:84px;
}
.logo{ display:flex; align-items:center; gap:12px; flex:none; }
.logo img{ height:62px; width:auto; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{
  display:block; padding:10px 12px; border-radius:10px; white-space:nowrap;
  font-size:.79rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bleu-nuit);
}
.nav a:hover{ background:var(--brume); color:var(--bleu); }
.nav a[aria-current="page"]{ color:var(--vert); }

.nav__item{ position:relative; }
.nav__bouton{
  display:flex; align-items:center; gap:6px;
  background:none; border:0; font:inherit; cursor:pointer;
  padding:10px 12px; border-radius:10px; white-space:nowrap;
  font-size:.79rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bleu-nuit); font-family:"Karla",sans-serif;
}
.nav__bouton:hover{ background:var(--brume); color:var(--bleu); }
.nav__bouton svg{ width:11px; height:11px; transition:transform .3s ease; }
.nav__item.est-ouvert .nav__bouton svg{ transform:rotate(180deg); }

.sous-menu{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:296px; padding:10px;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon);
  box-shadow:var(--ombre); list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.nav__item.est-ouvert .sous-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.sous-menu a{
  text-transform:none; letter-spacing:0; font-size:.95rem; font-weight:600;
  padding:11px 14px; display:flex; align-items:center; gap:11px;
}
.sous-menu a svg{ width:19px; height:19px; color:var(--vert); flex:none; }

.entete__cta{ flex:none; }
.entete__cta .btn{ padding:12px 20px; font-size:.82rem; white-space:nowrap; }

.burger{
  display:none; width:46px; height:46px; border:1px solid var(--ligne);
  border-radius:12px; background:#fff; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:20px; height:1.5px; background:var(--bleu-nuit); transition:transform .3s ease,opacity .3s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(56px,8vw,104px) clamp(64px,9vw,112px);
  background:
    radial-gradient(900px 520px at 88% -8%,rgba(111,175,34,.13),transparent 62%),
    radial-gradient(760px 520px at 6% 6%,rgba(26,108,168,.13),transparent 60%),
    linear-gradient(180deg,#fff 0%,var(--brume) 100%);
}
.hero__grille{
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.hero h1{ margin-bottom:.35em; }
.hero__signature{
  font-family:"Spectral",serif; font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,2vw,1.45rem); color:var(--vert); margin-bottom:1.2em;
}
.hero__piliers{
  display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; padding:0; margin:0 0 28px;
  font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--bleu);
}
.hero__piliers li{ display:flex; align-items:center; gap:9px; }
.hero__piliers li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--vert); flex:none; }
.hero p.chapo{ max-width:56ch; margin-bottom:32px; }

/* ---------- Boussole (élément signature) ---------- */
.boussole{ width:100%; max-width:480px; margin-inline:auto; }
.boussole__rose{ animation:respire 14s ease-in-out infinite; transform-origin:center; }
.boussole__aiguille{ transform-origin:center; transition:transform 1.1s cubic-bezier(.34,1.32,.5,1); }
.boussole__anneau{ animation:tourne 90s linear infinite; transform-origin:center; }
@keyframes respire{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.022); } }
@keyframes tourne{ to{ transform:rotate(360deg); } }

.cadran{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,64px); align-items:center; }
.cadran__visuel{ position:relative; }
.cadran__phases{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.phase{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  width:100%; text-align:left; cursor:pointer;
  padding:20px 24px; border:1px solid var(--ligne); border-radius:var(--rayon);
  background:#fff; font-family:inherit; color:inherit;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t),background var(--t);
}
.phase:hover{ transform:translateX(5px); }
.phase[aria-selected="true"]{ border-color:currentColor; box-shadow:var(--ombre-douce); }
.phase--avant{ color:var(--vert); }
.phase--pendant{ color:var(--ambre); }
.phase--apres{ color:var(--bleu); }
.phase__pastille{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:currentColor;
}
.phase__pastille svg{ width:21px; height:21px; color:#fff; }
.phase__moment{ font-size:.71rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:currentColor; }
.phase__titre{ font-family:"Spectral",serif; font-size:1.5rem; font-weight:400; color:var(--bleu-nuit); line-height:1.2; margin:2px 0 6px; }
.phase__liste{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.9rem; color:var(--gris); }
.phase__liste li{ display:flex; align-items:center; gap:14px; }
.phase__liste li:not(:last-child)::after{ content:""; width:3px; height:3px; border-radius:50%; background:var(--gris-clair); }

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

.carte{
  position:relative; background:#fff; border:1px solid var(--ligne);
  border-radius:var(--rayon-l); padding:34px 30px 32px;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  display:flex; flex-direction:column;
}
.carte:hover{ transform:translateY(-5px); box-shadow:var(--ombre); border-color:#C8DEE6; }
.carte__icone{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brume-2),#fff); border:1px solid var(--ligne);
  color:var(--bleu); margin-bottom:22px;
}
.carte__icone svg{ width:26px; height:26px; }
.carte--vert .carte__icone{ color:var(--vert); }
.carte h3{ margin-bottom:.45em; }
.carte p{ color:var(--gris); font-size:1rem; }
.carte .lien-fleche{ margin-top:auto; padding-top:20px; }
a.carte{ color:inherit; }
a.carte:hover{ color:inherit; }

.carte--sobre{ padding:30px 28px; border-radius:var(--rayon); }
.carte--nuit{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14); }
.carte--nuit p{ color:#B7CCDA; }
.carte--nuit .carte__icone{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:var(--vert-clair); }

/* ---------- Étapes numérotées ---------- */
.etapes{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:etape; }
.etape{ position:relative; padding:0 26px; }
.etape:first-child{ padding-left:0; }
.etape:last-child{ padding-right:0; }
.etape::before{
  content:""; position:absolute; top:22px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,var(--ligne),var(--ligne));
}
.etape:first-child::before{ left:22px; }
.etape:last-child::before{ right:calc(100% - 22px); }
.etape__num{
  position:relative; z-index:1; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:#fff; border:1.5px solid var(--bleu-clair);
  color:var(--bleu-nuit); font-weight:700; font-size:.9rem; margin-bottom:22px;
}
.section--brume .etape__num{ background:var(--brume); }
.etape h3{ font-size:1.25rem; margin-bottom:.4em; }
.etape p{ color:var(--gris); font-size:.98rem; }

/* ---------- Liste de signaux / puces ---------- */
.liste-puces{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.liste-puces li{ position:relative; padding-left:32px; color:var(--gris); }
.liste-puces li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:14px; height:1.5px; background:var(--vert);
}
.liste-puces--2{ grid-template-columns:repeat(2,1fr); gap:12px 32px; }
.section--nuit .liste-puces li{ color:#C3D6E2; }

.etiquettes{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.etiquettes li{
  padding:9px 18px; border-radius:999px; border:1px solid var(--ligne);
  background:#fff; font-size:.9rem; font-weight:600; color:var(--bleu-nuit);
}

/* ---------- Citation / phrase forte ---------- */
.phrase-forte{
  position:relative; padding:clamp(34px,5vw,54px) clamp(28px,5vw,64px);
  border-radius:var(--rayon-l);
  background:linear-gradient(135deg,var(--bleu-nuit),#15537F);
  color:#fff; overflow:hidden;
}
.phrase-forte__texte{
  position:relative; z-index:1;
  font-family:"Spectral",serif; font-weight:300; font-style:italic;
  font-size:clamp(1.35rem,2.6vw,2rem); line-height:1.42; color:#fff;
  max-width:26ch; text-wrap:balance;
}
.phrase-forte__deco{ position:absolute; right:-70px; bottom:-110px; width:340px; opacity:.16; color:var(--vert-clair); }
.phrase-forte cite{ display:block; margin-top:20px; font-style:normal; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vert-clair); }

.encadre{
  border-left:3px solid var(--vert); background:var(--brume);
  padding:24px 28px; border-radius:0 var(--rayon) var(--rayon) 0;
  color:var(--gris); font-size:1rem;
}
.encadre strong{ color:var(--bleu-nuit); }
.encadre--succes{ border-color:var(--vert); }
.encadre--alerte{ border-color:#D89A2B; }
/* Page de réponse de envoi-contact.php (navigateurs sans JavaScript) */
.reponse__titre{ margin-bottom:.5em; }
.reponse__encadre{ margin-top:28px; }
.reponse__actions{ margin-top:32px; }

/* ---------- Photos ---------- */
.photo{
  position:relative; margin:0; border-radius:var(--rayon-l);
  background:var(--brume-2); overflow:hidden;
  box-shadow:0 22px 50px -34px rgba(14,62,99,.55);
  /* La grille fixe le cadrage actuel des photos : sans elle, height:100%
     s'appliquerait et recadrerait les formats 21:9 et 3:4. */
  display:grid; place-items:center;
}
.photo--16-9{ aspect-ratio:16/9; }
.photo--4-3{ aspect-ratio:4/3; }
.photo--1-1{ aspect-ratio:1/1; }
.photo--3-4{ aspect-ratio:3/4; }
.photo--21-9{ aspect-ratio:21/9; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* Cartes équipe de l'accueil : ces portraits sont cadrés en pied et le visage
   se situe dans le cinquième supérieur de l'image. Un « cover » carré le colle
   donc en haut de la vignette. On resserre le cadre sur le buste, réglé photo
   par photo en HTML : --zoom = hauteur de l'image rapportée à la vignette,
   --haut = décalage vertical pour amener le visage vers le centre. */
.photo.photo--1-1 img{
  position:absolute; top:var(--haut,0); left:50%;
  width:auto; max-width:none; height:var(--zoom,100%);
  transform:translateX(-50%);
  object-fit:cover; display:block;
}
.article-carte .photo{ border-radius:0; box-shadow:none; }
.portrait__photo .photo{ box-shadow:0 26px 60px -36px rgba(14,62,99,.6); }

/* ---------- Équipe ---------- */
.portrait{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,4vw,56px); align-items:center; }
.portrait:nth-child(even) .portrait__photo{ order:2; }
/* La photo passe à droite un portrait sur deux : on inverse aussi les pistes
   pour qu'elle garde la même largeur (.85fr) des deux côtés. */
.portrait:nth-child(even){ grid-template-columns:1.15fr .85fr; }
.portrait__nom{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:.15em; }
.portrait__role{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--vert); margin-bottom:22px;
}

/* ---------- Ressources / articles ---------- */
.article-carte{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.article-carte__corps{ padding:28px 28px 30px; display:flex; flex-direction:column; flex:1; }
.article-carte__meta{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--vert); margin-bottom:12px;
}
.article-carte h3{ font-size:1.22rem; }

.article-corps{ font-size:1.08rem; }
.article-corps h2{ margin-top:2em; }
.article-corps h3{ margin-top:1.6em; }
.article-corps ul{ padding-left:0; list-style:none; display:grid; gap:11px; margin:0 0 1.4em; }
.article-corps ul li{ position:relative; padding-left:30px; color:var(--gris); }
.article-corps ul li::before{ content:""; position:absolute; left:0; top:.65em; width:13px; height:1.5px; background:var(--vert); }
.article-corps ol{ padding-left:1.2em; color:var(--gris); display:grid; gap:11px; margin:0 0 1.4em; }
.article-corps p{ color:#294455; }

.fil{ font-size:.82rem; color:var(--gris-clair); margin-bottom:26px; }
.fil a{ color:var(--gris); }
.fil span{ margin-inline:8px; }

.sommaire{
  border:1px solid var(--ligne); border-radius:var(--rayon); padding:26px 30px; background:var(--brume);
  margin-bottom:44px;
}
.sommaire h2{ font-size:.78rem; font-family:"Karla",sans-serif; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gris); margin-bottom:14px; }
.sommaire ol{ margin:0; padding-left:1.1em; display:grid; gap:8px; font-size:.98rem; }

/* ---------- Bandeau CTA ---------- */
.bandeau-cta{
  position:relative; overflow:hidden;
  border-radius:var(--rayon-l);
  background:linear-gradient(135deg,var(--bleu-nuit) 0%,#164E77 55%,#2F6B4F 140%);
  color:#fff; padding:clamp(40px,6vw,72px);
  text-align:center;
}
.bandeau-cta h2{ color:#fff; margin-bottom:.4em; }
.bandeau-cta p{ color:#BFD5E2; max-width:58ch; margin-inline:auto; margin-bottom:32px; }
.bandeau-cta .groupe-btn{ justify-content:center; }
.bandeau-cta__deco{ position:absolute; inset:auto -60px -140px auto; width:400px; opacity:.13; color:#fff; }

/* ---------- Formulaire ---------- */
.formulaire{ display:grid; gap:20px; }
.champ{ display:grid; gap:8px; }
.champ label{ font-size:.85rem; font-weight:700; color:var(--bleu-nuit); }
.champ label span{ color:var(--vert); }
.champ input,.champ select,.champ textarea{
  width:100%; padding:14px 17px; border:1px solid var(--ligne); border-radius:12px;
  font-family:inherit; font-size:1rem; color:var(--encre); background:#fff;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none; border-color:var(--bleu-clair); box-shadow:0 0 0 4px rgba(78,154,201,.16);
}
.champ textarea{ min-height:150px; resize:vertical; }
.champ--duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.champ-case{ display:flex; gap:12px; align-items:flex-start; font-size:.9rem; color:var(--gris); }
.champ-case input{ width:auto; margin-top:5px; flex:none; }
.aide{ font-size:.84rem; color:var(--gris-clair); }

/* Champ leurre anti-robots : retiré de l'écran sans display:none,
   que certains robots détectent. */
.piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Champ signalé en erreur après vérification */
.champ--erreur input,.champ--erreur select,.champ--erreur textarea{
  border-color:#C7502F; background:#FEF8F6;
}
.champ--erreur input:focus,.champ--erreur select:focus,.champ--erreur textarea:focus{
  box-shadow:0 0 0 4px rgba(199,80,47,.15);
}
.champ__erreur{ font-size:.84rem; color:#B14527; font-weight:600; }
.champ-case.champ--erreur label{ color:#B14527; }

/* Zone de réponse sous le bouton */
.formulaire [data-message]{ margin:0; }
.formulaire [data-message] strong{ display:block; margin-bottom:.3em; }
.formulaire [data-message] ul{ margin:.4em 0 0; padding-left:1.1em; }
.formulaire[data-etat="envoi"] [data-envoyer]{ opacity:.6; pointer-events:none; }

.urgence{
  border:1px solid #F0D6A8; background:#FDF7EC; border-radius:var(--rayon);
  padding:24px 26px; display:flex; gap:16px; align-items:flex-start;
}
.urgence svg{ width:24px; height:24px; color:var(--ambre); flex:none; margin-top:2px; }
.urgence p{ font-size:.94rem; color:#6B5423; }
.urgence strong{ color:#4E3D18; }

.contact-info{ display:grid; gap:20px; }
.contact-info__ligne{ display:flex; gap:16px; align-items:flex-start; }
.contact-info__ligne svg{ width:22px; height:22px; color:var(--vert); flex:none; margin-top:4px; }
.contact-info__ligne strong{ display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); font-weight:700; margin-bottom:3px; }

/* ---------- Vague décorative ---------- */
.filet{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--bleu-clair); opacity:.6; }
.filet svg{ width:120px; height:12px; }

/* ---------- Pied de page ---------- */
.pied{ background:var(--bleu-nuit); color:#A9C2D2; padding-block:clamp(52px,7vw,84px) 32px; }
.pied__grille{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:44px; }
.pied h4{ color:#fff; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:20px; }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:.95rem; }
.pied a{ color:#A9C2D2; }
.pied a:hover{ color:var(--vert-clair); }
.pied__logo{ background:#fff; padding:14px 18px; border-radius:var(--rayon); display:inline-block; margin-bottom:20px; }
.pied__logo img{ height:66px; width:auto; }
.pied__signature{ font-family:"Spectral",serif; font-style:italic; color:var(--vert-clair); font-size:1.1rem; margin-bottom:14px; }
.pied__bas{
  margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.13);
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between;
  font-size:.85rem; color:#7E9BAE;
}
/* Version du site, en bas à droite de chaque page : de quoi voir d'un coup
   d'œil qu'une mise à jour est bien en ligne. Discrète mais lisible :
   #A9C2D2 sur bleu nuit = contraste 6:1. Posée par outils/gabarits.py. */
.pied__version{ flex-basis:100%; text-align:right; margin-top:-4px; font-size:.75rem; letter-spacing:.06em; color:#A9C2D2; font-variant-numeric:tabular-nums; }

/* ---------- Apparition au défilement ---------- */
.apparait{ opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1); }
.apparait.est-visible{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .entete__cta{ display:none; }
  .entete__interieur{ min-height:74px; }
  .nav.est-ouverte{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);
    padding:16px 20px 26px; max-height:calc(100vh - 74px); overflow:auto;
    box-shadow:var(--ombre);
  }
  .nav.est-ouverte a,.nav.est-ouverte .nav__bouton{ width:100%; padding:13px 6px; font-size:.9rem; }
  .nav.est-ouverte .nav__item{ position:static; }
  .nav.est-ouverte .sous-menu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--brume-2); border-radius:0; padding:0 0 0 14px; margin:0 0 6px;
    display:none;
  }
  .nav.est-ouverte .nav__item.est-ouvert .sous-menu{ display:block; }
  .nav.est-ouverte .btn{ margin-top:14px; justify-content:center; }
}
@media (max-width:960px){
  .hero__grille{ grid-template-columns:1fr; }
  .hero__visuel{ order:-1; max-width:380px; margin-inline:auto; }
  .cadran{ grid-template-columns:1fr; }
  .cadran__visuel{ max-width:340px; margin-inline:auto; }
  .grille--4{ grid-template-columns:repeat(2,1fr); }
  .grille--3{ grid-template-columns:repeat(2,1fr); }
  .etapes{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
  .etape{ padding:0; }
  .etape::before{ display:none; }
  .portrait,.portrait:nth-child(even){ grid-template-columns:1fr; }
  .portrait:nth-child(even) .portrait__photo{ order:0; }
  .portrait__photo{ max-width:360px; }
  .pied__grille{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:640px){
  body{ font-size:1rem; }
  .grille--2,.grille--3,.grille--4,.etapes,.liste-puces--2,.champ--duo{ grid-template-columns:1fr; }
  .carte{ padding:28px 24px; }
  .logo img{ height:44px; }
  .pied__grille{ grid-template-columns:1fr; }
  .hero__piliers{ font-size:.74rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .apparait{ opacity:1; transform:none; }
}

@media print{
  .entete,.pied,.bandeau-cta{ display:none; }
  body{ font-size:11pt; }
}

/* ---------- Tarifs ---------- */
.grille-tarifs{ display:grid; grid-template-columns:1.06fr .94fr; gap:24px; align-items:stretch; }
.grille-tarifs--devis{ grid-template-columns:repeat(2,1fr); }

.offre{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-l);
  padding:38px 38px 34px; overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.offre:hover{ transform:translateY(-4px); box-shadow:var(--ombre); border-color:#C8DEE6; }
.offre::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--bleu),var(--vert));
}
.offre--vert::before{ background:linear-gradient(90deg,var(--vert),var(--bleu-clair)); }
.offre--devis{ background:var(--brume); border-style:dashed; border-color:#C6DAE3; }
.offre--devis::before{ display:none; }
.offre--devis:hover{ box-shadow:var(--ombre-douce); }

.offre__entete{ display:flex; gap:18px; align-items:flex-start; margin-bottom:8px; }
.offre__icone{
  width:52px; height:52px; flex:none; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brume-2),#fff); border:1px solid var(--ligne); color:var(--bleu);
}
.offre--vert .offre__icone{ color:var(--vert); }
.offre--devis .offre__icone{ background:#fff; }
.offre__icone svg{ width:24px; height:24px; }
.offre h3{ font-size:1.35rem; margin:0 0 4px; }
.offre__accroche{ font-size:.95rem; color:var(--gris); margin:0; }

.offre__lignes{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:2px; }
.offre__ligne{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
  padding:15px 0; border-top:1px solid var(--ligne);
}
/* Précision sous une ligne de tarif (durée, nombre d'intervenantes) : passe
   à la ligne sous le prix sans décaler les pointillés ni le montant. */
.offre__detail{
  flex-basis:100%; margin-top:2px;
  font-size:.84rem; color:var(--gris);
}
.offre__ligne:first-child{ border-top:0; }
.offre__modalite{ font-size:1rem; color:var(--encre); }
.offre__pointilles{
  flex:1; min-width:20px; height:1px; align-self:center;
  background-image:radial-gradient(circle,var(--gris-clair) 1px,transparent 1px);
  background-size:6px 1px; background-repeat:repeat-x; opacity:.65;
}
.offre__prix{
  flex:none; font-family:"Spectral",serif; font-size:1.6rem; font-weight:400;
  color:var(--bleu-nuit); white-space:nowrap; letter-spacing:-.01em;
}
.offre__prix small{ font-family:"Karla",sans-serif; font-size:.78rem; font-weight:700; color:var(--gris); letter-spacing:.02em; }
.offre__prix--devis{
  font-family:"Karla",sans-serif; font-size:.82rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--vert);
}
.offre__inclus{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--ligne);
}
.offre__inclus p{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); margin:0 0 12px;
}
.offre__inclus ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.offre__inclus li{ position:relative; padding-left:26px; font-size:.94rem; color:var(--gris); }
.offre__inclus li::before{
  content:""; position:absolute; left:0; top:.42em; width:13px; height:7px;
  border-left:1.6px solid var(--vert); border-bottom:1.6px solid var(--vert);
  transform:rotate(-45deg);
}
.offre .lien-fleche{ margin-top:auto; padding-top:26px; }

.note-tarifs{
  display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:center;
  margin-top:36px; padding:22px 30px;
  border:1px solid var(--ligne); border-radius:999px; background:#fff;
}
.note-tarifs span{ display:flex; align-items:center; gap:11px; font-size:.93rem; color:var(--gris); }
.note-tarifs svg{ width:19px; height:19px; color:var(--vert); flex:none; }
.note-tarifs b{ color:var(--bleu-nuit); font-weight:700; }

.mention-tarifs{
  margin-top:26px; text-align:center; font-size:.86rem; color:var(--gris-clair);
}

@media (max-width:960px){
  .grille-tarifs,.grille-tarifs--devis{ grid-template-columns:1fr; }
  .offre{ padding:32px 28px 30px; }
  .note-tarifs{ border-radius:var(--rayon); flex-direction:column; align-items:flex-start; gap:14px; padding:24px 26px; }
}
@media (max-width:520px){
  .offre__ligne{ align-items:center; gap:10px; padding:14px 0; }
  .offre__pointilles{ display:none; }
  .offre__modalite{ flex:1; font-size:.95rem; color:var(--gris); line-height:1.35; }
  .offre__prix{ font-size:1.4rem; }
  .offre__entete{ gap:14px; }
  .offre__icone{ width:46px; height:46px; border-radius:13px; }
  .offre h3{ font-size:1.2rem; }
}

/* =========================================================
   Ajustements ponctuels (anciens attributs style="…" des pages)
   ---------------------------------------------------------
   Un style en ligne l'emportait sur toute règle de la feuille : ces
   classes gardent cette priorité par !important (vérifié propriété par
   propriété, en valeurs calculées, sur trois largeurs d'écran). Exception :
   .aiguille--depart, que le script de la boussole doit pouvoir tourner. Aucune page ne porte plus de style="…" : la politique de
   sécurité (CSP style-src 'self') peut ainsi interdire les styles
   injectés. outils/controle-site.py refuse tout nouveau style en ligne.
   ========================================================= */
.btn--compact{ padding:12px 22px !important; font-size:.85rem !important; }
.entete-section--large{ margin-bottom:0 !important; max-width:820px !important; }
.texte-secondaire{ font-size:.96rem !important; color:var(--gris) !important; }
.texte-secondaire-97{ font-size:.97rem !important; color:var(--gris) !important; }
.section--rapprochee{ padding-top:clamp(36px,5vw,56px) !important; }
.section--suite{ padding-top:clamp(40px,6vw,72px) !important; }
.pied__presentation{ font-size:.93rem !important; }
.carte__texte{ padding:26px 28px 30px !important; }
.carte__icone--compacte{ margin:0 !important; width:46px !important; height:46px !important; border-radius:13px !important; }
.urgence--neutre{ border-color:#C9DEE7 !important; background:#fff !important; }
.carte--media{ padding:0 !important; overflow:hidden !important; }
.carte--ligne{ flex-direction:row !important; gap:18px !important; align-items:flex-start !important; }
.carte--centree{ text-align:center !important; align-items:center !important; }
.filet--centre{ display:flex !important; justify-content:center !important; margin-top:48px !important; }
.aiguille--depart{ transform:rotate(60deg); }
.cadrage-buste{ --zoom:167% !important; --haut:0% !important; }
.cadrage-buste-haut{ --zoom:167% !important; --haut:-14.7% !important; }
.carte__icone--verte{ color:var(--vert) !important; }
.ai-centre{ align-items:center !important; }
.ai-debut{ align-items:start !important; }
.c-gris{ color:var(--gris) !important; }
.fs-110{ font-size:1.1rem !important; }
.fs-115{ font-size:1.15rem !important; }
.fs-125{ font-size:1.25rem !important; }
.fs-95{ font-size:.95rem !important; }
.fs-96{ font-size:.96rem !important; }
.fw-400{ font-weight:400 !important; }
.gap-12{ gap:12px !important; }
.gap-14{ gap:14px !important; }
.gap-fluide-64{ gap:clamp(32px,5vw,64px) !important; }
.gap-fluide-72{ gap:clamp(32px,5vw,72px) !important; }
.gap-fluide-96{ gap:clamp(52px,8vw,96px) !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-14{ margin-bottom:14px !important; }
.mb-01em{ margin-bottom:.1em !important; }
.mb-22{ margin-bottom:22px !important; }
.mb-26{ margin-bottom:26px !important; }
.mb-30{ margin-bottom:30px !important; }
.mb-fluide-44{ margin-bottom:clamp(30px,4vw,44px) !important; }
.mt-16{ margin-top:16px !important; }
.mt-18{ margin-top:18px !important; }
.mt-20{ margin-top:20px !important; }
.mt-22{ margin-top:22px !important; }
.mt-24{ margin-top:24px !important; }
.mt-26{ margin-top:26px !important; }
.mt-28{ margin-top:28px !important; }
.mt-38{ margin-top:38px !important; }
.mt-44{ margin-top:44px !important; }
.mx-0{ margin-left:0 !important; margin-right:0 !important; }
.mx-auto{ margin-inline:auto !important; }
.pt-0{ padding-top:0 !important; }
.txt-centre{ text-align:center !important; }