/* ============================================================
   Un bon clavier — la page « essaie-le ici »
   ------------------------------------------------------------
   Un fichier À PART, volontairement : `style.css` porte la vitrine, lue par
   toutes les pages, et une page interactive n'a aucune raison de pouvoir la
   casser. Elle en REPREND les variables (`--vert`, `--encre`, `--fond`) et le
   boîtier `.phone` — rien n'est redéfini ici de ce qui existe déjà.
   ============================================================ */

.essai-entete { text-align: center; padding: clamp(24px, 5vh, 56px) 20px 0; }
/* ⚠️ LES MEMES VALEURS QUE `.page-contenu`, PAS DES VALEURS VOISINES.
   Elliott, 2026-08-31 : « rends le look plus coherent avec les autres pages...
   polices, couleurs d'ecriture ». ✅ Mesure de l'ecart : le titre etait en
   `--encre` quand les sept autres pages l'ont en `--vert`, et sur une echelle
   differente (24-37 px contre 26-34). Le sous-titre etait en `--gris` la ou le
   corps de texte des autres pages est en `--encre`. Trois ecarts qu'on ne voit
   pas un par un, mais qui ensemble font « une autre page ». */
.essai-entete h1 {
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.15;
  color: var(--vert);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.essai-entete p { color: var(--encre); margin: 0; font-size: 1.02rem; line-height: 1.5; }

.essai-scene {
  display: flex;
  gap: clamp(20px, 5vw, 56px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* Le haut est serre : le compteur ou le bandeau le precede deja de pres.
     Le bas garde son air, c'est lui qui separe du bouton App Store. */
  padding: clamp(6px, 1.4vh, 14px) 20px clamp(24px, 5vh, 48px);
}

/* Le boîtier est celui de l'accueil ; on ne change que sa taille, parce qu'ici
   il partage la page avec la liste des règles au lieu de tenir la scène seul. */
.essai-scene { --hauteur-tel: min(112dvh, 880px, 150vw); }

.ecran-essai {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* --- Le champ de saisie ------------------------------------------------- */
.champ {
  flex: 1;
  padding: 7% 6% 4%;
  font-size: clamp(0.95rem, 2.6vh, 1.15rem);
  line-height: 1.45;
  color: var(--encre);
  overflow-y: auto;
  word-break: break-word;
  cursor: text;
  -webkit-user-select: none;
  user-select: none;
}
/* L'invitation est posée par le JS, pas par `:empty` — le champ porte toujours
   le curseur, donc il n'est jamais « vide » pour le sélecteur.

   ⚠️ La couleur a été MESURÉE, pas choisie à l'œil : le premier gris essayé
   (#7d867d) rendait 3,76:1 sur blanc, sous le seuil de 4,5:1 qu'Elliott a
   promis publiquement dans la déclaration d'accessibilité de l'App Store. Un
   texte d'invitation est le pire endroit pour ça : c'est la première chose que
   lit quelqu'un qui arrive. #5a6a59 rend 5,77:1 — 28 % de marge, parce qu'un
   ratio pile sur le seuil retombe dessous au moindre changement de fond. */
.invite { color: #5a6a59; }
/* Le curseur clignote comme celui d'iOS. `prefers-reduced-motion` l'arrête :
   un trait qui bat sans fin est exactement ce que ce réglage existe pour taire. */
.curseur {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--vert);
  vertical-align: text-bottom;
  animation: bat 1.06s steps(1) infinite;
}
@keyframes bat { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .curseur { animation: none } }

/* Le mot qui vient d'être remplacé s'allume une seconde, puis redevient du
   texte normal. C'est le seul moment spectaculaire de la page : il doit se
   voir sans qu'on l'ait cherché, et disparaître sans qu'on ait à agir. */
.remplace {
  background: #d6ecd4;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #d6ecd4;
  animation: allume 1.15s ease-out forwards;
}
@keyframes allume {
  0%   { background: #a9d9a5; box-shadow: 0 0 0 3px #a9d9a5 }
  100% { background: transparent; box-shadow: 0 0 0 3px transparent }
}
@media (prefers-reduced-motion: reduce) { .remplace { animation: none; background: transparent } }

/* Le bouton qui vide le champ (Elliott, 2026-08-30). Il n'apparaît QUE s'il y a
   quelque chose à effacer : un bouton grisé en permanence est du bruit, et un champ vide n'a
   rien à vider. Placé en haut à droite du champ, là où iOS met sa croix.

   ⚖️ CONTRASTE — mesuré, et le compromis est assumé. La CROIX rend 7,90:1 sur
   le blanc du champ et 6,64:1 sur son cercle : c'est elle qui identifie le
   contrôle, et elle passe largement. Le CERCLE, lui, ne rend que 1,19:1 sur le
   blanc — mais il ne porte aucune information, il ne fait qu'agrandir la cible
   tactile. Le durcir pour atteindre 3:1 ferait TOMBER la croix sous le seuil
   (mesuré : un cercle à 2,15:1 laisse la croix à 3,67:1). Entre les deux, on
   garde lisible ce qui se lit. */
.vider {
  position: absolute;
  top: 5.5%;
  right: 5%;
  width: clamp(24px, 4.4vh, 34px);
  height: clamp(24px, 4.4vh, 34px);
  border: 0;
  border-radius: 50%;
  background: #e9ece9;
  color: #4a544a;
  font-size: clamp(0.85rem, 2vh, 1.05rem);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.vider:active { background: #d7ddd6; }
.vider[hidden] { display: none; }
.ecran-essai { position: relative; }

/* Le capteur de frappes. Invisible mais FOCUSABLE : sur téléphone, c'est lui
   qui fait monter le clavier d'iOS. `opacity: 0` et non `display: none` —
   un élément masqué ne prend pas le focus, donc aucun clavier ne s'ouvrirait. */
.saisie-native {
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  opacity: 0;
  border: 0;
  resize: none;
  font-size: 16px;      /* sous 16 px, Safari iOS zoome à l'entrée du champ */
  padding: 0;
}

/* --- LE TÉLÉPHONE COUPÉ ------------------------------------------------
   Elliott, 2026-08-30 : « mets simplement la moitié supérieure de l'iPhone
   agrandie et coupe le bas de façon esthétique, une belle transition floutée…
   ça masquera le clavier (on n'a pas besoin de le voir de toute façon) et ce
   sera même moins confus pour l'utilisateur, car il saura qu'il tape avec son
   propre clavier. »

   ⭐ C'est le meilleur des deux mondes, et ça a réglé d'un coup un problème
   qu'aucun réglage n'arrivait à fermer : le clavier dessiné ne sera jamais
   parfaitement fidèle (quatre tentatives sur le seul ratio des touches), et
   surtout il MENTAIT — il invitait à cliquer des touches alors que la vraie
   frappe se fait au clavier du visiteur. Ne plus le montrer dit la vérité.

   Le boîtier est agrandi ET tronqué : on voit le haut en grand, et le bas se
   dissout dans le fond de la page au lieu de s'arrêter sur une ligne nette. */
.telephone-coupe {
  position: relative;
  /* Le boîtier est plus grand que ce qu'on en montre : c'est ce qui donne
     l'effet « zoom sur le haut » plutôt que « petit téléphone rogné ». */
  height: calc(var(--hauteur-tel) * 0.56);
  overflow: hidden;
  /* Le fondu porte sur TOUT le boîtier, cadre noir compris — sinon le cadre
     s'arrêterait net au milieu du dégradé et trahirait la coupe. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.55) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.55) 86%, transparent 100%);
}
.telephone-coupe .phone { --h: var(--hauteur-tel); }

/* La zone de texte occupe tout l'écran visible : sans clavier dessiné, plus
   rien ne lui dispute la place. */
.ecran-essai { justify-content: flex-start; }

/* --- LE BANDEAU D'EXEMPLES (Elliott, 2026-08-31) -----------------------
   « Mets les exemples sous forme de bandeau à 3 lignes, tout comme on l'a fait
   dans la page des langues du monde (ne mets pas les exemples cliquables, on
   s'entend... c'est juste pour les voir), et mets le bandeau entre la stat de
   caractères sauvés et le sous-titre. »

   Même mécanique que la liste des langues : trois rangées, l'alphabet — ici
   l'ordre choisi — descend en COLONNES, et le doigt pousse vers la droite. En
   `row`, il faudrait revenir à gauche à chaque rangée.

   ⛔ Ce sont des `<span>`, pas des boutons : ils montrent ce qu'on peut taper,
   c'est le clavier qui fait le travail. */
.rail-exemples { position: relative; margin: 16px auto 0; max-width: 760px; }

.exemples {
  display: grid;
  grid-auto-flow: column;
  /* UNE seule rangee (Elliott, 2026-08-31). A trois, le bandeau prenait la
     hauteur d'un tiers d'ecran avant meme qu'on ait tape. */
  grid-template-rows: auto;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 2px 2px 4px;
  text-align: left;
}

.exemple {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  background: var(--blanc);
  border: 1px solid #e6ece5;
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  font-size: 0.9rem;
  transition: background-color 300ms ease;
}
/* La règle qui vient de jouer s'allume : c'est ce qui relie ce qu'on a tapé à
   la liste. Sans ça, le bandeau ne serait qu'un décor. */
.exemple.vient-de-jouer { background: #d6ecd4; border-color: #b9dcb5; }

.raccourci {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #eef4ed;
  color: var(--vert);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.84rem;
  flex: none;
}
.fleche { color: var(--gris); flex: none; }
.resultat { color: var(--encre); }
.resultat.long { color: var(--gris); font-style: italic; }

/* La flèche flotte au bord droit, et disparaît au bout. */
/* La fleche est un vrai bouton, pas un chevron fondu dans le decor
   (Elliott, 2026-08-31 : « un peu moins subtile »). Meme vert que le menu. */
.vers-droite {
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--blanc);
  background: var(--vert-surface);
  box-shadow: 0 2px 8px rgba(23, 53, 22, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px 2px;
}
.vers-droite[hidden] { display: none; }

/* Le compteur vit dans l'EN-TETE depuis le 2026-08-31 (Elliott : « ramene la
   stat de caracteres evites en haut »). Au bas de la carte des exemples, il
   fallait defiler pour voir la seule mesure de la page -- et sur telephone,
   defiler APRES avoir tape, donc en quittant des yeux ce qu'on venait de faire.
   Sous le sous-titre, il apparait la ou le regard est deja. */
/* 🔴 `.gain[hidden]` EST OBLIGATOIRE, et son absence a coute une verification
   fausse. L'attribut `hidden` applique `display: none` avec une specificite
   minuscule : la moindre regle `display:` du CSS la bat. En posant
   `display: inline-flex` ici, j'ai rendu le compteur VISIBLE en permanence --
   « 0 frappes » s'affichait avant toute frappe (Elliott, 2026-08-31).
   ⚠️ Et ma mesure ne l'avait pas vu : j'avais teste `element.hidden`, qui valait
   bien `true`. L'ATTRIBUT etait pose, le RENDU l'ignorait. Mesurer un attribut
   n'est pas mesurer ce qui s'affiche. */
.gain[hidden] { display: none !important; }

/* ⚠️ `.essai-entete .gain` ET NON `.gain` SEUL — deuxieme fois que la
   specificite mord aujourd'hui. `.essai-entete p` vaut (0,1,1) et `.gain` seul
   (0,1,0) : la regle du paragraphe gagnait, imposait `margin: 0`, et le bloc
   se collait a gauche au lieu de se centrer. Le meme piege avait rendu le
   bouton « Telecharger » invisible sur la carte des langues. */

/* PAS DE CONTENEUR (Elliott, 2026-08-31) : « juste la stat en vert centree
   au-dessus de l'iPhone, avec le texte centre en dessous, sans conteneur, ca va
   prendre moins de place ». Le rectangle blanc pesait autant que ce qu'il
   annoncait -- ombre, fond, rembourrage -- pour deux lignes de texte. */
.essai-entete .gain {
  /* Serre des deux cotes (Elliott, 2026-08-31 : « trop d'espace perdu ici »).
     Le compteur separait le bandeau du telephone par 22 px au-dessus, 14 en
     dessous, PLUS le rembourrage de la scene -- soit pres de 60 px de vide pour
     deux lignes de texte. */
  margin: 12px auto 2px;
  color: var(--gris);
  font-size: 0.92rem;
  line-height: 1.3;
  display: block;
  text-align: center;
}

.essai-entete .gain strong {
  color: var(--vert);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1.05;
}


/* ⚠️ 759 px, PAS 880 (corrige le 2026-08-31). Elliott voyait la version
   telephone SUR SON LAPTOP -- « j'ai l'impression que c'est revenu a un vieux
   concept » -- simplement parce que sa fenetre n'etait pas maximisee. ✅ Mesure
   a 860 px : la carte ne s'appliquait pas.
   Le seuil ne doit pas se choisir sur une idee de « ce qu'est un laptop », mais
   sur la LARGEUR QU'IL FAUT AU CONTENU : la carte fait 720 px plus 40 de
   marges, donc 760. En dessous elle n'a pas la place ; au-dessus elle l'a,
   qu'on soit sur un telephone en paysage ou sur une fenetre a moitie ouverte. */
@media (max-width: 759px) {
    .essai-scene { flex-direction: column; --hauteur-tel: min(104dvh, 800px, 172vw); }
  /* Coupe plus court sur telephone : le bas du boitier n'etait que du blanc,
     et il fallait le faire defiler pour atteindre les exemples. */
  .telephone-coupe { height: calc(var(--hauteur-tel) * 0.44); }
}

/* ── SUR LAPTOP, LA PAGE ENTRE DANS LA MEME CARTE QUE LES AUTRES ─────────
   Elliott, 2026-08-31 : « cette page est la seule qui est laide et pas comme
   les autres MAIS SPECIFIQUEMENT SUR LAPTOP. Sur iPhone elle sort tres bien...
   peut-on la mettre dans le meme design que les autres, avec le conteneur
   blanc ? »

   Il a raison, et l'ecart vient d'une asymetrie qu'on ne voit pas en la
   codant : cette page n'utilise pas `.page-contenu`, la carte blanche que
   portent les sept autres. Sur telephone ca ne se remarque pas -- le contenu
   occupe la largeur de toute facon. Sur grand ecran, la carte EST le design :
   sans elle, le titre et le telephone flottent sur le fond, et la page a l'air
   d'appartenir a un autre site.

   Le boitier retrecit dans la meme regle : cale sur la hauteur de l'ecran, il
   depassait la carte de beaucoup. Ici il se cale sur la LARGEUR disponible,
   celle de la carte -- c'est elle qui commande, plus la fenetre. */
@media (min-width: 760px) {
  main[data-essai] {
    width: min(720px, calc(100% - 40px));
    margin: 0 auto clamp(28px, 5vh, 56px);
    background: var(--blanc);
    border-radius: 28px;
    padding: clamp(32px, 4.5vw, 50px) 0 0;
    box-shadow: 0 24px 60px -30px rgba(23, 53, 22, 0.25);
    overflow: hidden;
  }
  .essai-entete { padding: 0 clamp(26px, 4vw, 44px); }
  /* ⚠️ LA PLACE DU COMPTEUR EST RESERVEE, MEME QUAND IL EST VIDE.
     Elliott, 2026-08-31 : « c'est pas laid quand il y a une statistique, mais
     quand il y a rien, la barre est collee ». Exact, et la cause est que le
     compteur porte l'attribut `hidden` : il ne prend AUCUNE place tant que
     personne n'a tape, donc la barre des exemples touchait le telephone, puis
     tout sautait de 60 px des la premiere frappe.
     `visibility` au lieu de `display` : la place reste, le vide respire, et la
     page ne bouge plus au moment ou l'utilisateur regarde son resultat.
     ⛔ Sur telephone on n'y touche pas -- il a dit que la page y sortait tres
     bien, et 60 px reserves y coutent un ecran de defilement. */
  /* ⚠️ `!important` OBLIGATOIRE ICI AUSSI : `.gain[hidden]` en porte un plus
     haut dans ce fichier. Sans lui, la regle passait sans effet -- mesure a
     l'ecran : `display` valait encore `none`. C'est la troisieme fois que ce
     fichier apprend la meme chose : ce qui compte est le style CALCULE, pas
     la regle qu'on vient d'ecrire. */
  .essai-entete .gain[hidden] { display: block !important; visibility: hidden; }
  /* ⚠️ LA CARTE COMMANDE LA TAILLE DU BOITIER, PAS LA FENETRE. Cale sur la
     hauteur de l'ecran, il sortait de la carte ; cale trop bas, il devenait un
     filet de 206 px de large au milieu de 720 -- maigre, et le texte du champ
     se cassait en deux lignes. ✅ Mesure : le boitier garde un rapport de 2,09,
     donc 580 px de haut donnent 278 px de large, soit 39 % de la carte. */
  .essai-scene {
    /* ⚠️ x1,5 EN LARGEUR (Elliott, 2026-08-31). Le boitier n'a pas de largeur
       propre : il se deduit de sa HAUTEUR, avec un rapport de 2,09 mesure.
       Pour passer de 249 a 374 px de large, il faut donc 780 px de haut au
       lieu de 520 -- et la COUPE doit rendre ce qu'il prend, sinon la carte
       gagne 123 px et la page se met a defiler. Elle passe de 0,47 a 0,34 :
       sous le champ, le bas de l'ecran n'est que du blanc de toute facon. */
    --hauteur-tel: min(87dvh, 780px);
    padding: clamp(12px, 2.2vh, 20px) 20px 0;
  }
  /* Coupe plus court, comme sur telephone : sous le champ, le bas de l'ecran
     n'est que du blanc. Le montrer allongeait la carte de 100 px pour ne rien
     donner a voir. 0,47 au lieu de 0,56. */
  /* ⚠️ 0,42 -- LA COUPE EST DIMENSIONNEE PAR LE PLUS LONG DES EXEMPLES, pas par
     le champ vide. Elliott, 2026-08-31 : « c'est trop condense et on voit meme
     presque un peu disparaitre le texte ». Il montrait `cccorrige`, dont le
     resultat fait sept lignes : a 0,29 le fondu commencait au milieu du texte
     et la fin devenait illisible. Un ecran vide tolere une coupe courte ; un
     ecran plein ne la tolere pas, et c'est l'ecran plein qu'on vient voir.
     La carte s'allonge d'autant -- c'est ce qu'il demande. */
  .telephone-coupe {
    height: calc(var(--hauteur-tel) * 0.42);
    /* Le fondu commence a 80 % au lieu de 68 : il doit cacher la COUPE, pas
       le texte. Les 20 % restants suffisent a effacer le cadre. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0.55) 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0.55) 92%, transparent 100%);
  }
  /* Le bloc vert remplace l'ancien pied : il porte deja sa propre marge du
     haut (34 px), il ne reste qu'a lui donner les cotes et le bas de la carte. */
  .venue { margin: clamp(24px, 4vh, 40px) clamp(26px, 4vw, 44px) clamp(32px, 4.5vh, 50px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA MOITIÉ « IL PROPOSE » (2026-09-01)
   Elliott : « la démo montre juste la création de raccourci… une fois que les
   raccourcis sont créés ». La page ne donnait à essayer que la seule chose de
   l'app qui s'applique TOUTE SEULE, pendant que tout le site explique qu'elle
   propose au lieu d'agir. Ces trois blocs portent l'autre moitié.
   ═══════════════════════════════════════════════════════════════════════════ */

.invite-fautes { margin: 18px auto 0; max-width: 660px; }

.fautes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 10px auto 0;
  max-width: 660px;
}

/* Une faute à essayer. Elle ne ressemble PAS à un exemple de règle : pas de
   flèche, pas de résultat — on ne sait pas encore ce que le clavier proposera,
   et c'est tout l'intérêt. L'ondulation dit « faute » sans un mot, et c'est le
   seul endroit du site qui en porte une. */
.faute {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
  color: var(--encre);                    /* 13,49:1 sur blanc, mesuré */
  background: var(--blanc);
  border: 1px solid #e6ece5;
  border-radius: 999px;
  padding: 5px 12px;
  text-decoration: underline wavy var(--gris);
  text-underline-offset: 3px;
  transition: opacity 300ms ease;
}

/* Devenue une règle : ce n'est plus une faute à essayer, c'est un acquis. */
.faute.devenue-regle {
  color: var(--gris);
  text-decoration: none;
  opacity: 0.5;
}

/* La règle que le visiteur vient de faire naître, dans la liste des exemples. */
.exemple.exemple-neuf { background: #eef7ed; border-color: #b9dcb5; }

/* LA PASTILLE, posée DANS le champ, sous la ligne qu'on vient d'écrire.
   ⚠️ NE PAS la rendre au bas de l'écran, si tentant que ce soit parce que c'est
   là qu'elle vit dans l'app : le téléphone de cette page est COUPÉ, son bas est
   hors de la fenêtre. Mesuré : la première version s'affichait à 1082 px pour
   une fenêtre de 720 px — logique parfaite, pastille invisible.
   ⚖️ Contraste mesuré : var(--vert) #237220 sur #eef4ed = 5,37:1. */
.suggestion {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 14px 0 2px;
  background: #eef4ed;
  color: var(--vert);
  border: 1px solid #cfe0cd;
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(23, 53, 22, 0.14);
  animation: suggestion-entre 180ms ease-out;
}
.suggestion[hidden] { display: none; }
.suggestion:active { background: #dcebda; }

@keyframes suggestion-entre {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .suggestion { animation: none } }