/*
  VT323, SIL Open Font License 1.1 : police de console, utilisée seulement
  par l'écran bleu des erreurs 5xx. Fichier repris du paquet @fontsource/vt323
  5.3.0 et servi depuis assets/polices/ : aucun appel à un CDN.
  La licence accompagne le fichier (assets/polices/LICENCE-VT323.txt).
*/
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/polices/vt323-latin-400-normal.woff2") format("woff2");
}


/*
  Thème « Windows 95 / 98 / 2000 » : le site devient un bureau Windows 9x.
  - Le bureau est l'aplat bleu canard ; ses icônes (décoratives) sont posées
    par body::before sur les écrans assez larges pour les accueillir.
  - Chaque section est une fenêtre grise en relief. Son h2 devient la barre
    de titre (vrai texte, donc lu normalement) ; l'icône et les boutons de la
    barre de titre sont h2::before et h2::after.
  - .hero est un assistant de bienvenue et main.erreur une boîte de dialogue :
    sans h2, leur barre de titre est leur propre ::before.
  - .topbar devient la barre des tâches, fixée en bas ; script.js y ajoute le
    menu Démarrer et l'horloge.
  - Les erreurs 5xx (body.ecran-bleu) sont un écran bleu, en VT323.
  Toutes les images viennent de assets/win9x/ : la CSP refuse les data:
  (img-src 'self') comme les styles en ligne (style-src 'self').
*/

:root {
  --bureau: #008080;
  --gris: #c0c0c0;
  --gris-fonce: #808080;
  --gris-clair: #dfdfdf;
  --noir: #0a0a0a;
  --texte: #000000;
  --texte-doux: #404040;
  --lien: #0000ee;
  --surbrillance: #000080;
  --infobulle: #ffffe1;

  /* Barres de titre : active (dégradé de Windows 98) et inactive */
  --titre-actif: linear-gradient(90deg, #000080, #1084d0);
  --titre-inactif: linear-gradient(90deg, #606060, #b0b0b0);

  /* Les quatre reliefs de Windows, en ombres internes de 1 px */
  --relief: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --relief-fenetre: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
  --enfonce: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --creux: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --creux-leger: inset -1px -1px #ffffff, inset 1px 1px #808080;
  /* Bouton par défaut : un liseré noir de plus autour du relief */
  --relief-defaut: inset -1px -1px #0a0a0a, inset 1px 1px #0a0a0a, inset -2px -2px #0a0a0a, inset 2px 2px #ffffff, inset -3px -3px #808080, inset 3px 3px #dfdfdf;
  /* Damier d'un bouton de barre des tâches enfoncé */
  --damier: repeating-conic-gradient(#c0c0c0 0% 25%, #ffffff 0% 50%) 0 0 / 2px 2px;

  --barre-taches: 30px;
  --hauteur-titre: 22px;
  --gouttiere: 24px;
  --largeur: 920px;

  --police: Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Verdana, "DejaVu Sans", Geneva, Arial, sans-serif;
  --police-titre: Verdana, Tahoma, "DejaVu Sans", Geneva, Arial, sans-serif;
  --police-document: "Times New Roman", Times, "Liberation Serif", "DejaVu Serif", serif;
  --police-console: "VT323", "Lucida Console", "Courier New", monospace;
}

* { box-sizing: border-box; }

html {
  background: var(--bureau);
  scroll-behavior: smooth;
  scroll-padding-top: 18px;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: var(--barre-taches);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte);
  /* Pas de fond ici : celui de html suffit, et un fond sur body masquerait
     les icônes du bureau (body::before, en z-index négatif). */
}

/* Icônes du bureau, décoratives, dans la marge de gauche */
body::before {
  content: "";
  position: fixed;
  top: 10px;
  left: 6px;
  z-index: -1;
  display: none;
  width: 96px;
  height: 236px;
  background: url("assets/win9x/bureau.svg") no-repeat;
  pointer-events: none;
}

body:lang(en)::before { background-image: url("assets/win9x/bureau-en.svg"); }

@media (min-width: 1180px) {
  body::before { display: block; }
}

::selection { background: var(--surbrillance); color: #fff; }

a { color: var(--lien); }
a:hover { color: #ff0000; }

:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 2px;
}

/* --- Barre des tâches --- */
.topbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--barre-taches);
  padding: 2px 2px 0;
  background: var(--gris);
  box-shadow: inset 0 1px var(--gris-clair), inset 0 2px #fff;
  font-size: 13px;
}

/* Bouton Démarrer. Sans script, c'est un simple libellé ; script.js le
   remplace par un vrai bouton qui ouvre le menu. */
.brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 0;
  padding: 0 6px 0 4px;
  border: 0;
  background: var(--gris);
  box-shadow: var(--relief);
  color: #000;
  font: bold 13px var(--police);
  white-space: nowrap;
}

