/* Tinkly · feuille de style unique.
 *
 * Un seul fichier, chargé partout. Le parcours est d'abord un objet mobile :
 * tout est dimensionné pour un téléphone tenu à une main, et l'écran large
 * n'est qu'un cas particulier traité en fin de fichier.
 *
 * LE SYSTEME VISUEL EST CELUI DE TRENDSAAS, la reference dont ce produit
 * descend. Decision d'Ilyasse du 14 septembre 2026 : on garde ses couleurs,
 * ses icones et ses elements comme base, on change le nom.
 *
 * Un graphite froid, jamais de noir pur ni de teinte chaude. Un seul accent,
 * un acier pale, assez present pour guider l'oeil et assez desature pour ne
 * jamais claquer comme un accent de gabarit. L'action principale est BLANCHE,
 * texte graphite : sur ce fond, un bouton de couleur tire l'oeil vers la
 * couleur, un bouton blanc le tire vers l'action.
 *
 * Deux couleurs de sens survivent, et elles ne sont pas decoratives : le vert
 * marque ce qui est acquis, le rouge ce qui se perime. */

:root {
  /* ------------------------------------------------------------------------
     LE SYSTEME VISUEL VIENT DE TRENDSAAS, la reference dont ce produit
     descend, et c'est une decision d'Ilyasse du 14 septembre 2026 : « les
     couleurs de la landing page, les icones, tous les elements, on change
     juste le nom mais le reste on garde comme base intacte. »

     Les NOMS sont les notres, les VALEURS sont les siennes. Renommer les
     jetons aurait demande de reecrire les 1900 lignes qui suivent, pour
     exactement le meme resultat a l'ecran.

     Le violet #6d3bff qui tenait ici avant est parti avec cette decision. Son
     commentaire d'origine explique pourquoi l'accent est ce qu'il est : un
     acier pale, « assez present pour guider l'oeil, assez desature pour ne
     jamais claquer comme un accent de gabarit ». Un violet sature fait
     exactement ce qu'il dit d'eviter.
     --------------------------------------------------------------------- */

  /* Fonds : graphite froid. Jamais de noir pur, jamais de teinte chaude. */
  --fond: #0a0a0d;
  --fond-2: #0f1013;
  --surface: #15161b;
  --surface-haut: #1d1e25;

  /* Traits. En opacite et non en couleur pleine : ils se posent sur
     n'importe lequel des quatre fonds sans se recalculer. */
  --bord: rgba(255, 255, 255, 0.07);
  --bord-vif: rgba(255, 255, 255, 0.13);
  --bord-net: rgba(255, 255, 255, 0.24);

  /* Texte : neutres tres legerement bleutes. */
  --texte: #eef0f3;
  --texte-2: #9ba1ad;
  --texte-3: #6a707c;

  /* Accent unique : acier pale. */
  --accent: #aeb9cc;
  --accent-clair: #d6dde8;
  --accent-sombre: #78828f;
  --accent-voile: rgba(174, 185, 204, 0.09);
  --accent-halo: rgba(174, 185, 204, 0.26);

  /* L'ACTION PRINCIPALE EST BLANCHE, texte graphite. C'est le geste le plus
     visible du changement : nos boutons etaient violets. */
  --action: #ffffff;
  --action-texte: #0a0a0d;

  /* SON SYSTEME N'A AUCUNE COULEUR DE SENS, verifie : pas un seul vert dans
     ses 177 Ko de style. Ce qui est acquis se marque avec l'accent, et c'est
     coherent avec « un seul accent ». Le nom `--acquis` reste, parce que les
     douze endroits qui s'en servent disent bien « acquis » et pas
     « accentue » ; seule sa valeur change. Le vert acide #00e5a0 est parti
     avec l'ancienne identite.
     Le rouge devient son corail, plus doux que notre #ff2d55 : il n'a pas de
     rouge de palette, seulement une couleur d'erreur, #ff6b6b. */
  --acquis: var(--accent);
  --urgence: #ff6b6b;

  --rayon: 14px;
  --rayon-s: 8px;
  --rayon-l: 20px;
  --gouttiere: 20px;
  /* Le tunnel reste une colonne etroite : 620 px est la largeur de lecture
     d'une question, pas celle d'une landing. Sa valeur a lui, 1180 px, vit
     dans --max-large pour les pages qui en ont besoin. */
  --max: 620px;
  --max-large: 1180px;

  --ombre: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  --arete: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lueur: 0 0 0 1px var(--bord-net), 0 10px 34px -12px var(--accent-halo);

  --transition: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  /* Les trois polices de trendsaas. Instrument Sans porte le texte courant,
     Bricolage Grotesque les titres, Spline Sans Mono les kickers. */
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* LES DEUX HALOS DE TRENDSAAS, aux memes positions et aux memes opacites :
     un acier en haut a gauche, un bleu froid en haut a droite. Celui qu'on
     avait en bas a droite etait un vert acide `rgba(0, 229, 160, .09)`, la
     derniere trace de l'ancienne identite dans le fond de chaque page. */
  background-image: radial-gradient(900px 520px at 12% -8%, rgba(174, 185, 204, 0.1), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, rgba(90, 120, 200, 0.08), transparent 60%);
  background-attachment: fixed;
}

