/* ==========================================================================
   Portfolio Mehar Jemai
   --------------------------------------------------------------------------
   REGLE ABSOLUE DE CE FICHIER : aucune propriete `content` n'est utilisee
   pour produire du texte ou un symbole decoratif. Les lecteurs d'ecran
   (VoiceOver, NVDA, JAWS, TalkBack) vocalisent le contenu genere par CSS,
   ce qui provoque des annonces parasites juste avant les titres et les liens.
   Tout element visuel est soit une bordure, soit un fond, soit un degrade,
   soit une image SVG inline marquee aria-hidden="true" dans le HTML.
   Ne jamais ajouter de ::before { content: "..." } ni de ::after { content: "..." }
   dans ce fichier, meme pour une puce, une fleche ou un chevron.
   --------------------------------------------------------------------------
   Sommaire
     1.  Jetons de couleur
     2.  Bases
     3.  Lien d'evitement
     4.  Entete et navigation
     5.  Selecteur de theme
     6.  Sections et titres d'introduction
     7.  Boutons et liens de suite
     8.  Accueil
     9.  Pastilles de statut
     10. Cartes
     11. Liste des projets
     12. Fiche projet
     13. Parcours et etapes
     14. Tableau des competences
     15. Fiches d'information
     16. Pied de page
     17. Reglages d'affichage : taille, espacement, contraste
     18. Animations
     19. Preferences systeme et impression
     20. Entete sur petit ecran
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de couleur
   Theme clair par defaut sur :root, redefini pour le systeme sombre, puis
   une troisieme fois pour le choix explicite, afin que le selecteur de theme
   gagne dans les deux sens.
   Contrastes vises : 7:1 minimum pour le texte courant (RGAA, niveau AAA),
   4,5:1 minimum pour le texte des pastilles, 3:1 minimum pour les bordures
   porteuses de sens et pour l'indicateur de focus.
   -------------------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --surface: #f1f4f7;
  --surface-strong: #e4e9ef;
  --border: #b6c0cb;
  --border-strong: #6c7885;
  --text: #14181d;           /* 16,9:1 sur --bg */
  --text-muted: #3f4956;     /*  9,1:1 sur --bg, 8,3:1 sur --surface */
  --accent: #0a4f96;         /*  8,2:1 sur --bg */
  --accent-hover: #06345d;
  --accent-doux: #e8f0f9;
  --on-accent: #ffffff;
  --focus: #9a3412;

  --st-ligne-bg: #dcf0e3;
  --st-ligne-tx: #10401f;
  --st-ligne-bd: #57946e;
  --st-cours-bg: #fbeed3;
  --st-cours-tx: #5d3708;
  --st-cours-bd: #ab7f33;
  --st-local-bg: #e4e9ef;
  --st-local-tx: #333f4c;
  --st-local-bd: #7c8896;

  --shadow: 0 1px 2px rgba(20, 24, 29, .06), 0 10px 30px rgba(20, 24, 29, .07);
  --shadow-fort: 0 2px 6px rgba(20, 24, 29, .08), 0 18px 46px rgba(20, 24, 29, .11);
  --voile: radial-gradient(70rem 34rem at 78% -14%, #e8f0f9 0%, rgba(232, 240, 249, 0) 62%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116;
    --surface: #171d25;
    --surface-strong: #222b36;
    --border: #3c4855;
    --border-strong: #7d8b99;
    --text: #e9eef3;         /* 15,6:1 sur --bg */
    --text-muted: #b0bcc8;   /*  9,7:1 sur --bg */
    --accent: #8dc2ff;       /* 10,2:1 sur --bg */
    --accent-hover: #b8daff;
    --accent-doux: #15243a;
    --on-accent: #0b1017;
    --focus: #ffd166;

    --st-ligne-bg: #102b1b;
    --st-ligne-tx: #8fe0ac;
    --st-ligne-bd: #3a8054;
    --st-cours-bg: #2f2410;
    --st-cours-tx: #f2c675;
    --st-cours-bd: #866921;
    --st-local-bg: #222b36;
    --st-local-tx: #b8c4d0;
    --st-local-bd: #5d6b79;

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .42);
    --shadow-fort: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 46px rgba(0, 0, 0, .5);
    --voile: radial-gradient(70rem 34rem at 78% -14%, #17243a 0%, rgba(23, 36, 58, 0) 62%);
  }
}

