/* ============================================================
   UPR.mr — Feuille de style principale
   Guide des paris sportifs en Mauritanie
   Rédigé par un développeur mauritanien
   ============================================================ */

/* ── 1. Importation des polices ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ── 2. Variables CSS (palette complète) ────────────────── */
:root {
  /* Couleurs principales */
  --couleur-primaire:      #1A3A6B;
  --couleur-secondaire:    #E8851A;
  --couleur-fond-principal: #F5F6FA;
  --couleur-fond-carte:    #FFFFFF;
  --couleur-texte-principal: #1A1A2E;
  --couleur-texte-secondaire: #6B7280;

  /* Couleurs fonctionnelles */
  --couleur-succes:        #16A34A;
  --couleur-avertissement: #D97706;
  --couleur-erreur:        #DC2626;
  --couleur-info:          #2563EB;

  /* Couleurs de notation */
  --couleur-excellent:     #F59E0B;
  --couleur-bien:          #10B981;
  --couleur-moyen:         #6B7280;

  /* Couleurs du pied de page */
  --pied-fond:             #1A3A6B;
  --pied-texte:            #E5E7EB;
  --pied-lien:             #93C5FD;
  --pied-lien-survol:      #FFFFFF;
  --pied-separateur:       rgba(255,255,255,0.1);

  /* Méthodes de paiement */
  --orange-money:          #FF6600;
  --bankily:               #00A651;
  --chinguitel:            #C8102E;
  --usdt:                  #26A17B;
  --visa:                  #1A1F71;

  /* Typographie */
  --police-latine:         'Inter', system-ui, -apple-system, sans-serif;
  --police-arabe:          'Noto Sans Arabic', 'Inter', sans-serif;

  /* Tailles de texte */
  --taille-h1:             32px;
  --taille-h2:             24px;
  --taille-h3:             18px;
  --taille-h4:             16px;
  --taille-corps:          16px;
  --taille-secondaire:     14px;
  --taille-legende:        12px;

  /* Dimensions de mise en page */
  --largeur-max:           1200px;
  --gouttiere-desktop:     24px;
  --gouttiere-mobile:      16px;
  --hauteur-entete:        64px;

  /* Rayons et ombres */
  --rayon-carte:           12px;
  --rayon-bouton:          8px;
  --rayon-badge:           20px;
  --ombre-carte:           0 2px 12px rgba(0,0,0,0.08);
  --ombre-survol:          0 4px 20px rgba(0,0,0,0.12);
  --ombre-entete:          0 1px 0 #E5E7EB;

  /* Transitions */
  --transition-rapide:     0.18s ease;
  --transition-normale:    0.28s ease;
}

/* ── 3. Réinitialisation et base ─────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--police-latine);
  font-size: var(--taille-corps);
  line-height: 1.7;
  color: var(--couleur-texte-principal);
  background-color: var(--couleur-fond-principal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.arabe {
  font-family: var(--police-arabe);
  direction: rtl;
  text-align: right;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--couleur-primaire);
  text-decoration: none;
  transition: color var(--transition-rapide);
}

a:hover {
  color: var(--couleur-secondaire);
}

ul, ol {
  padding-left: 1.5rem;
}

/* ── 4. Typographie ──────────────────────────────────────── */
h1 { font-size: var(--taille-h1); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--taille-h2); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--taille-h3); font-weight: 600; line-height: 1.4; }
h4 { font-size: var(--taille-h4); font-weight: 500; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.texte-secondaire { color: var(--couleur-texte-secondaire); font-size: var(--taille-secondaire); }
.legende { color: var(--couleur-texte-secondaire); font-size: var(--taille-legende); }

/* ── 5. Grille et conteneur ─────────────────────────────── */
.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gouttiere-desktop);
}

.grille {
  display: grid;
  gap: var(--gouttiere-desktop);
}

.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.grille-12 { grid-template-columns: repeat(12, 1fr); }

