/*
  L'AMORCE · feuille de style de la page de vente, et d'elle seule.

  Elle vient APRÈS `assets/css/style.css` et n'en redéfinit aucune règle : elle réutilise ses
  variables · ivoire, bleu nuit, bronze, Newsreader, Inter · et n'ajoute que des classes
  préfixées `am-`. Aucun sélecteur d'élément nu, aucune classe du site retouchée : ce fichier
  ne peut donc rien casser ailleurs, et le retirer rendrait simplement la page austère.

  Le préfixe n'est pas de la coquetterie : la page de vente et le site partagent la même
  feuille globale, et une règle sur `h1` ou `.card` écrite ici irait se poser sur les autres
  pages sans que personne le voie avant longtemps.
*/

/* --------------------------------------------------------------------------
   Repères communs
   -------------------------------------------------------------------------- */

.am {
  --am-lisible: 62ch;          /* largeur de lecture, jamais plus */
  --am-gap: clamp(16px, 2.4vw, 28px);
  --am-bloc: clamp(44px, 6vw, 84px);
}

.am-section {
  padding-block: var(--am-bloc);
  border-top: 1px solid var(--line);
}
.am-section:first-of-type { border-top: 0; }

.am-titre {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
.am-h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); }
.am-h3 { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.3rem); }

.am-oeil {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.am-texte {
  max-width: var(--am-lisible);
  margin: 0 0 1rem;
  color: var(--ink-2);
  line-height: 1.62;
}
.am-texte:last-child { margin-bottom: 0; }
.am-texte strong { color: var(--ink); font-weight: 600; }

.am-note {
  font-size: 0.875rem;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: var(--am-lisible);
}

/* --------------------------------------------------------------------------
   En-tête : l'état des ventes se lit sans défiler
   -------------------------------------------------------------------------- */

.am-header-etat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.am-header-etat .link { font-size: 0.85rem; white-space: nowrap; }

/*
  L'en-tête du site a une hauteur fixe de 78 px. Sur un téléphone, le badge et le lien ne
  tiennent pas côte à côte à côté du nom : ils passaient à la ligne et débordaient la barre.
  Ils s'empilent donc, serrés et alignés à droite, ce qui rentre largement dans les 78 px.
*/
@media (max-width: 620px) {
  .am-header-etat {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
  }
  .am-badge { font-size: 0.72rem; padding: 0.28rem 0.6rem; }
  .am-header-etat .link { font-size: 0.78rem; }
}

.am-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  white-space: nowrap;
}
.am-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  flex: none;
}

/* --------------------------------------------------------------------------
   Hero : nom, promesse, prix et action, sans défilement
   -------------------------------------------------------------------------- */

/*
  Trois zones nommées, et non deux colonnes : c'est ce qui permet de changer l'ORDRE sur un
  téléphone sans toucher au HTML. Empilé dans l'ordre de lecture, le prix tombait à 620 px du
  haut · il tenait sur l'écran de contrôle et serait passé sous la ligne de flottaison sur un
  téléphone un peu plus court. Le bloc d'achat passe donc avant les deux paragraphes.
*/
.am-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas:
    "intro achat"
    "texte achat";
  /*
    La carte d'achat occupe les deux lignes et elle est plus haute que le texte à sa gauche.
    Sans hauteurs déclarées, la place en trop se répartit sur les deux lignes : le paragraphe
    décrochait du titre d'une centaine de pixels, comme s'il appartenait à autre chose. La
    seconde ligne absorbe donc tout le mou, et le texte reste collé sous l'accroche.
  */
  grid-template-rows: auto 1fr;
  gap: 0 clamp(28px, 4vw, 60px);
  align-items: start;
  padding-block: clamp(36px, 4.5vw, 64px) var(--am-bloc);
}
.am-hero-intro { grid-area: intro; }
.am-hero-texte { grid-area: texte; }
.am-achat { grid-area: achat; }

