/* Socle commun : remise à zéro + composants fonctionnels (tiroir, recherche,
   commande, textes légaux, formulaires). Aucune direction artistique ici : tout
   passe par les variables ci-dessous, que chaque boutique redéfinit dans styles.css. */
:root {
  --fond: #ffffff; --fond-2: #f5f5f3; --texte: #1a1a1a; --texte-doux: #666666;
  --accent: #222222; --accent-texte: #ffffff; --bord: #e4e4e0; --rayon: 4px;
  --police-titre: Georgia, serif; --police-texte: system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.sans-defilement { overflow: hidden; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police-texte); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--police-titre); line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fond); padding: 10px 14px; }
.evitement:focus { left: 8px; top: 8px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.a-completer { background: #fff3a3; color: #5c4a00; padding: 0 4px; font-style: normal; border-radius: 2px; }
.anim [data-apparait] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.anim [data-apparait].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* Tiroir panier */
.voile { position: fixed; inset: 0; background: rgba(20, 20, 20, .4); opacity: 0; transition: opacity .25s; z-index: 60; }
.voile.ouvert { opacity: 1; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--fond); z-index: 70; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s ease; }
.tiroir.ouvert { transform: none; }
.tiroir-entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bord); }
.tiroir-entete h2 { margin: 0; font-size: 1.15rem; }
.tiroir-fermer { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.tiroir-liste { flex: 1; overflow-y: auto; padding: 8px 20px; }
.tiroir-pied { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); }
.tiroir-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; margin-bottom: 6px; }
.tiroir-note { font-size: .85rem; color: var(--texte-doux); margin-bottom: 12px; }
.tiroir-commander, .bouton, .achat-bouton, .formulaire button[type="submit"], .formulaire [data-confirmer], [data-payer], .barre-achat button {
  display: block; width: 100%; text-align: center; text-decoration: none; background: var(--accent); color: var(--accent-texte);
  border: 0; border-radius: var(--rayon); padding: 15px 18px; font-weight: 600; min-height: 48px;
}
.bouton { display: inline-block; width: auto; }
.tiroir-voir { display: block; text-align: center; padding: 10px; font-size: .9rem; }
.ligne-panier { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.ligne-panier img { width: 72px; height: 96px; object-fit: cover; border-radius: var(--rayon); }
.ligne-corps { flex: 1; min-width: 0; }
.ligne-nom { display: block; text-decoration: none; font-weight: 600; }
.ligne-option { display: block; font-size: .85rem; color: var(--texte-doux); }
.ligne-bas { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.quantite { display: inline-flex; align-items: center; border: 1px solid var(--bord); border-radius: var(--rayon); }
.quantite button { background: none; border: 0; width: 36px; height: 36px; font-size: 1.1rem; }
.quantite span { min-width: 24px; text-align: center; }
.ligne-retirer { background: none; border: 0; padding: 6px 0 0; font-size: .8rem; color: var(--texte-doux); text-decoration: underline; }
.panier-vide { text-align: center; padding: 40px 10px; }
div.page-panier, .ck, .merci { max-width: 1080px; margin: 0 auto; padding: 32px 16px 64px; }
.panier-total { max-width: 420px; margin: 20px 0 0 auto; }
.merci { max-width: 640px; text-align: center; padding-top: 64px; }

/* Barre d'achat collée */
.barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 1px solid var(--bord); transform: translateY(110%); transition: transform .2s; }
.barre-achat.visible { transform: none; }
.barre-achat-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; }
.barre-achat-texte span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat button { width: auto; padding: 12px 22px; min-height: 44px; }
@media (max-width: 899px) { .barre-achat { display: flex; } .page-produit { padding-bottom: 84px; } }

