/* Espace client : même identité que le site vitrine (chaux, mer, bougainvillier), en version application. */
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("fonts/instrument-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("fonts/instrument-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --fond: #F6F3EE; --carte: #FFFFFF; --encre: #13262E; --encre-2: #55676C; --trait: #E5DED3;
  --mer: #0B4F63; --lagon: #1F95A3; --bougain: #D6336C; --or: #DFA14A; --ok: #1E8A5A; --err: #C0392B;
  --prive: #FFF7E6;
  --display: "Bricolage", "Segoe UI", system-ui, sans-serif;
  --texte: "Instrument", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 16px;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #0C1A20; --carte: #12252C; --encre: #EAF2F2; --encre-2: #9DB3B7; --trait: #22404A; --mer: #4CC3CF; --lagon: #4CC3CF; --bougain: #F06292; --prive: #2A2414; color-scheme: dark; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 16px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--lagon); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 750; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 650; }
p { margin: 0 0 .8em; }
:focus-visible { outline: 3px solid var(--lagon); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Barre */
.barre { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--trait); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); font-family: var(--display); font-weight: 750; font-size: 1.15rem; }
.marque svg { width: 32px; height: 21px; }
.marque em { font-style: normal; color: var(--bougain); }
.pastille-admin { font-family: var(--texte); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--encre); color: var(--fond); padding: 3px 8px; border-radius: 999px; }
.menu { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.menu a, .menu .lien { padding: 8px 12px; border-radius: 999px; color: var(--encre-2); text-decoration: none; font-size: .95rem; }
.menu a.on, .menu a:hover { background: var(--carte); color: var(--encre); }
.menu form { margin: 0; }

.page { width: 100%; max-width: 1140px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 64px; flex: 1; }
.pied-espace { text-align: center; font-size: .8rem; color: var(--encre-2); padding: 24px 16px 32px; }

/* Éléments */
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r); padding: clamp(18px, 3vw, 28px); margin-bottom: 16px; min-width: 0; }
.carte.etroite { max-width: 520px; margin: 24px auto; }
.carte-lien { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.carte-lien:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(11, 79, 99, .5); }
.carte.vide { text-align: center; padding: 40px 24px; color: var(--encre-2); }
.carte.danger { border-color: color-mix(in srgb, var(--err) 35%, var(--trait)); }
.surtitre { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bougain); margin-bottom: 6px; }
.meta, small { color: var(--encre-2); font-size: .88rem; }
.aide { color: var(--encre-2); font-size: .9rem; }
.centre { text-align: center; }
.texte-libre { white-space: pre-line; overflow-wrap: anywhere; }
.titre-page { margin-bottom: 18px; }
.titre-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.titre-ligne .titre-page { margin: 0; }
.fil-ariane { font-size: .88rem; color: var(--encre-2); margin-bottom: 12px; }
.sous-titre { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-2); margin: 26px 0 12px; font-family: var(--texte); font-weight: 600; }
.flash { background: color-mix(in srgb, var(--lagon) 14%, var(--carte)); border: 1px solid color-mix(in srgb, var(--lagon) 40%, transparent); padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; }
.alerte-err { background: color-mix(in srgb, var(--err) 12%, var(--carte)); color: var(--encre); border-left: 4px solid var(--err); padding: 10px 14px; border-radius: 8px; }
.alerte-ok { background: color-mix(in srgb, var(--ok) 12%, var(--carte)); border-left: 4px solid var(--ok); padding: 10px 14px; border-radius: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--carte); color: var(--encre); font: inherit; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.btn:hover { transform: translateY(-1px); border-color: var(--lagon); }
.btn.plein { background: var(--bougain); border-color: var(--bougain); color: #fff; }
.btn.rouge { background: var(--err); border-color: var(--err); color: #fff; }
.btn.whatsapp { background: #1FAF5A; border-color: #1FAF5A; color: #fff; }
.lien { background: none; border: 0; padding: 0; color: var(--lagon); font: inherit; cursor: pointer; text-decoration: underline; }
.lien.petit { font-size: .85rem; }
.rouge-texte { color: var(--err); }

.badge { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--encre) 8%, transparent); color: var(--encre-2); margin-bottom: 8px; }
.f-essentiel { background: color-mix(in srgb, var(--lagon) 12%, transparent); color: var(--lagon); }
.f-complice { background: color-mix(in srgb, var(--mer) 18%, transparent); color: var(--mer); }
.f-cle { background: color-mix(in srgb, #D6336C 14%, transparent); color: #B0245A; }
.f-prestige { background: color-mix(in srgb, var(--or) 22%, transparent); color: #8A5A12; }
.f-escapade { background: color-mix(in srgb, var(--lagon) 16%, transparent); color: var(--lagon); }
.f-serenite { background: color-mix(in srgb, var(--mer) 18%, transparent); color: var(--mer); }
.f-insulaire { background: color-mix(in srgb, var(--or) 22%, transparent); color: #8A5A12; }
@media (prefers-color-scheme: dark) { .f-insulaire { color: var(--or); } }
.f-reco { background: color-mix(in srgb, var(--bougain) 16%, transparent); color: var(--bougain); }
.etat { display: inline-block; font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--encre) 8%, transparent); color: var(--encre-2); }
.etat.ok, .st-pret, .st-en_cours { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.etat.attente, .st-preparation { background: color-mix(in srgb, var(--or) 20%, transparent); color: #8A5A12; }
.etat.off { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
@media (prefers-color-scheme: dark) { .etat.attente, .st-preparation { color: var(--or); } }
.bulle-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--bougain); color: #fff; font-size: .75rem; font-weight: 700; }

progress.jauge { width: 100%; height: 10px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--encre) 8%, transparent); overflow: hidden; appearance: none; margin: 10px 0; }
progress.jauge::-webkit-progress-bar { background: color-mix(in srgb, var(--encre) 8%, transparent); border-radius: 99px; }
progress.jauge::-webkit-progress-value { background: linear-gradient(90deg, var(--lagon), var(--bougain)); border-radius: 99px; }
progress.jauge::-moz-progress-bar { background: linear-gradient(90deg, var(--lagon), var(--bougain)); border-radius: 99px; }

/* Formulaires */
.form { display: grid; gap: 6px; }
.form label, .groupe legend { font-weight: 600; font-size: .9rem; margin-top: 8px; }
input, select, textarea { width: 100%; font: inherit; color: var(--encre); background: var(--fond); border: 1.5px solid var(--trait); border-radius: 10px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--lagon); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lagon) 25%, transparent); }
textarea { resize: vertical; }
textarea.prive { background: var(--prive); }
.form .btn { margin-top: 14px; justify-self: start; }
.groupe { border: 1px dashed var(--trait); border-radius: 12px; padding: 4px 16px 16px; margin: 12px 0 0; display: grid; gap: 6px; }
.ligne-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ligne-champs > div { display: grid; gap: 6px; }
.champ-code { font-size: 1.6rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.case { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--trait); font-weight: 400 !important; cursor: pointer; }
.case input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--bougain); }
.case span { display: grid; }
.ajout-ligne { display: flex; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.ajout-ligne input { flex: 1; min-width: 180px; }
.actions-ligne { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.colle { position: sticky; bottom: 16px; margin-top: 16px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35); }
details.ajout > summary { list-style: none; cursor: pointer; }
details.ajout > summary::-webkit-details-marker { display: none; }
details.ajout > summary h2 { margin: 0; color: var(--bougain); }
details.ajout[open] > summary { margin-bottom: 12px; }
.copie { display: flex; gap: 8px; margin: 10px 0; }
.copie input { font-family: ui-monospace, monospace; font-size: .85rem; }
.qr { display: block; margin: 16px auto; border-radius: 12px; background: #fff; padding: 8px; }
.cle, .mono { font-family: ui-monospace, monospace; font-size: .85rem; overflow-wrap: anywhere; }
.etapes-2fa { padding-left: 1.2em; color: var(--encre-2); }

/* Connexion */
.accueil-connexion { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; min-height: 70vh; }
.visuel { height: 100%; min-height: 420px; border-radius: 240px 240px 24px 24px; background: linear-gradient(180deg, #F9C77E 0%, #F4845F 40%, #D6336C 75%, #6A2C70 100%); position: relative; overflow: hidden; }
.visuel::before { content: ""; position: absolute; left: 50%; top: 38%; width: 30%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: #FFE9B8; box-shadow: 0 0 80px 20px rgba(255, 220, 160, .5); }
.visuel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #0B4F63; clip-path: polygon(0 40%, 18% 30%, 30% 36%, 46% 0, 62% 34%, 78% 28%, 100% 40%, 100% 100%, 0 100%); }
.visuel span { position: absolute; left: 24px; top: 24px; background: #fff; color: #13262E; font-family: var(--display); font-weight: 750; font-size: 1.4rem; padding: 8px 18px; border-radius: 18px 18px 18px 4px; transform: rotate(-4deg); z-index: 1; }
.accueil-connexion .carte.etroite { margin: 0; width: 100%; }
@media (max-width: 820px) { .accueil-connexion { grid-template-columns: 1fr; } .visuel { min-height: 160px; border-radius: 120px 120px 20px 20px; } }

/* Séjour */
.entete-sejour { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.entete-sejour h1 { margin: 0 0 4px; }
.compte-rebours { display: flex; align-items: center; gap: 12px; background: var(--mer); color: #fff; padding: 12px 20px; border-radius: var(--r); }
@media (prefers-color-scheme: dark) { .compte-rebours { color: #06323D; } }
.compte-rebours b { font-family: var(--display); font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.compte-rebours span { font-size: .9rem; max-width: 9em; line-height: 1.2; }
.onglets { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--trait); margin-bottom: 22px; scrollbar-width: none; }
.onglets a { flex: none; padding: 10px 14px; text-decoration: none; color: var(--encre-2); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.onglets a.on { color: var(--encre); border-bottom-color: var(--bougain); }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .deux-colonnes { grid-template-columns: 1fr; } }
.pile { display: grid; gap: 0; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.grille-cartes .carte { margin: 0; }
.mot { background: color-mix(in srgb, var(--bougain) 7%, var(--carte)); }
.raccourcis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.raccourcis .carte { margin: 0; display: grid; gap: 4px; }
.raccourcis b { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--lagon); }
.raccourcis span { color: var(--encre-2); font-size: .9rem; }
.rappel-pacte { font-size: .85rem; color: var(--encre-2); border-top: 1px dashed var(--trait); padding-top: 14px; margin-top: 10px; }
.liste-prestations { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 2px; }
.liste-prestations li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.liste-prestations li > span:nth-child(2), .liste-prestations.admin li > span { flex: 1; }
.liste-prestations li.faite > span:not(.coche) { color: var(--encre-2); }
.coche, .coche-btn { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--trait); display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; background: transparent; }
.faite .coche, .faite .coche-btn { background: var(--ok); border-color: var(--ok); }
.coche-btn { cursor: pointer; font: inherit; font-weight: 700; }
.coche-btn:hover { border-color: var(--ok); }
.liste-prestations form { margin: 0; }

.proposition.reco { border-color: color-mix(in srgb, var(--bougain) 45%, var(--trait)); }
.prop-tete { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.prop-tete h3 { margin: 0; }
.prop-tete .droite { display: grid; justify-items: end; gap: 6px; }
.prix { font-family: var(--display); font-weight: 750; font-size: 1.25rem; color: var(--mer); white-space: nowrap; }
.avis { background: color-mix(in srgb, var(--lagon) 9%, var(--carte)); border-radius: 10px; padding: 10px 14px; font-size: .95rem; }
.prop-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; }
.choix-client { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.pilule { font: inherit; font-size: .85rem; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--trait); background: transparent; color: var(--encre-2); cursor: pointer; }
.pilule.on { background: var(--mer); border-color: var(--mer); color: #fff; }
@media (prefers-color-scheme: dark) { .pilule.on { color: #06323D; } }

.frise-jour { list-style: none; padding: 0; margin: 0 0 8px; border-left: 2px solid var(--trait); }
.frise-jour li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0 14px 16px; position: relative; }
.frise-jour li::before { content: ""; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--lagon); }
.frise-jour .heure { font-family: var(--display); font-weight: 650; color: var(--lagon); font-variant-numeric: tabular-nums; }
.frise-jour li div { display: grid; gap: 2px; min-width: 0; }
.frise-jour form { margin: 4px 0 0; }

.liste-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.liste-docs li { display: flex; align-items: center; gap: 14px; margin: 0; flex-wrap: wrap; }
.liste-docs li > div { flex: 1; display: grid; min-width: 160px; }
.liste-docs form { margin: 0; }
.ext { width: 46px; height: 54px; border-radius: 8px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--bougain) 14%, transparent); color: var(--bougain); flex: none; }

.fil { display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 8px 4px 16px; }
.msg { max-width: min(78%, 560px); padding: 12px 16px; border-radius: 18px; }
.msg p { margin: 0 0 4px; }
.msg small { font-size: .75rem; }
.msg.moi { justify-self: end; background: var(--mer); color: #fff; border-bottom-right-radius: 4px; }
.msg.moi small { color: rgba(255, 255, 255, .75); }
@media (prefers-color-scheme: dark) { .msg.moi { color: #06323D; } .msg.moi small { color: rgba(6, 50, 61, .75); } }
.msg.eux { justify-self: start; background: var(--carte); border: 1px solid var(--trait); border-bottom-left-radius: 4px; }
.envoi { position: sticky; bottom: 0; background: var(--fond); padding-top: 10px; }

/* Admin */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.stats .carte { margin: 0; display: grid; gap: 2px; }
.stats b { font-family: var(--display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { color: var(--encre-2); font-size: .88rem; }
.stats .alerte b { color: var(--bougain); }
.stats .chaud b { color: var(--or); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }
.recherche { display: flex; gap: 8px; margin-bottom: 16px; }
.tableau-defile { overflow-x: auto; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r); }
.carte .tableau-defile { border: 0; }
.tableau { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tableau th { text-align: left; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); padding: 12px 14px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 12px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .num { font-variant-numeric: tabular-nums; }
.ligne-alerte td { background: color-mix(in srgb, var(--err) 6%, transparent); }
.liste-sejours { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.liste-sejours .carte { margin: 0; display: grid; gap: 2px; }
.coches { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.coches li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.suppr-msg { margin: 2px 0 0; display: inline; }
.suppr-msg .lien { color: inherit; opacity: .7; font-size: .75rem; margin-left: 6px; }

/* ===================== Espace client « fun » ===================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mode-client { --sable: #F7EBDD; --ciel: #CDEDF3; --coucher: #F4845F; --nuit: #1B1440;
  background:
    radial-gradient(60vw 40vw at 100% 0%, color-mix(in srgb, var(--coucher) 16%, transparent), transparent 70%),
    radial-gradient(50vw 40vw at 0% 100%, color-mix(in srgb, var(--lagon) 14%, transparent), transparent 70%),
    var(--fond);
  background-attachment: fixed; }
.mode-client .barre { background: color-mix(in srgb, var(--fond) 70%, transparent); border-bottom-color: transparent; }
.mode-client .page { max-width: 1080px; }
.mode-client .flash { border-radius: 999px; text-align: center; font-weight: 600; background: color-mix(in srgb, var(--ok) 14%, var(--carte)); border-color: color-mix(in srgb, var(--ok) 35%, transparent); animation: arrive .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes arrive { from { transform: translateY(-12px) scale(.96); opacity: 0; } }

/* Horizon : carte postale animée, ciel selon l'heure à Ibiza */
.horizon { position: relative; overflow: hidden; border-radius: 28px; min-height: 300px; padding: clamp(22px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; color: #13262E; margin-bottom: 22px; isolation: isolate;
  --h1: #9FD8E8; --h2: #FFF1DC; --astre: #FFE9B8; --astre-y: 18%; --astre-x: 22%; --roc: #5D5E55; --mer1: #2FA7B5; --mer2: #1F8C9A; }
.horizon.moment-jour { --h1: #3FA9D6; --h2: #C6EEF4; --astre-y: 8%; --astre-x: 55%; --mer1: #138FA3; --mer2: #0E7787; }
.horizon.moment-soir { --h1: #C2286E; --h2: #F9C77E; --astre-y: 46%; --astre-x: 64%; --roc: #2A1A3A; --mer1: #6A2C70; --mer2: #4A2A5C; color: #fff; }
.horizon.moment-nuit { --h1: #070D24; --h2: #2A1A4A; --astre: #E8ECF6; --astre-y: 12%; --astre-x: 78%; --roc: #04060F; --mer1: #0B1A3A; --mer2: #071230; color: #fff; }
.horizon.petit { min-height: 200px; grid-template-columns: 1fr; }
.horizon-decor { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--h1), var(--h2) 75%); }
.moment-nuit .horizon-decor { background: radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 48% 30%, #fff, transparent), radial-gradient(1px 1px at 66% 18%, #fff, transparent), radial-gradient(1px 1px at 86% 34%, #fff, transparent), radial-gradient(1.5px 1.5px at 92% 10%, #fff, transparent), linear-gradient(180deg, var(--h1), var(--h2) 75%); }
.astre-h { position: absolute; left: var(--astre-x); top: var(--astre-y); width: clamp(60px, 9vw, 110px); aspect-ratio: 1; border-radius: 50%; background: var(--astre); box-shadow: 0 0 70px 20px color-mix(in srgb, var(--astre) 55%, transparent); animation: flotte 8s ease-in-out infinite alternate; }
@keyframes flotte { to { transform: translateY(10px); } }
.vedra-h { position: absolute; left: 34%; bottom: 14%; width: min(560px, 70%); fill: var(--roc); }
.vague-h { position: absolute; left: 0; width: 200%; max-width: none; bottom: 0; height: 22%; fill: var(--mer1); animation: houle-h 12s linear infinite; }
.vague-h.v2 { height: 14%; fill: var(--mer2); animation-duration: 8s; }
@keyframes houle-h { to { transform: translateX(-50%); } }
.horizon-texte { min-width: 0; padding-bottom: 8%; }
.horizon h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0; text-shadow: 0 2px 20px rgba(0, 0, 0, .08); }
.salut { display: inline-block; font-family: var(--display); font-weight: 750; font-size: 1.15rem; background: #fff; color: #13262E; padding: 6px 16px; border-radius: 16px 16px 16px 4px; transform: rotate(-3deg); margin-bottom: 14px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3); }
.direct-ibiza { margin: 10px 0 0; font-weight: 600; opacity: .85; }

/* Carte d'embarquement */
.billet { display: flex; background: #FDFCFA; color: #13262E; border-radius: 20px; box-shadow: 0 24px 50px -24px rgba(10, 30, 40, .55); min-width: 0; position: relative; transform: rotate(1.5deg); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.billet:hover { transform: rotate(0) translateY(-4px); }
.billet-corps { padding: 18px 20px; display: grid; gap: 10px; min-width: 0; }
.billet-tete { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8A6A5A; }
.iata { font-family: var(--display); font-size: 1.5rem; letter-spacing: .02em; color: #D6336C; }
.billet-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; }
.billet-infos dt { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #8A9A9E; }
.billet-infos dd { margin: 0; font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.decompte { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding-top: 10px; border-top: 1.5px dashed #E5DED3; }
.decompte b { font-family: var(--display); font-size: 3rem; line-height: .9; font-weight: 800; background: linear-gradient(135deg, #1F95A3, #D6336C); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.decompte span { font-size: .82rem; line-height: 1.2; color: #55676C; font-weight: 600; }
.decompte-fin { margin: 0; font-size: .78rem; color: #8A9A9E; font-variant-numeric: tabular-nums; min-height: 1em; }
.billet-talon { display: grid; align-content: center; gap: 2px; padding: 18px 18px 18px 20px; border-left: 2px dashed #E5DED3; position: relative; text-align: center; min-width: 96px; }
.billet-talon::before, .billet-talon::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--fond); }
.billet-talon::before { top: -10px; } .billet-talon::after { bottom: -10px; }
.talon-label { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #8A9A9E; }
.billet-talon b { font-family: var(--display); font-size: 1.15rem; margin-bottom: 6px; }
.code-barre { display: block; height: 30px; margin-top: 4px; background: repeating-linear-gradient(90deg, #13262E 0 2px, transparent 2px 4px, #13262E 4px 5px, transparent 5px 8px, #13262E 8px 11px, transparent 11px 12px); opacity: .8; }
.horizon .billet { align-self: center; }
@media (max-width: 760px) {
  .horizon { grid-template-columns: 1fr; }
  .horizon .billet { transform: none; }
  .vedra-h { left: 20%; width: 90%; bottom: 18%; opacity: .9; }
}
.liste-billets { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
.billet-lien { text-decoration: none; transform: rotate(-.8deg); }
.billet-lien:nth-child(2n) { transform: rotate(.8deg); }
.billet-lien h2 { margin: 0; font-size: 1.35rem; }
.billet-lien .meta { color: #55676C; margin: 0; }
.billet-lien progress.jauge { margin: 4px 0; }

/* Onglets façon application */
.onglets-app { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--carte); border: 1px solid var(--trait); border-radius: 28px; margin: 0 0 24px; box-shadow: 0 10px 30px -22px rgba(11, 79, 99, .6); }
.onglets-app a { position: relative; flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; text-decoration: none; color: var(--encre-2); font-weight: 600; font-size: .92rem; transition: background .2s, color .2s, transform .15s; }
.onglets-app a:hover { color: var(--encre); transform: translateY(-1px); }
.onglets-app a.on { background: linear-gradient(135deg, var(--lagon), var(--bougain)); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--bougain) 70%, transparent); }
.onglets-app svg { width: 20px; height: 20px; flex: none; }
.onglets-app .bulle-n { font-style: normal; position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; font-size: .68rem; border: 2px solid var(--carte); }
@media (max-width: 760px) {
  .mode-client .page { padding-bottom: 110px; }
  .onglets-app { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); margin: 0; border-radius: 24px; padding: 6px; justify-content: space-between; overflow: visible; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .35); }
  .onglets-app a { flex: 1 1 0; flex-direction: column; gap: 3px; padding: 8px 2px; font-size: .62rem; border-radius: 16px; min-width: 0; }
  .onglets-app a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .onglets-app svg { width: 22px; height: 22px; }
}

/* Accueil */
.accueil-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.accueil-grille .carte-postale { grid-column: 1 / -1; }
@media (max-width: 860px) { .accueil-grille { grid-template-columns: 1fr; } }
.carte-postale { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 6px; background: repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--lagon) 12%, transparent) 31px 32px), #FFFDF7; color: #13262E; box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .45); transform: rotate(-.6deg); border: 1px solid #EFE6D6; }
.carte-postale .surtitre { color: #D6336C; }
.manuscrit { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.25rem; line-height: 1.5; margin: 0; }
.timbre { position: absolute; top: 14px; right: 16px; width: 58px; height: 66px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: #fff; background: linear-gradient(160deg, #F4845F, #D6336C); outline: 3px dotted #FFFDF7; outline-offset: -5px; transform: rotate(6deg); font-size: .95rem; }
.carte-postale > div:last-of-type { padding-right: 70px; }
.avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, #F9C77E, #F4845F 45%, #D6336C); box-shadow: 0 0 0 3px #fff; }

.bloc-prestations { border-radius: 24px; }
.anneau-ligne { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.anneau-ligne h2 { margin: 2px 0 4px; font-size: 1.35rem; }
.anneau-ligne .aide { margin: 0; }
.anneau { width: 120px; height: 120px; flex: none; }
.anneau-fond { fill: none; stroke: color-mix(in srgb, var(--encre) 8%, transparent); stroke-width: 12; }
.anneau-plein { fill: none; stroke: url(#grad-anneau); stroke-width: 12; stroke-linecap: round; animation: remplit 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes remplit { from { stroke-dasharray: 0 400; } }
.anneau-num { font-family: var(--display); font-weight: 800; font-size: 26px; fill: var(--encre); }
.anneau-txt { font-size: 11px; fill: var(--encre-2); letter-spacing: .06em; text-transform: uppercase; }
.tampons { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.tampons li { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--encre) 4%, transparent); }
.tampons .n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: var(--carte); border: 2px dashed var(--trait); color: var(--encre-2); }
.tampons .lib { flex: 1; min-width: 0; }
.tampons li.fait { background: color-mix(in srgb, var(--ok) 9%, transparent); }
.tampons li.fait .n { background: var(--ok); border: 2px solid var(--ok); color: #fff; }
.tampons li.fait .lib { color: var(--encre-2); }
.tampon { flex: none; font-family: var(--display); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); border: 2px solid var(--ok); border-radius: 8px; padding: 2px 8px; transform: rotate(-8deg); opacity: .85; animation: tamponne .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes tamponne { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }

.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tuile { position: relative; overflow: hidden; display: grid; gap: 2px; align-content: end; min-height: 150px; padding: 18px; border-radius: 24px; color: #fff; text-decoration: none; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s; box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .6); }
.tuile:hover { transform: translateY(-5px) rotate(-1.5deg); }
.tuile:nth-child(2n):hover { transform: translateY(-5px) rotate(1.5deg); }
.tuile svg { position: absolute; top: 14px; right: 14px; width: 54px; height: 54px; opacity: .35; transition: transform .4s; }
.tuile:hover svg { transform: rotate(-12deg) scale(1.15); opacity: .55; }
.tuile b { font-family: var(--display); font-size: 2.6rem; line-height: 1; font-weight: 800; }
.tuile span { font-weight: 600; font-size: .9rem; opacity: .92; }
.t-mer { background: linear-gradient(150deg, #2FA7B5, #0B4F63); }
.t-coucher { background: linear-gradient(150deg, #F9C77E, #F4845F 50%, #D6336C); }
.t-bougain { background: linear-gradient(150deg, #E8579A, #9B1F5A); }
.t-sable { background: linear-gradient(150deg, #E7C89A, #B8865A); }

.vide-fun { text-align: center; padding: 48px 20px; border-radius: 28px; border: 2px dashed var(--trait); color: var(--encre-2); }
.vide-fun svg { width: 64px; height: 64px; color: var(--lagon); animation: flotte 3s ease-in-out infinite alternate; }
.vide-fun h2 { color: var(--encre); margin-top: 10px; }

/* Propositions */
.grille-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; align-items: start; }
.prop { position: relative; display: grid; gap: 10px; padding: 20px; border-radius: 24px; background: var(--carte); border: 1px solid var(--trait); --c: var(--lagon); overflow: hidden; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s; }
.prop::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--c); }
.prop:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--c) 80%, transparent); }
.cat-vol { --c: #2FA7B5; } .cat-transfert { --c: #5B8DEF; } .cat-logement { --c: #F4845F; } .cat-voiture { --c: #7C5CDB; }
.cat-activite { --c: #1E9E7A; } .cat-restaurant { --c: #E0A030; } .cat-soiree { --c: #D6336C; } .cat-autre { --c: #8A9A9E; }
.prop-haut { display: flex; align-items: center; gap: 10px; }
.pastille-cat { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); flex: none; }
.pastille-cat svg { width: 22px; height: 22px; }
.cat-nom { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c); flex: 1; }
.etiquette-prix { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: #13262E; background: #FFE9B8; padding: 6px 12px 6px 16px; border-radius: 6px 12px 12px 6px; position: relative; transform: rotate(3deg); }
.etiquette-prix::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--carte); }
.prop h3 { font-size: 1.25rem; margin: 4px 0 0; }
.postit { background: #FFF3A8; color: #3D3510; padding: 12px 14px; border-radius: 4px; transform: rotate(-1.2deg); box-shadow: 0 8px 14px -10px rgba(0, 0, 0, .4); font-size: .95rem; margin: 4px 0; }
.postit b { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; color: #8A6A10; }
.btn.large { width: 100%; }
.ruban { position: absolute; top: 16px; right: -34px; transform: rotate(35deg); background: linear-gradient(90deg, #D6336C, #F4845F); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 40px; z-index: 1; }
.coup-de-coeur { border-color: color-mix(in srgb, #D6336C 40%, var(--trait)); }
.coup-de-coeur .prop-haut { padding-right: 70px; }
.reactions { display: flex; gap: 8px; margin: 2px 0 0; }
.reaction { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: .85rem; padding: 9px 8px; border-radius: 14px; border: 1.5px solid var(--trait); background: transparent; color: var(--encre-2); cursor: pointer; transition: transform .15s cubic-bezier(.2, 1.6, .4, 1), background .15s, color .15s; }
.reaction svg { width: 16px; height: 16px; }
.reaction:hover { transform: scale(1.06); }
.reaction:active { transform: scale(.92); }
.reaction.on { background: #D6336C; border-color: #D6336C; color: #fff; }
.reaction.r-ok.on { background: var(--ok); border-color: var(--ok); }
.reaction.r-non.on { background: var(--encre-2); border-color: var(--encre-2); color: var(--carte); }
.choix-non { opacity: .6; }
.choix-reserve::after { content: "Réservé ✓"; position: absolute; top: 58px; right: 18px; font-family: var(--display); font-weight: 800; color: var(--ok); border: 3px solid var(--ok); border-radius: 10px; padding: 4px 10px; transform: rotate(-12deg); opacity: .75; pointer-events: none; }

/* Programme */
.journee-prog { margin-bottom: 26px; }
.jour-chip { display: inline-flex; align-items: center; gap: 10px; font-size: 1.15rem; background: var(--carte); border: 1px solid var(--trait); padding: 6px 16px 6px 6px; border-radius: 999px; margin: 0 0 14px; }
.jour-num { background: linear-gradient(135deg, #F9C77E, #F4845F); color: #13262E; padding: 4px 12px; border-radius: 999px; font-size: .85rem; text-transform: none; }
.frise-fun { list-style: none; padding: 0 0 0 8px; margin: 0; display: grid; gap: 12px; }
.frise-fun li { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; position: relative; }
.frise-fun li::before { content: ""; position: absolute; left: 36px; top: 40px; bottom: -14px; width: 2px; background: repeating-linear-gradient(var(--trait) 0 6px, transparent 6px 10px); }
.frise-fun li:last-child::before { display: none; }
.heure-bulle { display: grid; place-items: center; height: 40px; border-radius: 14px; background: var(--mer); color: #fff; font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; }
@media (prefers-color-scheme: dark) { .heure-bulle { color: #06323D; } }
.etape { background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; padding: 12px 16px; display: grid; gap: 4px; min-width: 0; transition: transform .2s; }
.etape:hover { transform: translateX(4px); }
.etape b { font-size: 1.05rem; }
.lieu { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: .88rem; color: var(--bougain); font-weight: 600; }
.lieu svg { width: 15px; height: 15px; flex: none; }
.lieu a { color: var(--mer); font-weight: 700; }
.etape p { margin: 0; color: var(--encre-2); }

/* Adresses */
.titre-cat { font-size: 1.4rem; margin: 26px 0 12px; }
.grille-adresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.adresse-fun { position: relative; padding: 20px 18px 18px; border-radius: 22px; background: var(--carte); border: 1px solid var(--trait); display: grid; gap: 6px; align-content: start; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); --t: #2FA7B5; }
.adresse-fun:hover { transform: translateY(-4px) rotate(-.8deg); }
.teinte-2 { --t: #F4845F; } .teinte-3 { --t: #D6336C; } .teinte-4 { --t: #1E9E7A; }
.adresse-fun .pin { position: absolute; top: -12px; right: 16px; width: 40px; height: 40px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--t); display: grid; place-items: center; box-shadow: 0 8px 16px -8px var(--t); }
.adresse-fun .pin svg { width: 20px; height: 20px; color: #fff; transform: rotate(45deg); }
.adresse-fun h3 { margin: 0; padding-right: 40px; }
.parle-fr { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; padding: 3px 10px 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--encre) 6%, transparent); color: var(--encre); }
.parle-fr::before { content: ""; width: 18px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #2A4FA8 0 33%, #F4F4F4 33% 66%, #D93B3B 66%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.ville { margin: 0; font-weight: 600; color: var(--t); }
.adresse-fun .meta { margin: 0; }
.lien-fleche { font-weight: 600; color: var(--t); text-decoration: none; }

/* Documents */
.grille-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.doc-fun { position: relative; display: grid; gap: 6px; align-content: start; min-height: 190px; padding: 22px 18px 18px; text-decoration: none; color: var(--encre); background: var(--carte); border: 1px solid var(--trait); border-radius: 16px 34px 16px 16px; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); overflow: hidden; }
.doc-fun::after { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: linear-gradient(225deg, var(--fond) 50%, color-mix(in srgb, var(--encre) 10%, var(--carte)) 50%); border-bottom-left-radius: 8px; }
.doc-fun:hover { transform: translateY(-5px) rotate(1deg); }
.doc-type { justify-self: start; font-weight: 800; font-size: .75rem; letter-spacing: .1em; color: #fff; background: #D6336C; padding: 4px 10px; border-radius: 8px; }
.doc-fun b { font-size: 1.05rem; overflow-wrap: anywhere; }
.doc-dl { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--lagon); }
.doc-dl svg { width: 18px; height: 18px; }

/* Messagerie */
.chat { background: var(--carte); border: 1px solid var(--trait); border-radius: 28px; overflow: hidden; display: grid; }
.chat-tete { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(135deg, var(--mer), #0E6A7D); color: #fff; }
.chat-tete small { display: block; color: rgba(255, 255, 255, .8); font-size: .8rem; }
.chat-tete .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
@media (prefers-color-scheme: dark) { .chat-tete { background: linear-gradient(135deg, #0B4F63, #0E6A7D); } }
.chat .fil { padding: 18px; min-height: 260px; max-height: 55vh; background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--lagon) 7%, transparent), transparent 50%), radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--coucher) 8%, transparent), transparent 50%); }
.chat .msg { animation: bulle .35s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bulle { from { transform: scale(.85) translateY(8px); opacity: 0; } }
.chat .msg.moi { background: linear-gradient(135deg, #D6336C, #E8579A); color: #fff; }
.chat .msg.moi small { color: rgba(255, 255, 255, .8); }
.chat-saisie { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--trait); background: var(--carte); }
.chat-saisie textarea { border-radius: 22px; padding: 12px 16px; min-height: 46px; max-height: 160px; resize: none; }
.envoyer { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--lagon), var(--bougain)); transition: transform .15s cubic-bezier(.2, 1.6, .4, 1); }
.envoyer:hover { transform: scale(1.08) rotate(-10deg); }
.envoyer svg { width: 20px; height: 20px; }

/* Confettis */
.confettis { position: fixed; inset: 0; pointer-events: none; z-index: 100; }

@media (prefers-reduced-motion: reduce) {
  .mode-client *, .mode-client *::before, .mode-client *::after { animation: none !important; transition: none !important; }
}
.horizon .billet-talon::before, .horizon .billet-talon::after { display: none; }
.jour-date { display: inline-block; }
.jour-date::first-letter { text-transform: uppercase; }
.prop > * { min-width: 0; }
.prop { grid-template-columns: minmax(0, 1fr); }
.prop-haut { flex-wrap: wrap; }
.etiquette-prix { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.prop h3, .prop p { overflow-wrap: anywhere; }
.choix-reserve::after { top: auto; bottom: 64px; right: 22px; background: color-mix(in srgb, var(--carte) 70%, transparent); }
@media (max-width: 600px) {
  .carte-postale { padding-top: 30px; }
  .carte-postale > div:last-of-type { padding-right: 0; }
  .timbre { width: 44px; height: 50px; top: -12px; right: 12px; font-size: .8rem; }
}

/* ===== Check-list avant départ ===== */
.banniere-depart { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; border-radius: 20px; text-decoration: none; color: #13262E; background: linear-gradient(135deg, #FFE9B8, #F9C77E); box-shadow: 0 12px 26px -18px rgba(180, 110, 20, .8); animation: arrive .5s cubic-bezier(.2, 1.4, .4, 1); }
.banniere-depart svg { width: 34px; height: 34px; flex: none; color: #D6336C; }
.banniere-depart span { flex: 1; display: grid; font-size: .92rem; }
.banniere-depart b { font-family: var(--display); font-size: 1.1rem; }
.banniere-depart i { font-style: normal; font-weight: 700; white-space: nowrap; }
.banniere-depart.en-retard { background: linear-gradient(135deg, #F4845F, #D6336C); color: #fff; }
.banniere-depart.en-retard svg { color: #fff; }
.depart-tete { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: 22px 24px; border-radius: 26px; background: linear-gradient(135deg, var(--mer), #0E6A7D); color: #fff; margin-bottom: 14px; }
.depart-tete > div:last-child { flex: 1; min-width: 220px; }
.depart-tete h2 { margin: 0 0 4px; font-size: 1.45rem; }
.depart-tete p { margin: 0; opacity: .9; }
.depart-tete progress.jauge { background: rgba(255, 255, 255, .2); margin-top: 12px; }
.depart-tete progress.jauge::-webkit-progress-bar { background: rgba(255, 255, 255, .2); }
.depart-tete.en-retard { background: linear-gradient(135deg, #F4845F, #D6336C); }
.depart-tete.valide { background: linear-gradient(135deg, #1E8A5A, #2FA7B5); }
.depart-compteur { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 3px solid rgba(255, 255, 255, .5); text-align: center; }
.depart-compteur b { font-family: var(--display); font-size: 2rem; line-height: 1; }
.depart-compteur span { font-size: .72rem; opacity: .9; line-height: 1.1; }
.liste-depart { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.item-depart { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; border-radius: 20px; background: var(--carte); border: 1px solid var(--trait); border-left: 6px solid var(--bougain); transition: transform .2s, background .2s; }
.item-depart.niv-si_concerne { border-left-color: #E0A030; }
.item-depart.niv-conseille { border-left-color: var(--lagon); }
.item-depart.st-fait { background: color-mix(in srgb, var(--ok) 8%, var(--carte)); border-left-color: var(--ok); }
.item-depart.st-non_concerne { opacity: .65; border-left-color: var(--trait); }
.item-texte { flex: 1; min-width: 220px; display: grid; gap: 3px; }
.item-texte b { font-size: 1.05rem; }
.item-texte p { margin: 0; font-size: .9rem; color: var(--encre-2); }
.niveau { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bougain); }
.niv-si_concerne .niveau { color: #B07A10; }
.niv-conseille .niveau { color: var(--lagon); }
.item-actions { display: flex; gap: 8px; margin: 0; }
.item-actions .reaction { flex: none; padding: 9px 14px; }
.valider-depart { display: grid; gap: 12px; padding: 18px 20px; border-radius: 22px; background: var(--carte); border: 2px dashed var(--trait); }
.valider-depart .btn { justify-self: start; }
.valider-depart .btn[disabled] { background: var(--trait); border-color: var(--trait); color: var(--encre-2); cursor: not-allowed; transform: none; }
.stats .retard b { color: var(--err); }
.liste-prestations.admin li > span.coche { flex: none; }
/* Check-list côté gestion */
.liste-checklist-admin { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.liste-checklist-admin li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--trait); background: var(--carte); }
.liste-checklist-admin li.masque { background: transparent; border-style: dashed; opacity: .7; }
.liste-checklist-admin li.faite .coche { background: var(--ok); border-color: var(--ok); }
.liste-checklist-admin .lib { flex: 1; min-width: 200px; display: grid; }
.liste-checklist-admin .lib small { font-size: .8rem; }
.actions-cl { display: flex; gap: 10px; align-items: center; }
.actions-cl form { margin: 0; }
.interrupteur { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; color: var(--encre-2); padding: 4px; }
.interrupteur i { position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--trait); transition: background .2s; flex: none; }
.interrupteur i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.interrupteur.on { color: var(--ok); }
.interrupteur.on i { background: var(--ok); }
.interrupteur.on i::after { transform: translateX(16px); }

/* ===== Carte illustrée ===== */
.carte-section { display: grid; gap: 14px; }
.carte-outils { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.carte-outils h2 { margin: 0 0 4px; }
.carte-outils .aide { margin: 0; max-width: 46ch; }
.ico-btn { width: 18px; height: 18px; }
.carte-wrap { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(11, 79, 99, .6); background: #6FC2D1; line-height: 0; }
.carte-wrap.edition.pret { cursor: crosshair; }
.carte-svg { width: 100%; height: auto; display: block; font-family: var(--texte); }
.carte-svg .noms text { font-size: 17px; font-weight: 600; fill: #13262E; text-anchor: middle; paint-order: stroke; stroke: rgba(255, 255, 255, .7); stroke-width: 4px; }
.carte-svg .lbl-formentera { font-size: 15px; fill: #0B4F63; text-anchor: middle; font-style: italic; font-weight: 500; }
.houle-carte path { animation: houle-c 4s ease-in-out infinite; }
.houle-carte path:nth-child(2n) { animation-delay: -2s; }
@keyframes houle-c { 50% { transform: translateX(10px); } }
.pins { position: absolute; inset: 0; line-height: 1.3; }
.pin { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 2px; text-decoration: none; color: inherit; transition: transform .2s cubic-bezier(.2, 1.6, .4, 1); animation: tombe .6s cubic-bezier(.2, 1.4, .4, 1) both; z-index: 1; }
@keyframes tombe { from { transform: translate(-50%, -220%); opacity: 0; } }
.pin:hover, .pin.choisi { transform: translate(-50%, -100%) scale(1.15); z-index: 3; }
.pin-tete { width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: .85rem; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); border: 2px solid #fff; }
.pin-tete > * { transform: rotate(45deg); }
.pin-tete svg { width: 15px; height: 15px; }
.pin-etape .pin-tete, .pin-tete.etape { background: var(--bougain); }
.pin-adresse .pin-tete, .pin-tete.adresse { background: var(--lagon); }
.pin-nom { font-size: .72rem; font-weight: 700; background: rgba(255, 255, 255, .92); color: #13262E; padding: 2px 8px; border-radius: 99px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.pin.choisi .pin-nom { background: var(--encre); color: #fff; }
.pin-moi { z-index: 4; animation: none; }
.pin-moi .pin-tete { background: #1E8A5A; border-radius: 50%; transform: none; font-size: 1rem; box-shadow: 0 0 0 0 rgba(30, 138, 90, .6); animation: pulse-moi 1.8s infinite; }
.pin-moi .pin-tete > * { transform: none; }
@keyframes pulse-moi { 70% { box-shadow: 0 0 0 14px rgba(30, 138, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 138, 90, 0); } }
.pin-moi .pin-nom { background: #1E8A5A; color: #fff; }
.viseur { position: absolute; width: 22px; height: 22px; border: 2px dashed var(--bougain); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.placement .ligne-champs { align-items: end; }
@media (max-width: 600px) { .pin-nom { display: none; } .pin:hover .pin-nom, .pin.choisi .pin-nom { display: block; } .pin-tete { width: 26px; height: 26px; } }
.legende-carte { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.legende-carte li { display: flex; gap: 12px; align-items: center; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 10px 14px; scroll-margin-top: 90px; transition: box-shadow .3s; }
.legende-carte li:target { box-shadow: 0 0 0 3px var(--bougain); }
.legende-carte li.sans-pin { opacity: .6; }
.legende-carte li.sans-pin::after { content: "pas encore sur la carte"; font-size: .72rem; color: var(--encre-2); margin-left: auto; white-space: nowrap; }
.legende-carte .pin-tete { flex: none; width: 28px; height: 28px; }
.legende-carte div { display: grid; min-width: 0; }
.legende-carte small { color: var(--encre-2); }

/* ===== Aujourd'hui (pendant le séjour) ===== */
.aujourdhui { position: relative; overflow: hidden; border-radius: 26px; padding: 22px 24px; margin-bottom: 18px; color: #fff; background: linear-gradient(135deg, #0B4F63, #2FA7B5 60%, #F9C77E 140%); box-shadow: 0 20px 44px -26px rgba(11, 79, 99, .8); animation: arrive .6s cubic-bezier(.2, 1.4, .4, 1); }
.auj-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.auj-tete h2 { margin: 0; font-size: 1.6rem; }
.auj-tete .jour-num { color: #13262E; }
.auj-meteo { margin: 0; width: 100%; opacity: .9; font-size: .95rem; }
.auj-libre { margin: 0 0 14px; font-size: 1.05rem; }
.auj-liste { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.auj-liste li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .14); }
.auj-liste li .heure-bulle { background: #fff; color: var(--mer); min-width: 60px; }
.auj-liste li div { display: grid; }
.auj-liste li small { color: rgba(255, 255, 255, .8); }
.auj-liste li.passee { opacity: .55; }
.auj-liste li.prochaine { background: #fff; color: #13262E; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .4); }
.auj-liste li.prochaine small { color: var(--encre-2); }
.auj-liste li.prochaine::after { content: "Prochaine étape"; margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bougain); white-space: nowrap; }
.auj-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auj-actions .btn { background: rgba(255, 255, 255, .92); border-color: transparent; color: var(--mer); }

/* ===== Installation ===== */
.btn.installer { background: linear-gradient(135deg, var(--lagon), var(--bougain)); border: 0; color: #fff; padding: 8px 14px; font-size: .88rem; }
.conseil-ios { display: flex; gap: 12px; align-items: center; background: #FFF3A8; color: #3D3510; border-radius: 16px; padding: 12px 16px; font-size: .92rem; margin-bottom: 16px; }
.conseil-ios button { margin-left: auto; font: inherit; font-weight: 700; border: 0; background: #3D3510; color: #FFF3A8; border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.actions-ligne.bas { align-items: flex-end; height: 100%; }
.pin[data-x] { visibility: hidden; }
.pin[data-x][style] { visibility: visible; }
.onglets-app .court { display: none; }
@media (max-width: 760px) { .onglets-app .long { display: none; } .onglets-app .court { display: block; } .onglets-app a { padding: 8px 1px; } }

/* ===== Installer l'application ===== */
.installer-page { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.installer-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 22px 24px; border-radius: 26px; background: linear-gradient(135deg, #F9C77E, #F4845F 55%, #D6336C); color: #13262E; }
.installer-hero h1 { margin: 0 0 6px; }
.installer-hero .surtitre { color: #13262E; opacity: .8; }
.installer-hero .aide { color: #13262E; opacity: .9; margin: 0; }
.installer-icone { border-radius: 20px; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); flex: none; }
.etape-install { margin: 0; animation: arrive .5s cubic-bezier(.2, 1.4, .4, 1); }
.btn.grand { font-size: 1.1rem; padding: 16px 28px; width: 100%; }
.pas-a-pas { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 12px; }
.pas-a-pas li { display: grid; grid-template-columns: 34px 1fr 48px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--lagon) 8%, var(--carte)); border: 1px solid var(--trait); }
.pas-a-pas .num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bougain); color: #fff; font-family: var(--display); font-weight: 800; }
.pas-a-pas b { display: block; font-size: 1.05rem; }
.pas-a-pas span:not(.num) { font-size: .9rem; color: var(--encre-2); }
.pas-a-pas .illu { width: 48px; height: 48px; }
.qr-ligne { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.qr-img { border-radius: 16px; background: #fff; padding: 8px; border: 1px solid var(--trait); }
.qr-ligne > div { flex: 1; min-width: 200px; }
.etat-notifs { font-weight: 600; }
.carte-installer { position: relative; display: flex; gap: 14px; align-items: center; padding: 14px 44px 14px 16px; margin-bottom: 18px; border-radius: 22px; text-decoration: none; color: #13262E; background: linear-gradient(135deg, #CDEDF3, #F7EBDD); border: 1px solid var(--trait); animation: arrive .5s cubic-bezier(.2, 1.4, .4, 1); }
.carte-installer img { border-radius: 14px; flex: none; }
.carte-installer span { flex: 1; display: grid; font-size: .9rem; }
.carte-installer b { font-family: var(--display); font-size: 1.05rem; }
.carte-installer i { font-style: normal; font-weight: 700; white-space: nowrap; color: var(--bougain); }
.carte-installer .fermer { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 1.3rem; color: var(--encre-2); cursor: pointer; line-height: 1; padding: 4px 8px; }
.menu .btn.installer.on { opacity: .7; }
@media (max-width: 600px) { .carte-installer i { display: none; } .pas-a-pas li { grid-template-columns: 30px 1fr; } .pas-a-pas .illu { display: none; } }

/* ===== Traducteur ===== */
.traducteur { display: grid; gap: 16px; }
.trad-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.trad-tete h1 { margin: 0 0 4px; }
.trad-tete .aide { margin: 0; max-width: 56ch; }
.trad-langue { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; min-width: 220px; }
.trad-panneaux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .trad-panneaux { grid-template-columns: 1fr; } }
.trad-panneau { border-radius: 26px; padding: 18px; display: grid; gap: 12px; border: 1px solid var(--trait); background: var(--carte); }
.trad-panneau.eux { background: linear-gradient(160deg, color-mix(in srgb, var(--lagon) 12%, var(--carte)), var(--carte)); }
.trad-panneau header { display: flex; justify-content: space-between; align-items: center; }
.trad-panneau .qui { font-family: var(--display); font-weight: 750; font-size: 1.1rem; }
.trad-panneau .lg { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: var(--bougain); color: #fff; }
.trad-panneau.eux .lg { background: var(--lagon); }
.trad-panneau textarea { font-size: 1.1rem; border-radius: 16px; }
.trad-consigne { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--mer); }
.trad-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.micro { width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--bougain), #E8579A); box-shadow: 0 10px 20px -10px rgba(214, 51, 108, .8); transition: transform .15s; flex: none; }
.micro svg { width: 26px; height: 26px; }
.micro.grand { width: 72px; height: 72px; background: linear-gradient(135deg, var(--lagon), var(--mer)); box-shadow: 0 12px 24px -10px rgba(11, 79, 99, .8); }
.micro.grand svg { width: 34px; height: 34px; }
.micro:hover { transform: scale(1.06); }
.micro:disabled { opacity: .4; cursor: not-allowed; }
.micro.ecoute { animation: ecoute 1s ease-in-out infinite; }
@keyframes ecoute { 50% { transform: scale(1.12); box-shadow: 0 0 0 14px rgba(214, 51, 108, .15); } }
.trad-resultat { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--fond); animation: arrive .35s cubic-bezier(.2, 1.4, .4, 1); }
.trad-sortie { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.trad-sortie.erreur { font-family: var(--texte); font-weight: 500; font-size: 1rem; color: var(--encre-2); }
.trad-pron { margin: 0; color: var(--bougain); font-style: italic; }
.trad-etiquette { margin: 0; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--encre-2); }
.phrases { display: grid; gap: 12px; }
.phrases-tete h2 { margin: 0 0 2px; }
.phrases-tete .aide { margin: 0; }
.phrases-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.phrases-cats .pilule.on { background: var(--mer); border-color: var(--mer); color: #fff; }
.phrases-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.phrase { width: 100%; text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--trait); background: var(--carte); font: inherit; color: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.phrase:hover { transform: translateY(-2px); border-color: var(--lagon); }
.phrase b { font-size: .98rem; }
.phrase span { color: var(--lagon); font-weight: 600; }
/* ----- Traducteur : toujours à portée de main ----- */
.flottant-trad { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 29; display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--bougain), var(--coucher)); color: #fff; text-decoration: none; box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--bougain) 80%, transparent); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s; }
.flottant-trad:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 44px -14px color-mix(in srgb, var(--bougain) 90%, transparent); }
.flottant-trad svg { width: 28px; height: 28px; flex: none; position: relative; }
.flottant-trad .lib { display: grid; line-height: 1.1; position: relative; }
.flottant-trad .lib b { font-family: var(--display); font-size: 1.05rem; font-weight: 800; }
.flottant-trad .lib small { font-size: .74rem; opacity: .9; font-weight: 600; }
.flottant-trad .halo { position: absolute; inset: 0; border-radius: inherit; background: inherit; z-index: -1; animation: halo 2.6s ease-out infinite; }
@keyframes halo { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (max-width: 760px) { .flottant-trad { right: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px 10px 12px; gap: 10px; } .flottant-trad svg { width: 24px; height: 24px; } .flottant-trad .lib b { font-size: .95rem; } .flottant-trad .lib small { font-size: .68rem; } }
@media (prefers-reduced-motion: reduce) { .flottant-trad .halo { animation: none; } }

.menu-trad { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--mer) !important; }
.menu-trad svg { width: 18px; height: 18px; }
.menu-trad.on, .menu-trad:hover { background: color-mix(in srgb, var(--mer) 12%, transparent) !important; }

.carte-trad { position: relative; display: flex; gap: 16px; align-items: center; padding: 16px 18px; margin: 0 0 18px; border-radius: 24px; text-decoration: none; color: #fff; background: linear-gradient(120deg, var(--mer) 0%, var(--lagon) 55%, var(--bougain) 140%); box-shadow: 0 18px 40px -22px rgba(11, 79, 99, .8); overflow: hidden; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.carte-trad::after { content: "¡Hola!"; position: absolute; right: 18px; top: -10px; font-family: var(--display); font-size: 4.2rem; font-weight: 800; opacity: .12; transform: rotate(-8deg); pointer-events: none; }
.carte-trad:hover { transform: translateY(-3px); }
.carte-trad .ico { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); backdrop-filter: blur(4px); }
.carte-trad .ico svg { width: 30px; height: 30px; }
.carte-trad .txt { display: grid; gap: 3px; font-size: .92rem; line-height: 1.4; opacity: .95; }
.carte-trad .txt b { font-family: var(--display); font-size: 1.15rem; font-weight: 800; }
.carte-trad i { flex: none; font-style: normal; font-weight: 700; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--mer); white-space: nowrap; position: relative; }
@media (max-width: 640px) { .carte-trad { flex-wrap: wrap; } .carte-trad .txt { flex: 1 1 60%; } .carte-trad i { flex: 1 1 100%; text-align: center; } .carte-trad::after { font-size: 3rem; } }
.liste-billets .carte-trad, .carte-trad + .liste-billets { margin-top: 0; }
.plein-ecran { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; gap: 20px; padding: 24px; background: #fff; color: #13262E; grid-template-rows: 1fr auto; }
.plein-ecran p { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 9vw, 5rem); line-height: 1.1; text-align: center; overflow-wrap: anywhere; align-self: center; }
.sans-defilement { overflow: hidden; }
@media (max-width: 600px) { .mode-client .menu { gap: 2px; } .mode-client .menu a, .mode-client .menu .lien { font-size: .82rem; padding: 6px 9px; } .mode-client .btn.installer { font-size: .8rem; padding: 6px 10px; } }

/* ===== Navigation du séjour : barre latérale sur grand écran, pager précédent/suivant, balayage sur mobile ===== */
.contenu-onglet { min-width: 0; }
@media (min-width: 1000px) {
  .sejour-corps { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 26px; align-items: start; }
  .onglets-app { position: sticky; top: 84px; flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 10px; border-radius: 26px; margin: 0; }
  .onglets-app a { justify-content: flex-start; padding: 12px 14px; border-radius: 16px; font-size: .98rem; transform: none; }
  .onglets-app a:hover { background: color-mix(in srgb, var(--encre) 5%, transparent); transform: translateX(3px); }
  .onglets-app a.on { transform: none; }
  .onglets-app svg { width: 22px; height: 22px; }
  .onglets-app .bulle-n { position: static; margin-left: auto; border: 0; }
  .onglets-app::before { content: "Votre séjour"; display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); padding: 6px 14px 8px; }
}
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--trait); }
.pager a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); padding: 10px 14px; border-radius: 16px; border: 1px solid var(--trait); background: var(--carte); transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), border-color .2s; max-width: 100%; min-width: 0; }
.pager a:hover { border-color: var(--lagon); }
.pager-prec:hover { transform: translateX(-4px); } .pager-suiv:hover { transform: translateX(4px); }
.pager-suiv { justify-self: end; text-align: right; }
.pager a span { display: grid; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pager a small { font-weight: 500; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); }
.pager svg { width: 22px; height: 22px; flex: none; color: var(--bougain); }
.pager-points { display: flex; gap: 5px; }
.pager-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--trait); }
.pager-points i.on { background: var(--bougain); width: 18px; border-radius: 3px; }
@media (max-width: 600px) { .pager { grid-template-columns: 1fr 1fr; } .pager-points { display: none; } .pager a span { font-size: .85rem; } .pager a small { display: none; } }
.contenu-onglet.sort-gauche { animation: sortG .18s ease-in both; } .contenu-onglet.sort-droite { animation: sortD .18s ease-in both; }
@keyframes sortG { to { opacity: 0; transform: translateX(-40px); } } @keyframes sortD { to { opacity: 0; transform: translateX(40px); } }
.contenu-onglet.entre { animation: entre .35s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes entre { from { opacity: 0; transform: translateX(var(--dx, 30px)); } }

/* ----- Portefeuille de voyage ----- */
.t-nuit { background: linear-gradient(150deg, #3D4F8C, #1B2440); }
.tuile.large { grid-column: 1 / -1; min-height: 120px; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.tuile.large b { font-size: 2.2rem; }
.tuile.large span { font-size: 1rem; line-height: 1.3; }
.tuile.large i { font-style: normal; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .18); white-space: nowrap; }
.tuile.large svg { position: absolute; right: auto; left: -14px; bottom: -14px; top: auto; width: 110px; height: 110px; opacity: .14; }
@media (max-width: 640px) { .tuile.large { grid-template-columns: auto 1fr; } .tuile.large i { grid-column: 1 / -1; justify-self: start; } }

.pf { display: grid; gap: 22px; }
.pf-tete { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.pf-tete h1 { margin: 2px 0 8px; }
.pf-tete > div:first-child { flex: 1 1 420px; }
.pf-garder { flex: 0 1 300px; display: grid; gap: 6px; }
.pf-garder .btn { justify-self: start; }
.pf-garder .btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.pf-rappel { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 20px; background: color-mix(in srgb, var(--coucher) 14%, var(--carte)); border: 1px solid color-mix(in srgb, var(--coucher) 35%, transparent); }
.pf-rappel svg { width: 34px; height: 34px; flex: none; color: var(--coucher); }
.pf-rappel p { margin: 0; font-size: .95rem; line-height: 1.45; }
.pf-nav { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 72px; z-index: 5; padding: 8px; margin: -8px; border-radius: 999px; background: color-mix(in srgb, var(--fond) 82%, transparent); backdrop-filter: blur(8px); }
.pf-puce { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; font-weight: 600; font-size: .9rem; }
.pf-puce:hover { border-color: var(--lagon); }
.pf-puce svg { width: 18px; height: 18px; color: var(--mer); }
.pf-puce em { font-style: normal; font-size: .75rem; padding: 1px 7px; border-radius: 999px; background: var(--bougain); color: #fff; }
.pf-cat { scroll-margin-top: 140px; display: grid; gap: 14px; padding: 20px; border-radius: 26px; background: var(--carte); border: 1px solid var(--trait); }
.pf-cat-tete { display: flex; gap: 14px; align-items: center; }
.pf-cat-tete h2 { margin: 0 0 2px; font-size: 1.25rem; }
.pf-cat-tete .aide { margin: 0; }
.pf-ico { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: #fff; }
.pf-ico svg { width: 26px; height: 26px; }
.c-voyage { background: linear-gradient(135deg, var(--lagon), var(--mer)); }
.c-identite { background: linear-gradient(135deg, #3D4F8C, #1B2440); }
.c-sante { background: linear-gradient(135deg, #E05A7A, var(--bougain)); }
.c-autre { background: linear-gradient(135deg, #E7C89A, #B8865A); }
.c-numeros { background: linear-gradient(135deg, var(--coucher), #D9603A); }
.pf-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pf-doc { display: flex; gap: 14px; padding: 10px; border-radius: 18px; background: var(--fond); border: 1px solid var(--trait); }
.pf-apercu { flex: none; width: 86px; height: 86px; border-radius: 14px; overflow: hidden; background: #fff; display: grid; place-items: center; border: 1px solid var(--trait); }
.pf-apercu img { width: 100%; height: 100%; object-fit: cover; }
.pf-apercu .pdf { font-family: var(--display); font-weight: 800; color: #D9603A; letter-spacing: .05em; }
.pf-infos { display: grid; gap: 4px; align-content: start; min-width: 0; }
.pf-titre { font-weight: 700; color: var(--encre); text-decoration: none; overflow-wrap: anywhere; }
.pf-titre:hover { color: var(--mer); }
.pf-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pf-actions form { margin: 0; }
.pilule.discret { border-color: transparent; color: var(--encre-2); }
.pilule.discret:hover { color: var(--err); border-color: var(--err); }
.pf-ajout { border-radius: 18px; border: 2px dashed var(--trait); padding: 0 16px; }
.pf-ajout summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 0; font-weight: 700; color: var(--mer); }
.pf-ajout summary::-webkit-details-marker { display: none; }
.pf-ajout summary svg { width: 22px; height: 22px; }
.pf-ajout[open] summary { border-bottom: 1px solid var(--trait); }
.pf-form { padding: 6px 0 16px; }
.pf-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-source { display: grid; justify-items: center; gap: 6px; padding: 16px 10px; border-radius: 16px; background: var(--fond); border: 1.5px solid var(--trait); cursor: pointer; text-align: center; font-weight: 600; transition: border-color .2s, transform .15s; }
.pf-source:hover { border-color: var(--lagon); transform: translateY(-2px); }
.pf-source svg { width: 30px; height: 30px; color: var(--mer); }
.pf-source small { display: block; font-weight: 500; color: var(--encre-2); }
.pf-source.on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--fond)); }
.pf-choisi { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, var(--carte)); font-size: .9rem; display: flex; align-items: center; gap: 10px; }
.pf-choisi img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.pf-case { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; font-weight: 600; margin-top: 10px; }
.pf-case input { width: 20px; height: 20px; margin: 0; }
.pf-case small { grid-column: 2; font-weight: 400; color: var(--encre-2); }
.pf-numeros { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pf-numeros li { padding: 12px 14px; border-radius: 16px; background: var(--fond); border: 1px solid var(--trait); }
.pf-numeros a { display: grid; text-decoration: none; color: var(--encre); }
.pf-numeros b { font-family: var(--display); font-size: 1.5rem; color: var(--mer); letter-spacing: .02em; }
.pf-numeros span { font-weight: 600; font-size: .92rem; }
.pf-numeros .aide { margin: 6px 0 0; font-size: .85rem; }
.pf-astuces { padding: 18px 22px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--lagon) 16%, var(--carte)), color-mix(in srgb, var(--sable, #E7C89A) 22%, var(--carte))); border: 1px solid var(--trait); }
.pf-astuces h2 { margin: 0 0 8px; font-size: 1.1rem; }
.pf-astuces ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .95rem; }
.pf-voir { display: grid; gap: 14px; }
.pf-cadre { border-radius: 22px; overflow: hidden; background: #111; display: grid; place-items: center; min-height: 240px; border: 1px solid var(--trait); }
.pf-cadre img { max-width: 100%; max-height: 72vh; display: block; transition: transform .3s; }
.pf-cadre.pdf object { width: 100%; height: 75vh; }
.pf-boutons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0; }
.pf-rappel-mini { color: var(--encre-2); }
.plein-ecran-doc { position: fixed; inset: 0; z-index: 60; background: #fff; display: grid; place-items: center; padding: 10px; }
.plein-ecran-doc img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s; }
.plein-ecran-doc .fermer { position: absolute; top: 12px; right: 12px; }
@media (max-width: 640px) { .pf-nav { top: 64px; } .pf-doc { flex-direction: row; } .pf-apercu { width: 72px; height: 72px; } .pf-cat { padding: 16px; } }

/* ----- Programme : activités du client, paiement, budget ----- */
.prog-outils { display: grid; gap: 12px; margin-bottom: 16px; }
.prog-budget { display: flex; gap: 10px; flex-wrap: wrap; }
.prog-budget > div { flex: 1 1 140px; display: grid; padding: 12px 16px; border-radius: 18px; background: var(--carte); border: 1px solid var(--trait); }
.prog-budget b { font-family: var(--display); font-size: 1.5rem; }
.prog-budget span { font-size: .82rem; color: var(--encre-2); }
.prog-budget .ok b { color: var(--ok); }
.prog-budget .a-payer b { color: var(--coucher); }
.prog-budget .aide { margin: 0; flex: 1 1 100%; }
.prog-ajout { margin-bottom: 18px; background: var(--carte); }
.form-activite { display: grid; gap: 6px; }
.frise-fun li.perso .heure-bulle { background: var(--bougain); color: #fff; }
.etape-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--encre) 8%, transparent); color: var(--encre-2); white-space: nowrap; }
.tag.perso { background: color-mix(in srgb, var(--bougain) 14%, transparent); color: var(--bougain); }
.tag.prix { background: color-mix(in srgb, var(--mer) 12%, transparent); color: var(--mer); }
.tag.p-paye { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.tag.p-a_payer { background: color-mix(in srgb, var(--coucher) 20%, transparent); color: #B8471E; }
.tag.p-sur_place { background: color-mix(in srgb, #E7C89A 45%, transparent); color: #7A5420; }
.etape-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.etape-actions form { margin: 0; }
.pilule.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.modif { order: 0; }
.modif[open] { flex: 1 1 100%; order: 10; }
.modif summary { list-style: none; display: inline-block; cursor: pointer; }
.modif summary::-webkit-details-marker { display: none; }
.modif[open] summary { background: var(--mer); border-color: var(--mer); color: #fff; }
.modif .pf-form { margin-top: 8px; padding: 12px; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); }
.lien-ext { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--mer); }
.jour-auj { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--coucher); color: #fff; margin-left: 6px; }
.journee-prog.auj { scroll-margin-top: 90px; }
.journee-prog { scroll-margin-top: 90px; }

/* ----- Mon voyage : infos et textes à montrer ----- */
.voy-intro { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.voy-intro h2 { margin: 2px 0 6px; }
.voy-intro .aide { margin: 0; max-width: 60ch; }
.voy-form { background: var(--carte); margin-bottom: 22px; }
.voy-form summary small { margin-left: auto; font-weight: 500; color: var(--encre-2); }
.voy-bloc { border: 0; padding: 0; margin: 10px 0 0; }
.voy-bloc legend { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 1.05rem; padding: 0; margin-bottom: 2px; }
.voy-bloc legend svg { width: 22px; height: 22px; color: var(--mer); }
.voy-bloc .aide { margin: 0 0 6px; }
.voy-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--trait); }
.voy-champs .large { grid-column: 1 / -1; }
.voy-champs .court { max-width: 220px; }
.voy-champs label { font-size: .85rem; font-weight: 600; margin: 0; }
.voy-textes-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.voy-textes-tete h2 { margin: 0; }
.voy-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.voy-carte { display: grid; gap: 10px; padding: 16px; border-radius: 22px; background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 12px 30px -24px rgba(11, 79, 99, .7); }
.voy-carte header { display: flex; gap: 12px; align-items: center; }
.voy-carte h3 { margin: 0; font-size: 1.1rem; }
.voy-carte small { color: var(--encre-2); }
.voy-carte .pf-ico { width: 44px; height: 44px; border-radius: 14px; }
.c-hotel { background: linear-gradient(135deg, var(--lagon), var(--mer)); }
.c-taxi { background: linear-gradient(135deg, #E7C89A, #B8865A); }
.c-voiture { background: linear-gradient(135deg, #3D4F8C, #1B2440); }
.c-restaurant { background: linear-gradient(135deg, var(--coucher), #D9603A); }
.c-aide { background: linear-gradient(135deg, var(--bougain), #E05A7A); }
.voy-texte { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--fond); font-size: 1.02rem; line-height: 1.5; }
.voy-carte.incomplet .voy-texte { background: color-mix(in srgb, var(--coucher) 10%, var(--fond)); }
.voy-manque { margin: 0; font-size: .85rem; color: #B8471E; }
.infos-voyage-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.infos-voyage-grille dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .9rem; }
.infos-voyage-grille dt { color: var(--encre-2); }
.infos-voyage-grille dd { margin: 0; font-weight: 600; }
.plein-ecran.carte-survie p { font-size: clamp(1.4rem, 3.6vw, 2.4rem); line-height: 1.4; text-align: left; max-width: 28ch; }

/* ----- Barre mobile : 5 rubriques principales + « Plus » ----- */
.onglets-app .plus { display: none; }
.feuille-plus { position: fixed; inset: 0; z-index: 40; }
.feuille-fond { position: absolute; inset: 0; background: rgba(10, 30, 40, .45); backdrop-filter: blur(3px); }
.feuille-corps { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: var(--carte); display: grid; gap: 14px; animation: monte .3s cubic-bezier(.2, 1.2, .4, 1); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .4); }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.feuille-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feuille-grille a { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 18px; background: var(--fond); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; font-weight: 600; font-size: .82rem; text-align: center; }
.feuille-grille a.on { background: linear-gradient(135deg, var(--lagon), var(--bougain)); color: #fff; border-color: transparent; }
.feuille-grille svg { width: 26px; height: 26px; }
.feuille-grille .bulle-n { position: absolute; top: 6px; right: 8px; }
.feuille-corps .btn { justify-self: center; }
@media (max-width: 760px) {
  .onglets-app a.secondaire { display: none; }
  .onglets-app .plus { display: inline-flex; flex: 1 1 0; flex-direction: column; gap: 3px; padding: 8px 2px; font: inherit; font-size: .62rem; font-weight: 600; color: var(--encre-2); background: none; border: 0; border-radius: 16px; position: relative; cursor: pointer; }
  .onglets-app .plus svg { width: 22px; height: 22px; }
  .onglets-app .plus.on { background: linear-gradient(135deg, var(--lagon), var(--bougain)); color: #fff; }
  .onglets-app .plus .bulle-n { font-style: normal; position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; font-size: .68rem; border: 2px solid var(--carte); }
}

/* ----- Recherche de lieux ----- */
.rech { display: grid; gap: 14px; }
.rech-tete h1 { margin: 2px 0 6px; }
.rech-tete .aide { margin: 0; max-width: 62ch; }
.rech-barre { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--carte); border: 2px solid var(--trait); box-shadow: 0 14px 34px -22px rgba(11, 79, 99, .8); }
.rech-barre:focus-within { border-color: var(--lagon); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lagon) 20%, transparent); }
.rech-barre svg { width: 22px; height: 22px; color: var(--mer); flex: none; }
.rech-barre input { border: 0; background: none; padding: 10px 0; font-size: 1.05rem; box-shadow: none; }
.rech-barre input:focus { box-shadow: none; }
.rech-barre .btn { flex: none; }
.rech-position { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rech-position .aide { margin: 0; }
.rech-suggestions { display: flex; gap: 8px; flex-wrap: wrap; }
.rech-suggestions .pilule { text-decoration: none; color: var(--encre); }
.rech-compte { margin: 0; }
.rech-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.resultat { display: grid; grid-template-columns: 220px 1fr; border-radius: 24px; overflow: hidden; background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 14px 34px -26px rgba(11, 79, 99, .8); }
.resultat.ferme-def { opacity: .6; }
.lieu-photo { position: relative; min-height: 180px; background: #e8eef0; }
.lieu-photo img, .lieu-photo .sans-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lieu-photo .sans-photo { display: grid; place-items: center; color: var(--mer); background: linear-gradient(135deg, #CDEDF3, #F7EBDD); }
.lieu-photo .sans-photo svg { width: 48px; height: 48px; }
.lieu-km { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(19, 38, 46, .78); color: #fff; font-weight: 700; font-size: .8rem; backdrop-filter: blur(4px); }
.lieu-corps { display: grid; gap: 6px; align-content: start; padding: 16px 18px; }
.lieu-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lieu-tete h2 { margin: 0; font-size: 1.2rem; }
.lieu-ligne { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.lieu-ligne .note { color: #B8860B; }
.lieu-ligne .note small { color: var(--encre-2); font-weight: 500; }
.lieu-ligne .prix { color: var(--encre-2); }
.lieu-corps .meta { margin: 0; }
.lieu-horaires summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--mer); }
.lieu-horaires ul { margin: 6px 0 0; padding-left: 18px; font-size: .88rem; color: var(--encre-2); }
.lieu-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.rech-pied { margin-top: 10px; }
@media (max-width: 640px) { .resultat { grid-template-columns: 1fr; } .lieu-photo { min-height: 170px; } .rech-barre { padding: 6px 6px 6px 12px; } .rech-barre .btn { padding: 10px 14px; } }

/* Barre de recherche sur l'accueil du séjour */
.accueil-rech { margin: 0 0 18px; }
.accueil-rech .rech-barre { padding: 6px 6px 6px 14px; }

/* ----- Bandeau compact en haut des rubriques (le billet complet reste sur l'accueil) ----- */
.sejour-bandeau { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 18px; border-radius: 20px; background: var(--carte); border: 1px solid var(--trait); }
.bandeau-retour { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--lagon), var(--bougain)); color: #fff; text-decoration: none; }
.bandeau-retour svg { width: 20px; height: 20px; }
.bandeau-texte { min-width: 0; flex: 1; }
.bandeau-texte .surtitre { margin: 0; }
.bandeau-texte h1 { margin: 0; font-size: 1.15rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandeau-chip { flex: none; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--coucher) 18%, var(--fond)); color: var(--encre); }
.bandeau-chip b { font-family: var(--display); font-size: 1.05rem; }
@media (max-width: 640px) { .bandeau-chip { display: none; } .sejour-bandeau { padding: 10px 12px; } }

/* Barre des rubriques sur les pages hors séjour (portefeuille, traducteur, recherche, compte) : mobile seulement */
.onglets-app.barre-globale { display: none; }
@media (max-width: 760px) { .onglets-app.barre-globale { display: flex; } }

/* Carte « Renseignez vos infos de voyage » */
.carte-voyage { position: relative; display: flex; gap: 16px; align-items: center; padding: 16px 18px; margin: 0 0 18px; border-radius: 24px; text-decoration: none; color: #13262E; background: linear-gradient(120deg, #FFE8A3, #F7C59F 60%, #F4845F 140%); box-shadow: 0 18px 40px -24px rgba(244, 132, 95, .9); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.carte-voyage:hover { transform: translateY(-3px); }
.carte-voyage .ico { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .55); color: #B8471E; }
.carte-voyage .ico svg { width: 30px; height: 30px; }
.carte-voyage .txt { display: grid; gap: 3px; font-size: .92rem; line-height: 1.4; }
.carte-voyage .txt b { font-family: var(--display); font-size: 1.15rem; font-weight: 800; }
.carte-voyage i { flex: none; font-style: normal; font-weight: 700; padding: 10px 16px; border-radius: 999px; background: #13262E; color: #fff; white-space: nowrap; }
.carte-voyage.compacte { margin: 18px 0 8px; }
@media (max-width: 640px) { .carte-voyage { flex-wrap: wrap; } .carte-voyage .txt { flex: 1 1 60%; } .carte-voyage i { flex: 1 1 100%; text-align: center; } }

/* ----- Recherche toujours à portée : champ dans l'en-tête (bureau), bouton rond (mobile), rubrique « Trouver » dans la barre ----- */
.rech-entete { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 380px; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--carte); border: 2px solid var(--trait); transition: border-color .2s, box-shadow .2s; }
.rech-entete:focus-within { border-color: var(--lagon); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lagon) 18%, transparent); }
.rech-entete > svg { width: 20px; height: 20px; color: var(--mer); flex: none; }
.rech-entete input { border: 0; background: none; padding: 6px 0; font-size: .95rem; box-shadow: none; min-width: 0; }
.rech-entete input:focus { box-shadow: none; }
.rech-entete-mobile { display: none; }
@media (max-width: 760px) {
  .rech-entete { flex: none; max-width: none; padding: 0; border: 0; background: none; order: 2; margin-left: auto; }
  .rech-entete > svg, .rech-entete input { display: none; }
  .rech-entete-mobile { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--mer), var(--lagon)); color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--mer) 80%, transparent); }
  .rech-entete-mobile svg { width: 20px; height: 20px; }
  .mode-client .menu { order: 3; flex-basis: 100%; }
}
.accueil-rech { border-width: 2px; border-color: color-mix(in srgb, var(--lagon) 55%, var(--trait)); box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--mer) 90%, transparent); }
.accueil-rech input { font-size: 1.05rem; }
.accueil-rech::before { content: "Envie de quelque chose ?"; position: absolute; top: -11px; left: 22px; padding: 2px 10px; border-radius: 999px; background: var(--bougain); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.accueil-rech { position: relative; margin-top: 10px; }
.onglets-app .rubrique-trouver svg { color: inherit; }

/* ===== Gestion › Partenaires ===== */
.pt-compteurs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.pt-compteurs .pilule { text-decoration: none; color: var(--encre); }
.pt-compteurs .pilule.on { color: #fff; }
.pt-compteurs b { margin-left: 4px; }
.pt-relance:not(.on) { border-color: var(--or); }
.pt-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; }
.pt-filtres input[type=search] { flex: 1 1 200px; min-width: 0; }
.pt-filtres select { flex: 0 1 220px; min-width: 0; }
.pt-case { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.pt-case input { width: auto; margin: 0; flex: none; }
@media (max-width: 600px) { .pt-filtres select { flex: 1 1 100%; } }
.pt-form-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 14px; }
.pt-form-2 > div { display: grid; gap: 4px; }
.pt-form-2 .pleine { grid-column: 1 / -1; }
.pt-famille { margin-top: 34px; }
.pt-activite { font-size: 1rem; margin: 18px 0 10px; color: var(--encre); }
.pt-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.pt-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.pt-carte.accord { border-color: var(--ok); box-shadow: inset 4px 0 0 var(--ok); }
.pt-carte.discussion { box-shadow: inset 4px 0 0 var(--mer); }
.pt-carte.contacte, .pt-carte.relance { box-shadow: inset 4px 0 0 var(--or); }
.pt-carte.ne_pas_contacter, .pt-carte.refus { opacity: .6; }
.pt-carte p { margin: 0; }
.pt-haut { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pt-nom { font-weight: 700; color: var(--encre); text-decoration: none; overflow-wrap: anywhere; }
.pt-nom:hover { text-decoration: underline; }
.pt-etoiles { color: var(--or); font-weight: 700; }
.pt-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag.pt-fr { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.tag.pt-accord { background: color-mix(in srgb, var(--mer) 15%, transparent); color: var(--mer); }
.pt-accord-txt { font-size: .88rem; color: var(--encre-2); border-left: 3px solid var(--ok); padding-left: 8px; }
.pt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.btn.petit { padding: 6px 12px; font-size: .85rem; }
.btn.pt-wa { background: #25D366; border-color: #25D366; color: #06331A; }
.etat.discussion { background: color-mix(in srgb, var(--mer) 15%, transparent); color: var(--mer); }
.pt-colonnes { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; }
@media (max-width: 860px) { .pt-colonnes { grid-template-columns: 1fr; } }
[data-ecrire] { display: grid; gap: 6px; }
[data-ecrire] h2 { margin: 0 0 4px; }
[data-ecrire] label { font-weight: 600; font-size: .9rem; margin-top: 6px; }
[data-ecrire] textarea, [data-ecrire] select, [data-ecrire] input { width: 100%; }
.pt-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pt-note { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pt-note input { flex: 1 1 200px; min-width: 0; }
.pt-journal { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pt-journal li { border-bottom: 1px solid var(--trait); padding-bottom: 8px; }
.pt-journal details { margin-top: 4px; }
.pt-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
.pt-2col > div { display: grid; gap: 4px; }
.pt-contacts { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; overflow-wrap: anywhere; }
.pt-autour-form { display: grid; gap: 12px; }
.pt-autour-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pt-autour-champs > div { display: grid; gap: 4px; }
.pt-autour-champs label { font-weight: 600; font-size: .9rem; }
.pt-autour-options { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pt-autour-options select { flex: 0 1 240px; min-width: 0; }
.pt-rayon { position: relative; }
.pt-rayon input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; padding: 0; }
.pt-rayon span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--trait); font-size: .85rem; cursor: pointer; }
.pt-rayon input:checked + span { background: var(--mer); border-color: var(--mer); color: #fff; }
.pt-rayon input:focus-visible + span { outline: 2px solid var(--mer); outline-offset: 2px; }
.pt-resume { font-size: 1.05rem; margin: 18px 0 6px; }
.pt-km { flex: none; text-align: right; font-weight: 700; color: var(--mer); font-size: .95rem; line-height: 1.1; }
.pt-km small { display: block; font-weight: 500; color: var(--encre-2); font-size: .75rem; }
.pt-plus { margin-top: 10px; }
.pt-plus .pt-grille { margin-top: 10px; }
.pt-partout { margin-top: 24px; }
.pt-partout summary h2 { display: inline; font-size: 1.05rem; }
.pt-liste-simple { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }

/* ===== Bus ===== */
.bus { display: grid; gap: 14px; }
.bus-form { display: grid; gap: 14px; }
.bus-champ { display: grid; gap: 6px; }
.bus-champ label { font-weight: 600; }
.bus-ligne-champ { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bus-ligne-champ select { flex: 1 1 200px; min-width: 0; }
.bus-form .btn.plein { justify-self: start; }
.bus-resume p { margin: 4px 0; }
.bus-resume .pilule { text-decoration: none; color: var(--encre); margin: 2px; display: inline-block; }
.bus-solution { display: grid; gap: 8px; margin: 0; }
.bus-sol-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bus-lignes { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; }
.bus-fleche { color: var(--encre-2); font-weight: 700; }
.bus-mode { font-weight: 700; font-size: 1.05rem; flex: 1 1 auto; }
.bus-nom { flex: 1 1 160px; min-width: 0; }
.bus-duree, .bus-prix { font-weight: 700; text-align: right; line-height: 1.15; }
.bus-duree { color: var(--mer); font-size: 1.1rem; }
.bus-prix { min-width: 74px; }
.bus-duree small, .bus-prix small { display: block; font-weight: 500; font-size: .75rem; color: var(--encre-2); }
.bus-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
.bus-puce { display: inline-block; min-width: 2.4em; text-align: center; padding: 3px 8px; border-radius: 8px; font-weight: 800; font-size: .85rem; color: #fff; background: #1F5C7A; }
.bus-puce.bus-aero { background: #6D4BC2; } .bus-puce.bus-p { background: #E08A1E; } .bus-puce.bus-a { background: #3C8C5A; }
.bus-puce.bus-n { background: #1E2A44; } .bus-puce.bus-d { background: #D6457F; } .bus-puce.bus-u { background: #4F6D7A; }
.bus-etapes ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 0; }
.bus-etape { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 8px 0; position: relative; }
.bus-etape:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 34px; bottom: -6px; border-left: 2px dashed var(--trait); }
.bus-etape-ico { width: 44px; text-align: center; font-size: 1.15rem; line-height: 1.6; }
.bus-etape b { display: block; }
.bus-etape p { margin: 2px 0; }
.bus-taxis { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.bus-google { text-align: center; margin: 4px 0 0; }
.bus-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bus-ligne { margin: 0; display: grid; gap: 4px; align-content: start; }
.bus-ligne p { margin: 0; }
.bus-tarifs summary h2 { display: inline; font-size: 1.1rem; }
.bus-tarifs-liste { padding-left: 18px; display: grid; gap: 6px; margin: 12px 0 6px; }
.bus-go { justify-self: start; }
/* Guidage plein écran */
body.guide-ouvert { overflow: hidden; }
.guide { position: fixed; inset: 0; z-index: 200; background: var(--fond, #FBF6EC); overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.guide[hidden] { display: none; }
.guide-tete { display: flex; align-items: center; gap: 10px; max-width: 640px; width: 100%; margin: 0 auto; }
.guide-num { font-weight: 800; color: var(--mer); white-space: nowrap; }
.guide-trajet { flex: 1; min-width: 0; color: var(--encre-2); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-quitter { border: 1.5px solid var(--trait); background: var(--carte); color: var(--encre); width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; }
.guide-points { display: flex; gap: 6px; max-width: 640px; width: 100%; margin: 0 auto; }
.guide-points i { flex: 1; height: 5px; border-radius: 3px; background: var(--trait); }
.guide-points i.fait { background: var(--ok); } .guide-points i.ici { background: var(--mer); }
.guide-corps { max-width: 640px; width: 100%; margin: 0 auto; display: grid; gap: 14px; text-align: center; padding-top: 8px; }
.guide-corps h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.2; margin: 0; }
.guide-ico { font-size: 3rem; line-height: 1; }
.guide-ico .bus-puce { font-size: 1.6rem; padding: 8px 16px; border-radius: 14px; }
.guide-detail { color: var(--encre-2); margin: 0; }
.guide-astuce { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 12px 14px; margin: 0; text-align: left; }
.guide-distance { font-size: 1.2rem; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 14px; }
.guide-distance.ok { border-color: var(--ok); color: var(--ok); }
.guide-corps .btn { justify-self: center; }
.guide-principal { font-size: 1.1rem; padding: 16px 28px; width: min(100%, 420px); }
.guide-barre { position: relative; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--mer) 12%, transparent); overflow: hidden; }
.guide-barre span { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--mer), #1C8FB0); border-radius: 999px; transition: width 1s ease; }
.guide-barre b { position: relative; line-height: 34px; font-weight: 800; color: var(--encre); mix-blend-mode: normal; }
.guide-infos p { margin: 4px 0; font-size: 1.05rem; }
.guide-alerte { background: #FFF3CD; color: #6B4A00; border: 2px solid #E0A800; border-radius: 16px; padding: 14px; font-size: 1.15rem; animation: guide-pulse 1.2s ease-in-out infinite; }
.guide-alerte.maintenant { background: #FDE2E1; color: #8A1C14; border-color: #D9534F; }
@keyframes guide-pulse { 50% { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .guide-alerte { animation: none; } .guide-barre span { transition: none; } }
/* Animations du guidage */
.anim-piste { position: relative; height: 92px; margin: 4px 12px 0; }
.anim-piste::before { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; border-bottom: 4px dotted color-mix(in srgb, var(--mer) 45%, transparent); }
.anim-depart { position: absolute; left: -6px; bottom: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--mer); }
.anim-arrivee { position: absolute; right: -10px; bottom: 14px; font-size: 2rem; line-height: 1; }
.anim-perso { position: absolute; left: 0; bottom: 16px; width: 44px; margin-left: -22px; color: var(--mer); transition: left 1.5s ease; }
.anim-marcheur { width: 44px; height: 66px; display: block; animation: anim-rebond .55s ease-in-out infinite; }
.anim-marcheur g { transform-box: view-box; }
.anim-marcheur .jambe-a, .anim-marcheur .jambe-b { transform-origin: 20px 36px; }
.anim-marcheur .bras-a, .anim-marcheur .bras-b { transform-origin: 20px 20px; }
.anim-marcheur .jambe-a, .anim-marcheur .bras-b { animation: anim-pas .55s ease-in-out infinite alternate; }
.anim-marcheur .jambe-b, .anim-marcheur .bras-a { animation: anim-pas .55s ease-in-out infinite alternate-reverse; }
.anim-perso.arrete .anim-marcheur, .anim-perso.arrete .anim-marcheur g { animation: none; }
@keyframes anim-pas { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes anim-rebond { 50% { transform: translateY(-3px); } }
.anim-arret { position: relative; height: 84px; overflow: hidden; }
.anim-poteau { position: absolute; left: 50%; bottom: 6px; font-size: 2.6rem; line-height: 1; transform: translateX(60px); }
.anim-bus-arrive { position: absolute; bottom: 4px; left: 50%; width: 120px; margin-left: -60px; animation: anim-arrivee-bus 4s ease-in-out infinite; }
.anim-bus, .anim-bus-arrive svg { width: 120px; height: 64px; display: block; }
@keyframes anim-arrivee-bus { 0% { transform: translateX(-260px); } 45%, 80% { transform: translateX(-40px); } 100% { transform: translateX(-40px); opacity: 0; } }
.anim-route { position: relative; height: 96px; margin: 0 34px 0 14px; border-radius: 14px; background: linear-gradient(transparent 62px, #3B4A50 62px, #3B4A50 90px, transparent 90px); }
.anim-route::after { content: ""; position: absolute; left: 0; right: 0; top: 75px; height: 3px; background: repeating-linear-gradient(90deg, #F5D76E 0 18px, transparent 18px 34px); animation: anim-ligne .6s linear infinite; }
@keyframes anim-ligne { to { background-position: -34px 0; } }
.anim-arrets { position: absolute; left: 0; right: 0; top: 56px; height: 0; }
.anim-arrets i { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; border: 2px solid #3B4A50; z-index: 1; }
.anim-arrets i.passe { background: var(--ok); }
.anim-arrets i:last-child { background: #D9534F; width: 14px; height: 14px; margin-left: -7px; top: -2px; }
.anim-car { position: absolute; left: 0; top: 12px; width: 96px; margin-left: -48px; transition: left 2s ease; z-index: 2; }
.anim-car .anim-bus { width: 96px; height: 52px; animation: anim-cahot .45s ease-in-out infinite; }
.anim-car .roue { transform-box: fill-box; transform-origin: center; animation: anim-roue .5s linear infinite; }
.anim-car.arrete .anim-bus, .anim-car.arrete .roue, .anim-route:has(.arrete)::after { animation: none; }
.anim-fin { position: absolute; right: -30px; top: 20px; font-size: 2rem; }
@keyframes anim-cahot { 50% { transform: translateY(-2px); } }
@keyframes anim-roue { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .anim-marcheur, .anim-marcheur g, .anim-bus-arrive, .anim-car .anim-bus, .anim-car .roue, .anim-route::after { animation: none !important; } }
/* Message pour le chauffeur */
.chauffeur { position: fixed; inset: 0; z-index: 300; background: #fff; color: #13262E; overflow-y: auto; padding: max(18px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.chauffeur[hidden] { display: none; }
.chauffeur-titre { margin: 0; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #8A5A12; font-weight: 700; text-align: center; }
.chauffeur-es { font-family: var(--display); font-size: clamp(1.45rem, 5.6vw, 2.4rem); line-height: 1.3; font-weight: 700; max-width: 30ch; margin: 0 auto; }
.chauffeur-es p { margin: 0 0 .35em; }
.chauffeur-es b { color: #1F5C7A; }
.chauffeur-fr { border-top: 1px solid #E5DED3; padding-top: 12px; color: #55676C; font-size: 1rem; max-width: 52ch; margin: 0 auto; }
.chauffeur-fr p { margin: 0; }
.chauffeur-astuce { margin: 0 auto; max-width: 52ch; background: #F6F3EE; border-radius: 12px; padding: 10px 12px; font-size: .9rem; color: #13262E; }
.chauffeur-boutons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: auto; padding-top: 8px; }
.chauffeur-boutons .btn { color: #13262E; }
.chauffeur-boutons .btn.plein { color: #fff; }
.bus-chauffeur-btn { margin-top: 6px; text-decoration: none; color: var(--encre); }
.guide-chauffeur { width: min(100%, 420px); justify-self: center; }

/* ===== Accueil : billet compact + raccourcis en icônes ===== */
.barre-compte { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--carte); border: 1.5px solid var(--trait); color: var(--encre); }
.barre-compte svg { width: 22px; height: 22px; }
.barre-compte.on { background: var(--mer); border-color: var(--mer); color: #fff; }
.mode-client .barre { flex-wrap: nowrap; }
.billet-mini { display: flex; border-radius: 20px; overflow: hidden; margin-bottom: 18px; box-shadow: 0 14px 34px -22px rgba(11, 79, 99, .55); color: #13262E;
  --h1: #9FD8E8; --h2: #FFF1DC; --astre: #FFE9B8; --astre-y: 14%; --astre-x: 70%; --roc: #5D5E55; --mer1: #2FA7B5; --mer2: #1F8C9A; }
.billet-mini.moment-jour { --h1: #3FA9D6; --h2: #C6EEF4; --astre-y: 6%; --astre-x: 62%; --mer1: #138FA3; --mer2: #0E7787; }
.billet-mini.moment-soir { --h1: #C2286E; --h2: #F9C77E; --astre-y: 40%; --astre-x: 68%; --roc: #2A1A3A; --mer1: #6A2C70; --mer2: #4A2A5C; }
.billet-mini.moment-nuit { --h1: #070D24; --h2: #2A1A4A; --astre: #E8ECF6; --astre-y: 10%; --astre-x: 78%; --roc: #04060F; --mer1: #0B1A3A; --mer2: #071230; }
.bm-ciel { position: relative; flex: 1 1 auto; min-width: 0; min-height: 132px; isolation: isolate; padding: 14px 16px 26px; display: flex; align-items: flex-start; }
.billet-mini.moment-soir .bm-ciel, .billet-mini.moment-nuit .bm-ciel { color: #fff; }
.bm-ciel .astre-h { width: 46px; box-shadow: 0 0 34px 10px color-mix(in srgb, var(--astre) 55%, transparent); }
.bm-ciel .vedra-h { left: 46%; width: min(300px, 62%); bottom: 10%; }
.bm-texte { position: relative; min-width: 0; max-width: 68%; }
.bm-salut { display: inline-block; margin: 0 0 6px; font-family: var(--display); font-weight: 750; font-size: .85rem; background: #fff; color: #13262E; padding: 3px 10px; border-radius: 12px 12px 12px 3px; transform: rotate(-3deg); }
.bm-texte h1 { margin: 0; font-size: clamp(1.15rem, 4.6vw, 1.7rem); line-height: 1.1; text-shadow: 0 1px 12px rgba(0, 0, 0, .12); overflow-wrap: anywhere; }
.bm-direct { margin: 4px 0 0; font-size: .78rem; opacity: .9; }
.bm-talon { position: relative; flex: none; width: 104px; background: #FFFDF8; color: #13262E; padding: 12px 10px 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
  border-left: 2px dashed #D9CDB8; }
.bm-talon::before, .bm-talon::after { content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--fond); }
.bm-talon::before { top: -8px; } .bm-talon::after { bottom: -8px; }
.bm-iata { font-family: var(--display); font-weight: 800; color: #D6336C; letter-spacing: .06em; font-size: .9rem; }
.bm-decompte { margin: 0; line-height: 1; }
.bm-decompte b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, #1F8C9A, #D6336C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bm-decompte span { font-size: .72rem; color: #55676C; }
.bm-dates { margin: 2px 0 0; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.bm-talon .code-barre { width: 100%; height: 16px; margin-top: 4px; }
.raccourcis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; margin: 4px 0 20px; }
@media (min-width: 700px) { .raccourcis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .raccourcis { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.raccourci { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--encre); text-align: center; min-width: 0; -webkit-tap-highlight-color: transparent; }
.raccourci[hidden] { display: none; }
.r-ico { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: #fff; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .45); transition: transform .15s ease; }
.r-ico svg, .raccourci .r-ico svg { width: 28px; height: 28px; color: #fff; }
.raccourci:active .r-ico { transform: scale(.92); }
@media (hover: hover) { .raccourci:hover .r-ico { transform: translateY(-2px); } }
.r-nom { font-size: .72rem; font-weight: 600; line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.r-mer .r-ico { background: linear-gradient(140deg, #2FA7B5, #0B4F63); }
.r-lagon .r-ico { background: linear-gradient(140deg, #4CC3CF, #1F8C9A); }
.r-coucher .r-ico { background: linear-gradient(140deg, #F9A15A, #D6336C); }
.r-bougain .r-ico { background: linear-gradient(140deg, #F06292, #B0306B); }
.r-sable .r-ico { background: linear-gradient(140deg, #E8B96A, #C2852A); }
.r-nuit .r-ico { background: linear-gradient(140deg, #3B3F7A, #1A1F3D); }
.r-gris .r-ico { background: linear-gradient(140deg, #8FA3A8, #55676C); }
.r-ico em { position: absolute; top: -6px; right: -6px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; font-style: normal; font-size: .72rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--fond); }
.r-ico em.r-compte { background: #fff; color: #13262E; }
.r-ico em.r-alerte { background: #D6336C; color: #fff; }
.compte-sortie { display: flex; gap: 10px; flex-wrap: wrap; }
/* Réserver par WhatsApp */
.reserver { position: fixed; inset: 0; z-index: 250; display: grid; align-items: end; justify-items: center; }
.reserver[hidden] { display: none; }
.reserver-fond { position: absolute; inset: 0; background: rgba(8, 24, 30, .55); }
.reserver-corps { position: relative; width: min(100%, 520px); max-height: 94vh; overflow-y: auto; background: var(--carte); border-radius: 22px 22px 0 0; padding: 22px 18px max(18px, env(safe-area-inset-bottom)); display: grid; gap: 6px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); }
@media (min-width: 600px) { .reserver { align-items: center; } .reserver-corps { border-radius: 22px; } }
.reserver-corps h2 { margin: 0 0 6px; }
.reserver-corps label { font-weight: 600; font-size: .9rem; margin-top: 6px; }
.reserver-corps input:not([type=radio]):not([type=checkbox]) { width: 100%; }
.reserver-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--trait); background: var(--carte); color: var(--encre); cursor: pointer; }
.res-type { display: flex; gap: 8px; }
.res-type label { margin: 0; flex: 1; }
.res-type input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.res-type span { display: block; text-align: center; padding: 10px; border-radius: 14px; border: 1.5px solid var(--trait); cursor: pointer; font-weight: 600; }
.res-type input:checked + span { background: var(--mer); border-color: var(--mer); color: #fff; }
.res-type input:focus-visible + span { outline: 2px solid var(--mer); outline-offset: 2px; }
.res-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.res-ligne > div { display: grid; gap: 4px; }
.res-compteur { display: flex; align-items: center; gap: 14px; }
.res-compteur button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--trait); background: var(--carte); color: var(--encre); font-size: 1.4rem; cursor: pointer; }
.res-compteur output { font-size: 1.6rem; font-weight: 800; min-width: 2ch; text-align: center; }
.res-options { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.res-options[hidden] { display: none; }
.res-options label { font-weight: 500; display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.res-options input { width: auto; margin: 0; }
.res-apercu pre { white-space: pre-wrap; font: inherit; font-size: .88rem; background: color-mix(in srgb, var(--mer) 7%, transparent); border-radius: 12px; padding: 10px; margin: 8px 0 0; }
.res-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.res-wa { background: #25D366 !important; border-color: #25D366 !important; color: #06331A !important; }
.btn-reserver { margin-top: 6px; color: var(--encre); }
.retract { margin: 24px auto; }
.retract .form { margin-top: 14px; }
.retract-recu { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0; }
.retract-recu dt { font-weight: 600; color: var(--encre-2); }
.retract-recu dd { margin: 0; font-variant-numeric: tabular-nums; }
.pied-espace a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Accès : verrous et bandeau d'état */
.verrou { text-align: left; margin: 24px auto; }
.verrou-ico { font-size: 2.4rem; margin: 0 0 4px; }
.verrou h1 { font-size: 1.6rem; margin: 4px 0 10px; }
.verrou-pourquoi { margin: 14px 0; }
.verrou-dispo { display: grid; gap: 8px; padding-left: 1.1em; }
.verrou-dispo a, .verrou p a:not(.btn) { color: var(--lagon); }
.acces-bandeau { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; margin: 12px 0 4px; background: color-mix(in srgb, var(--lagon) 10%, var(--fond)); font-size: .92rem; line-height: 1.4; }
.acces-bandeau b { font-weight: 700; }
.acces-bandeau .ab-ico { font-size: 1.3rem; line-height: 1; }
.acces-bandeau.ab-apres { background: color-mix(in srgb, var(--bougain) 12%, var(--fond)); }
.raccourci.verrouille .r-ico { opacity: .55; }
.raccourci .r-cadenas { position: absolute; right: -4px; bottom: -4px; font-size: .8rem; background: var(--fond); border-radius: 999px; width: 20px; height: 20px; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.feuille-grille a.verrouille svg, .onglets-app a.verrouille svg { opacity: .5; }
.liste-appareils { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 0; }
.liste-appareils li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.liste-appareils li:last-child { border-bottom: 0; }
/* Achat en ligne */
.achat { max-width: 720px; margin: 20px auto 40px; }
.achat h1 { margin: 2px 0 14px; }
.achat-form { display: grid; gap: 14px; }
.achat-etape { border: 1px solid var(--trait); border-radius: 18px; padding: 16px; margin: 0; background: var(--carte, var(--fond)); display: grid; gap: 8px; min-width: 0; }
.achat-etape legend { font-weight: 700; font-size: 1.05rem; padding: 0 6px; display: flex; align-items: center; gap: 8px; }
.achat-etape legend span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--bougain); color: #fff; font-size: .85rem; }
.achat-offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.achat-offre { position: relative; display: grid; gap: 2px; padding: 12px 10px; border: 2px solid var(--trait); border-radius: 14px; cursor: pointer; text-align: center; font-weight: 400 !important; }
.achat-offre input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.achat-offre .ao-nom { font-weight: 700; }
.achat-offre .ao-prix { font-size: 1.25rem; font-weight: 800; color: var(--lagon); }
.achat-offre.vedette::before { content: "★"; position: absolute; top: 4px; right: 8px; color: var(--bougain); font-size: .8rem; }
.achat-offre:has(input:checked) { border-color: var(--bougain); background: color-mix(in srgb, var(--bougain) 9%, transparent); }
.achat-offre:has(input:focus-visible) { outline: 2px solid var(--lagon); outline-offset: 2px; }
@media (max-width: 560px) { .achat-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.achat-alerte { border-left: 4px solid var(--bougain); background: color-mix(in srgb, var(--bougain) 8%, transparent); border-radius: 0 12px 12px 0; padding: 10px 14px; font-size: .92rem; }
.achat-alerte ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.achat-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.achat-dates > div { display: grid; gap: 4px; min-width: 0; }
.achat-dates input { width: 100%; }
.achat-recap { border-radius: 18px; padding: 14px 16px; background: var(--encre); color: var(--fond); }
.achat-recap .surtitre { color: var(--or, #F9C77E); }
.achat-recap ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 4px; font-size: .95rem; }
.achat-recap li { display: flex; justify-content: space-between; gap: 10px; }
.achat-total { display: flex; align-items: baseline; gap: 8px; margin: 0; border-top: 1px solid color-mix(in srgb, var(--fond) 25%, transparent); padding-top: 8px; font-weight: 600; }
.achat-total b { font-size: 1.8rem; margin-left: auto; }
.achat-tva { margin: 4px 0 0; text-align: right; font-size: .8rem; opacity: .7; }
.achat-payer { font-size: 1.05rem; padding-block: 14px; }
.achat-stripe { text-align: center; margin-top: -6px; }
.achat .case { border-bottom: 0; padding: 4px 0; }
.achat-merci h1 { font-size: 1.6rem; }
.ventes-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 18px; }
.ventes-chiffres p { margin: 0; padding: 14px; border-radius: 14px; background: var(--carte, var(--fond)); border: 1px solid var(--trait); display: grid; }
.ventes-chiffres b { font-size: 1.6rem; font-family: var(--display, inherit); }
.ventes-chiffres span { color: var(--encre-2); font-size: .85rem; }
.case span.case-texte { display: block; }
.case.rester { border-bottom: 0; padding: 6px 0 2px; }
/* Vidéo état du véhicule */
.vf, .vc { max-width: 720px; margin: 16px auto 40px; display: grid; gap: 12px; }
.vf h1, .vc h1 { margin: 0; }
.vf-reglages { display: grid; gap: 12px; }
.vf-moments { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vf-moment { position: relative; border: 2px solid var(--trait); border-radius: 14px; padding: 12px; text-align: center; font-weight: 600 !important; cursor: pointer; }
.vf-moment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vf-moment:has(input:checked) { border-color: var(--bougain); background: color-mix(in srgb, var(--bougain) 9%, transparent); }
.vf-conseils ol { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: .92rem; }
.vf-scene { position: relative; border-radius: 16px; overflow: hidden; background: #000; }
.vf-scene canvas { display: block; width: 100%; height: auto; }
.vf-rec { position: absolute; top: 10px; left: 10px; margin: 0; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.6); color: #fff; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vf-rec i { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; animation: vf-clignote 1s infinite; }
@keyframes vf-clignote { 50% { opacity: .2; } }
.vf-etat { margin: 0; font-weight: 600; min-height: 1.4em; }
.vf-etat.vf-alerte { color: var(--bougain); }
.vf-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.vf-go, .vf-stop { font-size: 1.05rem; padding-block: 14px; flex: 1; }
.vf-stop { background: var(--encre); }
.vf-garantie { border-radius: 16px; padding: 14px 16px; background: color-mix(in srgb, var(--lagon) 9%, var(--fond)); font-size: .92rem; }
.vf-garantie ul { margin: 6px 0; padding-left: 1.1em; display: grid; gap: 6px; }
.vc-badge { margin: 0; justify-self: start; padding: 6px 12px; border-radius: 999px; font-weight: 700; }
.vc-badge.ok { background: color-mix(in srgb, #2f9e44 16%, transparent); color: #237032; }
.vc-badge.diff { background: color-mix(in srgb, var(--or, #F9C77E) 30%, transparent); color: #8A5A12; }
.vc-video { width: 100%; border-radius: 16px; background: #000; max-height: 70vh; }
.vc-certif { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 16px; font-size: .93rem; }
.vc-certif dt { font-weight: 600; color: var(--encre-2); }
.vc-certif dd { margin: 0; min-width: 0; }
.vc-hash { font-size: .78rem; word-break: break-all; }
.vc-code { font-family: ui-monospace, monospace; letter-spacing: .15em; font-size: 1.1rem; }
.vc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-actions form { margin: 0; }
@media (max-width: 520px) { .vc-certif { grid-template-columns: 1fr; gap: 2px; } .vc-certif dd { margin-bottom: 8px; } }
/* Portefeuille en icônes */
.pf-rappel-court { font-size: .85rem; color: var(--encre-2); margin: 4px 0 2px; }
.pf-tuiles { margin-top: 10px; }
.pf-retour { display: inline-block; margin-bottom: 10px; }
[data-rubriques]:not(.rb-js) [data-retour-rubrique] { display: none; }
.rb-js [data-rubrique] { display: none; }
.rb-js [data-rubrique].actif { display: block; animation: pf-entree .2s ease; }
.pf.rb-ouvert > .pf-tete, .pf.rb-ouvert > .pf-tuiles, .pf.rb-ouvert > .pf-rappel-court, .rb-ouvert [data-accueil-rubriques] { display: none; }
@keyframes pf-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pf-pied-accueil { display: grid; gap: 8px; margin: 18px 0 70px; padding-top: 14px; border-top: 1px solid var(--trait); }
.pf.rb-ouvert > .pf-pied-accueil { display: none; }

/* Phrases utiles en icônes */
.voy-rubriques { display: grid; gap: 10px; }
.voy-titre { font-size: 1.15rem; margin: 2px 0 8px; }
.voy-remplir { display: block; text-decoration: none; }
.voy-tuiles { margin-top: 6px; }
.voy-carte-seule.actif { max-width: 640px; }
.voy-bloc-pli { border: 1px solid var(--trait); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; }
.voy-bloc-pli summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.voy-bloc-pli summary svg { width: 20px; height: 20px; }
.voy-bloc-pli[open] summary { margin-bottom: 8px; }
.voy-ok { margin-left: auto; color: #2f9e44; }
.voy-form-rubrique h2 small { font-weight: 400; }

/* Programme en tuiles : une journée à la fois */
.prog-rubriques { display: grid; gap: 10px; }
.prog-actions { margin-top: 4px; }
.prog-sous { margin: 10px 0 0; }
.jours-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.jour-tuile { position: relative; display: grid; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--carte, #fff); border: 1px solid var(--trait); color: inherit; text-decoration: none; min-height: 104px; box-shadow: 0 8px 18px -14px rgba(0,0,0,.35); transition: transform .15s ease; }
.jour-tuile:active { transform: scale(.97); }
.jour-tuile .jt-haut { display: flex; align-items: baseline; gap: 8px; font-size: .82rem; color: var(--encre-2); text-transform: capitalize; }
.jour-tuile .jt-haut b { font-size: 1.25rem; color: var(--lagon); font-family: var(--display, inherit); }
.jour-tuile .jt-titre { font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jour-tuile .jt-nb { font-size: .8rem; color: var(--encre-2); margin-top: auto; }
.jour-tuile .jt-auj { position: absolute; top: 10px; right: 10px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--bougain); color: #fff; padding: 2px 8px; border-radius: 999px; }
.jour-tuile.auj { border: 2px solid var(--bougain); }
.jour-tuile.libre .jt-titre { font-weight: 500; color: var(--encre-2); }
.jour-tuile.passe { opacity: .6; }
.jour-nav { display: flex; justify-content: space-between; align-items: center; }
.jour-fleches { display: flex; gap: 6px; }
.jour-fleches .pilule { font-size: 1.2rem; padding: 2px 14px; text-decoration: none; }
.vide-jour { padding: 18px; border-radius: 16px; background: color-mix(in srgb, var(--or, #F9C77E) 18%, transparent); font-weight: 600; }
.budget-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.budget-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; }
.budget-liste a { display: grid; color: inherit; text-decoration: none; }
.budget-liste a span { font-size: .82rem; color: var(--encre-2); }
.budget-liste em { font-style: normal; font-weight: 700; }
/* Partenaires */
.part-rubriques { display: grid; gap: 10px; }
.part-tete h2 { font-size: 1.2rem; margin: 2px 0 6px; }
.part-sous { margin: 14px 0 4px; }
.part-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.part-carte { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--carte, #fff); border: 1px solid var(--trait); box-shadow: 0 8px 18px -14px rgba(0,0,0,.35); }
.part-carte .pc-avantage { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: linear-gradient(135deg, #F9C77E, #F4845F 55%, #D6336C); color: #fff; }
.part-carte .pc-avantage svg { width: 22px; height: 22px; flex: none; color: #fff; }
.part-carte .pc-avantage b { font-size: 1.02rem; line-height: 1.25; }
.part-carte .pc-tete { display: grid; gap: 2px; }
.part-carte h3 { margin: 0; font-size: 1.05rem; }
.part-carte .pc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.part-carte .pc-actions .pilule { text-decoration: none; }
.part-carte.simple { box-shadow: none; }
.avantage { max-width: 520px; margin: 14px auto 40px; display: grid; gap: 12px; }
.av-billet { position: relative; overflow: hidden; border-radius: 24px; padding: 22px 20px; color: #fff; background: linear-gradient(135deg, #0B4F63, #1d7a8c 45%, #D6336C); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.av-billet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%); animation: av-reflet 3s linear infinite; pointer-events: none; }
@keyframes av-reflet { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.av-marque { margin: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.av-billet h1 { color: #fff; margin: 6px 0 10px; font-size: 1.7rem; }
.av-cadeau { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.16); }
.av-cadeau svg { width: 30px; height: 30px; flex: none; color: #fff; }
.av-cadeau b { font-size: 1.35rem; line-height: 1.2; }
.av-infos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .95rem; }
.av-infos dt { opacity: .8; }
.av-infos dd { margin: 0; }
.av-code { font-family: ui-monospace, monospace; letter-spacing: .12em; }
.av-direct { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.av-direct i { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; animation: vf-clignote 1s infinite; }
.av-es { margin: 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--lagon) 10%, var(--fond)); }

/* Traducteur compact : les deux traductions visibles sans défiler */
.trad-tete { align-items: center; }
.trad-tete h1 { margin: 0; font-size: 1.5rem; }
.trad-reglages { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trad-reglages .trad-langue { min-width: 0; }
.trad-reglages select { padding: 6px 10px; border-radius: 999px; font-weight: 600; }
.trad-reglages .pilule { text-decoration: none; }
.trad-reglages .pilule.on { background: var(--encre); color: var(--fond); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.face-a-face .trad-panneau.eux { transform: rotate(180deg); }
@media (max-width: 860px) {
  .traducteur { gap: 10px; }
  .trad-tete { gap: 8px; }
  .trad-panneaux { gap: 10px; }
  .face-a-face .trad-panneaux { display: flex; flex-direction: column-reverse; }
  .trad-panneau { padding: 12px 14px; gap: 8px; border-radius: 20px; }
  .trad-panneau header .qui { font-size: .95rem; }
  .trad-panneau textarea { font-size: 1rem; min-height: 0; height: 3.2em; padding: 8px 12px; }
  .trad-consigne { font-size: .9rem; }
  .trad-actions { gap: 8px; flex-wrap: nowrap; }
  .trad-actions .btn { padding: 8px 14px; font-size: .9rem; }
  .micro { width: 44px; height: 44px; }
  .micro svg { width: 22px; height: 22px; }
  .micro.grand { width: 48px; height: 48px; }
  .micro.grand svg { width: 24px; height: 24px; }
  .trad-resultat { padding: 10px 12px; gap: 6px; }
  .trad-sortie { font-size: 1.3rem; max-height: 6.2em; overflow-y: auto; }
  .trad-resultat .trad-actions .btn { padding: 6px 12px; font-size: .85rem; }
  .trad-info { display: none; }
}

@media (max-width: 860px) {
  .trad-tete { flex-wrap: nowrap; justify-content: space-between; }
  .trad-tete h1 { font-size: 1.2rem; }
  .trad-reglages { flex-wrap: nowrap; gap: 6px; }
  .trad-reglages .lib-long { display: none; }
  .trad-reglages .pilule { padding: 6px 10px; }
  .trad-reglages select { padding: 5px 8px; font-size: .85rem; }
  .trad-panneau { grid-template-columns: 1fr auto; column-gap: 10px; }
  .trad-panneau > header, .trad-panneau > .trad-consigne, .trad-panneau > .trad-resultat { grid-column: 1 / -1; }
  .trad-panneau > textarea { height: auto; min-height: 84px; align-self: stretch; }
  .trad-panneau > .trad-actions { flex-direction: column; justify-content: space-between; align-items: center; }
  .trad-panneau > .trad-actions .btn { padding: 6px 10px; font-size: .8rem; }
  .trad-consigne { font-size: .82rem; line-height: 1.3; }
  .trad-panneau header .lg { font-size: .62rem; padding: 3px 8px; }
  .trad-resultat .trad-actions { flex-direction: row; flex-wrap: wrap; }
  .trad-sortie { font-size: 1.2rem; max-height: 5em; }
  .trad-pron { font-size: .85rem; }
  .trad-etiquette { display: none; }
  .face-a-face .trad-panneau.eux { margin-bottom: 0; }
}
/* Avantage : QR à faire scanner */
.av-qr-zone { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 4px 0 12px; }
.av-qr { width: 150px; height: 150px; border-radius: 14px; background: #fff; padding: 6px; }
.av-qr-info { display: grid; gap: 6px; }
.av-consigne { margin: 0; font-size: .9rem; line-height: 1.35; }
.av-code-l { margin: 0; font-size: .85rem; opacity: .9; }
.av-code { font-family: ui-monospace, monospace; letter-spacing: .12em; font-size: 1.3rem; }
.av-minuteur { height: 6px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.av-minuteur i { display: block; height: 100%; width: 100%; background: #3ddc84; transition: width 1s linear; }
.av-valide { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(61,220,132,.25); margin-bottom: 12px; }
.av-valide span { font-size: 2rem; font-weight: 800; }
.av-valide p { margin: 0; }
.av-client { margin: 0; font-size: .9rem; opacity: .9; }
.av-avis p { margin: 0 0 8px; }
@media (max-width: 380px) { .av-qr-zone { grid-template-columns: 1fr; justify-items: center; text-align: center; } .av-qr { width: 200px; height: 200px; } }
/* Espace pro */
.pro { max-width: 560px; margin: 14px auto 40px; display: grid; gap: 14px; }
.pro-tete h1 { margin: 2px 0 6px; }
.pro-avantage { margin: 0; font-size: 1.05rem; }
.pro-mode { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--lagon) 14%, var(--fond)), var(--fond)); border: 1px solid var(--trait); }
.pro-etape { display: flex; gap: 12px; align-items: flex-start; }
.pro-etape > span { font-size: 2rem; }
.pro-etape p { margin: 2px 0 0; }
.pro-code label { font-weight: 600; font-size: .9rem; }
.pro-code-ligne { display: flex; gap: 8px; margin-top: 6px; }
.pro-code-ligne input { flex: 1; font-size: 1.4rem; letter-spacing: .15em; text-align: center; font-family: ui-monospace, monospace; }
.pro-verdict { border-radius: 24px; padding: 26px 20px; text-align: center; color: #fff; display: grid; gap: 6px; }
.pro-verdict.ok { background: linear-gradient(135deg, #1f9d55, #2fbf71); }
.pro-verdict.ok.valide { background: linear-gradient(135deg, #0B4F63, #1f9d55); }
.pro-verdict.ko { background: linear-gradient(135deg, #b42318, #e5484d); }
.pro-verdict h1 { color: #fff; margin: 0; font-size: 2rem; }
.pro-verdict p { margin: 0; }
.pv-ico { font-size: 3.4rem; font-weight: 800; line-height: 1; }
.pv-client { font-size: 1.3rem; font-weight: 700; margin-top: 8px !important; }
.pv-av { font-size: 1.1rem; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.18); justify-self: center; }
.pv-raison { font-size: 1.05rem; margin-top: 6px !important; }
.pv-heure { opacity: .85; font-variant-numeric: tabular-nums; }
.pro-valider .btn { width: 100%; font-size: 1.15rem; padding-block: 16px; }
.av-valide small { color: inherit; opacity: .85; }
.av-regle { margin: -6px 0 12px; font-size: .88rem; opacity: .9; }
.pc-regle { font-size: .8rem; color: var(--encre-2); margin-top: -4px; }
.pv-regle { font-size: .95rem; opacity: .95; }
.pt-regles { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; margin: 6px 0; }
.pt-regles legend { font-weight: 600; padding: 0 4px; }
.pass-filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; margin: 10px 0; }
.pass-filtres > div { display: grid; gap: 4px; }
.ventes-chiffres p.alerte { border-color: var(--bougain); }
.ventes-chiffres p.alerte b { color: var(--bougain); }
tr.ligne-alerte td { background: color-mix(in srgb, var(--bougain) 8%, transparent); }

/* Taxi */
.taxi { display: grid; gap: 12px; }
.taxi h1 { margin: 0; }
.taxi-appel-rapide { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #F4845F, #D6336C); box-shadow: 0 14px 28px -16px rgba(214,51,108,.9); margin: 8px 0 4px; }
.taxi-appel-rapide .tar-ico { font-size: 2rem; }
.taxi-appel-rapide b { display: block; font-size: 1.15rem; }
.taxi-appel-rapide small { opacity: .9; }
.taxi-rubrique h2 { margin: 4px 0 8px; }
.taxi-radios { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.taxi-radios a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 14px; color: inherit; text-decoration: none; background: var(--carte, #fff); }
.taxi-radios a small { display: block; color: var(--encre-2); font-size: .8rem; }
.taxi-radios .taxi-num { font-weight: 700; white-space: nowrap; color: var(--lagon); }
.taxi-radios li.proche a { border: 2px solid var(--bougain); }
.taxi-dire, .taxi-carte-es, .taxi-estim { padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--lagon) 10%, var(--fond)); margin: 10px 0; }
.taxi-es, .taxi-carte-es p[lang] { font-family: var(--display, inherit); font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 4px 0 8px; }
.taxi-raccourcis-dest { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.te-trajet { margin: 0 0 6px; }
.te-prix { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.te-prix b { font-size: 2.2rem; color: var(--bougain); }
.te-prix small { color: var(--encre-2); }
.te-detail { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; font-size: .92rem; }
.te-detail li { display: flex; justify-content: space-between; gap: 10px; }
.taxi-sous { margin: 14px 0 6px; }
.taxi-phrases { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.taxi-conseils { list-style: none; padding: 0; display: grid; gap: 10px; }
.taxi-conseils li { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--trait); line-height: 1.45; }
#plein-ecran-taxi:not([hidden]) { position: fixed; inset: 0; z-index: 100; background: #fff; color: #111; display: grid; place-content: center; gap: 24px; padding: 24px; text-align: center; }
#plein-ecran-taxi p { font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 800; line-height: 1.25; margin: 0; }

.taxi-commander { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 6px; }
.taxi-cmd { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; text-decoration: none; color: inherit; border: 1px solid var(--trait); background: var(--carte, #fff); }
.taxi-cmd .tc-ico { font-size: 1.5rem; }
.taxi-cmd b { display: block; font-size: .95rem; }
.taxi-cmd small { display: block; color: var(--encre-2); font-size: .75rem; line-height: 1.25; }
.tc-wa { border-color: #25D366; }
.tc-envoyer { background: #25D366; border-color: #25D366; color: #fff; display: block; text-align: center; margin: 10px 0; }
.taxi-etapes { padding-left: 20px; display: grid; gap: 8px; line-height: 1.45; margin: 12px 0; }
[data-wa-taxi] label.case { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-weight: 400; }

.bib-sejours { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 4px; max-height: 420px; overflow: auto; }
.bib-sejours .case { padding: 8px 0; }
.bib-sejours .case small { display: block; }
.bib-sejours input:disabled + span { opacity: .5; }
.bib-outils { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bib-envoi { border: 2px solid var(--lagon); }
.liste-docs li > div > .aide { font-size: .85rem; }

/* ===== Itinéraire dans l'appli ===== */
.iti-tete h1 { font-size: 1.5rem; margin: 4px 0 10px; line-height: 1.15; }
.iti-tete h1 .surtitre { display: block; margin-bottom: 2px; }
.iti-carte-zone { position: relative; margin: 0 -16px; }
.iti-carte { height: 52vh; min-height: 300px; background: #CDEBF0; }
@media (min-width: 760px) { .iti-carte-zone { margin: 0; } .iti-carte { border-radius: 22px; height: 60vh; } }
.iti-bandeau { position: absolute; z-index: 500; left: 12px; right: 12px; top: 12px; display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0B4F63, #13262E); box-shadow: 0 14px 28px -12px rgba(0,0,0,.5); }
.iti-bandeau b { display: block; font-size: 1.05rem; line-height: 1.25; }
.iti-bandeau small { opacity: .85; font-size: .95rem; }
.iti-fleche { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.8rem; background: rgba(255,255,255,.14); }
.iti-recentrer { position: absolute; z-index: 500; right: 12px; bottom: 96px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--mer); font-size: 1.4rem; box-shadow: 0 6px 16px rgba(0,0,0,.25); cursor: pointer; }
.iti-pin { display: grid; place-items: center; font-size: 18px; border-radius: 50%; }
.iti-pin-fin { background: #fff; box-shadow: 0 0 0 3px var(--bougain), 0 6px 14px rgba(0,0,0,.3); }
.iti-pin-moi { background: #2B7BFF; border: 4px solid #fff; box-shadow: 0 0 0 8px rgba(43,123,255,.22), 0 3px 8px rgba(0,0,0,.3); width: 22px !important; height: 22px !important; margin-left: -11px !important; margin-top: -11px !important; }
.iti-panneau { padding: 14px 0 0; }
.iti-modes { display: flex; gap: 8px; margin-bottom: 8px; }
.iti-resume { font-size: 1.15rem; margin: 6px 0 2px; }
.iti-resume b { font-family: var(--display, inherit); font-size: 1.6rem; color: var(--bougain); }
.iti-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.iti-actions .btn { flex: 1; }
.iti-etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.iti-etape { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--carte, #fff); border: 1px solid var(--trait); }
.iti-etape .iti-f { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--lagon) 14%, transparent); color: var(--mer); font-weight: 700; }
.iti-etape small { color: var(--encre-2); white-space: nowrap; }
.iti-etape-bus { border-color: var(--mer); }
.iti-etape.faite { opacity: .45; }
.iti-etape.en-cours { border: 2px solid var(--bougain); }
.iti-pied { margin-top: 14px; }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 10px; }

.testeur-message { width: 100%; font: inherit; font-size: .95rem; padding: 12px; border-radius: 14px; border: 1px solid var(--trait); background: var(--fond); margin: 6px 0 10px; resize: vertical; }
.testeur-lien { word-break: break-all; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--lagon) 10%, var(--fond)); margin: 8px 0; }
.liste-docs li > div > small + small { word-break: break-all; }

/* ===== Devenir partenaire ===== */
.dp { max-width: 860px; margin: 0 auto; }
.dp-langues { display: flex; gap: 6px; justify-content: flex-end; margin: 4px 0 14px; flex-wrap: wrap; }
.dp-hero { padding: 26px 22px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, #F4845F 0%, #D6336C 55%, #6A2C70 100%); margin-bottom: 18px; }
.dp-hero .surtitre { color: #FFE9B8; }
.dp-hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.08; margin: 6px 0 10px; }
.dp-chapo { font-size: 1.05rem; line-height: 1.5; opacity: .95; max-width: 640px; }
.dp-section { margin: 18px 0; }
.dp-section h2 { margin-bottom: 10px; }
.dp-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.dp-atout { padding: 16px; border-radius: 18px; background: var(--carte, #fff); border: 1px solid var(--trait); }
.dp-ic { width: 42px; height: 42px; padding: 9px; border-radius: 13px; background: linear-gradient(135deg, #FCE3EC, #FFF0E6); fill: none; stroke: #D6336C; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
@media (prefers-color-scheme: dark) { .dp-ic { background: rgba(240, 98, 146, .14); stroke: #F06292; } }
.dp > .conseil-av { margin: 0 0 18px; }
.dp > .conseil-av .cav-bulle { flex: 1 1 auto; }
.dp > .conseil-av .cav-duo img { width: 42px; height: 42px; }
.dp > .conseil-av .cav-duo img + img { margin-left: -12px; }
.dp-etapes2 { list-style: none; padding: 0; counter-reset: dpe; gap: 10px; }
.dp-etapes2 li { counter-increment: dpe; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; }
.dp-etapes2 li::before { content: counter(dpe); width: 34px; height: 34px; border-radius: 50%; background: #0B4F63; color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--display, inherit); }
.dp-merci-av { justify-content: center; margin: 0 auto 10px; }
.dp-merci-av img { width: 72px; height: 72px; }
.dp-atout b { display: block; margin: 6px 0 4px; font-size: 1.02rem; }
.dp-atout p { color: var(--encre-2); font-size: .93rem; line-height: 1.45; margin: 0; }
.dp-etapes { padding-left: 22px; display: grid; gap: 6px; line-height: 1.45; }
.dp-form h2 { margin-top: 0; }
.dp-piege, .dp-piege[hidden] { display: none !important; }
.dp-fr { border: 0; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dp-fr legend { font-weight: 600; margin-bottom: 8px; width: 100%; }
.pilule-radio input { position: absolute; opacity: 0; }
.pilule-radio span { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--trait); cursor: pointer; }
.pilule-radio input:checked + span { background: var(--mer); border-color: var(--mer); color: #fff; }
.pilule-radio input:focus-visible + span { outline: 2px solid var(--bougain); outline-offset: 2px; }
.dp-merci { text-align: center; }
.dp-merci-ico { font-size: 3rem; margin: 0; }

/* ===== Avatars Bryan & Laurie : bulles de conseil ===== */
.conseil-av { display: flex; align-items: flex-end; gap: 10px; margin: 12px 0 16px; }
.cav-photo { flex: none; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #F9C77E, #F4845F); box-shadow: 0 0 0 3px var(--carte, #fff), 0 8px 16px -8px rgba(19,38,46,.5); }
.cav-duo { flex: none; display: flex; }
.cav-duo img { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #F9C77E, #F4845F); box-shadow: 0 0 0 3px var(--carte, #fff); }
.cav-duo img + img { margin-left: -14px; }
.cav-bulle { position: relative; margin: 0; padding: 11px 14px; border-radius: 18px 18px 18px 5px; background: #fff; color: #13262E; border: 1px solid rgba(19,38,46,.1); box-shadow: 0 10px 22px -14px rgba(19,38,46,.4); font-size: .95rem; line-height: 1.45; }
.cav-bulle::before { content: ""; position: absolute; left: -7px; bottom: 9px; width: 13px; height: 13px; background: #fff; border-left: 1px solid rgba(19,38,46,.1); border-bottom: 1px solid rgba(19,38,46,.1); transform: rotate(45deg); }
.cav-bulle small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #D6336C; margin-bottom: 3px; }
.carte-postale .cp-duo { align-self: flex-start; }
.carte-postale .cp-duo img { width: 54px; height: 54px; }

/* ===== Organisation en 5 rubriques (Accueil, Mon séjour, Sur place, Mes papiers, Messages) ===== */
.rubriques5 a { flex: 1 1 0; }
@media (min-width: 1000px) { .onglets-app.rubriques5::before { content: "Mon appli"; } }
/* sous-onglets de « Mon séjour » */
.sous-onglets { display: flex; gap: 4px; padding: 4px; margin: 0 0 18px; background: var(--carte); border: 1px solid var(--trait); border-radius: 999px; }
.sous-onglets a { flex: 1; text-align: center; padding: 9px 10px; border-radius: 999px; text-decoration: none; color: var(--encre-2); font-weight: 600; font-size: .92rem; }
.sous-onglets a.on { background: linear-gradient(135deg, var(--lagon), var(--bougain)); color: #fff; }
/* retour vers la rubrique */
.retour-rubrique { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); color: var(--encre); font-weight: 600; font-size: .9rem; text-decoration: none; }
/* accueil : une seule chose à faire */
.a-faire { display: grid; gap: 3px; margin: 0 0 18px; padding: 18px 20px; border-radius: 22px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #F4845F, #D6336C); box-shadow: 0 16px 30px -18px rgba(214, 51, 108, .7); }
.a-faire small { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.a-faire b { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.a-faire span { font-size: .95rem; opacity: .95; }
.a-faire i { justify-self: start; margin-top: 8px; padding: 7px 16px; border-radius: 999px; background: #fff; color: #D6336C; font-style: normal; font-weight: 700; font-size: .9rem; }
.a-faire.urgent { background: linear-gradient(135deg, #E8590C, #C2255C); }
.raccourcis.rapides4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 22px; }
/* pages-carrefour Sur place / Mes papiers */
.hub { display: grid; gap: 8px; }
.hub > h2 { margin: 0 0 6px; }
.hub > .surtitre { margin: 0; }
.hub-titre { margin: 14px 2px 2px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bougain); }
.hub-ligne { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--carte); border: 1px solid var(--trait); text-decoration: none; color: var(--encre); transition: transform .15s ease; }
.hub-ligne:hover { transform: translateX(3px); }
.hub-ligne > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.hub-ligne b { font-size: 1.02rem; }
.hub-ligne small { color: var(--encre-2); font-size: .86rem; }
.hub-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; }
.hub-ico svg { width: 24px; height: 24px; }
.hub-ligne .fl { flex: none; color: var(--encre-2); font-size: 1.4rem; }
.hub-ligne .bulle-n { flex: none; font-style: normal; }
.hub-ligne.verrouille { opacity: .7; }
.sp-cadenas { flex: none; font-style: normal; font-size: .78rem; color: var(--encre-2); white-space: nowrap; }
.hub .rech-barre { margin: 4px 0 4px; }
/* menu du compte (rond en haut à droite) */
.menu-compte { position: relative; }
.menu-compte > summary { list-style: none; cursor: pointer; }
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte-liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; padding: 8px; border-radius: 18px; background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); display: grid; gap: 2px; }
.menu-compte-liste a, .menu-compte-liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 0; background: none; color: var(--encre); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.menu-compte-liste a:hover, .menu-compte-liste button:hover { background: color-mix(in srgb, var(--encre) 7%, transparent); }
.menu-compte-liste svg { width: 20px; height: 20px; flex: none; }
.menu-compte-liste form { margin: 0; border-top: 1px solid var(--trait); padding-top: 4px; margin-top: 4px; }
/* détail de la formule replié */
.tampons-pli { margin-top: 12px; }
.tampons-pli > summary { cursor: pointer; font-weight: 600; color: var(--mer); padding: 6px 0; }
.tampons-pli[open] > summary { margin-bottom: 8px; }
.hub-ico.r-mer { background: linear-gradient(140deg, #2FA7B5, #0B4F63); }
.hub-ico.r-lagon { background: linear-gradient(140deg, #4CC3CF, #1F8C9A); }
.hub-ico.r-coucher { background: linear-gradient(140deg, #F9A15A, #D6336C); }
.hub-ico.r-bougain { background: linear-gradient(140deg, #F06292, #B0306B); }
.hub-ico.r-sable { background: linear-gradient(140deg, #E8B96A, #C2852A); }
.hub-ico.r-nuit { background: linear-gradient(140deg, #3B3F7A, #1A1F3D); }

/* ===== Accueil par moments : une tâche, un gros bouton, un conseil signé ===== */
.a-faire.ton-calme { background: linear-gradient(135deg, #1F8C9A, #2BB3C0); box-shadow: 0 16px 30px -18px rgba(43, 179, 192, .7); }
.a-faire.ton-calme i { color: #1F8C9A; }
.a-faire.ton-urgent { background: linear-gradient(135deg, #E8590C, #C2255C); }
.gros-bouton { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 16px 18px; border-radius: 22px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #F9A15A, #D6336C); box-shadow: 0 16px 30px -18px rgba(214, 51, 108, .8); transition: transform .15s ease; }
.gros-bouton:active { transform: scale(.985); }
.gros-bouton svg { width: 34px; height: 34px; flex: none; }
.gros-bouton b { display: block; font-family: var(--display); font-size: 1.25rem; line-height: 1.15; }
.gros-bouton small { display: block; font-size: .88rem; opacity: .95; margin-top: 2px; }
.gros-bouton.nuit { background: linear-gradient(135deg, #3B3F7A, #D6336C); }
.prix-habituel { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--sable, #E8B464) 18%, var(--carte)); border: 1px solid color-mix(in srgb, var(--sable, #E8B464) 40%, transparent); font-size: .92rem; color: var(--encre); }
.prix-habituel.discret { background: none; border: 1px dashed var(--trait); color: var(--encre-2); font-size: .86rem; }
.prix-reperes { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); }
.prix-reperes summary { cursor: pointer; font-size: .92rem; }
.prix-reperes ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.prix-reperes li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; font-size: .92rem; padding: 6px 0; border-top: 1px solid var(--trait); }
.prix-reperes li small { grid-column: 1 / -1; color: var(--encre-2); font-size: .78rem; }
.aujourdhui.auj-nuit { background: linear-gradient(160deg, #1b1f3d, #0f1e25); }
.auj-liste .y-aller { margin-left: auto; align-self: center; flex: none; }
.cp-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #F9C77E, #F4845F); box-shadow: 0 0 0 3px #fff; }
/* check-list de sortie */
.sortie { margin: 0 0 18px; padding: 16px 18px; border-radius: 22px; background: var(--carte); border: 1px solid var(--trait); }
.sortie h2 { margin: 0 0 4px; }
.sortie .surtitre { margin: 0; }
.sortie-liste { display: grid; gap: 8px; margin-top: 12px; }
.sortie-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--fond); border: 1px solid var(--trait); cursor: pointer; font-size: .95rem; }
.sortie-ligne input { width: 22px; height: 22px; accent-color: #3DBB7A; flex: none; }
.sortie-ligne.fait { opacity: .6; text-decoration: line-through; }
/* avis */
.avis-carte { margin: 18px 0 0; padding: 18px; border-radius: 22px; background: var(--carte); border: 1px solid var(--trait); display: grid; gap: 10px; }
.avis-carte h2, .avis-carte .surtitre { margin: 0; }
.avis-carte .etoiles { display: flex; gap: 6px; flex-direction: row-reverse; justify-content: flex-end; }
.avis-carte .etoiles label { cursor: pointer; font-size: 2rem; color: var(--trait); position: relative; }
.avis-carte .etoiles label input { position: absolute; opacity: 0; inset: 0; }
.avis-carte .etoiles label i { position: absolute; left: -9999px; }
.avis-carte .etoiles label:hover, .avis-carte .etoiles label:hover ~ label, .avis-carte .etoiles label:has(input:checked), .avis-carte .etoiles label:has(input:checked) ~ label { color: #F9C77E; }
.avis-carte textarea { width: 100%; border-radius: 12px; border: 1px solid var(--trait); background: var(--fond); color: var(--encre); padding: 10px 12px; font: inherit; resize: vertical; }
.avis-carte .btn { justify-self: start; }
/* bouton et feuille SOS */
.sos-bouton { margin-right: 8px; padding: 0 14px; height: 36px; border: 0; border-radius: 999px; background: #E03131; color: #fff; font: inherit; font-weight: 800; letter-spacing: .08em; font-size: .78rem; cursor: pointer; box-shadow: 0 6px 16px -4px rgba(224, 49, 49, .6); }
.sos-bouton:hover { background: #C92A2A; }
.feuille-sos { position: fixed; inset: 0; z-index: 70; }
.sos-corps { display: grid; gap: 8px; }
.sos-corps h2 { margin: 0 0 4px; font-size: 1.25rem; }
.sos-ligne { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; background: var(--fond); border: 1px solid var(--trait); text-decoration: none; color: var(--encre); }
.sos-ligne b { display: block; font-size: .98rem; }
.sos-ligne small { color: var(--encre-2); font-size: .82rem; }
.sos-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; color: #fff; }
.s-rouge { background: #E03131; } .s-lagon { background: linear-gradient(140deg, #4CC3CF, #1F8C9A); } .s-sable { background: linear-gradient(140deg, #E8B96A, #C2852A); } .s-violet { background: linear-gradient(140deg, #7A5AF8, #4C3BAA); } .s-vert { background: linear-gradient(140deg, #3DBB7A, #1F7A4D); }
.sos-corps .btn { justify-self: center; margin-top: 4px; }
@media (min-width: 761px) { .sos-corps { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(460px, 92vw); border-radius: 28px; animation: none; } }
.barre-droite { display: flex; align-items: center; }
.mots-moments { margin: 12px 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--trait); background: var(--fond); }
.mots-moments summary { cursor: pointer; font-weight: 600; } .mots-moments summary small { font-weight: 400; color: var(--encre-2); }
.mm-ligne { display: grid; gap: 4px; margin-top: 12px; } .mm-ligne label { font-size: .9rem; font-weight: 600; }
.mm-champs { display: grid; grid-template-columns: 150px 1fr; gap: 8px; } .mm-champs textarea { font-size: .9rem; }
@media (max-width: 600px) { .mm-champs { grid-template-columns: 1fr; } }
.form-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* carnet de cautions */
.caution-total { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #3B3F7A, #1A1F3D); color: #fff; }
.caution-total b { font-family: var(--display); font-size: 1.8rem; } .caution-total span { opacity: .9; font-size: .9rem; }
.caution-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.caution-liste li { display: grid; grid-template-columns: 46px 1fr auto; gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); }
.caution-liste li.rendue { opacity: .65; }
.caution-texte { display: grid; min-width: 0; } .caution-texte small { color: var(--encre-2); font-size: .82rem; } .caution-texte small.ok { color: #3DBB7A; font-weight: 600; }
.caution-montant { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.caution-actions { grid-column: 2 / -1; display: flex; gap: 6px; } .caution-actions form { margin: 0; }
.caution-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--carte); border: 1px dashed var(--trait); margin-bottom: 8px; }
.caution-suggestion > span { display: grid; flex: 1; min-width: 160px; } .caution-suggestion small { color: var(--encre-2); font-size: .82rem; }
.caution-montant-saisie { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; } .caution-montant-saisie input { width: 70px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--trait); background: var(--fond); color: var(--encre); }
.caution-ajout { margin-top: 10px; padding: 10px 14px; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); } .caution-ajout summary { cursor: pointer; }
.caution-ajout .form { margin-top: 10px; }
.souvenir-img { display: block; width: 100%; max-width: 420px; height: auto; margin: 6px auto 12px; border-radius: 22px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.souvenir-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.souvenir-lien { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(135deg, #F9A15A, #D6336C); color: #fff; text-decoration: none; }
.souvenir-lien svg { width: 30px; height: 30px; flex: none; } .souvenir-lien b { display: block; font-family: var(--display); font-size: 1.1rem; } .souvenir-lien small { opacity: .95; }
.caution-liste.compacte li { grid-template-columns: 1fr auto; padding: 8px 12px; }
@media (max-width: 480px) { .carte-postale .manuscrit { font-size: 1.08rem; line-height: 1.45; } }
/* ===== Propositions : liste compacte, une ligne par proposition, détail au toucher ===== */
.props-bilan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.props-bilan > div { padding: 10px 6px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); text-align: center; display: grid; }
.props-bilan b { font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--bougain); } .props-bilan .ok b { color: var(--ok, #2F9E62); } .props-bilan .gris b { color: var(--encre-2); }
.props-bilan span { font-size: .72rem; color: var(--encre-2); margin-top: 2px; }
.props-bilan .aide { grid-column: 1 / -1; margin: 2px 2px 0; font-size: .85rem; }
.props-cat { display: flex; align-items: center; gap: 6px; color: var(--c); margin: 14px 2px 6px; } .props-cat svg { width: 16px; height: 16px; } .props-cat small { font-weight: 600; color: var(--encre-2); margin-left: 2px; }
.props-liste { display: grid; gap: 8px; }
.propc { border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); border-left: 5px solid var(--c); overflow: hidden; }
.propc.coup-de-coeur { border-color: color-mix(in srgb, #D6336C 35%, var(--trait)); border-left-color: var(--c); }
.propc.choix-non { opacity: .55; }
.propc > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; cursor: pointer; }
.propc > summary::-webkit-details-marker { display: none; }
.propc-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); } .propc-ico svg { width: 19px; height: 19px; }
.propc-texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.propc-texte b { font-size: .98rem; line-height: 1.25; }
.propc-texte small { font-size: .8rem; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.propc-coeur { font-style: normal; color: #D6336C; font-weight: 700; }
.propc-droite { flex: none; display: grid; justify-items: end; gap: 3px; }
.propc-prix { font-family: var(--display); font-weight: 800; font-size: .92rem; color: #13262E; background: #FFE9B8; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.propc-etat { font-size: .72rem; font-weight: 700; } .propc-etat.ok { color: var(--ok, #2F9E62); } .propc-etat.coeur { color: #D6336C; font-size: .95rem; } .propc-etat.non { color: var(--encre-2); }
.propc-fleche { position: absolute; right: 0; opacity: 0; }
.propc-corps { display: grid; gap: 10px; padding: 2px 14px 14px; }
.propc[open] > summary { background: color-mix(in srgb, var(--c) 8%, transparent); }
.propc[open] .propc-texte small { white-space: normal; display: none; }
.propc .postit { transform: none; border-radius: 10px; }
@media (min-width: 760px) { .props-liste { grid-template-columns: 1fr 1fr; } .propc[open] { grid-column: 1 / -1; } }
.propc-prix { white-space: normal; max-width: 112px; text-align: center; line-height: 1.15; font-size: .85rem; }
.propc-droite { max-width: 40%; }
/* ===== Chat plein écran sur téléphone : le fil prend toute la hauteur, la saisie reste au-dessus de la barre ===== */
.chat-tete .cav-duo img { width: 44px; height: 44px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.chat-tete .cav-duo img + img { margin-left: -12px; }
.chat .fil { max-height: 62vh; }
.chat-rappel { font-size: .78rem; margin-top: 8px; }
@media (max-width: 760px) {
  body.page-chat .page { padding-top: 10px; padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  body.page-chat .sejour-bandeau, body.page-chat .pied-espace { display: none; }
  body.page-chat .chat { display: flex; flex-direction: column; height: calc(100svh - 230px - env(safe-area-inset-bottom, 0px)); min-height: 300px; border-radius: 22px; }
  body.page-chat .chat .fil { flex: 1; min-height: 0; max-height: none; }
  body.page-chat .chat-tete { padding: 10px 14px; }
  body.page-chat .chat-rappel { margin: 6px 0 0; }
}
@media (min-width: 1000px) { .chat .fil { max-height: calc(100vh - 360px); min-height: 360px; } }

/* ===== Taxi : une seule course, trois étapes ===== */
.taxi2 { gap: 10px; }
.taxi2 > h1 { margin: 0 0 2px; }
.taxi2 > .surtitre { margin: 0; }
.taxi-onglets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; position: sticky; top: 66px; z-index: 5; padding: 4px 0; background: var(--fond); }
.taxi-onglets button { display: grid; justify-items: center; gap: 2px; padding: 9px 4px; border-radius: 16px; border: 1px solid var(--trait); background: var(--carte); color: var(--encre-2); font: inherit; font-weight: 600; font-size: .8rem; cursor: pointer; }
.taxi-onglets button span { font-size: 1.3rem; }
.taxi-onglets button.on { color: var(--encre); border-color: var(--bougain); box-shadow: inset 0 0 0 1px var(--bougain); background: color-mix(in srgb, var(--bougain) 10%, var(--carte)); }
.taxi-panneau { display: grid; gap: 10px; }
.course-carte { display: grid; gap: 8px; padding: 14px; border-radius: 22px; background: var(--carte); border: 1px solid var(--trait); }
.course-lbl { margin: 4px 2px 0; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--lagon); }
.course-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.course-chips .pilule { cursor: pointer; }
.course-chips .pilule.on { background: linear-gradient(135deg, var(--lagon), var(--bougain)); color: #fff; border-color: transparent; font-weight: 700; }
.course-autre { display: flex; gap: 8px; } .course-autre input { flex: 1; min-width: 0; }
.course-trajet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .95rem; }
.course-trajet select { width: auto; padding: 6px 10px; border-radius: 12px; font: inherit; font-size: .9rem; }
.course-trajet i { font-style: normal; color: var(--encre-2); }
.course-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.course-quand { flex: 1; min-width: 190px; }
.course-nb { display: inline-flex; align-items: center; gap: 4px; font-size: 1rem; } .course-nb input { width: 56px; padding: 6px 8px; border-radius: 10px; text-align: center; }
.course-options summary { cursor: pointer; font-size: .86rem; color: var(--encre-2); } .course-options[open] summary { margin-bottom: 4px; }
.course-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px; border-radius: 16px; background: #FFE9B8; color: #13262E; }
.course-prix b { font-family: var(--display); font-size: 1.6rem; white-space: nowrap; }
.course-prix small { font-size: .82rem; color: #5a4a20; }
.course-note { margin: 0 2px; font-size: .82rem; color: var(--encre-2); }
.taxi-commandes { display: grid; gap: 8px; }
.tcmd { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 20px; text-decoration: none; color: #fff; }
.tcmd b { display: block; font-size: 1.02rem; } .tcmd small { display: block; font-size: .8rem; opacity: .92; }
.tcmd-ico { font-size: 1.5rem; width: 30px; text-align: center; flex: none; }
.tcmd em { margin-left: auto; font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: rgba(255, 255, 255, .25); }
.tcmd-wa { background: linear-gradient(135deg, #25D366, #128C7E); box-shadow: 0 12px 24px -14px rgba(37, 211, 102, .9); }
.tcmd-appel { background: linear-gradient(135deg, #F9A15A, #D6336C); }
.tcmd-app { background: var(--carte); border: 1px solid var(--trait); color: var(--encre); } .tcmd-app small { color: var(--encre-2); opacity: 1; }
.course-message summary { cursor: pointer; font-size: .86rem; color: var(--encre-2); }
.course-message .taxi-es { font-size: 1rem; margin: 8px 0 2px; }
.taxi-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.taxi-duo input { min-width: 0; }
details.savoir, a.savoir { display: block; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); }
details.savoir > summary, a.savoir { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; text-decoration: none; color: var(--encre); }
details.savoir > summary::-webkit-details-marker { display: none; }
details.savoir > summary > span:first-child, a.savoir > span:first-child { font-size: 1.3rem; flex: none; }
details.savoir > summary > span:nth-child(2), a.savoir > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
details.savoir small, a.savoir small { color: var(--encre-2); font-size: .82rem; }
details.savoir > summary::after { content: "›"; margin-left: auto; color: var(--encre-2); font-size: 1.4rem; transition: transform .2s; }
details.savoir[open] > summary::after { transform: rotate(90deg); }
details.savoir > :not(summary) { margin: 0 14px 14px; }
a.savoir i { margin-left: auto; font-style: normal; color: var(--encre-2); font-size: 1.4rem; }
.prix-reperes-liste { list-style: none; padding: 0; display: grid; gap: 4px; }
.prix-reperes-liste li { display: grid; grid-template-columns: 1fr auto; padding: 6px 0; border-top: 1px solid var(--trait); font-size: .9rem; }
.prix-reperes-liste small { grid-column: 1 / -1; color: var(--encre-2); font-size: .78rem; }
@media (min-width: 1000px) { .taxi-onglets { top: 76px; } }
/* taxi : tout le formulaire de course tient au-dessus des boutons de commande */
.course-carte { gap: 7px; padding: 12px; }
.course-chips .pilule { padding: 6px 11px; font-size: .86rem; }
[data-choix-vers] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } [data-choix-vers]::-webkit-scrollbar { display: none; }
[data-choix-vers] .pilule { flex: none; }
.course-ligne { flex-wrap: nowrap; gap: 6px; }
.course-quand { min-width: 0; flex: 1; flex-wrap: nowrap; }
.course-nb { font-size: .9rem; gap: 2px; flex: none; } .course-nb input { width: 44px; padding: 5px 4px; }
.course-prix { padding: 8px 12px; } .course-prix b { font-size: 1.35rem; } .course-prix small { font-size: .78rem; }
.course-note { font-size: .78rem; }
.tcmd small, .tcmd b { color: inherit; }
.tcmd-wa small, .tcmd-appel small { color: #fff; }
.taxi-onglets button { padding: 7px 4px; } .taxi-onglets button span { font-size: 1.15rem; }

/* ===== Bus : une réponse en grand, la comparaison, le reste replié ===== */
.bus2 { display: grid; gap: 10px; }
.bus2 > h1 { margin: 0 0 2px; } .bus2 > .surtitre { margin: 0; }
.bus2 .course-chips .pilule { text-decoration: none; }
.bus2 .course-chips a.pilule.on { background: linear-gradient(135deg, var(--lagon), var(--bougain)); color: #fff; border-color: transparent; font-weight: 700; }
.bus-idees-lbl { color: var(--encre-2); }
.bus2 .course-trajet select { max-width: 60%; }
.bus-hero { display: grid; gap: 6px; padding: 14px 15px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #1F8C9A, #2BB3C0); box-shadow: 0 16px 30px -18px rgba(31, 140, 154, .9); }
.bh-tete { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bus-hero .tag { background: rgba(255, 255, 255, .22); color: #fff; border: 0; }
.bh-gros { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bh-gros b { font-family: var(--display); font-size: 2rem; line-height: 1; }
.bh-gros span { font-size: .95rem; opacity: .95; }
.bh-sous { margin: 0; font-size: .86rem; opacity: .95; }
.bh-actions { display: flex; gap: 8px; margin-top: 4px; }
.bh-go { flex: 1.4; border: 0; border-radius: 14px; padding: 12px; background: #fff; color: #1F8C9A; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; }
.bh-carte { flex: 1; display: grid; place-items: center; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .6); color: #fff; text-decoration: none; font-weight: 700; }
.bus-hero .bus-etapes { background: rgba(0, 0, 0, .14); border-radius: 14px; padding: 8px 10px; }
.bus-hero .bus-etapes summary { color: #fff; }
.bus-hero .bus-etapes .aide, .bus-hero .bus-etapes a { color: rgba(255, 255, 255, .9); }
.bus-comp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bus-comp > * { display: grid; justify-items: center; padding: 9px 6px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); text-decoration: none; color: var(--encre); }
.bus-comp b { font-size: 1.02rem; white-space: nowrap; } .bus-comp span { font-size: .76rem; color: var(--encre-2); }
.bus-comp .on { border-color: var(--lagon); box-shadow: inset 0 0 0 1px var(--lagon); }
.bus-autre { border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); }
.bus-autre > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.bus-autre > summary::-webkit-details-marker { display: none; }
.ba-d { margin-left: auto; text-align: right; display: grid; } .ba-d small { color: var(--encre-2); font-size: .76rem; }
.ba-corps { padding: 0 12px 12px; display: grid; gap: 8px; }
.bus-savoir-lbl { margin-top: 12px; }
.bus-ligne-c { padding: 10px 0; border-top: 1px solid var(--trait); list-style: none; }
details.savoir .bus-liste { padding: 0; margin: 0 14px 10px; }

/* ===== Discobus ===== */
.disco-carte { display: grid; gap: 3px; padding: 13px 14px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #3B1F5E, #D6336C); box-shadow: 0 14px 28px -18px rgba(214, 51, 108, .8); margin: 0 0 12px; }
.disco-carte p { margin: 0; font-size: .9rem; opacity: .96; }
.disco-sur { font-size: .7rem !important; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.disco-titre { font-family: var(--display); font-size: 1.15rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
.disco-carte .bus-puce { background: #fff; color: #D6336C; }
.disco-go { display: flex; gap: 8px; margin-top: 8px; }
.disco-go a { flex: 1; text-align: center; padding: 9px 8px; border-radius: 13px; font-weight: 800; font-size: .9rem; text-decoration: none; }
.disco-go .w { background: #fff; color: #D6336C; } .disco-go .c { border: 1.5px solid rgba(255, 255, 255, .6); color: #fff; }
.disco-mini { margin: 6px 0 0; padding: 7px 10px; border-radius: 10px; font-size: .84rem; background: color-mix(in srgb, #D6336C 12%, transparent); border: 1px solid color-mix(in srgb, #D6336C 35%, transparent); }
.disco-mini a { color: var(--bougain); font-weight: 700; }
.disco-choix { display: grid; gap: 8px; }
.disco-clubs { display: flex; flex-wrap: wrap; gap: 6px; }
.disco-clubs .pilule { cursor: pointer; }
.disco-clubs .pilule.on { background: linear-gradient(135deg, #3B1F5E, #D6336C); color: #fff; border-color: transparent; font-weight: 700; }
.disco-bloc .disco-carte { margin: 0; }

/* Logo « Ibiza by Laurie & Bryan » */
@font-face { font-family: "Chicle"; src: url("fonts/chicle.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Pacifico"; src: url("fonts/pacifico.woff2") format("woff2"); font-display: swap; }
.marque { gap: 7px; line-height: 1; }
.marque-embleme { width: auto; height: 46px; margin-block: -6px; flex: none; }
.marque-txt { display: flex; flex-direction: column; align-items: flex-start; }
.marque-ibz { font: 400 1.8rem/0.9 "Chicle", cursive; background: linear-gradient(90deg, #F4845F, #E9566A 45%, #D6336C 75%, #9B5DE5); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1.3px 1.3px 0 #2FA7B5); }
.marque-by { font: 400 .74rem/1.25 "Pacifico", cursive; font-style: normal; color: var(--encre); white-space: nowrap; }
.marque-by span { color: var(--bougain); }
@media (max-width: 420px) { .marque-embleme { height: 38px; } .marque-ibz { font-size: 1.5rem; } .marque-by { font-size: .66rem; } }