/* ==========================================================================
   Razvan Apredoaei — feuille de style
   ========================================================================== */

/* --- 1. VARIABLES --------------------------------------------------------- */
:root {
  /* Declare au navigateur que la page assiste les deux themes, pour qu'il
     adapte SES propres composants : surface du canevas, barres de defilement,
     controles de formulaire. C'est independant du bloc @media plus bas, qui
     ne restyle que NOS elements. Effet le plus visible ici : plus d'eclair
     blanc au chargement en mode sombre, le canevas etant peint avant que
     notre background-color ne s'applique. */
  color-scheme: light dark;

  --primary-color: #2c3e50;
  --text-color: #222222;
  --bg-color: #fcfcfc;
  --header-bg: #ffffff;
  --title-color: #1e293b;
  --link-color: #0b57d0;
  --link-hover-color: #0842a0;
  --muted-color: #595959;
  --nav-color: #333333;
  --border-color: #e2e8f0;
  --rule-color: #eaeaea;
  /* Bleu ramene au rang de bordure : rattache le panneau a la famille
     « interactif » sans lui donner le poids d'un trait d'accent. Une valeur
     par theme, sinon le rapport s'inverse (en sombre, #9db4d9 monterait a
     6,9:1 sur le panneau et redeviendrait aussi criard que le bleu plein). */
  --accent-doux: #9db4d9;
  --panel-bg: #f4f7f9;
  --card-bg: #ffffff;
  /* 720 et non 800 : a 800, la colonne faisait 760 px utiles, soit 97
     caracteres par ligne — bien au-dela de la fourchette de confort 45-75,
     ou l'oeil rate la ligne suivante au retour chariot. 720 ramene a 87.
     Pas plus etroit : a 660 (79 caracteres), chaque reference
     bibliographique passe sur trois lignes et la liste devient penible a
     parcourir. Sur mobile la valeur n'a aucun effet, la colonne etant deja
     contrainte par la fenetre (44 caracteres). */
  --max-width: 720px;
  --icon-box: 44px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
  /* Reserve en permanence la place de la barre de defilement verticale. Sans
     elle, une page courte (Teaching) n'a pas de barre et une page longue
     (Research) en a une : la fenetre change de largeur entre les deux, et tout
     le contenu centre se decale lateralement de la moitie de cette largeur.
     Sans effet sur les systemes a barres superposees, ou rien n'est reserve. */
  scrollbar-gutter: stable;
  background-color: var(--bg-color);
  /* NOTE : pas de `overflow-anchor: none`. L'ancrage de defilement est le
     mecanisme natif qui absorbe les variations de hauteur pendant le scroll ;
     le desactiver transforme la moindre variation en oscillation visible. */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
  margin: 0;
  padding: 0;
  width: 100%;
  /* Pied de page colle en bas : sur un grand ecran, une page courte laissait
     les deux tiers de la hauteur vides SOUS le pied de page. La colonne flex
     fait grandir <main> pour occuper l'espace restant. dvh plutot que vh :
     sur mobile, vh ignore la barre d'outils du navigateur. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

main {
  padding: 2.5rem 0;
  width: 100%;
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
  /* absorbe la hauteur restante ; 'auto' en base pour que le contenu long
     ne soit jamais comprime */
  flex: 1 0 auto;
}

main.fade-out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Transitions de vue natives : le changement de page au clic devient un fondu,
   comme au balayage. Sans support (Firefox), la navigation reste normale. */
@view-transition { navigation: auto; }

/* L'en-tete est identique d'une page a l'autre : on le sort du fondu general
   pour qu'il paraisse immobile pendant la transition. */
header { view-transition-name: site-header; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* --- 1 bis. ACCESSIBILITE CLAVIER ----------------------------------------- */
/* Lien d'evitement : hors ecran, il apparait au premier Tab et permet de
   sauter l'en-tete pour aller droit au contenu. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  background-color: var(--header-bg);
  color: var(--link-color);
  border: 1px solid var(--link-color);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: top 0.15s ease;
}

.skip-link:focus { top: 8px; }

#contenu:focus { outline: none; } /* cible du lien d'evitement, pas un controle */

/* Anneau de focus homogene et bien contraste sur tout le site. */
:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- 2. LIENS ------------------------------------------------------------- */
a,
a:visited {
  color: var(--link-color);
  transition: color 0.15s ease;
}

main a,
main a:visited { text-decoration: none; }

main a:focus-visible {
  color: var(--link-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 3. TITRES ------------------------------------------------------------ */
h2 {
  /* Ardoise et non bleu : le bleu reste reserve a ce qui est cliquable.
     Un titre de section bleu se lit comme un lien mort et dilue le signal. */
  color: var(--title-color);
  /* 1.25rem et non 1.15 : a 1,15 fois le corps, le titre de section etait
     sous la fourchette usuelle de 1,25-1,4. La marge etait tenable tant que
     le bleu le detachait ; en ardoise, il lui faut la taille. */
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1.5rem 0 0.8rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-color);
}

.site-header-title {
  margin: 0;
  padding: 0;
  border-bottom: none;
  /* 1.375rem et non 1.5 : le nom pesait 1,58 fois la taille du menu, ce qui
     l'ecrasait. A 1,45 la hierarchie tient sans dominer. Ne pas descendre
     sous 1.35rem : la zone tactile du titre (44 px, voir plus bas) finirait
     par recouvrir celle du menu sur mobile. Le logo suit tout seul, etant
     dimensionne en em. */
  font-size: 1.375rem;
  font-weight: 600;
  white-space: nowrap;
}

a.site-title,
a.site-title:visited {
  color: var(--title-color);
  text-decoration: none;
  transition: color 0.2s ease;
  /* inline (et non inline-flex) : la ligne de base d'un conteneur inline-flex
     est celle de son premier element, ici le SVG, dont la ligne de base
     synthetique est son bord inferieur. Le titre heritait donc d'une fausse
     ligne de base. En inline, c'est bien celle du texte. */
  display: inline;
  white-space: nowrap;
}

/* Logo vectoriel inline (voir base.njk).
   Le trace porte deja fill="currentColor" et width/height en attributs : ces
   regles ne font que l'aligner dans le flex du titre. Si cette feuille n'est
   pas chargee, le logo reste visible et correctement colore. */
.site-mark {
  display: inline-block;
  vertical-align: -0.24em; /* cale le logo sur la ligne de base du titre */
  margin-right: 0.42em;    /* ecart avec le R = 10px pour un titre de 24px */
  /* Valeurs calees sur l'ancienne apparence : logo 27,5px et ecart 12px pour
     un titre de 24px. En em, ces proportions suivent la taille du titre. */
  height: 1.15em;
  width: 1.19em; /* = hauteur x 1.0377, ratio du trace */
}

/* --- 4. EN-TETE ET NAVIGATION --------------------------------------------- */
header {
  border-bottom: 1px solid var(--rule-color);
  background-color: var(--header-bg);
  padding: 1.2rem 0;
  margin-bottom: 2rem;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 1rem;
}

/* align-items: baseline (et non center) : le titre et le selecteur EN | FR
   ont des tailles de police differentes, donc centrer leurs boites laisse
   leurs lignes de base decalees. L'alignement typographique correct est la
   ligne de base. */
.header-top {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
}

nav,
.nav-links { width: 100%; }

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

nav a,
nav a:visited {
  text-decoration: none;
  color: var(--nav-color);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 4px 0;
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
}

nav a.active,
nav a.active:visited { color: var(--link-color); }

nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--link-color);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

nav a.active::after,
nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Zone tactile de 44 px SANS toucher a la mise en page : un pseudo-element
   transparent elargit la seule surface d'appui. Les decalages verticaux sont
   volontairement dissymetriques — le menu deborde vers le bas dans la marge
   interne de l'en-tete, le selecteur de langue vers le haut — pour que les
   deux zones ne se chevauchent jamais. */
nav a::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -5px;
  height: 44px;
}

.lang-switch a::before {
  left: -6px;
  right: -6px;
  top: -13px;
}

a.site-title { position: relative; }

a.site-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 44px;
}

.lang-switch {
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--border-color);
}

.lang-switch a,
.lang-switch a:visited {
  text-decoration: none;
  color: #4a4a4a;
  transition: color 0.2s ease;
  padding: 2px 4px;
}

.lang-switch a.active,
.lang-switch a.active:visited {
  color: var(--link-color);
  font-weight: 700;
}

.lang-switch .separator {
  color: #666666;
  font-size: 0.8rem;
  user-select: none;
}

/* --- 5. BLOCS DEROULANTS (DETAILS) ---------------------------------------- */

/* Ouverture et fermeture animees, sans JavaScript.
   Un <details> ne s'anime pas nativement : son contenu apparait d'un coup.
   Deux briques recentes le permettent —
     interpolate-size : autorise l'interpolation vers une hauteur `auto`,
                        sinon il n'y a rien a animer ;
     ::details-content : designe le contenu repliable, sans balise en plus,
                        donc sans toucher a vos fichiers de contenu.
   `allow-discrete` fait patienter content-visibility jusqu'a la fin du
   mouvement, sinon le contenu disparaitrait des le premier millimetre.
   Un navigateur qui ignore ces regles garde l'ouverture instantanee : la
   degradation est propre, rien ne casse. */