/* Bloc d'achat */
.achat-option { border: 0; padding: 0; margin: 0 0 14px; }
.achat-option legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.achat-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.achat-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.achat-choix span { display: block; min-width: 48px; min-height: 44px; padding: 10px 12px; text-align: center; border: 1px solid var(--bord); border-radius: var(--rayon); cursor: pointer; }
.achat-choix input:checked + span { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.achat-choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.achat-erreur { color: #a4262c; font-size: .9rem; margin: 0 0 10px; }
.fiche-infos { margin: 0; }
.fiche-infos > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.fiche-infos dt { color: var(--texte-doux); }
.fiche-infos dd { margin: 0; text-align: right; }
.bloc-conformite { font-size: .85rem; color: var(--texte-doux); }
.bloc-conformite p { margin-bottom: .5em; }
.avertissements { border: 1px solid #c98a00; background: #fff8e6; color: #5a4300; padding: 10px 12px; border-radius: var(--rayon); font-size: .9rem; margin: 12px 0; }
.avertissements p { margin: 0; font-weight: 600; }
.avertissements p + p { margin-top: 6px; }

/* Bas de pied de page */
.pied-legal { font-size: .82rem; }
.pied-legal p { margin: 0 0 8px; }
.grille-vide { padding: 28px 0; }
.logos-paiement { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.logos-paiement svg { width: 42px; height: 26px; }
.lien-retractation { font-weight: 600; text-decoration: underline; }

/* Recherche */
.recherche { position: fixed; inset: 0; z-index: 80; background: var(--fond); padding: 16px; overflow-y: auto; }
.recherche-barre { display: flex; gap: 8px; max-width: 720px; margin: 0 auto 16px; align-items: center; }
.recherche-barre input { flex: 1; min-width: 0; padding: 12px 14px; font-size: 1.05rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }
.recherche-barre button { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.recherche-resultats { max-width: 720px; margin: 0 auto; }
.recherche-resultat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bord); text-decoration: none; }
.recherche-resultat img { width: 60px; height: 80px; object-fit: cover; border-radius: var(--rayon); }
.recherche-resultat span { flex: 1; min-width: 0; }

/* Textes légaux */
.legal { max-width: 780px; margin: 0 auto; padding: 40px 16px 72px; }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.legal h2 { font-size: 1.25rem; margin-top: 2em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.4em; }
.legal ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.legal li { margin-bottom: .35em; }
.legal a { text-decoration: underline; }
.legal-intro { font-size: 1.1rem; color: var(--texte-doux); }
.legal table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bord); }
.legal .tableau { overflow-x: auto; }
.legal-mise-a-jour { font-size: .85rem; color: var(--texte-doux); margin-top: 2.5em; }
.encadre { border: 1px solid var(--bord); background: var(--fond-2); padding: 16px 18px; border-radius: var(--rayon); margin: 1em 0; font-size: .95rem; }
.faq details { border-bottom: 1px solid var(--bord); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details div { padding-top: 10px; }

/* Formulaires */
.formulaire label, .ck-form label { display: block; margin-bottom: 14px; font-size: .92rem; font-weight: 600; }
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select,
.ck-form input:not([type="checkbox"]), .ck-form select {
  display: block; width: 100%; margin-top: 6px; padding: 12px; font-weight: 400; font-size: 16px; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.bouton-secondaire { width: auto !important; margin-top: 8px; background: none !important; color: var(--texte) !important; border: 1px solid var(--bord) !important; }
.form-message { font-size: .92rem; margin: 10px 0 0; min-height: 1.2em; }
.form-message.ok { color: #1c6b3c; }
.form-message.erreur { color: #a4262c; }
.contact-grille { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .contact-grille { grid-template-columns: 1fr 1.3fr; } }
.newsletter-note { font-size: .78rem; margin: 8px 0 0; color: var(--texte-doux); }

/* Commande */
.ck h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.ck h2 { font-size: 1.1rem; }
.ck-grille { display: grid; gap: 28px; grid-template-columns: 1fr; }
.ck-resume { order: -1; background: var(--fond-2); padding: 16px; border-radius: var(--rayon); align-self: start; }
@media (min-width: 900px) { .ck-grille { grid-template-columns: 1.3fr 1fr; } .ck-resume { order: 0; position: sticky; top: 20px; } }
.ck-form section { margin-bottom: 26px; }
.ck-duo { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ck-ligne { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.ck-ligne img { width: 56px; height: 74px; object-fit: cover; border-radius: var(--rayon); }
.ck-ligne div { flex: 1; min-width: 0; }
.ck-ligne span, .ck-ligne small { display: block; }
.ck-ligne small { color: var(--texte-doux); }
.ck-totaux { border-top: 1px solid var(--bord); margin-top: 8px; padding-top: 10px; }
.ck-totaux > div { display: flex; justify-content: space-between; padding: 3px 0; }
.ck-total { font-size: 1.15rem; font-weight: 600; margin-top: 6px; }
.ck-securite, .ck-note { font-size: .85rem; color: var(--texte-doux); margin: 10px 0; }
.ck-indisponible { padding: 14px; background: var(--fond-2); border-radius: var(--rayon); }
.ck-form .ck-cgv { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.ck-cgv input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
[data-payer]:disabled { opacity: .72; cursor: not-allowed; }

/* Consentement */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 480px; margin: 0 auto; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); font-size: .9rem; }
.consent p { margin-bottom: 10px; }
.consent div { display: flex; gap: 8px; }
.consent button { flex: 1; padding: 10px; border: 1px solid var(--texte); background: var(--fond); border-radius: var(--rayon); }

@font-face{font-family:"Overpass";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/overpass-400.woff2) format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/overpass-600.woff2) format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/overpass-800.woff2) format("woff2")}
@font-face{font-family:"Overpass Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/overpass-mono-500.woff2) format("woff2")}

/* ==========================================================================
   ERROR : une carte topographique qu'on descend.
   Teintes hypsométriques (glacier, roche, lichen, blé), courbes de niveau,
   coin de carte plié, tracé de sentier, altimètre.
   ========================================================================== */
:root {
  --ivoire: #f3f1e7; --lichen: #5c7a4f; --balise: #d04e13; --encre: #1f2a24;
  --lichen-fonce: #46603b; --balise-texte: #ad3e0b;
  --t-sommet: #e2ebe9; --t-crete: #e9e4d2; --t-foret: #dde6ce; --t-vallee: #f1e3c5;
  --l-sommet: #9dbcbe; --l-crete: #bfb394; --l-foret: #97b083; --l-vallee: #d9b77f;
  --fond: var(--ivoire); --fond-2: #e8e5d5; --texte: var(--encre); --texte-doux: #4c564f;
  --accent: #c94b12; --accent-texte: #ffffff; --bord: #c4c1ae; --rayon: 0px;
  --police-titre: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --police-texte: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --mono: "Overpass Mono", ui-monospace, Menlo, Consolas, monospace;
  --pli: 20px; --pli-teinte: #cfc9b2; --entete: 58px; --rail: 0px; --trait: 1.5px solid var(--encre);
}

html { scroll-padding-top: 72px; }
body { font-size: 1rem; line-height: 1.5; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.012em; }
h1 { line-height: 1.02; }
a { text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--balise); outline-offset: 2px; }
.evitement { background: var(--encre); color: var(--ivoire); }

.sac-liste, .profil-etages, .histoire-route { list-style: none; margin: 0; padding: 0; }
.insecable { white-space: nowrap; }
.repere { font: 500 .8125rem/1.3 var(--mono); letter-spacing: .02em; color: var(--balise-texte); margin: 0 0 8px; }

/* Les courbes de niveau en ligne : elles se dessinent à l'apparition. */
.courbes { fill: none; stroke: var(--ligne, var(--l-crete)); stroke-width: .9; stroke-linejoin: round; }
.courbes .m { stroke-width: 1.8; }
.courbes text { fill: var(--ligne-texte, var(--texte-doux)); stroke: none; font: 500 10px var(--mono); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; }
.anim .courbes[data-apparait] { opacity: 1; transform: none; transition: none; }
.anim .courbes[data-apparait] path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.3, .1, .3, 1); }
.anim .courbes[data-apparait] path:nth-child(3n) { transition-delay: .18s; }
.anim .courbes[data-apparait] path:nth-child(3n+1) { transition-delay: .36s; }
.anim .courbes[data-apparait] text { opacity: 0; transition: opacity .6s 1.6s; }
.anim .courbes[data-apparait].vu path { stroke-dashoffset: 0; }
.anim .courbes[data-apparait].vu text { opacity: 1; }

/* Les boutons : un rectangle de carte, coin plié en haut à droite. */
.bouton, .achat-bouton, .tiroir-commander, [data-payer], .formulaire button[type="submit"], .formulaire [data-confirmer], .barre-achat button {
  font-family: var(--police-titre); font-weight: 800; font-size: 1.0625rem; line-height: 1.2; letter-spacing: 0;
  padding: 16px 20px 13px; min-height: 52px; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  transition: background .15s;
}
.bouton:hover, .achat-bouton:hover, .tiroir-commander:hover, .formulaire button[type="submit"]:hover, .barre-achat button:hover { background: #a93d0c; }
.bouton:focus-visible, .achat-bouton:focus-visible, .tiroir-commander:focus-visible, [data-payer]:focus-visible, .barre-achat button:focus-visible { outline: 3px solid var(--encre); outline-offset: -5px; }

.lien-sentier { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--texte); text-decoration: none; background: linear-gradient(90deg, var(--balise) 58%, transparent 0) 0 calc(100% - 7px) / 11px 2px repeat-x; }
.lien-sentier:hover { color: var(--balise-texte); }

/* --------------------------------------------------------------- l'entête */
.entete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 2px; height: var(--entete); padding: 0 6px; background: var(--fond); border-bottom: var(--trait); }
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: auto; padding: 2px 4px; color: var(--texte); text-decoration: none; font: 800 1.3125rem/1 var(--police-titre); letter-spacing: -.02em; }
.logo-signe { width: 31px; height: 28px; flex: none; }
.logo-coeur { fill: var(--balise); }
.logo span { padding-top: 3px; }
.entete-menu, .entete-outil, .entete-panier { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; background: none; border: 0; padding: 0 6px; font-weight: 600; }
.entete-menu svg, .entete-outil svg, .entete-panier svg { width: 24px; height: 24px; }
.entete-etages { display: none; }
.entete-panier-mot { display: none; }
.compteur { display: inline-block; min-width: 21px; padding: 3px 5px 1px; text-align: center; background: var(--encre); color: var(--ivoire); font: 500 .75rem/1.3 var(--mono); }
.compteur[data-n]:not([data-n="0"]) { background: var(--accent); color: #fff; }
.entete-sobre { justify-content: space-between; padding: 0 16px; }
.entete-sobre .logo { margin: 0; }
.entete-retour { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9375rem; color: var(--texte); }

/* -------------------------------------------- l'altimètre : pastille mobile */
.altimetre { position: fixed; top: calc(var(--entete) + 7px); right: 8px; z-index: 25; pointer-events: none; }
.alti-etages { display: none; }
.alti-curseur { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 3px 9px 0 8px; background: var(--fond); border: var(--trait); font: 500 .8125rem/1 var(--mono); white-space: nowrap; }
.alti-curseur::before { content: ""; width: 11px; height: 10px; margin-top: -3px; background: var(--balise); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------------------------------------------------------- le menu mobile */
.menu { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; background: var(--fond); overflow-y: auto; transform: translateX(-100%); transition: transform .26s ease; }
.menu.ouvert { transform: none; }
.menu-tete { display: flex; align-items: center; justify-content: space-between; height: var(--entete); padding: 0 6px; border-bottom: var(--trait); flex: none; }
.menu-fermer { width: 44px; height: 44px; background: none; border: 0; font-size: 2rem; line-height: 1; }
.menu-etages { flex: none; }
.menu-etage { display: flex; align-items: baseline; justify-content: space-between; padding: 19px 16px 14px; border-bottom: var(--trait); color: var(--texte); text-decoration: none; }
.menu-etage strong { font: 800 2.125rem/1 var(--police-titre); letter-spacing: -.02em; }
.menu-etage span { font: 500 .9375rem/1 var(--mono); }
.menu-sommet { background: var(--t-sommet); } .menu-crete { background: var(--t-crete); } .menu-foret { background: var(--t-foret); } .menu-vallee { background: var(--t-vallee); }
.menu-liens { padding: 10px 16px 28px; }
.menu-liens a { display: flex; align-items: center; min-height: 46px; color: var(--texte); text-decoration: none; font-weight: 600; font-size: 1.0625rem; border-bottom: 1px dashed var(--bord); }

/* --------------------------------------------------------- le premier écran */
.depart { --ligne: var(--l-crete); position: relative; display: grid; overflow: hidden; padding-top: 14px; background: var(--fond); }
.depart-courbes { position: absolute; top: 0; left: 0; width: 100%; height: 58%; z-index: 3; pointer-events: none; stroke: #6f7f6a; stroke-opacity: .72; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
.depart-courbes text { fill: var(--encre); }
.depart-texte { position: relative; z-index: 4; padding: 0 16px; }
.repere-depart { padding-right: 104px; }
.depart h1 { font-size: clamp(2.75rem, 13.6vw, 3.625rem); line-height: .96; letter-spacing: -.028em; margin: 0 0 8px; }
.depart-offre { font-size: 1rem; line-height: 1.38; margin: 0 0 12px; max-width: 34ch; --halo: var(--fond); }
.depart-photo { position: relative; z-index: 1; margin: 0 0 0 16px; }
.depart-photo img { width: 100%; height: clamp(280px, 45svh, 420px); object-fit: cover; object-position: 50% 26%; clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px); }
.point { position: absolute; z-index: 5; right: 48%; top: 40%; display: flex; flex-direction: row-reverse; align-items: center; gap: 9px; color: var(--texte); text-decoration: none; }
.point i { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--balise); box-shadow: 0 0 0 3px var(--ivoire), 0 0 0 4.5px var(--balise); }
.point span { display: block; padding: 7px 10px 4px; background: var(--fond); border: var(--trait); font: 500 .8125rem/1.3 var(--mono); white-space: nowrap; }
.point b { display: block; font: 800 .9375rem/1.2 var(--police-titre); }
.depart-action { position: relative; z-index: 4; padding: 12px 16px 16px; }
.depart-action .bouton { display: block; width: 100%; }
.depart-promesses { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 10px; font-size: .875rem; }
.depart-promesses li { display: inline-flex; align-items: center; gap: 6px; }
.depart-promesses li:nth-child(2) { display: none; }
.sym { width: 28px; height: 14px; flex: none; color: var(--encre); }

/* ------------------------------------------------------- les quatre étages */
.etage { --t: var(--t-sommet); --ligne: var(--l-sommet); --avant: var(--ivoire); --halo: var(--t); position: relative; overflow: clip; padding: 66px 16px 44px; background: var(--t); }
.etage-crete { --t: var(--t-crete); --ligne: var(--l-crete); --avant: var(--t-sommet); }
.etage-foret { --t: var(--t-foret); --ligne: var(--l-foret); --avant: var(--t-crete); }
.etage-vallee { --t: var(--t-vallee); --ligne: var(--l-vallee); --avant: var(--t-foret); }
.etage-bord { position: absolute; top: -1px; left: 0; width: 100%; height: 46px; z-index: 2; fill: var(--avant); }
.etage > .courbes { position: absolute; top: 0; left: 0; width: 100%; height: 620px; stroke-width: 1; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent); mask-image: linear-gradient(to bottom, #000 58%, transparent); }
.etage > .courbes .m { stroke-width: 1.9; }
.etage > .courbes text { font-size: 11px; }
.etage-dedans { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.etage-alt { font: 800 clamp(4.25rem, 22vw, 7rem)/.86 var(--police-titre); letter-spacing: -.045em; margin: 0 0 12px; white-space: nowrap; }
.etage-alt small { margin-left: .22em; font: 500 1.125rem/1 var(--mono); letter-spacing: 0; }
.etage h2 { display: inline; font-size: 1.625rem; margin: 0; }
.etage-condition { display: inline; margin: 0 0 0 8px; padding: 3px 7px 0; background: var(--encre); color: var(--ivoire); font: 500 .8125rem/1 var(--mono); vertical-align: 3px; }
.etage-phrase { margin: 10px 0 2px; max-width: 42ch; font-size: 1.0625rem; line-height: 1.4; }
.etage-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 18px; }
.carte-grande { grid-column: 1 / -1; }
.carte-grande .carte-nom { font-size: 1.25rem; }

/* ---------------------------------------- les cartes : coin coupé, plié vers l'avant */
.carte > a { display: block; color: var(--texte); text-decoration: none; }
.carte-pli { position: relative; display: block; }
.carte-pli img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; clip-path: polygon(0 0, calc(100% - var(--pli)) 0, 100% var(--pli), 100% 100%, 0 100%); }
.carte-pli::after { content: ""; position: absolute; top: 0; right: 0; width: var(--pli); height: var(--pli); background: linear-gradient(to top right, var(--pli-teinte) 49%, var(--encre) 49.5%, var(--encre) 52%, transparent 52.5%); }
.carte-nom { font-size: 1.0625rem; line-height: 1.2; margin: 10px 0 3px; }
.carte > a:hover .carte-nom { color: var(--balise-texte); }
.carte-alt { font: 500 .75rem/1.3 var(--mono); color: var(--texte-doux); margin: 0 0 3px; }
.carte-prix { font-weight: 600; margin: 0; }

/* ------------------------------------------------- le sac du dimanche */
.sac { --grille: rgba(92, 122, 79, .17); position: relative; padding: 44px 16px 40px; background-color: var(--fond); background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 56px 56px; }
.sac-dedans { max-width: 1160px; margin: 0 auto; }
.sac-tete h2 { font-size: clamp(2.25rem, 10.4vw, 4rem); line-height: 1; letter-spacing: -.028em; margin-bottom: 10px; }
.sac-tete > p:last-child { font-size: 1.0625rem; line-height: 1.4; max-width: 44ch; }
.sac-liste { margin-top: 20px; border-top: var(--trait); }
.sac-ligne { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "n o o" "n p a"; gap: 8px 8px; padding: 14px 0; border-bottom: 1.5px dashed var(--encre); background: var(--fond); }
.sac-numero { grid-area: n; font: 800 1.75rem/1 var(--police-titre); color: var(--balise-texte); }
.sac-objet { grid-area: o; }
.sac-objet h3 { font-size: 1.1875rem; margin: 0 0 1px; }
.sac-objet p { margin: 0; font-size: .9375rem; color: var(--texte-doux); }
.sac-piece { grid-area: p; display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--texte); text-decoration: none; }
.sac-vignette { flex: none; width: 54px; }
.sac-vignette img { width: 54px; height: 66px; object-fit: cover; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); }
.sac-piece strong { display: block; font-weight: 600; line-height: 1.2; }
.sac-piece em { font: 500 .8125rem/1.3 var(--mono); font-style: normal; color: var(--texte-doux); }
.sac-action { grid-area: a; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 84px; padding: 3px 10px 0; background: var(--fond); border: var(--trait); color: var(--texte); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.sac-action:hover { background: var(--encre); color: var(--ivoire); }

/* -------------------------------------------- la légende de carte */
.legende { padding: 24px 16px 44px; background: var(--fond); }
.legende-cadre { position: relative; max-width: 1160px; margin: 0 auto; padding: 20px 16px 8px; background: var(--fond); border: var(--trait); outline: 1px solid var(--encre); outline-offset: 3px; }
.legende h2 { font: 500 .875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.legende li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0 9px; border-top: 1px solid var(--bord); }
.legende .sym { margin-top: 3px; }
.legende strong, .legende span { display: block; }
.legende strong { font-weight: 600; line-height: 1.25; }
.legende span { font-size: .875rem; color: var(--texte-doux); line-height: 1.35; }

/* -------------------------------------------------------- le pied de page */
.pied { position: relative; overflow: hidden; padding: 36px 16px 24px; background: var(--fond-2); border-top: var(--trait); }
.pied::before { content: ""; position: absolute; inset: 0; background: var(--l-crete); opacity: .6; -webkit-mask: url(/img/topo/pied.svg) center / cover no-repeat; mask: url(/img/topo/pied.svg) center / cover no-repeat; pointer-events: none; }
.pied > * { position: relative; }
.pied-dedans { max-width: 1240px; margin: 0 auto; }
.pied .logo { margin: 0 0 6px -4px; }
.pied-slogan { font: 800 1.75rem/1.05 var(--police-titre); letter-spacing: -.02em; margin: 0 0 8px; }
.pied-appel { margin: 0 0 12px; max-width: 34ch; }
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; max-width: 420px; }
.newsletter input[type="email"] { min-width: 0; height: 50px; padding: 4px 12px 0; background: var(--ivoire); border: var(--trait); border-right: 0; border-radius: 0; font-size: 16px; }
.newsletter button { height: 50px; padding: 4px 16px 0; background: var(--encre); color: var(--ivoire); border: 0; font-weight: 600; }
.newsletter button:hover { background: var(--accent); }
.newsletter .form-message, .newsletter .newsletter-note { grid-column: 1 / -1; }
.newsletter .form-message { min-height: 0; margin: 6px 0 0; }
.newsletter-note { color: var(--texte-doux); font-size: .8125rem; }
.pied-legende { margin-top: 30px; padding: 16px; background: var(--fond); border: var(--trait); outline: 1px solid var(--encre); outline-offset: 3px; }
.pied-legende-titre { font: 500 .875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }
.pied-colonnes { display: grid; gap: 18px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pied-colonnes h3 { font-size: 1rem; margin: 0 0 3px; }
.pied-colonnes ul a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9375rem; line-height: 1.2; color: var(--texte); text-decoration: none; }
.pied-colonnes ul a:hover span { text-decoration: underline; }
.pied-colonnes .sym { width: 21px; height: 11px; }
.pied-colonnes small { display: block; font: 500 .75rem/1.2 var(--mono); color: var(--texte-doux); }
.teinte { flex: none; width: 21px; height: 21px; border: var(--trait); }
.teinte-sommet { background: var(--t-sommet); } .teinte-crete { background: var(--t-crete); } .teinte-foret { background: var(--t-foret); } .teinte-vallee { background: var(--t-vallee); }
.pied-legal { max-width: 1240px; margin: 24px auto 0; padding-top: 14px; border-top: var(--trait); font-size: .875rem; }
.pied-legal-coord a, .pied-legal-liens a, .newsletter-note a { display: inline-flex; align-items: center; min-height: 44px; }
.pied-legal-liens { margin-bottom: 2px; }
.pied-legal a { color: var(--texte); }
.pied-legal-copy { font: 500 .75rem/1.3 var(--mono); color: var(--texte-doux); }
.logos-paiement svg { width: 44px; height: 28px; }
.pied-sobre { padding-top: 20px; }
.pied-sobre::before { display: none; }
.pied-sobre-liens { display: flex; flex-wrap: wrap; gap: 0 18px; max-width: 1120px; margin: 0 auto; }
.pied-sobre-liens a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte); font-size: .9375rem; }
.pied-sobre .pied-legal { max-width: 1120px; margin-top: 8px; }

