/* =========================================================================
   Judith Suminwa Tuluka — feuille commune
   Variables de charte, fond, verre, composants partagés par toutes les vues.
   Le spécifique à une page vit dans son propre fichier (accueil.css…).
   ========================================================================= */

:root {
  --bleu-nuit: #061A3A;
  --bleu-marine: #0A2A5E;
  --bleu-royal: #0B4FB3;
  --bleu-drapeau: #007FFF;
  --bleu-pale: #EAF3FF;
  --jaune: #F7D618;
  --jaune-or: #B58B00;
  --jaune-pale: #FFF6C7;
  --rouge: #CE1021;
  --rouge-sombre: #9E0C19;
  --rouge-pale: #FDECEE;
  --blanc: #FFFFFF;
  --ivoire: #FAF8F2;
  --encre: #111827;
  --gris-texte: #374151;
  --gris-moyen: #6B7280;
  --gris-bordure: #D9DEE7;
  --rayon: 1.25rem;
}

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { min-height: 100vh; }

/* Sur petit écran, un enfant de grille ou de flex garde min-width:auto : il
   refuse de descendre sous la largeur de son contenu le plus large, et c'est
   toute la carte qui déborde. Sur la bannière, l'étiquette rouge, qui ne se
   coupe pas, imposait ainsi 24 px de trop et rognait la dernière lettre du
   titre. */
:where(.grid, [class*="grid-cols"], .flex) > * { min-width: 0; }

/* Étiquette d'ouverture : autorisée à passer à la ligne. */
.etiquette-rang { flex-wrap: wrap; text-align: left; }

/* ── Fond aurore ───────────────────────────────────────────────────────── */
.bg-aurora {
  background:
    radial-gradient(60rem 40rem at 8% -8%, rgba(0, 127, 255, .20), transparent 60%),
    radial-gradient(50rem 34rem at 100% 4%, rgba(247, 214, 24, .26), transparent 55%),
    radial-gradient(42rem 30rem at 50% 108%, rgba(206, 16, 33, .07), transparent 60%),
    var(--ivoire);
  background-attachment: fixed;
}

/* ── Verre ─────────────────────────────────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: 0 10px 30px rgba(10, 42, 94, .10), inset 0 1px 0 rgba(255, 255, 255, .85);
  border-radius: var(--rayon);
}
.glass-strong {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 18px 44px rgba(10, 42, 94, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
  border-radius: 1.5rem;
}
.glass-bleu {
  background: rgba(10, 42, 94, .78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 18px 44px rgba(6, 26, 58, .28);
  border-radius: 1.5rem;
  color: #fff;
}
/* Sans backdrop-filter, le verre devient transparent et le texte illisible :
   on retombe sur des fonds opaques. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .94); }
  .glass-strong { background: rgba(255, 255, 255, .97); }
  .glass-bleu { background: var(--bleu-marine); }
}

/* ── Marque : écu aux armoiries + nom ──────────────────────────────────── */
/* L'ancienne marque posait un titre bleu marine sur un bloc bleu marine :
   le nom disparaissait, seule la fonction restait lisible. L'écu est
   désormais clair, et le texte se lit sur le verre de l'en-tête. */
.marque { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.marque-ecu {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: .9rem;
  background: linear-gradient(160deg, #fff, var(--bleu-pale));
  border: 1px solid rgba(10, 42, 94, .12);
  box-shadow: 0 2px 8px rgba(10, 42, 94, .10);
}
.marque-ecu img { width: 1.85rem; height: 1.85rem; object-fit: contain; display: block; }
.marque-texte { display: block; line-height: 1.15; }
.marque-nom {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bleu-marine);
}
.marque-fonction {
  display: block;
  margin-top: .1rem;
  font-size: .72rem;
  font-weight: 500;
  color: var(--gris-moyen);
}
@media (max-width: 380px) { .marque-fonction { display: none; } }

/* ── Armoiries en filigrane, à la place de l'ancienne diagonale ────────── */
.armoirie-filigrane {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: .07;
  object-fit: contain;
}

/* ── Cartes ────────────────────────────────────────────────────────────── */
.carte { transition: transform .35s ease, box-shadow .35s ease; }
.carte:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(10, 42, 94, .16); }