/*
  Le titre était deux fois trop gros : il mangeait l'écran et repoussait le prix sous la ligne
  de flottaison. Il reste le plus grand élément de la page, mais il laisse voir ce qui suit.
*/
.am-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.022em;
  margin: 0 0 0.35em;
  color: var(--ink);
}

/*
  L'accroche est faite de quatre phrases courtes plutôt que d'une longue : elle a besoin d'un
  peu plus de largeur qu'un titre, et d'un équilibre de lignes qui ne coupe pas une phrase en
  deux. D'où `text-wrap: balance` et une mesure un peu plus généreuse.
*/
/*
  La graisse était absente, donc héritée : 400. C'était la SEULE chose de toute la page rendue
  en Newsreader 400, et cela faisait télécharger un fichier de 129 Ko pour un paragraphe. Un
  quart du poids de la page, pour une différence que personne ne voit.

  Le reste de la page compose en 500. L'accroche s'y range, et le fichier ne descend plus.
*/
.am-promesse {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 0.98rem + 0.8vw, 1.52rem);
  line-height: 1.36;
  color: var(--ink);
  margin: 0 0 1.9rem;
  max-width: 34ch;
  text-wrap: balance;
}

.am-hero .am-texte { max-width: 52ch; }

/* --------------------------------------------------------------------------
   Le bloc d'achat
   -------------------------------------------------------------------------- */

.am-achat {
  position: sticky;
  top: clamp(16px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow-soft);
}

.am-prix {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
}
/* « TTC » est une mention, pas un chiffre : il accompagne le prix sans lutter avec lui. */
.am-prix-ttc {
  font-family: var(--font-body);
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-left: 0.5em;
  vertical-align: 0.55em;
}
.am-final-achat .am-prix-ttc { color: var(--dark-ink-3); }

.am-prix-detail {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.86rem;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

.am-achat-action { margin-top: 1.25rem; }
.am-achat .btn { width: 100%; justify-content: center; }

.am-achat-liste {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}
/*
  LA PUCE EST POSÉE, ET LE TEXTE RESTE UN SEUL BLOC.

  Cette règle était une grille à deux colonnes. Une balise en ligne dans le texte · l'exposant
  de « 7ᵉ » · devenait alors un élément de grille à part, et le « e » s'affichait seul sous la
  puce. La capture téléphone l'a montré ; aucun banc ne pouvait le voir, puisque le texte servi
  était juste.
*/
.am-achat-liste li {
  position: relative;
  padding-left: 1.65rem;
  line-height: 1.45;
}
.am-achat-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.am-ferme {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  padding: 0.95rem 1.05rem;
  margin-bottom: 1rem;
}
.am-ferme p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.am-ferme strong { display: block; color: var(--ink); margin-bottom: 0.2rem; }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.am-grille {
  display: grid;
  gap: var(--am-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  margin-top: 1.85rem;
}

.am-carte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 2vw, 24px);
}
.am-carte h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.am-carte p {
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.am-carte-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.55rem;
}

