/* =========================================================================
   Émilie Formation — améliorations de lisibilité
   ---------------------------------------------------------------------
   Cette feuille se superpose à app.css (la CSS d'origine du site) sans la
   modifier : chaque règle corrige un problème mesuré, et rien d'autre.
   Pour revenir exactement à l'apparence d'avant, il suffit de retirer la
   ligne <link> qui la charge.

   Ce qui est corrigé, et pourquoi :
     1. contraste du rose de marque, illisible en texte et sous du blanc ;
     2. gris du texte secondaire, juste sous le seuil d'accessibilité ;
     3. corps de texte à 14 px, remonté à 15 px ;
     4. lignes trop longues dans les fiches formation ;
     5. respiration entre les sections ;
     6. zones cliquables trop petites et focus clavier invisible.
   ========================================================================= */

:root {
  /* Le rose de marque #FF8A9D est conservé tel quel pour tous les aplats
     doux : pastilles, cercles d'icônes, dégradés décoratifs. On lui ajoute
     deux nuances plus profondes de la même famille, réservées à ce qui doit
     se lire — un texte rose, ou un fond portant du texte blanc.
     #C7395A : blanc dessus = 5,0:1   #BE3A58 : sur blanc = 5,4:1 */
  --rose-fort: 199 57 90;
  --rose-encre: 190 58 88;
  --rose-encre-fonce: 158 39 64;

  /* Gris du texte secondaire : 4,4:1 avant, sous le minimum de 4,5:1. */
  --muted-foreground: 240 5% 37%;
}

/* ---------- 1. Le rose, là où il porte du sens ------------------------- */

.text-primary { color: rgb(var(--rose-encre)); }
.hover\:text-primary:hover { color: rgb(var(--rose-encre)); }
.stat-number { color: rgb(var(--rose-encre)); }

/* Sur un aplat rose clair, il faut descendre encore d'un cran. */
.bg-formation-pink-light .text-primary,
.bg-formation-pink-light.text-primary { color: rgb(var(--rose-encre-fonce)); }

/* Fonds portant du texte blanc : bouton, pastille de navigation active,
   filtre sélectionné, bandeau d'appel. */
.bg-primary,
.hover\:bg-primary:hover,
.btn-primary { background-color: rgb(var(--rose-fort)); }
.btn-primary { color: #fff; }
.btn-primary:hover { background-color: rgb(var(--rose-encre-fonce)); }

/* Le :not() laisse la main aux boutons qui portent déjà leur couleur —
   celui du héros, blanc sur la photo, doit le rester. */
.btn-outlined:not(.border-white) { border-color: rgb(var(--rose-encre)); }
.btn-outlined:not(.text-white) { color: rgb(var(--rose-encre)); }
.btn-outlined:not(.text-white):hover { background-color: rgb(var(--rose-encre)); color: #fff; }

.bg-gradient-to-r.from-primary {
  background-image: linear-gradient(to right, rgb(var(--rose-fort)), rgb(199 57 90 / .88));
}

/* Le blanc « rosé » d'origine sur ces fonds : on le passe en blanc franc. */
.text-primary-foreground { color: #fff; }
.text-primary-foreground\/80 { color: rgb(255 255 255 / .92); }

/* Photo du héros : le voile était trop léger sous le sous-titre. */
.hero-section .from-black\/50 {
  background-image: linear-gradient(to right, rgb(0 0 0 / .68), rgb(0 0 0 / .52), rgb(0 0 0 / .14));
}
.hero-subtitle { color: #fff; }
.hero-content .bg-primary\/80 { background-color: rgb(var(--rose-fort)); }

/* ---------- 2. Corps de texte : 14 px -> 15 px ------------------------- */

p.text-sm,
li > span.text-sm,
.text-sm p,
.text-sm li,
[data-accordion-panel] .text-sm,
.text-sm h3,
.text-sm h4,
.text-sm .font-medium,
.stat-label {
  font-size: .9375rem;
  line-height: 1.65;
}

/* Les paragraphes de contenu respirent un peu plus. */
p.text-muted-foreground,
.section-subtitle,
.leading-relaxed { line-height: 1.7; }

/* ---------- 3. Longueur de ligne --------------------------------------- */

/* Au-delà d'environ 75 caractères, l'œil perd la ligne suivante.
   L'unité ch se mesure sur le « 0 », plus large que la moyenne : 64ch
   correspond à peu près à 80 caractères en Inter. */
main p,
main li,
[data-accordion-panel] li > span { max-width: 64ch; }

/* Les blocs volontairement centrés gardent leur largeur d'origine. */
main p.mx-auto,
main .text-center p,
.section-subtitle { max-width: 44rem; }

/* Les cellules de tableau et les listes en colonnes ne sont pas du texte
   courant : on les laisse tranquilles. */
main .grid li,
main .flex li { max-width: none; }

/* ---------- 4. Respiration entre les sections -------------------------- */

@media (min-width: 768px) {
  .section-container { padding-top: 5rem; padding-bottom: 5rem; }
  .section-subtitle { margin-bottom: 3.5rem; }
}

/* Les listes d'objectifs et de savoirs étaient très serrées. */
[data-accordion-panel] ul.space-y-2 > li + li { margin-top: .7rem; }

/* ---------- 5. Zones cliquables et focus clavier ----------------------- */

/* Les liens du pied de page ne faisaient que 20 px de haut. */
footer ul li > a,
footer ul li > button { display: inline-flex; align-items: center; padding-block: .35rem; }

/* Icône de réseau social : une pastille assez large pour le doigt. */
footer a[aria-label] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -.625rem;
  border-radius: 9999px;
}

/* Le lien de retour en haut d'une fiche formation. */
a.inline-flex.items-center.text-primary { padding-block: .3rem; }

/* Un contour net et visible, y compris sur les éléments où le site
   d'origine avait retiré l'outline. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[data-radix-collection-item]:focus-visible {
  outline: 3px solid rgb(var(--rose-fort));
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 6. Détails ------------------------------------------------- */

/* Le titre d'une carte formation passait en rose survolé sur fond blanc. */
.group:hover .group-hover\:text-primary { color: rgb(var(--rose-encre)); }

/* Icône blanche sur le rose au survol d'une carte : le fond doit suivre. */
.group:hover .group-hover\:bg-primary { background-color: rgb(var(--rose-fort)); }

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