/* ==========================================================================
   Chandelles Daniel Lemaire : 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 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 Commander et L'artisan : 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 */
.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__suite { color: var(--nuit-texte-2); }
.bandeau-quebec__suite::before {
  content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 .7em; border-radius: 50%;
  background: currentColor; vertical-align: .22em;
}
@media (max-width: 520px) {
  .bandeau-quebec { padding-block: 11px; }
  .bandeau-quebec strong { font-size: 1.25rem; }
  .bandeau-quebec__suite { 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);
}
.menu-principal a:hover::after, .menu-principal a[aria-current="true"]::after { transform: scaleX(1); }

.entete__actions { justify-self: end; display: flex; align-items: center; gap: 24px; }
.mode-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 { transform: scale(.98); }
/* 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 { background: var(--accent-voile); border-color: var(--accent); }
}
.panier-bouton {
  justify-self: end;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--encre-2);
}
.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; }
.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 { 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; }
}

/* ---------- 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 (assets/img/medaillon-bois.webp, 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.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; 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; }
@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;
}

/* ---------- Commander et L'artisan : deux feuilles posées côte à côte sur le lin ---------- */
.duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  padding-block: 88px var(--section);
}
.feuille {
  position: relative; 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 h2 { font-size: var(--titre-2-taille); line-height: 1.08; letter-spacing: -0.02em; }
.feuille__intro { margin-top: 10px; max-width: 48ch; text-wrap: pretty; }

.etapes { margin-top: 26px; 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 {
  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 { margin-top: 26px; height: var(--bouton-h); padding-inline: 1.6em; font-size: var(--bouton-taille); }

.artisan h2, .artisan .feuille__intro { padding-right: 150px; }
.artisan__faits { margin-top: 26px; border-top: 1px solid var(--ligne); }
.artisan__faits li {
  display: grid; grid-template-columns: 170px 1fr; column-gap: 20px;
  padding-block: 12px; border-bottom: 1px solid var(--ligne);
}
.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. */
.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 blockquote { position: absolute; top: 48%; left: 10%; right: 10%; margin: 0; }
.artisan__carte blockquote p {
  font-family: var(--police-crayon); font-size: 27px; line-height: 1.02; letter-spacing: .01em;
  text-align: center; text-wrap: balance;
}
.artisan__carte figcaption {
  position: absolute; top: 72%; right: 15%;
  font-family: var(--police-crayon); font-size: 20px; line-height: 1;
}
@media (max-width: 1023px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 48px var(--section); }
  .feuille { padding: 28px 22px 30px; }
  .etapes li { grid-template-columns: 40px 1fr; }
  .etapes__chiffre { font-size: 52px; }
  .artisan h2, .artisan .feuille__intro { padding-right: 0; }
  .artisan__faits li { grid-template-columns: 1fr; row-gap: 4px; padding-block: 14px; }
  .artisan__carte { position: relative; top: auto; right: auto; margin: 28px auto 0; width: 160px; }
  .artisan__carte blockquote p { font-size: 31px; }
  .artisan__carte figcaption { font-size: 23px; }
}

/* ---------- 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; }
}

/* ---------- 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 {
  flex: none; min-height: 40px; padding: 0 1em; border-radius: 999px; border: 0; cursor: pointer;
  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; }
@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; }
}

.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; }
.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); }
.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; }

/* ---------- 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; }

/* ---------- 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. */
@media (forced-colors: active) {
  .onglet { border: 2px solid ButtonText; }
  .onglet::before, .onglet::after { display: none; }
  .onglet[aria-selected="true"] { border-color: Highlight; }
  .mode-interrupteur__piste { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .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; }
}

/* ---------- 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, .mode-interrupteur, .mode-interrupteur__piste, .mode-interrupteur__piste::after { transition: none; }
  .onglet, .onglet::before { transition: none; }
  .mode-icone--lune, .mode-icone--soleil { transform: none; filter: none; transition: opacity var(--t-rapide) linear; }   /* un simple fondu */
}