/* =============================================================
   La vitrine a sa propre feuille.

   Elle n'emprunte plus celle des portfolios : c'etait une DA sombre surchargee,
   donc la vitrine ressemblait au site d'Adam.

   Ce qui a change apres critique : le violet #7c3aed etait violet-600 de
   Tailwind, la couleur par defaut du framework par defaut ; les mots en degrade
   sont le tic le plus reconnaissable des pages generees ; et six arguments egaux se
   neutralisaient. Le ciel, lui, n'etait pas le probleme — il etait le seul geste
   dans un lit generique. Il reste, et le reste a ete refait autour.
   ============================================================= */

:root{
  /* Sans ca, certains navigateurs appliquent leurs propres heuristiques de
     theme (mode sombre force, ajustement auto des couleurs) avant de peindre
     la page une premiere fois — d'ou le flash gris/desature puis colore au
     chargement. Le site d'Adam l'a deja ; il ne presente pas ce souci. */
  color-scheme: dark;
  --fond:       #0a0713;
  --fond-haut:  #1a1030;
  --fond-bas:   #060409;
  --halo:       rgba(110, 80, 220, 0.26);
  --texte:      #efe7f5;
  --texte-doux: #a99fb8;
  --texte-faible:#7d7389;
  /* Mauve nocturne, plus profond/froid que l'orchidee d'origine : la teinte
     garde assez de magenta pour ne pas retomber dans le violet-600 generique. */
  --vif:        #8659c9;
  --vif-fonce:  #5f3a94;
  --clair:      #cbb3ec;
  --trait:      rgba(210,180,240,0.15);
  --trait-fort: rgba(210,180,240,0.34);
  /* Le mot manuscrit est du vrai papier scotche, pas une carte d'interface :
     son encre est donc sombre. */
  --papier:     #f6f1e8;
  --sur-papier: #17140f;

  --police: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --main:   "Schoolbell", cursive;   /* les annotations, rien d'autre */
  --large:  1180px;

  /* le ciel vient de ciel.css : ici on l'allume et on le teinte */
  --star-rgb: 226, 214, 255;
  --stars-opacity: 1;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size:17px; line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
.fond{
  position: fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(ellipse 105% 62% at 50% -8%, var(--halo), rgba(0,0,0,0) 62%),
    linear-gradient(166deg, var(--fond-haut) 0%, var(--fond) 52%, var(--fond-bas) 100%);
}
.wrap{ max-width: var(--large); margin:0 auto; padding:0 28px; position:relative; z-index:1; }

h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-0.035em; line-height:0.95; }
p{ margin:0 0 14px; }
a{ color: inherit; }

/* ---------- Barre ---------- */
/* Pas de pilule de verre flottante : c'est le chrome du portfolio d'Adam, et
   c'est aussi le composant de nav le plus vu du web. Une ligne, un nom. */
.bar{
  position: relative; z-index:2;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; max-width: var(--large); margin:0 auto; padding:26px 28px 0;
}
/* Le nom vient de config.json avec sa capitale — c'est celui des mails et du
   titre de l'onglet. Sa mise en bas de casse est une affaire de composition, pas
   de donnee : elle vit donc ici, et le pied de page suit, un meme nom ne se
   composant pas de deux facons sur une meme page. */
.mark, #js-nom-pied{ text-transform: lowercase; }
.mark{
  font-weight:700; font-size:19px; letter-spacing:-0.02em;
  text-decoration:none; color: var(--vif);
}

/* ---------- Ouverture ---------- */
.ouverture{ padding: 46px 0 88px; }
/* Le titre traverse la page entiere : enferme dans une colonne de 530 px, un
   corps de 92 px cassait en six lignes et n'etait plus un titre. */
h1{ font-size: clamp(40px, 6.6vw, 92px); margin-bottom: 42px; }
h1 .vif{ color: var(--vif); }
.ouverture-grille{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,0.86fr);
  gap: 40px; align-items:start;
}
/* L'adresse en grand. C'est l'objet le plus concret de l'offre, et il tenait
   jusqu'ici dans une sous-ligne d'etape. */
.adresse{ padding-top:4px; will-change: transform; }
.url{
  margin:0; font-weight:700; letter-spacing:-0.04em; line-height:1.05;
  font-size: clamp(22px, 3.1vw, 38px);
  /* Le <wbr> du balisage est le seul endroit ou l'adresse a le droit de casser :
     entre le pseudo et le domaine, et seulement si elle ne tient pas. Chaque
     moitie reste insecable, ce qui garde aussi le curseur colle au domaine —
     boite a lui, il tombait seul a la ligne suivante. */
  max-width: 100%;
}
.url .pseudo{ color: var(--vif); white-space: nowrap; }
.url .fin{ white-space: nowrap; }
.url .tld{ color: var(--texte); }
.curseur{
  display:inline-block; width:0.06em; height:0.92em; margin-left:0.06em;
  vertical-align:-0.1em; background: var(--clair);
  animation: bat 1.15s steps(1) infinite;
}
@keyframes bat{ 0%,50%{ opacity:1 } 50.01%,100%{ opacity:0 } }
.glose{
  font-family: var(--main); font-size:17px; color: var(--texte-doux);
  margin:18px 0 0;
}

