/* =====================================================================
   SERENA 360 — Feuille de style du site public
   Direction : « le claustra d'Abidjan ».
   Trame de brise-soleil, vert profond, doré, crème.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Jetons
   --------------------------------------------------------------------- */
:root {
    /* Couleurs */
    --vert-nuit: #0B2019;
    --vert-profond: #123D31;
    --vert-moyen: #1B5443;
    --vert-clair: #2F7C63;
    --dore: #BF8D35;
    --dore-clair: #E8C87A;
    --dore-sombre: #8A6B33;
    /* Doré assombri, utilisé quand la couleur porte une information
       lisible sur fond clair (notes, marqueurs). Contraste AA vérifié. */
    --dore-texte: #916B28;
    --creme: #FBF8F2;
    --ivoire: #F2ECDF;
    --blanc: #FFFFFF;
    --encre: #1E2421;
    --encre-douce: #636E68;
    --ligne: #E4DDCD;
    --ligne-forte: #D3C8AF;
    --danger: #A33B2A;
    --danger-fond: #FBEDEA;
    --succes: #1F6B4D;
    --succes-fond: #E9F3EE;
    --attention: #8A6B33;
    --attention-fond: #FAF2E1;
    --info-fond: #ECF1F0;

    /* Typographie */
    --police-titre: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --police-texte: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Rayons — repris du design system du prototype */
    --r-s: 12px;
    --r-m: 18px;
    --r-l: 28px;

    /* Ombres : toujours teintées de vert, jamais de gris neutre */
    --ombre-s: 0 1px 2px rgba(11, 32, 25, .06), 0 2px 8px rgba(11, 32, 25, .04);
    --ombre-m: 0 2px 6px rgba(11, 32, 25, .06), 0 12px 28px rgba(11, 32, 25, .08);
    --ombre-l: 0 4px 12px rgba(11, 32, 25, .08), 0 28px 60px rgba(11, 32, 25, .14);

    /* Rythme */
    --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
    --largeur: 1240px;
    --section-y: clamp(4rem, 9vw, 7.5rem);

    --transition: 260ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------------
   L'attribut hidden doit toujours l'emporter

   « hidden » ne vaut, dans la feuille du navigateur, qu'un simple
   « display: none ». La moindre regle d'auteur qui declare un display le
   contredit — et l'element reste visible alors que le script vient de le
   masquer. C'est ce qui affichait un « 0 » dans la pastille des favoris
   d'un visiteur qui n'en avait aucun.

   Le !important est ici a sa place : masquer est une intention explicite
   du balisage, jamais une question de mise en page.
   --------------------------------------------------------------------- */
[hidden] {
    display: none !important;
}


/* La trame de claustra : quatre arcs par tuile qui s'entrelacent en
   résille, comme les écrans de béton perforé des immeubles abidjanais.
   Réservée aux fonds sombres, à très faible opacité. */
.claustra {
    position: relative;
    isolation: isolate;
}

.claustra::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(circle at 50% 0, transparent 46.5%, rgba(232, 200, 122, .14) 47.5%, rgba(232, 200, 122, .14) 50.5%, transparent 51.5%),
        radial-gradient(circle at 50% 100%, transparent 46.5%, rgba(232, 200, 122, .14) 47.5%, rgba(232, 200, 122, .14) 50.5%, transparent 51.5%),
        radial-gradient(circle at 0 50%, transparent 46.5%, rgba(232, 200, 122, .14) 47.5%, rgba(232, 200, 122, .14) 50.5%, transparent 51.5%),
        radial-gradient(circle at 100% 50%, transparent 46.5%, rgba(232, 200, 122, .14) 47.5%, rgba(232, 200, 122, .14) 50.5%, transparent 51.5%);
    background-size: 68px 68px;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   2. Réinitialisation
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

/* ---------------------------------------------------------------------
   Débordement horizontal : déclaré sur body seul, jamais sur html

   Deux pièges se répondent ici, et il faut les éviter tous les deux.

   1. overflow-x: hidden force le navigateur à calculer overflow-y en
      « auto » : l'élément devient un conteneur de défilement. Tout
      position:sticky d'un descendant se cale alors sur lui au lieu de la
      fenêtre, et ne colle plus jamais — sans le moindre message d'erreur.
      C'est ce qui immobilisait le panneau de filtres.

   2. overflow-x: clip évite bien ce premier piège, mais découpe aussi les
      descendants en position:fixed — le tiroir de navigation mobile s'y
      retrouvait réduit à une boîte au sommet de l'écran.

   La sortie tient dans une règle de la spécification : quand html vaut
   « visible », c'est l'overflow de body qui est reporté sur la fenêtre, et
   body lui-même prend alors la valeur « visible ». Le débordement reste
   donc coupé, sans qu'aucun conteneur de défilement ne soit créé, et sans
   rien découper de ce qui est fixé.

   Ne rajoutez pas overflow-x sur html : cela réactiverait le piège 1.
   --------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    /* dvh suit la barre d'adresse mobile, qui se retracte au defilement :
       avec 100vh, la page reserve toujours la hauteur maximale et ajoute un
       defilement fantome de quelques dizaines de pixels. La ligne vh reste
       en repli pour les navigateurs anciens. */
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--creme);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Reporté sur la fenêtre par la règle décrite ci-dessus : body reste
       « visible », donc ni conteneur de défilement, ni découpe du fixe. */
    overflow-x: hidden;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    color: var(--vert-profond);
    text-decoration-color: color-mix(in srgb, var(--vert-profond) 30%, transparent);
    text-underline-offset: 3px;
    transition: color var(--transition);
}

a:hover {
    color: var(--vert-clair);
}

:focus-visible {
    outline: 2px solid var(--dore);
    outline-offset: 3px;
    border-radius: 3px;
}

::selection {
    background: var(--dore);
    color: var(--vert-nuit);
}

/* ---------------------------------------------------------------------
   3. Typographie
   --------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
    font-family: var(--police-titre);
    font-weight: 550;
    line-height: 1.1;
    letter-spacing: -.015em;
    color: var(--vert-profond);
    font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 40;
    text-wrap: balance;

    /* Les mots longs (« l'accompagnement ») doivent pouvoir se couper
       plutôt que déborder sur un écran de 320 px. */
    overflow-wrap: break-word;
    hyphens: auto;
}

h1 {
    font-size: clamp(2.4rem, 5.6vw, 4.1rem);
    line-height: 1.04;
}

h2 {
    font-size: clamp(1.85rem, 3.6vw, 2.85rem);
}

h3 {
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 20;
}

h4 {
    font-size: 1.05rem;
    font-family: var(--police-texte);
    font-weight: 600;
    letter-spacing: 0;
}

p {
    text-wrap: pretty;
}

/* Étiquette en capitales : sert d'index (quartier, section, statut) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dore-sombre);
    margin-bottom: 1rem;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--dore);
    flex: none;
}

.eyebrow--clair {
    color: var(--dore-clair);
}

.eyebrow--clair::before {
    background: var(--dore-clair);
}

.plomb {
    font-size: clamp(1.02rem, 1.5vw, 1.15rem);
    color: var(--encre-douce);
    max-width: 60ch;
}

.plomb--clair {
    color: rgba(251, 248, 242, .78);
}

/* ---------------------------------------------------------------------
   4. Mise en page
   --------------------------------------------------------------------- */
.contenu {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

.section {
    padding-block: var(--section-y);
}

.section--ivoire {
    background: var(--ivoire);
}

.section--sombre {
    background: var(--vert-profond);
    color: var(--creme);
}

.section--sombre h2,
.section--sombre h3 {
    color: var(--creme);
}

.section-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-tete > div {
    max-width: 62ch;
}

.section-tete p {
    margin-top: .9rem;
}

/* Filet doré discret, utilisé pour clore une section sombre */
.filet {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ligne-forte), transparent);
    border: 0;
}

.saut-contenu {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--vert-profond);
    color: var(--creme);
    padding: .85rem 1.4rem;
    border-radius: 0 0 var(--r-s) 0;
    z-index: 200;
}

.saut-contenu:focus {
    left: 0;
    color: var(--creme);
}

/* ---------------------------------------------------------------------
   5. Boutons
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition),
                box-shadow var(--transition);
}

.btn:active {
    transform: translateY(1px);
}

.btn--principal {
    background: var(--dore);
    color: var(--vert-nuit);
    box-shadow: 0 2px 10px rgba(191, 141, 53, .28);
}

.btn--principal:hover {
    background: var(--dore-clair);
    color: var(--vert-nuit);
    box-shadow: 0 4px 18px rgba(191, 141, 53, .36);
}

.btn--vert {
    background: var(--vert-profond);
    color: var(--creme);
}

.btn--vert:hover {
    background: var(--vert-moyen);
    color: var(--creme);
}

.btn--contour {
    border-color: var(--ligne-forte);
    color: var(--vert-profond);
    background: transparent;
}

.btn--contour:hover {
    border-color: var(--vert-profond);
    background: var(--vert-profond);
    color: var(--creme);
}

.btn--contour-clair {
    border-color: rgba(251, 248, 242, .38);
    color: var(--creme);
    background: transparent;
}

.btn--contour-clair:hover {
    background: var(--creme);
    border-color: var(--creme);
    color: var(--vert-profond);
}

.btn--whatsapp {
    background: #1F7A4C;
    color: #fff;
}

.btn--whatsapp:hover {
    background: #196340;
    color: #fff;
}

.btn--bloc {
    width: 100%;
}

.btn--petit {
    padding: .58rem 1.1rem;
    font-size: .85rem;
}

.btn[disabled],
.btn--desactive {
    opacity: .55;
    pointer-events: none;
}

.groupe-btn {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

/* Lien avec flèche : marqueur de navigation secondaire */
.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    color: var(--vert-profond);
}