/* Le bloc miroir : des situations, pas un mur de texte. */
.am-miroir {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding: 0;
  list-style: none;
  max-width: 76ch;
}
.am-miroir li {
  display: grid;
  grid-template-columns: 0.9rem 1fr;
  gap: 0.6rem;
  align-items: start;
  padding: 0.72rem 0.9rem 0.72rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
/*
  Un point bronze, comme les autres listes de cette page. C'était un trait cadratin, et il
  s'affichait devant six phrases : une feuille de style produit du texte visible au même titre
  qu'un fichier PHP, et la règle vaut ici aussi. La colonne passe de 1.4rem à 0.9rem, sinon la
  puce flotterait loin du texte qu'elle annonce.
*/
.am-miroir li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.58em;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   La chronologie du parcours
   -------------------------------------------------------------------------- */

.am-jours {
  list-style: none;
  margin: 1.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 74ch;
}
/*
  LA COLONNE DES REPÈRES EST FIXE, ET ELLE NE L'ÉTAIT PAS.

  Elle valait `minmax(7.5rem, auto)`. Chaque étape étant sa propre grille, une étape dont le
  repère dépasse 7,5 rem élargit sa colonne à elle seule : son titre et son texte se décalent
  vers la droite, et la chronologie cesse d'être alignée.

  Le défaut ne s'est vu qu'à la capture. Il dormait depuis toujours : « Jour 0 », « Jour 7 »,
  « Jours 8 à 13 » tenaient tous dans 7,5 rem, et l'alignement n'était qu'une coïncidence.
  « Après l'action 7 » ne tient pas, et la coïncidence a cessé.

  Une piste fixe aligne les cinq étapes et fait revenir à la ligne un repère trop long, au lieu
  de pousser son contenu.
*/
.am-jour {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: clamp(12px, 2vw, 28px);
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.am-jour:first-child { border-top: 0; padding-top: 0; }
.am-jour-quand {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.22em;
}
.am-jour-quoi h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.06rem;
  margin: 0 0 0.3rem;
  color: var(--ink);
}
.am-jour-quoi p {
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   L'exemple d'action : une représentation sobre de l'écran, sans image
   -------------------------------------------------------------------------- */

.am-exemple {
  margin-top: 1.85rem;
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 62rem;
}
.am-exemple-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem clamp(16px, 2vw, 24px);
  background: var(--dark-2);
  border-bottom: 1px solid var(--dark-line);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-ink-2);
}
.am-exemple-indicatif {
  border: 1px solid var(--dark-line-strong);
  border-radius: 999px;
  padding: 0.24rem 0.7rem;
  letter-spacing: 0.08em;
  color: var(--dark-ink);
  text-transform: none;
  font-size: 0.72rem;
}
.am-exemple-corps { padding: clamp(20px, 2.6vw, 32px); }
.am-exemple-corps h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.28;
  margin: 0 0 1.35rem;
  color: var(--dark-ink);
  max-width: 40ch;
}
.am-champs {
  display: grid;
  gap: 0;
  margin: 0;
}
.am-champ {
  display: grid;
  grid-template-columns: minmax(8.5rem, auto) 1fr;
  gap: clamp(10px, 2vw, 24px);
  padding: 0.72rem 0;
  border-top: 1px solid var(--dark-line);
}
.am-champ:first-child { border-top: 0; padding-top: 0; }
.am-champ dt {
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dark-ink-3);
  padding-top: 0.15em;
}
.am-champ dd {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--dark-ink);
}

/* --------------------------------------------------------------------------
   Pour qui / pas maintenant
   -------------------------------------------------------------------------- */

.am-deux {
  display: grid;
  gap: var(--am-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: 1.85rem;
}
.am-liste {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.am-liste li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.55rem;
  align-items: start;
}
.am-liste li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.5em;
  border-radius: 2px;
  flex: none;
}
.am-oui li::before { background: var(--accent); }
.am-non li::before { background: var(--ink-3); }

/* --------------------------------------------------------------------------
   Questions fréquentes
   -------------------------------------------------------------------------- */

.am-faq { margin-top: 1.6rem; max-width: 74ch; }
.am-faq details {
  border-top: 1px solid var(--line);
  padding: 0;
}
.am-faq details:last-child { border-bottom: 1px solid var(--line); }
.am-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.4rem 1.05rem 0;
  position: relative;
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--ink);
}
.am-faq summary::-webkit-details-marker { display: none; }
.am-faq summary::after {
  content: "+";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}
.am-faq details[open] summary::after { content: "⌃"; }
.am-faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.am-faq-corps {
  padding: 0 2.4rem 1.15rem 0;
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--am-lisible);
}
.am-faq-corps p { margin: 0 0 0.7rem; }
.am-faq-corps p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Bloc final
   -------------------------------------------------------------------------- */

