/* « Le tableau des départs » : le panneau d'affichage d'un aéroport, un moment de vie par ligne.
 *
 * Une seule mise en page, quatre occasions (`[data-style]`) : Voyage (palettes noir et jaune), Retraite (diodes
 * orange), Mariage (papier crème et filets dorés), Naissance (écran bleu doux). Ce qui change d'une occasion à
 * l'autre — le mot du haut, la phrase, les statuts — vient de la page ; ici ne change que l'allure.
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en tête, par
 * occasion, et nulle part ailleurs. `[data-style]` ne nomme pas `.td` exprès, pour que les échantillons du
 * formulaire se colorent avec les mêmes variables.
 *
 * --d-fond : ce qui entoure le tableau ; --d-tableau : le fond du tableau ; --d-entete / --d-entete-texte : le
 * bandeau du haut ; --d-ligne : le fond d'une ligne ; --d-vide : une ligne qu'on n'a pas écrite ; --d-texte : la
 * destination ; --d-doux : la date et le vol ; --d-accent : le code ; --d-code-fond : la tuile du code ;
 * --d-statut / --d-statut-fond : le statut ; --d-filet : les filets ; --d-halo : la lueur des diodes.
 *
 * **Chaque paire texte/fond est mesurée** (`tests/departs.test.js`) : texte ≥ 7, date et vol ≥ 4,5.
 */
@font-face {
  font-family: "DotGothic16";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dotgothic16-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DotGothic16";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dotgothic16-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[data-style="Voyage"] {
  --d-fond: #0a0a0a; --d-tableau: #121212; --d-entete: #f7c600; --d-entete-texte: #0d0d0d; --d-ligne: #1d1d1d; --d-vide: #161616;
  --d-texte: #f7c600; --d-doux: #cfcfcf; --d-accent: #0d0d0d; --d-code-fond: #f7c600; --d-statut: #f2f2f2; --d-statut-fond: #3a3a3a;
  --d-filet: #050505; --d-halo: transparent;
}
[data-style="Retraite"] {
  --d-fond: #070707; --d-tableau: #0b0b0b; --d-entete: #0b0b0b; --d-entete-texte: #ff9a1f; --d-ligne: #101010; --d-vide: #0d0d0d;
  --d-texte: #ff9a1f; --d-doux: #e6b46a; --d-accent: #ff9a1f; --d-code-fond: #1a1208; --d-statut: #ffd28a; --d-statut-fond: #261806;
  --d-filet: #3a2408; --d-halo: rgba(255, 154, 31, .55);
}
[data-style="Mariage"] {
  --d-fond: #f4ecdc; --d-tableau: #f4ecdc; --d-entete: #f4ecdc; --d-entete-texte: #2a2118; --d-ligne: #faf5ea; --d-vide: #f4ecdc;
  --d-texte: #2a2118; --d-doux: #6b5530; --d-accent: #7a5a1c; --d-code-fond: #faf5ea; --d-statut: #6b4a12; --d-statut-fond: #efe1c2;
  --d-filet: #b8964f; --d-halo: transparent;
}
[data-style="Naissance"] {
  --d-fond: #dce8f5; --d-tableau: #dce8f5; --d-entete: #1c3557; --d-entete-texte: #f3f8fe; --d-ligne: #f4f8fd; --d-vide: #e9f0f9;
  --d-texte: #1c3557; --d-doux: #3d5a7e; --d-accent: #f3f8fe; --d-code-fond: #1c3557; --d-statut: #1c3557; --d-statut-fond: #c6dcf2;
  --d-filet: #b3cce6; --d-halo: transparent;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw`. Le tableau prend toute la hauteur ; les sept lignes se la partagent, plafonnées pour qu'un
 * A4 plus haut ne les étire pas en bandes. **Chaque ligne a deux étages** : la date, le vol et le statut en petit,
 * la destination et son code en grand — une affiche portrait n'a pas la largeur d'un panneau d'aéroport, et sur
 * une seule ligne la destination tomberait à la taille d'une note de bas de page. `--td-t` est la taille du texte,
 * 1 ou moins : le serveur l'estime, le script la reprend au pixel. */
.td {
  --td-t: 1; --td-f: 1;
  display: flex; padding: 4cqw; background: var(--d-fond); color: var(--d-texte);
  font-family: "Roboto Condensed", system-ui, sans-serif; line-height: 1.1;
}
.td :where(p, ol, h2) { margin: 0; padding: 0; }
.td__tableau { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--d-tableau); }

