/* ==========================================================================
   COMPOSANTS
   ========================================================================== */

/* --- La matière carton ---------------------------------------------------
   Trois motifs, tous issus du carton lui-même : la cannelure (la vague
   interne), le bord brut (la tranche laissée visible) et le tracé du
   labyrinthe. Rien d'autre ne fait office de décor sur ce site.          */

/* Surface kraft cannelée. Les fines rainures verticales sont la tranche
   vue de face — elles restent en filigrane, jamais criardes.             */
.carton{
  background-color:var(--c-kraft);
  background-image:repeating-linear-gradient(90deg, rgba(30,14,6,.055) 0 1px, transparent 1px 8px);
}
.carton--clair{
  background-color:var(--c-creme-ombre);
  background-image:repeating-linear-gradient(90deg, rgba(30,14,6,.04) 0 1px, transparent 1px 8px);
}

/* La cannelure en séparateur de section. */
.cannelure{ display:block; width:100%; height:14px; color:var(--c-kraft-fonce); opacity:.55; }
.cannelure svg{ display:block; width:100%; height:100%; }
.cannelure--clair{ color:var(--c-kraft); opacity:.35; }

/* Le bord brut : la tranche du carton, assumée. */
.bord-brut{ position:relative; border-bottom:9px solid var(--c-kraft-fonce); }
.bord-brut::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:6px;
  background:repeating-linear-gradient(90deg, var(--c-kraft-fonce) 0 2px, transparent 2px 7px);
  opacity:.5; pointer-events:none;
}

/* Le tracé du labyrinthe en fond de section. */
.fond-trace{ position:relative; overflow:hidden; isolation:isolate; }
.fond-trace__svg{
  position:absolute; z-index:-1; pointer-events:none;
  color:var(--c-brun); opacity:.055;
  width:min(760px,90vw); height:auto;
  right:-14%; top:50%; transform:translateY(-50%);
}
.fond-trace__svg--gauche{ right:auto; left:-16%; }
.section--brun .fond-trace__svg{ color:var(--c-or); opacity:.1; }

/* --- Boutons ------------------------------------------------------------
   L'Or Bois est un accent rare : les appels à l'action sont l'un des trois
   usages prévus par la charte. On ne l'emploie nulle part ailleurs en aplat. */
.bouton{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-texte); font-size:var(--t-s); font-weight:var(--p-medium);
  letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 1.7rem;
  border:1px solid var(--c-or); border-radius:var(--rayon);
  background:var(--c-or); color:var(--c-brun);
  text-decoration:none; cursor:pointer;
  transition:background var(--transition), transform var(--transition);
}
.bouton:hover{ background:var(--c-or-fonce); border-color:var(--c-or-fonce); color:var(--c-brun); transform:translateY(-1px); }
.bouton[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.bouton--fantome{ background:transparent; color:var(--c-brun); border-color:var(--c-trait-fort); }
.bouton--fantome:hover{ background:var(--c-brun); border-color:var(--c-brun); color:var(--c-creme); }
.bouton--clair{ background:transparent; color:var(--c-creme); border-color:rgba(245,239,224,.35); }
.bouton--clair:hover{ background:var(--c-or); border-color:var(--c-or); color:var(--c-brun); }
.groupe-boutons{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-4); }

/* --- En-tête ------------------------------------------------------------ */
.entete{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--c-creme) 92%, transparent);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--c-trait);
}
.entete__interieur{ display:flex; align-items:center; gap:var(--e-4); min-height:78px; }
.entete__marque{
  font-family:var(--f-titre); font-size:1.2rem; font-weight:var(--p-titre);
  color:var(--c-brun); text-decoration:none; margin-right:auto;
  display:flex; align-items:center; gap:.65rem; line-height:1.1;
}
.entete__marque img{ max-height:44px; width:auto; }
.marque-glyphe{ width:36px; height:36px; color:var(--c-brun); flex:none; }
.entete__marque em{ font-style:italic; font-weight:var(--p-medium); color:var(--c-or); }

.entete__nav{ display:flex; gap:var(--e-3); align-items:center; }
.entete__nav ul{ display:flex; gap:var(--e-3); align-items:center; list-style:none; margin:0; padding:0; }
.entete__nav li{ position:relative; }
.entete__nav a{
  font-size:var(--t-s); font-weight:var(--p-normal); letter-spacing:.03em;
  color:var(--c-brun); text-decoration:none; padding-block:.4rem;
  border-bottom:1px solid transparent; white-space:nowrap;
}
.entete__nav a:hover,
.entete__nav .current-menu-item > a,
.entete__nav .current-menu-parent > a{ border-bottom-color:var(--c-or); }

/* Sous-menu : Nos labyrinthes › métier / thème */
.entete__nav .sub-menu{
  position:absolute; top:100%; left:-1rem; min-width:230px;
  background:var(--c-creme); border:1px solid var(--c-trait); border-radius:var(--rayon);
  flex-direction:column; align-items:stretch; gap:0; padding:.5rem 0;
  box-shadow:0 10px 30px rgba(30,14,6,.09);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.entete__nav li:hover > .sub-menu,
.entete__nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.entete__nav .sub-menu a{ display:block; padding:.55rem 1rem; border-bottom:0; }
.entete__nav .sub-menu a:hover{ background:var(--c-creme-ombre); }

.entete__tel{ font-weight:var(--p-medium); letter-spacing:.03em; color:var(--c-brun); text-decoration:none; white-space:nowrap; }

.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.burger span{ display:block; width:24px; height:1px; background:var(--c-brun); margin:6px 0; transition:var(--transition); }

@media (max-width:1080px){
  .burger{ display:block; }
  .entete__nav{
    position:fixed; inset:78px 0 auto 0; max-height:calc(100vh - 78px); overflow-y:auto;
    background:var(--c-creme); border-bottom:1px solid var(--c-trait);
    flex-direction:column; align-items:flex-start; gap:var(--e-2);
    padding:var(--e-3) 1.25rem var(--e-4);
    transform:translateY(-125%); transition:transform var(--transition);
  }
  .entete__nav[data-ouvert="true"]{ transform:translateY(0); }
  .entete__nav ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .entete__nav li{ border-bottom:1px solid var(--c-trait); width:100%; }
  .entete__nav a{ display:block; padding:.85rem 0; border-bottom:0; }
  .entete__nav .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; padding:0 0 .5rem 1rem; min-width:0; background:transparent;
  }
  .entete__nav .sub-menu li{ border-bottom:0; }
  .entete__nav .sub-menu a{ padding:.5rem 0; color:var(--c-texte-doux); }
}

/* --- Le fil : le tracé labyrinthe en gouttière ---------------------------- */
.fil{ position:fixed; left:0; top:78px; bottom:0; width:var(--rail); z-index:20; pointer-events:none; }
.fil svg{ height:100%; width:100%; }
.fil__trace{ fill:none; stroke:var(--c-kraft-fonce); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; opacity:.3; }
.fil__progression{ fill:none; stroke:var(--c-brun); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; transition:stroke-dashoffset 120ms linear; }
.fil__marqueur{ fill:var(--c-or); transition:transform 120ms linear; }
@media (max-width:900px){ .fil{ display:none; } }

/* --- Fil d'Ariane -------------------------------------------------------- */
.fil-ariane ol{
  display:flex; flex-wrap:wrap; gap:.4rem .7rem; list-style:none; margin:0 0 var(--e-3); padding:0;
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  font-weight:var(--p-medium); color:var(--c-texte-clair);
}
.fil-ariane li + li::before{ content:"—"; margin-right:.7rem; color:var(--c-kraft-fonce); }
.fil-ariane a{ color:var(--c-texte-clair); text-decoration:none; }
.fil-ariane a:hover{ color:var(--c-or-fonce); }
.section--brun .fil-ariane ol,.section--brun .fil-ariane a{ color:rgba(245,239,224,.65); }

/* --- Héros --------------------------------------------------------------- */
.heros{
  display:grid; grid-template-columns:1.08fr .92fr; gap:var(--e-5);
  align-items:center; padding-block:clamp(2.6rem,6vw,4.6rem) var(--e-section);
}
.heros__meta{
  font-size:var(--t-xs); font-weight:var(--p-medium); letter-spacing:.26em;
  text-transform:uppercase; color:var(--c-sauge);
  display:flex; flex-wrap:wrap; gap:.4rem var(--e-3); margin-bottom:1.1rem;
}
.heros__texte{ margin-top:var(--e-3); }
.heros__preuves{
  display:flex; flex-wrap:wrap; gap:var(--e-3) var(--e-4); margin-top:var(--e-4);
  padding-top:var(--e-3); border-top:1px solid var(--c-trait);
  font-size:var(--t-s); color:var(--c-texte-doux);
}
.heros__preuves b{ display:block; font-weight:var(--p-medium); color:var(--c-brun); }
@media (max-width:900px){ .heros{ grid-template-columns:1fr; gap:var(--e-4); } }

/* Le plan : trait épais aux bouts arrondis, comme une rainure creusée. */
.plan{ width:100%; max-width:400px; margin-inline:auto; }
.plan__mur{ fill:none; stroke:var(--c-brun); stroke-width:15; stroke-linecap:round; stroke-linejoin:round; }
.plan__chemin{
  fill:none; stroke:var(--c-or); stroke-width:7; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2000; stroke-dashoffset:2000;
  animation:tracer 4.5s cubic-bezier(.6,.05,.25,1) .4s forwards;
}
@keyframes tracer{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .plan__chemin{ animation:none; stroke-dashoffset:0; } }
.plan__legende{
  font-size:11px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; fill:var(--c-texte-clair);
}
@media (max-width:900px){ .plan{ max-width:250px; } }

/* --- Grilles ------------------------------------------------------------- */
.grille{ display:grid; gap:var(--e-3); }
.grille--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grille--3{ grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); }
.duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:var(--e-5); align-items:start; }
@media (max-width:860px){ .duo{ grid-template-columns:1fr; gap:var(--e-4); } }

/* --- Emplacement visuel --------------------------------------------------
   Tant qu'aucune photo n'est déposée, le bloc affiche un plan de labyrinthe
   sur fond kraft plutôt qu'un rectangle gris : la page tient debout sans
   photo, et se remplit dès qu'on en ajoute une.                           */
.visuel{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--rayon) var(--rayon) 0 0; }
.visuel img{ width:100%; height:100%; object-fit:cover; }
.visuel__vide{ display:flex; align-items:center; justify-content:center; height:100%; }
.visuel__vide svg{ width:58%; height:auto; color:var(--c-brun); opacity:.22; }
.visuel--large{ aspect-ratio:16/9; border-radius:var(--rayon); }

/* --- Carte labyrinthe ---------------------------------------------------- */
.labyrinthe{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--c-trait); border-radius:var(--rayon);
  overflow:hidden; transition:transform var(--transition), box-shadow var(--transition);
}
.labyrinthe:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(30,14,6,.08); }
.labyrinthe__corps{ padding:var(--e-3) var(--e-3) var(--e-4); display:flex; flex-direction:column; flex:1; }
.labyrinthe h3{ margin:.5rem 0 .4rem; }
.labyrinthe h3 a{ text-decoration:none; color:inherit; }
.labyrinthe h3 a:hover{ color:var(--c-or-fonce); }
.labyrinthe__meta{
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-texte-clair); font-weight:var(--p-medium);
  border-top:1px solid var(--c-trait); padding-top:.7rem; margin-top:var(--e-2);
  display:flex; flex-wrap:wrap; gap:.3rem .9rem;
}
.labyrinthe__pied{ margin-top:auto; padding-top:var(--e-2); }

/* Étiquettes de classement */
.etiquettes{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; }
.etiquette{
  font-size:var(--t-xs); font-weight:var(--p-medium); letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .6rem; border-radius:999px; text-decoration:none;
  border:1px solid var(--c-trait-fort); color:var(--c-texte-doux); background:transparent;
}
.etiquette:hover{ background:var(--c-brun); border-color:var(--c-brun); color:var(--c-creme); }
.etiquette--niveau{ border-color:var(--c-sauge); color:var(--c-sauge); }
.etiquette--interactif{ border-color:var(--c-or); color:var(--c-or-fonce); }

/* --- Les deux niveaux ---------------------------------------------------- */
.niveau{ border-radius:var(--rayon); padding:var(--e-4); display:flex; flex-direction:column; }
.niveau--simple{ border:1px solid var(--c-trait-fort); }
.niveau--interactif{ background:var(--c-brun); color:var(--c-creme); }
.niveau--interactif h3{ color:var(--c-creme); }
.niveau--interactif .liste li::before{ background:var(--c-or); }
.niveau__sous{
  font-size:var(--t-xs); font-weight:var(--p-medium); letter-spacing:.18em;
  text-transform:uppercase; color:var(--c-sauge); margin:0 0 .6rem;
}
.niveau--interactif .niveau__sous{ color:var(--c-or); }
.niveau__demo{ margin:var(--e-3) 0 0; }

/* Les LED du labyrinthe interactif : le seul mouvement gratuit du site,
   et il est là parce que c'est littéralement ce que fait le produit. */
.led{ fill:var(--c-or); opacity:.18; animation:pulse 3.2s ease-in-out infinite; }
.led:nth-of-type(2){ animation-delay:.4s } .led:nth-of-type(3){ animation-delay:.8s }
.led:nth-of-type(4){ animation-delay:1.2s } .led:nth-of-type(5){ animation-delay:1.6s }
.led:nth-of-type(6){ animation-delay:2s }   .led:nth-of-type(7){ animation-delay:2.4s }
@keyframes pulse{ 0%,100%{ opacity:.16 } 45%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .led{ animation:none; opacity:.85; } }

/* --- Listes -------------------------------------------------------------- */
.liste{ list-style:none; margin:0 0 var(--e-3); padding:0; font-size:var(--t-s); }
.liste li{ padding-left:1.35rem; position:relative; margin-bottom:.55rem; }
.liste li::before{ content:""; position:absolute; left:0; top:.72em; width:.7rem; height:1px; background:var(--c-kraft-fonce); }

/* --- Étapes -------------------------------------------------------------- */
.etape{ border-top:1px solid var(--c-trait); padding-top:var(--e-3); }
.etape__heure{
  font-size:var(--t-s); font-weight:var(--p-medium); letter-spacing:.16em;
  color:var(--c-or); display:block; margin-bottom:.4rem;
}

/* --- Chiffres RSE -------------------------------------------------------- */
.matiere{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--e-4); }
.matiere__item{ border-top:1px solid var(--c-sauge); padding-top:var(--e-3); }
.matiere__chiffre{
  font-family:var(--f-titre); font-size:2.4rem; font-weight:var(--p-titre);
  line-height:1; color:var(--c-sauge); display:block; margin-bottom:.5rem;
}

/* --- La thèse ------------------------------------------------------------ */
.these{ background:var(--c-brun); color:var(--c-creme); border-radius:var(--rayon); padding:44px 40px; position:relative; overflow:hidden; }
.these .surtitre{ color:var(--c-or); }
.these p{ font-size:1.14rem; line-height:1.6; max-width:660px; font-weight:var(--p-leger); }
.these__glyphe{ position:absolute; right:-40px; bottom:-40px; width:230px; height:230px; opacity:.14; color:var(--c-or); pointer-events:none; }
@media (max-width:760px){ .these{ padding:32px 24px; } .these__glyphe{ width:160px; height:160px; } }

/* --- Témoignage ---------------------------------------------------------- */
.temoignage{ border-left:1px solid var(--c-or); padding:var(--e-1) 0 var(--e-1) var(--e-3); }
.temoignage blockquote{ margin:0 0 var(--e-2); font-family:var(--f-titre); font-style:italic; font-weight:var(--p-normal); font-size:var(--t-l); line-height:1.4; }
.temoignage figcaption{ font-size:var(--t-xs); font-weight:var(--p-medium); letter-spacing:.14em; text-transform:uppercase; color:var(--c-texte-clair); line-height:1.75; }
.section--brun .temoignage figcaption{ color:rgba(245,239,224,.6); }

/* --- FAQ ----------------------------------------------------------------- */
.faq__item{ border-bottom:1px solid var(--c-trait); }
.faq__question{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--f-titre); font-weight:var(--p-titre); font-size:var(--t-l);
  color:var(--c-brun); padding:var(--e-3) 2.5rem var(--e-3) 0; position:relative;
}
.faq__question::after{
  content:""; position:absolute; right:.4rem; top:50%; width:12px; height:12px; margin-top:-6px;
  border-right:1px solid var(--c-or); border-bottom:1px solid var(--c-or);
  transform:rotate(45deg) translateY(-3px); transition:transform var(--transition);
}
.faq__question[aria-expanded="true"]::after{ transform:rotate(225deg) translateY(-3px); }
.faq__reponse{ padding-bottom:var(--e-3); }
.faq__reponse[hidden]{ display:none; }

/* --- Article de blog ----------------------------------------------------- */
.article{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-trait); border-radius:var(--rayon); overflow:hidden; }
.article__corps{ padding:var(--e-3); display:flex; flex-direction:column; flex:1; }
.article__date{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--c-texte-clair); font-weight:var(--p-medium); }
.article h3{ margin:.5rem 0 .6rem; font-size:var(--t-l); }
.article h3 a{ text-decoration:none; color:inherit; }
.article h3 a:hover{ color:var(--c-or-fonce); }
.article__lire{ margin-top:auto; padding-top:var(--e-2); font-size:var(--t-s); font-weight:var(--p-medium); }

.page-contenu > *{ max-width:var(--lisible); }
.page-contenu h2{ margin-top:var(--e-4); }
.page-contenu h3{ margin-top:var(--e-3); }
.page-contenu img,.page-contenu figure,.page-contenu .wp-block-table{ max-width:100%; }
.page-contenu ul,.page-contenu ol{ padding-left:1.2rem; margin-bottom:var(--e-3); }
.page-contenu li{ margin-bottom:.4rem; }
.page-contenu blockquote{
  border-left:2px solid var(--c-or); padding-left:var(--e-3); margin:var(--e-4) 0;
  font-family:var(--f-titre); font-style:italic; font-size:var(--t-l); line-height:1.45;
}

/* --- Pagination ---------------------------------------------------------- */
.pagination{ margin-top:var(--e-4); display:flex; gap:.5rem; flex-wrap:wrap; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4rem; height:2.4rem; padding:0 .6rem;
  border:1px solid var(--c-trait-fort); border-radius:var(--rayon);
  text-decoration:none; font-size:var(--t-s); color:var(--c-brun);
}
.pagination .current,.pagination .page-numbers:hover{ background:var(--c-brun); border-color:var(--c-brun); color:var(--c-creme); }

/* --- Formulaire ---------------------------------------------------------- */
.rappel{ background:#fff; color:var(--c-brun); border:1px solid var(--c-trait); border-radius:var(--rayon); padding:var(--e-4); }
.champ{ margin-bottom:var(--e-3); }
.champ label{ display:block; }
.champ label > span{
  display:block; font-size:var(--t-xs); font-weight:var(--p-medium);
  letter-spacing:.18em; text-transform:uppercase; color:var(--c-sauge); margin-bottom:.45rem;
}
.champ input,.champ select,.champ textarea{
  width:100%; font-family:var(--f-texte); font-size:var(--t-m); font-weight:var(--p-leger);
  color:var(--c-brun); background:transparent; border:0;
  border-bottom:1px solid var(--c-trait-fort); border-radius:0; padding:.6rem 0;
  transition:border-color var(--transition);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{ outline:0; border-bottom-color:var(--c-or); border-bottom-width:2px; }
.champ textarea{ resize:vertical; min-height:92px; }
.champ--duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3); }
@media (max-width:600px){ .champ--duo{ grid-template-columns:1fr; } }
.champ--leurre{ position:absolute; left:-9999px; }
.mentions{ font-size:var(--t-xs); color:var(--c-texte-clair); line-height:1.6; margin-top:var(--e-2); max-width:52ch; }
.reponse-formulaire{ margin-top:var(--e-3); font-size:var(--t-s); }
.reponse-formulaire[data-etat="ok"]{ color:var(--c-sauge); font-weight:var(--p-medium); }
.reponse-formulaire[data-etat="erreur"]{ color:#B5563F; font-weight:var(--p-medium); }

/* --- Barre d'appel (mobile) ---------------------------------------------- */
.barre-appel{ display:none; }
@media (max-width:900px){
  .barre-appel{
    display:flex; position:fixed; inset:auto 0 0 0; z-index:60;
    background:var(--c-brun); color:var(--c-creme);
    padding:.7rem 1rem; gap:var(--e-2); align-items:center; justify-content:space-between;
  }
  .barre-appel__texte{ font-size:var(--t-xs); font-weight:var(--p-medium); letter-spacing:.12em; text-transform:uppercase; }
  body{ padding-bottom:66px; }
}

/* --- Pied de page -------------------------------------------------------- */
.pied{ background:var(--c-brun); color:var(--c-creme); padding-block:var(--e-5) var(--e-3); }
.pied a{ color:var(--c-creme); text-decoration:none; }
.pied a:hover{ color:var(--c-or); }
.pied__grille{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--e-4); }
@media (max-width:900px){ .pied__grille{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pied__grille{ grid-template-columns:1fr; } }
.pied__titre{ font-size:var(--t-xs); font-weight:var(--p-medium); letter-spacing:.22em; text-transform:uppercase; color:var(--c-or); margin-bottom:var(--e-2); }
.pied ul{ list-style:none; margin:0; padding:0; }
.pied li{ margin-bottom:.5rem; font-size:var(--t-s); }
.pied__bas{
  margin-top:var(--e-4); padding-top:var(--e-3);
  border-top:1px solid rgba(245,239,224,.16);
  font-size:var(--t-xs); color:rgba(245,239,224,.6);
  display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-3); justify-content:space-between;
}

/* --- Révélation au défilement -------------------------------------------- */
.revele{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.revele[data-vu="true"]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .revele{ opacity:1; transform:none; } }