/* ════════════════════════════════════════════════════════════════
   LE MODE D’EMPLOI — L’APPARENCE.  boutique/mode-emploi.css
   À charger APRÈS presse.css : cette feuille consomme les jetons de
   la rotative (--papier, --encre, --vermillon, --u1/--u2/--u3,
   --f-titre / --f-corps / --f-mono, --b20) et n’en invente aucun.
   Si presse.css manque, tout retombe sur les valeurs du socle : plus
   terne, mais entier.

   LE PARTI PRIS : ce n’est pas une carte, c’est une PAGE DE JOURNAL.
   Pleine largeur, filet d’encre du rayon en tête, colonnes séparées
   par des filets d’un pixel, angles vifs partout (border-radius:0),
   aucune ombre douce, aucun dégradé. Le lecteur doit avoir
   l’impression d’ouvrir la double page « mode d’emploi » d’un manuel
   imprimé, pas de survoler un carrousel.

   CE QUI BOUGE, ET RIEN D’AUTRE :
   · l’encre de la jauge — `transform: scaleX()`, jouée par
     mode-emploi.js via l’API Web Animations, donc sur le compositeur ;
   · le volet actif — `transform: translateY(-4px)`.
   Pas un `width`, pas un `top`, pas un `filter`, pas un
   `backdrop-filter`. La couleur du numéro et du titre change avec le
   volet actif : c’est un repaint de trois mots toutes les cinq
   secondes, pas une animation.

   L’INTERRUPTEUR est :root[data-calme="1"], et lui seul. Aucun bloc
   @media (prefers-reduced-motion) ici : il est désarmé dans tout le
   projet. socle.css coupe déjà toute transition sous data-calme ; on
   ajoute plus bas ce qu’il ne peut pas deviner — faire disparaître la
   jauge, qui n’aurait plus aucun sens figée à mi-course.
   ════════════════════════════════════════════════════════════════ */

/* ══ 1. LA SECTION — BORD À BORD ══
   Pas de largeur maximale sur la section elle-même : c’est le filet
   de tête, en encre pleine du rayon, qui doit traverser l’écran d’un
   bord à l’autre. La lecture, elle, reste tenue par .mem__d. */
/* 17/08 : l'hôte est inséré DANS la grille à deux colonnes de la fiche
   (après #etapesProduit, enfant de main.pfiche). Sans cette règle, la
   section de 94vw tombait dans UNE cellule de ~600 px : selon la
   colonne tirée au sort, elle passait par chance (gauche) ou crevait
   l'écran de 625 px (droite — mesuré sur zamzam et argan). Elle doit
   traverser les deux colonnes. */
.pfiche > #modeEmploi{grid-column:1/-1}

.mem{
  position:relative;
  width:100%;
  margin:clamp(38px,6vh,80px) 0 0;
  padding:0 0 clamp(38px,6vh,80px);
  border-top:8px solid var(--u2,#F0A830); /* le filet d’encre du rayon */
  border-radius:0;
  /* Replis en dur (17/08) : --papier et --u2 ne vivent que dans
     presse.css — s'il manquait un jour, la section resterait lisible. */
  background:var(--papier,#F2ECE0);
  color:var(--encre,#141210);
}

.mem__d{
  width:min(94vw,1280px);
  margin:0 auto;
}

/* ══ 2. LA TÊTE ══ */
.mem__tete{
  padding:clamp(24px,3.4vh,44px) 0 clamp(18px,2.4vh,30px);
}
.mem__oeil{
  margin:0 0 10px;
  font-family:var(--f-mono);
  font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--u1);
}
.mem__h{
  margin:0;
  font-family:var(--f-titre);font-weight:800;
  font-size:clamp(1.9rem,5.2vw,3.5rem);
  line-height:.92;letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--encre);
}
.mem__sous{
  margin:clamp(12px,1.6vh,18px) 0 0;
  max-width:62ch;
  font-family:var(--f-corps);
  font-size:clamp(1rem,1.25vw,1.12rem);
  line-height:1.6;
  color:var(--encre2);
}

/* ══ 3. LA GRILLE ══
   Sur téléphone : une colonne, un écart réel entre les volets — la
   flèche vit dedans. Sur grand écran : autant de colonnes que de
   volets, écart NUL, et ce sont les filets d’un pixel qui séparent,
   comme les colonnes d’un journal. */
.mem__grille{
  list-style:none;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,4.5vw,32px);
  margin:0;padding:0;
}

.mem__volet{
  position:relative;
  padding:clamp(18px,2.2vw,28px) 0 0;
  border-radius:0;
  /* Le seul mouvement du volet : il se soulève. */
  transform:translateY(0);
  transition:transform 220ms cubic-bezier(.16,1,.3,1);
}
.mem__volet.est-actif{ transform:translateY(-4px); }

