/* Clinique F — les menus « Préoccupations » et « Soins » de l'accueil
   (menu-soins.js). Toutes les classes commencent par `cf-mega` : rien
   ici ne touche au reste de la page. */

.cf-mega-trigger{display:inline-flex;align-items:center;gap:.4rem}
.cf-mega-chev{width:.36rem;height:.36rem;margin-top:-.18rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.55;transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s}
.cf-mega-trigger[aria-expanded="true"]{color:#1a1814}
.cf-mega-trigger[aria-expanded="true"] .cf-mega-chev{transform:translateY(.16rem) rotate(225deg);opacity:1}

/* Le panneau flotte sous la barre, comme sur newagespa.ca (captures de
   Flavia, 19 octobre 2026) : une carte aux coins arrondis, détachée des
   bords, tout en petites capitales espacées, titres de colonnes dorés.
   Fond opaque : `#nav` porte déjà un `backdrop-filter`, qui fait
   de lui la racine du flou — un second flou dans le panneau ne verrait
   que la barre, et le titre de la page transparaissait net. */
.cf-mega{--or:#7d6a4d;--filet:rgba(125,106,77,.2);position:absolute;top:calc(100% + 10px);left:50%;z-index:600;width:min(1240px,calc(100vw - 32px));max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;background:#faf9f7;border:1px solid rgba(255,255,255,.75);border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 34px 70px -26px rgba(34,29,23,.32),0 2px 10px rgba(34,29,23,.05);opacity:0;transform:translate(-50%,-6px);transition:opacity .24s cubic-bezier(.23,1,.32,1),transform .24s cubic-bezier(.23,1,.32,1)}
.cf-mega.is-open{opacity:1;transform:translate(-50%,0)}
.cf-mega[hidden]{display:none}

.cf-mega__in{padding:2.3rem 2.6rem 1.7rem;display:grid;gap:2.6rem}
.cf-mega__in--soins{grid-template-columns:repeat(4,minmax(0,1fr))}
.cf-mega__in--preo{grid-template-columns:minmax(0,1fr) 290px;gap:2.4rem}
.cf-mega ul{list-style:none;margin:0;padding:0}

.cf-mega__g{margin:0 0 .85rem;padding-bottom:.85rem;border-bottom:1px solid var(--filet);font-family:'DM Sans',sans-serif;font-size:.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.cf-mega__famille+.cf-mega__famille{margin-top:1.9rem}
.cf-mega__note{margin:-.35rem 0 .5rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.95rem;color:#4e4943}

/* Les liens : petites capitales, un trait qui se dessine au survol. */
.cf-mega__soin,.cf-mega__p,.cf-mega__voir{appearance:none;display:block;width:100%;margin:0;padding:.46rem 0;border:0;background:none;text-align:left;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:400;line-height:1.45;letter-spacing:.13em;text-transform:uppercase;color:#3d3833;text-decoration:none;transition:color .18s,padding-left .22s cubic-bezier(.23,1,.32,1)}
.cf-mega__voir{font-weight:500;color:#1a1814}
.cf-mega__soin:hover,.cf-mega__soin:focus-visible,.cf-mega__voir:hover,.cf-mega__voir:focus-visible,.cf-mega__p:hover,.cf-mega__p:focus-visible{color:#1a1814;padding-left:.35rem}
.cf-mega__p{position:relative}
.cf-mega__p::before{content:'';position:absolute;left:0;top:50%;width:0;height:1px;background:var(--or);transition:width .22s cubic-bezier(.23,1,.32,1)}
.cf-mega__p[aria-current="true"]{color:#1a1814;font-weight:500;padding-left:1.15rem}
.cf-mega__p[aria-current="true"]::before{width:.75rem}

/* Préoccupations : quatre colonnes, puis la carte du souci pointé. */
.cf-mega__choix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.cf-mega__carte{align-self:start;overflow:hidden;border-radius:14px;background:#f7f4ef;box-shadow:0 18px 36px -24px rgba(34,29,23,.35)}
.cf-mega__photo{position:relative;height:150px;background-size:cover;background-position:50% 45%}
.cf-mega__photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,24,20,0) 35%,rgba(26,24,20,.5))}
.cf-mega__photo span{position:absolute;left:1.1rem;bottom:.85rem;z-index:1;font-family:'DM Sans',sans-serif;font-size:.58rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.cf-mega__carte-in{padding:1.15rem 1.25rem 1.25rem}
.cf-mega__carte .cf-mega__g{border:0;padding:0;margin-bottom:.35rem}
.cf-mega__titre{margin:0 0 .7rem;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;line-height:1.08;letter-spacing:-.01em;color:#1a1814;text-wrap:balance}
.cf-mega__liste-soins li+li{border-top:1px solid rgba(26,24,20,.09)}
.cf-mega__liste-soins .cf-mega__soin{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.55rem 0;font-size:.8rem;letter-spacing:.01em;text-transform:none;color:#1a1814}
.cf-mega__liste-soins .cf-mega__soin:hover,.cf-mega__liste-soins .cf-mega__soin:focus-visible{color:#567365;padding-left:0}
.cf-mega__det{flex:none;font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.03em;color:#567365;font-variant-numeric:tabular-nums}
.cf-mega__debut{margin:.85rem 0 0;font-family:'DM Sans',sans-serif;font-size:.74rem;line-height:1.5;color:#4e4943}
.cf-mega__debut a{color:#1a1814;text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:.2em}
.cf-mega__debut span{white-space:nowrap;font-family:'DM Mono',monospace;font-size:.6rem;color:#567365}

/* Le pied : le catalogue à gauche, la consultation à droite. */
.cf-mega__pied{padding:1.05rem 2.6rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--filet)}
.cf-mega__tous{font-family:'DM Sans',sans-serif;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#3d3833;text-decoration:none}
.cf-mega__tous span{display:inline-block;transition:transform .18s cubic-bezier(.23,1,.32,1)}
.cf-mega__tous:hover,.cf-mega__tous:focus-visible{color:#1a1814}
.cf-mega__tous:hover span,.cf-mega__tous:focus-visible span{transform:translateX(4px)}
.cf-mega__cta{appearance:none;display:inline-flex;align-items:center;gap:.8rem;padding:.3rem 0;border:0;background:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#1a1814}
.cf-mega__cta small{font-size:.6rem;font-weight:400;letter-spacing:.06em;text-transform:none;color:#4e4943}
.cf-mega__trait{width:28px;height:1px;background:#1a1814;transition:width .22s cubic-bezier(.23,1,.32,1)}
.cf-mega__cta:hover .cf-mega__trait,.cf-mega__cta:focus-visible .cf-mega__trait{width:40px}

.cf-mega a:focus-visible,.cf-mega button:focus-visible,.cf-mega-trigger:focus-visible,.cf-mega-mob summary:focus-visible,.cf-mega-mob a:focus-visible,.cf-mega-mob button:focus-visible{outline:2px solid #567365;outline-offset:3px}

@media (max-width:1240px){
  .cf-mega__in{padding-left:2rem;padding-right:2rem;gap:2rem}
  .cf-mega__pied{padding-left:2rem;padding-right:2rem}
  .cf-mega__choix{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem}
}
@media (max-width:850px){.cf-mega{display:none!important}}

/* Un onglet de plus dans une barre qui débordait déjà sous 900 px.
   Sous 1280 px, « Accueil » cède sa place : le logo mène à l'accueil.
   Sous 1024 px, la barre passe au menu du téléphone, qui contient tout. */
@media (max-width:1279px){#nav[data-cf-mega] .cf-nav-suite [data-route="home"]{display:none}}
@media (max-width:1023px){
  #nav[data-cf-mega] .cf-nav-suite{display:none}
  #nav[data-cf-mega] .burger{display:block}
  .cf-mega{display:none!important}
}

/* Le tiroir du téléphone. Les rubriques reprennent la typographie des
   liens du tiroir (`.mob-link`), le contenu celle du menu de bureau. */
.cf-mega-mob summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.cf-mega-mob summary::-webkit-details-marker{display:none}
.cf-mega-mob__rubrique>summary{font-family:'DM Sans',sans-serif;font-size:1rem;letter-spacing:.035em;color:#1a1814;padding:.82rem 0;border-bottom:1px solid rgba(26,24,20,.15)}
.cf-mega-mob summary::after{content:'+';font-family:'DM Mono',monospace;font-size:1rem;color:#567365;transition:transform .2s}
.cf-mega-mob details[open]>summary::after{transform:rotate(45deg)}
.cf-mega-mob__corps{padding:.4rem 0 1.2rem}
.cf-mega-mob__g{margin:1.2rem 0 .3rem;font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#7d6a4d}
.cf-mega-mob__p>summary{padding:.55rem 0;font-family:'DM Sans',sans-serif;font-size:.95rem;color:#4e4943;border-bottom:1px solid #eee9e2}
.cf-mega-mob__p[open]>summary{color:#1a1814}
.cf-mega-mob ul{list-style:none;margin:0;padding:0}
.cf-mega-mob .cf-mega-mob__p ul{padding:.2rem 0 .4rem .9rem;border-left:1px solid #c9d6ce;margin:.5rem 0 .7rem}
.cf-mega-mob .cf-mega__soin{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.5rem 0;font-family:'DM Sans',sans-serif;font-size:.95rem;letter-spacing:0;text-transform:none;color:#1a1814;text-decoration:none}
.cf-mega-mob .cf-mega__soin:hover{padding-left:0}
.cf-mega-mob .cf-mega__det{font-family:'DM Mono',monospace;font-size:.62rem;color:#567365;white-space:nowrap}
.cf-mega-mob__voir{appearance:none;display:block;width:100%;padding:.5rem 0;border:0;background:none;text-align:left;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:500;color:#1a1814;text-decoration:none}
.cf-mega-mob__tous{display:inline-block;margin-top:1.2rem;font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#1a1814}

@media (prefers-reduced-motion:reduce){
  .cf-mega,.cf-mega-chev,.cf-mega__soin,.cf-mega__p,.cf-mega__p::before,.cf-mega__voir,.cf-mega__tous span,.cf-mega__trait{transition:none}
}

/* ════════════════════════════════════════════════════════════════════
   La barre des autres pages (`outils/barre.py`).
   Les fiches, les pages d'atterrissage et le blogue n'avaient qu'un fil
   d'Ariane : une cliente arrivée de Google ne pouvait aller nulle part.
   Même barre que l'accueil — mêmes liens en DM Mono, mêmes menus.
   Pas de `backdrop-filter` : il empêcherait le panneau d'être net.
   ════════════════════════════════════════════════════════════════════ */
.cf-barre{position:sticky;top:0;z-index:500;background:#faf9f7;border-bottom:1px solid #e8e2d9}
.cf-barre__in{max-width:1440px;margin:0 auto;height:64px;padding:0 clamp(16px,3vw,42px);display:flex;align-items:center;gap:1.5rem}
.cf-barre__logo{flex:none;display:block;line-height:0}
.cf-barre__logo img{height:24px;width:auto;display:block}
.cf-barre__liens{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;gap:clamp(1rem,1.9vw,1.9rem)}
.cf-barre__lien{appearance:none;position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 0;border:0;background:none;cursor:pointer;font-family:'DM Mono',monospace;font-size:.64rem;font-weight:400;letter-spacing:.075em;text-transform:uppercase;color:#4e4943;text-decoration:none;white-space:nowrap}
.cf-barre__lien::after{content:'';position:absolute;left:0;right:0;bottom:.18rem;height:1px;background:#7f9b8b;transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.23,1,.32,1)}
.cf-barre__lien:hover,.cf-barre__lien:focus-visible,.cf-barre__lien[aria-expanded="true"]{color:#1a1814}
.cf-barre__lien:hover::after,.cf-barre__lien:focus-visible::after,.cf-barre__lien[aria-expanded="true"]::after{transform:scaleX(1)}
.cf-barre__actions{flex:none;display:flex;align-items:center;gap:.75rem}
.cf-barre__resa{padding:.55rem 1.1rem;background:#567365;border:1px solid #567365;color:#fff;font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.cf-barre__resa:hover,.cf-barre__resa:focus-visible{background:#46604f}
.cf-barre__langue{padding:.35rem .75rem;border:1px solid #a9c2b8;color:#4e4943;font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.cf-barre__langue:hover,.cf-barre__langue:focus-visible{color:#1a1814;border-color:#567365}
.cf-barre__burger{display:none;appearance:none;padding:.4rem;border:0;background:none;color:#1a1814;cursor:pointer;line-height:0}
.cf-barre a:focus-visible,.cf-barre button:focus-visible{outline:2px solid #567365;outline-offset:3px}

.cf-barre__tiroir{position:fixed;top:64px;left:0;right:0;bottom:0;z-index:499;overflow-y:auto;overscroll-behavior:contain;padding:1rem clamp(16px,6vw,2rem) 3rem;background:#faf9f7;border-top:1px solid #e8e2d9}
.cf-barre__tiroir[hidden]{display:none}
.cf-barre__tiroir-liens{margin-top:.5rem}
.cf-barre__tiroir-liens a{display:block;padding:.82rem 0;border-bottom:1px solid rgba(26,24,20,.15);font-family:'DM Sans',sans-serif;font-size:1rem;letter-spacing:.035em;color:#1a1814;text-decoration:none}
.cf-barre__tiroir-liens a.cf-barre__tiroir-resa{margin-top:1.4rem;border:0;padding:.9rem 1rem;background:#567365;color:#fff;text-align:center;font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
html.cf-barre-ouverte{overflow:hidden}

@media (max-width:1279px){.cf-barre__lien--secondaire{display:none}}
@media (max-width:1023px){
  .cf-barre__liens,.cf-barre__resa{display:none}
  .cf-barre__actions{margin-left:auto}
  .cf-barre__burger{display:block}
}
@media (min-width:1024px){.cf-barre__tiroir{display:none!important}}

/* Deux contrastes de la barre de l'accueil, sous le seuil de 4,5:1 : le
   bouton Réserver (blanc sur sauge #7f9b8b, 2,9:1) et le bouton de langue
   du tiroir (sauge pâle sur ivoire). Même vert que la barre des autres
   pages. */
#nav a.nav-desk[data-key="nav_book"],#mob a[data-key="nav_book"]{background:#567365!important;border-color:#567365!important;color:#fff!important}
#mob button[onclick*="toggleLang"]{color:#4e4943!important}

/* Le lien Glow Club de la barre de l'accueil : seulement quand la place le
   permet ; au-dessous, il reste dans le tiroir du téléphone. */
@media (max-width:1439px){#nav .cf-nav-club{display:none}}
a.cf-mob-club{text-decoration:none}

/* Le slogan (outils/slogan.py) — en tête de chaque pied de page, et sous le
   grand titre de l'accueil. Il prend la couleur du pied, clair ou foncé. */
.cf-slogan{margin:0 auto 1.8rem;padding:0 16px;text-align:center;font-family:'Cormorant Garamond',serif;font-weight:500;font-style:normal;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2;letter-spacing:.06em;text-transform:none;color:inherit}
#p-home .cf-slogan-hero{margin:1.4rem 0 1.1rem!important;font-family:'Cormorant Garamond',serif!important;font-weight:500!important;font-size:clamp(1.35rem,2vw,1.75rem)!important;line-height:1.2!important;letter-spacing:.07em!important;color:#567365!important}
@media (min-width:560px){#p-home .cf-slogan-hero{max-width:none!important;white-space:nowrap}}