/* ---------------------------------------------------------------
   eldavidmarín — feuille de style
   Esthétique suisse : grille, typographie fonctionnelle, fer à
   gauche, contraste élevé, deux modes (clair / sombre).
   Police : Helvetica Neue avec repli Arial.
--------------------------------------------------------------- */

:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#6b6b6b;
  --line:rgba(0,0,0,.12);
  --mark:#4a4a4a;
  --accent:#d81f1f;
  --maxw:760px;
  --pad:24px;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
html[data-theme="dark"]{
  --bg:#0e0e0e;
  --fg:#f2f2f2;
  --muted:#9a9a9a;
  --line:rgba(255,255,255,.16);
  --mark:#e8e8e8;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Accessibilité : lien d'évitement */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--fg);color:var(--bg);padding:8px 14px;z-index:10;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* En-tête */
.site-header{border-bottom:0}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px}
.brand{display:inline-flex;align-items:baseline;text-decoration:none;font-weight:500;font-size:17px;letter-spacing:.02em}
.brand-mark{color:var(--accent);margin-right:5px;font-weight:500}
.brand-name{color:var(--mark)}
.site-nav{display:flex;gap:26px}
.site-nav a{font-size:15px;color:var(--muted);text-decoration:none;letter-spacing:.02em}
.site-nav a:hover{color:var(--fg)}
.header-tools{display:flex;align-items:center;gap:10px}
.icon-btn{background:none;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0}
.icon-btn:hover{border-color:var(--muted)}
.nav-toggle{display:none}
html[data-theme="light"] .ic-sun{display:none}
html[data-theme="dark"] .ic-moon{display:none}

/* Accueil */
.home{padding-top:70px;padding-bottom:60px}
.hero{
  font-weight:500;
  font-size:clamp(27px,5.4vw,42px);
  line-height:1.16;
  letter-spacing:-.012em;
  margin:0 0 44px;
  color:var(--fg);
}
.rule{border:0;border-top:1px solid var(--line);margin:0 0 6px}

.index{list-style:none;margin:0;padding:0}
.index li{border-bottom:1px solid var(--line)}
.index a{display:flex;align-items:baseline;gap:18px;padding:16px 2px;text-decoration:none;color:var(--fg)}
.index .n{font-size:13px;color:var(--muted);width:24px;flex:none;font-variant-numeric:tabular-nums}
.index .t{font-size:clamp(18px,2.6vw,22px);letter-spacing:-.005em}
.index .arrow{margin-left:auto;color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease;line-height:0;align-self:center}
.index a:hover .t{color:var(--muted)}
.index a:hover .arrow{opacity:1;transform:translateX(0)}
.index a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Pages internes */
.page{padding-top:48px;padding-bottom:64px;max-width:680px}
.page-title{font-weight:500;font-size:clamp(24px,4vw,32px);letter-spacing:-.01em;margin:0 0 24px}
.prose{font-size:17px;line-height:1.7;color:var(--fg)}
.prose p{margin:0 0 1.1em}
.prose a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose h2{font-weight:500;font-size:21px;margin:1.8em 0 .6em}
.prose ul{padding-left:1.1em}
.child-list{list-style:none;padding:0;margin:1.6em 0 0}
.child-list li{border-bottom:1px solid var(--line)}
.child-list a{display:block;padding:13px 2px;text-decoration:none;font-size:18px}
.child-list a:hover{color:var(--muted)}
.back{margin-top:48px;font-size:14px}
.back a{color:var(--muted);text-decoration:none}
.back a:hover{color:var(--fg)}

/* Pied de page */
.site-footer{margin-top:24px}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding-top:30px;padding-bottom:40px;font-size:13px;color:var(--muted);letter-spacing:.02em}
.lang{display:flex;gap:8px}
.lang a{color:var(--muted);text-decoration:none}
.lang a:hover{color:var(--fg)}
.lang a.on{color:var(--fg);font-weight:500}
.footer-inner .mail{color:var(--muted);text-decoration:none;margin-left:auto}
.footer-inner .mail:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* Focus visible global */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Mobile : la navigation se replie derrière l'icône menu */
@media (max-width:719px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;left:0;right:0;
    display:none;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:6px var(--pad) 14px;z-index:5;
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:11px 0;font-size:17px;color:var(--fg)}
  .header-inner{position:relative}
  .home{padding-top:46px}
  .footer-inner .mail{margin-left:0;flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}