/*
  Westiti Memories — charte des écrans.

  Trois surfaces, et une seule couleur d'action.

  Le vert très sombre est le sol des moments d'émotion : l'arrivée du coureur
  sur son année, la confirmation de sa commande. Il est dérivé du vert de
  marque et non d'un gris neutre, afin que l'obscurité reste verte.

  Le crème est celui du papier du livret. Il revient partout où l'écran parle
  de l'objet, de sorte que la continuité entre les deux soit sensible avant
  d'être expliquée.

  Le corail ne décore rien. Il ne signale qu'une chose : ce sur quoi on clique.

  Les deux typographies sont celles du livret. Gabarito porte la structure,
  Instrument Serif les quelques lignes qui touchent.
*/

:root {
  --encre:       #0C1A18;   /* vert-noir, sol des moments forts */
  --encre-2:     #16302C;   /* un ton au-dessus, pour les reliefs */
  --papier:      #FBF8F3;   /* le crème du livret */
  --papier-2:    #F1EBE1;
  --blanc:       #FFFFFF;
  --corail:      #ED766A;   /* marque */
  --corail-vif:  #E04A33;   /* action, et texte corail sur clair */
  --vert:        #2A736E;
  --vert-clair:  #6FC3BB;   /* texte vert sur fond sombre */
  --gris:        #6E7D79;
  --gris-clair:  #A9B5B1;
  --trait:       #E3DED4;
  --trait-sombre: rgba(255, 255, 255, .13);

  --mesure: 64ch;           /* longueur de ligne confortable */
  --rayon:  14px;
  --page:   min(1180px, 100% - 48px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: Gabarito, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-synthesis-weight: none;
}

/* La barre de commande flotte au-dessus du contenu : sans cette réserve, elle
   masquerait les dernières lignes de la page. */
body:has(.commander) { padding-bottom: 92px; }

/* ------------------------------------------------------------------ type */

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; }

h1 {
  font-size: clamp(38px, 7.4vw, 86px);
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h3 { font-size: 19px; line-height: 1.25; }

p { margin: 0 0 1.1em; max-width: var(--mesure); }

/* La serif ne sert qu'aux lignes qui touchent, jamais à de l'information. */
.emotion {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
.emotion i { font-style: italic; }

.doux  { color: var(--gris); }
.aide  { color: var(--gris); font-size: 14.5px; line-height: 1.5; }
.sombre .doux, .sombre .aide { color: var(--gris-clair); }

/* ---------------------------------------------------------------- blocs */

.page { width: var(--page); margin-inline: auto; }

.bande { padding: clamp(54px, 9vw, 110px) 0; }
.bande + .bande { padding-top: 0; }

.sombre {
  background: var(--encre);
  color: var(--papier);
}
.sombre h1, .sombre h2, .sombre h3 { color: var(--papier); }

.papier { background: var(--papier); }

/* ----------------------------------------------------------- navigation */

.entete {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
}
.sombre-entete {
  background: rgba(12, 26, 24, .88);
  border-bottom-color: var(--trait-sombre);
}
.entete .page {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 15px 0;
}

.marque { display: block; line-height: 0; }
.marque img { display: block; width: auto; height: 48px; }
@media (max-width: 560px) { .marque img { height: 38px; } }

/* Sur un en-tête sombre, le vert du logotype disparaîtrait dans le fond :
   c'est le gabarit qui sert alors la variante claire, et non cette feuille.
   Un échange par `content` marchait, mais seulement sur les navigateurs
   sortis depuis 2024 ; ailleurs le logotype devenait illisible, ce qui est
   le genre de défaut qu'on ne voit jamais sur sa propre machine. */

/* -------------------------------------------------------------- actions */

.action {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0; border-radius: 999px;
  background: var(--corail-vif); color: #fff;
  font: inherit; font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow: 0 1px 2px rgba(12, 26, 24, .18), 0 8px 20px rgba(224, 74, 51, .22);
}
.action:hover { background: #cf3f29; transform: translateY(-1px); }
.action:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(12,26,24,.2); }

.action.calme {
  background: transparent; color: var(--encre);
  border: 1.5px solid var(--trait); box-shadow: none;
}
.action.calme:hover { background: var(--papier-2); transform: none; }
.sombre .action.calme {
  color: var(--papier); border-color: var(--trait-sombre); background: transparent;
}
.sombre .action.calme:hover { background: rgba(255, 255, 255, .07); }

a { color: var(--vert); text-underline-offset: 3px; }
.sombre a { color: var(--vert-clair); }

:focus-visible {
  outline: 3px solid var(--corail-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------- le héros et ses tracés */

.heros { position: relative; overflow: hidden; }

.heros .page {
  position: relative; z-index: 2;
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  padding-block: clamp(42px, 5.5vw, 70px);
}
@media (min-width: 900px) {
  .heros .page { grid-template-columns: 1.05fr .95fr; }
}

.heros-nom {
  font-size: clamp(13px, 1.5vw, 15px);
  color: var(--vert-clair);
  margin-bottom: 14px;
  letter-spacing: 0;
}

/* Le millésime emprunte sa forme à celui de la couverture : énorme, serré,
   posé comme un chiffre de dossard. */
/* Le millésime est le monument de la page : énorme, serré, posé comme un
   chiffre de dossard. Il reste couleur papier, et laisse le corail aux
   tracés : deux accents se disputeraient le regard. */
.sombre h1.millesime {
  display: block;
  font-size: clamp(74px, 15vw, 162px);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -0.055em;
  color: var(--papier);
  margin: 4px 0 24px;
}

.heros-dit { max-width: 34ch; color: rgba(251, 248, 243, .82); }

/* La couverture posée comme un objet : une ombre longue, une inclinaison
   à peine perceptible, et un filet clair sur la tranche gauche qui suggère
   l'épaisseur des pages. */
.objet { margin: 0; perspective: 1400px; }
.objet img {
  display: block; width: 100%; height: auto;
  max-width: 420px; margin-inline: auto;
  border-radius: 2px 5px 5px 2px;
  box-shadow:
    -1px 0 0 rgba(255, 255, 255, .22),
    0 2px 6px rgba(0, 0, 0, .3),
    0 30px 70px rgba(0, 0, 0, .55);
  transform: rotateY(-7deg) rotateX(1.5deg);
  transform-origin: 60% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .objet img { animation: poser .9s cubic-bezier(.2, .8, .3, 1) both; }
  @keyframes poser {
    from { opacity: 0; transform: rotateY(-14deg) translateY(22px) scale(.96); }
    to   { opacity: 1; transform: rotateY(-7deg) rotateX(1.5deg); }
  }
}

/* Le dessin des parcours : il tient la place pendant la composition. */
.parcours { width: 100%; height: auto; display: block; }
.parcours path {
  fill: none;
  stroke: var(--corail);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
}
.parcours path.vedette { stroke-width: 2.6; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .parcours path {
    stroke-dasharray: var(--long, 1200);
    stroke-dashoffset: var(--long, 1200);
    animation: tracer 1.5s cubic-bezier(.33, .9, .4, 1) forwards;
    animation-delay: calc(var(--rang, 0) * 42ms);
  }
  @keyframes tracer { to { stroke-dashoffset: 0; } }
}

/* ------------------------------------------------------------- chiffres */

/* Les totaux se lisent comme un relevé de chrono : le nombre domine, son
   unité s'efface. Pas de cartes : des colonnes séparées par un filet. */
.releve {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px 0;
  border-top: 1px solid var(--trait);
}
.sombre .releve { border-top-color: var(--trait-sombre); }

.releve > div {
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid var(--trait);
}
.sombre .releve > div { border-bottom-color: var(--trait-sombre); }

.releve b {
  display: block;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 900; line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.releve span {
  display: block; margin-top: 7px;
  font-size: 14px; color: var(--gris);
}

/* La même grille, quand la valeur est un mot et non un nombre. Une
   référence produit ou une date entière écrasent la colonne voisine si on
   leur laisse la taille d'un chrono : ici le texte se lit, il ne domine pas. */
.releve.texte { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.releve.texte > div { padding-right: 28px; }
.releve.texte b {
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.sombre .releve span { color: var(--gris-clair); }

/* ------------------------------------------------------------- tableaux */

.releve-sports { width: 100%; border-collapse: collapse; font-size: 16px; }
.releve-sports th {
  text-align: left; font-weight: 600; font-size: 14px; color: var(--gris);
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--trait);
}
.releve-sports th + th, .releve-sports td + td { text-align: right; }
.releve-sports td {
  padding: 13px 14px 13px 0; border-bottom: 1px solid var(--trait);
  font-variant-numeric: tabular-nums;
}
.releve-sports tr:last-child td { border-bottom: 0; }
.releve-sports .discipline { font-weight: 700; }
.releve-sports .jauge {
  display: block; height: 3px; border-radius: 2px; margin-top: 7px;
  background: var(--corail); opacity: .9;
}

/* --------------------------------------------------------- les planches */

/* Les pages du livret ne sont pas des cartes : ce sont des feuilles. Légère
   ombre portée, pas de coin arrondi, et un fond papier derrière. */
.planches {
  display: grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.planches figure { margin: 0; }
.planches img {
  width: 100%; height: auto; display: block;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(12, 26, 24, .12), 0 14px 30px rgba(12, 26, 24, .09);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.planches figcaption {
  margin-top: 8px; font-size: 13px; color: var(--gris);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- formulaires */

label { display: block; font-weight: 600; font-size: 15px; margin: 20px 0 7px; }

input[type=text], input[type=email], textarea, select {
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: 16px;
  color: var(--encre); background: var(--blanc);
  border: 1.5px solid var(--trait); border-radius: 10px;
}
textarea { line-height: 1.5; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--gris-clair); }
input:focus, textarea:focus, select:focus {
  outline: 0; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(42, 115, 110, .16);
}

/* Le choix des courses : des lignes que l'on coche, pas des cartes. */
.courses { border-top: 1px solid var(--trait); }
.courses label {
  display: flex; gap: 14px; align-items: baseline; margin: 0;
  padding: 16px 4px; border-bottom: 1px solid var(--trait);
  font-weight: 400; cursor: pointer;
}
.courses label:hover { background: var(--papier); }
.courses input { accent-color: var(--vert); width: 18px; height: 18px; flex: none; }
.courses .quoi { font-weight: 700; display: block; }
.courses .quand { font-size: 14.5px; color: var(--gris); }
.courses label:has(input:checked) { background: var(--papier); }
.courses label:has(input:checked) .quoi { color: var(--vert); }

.bloc-course {
  padding: 22px 0 26px; border-bottom: 1px solid var(--trait);
}
.bloc-course:last-of-type { border-bottom: 0; }
.bloc-course > b { font-size: 18px; }

/* ----------------------------------------------------- barre de commande */

/* Elle suit le coureur pendant qu'il parcourt son livret, parce que l'envie
   d'acheter naît en regardant les pages et non en arrivant au bas de l'écran. */
.commander {
  position: sticky; bottom: 0; z-index: 25;
  background: rgba(12, 26, 24, .95);
  backdrop-filter: blur(14px);
  color: var(--papier);
  border-top: 1px solid var(--trait-sombre);
}
.commander .page {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 14px 0;
}
.commander .quoi { font-weight: 700; }
.commander .combien { color: var(--gris-clair); font-size: 14.5px; }
.commander form { margin: 0; }

/* ----------------------------------------------------------- composition */

.composition {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier); padding: 34px 26px; text-align: center;
}
.composition .jauge {
  width: 180px; height: 4px; margin: 0 auto 18px;
  border-radius: 2px; background: var(--trait); overflow: hidden;
}
.composition .jauge i {
  display: block; height: 100%; width: 34%; border-radius: 2px;
  background: var(--corail-vif);
  animation: va_et_vient 1.5s ease-in-out infinite;
}
@keyframes va_et_vient {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(330%); }
}
@media (prefers-reduced-motion: reduce) {
  .composition .jauge i { animation: none; width: 100%; }
}

/* ------------------------------------------------------------ mentions */

.pied {
  border-top: 1px solid var(--trait);
  color: var(--gris); font-size: 14px;
}
.pied .page {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  justify-content: space-between; padding: 26px 0 34px;
}
.strava b { color: #FC4C02; font-weight: 700; }

/* ------------------------------------------------------------ états */

.etat {
  display: inline-block; font-size: 13px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px;
  background: var(--papier-2); color: var(--gris);
  white-space: nowrap;
}
.etat-payee        { background: #FCE6E1; color: var(--corail-vif); }
.etat-fichier_pret { background: #DCEEEC; color: #1D5B56; }
.etat-chez_imprimeur { background: #E6E9F2; color: #3B4A72; }
.etat-expediee, .etat-livree { background: var(--vert); color: #fff; }
.etat-echouee      { background: var(--corail-vif); color: #fff; }

.avis {
  border-left: 3px solid var(--vert); background: var(--papier);
  padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 0 0 26px;
}
.avis.probleme { border-left-color: var(--corail-vif); }

@media (max-width: 640px) {
  :root { --page: calc(100% - 32px); }
  .commander .page { flex-wrap: wrap; gap: 10px; padding: 12px 0; }
  .commander .action { width: 100%; }
  /* Sur un écran de téléphone, la barre mangerait le tiers de la hauteur :
     le détail du produit cède la place, il est déjà dit plus haut. */
  .commander .combien { display: none; }
  body:has(.commander) { padding-bottom: 124px; }
}

/* ======================================================= le back-office ===
   Cet écran sert à traiter des lots, pas à séduire. La densité et la
   lisibilité y valent mieux que les effets, et la seule couleur vive reste
   celle du bouton qui agit vraiment. */

.filtres {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--trait);
}
.filtres a {
  padding: 8px 15px; border-radius: 999px;
  background: var(--papier); color: var(--gris);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.filtres a:hover { background: var(--papier-2); color: var(--encre); }
.filtres a.actif { background: var(--encre); color: var(--papier); }

.lot { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 26px; }

.commandes { width: 100%; border-collapse: collapse; font-size: 16px; }
.commandes th {
  text-align: left; font-weight: 600; font-size: 14px; color: var(--gris);
  padding: 0 14px 11px 0; border-bottom: 1px solid var(--trait);
}
.commandes td {
  padding: 15px 14px 15px 0;
  border-bottom: 1px solid var(--trait); vertical-align: top;
}
.commandes tr:hover td { background: var(--papier); }
.commandes .nombre { font-variant-numeric: tabular-nums; color: var(--gris); }
.commandes input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--vert); margin-top: 2px;
}
.invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.fiche { display: grid; gap: clamp(32px, 4vw, 60px); align-items: start; }
@media (min-width: 880px) {
  .fiche { grid-template-columns: 1.25fr .75fr; }
}
.fiche aside {
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 24px 24px 28px;
}
.fiche aside h2 { font-size: 21px; }
.fiche aside input, .fiche aside select { background: var(--blanc); }
.fiche .action { margin: 0 8px 8px 0; }

.adresse {
  white-space: pre-wrap; font-size: 17px; line-height: 1.5;
  padding: 18px 20px; border-left: 3px solid var(--vert);
  background: var(--papier); border-radius: 0 10px 10px 0;
}

/* ========================================================= les cadeaux ===
   Offrir est un geste différent d'acheter, et l'écran doit le dire avant le
   texte. D'où le ruban, le coupon détachable, et le mot de l'offrant posé
   comme une citation : trois objets de papier, dans un service qui en vend. */

/* Une colonne étroite : un formulaire long se remplit mieux sur une mesure
   courte, où l'œil n'a pas à repartir de loin à chaque ligne. */
.etroit { max-width: 64ch; }

.offrande .page { align-items: center; }

/* Sur ces deux écrans, le titre cède un tiers de sa taille. Il n'est plus le
   monument de la page : le bouton l'est. Au format du millésime, celui-ci
   tombait sous la ligne de flottaison, et un destinataire qui ne fait pas
   défiler la page croit n'avoir rien à faire. */
.sombre.offrande h1.millesime {
  font-size: clamp(50px, 8.2vw, 104px);
  margin-bottom: 18px;
}
.offrande .emotion { font-size: clamp(21px, 2.4vw, 29px); }
.offrande .heros-dit { font-size: 16px; }

/* Le paquet, à droite du titre. Il ne représente rien de réel — c'est un
   prix présenté comme un objet, et c'est tout ce qu'on peut montrer d'un
   livret dont on ignore encore le contenu. */
.paquet {
  position: relative; text-align: center;
  background: linear-gradient(160deg, var(--encre-2), #0a1614);
  border: 1px solid var(--trait-sombre);
  border-radius: 18px; padding: 54px 34px 46px;
  max-width: 420px; margin-inline: auto; width: 100%;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8);
}
/* Le ruban croise à un quart de la boîte, et non en son milieu : centré, il
   barrait le prix en deux, et un prix coupé par une bande se lit mal. */
.paquet .ruban {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent calc(24% - 6px),
      var(--corail) calc(24% - 6px),
      var(--corail) calc(24% + 6px),
      transparent calc(24% + 6px)),
    linear-gradient(to bottom, transparent calc(20% - 6px),
      rgba(237, 118, 106, .82) calc(20% - 6px),
      rgba(237, 118, 106, .82) calc(20% + 6px),
      transparent calc(20% + 6px));
  border-radius: 18px; pointer-events: none;
}
.paquet b {
  position: relative; display: block;
  font-size: clamp(54px, 7vw, 86px); font-weight: 900;
  line-height: 1; letter-spacing: -.03em; color: var(--papier);
}
.paquet span:not(.ruban) {
  position: relative; display: block; margin-top: 12px;
  color: var(--gris-clair); font-size: 15px;
}

/* Le coupon. Un cadeau se matérialise par un bout de papier qu'on détache,
   et le pointillé est la seule chose qui le dise sans un mot. */
.coupon {
  background: var(--papier); color: var(--encre);
  border-radius: 16px; padding: 26px 28px 28px;
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .7);
}
.coupon-titre {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--gris); margin-bottom: 10px;
}
.coupon b {
  display: block; font-size: clamp(28px, 4vw, 40px); font-weight: 900;
  letter-spacing: .06em; color: var(--vert);
  font-variant-numeric: tabular-nums;
  padding-bottom: 20px; margin-bottom: 18px;
  border-bottom: 2px dashed var(--trait);
}
.coupon-pied { display: block; font-size: 14px; color: var(--gris); line-height: 1.5; }
.coupon code {
  display: block; margin-top: 12px; word-break: break-all;
  font-size: 13.5px; color: var(--vert);
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 8px; padding: 10px 12px;
}

/* Le mot de l'offrant. Il est de quelqu'un d'autre, et la page doit le
   montrer : d'où l'italique du livret, et le filet corail. */
.mot {
  margin: 30px 0 0; padding: 18px 0 4px 22px;
  border-left: 3px solid var(--corail);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(20px, 2.4vw, 26px); font-style: italic;
  line-height: 1.35; color: var(--papier);
}
.mot cite {
  display: block; margin-top: 12px;
  font-family: inherit; font-style: normal; font-size: 15px;
  color: var(--gris-clair);
}

/* Les étapes. Numérotées à la main, parce que le chiffre doit avoir le poids
   d'un repère et non celui d'une puce. */
.etapes { list-style: none; counter-reset: pas; padding: 0; margin: 0; }
.etapes li {
  counter-increment: pas; position: relative;
  padding: 0 0 22px 52px; line-height: 1.6;
}
.etapes li::before {
  content: counter(pas);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--encre); color: var(--papier);
  font-size: 15px; font-weight: 700;
}
.etapes li:last-child { padding-bottom: 0; }
.etapes b { display: block; }

.paire { display: grid; gap: 26px; }
@media (min-width: 760px) { .paire { grid-template-columns: 1fr 1fr; } }
.paire > div {
  border-top: 2px solid var(--encre); padding-top: 16px;
}
.paire b { display: block; margin-bottom: 7px; }
.paire p { margin: 0; color: var(--gris); font-size: 15.5px; line-height: 1.6; }

.duo { display: grid; gap: 0 20px; }
@media (min-width: 620px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo label:first-child { margin-top: 20px; }

.formulaire .aide { margin-top: 7px; }

/* Le champ de code, replié. Il ne concerne qu'une minorité des coureurs, et
   déplié d'emblée il suggérerait à tous les autres qu'il leur manque
   quelque chose. */
.pliant {
  border: 1.5px dashed var(--trait); border-radius: var(--rayon);
  padding: 18px 22px; background: var(--papier);
}
.pliant[open] { border-style: solid; background: var(--blanc); }
.pliant summary {
  cursor: pointer; font-weight: 700; color: var(--vert);
  list-style: none;
}
.pliant summary::-webkit-details-marker { display: none; }
.pliant summary::before { content: "＋  "; font-weight: 400; }
.pliant[open] summary::before { content: "−  "; }

.ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.ligne input {
  flex: 1 1 200px; width: auto;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
}
.ligne .action { white-space: nowrap; }

/* La barre de commande, quand le livret est offert. Le vert remplace le
   noir : ce n'est plus une vente, c'est une remise de cadeau. */
.commander.offert {
  background: rgba(42, 115, 110, .96);
  border-top-color: rgba(255, 255, 255, .22);
}
.commander.offert .combien { color: rgba(255, 255, 255, .78); }
.commander .quoi s { opacity: .55; font-weight: 400; }
.commander .quoi b { color: #fff; }

/* L'appel à offrir, sur la page d'accueil. Il vit à côté du bouton
   principal sans lui disputer la place : c'est une seconde porte, pas une
   seconde offre. */
.offrir-aussi {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 14px; padding: 15px 22px;
  border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 16px;
  color: var(--vert); background: transparent;
  border: 1.5px solid var(--vert);
  transition: background .15s ease, color .15s ease;
}
.offrir-aussi:hover { background: var(--vert); color: #fff; }
.offrir-aussi::before { content: "🎁"; font-size: 17px; }
@media (max-width: 560px) {
  .offrir-aussi { margin: 12px 0 0; display: flex; justify-content: center; }
}

/* ===================================================== l'attente ========
   Ce que le coureur regarde pendant la composition est le livret lui-même :
   trente-deux feuillets qui se remplissent au rythme réel du travail. Aucune
   image, aucune bibliothèque — des rectangles et deux transitions. */

.fabrique { padding: 38px 26px 34px; }

.fabrique .compteur {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.fabrique .compteur b {
  font-size: clamp(44px, 6vw, 62px); font-weight: 700;
  letter-spacing: -0.04em; color: var(--encre);
}
.fabrique .compteur span { font-size: 20px; font-weight: 400; color: var(--gris); }

.fabrique h3 { margin: 10px 0 22px; font-weight: 400; color: var(--gris); }

.fabrique .barre {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--trait); max-width: 520px; margin: 0 auto 26px;
}
.fabrique .barre i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--corail-vif), var(--vert));
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

/* Les feuillets. Le rapport 148 sur 210 est celui d'une page A5, pour que la
   grille se lise comme un livret étalé et non comme une barre de plus. */
.feuillets {
  display: grid; gap: 5px; max-width: 520px; margin: 0 auto;
  grid-template-columns: repeat(16, 1fr);
}
@media (max-width: 560px) {
  .feuillets { grid-template-columns: repeat(8, 1fr); gap: 4px; }
}
.feuillets i {
  display: block; aspect-ratio: 148 / 210; border-radius: 2px;
  background: var(--trait); opacity: .5;
  transition: background .5s ease, opacity .5s ease, transform .5s ease;
}

/* Une page composée : le crème du livret, posée avec son ombre. */
.feuillets i.pleine {
  background: var(--blanc); opacity: 1;
  box-shadow: 0 1px 3px rgba(12, 26, 24, .16);
}

/* Avant la mise en images, aucune page n'est encore prête : une onde
   traverse la grille pour dire que le travail est en cours, sans prétendre
   qu'une page serait faite. */
@media (prefers-reduced-motion: no-preference) {
  .feuillets.onde i {
    animation: respire 2.4s ease-in-out infinite;
    animation-delay: calc(var(--rang) * 55ms);
  }
}
@keyframes respire {
  0%, 70%, 100% { opacity: .35; }
  35%           { opacity: .9; }
}