.td__entete {
  flex: none; position: relative; display: grid; grid-template-columns: 1fr; justify-items: start; row-gap: .6cqw;
  background: var(--d-entete); color: var(--d-entete-texte); padding: 3.2cqw 4cqw 3cqw;
}
.td__avion { position: absolute; right: 4cqw; top: 3.2cqw; width: 9cqw; height: 9cqw; fill: currentColor; transform: rotate(90deg); }
.td__titre { font-weight: 700; font-size: 9cqw; line-height: .95; letter-spacing: .04em; text-transform: uppercase; max-width: calc(100% - 11cqw); }
.td__nom { font-weight: 700; font-size: calc(4.4cqw * var(--td-t)); line-height: 1.15; text-transform: uppercase; letter-spacing: .06em; max-width: 100%; overflow-wrap: anywhere; }
.td__sous { font-size: calc(2.7cqw * var(--td-t)); line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; opacity: .92; max-width: 100%; }

.td__lignes { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5cqw; margin-top: .5cqw; list-style: none; }
.td__ligne {
  flex: 1 1 0; max-height: 15cqw; min-height: 0; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "date vol . statut" "dest dest dest code"; align-content: center; column-gap: 2.4cqw; row-gap: .8cqw;
  background: var(--d-ligne); padding: 1.2cqw 3cqw;
}
.td__ligne--vide { background: var(--d-vide); }
.td__c { display: block; white-space: nowrap; min-width: 0; line-height: 1.25; }
.td__date { grid-area: date; font-size: calc(2.5cqw * var(--td-t) * var(--td-f)); color: var(--d-doux); letter-spacing: .08em; text-transform: uppercase; }
.td__vol { grid-area: vol; font-size: calc(2.5cqw * var(--td-t) * var(--td-f)); color: var(--d-doux); letter-spacing: .1em; text-transform: uppercase; }
.td__statut {
  grid-area: statut; justify-self: end; font-size: calc(2.4cqw * var(--td-t) * var(--td-f)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--d-statut); background: var(--d-statut-fond); padding: .3cqw 1.2cqw; max-width: 100%; overflow: hidden;
}
.td__statut:empty { display: none; }
.td__dest {
  grid-area: dest; font-weight: 700; font-size: calc(5.2cqw * var(--td-t) * var(--td-f)); line-height: 1.2; letter-spacing: .04em;
  text-transform: uppercase; color: var(--d-texte); overflow: hidden;
}
.td__code {
  grid-area: code; align-self: end; font-weight: 700; font-size: calc(5.2cqw * var(--td-t) * var(--td-f)); line-height: 1.2; letter-spacing: .1em;
  text-transform: uppercase; color: var(--d-accent); background: var(--d-code-fond); padding: 0 1.2cqw; min-width: 11cqw; text-align: center;
}
.td__code:empty { display: none; }
.td__ligne--vide .td__c { visibility: hidden; }

.td__pied {
  flex: none; margin-top: 2cqw; text-align: center; font-size: calc(2.9cqw * var(--td-t)); letter-spacing: .12em; text-transform: uppercase;
  color: var(--d-doux); overflow-wrap: anywhere;
}
.td__pied[hidden] { display: none; }
.td .affiche-exemple { opacity: 1; }
.td__pied.affiche-exemple { opacity: .6; }

