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

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

                               jeromegautier.info

   ========================================================================== */
:root{
  --ink-900:#141414; --ink-700:#3d3d3d; --ink-500:#727272; --ink-300:#b0b0b0; --ink-200:#dcdcdc; --ink-100:#eeeeee;
  --paper:#ffffff; --signal:#e2231a; --on-ink:#ffffff;
  --type-100:12px; --type-200:13px; --type-300:15px; --type-400:17px; --type-500:19px; --type-900:32px;
  --sp-100:4px; --sp-200:8px; --sp-300:12px; --sp-400:16px; --sp-500:24px; --sp-600:32px;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --display:var(--sans);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --trait:1px solid var(--ink-900); --fin:1px solid var(--ink-200);
  --heart-color:#4169E1;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0; color:var(--ink-900); background:var(--paper); font:400 var(--type-400)/27px var(--sans);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0 0 var(--sp-200)}
code{font:.9em var(--mono); background:var(--ink-100); padding:.1em .35em; border-radius:4px}
:focus-visible{outline:2px solid var(--ink-900); outline-offset:2px}
.page{max-width:1040px; margin:0 auto; padding:0 var(--sp-500) var(--sp-600)}

 
.bandeau{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-400);
  padding:var(--sp-500) 0 var(--sp-300); border-bottom:var(--fin)}
.marque{display:flex; align-items:baseline; flex-wrap:wrap; column-gap:var(--sp-300); row-gap:var(--sp-100); text-decoration:none}
.coeur{display:inline-block; width:24px; height:22px; color:var(--heart-color); align-self:center}
.coeur svg{display:block; width:24px; height:22px}
.raison{font:500 26px/1 var(--display); letter-spacing:-.02em}
.maison{font:400 var(--type-500)/1 var(--sans); color:var(--ink-500)}    
.ouvrir{display:inline-block; font:700 var(--type-200)/1 var(--sans); text-decoration:none; color:var(--on-ink);
  background:var(--ink-900); border:1px solid var(--ink-900); border-radius:4px; padding:10px var(--sp-400); white-space:nowrap}
.ouvrir:hover{background:var(--ink-700); border-color:var(--ink-700)}

h1{font:500 48px/56px var(--display); letter-spacing:-.02em; margin:0 0 var(--sp-300); padding-top:var(--sp-600); max-width:900px}
h2{font:500 26px/32px var(--display); letter-spacing:-.01em; margin:var(--sp-600) 0 var(--sp-300)}
.chapo{margin:0 0 var(--sp-600); max-width:760px}
.fiches{border-top:var(--trait)}
.rang{display:grid; grid-template-columns:4fr 8fr; column-gap:var(--sp-400); padding:var(--sp-300) 0; border-bottom:var(--fin); align-items:baseline}
.rang > p{margin:0; max-width:680px}
.rang > p + p{grid-column:2; margin-top:var(--sp-200)}
.lib{font-weight:500}
.num{display:inline-block; min-width:1.4em; color:var(--ink-500); font-weight:400}

 
.exemple{font:var(--type-300)/24px var(--mono); white-space:pre-wrap; margin:0; padding:var(--sp-400) 0;
  border-top:var(--trait); border-bottom:var(--fin); color:var(--ink-700)}
.legende{font:var(--type-200)/20px var(--sans); color:var(--ink-500); margin-top:var(--sp-200)}

.note{font:var(--type-200)/20px var(--sans); color:var(--ink-500); margin-top:var(--sp-500)}
.pied{display:flex; justify-content:space-between; gap:var(--sp-400); font:var(--type-100)/20px var(--sans); color:var(--ink-500);
  margin-top:var(--sp-600); padding-top:var(--sp-300); border-top:var(--fin)}
.pied a{text-decoration:none}
.pied a:hover{color:var(--ink-900)}
.pied nav{display:flex; flex-wrap:wrap; gap:var(--sp-400)}
@media (max-width:720px){
  .page{padding:0 var(--sp-400) var(--sp-600)}
  .maison{display:none}
  h1{font-size:34px; line-height:42px}
  .rang{grid-template-columns:1fr; row-gap:var(--sp-100)}
  .rang > p + p{grid-column:1}
  .pied{flex-direction:column}
}