/* ==========================================================================
   mega.css · méga-menus de la navigation (Cliniques, Services, Boutique, À propos)
   Chargé après lessard.css (partials/tete.html). Comportement : js/mega.js. Markup : partials/nav.html.
   Source du design : Penpot « Concept 2 · Méga-menus » (Cliniques, Services, Boutique) ; À propos (Q3) conçu ici.

   ORDINATEUR (≥ 1024) : quatre panneaux sous l'îlot de navigation, à 16 px de lui.
   Chaque panneau suit son bouton dans le DOM (ordre de tabulation naturel). Il est en position fixe, alignée sur
   les 1200 px de l'îlot (même formule que .nav) ; js/mega.js le ferme au défilement de la page, pour qu'il ne se détache pas de l'îlot.
     .nav__lien[data-mega]   bouton du menu. aria-expanded="true" : fond ciel + chevron retourné.
                             .est-actif + aria-current="page" : la page est dans cette section (posés par build.py) ;
                             cet état s'efface pendant qu'un autre menu est ouvert (un seul bouton en ciel)
     .mega                   panneau blanc, rayon 28, ombre forte. Fermé : visibility hidden. Ouvert : .est-ouvert
     .mega--cliniques        3 colonnes : régions | cliniques de la région | aperçu de carte
     .mega--services         intro (titre, texte, bouton) | grille 2 × 3 de services
     .mega--boutique         catégories | masques populaires (3 cartes) | promotions
     .mega--apropos          La clinique | Ressources | carte photo de l'équipe
   Éléments de panneau :
     .mega__col              colonne (data-mega-col : repère pour la navigation aux flèches)
     .mega__surtitre         sur-titre de colonne (Inter 600 12, majuscules)
     .mega__regions          pile de .mega__region (bouton, aria-expanded : région affichée) ou .mega__cat (lien + compte)
     .mega__compte           pastille de nombre ; devient bleue sur la ligne choisie ou survolée
     .mega__lien-bas         lien texte bleu de bas de colonne (44 px de haut)
     .mega__liste            liste de cliniques d'une région (hidden sauf la région choisie)
     .mega__clinique         ligne de clinique : mouton, nom, adresse
     .mega__apercu           carte cliquable : .mega__apercu-vue (image) + .mega__apercu-pied (bleu) ; --photo : photo d'équipe
     .mega__intro            colonne d'intro de Services ; .mega__service : ligne de service (vignette 95 × 75, catégorie, nom)
     .mega__produit          carte de masque (vignette, type, nom, « Se connecter pour voir le prix »)
     .mega__promo            carte de promotion (--offres : bleu dégradé ; --nouveautes : blanche) ; .mega__etiquette (--bleu)
     .mega__ligne            ligne À propos : .mega__orbe (icône) + titre + texte
     .mega__aller            flèche ↗ qui apparaît au survol d'une ligne
   Attributs lus par js/mega.js :
     header.site-entete[data-mega]   îlot à initialiser ; [data-ouvert="services"] : menu à ouvrir au chargement (pages d'état)
     button[data-mega="nom"]         bouton d'un panneau (cliniques, services, boutique, a-propos)
     [data-mega-col]                 colonne (repère visuel pour les flèches) ; [data-mega-debut] : premier élément visé par Flèche bas
     [data-mega-region]              bouton de région des Cliniques (change la liste affichée)
     [data-acc], [data-acc-sous]     boutons de l'accordéon : section, puis région imbriquée
   États posés par js/mega.js :
     .est-ouvert             panneau ouvert
     [data-mega-etat]        sur .site-entete : nom du menu ouvert (absent si tout est fermé)
     .mega-sans-anim         sur .site-entete, le temps de l'ouverture initiale (data-ouvert) : aucune transition

   MOBILE ET TABLETTE (< 1024, là où le bouton hamburger remplace le menu) : le tiroir #nav-tiroir devient un accordéon.
     .mega-acc               liste des 4 sections ; .mega-acc__item
     .mega-acc__bouton       titre de section (aria-expanded) ; .est-actif : la page est dans cette section
     .mega-acc__panneau      contenu d'une section (hidden fermé) ; .mega-acc__liens : liste
     .mega-acc__lien         lien (48 px) ; --tete : premier lien, en bleu gras ; --sous : lien d'une clinique
     .mega-acc__groupe       petit sur-titre de groupe de liens
     .mega-acc__sous         région de l'accordéon Cliniques (accordéon imbriqué) ; .mega-acc__region : son bouton

   Pages d'état pour les captures : <!--@nav actif="services" ouvert="services"--> pose data-ouvert sur .site-entete ;
   js/mega.js ouvre alors ce menu (panneau à l'ordinateur ; tiroir et section en mobile).
   Valeurs de ouvert : cliniques | services | boutique | a-propos.
   Les pages z-mega-cliniques, -services, -boutique et -apropos sont des copies de pages/e00-accueil.html où seuls le titre
   (@tete) et le marqueur @nav changent. Si l'accueil évolue, les recopier de la même façon, puis python3 build.py et capture.py.
   Vérification des interactions (survol, clic, clavier, Échap, mobile) : python3 tests-mega.py.
   ========================================================================== */

