/* Polices hebergees sur le site, plus aucune requete vers Google Fonts:
   une connexion tierce de moins avant le premier rendu, et rien ne part chez
   Google au chargement d'une page. Fichiers variables, latin et latin-ext. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-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:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-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:'Outfit';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/outfit-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:'Outfit';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/outfit-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}

/* Paramédika, feuille de style unique.
   Palette sauge et beige doré, reprise de la maquette validée par Marie le 31 août. */

:root{
  --cream:#F3F0E8;
  --paper:#F8F7F2;       /* creme de la marque, fiche de reference Xecc 2026 */
  --sage:#B1B7A2;        /* sauge de la marque, fiche de reference Xecc 2026 (etait #AEB79E, Saybrook HC-114) */
  --sage-lt:#C7CCB9;     /* valeur exacte de sa capture */
  --sage-pale:#E5E8DC;
  --sage-mid:#8C9A83;
  --deep:#2F3A31;
  --gold:#C0A173;
  --gold-lt:#DCC8A6;
  --earth:#75593B;      /* fonce le 22 septembre 2026 pour le contraste: 5,7 sur creme, etait 3,9 */
  --earth-dk:#5E4830;   /* texte sur fond gold-lt */
  --ink:#22261F;
  --dim:#5E635A;        /* idem: 5,4 sur creme, etait 4,3 */
  --line:#DBD5C7;
  /* neutres chauds, planches Pinterest du 7 septembre */
  --sand:#E9E3D8;      /* greige de fond, respiration entre les sections */
  --sand-lt:#F1ECE3;   /* la meme, en plus pale */
  --clay:#C6A996;      /* argile rosee, unique accent chaud */
  --clay-lt:#E0CDC1;
  --stone:#BFC4C1;     /* gris pierre, fait le pont avec le sauge */
  --wrap:1400px;
  --r:24px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--cream);color:var(--ink);font:400 17px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Outfit,system-ui,sans-serif;font-weight:500;letter-spacing:-.02em;line-height:1.05}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.narrow{max-width:820px}
.lab{font-family:Outfit,sans-serif;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--earth)}
.big{font-family:Outfit,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:-.018em;line-height:1}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--deep);color:var(--cream);padding:12px 20px;border-radius:8px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;
  border-radius:100px;background:var(--deep);color:var(--cream);
  font:500 15px Outfit,sans-serif;letter-spacing:.02em;border:1px solid var(--deep);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s}
.btn:hover{background:var(--earth);border-color:var(--earth)}
.btn.gh{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.gh:hover{background:var(--ink);color:var(--cream)}
.btn.lt{background:var(--cream);color:var(--deep);border-color:var(--cream)}
.btn.lt:hover{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.btn.sm{min-height:46px;padding:0 22px;font-size:14px;white-space:nowrap}

/* ---------- bandeau d'annonce ---------- */
.ann{background:var(--deep);color:var(--cream);font-size:13px;letter-spacing:.03em}
.ann .wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding:11px 40px;position:relative;text-align:center}
.ann a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ann button{position:absolute;right:24px;background:none;border:0;color:var(--cream);opacity:.7;
  cursor:pointer;font-size:15px;line-height:1;width:44px;height:44px}
.ann button:hover{opacity:1}
.ann.off{display:none}

/* ---------- barre utilitaire ---------- */
.util{background:var(--paper);border-bottom:1px solid var(--line);font-size:13px}
.util .wrap{display:flex;align-items:center;justify-content:flex-end;gap:22px;padding-top:7px;padding-bottom:7px}
.util a:hover{color:var(--earth)}
.lang{display:flex;gap:4px}
.lang a{font:500 12.5px Outfit,sans-serif;letter-spacing:.08em;padding:6px 12px;border-radius:100px;color:var(--dim)}
.lang a[aria-current="true"]{background:var(--sage-lt);color:var(--deep)}

/* ---------- nav flottante ---------- */
/* hauteur nulle: la nav flotte par-dessus le heros sans occuper de place dans le flux,
   et colle a 14px du haut des que le bandeau d'annonce et la barre utilitaire ont defile. */
/* Barre collee au bord haut de l'ecran, pleine largeur. Elle flottait en
   pastille arrondie a 6 px du bord: l'espace au-dessus se voyait au defilement
   et le bouton de rendez-vous paraissait pose dans un cadre blanc. */
.navwrap{position:sticky;top:0;z-index:60;height:0}
.navbar{max-width:none;margin:0;border-radius:0;
  background:rgba(251,249,244,.92);backdrop-filter:blur(14px);
  border:0;border-bottom:1px solid var(--line);
  box-shadow:0 6px 30px rgba(47,58,49,.06);
  display:flex;align-items:center;gap:24px;padding:14px 32px}
.navbar .lg{width:210px;flex:none}
#nav{display:flex;gap:24px;margin:0 auto 0 32px;font:500 14.5px Outfit,sans-serif;
  letter-spacing:.07em;text-transform:uppercase}
#nav > li > a{white-space:nowrap}
#nav > li{position:relative;list-style:none}
.dep{display:none;background:none;border:0;cursor:pointer;color:inherit;padding:8px;-webkit-tap-highlight-color:transparent}
#nav > li > a{display:block;padding:14px 0;border-bottom:1.5px solid transparent;transition:border-color .25s}
#nav > li > a:hover,#nav > li:hover > a{border-color:var(--earth)}
.ntel{display:inline-flex;align-items:center;gap:7px;font:500 15px Outfit,sans-serif;
  white-space:nowrap;flex:none;padding:9px 15px;border-radius:100px;border:1px solid var(--line)}
.ntel:hover{color:var(--earth);border-color:var(--earth)}
#burger{display:none;align-items:center;justify-content:center;background:none;
  border:1px solid var(--line);border-radius:100px;width:46px;height:46px;cursor:pointer;
  color:var(--ink);-webkit-tap-highlight-color:transparent}
#burger:hover{border-color:var(--ink)}
#burger svg{display:block}
.ntelmob{display:none;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--line);border-radius:100px;color:var(--ink);flex:none;
  -webkit-tap-highlight-color:transparent}
.ntelmob:hover{border-color:var(--ink)}

/* ---------- méga-menu ---------- */
.mega{position:absolute;left:-30px;top:100%;padding-top:14px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s}
#nav > li:hover .mega,#nav > li:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega .inner{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 50px rgba(47,58,49,.13);padding:26px 30px;display:grid;
  grid-template-columns:repeat(2,minmax(210px,1fr));gap:26px 40px;min-width:560px}
.mega h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--earth);margin-bottom:12px}
.mega ul{list-style:none;display:grid;gap:2px}
.mega li a{display:block;padding:7px 10px;margin-left:-10px;border-radius:8px;
  font:400 14.5px Inter,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink);transition:background .2s}
.mega li a:hover{background:var(--sage-pale)}
.mega .both{display:block;font-size:11px;color:var(--dim);letter-spacing:.04em;margin-top:1px}

