/* =========================================================================
   portail.css — la couche de navigation d'iSBi
   -------------------------------------------------------------------------
   Sert l'accueil (Isbi/index.html) ET les neuf pages de logiciel
   (Isbi/<Logiciel>/index.html). Une seule feuille : une correction ici se
   voit partout, au lieu de neuf styles en ligne a modifier un par un.

   Les pages de COURS gardent leur propre style.css : elles ne dependent
   pas de ce fichier.

   Chaque page de logiciel pose sa couleur :  <body style="--a:#21a366">

   TYPOGRAPHIE — Aptos est la police de Microsoft 365 depuis 2023. Elle est
   installee chez tous ceux qui ont Office recent, donc chez la quasi
   totalite des etudiants. Elle n'est PAS chargee depuis un serveur
   exterieur : pas de Google Fonts, qui exporterait l'adresse IP des
   visiteurs hors d'Europe. Ceux qui ne l'ont pas voient Segoe UI, puis la
   police systeme. Le rendu reste le meme.
   ========================================================================= */

:root {
  --a: #e94560;                    /* accent, remplace par chaque page */
  --fond: #0d0b14;
  --fond-2: #141020;
  --carte: rgba(255, 255, 255, .045);
  --carte-survol: rgba(255, 255, 255, .075);
  --bord: rgba(255, 255, 255, .10);
  --texte: #f4f2f8;
  --doux: #9b93b0;
  --rayon: 20px;
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: #f6f4fb;
    --fond-2: #ffffff;
    --carte: rgba(255, 255, 255, .8);
    --carte-survol: #ffffff;
    --bord: rgba(20, 16, 32, .10);
    --texte: #16121f;
    --doux: #5d5570;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Aptos", "Aptos Display", "Segoe UI Variable Display",
               "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  min-height: 100vh;
  padding: 48px 24px 64px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- decor ---
   Deux halos flous qui derivent lentement. C'est tout le decor : pas
   d'image, rien a telecharger, et ca se coupe si la personne a demande
   moins d'animations. */

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .30;
  pointer-events: none;
}

body::before {
  background: var(--a);
  top: -22vmax;
  right: -18vmax;
  animation: derive 26s ease-in-out infinite alternate;
}

body::after {
  background: #4d7cff;
  bottom: -26vmax;
  left: -20vmax;
  opacity: .18;
  animation: derive 34s ease-in-out infinite alternate-reverse;
}

@keyframes derive {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vmax, 5vmax, 0) scale(1.15); }
}

@media (prefers-color-scheme: light) {
  body::before { opacity: .20; }
  body::after  { opacity: .12; }
}

/* ------------------------------------------------------------- en-tete --- */

.enveloppe { max-width: 1180px; margin: 0 auto; }

.retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 44px;
  padding: 9px 18px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--carte);
  color: var(--doux);
  font-size: .86rem;
  text-decoration: none;
  transition: color .2s, border-color .2s, transform .2s;
}

.retour:hover { color: var(--texte); border-color: var(--a); transform: translateX(-3px); }
.retour:focus-visible { outline: 3px solid var(--a); outline-offset: 3px; }

header { margin-bottom: 52px; max-width: 820px; }

.pastille {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 14px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--carte);
  color: var(--a);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.icone { font-size: 3rem; line-height: 1; margin-bottom: 18px; }

h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin-bottom: 16px;
}

/* La marque s'ecrit iSBi : les i en minuscule, jamais en capitales. */
.marque {
  background: linear-gradient(115deg, var(--texte) 20%, var(--a) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: none;
}

.accroche { font-size: clamp(1.02rem, 2.1vw, 1.3rem); color: var(--doux); max-width: 62ch; }
.accroche strong { color: var(--texte); font-weight: 600; }

/* --------------------------------------------------------------- chiffres */

.chiffres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.chiffre {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--carte);
  font-size: .84rem;
  color: var(--doux);
}

.chiffre b { font-size: 1.04rem; font-weight: 700; color: var(--texte); }

/* --------------------------------------------------------------- cartes --- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease,
              background .25s ease, box-shadow .25s ease;
}

/* Le halo de couleur du logiciel, revele au survol. */
.carte::after {
  content: "";
  position: absolute;
  inset: -40% 50% 60% -40%;
  background: radial-gradient(circle, var(--c, var(--a)) 0%, transparent 62%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.carte:hover,
.carte:focus-visible {
  transform: translateY(-5px);
  background: var(--carte-survol);
  border-color: var(--c, var(--a));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

.carte:hover::after { opacity: .13; }
.carte:focus-visible { outline: 3px solid var(--c, var(--a)); outline-offset: 3px; }

.carte-icone {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 16px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--c, var(--a)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--a)) 34%, transparent);
}

.carte-niveau,
.carte-sur {
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c, var(--a));
  margin-bottom: 8px;
}

.carte-titre { font-size: 1.16rem; font-weight: 700; letter-spacing: -.012em; margin-bottom: 8px; }
.carte-texte { font-size: .875rem; color: var(--doux); flex: 1; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

.etiquette {
  padding: 4px 11px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  font-size: .73rem;
  color: var(--doux);
}

.carte-fleche {
  margin-top: 18px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--c, var(--a));
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.carte-fleche span { transition: transform .25s ease; }
.carte:hover .carte-fleche span { transform: translateX(5px); }

/* Le bandeau d'un module recent. */
.neuf {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c, var(--a));
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- pied --- */

footer {
  max-width: 1180px;
  margin: 64px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--bord);
  color: var(--doux);
  font-size: .82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
}

/* ----------------------------------------------------- confort et impression */

@media (max-width: 640px) {
  body { padding: 28px 16px 48px; }
  header { margin-bottom: 36px; }
  .grille { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, body::after { animation: none; }
  .carte, .retour, .carte-fleche span { transition: none; }
  .carte:hover { transform: none; }
}

@media print {
  body::before, body::after, .retour { display: none; }
  body { background: #fff; color: #000; padding: 0; }
  .carte { break-inside: avoid; border-color: #ccc; }
}

/* --------------------------------------------- carte « Mon portfolio » ---
   Posee par scripts/19-portfolio.py sur les pages Photoshop, Illustrator et
   InDesign. Elle ne prend PAS de --c en ligne : --c colore a la fois le
   texte de la carte et le fond du badge « neuf », ecrit en blanc. Aucune
   couleur unique ne tient les deux dans les deux themes.
     sombre : texte #a78bfa (6,9:1 sur la carte), badge #6d28d9 (7,1:1)
     clair  : texte #6d28d9 (7,1:1 sur blanc),    badge #6d28d9 */
.carte-portfolio { --c: #a78bfa; }
.carte-portfolio .neuf { background: #6d28d9; }
@media (prefers-color-scheme: light) {
  .carte-portfolio { --c: #6d28d9; }
}