/* =================================================================
   SOL · Margaux Nihouarn — Design System (v2 · éditorial clair)
   Inspirations : Zoé & Camille — crème lumineux, arches, aplats chauds.

   RÈGLES D'OR
     · Brun (#2E2016) = TEXTE uniquement, jamais en fond de bloc.
     · Aplats de couleur = OR (#D2A556) ou TERRACOTTA (#BA7741) seulement.
     · Sinon : crème, sable, blanc, ou photo.
     · Gros titres = ED Bienova (locale) · reste = Open Sans.
     · Photos jamais en rectangle droit : arches, cercles, formes organiques.

   Couleurs issues de la charte officielle SOL.
   ================================================================= */

/* ---------- 0. POLICE DE MARQUE ---------- */
@font-face {
  font-family: 'ED Bienova';
  src: url('../assets/fonts/ED-Bienova-Regular.otf') format('opentype'),
       url('../assets/fonts/ED-Bienova-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. VARIABLES ---------- */
:root {
  /* Crèmes & neutres */
  --cream:        #FCF4E8;   /* fond général */
  --cream-2:      #F6ECDB;   /* alternance légère */
  --sand:         #EAD2AC;   /* sable, aplats doux */
  --hero-beige:   #FBEEDA;   /* beige clair — fond du hero */
  --snow:         #FFFCF6;   /* blanc crème très clair — fond accompagnements */
  --white:        #FFFFFF;
  --offwhite:     #FBF7EF;   /* blanc cassé */
  --ink:          #4A382B;   /* brun chaud — titres foncés (adouci : moins « contour noir » sur le crème) */
  --line:         #EADFCB;   /* bordures/séparateurs sur crème */

  /* Accents chauds (les SEULS aplats colorés) */
  --gold:         #D2A556;
  --gold-deep:    #B8862F;
  --terracotta:   #BA7741;
  --terracotta-deep: #9E5E33;

  /* Texte (brun = texte uniquement) */
  --dark:         #2E2016;
  --text:         #2E2016;
  --text-soft:    #6E5A48;
  --cream-text:   #FCF4E8;   /* texte clair sur aplat coloré */
  --cream-text-soft: rgba(252, 244, 232, 0.82);

  /* Familles secondaires (pages thématiques) */
  --green:    #3C513F;  --green-2: #70826C;  --green-3: #B4B99F;
  --blue:     #274A56;  --blue-2:  #8B9DAC;  --blue-3:  #D4DBD9;

  /* Jetons d'accent par thème (défaut = principal) */
  --c-primary:      var(--terracotta);
  --c-primary-deep: var(--terracotta-deep);
  --c-secondary:    var(--gold);
  --c-tint:         rgba(186, 119, 65, 0.12);
  --error:          #B5562F;

  /* Typo */
  --font-display: 'ED Bienova', 'Playfair Display', Georgia, serif;
  --font-sans:    'Open Sans', system-ui, -apple-system, sans-serif;

  --text-hero:  clamp(32px, 4.0vw, 50px);
  --text-h1:    clamp(29px, 3.5vw, 44px);
  --text-h2:    clamp(25px, 3.0vw, 36px);
  --text-h3:    clamp(18px, 2vw, 23px);
  --text-body:  17px;
  --text-small: 14px;
  --text-label: 13px;
  --line-height: 1.75;

  /* Layout */
  --max-width:   1200px;
  --pad-x:       24px;
  --pad-x-lg:    80px;
  --section-pad: clamp(80px, 11vw, 140px);
  --header-h:    80px;

  /* Rayons */
  --radius-card: 18px;
  --radius-pill: 999px;
  --radius-arch: 55% 45% 50% 50% / 60% 40% 60% 40%;
  --radius-cathedral: 50% 50% 0 0 / 34% 34% 0 0;   /* arche : haut arrondi, bas droit (coins carrés) */

  /* Ombres douces */
  --shadow-soft:  0 10px 45px rgba(46, 32, 22, 0.08);
  --shadow-card:  0 16px 55px rgba(46, 32, 22, 0.10);
  --shadow-hover: 0 24px 70px rgba(46, 32, 22, 0.15);

  /* Animations */
  --ease-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-micro:  0.25s;
  --duration-enter:  0.6s;
  --duration-expand: 0.35s;
}

.theme-retraite {
  --c-primary: var(--green); --c-primary-deep: #2E3F31; --c-secondary: var(--green-2);
  --c-tint: rgba(60, 81, 63, 0.12);
}
/* Accents par programme (sur les pages offres) — les gros titres restent terracotta */
.prog-flow      { --c-primary: #C9982F; --c-primary-deep: #A97C1F; --c-tint: rgba(201,152,47,0.14); }
.prog-reveal    { --c-primary: #BA7741; --c-primary-deep: #9E5E33; --c-tint: rgba(186,119,65,0.13); }
.prog-afterwork {
  --c-primary: #3C513F; --c-primary-deep: #2E3F31; --c-secondary: #B4B99F;
  --c-tint: rgba(180, 185, 156, 0.28);
  --text: #3A3631;
}
.prog-synergy   { --c-primary: #2F5360; --c-primary-deep: #1F3B45; --c-tint: rgba(47,83,96,0.15); }
.theme-entreprise {
  --c-primary: var(--blue); --c-primary-deep: #1B363F; --c-secondary: var(--blue-2);
  --c-tint: rgba(39, 74, 86, 0.12);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line-height);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--gold); color: var(--dark); }

/* ---------- 3. TYPOGRAPHIE ---------- */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.12; color: var(--dark); }

.display, .hero-title, h1, .h1, h2, .h2 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;    /* un peu d'air : ED Bienova a des jambages épais, ça évite l'effet « masse » */
  color: var(--c-primary);   /* gros titres dans la couleur du thème (jamais brun) */
}
.bg-terracotta .display, .bg-terracotta h1, .bg-terracotta h2,
.bg-accent h1, .bg-accent h2, .quote-block h2 { color: var(--cream-text); }
.display, .hero-title { font-size: var(--text-hero); line-height: 1.04; }
h1, .h1 { font-size: var(--text-h1); line-height: 1.08; }
h2, .h2 { font-size: var(--text-h2); line-height: 1.12; }
h3, .h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-h3); line-height: 1.35; }

p { max-width: 66ch; }
strong { font-weight: 600; }
em { font-style: italic; }

/* Accroche italique (Open Sans light italic) */
.script {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.5;
  color: var(--c-primary);
}

/* Eyebrow / sur-titre */
.eyebrow {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 18px;
}

.text-gold { color: var(--gold-deep); }
.text-terracotta { color: var(--terracotta); }
.text-soft { color: var(--text-soft); }
.text-center { text-align: center; }

