/* app.css — l'habillage d'Aurora Navigation, d'apres la maquette.
   Toute la couleur vit dans les variables : reteindre l'application, c'est
   changer ce bloc, rien d'autre. */

:root {
  --nuit: #06060f;
  --nuit-2: #100b22;
  --verre: rgba(12, 14, 32, .82);
  --verre-clair: rgba(255, 255, 255, .055);
  --bord: rgba(255, 255, 255, .085);
  --texte: #edf1ff;
  --texte-2: #8b96b8;
  --texte-3: #5e6788;
  --violet: #8b5cff;
  --violet-clair: #c2a4ff;
  --cyan: #7cc7ff;
  --rose: #edb0fb;
  --accent: #7c5cff;
  --accent-texte: #ffffff;
  --rouge: #ff5470;
  --vert: #34e5b0;
  --r: 22px;
  --r-p: 16px;
  --ombre: 0 18px 48px rgba(0, 0, 0, .62);
  --lueur: 0 0 26px rgba(124, 92, 255, .42);
  --haut: env(safe-area-inset-top, 0px);
  --bas: env(safe-area-inset-bottom, 0px);
  /* ⚠️ En paysage, l'encoche et la barre d'accueil passent sur les CÔTÉS :
     sans ces deux-là, l'interface se glisse dessous. */
  --gauche: env(safe-area-inset-left, 0px);
  --droite: env(safe-area-inset-right, 0px);
  /* La barre d'onglets mesure sa hauteur PLUS l'encoche du bas : sans quoi
     le socle de l'accueil se fait rogner par elle. */
  --hauteurOnglets: calc(78px + env(safe-area-inset-bottom, 0px));
}

[data-theme="jour"] {
  --nuit: #eef1f8; --nuit-2: #ffffff; --verre: rgba(255,255,255,.9);
  --verre-clair: rgba(10,20,50,.05); --bord: rgba(10,20,50,.1);
  --texte: #0d1526; --texte-2: #5a6788; --texte-3: #8b96b8;
  --ombre: 0 14px 38px rgba(20,40,80,.16); --lueur: none;
}
[data-theme="jour"] { --nuit: #eef1f8; }
[data-anim="non"] * { animation: none !important; transition: none !important; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--nuit); color: var(--texte);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
.cache { display: none !important; }
.grandir { flex: 1; min-width: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- carte */
#carte { position: absolute; inset: 0; background: var(--nuit); }
.maplibregl-ctrl-bottom-left { display: none; }
.maplibregl-ctrl-attrib { font-size: 9px; opacity: .45; background: transparent !important; }
.maplibregl-ctrl-attrib a { color: var(--texte-3) !important; }

/* le vehicule : la fleche d’Aurora, posee sur un halo qui respire */
.moi { width: 130px; height: 130px; display: grid; place-items: center; }
/* ⚠️ Le halo, l'anneau et la lueur passent par des variables : quand on choisit
   une flèche rose, un halo resté violet jurerait autour d'elle. Les valeurs par
   défaut sont exactement les anciennes — sans réglage, rien ne change. */
.moi {
  --moi-halo: rgba(139,92,255,.40);
  --moi-halo-2: rgba(139,92,255,.13);
  --moi-anneau: rgba(170,140,255,.5);
  --moi-lueur: rgba(150,120,255,.85);
}
.moi .onde {
  position: absolute; width: 116px; height: 116px; border-radius: 50%;
  background: radial-gradient(circle, var(--moi-halo) 0%, var(--moi-halo-2) 44%, transparent 68%);
  animation: respirer 2.9s ease-in-out infinite;
}
.moi .anneau {
  position: absolute; width: 66px; height: 66px; border-radius: 50%;
  border: 1.5px solid var(--moi-anneau);
  box-shadow: 0 0 24px var(--moi-halo), inset 0 0 18px var(--moi-halo-2);
}
.moi .fleche {
  position: relative; width: 62px; height: 62px; transform-origin: 50% 50%;
  /* ⚠️⚠️ PAS de transition ici. La caméra réécrit cet angle à CHAQUE image et
     lisse déjà en amont ; une transition de .18 s la faisait donc traîner en
     permanence derrière la carte, qui pivote elle d'un seul coup — l'écran et
     la flèche ne tournaient plus ensemble.
     ⚠️ Le dessin doit être centré dans son canevas, sinon il pivote autour
     d'un point qui n'est pas le sien et balaye au lieu de tourner net. */
  will-change: transform;
  filter: drop-shadow(0 0 12px var(--moi-lueur));
}
.moi.perdu .onde, .moi.perdu .anneau { opacity: .35; }
.apercuFleche {
  display: grid; place-items: center; padding: 10px 0 4px;
}
.apercuFleche svg { width: 76px; height: 76px; filter: drop-shadow(0 0 12px var(--moi-lueur)); }

@keyframes respirer { 0%,100% { transform: scale(.9); opacity: .85 } 50% { transform: scale(1.12); opacity: .5 } }
.epingle { font-size: 32px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.7)); transform: translateY(-8px); }

/* ================================================== interface sur carte */
#surCarte {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  padding: calc(var(--haut) + 10px) 14px calc(var(--bas) + 12px);
  display: flex; flex-direction: column;
}
#surCarte > * { pointer-events: auto; }

/* ------------------------------------------------- carte de manœuvre */
.manoeuvre {
  background: var(--verre); border: 1px solid var(--bord); border-radius: var(--r);
  box-shadow: var(--ombre); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  overflow: hidden; animation: tomber .3s cubic-bezier(.2,.9,.25,1);
}
@keyframes tomber { from { opacity: 0; transform: translateY(-18px) } }
/* ⚠️ La carte de manœuvre mange le HAUT de l'écran — c'est-à-dire l'horizon,
   la portion de route qu'on regarde justement pour anticiper. Elle a donc été
   ramenée de ~93 px à ~72 px : la distance reste le plus gros chiffre de
   l'écran, mais on récupère la ligne d'horizon. */
.mHaut { display: flex; align-items: center; gap: 14px; padding: 12px 16px 11px;
  transition: padding .3s ease, gap .3s ease; }
.mIcone {
  width: 44px; flex: 0 0 44px; height: 44px; display: grid; place-items: center;
  font-size: 36px; line-height: 1; color: #fff;
  filter: drop-shadow(0 0 12px rgba(124,92,255,.55));
  transition: width .3s ease, height .3s ease, flex-basis .3s ease;
}
.mIcone svg { width: 40px; height: 40px; stroke-width: 2.2;
  transition: width .3s ease, height .3s ease; }
.mDistance { font-size: 29px; font-weight: 600; letter-spacing: -1.1px; line-height: 1.05;
  transition: font-size .3s ease; }
