/* EOLE — feuille de style commune à toutes les pages.
   À chaque évolution, incrémenter le numéro dans les pages : site.css?v=N */

/* Police Poppins servie par le site (aucun appel à un service tiers) */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/poppins-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/poppins-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }

:root {
  --bg: #FAF7F1;
  --surface: #FFFFFF;
  --band: #DDE5EC;
  --card: #EEF2F6;
  --gold-text: #8E4A27;
  --primary-soft: #4B6D91;
  --gold-display: #B0603A;
  --ink: #23262B;
  --ink-soft: #5B6167;
  --ink-faint: #8D9297;
  --primary: #274B6B;
  --primary-light: #5C86A3;
  --rose: #B6543A;
  --line: #E4D9C2;
  --gold: #B8693F;
  --radius: 8px;
  --shadow: 0 2px 12px rgba(35, 38, 43, 0.06);
  --shadow-hover: 0 12px 28px rgba(39, 75, 107, 0.14);
  --header-h: 100px;
  --header-h-compact: 64px;
  --measure: 40rem;
  --site-version: 12;   /* repère lu par version.html : à incrémenter avec le numéro ?v= des pages */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1322;
    --surface: #18253B;
    --ink: #F2EEE6;
    --ink-soft: #B8C4D4;
    --ink-faint: #8EA3BD;
    --primary: #9EC3E6;
    --primary-light: #C3DBF1;
    --rose: #D4916E;
    --line: #26344A;
    --gold: #E3A27C;
    --band: #16233A;
    --card: #1C2B44;
    --gold-text: #E3A27C;
    --primary-soft: #C3DBF1;
    --gold-display: #E3A27C;
    --gold-muted: #D08C64;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0B1322;
  --surface: #18253B;
  --ink: #F2EEE6;
  --ink-soft: #B8C4D4;
  --ink-faint: #8EA3BD;
  --primary: #9EC3E6;
  --primary-light: #C3DBF1;
  --rose: #D4916E;
  --line: #26344A;
  --gold: #E3A27C;
  --band: #16233A;
  --card: #1C2B44;
  --gold-text: #E3A27C;
  --primary-soft: #C3DBF1;
  --gold-display: #E3A27C;
  --gold-muted: #D08C64;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-compact) + 16px + env(safe-area-inset-top, 0px));
}
body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* le bandeau est fixe : on réserve sa hauteur (non réduite) en haut de page */
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
h1, h2, h3 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
a { color: inherit; }
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Bandeau : fixe, il se réduit dès qu'on fait défiler (classe .is-scrolled posée par site.js) */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  /* transparent tout en haut pour laisser voir les lignes de vent, opaque dès qu'on défile */
  background: transparent;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
nav.wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
  transition: height 0.25s ease;
}
.logotype { display: inline-flex; align-items: center; }
.logo-img { display: block; height: 80px; width: auto; }
header .logo-img { transition: height 0.25s ease; }
.is-scrolled header { background: var(--bg); border-bottom-color: var(--line); box-shadow: 0 4px 18px rgba(35, 38, 43, 0.05); }
.is-scrolled nav.wrap { height: var(--header-h-compact); }
.is-scrolled header .logo-img { height: 48px; }
.logo-img.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-img.logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-img.logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-img.logo-light { display: none; }
:root[data-theme="dark"] .logo-img.logo-dark { display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
/* Lien de la section affichée (posé par site.js) */
.nav-links > a.is-current {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.nav-tools { display: flex; align-items: center; gap: 12px; margin-left: 32px; }
/* Sélecteur de langue FR | EN */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 19px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}
.lang-switch > * { padding: 7px 9px; border-radius: 14px; }
.lang-switch .lang-current { background: var(--card); color: var(--primary); }
.lang-switch a { font-size: 0.8rem; color: var(--ink-soft); text-decoration: none; transition: color 0.15s ease; }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--ink); }
.nav-cta {
  margin-left: 28px;
  background: var(--primary);
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.15s ease;
}
.nav-cta:hover { background: var(--primary-light); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-cta { background: transparent; border-color: var(--gold); color: var(--gold); }
  :root:not([data-theme="light"]) .nav-cta:hover { background: transparent; filter: brightness(1.15); }
}
:root[data-theme="dark"] .nav-cta { background: transparent; border-color: var(--gold); color: var(--gold); }
:root[data-theme="dark"] .nav-cta:hover { background: transparent; filter: brightness(1.15); }

:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; }
main:focus { outline: none; }

/* Lien « Aller au contenu » : visible uniquement au clavier */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 40;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skip-link { color: var(--bg); }
}
:root[data-theme="dark"] .skip-link { color: var(--bg); }

