/* Como en casa : feuille de style unique du thème.
   Palette tirée de la charte Com & Stick (noir #231F20, dégradé or en 5 teintes) et de la pierre
   blonde des maisons confiées (crème, pierre). Titres Bodoni Moda (didone du « Como » du logo),
   mot porteur en Allura (manuscrit du « en Casa »), texte Montserrat (proche du Gotham de
   « CONCIERGERIE »). Signature : la silhouette du toit et la clé du logo. */

:root {
  --nuit: #231F20;
  --nuit-2: #2F2A29;
  --nuit-3: #3B3533;
  --or: #C9A85B;
  --or-1: #D8BE59;
  --or-2: #EFE963;
  --or-3: #AE9829;
  --or-4: #FAEB7D;
  --or-5: #AF9138;
  --or-fonce: #866820;
  --or-degrade: linear-gradient(100deg, var(--or-5) 0%, var(--or-1) 28%, var(--or-4) 50%, var(--or-1) 70%, var(--or-3) 100%);
  --creme: #F6F0E6;
  --pierre: #ECE2D0;
  --blanc: #FFFDF9;
  --texte: #2A2524;
  --texte-2: #5E5552;
  --filet: rgba(35, 31, 32, .12);
  --filet-clair: rgba(255, 253, 249, .14);

  --f-titre: 'Bodoni Moda', 'Didot', Georgia, serif;
  --f-script: 'Allura', 'Segoe Script', cursive;
  --f-texte: 'Montserrat', 'Gotham', 'Helvetica Neue', Arial, sans-serif;

  /* Échelle unique, une valeur par rôle (pages intérieures comprises). */
  --t-xxl: clamp(44px, min(5.6vw, 9.6vh), 86px);
  --t-xl: clamp(38px, min(4.4vw, 8.4vh), 68px);
  --t-l: clamp(30px, 3.3vw, 50px);
  --t-m: clamp(22px, 1.75vw, 28px);
  --t-s: 19px;
  --t-chapo: clamp(17px, 1.25vw, 19px);
  --t-texte: 17px;
  --t-petit: 14.5px;
  --t-sur: 13px;

  --r-carte: 18px;
  --r-bloc: 28px;
  --wrap: 1440px;
  --gouttiere: clamp(20px, 4vw, 48px);
  --sect: clamp(72px, 8.4vw, 120px);
  --courbe: cubic-bezier(.16, 1, .3, 1);
  --tete-h: 96px;
  --faite: clamp(44px, 6vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanc); color: var(--texte); font: 400 var(--t-texte)/1.7 var(--f-texte); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--or-4); color: var(--nuit); }
.sr, .tableau-seo { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 18px; background: var(--nuit); color: var(--blanc); border-radius: 99px; }
.evitement:focus { top: 12px; }
mark.a-relire { background: #FFF1B0; color: inherit; padding: 0 .15em; border-radius: 3px; box-shadow: 0 0 0 1px #E8C95A inset; }
.fond-nuit mark.a-relire, .fiche__resa mark.a-relire, .service:last-child mark.a-relire { background: rgba(250, 235, 125, .22); color: var(--blanc); }

/* Ascenseurs dessinés (ADN §11). */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--or-5) 55%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--or-5) 55%, transparent); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--or-5); }
::-webkit-scrollbar-button { display: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.wrap--etroit { max-width: calc(900px + 2 * var(--gouttiere)); }
.wrap--texte { max-width: calc(820px + 2 * var(--gouttiere)); }
.sect { padding-block: var(--sect); position: relative; }
.sect--panneau { padding-block: clamp(24px, 3vw, 40px); }
.fond-blanc { background: var(--blanc); }
.fond-creme { background: var(--creme); }
.fond-pierre { background: var(--pierre); }
.fond-nuit { background: var(--nuit); color: rgba(255, 253, 249, .82); }
.fond-nuit .titre-l, .fond-nuit .titre-m, .fond-nuit .titre-s, .fond-nuit h2, .fond-nuit h3 { color: var(--blanc); }

/* ---------- Typographie ---------- */
.bref__titre, .zone__villes li, .comparatif__onglets button, .simu__nom, .formule__nom, .maison__chiffres b, .toit-etapes__num, .c-dep-nom, .titre-m, .form__titre, .engagement__index li, .simu__chiffres b, .chiffres strong, .equipe__chiffre strong { font-variation-settings: 'opsz' 11; }
.titre-xxl, .titre-xl, .titre-l, .titre-m { font-family: var(--f-titre); font-weight: 500; font-variation-settings: 'opsz' 28; color: var(--nuit); letter-spacing: -.01em; font-optical-sizing: auto; }
.titre-xxl { font-size: var(--t-xxl); line-height: 1.02; margin: 0 0 28px; }
.titre-xl { font-size: var(--t-xl); line-height: 1.04; margin: 0 0 24px; }
.titre-l { font-size: var(--t-l); line-height: 1.08; }
.titre-m { font-size: var(--t-m); line-height: 1.2; display: block; font-variation-settings: 'opsz' 11; }
.titre-s { font-family: var(--f-texte); font-size: var(--t-s); font-weight: 600; line-height: 1.35; }
.script { font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: 1.32em; line-height: .7; letter-spacing: 0; padding-inline: .04em .1em;
  background: var(--or-degrade); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: or-glisse 9s ease-in-out infinite alternate; }
.fond-creme .script, .fond-blanc .script, .fond-pierre .script { background-image: linear-gradient(100deg, var(--or-fonce) 0%, #A9852F 35%, #C7A24A 50%, #A9852F 65%, var(--or-fonce) 100%); }
@keyframes or-glisse { to { background-position: 100% 0; } }
.sur { font-family: var(--f-texte); font-size: var(--t-sur); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce); line-height: 1.5; margin: 0 0 18px; }
.intitule { display: flex; align-items: center; gap: 8px; font-size: var(--t-sur); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce); margin: 0 0 24px; }
.intitule .ico { width: 16px; height: 16px; }
.intitule--or, .fond-nuit .intitule { color: var(--or-1); }
.chapo { font-size: var(--t-chapo); line-height: 1.7; color: var(--texte-2); max-width: 600px; }
.etiquette-or { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--or-fonce); margin: 4px 0 0; }
.sect-titre { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); }
.sect-titre--centre { margin-inline: auto; text-align: center; }
.sect-titre--centre .intitule { justify-content: center; }
.sect-titre__texte { margin: 22px 0 0; color: var(--texte-2); font-size: var(--t-chapo); }
.fond-nuit .sect-titre__texte { color: rgba(255, 253, 249, .72); }
.sect-titre--centre .sect-titre__texte { margin-inline: auto; max-width: 640px; }

/* ---------- Icônes, pastilles, boutons ---------- */
.ico { width: 22px; height: 22px; flex: none; }
.pastille { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--creme); color: var(--or-fonce); flex: none; }
.pastille .ico { width: 22px; height: 22px; }
.pastille--or { background: var(--nuit); color: var(--or-1); }
.boutons { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 34px; }
.boutons--centre { justify-content: center; }
.btn { --fond: var(--nuit); --txt: var(--blanc); --p-fond: var(--or-1); --p-txt: var(--nuit);
  display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 7px 6px 26px; border-radius: 99px; border: 1.5px solid var(--fond);
  background: var(--fond); color: var(--txt); font-size: 15.5px; font-weight: 600; text-decoration: none; letter-spacing: .01em; cursor: pointer;
  transition: background .4s var(--courbe), color .4s var(--courbe), border-color .4s var(--courbe); white-space: nowrap; }
.btn__pastille { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--p-fond); color: var(--p-txt); flex: none; transition: transform .45s var(--courbe), background .4s var(--courbe), color .4s; }
.btn__pastille .ico { width: 19px; height: 19px; }
.btn:hover { --fond: var(--or-1); --txt: var(--nuit); --p-fond: var(--nuit); --p-txt: var(--or-1); }
.btn:hover .btn__pastille { transform: translateX(4px); }
.btn--contour { --fond: transparent; --txt: var(--nuit); --p-fond: var(--nuit); --p-txt: var(--or-1); border-color: color-mix(in srgb, var(--nuit) 28%, transparent); }
.btn--contour:hover { --fond: var(--nuit); --txt: var(--blanc); --p-fond: var(--or-1); --p-txt: var(--nuit); border-color: var(--nuit); }
/* Boutons en aplat uniquement : le dégradé or faisait bon marché (Thomas, 16/10/2026). L'or reste dans la pastille. */
.btn--or { --fond: var(--nuit); --txt: var(--blanc); --p-fond: var(--or-1); --p-txt: var(--nuit); }
.fiche__resa .btn { --fond: var(--blanc); --txt: var(--nuit); --p-fond: var(--nuit); --p-txt: var(--or-1); border-color: var(--blanc); }
.fiche__resa .btn:hover { --fond: var(--or-1); --txt: var(--nuit); border-color: var(--or-1); }
.fond-nuit .btn--contour { --txt: var(--blanc); --p-fond: var(--or-1); --p-txt: var(--nuit); border-color: var(--filet-clair); }
.btn--petit { min-height: 48px; padding-left: 20px; font-size: 14.5px; gap: 10px; }
.btn--petit .btn__pastille { width: 36px; height: 36px; }
.btn--tel { padding: 6px 22px 6px 7px; }
.btn--tel:hover .btn__pastille { transform: rotate(-12deg); }
.fleche-rond { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--filet); background: transparent; color: var(--nuit); cursor: pointer; transition: background .35s, color .35s, border-color .35s; }
.fleche-rond:hover { background: var(--nuit); color: var(--or-1); border-color: var(--nuit); }
.fleche-rond[disabled] { visibility: hidden; }

/* ---------- En-tête ---------- */
.tete { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--creme) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .4s, background .4s; }
.tete.is-compact { box-shadow: 0 1px 0 var(--filet); background: color-mix(in srgb, var(--blanc) 94%, transparent); }
.tete__barre { display: flex; align-items: center; gap: 28px; height: var(--tete-h); transition: height .45s var(--courbe); }
.tete.is-compact .tete__barre { height: 74px; }
.tete__logo { flex: none; padding-block: 10px; }
.tete__logo img { height: 70px; width: auto; transition: height .45s var(--courbe); }
.tete.is-compact .tete__logo img { height: 52px; }
.tete__nav { flex: 1; display: flex; justify-content: center; }
.tete__nav ul { display: flex; gap: clamp(14px, 2.2vw, 34px); }
.tete__nav ul a { position: relative; display: inline-block; padding: 8px 0; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--texte); }
.tete__nav ul a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--or-degrade); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--courbe); }
.tete__nav ul a:hover::after, .tete__nav ul a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.tete__nav-mobile { display: none; }
.tete__actions { display: flex; align-items: center; gap: 18px; flex: none; }
.tete__tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--nuit); white-space: nowrap; }
.tete__tel .ico { width: 18px; height: 18px; color: var(--or-fonce); }
.tete__tel:hover span { text-decoration: underline; text-underline-offset: 4px; }
.tete__burger { display: none; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--filet); background: transparent; cursor: pointer; place-items: center; }

/* ---------- Héros et en-têtes de page ---------- */
.hero, .entete { position: relative; overflow: hidden; padding-block: clamp(36px, 4vw, 64px) clamp(96px, 9vw, 140px); }
.entete--court { padding-block: clamp(40px, 5vw, 72px); }
.entete__fantome { position: absolute; right: -2vw; bottom: -3.4vw; font-family: var(--f-titre); font-style: italic; font-size: clamp(160px, 24vw, 380px); line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--or-5) 22%, transparent); pointer-events: none; user-select: none; animation: fantome 26s ease-in-out infinite alternate; }
@keyframes fantome { to { transform: translateX(-3vw); } }
.hero__grille, .entete__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.hero__texte, .entete__texte { position: relative; z-index: 1; }
.hero .chapo, .entete .chapo { margin-top: 4px; }
.hero__tels { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; }
.hero__tels a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 15px; color: var(--texte-2); }
.hero__tels .ico { width: 18px; height: 18px; color: var(--or-fonce); }
.hero__tels strong { color: var(--nuit); font-weight: 600; }
.hero__tels a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* Photo découpée dans la silhouette de la maison du logo, contour du toit décalé en or. */
.forme-maison { position: relative; margin: 0; padding: 22px 18px 0; }
.forme-maison__img { position: relative; border-radius: 0 0 var(--r-bloc) var(--r-bloc); overflow: hidden; clip-path: polygon(0 27%, 50% 0, 100% 27%, 100% 100%, 0 100%); aspect-ratio: 4 / 4.6; }
.forme-maison__img img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
.toit { position: absolute; inset: 0 0 auto 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.toit path { fill: none; stroke: var(--or-1); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.forme-maison .toit { inset: 0; height: calc(100% - 12px); width: calc(100% - 0px); transform: translate(-14px, -10px); }
.hero__cle { position: absolute; left: -6px; bottom: 34px; z-index: 3; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--nuit); color: var(--or-1); box-shadow: 0 0 0 8px var(--creme); animation: flotte 6s ease-in-out infinite; }
.hero__cle .ico { width: 34px; height: 34px; transform: rotate(-35deg); }
@keyframes flotte { 50% { transform: translateY(-10px); } }

.ariane ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--texte-2); margin: 0 0 26px; }
.ariane li + li::before { content: '/'; margin-right: 6px; color: var(--or-5); }
.ariane a { text-decoration: none; }
.ariane a:hover { text-decoration: underline; }

/* ---------- Carte « en bref » à cheval sur le héros ---------- */
.bref { position: relative; z-index: 3; margin-top: clamp(-90px, -6vw, -60px); background: linear-gradient(var(--creme) 50%, var(--blanc) 50%); }
.bref__carte { display: grid; grid-template-columns: minmax(230px, 1fr) 3.4fr; gap: 28px; align-items: center; padding: 30px clamp(24px, 3vw, 44px); background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-bloc); }
.bref__titre { margin: 0; font-family: var(--f-titre); font-size: 23px; line-height: 1.2; color: var(--nuit); }
.bref__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bref__liste li { display: flex; align-items: center; gap: 14px; padding-left: 18px; border-left: 1px solid var(--filet); }
.bref__liste small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce); }
.bref__liste strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--nuit); }