/* LE GRAIN. Une nappe de bruit fixe, a 35 % d'opacite sur un motif lui-meme a
   4,5 %, donc presque rien. C'est ce qui empeche les grandes surfaces
   graphite de se lire comme du plat, et c'est un element de son systeme :
   sans lui, les memes couleurs paraissent plus pauvres. En data URI pour ne
   pas ajouter une requete reseau au premier ecran. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  /* Bricolage Grotesque, la police de titre de trendsaas. C'est elle qui fait
     l'essentiel de son allure : tres serree, tres peu d'interligne, et un
     poids de 600 plutot que les 660 qu'on avait. Un titre en Inter lourd et
     un titre en Bricolage a 600 ne se ressemblent pas du tout, meme aux memes
     couleurs. */
  font-family: "Space Grotesk", "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Les trois reglages de detail qui completent son allure et qu'on n'avait
   pas : la selection prend l'accent, un `em` n'est pas de l'italique mais un
   mot mis en avant, et le focus clavier est visible. */
::selection {
  background: var(--accent);
  color: var(--action-texte);
}

em {
  font-style: normal;
  color: var(--accent);
}

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

p {
  margin: 0;
}

/* ------------------------------------------------------------- la coquille */

.parcours {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#barre {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--gouttiere);
  /* Le fond en dur suit --fond : il etait reste sur l'ancien #08080c. */
  background: rgba(10, 10, 13, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}

#retour {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: var(--surface);
  color: var(--texte-2);
  cursor: pointer;
  transition: var(--transition);
}

#retour:hover {
  border-color: var(--bord-vif);
  color: var(--texte);
}

#retour[hidden] {
  visibility: hidden;
  display: grid;
}

#jauge {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--surface-haut);
  overflow: hidden;
}

#jauge i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-clair));
  transition: width 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

#compteur {
  flex: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--texte-3);
}

#ecran {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--gouttiere) 120px;
}

/* Chaque écran entre par le bas. Discret : 10 px et 260 ms, au-delà ça donne
   l'impression d'attendre. */
.vue {
  animation: entree 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes entree {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

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

/* ---------------------------------------------------------------- en-têtes */

.kicker {
  /* Le kicker de trendsaas : pas une pastille, une ligne de monospace tres
     espacee, precedee d'un point lumineux. La pastille arrondie coloree qui
     tenait ici avant est le marqueur visuel le plus reconnaissable d'un
     gabarit, et c'est exactement ce que son systeme evite. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-halo);
}

.titre {
  font-size: clamp(27px, 7.4vw, 36px);
  margin-bottom: 10px;
}

.sous {
  color: var(--texte-2);
  font-size: 16px;
  margin-bottom: 26px;
}

.corps {
  color: var(--texte-2);
  font-size: 17px;
  margin-bottom: 28px;
}

/* ---------------------------------------------------------------- options */

.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: var(--transition);
}

.option:hover {
  background: var(--surface-haut);
  border-color: var(--bord-vif);
  transform: translateX(3px);
}

.option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-voile);
  box-shadow: var(--lueur);
}

.option .coche {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bord-vif);
  display: grid;
  place-items: center;
  transition: var(--transition);
}

.option[aria-pressed="true"] .coche {
  border-color: var(--accent);
  background: var(--accent);
  /* Le fond est un acier pale : la coche doit etre sombre, pas blanche. */
  color: var(--action-texte);
}

.option .coche svg {
  opacity: 0;
  transform: scale(0.5);
  transition: var(--transition);
}

.option[aria-pressed="true"] .coche svg {
  opacity: 1;
  transform: scale(1);
}

.option .texte {
  flex: 1;
  min-width: 0;
}

.option .label {
  font-weight: 560;
}

.option .detail {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--texte-3);
}

/* ------------------------------------------------------- curseur et échelle */

.curseur {
  margin: 34px 0 30px;
  text-align: center;
}

.curseur .valeur {
  font-size: clamp(40px, 13vw, 62px);
  font-weight: 720;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--accent-clair), var(--acquis));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.curseur .unite {
  display: block;
  margin-top: -4px;
  color: var(--texte-3);
  font-size: 14px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  background: transparent;
  cursor: grab;
}

input[type="range"]:active {
  cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-haut);
}

input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-haut);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 20px -2px var(--accent);
}

input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent);
}

.echelle {
  display: flex;
  gap: 8px;
  margin: 26px 0 14px;
}

.echelle button {
  flex: 1;
  aspect-ratio: 1;
  border-radius: var(--rayon-s);
  border: 1px solid var(--bord);
  background: var(--surface);
  font-size: 19px;
  font-weight: 620;
  color: var(--texte-2);
  cursor: pointer;
  transition: var(--transition);
}