/* ---------- héros ---------- */
.hero{position:relative;overflow:hidden;min-height:min(78vh,780px);display:flex;align-items:center;
  background:linear-gradient(152deg,#C3CFC1 0%,#9EB0A0 46%,#BCA57E 100%)}
.hero.img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,38,31,.62) 0%,rgba(34,38,31,.25) 48%,rgba(34,38,31,0) 78%)}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.6;pointer-events:none}
.b1{width:56vw;height:56vw;left:-14vw;top:-18vw;background:#D6E0D2}
.b2{width:46vw;height:46vw;right:-10vw;top:6vw;background:#D9C298}
.b3{width:40vw;height:40vw;left:26vw;bottom:-20vw;background:#7C9080}
.hero .wrap{position:relative;z-index:3;padding-top:130px;padding-bottom:74px;width:100%;
  display:grid;grid-template-columns:1fr 40%;gap:48px;align-items:center}
.hero .lab{color:rgba(255,255,255,.9)}
.hero h1{color:#fff;font-size:clamp(38px,6.4vw,92px);margin-top:18px;text-transform:uppercase;
  font-family:Outfit,sans-serif;font-weight:500;letter-spacing:-.02em;line-height:.98}
.hero h1 span{display:block}
.hero .sub{color:rgba(255,255,255,.95);font-size:18px;max-width:44ch;margin-top:22px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

.offers{display:grid;gap:10px}
.offer{background:rgba(251,249,244,.94);backdrop-filter:blur(10px);border-radius:16px;padding:16px 18px;
  display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.offer:hover{transform:translateY(-4px)}
.offer .th{width:52px;height:52px;border-radius:12px;background:linear-gradient(140deg,var(--sage-lt),var(--gold-lt))}
.offer:nth-child(2) .th{background:linear-gradient(140deg,var(--gold-lt),var(--earth))}
.offer:nth-child(3) .th{background:linear-gradient(140deg,var(--clay-lt),var(--clay))}
.offer .k{display:block;font:500 9px Outfit,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--earth)}
.offer .t{display:block;font:500 14.5px Outfit,sans-serif;margin-top:4px;line-height:1.25}
.offer .d{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}

/* ---------- en-tête de page intérieure ---------- */
.phead{background:linear-gradient(150deg,var(--sage-pale),var(--cream));padding:132px 0 48px;border-bottom:1px solid var(--line)}
.phead.court{padding:132px 0 40px}
.phead h1{font-size:clamp(34px,5vw,66px);margin-top:14px;max-width:20ch}
.phead .intro{margin-top:20px;font-size:19px;color:var(--dim);max-width:60ch}
.fil{font-size:13px;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap}
.fil a:hover{color:var(--earth)}

/* ---------- sections ---------- */
.sec{padding:96px 0}
.sec.pale{background:var(--paper)}
.sec.sable{background:var(--sand-lt)}
.shead{max-width:60ch;margin-bottom:46px}
.shead h2{font-size:clamp(28px,3.6vw,50px);margin-top:12px}
.shead p.int{margin-top:16px;color:var(--dim);font-size:18px}

/* ---------- les deux familles ---------- */
.fams{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fam{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:38px 34px}
.fam.d{background:var(--deep);color:var(--cream);border-color:var(--deep)}
.fam.d .lab,.fam.d .more{color:var(--gold-lt)}
.fam h3{font-size:27px}
.fam .int{margin-top:10px;color:var(--dim);font-size:15.5px}
.fam.d .int{color:rgba(243,240,232,.72)}
.fam ul{list-style:none;margin-top:24px;display:grid;gap:1px}
.fam li a{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;transition:color .22s}
.fam.d li a{border-color:rgba(243,240,232,.16)}
.fam li a:hover{color:var(--earth)}
.fam.d li a:hover{color:var(--gold-lt)}
.fam li a .ar{opacity:.4;font-size:13px;transition:transform .22s,opacity .22s}
.fam li a:hover .ar{transform:translateX(5px);opacity:1}
.fam .more{display:inline-block;margin-top:26px;font:500 14px Outfit,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding-bottom:3px;color:var(--earth)}

/* ---------- grille de soins ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:20px;justify-content:start}
.card{max-width:430px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;
  display:flex;flex-direction:column;gap:12px;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(47,58,49,.09)}
.card h3{font-size:22px}
.card p{font-size:15.5px;color:var(--dim);flex:1}
.card .go{font:500 13px Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--earth)}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tag{font:500 10.5px Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;background:var(--sage-pale);color:#5C6A55}
.tag.g{background:var(--gold-lt);color:var(--earth-dk)}
.tag.both{background:var(--deep);color:var(--gold-lt)}

/* ---------- fiche de soin ---------- */
.soin{display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:start}
.soin .corps p{margin-bottom:20px;font-size:17.5px}
.soin .corps h2{font-size:30px;margin:44px 0 18px}

.volets{display:grid;gap:16px;margin:36px 0}
.volet{border:1px solid var(--line);border-radius:14px;padding:24px 26px;background:var(--sand-lt)}
.soin .corps .volet h2{font-size:18px;margin-top:0;margin-bottom:8px;display:flex;align-items:center;gap:11px}
.soin .corps .volet h2::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sage);flex:none}
.volet.m h3::before{background:var(--earth)}
.volet p{font-size:16px;color:var(--dim);margin:0}

.fiche{position:sticky;top:110px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:32px 30px}
.fiche dl{display:grid;gap:0}
.fiche dt{font:500 10.5px Outfit,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--earth);margin-top:22px}
.fiche dt:first-child{margin-top:0}
.fiche dd{font-size:16px;margin-top:6px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.fiche dd:last-child{border-bottom:0;padding-bottom:0}
.fiche .btn{width:100%;margin-top:26px}

.note{margin-top:22px;padding:16px 18px;border-radius:12px;background:var(--sage-pale);font-size:14.5px;color:#5C6A55}
.couv{margin:30px 0;padding:22px 26px;border-radius:16px;background:var(--deep);color:var(--cream)}
.couv strong{display:block;font:500 12px Outfit,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:8px}
.couv p{margin:0;font-size:16px;color:rgba(243,240,232,.9)}

.pont{margin:34px 0;padding:26px 28px;border-radius:16px;border:1px dashed var(--sage);background:var(--paper)}
.pont strong{display:block;font-family:Outfit,sans-serif;font-size:18px;margin-bottom:8px}
.pont p{margin:0;font-size:16px;color:var(--dim)}

.alerte{margin:26px 0;padding:18px 22px;border-radius:12px;background:#FDF3E3;border:1px solid var(--gold-lt);
  font-size:14.5px;color:var(--earth)}

/* ---------- bande d'énoncé ---------- */

/* ---------- à propos ---------- */
.about{display:grid;grid-template-columns:44% 1fr;align-items:stretch;background:var(--sand-lt)}
.apic{position:relative;min-height:520px}
.apic img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.apic .word{position:absolute;left:36px;bottom:34px;color:#fff;font-size:clamp(30px,4vw,58px);z-index:2}
.atxt{padding:86px 70px}
.atxt h2{font-size:clamp(28px,3.4vw,48px);margin:12px 0 22px}
.atxt p{margin-bottom:16px;color:var(--dim);font-size:17px}
.score{display:flex;gap:44px;align-items:center;margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.score .n{font-family:Outfit,sans-serif;font-size:44px;font-weight:500;line-height:1}
.score .st{color:var(--gold);letter-spacing:2px}
.score .c{font-size:13px;color:var(--dim)}

/* ---------- contact ---------- */
.cinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px}
.cinfo h3{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--earth);margin-bottom:12px}
.cinfo p,.cinfo td{font-size:16.5px}
.cinfo table{border-collapse:collapse;width:100%}
.cinfo td{padding:5px 0}
.cinfo td:last-child{text-align:right;color:var(--dim)}

/* ---------- pied ---------- */
footer{background:var(--deep);color:rgba(243,240,232,.78);padding:74px 0 34px;font-size:15px}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
footer .fh{font-family:Outfit,system-ui,sans-serif;font-weight:500;line-height:1.05;color:var(--cream);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:var(--gold-lt)}
footer .lg{width:300px;margin-bottom:20px}
footer .bot{margin-top:56px;padding-top:26px;border-top:1px solid rgba(243,240,232,.16);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:rgba(243,240,232,.66)}
footer .legal{max-width:70ch;font-size:12.5px;line-height:1.6;color:rgba(243,240,232,.66);margin-top:18px}

/* ---------- bandeau de préproduction ---------- */
.preprod{position:fixed;bottom:0;left:0;right:0;z-index:999;background:#6E5538;color:#fff;
  font:500 12px Outfit,sans-serif;letter-spacing:.06em;text-align:center;padding:8px 16px}
.preprod b{color:#FDF3E3}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .soin{grid-template-columns:1fr;gap:36px}
  .fiche{position:static}
  .about{grid-template-columns:1fr}
  .apic{min-height:360px}
  .atxt{padding:56px 40px}
}
@media(max-width:1150px){
  #nav{display:none}
  #burger{display:inline-flex;margin-left:auto}
  .ntel{display:none}
  .ntelmob{display:inline-flex}
}
@media(max-width:900px){
  .wrap{padding:0 22px}
  .hero .wrap{grid-template-columns:1fr;padding-top:120px;padding-bottom:48px}
  .fams{grid-template-columns:1fr}
  .sec{padding:64px 0}
  .phead{padding:140px 0 46px}
  .navbar{padding:10px 18px}
  .navbar .lg{width:150px}
  .util .wrap{justify-content:center;gap:14px;flex-wrap:wrap}
  footer .cols{grid-template-columns:1fr 1fr;gap:30px}
  #nav.open{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px 20px;margin:0;
    max-height:calc(100vh - 150px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 18px 50px rgba(47,58,49,.16)}
  #nav.open > li > a{padding:12px 0}
  /* Les soins etaient deplies d'office et repoussaient A propos, Equipe,
     Boutique et Contact hors de vue. Ils se deplient maintenant au clic. */
  #nav.open > li{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
  #nav.open > li:last-child{border-bottom:0}
  #nav.open > li > a{flex:1;padding:15px 0}
  #nav.open .dep{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:100px;transition:transform .25s}
  #nav.open .dep[aria-expanded="true"]{transform:rotate(180deg)}
  #nav.open .mega{position:static;opacity:1;visibility:visible;transform:none;padding-top:0;
    flex:0 0 100%;display:none}
  #nav.open > li.ouvert .mega{display:block}
  #nav.open .mega .inner{border:0;box-shadow:none;padding:0 0 14px;min-width:0;grid-template-columns:1fr;background:none}
}
@media(max-width:620px){
  /* le bouton rendez-vous sort de la barre a cette largeur, et il est
     de toute facon repete dans le heros et au bas de chaque page */
  .navbar .btn{display:none}
  .navbar .lg{width:160px}
  #burger,.ntelmob{width:42px;height:42px}
  .ann .wrap{padding:10px 40px 10px 20px;font-size:12.5px;flex-direction:column;gap:4px}
  .ann button{right:4px;top:50%;transform:translateY(-50%)}
  .filtres button{padding:9px 14px;font-size:11.5px}
}
@media(max-width:560px){
  footer .cols{grid-template-columns:1fr}
  .atxt{padding:44px 22px}
  .score{gap:26px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- page prendre rendez-vous ---------- */
.rdvpage{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.rdvpage .cal{width:100%;min-height:760px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.calattente{background:var(--sand-lt);border:1px solid var(--line);border-radius:var(--r);padding:56px 48px}
.calattente h3{font-size:27px;margin:14px 0 14px;max-width:22ch}
.calattente p{color:var(--dim);max-width:52ch}
.calattente .tel{margin-top:30px}
.calattente .tel a{font-family:Outfit,sans-serif;font-size:32px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.calattente .tel a:hover{color:var(--earth)}
.rdvinfo{display:grid;gap:26px}
.rdvinfo h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--earth);margin-bottom:12px}
.rdvinfo table{width:100%;border-collapse:collapse;font-size:15px}
.rdvinfo td{padding:5px 0;vertical-align:top}
.rdvinfo td:last-child{text-align:right;color:var(--dim)}
@media(max-width:900px){
  .rdvpage{grid-template-columns:1fr;gap:28px}
  .calattente{padding:36px 26px}
  .calattente .tel a{font-size:27px}
}
.apercu{margin:26px 0;padding:24px 26px;border-radius:16px;background:var(--sand-lt);border:1px solid var(--line)}
.apercu p{margin:0;color:var(--dim)}

/* ---------- vue d'ensemble des soins ---------- */
.sec.serre{padding:56px 0 88px}
.dossoins{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.famcol{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:38px 36px}
.famcol.d{background:var(--deep);border-color:var(--deep);color:var(--cream)}
.famcol.d .lab{color:var(--gold-lt)}
.famcol.d .int{color:rgba(243,240,232,.72)}
.famcol h2{font-size:31px;margin-top:12px}
.famcol .int{margin-top:10px;color:var(--dim);font-size:16px}
.famcol .cat{margin-top:30px}
.famcol .cat h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--earth);margin-bottom:8px}
.famcol.d .cat h3{color:var(--gold-lt)}
.famcol ul{list-style:none;display:grid;gap:1px}
.famcol li a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;transition:color .22s}
.famcol.d li a{border-color:rgba(243,240,232,.16)}
.famcol li a:hover{color:var(--earth)}
.famcol.d li a:hover{color:var(--gold-lt)}
.famcol li a .ar{opacity:.35;font-size:13px;font-style:normal;transition:transform .22s,opacity .22s}
.famcol li a:hover .ar{transform:translateX(5px);opacity:1}
.famcol li a em{font-style:normal;font:500 9.5px Outfit,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--earth);border:1px solid var(--line);border-radius:100px;padding:3px 9px;flex:none}
.famcol.d li a em{color:var(--gold-lt);border-color:rgba(243,240,232,.3)}
.famcol .more{display:inline-block;margin-top:30px;font:500 13px Outfit,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--earth);border-bottom:1.5px solid currentColor;padding-bottom:3px}
.famcol.d .more{color:var(--gold-lt)}

/* sommaire d'ancres des pages famille */
.ancres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.ancres a{font:500 12.5px Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 17px;border-radius:100px;border:1px solid var(--line);background:var(--paper);
  color:var(--dim);transition:background .2s,color .2s,border-color .2s}
.ancres a:hover{background:var(--deep);border-color:var(--deep);color:var(--cream)}
.catbloc{margin-bottom:54px;scroll-margin-top:110px}
.catbloc .shead{margin-bottom:22px}
@media(max-width:900px){
  .dossoins{grid-template-columns:1fr}
  .famcol{padding:30px 24px}
}

/* ---------- galerie avant / apres ---------- */
.galsec{background:var(--sand-lt);border-top:1px solid var(--line)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.gal figure{margin:0;border-radius:16px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.gal img{width:100%;height:auto;display:block}

/* ---------- l'appareil, le differenciateur de la clinique ---------- */
.laser{background:var(--deep);color:var(--cream)}
.laser .wrap{display:grid;grid-template-columns:1fr 42%;gap:56px;align-items:center;padding-top:96px;padding-bottom:96px}
.laser .lab{color:var(--gold-lt)}
.laser h2{font-size:clamp(30px,4.2vw,58px);margin-top:14px;line-height:1.02}
.laser h2 span{display:block;color:var(--sage-lt)}
.laser p{color:rgba(243,240,232,.78);margin-top:20px;max-width:54ch;font-size:17.5px}
.laser .cta{margin-top:32px}
.laser .lpic{border-radius:var(--r);overflow:hidden;aspect-ratio:5/6}
.laser .lpic img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .laser .wrap{grid-template-columns:1fr;gap:30px;padding-top:60px;padding-bottom:60px}
  .laser .lpic{aspect-ratio:4/3}
}

/* ---------- filtre des pages famille ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px}
.filtres button{font:500 12.5px Outfit,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  padding:10px 18px;border-radius:100px;border:1px solid var(--line);background:var(--paper);
  color:var(--dim);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filtres button:hover{border-color:var(--deep);color:var(--ink)}
.filtres button.on{background:var(--deep);border-color:var(--deep);color:var(--cream)}
.filtres button em{font-style:normal;opacity:.5;margin-left:5px;font-size:11px}
.filtres button.on em{opacity:.7}

/* ---------- photo dans la fiche de soin ---------- */
/* Portrait ou carre, flottant a droite ou a gauche selon la fiche: le texte
   habille l'image et deux pages voisines ne se ressemblent pas. */
.soinfig{margin:6px 0 22px;border-radius:18px;overflow:hidden;background:var(--sand);width:46%}
.soinfig.portrait{aspect-ratio:4/5}
.soinfig.carre{aspect-ratio:1}
.soinfig.droite{float:right;margin-left:30px}
.soinfig.gauche{float:left;margin-right:30px}
.soinfig img{width:100%;height:100%;object-fit:cover}
.soinfig.vide.t0{background:linear-gradient(150deg,var(--sage-pale),var(--sage) 64%,var(--sage-mid))}
.soinfig.vide.t1{background:linear-gradient(150deg,var(--sand-lt),var(--gold-lt) 58%,var(--gold))}
.soinfig.vide.t2{background:linear-gradient(150deg,var(--stone),var(--clay-lt) 58%,var(--clay))}
.soin .corps::after{content:"";display:block;clear:both}

@media(max-width:700px){
  .soinfig{float:none!important;width:100%;margin:18px 0 24px}
}

/* ---------- fiche d'appareil: ce qu'on traite avec ---------- */
.usages{margin:44px 0 8px;clear:both}
.usages h2{font-size:24px;margin-bottom:20px}
.phead h1 .sous{display:block;font-size:.42em;letter-spacing:.02em;color:var(--earth);margin-top:12px;text-transform:none}

/* ---------- temoignages ---------- */
.avis{background:var(--sand-lt)}
.temoin{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;
  display:flex;flex-direction:column;gap:14px}
.temoin q{quotes:"«\00a0" "\00a0»";font-size:16.5px;line-height:1.6;color:var(--ink)}
.temoin figcaption{font:500 13px Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--earth);margin-top:auto}
.temoin.tous{justify-content:center;align-items:flex-start;gap:10px;background:var(--deep);border-color:var(--deep);color:var(--cream);
  transition:background .25s}
.temoin.tous:hover{background:var(--earth);border-color:var(--earth)}
.temoin.tous .etoiles{color:var(--gold-lt);letter-spacing:.16em;font-size:15px}
.temoin.tous strong{font:500 20px Outfit,sans-serif}
.temoin.tous .go{font:500 12.5px Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt)}

/* variante d'en-tete foncee, a comparer avec Marie */
.navbar.sombre{background:rgba(47,58,49,.94);border-color:rgba(255,255,255,.14)}
.navbar.sombre #nav > li > a{color:var(--cream)}
.navbar.sombre #nav > li > a:hover{border-color:var(--gold-lt)}
.navbar.sombre .ntel{color:var(--cream);border-color:rgba(255,255,255,.28)}
.navbar.sombre .ntel:hover{color:var(--gold-lt);border-color:var(--gold-lt)}
.navbar.sombre .btn{background:var(--cream);color:var(--deep);border-color:var(--cream)}
.navbar.sombre .btn:hover{background:var(--gold);border-color:var(--gold)}
.navbar.sombre #burger,.navbar.sombre .ntelmob{color:var(--cream);border-color:rgba(255,255,255,.28)}

/* ---------- page contact et formulaire ---------- */
.contactpage{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:start}

.fcontact{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:36px 34px;display:grid;gap:20px}
.fcontact .ligne{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fcontact label{display:block;font:500 11.5px Outfit,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--earth)}
.fcontact input,.fcontact select,.fcontact textarea{
  display:block;width:100%;margin-top:9px;padding:13px 15px;
  font:400 16px Inter,system-ui,sans-serif;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:12px;
  transition:border-color .2s,background .2s,box-shadow .2s}
.fcontact textarea{resize:vertical;min-height:130px;line-height:1.6}
.fcontact select{appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E736A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px}
.fcontact input:hover,.fcontact select:hover,.fcontact textarea:hover{border-color:var(--sage-mid)}
.fcontact input:focus,.fcontact select:focus,.fcontact textarea:focus{
  outline:none;background:var(--paper);border-color:var(--sage-mid);
  box-shadow:0 0 0 3px rgba(174,183,158,.28)}
.fcontact .btn{justify-self:start;margin-top:4px}
.fcontact .fnote{font-size:13.5px;color:var(--dim);line-height:1.55;margin:0}

.contactpage .cinfo{grid-template-columns:1fr;gap:26px;
  background:var(--sand-lt);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.contactpage .cinfo a:hover{color:var(--earth)}

/* Le formulaire doit tenir dans un ecran d'ordinateur, sans defiler. */
.phead.ras{padding:92px 0 22px}
.phead.ras h1{font-size:clamp(30px,3.6vw,46px)}
.phead.ras .intro{margin-top:10px;font-size:16.5px}
.sec.ras{padding:22px 0 60px}
.fcontact{padding:24px 26px;gap:12px}
.fcontact input,.fcontact select,.fcontact textarea{margin-top:7px;padding:11px 14px;font-size:15.5px;border-radius:10px}
.fcontact textarea{min-height:76px}
.fcontact label{font-size:11px}
.fcontact .pied{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:2px}
.fcontact .pied .btn{min-height:48px;flex:none}
.fcontact .fnote{flex:1;min-width:220px;font-size:13px}
.contactpage .cinfo{padding:24px 24px;gap:20px}
.contactpage .cinfo p,.contactpage .cinfo td{font-size:15.5px}

@media(max-width:900px){
  .contactpage{grid-template-columns:1fr;gap:26px}
  .fcontact{padding:24px 20px}
  .fcontact .ligne{grid-template-columns:1fr}
  .sec.ras{padding:28px 0 56px}
}

/* Ecrans courts, portables 768px de haut: le formulaire doit rester entier a l'ecran. */
@media(min-width:901px) and (max-height:840px){
  .phead.ras{padding:78px 0 16px}
  .phead.ras h1{font-size:clamp(26px,2.8vw,36px)}
  .phead.ras .intro{display:none}
  .sec.ras{padding:16px 0 48px}
  .fcontact{padding:20px 22px;gap:10px}
  .fcontact input,.fcontact select,.fcontact textarea{margin-top:5px;padding:9px 13px;font-size:15px}
  .fcontact textarea{min-height:62px}
  .fcontact .pied{gap:14px}
  .fcontact .pied .btn{min-height:44px}
  .contactpage .cinfo{padding:20px 22px;gap:16px}
}

/* ---------- zones traitees en groupes (neuromodulateurs) ---------- */
.zonesd{display:grid;gap:18px;margin:6px 0 28px}
.zgroupe{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 26px}
.zgroupe h3{font:500 12px Outfit,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--earth);margin-bottom:6px}
.zgroupe dl{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:0 22px}
.zgroupe dt,.zgroupe dd{padding:13px 0;border-top:1px solid var(--line)}
.zgroupe dt:first-of-type,.zgroupe dt:first-of-type + dd{border-top:0}
.zgroupe dt{font:500 16px Outfit,sans-serif;color:var(--ink)}
.zgroupe dd{margin:0;font-size:15.5px;color:var(--dim);line-height:1.6}
.soin .corps .conclusion{font-size:18px;color:var(--ink);border-left:0;margin-top:4px}
@media(max-width:700px){
  .zgroupe{padding:20px 18px}
  .zgroupe dl{grid-template-columns:1fr}
  .zgroupe dd{padding-top:0;border-top:0}
}

/* Titres d'un seul mot long, « Neuromodulateurs »: ils debordaient sur mobile. */
@media(max-width:600px){
  .phead h1{font-size:clamp(24px,7.2vw,34px);overflow-wrap:break-word;hyphens:auto}
  .phead h1 .sous{font-size:.62em}
}

/* ---------- infolettre ---------- */
.finfo-pied{display:grid;grid-template-columns:1fr minmax(300px,460px);gap:30px;align-items:start;
  padding-bottom:34px;margin-bottom:38px;border-bottom:1px solid rgba(243,240,232,.14)}
.finfo-pied .fh{margin-bottom:8px;font-size:12px;opacity:1}
.finfo-pied p{font-size:15px;opacity:.78;max-width:40ch}
.finfo .ligne-i{display:flex;gap:10px}
.finfo .ligne-i label{flex:1}
.finfo label.sr span{position:absolute;left:-9999px}
.finfo input[type=email],.finfo input[name=prenom]{display:block;width:100%;padding:12px 16px;
  border-radius:100px;border:1px solid rgba(243,240,232,.28);background:rgba(243,240,232,.08);
  color:inherit;font:400 15px Inter,system-ui,sans-serif;transition:border-color .2s,background .2s}
.finfo input::placeholder{color:rgba(243,240,232,.55)}
.finfo input:focus{outline:none;border-color:var(--sage-lt);background:rgba(243,240,232,.14)}
.finfo .consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:12.5px;line-height:1.5;opacity:.82;cursor:pointer}
.finfo .consent input{margin-top:3px;flex:none;width:15px;height:15px;accent-color:var(--sage)}
.finfo-etat{font-size:13.5px;margin:8px 0 0;min-height:1.2em}

/* bloc de l'accueil, sur fond clair */
.infolettre{background:var(--sage-pale)}
.ibloc{display:grid;grid-template-columns:1fr minmax(320px,480px);gap:48px;align-items:center}
.ibloc h2{font-size:clamp(28px,3.4vw,46px);margin-top:12px}
.ibloc .int{margin-top:14px;color:var(--dim);font-size:18px;max-width:44ch}
.finfo.grand{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px}
.finfo.grand .champs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.finfo.grand label span{display:block;font:500 11px Outfit,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--earth);margin-bottom:6px}
.finfo.grand input[type=email],.finfo.grand input[name=prenom]{background:var(--cream);border:1px solid var(--line);color:var(--ink);border-radius:12px}
.finfo.grand input:focus{border-color:var(--sage-mid);background:var(--paper);box-shadow:0 0 0 3px rgba(174,183,158,.28)}
.finfo.grand .consent{opacity:1;color:var(--dim)}
.finfo.grand .btn{margin-top:16px}
.finfo.grand .finfo-etat{color:var(--earth)}

@media(max-width:900px){
  .finfo-pied,.ibloc{grid-template-columns:1fr;gap:20px}
  .finfo.grand .champs{grid-template-columns:1fr}
}
@media(max-width:480px){
  .finfo .ligne-i{flex-direction:column}
  .finfo .ligne-i .btn{width:100%}
}

/* ---------- promotions ---------- */
.promos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.promo{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;
  display:flex;flex-direction:column;gap:10px}
.promo h2{font-size:26px;margin-top:2px}
.promo .pdet{font-size:17px;color:var(--ink)}
.promo .pfin{font:500 13px Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--earth)}
.promo .pcond{font-size:13.5px;color:var(--dim);line-height:1.55}
.promo .pact{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px}

/* ---------- blocs de fiche: liste de zones et tableau comparatif ---------- */
.liste-soin{list-style:none;display:grid;gap:0;margin:8px 0 18px;background:var(--paper);
  border:1px solid var(--line);border-radius:18px;padding:6px 24px}
.liste-soin li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);font-size:16px;line-height:1.55}
.liste-soin li:first-child{border-top:0}
.liste-soin li::before{content:"";position:absolute;left:2px;top:21px;width:7px;height:7px;border-radius:50%;background:var(--sage-mid)}
.note-soin{font-size:14.5px;color:var(--dim);background:var(--sand-lt);border-radius:14px;padding:14px 18px;line-height:1.6}
.tabwrap{overflow-x:auto;margin:10px 0 18px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.comp{width:100%;border-collapse:collapse;min-width:540px;font-size:15px}
.comp th,.comp td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line);line-height:1.55}
.comp thead th,.comp thead td{border-top:0;background:var(--sage-pale);font:500 15px Outfit,sans-serif;color:var(--ink)}
.comp thead th{font-size:17px}
.comp tbody th{font:500 12px Outfit,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--earth);width:22%}
.comp td{color:var(--ink)}