details { interpolate-size: allow-keywords; }

details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size 0.3s ease,
    opacity 0.22s ease,
    content-visibility 0.3s allow-discrete;
}

details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

details {
  background-color: var(--panel-bg);
  border-left: 4px solid var(--accent-doux);
  padding: 0.8rem 1.2rem;
  margin: 1rem 0 1.5rem;
  border-radius: 6px;
}

details summary b {
  color: var(--link-color);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

details i {
  display: block;
  margin-top: 0.8rem;
  color: var(--primary-color);
  font-style: italic;
  line-height: 1.6;
}

details.section-deroulante {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 1.2rem;
  padding: 0.5rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /* le padding est aussi anime : sinon la boite sursaute a l'ouverture
     pendant que le contenu, lui, glisse */
  transition: border-color 0.25s ease, padding-bottom 0.3s ease;
}

details.section-deroulante[open] {
  border-color: #cbd5e1;
  padding-bottom: 1rem;
}

details.section-deroulante summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

details.section-deroulante summary::-webkit-details-marker { display: none; }

details.section-deroulante summary h2 {
  margin: 0;
  padding: 0.5rem 0;
  font-size: 1.25rem;
  color: var(--link-color);
  border-bottom: none;
}

details.section-deroulante summary::after {
  content: "\276F";
  font-size: 0.9rem;
  color: var(--link-color);
  transition: transform 0.28s ease; /* atterrit avec le panneau */
}

details.section-deroulante[open] summary::after { transform: rotate(90deg); }

/* Variante SANS CARTE : le panneau se presente comme une section ordinaire.
   Utilisee sur Teaching, ou « Past » doit s'aligner exactement sur les titres
   de section classiques ; la variante a carte (.section-deroulante ci-dessus)
   reste employee sur Activities, ou l'index de rubriques justifie l'encadre.
   Motif : la carte aligne sa BORDURE sur la colonne, donc son texte est
   forcement rentre de 17 px (1 px de bordure + 1 rem de padding), et les
   listes qu'elle contient de 57 px au lieu de 40. Sans carte, plus de retrait
   a compenser : l'alignement est exact a toutes les largeurs, sans media
   query ni valeur magique. */
details.section-simple {
  /* annule la mise en panneau heritee de la regle `details` generique */
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

details.section-simple summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  user-select: none;
  /* Le filet est porte ICI et non par le h2 : sur le h2 (qui est en flex: 1),
     il s'arretait avant le chevron et le trait etait interrompu. Sur le
     summary, il court sur toute la largeur de la colonne, exactement comme
     sous un h2 de section classique. Les marges et le padding-bas de la regle
     `h2` sont donc remontes ici, et le h2 interne est remis a zero. */
  margin: 1.5rem 0 0.8rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-color);
}

details.section-simple summary::-webkit-details-marker { display: none; }

/* Le titre reprend mot pour mot la regle `h2` : meme taille, meme filet, meme
   marge. Seules la couleur et le chevron disent qu'il s'ouvre. */
details.section-simple summary h2 {
  flex: 1;
  font-size: 1.25rem;
  color: var(--link-color);
  margin: 0;
  padding: 0;
  border-bottom: none;
}

details.section-simple summary::after {
  content: "\276F";
  font-size: 0.9rem;
  color: var(--link-color);
  align-self: center;
  transition: transform 0.28s ease;
}

details.section-simple[open] summary::after { transform: rotate(90deg); }

/* --- 6. INTRO & PHOTO DE PROFIL ------------------------------------------- */
.intro-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.intro-text {
  flex: 1;
  min-width: 0;
}

.intro-text > *:first-child { margin-top: 0; }

.profile-container {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  max-width: 100%;
  flex-shrink: 0;
}

/* NOTE : pas de `content-visibility: auto` ici.
   Sur une image sans `contain-intrinsic-size`, cette propriete fait basculer
   l'element entre "rendu" et "ignore" selon sa proximite avec le viewport.
   Chaque bascule change la hauteur du document, donc la position de scroll,
   donc la proximite au viewport -> boucle d'oscillation. C'est exactement le
   clignotement observe : il apparait a une position de scroll precise, persiste
   si l'on s'arrete la, et disparait des que l'on s'en eloigne. */
