/* ==========================================================================
   ielaiRe Chandelles : feuille de style

   Direction « Le marché d'artisans » (maquette approuvée par Mathieu :
   .impeccable/mocks/decision/maquette-1-marche.png). Fond de lin, encre bleu nuit, une seule couleur
   forte, photos de Daniel sur velours bleu nuit, petites notes au crayon.
   Le 24 septembre 2026, Mathieu a choisi la maquette « Vitrine de nuit » : le catalogue est posé sur
   le bleu nuit du velours, Commander et L'artisan sont deux feuilles côte à côte, et un bandeau
   dit « Fait au Québec » au-dessus de l'en-tête. Le 28 septembre 2026, L'artisan, Commander et Demande
   spéciale deviennent trois sections l'une sous l'autre, chacune avec son titre sur le lin (maquette 3).
   Le 30 septembre 2026, L'artisan passe sur la deuxième page, Le comptoir (comptoir.html), et le bandeau
   annonce la livraison gratuite au Québec dès 75 $ (maquette 1). Le 5 octobre 2026, Le comptoir devient la
   boutique de collectionneur de Daniel (timbres, monnaie, bazar, enchère du mois ; maquette 1 « Les rayons sur le
   velours »), L'artisan revient sur l'accueil, et « Le comptoir » prend une étiquette kraft dans le menu. Le
   6 octobre 2026, Le comptoir devient la caverne aux trésors de Daniel (maquette 1 « Les rayons dans la
   caverne ») : ses vraies photos en haut, les timbres en trois onglets (sacs à surprise, enchère,
   vente libre), le lin le jour et un fond noir bleuté le soir. Le 7 octobre 2026 (message vocal de Daniel) :
   quatre sacs à surprise (trois depuis le 14 octobre), et l'enchère montre l'offre la plus haute. Le 8 octobre 2026, les trois onglets des
   timbres quittent leurs étiquettes kraft pour des médaillons cerclés d'or (maquette 3 « Les médaillons »).
   Le 26 septembre 2026, palette « Ivoire, bleu nuit et or » (choix de Mathieu parmi trois) : les couleurs
   s'accordent au velours des photos. Fond de lin teinté ivoire, le bleu nuit pour la couleur forte
   (--accent : boutons, pastille ; le bandeau prend le bleu du catalogue), l'or des flammes du logo de
   Daniel en touches (--nuit-accent, --kraft). La cire fine coule du haut de page sur le bleu nuit du
   catalogue, et le logo d'origine de Daniel, brûlé dans un médaillon de bois, est posé sur la cire.

   Tailles fixes : textes, boutons et marges ne grossissent pas avec l'écran. Sur un grand écran, le
   contenu reste centré (--largeur) et seule la photo du haut s'étire jusqu'au bord. Sous 1024 px, les
   mêmes variables reçoivent les valeurs du téléphone et de la tablette.

   Système de formes :
     - boutons, pastilles, recherche : pilule (999px)
     - photos des fiches              : coins droits, comme une photo posée
     - fiche détaillée                : 18px
     - feuilles des trois chapitres   : coins droits, ombre douce, comme une feuille posée
     - panneau du panier              : collé au bord droit de l'écran, coins droits

   Échelle des z-index :
     39   menu mobile plein écran
     40   en-tête collant
     60   message « ajouté au panier », photo qui file vers le panier
     100  lien d'évitement
     (les <dialog> vivent dans la couche supérieure du navigateur)
   ========================================================================== */

/* ---------- Polices auto-hébergées (sous-ensemble latin) ---------- */
@font-face {
  font-family: "Buenard"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/buenard-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Mada"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/mada-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Reenie Beanie"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/reenie-beanie-latin.woff2") format("woff2");
}

/* Icônes Phosphor (regular, v2.1.1), auto-hébergées : sous-ensemble des 19 glyphes utilisés, tiré de la
   police officielle (@phosphor-icons/web). Pour une nouvelle icône : l'ajouter à la liste et refaire le
   sous-ensemble sous un nouveau nom (-v3, -v4...) : les fichiers de assets/ restent un an en cache
   (voir README, section Icônes). */
@font-face {
  font-family: "Phosphor"; font-style: normal; font-weight: 400; font-display: block;
  src: url("../assets/fonts/phosphor-sous-ensemble-v2.woff2") format("woff2");
}
.ph {
  font-family: "Phosphor" !important; speak: never;
  font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;
  letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.ph.ph-arrow-left::before { content: "\e058"; }
.ph.ph-camera::before { content: "\e10e"; }
.ph.ph-caret-down::before { content: "\e136"; }
.ph.ph-check::before { content: "\e182"; }
.ph.ph-check-circle::before { content: "\e184"; }
.ph.ph-clock::before { content: "\e19a"; }
.ph.ph-envelope-simple::before { content: "\e218"; }
.ph.ph-hammer::before { content: "\e80e"; }
.ph.ph-handbag::before { content: "\e29c"; }
.ph.ph-magnifying-glass::before { content: "\e30c"; }
.ph.ph-map-pin::before { content: "\e316"; }
.ph.ph-minus::before { content: "\e32a"; }
.ph.ph-moon::before { content: "\e330"; }
.ph.ph-package::before { content: "\e390"; }
.ph.ph-phone::before { content: "\e3b8"; }
.ph.ph-plus::before { content: "\e3d4"; }
.ph.ph-sun::before { content: "\e472"; }
.ph.ph-warning-circle::before { content: "\e4e2"; }
.ph.ph-x::before { content: "\e4f6"; }

/* ---------- Jetons ---------- */
:root {
  color-scheme: light dark;

  --lin: #F5F0E6;             /* fond de page : lin teinté ivoire */
  --lin-2: #E9E1D3;           /* lin plus dense : cadres vides, piste de défilement */
  --papier: #FCF9F3;          /* feuilles et panneaux */
  --champ-fond: #FFFDF9;      /* intérieur des champs */
  --encre: #1C2233;           /* titres : bleu d'encre */
  --encre-2: #262C3C;         /* texte courant */
  --encre-3: #50586A;         /* dimensions, textes secondaires (6,8:1 sur le papier) */
  --crayon: #3D4558;          /* notes écrites à la main */
  --accent: #26304A;          /* bleu nuit, la couleur forte : boutons, pastille */
  --accent-fonce: #1A2236;
  --accent-texte: #26304A;    /* bleu nuit en texte */
  --sur-accent: #F7F1E4;      /* texte sur le bleu nuit (11,6:1) */
  --accent-voile: rgba(38, 48, 74, .10);
  --kraft: #9C7430;           /* or bruni : grands chiffres au crayon (4:1) */
  --halo: rgba(255, 226, 170, .45);  /* lumière chaude derrière le titre du haut */
  --cire: url("../assets/img/cire-fine.webp");   /* la cire qui coule sur le bleu nuit */
  --nuit: #232A3D;           /* le velours bleu nuit des photos de Daniel (moyenne des dix photos) : fond du catalogue */
  --nuit-texte: #F4F0EA;     /* textes sur le bleu nuit */
  --nuit-texte-2: #D9D4CC;
  --nuit-texte-3: #A9B0BF;   /* dimensions, aide : 6,6:1 sur le bleu nuit */
  --nuit-accent: #E3C47E;    /* l'or des flammes du logo sur le bleu nuit (8,5:1) */
  --nuit-focus: #E3C47E;
  --fond-photo: var(--nuit); /* sous les photos le temps qu'elles chargent */
  --ligne: rgba(28, 34, 51, .14);
  --ligne-forte: rgba(28, 34, 51, .28);
  --contour-champ: #8E887C;    /* 3:1 sur l'intérieur des champs et sur le bleu nuit */
  --texte-champ: #5F6574;
  --focus: #26304A;
  --erreur: #A31B2C;          /* rouge franc */
  --erreur-fond: #F8E0DF;
  --ombre-rgb: 20, 24, 40;
  --texture: url("../assets/img/lin-ivoire.webp");
  --logo-clair: block;        /* logo peint à l'encre noire */
  --logo-sombre: none;        /* sa version claire, pour le mode sombre */
  --icone-lune: 1;            /* icône du bouton de mode : la lune le jour, */
  --icone-soleil: 0;          /* le soleil le soir */
  --encre-etiquette: #1C0E09; /* l'écriture sur le kraft (étiquettes des onglets et de L'artisan), la même le soir */

  --t-rapide: 180ms;
  --t-base: 280ms;
  --t-lent: 600ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-doux: cubic-bezier(0.32, 0.72, 0, 1);

  --police-titre: "Buenard", Georgia, "Times New Roman", serif;
  --police-texte: "Mada", "Segoe UI", system-ui, sans-serif;
  --police-crayon: "Reenie Beanie", "Segoe Print", "Bradley Hand", cursive;

  /* Mesures (ordinateur) */
  --largeur: 1520px;                    /* largeur maximale du contenu */
  --gouttiere: clamp(20px, 4vw, 60px);
  --h-entete: 76px;
  --logo-h: 46px;                       /* hauteur du logo peint de Daniel (ovale) */
  --marque-ecart: 12px;
  --marque-taille: 1.5rem;
  --marque-interligne: 1;
  --menu-taille: 1rem;
  --menu-ecart: 36px;
  --panier-icone: 24px;
  --panier-ecart-1: 8px;
  --panier-ecart-2: 10px;
  --pastille: 24px;
  --pastille-taille: 13px;

  --h-haut: clamp(380px, 26vw, 500px);
  /* La photo du haut commence aux 42 % du contenu et va jusqu'au bord droit de l'écran */
  --photo-x: calc(50% - min(50% - var(--gouttiere), var(--largeur) / 2) + min(100% - 2 * var(--gouttiere), var(--largeur)) * .42);
  --titre-haut: 40px;
  --titre-taille: clamp(2.5rem, 3.6vw, 3.25rem);
  --titre-interligne: 1.04;
  --sous-titre-taille: 1.15rem;
  --sous-titre-marge: 14px;
  --bouton-haut-marge: 26px;
  --bouton-l: auto;
  --bouton-h: 48px;
  --bouton-taille: 1rem;

  --catalogue-haut: 56px;
  --recherche-l: 280px;
  --recherche-h: 42px;
  --recherche-taille: .9375rem;
  --recherche-icone: 18px;
  --grille-marge: 20px;
  --grille-ecart-col: 24px;
  --grille-ecart-rang: 36px;
  --nom-taille: 1.125rem;
  --nom-marge: 12px;
  --dims-taille: .875rem;
  --dims-marge: 3px;
  --prix-taille: .9375rem;
  --note-marge: 3px;
  --ajout-marge: 12px;
  --ajout-l: auto;
  --ajout-h: 40px;
  --ajout-taille: .875rem;
  --trait: 1.5px;

  --section: 72px;
  --texte-taille: 1rem;
  --titre-2-taille: 1.85rem;
}

/* Téléphone et tablette : valeurs fixes, lisibles */
@media (max-width: 1023px) {
  :root {
    --gouttiere: 20px;
    --h-entete: 64px;
    --logo-h: 40px;
    --marque-ecart: 10px;
    --marque-taille: 18px;
    --marque-interligne: 17px;
    --menu-taille: 17px;
    --menu-ecart: 28px;
    --panier-icone: 24px;
    --panier-ecart-1: 8px;
    --panier-ecart-2: 8px;
    --pastille: 24px;
    --pastille-taille: 13px;

    --h-haut: auto;
    --titre-haut: 28px;
    --titre-taille: clamp(2.1rem, 8.5vw, 2.9rem);
    --titre-interligne: 1.02;
    --sous-titre-taille: 1.06rem;
    --sous-titre-marge: 14px;
    --bouton-haut-marge: 22px;
    --bouton-l: auto;
    --bouton-h: 48px;
    --bouton-taille: 1.05rem;

    --catalogue-haut: 40px;
    --recherche-l: 100%;
    --recherche-h: 50px;
    --recherche-taille: 1rem;
    --recherche-icone: 20px;
    --grille-marge: 22px;
    --grille-ecart-col: 14px;
    --grille-ecart-rang: 28px;
    --nom-taille: 1.0625rem;
    --nom-marge: 10px;
    --dims-taille: .85rem;
    --dims-marge: 4px;
    --prix-taille: .9375rem;
    --note-marge: 2px;
    --ajout-marge: 10px;
    --ajout-l: 100%;
    --ajout-h: 44px;
    --ajout-taille: .95rem;

    --section: 56px;
    --texte-taille: 1rem;
    --titre-2-taille: clamp(1.75rem, 6.6vw, 2.25rem);
  }
}

/* Mode sombre : celui de l'appareil, sauf si le visiteur a choisi le mode clair avec le bouton de l'en-tête
   (data-theme sur <html>, voir js/main.js), ou celui qu'il a choisi. Les deux blocs de jetons sont
   identiques : les modifier ensemble. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --lin: #151A26;
    --lin-2: #1C2230;
    --papier: #1E2433;
    --champ-fond: #252C3C;
    --encre: #F3EEE4;
    --encre-2: #E6E0D5;
    --encre-3: #B6B3AB;
    --crayon: #D2CCBF;
    --accent: #E3C47E;
    --accent-fonce: #EBD299;
    --accent-texte: #E8CB88;
    --sur-accent: #1A1F2E;
    --accent-voile: rgba(227, 196, 126, .14);
    --kraft: #D0A95E;
    --halo: rgba(227, 196, 126, .08);
    --cire: url("../assets/img/cire-fine-sombre.webp");
    --ligne: rgba(243, 238, 228, .14);
    --ligne-forte: rgba(243, 238, 228, .28);
    --contour-champ: #737A8B;
    --texte-champ: #B7B3AA;
    --focus: #E8CB88;
    --erreur: #FF9DA6;
    --erreur-fond: rgba(255, 157, 166, .14);
    --ombre-rgb: 0, 0, 0;
    --texture: none;
    --logo-clair: none;
    --logo-sombre: block;
    --icone-lune: 0;
    --icone-soleil: 1;
  }
}
:root[data-theme="sombre"] {
  --lin: #151A26;
  --lin-2: #1C2230;
  --papier: #1E2433;
  --champ-fond: #252C3C;
  --encre: #F3EEE4;
  --encre-2: #E6E0D5;
  --encre-3: #B6B3AB;
  --crayon: #D2CCBF;
  --accent: #E3C47E;
  --accent-fonce: #EBD299;
  --accent-texte: #E8CB88;
  --sur-accent: #1A1F2E;
  --accent-voile: rgba(227, 196, 126, .14);
  --kraft: #D0A95E;
  --halo: rgba(227, 196, 126, .08);
  --cire: url("../assets/img/cire-fine-sombre.webp");
  --ligne: rgba(243, 238, 228, .14);
  --ligne-forte: rgba(243, 238, 228, .28);
  --contour-champ: #737A8B;
  --texte-champ: #B7B3AA;
  --focus: #E8CB88;
  --erreur: #FF9DA6;
  --erreur-fond: rgba(255, 157, 166, .14);
  --ombre-rgb: 0, 0, 0;
  --texture: none;
  --logo-clair: none;
  --logo-sombre: block;
  --icone-lune: 0;
  --icone-soleil: 1;
}
:root[data-theme="clair"] { color-scheme: light; }
:root[data-theme="sombre"] { color-scheme: dark; }
.logo-clair { display: var(--logo-clair); }
.logo-sombre { display: var(--logo-sombre); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-entete) + 12px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--kraft) var(--lin-2);
}

body {
  margin: 0;
  background: var(--lin) var(--texture) repeat;
  background-size: 260px 143px;
  color: var(--encre-2);
  font-family: var(--police-texte);
  font-size: var(--texte-taille);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
picture { display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--encre); }
input, textarea, select { caret-color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--encre);
  letter-spacing: 0;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Titres et messages qui reçoivent le focus par script (tabindex="-1") pour être annoncés :
   ils ne sont pas dans l'ordre de tabulation, le contour n'aide personne */
[tabindex="-1"]:focus { outline: none; }

.conteneur {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

.evitement {
  position: absolute; top: -100%; left: var(--gouttiere); z-index: 100;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--accent); color: var(--sur-accent); font-weight: 600; text-decoration: none;
}
.evitement:focus { top: .75rem; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

#sentinelle-haut { position: absolute; top: 0; height: 1px; width: 1px; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.4em;
  border-radius: 999px; border: var(--trait) solid transparent;
  font-family: var(--police-texte); font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-rapide) var(--ease), color var(--t-rapide) var(--ease), border-color var(--t-rapide) var(--ease), transform var(--t-rapide) var(--ease-doux);
}
.bouton:active { transform: scale(.98); }
.bouton--plein { background: var(--accent); color: var(--sur-accent); }
.bouton--plein:hover { background: var(--accent-fonce); }
.bouton--contour { background: transparent; color: var(--accent-texte); border-color: var(--accent); }
.bouton--contour:hover { background: var(--accent-voile); }
.bouton[disabled] { opacity: .7; cursor: progress; }
.bouton.est-ajoute { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }

/* ---------- Bandeau « Fait au Québec » (au-dessus de l'en-tête, il part au défilement) ---------- */
/* Plus grand depuis le 26 septembre 2026 (demande de Mathieu) : « Fait au Québec » en 21 px. Depuis le
   30 septembre 2026, il annonce aussi la livraison gratuite au Québec dès 75 $ (maquette 1, choix de Mathieu) :
   la phrase entière sur ordinateur, une plus courte sur tablette, et une deuxième ligne au téléphone. */
.bandeau-quebec {
  margin: 0; padding: 12px var(--gouttiere);
  background: var(--nuit); color: var(--nuit-texte);
  text-align: center; font-size: 1.0625rem; line-height: 1.35;
}
.bandeau-quebec strong { font-size: 1.3125rem; font-weight: 700; letter-spacing: .01em; color: var(--nuit-accent); }
.bandeau-quebec__livraison { color: var(--nuit-texte); }
.bandeau-quebec__livraison::before {
  content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 .7em; border-radius: 50%;
  background: var(--nuit-texte-2); vertical-align: .22em;
}
.bandeau-quebec__livraison i { font-size: 1.15em; vertical-align: -.16em; margin-right: .35em; color: var(--nuit-accent); }
.bandeau-quebec__livraison b { font-weight: 700; }
.bandeau-quebec__court { display: none; }
@media (max-width: 1023px) {
  .bandeau-quebec__long { display: none; }
  .bandeau-quebec__court { display: inline; }
}
@media (max-width: 639px) {
  .bandeau-quebec { padding-block: 9px 10px; }
  .bandeau-quebec strong { font-size: 1.25rem; }
  .bandeau-quebec__livraison { display: block; margin-top: 2px; font-size: .95rem; text-wrap: balance; }   /* deux lignes égales sur les plus petits téléphones */
  .bandeau-quebec__livraison::before { display: none; }
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 40;
  height: var(--h-entete);
  transition: background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.entete.est-defile {
  background: color-mix(in srgb, var(--lin) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--ligne);
}
.entete__rang {
  height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.marque {
  justify-self: start;
  display: inline-flex; align-items: center; gap: var(--marque-ecart);
  text-decoration: none; color: var(--encre);
}
.marque__logo { width: auto; height: var(--logo-h); flex: none; }
.marque__nom {
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--marque-taille); line-height: var(--marque-interligne);
  white-space: nowrap;
}
.menu-principal { display: flex; gap: var(--menu-ecart); }
.menu-principal a {
  position: relative;
  font-size: var(--menu-taille); line-height: 1.3; color: var(--encre-2);
  text-decoration: none; padding-block: 10px;
}
.menu-principal a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-rapide) var(--ease);
}
/* aria-current : « true » pour la section de l'accueil qu'on regarde, « page » pour la page Le comptoir */
.menu-principal a:hover::after, .menu-principal a[aria-current]::after { transform: scaleX(1); }

.entete__actions { justify-self: end; display: flex; align-items: center; gap: 24px; }
/* Le bouton de langue a la forme du bouton de mode, juste à côté (choix de Mathieu, 27 septembre 2026) : un rond
   de 44 px qui dit « EN » sur la page française et « FR » sur la page anglaise */
.mode-bouton, .langue-bouton {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ligne-forte); background: transparent; color: var(--encre); cursor: pointer;
  transition: background-color var(--t-rapide) var(--ease), border-color var(--t-rapide) var(--ease), transform var(--t-rapide) var(--ease);
}
.mode-bouton:active, .langue-bouton:active { transform: scale(.98); }
.langue-bouton { padding: 0; font-family: var(--police-texte); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .04em; }
/* La lune et le soleil occupent la même case ; au changement de mode, l'une s'efface pendant que l'autre arrive
   (opacité, échelle et flou, courbe de better-ui). Leur état vient des jetons du mode : juste dès le premier affichage. */
.mode-icone {
  grid-area: 1 / 1; font-size: 20px; line-height: 1;
  transition: opacity var(--t-base) cubic-bezier(0.2, 0, 0, 1), transform var(--t-base) cubic-bezier(0.2, 0, 0, 1), filter var(--t-base) cubic-bezier(0.2, 0, 0, 1);
}
.mode-icone--lune { opacity: var(--icone-lune); transform: scale(calc(.25 + .75 * var(--icone-lune))); filter: blur(calc(4px - 4px * var(--icone-lune))); }
.mode-icone--soleil { opacity: var(--icone-soleil); transform: scale(calc(.25 + .75 * var(--icone-soleil))); filter: blur(calc(4px - 4px * var(--icone-soleil))); }
@media (hover: hover) and (pointer: fine) {
  .mode-bouton:hover, .langue-bouton:hover { background: var(--accent-voile); border-color: var(--accent); }
}
.panier-bouton {                  /* un bouton sur l'accueil, un lien vers l'accueil sur la page Le comptoir */
  justify-self: end;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--encre-2); text-decoration: none;
}
.panier-bouton i { font-size: var(--panier-icone); line-height: 1; margin-right: var(--panier-ecart-1); color: var(--encre); }
.panier-bouton__mot { font-size: var(--menu-taille); line-height: 1.3; margin-right: var(--panier-ecart-2); }
.pastille {
  display: inline-grid; place-items: center;
  width: var(--pastille); height: var(--pastille); border-radius: 999px;
  background: var(--accent); color: var(--sur-accent);
  font-size: var(--pastille-taille); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pastille.est-bousculee { animation: bousculer var(--t-base) var(--ease-doux); }
@keyframes bousculer { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }

.menu-bouton {
  display: none; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ligne-forte); background: transparent; cursor: pointer;
}
.menu-bouton__traits { position: relative; display: block; width: 18px; height: 12px; }
.menu-bouton__traits span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--encre); transition: transform var(--t-rapide) var(--ease-doux);
}
.menu-bouton__traits span:nth-child(1) { top: 0; }
.menu-bouton__traits span:nth-child(2) { top: 10px; }
.menu-bouton[aria-expanded="true"] .menu-bouton__traits span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-bouton__traits span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 0; z-index: 39;
  padding-top: var(--h-entete);
  background: var(--lin) var(--texture) repeat; background-size: 260px 143px;
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.menu-mobile.est-ouvert { opacity: 1; }
.menu-mobile__liens { display: grid; padding-top: 1.5rem; }
.menu-mobile__liens a {
  font-family: var(--police-titre); font-weight: 700; font-size: 2rem; color: var(--encre);
  text-decoration: none; padding: .8rem 0; border-bottom: 1px solid var(--ligne);
}
.menu-mobile__mode { padding-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.menu-mobile__mode .langue-bouton { width: 48px; height: 48px; }   /* à côté de l'interrupteur, à sa hauteur */
.mode-interrupteur {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 14px 0 18px; border-radius: 999px;
  border: 1px solid var(--ligne-forte); background: transparent; color: var(--encre-2);
  font: inherit; font-size: 1.0625rem; cursor: pointer;
  transition: transform var(--t-rapide) var(--ease);
}
.mode-interrupteur:active { transform: scale(.98); }
.mode-interrupteur i { font-size: 20px; line-height: 1; color: var(--encre); }
.mode-interrupteur__piste {
  position: relative; width: 42px; height: 24px; margin-left: 4px; border-radius: 999px;
  background: var(--lin-2); box-shadow: inset 0 0 0 1px var(--ligne-forte);
  transition: background-color var(--t-rapide) var(--ease);
}
.mode-interrupteur__piste::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--encre-3);
  transition: transform var(--t-rapide) var(--ease-doux), background-color var(--t-rapide) var(--ease);
}
.mode-interrupteur[aria-pressed="true"] .mode-interrupteur__piste { background: var(--accent); box-shadow: none; }
.mode-interrupteur[aria-pressed="true"] .mode-interrupteur__piste::after { transform: translateX(18px); background: var(--sur-accent); }
body.menu-ouvert { overflow: hidden; }

