/* ============================================================
   Collection « pas à pas » — feuille de style commune
   Palette reprise des blocs de code des livres.
   Une seule feuille pour tout le site : ne dupliquez pas ce fichier.
   ============================================================ */

:root{
  /* ══════════════════════════════════════════════════════════════════
     LA PALETTE. C'est le seul endroit à modifier pour changer les
     couleurs de TOUT le site : les six pages, les boutons, les cartes,
     l'atelier d'exercices et le formulaire de commande.

     Pour essayer des couleurs sans rien casser, ouvrez outils/couleurs.html
     dans votre navigateur : vous voyez le résultat en direct et vous
     copiez-collez le bloc obtenu ici, à la place de celui-ci.

     Les six premières se choisissent. Les cinq suivantes en découlent :
     si vous changez les premières, ajustez les secondes dans le même
     esprit (ou laissez l'outil les calculer).
     ══════════════════════════════════════════════════════════════════ */

  --encre:#16212B;        /* fonds sombres : en-tête, hero, récapitulatif  */
  --craie:#E8EEF4;        /* texte posé sur ces fonds sombres              */
  --papier:#F4F6F8;       /* fond des sections claires                     */
  --texte:#16212B;        /* texte principal sur fond clair                */
  --ocre:#B85C00;         /* couleur d'accent : boutons, titres de section */
  --vert:#2E7D46;         /* seconde couleur : « disponible », coches      */

  --ardoise:#22303D;      /* dérivée de l'encre, un cran plus claire       */
  --ardoise-clair:#2F4150;/* dérivée de l'encre, deux crans plus claire    */
  --craie-faible:#A9B8C6; /* craie atténuée, pour les textes secondaires   */
  --ocre-clair:#E08A2B;   /* ocre éclairci : survol, sur fond sombre       */
  --papier-pur:#FFFFFF;   /* blanc des cartes                              */
  --texte-faible:#556575; /* texte secondaire sur fond clair               */
  --trait:#D7DEE5;        /* filets et bordures                            */

  /* Polices. Si vous les changez, changez aussi le lien vers Google
     Fonts en haut de chaque page HTML. */
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --corps:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pas:clamp(28px,4.2vw,64px);
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--texte);
  font-family:var(--corps);font-size:clamp(17px,1.15vw,19px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ocre-clair);outline-offset:3px;border-radius:2px}
.enveloppe{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
.sourcil{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocre);margin:0 0 14px
}
.sourcil.pale{color:var(--ocre-clair)}
.chapo{font-size:1.08em;color:var(--texte-faible);max-width:60ch}
.sur-encre .chapo{color:var(--craie-faible)}
code{font-family:var(--mono);font-size:.86em}

/* ---------- boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;padding:15px 26px;border-radius:3px;border:2px solid transparent;
  cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease;
}
.bouton:hover{transform:translateY(-2px)}
.bouton-plein{background:var(--ocre);color:#fff}
.bouton-plein:hover{background:var(--ocre-clair)}
.bouton-trait{border-color:currentColor;background:none}
.bouton-trait:hover{background:rgba(255,255,255,.08)}
.sur-papier .bouton-trait:hover,.sur-blanc .bouton-trait:hover{background:rgba(22,33,43,.06)}
.bouton[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.bouton-petit{padding:10px 18px;font-size:12.5px}

/* ---------- en-tête de site ---------- */
.entete-site{
  position:sticky;top:0;z-index:50;background:var(--encre);color:var(--craie);
  border-bottom:1px solid var(--ardoise-clair)
}
.entete-site .enveloppe{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.marque{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:#fff}
.marque-nom{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.marque-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ocre-clair)}
.nav{display:flex;align-items:center;gap:24px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.nav a{text-decoration:none;color:var(--craie-faible);padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--ocre)}

/* ---------- sections ---------- */
section{padding:clamp(64px,8vw,110px) 0}
.sur-papier{background:var(--papier)}
.sur-blanc{background:var(--papier-pur)}
.sur-encre{background:var(--encre);color:var(--craie)}
.sur-encre h2,.sur-encre h3{color:#fff}
.entete{max-width:64ch;margin-bottom:clamp(36px,4.5vw,56px)}

/* ---------- hero ---------- */
.hero{background:var(--encre);color:var(--craie);padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,112px)}
.hero-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(42px,7vw,86px);color:#fff}
.hero h1 em{font-style:normal;display:block;color:var(--ocre-clair);padding-left:var(--pas);position:relative}
.hero h1 em::before{content:"";position:absolute;left:calc(var(--pas)*.34);top:.18em;bottom:.12em;width:2px;background:var(--ardoise-clair)}
.hero .chapo{color:var(--craie-faible);margin-top:22px;font-size:1.12em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-preuve{font-family:var(--mono);font-size:12.5px;color:var(--craie-faible);margin-top:26px;letter-spacing:.03em}

/* ---------- bandeau ---------- */
.bandeau{
  background:var(--ardoise);color:var(--craie);font-family:var(--mono);font-size:12.5px;
  letter-spacing:.04em;padding:11px 24px;text-align:center
}
.bandeau strong{color:var(--ocre-clair);font-weight:700}

/* ---------- bloc de code ---------- */
.terminal{
  background:var(--ardoise);border:1px solid var(--ardoise-clair);border-radius:6px;
  overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.9)
}
.terminal-barre{
  display:flex;align-items:center;gap:8px;padding:11px 14px;background:rgba(0,0,0,.22);
  border-bottom:1px solid var(--ardoise-clair);font-family:var(--mono);font-size:11.5px;color:var(--craie-faible)
}
.pastille{width:9px;height:9px;border-radius:50%;background:var(--ardoise-clair)}
.terminal pre{margin:0;padding:22px 20px;font-family:var(--mono);font-size:13.5px;line-height:1.85;color:var(--craie);overflow-x:auto}
.cm{color:#7F93A5}.kw{color:var(--ocre-clair)}.st{color:#8FCBA4}.fn{color:#9EC5E8}
.curseur{display:inline-block;width:8px;height:1.05em;background:var(--ocre-clair);vertical-align:-2px;animation:clignote 1.15s steps(2) infinite}
@keyframes clignote{50%{opacity:0}}

/* ---------- catalogue de livres ---------- */
.catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.livre{
  background:var(--papier-pur);border:1px solid var(--trait);display:flex;flex-direction:column;
  transition:border-color .18s ease,transform .18s ease
}
.livre:hover{border-color:var(--encre);transform:translateY(-3px)}
.livre-dos{
  background:var(--encre);color:var(--craie);padding:26px 24px 22px;position:relative;overflow:hidden
}
.livre-dos::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--tranche,var(--ocre))
}
.livre-matiere{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ocre-clair);margin:0 0 10px}
.livre-titre{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0}
.livre-titre span{display:block;color:var(--ocre-clair);font-size:20px;margin-top:2px}
.livre-corps{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.livre-corps p{font-size:.94em;color:var(--texte-faible);margin:0 0 16px}
.livre-faits{font-family:var(--mono);font-size:11.5px;color:var(--texte-faible);letter-spacing:.03em;margin:0 0 18px}
.livre-pied{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.etat{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border:1px solid currentColor
}
.etat-dispo{color:var(--vert)}
.etat-bientot{color:var(--texte-faible)}
.etat-ecriture{color:var(--ocre)}

/* ---------- cartes génériques ---------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait)}
.carte{background:var(--papier-pur);padding:30px 26px}
.carte .num{font-family:var(--mono);font-size:12px;color:var(--ocre);letter-spacing:.14em;display:block;margin-bottom:12px}
.carte h3{margin-bottom:10px}
.carte p{margin:0;font-size:.95em;color:var(--texte-faible)}

/* ---------- parcours en escalier ---------- */
.parcours{margin-top:8px}
.marche{
  position:relative;padding:26px 0 26px 28px;border-left:2px solid var(--ardoise-clair);
  opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease
}
.marche.vue{opacity:1;transform:none}
.marche::before{content:"";position:absolute;left:-6px;top:34px;width:10px;height:10px;background:var(--ocre);border-radius:2px}
.marche-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.marche-num{font-family:var(--mono);font-size:12px;color:var(--ocre-clair);letter-spacing:.14em}
.marche-ch{font-family:var(--mono);font-size:12px;color:var(--craie-faible);letter-spacing:.06em}
.marche h3{color:#fff;font-size:clamp(19px,2.2vw,27px);flex-basis:100%;margin-top:2px}
.marche p{color:var(--craie-faible);margin:10px 0 0;max-width:58ch;font-size:.96em}
.marche:nth-child(1){margin-left:0}
.marche:nth-child(2){margin-left:var(--pas)}
.marche:nth-child(3){margin-left:calc(var(--pas)*2)}
.marche:nth-child(4){margin-left:calc(var(--pas)*3)}
.marche:nth-child(5){margin-left:calc(var(--pas)*4)}
.marche:nth-child(6){margin-left:calc(var(--pas)*5)}
.legende-parcours{font-family:var(--mono);font-size:12px;color:var(--craie-faible);margin-top:34px;letter-spacing:.03em}

/* ---------- chiffres ---------- */
.livraison{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
.item{border-top:2px solid var(--encre);padding-top:18px}
.item .chiffre{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.5vw,48px);line-height:1;letter-spacing:-.03em}
.item .quoi{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ocre);margin:10px 0 8px}
.item p{font-size:.93em;color:var(--texte-faible);margin:0}

/* ---------- encadré ---------- */
.encadre{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;
  border:2px solid var(--encre);padding:clamp(28px,4vw,48px);background:var(--papier-pur)
}
.encadre ul{margin:0;padding-left:1.1em;color:var(--texte-faible);font-size:.95em}
.encadre li{margin-bottom:6px}

/* ---------- tarifs ---------- */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;align-items:stretch}
.offre{background:var(--papier-pur);border:1px solid var(--trait);padding:32px 28px;display:flex;flex-direction:column}
.offre.vedette{border:2px solid var(--ocre);position:relative}
.offre.vedette::after{
  content:"Le plus choisi";position:absolute;top:-11px;left:26px;background:var(--ocre);color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px
}
.offre h3{margin-bottom:6px}
.offre .format{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-faible)}
.prix{font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.03em;margin:16px 0 4px}
.prix span{font-size:17px;font-weight:600;color:var(--texte-faible)}
.offre ul{list-style:none;padding:0;margin:20px 0 26px;font-size:.93em;color:var(--texte-faible);flex:1}
.offre li{padding-left:22px;position:relative;margin-bottom:9px}
.offre li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:2px;background:var(--vert)}
.offre .bouton{width:100%}

