/*
Theme Name: SN Immobilier
Theme URI: https://sn-immobilier.com
Author: TC Business Consulting
Description: Thème bloc sur mesure du site SN Immobilier, converti depuis la maquette validée. Les programmes se gèrent dans le menu Programmes.
Version: 1.0.20261111154854
Requires at least: 6.6
Requires PHP: 8.1
License: Propriétaire
Text Domain: sn-immobilier
*/

/* SN Immobilier — feuille de style de la maquette
   Registre : capitales à fort contraste, texte fin, beaucoup d'air, navy et blanc.
   Palette prélevée sur le logo. */

@font-face {
  font-family: 'Italiana';
  src: url('assets/fonts/italiana.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* Les chiffres d'Italiana se lisent mal (« 01 » devient « OI ») : ils viennent de Gilda Display, même classe. */
@font-face {
  font-family: 'Chiffres SN';
  src: url('assets/fonts/chiffres.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0030-0039, U+0025, U+00B2;
}
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy: #00244E;
  --nuit: #00152F;
  --texte: #2A4E72;
  --vague: #488ABA;
  --ecume: #D8DEF0;
  --brume: #F1F4F9;
  --blanc: #FFFFFF;

  --titres: 'Chiffres SN', 'Italiana', 'Times New Roman', serif;
  --corps: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --marge: clamp(20px, 5.5vw, 88px);
  --section: clamp(90px, 12vw, 190px);
  --ease: cubic-bezier(.2, .75, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font: 300 clamp(16px, 10.2px + .5vw, 20px)/1.8 var(--corps);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  hyphens: none;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
figure, ul, ol, p, h1, h2, h3 { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--vague); outline-offset: 3px; }

.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.titre-xl, .titre-l, .titre-m {
  font-family: var(--titres);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--navy);
  text-wrap: balance;
  letter-spacing: .012em;
}
.titre-xl { font-size: clamp(46px, 7.6vw, 124px); line-height: 1; }
.titre-l { font-size: clamp(38px, 5.4vw, 86px); line-height: 1.04; }
.titre-m { font-size: clamp(25px, 2.5vw, 38px); line-height: 1.16; letter-spacing: .03em; }
.accent { color: var(--vague); }

.surtitre {
  font: 400 clamp(11.5px, .82vw, 14px)/1.5 var(--corps);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texte);
}

/* Étiquette en deux parties : lisible sur n'importe quelle photo */
.etiquette-double {
  display: inline-flex;
  flex-wrap: wrap;
  font: 400 clamp(10px, .8vw, 13px)/1 var(--corps);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.etiquette-double b { padding: .85em 1.15em; background: var(--blanc); color: var(--navy); font-weight: 600; }
.etiquette-double span { padding: .85em 1.15em; background: var(--navy); color: var(--blanc); }

/* Boutons : rectangles blancs à ombre franche, comme sur la référence RL */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 17px 28px;
  background: var(--blanc);
  color: var(--navy);
  font: 500 14px/1 var(--corps);
  letter-spacing: .04em;
  box-shadow: 0 8px 26px rgba(0, 36, 78, .2);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.bouton svg { width: 22px; height: 10px; transition: transform .35s var(--ease); }
/* Survols réservés aux écrans à souris : sur un écran tactile, ils resteraient collés après le toucher. */
@media (hover: hover) {
  .bouton:hover { background: var(--navy); color: var(--blanc); box-shadow: 0 12px 32px rgba(0, 36, 78, .35); }
  .bouton:hover svg { transform: translateX(5px); }
}

.lien-trait {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
  color: var(--navy);
  font: 500 14px/1 var(--corps);
  letter-spacing: .04em;
  border-bottom: 1px solid var(--navy);
}
.lien-trait svg { width: 22px; height: 10px; transition: transform .35s var(--ease); }
.lien-trait:hover svg { transform: translateX(5px); }

/* ---------- En-tête ---------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px var(--marge);
  color: var(--blanc);
  transition: background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.logo { position: relative; display: block; flex: none; width: 58px; height: 72px; transition: width .4s var(--ease), height .4s var(--ease); }
.logo img { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; transition: opacity .35s var(--ease); }
.logo-complet { opacity: 0; }
.menu { display: flex; gap: clamp(20px, 2.6vw, 44px); margin-left: auto; font: 400 12.5px/1 var(--corps); letter-spacing: .13em; text-transform: uppercase; }
.menu a { position: relative; padding: 8px 0; white-space: nowrap; }
.menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.menu a:hover::after { transform: scaleX(1); }
.entete-cta {
  flex: none;
  padding: 13px 22px;
  border: 1px solid currentColor;
  font: 500 12px/1 var(--corps);
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.entete-cta:hover { background: var(--blanc); border-color: var(--blanc); color: var(--navy); }
.burger { display: none; flex: none; width: 46px; height: 46px; margin-left: auto; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 27px; }
.menu-ouvert .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-ouvert .burger span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

.entete:not(.defile) .menu { text-shadow: 0 1px 14px rgba(0, 21, 47, .75); }
.entete.defile { background: var(--blanc); color: var(--navy); padding-top: 10px; padding-bottom: 10px; box-shadow: 0 1px 0 var(--ecume); }
.entete.defile .logo { width: 174px; height: 47px; }
.entete.defile .logo-symbole { opacity: 0; }
.entete.defile .logo-complet { opacity: 1; }
.entete.defile .entete-cta:hover { background: var(--navy); border-color: var(--navy); color: var(--blanc); }

/* ---------- Hero : un programme par diapositive ---------- */
.hero {
  --i: 0;
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--nuit);
  color: var(--blanc);
  touch-action: pan-y;
}
.hero-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s var(--ease); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.09); transition: transform 1.3s var(--ease); }
.hero-photo.est-active { opacity: 1; }
.hero-photo.est-active img { transform: scale(1); transition: transform 9s linear; }
.hero-voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 21, 47, .55) 0%, rgba(0, 21, 47, 0) 20%),
    linear-gradient(0deg, rgba(0, 21, 47, .9) 0%, rgba(0, 21, 47, .58) 32%, rgba(0, 21, 47, 0) 70%),
    linear-gradient(90deg, rgba(0, 21, 47, .68) 0%, rgba(0, 21, 47, .34) 38%, rgba(0, 21, 47, 0) 64%),
    linear-gradient(270deg, rgba(0, 21, 47, .42) 0%, rgba(0, 21, 47, 0) 26%);
}
.hero-diapos { position: absolute; z-index: 2; left: var(--marge); right: var(--marge); bottom: clamp(70px, 9vh, 110px); height: 0; transform: translate3d(var(--glisse, 0px), 0, 0); transition: transform .45s var(--ease); }
.hero.glisse { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.hero.glisse .hero-diapos { transition: none; }
.hero-glisser { display: none; }
.diapo { position: absolute; left: 0; bottom: 0; width: min(100%, 880px); visibility: hidden; transition: visibility 0s .55s; }
.diapo.est-active { visibility: visible; transition-delay: 0s; }
/* L'étiquette sortante s'efface avant que la suivante apparaisse : jamais deux à l'écran. */
.diapo .etiquette-double { margin-bottom: 18px; opacity: 0; transform: translateY(8px); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.diapo.est-active .etiquette-double { opacity: 1; transform: none; transition: opacity .7s var(--ease) .34s, transform .7s var(--ease) .34s; }
.hero-titre { font: 400 clamp(52px, 8.4vw, 138px)/.98 var(--titres); text-transform: uppercase; letter-spacing: .008em; margin-bottom: 24px; text-shadow: 0 2px 34px rgba(0, 21, 47, .5); }
.hero-titre-long { font-size: clamp(42px, 7.2vw, 118px); }
.masque { display: block; overflow: hidden; padding-top: .16em; margin-top: -.16em; }
.masque > span { display: block; transform: translateY(112%); transition: transform .3s cubic-bezier(.6, 0, .9, .3); }
.diapo.est-active .masque > span { transform: none; transition: transform 1s var(--ease) .32s; }
.diapo.est-active .masque + .masque > span { transition-delay: .42s; }
.hero-texte, .diapo .bouton { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.hero-texte { max-width: 30em; font-size: .92em; line-height: 1.7; font-weight: 400; margin-bottom: 26px; text-shadow: 0 1px 14px rgba(0, 21, 47, .65); }
.diapo.est-active .hero-texte, .diapo.est-active .bouton { opacity: 1; transform: none; transition: opacity .8s var(--ease) .55s, transform .8s var(--ease) .55s; }
.diapo.est-active .bouton { transition: opacity .8s var(--ease) .65s, transform .8s var(--ease) .65s, background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }

/* Chiffres qui roulent */
.roule { --h: 1.2em; display: block; height: var(--h); overflow: hidden; }
.roule-piste { display: block; transform: translateY(calc(var(--i) * var(--h) * -1)); transition: transform .95s var(--ease); }
.roule-piste > span { display: block; height: var(--h); line-height: var(--h); white-space: nowrap; }

.hero-compteur {
  position: absolute;
  z-index: 2;
  right: var(--marge);
  top: 26%;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  font-family: var(--titres);
  /* drop-shadow et non text-shadow : l'ombre d'un texte découpé dessinerait un rectangle autour du chiffre. */
  filter: drop-shadow(0 2px 12px rgba(0, 21, 47, .7));
}
.hero-compteur .roule { --h: 1.04em; font-size: clamp(48px, 5vw, 78px); }
.hero-compteur small { font: 400 15px/1 var(--corps); padding-bottom: .42em; }
.hero-fleches { position: absolute; z-index: 2; right: var(--marge); top: calc(26% + clamp(80px, 8vw, 112px)); display: grid; gap: 12px; justify-items: end; }
.fleche {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--navy);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.fleche svg { width: 20px; height: 12px; }
@media (hover: hover) {
  .fleche:hover { background: var(--navy); color: var(--blanc); transform: scale(1.06); }
}

.hero-panneau {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: min(52vw, 700px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 26px clamp(20px, 3vw, 44px) 24px;
  background: var(--blanc);
  color: var(--navy);
}
.hero-panneau > div { padding: 0 clamp(10px, 1.6vw, 24px); border-left: 1px solid var(--ecume); min-width: 0; }
.hero-panneau > div:first-of-type { border-left: 0; padding-left: 0; }
.panneau-valeur { --h: 1.2em; font: 400 clamp(18px, 1.72vw, 26px)/1 var(--titres); letter-spacing: .02em; }
.panneau-legende { --h: 1.5em; margin-top: 4px; font: 400 11.5px/1 var(--corps); color: var(--texte); }
.hero-barre { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ecume); overflow: hidden; }
.hero-barre i { display: block; height: 100%; background: var(--navy); transform: scaleX(0); transform-origin: left; }
.hero-defile {
  position: absolute;
  z-index: 2;
  left: var(--marge);
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 11px/1 var(--corps);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero-defile i { display: block; width: 44px; height: 1px; background: currentColor; }

/* ---------- Tout ce qui suit vient recouvrir le hero, comme un rideau ---------- */
.suite { position: relative; z-index: 1; background: var(--blanc); overflow-x: clip; }

/* ---------- Manifeste ---------- */
.manifeste { padding: var(--section) var(--marge) calc(var(--section) * .9); text-align: center; }
.manifeste .surtitre { margin-bottom: 26px; }
.manifeste-titre { max-width: 1130px; margin: 0 auto; }
.lecture .mot { color: var(--ecume); transition: color .5s linear; }
.lecture .mot.lu { color: var(--navy); }
.manifeste-texte.lecture .mot.lu { color: var(--texte); }
.chevrons { display: flex; justify-content: center; margin: clamp(46px, 6vw, 92px) -12vw; will-change: transform; }
.chevron {
  flex: none;
  width: clamp(170px, 24vw, 370px);
  aspect-ratio: .86;
  margin-left: clamp(-92px, -6vw, -42px);
  clip-path: polygon(0 0, 66% 0, 100% 50%, 66% 100%, 0 100%, 34% 50%);
}
.chevron:first-child { margin-left: 0; }
.chevron img { width: 100%; height: 100%; object-fit: cover; }
.chevron:nth-child(2) img { object-position: 62% 50%; }
.manifeste-texte { max-width: 760px; margin: 0 auto; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.7; font-weight: 400; }

/* ---------- Concevoir et fabriquer : fond nuit, titre à cheval sur les photos ---------- */
.fabrique { position: relative; overflow: hidden; padding: var(--section) var(--marge); background: var(--nuit); color: var(--ecume); }
.fabrique-vagues { position: absolute; left: 0; right: 0; top: 34%; width: 100%; height: auto; color: var(--vague); opacity: .075; pointer-events: none; }
.fabrique-grille {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 20px;
}
.fabrique-titre {
  position: relative;
  z-index: 3;
  grid-column: 1 / 13;
  grid-row: 1;
  align-self: start;
  margin-top: clamp(20px, 4.6vw, 80px);
  font: 400 clamp(46px, 8.5vw, 140px)/1 var(--titres);
  text-transform: uppercase;
  color: var(--blanc);
}
.fabrique-photo-a { position: relative; grid-column: 6 / 12; grid-row: 1 / 3; z-index: 1; aspect-ratio: 1.42; }
.fabrique-photo-a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 21, 47, .74) 0%, rgba(0, 21, 47, .56) 52%, rgba(0, 21, 47, 0) 92%); }
.fabrique-photo-b { grid-column: 2 / 5; grid-row: 2 / 4; z-index: 2; aspect-ratio: .92; margin-top: clamp(60px, 11vw, 180px); }
.fabrique-texte { grid-column: 6 / 11; grid-row: 3; margin-top: 44px; font-size: .92em; line-height: 1.85; }
.fabrique-grille img { width: 100%; height: 100%; object-fit: cover; }

/* Quatre colonnes égales, même ligne de base : le client les préfère ainsi aux chiffres dispersés de la référence. */
.chiffres { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(70px, 9vw, 140px); border-top: 1px solid rgba(216, 222, 240, .26); }
.chiffre { padding: clamp(26px, 3vw, 46px) clamp(18px, 2.4vw, 40px) 4px; border-left: 1px solid rgba(216, 222, 240, .26); }
.chiffre:first-child { padding-left: 0; border-left: 0; }
.chiffre b { display: block; font: 400 clamp(56px, 6vw, 104px)/1 var(--titres); color: var(--blanc); white-space: nowrap; }
.chiffre b em { font-style: normal; }
.chiffre strong { display: block; margin: 14px 0 4px; font: 600 .82em/1.4 var(--corps); color: var(--blanc); }
.chiffre span { display: block; max-width: 17em; font-size: .8em; line-height: 1.6; }

/* ---------- Programmes en cours ---------- */
.programmes { position: relative; padding: var(--section) 0 calc(var(--section) * .8); }
.programmes-tete { display: grid; justify-items: center; padding: 0 var(--marge); text-align: center; }
.programmes-tete .surtitre { margin-bottom: 18px; font-weight: 300; font-size: 14px; letter-spacing: .1em; }
.programmes-tete .titre-l { letter-spacing: .1em; }
.programmes-intro { max-width: 46em; margin-top: 30px; text-wrap: pretty; }
.programmes-suite { display: flex; justify-content: center; margin-top: clamp(44px, 4.4vw, 70px); padding: 0 var(--marge); }
.rail-enveloppe { position: relative; margin-top: clamp(40px, 4vw, 64px); }
/* Les marges masquent la carte voisine : on voit toujours trois cartes entières. */
.rail-enveloppe::before, .rail-enveloppe::after { content: ''; position: absolute; z-index: 2; top: 0; bottom: 0; width: var(--marge); background: var(--blanc); pointer-events: none; }
.rail-enveloppe::before { left: 0; }
.rail-enveloppe::after { right: 0; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 36px) / 3);
  gap: 36px;
  padding: 0 var(--marge) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--marge);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.carte { scroll-snap-align: start; min-width: 0; }
