/* ===========================================================
   Auto-École Joël — feuille de style
   Mise en page originale : barre solide, grille en lignes numérotées,
   médias "carte postale" à cadre décalé, chronologie en zigzag.
   Aucune dépendance à un gabarit externe.
   =========================================================== */

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-latin_latin-ext-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-latin_latin-ext-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-latin_latin-ext-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-latin_latin-ext-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-latin_latin-ext-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-latin_latin-ext-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-latin_latin-ext-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --font-head: 'Raleway', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif;

  --navy: #061729;
  --navy-2: #0a2038;
  --navy-3: #0e2c49;
  --brand: #11568d;        /* bleu relevé sur le logo */
  --brand-light: #3f8fce;
  --sky: #8fc7f0;

  --gold: #f2a71b;
  --gold-dark: #cf8a0e;

  --paper: #f5f9fc;        /* blanc cassé utilisé sur les cartes claires */
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,0.74);
  --ink-faint: rgba(255,255,255,0.5);
  --edge: rgba(255,255,255,0.16);
  --edge-strong: rgba(255,255,255,0.34);
  --card: #0a2138;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--navy);
  overflow-x: hidden;
  min-height: 100%;
}
/* "overflow-x: hidden" fait de html/body un conteneur de défilement, ce qui
   casse "position: sticky" pour tout le contenu (la vitrine 3D de l'accueil
   ne se collait plus à l'écran). "clip" bloque le débordement horizontal
   sans créer ce conteneur : le sticky refonctionne. La règle "hidden"
   au-dessus reste comme repli pour les navigateurs sans "clip". */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Fond : grille + halos dérivants ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1200px 700px at 14% -8%, rgba(63,143,206,0.28), transparent 60%),
    radial-gradient(900px 640px at 96% 18%, rgba(242,167,27,0.10), transparent 55%),
    linear-gradient(180deg, #040f1c 0%, #071b30 45%, #0a2038 100%);
}
.backdrop::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(1100px 720px at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(1100px 720px at 50% 0%, #000 0%, transparent 72%);
}
.backdrop-blob {
  position: absolute;
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.34;
  animation: driftBlob 26s ease-in-out infinite;
}
.backdrop-blob.b1 { top: -10%; left: -10%; background: var(--brand-light); }
.backdrop-blob.b2 { bottom: -14%; right: -8%; background: var(--gold); opacity: 0.14; animation-duration: 32s; animation-delay: -8s; }
@keyframes driftBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 5%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .backdrop-blob { animation: none; } }

/* ---------- Barre de navigation ---------- */
.topbar {
  position: sticky; top: 0; z-index: 300;
  border-bottom: 1px solid var(--edge);
  background: rgba(6, 16, 28, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 0.7rem 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; }
/* Nouveau logo (blason rond) : fond découpé sur le cercle, transparent
   partout ailleurs — jamais de carré blanc autour, même sur fond sombre. */
.brand-mark {
  width: 40px; height: 40px; aspect-ratio: 1 / 1; flex: none; border-radius: 50%;
  background: url('../img/site/logo-badge.png') center / contain no-repeat;
}
.brand-word { display: flex; flex-direction: column; line-height: 1.15; }
.brand-word b { font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; color: #fff; }
.brand-word span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky); }

