@charset "UTF-8";
/* ===========================================================================
   COMPTOIR — Vitrine · concept « Maison »
   ---------------------------------------------------------------------------
   Bordeaux · Or · Off-White. Grandes photographies, typographie de librairie,
   beaucoup de blanc, presque aucune bordure, ombres à peine perceptibles.

   TROIS PARTIS PRIS
   1. LE FILET D'OR est le seul ornement du site. Il souligne l'entrée active,
      il ouvre chaque section, il souligne un prix remisé. Une seule idée
      graphique, déclinée — c'est ce qui donne l'unité sans multiplier les
      effets.
   2. LES CARTES N'ONT PAS DE BORDURE. La photographie porte la carte ; le
      texte respire dessous. Une bordure autour d'une belle image la rapetisse.
   3. MOBILE D'ABORD, RÉELLEMENT. Toutes les règles de base décrivent le
      téléphone ; les écrans plus larges ajoutent, jamais ne corrigent. Les
      applications Android et iPhone reprendront ces mêmes jetons, donc rien
      n'est exprimé en pixels absolus là où une échelle est possible.

   CONTRAT DE THÈME — à ne pas rompre
   Le module Thème du back-office produit /theme.css, chargé APRÈS cette
   feuille et HORS @layer : ses valeurs gagnent donc toujours, sans qu'aucune
   règle d'ici n'ait besoin de !important. Les noms qu'il émet sont repris
   tels quels ci-dessous (--color-primary, --color-accent, --ink, --surface…).
   Renommer l'un d'eux casserait l'écran de thème.

   PHOTOGRAPHIES — état transitoire assumé
   Le catalogue n'a pas encore de vraies photos. Plutôt qu'un carré gris,
   .media-fallback compose un panneau de papier au filet d'or avec un
   pictogramme gravé : la grille reste régulière et la page reste présentable
   le jour du lancement. Voir §7.
   =========================================================================== */

@layer tokens, reset, base, layout, components, utilities;


/* =========================================================================
   1. POLICES — servies par le site, jamais par un tiers
   ========================================================================= */

@font-face{font-family:'Cormorant';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/cormorant-latin-wght.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,
    U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('../fonts/cormorant-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/jost-latin-wght.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,
    U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/grotesk-latin-wght.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,
    U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Inter en quatre graisses fixes : le fichier variable n'existe pas ici, mais
   400/500/600/700 couvrent tout ce dont une boutique a besoin. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}

/* L'arabe n'est téléchargé que si la page en contient : unicode-range s'en
   charge, aucune logique serveur n'est nécessaire. */
@font-face{font-family:'PlexArabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plex-arabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'PlexArabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plex-arabic-600.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'PlexArabic';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/plex-arabic-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}


/* =========================================================================
   2. JETONS
   ========================================================================= */

@layer tokens {
  :root {
    /* --- Marque. Ces quatre noms sont ceux qu'émet le module Thème. ------ */
    --color-primary:        #7a1b2d;
    --color-primary-hover:  #661624;
    --color-primary-active: #52111c;
    --color-primary-border: #d3aab2;
    --color-primary-subtle: #f7eef0;
    --color-on-primary:     #fbf9f6;
    --color-accent:         #c8963e;
    --color-accent-hover:   #b08436;
    --color-accent-subtle:  #f9f1e2;

    --ink:         #12100f;
    --surface:     #fbf9f6;
    --surface-alt: #f3eee8;
    /* Ce qui se POSE sur la page : champs, cartes, en-tête, menus. Distinct
       du fond de page, sinon un champ de saisie disparaît dès qu'on change la
       couleur du site — on ne voit plus où écrire. */
    --surface-raised: #ffffff;
    /* Le bandeau qui coiffe chaque page. Réglable dans le thème. */
    --page-band:     #1c1a19;
    --page-band-ink: #ffffff;
    --muted:       #635a54;
    --success:     #2e6b45;
    --danger:      #9a2438;

    /* --- Dérivés internes ------------------------------------------------ */
    --ink-2:      #2e2825;
    --ink-invert: #fbf9f6;
    --muted-2:    #8a7f76;
    --paper:      #eae3d9;
    --line:       #e7e0d6;
    --line-2:     #d8cec1;
    --line-invert: rgba(251,249,246,.18);
    --gold-pale:  #f1e3c6;
    --gold-deep:  #9a6f22;

    /* Le module Thème peut redéfinir --radius et --density : on les lit avec
       un repli, jamais en dur. Le concept « Maison » assume l'angle vif. */
    --r-0:  0;
    --r-sm: calc(var(--r-md, 0px) * .5);
    --r-md: var(--r-md, 0px);
    --r-lg: calc(var(--r-md, 0px) * 1.6);
    --r-pill: 999px;

    /* Échelle typographique fluide. --font-scale vient du module Thème. */
    --fs: var(--font-scale, 1);
    --t-2xs: calc(.688rem * var(--fs));
    --t-xs:  calc(.75rem  * var(--fs));
    --t-sm:  calc(.875rem * var(--fs));
    --t-md:  calc(1rem    * var(--fs));
    --t-lg:  calc(1.0625rem * var(--fs));
    --t-xl:  calc(clamp(1.25rem, 1rem + .9vw, 1.5rem)   * var(--fs));
    --t-2xl: calc(clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem) * var(--fs));
    --t-3xl: calc(clamp(2.1rem, 1.4rem + 3.4vw, 3.8rem) * var(--fs));
    --t-4xl: calc(clamp(2.6rem, 1.5rem + 5.6vw, 6.5rem) * var(--fs));

    --lead-tight: 1.06;
    --lead-snug:  1.28;
    --lead-body:  1.72;
    --track-wide: .18em;
    --track-caps: .3em;
    --track-hero: .42em;

    /* Rythme. --density vient du module Thème (0,85 à 1,15). */
    --d: var(--density, 1);
    --s-1: calc(.25rem * var(--d));
    --s-2: calc(.5rem  * var(--d));
    --s-3: calc(.75rem * var(--d));
    --s-4: calc(1rem   * var(--d));
    --s-5: calc(1.5rem * var(--d));
    --s-6: calc(2rem   * var(--d));
    --s-7: calc(3rem   * var(--d));
    --s-8: calc(4rem   * var(--d));

    /* Respiration verticale des sections : c'est elle qui fait le luxe. */
    --sec-y: clamp(3.25rem, 8vw, 8.5rem);
    --sec-y-sm: clamp(2.25rem, 5vw, 4.5rem);

    --container: 1320px;
    --container-text: 62ch;
    --gutter: clamp(1.25rem, 5vw, 3.5rem);
    --header-h: 4rem;
    --mobile-nav-h: 3.75rem;

    /* Ombres presque invisibles : on les sent, on ne les voit pas. */
    --sh-xs: 0 1px 2px rgb(23 19 19 / .04);
    --sh-sm: 0 2px 8px -4px rgb(23 19 19 / .1);
    --sh-md: 0 12px 30px -18px rgb(23 19 19 / .22);
    --sh-lg: 0 24px 60px -30px rgb(23 19 19 / .3);

    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.2, .7, .3, 1);
    --dur-fast: .18s;
    --dur: .32s;
    --dur-slow: .7s;

    --z-sticky: 30; --z-header: 40; --z-scrim: 50; --z-drawer: 60;
    --z-modal: 70; --z-toast: 80;

    --tap: 2.75rem;                    /* cible tactile minimale */
    --focus: 2px solid var(--color-accent);

    --font-display: 'Cormorant', 'PlexArabic', Georgia, serif;
    --font-body: 'Jost', 'PlexArabic', system-ui, -apple-system, sans-serif;
    --font-heading: var(--font-display);
    /* Graisses réglables depuis le thème. Les fichiers variables couvrent
       300 à 700 : changer ces valeurs ne télécharge rien de plus. */
    --weight-heading: 700;
    --weight-body:    500;
  }

  /* En arabe, la Cormorant n'a pas de glyphes : on bascule les titres sur
     Plex, qui tient le rôle d'affichage sans changer la mise en page. */
  [dir='rtl'] {
    --font-display: 'PlexArabic', Georgia, serif;
    --track-wide: .06em;
    --track-caps: .1em;
    --track-hero: .12em;
  }
}


/* =========================================================================
   3. REMISE À ZÉRO
   ========================================================================= */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sur iPhone, la barre d'onglets recouvre le bas de page : on réserve. */
    scroll-padding-block-start: calc(var(--header-h) + var(--s-4));
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
  }

  body {
    min-block-size: 100svb;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-md);
    font-weight: 400;
    line-height: var(--lead-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
  }
  /* La barre d'onglets mobile masquerait la fin de page. */
  @media (max-width: 47.99em) {
    body { padding-block-end: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); }
  }

  img, picture, video, svg { display: block; max-inline-size: 100%; }
  img { block-size: auto; background: var(--surface-alt); }
  a { color: inherit; text-decoration: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; }
  table { inline-size: 100%; border-collapse: collapse; }
  [hidden] { display: none !important; }

  :focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--color-accent); color: var(--ink); }
}


/* =========================================================================
   4. TYPOGRAPHIE DE BASE
   ========================================================================= */

@layer base {
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: var(--lead-tight);
    letter-spacing: -.005em;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-3xl); }
  h2 { font-size: var(--t-2xl); }
  h3 { font-size: var(--t-xl); }
  h4 { font-size: var(--t-lg); }
  p { text-wrap: pretty; }
  strong, b { font-weight: 500; }
  small { font-size: var(--t-xs); }
  s, del { color: var(--muted-2); }

  /* Sur-titre : petites capitales très espacées, en or. Il annonce la
     section avant que le titre ne la nomme. */
  .eyebrow {
    display: block;
    font-size: var(--t-2xs);
    font-weight: 400;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--color-accent);
  }
  .lede { font-size: var(--t-lg); color: var(--muted); max-inline-size: 52ch; }
  .text-small { font-size: var(--t-sm); }
  .text-xs { font-size: var(--t-xs); }
  .text-muted { color: var(--muted); }
  .text-primary { color: var(--color-primary); }
  .text-center { text-align: center; }
  .text-end { text-align: end; }
  .caps {
    font-size: var(--t-2xs); letter-spacing: var(--track-wide);
    text-transform: uppercase; color: var(--muted-2);
  }

  /* LE FILET D'OR — signature n° 1. Trois emplois, une seule idée. */
  .rule { inline-size: 3.25rem; block-size: 1px; background: var(--color-accent); border: 0; }
  .rule-full { inline-size: 100%; block-size: 1px; background: var(--line); border: 0; }

  .prose { max-inline-size: var(--container-text); }
  .prose > * + * { margin-block-start: var(--s-4); }
  .prose h2, .prose h3 { margin-block-start: var(--s-7); }
  .prose a { color: var(--color-primary); text-decoration: underline;
             text-underline-offset: .18em; text-decoration-thickness: 1px; }
  .prose ul, .prose ol { padding-inline-start: var(--s-5); }
  .prose li { list-style: disc; }
  .prose ol li { list-style: decimal; }

  .skip-link {
    position: absolute; inset-block-start: -100%; inset-inline-start: var(--s-4);
    z-index: var(--z-toast); padding: var(--s-3) var(--s-4);
    background: var(--ink); color: var(--ink-invert); font-size: var(--t-sm);
  }
  .skip-link:focus { inset-block-start: var(--s-2); }
  .visually-hidden, .sr-only {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .icon { flex: none; }
}


/* =========================================================================
   5. MISE EN PAGE
   ========================================================================= */

