/* =====================================================================
   ROCK AROUND SIAM — Design System
   Fidèle à la charte graphique RASIAM (palette, Noto Sans, composants).
   Jalon 1 — prototype front-end.
   ===================================================================== */

/* ------------------------------- 1. Tokens ------------------------------- */
:root {
  /* Noirs & encre */
  --black:        #0A0A0A;
  --black-soft:   #141414;
  --black-elev:   #1C1C1C;
  --ink:          #1A1A1A;

  /* Marine profonde du logo (ROCK AROUND) */
  --navy:         #0E1A33;
  --navy-soft:    #16233F;

  /* Textes */
  --text:         #2A2620;
  --text-soft:    #4A4439;
  --muted:        #6B6557;

  /* Ors */
  --gold:         #C9A961;
  --gold-light:   #E0C688;
  --gold-deep:    #A8893F;
  --gold-pale:    #F4EAD4;

  /* Crèmes & papier */
  --cream:        #FAF7F1;
  --cream-soft:   #F3EDE0;
  --paper:        #FDFCF8;

  /* Lignes & états */
  --line:         #E8E2D2;
  --line-strong:  #D4C9A8;
  --danger:       #B04A3A;
  --success:      #5C7A4A;

  /* Ombres */
  --shadow-sm:  0 1px 2px rgba(26,22,16,.06), 0 1px 3px rgba(26,22,16,.05);
  --shadow-md:  0 4px 12px rgba(26,22,16,.08), 0 2px 4px rgba(26,22,16,.05);
  --shadow-lg:  0 18px 48px rgba(26,22,16,.14), 0 6px 16px rgba(26,22,16,.08);
  --shadow-gold: 0 8px 30px rgba(201,169,97,.28);

  /* Typo */
  --font-body:    "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Échelle & rythme */
  --maxw:       1200px;
  --gutter:     clamp(20px, 5vw, 64px);
  --radius:     10px;
  --radius-lg:  14px;
  --radius-pill: 999px;
  --radius-btn: 6px;   /* arrondi FIXE de tous les boutons (identique quelle que soit la longueur) */

  /* Lettre-espacement des labels (charte : 0.14em, majuscules) */
  --ls-label: .14em;
}

/* ------------------------------ 2. Reset -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 96px; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--cream);
  line-height: 1.7;
  font-size: clamp(15px, 0.55vw + 13.5px, 17px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Liens de texte dans les contenus (bios, prose) : dorés et soulignés */
main p a:not(.btn), .prose a:not(.btn) { color: var(--gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease; }
main p a:not(.btn):hover, .prose a:not(.btn):hover { color: var(--gold); }
button { font-family: inherit; }

/* --------------------------- 3. Typographie ----------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
p  { margin: 0 0 1.1em; color: var(--text-soft); }
strong { color: var(--text); font-weight: 600; }

.eyebrow {
  font-size: 14px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin: 0 0 1rem;
  display: inline-block;
}
.lead { font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: var(--text-soft); }

/* ------------------------------ 4. Layout ------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 120px); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--cream  { background: var(--cream); }
.section--paper  { background: var(--paper); }
.section--soft   { background: var(--cream-soft); }
.section--dark   { background: var(--navy); color: #EDE8DC; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #C7CBD6; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: clamp(20px, 2.5vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
/* Variante : contenu textuel affiché à droite (visuel à gauche) en desktop */
.split--rev { grid-template-columns: .95fr 1.05fr; }
.split--rev > *:first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--rev > *:first-child { order: 0; } }
/* Sections « équipe » : photo 400px (gauche ou droite), empilé sur mobile */
.split.team-member { grid-template-columns: 400px 1fr; }
.split.team-member--right { grid-template-columns: 1fr 400px; }
@media (max-width: 860px) {
  .split.team-member, .split.team-member--right { grid-template-columns: 1fr; }
  .split.team-member figure { position: static; }
  .split.team-member--right figure { order: -1; }   /* photo au-dessus du texte sur mobile */
  /* CV affichés « en dur » sous chaque photo : toujours visibles (pas de fondu au scroll) */
  .split.team-member .reveal, .split.team-member--right .reveal { opacity: 1; transform: none; transition: none; }
}
/* CV tronqué à la hauteur de la photo + lien « Tout lire » (déplie le reste) */
.cv-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 14; -webkit-box-orient: vertical; overflow: hidden; }
.cv-text.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cv-toggle { margin-top: 14px; background: none; border: 0; padding: 0; font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--gold-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.cv-toggle:hover { color: var(--gold); }
/* Mobile : « Tout lire » désactivé → CV affiché en entier sous la photo */
@media (max-width: 860px) {
  .cv-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .cv-toggle { display: none; }
}

/* ------------------------------ 5. Boutons ------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.6em;
  border-radius: var(--radius-btn);
  font-weight: 600; font-size: .92rem;
  letter-spacing: .01em;
  cursor: pointer; border: 1px solid transparent;
  transition: all .25s ease;
  white-space: nowrap;
}
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Primaire — or plein */
.btn--primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color: #241B08; box-shadow: var(--shadow-sm);
}
.btn--primary:hover { box-shadow: var(--shadow-gold); transform: translateY(-1px); }

/* Fantôme — contour or */
.btn--ghost {
  background: transparent; color: var(--gold-deep);
  border-color: var(--gold);
}
.btn--ghost:hover { background: var(--gold-pale); color: var(--gold-deep); }