.echelle button:hover {
  border-color: var(--bord-vif);
  transform: translateY(-3px);
}

.echelle button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 26px -6px var(--accent);
}

.bornes {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--texte-3);
}

/* ------------------------------------------------------------------ champs */

.champ {
  width: 100%;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  transition: var(--transition);
}

.champ:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--lueur);
}

.champ::placeholder {
  color: var(--texte-3);
}

textarea.champ {
  min-height: 128px;
  resize: vertical;
}

.restant {
  margin-top: 8px;
  text-align: right;
  font-size: 13px;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

.erreur {
  margin-top: 10px;
  color: var(--urgence);
  font-size: 14px;
}

/* ----------------------------------------------------------------- boutons */

.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  padding: 14px var(--gouttiere) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--fond) 55%, transparent);
}

.actions .dedans {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bouton {
  display: block;
  width: 100%;
  padding: 17px 22px;
  border: 1px solid transparent;
  border-radius: var(--rayon-s);
  /* BLANC FRANC SUR GRAPHITE, comme chez trendsaas. Un bouton de couleur sur
     un fond graphite tire l'oeil vers la couleur ; un bouton blanc le tire
     vers l'action. */
  background: var(--action);
  color: var(--action-texte);
  font-size: 17px;
  font-weight: 640;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 10px 34px -12px var(--accent-halo), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.bouton:hover {
  background: var(--accent-clair);
  transform: translateY(-2px);
}

.bouton:active {
  transform: translateY(0) scale(0.99);
}

.bouton[disabled] {
  background: var(--surface-haut);
  color: var(--texte-3);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.bouton.fantome {
  background: transparent;
  color: var(--texte-3);
  box-shadow: none;
  font-weight: 500;
  font-size: 15px;
  padding: 10px;
}

.bouton.fantome:hover {
  color: var(--texte);
  transform: none;
}

/* ------------------------------------------------------- écrans de machine */

.acte {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.acte .numero {
  color: var(--accent-clair);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.acte h2 {
  font-size: clamp(34px, 10vw, 52px);
  margin-bottom: 14px;
}

.etapes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 30px 0;
}

.etape {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--texte-3);
  transition: color 300ms;
}

.etape .puce {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bord-vif);
  display: grid;
  place-items: center;
  transition: var(--transition);
}

.etape.en-cours {
  color: var(--texte);
}

.etape.en-cours .puce {
  border-color: var(--accent);
  border-right-color: transparent;
  animation: tourne 700ms linear infinite;
}

.etape.finie {
  color: var(--texte-2);
}

.etape.finie .puce {
  border-color: var(--acquis);
  background: var(--acquis);
}

@keyframes tourne {
  to {
    transform: rotate(360deg);
  }
}

.carte {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  margin-bottom: 12px;
}

.carte .intitule {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-3);
  margin-bottom: 6px;
}

.chiffre {
  font-size: clamp(32px, 9vw, 44px);
  font-weight: 720;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--acquis);
}

.mention {
  margin-top: 16px;
  padding: 13px 15px;
  border-left: 3px solid var(--bord-vif);
  background: var(--fond-2);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  color: var(--texte-3);
  font-size: 13.5px;
}

/* Les questions de levier, posées par-dessus l'écran de calcul. */
.surimpression {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: end center;
  padding: var(--gouttiere);
  background: rgba(10, 10, 13, 0.76);
  backdrop-filter: blur(6px);
  animation: entree 200ms both;
}

.surimpression .panneau {
  width: 100%;
  max-width: var(--max);
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--bord-vif);
  border-radius: 22px;
  box-shadow: var(--ombre);
}

/* L'empreinte du serment. Ce n'est pas un bouton : il faut rester appuyé. */
.empreinte {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 36px auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--bord);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.empreinte svg.trace {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.empreinte circle {
  fill: none;
  stroke-width: 4;
}

.empreinte .fond-trace {
  stroke: var(--bord);
}

.empreinte .avance {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 80ms linear;
}

.empreinte .doigt {
  display: grid;
  place-items: center;
  color: var(--accent-clair);
  opacity: 0.7;
  transition: var(--transition);
}

.empreinte.appuye .doigt {
  opacity: 1;
  transform: scale(0.94);
}

.empreinte.signe .avance {
  stroke: var(--acquis);
}

/* ---------------------------------------------------------------- formules */

.remise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  margin-bottom: 20px;
  border-radius: var(--rayon);
  background: rgba(255, 45, 85, 0.12);
  border: 1px solid rgba(255, 45, 85, 0.42);
}

.remise .compte {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 20px;
  color: var(--urgence);
}

.remise.expiree {
  background: var(--surface);
  border-color: var(--bord);
}

.remise.expiree .compte {
  color: var(--texte-3);
}

