/* ---------------------------------------------------------------------------
 * formationaj.fr — feuille commune
 *
 * Commune DES LE DEPART : la prochaine formation n'aura qu'a s'y raccorder.
 *
 * PARTI PRIS SOMBRE
 * Les quatre logos sont des ecussons metalliques, faits pour ressortir sur un
 * fond profond — sur blanc ils s'effacent, et la page ressemblait a un annuaire.
 * Ici le fond porte la lumiere vers eux. L'or et le vert du drapeau senegalais,
 * deja employes par SENEmap, servent d'accents.
 * ------------------------------------------------------------------------- */

:root {
  --vert:       #12925A;
  --vert-vif:   #1BB673;
  --or:         #E0B23E;
  --or-pale:    #F4D488;
  --terre:      #C1272D;

  --nuit:       #071410;
  --nuit-clair: #0D2119;
  --carte:      #10291F;
  --carte-haut: #16362A;
  --bord:       #1E4232;

  --texte:      #E8EFE9;
  --texte-doux: #9FB3A6;
  --texte-faible: #86998C;
}

* { box-sizing: border-box; }

/* LA PAGE OCCUPE LA HAUTEUR DE LA FENETRE, quelle qu'elle soit.
   Compacter les tailles ne suffisait pas : sur un ecran plus haut que prevu,
   le contenu se tassait en haut et laissait un vide de mille pixels. Ici le
   corps est une colonne dont le contenu s'etire, et le pied reste en bas. */
html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texte);
  background: var(--nuit);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vert-vif); }

/* --- Bandeau : traite comme une couverture, non comme un en-tete ---------- */
.bandeau { position: relative; overflow: hidden; }
.bandeau .trois-couleurs { display: flex; height: 4px; }
.bandeau .trois-couleurs span { flex: 1; }
.bandeau .trois-couleurs span:nth-child(1) { background: var(--vert); }
.bandeau .trois-couleurs span:nth-child(2) { background: var(--or); }
.bandeau .trois-couleurs span:nth-child(3) { background: var(--terre); }

/* Une lueur derriere le titre : le fond n'est pas un aplat mort, il porte
   la lumiere comme le font les ecussons eux-memes. */
.bandeau::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1000px 420px at 18% -10%, rgba(18,146,90,.22), transparent 62%),
    radial-gradient(760px 340px at 88% 8%, rgba(224,178,62,.14), transparent 60%);
}
.bandeau .dedans {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; padding: clamp(1.2rem, 2.2vh, 2.4rem) 1.4rem clamp(1.3rem, 2.2vh, 2.2rem);
}
.bandeau h1 {
  margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 800;
  line-height: 1.15; letter-spacing: -.02em; max-width: 24ch;
}
.bandeau .sous {
  margin: .7rem 0 0; color: var(--texte-doux); font-size: .95rem;
  max-width: 58ch; line-height: 1.55;
}
.bandeau .retour {
  display: inline-block; margin-bottom: 1.2rem; font-size: .85rem;
  color: var(--or-pale); text-decoration: none; letter-spacing: .01em;
}
.bandeau .retour:hover { text-decoration: underline; }

/* Accueil : la signature en couverture, posee a cote du titre. */
.dedans-accueil { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.dedans-accueil .signature {
  width: 96px; height: auto; flex: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.bandeau-accueil { border-bottom: 1px solid var(--bord); }

/* --- Corps --------------------------------------------------------------- */
/* Le corps de page prend toute la place restante et repartit ses trois blocs :
   le chapeau en haut, les applications au centre, la ligne de rappel en bas.
   Les marges respirent quand l'ecran est grand, se resserrent quand il ne
   l'est pas — sans jamais descendre sous un minimum lisible. */
.page {
  flex: 1;
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(1rem, 2vh, 2.4rem) 1.4rem clamp(.9rem, 1.8vh, 2rem);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1rem, 2.2vh, 2.2rem);
}

h2 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--or); margin: 0 0 .9rem; font-weight: 700;
  display: flex; align-items: center; gap: .9rem;
}
h2::after { content: ''; flex: 1; height: 1px; background: var(--bord); }
h2:first-of-type { margin-top: 0; }

h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; color: var(--texte); }
p { margin: .7rem 0; }
/* LES DEUX PHRASES QUI PORTENT LE SENS DE LA PAGE
   Elles etaient traitees comme du remplissage : petites, grises, poussees dans
   un coin. Or l'une dit ce qui guide le travail, l'autre ce qu'on trouve dans
   une formation — c'est tout ce qu'un visiteur presse retiendra. Elles sont
   donc centrees, grandes, et le mot qui compte y est mis en valeur. */
.chapeau, .dessous {
  margin: 0 auto; text-align: center; max-width: 62ch;
  color: var(--texte); line-height: 1.55;
}
.chapeau {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 400; letter-spacing: -.005em;
}
.dessous { font-size: clamp(1rem, 1.25vw, 1.16rem); color: var(--texte-doux); }

/* Le fragment mis en avant : la phrase se lit d'un trait, mais l'oeil accroche
   ce qui compte avant meme de l'avoir lue. */
.chapeau em, .dessous em {
  font-style: normal; font-weight: 700; color: var(--or-pale);
}
.chapeau strong, .dessous strong {
  font-weight: 700; color: var(--vert-vif);
}

/* --- Cartes -------------------------------------------------------------- */
.cartes { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 14px;
  padding: 1.2rem 1.3rem; text-decoration: none; color: inherit; display: block;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
a.carte:hover {
  border-color: var(--vert); transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.carte h3 { margin: 0 0 .4rem; color: var(--texte); font-size: 1.06rem; font-weight: 700; }
.carte p { margin: 0; font-size: .87rem; color: var(--texte-doux); line-height: 1.55; }
.carte .etiquette {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px;
  background: rgba(27,182,115,.14); color: var(--vert-vif);
  border: 1px solid rgba(27,182,115,.3); margin-bottom: .7rem;
}
.carte .etiquette.attente {
  background: transparent; color: var(--texte-faible); border-color: var(--bord);
}

/* --- Cartes des applications ---------------------------------------------
   Le visuel est pose sur un fond plus clair que la carte, legerement bombe :
   les ecussons sont des objets, ils ont besoin d'une surface sur laquelle
   reposer plutot que d'un trou noir. */
/* QUATRE COLONNES FIXES, non « autant que la place permet » : les quatre
   applications doivent se lire d'un coup d'oeil, sans qu'une seule se retrouve
   isolee sur une seconde ligne. En dessous de 900 px, on repasse a deux. */
.cartes-apps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cartes-apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cartes-apps { grid-template-columns: 1fr; } }
.carte-app { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte-app .visuel {
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(224,178,62,.10), transparent 68%),
    linear-gradient(180deg, var(--carte-haut), var(--carte));
  border-bottom: 1px solid var(--bord);
  /* Le visuel grandit avec l'ecran : c'est lui qui doit occuper la hauteur
     gagnee, pas les marges. */
  height: clamp(112px, 14vh, 176px);
  display: flex; align-items: center; justify-content: center; padding: .8rem;
}
.carte-app .visuel img {
  max-height: 100%; max-width: 80%; object-fit: contain;
  filter: drop-shadow(0 5px 14px rgba(0,0,0,.55));
  transition: transform .2s;
}
a.carte-app:hover .visuel img { transform: scale(1.05); }
.carte-app .dedans-carte { padding: .9rem 1.05rem 1.05rem; flex: 1; display: flex; flex-direction: column; }
.carte-app .dedans-carte p { flex: 1; }
.carte-app .lien {
  display: inline-block; margin-top: .8rem; font-size: .86rem;
  font-weight: 700; color: var(--vert-vif);
}
a.carte-app:hover .lien { text-decoration: underline; }

/* --- Liste de documents -------------------------------------------------- */
.docs { list-style: none; padding: 0; margin: 0; }
.docs li { border-bottom: 1px solid var(--bord); }
.docs li:last-child { border-bottom: 0; }
.docs a {
  display: flex; align-items: baseline; gap: .9rem; padding: .85rem .6rem;
  text-decoration: none; color: inherit; border-radius: 8px; flex-wrap: wrap;
  transition: background .15s;
}
.docs a:hover { background: var(--carte); }
.docs .nom { font-weight: 600; color: var(--vert-vif); }
/* La version Word est signalee mais ne se met pas en avant : le PDF est
   ce qu'on consulte et imprime, le .docx ne sert qu'a retoucher. */
.docs .modifiable { font-weight: 400; color: var(--texte-faible); font-size: .85em; }
.docs .quoi { font-size: .88rem; color: var(--texte-doux); flex: 1; min-width: 210px; }
.docs .format {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--texte-faible);
  border: 1px solid var(--bord); border-radius: 4px; padding: .1rem .45rem; white-space: nowrap;
}

/* --- Encadres ------------------------------------------------------------ */
.encadre {
  background: rgba(224,178,62,.07); border: 1px solid rgba(224,178,62,.28);
  border-radius: 12px; padding: 1.05rem 1.3rem; margin: 1.6rem 0; font-size: .93rem;
  color: var(--texte-doux);
}
.encadre b { color: var(--or-pale); }
.encadre.info { background: rgba(27,182,115,.07); border-color: rgba(27,182,115,.26); }
.encadre.info b { color: var(--vert-vif); }

/* --- Pied ---------------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--bord); margin-top: 0; padding: 1rem 1.4rem;
  font-size: .8rem; color: var(--texte-faible);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  max-width: 1180px; margin-left: auto; margin-right: auto;
}
.pied .reserve { color: var(--or); opacity: .75; }
.pied a { color: var(--texte-doux); }

@media (max-width: 600px) {
  .bandeau .dedans { padding: 2rem 1.1rem 2.2rem; }
  .dedans-accueil { gap: 1.2rem; }
  .dedans-accueil .signature { width: 84px; }
  .page { padding: 1.8rem 1.1rem 2.4rem; }
}