.am-final {
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 56px);
  margin-block: var(--am-bloc);
}
.am-final .am-oeil { color: var(--accent); }
.am-final h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -0.014em;
  margin: 0 0 1.5rem;
  color: var(--dark-ink);
  max-width: 30ch;
  text-wrap: balance;
}
/*
  LES DEUX COLONNES PARTENT DU MÊME BORD, ET S'ARRÊTENT CHACUNE OÙ SON CONTENU FINIT.

  Trois rédactions, et la troisième tient pour une raison qui ne se devine pas :

  · CENTRÉES · avec un titre court à gauche, le bloc flottait au milieu d'un vide de trois
    cents pixels, et le regard ne savait pas par où entrer ;
  · ÉTIRÉES · le panneau prenait la hauteur de la carte, et le vide passait DEDANS. Un grand
    rectangle encadré et vide se lit comme un contenu qui manque ou qui n'a pas chargé : c'est
    pire qu'une asymétrie, parce que l'asymétrie ne raconte rien et que le cadre vide raconte
    une panne ;
  · ALIGNÉES EN HAUT · chaque bloc fait sa hauteur. Les deux ne finissent pas ensemble, et ce
    n'est pas un défaut : ce sont deux choses différentes, l'une se lit et l'autre se remplit.
*/
.am-final-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}
.am-recap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--dark-ink-2);
}
/* Le même piège, dans la liste du bloc final. Il dormait : aucune balise en ligne n'y vivait
   encore. On le retire avant qu'une phrase en amène une. */
.am-recap li {
  position: relative;
  padding-left: 1.7rem;
  line-height: 1.5;
}
.am-recap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
/*
  « PRIX DE LANCEMENT », AU-DESSUS DU CHIFFRE.

  La mention doit se lire comme une mention : plus petite que le prix, et posée juste au-dessus
  de lui pour qu'on ne puisse pas la rattacher à autre chose. Elle emprunte l'échelle du détail
  qui suit le prix, sans en reprendre la couleur sombre : sur le bloc final, le fond est nuit.
*/
.am-prix-avant {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/*
  L'introduction du bloc de commande. Elle reprend la promesse de la page en deux phrases, sans
  recopier la chronologie : quelqu'un qui arrive ici par l'ancre n'a peut-être rien lu d'autre.
*/
.am-final-intro {
  margin: 0 0 1.6rem;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--dark-ink-2);
}
.am-oeil-inclus { margin-bottom: 0.7rem; }

/*
  L'ARSENAL · UN BLOC, ET NON UNE COLONNE DE TEXTE.

  La capture a montré le défaut avant toute relecture : la carte de commande descendait seule,
  et le contenu de gauche s'arrêtait à mi-hauteur en laissant un vide qui ressemblait à une page
  inachevée. Le bloc pose un fond et une bordure, prend la place, et l'inventaire se lit comme
  un inventaire.
*/
.am-final-arsenal {
  background: rgba(242, 239, 232, 0.045);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 34px);
}
.am-final-arsenal h2 { margin-bottom: 1.1rem; }


.am-final-arsenal .am-recap { gap: 0.85rem; }
.am-final-arsenal .am-recap li { max-width: 62ch; }
/*
  LE DÉBUT DE CHAQUE PUCE PORTE L'IDÉE, ET IL DOIT SE LIRE SEUL.

  Cinq expressions doivent suffire à comprendre toute l'offre : quelqu'un qui balaie la page
  ne lit que les entrées. Le gras hérité est réglé pour le fond clair ; sur le bleu nuit il se
  confondait avec le texte courant, et la hiérarchie ne se voyait pas.
*/
.am-final-arsenal .am-recap li strong {
  color: var(--dark-ink);
  font-weight: 600;
}



/*
  LA CARTE DE COMMANDE PASSE SUR LE FOND CLAIR DE L'IDENTITÉ.

  Elle était ivoire à cinq pour cent sur bleu nuit : une nuance, pas un contraste. Sur la seule
  zone de la page où quelqu'un sort sa carte bancaire, la carte doit se détacher du fond, et non
  s'y fondre. C'est l'ivoire de l'identité, avec le texte sombre qui va avec.

  Tout ce qui vit dedans était écrit pour le fond sombre : champs, étiquettes, cases de
  consentement, notes, bouton. Chacun est repris ci-dessous. Une carte claire dont le texte
  serait resté clair serait illisible, et c'est exactement le genre de demi-changement qui passe
  la relecture et se voit à la capture.
*/
.am-final-achat {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
}
.am-final-achat .am-oeil-achat {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--accent);
}
.am-final-achat .am-prix { color: var(--ink); }
.am-final-achat .am-prix-ttc { color: var(--ink-3); }
.am-final-achat .am-prix-detail { color: var(--ink-3); }

