* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--ios-font);
    background: #f5f5f4;
    color: #1c1917;
    -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════════════
   Design system iOS — fondations
   Périmètre actuel : pages préfixées `.ios-*` uniquement (index.php,
   logements.html, reservation-form.html). Les classes existantes ci-dessus/
   dessous (.card, .field, .btn, .topbar, .hub-grid...) restent inchangées et
   continuent de servir les ~16 autres pages : ce bloc s'ajoute, il ne
   remplace rien, pour permettre une validation écran par écran avant
   généralisation.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    /* Empêche Safari/Chrome de redessiner les contrôles natifs (date,
       select...) en sombre quand l'appareil est en mode sombre, alors que
       le reste de la page reste volontairement clair. */
    color-scheme: light;

    --ios-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Fonds — blanc partout (pas de gris systemGroupedBackground iOS
       classique) : demande explicite, y compris pour le fond de page
       derrière les listes regroupées. */
    --ios-bg: #ffffff;
    --ios-grouped-bg: #ffffff;
    --ios-secondary-bg: #ffffff;
    --ios-tertiary-bg: #f2f2f7;

    /* Texte */
    --ios-label: #000000;
    --ios-label-secondary: rgba(60, 60, 67, 0.6);
    --ios-label-tertiary: rgba(60, 60, 67, 0.3);

    /* Séparateurs et remplissages */
    --ios-separator: rgba(60, 60, 67, 0.29);
    --ios-fill: rgba(120, 120, 128, 0.2);
    --ios-fill-secondary: rgba(120, 120, 128, 0.12);

    /* Teinte de marque Ajoya conservée comme accent iOS */
    --ios-tint: #0f766e;
    --ios-tint-contrast: #ffffff;
    --ios-tint-soft: rgba(15, 118, 110, 0.12);

    /* Couleurs sémantiques */
    --ios-red: #ff3b30;
    --ios-green: #34c759;
    --ios-orange: #ff9500;
    --ios-blue: #007aff;

    /* Rayons et ombres */
    --ios-radius-sm: 8px;
    --ios-radius-md: 12px;
    --ios-radius-lg: 20px;
    --ios-radius-pill: 999px;
    --ios-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Mode sombre volontairement absent : l'app reste en mode clair en
   permanence, quel que soit le réglage système du visiteur (demande
   explicite — pas de @media (prefers-color-scheme: dark) ici). */

html:has(.ios-screen) {
    background: var(--ios-grouped-bg);
}

.ios-screen {
    font-family: var(--ios-font);
    background: var(--ios-grouped-bg);
    color: var(--ios-label);
    min-height: 100vh;
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* Variante "écran d'accueil" : fond transparent pour laisser apparaître le
   fond photo flouté (.page-bg / .page-bg-overlay, déjà utilisés ailleurs
   dans le site) derrière une grille d'icônes façon SpringBoard. */
.ios-screen--wallpaper {
    background: transparent;
}

.ios-screen--wallpaper .ios-navbar {
    background: rgba(0, 0, 0, 0.15);
}

.ios-screen--wallpaper .ios-large-title,
.ios-screen--wallpaper .ios-navbar-inline-title,
.ios-screen--wallpaper .ios-navbar-action {
    color: #ffffff;
}

.ios-screen--wallpaper .ios-icon-tile,
.ios-screen--wallpaper .ios-icon-label {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ── Grille d'icônes façon écran d'accueil iPhone ────────────────────────── */
/* flex + wrap + justify-content:center plutôt que CSS Grid : avec une grille,
   une dernière ligne incomplète (ex. 5 tuiles sur 4 colonnes) se cale à
   gauche au lieu d'être centrée comme sur un vrai écran d'accueil. Chaque
   tuile a une largeur fixe (~4 par ligne sur téléphone, ~6 sur tablette/
   desktop) pour garder une grille régulière tout en centrant les lignes
   incomplètes. */
.ios-icon-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem 0.75rem;
    padding: 0.75rem 1.1rem 1.5rem;
}

/* Tablette/desktop : même convention de palier que le reste du site
   (voir .screen ci-dessus). Pas plus de colonnes avec des icônes minuscules
   comme sur un iPhone — de vraies icônes plus grandes, dans une grille
   resserrée façon écran d'accueil iPad plutôt qu'étirée sur toute la
   largeur d'un écran d'ordinateur. */
@media (min-width: 860px) {
    .ios-icon-grid {
        gap: 2.25rem 1.5rem;
        max-width: 860px;
        margin: 0 auto;
        padding: 1.5rem 1.5rem 2rem;
    }
}

/* Largeur en % du conteneur (4 tuiles + 3 espaces par ligne) plutôt qu'une
   largeur fixe en rem : garantit exactement 4 icônes par ligne quelle que
   soit la largeur réelle de .ios-icon-grid (téléphone, iPad, ordinateur),
   au lieu de dépendre d'un calcul de largeur de conteneur approximatif qui
   donnait tantôt 4, tantôt 6, tantôt 2 icônes par ligne selon l'écran. */
.ios-icon-tile {
    display: flex;
    flex: 0 0 calc((100% - 3 * 0.75rem) / 4);
    max-width: calc((100% - 3 * 0.75rem) / 4);
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--ios-label);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
    font-family: var(--ios-font);
}

@media (min-width: 860px) {
    .ios-icon-tile {
        flex-basis: calc((100% - 3 * 1.5rem) / 4);
        max-width: calc((100% - 3 * 1.5rem) / 4);
    }
}

.ios-icon-tile:active {
    transform: scale(0.92);
}

.ios-icon-tile:disabled {
    opacity: 0.45;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ios-icon-tile,
    .ios-icon-tile:active {
        transition: none;
        transform: none;
    }
}

.ios-icon-glyph {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: linear-gradient(160deg, var(--ios-tint), #0c4a44);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 860px) {
    /* ×1,5 par rapport à la taille de base (84px) — demandé spécifiquement
       pour iPad/ordinateur, sans toucher à la taille sur téléphone. */
    .ios-icon-glyph {
        width: 126px;
        height: 126px;
        border-radius: 30px;
        font-size: 57px;
    }
}

.ios-icon-glyph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ios-icon-glyph--dashed {
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px dashed rgba(255, 255, 255, 0.55);
    box-shadow: none;
}

.ios-icon-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ios-green);
    border: 2px solid rgba(0, 0, 0, 0.25);
}

.ios-icon-badge--green { background: var(--ios-green); }
.ios-icon-badge--orange { background: var(--ios-orange); }
.ios-icon-badge--red { background: var(--ios-red); }
.ios-icon-badge--neutral { background: var(--ios-label-tertiary); }

.ios-icon-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ios-label);
    text-align: center;
    max-width: 5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
}

@media (min-width: 860px) {
    .ios-icon-label {
        font-size: 13px;
        max-width: 6rem;
    }
}

/* ── Dock : barre translucide fixée en bas pour l'action principale ───────
   bottom décalé pour ne pas chevaucher .ios-tabbar (barre de navigation à 5
   destinations, position:fixed, ~4.75rem de hauteur avec sa marge) quand
   les deux coexistent sur un même écran. */
.ios-dock {
    position: sticky;
    bottom: 4.75rem;
    margin: 1rem 1rem 0;
    padding: 0.55rem;
    /* reservation-form.html n'a pas de fond photo (page blanche) : un fond
       translucide quasi transparent (pensé pour une photo derrière) se
       fondait dans le blanc et rendait le bouton "Enregistrer" à peine
       visible. */
    background: rgba(242, 242, 247, 0.85);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-radius: 22px;
    display: flex;
    gap: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.ios-dock .ios-btn {
    flex: 1;
}

/* ── Barre de navigation basse façon Dock iOS (5 destinations fixes) ────── */
.ios-screen--has-tabbar {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

.ios-tabbar {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem;
    background: rgba(242, 242, 247, 0.85);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border-radius: 26px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

/* Sur fond photo (page d'accueil), la barre reprend son style translucide
   d'origine plutôt que le fond clair par défaut. */
.ios-screen--wallpaper .ios-tabbar {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

@media (min-width: 860px) {
    .ios-tabbar {
        max-width: 420px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

.ios-tabbar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, background-color 0.12s ease;
}

.ios-tabbar-item:active {
    transform: scale(0.88);
    background: rgba(255, 255, 255, 0.16);
}

.ios-tabbar-item--active {
    background: rgba(255, 255, 255, 0.18);
}

.ios-tabbar-item[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ios-tabbar-item {
        transition: none;
    }
}

/* ── En-tête de feuille modale (titre + fermeture) ───────────────────────── */
.ios-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.ios-sheet-title {
    font: 700 20px var(--ios-font);
    color: var(--ios-label);
}

.ios-sheet-done {
    background: none;
    border: none;
    color: var(--ios-tint);
    font: 600 17px var(--ios-font);
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    -webkit-tap-highlight-color: transparent;
}

/* ── Modale "zoom" : formulaire existant chargé en superposition ─────────── */
.ios-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    /* flex-start, pas center : la carte se déploie depuis le haut vers le
       bas (comme .client-overlay) plutôt que de grossir depuis le centre
       de l'écran — l'arrière-plan reste immobile pendant que la carte
       blanche prend sa place. */
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    /* La carte suit la hauteur réelle de son contenu (voir ios-modal.js) —
       si elle dépasse la fenêtre, c'est ce conteneur qui défile en entier
       (carte + fond assombri), comme .client-overlay, plutôt qu'un scroll
       interne coincé dans la carte. */
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.ios-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ios-modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    /* Pas de max-height : la carte suit la hauteur mesurée du contenu de
       l'iframe (ios-modal.js), comme .client-detail — c'est le fond assombri
       qui défile si ça dépasse la fenêtre, pas la carte elle-même. */
    flex-shrink: 0;
    /* Même fond que .client-detail (#f5f5f4), pour qu'il n'y ait pas de
       flash d'une couleur différente avant que l'iframe n'ait fini de
       peindre son propre fond. */
    background: #f5f5f4;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}

/* Sur sa propre classe (pas .is-open du fond) : le zoom de la carte ne doit
   démarrer qu'une fois la hauteur réelle de l'iframe connue (ios-modal.js),
   sinon la carte zoome d'abord à sa hauteur de repli (300px) puis se
   redimensionne brutalement pendant/après le zoom — perçu comme "s'ouvre en
   haut puis se déploie vers le bas" au lieu d'un agrandissement d'un bloc. */
.ios-modal-card.is-open {
    transform: scale(1);
    opacity: 1;
}

@media (min-width: 860px) {
    .ios-modal-card {
        max-width: 700px;
    }
}

.ios-modal-close {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(120, 120, 128, 0.16);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--ios-label);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ios-modal-close:active {
    background: rgba(120, 120, 128, 0.3);
}

.ios-modal-iframe {
    border: none;
    width: 100%;
    display: block;
    /* Hauteur de repli avant que ios-modal.js n'ait pu mesurer le contenu
       réel de l'iframe et fixer sa hauteur exacte en pixels. */
    height: 300px;
}

@media (prefers-reduced-motion: reduce) {
    .ios-modal-backdrop,
    .ios-modal-card {
        transition: none;
    }
}

/* Une page chargée à l'intérieur d'une modale (via <iframe>, voir
   ios-modal.js) se déclare elle-même "html.is-embedded" au chargement
   (script inline dans son <head>) et masque ainsi son propre habillage de
   page complète — fond photo, en-tête photo, barre du bas — qui n'a pas sa
   place à l'intérieur d'une petite carte et créait un double cadre/fond
   dégradé visible autour du contenu utile. */
html.is-embedded .page-bg,
html.is-embedded .page-bg-overlay,
html.is-embedded .ios-photo-header,
html.is-embedded .ios-navbar,
html.is-embedded .ios-tabbar {
    display: none !important;
}

html.is-embedded,
html.is-embedded body {
    /* La carte de la modale est déjà mesurée pile à la hauteur du contenu
       (ios-modal.js) : la page embarquée ne doit jamais pouvoir défiler
       elle-même, sinon on se retrouve avec deux scrolls actifs en même
       temps (celui de la page dans l'iframe + celui du fond assombri de
       la modale) — un seul doit rester, celui du fond assombri. */
    overflow: hidden;
}

html.is-embedded body {
    background: #f5f5f4;
    padding-bottom: 0;
}

/* .content-panel est une carte flottante à l'intérieur de la page (marge,
   coins arrondis, ombre) — voulu quand la page s'affiche seule, mais ça
   donnait une carte dans la carte une fois posée dans la modale. En
   modale, elle doit se comporter comme .client-detail : bord à bord,
   sans marge ni ombre propre, seule la carte de la modale (.ios-modal-card)
   garde les coins arrondis et l'ombre. */
html.is-embedded .screen {
    max-width: none;
}

html.is-embedded .content-panel {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: #f5f5f4;
    padding: 1.25rem 1rem;
}

/* ── Barre de navigation : grand titre rétractable ───────────────────────── */
.ios-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-top: env(safe-area-inset-top);
    background: color-mix(in srgb, var(--ios-secondary-bg) 82%, transparent);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-bottom: 0.5px solid transparent;
    transition: border-color 0.2s ease;
}

.ios-navbar--scrolled {
    border-bottom-color: var(--ios-separator);
}

.ios-navbar-row {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.5rem;
    gap: 0.25rem;
}

.ios-navbar-inline-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ios-navbar--scrolled .ios-navbar-inline-title {
    opacity: 1;
    transform: translateY(0);
}

.ios-navbar-side {
    display: flex;
    align-items: center;
    min-width: 2.75rem;
    flex-shrink: 0;
}

.ios-navbar-side--end {
    justify-content: flex-end;
}

.ios-navbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.4rem;
    color: var(--ios-tint);
    font-size: 17px;
    font-weight: 400;
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ios-navbar-action:active {
    opacity: 0.4;
}

.ios-navbar-action--bold {
    font-weight: 600;
    font-size: 24px;
}

.ios-large-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-height: 3.25rem;
    padding: 0 1rem 0.5rem;
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: left bottom;
    transition: max-height 0.22s ease, opacity 0.18s ease, transform 0.22s ease, padding 0.22s ease;
    overflow: hidden;
}

/* Flèche retour directement à gauche du grand titre (en plus de celle,
   toujours visible, de la barre compacte au-dessus — nécessaire pour
   revenir en arrière même une fois le grand titre rétracté au scroll). */
.ios-large-title-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    color: var(--ios-tint);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.ios-large-title-back:active {
    opacity: 0.4;
}

.ios-large-title-back .ios-chevron {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 3px 3px 0 0;
}

.ios-screen--wallpaper .ios-large-title-back {
    color: #ffffff;
}

.ios-navbar--scrolled .ios-large-title-wrap {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    padding-top: 0;
    padding-bottom: 0;
}

.ios-large-title {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.011em;
    line-height: 1.15;
    font-family: var(--ios-font);
    color: var(--ios-label);
}

/* Aligne le titre sur la même largeur que .ios-icon-grid en tablette/desktop
   (voir plus bas), pour que le bandeau ne s'étire pas plus large que son
   contenu. */
@media (min-width: 860px) {
    .ios-navbar-row,
    .ios-large-title-wrap {
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ios-navbar-inline-title,
    .ios-large-title-wrap {
        transition: none;
    }
}

/* ── En-tête photo (remplace .ios-navbar sur les pages concernées) ───────── */
.ios-photo-header {
    position: relative;
    height: 190px;
    margin: 0 1.5rem;
    overflow: hidden;
    border-radius: 22px;
    background: var(--ios-tertiary-bg);
}

@media (min-width: 860px) {
    .ios-photo-header {
        /* Marges latérales = écart entre deux icônes de la grille (column-gap
           de .ios-icon-grid à ce palier), + un petit espace en haut comme sur
           téléphone plutôt que collé au bord du navigateur. */
        margin: 1.5rem 1.5rem 0;
    }
}

.ios-photo-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Flèche retour, titre et un espaceur invisible de même largeur que la
   flèche sur une seule ligne flex : align-items:center les centre tous les
   trois ensemble sur toute la hauteur de la photo, et l'espaceur garantit
   que le titre reste vraiment centré (pas juste dans l'espace restant à
   droite de la flèche). */
.ios-photo-header-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.18) 100%);
}

.ios-photo-header-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    flex-shrink: 0;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.ios-photo-header-back:active {
    background: rgba(0, 0, 0, 0.5);
}

.ios-photo-header-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    text-align: center;
    color: #ffffff;
    /* Même taille que le grand titre "Ajoya" de l'accueil (.ios-large-title). */
    font: 700 34px var(--ios-font);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ios-photo-header-spacer {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}

/* ── Carte blanche : recherche + filtre + catégories ─────────────────────── */
.ios-search-card {
    position: relative;
    z-index: 2;
    margin: -1.75rem 1.1rem 0;
    background: #ffffff;
    border-radius: 20px;
    padding: 0.85rem 1rem 0.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

@media (min-width: 860px) {
    /* Même largeur que .ios-icon-grid à ce palier, centrée. */
    .ios-search-card {
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Barre de recherche et bouton de tri : deux éléments distincts côte à côte,
   pas un seul bloc fusionné. */
.ios-search-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ios-search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    background: var(--ios-fill-secondary);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
}

.ios-search-bar input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font: 400 15px var(--ios-font);
    color: var(--ios-label);
}

.ios-search-bar input::placeholder {
    color: var(--ios-label-tertiary);
}

.ios-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: none;
    background: var(--ios-label-tertiary);
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ios-search-bar.has-text .ios-search-clear {
    display: flex;
}

.ios-search-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ios-tint);
    color: var(--ios-tint-contrast);
    border: none;
    font-size: 15px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ios-search-filter-btn:active {
    opacity: 0.8;
}

.ios-category-label {
    margin: 0.85rem 0 0.4rem;
    font: 600 13px var(--ios-font);
    color: var(--ios-label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Ligne d'icônes horizontale, défilable dès qu'il y en a plus que ce qui
   tient à l'écran — mêmes classes .ios-icon-tile/.ios-icon-glyph/
   .ios-icon-label que la grille d'accueil, réutilisées ici en ligne.
   Le padding (et pas juste un gap) est nécessaire : overflow-x:auto force
   overflow-y à devenir auto aussi (règle CSS), donc sans marge interne en
   haut/à gauche, l'ombre portée des icônes se fait couper net par le bord
   du conteneur défilant au lieu de rester visible. */
.ios-icon-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px 14px 18px;
    margin: 0 -14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ios-icon-row::-webkit-scrollbar {
    display: none;
}

.ios-icon-row .ios-icon-tile {
    flex: 0 0 auto;
    max-width: none;
}

.ios-icon-row .ios-icon-glyph {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 22px;
    background: var(--ios-fill-secondary);
    color: var(--ios-label);
}

.ios-icon-row .ios-icon-tile.active .ios-icon-glyph {
    background: var(--ios-tint);
    color: var(--ios-tint-contrast);
}

.ios-icon-row .ios-icon-label {
    font-size: 11px;
    max-width: 3.5rem;
}

/* Chevrons dessinés en CSS : pas de dépendance à une police d'icônes */
.ios-chevron {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-style: solid;
    border-color: currentColor;
    border-width: 2px 2px 0 0;
    flex-shrink: 0;
}

.ios-chevron--left {
    transform: rotate(-135deg);
    margin-left: 0.3rem;
}

.ios-chevron--right {
    transform: rotate(45deg);
    color: var(--ios-label-tertiary);
}

.ios-plus {
    position: relative;
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

.ios-plus::before,
.ios-plus::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 1px;
}

.ios-plus::before {
    left: 0.4375rem;
    top: 0;
    width: 2px;
    height: 1rem;
}

.ios-plus::after {
    top: 0.4375rem;
    left: 0;
    height: 2px;
    width: 1rem;
}

/* ── Typographie ──────────────────────────────────────────────────────────── */
.ios-title-2 {
    font: 700 22px/1.2 var(--ios-font);
    letter-spacing: 0.01em;
    color: var(--ios-label);
    margin: 0;
}

.ios-headline {
    font: 600 17px/1.3 var(--ios-font);
    color: var(--ios-label);
}

.ios-body {
    font: 400 17px/1.35 var(--ios-font);
    color: var(--ios-label);
}

.ios-footnote {
    font: 400 13px/1.35 var(--ios-font);
    color: var(--ios-label-secondary);
}

.ios-text-secondary {
    color: var(--ios-label-secondary);
}

/* ── Listes regroupées (façon Réglages) ──────────────────────────────────── */
.ios-list-header {
    padding: 1.25rem 1.25rem 0.4rem;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ios-label-secondary);
}

.ios-list {
    margin: 0 1rem 1rem;
    background: var(--ios-secondary-bg);
    border-radius: var(--ios-radius-md);
    overflow: hidden;
    box-shadow: var(--ios-shadow-card);
}

.ios-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border-bottom: 0.5px solid var(--ios-separator);
    color: inherit;
    text-decoration: none;
    background: none;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ios-font);
}