.lien-fleche i {
    transition: transform var(--transition);
}

.lien-fleche:hover i {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------------
   6. En-tête
   --------------------------------------------------------------------- */
/* Le flou est porté par un pseudo-élément, jamais par .entete lui-même.
   Raison : backdrop-filter (comme filter, transform ou will-change) fait de
   l'élément le bloc conteneur de ses descendants en position:fixed. Or le
   tiroir de navigation mobile est un enfant de l'en-tête : son
   « inset: 0 0 0 auto » se résolvait contre l'en-tête au lieu de la fenêtre,
   et le tiroir se retrouvait haut de 78 px, coincé sous le logo.

   Le pseudo-élément produit exactement le même rendu sans rien capturer.
   N'y remettez pas backdrop-filter sur .entete. */
.entete {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.entete::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--creme) 88%, transparent);
    backdrop-filter: blur(14px);
    transition: background var(--transition);
}

.entete.est-defile {
    border-bottom-color: var(--ligne);
    box-shadow: var(--ombre-s);
}

.entete.est-defile::before {
    background: color-mix(in srgb, var(--creme) 96%, transparent);
}

.entete__interieur {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 78px;
}

.marque {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    text-decoration: none;
    flex: none;
}

.marque__nom {
    font-family: var(--police-titre);
    font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 30;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--vert-profond);
    line-height: 1;
}

.marque__chiffre {
    font-family: var(--police-texte);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--dore);
}

.marque__logo {
    height: 38px;
    width: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-left: auto;
}

.nav a {
    position: relative;
    padding: .55rem .8rem;
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--encre);
    border-radius: var(--r-s);
    white-space: nowrap;
}

.nav a::after {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .3rem;
    height: 1.5px;
    background: var(--dore);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.nav a:hover {
    color: var(--vert-profond);
}

.nav a:hover::after,
.nav a.est-actif::after {
    transform: scaleX(1);
}

.nav a.est-actif {
    color: var(--vert-profond);
    font-weight: 600;
}

.entete__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: none;
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--ligne);
    border-radius: var(--r-s);
    color: var(--vert-profond);
    font-size: 1.3rem;
}

/* ---------------------------------------------------------------------
   7. Hero — bloc vert et image séparés par une couture,
      le moteur de recherche chevauche cette couture.
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--creme);
    padding-bottom: clamp(5.5rem, 9vw, 8rem);
}

/* La grille occupe toute la largeur de la fenêtre : chaque moitié touche
   son bord. Le texte est ramené dans l'axe du contenu par son padding,
   ce qui évite tout calcul de marge négative. */
.hero__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: stretch;
    min-height: clamp(430px, 58vw, 600px);
}

.hero__texte {
    background: var(--vert-profond);
    color: var(--creme);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0 var(--r-l) 0 0;

    padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(4.5rem, 7vw, 6rem);
    padding-right: clamp(1.75rem, 4vw, 3.75rem);

    /* Aligne le texte sur la gouttière du conteneur, quelle que soit la
       largeur de la fenêtre. */
    padding-left: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
}

.hero__texte h1 {
    color: var(--creme);
}

.hero__texte h1 em {
    font-style: italic;
    color: var(--dore-clair);
    font-variation-settings: "SOFT" 40, "WONK" 1;
}

.hero__texte .plomb {
    margin-top: 1.5rem;
    max-width: 46ch;
}

/* Réassurance : une seule ligne, séparée par des filets */
.hero__gages {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(232, 200, 122, .28);
    list-style: none;
    padding-left: 0;
}

.hero__gages li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .87rem;
    color: rgba(251, 248, 242, .8);
}

.hero__gages i {
    color: var(--dore-clair);
    font-size: .95rem;
}

.hero__visuel {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-l) 0 0 0;
    min-height: 300px;
}

.hero__visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

/* Le moteur de recherche à cheval sur la couture */
.recherche {
    position: relative;
    z-index: 5;
    margin-top: clamp(-5rem, -6vw, -3.5rem);
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    box-shadow: var(--ombre-l);
    padding: 1.15rem;
}

.recherche__grille {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: .35rem;
    align-items: end;
}

.recherche__champ {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .5rem .9rem;
    border-radius: var(--r-s);
    transition: background var(--transition);
    min-width: 0;
}

.recherche__champ + .recherche__champ {
    box-shadow: -1px 0 0 var(--ligne);
}

.recherche__champ:focus-within {
    background: var(--ivoire);
    box-shadow: none;
}

.recherche__champ label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dore-sombre);
}

.recherche__champ input,
.recherche__champ select {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: .95rem;
    font-weight: 500;
    color: var(--encre);
    width: 100%;
    min-width: 0;
}

.recherche__champ input:focus,
.recherche__champ select:focus {
    outline: none;
}

.recherche__envoi {
    padding-left: .5rem;
}

/* ---------------------------------------------------------------------
   8. Carte de résidence
   --------------------------------------------------------------------- */
.grille-residences {
    display: grid;

    /* 270 px est la largeur en dessous de laquelle la carte cesse d'etre
       lisible : le titre passe sur trois lignes et le prix ne tient plus a
       cote du bouton. Le nombre de colonnes se deduit de la place reelle,
       jamais d'un chiffre fixe — la meme grille sert le catalogue, l'accueil,
       les favoris et les residences voisines. */
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: clamp(1.25rem, 2.4vw, 2rem);
}

/* Ces listes ont un compte connu : on plafonne leur nombre de colonnes
   plutot que de les laisser se repartir librement.

   --trio  : les trois residences voisines d'une fiche, sur une ligne.
   --quatre: les vedettes de l'accueil. Sans plafond, un ecran de 1729 px
             leur donnerait cinq colonnes de 290 px ; quatre colonnes en
             font 371, nettement plus a l'aise. Le plafond ne s'applique
             qu'a partir de 1400 px : en dessous, la repartition naturelle
             donne deja quatre colonnes ou moins, et forcer le chiffre
             retrecirait les cartes au lieu de les elargir. */
@media (min-width: 1100px) {
    .grille-residences--trio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .grille-residences--quatre {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.carte {
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.carte:hover {
    transform: translateY(-4px);
    border-color: var(--ligne-forte);
    box-shadow: var(--ombre-m);
}

.carte__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--vert-profond);
}

.carte__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.2, .7, .3, 1);
}

.carte:hover .carte__media img {
    transform: scale(1.045);
}

/* ---------------------------------------------------------------------
   Carrousel de la carte

   Feuilleter trois photos sans quitter la liste : c'est la différence
   entre parcourir six résidences et ouvrir six onglets. Les vues sont
   empilées et non juxtaposées — pas de piste à translater, donc rien à
   recalculer quand la carte change de largeur.
   --------------------------------------------------------------------- */
.carte__piste {
    display: block;
    width: 100%;
    height: 100%;
}

.carte__vue {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms ease;
}

.carte__vue.est-visible {
    opacity: 1;
    visibility: visible;
}

/* Les flèches n'apparaissent qu'au survol sur grand écran : elles
   masqueraient la photo le reste du temps. Au doigt, elles restent
   visibles — il n'y a pas de survol sur un téléphone. */
.carte__fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--vert-nuit, #0b2019);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 200ms ease, background 200ms ease;
    box-shadow: 0 2px 10px rgba(11, 32, 25, .25);
}

.carte__fleche--precedent { left: .55rem; }
.carte__fleche--suivant   { right: .55rem; }

.carte:hover .carte__fleche,
.carte__fleche:focus-visible {
    opacity: 1;
}

.carte__fleche:hover {
    background: #fff;
}

/* Le clavier doit voir où il est, même sans survol de la carte. */
.carte__fleche:focus-visible {
    outline: 2px solid var(--dore, #c9a227);
    outline-offset: 2px;
}

.carte__points {
    position: absolute;
    left: 50%;
    bottom: .6rem;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carte__point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition: background 200ms ease, width 200ms ease;
}

.carte__point.est-actif {
    width: 16px;
    border-radius: 999px;
    background: #fff;
}

@media (hover: none) {
    .carte__fleche {
        opacity: .9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carte__vue,
    .carte__fleche,
    .carte__point {
        transition: none;
    }
}

/* Le quartier sert d'index : il est posé sur l'image, souligné d'or */
.carte__quartier {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .95rem;
    background: var(--creme);
    border-top: 2px solid var(--dore);
    border-radius: 0 var(--r-s) 0 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--vert-profond);
}

.carte__badge {
    position: absolute;
    top: .85rem;
    left: .85rem;
    padding: .35rem .8rem;
    background: var(--dore);
    color: var(--vert-nuit);
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.carte__corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.35rem 1.35rem;
}

.carte__titre {
    font-size: 1.22rem;
    margin-bottom: .35rem;
}

.carte__titre a {
    text-decoration: none;
    color: inherit;
}

.carte__titre a:hover {
    color: var(--vert-clair);
}

.carte__note {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--encre-douce);
    margin-bottom: .7rem;
}

.carte__note .etoiles {
    color: var(--dore-texte);
    font-size: .8rem;
    letter-spacing: .05em;
}

.carte__note strong {
    color: var(--encre);
}

.carte__resume {
    font-size: .92rem;
    color: var(--encre-douce);
    margin-bottom: 1rem;
}

/* Une seule ligne de puces, quelle que soit la longueur des libellés.
   Sans cette contrainte, une carte à deux lignes désalignait les prix
   de toute la rangée. Le compteur « +N » reste toujours visible. */
.carte__equipements {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.15rem;
    list-style: none;
    padding: 0;
    min-height: 1.85rem;
    overflow: hidden;
}

.carte__equipements .puce {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le compteur ne se réduit jamais : c'est lui qui signale le reste. */
.carte__equipements .puce:last-child {
    flex: none;
}

.puce {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    background: var(--ivoire);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--vert-profond);
    white-space: nowrap;
}

.puce i {
    font-size: .85rem;
    color: var(--dore-sombre);
}

/* Hauteur réservée pour l'éventuel prix barré : sans cela, une carte en
   promotion décale le pied de toutes les autres cartes de la rangée. */
.carte__pied .prix {
    min-height: 3.5rem;
    justify-content: flex-end;
}

.carte__pied {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ligne);
}

/* Le prix en Fraunces : c'est le chiffre que le visiteur cherche */
.prix {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.prix__montant {
    font-family: var(--police-titre);
    font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 30;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--vert-profond);
}

.prix__unite {
    font-size: .78rem;
    color: var(--encre-douce);
}

.prix__ancien {
    font-size: .82rem;
    color: var(--encre-douce);
    text-decoration: line-through;
    text-decoration-color: var(--danger);
}

.carte__actions {
    display: flex;
    gap: .5rem;
    flex: none;
}

/* ---------------------------------------------------------------------
   9. Barre de filtres et de tri
   --------------------------------------------------------------------- */
.barre-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    margin-bottom: 1.75rem;
}

.barre-outils__compte {
    font-size: .93rem;
    color: var(--encre-douce);
}

.barre-outils__compte strong {
    color: var(--vert-profond);
    font-weight: 700;
}

.tri {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
}

.tri select {
    padding: .5rem 2rem .5rem .85rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--creme);
    font-size: .88rem;
    font-weight: 500;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23123D31'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 14px;
}

.disposition-catalogue {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);

    /* Surtout pas « align-items: start » ici : la colonne prendrait
       exactement la hauteur du panneau, et le position:sticky du panneau
       n'aurait alors aucune distance à parcourir — il resterait immobile
       tout en ayant l'air correctement déclaré. La colonne doit s'étirer
       sur toute la hauteur des résultats pour que le collage existe. */
    align-items: stretch;
}

/* Le panneau est décalé vers la gauche, à l'intérieur de la gouttière :
   il gagne de l'air sans que la grille des résidences ne bouge. Le décalage
   se fait à marges opposées plutôt qu'en transform — une transformation sur
   un ancêtre perturbe position:sticky. */
@media (min-width: 1025px) {
    .disposition-catalogue > aside {
        margin-left: calc(-1 * clamp(1rem, 1.5vw, 1.75rem));
        margin-right: clamp(1rem, 1.5vw, 1.75rem);
    }
}

/* Le panneau défile avec la page jusqu'à se coller sous l'en-tête, puis
   défile sur lui-même. Sans cela, le bouton « Appliquer » se retrouvait
   hors de l'écran et restait introuvable. */
.filtres {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    padding: 1.35rem;
}

/* Barre de défilement discrète, accordée à la charte. */
.filtres {
    scrollbar-width: thin;
    scrollbar-color: var(--ligne-forte) transparent;
}

.filtres::-webkit-scrollbar {
    width: 8px;
}

.filtres::-webkit-scrollbar-thumb {
    background: var(--ligne-forte);
    border-radius: 4px;
}

.filtres::-webkit-scrollbar-track {
    background: transparent;
}

/* Le bouton d'application reste visible au bas du panneau. */
.filtres__envoi {
    position: sticky;
    bottom: -1.35rem;
    margin: 1.25rem -1.35rem -1.35rem;
    padding: 1rem 1.35rem;
    background: linear-gradient(to bottom, transparent, var(--blanc) 35%);
}

.filtres__titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--ligne);
}

.filtres__titre h2 {
    font-size: 1.05rem;
    font-family: var(--police-texte);
    font-weight: 700;
    letter-spacing: 0;
}

/* Un fieldset porte un style par défaut du navigateur : on le neutralise
   ICI, avant la règle de groupe, pour ne pas annuler son espacement.
   L'ordre compte : à spécificité égale, la dernière règle l'emporte. */
.filtres fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
}

.filtres__groupe {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ligne);
}

.filtres__groupe:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.filtres__groupe > legend,
.filtres__legende {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dore-sombre);
    margin-bottom: .7rem;
    padding: 0;
}

/* minmax(0, 1fr) et non 1fr : sans cela, les champs refusent de descendre
   sous leur largeur intrinsèque et débordent sur petit écran. */
.duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

/* Champ étroit avec son libellé au-dessus. Le libellé porte l'intitulé,
   le champ n'affiche donc qu'une valeur courte et ne se tronque plus. */
.champ-mini {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.champ-mini label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--encre-douce);
}

.champ-mini .saisie {
    padding: .5rem .6rem;
    font-size: .88rem;
}

.champ-mini select.saisie {
    padding-right: 1.9rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23123D31'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 13px;
    appearance: none;
}

/* Pas de défilement interne : le panneau entier défile déjà. Deux zones
   de défilement imbriquées rendent la liste pénible à parcourir. */
.cases {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.case {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .9rem;
    cursor: pointer;
}

.case input {
    width: 17px;
    height: 17px;
    accent-color: var(--vert-profond);
    flex: none;
}

/* Le nombre de résultats derrière chaque case. Poussé à droite, en second
   plan : il informe sans concurrencer le libellé. */
.case__nombre {
    margin-left: auto;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--fond-doux, rgba(11, 32, 25, .05));
    color: var(--texte-doux, #6b7280);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Une case qui ne mène à rien : encore lisible, mais visiblement inerte.
   On ne la cache pas — sa disparition ferait sauter la liste à chaque
   changement de filtre. */
.case--vide {
    cursor: not-allowed;
    opacity: .45;
}

/* ---------------------------------------------------------------------
   Catalogue : attente pendant le remplacement des résultats

   Un fondu plutôt qu'un vide : la hauteur ne change pas, donc la page ne
   saute pas sous le doigt de celui qui allait cliquer.
   --------------------------------------------------------------------- */
[data-catalogue-resultats] {
    transition: opacity 180ms ease;
}

[data-catalogue-resultats].est-en-chargement {
    opacity: .45;
    pointer-events: none;
}

[data-catalogue-resultats].est-en-chargement .grille-residences {
    /* Le curseur dit que quelque chose est en cours, même si le fondu
       passe inaperçu sur un écran très lumineux. */
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    [data-catalogue-resultats] {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
   10. Formulaires
   --------------------------------------------------------------------- */
.champ {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1.15rem;
}

.champ > label,
.champ__label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--vert-profond);
}

.champ .obligatoire {
    color: var(--danger);
}

.saisie,
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="date"],
.champ input[type="number"],
.champ input[type="password"],
.champ input[type="url"],
.champ select,
.champ textarea {
    width: 100%;
    padding: .72rem .95rem;
    background: var(--blanc);
    border: 1px solid var(--ligne-forte);
    border-radius: var(--r-s);
    font-size: .95rem;
    color: var(--encre);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.champ textarea {
    min-height: 130px;
    resize: vertical;
}

.champ select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23123D31'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 15px;
    padding-right: 2.4rem;
}

.saisie:focus,
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--vert-clair);
    box-shadow: 0 0 0 3px rgba(47, 124, 99, .16);
}

.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea {
    border-color: var(--danger);
    background: var(--danger-fond);
}

.champ--erreur input:focus,
.champ--erreur select:focus,
.champ--erreur textarea:focus {
    box-shadow: 0 0 0 3px rgba(163, 59, 42, .15);
}

.champ__erreur {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    font-size: .82rem;
    color: var(--danger);
    font-weight: 500;
}

.champ__aide {
    font-size: .82rem;
    color: var(--encre-douce);
}

.rangee {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 1rem;
}

.formulaire-carte {
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--ombre-s);
}

.formulaire-carte h2 {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

/* ---------------------------------------------------------------------
   11. Alertes
   --------------------------------------------------------------------- */
.alerte {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .95rem 1.15rem;
    border-radius: var(--r-s);
    border-left: 3px solid;
    font-size: .93rem;
    margin-bottom: 1.15rem;
}

.alerte i {
    flex: none;
    margin-top: .15rem;
}

.alerte--succes {
    background: var(--succes-fond);
    border-color: var(--succes);
    color: #14503A;
}

.alerte--erreur {
    background: var(--danger-fond);
    border-color: var(--danger);
    color: #7C2C1F;
}

.alerte--attention {
    background: var(--attention-fond);
    border-color: var(--attention);
    color: #6B5227;
}

.alerte--info {
    background: var(--info-fond);
    border-color: var(--vert-clair);
    color: var(--vert-profond);
}

.zone-flash {
    padding-top: 1.5rem;
}

/* ---------------------------------------------------------------------
   12. État vide
   --------------------------------------------------------------------- */
.vide {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
    background: var(--blanc);
    border: 1px dashed var(--ligne-forte);
    border-radius: var(--r-m);
}

.vide i {
    font-size: 2.1rem;
    color: var(--dore);
    margin-bottom: .9rem;
    display: block;
}

.vide h3 {
    font-size: 1.3rem;
    margin-bottom: .5rem;
}

.vide p {
    color: var(--encre-douce);
    max-width: 44ch;
    margin: 0 auto 1.5rem;
}

/* ---------------------------------------------------------------------
   13. Pagination
   --------------------------------------------------------------------- */
.pagination {
    margin-top: 2.5rem;
}

.pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    list-style: none;
    padding: 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding-inline: .6rem;
    border: 1px solid var(--ligne);
    border-radius: var(--r-s);
    background: var(--blanc);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--encre);
    transition: all var(--transition);
}

.pagination a:hover {
    border-color: var(--vert-profond);
    background: var(--vert-profond);
    color: var(--creme);
}

.pagination .actuelle {
    background: var(--vert-profond);
    border-color: var(--vert-profond);
    color: var(--creme);
    font-weight: 700;
}

.pagination .desactive {
    opacity: .4;
}

.pagination .ellipse {
    border-color: transparent;
    background: transparent;
}

/* ---------------------------------------------------------------------
   14. « Pourquoi Serena » — grille d'atouts
   --------------------------------------------------------------------- */
.grille-atouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--ligne);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    overflow: hidden;
}

.atout {
    background: var(--creme);
    padding: clamp(1.5rem, 2.6vw, 2.1rem);
    transition: background var(--transition);
}

.atout:hover {
    background: var(--blanc);
}

.atout i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--vert-profond);
    color: var(--dore-clair);
    font-size: 1.15rem;
    margin-bottom: 1.1rem;
}

.atout h3 {
    font-size: 1.12rem;
    margin-bottom: .45rem;
}

.atout p {
    font-size: .92rem;
    color: var(--encre-douce);
}

/* ---------------------------------------------------------------------
   15. Bandeaux d'appel à l'action
   --------------------------------------------------------------------- */
.bandeau {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 0;
    background: var(--vert-profond);
    color: var(--creme);
    border-radius: var(--r-l);
    overflow: hidden;
}

.bandeau__texte {
    padding: clamp(2rem, 4.5vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bandeau__texte h2 {
    color: var(--creme);
    margin-bottom: 1rem;
}

.bandeau__texte h2 em {
    font-style: italic;
    color: var(--dore-clair);
}

.bandeau__liste {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem 1.5rem;
}

.bandeau__liste li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .92rem;
    color: rgba(251, 248, 242, .84);
}

.bandeau__liste i {
    color: var(--dore-clair);
    margin-top: .2rem;
    flex: none;
}

.bandeau__visuel {
    position: relative;
    min-height: 260px;
}

.bandeau__visuel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------
   16. Services (Business / Connect) et catégories
   --------------------------------------------------------------------- */
.grille-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.service {
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.service:hover {
    transform: translateY(-3px);
    border-color: var(--dore);
    box-shadow: var(--ombre-m);
    color: inherit;
}

.service i {
    font-size: 1.5rem;
    color: var(--dore-sombre);
    margin-bottom: .9rem;
}

.service h3 {
    font-size: 1.1rem;
    margin-bottom: .4rem;
}

.service p {
    font-size: .9rem;
    color: var(--encre-douce);
    flex: 1;
}

.service .lien-fleche {
    margin-top: 1rem;
    font-size: .88rem;
}

.service--sombre {
    background: var(--vert-moyen);
    border-color: rgba(232, 200, 122, .22);
    color: var(--creme);
}

.service--sombre h3 {
    color: var(--creme);
}

.service--sombre p {
    color: rgba(251, 248, 242, .76);
}

.service--sombre i {
    color: var(--dore-clair);
}

/* Prestataire */
.prestataire {
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    padding: 1.35rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.prestataire:hover {
    border-color: var(--ligne-forte);
    box-shadow: var(--ombre-s);
}

.prestataire__tete {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: .8rem;
}

.prestataire__initiale {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: var(--r-s);
    background: var(--vert-profond);
    color: var(--dore-clair);
    font-family: var(--police-titre);
    font-size: 1.25rem;
    font-weight: 600;
}

.prestataire h3 {
    font-size: 1.05rem;
    margin-bottom: .15rem;
}

.verifie {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--succes);
}

.prestataire p {
    font-size: .89rem;
    color: var(--encre-douce);
    flex: 1;
    margin-bottom: 1rem;
}

.prestataire__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .83rem;
    color: var(--encre-douce);
    margin-bottom: 1rem;
}

.prestataire__meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.prestataire__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
}

/* Onglets de catégories */
.categories-barre {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}

.categorie-pilule {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.05rem;
    border: 1px solid var(--ligne-forte);
    border-radius: 999px;
    background: var(--blanc);
    font-size: .89rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--encre);
    transition: all var(--transition);
}

.categorie-pilule:hover {
    border-color: var(--vert-profond);
    color: var(--vert-profond);
}

.categorie-pilule.est-actif {
    background: var(--vert-profond);
    border-color: var(--vert-profond);
    color: var(--creme);
    font-weight: 600;
}

.categorie-pilule.est-actif i {
    color: var(--dore-clair);
}

/* ---------------------------------------------------------------------
   17. Fiche résidence
   --------------------------------------------------------------------- */
.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-block: 1.35rem;
    font-size: .85rem;
    color: var(--encre-douce);
    list-style: none;
    margin: 0;
}

.fil-ariane a {
    text-decoration: none;
    color: var(--encre-douce);
}

.fil-ariane a:hover {
    color: var(--vert-profond);
}

.fil-ariane li:not(:last-child)::after {
    content: "/";
    margin-left: .5rem;
    color: var(--ligne-forte);
}

.fil-ariane [aria-current] {
    color: var(--vert-profond);
    font-weight: 600;
}

.galerie {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: .6rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-m);
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.galerie__element {
    position: relative;
    overflow: hidden;
    background: var(--vert-profond);
    border: 0;
    padding: 0;
    display: block;
}

.galerie__element:first-child {
    grid-row: span 2;
}

.galerie__element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.2, .7, .3, 1);
}

.galerie__element:hover img {
    transform: scale(1.04);
}

.galerie__reste {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(11, 32, 25, .58);
    color: var(--creme);
    font-weight: 600;
    font-size: .95rem;
}

.disposition-fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
    padding-bottom: var(--section-y);
}

.fiche__entete {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ligne);
    margin-bottom: 1.75rem;
}

.fiche__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    margin-top: .85rem;
    font-size: .92rem;
    color: var(--encre-douce);
}

.fiche__meta span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.fiche__meta .etoiles {
    color: var(--dore-texte);
}

.caracteristiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--ligne);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    overflow: hidden;
    margin-bottom: 2rem;
}

.caracteristique {
    background: var(--blanc);
    padding: 1.1rem;
    text-align: center;
}

.caracteristique i {
    font-size: 1.15rem;
    color: var(--dore-sombre);
    display: block;
    margin-bottom: .45rem;
}

.caracteristique strong {
    display: block;
    font-size: 1.05rem;
    color: var(--vert-profond);
}

.caracteristique span {
    font-size: .8rem;
    color: var(--encre-douce);
}

.bloc-fiche {
    padding-block: 1.75rem;
    border-top: 1px solid var(--ligne);
}

.bloc-fiche h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.bloc-fiche p + p {
    margin-top: .9rem;
}

.liste-equipements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem 1.5rem;
    list-style: none;
    padding: 0;
}

.liste-equipements li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .93rem;
}

.liste-equipements i {
    color: var(--dore-sombre);
    font-size: 1.05rem;
    width: 1.4rem;
    flex: none;
}

/* Panneau de réservation */
.panneau-reservation {
    position: sticky;
    top: 96px;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    box-shadow: var(--ombre-m);
    overflow: hidden;
}

.panneau-reservation__tete {
    padding: 1.35rem 1.5rem;
    background: var(--vert-profond);
    color: var(--creme);
}

.panneau-reservation__tete .prix__montant {
    color: var(--dore-clair);
    font-size: 1.85rem;
}

.panneau-reservation__tete .prix__unite {
    color: rgba(251, 248, 242, .72);
}

.panneau-reservation__corps {
    padding: 1.5rem;
}

.recap {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    border-top: 1px solid var(--ligne);
}