.formules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.formule {
  position: relative;
  /* Un <button> centre son texte : sans cette ligne, toute ligne de contenu
     qui passe à la ligne se retrouve centrée au milieu de la carte. */
  text-align: left;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
}

.formule:hover {
  border-color: var(--bord-vif);
}

.formule[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: var(--lueur);
}

.formule .populaire {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formule .duree {
  font-size: 15px;
  color: var(--texte-2);
}

.formule .prix {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 4px;
}

.formule .prix b {
  font-size: 36px;
  font-weight: 720;
  letter-spacing: -0.03em;
}

.formule .barre {
  color: var(--texte-3);
  text-decoration: line-through;
}

.formule .parjour {
  color: var(--texte-3);
  font-size: 14px;
  margin-bottom: 14px;
}

.formule ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.formule li {
  display: flex;
  gap: 9px;
  font-size: 15px;
  color: var(--texte-2);
}

/* SA COCHE, dessinee avec deux bordures et une rotation. Pas une pastille
   ronde avec un fond teinte : un simple angle droit tourne a -45 degres, en
   acier. C'est la forme qu'il emploie dans sa grille de prix, et elle se lit
   mieux qu'un point parce qu'elle dit « inclus » au lieu de « present ». */
.formule li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 8px;
  margin-top: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.garantie {
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--rayon);
  background: var(--accent-voile);
  border: 1px solid var(--bord-vif);
}

.garantie h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.garantie p {
  color: var(--texte-2);
  font-size: 15px;
}

.faq {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq details {
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
}

.faq summary {
  cursor: pointer;
  font-weight: 560;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  float: right;
  color: var(--texte-3);
}

.faq details[open] summary::after {
  content: "−";
}

.faq p {
  margin-top: 10px;
  color: var(--texte-2);
  font-size: 15px;
}

/* -------------------------------------------------------------- le compte */

.champs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.separateur {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--texte-3);
  font-size: 13px;
}

.separateur::before,
.separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bord);
}

/* ---------------------------------------------------------- écrans larges */

@media (min-width: 720px) {
  body {
    font-size: 18px;
  }

  #ecran {
    padding-top: 56px;
  }

  .options {
    gap: 12px;
  }

  .actions {
    position: static;
    background: none;
    padding: 24px var(--gouttiere) 60px;
  }
}

/* ============================================================== l'accueil ==
   La page d'accueil réutilise tout ce qui précède (boutons, cartes, formules,
   FAQ). Ce qui suit ne fait qu'ajouter ce qui lui est propre : la mise en
   page longue, qui n'existe pas dans le parcours. */

.accueil {
  padding-bottom: 0;
}

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--gouttiere);
  background: rgba(10, 10, 13, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}

.marque {
  font-weight: 720;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--texte);
  text-decoration: none;
}

.bouton.compact {
  width: auto;
  padding: 10px 18px;
  font-size: 15px;
}

.bouton.grand {
  width: auto;
  display: inline-block;
  padding: 18px 34px;
  font-size: 18px;
}

.accueil main {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.hero {
  padding: 64px 0 56px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(34px, 8.6vw, 62px);
  margin: 6px 0 18px;
  max-width: 15ch;
  margin-inline: auto;
}

.chapo {
  max-width: 54ch;
  margin: 0 auto 30px;
  color: var(--texte-2);
  font-size: clamp(17px, 4.4vw, 20px);
}

/* Sous un titre de section, aligné à gauche, le chapeau doit l'être aussi :
   centré, il flotte au milieu sans rien pour l'accrocher. */
.chapo.court {
  margin: 0 0 24px;
  max-width: 60ch;
}

.note-prix {
  margin-top: 16px;
  color: var(--texte-3);
  font-size: 14px;
}

.sous-bouton {
  margin-top: 14px;
  color: var(--texte-3);
  font-size: 14px;
}

/* La bande de chiffres. Ils décrivent ce que le produit contient, et ils sont
   calculés depuis les données : ils ne peuvent pas se désynchroniser. */
.bande {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}

.bande li {
  padding: 18px 14px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.bande b {
  display: block;
  font-size: 32px;
  font-weight: 720;
  letter-spacing: -0.03em;
  color: var(--accent-clair);
  font-variant-numeric: tabular-nums;
}

.bande span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--texte-3);
  line-height: 1.35;
}

.bloc {
  padding: 56px 0;
  border-top: 1px solid var(--bord);
}

.bloc h2 {
  font-size: clamp(26px, 6.4vw, 38px);
  margin-bottom: 26px;
  max-width: 20ch;
}

.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tuile {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.tuile h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.tuile p {
  color: var(--texte-2);
  font-size: 15.5px;
}

.etapes-liste {
  counter-reset: pas;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.etapes-liste li {
  counter-increment: pas;
  position: relative;
  padding: 22px 22px 22px 66px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  color: var(--texte-2);
  font-size: 15.5px;
}

.etapes-liste li::before {
  content: counter(pas);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.etapes-liste b {
  display: block;
  color: var(--texte);
  margin-bottom: 3px;
}

/* Sur l'accueil les formules sont des articles, pas des boutons : rien à
   choisir ici, le choix se fait à la fin du questionnaire. */
.accueil .formule {
  cursor: default;
}

.accueil .formule.en-avant {
  border-color: var(--accent);
}

.accueil .formule .bouton {
  margin-top: 18px;
}

.bloc.final {
  text-align: center;
  padding: 72px 0 88px;
}

.bloc.final h2 {
  margin-inline: auto;
  margin-bottom: 26px;
}

.pied-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 30px var(--gouttiere) calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bord);
}

.pied-page a,
.garantie a {
  color: var(--texte-3);
  font-size: 14px;
}

.garantie a {
  color: var(--acquis);
}

@media (min-width: 760px) {
  .bande {
    grid-template-columns: repeat(4, 1fr);
  }

  .grille {
    grid-template-columns: repeat(3, 1fr);
  }

  .accueil .formules {
    flex-direction: row;
    align-items: stretch;
  }

  .accueil .formule {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .accueil .formule ul {
    flex: 1;
  }

  .bloc {
    padding: 76px 0;
  }
}

/* ==================================================================== dossier
   La page d'après paiement. Elle ne partage avec le parcours que les jetons de
   couleur, la carte et le bouton : tout le reste est une page longue qui se
   lit et se relit, là où le parcours est une suite d'écrans qu'on traverse une
   fois. Les deux ne peuvent pas avoir la même mise en page.

   Tout est préfixé par .dossier. Sans ce préfixe, `.actions` reprendrait sa
   position fixe en bas de l'écran du parcours, et les boutons de copie du
   prompt se retrouveraient collés au bas de la fenêtre. */

.dossier main#ecran {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gouttiere) 80px;
}

/* Les boutons de cette page vivent dans le flux : ce sont des actions au
   milieu d'un texte, pas la seule sortie d'un écran. */
.dossier .entete {
  gap: 12px;
}

.dossier .entete .marque {
  flex: none;
}

.dossier .actions {
  position: static;
  padding: 0;
  background: none;
  margin: 20px 0 34px;
}

.dossier .actions .bouton {
  max-width: 420px;
}

.dossier .tete {
  padding: 40px 0 26px;
}

.dossier .tete .titre {
  margin: 6px 0 14px;
}

.dossier .tete .chapo {
  margin: 0;
  max-width: 58ch;
}

/* ------------------------------------------------------------------ onglets */

/* Trois onglets plus le nom de la marque ne tiennent pas dans 420 px : la
   barre debordait de 9 px, et un debordement horizontal sur telephone fait
   glisser toute la page sous le doigt. Les onglets defilent lateralement au
   lieu de pousser la barre, et l'ascenseur reste invisible. */
#onglets {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#onglets::-webkit-scrollbar {
  display: none;
}

.onglet {
  flex: none;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--texte-3);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.onglet:hover {
  color: var(--texte);
}

.onglet[aria-current="page"] {
  color: var(--texte);
  background: var(--surface-haut);
  border-color: var(--bord-vif);
}

/* --------------------------------------------------------------- les idées */

.dossier .idee {
  padding: 24px;
  margin-bottom: 20px;
}

.dossier .idee > .intitule {
  font-size: clamp(21px, 5vw, 27px);
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 4px 0 10px;
  line-height: 1.25;
}

.dossier .idee .bornes {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin: 16px 0 4px;
}

.dossier .idee .bornes span {
  padding: 5px 11px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 999px;
}

.volet {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bord);
}

.volet .intitule {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texte-3);
  margin-bottom: 8px;
}

.volet p:last-child {
  margin-bottom: 0;
}

.volet ul {
  margin: 0;
  padding-left: 20px;
}

.volet li {
  margin-bottom: 6px;
}

/* Ce qui va, en vert. Ce qui coince, en rouge. Les deux sont affichés côte à
   côte et avec le même poids : une fiche qui ne montre que le vert est une
   fiche de vente, pas un classement. */
.volet.raisons {
  border-top-color: color-mix(in srgb, var(--acquis) 40%, var(--bord));
}

.volet.raisons li::marker {
  color: var(--acquis);
}

.volet.reserves {
  border-top-color: color-mix(in srgb, var(--urgence) 40%, var(--bord));
}

.volet.reserves li::marker {
  color: var(--urgence);
}

.volet.rappel {
  border-top: none;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--fond-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
}

.dossier .ecartees {
  margin: 10px 0 30px;
}

.dossier .ecartees ul {
  margin: 0;
  padding: 0 0 16px 20px;
  color: var(--texte-2);
  font-size: 15px;
}

.dossier .ecartees li {
  margin-bottom: 8px;
}

/* -------------------------------------------------------------- le prompt */

