/* ==========================================================================
   INSFSF — DESIGN SYSTEM
   Institut National Supérieur de Formation de Sages-Femmes (Haïti)
   --------------------------------------------------------------------------
   Fichier 1/2 : jetons de design (tokens) + composants réutilisables.
   Ne contient aucune règle propre à une page. Chargé sur TOUTES les pages.

   Sommaire
   01. Jetons — couleurs
   02. Jetons — typographie
   03. Jetons — espacements, rayons, ombres, élévation, mouvement
   04. Base & réinitialisation utile
   05. Accessibilité (focus, skip link, reduced motion)
   06. Mise en page (conteneur, grille, sections, en-têtes de section)
   07. Boutons
   08. Cartes
   09. Formulaires
   10. Badges
   11. Alertes
   12. Tableaux
   13. Utilitaires
   ========================================================================== */


/* ==========================================================================
   01. JETONS — COULEURS
   Bleu et blanc sont repris exactement du sceau officiel (#001458).
   L'accent « vie » — le fœtus du logo — est décliné en ROSE (#C2185B) :
   registre de la santé maternelle et néonatale, choisi avec la direction.
   Il est distribué sur toute la page (boutons, icônes, bordures de cartes)
   selon une rotation maîtrisée.

   RÈGLE RÉVISÉE — le rose en fond. Cette section interdisait auparavant tout
   usage du rose en fond décoratif. La règle est assouplie, et seulement dans
   ces limites : un SOUFFLE, jamais un aplat. Concrètement, en dessous de 8 %
   d'opacité pour une surface de section (--fond-tendre) et de 16 % pour l'angle
   d'une carte (--carte-teinte). Au-delà, deux choses cassent : les contrastes
   du texte gris passent sous 4,5:1, et le registre glisse de l'institut
   national vers l'association. Le bleu reste la couleur de structure.
   ========================================================================== */
