/* Fanal · page des voyageurs (assistant d'accueil).
   Charte du livret d'accueil : marine 17324D, océan 2B6A8E, ciel 6FA8C9, écume EAF2F7, sable F7F1E8,
   sable foncé E9D8BC, corail E07155, corail clair FBEAE5, soleil F0B34A, texte 26323D.
   Polices servies par Fanal (aucune ressource extérieure : CSP « default-src 'self' »). */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/lato-400.ttf?v=4.4.4") format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/lato-700.ttf?v=4.4.4") format("truetype");
}

/* ---------- jetons (thème clair) ---------- */
:root {
  color-scheme: light;
  --fond: #F7F1E8;
  --surface: #FFFFFF;
  --surface-douce: #EAF2F7;
  --texte: #26323D;
  --texte-doux: #536476;
  --titre: #17324D;
  --ligne: #D8E2EA;
  --bord-champ: #7D8C9B;
  --entete-fond: #17324D;
  --entete-texte: #FFFFFF;
  --entete-doux: #CFE0EC;
  --accent: #E07155;
  --primaire: #17324D;
  --primaire-survol: #0F2438;
  --primaire-texte: #FFFFFF;
  --lien: #2B6A8E;
  --lien-survol: #17324D;
  --puce-fond: #EAF2F7;
  --puce-bord: #2B6A8E;
  --puce-texte: #17324D;
  --source-texte: #2B6A8E;
  --bulle-voyageur: #17324D;
  --bulle-voyageur-texte: #FFFFFF;
  --transmis-fond: #FBEAE5;
  --transmis-texte: #8A3A26;
  --hote-fond: #FFF6F2;
  --hote-bord: #E07155;
  --hote-tete: #8A3A26;
  --urgence: #D7263D;
  --urgence-texte: #B01E32;
  --urgence-sur: #FFFFFF;
  --urgence-fond-doux: #FDECEE;
  --succes-fond: #E6F3EC;
  --succes-texte: #1E5B3A;
  --bandeau-fond: #F0B34A;
  --bandeau-texte: #17324D;
  --separateur-fond: rgb(23 50 77 / 0.07);
  /* navigation du séjour et agenda (3.9.0) */
  --nav-fond: rgb(255 255 255 / 0.9);
  --nav-actif-fond: #FBEAE5;
  --nav-actif: #C2553A;
  --heure-texte: #B8472D;
  --bon-bord: rgb(224 113 85 / 0.4);
  --nombre-fond: #C2553A;
  --nombre-texte: #FFFFFF;
  --whatsapp: #0F7D41;
  /* marée (3.5.4) : eau et courbe, pastilles des pleines (océan) et basses mers (sable), conseil (corail) */
  --maree-eau: #DCEAF3;
  --maree-courbe: #2B6A8E;
  --maree-pleine-fond: #DCEAF3;
  --maree-pleine-texte: #1F5F84;
  --maree-basse-fond: #F3E6D3;
  --maree-basse-texte: #8A5A1E;
  --maree-onglets: #E9E2D6;
  --maree-conseil-icone: #C2553A;
  /* météo heure par heure et état du logement (3.6.0) */
  --soleil: #D98A12;
  --pluie: #2B6A8E;
  --chauffe-fond: #FBE7D4;
  --chauffe-texte: #9A4A12;
  --voile: rgb(15 36 56 / 0.55);
  --eclat: rgb(240 179 74 / 0.6);
  --anneau: #2B6A8E;
  --anneau-defaut: #2B6A8E;
  --anneau-entete: #F0B34A;
  --ombre: 0 1px 2px rgb(23 50 77 / 0.06), 0 2px 10px rgb(23 50 77 / 0.05);
  --ombre-menu: 0 12px 32px rgb(15 36 56 / 0.22);
  --rayon: 16px;
  --colonne: 560px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- thème sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fond: #0E1A26;
    --surface: #172636;
    --surface-douce: #1D3245;
    --texte: #E6EDF3;
    --texte-doux: #A7B6C4;
    --titre: #F4EBDD;
    --ligne: #2A3F53;
    --bord-champ: #6E8396;
    --entete-fond: #132C44;
    --entete-texte: #FFFFFF;
    --entete-doux: #BFD5E5;
    --primaire: #8FC1DE;
    --primaire-survol: #A9D0E7;
    --primaire-texte: #0E1A26;
    --lien: #8FC1DE;
    --lien-survol: #BFDDF0;
    --puce-fond: #1D3245;
    --puce-bord: #6FA8C9;
    --puce-texte: #E6EDF3;
    --source-texte: #A9CFE6;
    --bulle-voyageur: #245A79;
    --bulle-voyageur-texte: #FFFFFF;
    --transmis-fond: #3B2621;
    --transmis-texte: #F5B7A5;
    --hote-fond: #2A211F;
    --hote-bord: #E07155;
    --hote-tete: #F5B7A5;
    --urgence: #C81F37;
    --urgence-texte: #FF8E9B;
    --urgence-sur: #FFFFFF;
    --urgence-fond-doux: #3A1A20;
    --succes-fond: #173A2A;
    --succes-texte: #A6E3C0;
    --bandeau-fond: #F0B34A;
    --bandeau-texte: #0E1A26;
    --separateur-fond: rgb(255 255 255 / 0.07);
    --nav-fond: rgb(23 38 54 / 0.9);
    --nav-actif-fond: rgb(224 113 85 / 0.22);
    --nav-actif: #F5B7A5;
    --heure-texte: #F5B7A5;
    --bon-bord: rgb(245 183 165 / 0.35);
    --nombre-fond: #F5B7A5;
    --nombre-texte: #0E1A26;
    --whatsapp: #5ED08C;
    --maree-eau: rgb(111 168 201 / 0.2);
    --maree-courbe: #8FC1DE;
    --maree-pleine-fond: #1D3245;
    --maree-pleine-texte: #A9CFE6;
    --maree-basse-fond: #3A2E1E;
    --maree-basse-texte: #F0C98A;
    --maree-onglets: #0A141E;
    --maree-conseil-icone: #F5B7A5;
    --soleil: #F0B34A;
    --pluie: #8FC1DE;
    --chauffe-fond: #3E2A17;
    --chauffe-texte: #F6C38E;
    --voile: rgb(0 0 0 / 0.6);
    --eclat: rgb(240 179 74 / 0.55);
    --anneau: #F0B34A;
    --anneau-defaut: #F0B34A;
    --ombre: 0 1px 2px rgb(0 0 0 / 0.25);
    --ombre-menu: 0 12px 32px rgb(0 0 0 / 0.5);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 100%;   /* la taille de police réglée dans le téléphone est respectée : tout est en rem (3.7.0) */
  background: var(--fond);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 1.0625rem;   /* 17 px pour 16 px réglés */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}
body[data-ecran="discussion"] { overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--lien); }
p, h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--anneau); outline-offset: 2px; }
.titre-ecran:focus { outline: none; }

.invisible {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone-petite { width: 16px; height: 16px; stroke-width: 2.2; }
.sans-script { padding: 24px; text-align: center; }

/* ---------- connexion perdue : sous l'en-tête de l'écran affiché (voyageurs.js le déplace) ---------- */
.reseau {
  position: fixed;
  z-index: 50;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bandeau-fond);
  color: var(--bandeau-texte);
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.2);
  animation: descente 0.25s ease-out both;
}
.entete .reseau { position: absolute; top: calc(100% + 10px); }
.reseau .icone { width: 18px; height: 18px; }
/* page de démonstration (4.4.4) : bandeau en tête, dans le flux (caché dans la discussion, plein écran) */
.demo-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: var(--bandeau-fond);
  color: var(--bandeau-texte);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
