/* ===== Héros éditorial ===== */
.hero-editorial {
  padding-block: var(--space-7);
  text-align: center;
}

.hero-conteneur {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.hero-conteneur h1 {
  margin-block-end: var(--space-4);
}

.hero-conteneur p {
  margin-block-end: var(--space-5);
}

.hero-bouton {
  display: inline-flex;
}

/* ===== Critères de comparaison ===== */
.criteres-comparaison {
  padding-block: var(--space-7);
}

.criteres-comparaison h2 {
  text-align: center;
  margin-block-end: var(--space-6);
}

.grille-criteres {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.carte-critere {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.carte-critere .icone-critere {
  font-size: 2rem;
  margin-block-end: var(--space-3);
}

.carte-critere h3 {
  margin-block-end: var(--space-3);
}

.carte-critere p {
  margin-block-end: 0;
}

/* ===== Comparatif des plateformes ===== */
.comparatif-plateformes {
  padding-block: var(--space-7);
}

.comparatif-plateformes__entete {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  margin-block-end: var(--space-6);
}

.comparatif-surtitre,
.categorie-offre,
.note-label {
  display: block;
  color: var(--text-secondary);
  font-size: var(--font-size-caption);
  font-weight: 700;
  line-height: var(--line-height-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparatif-surtitre {
  margin-block-end: var(--space-2);
}

.comparatif-plateformes h2 {
  margin-block-end: var(--space-3);
}

.comparatif-introduction {
  max-width: 78ch;
  margin-block-end: 0;
  color: var(--text-secondary);
}

.cartes-comparaison {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.carte-comparaison {
  padding: 0;
  overflow: hidden;
  min-width: 0;
}

.carte-comparaison__contenu {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 310px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
}

.zone-gauche {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.placement {
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  background-color: var(--accent-gold-light);
  border: 1px solid var(--accent-gold);
  box-shadow: 0 8px 18px rgba(43, 37, 32, 0.12);
}

.logo-operateur {
  width: 122px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background-color: var(--bg-page);
  border: 1px solid var(--border-light);
}

.logo-operateur img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zone-centre {
  min-width: 0;
}

.categorie-offre {
  margin-block-end: var(--space-2);
}

.zone-centre h3 {
  font-size: 1.35rem;
  margin-block-end: var(--space-2);
}

.zone-centre p {
  margin-block-end: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.zone-droite {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
}

.note {
  flex: 0 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.note-label {
  margin-block-end: var(--space-1);
}

.note-valeur {
  color: var(--text-primary);
  font-family: var(--heading-font);
  font-size: 2rem;
  line-height: 1;
}

.etoiles {
  color: var(--accent-gold);
  font-size: 0.9rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.note-texte {
  font-size: var(--font-size-caption);
  color: var(--text-secondary);
}

.actions-comparaison {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.btn-comparaison {
  width: 100%;
  text-align: center;
  padding: 0.65em 1em;
  font-size: var(--font-size-small);
  font-weight: 700;
  white-space: nowrap;
}

.btn-comparaison--principal {
  gap: var(--space-2);
  background-color: var(--accent-gold);
  color: var(--text-primary);
}

.btn-comparaison--principal:hover,
.btn-comparaison--principal:focus-visible {
  background-color: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-page);
}

.disclaimer {
  padding: 0.65rem var(--space-3);
  border-top: 1px solid var(--border-light);
  font-size: var(--font-size-caption);
  line-height: 1.35;
  color: var(--text-secondary);
  margin: 0;
}

/* ===== Pourquoi nous faire confiance ===== */
.pourquoi-confiance {
  padding-block: var(--space-7);
}

.pourquoi-confiance h2 {
  text-align: center;
  margin-block-end: var(--space-6);
}

.conteneur-confiance {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
}

.colonne-gauche {
  flex-basis: 60%;
  min-width: 0;
}

.colonne-gauche h3 {
  margin-block-end: var(--space-3);
}

.colonne-gauche p {
  margin-block-end: var(--space-4);
}

.pull-quote {
  margin-block-start: var(--space-4);
}

.colonne-droite {
  flex-basis: 40%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.bloc-confiance h3 {
  margin-block-end: var(--space-3);
}

.bloc-confiance p {
  margin-block-end: var(--space-3);
}

.btn-confiance {
  display: inline-flex;
  margin-block-start: var(--space-3);
}

/* ===== Éditorial : Comprendre les paris en ligne ===== */
.edito-paris {
  padding-block: var(--space-7);
}

.edito-paris h2 {
  text-align: center;
  margin-block-end: var(--space-6);
}

.conteneur-edito {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
  align-items: flex-start;
}

.colonne-texte {
  flex-basis: 60%;
  min-width: 0;
}

.colonne-texte h3 {
  margin-block-end: var(--space-3);
}

.colonne-texte p {
  margin-block-end: var(--space-4);
}

.colonne-image {
  flex-basis: 40%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

.colonne-image img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* ===== Aperçu FAQ ===== */
.apercu-faq {
  padding-block: var(--space-7);
}

.apercu-faq h2 {
  text-align: center;
  margin-block-end: var(--space-6);
}

.conteneur-faq {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  text-align: center;
}

.faq-item {
  margin-block-end: var(--space-4);
}

.faq-item h3 {
  margin-block-end: var(--space-3);
}

.faq-item p {
  margin-block-end: 0;
}

.btn-faq {
  display: inline-flex;
  margin-block-start: var(--space-4);
}

/* ===== Jeu responsable ===== */
.jeu-responsable {
  padding-block: var(--space-7);
  background-color: var(--bg-card);
}

.jeu-responsable h2 {
  text-align: center;
  margin-block-end: var(--space-6);
}

.conteneur-responsable {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
}

.colonne-ressources,
.colonne-conseils {
  flex-basis: 50%;
  min-width: 0;
}

.colonne-ressources h3,
.colonne-conseils h3 {
  margin-block-end: var(--space-3);
}

.colonne-ressources p {
  margin-block-end: var(--space-3);
}

.liste-ressources {
  list-style: none;
  padding: 0;
  margin: 0;
}

.liste-ressources li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.icone-ressource {
  font-size: 1.2rem;
}

.liste-conseils {
  list-style: none;
  padding: 0;
  margin: 0;
}

.liste-conseils li {
  margin-block-end: var(--space-2);
  padding-inline-start: var(--space-4);
  position: relative;
}

.liste-conseils li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-gold);
}

/* ===== Appel à l'action final ===== */
.cta-final {
  padding-block: var(--space-7);
  text-align: center;
}

.conteneur-cta {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.conteneur-cta h2 {
  margin-block-end: var(--space-3);
}

.conteneur-cta p {
  margin-block-end: var(--space-5);
}

.cta-boutons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--space-3);
}

.btn-cta {
  display: inline-flex;
}

/* ===== Responsive ===== */
@media (max-width: 64rem) {
  .grille-criteres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carte-comparaison__contenu {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .zone-droite {
    grid-column: 2;
    justify-content: flex-start;
  }

  .actions-comparaison {
    flex: 0 1 360px;
  }

  .conteneur-confiance {
    flex-direction: column;
  }

  .colonne-gauche,
  .colonne-droite {
    flex-basis: auto;
  }

  .conteneur-edito {
    flex-direction: column;
  }

  .colonne-texte,
  .colonne-image {
    flex-basis: auto;
    width: 100%;
  }

  .colonne-image {
    order: -1;
    margin-block-end: var(--space-4);
  }

  .colonne-image img {
    max-width: 200px;
  }

  .conteneur-responsable {
    flex-direction: column;
  }

  .colonne-ressources,
  .colonne-conseils {
    flex-basis: auto;
  }

  .cta-boutons {
    flex-direction: column;
    align-items: center;
  }

  .btn-cta {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 48rem) {
  .grille-criteres {
    grid-template-columns: 1fr;
  }

  .comparatif-plateformes__entete {
    margin-block-end: var(--space-4);
  }

  .carte-comparaison__contenu {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .zone-gauche,
  .zone-centre,
  .zone-droite {
    grid-column: auto;
    width: 100%;
  }

  .zone-gauche {
    justify-content: flex-start;
  }

  .zone-droite {
    flex-direction: column;
    align-items: stretch;
  }

  .note {
    flex-basis: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-2);
  }

  .note-label,
  .note-valeur,
  .etoiles,
  .note-texte {
    margin: 0;
  }

  .actions-comparaison {
    flex-basis: auto;
  }

  .disclaimer {
    padding-inline: var(--space-4);
  }

  .hero-editorial,
  .criteres-comparaison,
  .comparatif-plateformes,
  .pourquoi-confiance,
  .edito-paris,
  .apercu-faq,
  .jeu-responsable,
  .cta-final {
    padding-block: var(--space-5);
  }

  .hero-conteneur h1 {
    font-size: 2rem;
  }

  .cta-boutons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-cta {
    width: 100%;
  }
}