/* AuditRGAA -- feuille de style unique.
   Regle du projet : cette interface doit obtenir 100/100 a son propre scanner.
   Concretement : contrastes AA verifies, focus toujours visible, aucune
   information portee par la seule couleur, zoom non bride. */

:root {
  --encre: #0f172a;
  --encre-douce: #475569;
  --encre-faible: #64748b;
  --fond: #ffffff;
  --fond-doux: #f8fafc;
  --fond-appuye: #f1f5f9;
  --bord: #e2e8f0;
  --bord-appuye: #cbd5e1;

  --marque: #1d4ed8;
  --marque-sombre: #1e40af;
  --marque-claire: #eff6ff;

  /* Gravites. Chaque couleur est doublee d'un libelle ecrit : jamais de
     signification portee par la seule teinte (critere RGAA 3.1). */
  --critique: #b91c1c;
  --critique-fond: #fef2f2;
  --serieux: #c2410c;
  --serieux-fond: #fff7ed;
  --moyen: #a16207;
  --moyen-fond: #fefce8;
  --mineur: #475569;
  --mineur-fond: #f8fafc;
  --bon: #15803d;
  --bon-fond: #f0fdf4;

  --rayon: 10px;
  --ombre: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
  --largeur: 1140px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

a { color: var(--marque); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--marque-sombre); }

