/* =========================================================
   Shydeeh GUIRE. Portfolio d'alternance.

   LE PARTI : un document imprime, pas une page de site. En
   communication, la typographie EST l'image. La page se lit
   comme un brief tire sur papier : une marge qui porte les
   mentions en petit, un filet qui separe les parties, un
   aplat de couleur pleine page au milieu, du grain. Aucune
   carte, aucune tuile, aucune ombre portee, aucune barre de
   navigation collante : ce sont les tics de la page generee,
   et une candidate en communication est jugee d'abord sur ce
   qu'elle laisse voir de son oeil.

   LES NOMS DE JETONS SONT CONTRAINTS, PAS LEURS VALEURS.
   views/admin*.html et public/assets/site.js lisent --bg,
   --surface, --ink, --body, --muted, --hair, --hair2, --cyan,
   --amber, --sans, --mono. En supprimer un casse l'espace
   admin EN SILENCE. Tous conserves, tous reaffectes.
   ========================================================= */

@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-grotesque-var.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"PublicSans";src:url("../fonts/public-sans-var.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"DMMono";src:url("../fonts/dm-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DMMono";src:url("../fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#efede7;
  --surface:#ffffff;
  --ink:#121214;
  --body:#3a3a3e;
  --muted:#75736d;
  --hair:rgba(18,18,20,.16);
  --hair2:rgba(18,18,20,.3);
  --cyan:#c22d19;
  --sur-cyan:#fff6f1;
  --amber:#16514a;
  --sans:"PublicSans",system-ui,-apple-system,sans-serif;
  --display:"Bricolage","PublicSans",system-ui,sans-serif;
  --mono:"DMMono",ui-monospace,Menlo,monospace;
  --page:min(1320px,100% - 2.6rem);
  --marge:168px;
}
:root[data-theme="dark"]{
  --bg:#101013;--surface:#17171b;--ink:#f0eee8;--body:#c0bfba;--muted:#8a8881;
  --hair:rgba(240,238,232,.18);--hair2:rgba(240,238,232,.32);
  --cyan:#f2512f;--sur-cyan:#140b08;--amber:#4bb49f;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101013;--surface:#17171b;--ink:#f0eee8;--body:#c0bfba;--muted:#8a8881;
  --hair:rgba(240,238,232,.18);--hair2:rgba(240,238,232,.32);
  --cyan:#f2512f;--sur-cyan:#140b08;--amber:#4bb49f;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:var(--sans);font-size:17.5px;line-height:1.6;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;font-weight:700;letter-spacing:-.025em;line-height:1}
p{margin:0 0 1.1rem}
a{color:inherit}
.page{width:var(--page);margin-inline:auto}
.saut{position:absolute;left:-9999px}
.saut:focus{left:1rem;top:1rem;position:fixed;z-index:99;background:var(--ink);color:var(--bg);padding:.6rem 1rem}

/* LE GRAIN. Fixe, sans evenement de pointeur : il ne repeint jamais
   pendant le defilement. Retire des que le mouvement est refuse. */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.32'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.2}
@media (prefers-reduced-motion:reduce){.grain{display:none}}

/* ---------- la marge, comme sur un document imprime ---------- */
.rang{display:grid;grid-template-columns:var(--marge) minmax(0,1fr);gap:0 clamp(24px,3.4vw,56px)}
.mention{font:500 11.5px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.11em;color:var(--muted);padding-top:.45rem}
@media(max-width:860px){.rang{grid-template-columns:1fr;gap:.9rem}.mention{padding-top:0}}

/* ---------- ouverture : la phrase comme image ---------- */
.ouvre{padding:clamp(30px,4.6vw,54px) 0 clamp(50px,7vw,92px)}
.titre{font-size:clamp(44px,7.6vw,106px);font-weight:800;letter-spacing:-.042em;line-height:.93;
  text-wrap:balance;max-width:17ch;overflow-wrap:break-word}
.titre .r{color:var(--cyan)}
.sous{display:grid;grid-template-columns:var(--marge) minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);margin-top:clamp(30px,4.4vw,62px);align-items:start}
.sous>div{max-width:38ch}
.sous p{margin:0;font-size:clamp(17px,1.4vw,19.5px);color:var(--ink)}
.releve{margin:0;font:500 13.2px/1.95 var(--mono);color:var(--body)}
.releve b{color:var(--ink);font-weight:500}
.lien{display:inline-block;margin-top:1.4rem;font:500 14px/1 var(--mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--cyan);text-decoration:none;border-bottom:2px solid var(--cyan);padding-bottom:5px}
.lien:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:860px){.sous{grid-template-columns:1fr}}

/* ---------- l aplat : une seule chose, en grand ---------- */
.aplat{background:var(--cyan);color:var(--sur-cyan);padding:clamp(52px,7vw,96px) 0}
.aplat h2{color:var(--sur-cyan);font-size:clamp(28px,4.4vw,58px);max-width:18ch;letter-spacing:-.03em;line-height:1.02}
.aplat .fin{margin:1.5rem 0 0;max-width:46ch;color:var(--sur-cyan);opacity:.93;font-size:17px}
.aplat .mention{color:var(--sur-cyan);opacity:.74}
.dates{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,38px);margin:clamp(34px,4.4vw,56px) 0 0;
  padding-top:1.5rem;border-top:1px solid rgba(255,246,241,.34)}
.dates div{min-width:0}
.dates dt{font:500 11.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;opacity:.74;margin-bottom:.5rem}
.dates dd{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.65vw,22px);line-height:1.12;letter-spacing:-.02em}
@media(max-width:780px){.dates{grid-template-columns:1fr 1fr;row-gap:1.6rem}}

/* ---------- parties ---------- */
.part{padding:clamp(56px,7.4vw,106px) 0;border-top:1px solid var(--hair)}
.part h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:1.1rem;max-width:20ch}
.part .chapo{max-width:50ch;margin:0;color:var(--body)}

.terrains{margin-top:clamp(28px,3.6vw,48px)}
.terrain{display:grid;grid-template-columns:var(--marge) minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(14px,3vw,48px);padding:1.7rem 0;border-top:1px solid var(--hair);align-items:baseline}
.terrain:last-of-type{border-bottom:1px solid var(--hair)}
.terrain .no{font:500 12.5px/1.6 var(--mono);color:var(--cyan);letter-spacing:.1em}
.terrain h3{font-size:clamp(19px,2vw,25px);letter-spacing:-.02em;line-height:1.1}
.terrain p{margin:0;font-size:16.2px;color:var(--body)}
@media(max-width:860px){.terrain{grid-template-columns:1fr;gap:.5rem;padding:1.4rem 0}}
.apres{margin:1.5rem 0 0;font-size:13.6px;color:var(--muted);max-width:66ch}

.fait{display:grid;grid-template-columns:var(--marge) minmax(0,1fr);gap:clamp(18px,3.4vw,56px);
  padding:2.2rem 0;border-top:1px solid var(--hair)}
.fait:first-of-type{border-top:0;padding-top:0}
.fait h3{font-size:clamp(21px,2.3vw,28px);margin-bottom:.45rem;letter-spacing:-.022em;line-height:1.08}
.fait .chez{color:var(--cyan);font-weight:600;font-size:15.4px;margin-bottom:.9rem}
.fait p{max-width:56ch;margin:0}
@media(max-width:860px){.fait{grid-template-columns:1fr;gap:.6rem}}

.etape{display:grid;grid-template-columns:var(--marge) minmax(0,1fr);gap:clamp(18px,3.4vw,56px);
  padding:1.45rem 0;border-top:1px solid var(--hair)}
.etape:last-of-type{border-bottom:1px solid var(--hair)}
.etape h3{font-size:19.5px;margin-bottom:.2rem;letter-spacing:-.015em;line-height:1.2}
.etape p{margin:0;color:var(--muted);font-size:15.6px;max-width:52ch}
.etape.ici h3{color:var(--cyan)}
@media(max-width:860px){.etape{grid-template-columns:1fr;gap:.3rem}}

/* ---------- ecrire ---------- */
.ecrire{padding:clamp(56px,7.4vw,106px) 0 clamp(40px,5vw,70px);border-top:1px solid var(--hair)}
.ecrire h2{font-size:clamp(26px,3vw,38px);max-width:22ch;margin-bottom:clamp(22px,3vw,38px)}
.adresse{display:inline-block;font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(26px,5.9vw,74px);color:var(--ink);text-decoration:none;line-height:1;
  border-bottom:3px solid var(--cyan);padding-bottom:.08em;word-break:break-word}
.adresse:hover{color:var(--cyan)}
.second{margin-top:1.8rem;font:500 14px/2 var(--mono);color:var(--body)}
.second a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair2)}
.second a:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--hair);padding:1.6rem 0 2.6rem;color:var(--muted);
  font:500 12px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.09em}
.pied .page{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;justify-content:space-between}
.pied a,.pied button{color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer;
  font:inherit;text-transform:inherit;letter-spacing:inherit;padding:0}
.pied a:hover,.pied button:hover{color:var(--ink)}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .monte{opacity:0;transform:translateY(12px);animation:m .66s cubic-bezier(.16,1,.3,1) forwards}
  .monte.b{animation-delay:.1s}
  @keyframes m{to{opacity:1;transform:none}}
}