/*
 * Carte — les secteurs desservis. Cadre sous .ivy-map--secteurs : le CSS de
 * tout le rayon peut etre charge sur la meme page (piege connu, PASSATION §3).
 * Engagement 5 : aucun hexadecimal, valeurs de repli comprises.
 *
 * Deux colonnes EGALES, releve a 48/48 sur la reference — la ou
 * `zone-intervention` donne 53/47 a l'editorial. La difference n'est pas dans
 * le moteur, qui est le meme, elle est dans la densite : ici la carte pese
 * autant que le texte, et la liste des communes est une liste, pas un index
 * numerote.
 */
.ivy-map--secteurs {
	display: grid;
	align-items: stretch;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: clamp( 24px, 3vw, 48px );
	max-width: 1320px;
	margin-inline: auto;
}

/*
 * Le visuel porte la carte ET sa legende : c'est lui qui etablit le contexte
 * de positionnement. Le `clip` descend ICI et pas sur la section, sinon la
 * legende serait rognee — deux contraintes opposees sur un meme conteneur ne
 * se departagent pas (piege paye sur la navbar `voile`).
 */
.ivy-map--secteurs .ivy-map__visual {
	position: relative;
	overflow: hidden;
	border-radius: var( --ivy-canvas-border-radius, 20px );
}

/*
 * `min-height` SEUL, jamais `height: 100%`. Le visuel est un element de
 * grille dont la hauteur vient de la rangee, elle-meme dimensionnee par son
 * contenu : un enfant qui demande 100 % d'une hauteur indefinie boucle avec
 * Leaflet, qui dimensionne ses tuiles sur le conteneur, qui grandit encore.
 *
 * Mesure quand la regle etait fausse : la section montait a **805 022 px** et
 * la page chargeait **6 144 tuiles**. Rien ne le signalait — la structure
 * etait juste, les marqueurs etaient la, et les tests de structure passaient.
 * C'est `zone-intervention` qui avait raison depuis le debut avec son seul
 * `min-height`.
 */
.ivy-map--secteurs .ivy-map__canvas {
	width: 100%;
	min-height: clamp( 380px, 42vw, 560px );
}

/*
 * Les tuiles sont DESATUREES. Repris de la quatrieme reference envoyee par
 * Alex, et ce n'est pas cosmetique : une carte OpenStreetMap brute impose ses
 * verts et ses ocres a une section dont la direction artistique appartient au
 * client. Desaturee, elle redevient un fond, et les marqueurs — qui, eux,
 * portent la couleur d'accent — reprennent la premiere place.
 */
.ivy-map--secteurs .ivy-map__canvas .leaflet-tile-pane {
	filter: grayscale( .8 ) contrast( .95 ) brightness( 1.05 );
}

/*
 * La legende est posee SUR la carte. `pointer-events: none` la rend
 * traversante : sans ca, elle avalerait le glisser-deposer de Leaflet sur
 * toute sa surface, et la carte deviendrait immobile a cet endroit.
 */
.ivy-map--secteurs .ivy-map__caption {
	position: absolute;
	/*
	 * Au-dessus des panneaux de Leaflet, qui montent a 400 pour les tuiles et
	 * les calques et a 600 pour les marqueurs, et SOUS ses controles, qui sont
	 * a 800. A `z-index: 2`, la legende passait derriere la carte : elle
	 * restait a sa place, de la bonne taille, et n'apparaissait plus.
	 */
	z-index: 700;
	right: auto;
	bottom: clamp( 14px, 2vw, 24px );
	left: clamp( 14px, 2vw, 24px );
	max-width: 22ch;
	margin: 0;
	padding: clamp( 14px, 1.6vw, 20px );
	border-radius: var( --ivy-caption-border-radius, 14px );
	background: var( --ivy-ink, rgb( 17 17 17 ) );
	color: var( --ivy-caption-color, var( --ivy-surface, rgb( 255 255 255 ) ) );
	font-size: var( --ivy-font-body );
	line-height: 1.4;
	pointer-events: none;
}

/*
 * Le marqueur. Le runtime injecte `<span class="ivy-map__pin">NN</span>` et
 * n'habille rien — c'est la frontiere du depot, il publie du balisage et des
 * nombres, la feuille decide de l'apparence. Chaque produit du rayon doit
 * donc l'habiller : celui de `zone-intervention` est cadre sous SA racine, et
 * sans ces regles les marqueurs sortaient en chiffres nus sur les tuiles.
 */
