/* ==========================================================================
   Papa.Elec — base.css
   Reset, variables, typographie, utilitaires.
   Ordre de chargement : base.css → components.css → pages.css → (admin.css)
   ========================================================================== */

/* --- Variables ------------------------------------------------------------ */
:root {
  /* Hauteur de la barre de session jaune ; 0 quand personne n'est connecté */
  --h-session: 0px;
  /* Couleurs */
  --bleu-nuit:      #1B3159;   /* fond principal, titres */
  --bleu-profond:   #132444;   /* sections sombres, hero */
  --bleu-moyen:     #2B5BA0;   /* liens */
  --bleu-clair:     #3D9FE0;   /* accents froids, anneaux de focus (jamais du texte sur fond clair) */
  /* Bleu de TEXTE, introduit après l'audit du 23/08 : le bleu clair sur fond
     blanc donnait un contraste de 2,90 pour 4,5 exigés. Les sur-titres et les
     méta des cartes étaient donc illisibles pour une vue fatiguée. Celui-ci
     donne 6,45 sur blanc et 5,95 sur panneau. */
  --bleu-texte:     #1F6392;
  --jaune:          #FFB712;   /* accent, CTA principal */
  --jaune-fonce:    #EDA400;   /* survol CTA */
  --encre:          #1A202C;   /* texte courant */
  --gris-texte:     #475569;
  /* 4,40 sur fond panneau, pour 4,5 exigés : à un cheveu, mais en dessous.
     #5D6B80 donne 5,00 sans changer visiblement la teinte. (audit 23/08) */
  --gris-doux:      #5D6B80;
  /* Servait de « gris secondaire » un peu partout : 2,56 de contraste sur
     blanc, très en dessous des 4,5 exigés. Aucun gris réellement clair ne peut
     passer sur fond clair — la hiérarchie se fait donc désormais par la taille
     et la graisse, pas par la pâleur. 4,94 sur blanc. (audit 23/08) */
  --gris-clair:     #647186;
  --bordure:        #E2E8F0;
  --bordure-forte:  #CBD5E1;
  --fond:           #EEF1F5;
  --fond-panneau:   #F4F6F9;
  --fond-froid:     #EBF5FC;
  --blanc:          #FFFFFF;

  /* États */
  --succes-fond:    #E6F4EA;
  --succes-texte:   #22683A;
  --alerte-fond:    #FDE8E8;
  --alerte-texte:   #9B2C2C;
  --attente-fond:   #FFF4D6;
  --attente-texte:  #8A6300;

  /* Typographie */
  --titre: 'Montserrat', system-ui, sans-serif;
  --texte: 'Inter', system-ui, sans-serif;

  /* Rythme */
  --gouttiere: 18px;
  --marge-page: 34px;
  --largeur-max: 1180px;

  /* Rayons */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 14px;

  /* Ombres */
  --ombre-carte: 0 12px 28px rgba(27, 49, 89, .14);
  --ombre-panneau: 0 14px 44px rgba(27, 49, 89, .12);

  /* Mouvement — voir la maquette « Animations » */
  --t-survol: 120ms;
  --t-bascule: 220ms;
  --t-apparition: 450ms;
  --courbe-sortie: cubic-bezier(.2, .7, .3, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  color: var(--bleu-nuit);
  line-height: 1.2;
  margin: 0;
  text-wrap: pretty;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--bleu-moyen);
  text-decoration: none;
  transition: color var(--t-survol) ease-out;
}
/* Le survol passait au bleu clair — 2,90 de contraste, moins lisible que le
   lien au repos. Il fonce maintenant, comme on s'y attend. (audit 23/08) */
a:hover { color: var(--bleu-nuit); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

:focus-visible {
  outline: 3px solid var(--bleu-clair);
  outline-offset: 2px;
}

/* Lien d'évitement : hors de l'écran, ramené au premier plan dès qu'il reçoit
   le focus clavier. (audit 23/08) */
.evitement {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 999;
  background: var(--jaune);
  color: var(--bleu-nuit);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 140ms ease-out;
}
.evitement:focus { top: 0; color: var(--bleu-nuit); }
#contenu { display: block; height: 0; }
#contenu:focus { outline: none; }

/* Lecteurs d'écran uniquement */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Conteneurs ----------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

.section { padding-block: 72px; }
.section--serre { padding-block: 52px; }
.section--panneau { background: var(--fond-panneau); }
.section--sombre { background: var(--bleu-profond); color: var(--blanc); }
.section--sombre h1,
.section--sombre h2,
.section--sombre h3 { color: var(--blanc); }

/* --- Titres de section ---------------------------------------------------- */
.surtitre {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--bleu-texte);
  margin-bottom: 8px;
}

.titre-section { font-size: clamp(24px, 3vw, 32px); font-weight: 700; }
.chapeau {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gris-doux);
  max-width: 58ch;
}

/* --- Grilles -------------------------------------------------------------- */
.grille { display: grid; gap: var(--gouttiere); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

.pile { display: flex; flex-direction: column; gap: var(--gouttiere); }
.rangee { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --- Apparition au scroll (activée par main.js) --------------------------- */
.apparait {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-apparition) var(--courbe-sortie),
    transform var(--t-apparition) var(--courbe-sortie);
}
.apparait.est-visible { opacity: 1; transform: none; }

/* --- Points de rupture ---------------------------------------------------- */
/* > 900px  : desktop (par défaut)
   ≤ 900px  : tablette
   ≤ 600px  : mobile                                                        */

@media (max-width: 900px) {
  :root {
  /* Hauteur de la barre de session jaune ; 0 quand personne n'est connecté */
  --h-session: 0px; --marge-page: 26px; --gouttiere: 16px; }
  .section { padding-block: 52px; }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  :root {
  /* Hauteur de la barre de session jaune ; 0 quand personne n'est connecté */
  --h-session: 0px; --marge-page: 18px; }
  .section { padding-block: 40px; }
  .grille--2,
  .grille--3,
  .grille--4 { grid-template-columns: 1fr; }
}

/* --- Mouvement réduit ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .apparait { opacity: 1; transform: none; }
}

/* --- Impression ----------------------------------------------------------- */
@media print {
  .en-tete, .pied, .bandeau-cookies, .cta-flottant { display: none !important; }
  body { background: #fff; }
}

/* La barre de session n'est rendue que pour un utilisateur connecté.
   Sa présence décale les éléments collants (en-tête publique, menu admin). */
body:has([data-barre-session]) { --h-session: 44px; }