/* reskif.org — plan : content/design.md (skill frontend-design)
 * Marque : reskif-commons@4dc85c1 (logo, Rubik, riso). Encres : jaune, cyan, magenta.
 */
:root {
  --jaune: #ffcc00;
  --cyan: #00aaff;
  --magenta: #ff00e5;
  --encre: #042e4d;
  --blanc: #ffffff;
  --encre-douce: rgba(4, 46, 77, .78);
  --font: Rubik, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --max: 74rem;
  --gouttiere: clamp(1.25rem, 4vw, 2.75rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--font); color: var(--encre); background: var(--blanc); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.cadre { max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere); }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--jaune); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; }

/* Échelle typographique */
.t-affiche { font-size: clamp(2.9rem, 8.4vw, 7.25rem); font-weight: 900; line-height: .93; letter-spacing: -.035em; text-wrap: balance; }
.t-titre { font-size: clamp(2.2rem, 5.2vw, 4.25rem); font-weight: 900; line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.t-inter { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.t-chapo { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.5; max-width: 38rem; }
.t-texte { max-width: 36rem; color: var(--encre-douce); }
.t-texte strong, .t-chapo strong { color: var(--encre); }
.t-texte > * + * { margin-top: 1rem; }

/* En-tête (communs : blanc translucide, filet encre) */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--encre); }
.entete .cadre { display: flex; align-items: center; gap: 1.75rem; padding-top: .7rem; padding-bottom: .7rem; }
.entete .logo img { height: 28px; width: auto; }
.entete nav { display: none; gap: 1.6rem; font-size: .95rem; font-weight: 500; }
.entete nav a { text-decoration: none; color: var(--encre-douce); }
.entete nav a:hover, .entete nav a[aria-current="page"] { color: var(--encre); text-decoration: underline; }
.entete .bouton { margin-left: auto; }
@media (min-width: 820px) { .entete nav { display: flex; } }

/* Boutons pilule (communs) */
.bouton { display: inline-flex; align-items: center; border-radius: 999px; padding: .75rem 1.35rem; font: 700 .95rem/1 var(--font); text-decoration: none; background: var(--encre); color: var(--blanc); border: 2px solid var(--encre); transition: background-color .15s, color .15s; white-space: nowrap; }
.bouton:hover { background: #0068ab; border-color: #0068ab; }
.bouton.creux { background: transparent; color: var(--encre); }
.bouton.creux:hover { background: var(--encre); color: var(--blanc); }
.bouton.grand { padding: 1rem 1.7rem; font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* Sections : blanc, ou photo imprimée en riso (jamais d'aplat de couleur) */
.bloc { padding: clamp(4.5rem, 10vw, 8rem) 0; border-bottom: 1px solid var(--encre); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fond riso : deux passages d'encre (trame fine, peu contrastée) en multiply, puis un voile blanc pour le texte */
.fond { position: relative; isolation: isolate; overflow: hidden; }
.fond > .encrage { position: absolute; inset: -6px; z-index: -2; }
.fond > .encrage > div { position: absolute; inset: 0; }
.fond > .encrage > div + div { mix-blend-mode: multiply; transform: translate(3px, 2px); }
.fond::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,.25) 72%, rgba(255,255,255,0) 100%); }
@media (max-width: 759px) { .fond::before { background: rgba(255,255,255,.82); } }
.fond.dense::before { background: linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.76)); }
.fond .t-titre + .t-chapo { margin-top: 1.5rem; }
.fond .t-texte { color: var(--encre); }
.fond .t-texte > p + p { margin-top: 1.1rem; }

/* Ouverture : toute la fenêtre, la fougère et trois lignes dont les « vi » s'alignent */
.ouverture { min-height: calc(100vh - 3.3rem); min-height: calc(100svh - 3.3rem); display: grid; place-items: center; padding: 3rem var(--gouttiere); border-bottom: 1px solid var(--encre); }
.ouverture::before { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,255,255,.78), rgba(255,255,255,.35) 70%, rgba(255,255,255,0)); }
@media (max-width: 759px) { .ouverture::before { background: radial-gradient(ellipse 90% 45% at 50% 50%, rgba(255,255,255,.82), rgba(255,255,255,.3)); } }
.vi-titre { font-size: clamp(2.9rem, 11.5vw, 10.5rem); font-weight: 900; line-height: .95; letter-spacing: -.04em; }
.vi-grille { display: grid; grid-template-columns: max-content max-content; }
.vi-grille > span { white-space: pre; }
.vi-grille > span:nth-child(odd) { text-align: right; }
.vi-grille b { font-weight: 900; color: var(--magenta); }
.duo { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4.5rem; align-items: start; } }

