/* ---------- Espace clients ---------- */
/* Formulaire : classes communes de site.css (.sejour, .champ, .reserver__erreurs, .visuellement-cache). */
.espace-clients__connexion { max-width: 640px; }
.espace-clients__message { display: grid; gap: var(--xs); margin-top: var(--md); }
.espace-clients__envoyer { justify-self: start; }
.espace-clients__note { margin-top: var(--md); font-size: 14px; line-height: 20px; }
.espace-clients__note a { color: var(--on-surface); text-decoration: underline; }

@media (max-width: 860px) {
    .espace-clients__envoyer { justify-self: stretch; }
}

/* Pages du voyageur connecté : accueil, prestation, commande. Récapitulatif : .sejour__resume de site.css. */
.espace-clients .surtitre { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--on-surface-variant); margin-bottom: var(--xs); }
.espace-clients__page { display: grid; justify-items: start; gap: var(--sm); max-width: 760px; }
.espace-clients__page > * { max-width: 100%; }
.espace-clients__page .titre-sous-section { margin-top: var(--lg); font-size: 24px; line-height: 32px; }
.espace-clients__page .sejour__resume { margin-top: 0; }
.espace-clients__page .sejour, .espace-clients__page .carte { width: 100%; }
.espace-clients__page .texte-doux a, .espace-clients__message a { color: var(--on-surface); text-decoration: underline; }
.espace-clients__retour { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.espace-clients__retour::before { content: "← " / ""; }

/* Commandes et catalogue : une carte par élément, sans enveloppe. */
.espace-clients__statut { justify-self: start; padding: 2px 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; background: var(--surface-variant); }
.espace-clients__statut--payee { background: var(--secondary-container); color: var(--on-secondary-container); }
.espace-clients__statut--en_attente { background: var(--primary-container); color: var(--on-primary-container); }
.espace-clients__description { white-space: pre-line; }

/* Réservation : jours en liens (sans JavaScript), créneaux en boutons radio. */
.espace-clients__jours, .espace-clients__creneaux { display: flex; flex-wrap: wrap; gap: var(--xs) var(--sm); }
.espace-clients__jours a, .espace-clients__creneaux label { display: inline-flex; align-items: center; gap: var(--xs); min-height: 44px; padding: 10px 16px; border: 1px solid var(--outline-variant); border-radius: var(--r-full); text-decoration: none; cursor: pointer; transition: var(--transition); }
.espace-clients__jours a:hover, .espace-clients__creneaux label:hover { border-color: var(--on-surface); }
.espace-clients__jours a[aria-current] { background: var(--on-surface); border-color: var(--on-surface); color: var(--surface); }
.espace-clients__creneaux { margin: 0; padding: 0; border: 0; }
.espace-clients__creneaux legend { width: 100%; margin-bottom: var(--sm); padding: 0; }
.espace-clients__creneaux input { margin: 0; accent-color: var(--primary); }
.espace-clients__creneaux label:has(:checked) { border-color: var(--on-surface); box-shadow: inset 0 0 0 1px var(--on-surface); }
.espace-clients__erreur { color: var(--error); font-weight: 500; }
.espace-clients__total { font-size: 16px; font-weight: 600; }

/* Tableau de bord du séjour (accueil de l'espace) : mise en page de la fiche d'un gîte (gites.css, chargée par la page). */
.espace-clients.fiche-gite .surtitre { margin-bottom: 0; }
.espace-clients__fiche { display: grid; gap: var(--sm); margin: 0; }
.espace-clients__fiche div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--sm); font-size: 14px; line-height: 20px; }
.espace-clients__fiche dt { color: var(--on-surface-variant); }
.espace-clients__fiche dd { margin: 0; font-weight: 500; }
.fiche__activites a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fiche__savoir a { color: var(--on-surface); text-decoration: underline; }