:root {
  /* — Marque ————————————————————————————————— */
  --c-sceau:        #001458;  /* bleu exact du sceau — réservé au logo & aux fonds profonds */
  --c-primaire:     #0A2A78;  /* bleu institutionnel — actions, liens, titres */
  --c-primaire-h:   #06205F;  /* hover  */
  --c-primaire-a:   #04174A;  /* active */
  --c-primaire-05:  rgba(10, 42, 120, .05);
  --c-primaire-10:  rgba(10, 42, 120, .10);
  --c-primaire-25:  rgba(10, 42, 120, .25);

  /* Accent « vie ». Rose profond retenu avec la direction : registre de la
     santé maternelle et néonatale, plus chaleureux que le rouge, et
     suffisamment soutenu pour rester institutionnel (jamais pastel).
     Contraste blanc sur rose : 5,9:1 → WCAG AA texte normal. */
  --c-vie:          #C2185B;
  --c-vie-h:        #9E1049;  /* survol / actif */
  --c-vie-05:       rgba(194, 24, 91, .05);
  --c-vie-10:       rgba(194, 24, 91, .10);
  /* Déclinaison claire, obligatoire sur les fonds bleu sceau : le rose
     soutenu n'y donne que 2,8:1. Celui-ci monte à 8,5:1 → WCAG AA. */
  --c-vie-clair:    #FF9AB8;

  --c-soin:         #0E7C86;  /* sarcelle clinique — 3e niveau : données, info, santé */
  --c-soin-10:      rgba(14, 124, 134, .10);

  /* — Neutres ———————————————————————————————— */
  --c-encre:        #101828;  /* texte principal */
  --c-ardoise:      #475467;  /* texte secondaire */
  /* Gris tertiaire — assombri de #8A94A6 à #5D6880.
     L'ancienne valeur ne donnait que 3,06:1 sur blanc, sous les 4,5:1 exigés
     pour du texte normal. Ce n'était pas une conséquence des fonds teintés :
     le défaut existait déjà, et il portait sur du texte que les visiteurs
     lisent — la date de chaque actualité (.actu__date), les informations d'un
     évènement annulé, la description des entrées de sous-menu. Il est apparu
     en mesurant les contrastes des nouveaux fonds.
     Nouvelle valeur : 5,59:1 sur blanc · 5,16:1 sur brume · 4,69:1 au point le
     plus teinté du fond tendre. Le blanc posé DESSUS (pavé de date d'un
     évènement annulé) monte lui aussi à 5,59:1. */
  --c-gris:         #5D6880;  /* texte tertiaire, placeholders */
  --c-bordure:      #E1E6EF;
  --c-bordure-f:    #C9D2E2;  /* bordure forte (inputs) */
  --c-brume:        #F3F6FB;  /* surface alternée */
  --c-brume-2:      #E9EFF8;
  --c-blanc:        #FFFFFF;

  /* — États sémantiques ——————————————————————— */
  --c-succes:       #0F7B4F;
  --c-succes-bg:    #E7F5EE;
  --c-attention:    #9A6200;
  --c-attention-bg: #FDF3E2;
  --c-erreur:       #B42318;
  --c-erreur-bg:    #FEECEA;
  --c-info:         #0E7C86;
  --c-info-bg:      #E5F4F5;

  /* — Rôles ——————————————————————————————————— */
  --fond:           var(--c-blanc);
  /* La surface alternée du SITE PUBLIC est la surface teintée, définie plus
     bas. Un seul point de réglage : changer --fond-tendre change les neuf
     pages d'un coup, et une page ajoutée demain l'a sans qu'on y pense.
     --c-brume reste la surface FROIDE et plate, et garde ses emplois propres :
     l'administration, les champs désactivés, les badges, les pieds de tableau.
     C'est voulu que l'administration reste sobre — ce n'est pas une vitrine. */
  --fond-alt:       var(--fond-tendre);
  --fond-profond:   var(--c-sceau);
  --texte:          var(--c-encre);
  --texte-doux:     var(--c-ardoise);
  --lien:           var(--c-primaire);

  /* — Surfaces teintées ————————————————————————
     Une surface alternée un peu plus chaude que la brume : un souffle de rose
     en haut à gauche, un souffle de sarcelle en bas à droite, sur une base
     presque blanche. Les deux teintes sont celles du sceau, pas des couleurs
     décoratives ajoutées de l'extérieur.

     TRÈS LÉGER, ET C'EST VOULU. Le bleu reste la couleur de structure de
     l'institut — titres, navigation, bandes profondes. Le rose ne fait que
     réchauffer la page ; poussé plus loin, il ferait basculer le registre d'un
     institut national vers celui d'une association, et il abîmerait les
     contrastes du texte gris.

     Contrastes mesurés dans le navigateur AU POINT LE PLUS TEINTÉ du fond —
     le pic de la couche rose, rgb(247, 231, 238). C'est le pire cas, et c'est
     le seul chiffre qui compte : sur la base seule tout est plus confortable.
       --texte      #101828 → 14,9:1
       --c-primaire #0A2A78 → 10,9:1
       --texte-doux #475467 →  6,5:1
       --c-vie      #C2185B →  4,9:1
       --c-gris     #5D6880 →  4,7:1
     Tous au-dessus des 4,5:1 exigés pour du texte normal.
     Aucun octet supplémentaire : ce sont des dégradés CSS, pas des images. */
  --fond-tendre-base: #FBF8FA;
  --fond-tendre:
      radial-gradient(118% 96% at 3% 0%,   rgba(194, 24, 91, .075), rgba(194, 24, 91, 0) 58%),
      radial-gradient(96% 88% at 100% 100%, rgba(14, 124, 134, .05), rgba(14, 124, 134, 0) 62%),
      var(--fond-tendre-base);

  /* La bande profonde garde son bleu sceau : on lui donne seulement du relief,
     un souffle de framboise dans un angle. Pas de virage vers le violet — ce
     serait perdre la couleur de l'institution.

     Le souffle éclaircit le fond, donc les contrastes ont été remesurés au
     point le plus clair de la bande, rgb(58, 21, 89) :
       blanc                    → 14,7:1
       blanc 86 % (corps)       → 11,1:1
       --c-vie-clair #FF9AB8    →  7,4:1   (l'eyebrow)
     Le rose SOUTENU reste interdit ici : il ne donne que 2,8:1 sur ce bleu,
     d'où --c-vie-clair. */
  --fond-profond-relief:
      radial-gradient(90% 120% at 88% 8%,  rgba(194, 24, 91, .30), rgba(194, 24, 91, 0) 55%),
      radial-gradient(80% 110% at 4% 100%, rgba(14, 124, 134, .22), rgba(14, 124, 134, 0) 60%),
      var(--c-sceau);


/* ==========================================================================
   02. JETONS — TYPOGRAPHIE
   Poppins = titres (géométrique, institutionnel, lisible en grand).
   Inter    = textes (haute lisibilité en petit corps, chiffres tabulaires).
   Échelle fluide : aucune media query nécessaire pour le corps du texte.
   ========================================================================== */
  --f-titre: "Poppins", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.5rem,  1.55rem + 3.8vw, 4.25rem);  /* 40 → 68 px */
  --fs-h1:      clamp(2.125rem, 1.6rem + 2.1vw, 3.25rem);  /* 34 → 52 px */
  --fs-h2:      clamp(1.75rem,  1.4rem + 1.4vw, 2.5rem);   /* 28 → 40 px */
  --fs-h3:      clamp(1.375rem, 1.25rem + .5vw, 1.75rem);  /* 22 → 28 px */
  --fs-h4:      1.25rem;                                    /* 20 px */
  --fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);   /* 17 → 20 px */
  --fs-base:    1.0625rem;                                  /* 17 px */
  --fs-sm:      .9375rem;                                   /* 15 px */
  --fs-xs:      .8125rem;                                   /* 13 px */
  --fs-eyebrow: .75rem;                                     /* 12 px */

  --lh-serre:   1.08;
  --lh-titre:   1.2;
  --lh-base:    1.7;
  --lh-large:   1.8;

  --ls-display: -.025em;
  --ls-titre:   -.015em;
  --ls-eyebrow: .16em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;