@media (max-width: 1023px) {
  .entete__rang { grid-template-columns: 1fr auto auto; gap: 10px; }
  .menu-principal { display: none; }
  .menu-bouton { display: grid; }
  .entete__actions .mode-bouton, .entete__actions .langue-bouton { display: none; }     /* sur téléphone et tablette : dans le menu */
  .panier-bouton__mot { display: none; }
  .panier-bouton { padding: 0 6px; }
}
/* Les plus petits téléphones (moins de 360 px) : logo et nom un peu plus petits, espaces resserrés, pour que
   « Chandelles » ne touche plus le panier (il le chevauchait de 22 px à 320 px) */
@media (max-width: 359px) {
  :root { --logo-h: 34px; --marque-ecart: 8px; --marque-taille: 16px; --marque-interligne: 15px; }
  .entete__rang { gap: 8px; }
  .panier-bouton { padding: 0 4px; }
  .mode-interrupteur { gap: 10px; padding: 0 10px 0 14px; }   /* le bouton de langue reste sur la même ligne */
}
/* De 1024 à 1279 px : avec quatre liens et le bouton de langue, des écarts plus serrés, pour que « Chandelles »
   ne touche plus le menu (il le chevauchait à 1024 px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --menu-ecart: 24px; }
  .entete__actions { gap: 16px; }
}

/* « Le comptoir » au crayon sur une petite étiquette kraft trouée, comme les onglets du catalogue (menu 3, choix de
   Mathieu, 5 octobre 2026, à la demande de Daniel : « plus gros », pour dire que c'est une autre page). Même place
   dans le menu ; le trou remplace le soulignement des autres liens. Dans le menu du téléphone, en plus grand. */
.menu-principal { align-items: center; }
.menu-etiquette {
  position: relative; isolation: isolate; display: inline-flex; align-items: center;
  font-family: var(--police-crayon); font-weight: 400; line-height: 1; color: var(--encre-etiquette);
  transform: rotate(-2deg); filter: drop-shadow(0 4px 5px rgba(var(--ombre-rgb), .28));
  transition: transform var(--t-rapide) var(--ease);
}
/* le crayon et l'encre de l'étiquette, la même dans les deux modes : plus forts que la police et la couleur des
   autres liens du menu (Buenard au téléphone) */
.menu-principal .menu-etiquette, .menu-mobile__liens .menu-etiquette {
  font-family: var(--police-crayon); font-weight: 400; line-height: 1; color: var(--encre-etiquette);
}
.menu-principal .menu-etiquette { min-height: 40px; padding: 2px 14px 0 30px; font-size: 27px; }
.menu-etiquette::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #C59F74 url("../assets/img/onglet-kraft.webp") center / 220px auto;
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}
.menu-principal a.menu-etiquette::after, .menu-mobile__liens a.menu-etiquette::after {
  content: ""; position: absolute; inset: auto; left: 11px; top: 50%;
  width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%);
  background: var(--lin); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); transition: none;
}
@media (hover: hover) and (pointer: fine) { .menu-etiquette:hover { transform: rotate(-3deg) translateY(-1px); } }
.menu-mobile__liens .menu-etiquette { justify-self: start; margin: .8rem 0; min-height: 56px; padding: 4px 22px 0 40px; font-size: 40px; border: 0; }
.menu-mobile__liens a.menu-etiquette::after { left: 15px; width: 10px; height: 10px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .menu-principal { gap: 12px; }      /* l'étiquette prend plus de place qu'un lien : « Chandelles » ne touche pas le menu */
  .menu-principal .menu-etiquette { min-height: 36px; padding: 2px 9px 0 24px; font-size: 23px; }
  .menu-principal a.menu-etiquette::after { left: 9px; width: 7px; height: 7px; }
}

/* ---------- Haut de page ---------- */
.haut {
  position: relative;
  min-height: var(--h-haut);
}
.haut::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 80% at 14% 55%, var(--halo), transparent 72%);
}
.haut__photo {
  position: absolute; top: 0; bottom: 0; left: var(--photo-x); right: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
.haut__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.haut__texte { position: relative; padding-block: var(--titre-haut); }
@media (min-width: 1024px) { .haut { display: flex; align-items: center; } }
.haut h1 {
  font-size: var(--titre-taille); line-height: var(--titre-interligne); letter-spacing: -0.03em;
  max-width: 12em;
}
.haut__sous-titre {
  margin-top: var(--sous-titre-marge);
  font-size: var(--sous-titre-taille); line-height: 1.3; color: var(--encre-2);
}
.haut__bouton {
  margin-top: var(--bouton-haut-marge);
  width: var(--bouton-l); height: var(--bouton-h);
  font-size: var(--bouton-taille);
}
@media (max-width: 1023px) {
  .haut { display: flex; flex-direction: column; }
  .haut__texte { order: 0; padding-bottom: 26px; }
  .haut__photo {
    position: relative; order: 1; left: auto; right: auto; top: auto; bottom: auto;
    aspect-ratio: 16 / 10; -webkit-mask-image: none; mask-image: none;
  }
  .haut__photo img { object-position: 58% 50%; }
  .haut h1 { max-width: none; text-wrap: balance; }
  .haut h1 br { display: none; }
  .haut__bouton { padding-inline: 1.6em; }
}
/* Tablette : une photo plus large, pour garder les quatre chandelles et leurs étiquettes */
@media (min-width: 600px) and (max-width: 1023px) { .haut__photo { aspect-ratio: 2 / 1; } }

/* ---------- Catalogue ---------- */
.catalogue {
  position: relative;
  padding-block: calc(var(--catalogue-haut) + 44px) calc(var(--catalogue-haut) + 8px);
  background: var(--nuit); color: var(--nuit-texte-2);
  overflow-x: clip;     /* la section qui glisse entre deux onglets ne déborde pas sur les côtés ; en hauteur, la cire et le médaillon dépassent toujours */
}
/* La cire fine (assets/img/cire-fine*.webp, bande de 1800 x 110 qui se raccorde) : la cire du haut de page
   coule sur le velours, en coulées fines et translucides, courtes au-dessus du titre. Ombre comprise dans
   l'image. Décor seulement, sous rien de cliquable. */
.catalogue::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 110px; pointer-events: none;
  background: var(--cire) repeat-x 0 0 / 1800px 110px;
}
/* Le logo d'origine de Daniel, brûlé dans un médaillon de bois avec le petit cheval de la même photo en bas à
   gauche (assets/img/medaillon-bois-cheval.webp, calculé par .impeccable/build/medaillon/medaillon.py,
   provenance dans le .json voisin), posé à cheval sur la cire : à droite du bouton du haut sur ordinateur, au
   coin droit de la photo sur téléphone. */
.catalogue::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: -78px; left: calc(max(var(--gouttiere), (100% - var(--largeur)) / 2) + 236px);
  width: 200px; height: 150px;
  background: url("../assets/img/medaillon-bois-cheval.webp") center / contain no-repeat;
  transform: rotate(-6deg);
  filter: drop-shadow(0 7px 9px rgba(24, 12, 4, .38));
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .catalogue::after { width: 150px; height: 113px; top: -58px; }
}
@media (max-width: 1023px) {
  .catalogue::after { width: 136px; height: 102px; top: -48px; left: auto; right: calc(var(--gouttiere) - 6px); transform: rotate(5deg); }
}
.catalogue__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* Les onglets du catalogue sont deux étiquettes de kraft, trouées et écrites à la main, comme celles des
   chandelles sur la photo du haut (choix de Mathieu, 26 septembre 2026). Le papier vient de l'étiquette de
   L'artisan (assets/img/onglet-kraft.webp, provenance dans le .json voisin). L'étiquette choisie se soulève,
   inclinée avec une ombre ; l'autre reste à plat, un peu plus terne. Encre sur kraft (--encre-etiquette) : 5,6:1 au
   moins, même dans les coins les plus sombres du papier. Modèle d'onglets de l'ARIA (js/main.js, module « onglets »). */
.onglets { display: flex; align-items: center; gap: 18px; padding: 4px 0; }
.onglet {
  position: relative; isolation: isolate;
  min-height: 54px; padding: 0 24px 0 40px; border: 0 solid transparent; background: none; cursor: pointer;
  font-family: var(--police-crayon); font-weight: 400; font-size: 36px; line-height: 1; white-space: nowrap;
  color: var(--encre-etiquette); transform: rotate(1.5deg);
  transition: transform var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
/* le papier, coins gauches coupés comme une étiquette ; la découpe est sur ce calque pour que le contour du
   focus, posé sur le bouton, reste entier */
.onglet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #C59F74 url("../assets/img/onglet-kraft.webp") center / 260px auto;
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  filter: brightness(.92) saturate(.85);
  transition: filter var(--t-rapide) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .onglet:hover::before { filter: brightness(.96) saturate(.92); } }
