/* L’Île dorée · maison aux Portes-en-Ré
   Direction C « Grand calme » (1X NEO), textes refaits le 2026-10-03 après son retour :
   « toutes les zones de texte […] on a l'impression de se croire sur n'importe quel autre site IA ».
   Titres à deux voix (Lando Norris), colonne décalée et étiquettes numérotées (Sun Metalon, Terminal),
   texte qui se colore au défilement (Terminal), chiffres en grand (Ribbit), schéma au trait (Microsoft AI).
   Palette relevée sur ses photos : murs blancs chauds, canapé vieux rose, bois. Écran de référence 1280 x 620, puis 390. */

:root {
  --fond: #F5F3EF;
  --encre: rgba(43, 34, 31, .84);
  --encre-forte: rgba(43, 34, 31, .95);
  --encre-douce: rgba(43, 34, 31, .68);
  --filet: rgba(43, 34, 31, .14);
  --accent: #9A5B5E;            /* rose du canapé, foncé pour rester lisible */
  --accent-clair: #DDB0B0;      /* le même, sur fond sombre */
  --surface: #ECE7E0;
  --sombre: #2B2422;
  --police: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, serif;

  --t-titre: clamp(34px, 3.2vw + 12px, 62px);
  --t-texte: 16px;
  --marge: clamp(20px, 3vw, 40px);
  --section: clamp(72px, 9vh + 24px, 132px);
  --rayon: clamp(18px, 3vw, 48px);
  --h-max: min(76svh, 720px);    /* hauteur maximale d’une photo : elle tient dans l’écran (2026-10-09) */
  --douce: cubic-bezier(.4, 0, .2, 1);
  --sortie: cubic-bezier(.23, 1, .32, 1);
  /* 2026-10-11, passe « ultra premium » (skill apple-design) : le mouvement d'un ressort sans rebond, celui qu'Apple met
     par défaut partout, tracé point par point (x = 1 − (1 + ωt)·e^−ωt). Repli sur --sortie si le navigateur ne le lit pas. */
  --ressort: var(--sortie);
  --ombre-carte: 0 1px 1px rgba(20, 14, 12, .04), 0 10px 24px -10px rgba(20, 14, 12, .22), 0 34px 70px -28px rgba(20, 14, 12, .38);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ressort: linear(0 0%, .0049 1.1%, .0288 2.8%, .0762 4.9%, .1445 7.2%, .2282 9.8%, .3205 12.5%, .4152 15.4%, .5071 18.4%, .5924 21.6%, .6689 24.9%, .7354 28.3%, .7918 31.9%, .8385 35.5%, .8763 39.2%, .9065 43.1%, .9302 47%, .9484 51%, .9623 55.1%, .9727 59.2%, .9804 63.5%, .9861 67.8%, .9902 72.2%, .9932 76.7%, .9953 81.2%, .9968 85.8%, .9978 90.5%, .9985 95.2%, 1 100%); }
}

/* polices hébergées sur le site (2026-10-12) : Switzer (Indian Type Foundry, licence ITF FFL, auto-hébergement permis),
   Newsreader (Production Type, licence SIL OFL) ; seuls les caractères latins sont servis */
@font-face { font-family: "Switzer"; src: url("polices/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("polices/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("polices/switzer-700.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("polices/newsreader-italique-latin.woff2") format("woff2"); font-weight: 300 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; src: url("polices/newsreader-italique-latin-ext.woff2") format("woff2"); font-weight: 300 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; src: url("polices/newsreader-droit-latin.woff2") format("woff2"); font-weight: 300 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; src: url("polices/newsreader-droit-latin-ext.woff2") format("woff2"); font-weight: 300 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { background: var(--fond); color: var(--encre); font: 400 var(--t-texte)/1.55 var(--police); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; font-kerning: normal; font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
/* petits textes : un rien d'air entre les lettres ; grands titres : resserrés (l'approche suit la taille, jamais une seule valeur) */
.chiffres span, .frise span, .tarifs-grille span, .formulaire label, .axo-legende small, .credit, .pied, .equipements li, .plages li span, .galerie-piste figcaption, .bouton, .pastille { letter-spacing: .008em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- titres à deux voix : une ligne droite, une ligne en italique à empattements ---------- */
h2 { font: 500 var(--t-titre)/1.02 var(--police); letter-spacing: -.03em; color: var(--encre-forte); }
h2 em { display: block; font: italic 300 calc(var(--t-titre) * 1.1)/1 var(--serif); letter-spacing: -.01em; color: var(--accent); padding-left: .6em; }
h2.une-voix { max-width: 18ch; }
h2 .ligne { display: block; }
h2.titre-serif { font: italic 300 calc(var(--t-titre) * 1.25)/1 var(--serif); letter-spacing: -.015em; }

/* ---------- nom de chapitre : point, trait qui se dessine, nom en italique (le motif du site) ---------- */
.etiquette { display: flex; align-items: center; gap: 12px; font: italic 400 20px/1.2 var(--serif); color: var(--accent); padding-top: .55em; white-space: nowrap; }
.etiquette::before { content: ''; order: -2; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.etiquette::after { content: ''; order: -1; flex: none; width: 52px; height: 1.5px; background: var(--encre-forte); transform-origin: left center; }
.js .etiquette::after { transform: scaleX(0); transition: transform 1.1s var(--sortie) .15s; }
.js .etiquette.vu::after { transform: scaleX(1); }
.etiquette-clair { color: var(--accent-clair); }
.etiquette-clair::after { background: rgba(245, 243, 239, .55); }

/* ---------- le bloc : étiquette à gauche, contenu décalé ---------- */
.bloc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); padding: var(--section) var(--marge) calc(var(--section) * .55); max-width: 1440px; margin: 0 auto; }
.bloc > .etiquette { grid-column: 1 / 4; align-self: start; }
.bloc-corps { grid-column: 4 / 13; }
.texte-colonne { font-size: clamp(16px, .35vw + 13.5px, 19px); line-height: 1.55; max-width: 44ch; margin: 32px 0 0 33%; text-wrap: pretty; }
.petit { font-size: 14px; color: var(--encre-douce); margin: 14px 0 0 33%; max-width: 48ch; }
.credit { color: var(--encre-douce); font-size: 12px; }
.a-fournir { background: #FFF1BF; color: #6A5200; padding: .05em .4em; border-radius: 6px; font: 400 .85em/1.4 var(--police); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- la phrase, en grand, qui se colore au défilement ---------- */
.citation { font: italic 300 clamp(26px, 2.3vw + 9px, 44px)/1.18 var(--serif); color: var(--encre-forte); margin-top: 40px; max-width: 30ch; margin-left: 12%; text-wrap: pretty; }
.js .citation .cw { opacity: .16; transition: opacity .2s var(--douce); white-space: nowrap; }   /* « vis-à-vis » ne se coupe pas au tiret */
.js .citation .cw.on { opacity: 1; }

/* ---------- boutons ---------- */
.bouton { display: inline-block; background: #fff; color: #1f1a19; border: 0; border-radius: 999px; padding: 15px 24px; font: 500 15px/1 var(--police); text-decoration: none; cursor: pointer; transition: transform .5s var(--ressort), background .2s var(--douce), box-shadow .3s var(--douce); }
.bouton:active, .pastille:active, .bouton-whatsapp:active { transform: scale(.965); transition-duration: .1s; transition-timing-function: ease-out; }
.bouton-sombre { background: var(--sombre); color: #fff; }
@media (hover: hover) and (pointer: fine) { .bouton:hover { background: #ece7e0; } .bouton-sombre:hover { background: #45393a; } .bouton-contour:hover { background: rgba(255, 255, 255, .26); } .pastille:hover { background: #45393a; } }

/* ---------- barre qui apparaît après l'accueil ---------- */
.barre { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 var(--marge); background: rgba(245, 243, 239, .72); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 -1px 0 rgba(43, 34, 31, .06); transform: translateY(-100%); opacity: 0; transition: transform .6s var(--ressort), opacity .3s var(--douce); }
.barre.visible { transform: none; opacity: 1; }
/* au lieu d'un trait sous la barre, un fondu très court là où elle recouvre la page */
.barre::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; background: linear-gradient(180deg, rgba(43, 34, 31, .07), rgba(43, 34, 31, 0)); }
.marque { font: italic 400 21px/1 var(--serif); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.barre .marque { color: var(--encre-forte); }
/* sans le nom de la maison (2026-10-14, « supprime l'île dorée ») : les liens au centre, le bouton à droite */
.barre ul { grid-column: 2; position: relative; display: flex; gap: clamp(0px, .5vw, 6px); }
.barre ul a { position: relative; z-index: 1; display: block; padding: 9px 12px; border-radius: 999px; font: 500 13px/1 var(--police); letter-spacing: .005em; text-decoration: none; color: var(--encre-douce); transition: color .25s var(--douce); }
.barre ul a[aria-current="true"] { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .barre ul a:hover { color: var(--encre-forte); } }
.barre-curseur { position: absolute; z-index: 0; left: 0; top: 50%; height: 31px; margin-top: -15.5px; border-radius: 999px; background: rgba(154, 91, 94, .1); box-shadow: inset 0 0 0 1px rgba(154, 91, 94, .1); opacity: 0; transition: opacity .3s var(--douce); pointer-events: none; }
.barre-curseur.visible { opacity: 1; }
.barre .pastille { grid-column: 3; justify-self: end; }
.pastille { font: 500 13px/1 var(--police); text-decoration: none; background: var(--sombre); color: #fff; padding: 15px 18px; border-radius: 999px; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .5s var(--ressort), background .2s var(--douce); }

/* ---------- accueil ---------- */
.accueil { position: relative; height: 100svh; min-height: 420px; overflow: hidden; background: #3a332f; color: #fff; transform-origin: 50% 0; will-change: transform; }
/* 2026-10-11, « revoir cette transition » : la page monte par-dessus l'accueil comme une feuille (coins arrondis, ombre douce) ;
   derrière, l'accueil recule, s'arrondit et s'assombrit, comme une carte qu'on pousse au fond. Le texte reste net : seule la photo s'assombrit. */
.accueil-voile { position: absolute; inset: 0; z-index: 1; background: #160f0d; opacity: 0; pointer-events: none; }
main { position: relative; z-index: 3; background: var(--fond); border-radius: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px) 0 0; box-shadow: 0 -1px 0 rgba(255, 255, 255, .5), 0 -26px 60px -30px rgba(20, 14, 12, .55); }
.accueil-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.accueil::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.1) 14%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 48%, rgba(0,0,0,.24) 66%, rgba(0,0,0,.58) 100%),
    radial-gradient(ellipse 90% 105% at 0% 100%, rgba(20,14,12,.66), rgba(20,14,12,.38) 50%, transparent 78%); }
/* plus de nom en haut à gauche (2026-10-17, « supprime définitivement le coin tout en haut à gauche ») : les liens restent à droite */
.accueil-haut { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: flex-end; align-items: center; padding: 20px var(--marge); }
.accueil-haut .marque { font-size: 24px; }
.accueil-liens { display: flex; gap: clamp(14px, 1.8vw, 26px); }
.accueil-liens a { font: 500 12px/1 var(--police); text-decoration: none; opacity: .9; }
/* textes de l'accueil d'après la feuille manuscrite du 2026-10-06 : lieu, titre, phrase, deux boutons */
.accueil-bas { position: absolute; z-index: 2; left: var(--marge); right: var(--marge); bottom: clamp(24px, 5vh, 40px); display: flex; flex-direction: column; align-items: flex-start; max-width: 620px; }
.accueil-lieu { font: italic 400 18px/1.2 var(--serif); color: #fff; margin-bottom: 14px; }
.accueil h1 { font: 500 clamp(28px, 2vw + 12px, 42px)/1.04 var(--police); letter-spacing: -.022em; text-wrap: balance; }
.accueil-bas { text-shadow: 0 1px 22px rgba(20, 14, 12, .35); }
.accueil-boutons .bouton { text-shadow: none; }
.accueil h1 em { display: block; font: italic 300 1.12em/1.05 var(--serif); letter-spacing: -.01em; color: #fff; padding-left: .5em; }
.accueil-texte { font-size: clamp(15px, .25vw + 13px, 17px); line-height: 1.5; max-width: 46ch; opacity: .9; margin-top: 16px; text-wrap: pretty; }
.accueil-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* sur la photo, le second bouton devient du verre dépoli : une matière claire qui attire la main sans cacher l'image */
.bouton-contour { background: rgba(255, 255, 255, .16); color: #fff; -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .5); }

/* ---------- le séjour, en grand ---------- */
.media { position: relative; margin: 0 auto; width: min(calc(100% - 2 * var(--marge)), 1265px, calc(var(--h-max) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: var(--rayon); overflow: hidden; background: var(--surface); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media img { filter: saturate(.86) brightness(1.07) !important; }

/* ---------- la maison en chiffres ---------- */
/* quatre chiffres de la maison (les trois distances retirées le 2026-10-09, « sup ça » : la frise les donne déjà) */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1265px; width: calc(100% - 2 * var(--marge)); margin: clamp(40px, 7vh, 72px) auto 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.chiffres li { padding: 22px 16px 24px; border-left: 1px solid var(--filet); }
.chiffres li:first-child { border-left: 0; padding-left: 0; }
/* le nombre, et le début de la phrase en gras sur la même ligne (« 110 m² ») ; le reste dessous (2026-10-11) */
.chiffres li { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; column-gap: 12px; }
.chiffres b { display: block; font: 300 clamp(44px, 4.4vw, 80px)/1 var(--serif); color: var(--encre-forte); letter-spacing: -.035em; }
.chiffres strong { font: 600 clamp(15px, .35vw + 12px, 18px)/1.25 var(--police); letter-spacing: -.005em; color: var(--encre-forte); }
.chiffres span { flex-basis: 100%; display: block; font-size: 14px; line-height: 1.4; color: var(--encre-douce); margin-top: 10px; max-width: 24ch; }
.texte-colonne.texte-suite { margin-top: 16px; }
/* la maison : la photo du séjour part du bord gauche de l'écran, à la hauteur du titre ; nom du chapitre, titre et phrase à côté
   (2026-10-11, « un bandeau de texte trop grand avant l'image […] mettre l'image décentrée et le texte sur le côté ») */
.bloc-maison { grid-template-rows: auto auto; padding-bottom: calc(var(--section) * .45); }
.bloc-maison .media { grid-column: 1 / 8; grid-row: 1 / 3; align-self: start; width: auto; margin: 0 0 0 calc(-1 * (var(--marge) + max(0px, (100vw - 1440px) / 2))); aspect-ratio: 4 / 3; max-height: var(--h-max); border-radius: 0 var(--rayon) var(--rayon) 0; }
.bloc-maison > .etiquette { grid-column: 8 / 13; grid-row: 1; align-self: end; margin-bottom: clamp(18px, 3vh, 30px); padding-left: clamp(0px, 1.6vw, 26px); }
.bloc-maison .bloc-corps { grid-column: 8 / 13; grid-row: 2; align-self: start; padding-left: clamp(0px, 1.6vw, 26px); }
.bloc-maison .citation { margin: clamp(22px, 3.5vh, 34px) 0 0; font-size: clamp(23px, 1.4vw + 10px, 36px); max-width: 27ch; }
.js .bloc-maison .agrandir { transform-origin: 0 50%; }
/* plusieurs paragraphes : deux colonnes sous le titre, même bord gauche que lui (2026-10-09, « trop bizarre cet agencement ») */
.texte-colonnes { columns: 2 280px; column-gap: clamp(28px, 4vw, 56px); max-width: 860px; margin-top: 32px; font-size: clamp(16px, .35vw + 13.5px, 19px); line-height: 1.55; }
.texte-colonnes p { break-inside: avoid; margin-bottom: 16px; text-wrap: pretty; }

/* ---------- la maison en vue éclatée (axonométrie d'après son plan) ---------- */
/* maquette dans un cadre de la même famille que la carte, juste au-dessus (2026-10-09, « pas bien alignée et intégrée ») */
.axo-bloc { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; width: min(calc(100% - 2 * var(--marge)), 1100px); margin: 0 auto; padding: clamp(14px, 2vw, 24px) clamp(18px, 3vw, 40px); background: #EFEAE2; border-radius: var(--rayon); }
.axo-dessin { position: relative; }
.axo { display: block; width: 100%; height: auto; max-height: calc(var(--h-max) - 60px); overflow: visible; }
.axo .piece { fill: var(--fond); stroke: var(--encre-forte); stroke-width: 1.4; stroke-linejoin: round; transition: fill .25s var(--douce); }
.axo .piece.vie { fill: rgba(154, 91, 94, .13); }
.axo .piece.escalier { fill: var(--surface); }
.axo .piece.allume { fill: rgba(154, 91, 94, .32); }
.axo .plaque { fill: var(--fond); }
.axo .contour { fill: none; stroke: var(--encre-forte); stroke-width: 2.2; stroke-linejoin: round; }
.axo .marches line { stroke: var(--encre-douce); stroke-width: .9; }
.axo .lien { stroke: var(--encre-douce); stroke-width: 1; stroke-dasharray: 4 5; }
.axo .lien-escalier { stroke: var(--accent); }
.axo .repere circle { fill: var(--fond); stroke: var(--accent); stroke-width: 1.4; transition: fill .25s var(--douce); }
.axo .repere text { font: italic 500 16px var(--serif); fill: var(--accent); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.axo .repere.allume circle { fill: var(--accent); }
.axo .repere.allume text { fill: #fff; }
.axo .niveau { font: italic 400 21px var(--serif); fill: var(--accent); }
.axo .jardin { font: italic 400 17px var(--serif); fill: var(--encre-douce); }
.axo-etage { transition: transform .12s linear; }
.js .axo-bloc .axo .contour, .js .axo-bloc .axo .piece { stroke-dasharray: 2600; stroke-dashoffset: 2600; transition: stroke-dashoffset 2.2s var(--sortie), fill .25s var(--douce); }
.js .axo-bloc.vu .axo .contour, .js .axo-bloc.vu .axo .piece { stroke-dashoffset: 0; }
.axo-legende .legende-niveau { font: italic 400 18px/1.2 var(--serif); color: var(--accent); margin: 0 0 4px; }
.axo-legende ol + .legende-niveau { margin-top: 14px; }
.axo-legende ol { list-style: none; padding: 0; border-top: 1px solid var(--filet); }
.axo-legende li { display: grid; grid-template-columns: 30px auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--filet); cursor: default; transition: background .2s var(--douce); }
.axo-legende li.allume { background: rgba(154, 91, 94, .08); }
/* au survol, le nom glisse un peu vers la maquette, sur un ressort */
.axo-legende li { cursor: pointer; }
.axo-legende b, .axo-legende .n { display: inline-block; transition: transform .55s var(--ressort), color .2s var(--douce); }
.axo-legende li.allume b { transform: translateX(6px); color: var(--accent); }
.axo-legende li.allume .n { transform: translateX(3px); }
.axo-legende .n { font: italic 500 16px/1.3 var(--serif); color: var(--accent); }
.axo-legende b { font-size: 14.5px; font-weight: 600; color: var(--encre-forte); }
.axo-legende small { font-size: 12.5px; line-height: 1.35; color: var(--encre-douce); }

/* ---------- maquette 3D (remplace le dessin quand l'appareil sait l'afficher) ---------- */
.maquette-3d { display: none; position: relative; width: 100%; height: clamp(300px, calc(var(--h-max) - 48px), 480px); cursor: grab; touch-action: pan-y; overflow: hidden; }
.maquette-3d:active { cursor: grabbing; }
.maquette-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.maquette-aide { display: none; position: absolute; left: 0; bottom: 2px; margin: 0; font: italic 400 15px/1.3 var(--serif); color: var(--encre-douce); }
.axo-bloc.en-3d .axo { display: none; }
.axo-bloc.en-3d .maquette-3d, .axo-bloc.en-3d .maquette-aide { display: block; }
.repere-3d { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--fond); border: 1.4px solid var(--accent); color: var(--accent); font: italic 500 14px/23px var(--serif); text-align: center; pointer-events: none; transition: background .2s var(--douce), color .2s var(--douce); }
.repere-3d.allume { background: var(--accent); color: #fff; }

/* ---------- frise des distances : le trait du toit devient le motif du site ---------- */
.frise { position: relative; max-width: 1265px; width: calc(100% - 2 * var(--marge)); margin: 8px auto calc(var(--section) * .7); }
.frise-trait { position: absolute; left: 0; right: 0; top: 4px; width: 100%; height: 12px; overflow: visible; }
.frise-trait path { fill: none; stroke: var(--encre-forte); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4000; stroke-dashoffset: 0; }
.js .frise .frise-trait path { stroke-dashoffset: 4000; transition: stroke-dashoffset 1.8s var(--sortie); }
.js .frise.vu .frise-trait path { stroke-dashoffset: 0; }
.frise ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.frise li { position: relative; padding-top: 34px; }
.frise li::before { content: ''; position: absolute; top: 4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--fond); border: 1.5px solid var(--encre-forte); }
.frise li:first-child::before { background: var(--accent); border-color: var(--accent); }
.frise b { display: block; font: 300 clamp(30px, 2.4vw + 6px, 44px)/1 var(--serif); color: var(--encre-forte); letter-spacing: -.01em; }
.frise li:first-child b { font-style: italic; color: var(--accent); }
.frise span { display: block; font-size: 14.5px; line-height: 1.4; margin-top: 10px; max-width: 22ch; }
.frise a { color: inherit; text-underline-offset: 3px; }

/* ---------- équipements : en colonnes, jamais une ligne à points ---------- */
/* équipements et plages : la grille des sections ; le petit titre dans la marge, aligné sur le texte des noms de chapitre (point 9 + 12 + trait 52 + 12 = 85 px) */
.equipements, .plages { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 18px; max-width: 1440px; padding: 0 var(--marge); margin: clamp(48px, 8vh, 80px) auto 0; }
.equipements-titre { grid-column: 1 / 4; padding-left: 85px; }
.equipements ul, .plages ul, .plages-foret { grid-column: 4 / 13; }
.equipements-titre { font: italic 400 19px/1.3 var(--serif); color: var(--accent); padding-top: 10px; align-self: start; }
.equipements ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; row-gap: 12px; }
.equipements li { border-top: 1px solid var(--filet); padding-top: 10px; font-size: 15px; line-height: 1.35; }

/* ---------- la carte dessinée, façon gravure (refaite le 2026-10-10, « trop bâclée », passée deux fois à la critique) ----------
   Fond (img/carte-fond.svg, et une version téléphone aux traits plus épais) : lignes d'eau qui s'effacent au large, plages côté
   mer, bâti chaud détaillé dans le cercle des 500 m, pistes cyclables continues en trait fort, coupées au bord de la zone de la maison.
   Dessus : zones en capitales espacées, lieux en italique, halo de lettre de la couleur du fond local (pas de boîte),
   le rose réservé à la maison (zone d'environ 150 m volontairement décalée, sans point), cercles de 250 et 500 m à l'encre.
   Cartouche : l'île au trait avec le cadre de la carte, l'échelle, le nord, la légende, la source. */
.carte { width: min(calc(100% - 2 * var(--marge)), 1100px, calc(var(--h-max) * 2.33)); margin: clamp(36px, 7vh, 64px) auto clamp(20px, 3vh, 28px); }
.carte-cadre { position: relative; container-type: inline-size; border-radius: var(--rayon); overflow: hidden; background: #F2EDE3; box-shadow: inset 0 0 0 1px rgba(43, 34, 31, .08); }
.carte-plan { position: relative; }
.carte-plan picture { display: block; }
.carte-fond { width: 100%; height: auto; }
.carte-dessus { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-dessus text { font-family: var(--police); fill: var(--encre-forte); paint-order: stroke; stroke: #F2EDE3; stroke-width: 3px; stroke-linejoin: round; }
.carte-dessus .mer { stroke: #CDE2E4; }
.carte-dessus .bois { stroke: #DCE6C6; }
.carte-dessus .marais { stroke: #CBE5E0; }
.carte-dessus .zone { font: 600 11px var(--police); letter-spacing: .28em; text-transform: uppercase; fill: rgba(43, 34, 31, .5); stroke-width: 2px; }
.carte-dessus .zone.mer { font-size: 12px; letter-spacing: .5em; fill: #4C7F88; stroke: none; }
.carte-dessus .zone.bois { fill: #56733A; }
.carte-dessus .zone.marais { fill: #3F7A70; }
.carte-cercles circle { fill: none; stroke: rgba(138, 125, 116, .5); stroke-width: .8; }
.carte-dessus .carte-cercles text { font: 500 10.5px var(--police); letter-spacing: .06em; fill: #6E645D; stroke-width: 2.5px; }
.carte-maison .zone-maison { fill: rgba(154, 91, 94, .14); stroke: #9A5B5E; stroke-width: 1.1; }
.carte-maison .picto-maison { fill: none; stroke: rgba(43, 34, 31, .55); stroke-width: 1.1; stroke-linejoin: round; }
.carte-dessus .maison-sur { font: 600 10.5px var(--police); letter-spacing: .2em; text-transform: uppercase; fill: rgba(43, 34, 31, .55); stroke-width: 2px; }
.carte-dessus .maison-nom { font: italic 400 27px var(--serif); fill: #9A5B5E; stroke-width: 3.5px; }
.carte-lieu .pastille .detour { fill: #F2EDE3; stroke: none; }
.carte-lieu .pastille circle:not(.detour) { fill: #FBF8F3; stroke: #8A8079; stroke-width: .8; }
.carte-lieu .pastille path { fill: none; stroke: #5E5651; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.carte-dessus .nom { font: italic 400 18.5px var(--serif); fill: var(--encre-forte); }
.carte-dessus .sous { font: 400 13px var(--police); fill: #655E5A; stroke-width: 2.5px; }
.carte-dessus .bord path { fill: none; stroke: rgba(43, 34, 31, .55); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.carte-dessus .bord text { font: 600 10.5px var(--police); letter-spacing: .16em; text-transform: uppercase; fill: rgba(43, 34, 31, .62); stroke-width: 2px; }
.carte-cartouche { position: absolute; top: 18px; right: 18px; display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: start; padding: 9px 26px 8px 10px; background: #F5F3EF; border: 1px solid rgba(43, 34, 31, .12); border-radius: max(10px, calc(var(--rayon) - 18px)); }
.carte-ile { display: block; width: 84px; height: auto; }
.carte-echelle { display: flex; align-items: flex-end; gap: 5px; margin-top: 6px; padding-left: 3px; font: 500 8.5px/1 var(--police); letter-spacing: .06em; color: rgba(43, 34, 31, .62); }
.carte-echelle .echelle-trait { display: block; flex: none; width: calc(44 / 1200 * 100cqw); height: 4px; border: 1px solid rgba(43, 34, 31, .6); border-top: 0; }
.carte-nord { position: absolute; top: 9px; right: 10px; width: 8px; height: 12px; }
.carte-nord path { fill: rgba(43, 34, 31, .62); }
.carte-nord .vide { fill: none; stroke: rgba(43, 34, 31, .62); stroke-width: .9; stroke-linejoin: round; }
.carte-cartouche-lieu { font: 500 9px/1.3 var(--police); letter-spacing: .2em; text-transform: uppercase; color: rgba(43, 34, 31, .78); }
.carte-legende { list-style: none; padding: 0; margin: 5px 0 0; display: grid; gap: 2px; font-size: 10.5px; color: var(--encre); }
.carte-legende li { display: flex; align-items: center; gap: 6px; }
.sw { flex: none; width: 16px; display: inline-flex; justify-content: center; align-items: center; }
.sw-zone { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #9A5B5E; background: rgba(154, 91, 94, .16); }
.sw-cercles { position: relative; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(138, 125, 116, .7); }
.sw-cercles::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; border: 1px solid rgba(138, 125, 116, .7); }
.sw-pistes { width: 16px; border-top: 1.5px dashed #3F8461; }
.carte-cartouche-loin { display: none; }
.carte-cartouche-credit { grid-column: 1 / -1; font-size: 8px; color: var(--encre-douce); margin-top: 5px; }

/* ---------- les plages autour, liste de sa mère (2026-10-06), même grille que les équipements ---------- */
.plages ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 18px; }
.plages li { border-top: 1px solid var(--filet); padding-top: 12px; }
.plages li b { display: block; font: italic 400 23px/1.15 var(--serif); color: var(--encre-forte); }
.plages li span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--encre-douce); margin-top: 5px; max-width: 30ch; }
.plages-foret { font-size: 16px; line-height: 1.5; color: var(--encre); }
.plages-foret b { font: italic 400 1.3em/1 var(--serif); color: var(--accent); }

/* ---------- bande de photos ---------- */
.galerie { position: relative; margin-top: clamp(48px, 8vh, 80px); }
.galerie-piste { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--marge); padding: 0 var(--marge) 8px; scrollbar-width: none; }
.galerie-piste::-webkit-scrollbar { display: none; }
.galerie-piste img, .jardin-duo img, .media img { -webkit-user-drag: none; user-select: none; }
.galerie-piste.tire { cursor: grabbing; user-select: none; }
.galerie-piste.tire img { cursor: grabbing; }
.galerie-piste figure { position: relative; flex: 0 0 min(84vw, 720px, calc(var(--h-max) * 4 / 3)); scroll-snap-align: start; }
.galerie-piste img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--rayon) * .6); background: var(--surface); }
.galerie-piste figcaption { font: italic 400 17px/1.3 var(--serif); color: var(--encre); margin-top: 12px; }
/* flèches posées sur les photos, rondes et claires ; la gauche n'apparaît qu'après avoir avancé */
.galerie-fleches { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 22px); display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--marge) + 14px); pointer-events: none; }
.galerie-fleches button { pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(245, 243, 239, .7); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 6px 18px -6px rgba(20, 14, 12, .35); cursor: pointer; display: grid; place-items: center; transition: opacity .3s var(--douce), transform .5s var(--ressort), background .2s var(--douce); }
.galerie-fleches button:active { transform: scale(.92); transition-duration: .1s; transition-timing-function: ease-out; }
.galerie-fleches button[disabled] { opacity: 0; pointer-events: none; }
.galerie-fleches svg { width: 20px; height: 20px; fill: none; stroke: var(--encre-forte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .galerie-fleches button:hover { background: #fff; } }
/* fine ligne de progression : le trait du site */
.galerie-progres { position: relative; height: 1.5px; margin: 20px var(--marge) 0; background: var(--filet); overflow: hidden; }
.galerie-progres span { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--encre-forte); transform-origin: left center; }   /* suit le défilement 1:1, sans retard */

/* ---------- photos qui s'ouvrent en grand : la main devient une loupe, une petite pastille de verre l'annonce au survol ---------- */
.ouvrable { position: relative; }
.ouvrable img { cursor: zoom-in; }
.ouvrable::after { content: ''; position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; pointer-events: none;
  background: rgba(245, 243, 239, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B221F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  opacity: 0; transform: scale(.8); transition: opacity .25s var(--douce), transform .5s var(--ressort); }
@media (hover: hover) and (pointer: fine) { .ouvrable:hover::after { opacity: 1; transform: none; } }
.media.ouvrable::after { top: 20px; right: 20px; }

/* ---------- la visionneuse : la photo grandit depuis sa place, le reste s'assombrit et se floute derrière ---------- */
.visionneuse { position: fixed; inset: 0; z-index: 50; }
.visionneuse.se-ferme { pointer-events: none; }
.visionneuse-fond { position: absolute; inset: 0; background: rgba(22, 17, 15, .9); opacity: 0; --flou: 0px; -webkit-backdrop-filter: blur(var(--flou)); backdrop-filter: blur(var(--flou)); }
.visionneuse-cadre { position: fixed; overflow: hidden; background: #2b2422; touch-action: none; cursor: grab; will-change: left, top, width, height; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.visionneuse-cadre:active { cursor: grabbing; }
.visionneuse-photo { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.visionneuse-bas { position: fixed; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: baseline; gap: 18px; padding: 0 84px; opacity: 0; pointer-events: none; }
.visionneuse-legende { font: italic 400 17px/1.35 var(--serif); color: rgba(245, 243, 239, .86); text-align: center; max-width: 60ch; text-wrap: balance; }
.visionneuse-compte { font: 500 12px/1 var(--police); letter-spacing: .08em; color: rgba(245, 243, 239, .5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.visionneuse-bouton { position: fixed; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; opacity: 0;
  background: rgba(245, 243, 239, .14); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background .2s var(--douce), transform .5s var(--ressort); }
.visionneuse-bouton svg { width: 20px; height: 20px; fill: none; stroke: #F5F3EF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.visionneuse-bouton:active { transform: scale(.9); transition-duration: .1s; transition-timing-function: ease-out; }
@media (hover: hover) and (pointer: fine) { .visionneuse-bouton:hover { background: rgba(245, 243, 239, .26); } }
.visionneuse-fermer { top: max(18px, env(safe-area-inset-top)); right: 18px; }
.visionneuse-prec, .visionneuse-suiv { top: 50%; margin-top: -23px; }
.visionneuse-prec { left: 22px; }
.visionneuse-suiv { right: 22px; }

/* ---------- le jardin : photo qui se fond dans la page ---------- */
.jardin { margin-top: var(--section); padding-bottom: calc(var(--section) * .6); }
.jardin-photo { position: relative; height: clamp(320px, 74svh, 760px); overflow: hidden; }
.jardin-photo img { width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.82) 68%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.2) 90%, rgba(0,0,0,.05) 96%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.82) 68%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.2) 90%, rgba(0,0,0,.05) 96%, transparent 100%); }
.bloc-serre { padding-top: 0; margin-top: -24px; position: relative; }
/* mosaïque du jardin (2026-10-11, ses photos de la terrasse) : la table dressée et l'apéritif en hauteur, la pelouse et le fond du jardin empilés à droite */
.jardin-duo { display: grid; grid-template-columns: 1fr 1fr 1.3fr; grid-template-rows: 1fr 1fr; gap: 16px; max-width: 1265px; width: calc(100% - 2 * var(--marge)); height: clamp(380px, calc(var(--h-max) + 10px), 580px); margin: 0 auto; }
.jardin-duo figure { min-height: 0; }
.jardin-duo .jardin-portrait { grid-row: 1 / 3; }
.jardin-duo img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--rayon) * .6); }

/* ---------- le village : étiquette, texte, photo collante ---------- */
.bloc-photo .bloc-corps { grid-column: 4 / 9; }
.bloc-photo .texte-colonne, .bloc-phare .texte-colonne, .bloc-photo .petit { margin-left: 0; }
.bloc-image { grid-column: 9 / 13; align-self: start; position: sticky; top: 84px; margin-top: 8px; }
.bloc-image img { width: 100%; aspect-ratio: 4 / 5; max-height: var(--h-max); object-fit: cover; border-radius: var(--rayon); }
.bloc-image img.cadre-gauche { object-position: 22% 50%; }   /* ruelle et vélos dans le cadre, le portant de vêtements hors cadre */
.plage-photo img.cadre-bas { object-position: 50% 78%; }       /* la plage plutôt que le ciel */
.plage-photo img.cadre-chemin { object-position: 50% 58%; }    /* le chemin et la mer au bout (sa photo du 2026-10-11) */
.lieux a, .conditions a { color: inherit; text-underline-offset: 3px; }
.bloc-image figcaption, .phare-photo figcaption { font: italic 400 15px/1.35 var(--serif); color: var(--encre-douce); margin-top: 10px; }
.lieux { margin-top: 36px; border-top: 1px solid var(--filet); }
.lieux > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.lieux dt { font: italic 400 18px/1.3 var(--serif); color: var(--accent); }
.lieux dd { font-size: 15.5px; line-height: 1.5; }

/* ---------- la plage : grande photo, texte posé dans un encart ---------- */
.plage { position: relative; height: max(400px, var(--h-max)); overflow: hidden; margin-top: calc(var(--section) * .4); }
.plage-photo { position: absolute; inset: 0; overflow: hidden; }
.plage-photo img { width: 100%; height: 100%; object-fit: cover; }
.plage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%), radial-gradient(ellipse 62% 80% at 0% 100%, rgba(20, 14, 12, .64), rgba(20, 14, 12, .26) 50%, transparent 76%); }   /* le titre reste lisible sur le sable clair */
.plage-titre { position: absolute; z-index: 2; left: var(--marge); right: var(--marge); bottom: clamp(28px, 6vh, 56px); color: #fff; max-width: 1200px; }
.plage-titre em { color: #F5E6E3; }
.plage-titre { text-shadow: 0 1px 26px rgba(20, 14, 12, .5); }
.plage-texte { max-width: 1440px; margin: 0 auto; padding: clamp(36px, 6vh, 56px) var(--marge) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.plage-texte .texte-colonne { grid-column: 4 / 10; margin: 0; max-width: 52ch; }
.plage-texte .credit { grid-column: 10 / 13; align-self: end; margin: 0; }
.plage-carte { position: absolute; left: var(--marge); bottom: var(--marge); max-width: 520px; background: var(--fond); border-radius: calc(var(--rayon) * .6); padding: clamp(24px, 3vw, 40px); }
.plage-carte .texte-colonne { margin-left: 0; margin-top: 22px; }
.plage-carte .credit { display: block; margin-top: 14px; }

/* ---------- le phare : photo haute, texte à côté ---------- */
.bloc-phare { align-items: end; }
.phare-photo { grid-column: 2 / 7; justify-self: end; width: 100%; max-width: calc(var(--h-max) * 4 / 5); }
.phare-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); }
.bloc-phare .bloc-corps { grid-column: 7 / 13; padding-left: clamp(0px, 2.4vw, 32px); }
.phare-encart { margin-top: 36px; max-width: 280px; }
.phare-encart img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--rayon) * .45); }
.phare-encart figcaption { font: italic 400 15px/1.35 var(--serif); color: var(--encre-douce); margin-top: 8px; }

/* ---------- venir ---------- */
.venir-chiffre { grid-column: 1 / 6; font: 300 clamp(96px, 11vw, 176px)/.85 var(--serif); letter-spacing: -.04em; color: var(--accent); align-self: center; white-space: nowrap; }
.venir .bloc-corps { grid-column: 6 / 13; align-self: center; }
.venir .texte-colonne, .venir .petit { margin-left: 0; }
.venir { max-width: none; background: var(--surface); padding-inline: max(var(--marge), calc((100vw - 1440px) / 2 + var(--marge))); padding-bottom: var(--section); margin-top: var(--section); }

/* ---------- prise de contact : aérée et structurée (refaite le 2026-10-09, « pas assez structurée et aérée et design ») ----------
   Même axe que les sections : nom de chapitre dans la marge, tout le reste à partir de la 4e colonne.
   À gauche les tarifs en cartouches et « Bon à savoir » en grille ; à droite une seule carte pour demander (formulaire + WhatsApp), qui reste à l’écran. */
/* 2026-10-11, sa demande : « monte le demandez vos dates, tout le tableau et ensuite il descend bien sur toute la section ».
   La section devient une seule grille (les deux blocs intérieurs s'effacent) : la carte part à la hauteur du titre et reste à l'écran jusqu'au bas de « Bon à savoir ». */
.contact { background: var(--sombre); color: rgba(245, 243, 239, .86); padding: var(--section) max(var(--marge), calc((100% - 1440px) / 2 + var(--marge))) calc(var(--section) * .8); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.contact-tete, .contact-corps { display: contents; }
.contact-tete .etiquette { grid-column: 1 / 4; grid-row: 1; align-self: start; }
.contact-tete h2 { grid-column: 4 / 9; grid-row: 1; }
.contact h2 { color: #F5F3EF; }
.contact h2 em { color: var(--accent-clair); }
.contact-infos { grid-column: 4 / 9; grid-row: 2; margin-top: clamp(44px, 7vh, 72px); display: grid; row-gap: clamp(44px, 7vh, 64px); }
.contact-titre { font: italic 400 22px/1.2 var(--serif); color: var(--accent-clair); margin-bottom: 14px; }
.tarifs-grille, .conditions dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 32px); }
.tarifs-grille li { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 18px; border-top: 1px solid rgba(245, 243, 239, .14); }
.tarifs-grille span { font-size: 13.5px; line-height: 1.3; color: rgba(245, 243, 239, .62); }
.tarifs-grille b { font: 300 32px/1 var(--serif); letter-spacing: -.01em; color: #F5F3EF; }
.tarifs-grille .note { justify-content: center; font: italic 400 15px/1.4 var(--serif); color: rgba(245, 243, 239, .7); }
.conditions dl > div { padding: 12px 0 14px; border-top: 1px solid rgba(245, 243, 239, .14); }
.conditions dl > div.large { grid-column: 1 / -1; }
.conditions dt { font: italic 400 16px/1.2 var(--serif); color: rgba(245, 243, 239, .6); margin-bottom: 5px; }
.conditions dd { font-size: 14.5px; line-height: 1.45; color: #F5F3EF; }
.conditions a { color: inherit; text-underline-offset: 3px; }

.contact-demande { grid-column: 9 / 13; grid-row: 1 / 3; align-self: start; position: sticky; top: 76px; background: var(--fond); color: var(--encre); border-radius: calc(var(--rayon) * .6); padding: clamp(18px, 2vw, 26px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 4px rgba(0, 0, 0, .12), 0 24px 60px -18px rgba(0, 0, 0, .6); }
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.formulaire .contact-titre { grid-column: 1 / -1; color: var(--accent); margin-bottom: 2px; }
.formulaire label { display: flex; flex-direction: column; gap: 6px; font: 500 12.5px/1 var(--police); color: var(--encre-douce); }
.formulaire label small { font-weight: 400; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire input, .formulaire select, .formulaire textarea { min-width: 0; font: 400 15px/1.3 var(--police); color: var(--encre-forte); background: #fff; border: 1px solid var(--filet); border-radius: 10px; padding: 9px 12px; }
.formulaire input, .formulaire select, .formulaire textarea { transition: border-color .2s var(--douce), box-shadow .3s var(--douce); }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(154, 91, 94, .14); }
/* une erreur se signale dès qu'on quitte le champ, pas au moment d'envoyer */
.formulaire input:user-invalid { border-color: #B5524A; box-shadow: 0 0 0 4px rgba(181, 82, 74, .12); }
.formulaire-nuits { margin-top: -2px; font: italic 400 15px/1.3 var(--serif); color: var(--accent); }
.formulaire-nuits:empty { display: none; }
.formulaire-nuits.alerte { color: #B5524A; }
.formulaire textarea { resize: vertical; }
.formulaire button { grid-column: 1 / -1; margin-top: 4px; padding: 14px 24px; }
.formulaire-retour { font-size: 13.5px; color: var(--accent); }
.formulaire-retour:empty { display: none; }
.contact-ou { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font: italic 400 15px/1 var(--serif); color: var(--encre-douce); }
.contact-ou::before, .contact-ou::after { content: ''; flex: 1; height: 1px; background: var(--filet); }
.bouton-whatsapp { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(43, 34, 31, .2); color: var(--encre-forte); text-decoration: none; font: 500 14.5px/1 var(--police); transition: background .2s var(--douce), border-color .2s var(--douce); }
.bouton-whatsapp svg { width: 18px; height: 18px; fill: #3E8E5A; }
@media (hover: hover) and (pointer: fine) { .bouton-whatsapp:hover { background: rgba(43, 34, 31, .05); border-color: rgba(43, 34, 31, .35); } }


/* ---------- pied ---------- */
/* pied de page : dans la continuité de « Vos dates », discret, ce que la loi demande d'afficher (2026-10-12) */
.pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 28px; background: var(--sombre); color: rgba(245, 243, 239, .55); padding: 22px max(var(--marge), calc((100% - 1440px) / 2 + var(--marge))) max(26px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(245, 243, 239, .1); font-size: 13px; }
.pied-marque { font: italic 400 16px/1 var(--serif); color: rgba(245, 243, 239, .86); }
.pied a { color: rgba(245, 243, 239, .78); text-underline-offset: 3px; transition: color .2s var(--douce); }
@media (hover: hover) and (pointer: fine) { .pied a:hover { color: #F5F3EF; } }
/* piège à robots du formulaire : invisible pour les visiteurs */
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire button[disabled] { opacity: .6; cursor: progress; }

/* ---------- photos : un seul traitement léger ---------- */
.media img, .galerie-piste img, .jardin-photo img, .jardin-duo img, .bloc-image img, .plage-photo img, .phare-photo img, .phare-encart img, .accueil-photo { filter: saturate(.92); }

/* ---------- animations (L2) : transform et opacité seulement, tout reste visible sans JS ---------- */
.accueil-photo { animation: poser 2.6s var(--sortie) both; }
@keyframes poser { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.accueil-bas > *, .accueil-haut { animation: monter 1s var(--sortie) both; }
.accueil-haut { animation-delay: .2s; }
.accueil-lieu { animation-delay: .3s; }
.accueil-bas h1 { animation-delay: .4s; }
.accueil-texte { animation-delay: .52s; }
.accueil-boutons { animation-delay: .64s; }
@keyframes monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.js h2 .mot { display: inline-block; opacity: 0; transform: translateY(.24em); filter: blur(4px);
  transition: opacity .6s var(--douce), transform .9s var(--ressort), filter .6s var(--douce); transition-delay: calc(var(--i) * 45ms); }
.js h2.vu .mot { opacity: 1; transform: none; filter: none; }
.js .apparaitre { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--douce), transform 1s var(--ressort); }
.js .apparaitre.vu { opacity: 1; transform: none; }
.js .apparaitre-enfants > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--douce), transform .9s var(--ressort); transition-delay: calc(var(--i, 0) * 60ms); }
.js .apparaitre-enfants.vu > * { opacity: 1; transform: none; }
.js .agrandir { transform: scale(calc(.9 + .1 * var(--p, 1))); transform-origin: 50% 0; will-change: transform; }
.js .parallaxe img { transform: translateY(calc(var(--py, 0) * 1px)) scale(1.12); will-change: transform; }

/* ---------- tablette ---------- */
@media (max-width: 1100px) {
  .barre ul { display: none; }
  .accueil-liens { display: none; }
}
@media (max-width: 1000px) {
  .bloc > .etiquette, .contact-intro .etiquette { grid-column: 1 / -1; margin-bottom: 18px; padding-top: 0; }
  .bloc-corps, .bloc-photo .bloc-corps, .bloc-phare .bloc-corps, .contact-intro h2, .contact-intro .texte-colonne { grid-column: 1 / -1; padding-left: 0; }
  .texte-colonne, .petit, .contact-intro .texte-colonne { margin-left: 0; }
  .citation { margin-left: 0; }
  .bloc-maison { grid-template-rows: none; }
  .bloc-maison > .etiquette { grid-row: auto; align-self: start; padding-left: 0; }
  .bloc-maison .bloc-corps { display: contents; }
  .bloc-maison h2 { grid-column: 1 / -1; order: 1; }
  .bloc-maison .media { grid-column: 1 / -1; grid-row: auto; order: 2; margin: 28px 0 0; border-radius: calc(var(--rayon) * .8); }
  .bloc-maison .citation { grid-column: 1 / -1; order: 3; }
  .js .bloc-maison .agrandir { transform-origin: 50% 0; }
  .bloc-image, .phare-photo { grid-column: 1 / -1; position: relative; top: 0; margin-top: 36px; }
  .bloc-image img, .phare-photo img { aspect-ratio: 4 / 3; }
  .phare-photo img { aspect-ratio: 3 / 4; max-height: 70svh; width: auto; margin: 0 auto; }
  .frise ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .frise-trait { display: none; }
  .frise li { border-top: 1.5px solid var(--encre-forte); padding-top: 22px; }
  .frise li::before { top: -7px; }
  .plage-texte .texte-colonne, .plage-texte .credit { grid-column: 1 / -1; }
  .plage-texte .credit { margin-top: 12px; }
  .venir-chiffre, .venir .bloc-corps { grid-column: 1 / -1; }
  .venir-chiffre { margin-bottom: 20px; }
  .bloc-phare .phare-photo { order: 3; }
  .equipements, .plages { row-gap: 12px; }
  .equipements-titre, .equipements ul, .plages ul, .plages-foret { grid-column: 1 / -1; }
  .equipements-titre { padding-left: 0; }
  .equipements ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; margin-bottom: 18px; }
  .plages ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plages-foret { margin-top: 6px; }
  .contact-tete .etiquette, .contact-tete h2, .contact-infos, .contact-demande { grid-column: 1 / -1; grid-row: auto; }
  .contact-tete .etiquette { margin-bottom: 18px; padding-top: 0; }
  .contact-demande { position: static; margin-top: clamp(40px, 6vh, 56px); }
}

/* ---------- téléphone ---------- */
@media (max-width: 640px) {
  .pastille { padding: 14px 14px; font-size: 12.5px; }
  .accueil-liens { display: none; }
  .accueil-photo { object-position: 64% 50%; }
  .accueil h1 em { padding-left: .35em; }
  .accueil-texte { margin-top: 12px; }
  .accueil-boutons { margin-top: 18px; }
  h2 em { padding-left: .35em; }
  h2 { letter-spacing: -.024em; }
  .visionneuse-prec, .visionneuse-suiv { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); margin-top: 0; }
  .visionneuse-bas { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px); padding: 0 20px; flex-direction: column; align-items: center; gap: 8px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres li { padding-left: 0; padding-right: 10px; border-left: 0; border-top: 1px solid var(--filet); }
  .chiffres li:nth-child(-n+2) { border-top: 0; }
  .axo-bloc { grid-template-columns: 1fr; }
  .axo { max-height: none; }
  .equipements ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plages ul { grid-template-columns: 1fr; row-gap: 14px; }
  /* carte : agrandie et recentrée sur la maison (fond aux traits plus épais), éléments secondaires retirés, cartouche sous la carte */
  .carte-plan { width: 185%; margin-left: -45%; }
  .carte-dessus .nom { font-size: 26px; }
  .carte-dessus .sous, .carte-dessus .bord, .carte-dessus .maison-sur, .carte-maison .picto-maison, .carte-dessus .zone.mer { display: none; }
  .carte-lieu .pastille { transform: scale(1.45); }
  .carte-dessus .zone { font-size: 16px; }
  .carte-dessus .carte-cercles text { font-size: 16px; }
  .carte-dessus .maison-nom { font-size: 36px; }
  .carte-cercles circle { stroke-width: .9px; vector-effect: non-scaling-stroke; }
  .carte-maison .zone-maison { stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
  .carte-cartouche { position: static; grid-template-columns: 110px minmax(0, 1fr); align-items: start; border: 0; border-top: 1px solid rgba(43, 34, 31, .1); border-radius: 0; padding: 14px 16px 12px; }
  .carte-ile { width: 110px; }
  .carte-echelle .echelle-trait { width: calc(44 / 1200 * 185cqw); }
  .carte-cartouche-loin { display: block; font-size: 11.5px; line-height: 1.4; color: var(--encre-douce); margin-top: 8px; }
  .maquette-3d { height: min(82vw, 380px); }
  .galerie-fleches { padding: 0 calc(var(--marge) + 8px); }
  .galerie-fleches button { width: 42px; height: 42px; }
  .conditions dl { grid-template-columns: 1fr; }
  .tarifs-grille b { font-size: 26px; }
  .frise ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plage { height: auto; overflow: visible; }
  .plage-photo { position: relative; height: 60svh; }
  .plage-carte { position: relative; left: auto; bottom: auto; margin: -64px 12px 0; }
  .jardin-duo { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; gap: 10px; }
  .jardin-duo .jardin-portrait { grid-row: auto; }
  .jardin-duo .jardin-portrait img { aspect-ratio: 3 / 4; }
  .jardin-duo figure:not(.jardin-portrait) { grid-column: 1 / -1; }
  .jardin-duo figure:not(.jardin-portrait) img { aspect-ratio: 4 / 3; }
  .formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied { flex-direction: column; gap: 8px; }
}

/* moins de mouvement : plus rien ne glisse ni ne grandit, mais les fondus courts restent, ils aident à comprendre */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color, box-shadow !important; transition-duration: .2s !important; transition-delay: 0s !important; }
  .barre { transform: none; }
  .js h2 .mot, .js .apparaitre, .js .apparaitre-enfants > * { opacity: 1; filter: none; transform: none; }
  .js .citation .cw { opacity: 1; }
  .js .etiquette::after { transform: none; }
  .js .agrandir, .js .parallaxe img { transform: none; }
  .js .axo-bloc .axo .contour, .js .axo-bloc .axo .piece { stroke-dashoffset: 0; }
}

/* moins de transparence : les matières dépolies deviennent pleines */
@media (prefers-reduced-transparency: reduce) {
  .barre { background: var(--fond); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bouton-contour { background: rgba(20, 14, 12, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .galerie-fleches button, .ouvrable::after { background-color: var(--fond); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .visionneuse-fond { background: rgb(22, 17, 15); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .visionneuse-bouton { background: #3a3230; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* plus de contraste : fonds pleins, bords nets, textes secondaires plus foncés */
@media (prefers-contrast: more) {
  :root { --encre: rgba(43, 34, 31, .95); --encre-douce: rgba(43, 34, 31, .85); --filet: rgba(43, 34, 31, .45); }
  .barre { background: var(--fond); box-shadow: inset 0 -1px 0 var(--encre-forte); }
  .bouton-contour { background: rgba(20, 14, 12, .6); box-shadow: inset 0 0 0 1.5px #fff; }
}