/* ============ ESSAIS DE DESIGN · 2e série (24 octobre 2026) ============ */

/* ---- F01 · page Octavec, section 03 : la tour éclatée, en grand, à côté du cartouche ---- */
#donnees .don-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(2rem,3vw,3.5rem);align-items:center}
#donnees .don-texte .oc-tete-sec{grid-template-columns:1fr}
#donnees .don-texte .oc-cartouche__grille--forts{grid-template-columns:1fr}
#donnees .don-texte .oc-cartouche__grille--forts dd{font-size:1.125rem;line-height:1.3}
#donnees .don-texte .oc-cartouche__grille--forts > div{padding:.6875rem 1.125rem .8125rem}
#donnees .don-texte .oc-cartouche__grille--forts dt{margin-bottom:.3125rem}
#donnees .don-texte .oc-cartouche__grille--donnees{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 19 h 41 : le tableau réduit, pour que la section tienne en un écran */
#donnees .oc-cartouche__titre > span{padding:.5rem .875rem}
#donnees .oc-cartouche__titre .oc-cartouche__objet{font-size:1.1875rem}
#donnees .don-petit > div{padding:.5rem .875rem .625rem}
#donnees .don-petit dt{font-size:.6875rem;margin-bottom:.25rem}
#donnees .don-petit dd{font-size:.8125rem;line-height:1.35}
#donnees .don-petit .oc-afaire{font-size:.625rem;margin-top:.3125rem}
/* 19 h 45 : la figure, la plus grande que l'écran permet : largeur de sa colonne, ou hauteur de l'écran (moins l'en-tête et une marge) */
#donnees.oc-ecran{padding-top:.75rem;padding-bottom:.75rem}
.don-eclate{margin:0;min-width:0;justify-self:center;width:100%;max-width:calc((100svh - var(--oc-tete) - 1.5rem) * 1184 / 1228)}
.ec-svg{display:block;width:100%;height:auto;overflow:visible;shape-rendering:geometricPrecision}
.ec-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500}
.ec-guide{stroke:var(--bleu);stroke-width:1;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.ec-flux{stroke:var(--bleu);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:0.1 7.4;fill:none;animation:ec-flux 1.4s linear infinite}
.ec-flux--fin{stroke-width:2.4;stroke-dasharray:0.1 6.4}
.ec-flux--boucle{stroke-width:2.6;stroke-dasharray:0.1 6.8;animation-duration:2.6s}
@keyframes ec-flux{to{stroke-dashoffset:-15}}
.ec-porte{fill:var(--ecarlate);stroke:var(--papier);stroke-width:2.5}
.ec-trait{stroke:var(--bleu);stroke-width:1.1}
.ec-pt{fill:var(--bleu)}
.ec-num{font:400 26px/1 'Silkscreen',monospace;fill:var(--bleu)}
.ec-titre{font:500 18px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;fill:var(--bleu)}
.ec-sous{font:italic 400 23px/1 'Newsreader',Georgia,serif;fill:var(--bleu)}
.ec-rouge{fill:var(--ecarlate)}
.ec-fixe .ec-flux{animation:none}
@media (prefers-reduced-motion: reduce){.ec-flux{animation:none}}
@media (max-width:1099px){
  #donnees .don-wrap{grid-template-columns:1fr}
  .don-eclate{max-width:44rem;margin:0 auto;width:100%}
  .ec-svg{max-height:none}
}

/* ---- G05 · pied de page : le relief en bâtonnets, au ras du bord bas ---- */
.footer.avec-releve{padding-bottom:0}
.fond-releve{display:block;width:100%;margin-top:clamp(1rem,2vw,2rem);image-rendering:pixelated;touch-action:pan-y}
html.gris .fond-releve{filter:grayscale(1)}

/* ---- S05 · séparateur en profil de sondage et son reflet, de part et d'autre de la ligne entre À propos et Contact ---- */
#a-propos.avec-profil,#contact.avec-profil{position:relative}
.separateur-profil{position:absolute;left:0;right:0;z-index:1;display:block;width:100%;pointer-events:none;image-rendering:pixelated}
html.gris .separateur-profil{filter:grayscale(1)}
.separateur-profil--haut{bottom:0}
.separateur-profil--bas{top:0}

/* ---- 01.B · carte Sur mesure : la vue éclatée au survol, comme la 01.A ---- */
#sur-mesure .apercu--dessin{cursor:zoom-in}