/* Identité Maestro — surface publique.
 *
 * Deux colonnes : le formulaire à gauche sur fond blanc, une vitrine bleue à
 * droite. La colonne de gauche porte TOUT ce qui est fonctionnel ; la vitrine
 * ne porte que du discours. C'est ce qui permet de la faire disparaître sur un
 * écran étroit sans rien perdre — un mobile garde le formulaire entier.
 *
 * Aucune règle en attribut `style=` ni en balise <style> : la politique de
 * sécurité de contenu de cette surface impose `style-src 'self'`, et une
 * déclaration en ligne serait ignorée sans qu'aucun message ne l'explique.
 */

:root {
  /* Palette du logo du propriétaire (décision du 25/09/2026, couleurs
   * échantillonnées sur les pixels du logo) : sombre dominant #293239 (le
   * boîtier, le texte « BIMO »), accent #FAA820 (le toit, l'accent du « i »).
   * Remplace le bleu du thème précédent — mêmes valeurs que
   * services/console/console.css.
   *
   * --bleu / --bleu-sombre / --marine GARDENT LEUR NOM — ils ne sont plus
   * bleus, mais renommer aurait rouvert chacun de leurs points d'usage
   * (boutons, liens, focus, éléments actifs) sans bénéfice fonctionnel ; à
   * corriger un jour pour l'honnêteté du nom, pas aujourd'hui.
   * --accent est le seul nom neuf : réservé au DÉCORATIF (bordures, aplats,
   * touches sur fond sombre) — jamais en texte sur fond clair. Mesuré :
   * #FAA820 sur blanc = 1,96:1, sous le minimum de 3:1 déjà pour un simple
   * composant, très en dessous des 4.5:1 d'un texte. */
  --bleu:        #293239;   /* accent principal de la marque */
  --bleu-sombre: #1f262b;
  --marine:      #171c1f;   /* fond de la vitrine */
  --accent:      #faa820;
  --encre:       #0b1220;   /* titres */
  --texte:       #1c2333;
  --doux:        #5b6577;
  --bord:        #dfe3ea;
  --blanc:       #ffffff;
  --vert:        #0f7b3f;
  --rouge:       #d0342c;
  --ambre:       #9a6700;
  /* Montserrat : géométrique, caractères bloc — la famille auto-hébergée la
   * plus proche du style du logo, déjà servie par le portail
   * (services/portal/public/polices/polices.css, licence SIL OFL 1.1) et
   * chargée ici via /app/polices/polices.css (voir index.html, inscription.html,
   * invitation.html), aucun CDN. Plage déclarée 400-700 : une graisse à 800
   * rend à 700, la plus forte disponible. */
  --police: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh; min-height: 100dvh;
  margin: 0; color: var(--texte); background: var(--blanc);
  font: 15px/1.6 var(--police);
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
 * Colonne gauche — la marque, le formulaire, la mention de bas de page
 * ------------------------------------------------------------------------ */

.volet {
  display: flex; flex-direction: column;
  padding: 30px clamp(24px, 6vw, 72px) 34px;
}

header { display: flex; align-items: center; gap: 16px; }

.marque { display: inline-flex; text-decoration: none; }
.marque img { height: 30px; width: auto; display: block; }

/* DEUX LIENS SÉPARÉS PAR UNE VRAIE GOUTTIÈRE, ET NON PAR UNE ESPACE.
 *
 * Le balisage les écrit `<a>Accueil</a> <a>Se connecter</a>` : l'unique
 * séparateur était le nœud de texte entre les deux balises, c'est-à-dire une
 * espace de quatre pixels. Deux libellés de même couleur et de même graisse,
 * collés à quatre pixels, se lisent comme un seul : « Accueil Se connecter ».
 *
 * `flex` avec une gouttière rend la séparation indépendante de la mise en
 * forme du source — un retour à la ligne dans le HTML ne la changera plus. */
header nav { margin-left: auto; font-size: 14px; display: flex; gap: 20px; }
header nav a { color: var(--bleu); text-decoration: none; font-weight: 600; }
header nav a:hover { text-decoration: underline; }
/* La cible se vise au doigt sur un téléphone : un lien de 14 px de haut n'en
 * fait que 17 avec son interligne, contre les 44 exigés. Le retrait vertical
 * agrandit la zone sans déplacer le texte, et la gouttière garde les deux
 * cibles distinctes. */
@media (max-width: 767px) {
  header nav a { padding: 12px 0; }
}

/* BOUTON DE MENU — « Accueil » / « Se connecter » de `inscription.html`,
 * tâche 54, 27/09/2026. Avant cette tâche, ces deux liens étaient des liens
 * nus, aucun style de bouton. Décision du propriétaire, citée mot pour mot :
 * « change le style des deux bouton Acceuil et Se connecté sur la page
 * d'inscription (meme style que tu va faire pour le bouton dans le menu du
 * site vitrine) ». MÊME STYLE, À L'IDENTIQUE, que `.bouton-menu` de
 * `services/accueil/accueil.html` : bordure + fond blanc + texte --bleu,
 * mêmes valeurs (--bleu, --bord, --blanc identiques dans les deux fichiers,
 * recopiées du même logo). Contraste --bleu sur blanc, mesuré par exécution
 * côté vitrine (`getComputedStyle` + calcul WCAG, mêmes couleurs ici) :
 * 13,05:1 au repos ; sur #f4f6f9 au survol (déjà utilisé plus bas dans ce
 * fichier, `.pays:hover`) : 12,05:1 — largement au-dessus des 4.5:1 requis.
 *
 * Un seul lien de classe SCOPÉE (`.bouton-menu`), PAS une réécriture de
 * `header nav a` ci-dessus : cette règle générale sert aussi `index.html`
 * et `invitation.html` (un seul lien « Accueil », hors périmètre de cette
 * tâche) — les toucher n'a pas été demandé. */
.bouton-menu {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--bord); border-radius: 8px;
  background: var(--blanc); color: var(--bleu);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.bouton-menu:hover { background: #f4f6f9; text-decoration: none; }

/* Le formulaire est centré dans sa colonne, comme la référence : l'oeil tombe
 * dessus sans parcourir la page. `margin: auto` et non un centrage rigide — en
 * colonne flex, les marges automatiques centrent sur les deux axes tout en
 * laissant défiler un formulaire plus haut que l'écran plutôt que le couper. */
main { width: 100%; max-width: 420px; margin: auto; padding: 44px 0; }

/* La carte n'a plus ni cadre ni fond : dans une colonne blanche, un rectangle
 * blanc bordé ne délimite plus rien. Le nom de classe reste — le JavaScript
 * des trois parcours l'émet. */
.carte { background: transparent; border: 0; padding: 0; }

h1 {
  font-size: 30px; line-height: 1.15; font-weight: 700; /* plage max de Montserrat */
  letter-spacing: -.03em; color: var(--encre); margin: 0 0 8px;
}
.sous { color: var(--doux); margin: 0 0 26px; font-size: 15px; }
.sous a { color: var(--bleu); font-weight: 600; }

label {
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--encre); margin: 18px 0 6px;
}
label .facultatif { font-weight: 400; color: var(--doux); }

input, select {
  width: 100%; padding: 11px 13px; background: var(--blanc);
  border: 1px solid #c8cfda; border-radius: 6px;
  color: var(--texte); font: inherit;
}
/* Indicatif et numero : UN SEUL CADRE, l'indicatif pose devant.
   Deux cadres cote a cote donnaient deux champs a l'oeil, dont un large et
   vide, alors qu'il s'agit d'un seul numero. */
.tel {
  display: flex; align-items: stretch;
  background: var(--blanc);
  border: 1px solid #c8cfda; border-radius: 6px;
  /* PAS DE `overflow: hidden` ICI, ET C'EST UNE CORRECTION.
     Il servait a rogner les coins carres du champ dans le cadre arrondi. Mais
     depuis que l'indicatif ouvre une liste, il la rognait elle aussi : le menu
     etait decoupe a la hauteur du champ, donc invisible. Les coins se reglent
     la ou ils se posent — sur le champ lui-meme, plus bas. */
}
.tel:hover { border-color: #9aa3b2; }
.tel:focus-within {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(41, 50, 57, .16);
}
/* LE CHOIX DU PAYS, POSE DANS LE CADRE DU NUMERO.
   C'est un `.choix` comme les listes de metiers et de modules — il en herite
   l'ouverture, la fermeture au clic exterieur et Echap — mais sa tete n'est
   pas un champ : c'est le bord gauche d'un champ qui continue a sa droite. */
.tel .indicatif { margin: 0; flex: 0 0 auto; display: flex; }
.tel .indicatif .choix-tete {
  height: 100%; min-height: 0; width: auto; gap: 6px;
  padding: 0 10px;
  border: 0; border-right: 1px solid #e3e8ef; border-radius: 6px 0 0 6px;
  background: transparent; color: var(--doux); white-space: nowrap;
}
.tel .indicatif .choix-tete:hover { background: #f4f6f9; }
/* Le cadre de focus du champ entier est porte par `.tel:focus-within`. Un
   second anneau sur la tete, a l'interieur du premier, ferait deux cadres pour
   un seul controle : on marque la tete par son fond. */
.tel .indicatif .choix-tete:focus-visible {
  outline: 0; box-shadow: none; background: #fcefda;
}
.tel .indicatif .choix-fleche { font-size: 10px; }
/* La liste est plus large que sa tete : elle porte des noms de pays. Elle
   s'ancre donc a gauche et grandit vers la droite, au lieu d'epouser une tete
   de soixante-dix pixels. */
.tel .indicatif .choix-liste {
  right: auto; min-width: 264px; padding: 4px;
}
.pays {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 6px 8px;
  background: transparent; color: var(--texte);
  border: 0; border-radius: 6px;
  font: inherit; font-weight: 400; text-align: left; cursor: pointer;
}
/* `:not(:disabled)` N'EST PAS DECORATIF ICI, IL FAIT GAGNER LA REGLE.
   Plus bas, `button:hover:not(:disabled)` repeint tout bouton survole en bleu
   plein — c'est la regle du bouton d'action, et elle vaut (0,2,1). Un simple
   `.pays:hover` vaut (0,2,0) et arrive AVANT dans le fichier : il perdait deux
   fois, et survoler un pays le peignait en bleu fonce. Voir la meme correction
   sur `.choix-tete:hover`. */
.pays:hover:not(:disabled) { background: #f4f6f9; }
.pays:focus-visible {
  outline: 0; background: #fcefda;
  box-shadow: inset 0 0 0 2px var(--bleu);
}
.pays[aria-selected="true"] { font-weight: 600; }
.pays-nom { flex: 1; min-width: 0; }
.pays-code { color: var(--doux); font-variant-numeric: tabular-nums; }
/* La marque du pays : une largeur fixe des deux cotes, drapeau ou sigle, sinon
   les noms de pays ne s'alignent pas d'une ligne a l'autre. */
.indicatif-marque {
  flex: 0 0 auto; width: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* LE DRAPEAU EST UNE IMAGE, plus un caractere : une police qui ne le dessine
   pas — Windows — ne peut donc plus le faire disparaitre. Le filet clair lui
   donne un bord sur les drapeaux a bande blanche (Pologne, Suisse), qui
   flotteraient sinon sans contour sur un fond blanc. */
.drapeau {
  display: block; width: 22px; height: 16px;
  border-radius: 2px; border: 1px solid rgba(17, 24, 39, .12);
  object-fit: cover;
}
/* Le cadre est porte par .tel : le champ ne doit pas en dessiner un second.
   Les coins de DROITE, eux, lui reviennent depuis que `.tel` ne rogne plus. */
.tel input { flex: 1; min-width: 0; border: 0; border-radius: 0 5px 5px 0; }
.tel input:focus { box-shadow: none; }

input::placeholder { color: #9aa3b2; }
input:hover, select:hover { border-color: #9aa3b2; }
input:focus, select:focus {
  outline: 0; border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(41, 50, 57, .16);
}
input:disabled { background: #f4f6f9; color: var(--doux); }
.aide { font-size: 13px; color: var(--doux); margin-top: 6px; }

/* LE « ? » — l'endroit prevu pour l'aide longue.
   Une regle du projet : un reglage se nomme, il ne se commente pas, et ce qui
   demande une explication va DERRIERE une icone discrete, jamais dans le flux
   de l'ecran. Vingt-deux pixels : assez pour etre vise au doigt sur la ligne
   d'un libelle, assez discret pour ne pas lui disputer l'attention. */
.aide-bulle {
  width: 22px; height: 22px; margin-left: 8px; vertical-align: -5px;
  border: 1px solid var(--bord); border-radius: 999px;
  background: transparent; color: var(--doux);
  font: 600 12px/1 inherit; cursor: pointer; padding: 0;
}
.aide-bulle:hover { border-color: var(--bleu); color: var(--bleu); }
.aide-bulle:focus-visible {
  outline: 0; border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(41, 50, 57, .16);
}
.aide-bulle[aria-expanded="true"] { border-color: var(--bleu); color: var(--bleu); }

/* LA LISTE QUI S'OUVRE.
   Repliee elle tient sur une ligne et dit ce qui est retenu ; ouverte elle
   montre tout. Le catalogue des metiers en porte une douzaine et grandit
   depuis la console : a plat, la liste serait devenue illisible sans que
   personne ne decide rien. */
.choix { position: relative; margin-top: 4px; }
.choix-tete {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 11px 13px; gap: 10px; min-height: 44px;
  background: var(--blanc); color: var(--texte);
  border: 1px solid #c8cfda; border-radius: 6px;
  font: inherit; font-weight: 400; text-align: left; cursor: pointer;
}
/* MEME PIEGE QUE `.pays:hover`, ET IL ETAIT DEJA LA. `button:hover:not(:
   disabled)`, plus bas, vaut (0,2,1) contre (0,2,0) ici, et passe apres : la
   tete des listes de metiers et de modules se peignait en BLEU PLEIN au
   survol, texte blanc sur bleu, alors que la regle ci-dessous demandait un
   fond blanc et un bord gris. Personne ne l'avait releve parce que rien ne
   signale une regle perdue — elle est simplement sans effet. */
.choix-tete:hover:not(:disabled) { border-color: #9aa3b2; background: var(--blanc); }
.choix-tete:focus-visible {
  outline: 0; border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(41, 50, 57, .16);
}
.choix-fleche { color: var(--doux); font-size: 12px; }
.choix-tete[aria-expanded="true"] .choix-fleche { transform: rotate(180deg); }
.choix-liste {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow-y: auto; padding: 4px 12px;
  background: var(--blanc); border: 1px solid #dde3ec; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}
.choix-liste .cases { grid-template-columns: 1fr; }

/* LES CASES A COCHER DES MODULES.
   `input, select` plus haut pose `width: 100%` et un cadre : applique a une
   case a cocher, il en faisait un bloc pleine largeur qui repoussait son
   libelle EN DESSOUS. La case doit etre a GAUCHE du texte, d'ou la remise a
   plat des trois proprietes en cause — largeur, marge, cadre — et le `flex`
   qui aligne les deux sur la meme ligne.
   Ces regles manquaient tout simplement : la console avait les siennes, le
   formulaire public n'en avait aucune. */
.cases {
  display: grid; gap: 0 16px; margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.cases label.case {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 6px 0; min-height: 44px;
  font-size: 14px; font-weight: 400; cursor: pointer;
}
.cases input[type="checkbox"] {
  width: 16px; height: 16px; flex: 0 0 auto; margin: 0; padding: 0;
  border-radius: 3px; accent-color: var(--bleu); cursor: pointer;
}
.cases em {
  font-style: normal; color: var(--doux); font-size: 12.5px;
}

button {
  padding: 12px 22px; border: 0; border-radius: 6px;
  background: var(--bleu); color: #fff; font: inherit; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
button:hover:not(:disabled) { background: var(--bleu-sombre); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.pleine { width: 100%; margin-top: 26px; }
button.discret {
  background: transparent; border: 1px solid var(--bord); color: var(--texte);
}
button.discret:hover:not(:disabled) { background: #f4f6f9; }

/* Les trois messages gardent leurs noms de classe : ils sont écrits par le
 * JavaScript des parcours, qui n'a pas à connaître la feuille de style. */
.erreur { color: #a4201a; background: #fdf0ef; border: 1px solid #f6cfcc; }
.succes { color: #0a5a2e; background: #eefaf2; border: 1px solid #bfe8ce; }
.info   { color: #0b3a7a; background: #eef4fe; border: 1px solid #c9dcfb; }
.erreur, .succes, .info {
  padding: 12px 14px; border-radius: 6px; margin: 16px 0; font-size: 14px;
}

/* --------------------------------------------------------------------------
 * Le code de vérification, une case par chiffre (capture « 02 » du
 * propriétaire, 26/09/2026 — six cases, la dernière surlignée en focus).
 *
 * Rien ne distingue une case remplie d'une case vide au repos : les règles
 * `input:hover` / `input:focus` de la feuille suffisent déjà à montrer l'état
 * courant, et en ajouter une troisième ferait deviner un état qui n'existe
 * pas (« complet » n'est pas encore « vérifié »).
 * ------------------------------------------------------------------------ */
.code-cases { display: flex; gap: 8px; margin-top: 4px; }
.code-cases input {
  width: 42px; height: 50px; padding: 0; text-align: center;
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Témoin du SIRET : vert quand l'établissement est reconnu, rouge quand il est
 * radié. Le dire pendant la saisie évite un dépôt refusé après coup. */
.temoin { font-size: 13px; margin-top: 7px; min-height: 20px; }
.temoin.ok   { color: var(--vert); font-weight: 600; }
.temoin.ko   { color: var(--rouge); font-weight: 600; }
.temoin.doux { color: var(--doux); }

.pas {
  display: flex; gap: 10px; margin-bottom: 30px;
  font-size: 12px; color: var(--doux);
}
.pas div { flex: 1; padding-top: 9px; border-top: 3px solid var(--bord); }
.pas div.actif { border-color: var(--bleu); color: var(--bleu); font-weight: 700; }
.pas div.fait  { border-color: var(--vert); color: var(--vert); font-weight: 600; }

.jauge {
  height: 4px; background: var(--bord); border-radius: 3px;
  margin-top: 9px; overflow: hidden;
}
.jauge i {
  display: block; height: 100%; width: 0; background: var(--rouge);
  transition: width .2s, background .2s;
}
.jauge.moyen i { background: var(--ambre); }
.jauge.bon i   { background: var(--vert); }

.oubli { margin: 18px 0 0; font-size: 14px; }
.oubli a { color: var(--bleu); text-decoration: none; font-weight: 600; }
.oubli a:hover { text-decoration: underline; }

footer { color: var(--doux); font-size: 13px; margin-top: auto; padding-top: 30px; }
footer a { color: var(--doux); }

/* --------------------------------------------------------------------------
 * La liste des activités
 *
 * Une liste à choix multiple plutôt qu'une colonne de cases : neuf activités
 * tiennent dans six lignes visibles, là où les cases occupaient un tiers du
 * formulaire et repoussaient le bouton sous la ligne de flottaison.
 * ------------------------------------------------------------------------ */

.intitule {
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--encre); margin: 18px 0 6px;
}
.intitule .facultatif { font-weight: 400; color: var(--doux); }

/* Les listes `select multiple` ont disparu du formulaire : elles ne se
   ressemblaient pas d'un systeme a l'autre et demandaient un Ctrl-clic
   que rien n'indique. Les activites se choisissent avec les memes cases
   que les modules. */

/* --------------------------------------------------------------------------
 * Le bouton en attente
 *
 * L'attente se montre là où l'utilisateur regarde déjà : sur le bouton qu'il
 * vient de presser. Un voile plein écran surgissait, et tant qu'il n'était pas
 * complètement opaque il laissait voir le formulaire se défaire derrière.
 *
 * Le bouton garde sa couleur — un bouton qui pâlit ressemble à un bouton
 * désactivé, donc à un refus. Une barre parcourt son bord inférieur : elle dit
 * « ça avance » sans prétendre connaître une durée qu'on ignore.
 * ------------------------------------------------------------------------ */

button.occupe {
  position: relative; overflow: hidden;
  /* `disabled` grise par défaut : ici l'attente n'est pas un refus, le bouton
   * reste plein. */
  opacity: 1; cursor: progress;
}
button.occupe::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 35%;
  background: rgba(255, 255, 255, .85); border-radius: 3px;
  animation: bouton-course 1.3s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes bouton-course {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(300%); }
}

/* Les champs pendant l'attente : atténués, sans être barrés. On montre qu'ils
 * ne sont plus modifiables, pas qu'ils sont en faute. */
input:disabled { background: #f7f9fc; color: var(--doux); }

@media (prefers-reduced-motion: reduce) {
  button.occupe::after { animation: none; width: 100%; }
}

/* --------------------------------------------------------------------------
 * Colonne droite — la vitrine
 *
 * Les triangles sont des dégradés et des bordures, pas une image : rien à
 * télécharger, rien à mettre en cache, et `img-src` n'a pas à s'en occuper.
 * ------------------------------------------------------------------------ */

.vitrine {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, transparent 62%, rgba(255,255,255,.05) 62%),
    linear-gradient(160deg, var(--bleu) 0%, var(--marine) 55%, #0a0d0e 100%);
  display: flex; align-items: center;
  padding: 60px clamp(32px, 5vw, 76px);
  color: #fff;
}

.vitrine::before, .vitrine::after {
  content: ""; position: absolute; width: 0; height: 0; pointer-events: none;
}
/* Décorations teintées à l'accent du logo (#FAA820), deux opacités pour
   garder les deux triangles distincts — une seule couleur d'accent fournie,
   contrairement au bleu et au sarcelle d'origine. */
.vitrine::before {
  right: -60px; bottom: 6%;
  border-top: 210px solid transparent; border-bottom: 210px solid transparent;
  border-right: 200px solid rgba(250, 168, 32, .30);
}
.vitrine::after {
  right: 26%; bottom: -70px;
  border-top: 130px solid transparent; border-bottom: 130px solid transparent;
  border-right: 124px solid rgba(250, 168, 32, .14);
}

.propos { position: relative; max-width: 480px; }
.propos h2 {
  font-size: clamp(28px, 3.1vw, 40px); line-height: 1.14; font-weight: 700; /* plage max de Montserrat */
  letter-spacing: -.03em; margin: 0 0 20px;
}
/* #dcd3c8 sur le fond le plus clair du dégradé (var(--bleu), #293239) :
   8.82:1 — largement au-dessus des 4.5:1 requis. */
.propos p { font-size: 16px; line-height: 1.65; color: #dcd3c8; margin: 0; }
.propos ul { list-style: none; margin: 26px 0 0; padding: 0; }
.propos li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  color: #e6ddd0; font-size: 15px;
}
.propos li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 2px; background: #faa820;
}

/* --------------------------------------------------------------------------
 * Écrans étroits : la vitrine n'est que du discours, elle s'efface.
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .vitrine { display: none; }
  main { margin: 40px auto; }
  header nav { font-size: 13px; }
}

/* L'ŒIL DES CHAMPS DE MOT DE PASSE — mêmes règles que la console, pour que le
   même geste ait la même allure des deux côtés. Le bouton se pose SUR le
   champ, qui lui réserve sa place à droite : sans ce `padding-right`, un mot
   de passe long passerait sous l'icône. */
.secret { position: relative; display: block; }
.secret input { padding-right: 46px; width: 100%; }
.oeil {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; padding: 0;
  width: 44px; height: 44px; cursor: pointer; color: var(--doux);
  display: inline-flex; align-items: center; justify-content: center;
}
.oeil:hover { background: transparent; color: var(--encre, #111827); }
.oeil:focus-visible { outline: 2px solid var(--bleu); border-radius: 6px; }
.oeil svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}