.brand::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("assets/win9x/poste.svg") no-repeat;
}

button.brand { cursor: pointer; }

button.brand[aria-expanded="true"] {
  padding: 1px 5px 0 5px;
  box-shadow: var(--enfonce);
}

button.brand:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* Les liens de navigation sont les boutons des fenêtres ouvertes */
.topbar nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 3px;
  height: 100%;
  padding: 1px 0 3px 8px;
  /* Poignée de la zone des tâches, comme sous Windows 98 */
  background:
    linear-gradient(90deg, #808080 1px, #fff 1px 2px, transparent 2px) 0 3px / 2px 20px no-repeat;
  /* Sur petit écran, les boutons défilent dans la barre */
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar nav::-webkit-scrollbar { display: none; }

.topbar nav a {
  flex: 0 1 160px;
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 5px;
  background: var(--gris);
  box-shadow: var(--relief);
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.topbar nav a::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("assets/win9x/poste.svg") no-repeat;
}

/* Fenêtre au premier plan (posé par script.js) : bouton enfoncé */
.topbar nav a[aria-current] {
  padding-top: 1px;
  background: var(--damier);
  box-shadow: var(--enfonce);
  font-weight: bold;
}

.topbar nav a:active { box-shadow: var(--enfonce); }

.topbar nav a:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* Zone de notification : l'horloge est ajoutée par script.js */
.horloge {
  flex: none;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  box-shadow: var(--creux-leger);
  white-space: nowrap;
}

/* --- Menu Démarrer (construit par script.js) --- */
.menu-demarrer {
  position: fixed;
  left: 2px;
  bottom: calc(var(--barre-taches) - 3px);
  z-index: 101;
  display: flex;
  min-width: 250px;
  max-width: calc(100vw - 4px);
  max-height: calc(100vh - var(--barre-taches));
  padding: 3px;
  background: var(--gris);
  box-shadow: var(--relief-fenetre);
  font-size: 13px;
}

.menu-demarrer[hidden] { display: none; }

/* Bandeau vertical, lu de bas en haut comme celui de Windows 98 */
.menu-demarrer::before {
  content: "Raphaël Canevet";
  content: "Raphaël Canevet" / "";
  flex: none;
  width: 26px;
  padding: 8px 0;
  background: linear-gradient(0deg, #000080, #1084d0);
  color: var(--gris);
  font: bold 18px/26px var(--police-titre);
  letter-spacing: 1px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.menu-demarrer ul {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.menu-demarrer a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 24px 3px 6px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.menu-demarrer a:hover,
.menu-demarrer a:focus-visible {
  outline: none;
  background: var(--surbrillance);
  color: #fff;
}

/* Les icônes 16 x 16 doublées en 32 x 32, comme les grandes icônes du menu */
.menu-demarrer a::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  background: url("assets/win9x/document.svg") center / 32px no-repeat;
}

.menu-demarrer .separateur {
  height: 2px;
  margin: 3px 2px;
  border-top: 1px solid var(--gris-fonce);
  border-bottom: 1px solid #fff;
}

/* --- Icônes par destination : fenêtres, boutons de tâches et menu ---
   Chaque règle cite l'id français et son équivalent sous /en/. */
#apropos > h2::before,
#about > h2::before,
.topbar nav a[href$="#apropos"]::before,
.topbar nav a[href$="#about"]::before,
.menu-demarrer [data-icone="apropos"]::before,
.menu-demarrer [data-icone="about"]::before { background-image: url("assets/win9x/bloc-notes.svg"); }

#formation > h2::before,
#education > h2::before,
.topbar nav a[href$="#formation"]::before,
.topbar nav a[href$="#education"]::before,
.menu-demarrer [data-icone="formation"]::before,
.menu-demarrer [data-icone="education"]::before { background-image: url("assets/win9x/livre.svg"); }

#competences > h2::before,
#skills > h2::before,
.topbar nav a[href$="#competences"]::before,
.topbar nav a[href$="#skills"]::before,
.menu-demarrer [data-icone="competences"]::before,
.menu-demarrer [data-icone="skills"]::before { background-image: url("assets/win9x/engrenage.svg"); }

#projets > h2::before,
#projects > h2::before,
.topbar nav a[href$="#projets"]::before,
.topbar nav a[href$="#projects"]::before,
.menu-demarrer [data-icone="projets"]::before,
.menu-demarrer [data-icone="projects"]::before { background-image: url("assets/win9x/dossier.svg"); }

#stages > h2::before,
#internships > h2::before,
.topbar nav a[href$="#stages"]::before,
.topbar nav a[href$="#internships"]::before,
.menu-demarrer [data-icone="stages"]::before,
.menu-demarrer [data-icone="internships"]::before { background-image: url("assets/win9x/mallette.svg"); }

#contact > h2::before,
.topbar nav a[href$="#contact"]::before,
.menu-demarrer [data-icone="contact"]::before { background-image: url("assets/win9x/enveloppe.svg"); }

.menu-demarrer [data-icone="clef"]::before { background-image: url("assets/win9x/clef.svg"); }
.menu-demarrer [data-icone="langue"]::before { background-image: url("assets/win9x/globe.svg"); }
.menu-demarrer [data-icone="accueil"]::before { background-image: url("assets/win9x/poste.svg"); }

/* --- Mise en page --- */
main {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 32px var(--gouttiere) 6px;
}

h1 {
  margin: 0 0 6px;
  font-family: var(--police-titre);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

h2 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
}

h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
}

h4 {
  margin: 22px 0 4px;
  font-size: 14px;
  font-weight: 700;
}

p { margin: 0 0 14px; }

/* --- Fenêtres --- */
main > section,
main.erreur {
  position: relative;
  margin: 0 0 28px;
  padding: 3px 16px 18px;
  background: var(--gris);
  box-shadow: var(--relief-fenetre);
}

main > section:not(.hero) {
  scroll-margin-top: 18px;
}

/* Barre de titre : le h2 de la section, ou le ::before de l'assistant et
   des boîtes de dialogue. Marge négative : elle va d'un bord à l'autre. */
main > section:not(.hero) > h2,
.hero::before,
main.erreur::before {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--hauteur-titre);
  margin: 0 -13px 16px;
  padding: 2px 60px 2px 3px;
  background: var(--titre-actif);
  color: #fff;
  font: bold 13px/18px var(--police);
  letter-spacing: 0.2px;
}

main > section:not(.hero) > h2::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("assets/win9x/document.svg") no-repeat;
}

/* Boutons Réduire / Agrandir / Fermer, décoratifs */
main > section:not(.hero) > h2::after,
.hero::after,
main.erreur::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 50px;
  height: 14px;
  background: url("assets/win9x/boutons-fenetre.svg") no-repeat;
}

/* Fenêtres en arrière-plan : barre de titre grise. La classe fenetres-actives
   n'est posée que si script.js suit la fenêtre visible. */
.fenetres-actives main > section:not(.hero):not(.premier-plan) > h2,
.fenetres-actives .hero:not(.premier-plan)::before {
  background-color: #808080;
  background-image: var(--titre-inactif);
  color: #e8e8e8;
}

/* Poignée de redimensionnement, dans le coin bas droit */
main > section:not(.hero)::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 12px;
  height: 12px;
  background: url("assets/win9x/poignee.svg") no-repeat;
}

/* Infobulle jaune pour les encadrés à retenir */
.objectif {
  position: relative;
  min-height: 56px;
  padding: 11px 14px 11px 56px;
  border: 1px solid #000;
  background: var(--infobulle);
}

.objectif::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 12px;
  width: 32px;
  height: 32px;
  background: url("assets/win9x/info.svg") no-repeat;
}

.objectif:last-child { margin-bottom: 0; }

/* --- Accueil : premier écran d'un assistant Windows 2000 --- */
.hero {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  /* Titre, nom, rôle, accroche (qui prend la hauteur restante), boutons */
  grid-template-rows: auto auto auto 1fr auto;
  padding: 3px;
}

.hero::before {
  content: "Assistant de bienvenue";
  content: "Assistant de bienvenue" / "";
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding-left: 23px;
  background:
    url("assets/win9x/poste.svg") 3px center no-repeat,
    var(--titre-actif);
}

.fenetres-actives .hero:not(.premier-plan)::before {
  background:
    url("assets/win9x/poste.svg") 3px center no-repeat,
    var(--titre-inactif);
}

:lang(en) .hero::before {
  content: "Welcome Wizard";
  content: "Welcome Wizard" / "";
}

/* Bannière latérale de l'assistant (image décorative) */
.tuile {
  grid-column: 1;
  grid-row: 2 / span 3;
  display: block;
  width: 164px;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  object-position: top;
}

/* Le volet blanc de droite : les éléments s'empilent sans marge pour que
   leurs fonds forment un seul panneau. */
.hero > h1,
.hero > .role,
.hero > .tagline {
  grid-column: 2;
  margin: 0;
  padding: 0 28px;
  background: #fff;
}

.hero > h1 { padding-top: 26px; padding-bottom: 8px; }

.role {
  padding-bottom: 14px !important;
  color: var(--surbrillance);
  font-weight: 700;
}

.hero > .tagline {
  padding-bottom: 28px;
  max-width: none;
  font-size: 15px;
}

/* Zone des boutons de l'assistant, sous un trait gravé */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.hero > .actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding: 12px 10px 9px;
  box-shadow: inset 0 1px #808080, inset 0 2px #fff;
}

/* Page de contenu secondaire (confidentialité, licences) : un document du Bloc-notes */
.hero.page { grid-template-columns: minmax(0, 1fr); }

.hero.page::before {
  content: "Confidentialité.txt - Bloc-notes";
  content: "Confidentialité.txt - Bloc-notes" / "";
  background:
    url("assets/win9x/bloc-notes.svg") 3px center no-repeat,
    var(--titre-actif);
}

.fenetres-actives .hero.page:not(.premier-plan)::before {
  background:
    url("assets/win9x/bloc-notes.svg") 3px center no-repeat,
    var(--titre-inactif);
}

:lang(en) .hero.page::before {
  content: "Privacy.txt - Notepad";
  content: "Privacy.txt - Notepad" / "";
}

/* Même Bloc-notes pour la page des licences, seul le nom du fichier change */
.hero.page.licences::before {
  content: "Licences.txt - Bloc-notes";
  content: "Licences.txt - Bloc-notes" / "";
}

:lang(en) .hero.page.licences::before {
  content: "Licenses.txt - Notepad";
  content: "Licenses.txt - Notepad" / "";
}

.hero.page > h1,
.hero.page > .tagline { grid-column: 1; }
.hero.page > h1 { padding-bottom: 12px; }
.hero.page > .tagline { padding-bottom: 24px; }

/* --- Boutons --- */
.btn,
form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  min-height: 26px;
  margin: 0;
  padding: 4px 14px;
  border: 0;
  border-radius: 0;
  background: var(--gris);
  box-shadow: var(--relief);
  color: #000;
  font: 13px var(--police);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
form button:hover { color: #000; }

/* Bouton par défaut : liseré noir en plus */
.btn-primary,
form button { box-shadow: var(--relief-defaut); }

.btn:active,
form button:active {
  padding: 5px 13px 3px 15px;
  box-shadow: inset 0 0 0 1px #0a0a0a, inset 0 0 0 2px #808080;
}

.btn:focus-visible,
form button:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -5px;
}

form button:disabled {
  color: #808080;
  text-shadow: 1px 1px #fff;
  box-shadow: var(--relief);
  cursor: default;
}

/* --- Formation : liste « Détails » de l'Explorateur --- */
.timeline {
  margin: 0;
  padding: 2px;
  list-style: none;
  background: #fff;
  box-shadow: var(--creux);
}

.timeline li {
  display: flex;
  gap: 18px;
  padding: 10px 12px;
}

.timeline li + li { border-top: 1px dotted var(--gris); }

.periode {
  flex: 0 0 140px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--surbrillance);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

.periode::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: url("assets/win9x/livre.svg") no-repeat;
}

.timeline h3 { line-height: 20px; }
.timeline p { margin: 0; color: var(--texte-doux); font-size: 14px; }

/* --- Cartes : cadres de groupe gravés --- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 26px 18px;
  padding-top: 8px;
}

.carte {
  padding: 16px 14px 14px;
  border: 1px solid var(--gris-fonce);
  box-shadow: inset 1px 1px #fff, 1px 1px #fff;
}

/* L'intitulé du groupe interrompt le trait du haut */
.carte h3 {
  display: table;
  margin: -25px 0 10px -5px;
  padding: 0 4px;
  background: var(--gris);
  font-size: 13px;
  line-height: 18px;
}

.carte p { font-size: 14px; margin-bottom: 0; }
.carte .meta { color: var(--texte-doux); font-size: 12px; margin-bottom: 8px; }

/* --- Étiquettes : cases à cocher --- */
.tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tags li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 1.35;
}

.tags li::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: url("assets/win9x/case-cochee.svg") no-repeat;
}

/* En cours d'apprentissage : case grisée, ni cochée ni décochée */
.tags .encours::before { background-image: url("assets/win9x/case-grisee.svg"); }

.tags.inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 26px;
}

.legende {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--texte-doux);
}

.puce-encours {
  flex: none;
  width: 13px;
  height: 13px;
  background: url("assets/win9x/case-grisee.svg") no-repeat;
}

/* En-tête de groupe : texte gras suivi d'un trait gravé */
.sous-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 12px;
  font-size: 13px;
}

.sous-titre::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--gris-fonce);
  border-bottom: 1px solid #fff;
}

/* --- Projets : un document WordPad --- */
.projet {
  margin-bottom: 18px;
  padding: 26px 30px 24px;
  background: #fff;
  box-shadow: var(--creux);
  font-family: var(--police-document);
  font-size: 18px;
  line-height: 1.5;
}

/* Règle graduée de WordPad, au-dessus du document */
.projet::before {
  content: "";
  display: block;
  height: 10px;
  margin: -16px -18px 18px;
  border-bottom: 1px solid var(--gris);
  background:
    repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 48px) 0 0 / 100% 10px,
    repeating-linear-gradient(90deg, #808080 0 1px, transparent 1px 12px) 0 6px / 100% 4px no-repeat;
}

.projet:last-child { margin-bottom: 0; }

.projet h3,
.projet h4 { font-family: Arial, "Liberation Sans", Helvetica, sans-serif; }

.projet h3 { margin-bottom: 8px; font-size: 1.5rem; }
.projet h4 { font-size: 1.05rem; color: var(--surbrillance); }
.projet .chapo { font-style: italic; }
.projet p:last-child { margin-bottom: 0; }

/* Schéma du homelab : un objet Paint incrusté dans le document */
.schema {
  margin: 4px 0 18px;
  padding: 3px;
  background: var(--gris);
  box-shadow: var(--relief);
}

.schema svg {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: var(--creux-leger);
  font-family: var(--police);
}

/* Trop petit pour être lu à moins de 560 px : on fait défiler le dessin */
.schema-defilement { overflow-x: auto; }
.schema-defilement svg { min-width: 560px; }

.schema figcaption {
  padding: 4px 4px 1px;
  font: 13px var(--police);
  color: var(--texte-doux);
}

.schema-nom { font-size: 15px; font-weight: bold; }
.schema-petit { font-size: 12px; fill: var(--texte-doux); }
.schema-service { font-size: 13px; white-space: pre; }
.schema-zone { font-size: 14px; font-weight: bold; fill: var(--surbrillance); }
.schema-tunnel { font-size: 13px; font-weight: bold; fill: #c00000; }

.a-completer {
  color: var(--texte-doux);
  font-style: italic;
  font-size: 14px;
}

/* --- Formulaire : champs creusés --- */
form { display: flex; flex-direction: column; max-width: 560px; }

label {
  margin: 12px 0 3px;
  font-size: 13px;
}

input,
textarea {
  padding: 5px 7px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: var(--creux);
  color: #000;
  font: 15px var(--police);
}

input:focus,
textarea:focus {
  outline: 1px dotted #000;
  outline-offset: 2px;
}

textarea { resize: vertical; min-height: 120px; }

form button {
  align-self: flex-start;
  margin-top: 18px;
  padding: 4px 22px;
}

form button:active { padding: 5px 21px 3px 23px; }

#form-status { margin-top: 14px; font-size: 14px; }
#form-status:empty { display: none; }

#form-status.ok,
#form-status.erreur {
  position: relative;
  min-height: 46px;
  padding: 8px 12px 8px 50px;
  border: 1px solid #000;
  background: var(--infobulle);
  color: #000;
}

#form-status.ok::before,
#form-status.erreur::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 10px;
  width: 32px;
  height: 32px;
  background: url("assets/win9x/info.svg") no-repeat;
}

#form-status.erreur::before { background-image: url("assets/win9x/erreur.svg"); }

.direct { margin: 22px 0 0; font-size: 14px; color: var(--texte-doux); }

/* --- Pied de page : barre d'état --- */
footer {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: min(calc(var(--largeur) - 2 * var(--gouttiere)), calc(100% - 2 * var(--gouttiere)));
  margin: 0 auto 24px;
  padding: 3px;
  background: var(--gris);
  box-shadow: var(--relief-fenetre);
  font-size: 12px;
}

footer p {
  flex: 1 1 auto;
  margin: 0;
  padding: 2px 8px;
  box-shadow: var(--creux-leger);
}

footer p:first-child { flex-grow: 4; }
footer .lien-source { text-align: center; }

/* Mention discrète sur sa propre ligne, sous les cases de la barre d'état */
footer .mention-ia {
  flex-basis: 100%;
  padding: 1px 8px 0;
  box-shadow: none;
  color: var(--texte-doux);
  font-size: 11px;
  text-align: center;
}

/* --- Pages d'erreur : boîte de dialogue --- */
main.erreur {
  width: min(560px, calc(100% - 2 * var(--gouttiere)));
  max-width: none;
  margin: 12vh auto 32px;
  padding: 3px 16px 14px 70px;
  background:
    url("assets/win9x/erreur.svg") 20px 44px no-repeat,
    var(--gris);
}

/* Une boîte de dialogue porte le nom du site et n'a que le bouton Fermer */
main.erreur::before {
  content: "canevet.eu";
  margin-left: -67px;
}