/* Lignes de vent (décor en haut à droite) */
.wind-lines {
  position: absolute;
  /* sous le bandeau, qui le recouvre dès qu'on fait défiler */
  top: calc(var(--header-h) - 16px + env(safe-area-inset-top, 0px));
  right: 0;
  /* du bord droit du logo jusqu'au bord droit de l'écran */
  width: calc(100% - max(0px, 50% - 520px) - 28px);
  height: auto;
  z-index: 19;
  pointer-events: none;
}
.wind-lines-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wind-lines-light { display: none; }
  :root:not([data-theme="light"]) .wind-lines-dark { display: block; }
}
:root[data-theme="dark"] .wind-lines-light { display: none; }
:root[data-theme="dark"] .wind-lines-dark { display: block; }
/* Version animée : mêmes courbes, tracées par site.js, qui ondulent doucement. Elle remplace alors les deux images. */
.wind-lines-live { display: block; aspect-ratio: 600 / 75.57; overflow: visible; color: #4B6D91; }
.wind-lines-live path { fill: none; stroke: currentColor; stroke-width: 0.63; stroke-miterlimit: 10; }
.wind-live img.wind-lines { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wind-lines-live { color: #7FA3C6; }
}
:root[data-theme="dark"] .wind-lines-live { color: #7FA3C6; }

/* Hero */
.hero {
  position: relative;
  padding: 96px 0 0;
  overflow: hidden;
  border-top: none;
}
.hero-inner { position: relative; z-index: 1; }
.eyebrow-line {
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0 0 22px;
}
.eyebrow-line .sep { color: var(--ink-faint); margin: 0 6px; }
.hero h1 {
  font-size: clamp(1.8rem, 3.9vw, 2.8rem);
  letter-spacing: -0.01em;
  color: var(--primary);
}
.hl-dark { color: var(--gold-display); }
.hero p.lead {
  max-width: var(--measure);
  margin: 28px 0 0;
  font-size: 1rem;
  color: var(--ink);
}
.hero p.leitmotiv {
  margin: 26px 0 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.leitmotiv strong {
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary);
}
.hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-mountains {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(90px, 16vw, 240px);
  margin-top: 16px;
  overflow: hidden;
}
/* image seule (page 404) ou deux plans superposés (accueil) : même cadrage */
img.hero-mountains, .hero-mountains > img { object-fit: cover; object-position: top; }
.hero-mountains > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-light); }
.btn-ghost { border: 1px solid var(--ink-faint); color: var(--ink); }
.btn-ghost:hover { border-color: var(--primary-light); color: var(--primary-light); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { background: var(--gold-muted); color: var(--bg); }
  :root:not([data-theme="light"]) .btn-primary:hover { background: var(--gold-muted); filter: brightness(1.1); }
  :root:not([data-theme="light"]) .btn-ghost { border-color: var(--primary); color: var(--primary); }
  :root:not([data-theme="light"]) .btn-ghost:hover { border-color: var(--primary); color: var(--primary); filter: brightness(1.15); }
}
:root[data-theme="dark"] .btn-primary { background: var(--gold-muted); color: var(--bg); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--gold-muted); filter: brightness(1.1); }
:root[data-theme="dark"] .btn-ghost { border-color: var(--primary); color: var(--primary); }
:root[data-theme="dark"] .btn-ghost:hover { border-color: var(--primary); color: var(--primary); filter: brightness(1.15); }

/* Sections */
section { padding: 88px 0; border-top: 1px solid var(--line); }
#apercu, #expertises, #engagement, #apropos { border-top: none; }
#expertises { padding-bottom: 40px; }
.band { background: var(--band); }
.section-head { margin-bottom: 52px; }
.section-head .kicker,
.kicker {
  color: var(--gold-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--primary); }
.section-head p { max-width: var(--measure); margin-top: 16px; color: var(--ink); font-size: 0.98rem; }
.section-head h2 + p { margin-top: 32px; }
.section-head strong, .prose strong { color: var(--primary); font-weight: 700; }
/* Contact : titre conservé dans son ancien style, kicker aligné sur les autres sections */
#contact .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--primary); }

/* Aperçu : 3 cartes interactives */
#apercu { padding: 72px 0; }
.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.overview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.overview-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 40px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.overview-card:hover,
.overview-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-hover);
}
.overview-card:hover::before,
.overview-card:focus-visible::before { width: 100%; }
.overview-num {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}
.overview-card h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
}
.overview-card p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; flex: 1; }
.overview-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
}
.overview-more svg { transition: transform 0.2s ease; }
.overview-card:hover .overview-more svg,
.overview-card:focus-visible .overview-more svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .overview-card, .overview-card::before, .overview-more svg { transition: none; }
  .overview-card:hover, .overview-card:focus-visible { transform: none; }
}
.expertise-card p strong { color: var(--primary); font-weight: 700; }

/* Expertises : cartes */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.expertise-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.expertise-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.expertise-card-body { padding: 28px 24px 20px; }
.expertise-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 18px;
}
.expertise-card p { color: var(--ink-soft); margin: 0; font-size: 0.9rem; line-height: 1.55; }
/* Paysages : chaque scène est un décor de fond + des éléments détachés (girafe, arbres, vague, colline)
   posés exactement à leur place d'origine. Sans animation, l'image est identique à l'aquarelle de départ. */