.mDistance span::after { content: ''; }
.mInstruction { font-size: 16px; margin-top: 2px; }
.mRue { font-size: 13.5px; color: var(--texte-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ⭐⭐ Et quand il n'y a RIEN à faire avant un bon kilomètre, elle s'efface
   encore : c'est exactement le moment où l'on veut voir loin. Elle reprend
   sa taille toute seule à l'approche du virage — là où lire vite compte
   plus que voir loin. */
.manoeuvre.lointain .mHaut { padding: 8px 14px 7px; gap: 11px; }
.manoeuvre.lointain .mIcone { width: 32px; flex-basis: 32px; height: 32px; font-size: 27px; }
.manoeuvre.lointain .mIcone svg { width: 29px; height: 29px; }
.manoeuvre.lointain .mDistance { font-size: 22px; }
.manoeuvre.lointain .mInstruction { font-size: 14.5px; }
/* La rue est déjà dans l'instruction quand on est loin : elle ne coûte que
   de la hauteur. */
.manoeuvre.lointain .mRue { display: none; }
.mProgres { height: 3px; background: rgba(255,255,255,.07); }
.mProgres i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 10px var(--violet); transition: width .45s cubic-bezier(.4,0,.2,1);
}
.manoeuvre.imminent .mIcone { animation: pulser .62s ease-in-out infinite; }
.manoeuvre.imminent .mProgres i { background: linear-gradient(90deg, var(--vert), var(--cyan)); }
@keyframes pulser { 0%,100% { transform: scale(1) } 50% { transform: scale(1.14) } }
.manoeuvre.valide { animation: eclat .6s ease-out; }
@keyframes eclat {
  0% { box-shadow: var(--ombre) }
  35% { box-shadow: var(--ombre), 0 0 0 2px var(--vert), 0 0 34px rgba(52,229,176,.55) }
  100% { box-shadow: var(--ombre) }
}

.anticipe {
  margin: 9px auto 0; width: fit-content; max-width: 94%; padding: 8px 15px;
  background: var(--verre); border: 1px solid var(--bord); border-radius: 999px;
  backdrop-filter: blur(18px); font-size: 13px; color: var(--texte-2);
  box-shadow: var(--ombre); animation: monter .3s;
}
.puis {
  margin: 8px auto 0; width: fit-content; padding: 7px 15px; display: flex; gap: 9px;
  background: var(--verre-clair); border-radius: 999px; font-size: 13px; color: var(--texte-2);
  backdrop-filter: blur(14px);
}
@keyframes monter { from { opacity: 0; transform: translateY(8px) } }

/* ------------------------------------------------------- les voies ---- */
/* Le marquage au sol, redessine au-dessus de la route. Une case par voie :
   celles qui menent ou l'on va s'allument, les autres restent en retrait.
   ⚠️ On ne cache PAS les voies inutiles : c'est en voyant le marquage
   COMPLET qu'on reconnait sa place sur la chaussee. */
.voies {
  margin: 9px auto 0; width: fit-content; max-width: 96%;
  display: flex; gap: 5px; padding: 7px 9px;
  background: var(--verre); border: 1px solid var(--bord); border-radius: 18px;
  box-shadow: var(--ombre); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: monter .3s; overflow: hidden;
}
.voies i {
  width: 34px; height: 40px; flex: 0 0 34px; display: grid; place-items: center;
  border-radius: 11px; background: rgba(255, 255, 255, .045);
}
.voies i.prendre {
  background: rgba(139, 92, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 255, .55), 0 0 14px rgba(139, 92, 255, .28);
}
.voie { width: 27px; height: 31px; }
.voie .vAutre { stroke: rgba(255, 255, 255, .22); stroke-width: 1.7; }
.voie .vSuit { stroke: #fff; stroke-width: 2.5; }
.voies i.prendre .vSuit { filter: drop-shadow(0 0 7px var(--violet)); }
/* Une voie qu'on ne prend pas ne met rien en avant, meme sa fleche principale. */
.voies i:not(.prendre) .vSuit { stroke: rgba(255, 255, 255, .28); stroke-width: 1.7; }

/* ------------------------------------------- panneau de limitation ---- */
/* ⚠️ Ici, et seulement ici, on abandonne les couleurs d'Aurora : un panneau
   de limitation se reconnait a son disque blanc cercle de rouge. Le teinter
   en violet serait joli et illisible d'un coup d'oeil. */
.panneauVitesse {
  position: absolute; right: 22px; bottom: calc(var(--bas) + 208px);
  width: 60px; height: 60px; border-radius: 50%;
  background: #fff; border: 6px solid #e0243a;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .3);
  animation: monter .3s;
}
.panneauVitesse b {
  color: #11131f; font-size: 24px; font-weight: 800; letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
}
.panneauVitesse small { display: block; font-size: 8px; color: #4b5168; margin-top: -3px; }
/* Depassement : le panneau bat, sans jamais masquer le chiffre. */
.panneauVitesse.exces { animation: battrePanneau .82s ease-in-out infinite; }
@keyframes battrePanneau {
  0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.3); transform: scale(1) }
  50% { box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 26px 5px rgba(224,36,58,.75); transform: scale(1.07) }
}
.vitesse.exces b { color: #ff8095; }

/* ------------------------------------------------ colonne de commandes */
.colonne { position: absolute; left: 14px; top: 46%; display: flex; flex-direction: column; gap: 12px; }
.pastille {
  width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center;
  background: var(--verre); border: 1px solid var(--bord); border-radius: 50%;
  box-shadow: var(--ombre); backdrop-filter: blur(20px); font-size: 19px;
  transition: transform .14s, background .2s;
}
.pastille:active { transform: scale(.92); }
.pastille.on {
  border-color: var(--violet); color: var(--violet-clair);
  background: rgba(139, 92, 255, .17);
  box-shadow: var(--ombre), 0 0 18px rgba(139, 92, 255, .35);
}
.pastille.recentrer { position: absolute; right: 14px; top: 46%; }

/* ------------------------------------------------------ bulle de vitesse */
.vitesse {
  position: absolute; right: 16px; bottom: calc(var(--bas) + 118px);
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--verre); border: 1px solid var(--bord); box-shadow: var(--ombre);
  backdrop-filter: blur(20px); display: grid; place-content: center; text-align: center;
}
.vitesse b { display: block; font-size: 27px; font-weight: 600; letter-spacing: -1px; }
.vitesse small { font-size: 10px; color: var(--texte-2); }

/* ----------------------------------------------------------- socles bas */
.socle {
  margin-top: auto; background: var(--verre); border: 1px solid var(--bord);
  border-radius: var(--r); box-shadow: var(--ombre);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  padding: 14px 16px; animation: surgir .32s cubic-bezier(.2,.9,.25,1);
}
@keyframes surgir { from { opacity: 0; transform: translateY(26px) } }
.poignee { width: 38px; height: 4px; border-radius: 2px; background: var(--bord); margin: -4px auto 12px; }

.chiffres { display: flex; align-items: center; justify-content: space-around; text-align: center; }
.chiffres > div { flex: 1; }
.chiffres b { display: block; font-size: 25px; font-weight: 600; letter-spacing: -.8px; }
.chiffres small { font-size: 11px; color: var(--texte-2); }
.chevron {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  background: var(--verre-clair); display: grid; place-items: center; font-size: 15px;
}

.butLigne { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.butIcone { font-size: 22px; }
.butLigne b { display: block; font-size: 16px; }
.butLigne small { color: var(--texte-2); font-size: 13px;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profils { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; scrollbar-width: none; }
.profils::-webkit-scrollbar { display: none; }
.profil {
  flex: 0 0 auto; padding: 9px 15px; border-radius: 999px; font-size: 14px; white-space: nowrap;
  background: var(--verre-clair); border: 1px solid transparent; transition: .18s;
}
.profil.on { background: linear-gradient(100deg, var(--violet), var(--cyan)); color: #fff;
  font-weight: 600; box-shadow: var(--lueur); }

.rangee { display: flex; gap: 10px; }
.bouton {
  flex: 1; padding: 16px; border-radius: var(--r-p); background: var(--verre-clair);
  font-weight: 600; text-align: center; transition: transform .13s, filter .2s;
}
.bouton:active { transform: scale(.975); }
.bouton.plein {
  background: linear-gradient(100deg, var(--violet) 0%, #6d7cff 55%, var(--cyan) 130%);
  color: #fff; box-shadow: 0 8px 26px rgba(124,92,255,.42);
}
.bouton.mince { flex: 0 0 auto; padding: 16px 20px; }
.bouton.danger { background: var(--rouge); color: #fff; }

/* ==================================================== écran d’accueil */
#ecranAccueil {
  position: absolute; inset: 0; z-index: 20; background: var(--nuit);
  display: flex; flex-direction: column;
}
#ecranAccueil::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 62% at 82% -8%, rgba(124,92,255,.20), transparent 62%),
    radial-gradient(90% 46% at 8% 4%, rgba(74,200,255,.10), transparent 60%);
}
.vueOnglet { position: absolute; inset: 0 0 var(--hauteurOnglets, 76px); overflow: hidden; }
.corpsOnglet {
  height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--haut) + 26px) 20px 26px; position: relative;
  /* ⚠️⚠️ Une page de reglages ne doit PAS pouvoir partir de cote. Il suffit
     d'un element un peu trop large pour que le doigt, en descendant, pousse
     tout l'ecran a gauche puis a droite. `touch-action: pan-y` interdit le
     geste, `overflow-x: hidden` interdit meme le debordement. */
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
/* Seule exception : le rail des vehicules, qui se fait defiler a l'horizontale. */
.corpsOnglet .profils { touch-action: pan-x; }
/* Rien ne depasse en largeur : ni un mot trop long, ni un tableau. */
.corpsOnglet > *, .corpsOnglet .ligne, .corpsOnglet .liste { max-width: 100%; }
.corpsOnglet .ligne > .grandir { min-width: 0; }

/* ── La valeur d'un réglage à options, et sa feuille de choix ──────────────
   ⚠️ Remplace le <select> natif : sur iPhone celui-ci prenait la largeur de sa
   plus longue option, écrasait le titre de la ligne et sortait de l'écran. */
.valeurChoix {
  display: flex; align-items: center; gap: 6px;
  flex: 0 1 auto; min-width: 0; max-width: 52%;
  color: var(--texte-2); font-size: 14.5px; text-align: right;
  padding: 6px 2px 6px 10px;
}
.valeurChoix span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.valeurChoix i { color: var(--violet-clair); font-style: normal; font-size: 19px; flex: 0 0 auto; }
.valeurChoix:active { opacity: .6; }

.feuille {
  position: fixed; inset: 0; z-index: 95; background: rgba(3,4,14,.86);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px;
  animation: fondu .18s ease;
}
@keyframes fondu { from { opacity: 0 } }
.feuilleCorps {
  width: 100%; max-width: 460px; margin: 0; max-height: 76vh;
  display: flex; flex-direction: column;
  animation: monter .24s cubic-bezier(.2,.9,.25,1);
}
@keyframes monter { from { transform: translateY(14px); opacity: .4 } }
.feuilleCorps h4 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.listeChoix {
  overflow-y: auto; overflow-x: hidden; touch-action: pan-y;
  margin-bottom: 12px; border-radius: var(--r);
  background: var(--verre-clair); border: 1px solid var(--bord);
}
.optionChoix {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 15px; text-align: left; font-size: 15.5px;
  border-bottom: 1px solid var(--bord);
}
.optionChoix:last-child { border-bottom: 0; }
.optionChoix span { flex: 1; min-width: 0; }
.optionChoix i { font-style: normal; color: var(--violet-clair); opacity: 0; flex: 0 0 auto; }
.optionChoix.actif { color: var(--texte); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.optionChoix.actif i { opacity: 1; }
.optionChoix:active { background: color-mix(in srgb, var(--violet) 22%, transparent); }
.titre { font-size: 31px; font-weight: 600; letter-spacing: -1px; margin: 0 0 20px; }
.sousTitre { font-size: 17px; font-weight: 600; margin: 26px 0 10px; }
.note { color: var(--texte-2); font-size: 13px; margin: 0 2px 14px; }

/* Le conseil « va telecharger une belle voix » : c'est le seul endroit ou
   Aurora demande quelque chose au telephone, il doit se remarquer. */
.conseilVoix {
  background: color-mix(in srgb, var(--violet) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 34%, transparent);
  border-radius: 14px;
  padding: 13px 15px;
  margin: 2px 2px 16px;
  line-height: 1.55;
}
.conseilVoix b { color: var(--texte); }
.conseilVoix ol { color: var(--texte); }
.conseilVoix .fleche { color: var(--violet); font-weight: 700; }
.conseilVoix small { display: block; margin-top: 6px; color: var(--texte-2); }

.recherche {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: var(--verre-clair); border: 1px solid var(--bord); border-radius: 18px;
  color: var(--texte-2); text-align: left; backdrop-filter: blur(14px);
}
.recherche .loupe { width: 20px; height: 20px; flex: 0 0 20px; }
.recherche span:not(.loupe):not(.micro) {
  flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recherche .micro { font-size: 17px; opacity: .8; }

.raccourcis { display: flex; gap: 12px; margin-top: 12px; }
.raccourci {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  border-radius: 18px; border: 1px solid var(--bord); text-align: left;
  background: linear-gradient(140deg, rgba(124,92,255,.20), rgba(74,200,255,.07));
}
.raccourci .rIcone { font-size: 21px; }
.raccourci b { display: block; font-size: 15px; }
.raccourci small { color: var(--texte-2); font-size: 12.5px; }

/* la banniere : une aurore boreale, entierement en CSS */
.banniere {
  position: relative; height: 168px; margin: 20px 0 4px; border-radius: var(--r);
  overflow: hidden; border: 1px solid var(--bord);
  background: linear-gradient(#070a20 0%, #0d0a26 55%, #150c2e 100%);
}
.banniere .aurore {
  position: absolute; inset: -30% -10% 42%;
  background:
    radial-gradient(58% 100% at 30% 100%, rgba(52,229,176,.55), transparent 70%),
    radial-gradient(48% 92% at 62% 100%, rgba(124,92,255,.55), transparent 72%),
    radial-gradient(38% 84% at 80% 100%, rgba(74,200,255,.42), transparent 74%);
  filter: blur(14px); animation: onduler 11s ease-in-out infinite alternate;
}
@keyframes onduler {
  0% { transform: translateX(-5%) scaleY(1) }
  100% { transform: translateX(6%) scaleY(1.22) }
}
.banniere .monts { position: absolute; left: 0; right: 0; bottom: 26px; width: 100%; height: 62px; }
.banniere .monts path { fill: #120c28; stroke: rgba(180,150,255,.30); stroke-width: 1; }
.banniere .voie {
  position: absolute; left: 50%; bottom: 0; width: 3px; height: 40px; transform: translateX(-50%);
  background: linear-gradient(#e879f9, rgba(232,121,249,0));
  box-shadow: 0 0 22px 5px rgba(232,121,249,.5);
}
.banniere .signature {
  position: absolute; left: 16px; bottom: 12px; font-size: 13px; font-weight: 600;
  letter-spacing: 2.4px; text-transform: uppercase;
  background: linear-gradient(100deg, var(--cyan), var(--violet-clair), var(--rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.banniere .signature small {
  display: block; font-size: 10px; letter-spacing: 1.6px; color: var(--texte-2);
  -webkit-text-fill-color: var(--texte-2); text-transform: none; margin-top: 1px;
}

/* listes */
.liste { background: var(--verre-clair); border: 1px solid var(--bord); border-radius: var(--r); overflow: hidden; }
.ligne {
  display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 16px;
  border-bottom: 1px solid var(--bord); text-align: left; transition: background .15s;
}
.ligne:last-child { border-bottom: 0; }
.ligne:active { background: var(--verre-clair); }
.ligne .rond {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verre-clair); border: 1px solid var(--bord); font-size: 16px;
}
.ligne b { display: block; font-size: 15.5px; font-weight: 500; }
.ligne small { display: block; color: var(--texte-2); font-size: 13px; }
.ligne .eta { color: var(--texte-2); font-size: 14px; flex: 0 0 auto; }
.ligne > .grandir > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vide { text-align: center; color: var(--texte-2); padding: 44px 22px; font-size: 14px; }
.vide span { font-size: 40px; display: block; margin-bottom: 12px; opacity: .45; }

/* --------------------------------------------------------------- onglets */
.onglets {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; padding: 10px 6px calc(var(--bas) + 10px);
  background: rgba(6, 8, 22, .88); backdrop-filter: blur(24px);
  border-top: 1px solid var(--bord);
}
[data-theme="jour"] .onglets { background: rgba(255,255,255,.9); }
.onglet {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--texte-3); font-size: 11px; transition: color .2s;
}
.onglet svg { width: 23px; height: 23px; }
.onglet.actif { color: var(--violet-clair); }
.onglet.actif svg { filter: drop-shadow(0 0 9px rgba(124,92,255,.85)); }

/* profil */
.entetteProfil { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sceau { width: 62px; height: 62px; border-radius: 16px; box-shadow: var(--ombre); }
.motNom {
  font-size: 25px; font-weight: 600; letter-spacing: 5px;
  background: linear-gradient(100deg, var(--cyan), var(--violet-clair), var(--rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.motSous { font-size: 11px; letter-spacing: 4.4px; color: var(--texte-2); }
.promesse { color: var(--texte-2); font-size: 13.5px; line-height: 1.7; margin: 0 0 20px; }

/* ------------------------------------------------------------- panneaux */
.panneau {
  position: absolute; inset: 0; z-index: 40; background: var(--nuit);
  display: flex; flex-direction: column; animation: glisser .26s cubic-bezier(.2,.9,.25,1);
}
@keyframes glisser { from { transform: translateX(100%) } }
.panneau .entete {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: calc(var(--haut) + 12px) 14px 12px; border-bottom: 1px solid var(--bord);
}
.panneau .entete h2 { margin: 0; font-size: 18px; flex: 1; }
.panneau .corps {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y; overscroll-behavior: contain;
  padding: 16px 16px calc(var(--bas) + 26px);
}
.saisie {
  flex: 1; width: 100%; padding: 14px 16px; border-radius: 15px;
  background: var(--verre-clair); border: 1px solid var(--bord); color: var(--texte);
}
.saisie:focus { outline: none; border-color: var(--violet); box-shadow: var(--lueur); }

.groupe { background: var(--verre-clair); border: 1px solid var(--bord);
  border-radius: var(--r); padding: 2px 16px; margin-bottom: 16px; }
.groupe h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--texte-3); margin: 16px 0 4px; font-weight: 600; }

/* ── Les groupes de réglages se replient ──────────────────────────────────
   ⚠️ Quarante-neuf réglages à la file, personne ne s'y retrouve. Chaque
   groupe est une carte fermée qu'on ouvre ; une seule à la fois. */
.groupe.pliable { padding: 0; overflow: hidden; }
.enteteGroupe {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 15px 16px; text-align: left;
}
.enteteGroupe .grandir { flex: 1; min-width: 0; }
.enteteGroupe b { display: block; font-size: 15.5px; font-weight: 600; }
.enteteGroupe small {
  display: block; color: var(--texte-2); font-size: 12.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pictoGroupe {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; font-size: 18px; font-style: normal;
  background: color-mix(in srgb, var(--violet) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent);
}
.enteteGroupe .chevron {
  flex: 0 0 auto; font-style: normal; font-size: 21px; color: var(--violet-clair);
  transform: rotate(90deg); transition: transform .24s cubic-bezier(.2,.9,.25,1);
}
.groupe.replie .enteteGroupe .chevron { transform: rotate(0deg); }
.enteteGroupe:active { background: color-mix(in srgb, var(--violet) 10%, transparent); }

.groupe.pliable .contenuGroupe {
  padding: 0 16px 6px;
  border-top: 1px solid var(--bord);
  animation: deplier .26s cubic-bezier(.2,.9,.25,1);
}
@keyframes deplier { from { opacity: 0; transform: translateY(-6px) } }
.groupe.replie .contenuGroupe { display: none; }
/* Les animations coupées : on ne déplie plus, on montre. */
[data-anim="non"] .groupe.pliable .contenuGroupe,
[data-anim="non"] .enteteGroupe .chevron { animation: none; transition: none; }
.bascule { width: 50px; height: 30px; border-radius: 15px; background: var(--verre-clair);
  position: relative; flex: 0 0 auto; border: 1px solid var(--bord); transition: .22s; }
.bascule i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--texte-3); transition: .22s; }
.bascule.on { background: linear-gradient(100deg, var(--violet), var(--cyan)); border-color: transparent;
  box-shadow: var(--lueur); }
.bascule.on i { transform: translateX(20px); background: #fff; }
input[type=range] { width: 100%; accent-color: var(--violet); }
select, input[type=color] { background: var(--verre-clair); border: 1px solid var(--bord);
  border-radius: 11px; padding: 9px 11px; }
input[type=color] { width: 46px; height: 38px; padding: 3px; }
.puce { display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--verre-clair); font-size: 12px; color: var(--texte-2); margin-right: 6px; }

/* --------------------------------------------------------- écran d’arrivée */
/* L'arrivée se joue en trois temps :
   1. la carte reste visible, le trajet parcouru se rallume d'un bout à l'autre
   2. l'aurore se lève du bas de l'écran
   3. la carte s'efface derrière le fond de nuit, et le bilan apparaît
   Tout est gaté par [data-anim="non"] plus bas : qui coupe les animations
   arrive directement au troisième temps. */
.arrivee {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 30px; text-align: center;
  background: transparent;
  transition: background-color .9s ease .75s;
}
.arrivee.posee { background: var(--nuit); }
.arrivee::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 50% at 50% 40%, rgba(124,92,255,.24), transparent 70%);
  opacity: 0; transition: opacity .9s ease .75s;
}
.arrivee.posee::before { opacity: 1; }

.contenuArrivee {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; max-width: 420px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease .95s, transform .7s cubic-bezier(.2,.9,.25,1) .95s;
  /* Invisible ne suffit pas : tant qu'il n'est pas là, on ne doit pas pouvoir
     appuyer dessus par mégarde pendant que le trajet se rallume. */
  pointer-events: none;
}
.arrivee.posee .contenuArrivee { opacity: 1; transform: none; pointer-events: auto; }

/* ── L'aurore ────────────────────────────────────────────────────────────
   Trois voiles de lumière qui montent et ondulent. Aucune image : trois
   dégradés floutés qui dérivent, c'est tout — et ça ne coûte presque rien. */
.aurore { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.aurore span {
  position: absolute; left: -30%; right: -30%; bottom: -22%; height: 86%;
  filter: blur(38px); opacity: 0; mix-blend-mode: screen;
  transform-origin: 50% 100%;
}
.aurore .voile1 {
  background: radial-gradient(58% 74% at 32% 100%, rgba(124,92,255,.72), transparent 72%);
  animation: aurore1 7.5s ease-in-out .1s infinite alternate, lever 1.5s ease-out .15s forwards;
}
.aurore .voile2 {
  background: radial-gradient(52% 80% at 66% 100%, rgba(74,200,255,.60), transparent 70%);
  animation: aurore2 9s ease-in-out .4s infinite alternate, lever 1.6s ease-out .35s forwards;
}
.aurore .voile3 {
  background: radial-gradient(46% 62% at 50% 100%, rgba(232,121,249,.50), transparent 74%);
  animation: aurore3 11s ease-in-out .2s infinite alternate, lever 1.8s ease-out .55s forwards;
}
@keyframes lever { from { opacity: 0; transform: translateY(24%) scaleY(.7) } to { opacity: 1 } }
@keyframes aurore1 { from { transform: translateX(-7%) scaleY(.94) skewX(-5deg) }
                     to   { transform: translateX(6%)  scaleY(1.10) skewX(4deg) } }
@keyframes aurore2 { from { transform: translateX(8%)  scaleY(1.08) skewX(6deg) }
                     to   { transform: translateX(-6%) scaleY(.92)  skewX(-4deg) } }
@keyframes aurore3 { from { transform: translateX(-4%) scaleY(1.0)  skewX(2deg) }
                     to   { transform: translateX(5%)  scaleY(1.16) skewX(-3deg) } }

/* ── Les motes ───────────────────────────────────────────────────────────
   Des poussières de lumière qui MONTENT. Des confettis qui tombent, c'est une
   fête d'anniversaire ; de la lumière qui s'élève, c'est une aurore. */
.motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.motes i {
  position: absolute; bottom: -20px; border-radius: 50%;
  animation: monterLumiere linear forwards;
}
@keyframes monterLumiere {
  0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0 }
  12%  { opacity: 1 }
  78%  { opacity: .9 }
  100% { transform: translateY(-108vh) translateX(var(--derive, 0px)) scale(1.1); opacity: 0 }
}

/* ── Le sceau qui éclot ──────────────────────────────────────────────── */
.sceauArrivee { position: relative; display: grid; place-items: center; margin-bottom: 4px; }
.sceauArrivee .halo {
  position: absolute; width: 96px; height: 96px; border-radius: 50%;
  border: 1.5px solid var(--violet-clair); opacity: 0;
  animation: eclore 2.8s cubic-bezier(.2,.7,.3,1) 1.15s infinite;
}
.sceauArrivee .halo.t2 { animation-delay: 2.05s; border-color: var(--cyan); }
@keyframes eclore {
  from { transform: scale(.55); opacity: .85 }
  to   { transform: scale(2.5); opacity: 0 }
}
.arrivee .drapeau {
  font-size: 76px; position: relative; z-index: 1;
  animation: flotter 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 22px rgba(124,92,255,.55));
}
@keyframes flotter { 0%,100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-10px) rotate(3deg) } }
.arrivee h2 { font-size: 25px; font-weight: 600; margin: 10px 0 2px; }
.arrivee p { color: var(--texte-2); margin: 0 0 4px; }
.arrivee .bouton { max-width: 300px; width: 100%; margin-top: 22px; }

/* ── Le bilan du trajet ─────────────────────────────────────────────────
   Ce qu'on vient de faire, en trois chiffres. C'est la substance : sans ça,
   l'écran d'arrivée ne dit rien qu'on ne sache déjà. */
.bilan { display: flex; gap: 10px; width: 100%; margin-top: 18px; }
.bilan div {
  flex: 1; min-width: 0; padding: 12px 6px; border-radius: var(--r-p);
  background: var(--verre-clair); border: 1px solid var(--bord);
}
.bilan b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.4px; }
.bilan small { display: block; color: var(--texte-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: .9px; margin-top: 2px; }

@keyframes apparaitre { from { opacity: 0 } }

/* Animations coupées : on ne joue rien, on montre le résultat tout de suite. */
[data-anim="non"] .arrivee { transition: none; background: var(--nuit); }
[data-anim="non"] .arrivee::before { opacity: 1; transition: none; }
[data-anim="non"] .contenuArrivee { opacity: 1; transform: none; transition: none; pointer-events: auto; }
[data-anim="non"] .aurore, [data-anim="non"] .motes { display: none; }
[data-anim="non"] .arrivee .drapeau, [data-anim="non"] .sceauArrivee .halo { animation: none; }

/* ------------------------------------------------ voile de focus + météo */
.voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 62% 40% at 50% 60%, transparent 0%, rgba(4,2,20,.74) 100%);
  transition: opacity .75s ease;
}
.voile.on { opacity: 1; }
.ambiance { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ambiance::before, .ambiance::after { content: ''; position: absolute; inset: -20%; opacity: 0; transition: opacity 1.5s; }
[data-temps="pluie"] .ambiance::before {
  opacity: .17;
  background-image: repeating-linear-gradient(102deg, transparent 0 24px,
    rgba(190,225,255,.8) 24px 25px, transparent 25px 58px);
  animation: tomberPluie 1s linear infinite;
}
@keyframes tomberPluie { to { transform: translate(-58px, 250px) } }
[data-temps="neige"] .ambiance::before {
  opacity: .32;
  background-image:
    radial-gradient(2.2px 2.2px at 18% 22%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 62% 48%, #fff, transparent),
    radial-gradient(2.4px 2.4px at 84% 12%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 35% 76%, #fff, transparent);
  background-size: 230px 230px; animation: voleter 9s linear infinite;
}
@keyframes voleter { to { transform: translate(-38px, 230px) } }
[data-temps="brume"] .ambiance::after { opacity: .5;
  background: linear-gradient(to top, rgba(150,165,195,.28), transparent 55%); }
[data-anim="non"] .ambiance { display: none; }

/* message fugace */
.info {
  position: absolute; left: 50%; bottom: calc(var(--bas) + 110px); transform: translateX(-50%);
  z-index: 70; max-width: 86vw; text-align: center; font-size: 14px;
  background: var(--verre); border: 1px solid var(--bord); color: var(--texte);
  padding: 12px 20px; border-radius: 999px; box-shadow: var(--ombre); backdrop-filter: blur(20px);
  animation: monter .22s;
}
.info.mauvais { border-color: var(--rouge); box-shadow: var(--ombre), 0 0 22px rgba(255,84,112,.35); }
.chargement {
  display: inline-block; width: 15px; height: 15px; border: 2px solid var(--bord);
  border-top-color: var(--violet); border-radius: 50%; animation: tourner .7s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg) } }

/* ================================================== le rideau d’ouverture */
/* Trois temps : le A se dessine, le nom s’écarte, tout explose en aurore. */

#ouverture {
  position: fixed; inset: 0; z-index: 100; background: #04050f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; overflow: hidden;
  animation: rideauSort .62s cubic-bezier(.5,0,.75,0) 2.28s forwards;
}
@keyframes rideauSort { to { opacity: 0; visibility: hidden; transform: scale(1.09) } }

/* les nappes d’aurore, en fond */
#ouverture .halos i {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%,-50%) scale(.2); opacity: 0; filter: blur(48px);
  animation: halosMontent 2.3s ease-out forwards;
}
#ouverture .halos i:nth-child(1) { width: 88vmin; height: 88vmin;
  background: radial-gradient(circle, rgba(124,92,255,.55), transparent 66%); }
#ouverture .halos i:nth-child(2) { width: 62vmin; height: 62vmin; animation-delay: .16s;
  background: radial-gradient(circle, rgba(74,200,255,.42), transparent 64%); }
#ouverture .halos i:nth-child(3) { width: 44vmin; height: 44vmin; animation-delay: .3s;
  background: radial-gradient(circle, rgba(52,229,176,.34), transparent 62%); }
@keyframes halosMontent {
  30% { opacity: .85; transform: translate(-50%,-50%) scale(.85) }
  72% { opacity: .7;  transform: translate(-50%,-50%) scale(1) }
  100%{ opacity: 0;   transform: translate(-50%,-50%) scale(1.5) }
}

/* le sceau : la planche d’Aurora paraît, prend son élan, puis éclate */
.sceauOuverture {
  width: min(74vw, 320px); height: auto; opacity: 0;
  filter: drop-shadow(0 0 34px rgba(150, 110, 255, .55));
  animation: sceauParait 2.32s cubic-bezier(.3,.85,.3,1) forwards;
}
@keyframes sceauParait {
  0%   { opacity: 0; transform: scale(.70); filter: blur(20px) }
  26%  { opacity: 1 }
  58%  { opacity: 1; transform: scale(1); filter: blur(0)
         drop-shadow(0 0 34px rgba(150, 110, 255, .55)) }
  72%  { transform: scale(.93) }                       /* on prend son élan */
  86%  { transform: scale(1.46); filter: brightness(2.3)
         drop-shadow(0 0 70px rgba(190, 150, 255, .95)) }
  100% { transform: scale(2.5); opacity: 0; filter: brightness(3) }
}

