/* ══════════ LA FICHE PRODUIT ══════════
   Chargé APRÈS socle.css, et seulement par les 45 fiches.

   POURQUOI un fichier séparé : socle.css habille l'accueil ET les
   fiches. Une retouche de page produit ne doit pas pouvoir repeindre
   la boutique entière — et deux personnes peuvent travailler en même
   temps sans se marcher dessus.

   Les couleurs viennent toutes de --u1/--u2/--u3/--u2f, la palette du
   rayon posée par body[data-univers]. Rien n'est écrit en dur : une
   fiche d'huile est dorée, une fiche de prière est verte, sans une
   seule règle de plus. */

/* ══ ① LE BOUTON PRINCIPAL ══
   .btn--plein apparaissait 135 fois dans le HTML (3 par fiche) et
   n'était défini dans AUCUN .css du projet : le bouton d'achat
   n'héritait que de la forme de .btn — ni fond, ni couleur. Il était
   donc invisible sur fond sombre. C'est la première chose que le
   client doit voir ; il porte maintenant la couleur du rayon et
   l'ombre pleine qui donne l'épaisseur d'une touche. */
.btn--plein{
  background:var(--u2);color:var(--nuit);
  box-shadow:0 8px 0 -1px var(--u2f),0 22px 40px -18px rgba(0,0,0,.85);
  transition:transform var(--t-survol) var(--e-sortie),
             box-shadow var(--t-survol) var(--e-doux);
}
@media (hover:hover) and (pointer:fine){
  .btn--plein:hover{transform:translateY(-3px);
    box-shadow:0 11px 0 -1px var(--u2f),0 30px 50px -18px rgba(0,0,0,.9)}
}
.btn--plein:active{transform:translateY(6px);
  box-shadow:0 2px 0 -1px var(--u2f),0 10px 20px -14px rgba(0,0,0,.9);
  transition-duration:var(--t-micro)}
.btn--plein[disabled]{opacity:.45;cursor:default;transform:none;
  box-shadow:0 4px 0 -1px var(--u2f)}
/* ÉPUISÉ (17/08) : posé par produit.js sur les boutons d'achat des 77
   fiches rupture:true, avec disabled + aria-disabled. Encre à .42, plus
   de main, plus de relief ni de soulèvement : un bouton qui ne peut
   rien promettre ne doit pas avoir l'air d'attendre un clic. */
.btn.est-epuise,.btn--plein.est-epuise{opacity:.42;cursor:default;
  transform:none;box-shadow:0 4px 0 -1px var(--u2f)}
@media (hover:hover) and (pointer:fine){
  .btn--plein.est-epuise:hover{transform:none;
    box-shadow:0 4px 0 -1px var(--u2f)}
}
.barre-achat .btn--plein.est-epuise{box-shadow:0 2px 0 -1px var(--u2f)}
/* Dans la barre collante il n'y a que 10 px de marge : l'ombre pleine
   de 8 px y serait rognée et le bouton paraîtrait coupé. */
.barre-achat .btn--plein{box-shadow:0 5px 0 -1px var(--u2f)}
.barre-achat .btn--plein:active{transform:translateY(4px);
  box-shadow:0 1px 0 -1px var(--u2f)}

/* ══ ② LA COLONNE D'ACHAT ══
   L'ordre de lecture ne se discute pas : titre, accroche, PRIX, délai,
   version, boutons. Tout ce qui décide de l'achat tient avant le pli ;
   la description part plus bas, dans sa propre section. */
@media (min-width:901px){
  .pachat{padding:clamp(20px,2.2vw,30px);border-radius:24px;
    background:linear-gradient(180deg,var(--b5),transparent 62%);
    border:1px solid var(--b10)}
}
.pachat h1{font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.015em;
  margin:.28em 0 .42em}

/* L'accroche : une phrase, pas un paragraphe. Elle est bornée à 46
   caractères de large pour ne jamais repousser le prix hors de l'écran. */
.pchapo{margin:0 0 20px;max-width:46ch;
  font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.55;color:var(--encre2)}
.pchapo[hidden]{display:none}