main.erreur::after {
  width: 16px;
  background-image: url("assets/win9x/bouton-fermer.svg");
}

main.erreur + footer { width: min(560px, calc(100% - 2 * var(--gouttiere))); }

.code-erreur {
  margin: 0 0 2px;
  color: var(--texte-doux);
  font-size: 13px;
  font-weight: 700;
}

.code-erreur::before { content: "Erreur "; }
:lang(en) .code-erreur::before { content: "Error "; }

main.erreur h1 {
  margin-bottom: 8px;
  font-family: var(--police);
  font-size: 1.2rem;
  letter-spacing: 0;
}

main.erreur .tagline { margin: 0 0 20px; font-size: 14px; }

/* Les boutons d'une boîte de message sont centrés sous le texte */
main.erreur .actions {
  justify-content: center;
  margin-left: -54px;
}

/* Page servie aux scanners qui cherchent /admin, /.env et compagnie */
main.erreur:has(.chat-moqueur) {
  background-image: url("assets/win9x/attention.svg"), linear-gradient(var(--gris), var(--gris));
}

main.erreur:has(.chat-moqueur)::before { content: "chat.exe"; }

.chat-moqueur {
  display: block;
  max-width: 100%;
  width: 420px;
  margin: 8px 0 0 -54px;
  padding: 2px;
  background: #fff;
  box-shadow: var(--creux);
}

main.erreur > p:has(> .chat-moqueur) { margin-bottom: 0; }

/* « Cet incident a été signalé. IP client : ... » (bluff, rien n'est envoyé) */
.signalement { margin: 0 0 4px; font-size: 14px; }
.signalement strong { font-family: var(--police-console); font-size: 18px; letter-spacing: 0.5px; }