/* Fenêtres de l'espace (x-fenetre) : texte lisible, défilement interne sur petit écran. */
.dialogue--fenetre { width: min(720px, calc(100vw - 32px)); overflow-y: auto; }
.dialogue--fenetre .dialogue__contenu { display: grid; gap: var(--sm); }
.dialogue--fenetre .dialogue__entete { margin-bottom: 0; }
.dialogue--fenetre .bouton { justify-self: start; }
.dialogue--fenetre .titre-carte + .titre-carte, .dialogue--fenetre h3.titre-carte { margin-top: var(--xs); }
/* Images des fenêtres (gîte, activités) : bandeau bas, le texte reste visible sans défiler. */
.espace-clients__fenetre-image { display: block; aspect-ratio: 21 / 9; max-height: 260px; overflow: hidden; border-radius: var(--r-md); }
.espace-clients__fenetre-image img { width: 100%; height: 100%; object-fit: cover; }
.espace-clients__liste-icones { display: grid; gap: var(--sm); }
.espace-clients__liste-icones li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sm); line-height: 22px; }
.espace-clients__liste-icones .icone { width: 22px; height: 22px; color: var(--secondary); }
.espace-clients__liste-icones small { display: block; margin-top: 2px; font-size: 14px; color: var(--on-surface-variant); }
.espace-clients__texte { display: grid; gap: var(--xs); }
.espace-clients__texte ul { padding-left: var(--md); list-style: disc; }
.espace-clients__statut .icone { width: 14px; height: 14px; vertical-align: -2px; }

/* Page d'une prestation : photo dans la colonne de gauche, la carte « Réserver » à côté (même colonne que pour un gîte). */
.espace-clients__bandeau { position: relative; margin-bottom: var(--xs); }
.espace-clients__bandeau-image { display: block; aspect-ratio: 16 / 9; max-height: 400px; overflow: hidden; border-radius: var(--r-xl); }
.espace-clients__bandeau-image img { width: 100%; height: 100%; object-fit: cover; }
.espace-clients__bandeau .badge { top: var(--md); left: var(--md); }
.espace-clients__reservation { gap: var(--sm); }
.espace-clients__reservation .titre-carte { font-size: 20px; line-height: 28px; }
.espace-clients__etape { width: 100%; margin: var(--xs) 0 0; padding: 0; font-size: 16px; font-weight: 600; line-height: 24px; }
.espace-clients__formulaire { margin: 0; }
.espace-clients__message--alerte { margin: 0; padding: var(--sm); border-radius: var(--r-md); background: var(--primary-container); color: var(--on-primary-container); }

@media (max-width: 860px) {
    .espace-clients__bandeau-image { aspect-ratio: 3 / 2; border-radius: var(--r-lg); }
}
.dialogue--fenetre .espace-clients__statut { display: inline-flex; align-items: center; gap: 6px; }
.espace-clients__reservation { scroll-margin-top: 104px; }

/* Fenêtre d'une prestation réservée : vignette et l'essentiel côte à côte, puis le détail en tuiles. */
.espace-clients__commande-entete { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--md); align-items: center; }
.espace-clients__vignette { display: block; width: 168px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); }
.espace-clients__vignette img { width: 100%; height: 100%; object-fit: cover; }
.espace-clients__vignette--icone { height: auto; padding: 36px; color: var(--secondary); background: color-mix(in srgb, var(--secondary) 12%, var(--surface)); }
.espace-clients__commande-resume { display: grid; gap: var(--xs); justify-items: start; }
.espace-clients__commande-quand { font-size: 20px; font-weight: 600; line-height: 28px; }
.espace-clients__tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.espace-clients__tuiles .chiffre { padding: 12px 16px; }
.espace-clients__tuiles .chiffre dd { font-size: 17px; line-height: 24px; }
.dialogue--fenetre .assurance { margin: 0; }