/* Lien flèche */
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: var(--text-small);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-primary);
  transition: gap var(--duration-micro) var(--ease-smooth), color var(--duration-micro) ease;
}
.link-arrow::after { content: '→'; font-size: 1.2em; transition: transform var(--duration-micro) var(--ease-smooth); }
.link-arrow:hover { color: var(--c-primary-deep); gap: 14px; }
.link-arrow:hover::after { transform: translateX(5px); }

/* ---------- 4. LAYOUT ---------- */
.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--pad-x); }
@media (min-width: 768px) { .container { padding-inline: var(--pad-x-lg); } }

.section { padding-block: var(--section-pad); position: relative; }
.section-sm { padding-block: clamp(56px, 8vw, 90px); }

/* Fonds autorisés */
.bg-cream  { background: var(--cream); }
.bg-cream2 { background: var(--cream-2); }
.bg-sand   { background: var(--sand); }
.bg-white  { background: var(--white); }

/* Aplats colorés (OR / TERRACOTTA uniquement) */
.bg-gold { background: var(--gold); color: var(--dark); }
.bg-gold .eyebrow { color: var(--terracotta-deep); }
.bg-gold h1, .bg-gold h2, .bg-gold h3 { color: var(--dark); }

.bg-terracotta { background: var(--terracotta); color: var(--cream-text); }
.bg-terracotta h1, .bg-terracotta h2, .bg-terracotta h3 { color: var(--cream-text); }
.bg-terracotta p { color: var(--cream-text-soft); }
.bg-terracotta .eyebrow { color: var(--cream-text); opacity: 0.85; }

/* Aplat thématique (retraite/entreprise) */
.bg-accent { background: var(--c-primary); color: var(--cream-text); }
.bg-accent h1, .bg-accent h2, .bg-accent h3 { color: var(--cream-text); }
.bg-accent p { color: var(--cream-text-soft); }
.bg-accent .eyebrow { color: var(--cream-text); opacity: 0.85; }

/* Grille split texte/média */
.split { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.split-60-40 { grid-template-columns: 1.35fr 1fr; }
  .split.split-40-60 { grid-template-columns: 1fr 1.35fr; }
  .split.reverse > :first-child { order: 2; }
}

.section-head { max-width: 720px; margin-inline: auto; margin-bottom: clamp(48px, 6vw, 76px); text-align: center; }
.section-head p { margin-inline: auto; }
.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--text-soft); margin-top: 18px; }
.lead-wide { max-width: none; }
#accompagnements .section-head { max-width: 1000px; }
.bg-terracotta .lead, .bg-accent .lead { color: var(--cream-text-soft); }
.stack > * + * { margin-top: 1.2em; }

.divider { width: 60px; height: 2px; background: var(--c-primary); border: none; margin: 28px 0; }
.text-center .divider, .section-head .divider { margin-inline: auto; }

/* ---------- 4b. DÉCORS ORGANIQUES ---------- */
/* Ligne fine ondulée (façon Zoé) */
.squiggle { color: var(--c-primary); opacity: 0.6; }
.squiggle svg { width: 100%; height: auto; }

/* Tache/forme organique colorée derrière une photo */
.blob {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  z-index: 0;
  pointer-events: none;
}
.blob-gold { background: var(--gold); }
.blob-terra { background: var(--terracotta); }
.blob-sand { background: var(--sand); }

/* Motif topographique subtil (lignes de niveau) en fond */
.motif {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-repeat: repeat; background-size: 520px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23D2A556' stroke-width='2' opacity='0.5'%3E%3Cpath d='M-20 120 C120 60 260 180 400 120 S660 60 760 140'/%3E%3Cpath d='M-20 180 C120 120 260 240 400 180 S660 120 760 200'/%3E%3Cpath d='M-20 300 C140 240 280 360 420 300 S680 240 760 320'/%3E%3Cpath d='M-20 360 C140 300 280 420 420 360 S680 300 760 380'/%3E%3Cpath d='M-20 470 C120 410 260 530 400 470 S660 410 760 500'/%3E%3C/g%3E%3C/svg%3E");
}
.motif-terra { /* override couleur du motif en terracotta */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23BA7741' stroke-width='2' opacity='0.5'%3E%3Cpath d='M-20 120 C120 60 260 180 400 120 S660 60 760 140'/%3E%3Cpath d='M-20 180 C120 120 260 240 400 180 S660 120 760 200'/%3E%3Cpath d='M-20 300 C140 240 280 360 420 300 S680 240 760 320'/%3E%3Cpath d='M-20 360 C140 300 280 420 420 360 S680 300 760 380'/%3E%3Cpath d='M-20 470 C120 410 260 530 400 470 S660 410 760 500'/%3E%3C/g%3E%3C/svg%3E");
}
.has-motif { position: relative; isolation: isolate; }
.has-motif > .container { position: relative; z-index: 1; }

/* ---------- 5. HEADER / NAV ---------- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  background: transparent;                           /* fondu dans le beige du hero */
  box-shadow: none;
  transition: background var(--duration-enter) ease, box-shadow var(--duration-enter) ease;
  animation: headerDrop 0.7s var(--ease-smooth) both;   /* entrée dynamique */
}
.site-header.scrolled {
  background: var(--hero-beige);                     /* devient beige plein + ombre au scroll */
  box-shadow: 0 6px 26px rgba(46, 32, 22, 0.11);
}
@keyframes headerDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .site-header { animation: none; } }
.nav {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--header-h); max-width: var(--max-width); margin-inline: auto; padding-inline: var(--pad-x);
}
@media (min-width: 768px) { .nav { padding-inline: var(--pad-x-lg); } }

/* logo à gauche, liens + réseaux à droite */
.nav-right { display: none; }
@media (min-width: 992px) {
  .nav-right { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
}

/* icônes réseaux sociaux, bien séparées des liens */
.nav-social { display: flex; align-items: center; gap: 10px; margin-left: clamp(10px, 1.6vw, 22px); }
.nav-social a {
  width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center;
  color: var(--terracotta); border: 1.5px solid rgba(186, 119, 65, 0.40);
  transition: transform var(--duration-micro) var(--ease-smooth), color var(--duration-micro) ease, background var(--duration-micro) ease, border-color var(--duration-micro) ease;
}
.nav-social a:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); transform: translateY(-2px); }
.nav-social svg { width: 16px; height: 16px; }
/* emblème SOL en haut à droite */
.nav-emblem { display: inline-flex; align-items: center; margin-left: clamp(6px, 1vw, 14px); }
.nav-emblem img { height: 32px; width: auto; transition: transform 0.4s var(--ease-smooth); }
.nav-emblem:hover img { transform: scale(1.1) rotate(-4deg); }

.nav-logo { display: inline-flex; align-items: center; z-index: 2; }
.nav-logo .logo-img { height: 38px; width: auto; transition: transform 0.4s var(--ease-smooth); }
.nav-logo:hover .logo-img { transform: scale(1.05); }

