
:root {
  --bg: #050912;
  --bg-soft: #09111f;
  --panel: rgba(14, 26, 43, .72);
  --panel-strong: rgba(15, 31, 52, .92);
  --line: rgba(180, 216, 255, .16);
  --text: #edf5ff;
  --muted: #9cb0c6;
  --accent: #0fcfff;      /* N° 37 : cyan unique, identique a la page d'accueil */
  --accent-2: #4bdcff;    /* N° 37 : survol unique */
  --danger-soft: #ffc7c7;
  --max: 1180px;
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 8%, rgba(29, 96, 151, .13), transparent 28rem),
    linear-gradient(180deg, #030710 0%, #07101c 48%, #050912 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  letter-spacing: .006em;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-2); }
img { max-width: 100%; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 9, 17, .82); backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 28px; justify-content: space-between; }
.brand { display: inline-flex; flex-direction: column; line-height: 1.05; min-width: 205px; }
.brand strong { text-transform: uppercase; letter-spacing: .17em; font-size: .86rem; }
.brand span { color: var(--muted); font-size: .68rem; margin-top: 7px; letter-spacing: .08em; }
.nav { display: flex; gap: 21px; align-items: center; font-size: .88rem; color: #c8d7e7; }
.nav a.active { color: white; }
.lang { display:flex; gap:7px; align-items:center; font-size:.78rem; letter-spacing:.08em; white-space:nowrap; }
.lang a.active { color: white; font-weight: 700; }
.menu-btn { display:none; background:transparent; border:1px solid var(--line); color:white; border-radius:12px; padding:8px 10px; }
h1 { font-size: clamp(3.6rem, 8vw, 7.6rem); line-height:.9; letter-spacing:-.055em; margin:.18em 0 .28em; max-width: 760px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 19px; border-radius:999px; border:1px solid var(--line); font-weight:650; font-size:.9rem; transition:.2s ease; }
.btn.primary { background:#e9f6ff; color:#06101a; border-color:#e9f6ff; }
.btn:hover { transform: translateY(-1px); border-color: rgba(189,226,255,.45); }

.section { padding: 92px 0; border-bottom:1px solid var(--line); }
.section.tight { padding:70px 0; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; }
h2 { font-size: clamp(2.2rem, 4.8vw, 4.7rem); line-height:1.02; letter-spacing:-.035em; margin:0; }
h3 { font-size:1.18rem; line-height:1.2; letter-spacing:-.01em; margin:0 0 10px; }
.card { background:linear-gradient(180deg, rgba(17,32,53,.78), rgba(9,17,30,.7)); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.card p:last-child { margin-bottom:0; }
.rule { height:1px; background:var(--line); margin:28px 0; }
.quote { margin:28px 0 0; padding:24px 28px; border-left:2px solid var(--accent); background:rgba(22,49,74,.36); color:#eaf6ff; border-radius:0 16px 16px 0; font-weight:650; }
.list-clean { padding-left:1.2em; margin:.4em 0 0; }
.list-clean li { margin:.45em 0; color:#cfdfeb; }
.page-hero { padding:100px 0 68px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(15,39,65,.22),transparent); }
.page-hero h1 { font-size:clamp(3.1rem,7vw,6.5rem); }
.anchor-nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.anchor-nav a { padding:7px 11px; border:1px solid var(--line); border-radius:999px; color:#cfe4f5; font-size:.78rem; }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:26px; }
form { display:grid; gap:14px; }
label { display:grid; gap:7px; color:#c9d9e7; font-size:.86rem; }
input, textarea, select { width:100%; background:#07111e; color:white; border:1px solid var(--line); border-radius:12px; padding:13px 14px; font:inherit; }
textarea { min-height:150px; resize:vertical; }
button.btn { cursor:pointer; font:inherit; }

.site-footer { padding:52px 0 28px; background:#03070d; }
.footer-grid { display:grid; grid-template-columns:1fr 1.1fr .9fr; gap:28px; align-items:start; }
.footer-nav { display:flex; flex-wrap:wrap; gap:10px 14px; color:#b8cad9; font-size:.82rem; }
.footer-side { display:grid; gap:9px; justify-items:start; color:#a8bac8; font-size:.78rem; }
.legal-muted { color:#8395a5; }
.copyright { border-top:1px solid var(--line); margin-top:32px; padding-top:20px; color:#7f93a5; font-size:.75rem; }

@media (max-width: 980px) {
  .hero-grid, .section-head, .contact-grid, .pub-card { grid-template-columns:1fr; }
  .nav { position:absolute; top:100%; left:0; right:0; padding:22px 20px 26px; background:rgba(4,9,17,.98); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; display:none; }
  .nav.open { display:flex; }
  .menu-btn { display:block; margin-left:auto; }
}
@media (max-width: 640px) {
  .container { width:min(calc(100% - 26px),var(--max)); }
  h1 { font-size:clamp(3rem,17vw,5.1rem); }
  .grid-5,.grid-4,.grid-3,.grid-2,.footer-grid { grid-template-columns:1fr; }
  .section { padding:68px 0; }
  .page-hero { padding:78px 0 48px; }
  .brand span { display:none; }
  .brand { min-width:auto; }
  .lang { font-size:.72rem; }
}

.content-prose { max-width: 980px; }
.content-prose h2 { margin: 0 0 20px; }
.content-prose h3 { margin-top: 32px; color: #f1f8ff; }
.content-prose h4 { margin-top: 24px; }
.content-prose p { color: #c9d9e7; max-width: 900px; }
.content-prose p strong { color: #f1f8ff; }
.content-prose code { color: #ccecff; background: rgba(88,170,228,.08); padding:.08em .3em; border-radius:5px; }
.content-prose > .rule { margin: 36px 0; }

/* [N° 11] Systemes de design abandonnes supprimes : HOME V2, HOME V2.1 et
   HOME REFERENCE LOCKUP (classes .home-v2, .home-*, .hs-*, .home-fallback-*).
   Aucune page ne les utilisait. 677 lignes de CSS mort retirees. */

/* =========================================================
   FINAL CONSISTENCY PASS — internal pages
   ========================================================= */
body:not(.home-reference-page) {
  overflow-x: hidden;
}
body:not(.home-reference-page) .container {
  width: min(calc(100% - 48px), 1160px);
}
body:not(.home-reference-page) .site-header {
  background: rgba(3, 8, 15, .96);
  backdrop-filter: blur(12px);
}
body:not(.home-reference-page) .nav-wrap {
  min-height: 72px;
  gap: 20px;
}
body:not(.home-reference-page) .brand {
  min-width: 190px;
}
body:not(.home-reference-page) .brand strong {
  font-size: .78rem;
  letter-spacing: .13em;
}
body:not(.home-reference-page) .brand span {
  margin-top: 5px;
  font-size: .58rem;
  line-height: 1.3;
}
body:not(.home-reference-page) .nav {
  gap: 15px;
  font-size: .76rem;
  white-space: nowrap;
}
body:not(.home-reference-page) .lang {
  font-size: .72rem;
}
body:not(.home-reference-page) .page-hero {
  padding: 52px 0 42px;
  background:
    radial-gradient(circle at 78% 16%, rgba(34, 109, 163, .12), transparent 23rem),
    linear-gradient(180deg, rgba(10, 27, 46, .42), rgba(4, 10, 18, .08));
}
body:not(.home-reference-page) .page-hero .eyebrow {
  margin-bottom: 9px;
  font-size: .68rem;
  letter-spacing: .18em;
}
body:not(.home-reference-page) .page-hero h1 {
  margin: 0 0 24px;
  max-width: 900px;
  font-size: clamp(2.65rem, 4.7vw, 4rem);
  line-height: .98;
  letter-spacing: -.045em;
}
body:not(.home-reference-page) .anchor-nav {
  gap: 8px;
  margin-top: 0;
}
body:not(.home-reference-page) .anchor-nav a {
  padding: 7px 11px;
  font-size: .72rem;
  line-height: 1.2;
  background: rgba(5, 14, 24, .45);
}
body:not(.home-reference-page) .section {
  padding: 64px 0;
}
/* N° 2 — Le bloc portait a la fois .container (largeur 1160 px, centre) et
   .content-prose (max-width 940 px). Le max-width le retrecissait ET le
   recentrait, creant un decalage de 110 px avec l'en-tete et le titre de page.
   Le conteneur conserve desormais sa largeur et son centrage ; seule la
   largeur de ligne des enfants est bridee, ce qui preserve le confort de
   lecture sans casser l'alignement vertical de la page. */
body:not(.home-reference-page) .content-prose { max-width: none; }
body:not(.home-reference-page) .content-prose > * { max-width: 940px; }
body:not(.home-reference-page) .content-prose h2 {
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
body:not(.home-reference-page) .content-prose h3 {
  margin: 30px 0 9px;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.25;
  letter-spacing: .015em;
  color: #f0f7ff;
}
body:not(.home-reference-page) .content-prose p,
body:not(.home-reference-page) .content-prose li {
  font-size: .98rem;
  line-height: 1.72;
}
body:not(.home-reference-page) .content-prose > p:first-of-type {
  font-size: 1.06rem;
}
body:not(.home-reference-page) .publication-title {
  margin-top: 8px;
  max-width: 900px;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.12;
  text-transform: none;
}
body:not(.home-reference-page) .publication-subtitle {
  margin-top: -8px;
  color: #b9cadb;
  font-style: italic;
}
body:not(.home-reference-page) .contact-grid {
  grid-template-columns: minmax(0,.95fr) minmax(340px,1.05fr);
  gap: 34px;
}
body:not(.home-reference-page) .card {
  padding: 24px;
}
body:not(.home-reference-page) .site-footer {
  padding: 40px 0 22px;
}
body:not(.home-reference-page) .footer-grid {
  gap: 22px;
}

/* Homepage: desktop fills the viewport in BOTH dimensions. The validated
   reference is intentionally scaled to the screen rather than rebuilt from crops. */
.home-reference-desktop {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
}
.home-reference-stage {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
}
.home-reference-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

@media (max-width: 1100px) {
  body:not(.home-reference-page) .nav-wrap { min-height: 68px; }
  body:not(.home-reference-page) .brand span { display: none; }
  body:not(.home-reference-page) .brand { min-width: 168px; }
  body:not(.home-reference-page) .nav { gap: 10px; font-size: .69rem; }
}
@media (max-width: 900px) {
  body:not(.home-reference-page) .container { width: min(calc(100% - 30px), 1160px); }
  body:not(.home-reference-page) .page-hero { padding: 42px 0 34px; }
  body:not(.home-reference-page) .page-hero h1 { font-size: clamp(2.5rem, 11vw, 4rem); }
  body:not(.home-reference-page) .section { padding: 48px 0; }
  body:not(.home-reference-page) .contact-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   LOT A — CORRECTIFS ADDITIFS (audit 2026-08-08)
   Bloc purement additif : n'écrase aucune règle existante.
   N° 30 focus clavier · N° 29 ancres · N° 43 mouvement réduit
   N° 35 cibles tactiles · contre-audit b (impression)
   ========================================================= */

/* --- N° 30 : indicateur de focus visible (WCAG 2.4.7) --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #4bdcff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- N° 30 : lien d'évitement --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 999;
  width: auto;
  height: auto;
  padding: 10px 18px;
  border-radius: 8px;
  background: #e9f6ff;
  color: #06101a;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
}

/* --- N° 29 : les ancres ne doivent plus passer sous l'en-tête collant --- */
section[id] { scroll-margin-top: 96px; }
@media (max-width: 900px) { section[id] { scroll-margin-top: 84px; } }

/* --- N° 35 : surface tactile ≥ 44 px.
   Agrandissement VERTICAL uniquement : aucune largeur n'est modifiée,
   donc aucun risque de débordement horizontal (cf. régression détectée
   par la suite de non-régression sur la première version de ce bloc). --- */
@media (max-width: 980px) {
  .lang a,
  .ph-legal a,
  .footer-nav a,
  .footer-side a,
  .nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .brand { min-height: 44px; justify-content: center; }
  /* espacement horizontal des deux libellés de langue : satisfait le
     critère d'espacement de WCAG 2.5.8. La place nécessaire est reprise
     sur l'espacement de la barre d'en-tête, pas ajoutée à sa largeur. */
  body:not(.home-reference-page) .nav-wrap { gap: 12px; }
  .lang { gap: 3px; }
  .lang a { padding-inline: 6px; }
}
@media (max-width: 360px) {
  body:not(.home-reference-page) .nav-wrap { gap: 8px; }
  .lang { gap: 2px; }
  .lang a { padding-inline: 4px; }
}

/* --- N° 43 : respect de prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Contre-audit b : feuille d'impression --- */
@media print {
  html, body, body:not(.home-reference-page) {
    background: #fff !important;
    color: #111 !important;
  }
  .site-header, .site-footer, .anchor-nav, .menu-btn, .skip-link,
  .ph-header, .ph-footer, .ph-hero { display: none !important; }
  .content-prose p, .content-prose li { color: #222 !important; }
  .content-prose h2, .content-prose h3, h1 { color: #000 !important; }
  .container, .content-prose { width: 100% !important; max-width: 100% !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
  .section { padding: 18px 0 !important; border: 0 !important; }
}

/* =========================================================
   LOT D — N° 3 : unification du bandeau supérieur
   Les pages internes reprennent le logo de l'accueil à la place
   du bloc texte, et l'ordre du menu est désormais identique.
   ========================================================= */
body:not(.home-reference-page) .site-header .brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  padding-block: 4px;
}
body:not(.home-reference-page) .site-header .brand img {
  display: block;
  width: clamp(196px, 19vw, 250px);
  height: auto;
  aspect-ratio: 382 / 76;
  object-fit: contain;
}
@media (max-width: 1100px) {
  body:not(.home-reference-page) .site-header .brand img { width: 190px; }
}
@media (max-width: 900px) {
  body:not(.home-reference-page) .site-header .brand img { width: min(210px, 48vw); }
}
@media (max-width: 360px) {
  body:not(.home-reference-page) .site-header .brand img { width: min(168px, 46vw); }
}

/* N° 3 (suite) — le menu des pages internes reprend le traitement
   typographique de celui de l'accueil : capitales et interlettrage. */
body:not(.home-reference-page) .site-header .nav {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  gap: 17px;
}
body:not(.home-reference-page) .lang { text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 1240px) {
  body:not(.home-reference-page) .site-header .nav { font-size: .67rem; gap: 12px; letter-spacing: .04em; }
}
@media (max-width: 1100px) {
  body:not(.home-reference-page) .site-header .nav { font-size: .63rem; gap: 9px; letter-spacing: .03em; }
}
@media (max-width: 980px) {
  body:not(.home-reference-page) .site-header .nav {
    font-size: .82rem; letter-spacing: .08em; gap: 0; }
}

/* =========================================================
   N° 17 — hiérarchie des titres
   Les niveaux corrigés ci-dessous conservent leur apparence :
   un niveau de titre exprime une structure, pas une taille.
   ========================================================= */
body:not(.home-reference-page) .content-prose h2.h-section,
body:not(.home-reference-page) .card h2.h-section {
  margin: 30px 0 9px;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.25;
  letter-spacing: .015em;
  color: #f0f7ff;
  font-weight: 700;
}
body:not(.home-reference-page) .card h2.h-section { margin-top: 0; }
body:not(.home-reference-page) .content-prose > .h-section:first-of-type { margin-top: 0; }

/* Le statut de publication n'est plus un titre : même rendu, plus d'!important
   nécessaire puisqu'il n'entre plus en conflit avec les règles h2/h3. */
body:not(.home-reference-page) p.publication-status {
  margin: 34px 0 0;
  color: var(--accent);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
body:not(.home-reference-page) p.publication-label {
  margin: 22px 0 -6px;
  color: #f1f8ff;
}
body:not(.home-reference-page) p.status-label {
  margin: 4px 0 10px;
  color: var(--accent);
  font-size: .74rem;
  letter-spacing: .14em;
}


/* =========================================================
   N° 3 (suite) — calage horizontal du bandeau
   L'en-tete et le pied de page des pages internes utilisaient un conteneur
   centre de 1160 px : le logo demarrait a 140 px alors qu'il demarre a 31 px
   sur la page d'accueil. Les deux bandeaux partagent desormais le meme calage.
   ========================================================= */
body:not(.home-reference-page) .site-header > .container,
body:not(.home-reference-page) .site-footer > .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: clamp(18px, 2.15vw, 34px);
}
@media (max-width: 900px) {
  body:not(.home-reference-page) .site-header > .container,
  body:not(.home-reference-page) .site-footer > .container { padding-inline: 18px; }
}
@media (max-width: 360px) {
  body:not(.home-reference-page) .site-header > .container,
  body:not(.home-reference-page) .site-footer > .container { padding-inline: 12px; }
}

/* --- Formulaire : retour visible apres envoi --- */
.form-status {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(15,207,255,.35);
  border-radius: 12px;
  background: rgba(15,207,255,.07);
  color: #d9ecf8;
  font-size: .84rem;
  line-height: 1.5;
}
.notice { font-size: .82rem; color: var(--muted); }

/* --- Consentement RGPD du formulaire --- */
.consent { display:flex; gap:10px; align-items:flex-start; margin:2px 0 4px; font-size:.82rem; line-height:1.5; color:var(--muted); }
.consent input { width:18px; height:18px; min-width:18px; margin-top:2px; accent-color:var(--accent); }
.consent a { color:var(--accent); text-decoration:underline; }
body:not(.home-reference-page) .legal-muted a { color:inherit; text-decoration:none; }
body:not(.home-reference-page) .legal-muted a:hover { color:var(--accent); text-decoration:underline; }

/* --- LinkedIn dans le pied de page des pages internes --- */
.footer-social { margin-top: 10px; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; color: #a8bac8; font-size: .8rem; text-decoration: none;
}
.footer-social a:hover { color: var(--accent); }

/* --- Lien ORCID --- */
.orcid-link {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: -.16em; color: var(--muted);
  font-size: .78rem; letter-spacing: .01em; text-decoration: none;
  white-space: nowrap;
}
.orcid-link:hover { color: var(--accent); }
.orcid-link svg { flex: 0 0 auto; }
