/* ================================================================
   guide.ti-lakaz.com — copie de la feuille du guide Teknimo 1.3.0
   (guide.teknimo.com), adaptée au lot 1 : états du B3, sans Noël ni
   bagages. Référence : design/DESIGN.md (fait foi).

   Règles d'écriture (reprises du guide Teknimo) :
   - noms de classes de la maquette ;
   - tokens du SOCLE (ci-dessous) uniquement, aucune valeur
     de couleur, de police ou de rayon écrite en dur ailleurs que là
     où la maquette le fait ;
   - aucun !important (seule exception : la règle prefers-reduced-motion,
     reprise telle quelle de la maquette), une classe par sélecteur ;
   - un composant par section, dans l'ordre du DESIGN.md.
   Seule feuille de styles du guide depuis le nettoyage du 04/10/2026
   (l'ancien style.css est supprimé ; ses règles encore utilisées sont
   dans le SOCLE).
   ================================================================ */

/* ---------------------------------------------------------------
   SOCLE — repris de l'ancien style.css au nettoyage (04/10/2026) :
   seules les règles encore utilisées par un écran (mesure sur tous les
   écrans du guide), simplifiées sans changer le rendu (styles calculés
   de chaque élément identiques avant / après).
   Polices, tokens (DESIGN.md §9), couleur du ticket selon l'écran,
   conteneur qui défile, loupe des photos du chemin.
   --------------------------------------------------------------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/inter-tight-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{
  /* Mode clair uniquement, toujours (DESIGN.md §2). « only » empêche aussi
     le mode sombre automatique de Chrome Android d'assombrir la page. */
  color-scheme:only light;

  /* Couleurs (§2). */
  --bg:#F4F2EE;--surface:#FFFFFF;--soft:#F4F2EE;--ink:#000000;--ink-2:#6B6966;--line:#E7E4DF;--accent:#E0457B;

  /* Couleurs des moments du séjour, et texte sur ticket (§2). */
  --t-avant:#DCD5FF;--t-jourj:#F7C6E6;--t-installe:#C6EBD8;--t-depart:#FBE3A2;--t-apres:#FFD2BF;--t-neutral:#E6E2DB;
  --ticket:var(--t-avant);--t-ink:#1C1A17;--t-ink-2:rgba(28,26,23,.62);--t-line:rgba(28,26,23,.12);

  /* Polices (§3). */
  --font-texte:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-titre:"Inter Tight","Inter",sans-serif;

  /* Échelle typographique (§3) : graisse taille/interligne famille. */
  --type-logo:800 24px/1 var(--font-titre);
  --type-titre1:800 clamp(40px,11.5vw,44px)/1.02 var(--font-titre);
  --type-codes:800 28px/1 var(--font-titre);
  --type-titre2:700 20px/1.2 var(--font-titre);
  --type-intro:400 17px/1.5 var(--font-texte);
  --type-texte:400 16px/1.5 var(--font-texte);
  --type-texte-fort:600 16px/1.5 var(--font-texte);
  --type-secondaire:400 14px/1.5 var(--font-texte);
  --type-micro:600 13px var(--font-texte);
  /* Espacement des lettres : Inter Tight uniquement, jamais Inter. */
  --ls-titre1:-.045em;
  --ls-titre2:-.02em;

  /* Rayons (§4). */
  --r-ticket:28px;
  --r-carte:24px;
  --r-tuile-icone:14px;
  --r-tuile-code:10px;
  --r-pilule:999px;

  /* Dimensions et espacements (§4). */
  --tuile-icone:44px;
  --tuile-code-l:36px;
  --tuile-code-h:48px;
  --h-bouton:56px;
  --h-filtre:44px;
  --marge-page:16px;
  --padding-carte:20px;
  --espace-cartes:12px;
  --largeur-contenu:560px;
}
body[data-st="avant"],body[data-st="avantcodes"]{--ticket:var(--t-avant)}
body[data-st="jourj"]{--ticket:var(--t-jourj)}
body[data-st="installe"]{--ticket:var(--t-installe)}
body[data-st="depart"],body[data-st="jourdepart"]{--ticket:var(--t-depart)}
body[data-st="apres"],body[data-st="parti"]{--ticket:var(--t-apres)}
body[data-st="invalide"],body[data-st="erreur"]{--ticket:var(--t-neutral)}
*{box-sizing:border-box}

/* Conteneur qui défile : la page ne défile pas, c'est .app qui défile
   (header collant, Chrome iOS ouvert depuis une autre application). */
/* touch-action : manipulation, pas pan-y — pan-y interdisait le pincement
   (correction F). */
html{height:auto;min-height:100%;overflow:hidden;overscroll-behavior:none;scroll-behavior:smooth;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;height:100%;min-height:100%;padding-bottom:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-overflow-scrolling:touch}
.app{height:100dvh;min-height:100dvh;padding-bottom:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
@supports not (min-height:100dvh){.app{min-height:100vh}}
/* Onglets : un seul écran visible. */
.screen{display:none;background:transparent}
.screen.is-active{display:block;min-height:calc(100dvh - var(--h-tabbar) - var(--sab) - 20px)}
svg{overflow:visible}
/* Feuille ouverte : la page derrière ne bouge pas. */
body.sheet-open{overflow:hidden;position:fixed;width:100%}
/* Sans logement identifié : pas d'onglet Logement ; sans réservation : pas d'onglets. */
body.sans-logement .tab[data-route="lodging"]{display:none}
html.sans-resa .tabbar{display:none}

/* Loupe des photos du chemin (plein écran). */
.arv-loupe{position:fixed;inset:0;z-index:140;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:16px;}
.arv-loupe.on{display:flex;}
.arv-loupe img{max-width:100%;max-height:100%;border-radius:14px;object-fit:contain;}
.arv-loupe button{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;width:38px;height:38px;border:0;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer;}
.arv-loupe button svg{width:18px;height:18px;stroke:#fff;stroke-width:2;}

/* ================= FIN DU SOCLE ================= */


/* ---------------------------------------------------------------
   BASE (DESIGN.md §2, §3, §5 Icônes, §8)
   --------------------------------------------------------------- */
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:var(--type-texte);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
svg.lucide{width:20px;height:20px;stroke-width:1.8}

h1{font:var(--type-titre1);letter-spacing:var(--ls-titre1);margin:10px 0 10px}
.lead{font:var(--type-intro);color:var(--ink-2);margin:0 0 26px}
h2{font:var(--type-titre2);letter-spacing:var(--ls-titre2);margin:34px 4px 12px;display:flex;align-items:center;gap:10px}

button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------
   BOUTONS ET PASTILLES (DESIGN.md §4, §5 Boutons)
   Principal : .btn — secondaire : .btn.line — doux : .btn.soft.
   Un seul bouton principal par écran.
   --------------------------------------------------------------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:var(--h-bouton);border:0;border-radius:var(--r-pilule);background:var(--ink);color:var(--bg);font-weight:600;font-size:16px;cursor:pointer;transition:transform .1s}
.btn:active{transform:scale(.98)}
.btn.soft{background:var(--soft);color:var(--ink)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn + .btn{margin-top:10px}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.duo .btn + .btn{margin-top:0}
/* Envoi en cours (fiche facture) : bouton désactivé + indicateur. */
.btn.busy{opacity:.85;cursor:default}
.spin-s{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Pastilles de filtre (Explorer) : 44 px. */
.chip{flex:none;display:flex;align-items:center;gap:8px;height:var(--h-filtre);padding:0 16px;border-radius:var(--r-pilule);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:16px;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip svg{width:18px;height:18px}

/* Pastilles à choix unique (type de problème, type de facture). */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills button{height:42px;padding:0 16px;border-radius:var(--r-pilule);border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:15px;cursor:pointer}
.pills button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------------------------------------------------------------
   CARTES ET LISTES GROUPÉES (DESIGN.md §4, §5 Cartes et listes,
   Carte mise en avant). Jamais de carte dans une carte.
   --------------------------------------------------------------- */
.card{background:var(--surface);border-radius:var(--r-carte);padding:var(--padding-carte);margin-top:var(--espace-cartes)}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-q{font:700 20px/1.25 var(--font-titre);letter-spacing:var(--ls-titre2);margin:0}
.sub{margin:6px 0 16px;color:var(--ink-2);font-size:14px}

/* Tuile d'icône 44 px ; « tint » = couleur du moment. */
.ico{flex:none;display:grid;place-items:center;width:var(--tuile-icone);height:var(--tuile-icone);border-radius:var(--r-tuile-icone);background:var(--soft);transition:background-color .4s}
.ico.tint{background:var(--ticket);color:var(--t-ink)}
.num-ico{font:800 16px/1 var(--font-titre);background:var(--soft)}

/* Titre de section avec pastille de couleur (onglet Logement). */
h2 .dot{width:10px;height:10px;border-radius:50%}

/* Liste groupée : une carte, lignes séparées par un filet. */
.group{background:var(--surface);border-radius:var(--r-carte);overflow:hidden}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;background:transparent;text-align:left;cursor:pointer;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row:active{background:var(--soft)}
.row-t{flex:1;min-width:0}
.row-t strong{display:block;font-weight:600;font-size:16px;line-height:1.3}
.row-t small{display:block;font-size:14px;color:var(--ink-2)}
.chev{color:var(--ink-2)}
/* Tuiles d'icônes à la couleur d'un moment (sections de l'onglet Logement, Aide). */
.c-avant .ico{background:var(--t-avant);color:var(--t-ink)}
.c-installe .ico{background:var(--t-installe);color:var(--t-ink)}
.c-depart .ico{background:var(--t-depart);color:var(--t-ink)}
.c-apres .ico{background:var(--t-apres);color:var(--t-ink)}

/* Carte mise en avant : action prioritaire (Signaler un problème, une urgence). */
.feature{display:flex;align-items:center;gap:16px;width:100%;background:var(--ink);color:var(--bg);border:0;border-radius:var(--r-carte);padding:22px 20px;text-align:left;cursor:pointer;margin-bottom:12px}
.feature .ico{background:var(--t-apres);color:var(--t-ink)}
.feature strong{display:block;font:var(--type-titre2);letter-spacing:var(--ls-titre2)}
.feature small{display:block;font-size:14px;opacity:.7;margin-top:2px}

/* ---------------------------------------------------------------
   TUILES DE CODES (DESIGN.md §4, §5 Tuiles de codes)
   Un caractère par tuile, 36 × 48, rayon 10. Chiffres : fond plein ;
   symboles (# *) : contour 2 px. Markup produit par
   TiLakazComposants.codes() (role="img" + aria-label sur le groupe).
   Par défaut sur ticket (--t-ink) ; .on-surface sur carte (--ink).
   --------------------------------------------------------------- */
.digits{display:inline-flex;gap:4px;perspective:400px}
.digits i{position:relative;display:grid;place-items:center;font-style:normal;background:var(--t-ink);color:var(--ticket);font:var(--type-codes);transform-origin:50% 50%;width:var(--tuile-code-l);height:var(--tuile-code-h);border-radius:var(--r-tuile-code)}
.digits i.key{background:transparent;color:var(--t-ink);box-shadow:inset 0 0 0 2px var(--t-ink)}
.on-surface .digits i{background:var(--ink);color:var(--bg)}
.on-surface .digits i.key{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}

/* Lignes de codes dans le ticket : libellé 14/600 secondaire, tuiles à droite. */
.coderows{display:flex;flex-direction:column;gap:14px;width:100%}
.coderows div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.coderows small{font-size:14px;font-weight:600;color:var(--t-ink-2)}
/* Place étroite (décision du lot 3) : le libellé ne se coupe pas, ce sont
   les tuiles qui rétrécissent (jusqu'à 36 px chacune) au lieu de déborder. */
.coderows small,.coderow > span:first-child{flex:none}
.coderows .digits,.coderow .digits{min-width:0;flex:0 1 auto}
.coderows .digits i,.coderow .digits i{min-width:0;flex:0 1 auto}
/* Très petits écrans (iPhone SE 1re génération) : chiffre réduit pour
   rester dans la tuile rétrécie. */
@media (max-width:340px){.coderows .digits i,.coderow .digits i{font-size:22px}}
/* Ligne de code sous une photo d'étape (carte). */
.coderow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.coderow > span:first-child{font-weight:600}

/* ---------------------------------------------------------------
   TICKET (DESIGN.md §2, §4, §5 Ticket)
   Haut (.t-top : titre + intro) au-dessus de l'encoche, données en
   dessous (.t-body). Encoches latérales par masque ; leur position
   --cut est calculée en JS (TiLakazComposants.encoches) : hauteur de
   .t-top − 17 px. Couleur : --ticket, redéfinie par body[data-st].
   --------------------------------------------------------------- */
.ticket{
  position:relative;background:var(--ticket);color:var(--t-ink);border-radius:var(--r-ticket);transition:background-color .4s;
  /* MASQUE PAR UNION (test final, correction B — 04/10/2026). Il était
     fait d'un rectangle plein MOINS les deux encoches (mask-composite
     exclude / xor) ; sur iPhone, après un changement de langue, Safari
     inversait parfois l'opération et ne laissait voir que les encoches.
     Désormais cinq pièces qui s'additionnent (mode par défaut, sans
     composition) : le haut, le bas, la bande des encoches, et de chaque
     côté le complément de l'encoche. Rendu identique ; si une pièce
     échoue, le ticket reste visible. Chevauchement d'1 px aux jointures
     pour éviter tout filet. */
  --m1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0C0 13 18 18 60 20C18 22 0 27 0 40L60 40L60 0Z'/%3E%3C/svg%3E");
  --m2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' preserveAspectRatio='none'%3E%3Cpath d='M60 0C60 13 42 18 0 20C42 22 60 27 60 40L0 40L0 0Z'/%3E%3C/svg%3E");
  --pl:linear-gradient(#000 0 0);
  -webkit-mask:var(--m1) 0 var(--cut,163px)/44px 34px no-repeat,var(--m2) 100% var(--cut,163px)/44px 34px no-repeat,
    var(--pl) 50% var(--cut,163px)/calc(100% - 86px) 34px no-repeat,
    var(--pl) 0 0/100% calc(var(--cut,163px) + 1px) no-repeat,
    var(--pl) 0 calc(var(--cut,163px) + 33px)/100% calc(100% - var(--cut,163px) - 33px) no-repeat;
  mask:var(--m1) 0 var(--cut,163px)/44px 34px no-repeat,var(--m2) 100% var(--cut,163px)/44px 34px no-repeat,
    var(--pl) 50% var(--cut,163px)/calc(100% - 86px) 34px no-repeat,
    var(--pl) 0 0/100% calc(var(--cut,163px) + 1px) no-repeat,
    var(--pl) 0 calc(var(--cut,163px) + 33px)/100% calc(100% - var(--cut,163px) - 33px) no-repeat;
}
/* Calcul de l'encoche impossible : ticket entier, sans encoche, plutôt
   qu'un ticket caché (correction B). */
.ticket.sans-encoche{-webkit-mask:none;mask:none}
/* Après le séjour : demi-ticket déchiré, sans encoche, bord en dents
   de scie (creux à x = 0, pointe à x = 9, en phase avec la déchirure). */
.ticket.torn{
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/18px 10px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/18px 10px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat;
  -webkit-mask-composite:source-over;mask-composite:add;
}
.ticket.torn .t-top{padding-bottom:35px}
.t-top{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:30px 24px 30px}
.t-top h1{margin:0;color:var(--t-ink)}
.t-top .lead{margin:0;color:var(--t-ink-2)}
/* Intro du ticket : 17 px / 400 comme toute intro (DESIGN.md §3). La règle
   « .t-top > p » de la maquette (14 px / 600) était une erreur : seul le
   libellé du compte à rebours est en 14 / 600 (.count-row, plus bas). */
.t-body{display:flex;flex-direction:column;padding:26px 24px 26px}

/* Compte à rebours (J-X) : mêmes tuiles que les codes. */
.count-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px}
.count-row > span:first-child{font-size:14px;font-weight:600;color:var(--t-ink-2);min-width:0;line-height:1.3}
.count-tiles{flex:none;display:flex;align-items:center;gap:8px}
.count-tiles em{font-style:normal;font-weight:600;font-size:16px}

/* Lignes du ticket : libellé à gauche, valeur à droite. */
.t-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-top:1px solid var(--t-line)}
.t-row span{flex:none;color:var(--t-ink-2);font-size:14px}
.t-row b{font:600 16px/1.3 var(--font-texte);text-align:right}
.t-row b i{font-style:normal;color:var(--t-ink-2)}
.t-row b.name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-meta{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--t-ink-2);padding-top:14px;border-top:1px solid var(--t-line)}
.t-meta b{color:var(--t-ink);font-weight:600}
/* Ligne complémentaire sous la validité (départ tardif) : alignée sur le texte. */
.t-meta.suite{border-top:0;padding-top:6px;padding-left:28px}
.t-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;border:0;background:transparent;padding:0;font-weight:600;font-size:14px;color:var(--t-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------------------------------------------------------------
   FEUILLE (DESIGN.md §5 Feuille, §7 : glissement + fondu 0,3 s)
   Fond assombri, feuille blanche arrondie en haut (28 px), poignée,
   bouton fermer rond 38 px, fermeture au tap sur le fond, hauteur
   max 88 %, contenu défilant. Conteneur : #infoPanel (index.html).
   Les blocs de contenu des fiches viennent avec les lots 4 à 6.
   --------------------------------------------------------------- */
.sheet-bg{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.38);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .25s}
/* Fiches et feuilles collées en bas : fond --surface prolongé sous le bas
   de l'écran, derrière la barre flottante de Safari (retour du test
   iPhone). Posé sur le fond, car .sheet coupe ce qui déborde. */
.sheet-bg::after{content:"";position:absolute;left:50%;top:100%;width:min(100%,var(--largeur-contenu));height:200px;transform:translateX(-50%);background:var(--surface);pointer-events:none}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:relative;width:100%;max-width:var(--largeur-contenu);overflow:hidden;touch-action:manipulation;margin:0 auto;background:var(--surface);border-radius:var(--r-ticket) var(--r-ticket) 0 0;padding:12px 20px calc(22px + var(--sab));transform:translateY(24px);transition:transform .3s cubic-bezier(.2,.8,.2,1),padding-bottom .25s}
.sheet-bg.on .sheet{transform:none}
/* Place du message flottant en bas de la feuille (correction G) : hauteur
   du message + 14 px (--h-message, posée par sejour.js), ajoutées à la
   marge basse habituelle. */
.sheet.avec-message{padding-bottom:calc(22px + var(--h-message,58px) + var(--sab))}
.sheet.info{max-height:88vh;overflow-y:auto;overscroll-behavior:contain}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 18px}
.sheet-x{position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.sheet-x svg{width:18px;height:18px}
/* Fiche qui défile (correction D) : la croix reste en haut à droite.
   Collante dans le flux, flottée pour ne pas pousser le contenu ; même
   position que l'ancienne croix absolue (14 px du haut, 16 px du bord).
   top:2px car l'accroche se mesure depuis la marge intérieure de la
   feuille (12 px) ; right:auto annule le right:16px de .sheet-x. */
.sheet.info .sheet-x{position:sticky;top:2px;right:auto;float:right;z-index:2;margin:-21px -4px -38px 0}
.sheet h2{margin:0 0 8px;font:800 clamp(22px,6.2vw,26px)/1.1 var(--font-titre);letter-spacing:-.035em;white-space:nowrap}
.sheet.info h2{white-space:normal;padding-right:48px;margin-top:4px}
.sheet .intro{margin:0 0 16px;color:var(--ink-2);font-size:16px;line-height:1.5}

/* Blocs de contenu des fiches, sur fond --soft (DESIGN.md §5 Feuille). */
.s-card{background:var(--soft);border-radius:20px;padding:16px;margin-top:10px}
.s-card .t2{font:700 20px/1.25 var(--font-titre);letter-spacing:var(--ls-titre2);margin:0}
.s-card .t3{margin:2px 0 14px;font-size:14px;color:var(--ink-2)}
.s-list{background:var(--soft);border-radius:20px;overflow:hidden}
.s-list .row{cursor:default}
.s-list .row:active{background:transparent}
.s-list a.row,.s-list button.row{cursor:pointer}
.s-list .ico{background:var(--surface)}
/* Règle des listes (décision du lot 4) : nom sur une ligne, détail sur deux
   lignes au plus ; points de suspension en dernier recours. */
.s-list .row-t strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-list .row-t small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-sec{font-weight:600;margin:18px 4px 8px}
/* Pas-à-pas en photos : carrousel pleine largeur, numéro et légende, points. */
.carou{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px -20px 0;padding:0 20px;scrollbar-width:none}
.carou::-webkit-scrollbar{display:none}
.slide{flex:none;width:84%;scroll-snap-align:center;border-radius:20px;overflow:hidden;background:var(--soft)}
.slide .ph{height:230px;background:var(--t-avant);display:grid;place-items:center;color:var(--t-ink)}
.slide .ph{position:relative;overflow:hidden}
.slide .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slide p{display:flex;gap:10px;align-items:center;margin:0;padding:12px 14px;font-weight:600}
.num-s{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ticket);color:var(--t-ink);display:grid;place-items:center;font:800 14px/1 var(--font-titre)}
.slide .num-s{background:var(--ink);color:var(--bg)}
.dots{display:flex;gap:6px;justify-content:center;margin:12px 0 4px}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:width .2s}
.dots i.on{width:18px;background:var(--ink)}

/* ---------------------------------------------------------------
   HEADER ET SÉLECTEUR DE LANGUE (DESIGN.md §5 Header, Sélecteur)
   Collant dans le conteneur de défilement .app (décision du lot 2),
   fond --bg, 58 px, filet --line une fois le titre recouvert.
   En défilant, le titre 1 s'efface sous le header ; le logo laisse la
   place au petit titre, jamais les deux à la fois (JS : app.js,
   initEnteteCollante).
   --------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:10;background:var(--bg);display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 20px;border-bottom:1px solid transparent;transition:border-color .2s}
.topbar.scrolled{border-bottom-color:var(--line)}
.brand{font:var(--type-logo);letter-spacing:var(--ls-titre1)}
.mini-title{position:absolute;left:20px;right:110px;font:700 16px/1 var(--font-titre);letter-spacing:var(--ls-titre2);opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bouton Retour du header (correction D) : même pilule que le sélecteur
   de langue ; remplace le logo et le petit titre tant qu'il est là. */
.hdr-back{display:flex;align-items:center;gap:2px;height:38px;padding:0 14px 0 8px;border-radius:var(--r-pilule);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:13px;cursor:pointer;color:var(--ink)}
.hdr-back svg{width:16px;height:16px}
.hdr-back[hidden]{display:none}
.topbar.avec-retour .brand,.topbar.avec-retour .mini-title{display:none}
.lang-wrap{position:relative}
.lang-btn{display:flex;align-items:center;gap:4px;height:38px;padding:0 10px 0 14px;border-radius:var(--r-pilule);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:13px;cursor:pointer}
.lang-btn svg{width:16px;height:16px}
/* Seul élément avec une ombre : menu flottant (DESIGN.md §4). Colonne étroite
   de codes courts ; langue active en 600, les autres en 400 (pas de coche). */
