/* ==========================================================================
   CADRAN CONSEIL  feuille de style unique
   Typographie : Spectral (titres) + IBM Plex Sans (texte et interface)
   ========================================================================== */

:root{
  /* Couleurs */
  --navy:#0E2A47;
  --navy-profond:#0A1F35;
  --navy-clair:#16395C;
  --navy-trait:#26486E;

  --cta:#D4901F;            /* action principale */
  --cta-clair:#E3A238;
  --cta-fonce:#9E6810;      /* le rebord sous le bouton */
  --cta-encre:#1E1405;
  --ambre-texte:#A8710F;    /* ambre lisible sur fond clair */
  --creme:#F6E7CE;

  --vert-wa:#0E7C3A;
  --vert-wa-fonce:#095A29;
  --vert-vif:#25D366;

  --encre:#17212B;
  --gris:#5B6675;
  --gris-clair:#8B949F;
  --trait:#E4DFD5;
  --trait-fort:#C9CFD8;
  --papier:#FAF8F3;
  --papier-tiede:#F4F0E7;
  --blanc:#FFFFFF;
  --rouge:#B3261E;
  --focus:#4C9AFF;

  /* Typographie */
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --max:1100px;
  --r:3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
}
img,svg{max-width:100%}
img{height:auto}
::selection{background:var(--creme);color:var(--navy)}

a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--trait-fort)}
a:hover{text-decoration-color:var(--cta);color:var(--ambre-texte)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:2px;
}

/* ---------- Titres ---------- */
h1,h2{font-family:var(--serif);font-weight:600;color:var(--navy);margin:0 0 .42em;text-wrap:balance}
h1{font-size:clamp(2.05rem,1.35rem + 2.9vw,3.35rem);line-height:1.07;letter-spacing:-.022em}
h2{font-size:clamp(1.55rem,1.15rem + 1.6vw,2.3rem);line-height:1.14;letter-spacing:-.016em}
h3{font-family:var(--sans);font-weight:600;font-size:1.07rem;line-height:1.34;color:var(--navy);
   margin:0 0 .5em;letter-spacing:-.005em}
p{margin:0 0 1.05em}
.lead{font-size:1.16rem;line-height:1.55;color:var(--gris);max-width:62ch}
strong{font-weight:600}

/* ---------- Structure ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
section{padding:76px 0}
section.serre{padding:52px 0}
section.large{padding:96px 0}
.fond-blanc{background:var(--blanc)}
.fond-tiede{background:var(--papier-tiede)}
.fond-navy{background:var(--navy);color:#DCE6F0}
.fond-navy h1,.fond-navy h2,.fond-navy h3{color:#fff}
.fond-navy .lead{color:#AFC1D4}
.fond-navy a{color:var(--creme);text-decoration-color:rgba(246,231,206,.4)}
.fond-navy a:hover{color:#fff;text-decoration-color:var(--cta)}

/* Filet de séparation entre sections claires successives */
.fond-blanc + .fond-blanc,.fond-tiede + .fond-tiede{border-top:1px solid var(--trait)}

/* ---------- Surtitre éditorial ---------- */
.surtitre{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ambre-texte);
  font-weight:600;margin:0 0 20px;display:flex;align-items:center;gap:12px;
}
.surtitre::before{content:"";width:26px;height:2px;background:var(--cta);flex:0 0 auto}
.fond-navy .surtitre{color:var(--cta-clair)}
.centre .surtitre{justify-content:center}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:15px 27px;min-height:52px;
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.15;letter-spacing:-.005em;
  text-align:center;text-decoration:none;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:transform .15s cubic-bezier(.2,.7,.3,1),box-shadow .15s cubic-bezier(.2,.7,.3,1),
             background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{text-decoration:none}
.btn .fleche{transition:transform .22s cubic-bezier(.2,.7,.3,1);display:inline-block}
.btn:hover .fleche{transform:translateX(4px)}

/* Action principale  le seul bouton ambre de chaque écran */
.btn-primaire{background:var(--cta);color:var(--cta-encre);border-color:var(--cta);
              box-shadow:0 3px 0 0 var(--cta-fonce)}
.btn-primaire:hover{background:var(--cta-clair);border-color:var(--cta-clair);color:var(--cta-encre);
                    box-shadow:0 5px 0 0 var(--cta-fonce);transform:translateY(-2px)}
