/* =========================================================
   Bérénice Boutareaud — Harmonisation de l'être et du lieu
   Design system
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --cream:        #faf5ec;
  --cream-deep:   #f1e6d3;
  --sand:         #e4d3ba;
  --terracotta:   #ab5140;
  --terracotta-d: #8a3f31;
  --terracotta-l: #c97b5f;
  --gold:         #b08968;
  --charcoal:     #38302b;
  --charcoal-70:  rgba(56,48,43,.72);
  --charcoal-45:  rgba(56,48,43,.68);
  --line:         rgba(56,48,43,.14);
  --ink:          #4a2019;
  --sage:         #637268;
  --white:        #fffdfa;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;

  --container: 1280px;
  --radius: 2px;
  --ease: cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--cream);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  margin:0;
  color:var(--charcoal);
  letter-spacing:.01em;
}
p{ margin:0; }
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:32px;
}

/* ---------- utility ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:500;
}
.eyebrow::before{
  content:'';
  width:34px; height:1px;
  background:var(--terracotta);
  display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }
.eyebrow.center::after{
  content:'';
  width:34px; height:1px;
  background:var(--terracotta);
  display:inline-block;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 34px;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  border-radius:999px;
  border:1px solid var(--terracotta);
  color:var(--terracotta);
  background:transparent;
  cursor:pointer;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background:var(--terracotta); color:var(--white); transform:translateY(-2px); }
.btn.solid{ background:var(--terracotta); color:var(--white); }
.btn.solid:hover{ background:var(--terracotta-d); border-color:var(--terracotta-d); }
.btn.light{ border-color:rgba(255,253,250,.55); color:var(--white); }
.btn.light:hover{ background:var(--white); color:var(--terracotta); }
.btn svg{ width:14px; height:14px; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

.js .reveal{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in{ opacity:1; transform:translateY(0); }
.js .reveal.d1{ transition-delay:.09s; }
.js .reveal.d2{ transition-delay:.2s; }
.js .reveal.d3{ transition-delay:.31s; }
.js .reveal.d4{ transition-delay:.42s; }

.section{ padding:132px 0; position:relative; }
.section.tight{ padding:96px 0; }
/* Une citation de deux lignes n'a pas besoin des 132 px de respiration d'une
   section entière : elle se retrouvait perdue au milieu d'un bandeau presque
   vide. On resserre sans toucher à la taille du texte, qui fait le caractère
   de la page. */
.section.quote{ padding:50px 0; }
/* Le guillemet reste, dans son terracotta : c'est la signature de la page.
   Simplement plus discret, pour ne pas rallonger la bande. */
.section.quote .quote-block .mark-icon{ width:28px; height:28px; margin-bottom:14px; }
.section.quote .quote-block blockquote{
  font-size:clamp(22px,2.8vw,31px);
  line-height:1.34;
}
.section.cream-deep{ background:var(--cream-deep); }

.section-head{ max-width:680px; margin-bottom:64px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(32px,4.2vw,52px); margin-top:18px; }
.section-head p{ margin-top:20px; color:var(--charcoal-70); font-size:17px; }

/* ---------- media frames ---------- */
.arch{
  border-radius:220px 220px 8px 8px;
  overflow:hidden;
  position:relative;
}
.arch img{ width:100%; height:100%; object-fit:cover; }
.frame{ position:relative; overflow:hidden; border-radius:4px; }
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.frame:not(.px-host):hover img{ transform:scale(1.05); }
.frame.tall{ aspect-ratio:3/4; }
.frame.portrait{ aspect-ratio:4/5; }
.frame.wide{ aspect-ratio:16/10; }


/* editorial visual shown whole (client artwork with baked-in text) */
.plate{
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 34px 70px -34px rgba(74,32,25,.35);
  background:var(--white);
}
.plate img{ width:100%; height:auto; display:block; }
.plate.narrow{ max-width:560px; margin-inline:auto; }
.plate.wide{ max-width:1080px; margin-inline:auto; }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:26px 0;
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:28px; }
.site-header.scrolled{
  background:rgba(250,245,236,.92);
  backdrop-filter:blur(10px);
  padding:16px 0;
  box-shadow:0 8px 30px rgba(74,32,25,.06);
}
.logo{ display:flex; align-items:center; gap:14px; }
.logo img{ width:42px; height:52px; object-fit:contain; flex-shrink:0; transition:height .5s var(--ease); }
.site-header.scrolled .logo img{ height:44px; }
.logo .word{ line-height:1.2; }
.logo{ flex-shrink:0; }
.logo .word b{
  display:block;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:500;
  letter-spacing:.03em;
  white-space:nowrap;
}
.logo .word span{
  display:block;
  font-size:8.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--terracotta);
  margin-top:2px;
}

.main-nav{ display:flex; align-items:center; }
.main-nav ul{ display:flex; gap:26px; }
.main-nav a{
  font-size:11.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
  position:relative;
  padding-bottom:4px;
  white-space:nowrap;
}
.main-nav a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--terracotta);
  transition:width .4s var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color:var(--terracotta); }

/* header over a dark hero image */
body.nav-open .site-header{ background:transparent; box-shadow:none; }
body.nav-open.dark-header .site-header:not(.scrolled) .logo img{ filter:none; opacity:1; }
body.nav-open.dark-header .site-header:not(.scrolled) .logo .word b{ color:var(--charcoal); }
body.nav-open.dark-header .site-header:not(.scrolled) .logo .word span{ color:var(--terracotta); }
body.nav-open.dark-header .site-header:not(.scrolled) .burger{ border-color:var(--line); }
body.nav-open.dark-header .site-header:not(.scrolled) .burger span,
body.nav-open.dark-header .site-header:not(.scrolled) .burger span::before,
body.nav-open.dark-header .site-header:not(.scrolled) .burger span::after{ background:var(--charcoal); }
body.nav-open .burger.open span{ background:transparent; }

body.dark-header .site-header:not(.scrolled) .logo img{ filter:brightness(0) invert(1); opacity:.95; }
body.dark-header .site-header:not(.scrolled) .logo .word b{ color:var(--white); }
body.dark-header .site-header:not(.scrolled) .logo .word span{ color:rgba(255,253,250,.7); }
body.dark-header .site-header:not(.scrolled) .main-nav a{ color:rgba(255,253,250,.9); }
body.dark-header .site-header:not(.scrolled) .main-nav a::after{ background:var(--white); }
body.dark-header .site-header:not(.scrolled) .main-nav a.active{ color:var(--white); }
body.dark-header .site-header:not(.scrolled) .btn.solid{ background:transparent; border-color:rgba(255,253,250,.6); color:var(--white); }
body.dark-header .site-header:not(.scrolled) .btn.solid:hover{ background:var(--white); color:var(--terracotta); border-color:var(--white); }
body.dark-header .site-header:not(.scrolled) .burger{ border-color:rgba(255,253,250,.4); }
body.dark-header .site-header:not(.scrolled) .burger span,
body.dark-header .site-header:not(.scrolled) .burger span::before,
body.dark-header .site-header:not(.scrolled) .burger span::after{ background:var(--white); }