/* ══ 4. LA JAUGE — le filet de tête du volet ET la barre des 5 s ══
   Le rail gris est toujours peint : c’est lui qui aligne les volets
   les uns avec les autres. Seule l’encre vermillon avance dedans, et
   uniquement sur le volet actif. Un volet dont la jauge est vide n’a
   pas l’air cassé — il a l’air d’attendre son tour, ce qui est vrai. */
.mem__jauge{
  position:absolute;top:0;left:0;right:0;
  height:3px;
  background:var(--b20);
  overflow:hidden;
}
.mem__jauge i{
  display:block;height:100%;
  background:var(--vermillon);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;      /* la seule propriété que l’on anime */
}

/* ══ 5. LE NUMÉRO ══
   C’est un vrai <button> : il porte l’accès clavier de toute la
   section. On lui retire son costume de bouton, jamais son rôle.

   POURQUOI --u1 AU REPOS ET PAS --u2 : mesuré sur la fiche « enfants »,
   dont l’encre graphique --u2 (#FF6B4A) est presque le vermillon
   (#E8380D). Les cinq numéros paraissaient tous actifs : la mise en
   avant ne se voyait plus. --u1 est l’encre SOMBRE du rayon dans les
   neuf univers — violet, vert bouteille, bleu nuit, bordeaux — donc
   l’écart avec le vermillon vif est franc partout, et l’identité du
   rayon reste dans le chiffre. */
.mem__num{
  display:block;
  margin:0 0 clamp(10px,1.4vh,16px);
  padding:0;border:0;background:none;
  font-family:var(--f-titre);font-weight:800;
  font-size:clamp(2.1rem,3.2vw,3.2rem);
  line-height:.8;letter-spacing:-.04em;
  color:var(--u1);
  cursor:pointer;
  /* 17/08 : plus de transition:color — la règle du projet n'anime que
     transform et opacity ; le chiffre change de couleur d'un coup. */
  position:relative;
}
/* La cible du doigt fait 44 px même quand le chiffre en fait 33. */
.mem__num::after{content:'';position:absolute;left:-8px;right:-8px;
  top:50%;height:44px;transform:translateY(-50%)}
.mem__volet.est-actif .mem__num{ color:var(--vermillon); }
/* Le contour de focus reste VISIBLE et carré : c’est un journal, pas
   un formulaire. On ne supprime jamais l’anneau — on le dessine. */
.mem__num:focus-visible{
  outline:2px solid var(--vermillon);
  outline-offset:4px;
}

/* ══ 6. LE TEXTE DU VOLET ══
   Le titre en police de titre, le corps en Georgia : la même paire
   que le reste du journal. Aucun volet n’est grisé — « que ça soit
   tout visible » était la demande, et un texte à 55 % d’opacité n’est
   pas visible, il est deviné. */
.mem__t{
  margin:0 0 .55em;
  font-family:var(--f-titre);font-weight:800;
  font-size:clamp(1rem,1.35vw,1.18rem);
  line-height:1.1;letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--encre);
}
.mem__volet.est-actif .mem__t{ color:var(--u1); }

.mem__p{
  margin:0;
  max-width:44ch;
  font-family:var(--f-corps);
  font-size:clamp(.94rem,1.05vw,1rem);
  line-height:1.66;
  color:var(--encre2);
}

/* ══ 7. LES FLÈCHES ══
   Deux traits d’encre du rayon, tournés de 45° : une forme
   géométrique, jamais un dessin. Sur téléphone elles pointent vers le
   bas, dans l’écart entre deux volets ; sur grand écran vers la
   droite, dans la marge du volet, juste avant le filet.
   Le dernier volet n’en porte pas : il n’y a rien après. */
.mem__volet::after{
  content:'';position:absolute;pointer-events:none;
  width:10px;height:10px;
  /* 17/08 : --u2 mesurée entre 2,14:1 et 3,72:1 sur papier selon
     l'univers — trop peu pour un trait de 2 px. --u1, l'encre sombre
     du rayon, tient 5,7:1 à 10:1 partout (même choix que .mem__num). */
  border-top:2px solid var(--u1);
  border-right:2px solid var(--u1);
}
.mem__volet:last-child::after{ content:none; }

/* Téléphone : sous le volet, au milieu, pointe en bas. */
.mem__volet::after{
  left:50%;bottom:calc(clamp(24px,4.5vw,32px) / -2 - 5px);
  margin-left:-5px;
  transform:rotate(135deg);
}

