/* =====================================================================
   Bibliothèque d'animations premium
   Chargée après style.css — n'écrase rien, ajoute uniquement des effets.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Préférences d'accessibilité — respect de "réduire les animations"
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   1. Barre de progression de lecture (haut de page)
   --------------------------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--emerald-500), var(--gold-400), var(--gold-600));
  z-index: 9999; transition: width .1s linear;
  box-shadow: 0 0 12px rgba(123, 192, 234, .6);
}

/* ---------------------------------------------------------------------
   2. Préchargeur / écran d'ouverture
   --------------------------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--emerald-950);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 26px;
  transition: opacity .7s ease, visibility .7s ease;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; }
.preloader__mark {
  width: 74px; height: 74px; border-radius: 18px; position: relative;
  background: linear-gradient(135deg, var(--emerald-600), var(--emerald-900));
  animation: preloadPulse 1.6s ease-in-out infinite;
}
.preloader__mark::after {
  content: ''; position: absolute; inset: 13px; border: 2px solid var(--gold-400); border-radius: 9px;
  animation: preloadSpin 2.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes preloadPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(123,192,234,.35); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 22px rgba(123,192,234,0); }
}
@keyframes preloadSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.preloader__bar { width: 190px; height: 2px; background: rgba(255,255,255,.12); overflow: hidden; border-radius: 2px; }
.preloader__bar span {
  display: block; height: 100%; width: 40%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  animation: preloadSlide 1.2s ease-in-out infinite;
}
@keyframes preloadSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------------------------------------------------------------------
   4. Révélations au scroll — variantes directionnelles
   --------------------------------------------------------------------- */
[data-anim] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1),
              filter .9s ease, clip-path 1.1s cubic-bezier(.76,0,.24,1);
  will-change: opacity, transform;
}
[data-anim].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

[data-anim="up"]        { transform: translateY(60px); }
[data-anim="down"]      { transform: translateY(-50px); }
[data-anim="left"]      { transform: translateX(-70px); }
[data-anim="right"]     { transform: translateX(70px); }
[data-anim="zoom"]      { transform: scale(.82); }
[data-anim="zoom-out"]  { transform: scale(1.15); }
[data-anim="flip"]      { transform: perspective(1000px) rotateX(-38deg); transform-origin: bottom; }
[data-anim="flip-y"]    { transform: perspective(1000px) rotateY(35deg); }
[data-anim="rotate"]    { transform: rotate(-7deg) scale(.9); }
[data-anim="blur"]      { filter: blur(14px); transform: scale(1.04); }
[data-anim="curtain"]   { clip-path: inset(0 0 100% 0); transform: translateY(20px); }
[data-anim="wipe"]      { clip-path: inset(0 100% 0 0); }
[data-anim="skew"]      { transform: skewY(5deg) translateY(50px); }
[data-anim="fade"]      { transform: none; }

/* Délais en cascade */
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
[data-delay="6"] { transition-delay: .48s; }

/* ---------------------------------------------------------------------
   5. Texte animé lettre par lettre / mot par mot
   --------------------------------------------------------------------- */
.split-char, .split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(80%) rotate(6deg);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.is-in .split-char, .is-in .split-word { opacity: 1; transform: none; }
.split-line { display: block; overflow: hidden; }

/* Effet de soulignement animé sur les titres */
.underline-grow { position: relative; display: inline-block; }
.underline-grow::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  transition: width .9s cubic-bezier(.16,1,.3,1) .25s;
}
.is-in .underline-grow::after, .underline-grow.is-in::after { width: 100%; }

/* Dégradé animé sur texte d'accent */
.text-shimmer {
  background: linear-gradient(100deg, var(--gold-600) 20%, #C9E5F7 40%, var(--gold-400) 55%, var(--gold-600) 75%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmerMove 5s linear infinite;
}
@keyframes shimmerMove { to { background-position: 250% center; } }

/* Machine à écrire */
.typewriter::after {
  content: '|'; margin-left: 2px; color: var(--gold-400);
  animation: caretBlink .9s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---------------------------------------------------------------------
   6. Parallaxe
   --------------------------------------------------------------------- */
[data-parallax] { will-change: transform; }

.parallax-bg {
  position: absolute; inset: -12% 0; z-index: 0;
  background-size: cover; background-position: center; will-change: transform;
}

/* ---------------------------------------------------------------------
   7. Tilt 3D au survol (cartes)
   --------------------------------------------------------------------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change: transform;
}
.tilt__inner { transform: translateZ(28px); transition: transform .35s ease; }
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.28), transparent 55%);
  transition: opacity .3s ease;
}
.tilt:hover .tilt-glare { opacity: 1; }

/* ---------------------------------------------------------------------
   8. Boutons magnétiques + effets
   --------------------------------------------------------------------- */
.magnetic { will-change: transform; transition: transform .35s cubic-bezier(.2,.8,.2,1); }

/* Balayage lumineux */
.btn::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-22deg); transition: left .75s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::before { left: 130%; }

/* Onde au clic */
.ripple-wave {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.4); pointer-events: none;
  animation: rippleOut .65s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes rippleOut { to { transform: scale(3.2); opacity: 0; } }

/* Pulsation d'appel à l'action */
.pulse-cta { animation: ctaPulse 2.6s cubic-bezier(.66,0,.34,1) infinite; }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(123,192,234,.25), 0 0 0 0 rgba(123,192,234,.5); }
  50% { box-shadow: 0 10px 30px rgba(123,192,234,.25), 0 0 0 16px rgba(123,192,234,0); }
}

/* ---------------------------------------------------------------------
   9. Effets de survol sur cartes et images
   --------------------------------------------------------------------- */
.hover-lift { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease; }
.hover-lift:hover { transform: translateY(-12px) scale(1.015); box-shadow: 0 26px 60px rgba(15,48,87,.2); }

.hover-glow { transition: box-shadow .4s ease, transform .4s ease; }
.hover-glow:hover { box-shadow: 0 0 0 1px var(--gold-400), 0 18px 46px rgba(123,192,234,.28); }

/* Bordure lumineuse rotative */
.glow-border { position: relative; }
.glow-border::before {
  content: ''; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -1; opacity: 0;
  background: conic-gradient(from var(--ang, 0deg), transparent 0deg, var(--gold-400) 90deg, transparent 180deg);
  transition: opacity .4s ease; animation: angSpin 4s linear infinite;
}
.glow-border:hover::before { opacity: 1; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes angSpin { to { --ang: 360deg; } }

/* Zoom d'image lent au survol */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s ease; }
.img-zoom:hover img { transform: scale(1.12); filter: saturate(1.12); }

/* Révélation d'image par volet */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(120deg, var(--emerald-800), var(--emerald-950));
  transform-origin: right; transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(.76,0,.24,1);
}
.img-reveal.is-in::after { transform: scaleX(0); }

/* ---------------------------------------------------------------------
   10. Bandeau défilant (marquee)
   --------------------------------------------------------------------- */
.marquee {
  overflow: hidden; white-space: nowrap; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: inline-flex; gap: 54px; align-items: center; animation: marqueeRun 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item {
  font-family: var(--font-serif); font-size: 21px; color: rgba(255,255,255,.5);
  display: inline-flex; align-items: center; gap: 54px; white-space: nowrap;
  transition: color .3s ease;
}
.marquee__item:hover { color: var(--gold-400); }
.marquee__sep { color: var(--gold-500); font-size: 13px; }

/* ---------------------------------------------------------------------
   11. Formes flottantes / blobs décoratifs
   --------------------------------------------------------------------- */
.floating { animation: floatY 6s ease-in-out infinite; }
.floating--slow { animation-duration: 9s; }
.floating--delay { animation-delay: 1.4s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

.blob {
  position: absolute; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(46px); opacity: .32; pointer-events: none;
  animation: blobMorph 16s ease-in-out infinite;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0,0) rotate(0deg) scale(1); }
  33% { border-radius: 62% 38% 34% 66% / 58% 62% 38% 42%; transform: translate(26px,-22px) rotate(120deg) scale(1.09); }
  66% { border-radius: 35% 65% 57% 43% / 62% 36% 64% 38%; transform: translate(-20px,18px) rotate(240deg) scale(.94); }
}

/* Anneau orbital */
.orbit-ring {
  position: absolute; border: 1px solid rgba(123,192,234,.22); border-radius: 50%;
  animation: orbitSpin 26s linear infinite; pointer-events: none;
}
.orbit-ring::after {
  content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 14px var(--gold-400);
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   12. Navigation animée
   --------------------------------------------------------------------- */
.main-nav > ul > li > a { position: relative; }
.main-nav > ul > li > a::before {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px;
  background: linear-gradient(90deg, var(--emerald-600), var(--gold-500));
  transform: scaleX(0); transform-origin: right;
  transition: transform .42s cubic-bezier(.16,1,.3,1);
}
.main-nav > ul > li > a:hover::before,
.main-nav > ul > li > a.is-active::before { transform: scaleX(1); transform-origin: left; }
.btn-nav-contact::before { display: none; }

.site-header { transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .35s, box-shadow .35s; }
.site-header.is-stuck { background: rgba(255,255,255,.97); box-shadow: 0 8px 30px rgba(15,48,87,.1); }
.site-header.is-hidden { transform: translateY(-100%); }

/* Menu mobile en cascade */
.main-nav.is-open > ul > li {
  animation: navItemIn .5s cubic-bezier(.16,1,.3,1) both;
}
.main-nav.is-open > ul > li:nth-child(1) { animation-delay: .05s; }
.main-nav.is-open > ul > li:nth-child(2) { animation-delay: .11s; }
.main-nav.is-open > ul > li:nth-child(3) { animation-delay: .17s; }
.main-nav.is-open > ul > li:nth-child(4) { animation-delay: .23s; }
.main-nav.is-open > ul > li:nth-child(5) { animation-delay: .29s; }
.main-nav.is-open > ul > li:nth-child(6) { animation-delay: .35s; }
@keyframes navItemIn { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   13. Transition entre les pages
   --------------------------------------------------------------------- */
.page-transition {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background: linear-gradient(135deg, var(--emerald-800), var(--emerald-950));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s cubic-bezier(.76,0,.24,1);
}
.page-transition.is-active { transform: scaleY(1); transform-origin: bottom; }

body { animation: pageIn .7s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------
   14. Compteurs & chiffres clés
   --------------------------------------------------------------------- */
.counter-item { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.counter-item:hover { transform: translateY(-8px); }
.counter-item .value { display: inline-block; }
.counter-item.is-counting .value { animation: numberPop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes numberPop { 0% { transform: scale(.85); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------------
   15. Effets sur le hero
   --------------------------------------------------------------------- */
.hero__badge { position: relative; overflow: hidden; }
.hero__badge::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: badgeSweep 3.4s ease-in-out infinite;
}
@keyframes badgeSweep { 0% { left: -100%; } 55%, 100% { left: 160%; } }

.hero__card { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.hero__grid { animation: gridDrift 26s linear infinite; }
@keyframes gridDrift { to { background-position: 46px 46px; } }

/* Lignes lumineuses descendantes */
.light-beam {
  position: absolute; top: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(123,192,234,.45), transparent);
  animation: beamFall 5s ease-in-out infinite;
}
@keyframes beamFall {
  0% { transform: translateY(-100%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ---------------------------------------------------------------------
   16. Cartes services / réalisations — entrée séquencée
   --------------------------------------------------------------------- */
.service-card, .why-card, .real-card, .article-card, .album-card, .video-card, .team-card, .partner-card {
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .35s ease;
}
.service-card__num { transition: transform .4s cubic-bezier(.34,1.56,.64,1), background-color .35s; }
.service-card:hover .service-card__num {
  transform: rotate(360deg) scale(1.12); background: var(--gold-400); color: var(--emerald-950);
}

.real-card__overlay { transform: translateY(14px); transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.real-card:hover .real-card__overlay { transform: translateY(0); }

/* Icônes qui réagissent */
.why-card .icon-wrap, .pillar .icon, .contact-info-item .icon-wrap {
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .4s ease;
}
.why-card:hover .icon-wrap { transform: rotateY(180deg) scale(1.08); }
.pillar:hover .icon { transform: translateY(-6px) rotate(-10deg); }

/* ---------------------------------------------------------------------
   17. Formulaires animés
   --------------------------------------------------------------------- */
.form-group input, .form-group select, .form-group textarea {
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  box-shadow: 0 0 0 4px rgba(45,123,196,.12); transform: translateY(-2px);
}
.form-alert { animation: alertDrop .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes alertDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   18. Retour en haut & éléments flottants
   --------------------------------------------------------------------- */
.back-to-top { transition: all .4s cubic-bezier(.16,1,.3,1); }
.back-to-top:hover { transform: translateY(-6px) scale(1.1) rotate(360deg); }

/* ---------------------------------------------------------------------
   19. Témoignages
   --------------------------------------------------------------------- */
.testi-track { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.testi-card .quote-mark { transition: transform .5s cubic-bezier(.34,1.56,.64,1), color .4s; }
.testi-card:hover .quote-mark { transform: scale(1.25) rotate(-8deg); color: var(--gold-500); }
.testi-author .avatar { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.testi-card:hover .testi-author .avatar { transform: rotate(-12deg) scale(1.1); }

/* ---------------------------------------------------------------------
   20. Séparateur animé entre sections
   --------------------------------------------------------------------- */
.section-divider {
  height: 1px; background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
  position: relative; overflow: hidden;
}
.section-divider::after {
  content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  animation: dividerSweep 4.5s ease-in-out infinite;
}
@keyframes dividerSweep { 0% { left: -30%; } 60%, 100% { left: 110%; } }

/* ---------------------------------------------------------------------
   21. Chargement d'images (fondu)
   --------------------------------------------------------------------- */
img { transition: opacity .6s ease; }
img.img-loading { opacity: 0; }
img.img-loaded { opacity: 1; }

/* =====================================================================
   22. ATTERRISSAGE DES TEXTES — entrées type présentation
   Les mots/lettres arrivent puis se posent avec un léger rebond.
   ===================================================================== */

/* Conteneur : masque le débordement pendant l'atterrissage */
.land { display: block; }
.land-line { display: block; overflow: hidden; padding-bottom: .08em; }

/* --- Atterrissage depuis le haut (chute + rebond) --- */
.land-drop .split-char,
.land-drop .split-word {
  opacity: 0;
  transform: translateY(-120%) scale(1.35) rotate(-8deg);
  filter: blur(6px);
  transition: opacity .5s ease, transform .95s cubic-bezier(.18,1.5,.35,1), filter .5s ease;
}
.land-drop.is-in .split-char,
.land-drop.is-in .split-word { opacity: 1; transform: none; filter: none; }

/* --- Montée depuis le bas (glissement doux) --- */
.land-rise .split-char,
.land-rise .split-word {
  opacity: 0;
  transform: translateY(110%) rotate(5deg);
  transition: opacity .6s ease, transform .9s cubic-bezier(.22,1.2,.36,1);
}
.land-rise.is-in .split-char,
.land-rise.is-in .split-word { opacity: 1; transform: none; }

/* --- Arrivée en profondeur (zoom depuis l'avant) --- */
.land-zoom .split-char,
.land-zoom .split-word {
  opacity: 0;
  transform: scale(2.4) translateZ(0);
  filter: blur(10px);
  transition: opacity .55s ease, transform .85s cubic-bezier(.16,1,.3,1), filter .55s ease;
}
.land-zoom.is-in .split-char,
.land-zoom.is-in .split-word { opacity: 1; transform: none; filter: none; }

/* --- Bascule 3D (chaque lettre pivote pour se poser) --- */
.land-flip { perspective: 900px; }
.land-flip .split-char,
.land-flip .split-word {
  opacity: 0;
  transform: rotateX(-92deg) translateY(-40%);
  transform-origin: 50% 0;
  transition: opacity .5s ease, transform .8s cubic-bezier(.2,1.35,.4,1);
}
.land-flip.is-in .split-char,
.land-flip.is-in .split-word { opacity: 1; transform: none; }

/* --- Glissement latéral (entrée par la gauche) --- */
.land-slide .split-word {
  opacity: 0;
  transform: translateX(-60px) skewX(-12deg);
  transition: opacity .55s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.land-slide.is-in .split-word { opacity: 1; transform: none; }

/* --- Effet "machine" : les lettres apparaissent nettes une à une --- */
.land-type .split-char {
  opacity: 0; transform: none;
  transition: opacity .05s linear;
}
.land-type.is-in .split-char { opacity: 1; }

/* --- Rideau vertical : la ligne se dévoile par le bas --- */
.land-curtain .split-word {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .4s ease, transform .8s cubic-bezier(.76,0,.24,1);
}
.land-curtain.is-in .split-word { opacity: 1; transform: none; }

/* Ombre portée qui apparaît une fois le texte posé */
.land-shadow.is-in { animation: landSettle .8s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes landSettle {
  0%   { text-shadow: 0 22px 26px rgba(0,0,0,.28); }
  70%  { text-shadow: 0 5px 10px rgba(0,0,0,.14); }
  100% { text-shadow: none; }
}

/* Barre lumineuse qui balaye le texte après l'atterrissage */
.land-sweep { position: relative; overflow: hidden; }
.land-sweep::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  pointer-events: none;
}
.land-sweep.is-in::after { animation: sweepOnce 1.4s cubic-bezier(.2,.8,.2,1) .55s 1; }
@keyframes sweepOnce { to { transform: translateX(110%); } }

/* Éléments non-texte qui accompagnent l'atterrissage */
.land-item {
  opacity: 0; transform: translateY(38px) scale(.96);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,1.25,.4,1);
}
.land-item.is-in { opacity: 1; transform: none; }
.land-item[data-delay="1"] { transition-delay: .55s; }
.land-item[data-delay="2"] { transition-delay: .7s; }
.land-item[data-delay="3"] { transition-delay: .85s; }
.land-item[data-delay="4"] { transition-delay: 1s; }
.land-item[data-delay="5"] { transition-delay: 1.15s; }

/* =====================================================================
   23. Nouveaux blocs de la page d'accueil
   ===================================================================== */

/* Photo de fond du hero (remplace le fond uni si l'admin en ajoute une) */
.hero__photo {
  position: absolute; inset: -8% 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .3; will-change: transform;
}
.hero__photo-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, var(--emerald-950) 8%, rgba(10,37,64,.82) 45%, rgba(10,37,64,.55) 100%);
}
.hero__inner, .hero__scroll { position: relative; z-index: 2; }

/* Bandeau défilant des partenaires */
.marquee-band {
  background: var(--emerald-950); padding: 22px 0; position: relative; overflow: hidden;
}
.marquee-band .marquee__item { font-size: 19px; letter-spacing: .04em; }

/* Image dans les cartes "pourquoi nous choisir" */
.why-card__img {
  height: 168px; border-radius: 12px; overflow: hidden; margin-bottom: 20px;
}
.why-card__img img { width: 100%; height: 100%; object-fit: cover; }

/* Le hero garde ses proportions même avec une photo */
.hero__card img { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .marquee-band .marquee__item { font-size: 15px; }
  .why-card__img { height: 190px; }
}

/* =====================================================================
   24. VISIONNEUSE PLEIN ÉCRAN (lightbox)
   ===================================================================== */
.lb {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(8, 25, 44, .97);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
}
.lb.is-open { opacity: 1; visibility: visible; }

/* Barre d'outils */
.lb__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 62px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent);
}
.lb__counter { color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.lb__tools { display: flex; align-items: center; gap: 6px; }
.lb__zoom { color: rgba(255,255,255,.6); font-size: 12.5px; min-width: 46px; text-align: center; }
.lb__btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.1); color: #fff; font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s, color .25s;
}
.lb__btn:hover { background: var(--gold-500); color: var(--emerald-950); transform: scale(1.1); }
.lb__btn--close:hover { background: #c0392b; color: #fff; }

/* Flèches de navigation */
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.1); color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
}
.lb__nav:hover { background: var(--gold-500); color: var(--emerald-950); }
.lb__nav--prev { left: 22px; }
.lb__nav--next { right: 22px; }
.lb__nav--prev:hover { transform: translateY(-50%) translateX(-4px); }
.lb__nav--next:hover { transform: translateY(-50%) translateX(4px); }

/* Zone d'affichage */
.lb__stage {
  flex: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 74px 24px 66px;
}
.lb__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 6px; box-shadow: 0 30px 90px rgba(0,0,0,.6);
  opacity: 0; transform: scale(.94);
  transition: opacity .4s ease, transform .35s cubic-bezier(.16,1,.3,1);
  user-select: none; -webkit-user-drag: none;
}
.lb__img.is-ready { opacity: 1; transform: scale(1); }
.lb__img.is-zoomed { cursor: grab; transition: transform .12s ease-out; }
.lb__img.is-grabbing { cursor: grabbing; }

/* Vidéo */
.lb__video { width: min(1100px, 92vw); aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb__video iframe { width: 100%; height: 100%; border: 0; }

/* Légende */
.lb__caption {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 18px 24px 22px; text-align: center; color: rgba(255,255,255,.85); font-size: 14.5px;
  background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
}

/* Indice visuel sur les vignettes cliquables */
.photo-item, .album-card, [data-lightbox-img] { cursor: zoom-in; }
.photo-item { position: relative; }
.photo-item::after {
  content: '⤢'; position: absolute; right: 10px; bottom: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(10,37,64,.75); color: var(--gold-400);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  opacity: 0; transform: scale(.7); transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.photo-item:hover::after { opacity: 1; transform: scale(1); }

@media (max-width: 720px) {
  .lb__nav { width: 44px; height: 44px; font-size: 26px; }
  .lb__nav--prev { left: 8px; } .lb__nav--next { right: 8px; }
  .lb__stage { padding: 68px 8px 60px; }
  .lb__btn { width: 36px; height: 36px; font-size: 15px; }
  .lb__zoom { display: none; }
}

/* Empêche la coupure d'un mot dont les lettres sont animées séparément */
.split-wordwrap { display: inline-block; white-space: nowrap; }

/* =====================================================================
   25. Finitions visuelles
   ===================================================================== */

/* Pastille du hero : entièrement visible, au-dessus de la carte */
.hero__card-float {
  left: 14px !important; bottom: -22px !important; z-index: 5;
  min-width: 216px; align-items: center;
}
.hero__card-float .num { flex-shrink: 0; line-height: 1; }
.hero__card-float .txt { max-width: 140px; }
.hero__visual, .hero__card { overflow: visible; }

/* Badge « année de création » : le disque tourne, le texte reste lisible */
.split__visual-badge { animation: none; right: 8px; top: -18px; }
.split__visual-badge::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px dashed rgba(10,37,64,.35);
  animation: spinSlow 18s linear infinite;
}
.split__visual { overflow: visible; }

/* Espacement du bloc de texte « à propos » */
.split__body .content-inline p { margin-bottom: 14px; color: var(--gray-700); }

@media (max-width: 720px) {
  .hero__card-float { left: 10px !important; min-width: 0; padding: 14px 16px; }
  .split__visual-badge { width: 92px; height: 92px; right: 0; }
  .split__visual-badge span { font-size: 20px; }
}

/* =====================================================================
   26. Photo de fond de la bannière — bien visible
   ===================================================================== */

/* L'image s'affiche en pleine intensité ; c'est le voile qui gère la lisibilité */
.hero__photo {
  opacity: 1;
  filter: saturate(1.06) contrast(1.03);
}

/* La grille et les particules s'effacent quand une photo est présente,
   pour ne pas brouiller l'image */
.hero:has(.hero__photo) .hero__grid { opacity: .03; }
.hero:has(.hero__photo) .hero__particles span { opacity: .3 !important; }
.hero:has(.hero__photo)::before { opacity: .18; }
.hero:has(.hero__photo)::after { opacity: .16; }

/* Halo sombre localisé derrière le texte : garantit la lisibilité
   même sur une photo claire, sans assombrir toute l'image */
.hero__content { position: relative; }
.hero__content::before {
  content: '';
  position: absolute;
  inset: -60px -140px -60px -80px;
  background: radial-gradient(ellipse at 32% 50%, rgba(10,37,64,.88) 0%, rgba(10,37,64,.66) 42%, rgba(10,37,64,.28) 70%, transparent 88%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* Ombre portée légère sur le texte pour le détacher de la photo */
.hero:has(.hero__photo) h1,
.hero:has(.hero__photo) .lead,
.hero:has(.hero__photo) .hero__badge {
  text-shadow: 0 2px 10px rgba(10,37,64,.8), 0 6px 30px rgba(10,37,64,.6);
}
/* Le texte doré reste lisible même sur une zone claire de la photo */
.hero:has(.hero__photo) h1 em {
  text-shadow: 0 2px 12px rgba(10,37,64,.9), 0 0 40px rgba(10,37,64,.7);
}

/* Repli pour les navigateurs sans :has() — voile un peu plus dense */
@supports not selector(:has(*)) {
  .hero__photo { opacity: .82; }
}

@media (max-width: 860px) {
  /* Sur mobile le texte passe au-dessus de la photo : on renforce le voile */
  .hero__photo-veil {
    background: linear-gradient(180deg, rgba(10,37,64,.88) 0%, rgba(10,37,64,.7) 55%, rgba(10,37,64,.85) 100%) !important;
  }
  .hero__content::before { inset: -30px -30px; }
}

/* =====================================================================
   27. Hauteur de la bannière — plus compacte et mieux proportionnée
   ===================================================================== */
.hero {
  min-height: var(--hero-h, 70vh);
  max-height: 820px;
}

/* Espacements intérieurs resserrés */
.hero__inner {
  padding: 60px 0 56px;
  gap: 48px;
  align-items: center;
}

/* Le visuel de droite était trop haut : format plus équilibré */
.hero__card { padding: 22px; }
.hero__card img { aspect-ratio: 5 / 4; }

/* Titre légèrement réduit pour tenir dans la nouvelle hauteur */
.hero h1 {
  font-size: clamp(32px, 4.1vw, 52px);
  margin-bottom: 18px;
}
.hero p.lead {
  font-size: 16.5px;
  margin-bottom: 28px;
  max-width: 480px;
}
.hero__badge { margin-bottom: 20px; }

/* Indicateur de défilement rapproché du bas */
.hero__scroll { bottom: 18px; }

/* Variantes de hauteur */
.hero--compacte .hero__inner { padding: 44px 0 44px; }
.hero--compacte .hero__card img { aspect-ratio: 4 / 3; }
.hero--compacte h1 { font-size: clamp(29px, 3.6vw, 45px); }
.hero--compacte .hero__scroll { display: none; }

.hero--grande .hero__inner { padding: 84px 0 74px; }
.hero--grande .hero__card img { aspect-ratio: 4 / 5; }

@media (max-width: 1080px) {
  .hero { min-height: auto; max-height: none; }
  .hero__inner { padding: 56px 0 48px; }
  .hero__card img { aspect-ratio: 16 / 10; }
}

@media (max-width: 720px) {
  .hero__inner { padding: 44px 0 40px; gap: 32px; }
  .hero h1 { font-size: clamp(27px, 7.5vw, 38px); }
  .hero__scroll { display: none; }
}

/* =====================================================================
   28. CHARTE — accents des animations
   ===================================================================== */

/* Barre de progression : bleu ciel → rouge */
.scroll-progress {
  background: linear-gradient(90deg, var(--sky-500), var(--sky-400), var(--red-500));
  box-shadow: 0 0 12px rgba(77, 166, 224, .55);
}

/* Écran d'ouverture */
.preloader { background: var(--navy-950); }
.preloader__mark { background: linear-gradient(135deg, var(--navy-600), var(--navy-900)); }
.preloader__mark::after { border-color: var(--sky-400); }
.preloader__bar span { background: linear-gradient(90deg, transparent, var(--sky-400), transparent); }
@keyframes preloadPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(77,166,224,.38); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 22px rgba(77,166,224,0); }
}

/* Soulignement animé des titres : bleu ciel */
.underline-grow::after { background: linear-gradient(90deg, var(--sky-400), var(--sky-600)); }

/* Bouton d'appel à l'action : pulsation rouge */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(216,35,42,.28), 0 0 0 0 rgba(216,35,42,.5); }
  50% { box-shadow: 0 10px 30px rgba(216,35,42,.28), 0 0 0 16px rgba(216,35,42,0); }
}

/* Bordure lumineuse au survol : bleu ciel */
.glow-border::before {
  background: conic-gradient(from var(--ang, 0deg), transparent 0deg, var(--sky-400) 90deg, transparent 180deg);
}
.hover-glow:hover { box-shadow: 0 0 0 1px var(--sky-500), 0 18px 46px rgba(77,166,224,.3); }
.why-card:hover { border-top-color: var(--red-500); }

/* Navigation : soulignement bleu → rouge */
.main-nav > ul > li > a::before {
  background: linear-gradient(90deg, var(--navy-600), var(--red-500));
}

/* Anneau orbital et faisceaux : bleu ciel */
.orbit-ring { border-color: rgba(123,192,234,.25); }
.orbit-ring::after { background: var(--sky-400); box-shadow: 0 0 14px var(--sky-400); }
.light-beam { background: linear-gradient(180deg, transparent, rgba(123,192,234,.5), transparent); }
.hero__particles span { background: var(--sky-400); }

/* Séparateur animé */
.section-divider::after { background: linear-gradient(90deg, transparent, var(--sky-400), transparent); }

/* Numéro des cartes services : passe au rouge au survol */
.service-card:hover .service-card__num { background: var(--red-500); color: #fff; }

/* Transition entre les pages */
.page-transition { background: linear-gradient(135deg, var(--navy-700), var(--navy-950)); }

/* Visionneuse plein écran */
.lb { background: rgba(8, 25, 44, .97); }
.lb__btn:hover { background: var(--sky-500); color: var(--navy-950); }
.lb__nav:hover { background: var(--sky-500); color: var(--navy-950); }
.lb__btn--close:hover { background: var(--red-500); color: #fff; }
.photo-item::after { background: rgba(10,37,64,.78); color: var(--sky-400); }

/* Bandeau partenaires */
.marquee-band { background: var(--navy-950); }

/* Voile de la photo de bannière (généré aussi en PHP) */
.hero__photo-veil {
  background: linear-gradient(100deg, rgba(10,30,55,.9) 0%, rgba(10,30,55,.75) 40%, rgba(10,30,55,.4) 70%, rgba(10,30,55,.25) 100%);
}
.hero:has(.hero__photo) h1,
.hero:has(.hero__photo) .lead,
.hero:has(.hero__photo) .hero__badge {
  text-shadow: 0 2px 10px rgba(8,25,44,.82), 0 6px 30px rgba(8,25,44,.62);
}
.hero__content::before {
  background: radial-gradient(ellipse at 32% 50%, rgba(8,25,44,.88) 0%, rgba(8,25,44,.66) 42%, rgba(8,25,44,.28) 70%, transparent 88%);
}