.menu { display: flex; align-items: center; gap: 0.2rem; }
.menu a {
  position: relative;
  padding: 0.6rem 0.9rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-dim);
}
.menu a::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.32rem;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.menu a:hover, .menu a.is-active { color: #fff; }
.menu a.is-active::after, .menu a:hover::after { transform: scaleX(1); }

.topbar-actions { display: flex; align-items: center; gap: 0.8rem; }
.tel-chip { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 700; color: var(--ink-dim); }
.tel-chip svg { width: 16px; height: 16px; fill: none; stroke: var(--sky); stroke-width: 2; }

.burger {
  display: none; width: 42px; height: 42px; border-radius: 8px;
  border: 1px solid var(--edge); background: rgba(255,255,255,0.05);
  position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.burger span { top: 20px; }
.burger span::before { content: ""; top: -7px; }
.burger span::after { content: ""; top: 7px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(7px) rotate(45deg); }
.burger.is-open span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .menu, .tel-chip { display: none; }
  .burger { display: block; }
}

.drawer-overlay {
  position: fixed; inset: 0; z-index: 350;
  background: rgba(2,8,15,0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 360;
  width: min(84vw, 340px);
  background: var(--navy-2);
  border-left: 1px solid var(--edge);
  padding: 5.5rem 1.6rem 2rem;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.22,.7,.24,1);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  padding: 1rem 0.2rem; border-bottom: 1px solid var(--edge);
  font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: #fff;
  display: flex; align-items: baseline; gap: 0.9rem;
}
.drawer a em { font-style: normal; font-size: 0.7rem; color: var(--sky); font-weight: 700; }
.drawer-close {
  position: absolute; top: 1.2rem; right: 1.4rem;
  width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid var(--edge); background: rgba(255,255,255,0.05); color: #fff;
  font-size: 1.1rem;
}

/* ---------- Conteneurs ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.block { padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; max-width: 1240px; margin: 0 auto; }
.block--tight { padding-top: 0; }

.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1rem;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--gold); }

.block-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.4rem; }
.block-head h2 { font-family: var(--font-head); font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; }
.block-head p { margin: 0.4rem 0 0; color: var(--ink-dim); max-width: 46ch; font-size: 0.96rem; line-height: 1.55; }
.block-index { font-family: var(--font-head); font-size: 3.6rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1px var(--edge-strong); line-height: 1; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 48px; padding: 0 1.6rem; border-radius: 9px;
  font-size: 0.9rem; font-weight: 800; letter-spacing: 0.01em;
  border: 1px solid transparent; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-fill { background: var(--gold); color: #201200; }
.btn-fill:hover { background: #ffb930; }
.btn-line { background: transparent; border-color: var(--edge-strong); color: #fff; }
.btn-line:hover { background: rgba(255,255,255,0.08); }

/* ---------- Hero ---------- */
.hero { padding: 3.2rem 1.5rem clamp(3rem, 7vw, 5rem); max-width: 1240px; margin: 0 auto; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.02;
  color: #fff; margin: 0 0 1.1rem;
}
.hero-title span { color: var(--sky); }
.hero-lead { font-size: 1.05rem; line-height: 1.68; color: var(--ink-dim); max-width: 46ch; margin: 0 0 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.4rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0 2.2rem; }
.hero-stats div { padding: 0.7rem 0; border-top: 1px solid var(--edge); min-width: 120px; }
.hero-stats b { display: block; font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: #fff; }
.hero-stats span { font-size: 0.78rem; color: var(--ink-dim); }

/* --- Scène du logo 3D --- */
.stage { position: relative; display: grid; place-items: center; min-height: 340px; }

/* --- Logo en 3D véritable : plusieurs calques du même visuel, décalés en
   profondeur (translateZ), forment une plaque qui a une épaisseur réelle
   une fois tournée — pas un simple aplat qui pivote. --- */
/* Perspective très resserrée : plus la valeur est petite, plus les faces
   proches de la caméra grossissent et celles qui s'éloignent rétrécissent —
   c'est ce contraste qui vend l'épaisseur pendant la rotation. */
.logo3d-scene { perspective: 700px; display: grid; place-items: center; }
.logo3d-shadow {
  width: clamp(220px, 30vw, 370px); height: 22px; margin-top: -2px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 72%);
  animation: logoShadow 6s ease-in-out infinite;
}
/* Aucune inclinaison fixe : au repos, le logo doit être pile de face. La
   tranche ne se voit donc pas à l'arrêt — seulement pendant la rotation,
   déclenchée par la proximité de la souris (logo3d-proximity.js). */
.logo3d-tilt { transform-style: preserve-3d; }
/* Le flottement (translateY) et la rotation (rotateY) portent chacun sur un
   élément différent : les deux animent "transform", et sur un même élément
   la seconde écraserait purement et simplement la première — c'est ce qui
   empêchait la rotation de s'exécuter. */
.logo3d-float {
  transform-style: preserve-3d;
  animation: logoBob 6s ease-in-out infinite;
}
.logo3d {
  width: clamp(240px, 32vw, 380px);
  aspect-ratio: 1 / 1;
  position: relative;
  transform-style: preserve-3d;
  /* Position de repos explicite : la rotation n'est plus pilotée par une
     @keyframes CSS mais par logo3d-proximity.js (Web Animations API), pour
     pouvoir la ramener en douceur à cette position exacte quand la souris
     s'éloigne, plutôt que de la figer au milieu du tour. */
  transform: rotateY(0deg);
  /* Invisible tant que logo3d.js n'a pas fini de décoder l'image et posé
     ".is-ready" : les 14 calques empilés pour l'effet d'épaisseur décodent
     chacun un visuel en haute résolution, ce qui pouvait laisser voir un
     carré blanc le temps que tout charge. On fait plutôt apparaître le
     logo déjà prêt, en fondu. */
  opacity: 0;
  transition: opacity 0.35s ease;
}
.logo3d.is-ready { opacity: 1; }
.logo3d-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
@keyframes logoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes logoShadow { 0%, 100% { transform: scaleX(1); opacity: 0.5; } 50% { transform: scaleX(0.7); opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) {
  .logo3d-float, .logo3d-shadow { animation: none; }
  /* Le logo reste pile de face, comme au repos pour tout le monde. */
}

/* ---------- Marquee CSS pur ---------- */
.marquee { border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marqueeMove 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1rem 1.4rem; font-size: 0.86rem; font-weight: 700; white-space: nowrap;
  color: var(--ink-dim); border-right: 1px solid var(--edge);
}
.marquee-track span b { color: var(--gold); font-weight: 800; }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Lignes numérotées (formations) ---------- */
.rowlist { border-top: 1px solid var(--edge); }
.rowlist-item {
  display: grid; grid-template-columns: 3.4rem 2.6rem 1fr auto;
  align-items: center; gap: 1.2rem;
  padding: 1.5rem 0.5rem; border-bottom: 1px solid var(--edge);
  transition: background 0.2s ease;
}
.rowlist-item:hover { background: rgba(255,255,255,0.03); }
.rowlist-num { font-family: var(--font-head); font-size: 0.85rem; font-weight: 800; color: var(--ink-faint); }
.rowlist-ico {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(63,143,206,0.14); border: 1px solid rgba(143,199,240,0.28); color: var(--sky);
}
.rowlist-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rowlist-body h3 { margin: 0 0 0.3rem; font-family: var(--font-head); font-size: 1.06rem; font-weight: 700; color: #fff; }
.rowlist-body p { margin: 0; font-size: 0.88rem; color: var(--ink-dim); line-height: 1.5; max-width: 60ch; }
.rowlist-go { color: var(--ink-faint); font-weight: 800; transition: transform 0.2s ease, color 0.2s ease; }
.rowlist-item:hover .rowlist-go { color: var(--gold); transform: translateX(4px); }
@media (max-width: 700px) {
  .rowlist-item { grid-template-columns: 2.4rem 1fr; }
  .rowlist-ico, .rowlist-go { display: none; }
}

/* ---------- Média "carte postale" à cadre décalé ---------- */
.postcard { position: relative; }
.postcard::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 2px solid var(--gold); border-radius: 4px; z-index: -1;
}
.postcard img { border-radius: 4px; width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: 0 22px 46px rgba(1,6,12,0.55); }

.feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 3.6rem); align-items: center; }
.feature.is-reverse .postcard { order: 2; }
.feature-tag {
  display: inline-flex; padding: 0.35rem 0.8rem; border-radius: 5px;
  background: rgba(242,167,27,0.14); border: 1px solid rgba(242,167,27,0.32);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1rem;
}
.feature h3 { font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; color: #fff; margin: 0 0 0.9rem; }
.feature p { color: var(--ink-dim); line-height: 1.7; font-size: 0.98rem; margin: 0 0 1rem; }
.feature ul { display: grid; gap: 0.6rem; margin-top: 1rem; }
.feature li { display: flex; gap: 0.6rem; font-size: 0.92rem; color: var(--ink-dim); }
.feature li::before { content: "—"; color: var(--gold); font-weight: 800; }
@media (max-width: 860px) {
  .feature, .feature.is-reverse .postcard { grid-template-columns: 1fr; order: 0; }
  .postcard { max-width: 420px; margin: 0 auto 1.5rem; }
}

/* ---------- Citation / statistiques ---------- */
.quote-block { text-align: center; max-width: 780px; margin: 0 auto; }
.quote-block blockquote {
  font-family: var(--font-head); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800;
  color: #fff; margin: 0; letter-spacing: -0.01em; line-height: 1.28;
}
.quote-block blockquote em { font-style: normal; color: var(--gold); }
.quote-block p { color: var(--ink-dim); line-height: 1.7; margin: 1.4rem auto 0; max-width: 58ch; }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; margin-top: 3rem; }
.stat-cell { padding: 1.5rem 1rem; text-align: center; border-left: 1px solid var(--edge); }
.stat-cell:first-child { border-left: none; }
.stat-cell b { display: block; font-family: var(--font-head); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; color: #fff; }
.stat-cell span { font-size: 0.78rem; color: var(--ink-dim); }
@media (max-width: 700px) { .stat-strip { grid-template-columns: 1fr 1fr; } .stat-cell:nth-child(3) { border-left: none; } }

/* ---------- Puces documents ---------- */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1.1rem; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--edge);
  font-size: 0.88rem; font-weight: 700; color: var(--ink-dim);
}
.chip svg { width: 18px; height: 18px; fill: none; stroke: var(--sky); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- CTA ---------- */
.cta {
  border-radius: 12px; border: 1px solid var(--edge-strong);
  background: linear-gradient(120deg, var(--navy-3), var(--brand) 140%);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem;
}
.cta h2 { font-family: var(--font-head); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; color: #fff; margin: 0 0 0.4rem; }
.cta p { margin: 0; color: var(--ink-dim); font-size: 0.94rem; max-width: 40ch; }

/* ---------- Zigzag (historique) ---------- */
.zigzag { position: relative; }
.zigzag::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--edge); transform: translateX(-0.5px); }
.zz-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 2.2rem 0; align-items: center; }
.zz-item .zz-year { text-align: right; }
.zz-item:nth-child(even) .zz-year { order: 2; text-align: left; }
.zz-item:nth-child(even) .zz-text { order: 1; text-align: right; }
.zz-year { font-family: var(--font-head); font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; color: var(--sky); }
.zz-text p { margin: 0; color: var(--ink-dim); line-height: 1.7; font-size: 0.96rem; }
.zz-dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); box-shadow: 0 0 0 5px var(--navy), 0 0 0 6px var(--edge-strong); }
@media (max-width: 760px) {
  .zigzag::before { left: 10px; }
  .zz-item, .zz-item:nth-child(even) { grid-template-columns: 1fr; gap: 0.4rem; padding-left: 2.2rem; }
  .zz-item .zz-year, .zz-item:nth-child(even) .zz-year, .zz-item:nth-child(even) .zz-text { text-align: left; order: 0; }
  .zz-dot { left: 10px; }
}