.ivy-map--secteurs .ivy-map__pin {
	display: flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border: 2px solid var( --ivy-surface, rgb( 255 255 255 ) );
	border-radius: 50%;
	background: var( --ivy-accent, rgb( 17 17 17 ) );
	color: var( --ivy-surface, rgb( 255 255 255 ) );
	font-size: calc( ( .72rem ) * var( --ivy-text-scale, 1 ) );
	font-weight: 800;
	box-shadow: 0 6px 18px rgb( 15 23 42 / 28% );
	transition: transform calc( 200ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-map--secteurs .ivy-map__pin--base { width:40px; height:40px; font-size:calc( ( .8rem ) * var( --ivy-text-scale, 1 ) ); }
.ivy-map--secteurs .ivy-map__pin.is-active { z-index: 2; scale: 1.14; }

.ivy-map--secteurs .leaflet-control-attribution { font-size:calc( ( 9px ) * var( --ivy-text-scale, 1 ) ); }
.ivy-map--secteurs .leaflet-control-zoom a { color:var( --ivy-ink, rgb( 17 17 17 ) ); }

.ivy-map--secteurs .ivy-map__content { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:18px; padding:clamp( 8px, 2vw, 32px ) 0; }
.ivy-map--secteurs .ivy-map__eyebrow { color:var( --ivy-eyebrow-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); font-size:var( --ivy-font-label ); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.ivy-map--secteurs .ivy-map__title { margin:0; color:var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); font-size:var( --ivy-font-h2 ); line-height:1.08; }
.ivy-map--secteurs .ivy-map__text { max-width:52ch; margin:0; color:var( --ivy-text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); line-height:1.65; }

/*
 * DEUX vraies colonnes. Sur la reference, elles etaient obtenues avec deux
 * widgets de liste poses cote a cote : une colonne y est un montage, pas une
 * mise en page, et l'ordre de lecture y saute d'une liste a l'autre. `columns`
 * garde UNE liste, donc un seul ordre de lecture pour un lecteur d'ecran.
 */
.ivy-map--secteurs .ivy-map__locations {
	width: 100%;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: clamp( 16px, 2vw, 32px );
	list-style: none;
}

.ivy-map--secteurs .ivy-map__location {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
	/* Une puce ne se coupe pas entre deux colonnes. */
	break-inside: avoid;
	color: var( --ivy-item-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
}

.ivy-map--secteurs .ivy-map__location-link { display:inline-flex; min-height:44px; align-items:center; color:inherit; text-decoration:none; }
.ivy-map--secteurs .ivy-map__location-link:hover, .ivy-map--secteurs .ivy-map__location-link:focus-visible { text-decoration:underline; text-underline-offset:.2em; }
.ivy-map--secteurs .ivy-map__location-link:focus-visible { outline:2px solid currentcolor; outline-offset:4px; }

/*
 * Le marqueur est un chevron, dessine en CSS. Il est CARRE par construction :
 * la famille `size` n'ecrit qu'une largeur (dette connue), `aspect-ratio` fait
 * suivre la hauteur, sinon le regler l'ecraserait.
 */
.ivy-map--secteurs .ivy-map__location-icon {
	position: relative;
	display: inline-grid;
	box-sizing: border-box;
	width: 1.05em;
	flex: none;
	align-self: center;
	aspect-ratio: 1;
	border-radius: 50%;
	color: var( --ivy-item_icon-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
}

.ivy-map--secteurs .ivy-map__location-icon::before {
	position: absolute;
	top: 32%;
	left: 34%;
	width: .3em;
	height: .3em;
	border: solid currentcolor;
	border-width: 2px 2px 0 0;
	content: '';
	transform: rotate( 45deg );
}

/* La commune de rattachement se distingue sans dependre de la couleur seule :
   elle porte aussi la graisse. */
.ivy-map--secteurs .ivy-map__location.is-base .ivy-map__location-name { font-weight:700; }

.ivy-map--secteurs .ivy-map__cta {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	padding: .78em 1.5em;
	border-radius: var( --ivy-cta-border-radius, 999px );
	background: var( --ivy-cta-background-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
	color: var( --ivy-cta-color, var( --ivy-surface, rgb( 255 255 255 ) ) );
	font-weight: 700;
	text-decoration: none;
	transition: transform calc( 180ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-map--secteurs .ivy-map__cta:hover { transform:translateY( -2px ); }
.ivy-map--secteurs .ivy-map__cta:focus-visible { outline:3px solid currentcolor; outline-offset:4px; }

@media ( max-width: 860px ) {
	.ivy-map--secteurs { grid-template-columns:minmax( 0, 1fr ); }
	.ivy-map--secteurs .ivy-map__canvas { min-height:340px; }
}

@media ( max-width: 560px ) {
	.ivy-map--secteurs .ivy-map__locations { columns:1; }
}

@media ( prefers-reduced-motion: reduce ) {
	.ivy-map--secteurs .ivy-map__cta { transition:none; }
	.ivy-map--secteurs .ivy-map__cta:hover { transform:none; }
}

/*
 * L'EPINGLE EST UNE GOUTTE, PAS UN DISQUE. Un disque numerote ne se lit pas
 * comme un marqueur : le proprietaire d'un site l'a signale en cherchant
 * « l'icone d'un map pin ». La goutte se dessine sans image : trois coins
 * arrondis sur quatre, tournes de 45 degres.
 *
 * TROIS PROPRIETES INDIVIDUELLES, jamais un transform compose. rotate,
 * translate et scale s'appliquent dans cet ordre et ne s'ecrasent pas entre
 * regles : l'etat actif n'a donc qu'a poser son echelle, sans recopier la
 * rotation. Ecrit en transform, chaque etat devait repeter les autres, et le
 * premier oubli les supprimait en silence.
 *
 * translate: 0 -20.71% : une boite carree tournee de 45 degres deborde son
 * cadre de mise en page de (racine de 2 moins 1) sur 2 de son cote, soit
 * 20,71 %. Sans ce releve, la POINTE tombe sous le bas du marqueur — donc a
 * cote du lieu qu'elle designe, mesure a 4 px. En pourcentage, la formule vaut
 * pour n'importe quelle taille, et un produit qui change la sienne n'a rien a
 * recalculer.
 *
 * Le libelle se CONTRE-tourne dans sa propre boite : c'est pourquoi le runtime
 * la publie. Faire tourner un noeud de texte est impossible.
 */
.ivy-map--secteurs .ivy-map__pin {
	border-radius: 50% 50% 50% 0;
	color: var( --ivy-pin-color, var( --ivy-surface, rgb( 255 255 255 ) ) );
	translate: 0 -20.71%;
	rotate: -45deg;
}

.ivy-map--secteurs .ivy-map__pin-label {
	display: block;
	rotate: 45deg;
}