/* ==========================================================================
   Poche — base et composants partagés
   Ordre : reset · texte · gabarit · barre haute · dock · boutons · champs ·
   tuiles et cartes · compteurs, puces, badges · feuilles · toast ·
   bandeau nicotine · pied · états · desktop · mouvement réduit
   ========================================================================== */

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barre-haut) + 1rem); }
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  color: var(--encre);
  background: var(--blanc);
  -webkit-tap-highlight-color: transparent;
  font-optical-sizing: auto;
  min-height: 100dvh;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4 { margin: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: var(--r-petit); }
::selection { background: var(--beurre); color: var(--encre); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@view-transition { navigation: auto; }

/* ---------- Texte ---------- */
.affiche { font-size: var(--t-affiche); line-height: var(--lh-affiche); font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
h1, .h1 { font-size: var(--t-h1); line-height: var(--lh-titre); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h2, .h2 { font-size: var(--t-h2); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
h3, .h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 700; text-wrap: balance; }
.petit { font-size: var(--t-petit); line-height: 1.45; font-weight: 500; }
.gris { color: var(--gris); }
.prix { font-size: var(--t-prix); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.prix-grand { font-size: var(--t-prix-grand); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.prix-barre { text-decoration: line-through; color: var(--gris); font-weight: 500; font-size: var(--t-petit); }
.tabulaire { font-variant-numeric: tabular-nums; }
.texte-long { max-width: 40rem; }
.texte-long p + p, .texte-long ul + p, .texte-long p + ul { margin-top: var(--e-4); }
.texte-long h2 { margin-top: var(--e-10); margin-bottom: var(--e-3); }
.texte-long h3 { margin-top: var(--e-6); margin-bottom: var(--e-2); }
.texte-long li { position: relative; padding-left: 1.25em; }
.texte-long li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: var(--cobalt); }
.texte-long li + li { margin-top: var(--e-2); }
p a:not(.bouton):not(.bouton-texte), li a:not(.bouton), dd a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1.5px; }
.pied li a, .pied .telephone, .dock-onglets a, .nav-rayons li a, .fil li a, .ligne-produit .nom a, .carte-produit .nom a, .tuile-rayon { text-decoration: none; }
.ligne-produit .nom a:hover, .carte-produit .nom a:hover { text-decoration: underline; }
.lien-encre { color: var(--encre); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
.lien-encre:hover { color: var(--cobalt); }

/* ---------- Gabarit ---------- */
.page { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: var(--dock-total); }
.contenu { flex: 1; width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.section { padding: var(--e-8) 0; }
.section + .section { padding-top: 0; }
.section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-4); }
.section-tete a { font-weight: 700; white-space: nowrap; }
.pleine-largeur { margin-left: calc(-1 * var(--marge)); margin-right: calc(-1 * var(--marge)); padding-left: var(--marge); padding-right: var(--marge); }
.fil { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--t-petit); color: var(--gris); padding: var(--e-4) 0 0; }
.fil a { color: var(--gris); }
.fil li + li::before { content: "/"; margin-right: var(--e-2); color: var(--filet-fort); }

/* ---------- Barre haute (mobile) ---------- */
.barre-haut {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  height: var(--barre-haut); padding: 0 var(--marge);
  background: var(--blanc);
}
.barre-haut .barre-interne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); width: 100%; height: var(--barre-haut); }
.barre-haut .wordmark { height: 1.5rem; width: auto; color: var(--encre); }
.barre-haut .logo { display: inline-flex; align-items: center; height: var(--cible); }
.barre-haut .actions { display: flex; gap: var(--e-1); }
.barre-haut .recherche-haut, .barre-haut .nav-rayons { display: none; }
.bouton-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cible); height: var(--cible); border-radius: 50%;
  color: var(--encre); position: relative;
}
.bouton-icone:hover { background: var(--ciel); }
.bouton-icone svg { width: 1.5rem; height: 1.5rem; }
.pastille {
  position: absolute; top: 2px; right: 0;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: var(--r-pilule);
  background: var(--mandarine); color: var(--blanc);
  font-size: var(--t-petit); font-weight: 800; line-height: 1.5rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.pastille.rebondit { animation: rebond var(--d-moyen) var(--ressort); }
@keyframes rebond { 50% { transform: scale(1.35); } }
.avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--beurre); color: var(--encre); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }

/* ---------- Icônes ---------- */
.ico { width: 1.5rem; height: 1.5rem; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-petit { width: 1.125rem; height: 1.125rem; }

/* ---------- Dock (la barre de poche) ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--blanc);
  border-top: 2px solid var(--encre);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dock-action, .dock-recherche {
  height: var(--dock-action);
  display: flex; align-items: center; gap: var(--e-3);
  padding: 0 var(--marge);
}
.dock-action .contexte { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.dock-action .contexte .libelle { font-size: var(--t-petit); color: var(--gris); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-action .contexte .valeur { font-weight: 800; font-size: var(--t-h3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.dock-action .contexte button.valeur { text-align: left; text-decoration: underline; text-decoration-color: var(--cobalt); text-underline-offset: .2em; text-decoration-thickness: 2px; }
.dock-action .bouton { flex: none; }
.dock-action .bouton-dock-compact { font-size: var(--t-corps); padding-inline: 1.25rem; }
.dock-recherche .champ-recherche { flex: 1; }
.dock-recherche input::placeholder { font-size: var(--t-petit); }
.dock-onglets {
  height: var(--dock-onglets);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--filet);
}
.dock-onglets a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--gris); font-size: var(--t-petit); font-weight: 600; line-height: 1;
  border-radius: 0;
}
.dock-onglets a .ico { width: 1.5rem; height: 1.5rem; }
.dock-onglets a[aria-current="page"] { color: var(--cobalt); }
.dock-onglets a[aria-current="page"] .ico { stroke-width: 2.5; }
.dock-onglets a .pastille { position: static; margin-top: -1.9rem; margin-left: 1.6rem; margin-bottom: .55rem; }
.dock.sans-onglets .dock-onglets { display: none; }
.dock.sans-onglets ~ .page, body:has(.dock.sans-onglets) .page { padding-bottom: calc(var(--dock-action) + env(safe-area-inset-bottom, 0px)); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 3.25rem; padding: 0 1.5rem;
  border-radius: var(--r-pilule);
  font-weight: 700; font-size: var(--t-corps); line-height: 1.1;
  white-space: nowrap; text-decoration: none;
  transition: transform var(--d-court) var(--ressort), background-color var(--d-court), color var(--d-court), border-color var(--d-court);
  border: 2px solid transparent;
}
.bouton:hover { text-decoration: none; }
.bouton:active { transform: scale(.97); }
.bouton .ico { width: 1.25rem; height: 1.25rem; }
.bouton-cobalt { background: var(--cobalt); color: var(--blanc); border-color: var(--cobalt); }
.bouton-cobalt:hover { background: var(--cobalt-fonce); border-color: var(--cobalt-fonce); }
.bouton-encre { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.bouton-encre:hover { background: var(--encre-2); border-color: var(--encre-2); }
.bouton-contour { background: var(--blanc); color: var(--encre); border-color: var(--encre); }
.bouton-contour:hover { background: var(--ciel); }
.bouton-beurre { background: var(--beurre); color: var(--encre); border-color: var(--beurre); }
.bouton-beurre:hover { background: var(--beurre-fonce); border-color: var(--beurre-fonce); }
.bouton-doux { background: var(--ciel); color: var(--cobalt); border-color: var(--ciel); }
.bouton-doux:hover { background: var(--ciel-2); border-color: var(--ciel-2); }
.bouton-large { width: 100%; }
.bouton-grand { min-height: 3.5rem; font-size: var(--t-h3); padding: 0 1.75rem; }
.bouton-petit { min-height: var(--cible); padding: 0 1rem; font-size: var(--t-petit); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.bouton-texte { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); color: var(--cobalt); font-weight: 700; }
.bouton-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cible); height: var(--cible); border-radius: 50%;
  background: var(--cobalt); color: var(--blanc); flex: none;
  transition: transform var(--d-court) var(--ressort), background-color var(--d-court);
}
.bouton-plus:hover { background: var(--cobalt-fonce); }
.bouton-plus:active { transform: scale(.9); }
.bouton-plus .ico { width: 1.25rem; height: 1.25rem; stroke-width: 2.5; }
.rangee-boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---------- Champs ---------- */
.champ { display: flex; flex-direction: column; gap: var(--e-2); }
.champ label, .champ .etiquette { font-weight: 700; font-size: var(--t-corps); }
.champ .aide { font-size: var(--t-petit); color: var(--gris); font-weight: 500; }
.champ input, .champ textarea, .champ .faux-select {
  width: 100%; min-height: var(--cible-large); padding: 0 1rem;
  border: 2px solid var(--filet-fort); border-radius: var(--r-champ);
  background: var(--blanc); font-size: var(--t-corps);
  transition: border-color var(--d-court);
}
.champ textarea { padding: .75rem 1rem; min-height: 7rem; resize: vertical; }
.champ input:focus, .champ textarea:focus { border-color: var(--cobalt); outline: 3px solid var(--ciel-2); outline-offset: 0; }
.champ input::placeholder { color: var(--gris); opacity: 1; }
.champ.invalide input { border-color: var(--erreur); }
.champ .message-erreur { color: var(--erreur); font-size: var(--t-petit); font-weight: 600; }
.champ-recherche { position: relative; display: flex; align-items: center; }
.champ-recherche .ico { position: absolute; left: 1rem; color: var(--gris); pointer-events: none; }
.champ-recherche input {
  width: 100%; min-height: 3.25rem; padding: 0 1rem 0 3rem;
  border: 2px solid var(--encre); border-radius: var(--r-pilule);
  background: var(--blanc); font-size: var(--t-corps); font-weight: 500;
}
.champ-recherche input:focus { outline: 3px solid var(--cobalt); outline-offset: 2px; border-color: var(--encre); }
.champ-recherche input::placeholder { color: var(--gris); opacity: 1; }
.faux-select { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); text-align: left; }
.faux-select .ico { color: var(--cobalt); }
.case { display: flex; align-items: flex-start; gap: var(--e-3); min-height: var(--cible); cursor: pointer; }
.case input { width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--cobalt); flex: none; }
.formulaire { display: flex; flex-direction: column; gap: var(--e-5); }
.formulaire-rangee { display: grid; gap: var(--e-4); }
.formulaire-action { display: grid; gap: var(--e-3); }
@media (min-width: 30rem) { .formulaire-rangee.deux { grid-template-columns: 1fr 1fr; } }
@media (min-width: 30rem) { .formulaire-action { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* ---------- Tuiles (grandes surfaces colorées) ---------- */
.tuile {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-tuile); padding: var(--e-5);
  color: var(--encre); text-decoration: none;
  transition: transform var(--d-court) var(--ressort);
}
.tuile:hover { text-decoration: none; }
.tuile:active { transform: scale(.985); }
.tuile-beurre { background: var(--beurre); }
.tuile-ciel { background: var(--ciel); }
.tuile-peche { background: var(--peche); }
.tuile-menthe { background: var(--menthe); }
.tuile-sable { background: var(--sable); }
.tuile-encre { background: var(--encre); color: var(--blanc); }
.tuile-cobalt { background: var(--cobalt); color: var(--blanc); }
.tuile img.produit { mix-blend-mode: multiply; }
.tuile-encre img.produit, .tuile-cobalt img.produit { mix-blend-mode: normal; border-radius: var(--r-carte); }
.tuile .h2, .tuile h2, .tuile h3 { text-wrap: balance; }
.galerie .tuile { padding: 8%; }
.tuiles { display: grid; gap: var(--e-3); grid-template-columns: 1fr 1fr; }
.tuiles .tuile { min-height: 10rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-3); }
.tuiles .tuile img.produit { width: 5.5rem; align-self: flex-end; }
.tuiles .tuile-large, .tuiles .tuile-plein { grid-column: 1 / -1; }
.tuile-rayon { display: flex; align-items: center; gap: var(--e-3); min-height: 5.5rem; padding: var(--e-3) var(--e-4); border-radius: var(--r-carte); background: var(--ciel); font-weight: 700; font-size: var(--t-h3); color: var(--encre); }
.tuile-rayon img.produit { width: 4rem; height: 4rem; object-fit: contain; mix-blend-mode: multiply; flex: none; }
.tuile-rayon .ico { margin-left: auto; color: var(--cobalt); }
.rayons { display: grid; gap: var(--e-3); }

/* ---------- Cartes produit ---------- */
.grille { display: grid; gap: var(--e-4) var(--e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carte-produit { display: flex; flex-direction: column; gap: var(--e-2); position: relative; min-width: 0; }
.carte-produit .visuel {
  display: block; aspect-ratio: 1; border-radius: var(--r-carte); background: var(--ciel);
  overflow: hidden; padding: 10%;
}
.carte-produit .visuel img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.carte-produit .nom { font-weight: 700; font-size: var(--t-corps); line-height: 1.25; color: var(--encre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grille .carte-produit .nom, .defile .carte-produit .nom { min-height: 2.5em; }
.carte-produit .nom a { color: inherit; }
.carte-produit .nom a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-carte); }
.carte-produit .marque { font-size: var(--t-petit); color: var(--gris); font-weight: 500; }
.carte-produit .bas { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: auto; }
.carte-produit .bas .bouton-plus { position: relative; z-index: 1; }
.carte-produit .badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; }
.carte-produit .note { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--t-petit); color: var(--gris); font-weight: 600; }
.carte-produit .note .ico { width: 1rem; height: 1rem; fill: var(--mandarine); stroke: var(--mandarine); }
.carte-produit > .note, .carte-produit > .petit { position: relative; z-index: 1; }
.carte-produit.rupture .visuel img { opacity: .55; filter: grayscale(.6); }
.liste-produits { display: flex; flex-direction: column; gap: var(--e-3); }
.ligne-produit { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--e-3); align-items: start; padding: var(--e-3); border: 2px solid var(--filet); border-radius: var(--r-carte); position: relative; }
.ligne-produit .visuel { width: 4.5rem; height: 4.5rem; border-radius: var(--r-petit); background: var(--ciel); padding: 6%; }
.ligne-produit .visuel img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ligne-produit .nom { font-weight: 700; line-height: 1.25; }
.ligne-produit .nom a { color: var(--encre); }
.ligne-produit .detail { font-size: var(--t-petit); color: var(--gris); font-weight: 500; }
.ligne-produit .prix { font-size: var(--t-corps); }
.ligne-produit .droite { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-1); }
.ligne-produit.rupture .visuel img { opacity: .55; filter: grayscale(.6); }
.visuel.sans-photo { display: flex; align-items: center; justify-content: center; text-align: center; }
.defile { display: flex; gap: var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-2); scrollbar-width: none; }
.defile::-webkit-scrollbar { display: none; }
.defile > * { flex: 0 0 11rem; scroll-snap-align: start; }

