@import "charte.css?v=d7f1ec057bce";
:root {
  --alerte: oklch(from var(--c-accent) calc(l - .2) calc(c + .04) 28);
}
:root {
  --piste: color-mix(in srgb, var(--c-clair) 42%, var(--c-fond));
  --fantome: color-mix(in srgb, var(--c-clair) 30%, var(--c-fond));
  --filet: color-mix(in srgb, var(--c-principal) 16%, var(--c-fond));
  --filet-carte: color-mix(in srgb, var(--c-principal) 13%, var(--c-carte));
  --eclaire: color-mix(in srgb, var(--c-clair) 25%, var(--c-carte));
  --filigrane: color-mix(in srgb, var(--c-clair) 18%, var(--c-principal));
  --reflet: color-mix(in srgb, var(--c-clair) 20%, var(--c-principal));
  --fond-inedit: color-mix(in srgb, var(--c-accent) 20%, var(--c-carte));
  --fond-doux: color-mix(in srgb, var(--c-clair) 14%, var(--c-fond));
  --pied-texte: color-mix(in srgb, var(--c-carte) 82%, var(--c-clair));
  --pied-filet: color-mix(in srgb, var(--c-carte) 16%, var(--c-encre));
  --voile: color-mix(in srgb, var(--c-fond) 88%, transparent);
  --ombre: 0 1px 2px color-mix(in srgb, var(--c-encre) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--c-encre) 9%, transparent);
  --ombre-legere: 0 1px 2px color-mix(in srgb, var(--c-encre) 5%, transparent), 0 4px 14px color-mix(in srgb, var(--c-encre) 6%, transparent);
  --ombre-appel: 0 2px 4px color-mix(in srgb, var(--c-encre) 8%, transparent), 0 12px 28px color-mix(in srgb, var(--c-encre) 16%, transparent);
  --rayon: 20px;
  --rayon-moyen: 16px;
  --rayon-petit: 10px;
  --gouttiere: 16px;
  --largeur: 1200px;
  --entete-hauteur: 64px;
  --section: clamp(64px, 11vw, 152px);
  --mvt-trace: cubic-bezier(.6, .05, .3, 1);
  --mvt-referme: cubic-bezier(.3, 1.6, .5, 1);
}
@media (min-width: 768px) {
  :root {
    --gouttiere: 24px;
    --entete-hauteur: 72px;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-hauteur) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--c-fond);
  color: var(--c-encre);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body {
    font-size: 1.125rem;
  }
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: var(--c-principal);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover {
  text-decoration-thickness: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--c-principal);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
h2 {
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 18ch;
}
h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
p {
  margin: 0 0 1em;
}
p,
li {
  text-wrap: pretty;
}
strong {
  font-weight: 700;
}
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.section {
  padding-block: var(--section);
}
.visuellement-masque {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.saut-lien {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 1000;
  background: var(--c-principal);
  color: var(--c-carte);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.saut-lien:focus {
  top: 12px;
}
:focus-visible {
  outline: 3px solid var(--c-principal);
  outline-offset: 3px;
  border-radius: 4px;
}
:is(.sur-fonce, .section-douce) :focus-visible,
.pied :focus-visible {
  outline-color: var(--encre-vive, var(--c-carte));
}
.marque-source {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.boucle-trait {
  fill: none;
  stroke: var(--trait, currentColor);
  stroke-dasharray: var(--tirets, none);
  stroke-dashoffset: var(--decalage, 0);
  display: var(--trait-affiche, inline);
}
.boucle-point {
  fill: var(--point, currentColor);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--echelle-point, 1));
  display: var(--point-affiche, inline);
  transition: transform 450ms var(--mvt-referme);
}
.glyphe {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  overflow: visible;
}
.picto {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glyphe-carte {
  width: 48px;
  height: 48px;
  flex: none;
}
.etat-livre {
  --trait: var(--c-principal);
  --point: var(--c-principal);
}
.etat-inedit {
  --trait: var(--c-principal);
  --point: var(--c-accent);
}
.etat-a-venir {
  --trait: var(--c-texte-second);
  --point: transparent;
  --tirets: 7 12;
}
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 1.1rem;
  font-family: var(--f-texte);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-principal);
  max-width: none;
}
.surtitre::before {
  content: "";
  width: .75em;
  height: .75em;
  flex: none;
  border-radius: 50%;
  border: .2em solid currentColor;
}
:is(.sur-fonce, .section-douce, .bande-nuit, .bande-bleue) {
  --encre-vive: var(--c-carte);
  --encre-douce: color-mix(in srgb, var(--c-carte) 84%, var(--c-clair));
  --encre-surtitre: var(--c-carte);
}
.sur-fonce .surtitre {
  color: var(--encre-vive);
}
:is(.sur-fonce, .section-douce) h2 {
  color: var(--encre-vive);
}
.chapitre {
  max-width: 780px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.chapitre.centre {
  margin-inline: auto;
  text-align: center;
}
.chapitre.centre h2 {
  margin-inline: auto;
}
.chapitre > p:not(.surtitre) {
  max-width: 62ch;
}
.chapitre.centre > p:not(.surtitre) {
  margin-inline: auto;
}
.chapeau {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.3;
  color: var(--c-encre);
}
.second {
  color: var(--c-texte-second);
}
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}
.lien-fleche::after {
  content: "→";
}
.lien-fleche:hover,
.lien-fleche:focus-visible {
  text-decoration: underline;
}
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .75em 1.5em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--f-titre);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover,
.bouton:focus-visible {
  box-shadow: var(--ombre-appel);
}
.bouton-accent {
  background: var(--c-accent);
  color: var(--c-encre);
}
.bouton-accent:hover,
.bouton-accent:focus-visible {
  background: color-mix(in srgb, var(--c-accent) 86%, var(--c-encre));
}
.bouton-principal {
  background: var(--c-principal);
  color: var(--c-carte);
}
.bouton-principal:hover,
.bouton-principal:focus-visible {
  background: color-mix(in srgb, var(--c-principal) 82%, var(--c-encre));
}
.bouton-contour {
  border-color: var(--c-principal);
  color: var(--c-principal);
  background: transparent;
}
.bouton-contour:hover,
.bouton-contour:focus-visible {
  background: var(--c-carte);
}
:is(.sur-fonce, .section-douce) .bouton-contour {
  border-color: currentColor;
  color: var(--encre-vive);
}
:is(.sur-fonce, .section-douce) .bouton-contour:hover,
:is(.sur-fonce, .section-douce) .bouton-contour:focus-visible {
  background: color-mix(in srgb, var(--encre-vive) 14%, transparent);
}
.anime .bouton {
  transition:
    translate 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}
.anime .bouton:hover,
.anime .bouton:focus-visible {
  translate: 0 -2px;
}
.anime .lien-fleche::after {
  transition: transform 150ms ease;
}
.anime .lien-fleche:hover::after,
.anime .lien-fleche:focus-visible::after {
  transform: translateX(4px);
}
.bouton-petit {
  min-height: 44px;
  padding: .5em 1.1em;
  font-size: .9375rem;
}
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--voile);
  border-bottom: 1px solid var(--filet);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.entete-rangee {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: var(--entete-hauteur);
  padding-block: 10px;
}
.entete .logo {
  display: block;
  flex: none;
  transition: opacity 300ms ease, visibility 300ms;
}
.entete .logo img {
  height: 32px;
  width: auto;
}
.nav-principale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.nav-principale ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-principale a:not(.bouton) {
  display: inline-block;
  padding: 10px 0;
  color: var(--c-encre);
  font-weight: 700;
  font-size: .96rem;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-principale a:not(.bouton):hover {
  color: var(--c-principal);
}
.nav-principale a:not(.bouton)[aria-current=page] {
  color: var(--c-principal);
  border-bottom-color: var(--c-principal);
}
.bouton-entete {
  min-height: 44px;
  padding: .55em 1.25em;
  white-space: nowrap;
}
.sous-menu {
  position: relative;
}
.nav-principale .sous-menu-liste {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}
.nav-principale .sous-menu-liste a:not(.bouton) {
  font-weight: 600;
}
.sous-menu-etat {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fond-doux);
  color: var(--c-texte-second);
  font-size: .75rem;
  font-weight: 700;
  vertical-align: 1px;
}
.nav-principale .sous-menu:has([aria-current=page]) > a {
  color: var(--c-principal);
  border-bottom-color: var(--c-principal);
}
@media (min-width: 1140px) {
  .sous-menu > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 200ms ease;
  }
  .sous-menu:hover > a::after,
  .sous-menu:focus-within > a::after {
    transform: translateY(0) rotate(-135deg);
  }
  .nav-principale .sous-menu-liste {
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 2;
    min-width: 250px;
    padding: 8px 18px;
    border-radius: var(--rayon-moyen);
    background: var(--c-carte);
    border: 1px solid var(--filet-carte);
    box-shadow: var(--ombre);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 160ms ease,
      transform 160ms ease,
      visibility 0s linear 160ms;
  }
  .sous-menu:hover .sous-menu-liste,
  .sous-menu:focus-within .sous-menu-liste {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .nav-principale .sous-menu-liste a:not(.bouton) {
    display: block;
    padding: 10px 0;
    border-bottom: 0;
  }
  .nav-principale .sous-menu-liste li + li a {
    border-top: 1px solid var(--filet-carte);
  }
}
.bascule-nav {
  display: none;
  width: 48px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 2px solid var(--c-principal);
  border-radius: 999px;
  background: transparent;
  color: var(--c-principal);
  cursor: pointer;
}
.bascule-barres,
.bascule-barres::before,
.bascule-barres::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms ease, background-color 200ms ease;
}
.bascule-barres {
  position: relative;
  margin-inline: auto;
}
.bascule-barres::before,
.bascule-barres::after {
  content: "";
  position: absolute;
  left: 0;
}
.bascule-barres::before {
  top: -6px;
}
.bascule-barres::after {
  top: 6px;
}
.bascule-nav[aria-expanded=true] .bascule-barres {
  background: transparent;
}
.bascule-nav[aria-expanded=true] .bascule-barres::before {
  transform: translateY(6px) rotate(45deg);
}
.bascule-nav[aria-expanded=true] .bascule-barres::after {
  transform: translateY(-6px) rotate(-45deg);
}
@media (max-width: 1139px) {
  .nav-principale {
    width: 100%;
  }
  html.js .entete-rangee {
    flex-wrap: nowrap;
  }
  html.js .nav-principale {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 8px var(--gouttiere) 24px;
    background: var(--c-fond);
    border-bottom: 1px solid var(--filet);
    box-shadow: var(--ombre);
  }
  html.js .nav-principale.ouvert {
    display: flex;
  }
  html.js .nav-principale ul {
    flex-direction: column;
  }
  html.js .nav-principale a:not(.bouton) {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--filet);
  }
  html.js .bouton-entete {
    align-self: flex-start;
    margin-top: 8px;
  }
  html.js .bascule-nav {
    display: block;
  }
}
html.js .accueil:not(.heros-depasse) .entete .logo {
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 1139px) {
  html.js .accueil .entete {
    position: fixed;
    left: 0;
    right: 0;
  }
  html.js .accueil:not(.a-defile) .entete:not(:focus-within):not(:has(.nav-principale.ouvert)) {
    translate: 0 -100%;
  }
}
@media (max-width: 1139px) and (prefers-reduced-motion: no-preference) {
  html.anime .accueil .entete {
    transition: translate 320ms cubic-bezier(.2, .7, .3, 1);
  }
}
:root {
  --nuit: var(--c-encre);
  --profond: color-mix(in srgb, var(--c-principal) 55%, var(--c-encre));
  --nuit-tuile: color-mix(in srgb, var(--c-principal) 22%, var(--c-encre));
  --tuile-nuit:
    linear-gradient(
      160deg,
      var(--nuit-tuile),
      color-mix(in srgb, var(--nuit-tuile) 70%, var(--nuit)));
  --nuit-eclairee:
    radial-gradient(
      640px 460px at 90% 0%,
      color-mix(in srgb, var(--c-principal) 65%, transparent),
      transparent 70%),
    var(--nuit);
  --ombre-profonde: 0 2px 4px color-mix(in srgb, var(--c-encre) 25%, transparent), 0 40px 70px -18px color-mix(in srgb, var(--c-encre) 70%, transparent);
}
.heros {
  position: relative;
  overflow: clip;
  padding-block: clamp(36px, 7vw, 104px) clamp(56px, 8vw, 112px);
  background:
    radial-gradient(
      800px 700px at 78% 50%,
      var(--reflet),
      transparent 70%),
    var(--c-principal);
  color: var(--c-carte);
  --largeur-marque: min(calc(100vw - 2 * var(--gouttiere)), 560px);
}
@media (min-width: 1024px) {
  .heros {
    --largeur-marque: clamp(440px, 40vw, 600px);
  }
}
.heros > .conteneur {
  position: relative;
  z-index: 1;
}
.heros-grille {
  position: relative;
  display: grid;
  gap: 28px;
  align-items: center;
}
.heros-marque {
  margin: 0 0 clamp(14px, 2.2vw, 26px);
  line-height: 0;
}
.logo-heros {
  display: block;
  width: var(--largeur-marque);
  max-width: 100%;
  height: auto;
}
.heros .signature {
  margin: 0 0 .35em;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: calc(var(--largeur-marque) * .1);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--c-carte);
}
.heros .sous-titre {
  margin: 0 0 .6em;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  color: var(--c-carte);
}
.heros-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  margin-top: 28px;
}
.heros-actions .bouton-accent {
  flex: 1 1 100%;
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--c-accent) 80%, transparent);
}
.heros-actions .lien-fleche {
  color: var(--c-carte);
}
@media (min-width: 560px) {
  .heros-actions .bouton-accent {
    flex: 0 0 auto;
  }
}
@media (max-width: 559px) {
  .heros-actions .lien-fleche {
    display: none;
  }
}
.mur-cadre {
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
}
.mur {
  --mur-largeur: calc(100cqw + 150cqh);
  --mur-hauteur: calc(40cqw + 200cqh);
  position: absolute;
  left: calc(50cqw - var(--mur-largeur) / 2);
  top: calc(50cqh - var(--mur-hauteur) / 2);
  width: var(--mur-largeur);
  height: var(--mur-hauteur);
  display: flex;
  gap: 26px;
  justify-content: center;
  transform: perspective(calc(40cqw + 160cqh)) rotateX(48deg) rotateZ(-24deg) translateY(-10%);
  opacity: .5;
}
.mur-col {
  flex: 1 0 440px;
  min-width: 0;
  overflow: hidden;
}
.mur-piste,
.mur-double {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.mur-double {
  padding-top: 26px;
}
.mur-vue {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-carte);
  box-shadow: var(--ombre-profonde);
}
.mur-vue .capture-crm {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mur-telephone {
  width: 62%;
  align-self: center;
  border-radius: 26px;
}
.anime .mur-piste {
  animation: mur-monte 70s linear infinite;
}
.anime .mur-c2 .mur-piste,
.anime .mur-c4 .mur-piste,
.anime .mur-c6 .mur-piste {
  animation-name: mur-descend;
  animation-duration: 85s;
}
.anime .mur-c3 .mur-piste,
.anime .mur-c6 .mur-piste {
  animation-duration: 95s;
}
.anime .mur-c5 .mur-piste,
.anime .mur-c7 .mur-piste {
  animation-duration: 78s;
}
.anime .mur-c8 .mur-piste {
  animation-name: mur-descend;
  animation-duration: 90s;
}
@keyframes mur-monte {
  to {
    transform: translateY(-50%);
  }
}
@keyframes mur-descend {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: none;
  }
}
.heros-voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      var(--c-principal) 0 32%,
      color-mix(in srgb, var(--c-principal) 35%, transparent) 70%,
      color-mix(in srgb, var(--c-principal) 25%, transparent));
  pointer-events: none;
}
@media (max-width: 1023px) {
  .mur-col {
    flex-basis: 300px;
  }
  .heros-voile {
    background: color-mix(in srgb, var(--c-principal) 72%, transparent);
  }
}
.heros-scene {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin: 12px auto 0;
}
.heros-scene > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.anneau-piste {
  --trait: color-mix(in srgb, var(--c-carte) 12%, transparent);
  --point: transparent;
}
.anneau {
  --trait: var(--c-carte);
  --point: var(--c-accent);
  z-index: 1;
}
.heros-scene.jouable .anneau {
  cursor: pointer;
}
.anime .depart .anneau {
  --tirets: 101 200;
  --decalage: calc(101 - var(--trace, 1) * 101);
  --echelle-point: calc(.6 + .4 * var(--trace, 1));
}
.anime .eclat .anneau {
  --echelle-point: 1.9;
}
.vue {
  position: absolute;
  z-index: 3;
}
.vue-planning {
  width: 54%;
  left: -4%;
  top: 4%;
}
.vue-telephone {
  width: 34%;
  left: 34%;
  top: 12%;
  z-index: 2;
}
.vue-rapport {
  width: 46%;
  right: -4%;
  bottom: 2%;
}
.vue-planning .cadre {
  transform: perspective(1100px) rotateY(20deg) rotateX(8deg) rotateZ(-5deg);
}
.vue-rapport .cadre {
  transform: perspective(1100px) rotateY(-18deg) rotateX(6deg) rotateZ(4deg);
}
.vue-telephone .cadre {
  transform: rotate(4deg);
}
.anime .heros-scene .vue {
  transition: opacity 450ms ease, scale 900ms var(--ressort);
}
.anime .depart .vue {
  opacity: 0;
  scale: .4;
}
.anime .fin .vue-planning {
  transition-delay: 50ms;
}
.anime .fin .vue-telephone {
  transition-delay: 200ms;
}
.anime .fin .vue-rapport {
  transition-delay: 350ms;
}
.heros-offre,
.offre-flottante {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-encre);
  font: 600 .9375rem/1 var(--f-titre);
  text-decoration: none;
  box-shadow: var(--ombre-profonde);
}
.heros-offre {
  position: absolute;
  z-index: 6;
  right: -3%;
  bottom: -3%;
  rotate: -4deg;
}
.offre-picto {
  width: 26px;
  height: 26px;
  flex: none;
}
.heros-offre:hover,
.heros-offre:focus-visible,
.offre-flottante:hover,
.offre-flottante:focus-visible {
  scale: 1.06;
}
.offre-flottante {
  position: fixed;
  z-index: 60;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  padding: 10px 18px 10px 12px;
  line-height: 1.15;
}
.offre-flottante-texte {
  display: grid;
  gap: 2px;
}
.offre-flottante-places {
  font: 700 .8125rem/1.1 var(--f-texte);
}
.offre-flottante:focus-visible {
  outline-color: var(--c-encre);
}
html.js .accueil .offre-flottante:not(.suit) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html.js .accueil .heros-offre.partie {
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .offre-flottante {
    transition: scale 750ms var(--ressort), opacity 250ms ease;
  }
  html.js body:not(.accueil) .offre-flottante {
    animation: offre-entre 750ms var(--ressort) 700ms both;
  }
}
@keyframes offre-entre {
  from {
    opacity: 0;
    scale: .3;
  }
}
@media (max-width: 559px) {
  .offre-flottante {
    padding: 8px 14px 8px 10px;
    font-size: .875rem;
  }
  .offre-flottante .offre-picto {
    width: 22px;
    height: 22px;
  }
}
.offre-trace {
  position: fixed;
  inset: 0;
  z-index: 59;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--c-encre) 40%, transparent));
}
.offre-trace-vol,
.offre-trace-anneau {
  fill: none;
  stroke: var(--c-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offre-trace-vol {
  stroke-width: 6px;
}
.offre-trace-point {
  fill: var(--c-accent);
  stroke: var(--c-carte);
  stroke-width: 3px;
}
.anime .heros-scene .heros-offre {
  transition: opacity 400ms ease 650ms, scale 800ms var(--ressort) 650ms;
}
.anime .depart .heros-offre,
.anime .eclat .heros-offre {
  opacity: 0;
  scale: .3;
  pointer-events: none;
  transition-delay: 0s;
}
.desordre {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.orbite {
  position: absolute;
  left: 0;
  top: 0;
  width: 34%;
  display: none;
  will-change: transform, opacity;
}
.anime .depart .orbite {
  display: block;
}
.cadre-gris {
  padding: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-encre) 10%, var(--c-carte));
  border: 1px solid color-mix(in srgb, var(--c-encre) 25%, transparent);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--c-encre) 60%, transparent);
}
.cadre-gris .capture-crm {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  filter: grayscale(.85) contrast(.92) brightness(.97);
}
.clic {
  position: absolute;
  z-index: 6;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
}
.clic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--c-carte);
  opacity: 0;
  animation: clic-onde 600ms ease-out forwards;
}
.clic::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 9px;
  border-style: solid;
  border-width: 0 7px 14px 7px;
  border-color: transparent transparent var(--c-encre) transparent;
  transform: rotate(-30deg);
  filter: drop-shadow(0 0 1px var(--c-carte)) drop-shadow(0 0 1px var(--c-carte));
  animation: clic-curseur 600ms ease-out forwards;
}
@keyframes clic-onde {
  0% {
    opacity: .9;
    transform: scale(.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}
@keyframes clic-curseur {
  0%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (min-width: 1024px) {
  .heros {
    min-height: min(84vh, 800px);
    display: flex;
    align-items: center;
    padding-block: 40px;
  }
  .heros > .conteneur {
    width: 100%;
  }
  .heros-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 30px;
  }
  .heros-scene {
    width: min(46vw, 78vh, 860px);
    justify-self: start;
    margin: 0;
  }
}
.cadre {
  position: relative;
  box-shadow: var(--ombre-profonde);
}
.cadre :is(.capture-crm, .capture) {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  box-shadow: none;
  background: var(--c-carte);
}
.cadre-navigateur {
  overflow: hidden;
  border-radius: 14px;
  background: var(--c-carte);
  border: 1px solid color-mix(in srgb, var(--c-carte) 16%, transparent);
}
.cadre-navigateur :is(.capture-crm, .capture) {
  border-radius: 0;
}
.cadre-barre {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--c-principal) 10%, var(--c-carte));
}
.cadre-barre i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: oklch(from var(--c-accent) l c 28);
}
.cadre-barre i:nth-child(2) {
  background: var(--c-accent);
}
.cadre-barre i:nth-child(3) {
  background: oklch(from var(--c-accent) l c 140);
}
.cadre-plan {
  padding: 7px;
  border-radius: 16px;
  background: var(--nuit);
  border: 1px solid color-mix(in srgb, var(--c-carte) 14%, transparent);
}
.cadre-plan .capture-crm {
  border-radius: 10px;
}
.cadre-telephone {
  padding: 26px 8px 10px;
  border-radius: 34px;
  background: var(--nuit);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-carte) 14%, transparent) inset, var(--ombre-profonde);
}
.cadre-telephone::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 39%;
  width: 22%;
  height: 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-carte) 14%, var(--nuit));
}
.cadre-telephone :is(.capture-crm, .capture) {
  border-radius: 24px;
}
.capture-crm {
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
  background: var(--c-carte);
  box-shadow: var(--ombre);
  height: auto;
  object-fit: contain;
}
.capture-figure {
  margin: 0;
}
.manifeste {
  position: relative;
  overflow: clip;
  background: var(--c-principal);
  color: var(--c-carte);
}
.manifeste .filigrane {
  position: absolute;
  width: min(130vw, 860px);
  aspect-ratio: 1;
  right: -38%;
  bottom: -30%;
  --trait: var(--filigrane);
  --point: var(--filigrane);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .manifeste .filigrane {
    right: -14%;
    bottom: -36%;
  }
}
.manifeste .conteneur {
  position: relative;
}
.manifeste-texte {
  margin: 0;
}
.manifeste-phrase {
  max-width: 26ch;
  margin: 0 0 .7em;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--c-carte);
}
.manifeste-accroche {
  max-width: 18ch;
  font-size: clamp(2.125rem, 6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.manifeste-recit {
  max-width: 34ch;
  font-size: clamp(1.375rem, 2.9vw, 2.375rem);
  line-height: 1.25;
}
.manifeste-envoi {
  margin-bottom: 0;
}
.manifeste-signature {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(24px, 4vw, 40px) 0 0;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-carte);
}
.manifeste-signature .glyphe {
  width: 40px;
  height: 40px;
  --trait: var(--c-carte);
  --point: var(--c-accent);
}
.manifeste-faits {
  display: grid;
  gap: 16px;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: clamp(24px, 3vw, 32px) 0 0;
  list-style: none;
  border-top: 1px solid var(--filigrane);
}
.manifeste-faits li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 56ch;
  color: var(--c-carte);
}
.manifeste-faits .glyphe {
  margin-top: .2em;
  --trait: var(--c-clair);
  --point: var(--c-clair);
}
@media (min-width: 900px) {
  .manifeste-faits {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
.anime .manifeste-phrase {
  transition: opacity 600ms ease, transform 600ms var(--mvt-trace);
}
.anime .manifeste-phrase:not(.vu) {
  opacity: 0;
  transform: translateY(12px);
}
.fil {
  background: var(--c-fond);
}
.rangs {
  position: relative;
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rangs::before,
.rangs::after {
  content: none;
}
@media (min-width: 900px) {
  .rangs {
    padding-left: 56px;
  }
  .rangs::before,
  .rangs::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 40px;
    bottom: 40px;
    width: 6px;
    border-radius: 3px;
  }
  .rangs::before {
    background: color-mix(in srgb, var(--c-principal) 18%, transparent);
  }
  .rangs::after {
    background:
      linear-gradient(
        180deg,
        var(--c-principal),
        var(--c-accent));
    transform-origin: top;
    transform: scaleY(var(--avance, 1));
  }
}
.rang {
  --fond-rang: var(--c-carte);
  --texte-rang: var(--c-encre);
  position: relative;
  display: grid;
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 4vw, 52px);
  border-radius: clamp(22px, 3vw, 32px);
  background: var(--fond-rang);
  color: var(--texte-rang);
}
.rang-bleu {
  --fond-rang: var(--c-principal);
  --texte-rang: var(--c-carte);
}
.rang-ambre {
  --fond-rang: var(--c-accent);
  --texte-rang: var(--c-encre);
}
.rang-nuit {
  --fond-rang: var(--nuit);
  --texte-rang: var(--c-carte);
}
.rang-clair {
  --fond-rang: var(--c-clair);
  --texte-rang: var(--c-encre);
}
.rang-profond {
  --fond-rang: var(--profond);
  --texte-rang: var(--c-carte);
}
.rang h3 {
  margin: 0;
  color: inherit;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.06;
}
.rang-texte p {
  margin: .6rem 0 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.2rem);
}
.rang a {
  color: inherit;
}
.rang :focus-visible {
  outline-color: currentColor;
}
.rang-numero {
  display: inline-grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  margin-bottom: .8rem;
  border-radius: 50%;
  background: var(--texte-rang);
  color: var(--fond-rang);
  font: 600 1.125rem var(--f-titre);
}
@media (min-width: 900px) {
  .rang::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    border: 4px solid var(--c-fond);
    background: var(--c-accent);
  }
  .anime .rang:not(.atteint)::before {
    background: var(--piste);
  }
  .anime .rang::before {
    transition: background-color 300ms ease, transform 700ms var(--ressort);
  }
  .anime .rang.atteint::before {
    transform: scale(1.4);
  }
  .rang {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr);
    gap: 36px;
  }
}
.rang > .etape-captures,
.vitrine .etape-captures,
.chapitre-dessin > .etape-captures,
.scene .etape-captures,
.reference > .etape-captures {
  position: relative;
  padding: 4% 0 12%;
}
.etape-captures .fil-ecran {
  width: 88%;
}
.etape-captures .fil-zoom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56%;
  z-index: 1;
}
.etape-captures:has(.fil-ecran .cadre-telephone) {
  display: flex;
  gap: 6%;
  align-items: center;
  justify-content: center;
  padding: 4% 0;
}
.etape-captures:has(.fil-ecran .cadre-telephone) .fil-ecran {
  width: 36%;
}
.etape-captures:has(.fil-ecran .cadre-telephone) .fil-zoom {
  position: relative;
  width: 58%;
}
.etape-captures:has(.fil-zoom .cadre-telephone) .fil-zoom {
  width: 36%;
  margin-top: 12%;
}
.fil-zoom .cadre-plan {
  box-shadow: var(--ombre-profonde), 0 0 0 4px var(--c-accent);
}
.rang-ambre .fil-zoom .cadre-plan {
  box-shadow: var(--ombre-profonde), 0 0 0 4px var(--c-principal);
}
.fil-ecran .cadre,
.bande-reference .capture {
  transform: perspective(1400px) rotateY(16deg) rotateX(8deg) rotateZ(3deg);
}
.fil-zoom .cadre {
  transform: rotate(-5deg) translateY(-4px);
}
.bande-reference:nth-child(even) .capture,
.rang:nth-child(even) .fil-ecran .cadre,
.scene-inverse .fil-ecran .cadre,
.reference:nth-child(even) .fil-ecran .cadre {
  transform: perspective(1400px) rotateY(-16deg) rotateX(8deg) rotateZ(-3deg);
}
.rang:nth-child(even) .fil-zoom .cadre,
.scene-inverse .fil-zoom .cadre,
.reference:nth-child(even) .fil-zoom .cadre {
  transform: rotate(5deg) translateY(-4px);
}
.fil-ecran .cadre-telephone {
  transform: rotate(7deg);
}
.rang:nth-child(even) .fil-ecran .cadre-telephone {
  transform: rotate(-7deg);
}
.rang:hover .etape-captures .cadre,
.rang:focus-within .etape-captures .cadre,
.vitrine:hover .etape-captures .cadre,
.vitrine:focus-within .etape-captures .cadre,
.chapitre-dessin:hover .etape-captures .cadre,
.chapitre-dessin:focus-within .etape-captures .cadre,
.valide:hover .etape-captures .cadre,
.valide:focus-within .etape-captures .cadre,
.scene:hover .etape-captures .cadre,
.scene:focus-within .etape-captures .cadre,
.reference:hover > .etape-captures .cadre,
.reference:focus-within > .etape-captures .cadre,
.propose-scene:hover .etape-captures .cadre,
.propose-scene:focus-within .etape-captures .cadre,
.metiers-ecran:hover .cadre,
.contact-ecrans:hover .cadre,
.bande-reference a:hover .capture,
.bande-reference a:focus-visible .capture,
.moments .journee-moment:hover > .cadre,
.niveaux-ecrans li:hover .cadre,
.niveaux-ecrans li:focus-within .cadre {
  transform: none;
}
.anime .etape-captures .cadre,
.anime .journee-moment > .cadre,
.anime .bande-reference .capture,
.anime .niveaux-ecrans .cadre {
  transition: transform 900ms var(--ressort);
}
@media (max-width: 899px) {
  .fil-ecran .cadre,
  .rang:nth-child(even) .fil-ecran .cadre,
  .scene-inverse .fil-ecran .cadre,
  .bande-reference .capture,
  .bande-reference:nth-child(even) .capture {
    transform: perspective(1000px) rotateY(-8deg) rotateX(5deg) rotateZ(-2deg);
  }
  .rang:nth-child(odd) .fil-ecran .cadre,
  .bande-reference:nth-child(odd) .capture {
    transform: perspective(1000px) rotateY(8deg) rotateX(5deg) rotateZ(2deg);
  }
  .etape-captures .fil-ecran {
    width: 94%;
  }
  .etape-captures .fil-zoom {
    width: 62%;
  }
}
.rang > .etape-captures.etape-canaux {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  justify-items: center;
  padding: 2% 0;
}
.canaux {
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.canal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.canal-nom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1rem;
}
.canal-picto {
  width: 20px;
  height: 20px;
  flex: none;
}
.canal .capture-agrandir {
  display: inline-block;
  max-width: 100%;
}
.canal .cadre {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  transform: rotate(-3deg);
}
.canal:last-child .cadre {
  transform: rotate(-2deg);
}
.canal .cadre .capture-crm {
  width: auto;
  max-width: 100%;
  max-height: 8.5rem;
}
.canal-boite {
  display: grid;
  place-items: center;
  width: min(100%, 15rem);
  height: 5.5rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.canal-grand {
  width: 46px;
  height: 46px;
}
.canaux-liens {
  display: none;
  overflow: visible;
}
.canaux-liens path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
  vector-effect: non-scaling-stroke;
  opacity: .85;
}
.etape-captures.etape-canaux > .fil-ecran.capture-figure {
  width: min(62%, 240px);
}
@media (max-width: 899px) {
  .rang > .etape-captures.etape-canaux {
    position: relative;
    gap: 0;
    justify-self: center;
    width: min(100%, 34rem);
  }
  .canaux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 0;
  }
  .canaux::after {
    content: "";
    grid-column: 1 / -1;
  }
  .canal {
    grid-row: span 2;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 6px 10px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
  .canal:nth-child(odd) {
    margin-right: 6px;
  }
  .canal:nth-child(even) {
    margin-left: 6px;
  }
  .canal:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    margin-right: 0;
  }
  .canal-nom {
    justify-content: center;
    gap: 6px;
    font-size: clamp(.8125rem, 3.8vw, 1rem);
  }
  .canal-picto {
    width: 18px;
    height: 18px;
  }
  .canal > .capture-figure {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
  }
  .canal .cadre .capture-crm {
    max-height: 5rem;
  }
  .canal-boite {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 4.5rem;
    border: 0;
    background: none;
  }
  .canaux-liens-telephone {
    display: block;
    position: absolute;
    grid-area: 1 / 1 / 2 / 2;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .etape-captures.etape-canaux > .fil-ecran {
    position: relative;
  }
  .etape-captures.etape-canaux > .fil-ecran .cadre {
    transform-origin: 50% 0;
  }
  .etape-captures.etape-canaux > .fil-ecran::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 0;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 4px var(--fond-rang);
  }
}
@media (min-width: 900px) {
  .rang > .etape-captures.etape-canaux {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, .62fr);
    align-items: stretch;
    gap: 0 10px;
  }
  .canaux {
    grid-auto-rows: minmax(0, 1fr);
  }
  .canal {
    justify-content: center;
    align-items: flex-end;
  }
  .canaux-liens-poste {
    display: block;
    width: 100%;
    height: 100%;
  }
  .etape-captures.etape-canaux > .fil-ecran.capture-figure {
    width: 100%;
    align-self: center;
  }
}
@keyframes canaux-se-tracent-au-poste {
  from {
    clip-path: inset(-10% 110% -10% -10%);
  }
  to {
    clip-path: inset(-10%);
  }
}
@keyframes canaux-se-tracent-au-telephone {
  from {
    clip-path: inset(-10% -15% 110% -15%);
  }
  to {
    clip-path: inset(-10% -15%);
  }
}
@keyframes canaux-courent {
  from {
    stroke-dashoffset: 36;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.anime .etape-canaux:not(.atteint) .canaux-liens {
  clip-path: inset(0 100% 100% 0);
}
.anime .etape-canaux.atteint .canaux-liens-poste {
  animation: canaux-se-tracent-au-poste .9s var(--mvt-trace) both;
}
.anime .etape-canaux.atteint .canaux-liens-telephone {
  animation: canaux-se-tracent-au-telephone 1.1s var(--mvt-trace) both;
}
.anime .etape-canaux.atteint .canaux-liens path {
  animation: canaux-courent 1.2s linear 4 both;
  animation-delay: calc(1.1s + var(--rang, 0) * .15s);
}
.anime .etape-canaux:not(.atteint) > .fil-ecran::before {
  transform: scale(0);
}
.anime .etape-canaux.atteint > .fil-ecran::before {
  transition: transform 500ms var(--ressort) 1s;
}
.pilotage-bande {
  background: var(--nuit);
  color: var(--c-carte);
}
.pilotage-grille {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.pilotage-texte h2 {
  max-width: 13ch;
}
.pilotage-texte > p:not(.surtitre) {
  max-width: 40ch;
}
.pilotage-chiffres {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.pilotage-chiffres li {
  display: grid;
  gap: 2px 16px;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--c-carte) 18%, transparent);
}
@media (min-width: 480px) {
  .pilotage-chiffres li {
    grid-template-columns: 9.5rem minmax(0, 1fr);
  }
}
.pilotage-chiffre {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.05;
  color: var(--c-accent);
  white-space: nowrap;
}
.chiffre-sur {
  font-size: .55em;
}
.pilotage-libelle {
  margin: 0;
  font-size: .98rem;
  color: color-mix(in srgb, var(--c-carte) 84%, transparent);
}
.pilotage-ecran {
  padding: 4% 0 6%;
}
.etape-captures.pilotage-ecran .fil-ecran {
  width: 100%;
}
.pilotage-ecran:hover .cadre,
.pilotage-ecran:focus-within .cadre {
  transform: none;
}
@media (min-width: 1024px) {
  .pilotage-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
  }
}
.vitrine {
  background: var(--nuit-eclairee);
  color: var(--c-carte);
}
.vitrine h2,
:is(.finale, .tarifs-equipe) .prix-regles h2,
.chapitre-dessin h2,
.recrutement-candidature-grille h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
}
.vitrine .chapitre {
  margin-bottom: 0;
}
.vitrine .chapitre > p:not(.surtitre) {
  color: color-mix(in srgb, var(--c-carte) 82%, var(--c-clair));
}
.vitrine-grille {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .vitrine-grille {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
  }
}
.capture-agrandir {
  display: block;
  border-radius: var(--rayon-petit);
  cursor: zoom-in;
}
.capture-agrandir:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}
.boucle-suite {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  margin: 28px 0 0;
}
.agrandie {
  width: min(1180px, calc(100vw - 2 * var(--gouttiere)));
  max-height: calc(100vh - 2 * var(--gouttiere));
  padding: 0;
  border: 0;
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  color: var(--c-encre);
  box-shadow: var(--ombre);
}
.agrandie::backdrop {
  background: color-mix(in srgb, var(--c-encre) 72%, transparent);
}
.agrandie-figure {
  margin: 0;
  padding: 16px 16px 0;
  text-align: center;
}
.agrandie-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 2 * var(--gouttiere) - 9rem);
  margin-inline: auto;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
}
.agrandie-figure figcaption {
  margin-top: 12px;
  color: var(--c-texte-second);
  line-height: 1.45;
}
.agrandie-commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px 16px;
}
.agrandie-commandes button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--c-fond);
  color: var(--c-encre);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.agrandie-commandes button:focus-visible {
  outline: 3px solid var(--c-principal);
  outline-offset: 2px;
}
.agrandie-fermer {
  margin-left: auto;
}
.agrandie-rang {
  min-width: 3.5em;
  font-variant-numeric: tabular-nums;
  color: var(--c-texte-second);
}
.chiffres {
  position: relative;
  overflow: clip;
  padding-block: clamp(56px, 9vw, 120px);
}
.chiffres,
.bande-bleue,
.bande-note {
  background: var(--c-principal);
  color: var(--c-carte);
}
.chiffres .filigrane {
  position: absolute;
  width: min(110vw, 720px);
  aspect-ratio: 1;
  right: -32%;
  top: -30%;
  --trait: var(--filigrane);
  --point: var(--filigrane);
  pointer-events: none;
}
.chiffres-grille {
  position: relative;
  display: grid;
  gap: clamp(32px, 5vw, 56px);
}
.chiffre-atouts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin: 0;
  padding-top: 18px;
  border-top: 4px solid var(--c-accent);
}
.chiffre-grand {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-accent);
}
.chiffre-ligne {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
}
.chiffre-ligne strong {
  color: var(--c-carte);
}
@media (min-width: 1200px) {
  .chiffre-ligne strong {
    color: var(--c-accent);
  }
}
.chiffres .lien-fleche {
  color: var(--c-carte);
}
.chiffre-temps {
  padding-top: 18px;
  border-top: 4px solid var(--c-clair);
}
.temps {
  display: grid;
  gap: clamp(8px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: temps;
}
.temps li {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.temps li::before {
  counter-increment: temps;
  content: counter(temps);
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(32px, 4vw, 48px);
  height: clamp(32px, 4vw, 48px);
  border-radius: 50%;
  border: 2px solid var(--c-clair);
  color: var(--c-clair);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(.875rem, 1.6vw, 1.125rem);
  transform: translateY(-.15em);
}
.temps-grand {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(2.25rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-carte);
}
.temps-deux .temps-grand {
  color: var(--c-clair);
}
.compteur {
  display: inline-block;
  min-width: .62em;
  font-variant-numeric: tabular-nums;
}
.temps-lien {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: clamp(24px, 4vw, 40px) 0 0;
}
.temps-lien .lien-fleche {
  font-size: 1.125rem;
}
@media (min-width: 1024px) {
  .temps {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    column-gap: 56px;
  }
  .temps li {
    flex-direction: column;
    gap: 14px;
  }
  .temps-grand {
    font-size: clamp(3rem, 5vw, 5rem);
  }
}
.anime .temps li {
  transition: opacity 600ms ease, transform 700ms var(--mvt-trace);
}
.anime .temps:not(.vu) li {
  opacity: 0;
  transform: translateY(24px);
}
.anime .temps li:nth-child(2) {
  transition-delay: 450ms;
}
.anime .temps li:nth-child(3) {
  transition-delay: 900ms;
}
.nous-grille {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.nous-chapitre {
  margin-bottom: 0;
}
.nous-chapitre h2 {
  max-width: 14ch;
}
.nous-chapitre > p:not(.surtitre) {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.5;
}
.nous-suite {
  margin: 18px 0 0;
}
.photo-cadre {
  margin: 0;
  padding: clamp(8px, 1.2vw, 12px) clamp(8px, 1.2vw, 12px) clamp(24px, 3vw, 36px);
  border-radius: 6px;
  background: var(--c-carte);
  box-shadow: var(--ombre-profonde);
  rotate: -3deg;
}
.photo-cadre:nth-child(even) {
  rotate: 2.5deg;
}
.photo-equipe {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.photo-cadre:hover {
  rotate: none;
}
.anime .photo-cadre {
  transition: rotate 900ms var(--ressort);
}
.nous-photo {
  width: min(92%, 440px);
  justify-self: center;
}
.dirigeant {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.dirigeant p {
  max-width: 46ch;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.dirigeant a {
  font-weight: 700;
}
.dirigeant-photos {
  display: grid;
  gap: clamp(24px, 4vw, 32px);
  align-items: center;
  justify-items: center;
}
.dirigeant-photos .photo-cadre {
  width: min(92%, 400px);
}
@media (min-width: 560px) {
  .dirigeant-photos {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
  .dirigeant-photos .photo-cadre {
    width: 100%;
  }
}
@media (min-width: 900px) {
  .nous-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
  .nous-complete {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}
.interrupteur-zone {
  padding: 20px;
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  color: var(--c-encre);
  border: 1px solid var(--filet);
  --encre-vive: var(--c-principal);
  --encre-douce: var(--c-encre);
  --encre-surtitre: var(--c-principal);
}
.interrupteur {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-encre);
  font: 700 1.0625rem/1.2 var(--f-texte);
  cursor: pointer;
}
.interrupteur-piste {
  position: relative;
  width: 56px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  background: var(--c-texte-second);
  transition: background-color 200ms ease;
}
.interrupteur-piste::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-carte);
  transition: transform 200ms var(--mvt-referme);
}
.interrupteur[aria-checked=true] .interrupteur-piste {
  background: var(--c-principal);
}
.interrupteur[aria-checked=true] .interrupteur-piste::after {
  transform: translateX(24px);
}
.interrupteur-etat {
  margin: 12px 0 0;
  font-weight: 700;
  color: var(--c-principal);
}
.propose-grille {
  display: grid;
  gap: clamp(8px, 2vw, 24px);
}
.propose-titre {
  margin-bottom: 0;
}
.propose-scene {
  position: relative;
}
.propose-scene .etape-captures {
  padding: 0;
}
.propose-scene .fil-ecran {
  width: 100%;
}
.propose-scene .ia-carte {
  width: min(92%, 400px);
  margin: -6% 0 0 auto;
}
@media (min-width: 1024px) {
  .propose-scene {
    padding-bottom: 120px;
  }
  .propose-scene .fil-ecran {
    width: 96%;
  }
  .propose-scene .ia-carte {
    position: absolute;
    right: -2%;
    bottom: 0;
    width: min(46%, 380px);
    margin: 0;
  }
}
.ia-carte {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 22px;
  color: var(--c-encre);
  border-radius: var(--rayon);
  border: 1px solid var(--filet-carte);
  box-shadow: var(--ombre-profonde);
  isolation: isolate;
}
.ia-carte::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: calc(var(--rayon) + 2px);
  background:
    conic-gradient(
      from var(--ia-angle, 0deg),
      var(--c-principal),
      var(--c-accent),
      var(--c-clair),
      var(--c-principal));
  opacity: 0;
  transition: opacity 300ms ease;
}
.ia-carte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--rayon);
  background: var(--c-carte);
}
.ia-carte[data-etat=ecrit]::before,
.ia-carte[data-etat=validee]::before {
  opacity: 1;
}
.ia-carte[data-etat=validee]::before {
  background: var(--c-accent);
}
.ia-note {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--rayon-petit);
  background: var(--fond-doux);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: .9375rem;
}
.ia-etiquette {
  font: 700 .75rem/1.2 var(--f-texte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-principal);
}
.ia-zone {
  display: grid;
}
.ia-zone > .ia-sortie,
.ia-zone::before {
  grid-area: 1 / 1;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.ia-zone::before {
  content: attr(data-fantome);
  visibility: hidden;
}
.ia-sortie {
  color: var(--c-encre);
  border-radius: var(--rayon-petit);
  outline-offset: 4px;
}
.ia-sortie:empty::before {
  content: "";
  display: block;
  height: 1em;
  width: 0;
}
.ia-carte[data-etat=ecrit] .ia-sortie:empty::before {
  width: 54px;
  border-radius: 999px;
  background:
    radial-gradient(
      circle,
      var(--c-principal) 4px,
      transparent 5px) 0 50% / 18px 100% repeat-x;
}
.ia-carte[data-etat=ecrit] .ia-sortie:not(:empty)::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: var(--c-principal);
}
.ia-carte[data-etat=reprise] .ia-sortie {
  padding: 6px 8px;
  margin: -6px -8px;
  box-shadow: inset 0 0 0 2px var(--filet);
}
.ia-validee {
  margin: 0;
  font-weight: 700;
  color: var(--c-principal);
}
.ia-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  min-height: 44px;
}
.ia-rediger[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.ia-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--filet-carte);
}
.ia-pied .interrupteur-etat {
  margin: 0;
}
@property --ia-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ia-halo {
  to {
    --ia-angle: 360deg;
  }
}
@keyframes ia-points {
  50% {
    opacity: .25;
  }
}
@keyframes ia-curseur {
  50% {
    opacity: 0;
  }
}
html.anime .ia-carte[data-etat=ecrit]::before {
  animation: ia-halo 2.4s linear infinite;
}
html.anime .ia-carte[data-etat=ecrit] .ia-sortie:empty::before {
  animation: ia-points 900ms ease-in-out infinite;
}
html.anime .ia-carte[data-etat=ecrit] .ia-sortie:not(:empty)::after {
  animation: ia-curseur 800ms steps(1) infinite;
}
html.anime .ia-validee:not([hidden]) {
  animation: pop 320ms var(--mvt-referme, ease-out);
}
.metiers-grille {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.metiers-texte .chapitre {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.metiers-ecran {
  padding: 2% 0 4%;
}
.metiers-ecran .fil-ecran {
  width: 100%;
}
@media (min-width: 1024px) {
  .metiers-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }
}
.rangee-metiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.metier > a,
.metier {
  display: flex;
  align-items: center;
  gap: 14px;
}
.metier {
  padding: 16px 18px;
  border-radius: var(--rayon);
  background: var(--c-carte);
  border: 1px solid var(--filet);
  box-shadow: var(--ombre-legere);
}
.metier > a {
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.metier.a-venir {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.metier .glyphe-carte {
  width: 40px;
  height: 40px;
}
.metier:not(.a-venir) {
  grid-column: 1 / -1;
  padding: 20px 22px;
  background: var(--c-principal);
  border-color: var(--c-principal);
  box-shadow: var(--ombre);
}
.metier:not(.a-venir) strong {
  color: var(--c-carte);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}
.metier:not(.a-venir) .glyphe-carte {
  width: 52px;
  height: 52px;
  --trait: var(--c-carte);
  --point: var(--c-accent);
}
.metier.a-venir,
.metier.a-venir > a {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.metier.a-venir {
  padding: 12px 14px;
}
.metier.a-venir span {
  margin-left: 0;
}
.metier.a-venir .glyphe-carte {
  width: 28px;
  height: 28px;
}
.metier.a-venir strong {
  font-size: .9375rem;
}
.metier strong {
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--c-principal);
  line-height: 1.2;
}
.metier span {
  margin-left: auto;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-texte-second);
  white-space: nowrap;
}
.metier:not(.a-venir) span {
  color: var(--c-carte);
}
.metier-autre {
  margin: 24px 0 0;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--c-encre);
}
.metier-autre a {
  white-space: nowrap;
}
.section-fine {
  padding-block: clamp(40px, 6vw, 72px);
}
.bande-references h2 {
  margin: 0 0 clamp(32px, 5vw, 64px);
  max-width: none;
}
.bande-references h2 a {
  color: inherit;
  text-decoration: none;
}
.bande-references h2 a:hover,
.bande-references h2 a:focus-visible {
  text-decoration: underline;
}
.bande-references-suite {
  margin: clamp(20px, 3vw, 32px) 0 0;
}
.bande-references-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
}
.bande-reference a {
  display: grid;
  gap: 14px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.bande-reference .capture {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre-profonde);
}
.bande-reference a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
  border-radius: var(--rayon-petit);
}
.anime [data-revele] {
  transition: opacity 600ms ease, transform 700ms var(--mvt-trace);
}
.anime [data-revele]:not(.vu) {
  opacity: 0;
  transform: translateY(18px);
}
.anime .temps[data-revele]:not(.vu) {
  opacity: 1;
  transform: none;
}
.histoire {
  padding-block: clamp(64px, 11vw, 160px);
}
.essai-couleur {
  position: relative;
}
.marque-grille {
  align-items: center;
}
.marque-texte {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}
.essai-couleur {
  transform: perspective(1400px) rotateY(-14deg) rotateX(6deg) rotateZ(-2deg);
}
.essai-couleur:hover {
  transform: none;
}
.anime .essai-couleur {
  transition: transform 900ms var(--ressort);
}
.ecran-essai-onde {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.essai-onde-cercle {
  position: absolute;
  z-index: 2;
  border: 6px solid var(--c-accent);
  border-radius: 50%;
  pointer-events: none;
}
.ecran-essai {
  --couleur-demo: var(--c-principal);
  --couleur-demo-texte: var(--c-carte);
  --teinte-demo: color-mix(in srgb, var(--couleur-demo) 14%, var(--c-carte));
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--c-carte);
  box-shadow: var(--ombre-profonde);
}
.ee-barre {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--couleur-demo);
  color: var(--couleur-demo-texte);
  transition: background-color 200ms ease;
}
.ee-logo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 44px;
  flex: none;
  border: 2px dashed currentColor;
  border-radius: var(--rayon-petit);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.ee-maison {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}
.ee-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
}
.ee-plan {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
}
.ee-rail {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
  padding: 16px 0;
  background: color-mix(in srgb, var(--couleur-demo) 7%, var(--c-carte));
  border-right: 1px solid var(--filet-carte);
}
.ee-rail span {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--filet-carte);
}
.ee-rail .ee-actif {
  background: var(--couleur-demo);
  box-shadow: 0 0 0 4px var(--teinte-demo);
}
.ee-contenu {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.ee-dossier,
.ee-rapport {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--filet-carte);
  border-radius: var(--rayon-petit);
}
.ee-pastille {
  width: 72px;
  height: 14px;
  border-radius: 999px;
  background: var(--couleur-demo);
}
.ee-ligne {
  height: 8px;
  border-radius: 999px;
  background: var(--filet-carte);
}
.ee-dossier .ee-ligne + .ee-ligne {
  width: 70%;
}
.ee-etapes {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.ee-etapes span {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--filet-carte);
}
.ee-etapes .fait {
  background: var(--couleur-demo);
}
.ee-rapport-titre {
  margin: -12px -12px 0;
  padding: 8px 12px;
  border-left: 4px solid var(--couleur-demo);
  border-radius: var(--rayon-petit) var(--rayon-petit) 0 0;
  background: var(--teinte-demo);
  color: var(--c-encre);
  font-size: .8125rem;
  font-weight: 700;
}
.ee-photos {
  display: flex;
  gap: 8px;
}
.ee-photos span {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  background: var(--teinte-demo);
}
.ee-rapport .ee-ligne {
  width: 80%;
}
.ee-bouton {
  justify-self: end;
  width: 84px;
  height: 24px;
  border-radius: 999px;
  background: var(--couleur-demo);
}
.essai-reglages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.essai-titre {
  flex-basis: 100%;
  margin: 0;
  font-weight: 700;
}
.nuancier {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nuance {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--c-carte);
  box-shadow: 0 0 0 1px var(--filet);
  background: var(--c-principal);
  cursor: pointer;
}
.nuance[aria-pressed=true] {
  box-shadow: 0 0 0 3px var(--c-accent);
}
.nuance:focus-visible {
  outline: 3px solid var(--c-principal);
  outline-offset: 3px;
}
.nuance-ardoise {
  background: oklch(from var(--c-principal) .5 .04 h);
}
.nuance-lagune {
  background: oklch(from var(--c-principal) .53 .06 calc(h - 55));
}
.nuance-sauge {
  background: oklch(from var(--c-principal) .74 .06 calc(h - 110));
}
.nuance-sable {
  background: oklch(from var(--c-principal) .86 .045 calc(h - 170));
}
.nuance-terre {
  background: oklch(from var(--c-principal) .53 .085 calc(h + 160));
}
.nuance-rose {
  background: oklch(from var(--c-principal) .78 .055 calc(h + 110));
}
.nuance-prune {
  background: oklch(from var(--c-principal) .46 .07 calc(h + 70));
}
.nuance-lavande {
  background: oklch(from var(--c-principal) .82 .045 calc(h + 40));
}
.legende-fictive {
  margin: 0;
  font-size: .875rem;
  color: var(--c-texte-second);
}
.packs {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pack {
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.pack.a-venir {
  background: transparent;
  border: 2px dashed color-mix(in srgb, var(--c-principal) 30%, transparent);
  box-shadow: none;
}
.pack .glyphe-carte {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}
.pack h3 {
  margin: 0 0 .3em;
  font-size: 1.25rem;
}
.pack-etat {
  margin: 0 0 .6em;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texte-second);
}
.pack:not(.a-venir) .pack-etat {
  color: var(--c-principal);
}
.pack p:last-child {
  margin-bottom: 0;
}
@media (min-width: 700px) {
  .packs {
    grid-template-columns: 1fr 1fr;
  }
}
.packs-suite {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  margin-top: 28px;
}
.packs-suite p {
  margin: 0;
  max-width: 62ch;
}
.prix-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.prix-regles {
  display: grid;
  gap: 14px;
}
.prix-regles p {
  margin: 0;
}
.prix-principal {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.25;
  color: var(--c-encre);
}
.prix-principal strong,
.prix-regles strong {
  font-weight: 600;
  color: var(--c-principal);
}
.calcul {
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--rayon);
  background: var(--c-carte);
  color: var(--c-encre);
  border: 1px solid var(--filet);
  box-shadow: var(--ombre);
  text-align: center;
}
.calcul-titre {
  margin: 0 0 16px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texte-second);
}
.calcul-reglage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.calcul-bouton {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  border: 2px solid var(--c-principal);
  border-radius: 50%;
  background: var(--c-carte);
  color: var(--c-principal);
  font: 600 1.5rem/1 var(--f-titre);
  cursor: pointer;
}
.calcul-bouton:hover {
  background: var(--fond-doux);
}
.calcul-bouton:disabled {
  border-color: var(--filet);
  color: var(--c-texte-second);
  cursor: default;
  background: var(--c-carte);
}
.calcul-nombre {
  min-width: 11ch;
  font-weight: 700;
  font-size: 1.125rem;
}
.calcul-montant {
  display: block;
  margin-top: 18px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-principal);
}
.calcul-unite {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  color: var(--c-texte-second);
}
.exemples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exemples li {
  padding: 16px 8px;
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  text-align: center;
}
.ex-equipe,
.formule-nom {
  display: block;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--c-texte-second);
}
.ex-montant,
.formule-prix {
  display: block;
  margin-top: 4px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  color: var(--c-principal);
}
.site-creation {
  margin: 0 0 16px;
  font-size: 1.125rem;
}
.carte .formule-prix {
  margin: 0 0 4px;
}
.carte .formule-mise {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--c-texte-second);
}
.site-references {
  margin: 24px 0 0;
}
@media (min-width: 1024px) {
  .prix-grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 72px;
  }
}
.prix-grand {
  display: block;
  font-size: clamp(4.5rem, 13vw, 9.5rem);
  line-height: .95;
  letter-spacing: -.04em;
}
.prix-calcul {
  padding-bottom: 24px;
}
.prix-calcul .calcul {
  transform: perspective(1200px) rotateY(-14deg) rotateX(6deg) rotateZ(2deg);
}
.prix-calcul:hover .calcul,
.prix-calcul:focus-within .calcul {
  transform: none;
}
.anime .prix-calcul .calcul {
  transition: transform 900ms var(--ressort);
}
@media (min-width: 1024px) {
  :is(.finale, .tarifs-equipe) .prix-grille {
    align-items: center;
  }
}
.anime .demo-boucle:not(.vu) {
  --trace-vu: 0;
}
.anime .demo-boucle.vu {
  animation: trace-vu 1600ms var(--mvt-trace) both;
}
.anime .demo-bouton {
  transition:
    scale 800ms var(--ressort) 1450ms,
    translate 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}
.anime .demo-boucle:not(.vu) .demo-bouton {
  scale: 0;
}
:is(.finale, .tarifs-equipe) a:not(.bouton) {
  color: inherit;
}
.finale h2 [data-prix] {
  color: var(--c-accent);
}
:is(.finale, .tarifs-equipe) .calcul {
  border: 0;
  box-shadow: var(--ombre-profonde);
}
.tarifs-equipe :is(.prix-principal, .exemples-titre) {
  color: var(--c-carte);
}
.tarifs-equipe .prix-regles > p:not(.prix-principal) {
  color: color-mix(in srgb, var(--c-carte) 84%, var(--c-clair));
}
.references-section {
  padding-top: 0;
}
.references {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.references > .reference {
  padding-block: clamp(56px, 8vw, 112px);
}
.reference {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.reference-nom {
  margin: 0 0 12px;
}
.reference-texte p {
  max-width: 46ch;
}
.reference.sur-fonce .reference-texte p {
  color: color-mix(in srgb, var(--c-carte) 84%, var(--c-clair));
}
.reference.sur-fonce .reference-texte .lien-fleche {
  color: var(--c-carte);
}
@media (min-width: 1024px) {
  .reference {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
  .reference:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
  .reference:nth-child(even) > .reference-texte {
    order: 2;
  }
}
.captures-date {
  font-size: .9375rem;
  color: var(--c-texte-second);
}
.reference-notes {
  --notes-texte: var(--c-encre);
  --notes-second: var(--c-texte-second);
  --notes-titre: var(--c-principal);
  --notes-piste: color-mix(in srgb, var(--c-principal) 14%, transparent);
  --notes-plein: var(--c-principal);
  --notes-lien: var(--c-principal);
  --notes-filet: var(--filet);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 28px 80px;
  margin: 8px 0 0;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--notes-filet);
  color: var(--notes-texte);
}
.sur-fonce .reference-notes {
  --notes-texte: var(--c-carte);
  --notes-second: color-mix(in srgb, var(--c-carte) 80%, var(--c-clair));
  --notes-titre: var(--c-accent);
  --notes-piste: color-mix(in srgb, var(--c-carte) 14%, transparent);
  --notes-plein: color-mix(in srgb, var(--c-clair) 55%, var(--c-principal));
  --notes-lien: var(--c-accent);
  --notes-filet: color-mix(in srgb, var(--c-carte) 22%, transparent);
}
@media (min-width: 960px) {
  .reference-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.notes + .notes {
  position: relative;
}
.notes + .notes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 1px;
  background: var(--notes-filet);
}
@media (min-width: 960px) {
  .notes + .notes::before {
    right: auto;
    top: 0;
    bottom: 0;
    left: -40px;
    width: 1px;
    height: auto;
  }
}
.notes-titre {
  margin: 0 0 16px;
  font-family: var(--f-texte);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--notes-titre);
}
.jauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 479px) {
  .jauges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.jauge {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  text-align: center;
}
.jauge-anneau {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 80px);
  aspect-ratio: 1;
}
.jauge-dessin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;
  overflow: visible;
}
.jauge-piste,
.jauge-plein {
  fill: none;
  stroke-width: 11;
}
.jauge-piste {
  stroke: var(--notes-piste);
}
.jauge-plein {
  stroke: var(--notes-plein);
  stroke-linecap: round;
  stroke-dashoffset: calc(var(--note) * (1 - var(--jauge)));
}
.jauge-chiffre {
  position: relative;
  font: 600 clamp(1.25rem, 2.6vw, 1.625rem)/1 var(--f-titre);
  font-variant-numeric: tabular-nums;
}
.jauge-nom {
  font-size: .8125rem;
  line-height: 1.25;
  color: var(--notes-second);
}
.notes-sens {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 12px 24px;
  margin: 0;
}
.notes-sens dt {
  font-weight: 700;
  color: var(--notes-texte);
}
.notes-sens dd {
  margin: 2px 0 0;
  font-size: .9375rem;
  color: var(--notes-second);
}
.notes-source {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 .75em;
  margin: 0;
  text-align: center;
  font-size: .9375rem;
  color: var(--notes-second);
}
.reference-notes a {
  color: var(--notes-lien);
}
.reference-notes :focus-visible {
  outline-color: currentColor;
}
.capture {
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
  background: var(--c-carte);
  box-shadow: var(--ombre);
}
.references-suite {
  margin: clamp(48px, 7vw, 80px) 0 0;
}
.test-vitesse {
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px) clamp(18px, 4vw, 48px);
  border-radius: var(--rayon);
  background: var(--nuit-eclairee);
  color: var(--c-carte);
  text-align: center;
  box-shadow: var(--ombre-profonde);
}
.test-vitesse h2 {
  margin: 0 0 .25em;
  max-width: 22ch;
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
}
.test-vitesse > p {
  max-width: 52ch;
  margin: 0 0 18px;
  color: color-mix(in srgb, var(--c-carte) 82%, var(--c-clair));
}
.test-vitesse-ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: 620px;
}
.test-vitesse-ligne label {
  flex: 1 0 100%;
  font-weight: 700;
  font-size: .9375rem;
  text-align: left;
}
.test-vitesse-ligne input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--rayon-petit);
  background: var(--c-carte);
  color: var(--c-encre);
  font: inherit;
}
.test-vitesse-ligne input:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}
.test-vitesse-ligne .bouton {
  flex: 0 1 auto;
  min-height: 52px;
}
@media (max-width: 479px) {
  .test-vitesse-ligne .bouton {
    flex: 1 1 100%;
  }
}
.bande-note {
  --medaillon: clamp(108px, 11vw, 148px);
  position: relative;
  overflow: clip;
  padding-block: clamp(56px, 8vw, 104px);
}
.bande-note > .section {
  padding-block: 0;
}
.bande-note .test-vitesse {
  padding-top: calc(var(--medaillon) / 2 + clamp(14px, 2vw, 24px));
}
.bande-note-anneau {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--medaillon);
  aspect-ratio: 1;
  margin: 0 auto calc(var(--medaillon) / -2);
  border-radius: 50%;
  background: var(--nuit);
  box-shadow: 0 0 0 clamp(6px, .8vw, 10px) var(--c-principal), var(--ombre-profonde);
}
.bande-note-anneau svg {
  position: absolute;
  inset: 13%;
  width: 74%;
  height: 74%;
  overflow: visible;
  --trait: color-mix(in srgb, var(--c-carte) 28%, transparent);
  --point: transparent;
}
.bande-note-question {
  position: relative;
  font: 600 calc(var(--medaillon) * .4)/1 var(--f-titre);
  color: var(--c-accent);
}
.bande-note-suite {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: clamp(32px, 4.5vw, 52px);
  text-align: center;
}
.bande-note-suite > p:first-child {
  max-width: 48ch;
  margin: 0 0 14px;
  font: 600 clamp(1.125rem, 2vw, 1.375rem)/1.35 var(--f-titre);
  text-wrap: balance;
}
.bande-note-appels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 28px;
  margin: 0;
}
.bande-note-appels .lien-fleche {
  color: var(--c-carte);
}
@media (max-width: 479px) {
  .bande-note-appels .bouton {
    flex: 1 1 100%;
  }
}
.a-venir-liste {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.a-venir-liste li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--rayon-moyen);
  border: 1px dashed var(--filet);
}
.a-venir-liste .glyphe {
  width: 28px;
  height: 28px;
}
.a-venir-liste p {
  margin: 0;
}
.a-venir-liste .quand {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: var(--c-texte-second);
}
@media (min-width: 900px) {
  .a-venir-liste {
    grid-template-columns: 1fr 1fr;
  }
}
.demo {
  position: relative;
  overflow: clip;
}
.demo-grille {
  display: grid;
  gap: 36px;
  align-items: center;
}
.demo-texte h2 {
  max-width: 16ch;
}
.demo-signature {
  margin: 0 0 .4em;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.demo-courriel {
  margin: 0;
}
.demo-boucle {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 20px;
}
.demo-trace {
  width: min(60vw, 240px);
  aspect-ratio: 1;
  --trait: var(--c-carte);
  --point: var(--c-accent);
}
@media (min-width: 1024px) {
  .demo-grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 64px;
  }
  .demo-trace {
    width: 300px;
  }
}
@media (min-width: 1180px) {
  html.js .demo-boucle.posee {
    display: block;
  }
  html.js .demo-boucle.posee .demo-trace {
    margin-inline: 0 auto;
    --point: transparent;
  }
  html.js .demo-boucle.posee .demo-bouton {
    position: absolute;
    transform: translate(-26px, -50%);
    box-shadow: var(--ombre);
    white-space: nowrap;
  }
}
.entete-page {
  position: relative;
  overflow: clip;
  padding-block: clamp(40px, 8vw, 112px) clamp(48px, 7vw, 96px);
  background:
    radial-gradient(
      700px 600px at 85% 30%,
      var(--reflet),
      transparent 70%),
    var(--c-principal);
  color: var(--c-carte);
}
.entete-page > .conteneur {
  position: relative;
}
.entete-page h1 {
  max-width: 20ch;
  color: var(--c-carte);
}
.entete-page .surtitre {
  color: var(--c-carte);
}
.entete-page .chapeau {
  max-width: 46ch;
  margin-bottom: 0;
  color: var(--c-carte);
}
.entete-page a:not(.bouton) {
  color: var(--c-carte);
}
.entete-page :focus-visible {
  outline-color: var(--c-carte);
}
.entete-page {
  --anneau: clamp(150px, 22vw, 320px);
}
.entete-page .decor {
  position: absolute;
  right: max(var(--gouttiere), calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
  top: 50%;
  width: var(--anneau);
  aspect-ratio: 1;
  translate: 0 -50%;
  overflow: visible;
  --trait: var(--c-carte);
  --point: var(--c-accent);
  filter: drop-shadow(0 22px 26px color-mix(in srgb, var(--c-encre) 38%, transparent));
  pointer-events: none;
}
@media (max-width: 699px) {
  .entete-page .decor {
    top: 18px;
    width: 52px;
    translate: none;
    filter: none;
  }
}
@media (min-width: 700px) {
  .entete-page:has(> .decor) > .conteneur {
    padding-inline-end: calc(var(--gouttiere) + var(--anneau) + 32px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .entete-page .decor {
    --tirets: 100 200;
    --decalage: calc(100 - var(--trace-vu) * 100);
    --echelle-point: clamp(0, (var(--trace-vu) - .999) * 1000, 1);
    animation: trace-vu 1500ms var(--mvt-trace) 250ms both;
  }
}
@property --euro { syntax: "<number>"; inherits: true; initial-value: 1; }
.euro-anneau {
  transform-box: view-box;
  transform-origin: 50% 50%;
  rotate: calc(40deg * clamp(0, var(--euro) * 2, 1));
}
.euro-barre {
  fill: none;
  stroke: var(--trait);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 100 200;
  stroke-dashoffset: calc(100 - 100 * clamp(0, (var(--euro) - .4) / .6, 1));
}
@media (prefers-reduced-motion: no-preference) {
  html.js .euro {
    --echelle-point: clamp(0, (var(--euro) - .999) * 1000, 1);
    animation: euro 1100ms var(--mvt-trace) 1750ms both;
  }
}
@keyframes euro {
  from {
    --euro: 0;
  }
}
.scene-metier {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
}
@media (min-width: 900px) {
  .scene-metier {
    width: clamp(280px, 28vw, 400px);
  }
}
.scene-metier > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.scene-boucle {
  overflow: visible;
}
.scene-anneau {
  --trait: var(--c-carte);
  --point-affiche: none;
}
.scene-point,
.scene-onde {
  --trait-affiche: none;
  transform-box: view-box;
}
.scene-point {
  --point: var(--c-accent);
}
.scene-onde {
  --point: transparent;
  stroke: var(--c-carte);
  stroke-width: .6;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .scene-anneau {
    --tirets: 100 200;
    --decalage: calc(100 - var(--trace-vu) * 100);
    animation: trace-vu var(--scene-trace, 900ms) var(--mvt-trace) both;
  }
  html.js .scene-point {
    animation: scene-point 450ms var(--mvt-referme) var(--scene-point) both;
  }
  html.js .scene-onde {
    animation: scene-onde 650ms cubic-bezier(.1, .6, .3, 1) var(--scene-point);
  }
}
@keyframes scene-point {
  from {
    scale: 0;
  }
}
@keyframes scene-onde {
  0% {
    opacity: .9;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 2.6;
  }
}
:root {
  --outil-trait: var(--c-encre);
  --outil-sombre: color-mix(in srgb, var(--c-encre) 82%, var(--c-principal));
  --outil-metal: color-mix(in srgb, var(--c-clair) 45%, var(--c-carte));
  --outil-clair: var(--c-carte);
  --outil-eau: color-mix(in srgb, var(--c-clair) 70%, var(--c-principal));
  --outil-onde: var(--c-principal);
  --outil-hachure: var(--outil-trait);
  --conduite-reflet: color-mix(in srgb, var(--c-principal) 55%, var(--c-carte));
  --conduite: var(--c-principal);
  --conduite-ombre: color-mix(in srgb, var(--c-principal) 70%, var(--c-encre));
}
.outil-sombre,
.outil-metal,
.outil-clair {
  stroke: var(--outil-trait);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.outil-sombre {
  fill: var(--outil-sombre);
}
.outil-metal {
  fill: var(--outil-metal);
}
.outil-clair {
  fill: var(--outil-clair);
}
.outil-reflet,
.ecoute-terre,
.ecoute-remontee {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.outil-reflet {
  stroke: var(--outil-clair);
  stroke-width: 2;
  opacity: .85;
}
.ecoute-terre {
  stroke: var(--outil-hachure);
  stroke-width: 1.6;
  opacity: .5;
}
@property --vanne-levier { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.vanne-levier {
  transform-box: view-box;
  transform-origin: 20px 32px;
  rotate: var(--vanne-levier);
}
.vanne-levier .outil-clair {
  fill: var(--vanne-poignee, var(--outil-clair));
}
.vanne-facettes {
  fill: none;
  stroke: var(--outil-metal);
  stroke-width: 1;
  opacity: .7;
}
.vanne-prise {
  fill: none;
  stroke: var(--outil-sombre);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: .45;
}
.vanne-ombre {
  fill: var(--outil-sombre);
  opacity: .16;
}
@keyframes outil-apparait {
  from {
    opacity: 0;
  }
}
@keyframes vanne-ferme {
  from {
    --vanne-levier: 90deg;
  }
}
.sur-l-anneau {
  overflow: visible;
}
:where(.sur-l-anneau) :where(g, rect, path, circle, use) {
  transform-box: view-box;
  transform-origin: 0 0;
}
.sur-l-anneau :is(.outil-sombre, .outil-metal) {
  stroke-width: .5;
}
@property --aiguille-monte { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --aiguille-chute { syntax: "<number>"; inherits: true; initial-value: 1; }
.scene-manometre {
  --cadran-zero: 135deg;
  --cadran-sommet: 240deg;
  --cadran-point: mod(calc(atan2(calc(var(--boucle-point-y) - var(--boucle-cy)), calc(var(--boucle-point-x) - var(--boucle-cx))) - var(--cadran-zero)), 360deg);
}
.manometre-raccord {
  translate: calc(var(--boucle-cx) * 1px) calc((var(--boucle-cy) + var(--boucle-rayon) + var(--boucle-epaisseur) / 2) * 1px);
}
.manometre-conduite {
  fill: url(#manometre-conduite);
}
.manometre-conduite-teinte {
  stop-color: var(--c-carte);
}
.raccord-facettes {
  fill: none;
  stroke: var(--outil-metal);
  stroke-width: .7;
  opacity: .7;
}
.cadran {
  translate: calc(var(--boucle-cx) * 1px) calc(var(--boucle-cy) * 1px);
  scale: calc((var(--boucle-rayon) - var(--boucle-epaisseur) / 2) / 100);
}
.cadran-fond {
  fill: color-mix(in srgb, var(--c-encre) 62%, var(--c-principal));
}
.cadran-rouge {
  fill: none;
  stroke: var(--alerte);
  stroke-width: 6;
}
.cadran-graduation {
  fill: none;
  stroke: var(--c-carte);
  stroke-width: 3.4;
  stroke-linecap: round;
}
.cadran-fine {
  stroke-width: 1.8;
  opacity: .7;
}
.cadran-chiffres {
  fill: var(--c-carte);
  font: 600 17px/1 var(--f-titre);
  text-anchor: middle;
  dominant-baseline: central;
}
.cadran-unite {
  fill: var(--c-carte);
  font: 600 12px/1 var(--f-texte);
  letter-spacing: .06em;
  text-anchor: middle;
  opacity: .7;
}
.cadran-aiguille {
  rotate: calc(var(--cadran-zero) + var(--cadran-sommet) * var(--aiguille-monte) - (var(--cadran-sommet) - var(--cadran-point)) * var(--aiguille-chute));
  scale: calc((var(--boucle-rayon) - var(--boucle-point-rayon) * .8) / (var(--boucle-rayon) - var(--boucle-epaisseur) / 2));
}
.cadran-aiguille path,
.cadran-moyeu {
  fill: var(--c-carte);
}
.cadran-axe {
  fill: var(--outil-sombre);
}
.cadran-vitre {
  fill: none;
  stroke: var(--c-carte);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: .16;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .scene-manometre {
    --scene-trace: 1000ms;
    --scene-point: 2850ms;
    animation: aiguille-monte 650ms cubic-bezier(.25, .7, .35, 1) 1150ms both, aiguille-chute 950ms cubic-bezier(.5, 0, .3, 1) 1900ms both;
  }
  html.js .manometre-raccord {
    animation: outil-apparait 450ms ease-out both;
  }
  html.js :is(.cadran-fond, .cadran-rouge, .cadran-vitre) {
    animation: outil-apparait 500ms ease-out 250ms both;
  }
  html.js .cadran-graduation {
    stroke-dasharray: 100 200;
    stroke-dashoffset: calc(100 - var(--trace-vu) * 100);
    animation: trace-vu 800ms var(--mvt-trace) 300ms both;
  }
  html.js :is(.cadran-chiffres, .cadran-unite) {
    animation: outil-apparait 400ms ease-out 700ms both;
  }
  html.js .cadran-aiguille-tout {
    animation: outil-apparait 300ms ease-out 850ms both;
  }
}
@keyframes aiguille-monte {
  from {
    --aiguille-monte: 0;
  }
}
@keyframes aiguille-chute {
  from {
    --aiguille-chute: 0;
  }
}
@property --nacelle-monte { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --nacelle-geste { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --nacelle-redescend { syntax: "<number>"; inherits: true; initial-value: 1; }
.scene-nacelle {
  --nacelle-descente: 45;
  --nacelle-pivot-y: 99;
  --nacelle-geste-depart: -50deg;
  --nacelle-pied-x: 31;
  --nacelle-pied-y: 34;
  --nacelle-bas: calc(var(--nacelle-descente) * (1 - var(--nacelle-monte) + var(--nacelle-redescend)));
  --nacelle-fx: calc(var(--boucle-point-x) + var(--nacelle-pied-x) - var(--boucle-cx));
  --nacelle-fy: calc(var(--boucle-point-y) + var(--nacelle-pied-y) + var(--nacelle-bas) - var(--nacelle-pivot-y));
  --nacelle-angle: atan2(var(--nacelle-fy), var(--nacelle-fx));
  --nacelle-vx: calc(22 * cos(var(--nacelle-angle)) - 8);
  --nacelle-vy: calc(22 * sin(var(--nacelle-angle)) - 5);
}
.nacelle-chassis {
  translate: calc(var(--boucle-cx) * 1px) 0;
}
.nacelle-pivot {
  cx: calc(var(--boucle-cx) * 1px);
  cy: calc(var(--nacelle-pivot-y) * 1px);
}
.nacelle-fleche {
  translate: calc(var(--boucle-cx) * 1px) calc(var(--nacelle-pivot-y) * 1px);
  rotate: var(--nacelle-angle);
}
.nacelle-fleche-coulisse {
  width: calc(hypot(var(--nacelle-fx), var(--nacelle-fy)) * 1px);
}
.nacelle-verin {
  translate: calc((var(--boucle-cx) + 8) * 1px) calc((var(--nacelle-pivot-y) + 5) * 1px);
  rotate: atan2(var(--nacelle-vy), var(--nacelle-vx));
}
.nacelle-verin-tige {
  width: calc(hypot(var(--nacelle-vx), var(--nacelle-vy)) * 1px);
}
.nacelle-repere {
  translate: calc(var(--boucle-point-x) * 1px) calc((var(--boucle-point-y) + var(--nacelle-bas)) * 1px);
}
.nacelle-geste {
  transform-origin: 22.75px 8.28px;
  rotate: calc(var(--nacelle-geste-depart) * (1 - var(--nacelle-geste) + var(--nacelle-redescend)));
}
.nacelle-porte {
  translate: 0 calc(var(--nacelle-descente) * (1 - var(--nacelle-monte)) * 1px);
}
.nacelle-porte-geste {
  transform-origin: calc((var(--boucle-point-x) + 22.75) * 1px) calc((var(--boucle-point-y) + 8.28) * 1px);
  rotate: calc(var(--nacelle-geste-depart) * (1 - var(--nacelle-geste)));
}
.nacelle-tige {
  fill: var(--c-carte);
}
.nacelle-garde {
  fill: none;
  stroke: var(--c-carte);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nacelle-stabilisateur {
  fill: none;
  stroke: var(--outil-sombre);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.nacelle-sol {
  fill: none;
  stroke: var(--c-carte);
  stroke-width: .6;
  stroke-linecap: round;
  opacity: .35;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .scene-nacelle {
    --scene-trace: 1000ms;
    --scene-point: 700ms;
    animation:
      nacelle-monte 1400ms cubic-bezier(.45, 0, .25, 1) 1050ms both,
      nacelle-geste 420ms cubic-bezier(.5, 0, .3, 1) 2550ms both,
      nacelle-redescend 850ms cubic-bezier(.45, 0, .25, 1) 3050ms both;
  }
  html.js .scene-nacelle .scene-onde {
    --scene-point: 2950ms;
  }
  html.js .scene-nacelle .nacelle {
    animation: outil-apparait 400ms ease-out 450ms both;
  }
}
@keyframes nacelle-monte {
  from {
    --nacelle-monte: 0;
  }
}
@keyframes nacelle-geste {
  from {
    --nacelle-geste: 0;
  }
}
@keyframes nacelle-redescend {
  from {
    --nacelle-redescend: 0;
  }
}
section:has(> .conteneur > .bande-demo) {
  background: var(--c-principal);
  color: var(--c-carte);
}
:is(.bande-bleue, .fonctions:has(> .fonctions-contenu > .bande-bleue:last-child)) + section:has(> .conteneur > .bande-demo) {
  background: var(--nuit-eclairee);
}
.bande-demo {
  display: grid;
  gap: 28px 64px;
  align-items: center;
}
.bande-demo h2 {
  max-width: 18ch;
  margin-bottom: .35em;
}
.bande-demo p {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: color-mix(in srgb, var(--c-carte) 86%, var(--c-clair));
}
.bande-demo .bouton {
  justify-self: start;
}
@media (min-width: 900px) {
  .bande-demo {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.legende-etats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 16px 20px;
  list-style: none;
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  color: var(--c-encre);
  border: 1px solid var(--filet);
  box-shadow: var(--ombre-profonde);
}
.legende-etats li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.legende-etats .glyphe {
  width: 26px;
  height: 26px;
}
.cartes {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.carte,
.fonction,
.moment,
.pack,
.parcours-etapes li,
.atelier-reglages > li {
  border-radius: var(--rayon);
  background: var(--c-carte);
  color: var(--c-encre);
  --encre-vive: var(--c-principal);
  --encre-douce: var(--c-encre);
  --encre-surtitre: var(--c-principal);
  border: 1px solid var(--filet-carte);
  box-shadow: var(--ombre);
}
.carte {
  padding: clamp(20px, 3vw, 28px);
}
:is(.carte, .fonction, .pack) > :is(.glyphe, .glyphe-carte) {
  box-sizing: border-box;
  padding: 9px;
  border-radius: 50%;
  background: var(--c-principal);
  --trait: var(--c-carte);
  --point: var(--c-carte);
}
:is(.carte, .fonction, .pack) > .etat-inedit {
  --point: var(--c-accent);
}
:is(.carte, .fonction, .pack) > .etat-a-venir {
  background: var(--piste);
  --trait: var(--c-principal);
}
:is(.carte, .fonction, .pack):has(> .etat-inedit) {
  border: 2px solid var(--c-accent);
  background:
    linear-gradient(
      160deg,
      var(--fond-inedit),
      var(--c-carte) 55%);
}
:is(.carte, .fonction):has(> .etat-a-venir) {
  border: 2px dashed color-mix(in srgb, var(--c-principal) 30%, var(--c-carte));
}
@media (prefers-reduced-motion: no-preference) {
  .carte,
  .fonction,
  .moment,
  .pack {
    transition: transform 300ms var(--ressort), box-shadow 300ms ease;
  }
  :is(.carte, .fonction, .moment, .pack):where(:not(.facade .fonction, .cartes-suspendues > .carte, .cartes-canalisation > .carte)):hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-appel);
  }
}
.carte h3 {
  font-size: 1.25rem;
}
.carte p:last-child {
  margin-bottom: 0;
}
@media (min-width: 700px) {
  .cartes-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.cartes-3 {
  --colonnes: 1;
  grid-template-columns: repeat(var(--colonnes), 1fr);
}
.cartes-3 > * {
  --colonne: 0;
  --en-haut: 0;
}
.cartes-3 > :first-child {
  --en-haut: 1;
}
@media (min-width: 700px) {
  .cartes-3 {
    --colonnes: 2;
  }
  .cartes-3 > :nth-child(2n) {
    --colonne: 1;
  }
  .cartes-3 > :nth-child(2) {
    --en-haut: 1;
  }
}
@media (min-width: 1024px) {
  .cartes-3 {
    --colonnes: 3;
  }
  .cartes-3 > :nth-child(3n+1) {
    --colonne: 0;
  }
  .cartes-3 > :nth-child(3n+2) {
    --colonne: 1;
  }
  .cartes-3 > :nth-child(3n) {
    --colonne: 2;
  }
  .cartes-3 > :nth-child(3) {
    --en-haut: 1;
  }
}
.cartes-suspendues {
  position: relative;
  --suspente: 114;
  --accroche: .22;
  --oeillet: 6;
  padding-top: calc(var(--suspente) * 1px + 10px);
}
.cartes-suspendues,
.blocs-accroches,
.cordiste {
  --torsade:
    repeating-linear-gradient(
      180deg,
      var(--c-principal) 0 5px,
      color-mix(in srgb, var(--c-principal) 50%, var(--c-carte)) 5px 8px);
}
.suspension {
  position: relative;
}
.ligne-de-vie {
  position: absolute;
  z-index: 1;
  inset: 10px 0 auto;
  width: 100%;
  height: 64px;
  overflow: visible;
  pointer-events: none;
}
.ligne-de-vie path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ligne-de-vie .corde {
  stroke: var(--c-principal);
  stroke-width: 7px;
}
.ligne-de-vie .torsade {
  stroke: color-mix(in srgb, var(--c-principal) 50%, var(--c-carte));
  stroke-width: 3px;
  stroke-dasharray: 3 5;
}
.cartes-suspendues::after {
  content: "";
  position: absolute;
  inset: 4px -8px auto;
  height: 18px;
  background:
    radial-gradient(
      circle at 50% 50%,
      var(--c-accent) 0 3px,
      transparent 3.5px) left / 18px 18px no-repeat,
    radial-gradient(
      circle at 50% 50%,
      var(--c-accent) 0 3px,
      transparent 3.5px) right / 18px 18px no-repeat,
    linear-gradient(var(--c-encre), var(--c-encre)) left / 18px 18px no-repeat,
    linear-gradient(var(--c-encre), var(--c-encre)) right / 18px 18px no-repeat;
  border-radius: 4px;
  pointer-events: none;
}
@property --oscillation { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.cartes-suspendues .carte {
  position: relative;
  overflow: visible;
  --u-g: calc((var(--colonne) + var(--accroche)) / var(--colonnes));
  --u-d: calc((var(--colonne) + 1 - var(--accroche)) / var(--colonnes));
  --fleche-g: calc(5 + 200 * var(--u-g) * (1 - var(--u-g)));
  --fleche-d: calc(5 + 200 * var(--u-d) * (1 - var(--u-d)));
  --pendule-g: calc(var(--suspente) - var(--fleche-g) + var(--oeillet));
  --pendule-d: calc(var(--suspente) - var(--fleche-d) + var(--oeillet));
  --pendule: calc((var(--pendule-g) + var(--pendule-d)) / 2);
  --angle: calc(5deg * var(--en-haut) * sin(var(--oscillation)));
  translate: calc(var(--pendule) * sin(var(--angle)) * 1px) calc(var(--pendule) * (cos(var(--angle)) - 1) * 1px);
  --penche-g: atan2(calc(-1 * var(--pendule) * sin(var(--angle))), calc(var(--pendule-g) - var(--pendule) * (1 - cos(var(--angle)))));
  --penche-d: atan2(calc(-1 * var(--pendule) * sin(var(--angle))), calc(var(--pendule-d) - var(--pendule) * (1 - cos(var(--angle)))));
}
.cartes-suspendues .carte::before,
.cartes-suspendues .carte::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 12px);
  width: 6px;
  height: calc((var(--suspente) - 12 - var(--fleche-g)) * 1px);
  opacity: var(--en-haut);
  background: var(--torsade);
  transform-origin: 50% calc(100% + 12px + var(--oeillet) * 1px);
  rotate: var(--penche-g);
  pointer-events: none;
}
.cartes-suspendues .carte::before {
  left: calc(var(--accroche) * 100% - 3px);
}
.cartes-suspendues .carte::after {
  right: calc(var(--accroche) * 100% - 3px);
  height: calc((var(--suspente) - 12 - var(--fleche-d)) * 1px);
  rotate: var(--penche-d);
}
.mousqueton {
  --mousqueton-corps: var(--c-accent);
  --mousqueton-doigt: color-mix(in srgb, var(--c-encre) 78%, var(--c-accent));
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 38px;
  overflow: visible;
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--c-encre) 25%, transparent));
  pointer-events: none;
}
.cartes-suspendues .mousqueton {
  bottom: calc(100% - 12px);
  opacity: var(--en-haut);
  transform-origin: 50% calc(100% - 12px + var(--oeillet) * 1px);
}
.cartes-suspendues .mousqueton-g {
  left: calc(var(--accroche) * 100% - 11px);
  rotate: var(--penche-g);
}
.cartes-suspendues .mousqueton-d {
  right: calc(var(--accroche) * 100% - 11px);
  rotate: var(--penche-d);
}
@media (prefers-reduced-motion: no-preference) {
  .cartes-suspendues .carte {
    animation: balancier calc(1.7s * sqrt(var(--pendule) / 90)) linear calc(-1.1s * var(--colonne)) infinite alternate;
  }
  .cartes-suspendues .carte:hover {
    animation-play-state: paused;
  }
}
@keyframes balancier {
  from {
    --oscillation: -90deg;
  }
  to {
    --oscillation: 90deg;
  }
}
.fonctions-liste.blocs-accroches {
  padding-top: 64px;
  gap: 84px 24px;
}
.blocs-accroches .fonction {
  position: relative;
  overflow: visible;
}
.blocs-accroches .fonction::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 22px);
  width: 30px;
  height: 64px;
  margin-left: -15px;
  background:
    radial-gradient(
      circle,
      var(--c-accent) 0 3.5px,
      transparent 4px) 50% 5px / 14px 14px no-repeat,
    linear-gradient(color-mix(in srgb, var(--c-encre) 85%, var(--c-principal)), color-mix(in srgb, var(--c-encre) 85%, var(--c-principal))) top / 30px 24px no-repeat,
    var(--torsade) 50% 100% / 6px calc(100% - 20px) no-repeat;
  border-radius: 5px 5px 0 0;
}
.blocs-accroches .mousqueton {
  left: 50%;
  bottom: calc(100% - 14px);
  margin-left: -11px;
}
@property --descente { syntax: "<percentage>"; inherits: true; initial-value: 18%; }
:root {
  --sable: color-mix(in srgb, var(--c-accent) 38%, color-mix(in srgb, var(--c-encre) 10%, var(--c-carte)));
  --joint: color-mix(in srgb, var(--c-encre) 16%, var(--sable));
}
.pierre {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 46px,
      var(--joint) 46px 48px),
    repeating-linear-gradient(
      90deg,
      transparent 0 118px,
      color-mix(in srgb, var(--joint) 60%, transparent) 118px 120px),
    var(--sable);
}
.facade {
  --huisserie: color-mix(in srgb, var(--c-encre) 82%, var(--c-principal));
  position: relative;
  max-width: 1000px;
  margin: 8px auto 0;
  --couloir: 104px;
  --relief: 2px 3px 2px color-mix(in srgb, var(--c-encre) 14%, transparent), 5px 8px 16px color-mix(in srgb, var(--c-encre) 20%, transparent);
  --retrait: inset 3px 7px 9px -5px color-mix(in srgb, var(--c-encre) 30%, transparent);
  padding: 72px var(--couloir) 168px;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--c-encre) 26%, transparent), inset -16px 0 24px -18px color-mix(in srgb, var(--c-encre) 40%, transparent);
}
.facade::before {
  content: "";
  position: absolute;
  inset: -10px -10px auto;
  height: 22px;
  border-radius: 4px;
  background: var(--huisserie);
  box-shadow: 0 3px 5px color-mix(in srgb, var(--c-encre) 22%, transparent);
}
.facade-cheminees {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  pointer-events: none;
}
.facade-cheminees i {
  position: absolute;
  bottom: 0;
  width: 44px;
  height: 52px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 14px,
      var(--joint) 14px 16px),
    var(--sable);
  box-shadow: var(--relief), inset -7px 0 0 color-mix(in srgb, var(--c-encre) 9%, transparent);
}
.facade-cheminees i::before {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: -7px;
  height: 8px;
  border-radius: 2px;
  background: var(--huisserie);
  box-shadow: 0 2px 3px color-mix(in srgb, var(--c-encre) 22%, transparent);
}
.facade-cheminees i::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: calc(100% + 7px);
  height: 9px;
  background: linear-gradient(var(--joint), var(--joint)) left / 9px 100% no-repeat, linear-gradient(var(--joint), var(--joint)) right / 9px 100% no-repeat;
}
.facade-cheminees i:nth-child(1) {
  left: 9%;
}
.facade-cheminees i:nth-child(2) {
  left: 25%;
  width: 32px;
  height: 38px;
}
.facade-cheminees i:nth-child(2)::after {
  left: calc(50% - 4.5px);
  right: auto;
  width: 9px;
  background: var(--joint);
}
.facade-cheminees i:nth-child(3) {
  left: 56%;
  width: 50px;
  height: 60px;
}
.facade .fonctions-liste {
  gap: 64px clamp(96px, 10vw, 140px);
}
.facade .fonction {
  border: 7px solid var(--huisserie);
  border-radius: 4px;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--c-clair) 45%, var(--c-carte)) 0 34%,
      var(--c-carte) 34.5%);
}
.facade .fonction {
  position: relative;
  align-content: center;
  min-height: 200px;
  padding: 26px 26px;
  box-shadow: var(--relief), var(--retrait);
  transition: box-shadow 300ms ease;
}
.facade .fonction:hover {
  box-shadow:
    3px 4px 3px color-mix(in srgb, var(--c-encre) 18%, transparent),
    8px 13px 24px color-mix(in srgb, var(--c-encre) 26%, transparent),
    var(--retrait);
}
@media (min-width: 1200px) {
  .facade .fonction {
    width: min(100%, 340px);
  }
  .facade .fonction:nth-child(even) {
    justify-self: end;
  }
}
.facade .fonction::after {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  bottom: -20px;
  height: 11px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-encre) 55%, var(--sable));
  box-shadow: 0 4px 8px color-mix(in srgb, var(--c-encre) 22%, transparent);
}
.facade-scene {
  position: relative;
  padding: 64px 0 92px;
  background:
    radial-gradient(
      60% 66% at 50% 52%,
      color-mix(in srgb, var(--c-clair) 30%, transparent),
      transparent 75%);
}
.facade-scene::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 112px;
  background:
    linear-gradient(color-mix(in srgb, var(--c-encre) 14%, var(--c-carte)), color-mix(in srgb, var(--c-encre) 14%, var(--c-carte))) 0 0 / 100% 4px no-repeat,
    linear-gradient(color-mix(in srgb, var(--c-encre) 6%, var(--c-carte)), color-mix(in srgb, var(--c-encre) 6%, var(--c-carte))) 0 4px / 100% 32px no-repeat,
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--c-carte) 90%, transparent) 0 34px,
      transparent 34px 68px) 0 72px / 100% 4px no-repeat,
    color-mix(in srgb, var(--c-encre) 9%, var(--c-fond));
  -webkit-mask:
    linear-gradient(
      90deg,
      transparent,
      var(--c-encre) 12% 88%,
      transparent);
  mask:
    linear-gradient(
      90deg,
      transparent,
      var(--c-encre) 12% 88%,
      transparent);
}
.facade-scene > .facade {
  z-index: 1;
}
.facade-escalier {
  position: absolute;
  left: 50%;
  top: 72px;
  bottom: 168px;
  width: 34px;
  margin-left: -17px;
  display: none;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.facade-escalier i {
  display: block;
  width: 30px;
  height: 46px;
  border: 4px solid var(--huisserie);
  border-radius: 3px;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--c-clair) 50%, var(--c-carte)) 0 40%,
      var(--c-carte) 40.5%);
  box-shadow: var(--relief), var(--retrait);
}
@media (min-width: 1200px) {
  .facade-escalier {
    display: flex;
  }
}
.facade-porte {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 84px;
  height: 128px;
  margin-left: -42px;
  border: 6px solid var(--huisserie);
  border-bottom: 0;
  border-radius: 42px 42px 0 0;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 2px),
      var(--huisserie) calc(50% - 2px) calc(50% + 2px),
      transparent calc(50% + 2px)),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-clair) 55%, var(--c-carte)) 0 34%,
      var(--c-principal) 34%);
}
.facade-porte::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: -2px;
  height: 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-encre) 40%, var(--sable));
}
.cordiste {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 24px;
  right: calc(var(--couloir) - 61px);
  width: 96px;
  pointer-events: none;
  --fixation: 60.7%;
  transform-origin: var(--fixation) 17px;
  rotate: var(--esquive, 0deg);
  transition: rotate 900ms var(--ressort);
}
.cordiste::before {
  content: "";
  position: absolute;
  left: var(--fixation);
  top: 0;
  width: 4px;
  margin-left: -2px;
  height: var(--descente);
  background: var(--torsade);
}
.cordiste::after {
  content: "";
  position: absolute;
  left: var(--fixation);
  top: 8px;
  width: 26px;
  height: 18px;
  margin-left: -13px;
  border-radius: 4px;
  background:
    radial-gradient(
      circle,
      var(--c-accent) 0 3.5px,
      transparent 4px),
    color-mix(in srgb, var(--c-encre) 85%, var(--c-principal));
}
.cordiste svg {
  position: absolute;
  left: 0;
  top: var(--descente);
  width: 96px;
  height: 144px;
  overflow: visible;
  scale: -1 1;
}
@property --cordiste-bras { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.cordiste-dessin :is(path, circle) {
  fill: none;
  stroke: var(--c-encre);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cordiste-dessin .cordiste-corde {
  stroke: var(--c-principal);
  stroke-width: 3;
}
.cordiste-dessin .cordiste-sangles {
  stroke: var(--c-accent);
  stroke-width: 2;
}
.cordiste-dessin .cordiste-sellette {
  fill: color-mix(in srgb, var(--c-encre) 75%, var(--c-principal));
}
.cordiste-dessin .cordiste-seau {
  fill: var(--c-clair);
  stroke-width: 2;
}
.cordiste-dessin .cordiste-tete {
  fill: var(--c-carte);
}
.cordiste-dessin path.cordiste-casque {
  fill: var(--c-accent);
  stroke: none;
}
.cordiste-dessin .cordiste-raclette {
  stroke: var(--c-principal);
  stroke-width: 3.2;
}
.cordiste-bras {
  transform-box: view-box;
  transform-origin: 22px 29px;
  rotate: var(--cordiste-bras);
}
@media (max-width: 499px) {
  .facade {
    --couloir: clamp(44px, 14vw, 56px);
    padding-block: 60px 136px;
  }
  .facade-scene {
    padding-top: 48px;
  }
  .facade-cheminees i {
    width: 30px;
    height: 34px;
  }
  .facade-cheminees i:nth-child(2) {
    width: 24px;
    height: 26px;
  }
  .facade-cheminees i:nth-child(3) {
    width: 34px;
    height: 40px;
  }
  .facade-porte {
    width: 66px;
    height: 104px;
    margin-left: -33px;
  }
  .facade .fonction {
    padding: 16px 14px;
    gap: 10px;
    min-height: 0;
  }
  .facade .fonction {
    border-width: 5px;
  }
  .facade .fonction::after {
    left: -8px;
    right: -8px;
  }
  .cordiste {
    right: calc(var(--couloir) - 42px);
    width: 64px;
  }
  .cordiste svg {
    width: 64px;
    height: 96px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .cordiste {
    animation: descente 16s ease-in-out infinite, frotte 16s linear infinite;
  }
}
@keyframes descente {
  0%, 100% {
    --descente: 2%;
  }
  18%, 42% {
    --descente: 18%;
  }
  58%, 82% {
    --descente: 62%;
  }
}
@keyframes frotte {
  0%, 18%, 42%, 58%, 82%, 100% {
    --cordiste-bras: 0deg;
  }
  21%, 27%, 33%, 39%, 61%, 67%, 73%, 79% {
    --cordiste-bras: -16deg;
  }
  24%, 30%, 36%, 64%, 70%, 76% {
    --cordiste-bras: 10deg;
  }
}
.vitrine-rapport {
  position: relative;
  padding: 4% 0 14%;
}
.vitrine-pdf {
  width: 90%;
}
.vitrine-pdf .cadre {
  transform: perspective(1400px) rotateY(-12deg) rotateX(6deg) rotateZ(-2deg);
}
.tirage {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  margin: 0;
  padding: 10px 10px 36px;
  border-radius: 6px;
  background: var(--c-carte);
  box-shadow: var(--ombre-profonde);
  rotate: 6deg;
}
.tirage-vue {
  position: relative;
  display: block;
  aspect-ratio: 416 / 312;
  overflow: hidden;
  border-radius: 3px;
}
.tirage-vue .capture-crm {
  position: absolute;
  left: -8.17%;
  top: -63.46%;
  width: 230.77%;
  max-width: none;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.tirage figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 9px;
  font: 600 clamp(.6875rem, 1.6vw, .875rem)/1.2 var(--f-titre);
  color: var(--c-encre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 559px) {
  .tirage {
    width: 50%;
    padding: 7px 7px 28px;
  }
  .tirage figcaption {
    bottom: 7px;
  }
}
.anime .vitrine-pdf .cadre,
.anime .tirage {
  transition: transform 900ms var(--ressort), rotate 900ms var(--ressort);
}
.vitrine:hover .vitrine-pdf .cadre {
  transform: none;
}
.vitrine:hover .tirage {
  rotate: 2deg;
}
.atelier-carte {
  display: grid;
  gap: clamp(40px, 6vw, 64px);
}
.atelier-groupe {
  margin: 0 0 16px;
  font-size: 1.25rem;
}
.atelier-reglages {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .atelier-reglages {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.atelier-reglages .interrupteur-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
}
.sur-fonce .atelier-groupe {
  color: var(--c-carte);
}
.atelier-reglages h4 {
  margin: 0;
  font-size: 1.125rem;
}
.atelier-reglages p {
  grid-column: 1 / -1;
  margin: 0;
}
.atelier-reglages .interrupteur-etat {
  margin: 0;
}
.atelier-reglages .interrupteur-zone:has(.interrupteur[aria-checked=false]:not([hidden])) h4 {
  color: var(--c-texte-second);
}
.cartes-benefices .glyphe-carte {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
}
.cartes-canalisation {
  position: relative;
  padding-top: 86px;
}
.cartes-canalisation::before {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(var(--tuyau-coude) - var(--descente-ecart));
  right: calc((100% - 100vw) / 2);
  height: 20px;
  background:
    linear-gradient(
      180deg,
      var(--conduite-reflet),
      var(--conduite) 55%,
      var(--conduite-ombre));
  box-shadow: var(--ombre-legere);
}
.cartes-canalisation .carte {
  position: relative;
  overflow: visible;
}
.cartes-canalisation .carte-vanne {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 42px);
  width: 64px;
  height: 64px;
  margin-left: -32px;
  overflow: visible;
  opacity: var(--en-haut);
  --vanne-poignee: var(--alerte);
}
.cartes-canalisation .carte::after,
.goutte {
  width: 13px;
  height: 18px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--goutte, var(--outil-eau));
  box-shadow: inset -2px -2px 0 color-mix(in srgb, var(--c-principal) 45%, transparent);
}
.cartes-canalisation .carte::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  margin-left: -6.5px;
  opacity: 0;
}
.anime .cartes-canalisation[data-revele]:not(.vu) {
  opacity: 1;
  transform: none;
}
.anime .cartes-canalisation:not(.vu) .carte-vanne {
  --vanne-levier: 90deg;
}
.anime .cartes-canalisation.vu .carte::after {
  animation: goutte 900ms cubic-bezier(.5, 0, 1, .6) calc(var(--colonne) * 600ms) both;
}
.anime .cartes-canalisation.vu .carte-vanne {
  animation: vanne-ferme 450ms cubic-bezier(.55, 0, .35, 1) calc(var(--colonne) * 600ms + 800ms) both;
}
@keyframes goutte {
  0% {
    translate: 0 -14px;
    scale: .3;
    opacity: 0;
  }
  30% {
    translate: 0 -14px;
    scale: 1;
    opacity: var(--en-haut);
  }
  74% {
    translate: 0 16px;
    scale: 1;
    opacity: var(--en-haut);
  }
  76%, 100% {
    translate: 0 16px;
    scale: 1.7 .2;
    opacity: 0;
  }
}
.ecoute-remontee {
  stroke: var(--outil-onde);
  stroke-width: 2;
  opacity: .45;
  transform-box: view-box;
}
.ecoute-fuite {
  stroke: var(--outil-eau);
  stroke-width: 2.4;
  stroke-linecap: round;
}
@keyframes ecoute-remonte {
  0% {
    opacity: 0;
    scale: .15;
  }
  40% {
    opacity: 1;
  }
}
:root {
  --tuyau: 20px;
  --tuyau-ecart: 48px;
  --tuyau-coude: 28px;
  --tuyau-fin: 82%;
  --fin-borne: calc(var(--tuyau-fin) - 72px * var(--sol));
  --descente-ecart: calc(var(--tuyau) / 2);
  --sol: .78;
  --homme: calc(102.6px * var(--sol));
  --borne-rapport: .55;
  --borne-hauteur: calc(var(--homme) * var(--borne-rapport) * 62 / 60);
}
@media (min-width: 768px) {
  :root {
    --sol: 1.1;
  }
}
@media (min-width: 1320px) {
  :root {
    --descente-ecart: var(--tuyau-ecart);
    --sol: 1.46;
  }
}
section:has(> .troncon) {
  --tuyau-marge: calc(max(0px, (100% - var(--largeur)) / 2) + var(--gouttiere));
  --borne-x: calc(var(--tuyau-marge) + (100% - 2 * var(--tuyau-marge)) * .42);
  position: relative;
  overflow-x: clip;
}
.troncon {
  --tuyau-axe: calc(-2 * var(--tuyau-coude));
  --tuyau-reflet: var(--conduite-reflet);
  --tuyau-corps: var(--conduite);
  --tuyau-ombre: var(--conduite-ombre);
  --enterre-corps: color-mix(in srgb, var(--conduite) 14%, transparent);
  --enterre-paroi: color-mix(in srgb, var(--conduite) 72%, transparent);
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
@media (min-width: 1320px) {
  .troncon {
    --tuyau-axe: calc(var(--tuyau-marge) - var(--tuyau-ecart));
  }
}
:is(.entete-page, .sur-fonce) > .troncon {
  --tuyau-reflet: var(--c-carte);
  --tuyau-corps: var(--c-carte);
  --tuyau-ombre: var(--c-carte);
  --goutte: var(--c-clair);
  --enterre-corps: color-mix(in srgb, var(--c-clair) 16%, transparent);
  --enterre-paroi: color-mix(in srgb, var(--c-clair) 80%, transparent);
}
.troncon::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--tuyau-axe) - var(--tuyau) / 2);
  width: var(--tuyau);
  background:
    linear-gradient(
      90deg,
      var(--tuyau-reflet),
      var(--tuyau-corps) 45%,
      var(--tuyau-ombre));
}
.troncon-depart {
  --tuyau: var(--depart-tuyau, 20px);
  display: none;
}
@media (min-width: 1320px) {
  .troncon-depart.pose {
    display: block;
  }
}
.troncon-depart::before {
  top: calc(var(--depart-y) + var(--tuyau-coude));
}
.troncon-depart::after {
  --dedans: calc(var(--tuyau-coude) - var(--tuyau) / 2);
  --dehors: calc(var(--tuyau-coude) + var(--tuyau) / 2);
  content: "";
  position: absolute;
  top: calc(var(--depart-y) - var(--tuyau) / 2);
  left: var(--depart-x);
  right: calc(var(--tuyau-axe) - var(--tuyau) / 2);
  height: var(--dehors);
  background:
    radial-gradient(
      circle at 0 100%,
      transparent var(--dedans),
      var(--tuyau-corps) calc(var(--dedans) + .5px) calc(var(--dehors) - .5px),
      transparent var(--dehors)) 100% 0 / var(--dehors) 100% no-repeat,
    linear-gradient(var(--tuyau-corps), var(--tuyau-corps)) 0 0 / calc(100% - var(--dehors)) var(--tuyau) no-repeat;
}
@media (min-width: 1320px) {
  .cartes-canalisation::before {
    right: calc(-1 * var(--tuyau-ecart));
  }
  .cartes-canalisation > .carte:nth-child(3)::before {
    content: "";
    position: absolute;
    top: -77px;
    left: calc(100% + var(--tuyau-ecart) - var(--tuyau) / 2 - 4px);
    width: calc(var(--tuyau) + 8px);
    height: 30px;
    border: 1.4px solid var(--outil-trait);
    border-radius: 3px;
    background: var(--outil-metal);
  }
}
.cartes-canalisation::after {
  --dedans: calc(var(--tuyau-coude) - var(--tuyau) / 2);
  --dehors: calc(var(--tuyau-coude) + var(--tuyau) / 2);
  content: "";
  position: absolute;
  top: calc(24px - var(--tuyau) / 2);
  left: calc(-1 * var(--descente-ecart) - var(--tuyau) / 2);
  width: var(--dehors);
  bottom: calc(-1 * var(--marge-basse, var(--section)) - 1px);
  background:
    radial-gradient(
      circle at 100% var(--dehors),
      transparent var(--dedans),
      var(--conduite-ombre) calc(var(--dedans) + .5px),
      var(--conduite) calc(var(--dedans) + var(--tuyau) * .45),
      var(--conduite-reflet) calc(var(--dehors) - .5px),
      transparent var(--dehors)) 0 0 / var(--dehors) var(--dehors) no-repeat,
    linear-gradient(
      90deg,
      var(--conduite-reflet),
      var(--conduite) 45%,
      var(--conduite-ombre)) 0 var(--dehors) / var(--tuyau) calc(100% - var(--dehors)) no-repeat;
  pointer-events: none;
}
.borne-posee {
  --borne-pied: var(--borne-x);
  position: absolute;
  bottom: 0;
  left: calc(var(--borne-pied) - var(--borne-hauteur) * 22 / 62);
  width: calc(var(--borne-hauteur) * 44 / 62);
  height: var(--borne-hauteur);
  overflow: visible;
  pointer-events: none;
}
.sous-sol-borne {
  --depuis: calc(var(--tuyau-marge) - var(--descente-ecart));
  --vers: var(--borne-x);
}
.troncon-raccord {
  position: absolute;
  top: calc(var(--au) - 7px);
  right: calc(var(--tuyau-axe) - var(--tuyau) / 2 - 4px);
  width: calc(var(--tuyau) + 8px);
  height: 14px;
  border: 1.4px solid var(--outil-trait);
  border-radius: 3px;
  background: var(--outil-metal);
}
.troncon-raccord .goutte {
  position: absolute;
  top: calc(100% + 1px);
  right: -6px;
  transform-origin: 50% 0;
}
.troncon-vanne {
  position: absolute;
  top: calc(var(--au) - 32px);
  right: calc(var(--tuyau-axe) - 20px);
  width: 64px;
  height: 64px;
  overflow: visible;
  --vanne-poignee: var(--alerte);
  --vanne-levier: 90deg;
}
.troncon-enterre::before {
  content: none;
}
.sous-sol {
  --tuyau: min(20px, 14px * var(--sol));
  --profondeur: calc(36px * var(--sol));
  --dedans: calc(var(--tuyau-coude) - var(--tuyau) / 2);
  --dehors: calc(var(--tuyau-coude) + var(--tuyau) / 2);
  position: absolute;
  border: 0 solid var(--enterre-corps);
}
.sous-sol::before,
.sous-sol::after {
  content: "";
  position: absolute;
  border: 0 dashed var(--enterre-paroi);
}
.sous-sol-fin {
  top: -1px;
  left: calc(var(--depuis) - var(--tuyau) / 2);
  width: calc(var(--vers) - var(--depuis) + var(--tuyau));
  height: calc(var(--profondeur) + var(--tuyau) / 2 + 1px);
  border-width: 0 var(--tuyau) var(--tuyau);
  border-radius: 0 0 var(--dehors) var(--dehors);
}
.sous-sol-fin::before {
  inset: 0 calc(-1 * var(--tuyau)) calc(-1 * var(--tuyau));
  border-width: 0 2px 2px;
  border-radius: 0 0 var(--dehors) var(--dehors);
}
.sous-sol-fin::after {
  inset: 0 -2px -2px;
  border-width: 0 2px 2px;
  border-radius: 0 0 calc(var(--dedans) + 2px) calc(var(--dedans) + 2px);
}
.troncon-fin > .sous-sol-fin {
  --depuis: var(--fin-borne);
  --vers: calc(100% - var(--tuyau-axe));
}
.sol-limite {
  position: relative;
  height: 0;
}
.borne-fin {
  --borne-pied: var(--fin-borne);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .troncon {
    -webkit-mask: linear-gradient(var(--c-encre), var(--c-encre)) 0 0 / 100% var(--fil, 0px) no-repeat;
    mask: linear-gradient(var(--c-encre), var(--c-encre)) 0 0 / 100% var(--fil, 0px) no-repeat;
  }
  html.js .troncon-depart {
    animation: outil-apparait 450ms ease-out both;
  }
  html.js .troncon .atteint .goutte {
    animation: perle-tombe 1400ms both;
  }
}
@keyframes perle-tombe {
  0% {
    translate: 0 0;
    scale: 1;
    opacity: 1;
    animation-timing-function: cubic-bezier(.5, 0, 1, .6);
  }
  50% {
    translate: 0 72px;
    scale: 1;
    opacity: 1;
  }
  54% {
    translate: 0 72px;
    scale: 1.6 .2;
    opacity: 0;
  }
  55% {
    translate: 0 0;
    scale: 0;
    opacity: 1;
    animation-timing-function: var(--ressort);
  }
  100% {
    translate: 0 0;
    scale: 1;
    opacity: 1;
  }
}
.ecoute-de-sol {
  --fuite: 64%;
  --sens: 1;
  --sol-trait: var(--c-carte);
  --outil-onde: var(--c-clair);
  --outil-hachure: var(--c-clair);
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: calc(-50px * var(--sol));
  height: calc(156px * var(--sol));
  overflow-x: clip;
  pointer-events: none;
}
.ecoute-borne {
  --sens: -1;
  --sol-trait: var(--outil-sombre);
  --fuite: calc((var(--tuyau-marge) - var(--descente-ecart) + var(--borne-x)) / 2);
}
.ecoute-fin {
  --fuite: var(--tuyau-fin);
}
:is(section:has(> .ecoute-de-sol), section:has(+ .sol-limite)) {
  --marge-basse: max(var(--section), var(--homme) + 28px);
  padding-bottom: var(--marge-basse);
}
.sol-tache {
  fill: var(--outil-onde);
  opacity: .3;
}
@property --cloche-levee { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --capte { syntax: "<number>"; inherits: true; initial-value: 1; }
.sol-cloche {
  translate: 0 var(--cloche-levee);
}
.borne-corps {
  fill: var(--alerte);
  stroke: var(--outil-trait);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.ecoute-scene {
  position: absolute;
  top: 0;
  left: calc(var(--fuite) - 100px * var(--sol));
  width: calc(200px * var(--sol));
  height: 100%;
  overflow: visible;
}
.ecoute-scene .ecoute-remontee {
  stroke-width: 2.4;
  opacity: .6;
  transform-origin: 100px 136px;
}
.ecoute-scene .ecoute-fuite {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.sol-bras,
.sol-bras-trait,
.sol-bande,
.sol-arceau,
.sol-cable,
.sol-capte {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sol-bras-trait {
  stroke: var(--outil-trait);
  stroke-width: 4;
}
.sol-bras {
  stroke: var(--outil-metal);
  stroke-width: 2.4;
}
.sol-bande {
  stroke: var(--c-accent);
  stroke-width: 1.6;
}
.sol-arceau {
  stroke: var(--outil-sombre);
  stroke-width: 1.2;
}
.sol-cable,
.sol-capte {
  stroke: var(--sol-trait);
}
.sol-cable {
  stroke-width: 1.6;
}
.sol-capte {
  stroke-width: 1.4;
  opacity: var(--capte);
}
.sol-point {
  fill: var(--c-accent);
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .ecoute-de-sol:not(.vu) .sol-technicien {
    translate: calc(var(--sens) * 150px) 0;
    --capte: 0;
  }
  html.js .ecoute-de-sol:not(.vu) :is(.ecoute-fuite, .ecoute-remontee, .sol-point) {
    opacity: 0;
  }
  html.js .ecoute-de-sol.vu .sol-technicien {
    animation:
      technicien-marche 2000ms linear both,
      cloche-promenee 2000ms linear both,
      capte 300ms ease-out 2550ms both;
  }
  html.js .ecoute-de-sol.vu .ecoute-fuite {
    animation: scene-point 300ms var(--ressort) 1950ms both;
  }
  html.js .ecoute-de-sol.vu .ecoute-remontee {
    animation: ecoute-remonte 900ms ease-out calc(2050ms + var(--rang) * 200ms) both;
  }
  html.js .ecoute-de-sol.vu .sol-point {
    animation: scene-point 450ms var(--ressort) 2750ms both;
  }
}
@keyframes technicien-marche {
  0% {
    translate: calc(var(--sens) * 150px) 0;
    animation-timing-function: ease-in-out;
  }
  24%, 36% {
    translate: calc(var(--sens) * 100px) 0;
    animation-timing-function: ease-in-out;
  }
  60%, 72% {
    translate: calc(var(--sens) * 50px) 0;
    animation-timing-function: ease-in-out;
  }
  96%, 100% {
    translate: 0 0;
  }
}
@keyframes cloche-promenee {
  0%, 24%, 36%, 60%, 72%, 96%, 100% {
    --cloche-levee: 0px;
  }
  6%, 18%, 42%, 54%, 78%, 90% {
    --cloche-levee: -5px;
  }
}
@keyframes capte {
  from {
    --capte: 0;
  }
}
:root {
  --uv: oklch(from var(--c-principal) calc(l + .02) calc(c + .14) calc(h + 50));
}
@property --uv-x { syntax: "<length-percentage>"; inherits: true; initial-value: -100vmax; }
@property --uv-y { syntax: "<length-percentage>"; inherits: true; initial-value: -100vmax; }
.section:has([data-traceur-uv]) {
  overflow-x: clip;
}
[data-traceur-uv] {
  position: relative;
  --uv-rayon: clamp(110px, 10vw, 140px);
}
.anime [data-traceur-uv][data-revele]:not(.vu) {
  opacity: 1;
  transform: none;
}
[data-traceur-uv] > li {
  position: relative;
  isolation: isolate;
  --trace: 0%;
}
[data-traceur-uv] > li:has(> .uv-lampe) {
  z-index: 1;
  --uv-repos-x: 80%;
  --uv-repos-y: 40px;
  --uv-x: var(--uv-repos-x);
  --uv-y: var(--uv-repos-y);
}
[data-traceur-uv] > li:nth-child(3n) {
  --trace: -14%;
}
[data-traceur-uv] > li:nth-child(4n) {
  --trace: -6%;
}
[data-traceur-uv] > li::before,
[data-traceur-uv] > li::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
[data-traceur-uv] > li::before {
  background:
    radial-gradient(
      circle var(--uv-rayon) at var(--uv-x) var(--uv-y),
      color-mix(in srgb, var(--uv) 32%, transparent),
      color-mix(in srgb, var(--uv) 18%, transparent) 64%,
      transparent);
}
[data-traceur-uv] > li::after {
  --rouge: var(--alerte);
  --rouge-pale: color-mix(in srgb, var(--alerte) 55%, transparent);
  background:
    radial-gradient(
      ellipse 24% 5px at calc(66% + var(--trace)) 0,
      var(--rouge) 55%,
      transparent),
    radial-gradient(
      ellipse 3.5px 13px at calc(57% + var(--trace)) 8px,
      var(--rouge) 55%,
      transparent),
    radial-gradient(
      circle 3.6px at calc(57% + var(--trace)) 21px,
      var(--rouge) 65%,
      transparent),
    radial-gradient(
      ellipse 3px 9px at calc(74% + var(--trace)) 6px,
      var(--rouge) 55%,
      transparent),
    radial-gradient(
      ellipse 36px 15px at calc(86% + var(--trace)) 36px,
      var(--rouge-pale) 50%,
      transparent),
    radial-gradient(
      ellipse 16px 22px at calc(92% + var(--trace)) 28px,
      var(--rouge-pale) 50%,
      transparent),
    radial-gradient(
      circle 2.6px at calc(79% + var(--trace)) 52px,
      var(--rouge) 70%,
      transparent),
    radial-gradient(
      circle 2px at calc(96% + var(--trace)) 50px,
      var(--rouge) 70%,
      transparent),
    radial-gradient(
      circle 1.8px at calc(82% + var(--trace)) 15px,
      var(--rouge) 70%,
      transparent),
    radial-gradient(
      ellipse 4px 22% at 100% 52%,
      var(--rouge) 55%,
      transparent),
    radial-gradient(
      ellipse 60px 6px at 22% 100%,
      var(--rouge) 55%,
      transparent);
  filter: drop-shadow(0 0 1.5px var(--alerte));
  -webkit-mask:
    radial-gradient(
      circle var(--uv-rayon) at var(--uv-x) var(--uv-y),
      var(--c-encre) 30%,
      transparent);
  mask:
    radial-gradient(
      circle var(--uv-rayon) at var(--uv-x) var(--uv-y),
      var(--c-encre) 30%,
      transparent);
}
.uv-lampe {
  position: absolute;
  z-index: 1;
  left: calc(var(--uv-x) + 7px);
  top: calc(var(--uv-y) - 64px);
  width: 56px;
  height: 56px;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--c-encre) 35%, transparent));
}
.uv-verre {
  fill: var(--uv);
  stroke: var(--outil-trait);
  stroke-width: 1.4;
}
.uv-halo {
  fill: var(--uv);
  opacity: .35;
}
.uv-cone {
  fill: var(--uv);
  opacity: .14;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-traceur-uv] > li::before,
  [data-traceur-uv] > li::after,
  .uv-lampe {
    transition: --uv-x 180ms ease-out, --uv-y 180ms ease-out;
  }
}
@media (hover: none) {
  .anime [data-traceur-uv]:not(.vu) > li:has(> .uv-lampe) {
    --uv-x: 6%;
    --uv-y: 72%;
  }
  .anime [data-traceur-uv].vu > li:has(> .uv-lampe) {
    animation: uv-balaie 2600ms ease-in-out 400ms both;
  }
}
@keyframes uv-balaie {
  0% {
    --uv-x: 6%;
    --uv-y: 72%;
  }
  30% {
    --uv-x: 24%;
    --uv-y: 100%;
  }
  62% {
    --uv-x: 58%;
    --uv-y: 8px;
  }
  100% {
    --uv-x: var(--uv-repos-x);
    --uv-y: var(--uv-repos-y);
  }
}
.site-suite {
  margin: 24px 0 0;
}
:is(.entete-jauge, .entete-scene) > .conteneur {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  :is(.entete-jauge, .entete-scene) > .conteneur {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.jauge-entete {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: clamp(180px, 24vw, 300px);
  margin: 0 auto;
  text-align: center;
  --jauge-duree: 1900ms;
  --jauge-attente: 450ms;
}
.jauge-entete-anneau {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
}
.jauge-entete-anneau svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.jauge-entete .jauge-boucle {
  --trait: var(--c-carte);
}
.jauge-entete .jauge-chiffre {
  font-size: clamp(3.25rem, 7vw, 5rem);
  color: var(--c-carte);
}
.jauge-entete figcaption {
  max-width: 34ch;
  font-size: .9375rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-carte) 82%, var(--c-clair));
}
.jauge-entete figcaption strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-carte);
}
.jauge-entete .lien-fleche {
  min-height: 36px;
}
.temps-phrase {
  max-width: 40ch;
  margin: 18px 0 0;
  font: 600 clamp(1.125rem, 2.2vw, 1.5rem)/1.35 var(--f-titre);
  color: var(--c-carte);
}
.chiffres-nuit {
  background: var(--nuit-eclairee);
  --filigrane: color-mix(in srgb, var(--c-principal) 30%, var(--nuit));
}
.qui-temps {
  position: relative;
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}
.qui-references {
  align-items: start;
}
.qui-references .pack-exemple {
  margin: 0;
}
.cadenas {
  position: relative;
  width: clamp(150px, 22vw, 230px);
  margin-inline: auto;
  --cadenas-haut: color-mix(in srgb, var(--c-principal) 38%, var(--nuit));
  --cadenas-bas: var(--nuit);
}
.sur-fonce .cadenas {
  --cadenas-haut: color-mix(in srgb, var(--c-clair) 30%, var(--c-principal));
  --cadenas-bas: color-mix(in srgb, var(--c-principal) 75%, var(--nuit));
}
.cadenas-dessin {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.cadenas-anneau {
  --trait: var(--c-carte);
  --point-affiche: none;
}
.cadenas-pene {
  --trait-affiche: none;
  --point: var(--c-accent);
  transform-box: view-box;
}
.cadenas-onde {
  --trait-affiche: none;
  --point: transparent;
  stroke: var(--c-carte);
  stroke-width: 1.8;
  opacity: 0;
  transform-box: view-box;
}
.cadenas-ton-haut {
  stop-color: var(--cadenas-haut);
}
.cadenas-ton-bas {
  stop-color: var(--cadenas-bas);
}
.cadenas-boite {
  fill: url(#cadenas-degrade);
  filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--c-encre) 45%, transparent));
}
.cadenas-arete {
  fill: none;
  stroke: color-mix(in srgb, var(--c-carte) 22%, transparent);
  stroke-width: 1.2;
}
.cadenas-reflet {
  fill: color-mix(in srgb, var(--c-carte) 22%, transparent);
}
.cadenas-serrure {
  fill: color-mix(in srgb, var(--c-clair) 70%, var(--c-carte));
}
.cadenas-corps {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.cadenas-anse {
  transform-box: view-box;
  transform-origin: 31px 76px;
}
@media (prefers-reduced-motion: no-preference) {
  .anime .cadenas:not(.vu) .cadenas-anse {
    translate: 0 -38px;
    rotate: -8deg;
  }
  .anime .cadenas:not(.vu) .cadenas-anneau {
    --jauge: 0;
  }
  .anime .cadenas:not(.vu) .cadenas-pene {
    scale: 0;
  }
  .anime .cadenas:not(.vu) .cadenas-corps {
    opacity: 0;
  }
  .anime .cadenas-anneau {
    --tirets: 100 200;
    --decalage: calc(100 - 100 * var(--jauge));
  }
  .anime .cadenas.vu .cadenas-anse {
    animation: cadenas-anse 2600ms both;
  }
  .anime .cadenas.vu .cadenas-anneau {
    animation: cadenas-trace 884ms var(--mvt-trace) 208ms both;
  }
  .anime .cadenas.vu .cadenas-pene {
    animation: cadenas-pene 2600ms both;
  }
  .anime .cadenas.vu .cadenas-onde {
    animation: cadenas-onde 2600ms both;
  }
  .anime .cadenas.vu .cadenas-corps {
    animation: cadenas-corps 2600ms both;
  }
  .anime .cadenas.vu .cadenas-reflet {
    animation: cadenas-reflet 2600ms both;
  }
}
@keyframes cadenas-anse {
  0%, 46% {
    translate: 0 -38px;
    rotate: -8deg;
    animation-timing-function: cubic-bezier(.55, 0, 1, .55);
  }
  58%, 100% {
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes cadenas-trace {
  from {
    --jauge: 0;
  }
  to {
    --jauge: 1;
  }
}
@keyframes cadenas-pene {
  0%, 62% {
    scale: 0;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
  }
  72%, 100% {
    scale: 1;
  }
}
@keyframes cadenas-onde {
  0%, 63% {
    opacity: 0;
    scale: 1;
  }
  65% {
    opacity: .95;
    scale: 1.2;
    animation-timing-function: cubic-bezier(.1, .6, .3, 1);
  }
  100% {
    opacity: 0;
    scale: 4.4;
  }
}
@keyframes cadenas-corps {
  0% {
    opacity: 0;
    translate: 0 10px;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
  }
  20%, 58% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  59.5% {
    translate: 0 1.5px;
    scale: 1.01 .985;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
  }
  64%, 100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
@keyframes cadenas-reflet {
  0%, 72% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(.5, 0, .3, 1);
  }
  100% {
    translate: 180px 0;
  }
}
.entete-verrou .cadenas-entete {
  position: absolute;
  right: clamp(16px, 9vw, 160px);
  top: 50%;
  translate: 0 -54%;
  width: clamp(120px, 17vw, 240px);
  isolation: isolate;
}
.entete-verrou .cadenas-entete::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -40%;
  border-radius: 50%;
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--c-clair) 40%, transparent),
      transparent);
}
@media (max-width: 699px) {
  .entete-verrou .cadenas-entete {
    top: 18px;
    translate: none;
    width: 80px;
  }
  .entete-verrou h1 {
    padding-right: 86px;
  }
}
.niveaux-echelle {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.niveaux-echelle li {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 6px 24px;
  align-items: center;
}
.niveaux-echelle strong {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--c-principal);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.125rem;
}
.niveaux-echelle span:last-child {
  grid-column: 2;
  color: var(--c-texte-second);
  font-size: .9375rem;
}
.niveau-barre {
  grid-column: 2;
  grid-row: 1;
  height: 14px;
  border-radius: 7px;
  background:
    linear-gradient(
      90deg,
      var(--c-principal),
      color-mix(in srgb, var(--c-clair) 55%, var(--c-principal)));
}
.niveaux-echelle li:nth-child(1) .niveau-barre {
  width: 20%;
}
.niveaux-echelle li:nth-child(2) .niveau-barre {
  width: 40%;
}
.niveaux-echelle li:nth-child(3) .niveau-barre {
  width: 60%;
}
.niveaux-echelle li:nth-child(4) .niveau-barre {
  width: 80%;
}
.niveaux-echelle li:nth-child(5) .niveau-barre {
  width: 100%;
  background:
    linear-gradient(
      90deg,
      var(--c-principal),
      var(--c-accent));
}
@media (max-width: 699px) {
  .niveaux-echelle li {
    grid-template-columns: minmax(0, 1fr);
  }
  .niveaux-echelle strong,
  .niveau-barre,
  .niveaux-echelle span:last-child {
    grid-column: 1;
    grid-row: auto;
  }
}
.niveaux-ecrans {
  display: grid;
  gap: 44px 32px;
  align-items: center;
  margin: clamp(48px, 7vw, 88px) 0 0;
  padding: 0;
  list-style: none;
}
.niveaux-ecrans figure {
  display: grid;
  justify-items: center;
  gap: 18px;
}
.niveaux-ecrans .cadre {
  width: 100%;
  transform: rotate(-2deg);
}
.niveaux-ecrans li:nth-child(even) .cadre {
  transform: rotate(2deg);
}
.niveaux-ecrans .cadre-telephone {
  width: min(100%, 230px);
}
.niveaux-ecrans figcaption {
  max-width: 30ch;
  text-align: center;
  font-size: .9375rem;
  color: var(--c-texte-second);
}
.niveaux-ecrans figcaption strong {
  display: block;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-principal);
}
@media (min-width: 900px) {
  .niveaux-ecrans {
    grid-template-columns: minmax(0, 1fr) minmax(0, .62fr) minmax(0, 1.5fr);
  }
}
.chapitre-dessin {
  margin-bottom: clamp(40px, 6vw, 72px);
}
.chapitre-dessin .chapitre {
  margin-bottom: 0;
}
.chapitre-dessin > [aria-hidden=true] {
  justify-self: center;
}
@property --jauge { syntax: "<number>"; inherits: true; initial-value: 1; }
.anime [data-revele]:not(.vu) :is(.jauge-plein, .jauge-boucle) {
  --jauge: 0;
}
.anime [data-revele].vu :is(.jauge-plein, .jauge-boucle) {
  transition: --jauge var(--jauge-duree, 1100ms) var(--mvt-trace) var(--jauge-attente, 250ms);
}
.jauge-boucle {
  overflow: visible;
  --trait: var(--c-principal);
  --point: var(--c-accent);
  --tirets: var(--note) 200;
  --decalage: calc(var(--note) * (1 - var(--jauge)));
  --echelle-point: clamp(0, (var(--jauge) - .999) * 1000, 1);
}
.code-acces {
  width: clamp(200px, 17vw, 236px);
}
.code-acces .cadre-telephone {
  rotate: -4deg;
}
.code-ecran {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  aspect-ratio: 390 / 844;
  padding: 18px 12px;
  border-radius: 24px;
  background: var(--c-carte);
}
.code-avis,
.code-boucle {
  margin-bottom: auto;
}
.code-avis {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--fond-doux);
  color: var(--c-encre);
  box-shadow: var(--ombre-legere);
}
.code-enveloppe {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--c-principal);
}
.code-avis-texte {
  display: grid;
  font-size: .75rem;
  line-height: 1.3;
}
.code-avis-texte b {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .8125rem;
}
.code-avis-texte span {
  letter-spacing: .14em;
  color: var(--c-texte-second);
}
.code-ligne {
  width: 62%;
  height: 10px;
  border-radius: 5px;
  background: var(--filet);
}
.code-cases {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}
.code-cases i {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border-radius: 7px;
  border: 2px solid var(--c-principal);
  background: var(--fond-doux);
  color: var(--c-encre);
  font: 600 1rem/1 var(--f-titre);
  font-style: normal;
}
.code-boucle {
  width: 76px;
  --jauge-attente: 1500ms;
  --jauge-duree: 900ms;
}
@media (prefers-reduced-motion: no-preference) {
  .anime .code-acces.vu .code-avis {
    transition: translate 600ms var(--ressort), opacity 300ms ease;
  }
  .anime .code-acces:not(.vu) .code-avis {
    translate: 0 -18px;
    opacity: 0;
  }
  .anime .code-acces.vu .code-cases i {
    transition:
      color 120ms ease,
      border-color 200ms ease,
      scale 380ms var(--ressort);
    transition-delay: calc(500ms + var(--rang, 0) * 150ms);
  }
  .anime .code-acces:not(.vu) .code-cases i {
    color: transparent;
    border-color: var(--filet);
    scale: .9;
  }
}
.code-cases i:nth-child(2) {
  --rang: 1;
}
.code-cases i:nth-child(3) {
  --rang: 2;
}
.code-cases i:nth-child(4) {
  --rang: 3;
}
.code-cases i:nth-child(5) {
  --rang: 4;
}
.code-cases i:nth-child(6) {
  --rang: 5;
}
.porte-sav {
  display: grid;
  justify-items: center;
  align-items: end;
  gap: 32px;
}
@media (min-width: 560px) {
  .porte-sav {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
  }
}
.porte-sav-scene {
  position: relative;
  width: 168px;
  height: 262px;
  perspective: 720px;
}
@media (min-width: 900px) {
  .porte-sav-scene {
    width: 204px;
    height: 318px;
    perspective: 860px;
  }
}
.porte-sav-baie,
.porte-sav-battant {
  position: absolute;
  inset: 0 0 22px;
  border-radius: 50% 50% 6px 6px / 35% 35% 6px 6px;
}
.porte-sav-baie {
  background:
    radial-gradient(
      120% 80% at 50% 70%,
      var(--c-carte),
      color-mix(in srgb, var(--c-clair) 70%, var(--c-carte)) 45%,
      var(--c-clair));
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--c-carte) 10%, var(--nuit-tuile)), 0 0 36px 4px color-mix(in srgb, var(--c-clair) 45%, transparent);
}
.porte-sav-sol {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -18px;
  height: 46px;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(color-mix(in srgb, var(--c-clair) 55%, transparent), transparent);
  opacity: 0;
}
.porte-sav-battant {
  transform-origin: 0 50%;
  background:
    linear-gradient(
      160deg,
      var(--c-carte),
      color-mix(in srgb, var(--c-clair) 26%, var(--c-carte)));
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--c-principal) 14%, transparent), var(--ombre-profonde);
}
.porte-sav-battant i {
  position: absolute;
  left: 17%;
  right: 17%;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-principal) 16%, var(--c-carte));
}
.porte-sav-battant i:first-child {
  top: 13%;
  height: 36%;
  border-radius: 60px 60px 10px 10px;
}
.porte-sav-battant i:nth-child(2) {
  top: 57%;
  height: 32%;
}
.porte-sav-poignee {
  position: absolute;
  right: 9%;
  top: 48%;
  width: 15%;
  height: auto;
  overflow: visible;
  --trait: var(--c-principal);
  --point: var(--c-accent);
}
.porte-sav-journal {
  width: min(100%, 340px);
  padding: 18px 18px 14px;
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  color: var(--c-encre);
  box-shadow: var(--ombre-profonde);
}
.porte-sav-titre {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--c-principal);
}
.porte-sav-glyphe {
  width: 22px;
  height: 22px;
  overflow: visible;
  --trait: var(--c-principal);
  --point: var(--c-accent);
}
.porte-sav-journal ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}
.porte-sav-journal li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid var(--filet-carte);
}
.porte-sav-qui {
  flex: none;
  min-width: 5.2em;
  font-weight: 700;
  color: var(--c-principal);
}
@media (prefers-reduced-motion: no-preference) {
  .anime .porte-sav.vu .porte-sav-battant {
    animation: porte-sav-battant 3600ms both;
  }
  .anime .porte-sav.vu .porte-sav-sol {
    animation: porte-sav-sol 3600ms both;
  }
  .anime .porte-sav.vu .porte-sav-journal li {
    transition: opacity 350ms ease, translate 500ms var(--ressort);
  }
  .anime .porte-sav:not(.vu) .porte-sav-journal li {
    opacity: 0;
    translate: -10px 0;
  }
  .anime .porte-sav.vu .porte-sav-journal li:nth-child(1) {
    transition-delay: 1000ms;
  }
  .anime .porte-sav.vu .porte-sav-journal li:nth-child(2) {
    transition-delay: 1600ms;
  }
  .anime .porte-sav.vu .porte-sav-journal li:nth-child(3) {
    transition-delay: 3100ms;
  }
}
@keyframes porte-sav-battant {
  0%, 6% {
    rotate: y 0deg;
    animation-timing-function: cubic-bezier(.3, .7, .3, 1);
  }
  28%, 62% {
    rotate: y -58deg;
    animation-timing-function: cubic-bezier(.55, 0, .9, .5);
  }
  78% {
    rotate: y 0deg;
    animation-timing-function: ease-out;
  }
  83% {
    rotate: y -5deg;
    animation-timing-function: ease-in;
  }
  88%, 100% {
    rotate: y 0deg;
  }
}
@keyframes porte-sav-sol {
  0%, 8% {
    opacity: 0;
  }
  28%, 60% {
    opacity: 1;
  }
  78%, 100% {
    opacity: 0;
  }
}
.nuit-sauvegarde {
  width: min(100%, 440px);
}
.nuit-dessin {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 30px 34px color-mix(in srgb, var(--c-encre) 50%, transparent));
}
.nuit-ciel-soir {
  fill: color-mix(in srgb, var(--c-clair) 55%, var(--c-principal));
}
.nuit-ciel {
  fill: color-mix(in srgb, var(--c-principal) 22%, var(--nuit));
}
.nuit-etoiles {
  fill: var(--c-carte);
}
.nuit-lune {
  fill: var(--c-fond);
}
.nuit-cylindre {
  fill: var(--c-carte);
}
.nuit-cylindre-haut {
  fill: color-mix(in srgb, var(--c-clair) 40%, var(--c-carte));
}
.nuit-cylindre-trait {
  fill: none;
  stroke: color-mix(in srgb, var(--c-clair) 55%, var(--c-carte));
  stroke-width: 2;
}
.nuit-copie-contour {
  fill: none;
  stroke: color-mix(in srgb, var(--c-carte) 60%, transparent);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}
.nuit-copie-plein {
  fill: color-mix(in srgb, var(--c-clair) 75%, var(--c-carte));
}
.nuit-copie-dessus {
  fill: color-mix(in srgb, var(--c-clair) 35%, var(--c-carte));
}
.nuit-paquets {
  fill: var(--c-clair);
}
.nuit-ombre {
  fill: color-mix(in srgb, var(--c-encre) 55%, transparent);
}
.nuit-paquets rect {
  opacity: 0;
}
.nuit-boucle {
  --trait: var(--c-carte);
  --jauge-attente: 2700ms;
  --jauge-duree: 800ms;
}
@media (prefers-reduced-motion: no-preference) {
  .anime .nuit-sauvegarde.vu :where(.nuit-ciel, .nuit-etoiles, .nuit-lune, .nuit-copie-plein, .nuit-copie-dessus, .nuit-paquets rect) {
    animation: 3600ms both;
  }
  .anime .nuit-sauvegarde.vu .nuit-ciel {
    animation-name: nuit-tombe;
  }
  .anime .nuit-sauvegarde.vu .nuit-etoiles {
    animation-name: nuit-etoiles;
  }
  .anime .nuit-sauvegarde.vu .nuit-lune {
    animation-name: nuit-lune;
  }
  .anime .nuit-sauvegarde.vu .nuit-copie-plein {
    animation-name: nuit-copie;
  }
  .anime .nuit-sauvegarde.vu .nuit-copie-dessus {
    animation-name: nuit-copie-pleine;
  }
  .anime .nuit-sauvegarde.vu .nuit-paquets rect {
    animation-name: nuit-paquet;
  }
  .anime .nuit-sauvegarde.vu .nuit-paquets rect:nth-child(2) {
    animation-delay: 300ms;
  }
  .anime .nuit-sauvegarde.vu .nuit-paquets rect:nth-child(3) {
    animation-delay: 600ms;
  }
  .anime .nuit-sauvegarde:not(.vu) :where(.nuit-ciel, .nuit-etoiles, .nuit-lune, .nuit-copie-dessus) {
    opacity: 0;
  }
  .anime .nuit-sauvegarde:not(.vu) .nuit-copie-plein {
    translate: 0 112px;
  }
}
@keyframes nuit-tombe {
  0% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  32%, 100% {
    opacity: 1;
  }
}
@keyframes nuit-etoiles {
  0%, 18% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  34% {
    opacity: .55;
  }
  40%, 100% {
    opacity: 1;
  }
}
@keyframes nuit-lune {
  0%, 8% {
    opacity: 0;
    translate: 0 34px;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
  }
  40%, 100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes nuit-copie {
  0%, 46% {
    translate: 0 112px;
    animation-timing-function: cubic-bezier(.45, 0, .3, 1);
  }
  76%, 100% {
    translate: 0 0;
  }
}
@keyframes nuit-copie-pleine {
  0%, 72% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes nuit-paquet {
  0%, 38% {
    opacity: 0;
    translate: 0 0;
    animation-timing-function: cubic-bezier(.3, 0, .6, 1);
  }
  41% {
    opacity: 1;
  }
  50% {
    translate: 68px -58px;
    animation-timing-function: cubic-bezier(.4, 0, .7, 1);
  }
  60% {
    opacity: 1;
    translate: 142px 14px;
  }
  64%, 100% {
    opacity: 0;
    translate: 142px 14px;
  }
}
.garde-bande {
  background: var(--nuit-eclairee);
  color: var(--c-carte);
}
.garde-grille {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .garde-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}
.garde-anneau {
  position: relative;
  width: min(78%, 380px);
  aspect-ratio: 1;
  margin-inline: auto;
  --trait: var(--c-carte);
  --point: var(--c-accent);
}
.garde-anneau > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.garde-perles {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
html.js .garde-perles.posees {
  display: block;
}
.garde-perles li {
  position: absolute;
  display: grid;
  place-items: center;
  width: 23%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-encre);
  box-shadow: 0 0 0 6px var(--nuit), 0 18px 30px -12px color-mix(in srgb, var(--c-encre) 80%, transparent);
}
.garde-perles .picto {
  width: 50%;
  height: 50%;
}
.garde-texte h2 {
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.garde-faits {
  display: grid;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.garde-faits li {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 clamp(1.125rem, 2vw, 1.5rem)/1.25 var(--f-titre);
}
.garde-faits li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 4px solid var(--c-accent);
}
.garde-texte .lien-fleche {
  color: var(--c-accent);
}
@property --trace-vu { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes trace-vu {
  from {
    --trace-vu: 0;
  }
  to {
    --trace-vu: 1;
  }
}
.anime .garde-trace,
.anime .demo-trace {
  --tirets: 100 200;
  --decalage: calc(100 - var(--trace-vu) * 100);
}
.anime .garde-grille:not(.vu) {
  --trace-vu: 0;
}
.anime .garde-grille.vu {
  animation: trace-vu 2400ms cubic-bezier(.45, .05, .55, .95) both;
}
.anime .garde-perles li {
  transition: scale 700ms var(--ressort);
}
.anime .garde-faits li {
  transition: opacity 500ms ease;
}
.anime .garde-faits li::before {
  transition: background-color 300ms ease, scale 700ms var(--ressort);
}
.anime .garde-grille:not(.vu) .garde-perles li {
  scale: 0;
}
.anime .garde-grille:not(.vu) .garde-faits li {
  opacity: .3;
}
.anime .garde-grille:not(.vu) .garde-faits li::before {
  scale: .5;
}
.anime .garde-grille.vu .garde-faits li::before {
  background: var(--c-accent);
}
.anime .garde-grille .garde-1,
.anime .garde-grille .garde-1::before {
  transition-delay: 560ms;
}
.anime .garde-grille .garde-2,
.anime .garde-grille .garde-2::before {
  transition-delay: 1020ms;
}
.anime .garde-grille .garde-3,
.anime .garde-grille .garde-3::before {
  transition-delay: 1370ms;
}
.anime .garde-grille .garde-4,
.anime .garde-grille .garde-4::before {
  transition-delay: 1810ms;
}
.carte .titre-carte {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.exemples-titre {
  margin: clamp(32px, 5vw, 56px) 0 16px;
  font-size: 1.125rem;
  color: var(--c-encre);
}
.apres-table {
  margin: 20px 0 0;
}
.tarifs-inclus-tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) {
  .tarifs-inclus-tuiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (min-width: 1100px) {
  .tarifs-inclus-tuiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
}
.tarifs-inclus-tuile {
  --rang: 0;
  --jauge-attente: calc(350ms + var(--rang) * 150ms);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background: var(--tuile-nuit);
  border: 1px solid color-mix(in srgb, var(--c-carte) 10%, transparent);
  box-shadow: var(--ombre-profonde);
}
.tarifs-inclus-tuile:nth-child(2) {
  --rang: 1;
}
.tarifs-inclus-tuile:nth-child(3) {
  --rang: 2;
}
.tarifs-inclus-tuile:nth-child(4) {
  --rang: 3;
}
.tarifs-inclus-tuile:nth-child(5) {
  --rang: 4;
}
.tarifs-inclus-tuile:nth-child(6) {
  --rang: 5;
}
.tarifs-inclus-tuile:nth-child(7) {
  --rang: 6;
}
.tarifs-inclus-tuile:nth-child(8) {
  --rang: 7;
}
.tarifs-inclus-tuile:nth-child(9) {
  --rang: 8;
}
.tarifs-inclus-picto {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  color: var(--c-clair);
}
.tarifs-inclus-tuile h3 {
  margin: 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  color: var(--c-carte);
  overflow-wrap: anywhere;
}
.tarifs-inclus-tuile p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-carte) 78%, var(--c-clair));
}
.tarifs-inclus-tuile .tarifs-inclus-etat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-weight: 700;
  color: var(--c-carte);
}
.tarifs-inclus-etat .jauge-boucle {
  width: 24px;
  height: 24px;
  flex: none;
  --trait: var(--c-carte);
  --point: var(--c-carte);
}
.anime .tarifs-inclus-tuile {
  transition: translate 300ms var(--ressort), box-shadow 300ms ease;
}
.anime .tarifs-inclus-tuile:hover {
  translate: 0 -4px;
  box-shadow: var(--ombre-profonde), 0 0 0 1px var(--c-clair);
}
.tarifs-ouverture {
  padding-bottom: 0;
}
.table-inclus {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--c-carte);
  color: var(--c-encre);
  border: 1px solid var(--filet);
}
.table-inclus th,
.table-inclus td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--filet-carte);
}
.table-inclus tr:last-child > * {
  border-bottom: 0;
}
.table-inclus thead th {
  background: var(--fond-doux);
  color: var(--c-principal);
  font-family: var(--f-titre);
  font-weight: 600;
}
.table-inclus tbody th {
  font-weight: 400;
}
.table-inclus td {
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 699px) {
  .table-inclus th,
  .table-inclus td {
    padding: 12px 12px;
  }
  .table-inclus td {
    white-space: normal;
  }
}
@media (min-width: 900px) {
  .packs-detail {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
.metiers-pack-liste {
  display: grid;
  gap: 10px;
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
}
.metiers-pack-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 46ch;
}
.metiers-pack-liste .glyphe {
  margin-top: .22em;
  --trait: var(--c-carte);
  --point: var(--c-carte);
}
.metiers-tuiles {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .metiers-tuiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .metiers-tuiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}
.metiers-tuile {
  --rang: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px 28px;
  border-radius: 22px;
  background: var(--c-carte);
  color: var(--c-encre);
  border: 1px solid var(--filet);
  box-shadow: var(--ombre);
}
.metiers-tuile:nth-child(2) {
  --rang: 1;
}
.metiers-tuile:nth-child(3) {
  --rang: 2;
}
.metiers-tuile:nth-child(4) {
  --rang: 3;
}
.metiers-tuile h3 {
  margin: 12px 0 0;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
}
.metiers-tuile p {
  margin: 0;
}
.metiers-tuile .lien-fleche {
  margin-top: auto;
}
.metiers-tuile .pack-etat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.metiers-tuile-signe {
  display: grid;
  place-items: center;
  width: 76px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--eclaire);
}
.metiers-tuile-picto {
  width: 40px;
  height: 40px;
  color: var(--c-principal);
}
@media (max-width: 559px) {
  .metiers-tuile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 18px;
    align-items: start;
    padding: 20px;
  }
  .metiers-tuile > * {
    grid-column: 2;
  }
  .metiers-tuile .metiers-tuile-signe {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 58px;
  }
  .metiers-tuile-picto {
    width: 30px;
    height: 30px;
  }
  .metiers-tuile h3 {
    margin: 0;
  }
}
.anime .metiers-tuile-picto > * {
  stroke-dasharray: 1 2;
}
.anime .metiers-tuiles:not(.vu) .metiers-tuile-picto > * {
  stroke-dashoffset: 1;
  opacity: 0;
}
.anime .metiers-tuiles:not(.vu) .metiers-tuile-signe {
  scale: .3;
  opacity: 0;
}
.anime .metiers-tuiles.vu .metiers-tuile-picto > * {
  transition: stroke-dashoffset 1300ms var(--mvt-trace) calc(650ms + var(--rang) * 420ms), opacity 100ms linear calc(650ms + var(--rang) * 420ms);
}
.anime .metiers-tuiles.vu .metiers-tuile-signe {
  transition: scale 900ms var(--ressort) calc(250ms + var(--rang) * 420ms), opacity 300ms ease calc(250ms + var(--rang) * 420ms);
}
.anime .metiers-tuile {
  transition: translate 300ms var(--ressort), box-shadow 300ms ease;
}
.anime .metiers-tuile:hover {
  translate: 0 -4px;
  box-shadow: var(--ombre-profonde);
}
.parcours-grille {
  display: grid;
  gap: 40px;
  align-items: start;
}
.parcours-boucle {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin-inline: auto;
  --trait: var(--c-principal);
  --point: var(--c-accent);
}
.parcours-boucle > svg {
  width: 100%;
  height: 100%;
}
.parcours-perles {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
html.js .parcours-perles.posees {
  display: block;
}
.parcours-perles li {
  position: absolute;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c-carte);
  color: var(--c-principal);
  box-shadow: 0 0 0 2px var(--c-principal);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .875rem;
}
.parcours-etapes {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: parcours;
}
.parcours-etapes li {
  counter-increment: parcours;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 16px;
  padding: 16px 18px;
}
.parcours-etapes li::before {
  content: counter(parcours);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-principal);
  color: var(--c-carte);
  font-family: var(--f-titre);
  font-weight: 600;
}
.parcours-etapes h3 {
  margin: 0;
  font-size: 1.125rem;
}
.parcours-ecran {
  grid-column: 2;
  width: min(100%, 440px);
  margin: 14px 0 6px;
}
.parcours-ecran:has(.cadre-telephone) {
  width: min(100%, 230px);
}
.parcours-ecran .cadre {
  transform: rotate(-1.5deg);
}
.parcours-etapes li:nth-child(4n+3) .parcours-ecran .cadre {
  transform: rotate(1.5deg);
}
.parcours-etapes li:hover .parcours-ecran .cadre {
  transform: none;
}
.anime .parcours-ecran .cadre {
  transition: transform 900ms var(--ressort);
}
.parcours-etapes p {
  margin: 0;
  color: var(--c-encre);
}
@media (min-width: 1024px) {
  .parcours-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }
  .parcours-boucle {
    position: sticky;
    top: calc(var(--entete-hauteur) + 40px);
    width: min(100%, 400px);
  }
}
@property --parcours-trace { syntax: "<number>"; inherits: true; initial-value: 1; }
.parcours-boucle {
  --parcours-piste: color-mix(in srgb, var(--trait) 32%, transparent);
}
.parcours-boucle > svg {
  position: relative;
}
.parcours-boucle > .parcours-piste {
  position: absolute;
  inset: 0;
  --trait: var(--parcours-piste);
  --point-affiche: none;
  --tirets: none;
  --decalage: 0;
}
.parcours-perles {
  z-index: 1;
}
.parcours-perles li {
  transition:
    background-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease;
}
.parcours-perles li,
.parcours-boucle.suit .parcours-perles li.allumee {
  background: var(--c-principal);
  color: var(--c-carte);
  box-shadow: 0 0 0 2px var(--c-carte);
}
.parcours-boucle.suit .parcours-perles li:not(.allumee) {
  background: var(--c-carte);
  color: var(--c-principal);
  box-shadow: 0 0 0 2px var(--c-principal);
}
.parcours-boucle.suit {
  --tirets: 101.5 200;
  --decalage: calc((1 - var(--parcours-trace)) * 101.5);
  --parcours-trace: 0;
}
.parcours-boucle.suit.en-marche {
  transition: --parcours-trace 700ms var(--mvt-trace);
}
.parcours-boucle.trace-une-fois {
  animation: parcours-trace 2400ms linear both;
}
.parcours-boucle.trace-une-fois .parcours-perles li {
  transition-delay: calc(var(--fraction, 0) * 2400ms);
}
@keyframes parcours-trace {
  from {
    --parcours-trace: 0;
  }
  to {
    --parcours-trace: 1;
  }
}
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}
body .form-card {
  --brand: var(--c-principal);
  --brand-dark: color-mix(in srgb, var(--c-principal) 78%, var(--c-encre));
  --aqua: var(--c-clair);
  --deep: var(--c-encre);
  --ice: var(--eclaire);
  --ink: var(--c-encre);
  --muted: var(--c-texte-second);
  --radius: calc(var(--rayon) + 4px);
  --shadow: var(--ombre-profonde);
  --shadow-hover: var(--ombre-appel);
  --police: var(--f-texte);
}
.contact-aparte {
  display: grid;
  gap: 4px;
}
.contact-titre {
  margin: 0 0 8px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.2;
  color: var(--c-carte);
  text-wrap: balance;
}
.contact-aparte > p:not(.contact-titre) {
  color: color-mix(in srgb, var(--c-carte) 84%, var(--c-clair));
}
:is(.contact-aparte, .recrutement-candidature) a {
  color: var(--c-accent);
}
.contact-aparte :focus-visible {
  outline-color: var(--c-carte);
}
.contact-aparte > .etape-captures {
  position: relative;
  margin-top: clamp(16px, 3vw, 40px);
  padding: 4% 0 14%;
}
@media (min-width: 1024px) {
  .contact-aparte {
    position: sticky;
    top: calc(var(--entete-hauteur) + 40px);
  }
}
.recrutement-grille {
  display: grid;
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
}
.recrutement-grille .chapitre {
  margin-bottom: 0;
}
.recrutement-boucle {
  width: clamp(88px, 16vw, 220px);
  aspect-ratio: 1;
  overflow: visible;
  --trait: var(--c-principal);
}
@media (min-width: 700px) {
  .recrutement-grille {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.recrutement-candidature-grille .chapitre {
  margin-bottom: 0;
}
.recrutement-adresse {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  overflow-wrap: anywhere;
}
.entete-page .raccordements {
  max-width: 62ch;
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--c-carte) 86%, var(--c-principal));
}
.legende-etats {
  margin-top: 28px;
  width: fit-content;
  max-width: 100%;
}
.fonctions {
  display: grid;
  gap: 24px;
  padding-bottom: var(--section);
}
.sommaire {
  position: sticky;
  top: calc(var(--entete-hauteur) - 1px);
  z-index: 20;
  margin-inline: calc(-1 * var(--gouttiere));
  padding: 10px var(--gouttiere);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--voile);
  border-bottom: 1px solid var(--filet);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sommaire::-webkit-scrollbar {
  display: none;
}
.sommaire-boucle {
  display: none;
}
.sommaire ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sommaire a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--filet);
  background: var(--c-carte);
  color: var(--c-encre);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sommaire a:hover {
  border-color: var(--c-principal);
  color: var(--c-principal);
}
.sommaire a[aria-current=true] {
  background: var(--c-principal);
  border-color: var(--c-principal);
  color: var(--c-carte);
}
.fonctions-contenu {
  display: grid;
  gap: clamp(56px, 8vw, 96px);
  min-width: 0;
}
.fonctions-contenu > section,
.fonctions-contenu h3[id] {
  scroll-margin-top: calc(var(--entete-hauteur) + 72px);
}
.fonctions-contenu .chapitre {
  margin-bottom: 28px;
}
.fonctions-contenu h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  max-width: 24ch;
}
@media (min-width: 1024px) {
  .fonctions {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .sommaire {
    top: calc(var(--entete-hauteur) + 24px);
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .sommaire-boucle {
    display: block;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    --trait: var(--c-principal);
    --point: var(--c-accent);
  }
  .sommaire ul {
    flex-direction: column;
    gap: 2px;
  }
  .sommaire a {
    padding: 7px 12px;
    border-color: transparent;
    background: none;
    white-space: normal;
  }
  .fonctions-contenu > section,
  .fonctions-contenu h3[id] {
    scroll-margin-top: calc(var(--entete-hauteur) + 24px);
  }
}
.fonctions-liste {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bande-nuit,
.section-douce {
  --bande: var(--nuit);
  background: var(--nuit);
  color: var(--c-carte);
  --encre-surtitre: var(--c-accent);
}
.bande-bleue {
  --bande: var(--c-principal);
  background: var(--c-principal);
  color: var(--c-carte);
}
:is(.bande-nuit, .section-douce) .surtitre {
  color: var(--encre-surtitre);
}
:is(.bande-nuit, .bande-bleue, .section-douce) :is(.chapitre > p:not(.surtitre), .scene-texte > p:not(.surtitre), .scene-texte > :is(ul, ol) > li, .note-tableau) {
  color: var(--encre-douce);
}
:is(.bande-nuit, .bande-bleue, .section-douce) .lien-fleche {
  color: var(--encre-vive);
}
:is(.bande-nuit, .bande-bleue, .section-douce) .parcours-boucle {
  --trait: var(--encre-vive);
}
.scene {
  padding-block: clamp(56px, 8vw, 112px);
  overflow: clip;
}
.scene-grille {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.scene h2 {
  font-size: clamp(1.875rem, 3.8vw, 3rem);
  max-width: 20ch;
}
.scene-texte > p:not(.surtitre) {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
}
.scene-texte p:last-child {
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .scene-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .scene-inverse {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .scene-inverse > .scene-texte {
    order: 2;
  }
}
.croisement {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
}
.croisement .glyphe {
  width: 1.5em;
  height: 1.5em;
  --trait: var(--c-carte);
  --point: var(--c-accent);
}
.croisement-depart,
.croisement-pose {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  margin: 0;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  font: 600 clamp(.9375rem, 1.4vw, 1.0625rem)/1.2 var(--f-titre);
}
.croisement-depart {
  background: color-mix(in srgb, var(--c-carte) 12%, transparent);
}
.croisement-pose {
  justify-self: end;
  background: var(--c-carte);
  color: var(--c-encre);
  box-shadow: var(--ombre-profonde), 0 0 0 3px var(--c-accent);
}
.croisement-pose .glyphe {
  --trait: var(--c-principal);
}
.acteurs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.acteur {
  padding: clamp(10px, 1.4vw, 16px);
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  color: var(--c-encre);
  box-shadow: var(--ombre-profonde);
  rotate: -2deg;
}
.acteur:nth-child(2) {
  rotate: 1.5deg;
  translate: 0 14px;
}
.acteur-nom {
  margin: 0 0 10px;
  font: 600 clamp(.875rem, 1.3vw, 1rem)/1.2 var(--f-titre);
  color: var(--c-principal);
}
.croisement .dates {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.croisement .date {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--filet-carte);
  font-size: clamp(.8125rem, 1.15vw, .9375rem);
  font-weight: 600;
  white-space: nowrap;
}
.croisement .date::before {
  content: "";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 5px;
  border: 2px solid var(--filet);
  color: var(--c-carte);
  font-size: .875em;
  line-height: 1;
}
.croisement .coche::before {
  content: "✓";
  background: var(--c-principal);
  border-color: var(--c-principal);
}
.croisement .date:not(.commune) {
  opacity: .5;
}
.croisement .commune {
  background: var(--fond-inedit);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-accent);
}
.anime .croisement.vu .acteur {
  transition: opacity 500ms ease calc(var(--i) * 160ms), translate 800ms var(--ressort) calc(var(--i) * 160ms);
}
.anime .croisement:not(.vu) .acteur {
  opacity: 0;
  translate: 0 32px;
}
.anime .croisement.vu .coche::before {
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    scale 500ms var(--ressort);
  transition-delay: calc(900ms + var(--j) * 260ms);
}
.anime .croisement:not(.vu) .coche::before {
  background-color: transparent;
  border-color: var(--filet);
  color: transparent;
  scale: .5;
}
.anime .croisement.vu .date {
  transition:
    opacity 500ms ease 2.7s,
    background-color 400ms ease 2.7s,
    border-color 400ms ease 2.7s,
    box-shadow 600ms var(--ressort) 2.7s;
}
.anime .croisement:not(.vu) .date {
  opacity: 1;
  background-color: transparent;
  border-color: var(--filet-carte);
  box-shadow: none;
}
.anime .croisement.vu .croisement-pose {
  transition: opacity 400ms ease 3.2s, scale 800ms var(--ressort) 3.2s;
}
.anime .croisement:not(.vu) .croisement-pose {
  opacity: 0;
  scale: .5;
}
@media (max-width: 559px) {
  .acteurs {
    grid-template-columns: minmax(0, 1fr);
  }
  .acteur,
  .acteur:nth-child(2) {
    rotate: none;
    translate: none;
  }
  .croisement .dates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .croisement .date {
    gap: 4px;
    padding: 5px 4px;
    font-size: .75rem;
  }
}
.annulation {
  display: grid;
  gap: 18px;
  align-items: center;
}
.an-jour {
  padding: 16px;
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  color: var(--c-encre);
  box-shadow: var(--ombre-profonde);
  rotate: -2deg;
}
.an-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.an-tete p {
  margin: 0;
  font: 600 1rem/1.2 var(--f-titre);
  color: var(--c-principal);
}
.an-bouton {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--c-principal);
  background: var(--c-principal);
  color: var(--c-carte);
  font: 700 .8125rem/1.2 var(--f-texte);
}
.an-rdv {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.an-rdv li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--rayon-petit);
  border-left: 4px solid var(--c-texte-second);
  background: var(--fond-doux);
  font-size: .9375rem;
}
.an-rdv b,
.an-rdv span {
  text-decoration: line-through;
  text-decoration-color: var(--c-texte-second);
  text-decoration-thickness: 2px;
}
.an-rdv b {
  font-variant-numeric: tabular-nums;
}
.an-rdv span {
  flex: 1;
  min-width: 0;
  color: var(--c-texte-second);
}
.an-rdv em {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fond-inedit);
  font: normal 700 .75rem/1.6 var(--f-texte);
}
.an-suite {
  display: grid;
  gap: 14px;
}
.an-message {
  margin: 0;
  padding: 14px 16px;
  border-radius: 18px 18px 18px 4px;
  background: var(--c-carte);
  color: var(--c-encre);
  box-shadow: var(--ombre-profonde);
  font-size: .9375rem;
  line-height: 1.45;
  rotate: 1.5deg;
}
.an-canal {
  display: block;
  margin-bottom: 4px;
  font: 700 .75rem/1.2 var(--f-texte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-principal);
}
.an-bilan {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  margin: 0;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  background: var(--c-carte);
  color: var(--c-encre);
  font: 600 .9375rem/1.2 var(--f-titre);
  box-shadow: var(--ombre-profonde), 0 0 0 3px var(--c-accent);
}
.an-bilan .glyphe {
  width: 1.5em;
  height: 1.5em;
  --trait: var(--c-principal);
  --point: var(--c-accent);
}
@media (min-width: 560px) {
  .annulation {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  }
}
.anime .annulation.vu .an-bouton {
  transition:
    background-color 250ms ease 600ms,
    color 250ms ease 600ms,
    scale 500ms var(--ressort) 600ms;
}
.anime .annulation:not(.vu) .an-bouton {
  background-color: transparent;
  color: var(--c-principal);
  scale: 1.08;
}
.anime .annulation.vu .an-rdv li {
  transition: border-color 300ms ease calc(1.1s + var(--i) * 350ms);
}
.anime .annulation:not(.vu) .an-rdv li {
  border-left-color: var(--c-principal);
}
.anime .annulation.vu :is(.an-rdv b, .an-rdv span) {
  transition: text-decoration-color 300ms ease calc(1.1s + var(--i) * 350ms), color 300ms ease calc(1.1s + var(--i) * 350ms);
}
.anime .annulation:not(.vu) :is(.an-rdv b, .an-rdv span) {
  text-decoration-color: transparent;
  color: var(--c-encre);
}
.anime .annulation.vu .an-rdv em {
  transition: opacity 300ms ease calc(1.1s + var(--i) * 350ms), scale 500ms var(--ressort) calc(1.1s + var(--i) * 350ms);
}
.anime .annulation:not(.vu) .an-rdv em {
  opacity: 0;
  scale: .4;
}
.anime .annulation.vu .an-message {
  transition: opacity 500ms ease 2.7s, translate 800ms var(--ressort) 2.7s;
}
.anime .annulation:not(.vu) .an-message {
  opacity: 0;
  translate: 0 28px;
}
.anime .annulation.vu .an-bilan {
  transition: opacity 400ms ease 3.3s, scale 800ms var(--ressort) 3.3s;
}
.anime .annulation:not(.vu) .an-bilan {
  opacity: 0;
  scale: .5;
}
.palmares {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rang-inedit;
}
.palmares li {
  counter-increment: rang-inedit;
}
.palmares a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 14px;
  height: 100%;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--tuile-nuit);
  border: 1px solid color-mix(in srgb, var(--c-carte) 10%, transparent);
  color: var(--c-carte);
  text-decoration: none;
  box-shadow: var(--ombre-profonde);
}
.palmares a::before {
  content: counter(rang-inedit);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  color: var(--c-accent);
  font: 600 1rem/1 var(--f-titre);
}
.palmares li:nth-child(-n+3) a::before {
  background: var(--c-accent);
  color: var(--c-encre);
}
.palmares strong {
  font: 600 1.0625rem/1.25 var(--f-titre);
}
.palmares span {
  font-size: .9375rem;
  color: color-mix(in srgb, var(--c-carte) 80%, var(--c-clair));
}
.palmares a:hover strong,
.palmares a:focus-visible strong {
  text-decoration: underline;
}
.anime .palmares a {
  transition: translate 500ms var(--ressort), box-shadow 300ms ease;
}
.anime .palmares a:hover,
.anime .palmares a:focus-visible {
  translate: 0 -4px;
  box-shadow: var(--ombre-profonde), 0 0 0 1px var(--c-accent);
}
@media (min-width: 700px) {
  .palmares {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (min-width: 1100px) {
  .palmares {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fonctions-en-bandes {
  padding-bottom: 0;
}
.fonctions-en-bandes .fonctions-contenu {
  gap: 0;
}
.fonctions-en-bandes .fonctions-contenu > section,
.references > .reference {
  padding-block: clamp(48px, 7vw, 96px);
  background: none;
  border-image: conic-gradient(var(--bande, var(--c-fond)) 0 0) fill 0 / / 0 100vw;
}
@media (min-width: 1024px) {
  .fonctions-en-bandes .sommaire {
    margin-top: clamp(48px, 7vw, 96px);
    padding: 18px 12px;
    border-radius: var(--rayon);
    background: var(--c-carte);
    box-shadow: var(--ombre-profonde);
  }
}
:is(.bande-nuit, .section-douce) .fonction {
  background: var(--tuile-nuit);
  border-color: color-mix(in srgb, var(--c-carte) 10%, transparent);
  color: var(--c-carte);
  box-shadow: var(--ombre-profonde);
  --encre-vive: var(--c-carte);
  --encre-douce: color-mix(in srgb, var(--c-carte) 82%, var(--c-clair));
  --encre-surtitre: var(--c-accent);
}
:is(.bande-nuit, .section-douce) .fonction:has(> .etat-inedit) {
  background: var(--tuile-nuit);
  border-color: var(--c-accent);
}
:is(.bande-nuit, .section-douce) .fonction :is(h3, h4) {
  color: var(--c-carte);
}
:is(.bande-nuit, .section-douce) .fonction p {
  color: color-mix(in srgb, var(--c-carte) 82%, var(--c-clair));
}
:is(.bande-nuit, .section-douce) .fonction a {
  color: var(--c-accent);
}
:is(.bande-nuit, .section-douce) .fonction :focus-visible {
  outline-color: var(--c-carte);
}
.idee {
  display: grid;
  gap: 16px 28px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: calc(var(--rayon) + 8px);
  background: var(--c-carte);
  color: var(--c-encre);
  border: 2px dashed color-mix(in srgb, var(--c-principal) 35%, var(--c-carte));
  box-shadow: var(--ombre-profonde);
}
.idee .glyphe-carte {
  width: 64px;
  height: 64px;
}
.idee h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  max-width: 22ch;
}
.idee-formulaire {
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin-top: 20px;
}
.idee-formulaire .bouton {
  justify-self: start;
}
.idee-formulaire .aide-champ {
  margin: 0;
}
@media (min-width: 700px) {
  .idee {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.scene-texte .fonctions-liste {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 28px;
}
.module-jauge {
  display: grid;
  place-items: center;
}
.module-jauge .jauge-entete {
  width: clamp(220px, 30vw, 340px);
}
.sms-scene {
  display: grid;
  place-items: center;
  padding: 2% 0 4%;
}
.sms-telephone {
  position: relative;
  width: min(100%, 340px);
  padding: 34px 14px 26px;
  rotate: -4deg;
}
.scene:hover .sms-telephone {
  rotate: 0deg;
}
.anime .sms-telephone {
  transition: rotate 900ms var(--ressort);
}
.sms-expediteur {
  margin: 0 0 16px;
  text-align: center;
  font: 600 .9375rem/1.2 var(--f-titre);
  color: var(--c-carte);
}
.sms-fil {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sms-fil li {
  max-width: 90%;
  padding: 10px 14px 12px;
  border-radius: 18px 18px 18px 4px;
  background: var(--c-carte);
  color: var(--c-encre);
  font-size: .875rem;
  line-height: 1.45;
  box-shadow: var(--ombre-legere);
}
.sms-quand {
  display: block;
  margin-bottom: 3px;
  font: 700 .6875rem/1.2 var(--f-texte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-principal);
}
.sms-fil u {
  color: var(--c-principal);
  text-underline-offset: .15em;
}
.anime .sms-scene.vu .sms-fil li {
  transition:
    opacity 450ms ease calc(500ms + var(--i) * 1000ms),
    translate 800ms var(--ressort) calc(500ms + var(--i) * 1000ms),
    scale 800ms var(--ressort) calc(500ms + var(--i) * 1000ms);
}
.anime .sms-scene:not(.vu) .sms-fil li {
  opacity: 0;
  translate: 0 28px;
  scale: .86;
}
.appel-scene {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 2% 0 4%;
}
.appel-telephone {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  width: clamp(150px, 42%, 210px);
  aspect-ratio: 9 / 16;
  padding: 34px 12px 26px;
  rotate: -4deg;
  color: var(--c-carte);
  text-align: center;
}
.scene:hover .appel-telephone {
  rotate: 0deg;
}
.anime .appel-telephone {
  transition: rotate 900ms var(--ressort);
}
.appel-anneau {
  position: relative;
  display: grid;
}
.appel-combine {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 12px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-encre);
  stroke-width: 2.2;
}
.appel-onde {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  opacity: 0;
}
.appel-numero {
  margin: 10px 0 0;
  font: 600 1rem/1.2 var(--f-titre);
  font-variant-numeric: tabular-nums;
}
.appel-sonne {
  margin: 0;
  font: 700 .6875rem/1.2 var(--f-texte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.appel-bureau {
  display: grid;
  gap: 10px;
  justify-self: end;
  width: min(88%, 330px);
  margin-top: -46px;
  color: var(--c-encre);
}
.appel-fiche {
  transform-origin: top center;
}
.appel-bandeau,
.appel-fiche {
  padding: 14px 16px;
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  box-shadow: var(--ombre-profonde);
}
.appel-bandeau {
  position: relative;
  z-index: 2;
  border-left: 4px solid var(--c-accent);
}
.appel-titre,
.appel-fiche-chapitre {
  margin: 0;
  font: 700 .6875rem/1.2 var(--f-texte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-principal);
}
.appel-nom {
  margin: 4px 0 0;
  font: 600 1.0625rem/1.25 var(--f-titre);
}
.appel-detail,
.appel-fiche-sous {
  margin: 2px 0 0;
  font-size: .8125rem;
  color: var(--c-texte-second);
}
.appel-bouton {
  display: block;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--rayon-petit);
  background: var(--c-principal);
  color: var(--c-carte);
  font: 600 .875rem/1.2 var(--f-titre);
  text-align: center;
}
.appel-fiche-titre {
  margin: 0;
  font: 600 1rem/1.25 var(--f-titre);
  color: var(--c-principal);
}
.appel-fiche-chapitre {
  margin-top: 12px;
  color: var(--c-texte-second);
}
.appel-journal {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
}
.appel-journal li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--fond-doux);
}
.appel-journal li:first-child {
  background: var(--fond-inedit);
  font-weight: 600;
}
@media (min-width: 560px) {
  .appel-scene {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
  }
  .appel-telephone {
    width: min(100%, 210px);
    justify-self: end;
  }
  .appel-bureau {
    justify-self: start;
    width: min(100%, 330px);
    margin: 0 0 0 -24px;
  }
}
@keyframes appel-vibre {
  0%, 100% {
    rotate: -4deg;
  }
  20%, 60% {
    rotate: -7deg;
  }
  40%, 80% {
    rotate: -1deg;
  }
}
@keyframes appel-onde {
  from {
    opacity: .7;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 2.2;
  }
}
@keyframes appel-appui {
  50% {
    scale: .94;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent) 45%, transparent);
  }
}
.anime .appel-scene.vu .appel-telephone {
  animation: appel-vibre 520ms ease-in-out 300ms 3;
}
.anime .appel-scene.vu .appel-onde {
  animation: appel-onde 1300ms ease-out 300ms 2;
}
.anime .appel-scene.vu .appel-onde-deux {
  animation-delay: 950ms;
}
.anime .appel-scene.vu .appel-bandeau {
  transition: opacity 450ms ease 1200ms, translate 800ms var(--ressort) 1200ms;
}
.anime .appel-scene.vu .appel-bouton {
  animation: appel-appui 420ms ease 2500ms 1;
}
.anime .appel-scene.vu .appel-fiche {
  transition: opacity 400ms ease 2900ms, scale 700ms var(--ressort) 2900ms;
}
.anime .appel-scene:not(.vu) .appel-bandeau {
  opacity: 0;
  translate: 40px 0;
}
.anime .appel-scene:not(.vu) .appel-fiche {
  opacity: 0;
  scale: 1 .4;
}
.connecteurs-tuiles {
  gap: 16px;
}
@media (min-width: 700px) {
  .connecteurs-tuiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .connecteurs-tuiles:has(> :nth-child(3n):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fonction.connecteur {
  position: relative;
  padding-right: 66px;
}
.connecteur-picto {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  color: var(--c-principal);
}
:is(.bande-nuit, .section-douce) .connecteur-picto {
  color: var(--c-accent);
}
.connecteur:has(> .etat-a-venir) .connecteur-picto {
  color: var(--c-texte-second);
}
.anime .connecteur-picto {
  transition: transform 600ms var(--ressort);
}
.anime .connecteur:hover .connecteur-picto {
  transform: scale(1.2) rotate(-8deg);
}
.journee-tete {
  margin-bottom: clamp(28px, 4vw, 48px);
}
.journee-tete h2 {
  margin: 0 0 6px;
}
.journee-tete p {
  margin: 0;
  color: var(--c-texte-second);
}
.journee.sur-fonce .journee-tete p {
  color: color-mix(in srgb, var(--c-carte) 84%, var(--c-clair));
}
.moments {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.journee-moment {
  display: grid;
  gap: 6px 48px;
  align-items: center;
}
.moment-quand {
  margin: 0;
}
.moment-texte {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.3;
}
.journee-moment > .cadre {
  margin-top: 20px;
  width: 100%;
  transform: perspective(1400px) rotateY(-10deg) rotateX(5deg) rotateZ(-1.5deg);
}
.journee-moment:nth-child(even) > .cadre {
  transform: perspective(1400px) rotateY(10deg) rotateX(5deg) rotateZ(1.5deg);
}
.journee-moment > .cadre-telephone {
  justify-self: center;
  width: min(78%, 270px);
}
.journee-moment > .cadre-plan {
  justify-self: center;
  width: fit-content;
  max-width: 100%;
}
@media (min-width: 1100px) {
  .journee-moment {
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
    grid-template-rows: 1fr auto 1fr;
  }
  .moment-quand {
    grid-row: 1;
    align-self: end;
  }
  .moment-texte {
    grid-row: 2;
  }
  .journee-moment > .cadre {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
  }
  .journee-moment:nth-child(even) {
    grid-template-columns: minmax(0, 1.38fr) minmax(0, .62fr);
  }
  .journee-moment:nth-child(even) > :not(.cadre) {
    grid-column: 2;
  }
  .journee-moment:nth-child(even) > .cadre {
    grid-column: 1;
  }
}
.fonction {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px 24px 24px;
}
.fonction > .glyphe {
  width: 46px;
  height: 46px;
  margin-top: -4px;
}
.fonction :is(h3, h4) {
  margin: 0 0 .3em;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
}
.fonction p {
  margin: 0;
}
@media (min-width: 1200px) {
  .fonctions-liste {
    grid-template-columns: 1fr 1fr;
  }
}
.etiquette-propose,
.etiquette-a-venir,
.etiquette-inedit {
  display: inline-block;
  position: relative;
  margin-left: 6px;
  padding: 1px 10px;
  border-radius: 999px;
  color: var(--c-encre);
  font-family: var(--f-texte);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: .12em;
}
.etiquette-inedit {
  padding-left: 22px;
  background: var(--fond-inedit);
}
.etiquette-propose {
  background: var(--eclaire);
  color: var(--c-principal);
}
.etiquette-a-venir {
  background: var(--piste);
  color: var(--c-principal);
}
.legende-etats .etiquette-propose {
  margin-left: 0;
}
.etiquette-inedit::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--c-accent);
}
.comparatif-cadre {
  overflow: hidden;
  border-radius: var(--rayon);
}
.table-comparatif {
  table-layout: fixed;
}
.table-comparatif thead th:nth-child(2) {
  width: 18%;
  text-align: center;
}
.table-comparatif thead th:nth-child(3) {
  width: 22%;
  text-align: center;
}
.table-comparatif tbody th {
  overflow-wrap: break-word;
}
.table-comparatif td {
  text-align: center;
  color: var(--c-texte-second);
}
.table-comparatif td:nth-child(2) {
  color: var(--c-principal);
  font-size: 1.2rem;
}
.table-comparatif .ligne-inedite > * {
  background: color-mix(in srgb, var(--c-accent) 9%, var(--c-carte));
}
.note-tableau {
  margin: 14px 0 0;
  font-size: .9375rem;
  color: var(--c-texte-second);
}
@media (max-width: 699px) {
  .table-comparatif th,
  .table-comparatif td {
    padding: 10px 6px;
  }
  .table-comparatif thead th {
    font-size: .8rem;
  }
  .table-comparatif tbody th {
    font-size: .95rem;
  }
  .table-comparatif thead th:nth-child(2) {
    width: 4.6rem;
  }
  .table-comparatif thead th:nth-child(3) {
    width: 5.8rem;
  }
}
.pack-exemple {
  margin: 18px 0 20px;
}
.pack-exemple .cadre-navigateur {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.pack-exemple .capture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.pack-exemple figcaption {
  margin-top: 10px;
  font-size: .9375rem;
  color: var(--c-texte-second);
}
.pack-miniature {
  display: block;
  width: 400%;
  height: 400%;
  border: 0;
  transform: scale(.25);
  transform-origin: 0 0;
  pointer-events: none;
}
.cartes[data-offre-site] {
  align-items: center;
  margin-top: 28px;
}
.carte[data-pack=XL] {
  position: relative;
  padding-block: clamp(32px, 4vw, 44px);
  background: var(--nuit-eclairee);
  color: var(--c-carte);
  --encre-vive: var(--c-carte);
  --encre-douce: color-mix(in srgb, var(--c-carte) 82%, var(--c-clair));
  --encre-surtitre: var(--c-accent);
  border-color: transparent;
  box-shadow: var(--ombre-profonde);
}
.carte[data-pack=XL] :is(.titre-carte, .formule-prix, .formule-offerte) {
  color: var(--c-carte);
}
.carte[data-pack=XL] :is(.formule-nom, .formule-mise, .pack-exemple figcaption) {
  color: color-mix(in srgb, var(--c-carte) 78%, var(--c-clair));
}
.carte[data-pack=XL] a {
  color: var(--c-accent);
}
.carte[data-pack=XL] .liste-pack li::marker {
  color: var(--c-accent);
}
.carte[data-pack=XL] :focus-visible {
  outline-color: var(--c-carte);
}
.carte[data-pack=XL]::before {
  content: "Le plus complet";
  position: absolute;
  top: 18px;
  right: -8px;
  padding: 6px 14px;
  border-radius: 6px 0 0 6px;
  background: var(--c-accent);
  color: var(--c-encre);
  font: 600 .875rem/1 var(--f-titre);
  box-shadow: var(--ombre-legere);
}
@media (min-width: 700px) {
  .carte[data-pack=XL] {
    transform: translateY(-14px) scale(1.03);
  }
  .carte[data-pack=XL]:hover {
    transform: translateY(-18px) scale(1.03);
  }
}
[data-offre-site] .pack-exemple .cadre {
  transform: perspective(1400px) rotateY(14deg) rotateX(6deg) rotateZ(-1.5deg);
}
[data-offre-site] [data-pack=XL] .pack-exemple .cadre {
  transform: perspective(1400px) rotateY(-14deg) rotateX(6deg) rotateZ(1.5deg);
}
[data-offre-site] .carte:is(:hover, :focus-within) .pack-exemple .cadre {
  transform: none;
}
[data-offre-site] .pack-exemple figcaption {
  margin-top: 22px;
}
.anime [data-offre-site] .pack-exemple .cadre {
  transition: transform 900ms var(--ressort);
}
.liste-pack {
  display: grid;
  gap: 6px;
  margin: 0 0 1em;
  padding: 0 0 0 1.1em;
}
.liste-pack li::marker {
  color: var(--c-principal);
}
p.packs-suite {
  display: block;
  margin-top: 24px;
}
.faq {
  display: grid;
  gap: 12px;
  max-width: 860px;
}
.faq details {
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  border: 1px solid var(--filet);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 20px;
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--c-principal);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 200ms ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin: 0;
  padding: 0 20px 18px;
}
.champ label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: .9375rem;
}
.champ input,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--filet-carte);
  border-radius: var(--rayon-petit);
  background: var(--c-carte);
  color: var(--c-encre);
  font: inherit;
}
.champ input:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--c-principal);
  outline-offset: 1px;
}
.champ-obligatoire::after {
  content: " *";
  color: var(--c-principal);
}
.aide-champ {
  font-size: .9375rem;
  color: var(--c-texte-second);
}
.page-texte {
  max-width: 74ch;
}
.page-texte h2 {
  max-width: none;
  margin-top: 1.6em;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
}
.numero-telephone {
  white-space: nowrap;
}
.entete-page .contact-telephone {
  max-width: 46ch;
  margin: 20px 0 0;
  font-size: 1.125rem;
  color: var(--c-carte);
}
.contact-telephone .numero-telephone {
  font-weight: 700;
}
.a-completer {
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px dashed var(--c-texte-second);
  background: var(--fond-inedit);
  color: var(--c-encre);
  font-weight: 700;
}
.pied {
  padding-block: clamp(48px, 7vw, 80px) 28px;
  background: var(--c-encre);
  color: var(--pied-texte);
}
.pied a {
  color: var(--pied-texte);
  text-decoration: none;
}
.pied a:hover {
  color: var(--c-carte);
  text-decoration: underline;
}
.pied a[aria-current=page] {
  color: var(--c-carte);
}
.pied-grille {
  display: grid;
  gap: 32px;
  margin-bottom: 40px;
}
.pied .logo {
  display: inline-block;
}
.pied .logo img {
  height: 36px;
  width: auto;
  margin-bottom: 14px;
}
.pied-marque p {
  margin: 0;
  max-width: 32ch;
}
.pied-titre {
  max-width: none;
  margin: 0 0 12px;
  font-family: var(--f-texte);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-carte);
}
.pied ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied li {
  margin-bottom: 8px;
}
.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pied-filet);
  font-size: .875rem;
}
.pied-bas p {
  margin: 0;
}
.pied-bas .pied-marques {
  flex-basis: 100%;
  font-size: .8125rem;
}
.pied .a-completer {
  background: transparent;
  border-color: var(--pied-texte);
  color: var(--c-carte);
}
@media (min-width: 700px) {
  .pied-grille {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .pied-grille {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.atouts {
  padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 104px);
}
.atouts .filigrane {
  width: min(90vw, 560px);
  top: -55%;
  right: -14%;
}
.atouts-cadre {
  position: relative;
  display: grid;
  gap: 14px 40px;
  align-items: end;
}
.atouts .chiffre-atouts {
  grid-column: 1 / -1;
}
.atouts-ligne {
  margin: 0;
  color: color-mix(in srgb, var(--c-carte) 84%, var(--c-clair));
}
@media (min-width: 1024px) {
  .atouts-cadre {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .atouts-ligne {
    grid-column: 1;
  }
  .atouts .lien-fleche {
    grid-column: 2;
    grid-row: 2;
    font-size: 1.125rem;
  }
}
section:has(> .conteneur > .bande-demo):has(+ .atouts) {
  padding-bottom: clamp(48px, 7vw, 88px);
}
@media (max-width: 699px) {
  .pack {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 16px;
    padding: 20px;
    align-items: start;
  }
  .pack .glyphe-carte {
    grid-row: span 3;
    width: 40px;
    height: 40px;
    margin: 0;
  }
  .pack > :not(.glyphe-carte) {
    grid-column: 2;
  }
  .pack h3 {
    margin: 0 0 .25em;
    font-size: 1.125rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
.lancement {
  scroll-margin-top: calc(var(--entete-hauteur) + 16px);
}
.lancement-grille {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .lancement-grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
.lancement h2 {
  max-width: 20ch;
  font-size: clamp(1.875rem, 3.8vw, 3rem);
}
.lancement-liste {
  display: grid;
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.lancement-liste li {
  position: relative;
  max-width: 52ch;
  padding-left: 30px;
  color: color-mix(in srgb, var(--c-carte) 84%, var(--c-clair));
}
.lancement-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3.5px solid var(--c-clair);
}
.lancement-liste strong {
  color: var(--c-carte);
}
.lancement-action {
  margin: 0;
}
.lancement-places {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: clamp(10px, 1.8vw, 20px);
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.lancement-places li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-carte) 7%, transparent);
}
.lancement-places .glyphe {
  width: 60%;
  height: auto;
  aspect-ratio: 1;
  --trait: color-mix(in srgb, var(--c-carte) 45%, transparent);
  --point: transparent;
}
.lancement-places .prise {
  background: transparent;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-carte) 22%, transparent) inset;
}
.lancement-places .prise .glyphe {
  --trait: color-mix(in srgb, var(--c-carte) 55%, transparent);
  --point: color-mix(in srgb, var(--c-carte) 55%, transparent);
}
.lancement-places .libre {
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
  box-shadow: 0 0 0 2px var(--c-accent) inset, 0 14px 28px -14px var(--c-accent);
}
.lancement-places .libre .glyphe {
  --trait: var(--c-accent);
  --point: var(--c-accent);
}
.lancement-reste {
  margin: 24px 0 0;
  text-align: center;
  font: 600 clamp(1.375rem, 2.6vw, 1.875rem)/1.2 var(--f-titre);
  color: var(--c-accent);
}
.formule-offerte {
  margin-top: -6px;
  font-weight: 700;
  color: var(--c-principal);
}
.entete-tunnel-grille {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.entete-tunnel-ecrans {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
  aspect-ratio: 16 / 11;
}
.tunnel-ecran {
  position: absolute;
}
.tunnel-ecran-bureau {
  width: 84%;
  right: 0;
  top: 2%;
}
.tunnel-ecran-telephone {
  width: 27%;
  left: 2%;
  bottom: -4%;
  z-index: 1;
}
.tunnel-ecran-bureau .cadre {
  transform: perspective(1200px) rotateY(-16deg) rotateX(7deg) rotateZ(2deg);
}
.tunnel-ecran-telephone .cadre {
  transform: rotate(-6deg);
}
.anime .entete-tunnel .cadre {
  transition: transform 900ms var(--ressort);
}
.anime .entete-tunnel-ecrans:hover .cadre {
  transform: none;
}
@media (min-width: 960px) {
  .entete-tunnel-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.tunnel-section {
  padding-block: clamp(40px, 7vw, 96px);
  overflow-x: clip;
}
.tunnel-grille {
  display: grid;
  gap: 20px;
  align-items: start;
}
@media (min-width: 960px) {
  .tunnel-grille:has(> .tunnel-boucle:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 400px);
    gap: clamp(32px, 4vw, 56px);
  }
  .tunnel {
    grid-column: 1;
    grid-row: 1;
  }
  .tunnel-carte {
    grid-column: 1;
    grid-row: 2;
  }
  .tunnel-boucle {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--entete-hauteur) + 24px);
  }
}
.tunnel {
  min-width: 0;
  padding: clamp(22px, 4.5vw, 48px);
  border-radius: var(--rayon);
  background: var(--c-carte);
  box-shadow: var(--ombre);
}
.pas + .pas {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--filet-carte);
}
html.js .tunnel.pret .pas + .pas {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.pas-rang {
  margin: 0 0 .6rem;
  font: 700 .8125rem/1.3 var(--f-texte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texte-second);
}
.pas h2 {
  max-width: none;
  margin-bottom: .3em;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
}
.pas h2:focus {
  outline: none;
}
.pas-chapeau {
  max-width: 56ch;
  margin-bottom: 26px;
  color: var(--c-texte-second);
}
.pas-champs {
  display: grid;
  gap: 20px;
}
.pas > .champ,
.pas > .tunnel-choix,
.pas > .tunnel-encart,
.pas > .tunnel-revue,
.pas-repli {
  margin-bottom: 22px;
}
.pas-deux {
  display: grid;
  gap: 20px;
}
@media (min-width: 640px) {
  .pas-deux {
    grid-template-columns: 1fr 1fr;
  }
  .pas-ville {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}
.facultatif {
  font-weight: 400;
  color: var(--c-texte-second);
}
fieldset.tunnel-choix {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.tunnel-choix legend {
  padding: 0;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: .9375rem;
}
.anime .pas.sort {
  animation: pas-sort 180ms ease-in both;
}
.anime .pas.entre {
  animation: pas-entre 640ms var(--ressort) both;
}
@keyframes pas-sort {
  to {
    opacity: 0;
    translate: calc(var(--sens, 1) * -36px) 0;
  }
}
@keyframes pas-entre {
  from {
    opacity: 0;
    translate: calc(var(--sens, 1) * 56px) 0;
  }
}
.anime .tunnel.secoue {
  animation: tunnel-secoue 420ms var(--ressort);
}
@keyframes tunnel-secoue {
  25% {
    translate: -8px 0;
  }
  55% {
    translate: 6px 0;
  }
  80% {
    translate: -3px 0;
  }
}
.tunnel-compteur {
  display: flex;
  align-items: center;
  gap: 12px;
}
.compteur-pas {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--c-principal);
  background: var(--c-carte);
  color: var(--c-principal);
  font: 600 1.75rem/1 var(--f-titre);
  cursor: pointer;
}
.compteur-pas:hover {
  background: var(--eclaire);
}
.compteur-pas:disabled {
  opacity: .35;
  cursor: default;
}
.anime .compteur-pas {
  transition: background-color 150ms ease, scale 300ms var(--ressort);
}
.anime .compteur-pas:not(:disabled):active {
  scale: .88;
}
.champ .tunnel-compteur input {
  width: 6.5rem;
  min-height: 56px;
  text-align: center;
  font: 600 1.75rem/1 var(--f-titre);
  color: var(--c-principal);
  -moz-appearance: textfield;
  appearance: textfield;
}
.tunnel-compteur input::-webkit-inner-spin-button,
.tunnel-compteur input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tunnel-tailles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.tunnel-tailles button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--filet-carte);
  background: var(--c-carte);
  color: var(--c-encre);
  font: 700 .9375rem/1 var(--f-texte);
  cursor: pointer;
}
.tunnel-tailles button:hover {
  border-color: var(--c-clair);
}
.tunnel-tailles button[aria-pressed=true] {
  border-color: var(--c-principal);
  background: var(--c-principal);
  color: var(--c-carte);
}
.anime .tunnel-tailles button {
  transition:
    background-color 200ms ease,
    color 200ms ease,
    scale 300ms var(--ressort);
}
.anime .tunnel-tailles button[aria-pressed=true] {
  scale: 1.08;
}
.choix {
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .choix-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {
  .choix-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choix-3 > :first-child {
    grid-column: 1 / -1;
  }
}
.choix-carte {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  align-content: start;
  padding: 16px 18px;
  border: 1.5px solid var(--filet-carte);
  border-radius: var(--rayon-moyen);
  background: var(--c-carte);
  cursor: pointer;
}
.choix-carte:hover {
  border-color: var(--c-clair);
}
.choix-carte:has(input:checked) {
  border-color: var(--c-principal);
  background: var(--eclaire);
  box-shadow: 0 0 0 1px var(--c-principal) inset;
}
.choix-carte:has(input:focus-visible) {
  outline: 3px solid var(--c-principal);
  outline-offset: 3px;
}
.choix-carte input {
  grid-row: span 4;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--c-principal);
}
.choix-carte input:focus-visible {
  outline: none;
}
.choix-carte > :not(input) {
  grid-column: 2;
}
.choix-glyphe {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
}
.choix-carte:has(.choix-glyphe) {
  padding-right: 52px;
}
.choix-nom {
  font: 600 1.0625rem/1.25 var(--f-titre);
  color: var(--c-encre);
}
.choix-info {
  font-size: .9375rem;
  color: var(--c-texte-second);
}
.choix-prix {
  font-weight: 700;
  color: var(--c-principal);
  font-variant-numeric: tabular-nums;
}
.choix-liste {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  font-size: .875rem;
  color: var(--c-encre);
}
.choix-liste > span {
  position: relative;
  padding-left: 16px;
}
.choix-liste > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--c-principal);
}
.choix-offre:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--fond-inedit);
  box-shadow: 0 0 0 1px var(--c-accent) inset;
}
.anime .choix-carte {
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    translate 300ms var(--ressort),
    box-shadow 200ms ease;
}
.anime .choix-carte:hover {
  translate: 0 -2px;
  box-shadow: var(--ombre-legere);
}
.anime .choix-carte:has(input:checked) .choix-glyphe {
  animation: choix-boucle 700ms var(--ressort);
}
@keyframes choix-boucle {
  from {
    rotate: -200deg;
    scale: .3;
  }
}
.tunnel-encart {
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--rayon-petit);
  background: var(--fond-doux);
  border-left: 4px solid var(--c-clair);
  font-size: .9375rem;
}
.tunnel-encart .lien-fleche {
  min-height: 36px;
}
.tunnel-encart-offre {
  background: var(--fond-inedit);
  border-left-color: var(--c-accent);
}
.tunnel-devis.allume {
  background: var(--fond-inedit);
  border-left-color: var(--c-accent);
  font-weight: 700;
}
.anime .tunnel-devis.allume {
  animation: pas-entre 640ms var(--ressort);
}
.tunnel-case {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 1rem;
  cursor: pointer;
}
.tunnel-case input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--c-principal);
}
.anime [data-si].ouvre {
  animation: tunnel-ouvre 520ms var(--ressort);
}
@keyframes tunnel-ouvre {
  from {
    opacity: 0;
    translate: 0 -10px;
  }
}
.champ-saisie {
  position: relative;
  display: block;
}
.champ-boucle {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  opacity: 0;
  --trait: var(--c-principal);
  --point: var(--c-accent);
  pointer-events: none;
}
.champ.juste .champ-boucle {
  opacity: 1;
}
.champ.juste .champ-saisie input {
  padding-right: 44px;
}
.anime .champ.juste .champ-boucle {
  animation: choix-boucle 600ms var(--ressort);
}
.tunnel-erreur {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--c-encre);
}
.tunnel-erreur::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-encre);
  font-size: .8125rem;
}
.en-erreur input:not([type=radio]):not([type=checkbox]) {
  border-color: var(--c-encre);
  border-width: 2px;
  background: var(--fond-inedit);
}
fieldset.en-erreur .choix-carte {
  border-color: var(--c-encre);
}
.tunnel-domaine {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tunnel-domaine > :not(.bouton) {
  flex: 1 1 11rem;
  min-width: 0;
}
.tunnel-domaine .bouton {
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: 1em;
  font-size: .9375rem;
}
.domaine-reponse {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 0;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--c-encre);
}
.domaine-reponse:empty {
  margin: 0;
}
.domaine-reponse .glyphe {
  width: 22px;
  height: 22px;
  margin-top: 1px;
}
.anime .domaine-reponse.cherche .glyphe {
  animation: domaine-cherche 1.1s linear infinite;
}
@keyframes domaine-cherche {
  to {
    rotate: 1turn;
  }
}
.aide-champ.domaine-registres {
  margin-top: 4px;
  font-size: .8125rem;
}
.tunnel-revue {
  display: grid;
  gap: 10px;
}
@media (min-width: 700px) {
  .tunnel-revue {
    grid-template-columns: 1fr 1fr;
  }
}
.revue-bloc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--filet-carte);
  border-radius: var(--rayon-moyen);
  background: var(--fond-doux);
}
.revue-bloc h3 {
  grid-column: 1;
  margin: 0 0 2px;
  font: 700 .75rem/1.3 var(--f-texte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texte-second);
}
.revue-bloc p {
  grid-column: 1;
  margin: 0;
  font-size: .9375rem;
  overflow-wrap: anywhere;
}
.revue-modifier {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: start;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--c-principal);
  font: 700 .9375rem/1 var(--f-texte);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.anime .tunnel-revue.joue .revue-bloc {
  animation: tunnel-ouvre 500ms var(--ressort) both;
}
.anime .tunnel-revue.joue .revue-bloc:nth-child(2) {
  animation-delay: 70ms;
}
.anime .tunnel-revue.joue .revue-bloc:nth-child(3) {
  animation-delay: 140ms;
}
.anime .tunnel-revue.joue .revue-bloc:nth-child(4) {
  animation-delay: 210ms;
}
.pas-nav {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--filet-carte);
}
.pas-nav .bouton {
  min-width: 12rem;
}
.pas-retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--c-principal);
  font: 700 1rem/1.2 var(--f-texte);
  text-decoration: none;
  cursor: pointer;
}
.pas-retour::before {
  content: "←";
}
.pas-retour:hover,
.pas-retour:focus-visible {
  text-decoration: underline;
}
.anime .pas-retour::before {
  transition: transform 150ms ease;
}
.anime .pas-retour:hover::before {
  transform: translateX(-4px);
}
.pas-envoi-aide {
  margin: 18px 0 0;
}
@media (max-width: 479px) {
  .pas-nav {
    justify-content: center;
  }
  .pas-nav .bouton {
    flex: 1 1 100%;
  }
}
.tunnel-boucle {
  display: grid;
  grid-template-columns: clamp(124px, 38vw, 160px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 3vw, 32px);
  border-radius: var(--rayon);
  background: var(--nuit-eclairee);
  color: var(--c-carte);
  box-shadow: var(--ombre-profonde);
}
@media (min-width: 960px) {
  .tunnel-boucle {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}
.tunnel-anneau {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
}
@media (min-width: 960px) {
  .tunnel-anneau {
    width: min(100%, 236px);
    margin-inline: auto;
  }
}
.tunnel-anneau > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tunnel-piste {
  --trait: color-mix(in srgb, var(--c-carte) 14%, transparent);
  --point: transparent;
}
.tunnel-anneau .jauge-boucle {
  --note: 100;
  --trait: var(--c-carte);
}
.anime .tunnel-anneau .jauge-boucle {
  transition: --jauge 900ms var(--mvt-trace);
}
.tunnel-perles {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
html.js .tunnel-perles.posees {
  display: block;
}
.tunnel-perles li {
  position: absolute;
  display: grid;
  place-items: center;
  width: 11cqi;
  height: 11cqi;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--c-carte) 50%, transparent);
  background: var(--nuit);
  color: color-mix(in srgb, var(--c-carte) 75%, transparent);
  font: 600 max(9px, 5.4cqi)/1 var(--f-titre);
}
.tunnel-perles li.atteinte {
  border-style: solid;
  border-color: var(--c-carte);
  background: var(--c-carte);
  color: var(--c-principal);
}
.tunnel-perles li.courante {
  border-style: solid;
  border-color: var(--c-carte);
  background: var(--c-carte);
  color: var(--c-principal);
  scale: 1.35;
  box-shadow: 0 0 0 2.5cqi color-mix(in srgb, var(--c-carte) 25%, transparent);
}
.anime .tunnel-perles li {
  transition:
    scale 600ms var(--ressort),
    background-color 300ms ease,
    color 300ms ease,
    box-shadow 600ms ease;
}
.anime .tunnel-boucle:not(.vu) .tunnel-perles li {
  scale: 0;
}
.anime .tunnel-boucle.vu .tunnel-perles li:nth-child(2) {
  transition-delay: 90ms;
}
.anime .tunnel-boucle.vu .tunnel-perles li:nth-child(3) {
  transition-delay: 180ms;
}
.anime .tunnel-boucle.vu .tunnel-perles li:nth-child(4) {
  transition-delay: 270ms;
}
.anime .tunnel-boucle.vu .tunnel-perles li:nth-child(5) {
  transition-delay: 360ms;
}
.anime .tunnel-perles li.courante {
  animation: perle-pouls 2.4s ease-in-out 900ms infinite;
}
@keyframes perle-pouls {
  50% {
    box-shadow: 0 0 0 5cqi color-mix(in srgb, var(--c-carte) 0%, transparent);
  }
}
.tunnel-montant {
  position: absolute;
  inset: 25%;
  display: grid;
  place-content: center;
  justify-items: center;
  margin: 0;
  text-align: center;
}
.tunnel-montant-chiffre {
  font: 600 13cqi/1 var(--f-titre);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tunnel-montant-unite {
  margin-top: 1.5cqi;
  font: 700 max(10px, 4.6cqi)/1.2 var(--f-texte);
  color: var(--pied-texte);
}
.tunnel-boucle.devis .tunnel-montant-chiffre {
  font-size: 9cqi;
}
.tunnel-boucle.devis .tunnel-montant-unite {
  visibility: hidden;
}
.anime .tunnel-boucle.change .tunnel-montant-chiffre {
  animation: montant-change 520ms var(--ressort);
}
@keyframes montant-change {
  40% {
    scale: 1.12;
    color: var(--c-accent);
  }
}
.tunnel-ou {
  min-width: 0;
}
.tunnel-ou p {
  margin: 0;
}
.tunnel-rang {
  font: 700 .75rem/1.3 var(--f-texte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pied-texte);
}
.tunnel-ou .tunnel-titre {
  margin-top: 2px;
  font: 600 clamp(1.0625rem, 4.4vw, 1.5rem)/1.2 var(--f-titre);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.tunnel-ou .tunnel-suite {
  margin-top: 4px;
  font-size: .9375rem;
  color: var(--pied-texte);
}
@media (min-width: 960px) {
  .tunnel-ou {
    text-align: center;
  }
}
.tunnel-lignes,
.tunnel-promesses {
  display: none;
}
@media (min-width: 960px) {
  .tunnel-lignes {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--c-carte) 16%, transparent);
  }
  .tunnel-lignes > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
  }
  .tunnel-lignes dt {
    margin: 0;
    font-size: .9375rem;
    color: var(--pied-texte);
  }
  .tunnel-lignes dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .tunnel-lignes > .tunnel-ligne-phrase {
    display: grid;
    gap: 2px;
  }
  .tunnel-ligne-phrase dd {
    text-align: left;
    font-weight: 600;
  }
  .tunnel-ligne-total {
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--c-carte) 22%, transparent);
  }
  .tunnel-ligne-total dd {
    font: 600 1.375rem/1.1 var(--f-titre);
  }
  .tunnel-promesses {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
  }
  .tunnel-promesses li {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .tunnel-promesses .glyphe {
    --trait: var(--c-carte);
  }
}