/* Hero des pages intérieures : photo riso en fond */
.hero { padding: clamp(5rem, 12vw, 9rem) 0; border-bottom: 1px solid var(--encre); }
.hero .t-chapo { margin-top: 1.75rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Deux colonnes séparées par un filet */
.filets { display: grid; gap: 0; margin-top: 3rem; border-top: 1px solid var(--encre); }
.filets > * { padding: 1.5rem 0; border-bottom: 1px solid var(--encre); }
@media (min-width: 760px) { .filets.x2 { grid-template-columns: 1fr 1fr; } .filets.x2 > :nth-child(odd) { padding-right: 2.5rem; border-right: 1px solid var(--encre); } .filets.x2 > :nth-child(even) { padding-left: 2.5rem; } }
.filets p { margin-top: .5rem; color: var(--encre-douce); max-width: 32rem; }
.fond .filets p { color: var(--encre); }

/* Profils marqués par une barre d'encre */
.profils { list-style: none; padding: 0; margin: 3rem 0 0; }
.profils li { display: grid; grid-template-columns: .9rem 1fr; gap: 1.25rem; padding: 1.6rem 0; border-top: 1px solid var(--encre); }
.profils li:last-child { border-bottom: 1px solid var(--encre); }
.profils .barre { width: .9rem; border: 1px solid var(--encre); }
.profils p { margin-top: .4rem; color: var(--encre-douce); max-width: 40rem; }
@media (min-width: 900px) { .profils li { grid-template-columns: .9rem minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; } .profils p { margin-top: 0; } }

/* Projets */
.projets { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.projets li { display: grid; gap: .5rem; padding: 1.6rem 0; border-top: 1px solid var(--encre); }
.projets li:last-child { border-bottom: 1px solid var(--encre); }
@media (min-width: 900px) { .projets li { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) auto; gap: 2.5rem; align-items: baseline; } }
.projets .nom { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; }
.projets p { color: var(--encre-douce); max-width: 40rem; }
.projets .lien { font-weight: 700; }
.en-cours { columns: 2 16rem; column-gap: 3rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.en-cours li { break-inside: avoid; padding: .7rem 0; border-top: 1px solid rgba(4,46,77,.25); color: var(--encre-douce); }
.en-cours strong { color: var(--encre); }

/* Étapes : vraie séquence, donc numérotées */
.etapes { list-style: none; padding: 0; margin: 2.5rem 0 0; counter-reset: e; display: grid; border-top: 1px solid var(--encre); }
.etapes li { counter-increment: e; padding: 1.4rem 0; border-bottom: 1px solid var(--encre); display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; }
.etapes li::before { content: counter(e); font-size: 2rem; font-weight: 900; line-height: 1; }
.etapes span { display: block; color: var(--encre); opacity: .85; margin-top: .25rem; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--encre); } .etapes li { grid-template-columns: 1fr; border-bottom: 0; padding: 1.4rem 1.5rem 1.4rem 0; } .etapes li + li { border-left: 1px solid var(--encre); padding-left: 1.5rem; } }

/* Le deal : photo riso, gros texte encre */

.deal .t-titre { max-width: 16ch; }
.deal ol { margin: 2rem 0 0; padding-left: 1.3rem; max-width: 40rem; font-weight: 500; }
.deal li + li { margin-top: .5rem; }

/* Jean-Claude : liste de verbes */
.verbes { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.verbes li { padding: .9rem 0; border-top: 1px solid var(--encre); display: grid; gap: .25rem; }
.verbes li:last-child { border-bottom: 1px solid var(--encre); }
@media (min-width: 760px) { .verbes li { grid-template-columns: 14rem 1fr; } }
.verbes strong { font-size: 1.35rem; font-weight: 900; letter-spacing: -.01em; }

/* Pied de page */
.pied { padding: 3rem 0; }
.pied .cadre { display: grid; gap: 1.75rem; }
@media (min-width: 820px) { .pied .cadre { grid-template-columns: auto 1fr auto; align-items: center; gap: 3rem; } }
.pied img { height: 28px; width: auto; }
.pied p { color: var(--encre-douce); font-size: .95rem; }
.pied nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-weight: 500; font-size: .95rem; }
.pied nav a { text-decoration: none; }
.pied nav a:hover { text-decoration: underline; }
.credit { font-size: .85rem; color: var(--encre-douce); grid-column: 1 / -1; }

/* Corrections après autocritique (captures) */
.profils .barre { align-self: stretch; min-height: 2.4rem; }
.profils p { grid-column: 2; }
@media (min-width: 900px) { .profils p { grid-column: 3; } .profils li { align-items: start; } }