/* =========================================================
   976 · MAYOTTE — feuille de style principale
   Système de design "Lagon" — teintes du lagon, de l'ylang-ylang
   et de l'hibiscus, typographie Bricolage Grotesque / Work Sans.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- couleurs --- */
  --lagon-profond:  #0A5C63;
  --lagon-vif:      #1FA9A0;
  --lagon-clair:    #BFE8E2;
  --ylang:          #E0A526;
  --hibiscus:       #B23A48;
  --nuit:           #0D2430;
  --sable:          #F5EFE1;
  --sable-clair:    #FBF8F0;
  --encre:          #16323A;
  --gris-doux:      #5C7278;
  --blanc:          #FFFFFF;

  /* --- typographie --- */
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-corps:   "Work Sans", system-ui, sans-serif;
  --f-mono:    "Space Mono", monospace;

  /* --- rythme --- */
  --rayon: 14px;
  --rayon-lg: 26px;
  --ombre: 0 10px 30px rgba(13,36,48,0.10);
  --ombre-forte: 0 18px 45px rgba(13,36,48,0.18);
  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--f-corps);
  color:var(--encre);
  background:var(--sable-clair);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--nuit);
  line-height:1.08;
  margin:0 0 .5em 0;
  font-weight:700;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); font-weight:800; }
h2{ font-size:clamp(1.6rem, 3.2vw, 2.4rem); }
h3{ font-size:1.3rem; }
p{ margin: 0 0 1em 0; 
  text-align: justify; 
  hyphens: auto;}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lagon-profond);
  background:var(--lagon-clair);
  padding:.35em .8em; border-radius:100px;
  margin-bottom:1em;
}
.eyebrow::before{ content:"◆"; color:var(--ylang); font-size:.8em; }

:focus-visible{ outline:3px solid var(--ylang); outline-offset:3px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ---------- barre annonce ---------- */
.bandeau{
  background:var(--nuit); color:var(--sable-clair);
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.03em;
  text-align:center; padding:.5em 1em;
}
.bandeau a{ color:var(--ylang); border-bottom:1px dotted var(--ylang); }

/* ---------- en-tête ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(251,248,240,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(13,36,48,0.08);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--max); margin:0 auto; gap:20px;
}
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:800; font-size:1.15rem; color:var(--nuit); }
.logo img{ height:40px; width:auto; }

nav.principale{ display:flex; align-items:center; gap:4px; }
nav.principale > ul{ display:flex; gap:2px; position:relative; }
nav.principale > ul > li{ position:relative; }
nav.principale > ul > li > a, nav.principale > ul > li > button{
  font-family:var(--f-corps); font-weight:600; font-size:.92rem;
  padding:.6em .85em; border-radius:100px; display:inline-block;
  background:transparent; border:none; cursor:pointer; color:var(--encre);
  font:inherit;
}
nav.principale > ul > li > a:hover, nav.principale > ul > li > button:hover{ background:var(--lagon-clair); color:var(--lagon-profond); }

.sous-menu{
  position:absolute; top:110%; left:0;
  background:var(--blanc); border-radius:var(--rayon);
  box-shadow:var(--ombre-forte); padding:10px;
  min-width:230px; display:none; flex-direction:column; gap:2px;
  border:1px solid rgba(13,36,48,0.06);
}
li.a-sous-menu.ouvert .sous-menu{ display:flex; }
.sous-menu a{ padding:.55em .7em; border-radius:8px; font-size:.9rem; }
.sous-menu a:hover{ background:var(--sable); color:var(--lagon-profond); }

.btn-menu-mobile{
  display:none; background:var(--lagon-profond); color:var(--blanc);
  border:none; border-radius:10px; width:42px; height:42px; cursor:pointer;
}

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.75em 1.4em; border-radius:100px; font-weight:600; font-size:.92rem;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-principal{ background:var(--hibiscus); color:var(--blanc); }
.btn-principal:hover{ background:#9c3140; }
.btn-contour{ border-color:var(--nuit); color:var(--nuit); }
.btn-contour:hover{ background:var(--nuit); color:var(--blanc); }
.btn-clair{ background:var(--blanc); color:var(--lagon-profond); }

/* ---------- héros ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--lagon-profond) 0%, #0d7d78 55%, #12938b 100%);
  color:var(--blanc);
  padding:70px 0 0;
}
.hero-grid{
  max-width:var(--max); margin:0 auto; padding:20px 24px 40px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
.hero h1{ color:var(--blanc); }
.hero p.lead{ font-size:1.15rem; color:var(--lagon-clair); max-width:46ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1.6em; }
.hero-stats{ display:flex; gap:28px; margin-top:2.2em; flex-wrap:wrap; }
.hero-stats div{ font-family:var(--f-mono); }
.hero-stats strong{ display:block; font-size:1.5rem; color:var(--ylang); }
.hero-stats span{ font-size:.78rem; color:var(--lagon-clair); }
.hero-visuel img{ width:100%; border-radius:var(--rayon-lg); box-shadow:var(--ombre-forte); }
.hero .diviseur-vague{ display:block; width:100%; margin-top:40px; }

/* ---------- diviseur vague générique ---------- */
.diviseur-vague img{ width:100%; display:block; }

/* ---------- fil d'ariane ---------- */
.fil-ariane{
  font-family:var(--f-mono); font-size:.78rem; color:var(--gris-doux);
  padding:18px 0; border-bottom:1px dashed rgba(13,36,48,.12); margin-bottom:36px;
}
.fil-ariane a{ color:var(--lagon-profond); }
.fil-ariane span{ margin:0 .4em; }

/* ---------- en-tête de page interne ---------- */
.entete-page{
  background:var(--sable);
  padding:50px 0 60px;
  border-bottom:1px solid rgba(13,36,48,.06);
}
.entete-page h1{ max-width:22ch; }
.entete-page p.chapeau{ font-size:1.1rem; color:var(--gris-doux); max-width:60ch; }

/* ---------- sections & grilles ---------- */
section{ padding:64px 0; }
section.alt{ background:var(--sable); }
.section-tete{ max-width:64ch; margin-bottom:2.4em; }
.section-tete.centre{ margin-left:auto; margin-right:auto; text-align:center; }

.grille{ display:grid; gap:24px; }
.grille-2{ grid-template-columns:repeat(2,1fr); }
.grille-3{ grid-template-columns:repeat(3,1fr); }
.grille-4{ grid-template-columns:repeat(4,1fr); }

.carte{
  background:var(--blanc); border-radius:var(--rayon); padding:26px;
  box-shadow:var(--ombre); border:1px solid rgba(13,36,48,0.05);
  transition:transform .18s ease, box-shadow .18s ease;
  height:100%;
}
.carte:hover{ transform:translateY(-4px); box-shadow:var(--ombre-forte); }
.carte .num{ font-family:var(--f-mono); color:var(--lagon-vif); font-size:.8rem; }
.carte h3{ margin-top:.3em; }
.carte a.lien-carte{ font-family:var(--f-mono); font-size:.8rem; color:var(--hibiscus); font-weight:700; }

.carte-icone{
  width:46px; height:46px; border-radius:12px; background:var(--lagon-clair);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  font-size:1.3rem;
}

.bloc-info{
  background:var(--nuit); color:var(--sable-clair); border-radius:var(--rayon-lg);
  padding:42px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;
}
.bloc-info h2{ color:var(--blanc); }

.liste-check li{ position:relative; padding-left:1.8em; margin-bottom:.7em; }
.liste-check li::before{ content:"✓"; position:absolute; left:0; color:var(--lagon-vif); font-weight:700; }

table.tableau-donnees{ width:100%; border-collapse:collapse; font-size:.94rem; }
table.tableau-donnees th, table.tableau-donnees td{ padding:.8em 1em; border-bottom:1px solid rgba(13,36,48,.1); text-align:left; }
table.tableau-donnees th{ font-family:var(--f-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gris-doux); }

.tag{
  display:inline-block; font-family:var(--f-mono); font-size:.72rem;
  background:var(--lagon-clair); color:var(--lagon-profond); padding:.3em .7em;
  border-radius:100px; margin:0 6px 6px 0;
}
.tag.or{ background:#fbe9c3; color:#7a5810; }
.tag.rose{ background:#f3d7dc; color:var(--hibiscus); }

/* ---------- répertoire communes / villages ---------- */
.barre-filtre{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;
}
.barre-filtre button{
  font-family:var(--f-mono); font-size:.78rem; padding:.5em 1em; border-radius:100px;
  border:1px solid rgba(13,36,48,.15); background:var(--blanc); cursor:pointer;
}
.barre-filtre button.actif, .barre-filtre button:hover{ background:var(--lagon-profond); color:var(--blanc); border-color:var(--lagon-profond); }

.carte-commune{
  background:var(--blanc); border-radius:var(--rayon); overflow:hidden;
  box-shadow:var(--ombre); border:1px solid rgba(13,36,48,.05);
}
.carte-commune .bandeau-couleur{ height:8px; background:linear-gradient(90deg,var(--lagon-vif),var(--ylang)); }
.carte-commune .contenu{ padding:22px; }
.carte-commune .villages{ font-size:.85rem; color:var(--gris-doux); }

.pastille{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4em; height:2.4em; border-radius:50%;
  background:var(--lagon-profond); color:var(--blanc); font-family:var(--f-mono); font-weight:700;
  font-size:.85rem;
}

/* ---------- citation / encadré ---------- */
.encadre{
  border-left:4px solid var(--ylang); background:var(--sable);
  padding:22px 26px; border-radius:0 var(--rayon) var(--rayon) 0; margin:2em 0;
}
.encadre.alerte{ border-left-color:var(--hibiscus); }
.encadre.info{ border-left-color:var(--lagon-vif); }

/* ---------- pied de page ---------- */
footer.site{
  background:var(--nuit); color:#cfe4e1; padding:60px 0 20px; margin-top:60px;
}
.footer-grille{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:30px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-grille h4{ color:var(--sable-clair); font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1em; }
.footer-grille a{ display:block; color:#a9c7c3; font-size:.88rem; margin-bottom:.6em; }
.footer-grille a:hover{ color:var(--ylang); }
.footer-bas{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:.8rem; color:#7fa39d; flex-wrap:wrap; gap:10px; }
.footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-family:var(--f-display); font-weight:800; color:var(--blanc); font-size:1.1rem; }

/* ---------- retour en haut ---------- */
#retour-haut{
  position:fixed; bottom:26px; right:26px; width:48px; height:48px; border-radius:50%;
  background:var(--hibiscus); color:var(--blanc); border:none; cursor:pointer;
  box-shadow:var(--ombre-forte); font-size:1.1rem; display:none; z-index:70;
}
#retour-haut.visible{ display:block; }

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  .grille-4{ grid-template-columns:repeat(2,1fr); }
  .grille-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grille{ grid-template-columns:1fr 1fr; }
  .bloc-info{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  nav.principale{ display:none; }
  .btn-menu-mobile{ display:block; }
  .grille-2, .grille-3, .grille-4{ grid-template-columns:1fr; }
  .footer-grille{ grid-template-columns:1fr; }
  nav.principale.ouvert{
    display:flex; position:fixed; inset:70px 0 0 0; background:var(--sable-clair);
    flex-direction:column; padding:20px; overflow-y:auto; z-index:65;
  }
  nav.principale.ouvert > ul{ flex-direction:column; width:100%; }
  nav.principale.ouvert > ul > li{ width:100%; }
  .sous-menu{ position:static; box-shadow:none; display:none; padding-left:12px; }
  li.a-sous-menu.ouvert .sous-menu{ display:flex; }
}

/* =========================================================
   ANIMATIONS — apparition au scroll
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *{ animation:apparaitre .6s ease forwards; }
.reveal-stagger.visible > *:nth-child(1){ animation-delay:.05s; }
.reveal-stagger.visible > *:nth-child(2){ animation-delay:.15s; }
.reveal-stagger.visible > *:nth-child(3){ animation-delay:.25s; }
.reveal-stagger.visible > *:nth-child(4){ animation-delay:.35s; }
.reveal-stagger > *{ opacity:0; }
@keyframes apparaitre{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }

@keyframes flotter{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.flotte{ animation:flotter 5s ease-in-out infinite; }

@keyframes pulse-doux{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,165,38,.45);} 50%{ box-shadow:0 0 0 10px rgba(224,165,38,0);} }
.pastille-live{ animation:pulse-doux 2.2s infinite; }

/* barre d'annonce défilante */
.bandeau{ overflow:hidden; position:relative; }
.bandeau-defilant{ display:inline-block; white-space:nowrap; padding-left:100%; animation:defiler 26s linear infinite; }
.bandeau-defilant:hover{ animation-play-state:paused; }
@keyframes defiler{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }

/* zoom doux sur images au survol */
.media-zoom{ overflow:hidden; border-radius:var(--rayon); }
.media-zoom img{ transition:transform .5s ease; width:100%; height:100%; object-fit:cover; }
.media-zoom:hover img{ transform:scale(1.08); }

/* effet Ken Burns pour le héros */
@keyframes kenburns{ 0%{ transform:scale(1) translate(0,0); } 100%{ transform:scale(1.12) translate(-1%,-1%); } }
.hero-visuel{ overflow:hidden; border-radius:var(--rayon-lg); box-shadow:var(--ombre-forte); position:relative; }
.hero-visuel img{ animation:kenburns 18s ease-in-out infinite alternate; border-radius:var(--rayon-lg); }

/* crédit photo discret */
.credit-photo{
  display:block; font-family:var(--f-mono); font-size:.68rem; color:var(--gris-doux);
  opacity:.8; margin-top:.4em;
}
.credit-photo a{ color:inherit; border-bottom:1px dotted var(--gris-doux); }

/* =========================================================
   CARTES AVEC IMAGE
   ========================================================= */
.carte-img{
  background:var(--blanc); border-radius:var(--rayon); overflow:hidden;
  box-shadow:var(--ombre); border:1px solid rgba(13,36,48,0.05);
  transition:transform .25s ease, box-shadow .25s ease; height:100%; display:flex; flex-direction:column;
}
.carte-img:hover{ transform:translateY(-6px); box-shadow:var(--ombre-forte); }
.carte-img .carte-img-media{ aspect-ratio:4/3; overflow:hidden; }
.carte-img .carte-img-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.carte-img:hover .carte-img-media img{ transform:scale(1.1); }
.carte-img .carte-img-corps{ padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; }

/* =========================================================
   GALERIE PHOTOS
   ========================================================= */
.galerie-grille{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.galerie-grille figure{
  margin:0; border-radius:var(--rayon); overflow:hidden; position:relative;
  aspect-ratio:1/1; box-shadow:var(--ombre); cursor:zoom-in;
}
.galerie-grille figure img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.galerie-grille figure:hover img{ transform:scale(1.12); }
.galerie-grille figcaption{
  position:absolute; inset:auto 0 0 0; padding:10px 12px;
  background:linear-gradient(0deg, rgba(13,36,48,.85), rgba(13,36,48,0));
  color:#fff; font-size:.78rem; font-family:var(--f-mono);
  transform:translateY(100%); transition:transform .3s ease;
}
.galerie-grille figure:hover figcaption{ transform:translateY(0); }

.lightbox{
  position:fixed; inset:0; background:rgba(9,20,26,.92); z-index:200;
  display:none; align-items:center; justify-content:center; padding:40px;
  animation:apparaitre .25s ease;
}
.lightbox.ouverte{ display:flex; }
.lightbox img{ max-width:min(90vw,1100px); max-height:82vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-legende{ color:#fff; text-align:center; margin-top:14px; font-family:var(--f-mono); font-size:.85rem; }
.lightbox-fermer{
  position:absolute; top:22px; right:26px; background:rgba(255,255,255,.12); color:#fff;
  border:none; width:44px; height:44px; border-radius:50%; font-size:1.3rem; cursor:pointer;
}
.lightbox-fermer:hover{ background:rgba(255,255,255,.24); }

/* =========================================================
   VIDÉOS
   ========================================================= */
.video-grille{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.video-cadre{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--rayon);
  overflow:hidden; box-shadow:var(--ombre-forte); background:var(--nuit);
}
.video-cadre iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-legende{ margin-top:.8em; font-size:.92rem; color:var(--gris-doux); }
.video-legende strong{ color:var(--encre); display:block; font-family:var(--f-display); font-size:1rem; margin-bottom:.15em; }

/* =========================================================
   ESPACES PUBLICITAIRES
   ========================================================= */
.zone-pub{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:repeating-linear-gradient(135deg, #eef2f1, #eef2f1 10px, #e6ebe9 10px, #e6ebe9 20px);
  border:1px dashed rgba(13,36,48,.22); border-radius:var(--rayon);
  color:var(--gris-doux); text-align:center; margin:0 auto; overflow:hidden; position:relative;
}
.zone-pub::before{
  content:"Espace partenaires"; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; position:absolute; top:8px; left:12px; color:var(--gris-doux); opacity:.7;
}
.zone-pub .pub-contenu{ font-family:var(--f-mono); font-size:.8rem; padding:0 16px; margin-top:14px; }
.zone-pub-bandeau{ width:100%; max-width:970px; height:120px; }
.zone-pub-rectangle{ width:100%; max-width:336px; height:280px; }
.zone-pub-native{ width:100%; height:auto; min-height:110px; padding:18px; }

/* =========================================================
   FIL D'ACTUALITÉS (Google Actualités)
   ========================================================= */
.actu-widget{ display:grid; gap:16px; }
.actu-item{
  display:flex; gap:14px; align-items:flex-start; background:var(--blanc);
  border:1px solid rgba(13,36,48,.06); border-radius:var(--rayon); padding:16px 18px;
  box-shadow:var(--ombre); transition:transform .18s ease, box-shadow .18s ease;
}
.actu-item:hover{ transform:translateX(4px); box-shadow:var(--ombre-forte); }
.actu-puce{
  flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:.5em;
  background:var(--hibiscus);
}
.actu-item h4{ margin:0 0 .25em; font-size:1rem; }
.actu-item h4 a{ color:var(--encre); }
.actu-item h4 a:hover{ color:var(--lagon-profond); text-decoration:underline; }
.actu-meta{ font-family:var(--f-mono); font-size:.72rem; color:var(--gris-doux); text-transform:uppercase; letter-spacing:.04em; }
.actu-chargement{ display:flex; align-items:center; gap:10px; color:var(--gris-doux); font-family:var(--f-mono); font-size:.85rem; padding:20px 0; }
.actu-spin{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--lagon-clair);
  border-top-color:var(--lagon-profond); animation:tourner .7s linear infinite;
}
@keyframes tourner{ to{ transform:rotate(360deg); } }
.actu-source{ color:var(--lagon-profond); font-weight:600; }
.actu-widget-entete{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:1.2em; }
.actu-live{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--hibiscus); background:#f8e3e6;
  padding:.4em .9em; border-radius:100px;
}
.actu-live::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--hibiscus); }

/* =========================================================
   RESPONSIVE — écrans intermédiaires & très petits
   ========================================================= */
@media (max-width:1080px){
  .galerie-grille{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:920px){
  .video-grille{ grid-template-columns:1fr; }
  .actu-widget-entete{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:720px){
  .galerie-grille{ grid-template-columns:repeat(2,1fr); }
  .grille-2 .zone-pub{ grid-column:1/-1; }
}
@media (max-width:520px){
  .galerie-grille{ grid-template-columns:1fr 1fr; gap:8px; }
  .actu-item{ flex-direction:column; gap:6px; }
  .actu-puce{ display:none; }
  .zone-pub-bandeau{ height:100px; }
  .lightbox{ padding:16px; }
  .hero-stats{ gap:18px; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}