/* le trou, qui laisse voir le velours */
.onglet::after {
  content: ""; position: absolute; left: 13px; top: 50%;
  width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%);
  background: var(--nuit); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 244, 225, .22);
}
.onglet[aria-selected="true"] { transform: rotate(-2deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.onglet[aria-selected="true"]::before { filter: none; }
@media (max-width: 1023px) {
  .onglets { flex-wrap: wrap; gap: 10px; }        /* à la ligne seulement si la place manque */
  .onglet { min-height: 46px; padding: 0 14px 0 30px; font-size: clamp(18px, 6vw, 27px); }
  .onglet::after { left: 10px; width: 8px; height: 8px; }
}
@media (max-width: 359px) {                       /* les plus petits téléphones : les deux étiquettes restent sur une ligne */
  .onglet { padding: 0 10px 0 26px; }
  .onglet::after { left: 9px; }
}
.recherche { position: relative; width: var(--recherche-l); flex: none; }
.recherche i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: var(--recherche-icone); color: var(--encre-3); pointer-events: none;
}
.recherche input {
  width: 100%; height: var(--recherche-h);
  padding: 0 1.2em 0 44px;
  border-radius: 999px; border: 1.5px solid var(--contour-champ);
  background: transparent; color: var(--encre-2);
  font-size: var(--recherche-taille);
  transition: border-color var(--t-rapide) var(--ease), box-shadow var(--t-rapide) var(--ease), background-color var(--t-rapide) var(--ease);
}
.recherche input::placeholder { color: var(--texte-champ); opacity: 1; }
.recherche input:focus { outline: none; border-color: var(--focus); background: color-mix(in srgb, var(--papier) 70%, transparent); box-shadow: 0 0 0 4px var(--accent-voile); }
@media (max-width: 1023px) {
  .catalogue__tete { flex-direction: column; align-items: stretch; gap: 16px; }
  .recherche i { left: 18px; }
  .recherche input { padding-left: 48px; }
}

.grille {
  margin-top: var(--grille-marge);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grille-ecart-col); row-gap: var(--grille-ecart-rang);
}
/* Cinq colonnes sur tout ordinateur : les dix modèles en deux rangées pleines */
@media (min-width: 1024px) and (max-width: 1179px) { .grille { column-gap: 16px; } }
@media (max-width: 1023px) { .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grille__vide { margin-top: 1.5rem; color: var(--encre-3); }

/* Une fiche : la photo sur velours bleu nuit, le nom, la mesure, la note au crayon, le bouton */
.fiche { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.fiche[hidden] { display: none; }
.fiche__photo {
  display: block; width: 100%; aspect-ratio: 411 / 302; overflow: hidden;
  padding: 0; border: 0; background: var(--fond-photo); cursor: zoom-in;
}
.fiche__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lent) var(--ease); }
@media (hover: hover) and (pointer: fine) { .fiche__photo:hover img { transform: scale(1.035); } }
.fiche__photo--vide {
  display: grid; place-items: center; text-align: center; cursor: default;
  background: var(--lin-2); color: var(--encre-3);
  box-shadow: inset 0 0 0 1px var(--ligne-forte);
}
.fiche__photo--vide i { display: block; font-size: 1.6em; margin-bottom: .3em; }
.fiche__photo--vide span { font-size: var(--dims-taille); padding: 0 1em; }
.fiche__nom {
  margin-top: var(--nom-marge);
  font-size: var(--nom-taille); line-height: 1.1; letter-spacing: 0;
}
.fiche__nom button {
  position: relative;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit;
}
.fiche__nom button::after { content: ""; position: absolute; inset: -2px 0; }   /* 24 px de haut à cliquer */
@media (hover: hover) and (pointer: fine) { .fiche__nom button:hover { text-decoration: underline; text-decoration-thickness: 1px; } }
.fiche__dims { margin-top: var(--dims-marge); font-size: var(--dims-taille); line-height: 1.3; color: var(--encre-3); }
.fiche__prix {
  margin-top: var(--note-marge); margin-bottom: var(--ajout-marge);
  font-size: var(--prix-taille); line-height: 1.35; color: var(--encre-2);
  font-variant-numeric: tabular-nums; text-wrap: pretty;
}
.fiche__prix strong { font-weight: 700; color: var(--encre); }
.fiche__ajouter {
  margin-top: auto;
  width: var(--ajout-l); min-height: var(--ajout-h); padding: 0 1.1em;
  font-size: var(--ajout-taille);
}

/* L'onglet des accessoires : rien à vendre encore, une vitrine vide au trait pointillé qui annonce la suite */
.accessoires {
  margin-top: var(--grille-marge);
  min-height: 260px; padding: 40px;
  display: grid; align-content: center; justify-items: start; gap: 10px;
  border: 1.5px dashed color-mix(in srgb, var(--nuit-texte) 26%, transparent);
}
.accessoires i { font-size: 32px; line-height: 1; color: var(--nuit-accent); margin-bottom: 6px; }
.accessoires__titre {
  font-family: var(--police-titre); font-weight: 700; font-size: 1.6rem; line-height: 1.2;
  color: var(--nuit-texte); text-wrap: balance;
}
.accessoires__texte { max-width: 60ch; color: var(--nuit-texte-2); text-wrap: pretty; }
/* « Faites une demande spéciale » : une planche ou un bougeoir sur demande, avant leur arrivée (14 octobre 2026) */
.accessoires__demande a { color: var(--nuit-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .accessoires__demande a:hover { text-decoration-thickness: 2px; } }
@media (max-width: 1023px) { .accessoires { padding: 28px 22px; min-height: 220px; } .accessoires__titre { font-size: 1.35rem; line-height: 1.4; } }

/* Le catalogue est posé sur le velours : le bleu nuit des photos de Daniel sert de fond, les photos
   s'y fondent comme dans une vitrine. Textes crème, contour de focus doré. */
.catalogue .fiche__nom { color: var(--nuit-texte); }
.catalogue .fiche__dims { color: var(--nuit-texte-3); }
.catalogue .fiche__prix { color: var(--nuit-texte-2); }
.catalogue .fiche__prix strong { color: var(--nuit-texte); }
.catalogue .fiche__ajouter { color: var(--nuit-accent); border-color: color-mix(in srgb, var(--nuit-accent) 62%, transparent); }
.catalogue .fiche__ajouter:hover { background: color-mix(in srgb, var(--nuit-accent) 12%, transparent); }
.catalogue .fiche__ajouter.est-ajoute { background: var(--nuit-accent); color: var(--nuit); border-color: var(--nuit-accent); }
.catalogue .fiche__photo--vide {
  background: color-mix(in srgb, var(--nuit-texte) 6%, transparent); color: var(--nuit-texte-3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nuit-texte) 22%, transparent);
}
.catalogue .recherche input { border-color: color-mix(in srgb, var(--nuit-texte) 32%, transparent); color: var(--nuit-texte); }
.catalogue .recherche input::placeholder, .catalogue .recherche i { color: var(--nuit-texte-3); }
.catalogue .recherche input:focus {
  background: color-mix(in srgb, var(--nuit-texte) 6%, transparent); border-color: var(--nuit-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nuit-focus) 20%, transparent);
}
.catalogue .grille__vide { color: var(--nuit-texte-3); }
.catalogue :focus-visible { outline-color: var(--nuit-focus); }

/* Étiquette honnête pour tout ce qui attend la réponse de Daniel */
.a-confirmer {
  display: inline-block; padding: .05em .55em; border-radius: 999px;
  border: 1px dashed var(--ligne-forte);
  font-size: .78em; font-weight: 500; line-height: 1.5; color: var(--encre-3); white-space: nowrap;
  vertical-align: .08em;
}

/* ---------- L'artisan, Commander et Demande spéciale : des chapitres sur le lin ----------
   Maquette 3 « Titres sur le lin », choisie par Mathieu le 28 septembre 2026 : des sections l'une sous l'autre, sur
   l'accueil (L'artisan est passé sur la page Le comptoir le 30 septembre 2026, puis il est revenu avant Commander
   le 5 octobre 2026). Le titre est posé sur le lin, au-dessus de la feuille ; dans la feuille, le texte à gauche
   (la phrase au crayon, puis l'intro) et le reste à droite (faits, étapes, formulaire). Chaque feuille a la
   hauteur de son contenu ; la feuille de l'enchère du mois, sur Le comptoir, est faite de même. Sous 1024 px, tout
   passe l'un sous l'autre. */
.chapitres { display: grid; gap: 56px; padding-block: 88px var(--section); }
.chapitre { position: relative; }            /* l'étiquette de L'artisan se place sur la section */
.chapitre__titre { margin-bottom: 18px; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; }
.feuille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start;
  padding: 40px 44px 44px;
  background: var(--papier);
  box-shadow: 0 1px 2px rgba(var(--ombre-rgb), .06), 0 22px 44px -30px rgba(var(--ombre-rgb), .4);
}
.feuille__phrase {
  font-family: var(--police-crayon); font-size: 44px; line-height: 1; color: var(--crayon);
  text-wrap: balance;
}
.feuille__intro { margin-top: 16px; max-width: 52ch; color: var(--encre-3); text-wrap: pretty; }

/* Commander : à gauche le texte, les détails et le bouton ; à droite les trois étapes */
.commander .feuille { grid-template-rows: auto auto 1fr; }
.commander .etapes { grid-column: 2; grid-row: 1 / 4; }
.etapes { margin-top: 4px; display: grid; gap: 18px; }
.etapes li { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: baseline; }
.etapes__chiffre {
  grid-row: 1 / 3;
  font-family: var(--police-crayon); font-size: 54px; line-height: .7; color: var(--kraft);
}
.etapes h3 { font-size: 1.125rem; line-height: 1.15; letter-spacing: -0.015em; }
.etapes p { margin-top: 4px; color: var(--encre-3); max-width: 52ch; text-wrap: pretty; }
.commander__details {
  grid-column: 1; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ligne);
  display: grid; gap: 10px;
}
.commander__details li { display: flex; gap: .7em; align-items: baseline; color: var(--encre-2); }
.commander__details i { color: var(--accent-texte); font-size: 1.15em; position: relative; top: .15em; flex: none; }
.commander__bouton {
  grid-column: 1; justify-self: start; margin-top: 26px;
  height: var(--bouton-h); padding-inline: 1.6em; font-size: var(--bouton-taille);
}

/* L'artisan : le texte, les faits, puis une colonne laissée libre pour l'étiquette */
.artisan .feuille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; }
.artisan__faits li {
  display: grid; grid-template-columns: 170px 1fr; column-gap: 20px;
  padding-block: 12px; border-bottom: 1px solid var(--ligne);
}
.artisan__faits li:first-child { padding-top: 4px; }
.artisan__faits li:last-child { border-bottom: 0; }
.artisan__faits h3 { font-family: var(--police-texte); font-size: 1em; font-weight: 600; color: var(--encre); letter-spacing: 0; }
.artisan__faits p { color: var(--encre-3); text-wrap: pretty; }

/* L'étiquette kraft : une image d'étiquette vierge générée par IA (photoréaliste) puis détourée
   (assets/img/etiquette-kraft.*, provenance intégrée), qui pend au coin de la feuille. L'écriture reste
   du texte, placée sur la partie vierge sous le trou. Elle se place sur la section, dont le haut est celui
   du titre, pour que la ficelle parte toujours du bord du bleu nuit. */
.artisan__carte {
  position: absolute; top: -94px; right: 34px; margin: 0;   /* la ficelle part du bord du bleu nuit */
  width: 140px;
  color: var(--encre-etiquette);
  transform: rotate(-5deg);
  filter: drop-shadow(0 10px 12px rgba(var(--ombre-rgb), .24));
}
.artisan__carte img { display: block; width: 100%; height: auto; }
.artisan__carte .artisan__mot {
  position: absolute; top: 37%; left: 10%; right: 10%; margin: 0;
  font-family: var(--police-crayon); font-size: 27px; line-height: 1.02; letter-spacing: .01em;
  text-align: center; text-wrap: balance;
}
.artisan__carte figcaption {                  /* « L'artisan » en gras (demande de Mathieu, 28 septembre 2026) */
  position: absolute; top: 75%; right: 13%;
  font-family: var(--police-crayon); font-size: 24px; font-weight: 700; line-height: 1;
}