@layer layout {
  .container {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container-narrow { max-inline-size: var(--container-text); }

  .section { padding-block: var(--sec-y); }
  .section-tight { padding-block: var(--sec-y-sm); }
  .section-flush { padding-block: 0; }
  .section-alt { background: var(--surface-alt); }
  .section-invert { background: var(--ink); color: var(--ink-invert); }
  .section-invert h1, .section-invert h2, .section-invert h3 { color: var(--surface); }
  .section-invert .lede, .section-invert .text-muted { color: rgb(251 249 246 / .62); }

  /* En-tête de section : filet, sur-titre, titre, lien. Centré par défaut —
     c'est ce qui donne la tenue « maison ». */
  .section-head {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--s-3); text-align: center;
    max-inline-size: 40rem; margin-inline: auto;
    margin-block-end: clamp(2rem, 5vw, 4.5rem);
  }
  .section-head::before {
    content: ''; inline-size: 3.25rem; block-size: 1px; background: var(--color-accent);
  }
  .section-head-text { display: contents; }
  .section-title { margin: 0; }
  .section-lede { font-size: var(--t-lg); color: var(--muted); max-inline-size: 46ch; }
  .section-head-aside { margin-block-start: var(--s-3); }
  /* Variante alignée, pour les listings où le centre serait déplacé. */
  .section-head-start {
    align-items: flex-start; text-align: start; margin-inline: 0; max-inline-size: none;
  }

  .stack { display: flex; flex-direction: column; gap: var(--s-4); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .cols { display: flex; align-items: center; gap: var(--s-3); }
  .split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  @media (min-width: 60em) { .split { grid-template-columns: 1fr 21rem; } }
  .split-main { min-inline-size: 0; }

  .grid { display: grid; gap: var(--s-4); }
  .product-grid {
    display: grid; gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 48em) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 72em) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .category-grid { display: grid; gap: clamp(.75rem, 2vw, 1.5rem);
                   grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 58em) { .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .post-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
               grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

  /* Rangée défilante : sur téléphone, faire glisser vaut mieux qu'empiler. */
  .rail {
    display: flex; gap: var(--s-4); overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-block-end: var(--s-3);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 min(78%, 20rem); scroll-snap-align: start; }
  @media (min-width: 48em) { .rail > * { flex: 0 0 21rem; } }

  .mt-1{margin-block-start:var(--s-1)} .mt-2{margin-block-start:var(--s-2)}
  .mt-3{margin-block-start:var(--s-3)} .mt-4{margin-block-start:var(--s-4)}
  .mt-5{margin-block-start:var(--s-5)} .mt-6{margin-block-start:var(--s-6)}
  .mb-2{margin-block-end:var(--s-2)}   .mb-3{margin-block-end:var(--s-3)}
  .mb-4{margin-block-end:var(--s-4)}   .mb-5{margin-block-end:var(--s-5)}
  .ms-auto{margin-inline-start:auto}   .me-auto{margin-inline-end:auto}
  .mx-auto{margin-inline:auto}
  .flex-1{flex:1} .relative{position:relative}
  .justify-center{justify-content:center} .justify-between{justify-content:space-between}
  .items-center{align-items:center}
}


/* =========================================================================
   6. COMPOSANTS — commandes, en-tête, navigation
   ========================================================================= */

@layer components {

  /* ---- Boutons ----------------------------------------------------------
     Rectangulaires, hauts, en petites capitales espacées. Le bouton d'or est
     l'action principale ; il n'y en a jamais deux sur le même écran. */

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-block-size: var(--tap);
    padding-inline: clamp(1.4rem, 3vw, 2.5rem); padding-block: var(--s-3);
    border: 1px solid transparent; border-radius: var(--r-md);
    background: var(--color-accent); color: var(--ink);
    font-family: var(--font-body); font-size: var(--t-2xs); font-weight: 500;
    letter-spacing: var(--track-wide); text-transform: uppercase;
    line-height: 1.1; text-align: center; white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .btn:hover { background: var(--ink); color: var(--color-accent); }
  .btn[disabled], .btn[aria-disabled='true'] { opacity: .45; pointer-events: none; }
  .btn .icon { inline-size: 1rem; block-size: 1rem; }

  .btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
  .btn-primary:hover { background: var(--color-primary-active); color: var(--color-on-primary); }
  .btn-accent { background: var(--color-accent); color: var(--ink); }
  .btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
  .btn-outline:hover { background: var(--ink); color: var(--surface); }
  .btn-white { background: var(--surface); color: var(--ink); }
  .btn-white:hover { background: var(--color-accent); color: var(--ink); }
  .btn-quiet-invert {
    background: transparent; border-color: rgb(251 249 246 / .4); color: var(--surface);
  }
  .btn-quiet-invert:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }
  .btn-ghost {
    background: transparent; color: var(--ink-2);
    padding-inline: var(--s-3); letter-spacing: .1em;
  }
  .btn-ghost:hover { background: transparent; color: var(--color-primary); }
  .btn-danger { background: var(--danger); color: #fff; }

  .btn-sm { min-block-size: 2.5rem; padding-inline: var(--s-4); padding-block: var(--s-2); }
  .btn-lg { min-block-size: 3.5rem; padding-inline: clamp(2rem, 4vw, 3rem); font-size: var(--t-xs); }
  .btn-block { inline-size: 100%; }
  .btn-icon {
    padding-inline: 0; inline-size: var(--tap); min-block-size: var(--tap);
    background: transparent; color: var(--ink);
  }
  .btn-icon:hover { background: transparent; color: var(--color-primary); }


  /* ---- Bandeau d'annonce ------------------------------------------------ */

  .announce {
    background: var(--ink); color: var(--gold-pale); text-align: center;
    font-size: var(--t-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
    padding: var(--s-3) var(--gutter);
  }


  /* ---- En-tête ----------------------------------------------------------
     Fond translucide, filet d'or sous l'entrée active. Sur téléphone il ne
     porte que trois choses : le menu, la marque, le panier. */

  .site-header {
    position: sticky; inset-block-start: 0; z-index: var(--z-header);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-block-end: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
  }
  .site-header[data-stuck] { border-block-end-color: var(--line); }

  .header-bar {
    display: flex; align-items: center; gap: var(--s-3);
    min-block-size: var(--header-h);
  }
  @media (min-width: 48em) { :root { --header-h: 5.5rem; } .header-bar { gap: var(--s-5); } }

  .logo {
    font-family: var(--font-display); font-size: clamp(1.1rem, 2.6vw, 1.45rem);
    font-weight: 400; letter-spacing: var(--track-wide); text-transform: uppercase;
    white-space: nowrap;
  }
  .logo-img { block-size: 2rem; inline-size: auto; }

  .branch-chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line-2); color: var(--ink-2);
  }
  .branch-chip:hover { border-color: var(--color-accent); }
  .branch-chip-label { display: flex; flex-direction: column; line-height: 1.25; }
  .branch-chip-label small { font-size: var(--t-2xs); letter-spacing: .12em;
                             text-transform: uppercase; color: var(--muted-2); }
  .branch-chip-label b { font-size: var(--t-sm); font-weight: 400; }

  .header-search { display: none; position: relative; flex: 1; max-inline-size: 26rem; }
  @media (min-width: 64em) { .header-search { display: block; } }
  .search-field { position: relative; display: flex; align-items: center; }
  .search-icon { position: absolute; inset-inline-start: var(--s-3); color: var(--muted-2);
                 pointer-events: none; }
  .search-field .input {
    inline-size: 100%; padding-inline: calc(var(--s-6) + var(--s-1)) var(--s-4);
    border: 0; border-block-end: 1px solid var(--line-2); background: transparent;
  }
  .search-field .input:focus { outline: 0; border-block-end-color: var(--color-accent); }

  .header-actions { display: flex; align-items: center; gap: var(--s-1);
                    margin-inline-start: auto; }
  .cart-count {
    position: absolute; inset-block-start: .3rem; inset-inline-end: .25rem;
    min-inline-size: 1.05rem; block-size: 1.05rem; padding-inline: .2rem;
    display: grid; place-items: center; border-radius: var(--r-pill);
    background: var(--color-primary); color: var(--color-on-primary);
    font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums;
  }


  /* ---- Méga-menu (grand écran) ------------------------------------------ */

  .mega { display: none; border-block-start: 1px solid var(--line); }
  @media (min-width: 64em) { .mega { display: block; } }
  .mega-bar { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
  .mega-link {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding-block: var(--s-4);
    font-size: var(--t-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
    color: var(--ink-2); border-block-end: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .mega-link:hover, .mega-link[aria-expanded='true'], .mega-link[aria-current] {
    color: var(--ink); border-block-end-color: var(--color-accent);
  }
  .mega-link-promo { color: var(--color-primary); }
  .mega-panel {
    position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: var(--z-header);
    background: var(--surface); border-block-end: 1px solid var(--line);
    box-shadow: var(--sh-md); padding-block: var(--s-6);
  }
  .mega-panel[hidden] { display: none; }
  .mega-grid {
    max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter);
    display: grid; gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
  .mega-col-title { margin-block-end: var(--s-2); }
  .mega-col-title a { font-family: var(--font-display); font-size: var(--t-lg); }
  .mega-col a { display: block; padding-block: var(--s-1); font-size: var(--t-sm);
                color: var(--muted); }
  .mega-col a:hover { color: var(--color-primary); }


  /* ---- Sélecteur de langue ---------------------------------------------- */

  .popover {
    position: absolute; inset-block-start: calc(100% + var(--s-2)); inset-inline-end: 0;
    z-index: var(--z-header); min-inline-size: 12rem; padding: var(--s-2);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-lg);
  }
  .popover[hidden] { display: none; }
  .popover-label { padding: var(--s-2) var(--s-3); font-size: var(--t-2xs);
                   letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted-2); }
  .popover-item { display: flex; align-items: center; gap: var(--s-2);
                  padding: var(--s-3); font-size: var(--t-sm); }
  .popover-item:hover { background: var(--surface-alt); }
  .popover-item[aria-current='true'] { color: var(--color-primary); }

  .lang-switch { display: inline-flex; }
  .lang-switch a {
    padding: var(--s-2) var(--s-3); font-size: var(--t-2xs); letter-spacing: var(--track-wide);
    color: var(--muted-2);
  }
  .lang-switch a + a { border-inline-start: 1px solid var(--line); }
  .lang-switch a:hover { color: var(--ink); }
  .lang-switch a[aria-current='true'] { color: var(--color-accent); }
  .site-footer .lang-switch a + a { border-inline-start-color: var(--line-invert); }


  /* ---- Tiroirs et barre d'onglets --------------------------------------- */

  .drawer-backdrop {
    position: fixed; inset: 0; z-index: var(--z-scrim);
    background: rgb(23 19 19 / .5); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .drawer-backdrop[data-open] { opacity: 1; visibility: visible; }

  .drawer {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-drawer);
    inline-size: min(88vw, 25rem); display: flex; flex-direction: column;
    background: var(--surface);
    transform: translateX(-102%);
    transition: transform var(--dur) var(--ease-out);
  }
  [dir='rtl'] .drawer { transform: translateX(102%); }
  .drawer[data-open] { transform: none; }
  .drawer-head { display: flex; align-items: center; gap: var(--s-3);
                 padding: var(--s-4) var(--s-5); border-block-end: 1px solid var(--line); }
  .drawer-title { font-family: var(--font-display); font-size: var(--t-xl); }
  .drawer-body { flex: 1; overflow-y: auto; padding: var(--s-5);
                 -webkit-overflow-scrolling: touch; }
  .drawer-foot { padding: var(--s-4) var(--s-5); border-block-start: 1px solid var(--line); }
  .drawer-link {
    display: flex; align-items: center; gap: var(--s-3);
    min-block-size: var(--tap); padding-block: var(--s-3);
    font-size: var(--t-sm); letter-spacing: .04em;
  }
  .drawer-link:hover { color: var(--color-primary); }
  .drawer-link .icon:last-child { margin-inline-start: auto; color: var(--muted-2); }
  .drawer-sep { block-size: 1px; background: var(--line); margin-block: var(--s-4); }

  /* Barre d'onglets : le schéma des applications, pour que le passage vers
     Android et iPhone soit une continuité. */
  .mobile-nav {
    position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-sticky);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-block-start: 1px solid var(--line);
    padding-block-end: env(safe-area-inset-bottom);
  }
  @media (min-width: 48em) { .mobile-nav { display: none; } }
  .mobile-nav a {
    position: relative; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; min-block-size: var(--mobile-nav-h);
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  .mobile-nav a[aria-current] { color: var(--color-primary); }
  .mobile-nav a[aria-current]::before {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 30%;
    block-size: 1px; background: var(--color-accent);
  }
  .mobile-nav .cart-count { inset-block-start: .4rem; inset-inline-end: 22%; }


  /* =======================================================================
     7. LE PANNEAU DE REPLI — état transitoire, assumé
     -----------------------------------------------------------------------
     Le catalogue n'a pas encore de photographies. Un carré gris ferait
     « base de données » et ruinerait un concept qui repose sur l'image.
     À la place : un panneau de papier, une trame tissée à peine visible, un
     filet d'or en retrait et un pictogramme gravé. La grille reste régulière,
     la page reste présentable, et le jour où les vraies photos arrivent, il
     suffit qu'elles remplacent le bloc — aucune règle à défaire.
     ======================================================================= */

  .media-fallback {
    position: relative;
    inline-size: 100%; block-size: 100%;
    display: grid; place-items: center;
    background-color: var(--surface-alt);
    /* Trame tissée : deux diagonales opposées, très pâles. */
    background-image:
      repeating-linear-gradient(45deg,  rgb(122 27 45 / .035) 0 1px, transparent 1px 9px),
      repeating-linear-gradient(-45deg, rgb(122 27 45 / .025) 0 1px, transparent 1px 9px);
    color: var(--color-primary);
    overflow: hidden;
  }
  /* Le filet d'or en retrait : c'est lui qui transforme un vide en cadre. */
  .media-fallback::before {
    content: ''; position: absolute; inset: clamp(.6rem, 4%, 1.1rem);
    border: 1px solid rgb(200 150 62 / .45); pointer-events: none;
  }
  .media-fallback svg,
  .media-fallback .icon {
    inline-size: 34%; block-size: auto; max-inline-size: 5.5rem;
    opacity: .18; stroke-width: 1.1;
  }
  /* Mention discrète, seulement là où la place le permet. */
  .media-fallback::after {
    content: attr(data-label);
    position: absolute; inset-block-end: clamp(.9rem, 7%, 1.6rem); inset-inline: 0;
    text-align: center; font-size: var(--t-2xs); letter-spacing: var(--track-wide);
    text-transform: uppercase; color: var(--muted-2);
  }


  /* ---- Hero et slider ---------------------------------------------------
     Chaque diapositive porte SA légende : c'est ce qui permet au gérant de
     composer plusieurs messages depuis le back-office. L'entrée en cascade
     est pilotée par aria-hidden, donc sans JavaScript supplémentaire. */

  .hero {
    position: relative; overflow: hidden;
    min-block-size: clamp(26rem, 78svh, 48rem);
    display: flex; align-items: center; background: var(--ink);
  }
  .hero-full { inline-size: 100%; }
  .hero-media { position: absolute; inset: 0; z-index: 0; }
  .hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg,
      rgb(15 12 12 / .88) 0%, rgb(15 12 12 / .55) 44%, rgb(15 12 12 / .14) 82%);
  }
  .hero-fallback { background: var(--color-primary-active); }
  .hero-fallback::after { background: linear-gradient(100deg,
      rgb(15 12 12 / .7) 0%, rgb(15 12 12 / .35) 60%, transparent 100%); }

  .hero-body {
    position: relative; z-index: 2; color: var(--surface);
    padding-block: clamp(4.5rem, 12vw, 8rem) clamp(3.5rem, 9vw, 6rem);
    max-inline-size: 44rem;
  }
  .hero-eyebrow {
    display: block; font-size: var(--t-2xs); letter-spacing: var(--track-hero);
    text-transform: uppercase; color: var(--color-accent);
  }
  .hero-body h1, .hero-body h2 {
    margin-block: var(--s-5) var(--s-4);
    font-size: var(--t-4xl); font-weight: 300;
    letter-spacing: .012em; text-transform: uppercase; color: var(--surface);
  }
  .hero-body p { font-size: var(--t-lg); color: rgb(251 249 246 / .76); max-inline-size: 46ch; }

  .slider { position: relative; overflow: hidden; }
  .slider-track { display: flex; transition: transform var(--dur-slow) var(--ease); }
  .slider-track > * { flex: 0 0 100%; }
  /* Variante fondu : les diapositives se superposent au lieu de glisser. */
  .slider-fade .slider-track { display: block; transform: none !important; }
  .slider-fade .slider-track > * {
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease);
  }
  .slider-fade .slider-track > *[aria-hidden='false'] { opacity: 1; pointer-events: auto; }
  .slider-fade { min-block-size: clamp(26rem, 78svh, 48rem); }

  .slider-track > * .hero-body > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity .9s var(--ease), transform .9s var(--ease-out);
  }
  .slider-track > *[aria-hidden='false'] .hero-body > * { opacity: 1; transform: none; }
  .slider-track > *[aria-hidden='false'] .hero-body > *:nth-child(2) { transition-delay: .1s; }
  .slider-track > *[aria-hidden='false'] .hero-body > *:nth-child(3) { transition-delay: .2s; }
  .slider-track > *[aria-hidden='false'] .hero-body > *:nth-child(4) { transition-delay: .3s; }
  @media (prefers-reduced-motion: reduce) {
    .slider-track > * .hero-body > * { opacity: 1; transform: none; }
  }

  .slider-nav {
    position: absolute; inset-block-start: 50%; transform: translateY(-50%);
    z-index: 4; inline-size: var(--tap); block-size: var(--tap);
    display: grid; place-items: center;
    color: var(--surface); opacity: .55;
    transition: opacity var(--dur) var(--ease);
  }
  .slider-nav:hover { opacity: 1; }
  .slider-prev { inset-inline-start: var(--s-2); }
  .slider-next { inset-inline-end: var(--s-2); }
  @media (min-width: 48em) {
    .slider-prev { inset-inline-start: var(--s-4); }
    .slider-next { inset-inline-end: var(--s-4); }
  }
  .slider-dots {
    position: absolute; inset-block-end: var(--s-5); inset-inline-start: 50%;
    transform: translateX(-50%); z-index: 4; display: flex; gap: var(--s-2);
  }
  .slider-dots button {
    inline-size: 2.1rem; block-size: 1.5px; padding: 0;
    background: rgb(251 249 246 / .34); transition: background-color var(--dur) var(--ease);
  }
  .slider-dots button[aria-current='true'], .slider-dots button.is-active {
    background: var(--color-accent);
  }
  .slider-count {
    position: absolute; z-index: 4; inset-block-end: var(--s-5); inset-inline-end: var(--gutter);
    font-family: var(--font-display); font-size: var(--t-sm);
    letter-spacing: var(--track-wide); color: rgb(251 249 246 / .7);
  }


  /* ---- Bannières --------------------------------------------------------
     Trois formats, trois emplacements administrables : le bandeau pleine
     largeur, le trio vertical, la bannière simple. */

  .banner {
    position: relative; display: flex; align-items: center; overflow: hidden;
    min-block-size: clamp(17rem, 34vw, 30rem); background: var(--ink);
  }
  .banner-media { position: absolute; inset: 0; z-index: 0; }
  .banner-media img {
    inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .62;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .banner:hover .banner-media img { transform: scale(1.045); }
  .banner-body {
    position: relative; z-index: 2; color: var(--surface);
    padding: clamp(1.75rem, 5vw, 3.5rem); max-inline-size: 34rem;
  }
  .banner-body .section-title { color: var(--surface); font-size: var(--t-2xl); }
  .banner-body .section-lede { color: rgb(251 249 246 / .74); }

  .banner-trio { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
                 grid-template-columns: 1fr; }
  @media (min-width: 44em) { .banner-trio { grid-template-columns: repeat(3, 1fr); } }
  .banner-card-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-alt); }
  .banner-card-media img { inline-size: 100%; block-size: 100%; object-fit: cover;
                           transition: transform var(--dur-slow) var(--ease-out); }
  .banner-card:hover .banner-card-media img { transform: scale(1.05); }
  .banner-card h3 { margin-block: var(--s-4) var(--s-2); }
  .banner-card p { font-size: var(--t-sm); color: var(--muted); }
  .banner-card em {
    display: inline-block; margin-block-start: var(--s-3); font-style: normal;
    font-size: var(--t-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
    color: var(--color-accent); border-block-end: 1px solid var(--color-accent);
    padding-block-end: 2px;
  }


  /* ---- Rayons ------------------------------------------------------------ */

  .category-card {
    position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
    background: var(--surface-alt); isolation: isolate;
  }
  .category-card img { inline-size: 100%; block-size: 100%; object-fit: cover;
                       transition: transform var(--dur-slow) var(--ease-out); }
  .category-card:hover img { transform: scale(1.055); }
  .category-card::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgb(15 12 12 / .82) 0%, rgb(15 12 12 / .2) 46%, transparent 72%);
  }
  .category-card-label {
    position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2;
    padding: clamp(1rem, 3vw, 1.6rem); color: var(--surface);
    display: flex; flex-direction: column; gap: 2px;
  }
  .category-card-label b {
    font-family: var(--font-display); font-size: var(--t-xl); font-weight: 400;
  }
  .category-card-label small { font-size: var(--t-2xs); letter-spacing: var(--track-wide);
                               text-transform: uppercase; color: rgb(251 249 246 / .72); }


  /* ---- Carte produit ----------------------------------------------------
     Aucune bordure : la photographie porte la carte. Au survol, une seule
     chose apparaît — le bouton d'ajout. Rien d'autre ne bouge. */

  .product-card { position: relative; display: flex; flex-direction: column; }
  .product-card-media {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--surface-alt);
  }
  .product-card-media > img {
    inline-size: 100%; block-size: 100%; object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
  }
  .product-card:hover .product-card-media > img { transform: scale(1.05); }

  .product-card-body { padding-block-start: var(--s-4); display: flex;
                       flex-direction: column; gap: var(--s-1); }
  .product-card-cat {
    font-size: var(--t-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
    color: var(--color-accent);
  }
  .product-card-title {
    font-family: var(--font-display); font-size: var(--t-xl); font-weight: 400;
    line-height: var(--lead-snug);
  }
  .product-card-title:hover { color: var(--color-primary); }
  .product-card-foot { display: flex; align-items: flex-end; justify-content: space-between;
                       gap: var(--s-3); margin-block-start: var(--s-2); }

  /* Le bouton n'apparaît qu'au survol, en douceur ; au doigt il reste visible. */
  /* Le bouton vit dans le flux, sous le prix, et reste visible : posé en
     absolu il recouvrait le prix au survol — au moment même où le client
     regarde combien ça coûte. */
  .product-card-add { padding-block-start: var(--s-3); }
  /* Une nuance de survol qui n'enlève rien : le bouton s'affirme quand la
     carte est visée, sans jamais disparaître ni masquer quoi que ce soit. */
  .product-card-add .btn { transition: background-color var(--dur) var(--ease),
                                       color var(--dur) var(--ease); }
  .product-card-add .btn { font-size: var(--t-2xs); min-block-size: 2.75rem; }

  .card-fav-form { position: absolute; inset-block-start: var(--s-3);
                   inset-inline-end: var(--s-3); z-index: 4; }
  .card-fav {
    inline-size: 2.25rem; block-size: 2.25rem; display: grid; place-items: center;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(6px); color: var(--ink-2);
    opacity: 0; transition: opacity var(--dur) var(--ease), color var(--dur-fast) var(--ease);
  }
  .product-card:hover .card-fav, .card-fav:focus-visible,
  .card-fav[aria-pressed='true'] { opacity: 1; }
  @media (hover: none) { .card-fav { opacity: 1; } }
  .card-fav[aria-pressed='true'] { color: var(--color-primary); }
  .card-fav[aria-pressed='true'] svg { fill: currentColor; }

  .card-flags { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 3;
                display: flex; flex-direction: column; align-items: flex-start; }
  .flag {
    padding: var(--s-2) var(--s-3);
    font-size: var(--t-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
    background: var(--color-primary); color: var(--color-on-primary);
  }
  .flag-promo { background: var(--color-primary); }
  .flag-new { background: var(--color-accent); color: var(--ink); }
  .flag-out { background: var(--ink); color: var(--surface); }

  /* Vue en liste : la même carte, couchée. */
  .product-card-row { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s-4);
                      align-items: center; }
  .product-card-row .product-card-media { aspect-ratio: 1; }
  .product-card-row .product-card-add { position: static; opacity: 1; transform: none; padding: 0; }


  /* ---- Prix -------------------------------------------------------------
     Le nombre en Cormorant, chiffres tabulaires ; la devise et l'unité en
     Jost, plus petites. Un prix remisé est souligné d'or. */

  .price-block { display: flex; flex-direction: column; gap: 2px; }
  .price { display: inline-flex; align-items: baseline; gap: var(--s-1); }
  .price-amount {
    font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 400;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1;
  }
  .price-currency { font-size: var(--t-xs); letter-spacing: .08em; color: var(--muted); }
  .price-unit { font-size: var(--t-2xs); letter-spacing: var(--track-wide);
                text-transform: uppercase; color: var(--muted-2); }
  .price-old { font-size: var(--t-sm); color: var(--muted-2); text-decoration: line-through; }
  .price-lg .price-amount { font-size: var(--t-3xl); }
  .price-sm .price-amount { font-size: var(--t-lg); }
  .price-promo .price-amount { color: var(--color-primary); }
  .price-promo { position: relative; }
  .price-promo::after {
    content: ''; position: absolute; inset-block-end: -4px; inset-inline: 0;
    block-size: 1px; background: var(--color-accent);
  }


  /* ---- Étiquettes d'état -------------------------------------------------- */

  .badge, .chip, .stock-badge {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    font-size: var(--t-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  }
  .badge { background: var(--surface-alt); color: var(--muted); }
  .badge-primary { background: var(--color-primary-subtle); color: var(--color-primary); }
  .badge-accent { background: var(--color-accent-subtle); color: var(--gold-deep); }
  .badge-success { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
  .badge-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
  .stock-in { color: var(--success); }
  .stock-low { color: var(--gold-deep); }
  .stock-out { color: var(--muted-2); }
  .chip { border: 1px solid var(--line-2); color: var(--ink-2); }
  .chip:hover, .chip[aria-pressed='true'] { border-color: var(--color-accent); color: var(--color-primary); }
  .counter { font-variant-numeric: tabular-nums; color: var(--muted-2); }
  .rating { display: inline-flex; align-items: center; gap: var(--s-1);
            font-size: var(--t-sm); color: var(--muted); }
  .rating-star { color: var(--color-accent); }


  /* ---- Fiche produit ----------------------------------------------------- */

  .gallery { display: grid; gap: var(--s-3); }
  /* La colonne des vignettes n'existe QUE s'il y a des vignettes. Sans cette
     condition, une seule image se retrouvait placée dans une colonne de 5 rem
     et le grand cadre restait vide. */
  @media (min-width: 40em) {
    .gallery:has(.gallery-thumbs) { grid-template-columns: 5rem 1fr; }
  }
  .gallery-main { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-raised); }
  .gallery-main img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .gallery-thumbs { display: grid; grid-auto-flow: column; gap: var(--s-2); overflow-x: auto;
                    scrollbar-width: none; }
  @media (min-width: 40em) { .gallery-thumbs { grid-auto-flow: row; order: -1; } }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumb {
    inline-size: 4.25rem; aspect-ratio: 1; object-fit: cover; cursor: pointer;
    opacity: .45; transition: opacity var(--dur) var(--ease);
  }
  @media (min-width: 40em) { .gallery-thumb { inline-size: 100%; } }
  .gallery-thumb:hover { opacity: .8; }
  .gallery-thumb[aria-current] { opacity: 1; }

  .buybox { background: var(--surface-alt); padding: clamp(1.25rem, 3vw, 2.25rem); }
  .buybox-line {
    display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap;
    padding-block: var(--s-4); margin-block: var(--s-4);
    border-block: 1px solid var(--line);
  }
  .qty { display: inline-flex; align-items: center; border: 1px solid var(--ink); }
  .qty button { inline-size: var(--tap); block-size: var(--tap); display: grid;
                place-items: center; font-size: var(--t-lg); }
  .qty button:hover { background: var(--ink); color: var(--surface); }
  .qty input {
    inline-size: 4.5rem; block-size: var(--tap); text-align: center; border: 0;
    border-inline: 1px solid var(--ink); background: transparent;
    font-variant-numeric: tabular-nums; font-weight: 500;
  }
  .qty input:focus { outline: 0; background: var(--surface); }
  .qty-unit { font-size: var(--t-2xs); letter-spacing: var(--track-wide);
              text-transform: uppercase; color: var(--muted-2); }

  .spec-table th, .spec-table td { padding-block: var(--s-3); text-align: start;
                                   border-block-end: 1px solid var(--line); }
  .spec-table th { inline-size: 42%; font-weight: 300; color: var(--muted); }


  /* ---- Panier, résumé, commande ------------------------------------------ */

  .cart-line {
    display: grid; grid-template-columns: 5rem 1fr; gap: var(--s-4);
    align-items: center; padding-block: var(--s-5);
    border-block-end: 1px solid var(--line);
  }
  @media (min-width: 40em) { .cart-line { grid-template-columns: 6.5rem 1fr auto; } }
  .cart-line img { aspect-ratio: 1; object-fit: cover; }
  .cart-line-title { font-family: var(--font-display); font-size: var(--t-lg); }

  .summary { background: var(--surface-alt); padding: clamp(1.25rem, 3vw, 2rem);
             position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4)); }
  .summary-line { display: flex; justify-content: space-between; gap: var(--s-4);
                  padding-block: var(--s-2); font-size: var(--t-sm); color: var(--muted); }
  .summary-total {
    margin-block-start: var(--s-3); padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--line);
    font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink);
  }

  .steps { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
           font-size: var(--t-2xs); letter-spacing: var(--track-wide);
           text-transform: uppercase; color: var(--muted-2);
           margin-block-end: clamp(2rem, 4vw, 3rem); }
  .steps b { font-weight: 400; color: var(--color-primary); }
  .steps span { inline-size: 2rem; block-size: 1px; background: var(--line-2); }

  .choice, .choice-card {
    display: block; padding: var(--s-4); margin-block-end: var(--s-2);
    border: 1px solid var(--line); background: var(--surface); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .choice:hover, .choice-card:hover { border-color: var(--line-2); }
  .choice:has(input:checked), .choice-card:has(input:checked) {
    border-color: var(--color-accent); background: var(--surface-alt);
  }
  .choice b, .choice-card b { display: block; font-weight: 400; font-size: var(--t-md); }
  .choice small, .choice-card small { font-size: var(--t-sm); color: var(--muted); }


  /* ---- Formulaires -------------------------------------------------------
     Champs soulignés, sans caisson : c'est plus léger et cela convient à une
     page qui respire. Au foyer, le trait passe à l'or. */

  .field { margin-block-end: var(--s-5); }
  .label {
    display: block; margin-block-end: var(--s-2);
    font-size: var(--t-2xs); letter-spacing: var(--track-wide);
    text-transform: uppercase; color: var(--muted);
  }
  .input, .select, .textarea,
  input[type='text'], input[type='email'], input[type='password'], input[type='tel'],
  input[type='number'], input[type='search'], input[type='date'], select, textarea {
    inline-size: 100%; min-block-size: var(--tap);
    padding: var(--s-2) 0;
    border: 0; border-block-end: 1px solid var(--line-2);
    border-radius: 0; background: transparent; color: var(--ink);
    font-family: inherit; font-size: var(--t-md); font-weight: 300;
    transition: border-color var(--dur-fast) var(--ease);
  }
  textarea, .textarea { min-block-size: 6rem; resize: vertical; line-height: 1.6; }
  .input:focus, .select:focus, .textarea:focus,
  input:focus, select:focus, textarea:focus { outline: 0; border-block-end-color: var(--color-accent); }
  .input::placeholder, textarea::placeholder { color: var(--muted-2); }
  input[type='checkbox'], input[type='radio'] {
    inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--color-primary);
  }
  .field-error .input, .input[aria-invalid='true'] { border-block-end-color: var(--danger); }
  .field-hint { margin-block-start: var(--s-2); font-size: var(--t-xs); color: var(--muted-2); }
  .form-grid { display: grid; gap: 0 var(--s-5); grid-template-columns: 1fr; }
  @media (min-width: 40em) { .form-grid { grid-template-columns: 1fr 1fr; } }


  /* ---- Succursales ------------------------------------------------------- */

  .branch-strip {
    background: var(--color-accent-subtle);
    border-block-end: 1px solid var(--gold-pale);
    font-size: var(--t-xs); color: var(--gold-deep);
  }
  .branch-strip .container { display: flex; align-items: center; gap: var(--s-2);
                             padding-block: var(--s-3); }
  .branch-strip a { color: var(--color-primary); text-decoration: underline;
                    text-underline-offset: 2px; }

  .branch-card { display: flex; flex-direction: column; background: var(--surface); }
  .branch-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
  .branch-card-media img { inline-size: 100%; block-size: 100%; object-fit: cover;
                           transition: transform var(--dur-slow) var(--ease-out); }
  .branch-card:hover .branch-card-media img { transform: scale(1.04); }
  .branch-card-body { padding-block: var(--s-4); flex: 1; }
  .branch-card h3 { margin-block: var(--s-2) var(--s-1); }
  .branch-status {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--t-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  }
  .branch-status::before { content: ''; inline-size: .45rem; block-size: .45rem;
                           border-radius: 50%; background: currentColor; }
  .branch-open { color: var(--success); }
  .branch-soon { color: var(--gold-deep); }
  .branch-closed { color: var(--muted-2); }
  .branch-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4);
                  margin-block-start: var(--s-4); font-size: var(--t-sm); }
  .branch-facts dt { color: var(--muted-2); }
  .branch-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
  @media (min-width: 46em) { .branch-grid { grid-template-columns: repeat(2, 1fr); } }


  /* ---- Compte ------------------------------------------------------------ */

  .account-nav { display: flex; flex-direction: column; }
  .account-nav a {
    padding-block: var(--s-3); font-size: var(--t-sm);
    border-block-end: 1px solid var(--line); color: var(--muted);
  }
  .account-nav a:hover { color: var(--ink); }
  .account-nav a[aria-current] { color: var(--color-primary); }
  .order-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
               padding-block: var(--s-4); border-block-end: 1px solid var(--line); }


  /* ---- Tableaux ----------------------------------------------------------- */

  .table th, .table td { padding: var(--s-3) var(--s-2); text-align: start;
                         border-block-end: 1px solid var(--line); }
  .table th { font-size: var(--t-2xs); font-weight: 400; letter-spacing: var(--track-wide);
              text-transform: uppercase; color: var(--muted-2); }
  .table .num { text-align: end; font-variant-numeric: tabular-nums; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }


  /* ---- Messages et états --------------------------------------------------- */

  .notice, .alert {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4); font-size: var(--t-sm);
    background: var(--surface-alt); border-inline-start: 2px solid var(--line-2);
  }
  .notice-success, .alert-success { background: color-mix(in srgb, var(--success) 8%, transparent);
    border-inline-start-color: var(--success); color: var(--success); }
  .notice-danger, .notice-error, .alert-danger, .alert-error {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-inline-start-color: var(--danger); color: var(--danger); }
  .notice-info, .alert-info { border-inline-start-color: var(--color-accent); color: var(--gold-deep); }
  .notice-warning, .alert-warning { background: var(--color-accent-subtle);
    border-inline-start-color: var(--color-accent); color: var(--gold-deep); }

  .state {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
    padding-block: clamp(3rem, 8vw, 6rem); text-align: center; color: var(--muted);
  }
  .state-icon {
    inline-size: 3.25rem; block-size: 3.25rem; display: grid; place-items: center;
    background: var(--surface-alt); color: var(--color-accent);
  }
  .state-title { font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); }
  .state-text { max-inline-size: 42ch; }
  .state-error .state-icon { background: color-mix(in srgb, var(--danger) 10%, transparent);
                             color: var(--danger); }

  .skeleton {
    background: linear-gradient(90deg, var(--surface-alt) 25%, var(--paper) 37%, var(--surface-alt) 63%);
    background-size: 400% 100%; animation: shimmer 1.5s linear infinite;
  }
  @keyframes shimmer { to { background-position: -135% 0; } }


  /* ---- Superpositions -------------------------------------------------------- */

  .modal {
    position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
    padding: var(--gutter); background: rgb(23 19 19 / .55);
  }
  .modal[hidden] { display: none; }
  .modal-box { inline-size: min(100%, 30rem); background: var(--surface);
               padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--sh-lg); }
  .modal-title { font-family: var(--font-display); font-size: var(--t-xl);
                 margin-block-end: var(--s-3); }

  .toast-region {
    position: fixed; inset-block-end: calc(var(--mobile-nav-h) + var(--s-4));
    inset-inline: var(--gutter); z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none;
  }
  @media (min-width: 48em) {
    .toast-region { inset-block-end: var(--s-5); inset-inline-start: auto;
                    inline-size: min(24rem, 90vw); }
  }
  .toast {
    padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--surface);
    font-size: var(--t-sm); box-shadow: var(--sh-md); pointer-events: auto;
    animation: toast-in .3s var(--ease-out) both;
  }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

  .cookie-bar {
    position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-modal);
    background: var(--surface); border-block-start: 1px solid var(--line);
    box-shadow: var(--sh-lg); padding: var(--s-5) var(--gutter);
    padding-block-end: calc(var(--s-5) + env(safe-area-inset-bottom));
  }
  .cookie-bar-head { display: flex; align-items: center; gap: var(--s-3);
                     margin-block-end: var(--s-3); }
  .cookie-bar-body { display: flex; flex-direction: column; gap: var(--s-3); }

  .suggest {
    position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--s-2));
    z-index: var(--z-header); max-block-size: 22rem; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-lg);
    padding: var(--s-2);
  }
  .suggest:empty { display: none; }
  .suggest a { display: flex; align-items: center; gap: var(--s-3);
               padding: var(--s-2) var(--s-3); font-size: var(--t-sm); }
  .suggest a:hover { background: var(--surface-alt); }
  .suggest-title { padding: var(--s-2) var(--s-3); font-size: var(--t-2xs);
                   letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted-2); }
  .suggest-thumb { inline-size: 2.25rem; block-size: 2.25rem; object-fit: cover; }


  /* ---- Accordéon, engagements, blog, fil d'Ariane ------------------------------ */

  .accordion-item { border-block-end: 1px solid var(--line); }
  .accordion-item > summary {
    display: flex; align-items: center; gap: var(--s-3); cursor: pointer;
    padding-block: var(--s-4); font-family: var(--font-display); font-size: var(--t-lg);
    list-style: none;
  }
  .accordion-item > summary::-webkit-details-marker { display: none; }
  .accordion-item > summary::after { content: '+'; margin-inline-start: auto;
                                     color: var(--color-accent); font-size: var(--t-xl); }
  .accordion-item[open] > summary::after { content: '−'; }
  .accordion-body { padding-block-end: var(--s-4); color: var(--muted); }

  .assurances { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .assurance { display: flex; gap: var(--s-3); color: var(--color-accent); }
  .assurance-text { display: flex; flex-direction: column; gap: var(--s-1); color: var(--ink); }
  .assurance-title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; }
  .assurance-text span { font-size: var(--t-sm); color: var(--muted); }

  .post-card { display: flex; flex-direction: column; }
  .post-card img { aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface-alt); }
  .post-card-body { padding-block: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
  .post-card-title { font-family: var(--font-display); font-size: var(--t-lg); }
  .post-card:hover .post-card-title { color: var(--color-primary); }
  .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
             overflow: hidden; }

  .breadcrumb { font-size: var(--t-2xs); letter-spacing: var(--track-wide);
                text-transform: uppercase; color: var(--muted-2); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
  .breadcrumb li + li::before { content: '—'; margin-inline-end: var(--s-2); color: var(--line-2); }
  .breadcrumb a:hover { color: var(--ink); }

  .pagination { display: flex; justify-content: center; gap: var(--s-2); flex-wrap: wrap;
                margin-block-start: clamp(2.5rem, 5vw, 4rem); }

  .filters h4 { font-size: var(--t-2xs); letter-spacing: var(--track-wide);
                text-transform: uppercase; color: var(--color-accent); margin-block-end: var(--s-3); }
  .filters ul { margin-block-end: var(--s-6); }
  .filters li a { display: flex; padding-block: var(--s-2); font-size: var(--t-sm); color: var(--muted); }
  .filters li a:hover, .filters li[aria-current] a { color: var(--ink); }
  .filters li a b { margin-inline-start: auto; font-weight: 300; font-size: var(--t-xs);
                    color: var(--muted-2); }
  .filters label { display: flex; align-items: center; gap: var(--s-2);
                   padding-block: var(--s-1); font-size: var(--t-sm); color: var(--muted); cursor: pointer; }
  .toolbar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
             padding-block-end: var(--s-4); border-block-end: 1px solid var(--line);
             margin-block-end: clamp(2rem, 4vw, 3rem); }

  .brand-chip { display: inline-flex; align-items: center; padding: var(--s-3) var(--s-5);
                border: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2);
                white-space: nowrap; }
  .video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
  .video-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
  .newsletter-form { display: flex; gap: 0; max-inline-size: 32rem; margin-inline: auto;
                     border-block-end: 1px solid var(--line-invert); }
  .newsletter-form .input { flex: 1; border: 0; color: inherit; }
  .newsletter-form .btn { background: transparent; color: var(--color-accent);
                          padding-inline: var(--s-4); }
  .newsletter-form .btn:hover { background: transparent; color: var(--surface); }


  /* ---- Pied de page ---------------------------------------------------------- */

  .site-footer { background: var(--ink); color: rgb(251 249 246 / .6);
                 padding-block: clamp(3rem, 7vw, 6rem) var(--s-6); font-size: var(--t-sm); }
  .footer-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
  @media (min-width: 52em) { .footer-grid { grid-template-columns: 1.7fr repeat(3, 1fr); } }
  .footer-brand .logo { color: var(--surface); }
  .footer-title { font-size: var(--t-2xs); letter-spacing: var(--track-caps);
                  text-transform: uppercase; color: var(--color-accent); margin-block-end: var(--s-4); }
  .footer-list { display: grid; gap: var(--s-2); }
  .footer-list a:hover, .site-footer a:hover { color: var(--surface); }
  .footer-bottom {
    display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
    margin-block-start: clamp(2.5rem, 5vw, 4rem); padding-block-start: var(--s-5);
    border-block-start: 1px solid var(--line-invert);
    font-size: var(--t-xs); letter-spacing: .06em;
  }
  .social { display: flex; gap: var(--s-4); }
  .social a { color: rgb(251 249 246 / .6); }
  .social a:hover { color: var(--color-accent); }


  /* ---- Gabarit sans navigation ------------------------------------------------ */

  body.bare { background: var(--surface); }
  .bare-head { border-block-end: 1px solid var(--line); }
  .bare-head .header-bar { min-block-size: var(--header-h); }
}


