/* ==========================================================================
   arsenemekinian.fr — feuille de style unique
   Direction « B · Éditorial ». Polices auto-hébergées (aucun appel externe :
   ni Google Fonts, ni CDN, ni traceur — conformité RGPD par construction).
   Une seule feuille pour tout le site : la modifier ici change tout le site.
   ========================================================================== */

/* --- Polices (Source Serif 4 / Source Sans 3, SIL Open Font License) ----- */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/source-serif-4-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/source-sans-3-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2");}

/* --- Jetons de style ----------------------------------------------------- */
/* Charte du 5 septembre 2026. Six couleurs, plus un neutre fabriqué par
   dilution du powder blue dans du blanc (le « bleu papier »), et le blanc.
   Règle de proportion, direction « Signature » :
   blanc pour la zone de lecture, denim pour la colonne latérale et le texte,
   cerulean pour les titres et les liens, powder pour les encadrés, key lime
   uniquement pour le bandeau de famille et le repère de navigation actif. */
:root{
  /* les six couleurs de la planche, telles quelles */
  --c-powder:#B2CEE2;
  --c-olympic:#6299D0;
  --c-cerulean:#3A4F99;
  --c-denim:#13233D;
  --c-lime:#D1D871;
  --c-papier:#E4EEF5;      /* powder dilué à 35 % — le neutre clair */

  /* rôles */
  --paper:#FFFFFF;                   /* zone de lecture */
  --paper-raised:#FFFFFF;
  --paper-sunk:var(--c-papier);      /* surfaces creusées, zébrage */
  --paper-band:var(--c-papier);
  --ink:var(--c-denim);              /* texte courant */
  --ink-title:var(--c-cerulean);
  --ink-soft:#3C4761;
  --muted:#5B6880;
  --rule:#CBDCEA;
  --rule-soft:#E4EEF5;
  --rule-strong:var(--c-cerulean);
  --accent:var(--c-cerulean);        /* liens */
  --accent-hover:#2C3D7A;
  --lime:var(--c-lime);

  /* colonne latérale */
  --sb-bg:var(--c-denim);
  --sb-ink:#B2CEE2;
  --sb-strong:#FFFFFF;
  --sb-soft:#8FB3D4;

  --footer-band:var(--c-denim);
  --footer-ink:#B2CEE2;

  --serif:"Source Serif 4","Iowan Old Style",Charter,Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gut:clamp(1.25rem,3.4vw,3rem);
  --maxw:60rem;
  --sbw:15.5rem;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131F33; --paper-raised:#1B2A44; --paper-sunk:#1B2A44;
    --paper-band:#1B2A44;
    --ink:#DCE7F2; --ink-title:#B2CEE2; --ink-soft:#B6C6D9; --muted:#8FA3BC;
    --rule:#2E3F5C; --rule-soft:#20304B; --rule-strong:#3E5680;
    --accent:#9FC0E4; --accent-hover:#C6DCF2;
    --sb-bg:#0A1120; --sb-ink:#B2CEE2; --sb-strong:#FFFFFF; --sb-soft:#7C9CBD;
    --footer-band:#0A1120; --footer-ink:#B2CEE2;
  }
}

/* --- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:clamp(1.02rem,0.98rem + 0.2vw,1.14rem);
  line-height:1.62;font-kerning:normal;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb,currentColor 32%,transparent);transition:color .15s,text-decoration-color .15s;}
a:hover{color:var(--accent-hover);text-decoration-color:currentColor;}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0;}
::selection{background:var(--c-lime);color:var(--c-denim);}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.stage main > .band:first-child .wrap{padding-top:.4rem;}
.skip{position:absolute;left:-9999px;}
.skip:focus{position:static;display:block;padding:.6rem 0;font-family:var(--sans);}

/* --- Charpente : colonne latérale + scène ------------------------------- */
.shell{display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);min-height:100vh;}

.sidebar{background:var(--sb-bg);color:var(--sb-ink);
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:clamp(1.6rem,2.4vw,2.2rem) clamp(1.1rem,1.7vw,1.5rem);
  position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;}
.sb-name{display:block;color:var(--sb-strong);font-family:var(--serif);
  font-size:clamp(1.5rem,1.1rem + .9vw,1.85rem);line-height:1.06;letter-spacing:-.016em;
  text-decoration:none;}
.sb-name:hover{color:var(--c-lime);}
.sb-role{font-family:var(--sans);font-size:.79rem;line-height:1.5;color:var(--sb-soft);
  margin:.85rem 0 0;}
.sb-nav{margin-top:1.9rem;font-family:var(--sans);font-size:.92rem;display:flex;flex-direction:column;gap:.05rem;}
.sb-nav a{color:var(--sb-ink);text-decoration:none;padding:.3rem 0 .3rem .7rem;
  border-left:3px solid transparent;transition:color .15s,border-color .15s;}