/* Clair — fond blanc */
.btn--light { background: #fff; color: var(--navy); border-color: rgba(14,26,51,.16); border-radius: var(--radius-btn); box-shadow: var(--shadow-sm); }
.btn--light:hover { background: var(--gold-pale); border-color: var(--gold); color: var(--gold-deep); }
/* « Choisir cette visite » : fond beige identique au badge, survol doré */
.xp-live__cta a.btn--light { background: var(--gold-pale); color: var(--gold-deep); border-color: var(--line-strong); }
.xp-live__cta a.btn--light:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
/* « Tout lire / Réduire » : reste blanc (jamais beige, y compris hover collant au tap mobile) */
.xp-live__cta .xp-live__more.btn--light:hover,
.xp-live__cta .xp-live__more.btn--light:focus { background: #fff; color: var(--navy); border-color: var(--gold); }

/* Compact */
.btn--sm { padding: .5em 1.15em; font-size: .82rem; }

/* Sur fond sombre */
.btn--onDark { background: transparent; color: var(--gold-light); border-color: rgba(201,169,97,.55); }
.btn--onDark:hover { background: rgba(201,169,97,.12); border-color: var(--gold); }

.btn--lg { padding: 1.05em 2em; font-size: 1rem; }

/* ------------------------- 5b. Bandeau brouillon i18n ------------------- */
.i18n-draft {
  background: repeating-linear-gradient(45deg, var(--gold-pale), var(--gold-pale) 12px, #efe1c4 12px, #efe1c4 24px);
  color: var(--gold-deep); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; padding: 6px 12px; font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}

/* ------------------------------- 6. Topbar ------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--black);
  color: #EDE8DC;
  border-bottom: 1px solid rgba(201,169,97,.22);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 90px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 45px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text b { font-weight: 700; letter-spacing: .04em; font-size: .95rem; color: #fff; }
.brand__text span { font-size: .62rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gold); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  padding: .55em .85em; font-size: .84rem; font-weight: 500;
  color: #D8D3C7; border-radius: 8px;
  transition: color .2s;
}
.nav a:hover { color: #fff; }
.nav a.is-active { color: #fff; }
.nav a.is-active::after {
  content: ""; position: absolute; left: .85em; right: .85em; bottom: 0;
  height: 2px; background: var(--gold);
}

.topbar__actions { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; align-items: center; gap: 2px; font-size: .78rem; color: #B9B3A6; }
.lang a { padding: 3px 6px; border-radius: 6px; }
.lang a.is-active { color: var(--gold-light); font-weight: 600; }
.lang span { opacity: .4; }

.burger { display: none; background: none; border: 0; color: #EDE8DC; cursor: pointer; padding: 8px; }
.burger svg { width: 26px; height: 26px; }

@media (max-width: 980px) {
  .nav {
    position: fixed; inset: 90px 0 auto 0;
    background: var(--black-elev);
    flex-direction: column; align-items: stretch;
    padding: 12px var(--gutter) 24px;
    gap: 2px; border-bottom: 1px solid rgba(201,169,97,.22);
    transform: translateY(-140%); transition: transform .3s ease;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: .8em .4em; font-size: .95rem; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; }
  .nav a.is-active { border-bottom-color: rgba(255,255,255,.06); color: var(--gold-light); }
  .nav a.is-active::after { display: none; }
  .burger { display: inline-flex; }
}

/* Petits écrans : on allège la barre pour laisser respirer le logo */
@media (max-width: 600px) {
  .topbar__actions .btn { display: none; }        /* CTA repris par le menu + le hero */
  .topbar__inner { gap: 12px; }
}

/* ------------------------------- 7. Hero -------------------------------- */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 90px);      /* plein écran (sous la barre du menu) */
  min-height: calc(100svh - 90px);
  display: flex; flex-direction: column; justify-content: flex-start;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(201,169,97,.20), transparent 55%),
    radial-gradient(90% 70% at 5% 110%, rgba(201,169,97,.10), transparent 60%),
    linear-gradient(160deg, #0B1226 0%, var(--navy) 45%, #0A1020 100%);
  background-color: var(--navy);
  color: #F2EEE4;
}
/* Photo du hero : vraie balise <img> (bon SEO : nom de fichier + alt),
   gérée depuis le gestionnaire local (Outils/). Toujours pleine luminosité. */
.hero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1;
}
/* Voile sombre RÉGLABLE : --hero-veil = 0 (aucun voile, photo lumineuse) → 1 (très sombre). */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
              rgba(10,16,26, calc(var(--hero-veil, .4) * .55)) 0%,
              rgba(10,16,26, var(--hero-veil, .4)) 100%);
}
/* Le bloc hero utilise le conteneur standard (1200) → bord gauche aligné sur les sections.
   Le contenu textuel est limité à ~2/3 et aligné à gauche (règle plus bas). */
.hero__inner { position: relative; z-index: 2; padding-block: clamp(100px, 11vw, 180px); }
/* Ombre discrète : garde le texte lisible même sans voile (veil = 0). */
.hero .eyebrow, .hero h1, .hero .lead, .hero__scroll { text-shadow: 0 2px 22px rgba(8,12,22,.55); }
/* Eyebrow des heros en blanc (lisibilité sur toutes les photos) — l'emporte sur le doré inline */
.hero .eyebrow { color: #fff !important; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero .lead { color: #E7E9EE; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }
.hero__scroll { position: absolute; z-index: 2; bottom: 26px; left: 50%; transform: translateX(-50%); color: rgba(201,169,97,.7); font-size: .7rem; letter-spacing: var(--ls-label); text-transform: uppercase; }

/* petit filet doré décoratif */
.rule-gold { width: 64px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); border: 0; margin: 0 0 1.4rem; }
.section-head--center .rule-gold { margin-inline: auto; }

