@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --bleu: #2b6ec1;
  --bleu-600: #2361ae;
  --bleu-700: #1b4f93;
  --bleu-800: #143c73;
  --bleu-900: #0d2a52;
  --ciel: #3c8ffb;
  --bleu-300: #8db8ee;
  --bleu-200: #c5daf6;
  --bleu-100: #e2edfb;
  --bleu-50: #f2f7fe;
  --encre: #0b1a30;
  --encre-2: #22334d;
  --texte: #3b4a61;
  --gris: #5e6d84;
  --trait: #e3e9f2;
  --trait-2: #d2dbe8;
  --doux: #f7f9fc;
  --etoile: #f5b301;
  --soleil: #ffd666;

  --police: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --courbe: cubic-bezier(.22, 1, .36, 1);
  --courbe-es: cubic-bezier(.65, 0, .35, 1);

  --largeur: 1280px;
  --gouttiere: clamp(16px, 3vw, 32px);
  --marge: clamp(20px, 3.4vw, 44px);
  --section-y: clamp(72px, 9vw, 128px);
  --entete-h: 76px;

  --rayon: 12px;
  --rayon-lg: 20px;
  --rayon-xl: 28px;

  --ombre-sm: 0 1px 2px rgba(11, 26, 48, .06), 0 2px 6px rgba(11, 26, 48, .04);
  --ombre: 0 1px 2px rgba(11, 26, 48, .05), 0 12px 32px -14px rgba(23, 64, 128, .24);
  --ombre-lg: 0 2px 4px rgba(11, 26, 48, .04), 0 32px 64px -28px rgba(20, 60, 115, .4);
}
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { color: var(--encre); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
strong { font-weight: 600; }
::selection { background: var(--bleu); color: #fff; }

:focus-visible { outline: 2px solid var(--ciel); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.cache-visuel {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--encre); color: #fff; font-weight: 500;
  transform: translateY(-200%); transition: transform .3s var(--courbe);
}
.lien-evitement:focus { transform: none; }

.ico {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.etoiles {
  display: inline-block; flex: none; width: 5.2em; height: 1em; background: var(--etoile);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9L12 2.6z'/%3E%3C/svg%3E") 0 50% / 1.04em 1em repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9L12 2.6z'/%3E%3C/svg%3E") 0 50% / 1.04em 1em repeat-x;
}
.etoiles--clair { background: var(--soleil); }
.surtitre {
  position: relative; display: inline-flex; align-items: center;
  margin: 0 0 22px; padding: 7px 14px 7px 11px;
  font: 500 12px/1 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bleu);
}
.surtitre::before {
  content: ""; position: absolute; inset: 0; border: 1.5px solid currentColor; opacity: .6;
  clip-path: polygon(0 0, 100% 0, 100% 24%, calc(100% - 2px) 24%, calc(100% - 2px) 76%, 100% 76%, 100% 100%, 0 100%);
}
.surtitre--clair { color: #fff; }
.bouton {
  --h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  height: var(--h); padding: 0 18px; border: 1px solid transparent; border-radius: 10px;
  font: 500 15px/1 var(--police); letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .3s var(--courbe);
}
.bouton .ico { transition: transform .35s var(--courbe); }
.bouton:hover .ico { transform: translateX(3px); }
.bouton--petit { --h: 38px; padding: 0 14px; font-size: 14px; }
.bouton--grand { --h: 50px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.bouton--principal {
  background: var(--bleu); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(8, 32, 70, .25), 0 1px 2px rgba(13, 42, 82, .35), 0 8px 18px -8px rgba(43, 110, 193, .7);
}
.bouton--principal:hover { background: var(--bleu-600); transform: translateY(-1px); }
.bouton--principal:active { transform: none; }
.bouton--contour { background: #fff; color: var(--encre); border-color: var(--trait-2); box-shadow: var(--ombre-sm); }
.bouton--contour:hover { border-color: var(--bleu-300); background: var(--bleu-50); color: var(--bleu-700); }
.bouton--blanc { background: #fff; color: var(--bleu-700); box-shadow: 0 1px 2px rgba(13, 42, 82, .3), 0 12px 26px -12px rgba(8, 32, 70, .65); }
.bouton--blanc:hover { background: var(--bleu-50); transform: translateY(-1px); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px;
  font-size: 15px; font-weight: 500; color: var(--bleu-700);
  border-bottom: 1px solid var(--bleu-200); transition: color .2s, border-color .2s;
}
.lien-fleche .ico { transition: transform .35s var(--courbe); }
.lien-fleche:hover { color: var(--bleu); border-color: var(--bleu); }
.lien-fleche:hover .ico { transform: translateX(3px); }

.etiquettes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.etiquettes li, .etiquettes span {
  padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--bleu-50); color: var(--bleu-700); box-shadow: inset 0 0 0 1px var(--bleu-100);
}

.notation { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--encre-2); }
.notation__google { width: 16px; height: 16px; flex: none; }
.notation .etoiles { font-size: 13px; }

.points { display: inline-flex; gap: .45em; flex: none; }
.points i { width: .72em; height: .72em; border-radius: 50%; background: var(--trait-2); }

.pulsation { position: relative; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--bleu); flex: none; }
.pulsation::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bleu); animation: pulsation 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
.conteneur {
  position: relative;
  width: min(var(--largeur), calc(100% - 2 * var(--gouttiere)));
  margin-inline: auto; padding-inline: var(--marge);
  border-inline: 1px solid var(--trait);
}
.conteneur--plein { padding-inline: 0; }

.section { position: relative; border-top: 1px solid var(--trait); }
.section > .conteneur { padding-block: var(--section-y); }
.section > .conteneur::before, .section > .conteneur::after {
  content: ""; position: absolute; top: -6px; z-index: 2; width: 11px; height: 11px; pointer-events: none;
  background:
    linear-gradient(var(--bleu-300), var(--bleu-300)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--bleu-300), var(--bleu-300)) 0 50% / 100% 1px no-repeat;
}
.section > .conteneur::before { left: -6px; }
.section > .conteneur::after { right: -6px; }

.bloc-titre { margin-bottom: clamp(40px, 5vw, 72px); }
.bloc-titre--deux, .bloc-titre--ligne {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 5vw, 80px); align-items: end;
}
.bloc-titre--centre { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bloc-titre--centre .titre2 { max-width: 17ch; }
.bloc-titre--centre .bloc-titre__texte { margin-top: 20px; }
.bloc-titre--centre .lien-fleche { margin-top: 16px; }
.bloc-titre__texte { max-width: 52ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; }
.bloc-titre__texte strong { color: var(--encre); }

.titre2 { font-size: clamp(32px, 4.3vw, 58px); line-height: 1.04; letter-spacing: -.04em; }
.titre2 em {
  font-style: normal; color: var(--bleu);
  background: linear-gradient(var(--bleu-100), var(--bleu-100)) no-repeat 0 90% / 100% .34em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

@media (max-width: 860px) {
  .bloc-titre--deux, .bloc-titre--ligne { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .conteneur { width: 100%; border-inline: 0; padding-inline: 20px; }
  .conteneur--plein { padding-inline: 0; }
  .section > .conteneur::before, .section > .conteneur::after { display: none; }
}
.entete {
  position: sticky; top: 0; z-index: 60; padding-inline: var(--gouttiere);
  border-bottom: 1px solid var(--trait); background: #fff;
  transition: padding-top .5s var(--courbe), background-color .3s, border-color .3s;
}
.entete__barre {
  display: flex; align-items: center; gap: 24px;
  width: min(var(--largeur), 100%); height: var(--entete-h); margin-inline: auto; padding: 0 var(--marge);
  border: 1px solid transparent; border-inline-color: var(--trait);
  transition: width .6s var(--courbe), height .5s var(--courbe), padding .5s var(--courbe), border-radius .5s var(--courbe), border-color .4s, background-color .4s, box-shadow .4s;
}
.entete.colle { padding-top: 10px; background: transparent; border-color: transparent; pointer-events: none; }
.entete.colle .entete__barre {
  width: min(1120px, 100%); height: 60px; padding: 0 12px 0 18px; pointer-events: auto;
  border-radius: 16px; border-color: var(--trait-2); background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: var(--ombre);
}

.marque { display: block; flex: none; height: 52px; padding-right: 2px; overflow: hidden; transition: height .5s var(--courbe); }
.marque__logo { width: auto; height: 52px; aspect-ratio: 43.02 / 28.59; overflow: visible; }
.marque__signature { transition: opacity .3s; }
.entete.colle .marque { height: 36px; }
.entete.colle .marque__signature { opacity: 0; }

.nav { position: relative; display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav__lien { position: relative; z-index: 1; padding: 9px 14px; border-radius: 9px; font-size: 15px; font-weight: 450; color: var(--encre-2); transition: color .2s; }
.nav__lien:hover, .nav__lien.actif { color: var(--bleu-700); }
.nav__lien.actif::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--bleu); }
.nav__survol {
  position: absolute; left: 0; top: 50%; width: 0; height: 36px; border-radius: 9px;
  background: var(--bleu-50); box-shadow: inset 0 0 0 1px var(--bleu-100); opacity: 0;
  transform: translate(var(--x, 0), -50%);
  transition: transform .4s var(--courbe), width .4s var(--courbe), opacity .2s;
}
.nav.survol .nav__survol { opacity: 1; }

.entete__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.entete__tel { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--encre-2); font-variant-numeric: tabular-nums; transition: color .2s; }
.entete__tel:hover { color: var(--bleu-700); }

.bouton-menu { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--trait-2); border-radius: 12px; background: #fff; cursor: pointer; }
.bouton-menu span { position: absolute; left: 12px; right: 12px; top: 50%; height: 1.8px; margin-top: -.9px; border-radius: 2px; background: var(--encre); transition: transform .4s var(--courbe); }
.bouton-menu span:first-child { transform: translateY(-4px); }
.bouton-menu span:last-child { transform: translateY(4px); }
.bouton-menu[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.bouton-menu[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.menu {
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--entete-h) + 1px + env(safe-area-inset-top, 0px)); z-index: -1;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto;
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: #fff;
  opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .45s var(--courbe);
}
.menu[hidden] { display: none; }
.entete.menu-ouvert .menu { opacity: 1; transform: none; }
.entete.menu-ouvert { pointer-events: auto; }
.entete.menu-ouvert.colle { padding-top: 0; background: #fff; border-color: var(--trait); }
.entete.menu-ouvert.colle .entete__barre {
  width: min(var(--largeur), 100%); height: var(--entete-h); padding: 0 var(--marge); border-radius: 0; border-color: transparent; border-inline-color: var(--trait);
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.entete.menu-ouvert.colle .marque { height: 52px; }
.entete.menu-ouvert.colle .marque__signature { opacity: 1; }
.menu__panneau { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 640px; margin: 0 auto; }
.menu__nav { display: grid; }
.menu__nav a {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 16px 4px;
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--courbe), transform .5s var(--courbe);
}
.menu__nav a + a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--trait); }
.menu__titre { font-size: 22px; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; color: var(--encre); transition: color .2s; }
.menu__desc { grid-column: 1; font-size: 14px; line-height: 1.35; color: var(--gris); }
.menu__nav .ico { grid-row: 1 / span 2; grid-column: 2; width: 20px; height: 20px; color: var(--bleu); transition: transform .35s var(--courbe); }
.menu__nav a:hover .menu__titre, .menu__nav a:active .menu__titre { color: var(--bleu-700); }
.menu__nav a:hover .ico { transform: translateX(3px); }
.entete.menu-ouvert .menu__nav a { opacity: 1; transform: none; }
.entete.menu-ouvert .menu__nav a:nth-child(2) { transition-delay: 40ms; }
.entete.menu-ouvert .menu__nav a:nth-child(3) { transition-delay: 80ms; }
.entete.menu-ouvert .menu__nav a:nth-child(4) { transition-delay: 120ms; }
.entete.menu-ouvert .menu__nav a:nth-child(5) { transition-delay: 160ms; }
.menu__bouton {
  display: grid; gap: 14px; margin-top: auto; padding: 20px; border-radius: 16px; color: #fff;
  background: linear-gradient(150deg, #2b6ec1, #1b4f93);
  opacity: 0; transform: translateY(12px); transition: opacity .45s var(--courbe) .15s, transform .6s var(--courbe) .15s;
}
.menu__nav { margin-bottom: 24px; }
.entete.menu-ouvert .menu__bouton { opacity: 1; transform: none; }
.menu__bouton-texte { font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.menu__bouton-texte span { color: var(--soleil); }
.menu__bouton .bouton { width: 100%; }
.menu__contacts { display: grid; gap: 8px; }
.menu__contacts a {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 11px;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); font-size: 15px; font-weight: 500; white-space: nowrap;
}
.menu__contacts a:hover { background: rgba(255, 255, 255, .22); }
.menu__preuve { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 14px; font-size: 13.5px; color: var(--gris); }
.menu__preuve strong { color: var(--encre); }
.menu__preuve .etoiles { font-size: 12px; }

@media (max-width: 1160px) { .entete__tel span { display: none; } }
@media (max-width: 980px) {
  .nav { display: none; }
  .entete__actions { margin-left: auto; }
  .entete__tel { display: none; }
  .bouton-menu { display: block; }
}
@media (max-width: 720px) {
  :root { --entete-h: 66px; }
  .entete { padding-inline: 10px; }
  .entete__barre { padding-inline: 10px; border-inline-color: transparent; }
  .marque, .marque__logo { height: 46px; }
  .entete.colle .marque { height: 32px; }
  .entete.menu-ouvert.colle .entete__barre { padding-inline: 10px; border-inline-color: transparent; }
  .entete.menu-ouvert.colle .marque { height: 46px; }
}
@media (max-width: 480px) { .entete__bouton { display: none; } }
.accueil { position: relative; isolation: isolate; }
.accueil::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 46% at 82% 0%, rgba(60, 143, 251, .16), transparent 70%),
    radial-gradient(36% 40% at 0% 26%, rgba(43, 110, 193, .08), transparent 70%);
}
.accueil::after {
  content: ""; position: absolute; inset: 0 0 40%; z-index: -1; pointer-events: none; opacity: .75;
  background-image: radial-gradient(var(--bleu-200) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 78% 8%, #000 0, transparent 78%);
  mask-image: radial-gradient(60% 70% at 78% 8%, #000 0, transparent 78%);
}
.accueil__cadre { padding-inline: 0; padding-top: clamp(36px, 5.4vw, 76px); }
.scene-cadre::before, .accueil__cadre::after {
  content: ""; display: block; height: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--trait-2);
  background: repeating-linear-gradient(-45deg, var(--trait-2) 0 1px, transparent 1px 9px);
}
.accueil__tete { padding-inline: var(--marge); padding-bottom: clamp(40px, 5.4vw, 76px); }

.preuve {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; margin-bottom: clamp(22px, 3vw, 36px); padding: 0 14px 0 10px;
  border: 1px solid var(--trait-2); border-radius: 999px; background: rgba(255, 255, 255, .85); box-shadow: var(--ombre-sm);
  font-size: 13.5px; color: var(--encre-2); transition: border-color .2s, box-shadow .2s;
}
.preuve:hover { border-color: var(--bleu-300); box-shadow: var(--ombre); }
.preuve strong { color: var(--encre); }
.preuve__google { width: 16px; height: 16px; flex: none; }
.preuve .etoiles { font-size: 13px; }
.preuve__sep { width: 1px; height: 14px; background: var(--trait-2); }

.accueil__titre { font-size: clamp(38px, 6.9vw, 92px); line-height: 1.03; letter-spacing: -.05em; font-weight: 500; text-wrap: wrap; }
.titre-ligne { display: block; }
.titre-mot { display: inline-block; }
.rotation { display: inline-grid; color: var(--bleu); }
.rotation__mot { grid-area: 1 / 1; white-space: nowrap; opacity: 0; }
.rotation__mot.courant, .rotation__mot.sorti { opacity: 1; }
.rotation__mot .lettre {
  display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.38em);
  transition: opacity .5s var(--courbe), filter .5s var(--courbe), transform .7s var(--courbe);
  transition-delay: calc(var(--c) * 20ms);
}
.rotation__mot.courant .lettre { opacity: 1; filter: none; transform: none; }
.rotation__mot.sorti .lettre { opacity: 0; filter: blur(8px); transform: translateY(-.32em); transition-delay: calc(var(--c) * 10ms); }

.accueil__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(44px, 4.4vw, 60px); }
.accueil__chapo { max-width: 35em; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; }
.accueil__chapo strong { color: var(--encre); }
.accueil__actions { display: grid; gap: 20px; justify-items: start; }
.accueil__boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.confiance { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--gris); }
.confiance img { width: auto; height: 40px; }
.confiance strong { color: var(--encre); }

@media (max-width: 900px) {
  .accueil__ligne { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .preuve { gap: 8px; padding-inline: 9px 12px; font-size: 12.5px; }
  .preuve .etoiles { display: none; }
  .accueil__boutons .bouton { flex: 1 1 100%; }
}
.scene {
  position: relative; height: 45em; overflow: hidden;
  font-size: clamp(6px, 1.085vw, 14px);
  border-top: 1px solid var(--trait);
  background: linear-gradient(180deg, #f3f8fe 0%, #fafcff 62%, #fff 100%);
}
.scene::before {
  content: ""; position: absolute; inset: 0; opacity: .85;
  background-image: radial-gradient(rgba(43, 110, 193, .24) 1px, transparent 1.4px); background-size: 1.6em 1.6em;
  -webkit-mask-image: radial-gradient(58% 80% at 50% 42%, #000 18%, transparent 80%);
  mask-image: radial-gradient(58% 80% at 50% 42%, #000 18%, transparent 80%);
}
.scene__toile { position: absolute; left: 50%; top: 0; width: 86em; height: 100%; margin-left: -43em; }

.scene-cadre { position: relative; }
.scene__pixels { position: absolute; bottom: 0; z-index: 0; display: flex; align-items: flex-end; width: 12em; height: 82%; }
.scene__pixels--gauche { left: 0; }
.scene__pixels--droite { right: 0; transform: scaleX(-1); }
.scene__pixels i {
  flex: 1; height: var(--h); transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(43, 110, 193, var(--o)), rgba(60, 143, 251, calc(var(--o) * .2)));
  animation: pixels var(--t) ease-in-out var(--dl) infinite alternate;
}
.navigateur {
  position: absolute; left: 19.5em; top: 2.6em; z-index: 1; width: 48em; overflow: hidden;
  border: 1px solid var(--trait-2); border-radius: 1.1em; background: #fff;
  box-shadow: 0 .2em .4em rgba(11, 26, 48, .04), 0 3em 6em -2.6em rgba(20, 60, 115, .45);
}
.navigateur__barre { display: flex; align-items: center; gap: 1em; height: 3em; padding: 0 1.1em; border-bottom: 1px solid var(--trait); background: #fbfcfe; }
.navigateur__url {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-width: 22em; height: 2.1em; margin-inline: auto; padding: 0 .9em;
  border-radius: .6em; background: #f0f3f8; font: 500 .86em/1 var(--police-mono); color: var(--gris);
}

.site-demo { position: relative; display: flex; flex-direction: column; height: 29em; overflow: hidden; padding: 0 2em; background: #fff; }
.site-demo__nav { display: flex; align-items: center; gap: 1.4em; flex: none; height: 3.8em; }
.site-demo__marque { display: inline-flex; align-items: center; gap: .5em; font-size: .95em; font-weight: 600; letter-spacing: -.02em; color: var(--encre); white-space: nowrap; }
.site-demo__marque i { width: 1.4em; height: 1.4em; border-radius: .4em; background: var(--bleu); }
.site-demo__liens { display: flex; gap: 1.2em; margin-left: auto; }
.site-demo__liens i { width: 3em; height: .48em; border-radius: 1em; background: var(--trait-2); }
.site-demo__bouton { display: inline-flex; align-items: center; height: 2.2em; padding: 0 1em; border-radius: 2em; background: var(--encre); color: #fff; font-size: .8em; font-weight: 500; }
.site-demo__bandeau { display: grid; grid-template-columns: 18em 1fr; gap: 2em; align-items: center; flex: 1; min-height: 0; padding: .3em 0 1.2em; }
.site-demo__surtitre { display: block; font: 500 .76em/1 var(--police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); }
.site-demo__titre { margin: .45em 0 .55em; font-size: 2.35em; line-height: 1.06; letter-spacing: -.04em; font-weight: 600; color: var(--encre); }
.site-demo__lignes { display: grid; gap: .55em; margin-bottom: 1.3em; }
.site-demo__lignes i { height: .5em; border-radius: 1em; background: var(--trait); }
.site-demo__lignes i:nth-child(1) { width: 94%; }
.site-demo__lignes i:nth-child(2) { width: 80%; }
.site-demo__lignes i:nth-child(3) { width: 58%; }
.site-demo__actions { display: flex; gap: .6em; }
.site-demo__actions b { display: inline-flex; align-items: center; height: 2.6em; padding: 0 1.2em; border-radius: .7em; background: var(--bleu); color: #fff; font-size: .88em; font-weight: 500; white-space: nowrap; }
.site-demo__actions b.fantome { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait-2); }
.site-demo__decor { position: relative; height: 100%; min-height: 15em; overflow: hidden; border-radius: 1.1em; background: var(--bleu-50); }
.decor { position: absolute; inset: 0; width: 100%; height: 100%; }
.decor--b { opacity: 0; transition: opacity 1.2s var(--courbe); }
.site-demo__cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; flex: none; padding-bottom: 1.5em; }
.site-demo__cartes span { display: grid; grid-template-columns: 2.2em 1fr; gap: .35em .8em; align-items: center; padding: .9em; border: 1px solid var(--trait); border-radius: .9em; }
.site-demo__cartes i { grid-row: span 2; width: 2.2em; height: 2.2em; border-radius: .6em; background: var(--bleu-100); }
.site-demo__cartes em { height: .5em; border-radius: 1em; background: var(--trait); }
.site-demo__cartes em:last-child { width: 60%; }

.telephone {
  position: absolute; left: 70em; top: 6.4em; z-index: 3; width: 13.6em; height: 27.6em; padding: .45em;
  border-radius: 2.2em; background: var(--encre);
  box-shadow: 0 0 0 1px rgba(11, 26, 48, .2), 0 3em 5em -2em rgba(11, 26, 48, .5);
}
.telephone::before { content: ""; position: absolute; left: 50%; top: .9em; z-index: 3; width: 3.4em; height: .75em; margin-left: -1.7em; border-radius: 1em; background: var(--encre); }
.telephone__ecran { position: relative; height: 100%; overflow: hidden; border-radius: 1.8em; background: #fff; }
.site-mobile { padding: 2.3em .9em .9em; }
.site-mobile__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8em; }
.site-mobile__nav .site-demo__marque { font-size: .74em; }
.site-mobile__menu { display: grid; gap: .28em; }
.site-mobile__menu i { width: 1.2em; height: .15em; border-radius: 1em; background: var(--encre); }
.site-mobile__decor { position: relative; height: 8.4em; margin-bottom: .9em; overflow: hidden; border-radius: .9em; background: var(--bleu-50); }
.site-mobile .site-demo__surtitre { font-size: .6em; }
.site-mobile__titre { margin: .4em 0 .6em; font-size: 1.3em; line-height: 1.08; letter-spacing: -.035em; font-weight: 600; color: var(--encre); }
.site-mobile .site-demo__lignes { margin-bottom: 0; }
.site-mobile__bouton { display: flex; align-items: center; justify-content: center; height: 2.6em; margin-top: 1em; border-radius: .7em; background: var(--bleu); color: #fff; font-size: .8em; font-weight: 500; }
.brique, .scene .telephone { transition: opacity .7s var(--courbe), transform .9s var(--courbe); }
.avec-js .scene:not(.construit) .brique { opacity: 0; transform: translateY(.9em); transition: none; }
.avec-js .scene:not(.construit) .telephone { opacity: 0; transform: translate(1.6em, 1em); transition: none; }
.scene.construit .brique { transition-delay: calc(var(--b) * 150ms + 100ms); }
.scene.construit .telephone { transition-delay: 1.35s; }
.temps1, .temps2, .notif { opacity: 0; transform: translateY(.7em) scale(.97); transition: opacity .45s var(--courbe), transform .6s var(--courbe); }
.scene[data-temps="1"] .temps1 { opacity: 1; transform: none; }
.avec-js .scene:not(.construit) .temps1 { opacity: 0; transform: translateY(.7em) scale(.97); transition: none; }
.scene.construit[data-temps="1"] .temps1 { transition-delay: 1.6s; }
.scene[data-temps="2"] .temps2 { opacity: 1; transform: none; transition-delay: calc(var(--p, 0) * 420ms + 900ms); }
.scene[data-temps="2"] .encart--seo { transition-delay: .3s; }
.scene[data-temps="3"] .notif { opacity: 1; transform: none; transition-delay: calc(var(--p) * 1000ms + 400ms); }
.scene[data-temps="3"] .decor--b { opacity: 1; transition-delay: 3.6s; }

.encart {
  position: absolute; z-index: 4; padding: 1.1em 1.2em;
  border: 1px solid var(--trait-2); border-radius: 1.1em; background: rgba(255, 255, 255, .97);
  box-shadow: 0 .1em .3em rgba(11, 26, 48, .05), 0 1.6em 3.2em -1.5em rgba(20, 60, 115, .42);
}
.encart__titre { display: block; margin-bottom: .9em; font: 500 .74em/1 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.encart--creation, .encart--seo { left: .6em; top: 7.2em; width: 17.6em; }
.coches { display: grid; gap: .75em; margin: 0; padding: 0; list-style: none; font-size: .92em; font-weight: 500; color: var(--encre-2); }
.coches li { display: flex; align-items: center; gap: .65em; }
.coche { display: grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--bleu); color: #fff; transition: transform .45s var(--courbe); }
.avec-js .coche { transform: scale(0); }
.coche .ico { width: .95em; height: .95em; stroke-width: 2.6; }
.scene.construit[data-temps="1"] .temps1 .coche { transform: none; transition-delay: calc(var(--p) * 450ms + 2100ms); }
.scene[data-temps="2"] .temps2 .coche { transform: none; transition-delay: calc(var(--p) * 450ms + 1100ms); }

.balayage {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 5em; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(60, 143, 251, 0), rgba(60, 143, 251, .16) 70%, rgba(60, 143, 251, .32));
  border-bottom: 2px solid var(--ciel);
}
.scene[data-temps="2"] .balayage { animation: balayage 2.4s var(--courbe-es) .3s both; }

.repere {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: .45em; padding: .4em .8em .4em .45em;
  border: 1px solid var(--bleu-200); border-radius: 2em; background: #fff; box-shadow: 0 .6em 1.4em -.6em rgba(20, 60, 115, .45);
  font-weight: 500; color: var(--encre-2); white-space: nowrap;
}
.repere__texte { font-size: .86em; }
.repere__ico { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--bleu); color: #fff; }
.repere__ico .ico { width: .9em; height: .9em; stroke-width: 2.6; }

.notifs { position: absolute; left: .6em; top: 4.8em; z-index: 4; display: grid; gap: .8em; width: 17.8em; }
.notif {
  display: flex; align-items: center; gap: .75em; padding: .8em .9em;
  border: 1px solid var(--trait-2); border-radius: 1.1em; background: rgba(255, 255, 255, .97);
  box-shadow: 0 .1em .3em rgba(11, 26, 48, .05), 0 1.6em 3.2em -1.5em rgba(20, 60, 115, .42);
}
.notif__ico { display: grid; place-items: center; flex: none; width: 2.9em; height: 2.5em; border-radius: .8em; background: var(--bleu-50); box-shadow: inset 0 0 0 1px var(--bleu-100); }
.notif__logo { width: 2.4em; height: auto; }
.notif__texte { display: grid; gap: .15em; min-width: 0; }
.notif__texte small { font: 500 .7em/1.2 var(--police-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.notif__texte b { font-size: .98em; font-weight: 600; letter-spacing: -.01em; color: var(--encre); }
.notif__texte span { font-size: .8em; color: var(--gris); }
.onglets {
  position: absolute; left: 50%; bottom: 18px; z-index: 6; display: none; gap: 4px; padding: 5px; transform: translateX(-50%);
  border: 1px solid var(--trait-2); border-radius: 16px; background: rgba(255, 255, 255, .92); box-shadow: var(--ombre);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.avec-js .onglets { display: flex; }
.onglet {
  position: relative; display: grid; gap: 3px; min-width: 200px; padding: 9px 14px 13px; border: 0; border-radius: 11px;
  background: transparent; color: var(--gris); text-align: left; cursor: pointer; transition: background-color .2s, color .2s;
}
.onglet:hover { background: var(--bleu-50); color: var(--encre-2); }
.onglet.courant { background: var(--bleu-50); color: var(--encre); }
.onglet__etiquette { font: 500 11px/1.2 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); }
.onglet__texte { font-size: 14.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.onglet__barre { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--trait-2); opacity: 0; }
.onglet.courant .onglet__barre { opacity: 1; }
.onglet__barre i { display: block; height: 100%; background: var(--bleu); transform-origin: 0 50%; transform: scaleX(0); }
.onglet.courant .onglet__barre i { animation: remplissage var(--duree, 7s) linear forwards; }
.onglets.fixe .onglet.courant .onglet__barre i { animation: none; transform: none; }

@media (max-width: 720px) {
  .scene { height: 40em; font-size: calc((100vw - 28px) / 60); }
  .scene__toile { width: 60em; margin-left: -30em; }
  .navigateur { left: 0; }
  .navigateur__url { min-width: 0; padding: 0 1.4em; }
  .telephone { left: 46em; top: 8.4em; }
  .encart--creation, .encart--seo { left: .6em; top: 11.5em; font-size: 1.3em; }
  .notifs { left: .6em; top: 9.5em; width: 22em; font-size: 1.25em; }
  .notif:nth-child(-n+2) { display: none; }
  .repere { display: none; }
  .scene__pixels { width: 9em; height: 60%; }
  .onglets { position: static; margin: 12px 16px 0; transform: none; }
  .scene-cadre::before { height: 22px; }
  .accueil__cadre::after { height: 22px; margin-top: 16px; }
  .onglet { flex: 1; min-width: 0; padding: 10px 8px 13px; text-align: center; justify-items: center; }
  .onglet__texte { display: none; }
  .onglet__barre { left: 10px; right: 10px; }
}
.clients > .conteneur { padding-block: 0; }
.clients__grille { display: grid; grid-template-columns: minmax(280px, 1fr) 2.3fr; }
.clients__intro { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3.4vw, 44px) var(--marge); border-right: 1px solid var(--trait); }
.clients__titre { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -.03em; font-weight: 450; color: var(--gris); }
.clients__titre strong { font-weight: 500; color: var(--encre); }
.clients__intro > p:not(.notation) { font-size: 15px; color: var(--gris); }
.clients__liens { list-style: none; margin: auto 0 0; padding: 12px 0 0; }
.clients__liens a { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--trait); font-size: 14.5px; color: var(--encre-2); transition: color .2s, padding .4s var(--courbe); }
.clients__liens a:hover { padding-left: 6px; color: var(--bleu); }
.clients__liens .ico { color: var(--gris); transition: transform .35s var(--courbe), color .2s; }
.clients__liens a:hover .ico { color: var(--bleu); transform: translate(2px, -2px); }

.logos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.logos li { display: grid; place-items: center; min-height: 138px; padding: 20px 24px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.logos li:nth-child(4n) { border-right: 0; }
.logos li:nth-child(n+9) { border-bottom: 0; }
.logos li:nth-child(n+13) { display: none; }
.logos img {
  width: auto; height: auto; max-width: min(150px, 80%); max-height: 54px; object-fit: contain;
  filter: grayscale(1); opacity: .74;
  transition: filter .4s, opacity .45s var(--courbe), transform .6s var(--courbe);
}
.logos img.logo-large { max-width: min(176px, 86%); }
.logos img.logo-haut { max-height: 74px; }
.logos li:hover img { filter: none; opacity: 1; transform: scale(1.04); }
.logos img.sortie { opacity: 0; filter: grayscale(1) blur(6px); transform: translateY(-10px); }
.logos img.entree { opacity: 0; filter: grayscale(1) blur(6px); transform: translateY(10px); transition: none; }
[data-halo]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(60, 143, 251, .13), transparent 70%);
}
[data-halo]:hover::after { opacity: 1; }
.etapes[data-halo]::after {
  inset: 0 -48px -140px;
  background: radial-gradient(220px circle at calc(var(--mx, 50%) + 48px) var(--my, 50%), rgba(60, 143, 251, .13), transparent 70%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(#000 calc(100% - 140px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(#000 calc(100% - 140px), transparent);
  mask-composite: intersect;
}

@media (max-width: 980px) {
  .clients__grille { grid-template-columns: 1fr; }
  .clients__intro { border-right: 0; border-bottom: 1px solid var(--trait); }
  .clients__liens { margin-top: 4px; }
}
@media (max-width: 720px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
  .logos li { min-height: 112px; }
  .logos li:nth-child(4n) { border-right: 1px solid var(--trait); }
  .logos li:nth-child(2n) { border-right: 0; }
  .logos li:nth-child(n+5) { border-bottom: 1px solid var(--trait); }
  .logos li:nth-child(n+5):nth-child(-n+6) { border-bottom: 0; }
  .logos li:nth-child(n+7) { display: none; }
}
.pile { display: grid; gap: 22px; }
.pile.empile .carte-exp { position: sticky; top: calc(var(--entete-h) + 14px + var(--n) * 16px); }
.carte-exp__contenu {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(24px, 4vw, 64px);
  min-height: 536px; padding: clamp(22px, 3.2vw, 44px);
  border: 1px solid var(--trait-2); border-radius: var(--rayon-xl); background: #fff;
  box-shadow: 0 -20px 44px -28px rgba(20, 60, 115, .22);
  transform-origin: 50% 0; transform: scale(calc(1 - var(--recouvre, 0) * .045));
}
.pile.empile .carte-exp__contenu { will-change: transform; }
.carte-exp--b .carte-exp__contenu { background: var(--bleu-50); border-color: var(--bleu-100); }
.carte-exp--d .carte-exp__contenu { background: linear-gradient(140deg, #2b6ec1, #2361ae 50%, #1b4f93); border-color: transparent; color: #fff; }

.carte-exp__corps { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: 6px; }
.carte-exp__num { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 0; padding-bottom: 26px; font: 500 12px/1 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); }
.carte-exp__num span { display: grid; place-items: center; width: 32px; height: 24px; border-radius: 7px; background: var(--bleu); color: #fff; letter-spacing: 0; }
.carte-exp__titre { margin-bottom: 18px; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.04; letter-spacing: -.04em; }
.carte-exp__titre span { display: block; color: var(--bleu); }
.carte-exp__texte { max-width: 50ch; font-size: 16px; line-height: 1.62; }
.carte-exp__texte + .carte-exp__texte { margin-top: 12px; }
.carte-exp__texte strong { color: var(--encre); }
.carte-exp__liens { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }

.puces { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; font-size: 15px; color: var(--encre-2); }
.puces li { position: relative; padding-left: 28px; }
.puces li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.carte-exp--d .carte-exp__num { color: #fff; }
.carte-exp--d .carte-exp__num span { background: #fff; color: var(--bleu-700); }
.carte-exp--d .carte-exp__titre { color: #fff; }
.carte-exp--d .carte-exp__titre span { color: var(--soleil); }
.carte-exp--d .carte-exp__texte { color: rgba(255, 255, 255, .94); }
.carte-exp--d .puces { color: #fff; }
.carte-exp--d .puces li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232361ae' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

.carte-exp__visuel {
  position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; container-type: inline-size;
  border: 1px solid var(--trait); border-radius: var(--rayon-lg); background: linear-gradient(180deg, var(--bleu-50), #fff);
}
.carte-exp__visuel::before {
  content: ""; position: absolute; inset: 0; opacity: .7;
  background-image: radial-gradient(rgba(43, 110, 193, .22) 1px, transparent 1.4px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.carte-exp--b .carte-exp__visuel { background: #fff; border-color: var(--bleu-100); }
.carte-exp--d .carte-exp__visuel { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.carte-exp--d .carte-exp__visuel::before { background-image: radial-gradient(rgba(255, 255, 255, .3) 1px, transparent 1.4px); }
.visuel { position: relative; width: 36em; height: 27em; font-size: clamp(8.4px, 1.02vw, 13px); font-size: clamp(5.6px, 2.56cqw, 13px); }

.tuile {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: .8em; padding: .8em 1em;
  border: 1px solid var(--trait-2); border-radius: 1em; background: #fff;
  box-shadow: 0 .1em .3em rgba(11, 26, 48, .05), 0 1.4em 2.8em -1.4em rgba(20, 60, 115, .4);
}
.tuile b { display: block; font-size: .95em; font-weight: 600; color: var(--encre); }
.tuile small { display: block; margin-top: .15em; font-size: .78em; color: var(--gris); }
.tuile__ico { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: .75em; background: var(--bleu-50); color: var(--bleu); }
.tuile__ico .ico { width: 1.25em; height: 1.25em; }
.tuile__ico--ok { background: var(--bleu); color: #fff; }
.tuile__libelle { display: flex; align-items: center; justify-content: space-between; font: 500 .74em/1 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.tuile__libelle em { font-style: normal; color: var(--bleu); }
.mini__barre { display: flex; align-items: center; gap: .8em; height: 2.6em; padding: 0 .9em; border-bottom: 1px solid var(--trait); background: #fbfcfe; }
.mini__url { margin-inline: auto; padding: .5em 1em; border-radius: .5em; background: #f0f3f8; font: 500 .8em/1 var(--police-mono); color: var(--gris); }
.paquet { position: absolute; inset: 0; }
.paquet__carte {
  position: absolute; left: 3em; top: 5em; width: 30em; margin: 0; overflow: hidden;
  border: 1px solid var(--trait-2); border-radius: 1em; background: #fff;
  box-shadow: 0 .1em .3em rgba(11, 26, 48, .05), 0 1.8em 3.4em -1.8em rgba(20, 60, 115, .45);
  transform-origin: 50% 0; transition: transform .8s var(--courbe), opacity .6s var(--courbe);
}
.paquet__carte img { display: block; width: 100%; height: auto; aspect-ratio: 880 / 550; object-fit: cover; }
.paquet__carte:not(:first-child):not([data-position]) { opacity: 0; }
.paquet__carte:first-child { z-index: 5; }
.paquet__carte[data-position] { z-index: 0; transform: translateY(-4.4em) scale(.85); opacity: 0; }
.paquet__carte[data-position="0"] { z-index: 4; transform: none; opacity: 1; }
.paquet__carte[data-position="1"] { z-index: 3; transform: translateY(-1.6em) scale(.95); opacity: 1; }
.paquet__carte[data-position="2"] { z-index: 2; transform: translateY(-3.2em) scale(.9); opacity: 1; }
.paquet__carte.sortie { transform: translateY(2.2em) scale(1.02); opacity: 0; }
.paquet__etiquette {
  position: absolute; left: .9em; bottom: .9em; display: inline-flex; align-items: center; gap: .55em; padding: .55em .95em;
  border-radius: 2em; background: #fff; box-shadow: 0 .4em 1.2em -.4em rgba(11, 26, 48, .35); font-size: .86em; color: var(--gris);
}
.paquet__etiquette b { font-weight: 600; color: var(--bleu-700); }
.serp { position: absolute; left: .5em; top: 1em; width: 25em; padding: 1.1em; border: 1px solid var(--trait-2); border-radius: 1em; background: #fff; box-shadow: 0 .1em .3em rgba(11, 26, 48, .05), 0 1.8em 3.4em -1.8em rgba(20, 60, 115, .4); }
.serp__recherche { display: flex; align-items: center; gap: .6em; height: 2.9em; margin-bottom: 1em; padding: 0 1em; border: 1px solid var(--trait-2); border-radius: 2em; box-shadow: var(--ombre-sm); font-size: .92em; color: var(--encre-2); }
.serp__recherche .ico { color: var(--gris); }
.curseur { width: .12em; height: 1.2em; margin-left: -.3em; background: var(--bleu); animation: clignote 1.1s steps(1) infinite; }
.serp__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; }
.resultat { display: flex; align-items: center; gap: .8em; height: 5em; padding: 0 .9em; border: 1px solid var(--trait); border-radius: .8em; background: #fff; }
.resultat__position { flex: none; width: 2em; height: 2em; overflow: hidden; border-radius: .6em; background: #f0f3f8; color: var(--gris); font: 600 .9em/2.22em var(--police-mono); }
.resultat__position > span { display: block; transform: translateY(-66.666%); }
.resultat__position b { display: block; height: 2.22em; text-align: center; font-weight: 600; }
.resultat__contenu { display: grid; gap: .45em; flex: 1; min-width: 0; }
.resultat__contenu small { font: 500 .74em/1 var(--police-mono); color: var(--gris); }
.resultat__contenu b { font-size: .95em; font-weight: 600; letter-spacing: -.01em; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultat__contenu i { width: 80%; height: .42em; border-radius: 1em; background: var(--trait); }
.resultat--autre1 .resultat__contenu small, .resultat--autre2 .resultat__contenu small { width: 40%; height: .42em; border-radius: 1em; background: var(--trait-2); }
.resultat--autre1 .resultat__contenu b, .resultat--autre2 .resultat__contenu b { width: 72%; height: .6em; border-radius: 1em; background: var(--trait-2); }
.resultat--vous { border-color: var(--bleu-300); background: var(--bleu-50); box-shadow: 0 0 0 .25em rgba(60, 143, 251, .13); }
.resultat--vous .resultat__position { background: var(--bleu); color: #fff; }
.resultat--vous .resultat__contenu small { color: var(--bleu-700); }
.visuel-seo__graphique { right: 0; top: 5.6em; display: block; width: 15em; padding: 1em; }
.courbe { width: 100%; height: 6.4em; margin-top: .9em; overflow: visible; }
.courbe__aire { fill: rgba(43, 110, 193, .1); }
.courbe__trait { fill: none; stroke: var(--bleu); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.etiquettes--visuel { position: absolute; left: .5em; bottom: .1em; display: flex; flex-wrap: nowrap; gap: .5em; }
.etiquettes--visuel span { padding: .5em .9em; border-radius: 2em; background: #fff; box-shadow: inset 0 0 0 1px var(--trait-2); font-size: .8em; color: var(--encre-2); white-space: nowrap; }
.carte-exp.visible .serp__liste { animation: serpFondu 9s linear infinite; }
.carte-exp.visible .resultat--vous { animation: monteeVous 9s var(--courbe-es) infinite; }
.carte-exp.visible .resultat--autre1 { animation: monteeAutre1 9s var(--courbe-es) infinite; }
.carte-exp.visible .resultat--autre2 { animation: monteeAutre2 9s var(--courbe-es) infinite; }
.carte-exp.visible .resultat__position > span { animation: defilement 9s var(--courbe-es) infinite; }
.carte-exp.visible .courbe__trait { animation: trace 9s var(--courbe-es) infinite; }
.carte-exp.visible .courbe__aire { animation: aireEntree 9s linear infinite; }
.visuel-gestion { display: grid; place-items: center; }
.rapport {
  width: 31em; padding: 1.1em 1.2em .9em; border-radius: 1.2em; background: #fff;
  box-shadow: 0 .1em .3em rgba(8, 32, 70, .1), 0 1.8em 3.4em -1.6em rgba(8, 32, 70, .6);
}
.rapport__tete { display: flex; align-items: center; gap: .8em; padding-bottom: .9em; border-bottom: 1px solid var(--trait); }
.rapport__logo { display: grid; place-items: center; flex: none; width: 3.4em; height: 2.6em; border-radius: .7em; background: var(--bleu-50); }
.rapport__logo svg { width: 2.7em; height: auto; }
.rapport__titre b { display: block; font-size: 1em; font-weight: 600; letter-spacing: -.01em; color: var(--encre); }
.rapport__titre small { display: block; margin-top: .15em; font-size: .78em; color: var(--gris); }
.rapport__badge { margin-left: auto; padding: .4em .8em; border-radius: 2em; background: var(--bleu-50); box-shadow: inset 0 0 0 1px var(--bleu-100); font-size: .76em; font-weight: 500; color: var(--bleu-700); }
.rapport__liste { margin: 0; padding: 0; list-style: none; }
.rapport__liste li { display: flex; align-items: center; gap: .8em; padding: .62em 0; border-bottom: 1px solid var(--trait); }
.rapport__ico { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: .65em; background: var(--bleu-50); color: var(--bleu); }
.rapport__ico .ico { width: 1.15em; height: 1.15em; }
.rapport__texte { min-width: 0; }
.rapport__texte b { display: block; font-size: .92em; font-weight: 600; color: var(--encre); }
.rapport__texte small { display: block; margin-top: .1em; font-size: .76em; color: var(--gris); }
.statut { display: grid; flex: none; margin-left: auto; font-style: normal; }
.statut i { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .3em; height: 1.9em; padding: 0 .75em; border-radius: 2em; font-style: normal; font-size: .76em; font-weight: 500; white-space: nowrap; }
.statut__attente { background: #f0f3f8; color: var(--gris); opacity: 0; }
.statut__fait { background: var(--bleu); color: #fff; }
.statut__fait .ico { width: 1.05em; height: 1.05em; stroke-width: 2.6; }
.rapport__bas { display: flex; align-items: center; gap: .55em; padding-top: .85em; font-size: .86em; font-weight: 600; color: var(--bleu-700); }
.rapport__bas .ico { width: 1.2em; height: 1.2em; stroke-width: 2.4; }
.carte-exp.visible .statut__fait { animation: statutFait 10s var(--courbe) infinite both; animation-delay: calc(var(--k) * .55s); }
.carte-exp.visible .statut__attente { animation: statutAttente 10s var(--courbe) infinite both; animation-delay: calc(var(--k) * .55s); }

.carte-exp.recouvert .visuel * , .carte-exp.recouvert .visuel *::after { animation-play-state: paused !important; }

.pile:not(.empile) .carte-exp__contenu { transform: none; box-shadow: var(--ombre-sm); }

@media (max-width: 980px) {
  .carte-exp__contenu { grid-template-columns: 1fr; min-height: 0; }
  .carte-exp__visuel { min-height: 0; padding: 22px 0; }
  .visuel { font-size: clamp(5.6px, calc((100vw - 104px) / 36), 13px); font-size: clamp(5.6px, 2.56cqw, 13px); }
}
.manifeste > .conteneur { padding: clamp(14px, 2vw, 24px); }
.manifeste__panneau {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(36px, 6vw, 88px) clamp(22px, 5.4vw, 80px) clamp(26px, 4vw, 52px);
  border-radius: var(--rayon-xl); color: #fff;
  background: linear-gradient(135deg, #2b6ec1 0%, #2361ae 42%, #194b8e 100%);
}
.manifeste__panneau::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000); mask-image: linear-gradient(115deg, transparent 35%, #000);
}
.manifeste__cadre { position: absolute; right: -7%; top: -22%; z-index: -1; width: 66%; fill: rgba(255, 255, 255, .06); transform: rotate(-7deg); }
.manifeste__texte { max-width: 17.5em; font-size: clamp(28px, 4.7vw, 66px); line-height: 1.06; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
.manifeste__texte mark {
  color: var(--soleil);
  background: linear-gradient(var(--soleil), var(--soleil)) no-repeat 0 98% / 100% .065em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.manifeste__texte .mot-lu { transition: opacity .25s linear; }

.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 6vw, 88px); border-top: 1px solid rgba(255, 255, 255, .22); }
.chiffre { display: flex; flex-direction: column-reverse; gap: 6px; padding: clamp(18px, 2.4vw, 30px) clamp(12px, 2vw, 28px) 0; border-left: 1px solid rgba(255, 255, 255, .22); }
.chiffre:first-child { padding-left: 0; border-left: 0; }
.chiffre dt { font-size: 14.5px; color: rgba(255, 255, 255, .94); }
.chiffre dd { font-size: clamp(36px, 5vw, 68px); line-height: 1; letter-spacing: -.05em; font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .chiffre { padding: 18px 0 18px 16px; }
  .chiffre:nth-child(odd) { padding-left: 0; border-left: 0; }
  .chiffre:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .22); }
}
.realisations { background: var(--doux); --carrousel-marge: max(calc(var(--gouttiere) + var(--marge)), calc((100vw - var(--largeur)) / 2 + var(--marge))); }
.realisations::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  width: min(var(--largeur), calc(100% - 2 * var(--gouttiere))); margin-inline: auto; border-inline: 1px solid var(--trait);
}
.realisations > .realisations__cadre { padding-bottom: 0; }
.realisations > .realisations__cadre--bas { padding-top: 6px; padding-bottom: calc(var(--section-y) * .82); }
.realisations > .realisations__cadre--bas::before, .realisations > .realisations__cadre--bas::after { display: none; }
.realisations .bloc-titre { margin-bottom: clamp(26px, 3.2vw, 44px); }
.bloc-titre__cote { display: grid; gap: 22px; justify-items: start; }

.carrousel-nav { display: flex; gap: 8px; }
.carrousel-nav__bouton { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--trait-2); border-radius: 50%; background: #fff; color: var(--encre); box-shadow: var(--ombre-sm); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, opacity .2s, transform .3s var(--courbe); }
.carrousel-nav__bouton:first-child .ico { transform: rotate(180deg); }
.carrousel-nav__bouton:hover { border-color: var(--bleu); background: var(--bleu); color: #fff; }
.carrousel-nav__bouton:active { transform: scale(.94); }
.carrousel-nav__bouton:disabled { opacity: .4; pointer-events: none; }

.carrousel {
  position: relative; overflow-x: auto; overscroll-behavior-x: contain; padding-block: 10px 80px; margin-bottom: -50px;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--carrousel-marge);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab;
}
.carrousel::-webkit-scrollbar { display: none; }
.carrousel.glisse { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carrousel.glisse a { pointer-events: none; }
.carrousel__piste { display: flex; gap: 22px; width: max-content; margin: 0; padding: 0 var(--carrousel-marge); list-style: none; }

.projet { flex: none; width: min(540px, 84vw); scroll-snap-align: start; }
.projet__lien {
  display: flex; flex-direction: column; height: 100%; padding: 10px;
  border: 1px solid var(--trait-2); border-radius: var(--rayon-lg); background: #fff; box-shadow: var(--ombre-sm);
  transition: transform .6s var(--courbe), box-shadow .6s var(--courbe), border-color .3s;
}
.projet__lien:hover { transform: translateY(-6px); border-color: var(--bleu-200); box-shadow: var(--ombre-lg); }
.projet__cadre { overflow: hidden; border: 1px solid var(--trait); border-radius: 12px; background: #fff; }
.projet__barre { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--trait); background: #fbfcfe; }
.projet__barre .points i { width: 8px; height: 8px; }
.projet__url { max-width: 72%; margin-inline: auto; padding: 5px 12px; overflow: hidden; border-radius: 6px; background: #f0f3f8; font: 500 11.5px/1 var(--police-mono); color: var(--gris); white-space: nowrap; text-overflow: ellipsis; }
.projet__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bleu-50); }
.projet__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 1.4s var(--courbe); }
.projet__lien:hover .projet__media > img { transform: scale(1.04); }
.projet__logo { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; height: 50px; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, .95); box-shadow: var(--ombre-sm); }
.projet__logo img { width: auto; height: auto; max-width: 132px; max-height: 32px; object-fit: contain; }
.projet__decor { display: block; width: 100%; height: 100%; transition: transform 1.4s var(--courbe); }
.projet__lien:hover .projet__decor { transform: scale(1.05); }
.projet--suivant .projet__lien { border-color: var(--bleu-200); background: linear-gradient(180deg, #fff 55%, var(--bleu-50)); }
.projet__logo--vous { display: inline-flex; align-items: center; gap: 9px; padding: 0 16px 0 9px; font-size: 14.5px; font-weight: 600; color: var(--bleu-700); }
.projet__plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--bleu); color: #fff; transition: transform .6s var(--courbe); }
.projet__plus .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.projet--suivant .projet__lien:hover .projet__plus { transform: rotate(90deg); }
.projet__infos { display: flex; flex-direction: column; flex: 1; padding: 20px 12px 12px; }
.projet__infos h3 { margin-bottom: 8px; font-size: 22px; letter-spacing: -.03em; }
.projet__infos p { font-size: 14.5px; line-height: 1.55; }
.projet__bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.projet__voir { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--bleu-700); white-space: nowrap; }
.projet__voir .ico { transition: transform .35s var(--courbe); }
.projet__lien:hover .projet__voir .ico { transform: translate(2px, -2px); }

.carrousel-barre { width: min(240px, 60%); height: 3px; overflow: hidden; border-radius: 3px; background: var(--trait-2); }
.carrousel-barre span { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--bleu); transform-origin: 0 50%; transform: scaleX(var(--p, .18)); transition: transform .2s linear; }

@media (max-width: 720px) {
  .realisations { --carrousel-marge: 20px; }
  .realisations::before { display: none; }
  .carrousel__piste { gap: 14px; }
}
.etapes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait-2); }
.etapes::before { content: ""; position: absolute; left: 0; top: -2px; z-index: 1; width: 100%; height: 3px; border-radius: 3px; background: var(--bleu); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.etape { position: relative; padding: 36px clamp(16px, 2vw, 28px) 6px; border-left: 1px solid var(--trait); transition: opacity .5s; }
.etape:first-child { padding-left: 0; border-left: 0; }
.etape__point { position: absolute; left: clamp(16px, 2vw, 28px); top: -7.5px; z-index: 2; width: 14px; height: 14px; border: 2px solid var(--bleu); border-radius: 50%; background: var(--bleu); transition: border-color .4s, background-color .4s, box-shadow .4s, transform .6s var(--courbe); }
.etape:first-child .etape__point { left: 0; }
.etape__ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 13px; background: var(--bleu); color: #fff; transition: background-color .4s, color .4s, box-shadow .4s; }
.etape__ico .ico { width: 22px; height: 22px; }
.etape__num { margin-bottom: 10px; font: 500 12px/1 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte); }
.etape h3 { margin-bottom: 10px; font-size: 22px; letter-spacing: -.03em; }
.etape p:last-child { font-size: 15px; line-height: 1.6; }
.pret .etape:not(.courant) { opacity: .8; }
.pret .etape:not(.courant) .etape__point { border-color: var(--trait-2); background: #fff; }
.pret .etape:not(.courant) .etape__ico { background: var(--bleu-50); color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu-100); }
.pret .etape.courant .etape__point { box-shadow: 0 0 0 5px rgba(43, 110, 193, .16); transform: scale(1.08); }

@media (max-width: 980px) {
  .etapes { grid-template-columns: 1fr; gap: 6px; padding-left: 26px; border-top: 0; border-left: 1px solid var(--trait-2); }
  .etapes[data-halo]::after { content: none; }
  .etapes::before { left: -2px; top: 0; width: 3px; height: 100%; transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
  .etape, .etape:first-child { padding: 4px 0 30px; border-left: 0; }
  .etape__point, .etape:first-child .etape__point { left: -34px; top: 14px; }
  .etape p:last-child { max-width: 56ch; }
}
.notation--badge { margin-top: 24px; padding: 9px 16px 9px 12px; border: 1px solid var(--trait-2); border-radius: 999px; background: #fff; box-shadow: var(--ombre-sm); }

.mur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.mur__piste { display: grid; gap: 18px; }
.avis { display: grid; gap: 18px; padding: 22px 22px 18px; border: 1px solid var(--trait-2); border-radius: var(--rayon-lg); background: #fff; box-shadow: var(--ombre-sm); transition: border-color .3s, box-shadow .4s; }
.avis:hover { border-color: var(--bleu-200); box-shadow: var(--ombre); }
.avis p { font-size: 15.5px; line-height: 1.6; color: var(--encre-2); }
.avis figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--trait); }
.avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--bleu-50); box-shadow: inset 0 0 0 1px var(--bleu-100); font: 600 13px/1 var(--police); color: var(--bleu-700); }
.avis__auteur { display: grid; gap: 6px; }
.avis__auteur strong { font-size: 14.5px; line-height: 1; color: var(--encre); }
.avis__auteur .etoiles { font-size: 12px; }
.avis__google { width: 18px; height: 18px; margin-left: auto; flex: none; }
.mur.anime {
  height: min(760px, 88vh); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent);
}
.mur.anime .mur__piste { animation: defileMur var(--t, 50s) linear infinite; }
.mur.anime .mur__col:nth-child(2) .mur__piste { animation-direction: reverse; }
.mur.anime:hover .mur__piste, .mur.anime:focus-within .mur__piste, .mur.pause .mur__piste { animation-play-state: paused; }

@media (max-width: 900px) {
  .mur, .mur.anime {
    display: flex; gap: 14px; height: auto; margin-inline: calc(-1 * var(--marge)); padding: 4px var(--marge) 16px; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none;
  }
  .mur::-webkit-scrollbar { display: none; }
  .mur__col, .mur__piste { display: contents; }
  .avis { flex: none; width: min(84vw, 380px); align-content: space-between; scroll-snap-align: center; }
  .avis[aria-hidden="true"] { display: none; }
}
@media (max-width: 720px) {
  .mur, .mur.anime { margin-inline: -20px; padding-inline: 20px; }
}
.faq__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__cote { position: sticky; top: calc(var(--entete-h) + 24px); }
.faq__cote .bloc-titre__texte { margin-top: 20px; }
.faq__plus { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; font-size: 15.5px; color: var(--gris); }

.faq__liste { border-top: 1px solid var(--trait-2); }
.question { border-bottom: 1px solid var(--trait-2); }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.5vw, 19.5px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--encre); transition: color .2s;
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--bleu-700); }
.question__ico { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid var(--trait-2); border-radius: 50%; transition: background-color .3s, border-color .3s, color .3s, transform .6s var(--courbe); }
.question__ico::before, .question__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 2px; background: currentColor; transition: transform .5s var(--courbe); }
.question__ico::after { transform: rotate(90deg); }
.question.ouvert .question__ico, .sans-js .question[open] .question__ico { border-color: var(--bleu); background: var(--bleu); color: #fff; transform: rotate(180deg); }
.question.ouvert .question__ico::after, .sans-js .question[open] .question__ico::after { transform: rotate(0deg); }
.question__reponse { overflow: hidden; }
.question__reponse p { max-width: 68ch; padding: 0 56px 26px 4px; font-size: 16px; line-height: 1.65; }
.question__reponse a { color: var(--bleu-700); text-decoration: underline; text-underline-offset: 3px; }
.question__reponse a:hover { color: var(--bleu); }

@media (max-width: 900px) {
  .faq__grille { grid-template-columns: 1fr; }
  .faq__cote { position: static; }
  .question__reponse p { padding-right: 8px; }
}
.contact__carte { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); overflow: hidden; border: 1px solid var(--trait-2); border-radius: var(--rayon-xl); background: #fff; box-shadow: var(--ombre); }
.contact__infos { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 4.4vw, 60px); color: #fff; background: linear-gradient(150deg, #2b6ec1, #2361ae 46%, #17468a); }
.contact__infos::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%);
}
.titre2--clair { font-size: clamp(30px, 3.5vw, 48px); color: #fff; }
.titre2--clair em { color: var(--soleil); background-image: none; }
.contact__chapo { max-width: 46ch; margin-top: 20px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .94); }
.contact__liste { display: grid; gap: 2px; width: 100%; margin: 30px 0 0; padding: 0; list-style: none; }
.contact__liste a, .contact__ligne { display: flex; align-items: center; gap: 14px; margin-inline: -10px; padding: 10px; border-radius: 14px; font-size: 17px; font-weight: 500; line-height: 1.25; transition: background-color .2s; }
.contact__liste a:hover { background: rgba(255, 255, 255, .12); }
.contact__liste small { display: block; margin-bottom: 6px; font: 500 11px/1 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .94); }
.contact__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.contact__ico .ico { width: 20px; height: 20px; }
.contact__reponse { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 10px 16px 10px 14px; border-radius: 14px; line-height: 1.35; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: 14.5px; }
.contact__reponse .pulsation, .contact__reponse .pulsation::after { background: #9fe3b4; }
.contact__preuve { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 32px; font-size: 14px; color: rgba(255, 255, 255, .94); }
.contact__preuve .etoiles { font-size: 13px; }

.formulaire { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 4vw, 52px); }
.formulaire__titre { font-size: 28px; line-height: 1.1; letter-spacing: -.035em; font-weight: 500; color: var(--encre); }
.formulaire__aide { margin-top: -12px; font-size: 13px; color: var(--gris); }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ > label:not(.case), .champ > legend { padding: 0; font: 500 12px/1 var(--police-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--encre-2); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ textarea {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--trait-2); border-radius: 11px; background: #fff;
  font: 400 16px/1.4 var(--police); color: var(--encre); -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; }
.champ ::placeholder { color: #66758b; opacity: 1; }
.champ input:hover, .champ textarea:hover { border-color: var(--bleu-300); }
.champ input:focus, .champ textarea:focus { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(60, 143, 251, .2); }
.champ.invalide input:not([type="checkbox"]), .champ.invalide textarea { border-color: #d43c3c; box-shadow: 0 0 0 4px rgba(212, 60, 60, .12); }
.champ__erreur { font-size: 13px; color: #b92a2a; }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pastille { position: relative; cursor: pointer; }
.pastille input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pastille span { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border: 1px solid var(--trait-2); border-radius: 999px; font-size: 14.5px; font-weight: 450; color: var(--encre-2); transition: background-color .2s, border-color .2s, color .2s; }
.pastille:hover span { border-color: var(--bleu-300); }
.pastille input:checked + span { border-color: var(--bleu); background: var(--bleu); color: #fff; }
.pastille input:focus-visible + span { outline: 2px solid var(--ciel); outline-offset: 2px; }

.case { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--texte); cursor: pointer; }
.case input { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.case__boite { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--trait-2); border-radius: 7px; background: #fff; color: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.case__boite .ico { width: 13px; height: 13px; stroke-width: 2.6; }
.case input:checked + .case__boite { border-color: var(--bleu); background: var(--bleu); color: #fff; }
.case input:focus-visible + .case__boite { outline: 2px solid var(--ciel); outline-offset: 2px; }
.case a { color: var(--bleu-700); text-decoration: underline; text-underline-offset: 3px; }
.champ.invalide .case__boite { border-color: #d43c3c; }

.formulaire__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.formulaire__statut { flex: 1 1 220px; font-size: 14px; line-height: 1.45; color: var(--bleu-700); }
.formulaire__statut.erreur { color: #b92a2a; }
.formulaire__statut.envoye { font-weight: 500; color: #18794e; }
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire [type="submit"]:disabled { opacity: .6; cursor: progress; }

@media (max-width: 900px) { .contact__carte { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .formulaire__ligne { grid-template-columns: 1fr; }
  .formulaire__bas .bouton { width: 100%; }
}
.pied {
  position: relative; isolation: isolate; overflow: hidden; color: rgba(255, 255, 255, .84);
  background: linear-gradient(170deg, #205eae 0%, #17468a 52%, #0f2f5e 100%);
  --logo-encre: #fff; --logo-bleu: #bcd8ff;
}
.pied__contenu { width: min(var(--largeur), calc(100% - 2 * var(--gouttiere))); margin-inline: auto; padding: clamp(48px, 7vw, 96px) var(--marge) 0; border-inline: 1px solid rgba(255, 255, 255, .1); }
.pied__haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: clamp(36px, 5vw, 64px); border-bottom: 1px solid rgba(255, 255, 255, .15); }
.pied__accroche strong { font-weight: 500; color: var(--soleil); }
.pied__accroche { max-width: 20em; font-size: clamp(24px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.035em; font-weight: 450; color: #fff; text-wrap: balance; }
.pied__cols { display: grid; grid-template-columns: 1.5fr 1fr 1.25fr 1.25fr; gap: clamp(24px, 4vw, 56px); padding-block: clamp(36px, 5vw, 64px); }
.pied__logo { width: auto; height: 68px; margin-bottom: 18px; }
.pied__marque p { max-width: 32ch; font-size: 15px; line-height: 1.6; }
.pied__reseaux { display: flex; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.pied__reseaux a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; color: #fff; transition: background-color .2s, color .2s, transform .3s var(--courbe); }
.pied__reseaux a:hover { background: #fff; color: var(--bleu-700); transform: translateY(-2px); }
.pied__reseaux .ico { width: 20px; height: 20px; }
.pied__intitule { margin-bottom: 18px; font: 500 12px/1 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .84); }
.pied__col .pied__titre { margin-top: 30px; }
.pied__col ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; }
.pied__col a { color: #fff; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.pied__col a:hover { text-decoration-color: rgba(255, 255, 255, .7); }
.pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 14px; }
.pied__remonter { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.pied__remonter .ico { transform: rotate(-90deg); transition: transform .35s var(--courbe); }
.pied__remonter:hover .ico { transform: rotate(-90deg) translateX(3px); }

.legal .bloc-titre { margin-bottom: clamp(28px, 4vw, 48px); }
.legal__contenu { display: grid; gap: 12px; max-width: 74ch; font-size: 16px; line-height: 1.7; }
.legal__contenu h2 { margin-top: 26px; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -.02em; color: var(--encre); }
.legal__contenu h2:first-child { margin-top: 0; }
.legal__contenu a { color: var(--bleu-700); text-decoration: underline; text-underline-offset: 3px; }
.legal__maj { margin-top: 26px; font-size: 14px; color: var(--gris); }
.pied__geant {
  display: block; width: min(var(--largeur), calc(100% - 2 * var(--gouttiere))); margin: clamp(14px, 2.4vw, 34px) auto 0; margin-bottom: max(-17.2vw, -220px);
  pointer-events: none;
  --logo-encre: rgba(255, 255, 255, .06); --logo-bleu: rgba(255, 255, 255, .1);
}

@media (max-width: 900px) { .pied__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .pied__contenu { width: 100%; padding-inline: 20px; border-inline: 0; } }
@media (max-width: 520px) { .pied__cols { grid-template-columns: 1fr; } }
.avec-js .titre-mot { opacity: 0; filter: blur(10px); transform: translateY(.22em); }
.avec-js [data-chargement] { opacity: 0; transform: translateY(18px); }
.avec-js .navigateur[data-chargement] { transform: translateY(44px) scale(.985); }

.charge .titre-mot { opacity: 1; filter: none; transform: none; transition: opacity .8s var(--courbe), filter .8s var(--courbe), transform .9s var(--courbe); transition-delay: calc(var(--i) * 70ms + 120ms); }
.charge [data-chargement] { opacity: 1; transform: none; transition: opacity .9s var(--courbe), transform 1.2s var(--courbe); transition-delay: calc(var(--ld, 0) * 90ms + 260ms); }
[data-chargement="1"] { --ld: 0; } [data-chargement="3"] { --ld: 4; } [data-chargement="4"] { --ld: 5; } [data-chargement="5"] { --ld: 6; }
[data-chargement="6"] { --ld: 5; } [data-chargement="7"] { --ld: 8; } [data-chargement="8"] { --ld: 10; } [data-chargement="9"] { --ld: 11; }
.avec-js:not(.charge) .titre-mot, .avec-js:not(.charge) [data-chargement] { animation: secours .01s 3s forwards; }

.avec-js [data-alerte] { opacity: 0; transform: translateY(1em) scale(.96); transition: opacity .5s var(--courbe), transform .7s var(--courbe); }
.avec-js [data-alerte].courant { opacity: 1; transform: none; }
.pret [data-apparition] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--courbe), transform .9s var(--courbe); transition-delay: var(--d, 0ms); }
.pret [data-apparition].visible { opacity: 1; transform: none; }
.pret [data-decoupe]:not(.decoupe) { opacity: 0; }
.pret [data-decoupe] .mot { display: inline-block; opacity: 0; transform: translateY(.3em); transition: opacity .7s var(--courbe), transform .8s var(--courbe); transition-delay: calc(var(--i) * 42ms); }
.pret [data-decoupe].visible .mot { opacity: 1; transform: none; }
.pret [data-decoupe] em { background-size: 0% .34em; transition: background-size 1s var(--courbe-es) .45s; }
.pret [data-decoupe].visible em { background-size: 100% .34em; }
.pret .manifeste__texte mark { background-size: 0% .065em; transition: background-size .9s var(--courbe-es); }
.pret .manifeste__texte mark.allume { background-size: 100% .065em; }
.secours .scene .brique, .secours .scene .telephone, .secours [data-apparition], .secours [data-decoupe], .secours [data-decoupe] .mot, .secours .titre-mot, .secours [data-chargement], .secours .etape {
  opacity: 1 !important; filter: none !important; transform: none !important;
}

@keyframes secours { to { opacity: 1; filter: none; transform: none; clip-path: none; } }
@keyframes pulsation { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes clignote { 50% { opacity: 0; } }
@keyframes pixels { to { transform: scaleY(var(--s)); } }
@keyframes defileMur { to { transform: translateY(calc(-50% - 9px)); } }

@keyframes alerte { 0%, 14% { opacity: 0; transform: translateY(1em) scale(.94); } 20%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-.6em) scale(.97); } }

@keyframes statutAttente { 0%, 5% { opacity: 1; } 8%, 91% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes statutFait { 0%, 6% { opacity: 0; transform: scale(.85); } 11%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(.9); } }

@keyframes balayage { 0% { opacity: 1; transform: translateY(-5em); } 85% { opacity: 1; transform: translateY(26em); } 100% { opacity: 0; transform: translateY(27em); } }
@keyframes remplissage { to { transform: none; } }

@keyframes serpFondu { 0% { opacity: 0; } 5%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes monteeVous { 0%, 14% { transform: translateY(11.2em); } 24%, 40% { transform: translateY(5.6em); } 50%, 96% { transform: none; } 96.1%, 100% { transform: translateY(11.2em); } }
@keyframes monteeAutre1 { 0%, 40% { transform: translateY(-5.6em); } 50%, 96% { transform: none; } 96.1%, 100% { transform: translateY(-5.6em); } }
@keyframes monteeAutre2 { 0%, 14% { transform: translateY(-5.6em); } 24%, 96% { transform: none; } 96.1%, 100% { transform: translateY(-5.6em); } }
@keyframes defilement { 0%, 14% { transform: none; } 24%, 40% { transform: translateY(-33.333%); } 50%, 96% { transform: translateY(-66.666%); } 96.1%, 100% { transform: none; } }
@keyframes trace { 0%, 12% { stroke-dashoffset: 1; } 56%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes aireEntree { 0%, 44% { opacity: 0; } 60%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .avec-js .titre-mot, .avec-js [data-chargement], .avec-js [data-alerte],
  .pret [data-apparition], .pret [data-decoupe] .mot, .pret [data-decoupe]:not(.decoupe) {
    opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important;
  }
  .pret [data-decoupe] em { background-size: 100% .34em !important; }
  .pret .manifeste__texte mark { background-size: 100% .065em !important; }
  .rotation__mot .lettre { opacity: 1; filter: none; transform: none; }
  .carte-exp__contenu { transform: none; }
  .onglet.courant .onglet__barre i { transform: none; }
}