/* ============================================================
   Innobéton CMS — feuille publique
   Verre dépoli iOS 26 · thème clair, barre de navigation en verre encre
   Les marges verticales de chaque bloc viennent de l'éditeur (--pt / --pb) et sont
   réduites proportionnellement sur petit écran par --space-scale.
   ============================================================ */

:root {
  color-scheme: light;

  --brand-900: #1a2364;
  --brand-700: #2f4090;
  --brand-500: #3a63c4;
  --cyan-600: #0080c0;
  --cyan-400: #22a8e0;
  --cyan-200: #7fd4f4;

  --accent: var(--brand-700);
  --accent-soft: rgba(47, 64, 144, 0.10);
  --accent-line: linear-gradient(90deg, var(--brand-700) 0%, var(--cyan-400) 100%);

  --page-bg: #eef1f7;
  --text-primary: rgba(10, 16, 34, 0.90);
  --text-secondary: rgba(10, 16, 34, 0.60);
  --text-tertiary: rgba(10, 16, 34, 0.40);

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-elevated: rgba(255, 255, 255, 0.85);
  --glass-bg-subtle: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-border-subtle: rgba(10, 16, 34, 0.07);
  --glass-shadow: 0 8px 32px rgba(16, 24, 52, 0.10);
  --glass-shadow-elevated: 0 18px 56px rgba(16, 24, 52, 0.16);

  --on-dark: rgba(255, 255, 255, 0.94);
  --on-dark-soft: rgba(255, 255, 255, 0.68);

  --font-display: 'Montserrat', 'Montserrat secours', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  /* Mise au point : départ vif, arrivée très posée. La courbe des entrées de la vitrine. */
  --ease-focus: cubic-bezier(0.16, 1, 0.3, 1);
  /* Dévoilement d'un titre : assez posée pour que l'œil suive le cache descendre. */
  --ease-devoile: cubic-bezier(0.25, 0.6, 0.3, 1);
  --shell: 1240px;
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.1px;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 300;
  background: var(--glass-bg-elevated); padding: 12px 18px;
  border-radius: var(--r-sm); box-shadow: var(--glass-shadow);
}
.skip-link:focus { top: 16px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* ---------- fond ambiant ---------- */

.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}
.ambient-blob--a {
  width: 46vw; height: 46vw; top: -12vw; right: -10vw;
  background: radial-gradient(circle at 30% 30%, rgba(58, 99, 196, 0.55), transparent 68%);
}
.ambient-blob--b {
  width: 40vw; height: 40vw; top: 46vh; left: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(34, 168, 224, 0.42), transparent 68%);
}
.ambient-blob--c {
  width: 52vw; height: 52vw; bottom: -18vw; right: -8vw;
  background: radial-gradient(circle at 50% 50%, rgba(26, 35, 100, 0.30), transparent 70%);
}

.ambient-grain {
  position: absolute; inset: 0;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- verre ---------- */

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
}

.glass--ink {
  background: rgba(10, 16, 34, 0.52);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--on-dark);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.94); }
  .glass--ink { background: rgba(10, 16, 34, 0.88); }
  .nav.is-stuck { background: rgba(12, 18, 40, 0.94); }
}

/* ---------- typographie ---------- */

.h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -1.4px;
  margin: 10px 0 18px;
}
.h2--sm { font-size: clamp(26px, 3vw, 36px); letter-spacing: -1px; }
.h2 em {
  font-style: normal;
  background: var(--accent-line);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h2--light { color: var(--on-dark); }
.h2--light em {
  background: linear-gradient(90deg, var(--cyan-200) 0%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.eyebrow--light { color: var(--cyan-200); }

.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--text-secondary); margin: 0 0 16px; max-width: 56ch; }
.lead--light { color: var(--on-dark-soft); }
.body { color: var(--text-secondary); margin: 0 0 20px; max-width: 60ch; }

/* ---------- boutons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 13px 24px;
  border: none; border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; letter-spacing: -0.1px;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn .i-arrow { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover .i-arrow { transform: translateX(4px); }
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 40px; padding: 9px 18px; font-size: 14px; }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--cyan-600) 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(31, 52, 130, 0.34);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(31, 52, 130, 0.42); }

.btn-glass {
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.42);
  color: #fff;
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--accent);
  padding: 10px 0;
}
.link-arrow .i-arrow { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.link-arrow:hover .i-arrow { transform: translateX(5px); }
.link-arrow--sm { font-size: 14px; }

.round-btn {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.round-btn svg { width: 20px; height: 20px; }
.round-btn:hover { transform: scale(1.06); color: var(--accent); }
.round-btn:active { transform: scale(0.94); }

/* ---------- navigation ---------- */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 200;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 0.5px solid transparent;
}
.nav-inner {
  max-width: var(--shell); margin-inline: auto;
  padding: 14px clamp(20px, 4vw, 40px);
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
}
.nav.is-stuck {
  background: rgba(12, 18, 40, 0.72);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 34px rgba(8, 14, 34, 0.22);
}
.nav.is-stuck .nav-inner { padding-top: 8px; padding-bottom: 8px; }

.brand { display: flex; align-items: center; flex: 0 0 auto; }
.nav .brand-logo { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45)); }
.brand-logo { width: clamp(140px, 15vw, 178px); height: auto; }

.nav-menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
/* Le bouton d'appel du tiroir ne sert qu'au menu replié (voir la requête à 1000 px). */
.nav-menu .nav-cta { display: none; }
.nav-menu a {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  padding: 10px 2px;
  position: relative;
}
.nav-menu a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px;
  background: var(--accent-line); border-radius: 2px;
  transition: right 0.3s var(--ease);
}
.nav-menu a:hover::after { right: 0; }
/* La page en cours reste soulignée, en pleine lumière : on sait toujours où l'on est. */
.nav-menu a[aria-current="page"] { color: #fff; }
.nav-menu a[aria-current="page"]::after { right: 0; }
.nav.is-stuck .nav-menu a { text-shadow: none; }

/* Les outils de la barre (langue, devis, menu) partagent une même hauteur. */
.nav-tools { --nav-outil: 42px; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-tools .nav-cta { min-height: var(--nav-outil); }

/* choix de la langue : un menu déroulant, quel que soit le nombre de langues */
.langues { position: relative; }
.langues-choix {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  box-sizing: border-box; height: var(--nav-outil, 42px); padding: 0 14px 0 13px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: #fff;
  background: rgba(255, 255, 255, 0.16); border: 0.5px solid rgba(255, 255, 255, 0.28);
  transition: background 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.langues-choix::-webkit-details-marker { display: none; }
.langues-choix::marker { content: ''; }
.langues-choix:hover, .langues[open] .langues-choix { background: rgba(255, 255, 255, 0.26); }
.langues-choix:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; }
.langues svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.langues .langues-chevron { width: 12px; height: 12px; opacity: 0.8; transition: transform 0.25s var(--ease); }
.langues[open] .langues-chevron { transform: rotate(180deg); }
.langues-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 120;
  min-width: 190px; margin: 0; padding: 6px; list-style: none;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--glass-shadow-elevated);
  transform-origin: top right;
  animation: langues-ouvre 0.24s var(--ease-spring);
}
@keyframes langues-ouvre { from { opacity: 0; transform: translateY(-4px) scale(0.96); } }
.langues-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none;
}
.langues-menu a:hover, .langues-menu a:focus-visible { background: var(--accent-soft); outline: none; }
.langues-menu .langues-code {
  min-width: 28px; padding: 3px 0; border-radius: 6px; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--brand-900); background: rgba(10, 16, 34, 0.06);
}
.langues-menu a[aria-current="true"] { color: var(--brand-900); }
.langues-menu a[aria-current="true"]::after {
  content: ''; margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan-600); box-shadow: 0 0 0 3px rgba(0, 128, 192, 0.16);
}

.burger { display: none; }

/* ---------- héros ---------- */

.hero {
  position: relative;
  min-height: var(--hero-h, min(100svh, 900px));
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #0a1022;
}
.hero--plein { --hero-h: min(100svh, 900px); }
.hero--grand { --hero-h: 720px; }
.hero--moyen { --hero-h: 560px; }
.hero-frame { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.hero--with-stats .hero-overlay { padding-bottom: clamp(132px, 15vh, 180px); }
.hero-stage { position: absolute; inset: 0; }

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s var(--ease), visibility 1.1s step-end;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease), visibility 0s; }

/* La photo arrive en faisant sa mise au point. L'agrandissement couvre le débord du flou :
   sans lui, les bords laisseraient voir le fond. Seule la première diapositive le fait :
   les suivantes entrent en fondu, et un flou joué sur des diapositives cachées occuperait
   le navigateur pour rien pendant le chargement. */
.hero-media { position: absolute; inset: 0; }
.hero-slide:first-child .hero-media { animation: hero-nettete 1.5s var(--ease-focus) both; }
/* Pas de fondu d'opacité ici : une photo peinte transparente n'est pas retenue comme
   plus grand élément affiché, et la mesure de vitesse de la page glisserait à plus tard. */
@keyframes hero-nettete {
  from { transform: scale(1.06); filter: blur(18px); }
  to { transform: none; filter: blur(0px); }
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide.is-active .hero-media img { animation: kenburns 14s var(--ease) forwards; }
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); }
}

.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 10, 24, 0.62) 0%, rgba(6, 10, 24, 0.10) 34%, rgba(6, 10, 24, 0.55) 74%, rgba(6, 10, 24, 0.92) 100%),
    linear-gradient(96deg, rgba(10, 16, 40, 0.72) 0%, rgba(10, 16, 40, 0.18) 52%, transparent 78%);
}

.hero-body {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 42%;
  max-width: var(--shell); margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  color: #fff;
}
/* Le titre se dévoile derrière un cache, il ne monte pas : sur le premier écran, plusieurs
   montées simultanées se lisent comme un défilement de page. Le cache découvre tout le
   texte en 82 % du temps ; le reste élargit la découpe pour rendre les ombres portées,
   invisibles à l'œil : c'est le texte lui-même qui doit prendre le temps d'apparaître. */
.hero-slide.is-active .hero-body > * { animation: hero-devoile 1.2s var(--ease-devoile) both; }
.hero-slide.is-active .hero-body > *:nth-child(2) { animation-delay: 0.14s; }
.hero-slide.is-active .hero-body > *:nth-child(3) { animation-delay: 0.28s; }
@keyframes hero-devoile {
  from { opacity: 0; clip-path: inset(0 -40% 100% -40%); }
  82% { opacity: 1; clip-path: inset(-40% -40% 0% -40%); }
  to { opacity: 1; clip-path: inset(-40% -40% -40% -40%); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
/* Boutons et fil des diapositives suivent le titre, en simple fondu. */
.hero-overlay > * { animation: hero-apparait 0.9s var(--ease-focus) 0.85s both; }
.hero-overlay > * + * { animation-delay: 1s; }
@keyframes hero-apparait { from { opacity: 0; } }

/* Entrée du haut de page : tant que sa photo n'est pas décodée, tout reste au point de
   départ (le script lève l'attente, au plus tard 1,2 s après pour le texte). Sans script,
   la classe d'attente tombe d'elle-même au bout de 3 s. */
.ib-attente .hero:not(.is-pret) .hero-body > *,
.ib-attente .hero:not(.is-pret) .hero-overlay > *,
.ib-attente .hero:not(.is-pret) .rail-fill,
.ib-attente .hero:not(.is-photo) .hero-media,
.ib-attente .page-tete:not(.is-pret) .page-tete-corps > *,
.ib-attente .hero:not(.is-pret) .ib-lettre,
.ib-attente .hero:not(.is-pret) .est-decoupe em,
.ib-attente .page-tete:not(.is-pret) .ib-lettre,
.ib-attente .page-tete:not(.is-pret) .est-decoupe em,
.ib-attente .page-tete:not(.is-photo) .page-tete-media { animation-play-state: paused; }

/* Sur-titre sur photo : du texte, comme celui des sections, sans pastille. */
.hero-eyebrow {
  display: block;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cyan-200);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
  margin: 0 0 14px;
}

/* Titre sur photo : une ligne fine qui pose le sujet, une ligne grasse en dégradé qui
   porte l'image. La fonte variable donne toutes les graisses sans fichier de plus. */
.hero-title, .page-tete-titre {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.018em;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: balance;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
}
.hero-title {
  font-size: clamp(40px, 6.8vw, 96px);
  line-height: 1;
  margin: 0 0 18px;
}
/* Le dégradé est découpé dans la lettre : une ombre de texte s'y verrait par transparence
   et griserait le blanc. L'ombre passe donc sur le rendu, en filtre. */
.hero-title em, .page-tete-titre em {
  font-style: normal;
  font-weight: 750;
  letter-spacing: -0.035em;
  background: linear-gradient(100deg, #fff 10%, var(--cyan-200) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.35));
}
.hero-place {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

/* Titres découpés en lettres par site.js (site public seulement). Chaque mot se resserre
   vers son centre en faisant sa mise au point, les mots l'un après l'autre ; rien ne monte.
   Puis un reflet de lumière parcourt la partie en dégradé : chaque lettre y porte sa part
   du dégradé du mot (--x sur --l), un dégradé posé sur le mot ne passerait pas dans des
   lettres animées. Sans script, le cache du titre entier reste en place. */
.ib-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ib-mot { white-space: nowrap; }
.ib-lettre { display: inline-block; }
.hero-slide.is-active .hero-body > .est-decoupe,
.page-tete-corps > .est-decoupe,
.hero-slide.is-active .hero-body > .est-pose,
.page-tete-corps > .est-pose { animation: none; }
.hero-slide.is-active .ib-lettre,
.page-tete-corps .ib-lettre { animation: lettre-point 1.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0s) + var(--d-diapo, 0s)) backwards; }
.ib-mesure .ib-lettre { animation: none !important; }
@keyframes lettre-point {
  from { opacity: 0; filter: blur(14px); transform: translateX(var(--dx, 0px)) scale(1.15); }
  55% { opacity: 1; }
}
.hero-title.est-decoupe em, .page-tete-titre.est-decoupe em { background: none; }
/* Le dégradé ne se peint que dans la boîte de la lettre, haute d'un interligne : la jambe
   d'un g, d'un p ou l'accent d'une capitale en dépassent et restaient sans couleur, donc
   invisibles. La boîte est agrandie par un rembourrage que des marges négatives annulent :
   la ligne, elle, ne bouge pas. */
.est-decoupe em .ib-lettre {
  padding-block: 0.3em;
  margin-block: -0.3em;
  background-image:
    linear-gradient(100deg, transparent 36%, rgba(255, 255, 255, 0.5) 45%, #fff 50%, rgba(255, 255, 255, 0.5) 55%, transparent 64%),
    linear-gradient(100deg, #fff 10%, var(--cyan-200) 90%);
  background-repeat: no-repeat;
  background-size: var(--l) 100%;
  background-position: calc(var(--reflet) - var(--x, 0px)) 0, calc(0px - var(--x, 0px)) 0;
  -webkit-background-clip: text; background-clip: text;
}
@property --reflet { syntax: '<length>'; inherits: true; initial-value: 100000px; }
.hero-slide.is-active .est-decoupe em,
.page-tete-corps .est-decoupe em { animation: reflet 1.6s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--d-reflet, 1s) + var(--d-diapo, 0s)) backwards; }
@keyframes reflet {
  from { --reflet: calc(0px - var(--l)); }
  42%, 62% { filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 16px rgba(127, 212, 244, 0.9)); }
  to { --reflet: var(--l); }
}
/* Le lieu et le chapeau suivent le titre, quelle que soit sa longueur. */
.hero-slide.is-active .hero-body > .hero-place { animation-delay: calc(var(--apres, 0.28s) + var(--d-diapo, 0s)); }
/* Changement de diapositive : le texte attend que le fondu l'ait rendue visible. */
.hero.is-defile { --d-diapo: 0.45s; }
.page-tete .page-tete-corps > .page-tete-chapeau { animation-delay: var(--apres, 0.28s); }
.page-tete .page-tete-corps > .page-tete-actions { animation-delay: calc(var(--apres, 0.42s) + 0.15s); }

.hero-overlay {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 40px) clamp(96px, 12vh, 132px);
  display: flex; flex-direction: column; gap: 30px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-rail { display: flex; gap: 10px; flex-wrap: wrap; }
.rail-item {
  flex: 1 1 130px; max-width: 210px;
  background: none; border: none; cursor: pointer;
  padding: 12px 0 0; text-align: left;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.25s var(--ease);
}
.rail-item:hover { color: rgba(255, 255, 255, 0.9); }
.rail-item.is-active { color: #fff; }
.rail-bar {
  display: block; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
}
/* La jauge s'étire par transformation : animer sa largeur recalculerait la mise en page
   à chaque image, pendant toute la durée de chaque diapositive. */
.rail-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--cyan-200), #fff);
  border-radius: 3px;
  transform: scaleX(0); transform-origin: 0 50%;
}
.rail-item.is-active .rail-fill { animation: railfill var(--slide-ms, 7000ms) linear forwards; }
@keyframes railfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rail-label {
  display: block; margin-top: 10px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hero-credit {
  position: absolute; right: clamp(20px, 4vw, 40px); bottom: 18px; z-index: 3;
  margin: 0; font-size: 11px; letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- en-tête de page ---------- */

/* Pas d'isolation ici : le sommaire devient fixe en cours de lecture et doit passer
   au-dessus des sections qui suivent, pas rester pris dans l'empilement de l'en-tête. */
.page-tete {
  position: relative;
  min-height: var(--tete-h, clamp(460px, 66svh, 640px));
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background: #0a1022;
  color: #fff;
}
.page-tete--compact { --tete-h: clamp(380px, 52svh, 500px); }
.page-tete--moyen { --tete-h: clamp(460px, 66svh, 640px); }
.page-tete--grand { --tete-h: clamp(540px, 82svh, 780px); }
.page-tete-media { position: absolute; inset: 0; z-index: 0; animation: hero-nettete 1.5s var(--ease-focus) both; }
.page-tete-media img { width: 100%; height: 100%; object-fit: cover; }
.page-tete--focus-haut .page-tete-media img { object-position: 50% 18%; }
.page-tete--focus-bas .page-tete-media img { object-position: 50% 82%; }
.page-tete-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 10, 24, 0.66) 0%, rgba(6, 10, 24, 0.14) 30%, rgba(6, 10, 24, 0.5) 64%, rgba(6, 10, 24, 0.9) 100%),
    linear-gradient(96deg, rgba(10, 16, 40, 0.74) 0%, rgba(10, 16, 40, 0.22) 55%, transparent 82%);
}
.page-tete--scrim-leger .page-tete-scrim { opacity: 0.66; }
.page-tete--scrim-fort .page-tete-scrim {
  background:
    linear-gradient(180deg, rgba(6, 10, 24, 0.74) 0%, rgba(6, 10, 24, 0.36) 34%, rgba(6, 10, 24, 0.7) 66%, rgba(6, 10, 24, 0.94) 100%),
    linear-gradient(96deg, rgba(10, 16, 40, 0.82) 0%, rgba(10, 16, 40, 0.34) 60%, rgba(10, 16, 40, 0.12) 100%);
}
.page-tete-corps {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding: calc(var(--nav-h, 76px) + 56px) clamp(20px, 4vw, 40px) clamp(52px, 8vh, 88px);
}
.page-tete--avec-sommaire .page-tete-corps { padding-bottom: clamp(112px, 14vh, 140px); }
/* Même entrée que le héros : le texte se dévoile, il ne monte pas. */
.page-tete-corps > * { animation: hero-devoile 1.2s var(--ease-devoile) both; }
.page-tete-corps > *:nth-child(2) { animation-delay: 0.14s; }
.page-tete-corps > *:nth-child(3) { animation-delay: 0.28s; }
.page-tete-corps > *:nth-child(4) { animation-delay: 0.42s; }
.page-tete-titre {
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 1.02;
  margin: 0 0 18px;
  max-width: 18ch;
}
.page-tete-chapeau {
  max-width: 620px; margin: 0;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.page-tete-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.page-tete--center .page-tete-corps { text-align: center; }
.page-tete--center .page-tete-titre, .page-tete--center .page-tete-chapeau { margin-inline: auto; }
.page-tete--center .page-tete-actions { justify-content: center; }
.page-tete-credit { z-index: 3; }
.page-tete--avec-sommaire .page-tete-credit { bottom: 88px; }

/* Sommaire : posé au pied de l'en-tête, il le quitte pour rester sous la barre de
   navigation pendant la lecture, et montre la section en cours. */
.sommaire {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 22px;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.sommaire[hidden] { display: none; }
.page-tete--center .sommaire-cadre { display: flex; justify-content: center; }
.sommaire-liste {
  list-style: none; margin: 0; padding: 5px;
  display: flex; gap: 4px;
  width: max-content; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--r-pill);
}
.sommaire-liste::-webkit-scrollbar { display: none; }
.sommaire-lien {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 16px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px;
  color: rgba(255, 255, 255, 0.86);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.sommaire-lien:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sommaire-lien[aria-current="true"] { background: #fff; color: var(--brand-700); }
.sommaire-lien:focus-visible { outline: 2px solid var(--cyan-200); outline-offset: 2px; }
.sommaire-num { font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 700; opacity: 0.62; }
.sommaire.is-suivi {
  position: fixed; z-index: 90;
  top: var(--sommaire-haut, 64px); bottom: auto;
  padding-top: 10px;
  animation: sommaire-arrive 0.35s var(--ease) both;
}
.sommaire.is-suivi .sommaire-liste {
  background: rgba(12, 18, 40, 0.84);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 34px rgba(6, 10, 24, 0.28);
}
@keyframes sommaire-arrive { from { opacity: 0; transform: translateY(-6px); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sommaire-liste { background: rgba(12, 18, 40, 0.86); }
}
.sommaire-liste { transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); }

/* Colonne de lecture : sur grand écran, une fois l'en-tête passé sous la barre, le
   sommaire se range dans la marge gauche, en haut, fondu dans la page. Il y entre sur
   place — chaque numéro glisse de quelques pixels, le fil se trace — sans traverser
   l'écran. Le fil se remplit à mesure de la lecture ; au survol, la colonne se déploie
   en carte de verre qui porte les libellés. */
@media (min-width: 1360px) {
  .sommaire.is-suivi.is-rail {
    top: calc(var(--sommaire-haut, 77px) + 44px); bottom: auto;
    left: max(12px, calc((100vw - var(--shell)) / 2 - 64px)); right: auto;
    width: 48px; max-width: none; margin: 0; padding: 0;
    animation: none;
    transition: opacity 0.4s var(--ease);
  }
  .sommaire.is-rail .sommaire-liste {
    position: relative;
    flex-direction: column; justify-content: space-between; gap: 0;
    width: 48px; padding: 14px 0;
    height: min(calc(100vh - var(--sommaire-haut, 77px) - 150px), calc(var(--n, 5) * 88px));
    min-height: calc(var(--n, 5) * 40px);
    overflow: visible;
    background: transparent; border-color: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: none;
  }
  /* Le fil va du centre du premier numéro à celui du dernier ; sa partie remplie arrive au
     numéro de la section en cours (positions mesurées par le script). */
  .sommaire.is-rail .sommaire-liste::before,
  .sommaire.is-rail .sommaire-liste::after {
    content: ''; position: absolute; left: 50%; top: var(--fil-haut, 30px);
    width: 2px; margin-left: -1px; border-radius: 2px;
  }
  /* Un fil neutre, lisible sur fond clair comme sur fond sombre. */
  .sommaire.is-rail .sommaire-liste::before {
    bottom: var(--fil-bas, 30px); background: rgba(120, 134, 186, 0.32);
    transform-origin: top; animation: fil-trace 0.9s var(--ease-focus) 0.1s both;
  }
  @keyframes fil-trace { from { transform: scaleY(0); } }
  .sommaire.is-rail .sommaire-liste::after {
    height: var(--fil-long, 0px);
    background: linear-gradient(180deg, var(--brand-700), var(--cyan-600));
    transition: height 0.25s linear;
  }
  .sommaire.is-rail .sommaire-liste > li {
    position: relative; z-index: 1;
    animation: rail-entree 0.6s var(--ease-focus) both;
    animation-delay: calc(120ms + var(--i, 0) * 60ms);
  }
  @keyframes rail-entree { from { opacity: 0; transform: translateX(-16px); } }
  /* La colonne qui s'en va est une copie qui glisse vers la marge et s'efface. */
  .sommaire--fantome { pointer-events: none; }
  .sommaire.sommaire--fantome.is-rail .sommaire-liste > li,
  .sommaire.sommaire--fantome.is-rail .sommaire-liste::before { animation: none; }

  .sommaire.is-rail::before {
    content: ''; position: absolute; z-index: 0;
    top: 0; bottom: 0; left: -8px;
    width: calc(48px + 26px + var(--libelles, 180px));
    border-radius: 24px;
    background: var(--glass-bg-elevated);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 0.5px solid var(--glass-border);
    box-shadow: var(--glass-shadow-elevated);
    opacity: 0; transform: scaleX(0.4); transform-origin: left center;
    transition: opacity 0.3s var(--ease), transform 0.45s var(--ease-focus);
    pointer-events: none;
  }
  .sommaire.is-rail:hover::before,
  .sommaire.is-rail:focus-within::before { opacity: 1; transform: none; }

  .sommaire.is-rail .sommaire-lien {
    position: relative;
    width: 48px; min-height: 32px; padding: 0;
    justify-content: center;
    background: transparent;
    color: rgba(26, 35, 100, 0.46);
    transition: color 0.3s var(--ease);
  }
  .sommaire.is-rail .sommaire-lien:hover { background: transparent; color: var(--brand-700); }
  .sommaire.is-rail .sommaire-num {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--page-bg);
    font-size: 11.5px; opacity: 1;
    transition: transform 0.4s var(--ease-focus), color 0.25s var(--ease), background 0.3s var(--ease), box-shadow 0.4s var(--ease);
  }
  .sommaire.is-rail .sommaire-lien[aria-current="true"] { background: transparent; color: #fff; }
  .sommaire.is-rail .sommaire-lien[aria-current="true"] .sommaire-num {
    background: linear-gradient(135deg, var(--brand-700), var(--cyan-600));
    transform: scale(1.2);
    box-shadow: 0 0 0 6px rgba(0, 128, 192, 0.14), 0 8px 22px rgba(31, 52, 130, 0.3);
  }
  /* Sans numéros, un point marque chaque section. */
  .sommaire.is-rail:not(.a-numeros) .sommaire-lien::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 0 6px var(--page-bg);
    transition: transform 0.4s var(--ease-focus);
  }
  .sommaire.is-rail:not(.a-numeros) .sommaire-lien[aria-current="true"]::before {
    background: linear-gradient(135deg, var(--brand-700), var(--cyan-600)); transform: scale(1.4);
  }
  /* Chaque entrée prend la teinte de ce qui passe derrière elle. */
  .sommaire.is-rail:not(:hover):not(:focus-within) li.sur-sombre .sommaire-lien:not([aria-current="true"]) { color: rgba(255, 255, 255, 0.7); }
  .sommaire.is-rail:not(:hover):not(:focus-within) li.sur-sombre .sommaire-lien:not([aria-current="true"]) .sommaire-num { background: rgba(10, 16, 34, 0.6); }
  .sommaire.is-rail:not(.a-numeros):not(:hover):not(:focus-within) li.sur-sombre .sommaire-lien::before { box-shadow: 0 0 0 6px rgba(10, 16, 34, 0.6); }
  .sommaire.is-rail:hover .sommaire-lien,
  .sommaire.is-rail:focus-within .sommaire-lien { color: rgba(26, 35, 100, 0.62); }
  /* Sur la carte du survol, chaque numéro garde un fond plein : le fil ne le traverse pas. */
  .sommaire.is-rail:hover .sommaire-num,
  .sommaire.is-rail:focus-within .sommaire-num { background: #fff; }
  /* La section en cours garde son chiffre blanc sur son disque coloré. */
  .sommaire.is-rail:hover .sommaire-lien[aria-current="true"],
  .sommaire.is-rail:focus-within .sommaire-lien[aria-current="true"] { color: #fff; }
  .sommaire.is-rail:hover .sommaire-lien[aria-current="true"] .sommaire-num,
  .sommaire.is-rail:focus-within .sommaire-lien[aria-current="true"] .sommaire-num { background: linear-gradient(135deg, var(--brand-700), var(--cyan-600)); }
  .sommaire.is-rail:hover .sommaire-lien:not([aria-current="true"]):hover,
  .sommaire.is-rail:focus-within .sommaire-lien:not([aria-current="true"]):focus-visible { color: var(--brand-700); }

  .sommaire.is-rail .sommaire-texte {
    position: absolute; left: calc(100% + 10px); top: 50%;
    padding: 4px 6px;
    color: var(--text-primary); font-size: 13.5px; white-space: nowrap;
    opacity: 0; transform: translate(-12px, -50%);
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.4s var(--ease-focus);
    transition-delay: calc(var(--i, 0) * 35ms);
  }
  .sommaire.is-rail:hover .sommaire-texte,
  .sommaire.is-rail:focus-within .sommaire-texte { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
  .sommaire.is-rail .sommaire-lien[aria-current="true"] .sommaire-texte { color: var(--brand-700); font-weight: 700; }
  .sommaire.is-rail.is-efface { opacity: 0; pointer-events: none; }
}
/* Une section atteinte depuis le sommaire s'arrête sous la barre et le sommaire. */
.ib-block[id] { scroll-margin-top: var(--decalage-ancre, 132px); }

/* Numéro de section, porté par le sur-titre : un repère qui se lit avant le titre. */
.eyebrow[data-section-num]::before {
  content: attr(data-section-num);
  display: block;
  margin-bottom: 12px;
  font-size: clamp(40px, 4.6vw, 60px); line-height: 1;
  font-weight: 800; letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  background: linear-gradient(100deg, var(--brand-700) 0%, var(--cyan-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eyebrow--light[data-section-num]::before,
.ib-on-dark .eyebrow[data-section-num]::before {
  background: linear-gradient(100deg, #fff 0%, var(--cyan-200) 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- chiffres clés ---------- */

.stats-wrap { position: relative; z-index: 5; }
.stats-wrap--overlap { margin-top: clamp(-72px, -6vw, -56px); }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: clamp(22px, 3vw, 34px);
  gap: 10px;
}
.stat { padding-inline: clamp(10px, 1.6vw, 22px); position: relative; }
.stat + .stat::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: var(--glass-border-subtle);
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700;
  letter-spacing: -1.6px; line-height: 1;
  margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  background: var(--accent-line);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-unit { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.stat-badge { letter-spacing: -1px; }
.stat-label { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.35; }

/* ---------- sections ---------- */

.ib-block {
  padding-block: calc(var(--pt, 0px) * var(--space-scale, 1)) calc(var(--pb, 0px) * var(--space-scale, 1));
}
.ib-block--hidden { display: none; }
.section--flush { overflow: hidden; }
.section-head { max-width: 640px; margin-bottom: clamp(28px, 4vh, 48px); }
.section-head--row {
  max-width: none; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px;
}
.gallery-nav { display: flex; gap: 10px; padding-bottom: 6px; }

/* ---------- bloc matière ---------- */

.split {
  display: grid; grid-template-columns: var(--tracks, 1fr 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.split-text { max-width: var(--measure, none); }
.split--reverse .split-visual { order: 2; }
.split-visual { position: relative; padding-bottom: 62px; }
.frame {
  margin: 0; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--glass-shadow-elevated);
  aspect-ratio: 4 / 3.1;
}
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.split-visual:hover .frame img { transform: scale(1.04); }
.frame--inset {
  position: absolute; right: -6px; bottom: 0;
  width: 46%; aspect-ratio: 4 / 3;
  border: 5px solid var(--page-bg);
  border-radius: var(--r-lg);
}
.frame-badge {
  position: absolute; left: 18px; top: 18px;
  padding: 12px 18px; border-radius: var(--r-md);
}
.frame-badge-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.2px; }
.frame-badge-meta { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }

.checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-primary); font-size: 16px; }
.check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.check svg { width: 15px; height: 15px; stroke-width: 2.4; }

/* ---------- performances ---------- */

.perf {
  position: relative; isolation: isolate; overflow: hidden;
  background: #0a1022;
}
.perf > .shell { padding-block: clamp(80px, 12vh, 140px); }
.perf-media { position: absolute; inset: 0; z-index: -2; }
.perf-media img { width: 100%; height: 100%; object-fit: cover; }
.perf::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 10, 24, 0.86) 0%, rgba(6, 10, 24, 0.62) 45%, rgba(6, 10, 24, 0.90) 100%),
    linear-gradient(100deg, rgba(26, 35, 100, 0.72) 0%, rgba(0, 128, 192, 0.22) 100%);
}
.perf-watermark {
  position: absolute; z-index: -1;
  right: -2vw; top: 50%; transform: translateY(-50%);
  margin: 0;
  font-family: var(--font-display);
  font-size: min(34vw, 420px); font-weight: 800; letter-spacing: -0.05em;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.055);
  user-select: none;
}
.perf-inner { position: relative; display: grid; gap: clamp(32px, 5vw, 60px); grid-template-columns: var(--tracks, 1fr 1fr); align-items: center; }
.perf-head { max-width: var(--measure, none); }

.perf-panel { padding: clamp(24px, 3vw, 34px); display: grid; gap: 26px; }
.gauge-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gauge-name {
  margin: 0; font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.gauge-num {
  margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700; letter-spacing: -1px; color: #fff;
}
.gauge-num span { font-size: 13px; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.6); margin-left: 4px; }
.gauge-track {
  height: 8px; border-radius: var(--r-pill); margin: 12px 0 8px;
  background: rgba(255, 255, 255, 0.14); overflow: hidden;
}
.gauge-fill {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--cyan-400), var(--cyan-200));
  box-shadow: 0 0 18px rgba(127, 212, 244, 0.5);
  transition: width 1.4s var(--ease);
}
.gauge.is-in .gauge-fill { width: var(--pct); }
.gauge-note { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.52); }

/* ---------- cartes domaines ---------- */

.cards { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(16px, 2vw, 26px); }
.card {
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow-elevated); }
.card-media { margin: 0; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; background: var(--glass-bg-subtle); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }
.card-body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.card-kicker {
  margin: 0 0 6px; font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent);
}
.card-title {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2;
}
.card-text { margin: 0 0 14px; font-size: 15px; color: var(--text-secondary); flex: 1; }

/* ---------- étapes ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(16px, 2vw, 26px); }
.step { padding: clamp(22px, 2.6vw, 32px); position: relative; overflow: hidden; }
.step::after {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--accent-line); opacity: 0.85;
}
.step-num {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 40px; font-weight: 800; letter-spacing: -2px; line-height: 1;
  background: var(--accent-line);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
}
.step-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.4px; }
.step-text { margin: 0; font-size: 15px; color: var(--text-secondary); }

/* ---------- galerie ---------- */

.gallery {
  display: flex; gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px clamp(20px, 4vw, 40px) 26px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar { display: none; }
.tile {
  position: relative; flex: 0 0 auto;
  width: clamp(250px, 30vw, 400px);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl); overflow: hidden;
  scroll-snap-align: center;
  box-shadow: var(--glass-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.tile--tall { aspect-ratio: 3 / 4; width: clamp(220px, 24vw, 320px); }
.tile-img { position: absolute; inset: 0; display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 10, 24, 0.55) 100%);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow-elevated); }
.tile:hover img { transform: scale(1.07); }
.tile-cap {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px;
  padding: 12px 16px; border-radius: var(--r-md);
}
.tile-title { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
.tile-meta { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }

/* ---------- contact ---------- */

.contact { display: grid; grid-template-columns: var(--tracks, 1fr 1fr); gap: clamp(28px, 4vw, 56px); padding: clamp(26px, 4vw, 52px); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.chip {
  min-height: 40px; padding: 9px 16px;
  border-radius: var(--r-pill); cursor: pointer;
  background: var(--glass-bg-subtle);
  border: 0.5px solid var(--glass-border-subtle);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s var(--ease);
}
.chip:hover { color: var(--text-primary); transform: translateY(-1px); }
.chip.is-active {
  background: linear-gradient(135deg, var(--brand-700), var(--cyan-600));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px rgba(31, 52, 130, 0.28);
}

/* Masqué par le script une fois la demande partie : sans cette garde, « display: grid »
   l'emporterait sur la règle du navigateur et le formulaire garderait toute sa place. */
.form[hidden] { display: none; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; color: var(--text-secondary); }
.field input, .field textarea {
  font-family: var(--font-ui); font-size: 16px; color: var(--text-primary);
  background: var(--glass-bg-subtle);
  border: 0.5px solid var(--glass-border-subtle);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  min-height: 48px;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-tertiary); }
.field input:focus, .field textarea:focus {
  border-color: var(--accent);
  background: var(--glass-bg-elevated);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--text-secondary); margin: 4px 0 2px; }
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex: 0 0 auto; margin: 0;
  border-radius: 7px; cursor: pointer;
  background: #fff;
  /* Une case à cocher doit se voir sans qu'on la cherche : le liseré est franc. */
  border: 1.5px solid rgba(26, 35, 100, 0.34);
  box-shadow: inset 0 1px 2px rgba(10, 16, 34, 0.06);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.consent input:hover { border-color: var(--accent); }
.consent input:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; }
/* La coche d'abord, le dégradé derrière : la première couche est celle du dessus. */
.consent input:checked {
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(31, 52, 130, 0.28);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--brand-700), var(--cyan-600));
  background-size: 14px 14px, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.form-note { margin: 0; font-size: 12.5px; color: var(--text-tertiary); }
.form-privacy { margin: -2px 0 0 34px; font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }
/* champ piège contre les robots : hors de l'écran, hors du parcours clavier et des lecteurs d'écran */
.form-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.contact-side { display: flex; flex-direction: column; gap: 22px; }
.contact-visual { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--glass-shadow); }
.contact-visual img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.contact-visual figcaption { padding: 10px 14px; font-size: 11.5px; color: var(--text-tertiary); background: var(--glass-bg-subtle); }

.contact-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.contact-info li { display: flex; gap: 14px; align-items: flex-start; }
.info-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.info-ico svg { width: 20px; height: 20px; }
.info-label { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-tertiary); }
.info-value { margin: 0; font-size: 15px; line-height: 1.45; }
.info-value a:hover { color: var(--accent); }

/* ---------- pied de page ---------- */

.footer {
  position: relative;
  background: var(--pied-fond, #0d1430);
  color: rgba(255, 255, 255, 0.72);
  padding-top: clamp(48px, 7vh, 76px);
  margin-top: clamp(20px, 4vh, 40px);
}
.footer-inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 44px;
}
.footer-brand p { font-size: 14px; margin: 16px 0 20px; max-width: 34ch; color: rgba(255, 255, 255, 0.6); }
.footer .brand-logo { width: 190px; }
.footer-eu { width: 200px; opacity: 0.85; border-radius: 6px; background: rgba(255, 255, 255, 0.9); padding: 6px 8px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-title {
  margin: 0 0 4px; font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: #fff;
}
.footer-col a, .footer-col p { font-size: 14.5px; margin: 0; color: rgba(255, 255, 255, 0.66); transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--cyan-200); }
.footer-base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px clamp(20px, 4vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-base p { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }

/* ---------- révélation au défilement ---------- */

[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .split-visual { max-width: 620px; }
  .perf-inner { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 22px 10px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
  .nav-cta { display: none; }
  /* le menu passe en tiroir : ce sont les outils qui tiennent la droite */
  .nav-tools { margin-left: auto; }
  .burger {
    display: grid; place-content: center; gap: 5px;
    width: var(--nav-outil); height: var(--nav-outil); border-radius: var(--r-pill); cursor: pointer;
    background: rgba(255, 255, 255, 0.16); border: 0.5px solid rgba(255, 255, 255, 0.28);
  }
    .burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.3s var(--ease); }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .nav-menu {
    position: absolute; top: calc(100% + 8px); left: clamp(12px, 4vw, 20px); right: clamp(12px, 4vw, 20px);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px;
    background: var(--glass-bg-elevated);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border: 0.5px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-shadow-elevated);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-menu a {
    color: var(--text-primary); text-shadow: none;
    padding: 14px 12px; border-radius: var(--r-sm); font-size: 16px;
  }
  .nav-menu a:hover { background: var(--accent-soft); }
  .nav-menu a::after { display: none; }
  /* Dans le tiroir, la page en cours se marque par sa pastille, pas par un soulignement. */
  .nav-menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  .nav-menu .nav-cta {
    display: block; margin-top: 8px; text-align: center;
    border-radius: var(--r-pill); color: #fff; font-size: 16px;
  }
  .nav-menu .nav-cta:hover { background: linear-gradient(135deg, var(--brand-700) 0%, var(--cyan-600) 100%); }
}

@media (max-width: 860px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .hero-body { bottom: 46%; }
  .frame--inset { width: 52%; right: 0; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat + .stat::before { display: none; }
  .stats-wrap { margin-top: -46px; }
  .hero { min-height: 92svh; }
  .hero-title { letter-spacing: -1.4px; }
  .rail-item { flex: 1 1 60px; max-width: none; }
  .rail-label { display: none; }
  .footer-inner { grid-template-columns: 1fr; }
  .langues-globe { display: none; }
  .split-visual { padding-bottom: 0; }
  .frame--inset { display: none; }
  .btn { width: 100%; justify-content: center; }
  .hero-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .gauge .gauge-fill { width: var(--pct); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass, .nav.is-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-bg-elevated); }
}


/* ============================================================
   Couche CMS — éléments propres aux blocs éditables
   ============================================================ */

:root { --space-scale: 1; }

.brand-word {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: -0.4px; color: #fff;
}
.nav.is-stuck .brand-word { color: #fff; }


/* objets de demande : de vrais boutons radio, le formulaire marche sans JavaScript */
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.chip span { pointer-events: none; }
/* Le liseré ne s'affiche qu'au clavier : au clic, la pastille cochée se voit déjà. */
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.chip:has(input:checked), .chip.is-active {
  background: linear-gradient(135deg, var(--brand-700), var(--cyan-600));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px rgba(31, 52, 130, 0.28);
}

.field-legend {
  margin: 0 0 8px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.2px; color: var(--text-secondary);
}

.notice {
  margin: 0 0 18px; padding: 14px 18px; border-radius: var(--r-md);
  font-size: 15px; border: 0.5px solid transparent;
}
.notice--ok {
  background: rgba(52, 199, 89, 0.12); border-color: rgba(52, 199, 89, 0.32); color: #14663a;
}
.notice--error {
  background: rgba(255, 59, 48, 0.10); border-color: rgba(255, 59, 48, 0.30); color: #8d1c14;
}

/* ---------- envoi de la demande ---------- */

/* Bouton en attente : l'anneau prend exactement la place de la flèche (mêmes 18 px, même
   espacement), donc la largeur du bouton ne bouge pas au moment du clic. */
.btn .btn-rond {
  display: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
.btn.is-sending { cursor: progress; }
.btn.is-sending .i-arrow { display: none; }
.btn.is-sending .btn-rond { display: block; animation: btn-tourne 0.8s linear infinite; }
.btn[disabled] { opacity: 0.85; }
@keyframes btn-tourne { to { transform: rotate(360deg); } }

.form-alerte {
  flex: 1 1 100%; margin: 0;
  font-size: 13.5px; font-weight: 600; color: #8d1c14;
}

/* Le mot de confirmation qui remplace les champs : la coche se dessine, un halo s'ouvre. */
/* « display » d'auteur l'emporte sur la règle du navigateur : sans cette ligne, le panneau
   resterait affiché, vide, sur toutes les pages qui portent le formulaire. */
.form-retour[hidden] { display: none; }
.form-retour {
  display: flex; align-items: center; gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.10), rgba(34, 168, 224, 0.08));
  border: 0.5px solid rgba(52, 199, 89, 0.28);
}
.form-retour:focus { outline: none; }
.form-retour-texte {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 19px); font-weight: 600; line-height: 1.35;
  letter-spacing: -0.2px; color: var(--text-primary);
}
.form-retour-ico { position: relative; flex: 0 0 auto; width: 56px; height: 56px; }
.form-retour-ico svg {
  position: relative; z-index: 1; width: 100%; height: 100%;
  fill: none; stroke: #1f9d53; stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.form-retour-ico circle { stroke-opacity: 0.34; }
/* Une seule longueur sert de mesure au trait : il se dessine du début à la fin. */
.form-retour-ico circle { stroke-dasharray: 145; stroke-dashoffset: 145; }
.form-retour-ico path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.form-retour-ico::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 199, 89, 0.30), transparent 68%);
  opacity: 0; transform: scale(0.4);
}
.form-retour.is-in { animation: retour-monte 0.55s var(--ease-spring) both; }
.form-retour.is-in .form-retour-ico circle { animation: trait 0.65s var(--ease) 0.1s forwards; }
.form-retour.is-in .form-retour-ico path { animation: trait 0.45s var(--ease) 0.42s forwards; }
.form-retour.is-in .form-retour-ico::after { animation: halo 0.9s var(--ease) 0.42s forwards; }
.form-retour.is-in .form-retour-texte { animation: rise 0.6s var(--ease) 0.22s both; }
@keyframes retour-monte {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes trait { to { stroke-dashoffset: 0; } }
@keyframes halo {
  40% { opacity: 1; }
  to { opacity: 0; transform: scale(1.5); }
}

/* La demande partie, la carte se resserre autour du message : une seule colonne, le visuel
   décoratif s'efface et les informations passent en ligne. Sans cela elle garderait la
   hauteur du formulaire et resterait aux trois quarts vide. */
.contact.is-envoye { grid-template-columns: 1fr; }
.contact.is-envoye .contact-visual { display: none; }
.contact.is-envoye .contact-info { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

@media (prefers-reduced-motion: reduce) {
  .form-retour-ico circle, .form-retour-ico path { stroke-dashoffset: 0; }
  .btn.is-sending .btn-rond { animation: none; }
}

/* bloc « titre + texte » */
.rich--center .rich-inner { text-align: center; margin-inline: auto; }
.rich--lisible .rich-inner { max-width: 720px; }
.rich--center.rich--lisible .rich-inner { margin-inline: auto; }
.rich--encre { background: linear-gradient(135deg, #101838, #0a1022); }
.rich--encre .rich-body { color: var(--on-dark-soft); }
.rich-body { color: var(--text-secondary); font-size: 17px; }
.rich-body p { margin: 0 0 16px; }
.rich-body ul, .rich-body ol { margin: 0 0 16px; padding-left: 22px; }
.rich-body li { margin-bottom: 8px; }
.rich-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rich-inner .btn { margin-top: 8px; }

.gallery-more { padding-top: 6px; }
.notfound .h2 { margin-top: 4px; }

@media (max-width: 860px) {
  :root { --space-scale: 0.72; }
}
@media (max-width: 560px) {
  :root { --space-scale: 0.56; }
  .cards, .steps { grid-template-columns: 1fr; }
}

/* ============================================================
   Couche CMS — réglages pilotés par l'éditeur
   ============================================================ */

/* retrait latéral et largeur de contenu */
.ib-block { padding-inline: var(--ps, 0px); }
.ib-w-large > .shell { max-width: 1560px; }
.ib-w-full > .shell { max-width: none; }

/* visibilité par appareil (jamais appliquée dans l'éditeur : on doit pouvoir cliquer) */
@media (min-width: 1025px) {
  html:not(.ib-editing) .ib-hide-desktop { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  html:not(.ib-editing) .ib-hide-tablet { display: none !important; }
}
@media (max-width: 640px) {
  html:not(.ib-editing) .ib-hide-mobile { display: none !important; }
}
.ib-editing .ib-hide-desktop,
.ib-editing .ib-hide-tablet,
.ib-editing .ib-hide-mobile,
.ib-editing .ib-row--hidden {
  opacity: 0.42;
  outline: 1px dashed rgba(47, 64, 144, 0.45);
  outline-offset: 3px;
}

/* écarts et colonnes paramétrables */
.cards, .steps { gap: var(--gap, 26px); }
.stats { grid-template-columns: repeat(var(--cols, 4), 1fr); }

/* héros : voile et alignement */
.hero--scrim-leger .hero-scrim { opacity: 0.62; }
.hero--scrim-fort .hero-scrim { opacity: 1; }
.hero--scrim-fort .hero-scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 24, 0.35), rgba(6, 10, 24, 0.55));
}
.hero--center .hero-body { text-align: center; }
.hero--center .hero-title, .hero--center .hero-place { margin-inline: auto; }
.hero--center .hero-actions, .hero--center .hero-rail { justify-content: center; }

/* texte + visuels : sans visuel, une seule colonne */
.split--sansvisuel .split { grid-template-columns: 1fr; }

/* performances : disposition empilée */
.perf--empile .perf-inner { grid-template-columns: 1fr; }

/* galerie : taille des vignettes */
.gallery--petit .tile { width: clamp(200px, 22vw, 290px); }
.gallery--grand .tile { width: clamp(300px, 38vw, 520px); }
.gallery--petit .tile--tall { width: clamp(180px, 18vw, 240px); }
.gallery--grand .tile--tall { width: clamp(260px, 30vw, 400px); }

/* titres de section centrés */
.section-head--center { text-align: center; margin-inline: auto; }

/* titre + texte : variante carte de verre */
.rich--verre .rich-inner { padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); }
.rich--center .rich-inner .btn { margin-inline: auto; }

/* contact sans colonne latérale */
.contact--seul { grid-template-columns: 1fr; }
.contact-info-wrap { margin-top: 4px; }
.info-heading {
  margin: 0 0 12px; font-family: var(--font-display); font-size: 14px;
  font-weight: 700; letter-spacing: -0.2px;
}

/* ---------- formulaire de contact : smartphone ----------
   Sous 640 px seulement : ordinateur et tablettes gardent leur mise en page à l'identique.
   Plus court (champs appariés, objets en grille, espacements resserrés) et plus lisible :
   des champs blancs au liseré franc sur une carte légèrement teintée, au lieu de deux
   blancs translucides presque confondus. */
@media (max-width: 640px) {
  .contact { padding: 22px 18px 24px; gap: 26px; }
  .contact-form .h2--sm { font-size: 27px; margin: 8px 0 10px; }
  .contact-form .body { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }

  .form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 10px; }
  .form .field--seul { grid-column: 1 / -1; }
  .field { gap: 5px; }
  .field label, .field-legend { font-size: 13px; letter-spacing: 0; }
  .field-legend { margin-bottom: 8px; }
  /* 16 px au moins dans les champs : en dessous, iOS agrandit la page à chaque saisie. */
  .field input, .field textarea { font-size: 16px; min-height: 46px; padding: 11px 13px; border-radius: 12px; }
  .field textarea { min-height: 112px; }

  /* Rangées de même hauteur : un objet sur deux lignes n'en décale pas l'alignement. */
  .chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; gap: 8px; margin: 2px 0 20px; }
  .chip { justify-content: center; align-items: center; text-align: center; min-height: 44px; padding: 8px 10px; font-size: 13px; line-height: 1.2; }
  .chip:hover { transform: none; }

  .consent { gap: 10px; font-size: 13px; line-height: 1.45; }
  .form-privacy { margin: -4px 0 0; font-size: 11.5px; line-height: 1.45; }
  .form-actions { margin-top: 2px; gap: 10px; }
  .form-actions .btn { width: 100%; justify-content: center; min-height: 52px; }
  .form-actions .form-note { width: 100%; text-align: center; }

  .contact-side { gap: 18px; }
  .contact-visual img { aspect-ratio: 2 / 1; }
  .contact-visual figcaption { padding: 8px 12px; font-size: 11px; }
  .contact-info { gap: 12px; }
  .contact-info li { gap: 12px; }
  .info-ico { width: 34px; height: 34px; }
  .info-ico svg { width: 17px; height: 17px; }
  .info-value { font-size: 14.5px; }

  /* Contraste, sur fond clair : la carte se teinte, les champs et les objets restent blancs. */
  .ib-block:not(.ib-on-dark) .contact {
    background: rgba(240, 243, 250, 0.96);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: rgba(26, 35, 100, 0.08);
  }
  .ib-block:not(.ib-on-dark) .field label,
  .ib-block:not(.ib-on-dark) .field-legend { color: rgba(10, 16, 34, 0.80); }
  /* Liseré à 0,55 : 3,5:1 contre le champ et 3,2:1 contre la carte, au-dessus des 3:1 que
     demande le WCAG (1.4.11) pour repérer un champ. Avant : 1,16:1, il ne se voyait pas. */
  .ib-block:not(.ib-on-dark) .field input,
  .ib-block:not(.ib-on-dark) .field textarea {
    background: #fff;
    border: 1px solid rgba(26, 35, 100, 0.55);
    box-shadow: 0 1px 2px rgba(10, 16, 34, 0.05);
  }
  .ib-block:not(.ib-on-dark) .field input::placeholder,
  .ib-block:not(.ib-on-dark) .field textarea::placeholder { color: rgba(10, 16, 34, 0.58); }
  .ib-block:not(.ib-on-dark) .field input:focus,
  .ib-block:not(.ib-on-dark) .field textarea:focus {
    background: #fff; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47, 64, 144, 0.16);
  }
  /* L'objet choisi garde son dégradé : seuls les autres passent au blanc. */
  .ib-block:not(.ib-on-dark) .chips .chip:not(.is-active):not(:has(input:checked)) {
    background: #fff; border: 1px solid rgba(26, 35, 100, 0.30); color: rgba(10, 16, 34, 0.80);
  }
  .ib-block:not(.ib-on-dark) .form-privacy { color: rgba(10, 16, 34, 0.55); }
}
/* Les plus petits écrans (moins de 360 px) : les champs appariés reprennent toute la largeur. */
@media (max-width: 359px) {
  .form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- pied de page composé de blocs ---------- */

.footer-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(22px, 3.4vw, 48px);
  padding-bottom: 40px;
  align-items: start;
}
.footer .ib-block { padding-inline: var(--ps, 0px); }
.footer-col { grid-column: span var(--span, 1); display: flex; flex-direction: column; gap: 10px; }
.footer-col--brand { gap: 14px; }
.footer-text { font-size: 14px; margin: 0; max-width: 34ch; color: rgba(255, 255, 255, 0.62); }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a, .footer-line { font-size: 14.5px; margin: 0; color: rgba(255, 255, 255, 0.66); }
.footer-links a { transition: color 0.2s var(--ease); }
.footer-links a:hover, .footer-line a:hover { color: var(--cyan-200); }
.footer-line--muted { color: rgba(255, 255, 255, 0.42); font-size: 13px; }
.footer-line--ico { padding-left: 26px; position: relative; }
.footer-line--ico::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  background: currentColor; opacity: 0.55;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.footer-line--pin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.footer-line--tel::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a10.5 10.5 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.5 5.7 2 2 0 0 1 6.5 3.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a10.5 10.5 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.5 5.7 2 2 0 0 1 6.5 3.5Z'/%3E%3C/svg%3E");
}
.footer-line--mail::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
}
.footer-body { font-size: 14.5px; color: rgba(255, 255, 255, 0.66); }
.footer-body p { margin: 0 0 10px; }

.footer-base {
  grid-column: 1 / -1; order: 99;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 18px; margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-base p { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }
.footer-base--centre { flex-direction: column; text-align: center; }
.footer-base-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-base-links a { color: rgba(255, 255, 255, 0.55); }
.footer-base-links a:hover { color: var(--cyan-200); }

/* aperçu du pied de page dans l'éditeur */
/* sous la barre fixe du site : la note reste lisible */
.zone-stage { min-height: 150px; padding-top: 84px; display: grid; place-items: center; }
.zone-stage-note {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-tertiary);
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col { grid-column: span 1; }
  .footer-col--brand { grid-column: 1 / -1; }
}

/* ---------- pied de page ----------
   Une nappe d'encre unie sous la page, sans lueur ni dégradé : un simple filet la sépare
   du contenu. Titres soulignés d'un trait de couleur, liens qui s'allument. */
.footer {
  isolation: isolate; overflow: hidden;
  margin-top: clamp(28px, 5vh, 56px);
  background: var(--pied-fond, #0d1430);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-grid { padding-top: clamp(8px, 1.5vh, 16px); }
.footer .footer-title {
  position: relative; margin: 0 0 8px; padding-bottom: 12px;
  font-size: 12px; letter-spacing: 1.6px; color: #fff;
}
.footer .footer-title::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 22px; height: 2px; border-radius: 2px;
  background: var(--cyan-400);
}
.footer-links a, .footer-line a, .footer-base-links a {
  position: relative; width: fit-content;
  transition: color 0.2s var(--ease);
}
.footer-links a::before, .footer-line a::before, .footer-base-links a::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; opacity: 0.6;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
.footer-links a:hover, .footer-line a:hover, .footer-base-links a:hover { color: #fff; }
.footer-links a:hover::before, .footer-line a:hover::before, .footer-base-links a:hover::before { transform: scaleX(1); }
.footer-links a:focus-visible, .footer-line a:focus-visible, .footer-base-links a:focus-visible {
  outline: 2px solid var(--cyan-200); outline-offset: 3px; border-radius: 4px;
}
.footer-line--ico::before { background: var(--cyan-200); opacity: 0.8; }
.footer-base { border-top-color: rgba(255, 255, 255, 0.08); }
/* Mobile : un pied compact sur deux colonnes. La marque et les coordonnées (lignes longues)
   prennent toute la largeur, les listes de liens se partagent la rangée. */
@media (max-width: 560px) {
  .footer { padding-top: 36px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; padding-bottom: 26px; }
  .footer-col--brand, .footer-grid > .ib-footer_contact, .footer-grid > .ib-footer_text { grid-column: 1 / -1; }
  .footer-col--brand .brand-logo { width: 150px !important; }
  .footer .footer-title { margin-bottom: 4px; padding-bottom: 9px; }
  .footer-links { gap: 7px; }
  .footer-links a, .footer-line { font-size: 14px; }
  .footer-base { padding-top: 14px; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* Page sans photo en tête : la barre est opaque dès le chargement. */
.nav--solid {
  background: rgba(12, 18, 40, 0.86);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 34px rgba(8, 14, 34, 0.22);
}
.nav--solid .brand-logo { filter: none; }
.nav--solid .nav-menu a { text-shadow: none; }

/* ============================================================
   Apparence pilotée par l'éditeur : fonds, accents, tailles
   Toutes les valeurs viennent de palettes fermées (voir Blocks).
   ============================================================ */

/* ---------- fonds ---------- */

.ib-bg-couleur { background-color: var(--bg-color, #f2f5fb); }
.ib-bg-degrade {
  background: linear-gradient(var(--bg-angle, 135deg), var(--bg-stops, #1a2364 0%, #2f4090 45%, #0080c0 100%));
}
.ib-bg-verre {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border-block: 0.5px solid var(--glass-border);
}

/* Fond et voile vivent dans de vrais calques sous le contenu (block_open les pose) :
   ::before et ::after restent aux blocs et au cadre de sélection de l'éditeur. */
.ib-bg-couleur, .ib-bg-degrade, .ib-bg-image, .ib-ov { position: relative; isolation: isolate; }
.ib-calques {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none; border-radius: inherit;
}
/* la couleur et le dégradé sont repeints dans le calque : un voile en mode de fusion
   doit trouver sous lui ce qu'il fusionne */
.ib-bg-couleur > .ib-calques { background-color: var(--bg-color); }
.ib-bg-degrade > .ib-calques { background: linear-gradient(var(--bg-angle, 135deg), var(--bg-stops)); }
.ib-calque-image, .ib-calque-voile { position: absolute; inset: 0; }

.ib-calque-image { background: var(--bg-image) center / cover no-repeat; }
@media (max-width: 900px) { .ib-calque-image { background-image: var(--bg-image-m, var(--bg-image)); } }

/* ---------- transition avec la section du dessus ---------- */
/* Les deux fonds se mêlent de part et d'autre de la jonction, sous tout le contenu. La
   section du dessus prolonge son fond, plein, sous le haut de celle-ci (ib-trans-dessous,
   --trans-dessous) ; celle-ci étend le sien sur la marge basse du dessus (--trans-haut) et
   le laisse s'évaporer selon le motif choisi sur toute la bande : là où il manque, on voit
   le fond du dessus. site.js mesure les marges ; rien ne recouvre un contenu. */
.ib-trans { position: relative; isolation: isolate; --trans-bande: calc(var(--trans-haut, 0px) + var(--trans-bas, 96px)); }
.ib-trans.ib-bg-couleur, .ib-trans.ib-bg-degrade { background: none; }
.ib-trans > .ib-calques { top: calc(-1 * var(--trans-haut, 0px)); }
.ib-trans:not(.ib-bg-couleur):not(.ib-bg-degrade):not(.ib-bg-image):not(.ib-bg-verre) > .ib-calques { background: var(--page-bg); }
.ib-trans.ib-bg-verre { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top-color: transparent; }
.ib-trans.ib-bg-verre > .ib-calques { background: var(--glass-bg); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); }
.ib-trans-dessous > .ib-calques { bottom: calc(-1 * var(--trans-dessous, 0px)); }
/* Une section qui rogne ses débords (bandeaux qui défilent) ne rogne plus qu'en largeur. */
.ib-trans.section--flush, .ib-trans-dessous.section--flush { overflow: visible; overflow-x: clip; }
.ib-trans-disperse.ib-trans-h-courte > .ib-calques {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.240%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.480%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.714%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.2%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.260%27%20k3%3D%271%27%20k4%3D%27-0.630%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275%27%20intercept%3D%27-2.00%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.240%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.480%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.714%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.2%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.260%27%20k3%3D%271%27%20k4%3D%27-0.630%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275%27%20intercept%3D%27-2.00%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
}
.ib-trans-disperse > .ib-calques {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.160%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.320%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.626%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.2%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.260%27%20k3%3D%271%27%20k4%3D%27-0.630%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275%27%20intercept%3D%27-2.00%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.160%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.320%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.626%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.2%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.260%27%20k3%3D%271%27%20k4%3D%27-0.630%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275%27%20intercept%3D%27-2.00%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
}
.ib-trans-disperse.ib-trans-h-longue > .ib-calques {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.110%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.220%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.571%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.2%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.260%27%20k3%3D%271%27%20k4%3D%27-0.630%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275%27%20intercept%3D%27-2.00%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.110%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.220%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.571%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.2%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.260%27%20k3%3D%271%27%20k4%3D%27-0.630%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275%27%20intercept%3D%27-2.00%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
}
.ib-trans-nuees.ib-trans-h-courte > .ib-calques {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.240%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.480%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.714%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.022%200.055%27%20numOctaves%3D%273%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.893%27%20k3%3D%271%27%20k4%3D%27-0.947%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%271.2%27%20intercept%3D%27-0.10%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.240%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.480%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.714%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.022%200.055%27%20numOctaves%3D%273%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.893%27%20k3%3D%271%27%20k4%3D%27-0.947%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%271.2%27%20intercept%3D%27-0.10%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
}
.ib-trans-nuees > .ib-calques {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.160%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.320%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.626%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.022%200.055%27%20numOctaves%3D%273%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.893%27%20k3%3D%271%27%20k4%3D%27-0.947%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%271.2%27%20intercept%3D%27-0.10%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.160%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.320%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.626%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.022%200.055%27%20numOctaves%3D%273%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.893%27%20k3%3D%271%27%20k4%3D%27-0.947%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%271.2%27%20intercept%3D%27-0.10%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
}
.ib-trans-nuees.ib-trans-h-longue > .ib-calques {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.110%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.220%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.571%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.022%200.055%27%20numOctaves%3D%273%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.893%27%20k3%3D%271%27%20k4%3D%27-0.947%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%271.2%27%20intercept%3D%27-0.10%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%270.110%27%20stop-opacity%3D%270.12%27%2F%3E%3Cstop%20offset%3D%270.220%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.571%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%271.000%27%20stop-opacity%3D%271%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.022%200.055%27%20numOctaves%3D%273%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%20result%3D%27b%27%2F%3E%3CfeComponentTransfer%20in%3D%27b%27%20result%3D%27c%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%273%27%20intercept%3D%27-1%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27c%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%27%20result%3D%27a%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27a%27%20operator%3D%27arithmetic%27%20k2%3D%271.893%27%20k3%3D%271%27%20k4%3D%27-0.947%27%20result%3D%27m%27%2F%3E%3CfeComponentTransfer%20in%3D%27m%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%271.2%27%20intercept%3D%27-0.10%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url(%23g)%27%20filter%3D%27url(%23f)%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 480px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
}
.ib-trans-fondu.ib-trans-h-courte > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 24.0%, rgba(0, 0, 0, 0.5) 48.0%, rgba(0, 0, 0, 0.9) 71.4%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 24.0%, rgba(0, 0, 0, 0.5) 48.0%, rgba(0, 0, 0, 0.9) 71.4%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-fondu > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 16.0%, rgba(0, 0, 0, 0.5) 32.0%, rgba(0, 0, 0, 0.9) 62.6%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 16.0%, rgba(0, 0, 0, 0.5) 32.0%, rgba(0, 0, 0, 0.9) 62.6%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-fondu.ib-trans-h-longue > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 11.0%, rgba(0, 0, 0, 0.5) 22.0%, rgba(0, 0, 0, 0.9) 57.1%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 11.0%, rgba(0, 0, 0, 0.5) 22.0%, rgba(0, 0, 0, 0.9) 57.1%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-brume.ib-trans-h-courte > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 24.0%, rgba(0, 0, 0, 0.5) 48.0%, rgba(0, 0, 0, 0.9) 71.4%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 24.0%, rgba(0, 0, 0, 0.5) 48.0%, rgba(0, 0, 0, 0.9) 71.4%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-brume > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 16.0%, rgba(0, 0, 0, 0.5) 32.0%, rgba(0, 0, 0, 0.9) 62.6%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 16.0%, rgba(0, 0, 0, 0.5) 32.0%, rgba(0, 0, 0, 0.9) 62.6%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-brume.ib-trans-h-longue > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 11.0%, rgba(0, 0, 0, 0.5) 22.0%, rgba(0, 0, 0, 0.9) 57.1%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 11.0%, rgba(0, 0, 0, 0.5) 22.0%, rgba(0, 0, 0, 0.9) 57.1%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-lueur.ib-trans-h-courte > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 24.0%, rgba(0, 0, 0, 0.5) 48.0%, rgba(0, 0, 0, 0.9) 71.4%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 24.0%, rgba(0, 0, 0, 0.5) 48.0%, rgba(0, 0, 0, 0.9) 71.4%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-lueur > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 16.0%, rgba(0, 0, 0, 0.5) 32.0%, rgba(0, 0, 0, 0.9) 62.6%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 16.0%, rgba(0, 0, 0, 0.5) 32.0%, rgba(0, 0, 0, 0.9) 62.6%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-lueur.ib-trans-h-longue > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 11.0%, rgba(0, 0, 0, 0.5) 22.0%, rgba(0, 0, 0, 0.9) 57.1%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0.0%, rgba(0, 0, 0, 0.12) 11.0%, rgba(0, 0, 0, 0.5) 22.0%, rgba(0, 0, 0, 0.9) 57.1%, rgba(0, 0, 0, 1) 100.0%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-vague > .ib-calques {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27f%27%3E%3CfeGaussianBlur%20stdDeviation%3D%273%27%2F%3E%3C%2Ffilter%3E%3Cpath%20filter%3D%27url(%23f)%27%20d%3D%27M-600%2058%20C%20-400%20108%20-200%20108%200%2058%20C%20200%208%20400%208%20600%2058%20S%201000%20108%201200%2058%20S%201600%208%201800%2058%20V%20160%20H%20-600%20Z%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27f%27%3E%3CfeGaussianBlur%20stdDeviation%3D%273%27%2F%3E%3C%2Ffilter%3E%3Cpath%20filter%3D%27url(%23f)%27%20d%3D%27M-600%2058%20C%20-400%20108%20-200%20108%200%2058%20C%20200%208%20400%208%20600%2058%20S%201000%20108%201200%2058%20S%201600%208%201800%2058%20V%20160%20H%20-600%20Z%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 1200px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 1200px var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
}
.ib-trans-arche > .ib-calques {
  -webkit-mask-image:
    radial-gradient(ellipse 75% 100% at 50% 100%, #000 96%, transparent 100%),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(ellipse 75% 100% at 50% 100%, #000 96%, transparent 100%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-biais > .ib-calques {
  -webkit-mask-image:
    linear-gradient(to top right, #000 48%, transparent 52%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to top right, #000 48%, transparent 52%),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px); mask-size: 100% var(--trans-bande), 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}
.ib-trans-ajoure > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.9px, transparent 2.6px),
    radial-gradient(circle, #000 2.9px, transparent 3.6px),
    radial-gradient(circle, #000 3.8px, transparent 4.5px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.8px, transparent 6.5px),
    radial-gradient(circle, #000 6.7px, transparent 7.4px),
    radial-gradient(circle, #000 7.6px, transparent 8.3px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.9px, transparent 2.6px),
    radial-gradient(circle, #000 2.9px, transparent 3.6px),
    radial-gradient(circle, #000 3.8px, transparent 4.5px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.8px, transparent 6.5px),
    radial-gradient(circle, #000 6.7px, transparent 7.4px),
    radial-gradient(circle, #000 7.6px, transparent 8.3px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
/* Trame ajourée à la mesure de la bande disponible (data-rangs, posé par site.js). */
.ib-trans-ajoure[data-rangs="2"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="3"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="4"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="5"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 2.9px, transparent 3.6px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 6.7px, transparent 7.4px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 2.9px, transparent 3.6px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 6.7px, transparent 7.4px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="6"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 2.5px, transparent 3.2px),
    radial-gradient(circle, #000 4.0px, transparent 4.7px),
    radial-gradient(circle, #000 5.6px, transparent 6.3px),
    radial-gradient(circle, #000 7.1px, transparent 7.8px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 2.5px, transparent 3.2px),
    radial-gradient(circle, #000 4.0px, transparent 4.7px),
    radial-gradient(circle, #000 5.6px, transparent 6.3px),
    radial-gradient(circle, #000 7.1px, transparent 7.8px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="7"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 2.3px, transparent 3.0px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 7.3px, transparent 8.0px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 2.3px, transparent 3.0px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 7.3px, transparent 8.0px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="8"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 2.1px, transparent 2.8px),
    radial-gradient(circle, #000 3.2px, transparent 3.9px),
    radial-gradient(circle, #000 4.3px, transparent 5.0px),
    radial-gradient(circle, #000 5.3px, transparent 6.0px),
    radial-gradient(circle, #000 6.4px, transparent 7.1px),
    radial-gradient(circle, #000 7.5px, transparent 8.2px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 2.1px, transparent 2.8px),
    radial-gradient(circle, #000 3.2px, transparent 3.9px),
    radial-gradient(circle, #000 4.3px, transparent 5.0px),
    radial-gradient(circle, #000 5.3px, transparent 6.0px),
    radial-gradient(circle, #000 6.4px, transparent 7.1px),
    radial-gradient(circle, #000 7.5px, transparent 8.2px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="9"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.9px, transparent 2.6px),
    radial-gradient(circle, #000 2.9px, transparent 3.6px),
    radial-gradient(circle, #000 3.8px, transparent 4.5px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.8px, transparent 6.5px),
    radial-gradient(circle, #000 6.7px, transparent 7.4px),
    radial-gradient(circle, #000 7.6px, transparent 8.3px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.9px, transparent 2.6px),
    radial-gradient(circle, #000 2.9px, transparent 3.6px),
    radial-gradient(circle, #000 3.8px, transparent 4.5px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.8px, transparent 6.5px),
    radial-gradient(circle, #000 6.7px, transparent 7.4px),
    radial-gradient(circle, #000 7.6px, transparent 8.3px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="10"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.8px, transparent 2.5px),
    radial-gradient(circle, #000 2.7px, transparent 3.4px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 4.4px, transparent 5.1px),
    radial-gradient(circle, #000 5.2px, transparent 5.9px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 6.9px, transparent 7.6px),
    radial-gradient(circle, #000 7.8px, transparent 8.5px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.8px, transparent 2.5px),
    radial-gradient(circle, #000 2.7px, transparent 3.4px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 4.4px, transparent 5.1px),
    radial-gradient(circle, #000 5.2px, transparent 5.9px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 6.9px, transparent 7.6px),
    radial-gradient(circle, #000 7.8px, transparent 8.5px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 120px), 6px calc(var(--trans-bande) - 108px), 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 120px), 6px calc(var(--trans-bande) - 108px), 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="11"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.8px, transparent 2.5px),
    radial-gradient(circle, #000 2.5px, transparent 3.2px),
    radial-gradient(circle, #000 3.3px, transparent 4.0px),
    radial-gradient(circle, #000 4.0px, transparent 4.7px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.6px, transparent 6.3px),
    radial-gradient(circle, #000 6.3px, transparent 7.0px),
    radial-gradient(circle, #000 7.1px, transparent 7.8px),
    radial-gradient(circle, #000 7.8px, transparent 8.5px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.8px, transparent 2.5px),
    radial-gradient(circle, #000 2.5px, transparent 3.2px),
    radial-gradient(circle, #000 3.3px, transparent 4.0px),
    radial-gradient(circle, #000 4.0px, transparent 4.7px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.6px, transparent 6.3px),
    radial-gradient(circle, #000 6.3px, transparent 7.0px),
    radial-gradient(circle, #000 7.1px, transparent 7.8px),
    radial-gradient(circle, #000 7.8px, transparent 8.5px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 132px), 6px calc(var(--trans-bande) - 120px), 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 132px), 6px calc(var(--trans-bande) - 120px), 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="12"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.7px, transparent 2.4px),
    radial-gradient(circle, #000 2.4px, transparent 3.1px),
    radial-gradient(circle, #000 3.1px, transparent 3.8px),
    radial-gradient(circle, #000 3.8px, transparent 4.5px),
    radial-gradient(circle, #000 4.5px, transparent 5.2px),
    radial-gradient(circle, #000 5.1px, transparent 5.8px),
    radial-gradient(circle, #000 5.8px, transparent 6.5px),
    radial-gradient(circle, #000 6.5px, transparent 7.2px),
    radial-gradient(circle, #000 7.2px, transparent 7.9px),
    radial-gradient(circle, #000 7.9px, transparent 8.6px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.7px, transparent 2.4px),
    radial-gradient(circle, #000 2.4px, transparent 3.1px),
    radial-gradient(circle, #000 3.1px, transparent 3.8px),
    radial-gradient(circle, #000 3.8px, transparent 4.5px),
    radial-gradient(circle, #000 4.5px, transparent 5.2px),
    radial-gradient(circle, #000 5.1px, transparent 5.8px),
    radial-gradient(circle, #000 5.8px, transparent 6.5px),
    radial-gradient(circle, #000 6.5px, transparent 7.2px),
    radial-gradient(circle, #000 7.2px, transparent 7.9px),
    radial-gradient(circle, #000 7.9px, transparent 8.6px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 144px), 6px calc(var(--trans-bande) - 132px), 0px calc(var(--trans-bande) - 120px), 6px calc(var(--trans-bande) - 108px), 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 144px), 6px calc(var(--trans-bande) - 132px), 0px calc(var(--trans-bande) - 120px), 6px calc(var(--trans-bande) - 108px), 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="13"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.6px, transparent 2.3px),
    radial-gradient(circle, #000 2.3px, transparent 3.0px),
    radial-gradient(circle, #000 2.9px, transparent 3.6px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 4.2px, transparent 4.9px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.4px, transparent 6.1px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 6.7px, transparent 7.4px),
    radial-gradient(circle, #000 7.3px, transparent 8.0px),
    radial-gradient(circle, #000 8.0px, transparent 8.7px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.6px, transparent 2.3px),
    radial-gradient(circle, #000 2.3px, transparent 3.0px),
    radial-gradient(circle, #000 2.9px, transparent 3.6px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 4.2px, transparent 4.9px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.4px, transparent 6.1px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 6.7px, transparent 7.4px),
    radial-gradient(circle, #000 7.3px, transparent 8.0px),
    radial-gradient(circle, #000 8.0px, transparent 8.7px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 156px), 6px calc(var(--trans-bande) - 144px), 0px calc(var(--trans-bande) - 132px), 6px calc(var(--trans-bande) - 120px), 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 156px), 6px calc(var(--trans-bande) - 144px), 0px calc(var(--trans-bande) - 132px), 6px calc(var(--trans-bande) - 120px), 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="14"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.6px, transparent 2.3px),
    radial-gradient(circle, #000 2.2px, transparent 2.9px),
    radial-gradient(circle, #000 2.8px, transparent 3.5px),
    radial-gradient(circle, #000 3.3px, transparent 4.0px),
    radial-gradient(circle, #000 3.9px, transparent 4.6px),
    radial-gradient(circle, #000 4.5px, transparent 5.2px),
    radial-gradient(circle, #000 5.1px, transparent 5.8px),
    radial-gradient(circle, #000 5.7px, transparent 6.4px),
    radial-gradient(circle, #000 6.3px, transparent 7.0px),
    radial-gradient(circle, #000 6.8px, transparent 7.5px),
    radial-gradient(circle, #000 7.4px, transparent 8.1px),
    radial-gradient(circle, #000 8.0px, transparent 8.7px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.6px, transparent 2.3px),
    radial-gradient(circle, #000 2.2px, transparent 2.9px),
    radial-gradient(circle, #000 2.8px, transparent 3.5px),
    radial-gradient(circle, #000 3.3px, transparent 4.0px),
    radial-gradient(circle, #000 3.9px, transparent 4.6px),
    radial-gradient(circle, #000 4.5px, transparent 5.2px),
    radial-gradient(circle, #000 5.1px, transparent 5.8px),
    radial-gradient(circle, #000 5.7px, transparent 6.4px),
    radial-gradient(circle, #000 6.3px, transparent 7.0px),
    radial-gradient(circle, #000 6.8px, transparent 7.5px),
    radial-gradient(circle, #000 7.4px, transparent 8.1px),
    radial-gradient(circle, #000 8.0px, transparent 8.7px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 168px), 6px calc(var(--trans-bande) - 156px), 0px calc(var(--trans-bande) - 144px), 6px calc(var(--trans-bande) - 132px), 0px calc(var(--trans-bande) - 120px), 6px calc(var(--trans-bande) - 108px), 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 168px), 6px calc(var(--trans-bande) - 156px), 0px calc(var(--trans-bande) - 144px), 6px calc(var(--trans-bande) - 132px), 0px calc(var(--trans-bande) - 120px), 6px calc(var(--trans-bande) - 108px), 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="15"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.5px, transparent 2.2px),
    radial-gradient(circle, #000 2.1px, transparent 2.8px),
    radial-gradient(circle, #000 2.6px, transparent 3.3px),
    radial-gradient(circle, #000 3.2px, transparent 3.9px),
    radial-gradient(circle, #000 3.7px, transparent 4.4px),
    radial-gradient(circle, #000 4.3px, transparent 5.0px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.3px, transparent 6.0px),
    radial-gradient(circle, #000 5.9px, transparent 6.6px),
    radial-gradient(circle, #000 6.4px, transparent 7.1px),
    radial-gradient(circle, #000 7.0px, transparent 7.7px),
    radial-gradient(circle, #000 7.5px, transparent 8.2px),
    radial-gradient(circle, #000 8.1px, transparent 8.8px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.5px, transparent 2.2px),
    radial-gradient(circle, #000 2.1px, transparent 2.8px),
    radial-gradient(circle, #000 2.6px, transparent 3.3px),
    radial-gradient(circle, #000 3.2px, transparent 3.9px),
    radial-gradient(circle, #000 3.7px, transparent 4.4px),
    radial-gradient(circle, #000 4.3px, transparent 5.0px),
    radial-gradient(circle, #000 4.8px, transparent 5.5px),
    radial-gradient(circle, #000 5.3px, transparent 6.0px),
    radial-gradient(circle, #000 5.9px, transparent 6.6px),
    radial-gradient(circle, #000 6.4px, transparent 7.1px),
    radial-gradient(circle, #000 7.0px, transparent 7.7px),
    radial-gradient(circle, #000 7.5px, transparent 8.2px),
    radial-gradient(circle, #000 8.1px, transparent 8.8px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 180px), 6px calc(var(--trans-bande) - 168px), 0px calc(var(--trans-bande) - 156px), 6px calc(var(--trans-bande) - 144px), 0px calc(var(--trans-bande) - 132px), 6px calc(var(--trans-bande) - 120px), 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 180px), 6px calc(var(--trans-bande) - 168px), 0px calc(var(--trans-bande) - 156px), 6px calc(var(--trans-bande) - 144px), 0px calc(var(--trans-bande) - 132px), 6px calc(var(--trans-bande) - 120px), 0px calc(var(--trans-bande) - 108px), 6px calc(var(--trans-bande) - 96px), 0px calc(var(--trans-bande) - 84px), 6px calc(var(--trans-bande) - 72px), 0px calc(var(--trans-bande) - 60px), 6px calc(var(--trans-bande) - 48px), 0px calc(var(--trans-bande) - 36px), 6px calc(var(--trans-bande) - 24px), 0px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
.ib-trans-ajoure[data-rangs="16"] > .ib-calques {
  -webkit-mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.5px, transparent 2.2px),
    radial-gradient(circle, #000 2.0px, transparent 2.7px),
    radial-gradient(circle, #000 2.5px, transparent 3.2px),
    radial-gradient(circle, #000 3.0px, transparent 3.7px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 4.0px, transparent 4.7px),
    radial-gradient(circle, #000 4.5px, transparent 5.2px),
    radial-gradient(circle, #000 5.1px, transparent 5.8px),
    radial-gradient(circle, #000 5.6px, transparent 6.3px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 6.6px, transparent 7.3px),
    radial-gradient(circle, #000 7.1px, transparent 7.8px),
    radial-gradient(circle, #000 7.6px, transparent 8.3px),
    radial-gradient(circle, #000 8.1px, transparent 8.8px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle, #000 1.0px, transparent 1.7px),
    radial-gradient(circle, #000 1.5px, transparent 2.2px),
    radial-gradient(circle, #000 2.0px, transparent 2.7px),
    radial-gradient(circle, #000 2.5px, transparent 3.2px),
    radial-gradient(circle, #000 3.0px, transparent 3.7px),
    radial-gradient(circle, #000 3.5px, transparent 4.2px),
    radial-gradient(circle, #000 4.0px, transparent 4.7px),
    radial-gradient(circle, #000 4.5px, transparent 5.2px),
    radial-gradient(circle, #000 5.1px, transparent 5.8px),
    radial-gradient(circle, #000 5.6px, transparent 6.3px),
    radial-gradient(circle, #000 6.1px, transparent 6.8px),
    radial-gradient(circle, #000 6.6px, transparent 7.3px),
    radial-gradient(circle, #000 7.1px, transparent 7.8px),
    radial-gradient(circle, #000 7.6px, transparent 8.3px),
    radial-gradient(circle, #000 8.1px, transparent 8.8px),
    radial-gradient(circle, #000 9.0px, transparent 9.7px),
    linear-gradient(#000, #000);
  -webkit-mask-position: 0px calc(var(--trans-bande) - 192px), 6px calc(var(--trans-bande) - 180px), 0px calc(var(--trans-bande) - 168px), 6px calc(var(--trans-bande) - 156px), 0px calc(var(--trans-bande) - 144px), 6px calc(var(--trans-bande) - 132px), 0px calc(var(--trans-bande) - 120px), 6px calc(var(--trans-bande) - 108px), 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%; mask-position: 0px calc(var(--trans-bande) - 192px), 6px calc(var(--trans-bande) - 180px), 0px calc(var(--trans-bande) - 168px), 6px calc(var(--trans-bande) - 156px), 0px calc(var(--trans-bande) - 144px), 6px calc(var(--trans-bande) - 132px), 0px calc(var(--trans-bande) - 120px), 6px calc(var(--trans-bande) - 108px), 0px calc(var(--trans-bande) - 96px), 6px calc(var(--trans-bande) - 84px), 0px calc(var(--trans-bande) - 72px), 6px calc(var(--trans-bande) - 60px), 0px calc(var(--trans-bande) - 48px), 6px calc(var(--trans-bande) - 36px), 0px calc(var(--trans-bande) - 24px), 6px calc(var(--trans-bande) - 12px), 0 100%;
  -webkit-mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px); mask-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% calc(100% - var(--trans-bande) + 1px);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}
/* Jonction du fondu dépoli et du fondu lumineux : un calque à part sur la bande, sous le
   contenu (un flou d'arrière-plan sous un masque ne verrait que son propre calque). */
.ib-calque-jonction {
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--trans-haut, 0px)); height: var(--trans-bande);
  z-index: -1; pointer-events: none;
}
.ib-trans-brume > .ib-calque-jonction {
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
}
.ib-trans-lueur > .ib-calque-jonction {
  background: radial-gradient(ellipse 60% 26px at 50% var(--trans-haut, 0px), rgba(127, 212, 244, 0.55), rgba(127, 212, 244, 0.16) 55%, transparent);
  mix-blend-mode: screen;
}
/* ---------- fin des transitions ---------- */





















.ib-bgp-haut .ib-calque-image { background-position: center 18%; }
.ib-bgp-bas .ib-calque-image { background-position: center 82%; }
.ib-bgp-gauche .ib-calque-image { background-position: 18% center; }
.ib-bgp-droite .ib-calque-image { background-position: 82% center; }

.ib-bgm-zoom .ib-calque-image { animation: ib-zoom-lent 26s var(--ease) infinite alternate; will-change: transform; }
@keyframes ib-zoom-lent { from { transform: scale(1); } to { transform: scale(1.12); } }
/* La frise de défilement est portée par la section : view() posé sur l'image s'accrocherait
   au calque, que son overflow: hidden fait conteneur de défilement, et resterait immobile. */
@supports (animation-timeline: view()) {
  .ib-bgm-parallaxe { view-timeline: --ib-parallaxe block; }
  .ib-bgm-parallaxe .ib-calque-image {
    inset: -14% 0;
    animation: ib-parallaxe linear both;
    animation-timeline: --ib-parallaxe;
  }
  @keyframes ib-parallaxe { from { transform: translate3d(0, -9%, 0); } to { transform: translate3d(0, 9%, 0); } }
}

/* sur fond sombre, le texte et le verre basculent */
.ib-on-dark {
  --text-primary: rgba(255, 255, 255, 0.94);
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-tertiary: rgba(255, 255, 255, 0.46);
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-bg-subtle: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-subtle: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}
.ib-on-dark .h2 { color: var(--text-primary); }
.ib-on-dark .h2 em {
  background: linear-gradient(90deg, var(--cyan-200) 0%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ib-on-dark .eyebrow { color: var(--cyan-200); }
.ib-bg-degrade.ib-on-dark .eyebrow { color: rgba(255, 255, 255, 0.82); }

/* ---------- couleur d'accent ---------- */

.ib-accent-cyan {
  --accent: var(--cyan-600);
  --accent-soft: rgba(0, 128, 192, 0.12);
  --accent-line: linear-gradient(90deg, var(--cyan-600) 0%, var(--cyan-200) 100%);
}
.ib-accent-encre {
  --accent: var(--brand-900);
  --accent-soft: rgba(26, 35, 100, 0.10);
  --accent-line: linear-gradient(90deg, var(--brand-900) 0%, var(--brand-500) 100%);
}
.ib-accent-neutre {
  --accent: rgba(10, 16, 34, 0.62);
  --accent-soft: rgba(10, 16, 34, 0.07);
  --accent-line: linear-gradient(90deg, rgba(10, 16, 34, 0.62), rgba(10, 16, 34, 0.34));
}
.ib-accent-blanc {
  --accent: #fff;
  --accent-soft: rgba(255, 255, 255, 0.16);
  --accent-line: linear-gradient(90deg, #fff, var(--cyan-200));
}

/* ---------- échelle du texte et taille par élément ---------- */

.ib-scale-compact { --scale: 0.86; }
.ib-scale-normal { --scale: 1; }
.ib-scale-ample { --scale: 1.16; }

.ib-t-xs { --tscale: 0.75; }
.ib-t-s { --tscale: 0.88; }
.ib-t-m { --tscale: 1; }
.ib-t-l { --tscale: 1.22; }
.ib-t-xl { --tscale: 1.48; }

.ib-block .h2 { font-size: calc(clamp(30px, 4.2vw, 52px) * var(--tscale, 1) * var(--scale, 1)); }
.ib-block .h2--sm { font-size: calc(clamp(26px, 3vw, 36px) * var(--tscale, 1) * var(--scale, 1)); }
.ib-block .hero-title { font-size: calc(clamp(38px, 7.4vw, 92px) * var(--tscale, 1) * var(--scale, 1)); }
.ib-block .lead { font-size: calc(clamp(17px, 1.5vw, 20px) * var(--tscale, 1) * var(--scale, 1)); }
.ib-block .body, .ib-block .card-text, .ib-block .step-text, .ib-block .rich-body {
  font-size: calc(16px * var(--tscale, 1) * var(--scale, 1));
}
.ib-block .eyebrow { font-size: calc(12px * var(--tscale, 1)); }
.ib-block .card-title { font-size: calc(20px * var(--tscale, 1) * var(--scale, 1)); }
.ib-block .step-title { font-size: calc(19px * var(--tscale, 1) * var(--scale, 1)); }
.ib-block .stat-value { font-size: calc(clamp(30px, 3.4vw, 44px) * var(--tscale, 1) * var(--scale, 1)); }

/* ---------- couleur par élément ---------- */

.ib-c-principal { color: var(--text-primary); }
.ib-c-secondaire { color: var(--text-secondary); }
.ib-c-marque { color: var(--brand-700); }
.ib-c-cyan { color: var(--cyan-600); }
.ib-c-blanc { color: #fff; }
.ib-c-degrade {
  background: var(--accent-line);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ib-c-marque em, .ib-c-cyan em, .ib-c-blanc em { -webkit-text-fill-color: currentColor; background: none; }

/* ---------- arrondi ---------- */

.ib-radius-droit { --r-card: 4px; }
.ib-radius-doux { --r-card: 20px; }
.ib-radius-rond { --r-card: 34px; }
.ib-block .glass, .ib-block .card, .ib-block .tile, .ib-block .frame, .ib-block .step {
  border-radius: var(--r-card, 20px);
}

/* ============================================================
   Nouveaux blocs
   ============================================================ */

/* ---------- galerie en grille ---------- */

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--gap, 16px);
  /* une image en double largeur occupe deux rangées : pas de trou dans la grille */
  grid-auto-flow: dense;
  grid-auto-rows: 1fr;
}
.grid-item { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-card, 20px); }
.grid-item--wide { grid-column: span 2; grid-row: span 2; }
.grid-item--wide .grid-media { aspect-ratio: auto; height: 100%; }
.grid-media { display: block; aspect-ratio: var(--ratio, 4 / 3); overflow: hidden; }
.grid-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.grid-item:hover .grid-media img { transform: scale(1.05); }
.grid-item img[data-zoom] { cursor: zoom-in; }
.grid-cap {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  padding: 9px 13px; border-radius: var(--r-md);
  background: var(--glass-bg-elevated);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.grid-item:hover .grid-cap, .grid-item:focus-within .grid-cap { opacity: 1; transform: none; }
.grid-cap-title { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; letter-spacing: -0.2px; }
.grid-cap-meta { display: block; font-size: 12px; color: var(--text-secondary); }

.grid-gallery--mosaique { grid-auto-rows: 14px; }
.grid-gallery--mosaique .grid-item { grid-row: span 16; }
.grid-gallery--mosaique .grid-item:nth-child(4n+1) { grid-row: span 22; }
.grid-gallery--mosaique .grid-item:nth-child(6n+3) { grid-row: span 12; }
.grid-gallery--mosaique .grid-media { aspect-ratio: auto; height: 100%; }

/* visionneuse : la photo en grand sur un fond fait d'elle-même, flou et opaque */
html.ib-zoom-ouverte { overflow: hidden; }
.ib-zoom {
  position: fixed; inset: 0; z-index: 400; overflow: hidden;
  background: #0a1022; color: #fff;
  touch-action: pinch-zoom; -webkit-tap-highlight-color: transparent;
}
/* Le fond forme sa propre pile (z-index 0) : l'ordre de ses deux calques reste interne. Sans
   elle, le calque du dessus (z-index 2) passait devant la photo et la légende dès la fin
   de son fondu, et la photo semblait disparaître au bout d'une seconde. */
.ib-zoom-fond { position: absolute; inset: 0; z-index: 0; }
/* max-width: none : la règle générale des images plafonnerait le calque à 100 %, et sa
   marge de droite resterait découverte (le fond encre y apparaissait en bande sombre). */
/* Le flou est calculé sur une petite copie, agrandie ensuite : même rendu qu'un flou de
   60 px sur tout l'écran, pour dix fois moins de mémoire graphique (Safari lâche les calques
   trop lourds). La copie agrandie déborde de 15 % : le bord du flou reste hors champ. */
.ib-zoom-fond img {
  position: absolute; left: 50%; top: 50%; width: 40%; height: 44%; max-width: none;
  transform: translate(-50%, -50%) scale(3.25);
  object-fit: cover; opacity: 0; z-index: 0;
  filter: blur(18px) saturate(1.6) brightness(0.8);
}
/* La nouvelle photo se fond par-dessus l'ancienne, qui reste pleine dessous : jamais
   deux calques à moitié transparents, donc jamais d'assombrissement au passage. */
.ib-zoom-fond img.is-on { opacity: 1; z-index: 2; transition: opacity 0.9s var(--ease); }
.ib-zoom-fond img.is-sous { opacity: 1; z-index: 1; }
/* un léger vignettage, pour la profondeur */
.ib-zoom-fond::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 45%, rgba(6, 10, 24, 0.34) 100%);
}
/* La photo garde de l'air autour d'elle : c'est là que le fond flou se voit. */
.ib-zoom-scene { position: absolute; z-index: 1; inset: clamp(64px, 9vh, 96px) clamp(84px, 10vw, 170px) clamp(96px, 13vh, 128px); }
/* la taille de la photo est posée par le script, en pixels : rien à interpréter ici */
.ib-zoom-couche { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* la vitrine fait passer une photo au-dessus de l'autre le temps d'un fondu : ce rang reste
   à l'intérieur de l'image */
.sc-hero { isolation: isolate; }
.ib-zoom-photo {
  display: block; flex: 0 0 auto; max-width: none; max-height: none;
  border-radius: var(--r-lg); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  user-select: none; -webkit-user-drag: none;
}
.ib-zoom-legende {
  position: absolute; z-index: 1; left: 50%; bottom: clamp(22px, 3.5vh, 36px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: min(90vw, 760px); margin: 0;
  padding: 7px 7px 7px 16px; border-radius: var(--r-pill);
  font-size: 14px; color: #fff;
  background: rgba(10, 16, 34, 0.42); border: 0.5px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.ib-zoom-legende:has(.ib-zoom-texte:empty):has(.ib-zoom-compte:empty) { display: none; }
.ib-zoom-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-zoom-texte:empty { display: none; }
.ib-zoom-legende:has(.ib-zoom-texte:empty) { padding-left: 7px; }
.ib-zoom-compte:empty { display: none; }
.ib-zoom-compte {
  flex: 0 0 auto; padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.16);
}
/* commandes sur verre sombre : lisibles sur une photo claire comme sur une vue de nuit */
.ib-zoom-btn {
  position: absolute; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; border: 0.5px solid rgba(255, 255, 255, 0.28); cursor: pointer;
  color: #fff; background: rgba(10, 16, 34, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  transition: background 0.2s var(--ease), transform 0.25s var(--ease-spring);
}
.ib-zoom-btn:hover { background: rgba(10, 16, 34, 0.6); transform: scale(1.06); }
.ib-zoom-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ib-zoom-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ib-zoom-fermer { top: clamp(14px, 2.5vh, 24px); right: clamp(14px, 2.5vw, 24px); }
.ib-zoom-prec, .ib-zoom-suiv { top: calc(50% - 24px); }
.ib-zoom-prec { left: clamp(14px, 2.5vw, 36px); }
.ib-zoom-suiv { right: clamp(14px, 2.5vw, 36px); }
@media (max-width: 700px) {
  .ib-zoom-scene { inset: 68px 10px 138px; }
  .ib-zoom-legende { bottom: 88px; }
  .ib-zoom-prec, .ib-zoom-suiv { top: auto; bottom: 22px; }
  .ib-zoom-prec { left: calc(50% - 60px); }
  .ib-zoom-suiv { right: calc(50% - 60px); }
}

/* ---------- listes déroulantes (questions, CGV…) ---------- */

.faq--lisible .faq-list, .faq--lisible .faq-head { max-width: 820px; }
.faq-list { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 10px; align-content: start; }
.faq-item {
  border: 0.5px solid var(--glass-border-subtle);
  border-radius: var(--r-card, 20px);
  padding: 4px 20px;
  transition: border-color 0.2s var(--ease);
}
.faq--liste .faq-item { border-width: 0 0 1px 0; border-radius: 0; padding-inline: 0; background: none; box-shadow: none; }
.faq-item[open] { border-color: rgba(47, 64, 144, 0.28); }
.faq-question {
  display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none;
  padding: 16px 0; font-family: var(--font-display); font-weight: 600;
  font-size: calc(16.5px * var(--tscale, 1) * var(--scale, 1));
  letter-spacing: -0.2px;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-chevron {
  margin-left: auto; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.faq-item[open] .faq-chevron { transform: rotate(-135deg); }
/* Le contenu glisse à l'ouverture (site.js anime sa hauteur) : d'où overflow: hidden. */
.faq-answer {
  padding: 0 0 18px; overflow: hidden;
  color: var(--text-secondary); font-size: calc(16px * var(--scale, 1)); line-height: 1.62;
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul, .faq-answer ol { margin: 0 0 12px; padding-left: 22px; }
.faq-answer li { margin: 0 0 6px; }
.faq-answer li:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--text-primary); font-weight: 700; }
.faq-answer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.faq-question:hover { color: var(--accent); }
.faq-question:hover .faq-chevron { transform: rotate(45deg) translate(1px, 1px); }
.faq-item[open]:hover .faq-chevron { transform: rotate(-135deg) translate(1px, 1px); }
.faq-item:hover { border-color: rgba(47, 64, 144, 0.22); }

/* ---------- bandeau d'appel ---------- */

.cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 48px); flex-wrap: wrap;
}
.cta--carte .cta-inner { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-card, 20px); }
.cta--centre .cta-inner { flex-direction: column; text-align: center; }
.cta--centre .cta-actions { justify-content: center; }
.cta-text { min-width: 0; }
.cta-text .h2 { margin: 6px 0 8px; }
.cta-text .lead { margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ghost-line {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 13px 24px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-ghost-line:hover { background: var(--accent); color: #fff; }
.ib-on-dark .btn-ghost-line {
  border-color: rgba(255, 255, 255, 0.55); color: #fff;
}
.ib-on-dark .btn-ghost-line:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- citation ---------- */

.quote-inner { margin: 0 auto; display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 900px; }
.quote--cote .quote-inner {
  grid-template-columns: auto 1fr; justify-items: start; text-align: left;
  align-items: center; gap: 12px 34px; max-width: 1000px;
}
.quote--cote .quote-media { grid-row: span 3; }
.quote-media { width: clamp(84px, 12vw, 132px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: block; }
.quote-media img { width: 100%; height: 100%; object-fit: cover; }
.quote-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(clamp(21px, 2.6vw, 32px) * var(--tscale, 1) * var(--scale, 1));
  font-weight: 600; line-height: 1.32; letter-spacing: -0.8px;
}
.quote--guillemets .quote-text::before {
  content: '\201C'; display: block; font-size: 2.4em; line-height: 0.6;
  color: var(--accent); opacity: 0.35; margin-bottom: 10px;
}
.quote-author { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.2px; }
.quote-role { margin: 0; font-size: 13.5px; color: var(--text-secondary); }

/* ---------- comparatif ----------
   Un tableau de verre : le critère, la colonne comparée en retrait, la colonne mise en
   avant teintée de l'accent du bloc. Sous 640 px, chaque critère devient une fiche et
   chaque valeur reprend le nom de sa colonne : aucun défilement horizontal. */
.comparatif-cadre { padding: 0; overflow: hidden; }
.comparatif-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; line-height: 1.45; }
.comparatif-table th, .comparatif-table td { padding: 17px clamp(16px, 2.2vw, 28px); text-align: left; vertical-align: top; }
.comparatif-table thead th {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-tertiary);
  border-bottom: 1px solid var(--glass-border-subtle);
}
.comparatif-table tbody tr + tr > * { border-top: 1px solid var(--glass-border-subtle); }
.comparatif-critere {
  width: 32%; font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.2px; color: var(--text-primary);
}
.comparatif-a { width: 30%; color: var(--text-secondary); }
.comparatif-b { color: var(--text-primary); font-weight: 600; }
.comparatif--avant .comparatif-b-tete { color: var(--accent); }
.comparatif--avant .comparatif-b,
.comparatif--avant .comparatif-b-tete { background: var(--accent-soft); }
.comparatif--avant .comparatif-b { box-shadow: inset 3px 0 0 var(--accent); }
.comparatif-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-tertiary); max-width: 72ch; }
.comparatif-note--centre { margin-inline: auto; text-align: center; }
/* Sur fond sombre, l'accent de la marque manque de contraste : la colonne passe au cyan clair. */
.ib-on-dark .comparatif--avant .comparatif-b-tete, .ib-on-dark.comparatif--avant .comparatif-b-tete { color: var(--cyan-200); }
.ib-on-dark .comparatif--avant .comparatif-b, .ib-on-dark.comparatif--avant .comparatif-b,
.ib-on-dark .comparatif--avant .comparatif-b-tete, .ib-on-dark.comparatif--avant .comparatif-b-tete { background: rgba(127, 212, 244, 0.12); }
.ib-on-dark.comparatif--avant .comparatif-b { box-shadow: inset 3px 0 0 var(--cyan-200); }

@media (max-width: 640px) {
  .comparatif-cadre { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
  .comparatif-table, .comparatif-table tbody, .comparatif-table tr, .comparatif-table th, .comparatif-table td { display: block; width: auto; }
  /* L'en-tête reste lu par les lecteurs d'écran, mais n'occupe plus de place. */
  .comparatif-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .comparatif-table tbody { display: grid; gap: 12px; }
  .comparatif-ligne {
    border-radius: var(--r-lg); overflow: hidden;
    background: var(--glass-bg); border: 0.5px solid var(--glass-border); box-shadow: var(--glass-shadow);
  }
  .comparatif-table tbody tr + tr > * { border-top: 0; }
  .comparatif-table th, .comparatif-table td { padding: 12px 16px; }
  .comparatif-critere { padding-top: 15px; padding-bottom: 2px; font-size: 16px; }
  /* Même spécificité que la règle « display: block » ci-dessus, déclarée après : l'étiquette
     de colonne passe au-dessus de sa valeur au lieu de s'y coller. */
  .comparatif-table .comparatif-a, .comparatif-table .comparatif-b { display: grid; gap: 3px; }
  .comparatif-table .comparatif-a { padding-top: 6px; }
  .comparatif-a::before, .comparatif-b::before {
    content: attr(data-colonne);
    font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--text-tertiary);
  }
  .comparatif--avant .comparatif-b { box-shadow: inset 0 3px 0 var(--accent); }
  .comparatif--avant .comparatif-b::before { color: var(--accent); }
  .ib-on-dark.comparatif--avant .comparatif-b { box-shadow: inset 0 3px 0 var(--cyan-200); }
  .ib-on-dark.comparatif--avant .comparatif-b::before { color: var(--cyan-200); }
}

/* ---------- bandeau de logos ---------- */

.logos-title {
  margin: 0 0 22px; text-align: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-tertiary);
}
.logos-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--gap, 48px);
}
.logo-item { display: block; }
.logo-item img {
  height: var(--logo-h, 48px); width: auto; object-fit: contain;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.logos--gris .logo-item img { filter: grayscale(1); opacity: 0.62; }
.logos--gris .logo-item:hover img { filter: none; opacity: 1; }

/* ---------- vidéo ---------- */

.video-frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--ratio, 16 / 9);
  border-radius: var(--r-card, 20px);
  background: #0a1022; box-shadow: var(--glass-shadow-elevated);
  margin-top: 14px;
}
.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.video-placeholder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.video-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.video-play {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); border: 0.5px solid rgba(255, 255, 255, 0.4);
}
.video-play::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-40%, -50%);
  border-left: 16px solid #fff; border-block: 10px solid transparent;
}
.video-note {
  position: relative; margin: 12px 0 0; color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px; text-align: center; padding-inline: 18px;
}
.video-caption { margin: 12px 0 0; font-size: 13px; color: var(--text-tertiary); }

@media (max-width: 860px) {
  .grid-gallery { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
  .faq-list { grid-template-columns: 1fr; }
  .quote--cote .quote-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .quote--cote .quote-media { grid-row: auto; }
}
@media (max-width: 560px) {
  .grid-gallery { grid-template-columns: 1fr; }
  .grid-item--wide { grid-column: span 1; }
  /* Galerie compacte : deux vignettes par rangée, la double largeur garde toute la ligne. */
  .grid-gallery.grid-gallery--mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(var(--gap, 16px), 8px); }
  .grid-gallery--mobile-2 .grid-item--wide { grid-column: span 2; grid-row: span 1; }
  .grid-gallery--mobile-2 .grid-item--wide .grid-media { aspect-ratio: var(--ratio, 4 / 3); height: auto; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- proportion des colonnes et largeur du texte ---------- */

.ib-cols-30 { --tracks: 3fr 7fr; }
.ib-cols-40 { --tracks: 2fr 3fr; }
.ib-cols-50 { --tracks: 1fr 1fr; }
.ib-cols-60 { --tracks: 3fr 2fr; }
.ib-cols-70 { --tracks: 7fr 3fr; }

.ib-measure-lisible { --measure: 520px; }
.ib-measure-large { --measure: 760px; }
.ib-measure-pleine { --measure: none; }

/* visuel placé à droite : il conserve la part qu'on lui a donnée */
.split--reverse.ib-cols-30 { --tracks: 7fr 3fr; }
.split--reverse.ib-cols-40 { --tracks: 3fr 2fr; }
.split--reverse.ib-cols-60 { --tracks: 2fr 3fr; }
.split--reverse.ib-cols-70 { --tracks: 3fr 7fr; }

@media (max-width: 1080px) {
  .ib-cols-30, .ib-cols-40, .ib-cols-50, .ib-cols-60, .ib-cols-70 { --tracks: 1fr; }
  .ib-measure-lisible, .ib-measure-large { --measure: none; }
}

/* ---------- alignement vertical ---------- */

.ib-av-haut .split, .ib-av-haut .perf-inner, .ib-av-haut .contact { align-items: start; }
.ib-av-centre .split, .ib-av-centre .perf-inner, .ib-av-centre .contact { align-items: center; }
.ib-av-bas .split, .ib-av-bas .perf-inner, .ib-av-bas .contact { align-items: end; }
.ib-av-etire .split, .ib-av-etire .perf-inner, .ib-av-etire .contact { align-items: stretch; }

/* les colonnes deviennent des piles : un élément peut être poussé en haut ou en bas */
.split-text, .perf-head, .contact-side, .cta-text { display: flex; flex-direction: column; }
/* alignement horizontal : le bloc pose la consigne, les colonnes la suivent */
.ib-ah-gauche { --ib-ah: flex-start; text-align: left; }
.ib-ah-centre { --ib-ah: center; text-align: center; }
.ib-ah-droite { --ib-ah: flex-end; text-align: right; }

.split-text, .perf-head, .contact-side, .cta-text, .section-head { align-items: var(--ib-ah, stretch); }
.checks li, .hero-actions, .gallery-nav { justify-content: var(--ib-ah, flex-start); }
.ib-ah-centre .split-text, .ib-ah-centre .perf-head,
.ib-ah-centre .section-head, .ib-ah-centre .body { margin-inline: auto; }
.ib-ah-droite .split-text, .ib-ah-droite .perf-head,
.ib-ah-droite .section-head, .ib-ah-droite .body { margin-inline: auto 0; }

/* ---------- réglages fins d'un élément ---------- */

/* graisse */
.ib-block .ib-fw-normal { font-weight: 400; }
.ib-block .ib-fw-moyen  { font-weight: 500; }
.ib-block .ib-fw-gras   { font-weight: 600; }
.ib-block .ib-fw-noir   { font-weight: 800; }

/* interligne */
.ib-block .ib-lh-serre  { line-height: 1.15; }
.ib-block .ib-lh-normal { line-height: 1.5; }
.ib-block .ib-lh-aere   { line-height: 1.85; }

/* casse */
.ib-block .ib-cs-normale    { text-transform: none; letter-spacing: normal; }
.ib-block .ib-cs-majuscules { text-transform: uppercase; letter-spacing: 0.08em; }
.ib-block .ib-cs-capitales  { text-transform: capitalize; }

/* espacement, dans l'échelle du design system */
.ib-block .ib-mt-nul { margin-top: 0; }
.ib-block .ib-mt-xs { margin-top: 8px; }
.ib-block .ib-mt-s { margin-top: 16px; }
.ib-block .ib-mt-m { margin-top: 24px; }
.ib-block .ib-mt-l { margin-top: 32px; }
.ib-block .ib-mt-xl { margin-top: 48px; }
.ib-block .ib-mt-xxl { margin-top: 64px; }
.ib-block .ib-mb-nul { margin-bottom: 0; }
.ib-block .ib-mb-xs { margin-bottom: 8px; }
.ib-block .ib-mb-s { margin-bottom: 16px; }
.ib-block .ib-mb-m { margin-bottom: 24px; }
.ib-block .ib-mb-l { margin-bottom: 32px; }
.ib-block .ib-mb-xl { margin-bottom: 48px; }
.ib-block .ib-mb-xxl { margin-bottom: 64px; }

/* fond : il vient avec son coussin, sinon le texte colle au bord */
.ib-block .ib-bge-blanc, .ib-block .ib-bge-clair, .ib-block .ib-bge-verre,
.ib-block .ib-bge-encre, .ib-block .ib-bge-accent {
  padding: clamp(14px, 2vw, 22px);
  border-radius: var(--r-lg);
}
.ib-block .ib-bge-blanc { background: #fff; }
.ib-block .ib-bge-clair { background: #f2f5fb; }
.ib-block .ib-bge-verre {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.ib-block .ib-bge-accent { background: var(--accent-soft); }
.ib-block .ib-bge-encre {
  background: linear-gradient(160deg, #101838 0%, #0a1022 100%);
  --text-primary: rgba(255, 255, 255, 0.94);
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-tertiary: rgba(255, 255, 255, 0.46);
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.18);
  --accent-soft: rgba(255, 255, 255, 0.14);
  --accent: var(--cyan-200);
  color: var(--text-primary);
}

/* bordure */
.ib-block .ib-bd-fine {
  border: 1px solid rgba(10, 16, 34, 0.12);
  border-radius: var(--r-md); padding: 12px 16px;
}
.ib-block .ib-bd-marquee {
  border: 2px solid var(--accent);
  border-radius: var(--r-md); padding: 12px 16px;
}
.ib-block .ib-bd-gauche { border-left: 3px solid var(--accent); padding-left: 16px; }
.ib-block .ib-bd-basse { border-bottom: 1px solid rgba(10, 16, 34, 0.12); padding-bottom: 12px; }

/* sur fond sombre, le trait doit s'éclaircir à son tour */
.ib-on-dark .ib-bd-fine, .ib-on-dark .ib-bd-basse,
.ib-bge-encre .ib-bd-fine, .ib-bge-encre .ib-bd-basse { border-color: rgba(255, 255, 255, 0.24); }

/* alignement horizontal d'un seul élément */
.ib-h-gauche { text-align: left; align-self: flex-start; margin-inline: 0 auto; }
.ib-h-centre { text-align: center; align-self: center; margin-inline: auto; }
.ib-h-droite { text-align: right; align-self: flex-end; margin-inline: auto 0; }

.ib-v-haut { margin-bottom: auto; }
.ib-v-bas { margin-top: auto; }
.ib-v-centre { margin-block: auto; }


/* ---------- consignes propres au mobile ---------- */

@media (max-width: 640px) {
  .ib-ahm-gauche { --ib-ah: flex-start; text-align: left; }
  .ib-ahm-centre { --ib-ah: center; text-align: center; }
  .ib-ahm-droite { --ib-ah: flex-end; text-align: right; }

  .ib-block .ib-hm-gauche { text-align: left; align-self: flex-start; margin-inline: 0 auto; }
  .ib-block .ib-hm-centre { text-align: center; align-self: center; margin-inline: auto; }
  .ib-block .ib-hm-droite { text-align: right; align-self: flex-end; margin-inline: auto 0; }
}

/* ============================================================
   Vitrine de réalisations : rail de projets + scène déployée
   ============================================================ */

.sc {
  --sc-card-w: clamp(230px, 24vw, 320px);
  --sc-gap: clamp(14px, 1.6vw, 22px);
}
.showcase--rail-petit .sc { --sc-card-w: clamp(190px, 18vw, 240px); }
.showcase--rail-grand .sc { --sc-card-w: clamp(270px, 30vw, 400px); }

.sc-head { margin-bottom: clamp(20px, 3vw, 32px); }

/* le rail : des onglets qui défilent */
.sc-railwrap { position: relative; }
.sc-rail {
  position: relative;
  display: flex; gap: var(--sc-gap);
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  --sc-bord: max(clamp(20px, 4vw, 40px), calc((100vw - var(--shell)) / 2 + clamp(20px, 4vw, 40px)));
  padding: 10px var(--sc-bord) 22px;
  scroll-padding-inline: var(--sc-bord);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sc-rail::-webkit-scrollbar { display: none; }

.sc-card {
  position: relative; flex: 0 0 var(--sc-card-w);
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  scroll-snap-align: center; color: #fff; text-decoration: none;
  background: #0a1022; box-shadow: var(--glass-shadow);
  transform: translateZ(0);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), opacity 0.45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sc-card-img { position: absolute; inset: 0; display: block; }
.sc-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s var(--ease), filter 0.45s var(--ease);
}
.sc-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(6, 10, 24, 0.72) 100%);
}
.sc-card-cap {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px;
  display: grid; gap: 2px;
}
.sc-card-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
  line-height: 1.2; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.sc-card-meta { font-size: 12.5px; opacity: 0.82; }
.sc-card:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow-elevated); }
.sc-card:hover .sc-card-img img { transform: scale(1.06); }
.sc-card:focus-visible { outline: 3px solid var(--cyan-400); outline-offset: 3px; }

/* l'onglet choisi : relevé, cerné, les autres en retrait */
.sc-card[aria-selected="true"] {
  box-shadow: 0 0 0 3px var(--accent), var(--glass-shadow-elevated);
}
.sc[data-sc-ready] .sc-card[aria-selected="false"] .sc-card-img img { filter: saturate(0.72) brightness(0.86); }
.sc[data-sc-ready] .sc-card[aria-selected="false"]:hover .sc-card-img img { filter: none; }

.sc-hint {
  margin: 0; padding: 0 max(clamp(20px, 4vw, 40px), calc((100vw - var(--shell)) / 2 + clamp(20px, 4vw, 40px)));
  font-size: 13px; letter-spacing: 0.02em; color: var(--text-tertiary);
}

/* la scène : un seul projet à la fois */
.sc-stage { position: relative; margin-top: clamp(26px, 4vw, 50px); }
.sc-panel {
  display: none;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px); align-items: start;
}
.showcase--galerie-droite .sc-gallery { order: 2; }
.sc-panel:focus { outline: none; }

/* Sans script, l'ancre choisit le projet ; à défaut, le premier est montré. Borné au
   mode sans script : cette règle, plus spécifique, montrait sinon le premier projet en
   plus de celui qu'on venait de choisir. */
.sc:not([data-sc-ready]) .sc-panel:target,
.sc:not([data-sc-ready]) .sc-stage:not(:has(.sc-panel:target)) .sc-panel:first-child { display: grid; }
.sc[data-sc-ready] .sc-panel { display: none; }
.sc[data-sc-ready] .sc-panel.is-active { display: grid; }

/* galerie du projet */
.sc-gallery { min-width: 0; }
.sc-hero {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--r-xl);
  background: #0a1022; box-shadow: var(--glass-shadow-elevated);
}
.sc-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; cursor: zoom-in;
}
.sc-photo[hidden] { display: none; }
.sc-photo--vide { background: linear-gradient(135deg, #101838, #1a2364); cursor: default; }
.sc-count {
  position: absolute; z-index: 2; right: 14px; bottom: 14px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff;
  background: rgba(10, 16, 34, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
.sc-thumbs {
  display: flex; gap: 10px; margin-top: 12px; padding: 2px 2px 6px;
  overflow-x: auto; scrollbar-width: none;
}
.sc-thumbs::-webkit-scrollbar { display: none; }
.sc-thumb {
  position: relative; flex: 0 0 auto; width: 84px; aspect-ratio: 4 / 3;
  padding: 0; border: none; border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  background: #0a1022; opacity: 0.6;
  box-shadow: 0 0 0 0 transparent;
  transition: opacity 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Les vignettes n'apparaissent plus une à une : tant que le script les tient, chacune
   attend son image derrière un verre clair, puis toutes entrent ensemble. */
.sc-thumbs.is-vignettes .sc-thumb { background: rgba(16, 24, 52, 0.05); }
.sc-thumbs.is-vignettes .sc-thumb img { opacity: 0; transition: opacity 0.4s var(--ease); }
.sc-thumbs.is-vignettes .sc-thumb img.is-chargee { opacity: 1; }
.sc-thumbs.is-vignettes .sc-thumb::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
  transform: translateX(-110%);
  animation: sc-vignette-attente 1.4s ease-in-out infinite;
}
.sc-thumbs.is-vignettes .sc-thumb.is-prete::after { content: none; }
@keyframes sc-vignette-attente {
  0%, 15% { transform: translateX(-110%); }
  85%, 100% { transform: translateX(110%); }
}
.sc-thumb:hover { opacity: 0.9; transform: translateY(-2px); }
.sc-thumb.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }

/* fiche du projet */
.sc-detail { min-width: 0; }
.sc-kicker { margin: 0 0 10px; }
.sc-title {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 44px); font-weight: 800; line-height: 1.06; letter-spacing: -1px;
  color: var(--text-primary);
}
.sc-place { margin: 10px 0 0; font-size: 15px; color: var(--text-secondary); }
/* Le filet de chaque information suffit à ouvrir le tableau : un second, juste au-dessus,
   ne faisait que creuser un vide sous le lieu. */
.sc-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 22px; margin: 18px 0 0; padding: 0 0 18px;
  border-bottom: 1px solid var(--glass-border-subtle);
}
.sc-fact { position: relative; min-width: 0; padding-top: 10px; }
.sc-fact::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(10, 16, 34, 0.14); transform-origin: 0 50%;
}
.sc-fact dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.sc-fact dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.sc-fact dd:empty::before { content: '—'; color: var(--text-tertiary); font-weight: 400; }
.sc-summary { margin-top: 20px; }
.sc-summary .body { max-width: 62ch; }
.sc-keyfacts {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.sc-keyfacts li {
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft);
}
.sc-link { margin-top: 24px; }

@media (max-width: 900px) {
  .sc-panel { grid-template-columns: 1fr; }
  .showcase--galerie-droite .sc-gallery { order: 0; }
  .sc-thumb { width: 70px; }
}

/* ============================================================
   Voile de section, sur deux étages. .ib-calque-voile porte l'opacité,
   la fusion et le fondu, qui reste toujours droit ; .ib-motif, dedans,
   porte le dessin et peut s'incliner sans entraîner le fondu.
   ============================================================ */

.ib-calque-voile { --ov-t: 22px; --ov-d: 0.4; --ov-angle: 0deg; --ov-mx: 0px; --ov-my: 0px; }
.ib-calques { container-type: size; }

.ib-calque-voile {
  opacity: var(--ov-alpha, 0.6);
  -webkit-mask-image: var(--ov-mask, none);
  mask-image: var(--ov-mask, none);
}

/* Le motif remplit exactement le rectangle qui couvre la section une fois incliné :
   à 0°, c'est la section elle-même ; les rangées d'un nuage de points partent
   donc toujours du bord. */
.ib-motif { position: absolute; inset: calc(var(--ov-my) * -1) calc(var(--ov-mx) * -1); }
@supports (width: calc(100cqw * cos(0deg))) {
  .ib-motif {
    --c: max(cos(var(--ov-angle)), -1 * cos(var(--ov-angle)));
    --s: max(sin(var(--ov-angle)), -1 * sin(var(--ov-angle)));
    inset: auto; left: 50%; top: 50%;
    width: calc(100cqw * var(--c) + 100cqh * var(--s) + 2 * var(--ov-mx));
    height: calc(100cqw * var(--s) + 100cqh * var(--c) + 2 * var(--ov-my));
    translate: -50% -50%;
    rotate: var(--ov-angle);
  }
}

/* Le fondu est un dégradé réglable : plein jusqu'à --f0, puis il rejoint --ov-a1
   (opacité d'arrivée) à --f1, selon une courbe. Les arrêts sont des variables : les
   curseurs de l'éditeur les déplacent en direct. --ov-mstops sert de masque aux motifs
   (trame, grille…), --ov-cstops dessine le fondu coloré lui-même. */
.ib-calque-voile {
  --f0: 0%; --f1: 70%; --ov-a1: 0;
  --d: calc(var(--f1) - var(--f0));
  --c0: var(--ov-color);
  --c1: color-mix(in srgb, var(--ov-color2, var(--ov-color)) calc(var(--ov-a1) * 100%), transparent);
  --ov-mstops: #000 var(--f0), rgb(0 0 0 / var(--ov-a1)) var(--f1);
  --ov-cstops: var(--c0) var(--f0), var(--c1) var(--f1);
}
.ib-ovc-lente {
  --ov-mstops: #000 var(--f0), calc(var(--f0) + var(--d) * 0.72), rgb(0 0 0 / var(--ov-a1)) var(--f1);
  --ov-cstops: var(--c0) var(--f0), calc(var(--f0) + var(--d) * 0.72), var(--c1) var(--f1);
}
.ib-ovc-vive {
  --ov-mstops: #000 var(--f0), calc(var(--f0) + var(--d) * 0.28), rgb(0 0 0 / var(--ov-a1)) var(--f1);
  --ov-cstops: var(--c0) var(--f0), calc(var(--f0) + var(--d) * 0.28), var(--c1) var(--f1);
}
.ib-ovc-douce {
  --ov-mstops:
    #000 var(--f0),
    rgb(0 0 0 / calc(1 - (1 - var(--ov-a1)) * 0.156)) calc(var(--f0) + var(--d) * 0.25),
    rgb(0 0 0 / calc(1 - (1 - var(--ov-a1)) * 0.5)) calc(var(--f0) + var(--d) * 0.5),
    rgb(0 0 0 / calc(1 - (1 - var(--ov-a1)) * 0.844)) calc(var(--f0) + var(--d) * 0.75),
    rgb(0 0 0 / var(--ov-a1)) var(--f1);
  --ov-cstops:
    var(--c0) var(--f0),
    color-mix(in srgb, var(--c0) 84.4%, var(--c1)) calc(var(--f0) + var(--d) * 0.25),
    color-mix(in srgb, var(--c0) 50%, var(--c1)) calc(var(--f0) + var(--d) * 0.5),
    color-mix(in srgb, var(--c0) 15.6%, var(--c1)) calc(var(--f0) + var(--d) * 0.75),
    var(--c1) var(--f1);
}

/* sens du fondu */
.ib-ovd-bas { --ov-dir: to bottom; --ov-mask: linear-gradient(to bottom, var(--ov-mstops)); }
.ib-ovd-haut { --ov-dir: to top; --ov-mask: linear-gradient(to top, var(--ov-mstops)); }
.ib-ovd-droite { --ov-dir: to right; --ov-mask: linear-gradient(to right, var(--ov-mstops)); }
.ib-ovd-gauche { --ov-dir: to left; --ov-mask: linear-gradient(to left, var(--ov-mstops)); }
.ib-ovd-diagonale { --ov-dir: 135deg; --ov-mask: linear-gradient(135deg, var(--ov-mstops)); }
.ib-ovd-centre { --ov-mask: radial-gradient(ellipse at 50% 50%, var(--ov-mstops)); }

/* les motifs ; --ov-d (0,05 à 1) règle leur densité */
.ib-ov-uni .ib-motif { background: var(--ov-color); }

/* le fondu est dessiné dans le motif, pas dans le masque : il peut ainsi s'incliner */
.ib-calque-voile.ib-ov-fondu { --ov-mask: none; }
.ib-ov-fondu .ib-motif { background: linear-gradient(var(--ov-dir, to bottom), var(--ov-cstops)); }
.ib-ov-fondu.ib-ovd-centre .ib-motif { background: radial-gradient(ellipse at 50% 50%, var(--ov-cstops)); }

.ib-ov-trame .ib-motif,
.ib-ov-points .ib-motif {
  background: radial-gradient(circle closest-side, var(--ov-color) calc(var(--ov-d) * 80% - 6%), transparent calc(var(--ov-d) * 80%)) 0 0 / var(--ov-t) var(--ov-t);
}
/* nuage de points progressif : les rangées rapetissent d'elles-mêmes, pas de masque en plus… */
.ib-ov-rangs { --ov-mask: none; }
.ib-ov-points.ib-ov-rangs .ib-motif { background: var(--ov-points); }
/* … sauf en diagonale, où un fondu latéral croise le rapetissement vertical */
.ib-ov-rangs.ib-ov-rangs-biais { --ov-mask: linear-gradient(to right, #000 0%, #000 12%, transparent 100%); }

.ib-ov-grille .ib-motif {
  --trait: calc(0.5px + var(--ov-d) * 3px);
  background:
    linear-gradient(var(--ov-color) 0 var(--trait), transparent 0) 0 0 / var(--ov-t) var(--ov-t),
    linear-gradient(90deg, var(--ov-color) 0 var(--trait), transparent 0) 0 0 / var(--ov-t) var(--ov-t);
}
.ib-ov-lignes .ib-motif {
  /* lignes horizontales à 0° : l'inclinaison donne leur angle réel ; un pas d'une
     demi-trame garde le glissement en boucle exacte */
  --pas: calc(var(--ov-t) * 0.5);
  background: repeating-linear-gradient(180deg, var(--ov-color) 0 calc(var(--pas) * var(--ov-d) * 0.6), transparent 0 var(--pas));
}
.ib-ov-grain .ib-motif {
  background: var(--ov-color);
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 2.4 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 2.4 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-size: calc(var(--ov-t) * 9) calc(var(--ov-t) * 9);
  mask-size: calc(var(--ov-t) * 9) calc(var(--ov-t) * 9);
}
.ib-ov-vignette .ib-motif {
  background: radial-gradient(ellipse 78% 72% at 50% 50%, transparent calc(70% - var(--ov-d) * 55%), var(--ov-color) 100%);
}
.ib-ov-halo .ib-motif {
  --h: calc(30% + var(--ov-d) * 50%);
  background:
    radial-gradient(ellipse var(--h) calc(var(--h) * 1.1) at 80% 18%, var(--ov-color) 0%, transparent 70%),
    radial-gradient(ellipse calc(var(--h) * 0.8) calc(var(--h) * 0.9) at 12% 88%, var(--ov-color) 0%, transparent 72%);
}

/* fusion avec ce qui est dessous */
.ib-calque-voile.ib-ovb-multiply { mix-blend-mode: multiply; }
.ib-calque-voile.ib-ovb-screen { mix-blend-mode: screen; }
.ib-calque-voile.ib-ovb-overlay { mix-blend-mode: overlay; }
.ib-calque-voile.ib-ovb-soft-light { mix-blend-mode: soft-light; }

/* Mouvement lent : le motif déborde d'un pas de trame et glisse d'un pas, en boucle
   exacte. Le glissement se fait dans le repère du motif, donc suit son inclinaison. */
.ib-calque-voile.ib-ov-anim { --ov-mx: var(--ov-t); --ov-my: var(--ov-t); }
.ib-ov-anim .ib-motif { animation: ib-derive 16s linear infinite; will-change: transform; }
@keyframes ib-derive { to { transform: translate3d(var(--ov-t), var(--ov-t), 0); } }
/* un nuage en rangées ne glisse que le long de ses rangées, sinon il décollerait du bord */
.ib-ov-anim.ib-ov-rangs.ib-ovd-bas, .ib-ov-anim.ib-ov-rangs.ib-ovd-haut,
.ib-ov-anim.ib-ov-rangs.ib-ovd-diagonale { --ov-my: 0px; }
.ib-ov-anim.ib-ov-rangs.ib-ovd-gauche, .ib-ov-anim.ib-ov-rangs.ib-ovd-droite { --ov-mx: 0px; }
.ib-ov-anim.ib-ov-rangs.ib-ovd-bas .ib-motif, .ib-ov-anim.ib-ov-rangs.ib-ovd-haut .ib-motif,
.ib-ov-anim.ib-ov-rangs.ib-ovd-diagonale .ib-motif { animation-name: ib-derive-x; }
.ib-ov-anim.ib-ov-rangs.ib-ovd-gauche .ib-motif, .ib-ov-anim.ib-ov-rangs.ib-ovd-droite .ib-motif { animation-name: ib-derive-y; }
@keyframes ib-derive-x { to { transform: translate3d(var(--ov-t), 0, 0); } }
@keyframes ib-derive-y { to { transform: translate3d(0, var(--ov-t), 0); } }
.ib-calque-voile.ib-ov-anim.ib-ov-halo { --ov-mx: 0px; --ov-my: 0px; }
.ib-ov-anim.ib-ov-halo .ib-motif { animation: ib-halo 14s var(--ease) infinite alternate; }
@keyframes ib-halo { to { transform: translate3d(-4%, 3%, 0) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .ib-calque-image, .ib-motif { animation: none !important; }
}


/* ============================================================
   Vitrine : chorégraphie
   ============================================================ */

.sc { position: relative; }
.sc-stage { position: relative; }

/* Pendant la démonstration, la scène garde la hauteur du projet à venir :
   rien ne saute sous le regard du visiteur. */
.sc.is-attente .sc-stage { min-height: var(--sc-h, 520px); }
/* Mesure d'un projet sans le montrer. */
.sc-panel.is-mesure { display: grid !important; visibility: hidden; position: absolute; left: 0; right: 0; top: 0; }

/* Éclair évité : tant que le script n'a pas pris la main, la scène d'une vitrine à
   démonstration reste invisible ; un filet la révèle d'office au bout de 1,6 s. */
@media (scripting: enabled) {
  .sc[data-intro="1"]:not([data-sc-ready]) .sc-stage,
  .sc[data-intro="1"]:not([data-sc-ready]) .sc-rail { opacity: 0; animation: sc-filet 0.01s 1.6s forwards; }
}
.sc.is-avant .sc-card, .sc.is-avant .sc-cadre, .sc.is-avant .sc-fleche { opacity: 0; transition: none; }
@keyframes sc-filet { to { opacity: 1; } }

/* le curseur : un trait de lumière sous le projet choisi ; il s'étire en glissant */
.sc-curseur {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 64px; height: 4px; border-radius: 4px;
  background: var(--accent-line);
  pointer-events: none; opacity: 0;
  transition: opacity 0.35s var(--ease);
  will-change: transform;
}
.sc-curseur.is-vu { opacity: 1; }

/* la caméra cherche : tout passe hors du point, sauf la vignette visée */
.sc-rail .sc-card { transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), opacity 0.35s var(--ease), filter 0.35s var(--ease); }
/* pendant l'ouverture : des transitions plus lentes ; pendant la glisse du trait, les cartes
   restent en léger retrait et celle qu'il survole s'éclaire */
.sc.is-demo .sc-card { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), opacity 0.5s var(--ease), filter 0.5s var(--ease); }
.sc.is-tirage .sc-card { opacity: 0.74; filter: saturate(0.8); }
.sc.is-tirage .sc-card.is-vise { opacity: 1; filter: none; }
.sc[data-sc-ready] .sc-card[aria-selected="true"] { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(16, 24, 52, 0.26); }
.sc[data-sc-ready] .sc-card.is-levee { transform: translateY(-6px) scale(1.03); box-shadow: 0 30px 60px rgba(16, 24, 52, 0.28); }

/* Le cadre d'attente, à la manière d'Apple Intelligence : un liseré irisé tourne autour du
   verre et déborde en halo qui respire ; dedans, une aurore de couleurs dérive sous le
   dépoli et un reflet passe. Tout apparaît et disparaît avec le cadre. */
@property --sc-tour { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.sc-cadre {
  --sc-irise: #8a98dc, #7fb6dc, #9fd2ea, #cbe9f6, #c3bbf0, #a3aae6, #8a98dc;
  position: absolute; z-index: 4; pointer-events: none;
  border-radius: var(--r-xl);
  animation: sc-tour 3.2s linear infinite;
}
@keyframes sc-tour { to { --sc-tour: 360deg; } }
.sc-cadre-halo {
  position: absolute; inset: -10px; border-radius: calc(var(--r-xl) + 10px);
  background: conic-gradient(from var(--sc-tour), var(--sc-irise));
  filter: blur(34px); opacity: 0.4;
  animation: sc-souffle 2.8s ease-in-out infinite alternate;
}
@keyframes sc-souffle {
  from { opacity: 0.24; transform: scale(0.99); }
  to { opacity: 0.44; transform: scale(1.015); }
}
.sc-cadre-verre {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7));
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 80px rgba(16, 24, 52, 0.1);
}
/* Sous le dépoli, la photo du projet survolé : elle change avec le trait, comme une roue
   qui défile, chaque image entrant par la droite. À l'arrêt, elle se précise à demi, puis
   la vraie photo vient s'y mettre au point. */
.sc-cadre-apercu { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.sc-cadre-apercu img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: translateX(3%) scale(1.1); filter: blur(16px) saturate(1.12);
  transition: opacity 0.32s var(--ease), transform 0.55s var(--ease), filter 0.6s var(--ease);
}
.sc-cadre-apercu img.is-vu { opacity: 0.7; transform: translateX(0) scale(1.1); }
.sc-cadre-apercu.is-fige img.is-vu { opacity: 0.82; transform: scale(1.04); filter: blur(8px) saturate(1.12); }
.sc-cadre-aurore {
  position: absolute; inset: -35%;
  background:
    radial-gradient(closest-side at 28% 34%, rgba(95, 175, 220, 0.3), transparent),
    radial-gradient(closest-side at 72% 62%, rgba(165, 150, 240, 0.24), transparent),
    radial-gradient(closest-side at 42% 78%, rgba(150, 210, 238, 0.28), transparent),
    radial-gradient(closest-side at 80% 22%, rgba(110, 125, 200, 0.18), transparent);
  filter: blur(36px);
  animation: sc-aurore 6s ease-in-out infinite alternate;
}
@keyframes sc-aurore {
  from { transform: translate3d(-7%, -5%, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(7%, 6%, 0) rotate(28deg) scale(1.14); }
}
.sc-cadre-verre::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%);
  transform: translateX(-110%);
  animation: sc-reflet-cadre 3.2s cubic-bezier(0.65, 0, 0.35, 1) 0.4s infinite;
}
@keyframes sc-reflet-cadre {
  0%, 20% { transform: translateX(-110%); }
  70%, 100% { transform: translateX(110%); }
}
.sc-cadre-lisere {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; opacity: 0.75;
  background: conic-gradient(from var(--sc-tour), var(--sc-irise));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* l'annonce du tirage : pour les lecteurs d'écran seulement */
.sc-annonce {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Passage d'un projet à l'autre : l'ancien reste posé au-dessus du nouveau le temps de
   s'effacer, un fondu enchaîné sur place. */
.sc[data-sc-ready] .sc-panel.is-sortant { display: grid; position: absolute; z-index: 2; pointer-events: none; }

/* un lent travelling sur la photo au repos */
.sc-photo.is-kb { animation: sc-kb 16s var(--ease) infinite alternate; }

/* flèches de la grande image : au survol à la souris, toujours là au doigt */
.sc-pas {
  position: absolute; z-index: 3; top: calc(50% - 22px);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0.5px solid rgba(255, 255, 255, 0.35); border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(10, 16, 34, 0.32);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-spring), background 0.2s var(--ease);
}
.sc-pas svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-pas--prec { left: 14px; }
.sc-pas--suiv { right: 14px; }
.sc-hero:hover .sc-pas, .sc-pas:focus-visible { opacity: 1; transform: none; }
.sc-pas:hover { background: rgba(10, 16, 34, 0.5); }
.sc-pas:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) { .sc-pas { opacity: 1; transform: none; } }
@keyframes sc-kb { to { transform: scale(1.06) translate(-1%, -0.6%); } }

/* le titre en générique : chaque mot monte derrière son cache */
.sc-m {
  display: inline-block; overflow: clip; vertical-align: top;
  padding-bottom: 0.12em; margin-bottom: -0.12em;
}
.sc-mi { display: inline-block; transform-origin: 0 100%; }
.sc-title em { font-style: normal; }
.sc-title em, .sc-title em .sc-mi {
  background: var(--accent-line);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .sc-photo.is-kb { animation: none; }
}


/* ------------------------------------------------------------ vitrine : halo, image, rail */

/* le halo : la photo du projet, très floue, qui se fond dans le fond dépoli */
/* Trois masques croisés : l'ellipse centrée sur l'image ; un fondu vertical qui éteint le
   halo avant les bords de la section (elle le rogne : sans lui, une ligne nette apparaît) ;
   un creux sous la fiche, qui garde le texte lisible sans carte derrière lui. */
.sc-aura {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image:
    radial-gradient(ellipse calc(var(--aw, 700px) * 1.55) calc(var(--ah, 560px) * 1.25) at var(--ax, 35%) var(--ay, 65%), #000 38%, rgba(0, 0, 0, 0.55) 62%, transparent 86%),
    linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 220px), transparent 100%),
    radial-gradient(ellipse calc(var(--tw, 0px) * 1.3) calc(var(--th, 0px) * 1.5 + 80px) at var(--tx, -9999px) var(--ty, -9999px), rgba(0, 0, 0, 0.12) 50%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse calc(var(--aw, 700px) * 1.55) calc(var(--ah, 560px) * 1.25) at var(--ax, 35%) var(--ay, 65%), #000 38%, rgba(0, 0, 0, 0.55) 62%, transparent 86%),
    linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 220px), transparent 100%),
    radial-gradient(ellipse calc(var(--tw, 0px) * 1.3) calc(var(--th, 0px) * 1.5 + 80px) at var(--tx, -9999px) var(--ty, -9999px), rgba(0, 0, 0, 0.12) 50%, #000 100%);
  mask-composite: intersect;
}
/* le calque suit l'image : même centre, un peu plus grand, très flou */
.sc-aura img {
  position: absolute;
  left: calc(var(--ax, 35%) - var(--aw, 700px) * 1.05);
  top: calc(var(--ay, 65%) - var(--ah, 560px) * 0.95);
  width: calc(var(--aw, 700px) * 2.1);
  height: calc(var(--ah, 560px) * 1.9);
  max-width: none;
  object-fit: cover; opacity: 0;
  filter: blur(70px) saturate(1.7) brightness(1.02);
  transform: scale(1.04);
  transition: opacity 1.1s var(--ease);
}
.sc-aura img.is-on { opacity: 0.9; animation: sc-aura 22s var(--ease) infinite alternate; }
@keyframes sc-aura { to { transform: scale(1.16) translate3d(-2%, 1.5%, 0); } }
.sc > .shell, .sc > .sc-railwrap, .sc > .sc-stage { position: relative; z-index: 1; }

/* la scène tient dans la colonne du site : l'image s'aligne à gauche sur le titre de la
   page et le logo, la fiche à droite sur le bouton de contact */
.shell.sc-stage { max-width: var(--shell); }
.sc-panel { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
.sc-hero { aspect-ratio: 16 / 10; box-shadow: 0 30px 80px rgba(16, 24, 52, 0.28); }
/* la fiche : du texte posé sur le fond, sans carte ; sa première ligne s'aligne sur le
   haut de l'image (rognée à la hauteur des capitales) */
.sc-detail > :first-child { text-box: trim-start cap alphabetic; }
.sc-detail { --text-secondary: rgba(10, 16, 34, 0.74); --text-tertiary: rgba(10, 16, 34, 0.6); }

/* flèches du rail : seulement s'il reste des projets de ce côté */
.sc-railwrap { position: relative; }
.sc-fleche {
  position: absolute; top: calc(50% - 26px); z-index: 4;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0.5px solid rgba(255, 255, 255, 0.7); border-radius: 50%; cursor: pointer;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--glass-shadow);
  opacity: 0; pointer-events: none; transform: scale(0.85);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-spring);
}
.sc-fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-fleche--prec { left: clamp(10px, 2vw, 24px); }
.sc-fleche--suiv { right: clamp(10px, 2vw, 24px); }
.sc-fleche.is-on { opacity: 1; pointer-events: auto; transform: none; }
.sc-fleche:hover { transform: scale(1.08); color: var(--accent); }

/* Bords fondus : on devine qu'il y a d'autres projets. Le fondu est long et suit une courbe
   douce (en S) plutôt qu'une rampe droite ; il n'existe que du côté où des projets sont
   cachés (is-debut / is-fin), et apparaît ou s'efface en glissant. */
@property --sc-fondu-g { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sc-fondu-d { syntax: '<length>'; inherits: false; initial-value: 0px; }
.sc-rail {
  --sc-fondu-g: min(10vw, 170px);
  --sc-fondu-d: min(10vw, 170px);
  transition: --sc-fondu-g 0.5s var(--ease), --sc-fondu-d 0.5s var(--ease);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0, 0, 0, 0.16) calc(var(--sc-fondu-g) * 0.25),
    rgba(0, 0, 0, 0.5) calc(var(--sc-fondu-g) * 0.5),
    rgba(0, 0, 0, 0.84) calc(var(--sc-fondu-g) * 0.75),
    #000 var(--sc-fondu-g),
    #000 calc(100% - var(--sc-fondu-d)),
    rgba(0, 0, 0, 0.84) calc(100% - var(--sc-fondu-d) * 0.75),
    rgba(0, 0, 0, 0.5) calc(100% - var(--sc-fondu-d) * 0.5),
    rgba(0, 0, 0, 0.16) calc(100% - var(--sc-fondu-d) * 0.25),
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0, 0, 0, 0.16) calc(var(--sc-fondu-g) * 0.25),
    rgba(0, 0, 0, 0.5) calc(var(--sc-fondu-g) * 0.5),
    rgba(0, 0, 0, 0.84) calc(var(--sc-fondu-g) * 0.75),
    #000 var(--sc-fondu-g),
    #000 calc(100% - var(--sc-fondu-d)),
    rgba(0, 0, 0, 0.84) calc(100% - var(--sc-fondu-d) * 0.75),
    rgba(0, 0, 0, 0.5) calc(100% - var(--sc-fondu-d) * 0.5),
    rgba(0, 0, 0, 0.16) calc(100% - var(--sc-fondu-d) * 0.25),
    transparent 100%);
}
.sc-rail.is-debut { --sc-fondu-g: 0px; }
.sc-rail.is-fin { --sc-fondu-d: 0px; }
/* pendant un défilement piloté, l'aimantation contrarierait le mouvement */
.sc-rail.is-glisse { scroll-snap-type: none; }
.sc-rail.is-prise { cursor: grabbing; user-select: none; }
.sc-rail.is-prise .sc-card { pointer-events: none; }

@media (max-width: 900px) {
  .sc-panel { grid-template-columns: 1fr; }
  .sc-hero { aspect-ratio: 4 / 3; }
  .sc-aura img { filter: blur(40px) saturate(1.4); }
  .sc-fleche { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-aura img.is-on { animation: none; }
}

/* ============================================================
   Consentement à la mesure d'audience
   « Refuser » et « Accepter » sont deux boutons identiques : même taille, même couleur,
   même place au premier niveau (exigence de la CNIL et de l'ICO). Le panneau ne bloque
   pas la page ; il vient en tête du document pour les lecteurs d'écran.
   ============================================================ */

/* à droite : les appels à l'action des en-têtes sont alignés à gauche */
.ib-cookies {
  position: fixed; z-index: 350;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(440px, calc(100vw - 32px));
  padding: 18px 20px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 22px 60px rgba(10, 16, 40, 0.24), 0 2px 8px rgba(10, 16, 40, 0.08);
  color: var(--text-primary);
  font-size: 13.5px; line-height: 1.55;
}
.ib-cookies:focus { outline: none; }
.ib-cookies:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ib-cookies-titre {
  margin: 0 0 6px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
}
.ib-cookies-texte { margin: 0 0 12px; color: var(--text-secondary); }
.ib-cookies-texte a {
  color: var(--accent); font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.ib-cookies-etat, .ib-cookies-gpc {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 12px;
  background: rgba(47, 64, 144, 0.07); font-size: 12.5px; color: var(--text-secondary);
}
.ib-cookies-ouvert .footer { padding-bottom: calc(var(--ib-cookies-h, 0px) + 24px); }
.ib-cookies-apercu {
  display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px dashed rgba(47, 64, 144, 0.35); background: rgba(47, 64, 144, 0.05);
  font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--brand-700);
}
.ib-cookies-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ib-cookies-btn {
  min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--brand-900); color: #fff;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -0.1px;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}
.ib-cookies-btn:hover { background: var(--brand-700); }
.ib-cookies-btn:active { transform: scale(0.97); }
.ib-cookies-btn:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; }
.ib-cookies-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cyan-400); }
.ib-cookies-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 560px) {
  .ib-cookies { left: 10px; right: 10px; width: auto; bottom: max(10px, env(safe-area-inset-bottom)); padding: 16px 16px 14px; }
}

/* lien de pied de page qui rouvre le choix */
.footer-cookies {
  position: relative; width: fit-content; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: rgba(255, 255, 255, 0.55); transition: color 0.2s var(--ease);
}
.footer-cookies::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; opacity: 0.6; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
.footer-cookies:hover { color: #fff; }
.footer-cookies:hover::before { transform: scaleX(1); }
.footer-cookies:focus-visible { outline: 2px solid var(--cyan-200); outline-offset: 3px; border-radius: 4px; }

/* vidéo hébergée ailleurs : lecteur chargé au clic seulement */
.video-consent { position: relative; width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; }
.video-consent img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.video-consent-play {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
  transition: transform 0.2s var(--ease);
}
.video-consent-play:hover { transform: scale(1.06); }
.video-consent-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.video-consent .video-play { display: block; width: 72px; height: 72px; background: rgba(255, 255, 255, 0.22); }
.video-consent .video-note { max-width: 46ch; }
.video-consent .video-note a { color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* lien de secours pour revenir sur son choix (liens du pied masqués, ou page sans pied) */
.ib-cookies-ligne { margin: 0; padding: 0 clamp(20px, 4vw, 40px) 18px; text-align: center; }
.ib-cookies-lien {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: rgba(255, 255, 255, 0.55);
  text-decoration: underline; text-underline-offset: 3px;
}
.ib-cookies-lien:hover { color: #fff; }
.ib-cookies-lien--flottant {
  position: fixed; z-index: 340; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px; color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.8); box-shadow: 0 4px 16px rgba(10, 16, 40, 0.12); text-decoration: none;
}
.ib-cookies-lien:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 3px; border-radius: 6px; }