/* ---------- Compteur, puces, badges, note ---------- */
.compteur {
  display: inline-flex; align-items: center;
  border: 2px solid var(--encre); border-radius: var(--r-pilule); background: var(--blanc);
  height: 3rem; overflow: hidden;
}
.compteur[aria-disabled="true"] { border-color: var(--filet-fort); }
.compteur[aria-disabled="true"] .valeur, .compteur[aria-disabled="true"] output { color: var(--gris); }
.compteur button { width: var(--cible); height: 100%; display: inline-flex; align-items: center; justify-content: center; color: var(--encre); }
.compteur button:hover { background: var(--ciel); }
.compteur button:disabled { color: var(--filet-fort); cursor: not-allowed; background: none; }
.compteur button .ico { width: 1.125rem; height: 1.125rem; stroke-width: 2.5; }
.compteur output, .compteur .valeur { min-width: 2.25rem; text-align: center; font-weight: 800; font-size: var(--t-h3); color: var(--mandarine-texte); font-variant-numeric: tabular-nums; display: inline-block; }
.compteur.saute .valeur, .compteur.saute output { animation: saut var(--d-court) var(--ressort); }
@keyframes saut { 50% { transform: scale(1.18); } }
.compteur-grand { height: 3.75rem; }
.compteur-grand button { width: var(--cible-large); }
.compteur-grand .valeur, .compteur-grand output { min-width: 3rem; font-size: var(--t-h2); }