/* L'ecart d'echelle fait le ton : 92 px contre 19, pas 42 contre 17. */
.sous{
  font-size: clamp(17px, 1.5vw, 20px); color: var(--texte-doux);
  max-width: 30ch; margin: 4px 0 30px;
}
.bouton{
  display:inline-block; background: var(--vif); color: #150a1c;
  font-weight:700; font-size:16px; letter-spacing:-0.01em;
  text-decoration:none; padding:15px 26px; border:0; cursor:pointer;
  font-family: var(--police);
  transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.bouton:hover{ background: var(--clair); box-shadow: 0 0 34px -6px var(--vif-fonce); }
.bouton:active{ transform: translateY(1px); }
/* Un lien de texte, pas un second bouton : la paire plein/fantome est
   l'element le plus interchangeable d'une page produit. */
.agir{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:0; }
.essai{
  font-size:15px; color: var(--texte-doux); text-decoration:none;
  border-bottom:1px solid var(--trait-fort); padding-bottom:2px;
}
.essai:hover{ color: var(--clair); border-color: var(--vif); }

/* ---------- Sections ---------- */
.section{ padding: 76px 0; border-top:1px solid var(--trait); }
h2{ font-size: clamp(30px, 4.2vw, 52px); max-width: 20ch; }

/* ---------- Les etapes ---------- */
/* Des chiffres composes en grand remplacent les surtitres « 01 — ». Ils font le
   meme travail de reperage, mais typographiquement, et ils ne ressemblent pas
   au gabarit de toutes les pages produit. */
.etapes{ list-style:none; margin:44px 0 0; padding:0; }
.etapes li{
  display:grid; grid-template-columns: minmax(84px, 1fr) minmax(0, 7fr);
  gap: 8px 34px; align-items:start;
  padding: 30px 0; border-top:1px solid var(--trait);
}
.etapes li:first-child{ border-top:0; }
.chiffre{
  font-size: clamp(52px, 7vw, 104px); font-weight:700; line-height:.78;
  letter-spacing:-0.05em; color: var(--vif);
}
.etapes h3{ font-size: clamp(21px, 2.3vw, 27px); margin-bottom:9px; }
.etapes p{ color: var(--texte-doux); max-width: 56ch; margin:0; }

/* ---------- Les arguments ---------- */
/* Trois, pas six : six promesses egales se neutralisent. Et de longueurs
   volontairement inegales — l'ecriture reguliere au caractere pres est ce qui
   trahit le plus un texte fabrique. */
.arguments{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:38px; margin-top:44px; }
.argument{ border-top:2px solid var(--clair); padding-top:16px; }
.argument h3{ font-size:21px; margin-bottom:10px; }
.argument p{ color: var(--texte-doux); margin:0; font-size:16.5px; }

/* ---------- Le formulaire ---------- */
.demande{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap:56px; align-items:start; }
form{ margin-top:34px; max-width:520px; }
label{ display:block; font-size:14px; font-weight:500; color: var(--texte-doux); margin:22px 0 4px; }
input, textarea{
  width:100%; font-family: var(--police); font-size:17px; color: var(--texte);
  background: transparent; border:0; border-bottom:1.5px solid var(--trait-fort);
  padding:8px 2px; border-radius:0;
}
input:focus, textarea:focus{ outline:none; border-bottom-color: var(--vif); }
textarea{ min-height:110px; resize:vertical; }
::placeholder{ color: var(--texte-faible); }
.envoi{ margin-top:30px; }
.statut{ margin-top:14px; font-size:15px; min-height:1.4em; }
.statut.ok{ color: var(--clair); font-weight:500; }
.statut.err{ color: var(--vif); font-weight:500; }
.note{ margin-top:18px; font-size:14px; color: var(--texte-faible); max-width:44ch; }

/* Le mot manuscrit, scotche a cote du formulaire : c'est une personne qui
   repond, et rien ne le dit mieux qu'une ecriture a la main. Papier, comme les
   affiches — c'est le meme mur. */
.mot{
  position:relative; background: var(--papier); color: var(--sur-papier);
  padding:30px 28px 26px; transform: rotate(1.6deg); margin-top:56px;
  box-shadow: 0 26px 48px -28px rgba(0,0,0,.85);
  font-family: var(--main); font-size:19.5px; line-height:1.5;
}
.mot::before{
  content:""; position:absolute; top:-16px; left:34%;
  width:86px; height:32px;
  background: url('adam/images/tape/tape-2.webp') center/100% 100% no-repeat;
  transform: rotate(-4deg); opacity:.9;
}
.mot .signature{ display:block; margin-top:16px; font-size:23px; color: var(--vif-fonce); }

/* ---------- Pied ---------- */
footer{
  border-top:1px solid var(--trait); margin-top:20px;
  padding:30px 0 46px; font-size:14.5px; color: var(--texte-doux);
}
footer .wrap{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
footer a{ text-decoration:none; border-bottom:1px solid var(--trait-fort); }
footer a:hover{ color: var(--clair); border-color: var(--vif); }

/* ---------- Ecrans etroits ---------- */
@media (max-width: 900px){
  .ouverture-grille, .demande{ grid-template-columns: 1fr; gap:32px; }
  .etapes li{ grid-template-columns:1fr; gap:6px; }
  .mot{ margin-top:34px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .bouton{ transition:none; }
  .curseur{ animation:none; }
}