.bloc-prompt {
  padding: 0;
  overflow: hidden;
}

.bloc-prompt header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface-haut);
  border-bottom: 1px solid var(--bord);
}

.bloc-prompt header .intitule {
  margin: 0;
}

.copier {
  padding: 6px 13px;
  border: 1px solid var(--bord-vif);
  border-radius: 999px;
  background: none;
  color: var(--texte-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.copier:hover {
  color: var(--texte);
  border-color: var(--accent);
}

/* Le prompt s'affiche tel qu'il sera collé, retours à la ligne compris. Le
   reformater à l'écran ferait croire à un texte qu'on ne recevra pas. */
.bloc-prompt pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texte-2);
}

/* ----------------------------------------------------------------- le plan */

.dossier .phase {
  margin-bottom: 38px;
}

.dossier .phase .intitule {
  font-size: clamp(20px, 4.6vw, 25px);
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 4px 0 8px;
}

.dossier .phase .chapo {
  margin: 0 0 16px;
  font-size: 16px;
  max-width: 60ch;
}

.jours {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jour {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
}

.jour summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.jour summary::-webkit-details-marker {
  display: none;
}

.jour[open] {
  border-color: var(--bord-vif);
}

.jour .numero {
  flex: none;
  min-width: 62px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-clair);
}

.jour .titre-jour {
  flex: 1;
}

.jour .detail {
  flex: none;
  font-size: 13px;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

.jour p {
  margin: 0 16px 14px;
  color: var(--texte-2);
  font-size: 15.5px;
}

/* Le critère de fin est la seule chose qui empêche de cocher par lassitude :
   il se distingue du reste, sinon il se lit comme la suite du paragraphe. */
.jour .fait {
  padding: 12px 14px;
  margin: 0 16px 16px;
  background: var(--fond-2);
  border-left: 3px solid var(--acquis);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  color: var(--texte);
  font-size: 14.5px;
}

.jour .rappel {
  margin: 0 16px 16px;
}

@media (min-width: 720px) {
  .dossier .idee {
    padding: 28px 30px;
  }
}

/* Les deux liens de la barre d'accueil. Le lien vers le dossier est volontairement
   discret : il ne s'adresse qu'a ceux qui ont deja paye, et il ne doit pas
   disputer l'attention au bouton qui fait entrer dans le parcours. */
.liens-entete {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lien-discret {
  color: var(--texte-3);
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.lien-discret:hover {
  color: var(--texte);
}

/* ============================================================ pages legales
   Mentions legales et remboursement. Deux pages de texte, sans JavaScript :
   une mention legale qui ne s'affiche que si un script demarre est une mention
   legale absente pour qui bloque les scripts, et c'est justement la page dont
   l'absence se reproche.

   Pas de fioriture, une mesure de lecture confortable, et des titres qui se
   distinguent sans crier. */

/* ------------------------------------------------------- ecrans courts --

   La connexion, les trois messages du dossier, et la page de mot de passe.
   Deux champs et un bouton : une carte, centree, et pas une page.

   Avant, ces ecrans heritaient de la largeur de l'atelier : sur 1440px, le
   champ d'adresse mesurait 1240px, soit 86 % de la page, et le bouton restait
   colle a gauche sous deux barres qui traversaient l'ecran. */

main#ecran.etroit {
  max-width: 420px;
  margin: 0 auto;
  /* Centre verticalement dans ce qui reste sous l'en-tete, sans jamais forcer
     un depassement : `min-height` et non `height`, pour qu'un message long
     pousse la page au lieu d'etre coupe. */
  min-height: calc(100svh - 190px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

main#ecran.etroit .tete {
  padding-top: 0;
  text-align: center;
}

main#ecran.etroit .tete .chapo {
  max-width: none;
}

/* Une seule action a l'ecran : elle prend toute la carte. Un bouton de 420px
   dans une carte de 420px, c'est la meme chose, mais ecrit une seule fois. */
main#ecran.etroit .actions {
  margin: 4px 0 0;
}

main#ecran.etroit .actions .bouton,
main#ecran.etroit .actions button {
  max-width: none;
  width: 100%;
}

/* La barre d'accent a gauche pointe le debut d'une ligne : sous un texte
   centre, elle ne pointe plus rien. On rend la carte symetrique. */
main#ecran.etroit .mention {
  text-align: center;
  border-left: 0;
  border-top: 1px solid var(--bord);
  border-radius: 0 0 var(--rayon-s) var(--rayon-s);
  background: none;
  padding: 14px 4px 0;
  margin-top: 22px;
}

/* Sur telephone, la carte occupe deja toute la largeur utile : on lui rend sa
   respiration verticale plutot que de la coincer au milieu. */
@media (max-width: 560px) {
  main#ecran.etroit {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 28px;
  }
}

.legal main {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px var(--gouttiere) 60px;
}