/* ==========================================================================
   03. JETONS — ESPACEMENTS, RAYONS, OMBRES, ÉLÉVATION, MOUVEMENT
   Base 4 px, rythme vertical 8 px.
   ========================================================================== */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;
  --sp-section: clamp(3.5rem, 2rem + 5vw, 7rem);      /* padding vertical de section */

  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;
  /* Signature : l'arche « goutte de vie », reprise du pictogramme du sceau. */
  --r-goutte: 46% 46% 46% 46% / 60% 60% 40% 40%;

  /* Cadre d'une grande photo : un rectangle aux quatre coins ARRONDIS DE FAÇON
     ÉGALE. C'est la forme des trois grands visuels du site — À propos, Mot du
     Directeur, Vie étudiante — et de celui de la page Formations.

     Cette valeur remplace --r-arche, qui arrondissait très fortement les deux
     coins du HAUT et presque pas ceux du bas :
       clamp(120px, 22vw, 260px) clamp(120px, 22vw, 260px) 18px 18px
     Ça donnait une arche, un dôme. Le cadre attirait l'œil sur lui-même au lieu
     de laisser voir la photo, et la forme changeait de proportion avec la
     largeur de l'écran — 120 px de rayon sur téléphone, 260 px sur grand écran.
     Ici le rayon est fixe : la même forme partout. */
  --r-cadre-photo: 26px;

  --sh-xs: 0 1px 2px rgba(0, 20, 88, .06);
  --sh-sm: 0 2px 8px rgba(0, 20, 88, .07);
  --sh-md: 0 10px 28px rgba(0, 20, 88, .09);
  --sh-lg: 0 24px 56px rgba(0, 20, 88, .13);
  --sh-focus: 0 0 0 3px var(--c-primaire-25);

  --z-base: 1; --z-sticky: 900; --z-header: 1000; --z-dropdown: 1010;
  --z-overlay: 1050; --z-modal: 1100; --z-toast: 1200;

  --t-rapide: 140ms cubic-bezier(.4, 0, .2, 1);
  --t-base:   240ms cubic-bezier(.4, 0, .2, 1);
  --t-lent:   480ms cubic-bezier(.22, .61, .36, 1);

  --largeur-contenu: 1240px;
  --largeur-texte:   68ch;   /* longueur de ligne confortable */
}


/* ==========================================================================
   04. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-titre);
  color: var(--c-sceau);
  font-weight: var(--fw-semi);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--lien); text-decoration: none; transition: color var(--t-rapide); }
a:hover { color: var(--c-primaire-h); text-decoration: underline; text-underline-offset: 3px; }

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

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }

hr { border: 0; border-top: 1px solid var(--c-bordure); margin: var(--sp-8) 0; }

::selection { background: var(--c-primaire); color: #fff; }


/* ==========================================================================
   05. ACCESSIBILITÉ  (WCAG 2.2 AA)
   ========================================================================== */

