/* Fond anime fixe, et cartes posees par-dessus.
   Le contenu ne touche jamais le fond directement : il vit dans des cartes,
   ce qui garantit la lisibilite quelle que soit l'image derriere. */

.fond-anime { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--surface-bas); }
.fond-canvas { display: block; width: 100%; height: 100%; }
.fond-voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--voile) 0%, transparent 22%),
    linear-gradient(to top, var(--voile) 0%, transparent 26%);
}

/* Tout ce qui n'est pas le fond passe devant. */
.site-header, main, .site-footer { position: relative; z-index: 2; }

/* ── La carte : l'unite de contenu du site ──
   Materiau translucide plutot qu'un aplat gris : le fond continue d'exister
   derriere, et la carte se lit comme une plaque de verre posee dessus. L'arete
   haute est plus claire, comme une lumiere qui accroche le bord. */
.carte {
  position: relative;
  /* Sur telephone la carte paraissait un aplat gris : 70 % d'opacite sur une
     petite surface, avec le fond peu contraste derriere, la translucidite ne se
     lisait plus. On descend l'opacite et on monte la saturation pour que le
     fond continue d'exister a travers le verre. */
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-top-color: color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: var(--radius-none);
  /* Sur telephone chaque carte ajoutait 80 px de vide vertical a elle seule.
     Sur une page qui en empile huit, cela faisait un ecran et demi de rien. */
  padding: var(--space-8) var(--space-5);
  box-shadow: var(--ombre-lg);
}
@media (min-width: 620px) {
  .carte { padding: var(--space-10) var(--space-6); }
}
@media (min-width: 760px) {
  /* Une grande surface se lit comme plus epaisse : plus de flou, plus d'ombre. */
  .carte {
    padding: var(--space-16) var(--space-12);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    -webkit-backdrop-filter: blur(36px) saturate(160%);
    backdrop-filter: blur(36px) saturate(160%);
  }
}

/* Sur verre, un gris plat devient illisible : le texte secondaire remonte en
   contraste et gagne un demi-cran de graisse. */
.carte .texte--faible { color: color-mix(in srgb, var(--text) 78%, transparent); font-weight: 500; }
.carte .eyebrow { color: color-mix(in srgb, var(--text) 74%, transparent); }

.carte + .carte { margin-top: var(--rythme); }
.carte--etroite { max-width: 760px; }
.carte--centree { margin-inline: auto; }

/* La carte de tete porte les equerres : c'est la seule qui les recoit. */
.carte--tete::before, .carte--tete::after {
  content: "";
  position: absolute;
  width: var(--space-10);
  height: var(--space-10);
  border: var(--filet-epaisseur) solid var(--accent);
  pointer-events: none;
}
.carte--tete::before { top: calc(var(--filet-epaisseur) * -1); left: calc(var(--filet-epaisseur) * -1); border-right: none; border-bottom: none; }
.carte--tete::after { bottom: calc(var(--filet-epaisseur) * -1); right: calc(var(--filet-epaisseur) * -1); border-left: none; border-top: none; }

/* ── Replis d'accessibilite ──
   Transparence reduite : surface pleine, sans flou, et le fond anime disparait.
   Contraste renforce : fond opaque et bordure franche. */
@media (prefers-reduced-transparency: reduce) {
  .carte { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fond-anime { display: none; }
}
@media (prefers-contrast: more) {
  .carte { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--text); }
}

/* Navigateurs sans color-mix : surface pleine plutot qu'un fond absent. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .carte { background: var(--surface); }
}