.carte-photo { position: relative; aspect-ratio: 1.26; overflow: hidden; }
.carte-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.carte:hover .carte-photo img { transform: scale(1.05); }
.etiquette { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: .75em; padding: .95em 1.35em; background: var(--navy); color: var(--blanc); font: 600 clamp(11px, .84vw, 13.5px)/1 var(--corps); letter-spacing: .15em; text-transform: uppercase; }
.etiquette.lancement::before { content: ''; flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--blanc); animation: pulsation 2.4s ease-out infinite; }
@keyframes pulsation {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
  70%, 100% { box-shadow: 0 0 0 .85em rgba(255, 255, 255, 0); }
}
.carte-titre { margin-top: 22px; font: 400 clamp(25px, 2.25vw, 34px)/1.12 var(--titres); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.carte-lieu { margin-top: 6px; font-size: .82em; letter-spacing: .08em; text-transform: uppercase; }
.carte-infos { margin-top: 14px; display: grid; gap: 7px; font-size: .88em; line-height: 1.5; }
.carte-infos li { display: flex; align-items: center; gap: 13px; }
.carte-infos svg { flex: none; width: 24px; height: 12px; color: var(--navy); }
.rail-fleche {
  position: absolute;
  z-index: 3;
  top: 27%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--navy);
  transition: background .3s var(--ease), color .3s var(--ease), opacity .3s;
}
.rail-fleche svg { width: 24px; height: 12px; }
@media (hover: hover) {
  .rail-fleche:hover { background: var(--navy); color: var(--blanc); }
}
.rail-fleche[disabled] { opacity: .32; pointer-events: none; }
.rail-fleche.gauche { left: max(6px, calc(var(--marge) / 2 - 31px)); }
.rail-fleche.droite { right: max(6px, calc(var(--marge) / 2 - 31px)); }

/* ---------- Bandeau défilant ---------- */
/* La bannière avance seule, accélère et s'inverse avec le défilement, et s'arrête au survol :
   chaque mot montre alors le programme qui l'incarne et mène vers lui. */
