/* =========================================================
   Charte graphique de la matière
   Pour changer de style : modifier uniquement ce bloc
   (et, pour le mode sombre, le bloc « Mode sombre » plus bas).
   ========================================================= */
:root {
  --matiere-principal: #0b2a4a;   /* bleu nuit : en-tête, titres */
  --matiere-accent:    #326ce5;   /* bleu vif : liens, boutons */
  --matiere-clair:     #eaf0fc;   /* fonds légers */
  --matiere-trait:     #98b6f2;   /* traits sur fond sombre */
  --matiere-degrade: linear-gradient(135deg, #0b2a4a 0%, #173e78 55%, #326ce5 100%);

  /* Couleurs du contenu (mode clair) */
  --matiere-titre:        #0b2a4a;   /* h1, h2 */
  --matiere-titre-3:      #284460;   /* h3 */
  --matiere-bord-h2:      #eaf0fc;   /* filet sous les h2 */
  --matiere-tab-bord:     #dae5fa;   /* bordure des tableaux */
  --matiere-tab-entete:   #0b2a4a;   /* fond des en-têtes de tableau */
  --matiere-tab-pair:     #f7f9fe;   /* lignes paires des tableaux */
}

:root > * {
  --md-primary-fg-color:        #0b2a4a;
  --md-primary-fg-color--light: #3c556e;
  --md-primary-fg-color--dark:  #071b30;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #e2e5e9;
  --md-accent-fg-color:         #326ce5;
  --md-typeset-a-color:         #2a5cc3;
}

/* =========================================================
   Mode sombre (schéma « slate » de Material), affiché par défaut.
   Le sélecteur body[...] est plus précis que « :root > * »
   et l'emporte donc, quel que soit l'ordre.
   ========================================================= */
body[data-md-color-scheme="slate"] {
  --md-typeset-a-color:  #98b6f2;
  --md-accent-fg-color:  #84a7ef;

  --matiere-titre:        #f1f5fd;
  --matiere-titre-3:      #b7ccf6;
  --matiere-bord-h2:      #37506b;
  --matiere-tab-bord:     #37506b;
  --matiere-tab-entete:   #173e78;
  --matiere-tab-pair:     rgba(255, 255, 255, .04);
}

/* En-tête : logo sur pastille blanche (lisible quel que soit le logo) */
.md-header { border-bottom: 3px solid var(--matiere-accent); }
.md-header__button.md-logo {
  background: #fff;
  border-radius: 6px;
  padding: .15rem .35rem;
  margin: .35rem .4rem .35rem .2rem;
}
.md-header__button.md-logo img { height: 1.6rem; width: auto; }

/* Typographie des contenus */
.md-typeset h1 { color: var(--matiere-titre); font-weight: 700; letter-spacing: -.01em; }
.md-typeset h2 {
  color: var(--matiere-titre);
  font-weight: 700;
  border-bottom: 2px solid var(--matiere-bord-h2);
  padding-bottom: .3rem;
}
.md-typeset h3 { color: var(--matiere-titre-3); font-weight: 600; }

/* Tableaux */
.md-typeset table:not([class]) {
  font-size: .72rem;
  border: 1px solid var(--matiere-tab-bord);
  border-radius: 6px;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background: var(--matiere-tab-entete);
  color: #fff;
  font-weight: 600;
}
.md-typeset table:not([class]) tbody tr:nth-child(even) { background: var(--matiere-tab-pair); }

/* Boutons */
.md-typeset .md-button--primary {
  background-color: var(--matiere-accent);
  border-color: var(--matiere-accent);
}

/* Cases à cocher (points de contrôle) */
.md-typeset .task-list-control .task-list-indicator::before { background-color: var(--matiere-accent); }

/* =========================================================
   Page d'accueil (bannière)
   La bannière garde son fond bleu et son texte blanc dans les
   deux modes : elle est lisible sans adaptation.
   ========================================================= */
.hero { background: var(--matiere-degrade); color: #fff; position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/banniere.svg") center / cover no-repeat;
  opacity: .6;
}
.hero__inner {
  position: relative;
  display: flex; gap: 2rem; align-items: center; justify-content: space-between;
  padding: 3rem .8rem;
}
.hero__etiquette {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem; opacity: .9; margin: 0;
}
.hero h1 { color: #fff; font-size: 2.2rem; font-weight: 700; margin: .4rem 0 .6rem; line-height: 1.2; }
.hero__sous-titre { font-size: .95rem; opacity: .95; max-width: 34rem; margin: 0 0 1.2rem; }
.hero .md-button { color: #fff; border-color: #fff; }
.hero .md-button--primary { background: #fff; color: var(--matiere-principal); border-color: #fff; }
.hero .md-button:hover { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; }
.hero .md-button--primary:hover { background: var(--matiere-clair); color: var(--matiere-principal); }
.hero__chiffres { display: flex; gap: 1.6rem; flex-wrap: wrap; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.hero__chiffres li { display: flex; flex-direction: column; border-left: 3px solid var(--matiere-trait); padding-left: .7rem; }
.hero__chiffres strong { font-size: 1.4rem; line-height: 1.1; }
.hero__chiffres span { font-size: .68rem; opacity: .9; }
.hero__logo { background: #fff; border-radius: 12px; padding: 1rem 1.2rem; flex: 0 0 auto; }
.hero__logo img { display: block; height: 5rem; width: auto; }

@media (max-width: 44.9375em) {
  .hero__inner { flex-direction: column; align-items: flex-start; padding: 2rem .8rem; }
  .hero h1 { font-size: 1.7rem; }
  .hero__logo img { height: 3.5rem; }
}