/* L'Échappée — l'habillage.

   Direction : l'affiche de voyage. Papier crème, encre épaisse, couleurs
   franches, ombres portées dures et décalées. Rien de vitré, rien de
   translucide, rien de gris : chaque élément est un objet posé sur la table,
   avec un contour et une ombre, qu'on peut appuyer.

   Trois polices, embarquées, licence libre :
   — Bungee pour l'enseigne (le logo, les tampons)
   — Baloo 2 pour les titres et les chiffres
   — Fredoka pour tout le reste
*/

@font-face{font-family:'Enseigne';src:url('polices/bungee.woff2')format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Titre';src:url('polices/baloo-700.woff2')format('woff2');
  font-weight:700;font-display:swap}
@font-face{font-family:'Titre';src:url('polices/baloo-800.woff2')format('woff2');
  font-weight:800;font-display:swap}
@font-face{font-family:'Texte';src:url('polices/fredoka-400.woff2')format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Texte';src:url('polices/fredoka-600.woff2')format('woff2');
  font-weight:600;font-display:swap}

:root{
  /* le papier et l'encre */
  --papier:#fbf3e4; --papier2:#f3e6cd; --papier3:#eadbbd;
  --encre:#1e2d38; --encre2:#54636f; --encre3:#8b9099;

  /* les couleurs franches */
  --orange:#f0682a; --orange-fonce:#c94d17;
  --moutarde:#f5b92e; --menthe:#17886b; --azur:#2d7db8;
  --brique:#ce3f35; --prune:#7d4a8e;

  --trait:2.5px;
  --rayon:18px;
  --ombre:4px 4px 0 var(--encre);
  --ombre-petite:3px 3px 0 var(--encre);
  --haut:env(safe-area-inset-top);
  --bas:env(safe-area-inset-bottom);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--papier); color:var(--encre);
  font-family:'Texte',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; font-weight:400;
}
h1,h2,h3{margin:0;font-family:'Titre',sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.005em}
p{margin:0}
button{font-family:inherit;font-size:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font-family:inherit;font-size:16px}
.cache{display:none !important}

/* Le grain du papier : une trame très légère, qui enlève l'aplat numérique. */
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:radial-gradient(circle at 1px 1px, rgba(30,45,56,.055) 1px, transparent 0);
  background-size:7px 7px;
}

#toile{
  position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;
  z-index:5;opacity:0;pointer-events:none;transition:opacity .45s
}
#toile.actif{opacity:1}

/* =========================================================
   Briques de base
   ========================================================= */
.carton{
  position:relative;
  background:var(--papier);
  border:var(--trait) solid var(--encre);
  border-radius:var(--rayon);
  box-shadow:var(--ombre);
}

/* Le bouton : un objet qu'on enfonce vraiment. */
.bouton{
  display:block;width:100%;padding:15px 18px;
  font-family:'Titre',sans-serif;font-weight:800;font-size:18px;
  background:var(--orange);color:var(--papier);
  border:var(--trait) solid var(--encre);
  border-radius:15px;
  box-shadow:var(--ombre);
  text-align:center;letter-spacing:.005em;
  transition:transform .07s, box-shadow .07s;
}
.bouton:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--encre)}
.bouton.fantome{background:var(--papier);color:var(--encre)}
.bouton.menthe{background:var(--menthe);color:var(--papier)}
.bouton[disabled]{background:var(--papier3);color:var(--encre3);box-shadow:var(--ombre);opacity:1}
.bouton[disabled]:active{transform:none;box-shadow:var(--ombre)}

/* Le tampon : petite étiquette penchée, comme sur un passeport. */
.etiq{
  display:inline-block;
  font-family:'Enseigne',sans-serif;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre);
  background:var(--moutarde);
  border:2px solid var(--encre);border-radius:7px;
  padding:4px 9px 3px;margin-bottom:11px;
  transform:rotate(-1.6deg);
}
.etiq.menthe{background:var(--menthe);color:var(--papier)}
.etiq.azur{background:var(--azur);color:var(--papier)}

.aide{font-size:13px;line-height:1.55;color:var(--encre2)}

/* =========================================================
   Le bandeau du haut, pendant la course
   ========================================================= */
#hud{
  position:fixed;left:0;right:0;top:0;z-index:10;
  padding:calc(var(--haut) + 10px) 14px 0;
  pointer-events:none;
  transition:opacity .35s, transform .35s;
}
#hud.efface{opacity:0;transform:translateY(-12px)}
.jauge{
  position:relative;
  background:var(--papier);
  border:var(--trait) solid var(--encre);
  border-radius:16px;padding:11px 14px 12px;
  box-shadow:var(--ombre);
}
.jauge .ligne1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.jauge .km{font-family:'Titre',sans-serif;font-size:26px;font-weight:800;line-height:1}
.jauge .km small{font-family:'Texte',sans-serif;font-size:11px;font-weight:600;color:var(--encre2);margin-left:4px}
.jauge .but{font-size:11.5px;color:var(--encre2);font-weight:600;text-align:right;line-height:1.3}
.barre{
  height:11px;border-radius:99px;background:var(--papier3);
  border:2px solid var(--encre);margin:9px 0 8px;overflow:hidden
}
.barre i{display:block;height:100%;background:var(--orange);transition:width .5s}
.jauge .pied{display:flex;justify-content:space-between;font-size:11.5px;color:var(--encre2)}
.jauge .pied b{color:var(--encre);font-weight:600}

/* =========================================================
   Le bas de l'écran
   ========================================================= */
#bas{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  padding:0 14px calc(var(--bas) + 14px);
  display:flex;flex-direction:column;gap:11px;
  transition:opacity .35s, transform .35s;
}
#bas.efface{opacity:0;transform:translateY(24px);pointer-events:none}
#lancer{
  position:relative;
  padding:17px;border-radius:17px;
  font-family:'Enseigne',sans-serif;font-size:16px;letter-spacing:.01em;
  background:var(--orange);color:var(--papier);
  border:var(--trait) solid var(--encre);
  box-shadow:5px 5px 0 var(--encre);
  text-align:center;
  transition:transform .07s, box-shadow .07s;
}
#lancer:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--encre)}
.rangee{display:flex;gap:9px}
.rangee button{
  flex:1;padding:9px 2px 8px;border-radius:14px;
  background:var(--papier);color:var(--encre);
  border:var(--trait) solid var(--encre);
  box-shadow:var(--ombre-petite);
  font-size:10.5px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:transform .07s, box-shadow .07s;
}
.rangee button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--encre)}
.rangee button:nth-child(1){background:var(--moutarde)}
.rangee button:nth-child(2){background:var(--azur);color:var(--papier)}
.rangee button:nth-child(3){background:var(--menthe);color:var(--papier)}
.rangee button:nth-child(4){background:var(--prune);color:var(--papier)}

/* =========================================================
   Les panneaux qui montent du bas
   ========================================================= */
.feuille{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--papier);
  border-top:var(--trait) solid var(--encre);
  border-radius:24px 24px 0 0;
  padding:8px 16px calc(var(--bas) + 20px);
  transform:translateY(100%);transition:transform .34s cubic-bezier(.22,.9,.3,1);
}
.feuille.ouverte{transform:translateY(0)}
.feuille.basse{max-height:52dvh}
.feuille .poignee{
  width:46px;height:5px;border-radius:99px;background:var(--encre);
  margin:6px auto 16px;opacity:.28
}
.feuille h2{font-size:27px;margin-bottom:5px;letter-spacing:-.015em}
.feuille .sous{font-size:13.5px;color:var(--encre2);margin-bottom:18px;line-height:1.55}
#voile{
  position:fixed;inset:0;z-index:35;background:rgba(30,45,56,.42);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
#voile.ouvert{opacity:1;pointer-events:auto}
#voile.doux{background:rgba(30,45,56,.14)}

/* champs */
.champ{margin-bottom:15px}
.champ label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--encre2)}
.champ input,.champ select,.reglage select{
  width:100%;padding:13px 13px;border-radius:13px;
  background:var(--papier2);color:var(--encre);font-weight:600;
  border:var(--trait) solid var(--encre);
}
.champ input:focus,.reglage select:focus{outline:none;background:#fff;box-shadow:var(--ombre-petite)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* pastilles de choix */
.pastilles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pastille{
  padding:9px 13px;border-radius:12px;
  border:var(--trait) solid var(--encre);
  background:var(--papier);color:var(--encre);
  font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:7px;
  box-shadow:2px 2px 0 var(--encre);
  transition:transform .07s, box-shadow .07s;
}
.pastille:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--encre)}
.pastille.choisi{background:var(--orange);color:var(--papier)}
.teinte{
  width:42px;height:42px;border-radius:13px;
  border:var(--trait) solid var(--encre);box-shadow:2px 2px 0 var(--encre)
}
.teinte.choisi{box-shadow:0 0 0 3px var(--papier), 0 0 0 6px var(--orange)}

/* =========================================================
   Le compteur de la sortie
   ========================================================= */
.compteur{display:flex;align-items:stretch;gap:10px;margin-bottom:12px}
.compteur .cran{
  flex:none;width:58px;
  border-radius:15px;
  border:var(--trait) solid var(--encre);
  background:var(--moutarde);color:var(--encre);
  font-family:'Titre',sans-serif;font-size:30px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--ombre-petite);
  transition:transform .07s, box-shadow .07s;
}
.compteur .cran:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--encre)}
.compteur .valeur{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--papier2);border:var(--trait) solid var(--encre);
  border-radius:15px;padding:10px 12px;
}
.compteur .valeur input{
  width:100%;max-width:130px;background:none;border:0;text-align:right;
  font-family:'Titre',sans-serif;font-size:42px;font-weight:800;line-height:1;
  color:var(--encre);padding:0;-moz-appearance:textfield;
}
.compteur .valeur input::-webkit-outer-spin-button,
.compteur .valeur input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.compteur .valeur input:focus{outline:none}
.compteur .valeur small{font-family:'Titre',sans-serif;font-size:17px;font-weight:700;color:var(--encre2)}

.raccourcis{display:flex;gap:8px;margin-bottom:8px}
.raccourcis button{
  flex:1;padding:10px 0 9px;border-radius:12px;
  border:var(--trait) solid var(--encre);background:var(--papier);
  font-family:'Titre',sans-serif;font-size:15px;font-weight:700;color:var(--encre);
  box-shadow:2px 2px 0 var(--encre);
  transition:transform .07s, box-shadow .07s;
}
.raccourcis button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--encre)}
.raccourcis button.choisi{background:var(--orange);color:var(--papier)}

/* le second champ, facultatif */
.appoint{
  display:flex;align-items:center;gap:11px;margin:0 0 16px;
  padding:11px 13px;border-radius:13px;
  background:var(--papier2);border:2px dashed var(--encre3);
}
.appoint label{flex:1;font-size:13px;font-weight:600;color:var(--encre2);line-height:1.35}
.appoint label em{display:block;font-style:normal;font-size:11.5px;color:var(--encre3);font-weight:400}
.appoint input{
  width:86px;flex:none;text-align:center;padding:9px 6px;border-radius:11px;
  background:var(--papier);border:2px solid var(--encre);
  font-family:'Titre',sans-serif;font-size:20px;font-weight:700;color:var(--encre);
  -moz-appearance:textfield;
}
.appoint input::-webkit-outer-spin-button,
.appoint input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.appoint input:focus{outline:none;background:#fff}

.reglage{margin-bottom:16px}
.reglage label{display:block;font-size:13px;font-weight:600;color:var(--encre2);margin-bottom:7px}

/* le résultat du calcul */
.calcul{
  position:relative;
  background:var(--menthe);color:var(--papier);
  border:var(--trait) solid var(--encre);border-radius:16px;
  padding:15px 16px;margin-bottom:16px;box-shadow:var(--ombre);
}
.calcul .gros{font-family:'Titre',sans-serif;font-size:36px;font-weight:800;line-height:1}
.calcul .gros small{font-family:'Texte',sans-serif;font-size:13px;font-weight:600;opacity:.85;margin-left:5px}
.calcul .bonne{font-size:13.5px;font-weight:600;margin-top:7px}
.calcul .reste{font-size:13px;margin-top:7px;opacity:.88}
.calcul .attente{font-size:13.5px;line-height:1.5;opacity:.9}
.calcul.vide{background:var(--papier2);color:var(--encre2);box-shadow:var(--ombre-petite)}
.calcul .pourquoi{
  display:block;margin-top:11px;font-size:12.5px;font-weight:600;
  color:inherit;opacity:.9;text-decoration:underline;text-underline-offset:3px
}
.calcul ul{margin:11px 0 0;padding-left:18px}
.calcul li{font-size:12.5px;line-height:1.6;margin-bottom:4px;opacity:.9}
.calcul li:last-child{font-weight:600;opacity:1}

/* recherche de ville */
.trouve{max-height:230px;overflow-y:auto;margin:-8px 0 16px}
.trouve button{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 12px;border-radius:12px;border:2px solid transparent;text-align:left;
}
.trouve button:active{border-color:var(--encre);background:var(--papier2)}
.trouve b{font-weight:600}
.trouve em{font-style:normal;font-size:12px;color:var(--encre2);flex:none}

/* =========================================================
   La carte
   ========================================================= */
#vue-carte{
  position:fixed;inset:0;z-index:1;background:#bfdceb;
  transition:opacity .45s;
}
#vue-carte.efface{opacity:0;pointer-events:none}
#fond-google{position:absolute;inset:0;display:none}
#fond-google.actif{display:block}
#toile-carte{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.carte-haut{
  position:fixed;left:0;right:0;top:0;z-index:10;
  transition:opacity .35s, transform .35s;
  padding:calc(var(--haut) + 10px) 12px 0;
  display:flex;align-items:center;gap:10px;pointer-events:none;
}
.carte-haut button,.carte-outils button{
  pointer-events:auto;flex:none;
  width:46px;height:46px;border-radius:14px;
  background:var(--papier);color:var(--encre);
  border:var(--trait) solid var(--encre);
  box-shadow:var(--ombre-petite);
  display:flex;align-items:center;justify-content:center;
  transition:transform .07s, box-shadow .07s;
}
.carte-haut button:active,.carte-outils button:active{
  transform:translate(3px,3px);box-shadow:0 0 0 var(--encre)
}
.carte-titre{
  pointer-events:none;flex:1;min-width:0;
  background:var(--papier);border:var(--trait) solid var(--encre);
  border-radius:14px;padding:8px 13px 7px;
  box-shadow:var(--ombre-petite);color:var(--encre);
}
.carte-titre b{
  display:block;font-family:'Titre',sans-serif;font-size:16px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.carte-titre span{display:block;font-size:11.5px;color:var(--encre2);margin-top:1px;font-weight:600}
.carte-outils{
  position:fixed;right:12px;bottom:calc(var(--bas) + 300px);z-index:10;
  display:flex;flex-direction:column;gap:10px;
  transition:opacity .35s;
}

/* la fiche du bas : un ticket, avec ses crans */
.carte-bas{
  position:fixed;left:12px;right:12px;bottom:calc(var(--bas) + 146px);z-index:10;
  background:var(--papier);color:var(--encre);
  border:var(--trait) solid var(--encre);border-radius:17px;
  padding:14px 17px 13px;box-shadow:var(--ombre);
  transition:opacity .35s, transform .35s;
  cursor:pointer;
}
.carte-bas:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--encre)}
.carte-bas .ou{
  display:inline-block;font-family:'Enseigne',sans-serif;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--orange);color:var(--papier);
  border:2px solid var(--encre);border-radius:6px;
  padding:3px 8px 2px;margin-bottom:7px;transform:rotate(-1.5deg);
}
.carte-bas .ville{font-family:'Titre',sans-serif;font-size:25px;font-weight:800;line-height:1.05}
.carte-bas .det{font-size:13px;color:var(--encre2);margin-top:2px;font-weight:600}
.carte-bas .rail{
  height:11px;border-radius:99px;background:var(--papier3);
  border:2px solid var(--encre);margin:11px 0 9px;overflow:hidden
}
.carte-bas .rail i{display:block;height:100%;background:var(--orange)}
.carte-bas .chiffres{display:flex;justify-content:space-between;font-size:12px;color:var(--encre2)}
.carte-bas .chiffres b{color:var(--encre);font-weight:600}
.carte-bas::after{
  content:'';position:absolute;right:15px;top:20px;
  width:9px;height:9px;border-right:2.5px solid var(--encre3);border-bottom:2.5px solid var(--encre3);
  transform:rotate(-45deg)
}
.credit{
  position:fixed;left:14px;bottom:calc(var(--bas) + 352px);z-index:2;
  font-size:9.5px;color:var(--encre2);pointer-events:none;
  background:rgba(251,243,228,.75);padding:2px 7px;border-radius:6px;
  transition:opacity .35s
}

.carte-haut.efface,.carte-bas.efface,.carte-outils.efface,.credit.efface{
  opacity:0;pointer-events:none
}
.carte-haut.efface{transform:translateY(-14px)}
.carte-bas.efface{transform:translateY(20px)}

/* =========================================================
   La fiche d'une ville, la liste des étapes
   ========================================================= */
.etat-ville{
  display:inline-block;padding:7px 12px 6px;border-radius:10px;
  font-family:'Enseigne',sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--papier2);border:2px solid var(--encre);color:var(--encre2)
}
.etat-ville.faite{background:var(--menthe);border-color:var(--encre);color:var(--papier)}

.etapes{display:flex;flex-direction:column}
.etape{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:12px 6px 12px 30px;text-align:left;width:100%;
}
.etape .fil{position:absolute;left:10px;top:0;bottom:0;width:3px;background:var(--papier3)}
.etape:first-child .fil{top:50%}
.etape:last-child .fil{bottom:50%}
.etape.faite .fil{background:var(--orange)}
.etape::before{
  content:'';position:absolute;left:4px;top:50%;margin-top:-7px;
  width:15px;height:15px;border-radius:50%;
  background:var(--papier);border:2.5px solid var(--encre)
}
.etape.faite::before{background:var(--orange)}
.etape.ici::before{background:var(--brique);box-shadow:0 0 0 4px rgba(206,63,53,.25)}
.etape .nom{flex:1;min-width:0}
.etape .nom b{display:block;font-family:'Titre',sans-serif;font-size:16px;font-weight:700}
.etape .nom em{display:block;font-style:normal;font-size:12px;color:var(--encre2)}
.etape .km{font-family:'Titre',sans-serif;font-size:15px;font-weight:700;color:var(--encre2);flex:none}
.etape.faite .km{color:var(--encre)}

/* =========================================================
   La carte postale
   ========================================================= */
#postale{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:var(--papier2);
  padding:calc(var(--haut) + 18px) 16px calc(var(--bas) + 18px);
  overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .4s;
}
#postale.ouvert{opacity:1;pointer-events:auto}
#postale .tampon{
  align-self:flex-start;
  font-family:'Enseigne',sans-serif;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brique);border:3px solid var(--brique);
  padding:6px 11px 5px;border-radius:9px;
  transform:rotate(-4deg);margin-bottom:18px;opacity:.9
}
#postale h1{font-family:'Titre',sans-serif;font-size:40px;font-weight:800;margin-bottom:4px;line-height:1}
#postale .lieu{font-size:13px;color:var(--encre2);font-weight:600;margin-bottom:18px}
#postale .anec{font-size:15px;line-height:1.65;color:var(--encre);margin-bottom:22px}
.recette{
  position:relative;
  background:var(--papier);border:var(--trait) solid var(--encre);
  border-radius:var(--rayon);padding:17px;margin-bottom:18px;
  box-shadow:var(--ombre);
}
.recette h3{font-family:'Titre',sans-serif;font-size:22px;font-weight:800;margin-bottom:7px}
.recette .pourquoi{font-size:13.5px;line-height:1.55;color:var(--encre2);margin-bottom:14px}
.recette .etiq{margin-top:14px}
.recette ul,.recette ol{margin:0;padding-left:19px}
.recette li{font-size:14px;line-height:1.65;margin-bottom:4px}

/* =========================================================
   Médailles
   ========================================================= */
.medailles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.medaille{
  position:relative;padding:14px 13px;border-radius:15px;
  border:var(--trait) solid var(--encre);background:var(--papier);
  box-shadow:var(--ombre-petite);
}
.medaille.eteinte{background:var(--papier2);box-shadow:none;opacity:.6}
.medaille b{display:block;font-family:'Titre',sans-serif;font-size:15px;font-weight:700;margin-bottom:4px}
.medaille span{display:block;font-size:12px;line-height:1.45;color:var(--encre2)}
.medaille .jeton{
  position:absolute;top:-9px;right:-7px;width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--encre);background:var(--moutarde);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
}
.medaille:nth-child(3n+1) .jeton{background:var(--moutarde)}
.medaille:nth-child(3n+2) .jeton{background:var(--azur)}
.medaille:nth-child(3n) .jeton{background:var(--brique)}

/* =========================================================
   Équipe
   ========================================================= */
.membre{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 14px;margin-bottom:10px;border-radius:14px;
  border:var(--trait) solid var(--encre);background:var(--papier);
  box-shadow:var(--ombre-petite);
}
.membre .qui b{display:block;font-family:'Titre',sans-serif;font-size:17px;font-weight:700}
.membre .qui span{font-size:12px;color:var(--encre2)}
.membre .compte{font-family:'Titre',sans-serif;font-size:19px;font-weight:800;flex:none}
.ligne-sortie{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 2px;border-bottom:2px dotted var(--papier3);font-size:13.5px
}
.ligne-sortie b{font-family:'Titre',sans-serif;font-size:16px;font-weight:700}
.ligne-sortie span.quand{color:var(--encre2);font-size:12px}

/* la marche à suivre, dans les réglages */
.marche{margin:0;padding-left:21px}
.marche li{font-size:13.5px;line-height:1.7;color:var(--encre2);margin-bottom:7px}
.marche b{color:var(--encre);font-weight:600}

/* =========================================================
   Écran de chargement
   ========================================================= */
#depart{
  position:fixed;inset:0;z-index:90;background:var(--orange);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .5s;
}
#depart.parti{opacity:0;pointer-events:none}
#depart .enseigne{
  font-family:'Enseigne',sans-serif;font-size:34px;color:var(--papier);
  text-align:center;line-height:1.15;
  text-shadow:4px 4px 0 var(--encre);
  transform:rotate(-2.5deg);
}
#depart .sous{font-size:13.5px;color:rgba(251,243,228,.88);font-weight:600}
.tourne{
  width:34px;height:34px;border-radius:50%;
  border:4px solid rgba(251,243,228,.35);border-top-color:var(--papier);
  animation:tourner .8s linear infinite
}
@keyframes tourner{to{transform:rotate(360deg)}}
/* la route pointillée qui traverse l'écran de démarrage */
#depart .route{
  position:absolute;left:0;right:0;top:50%;height:14px;
  background:repeating-linear-gradient(90deg,
    var(--papier) 0 22px, transparent 22px 44px);
  opacity:.2;transform:rotate(-2.5deg)
}

/* =========================================================
   Pendant la course
   ========================================================= */
#passer{
  position:fixed;right:14px;bottom:calc(var(--bas) + 16px);z-index:20;
  padding:11px 15px 10px;border-radius:13px;
  font-family:'Titre',sans-serif;font-size:14px;font-weight:700;
  background:var(--papier);color:var(--encre);
  border:var(--trait) solid var(--encre);box-shadow:var(--ombre-petite);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
#passer.ouvert{opacity:1;pointer-events:auto}
#passer:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--encre)}

#flash{
  position:fixed;left:0;right:0;top:calc(var(--haut) + 104px);z-index:25;
  text-align:center;pointer-events:none;
}
#flash span{
  display:inline-block;padding:10px 16px 9px;border-radius:13px;
  background:var(--moutarde);color:var(--encre);
  border:var(--trait) solid var(--encre);box-shadow:var(--ombre);
  font-family:'Titre',sans-serif;font-size:15px;font-weight:700;
  opacity:0;transform:translateY(-10px) rotate(-1.2deg);
  transition:opacity .3s,transform .3s;
}
#flash.ouvert span{opacity:1;transform:translateY(0) rotate(-1.2deg)}

/* le choix du fond de carte, quand Google est branché */
.carte-fonds{
  position:fixed;left:12px;bottom:calc(var(--bas) + 300px);z-index:10;
  display:flex;gap:6px;transition:opacity .35s
}
.carte-fonds button{
  padding:7px 11px 6px;border-radius:11px;
  background:var(--papier);color:var(--encre);
  border:2.5px solid var(--encre);box-shadow:2px 2px 0 var(--encre);
  font-family:'Titre',sans-serif;font-size:12.5px;font-weight:700;
}
.carte-fonds button.choisi{background:var(--orange);color:var(--papier)}
.carte-fonds button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--encre)}
.carte-fonds.efface{opacity:0;pointer-events:none}

/* =========================================================
   Les objectifs
   ========================================================= */
.but{
  display:flex;align-items:center;gap:14px;
  padding:13px 15px;margin-bottom:11px;border-radius:16px;
  border:var(--trait) solid var(--encre);background:var(--papier);
  box-shadow:var(--ombre-petite);
}
.but .rond{position:relative;flex:none;width:68px;height:68px}
.but .rond b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Titre',sans-serif;font-size:21px;font-weight:800;
}
.but .rond b em{font-style:normal;font-size:12px;color:var(--encre2);margin-left:1px}
.but .dit{flex:1;min-width:0}
.but .dit b{display:block;font-family:'Titre',sans-serif;font-size:17px;font-weight:700}
.but .dit span{display:block;font-size:12.5px;color:var(--encre2);margin-top:1px}
.but .regler{
  flex:none;padding:7px 11px 6px;border-radius:10px;
  border:2px solid var(--encre);background:var(--papier2);
  font-size:12px;font-weight:600;box-shadow:2px 2px 0 var(--encre);
}
.but .regler:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--encre)}

.cible{
  padding:14px 16px;border-radius:16px;margin-bottom:11px;
  border:var(--trait) solid var(--encre);background:var(--papier2);
}
.cible .nom{font-family:'Titre',sans-serif;font-size:23px;font-weight:800;line-height:1.05}
.cible .reste{font-size:14px;margin-top:3px;color:var(--encre2)}
.cible .reste b{font-family:'Titre',sans-serif;font-size:19px;font-weight:800;color:var(--encre)}
.cible .quand{font-size:12.5px;line-height:1.55;color:var(--encre2);margin-top:8px}

/* =========================================================
   Choisir sa direction
   ========================================================= */
.depart-ligne{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:12px 14px;border-radius:14px;
  border:2px dashed var(--encre3);background:var(--papier2);
}
.depart-ligne .quoi{font-size:12.5px;color:var(--encre2);font-weight:600;flex:none}
.depart-ligne .ou{
  flex:1;min-width:0;font-family:'Titre',sans-serif;font-size:17px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.depart-ligne .fleche{
  flex:none;font-size:11.5px;font-weight:600;color:var(--encre2);
  text-decoration:underline;text-underline-offset:3px
}

.idees{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.idee{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:'t c' 's c';
  align-items:center;gap:0 12px;width:100%;text-align:left;
  padding:11px 14px;border-radius:14px;
  border:var(--trait) solid var(--encre);background:var(--papier);
  box-shadow:2px 2px 0 var(--encre);
  transition:transform .07s, box-shadow .07s;
}
.idee:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--encre)}
.idee .trajet{grid-area:t;font-family:'Titre',sans-serif;font-size:16px;font-weight:700}
.idee .titre{grid-area:s;font-size:12px;color:var(--encre2)}
.idee .chiffre{
  grid-area:c;font-family:'Titre',sans-serif;font-size:17px;font-weight:800;
  color:var(--papier);background:var(--menthe);
  border:2px solid var(--encre);border-radius:10px;padding:5px 9px 4px;
}