.pprix{font-size:clamp(2rem,4vw,2.7rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.1;margin:0 0 12px}

/* LE BANDEAU « ÉPUISÉ » (17/08) : posé par produit.js juste sous le
   prix, sur les 77 fiches rupture:true. Même gabarit que .pdelai —
   c'est une information de la même famille — mais la pastille est
   grise, pas de la couleur du rayon : ce bandeau n'invite à rien,
   il explique. Le prix au-dessus reste affiché : il est vrai. */
.pepuise{display:flex;gap:11px;align-items:flex-start;
  margin:0 0 20px;padding:11px 15px;border-radius:14px;max-width:46ch;
  background:var(--b5);border:1px solid var(--b10);
  font-size:.88rem;line-height:1.5;color:var(--encre2)}
.pepuise::before{content:"";flex:none;width:9px;height:9px;margin-top:.5em;
  border-radius:50%;background:var(--encre2);opacity:.55}

/* Le délai est un engagement, pas une mention légale : encadré, avec
   une pastille de la couleur du rayon, il se lit avant le bouton. */
.pdelai{display:flex;gap:11px;align-items:flex-start;
  margin:0 0 20px;padding:11px 15px;border-radius:14px;max-width:46ch;
  background:var(--b5);border:1px solid var(--b10);
  font-size:.88rem;line-height:1.5;color:var(--encre2);opacity:1}
.pdelai::before{content:"";flex:none;width:9px;height:9px;margin-top:.5em;
  border-radius:50%;background:var(--u2)}

.choix{margin:0 0 22px}
.choix .tt{margin:0 0 10px}
.choix__pastilles button{min-height:46px;padding:0 15px;font-size:.88rem;
  border-color:var(--b20);transition:border-color var(--t-survol) var(--e-doux),
  background-color var(--t-survol) var(--e-doux)}
.choix__pastilles button[aria-pressed="true"]{border-color:var(--u2);
  background:var(--b10);box-shadow:inset 0 0 0 1px var(--u2)}
@media (hover:hover) and (pointer:fine){
  .choix__pastilles button:hover{border-color:var(--b50)}
}

/* Le bouton d'achat prend toute la largeur et se tient seul sur sa
   ligne : sur un téléphone, deux boutons côte à côte se touchent du
   pouce par erreur. */
.pboutons{display:grid;gap:12px;margin:0 0 18px}
.pboutons .btn{width:100%;flex:none;min-height:60px}
.pboutons #bAcheter{min-height:66px;font-size:1.04rem}

.pport{margin:0 0 20px;max-width:46ch;font-size:.92rem;line-height:1.55;
  color:var(--encre2);opacity:1}
.pport b{color:var(--encre);font-weight:600}

/* MESURE DU 16/08 : produit.js replie la bande de vignettes quand la
   galerie n a qu une photo (zoneMinis.hidden). Or socle.css pose
   display:flex sur la CLASSE, et une regle d auteur bat le
   [hidden]{display:none} du navigateur : la vignette solitaire — la
   meme image que la grande, en 56 px — restait affichee sous la photo.
   L attribut redevient souverain, aux deux largeurs d ecran. */
.vitrine__minis[hidden]{display:none}

/* MEME PIEGE, MEME REMEDE, 17/08 : #pvNote (l aveu « photo de la
   version non publiee ») sort du HTML avec `hidden`, et produit.js ne
   le retire que s il a vraiment quelque chose a avouer. Or socle.css
   pose display:flex sur .vitrine__note : la regle d auteur battait le
   [hidden] du navigateur, et un bandeau d information VIDE s affichait
   sous les photos de toutes les fiches sans aveu. !important, car ce
   `hidden` doit gagner meme contre une feuille chargee apres. Quand
   produit.js retire l attribut, cette regle ne matche plus : le
   display:flex du socle reprend et la fiche AVEC note l affiche. */
.vitrine__note[hidden]{display:none!important}

/* ══ ③ CE QU'ON PROMET, ET RIEN D'AUTRE ══
   Deux lignes, vérifiables toutes les deux : le paiement passe bien
   par la page de Stripe (api/boutique-paiement.php) et l'adresse de
   contact est celle du pied de page. Aucun badge inventé. */
.prassure{list-style:none;margin:0;padding:16px 0 0;display:grid;gap:11px;
  border-top:1px solid var(--b10)}
.prassure li{display:grid;grid-template-columns:20px 1fr;gap:11px;
  align-items:start;font-size:.87rem;line-height:1.5;color:var(--encre2)}
.prassure svg{width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--u2);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prassure a{color:var(--encre);text-underline-offset:3px}

.pverslire{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  margin-top:6px;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--encre2);text-decoration:none}
.pverslire::after{content:"↓";font-size:1rem;transition:transform var(--t-survol) var(--e-sortie)}
@media (hover:hover) and (pointer:fine){
  .pverslire:hover{color:var(--encre)}
  .pverslire:hover::after{transform:translateY(3px)}
}

