@keyframes scanline {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}
.animate-scanline {
    animation: scanline 10s linear infinite;
}



/* ===== Accueil : la France en réseau (choisie le 21/10/2026) ===== */
.hero-plan{isolation:isolate}
.hero-plan>.max-w-4xl::before{content:'';position:absolute;left:50%;top:50%;width:min(760px,110%);height:120%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--fond)) 30%,transparent);opacity:.8}
.dark .hero-plan>.max-w-4xl::before{background:radial-gradient(closest-side,rgb(var(--noir)) 30%,transparent)}
.hero-france{--trait:rgb(var(--accent-fort)/.55);--fin:rgb(var(--accent-fort)/.3);--acc:rgb(var(--accent-fort));
  position:absolute;left:50%;top:50%;height:96%;width:auto;max-width:98%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;overflow:visible}
.dark .hero-france{--trait:rgb(var(--accent-clair)/.7);--fin:rgb(var(--accent-clair)/.4);--acc:rgb(var(--accent-clair))}
.hero-france .contour{fill:none;stroke:var(--trait);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;animation:hf-trace 4s ease-out forwards}
.hero-france line.tr{fill:none;stroke:var(--trait);stroke-width:1.1;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:hf-trace 1.4s ease-out forwards;animation-delay:var(--d)}
@keyframes hf-trace{to{stroke-dashoffset:0}}
.hero-france .pulse{stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-dasharray:10 calc(var(--l) * 1px);stroke-dashoffset:10;opacity:.9;animation:hf-pulse 3.5s linear infinite;animation-delay:calc(var(--d) + 5s)}
@keyframes hf-pulse{from{stroke-dashoffset:10}to{stroke-dashoffset:calc(var(--l) * -1px)}}
.hero-france .ville{opacity:0;animation:hf-voir .5s forwards;animation-delay:calc(var(--d) + 2.5s)}
@keyframes hf-voir{to{opacity:1}}
.hero-france .pt{fill:var(--acc)}
.hero-france .halo{fill:none;stroke:var(--acc);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:hf-bat 2.4s ease-out infinite}
@keyframes hf-bat{from{transform:scale(.6);opacity:1}to{transform:scale(2.4);opacity:0}}
.hero-france text{font:7px ui-monospace,Consolas,monospace;letter-spacing:.15em;fill:var(--acc);opacity:.6}
@media (prefers-reduced-motion:reduce){.hero-france *{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important}.hero-france .pulse{display:none}}
/* lisibilité en thème sombre (retour Noa 21/10) */
.dark .hero-france{--trait:rgb(var(--accent-clair)/.42);--fin:rgb(var(--accent-clair)/.25)}
.dark .hero-france text{opacity:.4}
.hero-plan>.max-w-4xl::before{width:min(900px,120%);height:135%;opacity:1}
.dark .hero-plan>.max-w-4xl::before{background:radial-gradient(closest-side,rgb(var(--noir)/.92) 45%,rgb(var(--noir)/.6) 70%,transparent)}
.dark .hero-plan p,.dark .hero-plan .inline-flex{text-shadow:0 0 6px rgb(var(--noir)),0 0 14px rgb(var(--noir))}
.dark .hero-plan .inline-flex{background:rgb(var(--noir)/.75)}
/* juste milieu (retour Noa 21/10) : carte bien visible, voile léger, halo sur le texte */
.dark .hero-france{--trait:rgb(var(--accent-clair)/.6);--fin:rgb(var(--accent-clair)/.35)}
.dark .hero-france text{opacity:.55}
.hero-plan>.max-w-4xl::before{width:min(760px,105%);height:90%}
.dark .hero-plan>.max-w-4xl::before{background:radial-gradient(closest-side,rgb(var(--noir)/.55) 40%,transparent)}
.dark .hero-plan p{text-shadow:0 0 4px rgb(var(--noir)),0 0 10px rgb(var(--noir)),0 0 18px rgb(var(--noir))}
/* boutons du héros : fond plein pour que la carte ne passe pas dessous (retour Noa 21/10) */
.hero-plan .surlignage-cyber{background:rgb(var(--fond));clip-path:polygon(-1px -1px,calc(100% + 1px) -1px,calc(100% + 1px) calc(85% + 1px),calc(92% + 1px) calc(100% + 1px),-1px calc(100% + 1px))}
.dark .hero-plan .surlignage-cyber{background:rgb(var(--noir))}
/* contour des boutons du héros aussi en thème sombre (retour Noa 21/10) */
.dark .hero-plan .surlignage-cyber::after{display:block;background-color:rgb(var(--accent-clair)/.6)}
.dark .hero-plan .surlignage-cyber+.surlignage-cyber::after{background-color:rgb(var(--blanc)/.45)}
.dark .hero-plan .surlignage-cyber:hover::after{opacity:0}
/* accroche du héros en thème clair : bordure nette, fond plein (retour Noa 21/10) */
.hero-plan .inline-flex{background:rgb(var(--fond));border-color:rgb(var(--accent-fort));color:rgb(var(--accent-fort));position:relative;z-index:1}
.dark .hero-plan .inline-flex{border-color:rgb(var(--accent-clair)/.6);color:rgb(var(--accent-vif))}
/* épuration (retour Noa 22/10) : plus de voile ni de halo ; la carte s'efface d'elle-même sous le texte */
.hero-plan>.max-w-4xl::before{display:none}
.dark .hero-plan p,.dark .hero-plan .inline-flex{text-shadow:none}
.hero-france text{opacity:.45}
.dark .hero-france{--trait:rgb(var(--accent-clair)/.6);--fin:rgb(var(--accent-clair)/.35)}
/* masque plus large : sous le texte la carte tombe à ~20 %, pleine intensité vers les bords ; plus de halo derrière le titre */
.hero-plan h2{filter:none!important}
/* flou qui épouse les lettres (retour Noa 22/10) : halo couleur du fond autour de chaque glyphe, pas de zone rectangulaire */
.hero-plan h2,.hero-plan h2 span,.hero-plan p{text-shadow:0 0 3px rgb(var(--fond)),0 0 8px rgb(var(--fond)),0 0 14px rgb(var(--fond)),0 0 22px rgb(var(--fond))!important}
.dark .hero-plan h2,.dark .hero-plan h2 span,.dark .hero-plan p{text-shadow:0 0 3px rgb(var(--noir)),0 0 8px rgb(var(--noir)),0 0 14px rgb(var(--noir)),0 0 22px rgb(var(--noir))!important}
/* paragraphe du héros : pas de cadre ; texte plus foncé, plus gras, halo du fond qui suit les lettres (retour Noa 22/10) */
.hero-plan p{color:rgb(var(--menu-texte))!important;font-weight:600}
.dark .hero-plan p{color:rgb(var(--blanc)/.92)!important}
.hero-plan p{text-shadow:0 0 2px rgb(var(--fond)),0 0 4px rgb(var(--fond)),0 0 8px rgb(var(--fond)),0 0 12px rgb(var(--fond)),0 0 18px rgb(var(--fond))!important}
.dark .hero-plan p{text-shadow:0 0 2px rgb(var(--noir)),0 0 4px rgb(var(--noir)),0 0 8px rgb(var(--noir)),0 0 12px rgb(var(--noir)),0 0 18px rgb(var(--noir))!important}
/* paragraphe : plus foncé, un peu plus grand, halo plus large (retour Noa 22/10) */
.hero-plan p{color:rgb(var(--noir))!important;font-size:1.2rem;line-height:1.75;
  text-shadow:0 0 2px rgb(var(--fond)),0 0 4px rgb(var(--fond)),0 0 6px rgb(var(--fond)),0 0 10px rgb(var(--fond)),0 0 16px rgb(var(--fond)),0 0 24px rgb(var(--fond)),0 0 32px rgb(var(--fond))!important}
.dark .hero-plan p{color:rgb(var(--blanc))!important;
  text-shadow:0 0 2px rgb(var(--noir)),0 0 4px rgb(var(--noir)),0 0 6px rgb(var(--noir)),0 0 10px rgb(var(--noir)),0 0 16px rgb(var(--noir)),0 0 24px rgb(var(--noir)),0 0 32px rgb(var(--noir))!important}