/* nav répartie gauche / droite autour du logo */
.nav-link {
  position: relative; display: none; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); padding: 9px 16px; border-radius: var(--radius-pill);
  align-items: center; gap: 6px;
  transition: color var(--duration-micro) ease, background var(--duration-micro) ease;
}
@media (min-width: 992px) { .nav-link { display: inline-flex; } }
.nav-link:hover, .nav-link.active { color: var(--terracotta); background: rgba(186, 119, 65, 0.11); }
/* (survol des liens géré par la pastille arrondie ci-dessus) */

/* Bouton CTA du menu (style Sliding Mama) */
.nav-btn {
  display: none; white-space: nowrap;
  background: var(--terracotta); color: var(--cream-text);
  padding: 11px 22px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(186, 119, 65, 0.28);
  transition: background var(--duration-micro) ease, transform var(--duration-micro) var(--ease-smooth), box-shadow var(--duration-micro) ease;
}
@media (min-width: 992px) { .nav-btn { display: inline-flex; } }
.nav-btn:hover { background: var(--terracotta-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(186, 119, 65, 0.36); }
.nav-link .chev {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.6; transition: transform var(--duration-micro) ease;
}
.has-dropdown:hover .nav-link .chev { transform: translateY(0) rotate(45deg); }

/* Méga-menu */
.has-dropdown { position: relative; }
.nav-link--trigger { cursor: pointer; user-select: none; }
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 470px; background: var(--cream); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); border: 1px solid var(--line);
  padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--duration-micro) ease, transform var(--duration-micro) var(--ease-smooth), visibility var(--duration-micro);
}
.mega::before { content: ''; position: absolute; bottom: 100%; left: 0; width: 100%; height: 18px; }
/* méga-menu aligné à droite quand l'item est dans la nav de droite */
.nav-right .mega { left: auto; right: 0; transform: translateX(0) translateY(10px); }
.nav-right .has-dropdown:hover .mega, .nav-right .has-dropdown:focus-within .mega { transform: translateX(0) translateY(0); }
.has-dropdown:hover .mega, .has-dropdown:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega-item { display: block; padding: 14px 16px; border-radius: 12px; transition: background var(--duration-micro) ease; }
.mega-item:hover { background: var(--cream-2); }
.mega-name { font-weight: 700; font-size: 16px; color: var(--dark); display: flex; align-items: center; gap: 8px; letter-spacing: 0.04em; }
.mega-name::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--gold)); }
.mega-desc { font-size: 13px; color: var(--text-soft); margin-top: 3px; }

/* Burger */
.nav-cta { display: none; }
@media (min-width: 992px) { .nav-cta { display: inline-flex; } }

.nav-toggle { position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%); display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; z-index: 120; }
@media (min-width: 768px) { .nav-toggle { right: var(--pad-x-lg); } }
@media (min-width: 992px) { .nav-toggle { display: none; } }
.nav-toggle span {
  width: 26px; height: 2px; margin-inline: auto; background: var(--dark);
  transition: transform var(--duration-expand) var(--ease-smooth), opacity var(--duration-micro) ease, background var(--duration-micro) ease;
}
body.menu-open .nav-toggle span { background: var(--cream); }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay mobile (le seul moment "sombre" autorisé : c'est un panneau, court) */
.mobile-menu {
  position: fixed; inset: 0; z-index: 110; background: var(--terracotta);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  padding: 100px 32px 48px; transform: translateX(100%);
  transition: transform 0.35s var(--ease-smooth); visibility: hidden;
}
body.menu-open .mobile-menu { transform: translateX(0); visibility: visible; }
.mobile-menu a { font-family: var(--font-display); font-size: clamp(28px, 7vw, 38px); color: var(--cream); padding-block: 9px; transition: color var(--duration-micro) ease; }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--sand); }
.mobile-group { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); opacity: 0.75; margin-top: 14px; }
.mobile-menu a.mobile-sub { font-size: clamp(22px, 5.5vw, 30px); }
.mobile-menu .btn { margin-top: 30px; }

/* ---------- 6. BOUTONS ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  overflow: hidden; border-radius: var(--radius-pill); padding: 15px 36px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.03em; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: color var(--duration-micro) ease, border-color var(--duration-micro) ease, transform var(--duration-micro) var(--ease-smooth);
}
.btn span { position: relative; z-index: 1; }
.btn::before { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: right; transition: transform var(--duration-expand) var(--ease-smooth); z-index: 0; }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: scale(0.98); }

/* Primaire terracotta → or au hover */
.btn-primary { background: var(--c-primary); color: var(--cream-text); }
.btn-primary::before { background: var(--c-primary-deep); }
.btn-primary:hover { color: var(--cream-text); }

/* Or → terracotta au hover */
.btn-gold { background: var(--gold); color: var(--dark); }
.btn-gold::before { background: var(--terracotta); }
.btn-gold:hover { color: var(--cream-text); }

/* Outline (sur fond clair) */
.btn-outline { background: transparent; color: var(--c-primary); border: 1.5px solid var(--c-primary); }
.btn-outline::before { background: var(--c-primary); }
.btn-outline:hover { color: var(--cream-text); }

/* Crème (sur aplat coloré) */
.btn-cream { background: var(--cream); color: var(--c-primary); }
.btn-cream::before { background: var(--dark); }
.btn-cream:hover { color: var(--cream); }

/* Outline clair (sur aplat coloré) */
.btn-outline-light { background: transparent; color: var(--cream); border: 1.5px solid rgba(252,244,232,0.6); }
.btn-outline-light::before { background: var(--cream); }
.btn-outline-light:hover { color: var(--c-primary); }

.btn-sm { padding: 11px 26px; font-size: 14px; }
.btn-group { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- 7. HERO (clair) ---------- */
.hero { position: relative; background: var(--cream); overflow: hidden; padding-top: calc(var(--header-h) + clamp(40px, 7vw, 80px)); padding-bottom: clamp(60px, 8vw, 110px); }
.hero-grid { display: grid; gap: clamp(36px, 5vw, 74px); align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero-grid.media-left { grid-template-columns: 0.85fr 1.05fr; }  /* photo à gauche, texte à droite */
}
.hero-title { color: var(--terracotta); }
.hero-title .accent {
  color: var(--terracotta-deep);
  background: var(--sand);
  border-radius: 8px; padding: 0 0.18em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero-subtitle { font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; letter-spacing: 0.04em; color: var(--gold-deep); margin-top: 22px; }
.hero-intro { color: var(--text-soft); margin-top: 22px; max-width: 50ch; }
.hero .btn-group { margin-top: 36px; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: var(--c-primary); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75;
}
.scroll-cue svg { width: 20px; height: 20px; }

.page-hero { padding-top: calc(var(--header-h) + clamp(56px, 9vw, 100px)); padding-bottom: clamp(40px, 6vw, 80px); background: var(--cream); }

/* ---------- 7bis. HERO ÉDITORIAL — photo en arche + texte + bouton ---------- */
.intro {
  position: relative;
  background: var(--hero-beige);                  /* fond beige PLEINE LARGEUR */
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 100px));   /* plus d'air sous le menu */
  padding-bottom: clamp(30px, 4vw, 52px);
  overflow: visible;
  z-index: 2;
}
.intro-band { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }  /* plus de carte */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 880px) {
  .intro-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}

