/* ========================================
   VARIABLES & RESET
======================================== */
/* Un seul theme, sombre : fond bleu ardoise (les tons "Mocha"
   de Catppuccin), texte gris-bleu clair. */
:root {
  color-scheme: dark;
  --bg: #1e1e2e;
  /* Fond des cadres, un cran sous la page : chaque cadre est un
     panneau en creux, comme une fenetre de terminal posee sur le bureau */
  --bg-alt: #181825;
  --light-gray: #313244;
  --border: #45475a;
  --gray: #9399b2;
  --mid-gray: #a6adc8;
  --dark-gray: #bac2de;
  --text: #cdd6f4;
  --black: #e6eafc;
  --nav-bg: rgba(30,30,46,0.88);
  /* Coins des cadres et des champs */
  --radius: 10px;
  --radius-sm: 6px;
  /* Une seule couleur, un mauve de la meme famille que le fond :
     elle marque uniquement ce qui est selectionne ou actif (lien
     de la page courante, crochets survoles, etape en cours, focus,
     selection). ~8.6:1 sur le fond. */
  --accent: #cba6f7;
  /* Meme mauve pour les traits (cadre du stage, focus des champs) */
  --accent-line: #cba6f7;
  /* Messages d'erreur (formulaire de contact) */
  --erreur: #f38ba8;
  /* Titres dans les cadres (cartes, competences, frise, stage) :
     un cran net au-dessus du texte courant (15 px), pour que la
     hierarchie ne repose pas que sur la couleur */
  --titre-cadre: 18px;
  /* Ombre portee des titres en blocs (TITRES FIGLET) */
  --ombre-titre: #585b70;
  /* Couleurs des grands titres de projet (projet.html), prises dans
     la meme palette que le fond. Pas d'orange. */
  --mot-rose: #f5c2e7;
  --mot-framboise: #eba0ac;
  --mot-lavande: #b4befe;
  --mot-bleu: #89b4fa;
  --mot-saphir: #74c7ec;
  /* Un seul alphabet, celui du terminal : pas de police "app" pour
     porter l'identite technique, tout le site parle en monospace. */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --max-w: 820px;
  --nav-h: 56px;
}

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

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Selection inversee, comme la surbrillance d'un terminal */
::selection {
  background: var(--accent);
  color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
  }
}

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; }

/* Sans cela, un display: flex ou grid ecrase l'attribut hidden */
[hidden] { display: none !important; }

/* ========================================
   NAVBAR
======================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-inner {
  max-width: var(--max-w);
  width: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
}

.nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.nav-avatar:hover {
  border-color: var(--dark-gray);
}

.nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-links {
  display: flex;
  gap: 2px;
  margin-left: auto;
  align-items: center;
}

.nav-link {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray);
  transition: color 0.2s, background-color 0.2s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text);
  background-color: var(--light-gray);
}

.nav-link.active {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.nav-github {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  margin-left: 6px;
  transition: color 0.2s, background-color 0.2s;
  flex-shrink: 0;
}

.nav-github:hover {
  color: var(--black);
  background-color: var(--light-gray);
}

.nav-github svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.nav-burger {
  display: none;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--mid-gray);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8px;
  transition: color 0.2s, background-color 0.2s;
}

.nav-burger:hover {
  color: var(--black);
  background-color: var(--light-gray);
}

.nav-burger svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* ========================================
   LAYOUT
======================================== */
.page {
  flex: 1;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 48px) 28px 60px;
}

/* ========================================
   PAGE HEADER
======================================== */
.page-header {
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 30px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
}