/* ── 6. En-tête (Header) ─────────────────────────────────── */
.entete {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--hauteur-entete);
  background: var(--couleur-fond-carte);
  border-bottom: 1px solid #E5E7EB;
  box-shadow: var(--ombre-entete);
}

.entete-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gouttiere-desktop);
  gap: 16px;
}

/* Logo */
.logo-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-entete img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.logo-entete-nom {
  font-size: 20px;
  font-weight: 700;
  color: var(--couleur-primaire);
  letter-spacing: -0.5px;
}

.logo-entete-nom span {
  color: var(--couleur-secondaire);
}

/* Navigation principale */
.navigation-principale {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navigation-principale a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--couleur-texte-principal);
  border-radius: 6px;
  transition: background var(--transition-rapide), color var(--transition-rapide);
  white-space: nowrap;
}

.navigation-principale a:hover,
.navigation-principale a.actif {
  background: var(--couleur-fond-principal);
  color: var(--couleur-primaire);
}

/* Sélecteur de langue */
.selecteur-langue {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.selecteur-langue a {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--couleur-texte-secondaire);
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  transition: all var(--transition-rapide);
}

.selecteur-langue a:hover,
.selecteur-langue a.actif {
  color: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
  background: rgba(26,58,107,0.05);
}

/* Hamburger mobile */
.bouton-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background var(--transition-rapide);
}

.bouton-hamburger:hover {
  background: var(--couleur-fond-principal);
}

.bouton-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--couleur-texte-principal);
  border-radius: 2px;
  transition: transform var(--transition-normale), opacity var(--transition-rapide), width var(--transition-rapide);
}

.bouton-hamburger.ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bouton-hamburger.ouvert span:nth-child(2) { opacity: 0; width: 60%; }
.bouton-hamburger.ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Tiroir mobile */
.tiroir-mobile {
  position: fixed;
  top: var(--hauteur-entete);
  left: -100%;
  width: 280px;
  height: calc(100vh - var(--hauteur-entete));
  background: var(--couleur-fond-carte);
  border-right: 1px solid #E5E7EB;
  overflow-y: auto;
  z-index: 999;
  transition: left var(--transition-normale);
  box-shadow: 4px 0 20px rgba(0,0,0,0.08);
}

.tiroir-mobile.ouvert {
  left: 0;
}

.tiroir-superposition {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 998;
  top: var(--hauteur-entete);
}

.tiroir-superposition.ouvert {
  display: block;
}

.tiroir-navigation {
  list-style: none;
  padding: 16px 0;
  margin: 0;
}

.tiroir-navigation a {
  display: block;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--couleur-texte-principal);
  border-bottom: 1px solid #F3F4F6;
  transition: background var(--transition-rapide), color var(--transition-rapide);
}

.tiroir-navigation a:hover {
  background: var(--couleur-fond-principal);
  color: var(--couleur-primaire);
}

.tiroir-langue {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
}

/* ── 7. Pied de page (Footer) ────────────────────────────── */
.pied-de-page {
  background: var(--pied-fond);
  color: var(--pied-texte);
  margin-top: 64px;
}

.pied-corps {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 48px var(--gouttiere-desktop) 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.pied-colonne-logo .logo-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  text-decoration: none;
}

.pied-colonne-logo img {
  width: 36px;
  height: 36px;
}

.pied-nom-site {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
}

.pied-colonne-logo p {
  font-size: 13px;
  color: #9CA3AF;
  line-height: 1.6;
  margin-top: 8px;
}

.pied-reseaux {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.pied-reseaux a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--pied-texte);
  font-size: 16px;
  transition: background var(--transition-rapide);
  text-decoration: none;
}

.pied-reseaux a:hover {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}

.pied-titre-colonne {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #9CA3AF;
  margin-bottom: 16px;
}

.pied-liens {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pied-liens li {
  margin-bottom: 8px;
}

.pied-liens a {
  color: var(--pied-lien);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--transition-rapide);
}

.pied-liens a:hover {
  color: var(--pied-lien-survol);
}