/* --- Erreurs 5xx : écran bleu --- */
html:has(> body.ecran-bleu) { background: #0000aa; }

body.ecran-bleu {
  padding: 0 0 40px;
  color: #fff;
  font-family: var(--police-console);
  font-size: 24px;
  line-height: 1.3;
}

body.ecran-bleu::before,
.ecran-bleu .topbar { display: none; }

.ecran-bleu ::selection { background: #aaa; color: #0000aa; }

.ecran-bleu main.erreur {
  width: min(1000px, calc(100% - 2 * var(--gouttiere)));
  margin: 14vh auto 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

.ecran-bleu main.erreur::before,
.ecran-bleu main.erreur::after { display: none; }

/* Le bandeau gris centré, à la place du « Windows » d'origine */
.ecran-bleu .code-erreur {
  display: table;
  margin: 0 auto 1.2em;
  padding: 0 0.4em;
  background: #aaa;
  color: #0000aa;
  font: inherit;
}

.ecran-bleu main.erreur h1,
.ecran-bleu .exception,
.ecran-bleu main.erreur .tagline {
  margin: 0 0 1.2em;
  font: inherit;
  letter-spacing: 0;
}

.ecran-bleu main.erreur .actions {
  display: block;
  margin: 0;
}

.ecran-bleu .btn {
  display: block;
  min-height: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  font: inherit;
  text-align: left;
}

.ecran-bleu .btn::before { content: "*  "; white-space: pre; }
.ecran-bleu .btn:hover { color: #ffff55; }
.ecran-bleu .btn:active { padding: 0; box-shadow: none; }

.ecran-bleu .btn:focus-visible {
  outline: none;
  background: #aaa;
  color: #0000aa;
}

/* Curseur clignotant sous la dernière ligne */
.ecran-bleu main.erreur .actions::after {
  content: "_";
  display: block;
  margin-top: 1.2em;
  animation: clignote 1.06s steps(1) infinite;
}

@keyframes clignote {
  50% { opacity: 0; }
}

.ecran-bleu footer,
.ecran-bleu main.erreur + footer {
  display: block;
  width: min(1000px, calc(100% - 2 * var(--gouttiere)));
  margin: 2.4em auto 0;
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: 20px;
}

.ecran-bleu footer p { padding: 0; box-shadow: none; }
.ecran-bleu footer a { color: #fff; }
.ecran-bleu footer a:hover { color: #ffff55; }
.ecran-bleu footer .mention-ia { margin-top: 1em; color: inherit; font-size: 16px; text-align: left; }

/* --- Pages de contenu secondaires --- */
.liste { margin: 0 0 14px; padding-left: 22px; }
.liste li { margin-bottom: 6px; }

section > .meta { color: var(--texte-doux); font-size: 13px; }

/* --- Barres de défilement de Windows 95 (Chrome, Edge, Safari) --- */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--damier); }
::-webkit-scrollbar-corner { background: var(--gris); }

::-webkit-scrollbar-thumb {
  background: var(--gris);
  box-shadow: var(--relief);
}

::-webkit-scrollbar-button:single-button {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--gris) no-repeat;
}

::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("assets/win9x/fleche-haut.svg"); }
::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("assets/win9x/fleche-bas.svg"); }
::-webkit-scrollbar-button:single-button:horizontal { display: none; }

@supports (-moz-appearance: none) {
  html { scrollbar-color: var(--gris) var(--gris-clair); }
}

/* --- Petits écrans --- */
@media (max-width: 640px) {
  :root { --gouttiere: 10px; }

  body { font-size: 14px; }

  main { padding-top: 16px; }

  main > section:not(.hero) { padding: 3px 12px 16px; }
  main > section:not(.hero) > h2 { margin-left: -9px; margin-right: -9px; }

  /* L'assistant perd sa bannière latérale */
  .hero { grid-template-columns: minmax(0, 1fr); }
  .tuile { display: none; }

  .hero > h1,
  .hero > .role,
  .hero > .tagline {
    grid-column: 1;
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero > h1 { padding-top: 20px; }
  .hero > .tagline { padding-bottom: 20px; }
  .hero > .actions { justify-content: flex-start; }

  h1 { font-size: 1.6rem; }

  .projet { padding: 20px 16px 18px; font-size: 17px; }
  .projet::before { margin: -10px -4px 16px; }

  .timeline li { flex-direction: column; gap: 4px; }
  .periode { flex: none; }

  main.erreur { padding-left: 16px; background-position: 14px 42px, 0 0; }
  main.erreur::before { margin-left: -13px; }
  main.erreur > .code-erreur,
  main.erreur > h1 { margin-left: 46px; }
  main.erreur .actions { margin-left: 0; }
  .chat-moqueur { margin-left: 0; }

  body.ecran-bleu { font-size: 20px; }

  /* Seule l'icône du bouton Démarrer reste visible ; le nom reste lu */
  .brand { font-size: 0; gap: 0; padding-right: 4px; }
  .topbar nav a { flex-basis: auto; }
}

@media (max-width: 520px) {
  .horloge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ecran-bleu main.erreur .actions::after { animation: none; }
}

/* Easter egg : pluie Matrix (code Konami, voir script.js) */
.pluie-matrix {
  position: fixed;
  inset: 0;
  z-index: 9998;
  width: 100%;
  height: 100%;
  background: #000;
  /* Le canvas recouvre la page : un clic dessus referme l'effet,
     comme la touche Échap. */
  cursor: pointer;
}

.pluie-legende {
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 9999;
  margin: 0;
  text-align: center;
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: #1db954;
  pointer-events: none;
}

/* Le site reste en place sous le canvas, mais on coupe le défilement
   pour que l'effet occupe vraiment tout l'écran. */
body.mode-matrix { overflow: hidden; }

/* Bascule français / anglais, discrète, dans la barre d'état */
.lien-langue a { text-decoration: none; border-bottom: 1px dotted currentColor; }

/* Champ piège du formulaire : invisible pour les visiteurs, rempli par
   les robots à formulaires, ce qui suffit à Formspree pour les écarter. */
.piege {
  display: none;
}