.puces { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.puce {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: var(--cible); padding: 0 .9rem;
  border: 2px solid var(--encre); border-radius: var(--r-pilule);
  font-weight: 700; font-size: var(--t-petit); color: var(--encre); background: var(--blanc);
  transition: background-color var(--d-court), color var(--d-court);
}
.puce:hover { background: var(--ciel); text-decoration: none; }
.puce[aria-pressed="true"], .puce[aria-checked="true"], .puce.active { background: var(--encre); color: var(--blanc); }
.puce .ico { width: 1rem; height: 1rem; }
.puce-supprimer { border-color: var(--cobalt); color: var(--cobalt); }
.puces-defile { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.puces-defile::-webkit-scrollbar { display: none; }
.puces-defile .puce { flex: none; white-space: nowrap; }

.badge { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.75rem; padding: 0 .65rem; border-radius: var(--r-pilule); font-size: var(--t-petit); font-weight: 700; line-height: 1; white-space: nowrap; }
.badge-stock { background: var(--menthe); color: var(--menthe-texte); }
.badge-rupture { background: var(--peche); color: var(--mandarine-nuit); }
.badge-nouveau { background: var(--ciel); color: var(--cobalt); }
.badge-dluo { background: var(--sable); color: var(--encre); }
.badge-conseil { background: var(--beurre); color: var(--encre); }
.badge-encre { background: var(--encre); color: var(--blanc); }
.badge .ico { width: .9rem; height: .9rem; }

.etoiles { display: inline-flex; gap: 1px; color: var(--mandarine); }
.etoiles .ico { width: 1.125rem; height: 1.125rem; fill: currentColor; stroke: currentColor; }
.etoiles .ico.vide { fill: none; padding: 0; border: 0; border-radius: 0; text-align: start; }
.note-ligne { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; }
.note-ligne .petit { color: var(--gris); }

/* ---------- Options en cartes (déclinaisons, livraison, paiement) ---------- */
.options { display: grid; gap: var(--e-2); }
.option {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--e-3);
  min-height: var(--cible-large); padding: var(--e-3) var(--e-4);
  border: 2px solid var(--filet-fort); border-radius: var(--r-champ);
  background: var(--blanc); text-align: left; width: 100%; cursor: pointer;
  transition: border-color var(--d-court), background-color var(--d-court);
}
.option:hover { border-color: var(--encre); }
.option[aria-checked="true"], .option.active { border-color: var(--cobalt); background: var(--ciel); box-shadow: inset 0 0 0 1px var(--cobalt); }
.option > span:first-child { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.option .titre { display: block; font-weight: 800; font-size: var(--t-h3); line-height: 1.2; }
.option .sous { display: block; font-size: var(--t-petit); color: var(--gris); font-weight: 500; margin-top: 2px; }
.option .a-droite { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.option .badge { justify-self: start; margin-top: .35rem; }
.option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.options-ligne { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e-2); }
.options-ligne .option { grid-template-columns: 1fr; text-align: center; padding: var(--e-3) var(--e-2); }
.options-ligne .option > span:first-child { align-items: center; width: 100%; }
.options-ligne .option .titre { font-size: var(--t-h2); }
.pastilles-couleur { display: flex; gap: var(--e-2); }
.pastille-couleur { width: var(--cible); height: var(--cible); border-radius: 50%; border: 3px solid var(--blanc); outline: 2px solid var(--filet-fort); cursor: pointer; }
.pastille-couleur[aria-checked="true"] { outline: 3px solid var(--cobalt); }

.colonnes-fiche > * + * { margin-top: var(--e-6); }
.colonnes-guide > * + *, .colonnes-rayon > * + *, .deux-colonnes > * + * { margin-top: var(--e-6); }

/* ---------- Blocs d'information ---------- */
.bloc { padding: var(--e-4) var(--e-5); border-radius: var(--r-carte); }
.bloc-ciel { background: var(--ciel); }
.bloc-sable { background: var(--sable); }
.bloc-menthe { background: var(--menthe); }
.bloc-peche { background: var(--peche); }
.bloc-encre { background: var(--encre); color: var(--blanc); }
.bloc-encre a { color: var(--beurre); }
.bloc-contour { border: 2px solid var(--encre); }
.bloc h3 + p, .bloc h2 + p { margin-top: var(--e-2); }
.bloc .bouton { margin-top: var(--e-4); }
.conseil { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); padding: var(--e-4); border-radius: var(--r-carte); background: var(--sable); }
.conseil .ico { color: var(--mandarine-texte); margin-top: .15rem; }
.conseil .qui { font-size: var(--t-petit); color: var(--gris); font-weight: 600; margin-top: var(--e-2); }
.liste-cle { display: grid; gap: 0; }
.liste-cle > div { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) 0; border-top: 1px solid var(--filet); }
.liste-cle > div:first-child { border-top: 0; }
.liste-cle dt { color: var(--gris); font-weight: 500; }
.liste-cle dd { margin: 0; font-weight: 700; text-align: right; }
.liste-cle .total { font-weight: 800; font-size: var(--t-h3); border-top: 2px solid var(--encre); }
.reassurance { display: grid; gap: var(--e-3); grid-template-columns: 1fr 1fr; }
.reassurance.une-colonne { grid-template-columns: 1fr; }
.reassurance > div { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-petit); font-weight: 600; }
.reassurance .ico { color: var(--cobalt); width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.accordeon { border-top: 1px solid var(--filet); }
.accordeon details { border-bottom: 1px solid var(--filet); }
.accordeon summary { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); min-height: 3.5rem; padding: var(--e-3) 0; font-weight: 700; font-size: var(--t-h3); cursor: pointer; list-style: none; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary .ico { color: var(--cobalt); transition: transform var(--d-court); }
.accordeon details[open] summary .ico { transform: rotate(45deg); }
.accordeon .corps { padding: 0 0 var(--e-5); }
.onglets { display: flex; gap: var(--e-2); border-bottom: 2px solid var(--filet); overflow-x: auto; scrollbar-width: none; }
.onglets button { min-height: var(--cible-large); padding: 0 var(--e-2); font-weight: 700; color: var(--gris); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; border-radius: 0; }
.onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--cobalt); }
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-1); }
.etapes li { height: .5rem; border-radius: var(--r-pilule); background: var(--filet); }
.etapes li.faite { background: var(--cobalt); }
.etapes li.en-cours { background: var(--beurre); }
.etapes-legende { display: flex; justify-content: space-between; font-size: var(--t-petit); color: var(--gris); font-weight: 600; margin-top: var(--e-2); }
.etapes-legende .actuelle { color: var(--encre); }