/* colonne photo : arche qui déborde clairement en bas, sur la section blanche */
.intro-media {
  position: relative; z-index: 2;
  justify-self: center;
  /* En 1 colonne (image au-dessus du titre), on plafonne la photo par la HAUTEUR d'écran
     (46vh) tout en gardant ses proportions : le titre reste visible quelle que soit la fenêtre.
     En 2 colonnes (≥880px), la taille pleine 460px est rétablie (le titre est à côté). */
  width: 100%; max-width: min(360px, 46vh);
  margin-inline: auto;
}
@media (min-width: 880px) {
  .intro-media {
    align-self: start;
    max-width: 460px;                               /* taille pleine rétablie en 2 colonnes */
    margin-bottom: clamp(-80px, -5.5vw, -58px);     /* déborde d'environ 1 cm seulement */
  }
}
/* Arche dorée derrière la photo héro, dépasse en bas à droite */
.intro-media::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  background: var(--gold);
  opacity: 0.52;
  transform: translate(12px, 12px);
  z-index: 1;
  pointer-events: none;
}
.intro-photo {
  position: relative; z-index: 2;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  box-shadow: 0 26px 56px rgba(46, 32, 22, 0.22);
}
.intro-photo img { transition: transform 0.8s var(--ease-smooth); }
.intro-media:hover .intro-photo img { transform: scale(1.04); }

/* colonne texte : alignée en haut avec la photo */
.intro-text { align-self: start; }
@media (min-width: 880px) { .intro-text { padding-top: clamp(16px, 3vw, 40px); } }
.intro-title {
  font-family: var(--font-display);
  color: var(--ink);                             /* titre en brun chaud adouci */
  font-size: clamp(31px, 3.7vw, 47px);
  line-height: 1.14;
  letter-spacing: 0.02em;
}
.intro-title .u {                                /* « rend unique » : terracotta + surligneur doux animé */
  color: var(--terracotta);
  white-space: nowrap;
  background-image: linear-gradient(rgba(210, 165, 86, 0.40), rgba(210, 165, 86, 0.40));
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 0% 40%;                        /* bande surligneur ~40% de la hauteur */
  border-radius: 3px;
  transition: background-size 0.85s var(--ease-smooth) 0.4s;
}
.intro-text.visible .intro-title .u { background-size: 100% 40%; }
.intro-lead {
  margin-top: clamp(16px, 2vw, 24px);
  color: var(--text-soft);
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.72;
  max-width: 46ch;
}
.intro-cta { margin-top: clamp(24px, 3vw, 34px); }

/* ---------- 7quater. QUI SUIS-JE (fond beige, photo arche + texte) ---------- */
.about { background: var(--hero-beige); padding-block: clamp(84px, 12vw, 150px); overflow: hidden; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(44px, 6vw, 72px); align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 0.85fr 1.15fr; } }

.about-text-col { position: relative; z-index: 1; }
.about-eyebrow { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 16px; }
.about-title { font-family: var(--font-display); color: var(--ink); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; letter-spacing: 0.02em; }
.about-title .u-light {
  color: var(--terracotta);
  background-image: linear-gradient(rgba(210,165,86,0.40), rgba(210,165,86,0.40));
  background-repeat: no-repeat; background-position: 0 86%; background-size: 0% 40%;
  border-radius: 3px; transition: background-size 0.85s var(--ease-smooth) 0.4s;
}
.about-text-col.visible .about-title .u-light { background-size: 100% 40%; }
.about-text-col .about-text { color: var(--text-soft); margin-top: 18px; font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.72; max-width: 52ch; }
.about-credentials { font-style: italic; font-size: clamp(14px, 1vw, 15px) !important; color: var(--text-soft); opacity: 0.9; }
.about-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(24px, 3vw, 32px);
  font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta);
  transition: gap var(--duration-micro) var(--ease-smooth), color var(--duration-micro) ease;
}
.about-link span { transition: transform var(--duration-micro) var(--ease-smooth); }
.about-link:hover { color: var(--terracotta-deep); gap: 13px; }
.about-link:hover span { transform: translateX(4px); }

/* ---------- 7quinquies. TÉMOIGNAGES (carte + photo personne) ---------- */
.reviews { gap: clamp(20px, 2.6vw, 30px); }
.review {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius-card); padding: clamp(26px, 3vw, 36px);
  box-shadow: var(--shadow-soft); border: 1.5px solid transparent;
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.3s ease, border-color 0.3s ease;
}
.review:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--gold); }
.review-stars { color: var(--gold); letter-spacing: 0.18em; font-size: 15px; margin-bottom: 14px; }
.review-quote { font-family: var(--font-sans); font-style: italic; font-weight: 300; font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.6; color: var(--dark); flex-grow: 1; }
.review-person { display: flex; align-items: center; gap: 13px; margin-top: 24px; }
.review-avatar {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--av, var(--terracotta)); color: var(--cream-text);
  font-family: var(--font-display); font-size: 20px; line-height: 1;
}
.review-meta { display: flex; flex-direction: column; }
.review-name { font-weight: 700; font-size: 14.5px; color: var(--dark); }
.review-role { font-size: 13px; color: var(--text-soft); letter-spacing: 0.03em; }

/* carrousel témoignages (avis qui défilent + bouton Google) */
.testi-stars { color: var(--gold); letter-spacing: 0.2em; font-size: 16px; margin-bottom: 4px; }
.testi-person { display: inline-flex; align-items: center; gap: 13px; margin-top: 24px; text-align: left; }
.testi-person .testi-author { margin-top: 0; }
.testi-more { text-align: center; margin-top: clamp(26px, 3.5vw, 38px); }

/* section avis : fond blanc crème + emblème + soleils à la place des étoiles */
#temoignages { background: var(--snow); }
.section-emblem { display: block; width: clamp(34px, 4.4vw, 48px); height: auto; margin: 0 auto 18px; opacity: 0.85; }
.testi-suns { display: flex; justify-content: center; gap: 6px; margin-top: 26px; margin-bottom: 14px; }
.testi-suns img { width: 20px; height: auto; }
/* avis : contenu centré verticalement (les avis courts ne collent plus en haut) */
.testi-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* photo en arche */
.about-media { position: relative; }
.about-photo {
  position: relative; z-index: 2;
  aspect-ratio: 4 / 5; max-width: 360px; margin-inline: auto;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  overflow: hidden; box-shadow: 0 26px 56px rgba(46, 32, 22, 0.20);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 0.8s var(--ease-smooth); }