.devise {
  font-size: 12px; color: var(--texte-3); letter-spacing: 1.4px; margin-top: 12px; opacity: 0;
  animation: sousParait .7s ease-out 1.62s forwards;
}

/* l’explosion */
.souffle { position: absolute; inset: 0; pointer-events: none; }
.souffle i {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 3px;
  opacity: 0; animation: projeter 1.05s cubic-bezier(.15,.75,.3,1) 1.9s forwards;
}
@keyframes projeter {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4) }
  12%  { opacity: 1 }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.25) }
}
.souffle b {                              /* les ondes de choc */
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid rgba(183,156,255,.85); opacity: 0;
  transform: translate(-50%,-50%) scale(.2);
  animation: onde 1.15s cubic-bezier(.1,.7,.3,1) 1.9s forwards;
}
.souffle b:nth-of-type(2) { animation-delay: 2.02s; border-color: rgba(74,200,255,.7) }
.souffle b:nth-of-type(3) { animation-delay: 2.14s; border-color: rgba(52,229,176,.55) }
@keyframes onde {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.2) }
  18%  { opacity: 1 }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(11); border-width: .5px }
}
.eclair {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
  animation: flash .42s ease-out 1.9s forwards;
}
@keyframes flash { 0% { opacity: 0 } 14% { opacity: .82 } 100% { opacity: 0 } }