/* Le formulaire, repris pour le fond clair. */
.am-final-achat .am-form .field-row label { color: var(--ink); }
.am-final-achat .am-form input[type="text"],
.am-final-achat .am-form input[type="email"] {
  color: var(--ink);
  background: #fff;
  border-color: var(--line-strong);
}
.am-final-achat .am-form input[type="text"]::placeholder,
.am-final-achat .am-form input[type="email"]::placeholder { color: var(--ink-3); }
.am-final-achat .am-form input[type="text"]:focus-visible,
.am-final-achat .am-form input[type="email"]:focus-visible { background: #fff; }

/*
  LES MENTIONS JURIDIQUES RESTENT LISIBLES, ET PASSENT AU SECOND PLAN.

  « Secondaire » ne veut pas dire « pâle » : c'est le texte qui engage, et il doit pouvoir être
  lu. Il recule par la TAILLE et par la place, pas par le contraste.
*/
.am-final-achat .am-case {
  border-top-color: var(--line);
  color: var(--ink-2);
  font-size: 0.82rem;
}
.am-final-achat .am-note { color: var(--ink-3); font-size: 0.82rem; }
.am-final-achat .am-note-apres { margin-top: 0.75rem; text-align: center; }
.am-final-achat .btn { width: 100%; justify-content: center; }
.am-final-achat .am-ferme {
  background: var(--warn-soft);
  border-color: var(--line-strong);
}
.am-final-achat .am-ferme strong { color: var(--ink); }
.am-final-achat .am-ferme p { color: var(--ink-2); }
.am-final-achat a:not(.btn) { color: var(--ink); }
.am-final-achat .am-test { color: var(--ink-3); }
.am-final-achat .am-test strong { color: var(--ink-2); }
.am-final-achat .am-erreur {
  background: var(--warn-soft);
  border-left-color: var(--warn);
  color: var(--ink);
}
/*
  LE BOUTON REDEVIENT CELUI DU SITE.

  Il avait été inversé en bronze parce que le bleu nuit du bouton primaire disparaissait sur le
  fond sombre de la carte. La carte est claire : le bouton du site y est chez lui, et c'est le
  même geste que partout ailleurs. Une couleur de plus n'apporte rien quand le fond ne l'exige
  plus.
*/

/* --------------------------------------------------------------------------
   Le formulaire de commande
   -------------------------------------------------------------------------- */

/*
  Le formulaire est entièrement habillé ici, et c'est nécessaire : `.field-row` et les styles de
  champ vivent dans `espace-client.css`, que cette page publique ne charge pas. Sans ces règles,
  les champs sont ceux du navigateur · des rectangles blancs bruts posés sur un fond bleu nuit.

  Il est écrit pour le fond sombre, parce que c'est là qu'il vit : bordures claires, texte
  clair, et surtout un contraste tenu sur le texte de consentement · c'est le texte qui engage
  juridiquement, il ne peut pas être le plus pâle de la page.
*/
.am-form { margin-top: 1.5rem; }

.am-form .field-row { margin-bottom: 1.1rem; }

/*
  Portée sur `.field-row`, et non sur `.am-form label` : les cases de consentement sont des
  `label` elles aussi, et une règle plus spécifique leur imposait le gras et le blanc. Le texte
  qui engage juridiquement doit se lire comme du texte, pas comme une étiquette de champ.
*/
.am-form .field-row label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--dark-ink);
}
.am-form input[type="text"],
.am-form input[type="email"],
.am-form select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--dark-ink);
  background: rgba(242, 239, 232, 0.06);
  border: 1px solid var(--dark-line-strong);
  border-radius: var(--radius-sm);
  appearance: none;
}
.am-form input[type="text"]::placeholder,
.am-form input[type="email"]::placeholder { color: var(--dark-ink-3); }
.am-form input[type="text"]:focus-visible,
.am-form input[type="email"]:focus-visible,
.am-form select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: rgba(242, 239, 232, 0.1);
}

