/* Vitrine goatHR - feuille unique, aucune dépendance externe.
   Polices système uniquement : la page ne fait aucune requête sortante.

   Palette alignée sur le THÈME CLAIR de l'application (frontend/src/index.css,
   section DESIGN TOKENS) : crème et sable chauds, sarcelle en couleur vive.
   Les noms de jetons reprennent les valeurs de l'application, pour qu'une
   évolution du thème se reporte ici sans avoir à retrouver les équivalences.

   Deux écarts, tous deux imposés par le contraste (WCAG AA, ratios en regard) :

   - --sarcelle (#2fa79b) est la couleur vive de l'application, mais elle ne
     donne que 2,95:1 avec du texte blanc. Elle reste donc DÉCORATIVE ici, et
     les boutons utilisent --sarcelle-fonce.
   - --attenue assombrit le --text-muted de l'application (#7c7468), qui
     plafonne à 4,17:1 sur la crème - juste sous le seuil AA. */

:root {
  /* Fonds - repris tels quels de l'application */
  --creme:      #fbf2e9;   /* --bg-header : bandeau et accroche */
  --corps:      #fefbf8;   /* --bg-main   : fond de page */
  --panneau:    #ffffff;   /* --bg-panel  : cartes */
  --doux:       #f7ebda;   /* --bg-input  */
  --bordure:    #e8d3ae;   /* --border-color */

  /* Textes */
  --encre:      #2e2a25;   /* --text-main - 12,88:1 sur crème */
  --attenue:    #6b6459;   /* --text-muted assombri - 5,28:1 sur crème */

  /* Sarcelle */
  --sarcelle:       #2fa79b;  /* --primary - filets et aplats UNIQUEMENT */
  --sarcelle-clair: #bdeae4;  /* --primary-light */
  --sarcelle-fonce: #1f7268;  /* boutons - 5,73:1 avec du blanc */
  --sarcelle-survol:#1b6459;  /* survol  - 6,97:1 */

  /* Couleurs de module, reprises telles quelles de l'application
     (frontend/src/layout/AppLayout.jsx attribue une teinte par onglet).
     Elles sont DÉCORATIVES ici - filets et pastilles - jamais du texte :
     aucune ne dépasse 3:1 sur fond clair. */
  --sable:    #e8a53d;   /* module Organisation */
  --vert:     #45ad76;   /* module Présences */
  --lavande:  #9b7fd4;   /* module Évaluations */
  --olive:    #93a844;   /* module Bâtir l'avenir */
  --corail:   #f2825b;   /* module Rémunération */
  --rose:     #ef7b93;   /* module Recrutement */
  --bleu:     #4aa3d8;   /* module Tableau de bord */
  --prune:    #b8619f;   /* module Administration RH */

  --largeur: 68rem;
  --rayon: 10px;           /* --radius de l'application */
}

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

body {
  margin: 0;
  /* Pile système : la page s'affiche avec la police native de l'appareil,
     sans télécharger quoi que ce soit. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--corps);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; color: var(--sarcelle-fonce); margin: 0 0 0.6em; }
h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }

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

/* Lien d'évitement : hors écran jusqu'à ce qu'il reçoive le focus clavier.
   Première tabulation de la page, il permet de sauter l'en-tête. */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sarcelle-fonce);
  color: var(--panneau);
  padding: 0.7rem 1.1rem;
  z-index: 10;
}
.lien-evitement:focus {
  left: 0;
}

/* Repère de focus visible partout, y compris sur les cartes et les liens :
   la navigation au clavier doit rester lisible. */
a:focus-visible,
.bouton:focus-visible {
  outline: 3px solid var(--sarcelle-fonce);
  outline-offset: 3px;
}

/* --- En-tête ---------------------------------------------------------- */

/* Bandeau crème, comme l'en-tête de l'application (--bg-header). Le logo est
   détouré, il s'y pose sans rectangle blanc. */
.entete {
  background: var(--creme);
  border-bottom: 1px solid var(--bordure);
}
.entete-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
/* Hauteur fixée, largeur déduite : le rapport du fichier est conservé. */
.marque-logo {
  height: 48px;
  width: auto;
}
.marque-nom {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sarcelle-fonce);
  letter-spacing: -0.01em;
}

.bouton {
  display: inline-block;
  background: var(--sarcelle-fonce);
  color: var(--panneau);
  text-decoration: none;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  border-radius: var(--rayon);
  border: 1px solid transparent;
}
.bouton:hover { background: var(--sarcelle-survol); }

/* --- Accroche --------------------------------------------------------- */

.accroche {
  background: var(--doux);
  border-bottom: 1px solid var(--bordure);
  padding: 3rem 0;
}
.accroche h1 { max-width: 22ch; }
.accroche-texte {
  max-width: 60ch;
  font-size: 1.1rem;
  color: var(--attenue);
  margin-bottom: 0;
}

/* --- Modules ---------------------------------------------------------- */

.modules { padding: 3rem 0 1rem; }

/* Mobile d'abord : une colonne, puis deux, puis trois. `auto-fit` évite un
   point de rupture par palier. */
.grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

/* Une seule règle pour les six cartes : chacune ne redéfinit que sa teinte,
   utilisée par le filet supérieur et par la pastille du titre. */
.carte {
  --teinte: var(--sarcelle);
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--teinte);
  border-radius: var(--rayon);
  padding: 1.4rem 1.4rem 1rem;
}

.carte-organisation  { --teinte: var(--sable);   }
.carte-presences     { --teinte: var(--vert);    }
.carte-evaluations   { --teinte: var(--lavande); }
.carte-batir         { --teinte: var(--olive);   }
.carte-remuneration  { --teinte: var(--corail);  }
.carte-recrutement   { --teinte: var(--rose);    }

/* Pastille devant le titre : reprend la teinte du module. Pseudo-élément,
   donc absente de l'arbre d'accessibilité - c'est un repère visuel, le titre
   porte déjà l'information. */
.carte h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.carte h3::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--teinte);
}
.carte p {
  color: var(--attenue);
  font-size: 0.97rem;
  margin-bottom: 0;
}

/* --- Atouts ----------------------------------------------------------- */

.atouts {
  padding: 2.5rem 0 3rem;
}
.liste-atouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
/* Les quatre atouts alternent des teintes de la palette. Contrairement aux
   cartes, elles ne codent rien : elles aèrent la liste, sans plus. */
.liste-atouts li {
  color: var(--attenue);
  font-size: 0.97rem;
  padding-left: 1rem;
  border-left: 3px solid var(--sarcelle);
}
.liste-atouts li:nth-child(2) { border-left-color: var(--bleu); }
.liste-atouts li:nth-child(3) { border-left-color: var(--prune); }
.liste-atouts li:nth-child(4) { border-left-color: var(--sable); }
.liste-atouts strong { color: var(--encre); }

/* --- Pied ------------------------------------------------------------- */

.pied {
  background: var(--encre);
  color: var(--panneau);
  padding: 1.5rem 0;
}
.pied p {
  margin: 0;
  font-size: 0.9rem;
}

/* --- Paliers ---------------------------------------------------------- */

@media (min-width: 40rem) {
  h1 { font-size: 2.3rem; }
  .accroche { padding: 4rem 0; }
  .grille { grid-template-columns: repeat(2, 1fr); }
  .liste-atouts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .grille { grid-template-columns: repeat(3, 1fr); }
}

/* Aucune animation dans cette page ; la règle protège les transitions de
   survol pour qui demande à limiter les effets de mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}