.bandeau { position: relative; overflow: hidden; padding: clamp(24px, 2.8vw, 42px) 0; background: var(--navy); color: var(--blanc); }
.bandeau::before, .bandeau::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; width: 9vw; pointer-events: none; }
.bandeau::before { left: 0; background: linear-gradient(90deg, var(--navy), rgba(0, 36, 78, 0)); }
.bandeau::after { right: 0; background: linear-gradient(270deg, var(--navy), rgba(0, 36, 78, 0)); }
.bandeau-piste { --r: 0deg; display: flex; width: max-content; font: 400 clamp(36px, 5vw, 78px)/1.1 var(--titres); text-transform: uppercase; will-change: transform; }
.bandeau-mot { display: flex; align-items: center; white-space: nowrap; transition: opacity .35s var(--ease); }
.bandeau-mot i { display: inline-block; margin: 0 .5em; font: 200 .72em/1 var(--corps); font-style: normal; color: var(--vague); transform: rotate(var(--r)); }
.bandeau.survol .bandeau-mot { opacity: .3; }
.bandeau.survol .bandeau-mot.actif { opacity: 1; }
.bandeau-apercus {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: clamp(260px, 24vw, 380px);
  aspect-ratio: 1.3;
  pointer-events: none;
  will-change: transform;
}
.bandeau-apercu { position: absolute; inset: 0; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path .55s var(--ease); }
.bandeau-apercu.actif { clip-path: inset(0 0 0 0); }
.bandeau-apercu img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1s var(--ease); }
.bandeau-apercu.actif img { transform: scale(1); }
.bandeau-apercu figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 16px 11px; background: var(--blanc); color: var(--navy); font: 400 clamp(17px, 1.5vw, 23px)/1.15 var(--titres); letter-spacing: .05em; text-transform: uppercase; }
.bandeau-apercu small { display: block; margin-top: 3px; font: 400 11px/1.3 var(--corps); letter-spacing: .04em; text-transform: none; color: var(--texte); }
@media (hover: none) { .bandeau-apercus { display: none; } }

/* ---------- Du plan à la mer : photo posée sur un panneau-plan ---------- */
.plans { padding: var(--section) 0 calc(var(--section) * .6); }
.plan-ligne { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: center; }
.plan-ligne + .plan-ligne { margin-top: clamp(90px, 11vw, 180px); }
.plan-texte { grid-column: 2 / 6; grid-row: 1; }
.plan-texte .titre-l { margin: 16px 0 26px; }
.plan-texte p + p { margin-top: 16px; }
.plan-texte .lien-trait { margin-top: 30px; }
.plan-visuel { grid-column: 6 / 13; grid-row: 1; position: relative; min-height: clamp(380px, 46vw, 680px); }
.plan-panneau { position: absolute; right: 0; top: 0; bottom: 0; width: 72%; background: var(--navy); overflow: hidden; }
.plan-panneau svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--blanc); }
.plan-photo { position: absolute; left: 0; top: 16%; width: 70%; aspect-ratio: 1.36; z-index: 2; }
.plan-photo::before { content: ''; position: absolute; z-index: -1; right: -3.4%; top: -8%; width: 74%; height: 66%; background: var(--vague); }
.plan-photo img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 26px 60px rgba(0, 21, 47, .32); }

.plan-ligne.inverse .plan-texte { grid-column: 8 / 12; }
.plan-ligne.inverse .plan-visuel { grid-column: 1 / 8; min-height: clamp(320px, 38vw, 560px); }
.plan-ligne.inverse .plan-panneau { right: auto; left: 0; width: 62%; }
.plan-ligne.inverse .plan-photo { left: auto; right: 0; top: 22%; width: 66%; }
.plan-ligne.inverse .plan-photo::before { right: auto; left: -3.4%; }

/* ---------- Grande photo, grand titre, cartes de verre ---------- */
.art { position: relative; min-height: 118vh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(70px, 9vw, 140px) var(--marge) clamp(36px, 4vw, 64px); overflow: hidden; color: var(--blanc); }
.art-fond { position: absolute; inset: -10% 0; z-index: 0; will-change: transform; }
.art-fond img { width: 100%; height: 100%; object-fit: cover; }
.art::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 21, 47, .66) 0%, rgba(0, 21, 47, .2) 52%, rgba(0, 21, 47, .5) 100%); }
.art > *:not(.art-fond) { position: relative; z-index: 1; }
.art .titre-xl { color: var(--blanc); max-width: 1300px; }
.art-texte { max-width: 29em; margin: 28px 0 0 auto; font-size: .92em; line-height: 1.75; font-weight: 400; }
.art-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.5vw, 24px); margin-top: 40vh; }
.art-carte { padding: 26px 28px 30px; background: rgba(255, 255, 255, .94); color: var(--texte); }
.art-carte small { display: block; font: 400 12px/1.4 var(--corps); letter-spacing: .04em; }
.art-carte b { display: block; margin: 10px 0 12px; font: 400 clamp(26px, 2.5vw, 38px)/1.1 var(--titres); text-transform: uppercase; color: var(--navy); letter-spacing: .02em; }
.art-carte p { font-size: .86em; line-height: 1.65; }

/* ---------- Réalisations : frise horizontale pilotée par le défilement ---------- */
.frise { position: relative; background: var(--blanc); }
.frise-collant { padding: clamp(70px, 8vw, 120px) 0 clamp(40px, 4vw, 60px); overflow: hidden; }
.frise.pilotee .frise-collant { position: sticky; top: 0; height: 100vh; min-height: 680px; display: flex; flex-direction: column; justify-content: center; padding-top: 70px; padding-bottom: 30px; }
.frise-tete { padding: 0 var(--marge); text-align: center; }
.frise-tete .surtitre { margin-bottom: 12px; }
.frise-rail { display: flex; width: max-content; margin-top: clamp(26px, 4vh, 52px); padding: 0 var(--marge); will-change: transform; }
.etape { flex: none; width: clamp(260px, 25.5vw, 400px); padding: 0 clamp(18px, 2vw, 32px); border-left: 1px solid var(--ecume); text-align: center; }
.etape:first-child { border-left: 0; }
.etape-annee { display: block; font: 400 clamp(32px, 3vw, 46px)/1 var(--titres); color: var(--navy); }
.etape-nom { display: block; margin: 8px 0 18px; font: 400 18px/1.3 var(--titres); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); min-height: 2.6em; }
.etape-photo { aspect-ratio: 1.22; overflow: hidden; }
.etape-photo img { width: 100%; height: 100%; object-fit: cover; }
.etape p { margin-top: 16px; font-size: .8em; line-height: 1.62; }

/* Sans pilotage par le défilement (mobile) : le titre reste en place, seule la ligne des projets glisse. */
.frise:not(.pilotee) .frise-rail { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding: 0 var(--marge); }
.frise:not(.pilotee) .frise-rail::-webkit-scrollbar { display: none; }
.frise:not(.pilotee) .etape { scroll-snap-align: start; }
/* Les plus anciennes sont dans la page mais masquées : sans script, tout reste visible et le bouton disparaît. */
.js .frise:not(.tout-voir) .etape-plus { display: none; }
.frise.tout-voir .frise-suite, html:not(.js) .frise-suite { display: none; }
.frise-suite { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: clamp(240px, 21vw, 330px); padding: 0 clamp(18px, 2vw, 32px); border-left: 1px solid var(--ecume); text-align: center; }
.frise-suite p { font-size: .8em; line-height: 1.5; text-wrap: balance; }
.frise:not(.pilotee) .frise-suite { scroll-snap-align: start; }
.frise-progres { display: flex; align-items: center; gap: 22px; margin: clamp(22px, 3.4vh, 42px) var(--marge) 0; font: 400 12px/1 var(--corps); letter-spacing: .06em; }
.frise-ligne { flex: 1; height: 1px; background: var(--ecume); position: relative; }
.frise-ligne i { position: absolute; left: 0; top: -.5px; height: 2px; width: 100%; background: var(--navy); transform: scaleX(.12); transform-origin: left; }

