/* ==========================================================================
   COMPOSANTS PARTAGÉS V4.2 — pied de page commun (et ses réseaux sociaux)
   --------------------------------------------------------------------------
   Une seule source : composants/pied.html, posé EN DUR dans chaque page
   publique par scripts/composants/poser.js (contrôlé par `--verifier` dans
   npm test). Cette feuille est chargée par l'accueil ET par les pages qui
   gardent styles.css / landing.css : toutes ses règles sont donc PORTÉES
   par .pied — rien ne déborde sur .brand, .wrap ou .lh-lang des autres
   pages. Les jetons sont ceux de l'accueil (infolumiere.css), redéclarés
   ici sur .pied pour les pages qui ne chargent pas infolumiere.css.
   ========================================================================== */
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/roboto-serif-var-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: "Roboto Condensed"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/fonts/roboto-condensed-var-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; }

.pied {
  --il-gold: #CEA481; --il-gold-light: #EFCB94; --il-champagne: #F6DFB3; --il-cream: #F8F2E8;
  --il-text-secondary: #BCC3CF; --il-text-muted: #98A2B3;
  --pied-display: "Roboto Serif", Georgia, serif;
  --pied-cond: "Roboto Condensed", "Roboto", sans-serif;
  --pied-gutter: 16px;
  background: #031228; padding: 64px 0 36px; font: 300 14px/1.62 "Roboto", system-ui, -apple-system, sans-serif;
  color: var(--il-text-secondary); position: relative; text-align: left;
}
/* Performance : rendu différé tant que le pied est loin de l'écran. Ses polices
   (Roboto Serif, Roboto Condensed — absentes des anciennes pages) ne sont donc
   demandées qu'à son approche, et ne disputent plus la bande passante à l'image
   principale (Lighthouse mobile, /produit : LCP retardé de ~0,4 à 1,8 s sans
   cela). Navigateur sans content-visibility : comportement d'avant, rien ne casse.
   `auto` retient la taille réelle une fois rendu : pas de saut de défilement. */
.pied { content-visibility: auto; contain-intrinsic-size: auto 1500px; }
@media (min-width: 900px) { .pied { contain-intrinsic-size: auto 640px; } }
@media (min-width: 768px) { .pied { --pied-gutter: 28px; } }
@media (min-width: 1200px) { .pied { --pied-gutter: 40px; } }
.pied *, .pied *::before, .pied *::after { box-sizing: border-box; }
.pied::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--il-gold), transparent); opacity: .5; }
.pied > .wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 var(--pied-gutter); }
.pied a { color: inherit; }
.pied :focus-visible { outline: 2px solid var(--il-gold-light); outline-offset: 3px; border-radius: 6px; }

.pied .brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; flex: none; font: inherit; letter-spacing: 0; }
.pied .brand img { display: block; width: 38px; height: 38px; filter: drop-shadow(0 0 10px rgba(245, 199, 126, .25)); }
.pied .brand-name { font: 500 21px/1 var(--pied-display); color: var(--il-cream); letter-spacing: .01em; }
.pied .brand-name b { font-weight: 500; color: var(--il-champagne); }
@media (max-width: 520px) { .pied .brand img { width: 32px; height: 32px; } .pied .brand-name { font-size: 18.5px; } }
.pied .muted { color: var(--il-text-muted); font-size: 14px; }
.pied .pied-accroche { max-width: 34ch; margin: 16px 0 0; }

.pied-grille { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 1.4fr repeat(5, 1fr); } }
.pied-grille > div:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .pied-grille > div:first-child { grid-column: auto; } }
.pied .pied-titre { margin: 0 0 12px; font: 600 11px/1 var(--pied-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--il-gold-light); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; }
/* inline-block, pas inline-flex : en flex, l'espace qui suit un exposant (® de
   marques.js) disparaissait — « Den Beosigner®entdecken ». 12 + 20 + 12 = 44 px. */
.pied li a { display: inline-block; padding: 12px 0; line-height: 20px; color: var(--il-text-secondary); text-decoration: none; transition: color .3s; }
.pied li a:hover { color: var(--il-cream); }
.pied .lien-off { display: inline-block; padding: 12px 0; line-height: 20px; opacity: .55; cursor: not-allowed; color: inherit; }

