/*
 * E2IT - carte des zones d'intervention.
 *
 * Extrait du fichier fourni par Claude Design. Toutes les classes ont ete
 * prefixees e2itz- : les noms d'origine (e2it-carte, e2it-panneau, e2it-btn)
 * entraient en collision avec les composants du theme et de la section 02.
 *
 * Les couleurs viennent de tokens.css : aucune valeur de charte n'est
 * redefinie ici.
 */

.e2itz-carte { background: #fff; }
/* Marge haute reduite : le bandeau marine de la section 02 se termine juste
   au-dessus, ses 64px de marge basse s'ajoutaient aux 88px d'origine. */
.e2itz-carte__inner { max-width: var(--e2it-largeur-contenu); margin: 0 auto; padding: var(--e2it-espace-12) 40px var(--e2it-espace-24); }

.e2itz-carte__entete { display: flex; flex-direction: column; gap: 18px; max-width: 720px; margin-bottom: 44px; }
.e2itz-surtitre { display: flex; align-items: center; gap: 14px; }
.e2itz-surtitre span:first-child { width: 28px; height: 2px; background: var(--e2it-accent); }
.e2itz-mono {
  font-family: var(--e2it-police-mono);
  font-size: var(--e2it-mono-taille); font-weight: var(--e2it-mono-graisse);
  letter-spacing: var(--e2it-mono-interlettrage); text-transform: uppercase;
  color: var(--e2it-texte-tertiaire);
}
/* Aligne sur les H2 des sections 01 et 02 : 38px, interligne 1.15,
   interlettrage -.01em, couleur marine. */
.e2itz-carte h2 {
  font-family: var(--e2it-police);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--e2it-marine);
  text-wrap: balance;
}
.e2itz-carte__intro { margin: 0; font-size: 17px; line-height: 1.62; color: var(--e2it-texte-secondaire); text-wrap: pretty; }

/* Le plan n etant plus limite par sa largeur, il n a plus besoin de 1,25
   part ; la liste de trente et un sites, elle, etait a l etroit. */
.e2itz-carte__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 48px; align-items: start; }

/* --- plan --- */
.e2itz-plan {
  position: relative;
  background: var(--e2it-fond-gris);
  border: 1px solid var(--e2it-bordure);
  border-radius: var(--e2it-rayon-carte);
  padding: 12px;
}
/* Hauteur plafonnee et calee sur la fenetre, non sur la largeur de la
   colonne : avec height: auto, le viewBox de 720x760 rendait la carte
   d autant plus haute que l ecran etait large (706 px a 1470), plus haute
   que le panneau de droite, d ou 244 px de blanc sous celui-ci. Le
   preserveAspectRatio du SVG centre la France : le blanc passe sur les
   cotes, dans un cadre qui a deja son fond et son filet. */
/* pan-y : le navigateur garde le defilement vertical a un doigt et le
   decide avant meme que d3 s en mele. Les gestes a deux doigts ne sont pas
   des pan-y : ils passent donc a la carte. */
