/* Leker — feuille commune du nouveau site (générée par build.py : ne pas modifier à la main).
   1. le site d'origine ; 2. la couche commune de l'accueil animé ; 3. l'accueil ; 4. les ouvertures des pages. */
/* ============================================================
   Leker — site HTML autonome
   Identité validée le 16.09.2026 (proposition « C7 + C1 ») :
   Poppins, beige #EDE2D1, rouge #F41200, encre cacao, photos de la maison.
   ============================================================ */

/* Poppins servie depuis assets/ : le site ne fait aucun appel a un service exterieur.
   Fichiers repris de Google Fonts le 20.09.2026 (Poppins v24, licence Open Font),
   latin et latin-ext ; le navigateur ne telecharge que le jeu dont il a besoin. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/poppins-400-ext.woff2?v=90926c36) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/poppins-400.woff2?v=9212f6f9) 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: Poppins; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/poppins-500-ext.woff2?v=1f24684c) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/poppins-500.woff2?v=a09f2fcc) 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: Poppins; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/poppins-600-ext.woff2?v=a575b6d9) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/poppins-600.woff2?v=72993ddd) 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: Poppins; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/poppins-700-ext.woff2?v=367d2aa0) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/poppins-700.woff2?v=25b0e113) 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 {
  --papier: #FFFFFF;          /* sections claires */
  --beige: #EDE2D1;           /* le beige du site actuel */
  --beige-2: #E4D6C1;         /* filets sur beige */
  --encre: #241512;           /* brun cacao très sombre : texte */
  --encre-2: #6E5D52;         /* texte secondaire */
  --filet: #E3DACE;
  --rouge: #F41200;           /* rouge Leker : surfaces et accents */
  --rouge-texte: #B50E00;     /* rouge lisible pour le texte sur fond clair */
  --lait: #C98B57;            /* chocolat au lait, accent des titres sombres */
  --or: #C48D5A;              /* accent des maquettes PDF (18.09.2026) : bandeau, boutons, titres */
  --creme: #F6EFE4;           /* texte sur fond sombre */
  --sombre-h: #1E0201;        /* champ rouge-noir, relevé sur la photo du Flocon */
  --sombre-m: #3A0203;
  --sombre-b: #2C0202;
  --pied: #1C110E;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #1C1714; --beige: #251E18; --beige-2: #362C23; --encre: #EFE7DC; --encre-2: #B4A698;
    --filet: #352C24; --rouge-texte: #FF7A66; --creme: #F6EFE4; --pied: #120C0A; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #1C1714; --beige: #251E18; --beige-2: #362C23; --encre: #EFE7DC; --encre-2: #B4A698;
  --filet: #352C24; --rouge-texte: #FF7A66; --creme: #F6EFE4; --pied: #120C0A; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papier); color: var(--encre);
  font: 16px/1.6 Poppins, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
[id] { scroll-margin-top: 24px; }
.cadre { width: min(1360px, 100%); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.evite { position: absolute; left: 8px; top: 8px; z-index: 50; padding: 10px 16px; background: var(--papier); color: var(--encre);
  border-radius: 2px; transform: translateY(-200%); transition: transform 150ms ease; }
.evite:focus { transform: none; }

/* ===== Petits rôles ===== */
.sur-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rouge-texte); }
.sur-titre::before { content: ""; width: 8px; height: 8px; background: var(--rouge); flex: none; }
h1, h2, h3 { margin: 0; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 600; line-height: 1.12;
  letter-spacing: -0.015em; text-wrap: balance; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0; }
