/* =========================================================
   EINORA — Laboratoire de recherche
   Page unique. HTML & CSS uniquement, aucun JavaScript.
   Version nettoyée, cohérente, sémantique.
   ========================================================= */

:root{
  /* surfaces */
  --paper:      #eceff3;
  --surface:    #f9fbfc;
  --paper-deep: #e0e5eb;

  /* encres */
  --ink:        #1a1e23;
  --ink-soft:   #4f555c;
  --ink-faint:  #828990;

  /* traits */
  --line:        #dce1e8;
  --line-strong: #c4cbd4;

  /* marque */
  --brand:      #1d6e5b;
  --brand-ink:  #14513f;
  --brand-tint: #e3efeb;

  /* accents de discipline */
  --a-anthro: #8a4a66;
  --a-math:   #2a4a8c;
  --a-info:   #1d6e5b;

  /* accent courant */
  --accent:     var(--brand);
  --accent-ink: var(--brand-ink);

  /* typographies */
  --font-display:"Fraunces", Georgia, serif;
  --font-body:   "Spectral", Georgia, serif;
  --font-mono:   "IBM Plex Mono", monospace;

  --maxw: 1140px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.4rem;
}

.sec.anthro { --accent:var(--a-anthro); --accent-ink:#6d3a51; }
.sec.math   { --accent:var(--a-math);   --accent-ink:#1f3a70; }
.sec.info   { --accent:var(--a-info);   --accent-ink:var(--brand-ink); }

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem, 0.45vw + 0.94rem, 1.12rem);
  line-height:1.65; color:var(--ink); background:var(--paper);
  background-image:
    linear-gradient(rgba(35,45,60,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,45,60,0.030) 1px, transparent 1px);
  background-size:34px 34px;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:600; letter-spacing:-.015em; }
a{ color:var(--brand-ink); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--brand); }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
[id]{ scroll-margin-top:var(--header-h); }

/* eyebrow */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 1rem;
}
.eyebrow .tick{ color:var(--accent); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5ch;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em;
  text-transform:uppercase; padding:.72em 1.25em; border-radius:3px;
  border:1px solid transparent; transition:.2s ease; cursor:pointer;
}
.btn-primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-ink); border-color:var(--brand-ink); }

/* ---------- En-tête ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(236,239,243,0.9);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);
}
.bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; padding-block:.8rem; }
.wordmark{ display:flex; align-items:baseline; gap:.55ch; }
.wordmark .mark{ color:var(--brand); font-size:1.2rem; }
.wordmark .name{ font-family:var(--font-display); font-weight:700; font-size:1.32rem; }
.wordmark .tag{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); padding-left:.4rem; border-left:1px solid var(--line-strong); }
.nav-wrap{ display:flex; align-items:center; gap:1.4rem; }
.nav{ display:flex; gap:1.3rem; }
.nav a{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.nav a:hover{ color:var(--ink); }

/* ---------- Héro ---------- */
.hero{
  padding-block: clamp(3.5rem,10vw,7rem) clamp(2.5rem,6vw,4rem);
}
.hero-title{
  margin:0;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem,5.5vw,4.2rem);
  line-height:1.06;
  max-width:32ch;
}
.hero-title em{ font-style:italic; color:var(--brand-ink); }
.hero .sub{ margin-top:1.6rem; max-width:58ch; color:var(--ink-soft); }

/* ---------- Approche ---------- */
.approach{ padding-block: clamp(2rem,5vw,3rem); }
.approach .panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  padding: clamp(1.5rem,4vw,2.4rem);
}
.approach h2{ margin:0 0 1.4rem; }
.steps{
  margin:0;
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:auto auto;
  grid-auto-columns:minmax(0,1fr);
  gap:.45rem 2.5rem;
  counter-reset:step;
}
.steps .step{
  position:relative;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-ink);
  display:flex; align-items:center; gap:.6ch;
}
.steps .step::before{
  counter-increment:step;
  content:counter(step);
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.7em; height:1.7em; border-radius:50%;
  background:var(--brand); color:#fff;
  font-size:.65rem; font-weight:600; letter-spacing:0;
  flex-shrink:0;
  transition:transform .2s ease;
}
.steps .step:hover::before{ transform:scale(1.15); }
.steps .step:not(:last-of-type)::after{
  content:"";
  position:absolute;
  right:calc(-1.25rem - 3px);
  top:50%;
  translate:0 -50%;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid var(--line-strong);
}
.steps dd{ margin:0; color:var(--ink-soft); }
.steps .disc{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); }

/* ---------- Titres de rubrique (Théorie / Applications) ---------- */
/* CORRECTION 2 : centrage sur la même largeur que .wrap (sinon décalé à gauche au-delà de 1140px). */
.stage-title{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  max-width:var(--maxw);
  margin: clamp(2.5rem,6vw,4rem) auto 1rem;
  padding-inline:var(--pad);
}
.stage-title::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line-strong);
}

/* ---------- Sections domaines ---------- */
.sec{ position:relative; padding-block: clamp(2rem,5vw,3rem); }
.sec::before{
  content: attr(data-num);
  position:absolute;
  top:1.2rem;
  right:var(--pad);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(4rem,12vw,8.5rem);
  color:var(--accent);
  opacity:.07;
  pointer-events:none;
}
.sec > .wrap{ position:relative; z-index:1; }

/* Effet « kicker au-dessus / titre en dessous » par la TAILLE seule.
   L'ordre HTML est conservé : h2 (discipline) + eyebrow forment le sur-titre,
   et le h3 devient le grand titre visuel. */
.sec h2{ margin:0; font-size:1rem; font-weight:600; color:var(--accent-ink); letter-spacing:.01em; }
.sec .eyebrow{ color:var(--accent-ink); margin:.15rem 0 .9rem; }
.sec h3{ margin:0 0 .6rem; font-size:clamp(1.8rem,4.4vw,2.7rem); line-height:1.06; }
.sec .lede{ margin:0; color:var(--ink-soft); }

/* ---------- Tiles (dl) ---------- */
.areas{
  display:grid;
  gap:1.1rem;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
}

/* CORRECTION 3 : annuler la marge verticale par défaut du <dl> (sinon espacement irrégulier dans la grille). */
.tile{
  margin:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  padding:1.4rem;
  display:flex;
  flex-direction:column;
  transition:transform .26s ease, box-shadow .26s ease;
}
.tile:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px -18px rgba(28,29,24,.4);
  border-color:var(--accent);
}

.tile dt.n{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--ink-faint);
  margin-bottom:.7rem;
}

.tile dt.title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.28rem;
  margin:0 0 .5rem;
}

.tile dd{
  margin:0 0 1rem;
  color:var(--ink-soft);
}

.tile dd.kw{ margin:auto 0 0; }
.tile dd.kw ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.tile dd.kw li{
  font-family:var(--font-mono);
  font-size:.69rem;
  padding:.2rem .5rem;
  background:var(--paper-deep);
  border:1px solid var(--line-strong);
  border-radius:2px;
}

/* ---------- À propos ---------- */
.about{
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-block: clamp(3.5rem,8vw,5.5rem);
  background:linear-gradient(135deg, #1f2329 60%, #1a332d 100%);
  color:#d7dbe0;
  border-top:3px solid var(--brand);
}
.about h2{ color:#fff; margin:0 0 1.3rem; }
.about p{ margin:0 0 1.1rem; max-width:60ch; }
.about .cta{ margin-top:2rem; }
.about .btn-primary:hover{ background:#fff; color:var(--brand-ink); }

.about-grid{
  display:grid;
  gap:2rem 3rem;
  grid-template-columns:minmax(0,1.5fr) minmax(0,0.8fr);
  align-items:center;
}
.about-mark svg{ width:100%; max-width:240px; filter:drop-shadow(0 0 40px rgba(47,148,121,0.15)); }

/* ---------- Page légale ---------- */
.legal{ padding-block:clamp(2.5rem,6vw,4rem); }
.legal h1{ font-size:clamp(1.6rem,3.5vw,2.4rem); margin:0 0 .5rem; }
.legal h2{ font-size:1.4rem; margin:2.5rem 0 1rem; padding-top:2rem; border-top:1px solid var(--line); }
.legal h2:first-of-type{ border-top:none; padding-top:0; }
.legal h3{ font-size:1.05rem; margin:1.8rem 0 .5rem; }
.legal p{ max-width:72ch; margin:0 0 1rem; }
.legal .lede{ color:var(--ink-faint); font-family:var(--font-mono); font-size:.8rem; margin-bottom:2rem; }
.legal a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--brand); }

/* ---------- Pied de page ---------- */
.site-footer{
  background:var(--ink);
  color:#cfcfc6;
  padding-block:2.4rem;
}
.foot{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:1rem 2.5rem;
}
.foot .wm{
  font-family:var(--font-display);
  font-weight:700;
  color:#fff;
}
.foot .wm span{
  display:block;
  font-family:var(--font-mono);
  font-size:.7rem;
  color:#9a9a90;
}
.foot .meta{
  font-family:var(--font-mono);
  font-size:.74rem;
  color:#9a9a90;
}
.foot-legal{
  display:flex;
  gap:1.2rem;
  font-family:var(--font-mono);
  font-size:.72rem;
}
.foot-legal a{ color:#9a9a90; text-decoration:none; }
.foot-legal a:hover{ color:#cfcfc6; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .about-grid{ grid-template-columns:1fr; }
  /* approche : repli en liste verticale */
  .steps{ grid-auto-flow:row; grid-template-rows:none; grid-auto-columns:auto; gap:0; }
  .steps .step{ margin-top:1.2rem; }
  .steps .step:first-of-type{ margin-top:0; }
  .steps .step::after{ display:none; }
}
@media (max-width:560px){
  .wordmark .tag{ display:none; }
}