/* Ouraya Coffre : styles des écrans « ouverture » (public/app/ecrans/ouverture.js).
   Sur les jetons de /lumiere.css et les classes de /coffre/coffre.css.
   Aucune couleur en dur : le mode nuit suit seul.

   Correspondances avec docs/coffre-interface.md : --gris = --texte-faible,
   --papier-creuse = --fond-creux, --encre = --texte, --mono = --f-technique,
   --perdu = --c-danger, --vivant = --c-succes, --verifier = --c-attention.
   Le kit imprimé vit à part, dans /coffre/impression.css. */


/* ================================================================ LA COLONNE */
.ouv-ecran{align-content:start;padding-top:clamp(28px,7vh,72px)}
.ouv-colonne{
  display:flex;flex-direction:column;
  width:min(var(--ouv-largeur,440px),100%);
  min-width:0;
}
.ouv-colonne[data-largeur="carte"]{--ouv-largeur:440px}
.ouv-colonne[data-largeur="moyenne"]{--ouv-largeur:600px}
.ouv-colonne[data-largeur="mots"]{--ouv-largeur:640px}
.ouv-colonne[data-largeur="large"]{--ouv-largeur:820px}

.ouv-titre{margin:0 0 12px}
.ouv-chapo{margin:0 0 14px;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6}
.ouv-colonne > .mention{margin:0 0 12px}
.ouv-carte{width:100%}
.ouv-carte > .ouv-titre{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.ouv-carte > .mention{margin-top:12px}
.ouv-carte > .mention:first-of-type{margin-top:0;margin-bottom:16px}

.ouv-forme{display:flex;flex-direction:column;min-width:0}
.ouv-bouton-large{width:100%}
.ouv-message{margin:14px 0 0}
.ouv-message a{color:inherit;font-weight:500}
.ouv-message p{margin:0}
/* L'avis de session perdue, en tête du formulaire de connexion (?retour=). */
.ouv-forme > .ouv-message:first-child{margin:0 0 18px}
/* « Changer d'adresse », sous l'adresse affichée sans être modifiable. */
.ouv-changer{margin:-6px 0 16px;font-size:.88rem}

.ouv-liens{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin:18px 0 0;
  font-size:.93rem;
}
.ouv-liens a{color:var(--texte-doux)}
.ouv-liens a:hover{color:var(--texte)}
.ouv-aide{margin-top:12px}
.ouv-aide a{white-space:nowrap}
.ouv-discret{margin:16px 0 0;font-size:.88rem}
.ouv-discret a{color:var(--texte-doux)}
.ouv-sobre{margin-top:28px;max-width:54ch}

/* Le libellé d'un champ qui n'est pas un .champ : même graduation d'instrument. */
.ouv-libelle{
  display:block;margin:0 0 9px;
  font:400 11.5px/1.35 var(--f-technique);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-faible);
}

/* L'attente d'une dérivation : la barre sans fin, et la phrase. */
.ouv-attente{display:grid;gap:8px;margin-top:14px}
.ouv-attente .progression-texte{display:none}
.ouv-attente .mention{margin:0}

.ouv-suite{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.ouv-suite .mention{margin:0}

/* L'illustration de l'écran d'adresse (ui.visuel, lumiere.css « VISUELS ») :
   un bandeau recadré sur la boîte, entre les jalons et la carte. */
.ouv-visuel{margin:0 0 18px}
.ouv-visuel img{aspect-ratio:2/1;object-fit:cover;object-position:50% 45%}

/* Le logotype seul, sur les écrans sans barre (les douze mots). */
.ouv-logo{align-self:flex-start;margin:0 0 22px}
.ouv-logo img{width:118px;height:auto}

/* La coche de fin. */
.ouv-coche{
  display:grid;place-items:center;
  width:68px;height:68px;margin:0 0 18px;
  border-radius:50%;
  background:var(--c-succes-voile);
  color:var(--c-succes);
}


/* ================================================================ LES JALONS */
/* Six pastilles, la courante en ambre. Décoratives : le texte « Étape n sur 6 »
   est dit aux lecteurs d'écran. */
.jalons{margin:0 0 22px}
.jalons-pas{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.jalon{
  width:8px;height:8px;border-radius:var(--r-pastille);
  background:var(--trait-net);
  transition:width .3s var(--sortie), background .3s;
}
.jalon[data-etat="fait"]{background:color-mix(in srgb,var(--texte-doux) 55%,transparent)}
.jalon[data-etat="courant"]{width:26px;background:var(--accent-aplat)}


/* ============================================================== LES PORTES */
.portes{
  display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  margin:20px 0 0;
}
.porte{
  display:flex;flex-direction:column;gap:12px;
  padding:clamp(22px,2.6vw,30px);
  background:var(--surface);
  border:1px solid var(--trait);
  border-radius:var(--r-bloc);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-portee);
}
.porte p{margin:0;color:var(--texte-doux);line-height:1.6}
.porte .btn{margin-top:auto;align-self:flex-start}
.porte-titre{margin:0;font:500 1.2rem/1.3 var(--f-titre);letter-spacing:-.02em}
/* La porte sombre : l'aplat de la charte, soustrait à la lumière. */
.porte.porte-sombre{
  background:var(--panneau-fond);
  border:1px solid var(--panneau-trait);
  box-shadow:var(--ombre-portee);
}
.porte.porte-sombre .porte-titre{color:var(--panneau-texte)}
.porte.porte-sombre p{color:var(--panneau-doux)}


/* ========================================================== LE MOT DE PASSE */
.phrase{display:flex;flex-direction:column;min-width:0}
.phrase-proposee{margin:0 0 4px}
/* Une ligne en chasse fixe ; sur un téléphone, elle se coupe aux traits
   d'union, jamais au milieu d'un mot. */
.phrase-texte{
  display:block;width:100%;
  margin:0;padding:14px 16px;
  resize:none;overflow:hidden;
  background:var(--fond-creux);
  border:1px solid var(--accent-trait);
  border-radius:var(--r-net);
  box-shadow:var(--creux-ombre);
  color:var(--texte);
  font-family:var(--f-technique);
  font-size:clamp(16px,4.4vw,20px);
  line-height:1.45;
  letter-spacing:-.01em;
  word-break:normal;overflow-wrap:normal;
  cursor:text;
}
.phrase-texte:focus{outline:none;border-color:var(--accent);box-shadow:var(--creux-ombre),0 0 0 1px var(--accent-trait)}
.phrase-texte:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.phrase-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.phrase-bascule{margin:12px 0 18px;font-size:.93rem}
.phrase-libre .champ{margin-bottom:18px}

/* La jauge à quatre paliers. */
.jauge-phrase{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:2px}
.jauge-phrase i{display:block;height:4px;border-radius:var(--r-pastille);background:var(--trait)}
.jauge-phrase[data-palier="0"] i:nth-child(-n+1){background:var(--c-danger)}
.jauge-phrase[data-palier="1"] i:nth-child(-n+2){background:var(--c-attention-aplat)}
.jauge-phrase[data-palier="2"] i:nth-child(-n+3){background:var(--c-succes)}
.jauge-phrase[data-palier="3"] i{background:var(--c-succes)}
.phrase-verdict:empty{display:none}

.ouv-consentement{margin:4px 0 22px}
.ouv-consentement .case-texte{font-size:.95rem;color:var(--texte-doux)}


/* ============================================================== LE CODE */
.champ-code input{
  font-family:var(--f-technique);
  font-size:26px;line-height:1.2;
  letter-spacing:.42em;
  text-align:center;
  padding-left:calc(16px + .42em);
  font-variant-numeric:tabular-nums;
}
.ouv-renvoi{margin-top:12px}
.ouv-renvoi .btn{width:100%}


/* ========================================================= LES DOUZE MOTS */
/* La grille : fond creusé, filet ambre, coins à 16 px. Trois colonnes de
   quatre sur ordinateur, deux de six sur téléphone, lues colonne par colonne. */
.grille-mots{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;
  gap:14px 24px;
  margin:18px 0 14px;
  padding:clamp(16px,2.4vw,24px);
  list-style:none;
  background:var(--fond-creux);
  border:1px solid var(--accent-trait);
  border-radius:16px;
  box-shadow:inset 0 1px 0 var(--arete-lumiere-faible);
}
.mot-case{display:flex;align-items:baseline;gap:10px;min-width:0}
.mot-numero{
  flex:none;min-width:1.7em;
  font:400 13px/1 var(--f-technique);
  color:var(--texte-faible);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.mot-texte{
  min-width:0;
  font-family:var(--f-technique);
  font-size:18px;line-height:1.3;
  color:var(--texte);
  user-select:text;-webkit-user-select:text;
  overflow-wrap:anywhere;
}
.mot-masque .mot-points{
  font:400 14px/1.3 var(--f-technique);
  letter-spacing:.08em;
  color:var(--texte-faible);
}

/* Les trois boutons de même poids. Pleins de la surface : le mur de chiffré de
   la charte ne doit pas transparaître sous leurs libellés. */
.mots-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.mots-actions .btn{flex:1 1 auto;padding-inline:16px;white-space:nowrap;--fond-btn:var(--surface)}
.mots-raison{margin:0}
.mots-kit{margin:10px 0 0;max-width:62ch}

.ouv-encart{margin-top:24px}
.ouv-encart p{margin:0 0 .7em;color:var(--texte-doux);line-height:1.6}
.ouv-encart p:last-of-type{margin-bottom:0}
.ouv-encart-titre{margin:0 0 12px;font:500 1.1rem/1.35 var(--f-titre);letter-spacing:-.02em}
.ouv-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}

.ouv-pourquoi p{margin:0 0 1em;color:var(--texte-doux);line-height:1.65}


/* ============================================== LA SAISIE DES MOTS (§5, §4 écran 5) */
.grille-saisie,.grille-preuve{gap:12px 18px;align-items:start}
.mot-champ{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:6px 10px;
}
.mot-champ .mot-numero{line-height:1.2}
/* Une case masquée de la preuve prend la hauteur d'un champ : sans cela, le
   numéro 9 flotte au-dessus de la ligne des champs 1 et 5. */
.grille-preuve .mot-masque{min-height:41px;align-items:center}
.mot-entree{position:relative;min-width:0}
.mot-saisie{
  appearance:none;-webkit-appearance:none;
  width:100%;min-width:0;
  padding:9px 10px;
  background:var(--surface);
  border:1px solid var(--trait-net);
  border-radius:var(--r-net);
  box-shadow:var(--creux-ombre);
  color:var(--texte);
  font-family:var(--f-technique);
  font-size:16px;line-height:1.3;   /* 16 px : sous ce seuil, iOS agrandit la page au focus */
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.mot-saisie:focus{outline:none;border-color:var(--accent-trait);box-shadow:var(--creux-ombre),0 0 0 1px var(--accent-trait)}
.mot-saisie:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* « reconnu » : le mot est dans la liste, rien de plus. Une marque neutre, pas
   le vert d'une réussite : un mot de la liste peut être le mauvais, et seul le
   rouge (faux) ou l'ambre (suspect) disent quelque chose de juste ou de faux. */
.mot-champ[data-etat="reconnu"] .mot-saisie{border-color:var(--trait-net)}
.mot-champ[data-etat="faux"] .mot-saisie{border-color:var(--c-danger);background:var(--c-danger-voile)}
.mot-champ[data-etat="suspect"] .mot-saisie{border-color:var(--c-attention-aplat);background:var(--c-attention-voile)}
.mot-champ[data-etat="faux"] .mot-numero{color:var(--c-danger)}

.mot-message{grid-column:1 / -1;font-size:.82rem;line-height:1.4;color:var(--c-danger)}
.mot-message p{margin:0}
.mot-message p + p{margin-top:2px;color:var(--texte-doux)}
.mot-message .bouton-lien{font-family:var(--f-technique);font-size:.95em}

.mot-propositions{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;
  margin:0;padding:4px;
  list-style:none;
  max-height:240px;overflow:auto;
  background:var(--surface-haute);
  border:1px solid var(--trait-net);
  border-radius:var(--r-bloc);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-profonde);
}
.mot-proposition{
  padding:8px 10px;border-radius:var(--r-net);
  font:400 15px/1.3 var(--f-technique);
  color:var(--texte);
  cursor:pointer;
}
.mot-proposition.actif{background:var(--fond-creux);color:var(--accent)}

.ouv-coller{margin:4px 0 0;font-size:.93rem}


/* ======================================================== LA RÉOUVERTURE */
.rebours{
  margin:22px 0 4px;
  font-family:var(--f-technique);
  font-size:clamp(28px,7vw,42px);line-height:1.1;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--texte);
}
.ouv-attente-hote{min-width:0}
.ouv-attente-hote .etat-vide{padding-block:24px}


/* ============================================================ TÉLÉPHONE */
@media (max-width:560px){
  .grille-mots{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(6,auto);
    gap:12px 14px;
    padding:14px;
  }
  .grille-saisie,.grille-preuve{gap:10px 12px}
  .mot-case{gap:8px}
  .mot-numero{min-width:1.4em}
  .mots-actions{flex-direction:column}
  .ouv-choix{grid-template-columns:1fr}
  .phrase-actions .btn{flex:1 1 auto}
  .ouv-suite > .btn{width:100%}
}