.chapeau { color: var(--encre-2); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.petit { font-size: 0.875rem; color: var(--encre-2); }
.chiffres { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lien { color: var(--encre); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rouge);
  text-decoration-thickness: 2px; text-underline-offset: 0.28em; transition: color 150ms ease; }
.lien:hover { color: var(--rouge-texte); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 30px;
  border: 1px solid transparent; border-radius: 2px; font: 600 15px/1.2 Poppins, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.02em; text-decoration: none; cursor: pointer; text-align: center;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
/* Maquettes PDF (18.09.2026) : le bouton principal est doré, sur fond clair comme sur fond sombre. */
.btn-or, .btn-encre, .btn-blanc { background: var(--or); color: #FFFFFF; }
.btn-or:hover, .btn-encre:hover, .btn-blanc:hover { background: #241512; color: #FFFFFF; }
.btn-contour { border-color: var(--encre); color: var(--encre); background: none; }
.btn-contour:hover { background: var(--encre); color: var(--papier); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ===== Bandeau de tête des pages intérieures ===== */
.page-tete { position: relative; overflow: clip; color: var(--creme);
  background: linear-gradient(180deg, var(--sombre-h), var(--sombre-m) 62%, var(--sombre-b)); }
.page-tete .cadre { position: relative; z-index: 1; padding-top: clamp(56px, 8vh, 96px); padding-bottom: clamp(48px, 7vh, 80px); }
.page-tete .sur-titre { color: var(--creme); opacity: 0.85; }
.page-tete .sur-titre::before { background: var(--rouge); }
.page-tete h1 { font-size: clamp(2.1rem, 1.1rem + 3.1vw, 3.7rem); font-weight: 600; line-height: 1.06;
  letter-spacing: -0.02em; text-wrap: balance; color: #FFFFFF; max-width: 22ch; }
/* La maison : la crête du Mont Blanc en chocolat noir, posée à droite (maquette PDF) */
.tete-maison { background: linear-gradient(180deg, #1A0101, #4A0203 62%, #2C0202); }
.tete-maison .cadre { min-height: clamp(440px, 41vw, 620px); display: grid; align-content: center; }
.tete-maison .chapeau { max-width: 27rem; }
.tete-crete { position: absolute; right: -7%; bottom: 0; width: 66%; max-width: 1180px; height: auto; pointer-events: none; }
.page-tete h1 .lait { color: var(--lait); }
.page-tete .chapeau { margin-top: 20px; color: var(--creme); opacity: 0.88; max-width: 34rem; font-size: 1.0625rem; }
.page-tete .actions { margin-top: 30px; }
.page-tete .lien-clair { color: var(--creme); font-size: 15px; font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.page-tete .lien-clair:hover { color: #FFFFFF; }
.fil { margin: 0 0 18px; font-size: 0.8125rem; color: var(--creme); opacity: 0.65; }
.fil a { color: inherit; text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* ===== Ouverture de l'accueil : le Flocon sur rouge, en plein cadre (maquette PDF, 18.09.2026) ===== */
.haut { position: relative; overflow: clip; color: var(--creme); background: #110101; }
.haut-fond { position: absolute; inset: 0; z-index: 0; display: block; }
.haut-fond img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.haut .cadre { position: relative; z-index: 1; display: grid; align-content: center;
  min-height: clamp(460px, 39.4vw, 760px); padding-top: 48px; padding-bottom: 48px; }
.haut-texte { max-width: 34rem; animation: lever 700ms cubic-bezier(0.33, 0, 0.2, 1) both; }
.haut h1 { font-size: clamp(2rem, 1rem + 2.9vw, 3.7rem); font-weight: 600; line-height: 1.06;
  letter-spacing: -0.02em; text-wrap: balance; color: #FFFFFF; max-width: 15ch; }
.haut h1 .lait { color: var(--or); }
.haut-chapeau { margin: 18px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--creme); opacity: 0.92; max-width: 34rem; }
.haut-actions { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.haut .lien-clair { color: var(--creme); font-size: 15px; font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.haut .lien-clair:hover { color: #FFFFFF; }
@keyframes lever { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .haut-texte { animation: none; } }
.statique .haut-texte { animation: none; }

/* ===== Sections ===== */
.section { padding-block: clamp(60px, 7.5vw, 104px); }
.s-blanche { background: var(--papier); }
.s-beige { background: var(--beige); }
.tete-section { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 64px;
  align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.tete-section .chapeau { max-width: 34rem; justify-self: end; text-align: right; }
/* En-tête de section sur une colonne : titre puis chapeau, à gauche (maquettes PDF) */
.tete-section.tete-simple { grid-template-columns: minmax(0, 1fr); }
.tete-simple .chapeau { margin-top: 16px; max-width: 62rem; justify-self: start; text-align: left; }
/* Filet de séparation entre deux sections blanches */
.s-trait { padding-top: 0; }
.s-trait > .cadre::before { content: ""; display: block; grid-column: 1 / -1; border-top: 1px solid var(--encre); margin-bottom: clamp(48px, 6vw, 88px); }
.s-trait > .cadre.duo::before { margin-bottom: 0; }

/* Tuiles de créations */
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.tuile { display: flex; flex-direction: column; min-width: 0; }
.tuile .tuile-image { display: block; overflow: hidden; background: #FFFFFF; border: 1px solid var(--filet); }
.tuile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 500ms cubic-bezier(0.2, 0, 0.2, 1); }
.tuile a.tuile-image:hover img { transform: scale(1.025); }
.t-suisse img { object-position: 50% 46%; }
/* Tuiles d'étuis : carte blanche carrée, l'étui posé au centre (accueil, maquette PDF) */
.tuiles-etuis .tuile-image { aspect-ratio: 1; display: grid; place-items: center; padding: 12%; border-color: #CFCFCF; }
.tuiles-etuis .tuile img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.tuile h3 { margin: 20px 0 0; }
.tuile .idee { margin: 6px 0 0; color: var(--encre-2); font-size: 0.9375rem; line-height: 1.55; max-width: 30rem; }
.tuile .lien { margin-top: 14px; align-self: flex-start; font-size: 0.9375rem; }
.credit { margin: clamp(36px, 5vw, 56px) 0 0; padding-top: 20px; border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  color: var(--encre-2); font-size: 0.875rem; }

/* La forme d'abord : le trait devient chocolat (curseur) */
.scene { --coupe: 50%; width: min(620px, 100%); margin-inline: auto; }
.scene-etiquettes { position: relative; height: 26px; font-size: 13px; font-weight: 500; color: var(--encre-2); }
.etiquette { position: absolute; top: 0; white-space: nowrap; }
.et-trait { right: clamp(0px, calc(100% - var(--coupe) + 12px), calc(100% - 4.2em)); }
.et-choc { left: clamp(0px, calc(var(--coupe) + 12px), calc(100% - 5.8em)); }
.scene-boite { position: relative; aspect-ratio: 211.72 / 213.83; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.trace { position: absolute; inset: 0; color: var(--encre); }
.trace img { display: block; width: 100%; height: 100%; max-width: none; }
.matiere { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--coupe)); }
.matiere img { position: absolute; left: -0.983%; top: -0.917%; width: 101.71%; height: 101.776%; max-width: none; }
.poignee-ligne { position: relative; height: 56px; touch-action: pan-y; }
.tige { position: absolute; top: 0; left: var(--coupe); width: 1px; height: 16px; transform: translateX(-0.5px);
  background: color-mix(in srgb, var(--encre) 40%, transparent); }
.disque { position: absolute; top: 16px; left: var(--coupe); width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
  background: var(--papier); border: 1px solid var(--encre); color: var(--encre); display: grid; place-items: center;
  cursor: ew-resize; transition: box-shadow 150ms ease; }
.disque:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.disque svg { width: 22px; height: 22px; }
.scene-legende { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 10px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--encre-2); }
.scene-legende .lien { font-size: 13px; }

/* Nuancier des éditions */
.nuancier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px);
  margin: 0; padding: 0; list-style: none; }
.nuancier img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--beige-2); }
.s-blanche .nuancier img { border-color: var(--filet); }
.nuancier .ed { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.nuancier .ed-nom { font-weight: 600; font-size: 1.0625rem; }
.nuancier .ed-fait { color: var(--encre-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.nuancier.nuancier-coffrets img { border: 0; background: none; object-fit: contain; }

/* Rituel (Offrir) : trois photos à hauteur naturelle, calées en bas, légendes alignées */
.rituel .tuile { justify-content: flex-end; }
.rituel .tuile img { aspect-ratio: auto; object-fit: contain; }

/* Choix création + chocolat (Offrir) */
.choix-groupe { margin: 26px 0 0; padding: 0; border: 0; }
.choix-groupe legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre-2); }
.choix-groupe .opt { display: inline-flex; align-items: center; gap: 8px; margin: 0 22px 0 0; min-height: 44px; font-size: 0.9825rem; font-weight: 500; cursor: pointer; }
.choix-groupe input[type="radio"] { appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--encre-2); border-radius: 50%; background: var(--papier); cursor: pointer; display: grid; place-items: center; }
.choix-groupe input[type="radio"]::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); transform: scale(0); transition: transform 120ms ease; }
.choix-groupe input[type="radio"]:checked { border-color: var(--encre); }
.choix-groupe input[type="radio"]:checked::after { transform: scale(1); }
.choix-groupe input[type="radio"]:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }

/* Blocs en deux colonnes (texte + image) */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.duo > img, .duo > figure img { width: 100%; }
/* Les images hautes ne dépassent pas l'écran : on plafonne leur hauteur. */
.duo > img, .duo > figure img { width: auto; max-width: 100%; max-height: 540px; display: block; margin-inline: auto; }
.duo figure { margin: 0; }
.duo .legende { margin-top: 10px; font-size: 0.8125rem; color: var(--encre-2); }
.duo-texte .chapeau { margin-top: 16px; max-width: 30rem; }
.duo-texte .actions { margin-top: 30px; }
.duo-texte .h2 + p { margin-top: 16px; }

/* Encadré honnête */
.honnete { margin: 26px 0 0; padding: 18px 22px; border-left: 3px solid var(--rouge); background: var(--beige); max-width: 30rem; }
.s-beige .honnete { background: var(--papier); }
.honnete p { font-size: 0.9375rem; line-height: 1.55; color: var(--encre-2); }
.honnete p strong { color: var(--encre); font-weight: 600; }

/* Profils professionnels (accueil) */
.profils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.profil { border-top: 2px solid var(--encre); padding-top: 18px; min-width: 0; }
.profil h3 { font-size: 1.0625rem; }
.profil p { margin: 8px 0 0; color: var(--encre-2); font-size: 0.9075rem; line-height: 1.55; }
.profil .lien { display: inline-block; margin-top: 14px; font-size: 0.9075rem; }

/* Conditions (listes dt/dd) */
.conditions { margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--filet); }
.s-beige .conditions { border-color: var(--beige-2); }
.conditions > div { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 8px 24px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.s-beige .conditions > div { border-color: var(--beige-2); }
.conditions.deux > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.conditions dt { font-weight: 600; font-size: 0.9825rem; }
.conditions dd { margin: 0; color: var(--encre-2); font-size: 0.9375rem; }
.note { margin-top: 16px; font-size: 0.875rem; color: var(--encre-2); }

/* Étapes de la méthode */
.etapes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px); counter-reset: etape; }
.etape { min-width: 0; }
.etape-media { aspect-ratio: 1; display: grid; place-items: center; background: var(--papier); border: 1px solid var(--filet); padding: 12px; }
.s-beige .etape-media { border-color: var(--beige-2); }
.etape-media img { width: 100%; height: 100%; object-fit: contain; }
.etape-media svg { width: 88%; height: 88%; color: var(--encre); }
.etape-media svg path { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.etape-mot { padding: 16px; text-align: center; }
.etape-mot p { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 2.1; color: var(--encre-2); }
.etape h3 { margin-top: 14px; font-size: 1rem; }
.etape h3::before { counter-increment: etape; content: counter(etape) " · "; color: var(--rouge-texte); font-variant-numeric: tabular-nums; }
.etape p { margin-top: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--encre-2); }

/* ===== La maison, d'après les maquettes PDF (18.09.2026) ===== */
/* « La forme est l'affaire de la maison » : titre + rendu à gauche, les deux blocs à droite */
.metier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.metier-gauche img { width: min(100%, 520px); height: auto; margin-top: clamp(20px, 3vw, 40px); }
.metier-droite { display: grid; gap: clamp(28px, 3vw, 44px); padding-top: 6px; }
.metier-droite h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; }
.metier-droite p { margin-top: 12px; max-width: 40ch; color: var(--encre-2); }

/* Méthode en six photos carrées */
.etapes.etapes-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px) clamp(20px, 3vw, 48px); }
.etapes-photos .etape img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.etapes-photos .etape h3 { margin-top: 16px; font-size: 1.0625rem; }
.etapes-photos .etape h3::before { content: counter(etape) ". "; color: var(--rouge); }
.etapes-photos .etape-sous { margin-top: 4px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre); }
.etapes-photos .etape p { font-size: 0.9375rem; }

/* Le dessin de dépôt seul, à côté d'un texte */
.trace-seule { position: static; width: min(440px, 100%); margin-inline: auto; aspect-ratio: 211.72 / 213.83; }
.suisse-icone { display: inline-block; width: 1.55em; height: auto; vertical-align: -0.12em; margin-left: 0.35em; }

/* Ce qui est protégé : la marque et les trois étuis en quatre cartes */
.proteges { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.proteges li { aspect-ratio: 1; display: grid; place-items: center; padding: 13%; background: #FFFFFF; border: 1px solid #CFCFCF; }
.proteges img { width: 100%; height: 100%; object-fit: contain; }

/* Une jeune maison : Genève et le Jet d'eau en plein cadre, texte sur un voile blanc */
.jeune { position: relative; overflow: clip; display: grid; align-items: center; min-height: clamp(520px, 52vw, 780px); color: #241512; }
.jeune-fond { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.jeune::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.86) 30%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0) 60%); }
.jeune .cadre { position: relative; z-index: 2; }
.jeune-texte { max-width: 30rem; }
.jeune-texte > p { color: #3A2B25; }
.jeune h2 { color: #241512; }
.badge-or { display: grid; place-items: center; width: 66px; height: 66px; margin: 34px auto 0; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14); }
.badge-or img { width: 50px; height: 50px; }

/* Jalons du parcours (Sur mesure) */
.jalons { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px); counter-reset: jalon; }
.jalons li { border-top: 2px solid var(--encre); padding-top: 14px; min-width: 0; }
.jalons strong { display: block; font-size: 1rem; font-weight: 600; }
.jalons strong::before { counter-increment: jalon; content: counter(jalon) " · "; color: var(--rouge-texte); }
.jalons p { margin-top: 6px; font-size: 0.875rem; line-height: 1.5; color: var(--encre-2); }
.jalons.jalons-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jalons.jalons-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1060px) { .jalons, .jalons.jalons-4, .jalons.jalons-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .jalons, .jalons.jalons-4, .jalons.jalons-6 { grid-template-columns: minmax(0, 1fr); } }

/* Grande image posée seule — jamais plus large que 900 px, centrée */
.planche-seule { margin: 0; max-width: 900px; margin-inline: auto; }
.planche-seule img { width: 100%; }

/* Image cinéma, bord à bord de l'écran */
.pleine-image { margin: clamp(8px, 1.5vw, 20px) 0 0; width: 100vw; margin-left: calc(50% - 50vw); }
.pleine-image img { display: block; width: 100%; height: auto; aspect-ratio: 2.35 / 1; object-fit: cover; }
.pleine-image figcaption { max-width: 1360px; margin: 12px auto 0; padding-inline: clamp(20px, 4vw, 56px);
  font-size: 0.8125rem; color: var(--encre-2); }
@media (max-width: 760px) {
  .pleine-image img { aspect-ratio: 16 / 10; object-position: 32% 50%; }
}

/* Cotes en grande typographie */
.cotes-typo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px);
  margin: clamp(32px, 5vw, 56px) 0 0; }