.about-photo:hover img { transform: scale(1.04); }
/* « Qui je suis » (accueil) : photo un peu zoomée dans l'arche pour mieux voir Margaux */
#qui .about-photo img { transform: scale(1.2); object-position: center 30%; }
#qui .about-photo:hover img { transform: scale(1.24); }
/* Soleil de la charte derrière la photo. Trois points de vigilance :
   1. il est calé sur la PHOTO (centrée, max 360px) et non sur la colonne, sinon il s'en détache
      dès que la colonne s'élargit (fenêtre réduite / affichage empilé) ;
   2. la photo est une arche : le coin haut-gauche de sa boîte est vide, donc le soleil a son
      centre posé sur la courbe, à l'épaule, là où l'image le recouvre vraiment ;
   3. l'ancrage se fait par le CENTRE (translate -50%) : le soleil changeant de taille selon la
      fenêtre, un ancrage par le coin l'éloignerait de la courbe en petit format.
   Pas de rotation : le picto n'est pas symétrique, il semblerait se déformer. */
.about-sun {
  position: absolute; z-index: 1; pointer-events: none;
  /* Taille calée sur la PHOTO (~36% de sa largeur), pas sur la fenêtre : la photo étant plafonnée
     à 360px, une taille en vw ferait rétrécir le soleil pendant que la photo reste grande.
     La photo fait min(360px, largeur du bloc), donc min(128px, 35.5%) suit exactement ces deux cas. */
  width: min(128px, 35.5%); height: auto; aspect-ratio: 1 / 1;
  left: max(42px, calc(50% - 138px)); top: 68px; right: auto;
  transform: translate(-50%, -50%); transform-origin: center;
}
/* photo à droite : soleil sur l'épaule droite de l'arche */
.about--reverse .about-sun {
  left: auto; right: max(42px, calc(50% - 138px));
  transform: translate(50%, -50%);
}
/* Section « Ce qui m'anime » (a-propos) : l'arche est haute, le dôme se resserre en
   haut — on descend et on rentre le soleil pour qu'il se niche sur l'épaule du dôme
   (croissant) au lieu de flotter dans le coin vide. */
#anime .about-sun { right: max(72px, calc(50% - 108px)); top: 99px; }

/* ---------- Fenêtre réduite / tablette (641–899px) : arches plus petites, alignées à gauche ---------- */
@media (min-width: 641px) and (max-width: 899px) {
  /* Photo en arche : plafonnée par la HAUTEUR d'écran (44vh) donc jamais énorme,
     et alignée à GAUCHE avec le texte (au lieu d'être centrée). */
  .about-media { justify-self: start; }
  .about-photo { max-width: min(300px, 44vh); margin-inline: 0; }

  /* Soleil ancré sur la LARGEUR de la photo (W = min(300px,44vh)) → position exacte quelle que
     soit la fenêtre. Épaule gauche par défaut ; épaule droite pour les blocs inversés (#anime). */
  .about-sun {
    width: calc(min(300px, 44vh) * 0.29); height: calc(min(300px, 44vh) * 0.29);
    left: calc(min(300px, 44vh) * 0.14); right: auto;
    top: calc(min(300px, 44vh) * 0.375);
    transform: translate(-50%, -50%);
  }
  .about--reverse .about-sun,
  #anime .about-sun {
    left: calc(min(300px, 44vh) * 0.86); right: auto;
    top: calc(min(300px, 44vh) * 0.375);
    transform: translate(-50%, -50%);
  }
}

/* ---------- 7ter. CITATION SUR MONTAGNE ---------- */
.quote-mountain {
  position: relative; isolation: isolate; text-align: center;
  padding: clamp(150px, 21vw, 300px) clamp(28px, 6vw, 80px);   /* image plus grande */
  color: var(--cream-text);
  background: url('../assets/images/montagne-sol.jpg') center 42% / 106% no-repeat;
  transition: background-size 1s var(--ease-smooth);
}
.quote-mountain:hover { background-size: 118%; }                /* la photo zoome au survol */
/* voile terracotta : sombre au repos, plus clair au survol (la photo se révèle) */
.quote-mountain::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(158,94,51,0.66), rgba(88,44,24,0.76));
  transition: opacity 0.7s var(--ease-smooth);
}
.quote-mountain:hover::before { opacity: 0.52; }               /* s'éclaircit quand la souris arrive */
.quote-sun { margin-bottom: clamp(18px, 2.6vw, 30px); }
.quote-sun img {
  width: clamp(36px, 4.2vw, 52px); height: auto; margin-inline: auto;
  filter: brightness(0) invert(1) sepia(0.22) saturate(1.6) brightness(1.04);  /* soleil crème */
  animation: spinSlow 42s linear infinite; transform-origin: center;
}
.quote-mountain .quote-text {
  font-family: var(--font-display); color: var(--cream-text);
  font-size: clamp(23px, 3.1vw, 40px); line-height: 1.32;
  max-width: none; margin-inline: auto;
  text-shadow: 0 2px 18px rgba(46, 24, 12, 0.45);   /* lisible même quand le voile s'éclaircit */
  position: relative;
}
.quote-mountain .container { position: relative; z-index: 1; }
.quote-mountain .quote-text .line { display: block; }   /* chaque phrase sur sa ligne */
.quote-mountain .quote-text .accent { color: var(--gold); background: none; padding: 0; border-radius: 0; }

/* ---------- 8. PHOTOS ---------- */
.photo-arch { border-radius: var(--radius-arch); overflow: hidden; transition: filter 0.3s ease; }
.photo-cathedral { border-radius: var(--radius-cathedral); overflow: hidden; transition: filter 0.3s ease; }
.photo-circle { border-radius: 50%; overflow: hidden; aspect-ratio: 1; }
.photo-arch img, .photo-cathedral img, .photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.photo-arch:hover, .photo-cathedral:hover { filter: saturate(1.06); }
.photo-frame { position: relative; }

/* Photo + forme colorée décalée derrière */
.photo-stack { position: relative; }
.photo-stack .blob { width: 100%; height: 100%; top: 0; left: 0; }
.photo-stack.offset-gold .blob { background: var(--gold); transform: translate(22px, 22px); border-radius: var(--radius-cathedral); }
.photo-stack.offset-terra .blob { background: var(--terracotta); transform: translate(-22px, 22px); border-radius: var(--radius-cathedral); }
.photo-stack > .photo-frame, .photo-stack > .photo-cathedral, .photo-stack > .photo-arch, .photo-stack > .photo-circle { position: relative; z-index: 1; }

/* ---------- 9. CARTES ---------- */
.card {
  position: relative; background: var(--white); border-radius: var(--radius-card); padding: 34px;
  border: 1.5px solid transparent; box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--c-primary); }

