/* ===================================================================== RC Signature — Direction artistique « Encre & Laiton » (refonte 2026, ISO 8 planches). Fond quasi-noir chaud + laiton/cuivré + respirations crème. Titres : Playfair Display (serif). Accents manuscrits : Great Vibes. Corps / labels : Inter (sans, auto-hébergée). reduced-motion respecté. Palette et composants alignés sur les maquettes graphiques transmises. ===================================================================== */ :root{ --encre:#141210; /* fond profond, quasi-noir chaud */ --encre-2:#1b1815; /* blocs / cartes */ --sureleve:#232019; /* blocs surélevés (tarif, badges, encarts) */ --encre-3:#100e0c; /* bandeaux très sombres (confiance, footer) */ --papier:#f3ecdf; /* crème chaud (sections claires, encart e-mail) */ --papier-2:#FBF9F4; /* carte crème claire */ --laiton:#c89b5e; /* accent métal principal */ --laiton-clair:#e3bd80; /* laiton clair : titres accent, hover */ --laiton-papier:#a37b41;/* laiton appuyé / sur fond clair */ --craie:#ece5d8; /* texte principal sur sombre */ --sourdine:#b5ac9d; /* texte secondaire sur sombre */ --encre-texte:#22201E; /* texte sur crème */ --encre-texte-2:#5C574F; --ligne:rgba(200,155,94,.22); /* bordure dorée translucide */ --ligne-forte:rgba(200,155,94,.38);/* bordure dorée appuyée */ --ligne-claire:rgba(236,231,221,.10); --or-degrade:linear-gradient(135deg,#e3bd80 0%,#c89b5e 52%,#a37b41 100%); --display:'Playfair Display','Georgia',serif; --script:'Great Vibes','Snell Roundhand',cursive; --texte:'Inter',system-ui,-apple-system,sans-serif; --mono:'Inter',system-ui,-apple-system,sans-serif; --rayon:4px; --rayon-carte:16px; --max:1240px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* font-variant-numeric : Playfair Display sert par défaut des chiffres ELZÉVIRIENS (le 7 et le 0 descendent sous la ligne de base, le 1 est court). Mis à côté de libellés en Inter, un « +70 » ou un « 18K » semble alors écrit dans une troisième police — c'est ce qui sautait aux yeux sur /a-propos, qui est la page la plus chargée en nombres. On impose les chiffres alignés sur TOUT le document : la propriété est héritée, une seule déclaration suffit. */ body{font-family:var(--texte);background:var(--encre);color:var(--craie);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased; font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ⚠️ RÈGLE DE SURVIE (corrigée le 2026-08-09) : toute classe posée SUR un élément `.wrap` doit écrire `padding-top` / `padding-bottom` en toutes lettres, JAMAIS le raccourci `padding: 40px 0 20px`. Le raccourci remet la gouttière horizontale à zéro et, comme ces règles arrivent plus loin dans le fichier, elles gagnent sur `.wrap` à spécificité égale. Sur grand écran le max-width masquait le problème ; sur téléphone tout le contenu se collait au bord de l'écran — 17 sections étaient concernées. */ .wrap{max-width:var(--max);margin:0 auto;padding:0 32px} .eyebrow{display:inline-flex;align-items:center;gap:13px;font-family:var(--texte);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton)} .eyebrow::before{content:"";width:30px;height:1px;background:currentColor;opacity:.6} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em} h1{font-size:clamp(46px,5.4vw,72px);line-height:1.04} h2{font-size:clamp(34px,3.8vw,50px);line-height:1.08} h3{font-size:23px} .italique-signe{font-style:italic;color:var(--laiton)} /* ---------- Header ---------- */ header.site{position:sticky;top:0;z-index:50;background:rgba(18,16,13,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne-claire)} .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px} .marque{display:inline-flex;flex-direction:column;line-height:.86;flex:none} /* Le PNG est de l'encre noire sur fond transparent : il sert de masque et la teinte vient de `background` — couleur exacte de la DA sans second fichier à maintenir. */ .marque-logo{display:block;height:64px;aspect-ratio:1164/736;background:var(--craie); -webkit-mask:url('../img/logo-rc-signature.png') center/contain no-repeat; mask:url('../img/logo-rc-signature.png') center/contain no-repeat; transition:background .2s} .marque:hover .marque-logo{background:var(--laiton-clair)} /* ⚠️ AUCUN RETOUR À LA LIGNE dans le menu sur ordinateur (exigence Thomas, 2026-08-09). Les intitulés se sont allongés (« Locations courte durée », « Services courte durée », « Locations mensuelles ») et, à 13px avec .14em d'interlettrage, la barre dépassait les 1240px du conteneur : le dernier lien passait à la ligne et la hauteur du header sautait. Trois leviers, dans cet ordre : 1. `white-space:nowrap` sur chaque lien — un intitulé ne se coupe JAMAIS en deux, quoi qu'il arrive ensuite ; 2. corps réduit à 11.5px et interlettrage à .07em — c'est l'interlettrage qui coûtait le plus cher, .14em ajoutait ~1,8px par caractère ; 3. gouttière ramenée de 34 à 22px. Un palier supplémentaire à 1150px resserre encore avant le passage au burger (960px), pour couvrir les portables 13 pouces et les fenêtres réduites. */ nav.liens{display:flex;align-items:center;gap:22px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-left:auto;flex-wrap:nowrap} nav.liens a{color:var(--craie);opacity:.78;transition:opacity .2s,color .2s;position:relative;padding:6px 0;white-space:nowrap} nav.liens a:hover,nav.liens a.actif{opacity:1;color:var(--laiton)} /* Lien de menu sur deux lignes : intitulé Switzer capitales + sous-titre Playfair italique. `color:inherit` laisse le survol/actif repeindre les deux lignes. */ nav.liens a.lien-2l{display:flex;flex-direction:column;gap:1px} nav.liens a.lien-2l .sous{font-family:var(--display);font-size:11px;font-style:italic;font-weight:400;letter-spacing:.02em;text-transform:none;line-height:1.25;color:inherit;opacity:.72} .nav-droite{display:flex;align-items:center;gap:18px} /* Sélecteur de langue à drapeaux */ .drapeau{width:22px;height:15px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(236,231,221,.22);object-fit:cover} .langue-select{position:relative} .langue{display:flex;align-items:center;gap:8px;font-family:var(--texte);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--craie);background:none;border:none;cursor:pointer;padding:6px 4px;opacity:.9} .langue:hover{opacity:1} .langue .chevron{width:10px;height:6px;opacity:.7;transition:transform .2s} .langue[aria-expanded="true"] .chevron{transform:rotate(180deg)} .langue-menu{position:absolute;top:150%;right:0;background:var(--encre-2);border:1px solid var(--ligne-claire);border-radius:var(--rayon);padding:6px;min-width:172px;display:none;flex-direction:column;z-index:60;box-shadow:0 24px 48px rgba(0,0,0,.5)} .langue-menu.ouvert{display:flex} .langue-menu a{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;padding:9px 12px;border-radius:var(--rayon);opacity:.82;transition:background .18s,opacity .18s} .langue-menu a:hover,.langue-menu a.actif{background:rgba(200,155,94,.14);opacity:1;color:var(--laiton)} /* Réplique du CTA, révélée dans le menu sous 960px. Doit battre `.btn{display:inline-flex}` défini plus bas : à spécificité égale l'ordre trancherait en faveur de `.btn`. */ nav.liens > .cta-menu{display:none} .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:none;cursor:pointer} .burger span{display:block;height:1.5px;width:22px;background:var(--craie);transition:.25s} /* ---------- Boutons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border-radius:var(--rayon);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--texte);cursor:pointer;transition:transform .15s ease,background .2s,border-color .2s,color .2s;border:none;white-space:nowrap} .btn:active{transform:scale(.98)} .btn-plein{background:var(--or-degrade);color:#1c1913;box-shadow:0 10px 26px rgba(200,155,94,.22)} .btn-plein:hover{filter:brightness(1.06);box-shadow:0 14px 32px rgba(200,155,94,.3)} .btn-ligne{border:1px solid rgba(236,231,221,.32);color:var(--craie);background:transparent} .btn-ligne:hover{border-color:var(--laiton);color:var(--laiton)} .btn-large{width:100%;padding:17px} /* pointer-events:none car le CTA « Réserver » est un : l'attribut `disabled` que pose front.js n'y a aucun effet natif, le lien restait cliquable malgré le grisé. */ .btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none} .btn-papier{background:var(--laiton-papier);color:var(--papier)} .btn-papier:hover{background:var(--laiton)} /* ---------- Hero (plein cadre photo) ---------- */ .hero{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;background:var(--encre)} .hero-media{position:absolute;inset:0;z-index:0} .hero-media img{width:100%;height:100%;object-fit:cover} .hero-media::after{content:"";position:absolute;inset:0; background:linear-gradient(96deg,rgba(18,16,13,.94) 0%,rgba(18,16,13,.78) 34%,rgba(18,16,13,.42) 62%,rgba(18,16,13,.18) 100%), linear-gradient(0deg,rgba(18,16,13,.55) 0%,rgba(18,16,13,0) 40%)} .hero-media.vide{background:linear-gradient(150deg,#26221b,#141210 60%)} .hero-inner{position:relative;z-index:2;width:100%} .hero-contenu{max-width:600px} .hero .eyebrow{margin-bottom:22px} .hero h1{margin:0 0 26px} .hero h1 em{display:block;font-style:italic;color:var(--laiton);font-weight:500} .hero p.chapo{font-size:19px;line-height:1.55;color:#D9D5CC;max-width:520px;margin-bottom:38px} .hero p.chapo b{color:var(--craie);font-weight:600} .hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .lien-video{display:inline-flex;align-items:center;gap:14px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--craie);cursor:pointer;transition:color .2s} .lien-video:hover{color:var(--laiton)} .lien-video .play{width:46px;height:46px;border-radius:50%;border:1px solid var(--ligne);display:grid;place-items:center;color:var(--laiton);transition:background .2s,border-color .2s;flex:none} .lien-video:hover .play{background:rgba(200,155,94,.14);border-color:var(--laiton)} .lien-video .play svg{width:14px;height:14px;margin-left:2px} /* ---------- Bandeau confiance (4 piliers) ---------- */ .confiance{background:var(--encre-3);border-top:1px solid var(--ligne-claire)} .confiance .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:34px 32px} .confiance-item{display:flex;align-items:center;gap:16px} .confiance-item .ico{color:var(--laiton);flex:none} .confiance-item .ico svg{width:34px;height:34px} .confiance-item .t{font-family:var(--texte);font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--craie)} .confiance-item .s{font-size:13px;color:var(--sourdine);margin-top:3px} /* ---------- Section « coups de cœur » (papier) ---------- */ /* 56px et non 100 : sous le bandeau « confiance », 100px de crème vide avant « Nos coups de cœur » faisaient un trou au milieu de la page d'accueil. */ .coeur{background:var(--papier);color:var(--encre-texte);padding:56px 0 90px} /* Deux sections « coups de cœur » se suivent sur l'accueil (courte durée puis mensuelles) : 100px de bas + 100px de haut + la marge du CTA faisaient ~250px de crème vide entre le bouton et le titre suivant. Elles partagent le même fond, la césure n'a donc pas besoin d'être payée deux fois. */ .coeur + .coeur{padding-top:0} .coeur .eyebrow{color:var(--laiton-papier)} .coeur .entete{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:46px} /* Pas de retour à la ligne dans les titres de section (consigne Thomas) : les intitulés sont volontairement courts, `nowrap` garantit qu'ils le restent même à 50px de corps. Sous 640px on rend la coupure possible, sinon un titre déborderait de l'écran. */ .coeur .entete h2{margin-top:14px;color:var(--encre-texte);white-space:nowrap} /* Sur /collection sans filtre, le titre du bloc « courte durée » est le

de la page (elle n'en avait aucun). Il doit rester VISUELLEMENT identique au

du bloc mensuel juste en dessous : on lui rend le corps du h2. */ .section-papier > .wrap > h2, .section-papier > .wrap > h1.titre-bloc{white-space:nowrap} .section-papier > .wrap > h1.titre-bloc{font-size:clamp(34px,3.8vw,50px);line-height:1.08} @media(max-width:640px){ .coeur .entete h2, .section-papier > .wrap > h2, .section-papier > .wrap > h1.titre-bloc{white-space:normal} } .fleches{display:flex;gap:12px;flex:none} .fleche{width:52px;height:52px;border-radius:50%;border:1px solid rgba(34,32,30,.22);background:transparent;color:var(--encre-texte);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s,opacity .2s} .fleche:hover{border-color:var(--laiton-papier);color:var(--laiton-papier)} .fleche svg{width:20px;height:20px} .fleche[disabled]{opacity:.35;cursor:not-allowed} /* ⚠️ `overflow-y:hidden` est OBLIGATOIRE, pas décoratif : quand un seul axe est `auto`, l'autre passe de `visible` à `auto` tout seul. La piste devenait donc défilable verticalement, et il suffisait d'un doigt pour soulever une carte et la faire passer derrière — le bug signalé sur téléphone. Le fondu d'apparition n'utilise plus translateY() ici non plus (front.js) : un décalage vertical alimentait cette zone défilable. Les paddings verticaux laissent respirer l'ombre portée et le survol (`.carte:hover` monte de 5px), qui seraient sinon rognés. */ .coeur-piste{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*28px)/3);gap:28px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 0 16px;scrollbar-width:none} .coeur-piste::-webkit-scrollbar{display:none} .coeur-piste > *{scroll-snap-align:start} .coeur-cta{display:flex;justify-content:center;margin-top:38px} /* ---------- Cartes logement (photo sombre, texte incrusté) ---------- */ .carte{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--rayon-carte);overflow:hidden;background:var(--encre-2); box-shadow:0 18px 40px rgba(34,32,30,.14);transition:transform .3s ease,box-shadow .3s ease} .carte:hover{transform:translateY(-5px);box-shadow:0 30px 60px rgba(34,32,30,.24)} .carte .visuel{position:absolute;inset:0} .carte .visuel img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .carte:hover .visuel img{transform:scale(1.05)} .carte .visuel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,14,11,.9) 0%,rgba(16,14,11,.45) 34%,rgba(16,14,11,.05) 58%,rgba(16,14,11,.18) 100%)} .carte .plaque-carte{position:absolute;top:18px;left:18px;z-index:2;background:rgba(18,16,13,.72);backdrop-filter:blur(4px);color:var(--craie); font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;padding:8px 12px;border-radius:3px;border:1px solid var(--ligne-claire)} /* Pastille « favori ». ⚠️ Ne pas la rétrécir ni la déplacer en croyant corriger un « cœur coupé » : mesuré au 2026-08-10, la pastille (38px à 18px du bord) ne mord PAS sur l'arrondi de 16px du cadre, et le SVG (18px dans une boîte 24×24, tracé haut de 15,4 unités) n'est clippé par rien. Le défaut venait du TRACÉ lui-même, malformé — il a été refait dans carte_logement.php. Cette géométrie-ci est la bonne, elle a juste été changée une fois pour un mauvais motif. */ .carte .coeur-ic{position:absolute;top:18px;right:18px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--laiton-papier);box-shadow:0 2px 10px rgba(16,14,11,.25)} .carte .coeur-ic svg{width:18px;height:18px} .carte .infos{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 26px 28px} .carte .infos h3{font-family:var(--display);font-size:27px;font-weight:600;color:#fff;margin:0} .carte .infos .sous{font-size:15px;color:#DCD7CD;margin-top:5px;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .carte .infos .lieu{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:13px;letter-spacing:.02em;color:var(--laiton-clair)} .carte .infos .lieu svg{width:14px;height:14px;flex:none} /* Grille (page collection) */ .grille-logements{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .grille-2{grid-template-columns:1fr 1fr} /* ⚠️ Le passage en piste horizontale sous 960px est plus bas, dans le bloc responsive : sur tactile, les logements se parcourent TOUJOURS de droite à gauche, jamais en pile verticale (cf. « Défilement des logements »). */ /* ---------- Flèches de piste : une à GAUCHE, une à DROITE des annonces ---------- Demande Thomas 2026-08-14. TOUTE liste d'annonces (carrousels de l'accueil et listings /collection) porte ses flèches sur les bords mêmes de la piste, contre les cartes. Plus jamais en haut, groupées dans un coin d'entête : le geste doit partir de là où sont les cartes. Fond plein et ombre portée, PAS le rond détouré de `.fleche` : ces flèches-là passent au-dessus des photos des cartes, où un simple filet disparaîtrait. `sans-fleches` est posée dans le HTML et retirée par front.js quand la piste déborde vraiment : sans JS le clic ne ferait rien, et sur la grille de bureau il n'y a rien à faire défiler. Aux extrémités, le bouton s'efface (opacity:0) au lieu de se griser : sur une photo, un rond à 35% reste une tache. */ .piste-nav{position:relative} .piste-nav.sans-fleches .fleche-piste{display:none} .fleche-piste{position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:46px;height:46px;background:rgba(255,255,255,.94);border-color:transparent; color:var(--encre);box-shadow:0 3px 14px rgba(16,14,11,.22)} .fleche-piste:hover{background:#fff;border-color:transparent;color:var(--laiton-papier)} .fleche-prec{left:6px} .fleche-suiv{right:6px} .fleche-piste[disabled]{opacity:0;pointer-events:none} /* ---------- Section « L'exigence comme signature » (stats) ---------- */ .exigence{background:var(--encre);padding:104px 0;position:relative;border-top:1px solid var(--ligne-claire)} .exigence .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center} .exigence h2{margin:16px 0 24px} .exigence h2 span{display:block} .exigence h2 .accent{color:var(--laiton);font-style:italic} .exigence p{color:var(--sourdine);max-width:420px;margin-bottom:32px;font-size:16.5px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stat{padding:6px 4px} .stat .ico{color:var(--laiton);margin-bottom:16px} .stat .ico svg{width:34px;height:34px} .stat .v{font-family:var(--display);font-size:38px;font-weight:600;color:var(--craie);line-height:1} .stat .l{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sourdine);margin-top:10px;line-height:1.4} /* ---------- Sections papier / sombre génériques (pages internes) ---------- */ .section-papier{background:var(--papier);color:var(--encre-texte);padding:100px 0} .section-papier .eyebrow{color:var(--laiton-papier)} .section-papier h2 em{font-style:italic;color:var(--laiton-papier)} .section-sombre{padding:100px 0} .entete-section{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:52px} .entete-section h2{margin-top:14px} .tout-voir{font-weight:600;font-size:14px;letter-spacing:.02em;border-bottom:1.5px solid var(--laiton-papier);padding-bottom:3px;color:var(--encre-texte);white-space:nowrap} /* ---------- Grille de cartes « éditoriales » (services / expériences) ---------- */ .cartes-edito{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:14px} .cartes-edito.cartes-2{grid-template-columns:repeat(2,1fr);max-width:960px;margin-left:auto;margin-right:auto} .carte-edito{border:1px solid var(--ligne-claire);border-radius:var(--rayon-carte);padding:34px 30px;background:rgba(236,231,221,.02);transition:border-color .25s,background .25s,transform .25s} .carte-edito:hover{border-color:var(--ligne);background:rgba(200,155,94,.05);transform:translateY(-4px)} /* Variante illustrée : la photo remplace le picto, à fond perdu en haut de carte. Les cartes SANS photo gardent leur picto — la grille accepte les deux, il suffit de renseigner `img` dans front-nos-services.php le jour où le visuel existe. */ .carte-edito.avec-photo{display:flex;flex-direction:column;padding:0;overflow:hidden} .carte-edito-photo{display:block;position:relative;aspect-ratio:16/10;overflow:hidden; background:linear-gradient(150deg,#26221b,#2b271f)} .carte-edito-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .carte-edito.avec-photo:hover .carte-edito-photo img{transform:scale(1.05)} .carte-edito-corps{display:block;padding:26px 28px 30px} /* La carte au picto conserve son ancien gabarit : le corps n'y ajoute pas de marge. */ .carte-edito:not(.avec-photo) .carte-edito-corps{padding:0} .carte-edito .ico{width:48px;height:48px;border:1px solid var(--ligne);border-radius:50%;display:grid;place-items:center;color:var(--laiton);margin-bottom:22px} .carte-edito .ico svg{width:24px;height:24px} .carte-edito h3{font-size:21px;color:var(--craie);margin-bottom:10px} .carte-edito p{color:var(--sourdine);font-size:15px} .section-papier .carte-edito{border-color:rgba(34,32,30,.12);background:var(--papier-2)} .section-papier .carte-edito:hover{border-color:var(--laiton-papier);background:#fff} .section-papier .carte-edito .ico{border-color:rgba(34,32,30,.18);color:var(--laiton-papier)} .section-papier .carte-edito h3{color:var(--encre-texte)} .section-papier .carte-edito p{color:var(--encre-texte-2)} /* En-tête de page interne (bandeau titre) */ .page-entete{padding-top:70px;padding-bottom:10px;text-align:center} .page-entete .eyebrow{justify-content:center} .page-entete h1{margin:18px 0 20px} .page-entete .intro{max-width:620px;margin:0 auto;color:var(--sourdine);font-size:18px} /* ---------- Arguments direct (générique) ---------- */ .direct-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px} .argument{border:1px solid var(--ligne-claire);border-radius:var(--rayon-carte);padding:34px 30px;background:rgba(236,231,221,.02)} .argument .marque{display:block;width:34px;height:1.5px;background:var(--laiton);margin-bottom:22px} .argument h3{margin:0 0 10px} .argument p{color:var(--sourdine);font-size:15.5px} /* ---------- Avis ---------- */ .avis-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px} .temoin{background:var(--papier-2);border:1px solid rgba(34,32,30,.1);padding:30px;border-radius:var(--rayon-carte)} .etoiles{color:var(--laiton-papier);letter-spacing:3px;font-size:14px} .temoin blockquote{font-family:var(--display);font-size:19px;line-height:1.5;margin:16px 0 20px;font-weight:400;color:var(--encre-texte)} .temoin .qui{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--encre-texte-2)} .temoin .source{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid rgba(34,32,30,.18);border-radius:99px;font-size:10px;text-transform:uppercase} /* ---------- CTA final ---------- */ .final{padding:110px 0;border-top:1px solid var(--ligne-claire)} .final .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end} .final h2{max-width:15ch;margin:0} .final .final-aparte{padding-bottom:6px} .final p{color:var(--sourdine);max-width:460px;margin:0 0 26px} /* ---------- Footer ---------- */ footer.site{background:var(--encre-3);border-top:1px solid var(--ligne-claire);padding:64px 0 40px;color:var(--sourdine)} .footer-haut{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--ligne-claire)} .footer-marque .marque-logo{height:58px} .footer-marque p{margin-top:14px;font-size:14px;max-width:280px} .footer-cols{display:flex;gap:64px;flex-wrap:wrap} .footer-col h4{font-family:var(--texte);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--craie);margin-bottom:16px;font-weight:600} .footer-col a{display:block;font-size:14.5px;margin-bottom:10px;color:var(--sourdine);transition:color .2s} .footer-col a:hover{color:var(--laiton)} .footer-bas{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:13px} .footer-bas a:hover{color:var(--craie)} .footer-langues{display:flex;gap:10px;align-items:center} .footer-langues a{display:inline-flex;opacity:.72;transition:opacity .2s} .footer-langues a:hover{opacity:1} /* ---------- Fil d'ariane / retour ---------- */ .fil{padding-top:28px;padding-bottom:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--sourdine)} .fil a:hover{color:var(--laiton)} /* ---------- Fiche logement ---------- */ .fiche-hero{padding-top:40px;padding-bottom:20px} .fiche-plaque{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--laiton);margin-bottom:14px} .fiche-titre-ligne{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap} .fiche-meta{display:flex;gap:26px;font-family:var(--mono);font-size:13px;color:var(--sourdine);margin-top:16px;flex-wrap:wrap} .fiche-meta span{display:inline-flex;align-items:center;gap:8px} .fiche-meta svg{width:16px;height:16px;flex:none;color:var(--laiton)} .fiche-meta b{color:var(--craie);font-family:var(--display);font-weight:500} .galerie{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:200px;gap:12px;margin:30px 0 0;position:relative} /* .g-item est un