/* Voyage : le tableau à palettes. Chaque case est une palette (un trait sombre à mi-hauteur, comme une
   charnière), jaune sur noir, et le bandeau du haut est jaune. */
.td[data-style="Voyage"] .td__dest, .td[data-style="Voyage"] .td__code { position: relative; }
/* La destination ne prend que la largeur de son texte (`justify-self`), pour que la charnière s'arrête avec lui. */
.td[data-style="Voyage"] .td__dest { justify-self: start; max-width: 100%; }
.td[data-style="Voyage"] .td__dest::after, .td[data-style="Voyage"] .td__code::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .22cqw; background: var(--d-filet); opacity: .85; pointer-events: none;
}
.td[data-style="Voyage"] .td__code { border-radius: .6cqw; }
.td[data-style="Voyage"] .td__statut { border-radius: .6cqw; }

/* Retraite : des diodes. DotGothic16 est plus large que la condensée, `--td-f` la ramène ; la lueur est un
   `text-shadow`, donc elle s'imprime — aucun filtre, tout est dégradé. */
.td[data-style="Retraite"] { --td-f: .88; font-family: "DotGothic16", "Roboto Condensed", monospace; }
/* DotGothic16 et Cormorant ont une boîte de glyphes plus haute que leur interligne : sans cet air (`.td__c`), la cellule rogne deux pixels par le bas, proportionnellement à la taille — rétrécir n'y change rien — et l'éditeur pose `data-deborde`. DotGothic16 en demande un peu plus. */
.td[data-style="Retraite"] .td__c { line-height: 1.3; }
.td[data-style="Retraite"] .td__entete { border-bottom: .5cqw solid var(--d-texte); padding-bottom: 2.6cqw; }
.td[data-style="Retraite"] .td__titre { font-weight: 400; font-size: 7.6cqw; line-height: 1; }
.td[data-style="Retraite"] .td__nom, .td[data-style="Retraite"] .td__dest, .td[data-style="Retraite"] .td__code,
.td[data-style="Retraite"] .td__titre { font-weight: 400; text-shadow: 0 0 1.6cqw var(--d-halo); }
.td[data-style="Retraite"] .td__ligne { border-bottom: .3cqw dotted var(--d-filet); background: transparent; }
.td[data-style="Retraite"] .td__code { border: .35cqw solid currentColor; }
.td[data-style="Retraite"] .td__statut { border: .3cqw solid var(--d-filet); }

/* Mariage : un carton d'invitation. Cormorant, filets dorés, aucun aplat. */
.td[data-style="Mariage"] { --td-f: 1.06; font-family: "Cormorant Garamond", Georgia, serif; font-variant-numeric: lining-nums; }
.td[data-style="Mariage"] .td__tableau { border: .35cqw solid var(--d-filet); outline: .35cqw solid var(--d-filet); outline-offset: -1.5cqw; padding: 1.5cqw; }
.td[data-style="Mariage"] .td__entete { text-align: center; justify-items: center; border-bottom: .3cqw solid var(--d-filet); padding: 3cqw 4cqw 2.4cqw; }
.td[data-style="Mariage"] .td__avion { position: static; width: 6cqw; height: 6cqw; color: var(--d-accent); transform: rotate(90deg); }
.td[data-style="Mariage"] .td__titre { font-style: italic; font-weight: 600; font-size: 9.6cqw; text-transform: none; letter-spacing: 0; max-width: 100%; }
.td[data-style="Mariage"] .td__nom { color: var(--d-accent); font-weight: 600; letter-spacing: .16em; }
.td[data-style="Mariage"] .td__ligne { background: transparent; border-bottom: .2cqw solid var(--d-filet); }
.td[data-style="Mariage"] .td__dest { font-weight: 600; letter-spacing: .06em; }
.td[data-style="Mariage"] .td__code { background: transparent; border: .3cqw solid var(--d-filet); }
.td[data-style="Mariage"] .td__statut { background: transparent; font-style: italic; font-weight: 600; text-transform: none; letter-spacing: .02em; padding-right: 0; font-size: calc(3cqw * var(--td-t)); }
.td[data-style="Mariage"] .td__date, .td[data-style="Mariage"] .td__vol { font-weight: 600; }

