/* ============================================================================
   SentinelleFin : socle partagé par toutes les pages.
   Reset, accessibilité et boutons. Tout vient des tokens du design system :
   aucune valeur de marque n'est écrite ici.
   ========================================================================== */

/* Extension locale du barème du design system, qui s'arrête à --radius-lg (18px).
   Les grandes cartes pleines (essai, pied de page) demandent un rayon plus ample.
   À promouvoir dans tokens/radius.css si on le garde. */
:root { --radius-xl: 26px; }

/* Contrastes : quatre couleurs du design system passent sous 4,5 : 1 (WCAG AA) en texte
   courant. Mesure du 2026-10-02 sur le site rendu :
     --action          #736fb6 -> 4,49 : 1 sous du texte blanc (tous les boutons pleins)
     --ink-muted-48    #7a7a7a -> 4,29 : 1 sur blanc, 3,94 sur gris clair
     --signal-vigilance #b0700b -> 3,69 : 1 sur sa teinte
     --signal-sur      #12876f -> 4,01 : 1 sur sa teinte
   On les assombrit juste ce qu'il faut (écart à peine visible), ici et non dans
   _ds/, qui reste la source de vérité : à reporter dans tokens/colors.css si on les garde. */
:root {
  /* Le dégradé violet-bleu de la page de connexion, pour toutes les grandes surfaces
     sombres (voir degrade-marque.css). Fin à #6862ab et non à la lavande --brand-6 :
     le texte blanc y reste à 5,35 : 1. */
  --degrade-marque: linear-gradient(150deg, var(--brand-3) 0%, var(--brand-4) 42%, #6862ab 100%);
  /* Texte atténué sur fond sombre : la lavande d'origine (#b7aec9) ne tient pas sur le
     dégradé ci-dessus, dont le bas est plus clair. */
  --on-dark-muted: #eeebf8;
  --action: #6e6ab1;
  --ink-muted-48: #6b6b6b;
  --signal-neutre: #6b6b6b;
  --signal-vigilance: #98600a;
  --signal-sur: #0f7360;
}

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

/* ─────────────────────────── Écran de chargement ───────────────────────────
   Demande explicite : fond violet de la marque, le logo en blanc, petit à
   moyen, qui tourne ET pulse EN CONTINU jusqu'à ce que la page soit chargée
   pour de vrai (l'événement `load`, pas un délai inventé -- une page plus
   lourde le montrerait plus longtemps, une page légère à peine).
   Partagé ici (base.css, chargé partout) plutôt que dupliqué : c'est un seul
   petit bloc HTML + JS à coller en tout début de <body> sur les pages qui en
   ont besoin (voir index.html, connexion.html, inscription.html). */
.chargement {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--degrade-marque);
  transition: opacity .3s ease;
}
.chargement--parti {
  opacity: 0;
  pointer-events: none;
}
/* Filet de sécurité en CSS pur : même si le JavaScript est retardé (téléphone lent), l'écran de chargement s'efface seul après 2,6 s. */
.chargement { animation: chargementSecours .3s ease 2.6s forwards; }
@keyframes chargementSecours { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Rotation ET pulsation dans UNE SEULE animation, pas deux en parallele :
   deux animations qui visent chacune "transform" ne se composent pas en CSS,
   la seconde ecraserait juste la premiere. Les deux effets sont donc fondus
   dans les memes images-cles, la pulsation cadencee deux fois par tour. */
.chargement__logo {
  width: 64px;
  height: 64px;
  animation: chargementTourneEtPulse 2.1s linear infinite;
}
@keyframes chargementTourneEtPulse {
  0%   { transform: rotate(0deg)   scale(1); }
  25%  { transform: rotate(90deg)  scale(1.14); }
  50%  { transform: rotate(180deg) scale(1); }
  75%  { transform: rotate(270deg) scale(1.14); }
  100% { transform: rotate(360deg) scale(1); }
}

.chargement__texte {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: rgba(255, 255, 255, .86);
  animation: chargementRespire 2.1s ease-in-out infinite;
}
@keyframes chargementRespire {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chargement__logo,
  .chargement__texte { animation: none; }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  font-family: var(--font-text);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

/* Plusieurs feuilles posent un display ; sans ce garde-fou il l’emporterait sur
   le display:none de l’attribut hidden. */
[hidden] { display: none !important; }

h1, h2, h3, p, figure, blockquote { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: calc(-1 * var(--space-section));
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  box-shadow: var(--shadow-subject);
  font-size: var(--text-caption-size);
  font-weight: 600;
  color: var(--brand-1);
  transition: top var(--dur-base) var(--ease-standard);
}
.skip-link:focus-visible { top: var(--space-md); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

/* ----------------------------------------------------------------- Boutons */
/* Reproduit SentinelleFinDesignSystem.Button : skin primary, tailles
   small / medium / large, plus l’option pleine largeur. */

.btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-text);
  line-height: 1.2;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  color: var(--on-action);
  transition:
    transform var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover { color: var(--on-action); text-decoration: none; }
.btn:active { transform: scale(var(--press-scale)); }

.btn--small {
  gap: 6px;
  padding: 8px 15px;
  font-size: var(--text-button-utility-size);
  font-weight: var(--text-button-utility-weight);
  letter-spacing: var(--text-button-utility-ls);
}
.btn--medium {
  gap: var(--space-xs);
  padding: 11px 22px;
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  letter-spacing: var(--text-body-ls);
}
.btn--large {
  gap: 10px;
  padding: 14px 28px;
  font-size: var(--text-button-large-size);
  font-weight: var(--text-button-large-weight);
  letter-spacing: var(--text-button-large-ls);
}

.btn--full { display: flex; width: 100%; }

/* Bouton pilule à cercle flèche. Le cercle est plaqué contre le bord droit :
   le rembourrage est donc dissymétrique, large à gauche, minime à droite. */
.btn--fleche {
  gap: 14px;
  padding-right: 6px;
}
.btn--fleche.btn--large { padding-left: 28px; }
.btn--fleche.btn--medium { padding-left: 22px; }
.btn--fleche.btn--small { padding-left: 15px; }

.btn__fleche {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--canvas);
  color: var(--brand-1);
  transition: transform var(--dur-base) var(--ease-standard);
}
.btn--fleche:hover .btn__fleche { transform: translateX(3px); }

.btn--small .btn__fleche,
.btn--medium .btn__fleche { width: 30px; height: 30px; }

/* Sur un bouton déjà blanc, le cercle s'inverse. */
.btn--on-dark .btn__fleche,
.btn--ghost .btn__fleche {
  background: var(--brand-1);
  color: var(--on-dark);
}

.btn--indigo { background: var(--brand-1); }
.btn--action { background: var(--action); }

/* Skin « ghost » du Button du design system : pour une action secondaire posée
   à côté d'une action pleine (connexion par un fournisseur tiers, par exemple). */
.btn--ghost {
  background: var(--surface-pearl);
  color: var(--control-ghost-fg);
  box-shadow: var(--ring-soft);
}
.btn--ghost:hover {
  background: var(--action-tint);
  color: var(--action-focus);
  box-shadow: inset 0 0 0 3px var(--action-tint-strong);
}

/* Skin « onDark » du Button du design system : sur une photo ou une surface
   profonde, c'est le bouton qui s'éclaircit, pas le fond qui s'assombrit. */
.btn--on-dark {
  background: var(--canvas);
  color: var(--action);
}
.btn--on-dark:hover {
  background: var(--action-tint);
  color: var(--action-focus);
  transform: translateY(-1px);
  box-shadow: var(--shadow-subject);
}
.btn--on-dark:active { transform: scale(var(--press-scale)); }

.btn--indigo:hover,
.btn--action:hover {
  background: var(--action-focus);
  transform: translateY(-1px);
  box-shadow: var(--shadow-subject);
}
.btn--indigo:active,
.btn--action:active { transform: scale(var(--press-scale)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Téléphone : des boutons moins massifs, pour que leur texte se lise d'un coup d'oeil (le grand bouton
   faisait 63 à 71 px de haut, sur deux lignes). La cible tactile reste d'au moins 44 px. */
@media (max-width: 600px) {
  .btn { min-height: 44px; }
  .btn--large { gap: 8px; padding: 10px 20px; font-size: 15px; letter-spacing: 0; line-height: 1.25; }
  .btn--medium { gap: 6px; padding: 9px 18px; font-size: 14.5px; letter-spacing: 0; line-height: 1.25; }
  .btn--small { padding: 8px 14px; font-size: 13.5px; }
  .btn--fleche { gap: 10px; padding-right: 5px; }
  .btn--fleche.btn--large { padding-left: 20px; }
  .btn--fleche.btn--medium { padding-left: 18px; }
  .btn--fleche.btn--small { padding-left: 14px; }
  .btn__fleche, .btn--large .btn__fleche { width: 32px; height: 32px; }
  .btn--small .btn__fleche, .btn--medium .btn__fleche { width: 28px; height: 28px; }
}