/* =========================================================================
   8. UTILITAIRES
   ========================================================================= */

@layer utilities {
  .u-invert { background: var(--ink); color: var(--ink-invert); }
  .u-paper { background: var(--surface-alt); }
  .u-full { inline-size: 100%; }
  .u-nowrap { white-space: nowrap; }
  .u-tabular { font-variant-numeric: tabular-nums; }

  /* Impression : on retire le décor et on garde le contenu. */
  @media print {
    .site-header, .mobile-nav, .drawer, .drawer-backdrop, .toast-region,
    .cookie-bar, .site-footer, .product-card-add, .card-fav-form { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding-block: 1rem; }
  }
}


/* =========================================================================
   9. COMPLÉMENTS — sous-parties employées par les vues existantes
   -------------------------------------------------------------------------
   Le vocabulaire du projet est conservé tel quel : on rhabille les classes
   existantes plutôt que de les renommer. C'est ce qui permet de changer
   entièrement l'apparence sans réécrire les 56 vues, donc sans risquer une
   régression fonctionnelle.
   ========================================================================= */

@layer components {

  /* ---- Panneaux et cartes génériques ------------------------------------- */
  .card, .panel { background: var(--surface); }
  .panel { border: 1px solid var(--line); }
  .card-p { padding: clamp(1.25rem, 3vw, 2rem); }
  .card-title { font-family: var(--font-display); font-size: var(--t-xl);
                margin-block-end: var(--s-4); }
  .page-head { margin-block-end: clamp(2rem, 4vw, 3.5rem); }
  .page-title { font-family: var(--font-display); font-size: var(--t-3xl); }
  .section-lg { padding-block: clamp(4.5rem, 11vw, 10rem); }
  .hint { margin-block-start: var(--s-2); font-size: var(--t-xs); color: var(--muted-2); }
  .label-required::after { content: ' *'; color: var(--color-primary); }
  .link-quiet { color: var(--muted); text-decoration: underline;
                text-underline-offset: .2em; text-decoration-color: var(--line-2); }
  .link-quiet:hover { color: var(--color-primary); text-decoration-color: var(--color-accent); }
  .text-meta { font-size: var(--t-xs); letter-spacing: .06em; color: var(--muted-2); }
  .text-start { text-align: start; }
  .h4 { font-family: var(--font-display); font-size: var(--t-lg); }
  .full { inline-size: 100%; }
  .mt-8 { margin-block-start: var(--s-7); }
  .mt-12 { margin-block-start: var(--s-8); }
  .badge-info { background: var(--color-accent-subtle); color: var(--gold-deep); }
  .notice-title { display: block; font-weight: 400; color: var(--ink); }
  .grid-products { display: grid; gap: var(--s-5);
                   grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
  .rail-quiet { scroll-snap-type: none; }
  .rail-quiet > * { flex: none; }

  /* Cadre de proportion : évite le saut de mise en page au chargement. */
  .ratio { position: relative; overflow: hidden; background: var(--surface-alt); }
  .ratio > * { position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
               object-fit: cover; }
  .ratio-16-9 { aspect-ratio: 16 / 9; }
  .ratio-3-2 { aspect-ratio: 3 / 2; }

  /* ---- Écrans hors session ------------------------------------------------ */
  .auth-shell {
    max-inline-size: 27rem; margin-inline: auto;
    padding-block: clamp(3rem, 8vw, 6rem);
  }

  /* ---- Listing ------------------------------------------------------------ */
  .listing { display: grid; gap: clamp(2rem, 4vw, 4rem); }
  @media (min-width: 64em) { .listing { grid-template-columns: 15rem minmax(0, 1fr); } }
  .listing-aside { align-self: start; }
  @media (min-width: 64em) { .listing-aside { position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-4)); } }
  .filter-group { margin-block-end: var(--s-6); }
  .filter-group-title { font-size: var(--t-2xs); letter-spacing: var(--track-wide);
    text-transform: uppercase; color: var(--color-accent); margin-block-end: var(--s-3); }
  .filter-price { display: flex; gap: var(--s-2); }
  .active-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-4); }
  .chip-remove { color: var(--color-primary); }
  .toolbar-count { font-size: var(--t-2xs); letter-spacing: var(--track-wide);
                   text-transform: uppercase; color: var(--muted-2); }
  .viewtoggle { display: inline-flex; }
  .viewtoggle .btn { border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); }
  .viewtoggle .btn[aria-pressed='true'] { background: var(--ink); color: var(--surface);
                                          border-color: var(--ink); }
  /* Sur téléphone, les filtres s'ouvrent en feuille montante. */
  .drawer-sheet {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-drawer);
    max-block-size: 85svh; overflow-y: auto; background: var(--surface-raised);
    padding: var(--s-5) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
    box-shadow: var(--sh-lg); transform: translateY(102%);
    /* Repoussée hors de l'écran, elle restait VISIBLE : une ombre, un
       arrondi ou un arrondi de calcul suffisaient à la faire dépasser en bas
       de page. Le tiroir latéral avait cette protection, pas la feuille. */
    visibility: hidden;
    transition: transform var(--dur) var(--ease-out), visibility var(--dur);
  }
  .drawer-sheet[data-open] { transform: none; visibility: visible; }

  /* Un panneau fermé n'est atteignable ni à la souris ni au clavier : sans
     cela on tabule dans un formulaire qu'on ne voit pas. */
  .drawer[aria-hidden='true'], .drawer-sheet[aria-hidden='true'] {
    pointer-events: none;
  }
  .drawer[data-open], .drawer-sheet[data-open] { pointer-events: auto; }

  /* ---- Fiche produit ------------------------------------------------------ */
  .product-layout { display: grid; gap: clamp(2rem, 4vw, 4.5rem); }
  @media (min-width: 60em) { .product-layout { grid-template-columns: 1.15fr 1fr; align-items: start; } }
  .product-title { font-family: var(--font-display); font-size: var(--t-3xl);
                   margin-block: var(--s-3) var(--s-4); }
  .product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
                  font-size: var(--t-sm); color: var(--muted); }
  .product-buy { display: flex; flex-direction: column; gap: var(--s-3); }
  .price-row { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
  .price-save { font-size: var(--t-xs); letter-spacing: var(--track-wide);
                text-transform: uppercase; color: var(--color-primary); }
  .buybox-row { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
  .buybox-note { font-size: var(--t-xs); color: var(--muted-2); text-align: center; }
  .add-form { display: contents; }
  .rating-stars { display: inline-flex; gap: 1px; color: var(--color-accent); }
  .rating-count { font-size: var(--t-xs); color: var(--muted-2); }
  .tabs { display: flex; gap: var(--s-5); border-block-end: 1px solid var(--line);
          margin-block-end: var(--s-5); }
  .tabs a, .tabs button {
    padding-block: var(--s-3); font-size: var(--t-2xs); letter-spacing: var(--track-wide);
    text-transform: uppercase; color: var(--muted);
    border-block-end: 1px solid transparent; margin-block-end: -1px;
  }
  .tabs [aria-selected='true'], .tabs [aria-current] {
    color: var(--ink); border-block-end-color: var(--color-accent);
  }

  /* ---- Panier -------------------------------------------------------------- */
  .cart-lines { margin-block-end: var(--s-5); }
  .cart-line-media { aspect-ratio: 1; overflow: hidden; background: var(--surface-alt); }
  .cart-line-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .cart-line-body { display: flex; flex-direction: column; gap: var(--s-2); min-inline-size: 0; }
  .cart-line-name { font-family: var(--font-display); font-size: var(--t-lg); }
  .cart-line-total { text-align: end; font-family: var(--font-display); font-size: var(--t-lg);
                     font-variant-numeric: tabular-nums; }
  .checkout-items { display: grid; gap: var(--s-3); margin-block-end: var(--s-4); }

  /* ---- Résumé et colonnes ---------------------------------------------------- */
  .split-aside { align-self: start; }
  @media (min-width: 60em) { .split-aside { position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-4)); } }
  .summary-row { display: flex; justify-content: space-between; gap: var(--s-4);
                 padding-block: var(--s-2); font-size: var(--t-sm); }
  .summary-label { color: var(--muted); }
  .summary-value { font-variant-numeric: tabular-nums; }
  .summary-total .summary-value { font-family: var(--font-display); font-size: var(--t-xl); }

  /* ---- Étapes de commande ------------------------------------------------------ */
  .step { display: inline-flex; align-items: center; gap: var(--s-2); }
  .step-num {
    inline-size: 1.6rem; block-size: 1.6rem; display: grid; place-items: center;
    border: 1px solid currentColor; border-radius: 50%; font-size: var(--t-2xs);
  }
  .step[aria-current] { color: var(--color-primary); }
  .steps-sep { inline-size: 2rem; block-size: 1px; background: var(--line-2); }
  .choice-card-title { display: block; font-size: var(--t-md); }
  .choice-card-note { display: block; font-size: var(--t-sm); color: var(--muted); }
  .choice-card-body { display: flex; flex-direction: column; gap: 2px; }
  .choice-text { display: flex; flex-direction: column; gap: 2px; }

  /* ---- Succursales, compléments ------------------------------------------------- */
  .branch-hero { padding-block: clamp(2.5rem, 6vw, 5rem); text-align: center; }
  .branch-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
                  margin-block-end: clamp(2rem, 4vw, 3rem); }
  .branch-card-name { font-family: var(--font-display); font-size: var(--t-xl); }
  .branch-card-state { display: inline-flex; align-items: center; gap: var(--s-2);
                       font-size: var(--t-2xs); letter-spacing: var(--track-wide);
                       text-transform: uppercase; }
  .branch-card-meta { font-size: var(--t-sm); color: var(--muted); }
  .branch-card-services { display: flex; flex-wrap: wrap; gap: var(--s-2);
                          margin-block-start: var(--s-3); }
  .branch-card-foot { padding-block-start: var(--s-4); }
  .branch-card-check { color: var(--success); }

  /* ---- Compte, compléments ------------------------------------------------------- */
  .account-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
  @media (min-width: 60em) { .account-grid { grid-template-columns: 14rem minmax(0, 1fr); } }
  .account-wide { grid-column: 1 / -1; }
  .address-row { display: flex; gap: var(--s-4); align-items: flex-start;
                 padding-block: var(--s-4); border-block-end: 1px solid var(--line); }

  /* ---- Divers ---------------------------------------------------------------------- */
  .modal-head { display: flex; align-items: center; gap: var(--s-3);
                margin-block-end: var(--s-4); }
  .modal-body { color: var(--muted); }
  .modal-foot { display: flex; gap: var(--s-3); flex-wrap: wrap;
                margin-block-start: var(--s-5); }
  .error-code { font-family: var(--font-display); font-size: var(--t-4xl);
                color: var(--color-accent); line-height: 1; }
  .confirm-mark {
    inline-size: 4rem; block-size: 4rem; margin-inline: auto; display: grid; place-items: center;
    border: 1px solid var(--color-accent); border-radius: 50%; color: var(--color-accent);
  }
  .pay-spinner {
    inline-size: 2rem; block-size: 2rem; margin-inline: auto; border-radius: 50%;
    border: 1px solid var(--line-2); border-block-start-color: var(--color-primary);
    animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .skeleton-text { block-size: .8em; margin-block: .35em; }
  .skeleton-badge { inline-size: 4rem; block-size: 1.2rem; }
}

@layer components {
  /* Conteneur des accordéons : le rythme est porté par .accordion-item. */
  .accordion { border-block-start: 1px solid var(--line); }
}


/* ===========================================================================
   CORRECTIFS RELEVÉS SUR TÉLÉPHONE
   =========================================================================== */

@layer utilities {
  /* Visibilité — dans la DERNIÈRE couche, sinon un composant qui déclare son
     propre display l'emporte. C'est ce qui laissait la pastille de magasin
     s'afficher sur téléphone alors qu'elle est déjà dans le menu. */
  .hide-mobile { display: none !important; }
  @media (min-width: 48em) {
    .hide-mobile { display: revert !important; }
    .hide-desktop { display: none !important; }
  }
  /* .branch-chip est un inline-flex : revert le rendrait inline et casserait
     son alignement. On lui rend sa nature sur grand écran. */
  @media (min-width: 48em) { a.branch-chip.hide-mobile { display: inline-flex !important; } }
}

@layer base {
  /* DÉBORDEMENT HORIZONTAL
     Une bande qui déborde fait défiler toute la page de côté : le pied de
     page sombre ne couvre alors que la largeur de l'écran et laisse une
     bande claire à droite — exactement ce qu'on voyait. On borne la page,
     et les rangées défilantes se clippent elles-mêmes. */
  html, body { max-inline-size: 100%; overflow-x: clip; }
  .rail { max-inline-size: 100vw; }
  img, video, svg, table, pre { max-inline-size: 100%; }
  /* Un mot très long dans un titre pousse la page ; on le laisse se couper. */
  h1, h2, h3, .product-card-title, .cart-line-name { overflow-wrap: anywhere; }

  /* LISIBILITÉ
     Les textes secondaires restaient trop clairs pour un écran de téléphone
     en plein jour. On remonte leur graisse plutôt que d'assombrir encore la
     couleur : la lettre gagne en présence sans que la page devienne lourde. */
  .lede, .section-lede, .product-card-d, .text-muted, .hint { font-weight: 400; }
  .caps, .eyebrow, .breadcrumb, .mini { font-weight: 500; }
  .price-currency, .price-unit { font-weight: 500; }
}


/* ===========================================================================
   LES QUATRE PRÉSENTATIONS DE CARROUSEL
   ---------------------------------------------------------------------------
   Le même groupe de bannières, quatre mises en scène. Le choix se fait dans
   le réglage de la section, pas dans le code.

   Deux règles valent pour les quatre :
     — une bannière porte DEUX images, panoramique et portrait. Un visuel
       2000×900 sur un écran vertical devient un ruban où l'on ne voit rien ;
     — tout fonctionne au doigt. Ce qui marche ici marchera dans
       l'application mobile sans être réécrit.
   =========================================================================== */

@layer components {

  .sl { position: relative; overflow: hidden; }
  .sl-track { display: flex; transition: transform var(--dur-slow) var(--ease); }
  .sl-track > * { flex: 0 0 100%; position: relative; }
  .sl-v > picture, .sl-v > picture > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .sl-v-vide { background: var(--color-primary-active); }

  .sl-nav {
    z-index: 4; display: grid; place-items: center;
    inline-size: var(--tap); block-size: var(--tap); color: var(--surface);
    opacity: .55; transition: opacity var(--dur) var(--ease); font-size: var(--t-2xl);
  }
  .sl-nav:hover { opacity: 1; }
  .sl-dots { z-index: 4; display: flex; gap: var(--s-2); }
  .sl-dots button { inline-size: 2.1rem; block-size: 1.5px; padding: 0;
                    background: rgb(251 249 246 / .34); transition: background-color var(--dur) var(--ease); }
  .sl-dots button[aria-current] { background: var(--color-accent); }
  .sl-num { z-index: 4; font-family: var(--font-display); font-size: var(--t-sm);
            letter-spacing: var(--track-wide); color: rgb(251 249 246 / .7); }
  .sl-c { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
          justify-content: center; color: var(--surface); }
  .sl-c h2 { font-size: var(--t-4xl); font-weight: 300; text-transform: uppercase;
             letter-spacing: .012em; margin-block: var(--s-5) var(--s-4); color: var(--surface); }
  .sl-c p { font-size: var(--t-lg); color: rgb(251 249 246 / .78); max-inline-size: 46ch; }
  .sl-cta { display: inline-flex; margin-block-start: var(--s-6); }

  /* ---- 1 · Plein écran ---------------------------------------------------- */
  .sl-slider-plein { min-block-size: clamp(21rem, 62svh, 34rem); background: var(--ink); }
  @media (max-width: 46em) { .sl-slider-plein { min-block-size: clamp(18rem, 52svh, 26rem); } }
  .sl-slider-plein .sl-track { display: block; transform: none !important; }
  .sl-slider-plein .sl-v { position: absolute; inset: 0; opacity: 0; pointer-events: none;
                    transition: opacity var(--dur-slow) var(--ease); }
  .sl-slider-plein .sl-v[aria-hidden='false'] { opacity: 1; pointer-events: auto; }
  .sl-slider-plein .sl-v > picture > img { transform: scale(1.06); transition: transform 7s linear; }
  .sl-slider-plein .sl-v[aria-hidden='false'] > picture > img { transform: scale(1); }
  .sl-slider-plein .sl-v::after { content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgb(15 12 12 / .88) 0%, rgb(15 12 12 / .5) 46%, rgb(15 12 12 / .1) 84%); }
  .sl-slider-plein .sl-c > * { opacity: 0; transform: translateY(20px);
    transition: opacity .9s var(--ease), transform .9s var(--ease-out); }
  .sl-slider-plein .sl-v[aria-hidden='false'] .sl-c > * { opacity: 1; transform: none; }
  .sl-slider-plein .sl-v[aria-hidden='false'] .sl-c > *:nth-child(2) { transition-delay: .12s; }
  .sl-slider-plein .sl-v[aria-hidden='false'] .sl-c > *:nth-child(3) { transition-delay: .24s; }
  .sl-slider-plein .sl-v[aria-hidden='false'] .sl-c > *:nth-child(4) { transition-delay: .36s; }
  .sl-slider-plein .sl-nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); }
  .sl-slider-plein .sl-prev { inset-inline-start: var(--s-3); }
  .sl-slider-plein .sl-next { inset-inline-end: var(--s-3); }
  .sl-slider-plein .sl-dots { position: absolute; inset-block-end: var(--s-6);
    inset-inline-start: 50%; transform: translateX(-50%); }
  .sl-slider-plein .sl-num { position: absolute; inset-block-end: var(--s-6); inset-inline-end: var(--gutter); }
  @media (max-width: 46em) { .sl-slider-plein .sl-nav { display: none; } }

  /* ---- 2 · Bandeau avec vignettes ---------------------------------------- */
  .sl-slider-bandeau { background: var(--ink); }
  .sl-slider-bandeau .sl-v { aspect-ratio: 16 / 6; }
  .sl-slider-bandeau .sl-v::after { content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgb(15 12 12 / .8), rgb(15 12 12 / .15) 72%); }
  .sl-slider-bandeau .sl-c { padding: clamp(1.25rem, 4vw, 3.4rem); max-inline-size: 56%; }
  .sl-slider-bandeau .sl-c h2 { font-size: var(--t-2xl); text-transform: none; }
  .sl-slider-bandeau .sl-nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%);
    inline-size: 2.5rem; block-size: 3.25rem; background: rgb(251 249 246 / .9); color: var(--ink); opacity: 1; }
  .sl-slider-bandeau .sl-nav:hover { background: var(--color-accent); }
  .sl-slider-bandeau .sl-prev { inset-inline-start: 0; }
  .sl-slider-bandeau .sl-next { inset-inline-end: 0; }
  .sl-bar { position: absolute; inset-block-end: 0; inset-inline-start: 0; z-index: 4;
            block-size: 3px; inline-size: 0; background: var(--color-accent); }
  .sl-thumbs { display: none; }
  @media (min-width: 64em) {
    .sl-slider-bandeau { display: grid; grid-template-columns: 1fr 9.5rem; gap: var(--s-2); background: none; }
    .sl-slider-bandeau .sl-track { grid-column: 1; background: var(--ink); }
    .sl-thumbs { display: flex; flex-direction: column; gap: var(--s-2); }
    .sl-thumbs button { border: 2px solid transparent; padding: 0; overflow: hidden; }
    .sl-thumbs button[aria-current] { border-color: var(--color-primary); }
    .sl-thumbs img { aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%;
                     opacity: .55; transition: opacity var(--dur) var(--ease); }
    .sl-thumbs button[aria-current] img { opacity: 1; }
    .sl-dots-mob { display: none; }
  }
  .sl-dots-mob { justify-content: center; padding-block: var(--s-3); }
  .sl-dots-mob button { background: var(--line-2); }
  .sl-dots-mob button[aria-current] { background: var(--color-primary); }

  /* ---- 3 · Carte arrondie ------------------------------------------------- */
  .sl-slider-carte { border-radius: var(--r-lg, 20px); box-shadow: var(--sh-lg);
              margin-inline: var(--gutter); background: var(--ink); }
  .sl-slider-carte .sl-v { aspect-ratio: 21 / 9; }
  @media (max-width: 46em) { .sl-slider-carte { margin-inline: var(--s-4); }
                             .sl-slider-carte .sl-v { aspect-ratio: 4 / 5; } }
  .sl-slider-carte .sl-v::after { content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgb(15 12 12 / .9) 4%, rgb(15 12 12 / .25) 52%, transparent 78%); }
  .sl-slider-carte .sl-c { justify-content: flex-end; padding: clamp(1.25rem, 4vw, 2.75rem); }
  .sl-slider-carte .sl-c h2 { font-size: var(--t-2xl); text-transform: none; }
  .sl-top { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 4;
            display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
  .sl-steps { flex: 1; display: flex; gap: var(--s-1); }
  .sl-steps button { flex: 1; block-size: 3px; border-radius: 2px;
                     background: rgb(251 249 246 / .28); }
  .sl-steps button[aria-current] { background: var(--color-accent); }
  .sl-slider-carte .sl-nav { inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%;
    background: rgb(251 249 246 / .14); backdrop-filter: blur(8px); opacity: 1; font-size: var(--t-lg); }
  .sl-slider-carte .sl-nav:hover { background: rgb(251 249 246 / .28); }

  /* ---- 4 · Coupé en deux -------------------------------------------------- */
  .sl-slider-split { background: var(--surface-alt); }
  .sl-slider-split .sl-v { display: grid; min-block-size: min(72svh, 39rem); }
  @media (min-width: 62em) { .sl-slider-split .sl-v { grid-template-columns: .95fr 1.05fr; } }
  .sl-txt { display: flex; flex-direction: column; justify-content: center;
            padding: clamp(1.9rem, 5vw, 4.6rem); background: var(--surface); }
  .sl-txt h2 { font-size: var(--t-3xl); font-weight: 300; margin-block: var(--s-5) var(--s-4); }
  .sl-txt p { font-size: var(--t-lg); color: var(--muted); max-inline-size: 44ch; }
  .sl-txt > * { opacity: 0; transform: translateY(16px);
                transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .sl-slider-split .sl-v[aria-hidden='false'] .sl-txt > * { opacity: 1; transform: none; }
  .sl-slider-split .sl-v[aria-hidden='false'] .sl-txt > *:nth-child(2) { transition-delay: .1s; }
  .sl-slider-split .sl-v[aria-hidden='false'] .sl-txt > *:nth-child(3) { transition-delay: .2s; }
  .sl-img { position: relative; min-block-size: 17rem; }
  .sl-img > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  @media (max-width: 62em) { .sl-slider-split .sl-v { grid-template-rows: auto 1fr; }
                             .sl-img { order: -1; min-block-size: 44svh; } }
  .sl-bottom { display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--gutter); border-block-start: 1px solid var(--line);
    background: var(--surface); }
  .sl-bottom .sl-dots { flex: 1; }
  .sl-bottom .sl-dots button { inline-size: 2.75rem; background: var(--line-2); }
  .sl-bottom .sl-dots button[aria-current] { background: var(--color-primary); }
  .sl-bottom .sl-num { color: var(--muted); }
  .sl-bottom .sl-nav { border: 1px solid var(--line-2); color: var(--ink); opacity: 1; }
  .sl-bottom .sl-nav:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
}


