/* =============================================================================
   HERO « CARTE ANIMÉE » — ordinateur et tailles intermédiaires (à partir de 801 × 600) : fond du sous-hero ;
   smartphone : sur la version claire du site (sartine-responsive.css), carte et scène en bas du hero.
   Fond du sous-hero + carte ancienne en #1a064d qui court du hero jusqu'au haut du 1er sous-hero,
   frégate qui coule dans la passe, sardine qui la remplace.
   Généré par FREGATE-SARTINE/carte-animee-4/sources/prod.mjs — ne pas retoucher à la main.
   ========================================================================== */
#hc-scene, #carte-longue { display: none; }
@media (min-width: 801px) and (min-height: 600px) {
    /* ▼ couleur de la carte, du bateau, de la sardine, des hachures (et de « Studio graphique » du hero) */
    :root:root { --hero-color: #863ced; --hc-encre: #1a064d; }
    #info { background: #24168a url(../img/logo/sous-hero.jpg) center / cover no-repeat; }
    #info .bg-image-hero { visibility: hidden; }          /* l'image reste chargée : le loader l'attend */
    #info .title .highlight { color: var(--hc-encre); }
    #hc-scene { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
    #carte-longue { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; pointer-events: none; z-index: 1; will-change: transform; contain: strict; }
    /* la carte est un masque : sa forme vient du SVG, sa couleur de --hc-encre */
    #carte-longue .hc-carte { position: absolute; left: 0; top: 0; background: var(--hc-encre); -webkit-mask: var(--hc-carte) no-repeat 0 0 / 100% 100%; mask: var(--hc-carte) no-repeat 0 0 / 100% 100%; }
    #info .sartine-grid, .sous-hero .sous-hero-grid, .sous-hero .info-skills { position: relative; z-index: 3; }
    /* fond du 1er sous-hero retourné (180° + symétrie horizontale) pour se raccorder au bas du hero */
    #sous-hero .bg-image-sous-hero { transform: scaleY(-1); }
    /* traits entre les puces des sous-heros en blanc (au lieu de --hero-color) */
    .dots-separator-li { background: #fff; }
    .hc-encre path, .hc-encre polygon { fill: var(--hc-encre); }
    .hc-sillage line { stroke: var(--hc-encre); stroke-linecap: round; }
    /* la sardine posée est un bouton : un clic rejoue la traversée de la frégate */
    #hc-scene .hc-poisson { pointer-events: none; }
    #hc-scene .hc-poisson.hc-cliquable { pointer-events: auto; cursor: pointer; }
    #hc-scene .hc-poisson.hc-cliquable .hc-zone { pointer-events: all; }   /* survol sur toute la partie émergée, pas seulement sur les traits */
    #hc-scene .hc-poisson:focus { outline: none; }
    #hc-scene .hc-poisson:focus-visible { outline: 2px solid var(--hero-color); outline-offset: 6px; }
}
/* Smartphone (≤ 800 px ou < 600 px de haut) : la version claire du site est gardée (fond blanc, violet),
   la carte, le bateau et la sardine s'y posent en bas du hero ; titres, menu et souris dans la couleur de la carte. */
@media (max-width: 800px), (max-height: 599px) {
    :root:root { --hc-encre: #1a064d; }
    #info .bg-image-hero { visibility: hidden; }          /* l'image reste chargée : le loader l'attend */
    #hc-scene { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
    #carte-longue { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; pointer-events: none; z-index: 1; will-change: transform; contain: strict; }
    #carte-longue .hc-carte { position: absolute; left: 0; top: 0; background: var(--hc-encre); -webkit-mask: var(--hc-carte) no-repeat 0 0 / 100% 100%; mask: var(--hc-carte) no-repeat 0 0 / 100% 100%; }
    /* .sous-hero .info-skills reste en static (sartine-responsive.css) : en relative + z-index, Safari iOS
       découpe le banc de poissons fixe aux limites du 1er sous-hero et il disparaît sur le 2e */
    #info .sartine-grid, .sous-hero .sous-hero-grid { position: relative; z-index: 3; }
    .hc-encre path, .hc-encre polygon { fill: var(--hc-encre); }
    .hc-sillage line { stroke: var(--hc-encre); stroke-linecap: round; }
    #hc-scene .hc-poisson { pointer-events: none; }
    #hc-scene .hc-poisson.hc-cliquable { pointer-events: auto; cursor: pointer; }
    #hc-scene .hc-poisson.hc-cliquable .hc-zone { pointer-events: all; }   /* survol sur toute la partie émergée, pas seulement sur les traits */
    #hc-scene .hc-poisson:focus { outline: none; }
    #hc-scene .hc-poisson:focus-visible { outline: 2px solid var(--hero-color); outline-offset: 6px; }
    /* titre + texte remontés en haut de l'écran, la scène occupe le bas */
    .hero-grid { justify-content: flex-start; padding-top: calc(110px + 6vh); padding-bottom: 0; }
    #info .description, .sous-hero .description { font-size: 1rem; }
    /* titres (partie foncée), menu et souris « défiler » dans la couleur de la carte */
    #info .title, .sous-hero .title { color: var(--hc-encre); }
    .site-header.site-header .nav-item { color: var(--hc-encre); }
    .souris { color: var(--hc-encre); }
}