/* Sans animations, le rideau se contente d’exister un instant. */
[data-anim="non"] #ouverture { animation: rideauSort .3s ease-out .5s forwards }
[data-anim="non"] #ouverture .sceauOuverture { opacity: 1; transform: none; filter: none; animation: none }

/* ------------------------------------------------------------- l’avis */
.sujets { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 4px; }
.sujet {
  display: flex; align-items: center; gap: 9px; padding: 14px 13px; border-radius: 15px;
  background: var(--verre-clair); border: 1px solid transparent;
  font-size: 14px; text-align: left; transition: .18s;
}
.sujet span { font-size: 19px; }
.sujet.on {
  border-color: var(--violet); background: rgba(124, 92, 255, .16);
  box-shadow: var(--lueur); font-weight: 600;
}
.apercuTechnique {
  margin: 12px 0 0; padding: 13px 15px; border-radius: 14px;
  background: rgba(0, 0, 0, .34); border: 1px solid var(--bord);
  font: 11.5px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--texte-2); white-space: pre-wrap; word-break: break-word;
  max-height: 210px; overflow-y: auto;
}
textarea.saisie { display: block; font-family: inherit; }

/* ------------------------------------------- le guide d’installation iOS */
.guide {
  position: fixed; inset: 0; z-index: 95; background: rgba(4, 5, 15, .96);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 30px 26px calc(var(--bas) + 82px); text-align: center;
  animation: apparaitre .35s;
}
.guide::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 46% at 50% 22%, rgba(124,92,255,.22), transparent 68%);
}
.guideSceau { width: 78px; height: 78px; border-radius: 20px; box-shadow: var(--ombre); }
.guide h2 { font-size: 23px; font-weight: 600; margin: 16px 0 6px; }
.guideMot { color: var(--texte-2); font-size: 14px; margin: 0 0 24px; max-width: 330px; line-height: 1.6; }
.guideEtapes { list-style: none; margin: 0; padding: 0; max-width: 340px; text-align: left; }
.guideEtapes li { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px;
  font-size: 15px; line-height: 1.5; }