/* Un element de grille ne retrecit pas sous la largeur de son contenu par defaut:
   le tableau comparatif elargissait toute la page sur mobile. Il defile dans son cadre. */
.soin > *{min-width:0}
.tabwrap{max-width:100%}

/* ======================================================================
   Passe adaptative du 15 septembre 2026, apres audit a 360, 390, 768,
   1024, 1280 et 1440 px.
   ====================================================================== */

/* Photo de fiche: une grille plutot qu'un element flottant. Flottante, la photo
   debordait sur « Resultats », les volets et l'encadre de couverture. */
.soin-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);gap:34px;align-items:start;margin-bottom:12px}
.soin-intro.gauche{grid-template-columns:minmax(0,40%) minmax(0,1fr)}
.soin-intro.gauche .soinfig{order:-1}
.soin-intro .soinfig{float:none!important;width:100%;margin:4px 0 0}
.soin-intro .textes > p:last-child{margin-bottom:0}
@media(max-width:700px){
  .soin-intro,.soin-intro.gauche{grid-template-columns:1fr;gap:20px}
  .soin-intro .soinfig{order:-1;aspect-ratio:4/3}
}

/* Logos a leurs vraies proportions: ils etaient ecrases d'environ 30 %. */
.navbar .lg{width:auto}
.navbar .lg img{height:112px;width:auto;max-width:none}
footer .lg{height:auto}
@media(max-width:900px){ .navbar .lg{width:auto} .navbar .lg img{height:96px} }
@media(max-width:620px){ .navbar .lg{width:auto} .navbar .lg img{height:84px} }

/* Portables de 1201 a 1400 px: la barre complete poussait « Prendre rendez-vous »
   hors de l'ecran. Numero en icone, menu resserre. */
@media(min-width:1201px) and (max-width:1400px){
  .ntel span{display:none}
  .ntel{padding:10px}
  #nav{gap:17px;margin-left:20px;font-size:13.5px;letter-spacing:.05em}
  .navbar{gap:18px}
  .navbar .lg img{height:104px}
}

/* Menu compact jusqu'a 1200 px, et surtout un menu qui s'ouvre: ses regles
   n'existaient que sous 900 px, le bouton ne faisait rien sur une tablette
   a l'horizontale. */
@media(max-width:1200px){
  #nav{display:none}
  #burger{display:inline-flex;margin-left:auto}
  .ntel{display:none}
  .ntelmob{display:inline-flex}
  #nav.open{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px 20px;margin:0;
    max-height:calc(100vh - 150px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 18px 50px rgba(47,58,49,.16);font-size:14.5px;letter-spacing:.07em}
  #nav.open > li{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
  #nav.open > li:last-child{border-bottom:0}
  #nav.open > li > a{flex:1;padding:15px 0;border-bottom:0}
  #nav.open .dep{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:100px;transition:transform .25s}
  #nav.open .dep[aria-expanded="true"]{transform:rotate(180deg)}
  #nav.open .mega{position:static;opacity:1;visibility:visible;transform:none;padding-top:0;flex:0 0 100%;display:none}
  #nav.open > li.ouvert .mega{display:block}
  #nav.open .mega .inner{border:0;box-shadow:none;padding:0 0 14px;min-width:0;grid-template-columns:1fr;background:none}
  .navwrap{position:sticky}
  .navbar{position:relative}
}

/* Cibles tactiles: les liens de la barre du haut faisaient 21 px de haut. */
@media(max-width:1024px){
  .util a{display:inline-flex;align-items:center;min-height:40px;padding:0 6px}
  .lang a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px}
  .util .wrap{padding-top:2px;padding-bottom:2px}
}

/* Etiquette des cartes d'offres du heros, illisible a 9 px */
.offer .k{font-size:10.5px}

/* Zones tactiles restantes, sur ecrans tactiles: la zone cliquable grandit,
   la mise en page ne bouge pas. */
@media(max-width:1024px){
  .ann a{display:inline-block;padding:10px 4px;margin:-10px 0}
  .finfo .consent{min-height:44px;align-items:center}
  .finfo .consent input{width:20px;height:20px;margin-top:0}
  .filtres button{min-height:44px}
}

/* Barre compacte: le bouton et le telephone restaient colles au logo, avec un
   grand vide avant le menu. Le groupe d'actions se range a droite. */
@media(max-width:1200px){
  .navbar .btn{margin-left:auto}
  #burger{margin-left:0}
}
@media(max-width:620px){
  .ntelmob{margin-left:auto}
}
@media(max-width:1024px){
  .more{display:inline-flex;align-items:center;min-height:44px}
}

/* Sous-titres de traitement a l'interieur d'une section de fiche */
.soin .corps h3.soustitre{font-size:21px;margin:30px 0 10px;color:var(--ink)}
.soin .corps h3.soustitre + p{margin-bottom:12px}