.cote-typo { border-top: 1px solid var(--filet); padding-top: 14px; }
.cote-typo dt { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre-2); }
.cote-typo dd { margin: 8px 0 0; font-size: clamp(2.1rem, 1.1rem + 3vw, 3.6rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1; color: var(--encre); }
.cote-typo dd span { font-size: 0.44em; font-weight: 500; letter-spacing: 0; color: var(--encre-2); margin-left: 5px; }
.planche-seule figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--encre-2); }

/* Étagère de coffrets détourés */
.etagere { margin: 32px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(20px, 4vw, 48px); }
.etagere li { flex: 1 1 200px; max-width: 300px; }
.etagere img { width: 100%; }

/* Gamme : une création, ses trois chocolats */
.gamme { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 48px);
  align-items: center; padding: 30px 0; border-top: 1px solid var(--filet); }
.s-beige .gamme { border-color: var(--beige-2); }
.gamme:last-of-type { border-bottom: 1px solid var(--filet); }
.s-beige .gamme:last-of-type { border-color: var(--beige-2); }
.gamme h3 a { text-decoration: none; }
.gamme h3 a:hover { color: var(--rouge-texte); }
.gamme .idee { margin-top: 6px; color: var(--encre-2); font-size: 0.9375rem; }
.gamme .faits { margin-top: 10px; }
.gamme .lien { display: inline-block; margin-top: 12px; font-size: 0.9075rem; }
.gamme-coffrets { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px); align-items: end; }
.gamme-coffrets figure { margin: 0; }
.gamme-coffrets img { width: 100%; height: auto; }
.gamme-coffrets figcaption { margin-top: 8px; font-size: 0.8125rem; color: var(--encre-2); }
@media (max-width: 760px) {
  .gamme { grid-template-columns: minmax(0, 1fr); }
}

/* Questions (FAQ) */
.questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.question { border-top: 1px solid var(--filet); padding-top: 16px; }
.s-beige .question { border-color: var(--beige-2); }
.question h3 { font-size: 1.0625rem; }
.question p { margin-top: 8px; color: var(--encre-2); font-size: 0.9375rem; line-height: 1.6; }
@media (max-width: 760px) { .questions { grid-template-columns: minmax(0, 1fr); } }

/* Texte courant (pages longues, pages légales) */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); margin-top: clamp(40px, 5vw, 56px); }
.prose h3 { margin-top: 28px; }
.prose p, .prose li { margin-top: 14px; color: var(--encre-2); font-size: 0.9825rem; line-height: 1.65; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 22px; }
.prose strong { color: var(--encre); }
.prose .lien { color: var(--encre); }
.a-completer { background: color-mix(in srgb, var(--rouge) 8%, transparent); border: 1px dashed var(--rouge-texte);
  border-radius: 2px; padding: 2px 6px; font-size: 0.875em; color: var(--rouge-texte); white-space: nowrap; }

/* Formulaire (contact) */
.champs { display: grid; gap: 18px; margin-top: 32px; max-width: 40rem; }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 600; font-size: 0.9375rem; }
.champ input, .champ select, .champ textarea { appearance: none; border: 1px solid var(--encre-2); border-radius: 2px;
  background: var(--papier); color: var(--encre); font: 400 16px/1.5 Poppins, "Segoe UI", Arial, sans-serif; padding: 12px 14px; }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--rouge); outline-offset: 1px; }
.champ .indice { font-size: 0.8125rem; color: var(--encre-2); }

