/* « La carte d'embarquement » : le billet d'avion qu'on offre pour annoncer un voyage. Une carte debout sur toute la feuille :
 * un bandeau, le passager, deux grands codes d'aéroport reliés par un avion, six cases, une ligne de perforation, puis le
 * talon (un mot et un code-barres).
 *
 * Une seule mise en page, quatre allures (`[data-style]`) : Azur (le ciel d'été), Noir et or (la première classe), Rétro (les
 * années soixante-dix) et Lagon (l'évasion). Ce qui change d'une allure à l'autre est ici ; les mots viennent de la page.
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : toutes ici, en tête, par allure, et nulle part ailleurs.
 * `[data-style]` ne nomme pas `.eb` exprès, pour que les échantillons du formulaire se colorent avec les mêmes variables.
 *
 * --e-fond : ce qui entoure la carte ; --e-carte : le papier de la carte ; --e-entete / --e-entete-texte : le bandeau du haut ;
 * --e-texte : le passager, les valeurs ; --e-doux : les petits libellés ; --e-code : les deux grands codes ; --e-filet : les filets
 * et la perforation ; --e-barres : le code-barres.
 *
 * **Chaque paire texte/fond est mesurée** (`tests/embarquement.test.js`) : texte ≥ 7, libellés ≥ 4,5, bandeau ≥ 4,5, codes ≥ 3.
 */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-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: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-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;
}
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/courier-prime-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: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/courier-prime-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;
}
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/courier-prime-bold-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: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/courier-prime-bold-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="Azur"] {
  --e-fond: #9fd0f0; --e-carte: #ffffff; --e-entete: #1a5fb4; --e-entete-texte: #ffffff; --e-texte: #0f2b4a; --e-doux: #46698c;
  --e-code: #1a5fb4; --e-filet: #9bb6d3; --e-barres: #0f2b4a;
}
[data-style="Noir et or"] {
  --e-fond: #0a0a0a; --e-carte: #161616; --e-entete: #c8a24a; --e-entete-texte: #0a0a0a; --e-texte: #f3e7c6; --e-doux: #bba878;
  --e-code: #d8b45a; --e-filet: #6a5a2e; --e-barres: #f3e7c6;
}
[data-style="Rétro"] {
  --e-fond: #5a3a1e; --e-carte: #f5e6c4; --e-entete: #b84a17; --e-entete-texte: #fff6e0; --e-texte: #38210f; --e-doux: #7a4f2a;
  --e-code: #b5401a; --e-filet: #b58a52; --e-barres: #38210f; --e-bande-1: #f2b134; --e-bande-2: #7a3f1d;
}
[data-style="Lagon"] {
  --e-fond: #6fd0c5; --e-carte: #fffdf8; --e-entete: #c93a24; --e-entete-texte: #ffffff; --e-texte: #0b4a47; --e-doux: #3f716e;
  --e-code: #c93a24; --e-filet: #8fc9c2; --e-barres: #0b4a47;
}

/* La feuille : la carte y tient de bord à bord, avec une marge de papier. `--eb-t` (1 ou moins) rétrécit tout le texte quand une
 * saisie longue ferait déborder : le serveur ne l'estime pas (les mots sont courts), le script la reprend au pixel. */
.eb {
  --eb-t: 1;
  display: flex; padding: 5.4cqw; background: var(--e-fond); color: var(--e-texte);
  font-family: "Roboto Condensed", system-ui, sans-serif; line-height: 1.15;
}
.eb :where(p, dl, dd, dt, h2) { margin: 0; padding: 0; }
.eb__carte {
  flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--e-carte); border-radius: 3.2cqw;
}

.eb__entete {
  flex: none; position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 3cqw;
  background: var(--e-entete); color: var(--e-entete-texte); padding: 4cqw 5.4cqw 3.8cqw;
}
.eb__titre { grid-column: 1; font-weight: 700; font-size: 5.2cqw; letter-spacing: .1em; text-transform: uppercase; line-height: 1.05; }
.eb__sous { grid-column: 1; font-size: 2.5cqw; letter-spacing: .24em; text-transform: uppercase; opacity: .92; }
.eb__avion { grid-column: 2; grid-row: 1 / span 2; width: 8cqw; height: 8cqw; fill: currentColor; transform: rotate(45deg); }