.psobre{margin:18px 0 0;font-size:.84rem;color:var(--encre2);opacity:.7}

/* ══ ④ LA DESCRIPTION ══
   Avant : trois phrases entières coiffées d'une coche verte, au milieu
   de la colonne d'achat — une liste de bénéfices qui n'en était pas
   une, et dix phrases du fournisseur jetées. Maintenant : une section
   à elle, le texte à gauche, les points courts à droite. */
.pdesc{width:min(94vw,1280px);margin:0 auto;
  padding:clamp(34px,6vh,72px) 0;border-top:1px solid var(--b10)}
.pdesc__h{font-family:var(--f-titre);font-size:clamp(1.9rem,4.6vw,3.2rem);
  line-height:.94;letter-spacing:-.02em;text-transform:uppercase;
  transform:skewX(-6deg);transform-origin:left bottom;
  margin:0 0 clamp(20px,3vh,34px)}

.pdesc__grille{display:grid;gap:clamp(22px,3vw,48px);
  grid-template-columns:minmax(0,1fr)}
/* .solo = ce produit n'a aucun point court. Sans ce garde, la grille
   garderait une colonne vide à droite et le texte serait comprimé. */
@media (min-width:900px){
  .pdesc__grille:not(.solo){grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr)}
}

.pdesc__texte p{margin:0 0 1.05em;max-width:66ch;
  font-size:clamp(1rem,1.2vw,1.07rem);line-height:1.78;color:var(--encre2)}
/* Le premier paragraphe est la porte d'entrée : un cran plus grand et
   en blanc franc, le reste suit en gris. */
.pdesc__texte p:first-child{font-size:clamp(1.06rem,1.5vw,1.2rem);
  line-height:1.64;color:var(--encre)}
.pdesc__texte p:last-child{margin-bottom:0}

.pdesc__cote{align-self:start;padding:clamp(18px,2.2vw,26px);
  border-radius:20px;background:var(--b5);border:1px solid var(--b10)}
.pdesc__cote[hidden]{display:none}
@media (min-width:900px){ .pdesc__cote{position:sticky;top:88px} }
.pdesc__cote .tt{margin:0 0 14px;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--u2)}

/* Les coches reprennent la couleur du rayon et cessent d'être grisées :
   une liste à .85 d'opacité se lit comme une note de bas de page. */
.pdesc .bons{margin:0;gap:13px}
.pdesc .bons li{grid-template-columns:20px 1fr;gap:11px;
  font-size:.93rem;line-height:1.5;color:var(--encre2);opacity:1}