.am-case {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.85rem 0;
  border-top: 1px solid var(--dark-line);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--dark-ink-2);
  cursor: pointer;
}
.am-case input {
  margin: 0.2em 0 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.am-case:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }

.am-erreur {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  padding: 0.85rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  color: var(--ink);
}

.am-test {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Accessibilité et petits écrans
   -------------------------------------------------------------------------- */

.am a:focus-visible,
.am button:focus-visible,
.am input:focus-visible,
.am summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/*
  `1fr` n'est pas `minmax(0, 1fr)`.

  Un `1fr` nu vaut `minmax(auto, 1fr)` : le minimum de la colonne est le minimum de son
  contenu, et une colonne peut donc devenir plus large que la grille qui la contient. C'est
  arrivé ici · colonne de 334 px dans un conteneur de 279 · et cela produisait sept pixels de
  débordement à 375 px, invisibles sur un écran d'ordinateur.

  `minmax(0, 1fr)` autorise la colonne à descendre à zéro, donc à suivre son conteneur.
*/
@media (max-width: 900px) {
  .am-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "achat" "texte";
    gap: 0;
  }
  .am-hero-intro { margin-bottom: 1.5rem; }
  .am-hero-texte { margin-top: 1.85rem; }
  .am-achat { position: static; }
  .am-final-grille { grid-template-columns: minmax(0, 1fr); }

  /*
    PLUS RIEN À RANGER SUR TÉLÉPHONE, ET C'EST LA LONGUEUR QUI A RÉGLÉ LA QUESTION.

    L'ordre était forcé ici : le conteneur disparaissait de la mise en page et ses morceaux se
    replaçaient autour de la carte, parce que l'arsenal détaillé faisait deux mille pixels et
    repoussait le formulaire. Il fait cinq lignes courtes. La grille à une colonne pose donc
    l'accroche, les puces, puis la carte, et il n'y a rien après elle.

    Une mécanique qui n'a plus de raison d'être ne se garde pas « au cas où » : elle se retire,
    sinon c'est elle qu'on retrouvera à expliquer dans six mois.
  */
}

/* Et par sécurité : un enfant de grille ne doit jamais imposer sa largeur minimale. */
.am-hero > *,
.am-final-grille > *,
.am-grille > *,
.am-deux > * { min-width: 0; }

