/* Styles partagés par index.html et reflexions.html */
@font-face{font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/atkinson-400-italic.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/atkinson-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/atkinson-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#F4F0E8; --surface:#fffdf9; --surface-2:#E9E4D9; --ink:#253433; --ink-2:#52635F;
  --accent:#2F6F63; --accent-ink:#FFFFFF; --line:#DCD6C8; --line-ctl:#7a8077; --field:var(--line-ctl); --danger:#A03A2A;
  --shadow:0 1px 2px rgba(37,52,51,.06),0 10px 24px rgba(37,52,51,.08);
  --r-card:24px; --r-panel:16px; --r-ctl:14px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1e2220; --surface:#282D2A; --surface-2:#2D332F; --ink:#F0EDE6; --ink-2:#B3B6AB;
    --accent:#6FBFAE; --accent-ink:#1e2220; --line:#3B423D; --line-ctl:#778179; --field:var(--line-ctl); --danger:#EB9B8B;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 28px rgba(0,0,0,.35); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1e2220; --surface:#282D2A; --surface-2:#2D332F; --ink:#F0EDE6; --ink-2:#B3B6AB;
  --accent:#6FBFAE; --accent-ink:#1e2220; --line:#3B423D; --line-ctl:#778179; --field:var(--line-ctl); --danger:#EB9B8B;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 28px rgba(0,0,0,.35); color-scheme:dark;
}

html{font-size:112.5%}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
  font-size:1rem; line-height:1.6;
}
.wrap{max-width:820px; margin:0 auto; padding-inline:20px}
a{color:var(--accent)}
h1,h2,h3{text-wrap:balance; margin:0}
p{margin:0}
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:0 0 8px 0}
.skip:focus{left:0; z-index:10}

/* ---------- header ---------- */
html{scroll-padding-top:84px}
header{position:sticky; top:0; z-index:5; padding-block:20px; background:var(--bg); border-bottom:1px solid var(--line)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); padding:5px; margin:-5px}
.brand svg{width:34px; height:34px; flex:none}
nav{display:flex; gap:20px; flex-wrap:wrap}
nav a{text-decoration:none; color:var(--ink-2); font-weight:700; font-size:1rem}
nav a:hover{color:var(--accent)}
nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}

/* ---------- hero ---------- */
.hero{--hero-bg:var(--accent); --hero-fg:var(--accent-ink); padding-block:80px; position:relative; overflow:hidden; background:var(--hero-bg); color:var(--hero-fg)}
/* Mode sombre : bandeau teinté d'accent plutôt qu'un aplat clair (texte --ink sur ~9:1) */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hero{--hero-bg:color-mix(in srgb,var(--accent) 24%,var(--bg)); --hero-fg:var(--ink)} }
:root[data-theme="dark"] .hero{--hero-bg:color-mix(in srgb,var(--accent) 24%,var(--bg)); --hero-fg:var(--ink)}
.hero h2{font-size:clamp(2.1rem,5.2vw,2.6rem); font-weight:700; line-height:1.1; max-width:20ch; margin-bottom:0}
.hero p.lede{text-wrap:balance; margin-top:24px; font-size:clamp(1.1rem,2vw,1.3rem); color:var(--hero-fg); max-width:46ch}

section{padding-block:72px}
#outils,#contact{background:var(--surface-2)}
#outils .section-intro, .tool-card.quiet > p, .photo-banner figcaption, #contact .form-note{color:var(--ink)}
h2,.page-title{font-size:clamp(1.7rem,3.2vw,2.3rem); font-weight:700; margin-bottom:20px; line-height:1.1}

/* ---------- photo ---------- */
.photo-banner{margin:36px 0 0}
.photo-banner .frame{border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow)}
.photo-banner img{display:block; width:100%; height:clamp(220px,38vw,420px); object-fit:cover}
.photo-banner figcaption{padding:10px 4px 0; font-size:1rem; color:var(--ink-2); text-align:right}

/* ---------- about (condensé) ---------- */
.bio{max-width:68ch; font-size:1.02rem}
.bio + .bio{margin-top:14px}
.contact-intro{margin-bottom:20px}
.bio-line{margin:0 0 20px; max-width:68ch; font-size:1rem; color:var(--ink)}
.tool-credit{font-size:1rem}

/* ---------- tools (mis en avant) ---------- */
.section-intro{color:var(--ink-2); max-width:56ch; margin-bottom:28px; font-size:1.02rem}
.section-intro:has(+ .section-intro){margin-bottom:12px}
.tool-links{list-style:none; margin:0 0 56px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); grid-auto-rows:1fr; gap:14px}
.tool-links li{display:flex}
.tool-links a{flex:1; display:flex; flex-direction:column; gap:4px; min-height:84px; padding:16px 44px 16px 20px; position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); text-decoration:none; color:var(--ink)}
.tool-links a::after{content:"→"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-weight:700; color:var(--accent); font-size:1.2rem}
.tool-links a:hover{border-color:var(--accent)}
.tool-links a:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.tl-name{font-weight:700; font-size:1.15rem; line-height:1.2}
.tl-what{color:var(--ink-2); font-size:.98rem; line-height:1.3}
.detail-title{font-size:1.3rem; margin-bottom:20px; color:var(--ink-2)}
.tools{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.tool-card{--pad:28px; background:var(--surface); border-radius:var(--r-panel); padding:var(--pad); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px}
.tool-card h3{font-size:1.4rem}
.tool-card > p{color:var(--ink-2); font-size:1rem}
.tool-card.lead{--pad:36px; grid-column:1 / -1; gap:16px}
.tool-card.lead h3{font-size:1.9rem}
.tool-card.lead > p{font-size:1.05rem; max-width:60ch}
.tool-card.lead .feature-list{font-size:1rem}
.tool-shot{display:block; margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 0; border-radius:var(--r-panel) var(--r-panel) 0 0; overflow:hidden}
.tool-card.lead .tool-shot img{aspect-ratio:1.9/1}
.tool-shot img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:top}
.tool-card.quiet{grid-column:1 / -1; box-shadow:none; background:transparent; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 28px; padding:22px 28px; border:1px solid var(--line); border-radius:var(--r-panel)}
.tool-card.quiet h3{font-size:1.15rem}
.tool-card.quiet > p{flex:1 1 320px; font-size:1rem}
.tool-card.quiet .btn{margin-top:0}
@media (hover:hover){
  .btn:hover{background:color-mix(in srgb,var(--accent) 82%,var(--ink))}
}
.feature-list{margin:0; padding-left:20px; font-size:1rem; color:var(--ink); display:flex; flex-direction:column; gap:6px}
.btn{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; background:var(--accent); color:var(--accent-ink); text-decoration:none; font-weight:700; padding:10px 18px; border-radius:var(--r-ctl); font-size:1rem; margin-top:4px}

/* ---------- réflexions ---------- */
.reflections{display:flex; flex-direction:column; gap:24px}
.reflection-card{background:var(--surface); border-radius:var(--r-panel); padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px}
.reflection-card h2{font-size:1.6rem; margin-bottom:0; line-height:1.25}
.reflection-meta{color:var(--ink-2); font-size:1rem; margin-top:-4px}
.reflection-card p{color:var(--ink); font-size:1rem; max-width:70ch}
.reflection-card p + p{margin-top:14px}
.reflection-card{scroll-margin-top:16px}
.reflection-refs{margin:0; padding-left:20px; font-size:1rem; font-style:normal; color:var(--ink-2); display:flex; flex-direction:column; gap:8px}
.refs{margin-top:12px}
.reflection-more summary{display:flex; align-items:center; min-height:44px}
.refs summary{display:list-item; padding-block:9px; cursor:pointer; color:var(--accent); font-weight:700; font-size:1rem}
.refs ul{margin-top:12px}
.close-article{align-self:flex-start; margin-top:16px; font:inherit; font-weight:700; color:var(--accent); background:none; border:1px solid var(--accent); border-radius:var(--r-ctl); padding:10px 16px; cursor:pointer}
.reflection-more{margin-top:4px}
.reflection-more > h3:first-of-type{margin-top:12px}
.reflection-more h3{font-size:1.3rem; line-height:1.3; margin:28px 0 8px}
.reflection-more summary{cursor:pointer; color:var(--accent); font-weight:700; font-size:1rem; list-style:none}
.reflection-more summary::-webkit-details-marker{display:none}
.reflection-more[open] summary{margin-bottom:4px}
.reflection-more .less-label{display:none}
.reflection-more[open] .more-label{display:none}
.reflection-more[open] .less-label{display:inline}

/* ---------- aperçu des réflexions (accueil) ---------- */
.apercu{padding-bottom:24px}
.reflection-links{list-style:none; margin:0; padding:0; max-width:68ch}
.reflection-links li + li{border-top:1px solid var(--line)}
.reflection-links a{display:flex; flex-direction:column; gap:2px; padding:16px 0; text-decoration:none; color:var(--ink)}
.reflection-links .rl-title{font-weight:700; font-size:1.15rem; line-height:1.3}
.reflection-links .rl-meta{color:var(--ink-2)}
@media (hover:hover){ .reflection-links a:hover .rl-title{color:var(--accent); text-decoration:underline; text-underline-offset:4px} }

/* ---------- contact ---------- */
form{display:flex; flex-direction:column; gap:14px; max-width:460px}
label{font-weight:700; font-size:1rem; display:block; margin-bottom:6px}
input, textarea{width:100%; font:inherit; padding:11px 12px; border-radius:var(--r-ctl); border:1px solid var(--field); background:var(--surface); color:var(--ink)}
textarea{resize:vertical; min-height:110px}
input:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
.hp{position:absolute; left:-9999px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
button[type="submit"]{border:none; cursor:pointer; font:inherit; font-weight:700}
button[type="submit"]:disabled{opacity:.7; cursor:progress}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}
.form-note{font-size:1rem; color:var(--ink-2)}
#formStatus{font-size:1rem; font-weight:700; min-height:1.2em}
#formStatus[data-state="ok"]{color:var(--accent)}
#formStatus[data-state="err"]{color:var(--ink); border:2px solid var(--danger); border-radius:8px; padding:10px 12px}

footer{padding-block:28px; border-top:1px solid var(--line); color:var(--ink-2); font-size:1rem}
footer svg{width:22px; height:22px; vertical-align:middle}

/* Écran tactile : cibles d'au moins 44 px */
@media (pointer:coarse){
  nav a{display:inline-flex; align-items:center; min-height:44px}
}
/* En-tête non collant sur petit écran ou écran bas (paysage) : il occuperait 110 à 160 px */
@media (max-width:680px), (max-height:500px){
  header{position:static}
  html{scroll-padding-top:16px}
}
@media (max-width:680px){
  .reflection-card{padding:20px}
  .tools{grid-template-columns:1fr}
  .tool-card.lead{--pad:28px}
  header{padding-block:8px}
  .header-row{gap:8px}
  nav{gap:0}
  nav a{padding:12px 6px; font-size:1rem}
}
@media (max-width:380px){
  nav{display:grid; grid-template-columns:1fr 1fr; width:100%}
  nav a{padding:12px 6px}
}