.sb-nav a:hover{color:var(--sb-strong);border-left-color:var(--sb-soft);}
.sb-nav a[aria-current]{color:var(--c-lime);border-left-color:var(--c-lime);font-weight:600;}
.sb-foot{font-family:var(--sans);font-size:.76rem;line-height:1.7;color:var(--sb-soft);}
.sb-foot a{color:var(--sb-soft);text-decoration:none;}
.sb-foot a:hover{color:var(--sb-strong);}
.sb-lang{display:flex;gap:.8rem;margin-bottom:.7rem;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;}
.sb-lang [aria-current]{color:var(--sb-strong);}

.stage{display:flex;flex-direction:column;min-width:0;background:var(--paper);}
.stage > main{flex:1 0 auto;}

/* Bandeau de famille, en tête des pages de domaine */
.pageband{background:var(--c-lime);color:var(--c-denim);}
.pageband .wrap{padding-block:.72rem;font-family:var(--sans);font-size:.75rem;
  letter-spacing:.15em;text-transform:uppercase;font-weight:600;}

@media (max-width:60rem){
  .shell{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;flex-direction:column;gap:1.1rem;
    padding:1.3rem var(--gut) 1.5rem;}
  .sb-name{font-size:1.5rem;}
  .sb-nav{margin-top:1rem;flex-direction:row;flex-wrap:wrap;gap:.15rem 1.1rem;font-size:.88rem;}
  .sb-nav a{padding:.2rem 0;border-left:0;border-bottom:2px solid transparent;}
  .sb-nav a:hover{border-left:0;border-bottom-color:var(--sb-soft);}
  .sb-nav a[aria-current]{border-left:0;border-bottom-color:var(--c-lime);}
  .sb-foot{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline;}
  .sb-lang{margin-bottom:0;}
}

/* --- Grille éditoriale --------------------------------------------------- */
.cols{display:grid;grid-template-columns:2fr 1fr;gap:clamp(1.8rem,4vw,3.4rem);}
.rail{border-left:1px solid var(--rule);padding-left:clamp(1.2rem,2.4vw,2rem);}
@media (max-width:56rem){
  .cols{grid-template-columns:1fr;}
  .rail{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:1.6rem;}
}

section.band{padding-block:clamp(2.2rem,4vw,3.2rem);border-bottom:1px solid var(--rule);}
section.band:last-of-type{border-bottom:0;}

.kicker{font-family:var(--sans);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-title);font-weight:600;display:inline-block;
  border-bottom:3px solid var(--lime);padding-bottom:.2rem;}
.section-title{font-family:var(--sans);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-title);font-weight:600;padding-bottom:.7rem;border-bottom:1px solid var(--rule-strong);
  margin:2.6rem 0 1.4rem;}
.section-title:first-child{margin-top:0;}
.meta{font-family:var(--sans);font-size:.85rem;color:var(--muted);}
.meta a{text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);}

/* --- Titres et texte ----------------------------------------------------- */
h1,h2,h3,h4{color:var(--ink-title);font-weight:400;letter-spacing:-.012em;line-height:1.18;text-wrap:balance;margin:0;}
h1{font-size:clamp(1.95rem,1.3rem + 2.4vw,2.9rem);margin-bottom:1.1rem;}
h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,1.85rem);margin-top:2.6rem;}
h3{font-size:1.18rem;margin-top:1.9rem;font-weight:600;}
p{margin:0 0 1.1em;text-wrap:pretty;}
.lede{font-size:clamp(1.1rem,1rem + .4vw,1.26rem);line-height:1.52;color:var(--ink-soft);}
.prose{max-width:38rem;}
.prose ul,.prose ol{padding-left:1.15rem;margin:0 0 1.2em;}
.prose li{margin-bottom:.45em;}
.prose h2:first-child{margin-top:0;}
blockquote{margin:1.6rem 0;padding-left:1.1rem;border-left:3px solid var(--c-powder);color:var(--ink-soft);}
small,.small{font-size:.85rem;}
em{font-style:italic;}