/* Carte offre */
.offer-card { display: flex; flex-direction: column; overflow: hidden; padding-top: 38px; }
.offer-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--accent, var(--gold)); }
.offer-card:hover { border-color: var(--accent, var(--c-primary)); }
.offer-name { font-family: var(--font-display); font-size: clamp(25px, 3vw, 32px); letter-spacing: 0.07em; color: var(--dark); }
.offer-sub { font-weight: 600; font-size: 15px; color: var(--accent, var(--gold)); margin-top: 4px; }
.offer-for { color: var(--text-soft); font-size: 15.5px; margin-top: 16px; flex-grow: 1; }
.offer-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-soft); text-transform: uppercase; }
.offer-meta span { display: inline-flex; align-items: center; gap: 6px; }
.offer-meta span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent, var(--gold)); }
.offer-card .btn { margin-top: 26px; align-self: flex-start; }

.accent-flow      { --accent: #C9982F; }  /* or */
.accent-reveal    { --accent: #BA7741; }  /* terracotta */
.accent-afterwork { --accent: #3C513F; }  /* vert / retraite */
.accent-synergy   { --accent: #2F5360; }  /* bleu pétrole / entreprise */
.accent-entreprise{ --accent: #2F5360; }

/* Grilles */
.grid { display: grid; gap: clamp(20px, 3vw, 30px); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4,1fr); } }

/* Section accompagnements : fond blanc crème très clair, sous le hero */
#accompagnements { background: var(--snow); position: relative; z-index: 1; padding-top: clamp(78px, 9vw, 124px); }

/* Service : photo arquée cliquable */
.service-photo { display: block; }
.service .photo-cathedral { transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s ease, filter 0.3s ease; box-shadow: var(--shadow-soft); }
.service .photo-cathedral img { transition: transform 0.7s var(--ease-smooth); }
.service-photo:hover .photo-cathedral { transform: translateY(-8px); box-shadow: var(--shadow-card); filter: saturate(1.05); }
.service-photo:hover .photo-cathedral img { transform: scale(1.06); }
.services { gap: clamp(20px, 2.6vw, 38px); }

/* Espacement haut des pages intérieures (sous le header fixe) */
.page-top { padding-top: calc(var(--header-h) + clamp(36px, 6vw, 70px)); }

/* Cartes du hub accompagnements */
.offer-grid { gap: clamp(24px, 3vw, 40px); }
.offer-tile {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); border: 1.5px solid transparent;
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.3s ease, border-color 0.3s ease;
}
.offer-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--accent, var(--terracotta)); }
.offer-tile .service-photo { display: block; }
.offer-tile .photo-cathedral { border-radius: 0; aspect-ratio: 16/10; }
.offer-tile .photo-cathedral img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-smooth); }
.offer-tile:hover .photo-cathedral img { transform: scale(1.04); }
.offer-tile-body { padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; flex: 1; border-top: 4px solid var(--accent, var(--terracotta)); }
.offer-tile-name { font-family: var(--font-sans); font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, var(--terracotta)); }
.offer-tile-sub { font-weight: 700; font-size: 16px; color: var(--dark); margin-top: 6px; }
.offer-tile-body > p { color: var(--text-soft); font-size: 15px; margin-top: 12px; }
.offer-tile-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: var(--text-soft); text-transform: uppercase; }
.offer-tile-meta span { display: inline-flex; align-items: center; gap: 7px; }
.offer-tile-meta span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--terracotta)); }
.offer-tile .link-circle { margin-top: auto; color: var(--accent, var(--terracotta)); }

/* Bénéfice */
.benefit { background: var(--white); border-radius: var(--radius-card); padding: 32px; box-shadow: var(--shadow-soft); border: 1.5px solid transparent; transition: transform 0.3s var(--ease-smooth), border-color 0.3s ease, box-shadow 0.3s ease; }
.benefit:hover { transform: translateY(-5px); border-color: var(--c-primary); box-shadow: var(--shadow-card); }
.benefit-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--c-tint); color: var(--c-primary); margin-bottom: 20px; }
.benefit-icon svg { width: 26px; height: 26px; }
.benefit h3 { color: var(--dark); margin-bottom: 8px; }
.benefit p { color: var(--text-soft); font-size: 15.5px; }

/* Service arché (façon Zoé) */
.service { text-align: center; }
.service .photo-cathedral { aspect-ratio: 3/4; margin-bottom: 22px; }
.service h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px,2.6vw,32px); letter-spacing: 0.03em; text-transform: none; color: var(--accent, var(--terracotta)); }
.service .service-meta { font-family: var(--font-sans); margin-top: 7px; }
.service .service-type { display: block; font-weight: 600; font-size: 14px; color: var(--dark); }
.service .service-audience { display: block; font-weight: 500; font-size: 13px; color: var(--text-soft); margin-top: 3px; }
.service p { color: var(--text-soft); font-size: 14.5px; margin: 11px auto 18px; max-width: 30ch; }
.service .link-circle { color: var(--accent, var(--terracotta)); }

/* Pastille flèche dans une ellipse (couleur = accent de la carte) */
.arrow-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 30px; border-radius: var(--radius-pill);
  border: 1.6px solid var(--accent, var(--terracotta));
  color: var(--accent, var(--terracotta));
  transition: background var(--duration-micro) ease, color var(--duration-micro) ease;
}
.arrow-pill svg { width: 30px; height: 14px; }
.arrow-pill:hover { background: var(--accent, var(--terracotta)); color: var(--cream); }

/* Étape numérotée */
.step .step-num { font-family: var(--font-display); font-size: 46px; color: var(--c-primary); line-height: 1; }
.step h3 { color: var(--dark); margin: 14px 0 8px; }
.step p { color: var(--text-soft); font-size: 15.5px; }

/* Liste cochée */
.check-list { display: grid; gap: 14px; }
.check-list li { position: relative; padding-left: 34px; color: var(--text-soft); }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background-color: var(--c-tint); border: 1.5px solid var(--c-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232E2016' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.bg-terracotta .check-list li, .bg-accent .check-list li { color: var(--cream-text-soft); }
.bg-terracotta .check-list li::before, .bg-accent .check-list li::before {
  border-color: var(--cream); background-color: rgba(252,244,232,0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FCF4E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- 10. CITATION (moderne, épurée) ---------- */
.quote-block {
  position: relative; background: var(--cream-2); color: var(--dark);
  padding: clamp(84px, 12vw, 150px) clamp(28px, 6vw, 80px);
  text-align: center; overflow: hidden; isolation: isolate;
}
/* symbole de marque en filigrane, très discret */
.quote-block::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(280px, 40vw, 520px); aspect-ratio: 1;
  background: url('../assets/brand/symbol-terracotta.png') center / contain no-repeat;
  opacity: 0.05; z-index: -1; pointer-events: none;
}
.quote-text {
  position: relative; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 4vw, 50px); line-height: 1.22; max-width: 16ch; margin-inline: auto; color: var(--terracotta);
}
.quote-text .accent { color: var(--terracotta-deep); background: var(--sand); border-radius: 8px; padding: 0 0.16em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.quote-author {
  margin-top: 26px; font-weight: 600; font-size: 12.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--terracotta-deep);
}

/* ---------- 11. BADGES ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; background: var(--white); color: var(--dark);
  border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 10px 22px; font-size: 13.5px; font-weight: 600;
}
.badge::before { content: '✓'; color: var(--c-primary); font-weight: 800; }

/* ---------- 12. TIMELINE ---------- */
.timeline { position: relative; max-width: 760px; margin-inline: auto; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--gold), var(--terracotta)); }
.timeline-item { position: relative; padding-bottom: 44px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: -40px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--terracotta); border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--terracotta); }
.timeline-year { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 6px; }
.timeline-text { font-weight: 500; font-size: clamp(17px, 2vw, 20px); color: var(--dark); line-height: 1.45; }

/* ---------- 13. ACCORDÉON ---------- */
.faq-group { max-width: 820px; margin-inline: auto; }
.faq-theme { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-primary); margin: 44px 0 14px; }
.faq-theme:first-child { margin-top: 0; }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; text-align: left; padding: 24px 0; font-weight: 600; font-size: clamp(16px,2vw,19px); color: var(--dark); transition: color var(--duration-micro) ease; }
.accordion-trigger:hover { color: var(--c-primary); }
.accordion-icon { position: relative; flex-shrink: 0; width: 22px; height: 22px; transition: transform var(--duration-expand) var(--ease-smooth); }
.accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--c-primary); transform: translate(-50%,-50%); }
.accordion-icon::before { width: 16px; height: 2px; }
.accordion-icon::after { width: 2px; height: 16px; }
.accordion-item.open .accordion-icon { transform: rotate(45deg); }
.accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-expand) var(--ease-smooth); }
.accordion-item.open .accordion-content { grid-template-rows: 1fr; }
.accordion-inner { overflow: hidden; }
.accordion-inner p { padding-bottom: 26px; color: var(--text-soft); max-width: 64ch; }

/* ---------- 14. TÉMOIGNAGES ---------- */
.testimonials { max-width: 760px; margin-inline: auto; }
.testi-card {
  position: relative; background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); padding: clamp(40px, 5vw, 68px) clamp(30px, 5vw, 64px) clamp(34px, 4vw, 46px);
  text-align: center;
}
.testi-card::before {
  content: '\201C'; position: absolute; top: clamp(2px, 1.4vw, 14px); left: 50%; transform: translateX(-50%);
  font-family: Georgia, serif; font-size: clamp(70px, 9vw, 110px); line-height: 1; color: var(--terracotta); opacity: 0.16;
}
.testi-track { display: grid; }
.testi-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth), visibility 0.5s; }
.testi-slide.active { opacity: 1; visibility: visible; transform: translateY(0); }
.testi-quote { font-family: var(--font-sans); font-style: italic; font-weight: 300; font-size: clamp(18px, 2.3vw, 24px); line-height: 1.55; color: var(--dark); margin-top: 14px; }
.testi-author { margin-top: 24px; font-weight: 700; font-size: 15px; color: var(--terracotta); }
.testi-author small { display: block; margin-top: 4px; font-weight: 400; font-size: 13px; color: var(--text-soft); letter-spacing: 0.04em; }
.testi-dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.testi-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background var(--duration-micro) ease, transform var(--duration-micro) ease; }
.testi-dot.active { background: var(--terracotta); transform: scale(1.3); }

/* ---------- 15. CTA ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { margin: 18px auto 34px; }

/* CTA final sur photo de montagne */
.cta-soft {
  position: relative; text-align: center; overflow: hidden; isolation: isolate;
  padding-top: clamp(110px, 15vw, 190px); padding-bottom: clamp(110px, 15vw, 190px);
  background: url('../assets/images/montagne-cta2.jpg') center 55% / cover no-repeat;
  color: var(--cream-text);
}
.cta-soft::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(88,44,24,0.60), rgba(40,22,12,0.72));
}
.cta-soft h2 { max-width: 20ch; margin-inline: auto; color: var(--cream-text); text-shadow: 0 2px 18px rgba(40,22,12,0.45); }
.cta-soft p { margin: 18px auto 32px; max-width: 48ch; color: var(--cream-text-soft); }
.cta-soft .ornament::before, .cta-soft .ornament::after { background: var(--cream-text); opacity: 0.55; }
.cta-soft .ornament img { filter: brightness(0) invert(1) sepia(0.3) saturate(2) brightness(1.05); }

/* ---------- 16. FORMULAIRE ---------- */
.form { max-width: 640px; }
.form-row { display: grid; gap: 22px; }
@media (min-width: 600px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
.field .req { color: var(--error); }
.field input, .field select, .field textarea { width: 100%; background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 16px; color: var(--dark); transition: border-color var(--duration-micro) ease, box-shadow var(--duration-micro) ease; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-tint); }
.field.error input, .field.error select, .field.error textarea { border-color: var(--error); }
.field .error-msg { display: none; margin-top: 6px; font-size: 13px; color: var(--error); }
.field.error .error-msg { display: block; }
.field-check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
.field-check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--c-primary); flex-shrink: 0; }
.field-check label { margin: 0; font-weight: 400; font-size: 14px; color: var(--text-soft); line-height: 1.5; }
.field-check a { color: var(--c-primary); text-decoration: underline; }
.form-success { display: none; align-items: center; gap: 12px; background: rgba(122,145,117,0.14); border: 1.5px solid var(--green-2); border-radius: 12px; padding: 18px 22px; color: #4f6149; font-weight: 600; }
.form-success.show { display: flex; }
.form-success::before { content: '✓'; display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--green-2); color: var(--white); font-size: 14px; }

.contact-info { display: grid; gap: 22px; }
.contact-info li { display: flex; align-items: flex-start; gap: 14px; }
.contact-info .ci-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--c-tint); color: var(--c-primary); }
.contact-info .ci-icon svg { width: 20px; height: 20px; }
.contact-info .ci-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.contact-info .ci-value { font-size: 17px; color: var(--dark); font-weight: 600; }
.calendly-embed { background: var(--white); border-radius: var(--radius-card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); min-height: 580px; overflow: hidden; }