/* Focus : jamais supprime, toujours contraste (RGAA 10.7). */
:focus-visible {
  outline: 3px solid var(--marque);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Lien d'evitement (RGAA 12.7) */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--marque); color: #fff; padding: .75rem 1.25rem;
  font-weight: 600; border-radius: 0 0 var(--rayon) 0;
}
.evitement:focus { left: 0; color: #fff; }

.enveloppe { max-width: var(--largeur); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- En-tete ---------- */
.entete {
  border-bottom: 1px solid var(--bord);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 40;
}
.entete .enveloppe {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 66px; flex-wrap: wrap;
}
.logo {
  font-weight: 700; font-size: 1.2rem; letter-spacing: -.03em;
  color: var(--encre); text-decoration: none; display: flex;
  align-items: center;
}
.logo:hover { color: var(--encre); }
.logo .point { color: var(--marque); }
.entete nav { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.entete nav a { color: var(--encre-douce); text-decoration: none; font-size: .94rem; font-weight: 500; }
.entete nav a:hover { color: var(--marque); text-decoration: underline; }
/* Un lien-bouton dans la barre reste un bouton : sans ce rappel, la regle
   ci-dessus (plus specifique que `.bouton`) repeint le texte en gris sombre
   sur fond bleu, soit un contraste de 2,4:1 -- sous le seuil AA de 4,5:1. */
.entete nav a.bouton { color: #fff; }
.entete nav a.bouton:hover { color: #fff; text-decoration: none; }

/* ---------- La marque ----------
   Un anneau de focus : le contour qui entoure un élément quand on navigue au
   clavier. La coche prend la couleur du fond de page (et non un blanc en dur)
   pour rester lisible en thème sombre comme en thème clair. */
.logo .marque{
  width:27px;height:27px;flex-shrink:0;margin-right:.55rem;
  color:var(--marque);
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: var(--rayon); border: 1px solid transparent;
  background: var(--marque); color: #fff; font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.2;
  transition: background .12s ease;
}
.bouton:hover { background: var(--marque-sombre); color: #fff; }
.bouton:disabled { opacity: .55; cursor: not-allowed; }
.bouton.second { background: var(--fond); color: var(--encre); border-color: var(--bord-appuye); }
.bouton.second:hover { background: var(--fond-appuye); color: var(--encre); }
.bouton.danger { background: var(--fond); color: var(--critique); border-color: #fecaca; }
.bouton.danger:hover { background: var(--critique-fond); color: var(--critique); }
.bouton.grand { padding: .9rem 1.6rem; font-size: 1.02rem; }

/* ---------- Formulaires ---------- */
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--encre); }
input[type=text], input[type=url], input[type=email], input[type=password],
select, textarea {
  width: 100%; padding: .7rem .85rem; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--bord-appuye); border-radius: var(--rayon);
  background: var(--fond); color: var(--encre);
}
input:focus, select:focus, textarea:focus { border-color: var(--marque); }
.champ { margin-bottom: 1.1rem; }
.aide { font-size: .85rem; color: var(--encre-faible); margin-top: .3rem; }

/* ---------- Cartes et grilles ---------- */
.carte {
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.35rem; box-shadow: var(--ombre);
}
.grille { display: grid; gap: 1.1rem; }
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille.trois { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grille.quatre { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------- Score ---------- */
.pastille-score {
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; width: 96px; height: 96px; border-radius: 50%;
  border: 6px solid currentColor; font-weight: 700; flex-shrink: 0;
}
.pastille-score .valeur { font-size: 1.75rem; line-height: 1; }
/* Pas d'`opacity` sur du texte : la couleur obtenue dépend de ce qu'il y a
   derrière, donc le contraste n'est plus calculable une fois pour toutes.
   Ici, .75 d'opacité sur le rouge d'un mauvais score donnait #cb5555, soit
   4,22:1 — sous le seuil, et seulement sur les scores bas, c'est-à-dire
   exactement les sites de nos meilleurs prospects. La hiérarchie passe par
   la taille, qui elle ne touche pas au contraste. */
.pastille-score .sur { font-size: .7rem; font-weight: 600; }
.score-bon { color: var(--bon); }
.score-moyen { color: var(--moyen); }
.score-mauvais { color: var(--critique); }

/* ---------- Etiquettes de gravite ---------- */
.gravite {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; border: 1px solid currentColor;
}
.g-critical { color: var(--critique); background: var(--critique-fond); }
.g-serious  { color: var(--serieux); background: var(--serieux-fond); }
.g-moderate { color: var(--moyen);   background: var(--moyen-fond); }
.g-minor    { color: var(--mineur);  background: var(--mineur-fond); }

.jeton {
  display: inline-block; padding: .15rem .5rem; border-radius: 5px;
  background: var(--marque-claire); color: var(--marque-sombre);
  font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums;
}

/* ---------- Tableaux ---------- */
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-weight: 650; padding-bottom: .6rem; color: var(--encre-douce); }
th, td { padding: .7rem .6rem; text-align: left; border-bottom: 1px solid var(--bord); }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-faible); font-weight: 700; }
tbody tr:hover { background: var(--fond-doux); }

/* Toute zone large doit defiler dans son cadre, pas pousser la page. */
.defilant { overflow-x: auto; }

/* ---------- Blocs de code ---------- */
code, pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .85rem;
}
pre {
  background: var(--encre); color: #e2e8f0; padding: 1rem; border-radius: var(--rayon);
  overflow-x: auto; line-height: 1.5;
}
code.enligne { background: var(--fond-appuye); padding: .12rem .35rem; border-radius: 4px; color: var(--encre); }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section.douce { background: var(--fond-doux); border-block: 1px solid var(--bord); }
.chapeau { font-size: 1.12rem; color: var(--encre-douce); max-width: 62ch; }

.alerte { padding: .9rem 1.1rem; border-radius: var(--rayon); border: 1px solid; margin-bottom: 1.2rem; }
.alerte-erreur { color: #7f1d1d; background: var(--critique-fond); border-color: #fecaca; }
.alerte-info { color: #1e3a8a; background: var(--marque-claire); border-color: #bfdbfe; }
.alerte-bon { color: #14532d; background: var(--bon-fond); border-color: #bbf7d0; }

/* ---------- Pied ---------- */
.pied { border-top: 1px solid var(--bord); padding: 2.5rem 0; margin-top: 4rem; color: var(--encre-faible); font-size: .9rem; }
.pied a { color: var(--encre-douce); }

/* ---------- Utilitaires ---------- */
.muet { color: var(--encre-faible); }
.petit { font-size: .875rem; }
.gras { font-weight: 650; }
.centre { text-align: center; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pile { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.nombre { font-variant-numeric: tabular-nums; }
.sr-seulement {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Respect du reglage systeme « animations reduites » (RGAA 13.8). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Mouvement
   --------------------------------------------------------------------------
   Deux règles tenues par la structure même du code, pas par la discipline :

   1. Tout est enveloppé dans `prefers-reduced-motion: no-preference`. Qui a
      demandé moins d'animations n'en reçoit aucune — et l'enveloppe garantit
      qu'on ne peut pas l'oublier au fil des ajouts.

   2. L'état VISIBLE est l'état par défaut. Aucun élément n'est parqué à
      `opacity: 0` en attendant un script : si le JavaScript ne s'exécute pas,
      si l'animation ne se déclenche pas, la page reste entièrement lisible.
      C'est l'erreur la plus répandue des sites animés, et elle est fatale
      ici : une page blanche sur un site d'accessibilité.

   Le mouvement sert la hiérarchie (ce qui compte arrive d'abord) et le
   retour d'action (ce qui est cliquable le montre). Rien de décoratif.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* -- Entrée en scène, une seule fois, au chargement ---------------------
     `backwards` uniquement : l'élément emprunte l'état de départ pendant le
     délai, puis revient à son style normal. Pas de `forwards`, qui figerait
     la page dans l'état final de l'animation. */
  @keyframes montee {
    from { opacity: 0; transform: translateY(10px); }
  }

  .entete { animation: montee .4s ease-out backwards; }

  [data-entree] { animation: montee .5s cubic-bezier(.16, 1, .3, 1) backwards; }
  [data-entree="1"] { animation-delay: .05s; }
  [data-entree="2"] { animation-delay: .13s; }
  [data-entree="3"] { animation-delay: .21s; }
  [data-entree="4"] { animation-delay: .29s; }

  /* -- La marque : l'anneau de focus se pose ------------------------------
     Le contour de la touche arrive comme un anneau de focus, en se
     resserrant légèrement — le geste que la marque représente. */
  @keyframes anneau {
    from { opacity: 0; transform: scale(1.18); }
  }
  .logo .marque > rect:first-of-type {
    transform-box: fill-box; transform-origin: center;
    animation: anneau .55s cubic-bezier(.16, 1, .3, 1) .2s backwards;
  }

  /* -- Retour d'action ---------------------------------------------------- */
  .carte { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .bouton { transition: background .14s ease, transform .1s ease; }
  .bouton:active { transform: translateY(1px); }

  .entete { transition: box-shadow .25s ease; }
  .entete.defilee { box-shadow: 0 1px 0 var(--bord), 0 6px 18px rgba(15, 23, 42, .06); }
}

/* Le survol des cartes vaut aussi sans animation : seul le mouvement est
   conditionné au réglage système, pas le changement de couleur. */
.carte:hover { border-color: var(--bord-appuye); }
@media (prefers-reduced-motion: no-preference) {
  .carte:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.07); }
}

/* Soulignement des liens de navigation : il grandit depuis la gauche.
   Sans mouvement, le lien se souligne simplement — le repère visuel reste. */
.entete nav a:not(.bouton) { position: relative; text-decoration: none; }
.entete nav a:not(.bouton)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1.5px; background: currentColor; transform: scaleX(0);
  transform-origin: left;
}
.entete nav a:not(.bouton):hover::after,
.entete nav a:not(.bouton)[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .entete nav a:not(.bouton)::after { transition: transform .2s cubic-bezier(.16,1,.3,1); }
}
.entete nav a:not(.bouton):hover { text-decoration: none; }

@media print {
  .entete, .pied, .bouton, .evitement { display: none !important; }
  body { font-size: 11pt; }
  .carte { break-inside: avoid; box-shadow: none; }
}


/* ==========================================================================
   Bandeau d'accueil : le produit derrière le titre
   --------------------------------------------------------------------------
   Les trois écrans empilés sont de vraies captures de l'application, prises
   sur un scan réel ; seul le nom du site est fictif. Montrer une maquette
   dessinée pour la circonstance serait plus facile et se verrait : un
   acheteur d'outil d'audit reconnaît une interface qui n'existe pas.

   Le fond est sombre pour une raison utilitaire, pas décorative : nos écrans
   sont blancs, et sur un fond blanc ils se dissolvent. Le contraste du texte
   est recalculé ici, aucun jeton clair n'est réutilisé tel quel.
   ========================================================================== */
.heros {
  position: relative;
  background:
    radial-gradient(115% 120% at 8% -10%, #1e3a8a 0%, rgba(30,58,138,0) 55%),
    linear-gradient(165deg, #111c38 0%, #0b1224 100%);
  color: #fff;
  overflow: hidden;
  padding: 4.25rem 0 4.75rem;
}
/* Trame de points, très discrète : elle donne de la matière au fond sans
   entrer en concurrence avec les captures. */
.heros::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 75%);
  pointer-events: none;
}
.heros .enveloppe { position: relative; z-index: 1; }
.heros h1 { color: #fff; }
.heros .chapeau { color: #c7d2e4; }
/* --encre-faible sur ce fond tombe à 4,0:1, sous le seuil. Valeur dédiée. */
.heros .aide { color: #9fb0c9; }
.heros .jeton {
  background: rgba(96,165,250,.16); color: #bfdbfe;
  border: 1px solid rgba(147,197,253,.38);
}
/* Le bouton secondaire devient fantôme : deux pleins se disputeraient l'oeil.
   Bordure #94a3b8 = 6,4:1 sur ce fond, au-dessus des 3:1 exigés pour un
   composant d'interface (WCAG 1.4.11). */
.heros .bouton.second {
  background: transparent; color: #fff; border-color: #94a3b8;
}
.heros .bouton.second:hover { background: rgba(255,255,255,.1); color: #fff; }
.heros :focus-visible { outline-color: #93c5fd; }

.heros-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 3rem; align-items: center;
}

/* ---- L'empilement ----
   Positions en pixels et non en pourcentages : un chevauchement se règle à
   l'oeil, et un pourcentage le fait glisser à chaque largeur d'écran. */
.composition { position: relative; height: 500px; }
.composition::after {          /* halo, pour décoller la pile du fond */
  content: ""; position: absolute; z-index: 0;
  left: 4%; top: 12%; width: 92%; height: 76%;
  background: radial-gradient(closest-side, rgba(59,130,246,.35), transparent);
  filter: blur(46px);
}
.composition img {
  position: absolute; display: block; border-radius: 12px;
  /* `height: auto` n'est pas cosmétique ici : les attributs width/height du
     HTML (posés pour réserver la place et éviter le saut de mise en page)
     imposent sinon la hauteur naturelle de l'image. La capture du rapport
     s'affichait en 335 x 1094 px au lieu de 335 x 262 sur téléphone. */
  height: auto;
  box-shadow: 0 22px 55px -14px rgba(2,6,23,.75), 0 3px 10px rgba(2,6,23,.45);
  outline: 1px solid rgba(255,255,255,.14); outline-offset: -1px;
}
.ecran-tableau    { top: 0;     right: -104px; width: 466px; z-index: 1; }
.ecran-rapport    { top: 78px;  left: -22px;  width: 522px; z-index: 2; }
.ecran-correction { top: 402px; left: 108px;  width: 452px; z-index: 3; }

/* Flottement : deux amplitudes différentes pour que la pile respire sans
   jamais donner l'impression que la page bouge. Désactivé si la personne a
   demandé moins d'animation (RGAA 13.8). */
@media (prefers-reduced-motion: no-preference) {
  .ecran-tableau    { animation: flotte 9s ease-in-out infinite; }
  .ecran-correction { animation: flotte 7s ease-in-out .8s infinite reverse; }
}
@keyframes flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (max-width: 1080px) {
  .composition { height: 440px; }
  .ecran-tableau    { width: 360px; right: -70px; }
  .ecran-rapport    { width: 405px; top: 80px; }
  .ecran-correction { width: 356px; top: 360px; left: 80px; }
}

/* Sous 900 px, la pile n'a plus la place de se chevaucher sans se mutiler :
   on garde le seul écran qui porte l'argument, à plat, et on retire les
   autres du DOM visuel. */
@media (max-width: 900px) {
  .heros-grille { grid-template-columns: 1fr; gap: 2.25rem; }
  .composition { height: auto; }
  .composition::after { display: none; }
  .ecran-tableau, .ecran-correction { display: none; }
  .ecran-rapport {
    position: static; width: 100%; animation: none;
    box-shadow: 0 14px 36px -12px rgba(2,6,23,.6);
  }
}


/* ---------- En-tête sur petit écran ----------
   À 375 px, les six liens plus le bouton prenaient trois lignes : 210 px de
   navigation avant la moindre phrase, soit le quart de l'écran d'un
   téléphone. On resserre plutôt que de masquer des liens derrière un menu
   déroulant, qui coûterait un composant à piloter au clavier pour un gain
   nul à ce nombre d'entrées. */
@media (max-width: 760px) {
  .entete .enveloppe { min-height: 0; padding-top: .6rem; padding-bottom: .6rem; gap: .6rem; }
  .entete nav { margin-left: 0; width: 100%; gap: .5rem .9rem; }
  .entete nav a { font-size: .86rem; }
  .entete nav a.bouton { padding: .5rem .85rem; font-size: .86rem; margin-left: auto; }
  .heros { padding: 2.5rem 0 3rem; }
}


/* ---------- Citation d'un texte officiel ----------
   Quand on cite l'administration mot pour mot, la citation doit se voir
   comme telle : c'est la différence entre « l'État dit ceci » et « nous
   pensons cela ». Le filet bleu à gauche marque la frontière. */
blockquote.citation {
  margin: 1.5rem 0;
  padding: 1.1rem 1.4rem;
  background: var(--marque-claire);
  border-left: 4px solid var(--marque);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
blockquote.citation p { margin: 0; }
blockquote.citation p + p { margin-top: .5rem; }
/* --encre-faible tombe à 4,37:1 sur ce fond bleu clair, sous le seuil AA
   de 4,5:1. Notre propre moteur l'a relevé sur la page des sanctions.
   Corrigé ici plutôt que sur la page, pour que la prochaine citation
   n'ait pas à refaire le calcul. */
blockquote.citation .muet { color: var(--encre-douce); }