/* ---------- Cartes cadeaux ---------- */
.cadhaut{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.cadtxt p{font-size:18px;color:var(--dim);max-width:46ch;margin-bottom:16px}
.cadmont{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;list-style:none;padding:0}
.cadmont li{border:1px solid var(--line);border-radius:100px;padding:10px 20px;
  font:500 16px Outfit,sans-serif;background:var(--paper)}
.cadmont li.libre{border-style:dashed;color:var(--dim)}
.cadachat{background:var(--sand-lt);border:1px solid var(--line);border-radius:var(--r);padding:42px 38px}
.cadachat h3{font-size:25px;margin:12px 0 16px;max-width:20ch}
.cadachat p{color:var(--dim);max-width:44ch}
.cadachat .btn{margin-top:22px}
.cadachat .tel{margin-top:26px}
.cadachat .tel a{font-family:Outfit,sans-serif;font-size:30px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.cadachat .tel a:hover{color:var(--earth)}
.cadachat .fin{margin-top:12px;font-size:14.5px}
.cadetapes,.cadidees,.cadcond{margin-top:72px}
.cadetapes h2,.cadidees h2,.cadcond h2{font-size:28px;margin-bottom:26px}
.cadetapes ol{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;list-style:none;padding:0;counter-reset:none}
.cadetapes li{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--sage);padding-top:18px}
.cadetapes .n{font:500 13px Outfit,sans-serif;letter-spacing:.18em;color:var(--earth)}
.cadetapes strong{font-size:19px;font-weight:500}
.cadetapes li span:last-child{color:var(--dim);font-size:15.5px}
.cadcond ul{max-width:70ch;padding-left:20px}
.cadcond li{margin-bottom:10px;color:var(--dim)}
@media(max-width:900px){
  .cadhaut{grid-template-columns:1fr;gap:28px}
  .cadachat{padding:30px 24px}
  .cadetapes ol{grid-template-columns:1fr;gap:20px}
  .cadetapes,.cadidees,.cadcond{margin-top:48px}
}

/* ---------- Carrousel des avis ----------
   Deux copies de la liste defilent en boucle. Le survol, le focus clavier et
   le reglage systeme « moins d'animation » arretent le defilement: un texte
   qui bouge sous l'oeil de quelqu'un qui le lit est une faute, pas un effet. */
.ruban{overflow:hidden;margin-top:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.piste{display:flex;gap:22px;width:max-content;padding:4px 22px;animation:defile 66s linear infinite}
.ruban:hover .piste,.piste:focus-within{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.avis .temoin{flex:0 0 360px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;display:flex;flex-direction:column;gap:14px;margin:0}
.avis .temoin .etoiles{color:var(--gold);font-size:14px;letter-spacing:.18em}
.avis .temoin blockquote{margin:0;flex:1}
.avis .temoin q{quotes:none;font-size:16.5px;line-height:1.62;color:var(--ink)}
.avis .temoin figcaption{font:500 14px Outfit,sans-serif;letter-spacing:.04em;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.avis .temoin figcaption span{font-weight:300;font-size:13px}
.avisbas{margin-top:30px}
@media(prefers-reduced-motion:reduce){
  .piste{animation:none;overflow-x:auto;scroll-snap-type:x mandatory}
  .avis .temoin{scroll-snap-align:center}
}
@media(max-width:620px){
  .avis .temoin{flex-basis:280px;padding:24px 22px}
  .piste{animation-duration:48s}
}

/* ---------- Cartes cadeaux, les montants ---------- */
.cadgrille{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-top:28px}
.cadcarte{border:1px solid var(--line);border-radius:18px;padding:22px 20px;background:var(--paper);
  display:flex;flex-direction:column;gap:6px;text-align:center}
.cadcarte .m{font:300 34px Outfit,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.cadcarte .d{font-size:13.5px;color:var(--dim);min-height:2.6em}
.cadcarte .btn{margin-top:12px;width:100%;justify-content:center}
.cadcarte.libre{border-style:dashed;background:none}
.btn.off{background:var(--stone);pointer-events:none;opacity:.55}
.cadnote{margin-top:16px;font-size:14.5px;color:var(--dim)}
.cadnote strong{color:var(--ink);font-weight:500}
.cadmerci{background:var(--sand-lt);border:1px solid var(--line);border-radius:var(--r);padding:44px 40px;max-width:60ch}
.cadmerci h2{font-size:26px;margin-bottom:14px}
.cadmerci ol{margin:20px 0 0 18px;color:var(--dim)}
.cadmerci li{margin-bottom:10px}
@media(max-width:620px){
  .cadmerci{padding:28px 22px}
}

/* ---------- bandeau d'image sous l'en-tete d'une page ----------
   N'existe que si contenu/site.json donne une image a la page. Tres large sur
   ordinateur, plus haut sur telephone pour que le sujet ne soit pas coupe. */
.bandeau{margin:0 auto;max-width:var(--wrap);padding:0 40px}
.bandeau img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r);margin-top:-22px}
@media(max-width:700px){.bandeau{padding:0 20px}.bandeau img{aspect-ratio:4/3;margin-top:-10px}}
.hero picture{display:contents}

/* Titre present pour la structure du document et les lecteurs d'ecran, invisible a l'ecran. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Mega-menu sur ordinateur: les categories s'empilent en deux colonnes, sans le
   vide qu'une grille laissait sous une categorie courte (demande de Marie,
   22 septembre 2026). Le menu telephone, sous 1200 px, n'est pas touche. */
@media(min-width:1201px){
  .mega .inner{display:block;column-count:2;column-gap:40px}
  .mega .inner > div{break-inside:avoid;margin-bottom:24px}
  .mega .inner > div:last-child{margin-bottom:0}
}

/* Menu d'ordinateur sur toute la ligne, a toutes les largeurs: les rubriques
   occupent l'espace entre le logo et le telephone, a intervalles egaux.
   Avant, elles se tassaient a gauche et laissaient un vide de 480 px a 1920 px. */
@media(min-width:1201px){
  #nav{flex:1 1 auto;justify-content:space-between;margin:0 12px 0 36px}
}
@media(min-width:1201px) and (max-width:1400px){
  #nav{margin:0 4px 0 20px}
}

/* ======================================================================
   Rencontre avec Marie, 23 septembre 2026
   ====================================================================== */

/* Couleurs de la fiche de reference de Maeva (Xecc): creme #F8F7F2 en fond
   de page, et les sauges derivees du sauge de la marque #B1B7A2. */
:root{
  --cream:#F8F7F2;
  --sage-lt:#C8CDBE;
  --sage-pale:#E8E9E3;
  --sage-mid:#8E9282;
}

/* Sur un portable, « Clinique médico-esthétique, Gatineau » passait sous la
   barre de menu, plus haute depuis le logo empile. */
@media(min-width:901px){
  .hero .wrap{padding-top:178px}
  .phead{padding-top:172px}
}

/* Texte trop petit sur son ecran: les etiquettes et les liens du haut. */
.lab{font-size:12.5px}
.hero .lab{font-size:14px}
.util{font-size:14.5px}
.util a{font-weight:500}

/* Fiche de soin: la photo flotte dans son bloc et le texte coule dessous.
   En grille, la colonne de texte etait etroite et laissait un grand vide
   sous la photo (epilation laser). flow-root garde la photo dans son bloc. */
@media(min-width:701px){
  .soin-intro,.soin-intro.gauche{display:flow-root}
  .soin-intro .soinfig{width:44%;margin:4px 0 18px 32px;float:right!important}
  .soin-intro.gauche .soinfig{float:left!important;margin:4px 32px 18px 0}
}

/* Barre foncee et logo sauge (23 septembre 2026). Le menu ouvert sur telephone
   reste un panneau clair: ses liens reprennent l'encre, et il s'ouvre sous la
   barre au lieu de recouvrir le logo. */
@media(max-width:1200px){
  #nav.open{top:100%}
  .navbar.sombre #nav.open > li > a{color:var(--ink)}
}
@media(max-width:900px){
  .util{font-size:13.5px}
}

/* Equipe (24 septembre 2026): une rangee par personne, photo portrait a gauche.
   Sans photo, l'initiale sur fond sauge garde le format. */
.equipe-liste{display:grid;gap:44px;max-width:980px}
.membre{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:36px;align-items:start}
.membre-photo{margin:0;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--sage-pale)}
.membre-photo img{width:100%;height:100%;object-fit:cover}
.membre-photo.vide{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--sage-pale),var(--sage) 70%)}
.membre-photo.vide span{font:500 88px/1 Outfit,sans-serif;color:var(--cream)}
.membre-texte h2{font-size:clamp(26px,3vw,34px)}
.membre-role{font:500 13px Outfit,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--earth);margin:8px 0 18px}
.membre-texte p:not(.membre-role){margin-bottom:14px;max-width:62ch}
@media(max-width:700px){
  .membre{grid-template-columns:1fr;gap:20px}
  .membre-photo{max-width:200px}
}

