/* ==========================================================================
   Isens Evolution — site public
   base.css : jetons, typographie, en-tete, boutons, pied de page, apparitions
   La charte reprend celle de l'administration (admin/assets/css/app.css) :
   le vert du logo en couleur principale, les couleurs des icones en accents.
   ========================================================================== */

:root {
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ink: #0f1524;
  --ink-2: #333e57;
  --muted: #6b7488;
  --line: #e4e8f1;
  --line-2: #eff2f8;
  --bg: #ffffff;
  --soft: #f6f8fc;
  --night: #0c1120;
  --night-2: #121a2e;

  --green: #6cb33f;
  --green-d: #4f9423;
  --green-l: #eaf5e0;
  --orange: #f7941d;
  --red: #e8513a;
  --purple: #7c5ce0;
  --yellow: #fbc02d;
  --blue: #2f86de;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(15, 21, 36, .06);
  --shadow: 0 2px 6px rgba(15, 21, 36, .05), 0 18px 40px -22px rgba(15, 21, 36, .28);
  --shadow-lg: 0 40px 90px -40px rgba(15, 21, 36, .45);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.3, .48, 1);

  --container: 1200px;
  /* --r va de 0 (haut de page) à 1 : le logo et l'en-tête rétrécissent avec lui.
     Sans JavaScript, --r vaut 0 : on reste sur le grand format, jamais cassé. */
  --logo-max: 172px;
  --logo-delta: 52px;
  --header-h: calc(100px - 28px * var(--r, 0));
}

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; margin: 0 0 .5em; }
/* text-wrap: balance répartit les lignes du titre (ignoré par les navigateurs qui ne le connaissent pas). */
h1 { font-size: clamp(36px, 4.6vw, 56px); text-wrap: balance; }
h2 { font-size: clamp(30px, 3.8vw, 50px); }
h3 { font-size: clamp(20px, 1.7vw, 25px); letter-spacing: -.025em; line-height: 1.2; }
h4 { font-size: 17px; letter-spacing: -.02em; }
p { margin: 0 0 1.1em; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { color: var(--ink); font-weight: 700; }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }
::selection { background: rgba(108, 179, 63, .28); }

/* ---------- Barre de défilement ----------
   ⚠ Chromium comprend `scrollbar-width` / `scrollbar-color`, et dès qu'elles
   sont posées sur un élément il ignore TOUS ses ::-webkit-scrollbar (donc la
   largeur, le pouce arrondi et surtout l'état :hover). Les propriétés standard
   sont donc réservées aux moteurs sans pseudo-éléments, Firefox en tête. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--soft); }
::-webkit-scrollbar-thumb {
  background-color: #c4ccdb;
  border: 3px solid transparent;   /* fausse gouttière… */
  background-clip: padding-box;    /* …le rail se voit à travers */
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--green); }
::-webkit-scrollbar-thumb:active { background-color: var(--green-d); }
::-webkit-scrollbar-corner { background: var(--soft); }
/* Dès qu'on personnalise la barre, Chromium réaffiche ses flèches. */
::-webkit-scrollbar-button { display: none; }

@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #c4ccdb var(--soft); }
}

.container { width: min(100% - 44px, var(--container)); margin-inline: auto; }
.section { padding: clamp(78px, 9vw, 130px) 0; position: relative; }
.section--soft { background: var(--soft); }
.section--night { background: var(--night); color: #aeb8cd; }
.section--night h2, .section--night h3, .section--night h4 { color: #fff; }
.section--night strong { color: #fff; }

/* ---------- Titres de section ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--green-d); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.section--night .eyebrow { color: #8fd34f; }
.lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--muted); max-width: 62ch; }
.section--night .lead { color: #93a0ba; }
.head { max-width: 780px; margin-bottom: clamp(38px, 5vw, 62px); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow::before { display: none; }
.head--center .lead { margin-inline: auto; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  font: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; position: relative; white-space: nowrap;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease), background-color .25s;
}
.btn svg { flex: none; transition: transform .3s var(--spring); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 14px 30px -14px rgba(15, 21, 36, .8); }
.btn--primary:hover { background: #1b2540; box-shadow: 0 20px 38px -14px rgba(15, 21, 36, .7); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--green { background: var(--green-d); color: #fff; box-shadow: 0 14px 30px -14px rgba(79, 148, 35, .85); }
.btn--green:hover { background: #58a328; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.section--night .btn--ghost, .footer .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.section--night .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(47, 134, 222, .55); outline-offset: 3px;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--green-d); font-size: 15.5px;
}
.link-arrow svg { transition: transform .3s var(--spring); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- En-tete ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 900; height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(15, 21, 36, .5); }
.header .container { display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; position: relative; z-index: 901; }
.brand img, .brand .logo-svg {
  width: calc(var(--logo-max) - var(--logo-delta) * var(--r, 0));
  height: auto; display: block;
}
.brand:hover img { transform: scale(1.04); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  padding: 9px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s, color .2s;
}
.nav a:hover { background: var(--line-2); color: var(--ink); }
.header-cta { display: flex; align-items: center; gap: 10px; flex: none; position: relative; z-index: 901; }


/* Bouton du menu : trois barres posées au pixel (des hauteurs fractionnaires
   donnaient des traits d'épaisseurs différentes), qui se croisent à l'ouverture. */
.burger {
  display: none; position: relative; z-index: 901; width: 46px; height: 46px; padding: 0;
  border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.burger:hover { border-color: var(--ink); }
.burger span {
  position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .4s var(--spring), opacity .2s, width .3s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; width: 13px; }
.burger span:nth-child(3) { top: 27px; }
.burger:hover span:nth-child(2) { width: 18px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Le menu plein écran ne sert que sur mobile ; sur grand écran la barre reste. */
.nav-foot { display: none; }

@media (max-width: 980px) {
  /* ---------- Menu plein écran ----------
     Ouverture en cercle qui s'étend depuis le bouton, puis les liens montent
     l'un après l'autre. La fermeture rejoue l'inverse. */
  .nav {
    position: fixed; inset: 0; z-index: 899; margin: 0;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    padding: calc(var(--header-h) + 26px) 26px 34px;
    background: #fff; overflow: hidden; overscroll-behavior: contain;
    opacity: 1; transform: none; box-shadow: none; border: 0;
    clip-path: circle(0px at calc(100% - 45px) 38px);
    transition: clip-path .62s cubic-bezier(.76, 0, .24, 1);
    pointer-events: none;
  }
  /* Le panneau ne défile QUE pendant qu il est ouvert : laissé en `auto`, il
     gardait sa propre barre pendant les 0,6 s de fermeture, en même temps que
     celle de la page qui revenait — d où les deux barres l instant d après. */
  .nav.is-open { clip-path: circle(160% at calc(100% - 45px) 38px); pointer-events: auto; overflow-y: auto; }
  /* Décor : les mêmes halos que la bannière, en fond du menu. */
  /* Le menu ne montre jamais de barre : elle doublerait celle de la page
     le temps de la fermeture. Le défilement tactile, lui, fonctionne. */
  .nav::-webkit-scrollbar { width: 0; height: 0; }

  .nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(420px 320px at 8% 12%, rgba(183, 224, 138, .5), transparent 70%),
      radial-gradient(380px 300px at 96% 22%, rgba(255, 211, 154, .45), transparent 70%),
      radial-gradient(420px 340px at 70% 96%, rgba(207, 192, 245, .5), transparent 70%);
  }

  .nav > a {
    position: relative; width: 100%; padding: 11px 0 11px 46px; border-radius: 0;
    font-size: clamp(30px, 8.4vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
    color: var(--ink); counter-increment: lien;
    opacity: 0; transform: translateY(22px);
    transition: opacity .45s var(--ease), transform .55s var(--ease), color .2s;
  }
  .nav > a::before {
    content: "0" counter(lien);
    position: absolute; left: 0; top: .78em; font-size: 13px; font-weight: 800; letter-spacing: .04em;
    color: var(--green-d); font-family: var(--mono);
  }
  .nav > a:hover, .nav > a:active { background: none; color: var(--green-d); }
  .nav.is-open > a { opacity: 1; transform: none; }
  .nav.is-open > a:nth-child(1) { transition-delay: .16s; }
  .nav.is-open > a:nth-child(2) { transition-delay: .22s; }
  .nav.is-open > a:nth-child(3) { transition-delay: .28s; }
  .nav.is-open > a:nth-child(4) { transition-delay: .34s; }
  .nav.is-open > a:nth-child(5) { transition-delay: .40s; }
  .nav.is-open > a:nth-child(6) { transition-delay: .46s; }

  .nav-foot {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    margin-top: 34px; width: 100%;
    opacity: 0; transform: translateY(22px);
    transition: opacity .45s var(--ease) .52s, transform .55s var(--ease) .52s;
  }
  .nav.is-open .nav-foot { opacity: 1; transform: none; }
  .nav-mail { font-size: 15px; font-weight: 600; color: var(--muted); padding: 0; }

  .nav { counter-reset: lien; }
  .burger { display: block; order: 3; }
  .header-cta { margin-left: auto; }   /* le bouton reste collé à droite */
  .header-cta .btn { display: none; }

  /* Pendant l'ouverture, la barre du haut s'efface pour laisser le plein écran. */
  .header.menu-open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
}

/* Verrou de défilement : la gouttière est réservée en permanence, la page ne
   saute donc pas quand on masque le défilement. */
html { scrollbar-gutter: stable; }
html.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav { transition: opacity .2s; clip-path: none !important; opacity: 0; }
  .nav.is-open { opacity: 1; }
  .nav > a, .nav-foot { transition: none; }
}

/* ---------- Retour en haut ----------
   Repris du bouton de siteprotect.fr : un disque sombre cerné d'un anneau qui
   suit la progression dans la page (`--haut-p`, en pourcentage). Il n'apparaît
   qu'une fois la bannière passée. Le bouton est créé en JavaScript : sans lui
   il ne ferait rien, et un bouton inerte est pire qu'un bouton absent. */
.haut {
  position: fixed; right: clamp(14px, 2.2vw, 26px); bottom: clamp(14px, 2.2vw, 26px); z-index: 880;
  width: 48px; height: 48px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: conic-gradient(var(--green) calc(var(--haut-p, 0) * 1%), var(--line) 0);
  box-shadow: 0 10px 26px -12px rgba(15, 21, 36, .6);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .45s var(--spring), visibility .35s;
}
.haut.est-visible { opacity: 1; visibility: visible; transform: none; }
.haut__fond { position: absolute; inset: 2px; border-radius: 50%; background: var(--ink); transition: background-color .25s; }
.haut__fleche { position: relative; width: 20px; height: 20px; transition: transform .3s var(--spring); }
.haut__fleche path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.haut:hover .haut__fond { background: var(--green-d); }
.haut:hover .haut__fleche { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .haut { transform: none; transition: opacity .2s linear, visibility .2s; }
  .haut:hover .haut__fleche { transform: none; }
}

@media (max-width: 720px) {
  :root { --logo-max: 142px; --logo-delta: 34px; --header-h: calc(82px - 16px * var(--r, 0)); }
}

/* ---------- Pied de page ---------- */
.footer { background: var(--night); color: #8e9ab2; padding: 72px 0 34px; }
.footer h4 { color: #fff; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer a { color: #b9c3d6; transition: color .2s; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 46px; }
.footer-grid li { margin-bottom: 9px; font-size: 15px; }
.footer .brand img { width: 136px; }
.footer-note { font-size: 14.5px; max-width: 34ch; margin-top: 18px; }
.footer-bottom {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; font-size: 13.5px; color: #6f7c94;
}
/* Lien signé : souligné et à la couleur d'accent, pour se voir dans le gris du bas. */
.lien-accent, .footer a.lien-accent {
  color: #8fd34f; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: rgba(143, 211, 79, .5);
  transition: color .2s, text-decoration-color .2s;
}
.footer a.lien-accent:hover { color: #a8e06d; text-decoration-color: #a8e06d; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }

/* ---------- Apparitions au defilement ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .reveal[data-d="1"].is-in { transition-delay: .08s; }
.js .reveal[data-d="2"].is-in { transition-delay: .16s; }
.js .reveal[data-d="3"].is-in { transition-delay: .24s; }
.js .reveal[data-d="4"].is-in { transition-delay: .32s; }
.js .reveal[data-d="5"].is-in { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Le lien d'evitement doit redevenir visible quand on l'atteint au clavier. */
a.visually-hidden:focus {
  position: fixed !important; left: 14px; top: 14px; z-index: 1000;
  width: auto; height: auto; clip: auto; clip-path: none;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700;
}

/* ==========================================================================
   Déploiement du symbole
   Le symbole isens est un éventail : quatre lames qui partent toutes du même
   point (--pivot-x/--pivot-y, posé par inc/logo.php d'après le viewBox).
   Au repos elles sont rabattues les unes sur les autres ; elles s'ouvrent dans
   l'ordre, du vert à l'orangé, puis le mot arrive.
   Les « plis » (facettes sombres qui donnent l'épaisseur) ne peuvent pas être
   animés en opacité : ils tiennent la leur de leur classe d'origine (.25, .4…),
   qu'une animation écraserait. Ils grandissent donc depuis le pivot.
   ========================================================================== */
.logo-svg { display: block; width: 100%; height: auto; }
.logo-svg .lame,
.logo-svg .pli { transform-box: view-box; transform-origin: var(--pivot-x) var(--pivot-y); }

@keyframes lameUne  { from { opacity: 0; transform: rotate(-18deg) scale(.55); } }
@keyframes lameDeux { from { opacity: 0; transform: rotate(-35deg) scale(.7); } }
@keyframes lameTrois{ from { opacity: 0; transform: rotate(-62deg) scale(.7); } }
@keyframes lameQuatre { from { opacity: 0; transform: rotate(-81deg) scale(.7); } }
@keyframes pliArrive { from { transform: rotate(-24deg) scale(.45); } }
@keyframes motArrive { from { opacity: 0; transform: translateX(-10px); } }

.js .logo--anime .lame { opacity: 1; }
.js .logo--anime .lame--1 { animation: lameUne    .7s var(--spring) .04s both; }
.js .logo--anime .lame--2 { animation: lameDeux   .7s var(--spring) .14s both; }
.js .logo--anime .lame--3 { animation: lameTrois  .7s var(--spring) .24s both; }
.js .logo--anime .lame--4 { animation: lameQuatre .8s var(--spring) .34s both; }
.js .logo--anime .pli     { animation: pliArrive  .6s var(--spring) .42s both; }
.js .logo--anime .mot     { animation: motArrive  .6s var(--ease)   .52s both; }

/* Dans l'en-tête, l'éventail s'ouvre un peu plus au survol : le même geste que
   l'écran de chargement, en plus discret, et seulement là où un pointeur existe. */
@media (hover: hover) {
  .js .brand .logo-svg .lame { transition: transform .5s var(--spring); }
  .js .brand:hover .logo-svg .lame--1 { transform: rotate(2deg); }
  .js .brand:hover .logo-svg .lame--2 { transform: rotate(4.5deg); }
  .js .brand:hover .logo-svg .lame--3 { transform: rotate(8deg); }
  .js .brand:hover .logo-svg .lame--4 { transform: rotate(11deg); }
}

/* ==========================================================================
   Écran de chargement
   Il ne masque pas un site lent — la page est légère — mais donne au symbole
   le temps de se déplier avant qu'on entre. Il part dès que la page est prête,
   avec une durée minimale pour ne pas clignoter et un filet de sécurité qui le
   retire quoi qu'il arrive (voir main.js et le script de <head>).
   ========================================================================== */
.chargement {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center; align-content: center; gap: 26px;
  background: #fff; overflow: hidden;
  transition: opacity .55s var(--ease), visibility .55s;
}
.chargement::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(460px 360px at 12% 14%, rgba(183, 224, 138, .55), transparent 70%),
    radial-gradient(420px 340px at 88% 18%, rgba(255, 211, 154, .5), transparent 70%),
    radial-gradient(460px 380px at 66% 92%, rgba(207, 192, 245, .55), transparent 70%);
}
.chargement__logo {
  position: relative; width: clamp(240px, 36vw, 400px);
  transition: transform .55s var(--ease), opacity .45s var(--ease);
}
.chargement__barre {
  position: relative; width: 108px; height: 2px; border-radius: 2px;
  background: rgba(15, 21, 36, .1); overflow: hidden;
}
.chargement__barre i {
  position: absolute; inset: 0 auto 0 0; width: 42%; border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--orange));
  animation: barreVaEtVient 1.15s var(--ease) infinite;
}
@keyframes barreVaEtVient {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

.chargement.est-parti { opacity: 0; visibility: hidden; }
.chargement.est-parti .chargement__logo { transform: translateY(-10px) scale(1.04); opacity: 0; }

/* Tant que l'écran couvre la page, on ne défile pas dessous. La gouttière de
   barre étant réservée en permanence, la page ne saute pas au moment où on rend
   la main. */
html.charge { overflow: hidden; }
/* Deuxième page de la même visite : pas d écran de chargement du tout. */
html.deja-vu .chargement { display: none; }

/* La bannière attend son tour : sans cela son animation se jouerait derrière
   l'écran de chargement, et l'on arriverait sur une page déjà « posée ». */
.js .hero-text > * { animation-play-state: paused; }
.js.pret .hero-text > * { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .js .logo--anime .lame,
  .js .logo--anime .pli,
  .js .logo--anime .mot { animation: none; opacity: 1; transform: none; }
  .js .brand:hover .logo-svg .lame { transform: none; }
  .chargement__barre i { animation: none; width: 100%; }
  .chargement { transition: opacity .2s linear, visibility .2s; }
}