.ios-list-item:last-child {
    border-bottom: none;
}

a.ios-list-item,
button.ios-list-item {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    border: none;
}

a.ios-list-item:active,
button.ios-list-item:active {
    background: var(--ios-fill-secondary);
}

.ios-list-item-thumb {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ios-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ios-tertiary-bg);
}

.ios-list-item-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ios-radius-sm);
    background: var(--ios-tint);
    color: var(--ios-tint-contrast);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.ios-list-item-body {
    flex: 1;
    min-width: 0;
}

.ios-list-item-title {
    font-size: 17px;
    line-height: 1.3;
    color: var(--ios-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ios-list-item-subtitle {
    font-size: 13px;
    line-height: 1.3;
    color: var(--ios-label-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ios-list-item-value {
    color: var(--ios-label-secondary);
    font-size: 17px;
    flex-shrink: 0;
}

.ios-empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--ios-label-secondary);
    font: 400 15px/1.4 var(--ios-font);
}

/* ── Rangées de formulaire (à l'intérieur d'une .ios-list) ───────────────── */
.ios-field-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border-bottom: 0.5px solid var(--ios-separator);
}

.ios-list .ios-field-row:last-child {
    border-bottom: none;
}

.ios-field-row--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.ios-field-row label {
    font-size: 17px;
    color: var(--ios-label);
    flex-shrink: 0;
    font-family: var(--ios-font);
}

.ios-field-row--stacked label {
    font-size: 13px;
    color: var(--ios-label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ios-field-row input,
.ios-field-row textarea {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font: 400 17px/1.3 var(--ios-font);
    color: var(--ios-label);
    text-align: right;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

.ios-field-row select {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font: 400 17px/1.3 var(--ios-font);
    color: var(--ios-tint);
    text-align: left;
    padding: 0;
}

.ios-field-row--stacked input,
.ios-field-row--stacked select,
.ios-field-row--stacked textarea {
    text-align: left;
}

.ios-field-row textarea {
    resize: vertical;
    min-height: 4.5rem;
}

.ios-field-row input::placeholder,
.ios-field-row textarea::placeholder {
    color: var(--ios-label-tertiary);
}

.ios-field-row input:focus,
.ios-field-row select:focus,
.ios-field-row textarea:focus {
    color: var(--ios-tint);
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.ios-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 50px;
    padding: 0 1.25rem;
    border-radius: 14px;
    border: none;
    font: 600 17px/1 var(--ios-font);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, opacity 0.12s ease;
    box-sizing: border-box;
}

.ios-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}

.ios-btn:disabled,
.ios-btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

.ios-btn--block {
    display: flex;
    width: 100%;
}

.ios-btn--filled {
    background: var(--ios-tint);
    color: var(--ios-tint-contrast);
}

.ios-btn--tinted {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
}

.ios-btn--plain {
    background: none;
    color: var(--ios-tint);
    min-height: auto;
    padding: 0.4rem 0.2rem;
}

.ios-btn--destructive {
    background: var(--ios-red);
    color: #ffffff;
}

.ios-btn--destructive-plain {
    background: none;
    color: var(--ios-red);
}

@media (prefers-reduced-motion: reduce) {
    .ios-btn {
        transition: none;
    }
}

.ios-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: ios-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes ios-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ios-spinner {
        animation-duration: 1.4s;
    }
}

/* ── Interrupteur (switch) ───────────────────────────────────────────────── */
.ios-switch {
    -webkit-appearance: none;
    appearance: none;
    width: 51px;
    height: 31px;
    border-radius: var(--ios-radius-pill);
    background: var(--ios-fill);
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.18s ease;
}

.ios-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
}

.ios-switch:checked {
    background: var(--ios-green);
}

.ios-switch:checked::before {
    transform: translateX(20px);
}

@media (prefers-reduced-motion: reduce) {
    .ios-switch,
    .ios-switch::before {
        transition: none;
    }
}

/* ── Contrôle segmenté (réutilisable, ex. .view-toggle) ──────────────────── */
.ios-segmented {
    display: flex;
    background: var(--ios-fill-secondary);
    border-radius: 9px;
    padding: 2px;
    gap: 2px;
}

.ios-segmented-btn {
    flex: 1;
    border: none;
    background: none;
    padding: 0.4rem 0.5rem;
    font: 500 13px/1 var(--ios-font);
    color: var(--ios-label);
    border-radius: 7px;
    cursor: pointer;
}

.ios-segmented-btn.active {
    background: var(--ios-secondary-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    font-weight: 600;
}

/* ── Feuille modale (sheet) ───────────────────────────────────────────────── */
.ios-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ios-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ios-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    background: var(--ios-secondary-bg);
    border-radius: 16px 16px 0 0;
    padding: 0.6rem 1rem max(1.25rem, env(safe-area-inset-bottom));
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
}

.ios-sheet-backdrop.is-open .ios-sheet {
    transform: translateY(0);
}

.ios-sheet-grabber {
    width: 36px;
    height: 5px;
    border-radius: var(--ios-radius-pill);
    background: var(--ios-fill);
    margin: 0.25rem auto 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .ios-sheet-backdrop,
    .ios-sheet {
        transition: none;
    }
}

/* ── Badges de statut ─────────────────────────────────────────────────────── */
.ios-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ios-radius-pill);
    font: 600 12px/1.4 var(--ios-font);
}

.ios-badge--tint {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
}

.ios-badge--red {
    background: color-mix(in srgb, var(--ios-red) 15%, transparent);
    color: var(--ios-red);
}

.ios-badge--green {
    background: color-mix(in srgb, var(--ios-green) 18%, transparent);
    color: var(--ios-green);
}

.ios-badge--neutral {
    background: var(--ios-fill-secondary);
    color: var(--ios-label-secondary);
}

h1, h2,
.topbar h1,
.card h2 {
    font-family: var(--ios-font);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.screen {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    position: relative;
}

/* ── Fond photo (fiches logement) ─────────────────────────────────────────── */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        url('/assets/logements/logement.webp'),
        linear-gradient(180deg, #1a6fa8, #0f766e);
    background-size: auto 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.page-bg--gradient {
    background-image: linear-gradient(180deg, #1a6fa8, #0f766e);
}

/* Fond de la page d'accueil uniquement (index.php) — seule page à garder un
   fond photo depuis que le reste du site est passé en fond blanc uni. */
.page-bg--accueil {
    background-image:
        url('/assets/logements/accueil-fond.jpg'),
        linear-gradient(180deg, #1a6fa8, #0f766e);
    background-size: cover, cover;
}

.page-bg--soft {
    filter: blur(13px) saturate(0.85) brightness(0.95);
}

.page-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
}

.page-bg-overlay--soft {
    background: linear-gradient(180deg, rgba(12, 74, 110, 0.55) 0%, rgba(15, 118, 110, 0.6) 100%);
}

.page-bg-overlay--sharp {
    background: linear-gradient(180deg, rgba(8, 47, 73, 0.5) 0%, rgba(8, 47, 73, 0.05) 30%, rgba(8, 47, 73, 0) 55%);
}

.home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 1.25rem;
    text-decoration: none;
    color: #0f766e;
}

.topbar .home-btn {
    margin-left: auto;
}

.topbar-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topbar-row .topbar,
.topbar-row-actions .btn-bubble,
.topbar-row .home-btn {
    height: 3rem;
    margin-bottom: 0;
}

.topbar--frosted {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.topbar-row .topbar {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
}

.btn-bubble {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: #0f766e;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.content-panel {
    width: calc(100% - 1.5rem);
    max-width: 480px;
    margin: 1rem auto;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

@media (min-width: 860px) {
    .screen {
        max-width: 1180px;
        padding: 2rem 2rem 3rem;
    }

    .content-panel {
        max-width: 1180px;
        width: 100%;
        padding: 2rem;
    }

    /* logement-detail.html : photos à gauche, infos à droite. Le regroupement
       en conteneurs n'affecte que ce placement — en dessous de 860px, aucune
       grille n'est appliquée et le contenu garde l'ordre/l'empilement mobile
       existant. */
    .detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "photos photos"
            "fields documents"
            "fields ical"
            "calendar calendar"
            "actions actions";
        gap: 0.5rem 2rem;
        align-items: start;
    }

    .detail-photos { grid-area: photos; }
    .detail-fields { grid-area: fields; }
    .detail-calendar { grid-area: calendar; }

    /* Le calendrier occupe la pleine largeur de la grille (voir area
       ci-dessus) : les cases carrées grandiraient sinon jusqu'à ~170px sur
       1180px de large. On plafonne la largeur pour rester lisible tout en
       étant nettement plus grand que sur mobile (~57px/case). */
    .calendar-grid {
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
    }
    .detail-ical { grid-area: ical; }
    .detail-documents { grid-area: documents; }
    .detail-actions { grid-area: actions; }
}

.status-line {
    color: #78716c;
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
}

.hub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.hub-card {
    position: relative;
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Ratio 654/565 = largeurs réelles des deux moitiés de la photo découpée,
   pour que reservation-index et calendrier-index gardent la même hauteur. */
.hub-row {
    display: grid;
    grid-template-columns: 654fr 565fr;
    gap: 0.4rem;
}

.hub-card img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 860px) {
    .hub-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Sur mobile, .hub-row reconstitue la photo découpée en deux (Réservation
       + Calendrier) sur sa propre ligne pleine largeur. Sur grand écran, on
       préfère 6 cartes harmonisées (2 colonnes × 3 lignes, même hauteur) :
       display:contents efface la boîte de .hub-row pour que ses deux cartes
       deviennent des cellules normales de la grille, comme les 4 autres. */
    .hub-row {
        display: contents;
    }

    .hub-card {
        aspect-ratio: 16 / 9;
    }

    .hub-card img {
        height: 100%;
        object-fit: cover;
    }
}

.hub-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(12, 74, 110, 0.18) 0%,
        rgba(12, 74, 110, 0) 18%,
        rgba(15, 118, 110, 0) 82%,
        rgba(15, 118, 110, 0.18) 100%);
}

.hub-card-label {
    position: absolute;
    z-index: 1;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    background: #0f766e;
    font-family: var(--ios-font);
    font-weight: 700;
    font-size: 0.9rem;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.hub-badge {
    position: absolute;
    z-index: 1;
    top: 0.35rem;
    right: 0.35rem;
    background: #57534e;
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.btn {
    display: block;
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    border: none;
    border-radius: 0.5rem;
    background: #0f766e;
    color: white;
    text-align: center;
    text-decoration: none;
}

.btn-secondary {
    background: white;
    color: #0f766e;
    border: 1px solid #0f766e;
}

.btn-danger {
    background: #b91c1c;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.topbar h1 {
    font-size: 1.25rem;
    margin: 0;
}

.topbar a {
    color: #0f766e;
    text-decoration: none;
    font-size: 1.5rem;
}

.card {
    display: block;
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-photo {
    display: block;
    width: calc(100% + 2rem);
    height: 9rem;
    object-fit: cover;
    margin: -1rem -1rem 0.75rem;
}

.card h2 {
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
}

@media (min-width: 860px) {
    /* :not(:has(.ios-icon-grid)) : cette règle date des listes .card/
       .reservation-chip (intervenants.html, templates.html). Sur les pages
       passées à la grille d'icônes (logements, réservations, clients,
       missions), #liste ne contient plus qu'un .ios-icon-grid, qui gère déjà
       lui-même son propre centrage/largeur — sans cette exclusion, #liste
       redevenait ici une grille CSS avec une seule "cellule" auto-fill,
       écrasant le centrage et confinant les icônes dans une colonne étroite
       calée à gauche au lieu des 4-6 par ligne centrées attendues. */
    #liste:not(:has(.ios-icon-grid)) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        align-items: start;
    }

    #liste:not(:has(.ios-icon-grid)) .card,
    #liste:not(:has(.ios-icon-grid)) .reservation-chip,
    #liste:not(:has(.ios-icon-grid)) .modele-item {
        margin-bottom: 0;
    }
}

.card p {
    margin: 0;
    color: #57534e;
}

.field {
    margin-bottom: 1rem;
}

/* Une colonne par défaut, deux à partir de 480px : `1fr 1fr` sans repli ne
   force jamais les colonnes sous leur contenu minimal (un `<input>`/`<button>`
   garde sa taille naturelle), donc en dessous de ce contenu combiné, toute
   la ligne — et avec elle la page entière — déborde du viewport plutôt que
   de rétrécir. Repéré via une capture réelle où le placeholder du champ
   "Nouvelle zone" était tronqué à "Ex. Nord Basse-". */
.field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 480px) {
    .field-row {
        grid-template-columns: 1fr 1fr;
    }
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #d6d3d1;
    border-radius: 0.5rem;
    font-family: inherit;
    background: white;
    color: #1c1917;
}

.field textarea {
    min-height: 5rem;
    resize: vertical;
}

.search-field select {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: #1c1917;
    width: 100%;
    outline: none;
}

.search-field input.input-invalid {
    color: #dc2626;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 860px) {
    /* La galerie occupe toute la largeur de detail-grid (voir grid-template-
       areas) : colonnes flexibles qui s'adaptent au nombre de photos plutôt
       qu'un nombre fixe. */
    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        gap: 0.75rem;
    }
}

.photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.375rem;
    overflow: hidden;
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-thumb button {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
}

.muted {
    color: #78716c;
    text-align: center;
    padding: 2rem 0;
}

.equip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.equip-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    padding: 0.5rem 0.25rem;
    background: white;
    border: 2px solid #d6d3d1;
    border-radius: 0.6rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.equip-chip--off {
    border-color: #fca5a5;
    background: #fef2f2;
}

.equip-chip--on {
    border-color: #16a34a;
    background: #f0fdf4;
}

/* Choix neutre entre options également valides (ex. type de modèle
   d'e-mail) — pas d'état bon/mauvais, donc pas de rouge/vert comme pour
   un équipement fonctionnel ou non (--on/--off ci-dessus). */
.equip-chip--selected {
    border-color: #2563eb;
    background: #eff6ff;
}

.equip-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.equip-label {
    font-size: 0.68rem;
    line-height: 1.15;
    text-align: center;
    color: #57534e;
}

.equip-chip--static {
    cursor: default;
}

.muted-inline {
    color: #78716c;
    margin: 0;
}

.document-list {
    margin-bottom: 0.75rem;
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.document-item a {
    color: #0f766e;
    text-decoration: none;
    word-break: break-word;
}

.document-item button {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.spacer {
    height: 1rem;
}

/* ── Assistant multi-étapes (formulaire logement) ─────────────────────────── */

.wizard-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: white;
}

.wizard-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: white;
    border-bottom: 1px solid #e7e5e4;
    z-index: 10;
}

.wizard-topbar .wizard-quit,
.wizard-topbar .wizard-save {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1c1917;
    text-decoration: none;
    background: none;
    border: 1px solid #d6d3d1;
    border-radius: 2rem;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}

.wizard-brand {
    font-weight: 700;
    color: #0f766e;
    letter-spacing: 0.02em;
}

.wizard-content {
    flex: 1;
    margin-top: 3.5rem;
    margin-bottom: 5.5rem;
    overflow-y: auto;
}

.wizard-screen {
    padding-top: 2rem;
    max-width: 560px;
}

.step-eyebrow {
    color: #78716c;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
}

.step-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.5rem;
}

.step-subtitle {
    color: #57534e;
    margin: 0 0 1.75rem;
    line-height: 1.4;
}

.wizard-progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 4rem;
    padding: 0 1.25rem;
    background: white;
}

.wizard-progress-bars {
    display: flex;
    gap: 0.3rem;
}

.wizard-progress-bars span {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #e7e5e4;
}

.wizard-progress-bars span.filled {
    background: #0f766e;
}

.wizard-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: white;
    border-top: 1px solid #e7e5e4;
    z-index: 10;
}

.wizard-link {
    background: none;
    border: none;
    color: #1c1917;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.5rem 0;
}

.wizard-next {
    width: auto;
    display: inline-block;
    padding: 0.85rem 1.75rem;
}

.wizard-next:disabled {
    background: #d6d3d1;
    cursor: not-allowed;
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 2px solid #d6d3d1;
    border-radius: 0.75rem;
    background: white;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1c1917;
}

.type-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.5rem;
}

.type-card.selected {
    border-color: #0f766e;
    background: #f0fdfa;
}

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    border: 2px dashed #d6d3d1;
    border-radius: 0.75rem;
    text-align: center;
    color: #57534e;
    cursor: pointer;
    margin-bottom: 1rem;
}

.dropzone.dragover {
    border-color: #0f766e;
    background: #f0fdfa;
}

.dropzone strong {
    color: #1c1917;
    font-size: 1.05rem;
}

/* ── Portail voyageurs (page publique, responsive ordi + mobile) ─────────────── */
.voyageur-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

@media (min-width: 860px) {
    .voyageur-page {
        max-width: 1180px;
        padding: 2rem 2rem 3rem;
    }
}

.hero-banner {
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: -2.25rem;
}

.hero-banner img {
    display: block;
    width: 100%;
    height: 11rem;
    object-fit: cover;
}

@media (min-width: 860px) {
    .hero-banner img {
        height: 22rem;
    }

    .hero-banner {
        margin-bottom: -3rem;
    }
}

.search-card {
    position: relative;
    z-index: 1;
    background: white;
    border-radius: 1rem;
    padding: 0.9rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0.5rem 1.5rem;
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f5f5f4;
    border-radius: 0.6rem;
    padding: 0.55rem 0.75rem;
}

/* Champ dates/voyageurs : un bouton plutôt qu'un input, qui ouvre un
   calendrier ou des compteurs en popover au lieu de les afficher en
   permanence — sinon la barre de recherche, pensée pour rester une pilule
   fine sur une seule ligne, se transforme en bloc qui prend toute la page. */
.search-field-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    color: #1c1917;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.search-popover {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    z-index: 10;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 1rem;
    width: 20rem;
    max-width: calc(100vw - 2rem);
}

.search-popover--compact {
    width: 16rem;
}

.search-popover--dates {
    width: 38rem;
}

.search-calendars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.search-calendar-col {
    min-width: 0;
}

.calendar-month-label {
    margin: 0 0 0.4rem;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}

@media (max-width: 640px) {
    .search-popover--dates {
        width: min(22rem, calc(100vw - 2rem));
    }

    .search-calendars {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
}

.stepper-row + .stepper-row {
    border-top: 1px solid #e7e5e4;
}

.stepper-label {
    font-size: 0.9rem;
    font-weight: 600;
}

.stepper-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stepper-btn {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #d6d3d1;
    background: white;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: #1c1917;
}

.stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.stepper-controls span {
    min-width: 1.2rem;
    text-align: center;
    font-weight: 600;
}

.search-field input {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: #1c1917;
    width: 100%;
    outline: none;
}

.search-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.search-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

@media (min-width: 860px) {
    .search-card {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        border-radius: 999px;
        padding: 0.4rem 0.4rem 0.4rem 1.5rem;
        max-width: 900px;
        margin: 0 auto 3rem;
    }

    .search-field {
        background: none;
        border-radius: 0;
        border-right: 1px solid #e7e5e4;
        padding: 0.5rem 1.25rem;
    }

    .search-field--main {
        padding-left: 0;
        flex: 1.4;
    }

    .search-row {
        display: contents;
    }

    .search-row .search-field {
        flex: 1;
    }

    .search-card > .search-field:last-of-type {
        border-right: none;
    }

    .search-card .btn {
        width: auto;
        flex-shrink: 0;
        border-radius: 999px;
        padding: 0.7rem 2rem;
        align-self: center;
    }

    /* reservations.html a plus de champs (6 filtres + 2 dates + bouton) que
       le gabarit pilule à 4 champs du site de réservation : elle a besoin de
       pouvoir passer à la ligne plutôt que de s'écraser dans un pilule
       trop étroite. */
    .search-card--wide {
        flex-wrap: wrap;
        border-radius: 1.25rem;
        max-width: 1100px;
        padding: 0.75rem;
    }

    .search-card--wide .search-field {
        flex: 1 1 12rem;
        border-right: none;
        background: #f5f5f4;
        border-radius: 0.6rem;
    }

    .search-card--wide .search-field--main {
        flex-basis: 100%;
    }

    .search-card--wide .search-row {
        display: contents;
    }

    .search-card--wide .btn {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

.section-head {
    margin: 0 0 0.75rem;
}

.section-head h2 {
    font-size: 1.1rem;
    margin: 0 0 0.15rem;
}

.section-head p {
    margin: 0;
    color: #78716c;
    font-size: 0.85rem;
}

@media (min-width: 860px) {
    .section-head h2 {
        font-size: 1.5rem;
    }

    .section-head p {
        font-size: 0.95rem;
    }
}

.section-subhead {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #78716c;
}

.section-subhead:first-child {
    margin-top: 0;
}

/* Liste de modèles repliée par défaut (<details>) : à plat, un corps de
   message affiché en entier pour chaque modèle fait vite défiler l'écran
   sur plusieurs pages sans rien de plus lisible qu'un titre + sujet. */
.modele-item {
    display: block;
    background: white;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.modele-item summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    list-style: none;
}

.modele-item summary::-webkit-details-marker {
    display: none;
}

.modele-item summary::marker {
    content: '';
}

.modele-item summary::after {
    content: '▾';
    margin-left: auto;
    flex: 0 0 auto;
    color: #a8a29e;
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.modele-item[open] summary::after {
    transform: rotate(180deg);
}

.modele-nom {
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modele-item .modele-corps {
    padding: 0 0.75rem 0.75rem;
    margin: 0;
    font-size: 0.78rem;
    color: #57534e;
    white-space: pre-wrap;
}

.modele-item .mission-actions {
    padding: 0 0.75rem 0.75rem;
    margin-bottom: 0;
}

.modele-item summary .mission-badge {
    margin: 0;
    flex: 0 0 auto;
}

.fiche-complete {
    margin-top: 0.4rem;
}

.fiche-complete summary {
    cursor: pointer;
    color: #1c1917;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    list-style: none;
}

.fiche-complete summary::-webkit-details-marker {
    display: none;
}

.fiche-complete summary::marker {
    content: '';
}

.fiche-complete[open] summary {
    margin-bottom: 0.4rem;
}

.scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.75rem;
    scroll-snap-type: x mandatory;
}

@media (min-width: 860px) {
    .scroll-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        overflow: visible;
        scroll-snap-type: none;
        gap: 1.25rem;
        margin-bottom: 2.5rem;
    }
}

.listing-card {
    flex: 0 0 auto;
    width: 11.5rem;
    background: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
}

@media (min-width: 860px) {
    .listing-card {
        width: auto;
    }
}

.listing-media {
    position: relative;
}

.listing-media img {
    display: block;
    width: 100%;
    height: 7.5rem;
    object-fit: cover;
}

.listing-icon-row {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    right: 0.4rem;
    display: flex;
    gap: 0.3rem;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 999px;
    padding: 0.25rem 0.4rem;
}

.listing-icon-row img {
    width: 0.85rem;
    height: 0.85rem;
    filter: invert(1);
}

.listing-badge {
    position: absolute;
    bottom: 0.4rem;
    left: 0.4rem;
    background: white;
    color: #1c1917;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.listing-body {
    padding: 0.6rem 0.7rem 0.75rem;
}

.listing-body h3 {
    font-family: var(--ios-font);
    font-size: 0.92rem;
    margin: 0 0 0.1rem;
}

.listing-ville {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    color: #78716c;
}

.listing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: #57534e;
}

.listing-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.listing-stats svg {
    width: 0.85rem;
    height: 0.85rem;
}

.category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

@media (min-width: 860px) {
    .category-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}

.category-card {
    position: relative;
    display: block;
    width: 100%;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    overflow: hidden;
    padding: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.category-card--active {
    border-color: #0f766e;
}

.category-card img {
    display: block;
    width: 100%;
    height: 6.5rem;
    object-fit: cover;
}

@media (min-width: 860px) {
    .category-card img {
        height: 11rem;
    }
}

.category-label {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    background: white;
    color: #1c1917;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
}

/* ── Assistant multi-étapes (formulaire logement) ─────────────────────── */

.wizard-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.wizard-save-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.wizard-brand {
    font-family: var(--ios-font);
    font-weight: 700;
    color: #0f766e;
    letter-spacing: 0.01em;
}

.wizard-content {
    margin-top: 4rem;
    margin-bottom: 6rem;
}

.step-eyebrow {
    color: #78716c;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
}

.step-title {
    font-family: var(--ios-font);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.5rem;
}

.step-subtitle {
    color: #57534e;
    margin: 0 0 1.5rem;
    line-height: 1.4;
}

.wizard-progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 4.25rem;
    z-index: 20;
    padding: 0 1.1rem;
}

.wizard-progress-bars {
    display: flex;
    gap: 0.3rem;
}

.wizard-progress-bars span {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.5);
}

.wizard-progress-bars span.filled {
    background: #0f766e;
}

.wizard-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.08);
}

.wizard-link {
    background: none;
    border: none;
    color: #1c1917;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.5rem 0;
}

.wizard-next {
    width: auto;
    display: inline-block;
    padding: 0.8rem 1.75rem;
}

.wizard-next:disabled {
    background: #d6d3d1;
    cursor: not-allowed;
}

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2.25rem 1rem;
    border: 2px dashed #d6d3d1;
    border-radius: 0.75rem;
    text-align: center;
    color: #57534e;
    cursor: pointer;
    margin-bottom: 1rem;
}

.dropzone.dragover {
    border-color: #0f766e;
    background: #f0fdfa;
}

.dropzone strong {
    color: #1c1917;
    font-size: 1.02rem;
}

/* ── Annonce publique (fiche logement voyageurs) ──────────────────────────── */
.annonce-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

@media (min-width: 860px) {
    .annonce-page {
        max-width: 1180px;
        padding: 2rem 2rem 3.5rem;
    }
}

.annonce-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.annonce-back {
    color: #0f766e;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.annonce-header h1 {
    font-size: 1.15rem;
    margin: 0;
}

@media (min-width: 860px) {
    .annonce-header h1 {
        font-size: 1.5rem;
    }
}

.annonce-header-sep {
    color: #a8a29e;
    font-weight: 400;
}

.annonce-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.annonce-gallery-main {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
}

.annonce-gallery-main img {
    display: block;
    width: 100%;
    height: 14rem;
    object-fit: cover;
}

.annonce-icon-row {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.6rem;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
}

.annonce-icon-row .icon-stat img {
    width: 1.1rem;
    height: 1.1rem;
    filter: invert(1);
    display: block;
}

.annonce-gallery-side {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.annonce-gallery-side img {
    display: block;
    width: 100%;
    height: 5rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

@media (min-width: 860px) {
    .annonce-gallery {
        grid-template-columns: 2fr 1fr;
        height: 26rem;
    }

    .annonce-gallery-main img {
        height: 100%;
    }

    .annonce-gallery-side {
        grid-template-columns: 1fr;
        height: 100%;
    }

    .annonce-gallery-side img {
        height: 100%;
    }
}

.annonce-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 860px) {
    .annonce-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem;
    }

    .annonce-main {
        flex: 1;
        min-width: 0;
    }

    .annonce-sidebar {
        width: 320px;
        flex-shrink: 0;
        position: sticky;
        top: 1.5rem;
    }
}

.annonce-badge-new {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #1c1917;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.annonce-location {
    color: #78716c;
    font-size: 0.85rem;
    margin: 0 0 0.35rem;
}

.annonce-title {
    font-size: 1.4rem;
    margin: 0 0 0.35rem;
}

.annonce-subtitle {
    color: #57534e;
    font-weight: 600;
    margin: 0 0 1.5rem;
}

.annonce-description {
    line-height: 1.6;
    color: #292524;
    margin: 0 0 1.75rem;
    white-space: pre-line;
}

.annonce-section {
    border-top: 1px solid #e7e5e4;
    padding-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.annonce-section h3 {
    font-family: var(--ios-font);
    font-size: 1.1rem;
    margin: 0 0 0.9rem;
}

.annonce-equip-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
}

.annonce-equip-list span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #292524;
}

.annonce-equip-list img {
    width: 1.1rem;
    height: 1.1rem;
}

.annonce-infos {
    margin: 0;
}

.annonce-infos dt {
    font-weight: 600;
    margin-top: 0.75rem;
}

.annonce-infos dt:first-child {
    margin-top: 0;
}

.annonce-infos dd {
    margin: 0.15rem 0 0;
    color: #57534e;
    white-space: pre-line;
}

.annonce-booking-card {
    background: white;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.annonce-booking-card .btn:disabled {
    background: #d6d3d1;
    cursor: not-allowed;
}

.annonce-booking-card h3 {
    font-family: var(--ios-font);
    font-size: 1rem;
    margin: 0.4rem 0 0;
}

#payment-element {
    min-height: 2.5rem;
}

/* ── Calendrier réservations ──────────────────────────────────────────── */

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.planning-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.view-toggle {
    display: flex;
    background: #f5f5f4;
    border-radius: 2rem;
    padding: 0.2rem;
    gap: 0.2rem;
}

.view-toggle-btn {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #57534e;
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    cursor: pointer;
}

.view-toggle-btn.active {
    background: #0f766e;
    color: white;
}

.planning-today {
    background: #ecfdf5;
}

.planning-header-cell.planning-today {
    background: #ccfbf1;
    color: #0f766e;
}

.calendar-nav span {
    font-weight: 600;
    text-transform: capitalize;
}

.calendar-grid {
    display: grid;
    /* 14 sous-colonnes (2 par jour) plutôt que 7 : permet aux traits de
       réservation (logement-calendrier.js) de commencer/finir à la moitié
       exacte d'une case. Chaque case de jour occupe ses 2 sous-colonnes, donc
       l'espacement visible entre jours reste identique à un simple gap 7
       colonnes — voir renderReservationBars. */
    grid-template-columns: repeat(14, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #78716c;
    padding-bottom: 0.25rem;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.65rem;
    background: white;
    font: inherit;
    font-size: 0.8rem;
    color: #1c1917;
    cursor: pointer;
    /* Sans ça, glisser le doigt sur la grille fait défiler la page au lieu de
       sélectionner une plage de jours (logement-calendrier.js). */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

/* Surbrillance pendant un glissement en cours (avant relâchement) — voir
   updateSelectionHighlight dans logement-calendrier.js. */
.calendar-day--selecting {
    box-shadow: inset 0 0 0 2px #0f766e;
}

/* Jours hors mois affiché (fin du mois précédent / début du suivant) : de
   simples repères de position dans la grille, pas des jours cliquables au
   même titre — un chiffre en transparence plutôt qu'une case à part
   entière. */
.calendar-day--outside {
    background: transparent;
    color: rgba(28, 25, 23, 0.3);
}

/* Une seule couleur "réservé", peu importe le statut précis (confirmée, en
   attente, terminée) — le détail du statut reste consultable en tapant le
   jour, la vue mensuelle n'a besoin que de distinguer libre / réservé /
   bloqué. */
.calendar-day--confirmee,
.calendar-day--en_attente,
.calendar-day--terminee {
    background: #252120;
    color: #ffffff;
}

/* Chevauchement de réservations : hachures rouges — un vrai conflit à
   régler, pas juste une indisponibilité normale. */
.calendar-day--overlap {
    background-image: repeating-linear-gradient(
        -45deg,
        #f3c6bd,
        #f3c6bd 5px,
        #e0796a 5px,
        #e0796a 10px
    );
    color: #ffffff;
    font-weight: 600;
}

/* Jour bloqué manuellement (séjour propriétaire, incident, autre raison) —
   même hachure grise que .planning-bar--blocage dans la vue Gantt, pour
   rester cohérent entre les deux vues. Ce n'est pas une réservation : pas
   de trait de durée associé (voir renderReservationBars). */
.calendar-day--blocage {
    background-image: repeating-linear-gradient(
        -45deg,
        #e7e5e4,
        #e7e5e4 4px,
        #d6d3d1 4px,
        #d6d3d1 8px
    );
    color: #57534e;
    font-weight: 600;
}

/* Anneau plutôt qu'un remplissage : le jour du jour doit rester lisible
   quel que soit son état par ailleurs (libre, réservé, bloqué). */
.calendar-day--today {
    box-shadow: inset 0 0 0 2px #c1cfef;
}

/* Trait de durée d'une réservation, dessiné par-dessus le bas de la case
   (voir logement-calendrier.js) — épais de 6px, calé en bas de la ligne de
   la grille, bouts arrondis gérés au cas par cas en JS selon qu'ils tombent
   sur une vraie borne du séjour ou une simple coupure de ligne. */
.calendar-reservation-bar {
    position: relative;
    z-index: 2;
    align-self: end;
    height: 6px;
    /* Marge gauche/droite : évite que deux traits se touchent pile à la
       jointure arrivée/départ (jour de rotation) ou d'une ligne à l'autre. */
    margin: 0 2px 4px;
    pointer-events: none;
}

/* Calendrier de réservation publique (annonce.html) : dates passées ou déjà
   prises grisées et non cliquables, sélection arrivée/départ mise en avant. */
.calendar-day--booked {
    background: #f5f5f4;
    color: #d6d3d1;
    text-decoration: line-through;
}

.calendar-day:disabled {
    cursor: not-allowed;
}

.calendar-day--selected {
    background: #0f766e;
    border-color: #0f766e;
    color: white;
    font-weight: 700;
}

.calendar-day--in-range {
    background: #ccfbf1;
    border-color: #5eead4;
}

.calendar-detail {
    margin-bottom: 0.75rem;
}

.calendar-warning {
    color: #b91c1c;
    font-weight: 600;
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}

.reservation-chip {
    display: block;
    background: white;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
}

.reservation-chip strong {
    display: block;
    font-size: 0.9rem;
}

.reservation-chip span {
    font-size: 0.78rem;
    color: #57534e;
}

/* Variantes <button> de .btn-bubble/.reservation-chip (déclencheurs de
   modale "zoom" — data-modal-open) : neutralise le chrome par défaut du
   navigateur sans toucher aux <a> qui utilisent encore ces classes ailleurs
   dans le site. */
button.btn-bubble {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

button.reservation-chip {
    width: 100%;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.planning-scroll {
    overflow-x: auto;
    margin-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
}

.planning-grid {
    display: grid;
    grid-auto-rows: 2.6rem;
    align-items: stretch;
    font-size: 0.72rem;
}

.planning-header-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #e7e5e4;
    background: #fafaf9;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.2rem;
}

.planning-logement-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: white;
    border: 1px solid #e7e5e4;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.planning-logement-col a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.6rem;
    color: #0f766e;
    text-decoration: none;
    font-weight: 600;
}

.planning-logement-photo {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.planning-day-cell {
    border: 1px solid #e7e5e4;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.planning-day-price {
    color: #a8a29e;
    font-size: 0.68rem;
}

.planning-bar {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.3rem 0;
    padding: 0 0.4rem;
    border-radius: 0.3rem;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
}

.planning-bar--airbnb {
    background: #fecdd3;
}

.planning-bar--booking {
    background: #bfdbfe;
}

.planning-bar--direct {
    background: #99f6e4;
}

.planning-bar--manuel {
    background: #fde68a;
}

/* Bloqué (séjour propriétaire, incident, autre raison) — hachures plutôt
   qu'un aplat, pour rester visuellement distinct d'une vraie réservation. */
.planning-bar--blocage {
    background-image: repeating-linear-gradient(
        -45deg,
        #e7e5e4,
        #e7e5e4 4px,
        #d6d3d1 4px,
        #d6d3d1 8px
    );
}

.planning-bar--overlap {
    outline: 2px solid #b91c1c;
    outline-offset: -2px;
}

.planning-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
}

.planning-bar--airbnb .planning-bar-icon {
    background: #e11d48;
}

.planning-bar--booking .planning-bar-icon {
    background: #1d4ed8;
}

.planning-bar--direct .planning-bar-icon {
    background: #0f766e;
}

.planning-bar--manuel .planning-bar-icon {
    background: #b45309;
}

.planning-bar--blocage .planning-bar-icon {
    background: #57534e;
}

/* ── Portail voyageur : pré check-in multilingue ──────────────────────── */

.lang-switch {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.lang-btn {
    background: white;
    border: 1px solid #d6d3d1;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #57534e;
    cursor: pointer;
}

.lang-btn.active {
    background: #0f766e;
    border-color: #0f766e;
    color: white;
}

.portail-bullets {
    margin: 0 0 1.75rem;
    padding-left: 1.25rem;
    color: #292524;
    line-height: 1.6;
}

.portail-bullets li {
    margin-bottom: 0.6rem;
}

.portail-footer {
    margin-top: 1.5rem;
    text-align: center;
}

.portail-footer a {
    font-size: 0.78rem;
    color: #78716c;
    text-decoration: underline;
}

/* --- Module 4 : missions (entretien) --- */

.mission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.mission-actions .btn {
    flex: 0 0 auto;
}

/* Le liseré gauche porte la criticité : c'est la fenêtre entre le départ et
   l'arrivée suivante, pas la date, qui dit l'urgence d'une mission. */
.mission-chip {
    position: relative;
    border-left: 4px solid transparent;
}

.mission-chip--tendue {
    border-left-color: #f59e0b;
}

.mission-chip--critique {
    border-left-color: #dc2626;
}

/* Nom de l'intervenant + ses pastilles de métier, sur sa propre ligne : à
   1.6rem les pastilles écraseraient la ligne de détail (0.78rem) juste
   au-dessus si elles y étaient mêlées. */
/* .mission-chip-intervenant (une classe) : même piège de spécificité que
   .metier-pastille ci-dessous — `.reservation-chip span` (classe + élément)
   l'emportait sur une classe seule et imposait 0.78rem/#57534e ici, quelle
   que soit la valeur choisie. Qualifié par son parent pour l'emporter. */
.mission-chip .mission-chip-intervenant {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: #292524;
}

.mission-badge {
    display: inline-block;
    margin-top: 0.35rem;
    margin-right: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    background: #f5f5f4;
    color: #57534e;
}

.mission-badge--tendue {
    background: #fef3c7;
    color: #92400e;
}

.mission-badge--critique {
    background: #fee2e2;
    color: #991b1b;
}

.mission-badge--statut-en_cours {
    background: #dbeafe;
    color: #1e40af;
}

.mission-badge--statut-terminee {
    background: #dcfce7;
    color: #166534;
}

.mission-badge--statut-validee {
    background: #bbf7d0;
    color: #14532d;
}

.mission-badge--statut-annulee {
    background: #e7e5e4;
    color: #78716c;
}

.mission-etat {
    margin-bottom: 0.75rem;
}

.mission-alerte {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    background: #fef3c7;
    color: #92400e;
}

.mission-alerte--critique {
    background: #fee2e2;
    color: #991b1b;
}

.mission-erreur {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    background: #fee2e2;
    color: #991b1b;
}

/* Confirmation après « Générer » : un fond propre est nécessaire ici, pas
   juste du texte gris — cette zone flotte sur le fond photo flouté de la
   page (.page-bg--soft), où un gris clair devient quasi invisible. */
.mission-info {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    background: #dcfce7;
    color: #166534;
}

.mission-contexte {
    margin-top: 0;
}

.mission-media {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mission-media video.photo-thumb {
    width: 100%;
}

.field-aide {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: #78716c;
}

.field-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.85rem;
    color: #292524;
    cursor: pointer;
}

.field-checkbox input {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

/* --- Intervenants : métiers en pastilles, coordonnées --- */

.metier-icone {
    font-size: 1.35rem;
    line-height: 1;
}

.metier-pastilles {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

/* Les icônes de métier de la liste Équipe : assez grandes pour se lire
   d'un coup d'œil, sans pousser le nom sur une deuxième ligne. */
/* Sélecteur qualifié (.metier-pastilles .metier-pastille), volontairement
   plus spécifique qu'une simple classe : `.reservation-chip span` (une
   classe + un élément, ligne 1679) est plus spécifique qu'une classe seule
   et imposait 0.78rem ici, quelle que soit la valeur mise ci-dessous — trois
   augmentations successives (1.05 → 1.6 → 2.1 → 3rem) n'ont donc jamais eu
   le moindre effet visible avant ce correctif. */
.metier-pastilles .metier-pastille {
    font-size: 1.7rem;
    line-height: 1;
}

.intervenant-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.intervenant-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.intervenant-tel {
    color: #1e40af;
    text-decoration: none;
}

/* --- Procédures par logement --- */

.procedure-carte {
    background: white;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.procedure-tete {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.procedure-carte textarea {
    width: 100%;
    box-sizing: border-box;
}

.procedure-etat {
    font-size: 0.75rem;
    color: #78716c;
}

/* Sur la fiche mission, la procédure est un rappel, pas un champ : fond
   distinct et retours à la ligne préservés tels que saisis. */
.procedure-mission {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    white-space: pre-wrap;
}

/* --- Zones d'intervention ---
   Deux listes denses (une ligne par zone, une ligne par logement) plutôt
   que des cartes : avec .btn (pleine largeur, 1rem de padding) en action de
   chaque zone, la liste devenait vite plus longue que l'écran et repoussait
   l'affectation des logements hors champ. */

.zones-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Mobile d'abord : tout empilé, jamais deux éléments à faire tenir sur une
   même ligne. La tentative précédente gardait tout sur une ligne (flex-wrap
   seul) — un item ne passe à la ligne suivante QUE si sa LARGEUR déborde ;
   un texte qui s'enroule sur plusieurs lignes ne déclenche aucun passage à
   la ligne des voisins, qui restent alignés au centre de cette hauteur et
   semblent flotter au milieu du texte. D'où Renommer/Supprimer traversant
   "0 logement(s) · 0 intervenant(s)" replié sur 3 lignes. */
.zone-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    background: white;
    border-radius: 0.4rem;
    margin-bottom: 0.35rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.zone-row-nom {
    font-weight: 600;
    font-size: 0.9rem;
}

.zone-row-compte {
    font-size: 0.78rem;
    color: #78716c;
}

.zone-row-actions {
    display: flex;
    gap: 0.5rem;
}

/* Boutons texte, pas .btn : une ligne de liste répétée n'a pas besoin
   d'un bouton pleine largeur de 1rem de padding par action. */
.zone-row-action {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0.2rem 0.35rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: #0f766e;
    cursor: pointer;
}

.zone-row-action--danger {
    color: #b91c1c;
}

.zone-ligne {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem;
}

/* Nom sur sa propre ligne, jamais tronqué : à largeur fixe partagée avec
   le select, "Appartement Roch" devenait "Apparte..." — illisible, deux
   logements différents pouvaient tronquer pareil. */
.zone-ligne strong {
    font-size: 0.85rem;
}

.zone-ligne select {
    width: 100%;
}

/* À partir de 480px (plancher déjà vérifié pour le reste de l'app), la
   ligne + colonne alignée redevient tenable : zone-row repasse en ligne
   avec les actions systématiquement sur leur propre ligne (flex-basis:100%
   les y force sans dépendre de la hauteur des voisins, donc sans le
   chevauchement précédent), et zone-ligne remet nom + select côte à côte,
   le select à largeur fixe pour que la colonne des selects s'aligne. */
@media (min-width: 480px) {
    .zone-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem 0.6rem;
    }

    .zone-row-compte {
        flex: 1;
        min-width: 0;
    }

    .zone-row-actions {
        flex: 0 0 100%;
        justify-content: flex-end;
    }

    .zone-ligne {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .zone-ligne strong {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .zone-ligne select {
        flex: 0 0 auto;
        width: 12rem;
    }
}

@media (min-width: 860px) {
    /* Les deux listes côte à côte : la liste des zones, courte une fois
       compactée, laissait un grand vide à droite en pleine largeur — et
       surtout la liste des logements restait hors champ, plus bas. */
    .zones-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .zones-layout > div {
        flex: 1;
        min-width: 0;
    }
}

/* --- Fiche client (clients.html) --- */

/* Même mécanique que .ios-modal-backdrop/.ios-modal-card (zoom depuis le
   centre) : plus de toggle via [hidden] (qui empêche toute transition,
   display:none coupant court à l'animation), l'overlay reste dans le DOM et
   bascule via .is-open (opacité/scale), piloté par clients.js. */
.client-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(28, 25, 23, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.client-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.client-detail {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #f5f5f4;
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}

@media (min-width: 860px) {
    /* Même largeur que .ios-modal-card (formulaires Logement/Mission/
       Réservation) à ce palier. */
    .client-detail {
        max-width: 700px;
    }
}

.client-overlay.is-open .client-detail {
    transform: scale(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .client-overlay,
    .client-detail {
        transition: none;
    }
}

.client-detail #det-etat {
    margin-top: 0.5rem;
}

#fermer-detail {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

/* --- Enquête satisfaction (portail voyageur) --- */

.avis-etoiles {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.avis-etoile {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    color: #d6d3d1;
}

.avis-etoile--pleine {
    color: #f59e0b;
}

#avis-form textarea {
    width: 100%;
    box-sizing: border-box;
}

#signalement-form input,
#signalement-form textarea {
    width: 100%;
    box-sizing: border-box;
}