/* ==========================================================================
   V4.2 — GRAMMAIRE VISUELLE DE L'ACCUEIL POUR LES AUTRES PAGES
   --------------------------------------------------------------------------
   Les pages autres que l'accueil sont écrites sur styles.css / landing.css /
   pages.css (Cormorant, boutons droits, cartes à 8 px). Cette feuille, posée
   APRÈS elles par scripts/composants/poser.js, leur donne la grammaire de
   l'accueil (infolumiere.css) sans toucher à leur balisage ni à leurs scripts :
     · titres en Roboto Serif 500, tailles de l'accueil ;
     · sur-titres en Roboto Condensed, filet doré ;
     · boutons en pilule (or et verre champagne), puces, cartes à 16 px ;
     · texte courant et texte discret aux teintes de l'accueil ;
     · champs de formulaire arrondis.
   Aucune couleur nouvelle : jetons --il-* de l'accueil (voir composants-v42.css).
   L'accueil ne charge pas cette feuille.
   ========================================================================== */
@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; }

:root {
  --serif: "Roboto Serif", Georgia, serif;          /* était Cormorant */
  --v42-cond: "Roboto Condensed", "Roboto", sans-serif;
  --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-bg-deep: #041935; --il-bg-surface: #102E51; --il-bg-raised: #16395F;
  --il-or-filet: rgba(206, 164, 129, .30);
  --v42-ease-out: cubic-bezier(.16, 1, .3, 1);
  /* texte : teintes de l'accueil (contraste ≥ 7:1 sur #041935 pour le courant) */
  --warm-100: #F8F2E8;
  --warm-200: #BCC3CF;
  --warm-mut: #A7B0BE;
  --warm-faint: #9AA4B2;  /* opaque : 7,3:1 sur #041935, 5,9:1 sur #16395F */
}

/* ---------- Titres ---------- */
.h-serif, h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.012em; }
.h-serif { line-height: 1.08; }
.page-title, .pdp-title { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; }
.hero h1, .lhero h1 { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.06; }
.sec-head h2, .cta-strip h2, .h2-v42 { font-size: clamp(29px, 3.7vw, 48px); line-height: 1.1; }
.gold-text { background: linear-gradient(100deg, var(--il-gold-bright) 0%, var(--il-champagne) 40%, var(--il-ivory) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.legal h1 { font-family: var(--serif); font-size: clamp(32px, 4.2vw, 50px); }
.legal h2 { font-family: var(--serif); font-size: clamp(21px, 2.3vw, 27px); color: var(--il-champagne); }

/* ---------- Sur-titres ---------- */
.eyebrow { font: 600 11px/1.4 var(--v42-cond); letter-spacing: .26em; text-transform: uppercase; color: var(--il-gold-light); gap: 12px; }
.eyebrow::before { width: 30px; background: linear-gradient(90deg, transparent, currentColor); }
.breadcrumb { font: 500 11px/1.4 var(--v42-cond); letter-spacing: .18em; }

/* ---------- Texte ---------- */
.lead { font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.66; color: var(--il-text-secondary); }

/* ---------- Boutons ---------- */
.btn {
  min-height: 50px; padding: 0 28px; border-radius: 999px; justify-content: center;
  font: 500 15px/1 var(--sans, "Roboto", sans-serif); letter-spacing: .01em;
  transition: transform .45s var(--v42-ease-out), box-shadow .45s var(--v42-ease-out), background-color .45s, color .45s;
}
.btn-gold {
  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);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(245, 199, 126, .8), inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(253,251,246,.6); }
.btn-ghost { border: 0; color: var(--il-champagne); background: rgba(4, 25, 53, .28); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .42); }
.btn-ghost:hover { background: rgba(246, 223, 179, .1); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .8), 0 0 24px -6px rgba(246, 223, 179, .35); }
@media (max-width: 480px) { main .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 12px 22px; } }
.add-btn, .unlock-btn, .pfoot .unlock-btn {
  border: 0; border-radius: 999px; min-height: 44px; padding: 0 18px; justify-content: center;
  color: var(--il-champagne); background: rgba(246, 223, 179, .06); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .38);
}
.add-btn:hover, .unlock-btn:hover, .pfoot .unlock-btn:hover { color: var(--il-bg-deep); border: 0; background: linear-gradient(180deg, var(--il-ivory) -55%, var(--il-champagne) 34%, var(--il-gold-bright) 118%); box-shadow: none; }