/* ---------- MPI : un autre service du groupe, signalé par le fond et par une étiquette ---------- */
.mpi { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; padding: var(--section) var(--marge); background: var(--brume); }
.mpi-titre { grid-column: 1 / 5; position: sticky; top: 100px; align-self: start; padding-right: 20px; }
.mpi-titre .titre-l { margin-top: 26px; font-size: clamp(38px, 4.5vw, 76px); }
.mpi-chapo { margin-top: 22px; font-size: .95em; line-height: 1.7; }
.mpi-titre .etiquette-double { flex-wrap: nowrap; letter-spacing: .09em; white-space: nowrap; }
.mpi-titre .etiquette-double b { background: var(--navy); color: var(--blanc); }
.mpi-titre .etiquette-double span { background: var(--blanc); color: var(--navy); }
.mpi-metiers { margin: 20px 0 30px; font: 500 clamp(10.5px, .78vw, 13px)/1.7 var(--corps); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.mpi-texte { grid-column: 5 / 8; padding-right: 10px; font-size: .9em; }
.mpi-bloc { padding-top: 22px; border-top: 1px solid var(--ecume); }
.mpi-bloc + .mpi-bloc { margin-top: 40px; }
.mpi-bloc h3 { margin-bottom: 12px; font-size: clamp(23px, 2vw, 34px); }
.mpi-photo { grid-column: 8 / 13; position: sticky; top: 100px; align-self: start; height: calc(100vh - 170px); min-height: 460px; }
.mpi-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Contact : on choisit sa demande et son programme, la photo suit ---------- */
.contact { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; padding: var(--section) var(--marge) calc(var(--section) * .8); background: var(--nuit); color: var(--ecume); overflow: hidden; }
.contact-titre { grid-column: 1 / 13; font: 400 clamp(36px, 4.7vw, 76px)/1.1 var(--titres); text-transform: uppercase; color: var(--blanc); text-wrap: balance; }
.contact-titre i { display: inline-block; vertical-align: .32em; width: clamp(50px, 11vw, 180px); height: 1px; margin-right: .3em; background: var(--ecume); }
.contact-gauche { grid-column: 1 / 7; position: sticky; top: 100px; align-self: start; margin-top: clamp(40px, 5vw, 76px); }
.contact-apercu { position: relative; aspect-ratio: 1.3; overflow: hidden; background: var(--navy); }
.contact-apercu figure { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.contact-apercu figure.actif { opacity: 1; }
.contact-apercu img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.contact-apercu figure.actif img { transform: scale(1); }
.contact-apercu figcaption { position: absolute; left: 0; bottom: 0; padding: 12px 20px 13px; background: var(--blanc); color: var(--navy); font: 400 clamp(19px, 1.8vw, 28px)/1.15 var(--titres); letter-spacing: .05em; text-transform: uppercase; }
.contact-apercu small { display: block; margin-top: 4px; font: 400 12px/1.3 var(--corps); letter-spacing: .04em; text-transform: none; color: var(--texte); }
.contact-note { margin-top: 22px; font-size: .88em; line-height: 1.7; }
.contact-note a, .contact-tel a { color: var(--blanc); border-bottom: 1px solid var(--vague); white-space: nowrap; }
.contact-tel { margin-top: 10px; font: 400 clamp(24px, 2.2vw, 34px)/1.2 var(--titres); color: var(--blanc); }

.formulaire { grid-column: 8 / 13; margin-top: clamp(40px, 5vw, 76px); display: grid; gap: clamp(30px, 3vw, 44px); }
.groupe { margin: 0; padding: 0; border: 0; min-width: 0; }
.groupe legend { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding: 0; font: 400 clamp(19px, 1.5vw, 24px)/1.2 var(--titres); letter-spacing: .05em; text-transform: uppercase; color: var(--blanc); }
.groupe legend b { font-weight: 400; color: var(--vague); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; display: block; cursor: pointer; }
.puce input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.puce span { display: block; padding: .72em 1.1em; border: 1px solid rgba(216, 222, 240, .36); font: 400 clamp(13px, .92vw, 15px)/1.2 var(--corps); color: var(--ecume); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
@media (hover: hover) {
  .puce:hover span { border-color: var(--blanc); color: var(--blanc); }
}
.puce input:checked + span { background: var(--blanc); border-color: var(--blanc); color: var(--navy); font-weight: 500; }
.puce input:focus-visible + span { outline: 2px solid var(--vague); outline-offset: 2px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.champ { position: relative; display: block; }
.champ-large { grid-column: 1 / -1; }
.champ input, .champ textarea {
  display: block;
  width: 100%;
  padding: 24px 0 9px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(216, 222, 240, .42);
  border-radius: 0;
  color: var(--blanc);
  font: 300 clamp(16px, 1.1vw, 18px)/1.5 var(--corps);
  resize: none;
  outline: 0;
}
.champ input:-webkit-autofill { -webkit-text-fill-color: var(--blanc); transition: background-color 9999s; }
.champ > span { position: absolute; left: 0; top: 24px; font: 400 clamp(15px, 1.05vw, 17px)/1.5 var(--corps); color: var(--ecume); transform-origin: left top; pointer-events: none; transition: transform .28s var(--ease), color .28s var(--ease); }
.champ input:focus + span, .champ input:not(:placeholder-shown) + span,
.champ textarea:focus + span, .champ textarea:not(:placeholder-shown) + span { transform: translateY(-21px) scale(.76); color: var(--blanc); }
.champ::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vague); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.champ:focus-within::after { transform: scaleX(1); }
.envoyer { justify-self: start; display: inline-flex; align-items: center; gap: 18px; padding: 8px 0 10px; border-bottom: 2px solid var(--vague); color: var(--blanc); font: 400 clamp(26px, 2.5vw, 40px)/1 var(--titres); text-transform: uppercase; letter-spacing: .03em; text-align: left; }
.envoyer i { font: 200 .9em/1 var(--corps); font-style: normal; color: var(--vague); transition: transform .4s var(--ease); }
.envoyer:hover i { transform: rotate(90deg); }
.formulaire-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; }
.rgpd { flex: 1 1 100%; font-size: .72em; line-height: 1.6; }
.rgpd a { color: var(--blanc); border-bottom: 1px solid var(--vague); }
.formulaire-merci { grid-column: 8 / 13; align-self: start; margin-top: clamp(40px, 5vw, 76px); font: 400 clamp(26px, 2.5vw, 40px)/1.2 var(--titres); text-transform: uppercase; color: var(--blanc); }
.formulaire-merci small { display: block; margin-top: 14px; font: 300 clamp(15px, 1.05vw, 17px)/1.6 var(--corps); text-transform: none; color: var(--ecume); }
.formulaire-merci[hidden] { display: none; }

.formulaire[hidden] { display: none; }
.contact-mentions { grid-column: 1 / 13; margin-top: clamp(50px, 6vw, 90px); padding-top: 24px; border-top: 1px solid rgba(216, 222, 240, .2); font-size: .68em; line-height: 1.7; }

/* ========== Fiche de programme ========== */
.fiche-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--nuit);
  color: var(--blanc);
  text-align: center;
}
.fiche-video, .fiche-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fiche-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 21, 47, .66) 0%, rgba(0, 21, 47, .4) 42%, rgba(0, 21, 47, .78) 100%); }
.fiche-titre { position: relative; z-index: 2; display: grid; justify-items: center; padding: 70px var(--marge) 110px; }
.fiche-nom { margin: 16px 0 6px; font: 400 clamp(84px, 18vw, 290px)/.92 var(--titres); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 4px 44px rgba(0, 21, 47, .5); }
.fiche-nom-moyen { font-size: clamp(60px, 12.5vw, 200px); }
.fiche-nom-long { font-size: clamp(44px, 8vw, 130px); letter-spacing: .03em; }
.fiche-sous { font: 500 clamp(11.5px, .95vw, 15px)/1.5 var(--corps); letter-spacing: .24em; text-transform: uppercase; text-wrap: balance; }
.fiche-accroche { max-width: 34em; margin: 16px 0 26px; font-weight: 400; line-height: 1.6; text-shadow: 0 1px 14px rgba(0, 21, 47, .7); text-wrap: balance; }
.fiche-panneau .panneau-valeur, .fiche-panneau .panneau-legende { display: block; }
.fiche-panneau { text-align: left; }

.fiche-intro { padding-bottom: clamp(50px, 6vw, 96px); }
.fiche-bande { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: clamp(8px, 1vw, 16px); padding-bottom: clamp(50px, 6vw, 96px); }
.fiche-bande figure { aspect-ratio: .94; overflow: hidden; }
.fiche-bande figure:nth-child(even) { margin-top: clamp(20px, 3.4vw, 56px); margin-bottom: calc(clamp(20px, 3.4vw, 56px) * -1); }
.fiche-bande img { width: 100%; height: 100%; object-fit: cover; }

.fiche-tete { display: grid; justify-items: center; padding: 0 var(--marge); text-align: center; }
.fiche-tete .surtitre { margin-bottom: 18px; }
.fiche-chapo { max-width: 44em; margin-top: 22px; text-wrap: pretty; }

.fiche-residence { padding: var(--section) var(--marge); background: var(--nuit); color: var(--ecume); }
.fiche-residence .surtitre, .fiche-residence .titre-l { color: var(--blanc); }
.fiche-cadre { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: center; margin-top: clamp(50px, 6vw, 96px); }
.fiche-cadre-texte { grid-column: 2 / 8; grid-row: 1; padding: clamp(30px, 4vw, 66px) clamp(24px, 10vw, 180px) clamp(30px, 4vw, 66px) clamp(24px, 3vw, 54px); border: 1px solid rgba(216, 222, 240, .32); font-size: .95em; }
.fiche-cadre-texte p + p { margin-top: 16px; }
.fiche-phrase { font: 400 clamp(24px, 2.3vw, 38px)/1.14 var(--titres); letter-spacing: .03em; text-transform: uppercase; color: var(--blanc); text-wrap: balance; }
.fiche-cadre-texte .fiche-phrase { margin-top: 26px; }
.fiche-cadre-photo { grid-column: 6 / 13; grid-row: 1; z-index: 1; aspect-ratio: 1.5; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
.fiche-cadre-photo img { width: 100%; height: 100%; object-fit: cover; }
.fiche-cadre-texte { z-index: 2; background: var(--nuit); }
.fiche-sous-titre { margin-top: clamp(70px, 8vw, 130px); text-align: center; font: 400 clamp(25px, 2.5vw, 40px)/1.15 var(--titres); letter-spacing: .08em; text-transform: uppercase; color: var(--blanc); }
.prestations { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 4vw, 70px); margin-top: clamp(26px, 3vw, 46px); }
.prestations li { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-top: 1px solid rgba(216, 222, 240, .2); font-size: .9em; line-height: 1.4; }
.prestations svg { flex: none; width: 32px; height: 32px; color: var(--vague); fill: none; stroke: currentColor; stroke-width: 1.1; }

.fiche-investir { padding: var(--section) var(--marge); }
.fiche-duo { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(50px, 6vw, 90px); }
.fiche-duo + .fiche-duo { margin-top: clamp(14px, 1.6vw, 26px); }
.fiche-duo figure { min-height: clamp(320px, 34vw, 560px); }
.fiche-duo img { width: 100%; height: 100%; object-fit: cover; }
.fiche-duo-texte { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 86px); background: var(--brume); }
.fiche-duo-texte .titre-m { margin-bottom: 20px; }
.fiche-duo-texte p + .fiche-liste { margin-top: 18px; }
.fiche-duo.inverse .fiche-duo-texte { order: 2; }
.fiche-liste { display: grid; gap: 10px; font-size: .92em; line-height: 1.55; }
.fiche-liste li { position: relative; padding-left: 28px; }
.fiche-liste li::before { content: ''; position: absolute; left: 0; top: .78em; width: 16px; height: 1px; background: var(--vague); }

.atouts { padding: var(--section) var(--marge); background: var(--brume); }
.atouts-grille { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(50px, 6vw, 90px); border-top: 1px solid var(--ecume); }
.atout { padding: clamp(24px, 2.6vw, 44px) clamp(18px, 2vw, 34px) clamp(28px, 3vw, 50px); border-left: 1px solid var(--ecume); }
.atout:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.atout:nth-child(n+5) { border-top: 1px solid var(--ecume); }
.atout-num { display: block; font: 400 clamp(40px, 3.8vw, 64px)/1 var(--titres); color: var(--vague); }
.atout h3 { margin: 16px 0 12px; font: 400 clamp(21px, 1.72vw, 28px)/1.18 var(--titres); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); text-wrap: balance; }
.atout p { font-size: .84em; line-height: 1.62; }
.atout p b { font-weight: 600; color: var(--navy); }

.fiche-baie { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 34vh; min-height: 100vh; padding: clamp(70px, 8vw, 130px) var(--marge) clamp(30px, 4vw, 60px); overflow: hidden; color: var(--blanc); text-align: center; }
.fiche-baie::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 21, 47, .72) 0%, rgba(0, 21, 47, .22) 52%, rgba(0, 21, 47, .3) 100%); }
.fiche-baie > *:not(.art-fond) { position: relative; z-index: 1; }
.fiche-baie-tete .surtitre { color: var(--blanc); margin-bottom: 14px; }
.fiche-baie .titre-xl { color: var(--blanc); }
.fiche-baie-tete > p:last-child { max-width: 40em; margin: 20px auto 0; font-weight: 400; line-height: 1.65; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 21, 47, .7); }
.distances { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 20px); text-align: left; }
.distance { padding: 20px clamp(16px, 1.8vw, 28px) 22px; background: rgba(255, 255, 255, .94); color: var(--texte); }
.distance b { display: block; font: 400 clamp(30px, 3vw, 50px)/1.05 var(--titres); color: var(--navy); }
.distance span { display: block; margin-top: 6px; font-size: .8em; line-height: 1.45; }

.fiche-lmnp { padding: var(--section) var(--marge) calc(var(--section) * .8); }
.wp-block-table.tableau { width: 100%; margin-top: clamp(44px, 5vw, 76px); border-collapse: collapse; text-align: left; font-size: .9em; line-height: 1.5; }
.wp-block-table.tableau thead th { padding: 18px clamp(14px, 2vw, 32px); background: var(--navy); color: var(--blanc); font: 400 clamp(19px, 1.6vw, 26px)/1.2 var(--titres); letter-spacing: .05em; text-transform: uppercase; }
.wp-block-table.tableau tbody th, .wp-block-table.tableau td { padding: 20px clamp(14px, 2vw, 32px); border-bottom: 1px solid var(--ecume); vertical-align: top; }
.wp-block-table.tableau tbody th { width: 22%; font-weight: 500; color: var(--navy); }
.wp-block-table.tableau td { width: 39%; }
.wp-block-table.tableau tbody tr:nth-child(even) { background: var(--brume); }
.tableau-note { max-width: 58em; margin: 22px auto 0; text-align: center; font-size: .78em; line-height: 1.6; }

/* ========== Pages internes ========== */
.page-hero { position: sticky; top: 0; z-index: 0; display: grid; place-items: center; height: 68vh; min-height: 460px; overflow: hidden; background: var(--nuit); color: var(--blanc); text-align: center; }
.page-titre { position: relative; z-index: 2; display: grid; justify-items: center; padding: 90px var(--marge) 30px; }
.page-titre .surtitre { color: var(--blanc); margin-bottom: 14px; }
.page-titre .etiquette-double { margin-bottom: 18px; }
.page-nom { font: 400 clamp(44px, 7.6vw, 124px)/1 var(--titres); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 2px 34px rgba(0, 21, 47, .5); }
.page-titre .fiche-accroche { margin-bottom: 0; }

.grille-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4vw, 60px) 36px; margin-top: clamp(40px, 4.5vw, 70px); padding: 0 var(--marge); }
.page-programmes { padding-top: clamp(60px, 7vw, 110px); }
.autres { padding: var(--section) 0; background: var(--brume); }
.autres .grille-cartes { margin-top: clamp(40px, 4.5vw, 70px); }