@media (max-width: 560px) {
    .espace-clients__commande-entete { grid-template-columns: 112px minmax(0, 1fr); gap: var(--sm); }
    .espace-clients__vignette { width: 112px; }
    .espace-clients__vignette--icone { padding: 24px; }
    .espace-clients__tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Connexion : deux façons de se connecter */
.espace-clients__methode { margin-top: var(--lg); margin-bottom: var(--sm); font-size: 20px; line-height: 28px; }

/* ---------- Espace connecté (layouts.espace-clients), maquette du 20/10/2026 ---------- */
/* Menu à gauche (barre d'onglets en bas sur téléphone), contenu sur fond gris clair, cartes blanches. */
/* Fond du menu sur toute la hauteur de la page, même quand le contenu dépasse l'écran */
.ec { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100dvh - 81px); background: linear-gradient(90deg, var(--surface) 279px, var(--surface-variant) 279px 280px, var(--surface-dim) 280px); }
.ec-menu { position: sticky; top: 81px; align-self: start; display: flex; flex-direction: column; gap: var(--md); height: calc(100dvh - 81px); padding: var(--md) var(--sm); background: var(--surface); border-right: 1px solid var(--surface-variant); }
.ec-profil { display: flex; align-items: center; gap: var(--sm); min-width: 0; padding: 0 var(--sm); }
.ec-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-full); background: var(--primary-container); color: var(--on-primary-container); font-weight: 700; }
.ec-profil div { min-width: 0; }
.ec-profil strong { display: block; font-size: 16px; line-height: 22px; }
.ec-profil div span { display: block; overflow: hidden; font-size: 13px; color: var(--on-surface-variant); text-overflow: ellipsis; white-space: nowrap; }
.ec-nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ec-nav a { display: flex; align-items: center; gap: var(--sm); min-height: 44px; padding: 10px var(--sm); border-radius: var(--r-md); color: var(--on-surface); font-size: 15px; font-weight: 500; text-decoration: none; transition: var(--transition); }
.ec-nav a:hover { background: var(--surface-dim); }
.ec-nav a[aria-current="page"] { background: var(--surface-dim); color: var(--primary); font-weight: 600; }
.ec-nav .icone { flex: none; width: 22px; height: 22px; }
.ec-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; padding: 0 7px; border-radius: var(--r-full); background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; }
.ec-menu__bas { display: grid; gap: var(--sm); margin-top: auto; padding: 0 var(--sm); }
.ec-menu__bas .bouton { width: 100%; }
.ec-lien-discret { padding: 0; border: 0; background: none; color: var(--on-surface-variant); font: inherit; font-size: 14px; text-align: left; text-decoration: underline; cursor: pointer; }

.ec-contenu { display: grid; align-content: start; gap: var(--md); width: 100%; max-width: 1040px; padding: var(--lg) var(--gutter) var(--xl); }
.ec-page { display: grid; gap: var(--md); min-width: 0; }
.ec-surtitre { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--on-surface-variant); }
.ec-titre { font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: -0.02em; }
.ec-sous-titre { margin-top: 4px; font-size: 16px; color: var(--on-surface-variant); }
.ec-carte { min-width: 0; padding: var(--md); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-sm), 0 1px 2px rgba(0, 0, 0, 0.04); }
.ec-carte .texte-doux a, .ec-savoir a { color: var(--on-surface); text-decoration: underline; }
.ec-carte__titre { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); margin-bottom: var(--sm); font-size: 18px; font-weight: 600; line-height: 24px; }
.ec-carte__titre a { font-size: 14px; color: var(--on-surface); text-decoration: underline; }
.ec-message { font-size: 15px; }
.ec-erreur { color: var(--error); font-weight: 500; }
.ec-puce { display: inline-flex; justify-self: start; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-variant); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ec-puce .icone { width: 14px; height: 14px; }
.ec-puce--vert { background: var(--secondary-container); color: var(--on-secondary-container); }
.ec-puce--rose { background: var(--primary-container); color: var(--on-primary-container); }