/* Films */
.film { margin: clamp(36px, 5vw, 56px) auto 0; max-width: 960px; }
.film video { display: block; width: 100%; height: auto; background: #000; }
.bande-film { background: linear-gradient(180deg, var(--sombre-b), var(--sombre-h)); color: var(--creme); }
.bande-film .cadre { padding-block: clamp(64px, 8vw, 110px); }
.bande-film .sur-titre { color: var(--creme); opacity: 0.85; }
.bande-film h2 { color: #FFFFFF; }
.bande-film .tete-film { max-width: 960px; margin: 0 auto clamp(24px, 3vw, 36px); }
.bande-film .film { margin-top: 0; }
.bande-film .legende { color: var(--creme); opacity: 0.7; }

/* Bande finale « demande » */
.demande { background: linear-gradient(180deg, var(--sombre-m), var(--sombre-h)); color: var(--creme); }
.demande .cadre { display: grid; justify-items: center; text-align: center; padding-block: clamp(72px, 9vw, 120px); }
.demande .sur-titre { color: var(--creme); opacity: 0.8; justify-content: center; }
.demande h2 { color: #FFFFFF; max-width: 22ch; }
.demande p { margin: 18px 0 0; max-width: 36rem; color: var(--creme); opacity: 0.85; }
.demande .btn { margin-top: 32px; }
.demande .demande-liens { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.demande .lien-clair { color: var(--creme); font-size: 0.9375rem; font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.demande .lien-clair:hover { color: #FFFFFF; }
.demande .demande-adresse { margin-top: 22px; font-size: 0.875rem; opacity: 0.6; }

/* ===== Fiches créations ===== */
.legende { margin-top: 10px; font-size: 0.8125rem; color: var(--encre-2); }
.faits { font-size: 0.9375rem; color: var(--encre-2); }
.desir { margin-top: 12px; font-size: 1.0625rem; font-weight: 500; font-style: italic; }
.texte-page p + p { margin-top: 16px; }
.texte-page > p { max-width: 44ch; text-wrap: pretty; color: var(--encre-2); }
.texte-page .h2 + p, .texte-page h2 + p { margin-top: 20px; }

/* Deux portes : offrir / professionnels */
.portes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.portes.portes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); }
.etapes.etapes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1060px) {
  .portes.portes-3 { grid-template-columns: minmax(0, 1fr); }
  .etapes.etapes-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .etapes.etapes-3 { grid-template-columns: minmax(0, 1fr); }
}
.porte h3, .porte .h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.1; }
.porte > p { margin-top: 16px; max-width: 46ch; color: var(--encre-2); }
.porte .actions { margin-top: 30px; }
.porte .petit { margin-top: 22px; }
.parcours { margin-top: 24px; font-size: 0.875rem; color: var(--encre-2); }

/* Liste fléchée d'offres professionnelles */
.liste-fleches { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.s-beige .liste-fleches { border-color: var(--beige-2); }
.liste-fleches a { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) auto; align-items: center;
  column-gap: 20px; min-height: 60px; padding: 12px 0; border-bottom: 1px solid var(--filet); color: var(--encre); text-decoration: none; }
.s-beige .liste-fleches a { border-color: var(--beige-2); }
.lf-nom { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 2px; text-underline-offset: 0.28em; transition: text-decoration-color 150ms ease; }
.lf-fait { font-size: 0.9375rem; line-height: 1.4; color: var(--encre-2); }
.liste-fleches svg { width: 16px; height: 16px; color: var(--encre-2); transition: transform 150ms ease, color 150ms ease; }
.liste-fleches a:hover .lf-nom, .liste-fleches a:focus-visible .lf-nom { text-decoration-color: var(--rouge); }
.liste-fleches a:hover svg { transform: translateX(3px); color: var(--encre); }

/* Deux autres créations, en pied de fiche */
.autres { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.autre-image { display: block; overflow: hidden; border: 1px solid var(--filet); background: #FFFFFF; }
.autre-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 500ms cubic-bezier(0.2, 0, 0.2, 1); }
.autre-image:hover img { transform: scale(1.025); }
.autre h3 { margin-top: 20px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.autre h3 a { text-decoration: none; }
.autre h3 a:hover { color: var(--rouge-texte); }
.autre .idee { margin-top: 8px; color: var(--encre-2); font-size: 0.9825rem; }
.autre .lien { display: inline-block; margin-top: 14px; font-size: 0.9375rem; }

/* La pièce cotée (Le Flocon) */
.piece-cotee { width: min(560px, 100%); margin-inline: auto; padding: 52px 96px 0 0; }
.pc-cotes { position: relative; }
.pc-boite { position: relative; aspect-ratio: 211.72 / 213.83; }
.pc-boite img { position: absolute; left: -0.983%; top: -0.917%; width: 101.71%; height: 101.776%; max-width: none; }
.cote { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--encre-2);
  font-size: 13px; line-height: 16px; pointer-events: none; }
.cote-trait { position: absolute; }
.cote-trait::before, .cote-trait::after { content: ""; position: absolute; }
.cote-mesure { position: relative; white-space: nowrap; color: var(--encre); background: var(--papier); }
.cote-h { left: 0; right: 0; top: -44px; height: 16px; }
.cote-h .cote-trait { left: 0; right: 0; top: 50%; border-top: 1px solid currentColor; }
.cote-h .cote-trait::before, .cote-h .cote-trait::after { top: -6px; height: 11px; border-left: 1px solid currentColor; }
.cote-h .cote-trait::before { left: 0; }
.cote-h .cote-trait::after { right: 0; }
.cote-h .cote-mesure { padding: 0 10px; }
.cote-v, .cote-p { top: 0; bottom: 0; right: -52px; width: 16px; }
.cote-v .cote-trait, .cote-p .cote-trait { top: 0; bottom: 0; left: 50%; border-left: 1px solid currentColor; }
.cote-v .cote-trait::before, .cote-v .cote-trait::after, .cote-p .cote-trait::before, .cote-p .cote-trait::after { left: -6px; width: 11px; border-top: 1px solid currentColor; }
.cote-v .cote-trait::before, .cote-p .cote-trait::before { top: 0; }
.cote-v .cote-trait::after, .cote-p .cote-trait::after { bottom: 0; }
.cote-v .cote-mesure { writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 0; }
.cote-p { justify-content: flex-start; }
.cote-p .cote-mesure { position: absolute; left: calc(100% + 6px); background: none; }
.pc-profil-ligne { position: relative; margin-top: 36px; }
.pc-profil { color: var(--encre); }
.pc-profil svg { display: block; width: 100%; height: auto; overflow: visible; }
.pc-profil path { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.pc-profil .arete { stroke-width: 0.75px; }

/* La crête nommée (Le Massif du Mont Blanc) */
.crete-defile { overflow-x: auto; scrollbar-width: thin; }
.crete-in { min-width: 880px; padding-top: 216px; }
.crete-boite { position: relative; }
.crete-boite > img { width: 100%; }
.sommets { margin: 0; padding: 0; list-style: none; }
.sommets li { position: absolute; left: calc(var(--x) * 100%); top: -216px; bottom: calc((1 - var(--y)) * 100%); width: 1px; }
.sommets .filet { position: absolute; left: 0; top: 206px; bottom: -2px; width: 1px;
  background: color-mix(in srgb, var(--encre) 35%, transparent); }
.sommets .nom { position: absolute; left: 50%; top: 0; height: 200px; display: inline-block;
  writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--encre-2); }
.sommets .culmen .nom { color: var(--encre); font-weight: 600; }
.crete-indice { display: none; }

/* Strates du Mont Blanc : trois étuis empilés */
.strates { margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: clamp(20px, 3vw, 32px); }
.strates figure { margin: 0; }
.strates img { width: 100%; }
.strates figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.strates .ed-nom { font-weight: 600; }
.strates .ed-fait { color: var(--encre-2); font-size: 0.875rem; }

/* ===== Tablette ===== */
@media (max-width: 1060px) {
  .tete-section { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tete-section .chapeau { justify-self: start; text-align: left; }
  .profils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes, .etapes.etapes-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tete-crete { width: 76%; right: -12%; }
}

/* ===== Mobile ===== */
@media (max-width: 760px) {
  .haut .cadre { min-height: 0; padding-top: 60vw; padding-bottom: 40px; }
  .haut-fond img { object-position: center top; }
  .haut::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 1, 1, 0) 30%, rgba(17, 1, 1, 0.78) 55%, rgba(17, 1, 1, 0.96) 75%); }
  .haut h1 { max-width: none; }
  .haut-actions .btn { width: 100%; }
  .page-tete .cadre { padding-top: 48px; }
  .tete-maison .cadre { min-height: 0; padding-bottom: 0; }
  .tete-crete { position: static; width: 100%; max-width: none; margin-top: 8px; }
  .metier { grid-template-columns: minmax(0, 1fr); }
  .jeune { min-height: 0; }
  .jeune::before { background: rgba(255, 255, 255, 0.86); }
  .proteges { gap: 12px; }
  .portes, .autres, .duo { grid-template-columns: minmax(0, 1fr); }
  .piece-cotee { padding-right: 84px; }
  .cote-v, .cote-p { right: -46px; }
  .crete-indice { display: inline; }
  .tuiles, .nuancier, .profils, .etapes, .etapes.etapes-photos { grid-template-columns: minmax(0, 1fr); }
  .nuancier { gap: 28px; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .conditions > div, .conditions.deux > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
  .actions .btn, .demande .btn { width: 100%; }
  .pied-haut { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- Bon de commande ---------- */
.bon-groupe { margin-top: 30px; }
.bon-groupe h3 { font-size: 1.125rem; }
.bon-refs { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bon-ref { display: grid; grid-template-columns: 56px minmax(0, 1fr) 96px; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--filet); border-radius: 3px; background: var(--papier); cursor: pointer; }
.bon-ref:focus-within { outline: 2px solid var(--rouge); outline-offset: 1px; }
.bon-ref img { width: 56px; height: auto; }
.bon-ref span { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.bon-ref input { width: 96px; min-height: 44px; text-align: center; font: inherit; font-variant-numeric: tabular-nums;
  border: 1px solid var(--encre-2); border-radius: 2px; background: var(--papier); color: var(--encre); padding: 8px 6px; }
.bon-ref input:focus-visible { outline: 2px solid var(--rouge); outline-offset: 1px; }
.bon-total { margin-top: 26px; padding: 16px 22px; background: var(--sombre-b); color: var(--creme); border-radius: 3px;
  display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: baseline; justify-content: space-between;
  position: sticky; bottom: 14px; z-index: 5; }
.bon-total p { margin: 0; font-size: 0.9375rem; }
.bon-total strong { font-size: 1.375rem; color: #FFFFFF; }
#bon-etat { color: var(--lait); }
.bon-total.ok #bon-etat { color: var(--creme); }
.bon-recap { padding: 18px 22px; border-left: 3px solid var(--rouge); background: var(--beige); max-width: 40rem; }
.bon-recap ul { margin: 0; padding: 0 0 0 18px; }
.bon-recap li { font-size: 0.9375rem; line-height: 1.6; }
.bon-recap .faits { color: var(--encre-2); }
@media (max-width: 900px) { .bon-refs { grid-template-columns: 1fr; } }


/* ========== 2. Couche commune ========== */

/* Leker — accueil, version animée.
   Identité du site leker.ch reprise telle quelle : Poppins, blanc, beige #EDE2D1, encre cacao, rouge Leker, or des boutons.
   Mise en page : celle de l'accueil actuel ; le mouvement s'ajoute par-dessus, jamais à la place du contenu. */

:root {
  --papier: #FFFFFF;
  --beige: #EDE2D1;
  --beige-2: #E4D6C1;
  --encre: #241512;
  --encre-2: #6E5D52;
  --filet: #E3DACE;
  --rouge: #F41200;
  --rouge-texte: #B50E00;
  --or: #C48D5A;
  --or-clair: #D9A877;
  --creme: #F6EFE4;
  --sombre-h: #1E0201;
  --sombre-m: #3A0203;
  --sombre-b: #2C0202;
  --entete: #FFFFFF;
  --entete-encre: #241512;
  --tuile: #FFFFFF;
  --tuile-filet: #D8D1C8;
  --actif: #241512; --sur-actif: #FFFFFF; --btn-survol: #241512; --btn-survol-texte: #FFFFFF;
  --police: Poppins, "Segoe UI", system-ui, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gouttiere-g: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left, 0px));
  --gouttiere-d: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #1C1714; --beige: #251E18; --beige-2: #362C23; --encre: #EFE7DC; --encre-2: #B9AB9D;
    --filet: #352C24; --rouge-texte: #FF8A76; --entete: #1C1714; --entete-encre: #EFE7DC;
    --tuile: #F4EFE8; --tuile-filet: #3A3029; --actif: #C48D5A; --sur-actif: #1C1714; --btn-survol: #F6EFE4; --btn-survol-texte: #241512; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #1C1714; --beige: #251E18; --beige-2: #362C23; --encre: #EFE7DC; --encre-2: #B9AB9D;
  --filet: #352C24; --rouge-texte: #FF8A76; --entete: #1C1714; --entete-encre: #EFE7DC;
  --tuile: #F4EFE8; --tuile-filet: #3A3029; --actif: #C48D5A; --sur-actif: #1C1714; --btn-survol: #F6EFE4; --btn-survol-texte: #241512; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 16px/1.6 var(--police); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--or); }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
[id] { scroll-margin-top: 96px; }
.cadre { width: min(1360px, 100%); margin-inline: auto; padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d); }
.evite { position: absolute; left: 8px; top: 8px; z-index: 80; padding: 10px 16px; background: var(--papier); color: var(--encre); transform: translateY(-220%); transition: transform 150ms ease; }
.evite:focus { transform: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Petits rôles, repris du site ---------- */
.sur-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rouge-texte); }
.sur-titre::before { content: ""; width: 8px; height: 8px; background: var(--rouge); flex: none; transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.chapeau { color: var(--encre-2); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.lien { color: var(--encre); font-weight: 500; text-decoration: none; background: linear-gradient(var(--rouge), var(--rouge)) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; transition: background-size 400ms var(--ease), color 150ms ease; }
.lien:hover { color: var(--rouge-texte); background-size: 0% 2px; background-position: 100% 100%; }
.lien-clair { color: var(--creme); font-size: 15px; font-weight: 500; text-decoration: none; background: linear-gradient(var(--rouge), var(--rouge)) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; transition: background-size 400ms var(--ease), color 150ms ease; }
.lien-clair:hover { color: #FFFFFF; background-size: 0% 2px; background-position: 100% 100%; }
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 30px; border: 0; border-radius: 2px; font: 600 15px/1.2 var(--police); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; text-align: center; background: var(--or); color: #FFFFFF; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-survol); transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { color: var(--btn-survol-texte); }
.btn { transition: color 400ms ease; }
.btn .fleche { width: 16px; height: 16px; transition: transform 400ms var(--ease); }
.btn:hover .fleche { transform: translateX(4px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* Les titres qui se lèvent mot à mot : chaque mot dans un masque */
.mot { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mot > span { display: inline-block; }

/* ---------- Bandeau doré et en-tête ---------- */
/* Le drapeau suisse est posé dans l'en-tête, juste à gauche du logo */
.drapeau { position: relative; flex: none; width: 26px; height: 26px; background: var(--rouge); }
.entete .drapeau { margin-right: calc(clamp(10px, 1vw, 14px) - clamp(16px, 2vw, 32px)); }
.drapeau i { position: absolute; left: 50%; top: 50%; background: #FFFFFF; translate: -50% -50%; }
.drapeau .v { width: 5px; height: 16px; }
.drapeau .h { width: 16px; height: 5px; }

.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--entete); color: var(--entete-encre); transition: box-shadow 300ms ease; }
.entete.compacte { box-shadow: 0 1px 0 var(--filet), 0 12px 32px -18px rgba(36, 21, 18, 0.35); }
/* Hauteur d'en-tête constante : seul le logo se réduit, par transformation, pour que rien ne saute en dessous */
.entete .cadre { display: flex; align-items: center; justify-content: flex-start; gap: clamp(16px, 2vw, 32px); padding-block: 22px; }
/* le logo est agrandi par transformation (×1,28) : sa marge droite réserve la place qu'il occupe vraiment */
.logo { flex: none; display: block; margin-right: calc(clamp(112px, 9vw, 150px) * 0.28); }
.logo img { width: clamp(112px, 9vw, 150px); transform-origin: left center; transform: scale(var(--k, 1.28)); transition: transform 450ms var(--ease); }
.entete.compacte .logo img { --k: 1; }
.theme-sombre .logo img { filter: none; }
.nav { display: flex; align-items: center; gap: 6px clamp(14px, 1.7vw, 26px); margin-left: auto; }
.nav > a, .nav-groupe > button { position: relative; color: var(--entete-encre); font: 500 15px/1.2 var(--police); text-decoration: none; white-space: nowrap; padding: 8px 0; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.nav > a::after, .nav-groupe > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--rouge); transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--ease); }
.nav > a:hover::after, .nav-groupe > button:hover::after, .nav-groupe > button[aria-expanded="true"]::after, .nav > a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav-groupe { position: relative; }
.nav-groupe svg { width: 9px; height: 6px; transition: transform 250ms var(--ease); }
.nav-groupe > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panneau { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 5; min-width: 250px; padding: 12px 0; background: var(--sombre-b); border-radius: 2px; box-shadow: 0 24px 48px rgba(20, 2, 1, 0.45);
  opacity: 0; visibility: hidden; translate: -50% -6px; transition: opacity 220ms ease, translate 300ms var(--ease), visibility 0s linear 300ms; }
.nav-groupe > button[aria-expanded="true"] + .nav-panneau { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity 220ms ease, translate 300ms var(--ease), visibility 0s; }
.nav-panneau a { display: block; padding: 10px 22px; color: var(--creme); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: padding 300ms var(--ease), color 150ms ease; }
.nav-panneau a:hover, .nav-panneau a:focus-visible { padding-left: 28px; color: #FFFFFF; }
.nav-panneau a::before { content: ""; display: inline-block; width: 0; height: 2px; margin-right: 0; vertical-align: middle; background: var(--rouge); transition: width 300ms var(--ease), margin 300ms var(--ease); }
.nav-panneau a:hover::before, .nav-panneau a:focus-visible::before { width: 12px; margin-right: 10px; }
.nav .nav-btn { border: 1px solid var(--entete-encre); border-radius: 2px; padding: 9px 16px; overflow: hidden; isolation: isolate; transition: color 300ms ease; }
.nav .nav-btn::after { inset: 0; height: auto; bottom: 0; z-index: -1; background: var(--entete-encre); }
.nav .nav-btn:hover { color: var(--entete); }
.langue { font: 600 13px/1 var(--police); letter-spacing: 0.04em; height: 38px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 2px; background: color-mix(in srgb, var(--entete-encre) 7%, transparent); color: var(--entete-encre); text-decoration: none; }
.langue:hover { background: color-mix(in srgb, var(--entete-encre) 13%, transparent); }
.avancement { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rouge); transform: scaleX(0); transform-origin: left; pointer-events: none; }

.burger { display: none; margin-left: auto; align-items: center; gap: 10px; background: none; border: 1px solid var(--entete-encre); border-radius: 2px; color: var(--entete-encre); min-height: 44px; padding: 8px 14px; font: 600 14px var(--police); letter-spacing: 0.04em; cursor: pointer; }
.burger .traits { position: relative; width: 16px; height: 10px; }
.burger .traits i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 300ms var(--ease); }
.burger .traits i:first-child { top: 0; } .burger .traits i:last-child { bottom: 0; }
.burger:hover .traits i:first-child { transform: translateX(3px); } .burger:hover .traits i:last-child { transform: translateX(-3px); }

.volet { position: fixed; inset: 0; z-index: 70; background: linear-gradient(160deg, var(--sombre-m), var(--sombre-h) 70%); color: var(--creme); overflow: auto;
  padding: calc(24px + env(safe-area-inset-top, 0px)) var(--gouttiere-d) calc(48px + env(safe-area-inset-bottom, 0px)) var(--gouttiere-g);
  opacity: 0; transform: translateY(-12px); visibility: hidden; transition: opacity 400ms ease, transform 500ms var(--ease), visibility 0s linear 500ms; }
.volet.ouvert { opacity: 1; transform: none; visibility: visible; transition: opacity 400ms ease, transform 500ms var(--ease), visibility 0s; }
.volet-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.volet-tete img { width: 120px; }
.fermer { background: none; border: 1px solid rgba(246, 239, 228, 0.5); border-radius: 2px; color: var(--creme); min-height: 44px; padding: 8px 14px; font: 600 14px var(--police); cursor: pointer; }
.volet nav { display: grid; gap: 2px; }
.volet nav a { display: block; padding: 10px 0; color: var(--creme); font-size: 1.375rem; font-weight: 500; text-decoration: none; opacity: 0; transform: translateY(14px); transition: opacity 400ms ease, transform 500ms var(--ease); }
.volet nav .groupe-titre { margin: 18px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--or-clair); opacity: 0; transition: opacity 400ms ease; }
.volet nav .sous { font-size: 1.0625rem; padding: 7px 0 7px 16px; border-left: 2px solid rgba(246, 239, 228, 0.18); }
.volet.ouvert nav a, .volet.ouvert nav .groupe-titre { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 35ms); }
.volet .btn { margin-top: 26px; justify-self: start; }
.volet nav a.btn { font-size: 15px; padding: 12px 30px; }
.volet nav a.lien-clair { justify-self: start; margin-top: 18px; font-size: 0.9375rem; padding: 0 0 3px; }

@media (max-width: 600px) {
  .entete .cadre { padding-block: 16px; }
  .logo img { width: 104px; --k: 1.15; }
  .logo { margin-right: 16px; }
  .drapeau { width: 22px; height: 22px; }
  .drapeau .v { width: 4px; height: 13px; }
  .drapeau .h { width: 13px; height: 4px; }
  .court-cache { display: none; }
}
@media (min-width: 601px) { .court { display: none; } }
/* Entre le menu complet et le burger, le menu se resserre pour tenir sur une ligne */
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav { gap: 6px 13px; }
  .nav > a, .nav-groupe > button { font-size: 14px; }
  .nav .nav-btn { padding: 8px 12px; }
  .entete .cadre { gap: 14px; }
}
@media (max-width: 1080px) {
  .nav, .langue-bureau { display: none; }
  .burger { display: inline-flex; }
}

/* ---------- Pied ---------- */
.pied { position: relative; overflow: clip; background: var(--papier); color: var(--encre); }
.pied-relief { position: absolute; inset: -10% 0; pointer-events: none; opacity: 0.55; background: url(assets/pied-relief.webp?v=3cf27972) center 40% / min(1600px, 112%) no-repeat; }
.pied .cadre { position: relative; padding-block: clamp(48px, 6vw, 72px) calc(32px + env(safe-area-inset-bottom, 0px)); }
.pied-haut { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px); }
@media (max-width: 860px) { .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied-marque { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pied-haut { grid-template-columns: minmax(0, 1fr); } }
.pied-marque img { width: 120px; }
.pied-marque p { margin-top: 18px; font-size: 0.875rem; line-height: 1.7; }
.pied-marque .pied-signature { margin-top: 14px; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; }
.pied a { color: var(--encre); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.pied-colonne p { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 14px; }
.pied-colonne ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pied-colonne a { font-size: 0.9375rem; }
.pied-bas { margin-top: clamp(36px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 0.8125rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pied-relief { opacity: 0.08; filter: invert(1); } }
:root[data-theme="dark"] .pied-relief { opacity: 0.08; filter: invert(1); }

/* Le logo est brun sur blanc : en thème sombre, on prend la version claire */
.logo-sombre { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-clair-theme { display: none !important; } :root:not([data-theme="light"]) .logo-sombre { display: block !important; } }
:root[data-theme="dark"] .logo-clair-theme { display: none !important; }
:root[data-theme="dark"] .logo-sombre { display: block !important; }

.gsap-pilote { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ===== Raccords entre le site d'origine et la nouvelle couche ===== */
.drapeau::before, .drapeau::after { content: none; }
.bandeau-suisse { padding-top: 0; }
.volet { display: block; }
.nav-panneau { display: block; }
.pied::before { content: none; }
.p-accueil .haut-texte { animation: none; }
.nav-groupe.courant > button::after { transform: scaleX(1); transform-origin: left; }
.volet nav a[aria-current="page"] { color: #FFFFFF; }
.volet nav a[aria-current="page"]::before { content: ""; display: inline-block; width: 12px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--rouge); }
.section { background: none; }
.s-blanche { background: var(--papier); }
.s-beige { background: var(--beige); }
/* champ invisible qui piège les robots (la règle d'origine était dans le bloc du pied, retiré) */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Accueil : les règles du site d'origine qui portent les mêmes noms de classes ne doivent pas déformer l'accueil */
.p-accueil .nuancier { grid-template-columns: none; gap: normal; }
.p-accueil .nuancier img { aspect-ratio: auto; border: 0; }
.p-accueil .tuile img { aspect-ratio: auto; }
.p-accueil .bande-film .tete-film, .p-accueil .film { max-width: none; }
.p-accueil .film video { background: none; }
.p-accueil .haut h1 { max-width: none; }


/* ========== 3. Accueil ========== */
/* ---------- Ouverture ---------- */
.p-accueil .haut { position: relative; overflow: clip; color: var(--creme); background: #110101; }

.p-accueil .haut-fond { position: absolute; inset: 0; z-index: 0; display: block; transform-origin: 65% 47%; }

.p-accueil .haut-fond picture { display: block; width: 100%; height: 100%; }

.p-accueil .haut-fond img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }

/* Le dessin du Flocon, posé exactement sur la pièce de la photo : il se trace, puis le chocolat apparaît dessous */
.p-accueil .haut-trait { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; color: var(--or-clair); visibility: hidden; }

.p-accueil .haut-trait svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(217, 168, 119, 0.45)); }

.p-accueil .haut-trait .arete { stroke-width: 0.5; }

.p-accueil .haut-trait .contour { stroke-width: 1.1; }

.p-accueil .haut-lueur { position: absolute; inset: 0 -60%; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; will-change: transform;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 214, 170, 0.55) 46%, rgba(255, 240, 220, 0.85) 50%, rgba(255, 214, 170, 0.55) 54%, transparent 70%) 0 0 / 100% 100% no-repeat; }

.p-accueil .haut-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(17, 1, 1, 0.55), rgba(17, 1, 1, 0.1) 55%, transparent); }