/* ── Filet or sous les titres ──────────────────────────────────────────── */
.filet-or::after {
  content: "";
  display: block;
  width: 4rem;
  height: .3rem;
  margin-top: .9rem;
  border-radius: 9999px;
  background: var(--jaune);
}
.filet-or.centre::after { margin-inline: auto; }

/* ── Apparitions au défilement ─────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal[data-delai="1"] { transition-delay: .08s; }
.reveal[data-delai="2"] { transition-delay: .16s; }
.reveal[data-delai="3"] { transition-delay: .24s; }

/* ── Frise chronologique ───────────────────────────────────────────────── */
.frise { position: relative; }
.frise::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(var(--bleu-royal), rgba(11, 79, 179, .15));
}
@media (min-width: 1024px) { .frise::before { left: 50%; transform: translateX(-50%); } }
.frise-point {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--jaune);
  border: 3px solid var(--bleu-marine);
  box-shadow: 0 0 0 6px rgba(247, 214, 24, .28);
}

[hidden] { display: none !important; }

/* ── Accessibilité ─────────────────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--bleu-drapeau); outline-offset: 3px; border-radius: .5rem; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--bleu-marine);
  color: #fff;
  padding: .75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .carte, .acc-chevron { transition: none; }
}

/* =========================================================================
   Survols
   La maquette faisait virer au blanc les boutons or et marine : au passage
   de la souris, le bouton perdait sa couleur et le libellé devenait presque
   illisible. Les états sont désormais uniformes : la teinte fonce, l'élément
   se soulève, l'ombre s'accentue, et rien ne bouge pour qui a demandé moins
   d'animations.
   ========================================================================= */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  padding: .875rem 1.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.bouton-or {
  background: var(--jaune);
  color: var(--bleu-marine);
  box-shadow: 0 10px 24px rgba(247, 214, 24, .34);
}
.bouton-or:hover { background: #FFE24A; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(247, 214, 24, .42); }
.bouton-or:active { transform: translateY(0); }

.bouton-verre {
  background: rgba(255, 255, 255, .72);
  color: var(--bleu-marine);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 22px rgba(10, 42, 94, .10);
}
.bouton-verre:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(10, 42, 94, .16); }
.bouton-verre:active { transform: translateY(0); }

/* Boutons de la maquette : le blanc au survol est remplacé par un
   assombrissement de la teinte d'origine. */
a.bg-or:hover, button.bg-or:hover { background-color: #FFE24A !important; color: var(--bleu-marine) !important; }
a.bg-rdc-marine:hover, button.bg-rdc-marine:hover { background-color: var(--bleu-royal) !important; color: #fff !important; }
a[class*="bg-or"], a[class*="bg-rdc-marine"], button[class*="bg-or"], button[class*="bg-rdc-marine"] {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

/* Liens de navigation : fond discret, jamais de saut de graisse. */
nav a { transition: background-color .2s ease, color .2s ease; }
nav a:hover { background-color: rgba(10, 42, 94, .07); color: var(--bleu-marine); }
nav a[aria-current="page"]:hover { background-color: var(--bleu-royal); color: #fff; }

/* Cartes de verre : elles se soulèvent, sans changer de fond. */
.glass:hover, .glass-strong:hover { box-shadow: 0 18px 44px rgba(10, 42, 94, .16); }
a.glass:hover, a.glass-strong:hover { transform: translateY(-2px); }
a.glass, a.glass-strong { transition: transform .25s ease, box-shadow .25s ease; }

/* La marque ne bouge pas : seul l'écu s'éclaire. */
.marque:hover .marque-ecu { box-shadow: 0 4px 14px rgba(10, 42, 94, .18); }
.marque-ecu { transition: box-shadow .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .bouton, .bouton-or, .bouton-verre,
  a.glass, a.glass-strong,
  a[class*="bg-or"], a[class*="bg-rdc-marine"] { transition: none; }
  .bouton-or:hover, .bouton-verre:hover,
  a.glass:hover, a.glass-strong:hover { transform: none; }
}

/* Patronyme en capitales, prénom en casse normale : « Judith SUMINWA TULUKA ».
   Les petites capitales seules ne suffisaient pas, Playfair n'en ayant pas de
   dessin propre ; on passe donc en capitales franches, très légèrement
   espacées pour ne pas tasser. */
.nom-famille { text-transform: uppercase; letter-spacing: .01em; }