.btn-primaire:active{box-shadow:0 0 0 0 var(--cta-fonce);transform:translateY(3px)}

/* Action secondaire sur fond clair */
.btn-secondaire{background:transparent;color:var(--navy);border-color:var(--navy);
                box-shadow:0 3px 0 0 rgba(14,42,71,.22)}
.btn-secondaire:hover{background:var(--navy);color:#fff;box-shadow:0 5px 0 0 rgba(14,42,71,.28);
                      transform:translateY(-2px)}
.btn-secondaire:active{box-shadow:0 0 0 0 rgba(14,42,71,.22);transform:translateY(3px)}

/* Action secondaire sur fond navy */
.btn-clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);
           box-shadow:0 3px 0 0 rgba(255,255,255,.16)}
.btn-clair:hover{background:#fff;color:var(--navy);border-color:#fff;
                 box-shadow:0 5px 0 0 rgba(255,255,255,.24);transform:translateY(-2px)}
.btn-clair:active{box-shadow:0 0 0 0 rgba(255,255,255,.16);transform:translateY(3px)}

/* WhatsApp */
.btn-wa{background:var(--vert-wa);color:#fff;border-color:var(--vert-wa);
        box-shadow:0 3px 0 0 var(--vert-wa-fonce)}
.btn-wa:hover{background:#12924a;border-color:#12924a;color:#fff;
              box-shadow:0 5px 0 0 var(--vert-wa-fonce);transform:translateY(-2px)}
.btn-wa:active{box-shadow:0 0 0 0 var(--vert-wa-fonce);transform:translateY(3px)}
.btn-wa svg,.btn-secondaire svg,.btn-clair svg{width:19px;height:19px;flex:0 0 auto}

.btn-bloc{width:100%}
.boutons{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}

/* Lien-action discret */
.lien-fleche{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.95rem;
             text-decoration:none;color:var(--navy);border-bottom:1.5px solid var(--cta);
             padding-bottom:2px;transition:gap .18s ease,color .18s ease}
.lien-fleche:hover{gap:.75em;color:var(--ambre-texte)}

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
header.site{background:rgba(250,248,243,.92);backdrop-filter:saturate(180%) blur(10px);
            border-bottom:1px solid var(--trait);position:sticky;top:0;z-index:60}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
                  padding-top:13px;padding-bottom:13px}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none}
.marque svg{width:34px;height:34px;flex:0 0 auto}
.marque b{font-family:var(--serif);font-weight:600;font-size:1.14rem;color:var(--navy);
          letter-spacing:.01em;line-height:1.05;display:block}
.marque .sous{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.19em;
              text-transform:uppercase;color:var(--ambre-texte);font-weight:600;margin-top:2px}
