/* =========================================================
   Chapitre IV — Transmissions de savoirs
   Complète chapitre.css.
   ========================================================= */

/* --- citation de Platon de Tivoli --- */
.citation { margin: 0; padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(18 * var(--u)); border-left: 3px solid #c8a660; }
.citation p { font-style: italic; font-size: calc(21 * var(--u)); line-height: 1.32; text-align: justify; color: var(--encre); margin: 0; }
.citation footer { margin-top: calc(8 * var(--u)); text-align: right; font-size: calc(15 * var(--u)); color: var(--sepia); font-family: var(--capitales); letter-spacing: .03em; }

/* --- carte --- */
.carte-savoirs { flex: 1 1 0; min-height: 0; gap: calc(8 * var(--u)); }
.carte-savoirs svg { --zoom: 1; flex: 1 1 0; min-height: 0; width: 100%; display: block; user-select: none; -webkit-user-select: none; }
.carte-savoirs .mer { fill: #e9e2cf; }
.carte-savoirs .graticule line { stroke: #b9a77f; stroke-width: .6; stroke-dasharray: 2 4; opacity: .7; }
.carte-savoirs .terres { fill: #d9c79c; stroke: #6f5a35; stroke-width: 1.1; stroke-linejoin: round; }
.carte-savoirs .pays { fill: #b9874f; stroke: #6f5a35; stroke-width: 1.1; }
.carte-savoirs .pays.voisin { fill: #ccb27e; }
.carte-savoirs .cadre { fill: none; stroke: #7a5a1c; stroke-width: 2; }
.carte-savoirs .reperes circle { fill: #5a4428; }
.carte-savoirs .reperes text { font: italic calc(14px * var(--zoom)) var(--serif); fill: #5a4428; }
.carte-savoirs .reperes .region { font: italic 600 calc(20px * var(--zoom)) var(--serif); letter-spacing: .08em; fill: #8a6a2a; opacity: .75; }
.carte-savoirs .orient path { fill: none; stroke: #8a3a24; stroke-width: 2; stroke-dasharray: 6 4; }
.carte-savoirs .orient text { font: italic calc(15px * var(--zoom)) var(--serif); fill: #8a3a24; }
.carte-savoirs .pointe { fill: #8a3a24; }
.carte-savoirs .trajet { fill: none; stroke: #8a3a24; stroke-width: 2.6; stroke-linecap: round; }

/* points : ils pulsent ; le point choisi pulse plus fort */
.carte-savoirs .point { cursor: pointer; transition: opacity .3s; }
.carte-savoirs .point .rond { fill: #24467f; stroke: #fbf6ea; stroke-width: 1.6; }
.carte-savoirs .point .zone { fill: transparent; }
.carte-savoirs .point .nom { font: 600 16px var(--serif); fill: #2b1d0c; paint-order: stroke; stroke: #efe6cf; stroke-width: 3.5px; stroke-linejoin: round; }
.carte-savoirs .point .onde { fill: none; stroke: #24467f; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onde-faible 2.6s ease-out infinite; opacity: 0; }
.carte-savoirs .point.actif .rond { fill: #b3261e; r: 8; }
.carte-savoirs .point.actif .onde { stroke: #b3261e; animation: onde-forte 1.3s ease-out infinite; }
.carte-savoirs .point.actif .nom { font-size: 18px; fill: #8a1c14; }
.carte-savoirs .point:hover .nom { fill: #8a1c14; }
.carte-savoirs .point.futur { opacity: 0; pointer-events: none; }
@keyframes onde-faible { from { transform: scale(.6); opacity: .45; } to { transform: scale(1.6); opacity: 0; } }
@keyframes onde-forte { from { transform: scale(.7); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .carte-savoirs .point .onde { animation: none; } }

/* commandes sous la carte (universités) */
.carte-savoirs .commandes {
  flex: none; display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  font-family: var(--serif); font-size: calc(16 * var(--u)); color: var(--encre);
}
.carte-savoirs .commandes label { display: flex; align-items: center; gap: calc(8 * var(--u)); font-style: italic; }
.carte-savoirs .commandes input[type="range"] { width: calc(230 * var(--u)); accent-color: #24467f; }
.carte-savoirs .commandes output { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3em; }
.carte-savoirs .commandes button, .choix button, .defiler button {
  font: inherit; font-family: var(--capitales); font-size: calc(15 * var(--u)); letter-spacing: .04em;
  padding: calc(2 * var(--u)) calc(12 * var(--u)); cursor: pointer; color: var(--encre);
  background: transparent; border: 1px solid rgba(122,90,28,.6); border-radius: 999px;
}
.carte-savoirs .commandes button:hover, .choix button:hover, .defiler button:hover { background: rgba(214,180,108,.35); }
:is(.choix, .defiler, .carte-savoirs .commandes) button:focus-visible { outline: 2px solid #24467f; outline-offset: 2px; }

/* --- boutons de choix (page de droite) --- */
.choix { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(8 * var(--u)); flex: none; }
.choix button[aria-pressed="true"] { background: #24467f; color: #fbf6ea; border-color: #24467f; }
.choix button:disabled { opacity: .35; cursor: default; background: transparent; }

/* --- fiches --- */
.fiche { flex: 1 1 0; min-height: 0; display: block; font-size: calc(16.5 * var(--u)); line-height: 1.32; text-align: justify; color: var(--encre); }
.fiche[hidden] { display: none; }
.fiche h3 { margin: 0 0 calc(4 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(21 * var(--u)); line-height: 1.15; color: #24467f; text-align: left; }
.fiche h3 .dates { font-weight: 400; font-style: italic; font-size: calc(16 * var(--u)); color: var(--sepia); }
.fiche p { margin: 0 0 calc(6 * var(--u)); }
.fiche .note { font-style: italic; font-size: calc(14.5 * var(--u)); color: var(--encre-douce); border-top: 1px dotted #c8b48a; padding-top: calc(5 * var(--u)); }
.fiche > figure, .fiche .diaporama { float: left; width: 40%; margin: calc(2 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) 0; display: block; }
.fiche figure img { display: block; width: 100%; height: auto; max-height: calc(260 * var(--u)); object-fit: contain; object-position: left top; filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.3)); }
.fiche figcaption, .vignette figcaption { font-size: calc(12.5 * var(--u)); line-height: 1.22; font-style: italic; color: var(--encre-douce); margin-top: calc(4 * var(--u)); text-align: left; }
.diaporama figure { margin: 0; display: block; }
.diaporama figure[hidden] { display: none; }
.diaporama img { cursor: pointer; }
.defiler { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--u)); color: var(--sepia); }
.defiler button { padding: 0 calc(10 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.2; }

/* image fixe (universités) */
.vignette { flex: none; display: block; float: none; margin: 0; }
.vignette img { display: block; width: 62%; height: auto; margin: 0 auto; filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.3)); }
.vignette figcaption { text-align: center; }

@media (max-width: 760px) {
  .carte-savoirs svg { flex: none; height: auto; }
  .fiche > figure, .fiche .diaporama { float: none; width: 100%; margin: 0 0 8px; }
}
.carte-savoirs :is(.terres, .pays, .graticule line, .cadre, .trajet, .orient path) { vector-effect: non-scaling-stroke; }
.carte-savoirs .reperes circle { r: calc(2.2px * var(--zoom)); }

/* fiches des universités : cadre de mise en valeur */
.fiche.cadre { position: relative; flex: 0 1 auto; background: rgba(255,250,236,.55); border: 1px solid #b89a5e; box-shadow: inset 0 0 0 calc(3 * var(--u)) rgba(251,246,234,.6), inset 0 0 0 calc(4 * var(--u)) rgba(184,154,94,.55); border-radius: calc(3 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: 1.28; }
.fiche.cadre h3 { border-bottom: 1px solid rgba(184,154,94,.6); padding-bottom: calc(3 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.fiche.cadre[hidden] { display: none; }

/* zoom au survol sur toutes les images */
.planche img, .fiche figure img, .vignette img { transition: transform .35s ease, box-shadow .35s ease; cursor: zoom-in; position: relative; }
.planche, .fiche > figure, .fiche .diaporama, .vignette { position: relative; }
.planche:hover, .fiche > figure:hover, .fiche .diaporama:hover, .vignette:hover { z-index: 40; }
.fiche figure:hover img { transform: scale(2); transform-origin: left top; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.fiche .diaporama figure:hover img { transform-origin: left center; }
.vignette:hover img { transform: scale(1.6); transform-origin: center top; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.planche:hover img { transform: scale(1.35); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
@media (max-width: 760px) { .fiche figure:hover img, .vignette:hover img, .planche:hover img { transform: none; box-shadow: none; } }
.avec-vignette { flex: none; display: block; }
.avec-vignette::after { content: ""; display: block; clear: both; }
.avec-vignette .texte { margin: 0; }
.vignette.flottante { float: right; width: 38%; margin: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(14 * var(--u)); }
.vignette.flottante img { width: 100%; }
.vignette.flottante:hover img { transform: scale(1.9); transform-origin: right top; }
@media (max-width: 760px) { .vignette.flottante { float: none; width: 100%; margin: 0 0 8px; } }