/* ---------- Le toit : séjour étape par étape (composant signature) ---------- */
.toit-etapes__scene { position: relative; }
.toit-etapes__rail { position: relative; height: clamp(200px, 21vw, 270px); margin-bottom: 36px; }
.toit-etapes__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.toit-etapes__svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.toit-etapes__fond { stroke: color-mix(in srgb, var(--nuit) 14%, transparent); stroke-width: 2; stroke-dasharray: 2 7; }
.toit-etapes__trace { stroke: var(--or); stroke-width: 3; }
.toit-etapes__jalons { position: absolute; left: 0; right: 0; top: 0; height: clamp(200px, 21vw, 270px); }
.toit-etapes__jalons li { position: absolute; transform: translate(-50%, -50%); }
.toit-etapes__jalons button { display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; }
.toit-etapes__num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--blanc); border: 1.5px solid color-mix(in srgb, var(--nuit) 20%, transparent); font-family: var(--f-titre); font-size: 16px; color: var(--nuit); transition: background .35s, color .35s, border-color .35s, transform .45s var(--courbe); }
.toit-etapes__lib { position: absolute; top: 56px; width: 140px; text-align: center; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--texte-2); transition: color .3s; }
.toit-etapes__jalons button:hover .toit-etapes__num { border-color: var(--or-fonce); color: var(--or-fonce); }
.toit-etapes__jalons button[aria-selected="true"] .toit-etapes__num { background: var(--nuit); border-color: var(--nuit); color: var(--or-1); transform: scale(1.12); }
.toit-etapes__jalons button[aria-selected="true"] .toit-etapes__lib { color: var(--nuit); }
.toit-etapes__cle { position: absolute; z-index: 2; width: 64px; height: 64px; margin: -96px 0 0 -32px; border-radius: 50%; border: 0; background: var(--or-degrade); color: var(--nuit); display: grid; place-items: center; cursor: grab; touch-action: none; box-shadow: 0 0 0 6px var(--blanc); transition: left .7s var(--courbe), top .7s var(--courbe); }
.toit-etapes__cle.is-tire { cursor: grabbing; transition: none; }
.toit-etapes__cle .ico { width: 30px; height: 30px; transform: rotate(-35deg); transition: transform .6s var(--courbe); }
.toit-etapes__cle.is-tourne .ico { transform: rotate(55deg); }
.toit-etapes__panneaux { position: relative; }
.toit-etapes__panneau { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.toit-etapes__panneau:not([hidden]) { animation: panneau .8s var(--courbe) both; }
@keyframes panneau { from { opacity: 0; transform: translateY(18px); } }
.toit-etapes__photo { border-radius: var(--r-bloc); overflow: hidden; aspect-ratio: 4 / 3; background: var(--pierre); }
.toit-etapes__photo img { width: 100%; height: 100%; object-fit: cover; }
.toit-etapes__panneau:not([hidden]) .toit-etapes__photo img { animation: zoom-doux 1.4s var(--courbe) both; }
@keyframes zoom-doux { from { transform: scale(1.08); } }
.toit-etapes__grand-num { margin: 0 0 6px; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: 88px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--or); }
.toit-etapes__texte p:not([class]) { font-size: var(--t-chapo); color: var(--texte-2); margin: 16px 0 14px; }
.toit-etapes__fleches { display: flex; align-items: center; gap: 16px; margin-top: 30px; justify-content: flex-end; }
.toit-etapes__compteur { font-size: 14px; color: var(--texte-2); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.toit-etapes__compteur b { color: var(--nuit); font-family: var(--f-titre); font-size: 20px; font-weight: 500; }

/* ---------- Panneaux sombres et formules ---------- */
.panneau { position: relative; overflow: hidden; border-radius: 36px; padding: clamp(56px, 6.4vw, 96px) clamp(22px, 4.4vw, 72px); isolation: isolate; }
.panneau__reflets { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 50% at 12% 0%, rgba(216, 190, 89, .16), transparent 70%), radial-gradient(38% 46% at 92% 100%, rgba(175, 145, 56, .2), transparent 70%); }
.panneau__reflets::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(250, 235, 125, .06) 45%, transparent 60%); animation: faisceau 14s ease-in-out infinite alternate; }
@keyframes faisceau { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); align-items: stretch; }
.formule { position: relative; display: flex; flex-direction: column; padding: 34px clamp(22px, 2.2vw, 34px) 30px; border-radius: 24px; background: var(--nuit-2); border: 1px solid var(--filet-clair); transition: border-color .45s, transform .6s var(--courbe), background .45s; }
.formule::before { content: ''; position: absolute; left: 30px; right: 30px; top: -1px; height: 2px; background: var(--or-degrade); transform: scaleX(.18); transform-origin: left; transition: transform .7s var(--courbe); }
.formule:has(a:hover), .formule:focus-within { border-color: color-mix(in srgb, var(--or-1) 55%, transparent); transform: translateY(-6px); background: var(--nuit-3); }
.formule:has(a:hover)::before, .formule:focus-within::before { transform: scaleX(1); }
.formule__niveau { display: flex; gap: 6px; margin-bottom: 18px; }
.formule__niveau i { width: 10px; height: 10px; transform: rotate(45deg); background: var(--or-1); }
.formule__nom { font-family: var(--f-titre); font-size: 30px; line-height: 1.1; color: var(--blanc); letter-spacing: .04em; text-transform: uppercase; }
.formule__taux { margin: 14px 0 6px; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: 76px; line-height: 1; background: var(--or-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.formule__taux small { font-size: .42em; }
.formule__base { font-size: 13.5px; line-height: 1.5; color: rgba(255, 253, 249, .6); margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--filet-clair); }
.formule__liste { display: grid; gap: 14px; margin-bottom: 28px; }
.formule__liste li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.45; color: rgba(255, 253, 249, .66); }
.formule__liste strong { display: block; color: var(--blanc); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.formule__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 253, 249, .07); color: var(--or-1); }
.formule__ico .ico { width: 19px; height: 19px; }
.formule__liste li.is-nouveau .formule__ico { background: var(--or-1); color: var(--nuit); }
.formule__bouton { margin-top: auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 22px; min-height: 54px; border-radius: 99px; border: 1.5px solid var(--filet-clair); color: var(--blanc); font-weight: 600; font-size: 15px; text-decoration: none; transition: background .4s, color .4s, border-color .4s; }
.formule__bouton .btn__pastille { background: var(--or-1); color: var(--nuit); }
.formule__bouton:hover { background: var(--or-1); color: var(--nuit); border-color: var(--or-1); }
.formule__bouton:hover .btn__pastille { background: var(--nuit); color: var(--or-1); transform: translateX(4px); }
.formules__tva { margin: 22px 0 0; text-align: center; font-size: 13px; color: inherit; opacity: .7; }

/* ---------- Associées ---------- */
.equipe__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.equipe .sect-titre { margin-bottom: 26px; }
.equipe__chiffre { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; padding: 18px 0; border-block: 1px solid var(--filet); }
.equipe__chiffre strong { font-family: var(--f-titre); font-weight: 500; font-size: 64px; line-height: 1; color: var(--nuit); white-space: nowrap; }
.equipe__chiffre span { font-size: 15px; line-height: 1.5; color: var(--texte-2); max-width: 260px; }
.equipe__photo { position: relative; margin: 0 0 40px; }
.equipe__cadre { border-radius: var(--r-bloc); overflow: hidden; aspect-ratio: 4 / 4.2; }
.equipe__cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.equipe__carte { position: absolute; left: -32px; right: 32px; bottom: -40px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px; background: var(--blanc); border-radius: 22px; border: 1px solid var(--filet); }
.equipe__carte a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; text-decoration: none; transition: background .3s; }
.equipe__carte a:hover { background: var(--creme); }
.equipe__carte strong { display: block; font-size: 14.5px; color: var(--nuit); }
.equipe__carte small { display: block; font-size: 12.5px; color: var(--texte-2); line-height: 1.4; }
.equipe__carte .pastille { width: 42px; height: 42px; }

/* ---------- Maisons (aperçu et page) ---------- */
.maisons-apercu__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(36px, 4vw, 56px); }
.maisons-apercu__tete .sect-titre { margin-bottom: 0; }
.maisons-apercu__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.maison-carte { display: flex; flex-direction: column; border-radius: var(--r-bloc); overflow: hidden; background: var(--creme); text-decoration: none; transition: transform .6s var(--courbe); }
.maison-carte__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.maison-carte__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.maison-carte:hover .maison-carte__photo img { transform: scale(1.05); }
.maison-carte__corps { display: flex; flex-direction: column; gap: 14px; padding: 26px 30px 28px; }
.maison-carte__ville { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce); }
.maison-carte__ville .ico { width: 16px; height: 16px; }
.maison-carte__chiffres { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--texte-2); }
.maison-carte__chiffres span { display: inline-flex; align-items: center; gap: 8px; }
.maison-carte__chiffres .ico { width: 19px; height: 19px; color: var(--or-fonce); }
.maison-carte__lien { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; color: var(--nuit); margin-top: 4px; }
.maison-carte__lien .btn__pastille { width: 38px; height: 38px; background: var(--nuit); color: var(--or-1); }
.maison-carte:hover .maison-carte__lien .btn__pastille { transform: translateX(4px); background: var(--or-1); color: var(--nuit); }

.maison { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-block: clamp(36px, 4vw, 56px); }
.maison + .maison { border-top: 1px solid var(--filet); }
.maison--inverse .maison__galerie { order: 2; }
.maison__galerie { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; aspect-ratio: 5 / 4.2; position: sticky; top: 100px; }
.maison__vignette { position: relative; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: var(--pierre); }
.maison__vignette--0 { grid-row: 1 / 4; }
.maison__vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--courbe); }
.maison__vignette:hover img { transform: scale(1.06); }
.agrandir { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blanc); color: var(--nuit); transition: background .3s, color .3s, transform .45s var(--courbe); }
.agrandir .ico { width: 18px; height: 18px; }
.maison__vignette:hover .agrandir { background: var(--nuit); color: var(--or-1); transform: scale(1.08); }
.maison__plus { position: absolute; left: 12px; bottom: 12px; padding: 6px 14px; border-radius: 99px; background: var(--nuit); color: var(--blanc); font-size: 13px; font-weight: 600; }
.maison__texte .titre-l { margin-bottom: 22px; }
.maison__chiffres { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 10px 26px; padding: 18px 0; margin-bottom: 24px; border-block: 1px solid var(--filet); font-size: 14.5px; color: var(--texte-2); }
.maison__chiffres li { display: flex; align-items: center; gap: 8px; }
.maison__chiffres .ico { color: var(--or-fonce); width: 20px; height: 20px; }
.maison__chiffres b { color: var(--nuit); font-family: var(--f-titre); font-size: 22px; font-weight: 500; }
.maison__atouts { display: grid; gap: 10px; margin: 6px 0 0; }
.maison__atouts li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.5; }
.maison__atouts .ico { width: 17px; height: 17px; margin-top: 4px; color: var(--or-fonce); }

/* ---------- Zone et carte ---------- */
.zone__grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.zone__villes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.zone__villes li { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--filet); font-family: var(--f-titre); font-size: 22px; color: var(--nuit); }
.zone__villes small { font-family: var(--f-texte); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--or-fonce); }
.zone__carte { border-radius: var(--r-bloc); overflow: hidden; background: var(--blanc); padding: clamp(10px, 1.4vw, 18px); }
.carte-zone { width: 100%; height: auto; }
.c-dep { fill: #F2EADC; stroke: var(--blanc); stroke-width: 1.4; }
.c-dep--52 { fill: #E6D6B8; }
.c-dep-nom { font-family: var(--f-titre); font-style: italic; font-size: 26px; fill: color-mix(in srgb, var(--texte-2) 75%, transparent); text-anchor: middle; }
.c-rayon { fill: rgba(201, 168, 91, .13); stroke: var(--or-5); stroke-width: 2; stroke-dasharray: 8 7; }
.c-ville text { font-family: var(--f-texte); font-size: 25px; font-weight: 600; fill: var(--nuit); paint-order: stroke; stroke: rgba(255, 253, 249, .9); stroke-width: 4px; stroke-linejoin: round; }
.c-ville circle { fill: var(--nuit); stroke: var(--blanc); stroke-width: 2; }
.c-ville--base circle { fill: var(--or-1); stroke: var(--nuit); stroke-width: 3; }
.c-ville--base text { font-size: 31px; }
.c-ville--logement circle { fill: var(--or-5); }
.c-ville--repere circle { fill: color-mix(in srgb, var(--texte-2) 70%, transparent); stroke-width: 1.5; }
.c-ville--repere text { font-size: 20px; font-weight: 500; fill: var(--texte-2); }
.js .zone__carte .c-ville { opacity: 0; transition: opacity .6s var(--courbe), transform .6s var(--courbe); transform: translateY(6px); }
.zone__carte.vu .c-ville { opacity: 1; transform: none; transition-delay: calc(var(--n, 0) * 90ms + 300ms); }
.js .zone__carte .c-rayon { stroke-dashoffset: 2000; stroke-dasharray: 2000; transition: stroke-dashoffset 2.4s var(--courbe); }
.zone__carte.vu .c-rayon { stroke-dashoffset: 0; stroke-dasharray: 8 7; transition: stroke-dashoffset 2.4s var(--courbe), stroke-dasharray 0s 2.4s; }

/* ---------- FAQ ---------- */
.faq__liste { display: grid; gap: 12px; }
.faq__item { border-radius: 20px; background: var(--creme); transition: background .45s var(--courbe), color .45s; }
.fond-creme .faq__item { background: var(--blanc); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 22px 22px 28px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; color: var(--nuit); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__signe { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nuit); color: var(--or-1); flex: none; transition: transform .45s var(--courbe), background .35s, color .35s; }
.faq__signe .ico { width: 18px; height: 18px; }
.faq__item summary:hover .faq__signe { transform: rotate(90deg); }
.faq__item[open] { background: var(--nuit); color: rgba(255, 253, 249, .78); }
.faq__item[open] summary { color: var(--blanc); }
.faq__item[open] .faq__signe { background: var(--or-1); color: var(--nuit); }
.faq__moins, .faq__item[open] .faq__plus { display: none; }
.faq__item[open] .faq__moins { display: block; }
:root { interpolate-size: allow-keywords; }
.faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--courbe), content-visibility .55s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq__rep { padding: 0 28px 24px; overflow: hidden; }
.faq__rep p { margin: 0; max-width: 720px; }

/* ---------- Bloc d'appel avec formulaire ---------- */
.appel { padding-block: clamp(24px, 3vw, 40px) clamp(72px, 7vw, 110px); }
.appel__panneau { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 5.4vw, 80px) clamp(22px, 4.6vw, 72px); border-radius: 36px; isolation: isolate; }
.appel__panneau::before { content: ''; position: absolute; z-index: -1; right: -10%; top: -30%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(216, 190, 89, .16), transparent); }
.appel__texte .titre-l { margin-bottom: 22px; }
.appel__etapes { display: grid; gap: 0; margin: 30px 0; }
.appel__etapes li { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid var(--filet-clair); color: var(--blanc); font-size: 16px; }
.appel__num { font-family: var(--f-titre); font-size: 30px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--or-1); }
.appel__tels { display: flex; flex-wrap: wrap; gap: 12px; }
.appel__tel { display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 99px; border: 1px solid var(--filet-clair); text-decoration: none; transition: background .35s, border-color .35s; }
.appel__tel:hover { background: rgba(255, 253, 249, .06); border-color: var(--or-1); }
.appel__tel-pastille { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--or-1); color: var(--nuit); }
.appel__tel-pastille .ico { width: 19px; height: 19px; }
.appel__tel strong { display: block; color: var(--blanc); font-size: 16px; }
.appel__tel small { display: block; font-size: 12.5px; color: rgba(255, 253, 249, .6); }
.appel__form { background: var(--blanc); color: var(--texte); border-radius: 26px; padding: clamp(22px, 2.6vw, 38px); align-self: start; }

/* ---------- Formulaires (contrôles dessinés, ADN §11) ---------- */
.form { --cpg-error: #A3361F; display: grid; gap: 16px; }
.form__titre { margin: 0 0 4px; font-family: var(--f-titre); font-size: 26px; color: var(--nuit); }
.form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; }
.champ > span:first-child { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.form .champ input, .form .champ textarea, .form .champ select { width: 100%; min-height: 52px; padding: 13px 18px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--nuit) 16%, transparent); background: var(--blanc); color: var(--texte); font: 500 16px/1.4 var(--f-texte); transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.form .champ textarea { resize: vertical; min-height: 110px; }
.form .champ input:hover, .form .champ textarea:hover, .form .champ select:hover { border-color: color-mix(in srgb, var(--nuit) 34%, transparent); }
.form .champ input:focus, .form .champ textarea:focus, .form .champ select:focus { outline: none; border-color: var(--or-fonce); box-shadow: 0 0 0 4px rgba(201, 168, 91, .22); }
.form .champ input::placeholder, .form .champ textarea::placeholder { color: color-mix(in srgb, var(--texte-2) 70%, transparent); }
.form input[type=number]::-webkit-inner-spin-button, .form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.form input[type=number] { -moz-appearance: textfield; }
.form input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; filter: sepia(1) saturate(2) hue-rotate(5deg); }
.select { position: relative; display: block; }
.select select { padding-right: 60px; cursor: pointer; }
.select select::-ms-expand { display: none; }
.select__pastille { position: absolute; right: 8px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nuit); color: var(--or-1); pointer-events: none; transition: background .3s; }
.select__pastille .ico { width: 16px; height: 16px; transform: rotate(90deg); }
.select:hover .select__pastille { background: var(--or-fonce); color: var(--blanc); }
.coche { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--texte-2); cursor: pointer; }
.coche input { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin: 0; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--nuit) 30%, transparent); background: var(--blanc); cursor: pointer; display: grid; place-items: center; transition: background .25s, border-color .25s; }
.coche input::after { content: ''; width: 7px; height: 12px; border: solid var(--or-1); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); margin-top: -3px; transition: transform .25s var(--courbe); }
.coche input:checked { background: var(--nuit); border-color: var(--nuit); }
.coche input:checked::after { transform: rotate(45deg) scale(1); }
.coche input:hover { border-color: var(--or-fonce); }
.coche input:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; }
.form__mention { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--texte-2); }
.form__mention a { color: var(--nuit); }
.form__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.form__etat { margin: 0; font-size: 14.5px; font-weight: 600; color: #2F6B3B; }
.form__etat:empty { display: none; }
.form__etat.is-erreur { color: var(--cpg-error); }
.form .btn { border: 0; }
.form .cpg-invalid { border-color: var(--cpg-error) !important; }
.form .cpg-field-error { font-size: 13px; color: var(--cpg-error); }
.form.cpg-sending .btn { opacity: .7; pointer-events: none; }
/* Case anti-robot sans cadre ni mention, dessinée comme la case de consentement. */
.cf-altcha { padding: 0; border: 0; }
.cf-altcha altcha-widget { display: block; --altcha-max-width: 100%; --altcha-color-base: var(--blanc); --altcha-border-color: transparent; --altcha-color-success: var(--nuit); --altcha-color-success-content: var(--or-1); }
.cf-altcha .altcha { border: 0 !important; background: transparent !important; padding: 0 !important; max-width: none !important; border-radius: 0 !important; box-shadow: none !important; }
.cf-altcha .altcha-main { padding: 0 !important; gap: 12px; align-items: center; border: 0 !important; box-shadow: none !important; }
.cf-altcha .altcha-footer, .cf-altcha .altcha-logo { display: none !important; }
.cf-altcha .altcha-checkbox input { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin: 0; border-radius: 8px; cursor: pointer; border: 1.5px solid color-mix(in srgb, var(--nuit) 30%, transparent); background: var(--blanc); }
.cf-altcha .altcha-checkbox input:checked { background: var(--nuit); border-color: var(--nuit); }
.cf-altcha .altcha-checkbox svg { color: var(--or-1); }
.cf-altcha label { font-size: 13.5px; color: var(--texte-2); }

/* ---------- Notre offre ---------- */
.comparatif__onglets { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.comparatif__onglets button { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 24px; border-radius: 99px; border: 1.5px solid var(--filet); background: transparent; cursor: pointer; font-family: var(--f-titre); font-size: 20px; color: var(--nuit); transition: background .35s, color .35s, border-color .35s; }
.comparatif__onglets small { font-family: var(--f-texte); font-size: 13px; font-weight: 600; color: var(--or-fonce); transition: color .35s; }
.comparatif__onglets button:hover { border-color: var(--nuit); }
.comparatif__onglets button[aria-selected="true"] { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.comparatif__onglets button[aria-selected="true"] small { color: var(--or-1); }
.comparatif__maison { display: grid; grid-template-columns: minmax(260px, .7fr) 1.3fr; gap: clamp(20px, 3vw, 44px); padding: clamp(22px, 3vw, 40px); border-radius: var(--r-bloc); background: var(--creme); }
.comparatif__resume { position: relative; display: grid; }
.comparatif__formule { grid-area: 1 / 1; align-self: start; display: flex; flex-direction: column; gap: 10px; padding: 32px; border-radius: 22px; background: var(--nuit); color: rgba(255, 253, 249, .7); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .5s var(--courbe), transform .5s var(--courbe), visibility 0s .5s; }
.comparatif__formule.is-actif { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.comparatif__taux { margin: 0; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: 92px; line-height: 1; background: var(--or-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.comparatif__base { margin: 0; font-size: 14px; line-height: 1.5; }
.comparatif__nb { margin: 6px 0 14px; color: var(--blanc); font-weight: 600; }
.comparatif__formule .btn { --fond: var(--blanc); --txt: var(--nuit); --p-fond: var(--nuit); --p-txt: var(--or-1); align-self: flex-start; }
.comparatif__formule .btn:hover { --fond: var(--blanc); }
.comparatif__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.comparatif__liste li { position: relative; display: grid; grid-template-columns: 48px 1fr 26px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--blanc); border: 1px solid transparent; transition: opacity .5s var(--courbe), filter .5s, border-color .5s, transform .5s var(--courbe); }
.comparatif__liste strong { display: block; font-size: 15px; color: var(--nuit); }
.comparatif__liste small { display: block; font-size: 13px; line-height: 1.45; color: var(--texte-2); }
.comparatif__etat { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nuit); color: var(--or-1); transition: transform .45s var(--courbe), opacity .3s; }
.comparatif__etat .ico { width: 15px; height: 15px; }
.comparatif__liste li.is-hors { opacity: .38; filter: grayscale(1); background: transparent; border-color: var(--filet); border-style: dashed; }
.comparatif__liste li.is-hors .comparatif__etat { opacity: 0; transform: scale(.4); }
.comparatif__liste li.is-allume { animation: allume .9s var(--courbe); }
@keyframes allume { 30% { border-color: var(--or); transform: translateY(-3px); } }

.savoir__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.savoir__liste li { padding: 30px 28px; border-radius: 22px; border: 1px solid var(--filet-clair); background: rgba(255, 253, 249, .03); }
.savoir__num { display: block; margin-bottom: 18px; font-family: var(--f-titre); font-size: 56px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--or-1); }
.savoir__liste h3 { margin-bottom: 10px; }
.savoir__liste p { margin: 0; font-size: 15.5px; }

.simu__grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.simu__carte { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-bloc); background: var(--blanc); border: 1px solid var(--filet); }
.simu__saisie { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.simu__valeur { display: inline-flex; align-items: baseline; gap: 6px; border-bottom: 1.5px solid var(--or); }
.simu__valeur input { width: 5.2ch; border: 0; background: transparent; font-family: var(--f-titre); font-size: 52px; line-height: 1.1; color: var(--nuit); text-align: right; -moz-appearance: textfield; }
.simu__valeur input::-webkit-inner-spin-button { -webkit-appearance: none; }
.simu__valeur input:focus { outline: none; }
.simu__valeur b { font-family: var(--f-texte); font-size: 30px; font-weight: 500; color: var(--or-fonce); }
.simu__curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 20px 0 26px; background: transparent; cursor: pointer; --pc: 25%; }
.simu__curseur::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--or) var(--pc), color-mix(in srgb, var(--nuit) 12%, transparent) var(--pc)); }
.simu__curseur::-moz-range-track { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--nuit) 12%, transparent); }
.simu__curseur::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--or); }
.simu__curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: var(--nuit); border: 4px solid var(--or-1); transition: transform .3s var(--courbe); }
.simu__curseur::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--nuit); border: 4px solid var(--or-1); }
.simu__curseur:hover::-webkit-slider-thumb { transform: scale(1.12); }
.simu__resultats { display: grid; gap: 16px; }
.simu__resultats li { display: grid; grid-template-columns: 170px 1fr; grid-template-rows: auto auto; gap: 8px 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--filet); }
.simu__nom { font-family: var(--f-titre); font-size: 21px; color: var(--nuit); }
.simu__nom small { font-family: var(--f-texte); font-size: 13px; font-weight: 600; color: var(--or-fonce); margin-left: 4px; }
.simu__barre { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--nuit) 7%, transparent); overflow: hidden; }
.simu__barre i { display: block; height: 100%; width: var(--part, 0%); border-radius: 99px; background: var(--or-degrade); transition: width .8s var(--courbe); }
.simu__chiffres { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; color: var(--texte-2); }
.simu__chiffres b { font-family: var(--f-titre); font-size: 22px; font-weight: 500; color: var(--nuit); font-variant-numeric: tabular-nums; margin-left: 6px; display: inline-block; min-width: 4.6ch; text-align: right; }
.simu__note { margin: 18px 0 0; font-size: 13px; color: var(--texte-2); }

.menage__grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.forme-arche { margin: 0; border-radius: 999px 999px var(--r-bloc) var(--r-bloc); overflow: hidden; aspect-ratio: 4 / 5; position: relative; }
.forme-arche::after { content: ''; position: absolute; inset: 14px; border-radius: inherit; border: 1.5px solid rgba(250, 235, 125, .7); pointer-events: none; }
.forme-arche img { width: 100%; height: 100%; object-fit: cover; }

.engagement__index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 80px); max-width: 1000px; margin-inline: auto; }
.engagement__index li { position: relative; padding: 22px 0 22px 0; border-bottom: 1px solid var(--filet); font-family: var(--f-titre); font-style: italic; font-size: clamp(20px, 1.7vw, 25px); color: var(--nuit); white-space: nowrap; }
.engagement__trait { position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 100%; background: var(--or-degrade); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--courbe) calc(var(--i, 0) * 120ms + 200ms); }
.engagement__index li.vu .engagement__trait { transform: scaleX(.22); }

/* ---------- À propos ---------- */
.implant__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.chiffres { display: grid; gap: 0; }
.chiffres li { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--filet); }
.chiffres li:first-child { border-top: 1px solid var(--filet); }
.chiffres strong { font-family: var(--f-titre); font-weight: 500; font-size: clamp(48px, 4.6vw, 68px); line-height: 1; color: var(--nuit); white-space: nowrap; }
.chiffres span { color: var(--texte-2); }
.portraits__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.portrait { display: grid; grid-template-columns: minmax(160px, .7fr) 1fr; gap: clamp(20px, 2.6vw, 36px); align-items: start; padding: clamp(22px, 2.6vw, 36px); border-radius: var(--r-bloc); background: var(--blanc); }
.portrait__photo { padding: 16px 12px 0; }
.portrait__photo .forme-maison__img { aspect-ratio: 4 / 5.4; }
.portrait__photo .toit { transform: translate(-9px, -7px); }
.portrait__texte p:not([class]) { font-size: 15.5px; color: var(--texte-2); margin: 16px 0 22px; }
.valeurs__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.valeur { position: relative; padding-bottom: 90px; }
.valeur__photo { border-radius: var(--r-bloc); overflow: hidden; aspect-ratio: 16 / 11; }
.valeur__photo img { width: 100%; height: 100%; object-fit: cover; }
.valeur__carte { position: absolute; left: 24px; right: 24px; bottom: 0; padding: 26px 28px; border-radius: 22px; background: var(--blanc); border: 1px solid var(--filet); }
.valeur__carte .pastille { float: right; margin: -50px 0 0 12px; background: var(--nuit); color: var(--or-1); }
.valeur__carte p { margin: 10px 0 0; font-size: 15.5px; color: var(--texte-2); }

/* ---------- Contact ---------- */
.entete--contact { padding-bottom: clamp(56px, 6vw, 96px); }
.contact__grille { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact__coord { display: grid; gap: 4px; margin: 26px 0 22px; }
.contact__coord a, .contact__ligne { display: flex; align-items: center; gap: 14px; padding: 10px 0; text-decoration: none; }
.contact__coord strong { display: block; font-size: 17px; color: var(--nuit); }
.contact__coord small { display: block; font-size: 13.5px; color: var(--texte-2); }
.contact__coord .pastille { background: var(--blanc); }
.contact__coord a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.contact__voyageur { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 16px; padding: 18px 20px; border-radius: 22px; background: var(--nuit); color: rgba(255, 253, 249, .7); text-decoration: none; }
.contact__voyageur strong { display: block; color: var(--blanc); font-size: 16px; }
.contact__voyageur small { font-size: 13.5px; }
.contact__voyageur-lien { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--or-1); font-size: 14.5px; }
.contact__voyageur-lien .btn__pastille { width: 36px; height: 36px; background: var(--or-1); color: var(--nuit); }
.contact__voyageur:hover .btn__pastille { transform: translateX(4px); }
.contact__voyageur .pastille { background: rgba(255, 253, 249, .08); }
.contact__form { background: var(--blanc); border-radius: 28px; padding: clamp(22px, 2.6vw, 38px); border: 1px solid var(--filet); }

/* ---------- Pages de texte ---------- */
.texte-riche h2 { font-family: var(--f-titre); font-size: 30px; line-height: 1.2; color: var(--nuit); margin: 1.6em 0 .6em; }
.texte-riche h3 { font-size: 19px; font-weight: 600; margin: 1.4em 0 .5em; }
.texte-riche ul { list-style: none; margin: 0 0 1em; }
.texte-riche li { position: relative; padding-left: 22px; margin-bottom: .4em; }
.texte-riche li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 8px; height: 1.5px; background: var(--or-fonce); }
.texte-riche a { color: var(--nuit); }

/* ---------- Pied de page : le toit du logo comme faîte, contacts en avant ---------- */
.pied { position: relative; margin-top: calc(-1 * var(--faite)); padding-top: calc(var(--faite) + clamp(56px, 6vw, 88px)); clip-path: polygon(0 var(--faite), 50% 0, 100% var(--faite), 100% 100%, 0 100%); }
.pied__toit { position: absolute; left: 0; top: 0; width: 100%; height: var(--faite); overflow: visible; pointer-events: none; }
.pied__toit path { fill: none; stroke: var(--or-1); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform: translateY(14px); opacity: .7; }
.pied__haut { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: center; padding-bottom: clamp(44px, 5vw, 72px); }
.pied__marque img { height: 132px; width: auto; }
.pied__devise { margin: 18px 0 10px; font-family: var(--f-script); font-size: 34px; line-height: 1.2; color: var(--or-1); }
.pied__accroche { font-size: 15.5px; color: rgba(255, 253, 249, .7); margin: 0; }
.pied__titre-l { margin: 0 0 26px; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: clamp(32px, 3vw, 46px); line-height: 1.1; color: var(--blanc); }
.pied__titre-l .script { background: none; color: var(--or-1); -webkit-text-fill-color: currentColor; animation: none; }
.pied__contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pied__contact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--filet-clair); text-decoration: none; transition: border-color .3s, background .3s; min-width: 0; }
.pied__contact:hover { border-color: var(--or-1); background: rgba(255, 253, 249, .04); }
.pied__contact > span:last-child { min-width: 0; }
.pied__contact strong { display: block; color: var(--blanc); font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pied__contact small { display: block; font-size: 12.5px; color: rgba(255, 253, 249, .55); }
.pied__pastille { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--or-1); color: var(--nuit); }
.pied__pastille .ico { width: 18px; height: 18px; }
.pied .boutons { margin-top: 22px; }
.btn--clair { --fond: var(--blanc); --txt: var(--nuit); --p-fond: var(--nuit); --p-txt: var(--or-1); border-color: var(--blanc); }
.btn--clair:hover { --fond: var(--or-1); --txt: var(--nuit); border-color: var(--or-1); }
.pied__plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); padding-block: 44px 48px; border-top: 1px solid var(--filet-clair); }
.pied__titre { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-1); margin: 0 0 18px; }
.pied__liste { display: grid; gap: 11px; font-size: 15px; }
.pied__liste a { text-decoration: none; color: rgba(255, 253, 249, .82); transition: color .3s; }
.pied__liste a:hover { color: var(--or-4); }
.pied__liste small { color: rgba(255, 253, 249, .45); font-size: 12.5px; margin-left: 4px; }
.pied__zone { margin: 0 0 14px; font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 22px; line-height: 1.3; color: var(--blanc); }
.pied__siege { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 253, 249, .55); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-block: 24px 30px; border-top: 1px solid var(--filet-clair); font-size: 13.5px; color: rgba(255, 253, 249, .55); }
.pied__bas p { margin: 0; }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied__bas a { text-decoration: none; }
.pied__bas a:hover { color: var(--or-4); text-decoration: underline; }
@media (max-width: 980px) {
  .pied__haut { grid-template-columns: 1fr; }
  .pied__contacts { grid-template-columns: 1fr; }
  .pied__plan { grid-template-columns: 1fr 1fr; }
}

/* ---------- Visionneuse ---------- */
.visionneuse { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; background: rgba(23, 20, 20, .94); padding: 30px 10px; }
.visionneuse[hidden] { display: none; }
.visionneuse figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.visionneuse img { max-height: calc(100vh - 120px); max-width: 100%; width: auto; border-radius: 14px; animation: panneau .5s var(--courbe); }
.visionneuse figcaption { color: rgba(255, 253, 249, .75); font-size: 14px; }
.visionneuse button { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(255, 253, 249, .25); background: transparent; color: var(--blanc); cursor: pointer; transition: background .3s, color .3s; justify-self: center; }
.visionneuse button:hover { background: var(--or-1); color: var(--nuit); border-color: var(--or-1); }
.visionneuse__fermer { position: absolute; top: 20px; right: 20px; }

/* ---------- Animations (coupées sous prefers-reduced-motion) ---------- */
.anim .cascade { animation: monte .9s var(--courbe) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
@keyframes monte { from { opacity: 0; transform: translateY(18px); } }
.anim .entree-photo { animation: entree-photo 1.4s var(--courbe) both .25s; }
@keyframes entree-photo { from { opacity: 0; transform: translateY(46px) scale(.96); } }
.anim .entree-photo .toit path { stroke-dasharray: var(--L) var(--L); stroke-dashoffset: var(--L); animation: dessine 2.2s var(--courbe) .9s forwards; }
@keyframes dessine { to { stroke-dashoffset: 0; } }
.lettres .mot { display: inline-block; white-space: nowrap; }
.lettres .l { opacity: .15; transition: opacity .5s ease; transition-delay: calc(var(--k, 0) * 22ms); }
.lettres.vu .l, .anim-fin .lettres.lettres--tete .l { opacity: 1; }
.js .lettres:not(.pret) { opacity: 0; }
.anim-fin .lettres:not(.pret) { opacity: 1; }
.js .rv { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--courbe), transform 1.2s var(--courbe); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rv.vu { opacity: 1; transform: none; }
.js .rv-img { clip-path: inset(12% 6% 12% 6% round var(--r-bloc)); opacity: .2; transition: clip-path 1.4s var(--courbe), opacity 1s var(--courbe); }
.js .rv-img.vu { clip-path: inset(0 0 0 0 round var(--r-bloc)); opacity: 1; }
.js .rv-tuile { opacity: 0; transform: translate(var(--dx, -30px), var(--dy, 0)) scale(.94); transition: opacity 1s var(--courbe), transform 1.2s var(--courbe); transition-delay: calc(var(--i, 0) * 120ms); }
.js .rv-tuile.vu { opacity: 1; transform: none; }
.maison__vignette--1 { --dx: 0; --dy: -30px; } .maison__vignette--2 { --dx: 30px; --dy: 0; } .maison__vignette--3 { --dx: 0; --dy: 30px; }
.js .rv.vu, .js .rv-tuile.vu { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv, .js .rv-img, .js .rv-tuile, .js .lettres:not(.pret), .lettres .l, .js .zone__carte .c-ville { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---------- Responsive ---------- */
/* Menu repliable dès 1180 px : en dessous, les libellés passent sur deux lignes à côté du téléphone et du bouton.
   Piège : un ancêtre avec backdrop-filter (ou transform, filter) devient le repère des enfants en position: fixed ;
   le panneau du menu restait coincé dans les 78 px de l'en-tête. Le flou est retiré quand le menu est ouvert. */
@media (max-width: 1180px) {
  .tete__actions { margin-left: auto; }
  .tete__burger { display: grid; }
  .tete__actions .btn { display: none; }
  .tete.is-ouvert { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--creme); box-shadow: none; }
  .tete__nav { position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-haut, 78px); z-index: 49; display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; padding: 24px var(--gouttiere) 40px; background: var(--creme); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .35s, transform .45s var(--courbe), visibility 0s .45s; overflow-y: auto; overscroll-behavior: contain; }
  .tete.is-ouvert .tete__nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .tete__nav ul { flex-direction: column; gap: 0; }
  .tete__nav li { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--courbe); }
  .tete.is-ouvert .tete__nav li { opacity: 1; transform: none; }
  .tete.is-ouvert .tete__nav li:nth-child(2) { transition-delay: .05s; } .tete.is-ouvert .tete__nav li:nth-child(3) { transition-delay: .1s; } .tete.is-ouvert .tete__nav li:nth-child(4) { transition-delay: .15s; }
  .tete__nav ul a { display: block; padding: 18px 0; font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: clamp(26px, 6vw, 34px); line-height: 1.2; border-bottom: 1px solid var(--filet); }
  .tete__nav ul a::after { display: none; }
  .tete__nav ul a[aria-current] { color: var(--or-fonce); }
  .tete__nav-mobile { display: flex; flex-wrap: wrap; gap: 8px; }
  .tete__nav-mobile .btn { font-family: var(--f-texte); font-size: 15.5px; }
  .tete__burger .ico { width: 22px; height: 22px; }
  .tete.is-ouvert .tete__burger { background: var(--nuit); color: var(--or-1); border-color: var(--nuit); }
  .tete__tel span { display: none; }
  .tete__tel { width: 48px; height: 48px; justify-content: center; border-radius: 50%; border: 1.5px solid var(--filet); }
  .bref__carte { grid-template-columns: 1fr; }
  .bref__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparatif__maison { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  :root { --tete-h: 78px; }
  .tete__logo img { height: 56px; }
  .hero__grille, .entete__grille, .equipe__grille, .zone__grille, .simu__grille, .menage__grille, .implant__grille, .contact__grille, .appel__panneau, .toit-etapes__panneau, .maison { grid-template-columns: 1fr; }
  .hero__photo, .entete__photo { max-width: 560px; }
  .maison--inverse .maison__galerie { order: 0; }
  .maison__galerie { position: relative; top: 0; }
  .formules, .savoir__liste, .portraits__liste, .valeurs__liste, .maisons-apercu__liste { grid-template-columns: 1fr; }
  .formules { max-width: 560px; margin-inline: auto; }
  .maisons-apercu__tete { flex-direction: column; align-items: flex-start; }
  .equipe__carte { left: 16px; right: 16px; }
  .toit-etapes__lib { display: none; }
  .toit-etapes__rail { height: 150px; }
  .toit-etapes__jalons { height: 150px; }
  .toit-etapes__cle { width: 52px; height: 52px; margin: -76px 0 0 -26px; }
}
@media (max-width: 640px) {
  :root { --t-texte: 16px; }
  .form__ligne, .zone__villes, .engagement__index, .comparatif__liste { grid-template-columns: 1fr; }
  .bref__liste { grid-template-columns: 1fr; }
  .bref__liste li { border-left: 0; padding-left: 0; }
  .portrait { grid-template-columns: 1fr; }
  .portrait__photo { max-width: 240px; }
  .maison__chiffres { grid-template-columns: repeat(2, auto); }
  .toit-etapes__num { width: 36px; height: 36px; font-size: 13px; }
  .toit-etapes__grand-num { font-size: 60px; }
  .simu__resultats li { grid-template-columns: 1fr; }
  .simu__chiffres { flex-direction: column; gap: 2px; }
  .valeur { padding-bottom: 0; }
  .valeur__carte { position: relative; left: 0; right: 0; margin: -40px 14px 0; }
  .visionneuse { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
  .visionneuse figure { grid-column: 1 / -1; grid-row: 1; }
  .visionneuse__nav { grid-row: 2; }
  .btn { white-space: normal; }
  .hero__cle { width: 60px; height: 60px; }
  .equipe__carte { grid-template-columns: 1fr; position: relative; left: 0; right: 0; bottom: 0; margin: -36px 12px 0; }
  .equipe__photo { margin-bottom: 0; }
}

/* =====================================================================
   Reprise du 16/10/2026 (retours de Thomas et des trois clients simulés)
   ===================================================================== */

/* ---------- Ce que nous faisons : panneaux qui s'empilent au défilement (modèle validé Agri Paysage) ---------- */
.services__pile { display: grid; gap: 28px; }
.service { position: sticky; top: calc(96px + var(--i) * 18px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(560px, 74vh); padding: clamp(22px, 3vw, 44px); border-radius: 32px; background: var(--creme); border: 1px solid var(--filet); }
.service:nth-child(even) { background: var(--pierre); }
.service:last-child { background: var(--nuit); color: rgba(255, 253, 249, .78); }
.service:last-child .titre-m { color: var(--blanc); }
.service:last-child .etiquette-or { color: var(--or-1); }
.service:last-child .pastille { background: rgba(255, 253, 249, .08); }
.service__texte .pastille { margin-bottom: 26px; width: 58px; height: 58px; }
.service__texte .pastille .ico { width: 26px; height: 26px; }
.service .titre-m { font-size: clamp(26px, 2.4vw, 36px); margin-bottom: 16px; }
.service__texte p:not([class]) { font-size: var(--t-chapo); line-height: 1.7; max-width: 480px; }
.service__photo { position: relative; height: 100%; min-height: 320px; border-radius: 22px; overflow: hidden; }
.service__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service__num { position: absolute; left: 16px; top: 16px; padding: 7px 14px; border-radius: 99px; background: var(--blanc); color: var(--nuit); font-size: 13px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* ---------- Les 3 formules en paliers (composition de la plaque des clientes) ---------- */
.paliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: end; }
.palier { position: relative; display: flex; flex-direction: column; padding: 38px clamp(22px, 2.2vw, 34px) 30px; border-radius: 26px; border: 1px solid var(--filet); background: var(--blanc); transition: transform .6s var(--courbe), box-shadow .6s var(--courbe); }
.palier--1 { min-height: 680px; }
.palier--2 { min-height: 740px; background: #EFE4CF; border-color: color-mix(in srgb, var(--or-5) 35%, transparent); }
.palier--3 { min-height: 800px; background: var(--nuit); border-color: var(--nuit); color: rgba(255, 253, 249, .74); }
.palier:hover { transform: translateY(-8px); }
.palier__symbole { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid var(--or); color: var(--or-fonce); margin-bottom: 22px; background: var(--blanc); }
.palier--3 .palier__symbole { background: transparent; color: var(--or-1); border-color: var(--or-1); }
.palier__symbole .ico { width: 34px; height: 34px; }
.palier__nom { font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 28px; letter-spacing: .06em; text-transform: uppercase; color: var(--or-fonce); }
.palier--3 .palier__nom { color: var(--or-1); }
.palier__taux { margin: 10px 0 4px; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: clamp(76px, 7vw, 108px); line-height: .95; color: var(--nuit); font-variant-numeric: tabular-nums; }
.palier--3 .palier__taux { background: var(--or-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.palier__taux small { font-size: .38em; }
.palier__base { font-size: 13.5px; line-height: 1.5; color: var(--texte-2); margin: 0 0 22px; }
.palier--3 .palier__base { color: rgba(255, 253, 249, .6); }
.palier__inclus { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 14px; padding: 7px 14px 7px 10px; border-radius: 99px; background: var(--nuit); color: var(--or-1); font-size: 13.5px; font-weight: 600; }
.palier__inclus .ico { width: 16px; height: 16px; }
.palier--3 .palier__inclus { background: var(--or-1); color: var(--nuit); }
.palier__liste { display: grid; gap: 16px; padding-top: 18px; border-top: 1px solid var(--filet); margin-bottom: 28px; }
.palier--3 .palier__liste { border-color: var(--filet-clair); }
.palier__liste li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--texte-2); }
.palier--3 .palier__liste li { color: rgba(255, 253, 249, .66); }
.palier__liste strong { display: block; font-size: 16px; color: var(--nuit); margin-bottom: 2px; }
.palier--3 .palier__liste strong { color: var(--blanc); }
.palier__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--creme); color: var(--or-fonce); }
.palier--2 .palier__ico { background: var(--blanc); }
.palier--3 .palier__ico { background: var(--or-1); color: var(--nuit); }
.palier__ico .ico { width: 20px; height: 20px; }
.palier__bouton { margin-top: auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 22px; min-height: 54px; border-radius: 99px; background: var(--nuit); color: var(--blanc); font-weight: 600; font-size: 15px; text-decoration: none; transition: background .4s, color .4s; }
.palier__bouton .btn__pastille { background: var(--or-1); color: var(--nuit); }
.palier__bouton:hover { background: var(--or-1); color: var(--nuit); }
.palier__bouton:hover .btn__pastille { background: var(--nuit); color: var(--or-1); transform: translateX(4px); }
.palier--3 .palier__bouton { background: var(--blanc); color: var(--nuit); }
.palier--3 .palier__bouton .btn__pastille { background: var(--nuit); color: var(--or-1); }
.palier--3 .palier__bouton:hover { background: var(--or-1); }
.formules-sect .formules__tva { margin-top: 28px; }

/* ---------- Comparatif complet (Notre offre) : les trois formules côte à côte ---------- */
.matrice { overflow-x: auto; border-radius: var(--r-bloc); border: 1px solid var(--filet); background: var(--blanc); }
.matrice table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.matrice th, .matrice td { padding: 16px 18px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--filet); }
.matrice tbody th { text-align: left; font-weight: 400; }
.matrice tbody th { display: flex; align-items: center; gap: 14px; }
.matrice tbody th strong { display: block; font-size: 15.5px; color: var(--nuit); }
.matrice tbody th small { display: block; font-size: 13.5px; color: var(--texte-2); line-height: 1.4; }
.matrice tbody th .pastille { width: 42px; height: 42px; }
.matrice__coin { text-align: left !important; font-size: 13px; color: var(--texte-2); line-height: 1.5; width: 40%; }
.matrice__tete { width: 20%; padding-block: 26px 20px !important; }
.matrice__tete .palier__symbole { margin: 0 auto 12px; width: 56px; height: 56px; }
.matrice__tete .palier__symbole .ico { width: 26px; height: 26px; }
.matrice__nom { display: block; font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; color: var(--or-fonce); }
.matrice__taux { display: block; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: 46px; line-height: 1.05; color: var(--nuit); }
.matrice__case--2 { background: #F7F0E2; }
.matrice__case--3, .matrice__tete--3 { background: var(--nuit); }
.matrice__tete--2 { background: #F7F0E2; }
.matrice__tete--3 .matrice__nom { color: var(--or-1); }
.matrice__tete--3 .matrice__taux { background: var(--or-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.matrice__tete--3 .palier__symbole { background: transparent; border-color: var(--or-1); color: var(--or-1); }
.matrice__tete--3, .matrice__case--3 { border-bottom-color: var(--filet-clair) !important; }
.matrice__case .ico { width: 30px; height: 30px; margin: 0 auto; padding: 6px; border-radius: 50%; background: var(--nuit); color: var(--or-1); }
.matrice__case--3 .ico { background: var(--or-1); color: var(--nuit); }
.matrice__non { display: block; width: 18px; height: 1.5px; margin: 0 auto; background: color-mix(in srgb, var(--nuit) 25%, transparent); }
.matrice__case--3 .matrice__non { background: rgba(255, 253, 249, .25); }
.matrice tfoot td { border-bottom: 0; padding-block: 20px 24px; }
.matrice__choisir { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 18px; border-radius: 99px; background: var(--nuit); color: var(--blanc); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: background .35s, color .35s; }
.matrice__choisir .btn__pastille { width: 36px; height: 36px; background: var(--or-1); color: var(--nuit); }
.matrice__choisir:hover { background: var(--or-1); color: var(--nuit); }
.matrice__case--3 .matrice__choisir { background: var(--blanc); color: var(--nuit); }
.matrice__case--3 .matrice__choisir:hover { background: var(--or-1); }
.matrice__case--3 .matrice__choisir .btn__pastille { background: var(--nuit); color: var(--or-1); }

/* ---------- Notes Airbnb et Booking ---------- */
.notes { display: flex; flex-wrap: wrap; gap: 10px; }
.note { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 99px; border: 1px solid var(--filet); background: var(--blanc); text-decoration: none; transition: border-color .3s, background .3s; }
a.note:hover { border-color: var(--nuit); }
.note__val { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 99px; background: var(--nuit); color: var(--or-1); font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 20px; line-height: 1; }
.note__val .ico { width: 15px; height: 15px; }
.note__val small { font-family: var(--f-texte); font-size: 12px; color: rgba(255, 253, 249, .6); }
.note__src { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; color: var(--nuit); line-height: 1.2; }
.note__src small { font-size: 12.5px; font-weight: 400; color: var(--texte-2); margin-top: 3px; }
.note__logo { height: 16px; width: auto; }
.note__logo--booking { height: 13px; }
.notes--compact .note__logo { height: 13px; }
.notes--compact .note__logo--booking { height: 11px; }
.notes--compact .note { padding: 4px 12px 4px 4px; gap: 8px; }
.notes--compact .note__val { font-size: 16px; padding: 6px 9px; }

/* ---------- Fiche d'une maison ---------- */
.fiche { padding-block: clamp(40px, 4.4vw, 64px); }
.fiche + .fiche { border-top: 1px solid var(--filet); }
.fiche__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 22px 40px; margin-bottom: 28px; }
.fiche__tete .titre-l { max-width: 760px; }
.fiche__tete .intitule { margin-bottom: 14px; }
.fiche__galerie { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; height: clamp(360px, 38vw, 560px); border-radius: var(--r-bloc); overflow: hidden; }
.fiche__vignette { position: relative; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--pierre); }
.fiche__vignette--0 { grid-row: 1 / 3; }
.fiche__vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--courbe); }
.fiche__vignette:hover img { transform: scale(1.05); }
.fiche__vignette:hover .agrandir { background: var(--nuit); color: var(--or-1); }
.fiche__toutes { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; border: 0; background: var(--blanc); color: var(--nuit); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .3s, color .3s; }
.fiche__toutes .ico { width: 16px; height: 16px; }
.fiche__toutes:hover { background: var(--nuit); color: var(--or-1); }
.fiche__corps { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(28px, 3vw, 44px); }
.fiche__chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; }
.fiche__chiffres li { display: grid; gap: 4px; justify-items: start; padding: 18px 18px 16px; border-radius: 18px; background: var(--creme); }
.fiche__chiffres .ico { width: 22px; height: 22px; color: var(--or-fonce); margin-bottom: 6px; }
.fiche__chiffres b { font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 34px; font-weight: 500; line-height: 1; color: var(--nuit); }
.fiche__chiffres span { font-size: 13.5px; color: var(--texte-2); }
.fiche__resume { font-size: var(--t-chapo); line-height: 1.75; color: var(--texte); }
.fiche__sous-titre { margin: 30px 0 16px; font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 24px; color: var(--nuit); }
.fiche__atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
.fiche__atouts li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; font-size: 15px; line-height: 1.45; }
.fiche__atouts .pastille { width: 42px; height: 42px; }
.fiche__atouts .pastille .ico { width: 19px; height: 19px; }
.fiche__resa { position: sticky; top: 110px; display: grid; gap: 14px; padding: 30px; border-radius: 26px; background: var(--nuit); color: rgba(255, 253, 249, .72); }
.fiche__resa-titre { margin: 0; font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 28px; color: var(--blanc); }
.fiche__resa-texte { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; }
.fiche__resa .btn { justify-content: space-between; }
.fiche__ou { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 253, 249, .5); }
.fiche__ou::before, .fiche__ou::after { content: ''; flex: 1; height: 1px; background: var(--filet-clair); }
.fiche__plateformes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plateforme { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 12px 14px 12px 16px; border-radius: 16px; border: 1.5px solid var(--blanc); background: var(--blanc); text-decoration: none; transition: border-color .3s, transform .45s var(--courbe); }
.plateforme img { height: 22px; width: auto; max-width: 100px; }
.plateforme .ico { width: 17px; height: 17px; color: var(--nuit); transition: transform .45s var(--courbe); }
.plateforme:hover { border-color: var(--or-1); }
.plateforme:hover .ico { transform: translate(3px, -3px) rotate(-45deg); }
.fiche__tel { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--filet-clair); font-size: 14px; text-decoration: none; }
.fiche__tel .ico { width: 18px; height: 18px; color: var(--or-1); }
.fiche__tel strong { color: var(--blanc); }
.maison-carte .notes { margin-top: -2px; }

/* ---------- Contact : propriétaire ou voyageur ---------- */
.contact__onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-bottom: 24px; border-radius: 99px; background: var(--creme); }
.contact__onglets button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border: 0; border-radius: 99px; background: transparent; font-weight: 600; font-size: 15px; color: var(--texte-2); cursor: pointer; transition: background .35s, color .35s; }
.contact__onglets .ico { width: 18px; height: 18px; }
.contact__onglets button:hover { color: var(--nuit); }
.contact__onglets button[aria-selected="true"] { background: var(--nuit); color: var(--blanc); }
.contact__onglets button[aria-selected="true"] .ico { color: var(--or-1); }

/* ---------- Carte fondue dans sa section (sans cadre) ---------- */
.zone { overflow: hidden; }
.zone__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.zone__carte { background: transparent; padding: 0; border-radius: 0; margin: -6% -8% -6% 0; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.js .zone__carte.rv-img { clip-path: none; }
.c-dep { fill: #E4D7BF; stroke: var(--pierre); stroke-width: 2; }
.c-dep--52 { fill: #D8C29A; }
.c-rayon { fill: rgba(255, 253, 249, .32); }

@media (max-width: 980px) {
  .service { position: relative; top: 0; grid-template-columns: 1fr; min-height: 0; }
  .service__photo { min-height: 260px; order: -1; }
  .paliers { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .palier--1, .palier--2, .palier--3 { min-height: 0; }
  .fiche__corps { grid-template-columns: 1fr; }
  .fiche__resa { position: relative; top: 0; }
  .zone__carte { margin: 0; }
}
@media (max-width: 640px) {
  .fiche__galerie { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; height: 420px; }
  .fiche__vignette--0 { grid-column: 1 / 3; grid-row: 1; }
  .fiche__vignette--3, .fiche__vignette--4 { display: none; }
  .fiche__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche__atouts { grid-template-columns: 1fr; }
  .contact__onglets button { font-size: 13.5px; }
}

/* ---------- Listes déroulantes dessinées au style du formulaire (16/10/2026) ----------
   Le <select> reste dans le code (envoi, repli sans JS) ; site.js le double d'un bouton et d'une liste. */
.select__pastille { width: 34px; height: 34px; background: var(--creme); color: var(--or-fonce); transition: background .3s, color .3s, transform .35s var(--courbe); }
.select:hover .select__pastille { background: var(--creme); color: var(--nuit); }
.select__pastille .ico { width: 15px; height: 15px; transform: rotate(90deg); }
.liste { position: relative; min-width: 0; }
.liste select { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; }
.liste__bouton { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; min-height: 52px; padding: 13px 60px 13px 18px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--nuit) 16%, transparent); background: var(--blanc); color: var(--texte); font: 500 16px/1.4 var(--f-texte); text-align: left; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.liste__bouton:hover { border-color: color-mix(in srgb, var(--nuit) 34%, transparent); }
.liste__bouton:focus-visible, .liste.is-ouverte .liste__bouton { outline: none; border-color: var(--or-fonce); box-shadow: 0 0 0 4px rgba(201, 168, 91, .22); }
.liste__bouton.is-vide { color: color-mix(in srgb, var(--texte-2) 70%, transparent); }
.liste__bouton.cpg-invalid { border-color: var(--cpg-error, #A3361F) !important; }
.liste.is-ouverte .select__pastille { background: var(--nuit); color: var(--or-1); }
.liste.is-ouverte .select__pastille .ico { transform: rotate(-90deg); }
.liste__options { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 290px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--nuit) 12%, transparent); background: var(--blanc); box-shadow: 0 14px 34px rgba(35, 31, 32, .08); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .35s var(--courbe), visibility 0s .35s; }
.liste.is-ouverte .liste__options { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.liste__options li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 10px; font-size: 15.5px; color: var(--texte); cursor: pointer; }
.liste__options li.is-vide { color: color-mix(in srgb, var(--texte-2) 75%, transparent); font-style: italic; }
.liste__options li:hover, .liste__options li.is-active { background: var(--creme); }
.liste__options li[aria-selected="true"] { color: var(--nuit); font-weight: 600; }
.liste__options li .ico { width: 16px; height: 16px; color: var(--or-fonce); opacity: 0; }
.liste__options li[aria-selected="true"] .ico { opacity: 1; }

/* ---------- Compteurs (voyageurs) : − et + en pastille, chiffres seuls ---------- */
.compteur-champ { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; min-height: 52px; padding: 6px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--nuit) 16%, transparent); background: var(--blanc); transition: border-color .3s, box-shadow .3s; }
.compteur-champ:hover { border-color: color-mix(in srgb, var(--nuit) 34%, transparent); }
.compteur-champ:focus-within { border-color: var(--or-fonce); box-shadow: 0 0 0 4px rgba(201, 168, 91, .22); }
.form .compteur-champ input { min-height: 0; padding: 4px 0; border: 0; background: transparent; box-shadow: none !important; text-align: center; font: 600 18px/1.2 var(--f-texte); font-variant-numeric: tabular-nums; color: var(--nuit); }
.form .compteur-champ input:focus { outline: none; }
.compteur-champ__btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--creme); color: var(--or-fonce); cursor: pointer; transition: background .3s, color .3s; }
.compteur-champ__btn .ico { width: 16px; height: 16px; }
.compteur-champ__btn:hover { background: var(--nuit); color: var(--or-1); }
.compteur-champ__btn:disabled { opacity: .35; cursor: default; background: var(--creme); color: var(--or-fonce); }
.compteur-champ:has(input.cpg-invalid) { border-color: var(--cpg-error, #A3361F); }

/* ---------- Panneaux : visuels qui montrent la prestation (Thomas, 16/10/2026 : « les photos ne correspondent pas ») ---------- */
.service__visuel { position: relative; height: 100%; min-height: 320px; border-radius: 22px; }
.service__visuel--a-venir { display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px; text-align: center; border: 1.5px dashed color-mix(in srgb, var(--or-5) 60%, transparent); background: rgba(255, 253, 249, .55); }
.service__visuel--a-venir p { margin: 0; max-width: 360px; font-size: 14.5px; color: var(--texte-2); }
.service__a-venir-titre { font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 24px !important; color: var(--nuit) !important; }
.service:last-child .service__visuel--a-venir { background: rgba(255, 253, 249, .04); border-color: rgba(216, 190, 89, .45); }
.service:last-child .service__visuel--a-venir p { color: rgba(255, 253, 249, .65); }
.service:last-child .service__a-venir-titre { color: var(--blanc) !important; }
.service__visuel--annonces { display: grid; place-items: center; padding: 20px 0; }
.annonces { position: relative; width: min(100%, 560px); height: 420px; }
.annonce { position: absolute; width: 66%; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--blanc); border: 1px solid var(--filet); text-decoration: none; box-shadow: 0 18px 40px rgba(35, 31, 32, .08); transition: transform .6s var(--courbe); }
.annonce--0 { left: 0; top: 0; transform: rotate(-3deg); z-index: 1; }
.annonce--1 { right: 0; bottom: 0; transform: rotate(2.5deg); z-index: 2; }
.annonce:hover { transform: rotate(0) translateY(-6px); z-index: 3; }
.annonce__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.annonce__photo img { width: 100%; height: 100%; object-fit: cover; }
.annonce__corps { display: grid; gap: 6px; padding: 14px 16px 16px; }
.annonce__lieu { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--or-fonce); }
.annonce__lieu .ico { width: 14px; height: 14px; }
.annonce__titre { font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 17px; line-height: 1.25; color: var(--nuit); }
.annonce__infos { font-size: 13px; color: var(--texte-2); }
.annonce .notes { margin-top: 4px; gap: 6px; }
@media (max-width: 640px) { .annonces { height: 380px; } .annonce { width: 78%; } }

/* ---------- Vous / Nous : ce que le propriétaire fait, ce que la conciergerie prend en charge ---------- */
.vous-nous { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(18px, 2vw, 28px); align-items: start; }
.vous-nous__vous { position: sticky; top: 100px; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 44px); border-radius: 32px; background: var(--creme); }
.vous-nous__etiquette { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--or-fonce); }
.vous-nous__etiquette .ico { width: 18px; height: 18px; }
.vous-nous__etiquette--or { color: var(--or-1); }
.vous-nous__phrase { margin: 0 0 28px; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.22; color: var(--nuit); }
.vous-nous__photo { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3.4; }
.vous-nous__photo img { width: 100%; height: 100%; object-fit: cover; }
.vous-nous__photo figcaption .ico { width: 15px; height: 15px; color: var(--or-fonce); }
.vous-nous__photo figcaption { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: var(--blanc); font-size: 13px; font-weight: 600; color: var(--nuit); }
.vous-nous__nous { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 44px); border-radius: 32px; }
.vous-nous__liste { display: grid; }
.vous-nous__liste li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 20px 0; border-top: 1px solid var(--filet-clair); }
.vous-nous__liste li:first-child { border-top: 0; padding-top: 4px; }
.vous-nous__liste .pastille { width: 52px; height: 52px; background: rgba(255, 253, 249, .07); color: var(--or-1); }
.vous-nous__liste h3 { margin: 4px 0 6px; font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 22px; line-height: 1.25; color: var(--blanc); }
.vous-nous__liste p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 253, 249, .7); }
.vous-nous__formule { margin-top: 8px; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(216, 190, 89, .45); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--or-1); white-space: nowrap; }
@media (max-width: 980px) {
  .vous-nous { grid-template-columns: 1fr; }
  .vous-nous__vous { position: relative; top: 0; }
  .vous-nous__liste li { grid-template-columns: 44px minmax(0, 1fr); }
  .vous-nous__formule { grid-column: 2; justify-self: start; margin-top: 0; }
}

/* ---------- Inspirations Framer Home Services (16/10/2026), transposées ---------- */
/* Bandeau défilant des communes et de leur distance (modèle Ironside), au-dessus de la carte. */
.bandeau { display: flex; overflow: hidden; padding-block: 22px; background: var(--nuit); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bandeau__piste { display: flex; flex: none; align-items: center; gap: 0; padding: 0; margin: 0; animation: bandeau 42s linear infinite; }
.bandeau__piste li { display: inline-flex; align-items: baseline; gap: 10px; padding-right: 36px; white-space: nowrap; }
.bandeau__piste span { font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-style: italic; font-size: clamp(30px, 3.4vw, 50px); line-height: 1; color: var(--blanc); }
.bandeau__piste small { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--or-1); }
.bandeau__sep { width: 22px; height: 22px; margin-left: 26px; color: var(--or-1); align-self: center; transform: rotate(-35deg); }
.bandeau:hover .bandeau__piste { animation-play-state: paused; }
@keyframes bandeau { to { transform: translateX(-100%); } }

/* FAQ en deux colonnes : titre et contact fixes à gauche, questions à droite (modèles Cleanfy, Servora). */
.faq__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__tete { position: sticky; top: 110px; }
.faq__tete .sect-titre { margin-bottom: 28px; }
.faq__contact { padding-top: 24px; border-top: 1px solid var(--filet); }
.faq__contact p { margin: 0 0 16px; color: var(--texte-2); }

/* Nom de marque géant en bas du pied de page (modèles Clenybuz, Ironside). */
.pied__nom { margin: 0; padding: 0 var(--gouttiere); font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: clamp(80px, 15.5vw, 280px); line-height: .78; letter-spacing: -.02em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(216, 190, 89, .55); transform: translateY(14%); user-select: none; }
.pied__nom em { font-family: var(--f-script); font-style: normal; font-size: 1.08em; -webkit-text-stroke: 0; color: rgba(216, 190, 89, .55); }
.pied { padding-bottom: 0; overflow: hidden; }

@media (max-width: 980px) {
  .faq__grille { grid-template-columns: 1fr; }
  .faq__tete { position: relative; top: 0; }
}
@media (prefers-reduced-motion: reduce) { .bandeau__piste { animation: none; } }

/* Le faîte du pied de page remonte sur la dernière section : on lui réserve la place. */
main > :last-child { padding-bottom: calc(var(--sect) + var(--faite)); }
main > .appel:last-child { padding-bottom: calc(clamp(72px, 7vw, 110px) + var(--faite)); }

/* =====================================================================
   ESSAIS (16/10/2026) : accordéons inspirés de Framer, page /essais-accordeons/
   ===================================================================== */
/* Swatch : bandes qui s'ouvrent (mesures relevées sur la démo : bande fermée ~92 px, écart 8 px, rayon 28 px). */
.swatch { display: flex; gap: 8px; height: clamp(460px, 44vw, 620px); }
.swatch__bande { position: relative; flex: 0 0 92px; border-radius: 28px; overflow: hidden; transition: flex-basis .9s cubic-bezier(.22, 1.2, .36, 1), flex-grow .9s cubic-bezier(.22, 1.2, .36, 1); }
.swatch__bande.is-ouvert { flex: 1 1 0; }
.swatch__declencheur { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0 24px; border: 0; background: transparent; cursor: pointer; color: inherit; transition: opacity .35s; }
.swatch__bande.is-ouvert .swatch__declencheur { opacity: 0; pointer-events: none; }
.swatch__num { font-size: 13px; font-weight: 600; letter-spacing: .08em; opacity: .7; }
.swatch__libelle { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 24px; white-space: nowrap; margin-top: auto; margin-bottom: 18px; }
.swatch__plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 253, 249, .7); color: var(--nuit); }
.swatch__plus .ico { width: 16px; height: 16px; }
.swatch__contenu { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(24px, 3vw, 44px); min-width: 520px; opacity: 0; transition: opacity .3s; }
.swatch__bande.is-ouvert .swatch__contenu { opacity: 1; transition: opacity .5s .35s; }
.swatch__contenu > * { transform: translateY(16px); opacity: 0; transition: transform .7s var(--courbe), opacity .5s; }
.swatch__bande.is-ouvert .swatch__contenu > * { transform: none; opacity: 1; }
.swatch__bande.is-ouvert .swatch__contenu > :nth-child(2) { transition-delay: .4s; } .swatch__bande.is-ouvert .swatch__contenu > :nth-child(3) { transition-delay: .48s; }
.swatch__bande.is-ouvert .swatch__contenu > :nth-child(4) { transition-delay: .56s; } .swatch__bande.is-ouvert .swatch__contenu > :nth-child(5) { transition-delay: .64s; } .swatch__bande.is-ouvert .swatch__contenu > :nth-child(6) { transition-delay: .72s; }
.swatch__contenu .btn { align-self: flex-start; }
.swatch__tags { position: absolute; top: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 60%; }
.swatch__tags li { padding: 7px 14px; border-radius: 99px; background: rgba(255, 253, 249, .8); color: var(--nuit); font-size: 13px; font-weight: 600; }
.swatch__titre { font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.05; }
.swatch__texte { margin: 0; max-width: 460px; font-size: 16px; line-height: 1.6; opacity: .82; }
.swatch__taux { margin: 0; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: clamp(90px, 9vw, 150px); line-height: .9; }
.swatch__taux small { font-size: .35em; }
.swatch__symbole { position: absolute; top: clamp(24px, 3vw, 40px); left: clamp(24px, 3vw, 40px); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid currentColor; }
.swatch__symbole .ico { width: 30px; height: 30px; }
.swatch__grand-ico { position: absolute; right: -4%; top: 50%; translate: 0 -50%; width: 56%; aspect-ratio: 1; opacity: .16; }
.swatch__grand-ico .ico { width: 100%; height: 100%; }
/* Teintes de la charte (aplats, pas de photo approchante). */
.swatch__bande--f1, .swatch__bande--creme { background: var(--creme); color: var(--nuit); border: 1px solid var(--filet); }
.swatch__bande--f2, .swatch__bande--pierre { background: #E9DCC3; color: var(--nuit); }
.swatch__bande--or { background: linear-gradient(160deg, #E4CE7E, #C9A85B); color: var(--nuit); }
.swatch__bande--sauge { background: #A9BBAE; color: var(--nuit); }
.swatch__bande--f3, .swatch__bande--nuit { background: var(--nuit); color: var(--blanc); }
.swatch__bande--f3 .swatch__taux { color: var(--or-1); }
.swatch__bande--f3 .btn, .swatch__bande--nuit .btn { --fond: var(--blanc); --txt: var(--nuit); --p-fond: var(--nuit); --p-txt: var(--or-1); border-color: var(--blanc); }
.swatch__bande--f3 .swatch__symbole { color: var(--or-1); }
@media (max-width: 860px) {
  .swatch { flex-direction: column; height: auto; }
  .swatch__bande { flex: 0 0 76px; }
  .swatch__bande.is-ouvert { flex: 0 0 auto; min-height: 520px; }
  .swatch__declencheur { flex-direction: row; padding: 0 22px; }
  .swatch__libelle { writing-mode: horizontal-tb; transform: none; margin: 0 auto 0 16px; font-size: 20px; }
  .swatch__contenu { min-width: 0; }
}

/* Processes : l'étape ouverte prend un fond, le visuel glisse à sa hauteur. */
.etapes-acc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.etapes-acc__liste { display: grid; gap: 6px; }
.etapes-acc__item { border-radius: 22px; transition: background .5s var(--courbe); }
.etapes-acc__item.is-ouvert { background: var(--creme); }
.etapes-acc__tete { display: grid; grid-template-columns: 40px 1fr 40px; gap: 18px; align-items: center; width: 100%; padding: 22px 24px; border: 0; background: none; text-align: left; cursor: pointer; }
.etapes-acc__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--creme); font-size: 14px; font-weight: 600; color: var(--nuit); transition: background .4s, color .4s; }
.etapes-acc__item.is-ouvert .etapes-acc__num { background: var(--nuit); color: var(--or-1); }
.etapes-acc__titre { font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: clamp(22px, 2vw, 30px); color: var(--nuit); line-height: 1.2; }
.etapes-acc__chevron { display: grid; place-items: center; }
.etapes-acc__chevron .ico { width: 20px; height: 20px; color: var(--nuit); }
.etapes-acc__moins, .etapes-acc__item.is-ouvert .etapes-acc__plus { display: none; }
.etapes-acc__item.is-ouvert .etapes-acc__moins { display: block; }
.etapes-acc__corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--courbe); }
.etapes-acc__item.is-ouvert .etapes-acc__corps { grid-template-rows: 1fr; }
.etapes-acc__corps > div { overflow: hidden; padding: 0 24px 0 82px; }
.etapes-acc__item.is-ouvert .etapes-acc__corps > div { padding-bottom: 24px; }
.etapes-acc__corps p { margin: 0 0 10px; color: var(--texte-2); }
.etapes-acc__scene { position: relative; align-self: stretch; }
.etapes-acc__visuel { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 3; transition: top .8s cubic-bezier(.22, 1.2, .36, 1); }
.etapes-acc__carte { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 26px; opacity: 0; transform: scale(.94); transition: opacity .5s, transform .8s var(--courbe); }
.etapes-acc__carte.is-vu { opacity: 1; transform: none; }
.etapes-acc__ico { width: 34%; aspect-ratio: 1; }
.etapes-acc__ico .ico { width: 100%; height: 100%; }
.etapes-acc__carte-num { position: absolute; left: 22px; top: 18px; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: 64px; line-height: 1; opacity: .35; }
.etapes-acc__carte-tag { position: absolute; right: 18px; bottom: 18px; padding: 7px 14px; border-radius: 99px; background: rgba(255, 253, 249, .85); color: var(--nuit); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.etapes-acc__carte--creme { background: var(--creme); color: var(--or-fonce); }
.etapes-acc__carte--pierre { background: #E9DCC3; color: var(--nuit); }
.etapes-acc__carte--or { background: linear-gradient(160deg, #E4CE7E, #C9A85B); color: var(--nuit); }
.etapes-acc__carte--sauge { background: #A9BBAE; color: var(--nuit); }
.etapes-acc__carte--nuit { background: var(--nuit); color: var(--or-1); }
@media (max-width: 860px) { .etapes-acc { grid-template-columns: 1fr; } .etapes-acc__scene { display: none; } }

/* ---------- Pictos bicolores et médaillons (Thomas, 16/10/2026 : « des pictos plus travaillés, c'est du haut de gamme ») ---------- */
:root { --ico-accent: rgba(201, 168, 91, .5); }
.ico .a { fill: var(--ico-accent); stroke: none; }
.fond-nuit, .pied, .fiche__resa, .service:last-child, .vous-nous__nous, .palier--3, .contact__voyageur { --ico-accent: rgba(216, 190, 89, .34); }
.pastille { position: relative; background: radial-gradient(circle at 32% 28%, #FFFDF9 0%, var(--creme) 78%); box-shadow: inset 0 0 0 1px rgba(201, 168, 91, .55), inset 0 0 0 4px #FFFDF9, inset 0 0 0 5px rgba(201, 168, 91, .22); color: var(--nuit); }
.pastille .ico { width: 24px; height: 24px; }
.fond-nuit .pastille, .vous-nous__liste .pastille, .pied .pastille { background: radial-gradient(circle at 32% 28%, #3A3432 0%, var(--nuit-2) 80%); box-shadow: inset 0 0 0 1px rgba(216, 190, 89, .55), inset 0 0 0 4px var(--nuit-2), inset 0 0 0 5px rgba(216, 190, 89, .2); color: var(--or-1); }
.pastille--or { background: var(--nuit); color: var(--or-1); box-shadow: inset 0 0 0 1px rgba(216, 190, 89, .6), inset 0 0 0 4px var(--nuit), inset 0 0 0 5px rgba(216, 190, 89, .25); }
.palier__ico, .formule__ico { box-shadow: inset 0 0 0 1px rgba(201, 168, 91, .45), inset 0 0 0 3px var(--blanc), inset 0 0 0 4px rgba(201, 168, 91, .2); color: var(--nuit); }
.palier--3 .palier__ico { box-shadow: inset 0 0 0 1px rgba(216, 190, 89, .7); background: var(--nuit-2); color: var(--or-1); }
.palier__ico .ico { width: 22px; height: 22px; }
.appel__tel-pastille, .pied__pastille { background: var(--nuit-2); color: var(--or-1); box-shadow: inset 0 0 0 1px rgba(216, 190, 89, .6); }
.contact__coord .pastille { width: 52px; height: 52px; }

.vous-nous__liste .pastille { width: 58px; height: 58px; }
.vous-nous__liste .pastille .ico { width: 28px; height: 28px; }
.vous-nous__liste li { grid-template-columns: 58px minmax(0, 1fr) auto; }

/* ---------- Bannière d'accueil (Thomas, 16/10/2026 : « très chargé » ; référence mamounia.com) ----------
   Une photo pleine page, un titre court, un seul lien. Pas de carte, pas de devise, pas de double bouton ;
   le chapeau et le second lien passent dans l'introduction juste dessous. Seul le titre est sur la photo,
   au-dessus d'un voile bas qui garantit le contraste. */
.hero--accueil { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: min(calc(100vh - 96px), 900px); padding: 0 0 clamp(64px, 8vh, 110px); color: var(--blanc); }
.hero__visuel { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 30s ease-in-out infinite alternate; }
.hero__visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 17, .05) 20%, rgba(20, 17, 17, .55) 55%, rgba(20, 17, 17, .85) 100%); }
.hero__centre { position: relative; text-align: center; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero--accueil .sur { color: rgba(255, 253, 249, .85); font-weight: 500; letter-spacing: .22em; margin-bottom: 22px; }
.hero--accueil .titre-xxl { color: var(--blanc); font-weight: 400; margin: 0 auto 34px; max-width: 900px; }
.hero--accueil .script { background: none !important; -webkit-text-fill-color: currentColor; color: var(--or-4); animation: none; }
.hero--accueil .entete__fantome, .hero--accueil .hero__cle { display: none; }
.lien-filet { display: inline-block; padding-bottom: 8px; border-bottom: 1px solid currentColor; font-size: 13.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--blanc); transition: color .4s, border-color .4s, letter-spacing .6s var(--courbe); }
.lien-filet:hover { color: var(--or-4); letter-spacing: .26em; }
.lien-filet--sombre { color: var(--nuit); border-color: var(--or); }
.lien-filet--sombre:hover { color: var(--or-fonce); }
.intro { padding-block: clamp(72px, 8vw, 120px) clamp(96px, 9vw, 140px); text-align: center; }
.intro__texte { margin: 0 auto 34px; max-width: 760px; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.45; color: var(--nuit); }
.hero--accueil + .intro + .bref { margin-top: 0; background: var(--blanc); }
.anim .hero--accueil .entree-photo { animation: entree-visuel 1.8s var(--courbe) both; }
@keyframes entree-visuel { from { opacity: 0; transform: scale(1.04); } }
@media (max-width: 980px) {
  .hero--accueil { min-height: 78vh; }
}

/* ---------- Pictos fins (Thomas, 16/10/2026 : « grossiers, ne font pas premium » ; référence mamounia.com) ----------
   Trait d'un pixel, sans aplat ni médaillon chargé : un simple cercle au filet or. */
.ico .a { display: none; }
.ico g { stroke-width: 1.05; }
.pastille, .fond-nuit .pastille, .vous-nous__liste .pastille, .pied .pastille, .pastille--or, .contact__coord .pastille { background: transparent; box-shadow: inset 0 0 0 1px rgba(175, 145, 56, .55); color: var(--or-fonce); }
.fond-nuit .pastille, .vous-nous__liste .pastille, .pied .pastille, .pastille--or { box-shadow: inset 0 0 0 1px rgba(216, 190, 89, .45); color: var(--or-1); }
.palier__ico, .formule__ico { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(175, 145, 56, .5); color: var(--or-fonce); }
.palier--3 .palier__ico { box-shadow: inset 0 0 0 1px rgba(216, 190, 89, .5); color: var(--or-1); }
.appel__tel-pastille, .pied__pastille { background: transparent; box-shadow: inset 0 0 0 1px rgba(216, 190, 89, .55); color: var(--or-1); }

/* ---------- Prestations en accordéon de bandes (Framer « Swatch Accordion », Thomas 16/10/2026) ----------
   Bandes en aplats de la charte (pas de photo : aucune ne montre ces prestations). Au survol ou au clic, une
   bande s'ouvre ; texte en cascade. Mobile : bandes empilées. */
.swatch--services .swatch__num-grand { margin: 0; font-family: var(--f-titre); font-variation-settings: 'opsz' 28; font-size: clamp(64px, 6vw, 96px); line-height: 1; opacity: .3; }
.swatch--services .swatch__grand-ico { width: 46%; right: 4%; opacity: .22; }
.swatch--services .swatch__grand-ico .ico g { stroke-width: .5; }
.swatch--services .swatch__contenu { justify-content: flex-end; }
.swatch--services .swatch__contenu .lien-filet { align-self: flex-start; margin-top: 8px; }
.swatch__bande--nuit .lien-filet--sombre { color: var(--blanc); border-color: var(--or-1); }
.swatch__bande--nuit .swatch__plus { background: rgba(255, 253, 249, .12); color: var(--blanc); }
.swatch__declencheur:hover .swatch__plus { background: var(--nuit); color: var(--or-1); }
.swatch__declencheur:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: -4px; border-radius: 28px; }
.swatch__bande--or .swatch__tags li, .swatch__bande--sauge .swatch__tags li { background: rgba(255, 253, 249, .9); }

/* Swatch avec vraies photos (Thomas, 16/10/2026 : pas de pictos, de vraies photos via Magnific).
   Bande fermée : tranche de la photo sous un voile de la teinte de la charte, libellé vertical.
   Bande ouverte : photo à droite, texte à gauche sur fond clair (jamais de paragraphe sur la photo). */
:root { --teinte-creme: #F6F0E6; --teinte-pierre: #E9DCC3; --teinte-or: #D9C178; --teinte-sauge: #B7C4B6; --teinte-nuit: #2F2A29; }
.swatch__bande--photo { background: var(--creme); color: var(--nuit); }
.swatch__fond { position: absolute; inset: 0; transition: opacity .6s; }
.swatch__fond img { width: 100%; height: 100%; object-fit: cover; }
.swatch__fond::after { content: ''; position: absolute; inset: 0; background: var(--teinte); opacity: .78; mix-blend-mode: multiply; }
.swatch__bande--photo .swatch__declencheur { color: var(--nuit); }
.swatch__bande--photo:nth-child(5) .swatch__declencheur { color: var(--blanc); }
.swatch__bande--photo.is-ouvert .swatch__fond { opacity: 0; }
.swatch__bande--photo .swatch__contenu { padding-right: calc(52% + 28px); background: var(--creme); }
.swatch__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; overflow: hidden; border-radius: 0 28px 28px 0; }
.swatch__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--courbe); }
.swatch__bande.is-ouvert .swatch__photo img { transform: none; }
.swatch--services .swatch__contenu > .swatch__photo { opacity: 1 !important; transform: none !important; }
.swatch--services .swatch__tags { right: auto; left: clamp(24px, 3vw, 40px); justify-content: flex-start; }
.swatch--services .swatch__tags li { background: var(--blanc); border: 1px solid var(--filet); }
@media (max-width: 860px) {
  .swatch__bande--photo .swatch__contenu { position: relative; padding-right: clamp(24px, 3vw, 44px); padding-top: 260px; }
  .swatch__photo { left: 0; width: 100%; height: 240px; bottom: auto; border-radius: 28px 28px 0 0; }
  .swatch--services .swatch__tags { top: 260px; position: static; }
}

/* Correctifs du 16/10/2026 : chiffre rogné par l'étiquette, titre trop grand pour la colonne. */
.swatch--services .swatch__tags { position: static; max-width: none; margin-bottom: auto; }
.swatch--services .swatch__contenu { justify-content: flex-start; gap: 12px; }
.swatch--services .swatch__num-grand { margin-top: auto; font-size: clamp(52px, 4.6vw, 72px); line-height: .95; }
.swatch--services .swatch__titre { font-size: clamp(28px, 2.4vw, 38px); line-height: 1.1; }
.swatch--services .swatch__contenu { min-width: 0; }
.swatch--services .swatch__bande.is-ouvert { min-width: 0; }

/* Curseur pastille (« un truc rond au survol qui change le curseur », comme les maquettes de Clémence).
   Au-dessus du contenu, sans capter le clic ; pointeur fin seulement ; rien sous reduced-motion. */
.curseur-pastille { position: fixed; left: 0; top: 0; z-index: 60; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; display: grid; place-items: center; background: var(--nuit); color: var(--blanc); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; opacity: 0; scale: .4; transition: opacity .3s, scale .45s var(--courbe); }
.curseur-pastille .ico { width: 18px; height: 18px; color: var(--or-1); margin: 0 auto 4px; display: block; }
.curseur-pastille.is-actif { opacity: 1; scale: 1; }

@media (prefers-reduced-motion: reduce) { .curseur-pastille { transition: opacity .15s !important; scale: 1; } }

/* Badge rond du héros, à cheval sur le bas de la photo dans une encoche (principe Guardian of Real, Thomas 16/10/2026).
   L'anneau de texte tourne lentement, la flèche reste immobile (une flèche ne pivote pas sur elle-même). */
.hero--accueil { overflow: visible; }
.hero--accueil .hero__visuel { overflow: hidden; }
.hero__badge { position: absolute; left: 50%; bottom: 0; z-index: 3; width: 176px; height: 176px; margin-left: -88px; transform: translateY(50%); border-radius: 50%; display: grid; place-items: center; background: var(--nuit); color: var(--or-1); box-shadow: 0 0 0 14px var(--blanc), 0 22px 40px rgba(35, 31, 32, .18); text-decoration: none; }
.hero__badge-texte { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); animation: badge-tourne 26s linear infinite; }
.hero__badge-texte text { font: 600 13.5px var(--f-texte); letter-spacing: .1em; fill: currentColor; }
.hero__badge-cle { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--creme); color: var(--nuit); transition: background .4s, color .4s, transform .5s var(--courbe); }
.hero__badge-fleche { width: 24px; height: 24px; transform: rotate(90deg); }
.hero__badge:hover .hero__badge-cle { background: var(--or-1); transform: translateY(6px); }
.hero__badge:hover .hero__badge-texte { animation-duration: 10s; }
@keyframes badge-tourne { to { transform: rotate(360deg); } }
.hero--accueil + .intro { padding-top: clamp(130px, 11vw, 170px); }
@media (max-width: 640px) { .hero__badge { width: 132px; height: 132px; margin-left: -66px; box-shadow: 0 0 0 10px var(--blanc); } .hero__badge-cle { width: 54px; height: 54px; } }
@media (prefers-reduced-motion: reduce) { .hero__badge-texte { animation: none; } }

.hero--accueil { padding-bottom: clamp(140px, 15vh, 180px); }
.swatch__fond::after { opacity: .9; mix-blend-mode: normal; }
.swatch__bande--photo .swatch__libelle { font-size: 22px; }

/* Nos locations à 360 px : la grille de la fiche débordait (colonne auto à la largeur du contenu). */
.fiche__corps, .fiche__infos { min-width: 0; }
@media (max-width: 980px) { .fiche__corps { grid-template-columns: minmax(0, 1fr); } }

/* Badge premium (Thomas, 16/10/2026 : « trop basique ») : disque crème, double filet or, Bodoni italique,
   toit du logo au centre. L'anneau de texte tourne lentement ; la flèche descend au survol. */
.hero__badge { width: 190px; height: 190px; margin-left: -95px; background: var(--creme); color: var(--nuit); box-shadow: 0 0 0 12px var(--blanc); }
.hero__badge-anneaux { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__badge-anneaux circle { fill: none; stroke: var(--or); stroke-width: .6; }
.hero__badge-texte { inset: 0; width: 100%; height: 100%; }
.hero__badge-texte text { font: italic 400 15px var(--f-titre); font-variation-settings: 'opsz' 11; letter-spacing: .04em; fill: var(--nuit); }
.hero__badge-centre { position: relative; width: 62px; height: 62px; overflow: visible; }
.hero__badge-centre path { fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--courbe); }
.hero__badge-toit { stroke: var(--or-fonce); }
.hero__badge-fl { stroke: var(--nuit); }
.hero__badge:hover .hero__badge-fl { transform: translateY(5px); }
.hero__badge-cle { display: none; }
@media (max-width: 640px) { .hero__badge { width: 144px; height: 144px; margin-left: -72px; box-shadow: 0 0 0 9px var(--blanc); } .hero__badge-centre { width: 48px; height: 48px; } }
.hero__badge-texte .l { fill: var(--or); font-size: 8px; font-style: normal; }

/* Motif de fond (Thomas, 16/10/2026 : « il manque un pattern de fond sur certains blocs ») : le toit du logo en petit,
   au filet or, très léger, fondu vers le bas. Sur les sections crème et le bloc d'appel sombre seulement. */
.formules-sect, .maisons-apercu, .faq.fond-creme, .faq.fond-pierre, .entete.fond-creme, .appel__panneau, .comparatif { position: relative; isolation: isolate; }
.formules-sect::before, .maisons-apercu::before, .faq.fond-creme::before, .faq.fond-pierre::before, .entete.fond-creme::before, .appel__panneau::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/motif-toits.svg) 0 0 / 88px 76px repeat; opacity: .11;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.appel__panneau::after { background-image: url(../img/motif-toits-clair.svg); opacity: .09; -webkit-mask-image: radial-gradient(70% 90% at 0% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 0% 0%, #000, transparent 75%); }

/* Libellés verticaux : orientation « de côté », sinon l'apostrophe typographique se couche (« L ’ arrivée »). */
@supports (writing-mode: sideways-lr) { .swatch__libelle { writing-mode: sideways-lr; transform: none; } }
.swatch__bande:not(.is-ouvert) .swatch__declencheur { transition: background .4s; }
.swatch__bande:not(.is-ouvert):hover .swatch__plus { background: var(--nuit); color: var(--or-1); }
.is-pastille, .is-pastille * { cursor: none !important; }
.swatch--services .swatch__titre { margin-top: auto; }
.swatch--services .swatch__declencheur { justify-content: flex-end; }

/* ---------- Nos locations : deux biens côte à côte, synthèse + « Voir plus » (Thomas, 16/10/2026) ---------- */
.biens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.bien { display: flex; flex-direction: column; border-radius: var(--r-bloc); background: var(--creme); overflow: hidden; }
.bien__galerie { position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 16 / 10; }
.bien__vignette { position: relative; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--pierre); }
.bien__vignette--0 { grid-row: 1 / 3; }
.bien__vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--courbe); }
.bien__vignette:hover img { transform: scale(1.05); }
.bien__corps { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.4vw, 34px); }
.bien__lieu { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce); }
.bien__lieu .ico { width: 16px; height: 16px; }
.bien__titre { font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; color: var(--nuit); }
.bien__chiffres { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 0; border-block: 1px solid var(--filet); font-size: 14.5px; color: var(--texte-2); }
.bien__chiffres li + li::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 14px 3px -10px; border-radius: 50%; background: var(--or); }
.bien__chiffres b { font-family: var(--f-titre); font-variation-settings: 'opsz' 11; font-size: 20px; font-weight: 500; color: var(--nuit); }
.bien__resume { margin: 0; font-size: 16px; line-height: 1.65; }
.bien__atouts { display: grid; gap: 8px; margin: 0; }
.bien__atouts li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--texte); }
.bien__atouts .ico { width: 16px; height: 16px; margin-top: 3px; color: var(--or-fonce); }
.bien__plus summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nuit); border-bottom: 1px solid var(--or); padding-bottom: 4px; }
.bien__plus summary::-webkit-details-marker { display: none; }
.bien__plus summary .ico { width: 14px; height: 14px; transition: transform .4s var(--courbe); }
.bien__plus[open] summary .ico { transform: rotate(45deg); }
.bien__plus-fermer, .bien__plus[open] .bien__plus-ouvrir { display: none; }
.bien__plus[open] .bien__plus-fermer { display: inline; }
.bien__plus-corps { display: grid; gap: 12px; padding-top: 14px; }
.bien__plus-corps p { margin: 0; font-size: 15.5px; color: var(--texte-2); }
.bien__plus::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--courbe), content-visibility .5s allow-discrete; }
.bien__plus[open]::details-content { block-size: auto; }
.bien__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--filet); }
.plateforme--clair { min-height: 56px; padding: 12px 18px; border: 1px solid var(--filet); background: var(--blanc); }
.plateforme--clair:hover { border-color: var(--nuit); }
.plateforme--clair img { height: 20px; }

/* Fenêtre de réservation (le formulaire voyageur, autrefois en bas de page). */
.modale { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 28px; background: var(--blanc); color: var(--texte); overflow: auto; overscroll-behavior: contain; }
.modale::backdrop { background: rgba(23, 20, 20, .62); backdrop-filter: blur(4px); }
.modale[open] { animation: modale .5s var(--courbe); }
@keyframes modale { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.modale__boite { position: relative; padding: clamp(24px, 3vw, 40px); }
.modale__tete { margin-bottom: 18px; padding-right: 48px; }
.modale__tete .titre-m { font-size: clamp(26px, 2.2vw, 32px); }
.modale__tete p { margin: 8px 0 0; color: var(--texte-2); font-size: 15px; }
.modale__fermer { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet); background: transparent; cursor: pointer; color: var(--nuit); transition: background .3s, color .3s; }
.modale__fermer:hover { background: var(--nuit); color: var(--or-1); }
.modale__fermer .ico { width: 18px; height: 18px; }
.modale .form__titre { display: none; }
html:has(.modale[open]) { overflow: hidden; }
@media (max-width: 980px) { .biens { grid-template-columns: 1fr; } }

.curseur-pastille .ico-fleche, .curseur-pastille[data-mode="Suivant"] .ico-plus, .curseur-pastille[data-mode="Formules"] .ico-plus { display: none; }
.curseur-pastille[data-mode="Suivant"] .ico-fleche, .curseur-pastille[data-mode="Formules"] .ico-fleche { display: block; }
.swatch--services .swatch__bande.is-ouvert { cursor: pointer; }

/* Pastille plus douce (Thomas, 16/10/2026) : apparition et disparition lentes, mot et icône en fondu enchaîné. */
.curseur-pastille { transition: opacity .45s var(--courbe), scale .7s var(--courbe), background .4s; }
.curseur-pastille > span { display: grid; justify-items: center; transition: opacity .16s ease, transform .3s var(--courbe); }
.curseur-pastille.is-change > span { opacity: 0; transform: translateY(5px) scale(.94); }
.curseur-pastille .ico-plus, .curseur-pastille .ico-fleche { grid-area: 1 / 1; display: block !important; margin: 0 0 4px; transition: opacity .3s ease, transform .45s var(--courbe); }
.curseur-pastille b { grid-area: 2 / 1; }
.curseur-pastille .ico-fleche { opacity: 0; transform: rotate(-90deg); }
.curseur-pastille[data-mode="Suivant"] .ico-fleche, .curseur-pastille[data-mode="Formules"] .ico-fleche { opacity: 1; transform: none; }
.curseur-pastille[data-mode="Suivant"] .ico-plus, .curseur-pastille[data-mode="Formules"] .ico-plus { opacity: 0; transform: rotate(90deg); }
.curseur-pastille:not(.is-actif) { scale: .3; }

/* ---------- Calendrier des disponibilités (iCal des plateformes) ---------- */
.modale:has([data-calendrier]:not([hidden])) { width: min(760px, calc(100vw - 24px)); }
.date-source { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.champ:has(.date-source) { position: relative; }
.date-case { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 8px 8px 8px 18px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--nuit) 16%, transparent); background: var(--blanc); cursor: pointer; font: 500 16px/1.4 var(--f-texte); color: var(--texte); text-align: left; transition: border-color .3s, box-shadow .3s; }
.date-case:hover { border-color: color-mix(in srgb, var(--nuit) 34%, transparent); }
.date-case.is-actif, .date-case:focus-visible { outline: none; border-color: var(--or-fonce); box-shadow: 0 0 0 4px rgba(201, 168, 91, .22); }
.date-case.is-vide .date-case__val { color: color-mix(in srgb, var(--texte-2) 70%, transparent); }
.date-case__val::first-letter { text-transform: uppercase; }
.date-case__pastille { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--creme); color: var(--or-fonce); transition: background .3s, color .3s; }
.date-case.is-actif .date-case__pastille { background: var(--nuit); color: var(--or-1); }
.date-case__pastille .ico { width: 16px; height: 16px; }
.date-case.cpg-invalid { border-color: var(--cpg-error, #A3361F) !important; }

.calendrier { padding: 18px 18px 14px; border: 1px solid var(--filet); border-radius: 20px; background: color-mix(in srgb, var(--creme) 45%, var(--blanc)); }
.cal-tete { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; margin-bottom: 6px; }
.cal-consigne { margin: 0; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--nuit); }
.cal-nav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--filet); background: var(--blanc); color: var(--nuit); cursor: pointer; transition: background .3s, color .3s, opacity .3s; }
.cal-nav:hover:not(:disabled) { background: var(--nuit); color: var(--or-1); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-nav .ico { width: 16px; height: 16px; }
.cal-mois { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 28px; }
.cal-m__titre { margin: 0 0 8px; text-align: center; font-family: var(--f-titre); font-size: 19px; color: var(--nuit); }
.cal-m__titre::first-letter { text-transform: uppercase; }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; }
.cal-g > span { padding-bottom: 6px; text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.cal-jour { position: relative; height: 40px; border: 0; background: transparent; padding: 0; cursor: pointer; font: 500 14.5px/1 var(--f-texte); color: var(--nuit); font-variant-numeric: tabular-nums; isolation: isolate; }
.cal-jour::after { content: ""; position: absolute; inset: 1px 50%; translate: -50% 0; width: 38px; border-radius: 50%; z-index: -1; transition: background .25s; }
.cal-jour:hover:not(:disabled)::after { background: color-mix(in srgb, var(--or) 22%, transparent); }
.cal-jour:focus-visible { outline: none; }
.cal-jour:focus-visible::after { box-shadow: 0 0 0 2px var(--or-fonce); }
.cal-jour:disabled { cursor: default; }
.cal-jour.is-passe { color: color-mix(in srgb, var(--texte-2) 38%, transparent); }
.cal-jour.is-prise { color: color-mix(in srgb, var(--texte-2) 62%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texte-2) 55%, transparent); }
.cal-jour.is-prise::after { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--nuit) 7%, transparent) 4px 5px); }
.cal-jour.is-prise:not(:disabled) { color: var(--nuit); }
.cal-jour.is-dans { background: color-mix(in srgb, var(--or) 18%, transparent); }
.cal-jour.is-debut, .cal-jour.is-fin { color: var(--blanc); text-decoration: none; }
.cal-jour.is-debut::after, .cal-jour.is-fin::after { background: var(--nuit); }
.cal-jour.is-debut:has(~ .is-fin) , .cal-jour.is-debut:has(~ .is-dans) { background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--or) 18%, transparent) 50%); }
.cal-jour.is-fin { background: linear-gradient(90deg, color-mix(in srgb, var(--or) 18%, transparent) 50%, transparent 50%); }
.cal-jour.is-auj:not(.is-debut):not(.is-fin) { font-weight: 700; text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.cal-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet); font-size: 12.5px; color: var(--texte-2); }
.cal-leg { display: inline-flex; align-items: center; gap: 8px; }
.cal-leg::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--filet); background: var(--blanc); }
.cal-leg--prise::before { background: repeating-linear-gradient(135deg, var(--blanc) 0 3px, color-mix(in srgb, var(--nuit) 22%, transparent) 3px 4px); }
.cal-source { margin-left: auto; }
@media (max-width: 640px) {
  .calendrier { padding: 14px 10px 12px; }
  .cal-source { margin-left: 0; width: 100%; }
  .cal-jour { height: 42px; }
}

/* Carte d'une maison : prochaine date libre */
.bien__libre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 14px 0 0; font-size: 14.5px; font-weight: 600; color: var(--nuit); }
.bien__libre-point { width: 8px; height: 8px; border-radius: 50%; background: var(--or-5); box-shadow: 0 0 0 4px color-mix(in srgb, var(--or) 25%, transparent); }
.bien__libre-lien { padding: 0; border: 0; background: none; cursor: pointer; font: 500 14px/1.4 var(--f-texte); color: var(--or-fonce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bien__libre-lien:hover { color: var(--nuit); }

/* ---------- Essai de titres sans Bodoni (?typo=fraunces | newsreader | bodoni) ----------
   Les réglages 'opsz' posés pour Bodoni sont neutralisés : la taille optique suit le corps. */
body.typo-fraunces { --f-titre: 'Fraunces', Georgia, serif; }
body.typo-newsreader { --f-titre: 'Newsreader', Georgia, serif; }
body.typo-fraunces * { font-variation-settings: 'SOFT' 50 !important; }
body.typo-newsreader * { font-variation-settings: normal !important; }
body.typo-fraunces :is(.titre-xxl, .titre-xl, .titre-l, .titre-m) { letter-spacing: -.015em; }

/* Essai tout Montserrat (Thomas, 20/10/2026) : titres en semi-gras resserré, chiffres en medium ;
   le mot porteur reste en Allura, seule touche manuscrite. */
body.typo-montserrat { --f-titre: 'Montserrat', 'Gotham', 'Helvetica Neue', Arial, sans-serif; }
body.typo-montserrat * { font-variation-settings: normal !important; }
body.typo-montserrat :is(.titre-xxl, .titre-xl, .titre-l) { font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
body.typo-montserrat .titre-m, body.typo-montserrat .bien__titre, body.typo-montserrat .form__titre, body.typo-montserrat .cal-m__titre { font-weight: 600; letter-spacing: -.015em; }
body.typo-montserrat :is(.formule__taux, .comparatif__taux, .equipe__chiffre strong, .savoir__num, .toit-etapes__grand-num, .simu__valeur input) { font-weight: 500; letter-spacing: -.04em; }
body.typo-montserrat .formule__nom { font-weight: 600; letter-spacing: .12em; font-size: 24px; }
body.typo-montserrat .entete__fantome { font-style: normal; font-weight: 700; letter-spacing: -.04em; }
body.typo-montserrat .script { font-size: 1.42em; }
/* Montserrat n'a pas d'italique auto-hébergé : rien ne penche artificiellement. */
body.typo-montserrat :is(.bandeau, .bandeau *, .c-dep-nom, .engagement__index li, .hero__badge-texte, .hero__badge-texte *) { font-style: normal; }
body.typo-montserrat .bandeau__piste { font-weight: 500; letter-spacing: -.02em; }

/* Portraits d'À propos : tête entière sous le toit (Thomas, 21/10/2026). Cadrage par portrait (champ « Cadrage ») :
   zoom autour d'un point fixe ; pas de Ken Burns, son zoom recoupait le haut de la tête. */
.portrait__photo .forme-maison__img img { animation: none; object-position: 50% 0; transform: scale(var(--z, 1)); transform-origin: var(--ox, 50%) var(--oy, 0%); }

/* Trois logements depuis le 21/10/2026 (studio Le Cocon Vert) : trois colonnes sur grand écran ;
   entre 981 et 1180 px, deux colonnes et la dernière carte impaire centrée (jamais un trou à droite). */
@media (min-width: 1181px) {
  .biens:has(> :nth-child(3):last-child), .maisons-apercu__liste:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .biens > :last-child:nth-child(odd), .maisons-apercu__liste > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(10px, 1.2vw, 18px)); }
}

/* Galerie des cartes : hauteur tenue par le ratio, une photo en portrait (studio) ne l'agrandit plus. */
.bien__galerie { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.bien__vignette { min-height: 0; }
.bien__vignette img { position: absolute; inset: 0; }

/* ---------- Carrousel des logements (Thomas, 21/10/2026) ----------
   Cartes toujours entières, jamais coupées au bord (consigne de Thomas) : deux visibles sur grand écran, une sur
   mobile. Accrochage carte par carte, ascenseur masqué (les flèches et la barre le remplacent). */
.carrousel { --vues: 2; --ecart: clamp(18px, 2.2vw, 32px); }
.carrousel .biens { display: flex; gap: var(--ecart); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; align-items: start; padding-bottom: 6px; cursor: grab; }
.carrousel .biens::-webkit-scrollbar { display: none; }
.carrousel .biens.is-tire { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carrousel .biens.is-tire * { pointer-events: none; }
.carrousel .biens:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 4px; }
.carrousel .bien { flex: 0 0 calc((100% - (var(--vues) - 1) * var(--ecart)) / var(--vues)); scroll-snap-align: start; }
.carrousel__pied { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(24px, 3vw, 40px); }
.carrousel__compteur { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: .08em; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.carrousel__compteur b { color: var(--nuit); font-size: 20px; }
.carrousel__barre { position: relative; height: 1px; background: var(--filet); }
.carrousel__barre > span { position: absolute; left: 0; top: -1px; height: 3px; width: 50%; border-radius: 3px; background: var(--or-degrade); transition: width .4s var(--courbe); }
.carrousel__fleches { display: flex; gap: 10px; }
.carrousel__fleche { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--nuit) 18%, transparent); background: var(--blanc); color: var(--nuit); cursor: pointer; transition: background .35s, color .35s, border-color .35s, opacity .3s, transform .45s var(--courbe); }
.carrousel__fleche .ico { width: 20px; height: 20px; }
.carrousel__fleche:hover:not(:disabled) { background: var(--nuit); border-color: var(--nuit); color: var(--or-1); }
.carrousel__fleche[data-carrousel-pas="1"]:hover:not(:disabled) { transform: translateX(3px); }
.carrousel__fleche[data-carrousel-pas="-1"]:hover:not(:disabled) { transform: translateX(-3px); }
.carrousel__fleche:disabled { opacity: .32; cursor: default; }
.carrousel.is-statique .carrousel__pied { display: none; }
@media (max-width: 760px) { .carrousel { --vues: 1; } .carrousel__fleche { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .carrousel__barre > span { transition: none; } }

/* ---------- Pages de ville (21/10/2026) : contenu local sous le formulaire ---------- */
.ville-local__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ville-local__texte p:not([class]), .ville-local__texte p.rv { color: var(--texte-2); margin: 0 0 18px; }
.ville-local__reperes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 36px); }
.repere { padding: 26px 0 24px; border-top: 1px solid var(--filet); }
.repere__num { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--or-fonce); }
.repere__titre { margin: 0 0 8px; font-family: var(--f-titre); font-size: var(--t-s); font-weight: 600; line-height: 1.3; color: var(--nuit); }
.repere p { margin: 0; font-size: 15.5px; color: var(--texte-2); }
@media (max-width: 980px) { .ville-local__grille { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ville-local__reperes { grid-template-columns: 1fr; } }
.zone__villes a { color: inherit; text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .3s; }
.zone__villes a:hover { color: var(--or-fonce); }

/* Case à cocher : la première ligne du texte centrée sur la case (Thomas, 21/10/2026). 26 px de case,
   ligne de 1.5em : le texte descend de la moitié de l'écart, quelle que soit la taille de police. */
.coche > span { padding-top: calc((26px - 1.5em) / 2); }

/* Carrousel, retour de Thomas du 21/10/2026 (après « ne coupe pas la card ») : les cartes restent alignées sur le
   contenu, mais la piste file jusqu'au bord droit de l'ÉCRAN, si bien que la carte suivante dépasse dans la marge
   et annonce la suite. Largeur des cartes calculée sur le contenu (unités de conteneur), pas sur la piste. */
.carrousel { container-type: inline-size; }
.carrousel .biens { margin-right: calc(50cqw - 50vw); padding-right: calc(50vw - 50cqw); scroll-padding-right: calc(50vw - 50cqw); }
.carrousel .bien { flex-basis: calc((100cqw - (var(--vues) - 1) * var(--ecart)) / var(--vues)); }
/* La carte suivante dépasse d'environ 60 px dans l'écran : les cartes entières cèdent --debord à la suivante. */
.carrousel { --debord: 48px; }
.carrousel .bien { flex-basis: calc((100cqw - (var(--vues) - 1) * var(--ecart) - var(--debord)) / var(--vues)); }

/* Listes dessinées : l'exemple (option vide) reste dans le champ, jamais dans la liste déroulée (Thomas, 21/10/2026). */
.liste__options li.is-vide { display: none; }

/* Pages de ville : repères en cartes photo (arche du logo, numéro en or, crédit), blocs SEO (Thomas, 21/10/2026). */
.ville-local__grille { align-items: center; }
.ville-local__reperes { gap: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 36px); }
.repere--photo { padding: 0; border-top: 0; }
.repere__photo { position: relative; margin: 0 0 22px; }
.repere__arche { display: block; aspect-ratio: 4 / 4.3; border-radius: 999px 999px var(--r-carte) var(--r-carte); overflow: hidden; position: relative; background: var(--pierre); }
.repere__arche::after { content: ''; position: absolute; inset: 10px; border-radius: inherit; border: 1px solid rgba(250, 235, 125, .75); pointer-events: none; }
.repere__arche img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.repere--photo:hover .repere__arche img { transform: scale(1.05); }
.repere--photo .repere__num { position: absolute; left: 50%; bottom: -16px; translate: -50% 0; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; border-radius: 50%; background: var(--nuit); color: var(--or-1); font-size: 12.5px; letter-spacing: .08em; box-shadow: 0 0 0 5px var(--creme); }
.repere__credit { position: absolute; right: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 3px 9px; border-radius: 99px; background: rgba(35, 31, 32, .55); color: rgba(255, 253, 249, .9); font-size: 10.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(3px); }
.repere__credit a { color: inherit; text-decoration: none; }
.repere--photo .repere__titre { margin-top: 30px; text-align: center; }
.repere--photo p { text-align: center; }

.ville-seo__blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.ville-seo__bloc { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-bloc); background: var(--creme); }
.ville-seo__toit { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--or) 60%, transparent); color: var(--or-fonce); }
.ville-seo__toit .ico { width: 22px; height: 22px; }
.ville-seo__titre { margin: 0 0 14px; font-family: var(--f-titre); font-size: var(--t-m); font-weight: 600; line-height: 1.25; color: var(--nuit); }
.ville-seo__bloc p { margin: 0 0 12px; font-size: 16px; color: var(--texte-2); }
.ville-seo__bloc p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .ville-seo__blocs { grid-template-columns: 1fr; } }
/* Crédit sous le texte (il chevauchait la pastille du numéro) ; colonne de texte accrochée en haut. */
.repere__credit { position: static; max-width: none; margin: 10px 0 0 !important; padding: 0; border-radius: 0; background: none; backdrop-filter: none; color: color-mix(in srgb, var(--texte-2) 70%, transparent) !important; font-size: 11px !important; text-align: center; white-space: normal; }
.repere__credit a:hover { text-decoration: underline; }
.ville-local__grille { align-items: start; }
.ville-local__texte { position: sticky; top: 120px; }
@media (max-width: 980px) { .ville-local__texte { position: static; } }
/* Nombre impair de repères : la dernière carte se centre sous les autres (jamais de trou à droite). */
@media (min-width: 641px) { .ville-local__reperes > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(10px, 1.3vw, 18px)); } }
/* « Ne coupe pas à gauche » (Thomas, 21/10/2026) : la piste file aussi jusqu'au bord GAUCHE de l'écran ; une carte
   qui sort en défilant disparaît par le bord de l'écran, jamais tranchée au bord du contenu. Au repos, la première
   carte reste alignée sur le contenu (padding + scroll-padding de la même valeur). */
.carrousel .biens { margin-left: calc(50cqw - 50vw); padding-left: calc(50vw - 50cqw); scroll-padding-left: calc(50vw - 50cqw); }
/* Sans compteur (Thomas, 21/10/2026) : la barre de progression et les flèches suffisent. */
.carrousel__pied { grid-template-columns: minmax(0, 1fr) auto; }

/* Case ALTCHA alignée sur nos cases (Thomas, 21/10/2026 : « alignement toujours non centré ») : même écart de 12 px,
   conteneur de la case à la hauteur de la case (le widget lui laissait une hauteur propre qui remontait le texte),
   texte centré sur la case. */
.cf-altcha .altcha-checkbox-wrap { display: flex; align-items: center; gap: 12px; }
.cf-altcha .altcha-checkbox { display: flex; align-items: center; height: 26px; margin: 0; padding: 0; line-height: 0; }
.cf-altcha label { margin: 0; padding: 0; line-height: 1.5; display: block; }
.cf-altcha .altcha-checkbox { width: 26px; flex: none; }