.p-accueil .haut .cadre { position: relative; z-index: 2; display: grid; align-content: center; min-height: clamp(480px, 42vw, 780px); padding-block: 56px 72px; }

.p-accueil .haut-texte { max-width: 36rem; }

.p-accueil .haut h1 { font-size: clamp(2.1rem, 1rem + 3.1vw, 3.9rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; color: #FFFFFF; }

.p-accueil .haut h1 .ligne { display: block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.06em; }

.p-accueil .haut h1 .ligne > span { display: inline-block; }

.p-accueil .haut h1 .or { color: var(--or-clair); }

.p-accueil .haut-chapeau { margin-top: 20px; font-size: 1rem; line-height: 1.6; color: var(--creme); opacity: 0.92; max-width: 34rem; text-wrap: balance; }

.p-accueil .haut-actions { margin-top: 30px; }

.p-accueil .defiler { position: absolute; left: var(--gouttiere-g); bottom: 22px; z-index: 2; display: grid; justify-items: center; gap: 8px; color: var(--creme); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; opacity: 0.75; }

.p-accueil .defiler span.tige { position: relative; width: 1px; height: 38px; background: rgba(246, 239, 228, 0.3); overflow: hidden; }

.p-accueil .defiler span.tige::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--creme); animation: goutte 2.2s var(--ease) infinite; }

@keyframes goutte { to { top: 100%; } }

@media (max-width: 760px) {
.p-accueil .haut .cadre { min-height: auto; padding-block: 90vw 44px; align-content: end; }

.p-accueil .haut-fond { bottom: auto; height: auto; }

.p-accueil .haut-fond picture { height: auto; }

.p-accueil .haut-fond img { object-position: center top; }

.p-accueil .haut-voile { background: linear-gradient(180deg, transparent 50%, rgba(17, 1, 1, 0.9) 66%, #110101 76%); }

.p-accueil .haut-fond img { height: auto; aspect-ratio: 900 / 1125; }

.p-accueil .haut { background: #110101; }

.p-accueil .defiler { display: none; }

}


/* ---------- Sections ---------- */
.p-accueil .section { padding-block: clamp(64px, 8vw, 112px); background: var(--papier); }

.p-accueil .s-trait { padding-top: 0; }

.p-accueil .s-trait > .cadre::before { content: ""; display: block; border-top: 1px solid var(--encre); margin-bottom: clamp(48px, 6vw, 88px); transform-origin: left; transform: scaleX(var(--trait, 1)); }

.p-accueil .tete-section { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }

@media (max-width: 860px) {
.p-accueil .tete-section { grid-template-columns: minmax(0, 1fr); }
 }


/* ---------- Les créations ---------- */
.p-accueil .nuancier { justify-self: end; display: grid; gap: 12px; justify-items: end; }

.p-accueil .nuancier-titre { font-size: 13px; font-weight: 500; color: var(--encre-2); }

.p-accueil .choix { display: inline-flex; gap: 6px; padding: 5px; border: 1px solid var(--filet); border-radius: 999px; background: var(--papier); position: relative; }

.p-accueil .choix button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px 8px 8px; border: 0; border-radius: 999px; background: none; color: var(--encre); font: 500 14px/1 var(--police); cursor: pointer; transition: color 300ms ease; white-space: nowrap; }

.p-accueil .choix button img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }

.p-accueil .choix button .taux { color: var(--encre-2); font-variant-numeric: tabular-nums; transition: color 300ms ease; }

.p-accueil .choix button[aria-pressed="true"] { color: var(--sur-actif); }

.p-accueil .choix button[aria-pressed="true"] .taux { color: rgba(255, 255, 255, 0.75); }

.p-accueil .choix .curseur { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--actif); transition: transform 500ms var(--ease), width 500ms var(--ease); }

@media (max-width: 860px) {
.p-accueil .nuancier { justify-self: start; justify-items: start; }
 }

@media (max-width: 480px) {
.p-accueil .choix { gap: 2px; }

.p-accueil .choix button { padding-right: 10px; gap: 7px; font-size: 13px; }

.p-accueil .choix button img { width: 24px; height: 24px; }
 }

.p-accueil .tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }

@media (max-width: 860px) {
.p-accueil .tuiles { grid-template-columns: minmax(0, 1fr); gap: 44px; }
 }

.p-accueil .tuile { display: flex; flex-direction: column; min-width: 0; }

.p-accueil .tuile-image { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--tuile); border: 1px solid var(--tuile-filet); text-decoration: none; }

.p-accueil .tuile-image::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); }

.p-accueil .tuile-image:hover::after { transform: scaleX(1); }

.p-accueil .etuis { position: relative; width: 76%; height: 76%; }

.p-accueil .etuis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 600ms ease, transform 900ms var(--ease); transform: scale(0.97); }

.p-accueil .etuis img.actif { opacity: 1; transform: none; }

.p-accueil .tuile-image:hover .etuis { transform: translateY(-6px) rotate(-1deg); }

.p-accueil .etuis { transition: transform 700ms var(--ease); }

.p-accueil .tuile:nth-child(3) .etuis { width: 92%; }

.p-accueil .tuile-ombre { position: absolute; left: 22%; right: 22%; bottom: 9%; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 21, 18, 0.18), transparent); transition: transform 700ms var(--ease), opacity 700ms ease; }

.p-accueil .tuile-image:hover .tuile-ombre { transform: scaleX(0.86); opacity: 0.7; }

.p-accueil .tuile h3 { margin-top: 20px; }

.p-accueil .tuile .idee { margin-top: 6px; color: var(--encre-2); font-size: 0.9375rem; line-height: 1.55; max-width: 30rem; }

.p-accueil .tuile .chocolat-nom { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--rouge-texte); font-variant-numeric: tabular-nums; min-height: 1.6em; }

.p-accueil .tuile .lien { margin-top: 14px; align-self: flex-start; font-size: 0.9375rem; }

.p-accueil .credit { margin-top: clamp(36px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 0.8125rem; color: var(--encre-2); }


/* ---------- La forme d'abord : du trait au chocolat ---------- */
.p-accueil .forme { background: var(--papier); padding-block: 0; }

.p-accueil .forme.s-trait > .cadre::before { display: none; }

.p-accueil .forme-epingle { min-height: calc(100vh - var(--h-entete, 80px)); min-height: calc(100svh - var(--h-entete, 80px)); display: grid; align-items: center; padding-block: clamp(32px, 5vh, 64px); }

.p-accueil .forme-epingle::before { content: ""; position: absolute; top: 0; left: var(--gouttiere-g); right: var(--gouttiere-d); max-width: calc(1360px - var(--gouttiere-g) - var(--gouttiere-d)); margin-inline: auto; border-top: 1px solid var(--encre); transform-origin: left; transform: scaleX(var(--trait, 1)); }

.p-accueil .forme-epingle { position: relative; }

.p-accueil .forme-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

.p-accueil .forme-epingle { background: var(--papier); }

.p-accueil .forme-texte .chapeau { margin-top: 16px; max-width: 30rem; }

.p-accueil .etapes { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 30rem; counter-reset: etape; }

.p-accueil .etapes li { border-top: 1px solid var(--filet); }

.p-accueil .etapes li:last-child { border-bottom: 1px solid var(--filet); }

.p-accueil .etapes button { position: relative; width: 100%; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 2px 8px; padding: 14px 0; border: 0; background: none; color: var(--encre-2); font: inherit; text-align: left; cursor: pointer; transition: color 300ms ease; }

.p-accueil .etapes .num { grid-row: span 2; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; padding-top: 3px; }

.p-accueil .etapes .nom { font-size: 1.0625rem; font-weight: 600; color: inherit; }

.p-accueil .etapes .detail { font-size: 0.875rem; line-height: 1.5; height: 0; opacity: 0; overflow: hidden; transition: height 600ms var(--ease), opacity 400ms ease; }

.p-accueil .etapes button::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--rouge); transform: scaleX(var(--p, 0)); transform-origin: left; }

.p-accueil .etapes li.actif button { color: var(--encre); }

.p-accueil .etapes li.actif .num { color: var(--rouge-texte); }

.p-accueil .etapes li.actif .detail { height: 3em; opacity: 1; }

.p-accueil .etapes button:hover { color: var(--encre); }

.p-accueil .forme-lien { margin-top: 26px; }

.p-accueil .plateau { position: relative; width: min(600px, 100%, calc(100svh - var(--h-entete, 80px) - 150px)); margin-inline: auto; }

.p-accueil .plateau-cadre { position: relative; aspect-ratio: 211.72 / 213.83; }

.p-accueil .couche { position: absolute; inset: 0; }

.p-accueil .couche img { width: 100%; height: 100%; object-fit: contain; }

.p-accueil .c-trait > div { position: absolute; inset: 0; }

.p-accueil .c-trait svg { width: 100%; height: 100%; overflow: visible; color: var(--encre); }

.p-accueil .c-trait .fantome { opacity: 0.13; }

.p-accueil .c-trait .arete { stroke-width: 0.42; }

.p-accueil .c-trait .contour { stroke-width: 0.9; }

/* Les quatre étapes ont exactement la même taille : chaque image est calée sur le contour du dessin de dépôt. */
.p-accueil .c-volume img, .p-accueil .c-moule img, .p-accueil .c-chocolat img { position: absolute; max-width: none; }

.p-accueil .c-volume img { left: -14.828%; top: -14.267%; width: 129.918%; height: 128.631%; }

.p-accueil .c-volume .vol-sombre { display: none; }

.p-accueil .c-moule { clip-path: inset(-4% round 22px); }

.p-accueil .c-moule img { left: -27.07%; top: -26.497%; width: 153.947%; height: 152.423%; }

.p-accueil .c-moule::before { content: ""; position: absolute; inset: -4%; border-radius: 22px; box-shadow: 0 18px 40px rgba(36, 21, 18, 0.18); }

.p-accueil .c-chocolat img { left: -1%; top: -1%; width: 102%; height: 102%; }

.p-accueil .plateau-legende { margin-top: 18px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--encre-2); }

.p-accueil .plateau-legende .compteur { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--encre); white-space: nowrap; }

.p-accueil .plateau-legende .ou { min-height: 1.6em; }

@media (max-width: 860px) {
.p-accueil .forme-epingle { min-height: 0; padding-block: 56px; align-items: start; }

.p-accueil .forme-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }

.p-accueil .forme-texte .chapeau { font-size: 0.9375rem; margin-top: 10px; }

.p-accueil .etapes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; max-width: none; }

.p-accueil .etapes li, .p-accueil .etapes li:last-child { border: 0; }

.p-accueil .etapes button { display: inline-flex; width: auto; gap: 6px; padding: 7px 12px; border: 1px solid var(--filet); border-radius: 999px; font-size: 13px; }

.p-accueil .etapes button::after { display: none; }

.p-accueil .etapes .nom { font-size: 13px; }

.p-accueil .etapes .num, .p-accueil .etapes .detail, .p-accueil .etapes .art { display: none; }

.p-accueil .etapes { flex-wrap: nowrap; }

.p-accueil .forme-grille { align-items: start; }

.p-accueil .etapes .nom::first-letter { text-transform: uppercase; }

.p-accueil .etapes li.actif button { background: var(--actif); border-color: var(--actif); color: var(--sur-actif); }

.p-accueil .plateau { width: min(78vw, calc(100svh - var(--h-entete, 70px) - 90px), 420px); }

}

@media (max-width: 359px) {
.p-accueil .etapes { flex-wrap: wrap; }

.p-accueil .forme-lien { margin-top: 14px; }

}

/* En thème sombre, le volume filaire passe en traits clairs ; la photo du moule garde son fond, en carte arrondie */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .p-accueil .c-volume .vol-clair { display: none; }

:root:not([data-theme="light"]) .p-accueil .c-volume .vol-sombre { display: block; }

:root:not([data-theme="light"]) .p-accueil .c-moule img { filter: brightness(0.86) contrast(1.05); }
 }

:root[data-theme="dark"] .p-accueil .c-volume .vol-clair { display: none; }

:root[data-theme="dark"] .p-accueil .c-volume .vol-sombre { display: block; }

:root[data-theme="dark"] .p-accueil .c-moule img { filter: brightness(0.86) contrast(1.05); }


/* ---------- Le film ---------- */
.p-accueil .bande-film { position: relative; background: linear-gradient(180deg, var(--sombre-b), var(--sombre-h)); color: var(--creme); overflow: clip; }

.p-accueil .bande-film .cadre { padding-block: clamp(64px, 8vw, 112px); }

.p-accueil .tete-film { margin: 0 0 clamp(28px, 3.5vw, 44px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; }

.p-accueil .bande-film .sur-titre { color: var(--creme); opacity: 0.85; }

.p-accueil .bande-film h2 { color: #FFFFFF; }

.p-accueil .film { position: relative; margin: 0; transform-origin: 50% 0; }

.p-accueil .film-cadre { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 2px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); }

.p-accueil .film-cadre video { width: 100%; height: 100%; object-fit: cover; }

.p-accueil .film-son { position: absolute; left: clamp(12px, 2.4vw, 28px); bottom: clamp(12px, 2.4vw, 28px); display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 12px; border: 0; border-radius: 999px; background: var(--sombre-b); box-shadow: 0 10px 30px -10px rgba(20, 2, 1, 0.6); color: #FFFFFF; font: 600 15px/1 var(--police); cursor: pointer; transition: background 300ms ease, scale 400ms var(--ease); }

.p-accueil .film-son:hover { background: rgba(196, 141, 90, 0.95); scale: 1.04; }

@media (max-width: 600px) {
.p-accueil .film-son { padding: 8px 14px 8px 8px; font-size: 13px; gap: 9px; }

.p-accueil .film-son .rond { width: 32px; height: 32px; }

.p-accueil .film-son svg { width: 12px; height: 12px; }
 }

.p-accueil .film-son .rond { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; color: #241512; }

.p-accueil .film-son .rond::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); animation: onde 3.2s ease-out 3; }

@keyframes onde { from { transform: scale(0.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

.p-accueil .film-son svg { width: 16px; height: 16px; margin-left: 3px; }

.p-accueil .film.en-lecture .film-son { opacity: 0; pointer-events: none; transition: opacity 300ms ease; }

.p-accueil .film .legende { margin-top: 14px; font-size: 0.8125rem; color: var(--creme); opacity: 0.7; font-variant-numeric: tabular-nums; }


/* ---------- Offrir ---------- */
.p-accueil .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }

@media (max-width: 860px) {
.p-accueil .duo { grid-template-columns: minmax(0, 1fr); }
 }

.p-accueil .duo-image { position: relative; overflow: hidden; transform-origin: 50% 50%; aspect-ratio: 1; max-height: 600px; width: 100%; max-width: 600px; justify-self: center; }

.p-accueil .duo-image img { width: 100%; height: 118%; object-fit: cover; position: absolute; left: 0; top: -9%; }

.p-accueil .duo-texte .chapeau { margin-top: 16px; max-width: 30rem; }

.p-accueil .encart { margin-top: 26px; padding: 18px 22px; border-left: 3px solid var(--rouge); background: var(--beige); max-width: 30rem; font-size: 0.9375rem; line-height: 1.55; color: var(--encre-2); }

.p-accueil .encart strong { color: var(--encre); font-weight: 600; display: block; margin-bottom: 4px; }

.p-accueil .duo-texte .actions { margin-top: 30px; }


/* ---------- La signature qui défile ---------- */
.p-accueil .signature { background: var(--beige); color: var(--encre); overflow: hidden; padding-block: clamp(22px, 3vw, 34px); border-block: 1px solid var(--beige-2); }

.p-accueil .signature-piste { display: flex; width: max-content; will-change: transform; }

.p-accueil .signature-groupe { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }

.p-accueil .signature-groupe .croix { position: relative; width: 0.7em; height: 0.7em; background: var(--rouge); flex: none; }

.p-accueil .signature-groupe .croix::before, .p-accueil .signature-groupe .croix::after { content: ""; position: absolute; left: 50%; top: 50%; background: #FFFFFF; translate: -50% -50%; }

.p-accueil .signature-groupe .croix::before { width: 19%; height: 62%; }

.p-accueil .signature-groupe .croix::after { width: 62%; height: 19%; }

.p-accueil .signature-groupe .creux { color: transparent; -webkit-text-stroke: 1.5px var(--encre); }


/* ---------- Professionnels ---------- */
.p-accueil .offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }

@media (max-width: 1100px) {
.p-accueil .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }

@media (max-width: 600px) {
.p-accueil .offres { grid-template-columns: minmax(0, 1fr); }
 }

.p-accueil #professionnels { background: var(--beige); }

.p-accueil .offre { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 24px; border: 1px solid var(--beige-2); background: var(--papier); transition: background 400ms ease, border-color 400ms ease, transform 500ms var(--ease); }

.p-accueil .offre::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--rouge); transform: scaleX(var(--trait, 1)); transform-origin: left; }

.p-accueil .offre:hover { border-color: var(--encre-2); transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(36, 21, 18, 0.45); }

.p-accueil .offre .pour { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rouge-texte); }

.p-accueil .offre h3 { margin-top: 12px; font-size: 1.1875rem; }

.p-accueil .offre p:not(.pour) { margin-top: 10px; color: var(--encre-2); font-size: 0.9375rem; line-height: 1.55; flex: 1; }

.p-accueil .offre .pour { flex: none; }

.p-accueil .offre .liens { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; }

.p-accueil .offre .lien { font-size: 0.9375rem; }


/* ---------- Jugez sur pièce ---------- */
.p-accueil .demande { position: relative; overflow: clip; background: linear-gradient(180deg, var(--sombre-m), var(--sombre-h)); color: var(--creme); }

.p-accueil .demande .cadre { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding-block: clamp(80px, 10vw, 136px); }

.p-accueil .demande .sur-titre { color: var(--creme); opacity: 0.8; justify-content: center; }

.p-accueil .demande h2 { color: #FFFFFF; font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem); }

.p-accueil .demande p { margin-top: 18px; max-width: 36rem; color: var(--creme); opacity: 0.88; }

.p-accueil .demande .btn { margin-top: 34px; }

.p-accueil .demande-liens { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; }

.p-accueil .courriel { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--creme); }

.p-accueil .courriel span { user-select: all; }