/* Mon séjour */
.ec-sejour { display: grid; grid-template-columns: 300px minmax(0, 1fr); padding: 0; overflow: hidden; }
.ec-sejour__image { display: block; height: 100%; min-height: 240px; }
.ec-sejour__image img { width: 100%; height: 100%; object-fit: cover; }
.ec-sejour__corps { display: grid; align-content: start; gap: var(--sm); padding: var(--md); }
.ec-sejour__titre { font-size: 24px; font-weight: 700; line-height: 30px; }
.ec-faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sm); margin: 0; }
.ec-faits div { padding: var(--sm); border-radius: var(--r-md); background: var(--surface-dim); }
.ec-faits dt { font-size: 12px; color: var(--on-surface-variant); }
.ec-faits dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }
.ec-actions { display: flex; flex-wrap: wrap; gap: var(--sm); margin-top: 4px; }
.ec-actions .bouton { height: 44px; padding: 10px 18px; }
.ec-grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md); align-items: start; }
.ec-liste { display: grid; margin: 0; padding: 0; list-style: none; }
.ec-liste li + li { border-top: 1px solid var(--surface-variant); }
.ec-liste__lien { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--sm); padding: var(--sm) 0; color: inherit; text-decoration: none; }
.ec-liste li:first-child .ec-liste__lien { padding-top: 0; }
.ec-liste__image { display: block; width: 56px; height: 56px; overflow: hidden; border-radius: var(--r-md); }
.ec-liste__image img { width: 100%; height: 100%; object-fit: cover; }
.ec-liste__image--icone { padding: 14px; background: color-mix(in srgb, var(--secondary) 12%, var(--surface)); color: var(--secondary); }
.ec-liste__texte strong { display: block; font-size: 15px; }
.ec-liste__texte span { display: block; font-size: 13px; color: var(--on-surface-variant); }
.ec-savoir { display: grid; gap: var(--sm); margin: 0; padding: 0; list-style: none; }
.ec-savoir li { display: flex; gap: var(--sm); font-size: 14px; line-height: 20px; }
.ec-savoir .icone { flex: none; width: 22px; height: 22px; color: var(--secondary); }
.ec-savoir strong { display: block; }
.ec-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ec-pastilles a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--surface-variant); border-radius: var(--r-full); color: var(--on-surface); font-size: 14px; text-decoration: none; transition: var(--transition); }
.ec-pastilles a:hover { border-color: var(--on-surface); }
.ec-pastilles .icone { width: 18px; height: 18px; }
.ec-autour { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--md); margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ec-autour li { display: flex; justify-content: space-between; gap: var(--sm); }

/* Prestations */
.ec-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-filtre { padding: 8px 14px; border: 1px solid var(--surface-variant); border-radius: var(--r-full); background: var(--surface); color: var(--on-surface); font-size: 14px; text-decoration: none; }
.ec-filtre[aria-current] { border-color: var(--on-surface); font-weight: 600; }
.ec-catalogue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--md); margin: 0; padding: 0; list-style: none; }
.ec-prestation { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; transition: var(--transition); }
.ec-prestation:hover { box-shadow: var(--elev-md); }
.ec-prestation__image { display: block; aspect-ratio: 3 / 2; }
.ec-prestation__image img { width: 100%; height: 100%; object-fit: cover; }
.ec-prestation__corps { display: grid; align-content: start; gap: 6px; padding: var(--sm) var(--md) var(--md); }
.ec-prestation__titre { font-size: 17px; font-weight: 600; line-height: 24px; }
.ec-prestation__lien { color: inherit; text-decoration: none; }
.ec-prestation__lien::after { content: ""; position: absolute; inset: 0; }
.ec-prestation .texte-doux { font-size: 14px; line-height: 20px; }
.ec-prestation__prix { font-weight: 600; }
.ec-prestation__bouton { justify-self: start; height: 40px; margin-top: 6px; padding: 8px 16px; }

/* Messages */
.ec-conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(640px, calc(100dvh - 280px)); min-height: 420px; padding: 0; overflow: hidden; }
.ec-conversation__entete { display: flex; align-items: center; gap: var(--sm); padding: var(--sm) var(--md); border-bottom: 1px solid var(--surface-variant); }
.ec-conversation__entete span { display: block; font-size: 13px; color: var(--on-surface-variant); }
.ec-fil { display: flex; flex-direction: column; gap: var(--sm); margin: 0; padding: var(--md); overflow-y: auto; background: var(--surface-dim); list-style: none; }
.ec-jour { align-self: center; font-size: 12px; color: var(--on-surface-variant); text-align: center; }
.ec-bulle { max-width: 72%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 21px; }
.ec-bulle__texte { white-space: pre-line; overflow-wrap: anywhere; }
.ec-bulle small { display: block; margin-top: 4px; font-size: 11px; opacity: 0.7; }
.ec-bulle--moi { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--on-surface); color: var(--surface); }
.ec-bulle--domaine { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--surface); box-shadow: var(--elev-sm); }
.ec-saisie { display: flex; align-items: flex-end; gap: var(--sm); padding: var(--sm) var(--md); border-top: 1px solid var(--surface-variant); }
.ec-saisie textarea { flex: 1; min-height: 48px; max-height: 140px; padding: 12px 16px; border: 1px solid var(--outline-variant); border-radius: var(--r-xl); font: inherit; font-size: 15px; resize: vertical; }
.ec-saisie textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.ec-saisie .bouton { flex: none; width: 48px; padding: 0; }
.ec-conversation__erreur { padding: 0 var(--md) var(--sm); }

