/* ─────────────────────────────────────────────────────────────
   PERIFY — essai.css, la page « Essai gratuit » (refonte A, 30/10/2026)
   Chargée après site.css (jetons, champs, pastilles, contacts, liste cochée, questions).
   Ici : les deux colonnes de l'essai (ce qu'il comprend à gauche, le formulaire à droite
   sur sa carte blanche ; une colonne sur téléphone), l'indicateur d'étapes, les écrans de
   réussite et d'échec, « Qui est derrière » (la bande teintée de la page).

   Règle d'or : sans essai.js, les trois étapes restent visibles l'une sous l'autre (le
   formulaire ne reçoit .par-etapes que si le script tourne) et une phrase remplace le
   bouton d'envoi (.envoi-sans-js). Les classes lues par essai.js ne changent pas :
   .etape-form, .progression, .progression-libelle, .progression-barre > span, .etape-titre,
   .champ, .entre, .par-etapes.
   ───────────────────────────────────────────────────────────── */

/* Ce que essai.js masque reste masqué, même un bouton ou une étape qui ont leur « display ». */
.essai [hidden]{display:none !important}

/* ── 1. chapeau ────────────────────────────────────────── */
.essai-tete{padding-bottom:var(--space-lg)}
.essai-tete h1{max-width:24ch}
/* « Faire ma demande » : sur téléphone et tablette, le formulaire commence au 2e écran */
.essai-aller{display:none;margin-top:var(--space-sm)}
@media (max-width:60rem){.essai-aller{display:inline-flex}}

/* ── 2. les deux colonnes ─────────────────────────────── */
.essai{padding-block:var(--space-lg) var(--section-gap)}
.essai-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:var(--space-3xl)}
.essai-offre{min-width:0;padding-top:var(--space-xs)}
.essai-intro{font-size:var(--text-lead);line-height:1.6;color:var(--color-ink-2)}
.essai-liste{margin-top:var(--space-xl);gap:var(--space-md)}
.essai-liste li{color:var(--color-ink)}
.essai-demande{min-width:0;padding:var(--space-xl);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-3);
  box-shadow:0 30px 60px -48px var(--color-ombre);scroll-margin-top:var(--space-md)}

/* ── 3. le formulaire en 3 étapes ─────────────────────── */
.formulaire{display:grid;gap:var(--space-xl);margin:0}
.etape-form{display:grid;gap:22px;min-width:0}
/* « Nom du commerce » et « Ville » côte à côte sur ordinateur */
.champs-duo{display:grid;gap:22px;min-width:0}
.etape-titre{font-size:clamp(1.5rem,1vw + 1.15rem,1.875rem);line-height:1.15}
/* le titre reçoit le focus quand on change d'étape (tabindex=-1) : pas de cadre, ce n'est pas une commande */
.etape-titre:focus,.etape-titre:focus-visible{outline:none}
/* sans JS, les trois étapes se suivent : un filet les sépare */
.formulaire:not(.par-etapes) .etape-form + .etape-form{border-top:1px solid var(--color-rule);padding-top:var(--space-xl)}
/* une étape qui arrive glisse un peu (retiré en mouvement réduit) */
@keyframes etape-entre{from{opacity:0;transform:translateX(14px)}}
.etape-form.entre{animation:etape-entre .38s var(--ease-out)}

/* « Étape 1 sur 3 » et la barre en trois segments (nuit = fait) */
.progression{display:grid;gap:10px}
.progression-libelle{margin:0;font-size:var(--text-sm);font-weight:600;line-height:1.3;color:var(--color-muted)}
.progression-barre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.progression-barre span{position:relative;display:block;height:6px;border-radius:3px;overflow:hidden;background:var(--color-anneau)}
.progression-barre span::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--color-ink);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out)}
.progression-barre span.fait::after{transform:scaleX(1)}

.formulaire .champ textarea{min-height:128px}

/* Continuer / Retour / Demander : le principal d'abord (ordre du clavier = ordre visuel) */
.etape-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin-top:var(--space-2xs)}
.envoi-js{display:inline-flex}
/* l'envoi en cours : le bouton reste net */
.formulaire [aria-disabled="true"]{cursor:progress}

.envoi{display:grid;gap:14px}
.envoi-note{margin:0;font-size:var(--text-sm);line-height:1.45;color:var(--color-muted)}
.envoi-note a{color:var(--color-ink);font-weight:600;text-underline-offset:.2em}
/* sans essai.js : pas de bouton d'envoi (il ne pourrait rien envoyer), une phrase dit d'appeler */
.formulaire:not(.par-etapes) .envoi-js{display:none}
.envoi-sans-js{margin:0;padding:14px 16px;border-radius:var(--radius-control);border:1px solid var(--color-rule-2);background:var(--color-paper-2);
  color:var(--color-ink);line-height:1.5}
.envoi-sans-js a{color:var(--color-ink);font-weight:700;white-space:nowrap;text-underline-offset:.2em}
.par-etapes .envoi-sans-js{display:none}

/* le piège à robots : hors de l'écran (pas display:none, que certains robots savent lire) */
.piege{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── 4. écrans de réussite et d'échec ─────────────────── */
.essai-resultat{display:grid;gap:var(--space-lg);justify-items:start}
.essai-resultat:focus,.essai-resultat:focus-visible{outline:none}
.resultat-icone{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--color-paper-2);color:var(--color-ink)}
.resultat-echec .resultat-icone{color:var(--color-orange-texte);background:#FFF6F1}
.essai-resultat p{margin:0;max-width:34em;font-size:var(--text-lead);line-height:1.55;color:var(--color-ink-2)}
.essai-resultat strong{display:block;margin-bottom:10px;font-family:var(--font-display);font-weight:800;font-size:clamp(1.625rem,1.4vw + 1.1rem,2.125rem);
  line-height:1.1;letter-spacing:var(--tracking-display);word-spacing:var(--word-display);color:var(--color-ink)}
.resultat-tel{color:var(--color-ink);font-weight:700;white-space:nowrap;text-underline-offset:.2em}
.resultat-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
@keyframes resultat-entre{from{opacity:0;transform:translateY(12px)}}
.essai-resultat.entre{animation:resultat-entre .45s var(--ease-out)}

/* ── 5. qui est derrière (la bande teintée) ───────────── */
.qui-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl) var(--space-3xl);align-items:start}
.qui-tete h2{max-width:16ch}
.qui-texte{max-width:38em}
.qui-texte p{font-size:var(--text-lead);line-height:1.62;color:var(--color-ink-2)}
.qui-texte p + p{margin-top:var(--space-md)}
.qui-accent{padding-left:var(--space-lg);border-left:3px solid var(--color-ink);color:var(--color-ink) !important;font-weight:500}

/* ── 6. tailles d'écran ───────────────────────────────── */
@media (min-width:60.0625rem){
  .champs-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-md);align-items:start}
  .essai-offre{position:sticky;top:var(--space-xl)}
}
@media (max-width:60rem){
  .essai-grille{grid-template-columns:minmax(0,1fr);gap:var(--space-2xl)}
  .qui-grille{grid-template-columns:minmax(0,1fr)}
  .qui-tete h2{max-width:none}
}
@media (max-width:40rem){
  /* la carte s'arrête à la gouttière de 16 px, comme celle du calculateur et les plaques */
  .essai-demande{padding:var(--space-lg) var(--space-md)}
  /* boutons pleine largeur, le principal au-dessus */
  .etape-actions{flex-direction:column;align-items:stretch}
  .etape-actions > .btn,.etape-actions > .envoi-js,.envoi-js > .btn{width:100%}
  .etape-actions .btn{white-space:normal}
  .resultat-actions{flex-direction:column;align-items:stretch;width:100%}
}

/* ── 7. mouvement réduit : rien ne glisse ─────────────── */
@media (prefers-reduced-motion:reduce){
  .etape-form.entre,.essai-resultat.entre{animation:none}
  .progression-barre span,.progression-barre span::after{transition:none}
}