/* sélecteur de langue (câblé par funnel-i18n.js / i18n.js : .lh-lang button) */
.pied .lh-lang { display: inline-flex; gap: 2px; padding: 3px; margin-top: 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(188, 195, 207, .25); background: none; border: 0; }
.pied .lh-lang button { min-width: 44px; height: 38px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--il-text-secondary); font: 600 11px/1 var(--pied-cond); letter-spacing: .14em; cursor: pointer; transition: background-color .3s, color .3s; }
.pied .lh-lang button:hover { color: var(--il-cream); }
.pied .lh-lang button.active { background: rgba(246, 223, 179, .14); color: var(--il-champagne); }

/* réseaux sociaux : de simples liens, aucun widget ni script tiers */
.pied-reseaux { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pied-reseaux-titre { font: 600 11px/1 var(--pied-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--il-gold-light); }
.pied .reseaux { display: flex; gap: 8px; }
.pied .reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--il-champagne); box-shadow: inset 0 0 0 1px rgba(206, 164, 129, .30); transition: color .3s, box-shadow .3s, background-color .3s; }
.pied .reseaux a:hover { color: var(--il-cream); background: rgba(246, 223, 179, .08); box-shadow: inset 0 0 0 1px rgba(239, 203, 148, .6); }
.pied .reseaux svg { width: 19px; height: 19px; display: block; }

.pied-bas { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(188, 195, 207, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; color: var(--il-text-muted); font-size: 12.5px; }

/* ==========================================================================
   PONT DE JETONS — les pages qui gardent styles.css / landing.css prennent
   les teintes de l'accueil V4.2 (infolumiere.css), sans réécrire une règle.
   --------------------------------------------------------------------------
   Aucune couleur nouvelle : chaque valeur est un jeton --il-* de l'accueil
   (bleu nuit #041935, bleu carte #102E51, bleu tuile #16395F, or #CEA481,
   or clair #EFCB94, champagne #F6DFB3, or profond #A9825C) ou un palier
   entre deux d'entre eux (#0A2647, #1D4670, #061F40), pour garder l'écart
   de profondeur que les pages avaient entre page, section, carte et champ.
   L'accueil ne lit aucun de ces noms : ce bloc ne le touche pas.
   Revenir en arrière = supprimer ce bloc.
   ========================================================================== */
:root {
  --night-900: #041935;     /* page            ← --il-bg-deep     */
  --night-page-2: #061F40;  /* haut du dégradé ← palier deep/surface */
  --night-800: #0A2647;     /* sections        ← palier deep/surface */
  --night-700: #102E51;     /* cartes, encarts ← --il-bg-surface  */
  --night-600: #16395F;     /* champs          ← --il-bg-raised   */
  --night-500: #1D4670;     /* au-dessus       ← palier raised/glow */
  --veil: 4, 25, 53;        /* = --night-900 en composantes */
  --gold-300: #F6DFB3;      /* ← --il-champagne  */
  --gold-400: #EFCB94;      /* ← --il-gold-light */
  --gold-500: #CEA481;      /* ← --il-gold       */
  --gold-600: #A9825C;      /* ← --il-gold-deep  */
  --gold-line: rgba(206, 164, 129, .30);
  --gold-glow: rgba(206, 164, 129, .16);
}

/* ==========================================================================
   EN-TÊTE V4.2 COMMUN — composants/entete.html (et entete-tunnel.html)
   --------------------------------------------------------------------------
   Celui de l'accueil, partagé par toutes les pages. Règles portées par
   .site-header et .tiroir : sur les pages qui gardent styles.css /
   landing.css, leurs .brand, .btn et .wrap ne s'en mêlent pas.
   Comportements : entete-v42.js. Suivi de section (data-spy) : accueil seul.
   ========================================================================== */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/roboto-400-latin.woff2) format("woff2"); }