/* Demande spéciale : le formulaire à droite */
.speciale__envoyer { justify-self: start; min-height: 52px; padding-inline: 1.8em; font-size: 1.05rem; }
.speciale .formulaire__consentement { text-align: left; }

/* De 1024 à 1279 px : le titre reste plus petit que le grand titre du haut de page, et les faits de L'artisan,
   dans une colonne plus étroite, passent leur titre au-dessus du texte */
@media (min-width: 1024px) and (max-width: 1279px) {
  .chapitre__titre { font-size: 2.4rem; }
  .artisan__faits li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}
@media (max-width: 1023px) {
  .chapitres { gap: 40px; padding-block: 48px var(--section); }
  .chapitre__titre { margin-bottom: 14px; font-size: 2rem; }
  .feuille { grid-template-columns: minmax(0, 1fr); row-gap: 26px; padding: 28px 22px 30px; }
  .feuille__phrase { font-size: 38px; }
  .commander .feuille { grid-template-rows: none; }
  .commander .etapes { grid-column: auto; grid-row: auto; }
  .etapes, .commander__details, .commander__bouton { margin-top: 0; }
  .etapes li { grid-template-columns: 40px 1fr; }
  .etapes__chiffre { font-size: 52px; }
  .artisan .feuille { grid-template-columns: minmax(0, 1fr); }
  .artisan__faits { border-top: 1px solid var(--ligne); }
  .artisan__faits li { grid-template-columns: 1fr; row-gap: 4px; padding-block: 14px; }
  .artisan__carte { position: relative; top: auto; right: auto; margin: 2px auto 0; width: 160px; }
  .artisan__carte .artisan__mot { font-size: 31px; }
  .artisan__carte figcaption { font-size: 27px; }
}

/* ---------- Page Le comptoir : la caverne aux trésors (troisième rencontre de Daniel, 6 octobre 2026) ----------
   Maquette 1 « Les rayons dans la caverne », choisie par Mathieu : en haut, le titre et un étalage de vraies photos
   de Daniel posées de travers ; les timbres (trois onglets en médaillons dorés : Vente libre, Sac à
   surprise, Enchère) et la monnaie sur le velours bleu nuit au grain fin ; le Bazar dessous. Clair et sombre (choix de
   Mathieu) : le jour sur le lin de l'accueil ; le soir, la caverne, un fond noir bleuté sous une lueur dorée. Le
   velours reste sombre dans les deux modes : ses jetons y sont ceux du mode sombre. Le pied de page reste en bas
   de l'écran. */
