/* ══════════════════════════════════════════════════════════════
   tgl-web.css · The Garel Lab · les composants du web
   Source unique : le site n'invente rien, il assemble ces figures.
   Dépend de tgl.css (jetons de marque). Démontré dans /coulisses/lab/ds/.
   ══════════════════════════════════════════════════════════════ */

/* ── LA TOMBÉE DE LA NUIT : la navigation fond d'une page à l'autre.
   Une demi-seconde de crépuscule quand on entre au studio, l'aube au retour.
   Les navigateurs qui l'ignorent changent de page instantanément, rien ne casse. ── */
@view-transition { navigation: auto; }
/* La tombée de la nuit, en trois temps. Le jour s'éteint (0,7 s), puis un battement
   d'obscurité où ne reste qu'une braise d'émeraude au centre (0,3 s), puis l'autre
   monde s'allume doucement (0,85 s). Une porte rare mérite un seuil qu'on sent. */
::view-transition { background: #000 radial-gradient(50% 36% at 50% 55%, rgba(16,124,75,.30), transparent 72%) no-repeat; }
::view-transition-old(root) { animation: tgl-jour-eteint .7s ease-in both; }
::view-transition-new(root) { animation: tgl-monde-allume .85s ease-out .98s both; }
@keyframes tgl-jour-eteint {
  0%   { opacity: 1; filter: brightness(1); }
  72%  { opacity: 1; filter: brightness(0); }
  100% { opacity: 0; filter: brightness(0); }
}
@keyframes tgl-monde-allume {
  0%   { opacity: 0; filter: brightness(.3); }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── LE CHROME : cadre, navigation, titres, pied ── */

* { margin: 0; padding: 0; box-sizing: border-box; }
body, body.tgl { background: var(--tgl-blanc); padding: 14px; color: var(--tgl-blanc); font-family: var(--tgl-mono); font-size: 13px; line-height: 1.9; }
@media (max-width: 700px) { body, body.tgl { padding: 9px; } }
/* le cadre : marge de papier blanc autour de tout le site, signature des pages */
.cadre { background: var(--tgl-vert); min-height: calc(100vh - 28px); overflow-x: clip; position: relative; }
.page { max-width: var(--tgl-max); margin: 0 auto; padding: 0 5vw; }
nav.haut { display: flex; align-items: center; gap: 26px; padding: 26px 0; flex-wrap: wrap; }
nav.haut .marque { font-family: var(--tgl-serif); font-size: 19px; letter-spacing: 0.02em; color: inherit; text-decoration: none; margin-right: auto; }
nav.haut a.lien { color: inherit; text-decoration: none; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; padding: 6px 2px; }
nav.haut a.lien:hover, nav.haut a.lien.actif { opacity: 1; border-bottom: 1.5px solid currentColor; }
/* la braise : le studio visité laisse une lueur dans le menu, le temps de la session */
nav.haut a.lien.braise::after { content: ''; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: #39D98A; margin-left: 8px; vertical-align: middle;
  box-shadow: 0 0 9px rgba(57, 217, 138, .8); }
h1.titre { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(48px, 8.5vw, 128px); line-height: 1.0; margin: 14px 0 34px; }
h2.st { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(30px, 4vw, 56px); margin: 70px 0 22px; }
.etq { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.75; }
/* ── LA FACE DE LECTURE (03/09) : ce qui se lit en paragraphe passe en Plex Sans, plus grand,
   plus serré d'interligne. La mono garde tout ce qui s'étiquette : nav, eyebrows, formules, folios. ── */
p.corps { font-family: var(--tgl-sans); max-width: 62ch; margin-bottom: 22px; font-size: 15.5px; line-height: 1.7; }
p.serif { font-family: var(--tgl-serif); font-size: 20px; line-height: 1.65; max-width: 46ch; margin: 34px 0; }
footer { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); margin-top: 90px; padding: 40px 0 56px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.colophon { font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; line-height: 2.1; opacity: 0.85; }
.filet-plein { border: 0; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); margin: 60px 0; }
.planche { margin: 80px 0; }
.planche img { width: 100%; display: block; }
.visavis { display: grid; grid-template-columns: minmax(300px, 0.95fr) 1.05fr; gap: 30px 70px; align-items: center; margin: 26px 0 10px; }
@media (max-width: 900px) { .visavis { grid-template-columns: 1fr; } }
.visavis figure { margin: 0; }
.visavis figure img { width: 100%; display: block; }
.visavis figcaption { font-family: var(--tgl-mono); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.8; margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.rvl { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
.rvl.vu { opacity: 1; transform: none; }
.colophon-groupe { display: flex; align-items: center; gap: 20px; }
.orbe-pied { width: 58px; flex: none; }
@media (prefers-reduced-motion: reduce) { .orbe-pied { display: none; } }
.tableau { text-align: center; padding: 11vh 0; }
.tableau .formule { font-family: var(--tgl-mono); font-size: clamp(22px, 3.8vw, 56px); letter-spacing: 0.04em; line-height: 1.35; margin-top: 26px; }
.tableau .traduction { margin-top: 22px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; }
.curseur { animation: clign 1.1s steps(1) infinite; }
@keyframes clign { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .curseur { display: none; } }
nav.haut a.lien.langue { margin-left: auto; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 99px; padding: 5px 13px; }
nav.haut a.lien.langue:hover { border-color: currentColor; }

/* ── LES TITRES ÉQUILIBRÉS (04/09) : un titre sur deux lignes se coupe au milieu, jamais sur un mot orphelin. ── */
h1.titre, h2.st, .rangee h3, .terrain h2, .maniere h3, .bulletin h2, .derniers b, .citation p, .essai h1, .essai p.serif, .couverture h1, .perdu h1, .bande a.geant, .ecole span em { text-wrap: balance; }

/* ── LES CHIFFRES ROIS (04/09) : la ligne des preuves porte des nombres vrais, lus en base le jour
   du déploiement, jamais des adjectifs. Le nombre en Young Serif, l'étiquette en mono. ── */
.preuves.rois { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; padding: 26px 0; align-items: start; }
@media (max-width: 900px) { .preuves.rois { grid-template-columns: repeat(2, 1fr); } }
.preuves.rois span { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.preuves.rois b { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: 0; text-transform: none; }
@media (max-width: 640px) { .preuves.rois { gap: 16px 24px; } .preuves.rois b { font-size: 28px; } }

/* ── LA HOME : héros, preuves, rangées, marine, citation, tableau, bande ── */
/* ── héros plein cadre, façon planche ── */
.hero { min-height: calc(100vh - 28px); display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden; padding-top: 4vh; }
.hero h1 { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(46px, 6.8vw, 122px); line-height: 1.0; margin: 20px 0 24px; position: relative; white-space: nowrap; }
@media (max-width: 700px) { .hero h1 { white-space: normal; } }
.hero .sous { max-width: 62ch; font-size: 13.5px; line-height: 2.1; position: relative; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; }
.hero .actions { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; }
.hero .chouette { position: relative; margin-top: 3vh; height: min(56vh, 40vw); max-width: 94vw; object-fit: contain; margin-bottom: -5vh; }
.preuves { border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding: 20px 0; display: flex; gap: 12px 36px; flex-wrap: wrap; justify-content: center; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; }
/* ── la méthode : mots géants, aucune boîte ── */
.methode { padding: 40px 0 20px; }
.rangee { display: grid; grid-template-columns: minmax(280px, 1.2fr) 1fr; gap: 20px 60px; align-items: end; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding: 54px 0; }
@media (max-width: 800px) { .rangee { grid-template-columns: 1fr; } }
.rangee .etq { margin-bottom: 14px; }
.rangee h3 { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(52px, 8vw, 124px); line-height: 0.95; }
.rangee p { font-family: var(--tgl-sans); font-size: 15px; line-height: 1.65; max-width: 48ch; padding-bottom: 8px; }
/* ── bande blanche pleine largeur, liens géants ── */
.planche { margin: 90px 0 0; }
.planche img { width: 100%; display: block; }
/* ── la marine : le navire tangue dans la houle (sandwich de profondeur) ── */
.marine { position: relative; overflow: hidden; }
.marine .mer { margin-top: 11%; animation: respiration 7s ease-in-out infinite; }
.marine .navire-flot { position: absolute; left: 50%; bottom: 30%; width: 44%; transform-origin: 50% 92%; animation: tangage 9s ease-in-out infinite; }
@keyframes tangage {
  0%, 100% { transform: translateX(-50%) rotate(-1.7deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(1.9deg) translateY(10px); }
}
.marine .mer-avant { position: absolute; left: 0; right: 0; bottom: 0; clip-path: inset(72% 0 0 0); animation: respiration-avant 7s ease-in-out infinite; }
@keyframes respiration { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes respiration-avant { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .marine .navire-flot, .marine .mer, .marine .mer-avant { animation: none; } .marine .navire-flot { transform: translateX(-50%); } }
.citation { padding: 13vh 0 12vh; text-align: center; }
.citation p { font-family: var(--tgl-serif); font-size: clamp(28px, 3.4vw, 52px); line-height: 1.4; max-width: 30ch; margin: 0 auto 30px; }
.citation a { color: inherit; text-decoration: none; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; border-bottom: 1.5px solid currentColor; padding-bottom: 4px; }
.bande { width: 100vw; margin-left: calc(50% - 50vw); background: var(--tgl-blanc); color: var(--tgl-vert); padding: 12vh 5vw; }
.bande .in { max-width: var(--tgl-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 70px; }
@media (max-width: 900px) { .bande .in { grid-template-columns: 1fr; } .bande a.col2 { border-left: 0; padding-left: 0; } }
.bande a.col2 { border-left: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); padding-left: 70px; }
.bande a.geant { display: block; align-self: end; font-family: var(--tgl-serif); font-size: clamp(34px, 4.6vw, 92px); line-height: 1.08; color: inherit; text-decoration: none; white-space: nowrap; }
.bande a.geant span { font-family: var(--tgl-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; display: block; margin-bottom: 8px; opacity: 0.7; }
.bande a.geant:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 10px; }
.bande .sep { border-top: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); margin: 44px 0; }

/* ── LA SCIENCE : les écoles, la pesée ── */
.ecole { display: grid; grid-template-columns: minmax(170px, 0.35fr) 1fr; gap: 16px 50px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
@media (max-width: 700px) { .ecole { grid-template-columns: 1fr; gap: 4px; } }
.ecole b { font-family: var(--tgl-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.75; }
.ecole span { font-family: var(--tgl-sans); font-size: 15px; line-height: 1.65; max-width: 66ch; }
.ecole span em { font-family: var(--tgl-serif); font-style: normal; font-size: clamp(19px, 1.9vw, 26px); display: block; margin-bottom: 4px; }
.formule { font-family: var(--tgl-mono); font-size: 14.5px; letter-spacing: 0.05em; margin-top: 18px; opacity: 0.95; }
.curseur { animation: clign 1.1s steps(1) infinite; }
@keyframes clign { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .curseur { display: none; } }
.pesee { position: relative; aspect-ratio: 1 / 0.92; }
.pesee .socle { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); height: 80%; width: auto; }
.pesee .fleau { position: absolute; top: 10%; left: 50%; width: 94%; transform: translateX(-50%) rotate(-2.4deg); transform-origin: 50.2% 14%; animation: pesee 7s ease-in-out infinite; }
@keyframes pesee { 0%, 100% { transform: translateX(-50%) rotate(-2.4deg); } 50% { transform: translateX(-50%) rotate(2.4deg); } }
@media (prefers-reduced-motion: reduce) { .pesee .fleau { animation: none; transform: translateX(-50%); } }

/* ══ LES PLANCHES ANIMÉES ══════════════════════════════════════════
   Trois gravures qui bougent, montées sur des calques séparés.
   Le mouvement porte le sens : le plomb qui se pose, la profondeur
   qui se creuse. Jamais de mouvement décoratif.
   Assets : /assets/gravures/
   ═══════════════════════════════════════════════════════════════ */

/* ── LA VISÉE : la planche reste entière, seul le trait de visée s'anime.
   Deux images générées séparément n'ont ni la même échelle ni la même
   perspective : mieux vaut un dessin cohérent qu'un montage qui bouge. ── */
.visee { position: relative; }
.visee > img { display: block; width: 100%; }
.visee .trait { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.visee .rai { stroke: currentColor; stroke-width: .45; fill: none; stroke-linecap: round;
  stroke-dasharray: 30; stroke-dashoffset: 30; animation: viser 11s ease-in-out infinite; }
.visee .mire { fill: none; stroke: currentColor; stroke-width: .45; opacity: 0; animation: mire 11s ease-in-out infinite; }
@keyframes viser {
  0%        { stroke-dashoffset: 30; opacity: 0; }
  8%        { opacity: .95; }
  34%, 66%  { stroke-dashoffset: 0; opacity: .95; }
  82%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes mire {
  0%, 32%   { opacity: 0; transform: scale(.4); transform-origin: 10px 37px; }
  42%, 66%  { opacity: .95; transform: scale(1); transform-origin: 10px 37px; }
  82%, 100% { opacity: 0; transform: scale(1); transform-origin: 10px 37px; }
}
@media (prefers-reduced-motion: reduce) {
  .visee .rai { animation: none; stroke-dashoffset: 0; opacity: .95; }
  .visee .mire { animation: none; opacity: .95; transform: none; }
}

/* ── Rien ne tourne hors du champ de vision. La pause n'existe que si le veilleur
   est là : site.js pose html.au-regard puis .anime a l'entree a l'ecran. Une page
   qui ne charge pas le script garde ses animations libres, jamais figees. ── */
html.au-regard .visee .rai, html.au-regard .visee .mire,
html.au-regard .marine .mer, html.au-regard .marine .navire-flot, html.au-regard .marine .mer-avant,
html.au-regard .rouages img, html.au-regard .pesee .fleau,
html.au-regard .trace, html.au-regard .cible { animation-play-state: paused; }
html.au-regard .visee.anime .rai, html.au-regard .visee.anime .mire,
html.au-regard .marine.anime .mer, html.au-regard .marine.anime .navire-flot, html.au-regard .marine.anime .mer-avant,
html.au-regard .rouages.anime img, html.au-regard .pesee.anime .fleau,
html.au-regard .terrain.anime .trace, html.au-regard .terrain.anime .cible { animation-play-state: running; }

/* ── LA COLONNADE : on entre dans le bâtiment. Le premier plan glisse plus vite. ── */
.colonnade { position: relative; overflow: hidden; }
.colonnade img { display: block; width: 100%; }
.colonnade .fond { position: relative; }
.colonnade .avant { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  .colonnade .fond  { animation: parallaxe-fond  linear both; animation-timeline: view(); }
  .colonnade .avant { animation: parallaxe-avant linear both; animation-timeline: view(); }
  @keyframes parallaxe-fond  { from { transform: scale(1.06) translateY(-2%); } to { transform: scale(1.06) translateY(2%); } }
  @keyframes parallaxe-avant { from { transform: scale(1.14) translateY(-6%); } to { transform: scale(1.14) translateY(6%); } }
}
@media (prefers-reduced-motion: reduce) {
  .colonnade .fond, .colonnade .avant { animation: none; transform: none; }
}

/* ── LA CARTE : une texture qui se tait sous le texte, jamais un motif qui parle. ── */
.sur-carte { position: relative; isolation: isolate; }
.sur-carte::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/gravures/fond-carte-marine.webp") center / cover no-repeat;
  opacity: .34;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 100%); }

/* ── LE SCEAU : il se pose comme un tampon, une seule fois, à l'arrivée. ── */
.sceau-pose { animation: sceau-pose 620ms cubic-bezier(.2,1.4,.4,1) both; }
@keyframes sceau-pose {
  0%   { opacity: 0; transform: scale(1.55) rotate(-7deg); }
  55%  { opacity: 1; transform: scale(.94) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .sceau-pose { animation: none; } }

/* ── LES TERRAINS : le terrain, la route tracée ── */
.terrain { display: grid; grid-template-columns: minmax(300px, 1.2fr) 1fr; gap: 18px 60px; align-items: end; padding: 50px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
@media (max-width: 800px) { .terrain { grid-template-columns: 1fr; } }
.terrain .tgl-ic { width: 30px; height: 30px; margin-bottom: 14px; }
.terrain h2 { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.02; }
.terrain p { font-family: var(--tgl-sans); font-size: 15px; line-height: 1.65; max-width: 48ch; padding-bottom: 6px; }
.trace { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: tracer 11s ease-in-out infinite; }
@keyframes tracer { 0% { stroke-dashoffset: 100; opacity: 1; } 45% { stroke-dashoffset: 0; opacity: 1; } 82% { stroke-dashoffset: 0; opacity: 1; } 94% { opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
.cible { opacity: 0; animation: cible 11s ease-in-out infinite; }
@keyframes cible { 0%, 40% { opacity: 0; } 50%, 82% { opacity: 1; } 94%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trace, .cible { animation: none; stroke-dashoffset: 0; opacity: 1; } }

/* ── LA MAISON : la manière, les refus ── */
.maniere { display: grid; grid-template-columns: minmax(260px, 0.8fr) 1fr; gap: 18px 60px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
@media (max-width: 800px) { .maniere { grid-template-columns: 1fr; gap: 6px; } }
.maniere h3 { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(24px, 3vw, 40px); line-height: 1.05; }
.maniere p { font-family: var(--tgl-sans); font-size: 15px; line-height: 1.65; max-width: 58ch; }
.refus span { display: inline-block; border: 1.5px dashed currentColor; border-radius: 99px; padding: 8px 17px; margin: 0 9px 11px 0; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

/* ── LES BULLETINS : le bulletin, les rouages ── */
.bulletin { display: grid; grid-template-columns: 130px 1fr; gap: 20px 50px; align-items: baseline; padding: 40px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
@media (max-width: 800px) { .bulletin { grid-template-columns: 1fr; gap: 8px; } }
.bulletin .num { font-family: var(--tgl-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.75; }
.bulletin h2 { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.08; margin-bottom: 14px; }
.bulletin p { font-family: var(--tgl-sans); font-size: 15px; line-height: 1.65; max-width: 62ch; }
.bulletin .lire { display: inline-block; margin-top: 14px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: inherit; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 4px; opacity: 0.85; }
.attente { opacity: 0.6; }
.rouages { position: relative; margin: 46px 0 10px; height: 210px; }
.rouages img { position: absolute; }
.rouages .grande { left: 0; top: 0; height: 190px; animation: tourne 26s linear infinite; }
.rouages .petite { left: 152px; top: 74px; height: 116px; animation: tourne 26s linear infinite reverse; }
@keyframes tourne { to { transform: rotate(360deg); } }
.rouages figcaption { position: absolute; left: 300px; bottom: 22px; font-family: var(--tgl-mono); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.8; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); min-width: 180px; }
@media (max-width: 700px) { .rouages { height: 150px; } .rouages .grande { height: 140px; } .rouages .petite { left: 112px; top: 56px; height: 86px; } .rouages figcaption { left: 0; bottom: -14px; } }
@media (prefers-reduced-motion: reduce) { .rouages img { animation: none; } }

/* ── LES ESSAIS : couverture, lettrine, clôture ── */
.essai { padding: 9vh 0 12vh; }
.en-tete { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.8; margin-bottom: 30px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.en-tete a { color: inherit; }
.essai h1 { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(48px, 8.5vw, 128px); line-height: 1.0; margin-bottom: 8vh; }
.essai p { font-family: var(--tgl-sans); font-size: 17px; line-height: 1.75; letter-spacing: 0; margin-bottom: 28px; max-width: 64ch; }
.essai p.serif { font-family: var(--tgl-serif); font-size: clamp(26px, 3.6vw, 48px); line-height: 1.35; margin: 8vh 0; max-width: 26ch; }
.filet { border: 0; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); margin: 60px 0; }
.cloture { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 60px; }
.couverture { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.couverture h1 { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(48px, 8.5vw, 128px); line-height: 1.0; margin: 0 0 30px; }
.couverture .mention { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.75; }
.lettrine { float: left; font-family: var(--tgl-serif); font-size: 5.1em; line-height: 0.82; margin: 0.06em 0.11em 0 0; }
.essai p.premier { overflow: hidden; }
@media (max-width: 600px) { .lettrine { font-size: 3.6em; } }

/* ── LA PAGE D'ERREUR ── */
.perdu { min-height: calc(100vh - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8vh 0 6vh; }
.perdu .code { font-family: var(--tgl-mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.75; }
.perdu h1 { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(40px, 6.4vw, 96px); line-height: 1.02; margin: 22px 0 26px; max-width: 18ch; }
.perdu p { font-family: var(--tgl-sans); font-size: 15px; line-height: 1.65; max-width: 50ch; margin-bottom: 34px; }
.perdu img { height: min(34vh, 260px); margin-bottom: 30px; }
/* la bascule de langue n'est pas une seconde chance de trouver la page : elle passe au second rang */
.langue-404 { margin-top: 26px; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.8; }
.langue-404 a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.langue-404 a:hover { opacity: 1; border-bottom-width: 2px; }
.perdu .liens { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }


/* ── LA HOME : la bande des terrains, les derniers bulletins ── */
.terrains-liste { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 20px; }
.terrains-liste span { border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 99px; padding: 8px 16px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.derniers { display: grid; gap: 0; }
.derniers a { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 12px 40px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); color: inherit; text-decoration: none; }
.derniers a:first-child { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.derniers a:hover b { text-decoration: underline; text-underline-offset: 6px; }
.derniers .num { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.7; }
.derniers b { font-family: var(--tgl-serif); font-weight: 400; font-size: clamp(19px, 2.2vw, 30px); line-height: 1.15; }
@media (max-width: 800px) { .derniers a { grid-template-columns: 1fr; gap: 6px; } }

/* ══ LE TÉLÉPHONE ══════════════════════════════════════════════
   La règle du lot 1 : rien ne déborde, tout se touche au pouce,
   les liens géants ont le droit de plier. ══ */
@media (max-width: 640px) {
  nav.haut { gap: 10px 16px; padding: 20px 0 26px; }
  nav.haut .marque { font-size: 17px; }
  nav.haut a.lien { font-size: 9px; letter-spacing: 0.18em; padding: 9px 2px; }
  nav.haut a.lien.langue { padding: 5px 11px; }
  h1.titre { font-size: clamp(40px, 12.5vw, 64px); margin: 10px 0 24px; }
  .hero { min-height: auto; padding: 3vh 0 0; }
  .hero .actions { gap: 10px; }
  .preuves { font-size: 9px; gap: 5px 18px; padding: 13px 0; line-height: 1.9; }
  .rangee { padding: 38px 0; }
  .rangee h3 { font-size: clamp(44px, 13vw, 64px); }
  p.serif { font-size: 17px; margin: 26px 0; }
  .citation { padding: 9vh 0 8vh; }
  .tableau .formule { font-size: clamp(19px, 6vw, 30px); }
  .bande { padding: 9vh 5vw; }
  .bande a.geant { white-space: normal; line-height: 1.15; font-size: clamp(30px, 9.5vw, 48px); }
  .bande .sep { margin: 30px 0; }
  footer { padding: 30px 0 42px; gap: 16px; }
  .visee .instrument { width: 40%; }
}

/* ── Le menu du téléphone : la marque et la langue tiennent la première ligne,
   les liens font leur rang en dessous, alignés, sans casse au milieu de la liste. ── */
@media (max-width: 640px) {
  nav.haut { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 18px 0 24px; }
  nav.haut .marque { order: 1; flex: 1 1 auto; margin-right: 0; }
  nav.haut a.lien.langue { order: 2; margin-left: 0; }
  nav.haut a.lien:not(.langue) { order: 3; }
  /* la chouette se pose sur la ligne des preuves au lieu de flotter au-dessus */
  .hero .chouette { height: auto; width: min(76vw, 330px); margin: 3vh auto -1px; }
}
/* la bande en colonne : le second lien perd son filet et son retrait.
   La règle existait déjà mais le style de base, écrit plus bas dans la feuille,
   la battait à la cascade. Répétée ici, en fin de feuille, elle gagne. */
@media (max-width: 900px) { .bande a.col2 { border-left: 0; padding-left: 0; } }

/* ── Le menu plié : au téléphone, les liens se rangent derrière un bouton.
   Seulement si le script est là (html.menu-pliable) : sans lui, les rangs restent. ── */
.burger { display: none; background: none; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 99px; color: inherit; font-family: var(--tgl-mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 7px 13px; cursor: pointer; }
@media (max-width: 640px) {
  html.menu-pliable .burger { display: inline-flex; order: 2; }
  nav.haut a.lien.langue { order: 3; }
  html.menu-pliable nav.haut a.lien:not(.langue) { display: none; }
  html.menu-pliable nav.haut.ouvert a.lien:not(.langue) { display: block; width: 100%; font-size: 11px;
    letter-spacing: 0.22em; padding: 14px 0; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
}

/* ══ LA PORTE ══════════════════════════════════════════════════
   L'unique exception au non-mélange des régimes, et elle est nommée.
   Un seuil n'est pas un mélange : une seule bande par page au maximum,
   minimale, sans contenu, qui ne sert qu'à entrer au studio.
   La nuit tombe en bas de la page, là où le clic déclenche le crépuscule. ══ */
.porte { position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw);
  background: #000; padding: 13vh 5vw 14vh; text-align: center; }
.porte::before { content: ''; position: absolute; left: 50%; bottom: -34%; width: 72%; height: 82%;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(16, 124, 75, 0.42), transparent 72%);
  animation: couve 6s ease-in-out infinite; }
@keyframes couve { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .porte::before { animation: none; } }
/* le heurtoir : l'emblème frappé sur la porte, la seule image qu'elle admet */
.porte .heurtoir { position: relative; width: min(96px, 22vw); margin: 0 auto 18px; display: block;
  animation: heurtoir 6s ease-in-out infinite; }
/* la médaille respire avec la braise : même souffle de six secondes */
@keyframes heurtoir {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); filter: drop-shadow(0 0 16px rgba(57, 217, 138, 0.25)); }
  50%      { transform: translateY(-8px) rotate(1.2deg); filter: drop-shadow(0 10px 34px rgba(57, 217, 138, 0.55)); }
}
@media (prefers-reduced-motion: reduce) { .porte .heurtoir { animation: none;
  filter: drop-shadow(0 0 22px rgba(57, 217, 138, 0.35)); } }
.porte .etq { position: relative; color: #39D98A; opacity: 1; }
.porte a.geant-nuit { position: relative; display: inline-block; margin-top: 14px;
  font-family: var(--tgl-serif); font-size: clamp(30px, 4.6vw, 84px); line-height: 1.1;
  color: #F4F6F5; text-decoration: none; }
.porte a.geant-nuit:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 10px; }