/* ════════════════════════════════════════════════════════════════
   CODISITE — theme.css : habillage « classeur de cours » v4 (essai)
   ════════════════════════════════════════════════════════════════
   Chargé APRÈS style.css (accueil et pages). L'idée : le matériel
   de la classe plutôt qu'un site « appli ».
   - fond de cahier à petits carreaux, feuilles avec marge rouge ;
   - tuiles en fiches bristol, avec un intercalaire de couleur ;
   - titres soulignés au surligneur ;
   - couleurs reprises des admonitions de CodiSite (cours, exemple,
     protocole, exercice, remarque) et bleu nuit d'origine.
   Écran, et pour l'impression (PDF) : surligneurs, onglet de thème
   et admonitions arrondies (fin du fichier). L'export ODT ne change pas.
   Retirer la ligne <link … theme.css> pour revenir au style d'origine.
   ════════════════════════════════════════════════════════════════ */

@media screen {

:root {
  --bg:        #f6f4ee;
  --bg-card:   #fffefb;
  --bg-nav:    #1e2a38;          /* bleu nuit CodiSite */
  --text:      #1f2430;
  --muted:     #5d6575;
  --accent:    #2c6fad;
  --accent-dk: #1a4f82;
  --border:    #ddd8cc;
  --radius:    6px;
  --marge:     #e07a7a;          /* marge rouge du cahier */
  --ligne:     rgba(44,111,173,.10);
  --surligneur: #fff09a;
  --surl-rouge: #ffc4bd;          /* titre de fiche (##) et sections (###) */
  --surl-vert:  #c4efb8;          /* sous-sections (####) */
  /* intercalaires : couleurs des admonitions */
  --i1: #a93226;  --i2: #1a6fb5;  --i3: #1e8449;  --i4: #ca6f1e;  --i5: #7d3c98;
  /* 10 nuances pour les thèmes (# du md), dans l'ordre du document
     (render-index.js : themeColor) — aussi les tuiles de l'accueil */
  --t0: #c0392b; --t1: #2471a3; --t2: #1e8449; --t3: #d35400; --t4: #7d3c98;
  --t5: #138d75; --t6: #c2185b; --t7: #9a7d0a; --t8: #3f51b5; --t9: #8d5524;
  --shadow:    0 1px 0 #e6e1d5, 0 2px 6px rgba(30,42,56,.06);
  --shadow-h:  0 1px 0 #e6e1d5, 0 8px 18px rgba(30,42,56,.12);
}

/* Cahier à petits carreaux (5 mm) */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--ligne) 1px, transparent 1px),
    linear-gradient(90deg, var(--ligne) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}

/* ── Barre du haut : papier clair, liseré d'intercalaires ── */
.navbar {
  background: #fffefb; color: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(30,42,56,.05);
  padding: 11px 32px 14px;
}
.navbar::after {                     /* rangée d'onglets de couleur */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg,
    var(--t0) 0 10%, var(--t1) 10% 20%, var(--t2) 20% 30%, var(--t3) 30% 40%, var(--t4) 40% 50%,
    var(--t5) 50% 60%, var(--t6) 60% 70%, var(--t7) 70% 80%, var(--t8) 80% 90%, var(--t9) 90% 100%);
}
.navbar .brand {
  display: inline-flex; align-items: center; color: var(--bg-nav); font-weight: 800; letter-spacing: .01em;
}
.navbar .brand::before {             /* logo = favicon (classeur, feuille à marge rouge) */
  content: ""; flex: none; width: 30px; height: 30px; margin-right: 10px;
  background: url("../svg/favicon.svg") center / contain no-repeat;
}
.navbar .brand span {
  color: var(--bg-nav);
  background: linear-gradient(transparent 55%, var(--surligneur) 55%, var(--surligneur) 90%, transparent 90%);
}
.navbar nav a { color: var(--muted); font-weight: 600; padding: 3px 4px; border-radius: 3px; }
.navbar nav a i { color: var(--accent); }
.navbar nav a:hover {
  color: var(--bg-nav);
  background: linear-gradient(transparent 55%, var(--surligneur) 55%, var(--surligneur) 92%, transparent 92%);
}
.a11y-sep { background: var(--border); }