/* ══ 8. LE PIED ══ */
.mem__note{
  margin:clamp(24px,3.2vh,38px) 0 0;
  padding-top:clamp(14px,1.8vh,20px);
  border-top:1px solid var(--b20);
  font-family:var(--f-mono);
  font-size:.7rem;line-height:1.6;
  letter-spacing:.02em;
  /* --encre2 et pas --encre3 : MESURÉ sur papier, l’encre la plus
     pâle donne 3,58:1 à 11 px, sous la barre des 4,5:1. Cette ligne
     dit d’où vient le texte — c’est la ligne la plus honnête de la
     section, elle n’a rien à faire en gris de bas de page. */
  color:var(--encre2);
}

/* ══ 9. DEUX COLONNES — tablette ══
   L’écart tombe à zéro : à partir d’ici, ce sont les filets qui
   séparent, et la flèche passe sur le côté. */
@media (min-width:760px){
  .mem__grille{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }
  .mem__volet{
    padding:clamp(18px,2.2vw,28px) clamp(18px,2vw,26px) 0;
    border-left:1px solid var(--b20);
  }
  /* Premier volet de chaque rangée : pas de filet à gauche, sinon on
     dessine une bordure de page au lieu d’une séparation. */
  .mem__volet:nth-child(2n+1){ border-left:0; }
  /* La jauge suit le rembourrage : elle coiffe la colonne entière. */
  .mem__jauge{ left:0;right:0; }

  .mem__volet::after{
    left:auto;bottom:auto;
    right:clamp(5px,.6vw,9px);top:50%;
    margin-left:0;
    transform:translateY(-50%) rotate(45deg);
  }
  /* En deux colonnes, le volet de fin de rangée n’a rien à sa droite :
     sa flèche pointerait dans le vide. */
  .mem__volet:nth-child(2n)::after{ content:none; }
}

/* ══ 10. AUTANT DE COLONNES QUE DE VOLETS — grand écran ══
   --mem-n est posé par mode-emploi.js d’après le nombre réel de
   volets (3, 4 ou 5). Une seule rangée : tout est lu d’un coup d’œil,
   ce qui est exactement la demande. Le seuil de 1120 px est choisi
   pour que cinq colonnes gardent au moins ~200 px chacune, largeur en
   dessous de laquelle une ligne de Georgia devient un escalier. */
@media (min-width:1120px){
  .mem__grille{
    grid-template-columns:repeat(var(--mem-n,4),minmax(0,1fr));
  }
  /* ⚠ L’ORDRE DE CES TROIS RÈGLES EST LOAD-BEARING.
     `.mem__volet:nth-child(2n+1)` et `.mem__volet:first-child` ont la
     MÊME spécificité (0,2,0) : c’est la dernière écrite qui gagne. On
     rétablit donc d’abord le filet sur tous les volets impairs (la
     règle des deux colonnes le leur avait retiré), et on retire
     seulement APRÈS celui du premier. Inverser ces deux lignes, c’est
     rendre au premier volet une bordure de page. */
  .mem__volet:nth-child(2n+1){ border-left:1px solid var(--b20); }
  .mem__volet{ border-left:1px solid var(--b20); }
  .mem__volet:first-child{ border-left:0; }
  /* Une seule rangée : tous les volets ont un voisin à droite, sauf
     le dernier. La flèche revient donc partout ailleurs. */
  .mem__volet:nth-child(2n)::after{ content:''; }
  .mem__volet:last-child::after{ content:none; }
}

/* ══ 11. LE CALME ══
   Un seul interrupteur : :root[data-calme="1"]. socle.css a déjà
   coupé toutes les transitions et animations ; il reste à retirer ce
   qui n’a plus de sens à l’arrêt.
   ON NE CACHE AUCUN TEXTE : les volets restent tous lisibles, tous
   cliquables, dans le même ordre. C’est le mouvement qui s’en va, pas
   le contenu — et comme rien n’était caché au départ, il n’y a rien à
   récupérer. */
:root[data-calme="1"] .mem__jauge i{ display:none; }
:root[data-calme="1"] .mem__volet,
:root[data-calme="1"] .mem__volet.est-actif{ transform:none; }

/* ══ 12. IMPRESSION ══
   Un mode d’emploi, c’est fait pour être posé à côté de l’objet. */
@media print{
  .mem{ border-top:3px solid #000;padding-bottom:0; }
  .mem__grille{ grid-template-columns:repeat(2,1fr);gap:0; }
  .mem__jauge{ background:#000;height:2px; }
  .mem__jauge i{ display:none; }
  .mem__volet::after{ content:none; }
  .mem__volet{ transform:none;break-inside:avoid; }
}