/* CONSTRUIT par tools/i18n.js depuis assets/css/fiche/ — ne pas éditer.
   10 fichier(s) : _socle.css, anniversaire.css, avis.css, carte.css, chiffres.css, compter.css, comptoir.css, image.css, reglages.css, retours.css */

/* ══ assets/css/fiche/_socle.css ══════════════════════════════ */
/* ============================================================
   LE SOCLE DES FICHES
   Huit pages, une seule grammaire.

   Ce fichier ne dessine aucune fonctionnalité. Il pose ce que les
   huit fiches ont en commun — le fil d'Ariane, la tête, le rythme des
   sections, le cadre d'une capture, les questions, le dernier mot —
   et deux OBJETS réutilisables qui reviennent partout : un téléphone
   et un volet d'application.

   La règle qui tient tout : une section de fiche montre quelque
   chose. Une tuile de texte n'est pas une preuve ; c'est une
   affirmation de plus. Là où l'ancienne page alignait neuf grilles de
   paragraphes, chaque section porte ici un objet qu'on peut regarder.

   Palette, échelle typographique et boutons viennent de style.css :
   rien n'est redéfini ici, tout est réutilisé. Une fiche qui invente
   sa couleur trahit la marque plus sûrement qu'une fiche moche.
   ============================================================ */

/* La page d'une fiche vit sur papier, en-tête opaque dès le premier
   pixel : il n'y a pas de héros sombre à traverser, l'en-tête
   transparente flotterait sur du texte. */
.page-fiche .site-head{
  background:rgba(246,242,234,.88); backdrop-filter:blur(14px) saturate(1.3);
  color:var(--ink); border-bottom-color:var(--line);
}
.page-fiche .site-head .btn:hover{ color:var(--paper) }

/* ── le fil d'Ariane ────────────────────────────────────────
   Deux crans, jamais trois. Il dit d'où l'on vient et rend le retour
   au sommaire possible sans le bouton « précédent ». */
.fil{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5em;
  font-size:var(--step--1); color:var(--ink-3);
  padding-top:clamp(96px,13vh,132px);
}
.fil a{ text-decoration:none; color:var(--ink-3) }
.fil a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.fil__sep{ opacity:.45 }
.fil [aria-current]{ color:var(--ink-2); font-weight:600 }

/* ── la tête ────────────────────────────────────────────────
   Deux colonnes dès qu'il y a la place : l'accroche à gauche, l'objet
   à droite. La promesse et sa preuve dans le même coup d'œil — c'est
   toute la différence avec une page qui commence par un paragraphe. */
.tete{ padding:clamp(20px,3vw,32px) 0 clamp(48px,7vw,88px) }
.tete__in{ display:grid; gap:clamp(32px,5vw,64px); align-items:center }
@media (min-width:900px){
  .tete__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr) }
}
.tete h1{ font-size:var(--step-4); letter-spacing:-.03em; margin:.25em 0 .4em; max-width:15ch }
.tete h1 em{ color:var(--green-ink); font-style:italic }
.tete .lede{ font-size:var(--step-1); max-width:44ch }
.tete__cta{ margin-top:1.6em; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px }
.tete__cta .btn:first-child{ background:var(--green); border-color:var(--green); color:#06280f;
  padding-inline:26px }
.tete__cta .btn:first-child:hover{ background:#2ee06b; border-color:#2ee06b }
.tete__note{ margin-top:1em; font-size:var(--step--1); color:var(--ink-3) }

/* La scène : le cadre neutre où chaque fiche pose son objet. Elle ne
   décide de rien d'autre que du centrage et de la respiration —
   sinon les huit objets se ressembleraient, ce qui est exactement ce
   qu'on essaie d'éviter. */
.scene{ display:grid; place-items:center; min-width:0 }
.scene > *{ max-width:100% }

/* ── la barre de preuves ────────────────────────────────────
   Trois faits sous la tête. Des chiffres qu'on peut tenir, pas des
   adjectifs. Elle donne à la page sa densité avant le premier
   paragraphe — et elle se lit en deux secondes. */
.preuves{
  border-block:1px solid var(--line);
  display:grid; gap:0;
}
@media (min-width:720px){ .preuves{ grid-template-columns:repeat(3,1fr) } }
.preuve{ padding:clamp(20px,3vw,30px) 0 }
@media (min-width:720px){
  .preuve{ padding-inline:clamp(20px,3vw,34px) }
  .preuve + .preuve{ border-left:1px solid var(--line) }
  .preuve:first-child{ padding-left:0 }
}
@media (max-width:719px){ .preuve + .preuve{ border-top:1px solid var(--line) } }
.preuve__v{
  display:block; font-family:var(--serif); font-size:var(--step-2); font-weight:600;
  letter-spacing:-.03em; line-height:1.05; color:var(--ink);
}
.preuve__x{ display:block; margin-top:.5em; font-size:var(--step--1); color:var(--ink-3);
  line-height:1.5; max-width:32ch }

/* ── le rythme des sections ─────────────────────────────────
   Une fiche alterne papier et nuit. Deux sections claires d'affilée
   se lisent comme une seule longue page ; l'alternance donne des
   chapitres sans avoir à les numéroter. */
.duo{ display:grid; gap:clamp(32px,5vw,72px); align-items:center }
@media (min-width:900px){
  .duo{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  /* Inversé : le texte à droite. Une fiche qui pose tout à gauche du
     haut en bas devient une colonne, pas une page. */
  .duo--r .duo__mot{ order:2 }
}
.duo__mot{ min-width:0 }
.duo__vue{ min-width:0; display:grid; place-items:center }

/* Les points d'une section. Pas une tuile : une liste qui se lit.
   Le titre porte le sens, la phrase le nuance — jamais l'inverse. */
.faits{ margin-top:1.8em; display:grid; gap:1.15em }
.fait{ display:grid; gap:.3em; padding-left:1.6em; position:relative }
.fait::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:3px;
  background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.18);
}
.fait b{ font-weight:650; letter-spacing:-.01em; color:inherit }
.fait span{ color:var(--ink-2); font-size:var(--step--1); line-height:1.55 }
.section--dark .fait span{ color:rgba(246,242,234,.72) }
.section--dark .fait::before{ background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.22) }

/* Sur la page d'ensemble, les engagements de maison ont plus d'air et
   passent sur deux colonnes : ce ne sont pas les points d'une
   section, c'est le socle sur lequel les huit fiches reposent. */
.faits--large{ margin-top:2.4em; gap:1.7em }
@media (min-width:820px){
  .faits--large{ grid-template-columns:repeat(2,1fr); column-gap:clamp(32px,5vw,64px) }
}
.faits--large .fait b{
  font-family:var(--serif); font-size:var(--step-1); font-weight:600;
  letter-spacing:-.02em; line-height:1.2;
}
.faits--large .fait span{ font-size:var(--step-0) }

/* ── deux objets réutilisables ──────────────────────────────

   Presque toutes les captures de ce site sont l'une de ces deux
   choses : un téléphone, ou un volet de l'application. Les dessiner
   une fois ici évite huit téléphones légèrement différents — et un
   téléphone légèrement différent, c'est ce qui fait qu'une page a
   l'air d'avoir été faite par quelqu'un d'autre. */

/* Le téléphone. Proportions d'un vrai appareil, encoche comprise. */
.tel{
  width:min(100%, 300px); aspect-ratio:.472; position:relative;
  border-radius:44px; padding:11px;
  background:linear-gradient(160deg,#2e2922,#14110d 42%,#0b0906);
  box-shadow:0 32px 60px -26px rgba(20,17,13,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.tel__ecran{
  height:100%; border-radius:34px; overflow:hidden; position:relative;
  background:var(--paper); display:flex; flex-direction:column;
}
.tel__encoche{
  position:absolute; top:9px; left:50%; translate:-50% 0; z-index:4;
  width:96px; height:26px; border-radius:999px; background:#0b0906;
}
.tel--nuit .tel__ecran{ background:#0b0906; color:var(--paper) }

/* Le volet : une fenêtre de l'application, telle qu'on la voit sur un
   écran de bureau. Trois pastilles, une barre de titre, du contenu. */
.volet{
  width:100%; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:#fffdf9;
  box-shadow:0 26px 50px -30px rgba(20,17,13,.45);
}
.section--dark .volet{ border-color:rgba(246,242,234,.14) }
.volet__barre{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px; border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.volet__pastilles{ display:flex; gap:6px }
.volet__pastilles i{ width:9px; height:9px; border-radius:50%; background:var(--line) }
.volet__nom{
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}
.volet__corps{ padding:clamp(16px,2.4vw,22px) }

/* ── la légende sous un objet ───────────────────────────────
   Ce que la capture ne peut pas dire. Une ligne, pas un paragraphe. */
.legende{
  margin-top:1.1em; font-size:var(--step--1); color:var(--ink-3);
  text-align:center; max-width:44ch; margin-inline:auto; line-height:1.5;
}
.section--dark .legende{ color:rgba(246,242,234,.5) }

/* ── les questions ──────────────────────────────────────────
   Un `details` natif : il s'ouvre sans une ligne de script, il
   s'imprime ouvert, et la recherche du navigateur y trouve les
   réponses fermées. */
.qr{ margin-top:clamp(28px,4vw,44px); border-top:1px solid var(--line) }
.qr details{ border-bottom:1px solid var(--line) }
.qr summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:1.15em 0; cursor:pointer; list-style:none;
  font-weight:650; letter-spacing:-.012em; font-size:var(--step-0);
}
.qr summary::-webkit-details-marker{ display:none }
.qr summary::after{
  content:""; flex:none; width:13px; height:13px; margin-top:.42em;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  rotate:45deg; transition:rotate .22s ease, border-color .22s ease;
}
.qr details[open] summary::after{ rotate:-135deg; border-color:var(--green-ink) }
.qr summary:hover{ color:var(--green-ink) }
.qr p{
  padding:0 clamp(24px,5vw,48px) 1.5em 0; margin-top:-.25em;
  color:var(--ink-2); line-height:1.65; max-width:68ch;
}
@media (prefers-reduced-motion:reduce){ .qr summary::after{ transition:none } }

/* ── le dernier mot ─────────────────────────────────────────
   `.final` existe déjà dans style.css. Ici on ne fait qu'aligner les
   deux boutons et donner au second la discrétion qu'il mérite. */
.fin__cta{ margin-top:clamp(24px,4vw,36px); display:flex; flex-wrap:wrap;
  justify-content:center; gap:12px }
.fin__cta .btn:first-child{ background:var(--green); border-color:var(--green); color:#06280f }
.fin__cta .btn:first-child:hover{ background:#2ee06b; border-color:#2ee06b }
.fin__cta .btn--ghost{ color:var(--paper); border-color:rgba(246,242,234,.35) }
.fin__cta .btn--ghost:hover{ background:rgba(246,242,234,.1); border-color:rgba(246,242,234,.6) }

/* ── pour continuer ─────────────────────────────────────────
   Produit par tools/i18n.js, identique sur les huit fiches. Une page
   qui se termine par un bouton d'inscription et rien d'autre laisse
   partir celui qui n'est pas encore prêt à s'inscrire. */
.suite{ padding:clamp(48px,7vw,88px) 0; border-top:1px solid var(--line) }
.suite__titre{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:1.6em;
}
.suite__grille{ display:grid; gap:14px }
@media (min-width:720px){ .suite__grille{ grid-template-columns:repeat(2,1fr); gap:18px } }
.suite__lien{
  display:grid; gap:.4em; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,3vw,30px); background:var(--paper);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.suite__lien:hover{
  border-color:var(--ink-3); transform:translateY(-2px);
  box-shadow:0 14px 30px -22px rgba(20,17,13,.5);
}
.suite__quoi{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-ink);
}
.suite__nom{ font-family:var(--serif); font-size:var(--step-1); font-weight:600;
  letter-spacing:-.02em; line-height:1.15; margin-top:.15em }
.suite__tease{ color:var(--ink-2); font-size:var(--step--1); line-height:1.55 }
.suite__aller{
  margin-top:.6em; font-size:var(--step--1); font-weight:650; color:var(--green-ink);
  display:inline-flex; align-items:center; gap:.4em;
}
.suite__aller::after{ content:"→"; transition:translate .2s ease }
.suite__lien:hover .suite__aller::after{ translate:3px 0 }
@media (prefers-reduced-motion:reduce){
  .suite__lien,.suite__aller::after{ transition:none }
  .suite__lien:hover{ transform:none }
}

/* ── le sommaire, sur la page d'ensemble ────────────────────
   Huit entrées numérotées. Le numéro n'est pas décoratif : il dit
   qu'il y a un ordre, et qu'on peut le suivre. */
.sommaire{ margin-top:clamp(36px,5vw,56px); display:grid; gap:14px }
@media (min-width:640px){ .sommaire{ grid-template-columns:repeat(2,1fr); gap:16px } }
@media (min-width:1000px){ .sommaire{ grid-template-columns:repeat(4,1fr) } }
/* `align-content:start` collait le contenu en haut et laissait le
   « Ouvrir » flotter juste sous le texte : huit teasers de longueurs
   différentes, donc huit liens à huit hauteurs. La grille s'étire
   maintenant sur toute la carte et le lien est poussé en bas, si bien
   que les huit s'alignent quelle que soit la longueur du texte. */
.somm{
  position:relative; display:grid; gap:.35em; align-content:stretch;
  grid-template-rows:auto auto auto 1fr auto;
  text-decoration:none; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.6vw,26px); background:var(--paper);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.somm:hover{
  border-color:var(--ink-3); transform:translateY(-2px);
  box-shadow:0 14px 30px -22px rgba(20,17,13,.5);
}
.somm__n{
  font-family:var(--serif); font-size:var(--step-1); font-weight:600;
  color:var(--line); letter-spacing:-.02em; line-height:1;
}
.somm__quoi{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-ink); margin-top:.5em;
}
.somm__titre{ font-family:var(--serif); font-size:var(--step-1); font-weight:600;
  letter-spacing:-.02em; line-height:1.15 }
.somm__tease{ color:var(--ink-2); font-size:var(--step--1); line-height:1.55 }
.somm__aller{
  align-self:end; margin-top:.9em;
  font-size:var(--step--1); font-weight:650; color:var(--green-ink);
  display:inline-flex; align-items:center; gap:.4em;
}
.somm__aller::after{ content:"→"; transition:translate .2s ease }
.somm:hover .somm__aller::after{ translate:3px 0 }
.somm:hover .somm__n{ color:var(--green) }
@media (prefers-reduced-motion:reduce){
  .somm,.somm__aller::after{ transition:none }
  .somm:hover{ transform:none }
}

/* ══ assets/css/fiche/anniversaire.css ══════════════════════════════ */
/* ============================================================
   FICHE « l'anniversaire »
   Ce que cette page doit prouver : le seul jour où écrire à un client
   se défend, et la règle qui empêche d'en abuser.

   Trois objets portent la démonstration, et aucun n'est un
   paragraphe : la notification telle qu'elle arrive à 9 h 12, le
   réglage montré deux fois — champ vide, envoi grisé ; cadeau écrit,
   envoi actif —, et la journée de 24 h avec sa seule fenêtre.

   Tout vient de style.css : la palette, l'échelle, les boutons. Rien
   n'est réinventé ici, et surtout pas une couleur.
   ============================================================ */

/* ── la tête : un écran verrouillé, un mardi matin ───────────
   Un peu plus étroit que le téléphone du socle : à 300 px il venait
   toucher l'en-tête fixe. */
.page-anniversaire .tete .tel{ width:min(100%,268px) }

/* Le fond d'écran. Pas une photo : un dégradé chaud, assez sombre
   pour que la bulle translucide se détache, assez vivant pour qu'on
   croie à un vrai téléphone plutôt qu'à une maquette. */
.anv-lock{
  padding:58px 14px 16px;
  background:
    radial-gradient(120% 60% at 70% 8%, rgba(168,129,60,.30), transparent 62%),
    linear-gradient(168deg,#2b2118,#100d09 64%);
}
.anv-lock__heure{
  text-align:center; font-size:3.3rem; font-weight:250; line-height:1.02;
  letter-spacing:-.035em; color:var(--paper); font-variant-numeric:tabular-nums;
}
.anv-lock__date{
  text-align:center; font-size:.78rem; color:rgba(246,242,234,.55);
  margin:.35em 0 26px;
}
/* La notification est POUSSÉE EN BAS, au-dessus de la barre d'accueil.
   Collée sous l'heure, elle laissait la moitié basse de l'écran vide
   et le vide se lisait comme une maquette inachevée — alors qu'un
   téléphone empile bel et bien ses notifications par le bas. */
.anv-lock .anv-notif{ margin-top:auto }
.anv-lock__barre{
  margin-top:20px; align-self:center; width:96px; height:4px;
  border-radius:999px; background:rgba(246,242,234,.32);
}

/* ── la notification ─────────────────────────────────────────
   Le même objet en tête et dans la section des deux gestes : c'est la
   MÊME notification, il n'y en a qu'une par an. La redessiner
   autrement aurait laissé croire à deux messages. */
.anv-notif{
  display:flex; gap:10px; padding:11px 12px;
  border-radius:16px; border:1px solid rgba(246,242,234,.12);
  background:rgba(246,242,234,.14); backdrop-filter:blur(8px);
}
.anv-notif--seule{ width:min(100%,290px); margin-inline:auto }
.anv-notif__ico{
  width:32px; height:32px; flex:none; border-radius:9px;
  display:grid; place-items:center; font-size:1.05rem;
  background:var(--paper);
}
.anv-notif__c{ display:grid; gap:.16em; min-width:0 }
.anv-notif__app{
  font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(246,242,234,.6);
}
/* Dans le téléphone de tête, la ligne ne tient pas sur un rang : le
   nom de la boutique prend tout. Elle passe donc à la ligne — mais
   l'heure reste d'un seul tenant, sinon le point médian restait seul
   au bout du nom et se lisait comme une coquille. */
.anv-notif__app i{
  font-style:normal; font-weight:500; text-transform:none; letter-spacing:0;
  white-space:nowrap;
}
.anv-notif__t{ font-size:.86rem; font-weight:650; letter-spacing:-.012em; color:var(--paper) }
.anv-notif__x{ font-size:.76rem; line-height:1.4; color:rgba(246,242,234,.72) }

/* ── les deux gestes ─────────────────────────────────────────
   Deux colonnes de même largeur, deux cadres de même hauteur. C'est
   l'égalité qui fait l'argument : le rappel au comptoir n'est pas le
   lot de consolation du message, c'est celui des deux qui atteint
   tout le monde. */
.anv-gestes{ margin-top:clamp(36px,5vw,56px); display:grid; gap:clamp(28px,4vw,38px) }
@media (min-width:860px){ .anv-gestes{ grid-template-columns:repeat(2,1fr) } }

.anv-geste{ display:grid; align-content:start; gap:.45em }
.anv-geste__quand{
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green); margin-bottom:.4em;
}
/* Hauteur FIXE, pas un minimum : deux cadres inégaux mettraient les
   deux titres à des hauteurs différentes, et le plus bas passerait
   pour le moins important. 336 et non 300 : à 300, la colonne de
   droite mangeait sa propre marge intérieure et la mention de pied
   venait toucher le bord bas du cadre. */
.anv-geste__vue{
  height:336px; display:grid; align-content:center; gap:12px;
  padding:20px; border-radius:var(--r);
  border:1px solid rgba(246,242,234,.14); background:rgba(246,242,234,.04);
}
/* À gauche, ce n'est pas un cadre avec un objet au milieu : c'est un
   écran verrouillé. Centrée, la notification flottait dans deux
   grandes bandes noires vides qui se lisaient comme un bogue ; posée
   en bas, au-dessus de la barre d'accueil, elle retrouve la place
   qu'elle a sur un vrai téléphone — la même qu'en tête de page. */
.anv-geste__vue--fond{
  display:flex; flex-direction:column;
  border-color:rgba(246,242,234,.1);
  background:
    radial-gradient(120% 62% at 72% 6%, rgba(168,129,60,.28), transparent 62%),
    linear-gradient(168deg,#2b2118,#100d09 66%);
}
.anv-geste__vue--fond .anv-notif{ margin-top:auto }
.anv-geste__barre{
  margin-top:18px; align-self:center; width:86px; height:4px;
  border-radius:999px; background:rgba(246,242,234,.3);
}
.anv-bulle__q{
  text-align:center; font-size:.7rem; letter-spacing:.02em;
  color:rgba(246,242,234,.5);
}
.anv-geste__t{ font-size:var(--step-1); margin-top:.7em }
.anv-geste__x{ font-size:var(--step--1); line-height:1.55; color:rgba(246,242,234,.72) }
.anv-geste__qui{
  margin-top:.7em; padding-top:.9em; display:grid; gap:.25em;
  border-top:1px solid rgba(246,242,234,.14);
}
.anv-geste__qui span{
  font-size:.65rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(246,242,234,.45);
}
.anv-geste__qui b{ font-size:.95rem; font-weight:650; letter-spacing:-.012em; color:var(--paper) }

/* Votre écran de scan. Clair, quand celui du client est noir : c'est
   la seule façon de voir d'un coup d'œil que ce sont deux appareils,
   des deux côtés du comptoir, et pas deux vues du même. */
.anv-scan{
  width:min(100%,246px); margin-inline:auto; display:grid; gap:11px;
  padding:14px; border-radius:14px;
  background:#fffdf9; color:var(--ink);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.75);
}
.anv-scan__nom{
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
/* L'alerte est au-dessus du bouton, jamais à côté : on doit la
   traverser des yeux avant d'atteindre « Tamponner ». */
.anv-scan__alerte{
  display:flex; gap:9px; align-items:flex-start;
  padding:10px; border-radius:10px;
  background:var(--green-soft); border:1px solid rgba(21,128,61,.22);
}
.anv-scan__gat{ font-size:1rem; line-height:1.1; flex:none }
.anv-scan__ac{ display:grid; gap:.15em; min-width:0 }
.anv-scan__ac b{ font-size:.8rem; font-weight:700; letter-spacing:-.01em; color:var(--green-ink) }
.anv-scan__ac span{ font-size:.7rem; line-height:1.35; color:var(--ink-2) }
.anv-scan__qui{ display:grid; gap:.2em }
.anv-scan__qui b{ font-size:.86rem; font-weight:650; letter-spacing:-.012em; color:var(--ink) }
.anv-scan__qui span{ font-size:.7rem; color:var(--ink-3) }
.anv-scan__btn{
  text-align:center; padding:.62em; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-size:.8rem; font-weight:650; letter-spacing:-.01em;
}
/* La mention vit DANS le cadre : posée dessous, elle aurait décalé le
   titre de cette colonne d'une ligne par rapport à l'autre. */
.anv-geste__pied{
  text-align:center; font-size:.7rem; line-height:1.4;
  color:rgba(246,242,234,.5); max-width:30ch; margin-inline:auto;
}

/* ── la règle : le même réglage, avant et après ───────────────
   Deux volets l'un au-dessus de l'autre plutôt que côte à côte : on
   lit le second APRÈS le premier, comme on écrit le cadeau avant que
   l'envoi s'allume. La flèche au milieu nomme le geste qui manque. */
.anv-avant{ width:min(100%,382px); display:grid }
.anv-reg .volet__corps{ display:grid; gap:10px; padding:16px }
.anv-reg__lab{
  font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}
.anv-reg__champ{
  padding:.6em .75em; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:.88rem; font-weight:600;
  letter-spacing:-.01em;
}
.anv-reg__champ--vide{
  border-style:dashed; background:var(--paper-2);
  color:var(--ink-3); font-weight:400; font-style:italic;
}

/* L'interrupteur. Éteint, il est GRIS et à demi effacé — non parce
   qu'on l'a désactivé pour la démonstration, mais parce que c'est
   exactement l'état qu'il a tant que la ligne du dessus est vide. */
.anv-basc{
  margin-top:2px; padding-top:12px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
}
.anv-basc__i{
  width:36px; height:21px; flex:none; border-radius:999px;
  background:var(--line); position:relative;
}
.anv-basc__i i{
  position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(20,17,13,.3);
}
.anv-basc__n{ font-size:.79rem; letter-spacing:-.01em; color:var(--ink-3); line-height:1.3 }
.anv-basc__e{
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.32em .6em; border-radius:999px;
  background:var(--paper-2); color:var(--ink-3);
}
.anv-reg--off .anv-basc{ opacity:.62 }
.anv-reg--on .anv-basc__i{ background:var(--green) }
.anv-reg--on .anv-basc__i i{ left:18px }
.anv-reg--on .anv-basc__n{ color:var(--ink) }
.anv-reg--on .anv-basc__e{ background:var(--green-soft); color:var(--green-ink) }

.anv-reg__note{ font-size:.72rem; line-height:1.45; color:var(--ink-3) }
.anv-reg--on .anv-reg__note{ color:var(--green-ink) }

.anv-fleche{
  justify-self:center; display:grid; justify-items:center; gap:5px;
  padding:14px 0; font-size:.74rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green-ink);
}
.anv-fleche span{
  width:11px; height:11px; rotate:45deg;
  border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  border-radius:1px;
}

/* ── le moment : une journée entière ─────────────────────────
   La bande prend la largeur de la page : serrée dans une demi-colonne
   elle serait devenue un schéma, et une journée n'est pas un schéma.
   Les heures calmes hachurées aux deux bouts, la fenêtre au milieu,
   un seul repère — 9 h 12, l'heure de la notification de la tête. */
@media (min-width:900px){
  .anv-hor__faits{ grid-template-columns:repeat(3,1fr); column-gap:clamp(28px,4vw,48px) }
}
.anv-jour{
  margin-top:clamp(36px,5vw,56px);
  padding:clamp(22px,3vw,32px);
  border:1px solid rgba(246,242,234,.14); border-radius:var(--r);
  background:rgba(246,242,234,.04);
}
.anv-jour__l{
  font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(246,242,234,.5);
}
.anv-bande{ position:relative; height:46px; margin-top:52px }
.anv-bande__calme,.anv-bande__fen{ position:absolute; top:0; bottom:0 }
.anv-bande__calme{
  background:
    repeating-linear-gradient(-45deg, rgba(246,242,234,.16) 0 2px, transparent 2px 7px),
    rgba(246,242,234,.06);
}
.anv-bande__calme--a{ left:0; width:33.33%; border-radius:9px 0 0 9px }
.anv-bande__calme--b{ left:87.5%; right:0; border-radius:0 9px 9px 0 }
/* La fenêtre d'envoi. Le dégradé s'éteint vers la droite — la journée
   avance —, mais pas jusqu'à disparaître : à .15 son extrémité se
   confondait avec le fond nuit et la fenêtre semblait s'arrêter au
   milieu de l'après-midi. */
.anv-bande__fen{
  left:33.33%; width:54.17%;
  background:linear-gradient(90deg, rgba(34,197,94,.36), rgba(34,197,94,.22));
}
/* Le repère. Le trait dépasse en haut et en bas : posé à l'intérieur
   de la bande il se lisait comme une séparation entre deux zones. */
.anv-bande__mk{ position:absolute; left:38.33%; top:0; bottom:0; width:0 }
.anv-bande__mk i{
  position:absolute; top:-9px; bottom:-9px; left:-1.5px; width:3px;
  border-radius:2px; background:var(--paper);
}
.anv-bande__mk b{
  position:absolute; bottom:calc(100% + 18px); left:0; translate:-50% 0;
  padding:3px 9px; border-radius:7px; white-space:nowrap;
  background:var(--paper); color:var(--night);
  font-size:.72rem; font-weight:750; letter-spacing:-.01em;
}
.anv-bande__h{
  position:relative; height:1.3em; margin-top:11px;
  font-size:.7rem; color:rgba(246,242,234,.5); font-variant-numeric:tabular-nums;
}
.anv-bande__h span{ position:absolute; top:0; translate:-50% 0 }
.anv-bande__h span:first-child{ left:0; translate:0 0 }
.anv-bande__h span:nth-child(2){ left:25% }
.anv-bande__h span:nth-child(3){ left:50% }
.anv-bande__h span:nth-child(4){ left:75% }
.anv-bande__h span:last-child{ left:100%; translate:-100% 0 }
.anv-cle{ margin-top:20px; font-size:var(--step--1); color:rgba(246,242,234,.6) }
.anv-cle__i{
  display:inline-block; vertical-align:-2px; width:14px; height:14px;
  border-radius:4px; margin-right:8px;
}
.anv-cle__i--calme{
  background:
    repeating-linear-gradient(-45deg, rgba(246,242,234,.3) 0 2px, transparent 2px 6px),
    rgba(246,242,234,.1);
}
.anv-cle__i--fen{ margin-left:26px; background:rgba(34,197,94,.42) }

/* Les deux issues. Une seule des deux est un envoi — et c'est le
   refus qui mérite d'être montré, parce que personne ne le promet. */
.anv-cas{ margin-top:clamp(22px,3vw,30px); display:grid; gap:14px }
@media (min-width:760px){ .anv-cas{ grid-template-columns:repeat(2,1fr) } }
.anv-cas__i{
  display:grid; grid-template-columns:auto 1fr; column-gap:13px; align-items:start;
  padding:clamp(18px,2.4vw,22px); border-radius:var(--r);
  border:1px solid rgba(246,242,234,.14); background:rgba(246,242,234,.04);
}
.anv-cas__p{
  grid-row:span 2; width:27px; height:27px; border-radius:50%;
  display:grid; place-items:center;
}
.anv-cas__p svg{ width:15px; height:15px }
.anv-cas__i b{ font-weight:650; letter-spacing:-.012em; color:var(--paper) }
.anv-cas__i > span:last-child{
  margin-top:.35em; font-size:var(--step--1); line-height:1.55;
  color:rgba(246,242,234,.72);
}
.anv-cas__i--ok .anv-cas__p{ background:rgba(34,197,94,.16); color:var(--green) }
.anv-cas__i--non .anv-cas__p{ background:rgba(246,242,234,.1); color:rgba(246,242,234,.62) }

/* ── la date : deux cases, et une qui n'existe pas ────────────
   La ligne barrée est la seule chose que cette section avait à
   montrer. Un paragraphe sur la vie privée s'oublie ; un champ vide,
   rayé, à sa place dans le formulaire, ne s'oublie pas. */
.anv-fiche{ width:min(100%,364px) }
.anv-fiche .volet__corps{ display:grid; gap:15px; padding:18px }
.anv-fiche__l{ display:grid; gap:.4em }
.anv-fiche__lab{
  font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}
.anv-fiche__v{
  padding:.6em .78em; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:.88rem; font-weight:600;
  letter-spacing:-.01em;
}
.anv-fiche__deux{ display:flex; gap:9px }
.anv-fiche__v--jour{ width:66px; flex:none; text-align:center }
.anv-fiche__v--mois{ flex:1 }
.anv-fiche__non{
  margin-top:2px; padding-top:15px; display:grid; gap:.4em;
  border-top:1px dashed var(--line);
}
.anv-fiche__nonl{
  font-size:.8rem; color:var(--ink-3);
  text-decoration:line-through; text-decoration-color:rgba(109,101,88,.55);
}
.anv-fiche__nonl::before{
  content:"✕"; display:inline-block; margin-right:7px;
  text-decoration:none; font-size:.7rem; font-weight:700; color:var(--ink-3);
}
.anv-fiche__nonx{ font-size:.73rem; line-height:1.45; color:var(--ink-3) }

/* ══ assets/css/fiche/avis.css ══════════════════════════════ */
/* ============================================================
   FICHE « les avis Google »
   Ce que cette page doit prouver : un habitué laisse un avis quand on
   le lui demande au bon moment, le lien sous le pouce — et le tri
   entre ceux qui parlent de vous et ceux qui vous parlent.

   Quatre objets portent la démonstration, aucun n'est un
   paragraphe : la page d'avis dans le téléphone, le parcours en trois
   écrans, la même page avec deux notes, et la carte de l'objectif
   telle qu'un client la voit.

   Tout vient de style.css : la palette, l'échelle, les boutons. La
   seule couleur ajoutée est le jaune de Google, dans la vignette qui
   imite sa fiche — et nulle part ailleurs.
   ============================================================ */

.page-avis .tete .tel{ width:min(100%,268px) }

/* ── la page d'avis, dans le téléphone ────────────────────────
   Claire, pas un écran verrouillé : le client est DANS la page, il
   vient de toucher la cinquième étoile. L'objectif est poussé en bas,
   là où la vraie page le met. */
.avs-page{
  padding:52px 16px 18px; display:flex; flex-direction:column; gap:13px;
  background:var(--paper); color:var(--ink);
}
.avs-ens{ display:flex; align-items:center; gap:9px }
.avs-ens__logo{
  width:30px; height:30px; flex:none; border-radius:8px;
  background:var(--green); color:#06280f;
  font:700 .68rem/1 var(--sans); display:grid; place-items:center;
}
.avs-ens__c{ display:grid; line-height:1.2; min-width:0 }
.avs-ens__c b{ font-size:.74rem; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.avs-ens__c span{ font-size:.6rem; color:var(--ink-3) }
.avs-q{
  margin-top:10px; font-family:var(--serif); font-weight:600;
  font-size:1.18rem; line-height:1.12; letter-spacing:-.02em; text-wrap:balance;
}

/* ── les étoiles ─────────────────────────────────────────────
   Une seule règle de couleur : le laiton de la palette pour une
   étoile allumée, le trait pour une éteinte. */
.avs-stars{ display:flex; gap:3px; color:var(--line) }
.avs-stars svg{ width:30px; height:30px; fill:currentColor; flex:none }
.avs-stars--plein svg, .avs-stars svg.on{ color:var(--brass) }
.avs-stars--petit svg{ width:20px; height:20px }
.avs-stars--mini{ display:inline-flex; gap:1px; vertical-align:middle }
.avs-stars--mini svg{ width:12px; height:12px }
.avs-stars__leg{
  display:flex; justify-content:space-between; max-width:162px; margin-top:-8px;
  font-size:.58rem; color:var(--ink-3);
}

.avs-note{ font-size:.7rem; line-height:1.45; color:var(--ink-2); margin-top:4px }

.avs-obj{
  margin-top:auto; border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; background:#fffdf9; display:grid; gap:7px;
}
.avs-obj__l{ font-size:.66rem; color:var(--ink-3) }
.avs-obj__l b{ font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--ink); letter-spacing:-.02em }
.avs-barre{ display:block; height:7px; border-radius:999px; background:var(--paper-2); overflow:hidden }
.avs-barre i{ display:block; height:100%; background:var(--green); border-radius:999px }
.avs-obj__lot{ font-size:.62rem; color:var(--ink-2) }

/* ── le parcours : trois cadres de même hauteur ──────────────
   L'égalité fait l'argument : la demande, la note et l'avis pèsent
   pareil, et aucun n'est un tunnel. */
.avs-etapes{ margin-top:clamp(36px,5vw,56px); display:grid; gap:clamp(28px,4vw,38px) }
@media (min-width:820px){ .avs-etapes{ grid-template-columns:repeat(3,1fr) } }
.avs-etape{ display:grid; align-content:start; gap:.45em }
.avs-etape__quand{
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(246,242,234,.55);
}
.avs-etape__vue{
  margin:.4em 0 .8em; min-height:236px;
  border:1px solid rgba(246,242,234,.14); border-radius:18px; padding:16px;
  background:rgba(246,242,234,.05); display:grid; align-content:center; gap:12px;
}
.avs-etape__t{ font-size:var(--step-1); margin-top:.5em }
.avs-etape__x{ font-size:var(--step--1); line-height:1.55; color:rgba(246,242,234,.72) }

/* le SMS, tel qu'il arrive */
.avs-sms{ display:grid; gap:6px; width:min(100%,280px); margin-inline:auto }
.avs-sms__de{ font-size:.62rem; text-align:center; color:rgba(246,242,234,.55) }
.avs-sms__bulle{
  background:rgba(246,242,234,.14); border:1px solid rgba(246,242,234,.12);
  border-radius:16px 16px 16px 4px; padding:11px 13px;
  font-size:.8rem; line-height:1.42; color:var(--paper);
}
.avs-sms__bulle u{ display:block; margin-top:.35em; color:#6ee7a0; text-decoration-color:rgba(110,231,160,.5) }

/* notre page, en petit */
.avs-mini{
  width:min(100%,280px); margin-inline:auto; background:var(--paper); color:var(--ink);
  border-radius:14px; padding:14px; display:grid; gap:9px;
}
.avs-mini__q{ font-family:var(--serif); font-weight:600; font-size:.98rem; line-height:1.15; letter-spacing:-.015em }
.avs-mini__champ{
  border:1.5px solid var(--line); border-radius:10px; padding:8px 10px; min-height:44px;
  font-size:.68rem; line-height:1.4; color:var(--ink-3); background:#fffdf9;
}
.avs-mini__btn{
  background:var(--ink); color:var(--paper); border-radius:999px; text-align:center;
  padding:9px 12px; font-size:.7rem; font-weight:650; letter-spacing:-.01em;
}

/* la fiche Google, en vignette. Le seul endroit de la page qui n'est
   pas dans notre palette : c'est la leur, et elle doit se reconnaître. */
.avs-google{
  width:min(100%,280px); margin-inline:auto; background:#fff; color:#202124;
  border-radius:14px; padding:14px; display:grid; gap:6px;
}
.avs-google__fiche{ font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#5f6368 }
.avs-google__qui{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:.74rem }
.avs-google__qui b{ font-weight:650 }
.avs-google__qui span{ font-size:.62rem; color:#5f6368; white-space:nowrap }
.avs-google .avs-stars--mini svg{ color:#fbbc04 }
.avs-google__txt{ font-size:.74rem; line-height:1.45 }
.avs-merci{
  width:min(100%,280px); margin-inline:auto; display:flex; gap:8px; align-items:center;
  border-radius:12px; padding:8px 11px;
  background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.3);
  color:#6ee7a0; font-size:.72rem; font-weight:600; line-height:1.3;
}
.avs-merci span{
  width:18px; height:18px; flex:none; border-radius:50%;
  background:var(--green); color:#06280f; display:grid; place-items:center; font-size:.7rem;
}

/* ── le tri : la même page, deux notes ───────────────────────── */
.avs-tri{ display:grid; gap:14px; width:100% }
@media (min-width:600px){ .avs-tri{ grid-template-columns:1fr 1fr } }
.avs-mini--carte{
  width:100%; max-width:none; position:relative; padding-bottom:42px;
  border:1px solid var(--line); background:#fffdf9;
  box-shadow:0 12px 30px -22px rgba(20,17,13,.4);
}
.avs-badge{
  position:absolute; left:14px; bottom:12px; padding:3px 8px; border-radius:999px;
  font-size:.58rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.avs-badge--prive{ background:#fee4e2; color:#b42318 }
.avs-badge--google{ background:var(--green-soft); color:var(--green-ink) }

/* ── le merci : la carte de l'objectif ───────────────────────── */
.avs-merci-grille{
  margin-top:clamp(28px,4vw,44px); display:grid; gap:clamp(28px,5vw,60px); align-items:center;
}
@media (min-width:900px){ .avs-merci-grille{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.avs-merci-grille .faits{ margin-top:0 }
.avs-objcard{
  width:min(100%,420px); margin-inline:auto; background:var(--paper); color:var(--ink);
  border-radius:20px; padding:clamp(20px,3vw,28px); display:grid; gap:12px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.avs-objcard__t{ font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3) }
.avs-objcard__n{ font-size:.95rem; color:var(--ink-3) }
.avs-objcard__n b{ font-family:var(--serif); font-size:2.4rem; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--ink) }
.avs-barre--grande{ height:11px }
.avs-objcard__lot{ font-size:.92rem; color:var(--ink-2) }
.avs-objcard__billet{
  display:flex; gap:8px; align-items:center; padding-top:10px; border-top:1px solid var(--line);
  font-size:.9rem; font-weight:650; color:var(--green-ink);
}
.avs-objcard__urne{ font-size:.78rem; color:var(--ink-3) }

/* ── ce que vous voyez : le volet ────────────────────────────── */
.avs-volet{ width:min(100%,460px) }
.avs-volet__periode{
  margin-bottom:10px; font-size:.62rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.avs-tuiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.avs-tuile{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fffdf9; display:grid; gap:2px }
.avs-tuile b{ font-family:var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:-.02em; line-height:1 }
.avs-tuile span{ font-size:.66rem; color:var(--ink-3) }
.avs-tuile--vert b{ color:var(--green-ink) }
.avs-volet__titre{ margin:16px 0 4px; font-size:.82rem; font-weight:650 }
.avs-mot{ display:grid; gap:3px; padding:9px 0; border-top:1px solid var(--line) }
.avs-mot__qui{ display:flex; gap:8px; align-items:center; font-size:.74rem }
.avs-mot__qui b{ font-weight:650 }
.avs-mot__qui i{
  margin-left:auto; font-style:normal; font-size:.56rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:#b42318;
}
.avs-mot__qui i.vert{ color:var(--green-ink) }
.avs-mot__x{ font-size:.76rem; line-height:1.45; color:var(--ink-2) }

/* ══ assets/css/fiche/carte.css ══════════════════════════════ */
/* ============================================================
   FICHE « la carte »
   Ce que cette page doit prouver : la carte n'est pas une
   application de plus. Elle va se ranger à côté du billet de train,
   dans un endroit que le client ouvre déjà.

   D'où le seul objet possible en tête : un wallet, avec deux cartes
   qui étaient déjà là et la nôtre par-dessus. Un pass flottant sur
   fond blanc aurait dit « voici notre produit » ; celui-ci dit
   « voici où il atterrit », ce qui n'est pas la même promesse.
   ============================================================ */

/* ── le wallet dans le téléphone ──────────────────────────────
   Un peu plus court que le téléphone du socle : à 300 px de large,
   il faisait 636 px de haut et venait toucher l'en-tête fixe. */
.page-carte .tete .tel{ width:min(100%,272px) }

.wal{
  flex:1; min-height:0; display:flex; flex-direction:column;
  padding:46px 16px 20px; background:#f2efe8;
}
.wal__titre{
  font-family:var(--serif); font-size:1.45rem; font-weight:600;
  letter-spacing:-.025em; color:var(--ink); margin-bottom:16px;
}

/* La pile, comme un vrai wallet : la carte du dessus entière, les
   autres qui dépassent SOUS elle. Elles ne sont pas des cartes vides
   — ce sont les autres pass du client, et elles doivent avoir l'air
   d'appartenir à quelqu'un d'autre. D'où deux teintes qui ne sont pas
   les nôtres, tirées vers le bleu et le brique.

   Empilées au-dessus, elles laissaient un grand vide sous la carte et
   ne dépassaient que d'un cheveu. Sous elle, elles remplissent
   l'écran et racontent la bonne chose : la nôtre vient de se poser
   sur les autres. */
.wal__pile{ position:relative; display:grid }
.wal__carte{ position:relative; z-index:3; min-height:0 }
/* Elles portent leur nom. Deux aplats de couleur sans un mot se
   lisaient comme deux bandes décoratives ; nommées, ce sont les deux
   pass que la promesse cite trois lignes plus haut — le billet de
   train et la carte d'embarquement. Le haut de chacune est couvert
   par la carte au-dessus : le texte commence sous le recouvrement. */
.wal__dos{
  height:74px; margin-top:-14px; border-radius:14px;
  padding:22px 13px 0;
  box-shadow:0 -1px 0 rgba(255,255,255,.22) inset, 0 -6px 16px -8px rgba(20,17,13,.55);
}
.wal__dos span{
  display:block; font-size:.64rem; font-weight:650; letter-spacing:-.005em;
  color:rgba(255,255,255,.86);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wal__dos--1{ z-index:2; background:linear-gradient(150deg,#5b6a86,#3f4a5e) }
.wal__dos--2{ z-index:1; background:linear-gradient(150deg,#8a5a52,#6a413b) }

/* Le pass reprend l'échelle du héros : tout en em, pour qu'il
   rétrécisse avec le téléphone au lieu de déborder. */
.wal .pass{
  aspect-ratio:.84; gap:.7em; padding:1em .95em .95em; min-height:0;
  font-size:clamp(10px,2.6vw,12.5px);
  box-shadow:0 10px 24px -12px rgba(20,17,13,.65);
}
/* Le nom du commerce tient EN ENTIER. À 1.15em il sortait « Le Fournil
   de la G… » — la même enseigne s'écrivant en entier sur la carte web
   trois sections plus bas, la troncature se lisait comme un bogue et
   non comme un wallet. On rend au nom les pixels que prenaient le
   corps du titre et la mention « TAMPONS ». */
.wal .pass__shop{ font-size:1em; letter-spacing:-.02em } .wal .pass__badge{ font-size:1.2em }
.wal .pass__label{ font-size:.58em } .wal .pass__holder,.wal .pass__reward{ font-size:.98em }
.wal .field--grille{ max-width:100% }

/* « Mis à jour à l'instant » : la ligne qui fait toute la différence
   avec un carton. Une pastille verte qui bat doucement. */
/* Sous la pile, pas collée au bas de l'écran : en `margin-top:auto`
   elle laissait un grand vide entre la dernière carte et elle, et le
   vide se lisait comme un bogue plutôt que comme un wallet. */
.wal__maj{
  padding-top:18px;
  display:flex; align-items:center; gap:7px;
  font-size:.68rem; color:var(--ink-3); letter-spacing:-.005em;
}
.wal__maj i{
  width:6px; height:6px; border-radius:50%; background:var(--green); flex:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
  animation:wal-bat 2.6s ease-in-out infinite;
}
@keyframes wal-bat{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion:reduce){ .wal__maj i{ animation:none } }

/* ── les trois pas de l'ajout ───────────────────────────────── */
.pas{ display:grid; gap:0; width:min(100%,380px) }
.pas__i{ display:grid; grid-template-columns:auto 1fr; gap:16px; position:relative;
  padding-bottom:24px }
/* Le trait qui relie les pas. Il s'arrête au dernier : une flèche
   qui continue après la fin promet une quatrième étape. */
.pas__i::before{
  content:""; position:absolute; left:15px; top:34px; bottom:0; width:1.5px;
  background:linear-gradient(rgba(246,242,234,.28), rgba(246,242,234,.06));
}
.pas__i--fin{ padding-bottom:0 }
.pas__i--fin::before{ display:none }
.pas__n{
  width:31px; height:31px; border-radius:50%; flex:none;
  display:grid; place-items:center; position:relative; z-index:2;
  border:1.5px solid rgba(246,242,234,.3); background:var(--night);
  font-size:.85rem; font-weight:700; color:var(--paper);
}
.pas__i--fin .pas__n{ background:var(--green); border-color:var(--green); color:#06280f }
.pas__c{ display:grid; gap:.3em; padding-top:.25em; min-width:0 }
.pas__c b{ font-weight:650; letter-spacing:-.01em }
.pas__c > span{ color:rgba(246,242,234,.72); font-size:var(--step--1); line-height:1.55 }

/* Le QR, sur son carré blanc — comme il l'est toujours en vrai. */
.qr-img{
  width:104px; height:104px; margin-top:.7em;
  padding:9px; border-radius:10px; background:#fff;
}
.deux-wallets{ margin-top:.7em; display:flex; flex-wrap:wrap; gap:8px }
.wbtn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px 6px 9px; border-radius:8px;
  background:#000; color:#fff; font-size:.76rem; font-weight:650; letter-spacing:-.01em;
  border:1px solid rgba(255,255,255,.16);
}
.wbtn svg{ width:14px; height:14px; flex:none }

/* ── la carte web, dans un navigateur ───────────────────────── */
.webcarte{ display:grid; justify-items:center; gap:14px; background:var(--paper-2) }
.webcarte .pass{
  width:min(100%,264px); aspect-ratio:.84; min-height:0; gap:.7em;
  padding:1em 1.05em .95em; font-size:clamp(10.5px,2.4vw,12.5px);
}
.webcarte .pass__shop{ font-size:1.15em } .webcarte .pass__badge{ font-size:1.2em }
.webcarte .pass__label{ font-size:.62em }
.webcarte .pass__holder,.webcarte .pass__reward{ font-size:.98em }
.webcarte__note{
  font-size:var(--step--1); color:var(--ink-3); text-align:center;
  max-width:34ch; line-height:1.5;
}

/* ── comment on donne la carte : trois manières ─────────────── */
.trois{ margin-top:clamp(36px,5vw,56px); display:grid; gap:clamp(28px,4vw,32px) }
@media (min-width:840px){ .trois{ grid-template-columns:repeat(3,1fr) } }
.don{ display:grid; align-content:start; gap:.5em }
.don h3{ font-size:var(--step-1); margin-top:.5em }
/* `>` et non un descendant : les vignettes contiennent leurs propres
   paragraphes — le nom sur l'affichette, la mention sous le QR — et
   une règle descendante les peignait en crème CLAIR sur du papier
   crème. L'affichette sortait avec un QR et rien d'autre : le texte
   était là, invisible. */
.don > p{ color:rgba(246,242,234,.72); font-size:var(--step--1); line-height:1.55 }
/* Une hauteur FIXE pour les trois objets. En min-height, chaque
   vignette prenait la taille de son contenu : trois cadres inégaux,
   trois titres qui ne commençaient pas à la même ligne, et le
   sentiment que la troisième comptait moins que les deux autres. */
.don__vue{
  display:grid; place-items:center; height:296px;
  border:1px solid rgba(246,242,234,.14); border-radius:var(--r);
  background:rgba(246,242,234,.04); padding:22px;
}

/* l'affichette à imprimer. Proportions d'un A5 (1:√2) : une
   affichette carrée n'est pas une affichette, et la promesse est
   justement qu'elle sort prête à imprimer. */
.affiche{
  width:178px; aspect-ratio:1/1.414; background:var(--paper); color:var(--ink);
  border-radius:5px; padding:15px 13px; text-align:center;
  display:grid; align-content:center; justify-items:center; gap:10px;
  box-shadow:0 14px 26px -16px rgba(0,0,0,.75);
}
.affiche__nom{
  font-family:var(--serif); font-size:.9rem; font-weight:600;
  letter-spacing:-.02em; line-height:1.15; color:var(--ink);
}
.affiche .qr-img{ width:88px; height:88px; margin:0; padding:0; background:none }
.affiche__mot{ font-size:.62rem; color:var(--ink-2); line-height:1.35; max-width:18ch }
.affiche__fmt{
  font-size:.54rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding-top:8px; border-top:1px dashed var(--line);
  width:100%; margin-top:2px;
}

/* le mode présentoir : le même QR, mais c'est le téléphone qui fait
   l'affiche. Écran court — on ne montre pas un téléphone entier pour
   dire « posez-le contre la caisse ». */
.tel--court{ width:min(100%,148px); aspect-ratio:.58; border-radius:26px; padding:7px }
.tel--court .tel__ecran{ border-radius:20px }
.presentoir{
  display:grid; justify-items:center; align-content:center; gap:11px;
  padding:16px 12px; text-align:center;
}
.presentoir__nom{ font-size:.72rem; font-weight:650; color:var(--paper); letter-spacing:-.01em }
.presentoir .qr-img{ width:84px; height:84px; margin:0; padding:7px }
.presentoir__mot{ font-size:.63rem; color:rgba(246,242,234,.72); line-height:1.35 }

/* le lien, là où on le rencontre pour de vrai : une bio.
   Une barre d'adresse seule remplissait mal le cadre et ne disait
   rien — c'est l'endroit où on colle le lien qui fait l'argument. */
/* 238 px de large, le lien n'y tenait pas : il sortait « …/le-fourni »
   coupé, juste sous une promesse de lien « lisible et court ». Un
   argument que sa propre vignette dément ne vaut rien. */
.bio{
  width:min(100%,266px); display:grid; gap:10px;
  padding:15px 15px 14px; border-radius:12px;
  background:var(--paper); color:var(--ink);
  box-shadow:0 14px 26px -18px rgba(0,0,0,.7);
}
.bio__tete{ display:flex; align-items:center; gap:9px }
.bio__ava{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:1rem;
  background:var(--paper-2); border:1.5px solid var(--brass);
}
.bio__qui{ display:grid; min-width:0 }
.bio__qui b{ font-size:.76rem; font-weight:700; letter-spacing:-.01em }
.bio__qui span{ font-size:.64rem; color:var(--ink-3) }
.bio__mot{ font-size:.66rem; color:var(--ink-2); line-height:1.45 }
.bio__lien{
  display:flex; align-items:center; gap:6px;
  font-size:.62rem; font-weight:650; color:var(--green-ink);
  letter-spacing:-.01em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.bio__lien svg{ width:12px; height:12px; flex:none; stroke:currentColor; stroke-width:1.4;
  fill:none; stroke-linecap:round }
/* .58rem faisait 9 px d'un gris clair : la ligne qui dit OÙ vit le
   lien — l'argument de la vignette — était la moins lisible du cadre. */
.bio__ou{
  font-size:.63rem; color:var(--ink-2); line-height:1.4;
  padding-top:8px; border-top:1px solid var(--line);
}

/* ── la règle qui ne bouge pas ────────────────────────────────
   Un panneau de 44 rem calé à gauche laissait un tiers de la page
   vide à sa droite : le vide se lisait comme un bogue de gabarit, et
   la section, qui n'avait pas d'objet à montrer, avait l'air
   inachevée.
   Le panneau prend maintenant toute la largeur, et l'engagement se
   lit en deux colonnes : la promesse et ses trois coches à gauche,
   l'objet à droite — l'abonnement coupé, et sous lui les tampons du
   client qui n'ont pas bougé. C'était la seule section de la page
   qu'on ne pouvait que lire. */
.regle{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); padding:clamp(28px,4vw,44px);
  max-width:64rem; margin-inline:auto;
  display:grid; gap:0;
}
.regle__mot{ min-width:0 }
.regle .ticks{ margin-top:1.5em }
.regle__vue{ min-width:0; display:grid; place-items:center; margin-top:clamp(32px,5vw,40px) }
@media (min-width:900px){
  .regle{ grid-template-columns:minmax(0,1.06fr) minmax(0,.78fr);
    column-gap:clamp(36px,5vw,64px); align-items:center }
  .regle__vue{ margin-top:0 }
}

/* ce qui reste quand vous partez */
.tenu{ width:min(100%,296px) }
/* L'abonnement, barré : la ligne qui s'arrête. Elle est en haut parce
   que c'est elle qui disparaît — le reste tient sans elle. */
.tenu__abo{
  display:flex; align-items:center; gap:9px;
  padding:11px 13px; border:1px dashed var(--line); border-radius:12px;
  background:var(--paper); font-size:.76rem; color:var(--ink-3);
}
.tenu__pt{
  width:7px; height:7px; border-radius:50%; flex:none;
  border:1.5px solid var(--ink-3); opacity:.55;
}
.tenu__k{
  flex:1; min-width:0; text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tenu__v{
  flex:none; font-size:.62rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase;
}
/* Le fil descend de l'abonnement coupé vers la carte : la carte est
   dessous, elle ne tombe pas avec lui. */
.tenu__plaque{
  position:relative; margin-top:20px;
  border:1px solid var(--line); border-radius:14px; background:var(--paper);
  padding:14px; display:grid; gap:12px;
  box-shadow:0 18px 32px -26px rgba(20,17,13,.55);
}
.tenu__plaque::before{
  content:""; position:absolute; left:50%; top:-20px; translate:-50% 0;
  width:1.5px; height:20px; background:var(--line);
}
.tenu__tete{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.tenu__nom{
  min-width:0; font-size:.85rem; font-weight:650; letter-spacing:-.015em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tenu__cpt{
  flex:none; font-size:.95rem; font-weight:750; letter-spacing:-.025em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.tenu__grille{ width:100%; height:auto }
.tenu__etat{
  display:flex; align-items:center; gap:7px;
  padding-top:11px; border-top:1px solid var(--line);
  font-size:.72rem; font-weight:650; color:var(--green-ink);
}
.tenu__etat i{
  width:6px; height:6px; border-radius:50%; flex:none; background:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
}
.tenu__pied{
  margin-top:14px; text-align:center; line-height:1.5;
  font-size:var(--step--1); color:var(--ink-3);
}

.page-carte .wal .pass.marketing-pass:not(.pass--theme-original){aspect-ratio:.95}
.tenu__plaque{padding:0;background:transparent;border:0}
.tenu__plaque .marketing-pass{font-size:12px;padding:1em}
.tenu__etat{padding:14px 16px}
.bio__ava img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ══ assets/css/fiche/chiffres.css ══════════════════════════════ */
/* ============================================================
   FICHE « le tableau de bord »
   Ce que cette page doit prouver : les chiffres qu'on montre sont
   des chiffres qu'on peut croire. Une fiche sur la mesure qui ne
   montrerait aucune mesure serait le pire des aveux.

   D'où le parti pris : ici, on DESSINE les graphiques. Une courbe
   de trente jours, un histogramme par jour de semaine, une liste de
   clients. Et à chaque fois, à côté du chiffre, ce qui a servi à le
   fabriquer — l'opération à découvert, les jours qui comptent et
   ceux qui ne comptent pas.

   Une règle de couleur, une seule : chaque graphique n'a QU'UNE
   série. Le vert d'encre (--green-ink) porte la donnée, le gris
   porte ce qu'on met en retrait. Deux verts proches auraient donné
   une paire indistinguable — vérifié, pas supposé.
   ============================================================ */

/* Les graphiques vivent dans des volets CLAIRS, y compris au milieu
   d'une section nuit. Le socle ne fixe pas la couleur du texte du
   volet : sans cette ligne, tout ce qu'il contient hérite du crème
   de la section sombre et disparaît sur son propre fond. */
.page-chiffres .volet{ color:var(--ink) }

.page-chiffres{
  --serie:      #15803d;   /* la donnée */
  --serie-pale: rgba(21,128,61,.14); /* la même, en fond de jauge */
  --retrait:    #8b857c;   /* ce qui n'est pas le sujet */
  --grille:     #e6ded0;   /* un cran au-dessus du papier */
  --surf:       #fffdf9;   /* le fond des volets */
}

/* ── la tête : le premier coup d'œil du matin ───────────────── */
.page-chiffres .tete .volet{ width:min(100%,392px) }
.bord__corps{ display:grid; gap:0; background:var(--surf) }
.bord__quand{
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.bord__label{
  margin-top:1.1em; font-size:var(--step--1); color:var(--ink-2); line-height:1.35;
}
/* Le chiffre de tête : sans-serif, comme tous les chiffres du
   tableau de bord. En serif il aurait eu l'air d'un titre de
   brochure, pas d'une mesure. Chiffres proportionnels : à cette
   taille, des chiffres tabulaires « flottent ». */
.bord__hero{
  font-size:3.05rem; font-weight:750; letter-spacing:-.045em; line-height:1;
  color:var(--ink); margin-top:.06em;
}
.spark{ width:100%; height:auto; margin-top:14px }
.spark__aire{ fill:var(--serie); opacity:.1 }
.spark__trait{ fill:none; stroke:var(--serie); stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.spark__bout{ fill:var(--serie); stroke:var(--surf); stroke-width:2 }

.bord__tuiles{
  margin-top:16px; padding-top:15px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.tuile{ display:grid; gap:.1em; min-width:0 }
.tuile__v{
  font-size:1.5rem; font-weight:700; letter-spacing:-.035em; line-height:1.05; color:var(--ink);
}
.tuile__l{ font-size:.72rem; color:var(--ink-3); line-height:1.35 }

/* ── la courbe des trente jours ─────────────────────────────── */
.crb{ margin-top:clamp(30px,4vw,44px) }
.crb__corps{ background:var(--surf) }
.crb__svg{ width:100%; height:auto }
.crb__grille line{ stroke:var(--grille); stroke-width:1 }
.crb__tick text{
  fill:var(--ink-3); font:600 11px/1 var(--sans); text-anchor:end;
  font-variant-numeric:tabular-nums;
}
.crb__aire{ fill:var(--serie); opacity:.09 }
.crb__trait{ fill:none; stroke:var(--serie); stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
/* Le repère du jour d'envoi : plus discret que la donnée, sinon il
   devient une seconde série et ment sur ce qu'il est. */
.crb__repere{ stroke:var(--retrait); stroke-width:1; opacity:.55 }
/* Un anneau de la couleur du fond : le point reste lisible là où il
   croise sa propre courbe. */
.crb__pt{ fill:var(--serie); stroke:var(--surf); stroke-width:2 }
.crb__nom{ fill:var(--ink); font:650 12px/1 var(--sans); letter-spacing:-.01em }
.crb__axe text{ fill:var(--ink-3); font:500 11px/1 var(--sans) }

/* Ce qui entre dans la courbe, et ce qui n'y entre jamais.
   Dans le volet, sous le graphique : c'est une propriété de la
   mesure, pas une mention légale en bas de page. */
.hon{
  margin-top:clamp(16px,2.4vw,22px); padding-top:clamp(16px,2.4vw,20px);
  border-top:1px solid var(--line);
  display:grid; gap:16px 30px;
}
@media (min-width:620px){ .hon{ grid-template-columns:1fr 1fr } }
.hon__t{
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  display:flex; align-items:center; gap:7px;
}
.hon__t::before{
  content:""; width:15px; height:15px; border-radius:50%; flex:none;
  background:var(--serie-pale);
  background-repeat:no-repeat; background-position:center;
}
.hon__t--oui{ color:var(--serie) }
.hon__t--oui::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.8 8.4 9.4 3.6' fill='none' stroke='%2315803d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hon__t--non{ color:var(--ink-3) }
/* background-color, jamais le raccourci « background » : le raccourci
   remettrait à zéro le no-repeat et le centrage posés au-dessus, et
   la croix se retrouverait collée dans l'angle. */
.hon__t--non::before{
  background-color:rgba(20,17,13,.07);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 3.6 8.4 8.4M8.4 3.6 3.6 8.4' fill='none' stroke='%236d6558' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hon__l{ margin-top:.7em; display:grid; gap:.45em }
.hon__l li{
  font-size:var(--step--1); color:var(--ink-2); line-height:1.45;
  padding-left:15px; position:relative;
}
.hon__l li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--serie); opacity:.55;
}
.hon__l--non li{ color:var(--ink-3) }
.hon__l--non li::before{ background:var(--ink-3); opacity:.4 }

/* ── les jours de la semaine ────────────────────────────────── */
.jrs{ width:min(100%,420px) }
.jrs__corps{ background:var(--surf) }
.jrs__svg{ width:100%; height:auto }
.jrs__grille line{ stroke:var(--grille); stroke-width:1 }
.jrs__tick text{
  fill:var(--ink-3); font:600 10px/1 var(--sans); text-anchor:end;
  font-variant-numeric:tabular-nums;
}
/* Six jours en retrait, un seul porté par la couleur. Un
   histogramme arc-en-ciel ferait croire à sept séries — il n'y en a
   qu'une : des passages. */
.jrs__barres path{ fill:var(--retrait) }
.jrs__barres .jrs__best{ fill:var(--serie) }
.jrs__val{
  fill:var(--ink); font:700 12px/1 var(--sans); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.jrs__jour text{ fill:var(--ink-3); font:500 11px/1 var(--sans) }
/* Le meilleur jour se distingue par la GRAISSE, pas par la couleur :
   le vert appartient aux barres, pas au texte. */
.jrs__jour .jrs__jour--best{ fill:var(--ink); font-weight:700 }
.jrs__ferme{ fill:var(--ink-3); font:600 9.5px/1 var(--sans); letter-spacing:.02em }
.jrs__pied{
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
  font-size:.74rem; color:var(--ink-3); line-height:1.45;
}

/* ── la pesée : le calcul à découvert ───────────────────────── */
.calc{
  width:min(100%,392px); color:var(--ink);
  background:var(--paper); border-radius:var(--r);
  padding:clamp(20px,2.8vw,26px);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.7);
}
.calc__tete{
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:.9em; border-bottom:1px solid var(--line);
}
.calc__lignes{ margin:0; display:grid; gap:.05em }
.calc__l{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:.65em 0; border-bottom:1px solid var(--line);
}
.calc__l dt{ font-size:var(--step--1); color:var(--ink-2); line-height:1.35 }
.calc__l dd{
  margin:0; font-size:1.06rem; font-weight:700; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; flex:none;
}
/* Le ticket moyen est un RÉGLAGE, et cela doit se voir : c'est le
   seul chiffre de la page que le commerçant fournit lui-même. */
.calc__champ{
  display:inline-flex; align-items:center; gap:7px;
  padding:.3em .6em; border:1.5px solid var(--line); border-radius:9px;
  background:var(--surf); font-size:.96rem;
}
.calc__champ svg{ width:12px; height:12px; fill:var(--ink-3); flex:none }
/* Le trait est en pointillé : c'est une addition de comptoir, pas un
   bilan. La forme dit déjà ce que la note dira en mots. */
.calc__egal{
  margin-top:1.1em; padding-top:1.1em; border-top:2px dashed var(--line);
  display:flex; align-items:baseline; justify-content:flex-end; gap:.35em;
}
.calc__signe{ font-size:1.5rem; font-weight:600; color:var(--ink-3); line-height:1 }
.calc__somme{
  font-size:2.3rem; font-weight:750; letter-spacing:-.04em; line-height:1; color:var(--serie);
}
.calc__aveu{
  margin-top:1em; font-size:.76rem; color:var(--ink-3); line-height:1.5;
}

/* ── ceux qui s'éloignent, ceux qui reviennent ──────────────── */
.paire{ margin-top:clamp(34px,5vw,52px); display:grid; gap:clamp(20px,3vw,26px) }
@media (min-width:860px){ .paire{ grid-template-columns:1fr 1fr } }
/* Deux panneaux de MÊME hauteur : en hauteur libre, celui de droite
   flottait plus haut et semblait compter moins. */
.pan{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surf);
  padding:clamp(22px,3vw,30px);
  display:grid; align-content:start; gap:1.15em;
}
.pan__t{ font-size:var(--step-1) }
.pan__x{ font-size:var(--step--1); color:var(--ink-3); line-height:1.55 }

.loin{ display:grid; gap:0 }
.loin__i{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:.62em 0; border-bottom:1px solid var(--line);
}
.loin__i:first-child{ border-top:1px solid var(--line) }
.loin__qui{ font-weight:650; letter-spacing:-.01em; font-size:var(--step--1) }
.loin__j{ font-size:.76rem; color:var(--ink-3); flex:none }
.loin__j b{
  font-size:1.02rem; font-weight:750; color:var(--ink); letter-spacing:-.025em;
  margin-right:.35em; font-variant-numeric:tabular-nums;
}

/* Dix-sept cases : quatorze qui comptent, trois qui ne comptent pas.
   C'est la définition d'un « jour d'ouverture », en objet plutôt
   qu'en phrase. */
.cal{ display:grid; gap:.75em }
.cal__t{
  font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}
.cal__ligne{ display:flex; flex-wrap:wrap; gap:5px }
.cal__ligne i, .cal__k i{
  width:14px; height:14px; border-radius:4px; flex:none;
  background:var(--serie); opacity:.85;
}
.cal__ligne .cal__off, .cal__k .cal__off{
  opacity:1; background:var(--paper-2);
  background-image:linear-gradient(135deg,transparent 44%,var(--ink-3) 44%,var(--ink-3) 56%,transparent 56%);
}
.cal__leg{ display:flex; flex-wrap:wrap; gap:6px 18px }
.cal__k{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; color:var(--ink-3);
}

/* Quarante et un messages, neuf revenus. Une proportion se compte
   mieux qu'elle ne se lit : chaque point est un client. */
.pts{ width:min(100%,278px); height:auto }
.pt{ fill:var(--serie-pale) }
.pt--on{ fill:var(--serie) }
.pts__leg{ fill:var(--ink-3); font:500 11px/1 var(--sans) }

.ram{ display:grid; gap:0 }
.ram__i{
  display:flex; align-items:baseline; gap:12px;
  padding:.55em 0; border-bottom:1px solid var(--line);
}
.ram__i:first-child{ border-top:1px solid var(--line) }
.ram__v{
  font-size:1.1rem; font-weight:750; letter-spacing:-.028em; color:var(--ink);
  min-width:3.2em; flex:none; font-variant-numeric:tabular-nums;
}
.ram__i--on .ram__v{ color:var(--serie) }
.ram__l{ font-size:var(--step--1); color:var(--ink-2); line-height:1.45 }

/* ── la liste des clients ───────────────────────────────────── */
.cli{ width:min(100%,470px) }
.cli__corps{ background:var(--surf); padding-bottom:clamp(12px,1.8vw,16px) }
.cli__barre{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.cli__chercher{
  flex:1; min-width:120px;
  display:inline-flex; align-items:center; gap:7px;
  padding:.45em .7em; border:1.5px solid var(--line); border-radius:9px;
  background:var(--paper-2); font-size:.76rem; color:var(--ink-3);
}
.cli__chercher svg{
  width:13px; height:13px; flex:none; fill:none; stroke:var(--ink-3);
  stroke-width:1.6; stroke-linecap:round;
}
.cli__csv{
  flex:none; padding:.5em .85em; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-size:.72rem; font-weight:650; letter-spacing:-.01em;
}
.cli__tab{
  width:100%; border-collapse:collapse; margin-top:4px;
  font-size:.78rem; table-layout:fixed;
}
.cli__tab th{
  text-align:left; padding:.85em 6px .55em 0;
  font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:1px solid var(--line);
}
.cli__tab td{
  padding:.62em 6px .62em 0; border-bottom:1px solid var(--line);
  color:var(--ink-2); letter-spacing:-.005em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cli__tab td:first-child{ color:var(--ink); font-weight:650 }
.cli__tab th:nth-child(2), .cli__tab td:nth-child(2){ width:20% }
.cli__tab th:nth-child(3), .cli__tab td:nth-child(3){ width:26% }
.cli__tab th:last-child, .cli__tab td:last-child{ width:31%; padding-right:0 }
.cli__n{ font-variant-numeric:tabular-nums }
.cli__d{ color:var(--ink-3) }
.et{
  display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:bottom;
  padding:.22em .6em; border-radius:999px;
  font-size:.66rem; font-weight:650; letter-spacing:-.005em;
}
.et--hab{ background:var(--green-soft); color:var(--serie) }
.et--new{ background:rgba(168,129,60,.16); color:#7c5c22 }
.et--loin{ background:var(--paper-2); color:var(--ink-3) }
.cli__pied{
  margin-top:12px; font-size:.72rem; color:var(--ink-3); line-height:1.45;
}

/* ── petits écrans ──────────────────────────────────────────────
   Le piège des graphiques dessinés : le texte d'un SVG suit
   l'échelle du dessin. La courbe des trente jours fait 640 unités de
   large ; sur un ordinateur elle est tirée à 1 040 px et ses 11
   unités de libellé s'affichent à 18 px, mais sur un téléphone elle
   tombe à 320 px et les mêmes libellés à 5,5 px — plus petits que
   les mentions légales d'un contrat. On les regrossit à mesure que
   le dessin rétrécit, pour qu'ils restent lus à peu près à la même
   taille partout. */
@media (max-width:620px){
  .crb__tick text{ font-size:16px }
  .crb__axe text{ font-size:16px }
  .crb__nom{ font-size:17px }
}
@media (max-width:479px){
  .bord__hero{ font-size:2.6rem }
  .calc__somme{ font-size:2rem }
  .cli__tab{ font-size:.72rem }
  .cli__tab th:nth-child(2), .cli__tab td:nth-child(2){ width:17% }

  .crb__tick text{ font-size:21px }
  .crb__axe text{ font-size:20px }
  .crb__nom{ font-size:22px }

  .jrs__tick text{ font-size:12.5px }
  .jrs__jour text{ font-size:13px }
  .jrs__val{ font-size:15px }
  .jrs__ferme{ font-size:11.5px }
}

/* ══ assets/css/fiche/compter.css ══════════════════════════════ */
/* ============================================================
   FICHE « compter » — tampons, paliers ou points
   Ce que cette page doit prouver : la façon de compter n'est pas un
   réglage caché, c'est un CHOIX, et les trois choix produisent trois
   cartes visiblement différentes.

   D'où deux partis pris :
     — l'objet de tête n'est pas une carte mais l'écran où l'on coche.
       Une carte en tête aurait dit « voici le produit » ; l'écran de
       choix dit « voici votre décision », qui est le sujet.
     — la section forte n'explique pas les trois modes, elle les POSE
       côte à côte. Trois paragraphes ne se comparent pas ; trois
       cartes se comparent d'un coup d'œil.

   Tout ce qui est ici est préfixé « cpt- » : sept autres fiches
   écrivent dans la même feuille construite, et une classe .trio ou
   .edit y serait un accident qui attend son heure.
   ============================================================ */

/* ── l'em des titres ─────────────────────────────────────────
   style.css peint tout `em` en --ink-2, une encre presque noire. Sur
   une section sombre, le mot qui porte le titre devenait invisible :
   « La valeur se choisit AVANT de viser » sortait avec un trou à la
   place du seul mot qui compte. Les fiches n'ont pas de règle pour
   les h2 — celle-ci est donc à poser ici, et dans les deux fonds. */
.page-compter .h2 em{ font-style:italic; color:var(--green-ink) }
.page-compter .section--dark .h2 em{ color:var(--green) }

/* ── l'écran de choix, en tête ───────────────────────────────
   Le volet du socle, rempli des trois modes. La ligne cochée porte le
   vert de marque : sur une capture, c'est le seul endroit où l'œil
   doit tomber en premier. */
.page-compter .tete .volet{ max-width:420px }
.cpt-modes{ display:grid; gap:10px }
.cpt-modes__t{
  font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.3em;
}
.cpt-opt{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 15px; border-radius:11px;
  border:1.5px solid var(--line); background:var(--paper);
}
.cpt-opt--on{ border-color:var(--green); background:var(--green-soft) }
/* la pastille du bouton radio : un cercle vide, un cercle plein */
.cpt-opt__r{
  width:17px; height:17px; border-radius:50%; flex:none; margin-top:2px;
  border:1.5px solid var(--line); background:#fff;
}
.cpt-opt--on .cpt-opt__r{
  border-color:var(--green-ink); background:var(--green-ink);
  box-shadow:0 0 0 3.5px #fff inset;
}
.cpt-opt__c{ display:grid; gap:.2em; min-width:0 }
.cpt-opt__n{ font-size:.94rem; font-weight:650; letter-spacing:-.012em; color:var(--ink) }
.cpt-opt__x{ font-size:.78rem; color:var(--ink-2); line-height:1.45 }
.cpt-modes__pied{
  margin-top:.4em; padding-top:12px; border-top:1px solid var(--line);
  font-size:.75rem; color:var(--ink-3); line-height:1.5;
}

/* ── les trois cartes, côte à côte ───────────────────────────
   Une hauteur FIXE pour les trois vignettes : en hauteur libre, une
   carte plus haute d'une ligne décale son titre, et trois titres qui
   ne commencent pas à la même ligne donnent l'impression qu'un des
   trois modes compte moins que les autres. */
.cpt-trio{ margin-top:clamp(36px,5vw,56px); display:grid; gap:clamp(30px,4vw,34px) }
@media (min-width:860px){ .cpt-trio{ grid-template-columns:repeat(3,1fr) } }
.cpt-mode{ display:grid; align-content:start; gap:.35em }
.cpt-mode__vue{ display:grid; place-items:center; height:420px; margin-bottom:.6em }

/* La carte reprend l'échelle du héros : tout en em, pour qu'elle
   rétrécisse avec sa colonne au lieu de déborder. En rem, le gros
   chiffre de la jauge sortait du cadre dès qu'on passait à deux
   colonnes. */
.cpt-mode .pass{
  width:min(100%,332px); aspect-ratio:.84; min-height:0; gap:.7em;
  padding:1em 1.1em .95em; font-size:clamp(12px,4vw,13.5px);
  box-shadow:0 20px 40px -22px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.24) inset;
  /* Un liseré, sinon la carte encre sur la section nuit n'a plus de
     bord : au téléphone, elle se dissolvait dans le fond et le trio
     devenait deux cartes et un trou. */
  outline:1px solid rgba(246,242,234,.16); outline-offset:-1px;
  /* Le pass prévoit quatre rangées — haut, bande photo, corps, pied —
     et la souplesse est donnée au PIED. Sans photo, la bande
     disparaît de la grille : le corps hérite d'une rangée serrée, le
     pied de toute la place, et chaque carte sortait avec un tiers de
     vide sous ses tampons. Trois cartes ainsi côte à côte se lisaient
     comme trois bogues. On rend la souplesse au corps. */
  grid-template-rows:auto 1fr auto;
}
.cpt-mode .pass__body{ align-content:center }
.cpt-mode .pass__shop{ font-size:1.15em; padding-top:.15em }
.cpt-mode .pass__badge{ font-size:1.2em }
.cpt-mode .pass__label{ font-size:.62em }
.cpt-mode .pass__sub{ font-size:.62em }
.cpt-mode .pass__goalv{ font-size:1.42em }
.cpt-mode .pass__holder,.cpt-mode .pass__reward{ font-size:.98em }
.cpt-mode .pass .field--jauge{ width:5.6em }
.cpt-mode .pass .field--chemin{ margin-top:.3em }

.cpt-mode__n{ font-size:var(--step-1) }
/* Le « pour qui » : une ligne en capitales, verte. Elle fait le tri à
   la place du lecteur — c'est la seule chose qu'il cherche vraiment
   dans une comparaison à trois. */
.cpt-mode__p{
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--green); line-height:1.4;
}
/* Nommée, jamais « .cpt-mode p » : les cartes portent leurs propres
   textes, et une règle descendante les repeindrait en crème sur du
   crème — c'est-à-dire en rien du tout. */
.cpt-mode__x{ color:rgba(246,242,234,.72); font-size:var(--step--1); line-height:1.6 }
.cpt-trio__leg{ margin-top:clamp(28px,4vw,38px); max-width:56ch }

/* ── les paliers : le réglage, puis ce qu'il donne ───────────
   Deux boîtes et une flèche. La flèche n'est pas un ornement : sans
   elle, on lit deux objets sans lien, et le point de la section — le
   signe se pose à la case exacte — se perd. */
.cpt-flux{ width:min(100%,400px); display:grid; justify-items:stretch }

.cpt-edit{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); padding:16px 16px 14px;
}
.cpt-edit__nom{
  font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.9em;
}
/* Les colonnes sont en REM, jamais en em : l'en-tête est écrit en
   .6rem et les lignes en 1rem, si bien qu'un `4.2em` donnait 40 px
   d'un côté et 67 px de l'autre. Les deux grilles ne se
   superposaient plus, et « Passage » débordait sur « On gagne » —
   les deux mots se lisaient collés, « PASSAGEON GAGNE ». */
.cpt-edit__tete,.cpt-edit__l{
  display:grid; grid-template-columns:4.2rem 1fr 2.8rem; gap:10px; align-items:center;
}
/* `nowrap` : « Au passage » passait à la ligne et décalait les deux
   autres en-têtes d'une demi-hauteur — trois colonnes qui ne
   commencent pas au même endroit ne se lisent plus comme un tableau. */
.cpt-edit__tete{
  font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); padding:0 2px .5em; align-items:end; white-space:nowrap;
}
.cpt-edit__tete span:last-child,.cpt-edit__s{ text-align:center }
.cpt-edit__l + .cpt-edit__l{ margin-top:8px }
/* Les champs : le seuil est un petit champ numérique, la récompense un
   champ large. C'est la forme exacte du formulaire — un tableau
   l'aurait rendu plus propre et moins vrai. */
.cpt-edit__n,.cpt-edit__r,.cpt-edit__s{
  border:1.5px solid var(--line); border-radius:9px; background:#fff;
  padding:9px 11px; font-size:.85rem; color:var(--ink); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cpt-edit__n{ font-weight:700; font-variant-numeric:tabular-nums; text-align:center }
.cpt-edit__s{ padding-inline:0 }
.cpt-edit__plus{
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:.78rem; font-weight:650; color:var(--green-ink);
  display:flex; align-items:center; gap:.5em;
}
.cpt-edit__plus span{
  width:17px; height:17px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:.85rem; line-height:1;
  background:var(--green-soft); color:var(--green-ink);
}

.cpt-flux__mot{
  display:flex; align-items:center; gap:.6em; padding:14px 2px 12px;
  font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}
.cpt-flux__fleche{
  width:2px; height:26px; flex:none; margin-left:8px; position:relative;
  background:linear-gradient(var(--line),var(--ink-3));
}
.cpt-flux__fleche::after{
  content:""; position:absolute; left:50%; bottom:0; translate:-50% 0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:7px solid var(--ink-3);
}

/* La bande : le corps de la carte, isolé. Une carte entière aurait
   redit la section d'avant ; ce qui compte ici, c'est la rangée de
   cases et les deux signes posés dedans. */
.cpt-bande{
  border-radius:16px; padding:15px 17px 17px; background:#14110d; color:var(--paper);
  box-shadow:0 18px 36px -24px rgba(20,17,13,.7);
}
.cpt-bande__top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px }
.cpt-bande__shop{
  font-size:.95rem; font-weight:700; letter-spacing:-.022em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cpt-bande__badge{
  flex:none; font-size:.85rem; font-weight:750; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; opacity:.85;
}
.cpt-bande__f{ width:100%; height:auto; margin-top:14px; display:block }

/* ── l'écran de scan, en mode points ─────────────────────────
   L'ordre du geste, de haut en bas : on vise, on lit la valeur, on
   corrige d'un doigt. Le fond n'est pas noir mais un dégradé sourd —
   un écran d'appareil photo n'est jamais noir, et un rectangle noir
   se lit comme un téléphone éteint. */
.cpt-tel{ width:min(100%,282px) }
.cpt-scan{ position:relative; padding:0 }
.cpt-scan__cam{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 42% at 50% 26%, rgba(168,129,60,.28), transparent 70%),
    radial-gradient(50% 30% at 18% 62%, rgba(246,242,234,.10), transparent 70%),
    linear-gradient(175deg,#241f18,#0b0906 62%);
}
/* Le viseur : quatre équerres, pas un cadre plein. C'est le dessin
   qu'on reconnaît sans le lire. */
.cpt-scan__viseur{
  position:absolute; z-index:1; top:24%; left:50%; translate:-50% 0;
  width:150px; height:150px;
}
.cpt-scan__viseur i{ position:absolute; width:30px; height:30px; border:2.5px solid rgba(246,242,234,.9) }
.cpt-scan__viseur i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; border-radius:8px 0 0 0 }
.cpt-scan__viseur i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; border-radius:0 8px 0 0 }
.cpt-scan__viseur i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 8px }
.cpt-scan__viseur i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 8px 0 }
.cpt-scan__hint{
  position:absolute; z-index:2; top:calc(24% + 168px); left:0; right:0;
  text-align:center; padding-inline:26px;
  font-size:.72rem; color:rgba(246,242,234,.68); line-height:1.4;
}
/* Le bas de l'écran : la valeur, les raccourcis, la saisie manuelle.
   Posé sur un voile, pas sur le vide — sinon le texte flotte sur la
   caméra et devient illisible dès que la scène est claire. */
.cpt-scan__bas{
  position:relative; z-index:3; margin-top:auto; width:100%;
  padding:16px 15px calc(15px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(rgba(11,9,6,0), rgba(11,9,6,.92) 26%);
  display:grid; justify-items:center; gap:11px;
}
.cpt-scan__v{ display:flex; align-items:baseline; gap:.35em; color:var(--paper) }
.cpt-scan__v b{ font-size:2.1rem; font-weight:800; letter-spacing:-.05em; line-height:1 }
.cpt-scan__v span{ font-size:.8rem; font-weight:650; color:rgba(246,242,234,.62) }
/* Les cinq pastilles tiennent sur UNE ligne. En deux lignes, le « … »
   restait seul en dessous et avait l'air d'un bouton oublié plutôt que
   d'un sixième raccourci. */
.cpt-scan__chips{ display:flex; flex-wrap:nowrap; justify-content:center; gap:6px }
.cpt-scan__chips span{
  min-width:34px; padding:7px 8px; border-radius:999px; text-align:center;
  border:1.5px solid rgba(246,242,234,.24); color:rgba(246,242,234,.86);
  font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1;
}
.cpt-scan__chips .is-on{ background:var(--green); border-color:var(--green); color:#06280f }
.cpt-scan__autre{ font-weight:600 }
.cpt-scan__manuel{
  margin-top:2px; font-size:.72rem; color:rgba(246,242,234,.5);
  text-decoration:underline; text-underline-offset:3px;
}

/* ── la caisse : un réglage qu'on lit, un ticket qu'on tient ── */
.cpt-regle{
  width:min(100%,420px);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); padding:16px 17px 15px;
}
.cpt-regle__nom{
  font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.9em;
}
.cpt-regle__champ{ display:flex; align-items:center; justify-content:space-between; gap:14px }
.cpt-regle__lab{ font-size:.88rem; font-weight:600; color:var(--ink); line-height:1.3 }
.cpt-regle__val{
  flex:none; min-width:76px; padding:10px 12px; text-align:center;
  border:1.5px solid var(--line); border-radius:9px; background:#fff;
  font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink);
}
/* La mention du réglage, telle quelle. C'est elle qui empêche cette
   section de promettre ce qui n'existe pas encore — la retirer
   ferait de la page une plaquette. */
.cpt-regle__aide{
  margin-top:.8em; font-size:.75rem; color:var(--ink-3); line-height:1.5;
  border-left:2px solid var(--brass); padding-left:10px;
}

.cpt-chaine{
  width:min(100%,420px); margin-top:22px;
  display:grid; gap:18px; align-items:center; justify-items:center;
}
@media (min-width:420px){ .cpt-chaine{ grid-template-columns:auto 1fr; gap:22px } }

/* Le ticket : proportions d'un rouleau de caisse, bord du bas déchiré.
   Le déchirement se fait au masque plutôt qu'en image — un ticket net
   au millimètre a l'air d'une facture, pas d'un ticket. */
.cpt-ticket{
  --z:7px;
  width:166px; background:#fffdf8; color:var(--ink);
  padding:14px 14px calc(var(--z) + 12px);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  rotate:-1.6deg;
  /* Le bas déchiré, en clip-path plutôt qu'en masque : le masque
     conique donnait un bord droit — un ticket coupé au massicot n'est
     plus un ticket. Le clip emporte l'ombre portée avec lui, d'où le
     `drop-shadow` qui, lui, suit la découpe. */
  filter:drop-shadow(0 10px 12px rgba(20,17,13,.34));
  clip-path:polygon(0 0, 100% 0, 100.0% calc(100% - var(--z)), 96.4% 100%, 92.9% calc(100% - var(--z)), 89.3% 100%, 85.7% calc(100% - var(--z)), 82.1% 100%, 78.6% calc(100% - var(--z)), 75.0% 100%, 71.4% calc(100% - var(--z)), 67.9% 100%, 64.3% calc(100% - var(--z)), 60.7% 100%, 57.1% calc(100% - var(--z)), 53.6% 100%, 50.0% calc(100% - var(--z)), 46.4% 100%, 42.9% calc(100% - var(--z)), 39.3% 100%, 35.7% calc(100% - var(--z)), 32.1% 100%, 28.6% calc(100% - var(--z)), 25.0% 100%, 21.4% calc(100% - var(--z)), 17.9% 100%, 14.3% calc(100% - var(--z)), 10.7% 100%, 7.1% calc(100% - var(--z)), 3.6% 100%, 0.0% calc(100% - var(--z)));
}
.cpt-ticket__nom{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; padding-bottom:9px; margin-bottom:9px;
  border-bottom:1px dashed rgba(20,17,13,.28);
}
.cpt-ticket__l,.cpt-ticket__t{
  display:flex; justify-content:space-between; gap:10px; font-size:.68rem; line-height:1.7;
}
.cpt-ticket__l span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cpt-ticket__l b{ font-weight:500; flex:none }
.cpt-ticket__t{
  margin-top:9px; padding-top:9px; border-top:1px dashed rgba(20,17,13,.28);
  font-size:.76rem; font-weight:700;
}

.cpt-chaine__d{ display:grid; gap:.25em; justify-items:start; min-width:0 }
.cpt-chaine__regle{
  display:inline-block; padding:6px 11px; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line);
  font-size:.72rem; font-weight:700; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
/* La flèche courte entre la règle et le résultat : elle dit « donc ».
   Sans elle, deux étiquettes empilées ne racontent pas un calcul. */
.cpt-chaine__regle + .cpt-chaine__out{ margin-top:.55em; position:relative }
.cpt-chaine__regle + .cpt-chaine__out::before{
  content:"↓"; display:block; font-size:.9rem; color:var(--ink-3);
  line-height:1; margin-bottom:.3em; font-weight:700;
}
.cpt-chaine__out{
  font-family:var(--serif); font-size:var(--step-2); font-weight:600;
  letter-spacing:-.03em; line-height:1.05; color:var(--green-ink);
}
.cpt-chaine__sous{ font-size:.75rem; color:var(--ink-3); line-height:1.5 }

/* Le bloc « on la branche avec vous ». Encadré, parce qu'il change de
   registre : tout ce qui précède se règle seul, celui-ci demande de
   nous écrire. Un bouton posé dans le flux du texte n'aurait pas dit
   cette différence. */
.cpt-brancher{
  margin-top:clamp(44px,6vw,72px); max-width:44rem; margin-inline:auto;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); padding:clamp(26px,4vw,40px); text-align:center;
}
.cpt-brancher__p{ color:var(--ink-2); line-height:1.65; max-width:52ch; margin-inline:auto }
.cpt-caisses{ margin-top:1.5em; display:flex; flex-wrap:wrap; justify-content:center; gap:9px }
.cpt-caisses span{
  padding:8px 15px; border-radius:999px; background:var(--paper);
  border:1px solid var(--line); font-size:.82rem; font-weight:650; color:var(--ink-2);
}
.cpt-brancher__cta{ margin-top:1.6em }
.cpt-brancher__cta .btn{ background:var(--green); border-color:var(--green); color:#06280f }
.cpt-brancher__cta .btn:hover{ background:#2ee06b; border-color:#2ee06b }
.cpt-brancher__note{ margin-top:1.1em; font-size:var(--step--1); color:var(--ink-3) }

/* ── au téléphone ────────────────────────────────────────────
   Le ticket et sa suite passent l'un sous l'autre : côte à côte sous
   420 px, le ticket devenait une bande de 90 px où plus rien ne se
   lisait. */
@media (max-width:719px){
  .cpt-mode__vue{ height:auto; margin-bottom:.9em }
  .cpt-mode .pass{ width:min(100%,320px) }
}

.cpt-flux>.marketing-pass{font-size:12px;padding:1em}
.cpt-edit__s svg{width:1.2em;height:1.2em;display:block}

/* ══ assets/css/fiche/comptoir.css ══════════════════════════════ */
/* ============================================================
   FICHE « au comptoir »
   Ce que cette page doit prouver : le tampon se pose en deux
   secondes, et il ne se trompe pas de carte.

   Un seul écran ne prouvait rien — « voici un scanner » est une
   affirmation. Ce qui prouve, c'est l'enchaînement : la visée, ce
   qu'on voit AVANT de valider, et le retour. D'où trois téléphones
   en section, et une tête qui montre les DEUX téléphones du
   comptoir : celui du client, et le vôtre une seconde après.

   Tout est préfixé .page-comptoir. Les huit fiches finissent
   concaténées dans assets/css/fiche.css : un nom de classe non
   préfixé est un nom qu'une autre fiche peut reprendre.
   ============================================================ */

/* ── le petit appareil ────────────────────────────────────────
   Le téléphone du socle est dessiné pour 300 px. En dessous, son
   rayon de 44 px et son encoche de 96 px le font ressembler à un
   jouet : on redescend les proportions avec la largeur. */
.page-comptoir .tel--client,
.page-comptoir .tel--pro,
.page-comptoir .tel--ecran{ border-radius:32px; padding:7px }
.page-comptoir .tel--client .tel__ecran,
.page-comptoir .tel--pro .tel__ecran,
.page-comptoir .tel--ecran .tel__ecran{ border-radius:26px }
.page-comptoir .tel--client .tel__encoche,
.page-comptoir .tel--pro .tel__encoche,
.page-comptoir .tel--ecran .tel__encoche{ width:64px; height:17px; top:6px }
.page-comptoir .tel--client{ border-radius:26px; padding:6px }
.page-comptoir .tel--client .tel__ecran{ border-radius:21px }
.page-comptoir .tel--client .tel__encoche{ width:50px; height:14px; top:5px }

/* ── la tête : les deux téléphones du comptoir ────────────────
   Le client tend le sien, vous répondez avec le vôtre. Une capture
   d'écran seule aurait montré un logiciel ; deux téléphones qui se
   font face montrent le moment. */
.page-comptoir .comptoir{
  display:flex; align-items:flex-start;
  width:min(100%, 400px);
}
.page-comptoir .tel--client{ flex:none; width:41%; margin-top:58px; rotate:-4deg; z-index:1 }
.page-comptoir .tel--pro{ flex:none; width:55%; margin-left:-8px; rotate:3deg; z-index:2 }

/* l'écran du client : sa carte, son QR, et LE CODE écrit dessous.
   Il est là pour une raison précise — c'est celui qu'on tape quand
   l'appareil photo refuse, et le dire sans le montrer ne servait à
   rien. */
.page-comptoir .cli{
  background:var(--paper); color:var(--ink);
  display:grid; align-content:center; justify-items:center; gap:.45em;
  padding:30px 9px 14px; text-align:center;
  font-size:clamp(8.5px, 1.95vw, 10.5px);
}
.page-comptoir .cli__quoi{
  font-size:.78em; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
.page-comptoir .cli__nom{
  font-family:var(--serif); font-size:1.3em; font-weight:600;
  letter-spacing:-.02em; line-height:1.12; max-width:11ch; color:var(--ink);
}
.page-comptoir .cli__qr{
  width:66%; height:auto; margin-top:.25em;
  padding:.45em; border-radius:.6em; background:#fff;
}
.page-comptoir .cli__code{ display:grid; gap:.1em }
.page-comptoir .cli__code span{
  font-size:.72em; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.page-comptoir .cli__code b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.98em; font-weight:700; letter-spacing:.1em; color:var(--ink-2);
}
.page-comptoir .cli__compte{ font-size:.95em; font-weight:700; color:var(--green-ink) }

/* l'écran du commerçant, une seconde après le geste */
.page-comptoir .pro{
  display:grid; place-items:center; padding:30px 12px 16px;
  font-size:clamp(9px, 2.1vw, 11.5px);
}
.page-comptoir .pro__flash{ display:grid; justify-items:center; gap:.35em; text-align:center }
.page-comptoir .pro__ok{ width:3.6em; height:auto; margin-bottom:.35em }
.page-comptoir .pro__big{
  font-size:1.55em; font-weight:700; letter-spacing:-.025em; color:var(--paper); line-height:1.1;
}
/* L'ordre vient de l'application, pas de nous : le retour affiche le
   NOUVEAU COMPTE en grand et le prénom en dessous. L'inverse — « Tampon
   ajouté » en gros et le compte en petit — était plus rassurant à
   dessiner, et faux. */
.page-comptoir .pro__big{ font-variant-numeric:tabular-nums }
.page-comptoir .pro__qui{
  margin-top:.15em; font-size:1.05em; font-weight:650; color:#86e6a9;
}

/* ── le geste, écran par écran ────────────────────────────────
   Trois fois le même appareil, à trois moments. Largeur fixe : trois
   téléphones de tailles différentes se lisent comme trois produits. */
.page-comptoir .geste{
  margin-top:clamp(36px,5vw,56px);
  display:grid; gap:clamp(34px,4.5vw,38px);
}
@media (min-width:860px){ .page-comptoir .geste{ grid-template-columns:repeat(3,1fr) } }
.page-comptoir .geste__i{
  display:grid; align-content:start; justify-items:center; gap:.3em; text-align:center;
}
/* `width:100%` n'est pas décoratif : sans conteneur de largeur
   définie, le `min(100%,214px)` du téléphone se résout sur le
   contenu — et l'écran de retour, plus étroit que l'écran de visée,
   sortait un téléphone de 145 px à côté de deux de 214. Trois
   appareils de tailles différentes se lisent comme trois produits. */
.page-comptoir .geste__vue{
  display:grid; justify-items:center; width:100%; margin-bottom:1.1em;
}
.page-comptoir .tel--ecran{ width:min(100%, 214px); font-size:10.5px }
.page-comptoir .geste__n{ margin-bottom:.9em }
.page-comptoir .geste__n span{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid rgba(246,242,234,.3); color:var(--paper);
  font-size:.8rem; font-weight:700; line-height:1;
}
.page-comptoir .geste__t{ font-size:var(--step-1); margin-top:.35em }
/* nommée, jamais « .geste p » : les écrans dessinés ont leurs propres
   paragraphes, et une règle descendante les repeindrait en crème sur
   du noir — c'est-à-dire en rien du tout. */
.page-comptoir .geste__x{
  color:rgba(246,242,234,.72); font-size:var(--step--1); line-height:1.55; max-width:34ch;
}
/* La légende est celle des TROIS colonnes, pas de la deuxième. À
   1,1 em du bas de la grille elle tombait juste sous le paragraphe
   du milieu, centrée sur lui : on la lisait comme sa quatrième
   ligne. Elle a besoin de l'air qui dit « je parle de la rangée ». */
.page-comptoir .geste + .legende{ margin-top:clamp(30px,4vw,46px) }

/* l'écran de scan : l'appareil photo prend toute la place, le reste
   se pose dessus. C'est exactement ce que fait l'application. */
.page-comptoir .vis{ display:flex; flex-direction:column }
.page-comptoir .vis__cam{
  flex:1; min-height:0; position:relative; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 42%, #2a241c, #0b0906 72%);
}
.page-comptoir .vis__cadre{
  position:absolute; inset:17% 12%; pointer-events:none;
  --c:rgba(34,197,94,.92); --t:2px; --l:19px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--l) no-repeat;
}
/* ce que la caméra voit : le téléphone du client, de biais. Un QR
   seul sur fond clair ressemblait à une affichette collée au mur —
   c'est-à-dire exactement ce qu'il ne faut PAS viser. Le bézel et
   les deux barres de texte suffisent à dire « un écran ». */
.page-comptoir .vis__cible{
  width:56%; aspect-ratio:.62; border-radius:10px; rotate:-3deg;
  background:#17130f; padding:5px; display:grid;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07) inset;
}
.page-comptoir .vis__ecr{
  border-radius:7px; background:#efe9de; display:grid; place-items:center;
  align-content:center; gap:7px; padding:8px 7px;
}
.page-comptoir .vis__ecr img{ width:74%; height:auto }
.page-comptoir .vis__ecr b,
.page-comptoir .vis__ecr i{ display:block; border-radius:2px; background:#c9c0ae }
.page-comptoir .vis__ecr b{ width:64%; height:5px }
.page-comptoir .vis__ecr i{ width:42%; height:4px }
/* pendant la validation, la caméra passe derrière : elle est encore
   là, mais ce n'est plus elle qu'on regarde */
.page-comptoir .vis__cam--flou .vis__cible{ filter:blur(1.4px); opacity:.55 }
.page-comptoir .vis__cam--flou::after{
  content:""; position:absolute; inset:0; background:rgba(11,9,6,.45);
}
.page-comptoir .vis__hint{
  padding:11px 12px 4px; text-align:center;
  font-size:1.02em; font-weight:650; color:var(--paper); line-height:1.3;
}
.page-comptoir .vis__hint em{
  display:block; margin-top:.35em; font-style:normal; font-weight:400;
  font-size:.82em; line-height:1.35; color:rgba(246,242,234,.5);
}
.page-comptoir .vis__bar{ padding:9px 12px 12px; display:grid; place-items:center }
.page-comptoir .vis__bar span{
  padding:.5em 1em; border-radius:999px; font-size:.85em; font-weight:650;
  color:rgba(246,242,234,.8); border:1px solid rgba(246,242,234,.22);
}

/* l'écran de validation, posé au bas de la caméra */
.page-comptoir .ask{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:13px 11px 14px; display:grid; gap:.3em; justify-items:center; text-align:center;
  background:rgba(11,9,6,.95); border-top:1px solid rgba(246,242,234,.14);
}
.page-comptoir .ask__nom{
  font-size:1.45em; font-weight:700; letter-spacing:-.025em; color:var(--paper); line-height:1.1;
}
.page-comptoir .ask__det{
  font-size:.98em; color:rgba(246,242,234,.68); font-variant-numeric:tabular-nums;
}
.page-comptoir .ask__oui{
  margin-top:.65em; width:100%; padding:.62em; border-radius:.75em;
  background:var(--green); color:#06280f; font-size:.95em; font-weight:700;
}
.page-comptoir .ask__non{
  width:100%; padding:.55em; font-size:.9em; font-weight:650; color:rgba(246,242,234,.62);
}

/* l'écran de retour : plein écran, une seconde, puis la caméra */
/* Le retour couvre l'écran d'un vert franc dans l'application. Ici,
   un aplat noir avec une pastille au milieu se lisait comme un bogue
   d'affichage plutôt que comme un écran de confirmation. */
.page-comptoir .pose,
.page-comptoir .pro{
  background:
    radial-gradient(120% 78% at 50% 44%, rgba(34,197,94,.20), rgba(34,197,94,0) 68%),
    radial-gradient(140% 100% at 50% 40%, #1b1712, #0b0906 74%);
}
.page-comptoir .pose{
  display:grid; align-content:center; justify-items:center; gap:.3em;
  padding:30px 12px 16px; text-align:center;
}
.page-comptoir .pose__ok{ width:3.5em; height:auto; margin-bottom:.4em }
.page-comptoir .pose__big{
  font-size:1.55em; font-weight:700; letter-spacing:-.025em; color:var(--paper); line-height:1.1;
}
.page-comptoir .pose__big{ font-variant-numeric:tabular-nums }
.page-comptoir .pose__qui{
  margin-top:.15em; font-size:1.05em; font-weight:650; color:#86e6a9;
}

/* ── hors ligne : la file locale ──────────────────────────────
   Trois tampons posés pendant la panne, la ligne où le réseau
   revient, et ce qui en sort. C'est le seul endroit où « sans
   doublon » se montre au lieu de se promettre. */
.page-comptoir .file{
  width:min(100%, 400px); border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); overflow:hidden;
  box-shadow:0 22px 44px -30px rgba(20,17,13,.5);
}
.page-comptoir .file__tete{
  display:grid; grid-template-columns:auto 1fr; gap:.25em .7em; align-items:center;
  padding:13px 16px; background:var(--paper-2); border-bottom:1px solid var(--line);
}
.page-comptoir .file__pt{
  grid-column:1; grid-row:1; width:8px; height:8px; border-radius:50%;
  background:#c08a2a; box-shadow:0 0 0 3px rgba(192,138,42,.18);
}
.page-comptoir .file__tete b{ grid-column:2; font-size:.88rem; font-weight:700; color:var(--ink) }
.page-comptoir .file__tete span{
  grid-column:2; font-size:.74rem; color:var(--ink-3); line-height:1.4;
}
.page-comptoir .file__lignes li{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:11px 16px; border-bottom:1px dashed var(--line);
}
.page-comptoir .file__h{
  font-size:.74rem; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.page-comptoir .file__lignes b{ font-size:.86rem; font-weight:650; color:var(--ink) }
.page-comptoir .file__et{
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  padding:.28em .7em; border-radius:999px;
  background:rgba(192,138,42,.13); color:#8a6318;
}
.page-comptoir .file__reprise{
  display:flex; align-items:center; gap:9px; padding:10px 16px;
  background:var(--green-soft); color:var(--green-ink);
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.page-comptoir .file__reprise i{
  width:8px; height:8px; border-radius:50%; background:var(--green); flex:none;
}
.page-comptoir .file__fin{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px;
  padding:13px 16px;
}
.page-comptoir .file__fin b{ font-size:.9rem; font-weight:700; color:var(--ink) }
.page-comptoir .file__fin span{ font-size:.74rem; font-weight:650; color:var(--green-ink) }

/* la sortie de secours : le code tapé à la main */
.page-comptoir .saisie{
  width:min(100%, 400px); margin-top:16px;
  border:1px dashed var(--line); border-radius:var(--r);
  padding:14px 16px 15px; background:var(--paper);
}
.page-comptoir .saisie__t{
  font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}
.page-comptoir .saisie__champ{ margin-top:9px; display:flex; align-items:stretch; gap:9px }
.page-comptoir .saisie__champ b{
  flex:1; min-width:0; padding:9px 12px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--paper-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92rem; font-weight:700; letter-spacing:.16em; color:var(--ink);
}
.page-comptoir .saisie__go{
  display:grid; place-items:center; padding:0 15px; border-radius:10px;
  background:var(--ink); color:var(--paper); font-size:.78rem; font-weight:650;
}
.page-comptoir .saisie__aide{ margin-top:9px; font-size:.74rem; color:var(--ink-3); line-height:1.45 }

/* ── le garde-fou : le réglage, et son effet ──────────────────
   Une case à cocher sans son effet reste une case à cocher. Le
   volet montre la règle ; la puce en dessous montre ce que le
   commerçant lit quand elle s'applique. */
.page-comptoir .regl__lab{ font-size:.82rem; font-weight:700; color:var(--ink) }
.page-comptoir .regl__opts{
  margin-top:10px; border:1px solid var(--line); border-radius:11px; overflow:hidden;
  background:#fff;
}
.page-comptoir .regl__opts li{
  position:relative; padding:9px 12px 9px 34px;
  font-size:.8rem; color:var(--ink-2); line-height:1.35;
  border-bottom:1px solid var(--line);
}
.page-comptoir .regl__opts li:last-child{ border-bottom:none }
.page-comptoir .regl__opts li::before{
  content:""; position:absolute; left:13px; top:.85em;
  width:12px; height:12px; border-radius:50%; border:1.5px solid var(--line); background:#fff;
}
.page-comptoir .regl__opts li.is-on{ background:var(--green-soft); color:var(--ink); font-weight:650 }
.page-comptoir .regl__opts li.is-on::before{
  border-color:var(--green);
  background:radial-gradient(circle at 50% 50%, var(--green) 0 3.2px, #fff 3.6px);
}
.page-comptoir .regl__aide{ margin-top:11px; font-size:.75rem; color:var(--ink-3); line-height:1.45 }
.page-comptoir .duo__vue .volet{ width:min(100%, 460px) }
.page-comptoir .deja{
  width:min(100%, 460px); margin-top:18px;
  display:flex; align-items:center; gap:11px;
  padding:12px 15px; border-radius:12px;
  background:rgba(246,242,234,.07); border:1px solid rgba(246,242,234,.15);
}
.page-comptoir .deja svg{ width:19px; height:19px; flex:none; color:#e0ae4f }
.page-comptoir .deja span{ font-size:var(--step--1); color:var(--paper); line-height:1.4 }

/* ── la récompense : l'écran, puis les deux issues ────────────
   L'écran en grand plutôt qu'un quatrième téléphone : à cette
   échelle, on lit les deux boutons, et c'est tout ce qui compte. */
.page-comptoir .recomp{
  width:min(100%, 340px); border-radius:22px; padding:26px 22px 22px;
  background:linear-gradient(165deg,#241e17,#0b0906 66%); color:var(--paper);
  display:grid; justify-items:center; gap:.3em; text-align:center;
  box-shadow:0 28px 56px -32px rgba(20,17,13,.65);
}
.page-comptoir .recomp__ring{ width:76px; height:auto; margin-bottom:.7em }
.page-comptoir .recomp__t{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
}
.page-comptoir .recomp__nom{
  font-family:var(--serif); font-size:var(--step-2); font-weight:600;
  letter-spacing:-.025em; line-height:1.15; color:var(--paper);
}
.page-comptoir .recomp__btns{ margin-top:1.2em; width:100%; display:grid; gap:9px }
.page-comptoir .recomp__oui{
  padding:12px; border-radius:12px; background:var(--green); color:#06280f;
  font-size:.92rem; font-weight:700;
}
.page-comptoir .recomp__non{
  padding:12px; border-radius:12px; border:1px solid rgba(246,242,234,.3);
  color:var(--paper); font-size:.92rem; font-weight:650;
}
.page-comptoir .issues{ width:min(100%, 340px); margin-top:16px; display:grid; gap:10px }
@media (min-width:460px){ .page-comptoir .issues{ grid-template-columns:1fr 1fr } }
.page-comptoir .issue{
  display:grid; gap:.25em; align-content:start;
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--paper-2);
}
.page-comptoir .issue b{ font-size:.8rem; font-weight:700; color:var(--ink) }
.page-comptoir .issue span{ font-size:.75rem; color:var(--ink-3); line-height:1.45 }
.page-comptoir .issue--oui{ border-color:var(--green); background:var(--green-soft) }
.page-comptoir .issue--oui span{ color:#2b6a3e }

/* Keep the QR and fallback code below the actual loyalty card. */
.page-comptoir .cli{align-content:center;gap:.35em;padding-inline:6px}
.page-comptoir .cli .pass.marketing-pass:not(.pass--theme-original){font-size:7px;padding:.85em;gap:.5em;border-radius:10px;text-align:left;box-shadow:none;aspect-ratio:1.1}
.page-comptoir .cli .pass.marketing-pass .pass__foot{display:none}
.page-comptoir .cli .pass.marketing-pass .pass__badge{font-size:1.15em}
.page-comptoir .cli .cli__qr{width:54%;margin-top:.25em}

/* ══ assets/css/fiche/image.css ══════════════════════════════ */
/* ============================================================
   FICHE « à votre image »
   Ce que cette page doit prouver : la carte se plie au commerce, et
   pas l'inverse. C'est la fiche la plus visuelle des huit — si elle
   n'est pas la plus belle, elle est ratée.

   Deux règles s'appliquent partout ici :

   1. Aucune couleur inventée. Les teintes des cartes sont celles des
      six choix proposés dans l'application ; le reste vient de
      style.css. Une fiche qui invente sa couleur trahit la marque
      plus sûrement qu'une fiche moche.

   2. Aucune règle descendante sur `p`. Cette fiche pose des objets
      CLAIRS (un volet, une carte crème) sur des sections SOMBRES ;
      une règle comme « .section--dark p { color:clair } » aurait
      peint en crème le texte qui est déjà sur du crème, et la moitié
      des objets seraient sortis vides. Tout est nommé.
   ============================================================ */

/* ── l'échelle des cartes ─────────────────────────────────────
   Le pass de style.css est dimensionné pour le héros de l'accueil :
   des rem partout, et une hauteur minimale de 300 px. Ici il apparaît
   huit fois, dans des cadres de 200 à 330 px. On repasse donc tout en
   em et chaque contexte n'a plus qu'à donner sa taille de base : la
   carte rétrécit, son texte aussi, et rien ne déborde. */
.page-image .pass{
  aspect-ratio:.84; min-height:0; gap:.7em; padding:1em 1.05em .95em;
  box-shadow:0 16px 34px -18px rgba(20,17,13,.6), 0 1px 0 rgba(255,255,255,.14) inset;
  /* Quatre rangs sont prévus dans style.css pour quatre enfants ; une
     carte sans photo n'en a que trois, et le rang souple tombait alors
     sur le PIED. Résultat : les tampons collés en haut et un trou de
     cent pixels au milieu de la carte. Le rang souple appartient au
     corps — c'est lui qui doit respirer. */
  grid-template-rows:auto 1fr auto;
}
.page-image .pass--photo{ padding-top:.85em; grid-template-rows:auto auto 1fr auto }
.page-image .pass__logo{ width:2.6em; height:2.6em; border-radius:.72em }
.page-image .pass__shop{ font-size:1.15em; padding-top:.15em }
.page-image .pass__badge{ font-size:1.2em }
.page-image .pass__label{ font-size:.62em }
.page-image .pass__sub{ font-size:.62em }
.page-image .pass__goalv{ font-size:1.45em }
.page-image .pass__holder,.page-image .pass__reward{ font-size:.98em }
.page-image .pass__strip{ margin:-.1em -1.05em 0; height:4.4em }
.page-image .pass .field--jauge{ width:5.4em }
/* la couronne : dix pastilles en cercle, la représentation « anneau ».
   Carrée là où la grille est large, elle a sa propre mesure. À 6,4 em
   elle flottait au milieu d'une carte de 325 px comme un bouton perdu ;
   à 13 em elle occupe son corps de carte comme la grille occupe le
   sien, et les six cartes de la galerie pèsent enfin le même poids. */
.page-image .pass .field--anneau{ width:13em; height:auto }
/* une carte claire posée sur du papier a besoin d'un liseré, sinon
   son bord se dissout. */
.img-pass--clair{ outline:1px solid rgba(20,17,13,.10); outline-offset:-1px }

/* le logo dans son carré blanc : un dessin, pas une image bitmap */
.img-logo{ display:grid; place-items:center; overflow:hidden; color:#7c3f2e }
.img-logo .img-ble{ width:72%; height:72% }
.img-ble{ display:block }

/* la devanture, dessinée : elle remplit sa bande en la débordant,
   comme une vraie photo recadrée. */
.img-strip{ overflow:hidden }
.img-strip svg{ width:100%; height:100%; display:block }

/* ── la tête : l'écran de réglages, l'aperçu à côté ───────────
   L'argument de la fiche tient dans la mise en page de cet objet :
   les réglages et la carte se regardent. Les séparer en deux écrans
   aurait été une autre promesse. */
.img-edit{ max-width:520px }
.img-edit__corps{ display:grid; gap:20px; align-items:start }
/* Deux colonnes quand le volet a la place. Entre 900 et 1080 px la
   tête est déjà passée sur deux colonnes et le volet devient étroit :
   on y empile plutôt que d'écraser l'aperçu. */
@media (min-width:560px) and (max-width:899px){
  .img-edit__corps{ grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) }
}
@media (min-width:1080px){
  .img-edit__corps{ grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) }
}
.img-edit__reg{ display:grid; gap:.55em; align-content:start; min-width:0 }
.img-edit__lab{
  font-size:.63rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin-top:.5em;
}
.img-edit__reg > .img-edit__lab:first-child{ margin-top:0 }

/* ── LES COMMANDES SONT DE VRAIS BOUTONS ────────────────────
   Cet écran était une capture : des `span` peints pour ressembler à
   des commandes. Il règle maintenant la carte pour de vrai, donc
   chaque commande est un `button` — on y arrive au clavier, la barre
   d'espace l'actionne, et `aria-pressed` dit lequel est choisi.

   D'où ce bloc : un `button` arrive avec la police, la bordure et le
   fond du navigateur, et il faut les lui retirer avant de lui rendre
   l'allure qu'il avait en `span`. */
.img-edit__reg button{
  font:inherit; color:inherit; background:none; border:0; padding:0;
  cursor:pointer; -webkit-appearance:none; appearance:none;
}
.img-edit__reg button:focus-visible{
  outline:2.5px solid var(--green-ink); outline-offset:2px;
}

/* les six teintes, et le champ pour la vôtre */
.img-edit__nu{ display:flex; flex-wrap:wrap; align-items:center; gap:7px }
.img-nu{
  width:22px; height:22px; border-radius:50%; flex:none;
  box-shadow:0 0 0 1px rgba(20,17,13,.12) inset;
  transition:box-shadow .15s ease;
}
/* `.is-on` : le script ne connaît qu'un seul nom d'état pour les trois
   groupes de commandes. `.img-nu--on` reste accepté — la carte rendue
   par la construction le porte encore quand le script n'a pas tourné. */
.img-nu.is-on,.img-nu--on{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--green-ink) }
.img-nu:hover{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--line) }
.img-nu.is-on:hover{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--green-ink) }

/* la couleur libre : la pastille ouvre le sélecteur du système.
   Le `input[type=color]` natif est une boîte grise dans tous les
   navigateurs ; on le rend rond et on cache sa chrome. */
.img-edit__perso{
  width:22px; height:22px; border-radius:50%; flex:none; position:relative;
  overflow:hidden; cursor:pointer;
  background:conic-gradient(#e11d48,#f59e0b,#22c55e,#0ea5e9,#8b5cf6,#e11d48);
  box-shadow:0 0 0 1px rgba(20,17,13,.12) inset;
}
.img-edit__perso input{
  position:absolute; inset:-25%; width:150%; height:150%;
  padding:0; border:0; background:none; cursor:pointer; opacity:0;
}
.img-edit__perso:focus-within{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--green-ink) }

/* le nom sur la carte */
.img-edit__champ{
  width:100%; font:inherit; font-size:.78rem; color:var(--ink);
  padding:6px 9px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper);
}
.img-edit__champ:focus-visible{
  outline:2.5px solid var(--green-ink); outline-offset:1px; border-color:var(--green-ink);
}
.img-edit__code{
  font-size:.66rem; font-weight:700; letter-spacing:.02em; color:var(--ink-2);
  padding:4px 8px; border-radius:6px; border:1px solid var(--line); background:var(--paper);
  font-variant-numeric:tabular-nums;
}

/* la ligne du logo : une vignette, un nom de fichier, un bouton */
.img-edit__fic{
  display:flex; align-items:center; gap:9px;
  padding:7px 8px; border-radius:10px; border:1px solid var(--line); background:var(--paper);
}
.img-edit__vig{
  width:30px; height:30px; border-radius:8px; flex:none;
  display:grid; place-items:center; background:#fff; color:#7c3f2e;
  box-shadow:0 0 0 1px rgba(20,17,13,.08) inset;
}
.img-edit__vig .img-ble{ width:74%; height:74% }
.img-edit__nom{
  flex:1; min-width:0; font-size:.72rem; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.img-edit__btn{
  flex:none; font-size:.66rem; font-weight:700; color:var(--green-ink);
  padding:3px 8px; border-radius:99px; border:1px solid rgba(21,128,61,.28);
}

/* les icônes de tampon, en petit dans l'éditeur.
   Six pastilles sur une seule ligne : à 30 px et 6 px de gouttière, la
   sixième passait à la ligne toute seule et la rangée finissait par un
   cœur orphelin — on lisait un bug, pas un choix d'icône. */
.img-edit__ic{ display:flex; flex-wrap:wrap; gap:5px }
.img-edit__ic .img-ic{ width:28px; height:28px }
.img-edit__ic .img-ic svg{ width:16px; height:16px }
.img-ic{
  width:30px; height:30px; border-radius:8px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-3);
}
.img-ic svg{ width:17px; height:17px }
.img-ic{ transition:border-color .15s ease, background .15s ease, color .15s ease }
.img-ic:hover{ border-color:var(--ink-3); color:var(--ink-2) }
.img-ic.is-on,.img-ic--on,.img-ic.is-on:hover{
  border-color:var(--green-ink); color:var(--green-ink);
  background:var(--green-soft);
}

/* grille · chemin */
.img-edit__seg{
  display:flex; gap:2px; padding:3px; border-radius:9px;
  border:1px solid var(--line); background:var(--paper);
}
.img-edit__seg span,.img-edit__seg button{
  flex:1; text-align:center; padding:5px 4px; border-radius:6px;
  font-size:.68rem; font-weight:650; color:var(--ink-3); letter-spacing:-.01em;
  transition:background .15s ease, color .15s ease;
}
.img-edit__seg button:hover{ color:var(--ink) }
.img-edit__seg .is-on,.img-edit__seg button.is-on:hover{ background:var(--ink); color:var(--paper) }

/* l'aperçu */
.img-edit__ap{ display:grid; gap:9px; justify-items:center; min-width:0 }
.img-edit__apl{
  justify-self:start;
  font-size:.63rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}
.img-edit__ap .pass{ width:100%; font-size:clamp(9.6px,2.3vw,12px) }
/* `align-items:center` centrait la pastille sur la HAUTEUR du
   paragraphe : sur une note de trois lignes, le point vert atterrissait
   au milieu de la deuxième, comme une puce égarée en plein texte. Il
   se pose maintenant sur la première ligne, où il veut dire « ceci est
   vivant » — d'où le petit décalage vertical, qui l'optiquement centre
   sur la ligne et non sur le bloc. */
.img-edit__vif{
  display:flex; align-items:flex-start; gap:7px; align-self:start;
  font-size:.68rem; color:var(--ink-3); line-height:1.4;
}
.img-edit__vif i{
  width:6px; height:6px; border-radius:50%; background:var(--green); flex:none;
  margin-top:.32em;
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
  animation:img-bat 2.6s ease-in-out infinite;
}
@keyframes img-bat{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion:reduce){ .img-edit__vif i{ animation:none } }

/* ── la galerie ───────────────────────────────────────────────
   Six cartes, six commerces, un seul écran de réglages. C'est la
   section maîtresse : elle prouve d'un coup d'œil ce que six
   paragraphes n'auraient fait qu'affirmer. */
.img-galerie{
  margin-top:clamp(32px,4.5vw,52px);
  display:grid; gap:clamp(24px,3.2vw,34px);
}
@media (min-width:620px){ .img-galerie{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .img-galerie{ grid-template-columns:repeat(3,1fr) } }
.img-carte{ display:grid; align-content:start; gap:.9em; min-width:0 }
.img-carte .pass{ font-size:clamp(10.5px,1.05vw + 4.4px,13px) }
/* La jauge est réglée pour le héros de l'accueil, où elle voisine un
   gros chiffre. Ici elle est seule dans son corps de carte : à 5,4 em
   la sixième carte avait l'air à moitié vide à côté des cinq autres.
   Elle prend la place que la grille prend dans ses voisines. */
.img-carte .pass .field--jauge{ width:7.8em }
/* Nommée, et non « .img-carte p » : la légende est le SEUL paragraphe
   qu'on peint en crème ici. Les cartes en contiennent d'autres. */
.img-carte__x{
  color:rgba(246,242,234,.6); font-size:var(--step--1); line-height:1.5;
  padding-left:.9em; border-left:1.5px solid rgba(246,242,234,.16);
}

/* ── le choix du tampon ───────────────────────────────────────
   Dix icônes dessinées, n'importe quel emoji, ou votre image. Trois
   lignes, parce que ce sont trois réponses différentes à la même
   question — et que la troisième est la plus rassurante. */
.img-tam{
  margin-top:clamp(34px,4.5vw,52px);
  border:1px solid rgba(246,242,234,.14); border-radius:var(--r);
  background:rgba(246,242,234,.04);
  padding:clamp(20px,2.8vw,26px);
  display:grid; gap:14px;
}
.img-tam__lab{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
}
.img-tam__l{ display:grid; gap:10px }
@media (min-width:760px){
  .img-tam__l{ grid-template-columns:13.5rem minmax(0,1fr); align-items:center; gap:18px }
}
.img-tam__q{ color:rgba(246,242,234,.72); font-size:var(--step--1); line-height:1.5 }
.img-tam__ic{ display:flex; flex-wrap:wrap; gap:8px }
.img-tam .img-ic{
  width:38px; height:38px; border-radius:10px;
  border-color:rgba(246,242,234,.16); background:rgba(246,242,234,.06);
  color:rgba(246,242,234,.82);
}
.img-tam .img-ic svg{ width:21px; height:21px }
.img-tam__em{ display:flex; flex-wrap:wrap; gap:8px }
.img-tam__em span{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:grid; place-items:center; font-size:1.22rem; line-height:1;
  border:1px solid rgba(246,242,234,.16); background:rgba(246,242,234,.06);
}
/* `inline-flex` ne suffit pas : c'est une case de grille, et une case
   s'étire. Sans `justify-self`, le « déposer un fichier » traversait la
   colonne sur 750 px et se lisait comme un cadre vide, pas comme un
   bouton. Il doit peser ce que pèsent les deux rangées au-dessus. */
.img-tam__up{
  display:inline-flex; justify-self:start; align-items:center; gap:9px;
  padding:9px 14px; border-radius:10px;
  border:1.5px dashed rgba(246,242,234,.28); color:rgba(246,242,234,.72);
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.img-tam__up svg{ width:19px; height:19px; flex:none }

/* ── le logo et la devanture : deux fichiers, une carte ───────
   Les sources au-dessus, la carte en dessous, une flèche entre les
   deux. L'ordre compte : on lit ce qu'on donne avant de voir ce que
   ça devient. */
.img-monte{ width:min(100%,320px); display:grid; gap:14px; justify-items:center }
.img-monte__src{ display:grid; grid-template-columns:auto 1fr; gap:12px; width:100% }
.img-src{ margin:0; display:grid; gap:6px; min-width:0 }
.img-src__v{
  height:64px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper-2);
  display:grid; place-items:center;
}
/* Le logo garde SA couleur d'un bout à l'autre de la page : une
   marque qui change de teinte entre le fichier et la carte n'est plus
   une marque, c'est une illustration. */
.img-src__v--logo{ width:64px; background:#fff; color:#7c3f2e }
.img-src__v--logo .img-ble{ width:70%; height:70% }
.img-src__v .img-dev{ width:100%; height:100% }
.img-src__n{
  font-size:.66rem; color:var(--ink-3); text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.img-monte__f{
  display:flex; align-items:center; gap:8px;
  font-size:var(--step--1); color:var(--ink-3);
}
.img-monte__fl{
  width:9px; height:9px; flex:none; rotate:45deg;
  border-right:2px solid var(--green); border-bottom:2px solid var(--green);
}
.img-monte__pass{ width:100%; font-size:clamp(10.5px,2.4vw,12.6px) }

/* ── le contraste : la même carte, deux fonds ─────────────────
   Deux cartes identiques à la couleur près. C'est la seule
   démonstration possible d'une règle automatique : on la regarde
   travailler deux fois de suite. */
.img-con{ width:100%; display:grid; gap:clamp(20px,2.6vw,26px) }
.img-con__paire{ display:grid; gap:16px }
@media (min-width:520px){ .img-con__paire{ grid-template-columns:repeat(2,1fr) } }
.img-con__c{ display:grid; gap:.6em; align-content:start; min-width:0 }
.img-con__c .pass{ font-size:clamp(10px,1.05vw + 4px,12.4px) }
.img-con__t{
  font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--green);
}
.img-con__x{ font-size:var(--step--1); color:rgba(246,242,234,.6); line-height:1.45 }

.img-nuancier{
  border:1px solid rgba(246,242,234,.14); border-radius:var(--r);
  background:rgba(246,242,234,.04); padding:clamp(16px,2.2vw,20px);
  display:grid; gap:11px;
}
.img-nuancier__l{
  font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(246,242,234,.6);
}
.img-nuancier__r{ display:flex; flex-wrap:wrap; gap:8px }
.img-aa{
  width:40px; height:34px; border-radius:9px; flex:none;
  display:grid; place-items:center;
  font-size:.86rem; font-weight:700; letter-spacing:-.02em;
  box-shadow:0 0 0 1px rgba(246,242,234,.14) inset;
}
.img-aa--code{
  background:transparent; color:rgba(246,242,234,.6);
  border:1.5px dashed rgba(246,242,234,.3); box-shadow:none;
}
.img-nuancier__x{ font-size:var(--step--1); color:rgba(246,242,234,.6); line-height:1.45 }

/* Les coches de cette section sont sur fond nuit : la couleur du
   texte de `.ticks li` est prévue pour du papier. */
.img-ticks li{ color:rgba(246,242,234,.72) }

/* ── le dos de la carte, et le mot d'accueil ──────────────────
   Deux objets de même hauteur. En hauteur libre, le téléphone
   dominait le volet et la deuxième colonne avait l'air d'être une
   note de bas de page. */
.img-deux{ margin-top:clamp(34px,4.5vw,52px); display:grid; gap:clamp(28px,4vw,36px) }
@media (min-width:860px){ .img-deux{ grid-template-columns:repeat(2,1fr) } }
.img-deux__i{ display:grid; align-content:start; gap:.5em; min-width:0 }
.img-deux__v{
  display:grid; place-items:center; height:448px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); padding:24px;
}
.img-deux__n{ font-size:var(--step-1); margin-top:.6em }
.img-deux__p{ color:var(--ink-2); font-size:var(--step--1); line-height:1.55 }

/* le téléphone, écran court : on montre le dos d'une carte, pas un
   appareil entier. */
/* 236 px et non 214 : sous l'ancienne largeur, « 8 rue des
   Vinaigriers, Paris 10e » laissait « 10e » seul sur sa ligne et
   « Du mardi au samedi, 7h – 19h30 » laissait « 19h30 ». Deux veuves
   dans un objet de dix lignes : on lisait un gabarit trop juste, pas
   le dos d'une carte. */
.img-tel{ width:min(100%,236px); aspect-ratio:.6; border-radius:34px; padding:9px }
.img-tel .tel__ecran{ border-radius:26px }
.img-tel .tel__encoche{ top:7px; width:74px; height:20px }
/* Le dos ne remplit pas son écran, et c'est juste : un dos de carte
   tient en quatre lignes. Elles respirent donc au lieu de se serrer
   en haut d'un écran vide. */
.img-dos{ padding:38px 15px 14px; display:grid; align-content:start; gap:0 }
.img-dos__t{
  font-size:.82rem; font-weight:700; letter-spacing:-.015em; color:var(--paper);
  padding-bottom:12px; border-bottom:1px solid rgba(246,242,234,.14);
}
.img-dos__l{
  display:grid; gap:1px; padding:10px 0;
  border-bottom:1px solid rgba(246,242,234,.1);
}
.img-dos__l span{
  font-size:.54rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(246,242,234,.5);
}
.img-dos__l b{
  font-size:.7rem; font-weight:600; color:var(--paper); line-height:1.35;
  letter-spacing:-.01em;
}
.img-dos__l sup{ font-size:.7em }
.img-dos__n{
  margin-top:15px; font-size:.58rem; line-height:1.4;
  color:rgba(246,242,234,.5);
}

/* la page d'ajout, telle que le client la trouve en scannant */
.img-acc{ width:min(100%,278px) }
/* L'adresse dans la barre du volet. En capitales espacées elle est
   plus large que les 278 px du volet : sans coupe, elle sortait par la
   droite et se lisait « …/REJOINDR ». Une adresse tronquée par un
   navigateur est normale ; tronquée par notre dessin, elle a l'air
   cassée. */
.img-acc .volet__nom{
  min-width:0; font-size:.62rem; letter-spacing:.03em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.img-acc__c{ display:grid; justify-items:center; gap:9px; text-align:center;
  background:var(--paper-2) }
.img-acc__logo{
  width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center; background:#fff; color:#7c3f2e;
  box-shadow:0 0 0 1px rgba(20,17,13,.08) inset;
}
.img-acc__logo .img-ble{ width:74%; height:74% }
.img-acc__n{
  font-family:var(--serif); font-size:1.02rem; font-weight:600;
  letter-spacing:-.02em; line-height:1.15; color:var(--ink);
}
.img-acc__m{ font-size:.72rem; color:var(--ink-2); line-height:1.5; max-width:26ch }
.img-acc__b{
  margin-top:3px; padding:9px 16px; border-radius:99px;
  background:var(--ink); color:var(--paper);
  font-size:.74rem; font-weight:650; letter-spacing:-.01em;
}
.img-acc__s{ font-size:.62rem; color:var(--ink-3) }

/* Collection choices use the same four presets as the product editor. */
.img-edit__themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.img-edit__themes button{padding:6px 5px;border:1px solid var(--line);border-radius:7px;font-size:.64rem;text-align:center;line-height:1.3}
.img-edit__themes button.is-on{border-color:var(--green-ink);background:var(--green-soft);color:var(--green-ink)}
.img-edit__ap [data-ap-preview]{width:100%;min-width:0}
.page-image .img-edit__ap .pass.marketing-pass:not(.pass--theme-original){aspect-ratio:.88}
.img-src__v img{display:block;max-width:100%;height:100%;object-fit:cover}

/* ══ assets/css/fiche/reglages.css ══════════════════════════════ */
/* ============================================================
   FICHE « à votre main »
   Ce que cette page doit prouver : rien ici ne demande d'appeler
   quelqu'un. Le danger du sujet est évident — une page de réglages
   est une liste, et une liste est ennuyeuse. On la sauve par les
   objets : le pupitre lui-même en tête, l'écran d'inscription qu'il
   produit, le tableau des rôles, trois vignettes pour le temps, et
   le volet des données où le bouton qui sauve et celui qui efface
   se regardent.

   Palette, échelle et boutons viennent de style.css ; le fil, la
   tête, les preuves et les questions du socle. Rien n'est réinventé
   ici, tout est habillé.

   TOUT est préfixé `.page-reglages`, et les blocs portent des noms
   qu'aucune autre fiche n'emploie. Les huit feuilles sont
   concaténées dans un seul fichier : un `.pan` ou un `.cal` écrit
   sans précaution y rencontre le `.pan` et le `.cal` du voisin, et
   c'est la mise en page du voisin qui casse. Ce fichier a déjà payé
   cette leçon une fois.
   ============================================================ */

/* Le socle laisse `.tel__ecran` sans couleur d'encre : sur papier il
   hérite de l'encre de la page, ce qui va. Dans une section sombre
   il hériterait du crème, et tout le formulaire deviendrait un
   rectangle blanc vide. On la repose ici, une fois. */
.page-reglages .tel__ecran{ color:var(--ink) }

/* ============================================================
   LE PUPITRE DES RÉGLAGES — l'objet de tête
   Cinq champs, trois états chacun, et une sixième ligne qu'on ne
   peut pas allumer. Les trois états ne se distinguent pas par une
   coche mais par trois remplissages différents : éteint est sourd,
   facultatif est vert pâle, obligatoire est vert plein. On comprend
   la mécanique avant d'avoir lu la moindre légende.
   ============================================================ */
.page-reglages .pupitre{ width:min(100%,470px) }
.page-reglages .pupitre__corps{ display:grid; gap:14px; background:var(--paper-2) }

.page-reglages .pupitre__l{ display:grid; gap:7px; align-items:center }
@media (min-width:430px){
  .page-reglages .pupitre__l{ grid-template-columns:minmax(0,1fr) auto }
}
.page-reglages .pupitre__nom{
  font-size:var(--step--1); font-weight:650; letter-spacing:-.012em; color:var(--ink);
}
/* Un champ éteint ne crie pas son nom : il s'efface avec son réglage. */
.page-reglages .pupitre__nom--off{ color:var(--ink-3); font-weight:600 }

.page-reglages .tri3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  padding:3px; border-radius:10px;
  background:#fffdf9; border:1px solid var(--line);
}
.page-reglages .tri3__o{
  padding:6px 10px; border-radius:7px; text-align:center; white-space:nowrap;
  font-size:.7rem; font-weight:650; letter-spacing:-.005em; color:var(--ink-3);
}
/* facultatif : allumé, mais on peut passer outre */
.page-reglages .tri3__o.is-on{
  background:var(--green-soft); color:var(--green-ink);
  box-shadow:inset 0 0 0 1px rgba(21,128,61,.28);
}
/* obligatoire : allumé et bloquant */
.page-reglages .tri3__o.is-on.is-req{
  background:var(--green); color:#06280f; box-shadow:0 1px 3px rgba(20,17,13,.2);
}
/* éteint : sélectionné aussi, mais sans couleur — un champ absent
   n'est pas une réussite qu'on souligne en vert */
.page-reglages .tri3__o.is-on.is-off{
  background:var(--paper-2); color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
}

/* La ligne verrouillée. Elle est montrée, pas cachée : une limite
   qu'on assume se regarde en face — et c'est elle qui sépare cette
   page d'un panneau d'options de plus. */
.page-reglages .pupitre__l--verrou{
  margin-top:2px; padding-top:15px; border-top:1px dashed var(--line);
}
.page-reglages .pupitre__l--verrou .pupitre__nom{ color:var(--ink-3) }
.page-reglages .pupitre__cadenas{
  display:inline-block; width:13px; height:13px; vertical-align:-2px;
  margin-right:6px; color:var(--brass);
}
.page-reglages .pupitre__jamais{
  justify-self:start; font-size:.7rem; font-weight:650; color:var(--ink-3);
  padding:6px 11px; border-radius:999px;
  background:#fffdf9; border:1px dashed var(--line);
}
@media (min-width:430px){ .page-reglages .pupitre__jamais{ justify-self:end } }

/* « Enregistré à l'instant » : le pupitre n'a pas de bouton
   « Valider ». C'est le propos — on règle, c'est réglé. */
.page-reglages .pupitre__maj{
  margin-top:2px; padding-top:13px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:7px;
  font-size:.7rem; color:var(--ink-3);
}
.page-reglages .pupitre__maj i{
  width:6px; height:6px; border-radius:50%; background:var(--green); flex:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
  animation:reglages-bat 2.6s ease-in-out infinite;
}
@keyframes reglages-bat{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion:reduce){ .page-reglages .pupitre__maj i{ animation:none } }

/* ============================================================
   L'ÉCRAN D'INSCRIPTION — ce que le pupitre produit
   Le même téléphone que sur les autres fiches, jamais un autre.
   Il montre le résultat exact des cinq réglages de la tête : prénom
   facultatif rempli, e-mail obligatoire encore vide, anniversaire en
   deux cases, nom et téléphone absents.
   ============================================================ */
.page-reglages .duo__vue .tel{ width:min(100%,268px) }
.page-reglages .formul{
  flex:1; min-height:0; display:flex; flex-direction:column;
  justify-content:space-between; gap:12px;
  padding:52px 18px 20px; background:var(--paper); color:var(--ink);
}
.page-reglages .formul__shop{
  font-family:var(--serif); font-size:1.08rem; font-weight:600;
  letter-spacing:-.025em; line-height:1.15; color:var(--ink);
}
.page-reglages .formul__titre{
  margin-top:-8px;
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.page-reglages .formul__champ{ display:grid; gap:5px }
.page-reglages .formul__lbl{
  font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3);
}
.page-reglages .formul__lbl i{
  font-style:normal; font-weight:600; letter-spacing:.02em; text-transform:none;
  opacity:.85;
}
.page-reglages .formul__lbl i::before{ content:"· " }
.page-reglages .formul__lbl i.formul__req{ color:var(--green-ink); opacity:1 }
.page-reglages .formul__box{
  display:block; padding:9px 11px; border-radius:9px;
  border:1px solid var(--line); background:#fffdf9;
  font-size:.8rem; font-weight:600; letter-spacing:-.01em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.page-reglages .formul__box--vide{ color:var(--ink-3); font-weight:500 }
.page-reglages .formul__deux{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.page-reglages .formul__btn{
  display:block; text-align:center; padding:12px;
  border-radius:999px; background:var(--ink); color:var(--paper);
  font-size:.82rem; font-weight:650; letter-spacing:-.01em;
}
/* Les tampons d'avance. Deux pleins sur cinq : la carte n'est pas
   vide avant même d'exister, ce qui est tout l'argument. */
.page-reglages .formul__cadeau{
  display:grid; justify-items:center; gap:6px; text-align:center;
  padding:11px 10px; border-radius:12px;
  background:var(--green-soft); border:1px solid rgba(21,128,61,.2);
}
.page-reglages .formul__jetons{ display:flex; gap:4px }
.page-reglages .formul__jetons i{
  width:9px; height:9px; border-radius:50%; background:rgba(21,128,61,.22);
}
.page-reglages .formul__jetons i.is-plein{ background:var(--green-ink) }
.page-reglages .formul__cadeau b{
  font-size:.78rem; font-weight:700; color:var(--green-ink); letter-spacing:-.01em;
}
.page-reglages .formul__cadeau > span{ font-size:.66rem; color:var(--ink-2); line-height:1.35 }
.page-reglages .formul__note{
  text-align:center; font-size:.62rem; color:var(--ink-3); line-height:1.4;
}

/* ============================================================
   LE TABLEAU DES RÔLES
   « Sans supplément » est un argument commercial : il est collé en
   haut de l'objet, pas enterré dans une puce. Et le tableau se lit
   d'un coup d'œil parce que la coupure tombe au milieu : trois
   lignes que tout le monde peut faire, trois qui restent au patron.
   ============================================================ */
.page-reglages .quipeut{
  width:100%; max-width:470px; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--paper);
  box-shadow:0 26px 50px -30px rgba(20,17,13,.45);
}
.page-reglages .quipeut__tete{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--line); background:var(--paper-2);
}
.page-reglages .quipeut__qui{ display:flex; flex:none }
.page-reglages .quipeut__ava{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center; margin-left:-6px;
  font-size:.62rem; font-weight:700; letter-spacing:.02em;
  background:var(--ink); color:var(--paper); border:2px solid var(--paper-2);
}
.page-reglages .quipeut__ava:first-child{ margin-left:0 }
.page-reglages .quipeut__ava--plus{
  background:var(--paper-2); color:var(--ink-3); font-size:.9rem; font-weight:600;
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.page-reglages .quipeut__badge{
  flex:none; font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-ink); background:var(--green-soft);
  border:1px solid rgba(21,128,61,.24); padding:6px 11px; border-radius:999px;
}

.page-reglages .quipeut__tab{ width:100%; border-collapse:collapse; table-layout:fixed }
.page-reglages .quipeut__tab thead th{
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); text-align:center; padding:12px 6px; border-bottom:1px solid var(--line);
}
.page-reglages .quipeut__tab thead th:first-child{ text-align:left; padding-left:16px }
.page-reglages .quipeut__tab thead th + th,
.page-reglages .quipeut__tab td{ width:62px }
.page-reglages .quipeut__tab tbody th{
  text-align:left; font-weight:600; color:var(--ink-2);
  font-size:.79rem; line-height:1.3; letter-spacing:-.012em;
  padding:11px 6px 11px 16px;
}
.page-reglages .quipeut__tab td{ text-align:center; padding:11px 6px }
.page-reglages .quipeut__tab tbody tr + tr > *{ border-top:1px solid rgba(221,212,197,.55) }
/* la même coche que `.ticks` : la page ne se paie pas un second
   vocabulaire de symboles */
.page-reglages .quipeut__oui{
  display:inline-block; width:15px; height:9px; vertical-align:middle;
  border-left:2.2px solid var(--green); border-bottom:2.2px solid var(--green);
  border-radius:1px; transform:rotate(-45deg) translate(1px,-2px);
}
/* le « non » doit se lire comme un non, pas comme une case oubliée :
   `--line` est la couleur des filets, elle disparaît sur le papier. */
.page-reglages .quipeut__non{
  display:inline-block; width:14px; height:2px; vertical-align:middle;
  background:rgba(109,101,88,.55); border-radius:2px;
}
.page-reglages .quipeut__pied{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-top:1px solid var(--line); background:var(--paper-2);
}
.page-reglages .quipeut__ajout{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.76rem; font-weight:650; color:var(--green-ink); letter-spacing:-.01em;
}
.page-reglages .quipeut__ajout svg{ width:13px; height:13px; flex:none }
.page-reglages .quipeut__prix{
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  letter-spacing:-.03em; color:var(--ink);
}

/* ============================================================
   LE TEMPS — trois réglages, trois objets
   Même grammaire que la fiche « la carte » : trois vignettes de
   hauteur FIXE. En hauteur libre, les trois cadres seraient inégaux
   et les trois titres ne commenceraient pas à la même ligne — ce qui
   se lit comme « la troisième compte moins ».
   ============================================================ */
.page-reglages .tempo{
  margin-top:clamp(36px,5vw,56px); display:grid; gap:clamp(28px,4vw,32px);
}
@media (min-width:840px){ .page-reglages .tempo{ grid-template-columns:repeat(3,1fr) } }
.page-reglages .tempo__i{ display:grid; align-content:start; gap:.5em }
.page-reglages .tempo__i h3{ font-size:var(--step-1); margin-top:.5em }
/* `>` et non un descendant : les trois vignettes contiennent leurs
   propres paragraphes, sur du papier clair. Une règle descendante les
   peindrait en crème sur crème et le calendrier sortirait vide. */
.page-reglages .tempo__i > p{
  color:rgba(246,242,234,.72); font-size:var(--step--1); line-height:1.55;
}
.page-reglages .tempo__vue{
  display:grid; place-items:center; height:296px;
  border:1px solid rgba(246,242,234,.14); border-radius:var(--r);
  background:rgba(246,242,234,.04); padding:22px;
}

/* le calendrier des fermetures : trois semaines pleines à l'encre.
   La pastille « Fermé » porte exactement le remplissage des jours
   barrés — sans quoi il faudrait une légende écrite. */
/* Les trois cartons du temps partagent une largeur, sinon le
   troisième cadre semble plus important que les deux autres.
   238 et non 220 : à 220 le cadre gardait 30 px de marge inutile de
   chaque côté et le calendrier tombait à des chiffres de 9 px, qu'on
   ne lit pas. La place existait, elle n'était pas prise. */
.page-reglages .aout{
  width:min(100%,238px); background:var(--paper); color:var(--ink);
  border-radius:10px; padding:14px 13px 15px;
  box-shadow:0 14px 26px -16px rgba(0,0,0,.75);
}
.page-reglages .aout__mois{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--serif); font-size:.92rem; font-weight:600;
  letter-spacing:-.025em; margin-bottom:11px; color:var(--ink);
}
.page-reglages .aout__ferme{
  font-family:var(--sans); font-size:.57rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  background:var(--ink); color:rgba(246,242,234,.82);
  padding:4px 8px; border-radius:999px;
}
.page-reglages .aout__jours{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:5px;
}
.page-reglages .aout__jours span{
  text-align:center; font-size:.57rem; font-weight:700; letter-spacing:.04em; color:var(--ink-3);
}
.page-reglages .aout__grille{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.page-reglages .aout__grille span{
  aspect-ratio:1; display:grid; place-items:center; border-radius:5px;
  font-size:.63rem; font-weight:600; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.page-reglages .aout__vide{ visibility:hidden }
/* Les jours fermés portent l'encre pleine : à .55 d'opacité le
   chiffre crème disparaissait dans son propre carré, et trois
   semaines barrées devenaient trois semaines vides. */
.page-reglages .aout__grille .is-off{ background:var(--ink); color:rgba(246,242,234,.74) }

/* l'expiration : trois cases, une cochée. Le libellé « par défaut »
   n'est pas décoratif — il dit lequel des trois vous obtenez sans
   rien faire, et c'est le plus honnête des trois. */
.page-reglages .delai{
  width:min(100%,238px); display:grid; gap:8px;
  background:var(--paper); color:var(--ink);
  border-radius:10px; padding:15px 14px;
  box-shadow:0 14px 26px -16px rgba(0,0,0,.75);
}
.page-reglages .delai__t{
  font-size:.61rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.4; margin-bottom:2px;
}
.page-reglages .delai__o{
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; border-radius:9px;
  border:1px solid var(--line); background:#fffdf9;
  font-size:.72rem; font-weight:600; letter-spacing:-.01em; color:var(--ink-2);
}
.page-reglages .delai__o i{
  width:13px; height:13px; border-radius:50%; flex:none;
  border:1.6px solid var(--line); background:#fff;
}
.page-reglages .delai__o.is-on{
  border-color:var(--green); background:var(--green-soft);
  color:var(--green-ink); font-weight:700;
}
.page-reglages .delai__o.is-on i{
  border-color:var(--green-ink); background:var(--green-ink);
  box-shadow:inset 0 0 0 2.6px var(--green-soft);
}
.page-reglages .delai__def{
  margin-left:auto; font-size:.55rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--green-ink); opacity:.85;
}

/* le récap du lundi : l'e-mail tel qu'il arrive, avec son heure.
   Trois chiffres en serif — la même main que les titres du site. */
.page-reglages .recap{
  width:min(100%,238px); display:grid; gap:9px;
  background:var(--paper); color:var(--ink);
  border-radius:10px; padding:14px;
  box-shadow:0 14px 26px -16px rgba(0,0,0,.75);
}
.page-reglages .recap__tete{ display:flex; align-items:center; gap:8px }
.page-reglages .recap__ava{
  width:26px; height:26px; border-radius:8px; flex:none;
  display:grid; place-items:center;
  background:var(--ink); color:var(--green);
  font-family:var(--serif); font-size:.82rem; font-weight:600;
}
.page-reglages .recap__de{
  flex:1; min-width:0; font-size:.7rem; font-weight:700; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);
}
.page-reglages .recap__quand{ flex:none; font-size:.61rem; color:var(--ink-3) }
.page-reglages .recap__objet{
  font-family:var(--serif); font-size:.88rem; font-weight:600; letter-spacing:-.025em;
  line-height:1.2; color:var(--ink);
  padding-bottom:9px; border-bottom:1px solid var(--line);
}
.page-reglages .recap__l{ display:flex; align-items:baseline; gap:9px }
.page-reglages .recap__l b{
  flex:none; min-width:2.1em;
  font-family:var(--serif); font-size:1.05rem; font-weight:600;
  letter-spacing:-.035em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.page-reglages .recap__l > span{ font-size:.7rem; color:var(--ink-2); line-height:1.3 }

/* ============================================================
   LE VOLET DES DONNÉES
   Le bouton qui sauve et celui qui efface dans le même cadre : c'est
   la seule mise en page qui dise vraiment « elles sont à vous ». La
   zone dangereuse est en laiton et en pointillés, pas en rouge — le
   rouge n'appartient pas à cette marque.
   ============================================================ */
.page-reglages .donnees{ width:100%; max-width:480px }
.page-reglages .donnees__corps{ display:grid; gap:13px; background:var(--paper-2) }

.page-reglages .donnees__heb{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1px 12px; align-items:center;
  padding:12px 14px; border-radius:11px; background:#fffdf9; border:1px solid var(--line);
}
.page-reglages .donnees__bouclier{
  width:23px; height:23px; grid-row:span 2; color:var(--green-ink);
}
.page-reglages .donnees__heb b{
  font-size:.8rem; font-weight:650; letter-spacing:-.012em; color:var(--ink);
}
.page-reglages .donnees__heb > span{ font-size:.68rem; color:var(--ink-3) }

.page-reglages .donnees__exp{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  padding:12px 14px; border-radius:11px; background:#fffdf9; border:1px solid var(--line);
}
.page-reglages .donnees__expmot{ display:grid; gap:1px; min-width:0; flex:1 }
.page-reglages .donnees__expmot b{
  font-size:.8rem; font-weight:650; letter-spacing:-.012em; color:var(--ink);
}
.page-reglages .donnees__expmot span{ font-size:.68rem; color:var(--ink-3) }
.page-reglages .donnees__btn{
  flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-size:.74rem; font-weight:650; letter-spacing:-.01em;
}
.page-reglages .donnees__btn svg{ width:13px; height:13px; flex:none }

/* Le fichier, montré plutôt que promis : trois lignes suffisent à
   dire qu'on l'ouvre dans un tableur sans rien apprendre. */
.page-reglages .fichier{
  border-radius:11px; overflow:hidden;
  border:1px solid var(--line); background:#fffdf9;
  font-variant-numeric:tabular-nums;
}
.page-reglages .fichier__l{
  display:grid; grid-template-columns:1.05fr .6fr 1.25fr; gap:10px;
  padding:8px 14px; font-size:.7rem; color:var(--ink-2);
}
.page-reglages .fichier__l > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.page-reglages .fichier__l + .fichier__l{ border-top:1px solid rgba(221,212,197,.55) }
.page-reglages .fichier__l--t{
  background:var(--paper-2); color:var(--ink-3);
  font-size:.58rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}

.page-reglages .donnees__danger{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  padding:12px 14px; border-radius:11px;
  /* Le commentaire de ce bloc annonçait du laiton ; le trait était
     resté en `--line`, la couleur des filets. La zone dangereuse
     s'effaçait donc au milieu de deux cartes blanches, alors qu'elle
     est le second argument de la section. */
  border:1.5px dashed rgba(168,129,60,.4); background:transparent;
}
.page-reglages .donnees__dmot{ display:grid; gap:1px; min-width:0; flex:1 }
.page-reglages .donnees__dmot b{
  font-size:.8rem; font-weight:650; letter-spacing:-.012em; color:var(--ink);
}
.page-reglages .donnees__dmot > span{ font-size:.68rem; color:var(--ink-3); line-height:1.4 }
.page-reglages .donnees__tag{
  flex:none; margin-left:auto;
  font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); background:rgba(168,129,60,.09);
  border:1px solid rgba(168,129,60,.34); padding:5px 10px; border-radius:999px;
}

/* ══ assets/css/fiche/retours.css ══════════════════════════════ */
/* ============================================================
   FICHE « les retours »
   Ce que cette page doit prouver : la carte écrit sur l'écran
   verrouillé, et elle le fait avec mesure. Deux choses doivent être
   limpides en sortant — ce qui part TOUT SEUL, ce que le commerçant
   ÉCRIT — parce que c'est exactement la question que se pose un
   patron de commerce devant un logiciel qui parle à ses clients.

   D'où quatre objets, et pas un de plus :
     la tête        un écran verrouillé, trois vraies notifications
     l'automatique  l'écran de réglages, ses interrupteurs, son délai
     vos mots       l'écran d'envoi, avec la portée annoncée AVANT
     les heures     un cadran de vingt-quatre heures, la nuit éteinte
     après l'envoi  l'historique, qui dit « reçu par », pas « envoyé à »

   Le composant .lock vient de style.css et n'est pas redessiné : un
   écran verrouillé légèrement différent de celui de l'accueil, c'est
   ce qui fait qu'une page a l'air d'avoir été faite ailleurs.
   ============================================================ */

/* ── la tête : l'écran verrouillé ────────────────────────────
   Trois notifications empilées, pas une. Une seule prouve qu'on sait
   afficher quelque chose ; trois prouvent que le ton tient sur la
   durée, et c'est ça, l'argument de la page. */
.notifs{ display:grid; gap:10px }

/* La plus ancienne passe derrière : un écran verrouillé empile, il
   n'aligne pas trois cartes identiques. On baisse le FOND, jamais le
   texte — en opacité, la troisième devenait illisible. */
.notif--vieille{ margin-inline:9px; background:rgba(246,242,234,.075) }

/* ── les objets d'application ────────────────────────────────
   Tout ce qui suit vit DANS un .volet, c'est-à-dire sur fond clair,
   y compris au milieu d'une section sombre. Chaque règle nomme donc
   sa classe : une règle de section qui peindrait « les paragraphes »
   en crème rendrait ces écrans blancs sur blanc. */
.reg__titre,
.msg__titre{
  font-family:var(--serif); font-size:1.05rem; font-weight:600;
  letter-spacing:-.02em; color:var(--ink); line-height:1.2;
}
.reg__sous,
.msg__sous{ margin-top:.35em; font-size:.72rem; color:var(--ink-3); line-height:1.45 }

/* l'écran des notifications automatiques */
.reg__liste{ margin-top:15px; display:grid }
.reg__l{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:12px 0; border-top:1px solid var(--line);
}
.reg__mot{ display:grid; gap:.22em; min-width:0 }
.reg__mot b{ font-size:.79rem; font-weight:650; letter-spacing:-.01em; color:var(--ink); line-height:1.3 }
.reg__mot span{ font-size:.7rem; color:var(--ink-3); line-height:1.4 }

/* L'interrupteur. Dessiné, pas photographié : c'est la case que le
   commerçant devra cocher, et la reconnaître vaut un paragraphe. */
.inter{
  flex:none; position:relative; width:35px; height:21px; margin-top:1px;
  border-radius:999px; background:var(--line);
}
.inter i{
  position:absolute; top:2.5px; left:2.5px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(20,17,13,.35);
}
.inter--on{ background:var(--green) }
.inter--on i{ left:16.5px }

.reg__delaiT{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.79rem; font-weight:650; letter-spacing:-.01em; color:var(--ink);
}

/* Les choix d'un réglage, tels qu'ils s'offrent. Montrer les cinq
   délais plutôt que celui qui est retenu dit la seule chose qui
   compte ici : c'est vous qui décidez, pas le logiciel. */
.opts{ margin-top:9px; display:flex; flex-wrap:wrap; gap:6px }
.opt{
  padding:5px 10px; border-radius:7px; border:1px solid var(--line); background:#fff;
  font-size:.68rem; font-weight:600; color:var(--ink-3); white-space:nowrap; line-height:1.3;
}
/* Les cinq délais, en trois colonnes. En simple retour à la ligne ils
   sortaient 4 + 1 : « Le lendemain » restait seul sur sa ligne et se
   lisait comme un débordement, pas comme un cinquième choix. Une
   grille de trois donne 3 + 2 — deux rangées qu'on a manifestement
   voulues. Réservé à l'écran des réglages : les trois groupes de
   l'écran d'envoi tiennent sur une ligne et n'ont rien à aligner. */
.reg .opts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) }
.reg .opt{
  display:flex; align-items:center; justify-content:center;
  text-align:center; white-space:normal;
}
.opt--on{ background:var(--ink); border-color:var(--ink); color:var(--paper) }

/* ── l'écran d'envoi ─────────────────────────────────────────
   La portée AVANT l'écriture : c'est le seul endroit de la fiche où
   l'on montre un chiffre qui n'arrange pas. Trente-huit sur
   cinquante-deux — le reste du marché affiche cinquante-deux. */
.msg__label{
  margin-top:16px; font-size:.62rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}
.msg__label + .opts{ margin-top:8px }

.portee{
  margin-top:14px; padding:12px 13px; border-radius:11px;
  border:1px solid var(--line); background:var(--paper-2);
}
.portee__barre{ display:flex; gap:3px; height:8px }
.portee__part{ border-radius:99px; min-width:0 }
.portee__part--v{ background:var(--green) }
/* La part injoignable, assez sombre pour se voir. À #cfc4b0 sur le
   papier du cadre, elle disparaissait : la barre n'avait plus qu'un
   bout vert et disait « tout le monde », c'est-à-dire exactement le
   contraire de ce que cette section vient prouver. */
.portee__part--g{ background:#8c7e66 }
.portee__cles{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px 16px }
.cle{ display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:650; line-height:1.3 }
.cle::before{ content:""; flex:none; width:8px; height:8px; border-radius:50% }
.portee__cles .cle{ color:var(--ink-2) }
.cle--v::before{ background:var(--green) }
.portee__cles .cle--g::before{ background:#8c7e66 }
.portee__mot{ margin-top:9px; font-size:.7rem; color:var(--ink-2); line-height:1.5 }

.champ{
  margin-top:8px; padding:11px 12px; display:grid; gap:8px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
}
.champ__t{ font-size:.78rem; color:var(--ink); line-height:1.45 }
.champ__n{ justify-self:end; font-size:.64rem; color:var(--ink-3); font-variant-numeric:tabular-nums }

.msg__pied{ margin-top:14px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px 14px }
.msg__btn{
  padding:9px 15px; border-radius:9px; background:var(--ink); color:var(--paper);
  font-size:.74rem; font-weight:650; letter-spacing:-.01em;
}
.msg__lim{ font-size:.68rem; color:var(--ink-3) }

/* ── le cadran des heures calmes ─────────────────────────────
   « On n'envoie pas la nuit » est une promesse tant qu'on l'écrit ;
   dessinée, avec minuit en haut et la moitié éteinte, c'est une
   règle qu'on peut vérifier d'un coup d'œil. */
/* À 280 px, le cadran était l'objet le plus petit de la page dans la
   colonne la plus large : à côté des trois volets qui remplissent
   leur moitié, la section des heures avait l'air d'attendre quelque
   chose. On le remet à l'échelle des autres — et les heures écrites
   dessus, qui sont du 11 px mis à l'échelle du viewBox, se lisent
   enfin sans se pencher. */
.horloge{ width:min(100%,400px); display:grid; justify-items:center }
.cadran{ width:min(100%,330px); height:auto }
.cadran__ticks{ fill:none; stroke:rgba(246,242,234,.32); stroke-width:2; stroke-linecap:round }
.cadran__jour{ fill:none; stroke:var(--green); stroke-width:18 }
.cadran__nuit{ fill:none; stroke:rgba(246,242,234,.17); stroke-width:18 }
.cadran__borne{ fill:var(--paper) }
.cadran__h{ fill:rgba(246,242,234,.5); font:600 11px/1 var(--sans) }
.cadran__b{ fill:var(--paper); font:700 12.5px/1 var(--sans); font-variant-numeric:tabular-nums }
/* « HEURES CALMES » se lit AVANT « 21 h → 9 h », sans quoi le grand
   chiffre se rapporte au vert qui l'entoure — c'est-à-dire au
   contraire de ce qu'il dit. À 9 px et la moitié d'opacité, personne
   ne le lisait en premier. */
.cadran__t{ fill:rgba(246,242,234,.68); font:700 10px/1 var(--sans); letter-spacing:.1em }
.cadran__v{ fill:var(--paper); font:600 18px/1 var(--serif); letter-spacing:-.02em }

.cles{ margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px }
.cles .cle{ color:rgba(246,242,234,.72) }
.cle--n::before{ background:rgba(246,242,234,.3) }

/* Le message qui attend le matin. L'heure barrée dit ce qui n'a PAS
   eu lieu : sans elle, la carte ne montrerait qu'un envoi de plus. */
.attente{
  margin-top:22px; width:100%; padding:15px 17px; display:grid; gap:.3em;
  border:1px solid rgba(246,242,234,.16); border-radius:14px;
  background:rgba(246,242,234,.05);
}
.attente__quoi{
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
}
.attente__t{ font-size:.86rem; font-weight:650; letter-spacing:-.01em; color:var(--paper) }
.attente__l{ margin-top:.4em; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px;
  font-variant-numeric:tabular-nums }
.attente__h{
  font-size:1.1rem; font-weight:700; letter-spacing:-.02em;
  color:rgba(246,242,234,.42); text-decoration:line-through;
  text-decoration-color:rgba(246,242,234,.35);
}
.attente__f{ font-size:.7rem; color:rgba(246,242,234,.6) }
.attente__f::before{ content:"→\00a0" }
.attente__v{ font-size:1.1rem; font-weight:700; letter-spacing:-.02em; color:var(--green) }

/* ── l'historique des envois ─────────────────────────────────
   Trois lignes, dont une en cours et une avec des injoignables. Un
   historique où tout serait vert ne prouverait rien : c'est la ligne
   « 14 sans carte dans le téléphone » qui rend les autres croyables. */
.hist__l{ display:grid }
.hist__i{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  padding:13px 0; border-top:1px solid var(--line) }
.hist__i:first-child{ padding-top:2px; border-top:0 }
.hist__i:last-child{ padding-bottom:2px }
.hist__pt{ flex:none; width:9px; height:9px; margin-top:.42em; border-radius:50% }
.hist__pt--ok{ background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.18) }
.hist__pt--cours{ background:var(--brass); box-shadow:0 0 0 3px rgba(168,129,60,.18) }
.hist__c{ display:grid; gap:.2em; min-width:0; justify-items:start }
.hist__a{ font-size:.83rem; font-weight:650; letter-spacing:-.012em; color:var(--ink); line-height:1.35 }
.hist__d{ font-size:.68rem; color:var(--ink-3) }
.hist__b{
  margin-top:.4em; padding:3px 9px; border-radius:99px;
  border:1px solid var(--line); background:var(--paper-2);
  font-size:.65rem; color:var(--ink-2); line-height:1.4;
}

/* ── le renvoi vers l'anniversaire ───────────────────────────
   Le quatrième message automatique est l'anniversaire, et il a sa
   propre fiche. Le développer ici ferait deux pages qui disent la
   même chose, et aucune des deux ne la dirait entièrement. */
.renvoi{
  margin-top:clamp(40px,6vw,64px); display:grid; gap:clamp(22px,3vw,34px); align-items:center;
  padding:clamp(24px,3.4vw,36px); border-radius:var(--r);
  border:1px solid rgba(246,242,234,.16); background:rgba(246,242,234,.04);
}
@media (min-width:760px){ .renvoi{ grid-template-columns:minmax(0,1fr) auto } }
.renvoi__quoi{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
}
.renvoi__t{ margin-top:.5em; font-size:var(--step-1); color:var(--paper) }
.renvoi__x{ margin-top:.6em; font-size:var(--step--1); line-height:1.55; max-width:62ch;
  color:rgba(246,242,234,.72) }
.renvoi__cta{
  margin-top:1.1em; display:inline-flex; align-items:center; gap:.45em;
  font-size:var(--step--1); font-weight:650; color:var(--green); text-decoration:none;
}
.renvoi__cta::after{ content:"→"; transition:translate .2s ease }
.renvoi__cta:hover{ text-decoration:underline; text-underline-offset:3px }
.renvoi__cta:hover::after{ translate:3px 0 }
@media (prefers-reduced-motion:reduce){ .renvoi__cta::after{ transition:none } }

/* Une feuille de calendrier. Elle ne dit rien de plus que « un jour
   dans l'année », mais un renvoi sans image se lit comme une note de
   bas de page — et personne ne clique sur une note de bas de page. */
.renvoi__jour{
  flex:none; justify-self:start; position:relative; overflow:hidden;
  width:102px; aspect-ratio:1/1.12; border-radius:13px;
  display:grid; place-items:center;
  background:var(--paper); color:var(--ink);
  box-shadow:0 20px 36px -22px rgba(0,0,0,.75);
}
.renvoi__jour b{
  margin-top:24px; font-family:var(--serif); font-size:2.5rem; font-weight:600;
  letter-spacing:-.045em; line-height:1;
}
.renvoi__jour i{
  position:absolute; inset:0 0 auto; height:24px; display:grid; place-items:center;
  background:var(--green); color:#06280f; font-style:normal;
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}

/* ── le téléphone n'a pas à rétrécir, l'écran verrouillé si ──
   À 390 px, .lock garde ses 400 px de large mais son fond glisse
   sous le pouce : on rentre les marges plutôt que de rapetisser le
   texte, qui doit rester à la taille où on le lit vraiment. */
@media (max-width:520px){
  .notif--vieille{ margin-inline:5px }
  .renvoi__jour{ justify-self:center }
}