/* ========================================
   TITRES FIGLET
   Le titre de chaque page est un dessin figlet en
   police ANSI Shadow, colle tel quel : des blocs
   pleins pour la face des lettres, des traits doubles
   pour leur ombre portee. script.js le dedouble en
   deux calques superposes, l'ombre dessous et la face
   dessus. Le vrai texte reste dans le h1 pour les
   lecteurs d'ecran et le referencement ; le dessin
   est masque pour eux.
   Les blocs et les traits viennent de la police Blocs
   (fonts/blocs.woff2, 9 caracteres, ~0.5 Ko) : Google
   Fonts ne fournit pas ces caracteres de JetBrains
   Mono, et chaque telephone les prenait dans une autre
   police, un peu plus large ou plus haute : le dessin
   partait en biais. Blocs dessine chaque caractere
   pour une case de 0.6em (la chasse de JetBrains Mono,
   qui garde les espaces) sur 0.95em (l'interligne).
   Meme corps (12 px) sur toutes les pages : toutes
   les lettres ont la meme hauteur, et le nom remplit
   juste la colonne de l'accueil.
   --cols (largeur du dessin en caracteres) sert a
   reduire la taille sur mobile pour qu'il tienne
   toujours sur une ligne.
======================================== */
@font-face {
  font-family: 'Blocs';
  src: url('fonts/blocs.woff2') format('woff2');
  font-weight: 400;
  /* Titre invisible un court instant plutot que dessine de travers */
  font-display: block;
  unicode-range: U+2550-2551, U+2554, U+2557, U+255A, U+255D, U+2580, U+2584, U+2588;
}

.figlet {
  display: block;
  position: relative;
  white-space: pre;
  font-family: 'Blocs', var(--mono);
  font-size: min(12px, calc((100vw - 64px) / (var(--cols) * 0.6)));
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--black);
  /* Les ligatures de JetBrains Mono (->, |_, __...) casseraient le dessin */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

/* L'ombre des lettres : un gris de la palette, assez sourd pour
   que la face reste seule a se lire. Elle donne sa taille au titre ;
   la face se pose exactement dessus. */
.figlet-ombre {
  color: var(--ombre-titre);
}

.figlet-face {
  position: absolute;
  inset: 0;
}

/* Sur telephone, le nom sur une ligne tomberait a ~6px : on passe
   a la version sur deux lignes (Furkan / Ugurlu), deux fois moins large. */
.figlet-narrow { display: none; }

@media (max-width: 560px) {
  .figlet-wide { display: none; }
  .figlet-narrow { display: block; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-header p {
  font-size: 15px;
  color: var(--mid-gray);
  margin-top: 16px;
  max-width: 520px;
  line-height: 1.65;
}

/* ========================================
   BOX — le composant unique de contenu encadre.
   Un cadre carre avec un intitule decoupe dans le
   trait du haut, comme les boites d'un ecran de
   configuration en mode texte (dialog, whiptail,
   l'ecran de setup d'un BIOS). Toutes les sections
   du site (profil, projets, competences, frise,
   contact) partagent ce meme cadre plutot que
   chacune sa propre carte.
======================================== */
.box {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 30px 24px 24px;
  transition: border-color 0.2s;
}

/* Intitule pose a cheval sur le trait du haut : centre verticalement
   sur la bordure quelle que soit la taille du texte. Son fond est
   coupe en deux, couleur de la page au-dessus du trait, du cadre
   en dessous : il a l'air decoupe dans la bordure. */
.box-title {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  background: linear-gradient(var(--bg) 50%, var(--bg-alt) 50%);
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  white-space: nowrap;
}

/* ========================================
   HOME PAGE (index.html)
   Une seule colonne etroite qui se lit comme un
   README : qui, quoi, ou cliquer. Le detail vit
   sur les autres pages.
======================================== */
.home-page {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.home-title {
  margin-bottom: 28px;
}

.dash-name-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dash-role {
  font-size: var(--titre-cadre);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.home-lede {
  font-size: 15px;
  color: var(--mid-gray);
  margin-top: 2px;
}

.dash-actions {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.home-hero {
  display: flex;
  flex-direction: column;
}

/* ========================================
   STAGE — le seul cadre en couleur du site :
   c'est l'information qu'un recruteur doit voir
   en premier. Cadre mauve, intitule inverse comme
   un element selectionne dans une interface texte,
   et un voyant mauve fixe devant le titre.
======================================== */
.box-stage {
  border: 2px solid var(--accent-line);
}

.box-stage .box-title {
  background: var(--accent);
  color: var(--bg);
}

.stage-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--titre-cadre);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 14px;
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  background: var(--accent);
}

.stage-cta {
  margin-top: 14px;
}

/* Liste de projets facon `ls` : un titre par ligne,
   la techno principale en marge, des tirets entre les lignes. */
.home-list {
  margin: -6px 0 10px;
}

.home-list li + li {
  border-top: 1px dashed var(--border);
}

.home-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  font-size: 15px;
  color: var(--text);
  transition: color 0.2s;
}

.home-list a:hover {
  color: var(--black);
}

/* Le titre du projet reprend les crochets des boutons :
   meme taille, memes crochets qui s'ecartent en mauve au survol.
   En ligne (pas en flex) : sur mobile un titre long passe a la ligne
   et le crochet fermant suit le dernier mot au lieu de rester a droite. */
.home-list a > span:first-child {
  font-size: 14px;
  font-weight: 500;
  color: var(--mid-gray);
  transition: color 0.18s;
}

.home-list a > span:first-child::before { content: '['; margin-right: 6px; }
.home-list a > span:first-child::after { content: ']'; margin-left: 6px; }

.home-list a > span:first-child::before,
.home-list a > span:first-child::after {
  display: inline-block;
  color: var(--gray);
  transition: color 0.18s, transform 0.18s;
}

.home-list a:hover > span:first-child {
  color: var(--black);
}

.home-list a:hover > span:first-child::before {
  color: var(--accent);
  transform: translateX(-3px);
}

.home-list a:hover > span:first-child::after {
  color: var(--accent);
  transform: translateX(3px);
}

.home-list-meta {
  font-size: 13px;
  color: var(--gray);
  flex-shrink: 0;
}

/* ========================================
   KEY:VALUE ROWS — profil, disponibilite,
   competences et contact partagent la meme
   grille a deux colonnes, comme les champs
   d'un fichier de config ou un neofetch.
======================================== */
.kv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kv-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: baseline;
  font-size: 15px;
}

.kv-row dt {
  font-weight: 600;
  color: var(--gray);
}

.kv-row dd {
  color: var(--text);
  line-height: 1.6;
}

/* Liens dans le texte (contact, projets d'une competence, codes C1-C6
   d'une page projet) : soulignes discretement, comme partout */
.kv-row dd a,
.detail-bloc a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.kv-row dd a:hover,
.detail-bloc a:hover {
  color: var(--black);
  text-decoration-color: currentColor;
}

/* Titres : evite les lignes orphelines disgracieuses */
h1, h2, h3 {
  text-wrap: balance;
}

/* Paragraphes : evite qu'un mot seul finisse la derniere ligne */
p, dd, li {
  text-wrap: pretty;
}

/* Longueur de ligne confortable en monospace */
.contact-text,
.comp-card > p,
.page-header p {
  max-width: 36em;
}

.detail-bloc p,
.detail-bloc li {
  max-width: 42em;
}

/* ========================================
   BUTTONS & LIENS — crochets façon shell
======================================== */
/* Boutons facon shell : ce sont les crochets qui signalent l'action,
   pas une boite. Les crochets sont poses en ::before / ::after,
   donc le HTML reste propre et rien n'est a dupliquer. */
.btn,
.btn-submit,
.back-link,
.home-head-link,
.projet-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 2px;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--mid-gray);
  white-space: nowrap;
  transition: color 0.18s;
}

.btn::before,
.btn-submit::before,
.back-link::before,
.home-head-link::before,
.projet-card-link::before {
  content: '[';
}

.btn::after,
.btn-submit::after,
.back-link::after,
.home-head-link::after,
.projet-card-link::after {
  content: ']';
}

