/* =========================================================================
   CARRIA — A0 (en-tête collante) et A11 (pied de page)
   Annexes A0, A11 · charte C2/C3/C5 · responsive D1 · accessibilité D3.

   Aucune valeur hexadécimale en dur : uniquement les jetons de tokens.css.
   Ce fichier se charge APRÈS styles/tokens.css et styles/base.css.
   ========================================================================= */

/* =========================================================================
   A0 — EN-TÊTE COLLANTE
   ========================================================================= */

.a0-entete {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 68px; /* hauteur imposée (A0) — l'ancrage compense via scroll-margin-top: 84px */
  background: var(--surface-frosted);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

/* Repli obligatoire (C3) : sans lui la barre devient illisible sur le dégradé. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .a0-entete {
    background: var(--surface-elev);
  }
}

/* Filet bas 1 px --rule-25 : n'apparaît QU'APRÈS 40 px de défilement.
   La classe .est-defile est posée par scripts/a0-entete.js. */
.a0-entete::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule-25);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}

.a0-entete.est-defile::after {
  opacity: 1;
}

/* Trois zones : mot-symbole à gauche, liens au centre, action à droite.
   Sous 1024 px les colonnes sont dimensionnées sur leur contenu — sinon les
   deux colonnes 1fr se partagent l'espace à parts égales et compriment le
   mot-symbole. Au-dessus, le centrage réel des liens reprend la main. */
.a0-rangee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-base);
  height: 100%;
}

@media (min-width: 1024px) {
  .a0-rangee {
    grid-template-columns: 1fr auto 1fr;
  }
}

/* Placement explicite : sous 1024 px les liens sont en display:none et ne sont
   donc plus des éléments de grille — sans cette règle, le bloc d'action se
   replacerait tout seul dans la deuxième colonne et se décalerait du bord. */
.a0-marque {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-xs);
}

.a0-marque img {
  flex: 0 0 auto; /* le mot-symbole ne se comprime jamais */
  height: 22px;
  width: auto;
}

/* --- Liens centraux (masqués sous 1024 px, repliés dans le menu) --- */

.a0-nav {
  grid-column: 2;
  justify-self: center;
  display: none;
  align-items: center;
  gap: var(--sp-xxl);
}

.a0-lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* zone tapable minimale (D1) */
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}

.a0-lien:hover {
  color: var(--ink);
}

@media (min-width: 1024px) {
  .a0-nav {
    display: flex;
  }
}

/* --- Zone de droite : menu repliable + l'unique bouton plein de la page --- */

.a0-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  /* Repère du panneau du menu : son bord droit tombe sur celui du bouton,
     donc sur le bord du gabarit — pas sur celui de l'icône. */
  position: relative;
}

.a0-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Menu natif <details>/<summary> : aucun script requis pour l'ouvrir.
   Visible uniquement entre 768 px et 1024 px (A0, D1). */
.a0-menu {
  display: none;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .a0-menu {
    display: block;
  }
}

.a0-menu-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.a0-menu-bouton::-webkit-details-marker {
  display: none;
}

.a0-menu-bouton:hover {
  background: var(--accent-soft);
  color: var(--ink);
}

.a0-icone {
  width: 20px;
  height: 20px;
}

.a0-icone--fermer {
  display: none;
}

.a0-menu[open] .a0-icone--ouvrir {
  display: none;
}

.a0-menu[open] .a0-icone--fermer {
  display: block;
}

/* Deuxième — et dernier — niveau de verre (C3 : ne jamais en empiler trois). */
.a0-menu-panneau {
  position: absolute;
  top: calc(100% + 12px); /* pose le panneau juste sous la barre de 68 px */
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 232px;
  padding: var(--sp-sm);
  background: var(--surface-frosted);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-pop), inset 0 1px 0 var(--inset-highlight);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .a0-menu-panneau {
    background: var(--surface-elev);
  }
}

.a0-menu-lien {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-md);
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.a0-menu-lien:hover {
  color: var(--ink);
  background: var(--accent-soft);
}

/* Sous 480 px : mot-symbole + bouton doivent tenir sur 320 px sans provoquer
   le moindre défilement horizontal (critère de refus du brief §6).
   Compte à 320 px : 16 + 63 (mot-symbole) + 4 + 209 (bouton) + 16 = 308 px.
   Le retrait latéral de la barre descend donc sous les 24 px du gabarit
   mobile : seul écart consenti, et il n'existe que sur cette barre. */
@media (max-width: 480px) {
  .a0-entete .a0-rangee {
    padding-inline: var(--sp-base);
    gap: var(--sp-xs);
  }
  .a0-entete .a0-marque img {
    height: 18px;
  }
  .a0-entete .a0-cta {
    padding-inline: var(--sp-md);
  }
}

/* =========================================================================
   A11 — PIED DE PAGE
   ========================================================================= */

.a11-pied {
  background: var(--surface-solid);
  border-top: 1px solid var(--rule-25);
}

.a11-grille {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--sp-xxxl) var(--gap);
  padding-block: 64px 40px;
}

.a11-colonne {
  min-width: 0;
}

.a11-marque {
  height: 24px;
  width: auto;
}

.a11-baseline {
  margin-top: var(--sp-base);
  max-width: 36ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.a11-titre {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.a11-liste {
  margin: var(--sp-md) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.a11-lien {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}

.a11-lien:hover {
  color: var(--ink);
}

.a11-bas {
  border-top: 1px solid var(--rule-25);
}

.a11-bas-rangee {
  padding-block: var(--sp-lg);
}

.a11-copyright {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* Tablette : deux colonnes, la colonne d'identité passe sur toute la largeur. */
@media (max-width: 1023.98px) {
  .a11-grille {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xxl) var(--gap);
  }
  .a11-identite {
    grid-column: 1 / -1;
  }
}

/* Mobile : une seule colonne, zones tapables portées à 44 px (D1). */
@media (max-width: 767.98px) {
  .a11-grille {
    grid-template-columns: 1fr;
    gap: var(--sp-xxl);
    padding-block: var(--sp-xxxl) var(--sp-xxl);
  }
  .a11-identite {
    grid-column: auto;
  }
  .a11-lien {
    min-height: 44px;
  }
}