.header-cta{ display:flex; align-items:center; gap:20px; flex-shrink:0; }
.header-cta .btn{ padding:9px 20px; font-size:10.5px; letter-spacing:.13em; white-space:nowrap; }
.site-header.scrolled .header-cta .btn{ padding:8px 18px; }
.burger{
  display:none;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:''; display:block; position:relative;
  width:18px; height:1px; background:var(--charcoal);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.burger span::before{ position:absolute; top:-6px; left:0; }
.burger span::after{ position:absolute; top:6px; left:0; }
.burger.open span{ background:transparent; }
.burger.open span::before{ transform:rotate(45deg) translate(4px,4px); }
.burger.open span::after{ transform:rotate(-45deg) translate(4px,-4px); }

.mobile-nav{
  position:fixed; inset:0; z-index:999;
  background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.mobile-nav.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.mobile-nav a{ font-family:var(--font-display); font-size:30px; }

/* ---------- hero ---------- */
.hero{
  min-height:100vh;
  display:flex; align-items:flex-end;
  position:relative;
  padding-top:180px; padding-bottom:90px;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-image:url('../assets/img/home-hero-bg.jpg');
  background-size:cover; background-position:center;
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(74,32,25,.32) 0%, rgba(74,32,25,.06) 28%, rgba(74,32,25,.64) 72%, rgba(74,32,25,.88) 100%),
    linear-gradient(90deg, rgba(74,32,25,.56) 0%, rgba(74,32,25,.12) 55%, transparent 100%);
}
.hero .container{ position:relative; z-index:1; }
.hero-copy{ max-width:1020px; }
.hero-copy .eyebrow{ margin-bottom:26px; color:var(--white); }
.hero-copy .eyebrow::before, .hero-copy .eyebrow::after{ background:var(--white); }
.hero-copy h1{
  font-size:clamp(44px,6.4vw,88px);
  line-height:1.05;
  font-style:italic;
  font-weight:400;
  color:var(--white);
  text-shadow:0 2px 30px rgba(74,32,25,.35);
}
.hero-copy h1 em{ font-style:italic; }
.hero-copy .lede{
  margin-top:30px;
  font-size:19.5px;
  color:rgba(255,253,250,.9);
  max-width:560px;
}
.hero-actions{ display:flex; align-items:center; gap:22px; margin-top:46px; flex-wrap:wrap; }
.hero-scroll{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,253,250,.75);
}
.hero-scroll svg{ animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* hero variant with side portrait */
.hero-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.hero-split .frame{ box-shadow:0 40px 80px -34px rgba(74,32,25,.5); }


/* ---------- methods / cards ---------- */
.methods-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:36px;
}
.method-card{
  background:var(--white);
  border:1px solid var(--line);
  padding:52px 44px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  position:relative;
}
.method-card:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -30px rgba(74,32,25,.22); border-color:transparent; }
.method-card .idx{
  font-family:var(--font-display); font-style:italic; color:var(--terracotta-l); font-size:15px; margin-bottom:26px; display:block;
}
.method-card .icon{ width:56px; height:56px; margin-bottom:28px; color:var(--terracotta); object-fit:contain; }
.method-card.with-photo{ padding:0; overflow:hidden; }
.method-card.with-photo .card-media{ aspect-ratio:6/5; overflow:hidden; }
.method-card.with-photo .card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.method-card.with-photo:hover .card-media img{ transform:scale(1.06); }
.method-card.with-photo .card-body{ padding:42px 40px 46px; }
.method-card h3{ font-size:27px; margin-bottom:16px; }
.method-card p{ color:var(--charcoal-70); font-size:15.5px; }
.method-card .go{
  margin-top:26px; display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta); font-weight:500;
}
.method-card .go svg{ width:13px; height:13px; transition:transform .4s var(--ease); }
.method-card:hover .go svg{ transform:translateX(5px); }

.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.pillar{
  padding:44px 34px;
  border-radius:4px;
  background:var(--white);
  border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pillar h3{ font-size:22px; margin-bottom:12px; }
.pillar p{ font-size:15px; color:var(--charcoal-70); }
.pillar .num{
  display:block; font-family:var(--font-display); font-style:italic;
  font-size:44px; color:var(--sand); line-height:1; margin-bottom:20px;
}

/* photo variant */
.pillar.photo{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.pillar.photo:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -30px rgba(74,32,25,.22); }
.pillar.photo .media{ aspect-ratio:4/3; overflow:hidden; }
.pillar.photo .media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.pillar.photo:hover .media img{ transform:scale(1.06); }
.pillar.photo .body{ padding:34px 30px 36px; flex:1; display:flex; flex-direction:column; }
.pillar.photo .body p{ flex:1; }
.pillar.photo .go{
  margin-top:22px; display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta); font-weight:500;
}
.pillar.photo .go svg{ width:13px; height:13px; transition:transform .4s var(--ease); }
.pillar.photo:hover .go svg{ transform:translateX(5px); }

/* ---------- split section ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
/* .split = texte à gauche, image à droite. .split.reverse = l'inverse.
   L'ordre est imposé ici pour ne pas dépendre de l'ordre des blocs dans le HTML. */
.split .split-copy{ order:0; }
.split .split-visual{ order:1; }
.split.reverse .split-copy{ order:1; }
.split.reverse .split-visual{ order:0; }
.split-copy .eyebrow{ margin-bottom:20px; }
.split-copy h2{ font-size:clamp(30px,3.6vw,44px); margin-bottom:22px; }
.split-copy p{ color:var(--charcoal-70); font-size:16.5px; margin-bottom:16px; }
.split-copy .btn{ margin-top:14px; }
.split-visual .arch{ aspect-ratio:4/5; }
.split-visual{ position:relative; }
.split-visual .frame{ box-shadow:0 40px 80px -38px rgba(74,32,25,.45); }
.split-visual .accent{
  position:absolute; bottom:-34px; right:-34px; width:190px; z-index:2;
  border-radius:4px; overflow:hidden;
  box-shadow:0 30px 60px -26px rgba(74,32,25,.45);
  border:6px solid var(--cream);
}
.split-visual .accent img{ width:100%; display:block; }