/* ===========================================================================
   RÉCLAMES ET FENÊTRES — les sept modèles qui ne sont pas des carrousels
   ---------------------------------------------------------------------------
   Une réclame n'a pas à ressembler à une bannière d'accueil : elle s'insère
   entre deux blocs, dans une colonne, ou en pied de page. Chaque format a ses
   proportions, et chacune reste utilisable au doigt sur téléphone.
   =========================================================================== */

@layer components {

  /* ---- Réclames ---------------------------------------------------------- */
  .sl-bandeau_pub .sl-track { display: block; }
  .sl-bandeau_pub .sl-v { position: relative; overflow: hidden; }
  .sl-bandeau_pub .sl-c { position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: center;
    padding-inline: var(--gutter); color: var(--surface); }
  .sl-bandeau_pub .sl-v::after { content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgb(15 12 12 / .74), rgb(15 12 12 / .1) 70%); }
  .sl-bandeau_pub .sl-c h2 { font-size: var(--t-2xl); text-transform: none;
    margin-block: 0 var(--s-2); color: var(--surface); }
  .sl-bandeau_pub .sl-c p { font-size: var(--t-md); color: rgb(251 249 246 / .82); }

  /* Pleine largeur : la réclame classique, entre deux sections. */
  .sl-bandeau_pub-large .sl-v { aspect-ratio: 4 / 1; }
  @media (max-width: 46em) { .sl-bandeau_pub-large .sl-v { aspect-ratio: 2 / 1; } }

  /* Bande fine : elle passe presque inaperçue, pour une mention utile. */
  .sl-bandeau_pub-fine .sl-v { aspect-ratio: 8 / 1; }
  .sl-bandeau_pub-fine .sl-c h2 { font-size: var(--t-lg); }
  .sl-bandeau_pub-fine .sl-c p { display: none; }
  @media (max-width: 46em) { .sl-bandeau_pub-fine .sl-v { aspect-ratio: 4 / 1; } }

  /* Pavé carré : se glisse dans une grille de produits. */
  .sl-bandeau_pub-carre { max-inline-size: 30rem; margin-inline: auto; }
  .sl-bandeau_pub-carre .sl-v { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }
  .sl-bandeau_pub-carre .sl-c { justify-content: flex-end; padding: var(--s-6); }
  .sl-bandeau_pub-carre .sl-v::after {
    background: linear-gradient(to top, rgb(15 12 12 / .86) 8%, rgb(15 12 12 / .12) 60%, transparent); }

  /* Verticale : la colonne d'un côté de la page. */
  .sl-bandeau_pub-haut { max-inline-size: 20rem; margin-inline: auto; }
  .sl-bandeau_pub-haut .sl-v { aspect-ratio: 1 / 2; border-radius: var(--r-md); overflow: hidden; }
  .sl-bandeau_pub-haut .sl-c { justify-content: flex-end; padding: var(--s-5); }
  .sl-bandeau_pub-haut .sl-v::after {
    background: linear-gradient(to top, rgb(15 12 12 / .88) 10%, rgb(15 12 12 / .1) 62%, transparent); }
  @media (max-width: 46em) {
    .sl-bandeau_pub-haut { max-inline-size: none; }
    .sl-bandeau_pub-haut .sl-v { aspect-ratio: 5 / 4; }
  }

  /* ---- Fenêtres ---------------------------------------------------------
     Elles s'affichent d'emblée : sur cet écran on les rend en place, sans
     recouvrir la page. Le déclenchement à l'ouverture demanderait un
     mécanisme de fermeture et de mémoire — à décider ensemble avant de
     l'écrire. */
  .sl-popup .sl-track { display: block; }
  .sl-popup .sl-v { position: relative; overflow: hidden; border-radius: var(--r-md); }
  .sl-popup .sl-c { position: absolute; inset: 0; z-index: 2; display: flex;
    flex-direction: column; justify-content: flex-end; padding: var(--s-6);
    color: var(--surface); }
  .sl-popup .sl-v::after { content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgb(15 12 12 / .88), rgb(15 12 12 / .1) 64%, transparent); }
  .sl-popup .sl-c h2 { font-size: var(--t-xl); text-transform: none; color: var(--surface);
    margin-block: 0 var(--s-2); }

  .sl-popup-centre { max-inline-size: 34rem; margin-inline: auto; }
  .sl-popup-centre .sl-v { aspect-ratio: 4 / 3; }

  .sl-popup-bas .sl-v { aspect-ratio: 16 / 3; }
  .sl-popup-bas .sl-c { justify-content: center; }
  @media (max-width: 46em) { .sl-popup-bas .sl-v { aspect-ratio: 5 / 2; } }

  .sl-popup-coin { max-inline-size: 22rem; margin-inline-start: auto; }
  /* Plus petite et plus carrée que la fenêtre centrée : c'est ce qui la
     rend discrète, et ce qui permet de les distinguer d'un coup d'œil. */
  .sl-popup-coin .sl-v { aspect-ratio: 5 / 4; }
  .sl-popup-coin .sl-c { padding: var(--s-5); }
  @media (max-width: 46em) { .sl-popup-coin { max-inline-size: none; margin-inline: 0; } }
}


/* ===========================================================================
   EN-TÊTE — équilibre des trois zones
   ---------------------------------------------------------------------------
   Sur la capture, la recherche prenait la moitié de la barre, le logo s'y
   perdait, et les commandes de droite étaient trois traits nus qu'on ne
   distingue pas d'une décoration.

   Trois corrections, mesurées :
     — le logo gagne un quart de hauteur : c'est l'identité, elle passe avant
       le champ de recherche ;
     — la recherche perd six rem : 20 rem suffisent à lire ce qu'on tape, et
       la barre respire ;
     — les commandes deviennent des CIBLES : un cadre au survol, une taille
       de doigt, et le panier porte son compte en pastille lisible.
   =========================================================================== */

@layer components {

  /* ---- Identité ---------------------------------------------------------- */
  .logo-img { block-size: 2.5rem; }
  @media (max-width: 46em) { .logo-img { block-size: 2.1rem; } }

  /* ---- Le sélecteur de magasin ------------------------------------------
     C'est un CHOIX, pas une étiquette : il doit se voir cliquable. Coins
     adoucis, fond léger, et la flèche qui dit qu'on peut en changer. */
  .branch-chip {
    border-radius: var(--r-md);
    background: var(--surface-alt);
    border-color: transparent;
    padding-inline: var(--s-3) var(--s-2);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .branch-chip::after {
    content: '';
    inline-size: .4rem; block-size: .4rem;
    border-inline-end: 1.5px solid var(--muted-2);
    border-block-end: 1.5px solid var(--muted-2);
    transform: rotate(45deg) translateY(-.1em);
    margin-inline-start: var(--s-1);
    transition: border-color var(--dur) var(--ease);
  }
  .branch-chip:hover {
    background: var(--surface);
    border-color: var(--color-accent);
  }
  .branch-chip:hover::after { border-color: var(--color-accent); }
  .branch-chip-label b { font-weight: 500; }

  /* ---- Recherche : plus étroite, mieux posée ----------------------------- */
  .header-search { max-inline-size: 20rem; }
  @media (min-width: 90em) { .header-search { max-inline-size: 24rem; } }

  /* ---- Commandes de droite : des cibles, pas des traits ------------------ */
  .header-actions { gap: var(--s-1); }
  .header-actions .btn-icon {
    inline-size: var(--tap); block-size: var(--tap);
    border-radius: var(--r-md);
    color: var(--ink-2);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .header-actions .btn-icon:hover {
    background: var(--surface-alt);
    color: var(--ink);
  }
  .header-actions .btn-icon:focus-visible { background: var(--surface-alt); }

  /* Le compte du panier : une pastille qu'on lit d'un coup d'œil, posée sur
     le coin du sac plutôt que collée dessus. */
  .cart-count {
    position: absolute;
    inset-block-start: .35rem; inset-inline-end: .3rem;
    min-inline-size: 1.05rem; block-size: 1.05rem;
    padding-inline: .2rem;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--color-primary); color: var(--surface);
    font-size: .625rem; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--surface);
  }
}

/* La limite de stock, à côté de la quantité : elle explique pourquoi une
   valeur plus grande sera ramenée. Sans elle, l'ajustement paraît arbitraire. */
.qty-stock { font-size: var(--t-2xs); color: var(--color-accent);
             letter-spacing: var(--track-wide); white-space: nowrap; }


/* ===========================================================================
   EN-TÊTE — les commandes deviennent visibles au REPOS
   ---------------------------------------------------------------------------
   Mes règles précédentes ne se voyaient qu'au survol, et employaient des
   variables inexistantes : elles n'ont jamais rien changé. Sur une capture
   d'écran — donc sans survol — l'en-tête restait trois traits nus.

   Ici tout se voit à l'arrêt : un contour discret dit « ceci se clique »,
   sans alourdir une barre qui doit rester calme.
   =========================================================================== */

@layer components {

  /* ---- Commandes de droite ---------------------------------------------- */
  .header-actions { gap: var(--s-2); align-items: center; }

  .header-actions .btn-icon {
    inline-size: 2.5rem; block-size: 2.5rem;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    background: transparent;
    transition: border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
  }
  .header-actions .btn-icon:hover,
  .header-actions .btn-icon:focus-visible {
    border-color: var(--color-accent);
    background: var(--surface-alt);
  }
  /* Le panier porte l'action principale : il se distingue des autres. */
  .header-actions .btn-icon.relative { border-color: var(--line-2); }

  /* ---- Sélecteur de langue, au même gabarit ------------------------------ */
  .header-actions .lang-toggle,
  .header-actions [data-panel-open] {
    block-size: 2.5rem;
    border-radius: var(--r-md);
  }

  /* ---- Sélecteur de magasin --------------------------------------------- */
  .branch-chip {
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: transparent;
    padding: var(--s-2) var(--s-3);
    min-block-size: 2.5rem;
  }
  .branch-chip:hover { border-color: var(--color-accent); background: var(--surface-alt); }

  /* ---- Recherche : plus courte, alignée sur la même hauteur -------------- */
  .header-search { max-inline-size: 19rem; }
  @media (min-width: 90em) { .header-search { max-inline-size: 23rem; } }
  .search-field .input { block-size: 2.5rem; border-radius: var(--r-md); }

  /* ---- Identité ---------------------------------------------------------- */
  .logo-img { block-size: 2.5rem; }
  @media (max-width: 46em) { .logo-img { block-size: 2.1rem; } }
}


/* ===========================================================================
   EN-TÊTE — identité, recherche courte, commandes rondes
   ---------------------------------------------------------------------------
   Le modèle demandé : le logo occupe sa place à gauche, la recherche se fait
   discrète, et les commandes forment un groupe de pastilles à droite dont le
   panier est la seule pleine — c'est l'action principale.

   Le choix du magasin les rejoint : collé au logo il se lisait comme une part
   de l'identité de la boutique ; parmi les commandes, il se lit comme un
   réglage. Son nom reste visible sur grand écran, car sans lui on ignore de
   quel magasin viennent les prix.
   =========================================================================== */

@layer components {

  /* ---- Identité : plus large, sans plus de hauteur ---------------------- */
  .logo-img { block-size: 2.75rem; max-inline-size: 11rem; object-fit: contain; }
  @media (max-width: 46em) { .logo-img { block-size: 2.1rem; max-inline-size: 7.5rem; } }

  /* ---- Recherche : nettement plus courte -------------------------------- */
  .header-search { max-inline-size: 15rem; }
  @media (min-width: 75em) { .header-search { max-inline-size: 18rem; } }
  .search-field .input { block-size: 2.5rem; border-radius: var(--r-pill); }

  /* ---- Commandes : des pastilles ---------------------------------------- */
  .header-actions { gap: var(--s-2); align-items: center; }

  .header-actions .btn-icon {
    inline-size: 2.5rem; block-size: 2.5rem;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink);
    background: transparent;
    transition: border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
  }
  .header-actions .btn-icon:hover,
  .header-actions .btn-icon:focus-visible {
    border-color: var(--color-primary);
    background: var(--surface-alt);
  }

  /* Le panier est l'action principale : seule pastille pleine. */
  .header-actions .btn-icon.relative {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--surface);
  }
  .header-actions .btn-icon.relative:hover {
    background: var(--color-primary-active);
    border-color: var(--color-primary-active);
  }
  .cart-count {
    inset-block-start: -.2rem; inset-inline-end: -.2rem;
    background: var(--ink); border-color: var(--surface);
  }

  /* ---- Choix du magasin : une pastille qui porte son nom ---------------- */
  .branch-chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-block-size: 2.5rem;
    padding-inline: var(--s-2) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink);
    transition: border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
  }
  .branch-chip:hover { border-color: var(--color-primary); background: var(--surface-alt); }
  .branch-chip-pin {
    inline-size: 1.75rem; block-size: 1.75rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--color-primary);
  }
  .branch-chip:hover .branch-chip-pin { background: var(--surface); }
  .branch-chip-name {
    font-size: var(--t-xs); font-weight: 500;
    letter-spacing: var(--track-wide); text-transform: uppercase;
    white-space: nowrap; max-inline-size: 8rem;
    overflow: hidden; text-overflow: ellipsis;
  }
  @media (max-width: 46em) { .branch-chip { padding-inline: var(--s-2); } }

  /* Le sélecteur de langue au même gabarit que les pastilles. */
  .header-actions .lang-toggle { block-size: 2.5rem; border-radius: var(--r-pill); }
}


/* ===========================================================================
   BARRE : la recherche laisse la place aux rayons
   ---------------------------------------------------------------------------
   Les rayons reprennent leur rangée : sur une épicerie ils SONT la
   navigation, et les cacher derrière un bouton coûtait un geste à chaque
   visite. La barre du haut n'a donc plus à les porter — la recherche peut y
   rester courte, et les commandes respirent.
   =========================================================================== */

@layer components {

  .header-search { max-inline-size: 14rem; }
  @media (min-width: 75em) { .header-search { max-inline-size: 17rem; } }
  @media (min-width: 90em) { .header-search { max-inline-size: 20rem; } }
}


/* ===========================================================================
   CE QUI SE POSE SUR LA PAGE RESTE BLANC
   ---------------------------------------------------------------------------
   Un champ de saisie, une carte, un en-tête : ce sont des objets POSÉS sur la
   page. Ils doivent s'en détacher, sinon on ne sait plus où écrire ni où
   commence quoi. Ils suivent donc « --surface-raised », réglable à part.
   =========================================================================== */

@layer components {

  /* ---- En-tête et rangée des rayons -------------------------------------- */
  .site-header { background: var(--surface-raised); backdrop-filter: none;
                 -webkit-backdrop-filter: none; }
  .mega        { background: var(--surface-raised); }
  .announce    { background: var(--ink); }

  /* ---- Champs de saisie : une boîte, pas un trait ------------------------
     Le trait seul convenait à une recherche posée sur fond clair. Sur un
     formulaire — connexion, inscription, adresse — il faut voir la ZONE où
     l'on écrit, et la voir même si le fond du site change. */
  .input, .select, .textarea,
  input[type='text'], input[type='email'], input[type='password'],
  input[type='tel'], input[type='number'], input[type='search'],
  input[type='date'], input[type='datetime-local'], select, textarea {
    background: var(--surface-raised);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
  }
  .input:focus, .select:focus, .textarea:focus,
  input:focus, select:focus, textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
  }

  /* La recherche de l'en-tête garde sa forme de pastille. */
  .search-field .input { border-radius: var(--r-pill); padding-inline-start: var(--s-8); }

  /* ---- Cartes, menus, fenêtres ------------------------------------------ */
  .card, .modal, .branch-card,
  .mega-panel, .lang-switch, .suggest { background: var(--surface-raised); }

  /* ---- Fiche produit : le bloc d'achat se détache du fond ----------------
     J'avais d'abord visé deux classes qui n'existent pas dans la vue : la
     règle ne s'appliquait à rien, et la fiche restait de la couleur du fond.
     On vise désormais ce que la page produit réellement. */
  .product-buy {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
  }
  /* La galerie aussi : une photo sur fond blanc se lit mieux qu'une photo
     posée sur la teinte du site. */
  /* La galerie n'a pas besoin d'un fond : c'est son cadre intérieur qui en
     porte un. Lui en donner un ajoutait une boîte dans une boîte. */
  .gallery-main { border-radius: var(--r-lg); }

  /* Le bloc de prix vivait sur une teinte : dans une carte déjà blanche, cela
     faisait un second fond sans raison. On garde une simple séparation. */
  .product-buy .buy-box,
  .product-buy > div:has(.price) {
    background: transparent;
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--s-5);
  }

  /* ---- Sélecteur de langue ----------------------------------------------
     Il s'ouvre PAR-DESSUS la page : sans fond propre, on lisait le contenu
     au travers. */
  .lang-switch { border: 1px solid var(--line); border-radius: var(--r-md); }
  .suggest     { border: 1px solid var(--line); border-radius: var(--r-md); }
}


/* ---------------------------------------------------------------------------
   BARRE : le logo prend la place disponible, la recherche se décale
   Il restait un vide entre l'identité et la recherche. Le logo s'y étend, et
   la recherche s'écarte d'autant — rien ne se resserre, la barre respire.
   ------------------------------------------------------------------------- */
@layer components {
  .logo-img { block-size: 3rem; max-inline-size: 14rem; }
  @media (max-width: 46em) { .logo-img { block-size: 2.1rem; max-inline-size: 7.5rem; } }

  /* La recherche se décale vers la droite : le vide était de son côté. */
  .header-search { margin-inline-start: var(--s-6); max-inline-size: 13rem; }
  @media (min-width: 75em) { .header-search { max-inline-size: 15rem; } }
  @media (min-width: 90em) { .header-search { max-inline-size: 17rem; } }
}

/* ---------------------------------------------------------------------------
   CARTES DE PRODUIT — blanches, détachées du fond
   Sur la capture, la carte prenait la teinte de la page : le prix et le nom
   flottaient sans support, et l'on ne distinguait plus une carte de l'espace
   entre deux cartes.
   ------------------------------------------------------------------------- */
@layer components {
  .product-card {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
  }
  .product-card:hover { border-color: var(--line-2); box-shadow: var(--sh-sm); }
  /* Le cadre de l'image suit la carte : deux blancs valent mieux qu'un blanc
     posé sur une teinte. */
  .product-card-media { background: var(--surface-raised); }
  /* Le corps de la carte respire : le texte ne touche plus le bord. */
  .product-card-body { padding: var(--s-4); }
  .product-card-add  { padding: 0 var(--s-4) var(--s-4); }
}

/* Une offre qui ne baisse pas le prix unitaire — « 3 achetés, 1 offert » —
   se distingue d'une remise : ni rouge ni prix barré, car le client qui n'en
   prend qu'un paie plein tarif. Un ton d'accent, comme une information. */
@layer components {
  .flag-offer {
    background: var(--color-accent);
    color: var(--ink);
    font-weight: 500;
  }
}


/* ===========================================================================
   MISE AU PROPRE — carte, fiche produit, panier
   ---------------------------------------------------------------------------
   Quatre défauts constatés à l'usage, corrigés ensemble parce qu'ils ont la
   même origine : des blocs dimensionnés sans tenir compte de ce qu'ils
   contiennent.
   =========================================================================== */

@layer components {

  /* ---- 1. LA REMISE SE VOIT ---------------------------------------------
     Le prix barré seul se remarque peu. Un cartouche « −20 % » sur l'image,
     et l'ancien prix juste à côté du nouveau : le client comprend d'un coup
     d'œil, sans lire. */
  .flag-promo {
    background: var(--color-primary);
    color: var(--surface-raised);
    font-weight: 600;
    font-size: var(--t-2xs);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    box-shadow: 0 2px 8px rgb(18 16 15 / .18);
  }
  .price-old {
    text-decoration: line-through;
    color: var(--muted-2);
    font-size: var(--t-sm);
    text-decoration-thickness: 1px;
  }
  /* Le prix remisé s'affirme : c'est l'information qu'on cherche. */
  .price-block:has(.price-old) .price-amount { color: var(--color-primary); }

  /* ---- 2. LA CARTE : moins haute, et rien ne déborde ---------------------
     Le format 4/5 faisait des cartes très hautes, et le pied mettait le prix
     et l'état de stock sur une même ligne : « Épuisé dans ce magasin » en
     sortait. Format carré, et pied qui s'empile quand la place manque. */
  .product-card-media { aspect-ratio: 1 / 1; }

  .product-card-foot {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--s-1) var(--s-3);
    min-inline-size: 0;
  }
  .product-card-foot .price-block { min-inline-size: 0; }
  .product-card-foot .stock-badge {
    flex: none;
    max-inline-size: 100%;
    white-space: normal;         /* le libellé long va à la ligne… */
    line-height: 1.25;           /* …au lieu de dépasser du cadre */
  }
  .product-card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;            /* deux lignes : les cartes restent égales */
  }

  /* ---- 3. LA FICHE PRODUIT ----------------------------------------------
     L'image occupait plus que sa colonne, et le sélecteur de quantité
     s'étirait sur toute la largeur — un champ pour deux chiffres. */
  @media (min-width: 60em) {
    .product-layout { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 3vw, 3rem); }
  }
  .gallery-main { aspect-ratio: 1 / 1; }
  .gallery { max-inline-size: 34rem; }

  .qty { border-radius: var(--r-md); overflow: hidden; }
  .qty input { inline-size: 3.25rem; }   /* deux chiffres suffisent */
  .buybox-row { align-items: center; gap: var(--s-3); }
  .buybox-row .btn { flex: 1 1 auto; }

  /* ---- 4. LE PANIER -----------------------------------------------------
     Le récapitulatif passait sous les articles bien avant qu'il le faille,
     et les montants s'y lisaient en petit — or c'est ce qu'on vient
     vérifier. */
  @media (min-width: 52em) {
    .split { grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(1.5rem, 3vw, 2.5rem); }
  }
  .cart-line { padding-block: var(--s-4); }
  /* Les montants du panier se lisent en grand : c'est ce qu'on vient
     vérifier avant de commander. Les noms visés d'abord — cart-total,
     summary-total — n'existent pas dans la vue. */
  .cart-line-total .price-amount { font-size: var(--t-lg); }
  .summary-value .price-amount   { font-size: var(--t-xl); }
  .summary-row { display: flex; justify-content: space-between; align-items: baseline;
                 gap: var(--s-3); padding-block: var(--s-2); }
  /* La dernière ligne du récapitulatif porte le total : elle se détache. */
  .summary-row:last-of-type .summary-value { font-weight: 500; }
}


/* ===========================================================================
   PANIER — la ligne se lit d'un trait
   ---------------------------------------------------------------------------
   Défaut de fond corrigé ici : ma règle « champs blancs » avait donné une
   marge intérieure à TOUS les champs. Sur celui de la quantité, large de
   trois caractères, elle mangeait toute la place et le chiffre disparaissait.

   Le reste suit le modèle demandé : vignette, désignation, stepper, montant,
   retrait — sur une seule ligne, dans cet ordre, sans vide au milieu.
   =========================================================================== */

@layer components {

  /* ---- Le stepper -------------------------------------------------------
     Deux boutons encadrant le nombre : un geste au lieu de trois. */
  .qty {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    overflow: hidden;
  }
  .qty-btn {
    inline-size: 2.25rem;
    display: grid; place-items: center;
    background: transparent; border: 0;
    color: var(--ink); font-size: var(--t-md); line-height: 1;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
  }
  .qty-btn:hover { background: var(--surface-alt); }

  /* Le champ : AUCUNE marge intérieure, sinon le chiffre n'a plus de place. */
  .qty-input {
    inline-size: 2.75rem; min-block-size: 2.5rem;
    padding: 0; margin: 0;
    border: 0; border-inline: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-family: inherit; font-size: var(--t-sm); font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .qty-input:focus { outline: 0; box-shadow: none; background: var(--surface-alt); }
  /* Les flèches natives doublonnent avec nos boutons. */
  .qty-input::-webkit-outer-spin-button,
  .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .qty-input[type='number'] { -moz-appearance: textfield; appearance: textfield; }

  /* ---- La ligne d'article ----------------------------------------------- */
  .cart-line {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: var(--s-3) var(--s-4);
    align-items: center;
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--line);
  }
  .cart-line:last-child { border-block-end: 0; }

  .cart-line-media {
    inline-size: 4.5rem; aspect-ratio: 1;
    border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden; background: var(--surface-raised);
  }
  .cart-line-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .cart-line-name { font-weight: 500; }
  .cart-line-body { display: flex; flex-direction: column; gap: var(--s-1); min-inline-size: 0; }

  /* Stepper, montant et retrait forment un groupe, aligné à droite. */
  .cart-line-actions {
    display: flex; align-items: center; gap: var(--s-4);
    justify-content: flex-end; flex-wrap: wrap;
  }
  .cart-line-total { font-variant-numeric: tabular-nums; white-space: nowrap; }

  @media (max-width: 46em) {
    .cart-line { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .cart-line-media { inline-size: 3.5rem; }
    .cart-line-actions { grid-column: 1 / -1; justify-content: space-between; }
  }

  /* ---- Le récapitulatif -------------------------------------------------
     Une carte posée, des lignes lisibles, et un total qui se distingue de
     ses composantes : c'est le montant qu'on vérifie avant de s'engager. */
  .summary {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4));
  }
  .summary-row { border-block-end: 0; }
  .summary-row + .summary-row { border-block-start: 1px solid var(--line); }
  .summary-row:last-of-type {
    margin-block-start: var(--s-2);
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--ink);
  }
  .summary-row:last-of-type .summary-label { font-size: var(--t-md); font-weight: 500; }
  .summary-row:last-of-type .summary-value { color: var(--color-primary); }
}


/* ===========================================================================
   « COMBIEN » ET « AJOUTER » SUR UNE LIGNE — et le panier mis au propre
   ---------------------------------------------------------------------------
   Le compteur et le bouton d'achat sont les deux moitiés d'un même geste.
   Empilés, ils paraissent indépendants et le bouton pleine largeur écrase le
   compteur. Côte à côte, le regard va de l'un à l'autre sans revenir.
   =========================================================================== */

@layer components {

  .buy-actions {
    display: flex; align-items: stretch; gap: var(--s-3);
    flex-wrap: wrap;
    margin-block: var(--s-4);
  }
  .buy-actions .buybox-row { flex: none; margin: 0; }
  /* Le bouton prend ce qui reste : ni écrasé, ni démesuré. */
  .buy-actions .add-form { flex: 1 1 14rem; display: flex; }
  .buy-actions .add-form .btn,
  .buy-actions > .btn { inline-size: 100%; }
  /* Même hauteur pour les deux : une ligne, pas deux objets voisins. */
  .buy-actions .qty { min-block-size: 3.25rem; }
  .buy-actions .qty button { inline-size: 2.75rem; }
  .buy-actions .qty input  { inline-size: 3rem; padding: 0; }

  @media (max-width: 30em) {
    .buy-actions .add-form { flex-basis: 100%; }
  }

  /* ---- Le panier : moins de vide en haut, une colonne qui tient -----------
     L'en-tête réservait autant d'espace qu'une page d'accueil, et le
     récapitulatif était plus étroit que son contenu. */
  /* Retiré : une classe posée page par page aurait dû être répétée huit
     fois, et oubliée à la neuvième. La règle générale est plus bas. */

  @media (min-width: 52em) {
    .cart-page .split { grid-template-columns: minmax(0, 1fr) 23rem; }
  }
}


/* ===========================================================================
   BANDEAU DE TITRE — le sommet de chaque page
   ---------------------------------------------------------------------------
   Un titre encadré par les marges du contenu paraît posé sur la page ; à
   pleine largeur il en devient le sommet, et le regard sait où commence ce
   qu'il lit.

   Le bandeau vit à l'intérieur du conteneur : on le fait donc déborder de
   part et d'autre, puis on recentre son contenu. C'est la seule façon
   d'obtenir une bande de bord à bord sans réécrire toutes les pages.
   =========================================================================== */

@layer components {

  .page-band {
    /* Déborde du conteneur, de chaque côté, jusqu'aux bords de la fenêtre. */
    margin-inline: calc(50% - 50vw);
    margin-block-start: calc(var(--s-8) * -1);
    margin-block-end: clamp(2rem, 4vw, 3.25rem);
    padding-block: clamp(2rem, 5vw, 3.5rem);
    background: var(--page-band);
    color: var(--page-band-ink);
  }

  /* Le contenu revient dans l'axe du reste de la page. */
  .page-band-inner {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    display: flex; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap;
  }

  .page-band .page-title { color: var(--page-band-ink); margin: 0; }
  .page-band-lede {
    margin-block-start: var(--s-2);
    color: color-mix(in srgb, var(--page-band-ink) 78%, transparent);
    max-inline-size: 46ch;
  }
  .page-band-meta {
    margin-block-start: var(--s-2);
    font-size: var(--t-xs); letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--page-band-ink) 62%, transparent);
  }

  /* L'action du bandeau se lit sur fond sombre : contour clair, fond nul. */
  .btn-band {
    border: 1px solid color-mix(in srgb, var(--page-band-ink) 40%, transparent);
    color: var(--page-band-ink);
    background: transparent;
  }
  .btn-band:hover {
    background: var(--page-band-ink);
    color: var(--page-band);
  }

  @media (max-width: 46em) {
    .page-band-inner { align-items: flex-start; }
  }
}

/* Le sélecteur de zone dans le récapitulatif : il décide des frais et du
   minimum, il se place donc avant eux, pas après. */
@layer components {
  .summary-zone { margin-block: var(--s-4) var(--s-3); }
  .summary-zone .label { display: block; margin-block-end: var(--s-2); }
  .summary-zone .select { inline-size: 100%; }
  /* Un bouton inerte se voit inerte : sans cela on clique et l'on doute. */
  .summary .btn[disabled] { opacity: .5; cursor: not-allowed; }
}


/* ===========================================================================
   BOUTONS ET COMPTEURS — une seule écriture, partout
   ---------------------------------------------------------------------------
   Le compteur du panier et celui de la fiche produit avaient divergé : deux
   apparences pour un même objet. Ils partagent désormais les mêmes règles,
   et l'on ne peut plus en corriger un en oubliant l'autre.

   Parti pris : des formes pleines aux angles francs, une hauteur unique de
   3.25 rem, et un état au survol qui déplace légèrement le bouton — assez
   pour qu'on sente le clic, pas assez pour distraire.
   =========================================================================== */

@layer components {

  /* ---- Le compteur, partout pareil --------------------------------------- */
  .qty,
  .buy-actions .qty,
  .cart-line-actions .qty {
    display: inline-flex; align-items: stretch;
    block-size: 3.25rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    overflow: hidden;
    flex: none;
  }
  .qty button, .qty-btn {
    inline-size: 2.75rem;
    display: grid; place-items: center;
    background: transparent; border: 0;
    color: var(--ink); cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
  }
  .qty button:hover, .qty-btn:hover { background: var(--ink); color: var(--surface-raised); }
  .qty button:disabled { opacity: .35; cursor: not-allowed; }
  .qty button:disabled:hover { background: transparent; color: var(--ink); }

  .qty input, .qty-input {
    inline-size: 3.25rem;
    padding: 0; margin: 0;
    border: 0; border-inline: 1px solid var(--line);
    border-radius: 0; background: transparent;
    text-align: center;
    font-family: inherit; font-size: var(--t-md); font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .qty input:focus, .qty-input:focus {
    outline: 0; box-shadow: none; background: var(--surface-alt);
  }
  .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button,
  .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .qty input[type='number'], .qty-input[type='number'] {
    -moz-appearance: textfield; appearance: textfield;
  }

  /* ---- La ligne d'achat : compteur + bouton, sans couche intermédiaire ---- */
  .buy-actions {
    display: flex; align-items: stretch; gap: var(--s-3);
    margin-block: var(--s-5) var(--s-3);
  }
  .buy-actions .add-form { flex: 1 1 auto; display: flex; min-inline-size: 0; }
  .buy-actions .add-form > .btn,
  .buy-actions > .btn {
    inline-size: 100%; block-size: 3.25rem;
    border-radius: var(--r-md);
  }
  @media (max-width: 26em) {
    .buy-actions { flex-wrap: wrap; }
    .buy-actions .add-form { flex-basis: 100%; }
  }

  /* ---- Les boutons : présence et réponse au clic ------------------------- */
  .btn {
    border-radius: var(--r-md);
    font-weight: 500;
    letter-spacing: var(--track-wide);
    transition: transform var(--dur-fast) var(--ease),
                background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
  }
  .btn:active:not([disabled]) { transform: translateY(1px); }

  .btn-primary {
    background: var(--color-primary);
    color: var(--surface-raised);
    border: 1px solid var(--color-primary);
  }
  .btn-primary:hover:not([disabled]) {
    background: var(--color-primary-active);
    border-color: var(--color-primary-active);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 28%, transparent);
  }
  .btn-lg { min-block-size: 3.25rem; padding-inline: var(--s-6); font-size: var(--t-sm); }
  .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

  /* ---- Le bandeau colle à la barre des rayons ----------------------------
     Une section dont le PREMIER enfant est un bandeau n'a pas de marge en
     haut : le bandeau la porte. Écrit ainsi, cela vaut pour les huit pages
     actuelles et pour celles à venir, sans rien poser sur chacune. */
  .page-band { margin-block-start: 0; }

  .section:has(> .container > .page-band:first-child),
  .section:has(> .page-band:first-child) { padding-block-start: 0; }

  /* Le conteneur ne doit pas non plus décaler le bandeau. */
  .container:has(> .page-band:first-child) { padding-block-start: 0; }

  /* Repli pour les navigateurs sans :has() — rare, mais le vide y resterait.
     La première section d'une page commence toujours par son titre. */
  @supports not selector(:has(*)) {
    main > .section:first-child { padding-block-start: 0; }
  }
}

/* Coordonnées du pied : chaque ligne se lit d'un coup, l'icône donne le type
   sans qu'on ait à lire le libellé. */
@layer components {
  .footer-logo { block-size: 2.75rem; max-inline-size: 12rem; object-fit: contain; }
  .footer-contact { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
  .footer-contact li { display: flex; align-items: flex-start; gap: var(--s-2); }
  .footer-contact .icon { flex: none; margin-block-start: .15em; opacity: .7; }
  .footer-contact a:hover { text-decoration: underline; text-underline-offset: .2em; }
  .footer-legal { display: block; font-size: var(--t-2xs); opacity: .7;
                  margin-block-start: var(--s-1); }
}


/* ===========================================================================
   GRAISSE — réglable depuis le thème
   ---------------------------------------------------------------------------
   Les graisses étaient écrites en dur dans chaque règle : demander « plus
   gras » revenait à nous écrire. Elles suivent désormais deux jetons, réglés
   dans Thème → Typographie.

   Titres et texte courant restent distincts : on veut souvent des titres
   francs sur un texte léger, et l'inverse rend la page illisible.
   =========================================================================== */

@layer components {

  /* ---- Les titres -------------------------------------------------------- */
  h1, h2, h3, h4,
  .page-title, .section-title, .product-title, .card-title,
  .drawer-title, .modal-title, .footer-title {
    font-weight: var(--weight-heading);
  }

  /* ---- Le texte courant -------------------------------------------------- */
  body, p, li, td, .text-small, .text-meta {
    font-weight: var(--weight-body);
  }

  /* ---- Ce qui doit rester lisible quoi qu'il arrive ----------------------
     Un prix, un bouton, une étiquette : ces éléments portent une décision.
     Ils gardent une graisse propre, un cran au-dessus du texte, sinon un
     réglage léger les ferait disparaître. */
  .price-amount, .summary-value, .cart-line-total {
    font-weight: max(500, var(--weight-heading));
  }
  .btn, .badge, .flag, .stock-badge, .pill {
    font-weight: max(500, var(--weight-body));
  }

  /* Le nom d'un produit dans une liste : il se lit avant le reste. */
  .product-card-title, .cart-line-name { font-weight: max(500, var(--weight-body)); }
}

/* ═══════════════════════════════════════════════════════════════════
   Tableau de bord du compte professionnel

   Pensé pour l'ÉCRAN LARGE d'abord : le restaurateur consulte ses
   comptes assis à son bureau, pas debout entre deux services. Sur
   mobile tout retombe en une colonne, sans rien perdre.

   Aucune couleur écrite ici : uniquement les variables du thème, pour
   que la page suive le jour où la charte change.
   ═══════════════════════════════════════════════════════════════════ */

.pro-board { display: grid; gap: var(--s-4); }

/* Les chiffres clés. « auto-fit » plutôt qu'un nombre fixe de colonnes :
   la grille s'adapte à la largeur réelle au lieu d'imposer un gabarit
   qui déborde sur les écrans étroits. */
.pro-kpis {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.pro-kpi {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: grid;
  gap: 6px;
  align-content: start;
}

.pro-kpi-label {
  font-size: var(--t-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--muted);
}

/* Chiffres tabulaires : sans eux, les montants d'une colonne ne
   s'alignent pas et la comparaison visuelle devient fausse. */
.pro-kpi-value {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: var(--weight-heading);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: var(--lead-tight);
}

.pro-kpi-value.is-debt { color: var(--danger); }
.pro-kpi-hint { font-size: var(--t-xs); color: var(--muted-2); }

/* Deux colonnes sur large écran : les commandes d'un côté, les achats au
   magasin de l'autre. Côte à côte, on les compare d'un regard. */
.pro-cols {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .pro-cols { grid-template-columns: 1fr 1fr; }
}

.pro-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.pro-panel-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  background: var(--surface-alt);
}

.pro-panel-title {
  font-family: var(--font-heading);
  font-size: var(--t-md);
  font-weight: var(--weight-heading);
  color: var(--ink);
}

.pro-rows { display: grid; }

/* Une ligne par achat. La bordure entre les lignes, pas autour : un
   cadre par ligne fait un tableau de prison. */
.pro-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line-2);
  align-items: baseline;
}

.pro-row:first-child { border-top: 0; }

.pro-row-main { display: grid; gap: 2px; min-width: 0; }
.pro-row-ref  { font-weight: 600; color: var(--ink); }
.pro-row-sub  { font-size: var(--t-xs); color: var(--muted); }

.pro-row-amounts { display: grid; gap: 2px; text-align: end; }
.pro-row-total {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Ce qui reste dû, en rouge et seulement s'il en reste. Afficher
   « 0,00 » partout ferait chercher une dette qui n'existe pas. */
.pro-row-due {
  font-size: var(--t-xs);
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

.pro-empty {
  padding: var(--s-5) var(--s-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--t-sm);
}