/* =========================================================
   WwW — Interface d'engagement
   Fondations du design system
   Source : charte graphique WwW + doc RGAA + recommandations Lorène
   Ce fichier est le CONTRAT entre la créa et le code.
   Toute modification ici se répercute sur toutes les pages.
   ========================================================= */

:root {
  /* ---- Couleurs de marque ---- */
  --www-bleu-fonce:  #000995; /* texte et actions, conforme sur blanc et sur les vives */
  --www-bleu-survol: #000672; /* survol d'une action primaire */
  --www-voile-bleu:  rgba(0, 9, 149, .07); /* survol d'une action secondaire */
  --www-vert-fonce:  #037B48; /* action secondaire, conforme sur blanc */
  --www-jaune:       #EADF1A; /* fond et accent uniquement */
  --www-rose:        #FBA7E7; /* fond et accent uniquement */
  --www-bleu-clair:  #5BCDF5; /* fond et accent uniquement */
  /* Le rouge #EC2D2D est volontairement absent : contraste non conforme,
     et connotation erreur ou danger. Décision du 24/07. */

  /* ---- Neutres ----
     Pas de blanc pur ni de noir pur à l'écran, le contraste maximal fatigue
     l'oeil en lecture longue. Recommandation Lorène, 27/07. */
  --www-fond:        #FCFCFA;
  --www-fond-alt:    #F2F1EC;
  --www-fond-bloc:   #FEFEFC; /* PROVISOIRE, À VALIDER PAR LORÈNE.
     Fond des champs de saisie et des blocs encadrés. Remplace le blanc pur,
     écarté par la recommandation du 27/07. Un cran plus clair que --www-fond,
     dans la même famille chaude. Le bloc reste détaché par sa bordure et son
     ombre, pas par son fond : l'écart avec --www-fond n'est que de 1.02:1. */
  --www-encre:       #16161A;
  --www-encre-doux:  #4A4A52;
  --www-bordure:     #8A8A81; /* PROVISOIRE, TEINTE À VALIDER PAR LORÈNE.
     Bordure des champs, des blocs encadrés et des groupes de champs.
     L'ancienne valeur #D6D5CE ne contrastait qu'à 1.4:1 sur --www-fond, sous le
     seuil RGAA de 3:1 exigé pour la bordure d'un champ de saisie.
     Celle-ci est conforme sur les TROIS fonds du site : 3.39:1 sur --www-fond,
     3.45:1 sur --www-fond-bloc, 3.08:1 sur --www-fond-alt. Aucun fond n'est donc
     interdit, il n'y a pas de règle d'emploi à retenir.
     La teinte exacte revient à la créa. Seule contrainte : rester au-dessus de
     3:1 sur les trois fonds, pour que ça reste vrai sans avoir à y penser. */

  /* ---- États ---- */
  --www-succes:      #037B48;
  --www-erreur:      #9A1B1B; /* réservé aux messages d'erreur de formulaire,
                                 jamais comme couleur de marque */
  --www-focus:       #000995;
  --www-focus-epaisseur: 3px; /* épaisseur de l'indicateur de focus, RGAA */
  --www-focus-decalage:  2px;

  /* ---- Typographie ----
     Titres en Jean-Luc ou Decoy, corps en Montserrat.
     Les polices de titre sont des fontes maison, à charger en @font-face.
     Tant qu'elles ne sont pas fournies, le fallback système s'applique. */
  --www-font-titre: "Jean-Luc", "Decoy", Georgia, serif;
  --www-font-corps: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle typographique, base 16px, ratio 1.25 */
  --www-t-xs:   0.8rem;
  --www-t-sm:   0.9rem;
  --www-t-base: 1rem;
  --www-t-md:   1.25rem;
  --www-t-lg:   1.563rem;
  --www-t-xl:   1.953rem;
  --www-t-2xl:  2.441rem;

  --www-lh-serre:  1.2;
  --www-lh-normal: 1.6;

  /* ---- Espacements, base 4px ---- */
  --www-e-1: 0.25rem;
  --www-e-2: 0.5rem;
  --www-e-3: 0.75rem;
  --www-e-4: 1rem;
  --www-e-6: 1.5rem;
  --www-e-8: 2rem;
  --www-e-12: 3rem;
  --www-e-16: 4rem;

  /* ---- Rayons et ombres ---- */
  --www-rayon-sm: 4px;
  --www-rayon-md: 8px;
  --www-rayon-pill: 999px;
  --www-ombre: 0 1px 3px rgba(22, 22, 26, 0.10), 0 4px 12px rgba(22, 22, 26, 0.06);

  /* ---- Divers ---- */
  --www-largeur-texte: 68ch;
  --www-largeur-page: 1120px;
  --www-cible-tactile: 44px; /* taille minimale d'une zone cliquable, RGAA */
}

/* =========================================================
   Base
   ========================================================= */

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

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

body {
  margin: 0;
  background: var(--www-fond);
  color: var(--www-encre);
  font-family: var(--www-font-corps);
  font-size: var(--www-t-base);
  line-height: var(--www-lh-normal);
}