.site-header, .tiroir {
  --il-bg-deep: #041935; --il-gold: #CEA481; --il-gold-light: #EFCB94; --il-gold-bright: #F5C77E; --il-champagne: #F6DFB3;
  --il-cream: #F8F2E8; --il-ivory: #FDFBF6; --il-text-secondary: #BCC3CF; --il-text-muted: #98A2B3;
  --il-azur: #8FB9EC; --il-azur-light: #B9D3F4;
  --eh-display: "Roboto Serif", Georgia, serif; --eh-sans: "Roboto", system-ui, -apple-system, sans-serif; --eh-cond: "Roboto Condensed", "Roboto", sans-serif;
  --eh-ease: cubic-bezier(.22, .61, .36, 1); --eh-ease-out: cubic-bezier(.16, 1, .3, 1);
  --eh-gutter: 16px; --eh-h: 68px;
  font: 300 16px/1.62 var(--eh-sans); text-align: left;
}
@media (min-width: 768px) { .site-header, .tiroir { --eh-gutter: 28px; } }
@media (min-width: 1200px) { .site-header, .tiroir { --eh-gutter: 40px; --eh-h: 76px; } }
.site-header *, .tiroir * { box-sizing: border-box; }
.site-header a, .tiroir a { color: inherit; }
.site-header :focus-visible, .tiroir :focus-visible { outline: 2px solid var(--il-gold-light); outline-offset: 3px; border-radius: 6px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--eh-h); transition: background-color .5s, box-shadow .5s, backdrop-filter .5s; }
.site-header.plein { background: rgba(4, 25, 53, .82); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); box-shadow: 0 1px 0 rgba(206, 164, 129, .18); }
.site-header > .wrap { width: 100%; margin: 0 auto; padding: 0 var(--eh-gutter); height: 100%; display: flex; align-items: center; gap: 18px; max-width: 1320px; }
.site-header .brand, .tiroir .brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; flex: none; font: inherit; letter-spacing: 0; color: inherit; }
.site-header .brand img, .tiroir .brand img { display: block; width: 38px; height: 38px; filter: drop-shadow(0 0 10px rgba(245, 199, 126, .25)); }
.site-header .brand-name, .tiroir .brand-name { font: 500 21px/1 var(--eh-display); color: var(--il-cream); letter-spacing: .01em; }
.site-header .brand-name b, .tiroir .brand-name b { font-weight: 500; color: var(--il-champagne); }
.site-header .nav { display: none; gap: 2px; margin-left: 14px; }
.site-header .nav a { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 10px; white-space: nowrap; color: var(--il-text-secondary); text-decoration: none; font-size: 14.5px; font-weight: 400; transition: color .35s; }
.site-header .nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 1px; background: linear-gradient(90deg, transparent, var(--il-gold-light), transparent); transform: scaleX(0); transition: transform .5s var(--eh-ease-out); }
.site-header .nav a:hover, .site-header .nav a.actif, .site-header .nav a[aria-current="page"] { color: var(--il-cream); }
.site-header .nav a:hover::after, .site-header .nav a.actif::after, .site-header .nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header .nav a.pro { color: var(--il-azur-light); }
.site-header .nav a.pro::after { background: linear-gradient(90deg, transparent, var(--il-azur), transparent); }
.site-header .h-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-header .h-actions { flex: none; }
/* « Plus » : rubriques secondaires (Mon Éveil, Qui sommes-nous, partenaires, FAQ) */
.site-header .nav-plus { position: relative; }
.site-header .nav-plus summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; color: var(--il-text-secondary); font-size: 14.5px; font-weight: 400; transition: color .35s; }
.site-header .nav-plus summary::-webkit-details-marker { display: none; }
.site-header .nav-plus summary svg { width: 16px; height: 16px; transition: transform .35s var(--eh-ease-out); }
.site-header .nav-plus summary:hover, .site-header .nav-plus[open] summary, .site-header .nav-plus.actif summary { color: var(--il-cream); }
.site-header .nav-plus[open] summary svg { transform: rotate(180deg); }
.site-header .nav-plus-liste { position: absolute; left: 0; top: 50px; min-width: 230px; display: grid; padding: 8px; border-radius: 18px; background: rgba(4, 25, 53, .97); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(246, 223, 179, .28); }
.site-header .nav-plus-liste a { height: 44px; padding: 0 14px; border-radius: 12px; }
.site-header .nav-plus-liste a::after { display: none; }
.site-header .nav-plus-liste a:hover, .site-header .nav-plus-liste a:focus-visible { background: rgba(246, 223, 179, .08); }

