/* =========================================================================
   article-modern.css
   --------------------------------------------------------------------------
   Style éditorial inspiré du PDF "cours_mysql_heidisql_phpmyadmin.pdf".

   Caractéristiques visuelles reprises du PDF :
   - Barre verticale violette le long du bord gauche du bandeau d'en-tête
   - Eyebrow text en violet majuscule espacé au-dessus du titre
   - Titre noir sobre (option .accent pour un mot en violet)
   - Pills pastel pour les tags (palette douce assortie)
   - Sections H2 en violet avec fine ligne horizontale
   - Bannières "PARTIE N" pleines couleur (option .ttr-partie)
   - Callouts pastel à bord gauche épais + libellé majuscule
   - Tableaux à en-tête plein violet, lignes alternées discrètes
   - Blocs de code navy avec coloration prism

   Couche purement additive : style.css + custom.css restent en place.
   Pour revenir au look précédent : retirer ce <link> dans base.njk.
   Sauvegarde du custom.css d'origine : static/css/custom.css.bak
   ========================================================================= */

/* ----- Tokens ----- */
:root {
  --am-violet:        #673ab7;          /* accent principal */
  --am-violet-soft:   #ede9f7;          /* fond pastel lavande */
  --am-violet-deep:   #4a2a8a;          /* hover / accent texte foncé */

  --am-mint:          #14b8a6;
  --am-mint-soft:     #e0f5f1;

  --am-peach:         #d97742;
  --am-peach-soft:    #fbeadd;

  --am-rose:          #d6336c;
  --am-rose-soft:     #fde2ec;

  --am-ink:           #1f2433;           /* texte principal */
  --am-ink-soft:      #525569;
  --am-line:          #e6e7ee;
  --am-line-strong:   #c8cad6;

  --am-bg-code:       #1f2433;           /* fond bloc de code (navy) */
  --am-bg-page:       #ffffff;

  --am-radius:        14px;
  --am-radius-sm:     10px;
  --am-radius-pill:   999px;
  --am-shadow-1:      0 1px 0 rgba(15,23,42,.04),
                      0 6px 14px -10px rgba(15,23,42,.18);
  --am-shadow-2:      0 1px 0 rgba(15,23,42,.05),
                      0 14px 30px -16px rgba(15,23,42,.3);
}

/* =========================================================================
   1. BANDEAU D'EN-TÊTE D'ARTICLE
      Barre verticale violette à gauche du bandeau + eyebrow + titre sobre.
   ========================================================================= */

#page_intro {
  background: #fff !important;
  position: relative;
  padding-top: 2.5rem !important;
  padding-bottom: 1.5rem;
}
#page_intro::before {
  /* Barre violette verticale type PDF */
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.25rem;
  left: 0;
  width: 5px;
  background: var(--am-violet);
  border-radius: 0 4px 4px 0;
}
#page_intro::after {
  /* Fine ligne horizontale qui sépare l'en-tête du corps */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--am-line);
}

/* Breadcrumb pill — on adoucit et on ajoute un effet eyebrow */
.font-base[class*="cours-bg-"] {
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .35rem .85rem !important;
  border-radius: var(--am-radius-pill);
  box-shadow: none;
  display: inline-block;
}

/* Titre H1 — noir, gros, lettre-spacing serré */
#doctitle {
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.08;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  color: var(--am-ink);
  margin-top: 1.5rem;
  margin-bottom: .65rem;
}
/* Option : envelopper un mot dans <span class="accent"> pour le mettre en violet */
#doctitle .accent { color: var(--am-violet); }

/* Lede / introduction */
#page_intro p:not(.no-fancy) {
  font-size: 1.075rem;
  line-height: 1.55;
  color: var(--am-ink-soft);
  max-width: 64ch;
  margin-bottom: 1.25rem;
}

/* Liste de méta (tags + level + langue) — pills pastel */
.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-left: 0;
}
.list-inline .badge.text-bg-primary {
  background: var(--am-violet-soft) !important;
  color: var(--am-violet-deep) !important;
  border: none;
  padding: .42em .9em;
  border-radius: var(--am-radius-pill);
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
}
.list-inline .list-inline-item {
  background: #fafafd;
  border: 1px solid var(--am-line);
  border-radius: var(--am-radius-pill);
  padding: .4em .85em !important;
  font-size: .82rem !important;
  color: var(--am-ink-soft);
  margin-bottom: 0 !important;
}
.list-inline .list-inline-item i { font-size: .85em; }

