/* Villa Lenta — feuille du site. Direction artistique du 20/10/2026 (villa-lenta/refonte-2026-10/DA.md).
   Un papier, une encre, un seul bleu (ce qui se clique et ce qui est écrit à la main). */

/* ---------- Polices (OFL, auto-hébergées) ---------- */
@font-face { font-family: "Spectral"; src: url("/fonts/Spectral-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/fonts/Spectral-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/fonts/Spectral-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral SC"; src: url("/fonts/SpectralSC-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Spectral SC"; src: url("/fonts/SpectralSC-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/SchibstedGrotesk.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

/* ---------- Jetons ---------- */
:root {
  --papier: #F3F1EA; --papier-ombre: #E9E6DC; --encre: #1B1E28; --outremer: #2A49A0;
  --crayon: #6E6B63; --filet: #D6D2C6; --erreur: #A3341F;
  --police-texte: "Spectral", Georgia, "Times New Roman", serif;
  --police-capitales: "Spectral SC", "Spectral", Georgia, serif;
  --police-interface: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-texte: 17px; --l-texte: 26px; --t-chapeau: 21px; --l-chapeau: 30px;
  --t-titre-1: 32px; --l-titre-1: 36px; --t-titre-2: 22px; --l-titre-2: 28px;
  --t-nom: 17px; --l-nom: 22px; --t-prix: 20px; --l-prix: 26px;
  --t-legende: 14px; --l-legende: 20px; --t-ui: 14px; --l-ui: 20px; --t-ui-petite: 12.5px; --l-ui-petite: 18px;
  --t-bouton: 15px; --t-logo: 19px;
  --marge: 20px; --largeur-max: 1280px; --colonne-marge: 260px; --gouttiere: 40px;
  --grille-col: 2; --grille-gout: 12px; --rubrique: 56px; --entete: 56px; --barre: 124px;
  --duree-fondu: 240ms; --duree-menu: 200ms; --courbe: cubic-bezier(0.2, 0.6, 0.2, 1);
  color-scheme: light;
}
@media (min-width: 768px) { :root { --marge: 32px; --grille-col: 3; --grille-gout: 20px; --rubrique: 72px; } }
@media (min-width: 1024px) {
  :root {
    --t-texte: 19px; --l-texte: 30px; --t-chapeau: 28px; --l-chapeau: 39px;
    --t-titre-1: 52px; --l-titre-1: 56px; --t-titre-2: 25px; --l-titre-2: 31px;
    --t-nom: 18px; --l-nom: 24px; --t-prix: 22px; --l-prix: 28px; --t-legende: 15px; --l-legende: 22px;
    --t-ui-petite: 13px; --t-logo: 22px;
    --marge: 48px; --grille-col: 4; --grille-gout: 24px; --rubrique: 96px; --entete: 72px;
  }
}
@media (prefers-reduced-motion: reduce) { :root { --duree-fondu: 0ms; --duree-menu: 0ms; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papier); color: var(--encre); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 400 var(--t-texte)/var(--l-texte) var(--police-texte);
  font-kerning: normal; font-variant-ligatures: common-ligatures; hanging-punctuation: first;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--outremer); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--outremer); outline-offset: 2px; }
::selection { background: var(--outremer); color: var(--papier); }
h1, h2, h3 { font-weight: 400; margin: 0; }
h1 { font-size: var(--t-titre-1); line-height: var(--l-titre-1); letter-spacing: -0.01em; }
h2 { font-size: var(--t-titre-2); line-height: var(--l-titre-2); }
p { margin: 0 0 1em; max-width: 62ch; }
button, input, select, textarea { font: inherit; color: inherit; }
.ecran-seul { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: var(--marge); top: -60px; z-index: 50; padding: 10px 14px; background: var(--encre); color: var(--papier); font: 500 var(--t-ui)/1 var(--police-interface); }
.evitement:focus { top: 8px; }
.ui { font-family: var(--police-interface); font-size: var(--t-ui); line-height: var(--l-ui); }
.ui-petite { font-family: var(--police-interface); font-size: var(--t-ui-petite); line-height: var(--l-ui-petite); color: var(--crayon); }
.crayon { color: var(--crayon); }
.legende { font-style: italic; font-size: var(--t-legende); line-height: var(--l-legende); color: var(--crayon); margin: 10px 0 0; }
.chapeau { font-size: var(--t-chapeau); line-height: var(--l-chapeau); }
.page { max-width: var(--largeur-max); margin: 0 auto; padding: 0 var(--marge); }

/* ---------- En-tête (titre courant) ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: var(--papier); border-bottom: 1px solid var(--filet); }
.entete__ligne { max-width: var(--largeur-max); margin: 0 auto; padding: 0 var(--marge); height: var(--entete); display: flex; align-items: center; gap: 24px; }
.logo { display: inline-block; font: 500 var(--t-logo)/44px var(--police-capitales); letter-spacing: 0.13em; color: var(--encre); text-decoration: none; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo__lenta { display: inline-block; transition: letter-spacing 1600ms var(--courbe); }
.logo--ralentit .logo__lenta { letter-spacing: 0.2em; }
.entete__droite { display: flex; align-items: center; gap: 22px; margin-left: auto; font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); }
.entete__droite a { color: var(--encre); text-decoration: none; padding: 12px 0; white-space: nowrap; }
.entete__droite a:hover, .entete__droite a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--outremer); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.entete .entete__bureau { display: none; }
@media (min-width: 1024px) {
  .entete .entete__bureau { display: flex; gap: 22px; margin-left: 32px; font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); }
  .entete__bureau a { color: var(--encre); text-decoration: none; padding: 12px 0; }
  .entete__bureau a:hover, .entete__bureau a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--outremer); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .lien-sommaire { display: none; }
}

/* ---------- Sommaire (menu plein écran) ---------- */
.sommaire { position: fixed; inset: 0; z-index: 40; background: var(--papier); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--duree-menu) ease, visibility 0s linear var(--duree-menu); }
.sommaire:target, .sommaire.ouvert { opacity: 1; visibility: visible; transition: opacity var(--duree-menu) ease; }
.sommaire__haut { height: var(--entete); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--marge); border-bottom: 1px solid var(--filet); }
.sommaire__haut a.fermer { font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); color: var(--encre); text-decoration: none; padding: 12px 0; }
.sommaire__corps { padding: 28px var(--marge) 40px; max-width: 560px; }
.sommaire h2 { font-size: 32px; line-height: 36px; margin: 0 0 18px; }
.sommaire ul { list-style: none; margin: 0; padding: 0; }
.sommaire li + li { margin-top: 2px; }
.sommaire .bloc { padding: 14px 0; border-top: 1px solid var(--filet); }
.sommaire .bloc:first-of-type { border-top: 0; padding-top: 0; }
.sommaire a { color: var(--encre); text-decoration: none; padding: 9px 0; }
.sommaire a:not(.conduite):not(.logo) { display: block; }
.sommaire a.conduite { display: flex; }
.sommaire a.logo { padding: 0; }
.sommaire a:hover { color: var(--outremer); }
body.menu-ouvert { overflow: hidden; }

/* Points de conduite (listes de prix, sommaire, récapitulatif) */
.conduite { display: flex; align-items: baseline; gap: 8px; }
.conduite > :first-child { flex: 0 1 auto; }
.conduite::after { content: none; }
.conduite .points { flex: 1 1 auto; min-width: 24px; border-bottom: 1.5px dotted var(--crayon); transform: translateY(-5px); }
.conduite > :last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ---------- Rubriques ---------- */
.rubrique { margin-top: var(--rubrique); padding-top: 20px; border-top: 1px solid var(--filet); }
.rubrique__titre { margin: 0 0 20px; }
@media (min-width: 1024px) {
  .rubrique { display: grid; grid-template-columns: var(--colonne-marge) minmax(0, 1fr); column-gap: var(--gouttiere); padding-top: 28px; }
  .rubrique__titre { margin: 0; }
  .rubrique__corps { min-width: 0; }
}

/* ---------- Boutons et champs ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border: 1px solid var(--encre); border-radius: 3px; background: var(--encre); color: var(--papier); font: 500 var(--t-bouton)/20px var(--police-interface); text-decoration: none; cursor: pointer; transition: background var(--duree-fondu) ease; }
.bouton:hover { background: #2a2e3b; text-decoration: none; }
.bouton[disabled], .bouton[aria-disabled="true"] { background: var(--papier-ombre); border-color: var(--filet); color: var(--crayon); cursor: not-allowed; }
.bouton--plein { width: 100%; }
.bouton--secondaire { background: transparent; color: var(--encre); }
.bouton--secondaire:hover { background: var(--papier-ombre); }
.champ { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--filet); border-radius: 3px; background: var(--papier-ombre); font: 400 16px/24px var(--police-interface); }
.champ:focus { outline: 2px solid var(--outremer); outline-offset: 2px; background: var(--papier); }
textarea.champ { min-height: 140px; resize: vertical; }
label.etiquette, .etiquette { display: block; font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); color: var(--encre); margin: 0 0 6px; }
.message { font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); padding: 12px 14px; border: 1px solid var(--filet); margin: 0 0 18px; }
.message--erreur { color: var(--erreur); border-color: var(--erreur); }
.message[tabindex="-1"]:focus, .registre:focus, .sommaire:focus { outline: none; }
/* Lien seul sur sa ligne (retour, voir les pièces) : cible de 44 px. */
.lien-isole { display: inline-block; padding: 9px 0; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Photos ---------- */
.photo { position: relative; aspect-ratio: 4 / 5; background: var(--papier-ombre); overflow: hidden; }
.photo img, .photo picture { width: 100%; height: 100%; object-fit: cover; }
.photo img { opacity: 1; transition: opacity var(--duree-fondu) ease; }
.photo--survol .photo__autre { position: absolute; inset: 0; opacity: 0; }
.photo--texte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; background: none; border: 1px solid var(--filet); text-align: center; }
.photo__nom { font-size: var(--t-nom); line-height: var(--l-nom); color: var(--encre); }
.photo--texte .ui-petite { margin: 0; }
@media (hover: hover) { .carte:hover .photo--survol .photo__autre { opacity: 1; } }

/* ---------- Grille de pièces ---------- */
.grille { display: grid; grid-template-columns: repeat(var(--grille-col), minmax(0, 1fr)); gap: 28px var(--grille-gout); list-style: none; margin: 0; padding: 0; }
.carte a { color: var(--encre); text-decoration: none; display: block; }
.carte a:hover .carte__nom { text-decoration: underline; text-decoration-color: var(--outremer); text-underline-offset: 3px; }
.carte__nom { display: block; margin-top: 10px; font-size: var(--t-nom); line-height: var(--l-nom); }
.carte__ligne { display: block; margin-top: 2px; font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); color: var(--crayon); }

/* ---------- Liste de prix (« Au programme », vue liste) ---------- */
.prix-liste { list-style: none; margin: 0; padding: 0; }
.prix-liste li a, .prix-liste li > span { display: flex; align-items: baseline; gap: 8px; color: var(--encre); text-decoration: none; padding: 7px 0; }
.prix-liste li a { padding: 9px 0; }
.prix-liste li a:hover .prix-liste__nom { text-decoration: underline; text-decoration-color: var(--outremer); text-underline-offset: 3px; }
.prix-liste .points { flex: 1 1 auto; min-width: 24px; border-bottom: 1.5px dotted var(--crayon); transform: translateY(-6px); }
.prix-liste__prix { font-variant-numeric: tabular-nums; }
.prix-liste__coloris { font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); color: var(--crayon); }
@media (min-width: 1024px) { .prix-liste--colonnes { columns: 2; column-gap: 48px; } .prix-liste--colonnes li { break-inside: avoid; } }

/* ---------- Accueil ---------- */
.accueil__chapitre { margin: 18px 0 14px; }
.accueil__une { margin: 0 calc(-1 * var(--marge)); }
.accueil__une figcaption { padding: 0 var(--marge); }
.accueil__titre { margin-top: 28px; }
.accueil__titre h1 { margin-bottom: 14px; }
.accueil__ouverture { display: none; }
@media (min-width: 1024px) {
  .accueil__chapitre, .accueil__une, .accueil__titre p { display: none; }
  .accueil__titre { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .accueil__ouverture { display: grid; grid-template-columns: var(--colonne-marge) minmax(0, 1fr); column-gap: var(--gouttiere); margin-top: 40px; }
  .accueil__ouverture .paire { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grille-gout); }
}
.en-pratique { display: grid; gap: 14px; }
.en-pratique h3 { font: 500 var(--t-ui)/var(--l-ui) var(--police-interface); margin: 0 0 2px; }
.en-pratique p { margin: 0; }
@media (min-width: 1024px) { .en-pratique { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* ---------- Registre (lettre de saison) ---------- */
.registre { border: 1px solid var(--encre); padding: 18px; max-width: 560px; }
.registre h2, .registre h3 { font-size: 22px; line-height: 28px; margin-bottom: 4px; }
.registre p { margin: 0 0 14px; }
.registre form { display: grid; gap: 10px; }
.registre .message { margin: 0 0 14px; }
.registre .ui-petite { margin: 4px 0 0; }

/* ---------- Colophon ---------- */
.colophon { margin-top: var(--rubrique); border-top: 1px solid var(--filet); padding: 28px 0 48px; }
.colophon p { font-size: var(--t-legende); line-height: var(--l-legende); color: var(--crayon); }
.colophon nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 4px; font: 400 var(--t-ui-petite)/var(--l-ui-petite) var(--police-interface); }
.colophon nav a { color: var(--encre); text-decoration-color: var(--outremer); padding: 13px 0; }
.colophon .langue { margin-left: auto; }

/* ---------- Collection ---------- */
.titre-page { padding-top: 28px; }
.titre-page .ui-petite { margin: 8px 0 0; }
.titre-page__intro { margin: 16px 0 0; max-width: 56ch; }
/* Filet en ombre intérieure, pas en bordure : overflow-x rognerait le soulignement de 2 px qui le recouvre. */
.filtres { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; margin: 24px calc(-1 * var(--marge)) 24px; padding: 0 var(--marge); box-shadow: inset 0 -1px 0 var(--filet); font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); white-space: nowrap; }
.filtres::-webkit-scrollbar { display: none; }
.filtres a { color: var(--crayon); text-decoration: none; padding: 12px 0; border-bottom: 2px solid transparent; }
.filtres a[aria-current="true"] { color: var(--encre); border-bottom-color: var(--outremer); }
.filtres .vue { display: flex; margin-left: auto; padding-left: 16px; }
.filtres .vue a { margin-left: 12px; }
@media (min-width: 1024px) { .filtres { margin-left: 0; margin-right: 0; padding: 0; } }

/* ---------- Fiche produit ---------- */
.fil { padding: 0; margin: 0 0 12px; font: 400 var(--t-ui-petite)/var(--l-ui-petite) var(--police-interface); color: var(--crayon); }
.fil a { display: inline-block; padding: 13px 0; color: var(--crayon); }
.galerie { margin: 0 calc(-1 * var(--marge)); }
.galerie__piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.galerie__piste::-webkit-scrollbar { display: none; }
.galerie__figure { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.galerie__figure figcaption { padding: 0 var(--marge); }
.galerie__progression { display: flex; align-items: center; gap: 14px; padding: 12px var(--marge) 0; }
.galerie__segments { display: flex; gap: 4px; flex: 1; }
.galerie__segments span { flex: 1; height: 2px; background: var(--filet); }
.galerie__segments span.actif { background: var(--encre); }
.galerie__compteur { font: 400 var(--t-ui-petite)/var(--l-ui-petite) var(--police-interface); color: var(--crayon); font-variant-numeric: tabular-nums; }
.piece__infos { padding-top: 18px; }
.piece__nom { font-size: var(--t-titre-1); line-height: var(--l-titre-1); }
.piece__prix { font-size: var(--t-prix); line-height: var(--l-prix); margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.piece__phrase { margin-bottom: 22px; }
.choix { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.choix legend { padding: 0; margin: 0 0 12px; font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); display: flex; justify-content: space-between; align-items: center; width: 100%; }
.choix legend a { font-size: var(--t-ui); padding: 12px 0; margin: -12px 0; }
.tailles__epuisee { margin: 16px 0 0; }
.tailles__epuisee a { display: inline-block; padding: 13px 0; margin: -13px 0; }
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille { width: 44px; height: 44px; display: grid; place-items: center; text-decoration: none; }
.pastille svg { width: 32px; height: 32px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(27, 30, 40, 0.18); }
.pastille[aria-current="true"] svg { outline: 2px solid var(--outremer); outline-offset: 2px; }
.tailles { display: flex; flex-wrap: wrap; gap: 8px; }
.taille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.taille span { display: grid; place-items: center; min-width: 48px; height: 44px; padding: 0 10px; border: 1px solid var(--filet); border-radius: 3px; font: 400 var(--t-ui)/1 var(--police-interface); cursor: pointer; }
.taille input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.taille input:focus-visible + span { outline: 2px solid var(--outremer); outline-offset: 2px; }
.taille input:disabled + span { color: var(--crayon); text-decoration: line-through; cursor: not-allowed; }
.achat { margin: 8px 0 0; }
.achat__barre .ui-petite { max-width: none; margin: 10px 0 0; text-align: center; }
.achat__message { margin: 0 0 10px; padding: 10px 12px; }
.achat__message:empty { margin: 0; padding: 0; border: 0; }
@media (max-width: 1023px) {
  .achat__barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--papier); border-top: 1px solid var(--filet); padding: 10px var(--marge) calc(10px + env(safe-area-inset-bottom)); }
  .achat__barre .ui-petite { margin-top: 6px; }
  .achat__message { margin-bottom: 8px; padding: 8px 12px; }
  body:has(.achat__barre) { padding-bottom: calc(var(--barre) + env(safe-area-inset-bottom)); }
  html:has(.achat__barre) { scroll-padding-bottom: calc(var(--barre) + 16px + env(safe-area-inset-bottom)); }
}
.fiche { margin: 34px 0 0; }
.fiche dl { margin: 0; }
.fiche dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--filet); }
.fiche dl > div:last-child { border-bottom: 1px solid var(--filet); }
.fiche dt { font: 400 var(--t-ui)/var(--l-texte) var(--police-interface); color: var(--crayon); }
.fiche dd { margin: 0; }
.transcription { margin-top: 34px; }
.transcription__dos { margin-top: 12px; padding: 22px 20px; border: 1px solid var(--filet); }
.transcription__dos .titre { font-size: 28px; line-height: 32px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--encre); }
.transcription__dos p { margin: 0; padding: 4px 0; }
.transcription__dos .main { color: var(--outremer); font-style: italic; }
.meme-programme { margin-top: 40px; }
.meme-programme .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  .piece { display: grid; grid-template-columns: 7fr 5fr; column-gap: 48px; padding-bottom: 0; align-items: start; }
  .galerie { margin: 20px 0 0; }
  .galerie__piste { display: grid; gap: 16px; overflow: visible; }
  .galerie__figure figcaption { padding: 0; }
  .galerie__progression { display: none; }
  .piece__infos { position: sticky; top: calc(var(--entete) + 24px); padding-top: 20px; }
  .meme-programme { grid-column: 1 / -1; }
  .meme-programme .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Panier ---------- */
.panier { max-width: 760px; }
.panier__ligne { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-top: 1px solid var(--filet); }
.panier__ligne:last-of-type { border-bottom: 1px solid var(--filet); }
.panier__ligne .photo { width: 72px; }
.panier__ligne--sans-photo { grid-template-columns: 1fr auto; }
.panier__ligne a.nom { display: inline-block; padding: 9px 0; margin: -9px 0; color: var(--encre); text-decoration: none; }
.panier__ligne .details { font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); color: var(--crayon); }
.quantite { display: flex; align-items: center; gap: 4px; margin-top: 8px; font: 400 var(--t-ui)/1 var(--police-interface); }
.quantite button, .lien-bouton { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--outremer); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 6px; font: 400 var(--t-ui)/1 var(--police-interface); }
.quantite output { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.recap { margin: 22px 0; }
.recap .conduite { padding: 4px 0; max-width: none; }
.recap .total { font-size: var(--t-prix); line-height: var(--l-prix); margin-top: 6px; }
.case-cgv { display: flex; gap: 10px; align-items: center; min-height: 44px; margin: 0 0 16px; font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); }
.case-cgv input { width: 20px; height: 20px; margin: 0; accent-color: var(--encre); flex: 0 0 auto; }

/* ---------- Pages éditoriales ---------- */
.edito { padding-top: 28px; }
.edito h1 { margin-bottom: 24px; }
.edito__corps { max-width: 62ch; }
.edito__corps h2 { margin: 36px 0 12px; }
.edito__corps ul { padding-left: 1.1em; margin: 0 0 1em; }
.edito__corps li { margin-bottom: 6px; }
.edito__corps h3 { font: 500 var(--t-ui)/var(--l-ui) var(--police-interface); margin: 0 0 10px; }
/* Textes imposés par la loi (formulaire de rétractation, garanties) : un encadré au filet, comme une fiche. */
.encadre { border: 1px solid var(--encre); padding: 18px 20px; margin: 14px 0 26px; font-size: 16px; line-height: 24px; }
.encadre p, .encadre li { max-width: none; }
.encadre > :last-child { margin-bottom: 0; }
.encadre ul { list-style: none; padding-left: 0; }
.encadre--retractation li { padding: 4px 0 10px; border-bottom: 1px dotted var(--crayon); }
.infos { margin: 0 0 1em; }
.infos > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--filet); }
.infos > div:last-child { border-bottom: 1px solid var(--filet); }
.infos dt { font: 400 var(--t-ui)/var(--l-texte) var(--police-interface); color: var(--crayon); }
.infos dd { margin: 0; }
.annotation { display: block; color: var(--outremer); font-style: italic; transform: rotate(-2deg); transform-origin: left; margin: 10px 0 18px; }
@media (min-width: 1024px) {
  .edito { display: grid; grid-template-columns: var(--colonne-marge) minmax(0, 1fr); column-gap: var(--gouttiere); padding-top: 40px; }
  .edito__corps h2 { font-size: var(--t-titre-2); }
}
.tableau-tailles { width: 100%; border-collapse: collapse; margin: 10px 0 28px; font-variant-numeric: tabular-nums; }
.tableau-tailles th, .tableau-tailles td { text-align: left; padding: 9px 8px 9px 0; border-bottom: 1px solid var(--filet); font: 400 var(--t-ui)/var(--l-ui) var(--police-interface); }
.tableau-tailles th { color: var(--crayon); font-weight: 400; }
.defile-x { overflow-x: auto; }

.centre { text-align: center; margin-top: 10px; max-width: none; }
.formulaire { display: grid; gap: 14px; max-width: 560px; }

/* ---------- Confirmation, 404 ---------- */
.simple { padding: 40px 0; max-width: 640px; }
.simple h1 { margin-bottom: 16px; }

/* Démonstration de paiement (local uniquement) */
.demo { border: 1px dashed var(--crayon); padding: 18px; margin: 24px 0; max-width: 560px; }
.demo form { display: grid; gap: 12px; }

@media print { .entete, .colophon, .achat__barre, .sommaire { display: none; } }