.recap li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .6rem;
    font-size: .92rem;
    border-bottom: 1px solid var(--ligne);
}

.recap li:last-child {
    border-bottom: 0;
    padding-top: .85rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vert-profond);
}

.recap span:first-child {
    color: var(--encre-douce);
}

.recap li:last-child span:first-child {
    color: var(--vert-profond);
}

.mention {
    font-size: .82rem;
    color: var(--encre-douce);
    margin-top: 1rem;
}

/* ---------------------------------------------------------------------
   18. Guide des quartiers
   --------------------------------------------------------------------- */
.grille-quartiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.15rem;
}

.quartier {
    padding: 1.4rem 1.5rem;
    background: rgba(251, 248, 242, .07);
    border: 1px solid rgba(232, 200, 122, .2);
    border-radius: var(--r-m);
    transition: background var(--transition), border-color var(--transition);
}

.quartier:hover {
    background: rgba(251, 248, 242, .11);
    border-color: rgba(232, 200, 122, .4);
}

.quartier h3 {
    font-size: 1.12rem;
    color: var(--creme);
    margin-bottom: .4rem;
}

.quartier p {
    font-size: .89rem;
    color: rgba(251, 248, 242, .72);
    margin-bottom: .9rem;
}

.quartier a {
    font-size: .85rem;
    color: var(--dore-clair);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.quartier a:hover {
    color: var(--creme);
}

/* ---------------------------------------------------------------------
   19. Bannière de page intérieure
   --------------------------------------------------------------------- */
.banniere {
    background: var(--vert-profond);
    color: var(--creme);
    padding-block: clamp(3rem, 6vw, 5rem);
}

.banniere h1 {
    color: var(--creme);
    max-width: 20ch;
}

.banniere h1 em {
    font-style: italic;
    color: var(--dore-clair);
}

.banniere .plomb {
    margin-top: 1.15rem;
    color: rgba(251, 248, 242, .78);
}

/* Sur une page de résultats, la bannière ne doit pas repousser les
   résidences hors de l'écran : elle est nettement plus basse. */
.banniere--compacte {
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.banniere--compacte h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    max-width: 26ch;
}

.banniere--compacte .plomb {
    margin-top: .75rem;
    font-size: 1rem;
    max-width: 70ch;
}

.banniere--image {
    position: relative;
    overflow: hidden;
}

.banniere--image > .contenu {
    position: relative;
    z-index: 2;
}

.banniere__fond {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.banniere__fond img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
}

.banniere__fond::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--vert-profond) 22%, rgba(18, 61, 49, .55) 100%);
}

/* ---------------------------------------------------------------------
   20. Contact
   --------------------------------------------------------------------- */
.disposition-contact {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
}

.coordonnees {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}

.coordonnees li {
    display: flex;
    gap: .95rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--ligne);
}

.coordonnees li:first-child {
    padding-top: 0;
}

.coordonnees i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--ivoire);
    color: var(--dore-sombre);
}

.coordonnees strong {
    display: block;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dore-sombre);
    margin-bottom: .15rem;
}

.coordonnees a {
    text-decoration: none;
}

.carte-lieu {
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--ivoire);
}

.carte-lieu iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------------------
   21. FAQ
   --------------------------------------------------------------------- */
.faq {
    max-width: 820px;
    margin-inline: auto;
}

.faq details {
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-s);
    margin-bottom: .75rem;
    overflow: hidden;
}

.faq details[open] {
    border-color: var(--ligne-forte);
    box-shadow: var(--ombre-s);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    color: var(--vert-profond);
}

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

.faq summary::after {
    content: "\F4FE";
    font-family: "bootstrap-icons";
    font-weight: 400;
    color: var(--dore-texte);
    transition: transform var(--transition);
    flex: none;
}

.faq details[open] summary::after {
    transform: rotate(45deg);
}

.faq__reponse {
    padding: 0 1.35rem 1.25rem;
    color: var(--encre-douce);
    font-size: .95rem;
}

/* ---------------------------------------------------------------------
   22. Pied de page
   --------------------------------------------------------------------- */
.pied {
    background: var(--vert-nuit);
    color: rgba(251, 248, 242, .72);
    padding-top: clamp(3rem, 6vw, 4.5rem);
    font-size: .92rem;
}

.pied__grille {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-bottom: 3rem;
}

.pied__marque .marque__nom {
    color: var(--creme);
    font-size: 1.35rem;
}

.pied p {
    margin-top: 1rem;
    max-width: 36ch;
    font-size: .9rem;
}

.pied h3 {
    font-family: var(--police-texte);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--dore-clair);
    margin-bottom: 1.1rem;
}

.pied ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.pied a {
    color: rgba(251, 248, 242, .72);
    text-decoration: none;
}

.pied a:hover {
    color: var(--dore-clair);
}

.pied__contact li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.pied__contact i {
    color: var(--dore);
    margin-top: .2rem;
    flex: none;
}

.reseaux {
    display: flex;
    gap: .6rem;
    margin-top: 1.5rem;
}

.reseaux a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(232, 200, 122, .28);
    border-radius: 50%;
    color: var(--dore-clair);
    transition: all var(--transition);
}

.reseaux a:hover {
    background: var(--dore);
    border-color: var(--dore);
    color: var(--vert-nuit);
}

.pied__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.5rem;
    border-top: 1px solid rgba(251, 248, 242, .12);
    font-size: .85rem;
}

.pied__bas ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* Bouton WhatsApp flottant */
.whatsapp-flottant {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.15rem;
    background: #1F7A4C;
    color: #fff;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(11, 32, 25, .3);
    transition: transform var(--transition), background var(--transition);
}

.whatsapp-flottant:hover {
    background: #196340;
    color: #fff;
    transform: translateY(-2px);
}

.whatsapp-flottant i {
    font-size: 1.25rem;
}

.whatsapp-flottant span {
    display: none;
}

@media (min-width: 768px) {
    .whatsapp-flottant span {
        display: inline;
    }
}

/* ---------------------------------------------------------------------
   23. Animation d'apparition
   --------------------------------------------------------------------- */
.apparait {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms cubic-bezier(.2, .7, .3, 1), transform 620ms cubic-bezier(.2, .7, .3, 1);
}

.apparait.est-visible {
    opacity: 1;
    transform: none;
}

/* Séquence d'ouverture du hero */
.hero__texte > * {
    animation: monte 760ms cubic-bezier(.2, .7, .3, 1) both;
}

.hero__texte > *:nth-child(1) { animation-delay: 60ms; }
.hero__texte > *:nth-child(2) { animation-delay: 140ms; }
.hero__texte > *:nth-child(3) { animation-delay: 220ms; }
.hero__texte > *:nth-child(4) { animation-delay: 300ms; }