/* ------------------------------- 8. Cartes ------------------------------ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card__media { aspect-ratio: 4 / 3; position: relative; }
.card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .35em; }
.card__body p { font-size: .93rem; margin-bottom: 1.1em; }
.card__link { margin-top: auto; color: var(--gold-deep); font-weight: 600; font-size: .86rem; display: inline-flex; gap: .4em; }
.card__link .arrow { transition: transform .25s; }
.card:hover .card__link .arrow { transform: translateX(3px); }
/* Cartes « en développement » — image en tête, titre en surimpression, description dessous */
.card--dev .card__media { display: flex; align-items: flex-end; overflow: hidden; }
.card--dev .card__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.card--dev .card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,12,22,0) 38%, rgba(6,10,18,.82) 100%); }
.card--dev .card__media-over { position: relative; z-index: 2; padding: 14px 16px; }
.card--dev .card__media-over .badge { background: var(--gold); color: #241B08; }
.card--dev .card__media-over h3 { margin: .4em 0 0; color: #fff; font-size: 1.12rem; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.card--dev .card__body { padding: 16px 18px 22px; }
/* Page Expériences — Bloc 2 « Concepts d'expérience » : fiches en portrait 3:4 (photos téléversées en 3:4) */
#concevons .card__media { aspect-ratio: 3 / 4; }
/* Bloc 2 : description limitée à 6 lignes + bouton blanc « Tout lire » */
#concevons .card__body { display: flex; flex-direction: column; align-items: flex-start; }
.devcard-text { color: var(--text-soft); font-size: .9rem; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.devcard-text.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.devcard-more { margin-top: 12px; background: #fff; color: var(--navy); border: 1px solid rgba(14,26,51,.16); border-radius: var(--radius-btn); padding: .5em 1.15em; font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); }
.devcard-more:hover { border-color: var(--gold); color: var(--gold-deep); }
html.rasedit-mode .devcard-text { display: block; -webkit-line-clamp: unset; overflow: visible; }  /* mode édition : texte complet visible */
/* Bloc 2 : menu par familles (pastilles + compteur) + panneaux */
.fam-tabs { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 30px; }
.fam-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: #fff; color: var(--text-soft); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .16s; text-align: center; }
.fam-tab:hover { border-color: var(--gold); color: var(--gold-deep); }
.fam-tab.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }
.fam-tab__n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold-pale); color: var(--gold-deep); font-size: .68rem; font-weight: 700; }
.fam-tab.is-on .fam-tab__n { background: rgba(255,255,255,.28); color: #fff; }
.fam-panel { display: none; }
.fam-panel.is-on { display: block; }
#concevons .fam-intro { max-width: 820px; margin: 0 0 26px; color: var(--text-soft); font-size: 1rem; line-height: 1.7; text-align: left; }
html.rasedit-mode .fam-panel { display: block; margin-bottom: 26px; }
@media (max-width: 640px) { #concevons { display: none; } }  /* bloc « Pour aller plus loin » masqué sur mobile */
/* Page À propos — blocs « approche » en split alterné (encarts navy / or + image) */
.apx { padding: 8px 0 20px; }
.apx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; max-width: 1180px; margin: 0 auto 26px; padding: 0 var(--gutter); }
.apx-row:nth-child(even) .apx-card { order: 2; }
.apx-row:nth-child(even) .apx-media { order: 1; }
.apx-card { background: linear-gradient(150deg,#12233f,#0b1830); color: #fff; border-radius: 16px; padding: 40px 42px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow-md); }
.apx-row:first-child .apx-card { background: linear-gradient(150deg,#b78a34,#7c5716); }
.apx-card .eyebrow { color: var(--gold-light); margin: 0 0 10px; }
.apx-card h2 { color: #fff; font-size: clamp(1.35rem,2vw,1.85rem); margin: 0 0 16px; line-height: 1.2; }
.apx-card p { color: rgba(255,255,255,.9); line-height: 1.75; margin: 0; }
.apx-card p + p { margin-top: 14px; }
.apx-card ul { margin: 14px 0 0; padding-left: 1.15em; }
.apx-card li { color: rgba(255,255,255,.9); line-height: 1.65; margin-bottom: 9px; }
.apx-card li::marker { color: var(--gold-light); }
.apx-card li strong { color: #fff; }
.apx-card ul + p { margin-top: 14px; }
/* Page À propos — Notre histoire : 5 photos empilées (les unes au-dessus des autres) */
.hist-gallery { display: grid; grid-template-columns: 1fr; gap: 14px; }
.hist-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; box-shadow: var(--shadow-sm); }
.hist-split { align-items: start; }  /* photos et texte alignés en haut dans les 2 colonnes */
.hist-split + .hist-split { margin-top: clamp(40px, 5vw, 64px); }  /* espace entre les 2 blocs */
.apx-media { border-radius: 16px; overflow: hidden; background: #fff; display: flex; align-items: center; min-height: 300px; box-shadow: var(--shadow-sm); }
.apx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) { .apx-row { grid-template-columns: 1fr; } .apx-row:nth-child(even) .apx-card { order: 1; } .apx-row:nth-child(even) .apx-media { order: 2; } .apx-media { min-height: 240px; } }

/* Carte destination (image + overlay) */
/* Carte destination masquée (aucune expérience publiée) : cachée sur le site, visible en édition */
.dest[data-published="false"] { display: none; }
html.rasedit-mode .dest[data-published="false"] { display: flex; opacity: .45; outline: 2px dashed #b23b2e; }
.dest {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 340px; display: flex; align-items: flex-end;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dest:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.dest__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; }
.dest:hover .dest__img { transform: scale(1.05); }
.dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,14,26,.82) 0%, rgba(10,14,26,.15) 55%, transparent 80%); }
.dest__body { position: relative; z-index: 1; padding: 22px; color: #fff; }
.dest__body h3 { color: #fff; margin-bottom: .2em; }
.dest__body span { font-size: .78rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gold-light); }

/* Photos éparpillées (section Vision) — tirages posés, lumière qui respire */
.scatter { position: relative; width: 100%; max-width: 680px; aspect-ratio: 1 / 1; margin-inline: auto; }
.scatter::before {
  content: ""; position: absolute; inset: 4%; z-index: 0;
  background: radial-gradient(58% 58% at 52% 42%, rgba(201,169,97,.18), transparent 72%);
  filter: blur(30px);
}
.scatter__photo {
  position: absolute; overflow: hidden; margin: 0;
  width: 55%; aspect-ratio: 1 / 1;
  background: #fdfcf8; padding: 6px; border-radius: 4px;
  box-shadow: 0 24px 44px -20px rgba(14,26,51,.5), 0 5px 12px rgba(14,26,51,.15);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease;
  will-change: transform, filter;
  animation: scatterLumen var(--dur,11s) var(--del,0s) ease-in-out infinite alternate;
}
.scatter__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
/* Ordre de profondeur : rouge (devant) › jaune › vert › bleu (tout derrière) */
/* Moulinet — base à décalage uniforme, puis agrandissement depuis le centre par image */
/* Image 1 (fond, haut-gauche) : inchangée — 55% */
.scatter__photo--blue   { top: -5%;    left: 3%;      z-index: 1; --dur: 12s; --del: 0s;    }
/* Image 2 (haut-droite) : +10% depuis le centre */
.scatter__photo--green  { top: 0.25%;  left: 47.25%;  width: 60.5%; z-index: 2; --dur: 9s;  --del: -3s;   }
/* Image 3 (bas-droite) : +20% depuis le centre */
.scatter__photo--yellow { top: 44.5%;  left: 36.5%;   width: 66%;   z-index: 3; --dur: 14s; --del: -6s;   }
/* Image 4 (devant, bas-gauche) : +30% depuis le centre */
.scatter__photo--red    { top: 33.75%; left: -13.25%; width: 71.5%; z-index: 4; --dur: 10s; --del: -1.5s; }
.scatter__photo:hover { transform: translateY(-6px) scale(1.04); z-index: 6; box-shadow: 0 40px 64px -22px rgba(14,26,51,.6), 0 8px 18px rgba(14,26,51,.2); }
@keyframes scatterLumen {
  0%   { filter: brightness(.9) saturate(.95) contrast(.98); }
  100% { filter: brightness(1.09) saturate(1.06) contrast(1.02); }
}
@media (prefers-reduced-motion: reduce) { .scatter__photo { animation: none; } }

/* Carrousel photos (fondu enchaîné) — 80vw, format 16:6 */
/* Marges gauche/droite du cadre = marges haut/bas (var --cm) */
.carousel { --cm: clamp(30px, 4vw, 60px); width: calc(100vw - 2 * var(--cm)); max-width: calc(100vw - 2 * var(--cm)); margin-inline: calc((100% - (100vw - 2 * var(--cm))) / 2); margin-block: var(--cm); }
.carousel__track { position: relative; width: 100%; aspect-ratio: 16 / 6; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--navy); }
/* Carrousel en section pleine largeur — version SIMPLE par défaut (fiches destination) */
.carousel-band { padding-block: clamp(24px, 3.5vw, 48px); }
.carousel-band .carousel { position: relative; width: 100%; max-width: 100%; margin: 0; }
.carousel-band .carousel__track { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow-lg); }
.carousel-band .carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* Version VINTAGE (Accueil) : bande grise pleine largeur + cadre patiné texturé */
.carousel-band--vintage { background: #F6F5F1; padding-block: clamp(44px, 6vw, 86px); }
.carousel-band--vintage .section-head { max-width: none; width: 110%; margin-left: -5%; margin-right: -5%; }
@media (max-width: 820px) { .carousel-band--vintage .section-head { width: 100%; margin-left: 0; margin-right: 0; } }
.carousel-band--vintage .carousel { width: 110%; max-width: 110%; margin: 0 -5%; position: relative;
  background: #D6C39C;
  padding: 18px;
  border-radius: 2px;
  box-shadow: var(--shadow-lg); }
.carousel-band--vintage .carousel::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 2px;
  background-image:
    radial-gradient(circle at 5% 92%, rgba(92,64,28,.55), transparent 22%),
    radial-gradient(circle at 94% 8%, rgba(108,78,38,.48), transparent 20%),
    radial-gradient(circle at 60% 97%, rgba(120,92,52,.36), transparent 16%),
    radial-gradient(circle at 33% 3%, rgba(130,100,58,.34), transparent 15%),
    radial-gradient(circle at 98% 62%, rgba(88,64,32,.40), transparent 15%),
    radial-gradient(circle at 2% 42%, rgba(120,92,52,.36), transparent 15%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, cover, cover, 180px 180px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  box-shadow: inset 0 0 36px rgba(66,46,20,.45);
  mix-blend-mode: multiply; opacity: .95; }
.carousel-band--vintage .carousel__track { aspect-ratio: 16 / 9; border-radius: 0; background: #000;
  position: relative; z-index: 2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
@media (max-width: 820px) { .carousel-band--vintage .carousel { width: 100%; max-width: 100%; margin: 0; padding: 12px; } }
.carousel-band--vintage .carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
/* Vintage CONTENU (fiches destination) : cadre patiné, mais dans la colonne (pas de débord ni de bande grise) */
.section .carousel-band--vintage { background: transparent; padding-block: clamp(20px, 3vw, 40px); }
.section .carousel-band--vintage .carousel { width: 100%; max-width: 100%; margin: 0; }
.carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.carousel__dot:hover { background: var(--gold); }
.carousel__dot.is-on { background: var(--gold-deep); transform: scale(1.25); }
/* Survol : seule la photo VISIBLE réagit (infobulle alt par photo, pas la pile) */
.ccar__slide, .carousel__slide { pointer-events: none; }
.ccar__slide.is-active, .carousel__slide.is-active { pointer-events: auto; }
.carousel__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.5s ease-in-out; }
.carousel__slide.is-active { opacity: 1; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .carousel__slide { transition: none; } }

/* ===== Blocs présentation (Accueil) : carrousel 3:4 + texte, fonds alternés blanc/gris ===== */
.section--white { background: #ffffff; }
.section--grey  { background: #F6F5F1; }
/* Intro « Expériences » des fiches destination : texte plein-largeur, 17 px sur ordinateur */
.exp-intro .section-head { max-width: none; }
.exp-intro .section-head .lead { font-size: clamp(15px, 0.55vw + 13.5px, 17px); }
.feature-block { display: grid; grid-template-columns: 470px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.feature-block__text h2 { margin-top: 0; }
/* Blocs présentation (Voyage / AMBITION / ADN) : photo 470px, titre 40px, callout 22px */
.split--media { grid-template-columns: minmax(0, 1fr) 470px; }        /* image à droite */
.split--rev.split--media { grid-template-columns: 470px minmax(0, 1fr); }  /* image à gauche */
.pblock h2 { font-size: 40px; line-height: 1.15; }
@media (max-width: 860px) { .split--media, .split--rev.split--media, .feature-block { grid-template-columns: 1fr; } }
/* Titre du bloc en tête, pleine largeur, aligné à gauche */
.feature-block__head { margin-bottom: clamp(22px, 3vw, 38px); text-align: left; }
.feature-block__head h2 { max-width: none; margin: 0; }
.feature-block__head .rule-gold { margin-inline: 0; }
/* Variante : image à droite (alternance des blocs) */
.feature-block--rev { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.feature-block--rev .ccar { order: 2; }
.callout { background: #E8E5DD; border-radius: 12px; padding: 22px 26px; margin: 18px 0 24px; }
.callout p { margin: 0; font-size: 20px; line-height: 1.55; }
/* Encadré aligné au sommet de la photo dans un bloc à colonnes (Voyage) */
.feature-block .callout:first-child { margin-top: 0; }
/* Images 16:9 en tête des cartes « feature » (remplacent les icônes) */
.feature__media { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; margin: 0 0 16px; background: var(--cream); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .feature-block, .feature-block--rev { grid-template-columns: 1fr; } .feature-block--rev .ccar { order: 0; } }
/* Carrousel 3:4 — flèches + points, défilement auto 5 s, fondu élégant */
.ccar { position: relative; }
.ccar__track { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--navy); }
.ccar__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.ccar__slide.is-active { opacity: 1; }
.ccar__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccar__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: var(--navy); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: background .2s; }
.ccar__nav:hover { background: #fff; }
.ccar__prev { left: 10px; } .ccar__next { right: 10px; }
.ccar__nav { display: none; }   /* flèches supprimées : navigation par points + défilement auto */
.ccar__dots { display: flex; gap: 7px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.ccar__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .2s, transform .2s; }
.ccar__dot.is-on { background: var(--gold-deep); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .ccar__slide { transition: none; } }

/* ===== Page Destination ===== */
.dest-photo { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; }
.dest-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery__item { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 14px 30px -18px rgba(14,26,51,.4); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 720px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* Fiche expérience */
.xp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; margin-top: clamp(54px, 7.5vw, 96px); }
.xp--reverse { grid-template-columns: 1fr 1.05fr; }   /* l'image (order:2) garde la même largeur qu'en mode normal */
.xp--reverse .xp__media { order: 2; }
/* Photo à droite → bloc texte aligné à droite (desktop uniquement) */
@media (min-width: 721px) {
  .xp--reverse .xp__body { text-align: right; }
  .xp--reverse .xp__body .badge, .xp--reverse .xp__body .xp__actions { align-self: flex-end; }
}
.xp__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; align-self: start; }
.xp__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.xp:hover .xp__media img { transform: scale(1.04); }
/* Colonne texte = hauteur de la photo, contenu réparti (badge en haut, bouton en bas) */
.xp__body { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(12px, 1.5vw, 18px); }
.xp__body .badge, .xp__body .xp__actions { align-self: flex-start; }
.xp__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.xp__body h3 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.5rem); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.xp__sub { color: var(--gold-deep); font-weight: 400; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xp__text { margin: 0; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.xp__text.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (max-width: 720px) { .xp__body { justify-content: flex-start; gap: 14px; margin-top: 18px; } .xp__body h3, .xp__sub { -webkit-line-clamp: unset; } }
.xp__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 18px; }
.xp__gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; }
@media (max-width: 720px) { .xp { grid-template-columns: 1fr; } .xp--reverse .xp__media { order: 0; } }

/* ===== Expériences « Sommaire vivant » : index cliquable + détail ===== */
.xp-live { display: grid; grid-template-columns: minmax(230px, 312px) 1fr; gap: clamp(24px, 3.5vw, 52px); align-items: start; margin-top: clamp(28px, 4vw, 46px); }
.xp-live__index { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 4px; }
.xp-live__item { text-align: left; width: 100%; border: 1px solid transparent; background: rgba(26,22,16,.030); cursor: pointer; font: inherit; color: var(--ink);
  padding: 13px 14px; border-radius: 12px; display: flex; gap: 13px; align-items: baseline; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.xp-live__item:hover { background: rgba(26,22,16,.07); }
.xp-live__item.is-active { background: var(--gold-pale); border-color: rgba(201,169,97,.42); box-shadow: var(--shadow-sm); }
.xp-live__n { font-variant-numeric: tabular-nums; color: var(--gold-deep); font-weight: 700; font-size: .82rem; min-width: 1.5em; }
.xp-live__lbl { display: flex; flex-direction: column; }
.xp-live__ti { font-weight: 600; font-size: .96rem; line-height: 1.28; }
.xp-live__tg { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.xp-live__panel { display: none; }
.xp-live__panel.is-active { display: block; animation: xpLiveIn .32s ease; }
/* Expériences non publiées (brouillon) : cachées sur le site, visibles en édition */
.xp-live__item[data-published="false"] { display: none; }
.xp-live__panel[data-published="false"] { display: none !important; }
html.rasedit-mode .xp-live__item[data-published="false"] { display: flex; opacity: .55; }
html.rasedit-mode .xp-live__panel[data-published="false"].is-active { display: block !important; }
.xp-live__media { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
  margin: 0 0 clamp(18px, 2.4vw, 26px); position: relative; padding: 0; border: 0; background: var(--navy); cursor: pointer; }
.xp-live__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.xp-live__media:hover img { transform: scale(1.04); }
.xp-live__media .masonry-trigger__hint { left: auto; right: 14px; transform: none; }   /* « Voir la galerie » aligné à droite */
.xp-live__body .badge { margin-bottom: 12px; }
.xp-live__body h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 .35em; }
.xp-live__sub { color: var(--gold-deep); font-weight: 500; margin: 0 0 1em; font-size: clamp(1rem, 1.2vw, 1.1rem); }
.xp-live__text { margin: 0; color: var(--text-soft); max-width: 68ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.xp-live__text.is-expanded { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
/* Mode édition (?edit=1, classe posée par l'éditeur) : jamais de repli —
   le texte complet doit rester visible et éditable, quel que soit l'élément contenteditable */
html.rasedit-mode .xp-live__text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
html.rasedit-mode .xp-live__more { display: none !important; }
.xp-live__cta { margin-top: clamp(18px, 2.2vw, 24px); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@keyframes xpLiveIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .xp-live__panel.is-active { animation: none; } }
/* ---- Balayage mobile : UI (compteur, points, flèches, bulle) — masquée en desktop ---- */
.xp-live__swipebar, .xp-live__nav { display: none; }
.xp-live__swipetip { display: none; }
.xp-live__counter { font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 700; color: var(--gold-deep); letter-spacing: .05em; }
.xp-live__dots { display: flex; gap: 6px; flex: 1; }
.xp-live__pdot { height: 5px; flex: 1; max-width: 28px; border-radius: 99px; background: var(--line); transition: background .25s ease; }
.xp-live__pdot.on { background: var(--gold); }
.xp-live__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--gold-deep); font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; }
.xp-live__hinttxt { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.xp-live__chev { color: var(--gold-deep); animation: xpSway 1.5s ease-in-out infinite; }
.xp-live__chev--r { transform: scaleX(-1); animation-name: xpSwayR; }
@keyframes xpSway { 0%,100% { opacity: .5; transform: translateX(0); } 50% { opacity: 1; transform: translateX(-3px); } }
@keyframes xpSwayR { 0%,100% { opacity: .5; transform: scaleX(-1) translateX(0); } 50% { opacity: 1; transform: scaleX(-1) translateX(-3px); } }
.xp-live__swipetip .hand { display: inline-block; animation: xpHand 1.4s ease-in-out infinite; }
@keyframes xpHand { 0%,100% { transform: translateX(3px); } 50% { transform: translateX(-5px); } }
.xp-live--swiped .xp-live__swipetip { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .xp-live__chev, .xp-live__swipetip .hand { animation: none; } }

@media (max-width: 860px) {
  html { scroll-snap-type: y proximity; }                 /* léger point d'arrêt vertical */
  #au-menu .xp-live { scroll-snap-align: start; scroll-snap-stop: always; }  /* cale le carrousel en haut à l'arrivée */
  .xp-live { display: block; }
  .xp-live__index { display: none; }
  .xp-live__swipebar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .xp-live__panels { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 0 6px; scrollbar-width: none; }
  .xp-live__panels::-webkit-scrollbar { display: none; }
  .xp-live__panel { display: block !important; flex: 0 0 94%; scroll-snap-align: center; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; animation: none; background: var(--panel); position: relative; }
  .xp-live__panel .xp-live__media { aspect-ratio: 16 / 10; border-radius: 0; margin: 0; box-shadow: none; }
  .xp-live__panel .xp-live__body { padding: 14px 15px 16px; }
  .xp-live__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
  .xp-live__swipetip { display: flex; align-items: center; gap: 7px; position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(10,16,26,.72); color: #fff; padding: .48em .8em; border-radius: 99px; font-size: .62rem; font-weight: 600; letter-spacing: .05em; backdrop-filter: blur(3px); pointer-events: none; transition: opacity .35s ease; }
}

/* ===== Masonry image gallery (aperçu + lightbox) ===== */
.masonry-trigger { position: relative; display: block; cursor: pointer; border: 0; padding: 0; background: none; width: 100%; text-align: left; }
.masonry { column-count: 2; column-gap: 12px; }
.masonry__item { break-inside: avoid; margin: 0 0 12px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.masonry__item img { width: 100%; height: auto; display: block; transition: transform .6s ease; }
.masonry-trigger:hover .masonry__item img { transform: scale(1.03); }
.masonry-trigger__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  background: #fff; color: var(--black); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .55em 1.1em; border-radius: var(--radius-btn); box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); pointer-events: none; }
/* Mobile : bouton « Voir la galerie » réduit de 25 % (padding/espacement en em suivent la police) */
@media (max-width: 640px) { .masonry-trigger__hint { font-size: .6rem; border-radius: var(--radius-btn); } }
/* Bouton « Voir la galerie » centré sous la galerie masonry */
.masonry-trigger__cta { display: block; width: fit-content; margin: 20px auto 0; z-index: 2;
  background: rgba(14,26,51,.9); color: #fff; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .7em 1.5em; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(14,26,51,.5); transition: background .3s ease; }
.masonry-trigger:hover .masonry-trigger__cta { background: var(--gold-deep); }

.mgal { position: fixed; inset: 0; z-index: 2000; background: rgba(10,16,26,.94); display: none; }
.mgal.is-open { display: block; }
/* Bandeau haut : garde le titre toujours lisible pendant le défilement */
.mgal.is-open::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 78px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,16,26,.98) 34%, rgba(10,16,26,.72) 72%, transparent); }
.mgal__scroll { position: absolute; inset: 0; overflow-y: auto; padding: clamp(56px,7vw,88px) clamp(16px,4vw,48px) clamp(32px,5vw,64px); }
.mgal__grid { column-count: 5; column-gap: 16px; max-width: 1804px; margin: 0 auto; }
.mgal__grid figure { break-inside: avoid; margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 44px -18px rgba(0,0,0,.6); }
.mgal__grid img { width: 100%; height: auto; display: block; }
.mgal__close { position: fixed; top: 16px; right: 20px; z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.mgal__close:hover { background: rgba(255,255,255,.18); }
.mgal__title { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--gold-light); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; text-align: center; }
/* Mobile : masquer le titre de galerie dans la lightbox (il recouvrait la photo) */
@media (max-width: 640px) { .mgal__title { display: none !important; } }
.mgal__grid figure { cursor: zoom-in; }
.mgal__viewer { position: fixed; inset: 0; z-index: 4; background: rgba(6,10,18,.97); display: none; align-items: center; justify-content: center; }
.mgal__viewer.is-open { display: flex; }
.mgal__vimg { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); }
.mgal__nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 5; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.10); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.mgal__nav:hover { background: rgba(255,255,255,.20); }
.mgal__prev { left: clamp(12px,3vw,40px); }
.mgal__next { right: clamp(12px,3vw,40px); }
.mgal__vclose { position: fixed; top: 16px; right: 20px; z-index: 6; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.mgal__vclose:hover { background: rgba(255,255,255,.18); }
.mgal__vcount { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 6; color: rgba(255,255,255,.85);
  font-size: .85rem; letter-spacing: .08em; }
@media (max-width: 560px) { .mgal__nav { width: 46px; height: 46px; font-size: 1.6rem; } }
@media (max-width: 1600px) { .mgal__grid { column-count: 4; } }
@media (max-width: 1200px) { .mgal__grid { column-count: 3; } }
@media (max-width: 900px) { .mgal__grid { column-count: 2; } }
@media (max-width: 560px) { .mgal__grid { column-count: 1; } }

/* Badge / pastille */
.badge {
  display: inline-block; padding: .3em .8em; border-radius: 6px;
  background: var(--gold-pale); color: var(--gold-deep);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--line-strong);
}

/* --------------------------- 9. Offre / features ------------------------ */
.feature { text-align: left; }
.feature__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--gold-pale); color: var(--gold-deep);
  border: 1px solid var(--line-strong);
}
.feature__icon svg { width: 26px; height: 26px; }
.feature h3 { margin-bottom: .3em; }
.feature p { font-size: .95rem; }

/* --------------------------- 10. Bloc écosystème ------------------------ */
.eco { display: grid; gap: 18px; }
.eco__item {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 24px; border-radius: var(--radius);
  background: rgba(255,255,255,.03); border: 1px solid rgba(201,169,97,.22);
}
.eco__item h3 { color: #fff; font-size: 1.1rem; margin-bottom: .2em; }
.eco__item p { margin: 0; color: #C7CBD6; font-size: .93rem; }
.eco__tag { flex: none; font-size: .7rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gold-light); padding-top: 4px; }

/* --------------------------- 11. Témoignages ---------------------------- */
.quote {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 28px 30px; box-shadow: var(--shadow-sm);
}
.quote p { font-size: 1.02rem; color: var(--text); font-style: italic; }
.quote footer { font-size: .82rem; color: var(--muted); font-style: normal; letter-spacing: .02em; }

/* ----------------------------- 12. CTA band ----------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { color: #fff; max-width: 720px; margin-inline: auto; }
.cta-band p { max-width: 600px; margin-inline: auto 0; margin-inline: auto; }
.cta-band .hero__cta { justify-content: center; margin-top: 2rem; }

/* ------------------------------ 13. Footer ------------------------------ */
.footer { background: var(--black); color: #B9B3A6; padding-block: clamp(48px, 6vw, 80px) 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 620px) {
  .footer__brand { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .footer__grid > div:nth-child(4) { grid-column: 1 / -1; text-align: center; border-top: 1px solid rgba(255,255,255,.08); margin-top: 12px; padding-top: 26px; }
  .footer__grid > div:nth-child(2), .footer__grid > div:nth-child(3) { text-align: center; }
}
.footer h4 { color: var(--gold); font-size: .74rem; letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: 1.1em; font-weight: 600; }
.footer a { display: block; color: #C6C1B4; font-size: .9rem; padding: .28em 0; transition: color .2s; }
.footer a:hover { color: var(--gold-light); }
.footer__brand { margin-top: -29px; }   /* remonte le bloc : 1re ligne du texte alignée avec la 1re ligne des colonnes */
.footer__brand img { height: 45px; margin-bottom: 16px; }
.footer__brand p { color: #8F897C; font-size: .9rem; max-width: 300px; line-height: 1.45; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 28px; padding-block: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: .8rem; color: #7C766A; }
/* Icônes réseaux sociaux dorées dans le footer (injectées par main.js) */
.footer-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(201,169,97,.4); color: var(--gold); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.footer-social a:hover { background: var(--gold); color: #141414; border-color: var(--gold); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; display: block; }

/* ------------------------- 14. Formulaire (demande) --------------------- */
.form-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(28px, 4vw, 48px); }
.form-steps { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.form-step-tab { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); }
.form-step-tab b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-soft); color: var(--muted); font-size: .8rem; border: 1px solid var(--line-strong); }
.form-step-tab.is-active { color: var(--gold-deep); font-weight: 600; }
.form-step-tab.is-active b { background: var(--gold); color: #241B08; border-color: var(--gold-deep); }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: .72rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-soft); font-weight: 600; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8em .9em; font-family: inherit; font-size: .95rem; color: var(--text);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,97,.18);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: .55em 1.1em; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--cream); font-size: .86rem; cursor: pointer; transition: all .2s; }
.chip input:checked + span { background: var(--gold-pale); border-color: var(--gold); color: var(--gold-deep); font-weight: 600; }
/* Tags d'intérêt façon page Expériences (.xpcat-chip) : blanc, coins 6px, casse normale, doré actif */
.chip-group--xp .chip span { padding: 7px 15px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: #fff; color: var(--text-soft); font-size: .82rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.chip-group--xp .chip span:hover { border-color: var(--gold); color: var(--gold-deep); }
.chip-group--xp .chip input:checked + span { background: var(--gold); border-color: var(--gold); color: #fff; }
.form-note { font-size: .78rem; color: var(--muted); }
.form-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 28px; }

/* ------------------------------ 15. Utils ------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
[hidden] { display: none !important; }

/* Reveal au scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ===== Mock widget Google Reviews (Témoignages) ===== */
.greviews { max-width: 1040px; margin-inline: auto; }
.greviews__top { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 22px; box-shadow:var(--shadow-sm); margin-bottom:22px; }
.greviews__id { display:flex; align-items:center; gap:14px; }
.greviews__g { display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:conic-gradient(#EA4335 0 25%, #FBBC04 0 50%, #34A853 0 75%, #4285F4 0);
  color:#fff; font-weight:800; font-size:1.1rem; flex:none;
  box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0,0,0,.06); }
.greviews__id > div > strong { font-size:1rem; color:var(--ink); }
.greviews__meta { display:flex; align-items:center; gap:6px; font-size:.9rem; color:var(--muted); margin-top:2px; }
.greviews__meta b { color:var(--ink); font-size:1.05rem; }
.greviews__stars, .greview__stars { color:#FBBC04; letter-spacing:1px; }
.greviews__count { color:var(--muted); }
.greviews__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.greview { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 20px 22px; box-shadow:var(--shadow-sm); text-align:left; }
.greview__head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.greview__ava { width:40px; height:40px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; flex:none; }
img.greview__ava { object-fit:cover; }
.greview__who a { color:inherit; text-decoration:none; }
.greview__who a:hover { text-decoration:underline; }
.greview__who { display:flex; flex-direction:column; margin-right:auto; }
.greview__who strong { font-size:.95rem; color:var(--ink); }
.greview__who span { font-size:.8rem; color:var(--muted); }
.greview__g { font-weight:800; color:#4285F4; font-size:1.15rem; flex:none; }
.greview__stars { margin-bottom:8px; font-size:1rem; }
.greview p { margin:0; font-size:.93rem; line-height:1.6; color:var(--ink); }
.greview__txt { display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.greview.is-open .greview__txt { display:block; -webkit-line-clamp:unset; overflow:visible; }
.greview__more { margin-top:10px; padding:0; border:0; background:none; cursor:pointer; font:inherit; font-size:.85rem; font-weight:600; color:var(--gold-deep); }
.greview__more:hover { text-decoration:underline; }
.greviews__mock { text-align:center; margin:18px 0 0; font-size:.8rem; font-style:italic; color:var(--muted); }
@media (max-width: 860px){ .greviews__grid { grid-template-columns:1fr; } }


/* ===== Bloc Newsletter (autonome, sous « Prêt à partir ») ===== */
.newsletter-band { background: #ffffff; border-top: 1px solid var(--line); padding-block: clamp(44px,6vw,78px); }
.newsletter { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,5vw,60px); align-items:center; }
.newsletter__text h2 { margin:0 0 12px; }
.newsletter__text .lead { margin:0; color:var(--muted); max-width:46ch; }
.newsletter__form { width:100%; }
.newsletter__row { display:flex; gap:12px; }
.newsletter__input { flex:1; min-width:0; padding:.92em 1.1em; border-radius:10px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); font:inherit; font-size:.95rem; transition:border-color .2s, box-shadow .2s; }
.newsletter__input::placeholder { color:#9a9384; }
.newsletter__input:focus { outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(168,137,63,.15); }
.newsletter__form .btn { white-space:nowrap; }
.newsletter__hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.newsletter__note { margin:12px 0 0; font-size:.78rem; color:var(--muted); }
.newsletter__msg { margin:12px 0 0; font-size:.9rem; font-weight:600; }
.newsletter__msg.is-ok { color:#1e7e34; }
.newsletter__msg.is-err { color:#c0392b; }
@media (max-width: 820px){
  .newsletter { grid-template-columns:1fr; }
  .newsletter__row { flex-direction:column; align-items:stretch; }
  .newsletter__form .btn { justify-content:center; }
}


/* ===== Barre réseaux sociaux flottante (toutes pages) ===== */
.socialbar { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; border-radius: 8px 0 0 8px; overflow: hidden; box-shadow: var(--shadow-md); }
.socialbar a { width: 42px; height: 42px; display: grid; place-items: center; color: #fff;
  transition: filter .2s ease, padding-right .2s ease; }
.socialbar a:hover { filter: brightness(1.12); padding-right: 4px; }
.socialbar a svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.socialbar a.sb-linkedin  { background: #0A66C2; }
.socialbar a.sb-facebook  { background: #1877F2; }
.socialbar a.sb-instagram { background: radial-gradient(circle at 30% 107%, #FDD776 0%, #F58529 25%, #DD2A7B 55%, #8134AF 80%, #515BD4 100%); }
.socialbar a.sb-tiktok    { background: #010101; }
.socialbar a.sb-youtube   { background: #FF0000; }
.socialbar a.sb-whatsapp  { background: #25D366; }
.socialbar a.sb-email     { background: #6B6557; }
.socialbar a.sb-maps      { background: #34A853; }
@media (max-width: 820px) { .socialbar { display: none; } }

/* ====================================================================
   Protection du contenu — dissuasion copie de texte / enregistrement d'images
   (dissuasion « casual » ; contacts, liens et formulaires restent utilisables)
   ==================================================================== */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img {
  -webkit-user-drag: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Restent sélectionnables / copiables / interactifs */
input, textarea, select, [contenteditable="true"],
.footer, .is-selectable,
a[href^="mailto:"], a[href^="tel:"],
a[href*="wa.me"], a[href*="maps.app"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}