/* ── Surligneur ──────────────────────────────────────────── */
.page-header h1 em, .fiche-header h1 {
  font-style: normal;
  --hl: var(--surligneur);
  background-image: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .12em; margin-left: -.12em;
}
.page-header { border-bottom: none; }
.page-header h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.01em; }
.page-header p { font-size: .95rem; }
.fiche-header { border-bottom: none; }
.fiche-header h1 { --hl: var(--surl-rouge); display: inline; font-size: 1.9em; font-weight: 800; line-height: 1.35; }

/* Étiquette de thème : petit onglet d'intercalaire */
.fiche-badge {
  display: table; margin-bottom: .55rem;
  background: var(--theme-c, var(--i2)); color: #fff; border: none;
  border-radius: 6px 6px 0 0; padding: .2rem .75rem .15rem;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}

/* ── Feuille (formulaire, contenu des fiches) ────────────── */
.add-form-wrapper, #fiche-content.fiche-content {
  background-color: var(--bg-card);
  border: 1px solid var(--border); border-radius: 3px;
  /* marge rouge à gauche */
  background-image: linear-gradient(90deg, transparent 38px, var(--marge) 38px, var(--marge) 40px, transparent 40px);
  padding-left: 58px;
  /* feuilles empilées */
  box-shadow: 0 1px 2px rgba(30,42,56,.08), 4px 4px 0 -1px #fbfaf6, 4px 4px 0 0 var(--border);
}
#fiche-content.fiche-content { padding-top: 1.5rem; padding-bottom: 1.6rem; padding-right: 1.8rem; }
/* intercalaires juste au-dessus : la feuille s'y raccroche */
#fiche-meta:has(.theme-tabs-box) + #fiche-content.fiche-content { border-top-left-radius: 0; }
#fiche-meta .index-actions { margin-bottom: .9rem; }
/* titre de la fiche dans la feuille, aligné sur le texte (après la marge) */
.fiche-content > .fiche-header { margin: 0 0 1.1rem; padding: 0; }
.fiche-content > .fiche-header h1 { display: inline; }
/* Sommaire d'un document : pas de feuille, les tuiles suffisent */
#fiche-content.fiche-content:has(.fiche-index-grid) {
  background: none; border: none; box-shadow: none; padding: 0;
}
.add-form-wrapper h2 { color: var(--marge); letter-spacing: .08em; }
.form-row input, .search-bar input { border-radius: 4px; background: #fff; border-width: 1.5px; }
.form-row input:focus, .search-bar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44,111,173,.15); }