/* ---------- gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.gallery .frame{ aspect-ratio:3/4; }
.gallery .frame:nth-child(odd){ transform:translateY(22px); }


/* ---------- feature quote image ---------- */
.image-quote{
  position:relative; border-radius:6px; overflow:hidden;
  min-height:520px; display:flex; align-items:center;
}
.image-quote img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.image-quote::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(74,32,25,.76) 0%, rgba(74,32,25,.38) 55%, transparent 100%);
}
.image-quote .iq-inner{ position:relative; z-index:2; padding:70px; max-width:640px; }
.image-quote .iq-inner blockquote{
  font-family:var(--font-display); font-style:italic; font-size:clamp(25px,3.2vw,40px);
  line-height:1.45; color:var(--cream);
}
.image-quote .iq-inner cite{
  display:block; margin-top:26px; font-style:normal;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--terracotta-l);
}

/* ---------- quote ---------- */
.quote-block{ text-align:center; max-width:820px; margin-inline:auto; }
.quote-block .mark-icon{ width:38px; height:38px; color:var(--terracotta-l); margin-inline:auto; margin-bottom:30px; }
.quote-block blockquote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.2vw,38px); line-height:1.5; color:var(--charcoal);
}
.quote-block cite{ display:block; margin-top:26px; font-style:normal; font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--terracotta); }

/* ---------- timeline (a-propos) ---------- */
.story{ max-width:760px; margin-inline:auto; }
.story p{ font-size:17.5px; color:var(--charcoal-70); margin-bottom:26px; }
.story p.lead{ font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--charcoal); margin-bottom:34px; }
.story p.pull{
  font-family:var(--font-display); font-style:italic; font-size:24px; color:var(--terracotta);
  border-left:2px solid var(--terracotta); padding-left:26px; margin:44px 0;
}

/* ---------- steps (formations) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:step; }
.step{ position:relative; padding-top:20px; }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--font-display); font-style:italic; font-size:44px; color:var(--sand);
  display:block; margin-bottom:16px;
}
.step h4{ font-size:19px; margin-bottom:10px; }
.step p{ font-size:14.5px; color:var(--charcoal-70); }

.info-panel{
  background:var(--white); border:1px solid var(--line); border-radius:4px;
  padding:48px; display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center;
}
.info-panel .price{ text-align:center; padding-right:40px; border-right:1px solid var(--line); }
.info-panel .price .amount{ font-family:var(--font-display); font-size:56px; color:var(--terracotta); line-height:1; }
.info-panel .price .amount sup{ font-size:22px; vertical-align:top; }
.info-panel .price small{ display:block; margin-top:8px; font-size:11.5px; color:var(--charcoal-45); letter-spacing:.05em; }
.info-list{ display:flex; flex-direction:column; gap:14px; }
.info-list li{ display:flex; gap:14px; font-size:15px; color:var(--charcoal-70); }
.info-list li svg{ width:17px; height:17px; color:var(--terracotta); flex-shrink:0; margin-top:2px; }
.info-list li b{ color:var(--charcoal); font-weight:500; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--terracotta); color:var(--cream);
  border-radius:6px;
  padding:80px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(255,253,250,.16), transparent 58%);
}
.cta-band h2{ color:var(--cream); font-size:clamp(28px,3.4vw,40px); max-width:520px; position:relative; }
.cta-band .actions{ position:relative; display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; }
.contact-info-card{
  background:var(--white); border:1px solid var(--line); padding:46px;
}
.contact-info-card h3{ font-size:24px; margin-bottom:28px; }
.contact-row{ display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.contact-row:first-of-type{ border-top:none; }
.contact-row svg{ width:20px; height:20px; color:var(--terracotta); flex-shrink:0; margin-top:2px; }
.contact-row .lbl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--charcoal-45); margin-bottom:4px; }
.contact-row .val{ font-size:15.5px; }
.social-row{ display:flex; gap:12px; margin-top:30px; }
.social-row a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:all .4s var(--ease);
}
.social-row a:hover{ background:var(--terracotta); border-color:var(--terracotta); color:var(--white); }
.social-row svg{ width:17px; height:17px; }

.contact-form{ display:flex; flex-direction:column; gap:22px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--charcoal-45); }
.field input, .field textarea, .field select{
  border:none; border-bottom:1px solid var(--line);
  background:transparent; padding:12px 2px; font-family:var(--font-body); font-size:15.5px; color:var(--charcoal);
  transition:border-color .4s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--terracotta); }
.field textarea{ resize:vertical; min-height:120px; }


/* ---------- footer ---------- */
.site-footer{ background:var(--white); color:var(--charcoal); padding-top:96px; border-top:1px solid var(--line); }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:50px; padding-bottom:70px; border-bottom:1px solid var(--line); }
.footer-brand .logo .word b{ color:var(--charcoal); }
.footer-brand .logo .word span{ color:var(--terracotta); }
.footer-brand .logo img{ opacity:1; }
.footer-brand p{ margin-top:24px; color:var(--charcoal-70); font-size:14.5px; max-width:280px; }
.footer-col h4{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta); margin-bottom:24px; font-family:var(--font-body); font-weight:500; }
.footer-col ul{ display:flex; flex-direction:column; gap:14px; }
.footer-col a{ font-size:14.5px; color:var(--charcoal-70); transition:color .3s; }
.footer-col a:hover{ color:var(--terracotta); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:30px 0; gap:20px; flex-wrap:wrap; }
.footer-bottom p{ font-size:12.5px; color:var(--charcoal-45); }
.footer-bottom .legal{ display:flex; gap:26px; }
.footer-bottom .legal a{ font-size:12.5px; color:var(--charcoal-45); }
.footer-bottom .legal a:hover{ color:var(--terracotta); }

