/* =============================================
   Groupe Fjord Cité — fondations
   Report fidèle de style-accueil.md, sections 1 à 4.
   La maquette est en style inline par contrainte de
   Claude Design ; ici les mêmes valeurs vivent dans
   des classes, aux mêmes nombres près.
   ============================================= */

:root {
    --gfc-encre: #181714;
    --gfc-ivoire: #DEE0DA;
    --gfc-blanc: #fff;
    --gfc-accent: #603D2A;
    --gfc-gris-texte: #55514a;
    --gfc-gris-hero: #4a463f;
    --gfc-gris-sourdine: #5E5A53;
    --gfc-gris-sombre: #9B978C;

    --gfc-filet: 1px solid rgba(24, 23, 20, .14);
    --gfc-filet-pied: 1px solid rgba(24, 23, 20, .16);
    --gfc-filet-sombre: 1px solid rgba(222, 224, 218, .18);

    --gfc-courbe: cubic-bezier(.2, .7, .3, 1);
    --gfc-gouttiere: clamp(24px, 3.9vw, 56px);

    --gfc-display: "Funnel Display", system-ui, sans-serif;
    --gfc-sans: "Funnel Sans", system-ui, sans-serif;
}

/* ---------- remise à zéro ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--gfc-blanc);
    color: var(--gfc-encre);
    font-family: var(--gfc-sans);
    font-size: 15.5px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* L'interligne de prose se pose sur les porteurs de texte, jamais sur le
   corps : hérité par un titre ou une petite capitale espacée, il leur donne
   une boîte de ligne deux fois trop haute et décale tout ce qui suit.
   Tout élément qui déclare le sien l'emporte. */
p, li, dd, td, address, blockquote, figcaption { line-height: 1.7; }

h1, h2, h3, h4, h5, h6 { line-height: normal; }

::selection { background: var(--gfc-ivoire); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gfc-accent); }

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

/* Sous 700 px, iOS agrandit la page à la mise au point d'un champ
   sous 16 px et n'y revient pas. — style-accueil.md §15 */
@media (max-width: 699px) {
    input, textarea, select { font-size: 16px; }
}

/* ---------- typographie ---------- */

.gfc-display { font-family: var(--gfc-display); font-weight: 400; }

.gfc-t-hero {
    margin: 0;
    font-family: var(--gfc-display);
    font-weight: 400;
    font-size: clamp(26px, 7.6vw, 110px);
    line-height: .93;
    letter-spacing: -.012em;
    text-transform: uppercase;
}

.gfc-t-section {
    margin: 26px 0 0;
    font-family: var(--gfc-display);
    font-weight: 400;
    font-size: clamp(30px, 3.5vw, 52px);
    line-height: 1.03;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.gfc-t-pilier {
    margin: 0;
    font-family: var(--gfc-display);
    font-weight: 300;
    font-size: clamp(26px, 2.9vw, 42px);
    line-height: 1.05;
    letter-spacing: -.005em;
}

.gfc-t-projet {
    margin: 0;
    font-family: var(--gfc-display);
    font-weight: 400;
    font-size: clamp(24px, 2.2vw, 32px);
    letter-spacing: .005em;
    line-height: normal;
}

.gfc-t-sombre {
    margin: 0;
    font-family: var(--gfc-display);
    font-weight: 400;
    font-size: clamp(19px, 1.8vw, 25px);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gfc-gris-sombre);
    line-height: normal;
}

.gfc-chiffre {
    font-family: var(--gfc-display);
    font-weight: 300;
    font-size: clamp(52px, 8.2vw, 128px);
    line-height: .92;
    letter-spacing: -.02em;
    color: var(--gfc-blanc);
}

/* Une valeur de tableau — loyer, superficie, date de disponibilité.
   Sans capitales : « 30 JUIN 2027 » et « 7E ÉTAGE » se lisent moins bien que
   leur forme normale, et la maquette ne les met en capitales nulle part. */
.gfc-valeur {
    font-family: var(--gfc-display);
    font-size: 20px;
    letter-spacing: .02em;
}

.gfc-adresse {
    font-family: var(--gfc-display);
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.gfc-accroche {
    margin: clamp(30px, 3vw, 48px) 0 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--gfc-gris-hero);
}

.gfc-para {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--gfc-gris-texte);
    max-width: 520px;
}

.gfc-para-sombre {
    font-size: 15.5px;
    line-height: 1.75;
    max-width: 36ch;
    color: var(--gfc-gris-sombre);
}

.gfc-texte-carte { font-size: 14px; line-height: 1.7; }

/* Petites capitales espacées — le liant de toute la page. */

.gfc-caps {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--gfc-gris-sourdine);
    /* Le corps porte un interligne de 1,72 pour la prose ; hérité par une
       petite capitale, il lui donne une boîte de ligne deux fois trop haute
       et décale tout ce qui suit. */
    line-height: normal;
}

/* Les modificateurs se portent seuls sur un lien, sans « .gfc-caps » —
   c'est l'usage partout dans le thème. Ils doivent donc poser eux-mêmes la
   capitale et l'interligne ; ils laissent la couleur au lien, qui la tient
   de l'accent ou du fond sombre. */
[class*="gfc-caps--"] { text-transform: uppercase; line-height: normal; }

.gfc-caps--hero { letter-spacing: .24em; }
.gfc-caps--nav { font-size: 11px; letter-spacing: .17em; font-weight: 500; }
.gfc-caps--lien-hero { font-size: 12px; letter-spacing: .14em; font-weight: 500; }
.gfc-caps--lien { font-size: 11.5px; letter-spacing: .14em; }
.gfc-caps--libelle { font-size: 10px; letter-spacing: .2em; }
.gfc-caps--pastille { font-size: 10px; letter-spacing: .18em; }
.gfc-caps--sous-adresse { font-size: 9.5px; letter-spacing: .18em; }

/* ---------- sections ---------- */

.gfc-section {
    position: relative;
    padding: clamp(56px, 5.8vw, 84px) var(--gfc-gouttiere) clamp(56px, 6vw, 88px);
    background: var(--gfc-blanc);
}

.gfc-section--ivoire {
    background: var(--gfc-ivoire);
    padding-top: clamp(60px, 6.2vw, 90px);
    padding-bottom: clamp(60px, 6.2vw, 90px);
}

.gfc-section--sombre {
    background: var(--gfc-encre);
    color: var(--gfc-ivoire);
    padding-top: clamp(56px, 6vw, 92px);
    padding-bottom: clamp(72px, 8vw, 132px);
}

/* Deux sections blanches successives se séparent d'un filet. */
.gfc-section + .gfc-section:not(.gfc-section--ivoire):not(.gfc-section--sombre) {
    border-top: var(--gfc-filet);
}

.gfc-entete-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: clamp(30px, 4vw, 72px);
    align-items: start;
    margin-bottom: clamp(34px, 3.6vw, 50px);
}

.gfc-entete-section--baseline {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 30px;
    align-items: baseline;
    justify-content: space-between;
    /* La variante ligne de base porte la même respiration que la variante
       en deux colonnes : sans elle, le titre touche la grille. */
    margin-bottom: clamp(34px, 3.6vw, 50px);
}

.gfc-surtitre { display: flex; align-items: center; gap: 13px; }

.gfc-surtitre::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--gfc-accent);
    flex: none;
}

/* ---------- motifs d'interaction (§2) ---------- */

/* 1. Soulignement animé de gauche à droite. */
.gfc-souligne {
    cursor: pointer;
    padding-bottom: 6px;
    text-decoration: none;
    background-image: linear-gradient(var(--gfc-accent), var(--gfc-accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size .45s var(--gfc-courbe);
}

.gfc-souligne:hover, .gfc-souligne:focus-visible { background-size: 100% 1px; }

.gfc-souligne--pied { padding-bottom: 3px; }
.gfc-souligne--section { padding-bottom: 7px; transition-duration: .55s; }

.gfc-souligne--sombre {
    background-image: linear-gradient(var(--gfc-ivoire), var(--gfc-ivoire));
}

/* 2. Teinte de fond sur une ligne de liste. */
.gfc-ligne {
    padding: 16px 14px;
    border-bottom: var(--gfc-filet);
    cursor: pointer;
    transition: background-color .4s var(--gfc-courbe);
}

.gfc-ligne:hover { background-color: rgba(24, 23, 20, .045); }
.gfc-ligne--tableau:hover { background-color: var(--gfc-ivoire); }

/* 3. Voile interne sur un bouton plein. */
.gfc-voile { transition: box-shadow .35s; }
.gfc-voile:hover { box-shadow: inset 0 0 0 200px rgba(255, 255, 255, .16); }

/* 4. Zoom d'image. */
.gfc-cadre { position: relative; overflow: hidden; border-radius: 8px; }

.gfc-cadre img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--gfc-courbe);
}

.gfc-cadre:hover img { transform: scale(1.06); }

/* 5. Loupe au survol d'une image cliquable. */
.gfc-zoomable { cursor: zoom-in; }

.gfc-loupe {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.86);
    transition: opacity .35s var(--gfc-courbe), transform .35s var(--gfc-courbe);
    pointer-events: none;
}

.gfc-zoomable:hover .gfc-loupe { opacity: 1; transform: scale(1); }

/* 6. Barre d'accent dans un menu déroulant. */
.gfc-option { transition: background-color .25s, color .25s, box-shadow .25s; }

.gfc-option:hover {
    background-color: var(--gfc-ivoire);
    color: var(--gfc-accent);
    box-shadow: inset 2px 0 0 var(--gfc-accent);
}

/* ---------- boutons ---------- */

.gfc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 30px;
    border: 0;
    background: var(--gfc-accent);
    color: var(--gfc-blanc);
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow .35s;
}

.gfc-btn:hover { box-shadow: inset 0 0 0 200px rgba(255, 255, 255, .16); }

.gfc-btn--clair { background: var(--gfc-ivoire); color: var(--gfc-encre); }
.gfc-btn--blanc { background: var(--gfc-blanc); color: var(--gfc-encre); }

.gfc-btn--encadre {
    background: transparent;
    color: var(--gfc-encre);
    border: 1px solid rgba(24, 23, 20, .24);
    transition: background-color .35s, color .35s, border-color .35s;
}

.gfc-btn--encadre:hover {
    background: var(--gfc-ivoire);
    color: var(--gfc-accent);
    border-color: var(--gfc-accent);
    box-shadow: none;
}

/* ---------- pastilles ---------- */

.gfc-pastille {
    display: inline-block;
    padding: 8px 13px;
    border: 1px solid rgba(24, 23, 20, .2);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: background-color .3s, color .3s, border-color .3s;
}

.gfc-pastille[aria-pressed="true"] {
    background: var(--gfc-accent);
    border-color: var(--gfc-accent);
    color: var(--gfc-blanc);
}

.gfc-statut {
    background: var(--gfc-blanc);
    color: var(--gfc-encre);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 7px 12px;
}

/* La seconde pastille d'un hero : elle porte le lieu et l'année, et se tient
   en retrait de la première pour ne pas la concurrencer. */
.gfc-statut--sourdine {
    background: rgba(24, 23, 20, .72);
    color: #fff;
    white-space: nowrap;
}

/* Projet à venir : la pastille et l'absence de survol vont ensemble. */
.gfc-avenir {
    padding: 3px 7px 2px;
    border: 1px solid rgba(24, 23, 20, .2);
    border-radius: 999px;
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gfc-gris-sourdine);
}

.gfc-lien-inerte { background-image: none !important; cursor: default; }

/* ---------- lueur qui suit le curseur (§3) ---------- */

.gfc-lueur-cadre {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.gfc-lueur-disque {
    position: absolute;
    width: 2142px;
    height: 2142px;
    margin: -1071px 0 0 -1071px;
    filter: blur(38px);
    opacity: 0;
    transition: opacity .8s var(--gfc-courbe);
}

/* ---------- animations à l'apparition (§10) ---------- */

@keyframes gfc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(96, 61, 42, .28); }
    70%  { box-shadow: 0 0 0 16px rgba(96, 61, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(96, 61, 42, 0); }
}

.gfc-medaillon { animation: gfc-pulse 3.2s infinite; }

@media (prefers-reduced-motion: reduce) {
    .gfc-medaillon { animation: none; }
    .gfc-cadre img { transition: none; }
}

/* ---------- grilles ---------- */

/* Le nombre de colonnes est posé, jamais déduit du nombre de cartes : une carte
   seule garde la largeur qu'elle aurait dans une rangée pleine. C'est ce que
   « auto-fit » ne sait pas faire — il replie les pistes vides et l'étire. */
.gfc-grille-cartes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.2vw, 30px);
}

@media (max-width: 1199px) {
    .gfc-grille-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
    .gfc-grille-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gfc-grille-projets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 36px;
}

.gfc-grille-piliers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: clamp(30px, 3.4vw, 58px);
}

.gfc-grille-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: clamp(30px, 3.4vw, 58px);
}

.gfc-grille-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

/* ---------- en-tête ---------- */

.gfc-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    border-bottom: var(--gfc-filet);
    transition: box-shadow .35s var(--gfc-courbe);
}

.gfc-header__rang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px clamp(24px, 4vw, 56px);
    transition: padding .35s var(--gfc-courbe);
}

.gfc-header[data-colle] .gfc-header__rang { padding-top: 13px; padding-bottom: 13px; }
.gfc-header[data-colle] { box-shadow: 0 10px 30px rgba(24, 23, 20, .07); }

.gfc-header__logo img { height: 36px; width: auto; transition: opacity .3s; }
.gfc-header__logo:hover img { opacity: .62; }

/* La navigation suit la largeur de la fenêtre : 14,5 px sur un grand écran,
   13 px quand la barre se resserre. Les tailles et l'interlettrage sont posés
   une fois sur le <nav> et hérités — un lien, le bouton Projets et le
   téléphone portaient chacun leur copie, et elles divergeaient. */
.gfc-nav {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    column-gap: clamp(12px, 1.9vw, 26px);
    row-gap: 14px;
    font-size: clamp(13px, 1.35vw, 14.5px);
    letter-spacing: clamp(.06em, .12vw, .14em);
    text-transform: uppercase;
    font-weight: 500;
}

.gfc-nav a,
.gfc-nav__bouton {
    color: var(--gfc-encre);
    text-decoration: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    padding-top: 6px;
    padding-bottom: 6px;
}

.gfc-nav__bouton {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    cursor: pointer;
}

.gfc-header__tel {
    color: var(--gfc-accent);
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
    padding-top: 4px;
    padding-bottom: 4px;
}

.gfc-nav .current-menu-item > a,
.gfc-nav a[aria-current] { color: var(--gfc-accent); }

/* Filet vertical avant le bloc corporatif : la hiérarchie vient de l'espace seul. */
.gfc-nav__filet {
    width: 1px;
    height: 13px;
    background: rgba(24, 23, 20, .22);
    margin: 0 12px;
    flex: none;
}

.gfc-nav__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-left: 7px;
    font-size: 9px;
    letter-spacing: 0;
    background: rgba(24, 23, 20, .08);
    color: var(--gfc-encre);
    transition: background-color .3s, color .3s;
}

.gfc-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--gfc-accent);
    transition: width .12s linear;
}

/* Tiroir Projets — la hauteur est animée en JS, jamais par transition CSS.
   Le contenu ne porte aucune marge extérieure : offsetHeight ne la compterait pas. */
.gfc-tiroir { overflow: hidden; height: 0; }

.gfc-tiroir__contenu {
    padding: 16px clamp(24px, 4vw, 56px) 18px;
    border-top: var(--gfc-filet);
    display: flex;
    justify-content: center;
}

.gfc-tiroir__liens {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px clamp(22px, 2.6vw, 40px);
}

.gfc-tiroir__liens a {
    display: flex;
    align-items: baseline;
    gap: 9px;
    color: var(--gfc-encre);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 5px 0;
}

.gfc-tiroir__secteur { font-size: 9px; letter-spacing: .14em; color: var(--gfc-gris-sombre); }

/* ---------- hero ---------- */

.gfc-hero {
    position: relative;
    background: var(--gfc-ivoire);
    overflow: hidden;
    min-height: min(90vh, 780px);
    display: flex;
    align-items: center;
    border-bottom: var(--gfc-filet);
}

.gfc-hero--court { min-height: min(56vh, 440px); }

.gfc-hero__rendu { position: absolute; right: 0; top: 0; bottom: 0; width: 62%; overflow: hidden; }
.gfc-hero--court .gfc-hero__rendu { width: 56%; }

.gfc-hero__rendu img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1);
    will-change: transform, opacity;
}

.gfc-hero__rendu img[data-actif] { opacity: 1; }

/* Une vue sans photo garde sa place dans le carrousel : l'immeuble existe,
   son portrait n'est pas encore arrivé. Le fond dit l'attente plutôt que de
   sauter la vue, ce qui désynchroniserait le sélecteur. */
.gfc-hero__attente {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #CFD2CB;
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1);
}

.gfc-hero__attente[data-actif] { opacity: 1; }

.gfc-hero__voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #DEE0DA 0%, rgba(222, 224, 218, .78) 24%, rgba(222, 224, 218, .46) 50%, rgba(222, 224, 218, .42) 77%, rgba(222, 224, 218, .05) 86%, rgba(222, 224, 218, 0) 92%);
}

.gfc-hero__contenu {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(52px, 5.4vw, 86px) clamp(20px, 3.2vw, 60px);
}

/* Hero pleine image, texte blanc.
   L'accueil garde son voile ivoire venu de la gauche : l'image y est un
   décor derrière un titre noir. Les pages de section, elles, posent le
   titre SUR la photo — l'image occupe tout le cadre et le dégradé monte du
   bas, seule façon de garder le texte lisible quel que soit le cliché. */
.gfc-hero--sombre { align-items: flex-end; min-height: min(78vh, 660px); }
.gfc-hero--sombre .gfc-hero__rendu { left: 0; width: 100%; }

.gfc-hero--sombre .gfc-hero__voile {
    background: linear-gradient(0deg,
        rgba(24, 23, 20, .95) 0%,
        rgba(24, 23, 20, .88) 30%,
        rgba(24, 23, 20, .55) 68%,
        rgba(24, 23, 20, 0) 100%);
}

.gfc-hero--sombre .gfc-hero__contenu,
.gfc-hero--sombre .gfc-t-hero { color: #fff; }
.gfc-hero--sombre .gfc-accroche { color: rgba(222, 224, 218, .9); }

/* Sélecteur de rendu — hors du flux, pour ne pas augmenter la hauteur du hero. */
.gfc-hero__selecteur {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: min(456px, 54vw);
    padding: clamp(44px, 5.5vw, 104px) clamp(20px, 3.2vw, 60px) clamp(24px, 2.8vw, 44px) clamp(40px, 5vw, 104px);
    background: radial-gradient(135% 155% at 100% 100%, rgba(24, 23, 20, .82) 0%, rgba(24, 23, 20, .52) 44%, rgba(24, 23, 20, 0) 78%);
}

.gfc-hero__choix {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 11px 0;
    cursor: pointer;
    border: 0;
    background: none;
    border-bottom: 1px solid rgba(255, 255, 255, .42);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    text-shadow: 0 1px 16px rgba(24, 23, 20, .9);
    transition: color .35s;
    text-align: right;
}

.gfc-hero__choix[aria-current="true"] { color: #fff; }

.gfc-hero__marqueur {
    width: 2px;
    height: 10px;
    background: #fff;
    opacity: 0;
    transition: opacity .35s;
    flex: none;
}

.gfc-hero__choix[aria-current="true"] .gfc-hero__marqueur { opacity: 1; }

.gfc-hero__jauge { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: #fff; }

/* Bandeau de crédit — crédite les rendus d'architecte. */
/* ---------- carte d'immeuble ---------- */

.gfc-carte { display: block; color: inherit; text-decoration: none; }

.gfc-carte__photo {
    position: relative;
    height: clamp(240px, 22vw, 290px);
    border-radius: 8px;
    overflow: hidden;
    background: var(--gfc-ivoire);
}

.gfc-carte__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--gfc-courbe); }
.gfc-carte:hover .gfc-carte__photo img { transform: scale(1.06); }

.gfc-carte__voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(24, 23, 20, .86) 0%, rgba(24, 23, 20, .42) 32%, rgba(24, 23, 20, 0) 62%);
}

.gfc-carte__badges {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.gfc-carte__badge {
    background: var(--gfc-blanc);
    color: var(--gfc-encre);
    padding: 8px 13px;
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.gfc-carte__medaillon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--gfc-blanc);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.gfc-carte__medaillon strong {
    font-family: var(--gfc-display);
    font-weight: 400;
    font-size: 19px;
    color: var(--gfc-accent);
}

.gfc-carte__medaillon span { font-size: 8px; letter-spacing: .14em; color: var(--gfc-gris-sourdine); }

.gfc-carte__prix { position: absolute; left: 16px; bottom: 14px; color: #fff; }
.gfc-carte__prix em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.gfc-carte__prix strong { font-family: var(--gfc-display); font-weight: 300; font-size: 34px; }
.gfc-carte__prix i { font-style: normal; font-size: 11.5px; }

/* La superficie tient la place du prix sur la carte de local : le site d'origine
   n'annonce pas de loyer commercial, mais toujours une aire. */
.gfc-carte__aire {
    position: absolute;
    left: 16px;
    bottom: 14px;
    color: #fff;
    font-family: var(--gfc-display);
    font-weight: 300;
    font-size: 28px;
}

.gfc-carte__pied { padding-top: 18px; margin-top: 18px; border-top: var(--gfc-filet); }
.gfc-carte__dispo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gfc-accent); line-height: normal; }

/* Échelle de tailles — l'état se lit au gris et à l'icône, aucun code de couleur. */
.gfc-tailles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.gfc-taille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    font-size: 10px;
    letter-spacing: .1em;
    background: var(--gfc-ivoire);
    color: var(--gfc-encre);
}

.gfc-taille[data-prise] {
    background: transparent;
    color: var(--gfc-gris-sombre);
    border: 1px solid rgba(24, 23, 20, .1);
}

/* ---------- tableau de logements ---------- */

.gfc-tableau { width: 100%; }

.gfc-tableau__entete,
.gfc-tableau__ligne {
    display: grid;
    grid-template-columns: 1.85fr .66fr .76fr .74fr .8fr .64fr;
    gap: 16px;
    align-items: center;
}

.gfc-tableau__entete { padding: 0 16px 12px; border-bottom: 1px solid var(--gfc-encre); }

.gfc-tableau__entete button {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gfc-gris-sourdine);
}

.gfc-tableau__entete button[data-actif] { color: var(--gfc-accent); }

.gfc-tableau__ligne {
    padding: 22px 16px;
    border-bottom: var(--gfc-filet);
    color: inherit;
    text-decoration: none;
    font-size: 13.5px;
    transition: background-color .4s var(--gfc-courbe);
}

.gfc-tableau__ligne:hover { background-color: var(--gfc-ivoire); }
.gfc-tableau__ligne > :last-child { text-align: right; font-family: var(--gfc-display); }

/* Aperçu photo au survol — rien au repos. */
.gfc-apercu {
    position: fixed;
    z-index: 70;
    width: 376px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gfc-blanc);
    box-shadow: 0 34px 80px rgba(24, 23, 20, .42), 0 10px 26px rgba(24, 23, 20, .22);
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity .3s var(--gfc-courbe), transform .3s var(--gfc-courbe);
    pointer-events: none;
}

.gfc-apercu[data-ouvert] { opacity: 1; transform: translateY(0) scale(1); }
.gfc-apercu img { height: 238px; width: 100%; object-fit: cover; }

/* ---------- bloc sombre ---------- */

.gfc-sombre__filigrane {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: min(84%, 560px);
    width: auto;
    opacity: .03;
    pointer-events: none;
}

.gfc-pilier__filet { display: block; width: 34px; height: 1px; background: var(--gfc-accent); margin-bottom: 22px; }

/* Sur fond sombre le filet n'est pas en accent mais en ivoire très dilué,
   et le titre de pilier passe au blanc franc. */
.gfc-section--sombre .gfc-pilier__filet { background: rgba(222, 224, 218, .18); }
.gfc-section--sombre .gfc-t-pilier { color: #fff; margin-bottom: 14px; }
.gfc-section--sombre .gfc-t-pilier + .gfc-para-sombre { margin-top: 0; }

.gfc-chiffres { margin-top: clamp(52px, 6vw, 96px); }
.gfc-chiffres > div { padding-right: clamp(18px, 2vw, 30px); }

/* ---------- pied de page ---------- */

.gfc-footer {
    background: var(--gfc-ivoire);
    padding: clamp(56px, 5vw, 72px) var(--gfc-gouttiere) 34px;
}

.gfc-footer__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 48px;
}

.gfc-footer h3 {
    margin: 0 0 18px;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gfc-gris-sourdine);
}

.gfc-footer a { color: var(--gfc-encre); text-decoration: none; font-size: 14px; line-height: 1.8; }
.gfc-footer ul { list-style: none; margin: 0; padding: 0; }
.gfc-footer__logo { height: 34px; width: auto; margin-bottom: 20px; }

.gfc-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gfc-footer__social svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

.gfc-footer__mentions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    margin-top: clamp(40px, 4vw, 56px);
    padding-top: 22px;
    border-top: var(--gfc-filet-pied);
    font-size: 11px;
    color: var(--gfc-gris-sourdine);
}

.gfc-footer__mentions a { font-size: 11px; color: var(--gfc-gris-sourdine); }

/* Le pied de page réserve la place de la barre basse : un padding sur le
   corps tomberait au milieu du contenu. — style-accueil.md §15 */
@media (max-width: 959px) {
    .gfc-footer { padding-bottom: 96px; }
}

/* ---------- barre de recherche / tris ---------- */

.gfc-barre-tris {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(152px, 100%), 1fr));
    background: transparent;
    border-radius: 7px;
    border: var(--gfc-filet);
    overflow: visible;
    transition: background-color .3s;
}

.gfc-barre-tris[data-colle] { background: var(--gfc-blanc); }

.gfc-cellule {
    position: relative;
    padding: 16px 20px;
    cursor: pointer;
    text-align: left;
    border: 0;
    border-right: var(--gfc-filet);
    background: none;
}

.gfc-cellule:last-child { border-right: 0; }
.gfc-cellule__libelle { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gfc-gris-sourdine); }
.gfc-cellule__valeur { display: block; margin-top: 7px; font-family: var(--gfc-display); font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }

.gfc-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 1px);
    z-index: 40;
    background: var(--gfc-blanc);
    border: var(--gfc-filet);
    box-shadow: 0 18px 40px rgba(24, 23, 20, .1);
    max-height: 320px;
    overflow-y: auto;
}

.gfc-menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 11px 20px;
    font-size: 12.5px;
    cursor: pointer;
}

/* ---------- curseurs à deux poignées ---------- */

.gfc-piste { position: relative; height: 26px; }
.gfc-piste__rail { position: absolute; top: 12px; left: 0; right: 0; height: 1px; background: rgba(24, 23, 20, .22); }
.gfc-piste__plein { position: absolute; top: 12px; height: 1px; background: var(--gfc-accent); }

.gfc-poignee {
    position: absolute;
    top: 0;
    width: 22px;
    height: 26px;
    margin-left: -11px;
    border: 0;
    background: none;
    cursor: grab;
    padding: 0;
}

.gfc-poignee::after {
    content: "";
    display: block;
    width: 3px;
    height: 22px;
    margin: 2px auto;
    background: var(--gfc-accent);
}

/* ---------- case à cocher ---------- */

.gfc-case {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(24, 23, 20, .34);
    transition: background-color .25s, border-color .25s;
}

.gfc-case svg { opacity: 0; transition: opacity .25s; }
.gfc-case[aria-checked="true"] { background: var(--gfc-accent); border-color: var(--gfc-accent); }
.gfc-case[aria-checked="true"] svg { opacity: 1; }

/* ---------- rail compact collant ---------- */

.gfc-rail {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px var(--gfc-gouttiere);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px);
    border-bottom: var(--gfc-filet);
    transform: translateY(-120%);
    transition: transform .4s var(--gfc-courbe);
}

.gfc-rail[data-visible] { transform: none; }

@media (max-width: 1249px) { .gfc-rail__libelle { display: none; } }
@media (max-width: 1419px) { .gfc-rail__compteur { display: none; } }

/* ---------- galerie bento (§8) ---------- */

.gfc-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(140px, 15vw, 210px);
    gap: 12px;
}

.gfc-bento > * { position: relative; border-radius: 8px; overflow: hidden; }
.gfc-bento [data-tuile="7x2"] { grid-column: span 7; grid-row: span 2; }
.gfc-bento [data-tuile="5x1"] { grid-column: span 5; grid-row: span 1; }
.gfc-bento [data-tuile="4x1"] { grid-column: span 4; grid-row: span 1; }

.gfc-bento__legende {
    position: absolute;
    inset: auto 0 0 0;
    padding: 30px 16px 13px;
    background: linear-gradient(transparent, rgba(24, 23, 20, .62));
    color: #fff;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

@media (max-width: 779px) {
    .gfc-bento { grid-template-columns: 1fr; grid-auto-rows: clamp(180px, 46vw, 240px); }
    .gfc-bento > * { grid-column: 1 / -1 !important; grid-row: span 1 !important; }
}

/* ---------- plan d'étage ---------- */

.gfc-plan { width: 100%; height: auto; display: block; }
.gfc-plan__logement { fill: #E4EAE2; stroke: none; cursor: pointer; transition: fill .3s var(--gfc-courbe); }
.gfc-plan__logement[data-statut="reserve"] { fill: #EFE4D2; }
.gfc-plan__logement[data-statut="loue"] { fill: #F0DCD6; }
.gfc-plan__logement[data-survol] { filter: brightness(1.06); }
.gfc-plan__murs { fill: none; stroke: #8E8B85; stroke-linejoin: round; stroke-linecap: square; }

/* ---------- sélecteur d'étage ----------
   Un seul cadre : la façade et le plan sont deux vues du même bloc. Les
   basculer plutôt que les juxtaposer garde l'image grande, ce qui compte
   davantage qu'une comparaison côte à côte qu'on ne fait jamais. */

.gfc-cadre-selecteur {
    position: relative;
    background: #fff;
    border: var(--gfc-filet);
    border-radius: 8px;
    overflow: hidden;
}

.gfc-cadre-selecteur__pied,
.gfc-cadre-selecteur__entete {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gfc-gris-texte);
}

.gfc-cadre-selecteur__pied { padding: 16px 20px; border-top: var(--gfc-filet); }
.gfc-cadre-selecteur__entete { padding: 18px 22px; border-bottom: var(--gfc-filet); align-items: baseline; }

.gfc-cadre-selecteur__unites { padding: 0 clamp(18px,2vw,30px) clamp(18px,2vw,30px); }

/* Les trois pastilles de la légende, et les points des listes. */
.gfc-legende-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 10.5px; letter-spacing: .12em; }
.gfc-legende-plan > span { display: flex; align-items: center; gap: 7px; }

[data-point] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
[data-point="disponible"] { background: #5E7D5A; }
[data-point="reserve"]    { background: #B08A3E; }
[data-point="loue"]       { background: #9E5B4F; }

/* La bulle qui suit le pointeur sur la façade. */
.gfc-bulle-etage {
    position: absolute;
    left: 0;
    top: 0;
    padding: 9px 13px;
    background: var(--gfc-encre);
    color: #fff;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -130%);
    z-index: 2;
}

/* Une ligne d'étage dans la colonne de droite. */
.gfc-ligne-etage {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 20px;
    border: 0;
    border-bottom: 1px solid rgba(24, 23, 20, .1);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color .35s var(--gfc-courbe);
}

.gfc-ligne-etage:last-child { border-bottom: 0; }
.gfc-ligne-etage:hover,
.gfc-ligne-etage[aria-current="true"] { background-color: rgba(24, 23, 20, .04); }
.gfc-ligne-etage__nom { font-family: var(--gfc-display); font-size: 18px; letter-spacing: .02em; }
.gfc-ligne-etage__detail { font-size: 11px; color: var(--gfc-gris-texte); }
.gfc-ligne-etage__chevron { flex: none; opacity: .4; transform: rotate(-90deg); }

/* Bascule de phase : une rangée jusqu'à trois phases, puis 2 + 2, 3 + 2,
   3 + 3. Les rangées sont écrites par le script ; chaque bouton prend une
   part égale de la sienne. */
.gfc-phases {
    background: #fff;
    border: var(--gfc-filet);
    border-radius: 8px;
    overflow: hidden;
}
.gfc-phases[hidden] { display: none; }
.gfc-phases__rangee { display: flex; }
.gfc-phases__rangee + .gfc-phases__rangee { border-top: var(--gfc-filet); }
.gfc-phases__bouton {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 13px 12px 12px;
    border: 0;
    background: none;
    color: var(--gfc-encre);
    cursor: pointer;
    transition: background-color .35s var(--gfc-courbe), color .35s var(--gfc-courbe);
}
.gfc-phases__bouton + .gfc-phases__bouton { border-left: var(--gfc-filet); }
.gfc-phases__bouton:hover { background-color: rgba(24, 23, 20, .04); }
.gfc-phases__bouton[aria-pressed="true"] { background-color: var(--gfc-encre); color: var(--gfc-ivoire); }
.gfc-phases__nom { font-family: var(--gfc-display); font-size: 17px; letter-spacing: .02em; }
.gfc-phases__detail { font-size: 11px; opacity: .7; }

@media (max-width: 959px) {
    [data-grille-selecteur] { grid-template-columns: 1fr !important; }
}

/* ---------- lignes libellé / valeur (modèles, fiches) ---------- */

.gfc-fiche-lignes > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: var(--gfc-filet);
}

.gfc-fiche-lignes > div:last-child { border-bottom: 0; }
.gfc-fiche-lignes dt { margin: 0; }
.gfc-fiche-lignes dd { margin: 0; font-family: var(--gfc-display); font-size: 16px; line-height: 1.3; text-align: right; }

/* ---------- frise chronologique ----------
   Une suite, pas une grille : les jalons se lisent de gauche à droite,
   reliés par un filet continu qui passe derrière les points. */

.gfc-frise {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: clamp(20px, 2.4vw, 34px);
    margin-top: clamp(34px, 3.6vw, 52px);
    padding-top: 26px;
}

.gfc-frise::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 1px;
    background: rgba(24, 23, 20, .16);
}

.gfc-frise__jalon { position: relative; }

.gfc-frise__point {
    position: absolute;
    left: 0;
    top: -26px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gfc-accent);
    transform: translateY(1px);
}

@media (max-width: 959px) {
    /* En colonne, le filet passe à la verticale, à gauche des jalons. */
    .gfc-frise { padding-top: 0; padding-left: 26px; }
    .gfc-frise::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
    .gfc-frise__point { left: -26px; top: 6px; }
}

/* ---------- carte du bureau ----------
   Pleine largeur, désaturée : la carte situe, elle n'attire pas l'œil. */

.gfc-carte-bureau {
    position: relative;
    height: clamp(300px, 34vw, 440px);
    background: var(--gfc-ivoire);
}

.gfc-carte-bureau iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(1) contrast(1.06);
}

.gfc-carte-bureau__lien {
    position: absolute;
    left: var(--gfc-gouttiere);
    bottom: clamp(20px, 2.4vw, 32px);
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 24px;
    background: var(--gfc-blanc);
    color: var(--gfc-encre);
    box-shadow: 0 14px 34px rgba(24, 23, 20, .18);
    transition: box-shadow .35s var(--gfc-courbe);
}

.gfc-carte-bureau__lien:hover { box-shadow: 0 20px 46px rgba(24, 23, 20, .26); }

/* ---------- l'équipe ----------
   Deux colonnes : le texte à gauche, qui suit le défilement, et les
   portraits à droite. La colonne de droite vaut deux fois la gauche, ce qui
   donne des cartes assez étroites pour qu'un cadrage 3/4 garde le sujet
   entier — sur toute la largeur, il lui coupait la tête. */

.gfc-equipe {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(30px, 3.6vw, 66px);
    align-items: stretch;
}

.gfc-equipe__texte { flex: 1 1 250px; }
.gfc-equipe__texte > div { position: sticky; top: clamp(86px, 9vw, 118px); }
.gfc-equipe__grille { flex: 2 1 460px; }

.gfc-equipe__groupe {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(34px, 3.4vw, 50px);
}

.gfc-equipe__grille > .gfc-equipe__groupe:first-child { margin-top: 0; }
.gfc-equipe__filet { flex: 1; height: 1px; background: rgba(24, 23, 20, .14); }

@media (max-width: 959px) {
    /* En colonne, le bloc de texte ne colle plus : il défilerait tout seul. */
    .gfc-equipe__texte > div { position: static; }
}

/* ---------- coordonnées sur fond sombre ---------- */

.gfc-coordonnees {
    display: grid;
    grid-template-columns: minmax(112px, .46fr) 1fr;
    gap: 12px 28px;
    padding: 22px 0;
    border-top: 1px solid rgba(222, 224, 218, .2);
    font-size: 15px;
    line-height: 1.75;
    color: var(--gfc-ivoire);
}

.gfc-coordonnees--fin { border-bottom: 1px solid rgba(222, 224, 218, .2); }

@media (max-width: 699px) {
    .gfc-coordonnees { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- prose courante (narratif d'une page) ---------- */

.gfc-prose { max-width: 62ch; }
.gfc-prose > :first-child { margin-top: 0; }
.gfc-prose > :last-child { margin-bottom: 0; }
.gfc-prose p { margin: 0 0 1.15em; font-size: 15.5px; line-height: 1.72; color: var(--gfc-gris-texte); }

/* Un texte légal : une seule colonne, des titres qui hiérarchisent sans
   crier, et des listes qui gardent le filet court du reste du site. */
.gfc-prose--legale { max-width: 72ch; }

.gfc-prose--legale h2 {
    margin: clamp(38px, 3.6vw, 56px) 0 16px;
    padding-top: clamp(26px, 2.6vw, 38px);
    border-top: var(--gfc-filet);
    font-family: var(--gfc-display);
    font-weight: 400;
    font-size: clamp(21px, 2.1vw, 28px);
    letter-spacing: .005em;
    color: var(--gfc-encre);
}

.gfc-prose--legale > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.gfc-prose--legale h3 {
    margin: 28px 0 10px;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: normal;
    color: var(--gfc-encre);
}

.gfc-prose--legale ul { margin: 0 0 1.15em; padding: 0; list-style: none; }

.gfc-prose--legale li {
    position: relative;
    padding: 5px 0 5px 26px;
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--gfc-gris-texte);
}

.gfc-prose--legale li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 12px;
    height: 1px;
    background: rgba(24, 23, 20, .34);
}

.gfc-prose--legale a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- volet de demande de visite ---------- */

.gfc-voile-fond {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(24, 23, 20, .44);
}

.gfc-volet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 81;
    width: min(460px, 100%);
    background: var(--gfc-blanc);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(26px, 3vw, 40px);
}

.gfc-champ { margin-top: 22px; }
.gfc-champ label { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gfc-gris-sourdine); }

.gfc-champ input,
.gfc-champ textarea,
.gfc-champ select {
    width: 100%;
    border: 0;
    border-bottom: var(--gfc-filet);
    background: none;
    padding: 11px 0;
    font-size: 15px;
    transition: border-color .3s;
}

.gfc-champ input:focus,
.gfc-champ textarea:focus,
.gfc-champ select:focus { outline: none; border-bottom-color: var(--gfc-accent); }

/* ---------- plein écran (zoom) ---------- */

.gfc-plein {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(24, 23, 20, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    overscroll-behavior: contain;
}

.gfc-plein img { max-width: 92vw; max-height: 86vh; object-fit: contain; }

.gfc-plein__fleche {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
}

.gfc-plein__compteur {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 11.5px;
    letter-spacing: .14em;
}

/* L'en-tête et la barre d'action s'effacent pendant le plein écran :
   un élément fixe peut être recouvert par un autre plan d'empilement. */
html[data-plan-plein] .gfc-header,
html[data-plan-plein] .gfc-barre-basse { display: none; }

/* ---------- utilitaires ---------- */

.gfc-visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Un CTA redondant avec la barre basse est masqué visuellement, jamais
   par display:none — la barre déclenche son clic. — style-accueil.md §15 */
@media (max-width: 959px) {
    [data-cta-double] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
}

/* =============================================
   Couche réactive — style-accueil.md §15
   Report des règles de reactif.js. Dans la maquette elles vivaient en JS
   parce que tout était en style inline ; ici ce sont des media queries,
   et le rendu bureau reste la vérité : aucune règle ne le touche.

   tel  < 700 px · tabP < 960 px · tabL < 1200 px · bureau >= 1200 px
   ============================================= */

/* ---------- sous 1200 px (tabL) ---------- */
@media (max-width: 1199px) {
    .gfc-bento { grid-auto-rows: clamp(120px, 16vw, 180px); }
}

/* ---------- sous 960 px (mobile : tel + tabP) ---------- */
@media (max-width: 959px) {

    /* La navigation bureau et le téléphone passent dans le menu plein écran. */
    .gfc-nav, .gfc-header__tel, .gfc-nav__filet { display: none; }

    .gfc-header__rang { gap: 16px; padding-right: 52px; }

    /* La lueur n'a pas d'objet au doigt, et son disque déborde des sections
       qui ne rognent pas. */
    .gfc-lueur-cadre { display: none; }

    /* Les volets passent devant la barre d'action, sans quoi leur bouton
       d'envoi finit dessous. */
    .gfc-volet { z-index: 200; }
    .gfc-voile-fond { z-index: 196; }
    .gfc-plein { z-index: 205; }

    /* Le rail compact et l'aperçu au survol n'existent pas au doigt. */
    .gfc-rail, .gfc-apercu { display: none !important; }

    /* Cibles tactiles. */
    .gfc-header__logo { display: flex; align-items: center; min-height: 44px; }
    .gfc-pastille { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 15px; }
    .gfc-poignee { width: 28px; height: 28px; }

    /* Les appels de fin de section font 18 à 22 px de haut : sous le minimum
       tactile. Le rembourrage haut fait le gros du travail ; celui du bas
       reste court pour ne pas décoller le filet posé en background-position. */
    .gfc-souligne--section { padding-top: 16px; padding-bottom: 10px; }

    /* Le hero : l'image passe en fond plein cadre et le voile devient vertical. */
    .gfc-hero { min-height: 0; align-items: flex-start; }
    .gfc-hero__rendu { left: 0; width: 100%; }

    .gfc-hero__voile {
        background: linear-gradient(180deg, rgba(222, 224, 218, .97) 0%, rgba(222, 224, 218, .92) 30%, rgba(222, 224, 218, .66) 54%, rgba(222, 224, 218, .3) 76%, rgba(24, 23, 20, .22) 100%);
    }

    .gfc-hero__contenu { padding: 44px 32px 246px; }

    /* Le sélecteur de rendu, panneau bas-droite en bureau, prend la largeur. */
    .gfc-hero__selecteur {
        width: 100%;
        padding: 60px clamp(20px, 4vw, 32px) 22px;
        background: linear-gradient(180deg, rgba(24, 23, 20, 0) 0%, rgba(24, 23, 20, .55) 42%, rgba(24, 23, 20, .8) 100%);
    }

    /* Le tableau devient une pile de cartes seulement sous 700 px : à 768 px
       les six colonnes tiennent encore. */
    .gfc-tableau__entete { display: none; }
}

/* ---------- sous 700 px (tel) ---------- */
@media (max-width: 699px) {
    .gfc-header__rang { padding-left: 20px; padding-right: 52px; }
    .gfc-hero { border-bottom: 0; }
    .gfc-hero__contenu { padding: 34px 20px 236px; }

    .gfc-footer__grille { grid-template-columns: 1fr; gap: 34px; }
    .gfc-footer a { padding-top: 6px; padding-bottom: 6px; }

    .gfc-volet { width: 100%; }

    /* Chaque ligne de tableau devient une carte avec vignette. */
    .gfc-tableau__ligne {
        grid-template-columns: 88px 1fr;
        grid-template-areas:
            "vignette adresse"
            "vignette faits";
        gap: 4px 14px;
        align-items: start;
    }

    .gfc-tableau__ligne > :nth-child(1) { grid-area: adresse; }
    .gfc-tableau__ligne > :nth-child(n+2) { grid-area: faits; display: inline; }
    .gfc-tableau__ligne > :nth-child(n+2)::after { content: " · "; color: rgba(24, 23, 20, .3); }
    .gfc-tableau__ligne > :last-child { text-align: left; }
    .gfc-tableau__ligne > :last-child::after { content: ""; }
    .gfc-tableau__ligne [data-vignette] { grid-area: vignette; display: block; }

    .gfc-grille-cartes { grid-template-columns: 1fr; }
}

/* La vignette de ligne n'existe qu'au téléphone. */
[data-vignette] { display: none; }

/* ---------- coquille mobile ---------- */

.gfc-burger {
    display: none;
    position: fixed;
    top: 0;
    right: 8px;
    z-index: 70;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 60px;
    border: 0;
    background: none;
    cursor: pointer;
}

.gfc-burger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--gfc-encre);
    transition: transform .35s var(--gfc-courbe), opacity .25s;
}

.gfc-burger span + span { margin-top: 6px; }
.gfc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gfc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gfc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.gfc-menu-plein {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: var(--gfc-ivoire);
    padding: 84px clamp(24px, 6vw, 40px) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    transition: transform .45s var(--gfc-courbe);
}

.gfc-menu-plein[data-ouvert] { transform: none; }
.gfc-menu-plein ul { list-style: none; margin: 0; padding: 0; }

.gfc-menu-plein a {
    display: block;
    padding: 16px 0;
    border-bottom: var(--gfc-filet);
    color: var(--gfc-encre);
    text-decoration: none;
    font-family: var(--gfc-display);
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.gfc-barre-basse {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 64;
    height: 62px;
    align-items: stretch;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px);
    border-top: var(--gfc-filet);
}

.gfc-barre-basse > * {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--gfc-encre);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
}

.gfc-barre-basse > .gfc-barre-basse__accent { background: var(--gfc-accent); color: #fff; }

/* Le panneau de filtres sort du flux et s'ouvre en plein écran. */
@media (max-width: 959px) {
    .gfc-panneau-filtres {
        position: fixed;
        inset: 0;
        z-index: 66;
        background: var(--gfc-blanc);
        padding: 20px clamp(20px, 5vw, 32px) 96px;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateY(100%);
        transition: transform .45s var(--gfc-courbe);
    }

    .gfc-panneau-filtres[data-ouvert] { transform: none; }
    .gfc-barre-tris { grid-template-columns: 1fr 1fr; }
    .gfc-cellule { border-bottom: var(--gfc-filet); }
}

/* Un bouton qui porte le soulignement animé ne doit pas déclarer
   « background:none » : cela effacerait le dégradé du filet. Seul le fond
   est remis à zéro. */
button.gfc-souligne {
    border: 0;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    color: var(--gfc-encre);
}

/* La bascule Grille / Tableau : l'état vient d'un attribut, pas d'un style
   posé en JS — voir le commentaire de peindreVue() dans repertoire.js. */
[data-vue] { padding-bottom: 6px; }
[data-vue][data-actif] { color: var(--gfc-accent) !important; background-size: 100% 1px; }

/* Un en-tête de tri actif passe en accent. */
.gfc-tableau__entete button[data-actif] { background-size: 100% 1px; }


/* =============================================
   Bascules de la coquille mobile.

   Elles closent la feuille à dessein : les définitions de base posent
   display:none, et à spécificité égale c'est la règle la plus tardive qui
   l'emporte. Placées plus haut, elles seraient annulées.
   ============================================= */
@media (max-width: 959px) {
    /* Le bouton menu est fixe : il ne peut pas vivre dans l'en-tête, dont
       le backdrop-filter servirait de cadre de référence aux éléments fixes. */
    .gfc-burger { display: flex; }
    .gfc-barre-basse { display: flex; }
}

/* =============================================
   Gravity Forms
   Champs sur filet inférieur seul, focus en accent, bouton en aplat.
   Le style par défaut du plugin est entièrement repris.
   ============================================= */

.gform_wrapper form { margin: 0; }

.gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px clamp(18px, 2vw, 28px);
}

.gform_wrapper .gfield { grid-column: span 1; }

/* Un champ caché — l'unité ou le poste visé — reste une case de la grille
   tant qu'il est seulement invisible : il décalait le premier champ visible
   dans la seconde colonne, laissant un trou en haut à gauche. */
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-hidden { display: none; }

/* Message, pièces jointes et champs longs prennent la largeur. */
.gform_wrapper .gfield--type-textarea,
.gform_wrapper .gfield--type-fileupload,
.gform_wrapper .gfield--width-full { grid-column: 1 / -1; }

@media (max-width: 699px) {
    .gform_wrapper .gform_fields { grid-template-columns: minmax(0, 1fr); }
    .gform_wrapper .gfield { grid-column: 1 / -1; }
}

.gform_wrapper .gfield_label {
    display: block;
    margin: 0 0 4px;
    font-family: var(--gfc-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gfc-gris-sourdine);
}

.gform_wrapper .gfield_required {
    color: var(--gfc-accent);
    margin-left: 5px;
    font-size: 10px;
    letter-spacing: .1em;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
    width: 100%;
    border: 0;
    border-bottom: var(--gfc-filet);
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
    font-family: var(--gfc-sans);
    font-size: 15px;
    color: var(--gfc-encre);
    box-shadow: none;
    transition: border-color .3s var(--gfc-courbe);
}

.gform_wrapper textarea { height: 132px; min-height: 118px; resize: vertical; }

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
    outline: none;
    border-bottom-color: var(--gfc-accent);
    box-shadow: none;
}

.gform_wrapper ::placeholder { color: var(--gfc-gris-sombre); opacity: 1; }

.gform_wrapper .gform_footer { margin: clamp(24px, 2.6vw, 34px) 0 0; padding: 0; }

.gform_wrapper .gform_button {
    display: inline-flex;
    align-items: center;
    padding: 17px 30px;
    border: 0;
    border-radius: 0;
    background: var(--gfc-accent);
    color: var(--gfc-blanc);
    font-family: var(--gfc-sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow .35s;
}

.gform_wrapper .gform_button:hover { box-shadow: inset 0 0 0 200px rgba(255, 255, 255, .16); }

/* Gravity Forms enveloppe un groupe de choix dans un <fieldset> : le cadre et
   la légende encastrée du navigateur n'ont rien à voir avec le reste de la
   page, où les libellés se posent au-dessus du champ. */
.gform_wrapper fieldset.gfield { margin: 0; padding: 0; border: 0; min-width: 0; }
.gform_wrapper fieldset.gfield > legend { float: left; width: 100%; padding: 0; }
.gform_wrapper fieldset.gfield > legend + * { clear: both; }

/* Un choix fermé se présente en pastilles, pas en boutons radio empilés :
   les six objets tiennent sur deux lignes et se lisent d'un coup d'œil. */
.gform_wrapper .gfc-pastilles .gfield_radio {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.gform_wrapper .gfc-pastilles .gchoice { margin: 0; }
.gform_wrapper .gfc-pastilles .gchoice input { position: absolute; opacity: 0; pointer-events: none; }

.gform_wrapper .gfc-pastilles .gchoice label {
    display: inline-block;
    margin: 0;
    padding: 11px 15px;
    border: 1px solid rgba(24, 23, 20, .18);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gfc-gris-texte);
    cursor: pointer;
    transition: background-color .3s var(--gfc-courbe), color .3s, border-color .3s;
}

.gform_wrapper .gfc-pastilles .gchoice label:hover { border-color: var(--gfc-encre); }

.gform_wrapper .gfc-pastilles .gchoice input:checked + label {
    background: var(--gfc-accent);
    border-color: var(--gfc-accent);
    color: #fff;
}

.gform_wrapper .gfc-pastilles .gchoice input:focus-visible + label {
    outline: 2px solid var(--gfc-accent);
    outline-offset: 2px;
}

.gform_wrapper .gfield_description,
.gform_wrapper .gform_validation_errors {
    font-size: 12.5px;
    color: var(--gfc-gris-texte);
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea { border-bottom-color: #9E5B4F; }

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    color: #9E5B4F;
}

.gform_wrapper .gform_validation_errors {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid rgba(158, 91, 79, .4);
    border-radius: 0;
    background: rgba(158, 91, 79, .08);
    box-shadow: none;
}

.gform_wrapper .gform_validation_errors h2 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #9E5B4F;
}

/* Pièce jointe : le bouton natif est remplacé par un encadré discret. */
.gform_wrapper input[type="file"] {
    width: 100%;
    padding: 12px 0;
    font-size: 13px;
    color: var(--gfc-gris-texte);
    border-bottom: var(--gfc-filet);
}

.gform_wrapper input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 9px 15px;
    border: 1px solid rgba(24, 23, 20, .24);
    background: none;
    color: var(--gfc-encre);
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s, color .3s;
}

.gform_wrapper input[type="file"]::file-selector-button:hover {
    background: var(--gfc-ivoire);
    color: var(--gfc-accent);
}

/* Confirmation. */
.gform_confirmation_message {
    padding: 18px 20px;
    background: var(--gfc-ivoire);
    font-size: 15px;
    color: var(--gfc-encre);
}

/* Sur fond sombre — volet, bloc de candidature. */
.gfc-section--sombre .gform_wrapper .gfield_label,
.gfc-volet .gform_wrapper .gfield_label { color: var(--gfc-gris-sombre); }

.gfc-section--sombre .gform_wrapper input,
.gfc-section--sombre .gform_wrapper textarea,
.gfc-section--sombre .gform_wrapper select {
    color: var(--gfc-ivoire);
    border-bottom-color: rgba(222, 224, 218, .28);
}

.gfc-section--sombre .gform_wrapper input:focus,
.gfc-section--sombre .gform_wrapper textarea:focus { border-bottom-color: var(--gfc-ivoire); }

.gfc-section--sombre .gform_wrapper .gform_button {
    background: var(--gfc-ivoire);
    color: var(--gfc-encre);
}


/* =============================================
   Répertoire — report du rythme de la maquette
   ============================================= */

.gfc-section--repertoire {
    padding: 0 0 clamp(56px, 6vw, 88px);
}

.gfc-section--repertoire > * {
    padding-left: var(--gfc-gouttiere);
    padding-right: var(--gfc-gouttiere);
}

.gfc-section--repertoire > [data-barre-tris] {
    margin: clamp(26px, 2.8vw, 40px) var(--gfc-gouttiere) 0;
    padding-left: 0;
    padding-right: 0;
}

/* La grille du répertoire : colonnes fixes, comme la maquette. Une grille
   auto-fit reflowe les cartes et casse la composition. */
.gfc-grille-repertoire {
    display: grid;
    grid-template-columns: repeat(var(--colonnes, 4), minmax(0, 1fr));
    gap: 22px;
}

@media (max-width: 1199px) {
    .gfc-grille-repertoire { grid-template-columns: repeat(min(var(--colonnes, 4), 3), minmax(0, 1fr)); }
}

@media (max-width: 959px) {
    .gfc-grille-repertoire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
    .gfc-grille-repertoire { grid-template-columns: minmax(0, 1fr); }
}

/* La barre de tris est un aplat ivoire, pas un encadré. */
.gfc-barre-tris {
    background: var(--gfc-ivoire);
    border: 0;
    align-items: stretch;
}

.gfc-cellule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-right: var(--gfc-filet);
}

.gfc-cellule__texte { display: block; text-align: left; }

/* Le chevron dit que la cellule ouvre un menu. */
.gfc-cellule::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(24, 23, 20, .45);
    border-bottom: 1px solid rgba(24, 23, 20, .45);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s var(--gfc-courbe);
}

.gfc-cellule[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-3px, -3px); }

.gfc-barre-tris[data-colle] { background: var(--gfc-blanc); }

/* Une cellule de grille refuse de rétrécir sous la largeur de son contenu
   tant qu'on ne lui donne pas min-width:0 — c'est ce qui poussait la barre
   de tris au-delà de l'écran au téléphone. */
.gfc-barre-tris { max-width: 100%; }
.gfc-barre-tris > * { min-width: 0; }
.gfc-cellule__texte { min-width: 0; }
.gfc-cellule__valeur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 699px) {
    .gfc-barre-tris { grid-template-columns: minmax(0, 1fr); }
    .gfc-cellule { border-right: 0; border-bottom: var(--gfc-filet); }
    .gfc-cellule:last-child { border-bottom: 0; }
}

/* Un immeuble sans photo garde sa carte : aplat ivoire et mention centrée.
   La maquette préfère une place tenue à une carte absente. */
.gfc-carte__attente {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--gfc-ivoire);
    pointer-events: none;
}

/* « Détails à venir » n'est pas une disponibilité : il reste en gris. */
.gfc-carte__dispo--attente { color: var(--gfc-gris-sourdine); }

/* Avis ponctuel sous la demande de visite (champ « visite_note » du projet). */
.gfc-encadre-sombre {
    display: inline-block;
    margin: 20px 0 0;
    padding: 11px 18px;
    border: 1px solid rgba(222, 224, 218, .28);
    border-left: 2px solid var(--gfc-gris-sombre);
    background: rgba(222, 224, 218, .05);
    color: var(--gfc-ivoire);
    font-size: 14px;
    letter-spacing: .01em;
}

/* ===== Sélecteur de date (champ « Disponible à partir du ») =====
   Le thème écarte les feuilles de Gravity Forms : sans ces règles, le bouton
   d'icône tombe au style brut du navigateur, sous le champ, et le calendrier
   s'affiche sans cadre ni grille. */
.gfield--type-date .ginput_container {
    position: relative;
}

.gfield--type-date input.datepicker {
    padding-right: 46px;
}

/* Le bouton calendrier rentre dans le champ, à droite. */
.gform-datepicker-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--gfc-gris-sombre, #9B978C);
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease;
}

.gform-datepicker-toggle:hover,
.gform-datepicker-toggle:focus-visible {
    color: var(--gfc-accent, #603D2A);
    background: rgba(96, 61, 42, .07);
}

.gform-datepicker-toggle .gform-calendar-icon::before {
    font-size: 19px;
    line-height: 1;
}

/* Le calendrier lui-même : une carte posée sous le champ. */
.gform-datepicker-calendar {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    min-width: 290px;
    padding: 14px 16px 16px;
    background: #fff;
    border: 1px solid rgba(35, 31, 28, .14);
    border-radius: 3px;
    box-shadow: 0 24px 48px -30px rgba(35, 31, 28, .55);
}

.gform-datepicker-calendar table.calendar {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

/* En-têtes : année, puis mois, chacun sur sa ligne avec ses flèches. */
.gform-datepicker-calendar tr.yearSelector td,
.gform-datepicker-calendar tr.monthSelector td {
    padding: 3px 0 7px;
    text-align: center;
}

.gform-datepicker-calendar tr.yearSelector td.year,
.gform-datepicker-calendar tr.monthSelector td.month {
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--gfc-encre, #231F1C);
}

.gform-datepicker-calendar select.nav {
    max-width: 150px;
    padding: 4px 6px;
    border: 1px solid rgba(35, 31, 28, .16);
    border-radius: 2px;
    background: #fff;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Le calendrier garde en réserve un libellé doublon marqué hidden : on ne le
   réveille pas en donnant un display aux span de navigation. */
.gform-datepicker-calendar [hidden] {
    display: none !important;
}

.gform-datepicker-calendar td.nav span:not([hidden]),
.gform-datepicker-calendar span.nav:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 2px;
    color: var(--gfc-gris-sombre, #9B978C);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.gform-datepicker-calendar td.nav span:hover,
.gform-datepicker-calendar span.nav:hover {
    color: var(--gfc-accent, #603D2A);
    background: rgba(96, 61, 42, .08);
}

/* Initiales des jours. */
.gform-datepicker-calendar th.week {
    padding: 8px 0 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gfc-gris-sombre, #9B978C);
    border-bottom: 1px solid rgba(35, 31, 28, .1);
}

/* Les jours. */
.gform-datepicker-calendar td.day,
.gform-datepicker-calendar td.empty {
    padding: 2px;
    text-align: center;
}

.gform-datepicker-calendar td.day {
    cursor: pointer;
    border-radius: 2px;
    color: var(--gfc-encre, #231F1C);
    transition: color .18s ease, background-color .18s ease;
    line-height: 32px;
}

.gform-datepicker-calendar td.day:hover {
    background: rgba(96, 61, 42, .1);
}

.gform-datepicker-calendar td.day[aria-selected="true"],
.gform-datepicker-calendar td.day.selected {
    background: var(--gfc-encre, #231F1C);
    color: #fff;
}

.gform-datepicker-calendar td.day.today,
.gform-datepicker-calendar td.day[aria-current="date"] {
    box-shadow: inset 0 0 0 1px rgba(96, 61, 42, .5);
}

.gform-datepicker-calendar td.day:focus-visible {
    outline: 2px solid var(--gfc-accent, #603D2A);
    outline-offset: -2px;
}

/* Message d'aide en bas du calendrier : discret. */
.gform-datepicker-calendar .monthMessage,
.gform-datepicker-calendar .monthMessage p {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--gfc-gris-sombre, #9B978C);
}

@media (max-width: 560px) {
    .gform-datepicker-calendar {
        left: 50%;
        transform: translateX(-50%);
        min-width: 268px;
    }
}

/* Tag de phase, dans l'encadré des cartes et des unités voisines : une ligne
   au-dessus de la disponibilité, pour les projets livrés par tranches. */
.gfc-badge-carte__phase,
.gfc-statut__phase {
    display: block;
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--gfc-accent, #603D2A);
}