/* Mes séjours */
.ec-revenir { display: flex; align-items: center; justify-content: space-between; gap: var(--md); background: linear-gradient(135deg, var(--primary-container), var(--surface) 70%); }
.ec-revenir .ec-carte__titre { margin-bottom: 4px; }
.ec-onglets { display: flex; gap: var(--md); border-bottom: 1px solid var(--surface-variant); }
.ec-onglets a { padding-bottom: 12px; border-bottom: 2px solid transparent; color: var(--on-surface-variant); font-size: 15px; font-weight: 500; text-decoration: none; }
.ec-onglets a[aria-current] { border-bottom-color: var(--on-surface); color: var(--on-surface); font-weight: 600; }
.ec-sejours { display: grid; gap: var(--sm); margin: 0; padding: 0; list-style: none; }
.ec-sejour-ligne { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: var(--md); padding: var(--sm); }
.ec-sejour-ligne__image { display: block; width: 120px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); }
.ec-sejour-ligne__image img { width: 100%; height: 100%; object-fit: cover; }
.ec-sejour-ligne__texte { display: grid; gap: 4px; }
.ec-sejour-ligne__texte strong { font-size: 16px; }
.ec-sejour-ligne__texte > span:not(.ec-puce) { font-size: 14px; color: var(--on-surface-variant); }

/* Mon compte : une ligne par réglage, formulaire déplié sur place */
.ec-reglages { padding: 0; }
.ec-reglage { padding: var(--md); border-top: 1px solid var(--surface-variant); }
.ec-reglage:first-child { border-top: 0; }
.ec-reglage, .ec-reglage > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--md); }
details.ec-reglage { display: block; }
.ec-reglage > summary { list-style: none; cursor: pointer; }
.ec-reglage > summary::-webkit-details-marker { display: none; }
.ec-reglage strong { display: block; font-size: 15px; }
.ec-reglage span span, .ec-reglage div span { display: block; font-size: 14px; color: var(--on-surface-variant); }
.ec-reglage .bouton { height: 40px; padding: 8px 16px; }
.ec-reglage[open] > summary .bouton { visibility: hidden; }
.ec-reglage--danger strong { color: var(--error); }
.ec-formulaire, .ec-reglage .sejour { display: grid; gap: var(--sm); max-width: 520px; margin-top: var(--md); }
.ec-reglage .ec-formulaire .sejour { margin-top: 0; }
.ec-formulaire .bouton, .ec-reglage .sejour .bouton { justify-self: start; }

/* Fenêtre « Créez votre mot de passe » (fenetre-mot-de-passe.blade.php) */
.ec-bienvenue { width: min(480px, calc(100vw - 32px)); }
.ec-bienvenue .dialogue__contenu { display: grid; gap: var(--sm); }
.ec-bienvenue__icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-full); background: var(--secondary-container); color: var(--on-secondary-container); }
.ec-bienvenue__icone .icone { width: 26px; height: 26px; }
.ec-bienvenue h2 { font-size: 22px; font-weight: 700; line-height: 28px; }
.ec-bienvenue .sejour { gap: var(--sm); margin: 0; }
.ec-bienvenue .bouton { width: 100%; }
.ec-bienvenue .ec-lien-discret { justify-self: center; }
.dialogue[open]:not(:modal) { position: static; width: 100%; margin: var(--md) 0 0; border: 1px solid var(--outline-variant); box-shadow: none; }

