/* Couleur fire-dark (utilisée dans ebooks/formations) — si Tailwind pas encore rebuild */
.bg-fire-dark { background-color: #1a0000; }
.text-fire-dark { color: #1a0000; }

/* Modaux : au-dessus du header (z-index 120) et du menu mobile (130) */
#auth-modal,
#formation-detail-modal,
#messaging-modal,
#cart-overlay,
#admin-user-modal,
#admin-guest-modal { z-index: 200 !important; }
#cart-drawer { z-index: 201 !important; }
/* Panier fermé : overlay ne doit jamais bloquer le tactile sur mobile */
#cart-overlay { pointer-events: none; }
#cart-overlay:not(.invisible) { pointer-events: auto; }

/* Modaux fermés : ne jamais intercepter le tactile (sécurité mobile) */
#formation-detail-modal.hidden,
#auth-modal.hidden,
#messaging-modal.hidden { pointer-events: none !important; }

/**
 * Cartes formations : rendu compact et attrayant
 */
.formation-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.formation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.formation-card .formation-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
}
.formation-card .formation-features > div {
  flex: 1 1 auto;
  min-width: 0;
}
.formation-card:focus-visible {
  outline: 2px solid rgb(139, 0, 0);
  outline-offset: 2px;
}

/* Mobile : zones tactiles ≥ 44px sur les boutons des cartes et du modal détail */
@media (max-width: 1023px) {
  .formation-card button[type="button"] {
    min-height: 44px;
    min-width: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  #formation-detail-modal [data-formation-close] {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  #formation-detail-modal button[data-formation-modal="cta"] {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========== Page Formations : titres, fonds, intros (hors fenêtres/cartes) ========== */

/* Hero formations : titre lisible, badge mis en valeur */
.formations-hero .hero-bg-overlay {
  background: linear-gradient(105deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.25) 100%);
}
.formations-hero h1 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 0 48px rgba(0, 0, 0, 0.2);
}
.formations-hero [data-i18n="formations.page.badge"] {
  letter-spacing: 0.12em;
  box-shadow: 0 2px 12px rgba(139, 0, 0, 0.25);
}
.formations-hero p[data-i18n="formations.page.subtitle"] {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Grille formations : fond légèrement dégradé pour donner du relief */
.formations-grid-section {
  background: linear-gradient(180deg, #f5f3ef 0%, #ebe8e2 100%);
}
.dark .formations-grid-section {
  background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}

/* Alignement commun : barre 4px + 1rem de marge à gauche pour disclaimer, titres et intro */
section.formations-grid-section .formations-disclaimer,
section.formations-grid-section .formation-step-title,
section.formations-grid-section .formation-step-intro {
  box-sizing: border-box !important;
  border-left-width: 4px !important;
  padding-left: 1rem !important;
}

/* Disclaimer : encadré discret, aligné sur les étapes */
section.formations-grid-section .formations-disclaimer,
.formations-disclaimer {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
  padding-right: 1.25rem !important;
  border-left: 4px solid #8b0000 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.dark section.formations-grid-section .formations-disclaimer,
.dark .formations-disclaimer {
  background: rgba(30, 30, 35, 0.6) !important;
  border-left-color: #c44 !important;
}

/* Titres d’étape : barre d’accent + typo renforcée */
.formation-step-section {
  position: relative;
  z-index: 1;
  scroll-margin-top: 2rem;
}
.formation-step-section + .formation-step-section {
  padding-top: 2.5rem;
}
#etape-3-nb01 {
  z-index: 2;
  padding-top: 2.5rem;
}

section.formations-grid-section .formation-step-title,
.formation-step-title {
  display: block !important;
  width: 100% !important;
  max-width: 48rem;
  box-sizing: border-box !important;
  margin: 0 0 1rem 0 !important;
  padding: 0.625rem 1.25rem 0.625rem 1rem !important;
  border-left: 4px solid #8b0000 !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: #8b0000 !important;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
@media (min-width: 640px) {
  section.formations-grid-section .formation-step-title,
  .formation-step-title {
    font-size: 1.375rem !important;
  }
}
.dark section.formations-grid-section .formation-step-title,
.dark .formation-step-title {
  color: #e85a5a !important;
  border-left-color: #c44 !important;
  background: rgba(30, 30, 35, 0.5) !important;
}

/* Intro d’étape (encadré texte) : ombre et bordure soignées */
section.formations-grid-section .formation-step-intro,
.formation-step-intro {
  border-left: 4px solid #8b0000 !important;
  padding-left: 1rem !important;
  padding-right: 1.25rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}
.dark section.formations-grid-section .formation-step-intro,
.dark .formation-step-intro {
  border-left-color: #c44 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Section témoignages : fond légèrement teinté, titre avec ligne */
.formations-testimonials {
  background: linear-gradient(180deg, #fafaf9 0%, #f5f3ef 100%);
}
.dark .formations-testimonials {
  background: linear-gradient(180deg, #0d0d0d 0%, #000 100%);
}
.formations-testimonials .formations-section-heading {
  position: relative;
  padding-bottom: 0.5rem;
}
.formations-testimonials .formations-section-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #8b0000, transparent);
  border-radius: 2px;
}

/* Section cross-sell : même principe titre */
.formations-cross-sell {
  background: linear-gradient(180deg, #ebe8e2 0%, #e5e2dc 100%);
}
.dark .formations-cross-sell {
  background: linear-gradient(180deg, #0a0a0a 0%, #111 100%);
}
.formations-cross-sell .formations-section-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #8b0000, transparent);
  border-radius: 2px;
}
.formations-cross-sell .formations-section-heading {
  position: relative;
  padding-bottom: 0.5rem;
}

/* CTA principal (boutons/liens fire-red) : ombre colorée pour renforcer l’impact */
a.bg-fire-red,
button.bg-fire-red {
  box-shadow: 0 4px 14px rgba(139, 0, 0, 0.35);
}
a.bg-fire-red:hover,
button.bg-fire-red:hover {
  box-shadow: 0 6px 24px rgba(139, 0, 0, 0.5);
}

/* Modal détail formation : bloquer le scroll du body */
body.formation-modal-open {
  overflow: hidden;
}

/* Fond modal : fond bleu sans flou (backdrop-filter désactivé pour éviter flou au 1er chargement) */
.formation-detail-modal-backdrop,
#formation-detail-modal {
  background: rgba(12, 14, 38, 0.75);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#formation-detail-modal .formation-detail-modal-panel img.loaded,
#formation-detail-modal .formation-detail-modal-panel img[src]:not([src=""]) {
  filter: none !important;
}
.formation-detail-modal-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(12, 14, 38, 0.4) 0%, rgba(6, 8, 26, 0.9) 100%);
  pointer-events: none;
}

/* Panel modal : style cartes formations (bleu sombre) */
.formation-detail-modal-panel {
  background: linear-gradient(135deg, rgb(12, 14, 38) 0%, rgb(6, 8, 26) 100%);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: formation-modal-in 0.3s ease-out;
}
@keyframes formation-modal-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Scrollbar discrète dans le contenu modal */
.formation-detail-modal-panel .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/**
 * Fusion : lazy-loading + transitions de page (Turbo)
 */

/* Panier ouvert : masquer la bulle "Accès rapide" pour éviter le chevauchement sur mobile */
.cart-open-hide-quick-access {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Panier mobile : section email invité repliable pour laisser les articles visibles */
@media (max-width: 639px) {
  .guest-email-fields.collapsed-mobile {
    display: none;
  }
  .guest-email-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  .guest-email-toggle {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
@media (min-width: 640px) {
  .guest-email-toggle {
    display: none;
  }
  .guest-email-fields.collapsed-mobile {
    display: block !important;
  }
}

/* Fondu d'entrée natif au chargement de la page (sans Turbo) */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: pageFadeIn 0.25s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

/* View Transitions API (si le navigateur la supporte et qu'on l'utilise plus tard) */
@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: view-transition-fade-out 0.2s ease-out;
  }
  ::view-transition-new(root) {
    animation: view-transition-fade-in 0.25s ease-out;
  }
}
@keyframes view-transition-fade-out {
  to { opacity: 0; }
}
@keyframes view-transition-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Lazy loading + variables header */

/* Évite le "saut" du header à gauche au changement de page (prod) :
   la scrollbar qui apparaît/disparaît selon la longueur de la page change
   la largeur du viewport ; en réservant sa place, le layout reste stable. */
html {
  scrollbar-gutter: stable;
}
/* Fallback : navigateurs sans scrollbar-gutter → barre toujours visible = largeur constante */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* Contenir le contenu principal pour éviter toute scrollbar horizontale */
#main-content {
  overflow-x: hidden;
  max-width: 100%;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Mobile : supprimer le délai 300 ms du tap (un seul tap = un clic immédiat). Pas de touch-action sur chaque élément pour éviter double-tap. */
@media (max-width: 1023px) {
  html {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    touch-action: manipulation;
  }
}

/* Panier : fenêtre qui commence sous le header (pas de chevauchement) */
#cart-drawer {
  top: var(--header-total-height-desktop) !important;
  height: calc(100vh - var(--header-total-height-desktop)) !important;
}
@media (max-width: 639px) {
  #cart-drawer {
    top: var(--header-total-height-mobile) !important;
    height: calc(100vh - var(--header-total-height-mobile)) !important;
  }
}

/* Zones tactiles minimales (mobile) */
@media (max-width: 639px) {
  .cart-icon-container,
  #mobile-menu-btn,
  #login-button-nav,
  #close-dev-banner,
  #close-disclaimer-banner {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Accessibilité Lighthouse : contraste suffisant pour le bouton langue actif (FR) dans le menu mobile */
#mobile-menu-drawer .grid a[data-lang-switch][aria-current="true"] {
  background-color: #8b0000 !important;
  color: #fff !important;
}

:root {
  --header-bar-height: 3.5rem;
  --dev-banner-height: 2.25rem;
  --nav-height: 4rem;
  --header-sticky-top: calc(var(--header-bar-height) + var(--dev-banner-height));
  --header-full-height: calc(var(--header-sticky-top) + var(--nav-height));
}

.temp-keep {} /* header sizing moved to css/header.css */

/* Hero : style uniforme des grandes photos d'en-tête (opacité + rendu) */
.hero-bg-image {
  opacity: 0.55;
  filter: contrast(1.05) saturate(1.05);
  object-fit: cover;
  object-position: center;
}
/* Overlays standard : voile uni (light/dark) — plus de dégradé */
.hero-bg-overlay { background: rgba(0,0,0,0.5); }
.hero-bg-overlay-top { background: rgba(0,0,0,0.2); }

/* Hero page d'accueil : image flammes — contraste renforcé, belle visibilité */
.hero-index-fire .hero-bg-image {
  opacity: 0.92;
  filter: contrast(1.18) saturate(1.25);
  object-position: center center;
}
.hero-index-fire .hero-bg-overlay {
  background: rgba(0,0,0,0.4);
}
.hero-index-fire .hero-bg-overlay-top {
  background: rgba(0,0,0,0.15);
}
/* Titre hero accueil : légère ombre pour lisibilité et profondeur */
.hero-index-fire h1,
.lcp-hero h1 {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.15);
}

.sticky-nav {
  position: sticky;
  top: var(--header-sticky-top);
  z-index: 40;
}
.sticky-below-header {
  position: sticky;
  top: var(--header-full-height);
}

html:not(.i18n-ready) [data-i18n]:not([data-i18n-html]) {
  visibility: hidden;
}
html.i18n-ready [data-i18n] {
  visibility: visible;
}

.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  background-color: #f0f0f0;
  background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.lazy-image.loaded {
  opacity: 1;
  background: none;
  animation: none;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.lazy-image:not(.loaded) {
  filter: blur(5px);
}
.lazy-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
}

/* ==========================================================================
   CORRECTIONS MOBILE — Audit mars 2026
   ========================================================================== */

/* ---------- MODAL AUTH : adaptée au mobile ---------- */
@media (max-width: 767px) {
  #auth-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #auth-modal > div {
    max-height: 92vh;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.25rem 1rem 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Bouton fermer : plus grand et accessible */
  #auth-modal > div > button:first-child {
    top: 0.75rem !important;
    right: 0.75rem !important;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Tabs connexion/inscription : pleine largeur */
  #auth-modal .flex.gap-4.mb-6 {
    gap: 0 !important;
  }
  #auth-modal .flex.gap-4.mb-6 button {
    flex: 1;
    text-align: center;
    min-height: 44px;
  }
  /* Inputs : taille tactile confortable */
  #auth-modal input, #auth-modal select {
    min-height: 48px;
    font-size: 16px !important; /* Évite le zoom automatique iOS */
  }
  /* Bouton submit : pleine largeur, zone tactile */
  #auth-modal button[type="submit"] {
    min-height: 52px;
    font-size: 1rem;
  }
  /* Checkboxes : zone cliquable élargie */
  #auth-modal label.flex.gap-3 {
    padding: 8px 0;
    cursor: pointer;
  }
  #auth-modal label.flex.gap-3 input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-top: 2px;
    cursor: pointer;
  }
}