@keyframes monte {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------------
   24. Utilitaires
   --------------------------------------------------------------------- */
.invisible-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.centre {
    text-align: center;
}

.centre .eyebrow {
    justify-content: center;
}

.centre .plomb {
    margin-inline: auto;
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------------
   25. Adaptation aux écrans
   --------------------------------------------------------------------- */

/* Ordinateur intermédiaire */
@media (max-width: 1180px) {
    .disposition-fiche {
        grid-template-columns: minmax(0, 1fr) 330px;
    }

    .pied__grille {
        grid-template-columns: 1.4fr 1fr 1fr;
    }

    .pied__contact {
        grid-column: 1 / -1;
    }
}

/* Tablette : le menu passe en tiroir */
@media (max-width: 1024px) {
    .burger {
        display: inline-flex;
    }

    .nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(340px, 86vw);
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        padding: 6rem 1.5rem 2rem;
        background: var(--vert-profond);
        transform: translateX(100%);
        transition: transform 340ms cubic-bezier(.2, .7, .3, 1),
                    visibility 340ms;
        overflow-y: auto;
        box-shadow: -20px 0 50px rgba(11, 32, 25, .3);

        /* Tiroir fermé : retiré du rendu. Cela évite qu'il élargisse la zone
           de défilement et empêche la tabulation d'atteindre des liens
           invisibles à l'écran. */
        visibility: hidden;
    }

    .nav.est-ouvert {
        transform: none;
        visibility: visible;
    }

    .nav a {
        padding: .95rem .5rem;
        font-size: 1.05rem;
        color: rgba(251, 248, 242, .84);
        border-bottom: 1px solid rgba(251, 248, 242, .1);
        border-radius: 0;
    }

    .nav a::after {
        display: none;
    }

    .nav a:hover,
    .nav a.est-actif {
        color: var(--dore-clair);
    }

    .nav .btn {
        margin-top: 1.25rem;
        border-bottom: 0;
    }

    .voile {
        position: fixed;
        inset: 0;
        background: rgba(11, 32, 25, .5);
        backdrop-filter: blur(2px);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), visibility var(--transition);
    }

    .voile.est-ouvert {
        opacity: 1;
        visibility: visible;
    }

    body.menu-ouvert {
        overflow: hidden;
    }

    .entete__actions .btn--contour {
        display: none;
    }

    .disposition-catalogue,
    .disposition-fiche,
    .disposition-contact {
        grid-template-columns: minmax(0, 1fr);
    }

    .filtres,
    .panneau-reservation {
        position: static;
    }

    /* Sur mobile le panneau de réservation remonte avant la description */
    .disposition-fiche > aside {
        order: -1;
    }

    /* Prix et bouton restent accessibles sans remonter la page. */
    .barre-mobile {
        display: flex;
    }

    /* Réserve la place occupée par la barre fixe. */
    body.a-barre-mobile .pied {
        padding-bottom: 5.5rem;
    }

    body.a-barre-mobile .whatsapp-flottant {
        bottom: 5.25rem;
    }

    .recherche__grille {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
    }

    .recherche__champ + .recherche__champ {
        box-shadow: none;
    }

    .recherche__champ {
        border: 1px solid var(--ligne);
    }

    .recherche__envoi {
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .recherche__envoi .btn {
        width: 100%;
    }
}

/* Tablette portrait */
@media (max-width: 900px) {
    .hero__grille {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .hero__texte {
        border-radius: 0;
        padding-inline: var(--gouttiere);
        padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
        order: 2;
    }

    .hero__visuel {
        order: 1;
        border-radius: 0;
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    .bandeau {
        grid-template-columns: minmax(0, 1fr);
    }

    .bandeau__visuel {
        order: -1;
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .galerie {
        grid-template-columns: 1fr 1fr;
        aspect-ratio: 4 / 3;
    }

    .disposition-fiche {
        gap: 2rem;
    }
}

/* Mobile */
@media (max-width: 640px) {
    :root {
        --r-l: 20px;
    }

    .entete__interieur {
        min-height: 66px;
        gap: .75rem;
    }

    .entete__actions .btn--principal {
        padding-inline: 1.1rem;
    }

    .recherche {
        margin-top: -2.5rem;
        padding: .85rem;
    }

    .recherche__grille {
        grid-template-columns: minmax(0, 1fr);
    }

    .grille-residences {
        grid-template-columns: minmax(0, 1fr);
    }

    .carte__pied {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
    }

    .carte__actions .btn {
        flex: 1;
    }

    .galerie {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        aspect-ratio: 4 / 3;
    }

    .galerie__element:first-child {
        grid-row: span 1;
    }

    /* Une seule photo, en 4/3 plein cadre.
       Deux vignettes empilees dans un cadre de hauteur fixe donnaient deux
       bandes de 2,7:1 : un logement y devient illisible. Mieux vaut une
       photo correcte, le reste etant a un doigt dans la visionneuse. */
    .galerie__element:nth-child(n + 2) {
        display: none;
    }

    .pied__grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .pied__bas {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-tete {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Très petits écrans (320 px) */
@media (max-width: 360px) {
    :root {
        --gouttiere: 1rem;
    }

    .marque__nom {
        font-size: 1.2rem;
    }

    /* Les libellés longs se répartissent sur deux lignes plutôt que
       de déborder de l'écran. */
    .btn {
        padding-inline: 1.15rem;
        white-space: normal;
        text-align: center;
    }

    .grille-residences {
        gap: 1rem;
    }
}

/* Grands écrans */
/* Sur les grands ecrans, un conteneur de 1240 px laisse 200 px de marge
   morte de chaque cote. On les recupere par paliers : le catalogue y gagne
   une colonne de residences a chaque fois, sans jamais retrecir les cartes
   en dessous de ce qui reste lisible. */
@media (min-width: 1400px) {
    :root {
        --largeur: 1480px;
    }
}

@media (min-width: 1600px) {
    :root {
        --largeur: 1660px;
    }
}

/* ---------------------------------------------------------------------
   26. Favori, partage et actions de carte
   --------------------------------------------------------------------- */
.carte__favori {
    position: absolute;
    top: .8rem;
    right: .8rem;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(251, 248, 242, .92);
    color: var(--encre-douce);
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(11, 32, 25, .18);
    transition: transform var(--transition), color var(--transition), background var(--transition);
}

.carte__favori:hover {
    transform: scale(1.08);
    color: var(--danger);
}

.carte__favori[aria-pressed="true"] {
    color: var(--danger);
    background: var(--blanc);
}

/* Petite pulsation à l'ajout, pour confirmer le geste */
.carte__favori.vient-d-etre-ajoute i {
    animation: battement 420ms ease;
}

@keyframes battement {
    0%, 100% { transform: scale(1); }
    35%      { transform: scale(1.35); }
    70%      { transform: scale(.92); }
}

.icone-action {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--ligne-forte);
    border-radius: 999px;
    background: transparent;
    color: var(--vert-profond);
    font-size: .95rem;
    transition: all var(--transition);
}

.icone-action:hover {
    border-color: var(--vert-profond);
    background: var(--vert-profond);
    color: var(--creme);
}

/* Lien de détail en pied de carte : cible large, libellé explicite */
.carte__lien-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .9rem;
    padding-top: .85rem;
    border-top: 1px solid var(--ligne);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--vert-profond);
}

.carte__lien-detail i {
    transition: transform var(--transition);
}

.carte__lien-detail:hover i {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------------
   27. Filtres actifs et suggestions
   --------------------------------------------------------------------- */
.filtres-actifs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .85rem 1.15rem;
    margin-bottom: 1rem;
    background: var(--ivoire);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
}

.filtres-actifs__intitule {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dore-sombre);
}

.filtres-actifs ul {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.filtres-actifs a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .35rem .3rem .75rem;
    background: var(--blanc);
    border: 1px solid var(--ligne-forte);
    border-radius: 999px;
    font-size: .83rem;
    text-decoration: none;
    color: var(--encre);
    transition: all var(--transition);
}

.filtres-actifs a i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ivoire);
    font-size: .8rem;
    color: var(--encre-douce);
}

.filtres-actifs a:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.filtres-actifs a:hover i {
    background: var(--danger);
    color: var(--blanc);
}

.filtres-actifs__tout {
    margin-left: auto;
    font-size: .83rem;
    font-weight: 600;
    color: var(--vert-profond);
}

.suggestions {
    list-style: none;
    padding: 0;
    margin: 1.25rem auto 1.75rem;
    max-width: 34rem;
    display: grid;
    gap: .5rem;
    text-align: left;
}

.suggestions a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-s);
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--encre);
    transition: all var(--transition);
}

.suggestions a i {
    color: var(--dore-sombre);
    font-size: 1.1rem;
    flex: none;
}

.suggestions a:hover {
    border-color: var(--vert-profond);
    background: var(--ivoire);
    color: var(--vert-profond);
}

/* Message transitoire (favori ajouté, lien copié…), également lu par les
   lecteurs d'écran grâce à role="status" sur l'élément. */
.annonce {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 150;
    transform: translate(-50%, 1.5rem);
    max-width: min(28rem, calc(100vw - 2rem));
    padding: .85rem 1.35rem;
    background: var(--vert-nuit);
    color: var(--creme);
    border-radius: 999px;
    font-size: .9rem;
    text-align: center;
    box-shadow: 0 8px 28px rgba(11, 32, 25, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.annonce.est-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------------
   28. Barre d'action fixe sur mobile (fiche résidence)
   --------------------------------------------------------------------- */
.barre-mobile {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem var(--gouttiere);
    padding-bottom: max(.75rem, env(safe-area-inset-bottom));
    background: var(--blanc);
    border-top: 1px solid var(--ligne);
    box-shadow: 0 -4px 20px rgba(11, 32, 25, .12);
}

.barre-mobile .prix__montant {
    font-size: 1.25rem;
}

.barre-mobile .prix__unite {
    font-size: .74rem;
}

.barre-mobile .btn {
    flex: none;
}

/* ---------------------------------------------------------------------
   29. Visionneuse de galerie
   --------------------------------------------------------------------- */
.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    gap: clamp(.5rem, 2vw, 1.5rem);
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(11, 32, 25, .94);
    backdrop-filter: blur(6px);
}

.visionneuse.est-ouverte {
    display: flex;
}

.visionneuse__figure {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.visionneuse__figure img {
    max-height: 78vh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    border-radius: var(--r-s);
    object-fit: contain;
}

.visionneuse figcaption {
    text-align: center;
    color: rgba(251, 248, 242, .78);
    font-size: .88rem;
}

.visionneuse__fermer,
.visionneuse__nav {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid rgba(232, 200, 122, .32);
    border-radius: 50%;
    background: transparent;
    color: var(--creme);
    font-size: 1.1rem;
    transition: background var(--transition), color var(--transition);
}

.visionneuse__fermer:hover,
.visionneuse__nav:hover {
    background: var(--dore);
    border-color: var(--dore);
    color: var(--vert-nuit);
}

.visionneuse__fermer {
    position: absolute;
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 640px) {
    .visionneuse__nav {
        position: absolute;
        bottom: 1.25rem;
    }

    .visionneuse__nav--precedent {
        left: 25%;
    }

    .visionneuse__nav--suivant {
        right: 25%;
    }
}

/* ---------------------------------------------------------------------
   30. Accessibilité et impression
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .apparait {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .entete,
    .pied,
    .whatsapp-flottant,
    .recherche,
    .btn {
        display: none !important;
    }

    body {
        background: #fff;
    }
}

/* ---------------------------------------------------------------------
   31. Calendrier d'occupation
   Partagé avec l'administration : les mêmes classes y sont redéfinies
   dans admin.css avec la palette de l'outil.
   --------------------------------------------------------------------- */
.calendrier {
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    padding: 1.1rem;
}

.calendrier__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.calendrier__mois {
    font-family: var(--police-titre);
    font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 20;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vert-profond);
}

.calendrier__nav {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid var(--ligne-forte);
    border-radius: 50%;
    color: var(--vert-profond);
    text-decoration: none;
    transition: all var(--transition);
}

.calendrier__nav:hover {
    background: var(--vert-profond);
    border-color: var(--vert-profond);
    color: var(--creme);
}

.calendrier__grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.calendrier__jour-nom {
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--encre-douce);
    padding-bottom: .35rem;
}

.calendrier__case {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    aspect-ratio: 1;
    min-height: 40px;
    border-radius: 7px;
    font-size: .8rem;
    line-height: 1.1;
}

.calendrier__case--vide {
    background: transparent;
}

.calendrier__case--libre {
    background: var(--succes-fond);
    color: var(--succes);
}

.calendrier__case--reserve {
    background: var(--vert-profond);
    color: var(--dore-clair);
}

.calendrier__case--bloque {
    background: var(--ivoire);
    color: var(--encre-douce);
}

.calendrier__case.est-passe {
    opacity: .38;
}

.calendrier__numero {
    font-weight: 600;
}

.calendrier__prix {
    font-size: .58rem;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}

.calendrier__case i {
    font-size: .62rem;
    opacity: .8;
}

.calendrier__legende {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    list-style: none;
    padding: .9rem 0 0;
    margin: .9rem 0 0;
    border-top: 1px solid var(--ligne);
    font-size: .8rem;
    color: var(--encre-douce);
}

.calendrier__legende li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.calendrier__taux {
    margin-left: auto;
}

.pastille-cal {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: none;
}

.pastille-cal--libre { background: var(--succes-fond); border: 1px solid var(--succes); }
.pastille-cal--reserve { background: var(--vert-profond); }
.pastille-cal--bloque { background: var(--ivoire); border: 1px solid var(--ligne-forte); }

@media (max-width: 420px) {
    .calendrier__prix {
        display: none;
    }

    .calendrier__case {
        min-height: 34px;
    }
}

/* Deux mois côte à côte quand la place le permet. */
.calendriers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* Accès aux favoris depuis l'en-tête */
.lien-favoris {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border: 1px solid var(--ligne);
    border-radius: 50%;
    color: var(--vert-profond);
    font-size: 1.05rem;
    text-decoration: none;
    transition: all var(--transition);
}

.lien-favoris:hover {
    border-color: var(--vert-profond);
    background: var(--vert-profond);
    color: var(--creme);
}

.lien-favoris__compteur {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 19px;
    height: 19px;
    padding-inline: .25rem;
    display: grid;
    place-items: center;
    background: var(--danger);
    color: var(--blanc);
    border: 2px solid var(--creme);
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 360px) {
    .lien-favoris {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   32. Espace client
   --------------------------------------------------------------------- */

/* Entrée « Mon compte » du menu principal.
   Sur grand écran, la pastille de l'en-tête dit déjà la même chose : on
   n'affiche cette entrée que lorsque le menu est passé en tiroir, où la
   pastille se réduit à une icône. */
.nav__compte {
    display: none;
}

@media (max-width: 1024px) {
    .nav__compte {
        display: block;
    }
}

/* Accès au compte depuis l'en-tête */
.lien-compte {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem .35rem .35rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--vert-profond);
    white-space: nowrap;
    transition: all var(--transition);
}

.lien-compte--vide {
    padding: .5rem 1rem;
}

.lien-compte:hover {
    border-color: var(--vert-profond);
    background: var(--vert-profond);
    color: var(--creme);
}

.lien-compte__initiale {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--vert-profond);
    color: var(--dore-clair);
    font-size: .85rem;
    font-weight: 700;
}

.lien-compte:hover .lien-compte__initiale {
    background: var(--dore);
    color: var(--vert-nuit);
}

@media (max-width: 900px) {
    .lien-compte__nom {
        display: none;
    }

    .lien-compte--vide {
        padding: .5rem;
        width: 42px;
        justify-content: center;
    }
}

/* Onglets de l'espace client */
.onglets-compte {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-top: 1.5rem;
    border-bottom: 1px solid var(--ligne);
}

.onglets-compte a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1.1rem;
    border-bottom: 2px solid transparent;
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--encre-douce);
    transition: color var(--transition), border-color var(--transition);
}

.onglets-compte a:hover {
    color: var(--vert-profond);
}

.onglets-compte a.est-actif {
    color: var(--vert-profond);
    border-bottom-color: var(--dore);
    font-weight: 600;
}

.onglets-compte__sortie {
    margin-left: auto;
}

.onglets-compte__sortie:hover {
    color: var(--danger) !important;
}

/* Boîte centrée des formulaires de compte */
.boite-compte {
    max-width: 480px;
    margin-inline: auto;
}

/* Compteur dans les onglets de filtre */
.compteur-onglet {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: .2rem;
    padding-inline: .3rem;
    background: var(--ivoire);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.categorie-pilule.est-actif .compteur-onglet {
    background: rgba(251, 248, 242, .22);
    color: var(--creme);
}

/* Liste des réservations du client */
.liste-reservations {
    display: grid;
    gap: 1rem;
}

.reservation-carte {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--r-m);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.reservation-carte:hover {
    border-color: var(--ligne-forte);
    box-shadow: var(--ombre-s);
}

.reservation-carte__image {
    display: block;
    background: var(--vert-profond);
}

.reservation-carte__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reservation-carte__corps {
    padding: 1.15rem 1.35rem;
    min-width: 0;
}

.reservation-carte__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.reservation-carte h3 {
    font-size: 1.15rem;
    margin-bottom: .2rem;
}

.reservation-carte h3 a {
    text-decoration: none;
    color: inherit;
}

.reservation-carte h3 a:hover {
    color: var(--vert-clair);
}

.reservation-carte__lieu {
    font-size: .87rem;
    color: var(--encre-douce);
}

.reservation-carte__infos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .75rem 1rem;
    margin: 0 0 1rem;
    padding: .9rem 0;
    border-block: 1px solid var(--ligne);
}

.reservation-carte__infos dt {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dore-sombre);
    margin-bottom: .15rem;
}

.reservation-carte__infos dd {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--encre);
}

.reservation-carte__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.reference-client {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .84rem;
    font-weight: 600;
    color: var(--vert-profond);
}

/* Pastille de statut côté client */
.etat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.etat::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentcolor;
}

.etat--succes { background: var(--succes-fond); color: var(--succes); }
.etat--attente { background: var(--attention-fond); color: var(--attention); }
.etat--danger { background: var(--danger-fond); color: var(--danger); }
.etat--info { background: var(--info-fond); color: var(--vert-profond); }
.etat--neutre { background: var(--ivoire); color: var(--encre-douce); }