.lang-menu{position:absolute;right:0;top:46px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.14);display:none}
.lang-menu.on{display:block}
.lang-opt{display:flex;align-items:center;justify-content:center;width:100%;min-width:56px;height:44px;padding:0 14px;border:0;background:transparent;border-radius:14px;font-size:16px;font-weight:400;cursor:pointer}
.lang-opt:hover{background:var(--soft)}
.lang-opt.on{font-weight:600}

/* ---------------------------------------------------------------
   BARRE D'ONGLETS (DESIGN.md §5 Barre d'onglets)
   Pilule flottante (décision du 04/10/2026, option 2, après test sur
   iPhone dans Safari et Chrome) : marges de 12 px sur les côtés et 10 px
   en bas, comme le sélecteur de langue — fond --surface, filet --line,
   ombre des éléments flottants. Jamais de trait au-dessus, pas de fond
   prolongé. 4 onglets ; onglet actif : texte --ink sur un fond --soft qui
   GLISSE d'un onglet à l'autre (.tab-fond, ~0,25 s, DESIGN.md §7).
   Neutre : ne prend jamais la couleur du moment.
   Masquée après le séjour, sur « Lien introuvable » et « Connexion
   impossible » (body.no-tabs, plus bas ; html.sans-resa dans le SOCLE).
   --h-tabbar : place réservée sous le contenu = pilule (nav 5+5, onglet
   6+6, icône 20, écart 2, libellé 15, filets 2 = 61) + 10 px de marge
   basse, arrondie à 72 ; sert aux marges basses (.page, écrans).
   --------------------------------------------------------------- */
:root{--h-tabbar:72px}
/* Marge de la barre d'accueil de l'iPhone, sauf dans Safari navigateur où
   elle était comptée deux fois (correction E ; classe posée en tête
   d'index.html). Toutes les marges basses passent par --sab. */
:root{--sab:env(safe-area-inset-bottom,0px)}
html.safari-ios{--sab:0px}
.tabbar{position:fixed;left:12px;right:12px;bottom:calc(10px + var(--sab));z-index:20;max-width:calc(var(--largeur-contenu) - 24px);margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pilule);box-shadow:0 14px 34px rgba(0,0,0,.14)}
.tabbar nav{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding:5px}
.tab{position:relative;z-index:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:var(--r-pilule);font-size:12px;line-height:15px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:color .25s}
.tab.on{color:var(--ink)}
.tab svg{width:20px;height:20px}
/* Fond de l'onglet actif : un seul élément, déplacé sous l'onglet choisi
   (app.js, placerFondOnglet) ; glissement 0,25 s adouci au départ et à
   l'arrivée, sans rebond. Mouvement réduit : il change de place sans
   glisser (règle de BASE + ci-dessous). */
.tab-fond{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:var(--r-pilule);background:var(--soft);transition:transform .25s cubic-bezier(.65,0,.35,1),width .25s cubic-bezier(.65,0,.35,1);pointer-events:none}
.tab-fond.sans-transition{transition:none}
@media (prefers-reduced-motion:reduce){.tab-fond{transition:none}}

/* ---------------------------------------------------------------
   PAGE (maquette : main) — colonne de 560 px, marges 16 px.
   La barre d'onglets étant fixe (et non un élément du flux comme dans
   la maquette), la marge basse ajoute sa hauteur et la zone de sécurité.
   --------------------------------------------------------------- */
.page{max-width:var(--largeur-contenu);margin:0 auto;padding:6px var(--marge-page) calc(32px + var(--h-tabbar) + var(--sab))}
body.no-tabs .page{padding-bottom:48px}
body.no-tabs .tabbar{display:none}
.page-h{padding:0 4px}

/* ---------------------------------------------------------------
   SÉJOUR — étapes, cartes et éléments propres à l'onglet (DESIGN.md
   §5 Étapes, Rappel de confirmation, Molette d'heure, Échec d'une action)
   --------------------------------------------------------------- */
/* Étapes : numéro 36 px couleur du moment, trait vertical --line. */
.steps{margin-top:34px;padding:0 4px}
.step{position:relative;padding-left:48px;padding-bottom:30px}
.step::before{content:"";position:absolute;left:17px;top:42px;bottom:6px;width:2px;background:var(--line)}
.step.last::before{display:none}
.num{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--ticket);color:var(--t-ink);display:grid;place-items:center;font:800 16px/1 var(--font-titre)}
.step h3{font:var(--type-titre2);letter-spacing:var(--ls-titre2);margin:6px 0 12px}
.step .card{margin-top:0}
.addr strong{display:block;font:700 20px/1.25 var(--font-titre)}
/* Filet de sécurité si iOS crée malgré tout un lien de détection
   (adresse, numéro) : il garde exactement le style du texte, sans
   soulignement ni changement de mise en page (1.1.0 ; DESIGN.md §5). */
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font:inherit!important;line-height:inherit!important;pointer-events:none}
.addr span{display:block;color:var(--ink-2);font-size:14px;margin:2px 0 16px}
.stepcard{background:var(--surface);border-radius:var(--r-carte);overflow:hidden}
/* Photo d'étape + légende en surimpression (dégradé noir en bas). */
.shot{position:relative;height:210px;display:grid;place-items:center;background:var(--ticket);color:var(--t-ink)}
.shot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.66));color:#fff;font-size:16px;font-weight:600;line-height:1.4}
.shot .exp{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer}
.shot .exp svg{width:17px;height:17px}
/* Étape sans photo : elle garde son texte (DESIGN.md §6, photos du chemin). */
.step-txt{margin:0;padding:14px 16px 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.step-txt:last-child{padding-bottom:14px}
.confirm-card{background:var(--ticket);color:var(--t-ink);border-radius:var(--r-carte);padding:var(--padding-carte)}
.confirm-card .sub{color:var(--t-ink-2)}
.confirm-card .btn.line{box-shadow:inset 0 0 0 1.5px var(--t-ink);color:var(--t-ink)}

/* Encadré beurre : consignes spéciales, rappel de la clé. */
.key-note{display:flex;gap:10px;align-items:flex-start;margin-top:8px;background:var(--t-depart);color:var(--t-ink);border-radius:16px;padding:12px 14px;font-weight:600;font-size:14px;line-height:1.4}
.key-note svg{flex:none;width:18px;height:18px;margin-top:1px}
/* Liste en lecture seule (veille du départ). */
.todo p{position:relative;margin:0;padding:10px 0 10px 22px;border-top:1px solid var(--line);line-height:1.4}
.todo p:first-child{border-top:0}
.todo p::before{content:"";position:absolute;left:4px;top:18px;width:7px;height:7px;border-radius:50%;background:var(--ticket);box-shadow:inset 0 0 0 1px var(--t-line)}
/* Lignes à copier (Wi-Fi) et petit bouton pilule. */
.wifi-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--soft);border-radius:16px;padding:12px 14px}
.wifi-row + .wifi-row{margin-top:8px}
.wifi-row small{display:block;font-size:14px;color:var(--ink-2)}
.wifi-row b{font:600 16px/1.3 var(--font-texte)}
.copy{flex:none;display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:var(--r-pilule);border:0;background:var(--surface);font-size:13px;font-weight:600;cursor:pointer}
.copy svg{width:16px;height:16px}