/* Focus visible cohérent sur tout le site — jamais supprimé. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--c-primaire);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Sur fond foncé, le focus passe en blanc pour rester perceptible (WCAG 2.4.11). */
.sur-fond-fonce :where(a, button):focus-visible { outline-color: #fff; }

/* Lien d'évitement — 1re tabulation de la page. */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-toast);
  background: var(--c-blanc); color: var(--c-primaire);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm);
  font-weight: var(--fw-semi); box-shadow: var(--sh-lg);
  transition: top var(--t-base);
}
.skip-link:focus { top: var(--sp-4); text-decoration: none; }

/* Texte réservé aux lecteurs d'écran. */
.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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   06. MISE EN PAGE
   Grille : 12 colonnes Bootstrap, gouttière 24 px (32 px ≥ 992 px),
   conteneur max 1240 px, marges latérales 20 px mobile / 40 px desktop.
   ========================================================================== */
.contenu {
  width: 100%;
  max-width: var(--largeur-contenu);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
}

.section { padding-block: var(--sp-section); }
/* --fond-alt EST la surface teintée : les neuf pages en héritent sans qu'on
   touche à leur code, et il n'existe qu'une seule classe pour ça. Une deuxième
   classe « --tendre » aurait fait deux façons de faire la même chose. */
.section--alt { background: var(--fond-alt); }
.section--profond { background: var(--fond-profond); color: rgba(255,255,255,.86); }
/* Même bleu, avec du relief. Réservé aux bandes profondes de la page d'accueil :
   sur une page intérieure, une bande plate se lit mieux. */
.section--profond.section--relief { background: var(--fond-profond-relief); }
.section--profond h1, .section--profond h2, .section--profond h3 { color: #fff; }

/* En-tête de section normalisé : eyebrow + titre + chapô. */
.entete-section { max-width: 62ch; margin-bottom: var(--sp-10); }
.entete-section--centre { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--f-texte);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--c-vie); margin-bottom: var(--sp-3);   /* 5,9:1 sur blanc */
}
/* La pastille de l'eyebrow reprend la goutte du sceau — signature discrète. */
.eyebrow::before {
  content: ""; width: 9px; height: 11px; flex: none;
  background: var(--c-vie); border-radius: var(--r-goutte);
}
/* Sur fond bleu sceau, le rose passe à sa déclinaison claire (contraste). */
.section--profond .eyebrow { color: var(--c-vie-clair); }
.section--profond .eyebrow::before { background: var(--c-vie-clair); }

.chapo { font-size: var(--fs-lead); color: var(--texte-doux); max-width: var(--largeur-texte); }
.section--profond .chapo { color: rgba(255,255,255,.82); }


/* ==========================================================================
   07. BOUTONS
   3 variantes principales + 1 accent rare. Hauteurs : 40 / 48 / 56 px.
   Toutes les cibles tactiles ≥ 44 px (WCAG 2.5.8).
   ========================================================================== */
.btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn-h); padding: 0 var(--sp-6);
  font-family: var(--f-texte); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  letter-spacing: .01em; line-height: 1;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-rapide), color var(--t-rapide),
              border-color var(--t-rapide), box-shadow var(--t-base), transform var(--t-rapide);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--sm { --btn-h: 40px; padding-inline: var(--sp-4); font-size: var(--fs-xs); }
.btn--lg { --btn-h: 56px; padding-inline: var(--sp-8); font-size: var(--fs-base); }
.btn--bloc { display: flex; width: 100%; }

/* ROSE = couleur d'action du site.
   Décision client : tous les boutons passent en rose. Le bleu reste la
   couleur de l'information (liens, navigation, titres), le rose devient
   celle de l'action — la distinction reste donc lisible.
   Blanc sur rose : 5,9:1 → WCAG AA texte normal. */

