:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  --ink:#0a3d62;
  --ink-soft:#3c6382;
  --menutitls: #fbddc2;
  --mainbg:#f2fafc;
  --maintitls: #072b45;
  --mainsubtitls : #034542;
  --mainh3 : #08314e;
  --mainh4 : #05736e;
  --line:#fce5bc;
  --text:#22242A;
  --text-soft:#5B5D63;
  --links: #0c2461;
  --exos:  #fefcfc;
  --expl:   #ebfaee;
  --comments: #e55039;

  
  --radius:15px;


  --histoire:#78e08f;
  --internet:#38ada9;
  --web:#82ccdd;
  --python:#6a89cc;


}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

body{
  background-color: var(--mainbg);
  color: var(--text);
}

.titremenu{
    padding:0 22px 20px 22px;
    border-bottom:1px solid rgba(255,255,255,.1);
    margin-bottom:14px;
  }
  .titremenu .mark{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:.12em;
    color:#8891A0;
    text-transform:uppercase;
  }
  .titremenu h1{
    color:#fff;
    font-size:26px;
    margin:4px 0 0 0;
  }

#body {
    overflow: hidden;
    height: 100vh;
  }
  main {
    overflow-y: auto;
  }
  #nostyle {
    list-style: none;
  }
  aside {
    border-right:  1px solid #ededed;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    flex: 1 0 15%;
    padding: 1rem;
    max-width: 15%;

    color:#DCE1E8;
    position:sticky;
    top:0;
    overflow-y:auto;
    padding:28px 0 40px 0;
    scrollbar-width:thin;
    border-right:  1px solid #ededed;
    padding: 1rem;
  }

  aside h4{
    color : var(--menutitls);
  }

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

  #menu{
    flex: 1 0;
  }



  .wrapper {
    display: flex;
    height: 100%;
  }
  @media (max-width: 500px) {
    .wrapper {
      flex-direction: column-reverse;
    }
    ul {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
  }
  .wrapper_inner {
    width: 90%;
    margin: 0px auto;
  }

  h1 {
    text-align : center;
    color: var(--maintitls);
  }

  h2{
    color:var(--mainsubtitls);
  }

  h3{
    color:var(--mainh3);
  }

  h4{
    color:var(--mainh4);
  }

.kicker{
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-soft);
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:4px 10px 4px 8px;
    border-radius:999px;
    background:color-mix(in srgb, var(--c) 14%, white);
    color:color-mix(in srgb, var(--c) 70%, black);
  }
  .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--c);}

  .intro{
    margin-bottom:1em;
  }
  
  .infos{
    border:1px solid var(--line);
    border-left:4px solid var(--c);
    background:color-mix(in srgb, var(--c) 6%, white);
    border-radius:8px;
    padding:16px 20px;
    margin:22px 0;
  }
  .infos .infostitl{
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(mainh4);
    display:flex; align-items:center; gap:7px;
    margin-bottom:8px;
  }
  .infos ul{margin:0; padding-left:18px; font-size:14.5px;}
  .infos li{margin-bottom:3px;}


  .resource-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
  .btn{
    font-size:14px;
    text-decoration:none;
    padding:10px 16px;
    border-radius:8px;
    background:var(--c);
    color:#fff;
    font-weight:500;
    transition:filter .15s ease;
  }
  .btn:hover{filter:brightness(1.08);}
  .btn.ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line);
  }

  .nb{
    font-size:13px; color:var(--text-soft); font-style:italic; margin-top:4px;
  }

section{
  margin-bottom: 2em;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid var(--line);
  text-align: left;
  padding: 8px;
}

.rez tr:nth-child(even) {
  background-color: var(--line);
}

video{
  padding-left: 3em;
}

.griddy{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:26px;
}

.card{
  background:color-mix(in srgb, var(--c) 25%, white);
  border:1px solid var(--c);
  border-radius:var(--radius);
  padding:1em;
}

.smallertab{
  width: 7% !important;
}

.exo{
  position:relative;

  margin: 1em;
  padding: 2em;
  background-color: var(--exos);
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px 30px 24px 54px;
  margin:40px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 22px -16px rgba(0,0,0,.35);
}

.extitle{
  position:absolute; 
  top:-15px; left:20px;
  background:var(--c);
  color:#fff;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:5px 5px 0 0;
  box-shadow:0 3px 6px rgba(0,0,0,.15);
}

.gigapad{
  padding-left: 25%;
  padding-right: 25%;
}

.gridImg{
  display:grid;
  grid-template-columns: 3fr 1fr;
  gap:1em;
}

.gridL{
  grid-column: 1 ;
}

.gridR img{
  margin-top : 7em;
  width: 100%;
}

.exoExpl{
  position:relative;

  margin: 1em;
  padding: 2em;
  background-color: var(--expl);
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px 30px 24px 54px;
  margin:40px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 22px -16px rgba(0,0,0,.35);
}

.codewrap{
  display:grid;
  grid-template-columns:3em minmax(0,1fr);
  width:max-content;
  min-width:100%;
  padding:1em;
  border:1px solid var(--c);
  border-radius:10px;
  overflow:auto;             
  background:#FFFFFF;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
}

.codewrap .linenum{
    background: color-mix(in srgb, var(--c) 35%, white);
    color: var(--text-soft);
    text-align:right;
    padding:2px 10px 2px 0;
}

.codewrap .code{
    padding-left:1em;
    white-space:pre;

}

.codewrap .code.comment{
  color: var(--comments);
}

.codewrap .code.cmd{
  color: var(--text); 
  font-weight:600;
}

img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.res tr:nth-child(even){
  background-color:var(--exos);
}

.shiny{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-style: oblique;
  font-size: larger;
  background: linear-gradient(to right,#d0026d, #0036a1);
  background-size: 200% auto;
  
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

  .alert{
    border:1px solid var(--line);
    border-left:4px solid var(--comments);
    background:color-mix(in srgb, var(--comments) 6%, white);
    border-radius:8px;
    padding:16px 20px;
    margin:22px 0;
  }