/* Check-list du jour du départ (cochable, mémorisée sur l'appareil). Smiley
   qui se dessine quand tout est coché (DESIGN.md §7, ~0,9 s). */
.check-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.count{font:800 20px/1 var(--font-titre)}
.bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden;margin-bottom:8px}
.bar span{display:block;height:100%;width:0;background:var(--ticket);box-shadow:inset 0 0 0 1px var(--t-line);border-radius:99px;transition:width .3s}
.chk{display:flex;align-items:flex-start;gap:12px;width:100%;border:0;background:transparent;text-align:left;padding:12px 0;border-top:1px solid var(--line);cursor:pointer;font-size:16px;line-height:1.4}
.chk:first-of-type{border-top:0}
.box{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:.15s}
.box svg{width:15px;height:15px;stroke-width:3;opacity:0}
.chk.done .box{background:var(--ticket);border-color:var(--ticket);color:var(--t-ink)}
.chk.done .box svg{opacity:1}
.chk.done .lbl{color:var(--ink-2);text-decoration:line-through}
.check-done{display:none;align-items:center;gap:14px}
.mini-smile{flex:none;width:52px;height:52px;padding:8px;border-radius:16px;background:var(--ticket);color:var(--t-ink)}
.checklist.complete .check-done{display:flex}
.checklist.complete .check-h,.checklist.complete .bar,.checklist.complete .chk{display:none}
.mini-smile .mouth{stroke-dasharray:110;stroke-dashoffset:110}
.mini-smile .eye{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.checklist.complete .mini-smile .mouth{animation:draw .45s .1s cubic-bezier(.3,.8,.3,1) forwards}
.checklist.complete .mini-smile .eye{animation:pop .35s .4s cubic-bezier(.3,1.6,.5,1) forwards}
.checklist.complete .mini-smile .eye + .eye{animation-delay:.5s}
/* Fin de la check-list (correction J) : la liste s'efface (0,35 s), la
   carte se replie lentement à sa hauteur finale (0,7 s, départ et arrivée
   adoucis), puis seulement le smiley se dessine. */
.checklist{transition:height .7s cubic-bezier(.45,0,.25,1)}
.checklist.pliage{overflow:hidden}
.checklist.pliage:not(.complete) .check-h,.checklist.pliage:not(.complete) .bar,.checklist.pliage:not(.complete) .chk{opacity:0;transition:opacity .35s ease}
.checklist.attente-sourire .check-done{opacity:0}
.checklist.complete .check-done{transition:opacity .4s ease}
.checklist.attente-sourire .mini-smile .mouth,.checklist.attente-sourire .mini-smile .eye{animation:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}


/* Carte « Heure d'arrivée ». */
.arr-card{display:flex;align-items:center;gap:14px}
.lock{flex:none;width:38px;height:38px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--ink-2)}
.lock svg{width:17px;height:17px}
/* Lignes d'accueil (lot 4) : sous l'heure, une ligne par information,
   titre 16 / texte 14 comme les lignes de liste (.row-t). */
.acc-lines{margin-top:14px;border-top:1px solid var(--line)}
.acc-line{padding-top:14px}
.acc-line .row-t small{line-height:1.4}
.acc-line .row-t strong + small{margin-top:2px}
/* Lot 10c : petit suivi de l'accueil (« · demandé à Avinash le 25 oct. »). */
.acc-line .acc-detail{font-weight:500;color:var(--ink-2)}
/* Champ de saisie (lot 4, modèle .in de la maquette facture Teknimo,
   validé sur le principe) : numéro de vol sous la molette. */