/* ---------- pages legales, billet 20260924-105335-70dd2609 ---------- */
.legaldoc h2{font-size:24px;margin:40px 0 12px}
.legaldoc h2:first-child{margin-top:0}
.legaldoc p{margin-bottom:14px}
.legaldoc ul{padding-left:20px;margin-bottom:14px}
.legaldoc li{margin-bottom:8px}
.legaldoc a{text-decoration:underline}
.legaldoc .maj{margin-top:40px;font-size:14px;color:var(--dim)}
/* Un champ que le client doit fournir: visible tant qu'il n'est pas rempli. */
mark.trou{background:var(--gold-lt);color:var(--earth-dk);padding:0 4px;border-radius:4px}
footer .liens-legaux{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;font-size:13px}
footer .liens-legaux a{text-decoration:underline;text-underline-offset:3px}
.fcontact .fprive{margin-top:14px}
.fcontact .fprive a{text-decoration:underline}
.consent a{text-decoration:underline}

/* ---------- bandeau de consentement aux temoins ---------- */
.temoins{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;max-width:720px;margin:0 auto;
  display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;padding:20px 24px;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 12px 40px rgba(34,38,31,.18);font-size:15px}
.temoins[hidden]{display:none}
.temoins p{flex:1 1 320px;margin:0}
.temoins a{text-decoration:underline}
.temoins .tchoix{display:flex;gap:12px;flex:none}
.temoins .btn{min-width:110px}

/* ======================================================================
   Rencontre finale avec Marie, 27 septembre 2026
   ====================================================================== */

/* Filtres des familles : la carte masquee restait affichee, parce que
   .card{display:flex} l'emportait sur l'attribut hidden. */
[hidden]{display:none!important}

/* Plus de brun, demande de Marie : « sinon c'est trop vert ». Le brun de
   son affiche sur les titres, le sauge reste la couleur de la marque. */
