/* Jeunesse Consciente d'Afrique — papier de lecture, vert de reliure, ocre du mur. */
:root{
  --papier:#F2F0E7;--papier-2:#E8E5D8;--papier-3:#DCD8C7;--craie:#FBFAF4;
  --vert:#19392B;--vert-2:#22513C;--vert-pale:#C9D6CC;
  --ocre:#C2862A;--brique:#9C3A2A;
  --encre:#1B1E19;--gris:#6C7165;--gris-clair:#9A9E92;--trait:#D5D1C0;--trait-nuit:#33473D;
  --lecture:'Newsreader','Georgia',serif;
  --util:'Karla','Helvetica Neue',Arial,sans-serif;
  --gout:22px;--max:1260px;--ease:cubic-bezier(.22,.8,.26,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--lecture);font-size:17px;font-weight:400;line-height:1.7;
  padding-inline:var(--gout);overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--lecture);font-weight:400;line-height:1.16;letter-spacing:-.012em;text-wrap:balance}
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px}
section[id]{scroll-margin-top:92px}

.mot-cle{font-family:var(--util);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ocre)}
.mot-cle-clair{color:#E4BC76}
.amorce{font-size:1.02rem;font-weight:300;color:var(--gris);max-width:50ch}

.mention{
  margin:0 calc(-1*var(--gout));padding:.55rem var(--gout);background:var(--vert);color:var(--vert-pale);
  font-family:var(--util);font-size:.68rem;font-weight:400;text-align:center;line-height:1.55;
}
.mention b{color:var(--craie);font-weight:600}

/* entête */
.entete{
  position:sticky;top:0;z-index:40;margin:0 calc(-1*var(--gout));padding:.8rem var(--gout);
  background:rgba(242,240,231,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--trait);display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;
}
.marque{margin-right:auto;text-decoration:none;display:grid;gap:.05rem}
.marque-nom{font-family:var(--lecture);font-size:1.12rem;font-weight:500;line-height:1.15}
.marque-sous{font-family:var(--util);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.menu{display:none;gap:1.7rem}
.menu a{font-family:var(--util);font-size:.78rem;font-weight:500;text-decoration:none;color:var(--gris);padding-block:.2rem;border-bottom:1.5px solid transparent;transition:color .3s,border-color .3s}
.menu a:hover{color:var(--encre);border-bottom-color:var(--ocre)}
@media (min-width:1060px){.menu{display:flex}}

/* boutons */
.bouton{
  display:inline-block;padding:.72rem 1.35rem;background:var(--vert);color:var(--craie);
  font-family:var(--util);font-size:.78rem;font-weight:600;text-decoration:none;cursor:pointer;
  border:1.5px solid var(--vert);border-radius:2px;transition:background .3s,color .3s;
}
.bouton:hover{background:transparent;color:var(--vert)}
.bouton-clair{background:var(--craie);color:var(--vert);border-color:var(--craie)}
.bouton-clair:hover{background:transparent;color:var(--craie)}
.lien-fin{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--util);font-size:.78rem;font-weight:600;
  text-decoration:none;border-bottom:1.5px solid var(--ocre);padding-bottom:.15rem;cursor:pointer;transition:color .3s;
}
.lien-fin::after{content:"\203A";font-size:1.1em;line-height:0}
.lien-fin:hover{color:var(--ocre)}

/* ouverture */
.ouverture{max-width:var(--max);margin-inline:auto;display:grid;gap:2.6rem;align-items:center;padding-block:3rem 3.6rem}
.ouverture-texte{display:grid;gap:1.3rem;justify-items:start}
.ouverture h1{font-size:clamp(2.1rem,4.8vw,3.6rem);margin:.3rem 0 0;max-width:17ch;font-weight:400}
.actes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:.5rem}
.rayon{margin:0;justify-self:center;width:100%;max-width:380px}
.rayon img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px}
.rayon figcaption{margin-top:.8rem;font-family:var(--util);font-size:.74rem;font-weight:400;color:var(--gris);line-height:1.5}
@media (min-width:900px){
  .ouverture{grid-template-columns:1.12fr .88fr;gap:4.2rem;padding-block:3.8rem 4.4rem}
  .rayon{max-width:400px}
}