/* ------------------------------------------- boutique et familles */
.rayon { padding-bottom: 44px; background: linear-gradient(to bottom, var(--t-sommet), var(--t-crete) 34%, var(--t-foret) 67%, var(--t-vallee)); }
.rayon-tete { position: relative; overflow: hidden; padding: 24px 16px 18px; background: var(--fond); border-bottom: var(--trait); }
.rayon-tete::before, .legal-entete::before, .tiroir-entete::before { content: ""; position: absolute; inset: 0; background: var(--l-sommet); -webkit-mask: url(/img/topo/tete.svg) right center / cover no-repeat; mask: url(/img/topo/tete.svg) right center / cover no-repeat; pointer-events: none; }
.rayon-tete > * { position: relative; }
.rayon-tete .repere { padding-right: 104px; }
.rayon-tete h1 { font-size: clamp(2.375rem, 11.6vw, 4.75rem); letter-spacing: -.028em; margin: 0 0 6px; }
.rayon-sous { margin: 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.4; }
.filtres { padding: 12px 0 2px; }
.filtres-puces { display: flex; gap: 6px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; }
.filtres-puces::-webkit-scrollbar { display: none; }
.puce { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 3px 12px 0; background: var(--fond); border: var(--trait); border-radius: 0; font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.puce i { width: 13px; height: 13px; margin-top: -3px; border: 1px solid var(--encre); }
.puce-sommet i { background: var(--t-sommet); } .puce-crete i { background: var(--t-crete); } .puce-foret i { background: var(--t-foret); } .puce-vallee i { background: var(--t-vallee); }
.puce:hover { background: #fff; }
.puce.actif { background: var(--encre); color: var(--ivoire); }
.filtres-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 2px 16px 12px; }
.compte { margin: 0; font: 500 .8125rem/1.2 var(--mono); }
.tri { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: .9375rem; }
.tri select { min-height: 44px; max-width: 200px; padding: 3px 8px 0; font-size: 16px; background: var(--fond); border: var(--trait); border-radius: 0; }
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; padding: 0 16px; }
.grille-vide { padding: 24px 16px; }
.grille-vide p { font-size: 1.1875rem; font-weight: 600; margin-bottom: 12px; }
.rayon-autres { max-width: 1240px; margin: 32px auto 0; padding: 0 16px; }
.rayon-autres li { border-top: 1.5px dashed var(--encre); }
.rayon-autres a { display: flex; align-items: center; gap: 8px; min-height: 50px; font-weight: 600; color: var(--texte); text-decoration: none; }

/* ------------------------------------------------------- la fiche produit */
.page-produit main { background: linear-gradient(to bottom, var(--fond), var(--fond)); }
.fiche-images { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: 16px; }
.fiche-images::-webkit-scrollbar { display: none; }
.fiche-image { flex: 0 0 92%; scroll-snap-align: start; }
.fiche-image img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.fiche-corps { padding: 14px 16px 12px; }
.fil { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding-right: 96px; font: 500 .8125rem/1.3 var(--mono); color: var(--texte-doux); }
.fil { align-items: center; }
.fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-doux); }
.fiche h1 { font-size: clamp(2rem, 9vw, 3.25rem); letter-spacing: -.025em; margin: 0 0 8px; }
.fiche-ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 6px; }
.fiche-prix { font-weight: 800; font-size: 1.5rem; }
.fiche-prix small { font: 500 .75rem/1 var(--mono); color: var(--texte-doux); }
.fiche-alt { font: 500 .8125rem/1.3 var(--mono); color: var(--balise-texte); }
.fiche-resume { font-size: 1.0625rem; line-height: 1.4; margin: 0 0 12px; }
.profil { margin: 0 0 14px; padding: 8px 0 0; border-top: var(--trait); }
.profil figcaption { font: 500 .8125rem/1.3 var(--mono); margin-bottom: 4px; }
.profil svg { display: block; width: 100%; height: 86px; }
.profil-aire { fill: var(--fond-2); }
.profil-aire.on.profil-sommet { fill: var(--t-sommet); } .profil-aire.on.profil-crete { fill: var(--t-crete); } .profil-aire.on.profil-foret { fill: var(--t-foret); } .profil-aire.on.profil-vallee { fill: var(--t-vallee); }
.profil-aire:not(.on) { fill: transparent; }
.profil-ligne { fill: none; stroke: var(--encre); stroke-width: 1.5; stroke-opacity: .45; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.profil-ligne.on { stroke: var(--balise); stroke-width: 3.5; stroke-opacity: 1; }
.profil-sep { stroke: var(--encre); stroke-width: 1; stroke-dasharray: 3 4; stroke-opacity: .5; vector-effect: non-scaling-stroke; }
.profil-point, .profil-coeur { display: none; }
.profil-etages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profil-etages a { display: block; min-height: 44px; padding: 6px 0 2px 5px; color: var(--texte-doux); text-decoration: none; border-left: 1px dashed rgba(31, 42, 36, .5); }
.profil-etages li:first-child a { padding-left: 0; border-left: 0; }
.profil-etages strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.2; }
.profil-etages span { display: block; font: 500 .6875rem/1.3 var(--mono); }
.profil-etages .on a { color: var(--texte); }
.profil-etages .on strong { font-weight: 800; color: var(--balise-texte); }
.profil-note { margin: 6px 0 0; font-size: .8125rem; color: var(--texte-doux); }
.fiche-infos { margin-bottom: 14px; border-top: var(--trait); }
.fiche-infos > div { padding: 8px 0 6px; border-bottom: 1px dashed var(--encre); }
.fiche-infos dt { font: 500 .8125rem/1.5 var(--mono); }
.fiche-infos dd { font-weight: 600; }
.achat-option legend { font-weight: 800; }
.achat-choix span { min-width: 54px; padding: 12px 10px 8px; border: var(--trait); border-radius: 0; font-weight: 600; background: var(--fond); }
.achat-choix input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--ivoire); }
.achat-erreur { color: var(--balise-texte); font-weight: 600; }
.achat-guide { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 4px; font-size: .9375rem; color: var(--texte); }
.fiche-promesses { margin: 10px 0 14px; font-size: .9375rem; }
.fiche-promesses li { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.fiche-texte { padding-top: 14px; border-top: var(--trait); }
.fiche-texte h2 { font-size: 1.375rem; margin-bottom: 6px; }
.fiche-details { margin-bottom: 12px; }
.fiche-details li { position: relative; padding: 4px 0 2px 20px; }
.fiche-details li::before { content: ""; position: absolute; left: 1px; top: 9px; width: 10px; height: 9px; background: var(--lichen); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fiche-conformite { border-top: var(--trait); border-bottom: var(--trait); }
.fiche-conformite summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 600; cursor: pointer; list-style: none; }
.fiche-conformite summary::-webkit-details-marker { display: none; }
.fiche-conformite summary::after { content: "+"; font: 500 1.25rem/1 var(--mono); }
.fiche-conformite[open] summary::after { content: "–"; }
.bloc-conformite { color: var(--texte-doux); font-size: .875rem; padding-bottom: 8px; }
.meme-sac { position: relative; padding: 34px 16px 40px; background: var(--t-foret); border-top: var(--trait); }
.meme-sac-dedans { max-width: 1160px; margin: 0 auto; }
.meme-sac h2 { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -.025em; margin-bottom: 14px; }
.meme-sac-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.meme-sac-grille .carte:nth-child(3) { grid-column: 1 / -1; }
.meme-sac-grille .carte:nth-child(3) > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
.meme-sac-grille .carte:nth-child(3) .carte-pli { grid-row: 1 / span 4; }
.meme-sac-grille .carte:nth-child(3) .carte-nom { margin-top: 0; }
.barre-achat { border-top: var(--trait); padding-top: 8px; }
.barre-achat-texte span { font-weight: 600; font-size: .9375rem; }
.barre-achat-texte strong { font: 500 .8125rem/1.3 var(--mono); }
.barre-achat button { padding: 13px 24px 10px; min-height: 46px; }

/* --------------------------------------------------- notre histoire */
.histoire-tete { --ligne: var(--l-sommet); position: relative; display: grid; overflow: hidden; padding: 24px 16px 0; background: var(--t-sommet); }
.histoire-tete > .courbes { position: absolute; inset: 0; width: 100%; height: 100%; }
.histoire-mots, .histoire-photo { position: relative; }
.histoire-mots .repere { padding-right: 104px; }
.histoire-tete h1 { font-size: clamp(2.5rem, 12vw, 5.25rem); letter-spacing: -.03em; line-height: .98; margin: 0 0 12px; }
.histoire-mots > p:last-child { font-size: 1.125rem; line-height: 1.42; max-width: 40ch; }
.histoire-photo { margin: 8px 0 -36px; }
.histoire-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.histoire-route { position: relative; padding: 70px 16px 16px 46px; background: var(--fond); }
.histoire-route::before { content: ""; position: absolute; top: 74px; bottom: 24px; left: 23px; border-left: 2px dashed var(--balise); }
.histoire-route li { position: relative; max-width: 620px; padding-bottom: 34px; }
.histoire-route li::before { content: ""; position: absolute; left: -31px; top: 1px; width: 15px; height: 15px; border-radius: 50%; background: var(--balise); box-shadow: 0 0 0 3px var(--fond); }
.histoire-alt { font: 500 .875rem/1.3 var(--mono); color: var(--balise-texte); margin: 0 0 4px; }
.histoire-route h2, .histoire-fin h2 { font-size: 1.625rem; margin-bottom: 8px; }
.histoire-route li > p:last-child { font-size: 1.0625rem; line-height: 1.5; margin: 0; }
.histoire-fin { display: grid; gap: 16px; padding: 0 16px 44px; background: var(--fond); }
.histoire-fin figure { margin: 0; }
.histoire-fin img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }

/* ------------------------------------------------------ hors sentier */
.hors-sentier figure { margin: 0; }
.hors-sentier img { width: 100%; height: 34svh; object-fit: cover; }
.hors-sentier-mots { padding: 22px 16px 44px; }
.hors-sentier h1 { font-size: clamp(3rem, 15vw, 6rem); letter-spacing: -.03em; margin: 0 0 8px; }
.hors-sentier-mots > p:nth-of-type(2) { font-size: 1.125rem; }
.hors-sentier-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }

/* ------------------------------ pages légales : un carnet de route */
.legal { max-width: none; padding: 0 0 56px; }
.legal-entete { position: relative; overflow: hidden; padding: 24px 16px 18px; background: var(--t-sommet); border-bottom: var(--trait); }
.legal-entete > * { position: relative; }
.legal-entete .repere { padding-right: 104px; }
.legal-entete h1 { font-size: clamp(2.125rem, 10.2vw, 4.25rem); letter-spacing: -.026em; margin: 0 0 6px; max-width: 18ch; }
.legal-intro { margin: 8px 0 0; color: var(--texte); max-width: 56ch; }
.legal-corps { position: relative; max-width: 800px; margin: 0 auto; padding: 22px 16px 0; }
.legal-route .legal-corps { padding-left: 46px; counter-reset: repere; }
.legal-route .legal-corps::before { content: ""; position: absolute; left: 22px; top: 30px; bottom: 0; border-left: 2px dashed var(--lichen); }
.legal-route .legal-corps h2 { position: relative; font-size: 1.3125rem; line-height: 1.2; margin: 1.7em 0 .5em; counter-increment: repere; }
.legal-route .legal-corps > h2:first-child { margin-top: 0; }
.legal-route .legal-corps h2::before { content: ""; position: absolute; left: -31px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--balise); box-shadow: 0 0 0 3px var(--fond); }
.legal h3 { font-size: 1.0625rem; }
.legal table { font-size: .9375rem; }
.legal th { font: 500 .8125rem/1.3 var(--mono); border-bottom: var(--trait); }
.legal td { border-bottom: 1px dashed var(--encre); }
.legal-mise-a-jour { font-family: var(--mono); font-size: .8125rem; }
.encadre { padding: 14px 16px; background: var(--t-foret); border: var(--trait); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.a-completer { border-radius: 0; }
.legal-faq .legal-corps { max-width: 820px; }
.faq details { padding: 0; border-bottom: 1.5px dashed var(--encre); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 11px 0 8px; font-size: 1.0625rem; line-height: 1.25; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 500 1.375rem/1 var(--mono); color: var(--balise-texte); }
.faq details[open] summary::after { content: "–"; }
.faq details div { padding: 0 0 8px; }
.legal-contact .legal-corps { max-width: 1120px; }
.contact-infos h2, .formulaire h2 { font-size: 1.375rem; margin-top: 0; }
.legal th, .legal td { padding-left: 6px; padding-right: 6px; }
.legal-route .legal-corps table { font-size: .875rem; }
.contact-infos { align-self: start; padding: 16px; background: var(--t-crete); border: var(--trait); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }

/* Le pli des feuilles encadrées, et le halo des étiquettes de carte. */
.ck-resume::after, .panier-total::after, .contact-infos::after, .encadre::after { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 22px; height: 22px; background: linear-gradient(to top right, var(--pli-teinte) 49%, var(--encre) 49.5%, var(--encre) 53%, transparent 53.5%); }
.encadre::after { width: 16px; height: 16px; }
.panier-total, .contact-infos, .encadre { position: relative; }
.depart-offre, .etage-phrase, .rayon-sous, .legal-intro, .histoire-mots > p:last-child { text-shadow: 0 0 2px var(--halo, var(--fond)), 0 0 2px var(--halo, var(--fond)), 0 0 5px var(--halo, var(--fond)), 0 0 5px var(--halo, var(--fond)), 0 0 9px var(--halo, var(--fond)); }
.histoire-tete, .legal-entete { --halo: var(--t-sommet); }

/* ------------------------------------------------------- les formulaires */
.formulaire label, .ck-form label { font-weight: 600; font-size: .9375rem; }
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select,
.ck-form input:not([type="checkbox"]), .ck-form select { padding: 13px 12px 10px; background: #fbfaf4; border: var(--trait); border-radius: 0; }
.formulaire input:focus, .formulaire textarea:focus, .ck-form input:focus, .ck-form select:focus { outline: 2px solid var(--balise); outline-offset: 0; }
.bouton-secondaire { border: var(--trait) !important; clip-path: none !important; min-height: 48px; padding: 12px 16px 9px; font-weight: 600; }
.form-message.erreur { color: var(--balise-texte); font-weight: 600; }
.form-message.ok { color: var(--lichen-fonce); font-weight: 600; }

/* -------------------------------- le tiroir : une feuille de carte dépliée */
.voile { background: rgba(31, 42, 36, .42); }
.tiroir { width: min(440px, 100%); clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px); border-left: var(--trait); }
.tiroir-entete { position: relative; overflow: hidden; min-height: 76px; padding: 18px 12px 12px 34px; background: var(--t-sommet); border-bottom: var(--trait); }
.tiroir-entete::before { -webkit-mask-image: url(/img/topo/tiroir.svg); mask-image: url(/img/topo/tiroir.svg); }
.tiroir-entete h2, .tiroir-fermer { position: relative; }
.tiroir-entete h2 { font-size: 1.625rem; letter-spacing: -.02em; padding-top: 4px; }
.tiroir-fermer { width: 44px; height: 44px; padding: 0; font-size: 2rem; }
.tiroir-liste { position: relative; padding: 4px 16px 8px; counter-reset: repere; }
.ligne-panier { position: relative; padding: 14px 0 14px 34px; gap: 12px; border-bottom: 0; counter-increment: repere; }
.ligne-panier::before { content: counter(repere); position: absolute; z-index: 1; left: 0; top: 14px; width: 23px; height: 23px; padding-top: 3px; text-align: center; background: var(--accent); color: #fff; font: 500 .75rem/20px var(--mono); }
.ligne-panier::after { content: ""; position: absolute; left: 11px; top: 14px; bottom: -14px; border-left: 2px dashed var(--lichen); }
.ligne-panier:last-child::after { bottom: 14px; }
.ligne-panier img { width: 76px; height: 98px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); }
.ligne-nom { display: flex; align-items: center; min-height: 44px; margin: -12px 0 -7px; font-weight: 800; line-height: 1.2; color: var(--texte); }
.ligne-option { font: 500 .8125rem/1.5 var(--mono); }
.quantite { border: var(--trait); border-radius: 0; }
.quantite button { width: 44px; height: 44px; }
.quantite span { font: 500 .9375rem/1 var(--mono); padding-top: 2px; }
.ligne-retirer { display: inline-flex; align-items: center; min-height: 44px; min-width: 56px; padding: 0; font-size: .875rem; color: var(--texte-doux); }
.panier-vide { padding: 36px 8px; }
div.page-panier .panier-vide { padding: 18px 0 24px; text-align: left; }
.panier-vide p { font-size: 1.1875rem; font-weight: 600; }
.panier-vide a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--balise-texte); }
.tiroir-pied { position: relative; padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--t-crete); border-top: var(--trait); }
.tiroir-ligne { font-weight: 800; font-size: 1.1875rem; }
.tiroir-note { color: var(--texte); font-size: .875rem; }
.tiroir-voir { color: var(--texte); min-height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* Panier et commande : le relief continue sous le titre. */
.page-panier main, .page-commander main { position: relative; }
.page-panier main::before, .page-commander main::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: var(--l-crete); -webkit-mask: url(/img/topo/tete.svg) right top / cover no-repeat; mask: url(/img/topo/tete.svg) right top / cover no-repeat; pointer-events: none; }
.page-panier main > *, .page-commander main > * { position: relative; }