:root[data-theme="dark"] {
  --bg: #0e1116;
  --surface: #171d25;
  --surface-strong: #222b36;
  --border: #3c4855;
  --border-strong: #7d8b99;
  --text: #e9eef3;
  --text-muted: #b0bcc8;
  --accent: #8dc2ff;
  --accent-hover: #b8daff;
  --accent-doux: #15243a;
  --on-accent: #0b1017;
  --focus: #ffd166;

  --st-ligne-bg: #102b1b;
  --st-ligne-tx: #8fe0ac;
  --st-ligne-bd: #3a8054;
  --st-cours-bg: #2f2410;
  --st-cours-tx: #f2c675;
  --st-cours-bd: #866921;
  --st-local-bg: #222b36;
  --st-local-tx: #b8c4d0;
  --st-local-bd: #5d6b79;

  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .42);
  --shadow-fort: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 46px rgba(0, 0, 0, .5);
  --voile: radial-gradient(70rem 34rem at 78% -14%, #17243a 0%, rgba(23, 36, 58, 0) 62%);
}

/* --------------------------------------------------------------------------
   2. Bases
   Tailles en rem, aucune hauteur figee : la page reste lisible a 200 % et
   a 400 % de zoom, et supporte une taille de police systeme augmentee.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 112.5%;                 /* 18 px de base, plus confortable en lecture */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: .01em;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.45rem + 2.7vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.35vw, 2.15rem); }
h3 { font-size: clamp(1.18rem, 1.06rem + .55vw, 1.4rem); }

p, li, dd { max-width: 68ch; }
p { margin: 0 0 1.1em; }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .18em;
}

a:hover { color: var(--accent-hover); text-decoration-thickness: .17em; }

/* Un nom de domaine ne se coupe pas tout seul : sans cela, un lien comme
   prospection.foodmoov.com fait deborder la page sur un ecran de 320 px. */
a, .btn { overflow-wrap: anywhere; }

/* Indicateur de focus commun. L'anneau est trace en dehors de l'element,
   donc toujours sur le fond de page ou sur le fond de carte : contraste
   mesure a 6,6:1 au minimum dans les deux themes. Aucune regle de ce
   fichier ne supprime le focus. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

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

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* Masquage visuel accessible : le texte reste dans l'arbre d'accessibilite
   et reste donc lu par les lecteurs d'ecran. Ne jamais remplacer par
   display:none ni visibility:hidden. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: min(74rem, 100% - 2.5rem);
  margin-inline: auto;
}

/* Sur petit ecran, 2,5rem de marge laterale mangent une part importante de la
   largeur de lecture. On la reduit. */
@media (max-width: 40rem) {
  .wrap { width: calc(100% - 1.5rem); }
}

/* --------------------------------------------------------------------------
   3. Raccourcis d'acces
   Trois liens places avant tout le reste. Ils restent hors de l'ecran tant
   qu'ils n'ont pas le focus, mais ils sont toujours dans l'ordre de
   tabulation et toujours lus par un lecteur d'ecran.
   -------------------------------------------------------------------------- */
.skips ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.skips li { max-width: none; }

/* En position fixe et non absolue : l'entete est collante, un raccourci
   positionne dans le flux du document disparaitrait des que la page est
   defilee, alors qu'on peut tres bien revenir dessus par Maj+Tab en cours
   de lecture. */
.skips a {
  position: fixed;
  left: .75rem;
  top: -8rem;
  z-index: 100;
  padding: .8rem 1.2rem;
  background-color: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
}

.skips a:focus {
  top: 0;
  color: var(--on-accent);
}