:root{--brun:#3B2B20}
h1,h2,h3{color:var(--brun)}
.hero h1{color:#fff}
.fam.d :is(h1,h2,h3),.famcol.d :is(h1,h2,h3),.laser :is(h1,h2,h3),.couv :is(h1,h2,h3),footer :is(h1,h2,h3){color:inherit}
.filtres button.on{background:var(--brun);border-color:var(--brun)}

/* Equipe cote a cote plutot qu'une personne par rangee : moins de vide. */
.equipe-liste{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 36px;max-width:none;align-items:start}
.membre{grid-template-columns:1fr;gap:18px}
.membre-photo{max-width:none;aspect-ratio:4/5}
.membre-photo.vide span{font-size:72px}
.membre-texte h2{font-size:26px}
.membre-role{margin:6px 0 14px}
.membre-texte p:not(.membre-role){font-size:15.5px;margin-bottom:12px}
@media(max-width:1100px){ .equipe-liste{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:700px){ .equipe-liste{grid-template-columns:1fr} .membre-photo{max-width:260px} }

/* Equipe, 27 septembre 2026 (retour de Souleman) : deux par rangee, photo a
   gauche et texte a droite, et moins de vide sous l'en-tete de la page. */
.sec:has(.equipe-liste){padding-top:44px}
.equipe-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
.membre{grid-template-columns:170px minmax(0,1fr);gap:24px}
.membre-photo{max-width:none;aspect-ratio:4/5;border-radius:16px}
.membre-photo.vide span{font-size:56px}
.membre-texte h2{font-size:25px}
.membre-role{margin:4px 0 12px}
@media(max-width:1100px){ .equipe-liste{grid-template-columns:1fr;max-width:820px} }
@media(max-width:620px){ .membre{grid-template-columns:110px minmax(0,1fr);gap:16px} .membre-photo.vide span{font-size:40px} }

/* ======================================================================
   Charte de Maeva (Xecc), 29 septembre 2026. Marie, le matin meme :
   « arranger un peu les couleurs avant notre rencontre ».
   Le vert profond reste la couleur principale (Souleman) : barre, pied,
   carte medico, section laser, boutons. Les deux couleurs de la charte,
   sauge #B1B7A2 et creme #F8F7F2, remplacent tout ce qui n'etait ni l'un ni
   l'autre : le dore, l'argile et le gris pierre sortent de la palette. Le brun
   du 27 septembre reste une touche : titres, etiquettes, survols, le volet
   medico d'une fiche, le filtre actif, une vignette d'offre.
   ====================================================================== */
:root{
  --cream:#F8F7F2;         /* creme de la charte */
  --paper:#FDFCF9;         /* cartes, un souffle plus clair que la page */
  --sage:#B1B7A2;          /* sauge de la charte */
  --sage-lt:#C8CDBE;
  --sage-pale:#E9EAE3;
  --sage-mid:#8E9282;
  --sage-txt:#5F6858;      /* sauge assez foncee pour du texte : 5,2 sur creme */
  --brun:#3B2B20;          /* brun de l'affiche de Marie, les titres */
  --earth:#75593B;         /* etiquettes, survols */
  --earth-dk:#5E4830;
  --gold:#A98D66;          /* les etoiles des avis, rien d'autre */
  --gold-lt:#E6DCC8;       /* sable chaud, fond de l'etiquette medico */
  --sand:#EDE8DE;
  --sand-lt:#F3F0E9;
  --line:#E0DCD1;
  --clay:var(--sage);--clay-lt:var(--sage-lt);--stone:var(--sage-lt);  /* retires, renvoient au sauge */
}

/* Texte sauge, la ou un vert etait code en dur. */
.tag,.note{color:var(--sage-txt)}

/* Sur les surfaces vertes, l'accent est le sauge clair de la charte, plus le dore. */
.fam.d .lab,.fam.d .more,.fam.d li a:hover,
.famcol.d .lab,.famcol.d .cat h3,.famcol.d li a:hover,.famcol.d li a em,.famcol.d .more,
.laser .lab,.couv strong,footer a:hover,
.temoin.tous .etoiles,.temoin.tous .go,.tag.both{color:var(--sage-lt)}
.laser h2 span{color:var(--sage)}
.fam.d li a,.famcol.d li a{border-color:rgba(248,247,242,.14)}
.navbar.sombre #nav > li > a:hover,.navbar.sombre #nav > li:hover > a{border-color:var(--sage-lt)}
.navbar.sombre .ntel:hover{color:var(--sage-lt);border-color:var(--sage-lt)}
.navbar.sombre .btn:hover,.btn.lt:hover{background:var(--sage);border-color:var(--sage);color:var(--deep)}

/* Heros sans photo : un degrade de sauge, plus de vert-dore. */
.hero{background:linear-gradient(152deg,#CDD1C3 0%,#B1B7A2 52%,#8C9A83 100%)}
.b1{background:var(--sage-pale)}
.b2{background:var(--gold-lt)}
.b3{background:var(--sage-mid)}

/* Vignettes des offres du heros et fiches sans photo : sauge, sable, une de brun. */
.offer .th{background:linear-gradient(140deg,var(--sage-lt),var(--sage))}
.offer:nth-child(2) .th{background:linear-gradient(140deg,var(--gold-lt),var(--earth))}
.offer:nth-child(3) .th{background:linear-gradient(140deg,var(--sage-pale),var(--sage-mid))}
.soinfig.vide.t1{background:linear-gradient(150deg,var(--sand-lt),var(--gold-lt) 58%,var(--earth))}
.soinfig.vide.t2{background:linear-gradient(150deg,var(--sage-pale),var(--sage-lt) 58%,var(--sage))}

/* Le volet medico d'une fiche porte le point brun, le volet esthetique le point sauge. */
.soin .corps .volet.m h2::before{background:var(--earth)}

.alerte{background:var(--sand-lt);border-color:var(--gold-lt)}
.preprod{background:var(--brun)}
.preprod b{color:var(--sage-lt)}

/* Plus de brun, et qu'il se voie (Souleman, 29 septembre) : le brun du bandeau
   de preproduction, que Marie veut garder une fois le site en ligne. Il
   encadre la page : bandeau d'annonce en haut, bande de pied en bas. Le
   meme brun porte l'encadre de couverture des fiches et la carte des avis. */
:root{--brun-chaud:#6E5538}
.ann{background:var(--brun-chaud)}
.ann button{color:#fff}
footer{padding-bottom:0}
footer .bot{margin-top:56px;padding:0;border-top:0;background:var(--brun-chaud);color:rgba(255,255,255,.88);display:block}
footer .bot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.preprod{background:var(--brun-chaud);border-top:1px solid rgba(255,255,255,.18)}
.preprod b{color:#fff}
.couv{background:var(--brun-chaud);color:#fff}
.couv strong{color:var(--gold-lt)}
.couv p{color:rgba(255,255,255,.92)}
.temoin.tous{background:var(--brun-chaud);border-color:var(--brun-chaud)}
.temoin.tous:hover{background:var(--brun);border-color:var(--brun)}
.temoin.tous .etoiles,.temoin.tous .go{color:var(--gold-lt)}
.about{background:#EFE7DB}
.tag.g{background:var(--gold-lt);color:var(--earth-dk)}

/* Heures d'ouverture au pied de chaque page (Souleman, 29 septembre 2026).
   Cinquieme colonne, les memes heures que Contact et Rendez-vous, lues dans
   contenu/site.json. */
footer .cols{grid-template-columns:1.3fr repeat(3,.85fr) 1.3fr}
footer .fheures table{border-collapse:collapse;width:100%;font-size:14.5px}
footer .fheures td{padding:5px 0;vertical-align:top;border-top:1px solid rgba(248,247,242,.12)}
footer .fheures tr:first-child td{border-top:0;padding-top:0}
footer .fheures td:last-child{text-align:right;color:var(--cream);white-space:nowrap;padding-left:12px}
@media(max-width:900px){
  footer .cols{grid-template-columns:1fr 1fr}
  footer .fheures{grid-column:1 / -1;max-width:380px}
}
@media(max-width:560px){
  footer .cols{grid-template-columns:1fr}
}

/* Essai du 29 septembre 2026, en rencontre avec Marie : barre creme, logo et
   ecrits en vert profond, « trop de vert ». La barre foncee revient en
   remettant variante: foncee dans contenu/site.json. */
.navbar:not(.sombre){background:rgba(248,247,242,.96);border-bottom:1px solid var(--line)}
.navbar:not(.sombre) #nav > li > a,.navbar:not(.sombre) .ntel,.navbar:not(.sombre) #burger,.navbar:not(.sombre) .ntelmob{color:var(--deep)}
.navbar:not(.sombre) .ntel,.navbar:not(.sombre) #burger,.navbar:not(.sombre) .ntelmob{border-color:rgba(47,58,49,.35)}
.navbar:not(.sombre) #nav > li > a:hover,.navbar:not(.sombre) #nav > li:hover > a{border-color:var(--deep)}
.navbar:not(.sombre) .btn{background:var(--deep);color:var(--cream);border-color:var(--deep)}
.navbar:not(.sombre) .btn:hover{background:var(--earth);border-color:var(--earth)}

/* Barre brune (Marie, en rencontre, 29 septembre 2026) : le brun du bandeau
   qu'elle aime, le logo sauge de Maeva dessus, les ecrits en creme. Le
   bandeau d'annonce passe au brun fonce pour se detacher de la barre. */
.navbar.sombre{background:rgba(110,85,56,.96);border-color:rgba(248,247,242,.16)}
.navbar.sombre .btn{background:var(--cream);color:var(--brun);border-color:var(--cream)}
.navbar.sombre .btn:hover{background:var(--sage);border-color:var(--sage);color:var(--brun)}
.ann{background:var(--brun)}
/* ... et les ecrits de la barre en sauge, comme le logo (meme rencontre). */
.navbar.sombre #nav > li > a,.navbar.sombre .ntel,.navbar.sombre #burger,.navbar.sombre .ntelmob{color:var(--sage)}
.navbar.sombre .ntel,.navbar.sombre #burger,.navbar.sombre .ntelmob{border-color:rgba(177,183,162,.5)}
.navbar.sombre #nav > li > a:hover,.navbar.sombre #nav > li:hover > a{color:var(--cream);border-color:var(--sage)}
.navbar.sombre .ntel:hover{color:var(--cream);border-color:var(--cream)}
.navbar.sombre .btn{background:var(--sage);color:var(--brun);border-color:var(--sage)}
.navbar.sombre .btn:hover{background:var(--cream);border-color:var(--cream)}
/* Meme rencontre, un cran plus loin : sur la barre brune, les ecrits et le logo
   en creme (le logo blanc de Maeva), et le bandeau d'annonce en vert profond,
   comme la carte Medico-esthetique de l'accueil. */
.navbar.sombre #nav > li > a,.navbar.sombre .ntel,.navbar.sombre #burger,.navbar.sombre .ntelmob{color:var(--cream)}
.navbar.sombre .ntel,.navbar.sombre #burger,.navbar.sombre .ntelmob{border-color:rgba(248,247,242,.4)}
.navbar.sombre #nav > li > a:hover,.navbar.sombre #nav > li:hover > a{color:var(--cream);border-color:var(--cream)}
.navbar.sombre .ntel:hover{color:var(--cream);border-color:var(--cream)}
.navbar.sombre .btn{background:var(--cream);color:var(--brun);border-color:var(--cream)}
.navbar.sombre .btn:hover{background:var(--sage);border-color:var(--sage);color:var(--brun)}
.ann{background:var(--deep);color:var(--cream)}
.ann button{color:var(--cream)}
/* Marie : les ecrits de la barre en vert profond, la couleur de la carte, et le logo vert. */
.navbar.sombre #nav > li > a,.navbar.sombre .ntel,.navbar.sombre #burger,.navbar.sombre .ntelmob{color:var(--deep)}
.navbar.sombre .ntel,.navbar.sombre #burger,.navbar.sombre .ntelmob{border-color:rgba(47,58,49,.5)}
.navbar.sombre #nav > li > a:hover,.navbar.sombre #nav > li:hover > a{color:var(--cream);border-color:var(--deep)}
.navbar.sombre .ntel:hover{color:var(--cream);border-color:var(--cream)}
.navbar.sombre .btn{background:var(--deep);color:var(--cream);border-color:var(--deep)}
.navbar.sombre .btn:hover{background:var(--cream);border-color:var(--cream);color:var(--deep)}
/* Marie envoie sa teinte : vert moyen #778174 pour les ecrits et le logo de la barre brune. */
:root{--vert-moyen:#778174}
.navbar.sombre #nav > li > a,.navbar.sombre .ntel,.navbar.sombre #burger,.navbar.sombre .ntelmob{color:var(--vert-moyen)}
.navbar.sombre .ntel,.navbar.sombre #burger,.navbar.sombre .ntelmob{border-color:rgba(119,129,116,.6)}
.navbar.sombre #nav > li > a:hover,.navbar.sombre #nav > li:hover > a{color:var(--cream);border-color:var(--vert-moyen)}
.navbar.sombre .btn{background:var(--vert-moyen);color:var(--cream);border-color:var(--vert-moyen)}
.navbar.sombre .btn:hover{background:var(--cream);border-color:var(--cream);color:var(--brun)}
/* Decision de Marie, fin de rencontre du 29 septembre : barre CREME, ecrits et
   logo dans son vert #778174, bandeau d'annonce dans le brun qu'elle aime. */
.navbar:not(.sombre){background:rgba(248,247,242,.96);border-bottom:1px solid var(--line)}
.navbar:not(.sombre) #nav > li > a,.navbar:not(.sombre) .ntel,.navbar:not(.sombre) #burger,.navbar:not(.sombre) .ntelmob{color:var(--vert-moyen)}
.navbar:not(.sombre) .ntel,.navbar:not(.sombre) #burger,.navbar:not(.sombre) .ntelmob{border-color:rgba(119,129,116,.55)}
.navbar:not(.sombre) #nav > li > a:hover,.navbar:not(.sombre) #nav > li:hover > a{color:var(--deep);border-color:var(--vert-moyen)}
.navbar:not(.sombre) .ntel:hover{color:var(--deep);border-color:var(--deep)}
.navbar:not(.sombre) .btn{background:var(--vert-moyen);color:var(--cream);border-color:var(--vert-moyen)}
.navbar:not(.sombre) .btn:hover{background:var(--deep);border-color:var(--deep)}
.ann{background:var(--brun-chaud);color:#fff}
.ann button{color:#fff}
/* Marie, fin de rencontre du 29 septembre : la barre dans le beige de la
   section « Six soins qui valent le detour », un cran plus fonce que la creme,
   pour que le vert ressorte davantage. */
.navbar:not(.sombre){background:rgba(243,240,233,.97)}