/* ---------- Galerie ---------- */
.grid-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.grid-gallery figure { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--edge); aspect-ratio: 4/3; }
.grid-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.grid-gallery figure:hover img { transform: scale(1.06); }
.grid-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.55rem 0.7rem;
  background: rgba(6,16,28,0.86); border-top: 1px solid var(--edge);
  font-size: 0.72rem; font-weight: 700; color: #fff;
}
@media (max-width: 980px) { .grid-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .grid-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Équipe ---------- */
.people-row { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.value-list { display: grid; gap: 1rem; margin-top: 1.6rem; }
.value-item { display: flex; gap: 0.9rem; padding: 1rem; border: 1px solid var(--edge); border-radius: 9px; background: rgba(255,255,255,0.02); }
.value-item svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.value-item b { display: block; color: #fff; font-size: 0.96rem; }
.value-item span { display: block; color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.2rem; line-height: 1.5; }
@media (max-width: 860px) { .people-row { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.info-card { border: 1px solid var(--edge); border-radius: 10px; padding: 1.1rem 1.2rem; display: flex; gap: 0.9rem; margin-bottom: 0.8rem; background: rgba(255,255,255,0.02); }
.info-card svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--sky); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-card b { display: block; color: #fff; font-size: 0.92rem; }
.info-card a, .info-card span { display: block; color: var(--ink-dim); font-size: 0.86rem; margin-top: 0.15rem; }
.info-card a:hover { color: #fff; }
.social-row { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
.social-row a { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--edge); color: var(--sky); transition: background .2s, color .2s; }
.social-row a:hover { background: var(--brand); color: #fff; }
.social-row svg { width: 18px; height: 18px; fill: currentColor; }

.map-box { border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; margin-top: 1rem; }
.map-box iframe { width: 100%; height: 300px; border: 0; display: block; filter: grayscale(0.2) invert(0.92) contrast(0.9); }

.form-card { border: 1px solid var(--edge); border-radius: 10px; padding: clamp(1.4rem, 3vw, 2.2rem); background: rgba(255,255,255,0.02); }
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; color: var(--ink-dim); }
.field input, .field textarea {
  padding: 0.8rem 0.95rem; border-radius: 8px; border: 1px solid var(--edge);
  background: rgba(255,255,255,0.04); color: #fff; font-family: inherit; font-size: 0.92rem;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sky); }
.field textarea { min-height: 120px; resize: vertical; }
.field-note { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5; margin: -0.4rem 0 1.1rem; }

.hours-card { border: 1px solid var(--edge); border-radius: 10px; padding: 1.3rem 1.4rem; margin-top: 1rem; background: rgba(255,255,255,0.02); }
.hours-card h3 { font-family: var(--font-head); font-size: 0.98rem; font-weight: 800; color: #fff; margin: 0 0 1rem; }
.hrow { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-top: 1px solid var(--edge); font-size: 0.86rem; }
.hrow:first-of-type { border-top: none; }
.hrow.is-today { color: var(--gold); font-weight: 800; }
.hrow .off { color: var(--ink-faint); font-style: italic; }

/* ---------- Mentions légales ---------- */
.legal-grid { display: grid; gap: 1.2rem; }
.legal-card { border: 1px solid var(--edge); border-radius: 10px; padding: 1.5rem; background: rgba(255,255,255,0.02); }
.legal-card h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 0.9rem; }
.legal-line { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; padding: 0.5rem 0; border-top: 1px solid var(--edge); font-size: 0.9rem; }
.legal-line:first-of-type { border-top: none; }
.legal-line dt { min-width: 15rem; color: var(--ink-faint); font-weight: 700; }
.legal-line dd { margin: 0; color: var(--ink-dim); }

/* ---------- En-tête de page interne ---------- */
.pagehead { padding: clamp(2.4rem, 6vw, 3.6rem) 1.5rem 1rem; max-width: 1240px; margin: 0 auto; }
/* Logo 3D en tête d'une page interne : même mécanique que sur l'accueil,
   simplement plus petit et sans occuper toute la largeur. */
.pagehead-logo { display: flex; justify-content: center; margin-bottom: 1.6rem; min-height: 0; }
.pagehead--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pagehead--center .kicker { justify-content: center; }
.pagehead--center .kicker::after { content: ""; width: 22px; height: 2px; background: var(--gold); }
.pagehead--center p:not(.kicker) { margin-left: auto; margin-right: auto; }
.pagehead-logo .logo3d { width: clamp(160px, 20vw, 240px); }
.pagehead-logo .logo3d-shadow { width: clamp(130px, 17vw, 190px); }
.pagehead h1 { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: #fff; margin: 0 0 0.8rem; letter-spacing: -0.02em; }
.pagehead p { color: var(--ink-dim); font-size: 1rem; line-height: 1.6; max-width: 56ch; margin: 0; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--edge); background: rgba(4,12,22,0.6); }
/* --- Rangée supérieure : marque + réseaux sociaux --- */
.foot-top {
  max-width: 1240px; margin: 0 auto; padding: 2.6rem 1.5rem 2rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem;
  border-bottom: 1px solid var(--edge);
}
.foot-brand { display: flex; gap: 0.75rem; align-items: center; transition: opacity 0.2s ease; }
a.foot-brand:hover { opacity: 0.82; }
.foot-brand .brand-mark { width: 38px; height: 38px; }
.foot-brand b { display: block; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }
.foot-brand span { display: block; font-size: 0.7rem; color: var(--sky); letter-spacing: 0.1em; text-transform: uppercase; }
.foot-social { display: flex; gap: 0.6rem; }
.foot-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--edge); background: rgba(255,255,255,0.02); color: var(--sky);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.foot-social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.foot-social svg { width: 18px; height: 18px; fill: currentColor; }

/* --- Contact / Navigation --- */
.foot-grid { max-width: 1240px; margin: 0 auto; padding: 2.2rem 1.5rem 1rem; display: grid; grid-template-columns: repeat(2, minmax(180px, 260px)); gap: 2.4rem; }
.foot-col h4 { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1rem; }
.foot-col a, .foot-col span { display: block; font-size: 0.88rem; color: var(--ink-dim); margin-bottom: 0.65rem; }
.foot-col a:hover { color: #fff; }

.foot-bottom { max-width: 1240px; margin: 0 auto; padding: 1.1rem 1.5rem 2rem; border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.7rem; font-size: 0.78rem; color: var(--ink-faint); }
.foot-bottom a { color: var(--ink-faint); }
.foot-bottom a:hover { color: #fff; }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- Hero centré (accueil) — logo en haut au centre ---------- */
.hero--center {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 760px;
}
.hero--center .stage { min-height: 0; margin-bottom: 1.6rem; }
.hero--center .hero-lead { margin-left: auto; margin-right: auto; }
.hero--center .hero-actions { justify-content: center; }
.hero--center .hero-stats { justify-content: center; }

/* ---------- Grille "bento" (formations, accueil) ---------- */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bento-card {
  position: relative;
  padding: 2rem 1.7rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--edge);
  transition: border-color 0.22s ease, transform 0.25s cubic-bezier(.2,.7,.3,1), background 0.22s ease;
}
.bento-card:hover { border-color: var(--edge-strong, rgba(255,255,255,0.34)); background: rgba(255,255,255,0.045); transform: translateY(-4px); }
.bento-num {
  position: absolute; top: 1.4rem; right: 1.6rem;
  font-family: var(--font-head); font-size: 2.4rem; font-weight: 800;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.18);
}
.bento-ico {
  width: 52px; height: 52px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(63,143,206,0.14); border: 1px solid rgba(143,199,240,0.28); color: var(--sky);
  margin-bottom: 1.3rem;
}
.bento-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bento-card h3 { font-family: var(--font-head); font-size: 1.14rem; font-weight: 800; color: #fff; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.bento-card p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-dim); margin: 0 0 1.1rem; max-width: 42ch; }
.bento-go { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 760px) { .bento { grid-template-columns: 1fr; } }

/* ---------- Bannière plein cadre (entreprise, accueil) ---------- */
.banner-feature {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 340px;
  display: flex; align-items: flex-end;
  border: 1px solid var(--edge);
}
.banner-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-feature::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(4,10,18,0.94) 10%, rgba(4,10,18,0.65) 45%, rgba(4,10,18,0.18) 80%);
}
.banner-body { position: relative; z-index: 1; padding: clamp(1.6rem, 4vw, 2.6rem); max-width: 640px; }
.banner-body .feature-tag { margin-bottom: 0.9rem; }
.banner-body h3 { font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; color: #fff; margin: 0 0 0.8rem; }
.banner-body p { color: rgba(255,255,255,0.86); line-height: 1.65; font-size: 0.96rem; margin: 0 0 0.9rem; }
.banner-body ul { display: grid; gap: 0.5rem; margin: 0.8rem 0 1.2rem; }
.banner-body li { display: flex; gap: 0.6rem; font-size: 0.9rem; color: rgba(255,255,255,0.86); }
.banner-body li::before { content: "—"; color: var(--gold); font-weight: 800; }

/* ---------- Rangée de badges (statistiques) ---------- */
.badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 2.2rem; margin-top: 2.4rem; }
.badge-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 96px; }
.badge-circle {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--edge); background: rgba(255,255,255,0.02);
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #fff;
}
.badge-item span { font-size: 0.76rem; color: var(--ink-dim); text-align: center; max-width: 11ch; }

/* ---------- Panneau englobant (philosophie) ---------- */
.panel-frame { border: 1px solid var(--edge); border-radius: 18px; padding: clamp(2rem, 5vw, 3.4rem); background: rgba(255,255,255,0.015); }

/* ---------- Liste numérotée de documents ---------- */
.doc-list { border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; }
.doc-row { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-top: 1px solid var(--edge); }
.doc-row:first-child { border-top: none; }
.doc-row-num { font-family: var(--font-head); font-weight: 800; color: var(--ink-faint); font-size: 0.85rem; min-width: 1.6rem; }
.doc-row-ico { flex: none; width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(63,143,206,0.12); border: 1px solid rgba(143,199,240,0.24); color: var(--sky); }
.doc-row-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.doc-row span:last-child { font-size: 0.92rem; font-weight: 700; color: #fff; }

/* ---------- Cartes de service (prestations) ---------- */
.svc-list { display: grid; gap: 1rem; }
.svc-card {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--edge); border-radius: 16px;
  background: rgba(255,255,255,0.02);
}
.svc-num {
  font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.2);
  min-width: 2.4rem;
}
.svc-body .feature-tag { margin-bottom: 0.7rem; }
.svc-body h3 { font-family: var(--font-head); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 800; color: #fff; margin: 0 0 0.6rem; }
.svc-body p { color: var(--ink-dim); line-height: 1.65; font-size: 0.93rem; margin: 0 0 0.7rem; }
.svc-body ul { display: grid; gap: 0.45rem; margin-top: 0.6rem; }
.svc-body li { display: flex; gap: 0.55rem; font-size: 0.88rem; color: var(--ink-dim); }
.svc-body li::before { content: "—"; color: var(--gold); font-weight: 800; }
.svc-thumb { width: 148px; height: 148px; border-radius: 12px; overflow: hidden; flex: none; border: 1px solid var(--edge); }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .svc-card { grid-template-columns: auto 1fr; }
  .svc-thumb { display: none; }
}
@media (max-width: 560px) {
  .svc-card { grid-template-columns: 1fr; }
  .svc-num { display: none; }
}

/* ---------- Révélation au défilement ---------- */
[data-in] { opacity: 1; transform: none; }
.js-in [data-in] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js-in [data-in].is-shown { opacity: 1; transform: none; }
[data-in-d="1"] { transition-delay: .08s; }
[data-in-d="2"] { transition-delay: .16s; }
[data-in-d="3"] { transition-delay: .24s; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }