/* Version motion design des 4 sites — maquette du 2026-10-27. Chargée après socle.css, sur <html class="motion">.
   Les animations sont posées par assets/js/motion.js (GSAP + Lenis). Sans JavaScript ou si l'appareil demande moins
   de mouvement (html.is-static), chaque section reste lisible dans son état final. */

html.motion { scroll-behavior: auto; }
.mligne__etapes, .mriposte__etapes, .mchaine__etapes { list-style: none; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Couleurs du texte mis en avant et de la surbrillance au passage de la souris, par marque */
[data-marque="azuretrend"] { --mis-en-avant: #7A6552; --survol-texte: #5b4a3b; --survol-fond: #DED0C5; }
[data-marque="ecotank"]    { --mis-en-avant: #2F367E; --survol-texte: #011936; --survol-fond: #93CDD1; }
[data-marque="emergensea"] { --mis-en-avant: #C8261B; --survol-texte: #6E0D1A; --survol-fond: #EDBAB7; }
[data-marque="monawa"]     { --mis-en-avant: #00838A; --survol-texte: #054F5B; --survol-fond: #B9EAE8; }

/* Barre du site : masquée en descendant, de retour en remontant */
.motion .barre-site { transition: transform .45s var(--ease), box-shadow var(--duree); }
.motion .barre-site.est-masquee { transform: translateY(-110%); }

/* ---------- En-tête plein écran ---------- */
.mhero {
  min-height: calc(100svh - var(--barre-groupe-h) - var(--entete-h)); display: flex; align-items: center;
  padding-bottom: clamp(170px, 18vw, 230px);
}
[data-marque="emergensea"] .mhero { min-height: calc(100svh - var(--barre-groupe-h) - var(--entete-h) - 38px); }
.mhero__contenu { position: relative; }
.mhero__titre { font-size: clamp(2.8rem, 7.4vw, 6.2rem); max-width: 15ch; }
/* Masques de lignes posés par SplitText (div enfants directs) : de la place pour les jambages (g, p, ç) */
.mhero__titre > div, main h2.titre > div { padding-bottom: .14em; margin-bottom: -.14em; }
.mhero__indice {
  position: absolute; right: var(--gouttiere); bottom: clamp(190px, 19vw, 250px); display: grid; justify-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .75);
}
.mhero__indice span { writing-mode: vertical-rl; }
.mhero__indice i { width: 1.5px; height: 56px; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); animation: indice 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes indice { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Bandeau des partenaires ---------- */
.mbandeau { padding: clamp(64px, 8vw, 110px) 0 clamp(20px, 3vw, 40px); }
.mbandeau__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 26px; }
.mbandeau__note { font-size: 13px; color: var(--texte-doux); }
.mbandeau__piste {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.mbandeau__rail { display: flex; gap: 18px; width: max-content; animation: defile 40s linear infinite; }
@keyframes defile { to { transform: translateX(-50%); } }
.mbandeau__logo {
  display: inline-flex; align-items: center; gap: 10px; height: 76px; padding: 0 30px; border-radius: 20px; white-space: nowrap;
  border: 1.5px dashed color-mix(in srgb, var(--marque-fonce) 22%, transparent); background: color-mix(in srgb, var(--marque-clair) 14%, #fff);
  color: var(--texte-doux); font-weight: 600; font-size: 15px; letter-spacing: .02em;
}
.mbandeau__logo .ic { width: 20px; height: 20px; color: var(--marque); fill: color-mix(in srgb, var(--marque) 25%, transparent); }

/* ---------- Manifeste : les mots s'allument au défilement et au passage de la souris ---------- */
.mmanifeste { padding-top: clamp(40px, 5vw, 70px); }
.mmanifeste__texte {
  margin-top: 22px; max-width: 30em; font-size: clamp(1.55rem, 3.3vw, 2.75rem); font-weight: 500; line-height: 1.32; letter-spacing: -.015em;
}
.mmanifeste__texte em { font-style: normal; color: var(--mis-en-avant); }
.mmanifeste__texte .mot {
  --h: 0; border-radius: .18em;
  color: color-mix(in srgb, var(--survol-texte) calc(var(--h) * 100%), currentColor);
  background: color-mix(in srgb, var(--survol-fond) calc(var(--h) * 70%), transparent);
  box-shadow: 0 0 0 calc(var(--h) * .08em) color-mix(in srgb, var(--survol-fond) calc(var(--h) * 70%), transparent);
}

/* ---------- Offres en défilement horizontal ---------- */
.mhoriz { padding: clamp(56px, 7vw, 90px) 0; overflow: hidden; }
.mhoriz__epingle { display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.mhoriz__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.mhoriz__tete .titre { margin-top: 8px; }
.mhoriz__compteur { font-size: 15px; color: var(--texte-doux); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mhoriz__compteur b { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: var(--texte); margin-right: 4px; }
.mhoriz__piste { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.mhoriz__piste::-webkit-scrollbar { display: none; }
.mhoriz__rail {
  display: flex; gap: 22px; width: max-content; padding: 10px max(var(--gouttiere), calc((100vw - var(--largeur-max)) / 2)) 24px;
}
.mpanneau {
  flex: 0 0 clamp(270px, 29vw, 390px); scroll-snap-align: center; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; background-clip: padding-box; border: 7px solid rgba(255, 255, 255, .65); border-radius: 34px;
  box-shadow: 0 0 0 1px rgba(1, 25, 54, .05), 0 24px 50px -32px rgba(1, 25, 54, .55);
  transition: transform var(--duree) var(--ease);
}
.mpanneau:hover { transform: translateY(-6px); }
.mpanneau__media { height: clamp(200px, 22vw, 270px); margin: 7px 7px 0; border-radius: 24px; overflow: hidden; position: relative; }
.mpanneau__media img { position: absolute; inset: 0 auto 0 -8%; width: 116%; max-width: none; height: 100%; object-fit: cover; }
.mpanneau__media.est-detouree img { inset: 0; width: 100%; }
.mpanneau__corps { position: relative; display: grid; gap: 8px; justify-items: start; padding: 18px 22px 24px; }
.mpanneau__num { position: absolute; right: 20px; top: 12px; font-size: 34px; font-weight: 300; color: color-mix(in srgb, var(--marque) 35%, transparent); }
.mpanneau__titre { font-size: 20px; font-weight: 600; line-height: 1.25; }
.mpanneau__desc { font-size: 14px; line-height: 1.55; color: var(--texte-doux); }
.mhoriz__progression { height: 3px; border-radius: 3px; background: rgba(1, 25, 54, .1); overflow: hidden; }
.mhoriz__progression i { display: block; height: 100%; background: var(--marque); transform-origin: left; }

/* ---------- Une ligne, des étapes, un mobile qui suit la ligne (ECOTANK, AZURETREND) ---------- */
.mligne { overflow: hidden; }
.mligne__tete { max-width: 46em; }
.mligne__tete .titre { margin: 10px 0 12px; }
.mligne__tete p { color: var(--texte-doux); }
.mligne__scene { position: relative; margin-top: clamp(24px, 4vw, 48px); }
.mligne__svg { width: 100%; height: auto; overflow: visible; }
.mligne__fond { fill: none; stroke: color-mix(in srgb, var(--marque-fonce) 18%, transparent); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.mligne__trace { fill: none; stroke: var(--marque); stroke-width: 4; stroke-linecap: round; }
[data-marque="azuretrend"] .mligne__trace { stroke: #A79988; }
.mligne__mobile { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(1, 25, 54, .35)); }
.mligne__mobile--bateau { width: clamp(110px, 12vw, 170px); height: auto; }
.mligne__mobile--goutte { width: 46px; height: auto; }
.mligne__etapes { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: clamp(14px, 2vw, 28px); margin-top: 18px; }
.mligne__etape { display: grid; gap: 8px; justify-items: start; align-content: start; opacity: .38; transition: opacity .5s var(--ease), transform .5s var(--ease); transform: translateY(10px); }
.mligne__etape.est-active { opacity: 1; transform: none; }
.mligne__etape .ic { width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--etiquette-fond); color: var(--etiquette-texte); }
.mligne__etape img { height: 24px; width: auto; }
.mligne__num { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--marque); }
[data-marque="azuretrend"] .mligne__num { color: #7A6552; }
.mligne__etape h3 { font-size: 19px; font-weight: 600; }
.mligne__etape p { font-size: 14px; line-height: 1.55; color: var(--texte-doux); max-width: 26em; }

/* ---------- Rideau vidéo (ECOTANK) ---------- */
.mrideau__cadre { position: relative; overflow: hidden; border-radius: var(--r-bloc); aspect-ratio: 16 / 8; background: #011936; }
.mrideau__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mrideau__legende {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 4vw, 48px); color: #fff;
  background: linear-gradient(0deg, rgba(1, 25, 54, .82), rgba(1, 25, 54, 0));
}
.mrideau__legende .surtitre { color: rgba(255, 255, 255, .85); }
.mrideau__legende .titre { margin-top: 8px; color: #fff; }
.mrideau__legende .titre .leger { color: var(--marque-clair); }
.mrideau__pause {
  position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .45); color: #fff; backdrop-filter: blur(8px);
}

/* ---------- EMERGENSEA : prévenir, réagir, maîtriser ---------- */
.mriposte { background: linear-gradient(180deg, #03112a, #071d3f); color: #fff; }
.mriposte__epingle { min-height: 100vh; display: flex; align-items: center; padding: clamp(56px, 7vw, 90px) 0; }
.mriposte__grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.mriposte .surtitre { color: rgba(255, 255, 255, .78); }
.mriposte .titre { margin: 10px 0 26px; color: #fff; }
.mriposte .titre .leger { color: var(--marque-clair); }
.mriposte__etapes { display: grid; gap: 6px; counter-reset: etape; }
.mriposte__etapes li {
  counter-increment: etape; position: relative; padding: 14px 18px 14px 58px; border-radius: 18px; opacity: .45;
  transition: opacity .5s var(--ease), background-color .5s var(--ease);
}
.mriposte__etapes li::before {
  content: "0" counter(etape); position: absolute; left: 18px; top: 15px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--marque-clair);
}
.mriposte__etapes li.est-active { opacity: 1; background: rgba(255, 255, 255, .07); }
.mriposte__etapes b { display: block; font-size: 22px; font-weight: 600; }
.mriposte__etapes p { margin-top: 4px; font-size: 15px; color: rgba(255, 255, 255, .82); }
.mriposte__etapes a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mriposte__scene {
  overflow: hidden; border-radius: 36px; border: 8px solid rgba(255, 255, 255, .14); background-clip: padding-box;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.mriposte__scene svg { display: block; width: 100%; height: auto; }

/* ---------- MONAWA : la chaîne de l'eau ---------- */
.mchaine { background: var(--fond-teinte); }
.mchaine__epingle { min-height: 100vh; display: flex; align-items: center; padding: clamp(56px, 7vw, 90px) 0; }
.mchaine__epingle > .conteneur { width: min(var(--largeur-max), 100% - 2 * var(--gouttiere)); }
.mchaine__tete .titre { margin-top: 10px; }
.mchaine__scene { position: relative; margin-top: clamp(26px, 4vw, 44px); }
.mchaine__svg { width: 100%; height: auto; overflow: visible; }
.mchaine__tuyau { fill: none; stroke: color-mix(in srgb, var(--marque-clair) 70%, #fff); stroke-width: 16; stroke-linecap: round; }
.mchaine__flux { fill: none; stroke: var(--marque); stroke-width: 6; stroke-linecap: round; }
.mchaine__goutte { position: absolute; left: 0; top: 0; z-index: 2; width: 30px; height: auto; fill: var(--marque); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 6px 10px rgba(5, 79, 91, .4)); }
.mchaine__source { position: absolute; left: 0; top: -26px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--marque-fonce); }
.mchaine__source .ic { width: 18px; height: 18px; }
.mchaine__etapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 22px); margin-top: 16px; }
.mchaine__etape { display: grid; gap: 6px; align-content: start; opacity: .45; filter: saturate(.4); transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease); transform: translateY(12px); }
.mchaine__etape.est-active { opacity: 1; filter: none; transform: none; }
.mchaine__media {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; border: 6px solid rgba(255, 255, 255, .7); background: #fff; background-clip: padding-box;
  box-shadow: 0 18px 36px -26px rgba(5, 79, 91, .7); margin-bottom: 6px;
}
.mchaine__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.mchaine__courbe { width: 100%; height: 100%; padding: 14%; background: linear-gradient(160deg, #054F5B, #022a30); border-radius: 16px; }
.mchaine__courbe path { fill: none; stroke: var(--marque-clair); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mchaine__num { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: #00838A; }
.mchaine__etape h3 { font-size: 19px; font-weight: 600; }
.mchaine__etape p { font-size: 13.5px; line-height: 1.5; color: var(--texte-doux); }
.mchaine__boucle {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: clamp(22px, 3vw, 34px) auto 0;
  padding: 10px 22px; border-radius: var(--r-pilule); background: #fff; color: var(--marque-fonce); font-weight: 600; letter-spacing: .04em;
  box-shadow: var(--ombre-douce);
}
.mchaine__boucle .ic { color: var(--marque); }

/* ---------- MONAWA : la vidéo d'Eléna ---------- */
.mvideo__grille { display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.mvideo .titre { margin: 10px 0 14px; }
.mvideo p { color: var(--texte-doux); max-width: 30em; }
.mvideo__cadre {
  overflow: hidden; border-radius: 30px; border: 8px solid rgba(255, 255, 255, .7); background: #fff; background-clip: padding-box;
  box-shadow: 0 30px 60px -36px rgba(5, 79, 91, .8);
}
.mvideo__cadre video { display: block; width: 100%; height: auto; border-radius: 22px; background: #eef2f2; }

/* ---------- Carte du monde : liaisons depuis la France ---------- */
.planisphere__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.planisphere__arcs path { fill: none; stroke: #B9EAE8; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }

/* ---------- Pied : le nom de la marque monte ---------- */
.pied { overflow: hidden; }
.pied__mot {
  padding-top: clamp(24px, 4vw, 48px); text-align: center; white-space: nowrap; line-height: .78;
  font-size: clamp(3.6rem, 15.5vw, 15rem); font-weight: 700; letter-spacing: -.045em; color: rgba(255, 255, 255, .07);
}

/* ---------- Ordinateur : sections épinglées à la hauteur de l'écran ---------- */
@media (min-width: 961px) and (min-height: 600px) {
  .mhoriz { padding: 0; }
  .mhoriz__epingle { min-height: 100vh; padding: clamp(40px, 6vh, 70px) 0; }
  .mpanneau__media { height: clamp(200px, 30vh, 330px); }
  .mligne { min-height: 100vh; display: flex; align-items: center; }
  .mligne > .conteneur { width: min(var(--largeur-max), 100% - 2 * var(--gouttiere)); }
}

/* ---------- Téléphone et tablette : pas d'épinglage, étapes lisibles ---------- */
@media (max-width: 960px) {
  .mhero__indice { display: none; }
  .mligne__svg, .mligne__mobile { display: none; }
  .mligne__etapes { grid-template-columns: 1fr 1fr; }
  .mligne__etape { opacity: 1; transform: none; }
  .mriposte__epingle { min-height: 0; }
  .mriposte__grille { grid-template-columns: 1fr; }
  .mchaine__epingle { min-height: 0; }
  .mchaine__svg, .mchaine__goutte, .mchaine__source { display: none; }
  .mchaine__etapes { grid-template-columns: 1fr 1fr; }
  .mvideo__grille { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .mhero__titre { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .mligne__etapes, .mchaine__etapes { grid-template-columns: 1fr; }
  .mchaine__media { aspect-ratio: 16 / 9; }
  .mhoriz__compteur { display: none; }
  .mpanneau { flex-basis: 80vw; }
  .mrideau__cadre { aspect-ratio: 4 / 5; }
}

/* ---------- Moins de mouvement, ou bibliothèques absentes : tout est affiché dans l'état final ---------- */
.is-static .mbandeau__rail { animation: none; }
.is-static .mhero__indice i { animation: none; }
.is-static .mligne__mobile, .is-static .mchaine__goutte { display: none; }
.is-static .mligne__etape, .is-static .mchaine__etape { opacity: 1; filter: none; transform: none; }
.is-static .mriposte__etapes li { opacity: 1; }
.is-static .mriposte__epingle, .is-static .mchaine__epingle { min-height: 0; }
.is-static .mriposte__bateau { display: none; }