/* Glowaiva — pages intérieures, couche premium (19 sept. 2026) : sauge #4E7D5B + terracotta, fond blanc. */
/* Thème clair imposé (Mel : fond blanc). html:root:not(...) l'emporte sur la règle sombre d'origine, même si l'appareil est en mode sombre. */
html:root:not([data-theme="zz"]){color-scheme:light;
  --ground:#FFFFFF; --paper:#FFFFFF; --ink:#1E1A14; --soft:#4A4038; --faint:#6B6158;
  --bronze:#9A4A1C; --rose:#B5622A; --sage:#4E7D5B; --clay:#9A4A1C;
  --t-bronze:#F6EDE0; --t-rose:#FBEDE3; --t-sage:#EEF4EC; --t-clay:#FBEDE3;
  --line:rgba(30,26,20,.10); --shadow:0 1px 3px rgba(30,26,20,.05);
  /* quiz (trouve-ton-type-de-peau, skin-type) */
  --bg:#FFFFFF; --ink-soft:#4A4038; --ink-faint:#6B6158; --amber:#9A4A1C; --amber-deep:#B5622A; --gold:#9A4A1C; --sage-deep:#3F6B4E;
  /* page liens (bio) */
  --bg-elevated:#EEF4EC; --text:#1E1A14; --text-dim:rgba(30,26,20,.72); --border:rgba(78,125,91,.25); --accent:#9A4A1C; --accent2:#4E7D5B;
}
html:root:not([data-theme="zz"]) body{background:#FFFFFF}
html{background:#FFFFFF!important}
.wrap>nav{display:flex!important;flex-wrap:wrap;align-items:center;gap:.45rem!important;border-bottom:none!important;padding-bottom:.4rem;margin-bottom:1.6rem}
.wrap>nav a{text-decoration:none!important}
.wrap>nav a:not(.home){font-size:.84rem!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:600!important;
  color:#3F6B4E!important;background:#EEF4EC;border:1.5px solid rgba(78,125,91,.35)!important;padding:.42rem .9rem!important;border-radius:999px!important}
.wrap>nav a:not(.home):hover{background:#4E7D5B;color:#fff!important;border-color:#4E7D5B!important}
.wrap>nav a[href$="#prix"]{background:linear-gradient(135deg,#9A4A1C,#B5622A)!important;color:#fff!important;border:none!important}
.wrap>nav a[hreflang]{background:#fff!important;color:#9A4A1C!important;border-color:#B5622A!important}
.wrap>nav a.home{color:#9A4A1C!important;font-weight:600}
.bd{border-bottom:3px solid #4E7D5B!important}
.bd-fil{color:#9A4A1C!important}.bd-t em{color:#9A4A1C!important}
.bd-rule{background:linear-gradient(90deg,#4E7D5B,#B5622A,rgba(181,98,42,0))!important}
.bd-in{border-color:rgba(78,125,91,.35)!important}
.cta{background:linear-gradient(135deg,#9A4A1C,#B5622A)!important;box-shadow:0 10px 26px rgba(181,98,42,.3)}
.cta:hover{background:#4E7D5B!important}
.tile .num{color:#B5622A!important}

/* Bas de page commun : sites + réseaux (19 sept. 2026) */
.gw-foot{margin:2.2rem auto 0;max-width:980px;padding:1.4rem 1.2rem;border-radius:18px;background:#4E7D5B;color:#fff;text-align:center;font-family:'DM Sans','Karla',Arial,sans-serif}
.gw-foot h4{margin:0 0 .7rem;font:600 .78rem/1.2 'DM Sans','Karla',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF}
.gw-foot .row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1rem}
.gw-foot .row:last-child{margin-bottom:0}
.gw-foot a{display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:#3F6B4E!important;text-decoration:none!important;font-weight:600;font-size:.88rem;padding:.5rem 1rem;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:background .2s,color .2s}
.gw-foot a:hover{background:#B5622A;color:#fff!important}
.gw-foot a svg{width:16px;height:16px;fill:currentColor}
.gw-foot .also{font-size:.82rem;color:rgba(255,255,255,.92);margin:.2rem 0 .6rem}
.gw-foot .also a{background:rgba(255,255,255,.14);color:#fff!important;box-shadow:none;padding:.35rem .85rem;font-size:.82rem}

/* ── 20 sept. 2026, 23 h — trois corrections d'après une capture de Mel sur iPhone ──────
   1. Le bouton « 47 CAD » chevauchait les liens du menu (ma régression de la v2 mobile).
   2. Le panneau d'accueil était vert sur la photo de peau → champagne et pêche.
   3. Le pied de page, « merdique sur le phone, trop d'icônes de réseaux ». */

/* 1 ─ MENU MOBILE : un seul élément épinglé, et de la place pour défiler dessous */
@media (max-width: 768px) {
  .nav-r { padding-right: 104px !important; }        /* les liens ne finissent plus sous le bouton */
  .nav-r a.nav-lang { position: static !important; right: auto !important; }  /* EN défile avec les autres */
  .nav-r a.nav-cta {
    position: sticky !important; right: 0 !important; z-index: 3 !important;
    box-shadow: -10px 0 14px 6px rgba(255,255,255,.92) !important;  /* masque net avant le bouton */
  }
}

/* 2 ─ PANNEAU D'ACCUEIL : champagne et pêche au lieu du vert, texte foncé */
.hc-in {
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(181,98,42,.16), transparent 60%),
    linear-gradient(155deg, rgba(247,238,225,.955), rgba(242,205,175,.94)) !important;
  border: 1px solid rgba(181,98,42,.28) !important;
}
.hc-in .hc-h1 { color: #2E1F0F !important; }
.hc-in .hc-accent { color: #9A4A1C !important; }     /* 5,9:1 sur pêche — lisible */
.hc-in .hc-sub { color: rgba(26,20,16,.82) !important; }
.hc-in .hc-eyebrow {
  color: #9A4A1C !important; background: rgba(255,255,255,.55) !important;
  border-color: rgba(154,74,28,.35) !important;
}
.hc-in .hc-dot { background: #B5622A !important; }
.hc-in .hc-b2, .hc-in .hc-b3 {
  border-color: rgba(154,74,28,.5) !important; background: rgba(255,255,255,.5) !important;
  color: #2E1F0F !important;
}
/* le voile sur la photo ne tire plus vers le vert */
.hc-voile {
  background: linear-gradient(180deg, rgba(60,40,28,.22) 0%, rgba(60,40,28,.06) 45%, rgba(60,40,28,.42) 100%) !important;
}

/* 3 ─ PIED DE PAGE : plus compact, et sur téléphone les réseaux passent en icônes seules */
.gw-foot { margin: 1.5rem auto 0 !important; padding: .95rem 1rem !important; border-radius: 14px !important; }
.gw-foot h4 { margin: 0 0 .42rem !important; font-size: .66rem !important; letter-spacing: .12em !important; }
.gw-foot .row { gap: .32rem !important; margin-bottom: .55rem !important; }
.gw-foot .row:last-child { margin-bottom: 0 !important; }
.gw-foot a { font-size: .76rem !important; padding: .33rem .7rem !important; gap: .34rem !important; box-shadow: 0 2px 8px rgba(0,0,0,.1) !important; }
.gw-foot a svg { width: 13px !important; height: 13px !important; }
.gw-foot .also { font-size: .72rem !important; margin: .1rem 0 .4rem !important; }
.gw-foot .also a { font-size: .72rem !important; padding: .26rem .62rem !important; }
@media (max-width: 768px) {
  .gw-foot { padding: .75rem .65rem !important; margin-top: 1.1rem !important; }
  .gw-foot h4 { font-size: .6rem !important; margin-bottom: .35rem !important; }
  /* les 4 réseaux deviennent des pastilles rondes : l'icône seule, le nom reste pour les
     lecteurs d'écran (retiré visuellement, pas supprimé du document) */
  .gw-foot .row:first-of-type a { padding: .42rem !important; gap: 0 !important; width: 30px; height: 30px; justify-content: center; }
  .gw-foot .row:first-of-type a svg { width: 15px !important; height: 15px !important; }
  .gw-foot .row:first-of-type a { font-size: 0 !important; }
  .gw-foot .row { margin-bottom: .45rem !important; }
  .gw-foot a { font-size: .7rem !important; padding: .28rem .58rem !important; }
  .gw-foot .also, .gw-foot .also a { font-size: .66rem !important; }
}

/* ── 20 sept. 2026, 23 h 35 — d'après deux captures de Mel ────────────────────
   « le vert reste là » · « le bas est encore trop chargé et grossier »
   · et le bouton « 47 CAD » s'est retrouvé AU MILIEU du menu : ma faute, le
     padding réservé décalait l'élément épinglé. On enlève l'épinglage. */

/* 1 ─ LE VERT DERRIÈRE LE PANNEAU D'ACCUEIL
   Il ne venait pas de la photo mais d'un fond posé sur la section :
   .hero-cine{background:#3F6B4E}. Remplacé par un brun chaud, qui s'accorde
   à la peau au lieu de la verdir. */
.hero-cine { background: #3A2C24 !important; }
.hc-halo { background: radial-gradient(ellipse at 72% 38%, rgba(242,196,160,.22), rgba(0,0,0,0) 60%) !important; }

/* 2 ─ MENU MOBILE : plus rien d'épinglé. Tout défile ensemble, donc plus aucun
   chevauchement possible. Le bouton se trouve au bout de la barre. */
@media (max-width: 768px) {
  .nav-r { padding-right: 0 !important; }
  .nav-r a.nav-cta { position: static !important; right: auto !important; box-shadow: none !important; }
  .nav-r a.nav-lang { position: static !important; right: auto !important; }
}

/* 3 ─ LE BAS DE PAGE : du texte, plus des pastilles.
   Il y avait 17 pastilles blanches empilées (7 + 10). C'est ce qui faisait
   « chargé et grossier ». Les liens redeviennent du texte ; rien n'est retiré. */
.ft-links a, .gw-foot a {
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  color: #FFE9D2 !important; font-weight: 500 !important;
}
.ft-links { gap: .35rem 1.1rem !important; margin-bottom: 1rem !important; }
.ft-links a { padding: .1rem 0 !important; font-size: .6rem !important; }
.ft-links a:hover, .gw-foot a:hover {
  background: none !important; color: #FFFFFF !important;
  text-decoration: underline !important; text-underline-offset: 3px;
}
.gw-foot { background: rgba(78,125,91,.55) !important; padding: .9rem 1rem !important; }
.gw-foot h4 { opacity: .7 !important; font-size: .6rem !important; margin-bottom: .3rem !important; }
.gw-foot .row { gap: .3rem .95rem !important; margin-bottom: .5rem !important; }
.gw-foot a { padding: .1rem 0 !important; font-size: .74rem !important; }
.gw-foot a svg { width: 13px !important; height: 13px !important; opacity: .9; }
.gw-foot .also { font-size: .68rem !important; }
.gw-foot .also a { background: none !important; padding: .1rem 0 !important; font-size: .7rem !important; }

@media (max-width: 768px) {
  footer { padding: 2.2rem 1.1rem 1.6rem !important; }
  .ft-links a { font-size: .58rem !important; }
  .gw-foot { padding: .8rem .7rem !important; margin-top: 1.1rem !important; }
  /* les 4 réseaux : l'icône seule, en ligne. Le nom reste lisible par un lecteur d'écran. */
  .gw-foot .row:first-of-type { gap: 1.15rem !important; }
  .gw-foot .row:first-of-type a { font-size: 0 !important; padding: 0 !important; gap: 0 !important; }
  .gw-foot .row:first-of-type a svg { width: 19px !important; height: 19px !important; }
  .gw-foot a { font-size: .7rem !important; }
}

/* ── Menu dépliant sur téléphone — 20 sept. 2026 ─────────────────────────────
   Mel : « possible de déplier les onglets sur le cellulaire ? »
   TOUT ce bloc est conditionné à `html.nav-js`, que seul le script pose.
   Sans le script, rien de ceci ne s'applique et la barre défilante reste :
   impossible de se retrouver sans menu, ce qui était le défaut d'origine. */
.nav-burger { display: none; }

@media (max-width: 768px) {
  html.nav-js .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 32px; padding: 0 8px; margin-left: auto;
    background: rgba(232,240,230,.9); border: 1px solid rgba(63,107,71,.2);
    border-radius: 10px; cursor: pointer;
  }
  html.nav-js .nav-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px; background: #3F6B4E;
    transition: transform .18s ease, opacity .18s ease;
  }
  html.nav-js nav.nav-ouvert .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  html.nav-js nav.nav-ouvert .nav-burger span:nth-child(2) { opacity: 0; }
  html.nav-js nav.nav-ouvert .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* les onglets deviennent un panneau, replié par défaut */
  html.nav-js .nav-r {
    display: none !important;
    position: absolute; top: calc(100% + 6px); left: 8px; right: 8px;
    flex-direction: column !important; align-items: stretch !important;
    overflow: visible !important; padding: .45rem !important; gap: .25rem !important;
    background: #FFFFFF; border: 1px solid rgba(63,107,71,.18); border-radius: 14px;
    box-shadow: 0 14px 34px rgba(58,44,36,.18);
  }
  html.nav-js nav.nav-ouvert .nav-r { display: flex !important; }
  html.nav-js .nav-r a {
    width: 100%; justify-content: center; text-align: center;
    font-size: .8rem !important; letter-spacing: .08em !important;
    padding: .6rem .7rem !important; border-radius: 9px !important;
  }
  html.nav-js .nav-r a:not(.nav-cta):not(.nav-lang) {
    background: transparent !important; border: none !important;
    border-bottom: 1px solid rgba(63,107,71,.1) !important;
  }
  html.nav-js .nav-r a.nav-lang { background: rgba(232,240,230,.9) !important; color: #3F6B4E !important; }
  html.nav-js .nav-r a.nav-cta { margin-top: .3rem; font-size: .84rem !important; }
  html.nav-js nav { position: fixed; }
}

/* ── 20 sept., 23 h 55 — d'après trois captures de Mel ───────────────────────
   « quand ça ouvre c'est flou » · « en bas c'est monocolor et difficile à cerner » */

/* A ─ LE PANNEAU DU MENU ÉTAIT TRANSPARENT.
   Cause : une règle `.nav-r{background:none!important}` existait déjà dans cette
   feuille. Ma règle, sans !important, ne pouvait pas gagner — le panneau héritait
   donc du fond vide et du flou de la barre. On force ici un fond opaque. */
@media (max-width: 768px) {
  html.nav-js nav.nav-ouvert .nav-r {
    background: #FFFFFF !important;
    border: 1px solid rgba(63,107,71,.22) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: 0 18px 40px rgba(58,44,36,.28) !important;
    padding: .5rem !important;
  }
  html.nav-js nav.nav-ouvert .nav-r a { background: #FFFFFF !important; }
  html.nav-js nav.nav-ouvert .nav-r a:not(.nav-cta):not(.nav-lang) {
    border-bottom: 1px solid rgba(63,107,71,.12) !important;
  }
  html.nav-js nav.nav-ouvert .nav-r a:last-child { border-bottom: none !important; }
  html.nav-js nav.nav-ouvert .nav-r a.nav-lang {
    background: #EDF3EC !important; color: #3F6B4E !important;
  }
  html.nav-js nav.nav-ouvert .nav-r a.nav-cta {
    background: linear-gradient(135deg, #9A4A1C, #B5622A) !important; color: #fff !important;
  }
}

/* B ─ LE BAS DE PAGE ÉTAIT DEVENU MONOCHROME.
   En retirant les 17 pastilles blanches, j'ai tout ramené au même crème sur vert :
   plus rien ne séparait les groupes. On redonne des repères sans revenir aux pavés :
   titres en pêche, liens en blanc, un filet entre les groupes, et le bloc écosystème
   posé sur un fond plus sombre pour qu'on voie où il commence. */
.gw-foot {
  background: rgba(46,72,52,.55) !important;
  border: 1px solid rgba(242,196,160,.22) !important;
  padding: 1rem !important;
}
.gw-foot h4 {
  color: #F2C4A0 !important; opacity: 1 !important;
  font-size: .62rem !important; letter-spacing: .18em !important;
  margin: 0 0 .45rem !important;
}
.gw-foot .row {
  padding-bottom: .55rem !important; margin-bottom: .55rem !important;
  border-bottom: 1px solid rgba(242,196,160,.16) !important;
}
.gw-foot .row:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.gw-foot a { color: #FFFFFF !important; font-weight: 500 !important; }
.gw-foot a:hover { color: #F2C4A0 !important; }
.gw-foot .also { color: rgba(255,233,210,.8) !important; }
.gw-foot a svg { opacity: 1 !important; }
/* le premier bloc de liens se distingue du reste par sa casse et sa teinte */
.ft-links a { color: rgba(255,233,210,.85) !important; }
.ft-links a:hover { color: #FFFFFF !important; }
@media (max-width: 768px) {
  /* les 4 réseaux : icônes dans un cercle clair, on les repère d'un coup d'œil */
  .gw-foot .row:first-of-type a {
    background: rgba(255,255,255,.14) !important; border-radius: 50% !important;
    width: 34px; height: 34px; justify-content: center; align-items: center;
  }
  .gw-foot .row:first-of-type a svg { width: 17px !important; height: 17px !important; fill: #FFFFFF; }
  .gw-foot .row:first-of-type { gap: .7rem !important; }
}