/* Valeurs par défaut du document, reprises du kit d'interface. */

*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--body-sm);line-height:var(--body-sm-lh);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--text-title);margin:0;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-hover) var(--ease-standard)}
a:hover{color:var(--rouge-600)}
::selection{background:var(--creme-200);color:var(--violet-800)}

/* Focus clavier.

   Le kit posait un trait rouge : invisible sur un bouton rouge, et faible sur le violet.
   La couleur du trait est donc une variable héritée, que les surfaces sombres redéfinissent
   en crème. L'écart de 2px laisse voir le fond entre l'élément et son trait, ce qui garde
   le repère lisible même sur un aplat de la même famille (WCAG 2.4.7 et 1.4.11). */
:root{--focus-ring:var(--violet-800)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

.pi-hero,.pi-footer,.pi-topbar,.pi-stepper,.pi-infopanel,
.pi-section--inverse,.pi-section--inverse-deep,.pi-section--secondary,
.pi-card--inverse{--focus-ring:var(--creme-200)}

/* Le bouton rouge est le seul aplat vif : sur fond clair son trait reste violet, mais
   l'écart doit être plus net pour ne pas se confondre avec sa propre bordure. */
.pi-btn:focus-visible{outline-offset:3px}

/* Apparitions au défilement. Le masquage initial est conditionné à la classe .js,
   posée dans le <head> par base.html.twig : sans JavaScript, ou si le script échoue,
   rien ne disparaît — l'animation est ce qu'on perd, jamais le contenu. */
.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-offset));transition:opacity var(--duration-reveal) var(--ease-standard),transform var(--duration-reveal) var(--ease-standard)}
.js [data-reveal].is-visible,.js [data-reveal][data-revealed]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Lien d'évitement : hors écran jusqu'au focus clavier. */
.pi-skip-link{position:absolute;left:-9999px;top:0;z-index:1090;background:var(--violet-800);color:var(--blanc);font:var(--weight-medium) var(--ui-sm)/1.3 var(--font-body);padding:14px 18px;text-decoration:none}
.pi-skip-link:focus{left:0;color:var(--blanc)}

/* Utilitaires repris de Bootstrap pour les gabarits qui ne le chargent pas. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Cibles tactiles : au doigt, toute action atteint 44px (WCAG 2.5.8).
   On n'impose rien à la souris, pour ne pas gonfler la mise en page au clavier. */
@media (pointer:coarse){
  a[class*="pi-"],button[class*="pi-"],.pi-tabs__tab,.pi-pagination__page,.pi-chip{min-height:var(--tap-min)}
  .pi-header__nav-link,.pi-footer__list a,.pi-toc a,.pi-latest__item{display:flex;align-items:center;min-height:var(--tap-min)}
}