.demo-bandeau[hidden], body[data-ecran="discussion"] .demo-bandeau { display: none; }
.demo-retour { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- écrans ---------- */
.ecran {
  display: flex;
  flex-direction: column;
}
.ressort { flex-grow: 1; }

.ecran-chargement {
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
}
.chargement .points i { width: 10px; height: 10px; background: var(--lien); }

/* ---------- en-têtes ---------- */
.entete {
  position: relative;
  z-index: 10;
  background: var(--entete-fond);
  color: var(--entete-texte);
  --anneau: var(--anneau-entete);
}
.entete-int {
  width: 100%;
  max-width: calc(var(--colonne) + 48px);
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
.entete-grande .entete-int {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: calc(env(safe-area-inset-top) + 18px);
  padding-bottom: 8px;
}
.entete-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.entete-lieu {
  min-width: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--entete-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entete-maison {
  font-family: var(--serif);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.entete-accent {
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- décor marin des en-têtes : un phare au large et la mer qui vient sur le sable ----------
   Le faisceau tourne comme celui d'un phare vu de côté (il s'allonge vers la gauche, se raccourcit en venant vers
   nous, la lanterne brille : l'éclat, puis il repasse derrière la tour) ; la houle et la vague glissent en sens
   contraires, très lentement. Transform et opacity seulement (le compositeur s'en charge, rien n'est repeint) ;
   tout reste fixe si l'appareil demande moins d'animations. */
.entete-grande .entete-int, .entete-phare .entete-int { position: relative; z-index: 1; }
.ciel { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ciel-colonne {
  position: relative;
  height: 100%;
  max-width: calc(var(--colonne) + 48px);
  margin: 0 auto;
}
.phare {
  position: absolute;
  right: max(30px, calc(env(safe-area-inset-right) + 6px));
  bottom: 21px;
  width: 24px;
  height: 64px;
}
.tour { display: block; width: 100%; height: 100%; overflow: visible; }
.tour-fut { fill: #EAF2F7; }
.tour-bande, .tour-toit { fill: var(--accent); }
.tour-galerie { fill: #CFE0EC; }
.tour-lanterne { fill: #F0B34A; }
.faisceau {
  position: absolute;
  right: 12px;
  top: 16.5px;
  width: min(1180px, 96vw);
  height: 320px;
  margin-top: -160px;
  transform-origin: 100% 50%;
  background:
    conic-gradient(from 262deg at 100% 50%, transparent 4.5deg, rgb(255 222 160 / 0.13) 6.2deg, rgb(255 222 160 / 0.26) 9deg, rgb(255 222 160 / 0.13) 11.8deg, transparent 13.5deg),
    conic-gradient(from 262deg at 100% 50%, transparent -4deg, rgb(255 222 160 / 0.06) 9deg, transparent 22deg);
  -webkit-mask-image: linear-gradient(270deg, #000 6%, rgb(0 0 0 / 0.6) 50%, transparent 97%);
  mask-image: linear-gradient(270deg, #000 6%, rgb(0 0 0 / 0.6) 50%, transparent 97%);
  animation: faisceau 16s linear infinite;
}
.lanterne {
  position: absolute;
  left: 50%;
  top: 16.5px;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #FFF6E0, rgb(255 214 140 / 0.7) 30%, rgb(240 179 74 / 0.22) 60%, transparent);
  opacity: 0;
  animation: eclat-phare 16s ease-in-out infinite;
}
.mer { position: relative; height: 36px; margin-top: -2px; overflow: hidden; pointer-events: none; }
.mer-basse { height: 18px; margin-top: 0; }
.houle { position: absolute; left: 0; bottom: 0; display: block; width: 200%; height: 100%; }
.houle.loin { fill: #245B7C; animation: houle 150s linear infinite reverse; }
.houle.rive { animation: houle 110s linear infinite; }
.houle .eau { fill: var(--fond); }
.houle .ecume { stroke: rgb(255 255 255 / 0.9); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.houle .crete { stroke: #6FA8C9; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.8; }
.mer-basse .houle .ecume { stroke-width: 2; }
.mer-basse .houle .crete { opacity: 0.55; }
@media (prefers-color-scheme: dark) {
  .houle.loin { fill: #1E4A66; }
  .houle .ecume { stroke: rgb(207 224 236 / 0.75); }
}

/* drapeaux des langues (symboles d-fr, d-en, d-nl, d-de) : 3 × 2, coins arrondis, liseré pour le blanc */
.drapeau {
  display: block;
  flex: none;
  width: 24px;
  height: 16px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.14);
}
.drapeau svg { display: block; width: 100%; height: 100%; }

/* boutons de langue : un drapeau dans une pastille de 32 px, cible de 44 px */
.langues { display: flex; gap: 2px; flex: none; }
.langue {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 16px;
  background: none;
}
.langue::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6px 0;
  border: 1.5px solid transparent;
  border-radius: 16px;
  transition: background-color 0.15s, border-color 0.15s;
}
.langue .drapeau { width: 26px; height: 18px; opacity: 0.72; transition: opacity 0.15s, transform 0.15s; }
.langue[aria-pressed="true"] .drapeau { opacity: 1; }
.langue[aria-pressed="true"]::before { background: rgb(255 255 255 / 0.16); border-color: #FFFFFF; }
@media (hover: hover) { .langue:hover .drapeau { opacity: 1; transform: scale(1.06); } }

/* ---------- contenu des écrans d'accueil et d'urgence ---------- */
.contenu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  max-width: calc(var(--colonne) + 48px);
  margin: 0 auto;
  padding: 28px max(24px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  gap: 22px;
}
.bloc-titre { display: flex; flex-direction: column; gap: 8px; }
.titre-grand {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--titre);
}
.intro { font-size: 1rem; line-height: 1.5; }
.note {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-douce);
  color: var(--texte);
  font-size: 0.9375rem;
}

/* formulaires */
.formulaire { display: flex; flex-direction: column; gap: 10px; }
.formulaire label { font-size: 0.9375rem; font-weight: 700; color: var(--titre); }
.champ {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--bord-champ);
  border-radius: 12px;
  background: var(--surface);
  color: var(--texte);
  font-size: 1.0625rem;
}
.champ::placeholder { color: var(--texte-doux); opacity: 1; }
.champ:focus-visible { outline: 3px solid var(--anneau); outline-offset: 1px; border-color: var(--lien); }
.champ[aria-invalid="true"] { border-color: var(--urgence); }
.champ-long {
  height: auto;
  min-height: 96px;
  padding: 12px 16px;
  line-height: 1.45;
  resize: vertical;
}
.aide { font-size: 0.8125rem; color: var(--texte-doux); }
.erreur-champ {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--urgence-texte);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}
.erreur-champ .icone { width: 18px; height: 18px; margin-top: 1px; }

/* boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, transform 0.1s, opacity 0.15s;
}
.bouton:active:not(:disabled) { transform: scale(0.98); }
.bouton:disabled { opacity: 0.6; }
.formulaire .bouton { margin-top: 4px; }
.bouton-primaire { background: var(--primaire); color: var(--primaire-texte); }
.bouton-urgence { background: var(--urgence); color: var(--urgence-sur); }
.bouton-urgence-contour {
  min-height: 48px;
  border: 2px solid var(--urgence);
  background: var(--surface);
  color: var(--urgence-texte);
  font-size: 1rem;
}
.bouton-discret {
  min-height: 44px;
  background: transparent;
  color: var(--lien);
  font-size: 1rem;
}
@media (hover: hover) {
  .bouton-primaire:hover:not(:disabled) { background: var(--primaire-survol); }
  .bouton-urgence-contour:hover { background: var(--urgence-fond-doux); }
  .bouton-discret:hover { text-decoration: underline; }
  a:hover { color: var(--lien-survol); }
}

.carte {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.atouts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  list-style: none;
}
.atouts li { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; line-height: 1.35; }
.atouts .icone { width: 22px; height: 22px; color: var(--lien); }
.pied {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texte-doux);
  text-align: center;
}

/* ---------- écran d'information (fermé, QR code) ---------- */
#ecran-info { padding-top: 32px; gap: 20px; }
.carte-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 22px;
  border-radius: 18px;
}
.carte-info h1 {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--titre);
}
.info-textes { display: flex; flex-direction: column; gap: 12px; font-size: 1rem; line-height: 1.5; }
/* accès invité : hors séjour, le code donné par l'hôte ouvre la page */
.bouton-code {
  align-self: stretch;
  min-height: 48px;
  margin-top: 4px;
  border: 2px solid var(--primaire);
  background: var(--surface);
  color: var(--lien);
  font-size: 1rem;
}
@media (hover: hover) { .bouton-code:hover { background: var(--surface-douce); } }
.pastille {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-douce);
  color: var(--lien);
}
.pastille .icone { width: 26px; height: 26px; }
.sous-titre { font-size: 1rem; font-weight: 700; color: var(--titre); }
.urgence-compacte { display: flex; flex-direction: column; gap: 10px; }

/* ---------- numéros d'urgence ---------- */
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.numero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 80px;
  padding: 12px 14px;
  border: 2px solid var(--urgence);
  border-radius: 14px;
  background: var(--surface);
  color: var(--titre);
  text-decoration: none;
  transition: transform 0.1s;
}
.numero:active { transform: scale(0.98); }
.numero-chiffre { font-size: 1.875rem; font-weight: 700; line-height: 1.15; color: var(--urgence-texte); }
.numero-libelle { font-size: 0.875rem; line-height: 1.3; color: var(--texte); }
.numero-principal { background: var(--urgence); }
.numero-principal .numero-chiffre, .numero-principal .numero-libelle { color: var(--urgence-sur); }
.numeros-compacts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.numeros-compacts .numero {
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 60px;
  padding: 6px 4px;
  border-radius: 12px;
  text-align: center;
}
.numeros-compacts .numero-chiffre { font-size: 1.25rem; }
.numeros-compacts .numero-libelle { font-size: 0.8125rem; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }   /* « Rettungsdienst » sur 4 colonnes */

/* ---------- discussion ---------- */
.ecran-discussion {
  height: 100vh;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .ecran-discussion { height: var(--hauteur-app, 100dvh); }
}
.entete-discussion { flex: none; }
.entete-discussion .entete-int {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "maison actions" "salut actions" "dates dates" "infos infos" "etat etat";
  column-gap: 12px;
  max-width: calc(var(--colonne) + 40px);   /* même colonne de 560 px que le fil */
  padding-top: calc(env(safe-area-inset-top) + 14px);
  padding-bottom: 8px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.entete-lieu-discussion { grid-area: maison; align-self: end; font-size: 0.8125rem; }
.salut {
  grid-area: salut;
  align-self: start;
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.dates { grid-area: dates; margin-top: 6px; font-size: 0.875rem; color: var(--entete-doux); }
.actions-entete { grid-area: actions; display: flex; align-items: flex-start; gap: 8px; }
/* le phare de l'accueil reste dans l'en-tête du séjour : dates et météo s'arrêtent avant lui, et l'en-tête garde
   assez de hauteur (même sans météo) pour que la lanterne passe sous les boutons */
.entete-phare .entete-int { min-height: calc(env(safe-area-inset-top) + 118px); align-content: start; }
.entete-phare .dates { padding-right: 48px; }
/* météo et marée (3.6.0) : deux tuiles côte à côte, de même taille, qui s'arrêtent avant le phare (une seule prend
   toute la largeur) ; sur un téléphone très étroit, l'une passe sous l'autre. Chacune ouvre son détail au toucher. */
.infos-entete {
  grid-area: infos;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 48px 0 0;
}
.tuile-entete {
  position: relative;
  flex: 1 1 128px;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icone valeur" "texte texte";
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  min-height: 62px;
  padding: 8px 12px;
  border: 0;
  border-radius: 18px;
  font: inherit;
  color: var(--entete-texte);
  text-align: left;
  cursor: pointer;
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  -webkit-tap-highlight-color: transparent;
}
.tuile-entete::after {   /* chevron : le détail s'ouvre au toucher */
  content: "";
  position: absolute;
  right: 13px;
  bottom: 15px;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--entete-doux);
  border-bottom: 2px solid var(--entete-doux);
  transform: rotate(-45deg);
}
.tuile-entete:hover { background: rgb(255 255 255 / 0.14); }
.tuile-icone { grid-area: icone; flex: none; }
.tuile-valeur {
  grid-area: valeur;
  min-width: 0;
  font-family: var(--serif);
  font-size: clamp(18px, 5.2vw, 21px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tuile-texte {
  grid-area: texte;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding-right: 12px;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--entete-doux);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tuile-texte .fleche-maree { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.meteo-icone { width: 26px; height: 26px; stroke-width: 1.8; color: #CFE0EC; }
.meteo.ciel-soleil .meteo-icone, .meteo.ciel-eclaircie .meteo-icone { color: #F0B34A; }
.meteo.ciel-lune .meteo-icone, .meteo.ciel-nuit-nuage .meteo-icone { color: #F3E3A3; }
.maree-mini { width: 36px; height: 21px; overflow: visible; }
.maree-mini .courbe { fill: none; stroke: #8FC3E0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.maree-mini .eau { fill: rgb(143 195 224 / 0.22); }
.maree-mini .point { fill: #F0B34A; stroke: var(--entete-fond); stroke-width: 2; }
/* Une troisième tuile, sur la même ligne que la météo et la marée (3.9.1). Sans estimation, mise en page d'origine. */
.infos-entete.avec-mer .tuile-entete { flex: 1 1 0; min-height: 66px; padding: 9px 8px; column-gap: 5px; }
.infos-entete.avec-mer .tuile-icone { width: 22px; height: 22px; }
.infos-entete.avec-mer .tuile-valeur { font-size: 1.125rem; }
.infos-entete.avec-mer .tuile-texte { font-size: 0.8125rem; padding-right: 9px; }
.infos-entete.avec-mer .tuile-entete::after { width: 4px; height: 4px; right: 9px; bottom: 13px; border-width: 1.5px; }
.mer-icone { color: #8FC3E0; }
@media (max-width: 359px) {
  .infos-entete.avec-mer .mer-temperature { flex-basis: 100%; }
}
/* état du logement (3.6.0) : une ligne sous la météo et la marée, couleur selon ce qu'elle dit */
.maison {
  grid-area: etat;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin: 8px 48px 0 0;
  padding: 7px 12px 7px 8px;
  border: 0;
  border-radius: 18px;
  font: inherit;
  color: var(--entete-texte);
  text-align: left;
  cursor: pointer;
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  -webkit-tap-highlight-color: transparent;
}
.maison:hover { background: rgb(255 255 255 / 0.14); }
.maison-pastille {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  color: #CFE0EC;
  background: rgb(255 255 255 / 0.12);
}
.maison-pastille .icone { width: 20px; height: 20px; }
.maison.etat-ok .maison-pastille { color: #A6E3C0; background: rgb(111 201 150 / 0.2); }
.maison.etat-info .maison-pastille { color: #8FC3E0; background: rgb(143 195 224 / 0.2); }
.maison.etat-attention .maison-pastille { color: #F0B34A; background: rgb(240 179 74 / 0.22); }
.maison-textes { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.maison-titre { font-size: 0.8125rem; color: var(--entete-doux); }
.maison-resume {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 700;
}
.maison-chevron { width: 16px; height: 16px; flex: none; color: var(--entete-doux); transform: rotate(-90deg); }
.rond-urgence {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--urgence);
  color: var(--urgence-sur);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.12);
}
.rond-urgence .icone { stroke-width: 2.2; }

/* menu langue + quitter */
.menu { position: relative; }
.menu-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 60px;
  height: 44px;
  padding: 0 10px 0 13px;
  border: 1px solid var(--entete-doux);
  border-radius: 22px;
  color: var(--entete-texte);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.menu-bouton::-webkit-details-marker { display: none; }
.menu[open] .menu-bouton { background: rgb(255 255 255 / 0.12); }
.menu[open] .menu-bouton .icone { transform: rotate(180deg); }
.menu-bouton .icone { transition: transform 0.15s; }
.menu-liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 232px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--ligne);
  border-radius: 14px;
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--ombre-menu);
  --anneau: var(--anneau-defaut);
  animation: apparition 0.15s ease-out both;
}
.menu-titre {
  padding: 6px 12px 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.menu-choix {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--texte);
  font-size: 1rem;
  text-align: left;
}
.menu-choix[aria-pressed="true"] { background: var(--surface-douce); font-weight: 700; color: var(--titre); }
.menu-choix[aria-pressed="true"]::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--accent);
}
@media (hover: hover) { .menu-choix:hover { background: var(--surface-douce); } }
.menu-separation { height: 1px; margin: 6px 4px; background: var(--ligne); }
.menu-quitter { color: var(--texte); }
.menu-quitter .icone { color: var(--texte-doux); }
.menu-quitter-textes { display: flex; flex-direction: column; line-height: 1.3; }
.menu-quitter-textes small { font-size: 0.8125rem; color: var(--texte-doux); }

/* fil de la discussion */
.fil {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.fil-colonne {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: calc(var(--colonne) + 32px);
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
}
.messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.message { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.messages .message { animation: apparition 0.22s ease-out both; }
.message-voyageur { align-items: flex-end; }
.message-assistant, .message-hote { align-items: flex-start; }
.bulle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(86%, 470px);
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bulle-assistant {
  border-top-left-radius: 4px;
  background: var(--surface);
  box-shadow: var(--ombre);
}
.bulle-voyageur {
  border-top-right-radius: 4px;
  background: var(--bulle-voyageur);
  color: var(--bulle-voyageur-texte);
  white-space: pre-wrap;
}
.bulle-hote {
  border: 1.5px solid var(--hote-bord);
  border-top-left-radius: 4px;
  background: var(--hote-fond);
}
.bulle-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--hote-tete);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bulle-tete .icone { width: 16px; height: 16px; }
.bulle-heure { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; }
.bulle-texte { display: flex; flex-direction: column; gap: 8px; }
.bulle ul, .bulle ol { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; }
.bulle ul, .consigne-texte ul, .confirmation-texte ul { list-style: disc; }      /* listes dans la liste des messages */
.bulle ol, .consigne-texte ol, .confirmation-texte ol { list-style: decimal; }
.bulle a { color: var(--lien); text-decoration: underline; text-underline-offset: 2px; }
.bulle a.tel { white-space: nowrap; }
.bulle-voyageur a { color: inherit; }
.bulle strong { font-weight: 700; }
.message-hote.nouveau .bulle { animation: eclat 4s ease-out both; }

.sources { display: flex; flex-wrap: wrap; gap: 6px; }
.source, .etiquette {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.source { background: var(--puce-fond); color: var(--source-texte); }
.etiquette { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.etiquette .icone { width: 14px; height: 14px; stroke-width: 2.2; }
.etiquette-transmis { background: var(--transmis-fond); color: var(--transmis-texte); }
.etiquette-alerte { background: var(--urgence-fond-doux); color: var(--urgence-texte); }
.traduit { font-size: 0.8125rem; color: var(--texte-doux); }
.lien-bouton {
  min-height: 44px;
  margin: -12px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lien);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.original {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 0 12px;
  border-left: 3px solid var(--ligne);
  color: var(--texte-doux);
  font-size: 0.875rem;
}

.separateur { display: flex; justify-content: center; padding: 4px 0; }
.separateur span {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--separateur-fond);
  color: var(--texte-doux);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* question en cours d'envoi, non envoyée */
.provisoire .bulle-voyageur { opacity: 0.75; }
.etat-envoi { font-size: 0.8125rem; color: var(--texte-doux); }
.non-envoye .bulle-voyageur { opacity: 1; box-shadow: 0 0 0 2px var(--urgence); }
.non-envoye .etat-envoi { color: var(--urgence-texte); font-weight: 700; }
.message-erreur { align-items: stretch; }
.erreur-envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  background: var(--urgence-fond-doux);
  color: var(--urgence-texte);
  font-size: 0.875rem;
  font-weight: 700;
}
.erreur-envoi p { flex: 1 1 200px; }
.bouton-petit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid currentColor;
  border-radius: 22px;
  background: var(--surface);
  color: var(--urgence-texte);
  font-size: 0.875rem;
  font-weight: 700;
}
.bouton-petit .icone { width: 16px; height: 16px; }

/* l'assistant écrit */
.bulle-ecrit { flex-direction: row; align-items: center; gap: 10px; min-height: 46px; }
.ecrit-texte { font-size: 0.875rem; color: var(--texte-doux); }
.points { display: inline-flex; align-items: center; gap: 5px; padding: 0 2px; }
.points i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--texte-doux);
  animation: rebond 1.2s ease-in-out infinite;
}
.points i:nth-child(2) { animation-delay: 0.15s; }
.points i:nth-child(3) { animation-delay: 0.3s; }

/* suggestions : pastille de 36 px, cible de 44 px */
.suggestions { display: flex; flex-wrap: wrap; gap: 0 8px; margin: -4px 0; }
.suggestion {
  position: relative;
  z-index: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--puce-texte);
  font-size: 0.875rem;
  font-weight: 700;
}
.suggestion::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 0;
  border: 1.5px solid var(--puce-bord);
  border-radius: 18px;
  background: var(--puce-fond);
  transition: background-color 0.15s;
}
.suggestion:disabled { opacity: 0.55; }
@media (hover: hover) { .suggestion:hover:not(:disabled)::before { background: var(--surface); } }

.aller-bas {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: var(--primaire);
  color: var(--primaire-texte);
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: var(--ombre-menu);
  animation: apparition 0.2s ease-out both;
}

/* barre de saisie, collée en bas */
.barre-saisie {
  position: relative;
  flex: none;
  border-top: 1px solid var(--ligne);
  background: var(--surface);
}
.barre-saisie .aller-bas { position: absolute; }
.barre-int {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: calc(var(--colonne) + 32px);
  margin: 0 auto;
  padding: 10px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.ligne-saisie { display: flex; align-items: flex-end; gap: 10px; }
.saisie {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--hauteur-saisie, 48px);
  min-height: 48px;
  padding: 12px 16px;
  border: 1.5px solid var(--bord-champ);
  border-radius: 24px;
  background: var(--fond);
  color: var(--texte);
  font-size: 1rem;
  line-height: 22px;
  resize: none;
  overflow-y: auto;
}
.saisie::placeholder { color: var(--texte-doux); opacity: 1; }
.saisie:focus-visible { outline: 3px solid var(--anneau); outline-offset: 1px; border-color: var(--lien); }
.envoyer {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--primaire);
  color: var(--primaire-texte);
  transition: opacity 0.15s, transform 0.1s;
}
.envoyer .icone { stroke-width: 2.2; }
.envoyer:active:not(:disabled) { transform: scale(0.94); }
.envoyer:disabled { opacity: 0.5; }
.compteur { font-size: 0.8125rem; font-weight: 700; color: var(--texte-doux); text-align: right; }
.compteur-max { color: var(--urgence-texte); }

/* ---------- urgence ---------- */
.ecran-urgence { min-height: 100vh; min-height: 100dvh; }
.entete-urgence .entete-int {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: calc(env(safe-area-inset-top) + 16px);
  padding-bottom: 16px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.rond-retour {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--entete-doux);
  border-radius: 50%;
  background: transparent;
  color: var(--entete-texte);
}
.titre-urgence { font-family: var(--serif); font-size: 1.625rem; font-weight: 700; line-height: 1.15; }
.contenu-urgence {
  gap: 18px;
  padding-top: 20px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}
.contact-textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-libelle { font-size: 0.8125rem; color: var(--texte-doux); }
.contact-nom { font-size: 1.0625rem; font-weight: 700; color: var(--titre); overflow-wrap: anywhere; }
.rond-appel {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--primaire);
  color: var(--primaire-texte);
}
.consignes { display: flex; flex-direction: column; gap: 10px; }
.sous-titre-serif { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; }
.consignes-liste { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.consigne {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
}
.consigne-titre { font-size: 1rem; font-weight: 700; color: var(--titre); }
.consigne-texte { display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; line-height: 1.45; }
.consigne-texte ul, .consigne-texte ol { margin: 0; padding-left: 20px; }
.note-urgence { padding: 14px 16px; font-size: 0.9375rem; line-height: 1.45; }
.prevenir { display: flex; flex-direction: column; gap: 12px; }
.prevenir-form { padding: 16px; }
.prevenir-form .bouton-urgence { margin-top: 6px; }
.prevenir-form .bouton-discret { margin-top: 0; }
.confirmation {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--succes-fond);
  color: var(--succes-texte);
  box-shadow: none;
  animation: apparition 0.22s ease-out both;
}
.confirmation-pastille {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--succes-texte);
  color: var(--succes-fond);
}
.confirmation-pastille .icone { width: 18px; height: 18px; stroke-width: 2.6; }
.confirmation-texte { display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; font-weight: 700; line-height: 1.45; }
.confirmation-texte a { color: inherit; }

/* ---------- guide du logement : rubriques en tuiles, recherche, fiches ; l'assistant pour le reste ---------- */
/* couleur de chaque rubrique (pictogrammes, pastilles, puces) */
.c-arrivee_depart { --c: #2B6A8E; }
.c-logement { --c: #8A5A2B; }
.c-equipements { --c: #4F53A8; }
.c-chauffage { --c: #C4532A; }
.c-dechets { --c: #2E7D4F; }
.c-regles { --c: #74539E; }
.c-securite { --c: #A63A4C; }
.c-urgence { --c: #C81F37; }
.c-transports { --c: #1D7183; }
.c-restaurants { --c: #B04A2A; }
.c-activites { --c: #9A6510; }
.c-alentours { --c: #367558; }
.c-histoires { --c: #5B3F9E; }
.c-autre { --c: #536476; }
@media (prefers-color-scheme: dark) {
  .c-arrivee_depart { --c: #8FC1DE; }
  .c-logement { --c: #E0B07A; }
  .c-equipements { --c: #AEB2F2; }
  .c-chauffage { --c: #F29A6E; }
  .c-dechets { --c: #84D3A4; }
  .c-regles { --c: #C8ABEC; }
  .c-securite { --c: #F2909D; }
  .c-urgence { --c: #FF8E9B; }
  .c-transports { --c: #80D0DE; }
  .c-restaurants { --c: #F5A88C; }
  .c-activites { --c: #F0C46A; }
  .c-alentours { --c: #92D4B2; }
  .c-histoires { --c: #C9B6F2; }
  .c-autre { --c: #A7B6C4; }
}
.ecran-guide, .ecran-page { min-height: 100vh; min-height: 100dvh; }
.guide { display: flex; flex-direction: column; flex-grow: 1; }
.guide-colonne {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 18px;
  width: 100%;
  max-width: calc(var(--colonne) + 40px);
  margin: 0 auto;
  padding: 18px max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

/* recherche */
.recherche { position: relative; }
.recherche-champ {
  width: 100%;
  height: 54px;
  padding: 0 52px 0 50px;
  border: 1.5px solid var(--ligne);
  border-radius: 16px;
  background: var(--surface);
  color: var(--texte);
  font-size: 1.0625rem;
  box-shadow: var(--ombre);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
}
.recherche-champ::placeholder { color: var(--texte-doux); opacity: 1; }
.recherche-champ::-webkit-search-cancel-button, .recherche-champ::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.recherche-champ:focus-visible { outline: 3px solid var(--anneau); outline-offset: 1px; border-color: var(--lien); }
.recherche-loupe { position: absolute; top: 17px; left: 18px; color: var(--lien); pointer-events: none; }
.recherche-effacer {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texte-doux);
}
@media (hover: hover) { .recherche-effacer:hover { background: var(--surface-douce); color: var(--texte); } }

/* rubriques */
.rubriques, .resultats { display: flex; flex-direction: column; gap: 12px; }
.guide-titre { font-family: var(--serif); font-size: 1.3125rem; font-weight: 700; line-height: 1.2; color: var(--titre); }
.guide-note { font-size: 0.875rem; line-height: 1.4; color: var(--texte-doux); }
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tuiles > li { display: flex; min-width: 0; }
.tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 122px;
  padding: 14px 14px 13px;
  border: 0;
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  text-align: left;
  box-shadow: var(--ombre);
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.15s;
}
.tuile::after {   /* reflet de la couleur de la rubrique, en haut à droite */
  content: "";
  position: absolute;
  top: -34px;
  right: -34px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--c);
  opacity: 0.07;
  pointer-events: none;
}
.tuile:active { transform: scale(0.97); }
@media (hover: hover) {
  .tuile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(23 50 77 / 0.08), 0 8px 22px rgb(23 50 77 / 0.1); }
}
.tuile-icone, .fiche-ligne-icone {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--c);
}
.tuile-icone::before, .fiche-ligne-icone::before, .puce-rubrique::before, .rubrique-ligne-icone::before,
.lien-section-picto::before {   /* teinte de la rubrique */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.13;
}
.tuile-icone .icone, .fiche-ligne-icone .icone { position: relative; width: 25px; height: 25px; stroke-width: 1.8; }
.tuile-nom { font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--titre); overflow-wrap: anywhere; }
.tuile-compte { margin-top: auto; font-size: 0.8125rem; color: var(--texte-doux); }
.rubrique-fantome { position: relative; height: 72px; overflow: hidden; }
.rubrique-fantome::after {   /* reflet qui passe : chargement */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--surface-douce) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: reflet 1.3s ease-in-out infinite;
}

/* listes de fiches (rubrique, résultats, même rubrique) */
.liste-fiches { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fiche-ligne {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 14px 12px 14px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--texte);
  text-align: left;
  box-shadow: var(--ombre);
  transition: transform 0.12s, box-shadow 0.15s;
}
.fiche-ligne:active { transform: scale(0.985); }
@media (hover: hover) {
  .fiche-ligne:hover { box-shadow: 0 2px 4px rgb(23 50 77 / 0.08), 0 6px 18px rgb(23 50 77 / 0.09); }
}
.fiche-ligne-icone { width: 42px; height: 42px; border-radius: 12px; }
.fiche-ligne-icone .icone { width: 22px; height: 22px; }
.fiche-ligne-textes { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.fiche-ligne-rubrique { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); }
.fiche-ligne-titre { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--titre); overflow-wrap: anywhere; }
.fiche-ligne-apercu {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--texte-doux);
}
.fiche-ligne-suite { width: 18px; height: 18px; color: var(--texte-doux); }
.liste-fiches-compacte .fiche-ligne { min-height: 56px; padding: 10px 12px; }
.liste-fiches-compacte .fiche-ligne-icone { width: 34px; height: 34px; border-radius: 10px; }
.liste-fiches-compacte .fiche-ligne-icone .icone { width: 19px; height: 19px; }
.liste-fiches-compacte .fiche-ligne-titre { font-size: 0.9375rem; font-weight: 400; color: var(--texte); }
mark {
  padding: 0 1px;
  border-radius: 3px;
  background: rgb(240 179 74 / 0.38);
  color: inherit;
}
.resultats-compte { font-size: 0.875rem; font-weight: 700; color: var(--texte-doux); }
.vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px 20px;
  text-align: center;
}
.vide .pastille { margin-bottom: 4px; }
.vide-titre { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--titre); overflow-wrap: anywhere; }
.vide-texte { font-size: 0.9375rem; line-height: 1.45; color: var(--texte-doux); }
.vide .bouton { margin-top: 6px; }
.guide-erreur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }

/* l'assistant (ou l'hôte) pour ce que le guide ne dit pas */
.relais {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px 14px;
  padding: 18px;
  background: var(--entete-fond);
  color: var(--entete-texte);
  --anneau: var(--anneau-entete);
}
.relais-pastille {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: #F0B34A;
}
.relais-pastille .icone { width: 24px; height: 24px; }
.relais-textes { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.relais-titre { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.relais-texte { font-size: 0.9062rem; line-height: 1.45; color: var(--entete-doux); }
.relais-bouton { grid-column: 1 / -1; background: #F0B34A; color: #17324D; }
@media (hover: hover) { .relais-bouton:hover:not(:disabled) { background: #F4C46E; } }
.relais-nouveau .relais-pastille { animation: pouls 1.4s ease-in-out 3; }
.relais-petit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 10px 10px 18px;
  background: var(--surface);
  color: var(--texte);
  --anneau: var(--anneau-defaut);
}
.relais-petit .relais-titre { font-family: var(--sans); font-size: 1rem; color: var(--titre); }
.relais-lien { padding: 0 10px; font-weight: 700; }
.nouvelle-reponse {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--hote-bord);
  border-radius: 14px;
  background: var(--hote-fond);
  color: var(--texte);
  text-align: left;
}
.nouvelle-pastille {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
}
.nouvelle-pastille .icone { width: 19px; height: 19px; }
.nouvelle-texte { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; font-size: 0.875rem; line-height: 1.35; }
.nouvelle-texte strong { font-size: 0.9375rem; color: var(--hote-tete); }
.nouvelle-reponse > .icone { color: var(--hote-tete); }

/* en-tête des pages du guide et de la discussion (retour, titre, urgence) */
.entete-page { flex: none; }
.entete-page .entete-int {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(var(--colonne) + 40px);
  padding-top: calc(env(safe-area-inset-top) + 14px);
  padding-bottom: 8px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.page-titres { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.titre-page { font-family: var(--serif); font-size: 1.4375rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.page-sous-titre { font-size: 0.8125rem; line-height: 1.3; color: var(--entete-doux); }
.contenu-page {
  gap: 18px;
  max-width: calc(var(--colonne) + 40px);
  padding-top: 20px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.rubrique-tete { display: flex; align-items: center; gap: 14px; }
.rubrique-tete .tuile-icone { width: 52px; height: 52px; border-radius: 16px; background: var(--surface); box-shadow: var(--ombre); }
.rubrique-tete .tuile-icone .icone { width: 28px; height: 28px; }
.rubrique-compte { font-size: 0.9375rem; font-weight: 700; color: var(--texte-doux); }

/* une fiche */
.fiche { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 22px; }
.puce-rubrique {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--c);
  font-size: 0.8125rem;
  font-weight: 700;
}
.puce-rubrique .icone, .puce-rubrique span { position: relative; }
.puce-rubrique .icone { width: 16px; height: 16px; }
.fiche-titre { font-family: var(--serif); font-size: 1.5625rem; font-weight: 700; line-height: 1.2; color: var(--titre); overflow-wrap: anywhere; }
.fiche-texte { display: flex; flex-direction: column; gap: 10px; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.fiche-texte ul, .fiche-texte ol { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 22px; }
.fiche-texte ul { list-style: disc; }
.fiche-texte ol { list-style: decimal; }
.fiche-texte li::marker { color: var(--c); }
.fiche-texte strong { font-weight: 700; color: var(--titre); }
.fiche-texte a { color: var(--lien); text-decoration: underline; text-underline-offset: 2px; }
.fiche-texte a.tel { white-space: nowrap; }
/* lien d'une fiche vers une autre (3.5.3) : un bouton qui a l'air d'un lien, dans le texte et les messages */
.lien-fiche { display: inline; padding: 0; border: 0; background: none; color: var(--lien); font: inherit; text-align: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* introduction d'une rubrique (3.5.3) : la première chose lue, liseré de la couleur de la rubrique */
.intro-rubrique { border-left: 4px solid var(--c); padding-top: 16px; }
.intro-rubrique .fiche-titre { font-size: 1.375rem; }
/* « Accueil du guide » : à côté du retour, quand le retour n'y mène pas en une fois */
.entete-page .rond-retour + .rond-accueil { margin-left: -4px; }
.rond-accueil[hidden] { display: none; }
/* mise en forme des fiches (éditeur de Fanal, 3.5.1) : intertitres, italique, images, aussi dans les messages,
   les consignes d'urgence et le texte original d'une fiche traduite */
.intertitre { margin: 6px 0 -2px; font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--titre); }
.bulle .intertitre, .consigne-texte .intertitre, .original .intertitre { font-size: 1.0625rem; margin-top: 2px; }
.fiche-texte em, .bulle em, .consigne-texte em, .original em { font-style: italic; }
.fiche-image { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.fiche-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 12px;
  background: var(--surface-douce);
}
.fiche-image-qr img { width: min(240px, 100%); align-self: center; padding: 10px; border-radius: 14px; background: #FFFFFF; box-shadow: var(--ombre); image-rendering: pixelated; }
.fiche-image figcaption { font-size: 0.875rem; line-height: 1.4; color: var(--texte-doux); text-align: center; }
.image-absente img { display: none; }
/* photo de l'office de tourisme (3.8.0) : toujours avec son crédit ; rien du tout si elle ne se charge pas */
.photo-office { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.photo-office img { display: block; width: 100%; height: auto; max-height: 40vh; object-fit: cover; border-radius: 12px; background: var(--surface-douce); }
.photo-office figcaption { font-size: 0.8125rem; line-height: 1.3; color: var(--texte-doux); }
.photo-office.image-absente { display: none; }
/* fiches du guide mises en page (3.6.1) : chapô, intertitres et infos pratiques en pictogrammes (teinte de la rubrique),
   liens seuls en boutons, liens vers une autre fiche en cartes, encadrés, étapes, téléphones en pastilles, note finale */
.fiche-chapo {
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--c);
  font-family: var(--serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--titre);
}
.intertitre-riche { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.intertitre-icone, .fiche-info-icone {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--c);
}
.intertitre-icone::before {   /* teinte de la rubrique */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.13;
}
.intertitre-icone .icone { position: relative; width: 19px; height: 19px; }
.fiche-texte .fiche-infos { gap: 0; padding: 4px 14px; border-radius: 14px; background: var(--surface-douce); list-style: none; }
.fiche-info { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--ligne); }
.fiche-info:first-child { border-top: 0; }
.fiche-info-icone { width: 32px; height: 32px; margin-top: 1px; border-radius: 50%; background: var(--surface); }
.fiche-info-icone .icone { width: 17px; height: 17px; }
.fiche-info-textes { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.fiche-info-nom { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.4; text-transform: uppercase; color: var(--c); }
.fiche-info-valeur { font-size: 0.9688rem; line-height: 1.5; color: var(--texte); }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-actions .bouton { flex: 1 1 200px; padding: 10px 16px; color: var(--titre); text-decoration: none; }
.fiche-actions .bouton span { min-width: 0; overflow-wrap: anywhere; }
.fiche-texte .fiche-cartes, .fiche-cartes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fiche-texte .carte-fiche { min-height: 58px; padding: 10px 12px; background: var(--surface-douce); box-shadow: none; text-decoration: none; }
.carte-fiche .fiche-ligne-icone { width: 38px; height: 38px; border-radius: 11px; }
.carte-fiche .fiche-ligne-icone .icone { width: 20px; height: 20px; }
.carte-fiche .fiche-ligne-titre { font-size: 0.9688rem; }
.carte-fiche .fiche-ligne-apercu { display: block; overflow: visible; font-size: 0.875rem; line-height: 1.45; }
.encadre { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 0.9375rem; line-height: 1.5; }
.encadre > .icone { width: 20px; height: 20px; margin-top: 2px; }
.encadre-alerte { background: var(--transmis-fond); color: var(--transmis-texte); }
.encadre-alerte strong { color: inherit; }
.encadre-astuce { background: var(--surface-douce); }
.encadre-astuce > .icone { color: var(--soleil); }
.fiche-texte .fiche-etapes { gap: 10px; padding-left: 0; list-style: none; counter-reset: etape; }
.fiche-etapes > li { position: relative; min-height: 28px; padding-left: 40px; counter-increment: etape; }
.fiche-etapes > li::before {
  content: counter(etape);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--c);
  color: var(--c);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.fiche-texte a.tel-pastille {   /* en ligne (pas un bloc) : le point qui suit le numéro reste avec lui */
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  background: var(--surface-douce);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.fiche-infos a.tel-pastille { background: var(--surface); }
.tel-pastille .icone { width: 14px; height: 14px; margin-right: 5px; stroke-width: 2.2; vertical-align: -2px; }
.fiche-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-douce); font-size: 0.8438rem; line-height: 1.45; color: var(--texte-doux); }
.fiche-note > .icone { width: 17px; height: 17px; margin-top: 1px; }
.original-titre { font-weight: 700; }
.fiche .original { gap: 8px; padding: 2px 0 2px 14px; line-height: 1.5; }
.fiche .original ul, .fiche .original ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-left: 20px; }
.voisines { display: flex; flex-direction: column; gap: 10px; }

/* ---------- navigation du séjour (3.9.0) : une barre d'onglets en bas d'un téléphone (à portée du pouce), un menu en haut
   d'un grand écran ; l'onglet de la section ouverte est allumé (pastille corail), même sur une fiche ou une sortie ---------- */
.nav-sejour {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  border-top: 1px solid var(--ligne);
  background: var(--nav-fond);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
}
.nav-int { width: 100%; max-width: 600px; margin: 0 auto; }
.nav-marque { display: none; }
.nav-onglets { display: flex; gap: 2px; }
.nav-onglet {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  padding: 2px 2px 3px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--texte-doux);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.15;
}
.nav-picto {
  display: grid;
  place-items: center;
  width: 56px;
  max-width: 100%;
  height: 30px;
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.nav-picto .icone { width: 22px; height: 22px; stroke-width: 1.9; }
.nav-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-onglet[aria-current="page"] { color: var(--titre); }
.nav-onglet[aria-current="page"] .nav-picto { background: var(--nav-actif-fond); color: var(--nav-actif); }
.nav-onglet[aria-current="page"] .nav-picto .icone { stroke-width: 2.3; }
.nav-onglet:active .nav-picto { transform: scale(0.9); }
@media (hover: hover) { .nav-onglet:hover:not([aria-current="page"]) .nav-picto { background: var(--surface-douce); } }
body.avec-nav { --nav-bas: calc(69px + env(safe-area-inset-bottom)); padding-bottom: var(--nav-bas); }
body.avec-nav .ecran-guide, body.avec-nav .ecran-page { min-height: calc(100vh - var(--nav-bas)); min-height: calc(100dvh - var(--nav-bas)); }
body.avec-nav .jr-envoi { padding-bottom: 12px; }

/* ---------- l'assistant (3.9.0) : une bulle en bas à droite, au-dessus du menu sur téléphone ; « Une question ? » sur
   l'accueil du séjour, le pictogramme seul ailleurs sur téléphone ; un point corail quand une réponse n'est pas lue ---------- */
.question-flottante {
  position: fixed;
  z-index: 35;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + var(--nav-bas, env(safe-area-inset-bottom)));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 56px;
  height: 56px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--primaire);
  color: var(--primaire-texte);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 28px rgb(15 36 56 / 0.28), 0 2px 6px rgb(15 36 56 / 0.18);
  cursor: pointer;
  animation: qf-entree 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.qf-picto { display: grid; place-items: center; flex: none; }
.qf-picto .icone { width: 26px; height: 26px; stroke-width: 1.8; }
.qf-texte { white-space: nowrap; }
.qf-point {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--fond);
  border-radius: 50%;
  background: var(--accent);
  animation: pouls 1.4s ease-in-out 3;
}
.question-flottante:active { transform: scale(0.95); }
@media (hover: hover) { .question-flottante:hover { background: var(--primaire-survol); } }
@media (max-width: 899.98px) {
  .question-flottante.qf-reduite { width: 56px; padding: 0; justify-content: center; }
  .question-flottante.qf-reduite .qf-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}
body.avec-nav.avec-qf { padding-bottom: calc(var(--nav-bas) + 84px); }   /* la fin de la page passe au-dessus de la bulle */
@keyframes qf-entree {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
.section-titre { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--titre); }
.entete-racine .page-titres { gap: 3px; }

/* ---------- accueil du séjour : quatre entrées (Mon séjour, Guide, Agenda, Contact), chacune sa couleur ---------- */
.choix { display: flex; flex-direction: column; gap: 12px; }
.choix-sejour { --c: #2B6A8E; --c-texte: #23597A; }
.choix-decouvrir { --c: #D06246; --c-texte: #A84730; }
.choix-agenda { --c: #C68A1C; --c-texte: #85570B; }
.choix-contact { --c: #17324D; --c-texte: #17324D; }
.choix-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.choix-liste > li { display: flex; min-width: 0; }
.choix-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 176px;
  padding: 16px 14px 14px;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--texte);
  text-align: left;
  box-shadow: var(--ombre);
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.15s;
}
.choix-carte::before {   /* lueur de la couleur de l'entrée, en haut à droite */
  content: "";
  position: absolute;
  top: -56px;
  right: -56px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: 0.12;
  pointer-events: none;
}
.choix-carte:active { transform: scale(0.97); }
@media (hover: hover) {
  .choix-carte:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(23 50 77 / 0.08), 0 10px 26px rgb(23 50 77 / 0.12); }
}
.choix-picto {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--c);
  color: #FFFFFF;
  box-shadow: 0 8px 16px -8px var(--c);
}
.choix-picto .icone { width: 26px; height: 26px; stroke-width: 1.8; }
.choix-textes { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.choix-nom { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.15; color: var(--titre); overflow-wrap: anywhere; }
.choix-texte { font-size: 0.875rem; line-height: 1.4; color: var(--texte-doux); }
.choix-detail { margin-top: auto; padding-top: 6px; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; color: var(--c-texte); }
.choix-detail:empty { display: none; }
.choix-suite { position: absolute; top: 18px; right: 14px; width: 18px; height: 18px; color: var(--texte-doux); opacity: 0.6; }
/* nombre impair d'entrées : la dernière en largeur, pictogramme à gauche */
.choix-impair .choix-liste > li:last-child { grid-column: 1 / -1; }
.choix-impair .choix-liste > li:last-child .choix-carte { flex-direction: row; align-items: center; min-height: 0; padding-right: 40px; }
.choix-impair .choix-liste > li:last-child .choix-detail { padding-top: 2px; }
.choix-impair .choix-liste > li:last-child .choix-suite { top: calc(50% - 9px); }
@media (prefers-color-scheme: dark) {
  .choix-sejour { --c: #8FC1DE; --c-texte: #A9CFE6; }
  .choix-decouvrir { --c: #F29A7E; --c-texte: #F5B7A5; }
  .choix-agenda { --c: #F0C46A; --c-texte: #F0C98A; }
  .choix-contact { --c: #CFE0EC; --c-texte: #CFE0EC; }
  .choix-picto { color: #0E1A26; box-shadow: none; }
  .lien-section { --c: #F0C46A; }
  .hote-avatar { background: linear-gradient(145deg, #3A7FA6, #1D3A57); }
}

/* ---------- Mon séjour : les rubriques rangées par besoin, en listes (pictogramme, nom, premières fiches, nombre) ---------- */
#rubriques { gap: 24px; }
.groupe-rubriques { display: flex; flex-direction: column; gap: 10px; }
.rubriques-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--rayon);
  background: var(--surface);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.rubriques-liste > li { position: relative; }
.rubrique-ligne {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 74px;
  padding: 12px 12px 12px 14px;
  border: 0;
  background: transparent;
  color: var(--texte);
  text-align: left;
  transition: background-color 0.15s;
}
.rubrique-ligne:active { background: var(--surface-douce); }
.rubrique-ligne-icone, .lien-section-picto {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--c);
}
.rubrique-ligne-icone .icone, .lien-section-picto .icone { position: relative; width: 24px; height: 24px; stroke-width: 1.8; }
.rubrique-ligne-textes, .lien-section-textes { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.rubrique-ligne-nom, .lien-section-nom { font-size: 1.0312rem; font-weight: 700; line-height: 1.3; color: var(--titre); overflow-wrap: anywhere; }
.rubrique-ligne-apercu {
  overflow: hidden;
  font-size: 0.8438rem;
  line-height: 1.4;
  color: var(--texte-doux);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lien-section-detail { font-size: 0.8438rem; line-height: 1.4; color: var(--texte-doux); }
.rubrique-ligne-compte {
  flex: none;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-douce);
  color: var(--texte-doux);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.rubrique-ligne-suite, .lien-section-suite { width: 18px; height: 18px; color: var(--texte-doux); }

/* ---------- Guide : composer ma journée en grand, idées du jour, bonnes adresses, lien vers l'agenda ---------- */
.composer {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 14px;
  padding: 20px 18px 18px;
  background: var(--entete-fond);
  color: var(--entete-texte);
  overflow: hidden;
  --anneau: var(--anneau-entete);
}
.composer::before {   /* le soleil de la journée, en haut à droite */
  content: "";
  position: absolute;
  top: -70px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(240 179 74 / 0.38), transparent);
  pointer-events: none;
}
.composer-picto {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: #F0B34A;
  color: #17324D;
}
.composer-picto .icone { width: 28px; height: 28px; stroke-width: 1.9; }
.composer-textes { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.composer-titre { font-family: var(--serif); font-size: 1.4375rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.composer-texte { font-size: 0.9062rem; line-height: 1.45; color: var(--entete-doux); }
.composer-bouton { position: relative; grid-column: 1 / -1; width: 100%; background: #F0B34A; color: #17324D; }
@media (hover: hover) { .composer-bouton:hover { background: #F4C46E; } }
.adresses { display: flex; flex-direction: column; gap: 10px; }
.decouvrir-cote { display: contents; }   /* bonnes adresses et agenda : à droite sur grand écran */
.lien-section {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 74px;
  padding: 12px 12px 12px 14px;
  border: 0;
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  text-align: left;
  box-shadow: var(--ombre);
  transition: transform 0.12s, box-shadow 0.15s;
  --c: #9A6510;
}
.lien-section:active { transform: scale(0.985); }
@media (hover: hover) { .lien-section:hover { box-shadow: 0 2px 4px rgb(23 50 77 / 0.08), 0 6px 18px rgb(23 50 77 / 0.09); } }

/* ---------- Contact : l'hôte (appeler, SMS), une question ici, la messagerie de la réservation, les urgences ---------- */
.contact-page { gap: 16px; }
.hote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px 16px;
  padding: 22px 18px 18px;
}
.hote-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2B6A8E, #17324D);
  color: #FFFFFF;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #F0B34A;
}
.hote-avatar .icone { width: 30px; height: 30px; }
.hote-textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hote-role { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.hote-nom { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--titre); overflow-wrap: anywhere; }
.hote-tel { font-size: 1rem; color: var(--texte); font-variant-numeric: tabular-nums; }
.hote-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hote-actions .bouton { width: 100%; padding: 0 12px; }
.hote-actions:has(> .bouton[hidden]) { grid-template-columns: minmax(0, 1fr); }
.hote-whatsapp .icone { color: var(--whatsapp); }
.contact-bloc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 18px;
}
.contact-bloc-picto {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--surface-douce);
  color: var(--lien);
}
.contact-bloc-picto .icone { width: 24px; height: 24px; }
.contact-bloc-textes { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.contact-bloc-titre { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--titre); overflow-wrap: anywhere; }
.contact-bloc-texte { font-size: 0.9375rem; line-height: 1.5; color: var(--texte-doux); }
.contact-bloc-bouton { grid-column: 1 / -1; width: 100%; }
.contact-urgence { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ---------- marée : feuille du détail (aujourd'hui, demain), ouverte par la pastille de l'en-tête ---------- */
.feuille-maree, .feuille-meteo, .feuille-mer, .feuille-maison, .feuille-signaler, .feuille-filtres {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 600px;
  max-height: min(88vh, calc(100% - 24px));
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px max(20px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--fond);
  color: var(--texte);
  box-shadow: 0 -12px 40px rgb(15 36 56 / 0.25);
}
.feuille-maree[open], .feuille-meteo[open], .feuille-mer[open], .feuille-maison[open], .feuille-signaler[open],
.feuille-filtres[open] { animation: monte 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.feuille-maree::backdrop, .feuille-meteo::backdrop, .feuille-mer::backdrop, .feuille-maison::backdrop, .feuille-signaler::backdrop,
.feuille-filtres::backdrop { background: var(--voile); }
html:has(.feuille-maree[open]), html:has(.feuille-meteo[open]), html:has(.feuille-maison[open]),
html:has(.feuille-signaler[open]), html:has(.feuille-filtres[open]), html:has(.feuille-mer[open]) { overflow: hidden; }
.mer-carte { margin-top: 18px; padding: 18px; border-radius: 18px; background: var(--surface); }
.mer-resume { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.mer-resume-picto { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--surface-douce); color: var(--lien); }
.mer-resume-picto .icone { width: 34px; height: 34px; }
.mer-degres { font-family: var(--serif); font-size: 2.75rem; font-weight: 700; line-height: 1.05; color: var(--titre); }
.mer-nom { margin-top: 5px; font-size: 0.875rem; color: var(--texte-doux); }
.mer-badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: var(--lien); background: var(--surface-douce); }
.mer-precision { margin-top: 16px; font-size: 0.875rem; line-height: 1.5; color: var(--texte-doux); }
.mer-maj { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ligne); font-size: 0.8125rem; color: var(--texte-doux); }
.mer-source { margin-top: 8px; font-size: 0.8125rem; color: var(--texte-doux); }
.feuille-poignee { width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--ligne); }
.feuille-tete { display: flex; align-items: flex-start; gap: 12px; }
.feuille-titre { margin: 0; font-family: var(--serif); font-size: 1.4375rem; font-weight: 700; line-height: 1.2; color: var(--titre); }
.feuille-date { margin: 2px 0 0; font-size: 0.875rem; color: var(--texte-doux); }
.feuille-fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -2px -4px 0 auto;
  border: 0;
  border-radius: 50%;
  color: var(--titre);
  background: var(--surface);
  box-shadow: var(--ombre);
  cursor: pointer;
}
.feuille-fermer .icone { width: 20px; height: 20px; }
.maree-onglets, .meteo-onglets { display: flex; gap: 4px; margin: 14px 0 12px; padding: 4px; border-radius: 999px; background: var(--maree-onglets); }
.maree-onglet, .meteo-onglet {
  flex: 1;
  min-height: 36px;
  padding: 6px 0;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--texte-doux);
  background: transparent;
  cursor: pointer;
}
.maree-onglet[aria-selected="true"], .meteo-onglet[aria-selected="true"] { font-weight: 700; color: var(--titre); background: var(--surface); box-shadow: var(--ombre); }
.maree-carte { padding: 14px 14px 8px; border-radius: 18px; background: var(--surface); box-shadow: var(--ombre); }
.maree-maintenant { display: flex; align-items: center; gap: 12px; }
.maree-hauteur { font-family: var(--serif); font-size: 2.125rem; font-weight: 700; line-height: 1; color: var(--titre); white-space: nowrap; }
.maree-maintenant-textes { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.maree-sens {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--maree-pleine-texte);
  background: var(--maree-pleine-fond);
}
.maree-sens.descend { color: var(--maree-basse-texte); background: var(--maree-basse-fond); }
.maree-prochaine { font-size: 0.875rem; color: var(--texte-doux); }
.fleche-maree { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.maree-graphe { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.maree-graphe .eau { fill: var(--maree-eau); }
.maree-graphe .courbe { fill: none; stroke: var(--maree-courbe); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.maree-graphe .axe { stroke: var(--ligne); stroke-width: 1; }
.maree-graphe .repere-heure { stroke: var(--ligne); stroke-width: 1; stroke-dasharray: 2 4; }
.maree-graphe .graduation { font-family: var(--sans); font-size: 0.8125rem; fill: var(--texte-doux); }
.maree-graphe .valeur { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; fill: var(--texte); }
.maree-graphe .maintenant { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.maree-graphe .maintenant-texte { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; fill: var(--accent); }
.maree-graphe .point { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }
.maree-horaires { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; }
.maree-horaire {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--ombre);
}
.maree-horaire.passee { opacity: 0.55; }
.maree-horaire.prochaine { box-shadow: inset 0 0 0 2px var(--maree-courbe); }
.maree-pastille { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; }
.maree-pastille.pleine { color: var(--maree-pleine-texte); background: var(--maree-pleine-fond); }
.maree-pastille.basse { color: var(--maree-basse-texte); background: var(--maree-basse-fond); }
.maree-pastille .fleche-maree { width: 16px; height: 16px; }
.maree-horaire-textes { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.maree-horaire-nom { font-size: 0.8125rem; color: var(--texte-doux); }
.maree-horaire-heure { font-size: 1.0625rem; font-weight: 700; color: var(--titre); white-space: nowrap; }
.maree-horaire-heure small { font-size: 0.8125rem; font-weight: 400; color: var(--texte-doux); }
.maree-coef { margin: 12px 0 0; font-size: 0.875rem; color: var(--texte-doux); }
.maree-conseil { display: flex; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--transmis-fond); }
.maree-conseil-icone { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: none; stroke: var(--maree-conseil-icone); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.maree-conseil p { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--texte); }
.maree-lien {
  display: block;
  margin-top: 4px;
  padding: 2px 0;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: var(--lien);
  text-align: left;
  background: none;
  cursor: pointer;
}
.maree-lien:hover { color: var(--lien-survol); text-decoration: underline; }
.maree-source { margin: 12px 0 0; font-size: 0.8125rem; color: var(--texte-doux); text-align: center; }

/* ---------- filtres de l'agenda (3.9.0) : une feuille ; afficher (tout, évènements, bons plans), dates, critères,
   catégories présentes ; le pied reste visible avec le nombre de sorties qui seront montrées ---------- */
.feuille-filtres[open] { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.filtres-corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  margin: 14px calc(-1 * max(20px, env(safe-area-inset-right))) 0 calc(-1 * max(20px, env(safe-area-inset-left)));
  padding: 4px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.filtres-bloc { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.filtres-bloc-titre { margin-bottom: 10px; padding: 0; font-size: 0.9375rem; font-weight: 700; color: var(--titre); }
.filtres-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.filtres-date { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.8125rem; font-weight: 700; color: var(--texte-doux); }
.filtres-date .champ { height: 48px; padding: 0 12px; font-size: 1rem; }
.puce-categorie { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px 0 10px; }
.puce-categorie .icone { width: 18px; height: 18px; color: var(--c); }
.puce-compte { font-weight: 400; color: var(--texte-doux); }
.puce-categorie[aria-pressed="true"] .icone, .puce-categorie[aria-pressed="true"] .puce-compte { color: inherit; }
.filtres-pied {
  display: flex;
  flex: none;
  gap: 10px;
  margin: 0 calc(-1 * max(20px, env(safe-area-inset-right))) 0 calc(-1 * max(20px, env(safe-area-inset-left)));
  padding: 12px max(20px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border-top: 1px solid var(--ligne);
  background: var(--fond);
}
.filtres-pied .bouton-discret { flex: none; padding: 0 8px; }
.filtres-pied .bouton-primaire { flex: 1 1 auto; }

/* ---------- météo : feuille du détail (aujourd'hui, demain heure par heure), ouverte par la tuile de l'en-tête ---------- */
.meteo-carte { padding: 14px 0 8px; border-radius: 18px; background: var(--surface); box-shadow: var(--ombre); }
.meteo-resume { display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.meteo-resume-icone { width: 46px; height: 46px; flex: none; stroke-width: 1.6; color: var(--maree-courbe); }
.meteo-resume.ciel-soleil .meteo-resume-icone, .meteo-resume.ciel-eclaircie .meteo-resume-icone { color: var(--soleil); }
.meteo-resume-temp { font-family: var(--serif); font-size: 2.125rem; font-weight: 700; line-height: 1; color: var(--titre); white-space: nowrap; }
.meteo-resume-textes { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meteo-resume-ciel { font-size: 1rem; font-weight: 700; color: var(--titre); }
.meteo-resume-detail { font-size: 0.875rem; color: var(--texte-doux); }
.meteo-conseil { margin: 12px 14px 0; padding: 10px 12px; border-radius: 12px; font-size: 0.875rem; line-height: 1.4; color: var(--texte); background: var(--surface-douce); }
.meteo-conseil.alerte { color: var(--transmis-texte); background: var(--transmis-fond); }
.meteo-heures {
  list-style: none;
  display: flex;
  gap: 2px;
  margin: 10px 0 0;
  padding: 0 8px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.meteo-heure {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 58px;
  padding: 8px 0;
  border-radius: 14px;
  scroll-snap-align: start;
}
.meteo-heure.maintenant { background: var(--surface-douce); }
.mh-heure { font-size: 0.8125rem; color: var(--texte-doux); white-space: nowrap; }
.meteo-heure.maintenant .mh-heure { font-weight: 700; color: var(--titre); }
.mh-icone { width: 26px; height: 26px; stroke-width: 1.7; color: var(--texte-doux); }
.mh-icone.ciel-soleil, .mh-icone.ciel-eclaircie { color: var(--soleil); }
.mh-icone.ciel-pluie, .mh-icone.ciel-averse, .mh-icone.ciel-orage { color: var(--pluie); }
.mh-temp { font-size: 1.0625rem; font-weight: 700; color: var(--titre); }
.mh-pluie { display: flex; align-items: center; gap: 2px; min-height: 16px; font-size: 0.8125rem; font-weight: 700; color: var(--pluie); }
.mh-pluie .icone { width: 11px; height: 11px; stroke-width: 2.4; }
.mh-pluie.faible { font-weight: 400; color: var(--texte-doux); opacity: 0.6; }
.mh-vent { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 0.8125rem; color: var(--texte-doux); white-space: nowrap; }
.mh-vent.fort { font-weight: 700; color: var(--transmis-texte); }
.mh-fleche { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.meteo-vide { margin: 12px 14px 4px; font-size: 0.875rem; color: var(--texte-doux); }

/* ---------- état du logement : feuille du détail (eau chaude, chauffage, électricité, appareils) ---------- */
.maison-blocs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.maison-bloc { padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--ombre); }
.maison-bloc-tete { display: flex; align-items: center; gap: 12px; }
.maison-bloc-pastille {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  color: var(--maree-courbe);
  background: var(--surface-douce);
}
.maison-bloc-pastille .icone { width: 21px; height: 21px; }
.maison-bloc.ok .maison-bloc-pastille { color: var(--succes-texte); background: var(--succes-fond); }
.maison-bloc.chauffe .maison-bloc-pastille { color: var(--chauffe-texte); background: var(--chauffe-fond); }
.maison-bloc.attention .maison-bloc-pastille { color: var(--transmis-texte); background: var(--transmis-fond); }
.maison-bloc-titres { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.maison-bloc-nom { margin: 0; font-size: 0.8125rem; font-weight: 400; color: var(--texte-doux); }
.maison-bloc-etat { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--titre); }
.maison-bloc-texte { margin: 8px 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--texte); }
.maison-pieces { list-style: none; display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; }
/* un radiateur (3.6.1) : pastille de l'état, pièce et état en mots, mode et température voulue (jamais celle de la pièce) */
.maison-piece { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 0; border-top: 1px solid var(--ligne); }
.maison-piece:first-child { border-top: 0; }
.mp-pastille {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  color: var(--texte-doux);
  background: var(--surface-douce);
}
.mp-pastille .icone { width: 19px; height: 19px; }
.maison-piece.chauffe .mp-pastille { color: var(--chauffe-texte); background: var(--chauffe-fond); }
.maison-piece.ok .mp-pastille { color: var(--succes-texte); background: var(--succes-fond); }
.maison-piece.alerte .mp-pastille { color: var(--transmis-texte); background: var(--transmis-fond); }
.maison-piece.froid .mp-pastille { color: var(--maree-pleine-texte); background: var(--maree-pleine-fond); }
.mp-textes { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.mp-nom { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--titre); overflow-wrap: anywhere; }
.mp-etat { font-size: 0.8438rem; font-weight: 700; line-height: 1.3; color: var(--texte-doux); }
.maison-piece.chauffe .mp-etat { color: var(--chauffe-texte); }
.maison-piece.ok .mp-etat { color: var(--succes-texte); }
.maison-piece.alerte .mp-etat { color: var(--transmis-texte); }
.maison-piece.froid .mp-etat { color: var(--maree-pleine-texte); }
.mp-reglage { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 5px; }
.mp-mode, .mp-cible { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; line-height: 1.2; white-space: nowrap; }
.mp-mode { padding: 3px 10px 3px 7px; border-radius: 999px; font-weight: 700; color: var(--titre); background: var(--surface-douce); }
.mp-mode .icone, .mp-cible .icone { width: 15px; height: 15px; stroke-width: 2.2; }
.mode-confort .icone { color: var(--soleil); }
.mode-eco .icone { color: var(--maree-courbe); }
.mode-hors_gel .icone { color: var(--maree-pleine-texte); }
.mode-arret .icone { color: var(--texte-doux); }
.mp-cible { padding-right: 2px; color: var(--texte-doux); }
.maison-appareils { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; }
.maison-appareil { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.9375rem; color: var(--texte); }
.maison-appareil small { font-size: 0.8125rem; color: var(--texte-doux); white-space: nowrap; }

/* ---------- sorties (3.6.0) : idées du jour, infos du moment, agenda, bons plans, une sortie ---------- */
/* couleur de chaque catégorie de sortie (tuile de date, catégorie, liseré de la page), des bons plans et des infos */
.sc-concert { --c: #7B4BB3; }
.sc-spectacle { --c: #B23A68; }
.sc-exposition { --c: #2B6A8E; }
.sc-fete { --c: #C4532A; }
.sc-marche { --c: #2E7D4F; }
.sc-sport { --c: #1D7183; }
.sc-enfants { --c: #9A6510; }
.sc-visite { --c: #8A5A2B; }
.sc-atelier { --c: #4F53A8; }
.sc-cinema { --c: #A63A4C; }
.sc-conference { --c: #3E5C76; }
.sc-autre { --c: #536476; }
.sc-bon { --c: #B54A30; }
.sc-info { --c: #2B6A8E; }
.idee-dehors { --c: #9A6510; }
.idee-abri { --c: #2B6A8E; }
.idee-famille { --c: #74539E; }
.idee-gratuit { --c: #2E7D4F; }
.idee-soir { --c: #4F53A8; }
@media (prefers-color-scheme: dark) {
  .sc-concert { --c: #CDB0F2; }
  .sc-spectacle { --c: #F4A3C3; }
  .sc-exposition { --c: #8FC1DE; }
  .sc-fete { --c: #F29A6E; }
  .sc-marche { --c: #84D3A4; }
  .sc-sport { --c: #80D0DE; }
  .sc-enfants { --c: #F0C46A; }
  .sc-visite { --c: #E0B07A; }
  .sc-atelier { --c: #AEB2F2; }
  .sc-cinema { --c: #F2909D; }
  .sc-conference { --c: #A9C2D8; }
  .sc-autre { --c: #A7B6C4; }
  .sc-bon { --c: #F5B7A5; }
  .sc-info { --c: #8FC1DE; }
  .idee-dehors { --c: #F0C46A; }
  .idee-abri { --c: #8FC1DE; }
  .idee-famille { --c: #C8ABEC; }
  .idee-gratuit { --c: #84D3A4; }
  .idee-soir { --c: #AEB2F2; }
}
/* une recherche en cours dans « Mon séjour » : les fiches trouvées seulement */
#ecran-sejour.en-recherche .guide-note { display: none; }

/* puces de filtre (idées du jour, agenda, avis) : appuyée = remplie */
.puces-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.puces-defilantes, .aujourdhui .puces-filtres {   /* une seule ligne qui défile, jusqu'aux bords */
  flex-wrap: nowrap;
  margin: 0 -20px;
  padding: 2px 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.aujourdhui .puces-filtres { margin: 0 -16px; padding: 2px 16px; }
.puces-defilantes::-webkit-scrollbar, .aujourdhui .puces-filtres::-webkit-scrollbar { display: none; }
.puce-filtre {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--ligne);
  border-radius: 999px;
  background: var(--surface);
  color: var(--puce-texte);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.puce-filtre[aria-pressed="true"] { border-color: var(--primaire); background: var(--primaire); color: var(--primaire-texte); }
@media (hover: hover) { .puce-filtre:hover:not([aria-pressed="true"]) { border-color: var(--puce-bord); } }

/* « Aujourd'hui à … » : la vitrine du guide (une idée dehors, une à l'abri, en famille, gratuite, ce soir) */
.aujourdhui {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 14px;
  background-image: linear-gradient(160deg, rgb(240 179 74 / 0.18), transparent 46%);
}
.aujourdhui-tete { display: flex; flex-direction: column; gap: 3px; }
.aujourdhui-titre { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--titre); overflow-wrap: anywhere; }
.aujourdhui-meteo { font-size: 0.8438rem; line-height: 1.4; color: var(--texte-doux); }
.idees { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.idee {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 10px 10px 10px 10px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-douce);
  color: var(--texte);
  text-align: left;
  transition: transform 0.12s;
}
.idee:active { transform: scale(0.985); }
.idee-icone, .info-icone {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--c);
  background: var(--surface);
}
.idee-icone::before {   /* teinte de la catégorie */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  opacity: 0.14;
}
.idee-icone .icone, .info-icone .icone { position: relative; width: 21px; height: 21px; }
.idee-textes, .info-textes { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.idee-type, .info-type, .sortie-categorie {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--c);
}
.idee-titre, .info-titre { font-size: 0.9688rem; font-weight: 700; line-height: 1.3; color: var(--titre); overflow-wrap: anywhere; }
.idee-detail { font-size: 0.8125rem; line-height: 1.35; color: var(--texte-doux); overflow-wrap: anywhere; }
.idee-suite { width: 18px; height: 18px; color: var(--texte-doux); }
.idees-vide { font-size: 0.875rem; line-height: 1.45; color: var(--texte-doux); }

/* infos utiles du moment (seulement quand il y en a) */
.infos-moment { display: flex; flex-direction: column; gap: 8px; }
.liste-infos { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.info-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 11px 12px 11px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--texte);
  text-align: left;
  box-shadow: var(--ombre);
  --c: var(--lien);
}
.info-ligne .info-icone { background: var(--surface-douce); }
.info-ligne.importante { background: var(--transmis-fond); box-shadow: none; --c: var(--transmis-texte); }
.info-ligne.importante .info-icone { background: var(--surface); }
.info-ligne.importante .info-titre { color: var(--transmis-texte); }
.info-texte {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8438rem;
  line-height: 1.4;
  color: var(--texte-doux);
}
.infos-toutes { margin: 0; padding: 0 2px; }

@media (hover: hover) {
  .idee:hover, .info-ligne:hover { box-shadow: 0 2px 4px rgb(23 50 77 / 0.08), 0 6px 18px rgb(23 50 77 / 0.09); }
}

/* onglets (programme de la journée composée) */
.onglets-sorties { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--maree-onglets); }
.onglet-sortie {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texte-doux);
  font-size: 0.9062rem;
  line-height: 1.2;
}
.onglet-sortie[aria-selected="true"] { font-weight: 700; color: var(--titre); background: var(--surface); box-shadow: var(--ombre); }
.sorties-source, .sortie-source { font-size: 0.8125rem; line-height: 1.4; color: var(--texte-doux); }
.sorties-source { text-align: center; }

/* agenda jour par jour (3.9.0) : recherche et filtres en haut, périodes en puces, puis chaque jour (son titre reste en
   haut en défilant) : les séances à heure connue, celles sans heure, les bons plans, les sorties sur plusieurs jours */
.agenda { gap: 14px; }
.agenda-outils { display: flex; align-items: center; gap: 10px; }
.recherche-agenda { flex: 1 1 auto; min-width: 0; }
.recherche-agenda .recherche-champ { height: 50px; padding-right: 46px; }
.recherche-agenda .recherche-loupe { top: 15px; }
.recherche-agenda .recherche-effacer { top: 3px; right: 3px; }
.bouton-filtres {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  height: 50px;
  min-width: 50px;
  padding: 0 16px 0 14px;
  border: 1.5px solid var(--ligne);
  border-radius: 16px;
  background: var(--surface);
  color: var(--titre);
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: var(--ombre);
  transition: border-color 0.15s, background-color 0.15s;
}
.bouton-filtres .icone { color: var(--lien); }
.bouton-filtres.actif { border-color: var(--primaire); }
.filtres-nombre {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--nombre-fond);
  color: var(--nombre-texte);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}
@media (hover: hover) { .bouton-filtres:hover { border-color: var(--puce-bord); } }
@media (max-width: 379px) {   /* petit téléphone : le bouton des filtres en pictogramme, son nombre en pastille */
  .bouton-filtres { padding: 0; width: 50px; }
  .bouton-filtres-nom { display: none; }
  .filtres-nombre { position: absolute; top: -7px; right: -7px; box-shadow: 0 0 0 2px var(--fond); }
}
.periodes .puce-filtre { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.periodes .puce-filtre .icone { width: 16px; height: 16px; }
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -4px; }
.puce-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--primaire);
  color: var(--primaire-texte);
  font-size: 0.875rem;
  font-weight: 700;
}
.puce-active .icone { width: 15px; height: 15px; stroke-width: 2.4; opacity: 0.85; }
.effacer-tout { margin: 0 4px; font-size: 0.875rem; }
.agenda-infos { display: flex; flex-direction: column; gap: 8px; }
.agenda-liste { display: flex; flex-direction: column; gap: 28px; }
.agenda-vide .bouton, .bons-vide .bouton { margin-top: 6px; }
.agenda-plus { align-self: center; padding: 0 22px; }
.jour-agenda { display: flex; flex-direction: column; gap: 12px; }
.jour-tete {   /* le jour reste en haut pendant qu'on fait défiler ses sorties */
  position: sticky;
  top: var(--nav-haut, 0px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 0 calc(-1 * max(20px, env(safe-area-inset-left))) -2px;
  padding: 10px max(20px, env(safe-area-inset-left)) 8px;
  background: var(--fond);
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.jour-tete-nom { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--titre); }
.jour-tete-date { font-size: 0.9062rem; font-weight: 700; line-height: 1.3; color: var(--texte-doux); }
.jour-sous-titre, .groupe-jour-titre {
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.groupe-jour { display: flex; flex-direction: column; gap: 8px; }
.voir-autres { align-self: flex-start; margin: -4px 0 -8px 4px; font-size: 0.9062rem; }

/* une sortie de l'agenda : la photo (ou le pictogramme de sa catégorie), l'heure, le titre, le lieu, ce qui compte */
.cartes-sorties { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cartes-sorties > li { display: flex; min-width: 0; }
.carte-sortie {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 104px;
  padding: 12px 14px 12px 12px;
  border: 0;
  border-radius: 18px;
  background: var(--surface);
  color: var(--texte);
  text-align: left;
  box-shadow: var(--ombre);
  transition: transform 0.12s, box-shadow 0.15s;
}
.carte-sortie:active, .ligne-plusieurs:active { transform: scale(0.985); }
.carte-sortie.vedette { box-shadow: inset 0 0 0 1.5px var(--hote-bord), var(--ombre); }
.carte-bon { box-shadow: inset 0 0 0 1.5px var(--bon-bord), var(--ombre); }
@media (hover: hover) {
  .carte-sortie:hover { box-shadow: 0 2px 4px rgb(23 50 77 / 0.08), 0 8px 22px rgb(23 50 77 / 0.1); }
  .carte-bon:hover, .carte-sortie.vedette:hover { box-shadow: inset 0 0 0 1.5px var(--hote-bord), 0 8px 22px rgb(23 50 77 / 0.1); }
}
.carte-media {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  color: var(--c);
  overflow: hidden;
}
.carte-media::before {   /* teinte de la catégorie, sous la photo quand elle arrive */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  opacity: 0.13;
}
.carte-media > .icone { position: relative; width: 34px; height: 34px; stroke-width: 1.6; }
.carte-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: apparition 0.35s ease-out both;
}
.carte-media-petite { width: 48px; height: 48px; border-radius: 12px; }
.carte-media-petite > .icone { width: 24px; height: 24px; stroke-width: 1.8; }
.carte-textes { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.carte-heure { font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--heure-texte); font-variant-numeric: tabular-nums; }
.carte-genre { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.carte-titre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 1.0938rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--titre);
  overflow-wrap: anywhere;
}
.carte-titre.en-capitales { font-family: var(--sans); font-size: 0.9688rem; letter-spacing: 0.02em; line-height: 1.3; }
.fiche-titre.en-capitales { font-family: var(--sans); font-size: 1.1875rem; letter-spacing: 0.02em; line-height: 1.3; }
.carte-lieu { display: flex; align-items: flex-start; gap: 5px; min-width: 0; font-size: 0.8438rem; line-height: 1.35; color: var(--texte-doux); }
.carte-lieu .icone { width: 14px; height: 14px; margin-top: 2px; }
.carte-lieu span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-detail { font-size: 0.8438rem; line-height: 1.35; color: var(--texte-doux); overflow-wrap: anywhere; }
.carte-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.carte-categorie {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--surface-douce);
  background: color-mix(in srgb, var(--c) 13%, var(--surface));
  color: var(--c);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.carte-puces .badge-coeur { padding: 1px 8px; line-height: 1.5; }
.annulee .carte-titre { color: var(--texte-doux); text-decoration: line-through; }
.annulee .carte-media { opacity: 0.5; }
/* sorties sur plusieurs jours (expositions, festivals) : une liste plus discrète sous les séances du jour */
.lignes-plusieurs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--rayon);
  background: var(--surface);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.lignes-plusieurs > li { position: relative; }
.lignes-plusieurs > li + li::before, .rubriques-liste > li + li::before {   /* filet entre deux lignes, après le pictogramme */
  content: "";
  position: absolute;
  top: 0;
  left: 74px;
  right: 0;
  border-top: 1px solid var(--ligne);
}
.ligne-plusieurs {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 70px;
  padding: 10px 14px 10px 12px;
  border: 0;
  background: transparent;
  color: var(--texte);
  text-align: left;
  transition: background-color 0.15s, transform 0.12s;
}
.ligne-plusieurs .carte-titre { font-family: var(--sans); font-size: 0.9688rem; line-height: 1.3; }
.ligne-plusieurs .carte-puces { margin-top: 2px; }
@media (hover: hover) { .ligne-plusieurs:hover, .rubrique-ligne:hover { background: var(--surface-douce); } }
.badge-bon { background: var(--transmis-fond); color: var(--transmis-texte); }
.badge-verifie { background: var(--succes-fond); color: var(--succes-texte); }
.badge-inscription { background: var(--maree-basse-fond); color: var(--maree-basse-texte); }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.badge-annule { background: var(--urgence-fond-doux); color: var(--urgence-texte); }
.badge-reporte, .badge-complet { background: var(--transmis-fond); color: var(--transmis-texte); }
.badge-modifie { background: var(--chauffe-fond); color: var(--chauffe-texte); }
.badge-gratuit { background: var(--succes-fond); color: var(--succes-texte); }
.badge-famille { background: var(--maree-pleine-fond); color: var(--maree-pleine-texte); }
.badge-neutre { background: var(--surface-douce); color: var(--texte-doux); }
.badge-jour { background: var(--bandeau-fond); color: var(--bandeau-texte); }

/* bons plans : rien de vérifié aujourd'hui, dit tel quel, avec des idées gratuites ou durables */
.bons-vide { align-items: stretch; }
.bons-vide .pastille, .bons-vide .vide-titre, .bons-vide .vide-texte { align-self: center; }
.bons-alt-titre { margin-top: 8px; font-size: 0.9375rem; font-weight: 700; color: var(--titre); text-align: left; }
.bons-vide .cartes-sorties, .bons-vide .liste-fiches { align-self: stretch; text-align: left; }
.bons-vide .carte-sortie, .bons-vide .fiche-ligne { background: var(--surface-douce); box-shadow: none; }

/* bons plans « à confirmer » (découverts, une preuve manque) : à part, jamais comptés comme vérifiés */
.badge-confirmer { background: var(--chauffe-fond); color: var(--chauffe-texte); }
.bons-confirmer { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.bons-confirmer-titre { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--titre); }
.bons-confirmer-texte { font-size: 0.8438rem; line-height: 1.45; color: var(--texte-doux); }
.bons-confirmer .cartes-sorties { margin-top: 2px; }

/* une sortie : liseré de sa couleur, l'avantage d'un bon plan en grand, puis quand, où, combien, pour qui */
.sortie { box-shadow: var(--ombre), inset 0 4px 0 var(--c); overflow: hidden; }
.sortie-photo, .sortie-bandeau { margin: -18px -20px 4px; }
.sortie-photo .photo-office { gap: 6px; margin: 0; }
.sortie-photo .photo-office img { max-height: min(46vh, 380px); border-radius: 0; }
.sortie-photo figcaption { padding: 0 20px; }
.sortie-bandeau { position: relative; display: grid; place-items: center; height: 128px; color: var(--c); }
.sortie-bandeau::before { content: ""; position: absolute; inset: 0; background: var(--c); opacity: 0.13; }
.sortie-bandeau .icone { position: relative; width: 58px; height: 58px; stroke-width: 1.4; }
.sortie-bons { display: flex; flex-direction: column; gap: 10px; }
.sortie-bons-titre { font-size: 0.9688rem; font-weight: 700; line-height: 1.3; color: var(--titre); }
.sortie-bons .carte-sortie { background: var(--fond); box-shadow: inset 0 0 0 1.5px var(--bon-bord); }
.sortie-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sortie-avantage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--transmis-fond);
  color: var(--transmis-texte);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.sortie-avantage .icone { width: 22px; height: 22px; margin-top: 1px; }
.sortie-faits { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.fait { display: flex; align-items: flex-start; gap: 10px; }
.fait > .icone { width: 19px; height: 19px; margin-top: 2px; color: var(--c); }
.fait-texte { min-width: 0; font-size: 0.9688rem; line-height: 1.45; overflow-wrap: anywhere; }
.fait-texte a { color: var(--lien); text-decoration: underline; text-underline-offset: 2px; }
.fait-alerte { color: var(--urgence-texte); font-weight: 700; }
.fait-alerte > .icone { color: var(--urgence-texte); }
.fait-doute { color: var(--chauffe-texte); font-weight: 700; }
.fait-doute > .icone { color: var(--chauffe-texte); }

/* bon plan découvert : ce qui a été vérifié, critère par critère, et la phrase recopiée de sa page */
.sortie-preuves { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface-douce); }
.sortie-preuves-titre { font-size: 0.9688rem; font-weight: 700; line-height: 1.3; color: var(--titre); }
.preuves { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.preuve { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9062rem; line-height: 1.4; overflow-wrap: anywhere; }
.preuve > .icone { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.preuve-ok > .icone { color: var(--succes-texte); }
.preuve-manque { color: var(--chauffe-texte); }
.preuve-manque > .icone { color: var(--chauffe-texte); }
.preuves-page-titre { margin-top: 4px; font-size: 0.8125rem; font-weight: 700; color: var(--texte-doux); }
.preuves-citation {
  margin: 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--ligne);
  color: var(--texte);
  font-size: 0.9062rem;
  font-style: italic;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.preuves-citation p + p { margin-top: 6px; }
.sortie-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sortie-actions .bouton { width: 100%; padding: 10px 16px; }
.sortie-actions .bouton span { min-width: 0; overflow-wrap: anywhere; }
.bouton-contour {
  min-height: 48px;
  border: 1.5px solid var(--ligne);
  background: var(--surface);
  color: var(--titre);
  font-size: 1rem;
}
.bouton-contour .icone { color: var(--lien); }
@media (hover: hover) { .bouton-contour:hover { border-color: var(--puce-bord); background: var(--surface-douce); } }

/* avis sur la page (une note d'un toucher) et signalement d'une erreur */
.avis { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 18px 16px; text-align: center; }
.avis-essai {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--chauffe-fond);
  color: var(--chauffe-texte);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.avis-titre { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--titre); }
.etoiles { display: flex; gap: 2px; }
.etoile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bord-champ);
  transition: transform 0.12s, color 0.15s;
}
.etoile .icone { width: 32px; height: 32px; stroke-width: 1.6; }
.etoile.allumee { color: #E3A12F; }
.etoile.allumee .icone { fill: currentColor; }
.etoile:active { transform: scale(0.9); }
@media (hover: hover) { .etoile:hover { transform: scale(1.1); } }
.avis-suite { display: flex; flex-direction: column; align-self: stretch; gap: 10px; text-align: left; }
.avis-suite .puces-filtres { justify-content: center; }
.avis-question { font-size: 0.9375rem; font-weight: 700; color: var(--titre); text-align: center; }
.avis-mot { height: auto; min-height: 76px; padding: 10px 14px; font-size: 1rem; line-height: 1.45; resize: vertical; }
.avis-merci { font-size: 0.9062rem; font-weight: 700; line-height: 1.45; color: var(--succes-texte); }
.avis-merci.avis-erreur { color: var(--urgence-texte); }
.signaler-lien {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--texte-doux);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signaler-lien .icone { width: 17px; height: 17px; }
@media (hover: hover) { .signaler-lien:hover { color: var(--texte); } }
.feuille-titres { min-width: 0; }
.signaler-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.motifs { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.motifs-titre { margin-bottom: 4px; padding: 0; font-size: 0.9375rem; font-weight: 700; color: var(--titre); }
.motif {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--ombre);
  font-size: 0.9375rem;
  line-height: 1.35;
  cursor: pointer;
}
.motif input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primaire); }
.motif:has(input:checked) { box-shadow: inset 0 0 0 2px var(--lien); font-weight: 700; color: var(--titre); }
.signaler-label { font-size: 0.9375rem; font-weight: 700; color: var(--titre); }
.signaler-form .champ { height: auto; min-height: 84px; padding: 10px 14px; font-size: 1rem; line-height: 1.45; resize: vertical; }
.signaler-merci { margin-top: 16px; border-radius: 14px; }

/* ---------- composer ma journée (3.7.0) : entrée, formulaire, journée composée ---------- */
.entree-journee {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--primaire);
  color: var(--primaire-texte);
  text-align: left;
  box-shadow: var(--ombre);
  transition: transform 0.12s, background-color 0.15s;
}
.entree-journee:active { transform: scale(0.98); }
.entree-journee-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.14);
}
.entree-journee-icone .icone { width: 24px; height: 24px; }
.entree-journee-textes { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
.entree-journee-nom { font-size: 1.0312rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.entree-journee-texte { font-size: 0.8438rem; line-height: 1.3; opacity: 0.88; }
.entree-journee .entree-journee-suite { width: 20px; height: 20px; opacity: 0.8; }
@media (hover: hover) { .entree-journee:hover { background: var(--primaire-survol); } }
/* « Mes journées » (3.7.4) : les journées gardées sur ce téléphone, sous l'entrée et en tête du formulaire */
.journees-gardees, .jr-gardees, .journees-gardees-liste { display: flex; flex-direction: column; gap: 8px; }
.journees-gardees-titre { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.entree-journee-gardee { min-height: 56px; background: var(--surface); color: var(--texte); }
.entree-journee-gardee .entree-journee-icone { background: var(--surface-douce); color: var(--lien); }
.entree-journee-gardee .entree-journee-nom { color: var(--titre); }
@media (hover: hover) { .entree-journee-gardee:hover { background: var(--surface-douce); } }

/* formulaire : une colonne, des cibles de 44 px au moins */
.jr-form, .jr-resultat, .jr-panneau { display: flex; flex-direction: column; gap: 14px; }
.jr-intro { font-size: 0.9688rem; line-height: 1.5; color: var(--texte-doux); }
.jr-bloc { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.jr-bloc-titre { font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--titre); }
.jr-label { font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--titre); }
.jr-aide { font-size: 0.8438rem; line-height: 1.4; color: var(--texte-doux); }
.jr-bloc-titre + .jr-aide { margin-top: -6px; }
.jr-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-puces .puce-filtre { min-height: 44px; padding: 0 16px; font-size: 0.9062rem; }
/* choix uniques : de vraies cases radio sous leur étiquette (clavier et lecteurs d'écran compris), habillées en puces */
.jr-choix, .jr-segment { position: relative; display: flex; min-width: 0; }
.jr-choix input, .jr-segment input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.jr-choix span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--ligne);
  border-radius: 999px;
  background: var(--surface);
  color: var(--puce-texte);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.jr-choix input:checked + span { border-color: var(--primaire); background: var(--primaire); color: var(--primaire-texte); }
.jr-choix input:focus-visible + span, .jr-segment input:focus-visible + span { outline: 3px solid var(--anneau); outline-offset: 2px; }
@media (hover: hover) { .jr-choix:hover input:not(:checked) + span { border-color: var(--puce-bord); } }
.jr-segments { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--maree-onglets); }
.jr-segments-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jr-segment { flex: 1 1 0; }
.jr-segment span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 6px 6px;
  border-radius: 10px;
  color: var(--texte-doux);
  font-size: 0.9062rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color 0.15s, color 0.15s;
}
.jr-segment input:checked + span { background: var(--surface); color: var(--titre); font-weight: 700; box-shadow: var(--ombre); }
.jr-reglage { display: flex; flex-direction: column; gap: 8px; }
.jr-reglage + .jr-reglage { padding-top: 12px; border-top: 1px solid var(--ligne); }
.jr-heures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jr-heure-champ { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }
.jr-select { height: 50px; padding: 0 10px; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.jr-ligne-groupe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jr-compteur { display: flex; align-items: center; gap: 4px; }
.jr-pas {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--ligne);
  border-radius: 50%;
  background: var(--surface);
  color: var(--titre);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}
.jr-pas[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.jr-nombre { min-width: 36px; font-size: 1.1875rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; color: var(--titre); }
.jr-enfants-zone { display: flex; flex-direction: column; gap: 8px; }
.jr-enfants { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jr-enfant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9.5em) 44px; align-items: center; gap: 8px; }
.jr-enfant-nom { font-size: 0.9375rem; color: var(--texte); }
.jr-age { height: 46px; padding: 0 8px; font-size: 1rem; }
.jr-retirer {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texte-doux);
}
@media (hover: hover) { .jr-retirer:hover, .jr-pas:hover:not([aria-disabled="true"]) { background: var(--surface-douce); } }
.jr-ajouter { align-self: flex-start; min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.jr-plus { font-size: 1.3125rem; font-weight: 700; line-height: 1; color: var(--lien); }
.jr-local { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; line-height: 1.35; color: var(--texte-doux); }
.jr-local .icone { width: 16px; height: 16px; }
.jr-erreur { padding: 12px 14px; border-radius: 12px; background: var(--urgence-fond-doux); }
.jr-envoi {
  position: sticky;
  bottom: var(--nav-bas, 0px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -20px;
  padding: 18px 20px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--fond) 24px);
}
.jr-composer { width: 100%; }
.jr-composer[aria-disabled="true"] { cursor: progress; }
.bouton .points i { background: currentColor; }
.jr-form[aria-busy="true"] .jr-bloc, .jr-resultat[aria-busy="true"] .jr-panneau { opacity: 0.55; transition: opacity 0.2s; }

/* la journée composée : en-tête, variantes, synthèse */
.jr-garde {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-douce);
  color: var(--texte);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}
.jr-garde .icone { width: 18px; height: 18px; }
/* journée proposée en assouplissant un ou plusieurs choix du voyageur */
.jr-assoupli { border-left: 4px solid var(--accent); }
.jr-assoupli-titre { margin: 0 0 4px; font-weight: 700; }
.jr-assoupli-texte { margin: 0; color: var(--texte); line-height: 1.4; }
.jr-garde-hors-ligne { background: var(--bandeau-fond); color: var(--bandeau-texte); }
/* « Connexion perdue » s'affiche sous l'en-tête : le bandeau de la journée gardée passe dessous */
.ecran:has(.entete .reseau:not([hidden])) .jr-garde { margin-top: 40px; }
.jr-tete {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background-image: linear-gradient(160deg, rgb(240 179 74 / 0.18), transparent 46%);
}
.jr-surtitre { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.jr-surtitre:empty { display: none; }
.jr-res-titre { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--titre); overflow-wrap: anywhere; }
.jr-res-titre:focus { outline: none; }
.jr-res-choix { font-size: 0.875rem; line-height: 1.4; color: var(--texte-doux); }
.jr-meteo { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-douce); }
.jr-ciel { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--soleil); }
.jr-ciel .icone { width: 28px; height: 28px; }
.jr-ciel-pluie, .jr-ciel-averse, .jr-ciel-orage, .jr-ciel-neige { color: var(--pluie); }
.jr-ciel-nuage, .jr-ciel-brouillard, .jr-ciel-lune, .jr-ciel-nuit-nuage { color: var(--texte-doux); }
.jr-meteo-textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-meteo-temps { font-size: 0.9688rem; font-weight: 700; line-height: 1.35; color: var(--titre); }
.jr-meteo-details { font-size: 0.8438rem; line-height: 1.4; color: var(--texte-doux); }
.jr-modifier { align-self: flex-start; min-height: 44px; margin-top: 8px; padding: 0 14px; font-size: 0.9375rem; }
.jr-onglets .onglet-sortie { min-height: 44px; }
.jr-synthese { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.jr-synthese-titre { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--titre); }
.jr-synthese-heures { font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte); }
.jr-chiffres, .jr-raisons, .jr-alertes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jr-chiffre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-douce);
  color: var(--texte);
  font-size: 0.8438rem;
  font-weight: 700;
}
.jr-chiffre .icone { width: 16px; height: 16px; color: var(--lien); }
.jr-chiffre-gratuit { background: var(--succes-fond); color: var(--succes-texte); }
.jr-chiffre-gratuit .icone { color: inherit; }
.jr-raisons li {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--maree-pleine-fond);
  color: var(--maree-pleine-texte);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}
.jr-ouverture { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 2px 9px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; line-height: 1.5; }
.jr-ouverture .icone { width: 14px; height: 14px; color: inherit; }
.jr-ouverture-ouvert { background: var(--succes-fond); color: var(--succes-texte); }
.jr-ouverture-ferme { background: var(--chauffe-fond); color: var(--chauffe-texte); }
.jr-alertes { flex-direction: column; gap: 4px; }
.jr-alertes li { display: flex; align-items: flex-start; gap: 6px; color: var(--chauffe-texte); font-size: 0.8438rem; font-weight: 700; line-height: 1.4; }
.jr-alertes .icone { width: 16px; height: 16px; margin-top: 1px; }

/* frise des étapes : l'heure à gauche, le rail (pointillé à pied, couleur de la ligne en bus), le contenu */
.jr-frise { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.jr-etape { display: grid; grid-template-columns: 54px 28px minmax(0, 1fr); column-gap: 8px; }
.jr-heure {
  padding-top: 5px;
  color: var(--titre);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}
.jr-rail { position: relative; display: flex; justify-content: center; }
.jr-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1.5px);
  width: 3px;
  border-radius: 2px;
  background: var(--ligne);
}
.jr-etape:first-child .jr-rail::before { top: 14px; }
.jr-etape:last-child .jr-rail::before { bottom: auto; height: 14px; }
.jr-point {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--c, var(--lien));
  box-shadow: 0 0 0 1.5px var(--ligne), 0 0 0 4px var(--fond);
}
.jr-point .icone { width: 15px; height: 15px; }
.jr-point:empty { width: 12px; height: 12px; margin-top: 8px; background: var(--bord-champ); box-shadow: 0 0 0 3px var(--fond); }
.jr-etape-marche .jr-rail::before { left: calc(50% - 1.5px); width: 0; border-left: 3px dotted var(--bord-champ); background: none; }
.jr-etape-bus .jr-rail::before { left: calc(50% - 2.5px); width: 5px; background: var(--bus-fond, var(--lien)); }
/* on quitte le logement à pied (jusqu'à l'arrêt, en bus) : le rail du départ est déjà en pointillé */
.jr-etape-depart:has(+ .jr-etape-marche, + .jr-etape-bus) .jr-rail::before {
  left: calc(50% - 1.5px);
  width: 0;
  border-left: 3px dotted var(--bord-champ);
  background: none;
}
.jr-etape-bus .jr-point { background: var(--bus-fond, var(--lien)); color: var(--bus-texte, var(--primaire-texte)); box-shadow: 0 0 0 4px var(--fond); }
.jr-etape-depart .jr-point, .jr-etape-retour .jr-point { background: var(--primaire); color: var(--primaire-texte); box-shadow: 0 0 0 4px var(--fond); }
.jr-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 4px 0 20px; }
.jr-etape:last-child .jr-corps { padding-bottom: 4px; }
.jr-etape-titre { font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--titre); }
.jr-trajet { display: flex; align-items: center; gap: 8px; font-size: 0.9062rem; font-weight: 700; line-height: 1.35; color: var(--texte); }
.jr-trajet .icone { width: 18px; height: 18px; color: var(--texte-doux); }
.jr-trajet-note { font-size: 0.8438rem; line-height: 1.4; color: var(--texte-doux); }
/* en voiture ou à vélo (3.7.4) : un rail plein, discret */
.jr-etape-voiture .jr-rail::before, .jr-etape-velo .jr-rail::before { left: calc(50% - 1.5px); width: 3px; background: var(--bord-champ); }
/* « Coup de cœur de votre hôte » (3.7.4) : fiche du guide, liste des fiches, étape de la journée */
.badge-coeur, .fiche-ligne-coeur {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--transmis-fond);
  color: var(--transmis-texte);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}
.badge-coeur .icone, .fiche-ligne-coeur .icone { width: 15px; height: 15px; fill: currentColor; }
.badge-coeur[hidden] { display: none; }
.fiche .badge-coeur { margin-bottom: 8px; }
.fiche-ligne-coeur { margin-top: 4px; padding: 1px 8px; }
.jr-carte {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -6px 0;
  color: var(--lien);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.jr-carte .icone { width: 16px; height: 16px; }

/* un lieu (visite ou restaurant) : liseré de la couleur de la rubrique */
.jr-lieu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-left: 4px solid var(--c, var(--lien));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--ombre);
}
.jr-lieu .jr-surtitre + .jr-lieu-nom { margin-top: -6px; }
.jr-lieu-nom { font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--titre); overflow-wrap: anywhere; }
.jr-lieu-nom .lien-fiche { color: var(--titre); text-decoration-color: var(--c, var(--lien)); text-decoration-thickness: 2px; }
.jr-lieu-sous { margin-top: -6px; font-size: 0.875rem; color: var(--texte-doux); }
.jr-activite { margin-top: -6px; font-size: 0.9062rem; font-weight: 700; color: var(--c, var(--lien)); }
.jr-pause-retirer { align-self: flex-start; }
.jr-lieu-heures { font-size: 0.9062rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte); }
.jr-evenement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: rgb(240 179 74 / 0.2);
  color: var(--titre);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
button.jr-evenement { min-height: 44px; text-decoration: underline; text-underline-offset: 2px; }
.jr-evenement .icone { width: 16px; height: 16px; margin-top: 2px; color: var(--soleil); }
.jr-champs { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--ligne); list-style: none; }
.jr-champ { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.jr-champ-tete {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texte-doux);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.jr-champ-tete .icone { width: 15px; height: 15px; color: var(--c, var(--lien)); }
.jr-champ-texte { font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.jr-statut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px 1px 7px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
}
.jr-statut .icone { width: 13px; height: 13px; }
.jr-statut-verifie { background: var(--succes-fond); color: var(--succes-texte); }
.jr-statut-fiche, .jr-statut-estime { background: var(--surface-douce); color: var(--texte-doux); }
.jr-statut-estime span { font-style: italic; }
.jr-statut-a_confirmer { background: var(--chauffe-fond); color: var(--chauffe-texte); }
.jr-adresse { display: flex; align-items: flex-start; gap: 6px; font-size: 0.875rem; line-height: 1.4; color: var(--texte-doux); overflow-wrap: anywhere; }
.jr-adresse .icone { width: 16px; height: 16px; margin-top: 2px; }
.jr-site { align-self: flex-start; min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }
.jr-avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 10px; border-top: 1px solid var(--ligne); }
.jr-avis-bouton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  padding: 6px 4px;
  border: 1.5px solid var(--ligne);
  border-radius: 12px;
  background: var(--surface);
  color: var(--texte);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
.jr-avis-bouton:active { transform: scale(0.97); }
.jr-avis-bouton .icone { width: 18px; height: 18px; color: var(--texte-doux); }
.jr-avis-aime[aria-pressed="true"] { border-color: var(--soleil); background: rgb(240 179 74 / 0.2); color: var(--titre); }
.jr-avis-aime[aria-pressed="true"] .icone { color: var(--soleil); fill: currentColor; }
.jr-avis-bouton[aria-disabled="true"], .jr-tr-bouton[aria-disabled="true"], #jr-autre[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
@media (hover: hover) { .jr-avis-bouton:hover:not([aria-disabled="true"]) { border-color: var(--puce-bord); } }

/* un trajet en bus : chaque bus avec sa pastille, ses arrêts, l'horaire théorique et, à part, le temps réel */
.jr-bus { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--ombre); }
.jr-bus .jr-trajet .icone { color: var(--lien); }
.jr-troncons { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.jr-troncon-marche { display: flex; align-items: flex-start; gap: 8px; color: var(--texte-doux); font-size: 0.875rem; line-height: 1.4; }
.jr-troncon-marche > .icone { width: 16px; height: 16px; margin-top: 2px; }
.jr-troncon-textes { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jr-troncon-bus { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-douce); }
.jr-bus-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jr-ligne {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 28px;
  padding: 2px 9px;
  border-radius: 8px;
  background: var(--bus-fond, var(--titre));
  color: var(--bus-texte, var(--surface));
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.jr-direction { min-width: 0; font-size: 0.9062rem; font-weight: 700; line-height: 1.3; color: var(--titre); overflow-wrap: anywhere; }
.jr-arrets { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 16px; }
.jr-arrets::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--bus-fond, var(--lien));
}
.jr-arret { position: relative; display: flex; align-items: baseline; gap: 8px; font-size: 0.9062rem; line-height: 1.4; }
.jr-arret::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -15px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--bus-fond, var(--lien));
  border-radius: 50%;
  background: var(--surface);
}
.jr-arret time { flex: none; min-width: 50px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--titre); }
.jr-arret span { min-width: 0; overflow-wrap: anywhere; }
.jr-arrets-n { padding-left: 58px; font-size: 0.8125rem; line-height: 1.5; color: var(--texte-doux); }
.jr-theorique { display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--texte-doux); }
.jr-theorique .icone { width: 14px; height: 14px; }
.jr-tr { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 2px; }
.jr-tr-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}
.jr-tr-info .icone { width: 16px; height: 16px; margin-top: 1px; }
.jr-tr-textes { display: flex; flex-direction: column; gap: 2px; }
.jr-tr-textes span { font-weight: 400; }
.jr-tr-direct { background: var(--succes-fond); color: var(--succes-texte); }
.jr-tr-retard { background: var(--chauffe-fond); color: var(--chauffe-texte); }
.jr-tr-supprime { align-self: stretch; background: var(--urgence-fond-doux); color: var(--urgence-texte); }
.jr-tr-neutre { background: var(--surface); color: var(--texte-doux); font-weight: 400; }
.jr-tr-point { flex: none; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: currentColor; animation: direct 1.6s ease-in-out infinite; }
.jr-tr-le { font-size: 0.8125rem; color: var(--texte-doux); }
.jr-tr-bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--puce-bord);
  border-radius: 999px;
  background: var(--surface);
  color: var(--lien);
  font-size: 0.875rem;
  font-weight: 700;
}
.jr-tr-bouton .icone { width: 16px; height: 16px; }

/* actions, lieux retirés, sources, message bref */
.jr-actions, .jr-actions-boutons, .jr-partage { display: flex; flex-direction: column; gap: 10px; }
.jr-actions-boutons .bouton { width: 100%; }
.jr-actions .jr-agenda { align-self: center; }
.jr-partage-texte { height: auto; min-height: 160px; padding: 10px 14px; font-size: 0.9375rem; line-height: 1.45; resize: vertical; }
.jr-retires { overflow: hidden; }
.jr-retires-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  color: var(--titre);
  font-size: 0.9375rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.jr-retires-titre::-webkit-details-marker { display: none; }
.jr-retires-titre::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.jr-retires[open] .jr-retires-titre::after { margin-top: 4px; transform: rotate(-135deg); }
.jr-retires-liste { display: flex; flex-direction: column; margin: 0; padding: 0 16px 8px; list-style: none; }
.jr-retire { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ligne); }
.jr-retire-textes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 0.9375rem; line-height: 1.35; }
.jr-retire-nom { overflow-wrap: anywhere; }
.jr-retire-annuler { flex: none; min-height: 44px; padding: 0 14px; font-size: 0.875rem; }
.jr-sources { display: flex; flex-direction: column; gap: 4px; padding: 2px 8px 0; text-align: center; }
.jr-source { font-size: 0.8125rem; line-height: 1.4; color: var(--texte-doux); }
.jr-attributions { font-size: 0.8125rem; line-height: 1.45; color: var(--texte-doux); }
.jr-toast {
  position: fixed;
  bottom: calc(18px + var(--nav-bas, env(safe-area-inset-bottom)));
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--titre);
  color: var(--fond);
  font-size: 0.9062rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  box-shadow: var(--ombre-menu);
  transform: translateX(-50%);
  animation: toast 0.25s ease-out both;
}
@keyframes toast {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes direct {
  0%, 100% { opacity: 1; transform: none; }
  50% { opacity: 0.35; transform: scale(0.75); }
}
@media (prefers-color-scheme: dark) {
  .entree-journee-icone { background: rgb(14 26 38 / 0.12); }
  .jr-ligne { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
  .jr-evenement { background: rgb(240 179 74 / 0.14); }
}
@media (min-width: 720px) {
  .jr-etape { grid-template-columns: 64px 28px minmax(0, 1fr); }
  .jr-actions-boutons { flex-direction: row; }
  .jr-actions-boutons .bouton { flex: 1 1 0; width: auto; }
}

/* ---------- grands écrans : colonne centrée, en-tête pleine largeur ---------- */
@media (min-width: 720px) {
  .entete-maison { font-size: 2.5rem; }
  .entete-grande .entete-int { padding-top: calc(env(safe-area-inset-top) + 28px); padding-bottom: 12px; }
  .entete-grande .mer { height: 44px; }
  .phare { transform: scale(1.15); transform-origin: 50% 100%; }
  .contenu { padding-top: 36px; }
  .bulle { font-size: 1rem; }
  .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-colonne { padding-top: 24px; }
  .sortie-actions { flex-direction: row; flex-wrap: wrap; }
  .sortie-actions .bouton { flex: 1 1 220px; width: auto; }
}

/* ---------- petits téléphones, tablettes (3.9.0) : vignettes plus petites ; pages du séjour plus larges ---------- */
@media (max-width: 379px) {
  .carte-media { width: 64px; height: 64px; border-radius: 12px; }
  .carte-media > .icone { width: 28px; height: 28px; }
  .carte-sortie { gap: 12px; padding-right: 12px; }
}
@media (min-width: 720px) {
  #ecran-guide, .ecran-racine { --colonne: 680px; }
  .cartes-sorties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .periodes, .aujourdhui .puces-filtres { flex-wrap: wrap; margin: 0; padding: 2px 0; overflow: visible; }
}

/* ---------- grands écrans (3.9.0) : le menu du séjour en haut, des pages plus larges en grilles ---------- */
@media (min-width: 900px) {
  body.avec-nav { --nav-bas: 0px; --nav-haut: 64px; padding-bottom: 0; }
  .nav-sejour {
    position: sticky;
    top: 0;
    padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
    border-top: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    background: var(--entete-fond);
    color: var(--entete-texte);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --anneau: var(--anneau-entete);
  }
  .nav-int { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 940px; min-height: 64px; }
  .nav-marque {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .nav-marque::before {   /* la lanterne du phare */
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #F0B34A;
    box-shadow: 0 0 0 4px rgb(240 179 74 / 0.2), 0 0 14px rgb(240 179 74 / 0.6);
  }
  .nav-onglets { gap: 4px; }
  .nav-onglet {
    flex: none;
    flex-direction: row;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    color: var(--entete-doux);
    font-size: 0.9375rem;
    transition: background-color 0.15s, color 0.15s;
  }
  .nav-picto, .nav-onglet[aria-current="page"] .nav-picto { width: auto; height: auto; background: none; }
  .nav-picto .icone { width: 20px; height: 20px; }
  .nav-onglet[aria-current="page"] { background: rgb(255 255 255 / 0.12); color: #FFFFFF; }
  .nav-onglet[aria-current="page"] .nav-picto { color: #F0B34A; }
  .nav-onglet:active .nav-picto { transform: none; }
  #ecran-guide, .ecran-racine { --colonne: 940px; }
  .entete-discussion .infos-entete, .entete-discussion .maison { max-width: 560px; }
  body.avec-nav .entete-lieu-discussion { display: none; }   /* le nom du logement est dans le menu */
  .ecran-racine .relais { grid-template-columns: auto minmax(0, 1fr) auto; padding: 20px 24px; }
  .ecran-racine .relais-bouton { grid-column: auto; padding: 0 26px; }
  .choix-liste { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
  .choix-impair .choix-liste > li:last-child { grid-column: auto; }
  .choix-impair .choix-liste > li:last-child .choix-carte { flex-direction: column; align-items: flex-start; min-height: 176px; padding-right: 14px; }
  .choix-impair .choix-liste > li:last-child .choix-detail { padding-top: 6px; }
  .choix-impair .choix-liste > li:last-child .choix-suite { top: 18px; }
  .choix-carte { min-height: 200px; padding: 20px 18px 18px; }
  #rubriques { display: block; columns: 2; column-gap: 24px; }   /* deux colonnes, chaque groupe d'un bloc */
  .groupe-rubriques { break-inside: avoid; margin-bottom: 26px; }
  #decouvrir { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; align-content: start; gap: 20px 24px; }
  #decouvrir:has(> .aujourdhui[hidden]) { grid-template-columns: minmax(0, 1fr); }
  #decouvrir > .composer, #decouvrir > .journees-gardees, #decouvrir > .vide { grid-column: 1 / -1; }
  .decouvrir-cote { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  #decouvrir > .composer { grid-template-columns: auto minmax(0, 1fr) auto; padding: 24px; }
  #decouvrir > .composer .composer-bouton { grid-column: auto; width: auto; padding: 0 26px; }
  .cartes-sorties { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
  .lignes-plusieurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; background: none; box-shadow: none; overflow: visible; }
  .lignes-plusieurs > li + li::before { display: none; }
  .ligne-plusieurs { height: 100%; border-radius: 14px; background: var(--surface); box-shadow: var(--ombre); }
  .agenda-outils, .periodes, .filtres-actifs, .agenda-infos { max-width: 720px; }
  .contact-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; align-content: start; gap: 20px 24px; }
  .contact-urgence { grid-column: 1 / -1; }
  .contact-urgence .bouton { align-self: flex-start; padding: 0 26px; }
  .feuille-filtres { max-width: 560px; }
}
@media (min-width: 900px) and (hover: hover) {
  .nav-onglet:hover:not([aria-current="page"]) { background: rgb(255 255 255 / 0.07); color: #FFFFFF; }
}

/* ---------- arrivée des écrans : chaque bloc monte en fondu, l'un après l'autre (une fois, à l'affichage) ---------- */
#ecran-acces > *, #ecran-info > *, .atouts li, .fil-colonne > .message, .suggestion {
  animation: monte 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
#ecran-acces > :nth-child(2), #ecran-info > :nth-child(2) { animation-delay: 0.07s; }
#ecran-acces > :nth-child(3), #ecran-info > :nth-child(3) { animation-delay: 0.14s; }
#ecran-acces > :nth-child(4) { animation-delay: 0.21s; }
#ecran-acces > :nth-child(n+5) { animation-delay: 0.3s; }
.atouts li:nth-child(1) { animation-delay: 0.3s; }
.atouts li:nth-child(2) { animation-delay: 0.38s; }
.atouts li:nth-child(3) { animation-delay: 0.46s; }
.atouts .icone { animation: pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: inherit; }
.suggestion:nth-child(1) { animation-delay: 0.18s; }
.suggestion:nth-child(2) { animation-delay: 0.24s; }
.suggestion:nth-child(3) { animation-delay: 0.3s; }
.suggestion:nth-child(4) { animation-delay: 0.36s; }
/* guide : la recherche, les rubriques (tuile après tuile), l'assistant ; les pages de rubrique et de fiche.
   Au retour sur un écran déjà vu (bouton retour), rien ne rejoue (classe « vu », posée par voyageurs.js). */
.guide-colonne > *, .contenu-page > *, .tuile, .liste-fiches > li {
  animation: monte 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.guide-colonne > :nth-child(2) { animation-delay: 0.04s; }
.guide-colonne > :nth-child(3) { animation-delay: 0.1s; }
.guide-colonne > :nth-child(n+4) { animation-delay: 0.42s; }
.tuile { animation-delay: calc(0.12s + var(--i, 0) * 0.045s); }
.tuile .tuile-icone { animation: pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(0.2s + var(--i, 0) * 0.045s); }
.contenu-page > :nth-child(2) { animation-delay: 0.06s; }
.contenu-page > :nth-child(3) { animation-delay: 0.12s; }
.contenu-page > :nth-child(n+4) { animation-delay: 0.18s; }
.liste-fiches > li:nth-child(2) { animation-delay: 0.1s; }
.liste-fiches > li:nth-child(3) { animation-delay: 0.14s; }
.liste-fiches > li:nth-child(4) { animation-delay: 0.18s; }
.liste-fiches > li:nth-child(n+5) { animation-delay: 0.22s; }
.ecran.vu .guide-colonne > *, .ecran.vu .contenu-page > *, .ecran.vu .tuile, .ecran.vu .tuile .tuile-icone,
.ecran.vu .liste-fiches > li { animation: none; }
/* réponse de l'hôte arrivée, relais qui brille : même au retour sur le guide */
.guide-colonne > .nouvelle-reponse, .ecran.vu .guide-colonne > .nouvelle-reponse {
  animation: descente 0.3s ease-out both, eclat 4s ease-out 0.3s both;
}
.guide-colonne > .relais-nouveau, .ecran.vu .guide-colonne > .relais-nouveau { animation: eclat 4s ease-out both; }
/* nom refusé : le champ hoche la tête */
.champ[aria-invalid="true"] { animation: refus 0.4s ease-in-out; }

/* ---------- animations discrètes ---------- */
@keyframes apparition {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes descente {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes rebond {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes monte {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}
@keyframes refus {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
/* un tour du faisceau : longueur vue de côté (cosinus de l'angle), plus pâle derrière la tour */
@keyframes faisceau {
  0%, 100% { transform: scaleX(1); opacity: 0.9; }
  6.25% { transform: scaleX(0.92); opacity: 0.92; }
  12.5% { transform: scaleX(0.71); opacity: 0.8; }
  18.75% { transform: scaleX(0.38); opacity: 0.45; }
  25% { transform: scaleX(0.03); opacity: 0.08; }
  31.25% { transform: scaleX(-0.38); opacity: 0.26; }
  37.5% { transform: scaleX(-0.71); opacity: 0.34; }
  43.75% { transform: scaleX(-0.92); opacity: 0.34; }
  50% { transform: scaleX(-1); opacity: 0.3; }
  56.25% { transform: scaleX(-0.92); opacity: 0.2; }
  62.5% { transform: scaleX(-0.71); opacity: 0.1; }
  68.75% { transform: scaleX(-0.38); opacity: 0; }
  75% { transform: scaleX(-0.03); opacity: 0; }
  81.25% { transform: scaleX(0.38); opacity: 0.14; }
  87.5% { transform: scaleX(0.71); opacity: 0.5; }
  93.75% { transform: scaleX(0.92); opacity: 0.8; }
}
/* la lanterne brille quand le faisceau passe vers nous (même durée que lui) */
@keyframes eclat-phare {
  0%, 15%, 37%, 100% { opacity: 0; }
  25% { opacity: 1; }
}
@keyframes houle { to { transform: translateX(-50%); } }
@keyframes reflet { to { transform: translateX(100%); } }
@keyframes pouls {
  0%, 100% { transform: none; }
  50% { transform: scale(1.12); }
}
@keyframes eclat {
  0% { box-shadow: 0 0 0 0 var(--eclat); }
  15% { box-shadow: 0 0 0 6px var(--eclat); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .points i { animation: none !important; opacity: 0.7; }
  .points i:nth-child(2) { opacity: 0.5; }
  .points i:nth-child(3) { opacity: 0.3; }
  .message-hote.nouveau .bulle { animation: none !important; box-shadow: 0 0 0 3px var(--eclat); }
  .rubrique-fantome::after { animation: none !important; transform: none; opacity: 0.5; }
}

/* ---------- 4.2.0, compagnon du séjour : aujourd'hui sur l'accueil, Mes envies, bande des jours, outils d'une sortie,
   envies prêtes et « autour de » du composeur, ajout à l'écran d'accueil ---------- */
.icone-pleine, .icone .plein { fill: currentColor; stroke: none; }

/* aujourd'hui : jour n sur N, arrivée ou départ, ma journée, les sorties du jour */
.jour-accueil { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 8px; }
.jour-accueil-tete { display: flex; flex-direction: column; gap: 2px; }
.jour-accueil-titre { font-family: var(--serif); font-size: 1.3125rem; font-weight: 700; line-height: 1.2; color: var(--titre); }
.jour-accueil-date { font-size: 0.875rem; line-height: 1.35; color: var(--texte-doux); }
.jour-accueil-date:empty { display: none; }
.jour-barre { height: 6px; border-radius: 999px; background: var(--surface-douce); overflow: hidden; }
.jour-barre-fait {
  display: block;
  width: var(--avancement, 0%);
  min-width: 6px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #F0B34A, var(--accent));
  transition: width 0.4s ease-out;
}
.jour-lignes { display: flex; flex-direction: column; margin: 4px -4px 0; padding: 0; list-style: none; }
.jour-lignes > li + li { border-top: 1px solid var(--ligne); }
.jour-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--texte);
  text-align: left;
  transition: background-color 0.15s;
}
.jour-ligne:active { background: var(--surface-douce); }
@media (hover: hover) { .jour-ligne:hover { background: var(--surface-douce); } }
.jour-ligne-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--surface-douce);
  color: var(--lien);
}
.jour-ligne-icone .icone { width: 20px; height: 20px; stroke-width: 1.9; }
.jour-ligne-depart .jour-ligne-icone { background: var(--transmis-fond); color: var(--transmis-texte); }
.jour-ligne-textes { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.jour-ligne-nom { font-size: 0.9688rem; font-weight: 700; line-height: 1.3; color: var(--titre); overflow-wrap: anywhere; }
.jour-ligne-detail { font-size: 0.8438rem; line-height: 1.35; color: var(--texte-doux); overflow-wrap: anywhere; }
.jour-ligne-tout .jour-ligne-nom { color: var(--lien); }
.jour-ligne-suite { width: 18px; height: 18px; color: var(--texte-doux); }

/* ajouter à l'écran d'accueil */
.installer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 16px; }
.installer-picto {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--primaire);
  color: var(--primaire-texte);
}
.installer-picto .icone { width: 24px; height: 24px; stroke-width: 1.8; }
.installer-textes { display: flex; flex: 1 1 200px; flex-direction: column; gap: 4px; min-width: 0; }
.installer-titre { font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--titre); }
.installer-texte, .installer-comment { font-size: 0.9062rem; line-height: 1.45; color: var(--texte-doux); }
.installer-comment { padding: 10px 12px; border-radius: 12px; background: var(--surface-douce); color: var(--texte); }
.installer-actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
.installer-actions .bouton { flex: 1 1 auto; min-height: 46px; font-size: 1rem; }

/* Mes envies : le cœur se remplit ; la section dans Découvrir ; le badge sur une carte gardée */
.bouton-envie {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 1.5px solid var(--ligne);
  border-radius: 999px;
  background: var(--surface);
  color: var(--titre);
  font-size: 0.9062rem;
  font-weight: 700;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.bouton-envie .icone { width: 18px; height: 18px; color: var(--accent); }
.bouton-envie[aria-pressed="true"] { border-color: var(--hote-bord); background: var(--hote-fond); color: var(--transmis-texte); }
@media (hover: hover) { .bouton-envie:hover { border-color: var(--hote-bord); } }
.bouton-envie:active { transform: scale(0.97); }
.fiche-envie { display: flex; margin-top: -4px; }
.fiche-ecouter { flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }   /* 4.3.2 : « Écouter » sur la fiche d'une histoire */
.fam-lecture-echec { width: 100%; margin: 0; }
.envies { display: flex; flex-direction: column; gap: 12px; }
.envies-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.envies-titre { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--titre); }
.envies-titre .icone { width: 20px; height: 20px; color: var(--accent); }
.envies-compte { flex: none; font-size: 0.875rem; font-weight: 700; color: var(--texte-doux); }
.envies-vide { padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--ombre); font-size: 0.9375rem; line-height: 1.45; color: var(--texte-doux); }
.envies-composer { align-self: flex-start; }
.envies-aide { font-size: 0.8125rem; line-height: 1.4; color: var(--texte-doux); }
.badge-envie { gap: 4px; background: var(--hote-fond); color: var(--transmis-texte); }
.badge-envie .icone { width: 12px; height: 12px; }
.puce-envies .icone { color: var(--accent); }
.puce-envies[aria-pressed="true"] .icone { color: inherit; }

/* une sortie : garder, composer autour, ajouter au calendrier, partager (des pastilles sur une ligne) */
.sortie-outils { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px 6px; }
.sortie-outils .bouton, .sortie-outils .bouton-envie {
  flex: 0 1 auto;
  width: auto;
  min-height: 42px;
  padding: 0 13px 0 11px;
  border-radius: 999px;
  font-size: 0.875rem;
}
.sortie-outils .bouton .icone { width: 17px; height: 17px; }

/* la bande des jours de l'agenda : nom court, numéro, nombre de sorties ; aujourd'hui marqué */
.jours-bande { display: flex; gap: 8px; }
.jour-puce {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 8px 10px 7px;
  border: 1.5px solid var(--ligne);
  border-radius: 14px;
  background: var(--surface);
  color: var(--texte);
  transition: border-color 0.15s, background-color 0.15s;
}
.jour-puce:active { transform: scale(0.97); }
@media (hover: hover) { .jour-puce:hover { border-color: var(--puce-bord); } }
.jour-puce-nom { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); white-space: nowrap; }
.jour-puce-num { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.1; color: var(--titre); font-variant-numeric: tabular-nums; }
.jour-puce-n { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-douce); color: var(--lien); font-size: 0.8125rem; font-weight: 700; line-height: 1.6; text-align: center; }
.jour-puce-auj { border-color: var(--primaire); }
.jour-puce-auj .jour-puce-nom { color: var(--nav-actif); }
.jour-puce-auj .jour-puce-n { background: var(--primaire); color: var(--primaire-texte); }

/* composer ma journée : envies prêtes et « autour de » */
.jr-souhaits { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jr-souhaits .puce-active { max-width: 100%; }
.jr-souhaits .puce-active > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puce-prete { border-color: var(--puce-bord); background: var(--puce-fond); }

@media (min-width: 720px) {
  .installer { flex-wrap: nowrap; align-items: center; }
  .installer-actions { flex: none; }
  .jours-bande { flex-wrap: wrap; margin: 0; padding: 2px 0; overflow: visible; }
}

/* ---------- impression (3.7.0, A12) : une fiche ou les numéros d'urgence lisibles, sans décor ni commandes ---------- */
@media print {
  html, body { background: #fff; color: #000; }
  .ciel, .mer, .reseau, .barre-saisie, .bouton, .rond-retour, .rond-accueil, .rond-urgence, .rond-appel, .menu,
  .langues, .recherche, .signaler-lien, .relais, .puce-rubrique, .onglets-sorties, .puces-filtres, .nav-sejour,
  .agenda-outils, .filtres-actifs, .agenda-plus, .composer, .rubrique-ligne-suite, .carte-media, .sortie-bandeau,
  .feuille-maree, .feuille-meteo, .feuille-mer, .feuille-maison, .feuille-signaler, .feuille-filtres, .ressort, .prevenir,
  .nouvelle-reponse, .sortie-outils, .installer, .jours-bande, .bouton-envie, .fiche-envie,
  .maison, .entete-accent { display: none !important; }
  .entete, .entete-int, .titre-ecran, .entete-lieu, .entete-maison { background: none; color: #000; box-shadow: none; }
  body, .ecran, .ecran-guide, .ecran-page, .ecran-urgence, .ecran-discussion { min-height: 0; height: auto; overflow: visible; }
  .contenu, .guide-colonne { max-width: none; padding: 0; }
  body.avec-nav { padding-bottom: 0; }
  .jour-tete { position: static; background: none; }
  .carte-sortie, .ligne-plusieurs, .rubrique-ligne, .choix-carte { box-shadow: none; break-inside: avoid; }
  .carte, .fiche, .numero, .message { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .fiche-texte, .fiche-texte a, .fiche-titre, .numero, .numero-chiffre, .numero-libelle, .consigne-texte, .contact,
  .contact-nom { color: #000; background: none; }
  .numero-principal { background: none; }
  .numero-principal .numero-chiffre, .numero-principal .numero-libelle { color: #000; }
}

/* ---------- tablette du logement (3.7.0, A46) : grands caractères (tout est en rem), pas de « Quitter » ; hors séjour
   (veille) ni assistant, ni barre de saisie, ni état du logement ---------- */
html:has(body[data-tablette]) { font-size: 125%; }
body[data-tablette] [data-action="quitter"] { display: none !important; }
body[data-tablette="veille"] [data-action="discussion"], body[data-tablette="veille"] .relais,
body[data-tablette="veille"] #guide-nouvelle, body[data-tablette="veille"] #maison,
body[data-tablette="veille"] .barre-saisie { display: none !important; }

/* les belles heures (4.3.0) : sous les heures de la feuille Météo ; une ligne par moment, pictogramme soleil ou lune */
.belles-heures { margin: 14px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--succes-fond); color: var(--succes-texte); }
.belles-heures-titre { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 700; }
.belles-heures-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.belles-heures-ligne { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; line-height: 1.4; }
.belles-heures-ligne .icone { width: 18px; height: 18px; flex: none; margin-top: 1px; color: inherit; }
.maree-grande { font-weight: 700; }

/* la plage en direct et le bon moment (4.3.0) : dans la feuille Mer, un jour après l'autre */
.plage-bloc { margin: 14px 0 4px; }
.plage-titre { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 700; }
.plage-jour-titre { margin: 10px 0 4px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-second, inherit); }
.plage-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.plage-creneau { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border-radius: 12px; background: var(--maree-pleine-fond); color: var(--maree-pleine-texte); font-size: 0.875rem; line-height: 1.4; }
.plage-creneau .icone { width: 20px; height: 20px; color: inherit; margin-top: 1px; }
.plage-creneau.ideal { background: var(--succes-fond); color: var(--succes-texte); }
.plage-creneau-heures { font-weight: 700; }
.plage-creneau-detail { display: block; font-size: 0.8125rem; opacity: 0.9; }
.plage-ideal { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--succes-texte); color: var(--succes-fond); font-size: 0.8125rem; font-weight: 700; }
.plage-vide { margin: 4px 0; font-size: 0.875rem; }
.plage-liens { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.875rem; }

/* en famille (4.3.0) : quatre cartes (la carte « je suis perdu » est retirée en 4.3.2) */
.famille .composer-picto { background: var(--succes-fond); color: var(--succes-texte); }
.fam-section { display: grid; gap: 10px; }
.fam-section-titre { margin: 0; font-size: 1.125rem; font-weight: 700; }
.fam-sous-titre { margin: 6px 0 0; font-size: 0.9375rem; font-weight: 700; }
.fam-section-texte, .fam-note { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.fam-note { opacity: 0.8; }
.fam-liste, .fam-puces, .fam-numeros, .fam-pharmacies { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fam-puces li { position: relative; padding-left: 18px; font-size: 0.875rem; line-height: 1.45; }
.fam-puces li::before { content: "•"; position: absolute; left: 4px; color: var(--lien); font-weight: 700; }
.fam-objet, .fam-numero, .fam-pharmacie, .fam-histoire { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--maree-pleine-fond); color: var(--maree-pleine-texte); }
.fam-objet-textes, .fam-pharmacie-textes, .fam-histoire-textes { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; }
.fam-objet-quoi, .fam-pharmacie-nom, .fam-histoire-titre { font-weight: 700; }
.fam-objet-ou, .fam-pharmacie-detail { font-size: 0.8125rem; opacity: 0.9; }
.fam-numero { justify-content: space-between; }
.fam-numero-nom { flex: 1 1 160px; font-size: 0.875rem; }
.fam-numero a { font-weight: 700; font-size: 1.0625rem; text-decoration: none; color: inherit; }
.fam-pharmacie .jr-ouverture { margin: 0; }
.fam-pharmacie-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }

/* ---------- écran de veille de la tablette (4.3.0) : par-dessus la page, sombre la nuit ; un toucher le ferme ---------- */
.veille { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: 40px 36px 28px; background: linear-gradient(160deg, #163A52, #0E1A26 70%); color: #E6EDF3; cursor: pointer; overflow: hidden; }
.veille[hidden] { display: none; }
.veille-nuit { background: #050A10; color: #A9B4BE; }
.veille-haut { text-align: center; }
.veille-heure { margin: 0; font-size: 6rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.veille-date { margin: 8px 0 0; font-size: 1.5rem; opacity: 0.85; }
.veille-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-content: start; }
.veille-tuile { margin: 0; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); display: grid; gap: 8px; align-content: start; }
.veille-nuit .veille-tuile { background: rgba(255, 255, 255, 0.04); }
.veille-tuile-large { grid-column: 1 / -1; }
.veille-tuile-titre { margin: 0; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.veille-grand { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.veille-detail { margin: 0; font-size: 1rem; opacity: 0.8; }
.veille-meteo-maintenant { display: flex; align-items: center; gap: 14px; }
.veille-picto { width: 64px; height: 64px; }
.veille-heures { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 14px; }
.veille-heure-meteo { display: grid; justify-items: center; gap: 2px; font-size: 0.9375rem; }
.veille-heure-meteo .icone { width: 28px; height: 28px; }
.veille-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.veille-bus-ligne { display: flex; align-items: center; gap: 12px; font-size: 1.125rem; }
.veille-bus-num { min-width: 44px; padding: 4px 10px; border-radius: 10px; text-align: center; font-weight: 700; background: var(--ligne-fond, rgba(255, 255, 255, 0.2)); color: var(--ligne-texte, #fff); }
.veille-bus-textes { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veille-bus-heure { font-weight: 700; font-variant-numeric: tabular-nums; }
.veille-bus-annule { opacity: 0.6; text-decoration: line-through; }
.veille-sortie { display: grid; gap: 2px; font-size: 1.125rem; }
.veille-sortie-titre { font-weight: 700; }
.veille-touche { margin: 0; text-align: center; font-size: 1rem; opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) { .veille:not([hidden]) { animation: veille-apparait 600ms ease; } }
@keyframes veille-apparait { from { opacity: 0; } to { opacity: 1; } }

/* « Composer tout mon séjour » (4.3.0) : sous le bouton principal, dans la zone d'envoi */
.jr-envoi { display: flex; flex-direction: column; gap: 8px; }
.jr-sejour { width: 100%; }
.jr-sejour-aide { margin: 0; text-align: center; }

/* « En direct » (4.3.0) : la journée d'aujourd'hui suivie à l'heure */
.jr-direct { border-left: 4px solid var(--accent); display: flex; flex-direction: column; gap: 8px; }
.jr-direct-titre { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8438rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-doux); }
.jr-direct-point { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: direct-pulse 2s ease-in-out infinite; }
@keyframes direct-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
.jr-direct-texte { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.jr-direct-suite { display: flex; flex-direction: column; gap: 4px; margin: 0; line-height: 1.4; }
.jr-direct-bus { font-weight: 700; }
.jr-direct-bouton { align-self: flex-start; }
.jr-direct-note { margin: 0; }
@media (prefers-reduced-motion: reduce) { .jr-direct-point { animation: none; } }

/* rappels sur le téléphone (4.3.0) */
.jr-rappels { display: flex; flex-direction: column; gap: 6px; }
.jr-rappels-bouton { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.jr-rappels .jr-aide { margin: 0; }