.page-comptoir { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.page-comptoir main { flex: 1 0 auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .page-comptoir { --lin: #0C1018; --lin-2: #141A27; --papier: #151B28; --halo: rgba(236, 168, 76, .2); }
}
:root[data-theme="sombre"] .page-comptoir { --lin: #0C1018; --lin-2: #141A27; --papier: #151B28; --halo: rgba(236, 168, 76, .2); }

/* Le haut : le titre à gauche, l'étalage à droite, sous une lueur chaude (--halo : la lampe le jour, l'or le soir) */
.comptoir-tete { position: relative; overflow-x: clip; background: radial-gradient(1150px 660px at 74% 46%, var(--halo), transparent 66%); }
.comptoir-tete__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-block: 60px 70px; }
.comptoir-tete__titre { font-size: 4.25rem; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.comptoir-intro { margin-top: 12px; max-width: 46ch; color: var(--encre-3); font-size: 1.125rem; text-wrap: pretty; }
.comptoir-sauts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.comptoir-sauts a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2em; border-radius: 999px;
  border: 1.5px solid var(--ligne-forte); color: var(--encre); text-decoration: none; font-weight: 600;
  transition: background-color var(--t-rapide) var(--ease), border-color var(--t-rapide) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .comptoir-sauts a:hover { background: var(--accent-voile); border-color: var(--accent); } }
.comptoir-note { margin-top: 18px; display: flex; gap: .6em; align-items: baseline; color: var(--encre-2); text-wrap: pretty; }
.comptoir-note i { flex: none; color: var(--accent-texte); position: relative; top: .12em; }
/* La pile : seize vraies photos de Daniel (zip du 5 octobre), l'une par-dessus l'autre avec leur ombre, en partie
   cachées, comme sur un comptoir où on fouille (message vocal du 7 octobre 2026, maquette 1 « Le tas sur le
   comptoir »). Les places sont en pour cent d'un cadre aux proportions fixes : la pile garde son dessin à toutes les
   largeurs. Décor seulement. */
.tresors { position: relative; aspect-ratio: 1.45 / 1; }
.tresors__piece {
  position: absolute; margin: 0;
  box-shadow: 0 22px 34px -14px rgba(var(--ombre-rgb), .62), 0 2px 5px rgba(var(--ombre-rgb), .35);
}
.tresors__piece img { display: block; width: 100%; height: auto; }
.tresors__piece--pologne { left: 4%; top: 0; width: 50%; transform: rotate(-5deg); z-index: 1; }
.tresors__piece--allemagne { left: 52%; top: -2%; width: 46%; transform: rotate(4deg); z-index: 1; }
.tresors__piece--tchecoslovaquie { left: 10%; top: 20%; width: 30%; transform: rotate(7deg); z-index: 2; }
.tresors__piece--espace { left: 46%; top: 30%; width: 50%; transform: rotate(6deg); z-index: 2; }
.tresors__piece--billet { left: -2%; top: 26%; width: 54%; transform: rotate(-8deg); z-index: 3; }
.tresors__piece--bhoutan { left: 30%; top: 6%; width: 28%; transform: rotate(-4deg); z-index: 4; }
.tresors__piece--couronnement { left: 78%; top: 22%; width: 20%; transform: rotate(-7deg); z-index: 4; }
.tresors__piece--billet-1934 { left: 56%; top: 58%; width: 42%; transform: rotate(-4deg); z-index: 4; }
.tresors__piece--triangles { left: 0; top: 60%; width: 28%; transform: rotate(7deg); z-index: 4; }
.tresors__piece--olympiques { left: 20%; top: 50%; width: 44%; transform: rotate(3deg); z-index: 5; }
.tresors__piece--reine { left: 70%; top: 74%; width: 28%; transform: rotate(5deg); z-index: 5; }
.tresors__piece--tigre { left: 84%; top: 2%; width: 14%; transform: rotate(9deg); z-index: 6; }
.tresors__piece--billet-1870 { left: 24%; top: 80%; width: 30%; transform: rotate(-3deg); z-index: 6; }
.tresors__piece--or { left: 64%; top: 46%; width: 17%; transform: rotate(-8deg); z-index: 7; }
.tresors__piece--argentine { left: -3%; top: 72%; width: 14%; transform: rotate(-12deg); z-index: 7; }
.tresors__piece--argent { left: 44%; top: 66%; width: 15%; transform: rotate(10deg); z-index: 8; }

/* Timbres et monnaie sur le velours, sans la cire ni le médaillon : le bleu nuit des photos de Daniel avec un grain
   fin (bruit calculé par le navigateur), et les jetons du mode sombre pour tout ce qui s'y pose (formulaire
   d'offre, pilules, notes), le jour comme le soir */
.comptoir-vitrine::before, .comptoir-vitrine::after { display: none; }
/* le grain du velours (bruit fin calculé par le navigateur), pour le velours et le fond des billets de la fenêtre */
.page-comptoir { --grain-velours: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .62  0 0 0 0 .68  0 0 0 0 .85  0 0 0 .11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.comptoir-vitrine {
  padding-block: 68px 80px;
  background: var(--grain-velours) 0 0 / 220px 220px, var(--nuit);
  box-shadow: inset 0 18px 24px -18px rgba(0, 0, 0, .7), inset 0 -18px 24px -18px rgba(0, 0, 0, .7);
  --encre: #F3EEE4; --encre-2: #E6E0D5; --encre-3: #B6B3AB; --papier: #1E2433; --champ-fond: #252C3C; --lin: #151A26; --lin-2: #1C2230;
  --accent: #E3C47E; --accent-fonce: #EBD299; --accent-texte: #E8CB88; --sur-accent: #1A1F2E; --accent-voile: rgba(227, 196, 126, .14);
  --ligne: rgba(243, 238, 228, .14); --ligne-forte: rgba(243, 238, 228, .28); --contour-champ: #737A8B; --texte-champ: #B7B3AA;
  --focus: #E8CB88; --erreur: #FF9DA6; --erreur-fond: rgba(255, 157, 166, .14);
}
.rayon + .rayon { margin-top: 76px; padding-top: 64px; border-top: 1px solid color-mix(in srgb, var(--nuit-texte) 16%, transparent); }
.rayon__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.rayon h2 { font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--nuit-texte); }
.rayon__texte { margin-top: 10px; color: var(--nuit-texte-2); text-wrap: pretty; }
.comptoir-vitrine .a-confirmer { color: var(--nuit-texte-3); border-color: color-mix(in srgb, var(--nuit-texte) 32%, transparent); }
.comptoir-vitrine .comptoir-note { margin-top: 26px; }
/* Les trois onglets des timbres : trois médaillons cerclés d'or, un dessin pour chaque façon d'acheter, le nom
   dessous (maquette 3 « Les médaillons », choisie par Mathieu le 8 octobre 2026 : moins de petites étiquettes
   brunes ; les continents gardent les leurs). Le choix ne fait aucun doute : le médaillon choisi est plein d'or,
   comme une pièce, avec son listel, il se soulève avec son ombre et son nom passe à l'or ; les autres restent
   cerclés d'or, le dessin et le nom en crème. Les dessins (un timbre dentelé, le sac d'où dépasse un timbre, le
   marteau d'enchère) sont faits pour le site au trait de Phosphor regular (grille de 256, trait de 16), en SVG
   dans comptoir.html. Le focus au clavier cercle le médaillon d'un anneau d'or. */
.rayon-onglets { display: flex; align-items: flex-start; gap: 12px 30px; margin-top: 34px; }
.rayon-onglet {
  display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 128px; margin: 0; padding: 0 6px 4px;
  border: 0; background: none; cursor: pointer; color: var(--nuit-texte-2);
  font-family: var(--police-titre); font-weight: 700; font-size: 1.25rem; line-height: 1.1; text-align: center;
  transition: color var(--t-rapide) var(--ease);
}
.rayon-onglet__medaillon {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; color: var(--nuit-texte-2);
  box-shadow: inset 0 0 0 1.5px rgba(227, 196, 126, .55);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.rayon-onglet__dessin { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .rayon-onglet:hover { color: var(--nuit-texte); }
  .rayon-onglet:hover .rayon-onglet__medaillon { color: var(--nuit-texte); box-shadow: inset 0 0 0 1.5px var(--nuit-accent); }
}
.rayon-onglet[aria-selected="true"] { color: var(--nuit-accent); }
.rayon-onglet[aria-selected="true"] .rayon-onglet__medaillon {
  background: var(--nuit-accent); color: var(--nuit); transform: translateY(-3px);
  box-shadow: inset 0 0 0 5px var(--nuit-accent), inset 0 0 0 6.5px rgba(35, 42, 61, .45), 0 12px 18px -8px rgba(0, 0, 0, .65);
}
.rayon-onglet:focus-visible { outline: none; }
.rayon-onglet:focus-visible .rayon-onglet__medaillon { outline: 2px solid var(--nuit-focus); outline-offset: 4px; }
.continents .onglet[aria-selected="true"]::after { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), 0 0 0 2px var(--nuit-accent); }
.timbres__panneau { margin-top: 30px; }
.timbres__panneau:focus-visible { outline-offset: 10px; }

/* Les sacs à surprise : un sac de papier brun d'où dépassent de vrais timbres, plus gros avec le prix (trois
   sacs, de 5 $ à 20 $, depuis le 14 octobre 2026) */
.grille--sacs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin-top: 22px; }
.fiche__photo.sac { aspect-ratio: 458 / 509; max-width: 300px; overflow: visible; background: none; }
.fiche__photo.sac picture { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }
.fiche__photo.sac img { width: 100%; height: auto; object-fit: contain; }
.fiche--petit .fiche__photo.sac img { width: 64%; }
.fiche--moyen .fiche__photo.sac img { width: 76%; }
.fiche--grand .fiche__photo.sac img { width: 88%; }

/* L'enchère : un panneau sombre à filet doré, la photo du lot à gauche, le lot et l'offre à droite ; l'offre la
   plus haute en or quand il y en a une (la flèche de gauche de Phosphor, tournée vers le haut) */
.enchere {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; padding: 30px;
  background: rgba(7, 9, 14, .5);
  box-shadow: inset 0 0 0 1px rgba(227, 196, 126, .62), 0 30px 50px -34px rgba(0, 0, 0, .9);
}
.enchere__visuel .fiche__photo { aspect-ratio: 4 / 3; }
.enchere__lot { font-family: var(--police-titre); font-weight: 700; font-size: 1.7rem; line-height: 1.15; color: var(--nuit-texte); text-wrap: balance; }
.enchere__description, .enchere__texte { margin-top: 8px; max-width: 56ch; color: var(--nuit-texte-2); text-wrap: pretty; }
.enchere__faits { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 34px; }
.enchere__faits dt { display: flex; align-items: center; gap: .45em; font-weight: 600; color: var(--nuit-texte); }
.enchere__faits dt i { color: var(--nuit-accent); }
.enchere__faits dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.enchere__faits .enchere__fleche { transform: rotate(90deg); }
.enchere__faits .enchere__haute--offre { color: var(--nuit-accent); font-weight: 700; }
.offre { margin-top: 22px; gap: 10px; }
.offre__champs {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px; gap: 14px; align-items: start;
  min-width: 0; margin: 0; padding: 0; border: 0;
}
.offre__champs .champ label { font-size: .95rem; }
.offre__champs .form__alerte { grid-column: 1 / -1; }
.offre__bouton { grid-column: 1 / -1; justify-self: start; min-height: 50px; padding-inline: 1.6em; font-size: 1.02rem; }
/* Fermé tant qu'il n'y a pas de lot : les champs pointillés, le bouton éteint, et la phrase qui le dit */
.offre__champs:disabled .champ input { background: transparent; border-style: dashed; cursor: not-allowed; }
.offre__champs:disabled .offre__bouton { cursor: not-allowed; background: var(--accent-voile); color: var(--encre-3); border-color: var(--ligne-forte); }
.offre__fermee { color: var(--encre-3); font-size: .95rem; }
.offre .formulaire__consentement { text-align: left; }

/* La vente libre : d'abord le continent (étiquettes à gauche), puis le pays et la colle au bout de la rangée */
.timbres__choix { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 28px; flex-wrap: wrap; }
.timbres__filtres { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.continents { flex-wrap: wrap; gap: 12px 14px; }
.continents .onglet { font-size: 28px; min-height: 46px; padding: 0 18px 0 32px; }
.continents .onglet::after { left: 11px; width: 8px; height: 8px; }
/* Le continent choisi se voit d'un coup d'œil : redressé, soulevé, papier plein, œillet cerclé d'or ; les autres
   restent à plat, plus petits et plus ternes (l'encre garde 4:1 au moins, texte de grande taille) */
.continents .onglet[aria-selected="false"] { transform: rotate(1deg) scale(.92); }
.continents .onglet[aria-selected="false"]::before { filter: brightness(.8) saturate(.65); }
.continents .onglet[aria-selected="true"] { transform: rotate(-3deg) translateY(-3px); filter: drop-shadow(0 9px 10px rgba(0, 0, 0, .5)); }
.pays { display: grid; gap: 6px; }
.pays label { font-weight: 600; font-size: .98rem; color: var(--nuit-texte-2); }
.pays__boite { position: relative; }
.pays select {
  appearance: none; -webkit-appearance: none; height: 44px; min-width: 230px; padding: 0 2.8em 0 1.1em; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--nuit-texte) 32%, transparent); background: transparent;
  color: var(--nuit-texte); font: inherit; cursor: pointer;
}
.pays select:disabled { cursor: default; color: var(--nuit-texte-3); }
.pays select option { color: var(--encre); background: var(--papier); }
.pays i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--nuit-texte-2); }
/* Avec ou sans colle : trois pilules (de vrais boutons radio), l'or plein pour le choix */
.colle { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.colle__titre { padding: 0; font-weight: 600; font-size: .98rem; color: var(--nuit-texte-2); }
.colle__choix { display: flex; flex-wrap: wrap; gap: 6px; }
.colle label { position: relative; }
.colle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.colle span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.05em; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--nuit-texte) 30%, transparent);
  color: var(--nuit-texte-2); font-size: .95rem; font-weight: 500; white-space: nowrap;
  transition: background-color var(--t-rapide) var(--ease), border-color var(--t-rapide) var(--ease), color var(--t-rapide) var(--ease);
}
.colle input:checked + span { background: var(--nuit-accent); border-color: var(--nuit-accent); color: #1A1F2E; font-weight: 700; }
.colle input:focus-visible + span { outline: 2px solid var(--nuit-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .colle input:not(:checked):not(:disabled):hover + span { background: color-mix(in srgb, var(--nuit-accent) 12%, transparent); }
}
.colle:disabled input { cursor: not-allowed; }
.colle:disabled span { opacity: .55; }

/* Les grilles et les formes de photo : le timbre carré, la pièce et le meuble en hauteur, le billet en largeur */
.sous-rayon { margin-top: 34px; font-size: 1.4rem; color: var(--nuit-texte); }
.grille--timbres { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fiche__photo.carre { aspect-ratio: 1 / 1; }
.fiche__photo.portrait, .fiche__photo.meuble { aspect-ratio: 4 / 5; }
.fiche__photo.billet { aspect-ratio: 2.1 / 1; }
/* La monnaie par groupes (message vocal de Daniel du 7 octobre 2026) : une carte par groupe, une seule photo posée
   de travers, celle du premier article (demande de Daniel, 14 octobre 2026 ; les autres sont dans le menu déroulant
   de la fenêtre) ; les pièces se règlent sur la hauteur du cadre, les billets sur sa largeur. La photo et « Voir… »
   ouvrent la fenêtre du groupe. Un groupe sans article : une place « à venir » à la forme du cadre, sans bouton. */
.groupes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 36px; margin-top: 22px; }
.groupe { display: grid; gap: 6px; align-content: start; justify-items: start; }
.groupe__photo { position: relative; width: 100%; cursor: pointer; }
.groupe--piece .groupe__photo { aspect-ratio: 1.15 / 1; }
.groupe--billet .groupe__photo { aspect-ratio: 1.75 / 1; }
.eventail__piece {
  position: absolute; top: 4%;
  box-shadow: 0 16px 26px -12px rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .45);
  transition: translate var(--t-rapide) var(--ease);
}
.eventail__piece picture { display: block; height: 100%; }
.eventail__piece img { display: block; }
.groupe--piece .eventail__piece { height: 84%; }
.groupe--piece .eventail__piece img { width: auto; height: 100%; }
.groupe--billet .eventail__piece { width: 78%; }
.groupe--billet .eventail__piece img { width: 100%; height: auto; }
.eventail--1 .eventail__piece { left: 50%; transform: translateX(-50%) rotate(-2deg); }
.groupe--billet .eventail--1 .eventail__piece { width: 92%; }
.groupe__vide { width: 100%; }
.groupe--piece .groupe__vide { aspect-ratio: 1.15 / 1; }
.groupe--billet .groupe__vide { aspect-ratio: 1.75 / 1; }
@media (hover: hover) and (pointer: fine) { .groupe__photo:hover .eventail__piece { translate: 0 -5px; } }
/* le nom du groupe au rôle Title des fiches (sous « Pièces » et « Billets », qui restent plus grands) */
.groupe__nom { margin: 10px 0 0; font-family: var(--police-titre); font-weight: 700; font-size: 1.125rem; line-height: 1.1; color: var(--nuit-texte); text-wrap: balance; }
.groupe__compte { color: var(--nuit-texte-2); }
.groupe__voir { margin-top: 8px; }
/* Ici, la photo n'ouvre pas de fiche : ni main ni loupe, ni grossissement au survol. Les photos de Daniel n'ont pas
   toutes les proportions du cadre : l'image est posée sur tout le cadre (et rognée au besoin), quelle que soit sa forme */
.comptoir-vitrine .fiche__photo, .comptoir-bazar .fiche__photo { cursor: default; position: relative; }
.comptoir-vitrine .fiche__photo > picture, .comptoir-bazar .fiche__photo > picture { position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) { .comptoir-vitrine .fiche__photo:hover img, .comptoir-bazar .fiche__photo:hover img { transform: none; } }
/* Les autres photos d'un article, en vignettes sous la grande : celle qui est en grand porte un anneau */
.fiche__vignettes { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.fiche__vignette {
  position: relative; display: block; overflow: hidden;
  width: 56px; height: 56px; padding: 0; border: 0; background: var(--fond-photo); cursor: pointer; opacity: .72;
  box-shadow: inset 0 0 0 1px var(--ligne-forte);
  transition: opacity var(--t-rapide) var(--ease), box-shadow var(--t-rapide) var(--ease);
}
.fiche__vignette picture { position: absolute; inset: 0; }
.fiche__vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fiche__vignette[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--lin), 0 0 0 4px var(--accent); }
@media (hover: hover) and (pointer: fine) { .fiche__vignette:hover { opacity: 1; } }
.fiche--a-venir .fiche__nom { font-family: var(--police-titre); font-weight: 700; color: var(--encre-3); }
.comptoir-vitrine .fiche--a-venir .fiche__nom { color: var(--nuit-texte-2); }

/* Le Bazar, sur le lin le jour et dans la caverne le soir : de plus grandes fiches, trois par rangée */
.comptoir-bazar { padding-block: 76px 84px; }
.grille--bazar { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
/* Dans une rangée, les noms s'alignent même quand une fiche a des vignettes et sa voisine non : chaque fiche suit
   les six rangées de la grille (photo, vignettes, nom, précision, prix, bouton) */
@supports (grid-template-rows: subgrid) {
  .grille--bazar { row-gap: 0; }
  .grille--bazar .fiche { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; justify-items: start; padding-bottom: var(--grille-ecart-rang); }
  .grille--bazar .fiche > * { grid-column: 1; }
  .grille--bazar .fiche__photo { grid-row: 1; }
  .grille--bazar .fiche__vignettes { grid-row: 2; }
  .grille--bazar .fiche__nom { grid-row: 3; }
  .grille--bazar .fiche__dims { grid-row: 4; }
  .grille--bazar .fiche__prix { grid-row: 5; }
  .grille--bazar .fiche__ajouter { grid-row: 6; align-self: start; }
}

@media (max-width: 1023px) {
  .comptoir-tete { background: radial-gradient(620px 420px at 50% 80%, var(--halo), transparent 70%); }
  .comptoir-tete__grille { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 40px 48px; }
  .comptoir-tete__titre { font-size: 3rem; }
  .comptoir-vitrine { padding-block: 48px 56px; }
  .rayon h2 { font-size: 2rem; }
  .rayon__tete, .timbres__choix, .timbres__filtres { flex-direction: column; align-items: stretch; }
  /* les trois médaillons en trois colonnes égales : toute la colonne se touche (plus de 90 px de haut) */
  .rayon-onglets { gap: 0; margin-top: 28px; }
  .rayon-onglet { flex: 1 1 0; min-width: 0; gap: 10px; padding: 0 4px 4px; font-size: 1rem; text-wrap: balance; }
  .rayon-onglet__medaillon { width: 66px; height: 66px; }
  .rayon-onglet__dessin { width: 32px; height: 32px; }
  .grille--sacs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 30px; }
  .fiche__photo.sac { max-width: 170px; }
  .enchere { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px; }
  .offre__champs { grid-template-columns: minmax(0, 1fr); }
  .pays select { min-width: 0; width: 100%; }
  .continents .onglet { font-size: 23px; min-height: 48px; padding: 0 12px 0 26px; }
  .grille--timbres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .groupe__nom { font-size: 1.0625rem; }
  .grille--bazar { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .comptoir-bazar { padding-block: 52px 60px; }
}
@media (max-width: 760px) {
  .grille--timbres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .groupes--billets { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pied de page ---------- */
.pied { padding: 56px 0 28px; border-top: 1px solid var(--ligne); font-size: .92em; }
.pied__grille { display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 40px; }
.pied__marque a {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre);
  font-family: var(--police-titre); font-weight: 700; font-size: 1.35em; line-height: 1;
}
.pied__marque img { width: auto; height: 44px; }
.pied__marque p { margin-top: 1.2em; max-width: 40ch; color: var(--encre-3); text-wrap: pretty; }
.pied__liens { display: grid; gap: .35em; align-content: start; }
.pied__liens h2 { font-family: var(--police-texte); font-size: 1em; font-weight: 600; margin-bottom: .3em; }
.pied__liens a, .pied__liens p {
  display: inline-flex; align-items: center; gap: .5em; justify-self: start;
  min-height: 40px; color: var(--encre-3); text-decoration: none; flex-wrap: wrap;
}
.pied__liens a:hover { color: var(--encre); text-decoration: underline; }
.pied__liens i { color: var(--encre-3); }
.pied__bas {
  margin-top: 36px; padding-top: 1.2em; border-top: 1px solid var(--ligne);
  display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap;
  font-size: .9em; color: var(--encre-3);
}
.pied__bas p { max-width: 80ch; text-wrap: pretty; }
.pied__bas a { color: var(--encre-3); }
@media (max-width: 1023px) {
  .pied { padding: 56px 0 28px; }
  .pied__grille { grid-template-columns: 1fr; gap: 28px; }
  .pied__bas { margin-top: 32px; }
}

/* Sous le pied de page : la politique de confidentialité et le retour en haut, l'un à côté de l'autre */
.pied__bas-liens { display: flex; flex-wrap: wrap; gap: .3em 1.4em; }
/* Le lien vers la politique sous chaque formulaire (il s'ouvre dans un nouvel onglet : le formulaire reste rempli) */
.formulaire__consentement a { color: inherit; text-decoration: underline; }

/* ---------- La politique de confidentialité et la page introuvable (lancement officiel, 16 octobre 2026) ----------
   Des pages de lecture sur le lin : le texte au plus 68ch, « En bref » sur une feuille de papier. Les deux langues
   de la politique sont dans la page ; la langue choisie (attribut lang du document, js/main.js) montre l'une ou
   l'autre. Le pied de page reste en bas de l'écran, comme sur Le comptoir. */
.page-legale { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.page-legale main { flex: 1 0 auto; }
html[lang^="en"] .legal__langue[lang^="fr"], html:not([lang^="en"]) .legal__langue[lang^="en"] { display: none; }
.legal { padding-block: 64px var(--section); }
.legal__langue { max-width: 68ch; }
.legal h1 { font-size: 3rem; line-height: 1.02; letter-spacing: -0.02em; }
.legal__date { margin-top: 12px; font-size: .95rem; color: var(--encre-3); }
.legal__resume {
  margin-top: 28px; padding: 24px 28px 26px; background: var(--papier);
  box-shadow: 0 1px 2px rgba(var(--ombre-rgb), .06), 0 22px 44px -30px rgba(var(--ombre-rgb), .4);
}
.legal .legal__resume h2 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
.legal__resume ul, .legal__liste { margin-top: 12px; padding-left: 1.25em; list-style: disc; display: grid; gap: 8px; }
.legal li::marker { color: var(--kraft); }
.legal h2 { margin-top: 44px; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.01em; }
.legal p { margin-top: 12px; text-wrap: pretty; }
.legal li { text-wrap: pretty; }
.legal a { color: var(--accent-texte); text-decoration: underline; overflow-wrap: anywhere; }
.introuvable { padding-block: 96px var(--section); }
.introuvable h1 { max-width: 18ch; font-size: 3rem; line-height: 1.02; letter-spacing: -0.02em; }
.introuvable p { margin-top: 14px; max-width: 52ch; color: var(--encre-3); text-wrap: pretty; }
.introuvable__liens { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Le pied de la page introuvable n'a que sa dernière ligne : un seul filet au-dessus */
.pied--court { padding-top: 22px; }
.pied--court .pied__bas { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 1023px) {
  .legal { padding-block: 44px var(--section); }
  .legal h1, .introuvable h1 { font-size: 2.3rem; }
  .legal h2 { margin-top: 36px; font-size: 1.4rem; }
  .legal__resume { padding: 20px 20px 22px; }
  .introuvable { padding-block: 64px var(--section); }
}

/* ---------- Message « ajouté au panier » ---------- */
.annonce {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: .8em;
  width: max-content; max-width: calc(100% - 32px);
  padding: .75em .75em .75em 1.1em; border-radius: 999px;
  background: var(--encre); color: var(--lin); font-size: 1rem; line-height: 1.3;
  box-shadow: 0 20px 40px -18px rgba(var(--ombre-rgb), .6);
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform var(--t-rapide) var(--ease), opacity var(--t-rapide) var(--ease);
}
.annonce.est-visible {
  transform: translate(-50%, 0); opacity: 1;
  transition-duration: var(--t-base); transition-timing-function: var(--ease-doux);
}
.annonce i { font-size: 1.3em; flex: none; }
.annonce__lien {                 /* un bouton sur l'accueil, un lien vers le panier de l'accueil sur Le comptoir */
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 1em; border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none;
  background: var(--lin); color: var(--encre); font-weight: 600;
}
.annonce__lien:hover { background: var(--papier); }

/* ---------- Panneaux : fiche détaillée et panier ---------- */
dialog { color: var(--encre-2); }
/* Une seule langue de mouvement pour les deux dialogues : entrée douce (--t-base, --ease-doux),
   sortie plus vive (--t-rapide, --ease). « allow-discrete » anime aussi la fermeture ; un navigateur
   qui ne connaît pas cette règle ouvre et ferme sans mouvement, ce qui reste correct.
   Le fond prend l'ombre du mode (--ombre-rgb) ; la valeur de secours sert aux navigateurs plus anciens,
   où ::backdrop n'hérite pas des jetons. */
dialog::backdrop {
  background: rgba(var(--ombre-rgb, 20, 24, 40), .55); opacity: 0;
  transition: opacity var(--t-rapide) var(--ease), overlay var(--t-rapide) allow-discrete, display var(--t-rapide) allow-discrete;
}
dialog[open]::backdrop { opacity: 1; transition-duration: var(--t-base); }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
.fiche-detail, .panneau {
  opacity: 0;
  transition: opacity var(--t-rapide) var(--ease), transform var(--t-rapide) var(--ease), overlay var(--t-rapide) allow-discrete, display var(--t-rapide) allow-discrete;
}
.fiche-detail { transform: translateY(12px) scale(.985); }
.panneau { transform: translateX(28px); }
.fiche-detail[open], .panneau[open] {
  opacity: 1; transform: none;
  transition-duration: var(--t-base); transition-timing-function: var(--ease-doux);
}
@starting-style {
  .fiche-detail[open] { opacity: 0; transform: translateY(12px) scale(.985); }
  .panneau[open] { opacity: 0; transform: translateX(28px); }
}
.fermer {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ligne-forte); background: transparent; color: var(--encre); font-size: 1.15rem;
  transition: background-color var(--t-rapide) var(--ease);
}
.fermer:hover { background: var(--accent-voile); }

.fiche-detail {
  width: min(940px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 18px; background: var(--papier);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
}
.fiche-detail__cadre { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; }
.fiche-detail .fermer { position: absolute; top: 14px; right: 14px; z-index: 1; background: var(--papier); }
.fiche-detail__photo { background: var(--fond-photo); min-height: 100%; }
.fiche-detail__photo picture, .fiche-detail__photo img { width: 100%; height: 100%; object-fit: cover; }
.fiche-detail__photo .fiche__photo--vide { height: 100%; aspect-ratio: 4 / 3; }
.fiche-detail__texte { padding: 44px 36px 32px; display: grid; align-content: start; gap: 10px; }
.fiche-detail__texte h2 { font-size: 2.1rem; line-height: 1.05; letter-spacing: -0.02em; padding-right: 36px; }
.fiche-detail__dims { color: var(--encre-3); }
.fiche-detail__note { color: var(--encre-2); }
.fiche-detail .fiche__prix { font-size: 1.15rem; margin-bottom: 0; }
.fiche-detail__option { margin-top: 8px; }
.fiche-detail__rang { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fiche-detail__ajouter { flex: 1 1 12rem; min-height: 52px; font-size: 1.05rem; }
.fiche-detail__rappel { margin-top: 8px; font-size: .92rem; color: var(--encre-3); text-wrap: pretty; }
/* La fenêtre d'un groupe de la monnaie (page Le comptoir) : la pièce, en hauteur, remplit sa colonne comme une
   chandelle ; le billet, en largeur, est posé entier sur le velours (data-rayon, posé à l'ouverture) */
.fiche-groupe .fiche-detail__photo { position: relative; }
.fiche-groupe .fiche-detail__photo picture { position: absolute; inset: 0; width: auto; height: auto; }
.fiche-groupe[data-rayon="piece"] .fiche-detail__photo { aspect-ratio: .88 / 1; }
@media (min-width: 761px) { .fiche-groupe[data-rayon="piece"] .fiche-detail__cadre { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); } }
.fiche-groupe[data-rayon="billet"] .fiche-detail__photo { min-height: 360px; background: var(--grain-velours) 0 0 / 220px 220px, var(--nuit); }
.fiche-groupe[data-rayon="billet"] .fiche-detail__photo picture { inset: 22px; }
.fiche-groupe[data-rayon="billet"] .fiche-detail__photo img { object-fit: contain; }
.fiche-groupe__seul { font-weight: 600; }
@media (max-width: 760px) {
  .fiche-detail__cadre { grid-template-columns: 1fr; }
  .fiche-detail__photo { aspect-ratio: 4 / 3; min-height: 0; }
  .fiche-detail__texte { padding: 22px 20px 24px; }
  .fiche-detail__texte h2 { font-size: 1.7rem; }
  .fiche-groupe[data-rayon="piece"] .fiche-detail__photo { aspect-ratio: 1 / 1; }
  .fiche-groupe[data-rayon="billet"] .fiche-detail__photo { aspect-ratio: 1.75 / 1; min-height: 0; }
  .fiche-groupe[data-rayon="billet"] .fiche-detail__photo picture { inset: 12px; }
}

.panneau {
  margin: 0 0 0 auto; width: min(480px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw;
  padding: 0; border: 0; background: var(--papier);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .5);
}
.panneau__cadre { min-height: 100%; padding: 18px 24px 28px; }
.panneau__etape { display: grid; gap: 18px; }
.panneau__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.panneau__tete h2, .panneau__titre-commande { font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.02em; }
.panneau__retour {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 .2em;
  border: 0; background: none; cursor: pointer; color: var(--encre-2); font-weight: 500;
}
.panneau__retour:hover { text-decoration: underline; }
.panneau__vide { display: grid; gap: 12px; justify-items: start; padding-top: 12px; }
.panneau__vide-note { font-family: var(--police-crayon); font-size: 1.9rem; line-height: 1.1; color: var(--crayon); }
.panneau__plein { display: grid; gap: 18px; }
/* Livraison gratuite (30 septembre 2026, maquette 2) : en haut du panier, combien il manque pour 75 $ au Québec,
   et une barre qui se remplit jusqu'au seuil (voir peindreJauge() dans js/main.js) */
.jauge-livraison {
  display: grid; gap: 11px; padding: 14px 16px 16px; border-radius: 12px;
  background: var(--lin); box-shadow: inset 0 0 0 1px var(--ligne);
}
.jauge-livraison__texte { display: flex; align-items: flex-start; gap: 8px; color: var(--encre-2); font-weight: 500; line-height: 1.4; }
.jauge-livraison__texte i { flex: none; font-size: 1.3em; line-height: 1.1; color: var(--kraft); }
.jauge-livraison.est-atteinte .jauge-livraison__texte i { color: var(--accent-texte); }
.jauge-livraison__texte span { text-wrap: balance; }
.jauge-livraison__texte b { font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; }
.jauge-livraison__piste { height: 8px; border-radius: 999px; background: var(--lin-2); box-shadow: inset 0 0 0 1px var(--ligne); overflow: hidden; }
.jauge-livraison.sans-barre .jauge-livraison__piste { display: none; }   /* Bazar : ramassage ou livraison à ses frais, pas de seuil */
.jauge-livraison__piste span {
  display: block; height: 100%; border-radius: inherit; background: var(--accent);
  clip-path: inset(0 100% 0 0 round 999px); transition: clip-path var(--t-base) var(--ease);
}
.panneau__resume { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.panneau__resume strong { font-family: var(--police-titre); font-size: 1.35rem; color: var(--encre); }
.panneau__resume p { color: var(--encre-3); font-size: .95rem; text-wrap: pretty; }
.panneau__prix { color: var(--encre-2); }
.panneau__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.panneau__total strong:last-child { font-variant-numeric: tabular-nums; }
.panneau__action { width: 100%; min-height: 54px; font-size: 1.05rem; }
.panneau__succes { display: grid; gap: 12px; justify-items: start; padding-top: 8px; }
.panneau__succes-icone {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent); font-size: 1.5rem;
}
.panneau__succes h3 { font-size: 1.6rem; line-height: 1.1; }
.panneau__succes p { color: var(--encre-3); }

.lignes { display: grid; gap: 14px; }
.ligne {
  display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; row-gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ligne);
}
.ligne__photo { width: 76px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fond-photo);
  display: grid; place-items: center; color: var(--nuit-texte-3); font-size: 1.2rem; }   /* sans photo : l'appareil photo */
.ligne__photo img { width: 100%; height: 100%; object-fit: cover; }
.ligne__texte { display: grid; align-content: start; gap: 2px; }
.ligne__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem; line-height: 1.15; color: var(--encre); }
.ligne__option { font-size: .9rem; color: var(--encre-3); }
.ligne__prix { font-size: .95rem; line-height: 1.35; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.ligne__actions { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ligne__retirer {
  min-height: 44px; padding: 0 .3em; border: 0; background: none; cursor: pointer;
  color: var(--encre-3); text-decoration: underline; text-underline-offset: .2em;
}
.ligne__retirer:hover { color: var(--erreur); }

.quantite {
  display: inline-flex; align-items: center; flex: none;
  border-radius: 999px; border: 1px solid var(--contour-champ); background: color-mix(in srgb, var(--papier) 60%, transparent);
}
.quantite button {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--encre-2); font-size: 1rem;
  transition: background-color var(--t-rapide) var(--ease);
}
.quantite button:hover { background: var(--accent-voile); color: var(--encre); }
.quantite input {
  width: 3ch; border: 0; padding: 0; background: transparent; text-align: center;
  font-weight: 600; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.quantite input::-webkit-outer-spin-button, .quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantite input:focus { outline: none; }
.quantite:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-voile); }

/* ---------- Formulaire ---------- */
.formulaire { display: grid; gap: 16px; }
.formulaire__recap {
  padding: .8em 1em; border-radius: 10px; background: var(--lin); color: var(--encre-2); font-size: .95rem;
  box-shadow: inset 0 0 0 1px var(--ligne);
}
.formulaire__recap b { color: var(--encre); }
.champ { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.champ label, .champ legend { font-weight: 600; font-size: .98rem; color: var(--encre); padding: 0; }
.champ .facultatif { font-weight: 400; color: var(--encre-3); }
.champ__aide { font-size: .88rem; color: var(--encre-3); }
.champ__erreur { display: none; font-size: .88rem; font-weight: 500; color: var(--erreur); }
.champ.est-invalide .champ__erreur { display: block; }
.champ input, .champ textarea, .liste-choix select {
  width: 100%; min-height: 48px; padding: .7em .9em;
  border-radius: 10px; border: 1px solid var(--contour-champ); background: var(--champ-fond);
  color: var(--encre-2);
  transition: border-color var(--t-rapide) var(--ease), box-shadow var(--t-rapide) var(--ease);
}
.champ textarea { resize: vertical; min-height: 88px; }
.champ input:focus, .champ textarea:focus, .liste-choix select:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-voile);
}
.champ.est-invalide input, .champ.est-invalide textarea { border-color: var(--erreur); }
.liste-choix { position: relative; }
.liste-choix select { appearance: none; -webkit-appearance: none; padding-right: 2.6em; cursor: pointer; }
.liste-choix i { position: absolute; right: .9em; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--encre-3); }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .choix { grid-template-columns: 1fr; } }
.choix__option { position: relative; }
.choix__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choix__option span {
  display: flex; align-items: center; gap: .5em; min-height: 50px; padding: .6em .9em;
  border-radius: 10px; border: 1px solid var(--contour-champ); font-weight: 500; line-height: 1.2;
  transition: border-color var(--t-rapide) var(--ease), background-color var(--t-rapide) var(--ease), box-shadow var(--t-rapide) var(--ease);
}
.choix__option span i { font-size: 1.2em; color: var(--encre-3); }
.choix__option input:checked + span { border-color: var(--accent); background: var(--accent-voile); box-shadow: inset 0 0 0 1px var(--accent); }
.choix__option input:checked + span i { color: var(--accent); }
.choix__option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__alerte {
  display: flex; gap: .6em; align-items: flex-start; padding: .8em 1em; border-radius: 10px;
  background: var(--erreur-fond); color: var(--erreur); font-size: .94rem; font-weight: 500;
}
.form__alerte i { font-size: 1.2em; flex: none; }
.formulaire__consentement { font-size: .86rem; color: var(--encre-3); text-align: center; text-wrap: pretty; }
/* Case à cocher (livraison hors Québec) : la case du navigateur, à la couleur du site ; toute la ligne est cliquable */
.case { display: flex; align-items: center; gap: .65em; min-height: 44px; font-size: .95rem; line-height: 1.35; color: var(--encre-2); cursor: pointer; }
.case input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* La facture de la commande : chandelles, livraison, total (voir peindreFacture() dans js/main.js) */
.facture { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.facture__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--encre-2); }
.facture__ligne > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.facture__total strong { font-family: var(--police-titre); font-size: 1.35rem; color: var(--encre); }
.facture__note { font-size: .88rem; color: var(--encre-3); }

/* ---------- La photo qui file vers le panier (voir envoler() dans main.js) ---------- */
.vol {
  position: fixed; z-index: 60; margin: 0; pointer-events: none;
  object-fit: cover; transform-origin: 50% 50%; will-change: transform, opacity;
  box-shadow: 0 14px 30px -14px rgba(var(--ombre-rgb), .45);
}

/* ---------- Utilitaires ---------- */
[hidden] { display: none !important; }

/* Visiteur qui a choisi l'anglais : la page reste cachée le temps que js/main.js remplace les textes (une fraction
   de seconde), pour éviter un éclair de français ; si le script ne passe pas, elle réapparaît après 1,5 s. */
html.traduction body { visibility: hidden; animation: reveler-page 0s 1.5s forwards; }
@keyframes reveler-page { to { visibility: visible; } }

/* ---------- Contraste élevé (Windows) ----------
   Les fonds et les images de papier disparaissent : chaque étiquette devient un bouton à bordure, celle qui est
   choisie prend la couleur de sélection du système ; l'interrupteur garde sa piste et son bouton en couleurs système,
   la barre de la livraison gratuite aussi. */
@media (forced-colors: active) {
  .jauge-livraison__piste { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .jauge-livraison__piste span { background: Highlight; }
  .onglet { border: 2px solid ButtonText; }
  .onglet::before, .onglet::after { display: none; }
  .onglet[aria-selected="true"] { border-color: Highlight; }
  .rayon-onglet__medaillon { border: 2px solid ButtonText; }
  .rayon-onglet[aria-selected="true"] .rayon-onglet__medaillon { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; box-shadow: none; }
  .rayon-onglet:focus-visible .rayon-onglet__medaillon { outline-color: CanvasText; }   /* le médaillon choisi garde ses couleurs : l'anneau prend celle du texte */
  .mode-interrupteur__piste { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .menu-etiquette { border: 2px solid LinkText; filter: none; }
  .menu-etiquette::before, .menu-principal a.menu-etiquette::after, .menu-mobile__liens a.menu-etiquette::after { display: none; }
  .mode-interrupteur__piste::after { background: CanvasText; }
  .mode-interrupteur[aria-pressed="true"] .mode-interrupteur__piste { background: Highlight; }
  .mode-interrupteur[aria-pressed="true"] .mode-interrupteur__piste::after { background: HighlightText; }
  .colle span { border-color: ButtonText; }
  .colle input:checked + span { border: 3px solid Highlight; }
  .fiche__vignette[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pastille.est-bousculee { animation: none; }
  .panneau, .fiche-detail, dialog::backdrop { transition: none; }
  .annonce { transition: none; }
  .quantite button, .fermer, .champ input, .champ textarea, .choix__option span { transition: none; }
  .menu-mobile { transition: none; }
  .fiche__photo img, .bouton, .menu-principal a::after { transition: none; }
  .fiche__photo:hover img { transform: none; }
  .entete, .menu-bouton__traits span, .recherche input { transition: none; }
  .mode-bouton, .langue-bouton, .mode-interrupteur, .mode-interrupteur__piste, .mode-interrupteur__piste::after { transition: none; }
  .onglet, .onglet::before, .rayon-onglet, .rayon-onglet__medaillon { transition: none; }
  .menu-etiquette, .comptoir-sauts a, .colle span, .fiche__vignette, .eventail__piece { transition: none; }
  .groupe__photo:hover .eventail__piece { translate: none; }
  .menu-etiquette:hover { transform: rotate(-2deg); }
  .jauge-livraison__piste span { transition: none; }
  .mode-icone--lune, .mode-icone--soleil { transform: none; filter: none; transition: opacity var(--t-rapide) linear; }   /* un simple fondu */
}