/* =========================================================================
   2. TITRES DE SECTION DANS LE CORPS
   ========================================================================= */

/* H2 = section principale, comme "Introduction" dans le PDF :
   violet, en majuscules optionnelles ou pas, fine ligne horizontale dessous */
.introduction h2 {
  position: relative;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--am-violet);
  border-bottom: 1px solid var(--am-line);
  scroll-margin-top: 80px;
}

/* H3 = sous-section, noir, plus petit, pas de décoration lourde */
.introduction h3 {
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--am-ink);
  margin-top: 2rem;
  margin-bottom: .65rem;
  scroll-margin-top: 80px;
}

/* H4 = sous-sous-section, violet doux */
.introduction h4 {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--am-violet-deep);
  margin-top: 1.4rem;
  margin-bottom: .5rem;
}

/* Séparateurs --- en ligne */
.introduction hr {
  border: none;
  height: 1px;
  background: var(--am-line);
  margin: 2.5rem 0;
}

/* =========================================================================
   3. BANNIÈRES "PARTIE N"
      À utiliser dans le markdown :
         <div class="ttr-partie" data-num="PARTIE 1">
           Titre de la partie
         </div>
      ou plus simplement, un H2 avec la classe .ttr-partie.
   ========================================================================= */

.ttr-partie,
.introduction h2.ttr-partie {
  background: var(--am-violet);
  color: #fff !important;
  border: none !important;
  border-radius: var(--am-radius-sm);
  padding: 1rem 1.25rem !important;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  letter-spacing: -.005em;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
}
.ttr-partie::before {
  content: attr(data-num);
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .25rem;
}

/* =========================================================================
   4. CALLOUTS / BOXES — soft pastel + libellé majuscule
      On garde la palette Bootstrap mais on la passe en pastel doux,
      avec une bordure gauche épaisse et un libellé optionnel.

      Pour ajouter un libellé, premier paragraphe en strong au début :
         **PRÉREQUIS** — Texte du callout...
      ou bien ajouter une classe `.callout-label` sur la première ligne.
   ========================================================================= */

.introduction blockquote,
.introduction .box-primary,
.introduction .box-secondary,
.introduction .box-success,
.introduction .box-info,
.introduction .box-question,
.introduction .box-warning,
.introduction .box-danger,
.introduction .box-light,
.introduction .box-dark,
.introduction .box-purple,
.introduction .box-blue,
.introduction .box-black {
  padding: 1rem 1.25rem !important;
  border-radius: var(--am-radius-sm) !important;
  border-left: 5px solid var(--am-violet) !important;
  background: var(--am-violet-soft) !important;
  color: var(--am-ink) !important;
  margin: 1.25rem 0;
  box-shadow: none;
}
.introduction blockquote > p:first-child,
.introduction .box-primary > p:first-child,
.introduction .box-info > p:first-child {
  margin-top: 0;
}
.introduction blockquote > p:last-child,
.introduction .box-primary > p:last-child,
.introduction .box-info > p:last-child {
  margin-bottom: 0;
}

/* Palette par variante — pastel doux, bord gauche assorti */
.introduction .box-primary,
.introduction .box-info {
  background: var(--am-violet-soft) !important;
  border-left-color: var(--am-violet) !important;
  color: var(--am-ink) !important;
}
.introduction .box-success {
  background: var(--am-mint-soft) !important;
  border-left-color: var(--am-mint) !important;
  color: var(--am-ink) !important;
}
.introduction .box-warning {
  background: var(--am-peach-soft) !important;
  border-left-color: var(--am-peach) !important;
  color: var(--am-ink) !important;
}
.introduction .box-danger {
  background: var(--am-rose-soft) !important;
  border-left-color: var(--am-rose) !important;
  color: var(--am-ink) !important;
}
.introduction .box-dark,
.introduction .box-black {
  background: #f1f2f7 !important;
  border-left-color: var(--am-ink) !important;
  color: var(--am-ink) !important;
}
.introduction .box-light,
.introduction .box-question {
  background: #fafbff !important;
  border: 1px solid var(--am-line) !important;
  border-left: 5px solid var(--am-violet) !important;
  color: var(--am-ink) !important;
}
.introduction .box-purple {
  background: var(--am-violet-soft) !important;
  border-left-color: var(--am-violet-deep) !important;
  color: var(--am-ink) !important;
}

/* Texte/lien à l'intérieur d'un callout */
.introduction blockquote a,
.introduction .box-primary a,
.introduction .box-info a,
.introduction .box-success a,
.introduction .box-warning a,
.introduction .box-danger a {
  color: var(--am-violet-deep);
  font-weight: 600;
}

/* Libellé majuscule en début de callout (rendu type "PRÉREQUIS / ENCODAGE")
   — produit par un strong en première position. */
.introduction blockquote > p:first-child > strong:first-child,
.introduction .box-info > p:first-child > strong:first-child,
.introduction .box-warning > p:first-child > strong:first-child,
.introduction .box-success > p:first-child > strong:first-child,
.introduction .box-danger > p:first-child > strong:first-child {
  display: block;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--am-violet-deep);
  margin-bottom: .35rem;
}
.introduction .box-warning > p:first-child > strong:first-child { color: var(--am-peach); }
.introduction .box-success > p:first-child > strong:first-child { color: var(--am-mint); }
.introduction .box-danger  > p:first-child > strong:first-child { color: var(--am-rose); }

/* =========================================================================
   5. TABLEAUX — en-tête violet plein, lignes alternées discrètes
   ========================================================================= */

.introduction .table {
  border-radius: var(--am-radius-sm);
  overflow: hidden;
  border: 1px solid var(--am-line);
  margin-bottom: 1.5rem;
  box-shadow: none;
}

.introduction .table > thead {
  background: var(--am-violet) !important;
}
.introduction .table > thead th {
  background: transparent !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  font-size: .92rem;
  border-bottom: none !important;
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.introduction .table > tbody > tr {
  transition: background-color .12s ease;
}
.introduction .table > tbody td,
.introduction .table > tbody th {
  vertical-align: middle;
  font-size: .95rem;
  border-bottom: 1px solid var(--am-line) !important;
}
.introduction .table > tbody > tr:last-child > td,
.introduction .table > tbody > tr:last-child > th { border-bottom: none !important; }

.introduction .table > tbody > tr:hover {
  background-color: #faf9fd !important;
}

.introduction .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-state: #fafbff;
}

/* =========================================================================
   6. CODE
      Blocs : fond navy (--am-bg-code) avec coin arrondi
      Inline : pastel lavande, texte violet foncé
   ========================================================================= */

.introduction pre[class*="language-"] {
  background: var(--am-bg-code) !important;
  border-radius: var(--am-radius-sm);
  padding: 1rem 1.2rem;
  margin: 1.25rem 0 1.5rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, var(--am-shadow-1);
  border-left: none;
  color: #e2e8f0;
  font-size: .92rem;
  line-height: 1.55;
}

/* Inline code — pastel lavande, texte violet, monospace fin */
.introduction :not(pre) > code {
  background: var(--am-violet-soft);
  color: var(--am-violet-deep);
  padding: .12em .42em;
  border-radius: 5px;
  font-size: .9em;
  border: none;
  font-weight: 500;
}

/* Code en bloc "text/plain" (mockups ASCII) — neutre, gris */
.introduction pre.language-text,
.introduction pre.language-undefined,
.introduction pre.language-plaintext {
  background: #f5f6fa !important;
  color: var(--am-ink) !important;
  border-left: 3px solid var(--am-violet);
}

/* =========================================================================
   7. LISTES
   ========================================================================= */

.introduction ul:not(.elv-toc-list):not(.list-inline) > li {
  margin-bottom: .35rem;
}
.introduction ul:not(.elv-toc-list):not(.list-inline) > li::marker {
  color: var(--am-violet);
}

.introduction ol > li::marker {
  color: var(--am-violet);
  font-weight: 700;
}

/* =========================================================================
   8. LIENS
   ========================================================================= */

.introduction a:not(.btn):not(.no-fancy) {
  color: var(--am-violet-deep);
  text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--am-violet) 30%, transparent);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  padding: 0 .05em;
}
.introduction a:not(.btn):not(.no-fancy):hover {
  color: var(--am-violet);
  border-bottom-color: var(--am-violet);
  background: var(--am-violet-soft);
}

/* =========================================================================
   9. SIDEBAR — cartes sobres, accent violet
   ========================================================================= */

.col-lg-4 .card.shadow {
  border: 1px solid var(--am-line) !important;
  border-radius: var(--am-radius) !important;
  box-shadow: var(--am-shadow-1) !important;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
  padding: 1rem !important;
}
.col-lg-4 .card.shadow:hover {
  transform: translateY(-1px);
  box-shadow: var(--am-shadow-2) !important;
  border-color: var(--am-line-strong) !important;
}

.col-lg-4 .card.shadow h4 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--am-violet-deep);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--am-line);
}

.col-lg-4 .card.shadow a:not(.btn) {
  color: var(--am-ink);
  text-decoration: none;
  font-weight: 500;
  transition: color .12s ease;
}
.col-lg-4 .card.shadow a:not(.btn):hover {
  color: var(--am-violet);
}

/* Bouton "Table des matières" — pill violet outline */
.table-of-content .btn-outline-purple {
  border-radius: var(--am-radius-pill);
  padding: .35rem 1rem !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .7rem;
  border-color: var(--am-violet);
  color: var(--am-violet);
}
.table-of-content .btn-outline-purple:hover {
  background: var(--am-violet);
  color: #fff;
}

/* TOC list */
.elv-toc-list {
  list-style: none;
  padding-left: 0 !important;
}
.elv-toc-list li { margin: .25rem 0; }
.elv-toc-list a {
  display: block;
  padding: .25rem .5rem;
  border-radius: 6px;
  transition: background .12s ease;
}
.elv-toc-list a:hover {
  background: var(--am-violet-soft);
}

/* =========================================================================
   10. CHIPS DE PROCESSUS (pour étapes graphiques type "Clic droit → Créer")
       À utiliser :
         <span class="chip">Clic droit sur le serveur</span> →
         <span class="chip">Créer nouveau</span> → ...
       Couleurs : .chip-mint, .chip-violet (par défaut), .chip-peach, .chip-rose
   ========================================================================= */

.introduction .chip {
  display: inline-block;
  padding: .35rem .85rem;
  margin: .25rem .15rem;
  border-radius: var(--am-radius-sm);
  background: var(--am-violet-soft);
  color: var(--am-violet-deep);
  font-size: .9rem;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--am-violet) 18%, transparent);
}
.introduction .chip.chip-mint   { background: var(--am-mint-soft);   color: #0f766e; border-color: color-mix(in srgb, var(--am-mint) 22%, transparent); }
.introduction .chip.chip-peach  { background: var(--am-peach-soft);  color: #9a4a1f; border-color: color-mix(in srgb, var(--am-peach) 22%, transparent); }
.introduction .chip.chip-rose   { background: var(--am-rose-soft);   color: #9d1b50; border-color: color-mix(in srgb, var(--am-rose) 22%, transparent); }

/* =========================================================================
   11. ANIMATIONS DOUCES (fade-in à l'ouverture)
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .introduction > * {
    animation: am-fade-in .45s ease both;
  }
  .introduction > *:nth-child(1) { animation-delay: 0s; }
  .introduction > *:nth-child(2) { animation-delay: .04s; }
  .introduction > *:nth-child(3) { animation-delay: .08s; }
  .introduction > *:nth-child(4) { animation-delay: .12s; }
  .introduction > *:nth-child(5) { animation-delay: .16s; }
}
@keyframes am-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   12. IMPRESSION
   ========================================================================= */

@media print {
  #page_intro::before,
  #page_intro::after { background: #000 !important; }
  #doctitle { color: #000 !important; }
  #doctitle .accent { color: #000 !important; }
  .introduction h2 { color: #000 !important; }
  .ttr-partie {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
  }
  .ttr-partie::before { color: #000 !important; opacity: 1; }
  .introduction blockquote,
  .introduction [class^="box-"],
  .introduction [class*=" box-"],
  .introduction .table,
  .col-lg-4 .card.shadow { box-shadow: none !important; }
  .introduction > * { animation: none !important; }
}

/* =========================================================================
   13. RESPONSIVE
   ========================================================================= */

@media (max-width: 575px) {
  #doctitle { font-size: 1.7rem; }
  .introduction .table { font-size: .9rem; }
  .introduction blockquote { padding: .85rem 1rem !important; }
  #page_intro::before { width: 4px; }
}