/* Poignée visuelle pour bottom sheet sur mobile */
@media (max-width: 767px) {
  #auth-modal > div::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 0 auto 1rem;
  }
}

/* ---------- BOUTONS GLOBAUX : zones tactiles minimum 44×44px ---------- */
@media (max-width: 1023px) {
  button, [role="button"], a.btn, input[type="submit"], input[type="button"] {
    -webkit-tap-highlight-color: transparent;
  }
  /* Liens de navigation dans le texte : padding vertical pour agrandir la zone */
  .prose a, article a, .content a {
    padding: 2px 0;
  }
}

/* ---------- CHECKBOXES GLOBALES : zone cliquable élargie ---------- */
@media (max-width: 1023px) {
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    padding: 6px 0;
    cursor: pointer;
  }
  input[type="checkbox"], input[type="radio"] {
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
  }
}

/* ---------- INPUTS GLOBAUX : font-size 16px sur mobile pour éviter zoom iOS ---------- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---------- TEXTAREA : hauteur minimale et auto-expand ---------- */
textarea {
  min-height: 120px;
  resize: vertical;
}
@media (max-width: 767px) {
  textarea {
    min-height: 140px;
  }
}

/* ---------- GRILLES : passage à 1 colonne sur mobile ---------- */
@media (max-width: 639px) {
  /* Grilles d'articles de blog */
  .blog-grid,
  [class*="grid-cols-2"]:not(.no-mobile-stack):not([class*="sm:grid-cols"]):not([class*="xs:grid-cols"]) {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- FILTRES BLOG : scroll horizontal avec indicateurs ---------- */
.blog-filters-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.blog-filters-scroll::-webkit-scrollbar { display: none; }
.blog-filters-scroll::after {
  content: '';
  display: block;
  min-width: 1px;
  flex-shrink: 0;
}

/* Fade droit pour indiquer qu'il y a plus de filtres */
.blog-filters-wrapper {
  position: relative;
}
@media (max-width: 767px) {
  .blog-filters-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--bg-current, white));
    pointer-events: none;
    border-radius: 0 8px 8px 0;
  }
}

/* ---------- PAGINATION : boutons agrandis sur mobile ---------- */
@media (max-width: 767px) {
  .pagination-btn, nav[aria-label="Pagination"] a, nav[aria-label="Pagination"] button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
  }
}

/* ---------- CARDS : espacement et hauteur cohérente ---------- */
@media (max-width: 639px) {
  .card, .formation-card {
    margin-bottom: 0; /* Le gap de la grille gère l'espacement */
  }
}

/* ---------- FORMULAIRE CONTACT : bouton pleine largeur mobile ---------- */
@media (max-width: 767px) {
  #contact-form button[type="submit"],
  form[id*="contact"] button[type="submit"] {
    width: 100%;
  }
}

/* ---------- ACCORDION FAQ : zones tactiles ---------- */
.faq-toggle {
  min-height: 56px;
  padding: 1rem 0;
}
@media (max-width: 767px) {
  .faq-toggle {
    min-height: 60px;
  }
  .faq-toggle span:first-child {
    font-size: 1rem !important;
  }
}

/* ---------- HERO : overflow protection sur mobile ---------- */
@media (max-width: 639px) {
  section[class*="hero"], .hero-section {
    overflow-x: hidden;
  }
}

/* ---------- DARK MODE : extras ---------- */
.dark #auth-modal > div {
  background: #1a1a1e;
}

/* ---- DARK MODE : sections bg-cream-light (blog, FAQ, carrière...) ---- */
.dark .bg-cream-light,
.dark section.bg-cream-light {
  background-color: #111827 !important;
}
.dark .bg-cream {
  background-color: #0f172a !important;
}

/* ---- DARK MODE : FAQ items (rendus dynamiquement par faq.js) ---- */
.dark #faq-container .bg-white {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}
.dark #faq-container .text-anthracite {
  color: #f9fafb !important;
}
.dark #faq-container .text-gray-400 {
  color: #9ca3af !important;
}
.dark #faq-container h2 {
  color: #f9fafb !important;
}
.dark #faq-container .text-anthracite-light {
  color: #d1d5db !important;
}
.dark #faq-container p {
  color: #d1d5db !important;
}

/* ---- DARK MODE : blog filter buttons (bg-white sans dark:) ---- */
.dark button.rounded-full:not(.bg-fire-red):not([class*="bg-"]):is(.bg-white),
.dark .flex.flex-wrap button.bg-white {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}

/* ---- DARK MODE : cards génériques bg-white sans dark: ---- */
.dark .rounded-custom.bg-white:not([class*="dark:"]),
.dark .rounded-lg.bg-white:not([class*="dark:"]) {
  background-color: #1f2937 !important;
}

/* ---- DARK MODE : textes génériques sans dark: ---- */
.dark .text-anthracite:not([class*="dark:"]) {
  color: #f9fafb;
}
.dark .text-anthracite-light:not([class*="dark:"]) {
  color: #d1d5db;
}
.dark .text-gray-600:not([class*="dark:"]) {
  color: #9ca3af;
}
.dark .border-gray-200:not([class*="dark:"]) {
  border-color: #374151;
}
.dark .bg-gray-50:not([class*="dark:"]) {
  background-color: #1f2937;
}
.dark .bg-gray-100:not([class*="dark:"]) {
  background-color: #111827;
}

/* ---------- ANIMATE FADE-IN : s'assure que l'opacité finale est 1 ---------- */
.animate-fade-in {
  animation: fadeInMobile 0.5s ease-out forwards !important;
  opacity: 0;
}
@keyframes fadeInMobile {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Compteurs : toujours visibles après animation */
[data-target].counted {
  opacity: 1 !important;
}

/* ---------- BOTTOM SAFE AREA (iOS) ---------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #auth-modal > div {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
  }
}

/* ---------- SCROLL LOCK BODY quand modal ouverte ---------- */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}