h1, h2, h3 {
  font-family: var(--www-font-titre);
  line-height: var(--www-lh-serre);
  color: var(--www-bleu-fonce);
  margin: 0 0 var(--www-e-4);
}

h1 { font-size: var(--www-t-2xl); }
h2 { font-size: var(--www-t-xl); }
h3 { font-size: var(--www-t-lg); }

p { margin: 0 0 var(--www-e-4); max-width: var(--www-largeur-texte); }

a { color: var(--www-bleu-fonce); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Focus visible et généreux, sur tous les éléments interactifs.
   Ne jamais supprimer cet outline sans le remplacer par un équivalent. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--www-focus-epaisseur) solid var(--www-focus);
  outline-offset: var(--www-focus-decalage);
  border-radius: var(--www-rayon-sm);
}

/* Lien d'évitement, obligatoire RGAA */
.www-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--www-bleu-fonce);
  color: #fff;
  padding: var(--www-e-3) var(--www-e-4);
  z-index: 100;
}
.www-skip:focus { left: 0; }

/* =========================================================
   Mise en page
   ========================================================= */

.www-page { max-width: var(--www-largeur-page); margin: 0 auto; padding: var(--www-e-6) var(--www-e-4) var(--www-e-16); }
.www-etroit { max-width: 720px; }
.www-bandeau { background: var(--www-bleu-clair); padding: var(--www-e-12) var(--www-e-4); }
.www-carte {
  background: var(--www-fond-bloc);
  border: 1px solid var(--www-bordure);
  border-radius: var(--www-rayon-md);
  padding: var(--www-e-6);
  box-shadow: var(--www-ombre);
}

/* =========================================================
   Boutons
   ========================================================= */

.www-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--www-e-2);
  min-height: var(--www-cible-tactile);
  padding: var(--www-e-3) var(--www-e-6);
  font-family: var(--www-font-corps);
  font-size: var(--www-t-base);
  font-weight: 600;
  border-radius: var(--www-rayon-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

.www-btn--primaire { background: var(--www-bleu-fonce); color: #fff; }
.www-btn--primaire:hover { background: var(--www-bleu-survol); }

.www-btn--secondaire { background: transparent; color: var(--www-bleu-fonce); border-color: var(--www-bleu-fonce); }
.www-btn--secondaire:hover { background: var(--www-voile-bleu); }

.www-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* =========================================================
   Formulaires
   ========================================================= */

.www-champ { margin-bottom: var(--www-e-6); max-width: 34rem; }

.www-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--www-e-2);
}

.www-aide {
  display: block;
  font-size: var(--www-t-sm);
  color: var(--www-encre-doux);
  margin-bottom: var(--www-e-2);
}

.www-input, .www-select, .www-textarea {
  width: 100%;
  min-height: var(--www-cible-tactile);
  padding: var(--www-e-3);
  font-family: inherit;
  font-size: var(--www-t-base);
  color: var(--www-encre);
  background: var(--www-fond-bloc);
  border: 2px solid var(--www-bordure);
  border-radius: var(--www-rayon-sm);
}
.www-textarea { min-height: 7rem; resize: vertical; }

.www-input:hover, .www-select:hover, .www-textarea:hover { border-color: var(--www-encre-doux); }

/* L'erreur n'est jamais signalée par la couleur seule :
   bordure épaisse + message texte + aria-invalid. RGAA. */
.www-input[aria-invalid="true"],
.www-select[aria-invalid="true"],
.www-textarea[aria-invalid="true"] {
  border-color: var(--www-erreur);
  border-width: 3px;
}

.www-erreur-champ {
  display: block;
  margin-top: var(--www-e-2);
  color: var(--www-erreur);
  font-size: var(--www-t-sm);
  font-weight: 600;
}

.www-fieldset {
  border: 1px solid var(--www-bordure);
  border-radius: var(--www-rayon-md);
  padding: var(--www-e-4) var(--www-e-4) var(--www-e-2);
  margin: 0 0 var(--www-e-6);
}
.www-legend { font-weight: 700; padding: 0 var(--www-e-2); color: var(--www-bleu-fonce); }

.www-case { display: flex; gap: var(--www-e-3); align-items: flex-start; margin-bottom: var(--www-e-4); max-width: var(--www-largeur-texte); }
.www-case input[type="checkbox"] { width: 1.35rem; height: 1.35rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--www-bleu-fonce); }
.www-case label { font-size: var(--www-t-sm); }

.www-obligatoire { color: var(--www-erreur); font-weight: 700; }

/* =========================================================
   Messages
   ========================================================= */

.www-message {
  border-left: 6px solid;
  border-radius: var(--www-rayon-sm);
  padding: var(--www-e-4);
  margin-bottom: var(--www-e-6);
}
.www-message--succes { border-color: var(--www-succes); background: #EAF6F0; }
.www-message--erreur { border-color: var(--www-erreur); background: #FBEDED; }
.www-message h2 { font-size: var(--www-t-md); margin-bottom: var(--www-e-2); }
.www-message p:last-child { margin-bottom: 0; }

/* =========================================================
   Divers
   ========================================================= */

.www-vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}