.eb__corps { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; padding: 3cqw 5.4cqw 2cqw; gap: 2.4cqw; }
.eb small, .eb dt {
  display: block; font-size: calc(2.2cqw * var(--eb-t)); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--e-doux);
}
.eb__passager b {
  display: block; font-weight: 700; font-size: calc(7.6cqw * var(--eb-t)); line-height: 1.08; letter-spacing: .02em; text-transform: uppercase;
  overflow-wrap: anywhere; text-wrap: balance;
}

.eb__route { display: grid; grid-template-columns: minmax(0, 1fr) 13cqw minmax(0, 1fr); align-items: center; column-gap: 1cqw; }
.eb__lieu { min-width: 0; }
.eb__lieu--a { text-align: right; }
.eb__code {
  display: block; font-family: "Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400; font-size: calc(23cqw * var(--eb-t));
  line-height: 1.02; letter-spacing: .02em; color: var(--e-code); text-transform: uppercase; overflow: hidden;
}
/* Une ville sans code d'aéroport : trois points, un décor — jamais un code inventé. */
.eb__code:empty::before { content: "···"; opacity: .55; }
.eb__ville {
  display: block; font-weight: 700; font-size: calc(4.4cqw * var(--eb-t)); line-height: 1.12; letter-spacing: .04em; text-transform: uppercase;
  overflow-wrap: anywhere; text-wrap: balance;
}
.eb__trait { width: 100%; height: auto; align-self: center; overflow: visible; }
.eb__pointilles { stroke: var(--e-filet); stroke-width: 1.4; stroke-dasharray: 2 2.6; stroke-linecap: round; }
.eb__vol { fill: var(--e-code); }

.eb__infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.8cqw 2.4cqw; border-top: .3cqw solid var(--e-filet); padding-top: 2.8cqw; }
.eb__infos > div { min-width: 0; }
.eb__infos dd { font-weight: 700; font-size: calc(4.6cqw * var(--eb-t)); line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; margin-top: .5cqw; }

/* La perforation : une ligne de tirets, et deux encoches de la couleur de la feuille aux deux bords de la carte. */
.eb__perfo { flex: none; position: relative; height: 0; margin: 2cqw 0 0; border-top: .5cqw dashed var(--e-filet); }
.eb__perfo::before, .eb__perfo::after {
  content: ""; position: absolute; top: -2.6cqw; width: 5.2cqw; height: 5.2cqw; border-radius: 50%; background: var(--e-fond);
}
.eb__perfo::before { left: -2.6cqw; }
.eb__perfo::after { right: -2.6cqw; }

.eb__talon { flex: none; display: grid; justify-items: center; gap: 2.2cqw; padding: 3.4cqw 5.4cqw 4.4cqw; }
.eb__mot {
  max-width: 100%; text-align: center; font-weight: 700; font-size: calc(4cqw * var(--eb-t)); line-height: 1.2; letter-spacing: .06em;
  text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance;
}
.eb__mot:empty { display: none; }
.eb__barres { width: 66cqw; height: 11cqw; fill: var(--e-barres); }

/* Azur : le ciel d'été. Rond, franc, bleu. */
.eb[data-style="Azur"] .eb__entete { border-bottom: .8cqw solid var(--e-fond); }
.eb[data-style="Azur"] .eb__ville { color: var(--e-texte); }