/* --------------------------------------------------------------------------
   4. Entete et navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 2rem;
  padding-block: .8rem;
}

.brand {
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  padding: .25rem .1rem;
  line-height: 1.3;
}

.brand-nom { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.brand-role { font-size: .78rem; color: var(--text-muted); }

.brand:hover { color: var(--accent); }
.brand:hover .brand-nom { text-decoration: underline; }

.site-nav { margin-inline-start: auto; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li { max-width: none; }

.site-nav a {
  display: inline-block;
  padding: .6rem .2rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.site-nav a:hover { color: var(--accent); border-bottom-color: var(--border-strong); }

/* L'onglet courant ne change ni de graisse ni de taille : une variation de
   largeur dans une entete collante deplacerait tout le contenu de la page. */
.site-nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Panneau des reglages d'affichage
   Chaque reglage est un groupe de vrais boutons radio dans un fieldset :
   navigation aux fleches, annonce du groupe et etat coche geres nativement
   par le navigateur, sans aucun code ARIA a maintenir.
   Sans JavaScript le panneau reste deplie : il devient un bloc normal en bas
   de l'entete, toujours utilisable, simplement non memorise.
   -------------------------------------------------------------------------- */
.prefs { position: relative; }

.prefs-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .4rem 1rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.prefs-btn:hover { background-color: var(--surface-strong); border-color: var(--border-strong); }
.prefs-btn svg { flex: none; color: var(--accent); }

.prefs-panneau {
  margin-top: .7rem;
  padding: 1.2rem 1.3rem 1.3rem;
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-fort);
  display: grid;
  gap: 1rem;
}

:root[data-prefs="ferme"] .prefs-panneau { display: none; }

/* Une fois le JavaScript actif, le panneau devient un menu deroulant ancre
   au bouton. Sans JavaScript il reste dans le flux, sous l'entete. */
:root[data-js="oui"] .prefs-panneau {
  position: absolute;
  inset-inline-end: 0;
  top: 100%;
  z-index: 60;
  width: min(23rem, calc(100vw - 2rem));
}

.prefs-titre {
  margin: 0;
  font-weight: 700;
  font-size: .95rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

.reglage { border: 0; margin: 0; padding: 0; }

.reglage legend {
  padding: 0;
  margin-bottom: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.opts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.opt { position: relative; display: inline-flex; }

.opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;                       /* invisible mais toujours focusable */
  cursor: pointer;
}

.opt label {
  display: inline-block;
  min-height: 2.2rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.opt input:hover + label { color: var(--text); background-color: var(--surface-strong); }

.opt input:checked + label {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
}

.opt input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.prefs-reset {
  justify-self: start;
  padding: .45rem .9rem;
  font: inherit;
  font-size: .85rem;
  color: var(--accent);
  background-color: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}

.prefs-reset:hover { background-color: var(--surface); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   5 bis. Sommaire de page
   -------------------------------------------------------------------------- */
.sommaire {
  margin-top: 2rem;
  padding: 1rem 1.3rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--accent);
  border-radius: 0 10px 10px 0;
  max-width: 34rem;
}

.sommaire-titre {
  margin: 0 0 .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sommaire ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.6rem;
}

.sommaire li { max-width: none; }
.sommaire a { font-weight: 650; }

/* --------------------------------------------------------------------------
   6. Sections et titres d'introduction
   -------------------------------------------------------------------------- */
main { display: block; }

.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* Bandeau court, par exemple la legende des statuts : il ne doit pas
   ouvrir un vide aussi grand qu'une vraie section de contenu. */
.section-mince { padding-block: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }

.section-alt {
  background-color: var(--surface);
  border-block: 1px solid var(--border);
}

.section-intro {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 0;
}

/* Surtitre. Le texte reste en minuscules dans le HTML : la mise en capitales
   est purement visuelle, sinon certains lecteurs d'ecran epellent lettre
   par lettre. */
.eyebrow {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .18rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--accent-doux);
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lead {
  font-size: 1.14rem;
  color: var(--text-muted);
  max-width: 62ch;
}

.page-hero {
  background-image: var(--voile);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
}

.page-hero h1 { margin-bottom: .45em; }

/* --------------------------------------------------------------------------
   7. Boutons et liens de suite
   -------------------------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  margin-top: 1.9rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  min-height: 2.9rem;
  padding: .65rem 1.4rem;
  border-radius: 9px;
  font-weight: 650;
  text-decoration: none;
  border: 2px solid var(--accent);
}

.btn svg { flex: none; }

.btn-primary { background-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

.btn-secondary { background-color: transparent; color: var(--accent); }
.btn-secondary:hover {
  background-color: var(--accent-doux);
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.suite { margin: 2.5rem 0 0; }

.lien-suite {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 650;
}

.lien-suite svg { flex: none; }

/* --------------------------------------------------------------------------
   8. Accueil
   -------------------------------------------------------------------------- */
.hero-zone {
  background-image: var(--voile);
  border-bottom: 1px solid var(--border);
}

.hero {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: clamp(2.8rem, 1.8rem + 5vw, 5.5rem);
}

@media (min-width: 58rem) {
  .hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.hero-texte h1 { margin-bottom: .5em; }

.hero-portrait {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  box-shadow: var(--shadow-fort);
}

.mini-faits {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
  max-width: 22rem;
}

.mini-faits li {
  max-width: none;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .55rem .9rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.mini-faits b { font-size: 1.35rem; line-height: 1.2; min-width: 2.2rem; }
.mini-faits span { color: var(--text-muted); font-size: .92rem; }

/* --------------------------------------------------------------------------
   9. Pastilles de statut
   Le point colore est un SVG decoratif : l'information est portee par le
   libelle en clair, jamais par la couleur seule.
   -------------------------------------------------------------------------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .7rem .25rem;
  border-radius: 999px;
  border: 1px solid;
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
}

.pastille svg { flex: none; }

.pastille-en-ligne {
  background-color: var(--st-ligne-bg);
  color: var(--st-ligne-tx);
  border-color: var(--st-ligne-bd);
}

.pastille-en-cours {
  background-color: var(--st-cours-bg);
  color: var(--st-cours-tx);
  border-color: var(--st-cours-bd);
}

.pastille-local {
  background-color: var(--st-local-bg);
  color: var(--st-local-tx);
  border-color: var(--st-local-bd);
}

.legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
}

.legende li {
  max-width: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
}

.legende-aide { color: var(--text-muted); font-size: .92rem; }

/* --------------------------------------------------------------------------
   10. Cartes
   -------------------------------------------------------------------------- */
.grille-cartes {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.grille-cartes > li { max-width: none; }

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem 1.7rem 1.7rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.card h3 { margin-bottom: .3rem; }

.card-titre { color: var(--text); text-decoration: none; }
.card-titre:hover { color: var(--accent); text-decoration: underline; }

.card-meta {
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 650;
  margin-bottom: .8rem;
}

.card p { max-width: none; }
.card-compact p:not(.card-meta) { margin-bottom: 1.2rem; }
.card-compact .pastille { margin-top: auto; }

.grille-atouts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.grille-atouts-large { grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr)); }

.grille-atouts > li {
  max-width: none;
  padding: 1.6rem 1.7rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.grille-atouts h3 { display: flex; align-items: baseline; gap: .65rem; }
.grille-atouts h3 svg { flex: none; color: var(--accent); align-self: center; }
.grille-atouts p { max-width: none; }
.grille-atouts p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Liste des projets
   -------------------------------------------------------------------------- */
.liste-projets {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.liste-projets > li { max-width: none; }

.ligne {
  padding: 1.4rem 1.6rem 1.5rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--border-strong);
  border-radius: 0 12px 12px 0;
}

.ligne:hover { box-shadow: var(--shadow); }

.liste-projets li:has(.pastille-en-ligne) .ligne { border-inline-start-color: var(--st-ligne-bd); }
.liste-projets li:has(.pastille-en-cours) .ligne { border-inline-start-color: var(--st-cours-bd); }
.liste-projets li:has(.pastille-local) .ligne { border-inline-start-color: var(--st-local-bd); }

.ligne-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-bottom: .2rem;
}

.ligne-tete h3 { margin: 0; }

.ligne-meta {
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 650;
  margin-bottom: .6rem;
}

.ligne-meta .sep { opacity: .55; padding-inline: .2rem; }

.ligne-resume { margin-bottom: .6rem; }

.ligne-site { font-size: .95rem; }

/* Le titre est le seul lien vers la fiche : la fleche est dedans, elle fait
   partie de la zone cliquable au lieu d'ajouter un second lien. */
.ligne-titre {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  text-decoration: none;
}

.ligne-titre svg { flex: none; color: var(--accent); }

.ligne-titre:hover { color: var(--accent); text-decoration: underline; }

.ligne-site { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Fiche projet
   -------------------------------------------------------------------------- */
.fil { margin-bottom: 1.4rem; }

.fil ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin: 0;
  padding: 0;
  font-size: .9rem;
}

.fil li { max-width: none; color: var(--text-muted); }

.fiche-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 2rem 0 0;
}

.fiche-meta > div { min-width: 9rem; }

.fiche-meta dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .3rem;
}

.fiche-meta dd { margin: 0; font-weight: 600; }

.note-acces {
  margin: 0;
  padding: .9rem 1.2rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-muted);
}

.texte-projet h2 { margin-top: 2.6rem; }
.texte-projet > h2:first-child { margin-top: 0; }

.points { margin: 0 0 1.4rem; padding-inline-start: 1.4rem; }
.points li { margin-bottom: .45rem; }

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

.tags li {
  max-width: none;
  font-size: .85rem;
  padding: .25rem .8rem;
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
}

.tags-large li { font-size: .92rem; padding: .35rem .95rem; }

/* En flex plutot qu'en grille : sur la premiere et la derniere fiche il n'y a
   qu'un seul lien, et une colonne de grille l'etirerait sur toute la largeur. */
.nav-projets {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.nav-projets li { flex: 0 1 min(26rem, 100%); max-width: 26rem; }
.nav-projets li.nav-suiv { margin-inline-start: auto; }

.nav-projets a {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: 100%;
  padding: 1rem 1.3rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
}

.nav-projets a:hover { border-color: var(--accent); color: var(--accent); }
.nav-projets a svg { flex: none; color: var(--accent); }
.nav-suiv a { justify-content: flex-end; text-align: end; }

.nav-label {
  display: block;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-nom { display: block; font-weight: 650; }

/* Telechargement des applications mobiles.
   Un magasin non encore disponible affiche une pastille « En cours » au lieu
   d'un lien : rien ne renvoie vers une fiche qui n'existe pas. */
.apps {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}

.apps > li {
  max-width: none;
  padding: 1.3rem 1.5rem 1.4rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.apps h3 { margin-bottom: .3rem; }

.app-note { color: var(--text-muted); font-size: .95rem; margin-bottom: 1rem; max-width: none; }

.stores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.stores li { max-width: none; }

.store-lien,
.store-indispo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.8rem;
  padding: .5rem 1.1rem;
  border-radius: 9px;
  border: 2px solid var(--accent);
  font-weight: 650;
  font-size: .95rem;
}

.store-lien {
  background-color: var(--bg);
  color: var(--accent);
  text-decoration: none;
}

.store-lien:hover {
  background-color: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.store-lien svg, .store-indispo svg { flex: none; }

.store-indispo {
  background-color: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.store-indispo .pastille { margin-inline-start: .2rem; }

/* --------------------------------------------------------------------------
   13. Parcours et etapes
   -------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.2rem; }

.timeline li {
  max-width: none;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background-color: var(--bg);
}

.timeline h3 { margin-bottom: .25rem; }
.timeline p { margin-bottom: 0; }

.period {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

.etapes {
  margin: 2.2rem 0 0;
  padding-inline-start: 1.6rem;
  display: grid;
  gap: 1.2rem;
}

.etapes li { max-width: none; padding-inline-start: .4rem; }
.etapes li::marker { color: var(--accent); font-weight: 700; }
.etapes h3 { margin-bottom: .25rem; }
.etapes p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Tableau des competences
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin-top: 2rem; }

.skills-table {
  width: 100%;
  border-collapse: collapse;
}

.skills-table caption {
  text-align: start;
  color: var(--text-muted);
  padding-bottom: .9rem;
}

.skills-table th,
.skills-table td {
  text-align: start;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  vertical-align: top;
}

.skills-table thead th { background-color: var(--surface-strong); }
.skills-table tbody th { background-color: var(--bg); width: 15rem; }
.skills-table tbody td { background-color: var(--bg); }

/* --------------------------------------------------------------------------
   15. Fiches d'information
   -------------------------------------------------------------------------- */
.fiches {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.fiches li {
  max-width: none;
  padding: 1.2rem 1.4rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.fiches strong {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .25rem;
}

.fiches-cartes li { border-top: 4px solid var(--accent); }

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background-color: var(--surface);
  padding-block: 2.8rem;
  color: var(--text-muted);
  font-size: .95rem;
}

.footer-inner {
  display: grid;
  gap: 1.6rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.footer-nom { color: var(--text); font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
}

.footer-nav li { max-width: none; }

.footer-a11y { grid-column: 1 / -1; margin: 0; max-width: 70ch; }

/* --------------------------------------------------------------------------
   17. Reglages d'affichage : taille, espacement, contraste
   Ces trois reglages sont pilotes depuis le panneau « Affichage ». Ils
   s'appliquent en cascade sur les jetons deja definis plus haut, donc aucun
   composant n'a besoin d'etre reecrit.
   -------------------------------------------------------------------------- */

/* Taille du texte. Tout le site etant dimensionne en rem, changer la taille
   de base suffit : les espacements, les cartes et les grilles suivent. */
:root[data-taille="grande"] { font-size: 128%; }
:root[data-taille="max"]    { font-size: 145%; }

/* Espacement. Reprend les valeurs du critere « espacement du texte » du
   referentiel : interligne, espacement des lettres et des mots. */
:root[data-espacement="aere"] body {
  line-height: 2;
  letter-spacing: .06em;
  word-spacing: .12em;
}

:root[data-espacement="aere"] p { margin-bottom: 1.7em; }
:root[data-espacement="aere"] li { margin-bottom: .7em; }
:root[data-espacement="aere"] h1,
:root[data-espacement="aere"] h2,
:root[data-espacement="aere"] h3 { line-height: 1.4; letter-spacing: 0; }

/* Contraste renforce. Le texte passe au noir pur sur blanc pur, ou l'inverse,
   les gris de second plan disparaissent et les bordures se durcissent. */
:root[data-contraste="fort"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ededed;
  --border: #595959;
  --border-strong: #1a1a1a;
  --text: #000000;
  --text-muted: #000000;
  --accent: #00368f;
  --accent-hover: #001f52;
  --accent-doux: #ffffff;
  --on-accent: #ffffff;
  --focus: #7a2000;
  --st-ligne-bg: #ffffff;
  --st-ligne-tx: #003d18;
  --st-ligne-bd: #003d18;
  --st-cours-bg: #ffffff;
  --st-cours-tx: #4a2b00;
  --st-cours-bd: #4a2b00;
  --st-local-bg: #ffffff;
  --st-local-tx: #000000;
  --st-local-bd: #000000;
  --shadow: none;
  --shadow-fort: 0 0 0 1px #1a1a1a;
  --voile: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-contraste="fort"] {
    --bg: #000000;
    --surface: #000000;
    --surface-strong: #1c1c1c;
    --border: #a6a6a6;
    --border-strong: #ffffff;
    --text: #ffffff;
    --text-muted: #ffffff;
    --accent: #9fcbff;
    --accent-hover: #d6e9ff;
    --accent-doux: #000000;
    --on-accent: #000000;
    --focus: #ffd166;
    --st-ligne-bg: #000000;
    --st-ligne-tx: #8ff0b3;
    --st-ligne-bd: #8ff0b3;
    --st-cours-bg: #000000;
    --st-cours-tx: #ffd28a;
    --st-cours-bd: #ffd28a;
    --st-local-bg: #000000;
    --st-local-tx: #ffffff;
    --st-local-bd: #ffffff;
    --shadow: none;
    --shadow-fort: 0 0 0 1px #ffffff;
    --voile: none;
  }
}

:root[data-theme="dark"][data-contraste="fort"] {
  --bg: #000000;
  --surface: #000000;
  --surface-strong: #1c1c1c;
  --border: #a6a6a6;
  --border-strong: #ffffff;
  --text: #ffffff;
  --text-muted: #ffffff;
  --accent: #9fcbff;
  --accent-hover: #d6e9ff;
  --accent-doux: #000000;
  --on-accent: #000000;
  --focus: #ffd166;
  --st-ligne-bg: #000000;
  --st-ligne-tx: #8ff0b3;
  --st-ligne-bd: #8ff0b3;
  --st-cours-bg: #000000;
  --st-cours-tx: #ffd28a;
  --st-cours-bd: #ffd28a;
  --st-local-bg: #000000;
  --st-local-tx: #ffffff;
  --st-local-bd: #ffffff;
  --shadow: none;
  --shadow-fort: 0 0 0 1px #ffffff;
  --voile: none;
}

/* --------------------------------------------------------------------------
   18. Animations
   Elles ne touchent que l'opacite, la transformation, la couleur et l'ombre.
   Jamais une propriete qui deplace le contenu : une variation de mise en page
   pilotee par l'observateur de defilement provoquerait une boucle.
   Deux verrous : le reglage « Animations » du panneau, et la preference
   systeme de mouvement reduit.
   -------------------------------------------------------------------------- */

/* L'etat de depart n'est pose que lorsque le JavaScript tourne et que les
   animations sont actives : sans cela, rien n'est jamais masque. */
:root[data-js="oui"][data-anim="on"] [data-reveal="attente"] {
  opacity: 0;
  transform: translateY(18px);
}

:root[data-js="oui"][data-anim="on"] [data-reveal="vu"] {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease-out, transform .55s cubic-bezier(.22, .68, .3, 1);
}

:root[data-anim="on"] { scroll-behavior: smooth; }

:root[data-anim="on"] .card,
:root[data-anim="on"] .ligne,
:root[data-anim="on"] .grille-atouts > li,
:root[data-anim="on"] .nav-projets a,
:root[data-anim="on"] .apps > li {
  transition: transform .25s ease-out, box-shadow .25s ease-out, border-color .2s ease-out;
}

:root[data-anim="on"] .card:hover,
:root[data-anim="on"] .ligne:hover,
:root[data-anim="on"] .apps > li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-fort);
}

:root[data-anim="on"] .nav-projets a:hover { transform: translateY(-3px); }

:root[data-anim="on"] .btn,
:root[data-anim="on"] .store-lien,
:root[data-anim="on"] .prefs-btn,
:root[data-anim="on"] .opt label,
:root[data-anim="on"] .site-nav a {
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}

/* Le reglage « Reduites » coupe tout, y compris ce que le navigateur
   pourrait animer par defaut. */
:root[data-anim="off"] *,
:root[data-anim="off"] *::before,
:root[data-anim="off"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   19. Preferences systeme et impression
   -------------------------------------------------------------------------- */
/* Applique seulement tant qu'aucun choix manuel n'a ete fait : le panneau
   pose data-contraste des qu'il y a un choix, et gagne alors la main. */
@media (prefers-contrast: more) {
  :root:not([data-contraste]) {
    --text-muted: var(--text);
    --border: var(--border-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-anim="on"]) *,
  :root:not([data-anim="on"]) *::before,
  :root:not([data-anim="on"]) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .skips, .prefs, .sommaire, .site-nav, .nav-projets, .footer-nav { display: none; }
  .site-header { position: static; }
  body { background: #fff; color: #000; }
  .page-hero, .hero-zone, .section-alt { background-image: none; background-color: #fff; }
  .card, .ligne, .timeline li, .fiches li, .grille-atouts > li { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   20. Entete sur petit ecran
   Ce bloc est volontairement place a la fin du fichier : une requete de media
   n'ajoute aucune specificite, c'est donc l'ordre de declaration qui tranche.
   Place plus haut, il etait annule par les regles de bureau qui suivaient.
   En dessous de 56rem, les cinq onglets ne tiennent plus sur une ligne : ils
   passaient a la ligne et l'entete, qui est collante, occupait un tiers de la
   hauteur de l'ecran en permanence. La navigation passe donc derriere un
   bouton « Menu ».
   Le repli est pilote par un attribut data-menu pose par le JavaScript, et
   non par l'attribut hidden : hidden masquerait aussi la navigation sur grand
   ecran au redimensionnement. Sans JavaScript, aucun attribut n'est pose et
   la navigation reste visible, donc utilisable.
   -------------------------------------------------------------------------- */
.menu-btn { display: none; }

@media (max-width: 55.99rem) {
  .header-inner {
    flex-wrap: nowrap;
    gap: .45rem;
    padding-block: .6rem;
  }

  .brand-nom { font-size: .96rem; }

  /* Le sous-titre reste lu par les lecteurs d'ecran, il n'est que masque a
     l'oeil : le nom accessible du lien reste identique sur tous les ecrans. */
  .brand-role {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-inline-start: auto;
    min-height: 2.5rem;
    font: inherit;
    font-weight: 650;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    flex: none;
  }

  .menu-btn:hover { background-color: var(--surface-strong); border-color: var(--border-strong); }
  .menu-btn svg { flex: none; color: var(--accent); }

  /* Les deux commandes gardent leur libelle en clair : une icone seule est
     illisible pour quelqu'un qui voit mal, et c'est precisement le public
     de ce site. On gagne la place sur les marges et la graisse, pas sur le
     texte. */
  .menu-btn,
  .prefs-btn {
    padding: .38rem .72rem;
    font-size: .82rem;
    flex: none;
  }

  /* Les deux panneaux se deploient sur toute la largeur, sous l'entete.
     L'entete est en position collante, donc positionnee : elle sert de
     reference aux panneaux en position absolue. */
  .site-nav, .prefs { position: static; }

  :root[data-menu="ferme"] .site-nav { display: none; }

  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 60;
    margin: 0;
    background-color: var(--bg);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: var(--shadow-fort);
  }

  .site-nav ul { display: block; padding: .4rem 0; }

  .site-nav li + li { border-top: 1px solid var(--border); }

  .site-nav a {
    display: block;
    padding: .95rem 1.25rem;
    border-bottom: 0;
    border-inline-start: 4px solid transparent;
  }

  .site-nav a:hover { background-color: var(--surface); border-bottom: 0; }

  .site-nav a[aria-current="page"] {
    border-bottom: 0;
    border-inline-start-color: var(--accent);
    background-color: var(--accent-doux);
  }

  :root[data-js="oui"] .prefs-panneau {
    inset-inline: 0;
    top: 100%;
    width: auto;
    border-radius: 0;
    border-inline: 0;
  }
}

/* Ecrans tres etroits : plutot que de supprimer un libelle, l'entete passe
   sur deux lignes. Elle reste bien plus courte que la version d'origine. */
@media (max-width: 23rem) {
  .header-inner { flex-wrap: wrap; }
  .brand { flex: 1 0 100%; }
  .menu-btn { margin-inline-start: 0; }
}