/* ---------- auteur ---------- */
.auteur{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3.5vw,44px);align-items:start}
.initiale{
  width:96px;height:96px;display:grid;place-items:center;background:var(--encre);color:var(--ocre-clair);
  font-family:var(--display);font-weight:800;font-size:42px;border-radius:3px
}

/* ---------- faq ---------- */
.faq{max-width:80ch}
details{border-bottom:1px solid var(--trait);padding:20px 0}
summary{
  font-family:var(--display);font-weight:600;font-size:1.06em;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--ocre);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;color:var(--texte-faible);font-size:.95em;max-width:70ch}

/* ---------- atelier d'exercices ---------- */
.atelier{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
.liste-exos{
  background:var(--papier-pur);border:1px solid var(--trait);
  position:sticky;top:78px;max-height:calc(100vh - 110px);overflow:auto
}
.liste-exos h3{padding:18px 20px 12px;font-size:15px;font-family:var(--mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-faible)}
.exo-lien{
  display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--trait);
  padding:14px 20px;font-family:var(--corps);font-size:.94em;cursor:pointer;color:var(--texte)
}
.exo-lien:hover{background:var(--papier)}
.exo-lien[aria-current="true"]{background:var(--encre);color:#fff}
.exo-lien .exo-ref{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ocre);display:block;margin-bottom:3px}
.exo-lien[aria-current="true"] .exo-ref{color:var(--ocre-clair)}
.exo-lien.reussi::after{content:" ✓";color:var(--vert);font-weight:700}