.field{display:block}
.field > span{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin:0 4px 6px}
.field > span em{font-style:normal;font-weight:400}
.in{display:block;width:100%;height:52px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);padding:0 16px;font-size:16px;color:var(--ink)}
.in::placeholder{color:var(--ink-2)}
.in.capitales{text-transform:uppercase}
.in.capitales::placeholder{text-transform:none}
select.in{appearance:none;-webkit-appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
.in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.in[aria-invalid="true"]{border-color:#8A3A1C}
.field-err{display:block;font-size:14px;font-weight:600;color:#8A3A1C;margin:6px 4px 0}
.field-err[hidden]{display:none}
.bag-hint{display:none;gap:12px;align-items:flex-start;margin-top:14px;background:var(--soft);border-radius:16px;padding:12px 14px}
.bag-hint.on{display:flex}
.bag-hint b{display:block;font-weight:600}
.bag-hint span{display:block;font-size:14px;color:var(--ink-2)}

/* Molette d'heure : arrêt à chaque cran, élément central en gras dans une
   bande --soft, haut et bas estompés. */
.wheel-wrap{position:relative;margin:16px 0 14px}
.wheel-band{position:absolute;left:0;right:0;top:88px;height:44px;border-radius:14px;background:var(--soft);pointer-events:none}
.wheel{position:relative;height:220px;overflow-x:hidden;overflow-y:auto;touch-action:pan-y pinch-zoom;scroll-snap-type:y mandatory;scrollbar-width:none;padding:88px 0;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);overscroll-behavior:contain}
.wheel::-webkit-scrollbar{display:none}
.wheel div{height:44px;display:grid;place-items:center;scroll-snap-align:center;scroll-snap-stop:always;font:600 20px/1 var(--font-titre);color:var(--ink-2);transition:color .15s}
.wheel div.on{color:var(--ink);font-weight:800}
.wheel-hint{display:flex;gap:8px;align-items:center;margin:0 0 12px;font-size:14px;color:var(--ink-2);white-space:nowrap;visibility:hidden}
.wheel-hint span{overflow:hidden;text-overflow:ellipsis}
.wheel-hint.on{visibility:visible}

/* Rappel flottant « Vous êtes bien entré ? » (jour J). Ombre légère :
   exception autorisée pour un élément flottant. */
.nudge{position:fixed;left:12px;right:12px;bottom:calc(80px + var(--sab));z-index:30;max-width:536px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:22px;padding:10px 10px 10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.14);transform:translateY(20px);opacity:0;pointer-events:none;transition:.3s cubic-bezier(.2,.8,.2,1)}
.nudge.on{transform:none;opacity:1;pointer-events:auto}
/* Un message à la fois en bas : le rappel s'efface le temps d'un toast (correction G). */
body.message-visible .nudge.on{transform:translateY(20px);opacity:0;pointer-events:none}
.nudge p{flex:1;margin:0;font-weight:600;line-height:1.3}
.nudge button{flex:none;height:42px;padding:0 16px;border-radius:var(--r-pilule);border:0;font-weight:600;font-size:16px;cursor:pointer}
.nudge .yes{background:var(--ink);color:var(--bg)}

/* Messages flottants : confirmation (toast) et échec d'une action (etoast). */
.etoast{position:fixed;left:12px;right:12px;bottom:calc(88px + var(--sab));z-index:61;max-width:536px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);border-radius:18px;padding:10px 10px 10px 14px;font-size:14px;font-weight:400;transform:translateY(16px);opacity:0;pointer-events:none;transition:.25s}
.etoast.show{transform:none;opacity:1;pointer-events:auto}
.etoast svg{flex:none;width:18px;height:18px}
.etoast .et-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.etoast .et-t b{font-weight:600;font-size:14px}
.etoast .et-msg{font-size:13px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etoast button{flex:none;height:36px;padding:0 14px;border-radius:var(--r-pilule);border:0;background:var(--bg);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:calc(92px + var(--sab));transform:translate(-50%,12px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);font-size:14px;font-weight:400;padding:11px 18px;border-radius:var(--r-pilule);transition:opacity .25s,transform .25s;z-index:60;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Lien invalide : exemples d'adresse. */
.url-case{display:flex;gap:12px;align-items:flex-start}
.url-ico{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.url-ico svg{width:16px;height:16px;stroke-width:2.6}
.url-ico.ok{background:var(--t-installe);color:var(--t-ink)}
.url-ico.ko{background:var(--soft);color:var(--ink-2)}
.url-lbl{margin:2px 0 8px;font-weight:600}
.url-box{font:400 14px/1.5 ui-monospace,"SF Mono",Menlo,monospace;background:var(--soft);border-radius:14px;padding:10px 12px;word-break:break-all}
/* Exemple de bon lien (test final, correction L, décision de Rony) :
   numéro court (?res=123456), police du guide à 14 px, une seule ligne ;
   vérifié de 320 à 430 px. */
.url-case .url-box{white-space:nowrap;word-break:normal;font:400 14px/1.5 var(--font-texte)}
/* Sous 360 px (décision de Rony) : le cadre passe sous l'icône et prend
   toute la largeur de la carte (icône 28 px + écart 12 px), pour que le
   lien tienne sur une ligne à 14 px. Rien ne change à 360 px et plus. */
@media (max-width:359.98px){.url-case .url-box{margin-left:-40px}}
.url-box mark{background:var(--t-depart);color:var(--t-ink);border-radius:5px;padding:1px 3px}
.url-box.muted{color:var(--ink-2)}
.url-note{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.hl-dot{flex:none;width:12px;height:12px;border-radius:4px;background:var(--t-depart)}
.cat-note{font-size:13px;color:var(--ink-2);margin:10px 4px 0}

/* Lien introuvable (sans réservation ou réservation refusée) : écrit dans
   index.html, montré par html.sans-resa dès le premier rendu. */
#ecranInvalide{display:none}
html.sans-resa #ecranInvalide{display:block}
html.sans-resa #sejourPage{display:none}
html.sans-resa .page{padding-bottom:48px}

/* ---------------------------------------------------------------
   EXPLORER (refonte, lot 5 ; maquette « explorer », DESIGN.md §5)
   Ajouts à la maquette, liés aux vraies données : les photos des lieux
   (img par-dessus la teinte), et le cœur, repère non cliquable des coups
   de cœur de Rony (PLAN.md, lot 5, point 2).
   --------------------------------------------------------------- */
.scroller{display:flex;gap:10px;overflow-x:auto;margin:0 calc(-1 * var(--marge-page));padding:2px var(--marge-page);scroll-snap-type:x mandatory;scroll-padding-inline:var(--marge-page);scrollbar-width:none}
.scroller::after{content:"";flex:0 0 6px}
.scroller::-webkit-scrollbar{display:none}
.place{flex:none;width:80%;max-width:340px;scroll-snap-align:start;background:var(--surface);border-radius:var(--r-carte);overflow:hidden;display:flex;flex-direction:column;cursor:pointer}
.photo{position:relative;height:120px;display:grid;place-items:center;color:var(--t-ink)}
.photo > svg.lucide{width:38px;height:38px;opacity:.35}
.photo > img,.pi-th > img,.pl-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heart{position:absolute;top:12px;right:12px;display:grid;place-items:center;color:var(--accent)}
.heart svg{width:19px;height:19px;fill:var(--accent)}
.place-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.place-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.place-h strong{font:var(--type-titre2);letter-spacing:var(--ls-titre2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rate{flex:none;font-size:13px;font-weight:600;background:var(--soft);border-radius:var(--r-pilule);padding:4px 9px}
.meta{font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desc{font-size:14px;line-height:1.5;color:var(--ink-2);margin:2px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
.tags{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}
.tag{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;background:var(--soft);border-radius:var(--r-pilule);padding:6px 11px}
.tag svg{width:15px;height:15px}
/* Mention « Hors connexion » en tête de l'écran du séjour (correction A). */
.tag.hors-ligne{width:fit-content;margin:0 0 12px;color:var(--ink-2)}
.tag-go{background:var(--ink);color:var(--bg)}
.fcard{flex:none;width:72%;max-width:300px;scroll-snap-align:start;border-radius:var(--r-carte);padding:18px;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;gap:10px;cursor:pointer}
.fcard p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.5em}
.f-more{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-top:auto}
.fact-full{background:var(--soft);color:var(--ink);border-radius:var(--r-carte);padding:20px}
.fact-full p{margin:0;font-size:17px;line-height:1.5}
.h-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--t-depart);color:var(--t-ink)}
.h-ic svg{width:17px;height:17px}
.fscroll{margin-bottom:4px}
.chip[hidden]{display:none}
/* Cartes « Le saviez-vous ? » : titre 2 sur une ligne. */
.f-t{font:var(--type-titre2);letter-spacing:var(--ls-titre2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cat-h span{font-size:14px;color:var(--ink-2);margin-right:4px}
.pi-th{position:relative;overflow:hidden;flex:none;width:56px;height:56px;border-radius:var(--r-tuile-icone);display:grid;place-items:center;color:var(--t-ink)}
.pi-th svg{width:22px;height:22px;opacity:.5}
.pi-m{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:13px;color:var(--ink-2)}
.pi-m svg{width:14px;height:14px}
.pi-m em{font-style:normal;font-weight:600}
.pi-m em.o{color:#1F5A3D}
.pi-m em.c{color:#8A3A1C}
.pl{position:fixed;inset:0;z-index:38;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.pl.on{transform:none;visibility:visible}
.pl-hero{position:relative;height:300px;display:grid;place-items:center;color:var(--t-ink)}
.pl-hero > svg{width:48px;height:48px;opacity:.35}
/* Fixe (correction D) : le retour reste visible quand la fiche défile. */
.pl-round{position:fixed;z-index:2;top:calc(14px + env(safe-area-inset-top,0px));width:42px;height:42px;border-radius:50%;border:0;background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.pl-round svg{width:20px;height:20px}
.pl-body{position:relative;margin-top:-28px;background:var(--bg);border-radius:var(--r-ticket) var(--r-ticket) 0 0;padding:26px var(--marge-page) 120px;max-width:var(--largeur-contenu);margin-left:auto;margin-right:auto}
.pl-body h1{margin:0 0 6px}
.pl-meta{color:var(--ink-2);font-size:16px;margin:0 0 14px}
.pl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pl-chips span{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;background:var(--surface);border-radius:var(--r-pilule);padding:7px 12px}
.pl-chips svg{width:15px;height:15px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border-radius:var(--r-pilule);padding:7px 13px}
.status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.status.open{background:var(--t-installe);color:#1F5A3D}
.status.closed{background:var(--t-apres);color:#8A3A1C}
.status.bientot{background:var(--t-neutral);color:var(--t-ink)}
/* Fiche lieu sans données Google (1.2.3) : la note et le statut restent
   masqués (hidden) ; sans ces règles, display:flex / inline-flex les
   affichait vides (pastille blanche et point seul). */
.pl-chips span[hidden],.status[hidden]{display:none}
.pl-desc{margin:16px 4px 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.reco{background:var(--t-avant);color:var(--t-ink);border-radius:var(--r-carte);padding:20px;margin-top:16px}
.reco .rh{display:flex;align-items:center;gap:8px;font:var(--type-titre2);letter-spacing:var(--ls-titre2);margin:0 0 10px}
.reco .rh svg{width:20px;height:20px;fill:var(--accent);color:var(--accent)}
.reco p{margin:0;font-size:16px;line-height:1.5}
.reco .tip{margin-top:14px;padding-top:12px;border-top:1px solid var(--t-line);font-size:16px}
.reco .tip b{font-weight:600}
.fold{background:var(--surface);border-radius:var(--r-carte);margin-top:12px;overflow:hidden}
.fold > button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;padding:16px 18px;text-align:left;cursor:pointer}
.fold > button .ft{flex:1}
.fold > button strong{display:block;font:var(--type-titre2);letter-spacing:var(--ls-titre2)}
.fold > button small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.fold > button svg{transition:transform .2s;color:var(--ink-2)}
.fold.open > button svg{transform:rotate(180deg)}
.fold .fc{display:none;padding:0 18px 14px}
.fold.open .fc{display:block}
.hours div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font-size:16px}
.hours div.today{font-weight:600}
.rev{padding:12px 0;border-top:1px solid var(--line)}
.rev .rt{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:4px}
.rev p{margin:0;font-size:16px;color:var(--ink-2);line-height:1.5}
.g-note{font-size:13px;color:var(--ink-2);margin:14px 4px 0}
.pl-bar{position:fixed;left:0;right:0;bottom:0;z-index:39;padding:12px var(--marge-page) calc(12px + var(--sab));background:var(--bg);border-top:1px solid var(--line);display:none}
/* Fond prolongé derrière la barre flottante de Safari (retour de Rony :
   tout ce qui est collé en bas). */
.pl-bar::after{content:"";position:absolute;left:0;right:0;top:100%;height:200px;background:var(--bg);pointer-events:none}
.pl.on + .pl-bar{display:block}
.pl-bar .duo{max-width:var(--largeur-contenu);margin:0 auto}

/* ---------------------------------------------------------------
   AIDE (refonte, lot 6 ; maquette « aide », DESIGN.md §5 Fiches de
   l'onglet Aide, Numéros d'urgence)
   Ajout à la maquette : liste « Autres numéros utiles » (décision du lot 6).
   --------------------------------------------------------------- */
.sos-hero{display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--bg);border-radius:var(--r-carte);padding:18px}
.sh-ic{flex:none;width:48px;height:48px;border-radius:15px;background:var(--t-apres);color:var(--t-ink);display:grid;place-items:center}
.sh-ic svg{width:22px;height:22px}
.sh-t{flex:1;min-width:0}
.sh-t strong{display:block;font:800 28px/1.05 var(--font-titre);letter-spacing:-.03em}
.sh-t small{display:block;font-size:14px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-go{flex:none;height:44px;padding:0 16px;border-radius:var(--r-pilule);background:var(--bg);color:var(--ink);display:flex;align-items:center;gap:6px;font-weight:600;font-size:16px}
.sh-go svg{width:18px;height:18px}
.sos-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.sos-mini a{background:var(--surface);border-radius:20px;padding:14px 8px;text-align:center}
.sos-mini a:active{background:var(--soft)}
.sm-ic{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 8px;border-radius:12px;background:var(--t-apres);color:var(--t-ink)}
.sm-ic svg{width:18px;height:18px}
.sos-mini b{display:block;font:800 24px/1 var(--font-titre);letter-spacing:-.03em}
.sos-mini a > span:last-child{display:block;margin-top:4px;font-size:13px;color:var(--ink-2)}
.legal-link{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:28px 0 4px;padding-top:24px;border:0;border-top:1px solid var(--line);background:transparent;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.legal-link svg{width:16px;height:16px}
.legal p.lt{margin:0 4px 6px;color:var(--ink-2);font-size:16px;line-height:1.5}
.acc .qa{border-top:1px solid var(--line)}
.acc .qa:first-child{border-top:0}
.acc .qa .row{border-top:0;cursor:pointer}
.acc .qa .row strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc .qa .chev{transition:transform .2s}
.acc .qa.open .chev{transform:rotate(180deg)}
.acc .qa p{display:none;margin:-4px 0 0;padding:0 16px 16px;color:var(--ink-2);font-size:16px;line-height:1.5}
.acc .qa.open p{display:block}
.ta{width:100%;border:1.5px solid var(--line);border-radius:18px;padding:14px 16px;font:var(--type-texte);background:var(--surface);color:var(--ink);resize:none}
.ta:focus{outline:2px solid var(--accent);outline-offset:1px}

/* ---------------------------------------------------------------
   ANIMATIONS (lot « Animations » ; DESIGN.md §7, maquette .welcome,
   .smile, déchirure « dents de scie »). Code : assets/js/animations.js.
   --------------------------------------------------------------- */
.welcome{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--t-installe);color:var(--t-ink);opacity:0;pointer-events:none;transition:opacity .3s}
.welcome.on{opacity:1;pointer-events:auto}
/* Sortie : on garde .on (état final du visage) et on fond vers 0. */
.welcome.on.sortie{opacity:0;pointer-events:none}
.welcome.sad{background:var(--bg)}
.welcome p{margin:0;font:800 clamp(36px,10vw,44px)/1.02 var(--font-titre);letter-spacing:-.03em;text-align:center;padding:0 30px;opacity:0;transform:translateY(8px);transition:.4s .9s}
.welcome.on p{opacity:1;transform:none}
.smile{width:132px;height:132px}
.smile .spin{transform-origin:66px 66px;stroke-dasharray:240 400;opacity:1}
/* Écrans de transition (pas le chargement, :not(.loading) : sinon bouche et
   yeux s'y dessinaient en secret dès l'ouverture). Le cercle s'efface
   entièrement (0,8 → 1 s) avant que le visage ne se dessine (dès 1 s) :
   jamais les deux ensemble (correction de Rony). */
.welcome.on:not(.loading) .spin{animation:spin .9s linear,fade .2s .8s forwards}
.smile .mouth{stroke-dasharray:110;stroke-dashoffset:110}
.welcome.on:not(.loading) .mouth{animation:draw .45s 1s cubic-bezier(.3,.8,.3,1) forwards}
.smile .eye{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.welcome.on:not(.loading) .eye{animation:pop .35s 1.3s cubic-bezier(.3,1.6,.5,1) forwards}
.welcome.on:not(.loading) .eye + .eye{animation-delay:1.4s}
@keyframes fade{to{opacity:0}}
/* Chargement à l'ouverture du lien : remplace l'écran de marque (décision
   du lot). Fond, cercle et texte visibles d'emblée, au moins 1 s
   (DESIGN.md §7 ; correction H : plus de seuil de 300 ms). Retiré par revelerApplication_()
   (.parti), avec un fondu. */
.welcome.loading{background:var(--bg);color:var(--ink);gap:18px;z-index:60}
.welcome.loading.on{transition:opacity .3s}
.welcome.loading .spin{animation:spin .9s linear infinite}
.welcome.loading small{font-size:14px;color:var(--ink-2)}
.welcome.loading > *{opacity:0;transition:opacity .2s}
.welcome.loading.visible > *{opacity:1}
.welcome.loading.parti{opacity:0;pointer-events:none}
.welcome.loading .smile{width:72px;height:72px}
/* Trait du chargement = trait du sourire (test final, correction I) : le
   sourire fait 132 px avec un trait de 10, soit 10 px à l'écran ; le
   chargement, dessiné à 72 px, prend donc 10 × 132 / 72 ≈ 18,3 unités
   pour le même trait réel, la même couleur (--t-ink) et la même opacité
   pleine. Les yeux du sourire inversé suivent la même échelle. */
.welcome.loading .smile{color:var(--t-ink)}
.welcome.loading .spin,.welcome.loading .mouth{stroke-width:18.33px}
.welcome.loading .eye{r:12.83px}
.welcome.loading .mouth,.welcome.loading .eye{opacity:0}
/* Lien refusé (correction de Rony) : au même endroit et sans grandir, le
   cercle du chargement s'efface entièrement en 0,2 s ; seulement ensuite,
   la bouche puis les yeux du sourire inversé se dessinent. */
.welcome.loading.refus > svg{opacity:1}
.welcome.loading.refus small{opacity:0}
.welcome.loading.refus .spin{opacity:0;transition:opacity .2s}
.welcome.loading.refus .mouth{opacity:1;animation:draw .45s .25s cubic-bezier(.3,.8,.3,1) forwards}
.welcome.loading.refus .eye{opacity:1;animation:pop .35s .55s cubic-bezier(.3,1.6,.5,1) forwards}
.welcome.loading.refus .eye + .eye{animation-delay:.65s}
/* Déchirure du ticket (« Oui, je suis parti ») : copies du ticket posées
   par-dessus, découpées en dents de scie au niveau de l'encoche. */
.fx-layer{position:fixed;z-index:45;pointer-events:none}
.fx-layer .ticket{position:absolute;inset:0;margin:0}
.perf{position:absolute;left:26px;right:26px;height:0;border-top:2px dashed var(--t-ink);opacity:.35;transform:scaleX(0);transform-origin:left;animation:perf .3s ease-out forwards}
@keyframes perf{to{transform:scaleX(1)}}
.tear-down{animation:tearDown .75s cubic-bezier(.55,0,.8,.3) forwards}
@keyframes tearDown{0%{transform:none}22%{transform:translateY(5px)}32%{transform:translateY(3px)}100%{transform:translateY(240px);opacity:0}}
.page.enter-fade > .ticket{animation:fadeIn .35s both}
.page.enter-fade > :not(.ticket){animation:fadeUp .45s .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
/* Mouvement réduit : pas d'animation (règle de BASE), écrans de transition
   raccourcis (animations.js) et affichés directement dans leur état final. */
@media (prefers-reduced-motion:reduce){
  .welcome:not(.loading) .spin{opacity:0}
  .smile .mouth,.checklist.complete .mini-smile .mouth{stroke-dashoffset:0}
  .smile .eye,.checklist.complete .mini-smile .eye{transform:none}
  .welcome.loading > *{opacity:1}
}
/* Sans aucun numéro de réservation : « Lien introuvable » tout de suite,
   sans chargement (décision du lot 3). */
html.sans-resa #splashScreen:not(.refus){display:none}

/* ---------- Lot 6 : convertisseur, imprévus, facture ---------- */
.conv-ligne{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:10px}
.conv-res{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.conv-res .card-q{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-alt{margin:6px 0 0;font-size:14px;color:var(--ink-2)}
.conv-note{margin:12px 0 0;font-size:13px;color:var(--ink-2)}
.s-card.imp .imp-h{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-weight:600;font-size:16px}
/* Pastille numérotée : même rond que les étapes du jour J (.num), sans
   la position absolue. */
.imp-n{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ticket);color:var(--t-ink);font:800 16px/1 var(--font-titre)}
.s-card.imp .lt{margin:0;color:var(--ink-2);font-size:16px;line-height:1.5}
.facture-ok{text-align:center;padding:24px 4px 8px}
/* Cercle de succès de la facture : 64 px, aucun composant existant
   (écart noté dans DESIGN.md §10). */
.ok-cercle{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--t-installe);color:#1F5A3D;transform:scale(.6);animation:pop .45s cubic-bezier(.34,1.56,.64,1) forwards;margin-bottom:12px}
.ok-cercle svg{width:30px;height:30px;stroke-width:2.5}

/* ---------- Lot 5 : carte « Votre vol » ----------
   Trajet en --type-codes, piste en pointillés --line avec la part faite en
   --ink (composant validé sur le principe), statut en .status. */
.carte-vol .vol-statut{margin-top:14px}
.vol-trajet{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:14px}
.vol-bout b{display:block;font:var(--type-codes)}
.vol-bout .meta{display:block;margin-top:4px}
.vol-bout.droite{text-align:right}
.vol-bout s{color:var(--ink-2);font-weight:400}
.vol-piste{position:relative;height:24px;border-top:0;background:linear-gradient(90deg,var(--line) 50%,transparent 0) 0 50%/10px 2px repeat-x}
.vol-fait{position:absolute;left:0;top:11px;height:2px;background:var(--ink)}
.vol-avion{position:absolute;top:0;transform:translateX(-50%);display:grid;place-items:center;width:24px;height:24px;background:var(--surface);color:var(--ink)}
.vol-avion svg{width:18px;height:18px;transform:rotate(45deg)}
.vol-res{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:16px}
.vol-res span{color:var(--ink-2)}
.vol-res b{font-weight:600;white-space:nowrap}
.vol-note{margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.status.bientot i{background:var(--ink-2)}
.field-aide{display:block;font-size:13px;color:var(--ink-2);margin:6px 4px 0;line-height:1.4}
.vol-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pl-bar .duo.seul{grid-template-columns:1fr}
.pl-bar .duo [hidden]{display:none}
.fact-full .g-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Lot 7 : crédit de la photo Google (conditions Google) et avatar des avis. */
.pl-hero .pl-credit{position:absolute;right:12px;bottom:40px;max-width:70%;font-size:13px;line-height:1.3;color:#fff;background:rgba(0,0,0,.45);border-radius:var(--r-pilule);padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-hero .pl-credit a{color:inherit;text-decoration:underline}
.rev .rt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.rev .rt > span:last-child{margin-left:auto;font-weight:400;color:var(--ink-2)}
.rev .rt a{color:inherit}
.rev-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.g-attrib{margin-top:12px}

/* ---------- Lot 8 : livre d'or ---------- */
.gb-mot .gb-qui{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.gb-mot .lt{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.gb-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.gb-photos button{position:relative;padding:0;border:0;background:var(--soft);border-radius:12px;overflow:hidden;aspect-ratio:1;cursor:pointer}
.gb-photos img{display:block;width:100%;height:100%;object-fit:cover}
.gb-choix:empty{display:none}
.gb-x{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff}
.gb-x svg{width:14px;height:14px}
.gb-compte{display:block;text-align:right;font-size:13px;color:var(--ink-2);margin:4px 4px 0}
.chk.gb-consent{margin-top:14px;border-top:0;padding:4px 0}
.chk.gb-consent.done .lbl{color:var(--ink);text-decoration:none}

/* SUIVI D'UNE DEMANDE (lot 9) — composant réutilisable (TiLakazComposants.suivi).
   Points de 20 px reliés par un trait fin ; aucune animation. */
.suivi{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.acc-lines>.suivi:first-child{border-top:0;margin-top:0}
.suivi-titre{font:var(--type-micro);color:var(--ink-2);margin:0 0 10px;letter-spacing:.01em}
.suivi ol{list-style:none;margin:0;padding:0}
.suivi-etape{position:relative;display:flex;gap:12px;padding-bottom:14px}
.suivi-etape:last-child{padding-bottom:0}
.suivi-etape:not(:last-child)::before{content:"";position:absolute;left:9.5px;top:22px;bottom:2px;width:1px;background:var(--line)}
.suivi-point{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.suivi-point svg,.suivi-point i{width:12px;height:12px;stroke-width:2.5}
.suivi-etape.fait .suivi-point{background:var(--t-installe);color:#1F5A3D}
.suivi-etape.attente .suivi-point{background:var(--t-depart)}
.suivi-etape.attente .suivi-point::after{content:"";width:6px;height:6px;border-radius:50%;background:#8A6A12}
.suivi-etape.neutre .suivi-point{background:var(--t-neutral);color:var(--t-ink)}
.suivi-etape.avenir .suivi-point{border:1.5px solid var(--line);background:var(--surface)}
.suivi-txt{display:flex;flex-direction:column;min-width:0}
.suivi-txt strong{font:var(--type-texte-fort);line-height:1.35}
.suivi-txt small{font:var(--type-secondaire);color:var(--ink-2);line-height:1.4;margin-top:1px}
.suivi-etape.avenir .suivi-txt strong{color:var(--ink-2);font-weight:500}
.suivi-date{white-space:nowrap}