/* Socle : jetons de conception, remise à zéro, typographie, cadre de l'application et navigation.
   Identité « agence de voyage » : encre océan profond, bleu océan pour l'action, lagon pour le remplissage,
   sable pour le fond. Contrastes calculés (WCAG 2.1) dans CONCEPTION.md. */

:root {
  color-scheme: light;
  /* couleurs */
  --encre: #0F2536;        /* texte, 15,7:1 sur blanc */
  --encre-2: #4F5D6B;      /* texte secondaire, 6,75:1 sur blanc, 6,05:1 sur sable */
  --ocean: #0B5D8F;        /* action principale, liens ; blanc dessus 7,06:1 */
  --ocean-fonce: #084A73;  /* survol ; blanc dessus 9,39:1 */
  --ocean-clair: #E6F0F7;  /* sélection ; océan dessus 6,1:1 */
  --ocean-voile: #F2F7FB;  /* survol des lignes */
  --lagon: #12898A;        /* remplissage des jauges (3,1:1 sur la piste) */
  --lagon-texte: #0A6B6C;  /* 6,3:1 sur blanc */
  --lagon-clair: #E0F2F1;
  --sable: #F6F2EA;        /* fond de page */
  --sable-2: #EFE8DB;      /* pastilles neutres, piste */
  --papier: #FFFFFF;       /* surfaces */
  --bord: #E6DFD2;         /* filets décoratifs */
  --bord-champ: #7C8794;   /* bordure des champs, 3,65:1 */
  --bord-bouton: #C3CAD2;
  --corail: #B23C17;       --corail-clair: #FCEBE4;   /* urgent, manquant : 5,11:1 */
  --soleil: #8A5800;       --soleil-clair: #FDF1D3;   /* à surveiller : 5,38:1 */
  --vert: #1C7444;         --vert-clair: #E3F2E9;     /* fait, prêt : 5,0:1 */
  --erreur: #B42318;       --erreur-clair: #FEECEB;
  /* typographie */
  --police-titre: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --police: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t13: 0.8125rem; --t14: 0.875rem; --t15: 0.9375rem; --t16: 1rem; --t18: 1.125rem;
  --t20: 1.25rem; --t22: 1.375rem; --t26: 1.625rem; --t32: 2rem;
  /* espacements (grille de 4 px) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;
  /* rayons, ombres */
  --r6: 6px; --r10: 10px; --r14: 14px; --r20: 20px; --rond: 999px;
  --ombre-1: 0 1px 2px rgba(15, 37, 54, .06), 0 1px 1px rgba(15, 37, 54, .03);
  --ombre-2: 0 10px 24px -10px rgba(15, 37, 54, .22), 0 2px 6px rgba(15, 37, 54, .05);
  --ombre-3: 0 24px 56px -16px rgba(15, 37, 54, .35), 0 4px 12px rgba(15, 37, 54, .08);
  /* mouvement (emil-design-eng : ease-out fort, moins de 300 ms, sortie plus rapide que l'entrée) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-tiroir: cubic-bezier(0.32, 0.72, 0, 1);
  --d-appui: 160ms; --d-entree: 200ms; --d-sortie: 150ms; --d-tiroir: 240ms;
  --appui: scale(0.97);
  /* cibles et cadre */
  --cible: 44px; --cible-confort: 48px;
  --nav-bas: 64px; --nav-gauche: 0px;
  --bas-sur: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sable); color: var(--encre); font: 400 var(--t16)/1.5 var(--police); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ocean); }
img, svg { display: block; }
[hidden] { display: none !important; }
h1, h2, .bloc-titre, .mois-titre, #fenetre-titre { font-family: var(--police-titre); font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: var(--t26); line-height: 1.2; font-weight: 700; }
.num, time, .repere, .filtre-nb, .file-nb, .jauge-texte b, .col-montant { font-variant-numeric: tabular-nums; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.petite { width: 16px; height: 16px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
#contenu:focus { outline: none; }
#contenu:focus-visible { outline: 3px solid var(--ocean); outline-offset: -3px; }

.evitement { position: fixed; top: var(--e2); left: var(--e2); z-index: 30; background: var(--encre); color: #fff; padding: var(--e3) var(--e4); border-radius: var(--r10); font-weight: 600; transform: translateY(-160%); }
.evitement:focus { transform: none; }

/* ---------------------------------------------------------------- cadre : téléphone d'abord */
main { min-width: 0; padding-bottom: calc(var(--nav-bas) + var(--bas-sur) + var(--e6)); }
.page { max-width: 1180px; margin: 0 auto; padding: var(--e5) var(--e4) var(--e8); }
.page-tete { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); margin-bottom: var(--e5); }
.page-tete .sous, .sous { color: var(--encre-2); font-size: var(--t15); }
.surtitre { color: var(--encre-2); font-size: var(--t14); font-weight: 600; }

/* navigation : barre du bas sur téléphone */
.navigation { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; background: var(--papier); border-top: 1px solid var(--bord); padding-bottom: var(--bas-sur); box-shadow: 0 -6px 20px -12px rgba(15, 37, 54, .2); }
.marque, .nav-pied, .nav-outils, .nav-secondaire { display: none; }
.nav-liste { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--nav-bas); }
.nav-liste a, .nav-plus button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; min-width: 0; color: var(--encre-2); text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.2; transition: color var(--d-entree) ease, transform var(--d-appui) var(--ease-out); }
.nav-plus button { width: 100%; border: 0; background: none; }
.nav-liste a .ico, .nav-plus .ico { width: 22px; height: 22px; }
.nav-libelle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.nav-liste a[aria-current="page"], .nav-plus button[data-actif] { color: var(--ocean); }
.nav-liste a[aria-current="page"]::before, .nav-plus button[data-actif]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--ocean); }
.nav-liste .compteur { display: none; }
.pastille { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rond); background: var(--corail); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }

/* rail à partir de 768 px : icône au-dessus du libellé */
@media (min-width: 768px) {
  :root { --nav-gauche: 88px; }
  .appli { display: grid; grid-template-columns: var(--nav-gauche) minmax(0, 1fr); min-height: 100vh; }
  main { padding-bottom: var(--e8); }
  .navigation { position: sticky; top: 0; height: 100vh; bottom: auto; border-top: 0; border-right: 1px solid var(--bord); box-shadow: none; background: var(--sable); display: flex; flex-direction: column; padding: var(--e4) var(--e2); gap: var(--e6); }
  .nav-secondaire { display: list-item; }
  .nav-plus { display: none; }
  .marque { display: flex; justify-content: center; }
  .logo { width: 72px; height: auto; }
  .nav-liste { display: flex; flex-direction: column; gap: var(--e1); height: auto; }
  .nav-liste a, .nav-outils a { height: 64px; border-radius: var(--r10); }
  .nav-outils { display: flex; flex-direction: column; gap: var(--e1); margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--bord); }
  .nav-outils a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--encre-2); text-decoration: none; font-size: 12px; font-weight: 600; transition: color var(--d-entree) ease, transform var(--d-appui) var(--ease-out); }
  .nav-outils a[aria-current="page"] { color: var(--ocean); background: var(--papier); box-shadow: var(--ombre-1); }
  .nav-liste a[aria-current="page"] { background: var(--papier); box-shadow: var(--ombre-1); }
  .nav-liste a[aria-current="page"]::before { display: none; }
  .pastille { top: 4px; left: calc(50% + 4px); }
  .nav-pied { display: flex; justify-content: center; color: inherit; text-decoration: none; border-radius: var(--r10); }
  .nav-pied-texte { display: none; }
  .page { padding: var(--e8) var(--e8) var(--e10); }
  h1 { font-size: var(--t32); }
}

/* barre latérale complète à partir de 1280 px */
@media (min-width: 1280px) {
  :root { --nav-gauche: 248px; }
  .navigation { padding: var(--e5) var(--e4); }
  .marque { flex-direction: column; align-items: flex-start; gap: var(--e1); padding: 0 var(--e2); }
  .logo { width: 176px; }
  .nav-liste a, .nav-outils a { flex-direction: row; justify-content: flex-start; gap: var(--e3); height: 48px; padding: 0 var(--e3); font-size: var(--t15); }
  .nav-outils a { height: 44px; }
  .nav-liste a .ico { width: 20px; height: 20px; }
  .nav-libelle { flex: 1; }
  .nav-liste .compteur { display: inline; color: var(--encre-2); font-size: var(--t13); font-weight: 600; }
  .pastille { position: static; }
  .nav-pied { justify-content: flex-start; align-items: center; gap: var(--e3); padding: var(--e3) var(--e2) 0; border-top: 1px solid var(--bord); }
  .nav-pied-texte { display: grid; line-height: 1.3; }
  .nav-pied-texte small { color: var(--encre-2); font-size: var(--t13); }
}

@media (hover: hover) and (pointer: fine) {
  .nav-liste a:hover { color: var(--ocean); }
  .nav-liste a:not([aria-current="page"]):hover, .nav-outils a:not([aria-current="page"]):hover, .nav-pied:hover { background: rgba(255, 255, 255, .6); }
  .nav-outils a:hover, .nav-plus button:hover { color: var(--ocean); }
}