.btn::before, .btn::after,
.btn-submit::before, .btn-submit::after,
.back-link::before, .back-link::after,
.home-head-link::before, .home-head-link::after,
.projet-card-link::before, .projet-card-link::after {
  color: var(--gray);
  transition: color 0.18s, transform 0.18s;
}

/* Survol : les crochets s'ecartent, comme un element selectionne
   dans une interface texte. Rien ne se remplit, rien ne saute. */
.btn:hover,
.btn-submit:hover,
.back-link:hover,
.home-head-link:hover,
.projet-card-link:hover {
  color: var(--black);
}

.btn:hover::before,
.btn-submit:hover::before,
.back-link:hover::before,
.home-head-link:hover::before,
.projet-card-link:hover::before {
  color: var(--accent);
  transform: translateX(-3px);
}

.btn:hover::after,
.btn-submit:hover::after,
.back-link:hover::after,
.home-head-link:hover::after,
.projet-card-link:hover::after {
  color: var(--accent);
  transform: translateX(3px);
}

/* L'action principale est deja a pleine intensite au repos */
.btn-primary,
.btn-submit {
  color: var(--black);
  font-weight: 600;
}

.btn-primary::before, .btn-primary::after,
.btn-submit::before, .btn-submit::after {
  color: var(--black);
}

.btn-secondary {
  color: var(--mid-gray);
}

/* Toute la carte d'un projet est cliquable : [Voir le detail] reste
   discret au repos (sept liens blancs et gras faisaient concurrence
   aux titres) et ses crochets s'ecartent des qu'on survole la carte,
   pas seulement le lien. */
.projet-card-link {
  margin-top: auto;
  padding-top: 4px;
}

.projet-card:hover .projet-card-link,
.projet-card:focus-within .projet-card-link {
  color: var(--black);
}

.projet-card:hover .projet-card-link::before,
.projet-card:focus-within .projet-card-link::before {
  color: var(--accent);
  transform: translateX(-3px);
}

.projet-card:hover .projet-card-link::after,
.projet-card:focus-within .projet-card-link::after {
  color: var(--accent);
  transform: translateX(3px);
}

/* Le seul lien long (guide PDF du serveur web) : il passe a la ligne
   sur telephone au lieu de deborder de l'ecran. En ligne (pas en
   flex), comme les titres de l'accueil : les crochets suivent le
   premier et le dernier mot au lieu de flotter aux bords. */
.projet-doc {
  display: inline-block;
  white-space: normal;
  text-wrap: balance;
}

.projet-doc::before,
.projet-doc::after {
  display: inline-block;
}

.projet-doc::before { margin-right: 6px; }
.projet-doc::after { margin-left: 6px; }

/* [copier] a cote de l'email : meme crochets, en plus discret */
.copy-btn {
  margin-left: 14px;
  padding: 0 2px;
  font-size: 13px;
  vertical-align: baseline;
}

/* ========================================
   TAGS & BADGES — memes crochets que les liens,
   sans fond ni bordure : une liste de valeurs,
   pas une pastille colorée.
======================================== */
.tags,
.ac-list,
.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.tag,
.ac-tag,
.detail-badge {
  font-size: 13px;
  color: var(--mid-gray);
}

.tag::before, .ac-tag::before, .detail-badge::before,
.tag::after, .ac-tag::after, .detail-badge::after {
  color: var(--gray);
}

.tag::before, .ac-tag::before, .detail-badge::before { content: '['; }
.tag::after, .ac-tag::after, .detail-badge::after { content: ']'; }

/* ========================================
   PROJECT CARDS (index.html + projets.html)
======================================== */
/* Une seule colonne, comme la liste de l'accueil : chaque carte
   prend la hauteur de son contenu, sans trou pour s'aligner
   sur sa voisine. */
.projets-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.projet-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}

/* Au clavier, arriver sur [Voir le detail] eclaire la carte comme
   le survol de la souris */
.projet-card:hover,
.projet-card:focus-within {
  border-color: var(--dark-gray);
}

.projet-card h2,
.projet-card h3 {
  font-size: var(--titre-cadre);
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
}

.projet-card-desc {
  max-width: 42em;
  font-size: 15px;
  color: var(--mid-gray);
  line-height: 1.65;
}

/* ========================================
   PROJECT DETAIL (projet.html)
======================================== */
.back-link {
  margin-bottom: 28px;
}


.projet-detail-header {
  margin-bottom: 36px;
  /* Tout l'en-tete suit le grand titre, centre */
  text-align: center;
}

.projet-detail-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.25;
  transition: color 0.35s;
}

/* Titre d'un projet compose mot par mot (script.js, composerTitre) :
   capitales tres grasses, chaque mot a sa taille et sa couleur, les
   petits mots en gris, un mot en serif italique fin. Les tailles sont
   tirees du nom du projet : un projet garde toujours le meme titre.
   --lettres plafonne la taille pour qu'un mot long tienne toujours
   sur une ligne (une chasse JetBrains Mono vaut 0.6em). */
.titre-mots {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-bottom: 24px;
}

.mot {
  /* Le vol des mots (script.js, envolerMots) part du coin haut-gauche */
  transform-origin: 0 0;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 800;
  font-size: min(var(--taille), calc(100cqw / (var(--lettres) * 0.6)));
  color: var(--couleur);
  font-variant-ligatures: none;
}

.mot-serif {
  font-family: ui-serif, 'New York', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: min(var(--taille), calc(100cqw / (var(--lettres) * 0.75)));
}

.projet-detail-header .subtitle {
  font-size: 13px;
  color: var(--gray);
  margin-top: 4px;
}

.projet-detail-header .detail-badges {
  margin-top: 14px;
  justify-content: center;
}

/* Document rendu (guide, rapport), sous les technos */
.projet-doc {
  margin-top: 10px;
}

/* Une seule colonne : on lit un projet de haut en bas,
   sans trous entre des blocs de hauteurs differentes. */
/* Precedent / suivant en bas d'un projet */
.projet-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

.projet-nav-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  color: var(--text);
  transition: color 0.2s;
}

.projet-nav-next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.projet-nav-label {
  font-size: 13px;
  color: var(--gray);
}

.projet-nav-link:hover {
  color: var(--black);
}

.projet-nav-link:hover .projet-nav-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.detail-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.detail-bloc p {
  font-size: 15px;
  color: var(--dark-gray);
  line-height: 1.7;
}

.detail-bloc ul {
  padding-left: 16px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-bloc li {
  font-size: 15px;
  color: var(--dark-gray);
  line-height: 1.6;
}

.detail-bloc li::marker {
  color: var(--gray);
}

/* ========================================
   COMPETENCES (competences.html)
======================================== */
.comp-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comp-card h2 {
  font-size: var(--titre-cadre);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
  line-height: 1.3;
}

.comp-card > p {
  font-size: 15px;
  color: var(--mid-gray);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Arrivee depuis un code C1-C6 d'une page projet : la carte visee
   passe sous la barre de navigation fixe, pas dessous, et son cadre
   prend la couleur de selection. */
.comp-card {
  scroll-margin-top: calc(var(--nav-h) + 28px);
}

.comp-card:target {
  border-color: var(--accent-line);
}

/* Projets qui mobilisent la competence (ecrits par
   generer-projets.js) : la meme ligne cle / valeur que
   le profil, separee des capacites par un trait tirete. */
.comp-projets {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.comp-projets ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ========================================
   FORMATION / TIMELINE
======================================== */
/* Frise : une barre verticale continue, un rond par etape
   pose dessus a hauteur du titre de sa boite. Rond plein mauve
   pour l'etape en cours, rond vide pour les etapes passees. */
.timeline {
  position: relative;
  padding-left: 32px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--border));
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 36px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  z-index: 1;
  left: -32px;
  top: 30px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gray);
}

.timeline-item.current .timeline-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

.timeline-content h2 {
  font-size: var(--titre-cadre);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 3px;
  line-height: 1.3;
}