.page-liste { padding: clamp(40px, 5vw, 70px) var(--marge) var(--section); }
.real { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: center; padding: clamp(44px, 5.5vw, 84px) 0; border-top: 1px solid var(--ecume); scroll-margin-top: 70px; }
.real:first-child { border-top: 0; }
.real-photo { grid-column: 1 / 8; grid-row: 1; aspect-ratio: 1.45; overflow: hidden; }
.real-photo img { width: 100%; height: 100%; object-fit: cover; }
.real-texte { grid-column: 9 / 13; grid-row: 1; font-size: .92em; }
.real:nth-child(even) .real-photo { grid-column: 6 / 13; }
.real:nth-child(even) .real-texte { grid-column: 1 / 5; }
.real-annee { display: block; font: 400 clamp(40px, 4.4vw, 72px)/1 var(--titres); color: var(--vague); }
.real-nom { margin-top: 10px; font: 400 clamp(26px, 2.7vw, 42px)/1.1 var(--titres); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.real-lieu { margin: 8px 0 16px; font-size: .86em; letter-spacing: .08em; text-transform: uppercase; }
.real-texte p + p { margin-top: 10px; }
.real-texte .real-lieu + p { margin-top: 0; }
.real-texte .lien-trait { margin-top: 18px; }
.real-vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.real-vignettes img { width: 100%; aspect-ratio: 1.2; object-fit: cover; }

.atouts-grille.trois { grid-template-columns: repeat(3, 1fr); }
.atouts-grille.sombre { margin-top: clamp(60px, 7vw, 110px); border-top-color: rgba(216, 222, 240, .2); }
.atouts-grille.sombre .atout { border-color: rgba(216, 222, 240, .2); }
.atouts-grille.sombre .atout h3 { color: var(--blanc); }
.fiche-investir .atouts-grille { margin-top: clamp(50px, 6vw, 90px); }
.fiche-duo-lien { margin-top: 22px; }
.fiche-residence .chiffres { margin-top: clamp(60px, 7vw, 110px); }
.fiche-baie-court { gap: 0; justify-content: center; min-height: 86vh; }
.fiche-baie-court::after { background: rgba(0, 21, 47, .52); }

/* ========== Mentions légales et confidentialité ========== */
.page-legale { padding: clamp(120px, 12vw, 180px) 0 var(--section); }
.legal-corps { max-width: 860px; margin: clamp(40px, 5vw, 70px) auto 0; padding: 0 var(--marge); font-size: .95em; line-height: 1.7; box-sizing: content-box; }
.legal-corps [id] { scroll-margin-top: 100px; }
.legal-corps a { color: var(--navy); border-bottom: 1px solid var(--vague); }
.legal-corps p + p { margin-top: 10px; }
.legal-corps mark { padding: .05em .25em; background: var(--ecume); color: var(--navy); }
.legal-projet { padding: 16px 20px; background: var(--brume); border-left: 3px solid var(--vague); color: var(--navy); font-weight: 400; }
.legal-partie { margin-top: clamp(50px, 6vw, 84px); padding-bottom: 14px; border-bottom: 1px solid var(--ecume); font: 400 clamp(32px, 3.6vw, 54px)/1.1 var(--titres); letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.legal-corps .titre-m { margin: 32px 0 10px; font-size: clamp(20px, 1.7vw, 25px); }
.legal-corps .fiche-liste { font-size: 1em; }
.legal-corps .wp-block-table.tableau { margin-top: 14px; font-size: .92em; }
.legal-corps .wp-block-table.tableau thead th { padding: 14px 16px; font-size: clamp(16px, 1.3vw, 19px); }
.legal-corps .wp-block-table.tableau tbody th, .legal-corps .wp-block-table.tableau td { padding: 14px 16px; }
.legal-corps .legal-suite { margin-top: 14px; }
.legal-corps .legal-date { margin-top: 36px; font-size: .9em; }

/* ---------- Pied de page ---------- */
.pied { position: relative; padding: clamp(50px, 6vw, 90px) var(--marge) clamp(22px, 2.6vw, 40px); background: var(--nuit); color: var(--ecume); border-top: 1px solid rgba(216, 222, 240, .16); overflow: hidden; }
.pied-colonnes { display: grid; grid-template-columns: 2.1fr 1fr 1fr 1.25fr; gap: 28px; }
.pied-accroche { font: 400 clamp(24px, 2.2vw, 34px)/1.16 var(--titres); text-transform: uppercase; color: var(--blanc); margin-bottom: 22px; max-width: 16em; }
.pied-colonnes h3 { margin-bottom: 18px; font: 400 19px/1 var(--titres); letter-spacing: .08em; text-transform: uppercase; color: var(--blanc); }
.pied-colonnes li { margin-bottom: 9px; font-size: 13.5px; line-height: 1.5; }
.pied-colonnes a:hover { color: var(--blanc); }
.pied-courriel { display: block; color: var(--blanc); font-size: 14px; }
.pied-courriel + .pied-courriel { margin-top: 6px; }
.pied-vignettes { display: grid; grid-template-columns: repeat(3, 1fr) minmax(220px, 2.3fr) repeat(3, 1fr); gap: 10px; align-items: center; margin-top: clamp(38px, 4vw, 66px); padding: 14px 0; border-top: 1px solid rgba(216, 222, 240, .16); border-bottom: 1px solid rgba(216, 222, 240, .16); }
.pied-vignettes figure { aspect-ratio: 1.34; overflow: hidden; }
.pied-vignettes img { width: 100%; height: 100%; object-fit: cover; }
.pied-vignettes figure:nth-of-type(1), .pied-vignettes figure:nth-of-type(6) { opacity: .36; }
.pied-vignettes figure:nth-of-type(2), .pied-vignettes figure:nth-of-type(5) { opacity: .62; }
.pied-mentions { text-align: center; font-size: 11.5px; letter-spacing: .05em; line-height: 1.7; }
.pied-credit { display: block; margin-top: 4px; }
.pied-credit b { color: var(--blanc); font-weight: 500; }
.pied-credit a b { border-bottom: 1px solid var(--vague); }
.pied-marque { display: block; margin-top: clamp(26px, 3.4vw, 54px); font: 400 13.1vw/.92 var(--titres); text-transform: uppercase; white-space: nowrap; color: var(--blanc); text-align: center; }

/* ---------- Apparitions au défilement ---------- */
.js :is(.revele, .revele-rideau) { opacity: 0; transform: translateY(38px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--delai, 0s); }
.js :is(.revele, .revele-rideau).vu { opacity: 1; transform: none; }
/* Le rideau découpe l'image, jamais son cadre : un cadre découpé à 100 % n'est plus détecté à l'écran. */
.js .revele-rideau { opacity: 1; transform: none; }
.js .revele-rideau img { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); transition-delay: var(--delai, 0s); }
.js .revele-rideau.vu img { clip-path: inset(0 0 0 0); }
.js .art-carte:is(.revele, .revele-rideau) { transform: translateY(90px); }
.js .art-carte:is(.revele, .revele-rideau).vu { transform: none; }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .menu { display: none; }
  .burger { display: block; }
  .entete-cta { margin-left: auto; }
  .burger { margin-left: 0; }
  .menu-ouvert .menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 22px;
    margin: 0;
    padding: 100px var(--marge) 40px;
    background: var(--nuit);
    color: var(--blanc);
    font: 400 clamp(28px, 6vw, 44px)/1.12 var(--titres);
    letter-spacing: .02em;
  }
  .menu-ouvert .menu a { white-space: normal; }
  .entete.menu-ouvert { color: var(--blanc); background: transparent; box-shadow: none; }
  .entete.menu-ouvert .logo { width: 58px; height: 72px; }
  .entete.menu-ouvert .logo-symbole { opacity: 1; }
  .entete.menu-ouvert .logo-complet { opacity: 0; }
  .rail { grid-auto-columns: calc((100% - 28px) / 2); gap: 28px; }
  .plan-texte, .plan-ligne.inverse .plan-texte { grid-column: 2 / 12; grid-row: 2; margin-top: 44px; }
  .plan-visuel, .plan-ligne.inverse .plan-visuel { grid-column: 1 / 13; }
  .mpi-titre { grid-column: 1 / 13; position: static; margin-bottom: 44px; }
  .mpi-texte { grid-column: 1 / 7; }
  .mpi-photo { grid-column: 7 / 13; }
  .contact-gauche { grid-column: 1 / 13; position: static; }
  .contact-apercu { aspect-ratio: 2; }
  .formulaire, .formulaire-merci { grid-column: 1 / 13; }
  .atouts-grille { grid-template-columns: 1fr 1fr; }
  .atout:nth-child(4n+1) { border-left: 1px solid var(--ecume); padding-left: clamp(18px, 2vw, 34px); }
  .atout:nth-child(odd) { border-left: 0; padding-left: 0; }
  .atout:nth-child(n+3) { border-top: 1px solid var(--ecume); }
  .prestations { grid-template-columns: 1fr 1fr; }
  .distances { grid-template-columns: 1fr 1fr; }
  .pied-colonnes { grid-template-columns: 1fr 1fr 1fr; }
  .pied-colonnes > div:first-child { grid-column: 1 / 4; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .entete { padding: 12px var(--marge); gap: 12px; }
  .logo { width: 48px; height: 60px; }
  .entete.defile .logo { width: 148px; height: 40px; }
  .entete-cta { padding: 11px 13px; font-size: 10.5px; letter-spacing: .1em; }

  .hero { min-height: 620px; }
  .hero-voile {
    background:
      linear-gradient(180deg, rgba(0, 21, 47, .55) 0%, rgba(0, 21, 47, 0) 18%),
      linear-gradient(0deg, rgba(0, 21, 47, .96) 0%, rgba(0, 21, 47, .8) 38%, rgba(0, 21, 47, 0) 76%);
  }
  .hero-diapos { bottom: 112px; }
  .hero-titre { font-size: clamp(44px, 13.6vw, 78px); margin-bottom: 14px; }
  .hero-titre-long { font-size: clamp(36px, 10.6vw, 66px); }
  .etiquette-double { letter-spacing: .1em; }
  .diapo .etiquette-double { margin-bottom: 12px; }
  .hero-texte { font-size: 14px; line-height: 1.55; margin-bottom: 16px; }
  .diapo .bouton { padding: 14px 20px; font-size: 13px; }
  .hero-compteur { top: 92px; }
  .hero-compteur .roule { font-size: 40px; }
  .hero-compteur small { font-size: 12px; }
  /* Sur mobile on glisse du doigt : les flèches disparaissent de l'écran mais restent lues par les lecteurs d'écran. */
  .hero-fleches { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hero-glisser {
    position: absolute;
    z-index: 2;
    right: var(--marge);
    top: 146px;
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 10.5px/1 var(--corps);
    letter-spacing: .18em;
    text-transform: uppercase;
    filter: drop-shadow(0 1px 8px rgba(0, 21, 47, .8));
    transition: opacity .6s var(--ease);
  }
  .hero-glisser svg { width: 22px; height: 10px; animation: invitation 1.9s var(--ease) infinite; }
  .hero.a-glisse .hero-glisser { opacity: 0; }
  .hero-panneau { left: 0; width: 100%; padding: 18px var(--marge) 16px; }
  .hero-panneau > div { padding: 0 8px; }
  .panneau-valeur { --h: 1.25em; font-size: 16px; letter-spacing: 0; }
  .panneau-legende { font-size: 10px; }
  .hero-defile { display: none; }

  .chevrons { margin-left: -46vw; margin-right: -46vw; }
  .chevron { width: 44vw; margin-left: -11vw; }

  .fabrique-titre { grid-column: 1 / 13; font-size: clamp(42px, 12.6vw, 70px); margin-top: 0; }
  .fabrique-photo-a { grid-column: 4 / 13; grid-row: 2; margin-top: -18px; margin-right: calc(var(--marge) * -1); }
  .fabrique-photo-b { grid-column: 1 / 9; grid-row: 3; margin-top: -30px; }
  .fabrique-texte { grid-column: 1 / 13; grid-row: 4; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffre b { font-size: clamp(42px, 14vw, 56px); }
  .mpi-titre .etiquette-double { flex-wrap: wrap; white-space: normal; }
  .chiffre { padding: 26px 16px 24px; }
  .chiffre:nth-child(odd) { padding-left: 0; border-left: 0; }
  .chiffre:nth-child(n+3) { border-top: 1px solid rgba(216, 222, 240, .26); }

  .rail { grid-auto-columns: 84vw; gap: 18px; }
  .rail-enveloppe::before, .rail-enveloppe::after { display: none; }
  .rail-fleche { display: none; }
  .programmes-tete .titre-l { letter-spacing: .05em; }

  .plan-panneau { width: 74%; }
  .plan-photo { width: 76%; }
  .plan-ligne.inverse .plan-photo { width: 76%; }
  .plan-ligne.inverse .plan-panneau { width: 74%; }

  .art { min-height: 0; }
  .art-cartes { grid-template-columns: 1fr; margin-top: 56px; }

  .etape { width: 76vw; }
  .frise-suite { width: 64vw; }

  .mpi-texte { grid-column: 1 / 13; }
  .mpi-photo { grid-column: 1 / 13; position: static; height: 76vw; min-height: 0; margin-top: 40px; }

  .fiche-titre { padding-bottom: 120px; }
  .fiche-nom { font-size: clamp(72px, 23vw, 130px); letter-spacing: .03em; }
  .fiche-sous { letter-spacing: .14em; }
  .fiche-accroche { font-size: 15px; }
  .fiche-nom-moyen { font-size: clamp(52px, 16vw, 90px); }
  .fiche-nom-long { font-size: clamp(38px, 11vw, 62px); }
  .fiche-baie-court { min-height: 88vh; }
  .grille-cartes { grid-template-columns: 1fr; }
  .real, .real:nth-child(even) { display: block; }
  .real-texte { margin-top: 20px; }
  .fiche-bande { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74vw; padding-left: var(--marge); padding-right: var(--marge); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--marge); scrollbar-width: none; }
  .fiche-bande::-webkit-scrollbar { display: none; }
  .fiche-bande figure { scroll-snap-align: start; }
  .fiche-bande figure:nth-child(even) { margin-top: 0; margin-bottom: 0; }
  .fiche-cadre-texte { grid-column: 1 / 13; grid-row: 2; margin-top: -30px; margin-left: 14px; padding: 28px 22px; }
  .fiche-cadre-photo { grid-column: 1 / 13; grid-row: 1; margin-right: calc(var(--marge) * -1); }
  .prestations { grid-template-columns: 1fr; }
  .fiche-duo { grid-template-columns: 1fr; }
  .fiche-duo-texte, .fiche-duo.inverse .fiche-duo-texte { order: 2; padding: 30px 22px; }
  .fiche-duo figure { min-height: 0; height: 66vw; }
  .atouts-grille, .atouts-grille.trois { grid-template-columns: 1fr; }
  .atout, .atout:nth-child(4n+1), .atout:nth-child(odd) { border-left: 0; padding: 24px 0 26px; }
  .atout + .atout { border-top: 1px solid var(--ecume); }
  .fiche-baie { min-height: 0; gap: 34vh; }
  .distance { padding: 16px 14px 18px; }
  .wp-block-table.tableau, .wp-block-table.tableau tbody, .wp-block-table.tableau tr, .wp-block-table.tableau tbody th, .wp-block-table.tableau td { display: block; width: auto; }
  .wp-block-table.tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wp-block-table.tableau tbody tr { margin-bottom: 14px; background: var(--brume); }
  .wp-block-table.tableau tbody tr:nth-child(even) { background: var(--brume); }
  .wp-block-table.tableau tbody th { padding: 13px 16px; background: var(--navy); color: var(--blanc); border-bottom: 0; }
  .wp-block-table.tableau td { padding: 13px 16px; }
  .wp-block-table.tableau td:last-child { border-bottom: 0; }
  .wp-block-table.tableau td::before { content: attr(data-regime); display: block; margin-bottom: 4px; font-weight: 600; font-size: .86em; letter-spacing: .04em; color: var(--navy); }

  .contact-titre i { display: none; }
  .contact-gauche { margin-top: 26px; }
  .contact-apercu { display: none; }
  .contact-note { margin-top: 0; }
  .champs { grid-template-columns: 1fr; }
  .puce span { font-size: 13.5px; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
  .pied-colonnes > div:first-child { grid-column: 1 / 3; }
  .pied-vignettes { grid-template-columns: repeat(3, 1fr); }
  .pied-mentions { grid-column: 1 / 4; grid-row: 2; }
  .pied-vignettes figure:nth-of-type(n+4) { display: none; }
  .pied-vignettes figure { opacity: 1 !important; }
}

@keyframes invitation {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-8px); }
}

/* ---------- Respect du réglage « réduire les animations » ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
  .js :is(.revele, .revele-rideau), .js .revele-rideau { opacity: 1; transform: none; }
  .js .revele-rideau img { clip-path: none; }
  .lecture .mot { color: inherit; }
}

/* ==========================================================================
   Adaptations au balisage WordPress : blocs natifs, navigation, Contact Form 7.
   Tout ce qui précède est la feuille de la maquette validée, à l'identique.
   ========================================================================== */

/* Repères des sections automatiques : visibles dans l'éditeur seulement. */
.sn-auto-note { display: none; }

/* Barre d'administration (session connectée) : l'en-tête fixe passe dessous. */
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }

/* ---------- Boutons (core/button) : la classe est sur le conteneur, le style sur le lien ---------- */
.wp-block-buttons { display: block; }
.wp-block-button.bouton,
.wp-block-button.lien-trait,
.wp-block-button.entete-cta { display: block; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; transition: none; }
.wp-block-button.bouton > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 17px 28px;
  background: var(--blanc);
  color: var(--navy);
  font: 500 14px/1 var(--corps);
  letter-spacing: .04em;
  box-shadow: 0 8px 26px rgba(0, 36, 78, .2);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.wp-block-button.lien-trait > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 8px;
  background: none;
  color: var(--navy);
  font: 500 14px/1 var(--corps);
  letter-spacing: .04em;
  border-bottom: 1px solid var(--navy);
}
.wp-block-button.bouton > .wp-block-button__link::after,
.wp-block-button.lien-trait > .wp-block-button__link::after {
  content: '';
  flex: none;
  width: 22px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
  mask: var(--fleche) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
:root { --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 5h21M17 1l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E"); }
@media (hover: hover) {
  .wp-block-button.bouton > .wp-block-button__link:hover { background: var(--navy); color: var(--blanc); box-shadow: 0 12px 32px rgba(0, 36, 78, .35); }
  .wp-block-button.bouton > .wp-block-button__link:hover::after { transform: translateX(5px); }
}
.wp-block-button.lien-trait > .wp-block-button__link:hover::after { transform: translateX(5px); }

/* ---------- En-tête ---------- */
.entete > .wp-block-buttons { flex: none; }
.wp-block-button.entete-cta > .wp-block-button__link {
  display: block;
  padding: 13px 22px;
  border: 1px solid currentColor;
  color: inherit;
  font: 500 12px/1 var(--corps);
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.wp-block-button.entete-cta > .wp-block-button__link:hover { background: var(--blanc); border-color: var(--blanc); color: var(--navy); }
.entete.defile .wp-block-button.entete-cta > .wp-block-button__link:hover { background: var(--navy); border-color: var(--navy); color: var(--blanc); }
.logo figure { margin: 0; }
.logo a { display: block; }
.menu .wp-block-navigation__container { display: flex; gap: clamp(20px, 2.6vw, 44px); margin: 0; padding: 0; list-style: none; }
.menu .wp-block-navigation-item { margin: 0; }
.menu .wp-block-navigation-item__content { display: block; }
.burger { font-size: 0; line-height: 0; cursor: pointer; user-select: none; -webkit-user-select: none; }
.burger::before, .burger::after { content: ''; position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.burger::before { top: 18px; }
.burger::after { top: 27px; }
.menu-ouvert .burger::before { top: 22px; transform: rotate(45deg); }
.menu-ouvert .burger::after { top: 22px; transform: rotate(-45deg); }

/* ---------- Étiquette double, en texte riche : <strong> + <em> ---------- */
.etiquette-double strong { padding: .85em 1.15em; background: var(--blanc); color: var(--navy); font-weight: 600; }
.etiquette-double em { padding: .85em 1.15em; background: var(--navy); color: var(--blanc); font-style: normal; }
.mpi-titre .etiquette-double strong { background: var(--navy); color: var(--blanc); }
.mpi-titre .etiquette-double em { background: var(--blanc); color: var(--navy); }

/* ---------- Voiles, filets et dessins : des pseudo-éléments, pas des blocs vides ---------- */
.page-hero::after, .fiche-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 21, 47, .66) 0%, rgba(0, 21, 47, .4) 42%, rgba(0, 21, 47, .78) 100%); }
figure.fiche-fond, figure.fiche-video { margin: 0; }
.fiche-fond img, .fiche-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-defile::before { content: ''; display: block; width: 44px; height: 1px; background: currentColor; }
.contact-titre::before { content: ''; display: inline-block; vertical-align: .32em; width: clamp(50px, 11vw, 180px); height: 1px; margin-right: .3em; background: var(--ecume); }
.fabrique::before { content: ''; position: absolute; left: 0; right: 0; top: 34%; aspect-ratio: 1440 / 300; background: url("assets/svg/vagues.svg") center / 100% 100% no-repeat; opacity: .075; pointer-events: none; }
.fabrique-titre em { font-style: normal; color: var(--vague); }
.plan-visuel::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 72%; background: var(--navy) center / cover no-repeat; }
.plan-ligne.inverse .plan-visuel::before { right: auto; left: 0; width: 62%; }
.plan-ligne:not(.inverse) .plan-visuel.vu::before, html:not(.js) .plan-ligne:not(.inverse) .plan-visuel::before { background-image: url("assets/svg/facade.svg"); }
.plan-ligne.inverse .plan-visuel.vu::before, html:not(.js) .plan-ligne.inverse .plan-visuel::before { background-image: url("assets/svg/masse.svg"); }
.pied::after { content: 'SN Immobilier'; display: block; margin-top: clamp(26px, 3.4vw, 54px); font: 400 13.1vw/.92 var(--titres); text-transform: uppercase; white-space: nowrap; color: var(--blanc); text-align: center; }
.prestations li::before { content: ''; flex: none; width: 32px; height: 32px; background: var(--vague); -webkit-mask: var(--icone, var(--icone-coche)) center / contain no-repeat; mask: var(--icone, var(--icone-coche)) center / contain no-repeat; }
:root { --icone-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }
.bandeau-mot::after { content: '+'; display: inline-block; margin: 0 .5em; font: 200 .72em/1 var(--corps); color: var(--vague); transform: rotate(var(--r)); }