/* ---------- Puces (filtres, choix) ---------- */
.chip { border: 0; border-radius: 999px; min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; color: var(--il-text-secondary); background: rgba(4, 25, 53, .3); box-shadow: inset 0 0 0 1px rgba(188, 195, 207, .26); }
.chip:hover { color: var(--il-cream); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .5); }
.chip.active { color: var(--il-bg-deep); background: linear-gradient(180deg, var(--il-ivory) -55%, var(--il-champagne) 34%, var(--il-gold-bright) 118%); box-shadow: none; }

/* ---------- Cartes ---------- */
.product, .card, .crosssell > *, .cbenefit, .hstep, .attr-banner, .sub-offer, .mb-card {
  border-radius: 16px;
}
.product {
  border: 0; overflow: hidden;
  background: linear-gradient(162deg, var(--il-bg-raised) 0%, var(--il-bg-surface) 52%, #0B2646 100%);
  box-shadow: 0 24px 46px -26px rgba(1, 8, 20, .9), inset 0 0 0 1px var(--il-or-filet);
  transition: transform .6s var(--v42-ease-out), box-shadow .6s var(--v42-ease-out);
}
@media (hover: hover) { .product:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 34px 60px -28px rgba(1, 8, 20, .95), inset 0 0 0 1px rgba(246, 223, 179, .62); } }
.product h3, .product [data-nv="4"] { font: 500 19px/1.25 var(--serif); color: var(--il-champagne); letter-spacing: -.005em; }
.pbadge { border-radius: 999px; font: 600 10px/1 var(--v42-cond); letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; }
.hstep, .cbenefit { box-shadow: inset 0 0 0 1px var(--il-or-filet); }
.hstep h4, .hstep [data-nv="4"], .hstep h3, .cbenefit h4, .cbenefit [data-nv="4"] { font-family: var(--serif); font-weight: 500; color: var(--il-champagne); }

/* ---------- Formulaires ---------- */
main input[type="text"], main input[type="email"], main input[type="tel"], main input[type="number"], main select, main textarea {
  border-radius: 12px;
}
main input:focus-visible, main select:focus-visible, main textarea:focus-visible { outline: 2px solid var(--il-gold-light); outline-offset: 2px; }

/* ---------- Section alternée et séparateurs ---------- */
.hr-gold { background: linear-gradient(90deg, transparent, var(--il-gold), transparent); opacity: .5; }

/* ==========================================================================
   VISUEL D'UNE PHOTO MANQUANTE
   Plusieurs photos du dépôt sont encore des vignettes vides (48 × 32 px), en
   attente de l'outil photos.js. entete-v42.js marque leur cadre `.sans-photo`
   et y écrit le nom du produit (alt) : un emblème typographique, jamais un
   bloc gris ni une image inventée. Une vraie photo posée retire la marque.
   ========================================================================== */
