/* ════════════════════════════════════════════════════════════════
   LA BULLE D'AIDE — boutique/aide.css
   ────────────────────────────────────────────────────────────────
   Le dessin suit la ROTATIVE : papier, encre, filets, blocs carrés,
   zéro ombre douce, zéro dégradé. Les seuls « reliefs » sont des
   décalages NETS — un tirage mal calé, pas une ombre portée.

   TOUT VIENT DE LA TABLE DE VARIABLES du site (--papier, --encre,
   --vermillon, --u1/--u2/--u3, --f-titre, --f-corps, --f-mono) :
   la bulle change donc d'encre en même temps que le rayon, sans une
   seule couleur écrite en dur ici. Une exception assumée : le blanc
   des réserves passe par --papier, jamais par #fff.

   MOUVEMENT : opacity et transform, rien d'autre. Aucune largeur,
   aucune hauteur, aucun `bottom` en transition. L'interrupteur est
   :root[data-calme='1'] et lui seul — le réglage système est
   volontairement désarmé dans tout le projet.

   EMPILEMENT : le rond est à 70, le panneau à 74. Le tiroir du panier
   (90) et son voile (80) passent DEVANT : une aide qui recouvre le
   panier empêche d'acheter.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* La garde sous les barres collantes des fiches produit. aide.js la
     mesure et la pose ; 0 tant qu'il n'y a pas de barre. */
  --aide-garde:0px;
  --aide-bord:1px solid var(--encre);

  /* LES DEUX SEULES COULEURS QUI DOIVENT SURVIVRE A TOUT.
     --papier et --vermillon viennent de presse.css, chargée par les
     410 pages de la boutique. Si un jour la bulle est posée sur une
     page qui ne la charge pas, le fond et l'accent retombent sur les
     jetons du socle plutôt que de disparaître : un panneau sans fond
     est un panneau illisible. */
  --aide-fond:var(--papier,var(--nuit));
  --aide-accent:var(--vermillon,var(--or));
}

/* ══ ① LE ROND ══
   Le seul élément rond de la boutique, et c'est voulu : il doit se
   lire comme un objet posé sur le journal, pas comme un bloc de plus.
   Le signe est un point d'interrogation composé dans la police des
   titres — aucun être vivant n'est dessiné, ici ni ailleurs. */
.aide__rond{
  position:fixed;
  right:clamp(12px,3vw,26px);
  bottom:calc(clamp(12px,3vw,26px) + var(--aide-garde));
  z-index:70;
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius:50%;
  border:2px solid var(--encre);
  background:var(--aide-accent);
  color:var(--aide-fond);
  cursor:pointer;
  padding:0;
  /* Décalage NET, sans flou : c'est un défaut de repérage
     d'imprimerie, pas une ombre douce. */
  box-shadow:4px 4px 0 var(--encre);
  transition:transform 160ms var(--tampon,cubic-bezier(.34,1.56,.64,1)),
             opacity 160ms linear;
}
.aide__rond-signe{
  font-family:var(--f-titre);
  font-size:1.7rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  transform:translateY(1px);
}
.aide__rond:hover{ transform:translate(-2px,-2px); }
.aide__rond:active{ transform:translate(2px,2px); }
.aide__rond:focus-visible{ outline:3px solid var(--encre);outline-offset:3px; }

/* ══ ② LE PANNEAU ══
   400 px au plus sur grand écran, plein écran sous 640. Carré, cerné
   d'un filet, calé au-dessus du rond. */
.aide__pan{
  position:fixed;
  right:clamp(12px,3vw,26px);
  bottom:calc(clamp(12px,3vw,26px) + 56px + 14px + var(--aide-garde));
  z-index:74;
  width:min(400px,calc(100vw - 24px));
  max-height:min(600px,calc(100vh - 140px));
  display:flex;flex-direction:column;
  background:var(--aide-fond);
  color:var(--encre);
  border:var(--aide-bord);
  border-radius:0;
  box-shadow:6px 6px 0 var(--encre);
  /* L'état fermé du point de vue de l'animation. `hidden` est retiré
     par le script AVANT que .on arrive : sans ce temps mort d'une
     image, la transition n'a pas lieu et le panneau apparaît d'un
     coup. */
  opacity:0;
  transform:translateY(10px);
  transition:opacity 200ms linear,
             transform 200ms var(--e-expo,cubic-bezier(.16,1,.3,1));
}
.aide__pan.on{ opacity:1;transform:translateY(0); }
.aide__pan[hidden]{ display:none; }

/* La tête : le filet de 8 px à l'encre du rayon, comme toute tête de
   section du journal. */
