/* ============================================================
   shell.css : en-tête, barre d'annonce et pied de page communs
   à toutes les pages du site SENSIUM (version 2026-11-04).

   Feuille autonome : elle ne dépend pas de sensium.css (feuille Tailwind
   purgée) et n'utilise que des classes préfixées « sh- ». Pour changer
   l'apparence de l'en-tête ou du pied de page sur TOUT le site, c'est ici
   (et dans shell.js pour le comportement) : plus rien à toucher page par page.

   Palette : navy #1A2533 · or #C5A87C · or clair #DBC39A · or profond #86683A
             · crème #F7F5F0 · pied de page #111827
   ============================================================ */

:root { --sh-h: 64px; }
@media (min-width: 768px) { :root { --sh-h: 72px; } }

.sh-annonce, .sh-bar, .sh-foot { font-family: Lato, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.sh-annonce *, .sh-bar *, .sh-foot * { box-sizing: border-box; }
.sh-bar ul, .sh-foot ul { list-style: none; margin: 0; padding: 0; }
.sh-bar a, .sh-foot a, .sh-annonce a { text-decoration: none; }
.sh-bar img, .sh-foot img { display: block; max-width: 100%; height: auto; }
.sh-sans-annonce .sh-annonce { display: none; }

/* ---------- Barre d'annonce (campagne « première séance offerte ») ---------- */
.sh-annonce {
    position: relative; z-index: 60;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    min-height: 40px; padding: 7px 44px 7px 16px;
    background: #DBC39A; color: #1A2533; text-align: center;
    font-size: 13px; line-height: 1.3;
}
.sh-annonce p { margin: 0; text-wrap: balance; }
.sh-annonce strong { font-weight: 700; }
.sh-annonce-long { display: none; }
.sh-annonce-l {
    flex: none; color: #1A2533; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1.5px solid #1A2533; padding-bottom: 1px; white-space: nowrap;
}
.sh-annonce-l:hover { color: #86683A; border-bottom-color: #86683A; }
.sh-annonce-x {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: #1A2533; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%;
}
.sh-annonce-x:hover { background: rgba(26, 37, 51, .1); }
.sh-annonce a:focus-visible, .sh-annonce-x:focus-visible { outline: 2px solid #1A2533; outline-offset: 2px; }
@media (min-width: 768px) {
    .sh-annonce { font-size: 14px; padding-left: 56px; padding-right: 56px; }
    .sh-annonce-long { display: inline; }
    .sh-annonce-short { display: none; }
}

/* ---------- En-tête (collé en haut au défilement) ---------- */
.sh-bar {
    position: sticky; top: 0; z-index: 50;
    background: #1A2533; color: #F7F5F0;
    box-shadow: 0 1px 0 rgba(197, 168, 124, .22);
}
.sh-in {
    max-width: 80rem; margin: 0 auto; height: var(--sh-h);
    display: flex; align-items: center; gap: 12px; padding: 0 16px;
}
@media (min-width: 768px) { .sh-in { padding: 0 48px; gap: 20px; } }

.sh-brand { display: flex; align-items: center; gap: 10px; flex: none; color: #F7F5F0; }
.sh-brand img { height: 36px; width: auto; border-radius: 6px; }
.sh-brand-name {
    font-family: "Playfair Display", Georgia, serif; font-weight: 500;
    font-size: .86rem; letter-spacing: .18em; line-height: 1; color: #F7F5F0;
}
@media (min-width: 768px) {
    .sh-brand { gap: 12px; }
    .sh-brand img { height: 40px; }
    .sh-brand-name { font-size: 1.05rem; letter-spacing: .22em; }
}
.sh-brand:hover .sh-brand-name { color: #DBC39A; }

/* Menu de bureau : de 1100 px de large et au-delà */
.sh-nav { display: none; margin-left: auto; }
.sh-nav ul { display: flex; align-items: center; gap: 4px; }
.sh-nav a {
    display: block; padding: 10px 11px; color: #F7F5F0; font-size: .78rem; font-weight: 400;
    letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; position: relative;
}
.sh-nav a::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: 5px; height: 1px;
    background: #C5A87C; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.sh-nav a:hover { color: #DBC39A; }
.sh-nav a:hover::after, .sh-nav a[aria-current="page"]::after { transform: scaleX(1); }
.sh-nav a[aria-current="page"] { color: #DBC39A; }

/* Bouton doré unique : appel découverte */
.sh-cta {
    flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    background: #C5A87C; color: #1A2533; font-weight: 700; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
    padding: 10px 13px; border-radius: 999px; line-height: 1; white-space: nowrap;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sh-cta:hover { background: #DBC39A; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(197, 168, 124, .35); }
.sh-cta-l { display: none; }
@media (min-width: 1100px) {
    .sh-nav { display: block; }
    .sh-cta { margin-left: 0; border-radius: 4px; padding: 12px 16px; font-size: .7rem; letter-spacing: .07em; }
}
/* Très petits téléphones (320 px) : tout doit tenir sans défilement horizontal */
@media (max-width: 379px) {
    .sh-in { gap: 8px; padding: 0 12px; }
    .sh-brand { gap: 8px; }
    .sh-brand img { height: 32px; }
    .sh-brand-name { font-size: .74rem; letter-spacing: .12em; }
    .sh-cta { font-size: .6rem; padding: 9px 10px; }
    .sh-burger { width: 40px; margin-right: -6px; }
}
@media (min-width: 1280px) {
    .sh-cta-l { display: inline; }
    .sh-cta-s { display: none; }
}

/* Espace membre : lien discret à droite, cadenas, sans fond doré */
.sh-mem { display: none; flex: none; align-items: center; gap: 7px; color: #B8C0CC; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 10px 4px; }
.sh-mem svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.sh-mem:hover { color: #DBC39A; }
.sh-mem-t { display: none; }
@media (min-width: 1100px) { .sh-mem { display: inline-flex; } }
/* « Espace membre » en toutes lettres seulement sur grand écran (le menu compte 6 entrées depuis la v16) ;
   en dessous, le cadenas seul suffit (libellé accessible conservé : aria-label). */
@media (min-width: 1440px) { .sh-mem-t { display: inline; } .sh-in { max-width: 90rem; } }
/* 1100–1279 px : entrées un peu plus serrées pour que les six tiennent sans défilement horizontal */
@media (min-width: 1100px) and (max-width: 1279px) {
    .sh-in { gap: 14px; }
    .sh-nav a { padding: 10px 8px; }
    .sh-nav a::after { left: 8px; right: 8px; }
}

/* Bouton de menu (téléphone et tablette) : trois barres dessinées en CSS */
.sh-burger {
    flex: none; width: 44px; height: 44px; margin: 0 -8px 0 0; padding: 0; background: transparent; border: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: #C5A87C;
}
.sh-burger-b, .sh-burger-b::before, .sh-burger-b::after {
    display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, background-color .2s ease;
}
.sh-burger-b { position: relative; }
.sh-burger-b::before, .sh-burger-b::after { content: ""; position: absolute; left: 0; }
.sh-burger-b::before { top: -7px; }
.sh-burger-b::after { top: 7px; }
.sh-burger[aria-expanded="true"] .sh-burger-b { background: transparent; }
.sh-burger[aria-expanded="true"] .sh-burger-b::before { top: 0; transform: rotate(45deg); }
.sh-burger[aria-expanded="true"] .sh-burger-b::after { top: 0; transform: rotate(-45deg); }
.sh-burger:focus-visible, .sh-bar a:focus-visible { outline: 2px solid #DBC39A; outline-offset: 2px; }
@media (min-width: 1100px) { .sh-burger { display: none; } }

/* Panneau de menu mobile */
.sh-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--sh-h)); max-height: calc(100dvh - var(--sh-h)); overflow-y: auto;
    background: #1A2533; border-top: 1px solid #2C3A4D; box-shadow: 0 18px 30px rgba(10, 15, 22, .45);
    padding: 16px 16px 22px;
}
.sh-menu[hidden] { display: none; }
@media (min-width: 1100px) { .sh-menu { display: none !important; } }
.sh-tile {
    display: block; background: #F7F5F0; color: #1A2533; border-top: 3px solid #C5A87C; border-radius: 6px;
    padding: 12px 14px; margin-bottom: 9px;
}
.sh-tile b { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 1.02rem; }
.sh-tile span { font-size: .78rem; color: #5A6577; }
.sh-menu ul { margin-top: 12px; }
.sh-menu li a {
    display: flex; align-items: center; min-height: 48px; padding: 0 2px; color: #F7F5F0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 1px solid #2C3A4D;
}
.sh-menu li a[aria-current="page"] { color: #DBC39A; }
.sh-big {
    display: block; text-align: center; margin-top: 16px; padding: 14px; border-radius: 4px;
    background: #C5A87C; color: #1A2533; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
.sh-big-s { margin: 8px 0 0; text-align: center; font-size: 11px; color: #9DA7B2; }
.sh-memlink { display: block; margin-top: 14px; text-align: center; font-size: .78rem; color: #B8C0CC; padding: 8px; }

/* Variante allégée (pages d'action et pages légales) : logo + retour */
.sh-bar-focus .sh-in { justify-content: space-between; }
.sh-back {
    margin-left: auto; color: #F7F5F0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 12px 4px;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.sh-back:hover { color: #DBC39A; }
.sh-bar-focus .sh-cta { margin-left: 0; }
.sh-bar-focus .sh-cta-l { display: none; }
.sh-bar-focus .sh-cta-s { display: inline; }
@media (max-width: 479px) { .sh-bar-focus .sh-cta { display: none; } }

/* ---------- Pied de page ---------- */
.sh-foot { background: #111827; color: #9CA3AF; padding: 56px 24px 28px; text-align: center; }
.sh-foot a:focus-visible { outline: 2px solid #DBC39A; outline-offset: 3px; }
.sh-foot-in { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 36px; text-align: center; }
.sh-foot-brand { display: flex; flex-direction: column; align-items: center; }
.sh-foot-brand img { height: 9rem; width: auto; border-radius: 1rem; object-fit: contain; }
.sh-sign { margin: 22px 0 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; line-height: 1.4; color: #fff; }
.sh-sign span { color: #C5A87C; }
.sh-foot-h { margin: 0 0 18px; color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.sh-foot li { margin: 0 0 11px; font-size: .88rem; font-weight: 300; line-height: 1.5; }
.sh-foot li a { color: #9CA3AF; transition: color .2s ease; }
.sh-foot li a:hover { color: #C5A87C; }
.sh-foot-bas { max-width: 80rem; margin: 40px auto 0; padding-top: 26px; border-top: 1px solid #1F2937; text-align: center; }
.sh-foot-mem {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 11px 22px; border: 1px solid #C5A87C; border-radius: 4px;
    color: #C5A87C; font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; transition: background-color .25s ease, color .25s ease;
}
.sh-foot-mem svg { width: 12px; height: 12px; fill: currentColor; }
.sh-foot-mem:hover { background: #C5A87C; color: #1A2533; }
.sh-foot-c { margin: 0; font-size: .76rem; font-weight: 300; color: #8A93A0; }
@media (min-width: 768px) {
    .sh-foot { padding: 64px 48px 32px; text-align: left; }
    .sh-foot-in { grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 40px; text-align: left; }
    .sh-foot-brand { align-items: flex-start; }
    .sh-foot-brand img { height: 11rem; }
    .sh-foot-bas { display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; }
    .sh-foot-mem { margin-bottom: 0; }
}

/* Pied de page compact (pages d'action et pages légales) */
.sh-foot-min { background: #111827; color: #8A93A0; padding: 26px 20px; text-align: center; font-family: Lato, system-ui, sans-serif; font-size: .78rem; font-weight: 300; line-height: 1.7; }
.sh-foot-min p { margin: 0; }
.sh-foot-min a { color: #B8C0CC; text-decoration: underline; text-decoration-color: #3B4658; text-underline-offset: 3px; }
.sh-foot-min a:hover { color: #C5A87C; }
.sh-foot-min .sh-foot-liens { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .sh-cta, .sh-nav a::after, .sh-burger-b, .sh-burger-b::before, .sh-burger-b::after { transition: none; }
}