.pupitre{background:var(--papier-pur);border:1px solid var(--trait)}
.pupitre-enonce{padding:26px 28px;border-bottom:1px solid var(--trait)}
.pupitre-enonce h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:10px}
.pupitre-enonce .consigne{color:var(--texte-faible);font-size:.96em;margin:0}
.pupitre-enonce .indice{margin-top:14px;font-size:.92em}
.editeur{
  width:100%;border:0;border-bottom:1px solid var(--trait);resize:vertical;min-height:230px;
  padding:20px 24px;background:var(--encre);color:var(--craie);
  font-family:var(--mono);font-size:13.5px;line-height:1.75;tab-size:4
}
.editeur:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ocre)}
.barre-outils{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--trait)}
.etat-moteur{font-family:var(--mono);font-size:11.5px;color:var(--texte-faible);letter-spacing:.04em;margin-left:auto}
.console{
  margin:0;padding:20px 24px;background:var(--ardoise);color:var(--craie);
  font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
  min-height:110px;max-height:340px;overflow:auto
}
.console .ok{color:#8FCBA4}
.console .ko{color:#E8A0A0}
.console .info{color:var(--craie-faible)}

/* ---------- pied de page ---------- */
footer{background:var(--encre);color:var(--craie-faible);padding:56px 0 44px;font-size:.9em}
footer a{color:var(--craie);text-decoration:none;border-bottom:1px solid var(--ardoise-clair)}
footer a:hover{border-color:var(--ocre-clair)}
.pied-grille{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.pied-mentions{font-family:var(--mono);font-size:11.5px;line-height:1.9;max-width:52ch}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .atelier{grid-template-columns:1fr}
  .liste-exos{position:static;max-height:none}
}
@media (max-width:860px){
  .hero-grille,.encadre,.auteur{grid-template-columns:1fr}
  .auteur{gap:24px}
  .marche:nth-child(n){margin-left:0}
  .marche{padding-left:22px}
  .nav{gap:16px;font-size:11.5px}
  .entete-site .enveloppe{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .marche{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- formulaire de commande ---------- */
.commande{display:grid;grid-template-columns:1fr 340px;gap:clamp(24px,3vw,44px);align-items:start}
.commande .form-bloc{margin-bottom:30px}
.form-titre{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ocre);margin:0 0 14px
}
.choix{display:grid;gap:12px}
.option{
  display:grid;grid-template-columns:1fr auto;gap:4px 16px;text-align:left;
  background:var(--papier-pur);border:1px solid var(--trait);border-radius:0;
  padding:16px 18px;cursor:pointer;font-family:var(--corps);color:var(--texte);
  transition:border-color .15s ease,background .15s ease
}
.option:hover{border-color:var(--encre)}
.option.actif{border:2px solid var(--ocre);background:#fff}
.option-titre{font-family:var(--display);font-weight:600;font-size:1.02em}
.option-detail{grid-column:1;font-size:.88em;color:var(--texte-faible)}
.option-prix{
  grid-row:1 / span 2;align-self:center;font-family:var(--mono);font-size:14px;
  font-weight:700;color:var(--encre);white-space:nowrap
}
.note{font-size:.88em;color:var(--texte-faible);margin:12px 0 0;max-width:60ch}

.champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ-large{grid-column:1 / -1}
.champ span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--texte-faible)}
.champ input{
  font-family:var(--corps);font-size:.98em;padding:12px 14px;width:100%;min-width:0;
  border:1px solid var(--trait);background:var(--papier-pur);color:var(--texte)
}
.champ input:focus{outline:none;border-color:var(--ocre);box-shadow:0 0 0 1px var(--ocre)}

.recap{
  background:var(--encre);color:var(--craie);padding:26px 24px;position:sticky;top:78px
}
.recap-titre{font-family:var(--display);font-weight:800;font-size:19px;color:#fff;margin:0 0 16px}
.recap-ligne{
  display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--ardoise-clair);font-size:.92em;color:var(--craie-faible)
}
.recap-ligne span:last-child{color:var(--craie);text-align:right}
.recap-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 0 20px;font-family:var(--display);font-weight:800;font-size:22px;color:#fff
}
.recap .bouton{width:100%}
.recap-note,.recap-manque,.recap-mention{font-size:.85em;margin:14px 0 0;color:var(--craie-faible)}
.recap-manque{color:var(--ocre-clair)}
.recap-mention{font-size:.78em;padding-top:12px;border-top:1px solid var(--ardoise-clair)}
.recap-vide{color:var(--craie-faible);margin:0;font-size:.92em}
.recap-copie{
  margin:14px 0 0;padding:14px;background:var(--ardoise);border:1px solid var(--ardoise-clair);
  font-family:var(--mono);font-size:11px;line-height:1.6;white-space:pre-wrap;color:var(--craie);
  max-height:220px;overflow:auto
}

@media (max-width:860px){
  .commande{grid-template-columns:1fr}
  .champs{grid-template-columns:1fr}
  .recap{position:static}
}

/* ---------- atelier web : onglets, aperçu ---------- */
.onglets{display:flex;gap:4px;margin-bottom:26px;border-bottom:1px solid var(--trait)}
.onglets a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-decoration:none;
  padding:11px 18px;color:var(--texte-faible);border:1px solid transparent;border-bottom:0;
  margin-bottom:-1px
}
.onglets a:hover{color:var(--texte)}
.onglets a[aria-current="page"]{
  background:var(--papier-pur);border-color:var(--trait);color:var(--texte);font-weight:700
}
.etiquette-langue{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ocre);margin:12px 0 0
}
.pupitre-web{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--trait)}
.pupitre-web .editeur{border-bottom:0;border-right:1px solid var(--ardoise-clair);min-height:290px}
.apercu{width:100%;min-height:290px;border:0;background:#fff}
#exo-fourni pre{
  margin:10px 0 0;padding:12px 14px;background:var(--encre);color:var(--craie);
  font-family:var(--mono);font-size:11.5px;line-height:1.6;white-space:pre-wrap;overflow:auto
}
@media (max-width:900px){
  .pupitre-web{grid-template-columns:1fr}
  .pupitre-web .editeur{border-right:0;border-bottom:1px solid var(--trait)}
}