/* ── Boutons : étiquettes de papier, surligneur au survol ─ */
.btn, .btn-print, .back-link, .fiche-nav-index, .a11y-btn {
  border-radius: 8px; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn-secondary, .btn-print, .back-link, .fiche-nav-index {
  background: var(--bg-card); color: var(--text); font-weight: 600;
  border: 1px solid #d9d3c4; box-shadow: 0 2px 0 #e6dfcf;
}
.btn-secondary:hover, .btn-print:hover, .back-link:hover, .fiche-nav-index:hover {
  background: #fff7c4; border-color: #e3cf5a; color: var(--bg-nav);
  box-shadow: 0 2px 0 #e3cf5a; transform: translateY(-1px); text-decoration: none;
}
.btn-secondary:active, .btn-print:active, .back-link:active, .fiche-nav-index:active { transform: translateY(1px); box-shadow: 0 1px 0 #e3cf5a; }
.btn-secondary i, .btn-print i, .back-link i { color: var(--accent); }
.btn-danger i { color: var(--i1); }
.btn-danger:hover { background: #fde8e6; border-color: #e8a29a; box-shadow: 0 2px 0 #e8a29a; color: var(--i1); }
.btn-primary {
  background: var(--bg-nav); color: #fff; border: 1px solid var(--bg-nav);
  box-shadow: 0 2px 0 #0f1720;
}
.btn-primary:hover { background: #2b3b4f; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 #0f1720; }
.actions-sep { background: #d9d3c4; }
.a11y-btn { background: var(--bg-card); border: 1px solid #d9d3c4; box-shadow: 0 2px 0 #e6dfcf; color: var(--muted); }
.a11y-btn:hover:not(:disabled) { background: #fff7c4; border-color: #e3cf5a; color: var(--bg-nav); }

/* ── Tuiles : cartes douces, repère de couleur à gauche ─── */
.tiles-grid, .fiche-index-grid { gap: 1.1rem; }
.tile {
  --ic: var(--theme-c, var(--t0));
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
  padding-left: 1.5rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,42,56,.04), 0 4px 14px rgba(30,42,56,.06);
}
.tile::before {                      /* repère de couleur */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ic);
}
/* accueil : une nuance par document */
.tiles-grid .tile:nth-child(10n+2)  { --ic: var(--t1); }
.tiles-grid .tile:nth-child(10n+3)  { --ic: var(--t2); }
.tiles-grid .tile:nth-child(10n+4)  { --ic: var(--t3); }
.tiles-grid .tile:nth-child(10n+5)  { --ic: var(--t4); }
.tiles-grid .tile:nth-child(10n+6)  { --ic: var(--t5); }
.tiles-grid .tile:nth-child(10n+7)  { --ic: var(--t6); }
.tiles-grid .tile:nth-child(10n+8)  { --ic: var(--t7); }
.tiles-grid .tile:nth-child(10n+9)  { --ic: var(--t8); }
.tiles-grid .tile:nth-child(10n+10) { --ic: var(--t9); }
.tile:hover {
  border-color: var(--ic); transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(30,42,56,.12);
}
.tile-badge { background: none; border: none; padding: 0; color: var(--ic); font-size: .68rem; font-weight: 700; letter-spacing: .07em; }
.tile-title { font-size: 1rem; font-weight: 700; }
.tile-tag { background: #f3f1ea; border: none; border-radius: 999px; color: var(--muted); padding: .08rem .55rem; }
.tile-external { background: var(--bg-card); }
.tile-external:hover { background: var(--bg-card); }
.tile-empty { border: 2px dashed #cfc8b8; background: rgba(255,254,251,.75); border-radius: 18px; }
/* Sommaire d'un document : le thème est en titre de groupe → pas
   d'étiquette répétée ; la couleur suit le thème (# du md) */
.fiche-index-grid .tile { --ic: var(--theme-c, var(--accent)); }
.fiche-index-grid .tile-badge { display: none; }

/* ── Sommaire d'un document ──────────────────────────────── */
.index-theme-label {
  display: inline-block; border: none; color: var(--theme-c, var(--bg-nav));
  --hl-t: color-mix(in srgb, var(--theme-c, #e6c200) 24%, transparent);
  background-image: linear-gradient(transparent 55%, var(--hl-t) 55%);
  padding: 0 .25em; margin-left: -.25em;
}
.search-results { border-radius: 4px; }

/* ── Contenu des fiches ──────────────────────────────────── */
.fiche-content h3 {
  text-decoration: none; border-bottom: none; color: var(--bg-nav); font-weight: 800;
  display: table; padding: 0 .2em; margin-left: -.2em; margin-top: 1rem;
  background-image: linear-gradient(transparent 60%, var(--surl-rouge) 60%, var(--surl-rouge) 95%, transparent 95%);
}
.fiche-content h3:first-child { margin-top: 0; }
.fiche-content h4 {
  text-decoration: none; font-style: normal; color: var(--bg-nav);
  display: table; padding: 0 .2em; margin-left: -.2em;
  background-image: linear-gradient(transparent 60%, var(--surl-vert) 60%, var(--surl-vert) 95%, transparent 95%);
}
/* Admonitions : arrondies et douces */
.admonition {
  border-radius: 14px; border-left-width: 5px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,42,56,.04), 0 4px 14px rgba(30,42,56,.06);
}
.admonition-title { padding: .45rem 1rem; letter-spacing: .08em; }
.admonition-body { padding: .85rem 1.05rem; }

/* Navigation entre fiches */
.fiche-nav-btn { border-radius: 10px; border: 1px solid #d9d3c4; background: var(--bg-card); box-shadow: 0 2px 0 #e6dfcf; }
.fiche-nav-btn:hover { background: #fff7c4; border-color: #e3cf5a; box-shadow: 0 2px 0 #e3cf5a; }

/* QCM : mêmes formes */
.qcm-card { border-radius: 4px; }
.qcm-main, .qcm-sec, .qcm-option { border-radius: 4px !important; }

/* Pied de page assorti à la barre du haut */
footer[role="contentinfo"] {
  background: #fffefb; color: var(--muted); border-top: 1px solid var(--border);
}
footer[role="contentinfo"] a { color: var(--accent); }
footer[role="contentinfo"] a:hover { color: var(--bg-nav); }
footer[role="contentinfo"] p:last-child { border-top-color: var(--border); }

/* ── Fiche : intercalaires des thèmes (render-index.js) ──── */
.theme-tabs-box { position: relative; margin: .3rem 0 0; z-index: 2; }
.theme-tabs {                       /* une seule rangée, défilante si trop d'onglets */
  display: flex; flex-wrap: nowrap; align-items: flex-end; gap: .3rem;
  padding: .4rem .2rem 1px; margin-bottom: -1px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.theme-tabs::-webkit-scrollbar { display: none; }
.theme-tab {
  flex: 0 1 auto; min-width: 7.5rem; max-width: 17rem; display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--border); border-bottom: none; border-radius: 12px 12px 0 0;
  padding: .5rem .9rem .45rem; cursor: pointer;
  background: color-mix(in srgb, var(--theme-c, #888) 13%, #fffefb);
  color: var(--theme-c, var(--bg-nav));
  font: 700 .74rem var(--font-sans); text-transform: uppercase; letter-spacing: .05em;
  transform: translateY(5px); transition: transform .15s, background .15s;
}
.theme-tab:hover, .theme-tab[aria-expanded="true"] { transform: translateY(0); }
.theme-tab.on {                      /* onglet de la fiche : soudé à la feuille */
  transform: none; background: var(--bg-card); color: var(--theme-c);
  border-color: var(--border); border-top: 4px solid var(--theme-c);
  margin-bottom: -1px; padding-bottom: calc(.45rem + 1px);
}
.theme-tab[aria-expanded="true"]:not(.on) { background: color-mix(in srgb, var(--theme-c, #888) 26%, #fffefb); }
.theme-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-tab-n {
  flex: none; min-width: 1.5em; padding: 0 .4em; border-radius: 999px; text-align: center;
  background: rgba(255,255,255,.75); color: var(--theme-c); font-size: .9em;
}
.theme-tab.on .theme-tab-n { background: color-mix(in srgb, var(--theme-c) 14%, #fff); color: var(--theme-c); }
.theme-tab:focus-visible { outline: 3px solid var(--surligneur); outline-offset: 1px; }
/* liste déroulée des fiches d'un intercalaire */
.theme-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .25rem;
  padding: .55rem; background: #fffefb;
  border: 1px solid var(--border); border-top: 4px solid var(--theme-c, var(--accent));
  border-radius: 0 0 14px 14px; box-shadow: 0 12px 28px rgba(30,42,56,.16);
}
.theme-list[hidden] { display: none; }
.theme-list-item {
  display: block; padding: .5rem .75rem; border-radius: 8px;
  color: var(--text); font-family: var(--font-sans); font-weight: 600; font-size: .9rem; line-height: 1.3;
}
.theme-list-item:hover { text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--theme-c, #888) 12%, #fff); }
.theme-list-item.current { box-shadow: inset 4px 0 0 var(--theme-c); background: color-mix(in srgb, var(--theme-c, #888) 9%, #fff); }
.theme-list-item i { color: var(--theme-c); font-size: .85em; }
/* l'onglet ouvert dit déjà le thème : pas d'étiquette répétée */
#fiche-meta:has(.theme-tabs-box) + #fiche-content .fiche-header .fiche-badge { display: none; }

@media (max-width: 760px) {
  .add-form-wrapper, #fiche-content.fiche-content {
    background-image: linear-gradient(90deg, transparent 18px, var(--marge) 18px, var(--marge) 20px, transparent 20px);
    padding-left: 30px; padding-right: 1rem;
  }
  .container { padding: 1rem .8rem; }
  .fiche-header h1 { font-size: 1.45em; }
  .admonition-body { padding: .65rem .7rem; }
  .qcm-card { padding: .6rem .7rem; }

  /* Barre du haut : logo + titre + icônes sur une ligne,
     réglages du texte (A− A A+ …) sur une seconde ligne */
  .navbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px 11px; }
  .navbar > nav { display: contents; }
  .navbar .brand {
    order: 0; flex: 1 1 0; min-width: 0; display: block;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px;
  }
  .navbar .brand::before { display: inline-block; vertical-align: middle; width: 26px; height: 26px; margin-right: 8px; }
  .navbar nav a { order: 1; font-size: 0; margin-left: 2px; padding: 7px 8px; }
  .navbar nav a i { font-size: 17px; }
  #btn-credits { order: 2; font-size: 0 !important; padding: 7px 8px !important; margin-left: 2px !important; }
  #btn-credits i { font-size: 17px; }
  .a11y-controls { order: 3; flex: 1 0 100%; justify-content: center; margin: 0; gap: 6px; }
  .a11y-btn { min-width: 40px; padding: 4px 10px; }
  /* largeur du texte : sans objet sur téléphone (la page occupe déjà tout l'écran) */
  #btn-width-dec, #btn-width-reset, #btn-width-inc, .a11y-sep { display: none; }

  /* Boutons d'action : grille régulière, icône au-dessus du libellé */
  .index-actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: .35rem; align-items: stretch;
  }
  .index-actions .actions-sep { display: none; }
  .index-actions .btn-print {
    flex-direction: column; justify-content: center; gap: .25rem; margin: 0;
    padding: .5rem .2rem .4rem; font-size: .68rem; line-height: 1.15; text-align: center; min-height: 54px;
  }
  .index-actions .btn-print i { font-size: 1.15rem; width: auto; }

  /* Intercalaires : défilement horizontal, onglets plus compacts */
  .theme-tab { flex: none; max-width: 13rem; padding: .5rem .7rem .45rem; font-size: .68rem; }
  .theme-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* téléphone : moins d'emboîtements (feuille, encadré, carte) pour
     laisser la largeur au texte ; texte de base un peu plus petit */
  html { font-size: 16px; }
  .add-form-wrapper, #fiche-content.fiche-content {
    background-image: linear-gradient(90deg, transparent 9px, var(--marge) 9px, var(--marge) 11px, transparent 11px) !important;
    padding-left: 20px !important; padding-right: .7rem !important;
  }
  .container { padding: .7rem .45rem; }
  .admonition { border-left-width: 4px; }
  .admonition-body { padding: .55rem .5rem !important; }
  .admonition-title { padding: .4rem .7rem; }
  .qcm-card, .flash-fin { border: none; box-shadow: none; background: transparent; padding: .2rem 0; }
}
} /* @media screen */

/* ── Impression / PDF : garder surligneurs et douceur ────── */
@media print {
  /* dégradés sans arrêt « transparent » final : sinon un fin trait
     gris apparaît sous le surligneur dans le PDF */
  :root {
    --surligneur: #fff09a; --surl-rouge: #ffc4bd; --surl-vert: #c4efb8;
    --t0: #c0392b; --t1: #2471a3; --t2: #1e8449; --t3: #d35400; --t4: #7d3c98;
    --t5: #138d75; --t6: #c2185b; --t7: #9a7d0a; --t8: #3f51b5; --t9: #8d5524;
  }
  .fiche-header h1, .fiche-content h3, .fiche-content h4, .fiche-badge, .admonition, .admonition-title {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .fiche-header { border-bottom: none; }
  .fiche-header h1 {
    display: inline; line-height: 1.4;
    background-image: linear-gradient(transparent 58%, var(--surl-rouge) 58%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding: 0 .12em; margin-left: -.12em;
  }
  .fiche-badge {
    display: table; margin-bottom: .35rem; border: none;
    background: var(--theme-c, var(--t1)); color: #fff;
    border-radius: 5px 5px 0 0; padding: .1rem .6rem;
  }
  .fiche-content h3, .fiche-content h4 {
    display: table; border-bottom: none !important; text-decoration: none !important; font-style: normal;
    padding: 0 .2em; margin-left: -.2em;
  }
  .fiche-content h3 { background-image: linear-gradient(transparent 60%, var(--surl-rouge) 60%); }
  .fiche-content h4 { background-image: linear-gradient(transparent 60%, var(--surl-vert) 60%); }
  .admonition { border-radius: 10px; overflow: hidden; border-left-width: 4px; }
  .theme-tabs-box { display: none !important; }
}