.aide__tete{
  position:relative;
  display:flex;align-items:baseline;gap:10px;
  padding:14px 46px 12px 16px;
  border-top:8px solid var(--u2,var(--aide-accent));
  border-bottom:1px solid var(--b20);
}
.aide__eti{
  font-family:var(--f-mono);
  font-size:.6rem;font-weight:700;
  letter-spacing:.12em;
  color:var(--aide-accent);
}
.aide__titre{
  margin:0;
  font-family:var(--f-titre);
  font-size:1.15rem;font-weight:800;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.aide__fermer{
  position:absolute;top:12px;right:10px;
  width:32px;height:32px;
  display:grid;place-items:center;
  border:1px solid var(--b20);
  border-radius:0;
  background:transparent;
  color:var(--encre);
  font-size:.9rem;
  cursor:pointer;
  transition:transform 140ms linear;
}
.aide__fermer:hover{ transform:scale(1.08); }
.aide__fermer:focus-visible{ outline:2px solid var(--aide-accent);outline-offset:2px; }
/* 17/08 : la croix fait 32 px, la cible du doigt en fait 44 —
   une zone sensible invisible qui déborde, comme partout ailleurs. */
.aide__fermer::after{ content:'';position:absolute;inset:-6px; }

/* ══ ③ LE FIL ══ */
.aide__fil{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:12px;
  min-height:64px;
}
.aide__bulle{ max-width:92%; }
.aide__bulle p{
  margin:0;
  font-family:var(--f-corps);
  font-size:.92rem;
  line-height:1.5;
}
/* Ce que dit la maison : en réserve sur le papier, tenu par un filet
   à l'encre du rayon. */
.aide__bulle--aide{
  align-self:flex-start;
  border-left:3px solid var(--u2,var(--aide-accent));
  padding:2px 0 2px 12px;
}
/* Ce que dit le client : un bloc d'encre pleine. */
.aide__bulle--moi{
  align-self:flex-end;
  background:var(--encre);
  color:var(--aide-fond);
  padding:8px 12px;
  border-radius:0;
}
.aide__bulle--moi p{ font-family:var(--f-mono);font-size:.8rem;line-height:1.45; }
.aide__lien{
  display:inline-block;
  margin-top:6px;
  font-family:var(--f-mono);
  font-size:.64rem;font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--aide-accent);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
.aide__lien:hover{ color:var(--u1,var(--encre)); }

/* ══ ④ LE PIED : racines, questions, formulaire ══ */
.aide__pied{
  flex:0 0 auto;
  border-top:1px solid var(--b20);
  padding:12px 16px 16px;
  background:var(--aide-fond);
  max-height:52vh;
  overflow-y:auto;
}
.aide__cons{
  margin:0 0 10px;
  font-family:var(--f-mono);
  font-size:.62rem;font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre3,var(--encre));
}
.aide__choix{ display:flex;flex-direction:column;gap:8px; }

/* Les quatre racines : des cartes carrées, une par ligne. */
.aide__racine{
  display:flex;flex-direction:column;gap:2px;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:1px solid var(--b20);
  border-radius:0;
  background:transparent;
  color:var(--encre);
  cursor:pointer;
  transition:transform 140ms var(--e-expo,cubic-bezier(.16,1,.3,1));
}
.aide__racine:hover{
  transform:translateX(3px);
  border-color:var(--u1,var(--encre));
  background:var(--u3,transparent);
}
.aide__racine-nom{
  font-family:var(--f-titre);
  font-size:1rem;font-weight:800;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.aide__racine-mot{
  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.06em;
  color:var(--encre3,var(--encre));
}

/* Les questions : une liste tenue par des filets, comme un sommaire. */
.aide__q{
  position:relative;
  width:100%;
  text-align:left;
  padding:9px 22px 9px 0;
  border:0;
  border-bottom:1px solid var(--b20);
  border-radius:0;
  background:transparent;
  color:var(--encre);
  font-family:var(--f-corps);
  font-size:.9rem;
  line-height:1.35;
  cursor:pointer;
  transition:transform 140ms var(--e-expo,cubic-bezier(.16,1,.3,1));
}
.aide__q::after{
  content:'→';
  position:absolute;right:2px;top:50%;
  transform:translateY(-50%);
  color:var(--aide-accent);
  font-family:var(--f-mono);
  font-size:.8rem;
}
.aide__q:hover{ transform:translateX(4px); }

.aide__retourligne{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.aide__retour{
  border:0;background:transparent;
  padding:2px 0;
  color:var(--aide-accent);
  font-family:var(--f-mono);
  font-size:.62rem;font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
}
/* 17/08 : le mot fait 20 px de haut, la cible du doigt en fait 44. */
.aide__retour::after{ content:'';position:absolute;left:-8px;right:-8px;
  top:50%;height:44px;transform:translateY(-50%); }
.aide__ici{
  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--encre3,var(--encre));
}
.aide__perdu{
  display:block;
  width:100%;
  margin-top:12px;
  padding:8px 0;
  border:0;border-top:1px solid var(--b20);
  background:transparent;
  color:var(--encre2,var(--encre));
  font-family:var(--f-mono);
  font-size:.66rem;font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:left;
  cursor:pointer;
}
.aide__perdu:hover{ color:var(--aide-accent); }

/* ══ ⑤ LE FORMULAIRE ══ */
.aide__form{ display:flex;flex-direction:column;gap:6px; }
.aide__label{
  font-family:var(--f-mono);
  font-size:.6rem;font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre3,var(--encre));
}
.aide__champ{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--encre);
  border-radius:0;
  background:transparent;
  color:var(--encre);
  font-family:var(--f-corps);
  font-size:.9rem;
  margin-bottom:6px;
}
.aide__champ--long{ resize:vertical;min-height:84px; }
.aide__champ:focus{ outline:2px solid var(--aide-accent);outline-offset:1px; }

/* Le piège à robots : hors de l'écran, hors du flux, hors de la
   tabulation (aide.js pose tabindex="-1"). Il n'est PAS en
   display:none — certains automates ignorent les champs cachés. */
.aide__piege{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

.aide__rang{ display:flex;flex-direction:column;gap:8px;margin-top:4px; }
.aide__envoi{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--encre);
  border-radius:0;
  background:var(--encre);
  color:var(--aide-fond);
  font-family:var(--f-mono);
  font-size:.68rem;font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform 140ms var(--tampon,cubic-bezier(.34,1.56,.64,1));
}
.aide__envoi:hover{ transform:translateY(-2px);background:var(--aide-accent); }
.aide__ia{
  width:100%;
  padding:9px 14px;
  border:1px solid var(--b20);
  border-radius:0;
  background:transparent;
  color:var(--encre2,var(--encre));
  font-family:var(--f-mono);
  font-size:.64rem;font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.aide__ia:hover{ border-color:var(--encre);color:var(--encre); }
.aide__envoi[disabled],.aide__ia[disabled]{ opacity:.5;cursor:default; }
.aide__envoi[disabled]:hover,.aide__ia[disabled]:hover{ transform:none; }
.aide__etat{
  margin:2px 0 0;
  font-family:var(--f-mono);
  font-size:.66rem;
  line-height:1.4;
  color:var(--aide-accent);
  min-height:1em;
}
.aide__note{
  margin:6px 0 0;
  font-family:var(--f-corps);
  font-size:.76rem;
  line-height:1.45;
  color:var(--encre3,var(--encre));
}

/* Le focus se voit partout, sans exception : c'est le seul repère
   d'une personne qui n'utilise pas la souris. */
.aide__pan button:focus-visible,
.aide__pan a:focus-visible{ outline:2px solid var(--aide-accent);outline-offset:2px; }

/* ══ ⑥ LE TÉLÉPHONE — plein écran sous 640 px ══
   Un panneau de 400 px sur un écran de 360 est un panneau tronqué :
   sous ce seuil il prend tout, et le rond disparaît le temps de la
   conversation (deux boutons de fermeture, c'est un de trop). */
@media (max-width:640px){
  .aide__pan{
    inset:0;
    right:auto;bottom:auto;
    width:100%;
    max-height:none;
    height:100%;
    border:0;
    box-shadow:none;
    transform:translateY(16px);
  }
  .aide__pan.on{ transform:translateY(0); }
  .aide__fil{ padding:16px; }
  .aide__pied{ max-height:none; }
  .aide-ouverte .aide__rond{ opacity:0;pointer-events:none; }
  /* La page derrière ne défile plus pendant que la bulle est ouverte :
     sinon le doigt fait glisser le catalogue sous le panneau. */
  .aide-ouverte,.aide-ouverte body{ overflow:hidden; }
}

/* ══ ⑦ L'INTERRUPTEUR ══
   :root[data-calme='1'] est LE SEUL. Il coupe le mouvement, jamais le
   contenu : tout reste lisible et cliquable, rien ne bouge. */
:root[data-calme='1'] .aide__rond,
:root[data-calme='1'] .aide__pan,
:root[data-calme='1'] .aide__racine,
:root[data-calme='1'] .aide__q,
:root[data-calme='1'] .aide__fermer,
:root[data-calme='1'] .aide__envoi{
  transition:none;
}
:root[data-calme='1'] .aide__rond:hover,
:root[data-calme='1'] .aide__rond:active,
:root[data-calme='1'] .aide__racine:hover,
:root[data-calme='1'] .aide__q:hover,
:root[data-calme='1'] .aide__fermer:hover,
:root[data-calme='1'] .aide__envoi:hover{
  transform:none;
}
:root[data-calme='1'] .aide__pan{ transform:none; }