@media (max-width: 640px) {
    .reservation-carte {
        grid-template-columns: minmax(0, 1fr);
    }

    .reservation-carte__image {
        aspect-ratio: 16 / 9;
    }

    .onglets-compte__sortie {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------
   34. Écrans tactiles

   Ces règles ne s'appliquent qu'aux appareils dont le pointeur principal
   est un doigt — « pointer: coarse ». Un écran étroit sur ordinateur n'en
   a pas besoin, et un grand téléphone en paysage en a besoin malgré sa
   largeur : c'est bien la nature du pointeur qui compte ici, pas le nombre
   de pixels.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {

    /* --- Le zoom automatique d'iOS ---------------------------------
       Safari sur iPhone agrandit toute la page dès qu'on touche un champ
       dont la taille de texte est inférieure à 16 px. Le visiteur se
       retrouve zoomé, décalé, et doit pincer pour revenir : c'est la
       première chose qu'on remarque en remplissant un formulaire mal
       réglé. Aucun réglage de viewport ne l'empêche — sauf à interdire le
       zoom, ce qui casse l'accessibilité. La seule vraie solution est que
       le champ fasse au moins 16 px.

       Les sélecteurs sont énumérés un par un pour peser au moins autant
       que les règles d'origine : « .champ-mini .saisie » l'emporterait
       sur un simple « input ». */
    .saisie,
    .champ-mini .saisie,
    .tri select,
    .recherche__champ select,
    .recherche__champ input,
    .champ input,
    .champ select,
    .champ textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px;
    }

    /* --- Surface de contact ----------------------------------------
       Un bouton de 32 px se vise mal au pouce : les recommandations
       Apple et Google demandent 44 px et 48 dp. Plutôt que de grossir
       les boutons — ce qui alourdirait la photo d'une carte — on étend
       la zone sensible autour, avec un pseudo-élément invisible. Le
       dessin ne bouge pas, la cible devient confortable. */
    .carte__fleche,
    .carte__favori,
    .icone-action,
    .lien-favoris,
    .lien-compte--vide,
    .burger {
        position: relative;
    }

    .carte__fleche::after,
    .carte__favori::after,
    .icone-action::after,
    .lien-favoris::after,
    .lien-compte--vide::after,
    .burger::after {
        content: "";
        position: absolute;

        /* Ramène chaque cible à 44 px : -6px autour d'un bouton de 32,
           -3px autour d'un bouton de 38. La valeur unique convient aux
           deux, un débordement de zone sensible étant sans conséquence
           tant que les boutons ne se touchent pas. */
        inset: -6px;
    }

    /* Les flèches du carrousel restent visibles : il n'y a pas de survol
       au doigt, donc rien ne les révélerait. */
    .carte__fleche {
        opacity: .92;
    }

    /* Les points du carrousel sont décoratifs, jamais cliquables : on ne
       leur donne pas de zone sensible, qui volerait les balayages. */
    .carte__point::after {
        content: none;
    }
}

/* ---------------------------------------------------------------------
   Débordement du texte long

   Les titres savent déjà se couper (voir la règle des h1-h6). Le reste du
   texte, non : une adresse e-mail ou une référence sans espace élargit sa
   colonne et fait déborder toute la page sur un écran de 320 px. Le filet
   de sécurité ci-dessous coupe ces chaînes plutôt que la mise en page.
   --------------------------------------------------------------------- */
p,
li,
dd,
td,
th,
.carte__resume,
.alerte span,
.coordonnees,
.mention {
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   Calendrier sur petit écran

   Sept colonnes ne se négocient pas : c'est une semaine. Sur un écran de
   320 px, chaque case tombe donc à ~33 px, et doit loger un numéro de jour
   ET un prix en 9 px. « 35 000 » y devient une bouillie qui déborde.

   Le calendrier répond d'abord à « cette nuit est-elle libre ? », ce que
   dit la couleur. Le prix, lui, est déjà donné par le panneau de
   réservation, en taille lisible. On le retire donc ici plutôt que de
   l'afficher illisible — et on rend à la case la place de respirer.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    .calendriers {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendrier {
        padding: .8rem;
    }

    .calendrier__grille {
        gap: 2px;
    }

    .calendrier__case {
        min-height: 34px;
        font-size: .78rem;
    }

    .calendrier__prix {
        display: none;
    }

    /* Le nom du jour tombe à une lettre : « L M M J V S D ». Trois lettres
       ne tiennent pas dans 36 px, et une abréviation rognée se lit plus mal
       qu'une initiale assumée. */
    .calendrier__jour-nom {
        font-size: .6rem;
        letter-spacing: 0;
        overflow: hidden;
    }

    .calendrier__legende {
        font-size: .75rem;
        gap: .4rem .75rem;
    }
}

/* ---------------------------------------------------------------------
   35. Catalogue sur petit écran

   Au-dessus de 1024 px, la bascule n'existe pas : le panneau occupe sa
   colonne en permanence. Tout ce qui suit ne vaut qu'en dessous.
   --------------------------------------------------------------------- */
.filtres-bascule,
.filtres-bascule__case {
    display: none;
}

@media (max-width: 1024px) {

    /* La case pilote le repli sans JavaScript. Hors flux pour ne pas
       occuper une cellule de la grille, invisible mais focalisable : le
       clavier atteint le contrôle, l'œil voit le label. */
    .filtres-bascule__case {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .filtres-bascule {
        display: flex;
        align-items: center;
        gap: .6rem;
        width: 100%;
        margin-bottom: 1.25rem;
        padding: .85rem 1.1rem;
        background: var(--blanc);
        border: 1px solid var(--ligne);
        border-radius: var(--r-m);
        font-weight: 600;
        color: var(--vert-profond);
        cursor: pointer;
        user-select: none;
        transition: border-color var(--transition), box-shadow var(--transition);
    }

    .filtres-bascule:hover {
        border-color: var(--ligne-forte);
    }

    /* L'anneau de focus est porté par le label, la case étant invisible.
       Sans cela, la tabulation traverserait le contrôle sans rien montrer. */
    .filtres-bascule__case:focus-visible + .filtres-bascule {
        outline: 2px solid var(--dore);
        outline-offset: 2px;
    }

    .filtres-bascule__texte {
        margin-right: auto;
    }

    /* Le nombre de critères posés reste visible panneau fermé : sans lui,
       on cherche pourquoi la liste est courte. */
    .filtres-bascule__compte {
        display: inline-grid;
        place-items: center;
        min-width: 22px;
        height: 22px;
        padding: 0 .4rem;
        border-radius: 999px;
        background: var(--vert-profond);
        color: var(--creme);
        font-size: .78rem;
        font-variant-numeric: tabular-nums;
    }

    .filtres-bascule__chevron {
        transition: transform var(--transition);
    }

    .filtres-bascule__case:checked ~ .filtres-bascule .filtres-bascule__chevron {
        transform: rotate(180deg);
    }

    .filtres-bascule__case:not(:checked) ~ .colonne-filtres {
        display: none;
    }

    /* --- Le panneau déplié coule dans la page ----------------------
       En colonne, « max-height + overflow » servait à garder le bouton
       d'application visible. À plat, cela crée une zone qui défile à
       l'intérieur de la page : le doigt reste prisonnier du panneau et
       n'atteint plus les résidences. On rend donc au panneau sa hauteur
       naturelle, et au bouton sa place en fin de formulaire. */
    .filtres {
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .filtres__envoi {
        position: static;
        margin: 1.25rem 0 0;
        padding: 0;
        background: none;
    }
}

@media (max-width: 640px) {

    /* Le nombre de résultats et le tri se disputaient une seule ligne :
       le tri se retrouvait comprimé à quelques caractères. */
    .barre-outils {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        padding: .9rem 1rem;
    }

    .tri {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .tri select {
        flex: 1;
        min-width: 0;
    }

    /* Les pastilles de critères passent à la ligne au lieu de pousser
       la page en largeur. */
    .filtres-actifs {
        gap: .5rem;
    }

    .filtres-actifs ul {
        flex-wrap: wrap;
    }
}

/* Compteur de photos : n'apparait que sur petit ecran, ou la galerie se
   reduit a une seule vignette. Il dit qu'il y en a d'autres, et que la
   photo s'ouvre. */
.galerie__compteur {
    display: none;
}

@media (max-width: 640px) {
    .galerie__compteur {
        position: absolute;
        right: .7rem;
        bottom: .7rem;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .35rem .7rem;
        border-radius: 999px;
        background: rgba(11, 32, 25, .72);
        color: var(--creme);
        font-size: .78rem;
        font-weight: 600;
        backdrop-filter: blur(4px);
    }
}

/* ---------------------------------------------------------------------
   36. Afficher / masquer le mot de passe

   L'enveloppe et le bouton sont créés par le script : ce bloc décrit
   simplement où le bouton se pose. Sans JavaScript, aucune de ces règles
   ne s'applique à quoi que ce soit — le champ reste intact.
   --------------------------------------------------------------------- */
.mot-de-passe {
    position: relative;
    display: block;
}

.mot-de-passe__oeil {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--encre-douce);
    font-size: 1.05rem;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.mot-de-passe__oeil:hover {
    color: var(--vert-profond);
    background: var(--creme);
}

/* Le bouton est hors de l'ordre de tabulation : il n'aura donc jamais le
   focus au clavier. On garde tout de même l'anneau pour le clic, certains
   navigateurs donnant le focus à un bouton cliqué. */
.mot-de-passe__oeil:focus-visible {
    outline: 2px solid var(--dore);
    outline-offset: 1px;
}

/* Le texte s'arrête avant l'œil, sinon un mot de passe long passe dessous. */
.mot-de-passe input {
    width: 100%;
    padding-right: 2.9rem;
}

@media (pointer: coarse) {
    .mot-de-passe__oeil {
        width: 40px;
        height: 40px;
    }

    .mot-de-passe input {
        padding-right: 3.2rem;
    }
}

/* ---------------------------------------------------------------------
   37. La carte réagit à sa propre largeur

   Une carte de 288 px dans une fenêtre de 1729 px a exactement les mêmes
   besoins qu'une carte de 288 px sur un téléphone : le prix et le bouton
   ne tiennent plus côte à côte. Une requête sur la fenêtre ne sait pas le
   voir — elle mesure l'écran, pas la carte.

   La requête de conteneur, elle, interroge la carte. La même règle sert
   donc les quatre colonnes du grand écran et la colonne unique du mobile,
   sans qu'aucun point de rupture n'ait à deviner l'autre.
   --------------------------------------------------------------------- */
.carte {
    container-type: inline-size;
    container-name: carte;
}

@container carte (max-width: 330px) {
    .carte__pied {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
    }

    .carte__actions {
        display: flex;
    }

    .carte__actions .btn {
        flex: 1;
    }

    /* Le résumé passe à deux lignes : sur une carte étroite, quatre lignes
       de texte enterrent le prix sous la ligne de flottaison. */
    .carte__resume {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .carte__titre {
        font-size: 1.05rem;
    }
}

/* Repli pour les navigateurs sans requête de conteneur : on retombe sur le
   comportement d'origine, piloté par la fenêtre. La règle existante du
   point de rupture 640 px suffit — elle couvre le cas mobile, qui est le
   seul où ces navigateurs voient une carte étroite. */