.scene {
  position: relative;
  margin-top: auto;
  aspect-ratio: 1672 / 359;   /* même hauteur pour les trois cartes */
}
.scene-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: 50% 100%;
  transition: transform 0.6s ease;
}
.scene-art img { display: block; height: auto; }
.scene-bg { width: 100%; }
.scene-el { position: absolute; display: block; }
.scene-el > img { width: 100%; }
.expertise-card:hover .scene-art { transform: scale(1.06); }
/* positions en % de l'image d'origine */
.el-vague { left: 0; top: 0; width: 100%; }
.el-acacia { left: 1.5%; top: 16.807%; width: 16.3%; transform-origin: 49.4% 100%; }
.el-petit-acacia { left: 31.9%; top: 44.258%; width: 7.8%; transform-origin: 50.6% 100%; }
.el-colline { left: 0; top: 28.852%; width: 38%; }          /* colline du premier plan : la girafe passe derrière */
.el-arbre { left: 0.6%; top: 4.932%; width: 15.6%; transform-origin: 50% 100%; }
.el-palmier { left: 14%; top: 29.041%; width: 6.2%; transform-origin: 33.9% 100%; }
/* girafe : un corps et quatre pattes articulées */
.el-girafe { left: 28.3%; top: 31.933%; width: 3.4%; aspect-ratio: 68 / 106; transform-origin: 50% 97%; }
.girafe-pas { position: absolute; inset: 0; display: block; }
.el-girafe img { position: absolute; }
.g-corps { left: 0; top: 0; width: 100%; }
.g-patte { top: 67.925%; }
.g-p1 { left: 1.471%; width: 20.588%; transform-origin: 46.4% 11.8%; }
.g-p2 { left: 11.765%; width: 20.588%; transform-origin: 46.4% 11.8%; }
.g-p3 { left: 39.706%; width: 17.647%; transform-origin: 50% 11.8%; }
.g-p4 { left: 48.529%; width: 17.647%; transform-origin: 45.8% 11.8%; }
/* ciel : nuages, voiles et filets de vent, dans la teinte de chaque paysage. Invisibles sans animation. */
.scene-savane { --cloud: rgba(203, 174, 118, 0.5); --veil: rgba(255, 244, 216, 0.8); --wind: #B4935A; }
.scene-mer { --cloud: rgba(92, 134, 163, 0.42); --veil: rgba(238, 244, 250, 0.6); --wind: #5C86A3; }
.scene-jungle { --cloud: rgba(134, 164, 134, 0.45); --veil: rgba(244, 249, 240, 0.75); --wind: #7C9A7C; }
.scene-cloud, .scene-veil { position: absolute; left: -30%; opacity: 0; pointer-events: none; }
.scene-cloud {
  width: 26%;
  aspect-ratio: 3.2 / 1;
  background-image:
    radial-gradient(closest-side, var(--cloud) 0%, var(--cloud) 35%, transparent 100%),
    radial-gradient(closest-side, var(--cloud) 0%, var(--cloud) 35%, transparent 100%),
    radial-gradient(closest-side, var(--cloud) 0%, var(--cloud) 35%, transparent 100%);
  background-size: 62% 70%, 56% 100%, 52% 62%;
  background-position: 0% 100%, 48% 0%, 100% 88%;
  background-repeat: no-repeat;
}
.scene-veil {
  width: 30%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--veil), transparent);
}
.scene-wind { position: absolute; left: 0; top: -22%; width: 100%; height: 95%; overflow: visible; pointer-events: none; }
.scene-wind path {
  fill: none;
  stroke: var(--wind);
  stroke-width: 0.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 16 200;
  stroke-dashoffset: 16;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .expertise-card, .scene-art { transition: none; }
  .expertise-card:hover, .expertise-card:hover .scene-art { transform: none; }
}

/* Engagement */
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
}
.split > :first-child { padding-right: 56px; }
.split > :last-child { padding-left: 56px; border-left: 1px solid var(--line); }
.split .section-head { margin-bottom: 0; }
.prose p { max-width: var(--measure); color: var(--ink); margin: 0 0 16px; font-size: 0.98rem; }
.prose p:last-child { margin-bottom: 0; }
.split .prose p + p { margin-top: 32px; }
#engagement .split > :last-child { border-left: none; }
.pillars { display: flex; flex-direction: column; gap: 14px; }
.pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pillar:hover { box-shadow: var(--shadow-hover); }
.pillar summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.pillar summary::-webkit-details-marker { display: none; }
.pillar h3 { font-size: 1.08rem; font-weight: 700; color: var(--primary); margin: 0; }
.pillar-chevron { flex: none; color: var(--primary); transition: transform 0.2s ease; }
.pillar[open] .pillar-chevron { transform: rotate(180deg); }
.pillar.is-closing .pillar-chevron { transform: none; }
.pillar p { margin: 0; padding: 0 22px 20px; color: var(--ink); font-size: 0.97rem; }
@media (prefers-reduced-motion: reduce) {
  .pillar, .pillar-chevron { transition: none; }
}

/* À propos */
#apropos .prose p { margin-bottom: 20px; }
#apropos .prose p:last-child { margin-bottom: 0; }

.about-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: start;
}
/* Encart fondateur */
.founder {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
.founder-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.founder-photo { display: block; flex: none; width: 96px; height: 96px; border-radius: 50%; }
.founder-name { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.25; color: var(--primary); }
.founder-role {
  margin: 4px 0 0;
  color: var(--gold-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.founder-bio { margin: 0 0 18px; font-size: 0.95rem; color: var(--ink-soft); }
.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.founder-link:hover, .founder-link:focus-visible { color: var(--primary-light); }
.founder-link svg { display: block; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.address-link { text-decoration: none; }
.address-link:hover { color: var(--primary-light); }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list .field { color: var(--primary-soft); font-size: 0.92rem; }
.contact-list a { text-decoration: none; font-weight: 600; color: var(--primary); }
.contact-list a:hover { color: var(--primary-light); }
.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.contact-logo { margin: 0 0 24px; }
.contact-card .contact-logo .logo-img { height: 56px; }
.linkedin-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.linkedin-link { display: inline-flex; align-items: center; gap: 10px; }
.linkedin-link img { display: block; width: 22px; height: 22px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .linkedin-link img { filter: brightness(2.2); }
}
:root[data-theme="dark"] .linkedin-link img { filter: brightness(2.2); }

/* Bloc « Vous êtes consultant ? » */
.consultant-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding: 26px 30px;
  background: var(--card);
  border-radius: var(--radius);
}
.consultant-cta > div { flex: 1 1 320px; }
.consultant-cta h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 8px; }
.consultant-cta p { margin: 0; max-width: var(--measure); font-size: 0.95rem; color: var(--ink-soft); }
.consultant-cta .btn { flex: none; }

/* Pages légales */
.legal { padding: 72px 0 88px; border-top: none; }
.legal p.kicker {
  color: var(--gold-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.legal h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--primary); margin-bottom: 44px; }
.legal section { padding: 0; border-top: none; margin-bottom: 36px; }
.legal h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; }
.legal p { color: var(--ink-soft); margin: 0 0 10px; }
.legal ul { color: var(--ink-soft); margin: 0 0 10px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a.inline { color: var(--primary); font-weight: 600; text-decoration: none; }
.legal a.inline:hover { color: var(--primary-light); }
.back-link { display: inline-block; margin-top: 8px; font-size: 0.95rem; color: var(--ink-soft); text-decoration: none; }
.back-link:hover { color: var(--ink); }

/* Page 404 */
.notfound { padding: 96px 0 0; border-top: none; overflow: hidden; }
.notfound h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--primary); margin-bottom: 20px; }
.notfound p:not(.kicker) { color: var(--ink-soft); margin: 0 0 10px; }
.notfound .hero-actions { margin-top: 28px; }

.wind-motif {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 40px;
}
footer {
  padding: 40px 0 calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
footer a { text-decoration: none; color: var(--ink-soft); transition: color 0.15s ease; }
footer a:hover, footer a:focus-visible { color: var(--ink); }
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}
.footer-brand { margin: 0; }
.footer-nav { display: flex; gap: 8px 28px; flex-wrap: wrap; font-weight: 500; }
.footer-nav a { color: var(--ink); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--primary-light); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.footer-links { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.footer-linkedin { display: inline-flex; align-items: center; gap: 8px; }
.footer-linkedin svg { display: block; }

/* Back to top */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 30;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--primary-light); }

/* Écrans intermédiaires (téléphone pliant déplié, tablette) et téléphones : bandeau sur deux lignes.
   Ligne 1 : FR | EN, LinkedIn, clair / sombre — ligne 2 : Expertises, À propos, Nous contacter */