.guideEtapes .n {
  flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%;
  background: linear-gradient(100deg, var(--violet), var(--cyan));
  color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.guideEtapes .partage { width: 17px; height: 17px; vertical-align: -3px; color: var(--cyan); }
.guideNote { color: var(--texte-3); font-size: 12.5px; line-height: 1.6;
  max-width: 330px; margin: 6px 0 0; }
/* la flèche qui descend vers le bouton Partager de Safari */
.guideFleche {
  position: absolute; left: 50%; bottom: calc(var(--bas) + 18px); transform: translateX(-50%);
  font-size: 32px; color: var(--cyan); animation: pointer 1.5s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(74, 200, 255, .8);
}
@keyframes pointer {
  0%, 100% { transform: translate(-50%, 0); opacity: .55 }
  50%      { transform: translate(-50%, 12px); opacity: 1 }
}
.guide .bouton { position: absolute; top: calc(var(--haut) + 14px); right: 18px;
  flex: 0 0 auto; padding: 10px 16px; font-size: 14px; background: var(--verre-clair); }

/* ============================================ l’accueil EST la carte */
/* Un GPS s’ouvre sur la route, pas sur un sommaire : l’onglet Accueil laisse
   voir la carte, et ne pose au-dessus qu’une barre de recherche et un socle. */

#ecranAccueil.surCarte { background: transparent; pointer-events: none; }
#ecranAccueil.surCarte::before { display: none; }
#ecranAccueil.surCarte .onglets { pointer-events: auto; }

.vueOnglet.surLaCarte {
  display: flex; flex-direction: column; overflow: visible; padding: 0;
}
.hautCarte { padding: calc(var(--haut) + 10px) 14px 0; pointer-events: auto; }
.respire { flex: 1; pointer-events: none; }   /* la carte reste saisissable ici */

/* la barre de recherche flotte : elle doit se détacher du fond */
.surLaCarte .recherche {
  background: var(--verre); box-shadow: var(--ombre);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-radius: 999px; padding: 15px 20px; color: var(--texte);
}
.surLaCarte .recherche span:not(.loupe):not(.micro) { font-weight: 500; }
.recherche .loupe, .recherche .micro { display: flex; color: var(--texte-2); }

.socleAccueil {
  pointer-events: auto; margin: 0 10px 8px;
  background: var(--verre); border: 1px solid var(--bord);
  border-radius: var(--r); box-shadow: var(--ombre);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 10px 14px 14px;
  animation: surgir .34s cubic-bezier(.2,.9,.25,1);
}
.socleAccueil .poignee {
  display: block; width: 42px; height: 5px; border-radius: 3px;
  background: var(--bord); margin: 0 auto 12px; border: 0;
}
.socleAccueil .raccourcis { margin-top: 0; }
/* replié par défaut : on ne mange pas la carte */
.socleAccueil .deplie {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .34s cubic-bezier(.3,.9,.3,1), opacity .24s;
}
.socleAccueil.ouvert .deplie { max-height: 44vh; overflow-y: auto; opacity: 1; }
.socleAccueil.ouvert .poignee { background: var(--violet); }
.socleAccueil .sousTitre { font-size: 15px; margin: 18px 0 9px; }

/* les raccourcis, au trait */
.raccourci .rIcone { display: flex; color: var(--violet-clair); }

/* l’attribution de la carte ne doit pas passer sous les socles */
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left {
  bottom: calc(var(--bas) + 118px) !important; opacity: .32; z-index: 3;
}
.maplibregl-ctrl-attrib-inner { font-size: 8.5px; }

/* la bannière, désormais en tête du Profil */
#vueProfil .banniere { height: 132px; margin: 0 0 18px; }

/* pictogrammes au trait dans les pastilles et les listes */
.pastille svg { width: 22px; height: 22px; }
.pastille b { font-size: 14px; font-weight: 700; }
.chevron svg { width: 17px; height: 17px; }
.ligne .rond svg { width: 18px; height: 18px; color: var(--violet-clair); }
.butIcone { display: flex; color: var(--violet-clair); }
.vide svg { width: 40px; height: 40px; margin: 0 auto 12px; display: block;
  opacity: .4; stroke-width: 1.5; }
.arrivee .drapeau svg { width: 84px; height: 84px; color: var(--violet-clair);
  stroke-width: 1.6; filter: drop-shadow(0 0 22px rgba(139,92,255,.7)); }

/* --------------------------------------------------- le mot dans le Profil */
#vueProfil .entetteProfil {
  flex-direction: column; align-items: center; gap: 18px;
  margin: 6px 0 22px; text-align: center;
}
#vueProfil .sceau { width: 92px; height: 92px; border-radius: 23px; }
.motLogo { width: min(76%, 280px); height: auto; display: block;
  filter: drop-shadow(0 0 18px rgba(139, 92, 255, .32)); }
.rond.on, .ligne .rond.on { color: var(--violet-clair); border-color: var(--violet);
  background: rgba(139, 92, 255, .18); box-shadow: var(--lueur); }

/* ------------------------------------------------- vignettes de véhicule */
.picVehicule { object-fit: contain; vertical-align: middle;
  filter: drop-shadow(0 0 8px rgba(139, 92, 255, .45)); }
.profil { display: flex; align-items: center; gap: 8px; padding: 8px 15px 8px 9px; }
.profil.on .picVehicule { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .7)); }

.grilleVehicules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.tuileVehicule {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 6px 11px; border-radius: 16px; font-size: 12.5px;
  background: var(--verre-clair); border: 1px solid transparent; transition: .18s;
}
.tuileVehicule.on {
  border-color: var(--violet); background: rgba(139, 92, 255, .16);
  box-shadow: var(--lueur); font-weight: 600;
}
.tuileVehicule.on .picVehicule { filter: drop-shadow(0 0 12px rgba(190, 160, 255, .95)); }

/* ==================================================== les signalements */

/* le bouton : rond, chaud, toujours à portée du pouce */
.signaler {
  position: absolute; left: 14px; bottom: calc(var(--bas) + 118px);
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #ff8a3c, #ff4d6a);
  color: #fff; box-shadow: 0 10px 30px rgba(255, 77, 106, .42), var(--ombre);
  transition: transform .14s;
}
.signaler:active { transform: scale(.9); }
.signaler svg { width: 28px; height: 28px; stroke-width: 2; }

/* la grille du catalogue */
.grilleAlertes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grilleAlertes.categories { grid-template-columns: repeat(2, 1fr); }
.tuileAlerte {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px 12px; border-radius: 18px; font-size: 12.5px; line-height: 1.25;
  text-align: center; background: var(--verre-clair);
  border: 1px solid var(--bord); transition: transform .13s, background .2s, border-color .2s;
}
.tuileAlerte:active { transform: scale(.95); }
.tuileAlerte img { width: 46px; height: 46px; object-fit: contain;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--teinte) 70%, transparent)); }
.categories .tuileAlerte img { width: 54px; height: 54px; }
.tuileAlerte span { color: var(--texte); font-weight: 500; }
.tuileAlerte i { font-style: normal; font-size: 10.5px; color: var(--texte-3); }
.tuileAlerte:hover, .tuileAlerte:focus-visible {
  border-color: var(--teinte); background: color-mix(in srgb, var(--teinte) 12%, transparent);
}
.retourCat { font-size: 26px; line-height: 1; color: var(--texte-2); padding: 0 8px 0 0; }

/* le bandeau de confirmation, avec son délai de rétractation */
.info.signale { display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 12px 10px 14px; }
.info.signale img { width: 34px; height: 34px; object-fit: contain; }
.info.signale small { display: block; color: var(--texte-2); font-size: 12px; }
.info.signale .annuler { padding: 8px 13px; border-radius: 12px;
  background: var(--verre-clair); font-size: 13px; font-weight: 600; }

/* l’alerte à l’approche, pendant la route */
.alerteProche {
  position: absolute; left: 14px; right: 14px; bottom: calc(var(--bas) + 196px);
  display: flex; align-items: center; gap: 13px; padding: 13px 16px;
  background: var(--verre); border: 1px solid var(--teinte, var(--bord));
  border-left: 4px solid var(--teinte, var(--violet));
  border-radius: 16px; box-shadow: var(--ombre); backdrop-filter: blur(22px);
  animation: monter .3s cubic-bezier(.2,.9,.25,1);
}
.alerteProche img { width: 40px; height: 40px; object-fit: contain;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--teinte) 70%, transparent)); }
.alerteProche b { display: block; font-size: 15px; }
.alerteProche small { color: var(--texte-2); font-size: 13px; }

/* ── Le radar fixe ────────────────────────────────────────────────────────
   Un bandeau à part, et non un signalement de plus : sa distance DESCEND en
   direct jusqu'au passage, là où un signalement s'affiche puis s'efface. */
.radarProche { bottom: calc(var(--bas) + 196px); --teinte: #ff9a3c; }
.radarLimite {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-weight: 800;
  font-size: 18px; color: #14161f; background: #fff;
  border: 5px solid var(--rouge); box-shadow: 0 0 14px rgba(255,84,112,.4);
}
/* ⚠️ Le bandeau vire au rouge quand on est AU-DESSUS de la vitesse contrôlée
   en arrivant dessus : c'est la seule information qui vaut d'être criée. */
.radarProche.trop { --teinte: var(--rouge); animation: radarBattre .7s ease-in-out infinite; }
@keyframes radarBattre { 50% { filter: brightness(1.28) } }
[data-anim="non"] .radarProche.trop { animation: none; }

/* La punaise d'un radar : le pictogramme, et la vitesse contrôlée en pastille. */
.punaise.radar img { width: 34px; height: 34px; }
.punaise.radar::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--teinte, #ff9a3c); opacity: .75;
}
.punaise .kmh {
  position: absolute; right: -7px; top: -5px;
  min-width: 21px; height: 21px; padding: 0 3px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  color: #14161f; background: #fff; border: 2.5px solid var(--rouge);
}

/* la punaise sur la carte */
.punaise {
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.75));
}
.punaise img { width: 40px; height: 40px; object-fit: contain; }
.punaise::after {
  content: ''; position: absolute; inset: auto auto -4px 50%; transform: translateX(-50%);
  width: 26px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(3px);
}
.punaise.mien::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--violet-clair); opacity: .8;
}


/* ══════════════════════════════════════════ LA VEILLE DU CONDUCTEUR ══════
   L'anti-somnolence. Trois partis pris tiennent tout ce bloc :

   ⚠️⚠️ 1. L'ÉCRAN ENTIER EST LE BOUTON. Faire viser un « OK » à quelqu'un qui
   conduit, c'est lui faire quitter la route des yeux — plus dangereux que la
   somnolence légère qu'on cherche à détecter. Ici la main tombe n'importe où.
   ⚠️ 2. Le voile n'est PAS opaque : la route reste devinée dessous, et
   l'instruction de navigation continue d'être annoncée par la voix.
   ⭐ 3. Le bouton « Je m'arrête » est HORS du grand bouton, en bas, petit :
   on ne doit pas le déclencher d'une main posée au hasard. */
.vigilance {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  animation: vigilanceEntree .18s ease-out;
}
@keyframes vigilanceEntree { from { opacity: 0 } to { opacity: 1 } }

.vigilanceFond {
  flex: 1; width: 100%; border: 0; margin: 0;
  padding: calc(var(--haut) + 20px) 24px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; cursor: pointer;
  color: var(--texte); font: inherit; -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(74% 44% at 50% 42%, rgba(124, 92, 255, .32), transparent 72%),
    rgba(4, 5, 16, .88);
  backdrop-filter: blur(3px);
}
.vigilanceFond:active { background:
    radial-gradient(74% 44% at 50% 42%, rgba(124, 92, 255, .5), transparent 72%),
    rgba(4, 5, 16, .9); }
.vigilanceFond b {
  font-size: clamp(30px, 9vw, 46px); font-weight: 700; letter-spacing: -.5px;
  background: linear-gradient(100deg, var(--cyan), var(--violet-clair), var(--rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vigilanceFond small { font-size: 15px; color: var(--texte-2); }
.vigilanceMots { display: flex; flex-direction: column; gap: 7px; }

/* Le pouls : trois anneaux qui s'ouvrent, comme une respiration. Il donne le
   rythme sur lequel se caler — et il se voit du coin de l'œil, sans lire. */
.vigilancePouls { position: relative; width: 108px; height: 108px; margin-bottom: 6px; }
.vigilancePouls i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--violet-clair); opacity: 0;
  animation: vigilancePouls 2.1s cubic-bezier(.2,.7,.3,1) infinite;
}
.vigilancePouls i:nth-child(2) { animation-delay: .7s; }
.vigilancePouls i:nth-child(3) { animation-delay: 1.4s; }
@keyframes vigilancePouls {
  0%   { transform: scale(.42); opacity: 0 }
  22%  { opacity: .95 }
  100% { transform: scale(1); opacity: 0 }
}

.vigilancePied {
  padding: 0 20px calc(var(--bas) + 18px);
  display: flex; justify-content: center;
  background: linear-gradient(to top, rgba(4,5,16,.9), transparent);
}
.vigilancePied .bouton { opacity: .82; }

/* On insiste : la deuxième salve. Le violet devient ambre, le pouls s'emballe. */
.vigilance.insiste .vigilanceFond {
  background:
    radial-gradient(74% 44% at 50% 42%, rgba(255, 154, 60, .4), transparent 72%),
    rgba(14, 5, 4, .9);
  animation: vigilanceBattre .62s ease-in-out infinite;
}
.vigilance.insiste .vigilancePouls i { border-color: #ffc93c; animation-duration: 1.1s; }
.vigilance.insiste .vigilanceFond b { background: none; color: #ffd98a; }
@keyframes vigilanceBattre { 50% { filter: brightness(1.32) } }

/* ⚠️⚠️ Passé vingt-cinq secondes sans réponse, on CESSE de masquer la route :
   quelqu'un qui ne répond pas gère peut-être quelque chose de plus urgent
   qu'un test de vigilance. L'écran s'efface, le son ne lâche pas. */
.vigilance.discret { pointer-events: auto; }
.vigilance.discret .vigilanceFond {
  background: radial-gradient(74% 44% at 50% 42%, rgba(255, 84, 112, .3), transparent 72%);
  backdrop-filter: none;
}
.vigilance.discret .vigilancePied { background: none; }

/* Le bandeau de pause : il survit à la fermeture de l'écran, sinon le conseil
   disparaît avant qu'on ait pu le lire. */
.repos {
  position: absolute; left: 50%; bottom: calc(var(--bas) + 110px);
  transform: translateX(-50%); z-index: 72;
  display: flex; align-items: center; gap: 12px; text-align: left;
  max-width: 88vw; padding: 13px 16px; border-radius: var(--r-p);
  background: var(--verre); border: 1px solid rgba(255, 201, 60, .45);
  box-shadow: var(--ombre), 0 0 26px rgba(255, 201, 60, .22);
  backdrop-filter: blur(20px); animation: monter .22s;
}
.repos .picto { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.repos b { display: block; font-size: 14.5px; }
.repos small { display: block; color: var(--texte-2); font-size: 12.5px; margin-top: 2px; }
.repos button {
  flex: 0 0 auto; border: 0; background: var(--verre-clair); color: var(--texte-2);
  width: 30px; height: 30px; border-radius: 50%; font-size: 15px; cursor: pointer;
}

[data-anim="non"] .vigilancePouls i,
[data-anim="non"] .vigilance.insiste .vigilanceFond { animation: none; }
[data-anim="non"] .vigilancePouls i:first-child { opacity: .9; }

/* ==================================================== l'écran couché ====
   ⚠️⚠️ Aurora n'avait AUCUNE règle d'écran : elle a été dessinée pour un
   téléphone debout, en 844 px de haut. Couché, il n'en reste que ~390 — la
   carte de manœuvre, les chiffres et le socle ne tiennent plus ensemble.
   ⭐ Le paysage n'enlève pas de la place, il la DÉPLACE : on perd en hauteur
   ce qu'on gagne en largeur. On ne rétrécit donc pas tout bêtement — on range
   la manœuvre sur le côté et on empêche les socles de s'étirer sur toute la
   largeur, ce qui laisse voir la route au milieu.
   ⚠️ Borné à 600 px de haut : une tablette couchée a la place, elle garde la
   mise en page normale. */
@media (orientation: landscape) and (max-height: 600px) {
  #surCarte {
    padding: calc(var(--haut) + 6px) calc(var(--droite) + 12px)
             calc(var(--bas) + 8px) calc(var(--gauche) + 12px);
  }

  /* La manœuvre se range à gauche au lieu de barrer tout l'écran. */
  .manoeuvre { align-self: flex-start; width: min(58%, 430px); }
  .mHaut { padding: 10px 14px 9px; gap: 12px; }
  .mIcone { width: 40px; flex: 0 0 40px; height: 40px; font-size: 32px; }
  .mIcone svg { width: 38px; height: 38px; }
  .mDistance { font-size: 26px; }
  .mInstruction { font-size: 15px; }
  .mRue { font-size: 13px; }

  /* Trois chiffres étalés sur 900 px seraient perdus : on recentre. */
  .socle { max-width: 580px; width: 100%; align-self: center; padding: 10px 16px; }
  .chiffres b { font-size: 19px; }
  .chiffres small { font-size: 10px; }
  .socleAccueil {
    max-width: 580px; width: calc(100% - 20px);
    margin: 0 auto 6px; padding: 8px 14px 10px;
  }
  .socleAccueil .poignee { margin-bottom: 8px; }

  /* Tout ce qui monte du bas doit pouvoir DÉFILER : sur 390 px, plus rien
     ne tient d'un seul tenant. */
  .feuilleCorps { max-height: 88vh; }
  .socleAccueil.ouvert .deplie { max-height: 46vh; }

  /* Les pastilles flottantes étaient calées sur la hauteur d'un socle debout :
     à 208 px du bas, elles sortaient par le haut. */
  .panneauVitesse {
    right: calc(var(--droite) + 16px); bottom: calc(var(--bas) + 104px);
    width: 50px; height: 50px; border-width: 5px;
  }
  .vitesse {
    right: calc(var(--droite) + 12px); bottom: calc(var(--bas) + 52px);
    width: 62px; height: 62px;
  }

  /* Les écrans pleins (réglages, recherche) : on respire moins du haut. */
  .panneau .entete { padding-top: calc(var(--haut) + 8px); }
  .panneau .corps { padding-left: calc(var(--gauche) + 16px);
                    padding-right: calc(var(--droite) + 16px); }

  /* Couché, le titre géant et le pouls ne tiennent plus ensemble : le pouls
     passe à côté du texte plutôt que dessus. */
  .vigilanceFond { flex-direction: row; gap: 22px; padding-top: calc(var(--haut) + 10px); }
  .vigilancePouls { width: 74px; height: 74px; margin: 0; }
  .vigilanceFond b { font-size: clamp(24px, 5.4vh, 34px); }
  .vigilancePied { padding-bottom: calc(var(--bas) + 10px); }
}