.pied-bande-inferieure {
  border-top: 1px solid var(--pied-separateur);
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 20px var(--gouttiere-desktop);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.pied-copyright {
  font-size: 13px;
  color: #6B7280;
}

.pied-avertissement {
  font-size: 12px;
  color: #6B7280;
  max-width: 600px;
  line-height: 1.5;
}

.pied-badge-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--couleur-erreur);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: middle;
}

/* ── 8. Fil d'Ariane (Breadcrumb) ───────────────────────── */
.fil-ariane {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: var(--couleur-texte-secondaire);
  padding: 12px 0;
  margin-bottom: 24px;
}

.fil-ariane a {
  color: var(--couleur-texte-secondaire);
  text-decoration: none;
  transition: color var(--transition-rapide);
}

.fil-ariane a:hover {
  color: var(--couleur-primaire);
}

.fil-ariane span {
  color: var(--couleur-texte-principal);
}

.fil-ariane-separateur {
  color: #D1D5DB;
  margin: 0 2px;
}

/* ── 9. Carte de bookmaker ──────────────────────────────── */
.carte-bookmaker {
  background: var(--couleur-fond-carte);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--transition-rapide), transform var(--transition-rapide);
  position: relative;
  border: 1px solid #F3F4F6;
}

.carte-bookmaker:hover {
  box-shadow: var(--ombre-survol);
  transform: translateY(-2px);
}

.carte-bookmaker-haut {
  display: flex;
  align-items: center;
  gap: 14px;
}

.carte-bookmaker-logo {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: contain;
  border: 1px solid #E5E7EB;
  padding: 4px;
  background: #fff;
  flex-shrink: 0;
}

.carte-bookmaker-info {
  flex: 1;
}

.carte-bookmaker-nom {
  font-size: 17px;
  font-weight: 700;
  color: var(--couleur-texte-principal);
  margin-bottom: 2px;
}

.carte-bookmaker-numero {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--couleur-primaire);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.carte-bookmaker-bonus {
  font-size: 14px;
  font-weight: 600;
  color: var(--couleur-secondaire);
}

.carte-bookmaker-detail {
  font-size: 13px;
  color: var(--couleur-texte-secondaire);
}

.carte-bookmaker-separateur {
  border: none;
  border-top: 1px solid #F3F4F6;
}

.carte-bookmaker-methodes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.carte-bookmaker-pied {
  margin-top: auto;
}

/* ── 10. Badges de méthode de paiement ──────────────────── */
.badge-paiement {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--rayon-badge);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.badge-paiement.orange-money { background: var(--orange-money); }
.badge-paiement.bankily      { background: var(--bankily); }
.badge-paiement.chinguitel   { background: var(--chinguitel); }
.badge-paiement.usdt         { background: var(--usdt); }
.badge-paiement.visa         { background: var(--visa); }
.badge-paiement.bitcoin      { background: #F7931A; }

/* ── 11. Badge de score / note ──────────────────────────── */
.badge-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.badge-note.excellent { background: var(--couleur-excellent); }
.badge-note.bien      { background: var(--couleur-primaire); }
.badge-note.moyen     { background: var(--couleur-moyen); }
.badge-note.mauvais   { background: var(--couleur-erreur); }

/* ── 12. Bouton CTA ─────────────────────────────────────── */
.bouton-inscription {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 28px;
  background: var(--couleur-secondaire);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--rayon-bouton);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-rapide), transform var(--transition-rapide);
}

.bouton-inscription:hover {
  background: #D4711A;
  color: #fff;
  transform: translateY(-1px);
}

.bouton-inscription:active {
  transform: translateY(0);
}

.bouton-secondaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--couleur-primaire);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--rayon-bouton);
  border: 2px solid var(--couleur-primaire);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-rapide);
}

.bouton-secondaire:hover {
  background: var(--couleur-primaire);
  color: #fff;
}

/* ── 13. Tableau comparatif ─────────────────────────────── */
.tableau-comparatif {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--couleur-fond-carte);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
}