.site-header .btn, .tiroir .btn {
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer; font: 500 15px/1 var(--eh-sans); letter-spacing: .01em;
  text-decoration: none; text-transform: none; white-space: nowrap; transition: transform .45s var(--eh-ease-out), box-shadow .45s var(--eh-ease-out), background-color .45s, color .45s;
}
.site-header .btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.site-header .btn-or, .tiroir .btn-or { color: var(--il-bg-deep); background: linear-gradient(180deg, var(--il-ivory) -55%, var(--il-champagne) 34%, var(--il-gold-bright) 118%); box-shadow: 0 12px 30px -14px rgba(245, 199, 126, .65), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(253, 251, 246, .45); }
.site-header .btn-or:hover, .tiroir .btn-or:hover { transform: translateY(-2px); }
.site-header .btn-ghost, .tiroir .btn-ghost { color: var(--il-champagne); background: rgba(4, 25, 53, .28); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .42); }
.site-header .btn-ghost:hover, .tiroir .btn-ghost:hover { background: rgba(246, 223, 179, .1); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .8); }
.site-header .login { display: none !important; }
.site-header .h-panier { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--il-champagne); box-shadow: inset 0 0 0 1px rgba(206, 164, 129, .35); text-decoration: none; }
.site-header .h-panier[hidden] { display: none; }
.site-header .h-panier svg { width: 19px; height: 19px; }
.site-header .h-panier .cc { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--il-champagne); color: var(--il-bg-deep); font: 600 10.5px/18px var(--eh-sans); text-align: center; }
.site-header .burger, .tiroir .burger { width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 14px; border: 0; padding: 0; background: rgba(4, 25, 53, .35); box-shadow: inset 0 0 0 1px rgba(206, 164, 129, .35); color: var(--il-champagne); cursor: pointer; }
.site-header .cta-court { display: none; }

.site-header .lh-lang, .tiroir .lh-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 0; background: none; box-shadow: inset 0 0 0 1px rgba(188, 195, 207, .25); }
.site-header .lh-lang button, .tiroir .lh-lang button { min-width: 44px; height: 38px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--il-text-secondary); font: 600 11px/1 var(--eh-cond); letter-spacing: .14em; cursor: pointer; }
.site-header .lh-lang button:hover, .tiroir .lh-lang button:hover { color: var(--il-cream); }
.site-header .lh-lang button.active, .tiroir .lh-lang button.active { background: rgba(246, 223, 179, .14); color: var(--il-champagne); }
.site-header .langue-menu { position: relative; display: none; }
.site-header .langue-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: 600 11.5px/1 var(--eh-cond); letter-spacing: .14em; color: var(--il-text-secondary); box-shadow: inset 0 0 0 1px rgba(188, 195, 207, .25); }
.site-header .langue-menu summary::-webkit-details-marker { display: none; }
.site-header .langue-menu summary svg { width: 15px; height: 15px; }
.site-header .langue-menu[open] summary, .site-header .langue-menu summary:hover { color: var(--il-cream); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .5); }
.site-header .langue-menu .lh-lang { position: absolute; right: 0; top: 48px; background: rgba(4, 25, 53, .96); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(246, 223, 179, .3); }
.site-header .langue-menu--toujours { display: block; }

@media (min-width: 1240px) {
  .site-header .nav { display: flex; }
  .site-header .langue-menu { display: block; }
  .site-header .login { display: inline-flex !important; }
  .site-header .h-actions .burger { display: none; }
}
/* six rubriques + « Plus » + langue + espace membre + action : jusqu'à 1499 px, l'action prend sa forme courte */
@media (min-width: 1240px) { .site-header .nav { margin-left: 8px; } .site-header .nav a, .site-header .nav-plus summary { padding: 0 8px; font-size: 14px; } .site-header .nav a::after { left: 8px; right: 8px; } .site-header > .wrap { gap: 14px; } }
@media (min-width: 1240px) and (max-width: 1499px) { .site-header .cta-long { display: none; } .site-header .cta-court { display: inline; } }
/* Mesure réelle (entete-v42.js) : la police, la barre de défilement, le zoom ou une
   langue plus longue peuvent faire déborder ce que les paliers prévoient. Le script
   essaie l'en-tête complet, puis l'action courte, puis le menu compact (tiroir),
   et garde la première forme qui tient avec une marge. Sans script : les paliers. */