/* ---------- 17. FOOTER (sable clair, texte brun) ---------- */
.site-footer { background: var(--hero-beige); color: var(--text); padding-top: clamp(60px, 8vw, 90px); padding-bottom: 30px; position: relative; }
.footer-grid { display: grid; gap: 44px; padding-bottom: 44px; border-bottom: 1px solid rgba(46,32,22,0.14); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand .nav-logo { font-size: 30px; margin-bottom: 16px; }
.footer-brand p { font-size: 15px; max-width: 38ch; color: var(--text-soft); }
.footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { font-size: 15px; color: var(--text); transition: color var(--duration-micro) ease; }
.footer-col a:hover { color: var(--terracotta); }
.footer-social { display: flex; gap: 14px; margin-top: 22px; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(46,32,22,0.2); color: var(--dark); transition: background var(--duration-micro) ease, border-color var(--duration-micro) ease, color var(--duration-micro) ease; }
.footer-social a:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 13px; color: var(--text-soft); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom a:hover { color: var(--terracotta); }

/* ---------- 17b. ÉLÉMENTS DE MARQUE ---------- */
/* Logo image */
.logo-img { height: 36px; width: auto; display: block; }
.footer-brand .logo-img { height: 46px; margin-bottom: 16px; }

/* Bandeau défilant (mantra + soleil) — signature SOL */
.marquee { background: var(--terracotta); overflow: hidden; padding: 0; user-select: none; }
.marquee.on-gold { background: var(--gold); }
.marquee-viewport { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-viewport { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-item {
  display: inline-flex; align-items: center; gap: clamp(26px, 4vw, 52px);
  padding: 15px clamp(13px, 2vw, 26px);
  font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: 0.05em; color: var(--cream-text); white-space: nowrap;
}
.marquee.on-gold .marquee-item { color: var(--dark); }
.marquee-item img { height: clamp(20px, 2.6vw, 28px); width: auto; }

/* Badge soleil "sticker" (derrière/à côté des photos) */
.sun-badge { position: absolute; width: clamp(80px, 12vw, 150px); height: auto; z-index: 3; pointer-events: none; }
.sun-badge.behind { z-index: 0; }   /* soleil DERRIÈRE la photo, qui dépasse */
.sun-badge.spin { animation: spinSlow 30s linear infinite; transform-origin: center; }

/* Label crème arrondi posé sur une photo (signature brochure SOL) */
.photo-label {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cream); color: var(--terracotta);
  border-radius: var(--radius-pill); padding: 10px 20px;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display); font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.02em;
}
.photo-label img { width: 20px; height: auto; }

/* Picto flèche-cercle (brochure) */
.pic-arrow-circle { width: 40px; height: 40px; flex-shrink: 0; }
.link-circle { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--terracotta); transition: gap var(--duration-micro) var(--ease-smooth); }
.link-circle img { width: 34px; height: 34px; transition: transform var(--duration-micro) var(--ease-smooth); }
.link-circle:hover { gap: 16px; }
.link-circle:hover img { transform: translateX(3px); }

/* Doodle dessiné à la main (flèche courbe) */
.doodle { position: absolute; pointer-events: none; z-index: 1; opacity: 0.9; }
.doodle img { width: 100%; height: auto; }

/* Arche décorative de marque */
.deco-arch-img { position: absolute; pointer-events: none; z-index: 0; opacity: 0.5; }
.deco-arch-img img { width: 100%; height: auto; }

/* Symbole décoratif & arche en fond de section */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco img { width: 100%; height: auto; display: block; }
.has-deco { position: relative; isolation: isolate; }
.has-deco > .container { position: relative; z-index: 1; }

/* Surligneur (mot-clé) */
.mark { background: var(--sand); border-radius: 7px; padding: 0.02em 0.22em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mark-terra { background: rgba(186,119,65,0.22); border-radius: 7px; padding: 0.02em 0.22em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Trait de séparation orné (soleil centré) */
.ornament { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto; }
.ornament::before, .ornament::after { content: ''; height: 1.5px; width: 56px; background: var(--c-primary); opacity: 0.5; }
.ornament img { width: 26px; height: auto; }

/* ---------- 17bis. ÉLÉMENTS SIGNATURE BRAND ---------- */

/* Highlight ovale sur mot-clé (comme dans les présentations SOL) */
.pill-hl {
  display: inline;
  background: rgba(186, 119, 65, 0.14);
  border-radius: 100px;
  padding: 0.05em 0.5em;
  color: var(--terracotta);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Cadre lozenge / pilule autour d'un bloc de contenu */
.lozenge {
  border: 1.5px solid rgba(186, 119, 65, 0.72);
  border-radius: 22px;
  padding: clamp(12px, 1.8vw, 18px) clamp(14px, 2vw, 22px);
  background: transparent;
}

/* Liste avec petits soleils en bullet */
.sun-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sun-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.sun-list li::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  background: url('../assets/brand/sun-terracotta.png') center / contain no-repeat;
}

/* ---------- 18. UTILITAIRES ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 768px) { .hide-mobile { display: none !important; } }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--terracotta); color: var(--cream); padding: 10px 18px; border-radius: 8px; transition: top var(--duration-micro) ease; }
.skip-link:focus { top: 16px; }
.mt-0 { margin-top: 0; }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width: 640px) {
  :root { --section-pad: 72px; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-group .btn { width: 100%; }
  .hero .btn-group { flex-direction: column; }
}
@media (max-width: 900px) { .mega { min-width: 0; } }

/* ---------- 20. OPTIMISATIONS MOBILE ---------- */
@media (max-width: 640px) {
  /* Cartes « Mes accompagnements » : même arche portrait, réduite proportionnellement + plus d'air entre programmes */
  .services { gap: 46px; }
  .service .photo-cathedral { max-width: 260px; margin-inline: auto; margin-bottom: 18px; }

  /* Hero + arches À propos : réduites (proportions gardées), plafonnées par la hauteur. */
  .intro-media { max-width: min(300px, 46vh); }
  .about-photo { max-width: min(300px, 46vh); }

  /* Soleil : la photo est CENTRÉE sur mobile → on ancre le soleil par rapport au CENTRE de la
     photo (calc(50% ± 0.36·W), W = sa largeur). Jamais flottant dans la marge, quelle que soit
     la fenêtre. Épaule gauche par défaut ; épaule droite pour les blocs inversés (#anime). */
  .about-sun {
    width: calc(min(300px, 46vh) * 0.29); height: calc(min(300px, 46vh) * 0.29);
    left: calc(50% - min(300px, 46vh) * 0.36); right: auto;
    top: calc(min(300px, 46vh) * 0.375);   /* plus bas → croissant mieux niché, ne dépasse plus en haut */
    transform: translate(-50%, -50%);
  }
  .about--reverse .about-sun,
  #anime .about-sun {
    left: calc(50% + min(300px, 46vh) * 0.36); right: auto;
    transform: translate(-50%, -50%);   /* écrase le translate(50%) hérité du desktop */
  }

  /* Citation sur montagne : la photo doit COUVRIR toute la section (sinon bandes vides), padding réduit */
  .quote-mountain { background-size: cover; background-position: center 40%; padding-top: 76px; padding-bottom: 76px; }

  /* Témoignages : carte plus compacte, guillemet et texte à taille téléphone */
  .testi-card { padding: 30px 22px 26px; }
  .testi-card::before { font-size: 58px; top: 4px; }
  .testi-quote { font-size: 16px; line-height: 1.5; }
  .testi-author { margin-top: 18px; }
  .testi-dots { margin-top: 24px; }
}

/* ligne lieu + mots-clés dans le pied de page (discrète, SEO local) */
.footer-brand .footer-loc { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); opacity: 0.85; letter-spacing: 0.01em; }