/* Noir et or : la première classe. Un liseré d'or, des lettres espacées, rien d'arrondi. */
.eb[data-style="Noir et or"] .eb__carte { border-radius: 0; outline: .35cqw solid var(--e-entete); outline-offset: -1.8cqw; }
.eb[data-style="Noir et or"] .eb__entete { background: transparent; color: var(--e-code); border-bottom: .35cqw solid var(--e-entete); padding-bottom: 3.4cqw; }
.eb[data-style="Noir et or"] .eb__titre { letter-spacing: .16em; font-weight: 400; font-size: 4.4cqw; white-space: nowrap; }
.eb[data-style="Noir et or"] .eb__passager b, .eb[data-style="Noir et or"] .eb__ville, .eb[data-style="Noir et or"] .eb__infos dd { letter-spacing: .12em; font-weight: 400; }
.eb[data-style="Noir et or"] .eb__perfo::before, .eb[data-style="Noir et or"] .eb__perfo::after { display: none; }

/* Rétro : les années soixante-dix. Trois bandes sous le bandeau, la machine à écrire pour les cases. */
.eb[data-style="Rétro"] .eb__carte { border-radius: 1.4cqw; }
.eb[data-style="Rétro"] .eb__entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2.4cqw; height: 2.4cqw;
  background: linear-gradient(var(--e-bande-1) 0 33.3%, var(--e-entete) 33.3% 66.6%, var(--e-bande-2) 66.6%);
}
.eb[data-style="Rétro"] .eb__corps { padding-top: 5.4cqw; }
.eb[data-style="Rétro"] .eb__infos dd, .eb[data-style="Rétro"] .eb__mot { font-family: "Courier Prime", "Courier New", monospace; letter-spacing: 0; }
.eb[data-style="Rétro"] .eb__passager b { font-family: "Courier Prime", "Courier New", monospace; letter-spacing: 0; font-size: calc(6.6cqw * var(--eb-t)); }

/* Lagon : l'évasion. Un bandeau corail, des coins ronds, de l'air. */
.eb[data-style="Lagon"] .eb__carte { border-radius: 5cqw; }
.eb[data-style="Lagon"] .eb__entete { border-radius: 0 0 4cqw 4cqw; padding-bottom: 4.6cqw; }
.eb[data-style="Lagon"] .eb__corps { padding-top: 4cqw; }

/* ── Le formulaire ── */
.eb-lieu { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; display: grid; gap: .8rem; }
.eb-lieu legend { font-weight: 700; padding: 0; margin-bottom: .6rem; }
.eb-lieu__rang { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .8rem; align-items: end; }
.eb-lieu__champ { min-width: 0; }
.eb-lieu__champ label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.eb-lieu__champ input { width: 100%; }
.eb-lieu__champ--code input { text-transform: uppercase; letter-spacing: .1em; }
.eb-aero { display: grid; gap: .6rem; }
.eb-aero[hidden], .eb-idees[hidden] { display: none; }
.eb-aero__bouton { justify-self: start; min-height: 4.4rem; }
.eb-aero__liste { display: flex; flex-wrap: wrap; gap: .6rem; }
.eb-aero__liste:empty { display: none; }
.eb-aero__liste button, .eb-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%;
}
.eb-aero__retour { margin: 0; font-size: 1.3rem; }
.eb-aero__retour:empty { display: none; }
.eb-quand { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .8rem; }
.eb-quand input { width: 100%; }
.eb-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 .6rem; align-items: center; }
.eb-idees__titre { width: 100%; margin: 0; font-size: 1.3rem; font-weight: 600; }
.eb-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.eb-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.eb-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;
}
.eb-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.eb-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.eb-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* L'échantillon : une petite carte, son bandeau et deux lignes, aux couleurs de l'allure. */
.eb-echantillon {
  display: grid; gap: .3rem; width: 100%; max-width: 10rem; padding: .4rem; background: var(--e-carte); border-radius: .6rem;
  border: .2rem solid var(--e-fond);
}
.eb-echantillon b { display: block; height: 1.4rem; border-radius: .3rem; background: var(--e-entete); }
.eb-echantillon i { display: block; height: .8rem; border-radius: .3rem; background: var(--e-filet); }
.eb-echantillon i:last-child { width: 60%; background: var(--e-code); }
@media (min-width: 750px) { .eb-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }