/* ══ ÉDITO FLETCHY ══
   Couche des pages institutionnelles : /services, /a-propos, /nos-biens,
   /tarifs, /contact, /carte-cadeau-verlac, puis, en typographie seule, les
   cinq pages légales et 404.html. Chargée après style.css, jamais avec
   bali.css ni immersion.css.
   Langage de L’Écrin Balinais et de l’accueil — Fraunces, ivoire, or mesuré,
   filets fins, numéros de chapitre — sans ce qui appartient à un bien : ni
   voilage, ni alternance nuit / jour, ni scène épinglée. Fond clair ivoire,
   une seule bande sombre avant le pied de page, sauf sur /nos-biens (voir
   sa section).
   Aucun état masqué propre : les révélations sont celles de main.js
   (.reveal), déjà rendues visibles sans JavaScript par style.css. */

/* ══ JETONS ══
   Contrastes mesurés sur ivoire puis sable : encre 15,6 / 13,9:1,
   --e-encre-2 6,8 / 6:1, --e-or 5,3 / 4,7:1. Sur la nuit : ivoire 16,6:1,
   or Fletchy 8,6:1. L’or Fletchy n’est jamais posé en texte sur fond clair. */
.edito-page{
  --e-ivoire:#f4f1ea;
  --e-sable:#ece4d6;
  --e-encre:#1d1814;
  --e-encre-2:#5b524b;
  --e-or:#7d5e2b;
  --e-nuit:#110d0b;
  --e-ivoire-nuit:#f4ede3;
  --e-ivoire-nuit-2:#b9b3ab;
  --e-line:rgba(29,24,20,.14);
  --e-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --e-gutter:clamp(20px,5.5vw,88px);
  --e-wrap:min(1240px,calc(100% - 2 * var(--e-gutter)));
  background:var(--e-ivoire);
  color:var(--e-encre);
}
.edito-page em{font-style:italic;color:inherit}
.ed-wrap{width:var(--e-wrap);margin-inline:auto}

/* Navigation : la barre claire prend l’ivoire de la page, presque opaque pour
   rester lisible au-dessus de la bande sombre. Sur ordinateur, la page en cours
   passe à l’or assombri (l’or Fletchy y plafonne à 2:1) ; le menu mobile, sombre,
   garde l’or Fletchy. */
.edito-page #nav.scrolled{background:rgba(244,241,234,.94);border-bottom-color:var(--e-line)}
@media(min-width:769px){
  .edito-page #nav.scrolled .nav-links a.nav-active,.edito-page #nav.scrolled .nav-links a.nav-active-parent{color:var(--e-or)!important}
  .edito-page #nav.scrolled .nav-links a.nav-active::after{background:var(--e-or)}
  /* Survol : l’or assombri, là où l’or Fletchy tombe à 2:1 sur l’ivoire et le blanc du menu déroulant. */
  .edito-page #nav.scrolled .nav-links>li>a:not(.nav-escape):not(.nav-cta):hover,.edito-page #nav .dropdown a:hover{color:var(--e-or)}
}
/* Anneau de focus : l’or Fletchy passe sous 3:1 sur l’ivoire et le sable. */
.edito-page main :focus-visible{outline-color:var(--e-or)}

/* ══ TYPOGRAPHIE ══ */
.ed-eyebrow{display:flex;align-items:center;gap:14px;font:600 11px/1.5 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--e-or);margin:0 0 26px}
.ed-eyebrow::before{content:'';flex:none;align-self:flex-start;width:32px;height:1px;margin-top:calc(.75em - .5px);background:currentColor;opacity:.6}
.ed-eyebrow{text-wrap:balance}
.ed-h1{font-family:var(--e-serif);font-weight:400;font-size:clamp(46px,6.4vw,104px);line-height:.98;letter-spacing:-.035em;color:var(--e-encre);margin:0}
.ed-h2{font-family:var(--e-serif);font-weight:400;font-size:clamp(38px,4.8vw,72px);line-height:1.02;letter-spacing:-.03em;color:var(--e-encre);margin:0}
.ed-h1 em,.ed-h2 em{color:var(--e-or)}
/* L’italique or reste d’un seul tenant, et aucun titre ne laisse un mot seul sur sa ligne. */
.ed-h1 em,.ed-h2 em,.edito-page .cta-strip .h2 em{display:inline-block}
.ed-h1,.ed-h2,.ed-h3,.edito-page .cta-strip .h2,.edito-page .cta-strip .eyebrow{text-wrap:balance}
.ed-h3{font-family:var(--e-serif);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.12;letter-spacing:-.02em;color:var(--e-encre);margin:0}
.ed-lead{font-size:clamp(17px,1.4vw,19px);line-height:1.7;color:var(--e-encre-2);max-width:34em;margin:0}
.ed-text{font-size:16px;line-height:1.75;color:var(--e-encre-2);margin:0}

/* Boutons sur fond clair : encre pleine, puis contour encre. */
.edito-page .btn-dark{background:var(--e-encre);color:var(--e-ivoire)}
.edito-page .btn-dark:hover{background:#3a312a}
.edito-page .btn-outline{border-color:var(--e-encre);color:var(--e-encre)}
.edito-page .btn-outline:hover{background:var(--e-encre);color:var(--e-ivoire)}
.edito-page .btn-gold{color:var(--e-nuit)}
.edito-page .btn-gold:hover{background:var(--gold-light);color:var(--e-nuit)}
/* Tous les boutons à la même hauteur, pleins ou à contour, et aucun ne se soulève au survol. */
.edito-page :is(.btn-dark,.btn-gold){border:1px solid transparent}
.edito-page :is(.btn,.btn-submit):hover{transform:none;box-shadow:none}

/* ══ OUVERTURE ══
   Titre et chapeau à gauche ; à droite, la photo entière à son ratio, alignée
   sur le haut du titre et à fleur du bord de l’écran. Le filet qui clôt
   l’ouverture s’arrête aux bords de la grille, comme tous ceux de la page. */
.ed-hero{padding-top:calc(var(--nav-h) + clamp(56px,10vh,120px));overflow-x:clip}
.ed-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;padding-bottom:clamp(72px,11vh,128px);border-bottom:1px solid var(--e-line)}
.ed-hero .ed-lead{margin-top:clamp(24px,3vh,36px)}
.ed-hero .ed-photo{margin:calc(16.5px + 26px) calc(-1 * max(var(--e-gutter),(100vw - 1240px) / 2)) 0 0}
.ed-photo{margin:0}
.ed-photo img{display:block;width:100%;height:auto}
/* Ouverture sans photo : le titre seul, sur la largeur de la grille. */
.ed-hero--solo .ed-hero-grid{grid-template-columns:minmax(0,1fr)}
.ed-hero--solo .ed-h1{max-width:15ch}
/* Sur /tarifs et /nos-biens, sur grand écran, le chapeau passe dans la
   colonne de droite, son bas aligné sur celui du titre, comme les en-têtes
   de section. */
@media(min-width:769px){
  .edito-page :is(.tf-hero,.nb-hero) .ed-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);row-gap:0;align-items:end}
  .edito-page :is(.tf-hero,.nb-hero) .ed-hero-grid>div{display:contents}
  .edito-page :is(.tf-hero,.nb-hero) :is(.ed-eyebrow,.ed-h1){grid-column:1}
  .edito-page :is(.tf-hero,.nb-hero) .ed-lead{grid-column:2;grid-row:2;margin-top:0}
}

/* Classes de style.css encore présentes dans le contenu : elles prennent la
   charte, pour qu’aucun reste ne retombe sur l’or Fletchy ou l’encre grise. */
.edito-page main .eyebrow{color:var(--e-or)}
.edito-page main .body-text{color:var(--e-encre-2)}
.edito-page main .h2,.edito-page main .h3{font-family:var(--e-serif);font-weight:400;letter-spacing:-.025em;color:var(--e-encre)}

/* ══ SECTIONS ══ */
.ed-sec{padding:clamp(88px,14vh,160px) 0}
.ed-sec--sable{background:var(--e-sable)}
.ed-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(48px,8vh,88px)}

/* ══ ÉTAPES ══
   Chaque étape est un chapitre : numéro, titre, puis le détail, séparés par
   des filets fins comme les équipements de L’Écrin Balinais. Même grille que
   l’ouverture, et numéro, titre et texte sur une même ligne de base. Le numéro
   fait partie du titre : les lecteurs d’écran l’annoncent. */
.ed-steps{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--e-line)}
.ed-step{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);align-items:baseline;padding:clamp(32px,5vh,52px) 0;border-top:1px solid var(--e-line)}
.ed-step .ed-h3{display:grid;grid-template-columns:clamp(72px,9vw,140px) minmax(0,1fr);column-gap:clamp(20px,4vw,64px);align-items:baseline}
.ed-step-num{font-family:var(--e-serif);font-style:italic;font-weight:400;font-variant-numeric:tabular-nums;font-size:clamp(40px,4.4vw,68px);line-height:.9;letter-spacing:-.03em;color:var(--e-or)}
.ed-step-body ul{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.ed-step-body li{display:flex;gap:12px;font-size:14px;line-height:1.5;color:var(--e-encre)}
.ed-step-body li::before{content:'';flex:none;width:14px;height:1px;margin-top:.75em;background:var(--e-or)}

/* ══ PROPRIÉTAIRES ══ */
.ed-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.ed-split .ed-photo{max-width:460px}
.ed-split .ed-text{margin:24px 0 36px;max-width:30em}
.ed-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ══ BANDE FINALE ══
   La seule bande sombre de la page : nuit brun-noir de L’Écrin Balinais,
   à 78 % de l’écran comme le final des fiches. */
.edito-page .cta-strip{background:var(--e-nuit);border-top:0;padding:clamp(96px,16vh,168px) var(--e-gutter);min-height:min(78vh,760px);display:grid;grid-template-columns:minmax(0,1fr);place-content:center}
.edito-page .cta-strip .eyebrow{display:flex;justify-content:center;align-items:center;gap:14px;font-size:11px;letter-spacing:.24em;margin-bottom:26px}
.edito-page .cta-strip .eyebrow::before,.edito-page .cta-strip .eyebrow::after{content:'';flex:none;width:32px;height:1px;background:currentColor;opacity:.6}
.edito-page .cta-strip .h2{font-family:var(--e-serif);font-weight:400;font-size:clamp(42px,6.4vw,100px);line-height:.98;letter-spacing:-.03em;max-width:13ch;margin:0 auto 40px;color:var(--e-ivoire-nuit)}
.edito-page .cta-strip .h2 em{color:var(--gold)}

/* Barre de progression or et bouton de retour en haut : restes de l’ancien
   design sur deux pages seulement, le second glissé sous la bulle de contact. */
.edito-page #scroll-progress,.edito-page .back-to-top{display:none}

/* Mouvement réduit : les révélations de main.js ne laissent rien en attente du défilement. */
@media(prefers-reduced-motion:reduce){
  .edito-page .reveal{opacity:1;transform:none}
}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px){
  .ed-step{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .ed-step .ed-h3{grid-template-columns:clamp(64px,10vw,96px) minmax(0,1fr)}
  .ed-step-body{padding-left:calc(clamp(64px,10vw,96px) + clamp(20px,4vw,64px))}
}
@media(max-width:768px){
  .ed-hero-grid,.ed-head,.ed-split{grid-template-columns:1fr}
  .ed-hero{padding-top:calc(var(--nav-h) + 48px)}
  .ed-hero .ed-photo{margin:0}
  .ed-head{gap:20px}
  .ed-step{row-gap:14px}
  .ed-step .ed-h3{grid-template-columns:auto minmax(0,1fr);column-gap:16px}
  .ed-step-num{font-size:36px}
  .ed-step-body{padding-left:0}
  .ed-step-body ul{grid-template-columns:1fr}
  .ed-split .ed-photo{max-width:none}
  .ed-actions .btn{flex:1 1 100%;justify-content:center}
  .edito-page .cta-strip .btn-group{flex-direction:column;align-items:stretch;width:100%;max-width:440px;margin-inline:auto}
  .edito-page .cta-strip .btn{justify-content:center}
}
/* Sur un petit téléphone, le sur-titre de la bande finale passe sous son filet plutôt qu’entre deux filets. */
@media(max-width:560px){
  .edito-page .cta-strip .eyebrow{flex-direction:column;gap:12px;line-height:1.5}
  .edito-page .cta-strip .eyebrow::after{content:none}
}

/* ══════════════════════════════════════════════════════════════════════
   PAGES
   Chaque page a sa section ci-dessous, et seulement les règles qui lui sont
   propres ; tout ce qui sert à plusieurs pages remonte dans les sections
   communes ci-dessus. Les sélecteurs y restent préfixés par .edito-page.
   ══════════════════════════════════════════════════════════════════════ */

/* ── PAGE : SERVICES ─────────────────────────────────────────────────────
   /services — ouverture, étapes et bloc propriétaires suivent les sections
   communes ; seule la sous-location a ses règles. */
/* Sous-location : un en-tête seul dans sa section. Comme « Avant d’offrir »
   de /carte-cadeau-verlac, le titre s’aligne en haut (.ed-head l’aligne en
   bas, et le texte, plus long, le faisait descendre) ; texte et bouton
   passent sous l’axe de droite, leur première ligne à hauteur du titre. Le
   bouton prend l’écart de celui des engagements de /a-propos. Ni marge sous
   l’en-tête, ni marge haute : le filet qui clôt les étapes sépare déjà les
   deux sections, à la même distance que le filet de l’ouverture. */
.edito-page .sv-sous-location{padding-top:0}
.edito-page .sv-sous-location .ed-head{align-items:start;margin-bottom:0}
.edito-page .sv-sous-location-text{padding-top:calc(16.5px + 26px)}
.edito-page .sv-sous-location .ed-actions{margin-top:28px}
@media(max-width:768px){
  .edito-page .sv-sous-location-text{padding-top:0}
}

/* ── PAGE : À PROPOS ─────────────────────────────────────────────────────
   /a-propos — mission, équipe, engagements. */
/* Ouverture sans chapeau : le titre, court, se pose sur la ligne de base de
   la photo au lieu de flotter en haut d’une colonne vide. */
@media(min-width:769px){.edito-page .ap-hero .ed-hero-grid{align-items:end}}
/* Mission : la photo, paysage, prend toute la première colonne ; deux
   paragraphes au lieu d’un. */
.edito-page .ap-mission .ed-photo{max-width:none}
.edito-page .ap-mission .ed-text{margin:0;max-width:30em}
.edito-page .ap-mission .ed-h2+.ed-text{margin-top:24px}
.edito-page .ap-mission .ed-text+.ed-text{margin-top:16px}
.edito-page .ap-mission .ed-actions{margin-top:36px}
/* Équipe, en bande sable : deux portraits entiers à leur ratio, de même
   largeur, le second calé sur l’axe de droite de la page (la première
   colonne fait 1,15 fois la seconde). Nom en Fraunces, rôle en capitales
   or assombri (4,7:1 sur le sable). */
.edito-page .ap-team{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px clamp(32px,6vw,96px);align-items:start}
.edito-page .ap-member:first-child{width:calc(100% / 1.15)}
.edito-page .ap-member .ed-photo{margin-bottom:clamp(24px,3.5vh,32px)}
.edito-page .ap-role{font:600 11px/1.6 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--e-or);margin:12px 0 0}
.edito-page .ap-member .ed-text{margin-top:16px;max-width:32em}
/* Engagements : le chapeau et son bouton, sous l’axe de droite. */
.edito-page .ap-quality .ed-actions{margin-top:28px}
/* En colonne, le texte de la mission passe avant sa photo : sinon deux vues
   de piscine se suivent, à peine séparées par le filet de l’ouverture. Sans
   axe à droite, les deux portraits se partagent la largeur, puis s’empilent. */
@media(max-width:768px){
  .edito-page .ap-mission .ed-photo{order:1}
  .edito-page .ap-team{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .edito-page .ap-member:first-child{width:auto}
}
@media(max-width:560px){
  .edito-page .ap-team{grid-template-columns:minmax(0,1fr)}
}

/* Mission : sur grand écran, la photo s’aligne sur le haut du titre, comme dans l’ouverture. */
@media(min-width:769px){
  .edito-page .ap-mission .ed-split{align-items:start}
  .edito-page .ap-mission .ed-photo{margin-top:calc(16.5px + 26px)}
}

/* ── PAGE : NOS BIENS ────────────────────────────────────────────────────
   /nos-biens — les sept biens, régénérés par main.js depuis data/biens.json :
   la feuille habille le gabarit de buildBiensGrid, dont la photo est posée
   dans un cadre (span.bien-card-media).
   Seule page édito à porter une seconde bande sombre et des animations
   propres : depuis le 6 novembre 2026, à la demande de l’exploitant, qui la
   voulait aussi premium que l’accueil et les fiches, la liste passe sur la
   nuit de la bande « Nos biens » de l’accueil et des galeries, le fondu de
   main.js la relie à l’ouverture ivoire, et la page s’anime comme les fiches
   (voir « ANIMATIONS » plus bas). */

/* Ouverture sans photo (règle commune avec /tarifs, plus haut) et sans
   filet : le fondu vers la nuit la sépare de la liste. Les deux se
   resserrent, pour que les premières photos paraissent dès le premier écran.
   Le titre est écrit en trois lignes, comme ceux des fiches. */
.edito-page .nb-hero{padding-bottom:clamp(32px,5vh,56px)}
.edito-page .nb-hero .ed-hero-grid{padding-bottom:0;border-bottom:0}
.edito-page .nb-ligne,.edito-page .nb-ligne>*{display:block}
.edito-page .biens-grid-section{background:var(--e-nuit);color:var(--e-ivoire-nuit);padding:clamp(64px,10vh,112px) 0 0}
.edito-page .biens-grid-section .ed-wrap{padding-bottom:clamp(64px,10vh,104px);border-bottom:1px solid rgba(244,237,227,.14)}
/* Le bouton « Réserver » de /nos-biens vise #biensGrid : la liste s’arrête sous la barre de navigation. */
.edito-page #biensGrid{scroll-margin-top:calc(var(--nav-h) + 24px)}
.edito-page .biens-grid-note{margin:0;font-size:13px;line-height:1.6;color:var(--e-ivoire-nuit-2)}
/* Pour les voyageurs, sous la liste : la bande finale s’adresse aux propriétaires. */
.edito-page .nb-voyageurs{margin:clamp(48px,7vh,72px) 0 0;font:400 clamp(24px,2.2vw,32px)/1.3 var(--e-serif);letter-spacing:-.01em;color:var(--e-ivoire-nuit);text-wrap:balance}
.edito-page .nb-voyageurs a{font-style:italic;color:var(--gold);text-decoration:underline 1px;text-underline-offset:.18em;transition:color .3s ease}
.edito-page .nb-voyageurs a:hover{color:var(--gold-light)}
/* Sur la nuit, l’anneau de focus reprend l’or Fletchy (8,6:1). */
.edito-page .biens-grid-section :focus-visible{outline-color:var(--gold)}

/* Sommaire des sept biens, sur grand écran seulement : il occupe la colonne
   de droite de l’ouverture, restée vide au-dessus du chapeau, et mène à
   chaque carte (ancre posée par le gabarit de main.js). Ses numéros
   reprennent ceux des cartes (compteur CSS, tu aux lecteurs d’écran : la
   liste numérotée suffit). À tenir à jour avec le catalogue. */
.edito-page .nb-sommaire{display:none}
@media(min-width:1025px){
  .edito-page .nb-hero .ed-hero-grid{grid-template-rows:auto 1fr auto}
  .edito-page .nb-hero .ed-h1{grid-row:2/4}
  .edito-page .nb-hero .ed-lead{grid-row:3}
  .edito-page .nb-sommaire{display:block;grid-column:2;grid-row:1/3;align-self:start;margin-bottom:clamp(32px,4.5vh,48px)}
  .edito-page .nb-sommaire ol{margin:0;padding:0;list-style:none;columns:2;column-gap:clamp(24px,3vw,48px);counter-reset:nbs}
  .edito-page .nb-sommaire li{break-inside:avoid;counter-increment:nbs;border-top:1px solid var(--e-line)}
  .edito-page .nb-sommaire a{display:flex;align-items:baseline;gap:14px;padding:10px 0;font-size:14px;line-height:1.4;color:var(--e-encre);text-decoration:underline 1px transparent;text-underline-offset:.2em;transition:color .3s ease,text-decoration-color .3s ease}
  .edito-page .nb-sommaire a::before{content:counter(nbs,decimal-leading-zero);content:counter(nbs,decimal-leading-zero) / '';flex:none;min-width:1.5em;font:italic 400 18px/1 var(--e-serif);color:var(--e-or)}
  .edito-page .nb-sommaire a:is(:hover,:focus-visible){color:var(--e-or);text-decoration-color:currentColor}
}

/* Chaque carte : la photo, le nom posé dessus comme sur les cartes de
   l’accueil, puis la légende sur la nuit — numéro et étiquette en or,
   description, pied de carte. Le corps de la carte s’efface (display:
   contents) pour que ses éléments se rangent dans la grille de la carte.
   L’espace entre deux rangées est la marge basse des cartes, hors de leur
   anneau de focus ; au clavier, une carte plus haute que l’écran s’arrête
   sous la barre de navigation. */
.edito-page .biens-full-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(16px,1.8vw,28px);counter-reset:bien}
.edito-page .bien-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr;margin-bottom:clamp(56px,8vh,96px);scroll-margin-top:calc(var(--nav-h) + 16px);background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;color:inherit;counter-increment:bien}
.edito-page .bien-card:hover{transform:none;box-shadow:none}
.edito-page .bien-card-body{display:contents}
/* La photo remplit son cadre, qui la rogne : au survol ou au focus, elle se
   rapproche de 4,5 % sans déborder. */
.edito-page .bien-card-media{grid-area:1/1;position:relative;display:block;overflow:clip}
/* Bien pas encore réservable (champ statut de biens.json : « Prochainement »,
   « Disponible été 2027 », comme sur leurs fiches) : une étiquette en haut de
   la photo, dans son cadre, qui se découvre avec elle. */
.edito-page .bien-card-statut{position:absolute;z-index:2;top:clamp(16px,1.8vw,24px);left:clamp(20px,2.4vw,36px);padding:8px 12px 7px;font:600 11px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--e-ivoire-nuit);background:rgba(17,13,11,.72);border:1px solid rgba(244,237,227,.32)}
.edito-page .bien-card-img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;will-change:auto;transition:transform .9s var(--ease-out-expo)}
.edito-page .bien-card:is(:hover,:focus-visible) .bien-card-img{transform:scale(1.045)}
/* Voile de lecture sous le nom, plus dense en bas, comme sur l’accueil. */
.edito-page .bien-card::after{content:'';grid-area:1/1;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(17,13,11,.9) 0%,rgba(17,13,11,.62) 20%,rgba(17,13,11,.16) 46%,rgba(17,13,11,0) 62%)}
.edito-page .bien-card-body h3{grid-area:1/1;align-self:end;z-index:2;margin:0;padding:0 clamp(20px,2.4vw,36px) clamp(20px,2.2vw,32px);font-family:var(--e-serif);font-weight:400;font-size:clamp(30px,2.6vw,42px);line-height:1.04;letter-spacing:-.025em;color:var(--e-ivoire-nuit);text-wrap:balance;text-shadow:0 1px 24px rgba(17,13,11,.45);text-decoration:underline 1px transparent;text-underline-offset:.14em;transition:text-decoration-color .4s ease}
.edito-page .bien-card:is(:hover,:focus-visible) .bien-card-body h3{text-decoration-color:var(--gold)}
/* Numéro de la carte (compteur CSS, tu aux lecteurs d’écran), filet, puis l’étiquette. */
.edito-page .bien-card-tag{grid-row:2;display:flex;align-items:baseline;margin:26px 0 0;font:600 11px/1.6 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.edito-page .bien-card-tag::before{content:counter(bien,decimal-leading-zero);content:counter(bien,decimal-leading-zero) / '';order:-2;flex:none;align-self:center;font:italic 400 26px/1 var(--e-serif);letter-spacing:0}
.edito-page .bien-card-tag::after{content:'';order:-1;flex:none;align-self:center;width:32px;height:1px;margin:0 14px 0 12px;background:rgba(201,169,110,.6);transform-origin:left center}
.edito-page .bien-card-body p:not(.bien-card-tag){grid-row:3;max-width:36em;margin:14px 0 0;font-size:15px;line-height:1.7;color:var(--e-ivoire-nuit-2)}
/* Pied de carte, empilé à gauche dans toutes les cartes : le lieu, le lien,
   puis le numéro d’enregistrement du meublé (champ numeroEnregistrement de
   biens.json). Dans une rangée, « Voir le bien » est ainsi à la même place
   d’une carte à l’autre ; il passait à droite dans une grande carte et sous
   le lieu dans l’étroite voisine. Son filet est un fond, pour pouvoir se
   tracer. */
.edito-page .bien-card-footer{grid-row:4;align-self:end;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-top:24px;padding-top:16px;border-top:0;background:linear-gradient(rgba(244,237,227,.16),rgba(244,237,227,.16)) left top/100% 1px no-repeat}
.edito-page .bien-card-loc{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--e-ivoire-nuit-2)}
.edito-page .bien-card-reg{order:1;flex-basis:100%;font-size:12px;letter-spacing:.02em;color:var(--e-ivoire-nuit-2)}
.edito-page .bien-card-btn{flex-basis:100%;margin-left:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--e-ivoire-nuit);gap:8px;transition:color .3s ease}
.edito-page .bien-card:is(:hover,:focus-visible) .bien-card-btn{color:var(--gold)}
.edito-page .bien-card-btn svg{transition:transform .4s var(--ease-out-expo)}
.edito-page .bien-card:is(:hover,:focus-visible) .bien-card-btn svg{transform:translateX(4px)}
/* Bien en construction : bandeau nuit en haut de la photo (lignes de début
   et de fin explicites : pour un élément positionné, « auto » vaudrait le
   bord de la carte). */
.edito-page .bien-card-construction{grid-area:1/1/2/2;z-index:3;background:rgba(17,13,11,.8);color:var(--e-ivoire-nuit);border-color:rgba(244,237,227,.3);font-size:11px;letter-spacing:.18em}

/* Dès deux colonnes, les cartes d’une même rangée partagent ses lignes
   (subgrid) : photo, étiquette, description et pied de carte commencent à
   la même hauteur, une seule ligne de base comme dans le reste de la couche ;
   le numéro d’enregistrement pend sous le filet du pied. */
@media(min-width:769px){
  .edito-page .bien-card{grid-row:span 4;grid-template-rows:subgrid}
  .edito-page .bien-card-footer{align-self:start}
}
/* Grand écran : mosaïque de deux, trois, puis deux biens par rangée — une
   grande photo et une étroite, trois moyennes, puis l’inverse de la première
   rangée. La hauteur des photos est celle de la piste de leur rangée (--h1,
   --h2) ; le motif se répète tous les sept biens. --d décale l’entrée des
   cartes de gauche à droite dans chaque rangée. */
@media(min-width:1025px){
  .edito-page .biens-full-grid{--h1:clamp(400px,37vw,540px);--h2:clamp(340px,29vw,430px);grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:var(--h1) auto auto auto var(--h2) auto auto auto var(--h1) auto auto auto}
  .edito-page .bien-card{grid-column:span 2}
  .edito-page .bien-card:is(:nth-child(7n+1),:nth-child(7n)){grid-column:span 4}
  .edito-page .bien-card:is(:nth-child(7n+1),:nth-child(7n)) .bien-card-body h3{font-size:clamp(36px,3.6vw,58px)}
  .edito-page .bien-card:is(:nth-child(7n+2),:nth-child(7n+4),:nth-child(7n)){--d:.1s}
  .edito-page .bien-card:nth-child(7n+5){--d:.2s}
}
/* Tablette : le premier bien sur toute la largeur, puis deux par rangée,
   photos au 4/5 ; téléphone : une colonne. */
@media(max-width:1024px){
  .edito-page .bien-card-media{aspect-ratio:4/5}
}
@media(min-width:769px) and (max-width:1024px){
  .edito-page .biens-full-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .edito-page .bien-card:nth-child(7n+1){grid-column:1/-1}
  .edito-page .bien-card:nth-child(7n+1) .bien-card-media{aspect-ratio:3/2}
  .edito-page .bien-card:nth-child(2n+3){--d:.1s}
  /* Le minimum du clamp (30 px) laissait les noms plus petits que sur
     téléphone (32 px), même sur la photo pleine largeur. */
  .edito-page .bien-card-body h3{font-size:34px}
  .edito-page .bien-card:nth-child(7n+1) .bien-card-body h3{font-size:clamp(40px,5vw,48px)}
}
@media(max-width:768px){
  .edito-page .bien-card-body h3{font-size:32px;padding:0 20px 20px}
  .edito-page .bien-card-tag{margin-top:22px;letter-spacing:.16em}
  .edito-page .bien-card-tag::after{width:24px;margin:0 12px 0 10px}
}

/* ══ ANIMATIONS ══
   Le vocabulaire des fiches et de l’accueil, rien de ce qui appartient à un
   bien (ni voilage, ni motif d’ouverture, ni scène épinglée) :
   - ouverture : le sur-titre paraît et son filet se trace, le titre se lève
     ligne à ligne (comme .hero-line sur les fiches), puis le chapeau ;
   - cartes : la photo se découvre par un rideau qui remonte, comme dans les
     galeries des fiches, et se pose (elle part agrandie) ; le nom monte, puis
     le numéro, le filet or qui se trace, l’étiquette, la description et le
     pied, dont le filet se trace aussi ; de gauche à droite dans la rangée
     (--d) ;
   - au défilement, la photo glisse de ± 3,5 % dans son cadre (parallaxe en
     CSS, animation-timeline: view(), là où le navigateur la connaît ; elle
     est alors agrandie de 8 % pour ne jamais découvrir le bord du cadre).
   Tout attend html.voile-leve, posée par main.js quand le voile d’arrivée se
   retire (au chargement, ou au bout de 2 s) : l’ouverture se joue sous les
   yeux du visiteur, pas sous le voile. Les cartes attendent en plus .vis,
   leur révélation par main.js ; elles ne fondent plus d’un bloc.
   Jamais sans JavaScript ni en mouvement réduit : sans ces requêtes, aucun
   état masqué, rien ne bouge. */
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  .edito-page .nb-hero .ed-eyebrow{opacity:0;translate:0 12px;transition:opacity .9s ease,translate 1.2s var(--ease-out-expo)}
  .edito-page .nb-hero .ed-eyebrow::before{scale:0 1;transform-origin:left center;transition:scale 1.1s var(--ease-out-expo) .15s}
  /* Chaque ligne masque ce qui passe sous sa base, et rien d’autre (accents,
     italique) : la ligne monte de sous la base. */
  .edito-page .nb-ligne{clip-path:inset(-1em -1em 0 -1em)}
  .edito-page .nb-ligne>*{translate:0 110%;transition:translate 1.4s var(--ease-out-expo) .12s}
  .edito-page .nb-ligne+.nb-ligne>*{transition-delay:.26s}
  .edito-page .nb-ligne+.nb-ligne+.nb-ligne>*{transition-delay:.4s}
  .edito-page .nb-hero .ed-lead{opacity:0;translate:0 16px;transition:opacity 1s ease .62s,translate 1.2s var(--ease-out-expo) .62s}
  .voile-leve .edito-page .nb-hero :is(.ed-eyebrow,.ed-lead){opacity:1;translate:0 0}
  .voile-leve .edito-page .nb-hero .ed-eyebrow::before{scale:1 1}
  .voile-leve .edito-page .nb-ligne>*{translate:0 0}

  /* Sommaire (grand écran) : après le titre et le chapeau. */
  .edito-page .nb-sommaire{opacity:0;translate:0 12px;transition:opacity 1s ease .78s,translate 1.2s var(--ease-out-expo) .78s}
  .voile-leve .edito-page .nb-sommaire{opacity:1;translate:0 0}

  .edito-page .bien-card{--d:0s}
  /* À l’ouverture, le titre passe d’abord : la première rangée attend
     0,45 s (l’œil allait aux rideaux blancs avant de lire le titre). */
  .edito-page .bien-card:first-child{--d:.45s}
  @media(min-width:1025px){
    .edito-page .bien-card:nth-child(2){--d:.55s}
  }
  .edito-page .bien-card.reveal{opacity:1;transform:none}
  .edito-page .bien-card-media{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease-out-expo) var(--d)}
  .edito-page .bien-card-img{scale:calc(var(--nb-s,1) + .08);transition:scale 2.2s var(--ease-out-expo) var(--d),transform .9s var(--ease-out-expo)}
  /* La légende suit le rideau de près : le nom dès que le bas de la photo
     est découvert, puis le reste par pas d’environ 60 ms. Elle attendait la
     fin du rideau (description lisible 1,4 à 1,7 s après l’entrée de la
     rangée). */
  .edito-page .bien-card-body h3{opacity:0;translate:0 .4em;transition:opacity .6s ease-out calc(var(--d) + .25s),translate 1.1s var(--ease-out-expo) calc(var(--d) + .25s),text-decoration-color .4s ease}
  .edito-page .bien-card-tag{opacity:0;translate:0 10px;transition:opacity .5s ease-out calc(var(--d) + .32s),translate .9s var(--ease-out-expo) calc(var(--d) + .32s)}
  .edito-page .bien-card-tag::before{translate:0 45%;transition:translate .9s var(--ease-out-expo) calc(var(--d) + .32s)}
  .edito-page .bien-card-tag::after{scale:0 1;transition:scale .9s var(--ease-out-expo) calc(var(--d) + .45s)}
  .edito-page .bien-card-body p:not(.bien-card-tag){opacity:0;translate:0 10px;transition:opacity .5s ease-out calc(var(--d) + .38s),translate .9s var(--ease-out-expo) calc(var(--d) + .38s)}
  .edito-page .bien-card-footer{opacity:0;translate:0 10px;background-size:0 1px;transition:opacity .5s ease-out calc(var(--d) + .44s),translate .9s var(--ease-out-expo) calc(var(--d) + .44s),background-size 1.2s var(--ease-out-expo) calc(var(--d) + .48s)}
  .voile-leve .edito-page .bien-card.vis .bien-card-media{clip-path:inset(0)}
  .voile-leve .edito-page .bien-card.vis .bien-card-img{scale:var(--nb-s,1)}
  .voile-leve .edito-page .bien-card.vis :is(h3,p,.bien-card-footer){opacity:1;translate:0 0}
  .voile-leve .edito-page .bien-card.vis .bien-card-tag::before{translate:0 0}
  .voile-leve .edito-page .bien-card.vis .bien-card-tag::after{scale:1 1}
  .voile-leve .edito-page .bien-card.vis .bien-card-footer{background-size:100% 1px}
  @supports (animation-timeline:view()){
    .edito-page .bien-card{--nb-s:1.08}
    .edito-page .bien-card-img{animation:nb-derive linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes nb-derive{from{translate:0 -3.5%}to{translate:0 3.5%}}
@media(prefers-reduced-motion:reduce){
  .edito-page .bien-card:is(:hover,:focus-visible) .bien-card-img{transform:none}
}

/* ── PAGE : TARIFS ───────────────────────────────────────────────────────
   /tarifs — deux formules, questions fréquentes. */
/* Les deux formules, en tableau éditorial posé sur le filet de l’ouverture :
   mêmes colonnes que la page (1,15 / 1), la formule mise en avant dans la
   colonne de droite, sur un aplat sable bordé d’or assombri qui recouvre les
   filets du tableau. Les deux colonnes partagent leurs rangées (subgrid) :
   libellés, taux, listes et notes restent alignés d’une colonne à l’autre.
   Contrastes : encre-2 6,8 / 6:1, or assombri 5,3 / 4,7:1 (ivoire / sable). */
.edito-page .tf-table{--tf-pt:clamp(36px,5.5vh,56px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:repeat(5,auto);column-gap:clamp(32px,6vw,96px);border-bottom:1px solid var(--e-line)}
.edito-page .tf-col{grid-row:span 5;display:grid;grid-template-rows:subgrid;align-content:start;padding:var(--tf-pt) 0 clamp(40px,6vh,64px)}
/* Le filet or de 2 px recouvre celui de l’ouverture : 1 px de moins en haut. */
.edito-page .tf-col--featured{background:var(--e-sable);border-top:2px solid var(--e-or);margin:-1px 0;padding:calc(var(--tf-pt) - 1px) clamp(24px,3.2vw,48px) clamp(40px,6vh,64px)}
.edito-page .tf-label{font:600 11px/1.5 'Inter',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--e-encre-2);margin:0}
.edito-page .tf-col--featured .tf-label{color:var(--e-or)}
.edito-page .tf-pct{font-family:var(--e-serif);font-weight:400;font-size:clamp(104px,12vw,172px);line-height:.8;letter-spacing:-.05em;color:var(--e-encre);margin:clamp(22px,3.5vh,36px) 0 clamp(26px,4vh,40px)}
.edito-page .tf-unit{font-style:italic;font-size:.36em;letter-spacing:0;color:var(--e-or);margin-left:.1em}
.edito-page .tf-desc{font-size:15px;line-height:1.65;color:var(--e-encre-2);max-width:30em;margin:0}
.edito-page .tf-includes{list-style:none;margin:clamp(28px,4vh,40px) 0 0;padding:0;border-bottom:1px solid var(--e-line)}
.edito-page .tf-includes li{font-size:15px;line-height:1.5;color:var(--e-encre);padding:12px 0;border-top:1px solid var(--e-line)}
.edito-page .tf-note{font-family:var(--e-serif);font-style:italic;font-size:17px;line-height:1.45;color:var(--e-encre-2);margin:24px 0 0}
.edito-page .tf-after{max-width:36em;margin-top:clamp(32px,5vh,48px)}
/* Compris dans la commission (#compris, fiche offre § 1.3) : la liste reprend
   les filets de .tf-includes, sur l’axe de droite comme la FAQ. */
.edito-page .tf-compris .tf-includes{margin-top:0}
/* Questions fréquentes : le titre à gauche, les questions sur l’axe de
   droite, séparées par des filets ; questions en Fraunces, signe +/− en or
   assombri. Le balisage et le pilotage (toggleFaq de main.js) ne changent pas. */
.edito-page .tf-faq-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.edito-page .tf-faq .faq-list{max-width:none;margin:0;border-bottom:1px solid var(--e-line)}
.edito-page .tf-faq .faq-item{border-top:1px solid var(--e-line);padding:24px 0}
/* La question reste un bloc de texte (les taux y sont des <span> insécables,
   qu’une boîte flexible rangerait en colonnes) ; le signe se cale à droite,
   centré sur la première ligne. */
.edito-page .tf-faq .faq-q{display:block;position:relative;padding-right:44px;font-family:var(--e-serif);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.3;letter-spacing:-.015em;color:var(--e-encre);text-wrap:balance;transition:color .2s}
.edito-page .tf-faq .faq-item:hover .faq-q{color:var(--e-or)}
.edito-page .tf-faq .faq-plus{position:absolute;right:0;top:calc((1.3em - 16px) / 2);width:16px;height:16px;color:var(--e-or)}
.edito-page .tf-faq .faq-a{font-size:16px;line-height:1.7;color:var(--e-encre-2);max-width:34em;padding-right:40px}
.edito-page .tf-faq .faq-item.open .faq-a{padding-top:14px}
/* Un taux ne se coupe jamais entre son nombre et « % ». */
.edito-page .tf-nw{white-space:nowrap}
/* Exemple chiffré : la base de commission (montant du séjour moins le ménage
   engagé), puis la commission et le revenu, en chiffres tabulaires alignés. */
.edito-page .tf-ex-intro{max-width:30em;margin-top:clamp(18px,3vh,28px)}
.edito-page .tf-calc{margin:0;border-bottom:1px solid var(--e-line)}
.edito-page .tf-calc>div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 0;border-top:1px solid var(--e-line)}
.edito-page .tf-calc dt{font-size:15px;line-height:1.5;color:var(--e-encre-2)}
.edito-page .tf-calc dd{margin:0;font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--e-encre)}
.edito-page .tf-calc .tf-calc-base :is(dt,dd){font-weight:600;color:var(--e-encre)}
.edito-page .tf-calc .tf-calc-total{border-top-color:var(--e-encre);padding:18px 0 16px}
.edito-page .tf-calc .tf-calc-total dt{font-family:var(--e-serif);font-size:clamp(20px,1.7vw,24px);line-height:1.3;letter-spacing:-.015em;color:var(--e-encre)}
.edito-page .tf-calc .tf-calc-total dd{font-family:var(--e-serif);font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:-.02em;color:var(--e-or)}
.edito-page .tf-ex-note{font-size:13px;line-height:1.65;color:var(--e-encre-2);margin:18px 0 0;max-width:34em}
@media(max-width:768px){
  .edito-page .tf-table{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .edito-page .tf-col{grid-row:auto;display:block}
  /* Sur téléphone, la formule mise en avant devient une bande sable à fleur
     d’écran, son texte calé sur la gouttière de la page. */
  .edito-page .tf-col--featured{margin:0 calc(-1 * var(--e-gutter)) -1px;padding-inline:var(--e-gutter)}
  .edito-page .tf-faq-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .edito-page .tf-faq .faq-a{padding-right:0}
}

/* ── PAGE : CONTACT ──────────────────────────────────────────────────────
   /contact — coordonnées et formulaire complet, sans widget. */
/* Ouverture : titre à gauche ; à droite, sur l’axe de la photo des autres
   pages et alignées sur le haut du titre, les coordonnées en liste à filets,
   puis l’accès voyageurs. La bande sable du formulaire suit : pas de filet
   de clôture, le changement de fond suffit. */
.edito-page .ct-hero .ed-hero-grid{border-bottom:0}
.edito-page .ct-aside{margin-top:calc(16.5px + 26px)}
.edito-page .ct-details{margin:0;border-bottom:1px solid var(--e-line)}
.edito-page .ct-detail{display:grid;gap:6px;padding:20px 0 19px;border-top:1px solid var(--e-line)}
.edito-page .ct-details dt{font:600 11px/1.5 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--e-encre-2)}
.edito-page .ct-details dd{margin:0;font-family:var(--e-serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.25;letter-spacing:-.015em;color:var(--e-encre)}
/* Cible tactile d’au moins 44 px sans changer le rythme des filets. */
.edito-page .ct-details a{display:inline-block;padding:10px 0;margin:-10px 0;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(29,24,20,.3);text-underline-offset:.2em;transition:color .2s,text-decoration-color .2s}
.edito-page .ct-details a:hover{color:var(--e-or);text-decoration-color:currentColor}
.edito-page .ct-voyageur{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:clamp(28px,4vh,40px)}
.edito-page .ct-voyageur p{font-size:15px;line-height:1.6;color:var(--e-encre-2);margin:0}
.edito-page .ct-voyageur .btn{min-height:48px;justify-content:center}

/* Formulaire : titre à gauche, champs à droite, sur la grille commune.
   Libellés en encre secondaire (6:1 sur sable), champs blancs à filet,
   focus en or assombri, envoi en encre pleine. Les attributs du formulaire
   et l’ordre des champs ne changent pas : main.js les valide tels quels. */
.edito-page .ct-ecrire-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);align-items:start}
.edito-page .contact-form{gap:22px}
.edito-page .contact-form .form-row{gap:16px}
.edito-page .contact-form .field{gap:8px}
.edito-page .contact-form .field label{font-size:11.5px;letter-spacing:.14em;line-height:1.4;color:var(--e-encre-2)}
.edito-page .contact-form .field :is(input,textarea,select){font-size:16px;line-height:1.5;color:var(--e-encre);background:#fff;border:1px solid var(--e-line);border-radius:6px;padding:12px 16px;min-height:50px;transition:border-color .2s,box-shadow .2s}
.edito-page .contact-form .field textarea{min-height:156px;resize:vertical}
/* Exemples de saisie : 4,8:1 sur blanc, nettement plus clairs que la saisie. */
.edito-page .contact-form .field :is(input,textarea)::placeholder{color:#7a7067;opacity:1}
.edito-page .contact-form .field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b524b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center}
.edito-page .contact-form .field :is(input,textarea,select):hover{border-color:rgba(29,24,20,.3)}
.edito-page .contact-form .field :is(input,textarea,select):is(:focus,:focus-visible){background-color:#fff;border-color:var(--e-or);box-shadow:0 0 0 1px var(--e-or);outline:2px solid transparent;outline-offset:2px}
/* Le bloc Manoir Verlac devient un sous-chapitre entre deux filets ; la
   légende, sortie du cadre par le flottement, s’y lit comme un titre. */
.edito-page .contact-form .field-group{min-width:0;margin:8px 0 0;padding:24px 0 26px;gap:14px;border:0;border-top:1px solid var(--e-line);border-bottom:1px solid var(--e-line);border-radius:0}
.edito-page .contact-form .field-group legend{float:left;width:100%;padding:0;margin:0;font-family:var(--e-serif);font-weight:400;font-size:clamp(22px,2vw,26px);line-height:1.2;letter-spacing:-.015em;text-transform:none;color:var(--e-encre)}
/* Propriétaire ou voyageur : deux boutons radio en pastille, le choix actif
   en encre pleine. Les vrais boutons radio restent dessous (flèches, lecteur
   d’écran) ; le focus clavier s’affiche sur la pastille. */
.edito-page .contact-form .ct-profil{min-width:0;margin:0;padding:0;border:0}
.edito-page .contact-form .ct-profil legend{float:left;width:100%;padding:0;margin:0 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--e-encre-2)}
.edito-page .ct-profil-choix{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#fff;border:1px solid var(--e-line);border-radius:980px}
.edito-page .ct-choix{position:relative;display:flex;cursor:pointer}
.edito-page .ct-choix input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.edito-page .ct-choix span{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:980px;font-size:15px;font-weight:500;color:var(--e-encre-2);transition:background .2s,color .2s}
.edito-page .ct-choix:hover span{color:var(--e-encre)}
.edito-page .ct-choix input:checked+span{background:var(--e-encre);color:var(--e-ivoire)}
.edito-page .ct-choix input:focus-visible+span{outline:2px solid var(--e-or);outline-offset:2px}
/* Contrastes élevés (Windows) : le fond de la pastille cochée serait effacé, on la marque en couleur système. */
@media (forced-colors: active){.edito-page .ct-choix input:checked+span{forced-color-adjust:none;background:Highlight;color:HighlightText}.edito-page .ct-choix input:focus-visible+span{outline-color:CanvasText}}
.edito-page .contact-form .form-note{font-size:13px;line-height:1.65;color:var(--e-encre-2)}
.edito-page .contact-form .form-note a{color:var(--e-or);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.edito-page .contact-form .form-note a:hover{color:var(--e-encre)}
.edito-page .contact-form .btn-submit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:6px;padding:14px 28px;background:var(--e-encre);color:var(--e-ivoire);font-size:14px;font-weight:500;letter-spacing:-.01em;border-radius:980px}
.edito-page .contact-form .btn-submit:hover{background:#3a312a}
/* Sur ordinateur, le titre de la bande reste en vue le long du formulaire. */
@media(min-width:1025px){.edito-page .ct-ecrire-grid>.ed-h2{position:sticky;top:calc(var(--nav-h) + clamp(48px,8vh,88px))}}
.edito-page .contact-form .btn-submit:focus-visible{outline:2px solid var(--e-or);outline-offset:3px}
/* États posés par main.js : le rouge d’erreur commun tombe à 4,3:1 sur le
   sable ; on l’assombrit (5,8:1). Message de succès dans la typographie. */
.edito-page .contact-form .field.has-error :is(input,textarea,select){border-color:#a12a1e;background-color:#fff}
.edito-page .contact-form .field-error-msg{color:#a12a1e;font-size:12.5px;margin-top:0}
.edito-page .contact-form .form-error-banner{color:#a12a1e;background:#fff;border-color:rgba(161,42,30,.35)}
.edito-page .contact-form .form-success{text-align:left;padding:8px 0 0}
.edito-page .contact-form .form-success-icon{margin:0 0 20px;border-color:var(--e-or);background:transparent}
.edito-page .contact-form .form-success h3{font-family:var(--e-serif);font-weight:400;font-size:clamp(26px,2.4vw,32px);letter-spacing:-.02em;color:var(--e-encre)}
.edito-page .contact-form .form-success p{font-size:15px;color:var(--e-encre-2)}

@media(max-width:1024px){
  .edito-page .ct-ecrire-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,5vh,44px)}
  .edito-page .ct-form{max-width:720px}
}
@media(max-width:768px){
  .edito-page .ct-aside{margin-top:12px}
  .edito-page .ct-voyageur{align-items:stretch}
  .edito-page .ct-voyageur .btn{width:100%}
  .edito-page .contact-form .btn-submit{align-self:stretch}
}
/* Téléphone : champs pleine largeur, un par ligne. */
@media(max-width:600px){
  .edito-page .contact-form .form-row{grid-template-columns:minmax(0,1fr)}
}

/* ── PAGE : CARTE CADEAU VERLAC ──────────────────────────────────────────
   /carte-cadeau-verlac — présentation, étapes, achat Stripe. */

/* Ouverture : le fil d’Ariane, en encre, au-dessus de la grille, chaque lien
   haut de 44 px. À droite, faute de photographie du manoir, le visuel
   .verlac-hero-bg de l’ancien en-tête — nuit, bleu nuit, arche filetée d’or —
   cadré au 4/3 de l’ouverture de /services, sans texte ni zoom ; l’arche
   suit la largeur du cadre. */
.edito-page .ccv-hero{padding-top:calc(var(--nav-h) + clamp(12px,2.5vh,28px))}
.edito-page .ccv-hero .breadcrumb{position:static;margin-bottom:16px}
/* Achat accessible dès l’ouverture : le bouton de paiement était à trois ou quatre écrans. */
.edito-page .ccv-hero-actions{margin-top:28px}
.edito-page #commander{scroll-margin-top:calc(var(--nav-h) + 16px)}
.edito-page .ccv-hero .breadcrumb ol{flex-wrap:wrap;gap:0}
.edito-page .ccv-hero .breadcrumb li{display:flex;align-items:center;font-size:12px;letter-spacing:.02em;color:var(--e-encre-2)}
.edito-page .ccv-hero .breadcrumb li:not(:last-child)::after{margin:0 10px;color:inherit}
.edito-page .ccv-hero .breadcrumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--e-encre-2);text-decoration:underline 1px var(--e-line);text-underline-offset:.35em}
.edito-page .ccv-hero .breadcrumb a:hover{color:var(--e-or);text-decoration-color:currentColor}
.edito-page .ccv-hero .breadcrumb li[aria-current="page"]{color:var(--e-encre)}
.edito-page .ccv-visual{position:relative;aspect-ratio:4/3;overflow:hidden;container-type:inline-size}
.edito-page .ccv-visual .page-header-bg{animation:none;transform:none}
.edito-page .ccv-visual .verlac-hero-bg::before{top:15%;width:34cqw;border-top-left-radius:17cqw;border-top-right-radius:17cqw}

/* Présentation : le titre à gauche, le texte sous l’axe de droite, sa
   première ligne à hauteur du titre. Un filet la sépare des étapes, comme
   celui qui clôt l’ouverture. */
.edito-page .ccv-intro{padding-bottom:0}
.edito-page .ccv-intro .ed-head{align-items:start;margin-bottom:0;padding-bottom:clamp(88px,14vh,160px);border-bottom:1px solid var(--e-line)}
.edito-page .ccv-intro-text{padding-top:calc(16.5px + 26px)}
.edito-page .ccv-intro-text .ed-text{margin-top:20px;max-width:34em}
/* Bon à savoir (ouverture, lieu, session, effets, âge) : même colonne que l’intro. */
.edito-page .ccv-infos-text{padding-top:calc(16.5px + 26px)}
/* Le titre de « Avant d’offrir » s’aligne en haut, sur la première ligne du texte (.ed-head l’aligne en bas par défaut). */
.edito-page .ccv-infos .ed-head{align-items:start;margin-bottom:0}
.edito-page .ccv-infos-text .ed-text{margin-top:14px;max-width:34em}
.edito-page .ccv-infos-text .ed-text:first-child{margin-top:0}
.edito-page .ccv-infos-text strong{color:var(--e-encre);font-weight:600}

/* Commande, en bande sable : la présentation à gauche, la carte d’achat sous
   l’axe de droite, son haut à hauteur du titre. Carte blanche à filet fin,
   sans ombre ni arrondi ; les conditions de vente restent au-dessus du bloc
   Stripe (§ 4.6), dont la feuille ne touche que le cadre. Les gris de
   style.css, à 4:1 sur le sable, passent à l’encre secondaire, et les liens
   à l’encre soulignée d’or assombri. */
.edito-page .ccv-buy-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.edito-page .ccv-buy-head .ed-text{margin-top:24px;max-width:30em}
.edito-page .ccv-buy-side{margin-top:calc(16.5px + 26px)}
.edito-page .gift-buy-card{max-width:none;margin:0;background:var(--e-ivoire);border:1px solid var(--e-line);border-radius:0;box-shadow:none;padding:clamp(24px,3.2vw,44px)}
/* Le bouton qui charge le paiement suit le bouton principal des autres pages : encre pleine sur clair. */
.edito-page .gift-buy-card .stripe-pay-load{background:var(--e-encre);color:var(--e-ivoire)}
.edito-page .gift-buy-card .stripe-pay-load:hover{background:#3a312a;color:var(--e-ivoire)}
.edito-page .gift-buy-terms{font-size:14px;line-height:1.7;color:var(--e-encre-2);margin:0 0 24px;padding-bottom:24px;border-bottom-color:var(--e-line)}
.edito-page .gift-buy-terms a,.edito-page .gift-buy-note a{color:var(--e-encre);font-weight:500;border-bottom:1px solid var(--e-or)}
.edito-page .gift-buy-terms a:hover,.edito-page .gift-buy-note a:hover{color:var(--e-or);border-bottom-color:var(--e-or)}
.edito-page .gift-buy-fallback{color:var(--e-encre-2)}
.edito-page .gift-buy-note{max-width:none;margin:24px 0 0;font-size:14px;color:var(--e-encre-2)}
.edito-page .gift-buy-note a[href^="tel:"]{white-space:nowrap}

/* Bande finale : la seule sombre, elle garde le fond .verlac-hero-bg et son
   arche. Le voile de style.css, noir à 82 %, l’éteignait presque : allégé,
   il laisse lire le bleu nuit. Le fondu de main.js entre le sable et la nuit
   se peint pour moitié sur le fond propre de la bande, que ces deux calques
   couvraient : le fondu s’arrêtait à mi-course sur une arête. Ils
   apparaissent donc en fondu sur la marge haute de la bande, sous laquelle
   le dégradé de main.js se poursuit ; sans JavaScript, c’est la nuit unie. */
.edito-page .ccv-cta .cta-strip-overlay{background:rgba(4,5,10,.45)}
.edito-page .ccv-cta :is(.cta-strip-bg,.cta-strip-overlay){-webkit-mask-image:linear-gradient(to bottom,transparent,#000 clamp(96px,16vh,168px));mask-image:linear-gradient(to bottom,transparent,#000 clamp(96px,16vh,168px))}

@media(max-width:768px){
  .edito-page .ccv-hero{padding-top:calc(var(--nav-h) + 8px)}
  .edito-page .ccv-hero .breadcrumb{margin-bottom:20px}
  .edito-page .ccv-hero .breadcrumb li:not(:last-child)::after{margin:0 6px}
  .edito-page .ccv-intro-text{padding-top:0}
  .edito-page .ccv-infos-text{padding-top:0}
  .edito-page .ccv-buy-grid{grid-template-columns:minmax(0,1fr)}
  .edito-page .ccv-buy-side{margin-top:0}
}

/* ── PAGES LÉGALES ET 404 ────────────────────────────────────────────────
   Typographie et palette seulement : aucune révélation, aucune animation,
   impression préservée. */
/* Ouverture : l’ed-hero--solo commun, sur-titre et titre seuls (.lg-hero).
   Le texte légal garde son balisage. Il part du bord gauche de la grille
   commune, sur une mesure d’environ 68 caractères ; la section, elle, reste
   pleine largeur, pour que le fondu de main.js vers le pied de page — ou vers
   la bande finale de 404.html — se peigne d’un bord à l’autre de l’écran. */
.edito-page .legal-section{--lg-mesure:34rem;max-width:none;margin:0;padding:clamp(48px,8vh,88px) var(--e-gutter) clamp(96px,14vh,160px) max(var(--e-gutter),(100% - 1240px) / 2)}
.edito-page .legal-section > *{max-width:var(--lg-mesure)}
/* L’ancien tiret or redoublait le filet d’ouverture : il disparaît. */
.edito-page .legal-divider{display:none}
/* Chaque article ouvre sur un filet tiré d’un bord à l’autre de la grille,
   comme les étapes de /services ; le texte garde sa mesure. */
.edito-page .legal-section{container-type:inline-size;padding-top:clamp(88px,14vh,160px);padding-inline:max(var(--e-gutter),(100% - 1240px) / 2)}
.edito-page .legal-section h2{position:relative;font-family:var(--e-serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.15;letter-spacing:-.02em;color:var(--e-encre);text-wrap:balance;margin:clamp(48px,7vh,72px) 0 18px;padding-top:clamp(28px,4vh,40px)}
.edito-page .legal-section h2::before{content:'';position:absolute;left:0;top:0;width:100cqw;border-top:1px solid var(--e-line)}
.edito-page .legal-divider + h2{margin-top:0;padding-top:0}
.edito-page .legal-divider + h2::before{content:none}
.edito-page .legal-section h3{font-family:var(--e-serif);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.015em;color:var(--e-encre);margin:36px 0 12px}
/* Texte en encre secondaire (6,8:1 sur ivoire), gras en encre pleine. */
.edito-page .legal-section :is(p,li){font-size:16px;line-height:1.75;color:var(--e-encre-2)}
.edito-page .legal-section p{margin:0 0 16px}
.edito-page .legal-section strong{font-weight:600;color:var(--e-encre)}
/* Puces : un tiret or assombri ; list-style n’est jamais retiré, pour que
   VoiceOver annonce toujours la liste. */
.edito-page .legal-section ul{list-style:'–\2002';margin:6px 0 20px;padding-left:1.5em;gap:8px}
.edito-page .legal-section li::marker{color:var(--e-or)}
/* Liens en or assombri (5,3:1), soulignés au repos ; au survol, l’encre,
   sans transition. */
.edito-page .legal-section a{color:var(--e-or);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.edito-page .legal-section a:hover{color:var(--e-encre)}
/* 404.html : ses deux paragraphes prennent la taille du chapeau. */
.edito-page .legal-section .body-text{font-size:clamp(17px,1.4vw,19px);line-height:1.7}

/* Impression. Le bloc de style.css (body:has(.legal-section)) retire toujours
   navigation, pied de page, widget et filet d’ouverture ; mais cette feuille,
   chargée après lui, l’emporterait sur le reste. On rend donc au document
   l’impression d’origine — blanc, encre noire, titres en Inter gras aux mêmes
   tailles — : l’ivoire, l’or assombri et Fraunces restent à l’écran, et le PDF
   des CGV joint aux cartes cadeaux (§ 4.6 d’AGENTS.md) ne change pas. */
@media print{
  .edito-page:has(.legal-section){background:#fff}
  .edito-page .lg-hero{padding:0;overflow:visible}
  .edito-page .lg-hero .ed-hero-grid{display:block;width:auto;margin:0;padding:0 0 6mm;border:0}
  .edito-page .lg-hero .ed-eyebrow{display:block;font-size:12px;line-height:normal;letter-spacing:.08em;color:#000;margin:0 0 2mm}
  .edito-page .lg-hero .ed-eyebrow::before{content:none}
  .edito-page .lg-hero .ed-h1{max-width:none;font-family:'Inter',sans-serif;font-weight:700;font-size:22pt;line-height:1.15;letter-spacing:-.03em;text-wrap:wrap;color:#000}
  .edito-page .lg-hero .ed-h1 em{display:inline;font-style:normal;color:#000}
  .edito-page .legal-section{padding:0;container-type:normal}
  .edito-page .legal-section h2::before{content:none}
  .edito-page .legal-section > *{max-width:none}
  .edito-page .legal-section h2{font-family:'Inter',sans-serif;font-weight:700;font-size:13pt;line-height:normal;letter-spacing:-.02em;text-wrap:wrap;color:#000;margin:7mm 0 2.5mm;padding:0;border:0;break-after:avoid}
  .edito-page .legal-section h3{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-.01em;font-size:11pt;line-height:normal;color:#000;margin:28px 0 10px;break-after:avoid}
  .edito-page .legal-section :is(p,li),.edito-page .legal-section .body-text{font-size:10pt;line-height:1.55;color:#222;orphans:3;widows:3}
  .edito-page .legal-section p{margin:0 0 14px;break-inside:avoid}
  .edito-page .legal-section ul{list-style:disc;margin:8px 0 14px 22px;padding:0;gap:6px}
  .edito-page .legal-section li::marker{color:inherit}
  .edito-page .legal-section strong{font-weight:700;color:inherit}
  .edito-page .legal-section em{font-style:normal;color:var(--secondary)}
  .edito-page .legal-section a{color:#000;text-decoration:none}
}