/* Pages reprises dans le gabarit : prestation et commande */
.ec-contenu .fiche-gite, .ec-contenu .espace-clients__page { min-width: 0; }
.ec-contenu .fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }

@media (max-width: 1100px) {
    .ec-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ec-sejour { grid-template-columns: 220px minmax(0, 1fr); }
}

/* Téléphone et tablette : menu en barre d'onglets en bas de l'écran */
@media (max-width: 900px) {
    .ec { grid-template-columns: 1fr; background: var(--surface-dim); }
    .ec-menu { position: fixed; inset: auto 0 0; z-index: 30; flex-direction: row; height: auto; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--surface-variant); }
    .ec-profil, .ec-menu__bas { display: none; }
    .ec-menu nav { width: 100%; }
    .ec-nav { grid-auto-flow: column; grid-auto-columns: 1fr; }
    .ec-nav a { position: relative; flex-direction: column; gap: 2px; min-height: 56px; padding: 6px 2px; font-size: 11px; text-align: center; }
    .ec-nav a[aria-current="page"] { background: none; }
    .ec-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; margin: 0; padding: 0 5px; font-size: 10px; }
    .ec-contenu { padding: var(--md) 16px 104px; }
    .ec-titre { font-size: 26px; line-height: 32px; }
    .ec-sejour { grid-template-columns: 1fr; }
    .ec-sejour__image { min-height: 0; aspect-ratio: 16 / 9; }
    .ec-grille-2, .ec-catalogue, .ec-autour { grid-template-columns: 1fr; }
    .ec-actions .bouton { flex: 1 1 auto; }
    .ec-revenir { flex-direction: column; align-items: stretch; }
    .ec-sejour-ligne { grid-template-columns: 88px minmax(0, 1fr); }
    .ec-sejour-ligne__image { width: 88px; }
    .ec-sejour-ligne > .bouton { grid-column: 1 / -1; }
    .ec-conversation { height: calc(100dvh - 81px - 104px - 120px); min-height: 380px; }
    .ec-bulle { max-width: 86%; }
    .ec-reglage, .ec-reglage > summary { grid-template-columns: 1fr; gap: var(--sm); }
    .ec-reglage .bouton { justify-self: start; }
    .ec-contenu .fiche { grid-template-columns: 1fr; }
    .maquette { bottom: 84px; }
}

/* Notifications : cloche en haut à droite de chaque page, page « Notifications » */
.ec-contenu { position: relative; }
.ec-entete { padding-right: 56px; }
.ec-cloche { position: absolute; top: var(--lg); right: var(--gutter); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-full); background: var(--surface); color: var(--on-surface); box-shadow: var(--elev-sm), 0 1px 2px rgba(0, 0, 0, 0.06); transition: var(--transition); }
.ec-cloche:hover, .ec-cloche[aria-current] { box-shadow: var(--elev-md); }
.ec-cloche .icone { width: 22px; height: 22px; }
.ec-cloche .ec-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; margin: 0; padding: 0 6px; font-size: 11px; }
.ec-notifications { display: grid; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.ec-notifications li + li { border-top: 1px solid var(--surface-variant); }
.ec-notification { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: var(--sm); padding: var(--sm) var(--md); color: inherit; text-decoration: none; transition: var(--transition); }
.ec-notification:hover { background: var(--surface-dim); }
.ec-notification--nouvelle { background: color-mix(in srgb, var(--primary-container) 35%, var(--surface)); }
.ec-notification__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--surface-dim); color: var(--secondary); }
.ec-notification__icone .icone { width: 20px; height: 20px; }
.ec-notification__texte { display: grid; gap: 2px; font-size: 14px; line-height: 20px; }
.ec-notification__texte strong { font-size: 15px; }
.ec-notification__texte span, .ec-notification__texte time { color: var(--on-surface-variant); }
.ec-notification__texte time { font-size: 12px; }
.ec-notification__point { width: 10px; height: 10px; margin-top: 6px; border-radius: var(--r-full); background: var(--primary); }

@media (max-width: 900px) {
    .ec-cloche { top: var(--md); right: 16px; }
    .ec-notification { padding: var(--sm); }
}