.sans-photo { background: radial-gradient(120% 90% at 50% 20%, rgba(246, 223, 179, .14), rgba(16, 46, 81, .0) 55%), linear-gradient(160deg, #16395F, #0B2646) !important; }
.sans-photo > img.slot-img { opacity: 0 !important; }
.sans-photo::after {
  content: attr(data-nom); position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; z-index: 1;
  font: 500 clamp(20px, 2.2vw, 28px)/1.15 var(--serif); color: var(--il-champagne); letter-spacing: -.01em; pointer-events: none;
}

/* ==========================================================================
   BOUTIQUE — familles, titres de famille, filtres, cartes homogènes
   ========================================================================== */
.familles { padding: clamp(28px, 4vw, 48px) 0 8px; }
.familles-tete .h2-v42 { margin: 14px 0 22px; }
.familles-grille { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .familles-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .familles-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.famille { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
  background: linear-gradient(162deg, var(--il-bg-raised) 0%, var(--il-bg-surface) 52%, #0B2646 100%); box-shadow: 0 20px 40px -26px rgba(1, 8, 20, .9), inset 0 0 0 1px var(--il-or-filet);
  transition: transform .6s var(--v42-ease-out), box-shadow .6s var(--v42-ease-out); }
@media (hover: hover) { .famille:hover { transform: translateY(-4px); box-shadow: 0 30px 54px -28px rgba(1, 8, 20, .95), inset 0 0 0 1px rgba(246, 223, 179, .6); } }
.famille-img { position: relative; display: block; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 40%, #16395F, #071C38 72%); overflow: hidden; }
.famille-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.famille-img--club { display: grid; place-items: center; }
.famille-img--club .club-nom { font: 500 clamp(26px, 2.6vw, 34px)/1 var(--serif); color: var(--il-champagne); }
.famille-corps { display: grid; gap: 4px; padding: 14px 16px 18px; }
.famille-nom { font: 500 18px/1.2 var(--serif); color: var(--il-cream); }
.famille-txt { font-size: 13.5px; line-height: 1.45; color: var(--il-text-muted); }

/* barre de filtres : collée sous l'en-tête, défilement horizontal sur mobile */
.shop-bar { position: sticky; top: 68px; z-index: 20; margin-top: 26px; padding: 12px 0; display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, rgba(4, 25, 53, .94), rgba(4, 25, 53, .86)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); scroll-margin-top: 80px; }
@media (min-width: 1200px) { .shop-bar { top: 76px; } }
.shop-bar .filters { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; margin: 0; flex: 1 1 auto; min-width: 0; }
.shop-bar .filters::-webkit-scrollbar { display: none; }
.shop-bar .chip { flex: none; }
.shop-count { flex: none; color: var(--il-text-muted); font-size: 13px; }
@media (max-width: 560px) { .shop-count { display: none; } }

/* titres de famille, pleine largeur dans la grille */
.famille-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; padding: 0 2px 14px; margin-bottom: 26px; border-bottom: 1px solid rgba(206, 164, 129, .22); }
/* une bande par famille : moins haute qu'une section, pour que le catalogue reste un catalogue */
.sec.bande { padding: clamp(46px, 6vw, 84px) 0; }
.clair .famille-ligne { border-bottom-color: rgba(166, 124, 78, .3); }
.famille-ligne h2 { margin: 0; font: 500 clamp(24px, 2.6vw, 32px)/1.1 var(--serif); color: var(--il-cream); }
.famille-ligne p { margin: 6px 0 0; color: var(--il-text-muted); font-size: 14.5px; }
.famille-liens { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.famille-liens a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--il-champagne); text-decoration: none; font-size: 14px; }
.famille-liens a:hover { color: var(--il-cream); }

/* cartes produit : même proportion d'image, pied aligné en bas */
.shop-grid { gap: 18px; align-items: stretch; }
.shop-grid .product { display: flex; flex-direction: column; }
.shop-grid .pimg { aspect-ratio: 1 / 1; height: auto !important; background: radial-gradient(circle at 50% 42%, #16395F, #071C38 74%); }
.shop-grid .pimg .slot-img { object-fit: cover; }
.shop-grid .pbody { flex: 1 1 auto; display: flex; flex-direction: column; }
.shop-grid .pfoot { margin-top: auto; padding-top: 14px; }
.shop-grid .product-club .pimg { aspect-ratio: 1 / 1; }
@media (max-width: 559px) { .shop-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .shop-grid .product h3, .shop-grid .product [data-nv] { font-size: 16px; } .shop-grid .psub { font-size: 12.5px; } }
@media (min-width: 1180px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .shop-grid .product .psub { font-size: 13.5px; } }
@media (min-width: 760px) and (max-width: 1179px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .shop-grid .product-club { grid-column: 1 / -1; } .shop-grid .product-club .pimg { aspect-ratio: 16 / 9; } }
.product-club .club-nom { font-family: var(--serif); font-size: clamp(30px, 4vw, 46px); letter-spacing: -.01em; }
.add-btn, .unlock-btn, .pfoot .unlock-btn { display: inline-flex; align-items: center; line-height: 1.2; }
@media (max-width: 559px) {
  .shop-grid .pfoot { flex-direction: column; align-items: stretch; gap: 10px; }
  .shop-grid .pfoot .unlock-btn, .shop-grid .pfoot .add-btn { width: 100%; }
  .shop-grid .pfoot .price-lock { font-size: 12px; }
}
@media (max-width: 559px) { .shop-grid .pbadge { font-size: 9px; letter-spacing: .1em; padding: 5px 8px; max-width: calc(100% - 64px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* ==========================================================================
   FICHES PRODUIT — mêmes cartes, mêmes boutons que la Boutique
   ========================================================================== */
/* ligne d'achat : quantité, finition (posée par app.js) et bouton ; le bouton
   passe à la ligne plutôt que de s'écraser sur trois lignes */
.buy-row { flex-wrap: wrap; align-items: stretch; }
.buy-row .btn-gold { flex: 1 1 230px; min-height: 54px; white-space: nowrap; }
.qty { border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .38); }
.qty button:hover { background: rgba(246, 223, 179, .14); color: var(--il-cream); }
/* galerie : cadres arrondis, miniatures sans texte débordant */
.pdp-main { border-radius: 18px; overflow: hidden; }
.pdp-thumb { border-radius: 12px; overflow: hidden; }
.pdp-thumb.sans-photo::after { font-size: 11px; line-height: 1.25; padding: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; place-items: unset; align-content: center; }
.pdp-thumb.sans-photo::after { display: grid; }
.pdp-price .now { font-family: var(--serif); color: var(--il-champagne); }
.pdp-sub { color: var(--il-text-secondary); }
/* accordéons (Description, Caractéristiques…) */
.spec-q, .faq-q { font-family: var(--sans, "Roboto", sans-serif); color: var(--il-cream); }
.spec-item, .faq-item { border-color: rgba(206, 164, 129, .22) !important; }
/* offres MyClub encadrées sur les fiches */
.sub-offer, .mb-card { box-shadow: inset 0 0 0 1px var(--il-or-filet); border: 0 !important; }
.sub-price-tag .pm, .mb-price .v { font-family: var(--serif); color: var(--il-champagne); }
/* cartes « Souvent ajoutés ensemble » */
.crosssell .product { display: flex; flex-direction: column; }
.crosssell .pimg { aspect-ratio: 16 / 10; height: auto !important; }
.variant { border-radius: 12px; }
.variant.active { box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .7); }
@media (max-width: 559px) { .pdp-thumb.sans-photo::after { font-size: 9.5px; padding: 5px; } }

/* Tunnel (coordonnées, récapitulatif) : le bouton d'action pleine largeur prend
   la pilule or de l'accueil (sélecteur doublé : le <style> de la page vient après). */
.dem-cta.dem-cta { border: 0; border-radius: 999px; color: var(--il-bg-deep); font: 500 15px/1 var(--sans, "Roboto", sans-serif);
  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); }
/* un mot long (« L'accompagnement ») doit tenir à 320 px */
.hero h1, .lhero h1 { font-size: clamp(29px, 8.2vw, 66px); overflow-wrap: break-word; }
.page-title, .pdp-title { font-size: clamp(29px, 7.6vw, 58px); overflow-wrap: break-word; }
@media (min-width: 768px) { .hero h1, .lhero h1 { font-size: clamp(38px, 4.8vw, 66px); } .page-title, .pdp-title { font-size: clamp(34px, 4.6vw, 58px); } }
/* allemand, néerlandais : les mots composés longs se coupent plutôt que de déborder */
:lang(de) h1, :lang(de) h2, :lang(nl) h1, :lang(nl) h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ==========================================================================
   RYTHME DES FONDS — l'alternance de l'accueil sur les autres pages (29/10/2026)
   --------------------------------------------------------------------------
   Mêmes fonds que l'accueil (infolumiere.css : .fond-nuit, .fond-ocean,
   .fond-ivoire, .fond-aube, .fond-brume) et même règle : une section claire
   porte aussi .clair, qui donne à ses composants leur VARIANTE claire.
   Pas une couleur de fond seule : dans une section .clair, les jetons que lisent
   les composants hérités (--warm-*, --gold-*, --night-*) prennent leur valeur
   « jour » — titres bleu nuit, texte gris foncé, or soutenu, cartes blanches.
   Les teintes viennent de l'accueil (--il-titre-jour, --il-gold-jour, #3B475A,
   #56606F, #8A5A12, --il-papier) : aucune couleur nouvelle.
   Les cartes à photo gardent leur voile sombre et leur texte clair (.sombre-local).
   ========================================================================== */
:root {
  --il-brume: #DDEAF5; --il-brume-clair: #EEF4FA; --il-brume-encre: #3B5578;
  --il-titre-jour: #0B2447; --il-gold-jour: #A67C4E; --il-gold-deep: #A9825C; --il-papier: #FBF7EE;
  --il-azur-deep: #3C6FB8;
}
/* `.sec.fond-x:not(.bg-night)` : même poids que les fondus de styles.css
   (`.page-head + .sec:not(.bg-night)`…), posés plus tôt — le fond choisi gagne. */
.fond-nuit, .sec.fond-nuit:not(.bg-night) { background: var(--il-bg-deep); }
.fond-ocean, .sec.fond-ocean:not(.bg-night) { background: linear-gradient(180deg, var(--il-bg-deep) 0%, #082448 45%, var(--il-bg-surface) 100%); }
.fond-brume, .sec.fond-brume:not(.bg-night) { background: linear-gradient(180deg, var(--il-brume-clair) 0%, var(--il-brume) 100%); }
.fond-aube, .sec.fond-aube:not(.bg-night) { background: linear-gradient(160deg, var(--il-ivory) 0%, #F4F1EA 38%, var(--il-brume-clair) 72%, var(--il-brume) 100%); }
.fond-ivoire, .sec.fond-ivoire:not(.bg-night) { background: radial-gradient(ellipse 70% 50% at 80% 0%, rgba(246, 223, 179, .42), transparent 70%), radial-gradient(ellipse 60% 40% at 8% 100%, rgba(185, 211, 244, .3), transparent 70%), linear-gradient(180deg, var(--il-ivory) 0%, #F6F2EA 60%, var(--il-brume-clair) 100%); }
.fond-nuit, .fond-ocean, .fond-brume, .fond-aube, .fond-ivoire { position: relative; isolation: isolate; }

/* une page rythmée prend le fond de page de l'accueil : plus de second bleu entre deux sections */
body:has(main .fond-ivoire, main .fond-aube, main .fond-brume) { background: var(--il-bg-deep); }
/* sections sombres : cartes « bleu océan » de l'accueil */
.fond-nuit, .fond-ocean { --night-700: var(--il-bg-surface); --night-800: #0B2646; }
/* nappe de lumière douce, comme l'accueil (peinte une fois, jamais animée) */
.fond-nuit.nappe::before, .fond-ocean.nappe::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 880px; height: 620px; left: -320px; top: -220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 59, 115, .7), rgba(11, 59, 115, 0)); }

/* ---------- la variante claire ---------- */
.clair {
  --warm-100: var(--il-titre-jour);
  --warm-200: #3B475A;
  --warm-mut: #56606F;
  --warm-faint: rgba(59, 71, 90, .6);
  --gold-300: #8A5A12; --gold-400: #8A5A12; --gold-500: var(--il-gold-jour);
  --gold-line: rgba(166, 124, 78, .34); --gold-glow: rgba(246, 223, 179, .45);
  --night-700: #FFFFFF; --night-800: var(--il-papier); --night-600: #FFFFFF;
  --il-text-secondary: #3B475A; --il-text-muted: #56606F;
  --state-400: var(--il-brume-encre);
  color: #3B475A;
}
.clair h1, .clair h2, .clair .h-serif, .clair .sec-head h2, .clair .cta-strip h2 { color: var(--il-titre-jour); }
.clair h3, .clair [data-nv="4"], .clair [data-nv="3"] { color: var(--il-titre-jour); }
.clair .gold-text { background: linear-gradient(100deg, var(--il-gold-deep), var(--il-gold-jour) 60%, #8A5A12); -webkit-background-clip: text; background-clip: text; color: transparent; }
.clair .eyebrow { color: var(--il-gold-jour); }
.clair .lead, .clair p { color: #3B475A; }
.clair a:not(.btn):not(.product):not(.famille):not(.eco-card) { color: var(--il-titre-jour); }
.clair .btn-ghost { color: var(--il-titre-jour); background: transparent; box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .55); backdrop-filter: none; -webkit-backdrop-filter: none; }
.clair .btn-ghost:hover { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(60, 111, 184, .45), 0 10px 24px -16px rgba(60, 111, 184, .45); }
.clair .btn-gold { box-shadow: 0 12px 26px -14px rgba(166, 124, 78, .75), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(166, 124, 78, .35); }
.clair .hr-gold { background: linear-gradient(90deg, transparent, rgba(166, 124, 78, .45), transparent); }

/* cartes claires : blanc papier, filet discret, ombre douce (comme .carte.papier de l'accueil) */
.clair .cbenefit, .clair .hstep, .clair .tool, .clair .opp-stat, .clair .pd-who-card, .clair .pd-offer,
.clair .product, .clair .famille, .clair .xs-card, .clair .mb-card, .clair .bundle-band, .clair .pd-contact-card,
.clair .famille-carte, .clair .cred-logos .lg {
  background: linear-gradient(170deg, #FFFFFF 0%, #FFFCF6 60%, var(--il-papier) 100%);
  border-color: rgba(166, 124, 78, .24);
  box-shadow: 0 22px 44px -30px rgba(11, 36, 71, .42), inset 0 0 0 1px rgba(166, 124, 78, .22);
}
@media (hover: hover) {
  .clair .product:hover, .clair .famille:hover, .clair .cbenefit:hover, .clair .xs-card:hover {
    box-shadow: 0 30px 54px -28px rgba(11, 36, 71, .5), inset 0 0 0 1px rgba(166, 124, 78, .5);
  }
}
.clair .product h3, .clair .product [data-nv="4"], .clair .famille-nom, .clair .famille-ligne h2,
.clair .hstep h3, .clair .hstep [data-nv="4"], .clair .cbenefit h3, .clair .cbenefit [data-nv="4"] { color: var(--il-titre-jour); }
.clair .famille-txt, .clair .famille-ligne p, .clair .shop-count { color: #56606F; }
.clair .famille-liens a { color: #8A5A12; }
.clair .famille-liens a:hover { color: var(--il-titre-jour); }
.clair .shop-grid .pimg, .clair .famille-img { background: radial-gradient(circle at 50% 42%, #FFFFFF, #EFE6D6 78%); }
.clair .famille-img--club { background: radial-gradient(circle at 50% 40%, #16395F, #071C38 72%); }
.clair .product .price, .clair .pdp-price .now, .clair .mb-price .v, .clair .sub-price-tag .pm, .clair .pd-offer-amount b, .clair .bundle-price .now { color: #8A5A12; }
.clair .product .pbadge { color: #8A5A12; border-color: rgba(166, 124, 78, .45); background: rgba(255, 255, 255, .86); }
.clair .price-lock { color: var(--il-brume-encre); }
.clair .add-btn, .clair .unlock-btn, .clair .pfoot .unlock-btn, .clair .xs-add, .clair .xs-unlock {
  color: var(--il-titre-jour); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .5);
}
.clair .chip { color: #3B475A; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .38); }
.clair .chip:hover { color: var(--il-titre-jour); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .7); }
.clair .chip.active { color: var(--il-bg-deep); }
/* icônes et numéros : or soutenu */
.clair .ci, .clair .ti2, .clair .mi, .clair .fi, .clair .ri { color: #8A5A12; border-color: rgba(166, 124, 78, .42); background: radial-gradient(circle at 35% 30%, #FFFFFF, #F6E7CC); }
.clair .hn, .clair .sn, .clair .kh .n { color: var(--il-gold-jour); }
/* accordéons, FAQ, listes */
.clair .faq-q, .clair .spec-q, .clair .pd-faq summary { color: var(--il-titre-jour); }
.clair .faq-q:hover, .clair .spec-q:hover { color: #8A5A12; }
.clair .faq-a .inner, .clair .spec-a .inner, .clair .pd-faq p { color: #3B475A; }
.clair .faq-item, .clair .spec-item, .clair .pd-faq details, .clair .measure-list .ml, .clair .step { border-color: rgba(166, 124, 78, .26) !important; }
.clair .measure-list .ml:first-child, .clair .step:first-child, .clair .pd-faq { border-top-color: rgba(166, 124, 78, .26); }
/* champs de formulaire */
.clair input:not([type="checkbox"]):not([type="radio"]), .clair select, .clair textarea {
  background: #FFFFFF; color: var(--il-titre-jour); border-color: rgba(11, 36, 71, .22); box-shadow: inset 0 0 0 1px rgba(11, 36, 71, .14);
}
.clair input::placeholder, .clair textarea::placeholder { color: #6A7381; }
.clair label { color: #3B475A; }
/* emblème des photos manquantes : version jour */
.clair .sans-photo { background: radial-gradient(120% 90% at 50% 20%, rgba(246, 223, 179, .55), rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #FFFFFF, #F1E8D8) !important; }
.clair .sans-photo::after { color: var(--il-gold-jour); }

/* cartes à photo, bandeaux à voile : elles restent « de nuit » dans une section claire */
.clair .eco-card, .clair .profile, .clair .tech-feature, .clair .sombre-local, .clair .famille-img--club, .clair .club-mini {
  --warm-100: #F8F2E8; --warm-200: #BCC3CF; --warm-mut: #A7B0BE; --gold-400: var(--il-gold-light);
  --il-text-secondary: #BCC3CF; --il-text-muted: #98A2B3;
}
.clair .eco-card h3, .clair .eco-card p, .clair .profile h3, .clair .profile p, .clair .tech-feature .t { color: var(--il-cream); }
.clair .eco-card .k, .clair .eco-card .go, .clair .tech-feature .k { color: var(--il-gold-light); }
.clair .famille-img--club .club-nom { color: var(--il-champagne); }

/* transitions : un filet doré à la jonction d'une section claire et d'une sombre */
.fond-ivoire::after, .fond-aube::after, .fond-brume::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(206, 164, 129, .55) 30%, rgba(246, 223, 179, .7) 50%, rgba(206, 164, 129, .55) 70%, transparent);
}
/* courbes de transition (balisage de l'accueil), filet dessiné d'emblée */
.courbe { position: absolute; left: 0; width: 100%; height: 64px; pointer-events: none; z-index: 2; display: block; }
.courbe.haut { top: -1px; }
.courbe .filet { fill: none; stroke: var(--il-gold); stroke-opacity: .55; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
@media (max-width: 767px) { .courbe { height: 36px; } }
.sec:has(> .courbe.haut) { padding-top: calc(clamp(80px, 10vw, 140px) + 24px); }
.courbe.bas { bottom: -1px; }
.sec:has(> .courbe.bas) { padding-bottom: calc(clamp(80px, 10vw, 140px) + 24px); }
/* la courbe porte déjà le filet champagne : pas de second filet droit au-dessus */
.sec:has(> .courbe.haut)::after { display: none; }
@media (prefers-reduced-motion: reduce) { .courbe .filet { animation: none !important; stroke-dashoffset: 0 !important; } }

/* Univers (8 pages) : beige chaleureux pour la demande, carte du formulaire en papier */
.fond-aube.chaud, .sec.fond-aube.chaud:not(.bg-night) { background: radial-gradient(ellipse 70% 55% at 85% 0%, rgba(246, 223, 179, .5), transparent 70%), linear-gradient(170deg, var(--il-ivory) 0%, #F6EFE3 45%, #EFE4D2 100%); }
.clair .qual { background: rgba(255, 255, 255, .72); box-shadow: 0 30px 60px -40px rgba(102, 72, 38, .45); }
.clair .qual-form input, .clair .qual-form select, .clair .qual-form textarea { background: #FFFFFF; color: var(--il-titre-jour); border-color: rgba(166, 124, 78, .32); }
.clair .qual-form input::placeholder, .clair .qual-form textarea::placeholder { color: #7A8494; }
.clair .crm-badge { color: var(--il-titre-jour); background: rgba(255, 255, 255, .7); border-color: rgba(166, 124, 78, .34); }
.clair .lock-note { background: rgba(255, 255, 255, .7); border-color: rgba(166, 124, 78, .3); }
.clair .symp, .clair .lprod { box-shadow: 0 18px 40px -30px rgba(59, 85, 120, .45); }

/* MyClub : les cartes « phare » et « Et ça grandit » (anciens styles en ligne) */
.cbenefit[data-phare] { border-color: var(--gold-500); background: radial-gradient(130% 130% at 85% 0%, var(--gold-glow), transparent 55%), var(--night-700); }
.cbenefit[data-phare] .ci { color: var(--gold-300); }
.cbenefit[data-suite] { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: none !important; border-style: dashed; box-shadow: none !important; border-color: var(--gold-line); }
.cbenefit[data-suite] h3 { font-family: var(--serif); font-size: 20px; }
.clair .cbenefit[data-phare] { background: radial-gradient(130% 130% at 85% 0%, rgba(246, 223, 179, .7), transparent 55%), linear-gradient(170deg, #FFFFFF, var(--il-papier)); box-shadow: 0 22px 44px -30px rgba(11, 36, 71, .42), inset 0 0 0 1px rgba(166, 124, 78, .55); }
.bande .shop-grid { margin-top: 0; }
.fond-nuit.nappe, .fond-ocean.nappe { overflow: clip; }
.familles.fond-ivoire { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
/* MyClub, seul dans sa bande : une carte horizontale plutôt qu'une carte isolée dans une grille vide */
@media (min-width: 760px) {
  .bande[data-famille-tete="myclub"] .shop-grid { grid-template-columns: 1fr; }
  .bande[data-famille-tete="myclub"] .product-club { flex-direction: row; max-width: 980px; }
  .bande[data-famille-tete="myclub"] .product-club .pimg { flex: 0 0 42%; aspect-ratio: auto; min-height: 300px; }
  .bande[data-famille-tete="myclub"] .product-club .pbody { padding: 32px 36px; }
}
/* MyClub : « L'accompagnement » tenait à peine à 390 px (le mot dépassait) */
@media (max-width: 767px) { .club-grid h1 { font-size: clamp(29px, 9.2vw, 44px); } }
/* fiche Beosigner : « accompagnement » à 320 px (taille posée en ligne, d'où !important) */
@media (max-width: 400px) { #membership h2.h-serif { font-size: 27px !important; } }
/* /partenaires : cartes qualitatives (les chiffres non sourcés ont été retirés) */
.opp-stat h3.t { font: 500 clamp(19px, 1.7vw, 22px)/1.2 var(--serif); color: var(--il-champagne); margin: 0 0 10px; }
.clair .opp-stat h3.t { color: var(--il-titre-jour); }
.clair .opp-stat .l { color: #3B475A; font-size: 14px; }

/* /qui-sommes-nous : deux personnes, deux grandes cartes (photo réelle + texte) */
.duo { display: grid; gap: 22px; margin-top: 44px; }
@media (min-width: 820px) { .duo { grid-template-columns: 1fr 1fr; gap: 28px; } }
.duo-carte { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 20px; overflow: hidden;
  background: linear-gradient(170deg, #FFFFFF 0%, #FFFCF6 60%, var(--il-papier) 100%);
  box-shadow: 0 26px 50px -30px rgba(11, 36, 71, .45), inset 0 0 0 1px rgba(166, 124, 78, .24); }
@media (min-width: 560px) { .duo-carte { grid-template-columns: 44% minmax(0, 1fr); } }
.duo-portrait { position: relative; aspect-ratio: 4 / 5; background: #EFE6D6; }
.duo-portrait .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo-corps { padding: clamp(22px, 3vw, 34px); align-self: center; }
.duo-nom { margin: 0; font: 500 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); color: var(--il-titre-jour); }
.duo-corps p:last-child { margin: 0; font-size: 15.5px; line-height: 1.65; }
/* univers : la carte « Atelier » est retirée (ateliers abandonnés, 29/10/2026) — deux cartes restent */
@media (min-width: 881px) { .soft-routes:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, 1fr); } }
/* univers, 701–860 px : le visuel rond n'avait plus de largeur (2 × 2 px) une fois la grille en une colonne */
@media (min-width: 701px) and (max-width: 860px) { .lhero-orb { width: min(340px, 100%); margin: 36px auto 0; } }
/* Concentration et Joie, sous 700 px : un petit visuel rond APRÈS les actions (variante mobile, 29/10/2026).
   Les boutons restent à leur place ; l'image (WebP 480 px, ~20 Ko) se charge en différé. Les autres univers,
   encore sans photo, gardent leur visuel masqué. */
@media (max-width: 700px) { .lhero-orb.lhero-orb--mobile { display: block; width: min(46vw, 176px); margin: 30px auto 0; } }
/* une courbe en tête d'une section qui n'est pas une .sec (Boutique : familles) */
.familles:has(> .courbe.haut) { padding-top: calc(clamp(28px, 4vw, 48px) + 64px); }
@media (max-width: 767px) { .familles:has(> .courbe.haut) { padding-top: calc(clamp(28px, 4vw, 48px) + 36px); } }
/* /praticiens — visite guidée (venue de l'accueil) : le lien vers la démonstration interactive se voit */
.pd-visite .sec-head .lead a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pd-visite .vp { margin-top: clamp(28px, 4vw, 44px); }
/* Qui sommes-nous (30/10/2026) : rôle sous le nom, deux prestations, outils, notes */
.duo-role { margin: 6px 0 16px !important; font: 600 11px/1.4 var(--sans, "Roboto Condensed", sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--il-gold-jour, #A67C4E); }
.duo-corps p + p { margin-top: 12px; }
.app-benefits--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
.app-benefits--deux .benefit { display: flex; flex-direction: column; gap: 4px; }
.app-benefits--deux .benefit p { flex: 1; margin-bottom: 18px; }
.app-benefits--deux .benefit .btn { align-self: flex-start; }
.soins-note, .contact-note { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 13.5px; color: var(--warm-mut); }
.outils-routes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 760px) { .app-benefits--deux { grid-template-columns: minmax(0, 1fr); } }
.app-benefits--deux .benefit .btn { white-space: normal; text-align: left; line-height: 1.3; height: auto; min-height: 46px; padding-top: 11px; padding-bottom: 11px; max-width: 100%; }