.timeline-content > p {
  font-size: 15px;
  color: var(--mid-gray);
}

.timeline-desc {
  margin-top: 8px;
  font-size: 15px;
  color: var(--mid-gray);
  line-height: 1.65;
}

/* La frise est en 14px : mesure resserree pour rester sous ~75 caracteres */
.timeline-desc,
.timeline-content > p {
  max-width: 32em;
}

/* ========================================
   CONTACT
======================================== */
/* Arrivee depuis [Me proposer un stage] : le formulaire se cale
   sous la barre de navigation */
#formulaire {
  scroll-margin-top: calc(var(--nav-h) + 28px);
}

.contact-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-text {
  font-size: 15px;
  color: var(--mid-gray);
  line-height: 1.75;
  margin-bottom: 22px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, background-color 0.35s, color 0.35s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent-line);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--gray);
}

.form-group textarea {
  min-height: 110px;
  max-height: 300px;
  resize: vertical;
}

.btn-submit {
  align-self: flex-start;
}

/* ========================================
   FOOTER
======================================== */
.footer {
  text-align: center;
  text-wrap: balance;
  padding: 20px 28px;
  font-size: 13px;
  color: var(--gray);
  border-top: 1px solid var(--border);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

/* ========================================
   SKIP TO CONTENT (a11y)
======================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  padding: 8px 18px;
  background: var(--black);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* ========================================
   FOCUS VISIBLE (a11y)
======================================== */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:focus-visible,
.btn-submit:focus-visible {
  outline-offset: 3px;
}
.form-status {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text);
}

/* Rouge de la meme palette : ~7:1 sur le fond (#c00 n'en faisait que 2.8) */
.form-status-erreur {
  color: var(--erreur);
}

/* Vide tant que rien n'est envoye : pas de trou sous [Envoyer] */
.form-status:empty {
  margin-top: 0;
}

.nav-link:focus-visible,
.nav-github:focus-visible,
.nav-burger:focus-visible {
  outline-offset: 1px;
}

/* ========================================
   SCROLLBAR
======================================== */
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); }

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 720px) {
  .kv-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .projet-nav {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .projet-nav-next {
    grid-column: auto;
  }


  .form-row {
    grid-template-columns: 1fr;
  }

  /* Mobile navbar */
  .nav-burger {
    display: flex;
  }

  .nav-inner {
    flex-wrap: wrap;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 2px;
    padding-top: 10px;
    padding-bottom: 6px;
    order: 10;
  }

  .nav-links.open {
    display: flex;
  }

  /* Menu ouvert : fond plein, la page ne transparait plus sous
     les liens */
  .navbar:has(.nav-links.open) {
    background: var(--bg);
  }

  .nav-link {
    padding: 14px 14px;
    width: 100%;
  }

  .navbar {
    height: auto;
    min-height: var(--nav-h);
    align-items: flex-start;
    padding-top: 0;
  }

  .nav-inner {
    padding-top: 14px;
    padding-bottom: 8px;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .page { padding-left: 20px; padding-right: 20px; }

  /* Sur 390 px, 24 px de marge interne prenaient deux lignes de plus
     a chaque paragraphe. L'intitule suit, pour rester aligne sur le
     texte du cadre (10 + 8 = 18). */
  .box { padding: 28px 18px 20px; }
  .box-title { left: 10px; }
}

/* ========================================
   LUNE EN ASCII (ascii.js)
   Une lune en caracteres dans la marge droite des
   grands ecrans. Gris, jamais mauve : c'est un decor,
   pas un element actif. Fixe : elle reste en place
   pendant le defilement, comme dans le ciel.
   Dessinee dans un canvas (une opacite par caractere) :
   la police et la couleur sont lues ici par le script.
   Elle se leve en fondu a sa premiere image.
======================================== */
.ascii-moon {
  position: fixed;
  z-index: 0;
  font-family: var(--mono);
  color: var(--dark-gray);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 1.2s ease-out;
}

.ascii-moon.visible {
  opacity: 1;
}