/* ---------- Enfants « en ligne » devenus paragraphes ---------- */
.chiffre-nombre { display: block; font: 400 clamp(56px, 6vw, 104px)/1 var(--titres); color: var(--blanc); white-space: nowrap; }
.chiffre-nombre em { font-style: normal; }
.chiffre-titre { display: block; margin: 14px 0 4px; font: 600 .82em/1.4 var(--corps); color: var(--blanc); }
.chiffre-texte { display: block; max-width: 17em; font-size: .8em; line-height: 1.6; }
.art-carte p.art-carte-petit { font: 400 12px/1.4 var(--corps); letter-spacing: .04em; }
.art-carte p.art-carte-titre { margin: 10px 0 12px; font: 400 clamp(26px, 2.5vw, 38px)/1.1 var(--titres); text-transform: uppercase; color: var(--navy); letter-spacing: .02em; }
.distance-valeur { font: 400 clamp(30px, 3vw, 50px)/1.05 var(--titres); color: var(--navy); }
.distance-texte { margin-top: 6px; font-size: .8em; line-height: 1.45; }
.atout p.atout-num { font: 400 clamp(40px, 3.8vw, 64px)/1 var(--titres); color: var(--vague); }
.atout p strong { font-weight: 600; color: var(--navy); }
.pied-mentions em { display: block; margin-top: 4px; font-style: normal; }
.pied-mentions em strong { color: var(--blanc); font-weight: 500; }
.formulaire-merci em { display: block; margin-top: 14px; font: 300 clamp(15px, 1.05vw, 17px)/1.6 var(--corps); font-style: normal; text-transform: none; color: var(--ecume); }
.contact-apercu figcaption em { display: block; margin-top: 4px; font: 400 12px/1.3 var(--corps); font-style: normal; letter-spacing: .04em; text-transform: none; color: var(--texte); }
.bandeau-apercu figcaption em { display: block; margin-top: 3px; font: 400 11px/1.3 var(--corps); font-style: normal; letter-spacing: .04em; text-transform: none; color: var(--texte); }

/* ---------- Tableaux (core/table) ---------- */
.wp-block-table.tableau table { width: 100%; border-collapse: collapse; }

/* Le lien à trait de la maquette est en ligne dans son bloc de texte : sa marge et sa ligne se comptent pareil. */
.wp-block-buttons.is-layout-flex:has(> .lien-trait) { display: block; }
.wp-block-button.lien-trait { display: inline-flex; }

/* ---------- Contact : Contact Form 7 dans la grille de la section ---------- */
/* En grille, l'enveloppe laisse le formulaire s'étirer à la hauteur de la colonne, comme dans la maquette. */
.contact > .wpcf7 { display: grid; grid-column: 8 / 13; min-width: 0; }
.contact .formulaire-merci { display: none; }
.contact.est-envoye .formulaire-merci { display: block; }
.contact.est-envoye > .wpcf7 { display: none; }
.wpcf7 .screen-reader-response, .wpcf7 .hidden-fields-container { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sn-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wpcf7-form-control-wrap { display: block; }
.puces .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.puces .wpcf7-list-item { display: block; margin: 0; }
.puces .wpcf7-list-item label { position: relative; display: block; cursor: pointer; }
.puces .wpcf7-list-item input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.puces .wpcf7-list-item-label { display: block; padding: .72em 1.1em; border: 1px solid rgba(216, 222, 240, .36); font: 400 clamp(13px, .92vw, 15px)/1.2 var(--corps); color: var(--ecume); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
@media (hover: hover) {
  .puces .wpcf7-list-item label:hover .wpcf7-list-item-label { border-color: var(--blanc); color: var(--blanc); }
}
.puces .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--blanc); border-color: var(--blanc); color: var(--navy); font-weight: 500; }
.puces .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--vague); outline-offset: 2px; }
.champ > .wpcf7-form-control-wrap { position: static; top: auto; font: inherit; color: inherit; transform: none; pointer-events: auto; transition: none; }
.champ:has(input:focus) > .champ-libelle, .champ:has(input:not(:placeholder-shown)) > .champ-libelle,
.champ:has(textarea:focus) > .champ-libelle, .champ:has(textarea:not(:placeholder-shown)) > .champ-libelle { transform: translateY(-21px) scale(.76); color: var(--blanc); }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font: 400 12.5px/1.4 var(--corps); color: #FFC9C2; }
.champ .wpcf7-not-valid { border-bottom-color: #FFC9C2; }
.wpcf7-response-output { margin: 0; padding: 14px 18px; border: 1px solid rgba(216, 222, 240, .36); font-size: .85em; line-height: 1.5; color: var(--blanc); }
.wpcf7-response-output:empty, .wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: #FFC9C2; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--vague); }
.wpcf7 form.submitting .envoyer { opacity: .5; pointer-events: none; }
.wpcf7-spinner { display: none; }
.formulaire .rgpd a { color: var(--blanc); border-bottom: 1px solid var(--vague); }

/* ---------- Pages simples (404) ---------- */
.page-simple { box-sizing: content-box; max-width: 860px; margin: 0 auto; padding: clamp(140px, 14vw, 200px) var(--marge) var(--section); }
.page-simple .titre-l { margin: 14px 0 22px; }
.page-simple a { color: var(--navy); border-bottom: 1px solid var(--vague); }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .entete .menu { display: none; }
  .entete.menu-ouvert .menu { display: flex; }
  .entete > .wp-block-buttons { margin-left: auto; }
  .menu-ouvert .menu .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 22px; }
  .contact > .wpcf7 { grid-column: 1 / 13; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .wp-block-button.entete-cta > .wp-block-button__link { padding: 11px 13px; font-size: 10.5px; letter-spacing: .1em; }
  .chiffre-nombre { font-size: clamp(42px, 14vw, 56px); }
  .plan-visuel::before, .plan-ligne.inverse .plan-visuel::before { width: 74%; }
  .contact-titre::before { display: none; }
  .puces .wpcf7-list-item-label { font-size: 13.5px; }
  .wp-block-table.tableau table { display: block; width: auto; }
  .fiche-lmnp .tableau td:nth-of-type(1)::before { content: 'Micro-BIC'; }
  .fiche-lmnp .tableau td:nth-of-type(2)::before { content: 'Régime réel'; }
  .legal-corps .tableau td:nth-of-type(1)::before { content: 'Base légale'; }
  .legal-corps .tableau td:nth-of-type(2)::before { content: 'Durée de conservation'; }
}

/* ---------- Généré depuis le contenu : délais d'apparition, colonnes, icônes ---------- */
.delai-00 { --delai: .00s; }
.delai-08 { --delai: .08s; }
.delai-10 { --delai: .10s; }
.delai-12 { --delai: .12s; }
.delai-15 { --delai: .15s; }
.delai-16 { --delai: .16s; }
.delai-20 { --delai: .20s; }
.delai-24 { --delai: .24s; }
.delai-30 { --delai: .30s; }
.n-3 { --n: 3; }
.n-4 { --n: 4; }
.prestations-icones li.pi-1 { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M12 3l2.600 5.600 6.100.7-4.500 4.100 1.200 6-5.400-3-5.400 3 1.200-6-4.500-4.100 6.100-.7z'/%3E%3C/svg%3E"); }
.prestations-icones li.pi-2 { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cellipse cx='12' cy='13' rx='9.500' ry='5'/%3E%3Cpath d='M6.500 13c1.800-1.300 3.700-1.300 5.500 0s3.700 1.300 5.500 0'/%3E%3C/svg%3E"); }
.prestations-icones li.pi-3 { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Ccircle cx='12' cy='8.500' r='3.500'/%3E%3Cpath d='M2 14h20M3.500 18.500c2.800-1.700 5.700-1.700 8.500 0s5.700 1.700 8.500 0'/%3E%3C/svg%3E"); }
.prestations-icones li.pi-4 { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M5 11V8a2 2 0 012-2h10a2 2 0 012 2v3'/%3E%3Cpath d='M3 13a2 2 0 014 0v2h10v-2a2 2 0 014 0v5H3zM6 18v2.500M18 18v2.500'/%3E%3C/svg%3E"); }
.prestations-icones li.pi-5 { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M12 2v20M3.300 7l17.400 10M20.700 7L3.300 17M9.500 3.500L12 6l2.500-2.500M9.500 20.500L12 18l2.500 2.500'/%3E%3C/svg%3E"); }
.prestations-icones li.pi-6 { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M12 22v-9M12 13c-4 0-6-2.500-6-5.500a6 6 0 0112 0c0 3-2 5.500-6 5.500zM12 17l3-2.500'/%3E%3C/svg%3E"); }
.prestations-icones li.pi-7 { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M12 4v17M2.500 11.500a9.500 7.500 0 0119 0zM8 21h8'/%3E%3C/svg%3E"); }
.prestations-icones li.pi-8 { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M3 13h18v3a4 4 0 01-4 4H7a4 4 0 01-4-4z'/%3E%3Ccircle cx='8' cy='8' r='1.500'/%3E%3Ccircle cx='13' cy='5.500' r='2'/%3E%3Ccircle cx='17' cy='9.500' r='1'/%3E%3C/svg%3E"); }
.prestations-icones li.pi-9 { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Crect x='4' y='3' width='16' height='18'/%3E%3Cpath d='M10 17V8h3a2.500 2.500 0 010 5h-3'/%3E%3C/svg%3E"); }