/* repères */
.reperes{
  list-style:none;margin:0 calc(-1*var(--gout));padding:1.7rem var(--gout);background:var(--papier-2);
  border-block:1px solid var(--trait);display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr);
}
.reperes li{display:grid;gap:.1rem}
.reperes b{font-family:var(--lecture);font-weight:500;font-size:1.5rem;line-height:1.15;color:var(--vert)}
.reperes span{font-family:var(--util);font-size:.78rem;font-weight:400;color:var(--gris);line-height:1.45}
@media (min-width:900px){.reperes{grid-template-columns:repeat(4,1fr);gap:2.6rem;padding-block:2.1rem}}

/* blocs */
.bloc{max-width:var(--max);margin-inline:auto;padding-block:4.2rem}
.entete-bloc{display:grid;gap:1.1rem;margin-bottom:2.6rem}
.entete-bloc h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:.45rem}
@media (min-width:900px){.entete-bloc{grid-template-columns:1fr 1fr;gap:3.4rem;align-items:end}.entete-bloc .amorce{justify-self:end}}

/* la librairie */
.rayons{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.9rem}
.rayon-bouton{
  padding:.46rem .9rem;background:transparent;border:1px solid var(--trait);border-radius:999px;cursor:pointer;
  font-family:var(--util);font-size:.74rem;font-weight:500;color:var(--gris);
  transition:background .25s,color .25s,border-color .25s;
}
.rayon-bouton:hover{border-color:var(--vert);color:var(--vert)}
.rayon-bouton.on{background:var(--vert);border-color:var(--vert);color:var(--craie)}
.livres{display:grid;gap:2rem 1.4rem;grid-template-columns:repeat(2,1fr)}
.livre{display:grid;gap:.3rem;align-content:start}
.couverture{
  display:flex;align-items:center;justify-content:center;background:var(--papier-2);border-radius:3px;
  height:clamp(230px,25vw,305px);padding:1.15rem;margin-bottom:.7rem;overflow:hidden;
}
.couverture img{
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:1px;
  box-shadow:0 12px 22px -14px rgba(27,30,25,.65),0 2px 4px -2px rgba(27,30,25,.35);
  transition:transform .5s var(--ease);
}
.livre:hover .couverture img{transform:translateY(-5px) scale(1.02)}
.livre-rayon{font-family:var(--util);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ocre)}
.livre h3{font-size:1.14rem;font-weight:500;line-height:1.25;margin-top:.1rem}
.livre-auteur{font-family:var(--util);font-size:.78rem;font-weight:400;color:var(--gris)}
.livre-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--trait)}
.livre-pied b{font-family:var(--util);font-size:.94rem;font-weight:700}
.commander{
  font-family:var(--util);font-size:.72rem;font-weight:600;text-decoration:none;cursor:pointer;
  padding:.36rem .8rem;border:1px solid var(--vert);border-radius:999px;color:var(--vert);
  transition:background .25s,color .25s;
}
.commander:hover{background:var(--vert);color:var(--craie)}
.compte-livres{font-family:var(--util);font-size:.74rem;color:var(--gris-clair);margin-top:1.6rem}
.apres-livres{display:grid;gap:.9rem;justify-items:start;margin-top:1.4rem;max-width:46ch}
.apres-livres p{font-weight:300;color:var(--gris)}
@media (min-width:640px){.livres{grid-template-columns:repeat(3,1fr);gap:2.2rem 1.6rem}}
@media (min-width:1000px){.livres{grid-template-columns:repeat(4,1fr)}}

/* formations */
.formation{
  margin:0 calc(-1*var(--gout));padding:4.4rem var(--gout) 4.8rem;background:var(--vert);color:var(--craie);
  display:grid;gap:2.6rem;
}
.formation>*{max-width:var(--max);margin-inline:auto;width:100%}
.formation-texte{display:grid;gap:1.1rem;justify-items:start}
.formation-texte h2{font-size:clamp(1.9rem,4vw,2.9rem);color:var(--craie);margin-top:.4rem}
.formation-texte p{font-weight:300;color:var(--vert-pale);max-width:52ch}
.formation-note{padding-top:1rem;border-top:1px solid var(--trait-nuit)}
.formation-texte .bouton{margin-top:.5rem}
.formation-vues{display:grid;gap:1.1rem}
.formation-vues figure{margin:0;overflow:hidden;border-radius:3px}
.formation-vues img{width:100%;aspect-ratio:3/2;object-fit:cover}
.vue-haute img{aspect-ratio:4/3}
@media (min-width:920px){
  .formation{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4rem;align-items:center}
  .formation>*{max-width:none;margin-inline:0}
  .formation-texte{grid-column:1}
  .formation-vues{grid-column:2;grid-template-columns:1fr 1fr;gap:1.1rem}
  .vue-haute{grid-column:span 2}
}

/* promotions */
.promotions{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.promotions figure{margin:0;overflow:hidden;border-radius:3px;background:var(--papier-3)}
.promotions img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){
  .promotions:hover figure{opacity:.5;transition:opacity .45s var(--ease)}
  .promotions figure:hover{opacity:1}
  .promotions figure:hover img{transform:scale(1.04)}
}
@media (min-width:700px){.promotions{grid-template-columns:repeat(4,1fr);gap:1.2rem}}
@media (min-width:1080px){.promotions{grid-template-columns:repeat(6,1fr)}}

/* nous trouver */
.venir{
  margin:0 calc(-1*var(--gout));padding:4.4rem var(--gout) 4.8rem;background:var(--vert-2);color:var(--craie);
  display:grid;gap:2.6rem;align-items:center;
}
.venir>*{max-width:var(--max);margin-inline:auto;width:100%}
.venir-texte{display:grid;gap:1.1rem;justify-items:start}
.venir-texte h2{font-size:clamp(1.9rem,4vw,2.9rem);color:var(--craie);margin-top:.4rem}
.venir-texte p{font-weight:300;color:var(--vert-pale);max-width:44ch}
.coordonnees{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.95rem;width:100%;max-width:34rem}
.coordonnees li{display:grid;gap:.1rem;padding-bottom:.85rem;border-bottom:1px solid var(--trait-nuit)}
.coordonnees span{font-family:var(--util);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#E4BC76}
.coordonnees a{font-size:1.04rem;text-decoration:none;word-break:break-word}
.coordonnees a:hover{color:#E4BC76}
.venir-image{margin:0;justify-self:center;width:100%;max-width:340px}
.venir-image img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
@media (min-width:920px){
  .venir{grid-template-columns:1.15fr .85fr;column-gap:4rem}
  .venir>*{max-width:none;margin-inline:0}
}

/* pied */
.pied{margin:0 calc(-1*var(--gout));padding:2.8rem var(--gout) 1.5rem;background:var(--encre);color:var(--gris-clair)}
.pied-zone{max-width:var(--max);margin-inline:auto}
.pied-nom{font-family:var(--lecture);font-size:1.3rem;font-weight:400;color:var(--craie)}
.pied-mot{font-family:var(--util);font-size:.76rem;font-weight:400;letter-spacing:.06em;margin-top:.4rem}
.pied-bas{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid #32362F;font-family:var(--util);font-size:.72rem}

/* mouvement */
@keyframes monte{from{opacity:0;transform:translateY(.55em)}to{opacity:1;transform:none}}
@keyframes parait{from{opacity:0}to{opacity:1}}
@keyframes pose{from{opacity:0;transform:translateY(1.4em)}to{opacity:1;transform:none}}
.ouverture .mot-cle{animation:monte .85s var(--ease) .06s both}
.ouverture h1{animation:monte 1s var(--ease) .16s both}
.ouverture .amorce{animation:monte .9s var(--ease) .34s both}
.ouverture .actes{animation:monte .9s var(--ease) .46s both}
.rayon{animation:parait 1.2s var(--ease) .4s both}
.js .livre{animation:pose .7s var(--ease) both;animation-delay:calc(.05s + var(--i,0)*.05s)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}