/* ============================================================
   LE LAC DU CHAPITRE IV — feuille autonome (WP4)
   Chargée par index.html APRÈS style.css. Elle ne contient que ce qui appartient au lac et
   à son guichet ; les boutons (.btn-solid, .btn-arrow) et les tokens de type sont à style.css
   (WP2) et ne sont pas redéfinis ici.
   ============================================================ */

/* Le lac : même place dans la pile que la poussière dorée et l'étang qu'il remplace —
   au-dessus du film (z1) et du divider (z2 en fin de pile de son plan), SOUS le calque de
   texte (z3) et le bandeau (z4). Absolu et non fixe : `.stage` est déjà `position: fixed`
   plein écran, un second élément fixe ne ferait que dupliquer la contrainte et sortirait du
   contexte d'empilement de la scène.

   `transition: none` est une CONSIGNE, pas un oubli : l'opacité est une fonction de
   `chapterProgress` écrite à chaque image par src/lac-contact.js. Une transition la ferait
   traîner derrière le scroll, et surtout mentir au scrub inversé — on remonte, le lac
   redescend en retard. */
.lac {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: none;
  /* JAMAIS le pointeur : le lac est plein écran sur le seul chapitre qui porte un
     formulaire. Les poissons écoutent sur `window` (lac-contact.js) précisément pour n'avoir
     jamais à réclamer le clic. */
  pointer-events: none;
  overflow: hidden;
}
.lac[hidden] { display: none; }

/* LE VOILE MOBILE (Lucas, 2026-09-05 : « le contact est illisible »). À 1440 px le texte du
   chapitre se pose sur la fosse, la partie sombre de l'eau ; à 390 px le cadrage « cover »
   ne garde que le couloir central, c'est-à-dire les hauts-fonds clairs et leurs caustiques
   — et des capitales crème sur une eau turquoise qui bouge, même avec leur halo, se lisent
   une image sur deux. Un voile sarcelle, plus dense vers le milieu de l'écran où vivent le
   titre et le guichet, ramène l'eau dans la gamme où le crème porte — mais reste LÉGER :
   les poissons doivent se voir à travers (Lucas, 2026-09-05 : « je veux plus voir les
   poissons » — en voir davantage, c'est le guichet pas à pas qui leur rend la place, pas
   un voile qui les éteindrait). La lisibilité des champs est portée par le verre du
   guichet, plus dense sur téléphone. Il est DANS `.lac`
   pour hériter de son opacité (il monte avec l'eau, jamais avant elle) et SOUS les
   étiquettes des poissons, qui gardent leur z-index à elles. */
