/* ==========================================================================

          ___         ___                              ___         ___
         /\  \       /\  \                            /  /\       /  /\
         \:\  \     /::\  \                          /  /::\     /  /:/
     ___ /::\__\   /:/\:\  \                        /  /:/\:\   /__/::\ ___
    /\  /:/\/__/  /:/  \:\  \                      /  /:/  \:\  \__\/\:\  /\
    \:\/:/  /    /:/__/_\:\__\                    /__/:/_\__\:\    \  \:\/:/
     \::/  /     \:\  /\ \/__/                    \__\/ /\  /:/     \  \::/
      \/__/       \:\ \:\__\                        /__/:/ /:/       \__\/
                   \:\/:/  /                        \  \:\/:/
                    \::/  /                          \  \::/
                     \/__/                            \__\/

                               jeromegautier.info

   ========================================================================== */
:root{
  --ink-900:#141414; --ink-700:#3d3d3d; --ink-500:#727272;
  --ink-300:#b0b0b0; --ink-200:#dcdcdc; --ink-100:#eeeeee;
  --bg:#fff; --fg:var(--ink-900); --muted:var(--ink-500);
  --border:var(--ink-200); --border-strong:var(--ink-900); --accent:#5b9bd5; --accent-ink:#307abd;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:8px; --radius-sm:4px; --maxw:960px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{ color:inherit; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:3px solid var(--ink-900); outline-offset:3px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }



html.lang-fr .en{ display:none; }
html.lang-en .fr{ display:none; }

 
.hero{ padding:60px 0 44px; }
.hero .row{ display:grid; grid-template-columns:minmax(0,1fr) clamp(200px,30vw,300px); gap:clamp(24px,4vw,48px); align-items:center; }
h1{
  font-size:clamp(44px,8vw,88px); line-height:.95; font-weight:700;
  letter-spacing:-.03em; text-transform:uppercase; margin:0;
}
h1 .hl{ color:var(--accent); }
.cover{ border:1px solid var(--ink-300); border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; }
.cover img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){
  .hero .row{ grid-template-columns:1fr; }
  .cover{ max-width:280px; }
}






.band{ background:var(--accent-ink); color:#fff; overflow:hidden; border-top:2px solid var(--border-strong); border-bottom:2px solid var(--border-strong); }
.band .rail{ display:flex; width:max-content; will-change:transform; }
.band span{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; padding:10px 0; white-space:pre; }

 
.mission{ padding:48px 0 8px; }
.mission p{ font-size:clamp(20px,2.8vw,28px); line-height:1.35; font-weight:500; letter-spacing:-.01em; max-width:24em; margin:0; }
.mission b{ color:var(--accent-ink); }



.steps{ padding:20px 0 8px; }
.pcard{ border:1px solid var(--ink-300); border-radius:var(--radius); overflow:hidden; margin:26px 0; }
.phead{ display:flex; align-items:baseline; gap:12px; padding:14px 20px; }
.phead .pk{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:var(--accent-ink); white-space:nowrap; }
.phead .pt{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; }
.prow{
  display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:baseline;
  padding:14px 20px; border-top:1px solid var(--border);
}
.prow .n{ font-size:17px; font-weight:700; line-height:1; color:var(--accent-ink); }
.prow .t{ font-size:clamp(16px,2vw,18px); font-weight:400; line-height:1.45; max-width:34em; }
.prow .t b{ font-weight:700; color:var(--accent-ink); }
 
a.ptool{
  display:flex; align-items:baseline; gap:16px; padding:15px 20px;
  text-decoration:none; border-top:1px solid var(--border);
  transition:background .1s ease, color .1s ease;
}
a.ptool .k{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:var(--muted); flex:none; width:120px; }
a.ptool .u{ font-size:clamp(16px,2.2vw,20px); font-weight:700; letter-spacing:-.01em; }
a.ptool .arr{ margin-left:auto; font-size:20px; line-height:1; flex:none; }
a.ptool:hover{ background:var(--ink-900); color:#fff; }
a.ptool:hover .k{ color:#fff; }
@media (max-width:640px){
  .prow{ grid-template-columns:24px 1fr; gap:12px; }
  a.ptool{ flex-wrap:wrap; gap:4px 16px; }
  a.ptool .k{ width:100%; }
}

 
.part{ display:flex; align-items:baseline; gap:12px; margin:0 0 10px; }
.part .pk{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-ink); white-space:nowrap; }
.part .pt{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }

 
.history{ padding:44px 0 0; }
.history figure{ margin:0; }
.history .imgbox{ border:1px solid var(--ink-300); border-radius:var(--radius); overflow:hidden; background:var(--ink-100); }
.history .imgbox img{ width:100%; height:auto; }
.history figcaption{ font-size:13px; color:var(--muted); padding:12px 2px 0; max-width:36em; }

 
.examples{ padding:44px 0 0; }
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ink-300); border:1px solid var(--ink-300); border-radius:var(--radius); overflow:hidden; }
.gallery figure{ margin:0; background:var(--bg); }
.gallery .ph{ aspect-ratio:3/4; overflow:hidden; background:var(--ink-100); }
.gallery .ph img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){ .gallery{ grid-template-columns:1fr; } .gallery .ph{ aspect-ratio:4/3; } }









.pimgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 2px; }
.pimgs figure{ margin:0; min-width:0; }
.pimgs .ph{ aspect-ratio:1/1; overflow:hidden; border:1px solid var(--ink-300); border-radius:var(--radius); background:var(--ink-100); }
.pimgs .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.pimgs figcaption{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--muted); padding-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pimgs.solo{ grid-template-columns:minmax(0,260px); }
@media (max-width:640px){ .pimgs figcaption{ font-size:10px; } }





.sources{ padding:44px 0 56px; }
.srcbox{ border:1px solid var(--ink-300); border-radius:var(--radius); overflow:hidden; }
.srcbox .srchead{
  display:flex; align-items:center; gap:10px; padding:13px 20px;
  background:var(--accent-ink); color:#fff;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.2em;
}
.srcbox a{
  display:flex; align-items:baseline; gap:16px; padding:17px 20px;
  text-decoration:none; border-top:1px solid var(--border);
  transition:background .1s ease, color .1s ease;
}
.srcbox a:first-of-type{ border-top:0; }
.srcbox a .k{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:var(--muted); flex:none; width:120px; }
.srcbox a .u{ font-size:clamp(16px,2.2vw,20px); font-weight:700; letter-spacing:-.01em; }
.srcbox a .arr{ margin-left:auto; font-size:20px; line-height:1; flex:none; }
.srcbox a:hover{ background:var(--ink-900); color:#fff; }
.srcbox a:hover .k{ color:#fff; }
@media (max-width:640px){
  .srcbox a{ flex-wrap:wrap; gap:4px 16px; }
  .srcbox a .k{ width:100%; }
}