.p-accueil .copier { border: 1px solid rgba(246, 239, 228, 0.4); border-radius: 2px; background: none; color: var(--creme); font: 500 12px/1 var(--police); padding: 6px 9px; cursor: pointer; }

.p-accueil .copier:hover { border-color: var(--creme); }

.p-accueil .demande-flocon { position: absolute; z-index: 0; right: -6vw; top: 50%; width: clamp(280px, 36vw, 560px); translate: 0 -50%; opacity: 0.12; color: var(--or-clair); pointer-events: none; }

.p-accueil .demande-flocon svg { width: 100%; height: auto; }

.p-accueil .demande-flocon .arete { stroke-width: 0.5; }

.p-accueil .demande-flocon .contour { stroke-width: 0.9; }




/* ========== 4. Ouvertures ========== */
/* ===== Pages intérieures : ouverture avec un visuel propre à chaque page ===== */
/* Avant le lancement de l'ouverture, rien ne « saute » : le texte et le visuel attendent (au plus 3 s, voir le script de tête) */
html.mvt .page-tete .tete-texte > *, html.mvt .page-tete .tete-visuel, html.mvt .page-tete .tete-crete { visibility: hidden; }
html.mvt .drapeau { visibility: hidden; }

.page-tete .cadre.avec-visuel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.page-tete .tete-texte { min-width: 0; }
.tete-visuel { position: relative; width: 100%; max-width: 560px; justify-self: end; }
.tete-lueur { position: absolute; inset: 0 -60%; z-index: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; will-change: transform;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 214, 170, 0.5) 46%, rgba(255, 240, 220, 0.8) 50%, rgba(255, 214, 170, 0.5) 54%, transparent 70%); }
@media (max-width: 860px) {
  .page-tete .cadre.avec-visuel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tete-visuel { justify-self: center; max-width: min(400px, 84vw); }
}

/* Le Flocon : le dessin de dépôt se trace, le chocolat apparaît dessous */
.tv-cadre { position: relative; aspect-ratio: 211.72 / 213.83; width: 100%; }
.tv-trait { position: absolute; inset: 0; color: var(--or-clair, #D9A877); }
.tv-trait svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(217, 168, 119, 0.4)); }
.tv-trait .arete { stroke-width: 0.5; }
.tv-trait .contour { stroke-width: 1.05; }
.tv-choc { position: absolute; left: -1%; top: -1%; width: 102%; height: 102%; max-width: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }
[data-visuel="trait"] .tv-trait { color: var(--or-clair, #D9A877); }
[data-visuel="trait"] .tete-visuel, [data-visuel="trait"] { max-width: 500px; }

/* La Suisse : la tablette se pose, en perspective */
[data-visuel="suisse"] .tv-objet { width: 100%; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.5)); }
[data-visuel="suisse"] { max-width: 600px; }

/* Le Massif du Mont Blanc : la ligne de crête se trace, puis le chocolat monte jusqu'à elle */
.tv-crete { position: relative; width: 100%; }
.tv-crete .tv-objet { display: block; width: 100%; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.45)); }
.tv-ligne { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--or-clair, #D9A877); }
.tv-ligne path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(217, 168, 119, 0.55)); }
[data-visuel="crete"] { max-width: 640px; }

/* Étuis : un seul, en éventail, en trio ou en grille de neuf */
.tv-etuis { position: relative; }
.tv-etuis .tv-objet { display: block; width: 100%; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)); }
.tv-ombre { position: absolute; left: 18%; right: 18%; bottom: -4%; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent); }
[data-visuel="objet"] { max-width: 420px; }
[data-visuel="eventail"] .tv-etuis { aspect-ratio: 5 / 4; }
[data-visuel="eventail"] .tv-objet { position: absolute; width: 58%; }
[data-visuel="eventail"] .tv-objet:nth-child(1) { left: 0; top: 14%; transform: rotate(-8deg); }
[data-visuel="eventail"] .tv-objet:nth-child(2) { left: 21%; top: 2%; transform: rotate(0deg); z-index: 1; }
[data-visuel="eventail"] .tv-objet:nth-child(3) { left: 42%; top: 18%; transform: rotate(7deg); z-index: 2; }
[data-visuel="trio"] .tv-etuis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6%; align-items: end; }
[data-visuel="grille"] .tv-etuis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8% 6%; align-items: center; }
[data-visuel="grille"] .tv-objet { filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.45)); }

/* Chocolatiers : le moule, puis la pièce qui s'y pose */
.tv-atelier { position: relative; aspect-ratio: 1; }
.tv-moule { position: absolute; inset: 0; width: 100%; height: 100%; filter: brightness(0.9) drop-shadow(0 26px 34px rgba(0, 0, 0, 0.5)); }
.tv-atelier .tv-choc { left: 15%; top: 15%; width: 70%; height: 70%; }
[data-visuel="moule"] { max-width: 460px; }

/* Les sections « Nous écrire » : un flocon en filigrane */
.demande { position: relative; overflow: clip; }
.demande > .cadre { position: relative; z-index: 1; }
.demande-flocon { position: absolute; z-index: 0; right: -6vw; top: 50%; width: clamp(280px, 36vw, 560px); translate: 0 -50%; opacity: 0.12; color: var(--or-clair, #D9A877); pointer-events: none; }
.demande-flocon svg { width: 100%; height: auto; }
.demande-flocon .arete { stroke-width: 0.5; } .demande-flocon .contour { stroke-width: 0.9; }

/* Aperçu : l'envoi des formulaires est coupé, on le dit à côté du bouton */
.note-apercu { margin-top: 14px; padding: 12px 16px; border-left: 3px solid var(--or); background: var(--beige); color: var(--encre); font-size: 0.875rem; }
.nav .nav-btn[aria-current="true"] { color: var(--entete); }
[data-visuel="flocon"] { max-width: 440px; }

/* ===== Corrections après relecture ===== */
/* Thème sombre : la section « Une jeune maison » garde ses couleurs claires sur la photo du Jet d'eau */
.jeune { --encre: #241512; --encre-2: #3A2B25; --rouge-texte: #B50E00; --filet: #E3DACE; }
.jeune .lien { color: #241512; }
/* Sur mesure : la méthode, du trait au moule */
.tv-cadre .tv-vol, .tv-cadre .tv-moule-m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tv-cadre .tv-vol { inset: auto; left: -14.828%; top: -14.267%; width: 129.918%; height: 128.631%; max-width: none; }
.tv-cadre .tv-moule-m { filter: brightness(0.9) drop-shadow(0 26px 34px rgba(0, 0, 0, 0.5)); }
html:not(.mvt) [data-visuel="methode"] .tv-vol { opacity: 0; }
[data-visuel="methode"] { max-width: 460px; }
/* Contact : le flocon au trait, en filigrane */
.tv-discret { opacity: 0.32; }
[data-visuel="trait"] { max-width: 420px; }
/* La Suisse : la tablette en entier */
[data-visuel="contour"] { max-width: 620px; }
/* Trio d'étuis : le Mont Blanc, allongé, prend plus de place */
[data-visuel="trio"] { max-width: 600px; }
[data-visuel="trio"] .tv-etuis { grid-template-columns: 1fr 1.25fr 1.9fr; }
/* Hauteurs de bandeau régulières */
.page-tete .cadre.avec-visuel { min-height: clamp(460px, 40vw, 600px); align-content: center; }
.page-tete .cadre:not(.avec-visuel) { min-height: clamp(320px, 28vw, 420px); align-content: center; display: grid; }
.page-tete .btn .court { display: none; }
@media (max-width: 600px) {
  .page-tete .btn .court-cache { display: none; }
  .page-tete .btn .court { display: inline; }
  .liste-fleches a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .liste-fleches .lf-fait { grid-row: 2; grid-column: 1; }
  .liste-fleches svg { grid-row: 1 / span 2; grid-column: 2; }
  .bon-total { padding: 10px 16px; }
  #bon-etat { font-size: 0.8125rem; }
}
@media (max-width: 860px) {
  .page-tete .cadre.avec-visuel, .page-tete .cadre:not(.avec-visuel) { min-height: 0; }
  .jeune { display: block; }
  .jeune-fond { position: static; display: block; height: auto; aspect-ratio: 4 / 3; }
  .jeune::before { content: none; }
  .jeune .cadre { padding-block: 40px 56px; background: #FFFFFF; }
}
/* Un seul soulignement pour la rubrique courante */
.nav-groupe > button { text-decoration: none !important; }
.volet nav a[aria-current="page"] { text-decoration: none; }
/* Les boutons d'origine glissent comme ceux de l'accueil */
.btn-or:hover, .btn-encre:hover, .btn-blanc:hover { background: var(--or); color: var(--btn-survol-texte); }
/* Une image d'ouverture absente : le trait reste, le visuel n'est jamais vide */
.sans-image .tv-trait, .sans-image .tv-ligne { opacity: 1 !important; visibility: visible !important; }
/* Formulaires : jamais plus larges que l'écran */
.champs { grid-template-columns: minmax(0, 1fr); }
.champ input, .champ select, .champ textarea { width: 100%; min-width: 0; max-width: 100%; }
/* Un seul trait sous les liens clairs */
.page-tete .lien-clair, .demande .lien-clair, .haut .lien-clair, .volet .lien-clair { text-decoration: none; }
html { scroll-behavior: auto; }
.volet .btn { width: auto; }
@media (max-width: 600px) { .volet nav a.btn { font-size: 14px; padding: 12px 20px; white-space: normal; text-align: left; } }
/* Sur mesure : la méthode finit sur la pièce en chocolat, pas sur le moule */
.tv-cadre .tv-fin-choc { left: -1%; top: -1%; width: 102%; height: 102%; inset: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }
.nav-panneau a[aria-current="page"] { color: var(--or-clair, #D9A877); }