@media (max-width: 899px) {
  :root { --header-h: 112px; --header-h-compact: 96px; }
  nav.wrap {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "logo . tools tools" "logo . links cta";
    column-gap: 24px;
    row-gap: 10px;
    align-content: center;
  }
  .logotype { grid-area: logo; align-self: center; }
  .nav-links { grid-area: links; margin: 0; gap: 24px; }
  .nav-tools { grid-area: tools; justify-self: end; margin: 0; }
  .nav-cta { grid-area: cta; justify-self: end; margin: 0; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .logo-img { height: 60px; }
  /* Téléphone : ligne 1 logo + boutons, ligne 2 rubriques + Nous contacter.
     Hauteurs = logo + espace + 2e ligne, plus une marge en haut et en bas pour que le logo ne colle pas au bord */
  :root { --header-h: 138px; --header-h-compact: 108px; }
  nav.wrap {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo . tools" "links links cta";
    column-gap: 12px;
    row-gap: 8px;
  }
  .is-scrolled header .logo-img { height: 40px; }
  .nav-cta { padding: 9px 14px; }
  .nav-links { gap: 18px; }
  .nav-links > a { padding: 6px 0; font-weight: 500; }
  .nav-tools { gap: 8px; }
  .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
  .wind-lines { top: calc(var(--header-h) - 10px + env(safe-area-inset-top, 0px)); width: calc(100% - 20px); }
  .hero { padding: 48px 0 0; }
  .hero-mountains { margin-top: 24px; }
  section { padding: 60px 0; }
  #apercu { padding: 48px 0; }
  #expertises { padding-bottom: 28px; }
  .overview-grid { grid-template-columns: 1fr; gap: 16px; }
  .overview-card { padding: 24px 22px 22px; }
  .expertise-grid { grid-template-columns: 1fr; gap: 20px; }
  .split { grid-template-columns: 1fr; }
  .split > :first-child { padding-right: 0; padding-bottom: 28px; }
  .split > :last-child { padding-left: 0; padding-top: 28px; border-left: none; border-top: 1px solid var(--line); }
  .hero p.lead br, .section-head h2 br { display: none; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .founder { padding: 24px 22px; }
  .founder-photo { width: 84px; height: 84px; }
  .consultant-cta { margin-top: 40px; padding: 24px 22px; }
  .legal { padding: 48px 0 60px; }
  .notfound { padding: 48px 0 0; }
}

/* Bouton clair / sombre */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
/* Lien LinkedIn du bandeau : même pastille ronde que le bouton clair / sombre */
.nav-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-linkedin:hover, .nav-linkedin:focus-visible { color: var(--ink); border-color: var(--ink-faint); }
.nav-linkedin svg { display: block; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Très petits écrans (téléphone pliant fermé, ~344 px) : le bandeau doit tenir sans déborder */
@media (max-width: 400px) {
  :root { --header-h: 124px; --header-h-compact: 102px; }
  .wrap { padding: 0 16px; }
  .logo-img { height: 50px; }
  .is-scrolled header .logo-img { height: 38px; }
  .nav-cta { padding: 8px 12px; font-size: 0.88rem; }
  .nav-links { gap: 12px; }
  .nav-links > a { font-size: 0.88rem; }
  .nav-tools { gap: 6px; }
  .theme-toggle, .nav-linkedin { width: 34px; height: 34px; }
  .lang-switch { height: 34px; }
  .lang-switch > * { padding: 7px 7px; }
}

/* ---------- Animations ----------
   Tout ce bloc est neutralisé si l'appareil demande « réduire les animations ». */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wind-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* Paysages : tout avance au rythme du vent */
@keyframes sea-drift { from { translate: -2.5% 0; } to { translate: 2.5% 0; } }
@keyframes sea-swell { from { transform: scale(1.08) translateY(0); } to { transform: scale(1.08) translateY(4.5%); } }
@keyframes sea-drift-back { from { translate: 1.2% 0; } to { translate: -1.2% 0; } }
@keyframes sea-swell-back { from { transform: scale(1.08) translateY(1.5%); } to { transform: scale(1.08) translateY(0); } }
/* haut de page : même houle, un peu plus ample en hauteur qu'en largeur */
@keyframes sea-drift-h { from { translate: -1.5% 0; } to { translate: 1.5% 0; } }
@keyframes sea-swell-h { from { transform: scale(1.05) translateY(0); } to { transform: scale(1.05) translateY(4%); } }
@keyframes sea-drift-back-h { from { translate: 0.8% 0; } to { translate: -0.8% 0; } }
@keyframes sea-swell-back-h { from { transform: scale(1.05) translateY(1.5%); } to { transform: scale(1.05) translateY(0); } }
/* arbres : le vent vient de la gauche, par bouffées */
@keyframes sway {
  0%, 100% { transform: skewX(0.8deg) rotate(-0.4deg); }
  30% { transform: skewX(-7deg) rotate(1.6deg); }
  52% { transform: skewX(-3.5deg) rotate(0.6deg); }
  76% { transform: skewX(-9deg) rotate(2.2deg); }
}
@keyframes sway-palm {
  0%, 100% { transform: rotate(-1.5deg) skewX(1deg); }
  30% { transform: rotate(6deg) skewX(-4deg); }
  52% { transform: rotate(2.5deg) skewX(-1.5deg); }
  76% { transform: rotate(8deg) skewX(-5deg); }
}
@keyframes cloud {
  0% { transform: translateX(0); opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { transform: translateX(520%); opacity: 0; }
}
@keyframes veil {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 0.85; }
  75% { opacity: 0.55; }
  100% { transform: translateX(450%); opacity: 0; }
}
/* un filet de vent file le long de sa courbe, puis laisse un temps de silence */
@keyframes gust {
  0% { stroke-dashoffset: 16; opacity: 0; }
  8% { opacity: 0.55; }
  52% { opacity: 0.4; }
  62%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
/* la girafe suit la crête d'un bord à l'autre de la carte, passe derrière la colline, puis revient
   (trajet calculé sur le relief de l'aquarelle : position, hauteur et inclinaison dans les pentes) */
@keyframes girafe-walk {
  0% { transform: translate(-1014.7%, -7.5%) scaleX(1) rotate(0.0deg); }
  2.00% { transform: translate(-1014.7%, -7.5%) scaleX(1) rotate(0.0deg); }
  3.05% { transform: translate(-941.8%, -7.5%) scaleX(1) rotate(0.0deg); }
  4.09% { transform: translate(-869.0%, -7.5%) scaleX(1) rotate(0.0deg); }
  5.14% { transform: translate(-796.1%, -7.5%) scaleX(1) rotate(0.0deg); }
  6.18% { transform: translate(-723.3%, -7.5%) scaleX(1) rotate(0.0deg); }
  7.23% { transform: translate(-650.4%, -7.5%) scaleX(1) rotate(0.0deg); }
  8.27% { transform: translate(-577.5%, -7.5%) scaleX(1) rotate(0.0deg); }
  9.32% { transform: translate(-504.7%, -7.5%) scaleX(1) rotate(0.0deg); }
  10.36% { transform: translate(-431.8%, -7.5%) scaleX(1) rotate(0.0deg); }
  11.41% { transform: translate(-359.0%, -7.5%) scaleX(1) rotate(0.0deg); }
  12.45% { transform: translate(-286.1%, -7.5%) scaleX(1) rotate(0.0deg); }
  13.50% { transform: translate(-213.2%, -7.8%) scaleX(1) rotate(0.4deg); }
  14.55% { transform: translate(-140.4%, -7.1%) scaleX(1) rotate(2.0deg); }
  15.59% { transform: translate(-67.5%, -4.9%) scaleX(1) rotate(3.8deg); }
  16.64% { transform: translate(5.3%, 0.3%) scaleX(1) rotate(7.6deg); }
  17.68% { transform: translate(78.2%, 4.9%) scaleX(1) rotate(3.9deg); }
  18.73% { transform: translate(151.1%, 6.5%) scaleX(1) rotate(1.2deg); }
  19.77% { transform: translate(223.9%, 3.5%) scaleX(1) rotate(-8.6deg); }
  20.82% { transform: translate(296.8%, -5.8%) scaleX(1) rotate(-9.0deg); }
  21.86% { transform: translate(369.7%, -11.2%) scaleX(1) rotate(-5.1deg); }
  22.91% { transform: translate(442.5%, -14.1%) scaleX(1) rotate(-4.3deg); }
  23.95% { transform: translate(515.4%, -18.7%) scaleX(1) rotate(-5.3deg); }
  25.00% { transform: translate(588.2%, -21.7%) scaleX(1) rotate(-0.2deg); }
  26.05% { transform: translate(661.1%, -18.8%) scaleX(1) rotate(7.7deg); }
  27.09% { transform: translate(734.0%, -9.4%) scaleX(1) rotate(14.1deg); }
  28.14% { transform: translate(806.8%, 4.0%) scaleX(1) rotate(15.7deg); }
  29.18% { transform: translate(879.7%, 15.9%) scaleX(1) rotate(12.7deg); }
  30.23% { transform: translate(952.5%, 24.6%) scaleX(1) rotate(9.9deg); }
  31.27% { transform: translate(1025.4%, 31.5%) scaleX(1) rotate(6.1deg); }
  32.32% { transform: translate(1098.3%, 35.1%) scaleX(1) rotate(3.6deg); }
  33.36% { transform: translate(1171.1%, 36.2%) scaleX(1) rotate(-0.3deg); }
  34.41% { transform: translate(1244.0%, 34.2%) scaleX(1) rotate(-9.4deg); }
  35.45% { transform: translate(1316.8%, 22.5%) scaleX(1) rotate(-14.2deg); }
  36.50% { transform: translate(1389.7%, 8.7%) scaleX(1) rotate(-16.0deg); }
  37.55% { transform: translate(1462.6%, -4.5%) scaleX(1) rotate(-16.0deg); }
  38.59% { transform: translate(1535.4%, -20.2%) scaleX(1) rotate(-16.0deg); }
  39.64% { transform: translate(1608.3%, -38.8%) scaleX(1) rotate(-16.0deg); }
  40.68% { transform: translate(1681.1%, -54.8%) scaleX(1) rotate(-16.0deg); }
  41.73% { transform: translate(1754.0%, -69.4%) scaleX(1) rotate(-13.6deg); }
  42.77% { transform: translate(1826.9%, -79.1%) scaleX(1) rotate(-12.2deg); }
  43.82% { transform: translate(1899.7%, -90.3%) scaleX(1) rotate(-8.9deg); }
  44.86% { transform: translate(1972.6%, -95.7%) scaleX(1) rotate(-6.9deg); }
  45.91% { transform: translate(2045.5%, -101.6%) scaleX(1) rotate(-6.2deg); }
  46.95% { transform: translate(2118.3%, -106.1%) scaleX(1) rotate(-6.8deg); }
  48.00% { transform: translate(2191.2%, -111.8%) scaleX(1) rotate(-6.8deg); }
  50% { transform: translate(2191.2%, -111.8%) scaleX(-1) rotate(-6.8deg); }
  52.00% { transform: translate(2191.2%, -111.8%) scaleX(-1) rotate(6.8deg); }
  53.05% { transform: translate(2118.3%, -106.1%) scaleX(-1) rotate(6.8deg); }
  54.09% { transform: translate(2045.5%, -101.6%) scaleX(-1) rotate(6.2deg); }
  55.14% { transform: translate(1972.6%, -95.7%) scaleX(-1) rotate(6.9deg); }
  56.18% { transform: translate(1899.7%, -90.3%) scaleX(-1) rotate(8.9deg); }
  57.23% { transform: translate(1826.9%, -79.1%) scaleX(-1) rotate(12.2deg); }
  58.27% { transform: translate(1754.0%, -69.4%) scaleX(-1) rotate(13.6deg); }
  59.32% { transform: translate(1681.1%, -54.8%) scaleX(-1) rotate(16.0deg); }
  60.36% { transform: translate(1608.3%, -38.8%) scaleX(-1) rotate(16.0deg); }
  61.41% { transform: translate(1535.4%, -20.2%) scaleX(-1) rotate(16.0deg); }
  62.45% { transform: translate(1462.6%, -4.5%) scaleX(-1) rotate(16.0deg); }
  63.50% { transform: translate(1389.7%, 8.7%) scaleX(-1) rotate(16.0deg); }
  64.55% { transform: translate(1316.8%, 22.5%) scaleX(-1) rotate(14.2deg); }
  65.59% { transform: translate(1244.0%, 34.2%) scaleX(-1) rotate(9.4deg); }
  66.64% { transform: translate(1171.1%, 36.2%) scaleX(-1) rotate(0.3deg); }
  67.68% { transform: translate(1098.3%, 35.1%) scaleX(-1) rotate(-3.6deg); }
  68.73% { transform: translate(1025.4%, 31.5%) scaleX(-1) rotate(-6.1deg); }
  69.77% { transform: translate(952.5%, 24.6%) scaleX(-1) rotate(-9.9deg); }
  70.82% { transform: translate(879.7%, 15.9%) scaleX(-1) rotate(-12.7deg); }
  71.86% { transform: translate(806.8%, 4.0%) scaleX(-1) rotate(-15.7deg); }
  72.91% { transform: translate(734.0%, -9.4%) scaleX(-1) rotate(-14.1deg); }
  73.95% { transform: translate(661.1%, -18.8%) scaleX(-1) rotate(-7.7deg); }
  75.00% { transform: translate(588.2%, -21.7%) scaleX(-1) rotate(0.2deg); }
  76.05% { transform: translate(515.4%, -18.7%) scaleX(-1) rotate(5.3deg); }
  77.09% { transform: translate(442.5%, -14.1%) scaleX(-1) rotate(4.3deg); }
  78.14% { transform: translate(369.7%, -11.2%) scaleX(-1) rotate(5.1deg); }
  79.18% { transform: translate(296.8%, -5.8%) scaleX(-1) rotate(9.0deg); }
  80.23% { transform: translate(223.9%, 3.5%) scaleX(-1) rotate(8.6deg); }
  81.27% { transform: translate(151.1%, 6.5%) scaleX(-1) rotate(-1.2deg); }
  82.32% { transform: translate(78.2%, 4.9%) scaleX(-1) rotate(-3.9deg); }
  83.36% { transform: translate(5.3%, 0.3%) scaleX(-1) rotate(-7.6deg); }
  84.41% { transform: translate(-67.5%, -4.9%) scaleX(-1) rotate(-3.8deg); }
  85.45% { transform: translate(-140.4%, -7.1%) scaleX(-1) rotate(-2.0deg); }
  86.50% { transform: translate(-213.2%, -7.8%) scaleX(-1) rotate(-0.4deg); }
  87.55% { transform: translate(-286.1%, -7.5%) scaleX(-1) rotate(0.0deg); }
  88.59% { transform: translate(-359.0%, -7.5%) scaleX(-1) rotate(0.0deg); }
  89.64% { transform: translate(-431.8%, -7.5%) scaleX(-1) rotate(0.0deg); }
  90.68% { transform: translate(-504.7%, -7.5%) scaleX(-1) rotate(0.0deg); }
  91.73% { transform: translate(-577.5%, -7.5%) scaleX(-1) rotate(0.0deg); }
  92.77% { transform: translate(-650.4%, -7.5%) scaleX(-1) rotate(0.0deg); }
  93.82% { transform: translate(-723.3%, -7.5%) scaleX(-1) rotate(0.0deg); }
  94.86% { transform: translate(-796.1%, -7.5%) scaleX(-1) rotate(0.0deg); }
  95.91% { transform: translate(-869.0%, -7.5%) scaleX(-1) rotate(0.0deg); }
  96.95% { transform: translate(-941.8%, -7.5%) scaleX(-1) rotate(0.0deg); }
  98.00% { transform: translate(-1014.7%, -7.5%) scaleX(-1) rotate(0.0deg); }
  100% { transform: translate(-1014.7%, -7.5%) scaleX(1) rotate(0.0deg); }
}
@keyframes girafe-pas { from { transform: translateY(0); } to { transform: translateY(-1.6%); } }
@keyframes patte-a { from { transform: rotate(-19deg); } to { transform: rotate(19deg); } }
@keyframes patte-b { from { transform: rotate(19deg); } to { transform: rotate(-19deg); } }

@media (prefers-reduced-motion: no-preference) {
  .scene-mer .el-vague {
    transform-origin: 50% 100%;
    animation: sea-drift 9s ease-in-out infinite alternate, sea-swell 5s ease-in-out infinite alternate;
  }
  .scene-mer .scene-bg {
    transform-origin: 50% 100%;
    animation: sea-drift-back 11s ease-in-out infinite alternate, sea-swell-back 7s ease-in-out infinite alternate;
  }
  .hero-mountains > .sea-front {
    transform-origin: 50% 100%;
    animation: sea-drift-h 11s ease-in-out infinite alternate, sea-swell-h 6s ease-in-out infinite alternate;
  }
  .hero-mountains > .sea-back {
    transform-origin: 50% 100%;
    animation: sea-drift-back-h 14s ease-in-out infinite alternate, sea-swell-back-h 8s ease-in-out infinite alternate;
  }
  .el-acacia { animation: sway 6s ease-in-out infinite; }
  .el-petit-acacia { animation: sway 5s ease-in-out -2s infinite; }
  .el-arbre { animation: sway 6.5s ease-in-out -3s infinite; }
  .el-palmier { animation: sway-palm 5.5s ease-in-out -1s infinite; }
  .el-girafe { animation: girafe-walk 84s linear -12.8s infinite; filter: brightness(0.82) saturate(1.15); }   /* un peu plus soutenue pour qu'on la suive des yeux */
  .girafe-pas { animation: girafe-pas 0.4s ease-in-out infinite alternate; }
  .g-p1, .g-p4 { animation: patte-a 0.8s ease-in-out infinite alternate; }
  .g-p2, .g-p3 { animation: patte-b 0.8s ease-in-out infinite alternate; }
  .scene-cloud { animation: cloud 26s linear infinite; }
  .scene-cloud.c1 { top: -20%; animation-delay: -9s; }
  .scene-cloud.c2 { top: 2%; width: 19%; animation-duration: 34s; animation-delay: -27s; }
  .scene-veil { animation: veil 14s linear infinite; }
  .scene-veil.v1 { top: 44%; animation-delay: -3s; }
  .scene-veil.v2 { top: 64%; width: 38%; animation-duration: 18s; animation-delay: -11s; }
  .scene-veil.v3 { top: 24%; width: 24%; height: 14%; animation-duration: 22s; animation-delay: -16s; }
  .scene-wind path { animation: gust 7s linear infinite; }
  .scene-wind path:nth-child(2) { animation-duration: 9s; animation-delay: -4s; }
  .scene-wind path:nth-child(3) { animation-duration: 11s; animation-delay: -7.5s; }
  /* hors écran, les scènes sont mises en pause (classe posée par site.js) */
  .is-paused, .is-paused * { animation-play-state: paused !important; }

  /* Arrivée du hero au chargement */
  .hero-inner > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-inner > :nth-child(2) { animation-delay: 0.08s; }
  .hero-inner > :nth-child(3) { animation-delay: 0.16s; }
  .hero-inner > :nth-child(4) { animation-delay: 0.24s; }
  .hero-inner > :nth-child(5) { animation-delay: 0.32s; }
  .hero-mountains { animation: fade-in 1.2s ease 0.2s both; will-change: transform; }
  /* Lignes de vent : elles se tracent de gauche à droite */
  .wind-lines { animation: wind-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both; }

  /* Apparition au défilement : la classe .reveal est posée par site.js
     sur les blocs situés sous le premier écran, puis retirée une fois l'effet joué */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.is-in { opacity: 1; transform: none; }

  /* Fondu enchaîné au passage clair / sombre */
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.35s; }
  .theme-fade,
  .theme-fade *,
  .theme-fade *::before,
  .theme-fade *::after {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  header, nav.wrap, header .logo-img, .back-to-top { transition: none; }
}

/* Page de contrôle (version.html) */
.check { padding: 56px 0 72px; border-top: none; }
.check h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--primary); margin-bottom: 24px; }
.check-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.check-list li { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ink-faint); border-radius: var(--radius); }
.check-list li.ok { border-left-color: #2E8B57; }
.check-list li.ko { border-left-color: #C0392B; }
.check-list strong { display: block; color: var(--primary); }
.check-list span { color: var(--ink-soft); font-size: 0.95rem; }
.check .expertise-card { max-width: 420px; }