/* Pas d'aspect-ratio impose ici : il forcerait le cadre a 220/280 et, combine
   a object-fit: cover, recadrerait et agrandirait toute photo dont le ratio
   reel differe. `height: auto` laisse le navigateur utiliser les proportions
   natives du fichier. La reservation de hauteur avant chargement vient des
   attributs width/height de la balise <img> (voir index.md), qui doivent
   correspondre aux dimensions reelles de l'image. */
.profile-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  user-select: none;
  pointer-events: none;
}

.photo-credit {
  font-size: 0.7rem;
  color: var(--muted-color);
  margin-top: 6px;
  text-align: center;
  line-height: 1.2;
  width: 100%;
}

/* --- 7. BOUTON CV --------------------------------------------------------- */
.btn-cv,
.btn-cv:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--link-color);
  border-radius: 4px;
  color: var(--link-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-cv::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 8. PIED DE PAGE ------------------------------------------------------ */
footer {
  width: 100%;
  padding: 40px 15px 20px;
  margin-top: 60px;
  text-align: center;
  border-top: 1px solid var(--rule-color);
}

/* Boites d'icones a dimensions fixes : la hauteur de la rangee ne depend plus
   des metriques de la police Font Awesome. Si le webfont arrive en retard, le
   glyphe de repli ne peut plus modifier la hauteur du document -> pas de
   reflow tardif au moment ou les icones entrent dans le viewport. */
.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
  width: 100%;
  min-height: var(--icon-box);
}

.social-links a,
.social-links a:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box);
  height: var(--icon-box);
  flex: 0 0 auto;
  font-size: 2.1rem;
  line-height: 1;
  color: #4a4a4a;
  text-decoration: none;
  /* Transition declaree ICI, une seule fois. Toute redeclaration plus bas dans
     le fichier l'ecraserait a specificite egale — c'est ce qui privait
     `transform` d'animation. Cette duree est celle du RETOUR au repos ;
     l'aller, plus vif, est defini sur :hover. */
  transition:
    color 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Icones SVG inline : hauteur fixe, donc aucun reflow et aucune police a
   attendre. La largeur suit le ratio propre a chaque tracé.

   Les hauteurs sont reglees UNE PAR UNE, car les tracés de Font Awesome ne
   remplissent pas leur boite de la meme facon : l'enveloppe n'en occupe que
   75 % en hauteur, contre 88 % pour la plupart et 97 % pour ORCID. A boite
   egale, l'enveloppe est donc dessinee 25 % plus petite que ses voisines.
   Ces valeurs egalisent la hauteur du DESSIN (26px), pas celle de la boite. */
/* height: 1em, largeur libre : c'est exactement la regle que Font Awesome
   applique a ses propres SVG (svg-with-js.css). La hauteur de tous les
   viewBox vaut 512 unites pour un cadratin, donc chaque icone retrouve la
   taille qu'elle avait avec la police, y compris ses proportions relatives.
   Les classes .ico-* restent disponibles si vous souhaitez retoucher une
   icone en particulier. */
.social-links svg {
  display: block;
  height: 1em;
  width: auto;
  fill: currentColor;
}

footer .container p {
  font-size: 0.85rem;
  color: var(--muted-color);
  margin: 0;
  padding: 0 10px;
  overflow-wrap: break-word;
  text-align: center;
}

/* --- 9. SURVOL (ecrans non tactiles uniquement) --------------------------- */
@media (hover: hover) and (pointer: fine) {
  main a:hover,
  main a:visited:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  a.site-title:hover { color: var(--link-color); }

  nav a:hover,
  nav a:visited:hover { color: var(--link-color); }

  nav a:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .lang-switch a:hover,
  .lang-switch a:visited:hover {
    color: var(--link-color);
    font-weight: 700;
  }

  details summary:hover b {
    color: var(--link-hover-color);
    text-decoration: underline;
  }

  details.section-deroulante summary:hover h2,
  details.section-simple summary:hover h2 { color: var(--link-hover-color); }

  .btn-cv:hover,
  .btn-cv:visited:hover {
    background-color: var(--link-color);
    color: #ffffff;
    text-decoration: none; /* sinon `main a:hover` souligne le bouton */
  }

  .social-links a:hover,
  .social-links a:visited:hover {
    color: var(--link-color);
    transform: translateY(-4px);
    transition-duration: 0.25s; /* aller un peu plus vif que le retour */
  }
}

/* --- 9 bis. ETAT ACTIF (retour tactile) ----------------------------------- */
/* Sur ecran tactile il n'y a pas de survol : ces regles rejouent exactement le
   meme rendu pendant l'appui du doigt. Elles ne sont volontairement PAS dans
   une media query : sur souris, elles ajoutent le meme retour au clic maintenu.
   Rappel : iOS n'applique :active au toucher que si la page ecoute un evenement
   touch — c'est le role du petit ecouteur enregistre dans base.njk. */

a {
  /* Teinte discrete sous le doigt, en complement des effets ci-dessous.
     Remplace le rectangle gris par defaut d'iOS. */
  -webkit-tap-highlight-color: rgba(11, 87, 208, 0.12);
}

main a:active,
main a:visited:active {
  color: var(--link-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.site-title:active { color: var(--link-color); }

nav a:active,
nav a:visited:active { color: var(--link-color); }

/* La barre sous le lien : c'est le meme ::after que pour l'etat courant,
   revele avec sa transition de 0.2s. */
nav a:active::after {
  opacity: 1;
  transform: scaleX(1);
}

.lang-switch a:active,
.lang-switch a:visited:active {
  color: var(--link-color);
  font-weight: 700;
}

details summary:active b {
  color: var(--link-hover-color);
  text-decoration: underline;
}

details.section-deroulante summary:active h2,
details.section-simple summary:active h2 { color: var(--link-hover-color); }

.btn-cv:active,
.btn-cv:visited:active {
  background-color: var(--link-color);
  color: #ffffff;
  text-decoration: none;
}

/* Icones du footer : couleur seule, sans le deplacement vertical du survol,
   qui serait desagreable sous le doigt. */
.social-links a:active,
.social-links a:visited:active { color: var(--link-color); }

/* --- 10. RESPONSIVE (MOBILE) ---------------------------------------------- */
@media (max-width: 650px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .header-content { gap: 0.8rem; }

  .header-top {
    justify-content: flex-start;
    gap: 0.8rem;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
  }

  nav li,
  nav a {
    white-space: nowrap;
    font-size: 0.88rem;
  }

  .intro-container {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }

  .profile-container { margin: 0 auto 0.5rem; }

  .intro-text {
    width: 100%;
    text-align: left;
  }

  .social-links { gap: 12px; }
}

/* --- 10 bis. IMPRESSION --------------------------------------------------- */
/* N'a aucun effet a l'ecran. On retire la navigation, qui n'est pas cliquable
   sur papier, et on revient a du noir sur blanc pour economiser l'encre.
   L'adresse des liens est ajoutee entre parentheses, sans quoi une liste de
   publications imprimee perd toutes ses references. */
@media print {
  header,
  footer,
  .skip-link { display: none; }

  html,
  body {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
  }

  main { padding: 0; }

  .container {
    max-width: none;
    padding: 0;
  }

  a,
  a:visited {
    color: #000000;
    text-decoration: underline;
  }

  /* Tout ce qui est bleu a l'ecran passe au noir : sur papier la couleur ne
     porte aucune information et coute de l'encre. */
  h1, h2,
  details summary b,
  details.section-deroulante summary h2 { color: #000000; }

  .btn-cv,
  .btn-cv:visited {
    color: #000000;
    border-color: #000000;
    text-decoration: none;
  }

  /* Adresse des liens externes uniquement : les liens internes ne servent a
     rien sur papier et alourdiraient la lecture. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  /* Les blocs replies sont deplies : on imprime tout le contenu. */
  details::details-content {
    block-size: auto;
    opacity: 1;
    content-visibility: visible;
  }

  details.section-deroulante summary::after { display: none; }

  details,
  details.section-deroulante {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Evite les titres orphelins en bas de page. */
  h1, h2 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .profile-container { break-inside: avoid; }
}

/* --- 11. MODE SOMBRE ------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  a { -webkit-tap-highlight-color: rgba(56, 189, 248, 0.16); }

  :root {
    --primary-color: #f1f5f9;
    --text-color: #e2e8f0;
    --bg-color: #0f172a;
    --header-bg: #1e293b;
    --title-color: #f8fafc;
    --link-color: #38bdf8;
    --link-hover-color: #7dd3fc;
    --muted-color: #94a3b8;
    --nav-color: #cbd5e1;
    --border-color: #334155;
    --rule-color: #334155;
    --accent-doux: #3f5a80;
    --panel-bg: #1e293b;
    --card-bg: #1e293b;
  }

  .lang-switch a,
  .lang-switch a:visited { color: var(--nav-color); }

  .lang-switch .separator { color: #64748b; }

  details i { color: #cbd5e1; }

  details.section-deroulante {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  details.section-deroulante[open] { border-color: #475569; }

  .social-links a,
  .social-links a:visited { color: var(--nav-color); }
}