.pdesc .bons svg{width:20px;height:20px;margin-top:2px;stroke:var(--u2);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pdesc .bons:empty{display:none}

/* D'où vient ce texte. On le dit — c'est moins vendeur qu'une prose
   maison, mais c'est vrai, et c'est ce qui nous distingue. */
.pdesc__src{margin:clamp(22px,3vh,34px) 0 0;font-size:.8rem;
  color:var(--encre2);opacity:.7}
.pdesc__src[hidden]{display:none}

/* ══ ⑤ « PRENEZ AUSSI » ══ */
.pvoisins h2{font-family:var(--f-titre);font-size:clamp(1.6rem,3.6vw,2.4rem);
  line-height:.96;letter-spacing:-.02em;text-transform:uppercase;
  transform:skewX(-6deg);transform-origin:left bottom;margin:0 0 22px}
.pcarte button{transition:border-color var(--t-survol) var(--e-doux),
  background-color var(--t-survol) var(--e-doux),color var(--t-survol) var(--e-doux)}
@media (hover:hover) and (pointer:fine){
  .pcarte:hover button{border-color:var(--u2);background:var(--u2);color:var(--nuit)}
}

/* ══ ⑥ LES AVIS ══ */
.pavis h2{font-family:var(--f-titre);font-size:clamp(1.6rem,3.6vw,2.4rem);
  line-height:.96;letter-spacing:-.02em;text-transform:uppercase;
  transform:skewX(-6deg);transform-origin:left bottom;margin:0 0 20px}

/* Le clavier doit voir où il est, partout et pas seulement sur .btn. */
.choix__pastilles button:focus-visible,.vitrine__minis button:focus-visible,
.pcarte button:focus-visible,.pverslire:focus-visible{
  outline:3px solid var(--or-clair);outline-offset:3px}

/* Rien ne bouge pour qui a demandé le calme. */
@media (prefers-reduced-motion:reduce) and (min-width:999999px) /* desarme 17/08 : data-calme est le seul interrupteur */{
  .btn--plein,.pcarte button,.pverslire::after,.choix__pastilles button{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   ⑦ LA FICHE SUR TÉLÉPHONE — tout ce qui suit ne concerne QUE l'écran
   étroit. Mesuré au navigateur en 375 × 812, avant d'écrire une ligne :

     · en-tête collante ......... 114 px, soit 14 % de l'écran, en
                                  permanence, dont 55 px de recherche ;
     · photo .................... 186 → 626 ;
     · TITRE .................... 677  (fiche simple) / 903 (à variantes)
     · PRIX ..................... 784 / 1037   — hors écran
     · BOUTON « Précommander » .. 917 / 1322   — hors écran
     · barre d'achat collante ... 740 → 812, et elle RECOUVRE le pied de
                                  page : le lien « Écrivez-nous » (751 →
                                  769) était entièrement dessous, donc
                                  intouchable, car body n'avait aucun
                                  padding-bas pour la compenser ;
     · ancre #description ....... arrivait 114 px sous l'en-tête collante,
                                  son titre « Ce que c'est » caché ;
     · 12 textes sous 13 px, 6 cibles tactiles sous 44 px.

   Le client voyait donc une photo, et rien de ce qui décide d'un achat.
   ══════════════════════════════════════════════════════════════════ */

/* ── ⑦.a L'EN-TÊTE, DEUX LIGNES AU LIEU DE TROIS DOIGTS D'ÉCRAN ──
   Sous 760 px l'en-tête empile la barre (menu · logo · panier) et le
   champ de recherche : 58 + 10 + 43 = 114 px collés en haut. On serre
   les deux lignes sans rien retirer — et le champ de recherche gagne au
   passage ses 44 px de hauteur tactile, qu'il n'avait pas (43,2). */
@media (max-width:759px){
  .tete__d{min-height:52px}
  .cherche{padding:0 0 8px}
  .cherche input{min-height:44px;padding:10px 14px;font-size:.9rem}
  /* 11,2 px pour le mot « Panier » : illisible. Le compteur suit. */
  #pOuvrir{font-size:.82rem}
  #pCompte{font-size:.82rem;min-width:22px;height:22px}
}

@media (max-width:900px){

/* ── ⑦.b LE FIL D'ARIANE : LISIBLE ET TOUCHABLE ──
   Il était à 12,8 px et .55 d'opacité, avec des liens de 17 px de haut :
   personne ne les atteint au pouce. On le remonte au-dessus du plancher
   de 13 px et on donne aux deux liens la hauteur d'un doigt. */
  .fil{margin:6px auto 0;font-size:.84rem;opacity:.78}
  /* min-width : « Huiles » ne faisait que 40,4 px de large une fois la
     hauteur corrigée — un doigt fait 44 px dans les deux sens. */
  .fil a{display:inline-block;padding:13px 6px;min-width:44px;
    text-align:center;text-decoration:none}

/* ── ⑦.c L'ORDRE DE LECTURE, REMIS À L'ENDROIT ──
   Le HTML sert d'abord la vitrine, puis la colonne d'achat : sur un
   écran large les deux sont côte à côte, donc l'ordre ne se voit pas.
   Sur un téléphone elles s'empilent, et le titre tombait à 677 px, le
   prix à 784, le bouton à 917 — trois écrans de pouce pour savoir ce
   qu'on regarde et ce que ça coûte.

   `display:contents` fait disparaître la BOÎTE de .pachat sans toucher
   ni au HTML ni aux sélecteurs : ses enfants deviennent les cases de la
   grille .pfiche, et on peut alors glisser la photo entre le prix et le
   reste. Ordre obtenu : titre · prix · PHOTO · le reste.

   `order:20` par défaut sur tous les enfants : si une fiche portait un
   bloc que je n'ai pas prévu, il se rangerait à la fin — jamais devant
   le titre. (Compté avant d'écrire : les 45 fiches n'ont que les onze
   enfants nommés ci-dessous.) */
  .pfiche{gap:0;padding:10px 0 clamp(30px,5vh,60px)}
  .pachat{display:contents}
  /* MESURE DU 16/08 : le bloc des etapes (#etapesProduit, pose par le
     script en ligne des 45 fiches, enfant de .pfiche et non de .pachat)
     n avait AUCUN ordre : une case de grille vaut 0, il passait DEVANT
     le titre. Releve : etapes 193 -> 670, titre repousse a 670, prix a
     779 (coupe au pli), photo a 830, bouton a 1703. Le client ouvrait
     la fiche sur un carrousel d utilisation, pas sur le produit.
     La meme garde que .pachat>* couvre desormais tout enfant de la
     grille ; les etapes se rangent en 13, sous le bloc d achat,
     juste avant la description. */
  .pfiche>*{order:20}
  #etapesProduit{order:13}
  .pachat>*{order:20}
  .pachat>h1{order:2}
  .pachat>.pprix{order:3}
  /* Le bandeau « Épuisé » (produit.js, fiches rupture:true) suit le
     prix qu il explique : même rang 3, et le DOM — où produit.js le
     pose juste APRÈS .pprix — les départage. Sans cet ordre, la garde
     `.pachat>*{order:20}` l enverrait en fin de page, loin du prix. */
  .pachat>.pepuise{order:3}
  .vitrine{order:4;margin:2px 0 20px}
  /* SECONDE MESURE, 10/08. L accroche etait ici, en 5, entre la photo et
     le choix du coloris : 51 px de prose qui repoussaient d autant le
     seul geste qui compte. Releve avant : sur une fiche a variantes le
     bouton « Precommander » tombait a 1325 px du haut — plus d un ecran
     et demi sous le pli. Le coloris remonte donc contre la photo (c est
     lui qui la change : on choisit en regardant), le bloc d achat suit,
     et l accroche descend derriere le bouton. Elle n est pas perdue :
     le titre et la photo disent deja de quoi il s agit, et « Ce que
     c est » l explique en entier trente lignes plus bas. */
  .pachat>.choix{order:5}
  .pachat>.pdelai{order:6}
  .pachat>.pboutons{order:7}
  .pachat>.pport{order:8}
  .pachat>.pchapo{order:9}
  .pachat>.prassure{order:10}
  .pachat>.pverslire{order:11}
  .pachat>.psobre{order:12}
  /* Le rayon était écrit deux fois de suite — « Prière » dans le fil
     d'Ariane, « Prière » encore en surtitre, à 11,5 px. On garde celui
     du fil, qui est un lien, et on retire le doublon muet. */
  .pachat>.tt{display:none}

  .pachat h1{font-size:clamp(1.5rem,6.4vw,2rem);margin:0 0 .3em}
  .pprix{font-size:clamp(1.9rem,8.4vw,2.4rem);margin:0 0 14px}
  .pchapo{margin:0 0 20px;font-size:1rem;line-height:1.6}

/* ── ⑦.d LA VITRINE ──
   Les vignettes tenaient 90 px de haut : autant de repoussé pour le
   texte. 68 px suffisent à reconnaître une photo, et restent au-dessus
   des 44 px du doigt. Elles glissent latéralement quand il y en a
   plusieurs plutôt que de passer à la ligne. */
  /* Mesure du 10/08 : la grande photo occupait 254 → 695, soit 441 px,
     et poussait la bande de vignettes a 705 → 773. Or la barre d achat
     collante commence a 739 : il ne restait que 34 px de vignette
     touchables, sous les 44 px du doigt. On plafonne la photo a 46 % de
     la hauteur d ecran — 373 px sur un 812, elle garde la vedette — et
     la bande repasse au-dessus de la barre.
     Les 45 grandes photos ont ete mesurees fichier par fichier : toutes
     900 x 1125, rapport 0,80. Hauteur plafonnee, largeur et hauteur
     laissees libres : le rapport ne bouge pas, rien n est deforme. */
  /* TROISIEME MESURE, 16/08 : a 46 % la bande de vignettes finissait a
     755 quand la barre d achat commence a 716 — 31 px touchables, sous
     les 44 du doigt. A 41 % (333 px sur un 812), la bande [645, 715]
     passe entiere au-dessus de la barre, et la photo garde la vedette. */
  #pvGrande{border-radius:16px;width:auto;height:auto;max-width:100%;
    max-height:41vh;justify-self:center}
  .vitrine{gap:10px}
  /* La photo est centree, les vignettes doivent l etre aussi. « safe »
     protege le seul article a 13 photos : quand la bande deborde, le
     centrage est abandonne plutot que de pousser la premiere vignette
     hors d atteinte. Un navigateur qui ignore « safe » jette la ligne
     entiere et garde l alignement a gauche : rien ne casse. */
  .vitrine__minis{justify-content:safe center;
    gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .vitrine__minis::-webkit-scrollbar{display:none}
  .vitrine__minis button{flex:none;width:56px;height:68px;border-radius:9px}
  .vitrine__minis button[aria-current="true"]{border-color:var(--u2);
    box-shadow:inset 0 0 0 1px var(--u2)}

/* ── ⑦.e LES PASTILLES DE COLORIS ──
   46 px de haut, 8 px entre elles, et pour tout signe d'élection un
   cadre un peu plus clair : au pouce on ne sait pas laquelle est prise.
   On les grossit, on les écarte, et l'élue porte une coche — un signe,
   pas seulement une nuance de gris.
   ⚠ La mécanique qui change la photo (poserGalerie, produit.js) tient à
   l'attribut aria-pressed : on le lit, on n'y touche pas. */
  .choix{margin:0 0 24px}
  .choix .tt{font-size:.84rem;letter-spacing:.12em;opacity:.8;margin:0 0 12px}
  /* SECONDE MESURE, 10/08 — la guirlande. En flex a la ligne, les six
     coloris du tapis pliable faisaient 201, 170, 169, 184, 129 et 186 px
     de large sur QUATRE rangs : 252 px de haut, aucune pastille de la
     taille d une autre, et l oeil ne peut pas balayer une colonne qui
     n existe pas. Deux colonnes egales : trois rangs, 188 px, chaque
     cible identique et bien plus large que les 44 px du doigt. */
  .choix__pastilles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px}
  .choix__pastilles button{min-height:56px;padding:0 12px;font-size:.95rem;
    border-width:2px;border-radius:16px;gap:8px;justify-content:center;
    text-align:center;line-height:1.2}
  .choix__pastilles button i{font-size:.85rem;opacity:.75}
  /* Le prix repete sur chaque pastille : sur les 7 articles a variantes,
     5 portent le MEME prix partout — six fois « 32,90 € » en petit sous
     un prix deja ecrit en 31 px trois lignes plus haut. produit.js pose
     .choix--unprix dans ce cas, .choix--multiprix quand les prix
     different. La ou ils different, ils RESTENT : rien n est masque qui
     ne soit ecrit ailleurs, en plus grand. Et sans JavaScript aucune
     classe n est posee : tous les prix s affichent. */
  .choix--unprix .choix__pastilles i{display:none}
  /* Prix differents : ils restent, mais SOUS le nom, pas a cote. Sur une
     ligne, « 500 ml 57,90 € » forçait la pastille pleine largeur — cinq
     rangs, 363 px, et le bouton d achat repousse a 1370. En deux lignes
     dans la meme case, les deux colonnes tiennent : trois rangs. */
  .choix--multiprix .choix__pastilles button{flex-wrap:wrap;padding:0 10px;
    gap:1px 8px}
  .choix--multiprix .choix__pastilles button i{flex-basis:100%;
    font-size:.9rem;opacity:.85}
  /* L etat choisi : le cadre dore ne suffisait pas au pouce. Coche +
     double liseré + fond teinte — trois signes, pas une nuance de gris. */
  .choix__pastilles button[aria-pressed="true"]{border-color:var(--u2);
    background:var(--b10);box-shadow:inset 0 0 0 2px var(--u2)}
  .choix__pastilles button[aria-pressed="true"]::before{content:"\2713";
    font-weight:700;color:var(--u2);font-size:1rem;line-height:1}
  .choix--multiprix .choix__pastilles button[aria-pressed="true"]::before{
    margin-inline-end:2px}

/* ── ⑦.f LE BOUTON ET SA DATE ──
   Une vente salam se paie d'avance contre une chose décrite ET une date
   écrite : la date ne peut pas être une mention grise sous le bouton.
   On l'encadre, et la date elle-même passe à la ligne, en blanc franc. */
  .pboutons{gap:14px;margin:0 0 16px}
  .pboutons #bAcheter{min-height:60px}
  .pboutons .btn{min-height:54px}
  .pport{margin:0 0 22px;padding:13px 15px;border-radius:14px;
    background:var(--b5);border:1px solid var(--b10);
    font-size:.92rem;line-height:1.5}
  .pport b{display:block;margin-top:4px;font-size:1rem;color:var(--encre)}

/* ── ⑦.g LA BARRE D'ACHAT COLLANTE ──
   1) Elle RECOUVRAIT le pied de page : mesuré, le lien « Écrivez-nous »
      était à 751 → 769 et la barre à 740 → 812. On réserve sa hauteur
      en bas du document, une bonne fois.
   2) Elle ne portait que le prix et le bouton. Sur téléphone c'est CE
      bouton-là qu'on touche — le vrai est 900 px plus bas — donc c'est
      là que la date d'arrivée doit être écrite. produit.js l'y pose ;
      la barre passe en grille pour l'accueillir sans grandir : le
      bouton occupe les deux lignes de la colonne de droite. */
  /* 3) SECONDE MESURE, 10/08 : la barre porte maintenant trois lignes
        quand l article a des versions. Remesuree : 70 px sans coloris,
        80 px avec. La reserve du bas passe de 84 a 96 px pour couvrir
        le cas ou un nom de version passerait a la ligne. Mieux vaut
        trois centimetres de noir en fin de page qu un pied de page
        recouvert — c est la faute qu on avait deja payee. */
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .barre-achat.on{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:14px;row-gap:2px;align-items:center;padding:10px 14px
    calc(10px + env(safe-area-inset-bottom))}
  /* line-height serre : le prix heritait d un interligne de 1,65 et
     prenait 31 px pour 19 px de lettres. Dix pixels rendus a l ecran,
     sur une barre qui ne quitte jamais le bas. */
  .barre-achat b{grid-column:1;grid-row:1;align-self:end;font-size:1.18rem;
    line-height:1.15}
  /* CE QU ON ACHETE, sur le bouton qu on touche vraiment. Sur une fiche
     a variantes le vrai bouton reste loin sous le pli : celui de la
     barre part avec le coloris par defaut. Il ne peut pas rester muet —
     produit.js ecrit ici le coloris retenu et le corrige a chaque
     pastille touchee. Le plus long du catalogue (« BLEU TURQUOISE »)
     mesure 108 px pour une colonne de 178 : il tient sur une ligne. */
  .barre-achat__v{grid-column:1;grid-row:2;align-self:center;
    font-size:.84rem;line-height:1.25;font-weight:600;color:var(--encre)}
  .barre-achat__d{grid-column:1;grid-row:3;align-self:start;
    font-size:.82rem;line-height:1.25;color:var(--encre2)}
  /* Sans coloris la barre n a que deux lignes : la date remonte au rang
     2, sinon le rang 3 laisserait un vide sous le prix. */
  .barre-achat:not(.barre-achat--v) .barre-achat__d{grid-row:2}
  .barre-achat .btn{grid-column:2;grid-row:1/4;min-height:52px;padding:0 20px;
    font-size:.98rem}

/* ── ⑦.h LES ANCRES SOUS L'EN-TÊTE COLLANTE ──
   « Lire la description » sautait bien à la bonne section — 114 px trop
   haut : son titre passait derrière l'en-tête. Mesuré : 114 px cachés. */
  .pdesc,.pavis,.pvoisins,#description,#avis{scroll-margin-top:118px}

/* ── ⑦.i LA DESCRIPTION ──
   Le brief demande 60 à 70 signes par ligne. Mesuré dans la page : à
   16,96 px un signe occupe 8,4 px, la colonne fait 353 px — donc 42
   signes. Pour en tenir 65 il faudrait descendre la police à 10,9 px,
   sous le plancher de lisibilité. On garde donc 16 px (≈ 45 signes,
   l'usage du téléphone) et on travaille ce qui reste : interligne plus
   aéré, respiration entre paragraphes, premier paragraphe détaché.
   REMESURÉ le 10/08 : à 16 px un signe occupe 7,91 px sur 352,5 px de
   colonne, soit 45 signes ; le premier paragraphe, qui était encore à
   16,96 px, en tenait 42. Ramené à 16 px comme les autres, il en tient
   45 lui aussi. Les 60 demandés restent hors d'atteinte au-dessus du
   plancher de 13 px : c'est une limite de l'écran, pas un choix. */
  .pdesc{padding:clamp(26px,4vh,40px) 0}
  .pdesc__texte p{font-size:1rem;line-height:1.72;margin:0 0 1.15em}
  /* SECONDE MESURE, 10/08 : le premier paragraphe etait encore a
     16,96 px, soit 45 signes par ligne quand les suivants en tiennent
     47. On le ramene a 16 px comme les autres — il reste detache par sa
     couleur, du blanc franc contre le gris du reste. Un paragraphe se
     distingue aussi bien par le ton que par la taille, et la ligne y
     gagne deux signes. */
  .pdesc__texte p:first-child{font-size:1rem;line-height:1.72;margin-bottom:1.15em}
  .pdesc__grille{gap:26px}
  .pdesc__cote{padding:18px;border-radius:16px}
  .pdesc__cote .tt{font-size:.82rem;letter-spacing:.14em}
  .pdesc .bons li{font-size:.95rem}
  .pdesc__src{font-size:.84rem;margin-top:22px}

/* ── ⑦.j LE PLANCHER DES 13 PX ET CELUI DES 44 PX ──
   Relevé avant correction : 12 textes calculés sous 13 px et 6 cibles
   sous 44 px de haut. Un lien noyé dans une phrase ne peut pas prendre
   44 px sans casser la ligne : inline-flex le lui donne en hauteur
   seulement, la phrase reste une phrase. */
  .pverslire{font-size:.84rem;min-height:48px}
  .psobre{font-size:.84rem;opacity:.75}
  .prassure li{font-size:.9rem}
  .prassure a,.ppied a{display:inline-flex;align-items:center;min-height:44px}
  .ppied{font-size:.9rem;opacity:.75}
  .pcarte button{font-size:.82rem;min-height:46px}
  .pcarte span{font-size:.92rem}
  .pcarte b{font-size:.95rem;opacity:.85}
  .pavis__form summary{font-size:.86rem}
  .pavis__note,.pavis__merci{font-size:.84rem}
  .pavis__un cite{font-size:.84rem;opacity:.7}
  /* Le panneau du menu : ses titres de rayon étaient à 10,9 px. */
  .menu h3{font-size:.82rem}
  .menu a.art i{font-size:.86rem}
  .menu a.art span{font-size:.92rem}
  /* SECONDE MESURE, 10/08 — deux textes echappaient encore au plancher,
     tous deux dans le tiroir du panier, qui est present sur les 45
     fiches : « Total » a 12,16 px et « On ajoute ceci ? » a 10,56 px.
     C est le moment ou l on regarde ce qu on va payer : c est le
     dernier endroit ou plisser les yeux. */
  #panier .p-total span{font-size:.84rem}
  #panier #pIdee h4{font-size:.84rem}
  /* TROISIEME MESURE, 16/08 — le bloc des etapes est arrive sur les 45
     fiches avec ses propres petits corps : le surtitre « 3 etapes » a
     10,88 px et les numeros 01-05 a 10,56 px (etapes-vue.css, .68rem et
     .66rem). L identifiant force le passage devant la regle
     .etv[data-colonne="1"] .etv__num de etapes-vue.css, plus lourde
     qu une simple classe. */
  #etapesProduit .etv__sur{font-size:.84rem}
  #etapesProduit .etv__num{font-size:.82rem}
}