/* carte-voyage.css -- « Easter road trip » (V313) : la carte du voyage, sous l'introduction. */
.carte-voyage { --c25:#9A6F2A; --c25-clair:#C9A15A; --c25-bord:#dcc79d; position:relative; max-width:580px; margin:18px auto 26px; }
.carte-voyage svg.carte { display:block; width:100%; height:auto; overflow:hidden; border-radius:3px; }
.carte-voyage .voisins { fill:#EDE6D2; stroke:#cbbd9c; stroke-width:1.2; stroke-linejoin:round; }
.carte-voyage .france { fill:#F8F3E3; stroke:#8a7550; stroke-width:2; stroke-linejoin:round; }
.carte-voyage .route-fond { fill:none; stroke:#D08A7C; stroke-opacity:.16; stroke-width:5; stroke-linecap:round; }
.carte-voyage .route { fill:none; stroke:#B9675A; stroke-width:4; stroke-linecap:round; stroke-dasharray:1 9; }
.carte-voyage .trace { fill:none; stroke:#fff; stroke-width:22; stroke-linecap:round; }
.carte-voyage .etape .halo { fill:#D08A7C; opacity:.18; }
.carte-voyage .etape .tete { fill:#D08A7C; stroke:#4a3b2a; stroke-width:2; }
.carte-voyage .etape text { font-family:'Caveat', cursive; fill:#4a3b2a; paint-order:stroke; stroke:#F8F3E3; stroke-width:6px; stroke-linejoin:round; }
.carte-voyage .etape .nom { font-size:30px; font-weight:600; }
.carte-voyage .etape .date { font-size:23px; fill:#8a7550; }
.carte-voyage .etape.cliquable { cursor:pointer; }
.carte-voyage .etape.cliquable:hover .tete, .carte-voyage .etape.cliquable:focus .tete { fill:#B9675A; }
.carte-voyage .etape:focus { outline:none; }
.carte-voyage .etape.cliquable:focus-visible .halo { opacity:.45; }
/* avec le script : les étapes attendent le camping-car */
.carte-voyage.anime .etape { opacity:0; transition:opacity .45s ease; }
.carte-voyage.anime .etape.vue { opacity:1; }
.carte-voyage.anime .etape.vue .halo { animation:carte-pop .8s ease-out; transform-origin:center; transform-box:fill-box; }
@keyframes carte-pop { from { transform:scale(.2); opacity:.6; } to { transform:scale(1); opacity:.18; } }
.carte-voyage .camion { display:none; }
.carte-voyage.anime .camion { display:inline; }
.carte-voyage.roule .camion .caisse { animation:carte-cahot .5s ease-in-out infinite alternate; }
@keyframes carte-cahot { to { translate:0 -1.2px; } }
.carte-voyage .refaire { display:block; margin:8px auto 0; font:600 18px/1 'Caveat', cursive; color:#8a7550;
  background:#FFFDF3; border:1px solid #d9cba9; border-radius:14px; padding:5px 12px 6px; cursor:pointer;
  box-shadow:0 1px 3px rgba(74,59,42,.15); transform:rotate(-2deg); }
.carte-voyage .refaire:hover { color:#4a3b2a; border-color:#b9a57c; }
@media (max-width:520px) { .carte-voyage .etape .nom { font-size:36px; } .carte-voyage .etape .date { font-size:28px; } }
.carte-voyage .refaire[hidden] { display:none; }
/* la surprise du soir : un polaroid posé dans le golfe de Gascogne, qui change à chaque soir */
.carte-voyage .soir { position:absolute; margin:0; padding:7px 7px 0; background:#FFFDF6; box-sizing:border-box;
  box-shadow:0 2px 6px rgba(74,59,42,.28); transform:rotate(-4deg); transform-origin:50% 0; cursor:zoom-in;
  transition:transform .35s ease, width .35s ease; z-index:2; }
.carte-voyage .soir[hidden] { display:none; }
.carte-voyage .soir::before { content:''; position:absolute; left:32%; top:-7px; width:36%; height:15px;
  background:rgba(208,138,124,.45); transform:rotate(3deg); }
.carte-voyage .soir img { display:block; width:100%; height:auto; aspect-ratio:1; background:#F8F3E3; }
.carte-voyage .soir figcaption { font:600 clamp(12px, 2.2vw, 16px)/1.05 'Caveat', cursive; color:#6b5638; text-align:center;
  padding:2px 2px 7px; min-height:2.1em; display:flex; align-items:center; justify-content:center; }
.carte-voyage .soir-titre { display:block; text-align:center; white-space:nowrap; padding-top:5px;
  font:600 clamp(12px, 2.2vw, 16px)/1 'Caveat', cursive; color:#B9675A; }
.carte-voyage .soir.change { animation:soir-tombe .55s ease-out; }
@keyframes soir-tombe { from { transform:rotate(6deg) translateY(-12px); opacity:0; } to { transform:rotate(-4deg); opacity:1; } }
/* V329 : le polaroid ne grandit plus sur place ; il ouvre les surprises en grand (vue .billets-grand.surprises). */
.carte-voyage .soir { cursor:zoom-in; }
.billets-grand.surprises .feuille.surprise { width:min(600px, 100%); }   /* V334 : en grand, les surprises font 600 px (soirs/grand/) : pas plus grand, sinon floues */
.billets-grand.surprises .feuille.surprise img { aspect-ratio:1; background:#F8F3E3; border:9px solid #FFFDF6; box-sizing:border-box; }
@media (max-width:520px) { .carte-voyage .soir { padding:4px 4px 0; } .carte-voyage .soir figcaption { font-size:10px; padding:3px 0 4px; } .carte-voyage .soir-titre { font-size:10px; padding-top:3px; white-space:normal; } }
/* V320 (13 octobre 2026, idées d'Anne) : le compteur kilométrique, la route de 2025 (le soir qui tombe, essayé, est retiré en V321) */
.carte-voyage .compteur text { font:500 28px/1 'EB Garamond', Georgia, serif; fill:#3a2e24; text-anchor:middle; }
.carte-voyage .compteur .unites text { fill:#8B3A2E; }
.carte-voyage .compteur .km { font:600 25px/1 'Caveat', cursive; fill:#3a2e24; text-anchor:start; }
/* la route de 2025 : seul le pointille et la punaise sont en couleur, MORDORE (Anne, 13 octobre : il repond au laiton du
   compteur ; le lavande, trop proche du bleu des mers, et le vert ont ete essayes) ; les noms en noir, comme en 2023 */
.carte-voyage .route25-fond { fill:none; stroke:var(--c25-clair); stroke-opacity:.18; stroke-width:5; stroke-linecap:round; }
.carte-voyage .route25 { fill:none; stroke:var(--c25); stroke-width:4; stroke-linecap:round; stroke-dasharray:1 9; }
.carte-voyage .etape25 .halo { fill:var(--c25-clair); opacity:.2; }
.carte-voyage .etape25 .tete { fill:var(--c25-clair); stroke:#4a3b2a; stroke-width:2; }
/* V331 (Anne, au telephone, 15 octobre) : une etape de 2025 touchee s'entourait du cadre rouge du navigateur (Samsung Internet),
   celles de 2023 non : elles avaient deja leur « outline:none » (ligne 16). Meme traitement, et le halo pour le clavier. */
.carte-voyage .etape25:focus { outline:none; }
.carte-voyage .etape25:focus-visible .halo { opacity:.45; }
.carte-voyage .etape25 text { font-family:'Caveat', cursive; fill:#4a3b2a; paint-order:stroke; stroke:#F8F3E3; stroke-width:6px; stroke-linejoin:round; }
.carte-voyage .etape25 .nom { font-size:30px; font-weight:600; }
.carte-voyage .etape25 .date { font-size:23px; fill:#8a7550; }
@media (max-width:520px) { .carte-voyage .etape25 .nom { font-size:36px; } .carte-voyage .etape25 .date { font-size:28px; } }
/* la route de 2025 : en 2023, seule sa trace pâle se devine (V321, demande d'Anne : « qu'on devine le trajet qu'on
   n'emprunte pas », comme 2023 se devine sous 2025) ; tout le reste de 2025 n'apparaît qu'avec son bouton */
.carte-voyage:not(.en-2025) .voyage-2025 > :not(.route25-fond) { display:none; }
.carte-voyage:not(.en-2025) .route25-fond { stroke:var(--c25); stroke-opacity:.16; stroke-width:3; }
.carte-voyage.en-2025 .etape, .carte-voyage.en-2025 .camion { display:none; }
.carte-voyage.en-2025 .route, .carte-voyage.en-2025 .route-fond { opacity:.22; }
.carte-voyage .etape25 { opacity:0; transition:opacity .45s ease; }
.carte-voyage .etape25.vue { opacity:1; }
.carte-voyage .etape25.vue .halo { animation:carte-pop .8s ease-out; transform-origin:center; transform-box:fill-box; }
.carte-voyage.roule .kangoo .caisse { animation:carte-cahot .5s ease-in-out infinite alternate; }
.carte-voyage .boutons { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:8px; }
.carte-voyage .boutons .refaire { margin:0; }
.carte-voyage .refaire25 { display:block; font:600 18px/1 'Caveat', cursive; color:var(--c25);
  background:#FFFDF3; border:1px solid var(--c25-bord); border-radius:14px; padding:5px 12px 6px; cursor:pointer;
  box-shadow:0 1px 3px rgba(74,59,42,.15); transform:rotate(2deg); }
.carte-voyage .refaire25:hover { color:#4a3b2a; border-color:var(--c25); }
.carte-voyage .refaire25[hidden] { display:none; }
/* V321 (13 octobre 2026, idée d'Anne) : le billet du jour, pendant de la surprise du soir pour 2025. Un billet découpé
   (pas de cadre de polaroid : c'est du papier imprimé), tenu par un bout de ruban mordoré. Sur la carte, il ne montre
   que le premier billet de l'étape (« + 2 » s'il y en a d'autres). V322 : au clic, il ne s'agrandit plus DANS la carte
   (illisible, même agrandi : Anne, 13 octobre) ; il ouvre la vue en grand des billets, plus bas. */
.carte-voyage .billet { position:absolute; margin:0; cursor:zoom-in; z-index:2; outline-offset:4px; transform:rotate(-3deg); transform-origin:50% 0;
  transition:width .35s ease, transform .35s ease, top .35s ease; }
.carte-voyage .billet[hidden] { display:none; }
.carte-voyage .billet .titre { display:block; font:600 clamp(12px, 2.2vw, 16px)/1 'Caveat', cursive; color:var(--c25);
  text-align:left; margin:0 0 6px 4px; }
.carte-voyage .billet .pile { display:block; position:relative; }
.carte-voyage .billet .pile::before { content:''; position:absolute; left:40%; top:-7px; width:22%; height:14px; z-index:2;
  background:rgba(154,111,42,.42); transform:rotate(-2deg); }
.carte-voyage .billet .feuille { display:block; position:relative; }
.carte-voyage .billet .feuille.autre { display:none; }
.carte-voyage .billet img { display:block; width:100%; height:auto; box-shadow:0 2px 6px rgba(74,59,42,.30); background:#fff; }
.carte-voyage .billet .billet-legende { display:block; font:600 clamp(12px, 2.1vw, 16px)/1.1 'Caveat', cursive; color:#4a3b2a;
  text-align:center; padding-top:4px; }
.carte-voyage .billet .billet-plus { position:absolute; right:-8px; top:12px; font:600 15px/1 'Caveat', cursive; color:#fff;
  background:var(--c25); border:0; border-radius:10px; padding:3px 7px; cursor:pointer; z-index:3; }
.carte-voyage .billet .billet-plus[hidden] { display:none; }
.carte-voyage .billet.change { animation:billet-pose .55s ease-out; }
@keyframes billet-pose { from { transform:rotate(4deg) translateY(-12px); opacity:0; } to { transform:rotate(-3deg); opacity:1; } }
@media (max-width:520px) { .carte-voyage .billet .titre, .carte-voyage .billet .billet-legende { font-size:10px; } .carte-voyage .billet .billet-plus { font-size:11px; } }
.carte-voyage.en-2025 .etape25[data-film-t] { cursor:pointer; }
/* V321 : « s'arrêter là », pendant un trajet seulement */
.carte-voyage .arreter { display:none; font:600 18px/1 'Caveat', cursive; color:#8a7550; background:#FFFDF3; border:1px dashed #d9cba9;
  border-radius:14px; padding:5px 12px 6px; cursor:pointer; transform:rotate(-1deg); }
.carte-voyage.roule .arreter { display:block; }
.carte-voyage .arreter:hover { color:#4a3b2a; }

/* V322 (14 octobre 2026, remarques d'Anne) ------------------------------------------------------------------------
   L'ÉTAPE CHOISIE : celle dont on voit la surprise ou le billet (le dernier arrêt, ou l'étape cliquée) garde un halo plus
   franc. Le survol ne change plus rien (il remplaçait le billet quand la souris traversait la carte). */
.carte-voyage .etape.choisie .halo, .carte-voyage .etape25.choisie .halo { opacity:.5; }
.carte-voyage .etape.choisie .tete { fill:#B9675A; }
.carte-voyage .etape25.choisie .tete { fill:var(--c25); }
/* LES ÉTAPES PAS ENCORE ATTEINTES NE SE CLIQUENT PAS : invisibles, elles restaient sous la souris (un clic au hasard
   ouvrait le film). visibility suit l'opacité : elle ne bascule qu'à la fin du fondu quand l'étape s'efface. */
.carte-voyage.anime .etape, .carte-voyage .etape25 { visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; }
.carte-voyage.anime .etape.vue, .carte-voyage .etape25.vue { visibility:visible; transition:opacity .45s ease, visibility 0s; }

/* LES BILLETS EN GRAND : une vue à part, faite comme celle des pièces de l'album (même papier, même « × », mêmes
   flèches), où tous les billets de l'étape se posent ensemble. Ce sont des documents imprimés : la taille est réglée
   pour qu'on les LISE (texte courant d'un billet ≈ 17 px à 900 px de large), donc jamais plus de deux de front à
   l'ordinateur ; s'ils ne tiennent pas en hauteur, la vue défile. Au téléphone, un seul de front ; touché, il passe
   à sa taille réelle et se parcourt du doigt (.reelle). */
.billets-grand { position:fixed; inset:0; z-index:9998; display:none; background-color:#EDE3CC;
  background-image:url('../../images/cover-texture.webp'); background-repeat:repeat; }
body.billets-ouverts { overflow:hidden; }
body.billets-ouverts .home-badge, body.billets-ouverts .tourne-feuillet { visibility:hidden; }
body.billets-ouverts .billets-grand { display:block; }
.billets-grand .cadre { position:absolute; inset:0; overflow:auto; padding:22px 72px 40px; box-sizing:border-box; }
.billets-grand .ou { margin:0 auto 22px; width:fit-content; max-width:calc(100% - 40px); font:600 24px/1.15 'Caveat', cursive;
  color:#4a3b2a; background:#FFFDF8; border:1px solid #d8c9ae; border-radius:18px; padding:6px 18px 8px;
  box-shadow:0 6px 16px rgba(58,46,36,0.16); text-align:center; text-wrap:balance; }
.billets-grand .feuilles { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:30px 36px;
  max-width:1500px; margin:0 auto; }
.billets-grand .feuille { margin:0; flex:0 1 auto; width:min(780px, 100%); position:relative; }
.billets-grand .feuilles.n2 .feuille { width:min(640px, calc(50% - 18px)); }
/* trois billets : deux colonnes, chaque billet dans la plus courte (le script les range une fois les images chargées) */
.billets-grand .feuilles.n3 { flex-wrap:nowrap; }
.billets-grand .feuilles.n3 .col { flex:0 1 640px; display:flex; flex-direction:column; gap:30px; min-width:0; }
.billets-grand .feuilles.n3 .feuille { width:100%; }
.billets-grand .feuille::before { content:''; position:absolute; left:42%; top:-8px; width:16%; height:16px; z-index:2;
  background:rgba(154,111,42,.42); transform:rotate(-2deg); }
.billets-grand .feuille img { display:block; width:100%; height:auto; background:#fff; box-shadow:0 10px 30px rgba(58,46,36,0.24); }
.billets-grand figcaption { font:600 21px/1.15 'Caveat', cursive; color:#4a3b2a; text-align:center; padding-top:8px; }
.billets-grand .fermer { position:fixed; top:14px; right:14px; z-index:3; width:40px; height:40px; border-radius:50%;
  background:#8B6F47; color:#FAF3E7; border:none; cursor:pointer; font-size:22px; line-height:1; }
.billets-grand .fermer:hover { background:#755C3A; }
/* V330 (Anne, 15 octobre 2026) : la bulle « Refermer » s'ouvrait AU-DESSUS du bouton, colle en haut a droite de
   l'ecran : elle sortait de l'ecran, tronquee. Elle s'ouvre dessous, alignee a droite, comme celle des albums
   (.grande .fermer). */
.billets-grand .fermer[data-tip]::after { bottom:auto; top:calc(100% + 8px); left:auto; right:0; transform:none; }
.billets-grand .fermer[data-tip]::before { display:none; }
/* Meme defaut pour les fleches ‹ › (collees aux bords gauche et droit) : leur bulle, centree au-dessus, sortait de
   l'ecran a moitie. Elle s'ouvre maintenant A COTE, vers l'interieur, comme les onglets qui tournent les feuillets. */
.billets-grand .feuilleter[data-tip]::after { bottom:auto; top:50%; white-space:nowrap; }
.billets-grand .feuilleter[data-tip]::before { display:none; }
.billets-grand .feuilleter.prec[data-tip]::after { left:calc(100% + 8px); right:auto; transform:translateY(-50%); }
.billets-grand .feuilleter.suiv[data-tip]::after { left:auto; right:calc(100% + 8px); transform:translateY(-50%); }
.billets-grand .feuilleter { position:fixed; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:78px; border:none;
  cursor:pointer; background:rgba(139,111,71,0.14); color:#6b553a; font-size:26px; line-height:1; border-radius:8px; }
.billets-grand .feuilleter:hover { background:rgba(139,111,71,0.3); color:#FAF3E7; }
.billets-grand .feuilleter[hidden] { display:none; }
.billets-grand .prec { left:8px; } .billets-grand .suiv { right:8px; }
@media (max-width:1100px) { .billets-grand .feuilles.n2 .feuille { width:min(780px, 100%); }
  .billets-grand .feuilles.n3 { flex-direction:column; align-items:center; }
  .billets-grand .feuilles.n3 .col { flex:none; width:min(780px, 100%); } }
@media (max-width:700px) {
  .billets-grand .cadre { padding:64px 12px 92px; }
  .billets-grand .ou { font-size:20px; }
  .billets-grand .feuille { width:100%; cursor:zoom-in; }
  .billets-grand .feuilles.n2 .feuille, .billets-grand .feuilles.n3 .feuille { width:100%; }
  .billets-grand .feuilles.n3 .feuille.reelle { width:auto; }
  .billets-grand .feuille.reelle { width:auto; max-width:none; cursor:zoom-out; overflow-x:auto; }
  .billets-grand .feuille.reelle img { width:900px; max-width:none; }
  .billets-grand figcaption { font-size:19px; }
  .billets-grand .feuilleter { top:auto; bottom:14px; transform:none; width:56px; height:48px; background:rgba(237,227,204,.94);
    box-shadow:0 4px 12px rgba(58,46,36,.18); }
}

/* V323 (Anne, 14 octobre 2026) : LA MER, une lisière bleue le long des côtes, à la place des noms des mers (« Manche »,
   « Méditerranée », retirés avec les légendes à une ligne par lieu). Le contour des terres est tracé épais SOUS elles :
   seule la moitié côté mer se voit. */
.carte-voyage .lisiere path { fill:none; stroke:#C6D8DB; stroke-width:22; stroke-linejoin:round; stroke-linecap:round; }
/* V323 : une ligne par lieu sur la route de 2025 ; chaque lieu ouvre le film à son moment */
.carte-voyage.en-2025 .etape25 .lieu25 { cursor:pointer; }
.carte-voyage.en-2025 .etape25 .lieu25:hover { fill:var(--c25); }
/* V323 (Anne, 14 octobre 2026) : au téléphone, les dates de Solliès-Ville s'écrivent court (« 29/6 », « 9/7 ») : en
   toutes lettres, elles croisaient la route. */
.carte-voyage .court { display:none; }
@media (max-width:520px) { .carte-voyage .long { display:none; } .carte-voyage .court { display:inline; } }
/* V323 : au téléphone, les écritures des étapes un peu moins grandes (36 et 28 auparavant) : la carte de 2025, avec une
   ligne par lieu, n'y tenait plus sans que la route ou le véhicule passent dessus (mesuré : outils-albums/v323/). */
@media (max-width:520px) { .carte-voyage .etape .nom, .carte-voyage .etape25 .nom { font-size:32px; }
  .carte-voyage .etape .date, .carte-voyage .etape25 .date { font-size:25px; } }
/* V323 (Anne, 14 octobre 2026) : au téléphone, le polaroid des surprises (légende sur quatre lignes) descend sous la
   carte et mordait sur « refaire la route de 2023 » : les boutons se décalent vers la droite, hors de son chemin. */
@media (max-width:520px) { .carte-voyage .boutons { justify-content:flex-end; padding-left:27%; } }
/* V323 (Anne, 14 octobre 2026) : une petite flèche après chaque lieu de 2025 dit qu'il s'ouvre (le film, à ce moment) :
   au doigt, il n'y a pas de survol pour le deviner. */
.carte-voyage .etape25 .fleche { fill:var(--c25); font-size:.8em; }

/* V330 : au telephone, la petite ligne qui dit ce que fait le second toucher sur une etape (voir carte-voyage.js,
   DEUX_TOUCHERS). Sous le polaroid ou le billet, hors de leur papier, et elle ne prend pas le doigt. */
.carte-voyage .indice { position:absolute; left:-14%; right:-14%; top:calc(100% + 8px); font:600 14px/1.1 'Caveat', cursive;
  color:#7a6446; text-align:center; pointer-events:none; animation:indice-vient .6s ease both; }
@keyframes indice-vient { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .carte-voyage .indice { animation:none; } }

/* V331 : la croix de la grande vue et celle des billets recoivent la mise au point par le script (pour le clavier).
   La vraie cause du cercle rouge vu par Anne est ailleurs (carte-voyage.js, arrivee sur page2.htm#piece-…) ; ceci
   couvre le meme cas sur la premiere page. Sur un ecran tactile seulement ; au clavier d'un ordinateur, le cadre reste. */
@media (hover: none), (pointer: coarse) {
  .grande .fermer:focus, .billets-grand .fermer:focus { outline:none; }
}