@media (min-width: 1240px) {
  .site-header[data-forme="complet"] .cta-long { display: inline; }
  .site-header[data-forme="complet"] .cta-court { display: none; }
  .site-header[data-forme="court"] .cta-long { display: none; }
  .site-header[data-forme="court"] .cta-court { display: inline; }
  .site-header[data-forme="compact"] .nav, .site-header[data-forme="compact"] .langue-menu { display: none; }
  .site-header[data-forme="compact"] .login { display: none !important; }
  .site-header[data-forme="compact"] .h-actions .burger { display: inline-grid; }
}
@media (min-width: 1240px) { .site-header[data-forme="minimal"] .nav, .site-header[data-forme="minimal"] .langue-menu { display: none; } .site-header[data-forme="minimal"] .login { display: none !important; } .site-header[data-forme="minimal"] .h-actions .burger { display: inline-grid; } }
.site-header[data-forme="minimal"] .h-cta { display: none; }
@media (max-width: 229px) { .site-header .h-cta { display: none; } }
/* en-tête fixe : une ancre ne se cache jamais dessous */
html { scroll-padding-top: 84px; }
@media (max-width: 1199px) { html { scroll-padding-top: 76px; } }
@media (max-width: 520px) {
  .site-header .brand img, .tiroir .brand img { width: 32px; height: 32px; }
  .site-header .brand-name, .tiroir .brand-name { font-size: 18.5px; }
  .site-header .h-cta, .site-header .h-retour { padding: 0 16px; }
  .site-header .cta-long { display: none; } .site-header .cta-court { display: inline; }
  .site-header > .wrap { gap: 10px; }
}
@media (max-width: 420px) { .site-header .h-actions { gap: 6px; } .site-header .h-cta { padding: 0 14px; } }
@media (max-width: 374px) { .site-header .brand-name { display: none; } }

/* tiroir mobile */
.tiroir { position: fixed; inset: 0; z-index: 110; display: grid; grid-template-rows: auto 1fr auto auto; padding: 16px var(--eh-gutter) 28px; overflow-y: auto; background: linear-gradient(180deg, rgba(4,25,53,.98), rgba(10,36,70,.98)); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .4s var(--eh-ease), transform .4s var(--eh-ease), visibility 0s .4s; }
.tiroir[hidden] { display: none; }
.tiroir.ouvert { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--eh-ease), transform .4s var(--eh-ease); }
.tiroir .t-haut { display: flex; justify-content: space-between; align-items: center; }
.tiroir nav { display: grid; align-content: center; gap: 2px; padding: 12px 0; }
.tiroir nav a { font: 400 24px/1.2 var(--eh-display); color: var(--il-cream); text-decoration: none; padding: 9px 0; border-bottom: 1px solid rgba(206,164,129,.14); }
.tiroir nav a.pro { color: var(--il-azur-light); }
.tiroir nav a.t-sec { font: 400 16px/1.4 var(--eh-sans); color: var(--il-text-secondary); padding: 11px 0; }
.tiroir .t-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; color: var(--il-text-muted); font: 600 11px/1 var(--eh-cond); letter-spacing: .2em; text-transform: uppercase; }
.tiroir .btns { display: flex; flex-wrap: wrap; gap: 12px; }
.tiroir .btns .btn { flex: 1 1 100%; }
html.tiroir-ouvert { overflow: hidden; }

/* tunnel : l'étape en cours, à côté de la marque */
.site-header .h-etape { font: 500 11px/1.3 var(--eh-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--il-text-muted); margin-left: 6px; }
.site-header .h-etape b { color: var(--il-gold-light); font-weight: 600; }
@media (max-width: 640px) { .site-header--tunnel .brand-name { display: none; } .site-header .h-etape { font-size: 10px; letter-spacing: .1em; margin-left: 0; } }