/* Primaire — action principale. */
.btn--primaire { background: var(--c-vie); border-color: var(--c-vie); color: #fff; }
.btn--primaire:hover { background: var(--c-vie-h); border-color: var(--c-vie-h); color: #fff; box-shadow: var(--sh-md); }
.btn--primaire:active { background: var(--c-vie-h); box-shadow: none; }

/* Secondaire — même importance, engagement moindre. */
.btn--secondaire { background: transparent; border-color: var(--c-vie); color: var(--c-vie); }
.btn--secondaire:hover { background: var(--c-vie-05); border-color: var(--c-vie-h); color: var(--c-vie-h); }

/* Fantôme — actions tertiaires, barres d'outils. */
.btn--fantome { background: transparent; border-color: transparent; color: var(--c-vie); padding-inline: var(--sp-3); }
.btn--fantome:hover { background: var(--c-vie-05); }

/* Vie — conservé comme alias de .btn--primaire (même rendu), pour ne pas
   casser le balisage existant qui l'utilise déjà. */
.btn--vie { background: var(--c-vie); border-color: var(--c-vie); color: #fff; }
.btn--vie:hover { background: var(--c-vie-h); border-color: var(--c-vie-h); color: #fff; box-shadow: var(--sh-md); }

/* Sur fond foncé. */
.btn--clair { background: #fff; border-color: #fff; color: var(--c-sceau); }
.btn--clair:hover { background: rgba(255,255,255,.9); color: var(--c-sceau); box-shadow: var(--sh-md); }
.btn--contour-clair { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--contour-clair:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* États globaux. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
.btn[data-chargement="true"] { color: transparent !important; pointer-events: none; position: relative; }
.btn[data-chargement="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn--secondaire[data-chargement="true"]::after,
.btn--fantome[data-chargement="true"]::after { border-color: var(--c-vie-10); border-top-color: var(--c-vie); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Icône de flèche qui avance au survol — micro-interaction unique du site. */
.btn i { transition: transform var(--t-base); }
.btn:hover i.bi-arrow-right { transform: translateX(4px); }


/* ==========================================================================
   08. CARTES
   ========================================================================== */
.carte {
  background: #fff; border: 1px solid var(--c-bordure); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  height: 100%;
}
.carte--lien:hover, .carte--lien:focus-within { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-bordure-f); }
.carte--plate { box-shadow: none; }
.carte__media { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5); overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; aspect-ratio: 16 / 10; }
.carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lent); }
.carte--lien:hover .carte__media img { transform: scale(1.05); }
.carte__titre { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.carte__texte { color: var(--texte-doux); font-size: var(--fs-sm); }

/* Icône de carte — carré arrondi teinté. */
.carte__icone {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--c-primaire-05);
  color: var(--c-primaire); font-size: 1.5rem; margin-bottom: var(--sp-5);
}

/* — Souffle de couleur dans un angle ————————————————
   Utilitaire, et non variante de .carte : la page d'accueil en a besoin sur des
   blocs qui ne sont pas des cartes (.engagement). Une classe utilitaire évite
   de réécrire le même dégradé pour chaque composant.

     <article class="carte teinte-angle" style="--teinte: 14, 124, 134">

   La valeur est un triplet R, G, B SANS rgb() : c'est ce qui permet de régler
   l'opacité ici, une seule fois, au lieu de la répéter dans chaque page.
   Prendre les teintes dans le sceau :
     rose 194, 24, 91 · sarcelle 14, 124, 134 · bleu 10, 42, 120
   Sans variable, le rose s'applique.

   Le dégradé est posé sur un ::before et non sur background : le bloc garde son
   fond blanc, donc le texte conserve son contraste dans le bas du bloc, là où
   il y a le plus à lire. Le souffle s'éteint avant d'y arriver. */
.teinte-angle { position: relative; overflow: hidden; isolation: isolate; }
.teinte-angle::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(74% 58% at 100% 0%,
              rgba(var(--teinte, 194, 24, 91), .16) 0%,
              rgba(var(--teinte, 194, 24, 91), .04) 42%,
              rgba(var(--teinte, 194, 24, 91), 0) 68%);
}
/* Les icônes reprennent la teinte du bloc : sans cela, une pastille rose sous
   un souffle sarcelle donne deux accents qui se contredisent.
   Le glyphe reste blanc sur la pastille pleine — vérifié : blanc sur sarcelle
   #0E7C86 donne 4,0:1, au-dessus des 3:1 exigés pour un élément non textuel. */
.teinte-angle .carte__icone {
  background: rgba(var(--teinte, 194, 24, 91), .10);
  color: rgb(var(--teinte, 194, 24, 91));
}
.teinte-angle .engagement__icone { background: rgb(var(--teinte, 194, 24, 91)); }
/* Le survol souligne la teinte du bloc, pas un rose systématique. */
.teinte-angle.engagement:hover { border-color: rgb(var(--teinte, 194, 24, 91)); }


/* ==========================================================================
   09. FORMULAIRES
   ========================================================================== */
.champ { margin-bottom: var(--sp-5); }
.champ__label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-encre); margin-bottom: var(--sp-2); }
.champ__label .requis { color: var(--c-vie); }
.champ__aide { font-size: var(--fs-xs); color: var(--c-gris); margin-top: var(--sp-2); }

/* Champ refusé par le serveur. La bordure rouge ne suffit pas : elle est
   invisible pour qui ne distingue pas les couleurs, et muette pour un lecteur
   d'écran. D'où le message texte juste en dessous, relié par aria-describedby,
   et son icône. La couleur est le troisième signal, pas le seul. */
.saisie--faute,
.saisie--faute:focus { border-color: var(--c-erreur); }
.saisie--faute:focus { box-shadow: 0 0 0 3px var(--c-erreur-bg); }
.champ__faute {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-xs); color: var(--c-erreur);
  margin-top: var(--sp-2); font-weight: var(--fw-medium);
}
.champ__faute i { margin-top: .1em; flex: none; }
.champ__erreur { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-erreur); margin-top: var(--sp-2); font-weight: var(--fw-medium); }

.saisie, .selection, .zone-texte {
  width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  font-family: var(--f-texte); font-size: var(--fs-sm); color: var(--c-encre);
  background: #fff; border: 1.5px solid var(--c-bordure-f); border-radius: var(--r-sm);
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide), background var(--t-rapide);
}
.saisie::placeholder, .zone-texte::placeholder { color: var(--c-gris); }
.saisie:hover, .selection:hover, .zone-texte:hover { border-color: var(--c-primaire); }
.saisie:focus, .selection:focus, .zone-texte:focus { outline: none; border-color: var(--c-primaire); box-shadow: var(--sh-focus); }
.saisie:disabled, .zone-texte:disabled, .selection:disabled { background: var(--c-brume); color: var(--c-gris); cursor: not-allowed; border-color: var(--c-bordure); }
.saisie[aria-invalid="true"], .zone-texte[aria-invalid="true"] { border-color: var(--c-erreur); }
.saisie[aria-invalid="true"]:focus, .zone-texte[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180,35,24,.2); }
.zone-texte { min-height: 140px; resize: vertical; line-height: var(--lh-base); }
.selection {
  appearance: none; padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475467'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}


/* ==========================================================================
   10. BADGES
   ========================================================================== */
.badge-i {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.4;
  background: var(--c-primaire-05); color: var(--c-primaire);
}
.badge-i--vie     { background: var(--c-vie-05);     color: var(--c-vie); }
.badge-i--soin    { background: var(--c-soin-10);    color: var(--c-soin); }
.badge-i--succes  { background: var(--c-succes-bg);  color: var(--c-succes); }
.badge-i--attention { background: var(--c-attention-bg); color: var(--c-attention); }
.badge-i--clair   { background: rgba(255,255,255,.14); color: #fff; }


/* ==========================================================================
   11. ALERTES
   ========================================================================== */
.alerte {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  border-left: 4px solid; font-size: var(--fs-sm);
}
.alerte i { font-size: 1.15rem; line-height: 1.4; flex: none; }
.alerte__titre { font-weight: var(--fw-semi); display: block; margin-bottom: 2px; }
.alerte--info      { background: var(--c-info-bg);      border-color: var(--c-info);      color: #0a5a61; }
.alerte--succes    { background: var(--c-succes-bg);    border-color: var(--c-succes);    color: #0a5a3a; }
.alerte--attention { background: var(--c-attention-bg); border-color: var(--c-attention); color: #7a4e00; }
.alerte--erreur    { background: var(--c-erreur-bg);    border-color: var(--c-erreur);    color: #8f1c14; }


/* ==========================================================================
   12. TABLEAUX  (résultats de concours, calendriers, frais)
   ========================================================================== */
.tableau-enveloppe { overflow-x: auto; border: 1px solid var(--c-bordure); border-radius: var(--r-md); }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: #fff; }
.tableau thead th {
  background: var(--c-brume); color: var(--c-sceau);
  font-family: var(--f-texte); font-weight: var(--fw-semi);
  font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase;
  text-align: left; padding: var(--sp-4); border-bottom: 1px solid var(--c-bordure);
  position: sticky; top: 0;
}
.tableau td { padding: var(--sp-4); border-bottom: 1px solid var(--c-bordure); color: var(--texte-doux); }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover td { background: var(--c-primaire-05); }
.tableau .num { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   13. UTILITAIRES
   ========================================================================== */
.txt-doux   { color: var(--texte-doux); }
.txt-centre { text-align: center; }
.mesure     { max-width: var(--largeur-texte); }
.pile-4     { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.pile-3     { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.num-tab    { font-variant-numeric: tabular-nums; }