.tableau-comparatif thead th {
  background: var(--couleur-primaire);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 16px;
  text-align: left;
}

.tableau-comparatif tbody tr:nth-child(even) {
  background: var(--couleur-fond-principal);
}

.tableau-comparatif tbody tr:nth-child(odd) {
  background: var(--couleur-fond-carte);
}

.tableau-comparatif tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #E5E7EB;
  color: var(--couleur-texte-principal);
}

.tableau-comparatif tbody tr:last-child td {
  border-bottom: none;
}

.tableau-comparatif tbody tr:hover {
  background: rgba(26,58,107,0.04);
}

.tableau-icone-succes { color: var(--couleur-succes); font-weight: 700; }
.tableau-icone-erreur { color: var(--couleur-erreur); font-weight: 700; }

/* ── 14. Sections de contenu ────────────────────────────── */
.section-principale {
  padding: 48px 0;
}

.section-secondaire {
  padding: 32px 0;
}

.titre-section {
  font-size: var(--taille-h2);
  font-weight: 700;
  color: var(--couleur-texte-principal);
  margin-bottom: 8px;
}

.sous-titre-section {
  font-size: var(--taille-secondaire);
  color: var(--couleur-texte-secondaire);
  margin-bottom: 32px;
  line-height: 1.5;
}

/* Hero homepage */
.section-hero {
  background: linear-gradient(135deg, var(--couleur-primaire) 0%, #234e8c 60%, #1a3a6b 100%);
  color: #fff;
  padding: 64px 0 80px;
  position: relative;
  overflow: hidden;
}

.section-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url('../img/hero-motif.webp') center/cover no-repeat;
  opacity: 0.05;
}

.hero-interieur {
  position: relative;
  z-index: 1;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gouttiere-desktop);
}

.hero-etiquette {
  display: inline-block;
  background: rgba(232,133,26,0.2);
  color: var(--couleur-secondaire);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(232,133,26,0.3);
  margin-bottom: 16px;
}

.hero-titre {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 16px;
  max-width: 700px;
}

.hero-description {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-meta-element {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}

.hero-meta-icone {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bouton-hero-principal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  background: var(--couleur-secondaire);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--rayon-bouton);
  text-decoration: none;
  transition: background var(--transition-rapide);
}

.bouton-hero-principal:hover {
  background: #D4711A;
  color: #fff;
}

.bouton-hero-secondaire {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--rayon-bouton);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.25);
  transition: background var(--transition-rapide);
}

.bouton-hero-secondaire:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* ── 15. Section méthodes de paiement ───────────────────── */
.section-methodes {
  background: var(--couleur-fond-carte);
  border-radius: var(--rayon-carte);
  padding: 32px;
  box-shadow: var(--ombre-carte);
  margin: 32px 0;
}

.grille-methodes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.carte-methode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--couleur-fond-principal);
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  min-width: 120px;
  transition: box-shadow var(--transition-rapide);
}

.carte-methode:hover {
  box-shadow: var(--ombre-carte);
}

.carte-methode img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.carte-methode-nom {
  font-size: 13px;
  font-weight: 600;
  color: var(--couleur-texte-principal);
  text-align: center;
}

/* ── 16. Section guides populaires ─────────────────────── */
.section-guides {
  padding: 48px 0;
}

.carte-guide {
  background: var(--couleur-fond-carte);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  transition: box-shadow var(--transition-rapide), transform var(--transition-rapide);
  text-decoration: none;
  color: var(--couleur-texte-principal);
  display: flex;
  flex-direction: column;
}

.carte-guide:hover {
  box-shadow: var(--ombre-survol);
  transform: translateY(-2px);
  color: var(--couleur-texte-principal);
}

.carte-guide-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.carte-guide-corps {
  padding: 20px;
  flex: 1;
}

.carte-guide-categorie {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--couleur-secondaire);
  margin-bottom: 8px;
}

.carte-guide-titre {
  font-size: 16px;
  font-weight: 600;
  color: var(--couleur-texte-principal);
  line-height: 1.4;
}

/* ── 17. Avertissement jeu responsable ──────────────────── */
.avertissement-jeu {
  background: rgba(26,58,107,0.06);
  border-left: 4px solid var(--couleur-primaire);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--couleur-texte-secondaire);
  margin: 32px 0;
  line-height: 1.5;
}

.avertissement-jeu strong {
  color: var(--couleur-texte-principal);
}

/* Section bloc responsable */
.bloc-responsable {
  background: var(--couleur-fond-carte);
  border: 1px solid #E5E7EB;
  border-radius: var(--rayon-carte);
  padding: 24px;
  margin: 40px 0;
  text-align: center;
}

.bloc-responsable-titre {
  font-size: 16px;
  font-weight: 700;
  color: var(--couleur-texte-principal);
  margin-bottom: 8px;
}

.bloc-responsable-texte {
  font-size: 13px;
  color: var(--couleur-texte-secondaire);
}

/* ── 18. Contenu éditorial (articles) ───────────────────── */
.contenu-editorial {
  max-width: 840px;
}

.contenu-editorial h2 {
  margin-top: 40px;
  margin-bottom: 16px;
  color: var(--couleur-primaire);
}

.contenu-editorial h3 {
  margin-top: 28px;
  margin-bottom: 12px;
}

.contenu-editorial ul,
.contenu-editorial ol {
  margin-bottom: 16px;
}

.contenu-editorial li {
  margin-bottom: 6px;
}

.contenu-editorial blockquote {
  border-left: 4px solid var(--couleur-secondaire);
  padding: 12px 20px;
  background: #FFF7ED;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
  font-style: italic;
  color: var(--couleur-texte-secondaire);
}

/* ── 19. FAQ en accordéon ───────────────────────────────── */
.section-faq {
  margin: 40px 0;
}

.faq-element {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: var(--couleur-fond-carte);
  border: none;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--couleur-texte-principal);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background var(--transition-rapide);
}

.faq-question:hover {
  background: var(--couleur-fond-principal);
}

.faq-question.ouvert {
  color: var(--couleur-primaire);
}

.faq-icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--transition-normale);
  color: var(--couleur-texte-secondaire);
}

.faq-question.ouvert .faq-icone {
  transform: rotate(180deg);
  color: var(--couleur-primaire);
}

.faq-reponse {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normale);
}

.faq-reponse.ouverte {
  max-height: 600px;
}

.faq-reponse-interieure {
  padding: 0 20px 16px;
  font-size: 14px;
  color: var(--couleur-texte-secondaire);
  line-height: 1.7;
  border-top: 1px solid #F3F4F6;
}

/* ── 20. Barre de progression ───────────────────────────── */
.barre-progression {
  height: 8px;
  background: #E5E7EB;
  border-radius: 4px;
  overflow: hidden;
}

.barre-remplissage {
  height: 100%;
  background: var(--couleur-secondaire);
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* ── 21. Icônes check/cross ─────────────────────────────── */
.oui { color: var(--couleur-succes); font-weight: 700; }
.non { color: var(--couleur-erreur); font-weight: 700; }

/* ── 22. Contenu de page intérieure ─────────────────────── */
.page-interieure {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 32px var(--gouttiere-desktop) 64px;
}

.page-en-tete {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 2px solid #E5E7EB;
}

.page-en-tete h1 {
  color: var(--couleur-primaire);
  margin-bottom: 8px;
}

.page-en-tete .date-mise-a-jour {
  font-size: 13px;
  color: var(--couleur-texte-secondaire);
}

/* ── 23. RTL (Arabe) ────────────────────────────────────── */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .entete-interieur { flex-direction: row-reverse; }
[dir="rtl"] .navigation-principale { flex-direction: row-reverse; }
[dir="rtl"] .tiroir-mobile { left: auto; right: -100%; border-left: 1px solid #E5E7EB; border-right: none; }
[dir="rtl"] .tiroir-mobile.ouvert { right: 0; left: auto; }
[dir="rtl"] .pied-corps { direction: rtl; }
[dir="rtl"] .fil-ariane { flex-direction: row-reverse; }
[dir="rtl"] .avertissement-jeu { border-left: none; border-right: 4px solid var(--couleur-primaire); border-radius: 8px 0 0 8px; }
[dir="rtl"] .contenu-editorial blockquote { border-left: none; border-right: 4px solid var(--couleur-secondaire); border-radius: 8px 0 0 8px; }
[dir="rtl"] .carte-bookmaker-numero { right: auto; left: 14px; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .tableau-comparatif thead th,
[dir="rtl"] .tableau-comparatif tbody td { text-align: right; }

/* ── 24. Responsive ─────────────────────────────────────── */

/* Tablette (768px — 1023px) */
@media (max-width: 1023px) {
  :root { --taille-h1: 28px; --taille-h2: 22px; }

  .navigation-principale { display: none; }
  .bouton-hamburger { display: flex; }

  .pied-corps { grid-template-columns: 1fr 1fr; gap: 32px; }

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

  .hero-titre { font-size: 28px; }
}

/* Mobile (0 — 767px) */
@media (max-width: 767px) {
  :root {
    --taille-h1: 24px;
    --taille-h2: 20px;
    --gouttiere-desktop: var(--gouttiere-mobile);
  }

  .entete-interieur { padding: 0 16px; }

  .pied-corps { grid-template-columns: 1fr; gap: 28px; padding: 32px 16px; }
  .pied-bande-inferieure { flex-direction: column; padding: 16px; }

  .grille-4, .grille-3, .grille-2 { grid-template-columns: 1fr; }

  .hero-titre { font-size: 22px; }
  .hero-actions { flex-direction: column; }
  .bouton-hero-principal, .bouton-hero-secondaire { text-align: center; justify-content: center; }

  .section-principale { padding: 32px 0; }
  .section-hero { padding: 40px 0 56px; }

  /* Tableaux → cards sur mobile */
  .tableau-responsive thead { display: none; }
  .tableau-responsive tbody tr {
    display: block;
    background: var(--couleur-fond-carte);
    border-radius: var(--rayon-carte);
    margin-bottom: 12px;
    padding: 16px;
    box-shadow: var(--ombre-carte);
  }
  .tableau-responsive tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #F3F4F6;
  }
  .tableau-responsive tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: var(--couleur-texte-secondaire);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    margin-right: 12px;
  }
  .tableau-responsive tbody td:last-child { border-bottom: none; }

  .section-methodes { padding: 20px; }
  .grille-methodes { gap: 10px; }
  .carte-methode { min-width: 90px; padding: 12px; }
}

/* Très petit écran (360px — Samsung A13) */
@media (max-width: 374px) {
  :root { --taille-h1: 20px; --taille-h2: 18px; --taille-corps: 15px; }
  .carte-bookmaker { padding: 14px; }
}

/* ── 25. Utilitaires ────────────────────────────────────── */
.masque-mobile { display: block; }
.affiche-mobile { display: none; }

@media (max-width: 767px) {
  .masque-mobile { display: none; }
  .affiche-mobile { display: block; }
}

.texte-centre { text-align: center; }
.texte-droite { text-align: right; }
.marge-haut-sm { margin-top: 16px; }
.marge-haut-md { margin-top: 32px; }
.marge-haut-lg { margin-top: 48px; }
.marge-bas-sm { margin-bottom: 16px; }
.marge-bas-md { margin-bottom: 32px; }
.marge-bas-lg { margin-bottom: 48px; }
.couleur-primaire { color: var(--couleur-primaire); }
.couleur-secondaire { color: var(--couleur-secondaire); }
.couleur-succes { color: var(--couleur-succes); }
.couleur-erreur { color: var(--couleur-erreur); }
.gras { font-weight: 700; }