@media (max-width: 760px) {
  .lac::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgba(6, 34, 38, 0.1) 0%,
        rgba(6, 34, 38, 0.26) 30%,
        rgba(6, 34, 38, 0.3) 70%,
        rgba(6, 34, 38, 0.14) 100%
      );
  }
  .lac-etiquettes { z-index: 1; }
  /* Le verre du guichet s'épaissit d'autant : sur un écran étroit, il n'a plus de fosse
     sombre derrière lui pour décoller les champs. */
  form.guichet {
    background: linear-gradient(rgba(9, 44, 47, 0.66), rgba(9, 44, 47, 0.8));
  }

  /* ---- LE GUICHET PAS À PAS (src/guichet-lac.js, installerPas) ------------------------
     Une question, une ligne, un geste. Le compteur et les jalons reprennent le vocabulaire
     du cadre : filets fins, capitales mono espacées, crème sur l'eau. Rien de nouveau n'est
     inventé pour le téléphone — il n'a droit qu'à moins de choses à la fois. */
  form.guichet.guichet--pas { padding: 1.2rem 1.25rem 1.05rem; }
  .guichet-pas-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.15rem;
  }
  .guichet-pas-compte {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: rgba(226, 220, 204, 0.55);
  }
  .guichet-pas-compte b { font-weight: 400; color: var(--film-light, #e0ceb0); }
  .guichet-pas-compte i { font-style: normal; margin: 0 0.35em; opacity: 0.6; }
  .guichet-pas-jalons { display: flex; gap: 7px; }
  .guichet-pas-jalons i {
    display: block;
    width: 26px;
    height: 2px;
    background: rgba(226, 220, 204, 0.22);
    transition: background 300ms var(--ease, ease);
  }
  .guichet-pas-jalons i.is-fait { background: var(--film-light, #e0ceb0); }
  .guichet-pas-jalons i.is-ici { background: rgba(226, 220, 204, 0.7); }

  /* La question remplace le libellé : une phrase en mono, pas une capitale espacée, parce
     qu'ici elle est seule à l'écran et qu'elle a le droit de parler. */
  .guichet--pas .guichet-champ { margin: 0; }
  .guichet--pas .guichet-question {
    font-size: clamp(1.02rem, 4.6vw, 1.22rem);
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.32;
    color: var(--film-light, #e0ceb0);
    margin-bottom: 0.55rem;
  }
  .guichet--pas input,
  .guichet--pas textarea { font-size: 1.12rem; }
  .guichet--pas textarea { min-height: 7rem; }

  /* L'entrée d'un pas : le champ arrive du côté où l'on va. 18 px et 280 ms — un glissement
     de fiche, pas un carrousel. */
  .guichet--pas .guichet-champ.is-entree { animation: guichet-entree 280ms var(--ease, ease) both; }
  .guichet--pas .guichet-champ[data-sens='arriere'] { --guichet-sens: -18px; }
  @keyframes guichet-entree {
    from { opacity: 0; transform: translateX(var(--guichet-sens, 18px)); }
    to { opacity: 1; transform: none; }
  }

  .guichet-pas-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
  }
  .guichet-pas-nav .btn-solid { margin: 0 0 0 auto; }
  /* `hidden` doit gagner sur le `display: inline-flex` de .btn-solid : sans ce rappel, le
     bouton d'envoi restait visible à chaque pas (mesuré au Playwright, 2026-09-05). */
  .guichet-pas-nav [hidden] { display: none !important; }
  .guichet-pas-retour {
    background: none;
    border: 0;
    padding: 12px 0;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(226, 220, 204, 0.72);
    white-space: nowrap;
    cursor: pointer;
  }
  .guichet-pas-retour:active { color: var(--film-light, #e0ceb0); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .guichet--pas .guichet-champ.is-entree { animation: none; }
}

/* Un canvas est un élément REMPLACÉ : `inset: 0` le pose mais ne l'étire pas — sans ces
   100 %, il reste à sa taille intrinsèque de 300×150 (leçon déjà payée sur .dorure-canvas et
   .etang-canvas, elle ne se repaie pas). */
.lac-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.lac-canvas[hidden] { display: none; }

/* Le repli : le même dégradé que la page contact d'origine, dans la gamme de l'eau du lac
   (émeraude sur fond pâle, lumière au nord-ouest comme le soleil du rendu). Il ne se montre
   que quand le lac EST en repli — sinon il ferait un fond opaque sous une eau qui a le sien. */
.lac-statique {
  position: absolute;
  inset: 0;
  display: none;
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(232, 223, 192, 0.22), transparent 55%),
    linear-gradient(160deg, #5fc0b4 0%, #3f9d9b 45%, #2e7f85 100%);
}
.lac.is-statique .lac-canvas { display: none; }
.lac.is-statique .lac-statique { display: block; }

/* ============================================================
   LE GUICHET — le formulaire nu (src/guichet-lac.js)
   ============================================================ */

/* Verre teinté sarcelle ALLÉGÉ par rapport à la page d'origine : bordure fine, flou 6 px,
   champs soulignés. La plaque épaisse du film faisait « vieillot » (c'est le constat qui a
   lancé la refonte) ; ici le verre ne sert plus qu'à décoller les champs de l'eau qui bouge
   dessous — sans quoi le clapot passe à travers le texte et la ligne de saisie devient
   illisible à chaque vague. */
form.guichet {
  width: min(30rem, 92vw);
  max-width: 30rem;
  margin: 1.4rem 0 0;
  padding: 1.25rem 1.4rem 1.1rem;
  text-align: left;
  border: 1px solid rgba(226, 220, 204, 0.28);
  border-radius: 14px;
  background: linear-gradient(rgba(9, 44, 47, 0.44), rgba(9, 44, 47, 0.6));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Le halo du texte de chapitre n'a rien à faire dans un champ de saisie. */
  text-shadow: none;
  /* Même leçon que .chapter-cta : cliquable exactement quand son bloc l'est, jamais avant.
     Redéclarer `auto` ici rendrait le formulaire actif sous les trois premiers chapitres. */
  pointer-events: inherit;
}

.guichet-ligne {
  display: flex;
  gap: 1rem;
}
.guichet-champ {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0 0.75rem;
}

/* Les libellés sont VISIBLES et non seulement lus : un formulaire posé sur une eau qui bouge
   perd ses placeholders dès qu'on commence à taper, et « qu'est-ce que j'écris dans le
   deuxième champ » est exactement la question qu'un contact ne doit pas poser. */
.guichet-label {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--mono, ui-monospace, monospace);
  /* Recalé sur la Space Mono (2026-09-04, le soir) : elle est nettement plus étroite que la
     Martian Mono qu'elle remplace, donc un libellé de 0,6rem y devenait illisible sur
     l'eau. Le corps monte, l'interlettrage descend d'autant. */
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 220, 204, 0.62);
}

form.guichet input,
form.guichet textarea {
  width: 100%;
  padding: 0.45rem 0 0.45rem;
  font-family: var(--body, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--film-light, #e0ceb0);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(226, 220, 204, 0.3);
  border-radius: 0;
  transition: border-color 200ms var(--ease, ease);
}
form.guichet ::placeholder { color: rgba(226, 220, 204, 0.42); }
form.guichet textarea { resize: vertical; min-height: 5rem; }

/* Le focus se voit : le filet passe à 2 px en crème pleine, et le rembourrage compense pour
   que la ligne ne saute pas d'un pixel au premier Tab. */
form.guichet input:focus,
form.guichet textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--film-light, #e0ceb0);
  padding-bottom: calc(0.45rem - 1px);
}
/* Au clavier seulement, un anneau franc en plus du filet : le filet suffit à la souris, pas
   à qui navigue sans voir où le focus est parti. */
form.guichet input:focus-visible,
form.guichet textarea:focus-visible {
  outline: 2px solid rgba(226, 220, 204, 0.75);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Le piège à robots : hors de l'écran, hors du parcours clavier, hors de l'arbre a11y. */
.guichet-gotcha {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.guichet-envoi {
  margin-top: 0.3rem;
  border: 0;
  cursor: pointer;
}
.guichet-envoi[disabled] { opacity: 0.55; cursor: default; }

/* La ligne de retour a sa place RÉSERVÉE (min-height, jamais `display: none` quand elle est
   vide) : un message qui apparaît ne doit pas faire grandir le guichet d'une ligne sous le
   doigt du visiteur. */
.guichet-retour {
  margin: 0.6rem 0 0;
  min-height: 1.4em;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(226, 220, 204, 0.85);
}
.guichet-retour[data-ton='a-corriger'] { color: rgba(226, 158, 132, 0.98); }
.guichet-retour[data-ton='reussi'] { color: rgba(198, 224, 176, 0.98); }

/* Sous 560 px, nom et e-mail redeviennent deux lignes : deux champs de 130 px côte à côte ne
   laissent pas la place d'écrire une adresse. */
@media (max-width: 560px) {
  .guichet-ligne { display: block; }
  form.guichet { padding: 1.1rem 1.1rem 1rem; }
}

/* LES CHAMPS SONT DES CIBLES DE DOIGT (2026-09-05, Lucas : « le rendu du mobile n'est pas
   optimisé »). Mesuré à 390 px : 39 px de haut pour « votre nom » et « votre e-mail ». Un
   champ souligné n'a pas de bord visible pour guider le doigt — sa seule aide est sa
   HAUTEUR, et 39 px passe sous le seuil de 44. Le rembourrage monte, le trait ne bouge pas.
   Le `font-size` reste à 1 rem et ce n'est pas un hasard : sous 16 px, Safari iOS zoome la
   page à la mise au point du champ et ne la dézoome jamais. */
@media (pointer: coarse) {
  /* PAS DE VERRE FLOUTÉ AU DOIGT (2026-09-05, « le projet lag en mobile »). Un
     `backdrop-filter` posé sur une eau WebGL qui se repeint soixante fois par seconde oblige
     le navigateur à re-flouter la zone derrière le guichet À CHAQUE IMAGE — et c'est le seul
     chapitre où l'on tape au clavier. Le fond se densifie d'autant : les champs restent
     décollés de l'eau, sans flou à recalculer. Posé APRÈS le bloc 760 px, qui n'épaissit
     que le dégradé. */
  form.guichet {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(rgba(9, 44, 47, 0.72), rgba(9, 44, 47, 0.84));
  }
  form.guichet input {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  form.guichet input:focus {
    padding-bottom: calc(0.7rem - 1px);
  }
}

/* Reduced motion : le lac se peint (trois images, voir lac-contact.js) mais plus rien ne
   transitionne dans le guichet. */
@media (prefers-reduced-motion: reduce) {
  form.guichet input,
  form.guichet textarea { transition: none; }
}

/* ============================================================
   LES ÉTIQUETTES DES POISSONS PORTEURS (src/porteurs.js, Lucas 2026-09-04)
   ============================================================ */

/* Quatre poissons du banc portent les quatre projets. Il fallait le FAIRE COMPRENDRE sans
   l'écrire : une phrase du genre « cliquez sur les poissons » serait la preuve que le geste
   ne se devine pas. Le nom du projet suit donc son poisson EN PERMANENCE, mais à 35 %
   d'opacité — assez pour qu'on remarque que quatre poissons sur dix-huit sont nommés, pas
   assez pour faire une légende par-dessus le formulaire. Au survol, l'étiquette monte à 1 et
   la flèche glisse : c'est là seulement qu'elle se donne pour un lien.

   La couche est DANS `#lac` : elle hérite de son `hidden` et de son opacité pilotée par
   l'avancement du chapitre, donc elle ne peut ni survivre au chapitre ni précéder l'eau. */
.lac-etiquettes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Le départ est pris (rideau en train de tomber) : plus une seule étiquette. Une étiquette
   qui resterait allumée sous un rideau qui se ferme ferait clignoter le nom du projet juste
   avant que sa page l'affiche en grand. */
.lac-etiquettes.is-partie .lac-etiquette { opacity: 0; }

.lac-etiquette {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  white-space: nowrap;
  /* Le régime typographique des `.chapter-label` (style.css, WP2) : Space Mono en petites
     capitales espacées — c'est LA police du site depuis le 2026-09-04 (le soir), la Martian
     Mono est partie. C'est la même voix que « Ce que nous avons livré » : le visiteur a déjà
     lu ces lettres-là plus haut dans le film. Le corps monte de 0,58 à 0,68 rem parce que
     la Space Mono a une hauteur d'œil plus basse et une chasse plus étroite : à corps égal,
     l'étiquette perdait un tiers de sa masse d'encre au-dessus d'une eau qui bouge. */
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--film-light, #e6dcc4);
  /* Une eau qui bouge sous des capitales de 9 px, c'est illisible une image sur deux. Le halo
     d'encre ne fait pas une plaque : il ne fait que rendre le contour du texte stable. Trois
     ombres et pas une : la plus serrée détache la lettre du haut-fond CLAIR (là où crème sur
     crème disparaît), la plus large la détache de la fosse. */
  text-shadow:
    0 0 1px rgba(4, 26, 28, 0.95),
    0 1px 2px rgba(4, 26, 28, 0.9),
    0 0 11px rgba(4, 26, 28, 0.85);
  opacity: 0;
  /* JAMAIS cliquable tant qu'elle n'est pas vue : une étiquette masquée parce qu'elle
     chevauche le guichet ne doit pas continuer d'intercepter les clics du formulaire. */
  pointer-events: none;
  /* Le suivi est écrit en `transform` à chaque image par porteurs.js ; seule l'opacité
     transitionne (une transition sur la transform ferait traîner l'étiquette derrière son
     poisson, exactement le défaut corrigé sur l'aperçu du III). */
  transition: opacity 220ms var(--ease, ease);
  will-change: transform, opacity;
}
/* 0,5 était le repos de QUATRE étiquettes ; à onze projets (2026-09-04, tard) le lac s'est
   éclairci par le haut-fond et la crème sur le turquoise passait sous le seuil de lecture.
   0,68 : encore en retrait de l'eau — une étiquette ne doit jamais rivaliser avec le guichet —
   mais lisible du premier coup d'œil. Le survol garde son plein. */
.lac-etiquette.is-vue {
  opacity: 0.68;
  pointer-events: auto;
}

/* AU DOIGT, L'ÉTIQUETTE EST LA CIBLE (2026-09-05). Sur un écran tactile il n'y a pas de
   survol : la découverte « ce poisson porte un projet » ne peut pas passer par le curseur,
   donc l'étiquette est allumée d'emblée — et c'est elle qu'on vise, pas le poisson, parce
   qu'elle est le seul élément du lac qui ne nage pas de travers. Elle faisait 17 px de haut.
   Le rembourrage la porte à 44 sans grossir une seule lettre : la zone de doigt déborde de
   l'encre, comme il se doit. Les marges négatives annulent le décalage que ce rembourrage
   ferait subir au point d'ancrage, sinon l'étiquette ne serait plus au-dessus de son
   poisson mais à côté. */
@media (pointer: coarse) {
  .lac-etiquette {
    padding: 14px 10px;
    margin: -14px -10px;
  }
  /* Un poisson visé au doigt reste allumé le temps du geste : sans cela, l'appui ferait
     retomber l'étiquette à 0,68 juste avant la navigation. */
  .lac-etiquette:active { opacity: 1; }
}
.lac-etiquette.is-survol { opacity: 1; }

.lac-etiquette-fleche {
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: transform 240ms var(--ease, ease), opacity 240ms var(--ease, ease);
}
.lac-etiquette.is-survol .lac-etiquette-fleche {
  opacity: 1;
  transform: translateX(0);
}

/* LE CURSEUR SE POSE SUR LA RACINE, et il n'y a pas d'autre endroit possible : `#lac` est en
   `pointer-events: none` (c'est la première discipline du module), donc il n'est jamais
   l'élément sous la souris et son `cursor` ne serait jamais consulté. porteurs.js bascule la
   classe quand un porteur passe sous le pointeur ; `body` est répété parce que style.css lui
   donne son propre curseur. */
html.lac-survol,
html.lac-survol body { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .lac-etiquette,
  .lac-etiquette-fleche { transition: none; }
}

/* LA LARGEUR DU GUICHET SUR TÉLÉPHONE EST CELLE DU BLOC, plus une fraction d'écran à part
   (iPhone 13, Lucas, 2026-09-05 : « problème de centrage »). `min(30rem, 92vw)` faisait
   359 px dans un bloc de 335 : le guichet débordait de 24 px à droite du bloc centré, donc
   du cadre. Deux mesures pour une même colonne, c'est une de trop. EN FIN DE FEUILLE et pas
   dans le bloc mobile du haut : à spécificité égale c'est l'ordre qui tranche, et la règle
   de base de `form.guichet` est écrite plus bas que ce bloc-là (leçon mesurée). */
@media (max-width: 760px) {
  /* Le bloc prend sa mesure lui-même : sans largeur posée, un bloc absolu se rétracte sur
     son titre (195 px mesurés) et le guichet à 100 % se rétracte avec lui. 86vw est la
     borne des paliers mobiles (style.css, `.is-palier`), reprise ici en largeur ferme. */
  .chapter-type:has(.guichet) { width: min(30rem, 86vw); }
  form.guichet {
    width: 100%;
    max-width: none;
  }
}