.e2itz-plan svg { display: block; width: 100%; height: clamp(420px, 58vh, 560px); touch-action: pan-y; }
.e2itz-pays { fill: #F0F3F7; stroke: #E3E7EC; stroke-width: .6; }
.e2itz-france { fill: var(--e2it-marine); stroke: var(--e2it-marine-fonce); stroke-width: 1; }
.e2itz-dep {
  fill: var(--e2it-marine); stroke: rgba(169,196,229,.32); stroke-width: .5;
  cursor: pointer; transition: fill .18s ease;
}
.e2itz-dep:hover, .e2itz-dep.is-actif { fill: var(--e2it-bleu-profond); }
.e2itz-dep.a-site { fill: #103A72; }
.e2itz-dep.a-site:hover, .e2itz-dep.a-site.is-actif { fill: #1A5093; }
.e2itz-contour { fill: none; stroke: var(--e2it-marine-fonce); stroke-width: 1.2; pointer-events: none; }

.e2itz-plan__zoom { position: absolute; right: 22px; top: 22px; display: flex; flex-direction: column; gap: 6px; }
.e2itz-zoom {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-family: var(--e2it-police); font-size: 17px; font-weight: 600; line-height: 1;
  color: var(--e2it-marine); background: #fff; border: 1px solid var(--e2it-bordure);
  border-radius: 8px; cursor: pointer; transition: background-color .18s ease, border-color .18s ease;
}
.e2itz-zoom:hover { background: var(--e2it-bleu-pale); border-color: var(--e2it-marine); }
/* Quatre fleches vers les coins : l icone dit le geste - re-elargir la vue -
   la ou le libelle FR demandait d etre interprete. */
.e2itz-zoom--reset svg {
  /* flex: none, sinon la regle .e2itz-plan svg { width: 100% } du plan
     s applique aussi a cette icone et le conteneur flex l ecrase a 2 px. */
  flex: none;
  width: 18px;
  height: 18px;
  display: block;
}

.e2itz-tip {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -140%);
  background: var(--e2it-marine); color: #fff; border-radius: 6px; padding: 7px 11px;
  font-family: var(--e2it-police-mono); font-size: 11px; letter-spacing: .08em; white-space: nowrap;
  transition: opacity .15s ease; z-index: 2;
}
.e2itz-tip.is-visible { opacity: 1; }

/* Infobulle enrichie d'un point verrouille : elle passe sur plusieurs lignes. */
.e2itz-tip:has(.e2itz-tip__lien) {
  white-space: normal;
  max-width: 230px;
  text-align: left;
  line-height: 1.5;
}
.e2itz-tip__lien {
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--e2it-glacier);
}

.e2itz-site { cursor: pointer; }
.e2itz-site__halo { fill: rgba(31,122,224,.25); opacity: 0; transition: opacity .22s ease; }
.e2itz-site[data-type="siege"] .e2itz-site.is-actif .e2itz-site__halo,
.e2itz-site:hover .e2itz-site__halo { opacity: 1; }.e2itz-plan__legende {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
  padding: 14px 14px 6px; border-top: 1px solid var(--e2it-bordure); margin-top: 8px;
}
.e2itz-legende__item { display: flex; align-items: center; gap: 9px; }
.e2itz-legende__pastille { width: 11px; height: 11px; border-radius: 999px; background: var(--e2it-accent); border: 1.5px solid #fff; flex: none; }
.e2itz-legende__pastille--siege { background: #fff; border-color: var(--e2it-marine); border-width: 3px; }
.e2itz-legende__texte { font-family: var(--e2it-police-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--e2it-texte-secondaire); }

/* --- panneau --- */
.e2itz-panneau { display: flex; flex-direction: column; gap: 20px; }
.e2itz-panneau__filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.e2itz-filtre {
  font-family: var(--e2it-police); font-size: 14px; color: var(--e2it-marine);
  background: transparent; border: 1px solid #C9D6E5; border-radius: var(--e2it-rayon-pilule);
  padding: 9px 16px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.e2itz-filtre:hover { background: var(--e2it-bleu-pale); border-color: var(--e2it-marine); }
.e2itz-filtre.is-actif { background: var(--e2it-marine); color: #fff; border-color: var(--e2it-marine); font-weight: 600; }

.e2itz-liste { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; scrollbar-width: thin; }
.e2itz-liste::-webkit-scrollbar { width: 4px; }
.e2itz-liste::-webkit-scrollbar-thumb { background: #C9D6E5; border-radius: 999px; }
.e2itz-item {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  background: transparent; border: none; border-bottom: 1px solid var(--e2it-bleu-pale);
  padding: 16px 8px; cursor: pointer; transition: background-color .18s ease;
}
.e2itz-item:hover, .e2itz-item.is-actif { background: var(--e2it-fond-gris); }
.e2itz-item__pastille { width: 9px; height: 9px; border-radius: 999px; background: var(--e2it-accent); flex: none; margin-top: 6px; }
.e2itz-item[data-type="siege"] .e2itz-item__pastille { background: #fff; box-shadow: inset 0 0 0 2.5px var(--e2it-marine); }
.e2itz-item__corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.e2itz-item__ville { font-family: var(--e2it-police); font-size: 16px; font-weight: 600; color: var(--e2it-marine); }
.e2itz-item__detail { font-size: 14px; line-height: 1.45; color: var(--e2it-texte-secondaire); }
.e2itz-item__meta { font-family: var(--e2it-police-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--e2it-bleu-profond); }

/* Une ligne devient un lien des que la fiche chantier existe. */
a.e2itz-item { text-decoration: none; }

.e2itz-panneau__pied { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.e2itz-btn {
  font-family: var(--e2it-police); font-weight: 600; font-size: 15px; line-height: 1;
  border-radius: var(--e2it-rayon-pilule); padding: 15px 26px; text-align: center; cursor: pointer; border: none;
  color: #fff; background-color: var(--e2it-marine);
  background-image: linear-gradient(to bottom, #0B2E5E 0 50%, #1668C6 50% 100%);
  background-size: 100% 200%; background-position: 0 0;
  transition: background-position .3s cubic-bezier(.22,.61,.36,1);
}
.e2itz-btn:hover { background-position: 0 100%; color: #fff; }
.e2itz-note { font-family: var(--e2it-police-mono); font-size: 10px; letter-spacing: .1em; color: var(--e2it-texte-secondaire); text-align: center; }

/* Contour de focus limite au composant : la regle d'origine visait :focus-visible
   sans selecteur parent et se serait appliquee a tout le site. */
.e2itz-carte :focus-visible { outline: 2px solid var(--e2it-accent); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 1023px) {
  .e2itz-carte__inner { padding: var(--e2it-espace-8) 20px var(--e2it-espace-16); }
  .e2itz-carte h2 { font-size: 32px; }
  .e2itz-carte__intro { font-size: 16px; }
  .e2itz-carte__grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .e2itz-liste { max-height: none; }
}

/* Meme remarque : la regle d'origine coupait toutes les transitions du site. */
@media (prefers-reduced-motion: reduce) {
  .e2itz-carte * { transition: none !important; }
}

/* Liste sans chantier publie. */
.e2itz-vide {
  margin: 0;
  padding: 24px 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--e2it-texte-secondaire);
}

/* Palier telephone : place apres le palier 1023px, sinon la valeur
   tablette (32px) l'emporterait a specificite egale. */
@media (max-width: 767px) {
  .e2itz-carte h2 { font-size: 27px; }
}


/* ------------------------------------------------------------------
   Liste compacte sur telephone

   Le fichier d'origine retirait la hauteur maximale sous 1024px : la
   liste se deroulait entierement, soit plus de 1300px de defilement
   pour 22 sites. On la borne et on allege chaque ligne.

   Place apres le palier 1023px : a specificite egale, c'est le dernier
   qui gagne.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {

  /* Hauteur bornee, avec defilement contenu : le geste ne doit pas
     entrainer la page entiere quand on arrive en bout de liste. */
  .e2itz-liste {
    max-height: 52vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Fondu en pied : signale qu'il reste des lignes en dessous. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  }

  /* Lignes allegees : moitie moins de hauteur par site. */
  .e2itz-item {
    gap: 10px;
    padding: 10px 6px;
  }

  .e2itz-item__pastille { margin-top: 5px; }
  .e2itz-item__corps { gap: 2px; }
  .e2itz-item__ville { font-size: 15px; }
  .e2itz-item__detail { font-size: 13px; line-height: 1.4; }

  /* Le terrain est deja porte par le filtre actif juste au-dessus :
     le repeter sur chaque ligne consomme une ligne pour rien. */
  .e2itz-item__meta { display: none; }

  /* Le siege garde son repere, c'est la seule ligne d'une autre nature. */
  .e2itz-item[data-type="siege"] .e2itz-item__meta {
    display: block;
    font-size: 9px;
  }

  .e2itz-panneau { gap: 14px; }
  .e2itz-panneau__filtres { gap: 6px; }
  .e2itz-filtre { padding: 7px 13px; font-size: 13px; }
}

/* ------------------------------------------------------------------
   Points : deux formes, un amas
   Un rectangle sert les deux terrains. rx a la moitie du cote donne un
   cercle pour le thermalisme, rx faible un carre arrondi pour l industrie.
   La distinction tient donc a la forme et pas seulement a la couleur :
   elle survit au niveau de gris et au daltonisme.
   ------------------------------------------------------------------ */

.e2itz-site__point {
	/* Glacier : 7.48 de contraste sur le marine, contre 3.39 pour le bleu crete.
	   L ecart de luminosite avec le bleu arc de l industrie passe de 1.08 a 2.38,
	   la distinction ne repose donc plus sur la seule teinte. */
	fill: var(--e2it-glacier, #A9C4E5);
	stroke: var(--e2it-marine, #0B2E5E);
	stroke-opacity: .35;
	stroke-width: 1.8;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--e2it-duree-rapide, 120ms) var(--e2it-courbe, ease), fill var(--e2it-duree-rapide, 120ms) var(--e2it-courbe, ease);
}

.e2itz-site[data-type="industrie"] .e2itz-site__point {
	fill: var(--e2it-accent, #1F7AE0);
	stroke: #fff;
	stroke-opacity: 1;
	stroke-width: 1.8;
}

.e2itz-site[data-type="siege"] .e2itz-site__point {
	fill: #fff;
	stroke: var(--e2it-marine, #0B2E5E);
	stroke-width: 3;
	/* Contour plein : il ne doit pas heriter de l opacite reduite du thermalisme,
	   c est ce cerclage qui distingue le siege des sites clairs. */
	stroke-opacity: 1;
}

/* Amas : pastille chiffree, en accent plein. */
.e2itz-site.est-amas .e2itz-site__point {
	fill: var(--e2it-accent-fond, #1668C6);
	stroke: #fff;
	stroke-opacity: 1;
	stroke-width: 2;
}

.e2itz-site__nb {
	font-family: var(--e2it-police-mono, monospace);
	font-size: 13px;
	font-weight: 600;
	fill: #fff;
	pointer-events: none;
}

.e2itz-site:hover .e2itz-site__point,
.e2itz-site.is-actif .e2itz-site__point {
	transform: scale(1.28);
}

.e2itz-site.est-amas { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
	.e2itz-site__point { transition: none; }
}

/* Legende : les pastilles reprennent exactement les formes de la carte. */
.e2itz-legende__pastille--thermalisme { border-radius: 50%; background: var(--e2it-glacier, #A9C4E5); }
.e2itz-legende__pastille--industrie { border-radius: 2.5px; background: var(--e2it-accent, #1F7AE0); }
.e2itz-legende__pastille--amas {
	border-radius: 50%;
	background: var(--e2it-accent-fond, #1668C6);
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--e2it-police-mono, monospace);
	font-size: 10px;
	font-weight: 600;
	color: #fff;
}

/* ------------------------------------------------------------------
   Libelles des sites
   Blanc avec un halo marine trace avant le remplissage : lisible sur la
   France en marine comme sur le fond clair de la mer et des pays voisins.
   ------------------------------------------------------------------ */

.e2itz-site__nom {
	font-family: var(--e2it-police, sans-serif);
	font-size: 11px;
	font-weight: 600;
	fill: #fff;
	paint-order: stroke;
	stroke: rgba(7, 28, 62, .92);
	stroke-width: 3.5px;
	stroke-linejoin: round;
	pointer-events: none;
	opacity: .92;
	transition: opacity var(--e2it-duree-rapide, 120ms) var(--e2it-courbe, ease);
}

.e2itz-site:hover .e2itz-site__nom,
.e2itz-site.is-actif .e2itz-site__nom {
	opacity: 1;
}

/* Aide contextuelle : le geste depend du pointeur, pas de la largeur de
   l ecran - un portable tactile large reste tactile. */
.e2itz-aide--tactile { display: none; }
@media (hover: none), (pointer: coarse) {
  .e2itz-aide--souris { display: none; }
  .e2itz-aide--tactile { display: inline; }
}

/* --- carte active : deux doigts ont ouvert la porte --- */
/* Le navigateur rend la main a d3 : un doigt deplace desormais la carte. */
.e2itz-plan.est-active svg { touch-action: none; }
/* Retour visuel : sans lui, le visiteur ignore dans quel mode il se trouve,
   et c est la que naissent les sensations de blocage. */
.e2itz-plan.est-active { border-color: var(--e2it-marine); }
.e2itz-plan.est-active .e2itz-zoom--reset {
  background: var(--e2it-marine);
  border-color: var(--e2it-marine);
  color: #fff;
}
@media (hover: none), (pointer: coarse) {
}

/* --- Etats souris de la carte --- */
/* Le curseur dit ce que le geste va faire avant qu on l essaie : c est le
   signal le plus immediat de l etat actif. */
.e2itz-plan.est-active svg { cursor: grab; }
.e2itz-plan.est-active svg:active { cursor: grabbing; }


/* Au doigt, aucun des deux libelles souris ne doit apparaitre, y compris
   carte active : meme specificite que les regles ci-dessus pour l emporter. */
@media (hover: none), (pointer: coarse) {
  .e2itz-plan.est-active .e2itz-aide--souris,
  .e2itz-plan.est-active }

/* ------------------------------------------------------------------
   Voile d apprentissage, pilule d etat, indice au survol

   Le visiteur actionne la molette au-dessus de la carte : c est un geste
   reflexe. La ligne d aide qui explique le clic vit sous le cadre, en mono
   11 px, et personne ne la lit avant d avoir essaye. La tentative ratee est
   donc le bon moment pour enseigner le geste : avant, l information est du
   bruit ; apres, elle est une reponse.

   Le voile ne capte aucun evenement : la page continue de defiler dessous,
   on n ajoute aucun blocage.
   ------------------------------------------------------------------ */

/* Le voile porte l entree : visible tant que la carte est inactive, il capte
   le clic, il s efface une fois entre. C est un bouton, d ou la remise a zero
   des styles natifs. */
.e2itz-voile {
  position: absolute;
  inset: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(7, 28, 62, .58);
  border-radius: var(--e2it-rayon-carte);
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms var(--e2it-courbe), visibility 220ms;
}

.e2itz-plan.est-active .e2itz-voile {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.e2itz-voile:focus-visible {
  outline: 3px solid var(--e2it-accent);
  outline-offset: -3px;
}


.e2itz-voile__texte {
  font-family: var(--e2it-police);
  font-size: 17px;
  font-weight: 600;
  color: var(--e2it-blanc);
  text-align: center;
  padding: 0 24px;
}

/* Pilule d etat : l etat et sa sortie au meme endroit. Le filet marine du
   cadre, seul, passait inapercu. */
.e2itz-etat {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 5;
  font-family: var(--e2it-police-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--e2it-rayon-pilule);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--e2it-courbe);
}

.e2itz-etat { background: var(--e2it-marine); color: var(--e2it-blanc); }

.e2itz-plan.est-active .e2itz-etat { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .e2itz-voile, .e2itz-etat { transition: none; }
}

/* ------------------------------------------------------------------
   Ligne de liste : bouton de zoom + lien de fiche

   Le filet passe de la ligne au conteneur, sinon il s arreterait au bord
   du bouton et laisserait le lien hors du trait.
   ------------------------------------------------------------------ */

.e2itz-ligne {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--e2it-bleu-pale);
}

.e2itz-ligne .e2itz-item {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}

.e2itz-ligne:hover .e2itz-item,
.e2itz-ligne.is-actif .e2itz-item {
  background: var(--e2it-fond-gris);
}

.e2itz-item__lien {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 16px;
  color: var(--e2it-bleu-crete);
  text-decoration: none;
  transition: color .18s ease;
}

.e2itz-item__lien:hover { color: var(--e2it-marine); }

/* Annonce reservee aux lecteurs d ecran. */
.e2itz-annonce {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   Veille : la carte a rendu la molette a la page, mais le voile n est pas
   encore revenu. Sans signal distinct, le visiteur ne saurait plus si la
   molette lui appartient.
   ------------------------------------------------------------------ */

.e2itz-plan.est-en-veille .e2itz-voile {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Filet estompe : actif en marine, veille en bleu crete, repos au gris. */
.e2itz-plan.est-en-veille { border-color: var(--e2it-bleu-crete); }

.e2itz-etat--veille { background: var(--e2it-bleu-profond); }
.e2itz-plan.est-active .e2itz-etat--veille { opacity: 0; }
.e2itz-plan.est-en-veille .e2itz-etat--veille { opacity: 1; }
.e2itz-plan.est-en-veille .e2itz-etat--actif { opacity: 0; }

/* ------------------------------------------------------------------
   Tete de section centree, comme la section Actualites.

   Le surtitre est un conteneur flexible dont le filet vit dans un span :
   text-align n a aucune prise dessus, il faut centrer le flux. Et le filet
   est double a droite, sinon le motif parait decale meme centre au pixel -
   l oeil aligne sur le trait, pas sur la boite.
   ------------------------------------------------------------------ */

.e2itz-carte__entete {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.e2itz-carte__entete .e2itz-surtitre {
  justify-content: center;
}

.e2itz-carte__entete .e2itz-surtitre::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--e2it-accent);
  flex: none;
}

/* ==================================================================
   Mise sous tension de la carte

   A l entree de la section, les sites s allument un par un du nord au
   sud, comme des instruments qu on met en service, puis le siege de
   Tarbes emet un seul halo. Moins d une seconde au total, une seule
   fois. Le rang de chaque site est calcule par animations.js ; les
   classes sont retirees ensuite, un filtre ou un zoom ne rejoue rien.
   ================================================================== */

@keyframes e2itz-allumage {
	from { opacity: 0; }
}

@keyframes e2itz-allumage-point {
	from { transform: scale(.4); }
}

@keyframes e2itz-halo-unique {
	0%   { opacity: 0; transform: scale(.6); }
	35%  { opacity: 1; }
	100% { opacity: 0; transform: scale(2.2); }
}

@keyframes e2itz-ligne-entree {
	from { opacity: 0; transform: translateY(8px); }
}

.e2itz-carte--prete:not(.e2itz-carte--tension) :is(.e2itz-site, .e2itz-ligne) {
	opacity: 0;
}

.e2itz-carte--tension .e2itz-site {
	animation: e2itz-allumage 320ms var(--e2it-courbe) backwards;
	animation-delay: calc(250ms + var(--e2it-allumage, 0ms));
}

.e2itz-carte--tension .e2itz-site__point {
	animation: e2itz-allumage-point 420ms var(--e2it-courbe) backwards;
	animation-delay: calc(250ms + var(--e2it-allumage, 0ms));
}

.e2itz-carte--tension .e2itz-site[data-type="siege"] .e2itz-site__halo {
	transform-box: fill-box;
	transform-origin: center;
	animation: e2itz-halo-unique 1100ms ease-out;
	animation-delay: calc(450ms + var(--e2it-allumage, 0ms));
}

.e2itz-carte--tension .e2itz-ligne {
	animation: e2itz-ligne-entree var(--e2it-duree-apparition, 520ms) var(--e2it-courbe) backwards;
	animation-delay: calc(300ms + var(--e2it-rang, 0) * var(--e2it-decalage-serie, 80ms));
}

@media (prefers-reduced-motion: reduce) {
	.e2itz-carte--prete :is(.e2itz-site, .e2itz-ligne, .e2itz-site__point, .e2itz-site__halo) {
		opacity: 1;
		animation: none;
	}
}
/* Carte restreinte a un terrain : pas de boutons de filtre, il n y a rien
   a filtrer. */
.e2itz-carte[data-seul="oui"] .e2itz-panneau__filtres {
	display: none;
}

/* ==================================================================
   Voile d entree - version encart

   Le voile reste tant qu on n a pas clique : le survol ne le touche pas,
   le defilement au doigt le traverse. Au lieu d une phrase posee sur un
   aplat, un encart : pictogramme, titre, aide selon l appareil, compteur.
   Le voile passe d un aplat uniforme a un degrade radial : dense sous
   l encart, leger sur les bords, la carte se devine autour.
   ================================================================== */
.e2itz-voile:not(#e2it) {
	background: radial-gradient(ellipse at center, rgba(7, 28, 62, .74) 0%, rgba(7, 28, 62, .52) 50%, rgba(7, 28, 62, .3) 100%);
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 240ms var(--e2it-courbe), visibility 240ms;
}

.e2itz-voile:focus-visible:not(#e2it) {
	outline: none;
}

.e2itz-voile__encart {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: calc(100% - 40px);
	padding: 26px 34px 24px;
	box-sizing: border-box;
	border-radius: 14px;
	background: rgba(7, 28, 62, .84);
	border: 1px solid rgba(169, 196, 229, .35);
	box-shadow: 0 18px 40px rgba(7, 28, 62, .35);
	text-align: center;
	transition: transform .28s var(--e2it-courbe), border-color .2s ease, opacity .24s ease;
}

/* Repere de carte dans un rond glacier ; plein au survol. SVG integre :
   une image de fond serait bloquee par le chargement differe d Elementor. */
.e2itz-voile__picto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--e2it-glacier);
	color: var(--e2it-glacier);
	transition: background-color .2s ease, color .2s ease;
}

.e2itz-voile__titre {
	font-family: var(--e2it-police);
	font-weight: 620;
	font-stretch: 88%;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--e2it-blanc);
}

.e2itz-voile__aide {
	font: 500 10.5px/1.4 var(--e2it-police-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

.e2itz-voile__compte {
	margin-top: 2px;
	padding-top: 10px;
	border-top: 1px solid rgba(169, 196, 229, .25);
	font-size: 13px;
	color: var(--e2it-bleu-clair);
}

.e2itz-voile__compte:empty {
	display: none;
}

/* Survol, sur ordinateur : l encart reagit, le voile ne bouge pas. */
@media (hover: hover) and (pointer: fine) {
	.e2itz-voile:hover .e2itz-voile__encart {
		transform: translateY(-2px);
		border-color: var(--e2it-blanc);
	}

	.e2itz-voile:hover .e2itz-voile__picto {
		background-color: var(--e2it-glacier);
		color: var(--e2it-marine);
	}
}

.e2itz-voile:focus-visible .e2itz-voile__encart {
	outline: 3px solid var(--e2it-accent);
	outline-offset: 3px;
}

/* A l ouverture : l encart s efface un peu avant le voile. */
.e2itz-plan.est-active .e2itz-voile__encart {
	transform: scale(.96);
	opacity: 0;
}

/* ---- Bouton Quitter : ecrans tactiles, carte active ---- */
.e2itz-quitter {
	display: none;
}

@media (hover: none), (pointer: coarse) {
	.e2itz-plan.est-active .e2itz-quitter {
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 6;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 16px 0 12px;
		border: 0;
		border-radius: var(--e2it-rayon-pilule);
		background: var(--e2it-marine);
		color: var(--e2it-blanc);
		font: 600 14px/1 var(--e2it-police);
		box-shadow: 0 8px 20px rgba(7, 28, 62, .25);
		cursor: pointer;
	}

	.e2itz-plan.est-active .e2itz-quitter::before {
		content: "×";
		font-size: 20px;
		line-height: 1;
	}

	/* La pilule d etat ferait doublon avec le bouton Quitter. */
	.e2itz-etat {
		display: none;
	}
}

.e2itz-quitter:focus-visible {
	outline: 3px solid var(--e2it-accent);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.e2itz-voile__encart {
		padding: 20px 22px 18px;
		gap: 8px;
	}

	.e2itz-voile__titre {
		font-size: 20px;
	}

	.e2itz-voile__picto {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e2itz-voile__encart,
	.e2itz-voile__picto,
	.e2itz-voile:not(#e2it) {
		transition: none;
	}
}

/* ==================================================================
   Points des sites - lisibilite et fiche d apercu

   Les points sont dessines en pixels d ecran (14 px, 16 au doigt) avec une
   zone de clic invisible de 44 px. Au survol, un anneau s etend une fois.
   Les noms restent affiches a partir d un zoom x3. L ancienne infobulle,
   non cliquable, laisse place a une fiche d apercu avec un vrai bouton.
   ================================================================== */
.e2itz-site__cible {
	fill: transparent;
	pointer-events: all;
}

.e2itz-site:focus {
	outline: none;
}

.e2itz-site:focus-visible .e2itz-site__halo {
	opacity: 1;
	stroke: var(--e2it-accent);
	stroke-width: 2.5;
}

.e2itz-site__point:not(#e2it) {
	stroke-width: 2;
}

/* Anneau qui s etend une fois au survol : le point appelle le geste. */
@media (hover: hover) and (pointer: fine) {
	.e2itz-site:not(.est-amas):hover .e2itz-site__halo {
		transform-box: fill-box;
		transform-origin: center;
		animation: e2itz-anneau 700ms var(--e2it-courbe) 1;
	}
}

@keyframes e2itz-anneau {
	from { transform: scale(.55); opacity: .9; }
	to { transform: scale(1.35); opacity: 0; }
}

/* Noms : 12 px a l ecran, permanents a partir du zoom x3 (classe posee par
   le script, sans chevauchement), sinon au survol et pour le site actif. */
.e2itz-site__nom:not(#e2it) {
	font-size: 12px;
	stroke-width: 4px;
}

/* La regle d origine affichait tous les noms : ils se chevauchaient.
   Desormais seuls les noms places par le script restent visibles. */
.e2itz-site__nom:not(#e2it) {
	opacity: 0;
}

.e2itz-site.avec-nom .e2itz-site__nom:not(#e2it),
.e2itz-site:hover .e2itz-site__nom:not(#e2it),
.e2itz-site.is-actif .e2itz-site__nom:not(#e2it),
.e2itz-site:focus-visible .e2itz-site__nom:not(#e2it) {
	opacity: .95;
}

.e2itz-site__nb:not(#e2it) {
	font-size: 13px;
}

/* ---- Fiche d apercu ---- */
.e2itz-apercu {
	position: absolute;
	z-index: 7;
	width: 280px;
	max-width: calc(100% - 28px);
	display: flex;
	flex-direction: column;
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(7, 28, 62, .22);
	overflow: hidden;
	animation: e2itz-apercu-entree 180ms var(--e2it-courbe);
}

.e2itz-apercu[hidden] {
	display: none;
}

@keyframes e2itz-apercu-entree {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

.e2itz-apercu__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--e2it-bleu-pale);
}

.e2itz-apercu__corps {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 44px 16px 18px;
}

.e2itz-apercu__terrain {
	align-self: flex-start;
	padding: 4px 9px;
	border-radius: var(--e2it-rayon-pilule);
	background: var(--e2it-bleu-pale);
	color: var(--e2it-bleu-profond);
	font: 500 10px/1.2 var(--e2it-police-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.e2itz-apercu__terrain[data-type="industrie"] {
	background: var(--e2it-accent-fond, #1668C6);
	color: var(--e2it-blanc);
}

.e2itz-apercu__terrain[data-type="siege"] {
	background: var(--e2it-marine);
	color: var(--e2it-blanc);
}

.e2itz-apercu__titre {
	font-family: var(--e2it-police);
	font-weight: 620;
	font-stretch: 88%;
	font-size: 19px;
	line-height: 1.2;
	color: var(--e2it-marine);
}

.e2itz-apercu__meta {
	font-size: 13px;
	line-height: 1.45;
	color: var(--e2it-texte-secondaire);
}

.e2itz-apercu__expertises {
	font: 500 10px/1.5 var(--e2it-police-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--e2it-bleu-crete);
}

.e2itz-apercu__lien {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	margin-top: 6px;
	padding: 0 16px;
	box-sizing: border-box;
	border-radius: var(--e2it-rayon-pilule);
	background: var(--e2it-accent-fond, #1668C6);
	color: var(--e2it-blanc);
	font: 600 14px/1 var(--e2it-police);
	text-decoration: none;
	transition: background-color .2s ease;
}

.e2itz-apercu__lien::after {
	content: "→";
}

.e2itz-apercu__lien:hover,
.e2itz-apercu__lien:focus-visible {
	background: var(--e2it-marine);
	color: var(--e2it-blanc);
}

/* Precedent / suivant */
.e2itz-apercu__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-top: 1px solid var(--e2it-bordure);
	background: var(--e2it-fond-gris);
}

.e2itz-apercu__nav span {
	font: 500 10px/1 var(--e2it-police-mono);
	letter-spacing: .12em;
	color: var(--e2it-texte-secondaire);
}

.e2itz-apercu__nav button,
.e2itz-apercu__fermer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--e2it-bordure);
	border-radius: 50%;
	background: var(--e2it-blanc);
	color: var(--e2it-marine);
	font: 400 20px/1 var(--e2it-police);
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.e2itz-apercu__nav button[data-pas="-1"]::before { content: "‹"; }
.e2itz-apercu__nav button[data-pas="1"]::before { content: "›"; }

.e2itz-apercu__fermer {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	font-size: 18px;
}

.e2itz-apercu__fermer::before {
	content: "×";
}

/* Sur une miniature, la croix reste lisible. */
.e2itz-apercu__image ~ .e2itz-apercu__fermer {
	box-shadow: 0 2px 8px rgba(7, 28, 62, .25);
}

@media (hover: hover) {
	.e2itz-apercu__nav button:hover,
	.e2itz-apercu__fermer:hover {
		border-color: var(--e2it-marine);
	}
}

.e2itz-apercu :focus-visible {
	outline: 2px solid var(--e2it-accent);
	outline-offset: 2px;
}

/* Au doigt : ancree en bas du cadre, pleine largeur, miniature a gauche. */
.e2itz-apercu.est-ancre {
	left: 12px !important;
	right: 12px;
	top: auto !important;
	bottom: 12px;
	width: auto;
	max-width: none;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
}

.e2itz-apercu.est-ancre .e2itz-apercu__image {
	grid-row: span 2;
	width: 96px;
	height: 100%;
	aspect-ratio: auto;
}

.e2itz-apercu.est-ancre .e2itz-apercu__corps,
.e2itz-apercu.est-ancre .e2itz-apercu__nav {
	grid-column: -2 / -1;
}

.e2itz-apercu.est-ancre:not(:has(.e2itz-apercu__image)) {
	grid-template-columns: minmax(0, 1fr);
}

.e2itz-apercu.est-ancre .e2itz-apercu__nav button,
.e2itz-apercu.est-ancre .e2itz-apercu__fermer {
	width: 44px;
	height: 44px;
}

.e2itz-apercu.est-ancre .e2itz-apercu__lien {
	min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
	.e2itz-apercu,
	.e2itz-site .e2itz-site__halo {
		animation: none !important;
	}
}