@media (max-width: 560px) {
  .am-jour { grid-template-columns: 1fr; gap: 0.35rem; }
  .am-champ { grid-template-columns: 1fr; gap: 0.15rem; }
  .am-exemple-barre { font-size: 0.72rem; }
  .am-hero h1 { font-size: clamp(2.3rem, 1.5rem + 7vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .am * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   La liste d'attente
   -------------------------------------------------------------------------- */

/*
  En bas de page, le formulaire est un `<details>`. Son `summary` est un bouton pour
  l'utilisateur : il en a donc l'apparence, la taille de cible et le contour de focus. Ce qui
  change, c'est qu'il fonctionne sans une ligne de JavaScript.

  En haut, il est déplié : voir `_attente.php` pour le pourquoi.
*/
.am-attente { margin-top: 1rem; }

/*
  L'ANCRE, ET L'EN-TÊTE QUI LA RECOUVRAIT.

  L'en-tête du site est en `position: sticky` sur 78 px. Un lien vers `#attente` amenait donc
  le haut du bloc EXACTEMENT sous la barre, c'est-à-dire derrière elle : le message de
  confirmation et les premières lignes du formulaire disparaissaient, et il fallait remonter
  à la main pour comprendre ce qui s'était passé.

  `scroll-margin-top` déplace le point d'arrivée du défilement, pas l'élément. La page ne
  bouge pas d'un pixel ; seul le navigateur s'arrête plus haut. 78 px de barre plus une marge
  de respiration, et le bloc arrive entier sous l'en-tête.

  La règle porte sur l'ancre ET sur la cible de l'achat : les deux souffraient du même défaut,
  et le visiteur qui clique sur « Démarrer » mérite la même chose.
*/
#attente,
#commander {
  scroll-margin-top: 96px;
}

/*
  Le bloc du haut, déplié. Il n'a pas de `summary` à cliquer : son titre annonce le formulaire
  au lieu de l'ouvrir, et reprend l'apparence de l'ancien bouton pour que la page ne change pas
  de silhouette.
*/
.am-attente-titre {
  display: block;
  margin: 0;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 6px 6px 0 0;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-align: center;
}

.am-attente-boite > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  text-align: center;
}
.am-attente-boite > summary::-webkit-details-marker { display: none; }
.am-attente-boite > summary:hover { background: #1a3448; }
.am-attente-boite > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.am-attente-boite[open] > summary { border-radius: 6px 6px 0 0; }

.am-attente-form {
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 1.1rem;
}
.am-attente-form .field-row { margin-bottom: 0.9rem; }
.am-attente-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
}
.am-attente-form input[type="text"],
.am-attente-form input[type="email"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.93rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  appearance: none;
}
.am-attente-form .am-case {
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.am-attente-form .am-case span { font-weight: 400; }
.am-attente-form .btn { width: 100%; justify-content: center; }

/* L'avis après envoi : lu par les lecteurs d'écran grâce à role="status" sur l'élément. */
.am-attente-avis {
  margin: 0 0 0.9rem;
  padding: 0.8rem 0.95rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.am-attente-bon { background: var(--accent-soft); color: var(--ink); }
.am-attente-mal { background: var(--warn-soft); color: var(--ink); }

/*
  Le piège à robots. Sorti de l'écran plutôt que masqué par `display:none` : certains automates
  ignorent les champs en display:none, et c'est précisément eux qu'on cherche à attraper.
*/
.am-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Dans le bloc sombre, les mêmes éléments changent de peau. */
.am-final-achat .am-attente-boite > summary {
  background: transparent;
  color: var(--dark-ink);
  border-color: var(--dark-line-strong);
}
.am-final-achat .am-attente-boite > summary:hover { background: rgba(242, 239, 232, 0.08); }
.am-final-achat .am-attente-form {
  border-color: var(--dark-line-strong);
  background: rgba(242, 239, 232, 0.04);
}
.am-final-achat .am-attente-form label { color: var(--dark-ink); }
.am-final-achat .am-attente-form input[type="text"],
.am-final-achat .am-attente-form input[type="email"] {
  background: rgba(242, 239, 232, 0.06);
  border-color: var(--dark-line-strong);
  color: var(--dark-ink);
}
.am-final-achat .am-attente-form .am-case {
  border-top-color: var(--dark-line);
  color: var(--dark-ink-2);
}
.am-final-achat .am-attente-avis { color: var(--dark-ink); }
.am-final-achat .am-attente-bon { background: rgba(167, 122, 85, 0.24); }
.am-final-achat .am-attente-mal { background: rgba(242, 239, 232, 0.1); }

/* --------------------------------------------------------------------------
   Espacements : des classes, jamais des styles en ligne
   -------------------------------------------------------------------------- */

/*
  La politique de sécurité de contenu de l'espace interdit les styles en ligne
  (style-src 'self'), et la page de vente passe par le même bootstrap.php. Un attribut
  `style` y est donc silencieusement ignoré : rien dans la console, rien dans les journaux,
  juste une marge qui n'existe pas.

  Ces quatre classes remplacent les huit attributs `style` que la page portait. Elles ne font
  rien de plus que ce qu'ils faisaient, mais elles, elles s'appliquent.
*/
.am-note-apres { margin-top: 0.95rem; }
.am-note-champ { margin-top: 0.4rem; }
.am-note-bloc { margin: 1rem 0; }
.am-ferme-apres { margin-top: 1.25rem; }
.am-ferme-suite { margin-top: 0.6rem !important; }

/*
  L'état « Inscription enregistrée », dans l'en-tête après une inscription réussie.

  C'est un `<span>` et non un bouton : il n'y a plus rien à faire, donc rien à cliquer et rien
  à atteindre au clavier. Il a la taille et la place du bouton qu'il remplace, pour que
  l'en-tête ne saute pas au rechargement, mais il n'en a pas la couleur : proposer une action
  déjà accomplie ferait douter de ce qu'on vient de faire.
*/
.am-etat-fait {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 11px 18px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.am-etat-fait::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

@media (max-width: 620px) {
  .am-etat-fait { padding: 7px 12px; font-size: 0.76rem; }
}

/* --------------------------------------------------------------------------
   Le pied de page
   -------------------------------------------------------------------------- */

/*
  LES LIENS, DANS LEURS QUATRE ÉTATS.

  `.link` de la feuille commune donne l’encre sombre, faite pour un fond clair. Sur le pied
  de page bleu nuit, cela donnait un contraste de 1,00 : le texte avait exactement la couleur
  de son fond. Seuls le filet et les séparateurs restaient visibles.

  Les quatre états sont déclarés, `:visited` compris. Sans lui, le navigateur applique sa
  propre couleur d’historique et deux liens voisins ne se ressemblent plus.
*/
.site-footer .link,
.site-footer a {
  color: #a8b3ba;
  border-bottom-color: rgba(201, 161, 132, 0.5);
}

.site-footer .link:visited,
.site-footer a:visited {
  color: #a8b3ba;
  border-bottom-color: rgba(201, 161, 132, 0.5);
}

.site-footer .link:hover,
.site-footer a:hover,
.site-footer .link:visited:hover,
.site-footer a:visited:hover {
  color: #f2efe8;
  border-bottom-color: #c9a184;
}

.site-footer .link:focus-visible,
.site-footer a:focus-visible {
  color: #f2efe8;
  outline: 2px solid #c9a184;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Les séparateurs entre les liens, qui étaient plus visibles que les liens eux-mêmes. */
.site-footer .small {
  color: #7c8a94;
}

/*
  LE PIED DE PAGE RESTE EN BAS QUAND LA PAGE EST COURTE.

  La page de désinscription tient en cinq lignes : le pied s’arrêtait au milieu de l’écran
  et laissait 337 px de vide en dessous.

  `flex: 1 0 auto` sur le contenu pousse le pied vers le bas SANS jamais le fixer : sur la
  page de vente, longue de plusieurs milliers de pixels, la règle ne change rien du tout,
  puisque le contenu dépasse déjà la hauteur de la fenêtre. C’est ce qui distingue cette
  approche d’un `position: fixed`, qui aurait collé le pied par-dessus le contenu.

  `100dvh` suit la barre d’adresse des navigateurs mobiles, qui se rétracte au défilement ;
  `100vh` reste devant pour les navigateurs qui ne le connaissent pas.
*/
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

body > .site-footer {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   La page de désinscription
   -------------------------------------------------------------------------- */

/*
  Le bouton de confirmation et celui de réinscription. Ils sont à la ligne, avec de l’air
  au-dessus : ce sont les deux seules actions de la page, et sur un téléphone elles doivent
  se toucher sans viser.
*/
.am-desinscription-form,
.am-desinscription-action {
  margin: 1.6rem 0 0;
}

.am-desinscription-form .btn,
.am-desinscription-action .btn {
  min-height: 48px;
}

/*
  Le lien de renoncement respire sous le bouton. Collé à lui, il se lisait comme une légende
  du bouton plutôt que comme l’autre choix possible, et c’est pourtant le choix que la
  plupart des gens cherchent quand ils ouvrent ce lien par curiosité.
*/
.am-desinscription-form + .am-note {
  margin-top: 1.1rem;
}

@media (max-width: 560px) {
  .am-desinscription-form .btn,
  .am-desinscription-action .btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}
.am-final-achat .am-form select{color:var(--ink);background:#fff;border-color:var(--line-strong);max-width:100%;appearance:auto}