/* prompt-engineering.blog — charte
   Palette : papier #F2F4F3 · encre #14161A · acier #46505A · cobalt #1F49C7 · fil #CBD2CE */

:root{
  --papier:#F2F4F3;
  --encre:#14161A;
  --acier:#46505A;
  --cobalt:#1F49C7;
  --fil:#CBD2CE;
  --mesure:66ch;
  --display:Futura,"Century Gothic","Trebuchet MS",Verdana,sans-serif;
  --texte:Charter,"Bitstream Charter","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:1.075rem;
  line-height:1.65;
}

a{color:var(--cobalt);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:2px}

/* ---- en-tête ---- */
header.site{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:56rem;margin:0 auto;padding:1.1rem 1.25rem .9rem;
  border-bottom:1px solid var(--fil);
}
.marque{font-family:var(--display);font-size:1.02rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre);text-decoration:none}
.marque b{color:var(--cobalt)}
nav.site{display:flex;gap:1.15rem;flex-wrap:wrap}
nav.site a{font-family:var(--display);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--acier)}
nav.site a[aria-current="page"],nav.site a:hover{color:var(--cobalt)}

/* ---- structure à règle-guide ---- */
main{max-width:56rem;margin:0 auto;padding:0 1.25rem 4rem}
.etape{
  position:relative;
  border-left:2px solid var(--cobalt);
  margin:2.6rem 0;
  padding:0 0 0 1.6rem;
}
.etape > .cran{
  position:absolute;left:-1.05rem;top:.15rem;
  background:var(--papier);
  font-family:var(--display);font-size:.8rem;letter-spacing:.1em;
  color:var(--cobalt);
  padding:.1rem 0;
  writing-mode:vertical-rl;text-orientation:mixed;
}
.etape h2{margin:0 0 .6rem;font-family:var(--display);font-size:1.35rem;letter-spacing:.02em;line-height:1.25}
.etape h3{margin:1.4rem 0 .35rem;font-family:var(--display);font-size:1.02rem;letter-spacing:.04em}
.etape p{margin:.55rem 0;max-width:var(--mesure)}
.sourdine{color:var(--acier);font-size:.95rem}

/* ---- héros : la correction d'épreuve ---- */
.heros{padding:3.4rem 0 1rem;border-left:2px solid var(--cobalt);margin-top:2.2rem;padding-left:1.6rem}
.heros .sur-titre{font-family:var(--display);font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--acier);margin:0 0 1rem}
h1.correction{
  font-family:var(--display);
  font-size:clamp(1.9rem,5.2vw,3.15rem);
  line-height:1.14;letter-spacing:.005em;
  margin:0 0 1.1rem;max-width:24ch;
}
.rature{position:relative;white-space:nowrap}
.rature .trait{
  position:absolute;left:-2%;right:-2%;top:54%;height:.09em;
  background:var(--cobalt);transform:rotate(-1.6deg);transform-origin:left center;
}
.insertion{
  display:block;font-size:.5em;color:var(--cobalt);
  margin-top:.28em;letter-spacing:.04em;
}
.insertion::before{content:"↳ ";font-family:var(--mono)}
@media (prefers-reduced-motion:no-preference){
  .rature .trait{animation:biffer .6s ease-out .35s both}
  .insertion{animation:paraitre .5s ease-out .95s both}
  @keyframes biffer{from{width:0;right:auto}to{width:104%;right:auto}}
  @keyframes paraitre{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}
}
.heros .these{font-size:1.18rem;max-width:var(--mesure);margin:.4rem 0 1.5rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.2rem 0 .4rem}
.bouton{
  font-family:var(--display);font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:.72rem 1.15rem;border:2px solid var(--cobalt);border-radius:3px;
  color:var(--cobalt);background:transparent;cursor:pointer;
}
.bouton.plein{background:var(--cobalt);color:var(--papier)}
.bouton:hover{background:var(--encre);border-color:var(--encre);color:var(--papier)}

/* ---- fiches techniques (geste / donne / plafond) ---- */
.fiche{border-top:1px solid var(--fil);padding:1.2rem 0 .4rem;max-width:var(--mesure)}
.fiche h3{margin:.1rem 0 .5rem}
.fiche dl{margin:0}
.fiche dt{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acier);margin-top:.6rem}
.fiche dd{margin:.15rem 0 0}
.fiche dd.plafond{color:var(--encre)}
.fiche dd.plafond::before{content:"— ";color:var(--cobalt)}

/* ---- signaux, listes de travail ---- */
ul.travail{padding-left:1.1rem;max-width:var(--mesure)}
ul.travail li{margin:.5rem 0}
ul.travail li b{font-family:var(--display);font-weight:600;letter-spacing:.02em}

/* ---- bloc protocole ---- */
.protocole{
  background:var(--encre);color:#E8ECEA;border-radius:6px;
  padding:1.1rem 1.2rem;max-width:var(--mesure);
  font-family:var(--mono);font-size:.86rem;line-height:1.55;
  white-space:pre-wrap;overflow-x:auto;position:relative;
}
.copie{
  position:absolute;top:.7rem;right:.7rem;
  font-family:var(--display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--papier);color:var(--encre);border:0;border-radius:3px;
  padding:.4rem .6rem;cursor:pointer;
}
.copie:hover{background:var(--cobalt);color:var(--papier)}

/* ---- volumes ---- */
.volume{border-top:1px solid var(--fil);padding:1.3rem 0;max-width:var(--mesure)}
.volume .numero{font-family:var(--display);color:var(--cobalt);letter-spacing:.18em;font-size:.8rem;text-transform:uppercase}
.volume h3{margin:.25rem 0 .4rem;font-size:1.2rem}
.phrase-collection{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.03em;
  border-left:2px solid var(--cobalt);padding:.4rem 0 .4rem 1rem;margin:1.6rem 0;max-width:var(--mesure);
}

/* ---- encadré chiffres sobres ---- */
.mesures{display:flex;gap:2.2rem;flex-wrap:wrap;margin:1.4rem 0;max-width:var(--mesure)}
.mesures div{min-width:12rem;flex:1}
.mesures .chiffre{font-family:var(--display);font-size:1.6rem;color:var(--cobalt)}
.mesures p{margin:.2rem 0 0;font-size:.92rem;color:var(--acier)}

/* ---- pied ---- */
footer.site{
  border-top:1px solid var(--fil);
  max-width:56rem;margin:0 auto;padding:1.4rem 1.25rem 2.4rem;
  font-size:.9rem;color:var(--acier);
  display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:space-between;
}
footer.site a{color:var(--acier)}
footer.site a:hover{color:var(--cobalt)}

@media (max-width:640px){
  .etape{padding-left:1.1rem}
  .etape > .cran{position:static;writing-mode:horizontal-tb;display:inline-block;margin-bottom:.3rem}
  .heros{padding-left:1.1rem}
}

/* ---- v1.2 : honnêteté, démonstration, banc d'essai ---- */
.cadre-honnete{border:1px solid var(--fil);border-left:3px solid var(--cobalt);background:#FFF;border-radius:4px;padding:.9rem 1.1rem;margin:1.3rem 0;max-width:var(--mesure);font-size:.98rem}
.cadre-honnete b{font-family:var(--display);letter-spacing:.03em}
.demo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:var(--mesure);margin:1.1rem 0}
@media (max-width:640px){.demo{grid-template-columns:1fr}}
.demo > div{border:1px solid var(--fil);border-radius:4px;padding:.8rem .95rem;background:#FFF}
.demo h4{margin:.1rem 0 .5rem;font-family:var(--display);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acier)}
.demo .tour{font-family:var(--mono);font-size:.82rem;line-height:1.5;margin:.4rem 0;white-space:pre-wrap}
.demo .annot{display:block;color:var(--cobalt);font-style:italic;font-size:.86rem;margin:.15rem 0 .6rem}
.demo .annot::before{content:"\2196  "}
.etiquette{font-size:.88rem;color:var(--acier);font-style:italic;max-width:var(--mesure)}
ol.banc{max-width:var(--mesure);padding-left:1.2rem}
ol.banc li{margin:.55rem 0}
.grille{border-top:1px solid var(--fil);margin-top:1rem;padding-top:.8rem;max-width:var(--mesure)}

/* ---- pages livres : exergues ---- */
.extrait{font-family:var(--texte);font-style:italic;font-size:1.14rem;border-left:2px solid var(--cobalt);padding:.35rem 0 .35rem 1rem;margin:1.15rem 0;max-width:var(--mesure)}
.extrait cite{display:block;font-style:normal;font-family:var(--display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acier);margin-top:.4rem}