/* ---------- inner page hero ---------- */
.page-hero{
  padding:230px 0 110px;
  text-align:center;
  position:relative;
  background:var(--cream-deep);
  overflow:hidden;
  isolation:isolate;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.page-hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(74,32,25,.64) 0%, rgba(74,32,25,.52) 100%);
}
.page-hero.dark h1, .page-hero.dark .eyebrow{ color:var(--white); }
.page-hero.dark .eyebrow::before, .page-hero.dark .eyebrow::after{ background:var(--white); }
.page-hero.dark p.sub{ color:rgba(255,253,250,.85); }
.page-hero.dark .breadcrumb{ color:rgba(255,253,250,.6); }
.page-hero.dark .breadcrumb span{ color:var(--terracotta-l); }
.page-hero .eyebrow{ margin-bottom:22px; }
.page-hero h1{ font-size:clamp(38px,5.4vw,66px); font-style:italic; max-width:880px; margin-inline:auto; }
.page-hero p.sub{ margin-top:24px; max-width:640px; margin-inline:auto; color:var(--charcoal-70); font-size:17.5px; }
.breadcrumb{ display:flex; gap:10px; align-items:center; justify-content:center; margin-bottom:20px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-45); }
.breadcrumb span{ color:var(--terracotta); }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-split{ grid-template-columns:1fr; }
  .split, .split.reverse{ grid-template-columns:1fr; gap:52px; }
  /* en colonne unique, le texte passe toujours avant l'image */
  .split .split-copy, .split.reverse .split-copy{ order:0; }
  .split .split-visual, .split.reverse .split-visual{ order:1; }
  .split-visual{ max-width:480px; margin-inline:auto; width:100%; }
  .split-visual .accent{ display:none; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .cards-3{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery .frame:nth-child(odd){ transform:none; }
  .image-quote .iq-inner{ padding:48px 36px; }
  .image-quote::after{ background:linear-gradient(180deg, rgba(74,32,25,.42) 0%, rgba(74,32,25,.8) 100%); }
}
@media (max-width:1160px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:860px){
  .header-cta .btn.hide-mobile{ display:none; }
  .methods-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:50px; }
  .form-row{ grid-template-columns:1fr; }
  .info-panel{ grid-template-columns:1fr; text-align:center; }
  .info-panel .price{ border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:30px; }
  .info-list li{ text-align:left; }
}
@media (max-width:600px){
  .section{ padding:88px 0; }
  .cards-3{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .cta-band{ padding:56px 30px; flex-direction:column; align-items:flex-start; }
  .page-hero{ padding:170px 0 72px; }
  .logo .word span{ display:none; }
  .container{ padding-inline:22px; }

  .hero{ padding-top:150px; padding-bottom:72px; min-height:88vh; }
  .hero-copy h1{ font-size:34px; line-height:1.14; }
  .hero-copy h1 br{ display:none; }
  .hero-copy .lede{ font-size:16.5px; margin-top:22px; }
  .hero-actions{ margin-top:34px; gap:18px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .eyebrow{ font-size:11px; letter-spacing:.24em; }
  .page-hero h1{ font-size:32px; }
  .page-hero h1 br{ display:none; }
  .page-hero p.sub{ font-size:16px; }
  .section-head h2{ font-size:29px; }
  .section-head h2 br, .split-copy h2 br, .cta-band h2 br{ display:none; }
  .split-copy h2{ font-size:28px; }
  .quote-block blockquote{ font-size:22px; }
  .image-quote{ min-height:400px; }
  .image-quote .iq-inner{ padding:40px 26px; }
  .image-quote .iq-inner blockquote{ font-size:22px; }
  .method-card.with-photo .card-body{ padding:34px 26px 38px; }
  .info-panel{ padding:34px 24px; }
  .contact-info-card{ padding:34px 26px; }
  .story p{ font-size:16.5px; }
  .story p.lead{ font-size:22px; }
  .story p.pull{ font-size:20px; padding-left:20px; }
}

/* =========================================================
   MOTION SYSTEM
   ========================================================= */

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:1200; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--terracotta), var(--gold));
  transform:scaleX(0); transform-origin:0 50%;
}

/* ---------- page transition veil ---------- */
.page-veil{
  position:fixed; inset:0; z-index:1400;
  background:var(--cream);
  pointer-events:none;
  transform-origin:50% 0;
  transform:scaleY(1);
  transition:transform 1s var(--ease);
}
.js .page-ready .page-veil,
body.page-ready .page-veil{ transform:scaleY(0); }
body.page-leaving .page-veil{
  transform-origin:50% 100%;
  transform:scaleY(1);
  transition:transform .5s cubic-bezier(.7,0,.3,1);
}
.reduced-motion .page-veil{ display:none; }

/* ---------- word-by-word heading reveal ---------- */
.js .w{
  display:inline-block;
  overflow:hidden;
  padding:.16em 0 .2em;
  margin:-.16em 0 -.2em;
  vertical-align:baseline;
}
.js .wi{
  display:inline-block;
  transform:translateY(115%);
  transition:transform 1.05s var(--ease);
  will-change:transform;
}
.js .in .wi,
.js .in.wi,
.js .page-hero .in .wi{ transform:translateY(0); }

/* headings that are not inside a .reveal wrapper still need a trigger */
.js .media-reveal.in .wi{ transform:translateY(0); }

/* ---------- media curtain reveal ---------- */
.js .media-reveal{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.35s var(--ease);
  will-change:clip-path;
}
.js .media-reveal.in{ clip-path:inset(0 0 0 0); }
.js .media-reveal img:not(.px-media){
  transform:scale(1.22);
  transition:transform 1.6s var(--ease);
}
.js .media-reveal.in img:not(.px-media){ transform:scale(1); }

/* Parallax + hover zoom must coexist on the same element, so both
   compose into one transform through registered custom properties.
   --py is written each frame by the rAF loop, --sc by CSS state. */
@property --py { syntax:'<length>'; initial-value:0px; inherits:false; }
@property --sc { syntax:'<number>'; initial-value:1; inherits:false; }

.js .px-host{ overflow:hidden; }
.js .px-media{
  height:118% !important;
  position:relative;
  top:-9%;
  transform:translate3d(0, var(--py), 0) scale(var(--sc));
  transition:--sc 1.6s var(--ease);
  will-change:transform;
}
.js .media-reveal .px-media{ --sc:1.22; }
.js .media-reveal.in .px-media{ --sc:1; }
.js .px-host:hover .px-media{ --sc:1.06; transition:--sc 1s var(--ease); }

.js 
/* ---------- richer photo hover ---------- */
.frame::after,
.card-media::after,
.pillar.photo .media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(171,81,64,.28) 100%);
  opacity:0;
  transition:opacity .7s var(--ease);
  pointer-events:none;
  z-index:1;
}
.frame:hover::after,
.method-card:hover .card-media::after,
.pillar.photo:hover .media::after{ opacity:1; }

.card-media, .pillar.photo .media{ position:relative; }