nav.principale{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
nav.principale a{font-size:.93rem;font-weight:400;text-decoration:none;color:var(--gris);
                 padding:4px 0;border-bottom:2px solid transparent;transition:.15s}
nav.principale a:hover{color:var(--navy);border-bottom-color:var(--trait-fort)}
nav.principale a.actif{color:var(--navy);border-bottom-color:var(--cta)}
nav.principale a.nav-cta{color:var(--navy);font-weight:600}

/* ==========================================================================
   HÉROS
   ========================================================================== */
.heros{background:var(--navy-profond);color:#DCE6F0;padding:74px 0 78px;position:relative;overflow:hidden}
.heros::after{ /* cadran en filigrane */
  content:"";position:absolute;right:-140px;top:50%;transform:translateY(-50%);
  width:520px;height:520px;border-radius:50%;
  border:1px solid rgba(255,255,255,.055);
  box-shadow:0 0 0 62px rgba(255,255,255,.022) inset;
  pointer-events:none;
}
.heros .wrap{position:relative;z-index:1}
.heros h1{color:#fff;max-width:16ch}
.heros .lead{color:#B7C7D8;font-size:1.2rem;max-width:52ch}
.heros-etroit h1{max-width:20ch}

.lp-bandeau{background:var(--navy-profond);padding:17px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.lp-bandeau .marque b{color:#fff}
.lp-bandeau .marque .sous{color:var(--cta-clair)}

/* Héros à deux colonnes avec formulaire (landing page) */
.heros-lp{padding:52px 0 62px}
.heros-lp::after{display:none}
.heros-lp .lp-double{gap:52px;align-items:start}
.heros-lp h1{font-size:clamp(1.95rem,1.3rem + 2.4vw,2.9rem);max-width:19ch}

/* ==========================================================================
   GRILLES ET BLOCS
   ========================================================================== */
.grille{display:grid;gap:30px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.lp-double{display:grid;gap:48px;grid-template-columns:1.12fr .88fr;align-items:start}
@media(max-width:900px){.lp-double{grid-template-columns:1fr;gap:38px}}

.carte{background:var(--blanc);color:var(--encre);border:1px solid var(--trait);border-radius:var(--r);padding:28px}
.carte h3{margin-top:0}
.carte > :last-child{margin-bottom:0}
.fond-navy .carte{background:var(--navy-clair);border-color:var(--navy-trait);color:#DCE6F0}
.fond-tiede .carte{background:var(--blanc)}
.carte-accent{border-top:3px solid var(--cta)}

/* Colonnes éditoriales numérotées  remplacent les cartes uniformes */
.colonne-num{border-top:2px solid var(--navy);padding-top:20px}
.colonne-num .num{font-family:var(--serif);font-weight:600;font-size:2.5rem;line-height:1;
                  color:var(--cta);display:block;margin-bottom:14px;letter-spacing:-.03em}
.colonne-num h3{font-size:1.18rem;margin-bottom:.55em}
.colonne-num p{font-size:.98rem;color:var(--gris)}

/* ---------- Bloc praticien (page À propos) ---------- */
.praticien{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start}
@media(max-width:620px){.praticien{grid-template-columns:1fr;gap:20px}}
.praticien-marque svg,.praticien-photo{width:150px;height:150px;display:block;border-radius:50%}
.praticien-photo{object-fit:cover;box-shadow:0 0 0 1px var(--trait),0 6px 20px -10px rgba(14,42,71,.5)}
.praticien-texte h3{font-family:var(--serif);font-weight:600;font-size:1.32rem;margin-top:0;
                    letter-spacing:-.012em}
.praticien-titre{color:var(--ambre-texte);font-weight:600;font-size:.95rem;margin-bottom:15px}
.signature{font-family:var(--serif);font-size:1.03rem;line-height:1.5;color:var(--navy);
           border-left:2px solid var(--cta);padding-left:17px;margin:22px 0 0}

/* ---------- Vignette conseiller (à côté des appels WhatsApp) ---------- */
.bloc-conseiller{display:flex;align-items:center;gap:14px;text-align:left;margin:0 0 16px}
.conseiller-photo{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:0 0 auto;
                  box-shadow:0 0 0 1px rgba(14,42,71,.16)}
.conseiller-nom{font-family:var(--serif);font-weight:600;font-size:1.03rem;color:var(--navy);
                margin:0;line-height:1.25}
.conseiller-role{font-size:.84rem;color:var(--gris);margin:3px 0 0;line-height:1.3}

.bloc-conseiller-heros{margin:32px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.13)}
.heros .conseiller-nom{color:#fff}
.heros .conseiller-role{color:#8FA6BE}
.heros .conseiller-photo{width:62px;height:62px;box-shadow:0 0 0 1px rgba(255,255,255,.3)}

/* ---------- Figures : les livrables montrés ---------- */
.figure{margin:34px 0 0;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);
        padding:24px}
.figure svg{display:block;width:100%;max-width:620px;height:auto;margin:0 auto}
.figure .legende{display:flex;gap:18px;flex-wrap:wrap;font-size:.79rem;color:var(--gris);margin-top:18px}
.figure .legende span{display:flex;align-items:center;gap:7px}
.figure .legende i{width:13px;height:13px;border-radius:2px;flex:0 0 auto;display:inline-block}
.figure .legende i.rond{border-radius:50%}
.figure figcaption{font-size:.86rem;color:var(--gris);line-height:1.55;margin-top:16px;padding-top:15px;
                   border-top:1px solid var(--trait)}
.couverture{display:block;width:100%;max-width:290px;margin:0 auto;border-radius:2px;
            box-shadow:0 12px 36px -16px rgba(14,42,71,.62)}
.fond-navy .couverture{box-shadow:0 14px 40px -14px rgba(0,0,0,.7)}

/* ---------- Signature : le cadran qui se met en marche ---------- */
@keyframes cadran-aiguille{from{transform:rotate(-118deg)}to{transform:rotate(0)}}
@keyframes cadran-arc{from{stroke-dashoffset:37}to{stroke-dashoffset:0}}
.marque svg .aiguille{transform-origin:20px 20px;
                      animation:cadran-aiguille .85s cubic-bezier(.22,.9,.28,1) both}
.marque svg .arc{stroke-dasharray:37;animation:cadran-arc .85s cubic-bezier(.22,.9,.28,1) both}

/* ---------- Listes ---------- */
ul.coches{list-style:none;padding:0;margin:0 0 1.2em}
ul.coches li{position:relative;padding-left:28px;margin-bottom:10px;font-size:.98rem}
ul.coches li::before{
  content:"";position:absolute;left:3px;top:.52em;width:10px;height:5.5px;
  border-left:2px solid var(--cta);border-bottom:2px solid var(--cta);transform:rotate(-45deg);
}
.fond-navy ul.coches li::before{border-color:var(--cta-clair)}
ul.puces{padding-left:19px;margin:0 0 1.2em}
ul.puces li{margin-bottom:7px}
ul.compact li{font-size:.95rem;margin-bottom:7px}

/* ---------- Citations de terrain (les « douleurs ») ---------- */
.douleur{margin:0 0 24px;padding-left:22px;border-left:2px solid var(--trait-fort);position:relative}
.douleur strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.09rem;
                line-height:1.34;color:var(--navy);margin-bottom:5px}
.douleur span{display:block;color:var(--gris);font-size:.96rem;line-height:1.55}
.douleur:hover{border-left-color:var(--cta)}
.fond-navy .douleur{border-left-color:var(--navy-trait)}
.fond-navy .douleur strong{color:#fff}
.fond-navy .douleur span{color:#A6B8CC}

/* ---------- Chiffre en exergue ---------- */
.exergue{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,6vw,3.6rem);
         color:var(--cta);line-height:1;letter-spacing:-.03em;display:block}

/* ==========================================================================
   FORMULAIRE
   ========================================================================== */
.bloc-form{background:var(--blanc);color:var(--encre);border:1px solid var(--trait);border-top:3px solid var(--cta);
           border-radius:var(--r);padding:30px;box-shadow:0 1px 2px rgba(14,42,71,.04),
           0 12px 34px -18px rgba(14,42,71,.28)}
.bloc-form h3{font-size:1.28rem;font-family:var(--serif);font-weight:600;margin-bottom:.35em}
.bloc-form .intro{font-size:.94rem;color:var(--gris);margin-bottom:20px}
.champ{margin-bottom:15px}
.champ label{display:block;font-size:.81rem;font-weight:600;color:var(--navy);margin-bottom:6px;
             letter-spacing:.005em}
.champ input,.champ select,.champ textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--trait-fort);border-radius:var(--r);
  font-size:16px;font-family:var(--sans);background:var(--blanc);color:var(--encre);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.champ textarea{line-height:1.5;resize:vertical}
.champ select{cursor:pointer}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--gris-clair)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(14,42,71,.13);
}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:none}
.champ input:user-invalid,.champ select:user-invalid{border-color:var(--rouge);background:#FEF8F7}
.champ .aide{font-size:.78rem;color:var(--gris);margin-top:5px;line-height:1.45}
.obligatoire{color:var(--rouge)}
.cache{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mention{font-size:.78rem;color:var(--gris);margin:14px 0 0;line-height:1.5}
.sous-bouton{font-size:.82rem;color:var(--gris);text-align:center;margin:11px 0 0;
             display:flex;align-items:center;justify-content:center;gap:7px}
.sous-bouton svg{width:14px;height:14px;flex:0 0 auto;color:var(--vert-wa)}
form.envoi-en-cours .btn-primaire{opacity:.72;pointer-events:none;transform:translateY(3px);
                                  box-shadow:0 0 0 0 var(--cta-fonce)}

/* ==========================================================================
   ENCADRÉS
   ========================================================================== */
.encadre{background:var(--creme);color:var(--encre);border-radius:var(--r);padding:24px 26px;margin:28px 0}
.encadre > :last-child{margin-bottom:0}
.encadre h3{margin-top:0}
.fond-navy .encadre{background:var(--navy-clair);border:1px solid var(--navy-trait);color:#DCE6F0}
.avertissement{background:#FFF8EC;border-left:3px solid var(--cta);padding:16px 20px;
               font-size:.92rem;color:#5A4A2A;border-radius:0 var(--r) var(--r) 0;line-height:1.56}

/* ---------- Étapes numérotées ---------- */
.etapes{counter-reset:e;list-style:none;padding:0;margin:0}
.etapes li{counter-increment:e;position:relative;padding-left:54px;margin-bottom:26px}
.etapes li::before{
  content:counter(e);position:absolute;left:0;top:-2px;width:36px;height:36px;
  background:var(--navy);color:#fff;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-weight:600;font-size:1.02rem;
}
.etapes li strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.1rem;
                  color:var(--navy);margin-bottom:3px}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
footer.site{background:var(--navy);color:#93A9C0;padding:52px 0 32px;font-size:.9rem}
footer.site a{color:#CFDDEB;text-decoration:none}
footer.site a:hover{color:var(--cta-clair)}
footer.site .cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
                  margin-bottom:32px}
footer.site h4{color:#fff;font-family:var(--serif);font-weight:600;font-size:1.02rem;margin:0 0 12px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px}
footer.site .bas{border-top:1px solid var(--navy-trait);padding-top:20px;font-size:.82rem;
                 display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#7C93AC}

/* ==========================================================================
   WHATSAPP FLOTTANT + BARRE MOBILE
   ========================================================================== */
.wa-flottant{
  position:fixed;right:20px;bottom:20px;z-index:80;background:var(--vert-vif);color:#06301A;
  border-radius:40px;padding:13px 20px;text-decoration:none;font-weight:600;font-size:.93rem;
  box-shadow:0 5px 20px rgba(0,0,0,.2);display:flex;align-items:center;gap:9px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,opacity .18s ease;
}
.wa-flottant:hover{transform:translateY(-3px);box-shadow:0 9px 26px rgba(0,0,0,.26);color:#06301A}
.wa-flottant:active{transform:translateY(0)}
.wa-flottant svg{width:21px;height:21px;flex:0 0 auto}
.wa-flottant.masque{transform:translateY(140%);opacity:0;pointer-events:none}

.barre-cta{display:none}

@media(max-width:820px){
  .wa-flottant{display:none}
  .barre-cta{
    display:flex;gap:10px;align-items:stretch;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--trait);box-shadow:0 -6px 22px rgba(14,42,71,.1);
  }
  .barre-cta .btn{flex:1;min-height:50px;padding:13px 18px;font-size:.97rem}
  .barre-cta .btn-wa{flex:0 0 58px;padding:0}
  .barre-cta .btn-wa span{display:none}
  body.avec-barre{padding-bottom:78px}
}

/* ==========================================================================
   DIVERS
   ========================================================================== */
.centre{text-align:center}
.centre .lead{margin-left:auto;margin-right:auto}
.centre .boutons{justify-content:center}
.ancre-form{scroll-margin-top:96px}
hr.fin{border:0;border-top:1px solid var(--trait);margin:40px 0}
.mesure{max-width:66ch}
table.simple{width:100%;border-collapse:collapse;font-size:.93rem}
table.simple th,table.simple td{border:1px solid var(--trait);padding:11px 13px;text-align:left;
                                vertical-align:top}
table.simple th{background:var(--papier-tiede);color:var(--navy);font-weight:600}
.tableau-scroll{overflow-x:auto}

/* Pastille de format de fichier */
.pastille{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:600;
          letter-spacing:.09em;text-transform:uppercase;color:var(--ambre-texte);
          background:var(--creme);padding:5px 11px;border-radius:2px;margin-bottom:14px}
.fond-navy .pastille{background:rgba(212,144,31,.16);color:var(--cta-clair)}

/* Icône de tête de bloc */
.icone-bloc{width:34px;height:34px;color:var(--cta);margin-bottom:14px;display:block}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
                       scroll-behavior:auto!important}
  .btn:hover,.btn:active,.wa-flottant:hover{transform:none}
}