/* --- La une -------------------------------------------------------------- */
.lead-title{font-size:clamp(1.75rem,1.1rem + 2.6vw,2.7rem);line-height:1.13;margin:.7rem 0 1.15rem;}
.lead-title a{text-decoration:none;}
.lead-title a:hover{color:var(--accent);}
.figure-slot{margin-top:1.6rem;aspect-ratio:16/9;background:var(--paper-band);
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.portrait{width:100%;max-width:15rem;aspect-ratio:4/5;object-fit:cover;background:var(--paper-sunk);
  border:1px solid var(--rule);}
.portrait-slot{width:100%;max-width:15rem;aspect-ratio:4/5;background:var(--paper-sunk);
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

/* --- Listes d'articles --------------------------------------------------- */
.entries{list-style:none;margin:0;padding:0;}
.entries li{padding-block:1.35rem;border-bottom:1px solid var(--rule-soft);}
.entries li:first-child{padding-top:0;}
.entries li:last-child{border-bottom:0;}
.entries .t{font-size:1.32rem;line-height:1.28;}
.entries .t a{text-decoration:none;}
.entries .t a:hover{color:var(--accent);}
.entries .m{margin-top:.4rem;}

/* --- Grille des domaines ------------------------------------------------- */
.domains{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  gap:0;border-top:1px solid var(--rule);}
.domain{padding:1.35rem 1.4rem 1.5rem;border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);text-decoration:none;display:block;
  transition:background .15s;}
.domain:last-child{border-right:1px solid var(--rule);}
.domain:hover{background:var(--paper-sunk);color:inherit;}
.domain .dt{color:var(--ink-title);}
.domain:hover .dt{color:var(--accent-hover);}
.dt{font-size:1.1rem;line-height:1.28;}
.dd{font-family:var(--sans);font-size:.84rem;color:var(--muted);margin-top:.4rem;line-height:1.45;}
.family{font-family:var(--sans);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:2.2rem 0 .9rem;}

/* --- Bloc « En bref » (langue claire) et schémas -------------------------- */
.enbref{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:9px;
  padding:1.25rem 1.5rem 1.35rem;margin:2.2rem 0 0;font-family:var(--sans);}
.enbref b{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-title);margin-bottom:.75rem;}
.enbref ul{list-style:none;margin:0;padding:0;font-size:.98rem;line-height:1.55;}
.enbref li{padding-left:1.1rem;position:relative;margin-bottom:.5rem;}
.enbref li:last-child{margin-bottom:0;}
.enbref li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;
  border-radius:50%;background:var(--c-cerulean);}

.schema{margin:3.2rem 0 3.4rem;}
.schema svg{display:block;width:100%;height:auto;
  border:1px solid var(--rule);border-radius:10px;background:var(--paper-raised);}
.schema figcaption{margin-top:.9rem;font-family:var(--sans);font-size:.84rem;
  color:var(--muted);line-height:1.5;}
@media (prefers-color-scheme:dark){
  .schema svg{opacity:.93;}
}
@media print{ .schema{break-inside:avoid;} }

/* --- Sections numérotées (pages de domaine) ------------------------------ */
.numbered{counter-reset:sec;}
.numbered > h2{counter-increment:sec;display:grid;grid-template-columns:3.4rem 1fr;
  gap:1rem;align-items:baseline;margin-top:3rem;margin-bottom:.85rem;}
.numbered > h2::before{content:counter(sec,decimal-leading-zero);
  font-family:var(--sans);font-weight:700;font-size:2.1rem;line-height:1;
  color:var(--c-powder);letter-spacing:-.03em;}
.numbered > h2:first-child{margin-top:0;}
@media (max-width:40rem){
  .numbered > h2{grid-template-columns:2.5rem 1fr;gap:.7rem;}
  .numbered > h2::before{font-size:1.6rem;}
}

/* --- Tableaux ------------------------------------------------------------ */
.table-scroll{overflow-x:auto;margin:1.6rem 0;}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.9rem;}
th,td{text-align:left;vertical-align:top;padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--rule-soft);}
th{font-weight:600;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-title);
  border-bottom:1px solid var(--rule-strong);}
tbody tr:nth-child(even){background:var(--paper-sunk);}

/* --- Références ---------------------------------------------------------- */
.refs{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.9rem;line-height:1.5;}
.refs li{padding-block:.65rem;border-bottom:1px solid var(--rule-soft);}
.refs li:last-child{border-bottom:0;}
.refs .src{color:var(--muted);}
.refs a{color:var(--accent);}

/* --- Références aérées, badge de citations, repères ---------------------- */
.refs li{padding-block:1.05rem;}
.refs .src{display:block;color:var(--muted);margin-top:.25rem;font-size:.84rem;}
.citedby{display:inline-block;margin-top:.5rem;font-size:.76rem;font-weight:600;
  letter-spacing:.04em;text-decoration:none;color:var(--ink-title);
  background:var(--paper-sunk);border:1px solid var(--rule);border-radius:100px;
  padding:.2rem .7rem .25rem;transition:background .15s,border-color .15s;}
.citedby:hover{background:var(--c-lime);border-color:var(--c-denim);color:var(--c-denim);}

.reperes{margin:3.2rem 0 0;padding:1.6rem 1.8rem 1.7rem;
  background:var(--paper-sunk);border-radius:10px;border:1px solid var(--rule);}