/* 1. Bouton du menu ------------------------------------------------------- */
.nav__lien { cursor: pointer; }
.nav__lien:focus-visible { border-radius: var(--r-pilule); outline-offset: 2px; }
.nav__lien .ico { transition: transform .2s ease; }
.nav__lien[aria-expanded="true"] { background: var(--ciel); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.nav__lien[aria-expanded="true"] .ico { transform: rotate(180deg); }
/* Quand un menu est ouvert, la section de la page (aria-current) s'efface : un seul bouton reste en ciel */
.site-entete[data-mega-etat] .nav__lien.est-actif:not([aria-expanded="true"]):not(:hover) { background: none; }

/* 2. Panneau --------------------------------------------------------------- */
.mega {
  --mr: 14px;                       /* rayon de l'anneau de focus des éléments du panneau */
  position: fixed; z-index: 2; top: calc(24px + var(--nav-h) + 16px);      /* 24 = .site-entete top ; 16 = écart sous l'îlot */
  left: max(var(--gouttiere), calc((100% - var(--contenu)) / 2)); width: min(var(--contenu), calc(100% - 2 * var(--gouttiere)));
  padding: 32px; background: #fff; border-radius: var(--r-panneau);
  box-shadow: 0 30px 70px rgba(var(--ombre-c), .14);
  color: var(--encre2); font: 400 14px/1.5 var(--police-texte); cursor: auto;
  visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }   /* pont de survol au-dessus de l'écart de 16 px */
.mega.est-ouvert { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.mega-sans-anim .mega, .mega-sans-anim .nav__lien .ico { transition: none; }
.mega a, .mega button { text-decoration: none; }
.mega :is(a, button):focus-visible { border-radius: var(--mr); outline-offset: 2px; }
.mega ul { margin: 0; padding: 0; list-style: none; }
.mega__col { min-width: 0; }

.mega__surtitre {
  display: block; padding: 0 12px 8px; font: 600 12px/1.2 var(--police-texte);
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-fonce);
}
.mega__lien-bas {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 12px;
  font: 500 14px/20px var(--police-texte); color: var(--accent-fonce); --mr: 8px;
}
.mega__lien-bas:hover { color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 3px; }

/* Lignes à compte : régions (boutons) et catégories (liens) */
.mega__regions { display: flex; flex-direction: column; gap: 4px; }
.mega__region, .mega__cat {
  --mr: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px;
  padding: 8px 12px; border: 0; border-radius: var(--r-segment); background: none; text-align: left;
  font: 500 14px/20px var(--police-texte); color: var(--encre1); cursor: pointer;
}
.mega__region:hover, .mega__cat:hover, .mega__region[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--marine); }
.mega__region[aria-expanded="true"] { color: var(--accent-fonce); }
.mega__cat:hover { color: var(--accent-fonce); }
.mega__compte {
  flex: none; min-width: 28px; padding: 2px 10px; border-radius: var(--r-pilule); text-align: center;
  font: 600 12px/1.3 var(--police-texte); color: var(--encre3);
}
.mega__region[aria-expanded="true"] .mega__compte, .mega__cat:hover .mega__compte { background: var(--accent); color: var(--marine); }   /* petit texte (12 px) sur bleu clair : marine */

/* 3. Cliniques ------------------------------------------------------------- */
.mega--cliniques { display: grid; grid-template-columns: 276px minmax(0, 1fr) 301px; gap: 32px; }
.mega__liste[hidden] { display: none; }
.mega__liste-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 12px 8px; }
.mega__liste-titre { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); }
.mega__liste-nombre { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.mega__cliniques > li + li { }
.mega__clinique {
  display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 12px;
  border-radius: 14px; color: var(--encre1);
}
.mega__clinique:hover { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--encre1); }
.mega__clinique img { width: 33px; height: 28px; flex: none; object-fit: contain; }
.mega__clinique-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mega__clinique-nom { font: 500 14px/20px var(--police-texte); color: var(--encre1); }
.mega__clinique-adresse { font: 400 14px/20px var(--police-texte); color: var(--encre3); }
.mega__aller { margin-left: auto; color: var(--accent-fonce); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
:is(.mega__clinique, .mega__service):is(:hover, :focus-visible) .mega__aller { opacity: 1; transform: none; }

/* Carte d'aperçu (carte du Québec ; photo d'équipe en À propos) */
.mega__apercu {
  --mr: 20px; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--r-carte); background: #fff; box-shadow: var(--o-carte); color: inherit; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.mega__apercu::after { content: ""; position: absolute; inset: 0; border-radius: inherit;  pointer-events: none; }
.mega__apercu-vue { position: relative; display: block; flex: 1 1 auto; min-height: 240px; overflow: hidden; background: #fff; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
/* Images recadrées une fois pour toutes : assets/img/mega/carte-apercu.png (carte du Québec, épingles de Québec à Baie-Comeau)
   et equipe-apercu.jpg (photo d'équipe). Elles remplissent la vue ; on évite de charger les grandes images sur chaque page. */
.mega__apercu-vue img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; }
.mega__apercu--photo .mega__apercu-vue img { object-position: 50% 20%; }
.mega__apercu-pied { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--accent); color: var(--sur-accent); }
.mega__apercu:hover .mega__apercu-pied { background: var(--accent-survol); }
.mega__apercu:hover { color: var(--sur-accent); }
.mega__apercu-titre { font: 600 16px/1.35 var(--police-titre); text-wrap: balance; }
.mega__apercu-lien { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--police-texte); }
.mega__apercu:hover .mega__apercu-lien { text-decoration: underline; text-underline-offset: 3px; }

/* 4. Services -------------------------------------------------------------- */
.mega--services { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
.mega__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mega__intro .mega__surtitre { padding: 0; }
.mega__intro-titre { font: 600 28px/1.2 var(--police-titre); color: var(--encre1); text-wrap: balance; }
.mega__intro-texte { font: 400 16px/1.65 var(--police-texte); color: var(--encre2); text-wrap: pretty; }
.mega__intro .btn { margin-top: 8px; }
.mega__intro .mega__lien-bas { margin: -8px 0 0; padding: 0; }
.mega__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.mega__service {
  --mr: 20px; display: flex; align-items: center; gap: 16px; min-height: 91px; padding: 8px 16px 8px 8px;
  border-radius: var(--r-carte); color: var(--encre1);
}
.mega__service:hover { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--encre1); }
.mega__service img { width: 95px; height: 75px; flex: none; object-fit: cover; border-radius: var(--r-segment); }
.mega__service-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mega__service-cat { font: 600 12px/1.2 var(--police-texte); letter-spacing: 1.5px; text-transform: uppercase; color: var(--encre3); }
.mega__service-nom { font: 500 14px/1.45 var(--police-texte); color: var(--encre1); }

/* 5. Boutique -------------------------------------------------------------- */
.mega--boutique { display: grid; grid-template-columns: 259px minmax(0, 1fr) 211px; gap: 32px; }
.mega__produits-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.mega__produits-titre { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.mega__produits-tete .mega__lien-bas { margin: 0; padding: 0; }
.mega__produits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mega__produit {
  --mr: 20px; display: flex; flex-direction: column; height: 100%; padding: 8px 8px 14px;
  border-radius: var(--r-carte); background: #fff; box-shadow: var(--o-carte); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.mega__produit:hover { box-shadow: inset 0 0 0 1px var(--contour); color: var(--encre1); }
.mega__produit-vignette { display: grid; place-items: center; height: 139px; border-radius: var(--r-segment); background: #fff; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.mega__produit-vignette img { width: 124px; height: 124px; object-fit: contain; }
.mega__produit-infos { display: flex; flex-direction: column; gap: 4px; padding: 10px 6px 0; }
.mega__produit-type { font: 600 12px/1.2 var(--police-texte); letter-spacing: 1.5px; text-transform: uppercase; color: var(--encre3); }
.mega__produit-nom { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); }
.mega__produit-prix { margin-top: 2px; font: 500 14px/1.45 var(--police-texte); color: var(--accent-fonce); }
.mega__produit:hover .mega__produit-prix { text-decoration: underline; text-underline-offset: 3px; }
.mega__promos { display: flex; flex-direction: column; gap: 12px; }
.mega__promo {
  --mr: 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 16px; border-radius: var(--r-carte);
}
.mega__promo--offres { background: var(--accent); color: #fff; }
.mega__promo--offres:hover { color: var(--sur-accent); filter: brightness(.96); }
.mega__promo--nouveautes { background: #fff; box-shadow: var(--o-carte); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.mega__promo--nouveautes:hover { box-shadow: inset 0 0 0 1px var(--contour); color: var(--encre1); }
.mega__etiquette {
  align-self: flex-start; padding: 4px 10px; border-radius: var(--r-pilule); background: #fff; color: var(--accent-fonce);
  font: 600 12px/1.3 var(--police-texte); letter-spacing: 1.5px; text-transform: uppercase; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.mega__etiquette--bleu { background: var(--accent); color: var(--marine); }
.mega__promo-bas { display: flex; flex-direction: column; gap: 8px; }
.mega__promo-titre { font: 600 20px/1.35 var(--police-titre); text-wrap: balance; }
.mega__promo--nouveautes .mega__promo-titre { color: var(--encre1); }
.mega__promo-lien { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/20px var(--police-texte); }
.mega__promo--nouveautes .mega__promo-lien { color: var(--accent-fonce); }
.mega__promo:hover .mega__promo-lien { text-decoration: underline; text-underline-offset: 3px; }

/* 6. À propos (Q3) --------------------------------------------------------- */
.mega--apropos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 301px; gap: 32px; }
.mega__lignes { display: flex; flex-direction: column; gap: 4px; }
.mega__ligne { --mr: 16px; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 12px; border-radius: var(--r-interne); }
.mega__ligne:hover { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--encre1); }
.mega__orbe {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-pilule); background: var(--ciel); color: var(--accent-fonce); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.mega__ligne:hover .mega__orbe { background: #fff; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.mega__ligne-texte { min-width: 0; display: flex; flex-direction: column; }
.mega__ligne-titre { font: 500 14px/20px var(--police-texte); color: var(--encre1); }
.mega__ligne-texte2 { font: 400 14px/20px var(--police-texte); color: var(--encre3); }

/* 7. Zone intermédiaire (1024 à 1199) : le panneau suit la largeur de l'îlot -- */
@media (max-width: 1199px) {
  .mega { padding: 28px; }
  .mega--cliniques { grid-template-columns: 236px minmax(0, 1fr) 248px; gap: 24px; }
  .mega--services { grid-template-columns: 236px minmax(0, 1fr); gap: 32px; }
  .mega__services { gap: 12px; }
  .mega__service img { width: 80px; height: 64px; }
  .mega--boutique { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .mega__promos { display: none; }
  .mega--apropos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 248px; gap: 24px; }
  .mega__ligne-texte2 { font-size: 13px; line-height: 18px; }
}

/* 8. Accordéon du tiroir (< 1024) ------------------------------------------ */
.mega-acc, .mega-acc__liens { margin: 0; padding: 0; list-style: none; }
@media (max-width: 1023px) {
  /* le hamburger est visible dès 1023 px ; lessard.css ne le met en forme que sous 768 px */
  .nav__burger {
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pilule);
    place-items: center; background: var(--ciel); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
  .nav__burger:focus-visible { border-radius: var(--r-pilule); outline-offset: 2px; }
  .nav__panier:focus-visible { border-radius: var(--r-pilule); outline-offset: 2px; }
  .site-entete .nav__tiroir {
    display: block; width: min(var(--contenu), 100% - 2 * var(--gouttiere)); margin: 8px auto 0; padding: 8px;
    background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
  .site-entete .nav__tiroir[hidden] { display: none; }
  .site-entete .nav__tiroir > .btn { width: 100%; margin-top: 8px; }
  .mega-acc__item + .mega-acc__item { margin-top: 2px; }
  .mega-acc__bouton, .mega-acc__region {
    --mr: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    border: 0; background: none; text-align: left; color: var(--encre1); cursor: pointer;
  }
  .mega-acc__bouton { min-height: 52px; padding: 0 16px; border-radius: var(--r-interne); font: 500 16px/24px var(--police-texte); }
  .mega-acc__bouton:hover, .mega-acc__bouton.est-actif, .mega-acc__bouton[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--marine); }
  .mega-acc :is(button, a):focus-visible { border-radius: var(--mr, 12px); outline-offset: 2px; }
  .mega-acc__bouton .ico, .mega-acc__region .ico { transition: transform .2s ease; }
  .mega-acc__bouton[aria-expanded="true"] .ico, .mega-acc__region[aria-expanded="true"] .ico { transform: rotate(180deg); }
  .mega-acc__bouton[aria-expanded="true"] .ico { color: var(--accent-fonce); }
  .mega-acc__panneau[hidden], .mega-acc__liens[hidden] { display: none; }
  .mega-acc__panneau { padding: 4px 4px 12px; }
  .mega-acc__lien {
    --mr: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
    padding: 8px 12px; border-radius: var(--mr); font: 500 15px/20px var(--police-texte); color: var(--encre2); text-decoration: none;
  }
  .mega-acc__lien:hover { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--encre1); }
  .mega-acc__lien .ico { color: var(--encre3); }
  .mega-acc__lien--tete { font-weight: 600; color: var(--accent-fonce); }
  .mega-acc__lien--tete .ico { color: var(--accent-fonce); }
  .mega-acc__groupe {
    padding: 16px 12px 4px; font: 600 12px/1.2 var(--police-texte); letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--encre3);
  }
  .mega-acc__region { --mr: 12px; min-height: 48px; padding: 8px 12px; border-radius: var(--mr); font: 500 15px/20px var(--police-texte); color: var(--encre2); }
  .mega-acc__region:hover, .mega-acc__region[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--encre1); }
  .mega-acc__fin { display: inline-flex; align-items: center; gap: 8px; color: var(--encre3); }
  .mega-acc__liens--sous { margin: 2px 0 8px 18px; padding-left: 8px; }
  .mega-acc__lien--sous { font-weight: 400; }
}
@media (prefers-reduced-motion: reduce) {
  .mega, .nav__lien .ico, .mega__aller, .mega-acc__bouton .ico, .mega-acc__region .ico { transition: none; }
  .mega { transform: none; }
}