/* ---------- Feuille au pouce ---------- */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(22, 27, 61, .55); opacity: 0; pointer-events: none; transition: opacity var(--d-feuille); }
.voile.visible { opacity: 1; pointer-events: auto; }
.feuille {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--blanc); border-radius: var(--r-tuile) var(--r-tuile) 0 0;
  max-height: 88dvh; display: flex; flex-direction: column;
  transform: translateY(105%); transition: transform var(--d-feuille) var(--ressort);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  visibility: hidden;
}
.feuille.ouverte { transform: translateY(0); visibility: visible; }
.feuille .poignee { width: 3rem; height: .3rem; border-radius: var(--r-pilule); background: var(--filet-fort); margin: .6rem auto 0; }
.feuille .feuille-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--marge) var(--e-2); }
.feuille .feuille-tete h2 { font-size: var(--t-h2); }
.feuille .feuille-corps { padding: 0 var(--marge) var(--e-4); overflow-y: auto; }
.feuille .feuille-pied { padding: var(--e-3) var(--marge) var(--e-4); border-top: 1px solid var(--filet); display: flex; gap: var(--e-3); }
.feuille .feuille-pied .bouton { flex: 1; }
.feuille .feuille-aide { font-size: var(--t-petit); color: var(--gris); margin: 0 0 var(--e-3); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: var(--marge); right: var(--marge); z-index: 45;
  bottom: calc(var(--dock-total) + var(--e-3));
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-carte);
  background: var(--menthe); color: var(--menthe-texte); font-weight: 700;
  transform: translateY(1rem); opacity: 0; pointer-events: none;
  transition: transform var(--d-moyen) var(--ressort), opacity var(--d-moyen);
}
.toast.visible { transform: none; opacity: 1; pointer-events: auto; }
.toast a { color: var(--menthe-texte); text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }
.toast .ico { color: var(--menthe-texte); }

/* ---------- Bandeau nicotine ---------- */
.bandeau-nicotine {
  background: var(--encre); color: var(--blanc);
  font-size: var(--t-petit); font-weight: 500; line-height: 1.4;
  padding: var(--e-3) var(--marge); text-align: center;
}
.bandeau-nicotine strong { font-weight: 800; }

/* ---------- Pied ---------- */
.pied { border-top: 2px solid var(--encre); padding: var(--e-8) 0 var(--e-6); }
.pied .pied-grille { display: grid; gap: var(--e-6); }
.pied h3 { font-size: var(--t-corps); margin-bottom: var(--e-2); }
.pied li { padding: .3rem 0; }
.pied li a { color: var(--encre); }
.pied .wordmark { height: 1.75rem; width: auto; color: var(--encre); }
.pied .depuis { color: var(--gris); font-size: var(--t-petit); margin-top: var(--e-2); }
.pied .telephone { font-size: var(--t-h3); font-weight: 800; color: var(--encre); display: inline-flex; align-items: center; gap: var(--e-2); }
.pied .mentions { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--filet); font-size: var(--t-petit); color: var(--gris); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.pied .mentions a { color: var(--gris); }

/* ---------- États ---------- */
.vide { padding: var(--e-10) var(--e-5); text-align: center; border: 2px dashed var(--filet-fort); border-radius: var(--r-tuile); }
.vide .affiche { font-size: var(--t-h1); }
.vide p { margin-top: var(--e-2); color: var(--gris); }
.vide .bouton { margin-top: var(--e-5); }
.vide .rangee-boutons { justify-content: center; margin-top: var(--e-5); }
.alerte { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-radius: var(--r-champ); font-weight: 600; }
.alerte .ico { flex: none; margin-top: .1rem; }
.alerte-erreur { background: var(--erreur-fond); color: var(--erreur); }
.alerte-info { background: var(--ciel); color: var(--cobalt-nuit); }
.alerte-ok { background: var(--menthe); color: var(--menthe-texte); }
.alerte-attention { background: var(--sable); color: var(--encre); }
.squelette { position: relative; overflow: hidden; background: var(--ciel); border-radius: var(--r-petit); color: transparent; animation: respiration 1.4s ease-in-out infinite; }
.squelette-visuel { aspect-ratio: 1; border-radius: var(--r-carte); }
.squelette-ligne { display: block; width: 60%; color: transparent; line-height: 1.1; white-space: nowrap; overflow: hidden; }
.squelette-ligne.large { width: 90%; }
.squelette-ligne.courte { width: 35%; }
.squelette-option { height: 4.5rem; }
@keyframes respiration { 50% { background: var(--ciel-2); } }
.chargement { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--gris); font-weight: 600; }
.chargement::before { content: ""; width: 1.125rem; height: 1.125rem; border: 3px solid var(--ciel-2); border-top-color: var(--cobalt); border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Tableaux ---------- */
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--filet); border-radius: var(--r-carte); }
table.tableau th, table.tableau td { padding: var(--e-3) var(--e-4); text-align: left; border-bottom: 1px solid var(--filet); vertical-align: top; }
table.tableau th { background: var(--ciel); font-weight: 700; }
table.tableau tr:last-child td { border-bottom: 0; }
table.tableau td.nombre, table.tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Utilitaires ---------- */
.pile { display: flex; flex-direction: column; gap: var(--e-3); }
.pile-5 { display: flex; flex-direction: column; gap: var(--e-5); }
.rangee { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.rangee-contenu { flex: 1; min-width: 0; }
.ico-action { color: var(--cobalt); }
.bouton-dangereux { color: var(--erreur); }
.grille-blocs, .grille-etats { display: grid; gap: var(--e-4); }
.espace { flex: 1; }
.mt-2 { margin-top: var(--e-2); } .mt-3 { margin-top: var(--e-3); } .mt-4 { margin-top: var(--e-4); } .mt-5 { margin-top: var(--e-5); } .mt-6 { margin-top: var(--e-6); } .mt-8 { margin-top: var(--e-8); }
.mb-2 { margin-bottom: var(--e-2); } .mb-3 { margin-bottom: var(--e-3); } .mb-4 { margin-bottom: var(--e-4); } .mb-5 { margin-bottom: var(--e-5); } .mb-6 { margin-bottom: var(--e-6); }
.centre { text-align: center; }
.mobile-seulement { display: block; }
.desktop-seulement { display: none; }

/* ---------- Desktop ---------- */
@media (min-width: 64rem) {
  .mobile-seulement { display: none; }
  .desktop-seulement { display: block; }
  .page { padding-bottom: 0; }
  body:has(.dock.sans-onglets) .page { padding-bottom: 0; }

  html { scroll-padding-top: calc(var(--barre-haut) + 4rem); }
  .barre-haut {
    height: auto; flex-wrap: wrap; padding: 0;
    border-bottom: 2px solid var(--encre);
  }
  .barre-haut .barre-interne {
    width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge);
    display: flex; align-items: center; gap: var(--e-6); height: var(--barre-haut);
  }
  .barre-haut .wordmark { height: 2rem; }
  .barre-haut .recherche-haut { display: block; flex: 1; max-width: 36rem; }
  .barre-haut .actions { gap: var(--e-3); }
  .barre-haut .actions .bouton-icone { width: auto; padding: 0 .75rem; border-radius: var(--r-pilule); gap: .5rem; font-weight: 700; }
  .barre-haut .actions .pastille { position: static; margin-left: -.25rem; }
  .barre-haut .nav-rayons {
    display: flex; width: 100%; border-top: 1px solid var(--filet);
  }
  .barre-haut .nav-rayons ul { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); display: flex; gap: var(--e-6); }
  .barre-haut .nav-rayons a { display: inline-flex; align-items: center; min-height: 3rem; color: var(--encre); font-weight: 700; border-bottom: 3px solid transparent; }
  .barre-haut .nav-rayons a:hover { text-decoration: none; border-bottom-color: var(--filet-fort); }
  .barre-haut .nav-rayons a[aria-current="page"] { border-bottom-color: var(--cobalt); }

  .dock {
    left: 50%; right: auto; bottom: 1.5rem; transform: translateX(-50%);
    width: auto; min-width: 26rem; max-width: 40rem;
    border: 2px solid var(--encre); border-radius: var(--r-pilule);
    padding: 0 .5rem 0 1.5rem;
    box-shadow: 0 12px 32px rgba(22, 27, 61, .18);
  }
  .dock-onglets { display: none; }
  .dock-recherche { display: flex; width: 100%; height: auto; padding: 0; }
  .dock:has(.dock-recherche) { width: min(36rem, calc(100vw - 4rem)); min-width: 26rem; padding: .4rem; }
  .dock-action { padding: 0; height: 4.25rem; gap: var(--e-5); }
  .dock-action .contexte .valeur { font-size: var(--t-h3); }
  .dock-action .bouton-dock-compact { font-size: var(--t-h3); padding-inline: 1.75rem; }

  .section { padding: var(--e-12) 0; }
  .tuiles { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
  .tuiles .tuile { min-height: 13rem; padding: var(--e-6); }
  .tuiles .tuile img.produit { width: 8.5rem; }
  .tuiles .tuile-large { grid-column: span 2; }
  .tuiles .tuile-plein { grid-column: auto; }
  .ligne-produit { grid-template-columns: 4.5rem 1fr auto; align-items: center; }
  .ligne-produit .droite { grid-column: auto; flex-direction: column; align-items: flex-end; margin-top: 0; }
  body:has(.dock) .page { padding-bottom: 7rem; }
  .rayons { grid-template-columns: repeat(3, 1fr); }
  .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6) var(--e-4); }
  .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .defile > * { flex-basis: 14rem; }
  .pied .pied-grille { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .reassurance { grid-template-columns: repeat(4, 1fr); }
  .reassurance.une-colonne { grid-template-columns: 1fr; }
  .grille-blocs, .grille-etats { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--e-6); align-items: start; }
  .feuille {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(34rem, calc(100vw - 4rem)); max-height: 84vh;
    border-radius: var(--r-tuile);
    transform: translate(-50%, -46%) scale(.98); opacity: 0;
    transition: transform var(--d-feuille) var(--ressort), opacity var(--d-feuille);
  }
  .feuille.ouverte { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .feuille .poignee { display: none; }
  .toast { left: 50%; right: auto; bottom: 7rem; transform: translate(-50%, 1rem); min-width: 22rem; }
  .toast.visible { transform: translate(-50%, 0); }
  .deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--e-12); align-items: start; }
  .colonnes-guide > * + *, .colonnes-rayon > * + *, .deux-colonnes > * + * { margin-top: 0; }
  .deux-colonnes > .colonne-fixe { position: sticky; top: calc(var(--barre-haut) + 3rem + var(--e-6)); }
  .colonnes-fiche { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-12); align-items: start; }
  .colonnes-fiche > * + * { margin-top: 0; }
  .colonnes-fiche > .galerie { position: sticky; top: calc(var(--barre-haut) + 3rem + var(--e-6)); }
  .colonnes-guide { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--e-12); align-items: start; }
  .colonnes-guide > .sommaire { position: sticky; top: calc(var(--barre-haut) + 3rem + var(--e-6)); }
  .colonnes-rayon { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--e-10); align-items: start; }
  .colonnes-rayon > .filtres-colonne { position: sticky; top: calc(var(--barre-haut) + 3rem + var(--e-6)); }
  .etroit { max-width: 40rem; }
  .etroit-centre { max-width: 34rem; margin-left: auto; margin-right: auto; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .feuille { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}