/* =========================================================
   R TUTORIAL — STYLESHEET
   Aligné sur la charte graphique Aix-Marseille Université
   (©Studio Plastac, mise à jour 19/03/25) :
   - Couleurs : gamme principale (bleu #1F63DE / noir / jaune / blanc)
     et gamme secondaire-tertiaire pour les blocs annexes.
     Règle de la charte : ne pas associer bleu + jaune, mais plutôt
     bleu + blanc, ou jaune + noir.
   - Typographie : "AMU Monument Grotesk" (police propriétaire) avec
     Arial comme police de repli officiellement recommandée.
   - Règles typographiques : pas de texte tout en capitales, texte
     toujours aligné à gauche, 3 corps de texte maximum.
   Edit the variables in :root to change the whole palette,
   or tweak individual rules further down.
   ========================================================= */

:root{
  --paper:#FFFFFF;           /* Blanc — amU */
  --paper-2:#CDEAFC;         /* Bleu clair — gamme tertiaire */
  --ink:#000000;             /* Noir — amU */
  --ink-soft:#3A3A3A;
  --accent:#1F63DE;          /* Bleu — gamme principale (Pantone 285C) */
  --accent-deep:#14448F;
  --amber:#FED100;           /* Jaune or — gamme secondaire (associé au noir, jamais au bleu) */
  --line:#CFE4F7;
  --code-bg:#F2F2F2;
  --code-ink:#000000;
  --warn-bg:#FFD4CC;         /* Corail pâle — gamme tertiaire */
  --warn-accent:#B25600;     /* Brique — gamme tertiaire */
  --ok-bg:#CAFEE4;           /* Vert clair — gamme tertiaire */
  --obj-bg:#FFFFBF;          /* Jaune pâle — gamme tertiaire (jaune + noir) */
  --obj-border:#B2861B;      /* Ocre — gamme tertiaire */
  --radius:2px;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Arial', 'Helvetica', sans-serif;
  line-height:1.55;
  text-align:left; /* la charte impose un texte toujours féré à gauche */
}

::selection{background:var(--accent);color:var(--paper);}

h1,h2,h3,h4, .title, .quarto-title h1{
  font-family:'Arial', 'Helvetica', sans-serif !important;
  font-weight:700; /* équivalent du "Bold" AMU Monument Grotesk pour la hiérarchie des titres */
  letter-spacing:normal;
  text-transform:none; /* la charte interdit les titres tout en capitales */
}

.quarto-title-banner{
  background:var(--paper);
}

code{
  font-family:'JetBrains Mono', monospace;
  background:var(--paper-2);
  border-radius:3px;
}

pre code{
  background:transparent;
}

pre{
  background:var(--code-bg) !important;
  color:var(--code-ink) !important;
  border-radius:var(--radius);
}

/* ---------- Hero / directory-tree block ---------- */
.hero-tree{
  font-family:'JetBrains Mono', monospace;
  font-size:.82rem;
  color:var(--ink-soft);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.1em 1.4em;
  display:inline-block;
  line-height:1.6;
}
.hero-tree .dir{color:var(--accent-deep);font-weight:600;}
.hero-tree .file{color:var(--ink-soft);}
.hero-tree .cursor{
  display:inline-block;
  width:.55em;height:1em;
  background:var(--accent);
  vertical-align:text-bottom;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

.path-crumb{
  font-family:'JetBrains Mono', monospace;
  font-size:.8rem;
  color:var(--ink-soft);
  margin-bottom:1em;
}
.path-crumb .here{color:var(--accent-deep);font-weight:600;}

/* ---------- Reminder tip box ---------- */
.tip{
  background:var(--paper-2);
  border-left:3px solid var(--accent);
  padding:1.1em 1.3em;
  margin:1.6em 0;
  border-radius:var(--radius);
}
.tip > :first-child{margin-top:0;}
.tip p, .tip ul, .tip li{color:var(--ink-soft);font-size:.94rem;}
.tip table{
  width:100%;
  border-collapse:collapse;
  margin:.8em 0;
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
}
.tip table th, .tip table td{
  border:1px solid var(--line);
  padding:.4em .6em;
  text-align:center;
}
.tip table th{background:var(--paper);color:var(--ink-soft);font-weight:600;}

/* ---------- Warning box ---------- */
.warning{
  background:var(--warn-bg);
  border-left:3px solid var(--warn-accent);
  border-radius:var(--radius);
  padding:1.1em 1.3em;
  margin:1.6em 0 2em;
}
.warning > :first-child{margin-top:0;}
.warning p, .warning li{font-size:.94rem;}

/* ---------- Objectives box ---------- */
.objective{
  background:var(--obj-bg);
  border:1px solid var(--obj-border);
  border-radius:var(--radius);
  padding:1.1em 1.3em;
  margin:1.6em 0 2em;
}
.objective > :first-child{margin-top:0;}
.objective p, .objective li{font-size:.94rem;}

/* ---------- Question cards ---------- */
.qcard{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:1.3em 1.5em;
  margin-bottom:1.6em;
}
.qcard > :first-child{margin-top:0;}
.qcard .scn{color:var(--accent-deep);}

/* ---------- Cascading hint controls ---------- */
.cascade{
  display:flex;
  flex-wrap:wrap;
  gap:.6em;
  margin-top:1em;
}
.step-btn{
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:.5em 1em;
  cursor:pointer;
  transition:all .15s ease;
  display:inline-flex;align-items:center;gap:.5em;
}
.step-btn:hover{border-color:var(--accent);color:var(--accent-deep);}
.step-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.step-btn .dot{width:.5em;height:.5em;border-radius:50%;background:var(--line);display:inline-block;}
.step-btn.hint .dot{background:var(--amber);}
.step-btn.sol .dot{background:var(--accent);}
.step-btn[disabled]{opacity:.35;cursor:not-allowed;}

.reveal{
  margin-top:.8em;
  padding:1em 1.2em;
  border-radius:var(--radius);
  font-size:.92rem;
  display:none;
}
.reveal.hint-box{background:#FFFFBF;border:1px solid #B2861B;color:#000000;} /* jaune pâle + ocre + noir, conforme à la règle "jaune + noir" */
.reveal.sol-box{background:var(--ok-bg);border:1px solid #009A74;color:var(--ink);} /* vert clair + vert émeraude, gamme tertiaire */
.reveal.show{display:block;}
.reveal pre{margin-top:.6em;}
.reveal > :first-child{margin-top:0;}

.progress-track{
  height:3px;
  background:var(--line);
  border-radius:2px;
  margin-top:.9em;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width .3s ease;
}

/* ---------- Top navigation ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom:1px solid var(--line);
  padding:.55rem 0rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.topbar-home{
  display:inline-flex;
  align-items:center;
  gap:.5em;

  color:var(--ink-soft);
  font-family:'Inter', sans-serif;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;

  padding:.35em .65em;
  border-radius:var(--radius);

  transition:
    color .15s ease,
    background-color .15s ease;
}

.topbar-home:hover{
  color:var(--accent-deep);
  background:var(--paper-2);
  text-decoration:none;
}

.topbar-home:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

#tutorial-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.tutorial-nav-link {
  white-space: nowrap;
}

/* ---------- Misc ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

.btn-outline-light {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-bg: transparent;
}

.menu,
.menu:hover {
  color: var(--ink-soft);
  text-decoration: none !important;
}