/* --------------------------------------------------- la page panier */
div.page-panier { max-width: 1120px; padding: 24px 16px 56px; }
.page-panier h1 { font-size: clamp(2.375rem, 11vw, 4rem); letter-spacing: -.026em; margin-bottom: 14px; }
.panier-lignes { counter-reset: repere; border-top: var(--trait); }
.panier-total { margin-top: 18px; max-width: 440px; padding: 16px; background: var(--t-crete); border: var(--trait); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }

/* -------------------------------------- la commande : dernière étape du sentier */
.ck { max-width: 1120px; padding: 22px 16px 44px; }
.ck h1 { font-size: clamp(2.25rem, 10vw, 3.5rem); letter-spacing: -.026em; margin-bottom: 14px; }
.ck h2 { font-size: 1.3125rem; }
.ck-form { position: relative; padding-left: 30px; }
.ck-form::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 96px; border-left: 2px dashed var(--lichen); }
.ck-form section { position: relative; margin-bottom: 24px; }
.ck-form section::before { content: ""; position: absolute; left: -29px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--balise); box-shadow: 0 0 0 3px var(--fond); }
.ck-form section h2::before { display: block; font: 500 .8125rem/1.4 var(--mono); letter-spacing: .02em; color: var(--balise-texte); }
.ck-form section:nth-of-type(1) h2::before { content: "Repère 1 · 900 m"; }
.ck-form section:nth-of-type(2) h2::before { content: "Repère 2 · 600 m"; }
.ck-form section:nth-of-type(3) h2::before { content: "Repère 3 · 300 m"; }
.ck-form .ck-valider::before { left: -33px; top: -2px; width: 23px; height: 21px; border-radius: 0; box-shadow: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ck-resume { position: relative; padding: 16px; background: var(--t-crete); border: var(--trait); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.ck-resume h2 { font-size: 1.25rem; }
.ck-ligne { padding: 8px 0; }
.ck-ligne img { clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); }
.ck-ligne span { font-weight: 600; line-height: 1.2; }
.ck-ligne small { font: 500 .75rem/1.4 var(--mono); }
.ck-totaux { border-top: var(--trait); }
.ck-total { font-weight: 800; }
.ck-securite, .ck-note { color: var(--texte-doux); }
.ck-indisponible { background: var(--t-sommet); border: var(--trait); border-radius: 0; }
.ck-cgv input { width: 24px; height: 24px; accent-color: var(--accent); }
[data-payer]:disabled { background: #6e6a58; opacity: 1; }

/* -------------------------------------------------- merci, recherche, consentement */
.merci { position: relative; max-width: none; padding: 56px 16px 64px; background: var(--t-foret); overflow: hidden; }
.merci::before { content: ""; position: absolute; inset: 0; background: var(--l-foret); -webkit-mask: url(/img/topo/tete.svg) center / cover no-repeat; mask: url(/img/topo/tete.svg) center / cover no-repeat; }
.merci > * { position: relative; }
.merci h1 { font-size: clamp(2.5rem, 12vw, 4.5rem); letter-spacing: -.028em; }
.recherche { background: var(--fond); padding: 12px 16px; }
.recherche-barre input { min-height: 50px; padding: 4px 12px 0; border: var(--trait); border-radius: 0; font-size: 16px; background: #fbfaf4; }
.recherche-barre button { width: 44px; height: 44px; padding: 0; }
.recherche-barre input::-webkit-search-cancel-button { display: none; }
.recherche-resultat { min-height: 64px; color: var(--texte); border-bottom: 1.5px dashed var(--encre); }
.recherche-resultat img { clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); }
.recherche-resultat span { font-weight: 600; }
.recherche-resultat strong { font: 500 .875rem/1 var(--mono); }
.consent { border: var(--trait); border-radius: 0; box-shadow: none; }
.consent button { min-height: 44px; border: var(--trait); border-radius: 0; }

/* Trois ou cinq pièces dans une famille : la première prend toute la largeur. */
@media (max-width: 759px) {
  /* Sur téléphone, la cote de cette carte tombe sous le grand chiffre et sous la phrase. */
  .etage-crete > .courbes text { display: none; }
  /* Les quatre étages tiennent sur une ligne, sans bouton coupé au bord. */
  .filtres-puces:has(.puce-sommet, .puce-vallee) { gap: 4px; }
  .puce[data-groupe="etage"] { flex: 1 1 0; justify-content: center; gap: 5px; padding-left: 6px; padding-right: 6px; }
  .grille-n3 .carte:first-child, .grille-n5 .carte:first-child { grid-column: 1 / -1; }
  .grille-n3 .carte:first-child .carte-nom, .grille-n5 .carte:first-child .carte-nom { font-size: 1.25rem; }
}

/* ==================================================== à partir de 760 px */
@media (min-width: 760px) {
  .legal td { white-space: nowrap; }
  .depart-promesses li:nth-child(2) { display: inline-flex; }
  .etage { padding: 84px 28px 60px; }
  .etage-bord { height: 56px; }
  .etage-pieces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
  .etage-trois .etage-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; padding: 0 28px; }
  .filtres-puces, .filtres-bas { padding-left: 28px; padding-right: 28px; }
  .rayon-tete, .legal-entete { padding: 36px 28px 26px; }
  .rayon-autres { padding: 0 28px; }
  .rayon-autres ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .sac { padding: 60px 28px; }
  .sac-ligne { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr) 104px; grid-template-areas: "n o p a"; align-items: center; gap: 16px; padding: 12px 0; }
  .sac-numero { font-size: 2.25rem; }
  .sac-vignette { width: 66px; }
  .sac-vignette img { width: 66px; height: 80px; }
  .legende { padding: 32px 28px 60px; }
  .legende-cadre { padding: 22px 24px 18px; }
  .legende ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .pied { padding: 44px 28px 24px; }
  .pied-colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .meme-sac { padding: 44px 28px 60px; }
  .meme-sac-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
  .meme-sac-grille .carte:nth-child(3) { grid-column: auto; }
  .meme-sac-grille .carte:nth-child(3) > a { display: block; }
  .meme-sac-grille .carte:nth-child(3) .carte-nom { margin-top: 10px; }
  .legal-corps, .legal-contact .legal-corps { padding-top: 32px; }
  .ligne-panier img { width: 84px; height: 108px; }
  .histoire-route { padding-left: 72px; }
  .histoire-route::before { left: 40px; }
}

/* ==================================================== bureau : 900 px et plus */
@media (min-width: 900px) {
  :root { --entete: 64px; --pli: 26px; }
  .entete { gap: 6px; padding: 0 20px; }
  .entete-menu { display: none; }
  .logo { margin-right: 28px; font-size: 1.4375rem; }
  .logo-signe { width: 36px; height: 33px; }
  .entete-etages { display: flex; align-items: stretch; align-self: stretch; margin-right: auto; }
  .entete-etages a { position: relative; display: inline-flex; align-items: center; padding: 3px 15px 0; color: var(--texte); text-decoration: none; font-weight: 600; }
  .entete-etages a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: -1.5px; height: 4px; background: var(--balise); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
  .entete-etages a:hover::after, .entete-etages a.ici::after, .entete-etages a[aria-current]::after { transform: none; }
  .entete-panier-mot { display: inline; padding-top: 3px; }
  .entete-panier { padding: 0 4px 0 10px; gap: 7px; }
  .menu { display: none; }

  .depart { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: 1fr auto; min-height: min(calc(100svh - var(--entete)), 860px); padding-top: 0; }
  .depart-courbes { height: 100%; -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 94%); mask-image: linear-gradient(to right, #000 62%, transparent 94%); }
  .depart-texte { grid-column: 1; align-self: end; padding: 44px 36px 18px 44px; }
  .repere-depart { padding-right: 0; }
  .depart h1 { font-size: clamp(3.75rem, 6.4vw, 6.75rem); line-height: .94; margin-bottom: 18px; text-wrap: balance; }
  .depart-offre { font-size: 1.1875rem; margin: 0; }
  .depart-action { grid-column: 1; padding: 8px 36px 40px 44px; }
  .depart-action .bouton { display: inline-block; width: auto; min-width: 280px; }
  .depart-photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .depart-photo img { position: absolute; inset: 0; height: 100%; object-position: 50% 30%; clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%, 0 44px); }
  .point { right: 56%; top: 50%; }

  .etage > .courbes { height: 100%; -webkit-mask-image: none; mask-image: none; stroke-width: .9; }
  .etage > .courbes .m { stroke-width: 1.8; }
  .etage-tete .etage-alt { font-size: clamp(6rem, 11vw, 10rem); margin-bottom: 18px; }
  .etage h2 { font-size: 2rem; }
  .etage-trois .etage-dedans { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 56px; align-items: start; }
  .etage-trois .etage-tete { position: sticky; top: calc(var(--entete) + 24px); }
  .etage-trois .etage-pieces { margin-top: 0; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .etage-trois .carte-grande { grid-column: 1; grid-row: 1 / span 2; }
  .etage-trois .carte-grande img { aspect-ratio: 3 / 4.4; }
  .etage-trois .carte:not(.carte-grande) img { aspect-ratio: 1; object-position: 50% 22%; }
  .etage-foret .etage-dedans { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
  .etage-foret .etage-tete { order: 2; }
  .etage-foret .etage-pieces { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .etage-foret .carte-grande { grid-column: 2; }
  .etage-quatre .etage-tete { display: flex; align-items: flex-end; gap: 44px; }
  .etage-quatre .etage-tete .etage-alt { margin: 0; }
  .etage-quatre .etage-mots { padding-bottom: 4px; }
  .etage-quatre .etage-pieces { margin-top: 30px; }

  .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
  .grille-n3, .grille-n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-n5 .carte:first-child { grid-column: span 2; grid-row: span 2; }
  .grille-n5 .carte:first-child .carte-nom { font-size: 1.375rem; }
  [data-panier-page]:has(.panier-lignes) { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
  .panier-lignes .ligne-panier { max-width: 640px; }

  .fiche { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: start; }
  .fiche-images { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0; overflow: visible; }
  .fiche-image img { aspect-ratio: 4 / 5; }
  .fiche-corps { position: sticky; top: var(--entete); max-width: 620px; padding: 28px 40px 44px; }
  .fil { padding-right: 0; }
  .barre-achat { display: none; }
  .page-produit { padding-bottom: 0; }

  .histoire-tete { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: end; padding: 44px 44px 0; }
  .histoire-mots { padding-bottom: 70px; }
  .histoire-photo { margin: 0; }
  .histoire-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 56px 44px 44px; }
  .histoire-route::before { display: none; }
  .histoire-route li { padding: 18px 0 0; border-top: 2px dashed var(--balise); max-width: none; }
  .histoire-route li::before { left: 0; top: -9px; }
  .histoire-route li:nth-child(2) { margin-top: 44px; }
  .histoire-route li:nth-child(3) { margin-top: 88px; }
  .histoire-route li:nth-child(4) { margin-top: 132px; }
  .histoire-fin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 44px; padding: 8px 44px 60px; }

  .hors-sentier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .hors-sentier img { height: calc(100svh - var(--entete)); max-height: 720px; }
  .hors-sentier-mots { padding: 44px; }

  /* Le titre tombe sur la colonne de texte, pas à côté. */
  .legal { --col: 800px; --retrait: 64px; }
  .legal-faq { --col: 820px; --retrait: 16px; }
  .legal-contact { --col: 1120px; --retrait: 16px; }
  .legal-entete { padding: 44px 44px 32px calc(max(0px, (100% - var(--col)) / 2) + var(--retrait)); }
  .legal-entete .repere { padding-right: 0; }
  .legal-route .legal-corps { padding-left: 64px; }
  .legal-route .legal-corps::before { left: 28px; }
  .legal-route .legal-corps h2::before { left: -43px; }
  .contact-grille { gap: 44px; }

  .ck { padding-top: 28px; }
  .ck-resume { position: sticky; top: 16px; }
  .panier-total { margin: 0; max-width: none; }
  .tiroir-entete { padding-left: 38px; }
}

/* ============================== l'altimètre pleine hauteur, collé à gauche */
@media (min-width: 1100px) {
  body:not(.page-commander) { --rail: 92px; padding-left: var(--rail); }
  .entete:not(.entete-sobre) { margin-left: calc(var(--rail) * -1); padding-left: 24px; padding-right: 24px; }
  .altimetre { top: var(--entete); right: auto; bottom: 0; left: 0; width: var(--rail); background: var(--fond); border-right: var(--trait); }
  .altimetre::before { content: "Alt."; position: absolute; top: 12px; left: 12px; font: 500 .75rem/1 var(--mono); color: var(--texte-doux); }
  .alti-piste { position: absolute; top: 40px; bottom: 34px; left: 0; right: 0; background: repeating-linear-gradient(to bottom, var(--encre) 0 1px, transparent 1px calc(100% / 30)) 0 0 / 9px 100% no-repeat, repeating-linear-gradient(to bottom, var(--encre) 0 1.5px, transparent 1.5px calc(100% / 6)) 0 0 / 17px 100% no-repeat; }
  .alti-etages { display: block; position: absolute; inset: 0; }
  .alti-etages li { position: absolute; top: calc(var(--a) * 100%); left: 22px; padding-top: 2px; font: 500 .75rem/1 var(--mono); color: var(--texte-doux); }
  .alti-etages li.ici { color: var(--balise-texte); }
  .alti-curseur { position: absolute; left: 0; right: 8px; top: calc(var(--p, 0) * 100%); height: 26px; justify-content: flex-end; padding: 3px 6px 0 14px; margin-top: -13px; background: var(--accent); border: 0; color: #fff; font-size: .75rem; gap: 0; clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%); transition: top .12s linear; z-index: 1; }
  .alti-curseur::before { display: none; }
  .depart-texte, .depart-action { padding-left: 40px; }
}

@media (min-width: 1400px) {
  .grille, .filtres-puces, .filtres-bas { max-width: 1320px; margin-left: auto; margin-right: auto; }
  .filtres-puces, .filtres-bas { width: 100%; }
}
/* Étage Femmes */
:root { --t-femmes: #c98ba8; }
.menu-femmes { background: var(--t-femmes); } .teinte-femmes { background: var(--t-femmes); } .puce-femmes i { background: var(--t-femmes); }