.legal h1 {
  font-size: clamp(30px, 7vw, 42px);
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.legal .maj {
  color: var(--texte-3);
  font-size: 14px;
  margin: 0 0 36px;
}

.legal section {
  margin-bottom: 30px;
}

.legal h2 {
  font-size: clamp(21px, 4.8vw, 26px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.legal h3 {
  font-size: 18px;
  margin: 0 0 10px;
}

.legal p {
  color: var(--texte-2);
  margin: 0 0 12px;
}

.legal a {
  color: var(--accent-clair);
}

.legal hr {
  border: none;
  border-top: 1px solid var(--bord);
  margin: 44px 0 34px;
}

.legal ol,
.legal ul {
  color: var(--texte-2);
  padding-left: 22px;
  margin: 0 0 12px;
}

.legal li {
  margin-bottom: 12px;
}

.legal li b {
  color: var(--texte);
}

/* L'identite de l'editeur se lit comme une fiche, pas comme un paragraphe :
   c'est ce qu'on vient verifier ligne par ligne. */
.legal .identite {
  list-style: none;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.legal .identite li {
  margin-bottom: 8px;
}

.legal .identite li:last-child {
  margin-bottom: 0;
}

/* La phrase de garantie est l'engagement lui-meme : elle ne se lit pas comme
   le reste du texte. */
.legal .accroche {
  padding: 16px 18px;
  background: var(--fond-2);
  border-left: 3px solid var(--acquis);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  color: var(--texte);
  font-size: 17.5px;
}

/* Le logo, a gauche du nom dans les barres. Les deux sont un seul lien : deux
   liens cote a cote vers la meme page font deux arrets au clavier pour une
   seule destination. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.marque img {
  width: 26px;
  height: 26px;
  display: block;
}

/* Les liens poses dans un texte, hors pages legales. Sans cette regle ils
   sortent en bleu souligne par defaut du navigateur, ce qui est illisible sur
   le fond presque noir et ne ressemble a rien d'autre sur le site. */
.mention a,
.chapo a {
  color: var(--accent-clair);
  text-decoration-color: color-mix(in srgb, var(--accent-clair) 45%, transparent);
  text-underline-offset: 2px;
}

.mention a:hover,
.chapo a:hover {
  color: var(--texte);
}

/* Le choix de l'idee a construire, dans l'onglet du depot. Les trois cartes
   sont des boutons : ce sont des choix, pas des liens. */
.choix-idee {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choix-idee .formule {
  display: block;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
  color: var(--texte);
  font: inherit;
  cursor: pointer;
  transition: var(--transition);
}

.choix-idee .formule:hover {
  border-color: var(--bord-vif);
}

.choix-idee .formule[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: var(--lueur);
}

.choix-idee .formule .detail {
  display: block;
  margin-top: 4px;
  color: var(--texte-2);
  font-size: 14.5px;
}

/* ================================================================== atelier
   La conversation a gauche, l'apercu a droite. C'est la disposition de Lovable
   et de Bolt, et elle n'est pas un hasard : on ne construit pas en aveugle,
   on construit en regardant.

   SUR TELEPHONE, LES DEUX S'EMPILENT, apercu en premier. L'ordre compte : ce
   qu'on veut voir en arrivant, c'est le produit qui existe deja, pas un champ
   de saisie vide. C'est toute la difference entre « voici ton produit,
   change-le » et « dis-moi quoi construire ». */

.atelier {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  margin-top: 20px;
}

.colonne-apercu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pages-apercu {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pages-apercu::-webkit-scrollbar {
  display: none;
}

.onglet-page {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: none;
  color: var(--texte-3);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.onglet-page[aria-pressed="true"] {
  color: var(--texte);
  background: var(--surface-haut);
  border-color: var(--bord-vif);
}

/* Le cadre de l'apercu imite une fenetre de navigateur sans en dessiner une :
   un faux navigateur dessine est exactement ce qu'on reproche a la reference,
   qui en affiche un pour faire croire a une generation. */
.apercu {
  width: 100%;
  height: 62vh;
  min-height: 380px;
  border: 1px solid var(--bord-vif);
  border-radius: var(--rayon);
  background: #fff;
  display: block;
}

/* -------------------------------------------------------------------- fil */

.colonne-fil {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fil {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 4px;
}

.echange {
  padding: 12px 14px;
  border-radius: var(--rayon-s);
  background: var(--surface);
  border: 1px solid var(--bord);
}

.echange.toi {
  background: var(--fond-2);
  border-color: var(--bord-vif);
}

.echange .qui {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texte-3);
  margin-bottom: 5px;
}

.echange.atelier .qui {
  color: var(--accent-clair);
}

.echange p {
  margin: 0;
  color: var(--texte);
  font-size: 15.5px;
}

.echange .touches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.echange .touches code,
.liste-fichiers code {
  padding: 3px 8px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--acquis);
}

/* ----------------------------------------------------------------- saisie */

.saisie-zone {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
}

.champ.saisie {
  flex: 1;
  min-height: 52px;
  resize: vertical;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.45;
}

.saisie-zone .bouton {
  width: auto;
  flex: none;
  padding: 15px 22px;
}

.actions-atelier {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.actions-atelier .bouton {
  width: auto;
  flex: 1;
  min-width: 180px;
  padding: 12px 18px;
  font-size: 15px;
}

.fichiers {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bord);
}

.liste-fichiers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.liste-fichiers code {
  color: var(--texte-3);
}

/* L'atelier est la seule vue qui gagne vraiment a la largeur : sur un ecran
   d'ordinateur, voir la conversation et le produit en meme temps supprime
   l'aller-retour qui casse le rythme. */
@media (min-width: 1000px) {
  /* `:not(.etroit)` : la largeur est pour l'atelier, pas pour un formulaire de
     deux champs. Voir la section « ecrans courts » plus bas. */
  .dossier main#ecran:not(.etroit) {
    max-width: 1280px;
  }

  .atelier {
    flex-direction: row;
    align-items: stretch;
    gap: 22px;
  }

  .colonne-fil {
    flex: 0 0 400px;
  }

  .colonne-apercu {
    flex: 1;
  }

  .fil {
    max-height: 46vh;
  }

  .apercu {
    height: 76vh;
  }
}

/* Les pages de texte n'ont pas de barre d'action collee en bas : leur bouton
   est une etape dans le flux, pas la seule sortie d'un ecran de parcours.
   Sans cette regle, .actions garde sa position fixe et le bouton flotte au bas
   de la fenetre, tres loin du champ qu'il valide. */
.legal .actions {
  position: static;
  padding: 0;
  background: none;
  margin: 20px 0 30px;
  max-width: 420px;
}

/* ------------------------------------------------ l'aperçu, /apercu.html --

   Une liste verticale de phrases. Elle existe parce que `.bornes`, qui a
   l'air d'être ça, est un `display: flex` avec `space-between` fait pour deux
   ou trois libellés courts sur une MÊME ligne : les neuf idées écartées s'y
   alignaient horizontalement et la page débordait de 293 px sur un écran de
   390. Un débordement horizontal ne se voit pas en lisant le code, et sur
   mobile il casse la page entière. */

.points {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.points li {
  position: relative;
  padding-left: 15px;
  color: var(--texte-2);
  font-size: 15px;
  line-height: 1.55;
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bord-vif);
}

/* Le premier bloc du prompt est du texte préformaté, avec des lignes écrites
   pour une largeur d'éditeur. Sans le retour à la ligne forcé, il pousse la
   page à la largeur de sa plus longue ligne. */
.page-exemple pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

/* ------------------------------------------------ la réaction à un choix --

   SON TIROIR, reprise exacte de `.note-tiroir` et `.note-choix` de trendsaas,
   avec nos noms de jetons. Il fait mieux que le fondu simple qui tenait ici :

   · l'ouverture anime `grid-template-rows` de `0fr` à `1fr`, la seule façon
     d'animer une hauteur inconnue sans la mesurer en JavaScript ;
   · L'ÉTAT VISIBLE EST LA VALEUR PAR DÉFAUT. Son commentaire dit pourquoi, et
     c'est le détail qui compte : si la transition ne joue pas, onglet en
     arrière-plan ou animation interrompue, la note reste LISIBLE. Seul l'état
     fermé masque, et il ne dure que le temps de l'ouverture. L'inverse, un
     état caché par défaut qu'on révèle, laisse une note invisible chaque fois
     que l'animation ne part pas ;
   · `sans-anim` sert au re-rendu : revenir sur un écran déjà répondu doit
     montrer la note tout de suite, pas rejouer son ouverture.

   Le liseré à gauche et le retrait la rattachent à l'option au-dessus. Sans
   eux, elle se lit comme un commentaire sur la question entière, et la
   personne ne comprend pas que c'est SA réponse qui a produit cette phrase. */

.note-tiroir {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.note-tiroir > * {
  overflow: hidden;
  min-height: 0;
}

.note-tiroir.ouvert {
  grid-template-rows: 1fr;
}

.note-tiroir:not(.ouvert) > .reaction {
  opacity: 0;
  transform: translateY(-10px) scaleY(0.97);
}

.note-tiroir.sans-anim,
.note-tiroir.sans-anim > .reaction {
  transition: none;
}

.reaction {
  margin: 6px 0 4px 18px;
  padding: 14px 18px;
  border: 1px solid var(--bord-vif);
  border-left: 2px solid var(--accent);
  border-radius: 0 11px 11px 0;
  background: var(--accent-voile);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte);
  transform-origin: top center;
  transition: opacity 0.3s ease 0.1s, transform 0.38s cubic-bezier(0.22, 0.8, 0.24, 1) 0.06s;
}

@media (prefers-reduced-motion: reduce) {
  .note-tiroir,
  .note-tiroir > .reaction {
    transition: none;
  }
}