.reperes h2{margin:0;font-family:var(--sans);font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-title);font-weight:600;}
.reperes .meta{margin:.5rem 0 1.2rem;}
.reperes ul{list-style:none;margin:0;padding:0;}
.reperes li{padding-block:.85rem;border-top:1px solid var(--rule);}
.reperes li:first-child{border-top:0;padding-top:0;}
.reperes .rk{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.28rem;}
.reperes a{font-size:1.02rem;line-height:1.4;}

/* --- Encarts ------------------------------------------------------------- */
.note{background:var(--paper-sunk);border:1px solid var(--rule);border-left:3px solid var(--lime);padding:1.15rem 1.3rem;
  font-family:var(--sans);font-size:.9rem;line-height:1.55;margin:1.8rem 0;}
.note strong{font-weight:600;}
.todo{border-left:3px solid var(--c-powder);background:transparent;padding-left:1rem;
  font-family:var(--sans);font-size:.86rem;color:var(--muted);margin:1.4rem 0;}
.empty{font-family:var(--sans);font-size:.92rem;color:var(--muted);
  border:1px dashed var(--c-powder);background:var(--paper-sunk);padding:2rem 1.4rem;text-align:center;}

/* --- Formulaire (lettre) ------------------------------------------------- */
.form{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0 .6rem;font-family:var(--sans);}
.form input[type=email]{flex:1 1 18rem;padding:.72rem .85rem;border:1px solid var(--rule-strong);
  background:var(--paper-raised);color:var(--ink);font:inherit;font-size:.95rem;border-radius:0;}
.form button{padding:.72rem 1.35rem;border:1px solid var(--c-cerulean);background:var(--c-cerulean);
  color:#fff;font:inherit;font-size:.95rem;cursor:pointer;border-radius:0;}
.form button:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;}

/* --- Fil d'Ariane -------------------------------------------------------- */
.crumbs{font-family:var(--sans);font-size:.82rem;color:var(--muted);padding-top:1.9rem;}
.crumbs a{text-decoration:none;}
.crumbs a:hover{color:var(--accent);}

/* --- Pied de page -------------------------------------------------------- */
footer.site{border-top:3px solid var(--c-cerulean);margin-top:3.5rem;background:var(--footer-band);color:var(--footer-ink);}
footer.site .wrap{padding-block:2.6rem 3rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem;}
footer.site h2{font-family:var(--sans);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--footer-ink);opacity:.75;font-weight:600;margin:0 0 .8rem;}
footer.site ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.9rem;line-height:1.9;}
footer.site a{text-decoration:none;}
footer.site a:hover{color:var(--c-lime);text-decoration-color:currentColor;}
.colophon{border-top:1px solid rgba(178,206,226,.22);font-family:var(--sans);font-size:.8rem;color:var(--footer-ink);opacity:.85;}
.colophon .wrap{padding-block:1.2rem 2rem;}
.colophon p{margin:0 0 .4em;max-width:46rem;}
/* Lien de suite en fin de sous-section, tel qu'Arsène l'a écrit avec une
   flèche. La flèche est décorative : elle est produite par le CSS, donc
   les lecteurs d'écran lisent seulement le libellé du lien. */
.lien-suite{font-family:var(--sans);font-size:.95rem;margin-top:.9rem;}
.lien-suite a::before{content:"\2192\00a0";color:var(--accent);}

/* Ligne légale discrète, tout en bas : plus petite et plus effacée que
   le colophon lui-même, mais le lien reste souligné au survol. */
.colo-legal{margin-top:.9rem !important;font-size:.74rem;opacity:.72;}
.colo-legal a{color:inherit;text-decoration:none;}
.colo-legal a:hover,.colo-legal a:focus{color:var(--c-lime);text-decoration:underline;}
@media (max-width:40rem){.colo-legal{font-size:.76rem;}}

/* --- Impression ---------------------------------------------------------- */
@media print{
  .sb-nav,.sb-foot,.pageband,footer.site,.figure-slot,.portrait-slot{display:none;}
  .shell{display:block;}
  body{background:#fff;color:#000;font-size:11pt;}
  a{text-decoration:none;}
  .sidebar{background:#fff;color:#000;}
}

/* --- Trois portes d'entrée (accueil) ------------------------------------- */
.doors{display:grid;gap:1px;margin-top:2.2rem;background:var(--rule);
  border:1px solid var(--rule);}
.doors a{display:grid;grid-template-columns:11rem 1fr;gap:1.2rem;align-items:baseline;
  padding:1.05rem 1.2rem;background:var(--paper);text-decoration:none;transition:background .15s;}
.doors a:hover{background:var(--paper-sunk);}
.doors .dk{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--ink-title);}
.doors a:hover .dk{color:var(--accent-hover);}
.doors .dv{font-size:1rem;line-height:1.45;color:var(--ink-soft);}
@media (max-width:40rem){
  .doors a{grid-template-columns:1fr;gap:.35rem;}
}
.portrait-wide{aspect-ratio:3/4;max-width:17rem;}