/*
================================================================================
  ATLANTIS INTERNATIONAL — CSS GLOBAL
  À coller dans : Apparence → Éditeur de thème → style.css (thème enfant)
  OU via : Apparence → Personnaliser → CSS additionnel

  Ce fichier centralise :
  1. Import Google Fonts
  2. Variables CSS globales (:root)
  3. Utilitaires communs (boutons, cards, dots, li, tags, etc.)
  4. Composants partagés (eyebrow, section-inner, séparateurs)
  5. Animations globales
  6. Reset Elementor (neutralise les conflits)
  7. Responsive global

  UTILISATION DANS LES WIDGETS HTML :
  Une fois ce CSS chargé dans le thème, chaque widget peut supprimer
  son bloc <style> interne et utiliser directement les classes .atl-*

  VERSION : 1.0 — Juin 2026
  AUTEUR  : Atlantis International · Simohamed CHERQI
================================================================================
*/


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. GOOGLE FONTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;1,400&family=Raleway:wght@600;700;800&display=swap');


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. VARIABLES GLOBALES — Charte Atlantis International
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {

  /* ── Couleurs principales (du logo) ── */
  --atl-vert-profond:     #1A3A2A;   /* Fond logo, sections sombres, nav */
  --atl-vert-vif:         #8DC63F;   /* CTA principal, icônes, accents */
  --atl-or:               #F5A800;   /* CTA fort, "Fruits et Légumes", highlights */
  --atl-creme:            #F4F0E6;   /* Fonds neutres chauds */
  --atl-vert-clair:       #EAF3DE;   /* Badges, cartes légères */
  --atl-vert-mid:         #C0DD97;   /* Bordures légères, séparateurs */
  --atl-nuit:             #0E1A0E;   /* Footer */

  /* ── Couleurs d'accentuation ── */
  --atl-bleu:             #4A9ECC;   /* Logistique, infos */
  --atl-violet:           #9B6DC5;   /* Flexibilité, 4e carte */
  --atl-vert-bio:         #50B450;   /* BIO, agriculture */
  --atl-vert-rainforest:  #2EAD6E;   /* Rainforest Alliance */

  /* ── Textes ── */
  --atl-texte-dark:       #1A3A2A;   /* Titres sur fond clair */
  --atl-texte-mid:        #4A6040;   /* Corps sur fond clair */
  --atl-texte-dim:        #7A9070;   /* Labels, sous-titres */
  --atl-texte-light:      #F4F0E6;   /* Textes sur fond sombre */
  --atl-texte-muted:      rgba(157, 196, 157, 0.85); /* Corps sur fond sombre */
  --atl-texte-dim-dark:   rgba(157, 196, 157, 0.65); /* Secondaire sur fond sombre */

  /* ── Fonds de cartes (transparence 75%) ── */
  --atl-card-bg:          rgba(255, 255, 255, 0.75);  /* Carte claire */
  --atl-card-bg-hover:    rgba(255, 255, 255, 0.90);  /* Carte claire hover */
  --atl-card-bg-dark:     rgba(26,  58,  42,  0.75);  /* Carte sombre */
  --atl-card-bg-warm:     rgba(255, 248, 236, 0.75);  /* Carte chaude (Maroc) */
  --atl-card-bg-subtle:   rgba(255, 255, 255, 0.06);  /* Carte très transparente (fond sombre) */
  --atl-card-bg-subtle-h: rgba(255, 255, 255, 0.11);  /* Hover subtle */

  /* ── Bordures ── */
  --atl-card-border:      rgba(141, 198,  63, 0.22);  /* Bordure standard */
  --atl-card-border-h:    rgba(141, 198,  63, 0.50);  /* Bordure hover */
  --atl-card-border-or:   rgba(245, 168,   0, 0.28);  /* Bordure or */
  --atl-card-border-w:    rgba(255, 255, 255, 0.12);  /* Bordure blanche */

  /* ── Effets spéciaux ── */
  --atl-quote-bg:         rgba(245, 168,   0, 0.10);
  --atl-quote-border:     rgba(245, 168,   0, 0.28);
  --atl-glass-bg:         rgba( 14,  30,  18, 0.55);
  --atl-glass-border:     rgba(141, 198,  63, 0.22);

  /* ── Géométrie ── */
  --atl-radius:           12px;   /* Border-radius standard */
  --atl-radius-sm:         8px;   /* Border-radius petit */
  --atl-radius-xs:         4px;   /* Border-radius tags/badges */
  --atl-radius-pill:      99px;   /* Border-radius pilule */

  /* ── Typographies ── */
  --atl-font-titre:       'Raleway', sans-serif;   /* H1, H2, labels, boutons */
  --atl-font-corps:       'DM Sans', sans-serif;   /* Corps, navigation, petits textes */

  /* ── Ombres ── */
  --atl-shadow-card:      0 2px 12px rgba(26, 58, 42, 0.06);
  --atl-shadow-card-h:    0 6px 20px rgba(26, 58, 42, 0.12);
  --atl-shadow-dark:      0 4px 24px rgba(26, 58, 42, 0.10);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. RESET GLOBAL SCOPED .atl-*
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[class*="atl-"] *,
[id*="atl-"] * {
  box-sizing: border-box;
}
[class*="atl-"],
[id*="atl-"] {
  font-family: var(--atl-font-corps);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. LAYOUT — Conteneur intérieur
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Paddings section standards */
.atl-sec       { padding: 5rem 2rem; }
.atl-sec-sm    { padding: 3.5rem 2rem; }
.atl-sec-xs    { padding: 2rem; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. TYPOGRAPHIE GLOBALE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-h1 {
  font-family: var(--atl-font-titre);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.atl-h2 {
  font-family: var(--atl-font-titre);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}
.atl-h3 {
  font-family: var(--atl-font-titre);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
.atl-em         { font-style: normal; color: var(--atl-or); }
.atl-intro      { font-size: 15px; line-height: 1.75; max-width: 620px; margin-bottom: 2.5rem; }

/* Couleurs texte */
.atl-tc-dk      { color: var(--atl-texte-dark); }
.atl-tc-md      { color: var(--atl-texte-mid); }
.atl-tc-dim     { color: var(--atl-texte-dim); }
.atl-tc-lt      { color: var(--atl-texte-light); }
.atl-tc-mu      { color: var(--atl-texte-muted); }
.atl-tc-gv      { color: var(--atl-vert-vif); }
.atl-tc-or      { color: var(--atl-or); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. COMPOSANT — Eyebrow (ligne + label de section)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.1rem;
}
.atl-eyebrow-line {
  width: 32px;
  height: 2px;
  border-radius: 2px;
}
.atl-eyebrow-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Variantes couleur eyebrow */
.atl-eyebrow-line.gv,
.atl-eyebrow-line-gv  { background: var(--atl-vert-vif); }
.atl-eyebrow-line.or,
.atl-eyebrow-line-or  { background: var(--atl-or); }
.atl-eyebrow-line.w,
.atl-eyebrow-line-w   { background: rgba(157, 196, 157, 0.70); }

.atl-eyebrow-text.gv,
.atl-eyebrow-text-gv  { color: var(--atl-vert-vif); }
.atl-eyebrow-text.or,
.atl-eyebrow-text-or  { color: var(--atl-or); }
.atl-eyebrow-text.w,
.atl-eyebrow-text-w   { color: rgba(157, 196, 157, 0.80); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. COMPOSANT — Cards (cartes transparentes)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-card {
  background: var(--atl-card-bg);
  border: 1px solid var(--atl-card-border);
  border-radius: var(--atl-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--atl-shadow-card);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.atl-card:hover {
  border-color: var(--atl-card-border-h);
  transform: translateY(-2px);
  box-shadow: var(--atl-shadow-card-h);
}

/* Card sombre (fond vert) */
.atl-card-dark {
  background: var(--atl-card-bg-dark);
  border: 1px solid var(--atl-card-border);
  border-radius: var(--atl-radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--atl-shadow-dark);
}

/* Card subtile (sur fond sombre) */
.atl-card-subtle {
  background: var(--atl-card-bg-subtle);
  border: 1px solid rgba(141, 198, 63, 0.18);
  border-radius: var(--atl-radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.atl-card-subtle:hover {
  background: var(--atl-card-bg-subtle-h);
  border-color: rgba(141, 198, 63, 0.45);
  transform: translateY(-2px);
}

/* Card chaude (Maroc / or) */
.atl-card-warm {
  background: var(--atl-card-bg-warm);
  border: 1px solid var(--atl-card-border-or);
  border-radius: var(--atl-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Séparateur interne de card */
.atl-sep {
  height: 1px;
  background: rgba(141, 198, 63, 0.12);
  margin: 0.75rem 0;
}
.atl-sep-or { background: rgba(245, 168, 0, 0.15); }
.atl-sep-w  { background: rgba(255, 255, 255, 0.08); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. COMPOSANT — Icône cercle
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-icon-circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.atl-icon-circle svg {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tailles standard */
.atl-icon-xs  { width: 28px; height: 28px; }
.atl-icon-sm  { width: 36px; height: 36px; }
.atl-icon-md  { width: 44px; height: 44px; }
.atl-icon-lg  { width: 56px; height: 56px; }

/* Couleurs */
.atl-icon-gv {
  background: rgba(141, 198, 63, 0.12);
  border: 1.5px solid rgba(141, 198, 63, 0.30);
}
.atl-icon-gv svg { stroke: var(--atl-vert-vif); }

.atl-icon-or {
  background: rgba(245, 168, 0, 0.12);
  border: 1.5px solid rgba(245, 168, 0, 0.30);
}
.atl-icon-or svg { stroke: var(--atl-or); }

.atl-icon-dk {
  background: rgba(234, 243, 222, 0.75);
  border: 1.5px solid rgba(192, 221, 151, 0.60);
}
.atl-icon-dk svg { stroke: var(--atl-vert-profond); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. COMPOSANT — Listes à points
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-list       { display: flex; flex-direction: column; gap: 8px; }
.atl-list-sm    { gap: 6px; }
.atl-list-lg    { gap: 10px; }

.atl-li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.atl-li-sm { font-size: 12px; }
.atl-li-lg { font-size: 14px; }

/* Dot */
.atl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.atl-dot-gv  { background: var(--atl-vert-vif); }
.atl-dot-or  { background: var(--atl-or); }
.atl-dot-w   { background: rgba(141, 198, 63, 0.70); }
.atl-dot-dim { background: var(--atl-texte-dim); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. COMPOSANT — Tags & badges
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-tag {
  display: inline-block;
  font-family: var(--atl-font-titre);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--atl-radius-xs);
  letter-spacing: 0.04em;
}
.atl-tag-gv {
  background: rgba(141, 198, 63, 0.12);
  color: rgba(192, 221, 151, 0.90);
  border: 1px solid rgba(141, 198, 63, 0.22);
}
.atl-tag-or {
  background: rgba(245, 168, 0, 0.15);
  color: rgba(140, 90, 0, 0.90);
  border: 1px solid rgba(245, 168, 0, 0.28);
}
.atl-tag-dk {
  background: var(--atl-vert-clair);
  color: var(--atl-vert-profond);
  border: 1px solid var(--atl-vert-mid);
}
.atl-tag-dark {
  background: var(--atl-vert-profond);
  color: var(--atl-vert-mid);
}

/* Pilule disponibilité */
.atl-avail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--atl-font-titre);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--atl-radius-pill);
  letter-spacing: 0.03em;
}
.atl-avail-dot { width: 6px; height: 6px; border-radius: 50%; }
.atl-avail-on {
  background: rgba(141, 198, 63, 0.15);
  color: #1A4A1A;
  border: 1px solid rgba(141, 198, 63, 0.35);
}
.atl-avail-on .atl-avail-dot    { background: var(--atl-vert-vif); }
.atl-avail-ext {
  background: rgba(245, 168, 0, 0.15);
  color: #5A3800;
  border: 1px solid rgba(245, 168, 0, 0.30);
}
.atl-avail-ext .atl-avail-dot   { background: var(--atl-or); }

/* Certif badge (nav, footer, hero) */
.atl-cert {
  font-family: var(--atl-font-titre);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--atl-radius-xs);
  background: rgba(141, 198, 63, 0.10);
  color: rgba(192, 221, 151, 0.90);
  border: 1px solid rgba(141, 198, 63, 0.22);
  letter-spacing: 0.04em;
  display: inline-block;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. COMPOSANT — Boutons
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Principal — Or plein */
.atl-btn-p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--atl-or);
  color: var(--atl-vert-profond);
  font-family: var(--atl-font-titre);
  font-size: 14px;
  font-weight: 800;
  padding: 13px 28px;
  border-radius: var(--atl-radius-sm);
  border: none;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.18s ease, transform 0.15s ease;
}
.atl-btn-p:hover {
  background: #e09a00;
  transform: translateY(-1px);
}
.atl-btn-p svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--atl-vert-profond);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Secondaire — Outline sombre */
.atl-btn-s {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--atl-texte-dark);
  font-family: var(--atl-font-titre);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--atl-radius-sm);
  border: 1.5px solid rgba(26, 58, 42, 0.28);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.atl-btn-s:hover {
  border-color: rgba(26, 58, 42, 0.55);
  background: rgba(26, 58, 42, 0.05);
}
.atl-btn-s svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--atl-texte-dark);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Clair — Outline blanc (sur fond sombre) */
.atl-btn-lt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--atl-texte-light);
  font-family: var(--atl-font-titre);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--atl-radius-sm);
  border: 1.5px solid rgba(244, 240, 230, 0.28);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.atl-btn-lt:hover {
  border-color: rgba(244, 240, 230, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.atl-btn-lt svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--atl-texte-light);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Vert — CTA secondaire vert */
.atl-btn-gv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--atl-vert-vif);
  color: var(--atl-vert-profond);
  font-family: var(--atl-font-titre);
  font-size: 14px;
  font-weight: 800;
  padding: 13px 28px;
  border-radius: var(--atl-radius-sm);
  border: none;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.18s ease, transform 0.15s ease;
}
.atl-btn-gv:hover {
  background: #7bb635;
  transform: translateY(-1px);
}
.atl-btn-gv svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--atl-vert-profond);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Tailles boutons */
.atl-btn-sm { font-size: 12px; padding: 8px 18px; }
.atl-btn-lg { font-size: 15px; padding: 14px 32px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. COMPOSANT — Tableaux
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-table-wrap {
  background: var(--atl-card-bg);
  border: 1px solid var(--atl-card-border);
  border-radius: var(--atl-radius);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.atl-table {
  width: 100%;
  border-collapse: collapse;
}
.atl-table thead tr {
  background: rgba(26, 58, 42, 0.75);
}
.atl-table thead th {
  font-family: var(--atl-font-titre);
  font-size: 11px;
  font-weight: 700;
  color: var(--atl-texte-light);
  padding: 11px 16px;
  text-align: left;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(141, 198, 63, 0.20);
}
.atl-table tbody tr {
  border-bottom: 1px solid rgba(141, 198, 63, 0.10);
  transition: background 0.15s ease;
}
.atl-table tbody tr:hover {
  background: rgba(141, 198, 63, 0.05);
}
.atl-table tbody tr:last-child {
  border-bottom: none;
}
.atl-table td {
  font-size: 13px;
  padding: 10px 16px;
  color: var(--atl-texte-mid);
  vertical-align: middle;
  line-height: 1.45;
}
.atl-table td:first-child {
  font-family: var(--atl-font-titre);
  font-weight: 700;
  color: var(--atl-texte-dark);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. COMPOSANT — Stat card (chiffres clés)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  transition: background 0.2s ease;
}
.atl-stat:hover { background: rgba(141, 198, 63, 0.08); }
.atl-stat-number {
  font-family: var(--atl-font-titre);
  font-size: 24px;
  font-weight: 800;
  color: var(--atl-or);
  line-height: 1;
}
.atl-stat-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--atl-or);
  opacity: 0.75;
}
.atl-stat-label {
  font-size: 10px;
  color: rgba(157, 196, 157, 0.75);
  margin-top: 4px;
  line-height: 1.3;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. COMPOSANT — Barre de disponibilité produit
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-avail-bar-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
.atl-avail-bar-label {
  font-size: 10px;
  color: var(--atl-texte-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.atl-avail-bar {
  flex: 1;
  height: 4px;
  background: rgba(141, 198, 63, 0.15);
  border-radius: 99px;
  overflow: hidden;
}
.atl-avail-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--atl-vert-vif);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. COMPOSANT — Badge animé (hero eyebrow avec dot pulsant)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(141, 198, 63, 0.10);
  border: 1px solid rgba(141, 198, 63, 0.28);
  border-radius: var(--atl-radius-pill);
  padding: 5px 14px 5px 9px;
}
.atl-badge-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--atl-vert-vif);
  animation: atl-pulse 2.2s ease-in-out infinite;
}
.atl-badge-live-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--atl-texte-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. COMPOSANT — Motif de fond (pattern grille)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-pattern {
  position: relative;
  overflow: hidden;
}
.atl-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(141, 198, 63, 0.03) 0,
    rgba(141, 198, 63, 0.03) 1px,
    transparent 1px,
    transparent 28px
  );
  pointer-events: none;
  z-index: 0;
}
.atl-pattern > * { position: relative; z-index: 1; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. COMPOSANT — Indicateur scroll
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.atl-scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--atl-vert-vif), transparent);
  animation: atl-scroll-anim 1.8s ease-in-out infinite;
  transform-origin: top;
}
.atl-scroll-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(141, 198, 63, 0.45);
  text-transform: uppercase;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. ANIMATIONS GLOBALES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes atl-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

@keyframes atl-scroll-anim {
  0%   { transform: scaleY(0); opacity: 0; transform-origin: top;    }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

@keyframes atl-scroll-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes atl-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes atl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Classes d'animation applicables */
.atl-anim-fade-up  { animation: atl-fade-up  0.5s ease forwards; }
.atl-anim-fade-in  { animation: atl-fade-in  0.4s ease forwards; }

/* Délais d'animation */
.atl-delay-1 { animation-delay: 0.1s; }
.atl-delay-2 { animation-delay: 0.2s; }
.atl-delay-3 { animation-delay: 0.3s; }
.atl-delay-4 { animation-delay: 0.4s; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. GRILLES UTILITAIRES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.atl-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.atl-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.atl-grid-5  { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.atl-grid-gap-sm { gap: 0.75rem; }
.atl-grid-gap-lg { gap: 2rem; }

.atl-flex        { display: flex; }
.atl-flex-center { display: flex; align-items: center; justify-content: center; }
.atl-flex-between{ display: flex; align-items: center; justify-content: space-between; }
.atl-flex-wrap   { flex-wrap: wrap; }
.atl-gap-sm      { gap: 0.5rem; }
.atl-gap-md      { gap: 0.75rem; }
.atl-gap-lg      { gap: 1.25rem; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. RESET ELEMENTOR — Neutralise les conflits potentiels
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Force le fond transparent sur les widgets HTML Elementor
   pour que les fonds de section Elementor soient visibles */
.elementor-widget-html .atl-hero,
.elementor-widget-html .atl-s3,
.elementor-widget-html .atl-s4,
.elementor-widget-html .atl-s5,
.elementor-widget-html .atl-s7,
.elementor-widget-html .atl-s8,
.elementor-widget-html .atl-s9,
.elementor-widget-html .atl-qc-hero,
.elementor-widget-html .atl-ap-hero,
.elementor-widget-html .atl-lg-hero {
  background: transparent !important;
}

/* Neutralise les marges Elementor qui peuvent casser les layouts */
.elementor-widget-html {
  line-height: inherit;
}
.elementor-widget-html p,
.elementor-widget-html h1,
.elementor-widget-html h2,
.elementor-widget-html h3 {
  margin-bottom: 0;
}

/* Évite la duplication du @import Google Fonts si déjà chargé par le thème */
/* Note : si Raleway et DM Sans sont configurés dans Elementor > Réglages > Typographie,
   supprimer le @import en haut de ce fichier */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. RESPONSIVE GLOBAL — Breakpoints standards
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tablette — 960px */
@media (max-width: 960px) {
  .atl-grid-3,
  .atl-grid-4,
  .atl-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .atl-sec    { padding: 3.5rem 1.5rem; }
  .atl-sec-sm { padding: 2.5rem 1.5rem; }
}

/* Mobile large — 600px */
@media (max-width: 600px) {
  .atl-grid-2,
  .atl-grid-3,
  .atl-grid-4,
  .atl-grid-5 {
    grid-template-columns: 1fr;
  }
  .atl-grid-2-keep { grid-template-columns: repeat(2, 1fr); }

  .atl-h1 { font-size: 24px; }
  .atl-h2 { font-size: 20px; }

  .atl-btn-p,
  .atl-btn-s,
  .atl-btn-lt,
  .atl-btn-gv {
    width: 100%;
    justify-content: center;
  }

  .atl-sec    { padding: 2.5rem 1rem; }
  .atl-sec-sm { padding: 2rem 1rem; }
}

/* Mobile étroit — 400px */
@media (max-width: 400px) {
  .atl-inner { padding: 0 0.75rem; }
  .atl-h1    { font-size: 22px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22. UTILITAIRES DIVERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atl-text-center { text-align: center; }
.atl-text-right  { text-align: right; }
.atl-mt-sm       { margin-top: 0.75rem; }
.atl-mt-md       { margin-top: 1.25rem; }
.atl-mt-lg       { margin-top: 2rem; }
.atl-mb-sm       { margin-bottom: 0.75rem; }
.atl-mb-md       { margin-bottom: 1.25rem; }
.atl-mb-lg       { margin-bottom: 2rem; }
.atl-hidden      { display: none; }
.atl-sr-only     {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}