/* ---------- arch shape reveal ---------- */
.js .arch.media-reveal{ transition:clip-path 1.5s var(--ease); }

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;
  display:flex;
  white-space:nowrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:30px 0;
  background:var(--cream);
  user-select:none;
}
.marquee-track{
  display:flex;
  flex-shrink:0;
  align-items:center;
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(24px,3vw,40px);
  color:var(--charcoal-70);
  padding-right:44px;
  display:inline-flex;
  align-items:center;
  gap:44px;
}
.marquee-track span::after{
  content:'';
  width:7px; height:7px;
  background:var(--terracotta);
  transform:rotate(45deg);
  display:inline-block;
  flex-shrink:0;
}
@keyframes marquee{ to{ transform:translateX(-100%); } }
.reduced-motion .marquee-track{ animation:none; }

/* ---------- button sweep ---------- */
.btn{ overflow:hidden; z-index:0; }
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:var(--terracotta);
  transform:scaleY(0);
  transform-origin:50% 100%;
  transition:transform .55s var(--ease);
  z-index:-1;
}
.btn:hover::before{ transform:scaleY(1); }
.btn.solid::before{ background:var(--terracotta-d); }
.btn.light::before{ background:var(--white); }

/* ---------- hero entrance ---------- */
.js .hero-bg{ will-change:transform; }
.js .hero-copy{ will-change:transform, opacity; }

/* ---------- reduced motion: strip everything back ---------- */
.reduced-motion .media-reveal,
.reduced-motion .js .media-reveal{ clip-path:none !important; }
.reduced-motion .media-reveal img{ transform:none !important; }
.reduced-motion .reveal{ opacity:1 !important; transform:none !important; }
.reduced-motion .wi{ transform:none !important; }
.reduced-motion .scroll-progress{ display:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   INTERACTIVE MAP (contact)
   The Google embed is only injected on click, so no request
   leaves the page until the visitor asks for it.
   ========================================================= */
.map-card{
  border-radius:6px;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 40px 80px -44px rgba(74,32,25,.4);
}

.map-frame{
  position:relative;
  aspect-ratio:16/8;
  min-height:340px;
  background:var(--cream-deep);
  overflow:hidden;
}

/* --- drawn preview --- */
.map-placeholder{ position:absolute; inset:0; }
.map-art{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.map-placeholder::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(52% 62% at 50% 45%, rgba(250,245,236,.92), rgba(250,245,236,.5) 66%, rgba(250,245,236,.12) 100%);
}
.map-cta{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:36px 24px;
  gap:14px;
}
.map-pin{
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--terracotta);
  color:var(--white);
  box-shadow:0 14px 30px -10px rgba(171,81,64,.7);
  animation:pinFloat 3.4s ease-in-out infinite;
}
.map-pin svg{ width:24px; height:24px; }
@keyframes pinFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.reduced-motion .map-pin{ animation:none; }

.map-address{
  font-family:var(--font-display);
  font-size:23px;
  line-height:1.35;
  color:var(--charcoal);
}
.map-note{
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--charcoal-45);
  max-width:340px;
}

/* --- the live embed --- */
.map-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  /* warm the Google palette so it sits inside the brand */
  filter:sepia(.22) saturate(.86) hue-rotate(-10deg) contrast(.96) brightness(1.02);
  opacity:0;
  transition:opacity 1s var(--ease);
}
.map-frame.loaded iframe{ opacity:1; }
.map-frame.loaded .map-placeholder{
  opacity:0;
  pointer-events:none;
  transition:opacity .7s var(--ease);
}

/* --- footer bar --- */
.map-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:24px 32px;
  border-top:1px solid var(--line);
  background:var(--white);
}
.map-bar-info{ display:flex; flex-direction:column; gap:4px; }
.map-bar-info .lbl{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta);
}
.map-bar-info .val{ font-size:15.5px; color:var(--charcoal-70); }

@media (max-width:600px){
  .map-frame{ aspect-ratio:4/5; min-height:0; }
  .map-address{ font-size:20px; }
  .map-bar{ padding:22px; }
  .map-bar .btn{ width:100%; justify-content:center; }
}

/* ---------- footer social ---------- */
.footer-social{ display:flex; gap:12px; margin-top:24px; }
.footer-social a{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--charcoal-70);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.footer-social a:hover{ background:var(--terracotta); border-color:var(--terracotta); color:var(--white); }
.footer-social svg{ width:17px; height:17px; }

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal-doc{ max-width:760px; margin-inline:auto; }
.legal-doc h2{
  font-size:clamp(24px,2.8vw,32px);
  margin-top:64px; margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc h3{ font-size:20px; margin-top:34px; margin-bottom:10px; }
.legal-doc p{ color:var(--charcoal-70); font-size:16.5px; margin-bottom:16px; }
.legal-doc ul{ margin:0 0 18px; padding-left:0; }
.legal-doc li{
  position:relative; padding-left:24px; margin-bottom:10px;
  color:var(--charcoal-70); font-size:16.5px;
}
.legal-doc li::before{
  content:''; position:absolute; left:2px; top:.72em;
  width:6px; height:6px; background:var(--terracotta);
  transform:rotate(45deg);
}
.legal-doc a{ color:var(--terracotta); text-decoration:underline; text-underline-offset:3px; }
.legal-doc a:hover{ color:var(--terracotta-d); }
.legal-doc .updated{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--charcoal-45); margin-bottom:52px;
}

/* information the client still has to supply */
.todo{
  display:inline-block;
  background:rgba(171,81,64,.1);
  border:1px dashed var(--terracotta);
  border-radius:3px;
  padding:2px 10px;
  color:var(--terracotta-d);
  font-size:14.5px;
  font-weight:400;
}

/* key/value block for the publisher details */
.legal-facts{
  background:var(--white); border:1px solid var(--line);
  border-radius:4px; padding:32px 34px; margin-bottom:20px;
}
.legal-facts dl{ margin:0; display:grid; grid-template-columns:190px 1fr; gap:14px 24px; }
.legal-facts dt{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terracotta); padding-top:3px;
}
.legal-facts dd{ margin:0; font-size:16px; color:var(--charcoal-70); }
@media (max-width:600px){
  .legal-facts{ padding:24px 22px; }
  .legal-facts dl{ grid-template-columns:1fr; gap:4px 0; }
  .legal-facts dd{ margin-bottom:14px; }
  .legal-doc h2{ margin-top:48px; }
}

/* ---------- contrast: eyebrow on the deeper cream ---------- */
.section.cream-deep .eyebrow,
.page-hero:not(.dark) .eyebrow{ color:var(--terracotta-d); }
.section.cream-deep .eyebrow::before,
.section.cream-deep .eyebrow::after,
.page-hero:not(.dark) .eyebrow::before,
.page-hero:not(.dark) .eyebrow::after{ background:var(--terracotta-d); }

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

/* Visible keyboard focus. :focus-visible keeps it off for mouse users. */
:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
  border-radius:2px;
}
.cta-band :focus-visible,
.image-quote :focus-visible,
body.dark-header .site-header:not(.scrolled) :focus-visible{
  outline-color:var(--cream);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{ outline-offset:2px; }

/* Skip link — first tab stop, hidden until focused */
.skip-link{
  position:absolute; left:16px; top:-100px;
  z-index:1500;
  background:var(--terracotta); color:var(--white);
  padding:14px 24px; border-radius:0 0 4px 4px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:0; }

/* A reveal that never fired must not hide content from a keyboard user
   tabbing ahead of the scroll position. */
.js .reveal:focus-within{ opacity:1 !important; transform:none !important; }
.js .media-reveal:focus-within{ clip-path:none !important; }

/* Screen-reader-only helper */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- buttons inside the terracotta CTA band ---------- */
.cta-band .btn{ border-color:rgba(255,253,250,.6); color:var(--white); }
.cta-band .btn::before{ background:var(--white); }
.cta-band .btn:hover{ color:var(--terracotta-d); border-color:var(--white); background:transparent; }
.cta-band .btn.solid{ background:var(--white); color:var(--terracotta-d); border-color:var(--white); }
.cta-band .btn.solid::before{ background:var(--cream); }
.cta-band .btn.solid:hover{ color:var(--terracotta-d); }

/* =========================================================
   COMPARISON — deux types de compétences
   ========================================================= */
.compare-col + 
.compare-col.school .compare-col.stage  

.compare-foot{
  padding:38px 40px;
  text-align:center;
  border-top:1px solid var(--line);
  background:var(--cream);
}
.compare-foot blockquote{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(17px,2vw,21px); line-height:1.6;
  color:var(--charcoal-70);
  max-width:720px; margin-inline:auto;
}
.compare-foot .q{ color:var(--gold); font-size:26px; line-height:1; display:block; margin-bottom:10px; }

@media (max-width:860px){
    .compare-col +       .compare-foot{ padding:30px 24px; }
}

/* ---------- inline call to action, repeatable without feeling heavy ---------- */
.inline-cta{
  display:flex; align-items:center; justify-content:center;
  gap:28px; flex-wrap:wrap;
  text-align:center;
  margin-top:64px;
  padding:34px 40px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
}
.inline-cta p{
  font-family:var(--font-display); font-style:italic;
  font-size:20px; color:var(--charcoal-70);
}
.inline-cta .btn{ flex-shrink:0; }
.page-hero .hero-cta{ margin-top:38px; }
@media (max-width:700px){
  .inline-cta{ border-radius:6px; padding:28px 24px; gap:20px; margin-top:48px; }
  .inline-cta p{ font-size:18px; }
  .inline-cta .btn{ width:100%; justify-content:center; }
}


/* =========================================================
   RADIAL ORBITAL
   Deux systèmes : l'école et le stage.
   ========================================================= */
.orbits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.orbit-col{ display:flex; flex-direction:column; }

/* ---------- la scène ---------- */
.orbit-stage{
  position:relative;
  width:100%;
  max-width:440px;
  margin-inline:auto;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  isolation:isolate;
}
/* halo diffus, donne de la profondeur au fond crème */
.orbit-stage::before{
  content:'';
  position:absolute; inset:-6%;
  border-radius:50%;
  z-index:0;
  background:radial-gradient(circle at 50% 42%, var(--halo) 0%, transparent 68%);
}
.orbit-col:has([data-variant="school"]) .orbit-stage{ --halo:rgba(99,114,104,.16); --hue:var(--sage); --hue-d:#4e5b53; }
.orbit-col:has([data-variant="stage"])  .orbit-stage{ --halo:rgba(171,81,64,.16);  --hue:var(--terracotta); --hue-d:var(--terracotta-d); }
.orbit-stage{ --halo:rgba(171,81,64,.14); --hue:var(--terracotta); --hue-d:var(--terracotta-d); }

.orbit-system{ position:absolute; inset:0; z-index:1; }

/* ---------- anneaux ---------- */
.orbit-ring{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}
.orbit-ring.r1{ width:78%; aspect-ratio:1; border:1px solid rgba(176,137,104,.34); }
.orbit-ring.r2{
  width:92%; aspect-ratio:1;
  border:1px dashed rgba(176,137,104,.26);
  animation:orbitDrift 90s linear infinite;
}
.orbit-ring.r3{ width:63%; aspect-ratio:1; border:1px solid rgba(56,48,43,.07); }
@keyframes orbitDrift{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.reduced-motion .orbit-ring.r2{ animation:none; }

/* ---------- cœur ---------- */
.orbit-core{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:46%; aspect-ratio:1;
  border-radius:50%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:9%;
  z-index:3;
  color:var(--white);
  background:
    radial-gradient(circle at 34% 26%, rgba(255,253,250,.28) 0%, transparent 56%),
    linear-gradient(150deg, var(--hue) 0%, var(--hue-d) 100%);
  box-shadow:
    0 22px 48px -18px rgba(74,32,25,.42),
    inset 0 1px 0 rgba(255,253,250,.28);
}
/* fin liseré doré à distance du cœur */
.orbit-core::after{
  content:'';
  position:absolute; inset:-9%;
  border-radius:50%;
  border:1px solid rgba(176,137,104,.5);
  pointer-events:none;
}

.orbit-core .core-index{
  font-family:var(--font-display); font-style:italic;
  font-size:13px; color:rgba(255,253,250,.6);
  margin-bottom:6px; letter-spacing:.06em;
  min-height:1em;
}
.orbit-core .core-label{
  font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,253,250,.68);
  margin-bottom:9px;
}
.orbit-core .core-title{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(18px,2.2vw,25px); line-height:1.22;
  color:var(--white);
  transition:opacity .4s var(--ease);
}
.orbit-core.focused .core-label{ display:none; }
.orbit-core.focused .core-index{ color:rgba(255,253,250,.75); }
.orbit-core .core-rule{
  width:26px; height:1px; margin:12px auto 0;
  background:rgba(255,253,250,.45);
}

/* ---------- nœuds ---------- */
.orbit-node{
  position:absolute; top:50%; left:50%;
  width:56px; height:56px;
  margin:-28px 0 0 -28px;
  border-radius:50%;
  border:1px solid rgba(176,137,104,.42);
  background:var(--white);
  color:var(--gold);
  display:grid; place-items:center;
  cursor:pointer; padding:0;
  z-index:4;
  box-shadow:0 8px 20px -10px rgba(74,32,25,.3);
  transition:background .5s var(--ease), color .5s var(--ease),
             border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.orbit-node svg{ width:23px; height:23px; }
/* couronne qui éclot au survol */
.orbit-node::after{
  content:'';
  position:absolute; inset:-9px;
  border-radius:50%;
  border:1px solid var(--hue);
  opacity:0;
  transform:scale(.82);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.orbit-node:hover,
.orbit-node.active{
  background:var(--hue);
  color:var(--white);
  border-color:transparent;
  box-shadow:0 16px 34px -12px rgba(74,32,25,.5);
}
.orbit-node:hover::after,
.orbit-node.active::after{ opacity:.55; transform:scale(1); }

/* ---------- panneau de détail ---------- */
.orbit-detail{
  position:relative;
  margin-top:34px;
  padding:30px 32px 32px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:5px;
  box-shadow:0 26px 54px -34px rgba(74,32,25,.34);
  min-height:186px;
  overflow:hidden;
}
.orbit-detail::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--hue), var(--gold));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease);
}
.orbit-detail.filled::before{ transform:scaleX(1); }
.orbit-detail .d-index{
  font-family:var(--font-display); font-style:italic;
  font-size:30px; line-height:1; color:var(--sand);
  display:block; margin-bottom:12px;
}
.orbit-detail .d-title{
  font-family:var(--font-display);
  font-size:23px; line-height:1.3; color:var(--charcoal);
  margin-bottom:12px;
}
.orbit-detail .d-note{ font-size:15.5px; color:var(--charcoal-70); }
.orbit-detail .d-hint{
  font-size:13.5px; color:var(--charcoal-45); font-style:italic;
  font-family:var(--font-display);
}
.orbit-detail .d-body{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.orbit-detail .d-body.show{ opacity:1; transform:none; }

/* ---------- liste fixe ---------- */
.orbit-legend{ margin-top:22px; }
.orbit-legend li{
  display:flex; align-items:center; gap:16px;
  padding:13px 6px;
  border-top:1px solid var(--line);
  font-size:14.5px; color:var(--charcoal-70);
  cursor:pointer;
  transition:color .35s var(--ease), padding-left .35s var(--ease);
}
.orbit-legend li:first-child{ border-top:none; }
.orbit-legend li:hover,
.orbit-legend li.active{ color:var(--hue-d); padding-left:12px; }
.orbit-legend .n{
  font-family:var(--font-display); font-style:italic;
  font-size:14px; color:var(--gold);
  min-width:22px;
  transition:color .35s var(--ease);
}
.orbit-legend li.active .n{ color:var(--hue); }

.orbit-legend{ --hue:var(--terracotta); --hue-d:var(--terracotta-d); }
.orbit-col:has([data-variant="school"]) .orbit-legend{ --hue:var(--sage); --hue-d:#4e5b53; }

/* le libellé sert de nom accessible, il ne s'affiche pas sur l'orbite */
.orbit-label{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

@media (max-width:980px){
  .orbits{ grid-template-columns:1fr; gap:86px; }
}
@media (max-width:560px){
  .orbit-stage{ max-width:320px; }
  .orbit-node{ width:46px; height:46px; margin:-23px 0 0 -23px; }
  .orbit-node svg{ width:20px; height:20px; }
  .orbit-core{ width:50%; }
  .orbit-detail{ padding:26px 22px 28px; min-height:210px; }
  .orbit-detail .d-title{ font-size:20px; }
}

/* =========================================================
   Actualités
   La page publique alimentée depuis l'espace d'administration.
   Mêmes briques que le reste du site : filets fins, angles nets,
   photo qui respire au survol.
   ========================================================= */
.news-lead{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  border:1px solid var(--line);
  background:var(--white);
  overflow:hidden;
}
.news-lead .media{ position:relative; min-height:340px; overflow:hidden; }
.news-lead .media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.news-lead:hover .media img{ transform:scale(1.04); }
.news-lead .copy{ padding:52px 54px; display:flex; flex-direction:column; justify-content:center; }
.news-lead .copy h2{ font-size:clamp(28px,3.2vw,40px); margin:18px 0 16px; }
.news-lead .copy p{ color:var(--charcoal-70); font-size:16px; }
.news-lead .date{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--charcoal-45);
  margin-top:26px;
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
}
.news-card{
  border:1px solid var(--line);
  background:var(--white);
  display:flex; flex-direction:column;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.news-card:hover{ border-color:var(--sand); transform:translateY(-3px); }
.news-card .media{ aspect-ratio:16/10; overflow:hidden; }
.news-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.news-card:hover .media img{ transform:scale(1.05); }
.news-card .copy{ padding:30px 32px 34px; display:flex; flex-direction:column; gap:12px; flex:1; }
.news-card .date{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta);
}
.news-card h3{ font-size:24px; line-height:1.28; }
.news-card p{ color:var(--charcoal-70); font-size:15px; }

.agenda-list{ max-width:900px; margin-inline:auto; }
.agenda-item{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:28px;
  align-items:center;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.agenda-item:first-child{ border-top:1px solid var(--line); }
.agenda-item .when{
  text-align:center; border:1px solid var(--line); background:var(--white); padding:12px 0;
}
.agenda-item .when b{ display:block; font-family:var(--font-display); font-size:30px; line-height:1; }
.agenda-item .when span{
  display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--charcoal-45); margin-top:6px;
}
.agenda-item h3{ font-size:23px; margin-bottom:6px; }
.agenda-item .meta{
  display:flex; gap:20px; flex-wrap:wrap; font-size:13.5px; color:var(--charcoal-45);
}
.agenda-item .kind{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta);
  border:1px solid rgba(171,81,64,.3); padding:7px 15px; border-radius:999px; white-space:nowrap;
}

@media (max-width:980px){
  .news-lead{ grid-template-columns:1fr; }
  .news-lead .media{ min-height:260px; }
  .news-lead .copy{ padding:38px 32px; }
  .news-grid{ grid-template-columns:repeat(2,1fr); gap:26px; }
}
@media (max-width:680px){
  .news-grid{ grid-template-columns:1fr; }
  .agenda-item{ grid-template-columns:70px 1fr; gap:20px; }
  .agenda-item .kind{ grid-column:2; justify-self:start; }
}

/* ---------- lien de session dans l'en-tête ----------
   Une fois connecté, le bouton porte un prénom et un nom : les capitales
   espacées du bouton d'origine transformeraient « Bérénice Boutareaud » en
   bandeau. On revient à une graisse de texte courante. */
/* Sur les pages à en-tête sombre, le bouton « Contact » est déjà retravaillé
   en blanc ; « Se connecter », qui n'est pas .solid, restait en terracotta sur
   une photo foncée — illisible. Il suit le même traitement. */
body.dark-header .site-header:not(.scrolled) .header-cta .btn{
  border-color:rgba(255,253,250,.55);
  color:var(--white);
}
body.dark-header .site-header:not(.scrolled) .header-cta .btn::before{ background:var(--white); }
body.dark-header .site-header:not(.scrolled) .header-cta .btn:hover{
  background:var(--white); color:var(--terracotta); border-color:var(--white);
}

.btn.is-connecte{
  text-transform:none;
  letter-spacing:.04em;
  font-size:14px;
  padding:14px 26px;
}
.mobile-nav .btn.is-connecte{ text-align:center; justify-content:center; }

/* Une actualité peut porter une vidéo à la place de la photo — même cadre,
   mêmes proportions, avec les commandes du lecteur. */
.news-lead .media video,
.news-card .media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000; border:none;
}
.news-card .media{ position:relative; }


/* =========================================================
   Bandeau de consentement aux traceurs
   Les deux boutons « Tout accepter » et « Tout refuser » partagent
   volontairement le même style : la CNIL impose que refuser soit
   aussi simple et aussi visible qu'accepter.
   ========================================================= */
.consent{
  position:fixed; inset:auto 0 0 0; z-index:2000;
  padding:20px;
  display:flex; justify-content:center;
  animation:consent-entree .5s var(--ease) both;
}
@keyframes consent-entree{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.consent-boite{
  width:100%; max-width:900px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:0 30px 70px -30px rgba(74,32,25,.45);
  padding:30px 34px;
  display:flex; align-items:center; gap:34px;
}
.consent-texte{ flex:1; min-width:0; }
.consent-texte h2{
  font-family:var(--font-display);
  font-size:23px; font-weight:500; color:var(--ink);
  margin:0 0 10px; outline:none;
}
.consent-texte p{ color:var(--charcoal-70); font-size:15px; line-height:1.6; margin:0; }
.consent-texte a{ color:var(--terracotta); text-decoration:underline; text-underline-offset:3px; }

.consent-actions{ display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
.consent-actions .btn{ justify-content:center; white-space:nowrap; padding:14px 30px; }
.consent-lien{
  border:none; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--charcoal-70);
  text-decoration:underline; text-underline-offset:4px;
  padding:4px; transition:color .4s var(--ease);
}
.consent-lien:hover{ color:var(--terracotta); }

/* ---- panneau de réglage ---- */
.consent--reglages{
  inset:0; align-items:center;
  background:rgba(56,48,43,.45);
  backdrop-filter:blur(3px);
  overflow-y:auto;
}
.consent--reglages .consent-boite{
  max-width:620px; flex-direction:column; align-items:stretch; gap:26px;
  max-height:calc(100vh - 40px); overflow-y:auto;
}
.consent--reglages .consent-actions{ flex-direction:row; align-items:center; gap:20px; }

.consent-choix{ padding:18px 0; border-top:1px solid var(--line); }
.consent-choix:first-of-type{ border-top:none; padding-top:0; }
.consent-choix p{ font-size:14px; margin:8px 0 0; }
.consent-intitule{
  font-family:var(--font-body); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; color:var(--ink);
}
.consent-choix--fixe .consent-intitule{ color:var(--charcoal-70); }

.consent-bascule{ display:flex; align-items:center; gap:14px; cursor:pointer; }
.consent-bascule input{ position:absolute; opacity:0; width:0; height:0; }
.consent-piste{
  position:relative; flex-shrink:0;
  width:44px; height:24px; border-radius:999px;
  background:var(--sand); transition:background .4s var(--ease);
}
.consent-piste::after{
  content:''; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:var(--white); box-shadow:0 1px 4px rgba(74,32,25,.35);
  transition:transform .4s var(--ease);
}
.consent-bascule input:checked + .consent-piste{ background:var(--terracotta); }
.consent-bascule input:checked + .consent-piste::after{ transform:translateX(20px); }
.consent-bascule input:focus-visible + .consent-piste{ outline:2px solid var(--terracotta); outline-offset:3px; }

@media (max-width:760px){
  .consent{ padding:12px; }
  .consent-boite{ flex-direction:column; align-items:stretch; gap:22px; padding:24px; }
  .consent-actions{ width:100%; }
  .consent-actions .btn{ width:100%; }
  .consent--reglages .consent-actions{ flex-direction:column; align-items:stretch; }
}

@media (prefers-reduced-motion: reduce){
  .consent{ animation:none; }
}

/* Tableau des finalités, page Cookies */
.legal-table{
  width:100%; border-collapse:collapse; margin:0 0 22px;
  font-size:15px; color:var(--charcoal-70);
}
.legal-table th, .legal-table td{
  text-align:left; vertical-align:top;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.legal-table th{
  font-family:var(--font-body); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--sand);
}
.legal-table td:first-child{ color:var(--ink); font-weight:500; }
.legal-doc code{
  font-size:14px; background:var(--cream-deep);
  padding:2px 7px; border-radius:3px;
}
@media (max-width:700px){
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td{ display:block; width:100%; }
  .legal-table thead{ display:none; }
  .legal-table tr{ border-bottom:1px solid var(--sand); padding:10px 0; }
  .legal-table td{ border:none; padding:5px 0; }
  .legal-table td:first-child{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
}

/* =========================================================
   Bandeau d'appel à l'action — pleine largeur
   Le fond touche les deux bords de la page, mais le texte et le bouton
   restent alignés sur la même grille que le reste du site : on neutralise
   la section et son conteneur, et on reporte la marge du conteneur dans
   le rembourrage horizontal du bandeau.
   ========================================================= */
.section:has(> .container > .cta-band){ padding-block:0; }
.section:has(> .container > .cta-band) > .container{ max-width:none; padding-inline:0; }

.cta-band{
  border-radius:0;
  padding-block:96px;
  padding-inline:max(32px, calc((100% - var(--container)) / 2 + 32px));
}
.cta-band::before{
  background:radial-gradient(circle at 78% 18%, rgba(255,253,250,.16), transparent 46%);
}

@media (max-width:860px){
  .cta-band{ padding-block:72px; }
}
@media (max-width:600px){
  .cta-band{ padding-block:60px; padding-inline:22px; }
}