/* Benjamin Garcia — feuille de style unique.
   Palette et thème pilotés par les variables de :root et [data-theme="nuit"]. */

:root,
[data-theme="jour"]{
  --paper:#ECECE8;
  --ink:#000000;
  --rule:#C2C2BB;
  --mute:#6B6B64;
  --mute-inv:#A5A59D;
  color-scheme:light;
}

[data-theme="nuit"]{
  --paper:#1A1B18;
  --ink:#E8E8E2;
  --rule:#3B3C37;
  --mute:#8F8F87;
  --mute-inv:#5C5D56;
  color-scheme:dark;
}

/* Sans JavaScript, on suit quand même les réglages du système */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --paper:#1A1B18;
    --ink:#E8E8E2;
    --rule:#3B3C37;
    --mute:#8F8F87;
    --mute-inv:#5C5D56;
    color-scheme:dark;
  }
}

:root{--pad:clamp(20px, 5vw, 72px);}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Courier Prime","Courier New",Courier,monospace;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  transition:background-color 140ms linear, color 140ms linear;
}

a{color:inherit;}

::selection{background:var(--ink);color:var(--paper);}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

/* Les filets traversent l'écran d'un bord à l'autre, le texte reste dans la marge */
.wrap{
  max-width:1280px;
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

/* ---------- barre haute ---------- */

.bar{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:10;
  transition:background-color 140ms linear;
}
.bar .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:12px;
  padding-bottom:11px;
  font-size:14px;
  letter-spacing:0.01em;
}
.bar b{font-weight:700;}
.right{
  display:flex;
  align-items:center;
  gap:clamp(14px, 2.5vw, 26px);
}
.theme,
.lang{
  font:inherit;
  font-size:13.5px;
  line-height:1;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--rule);
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  padding:7px 12px 8px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
/* le sélecteur de langue est un lien, pas un bouton : il change d'URL */
.lang{
  display:inline-block;
  text-decoration:none;
}
.theme:hover,
.lang:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ---------- entrée ---------- */

.hero .wrap{
  padding-top:clamp(44px, 7vw, 96px);
  padding-bottom:clamp(40px, 6vw, 80px);
}

.name{
  margin:0;
  font-weight:700;
  font-size:clamp(22px, 4vw, 44px);
  line-height:1.1;
  letter-spacing:normal;
}

.role{
  margin:clamp(20px, 3vw, 32px) 0 0;
  font-weight:400;
  font-size:clamp(19px, 3.2vw, 32px);
  line-height:1.25;
  letter-spacing:normal;
  max-width:24ch;
}

.intro{
  margin:clamp(28px, 4vw, 44px) 0 0;
  max-width:56ch;
  font-size:clamp(16px, 1.5vw, 18px);
  line-height:1.6;
}
.intro a{text-decoration-thickness:1px;text-underline-offset:3px;}

/* ---------- blocs ---------- */

.block{border-top:1px solid var(--rule);}

.block .wrap{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:0 clamp(24px, 4vw, 64px);
  padding-top:clamp(28px, 3.5vw, 44px);
  padding-bottom:clamp(36px, 5vw, 64px);
}

.block h2{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--mute);
  letter-spacing:0.005em;
  padding-top:6px;
}

.body{min-width:0;isolation:isolate;}

/* ---------- projets ---------- */

.project{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:0 clamp(16px, 2.5vw, 40px);
  padding:22px 0;
  border-top:1px solid var(--rule);
  position:relative;
}
.project:first-child{border-top:0;padding-top:2px;}

.project .year{
  font-size:14px;
  color:var(--mute);
  padding-top:7px;
  font-variant-numeric:tabular-nums;
}

.project h3{
  margin:0;
  font-size:clamp(21px, 2.4vw, 27px);
  font-weight:700;
  letter-spacing:normal;
  line-height:1.15;
}
.project h3 a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  padding-bottom:2px;
}
.project p{
  margin:8px 0 0;
  max-width:52ch;
  line-height:1.55;
}
.project .meta{
  margin:12px 0 0;
  font-size:14px;
  color:var(--mute);
}

/* le seul geste du site : la ligne s'inverse au survol, filets compris */
@media (hover:hover){
  .project::before{
    content:"";
    position:absolute;
    inset:0 calc(var(--pad) * -1);
    background:var(--ink);
    opacity:0;
    z-index:-1;
  }
  .project:hover::before{opacity:1;}
  .project:hover{color:var(--paper);border-top-color:var(--ink);}
  .project:hover .year,
  .project:hover .meta{color:var(--mute-inv);}
}

/* ---------- archives : mêmes rangées, hiérarchie plus basse ---------- */

.archives{
  margin-top:clamp(26px, 3.5vw, 40px);
  padding-top:15px;
  border-top:1px solid var(--rule);
}
.archives-title{
  margin:0 0 2px;
  font-size:15px;
  font-weight:700;
  color:var(--mute);
}
.archives .project{
  border-top:1px solid var(--rule);
  padding:14px 0;
}
.archives .project:first-of-type{border-top:0;}
.archives .year{padding-top:2px;}
.archives h4{
  margin:0;
  font-size:17px;
  font-weight:700;
  letter-spacing:normal;
  line-height:1.2;
  color:var(--mute);
}
.archives h4 a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  padding-bottom:2px;
}
.archives .meta{margin-top:6px;}

@media (hover:hover){
  .archives .project:hover h4{color:var(--paper);}
}

/* ---------- parcours ---------- */

.entry{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:0 clamp(16px, 2.5vw, 40px);
  padding:16px 0;
  border-top:1px solid var(--rule);
}
.entry:first-child{border-top:0;padding-top:2px;}
.entry .years{
  font-size:14px;
  color:var(--mute);
  padding-top:3px;
  font-variant-numeric:tabular-nums;
}
.entry strong{font-weight:700;display:block;letter-spacing:normal;}
.entry span{color:var(--mute);font-size:15px;}

/* ---------- contact ---------- */

.contact{
  margin:0;
  display:grid;
  gap:2px;
}
.contact div{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:0 clamp(16px, 2.5vw, 40px);
  padding:11px 0;
  border-top:1px solid var(--rule);
  align-items:baseline;
}
.contact div:first-child{border-top:0;}
.contact dt{font-size:14px;color:var(--mute);}
.contact dd{
  margin:0;
  font-size:clamp(17px, 1.9vw, 20px);
  letter-spacing:normal;
}
.contact a{
  text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--ink);
  padding-bottom:1px;
}
.contact a:hover{background:var(--ink);color:var(--paper);box-shadow:none;}

/* ---------- pied ---------- */

footer{border-top:1px solid var(--rule);}
footer .wrap{
  padding-top:16px;
  padding-bottom:40px;
  font-size:13.5px;
  color:var(--mute);
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

/* ---------- petits écrans ---------- */

@media (max-width:760px){
  .block .wrap{grid-template-columns:1fr;}
  .block h2{padding-top:0;padding-bottom:18px;}
  .project{grid-template-columns:1fr;}
  .project .year{padding-top:0;padding-bottom:6px;}
  .entry,.contact div{grid-template-columns:1fr;gap:4px;}
  .entry .years{padding-top:0;}
  .role{max-width:none;}
}

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