/* Naissance : un écran doux, des cartes arrondies. Ici, des angles ronds sont la bonne note. */
.td[data-style="Naissance"] { --td-f: .96; font-family: "Montserrat", "Roboto Condensed", system-ui, sans-serif; }
.td[data-style="Naissance"] .td__tableau { border-radius: 3cqw; overflow: hidden; }
.td[data-style="Naissance"] .td__entete { border-radius: 3cqw; margin-bottom: .6cqw; }
.td[data-style="Naissance"] .td__titre { font-weight: 800; font-size: 8cqw; letter-spacing: .02em; }
.td[data-style="Naissance"] .td__nom, .td[data-style="Naissance"] .td__dest, .td[data-style="Naissance"] .td__code { font-weight: 700; }
.td[data-style="Naissance"] .td__ligne { border-radius: 2cqw; }
.td[data-style="Naissance"] .td__code { border-radius: 1.4cqw; }
.td[data-style="Naissance"] .td__statut { border-radius: 99cqw; }

/* ── Le formulaire ── */
.td-lignes { display: grid; gap: 1.2rem; margin-bottom: 1.6rem; }
.td-lignes__titre { font-weight: 700; font-size: 1.6rem; margin: 0; }
.td-ligne { padding: 0; border: 0; margin: 0; min-width: 0; display: grid; gap: .8rem; }
.td-ligne legend { font-weight: 700; padding: 0; margin-bottom: .6rem; }
.td-ligne[hidden] { display: none; }
.td-ligne__rang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .8rem; align-items: end; }
.td-ligne__champ { min-width: 0; }
.td-ligne__champ label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.td-ligne__champ input { width: 100%; }
.td-ligne__champ--code input { text-transform: uppercase; letter-spacing: .1em; }
.td-ligne__champ--statut { grid-column: 2; }
.td-aero { display: grid; gap: .6rem; }
.td-aero[hidden], .td-idees[hidden], .td-plus[hidden] { display: none; }
.td-aero__bouton { justify-self: start; min-height: 4.4rem; }
.td-aero__liste { display: flex; flex-wrap: wrap; gap: .6rem; }
.td-aero__liste:empty { display: none; }
.td-aero__liste button, .td-idees button {
  min-height: 4.4rem; padding: .4rem 1.2rem; border: .1rem solid currentColor; border-radius: 99rem; background: transparent;
  font: inherit; font-size: 1.3rem; cursor: pointer; text-align: left; max-width: 100%;
}
.td-aero__retour { margin: 0; font-size: 1.3rem; min-height: 0; }
.td-aero__retour:empty { display: none; }
.td-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 .6rem; align-items: center; }
.td-idees__titre { width: 100%; margin: 0; font-size: 1.3rem; font-weight: 600; }
.td-plus { justify-self: start; }
.td-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.td-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.td-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0;
  font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.25;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .8rem .6rem;
}
.td-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.td-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.td-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* L'échantillon : un petit tableau, un bandeau et trois lignes, aux couleurs de l'occasion. */
.td-echantillon {
  display: grid; gap: .3rem; width: 100%; max-width: 10rem; padding: .4rem; background: var(--d-tableau); border-radius: .6rem;
  border: .1rem solid rgba(var(--color-foreground), .2);
}
.td-echantillon b { display: block; height: 1.6rem; border-radius: .3rem; background: var(--d-entete); }
.td-echantillon i { display: block; height: .9rem; border-radius: .3rem; background: var(--d-ligne); border-bottom: .15rem solid var(--d-texte); }
@media (min-width: 750px) { .td-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }