/* ============================================================================
   Point Chaud CercleKit — l'image, les points, les branches, les étiquettes.

   Aucun JS. Trois mécaniques à connaître avant de toucher à ce fichier :

   1. LA CONVERSION. Les points sont posés en % de l'IMAGE, mais l'image
      n'occupe qu'une partie du cadre (--ckp-image-w). Le décalage est refait
      ICI, en calc(), et non figé au rendu : le repli du petit écran remet
      --ckp-image-w à 100%, et tous les points se replacent seuls.

      C'est aussi ce qui rend l'éditeur fluide : --ckp-x et --ckp-y sont
      poussées par Elementor (`selectors` + {{CURRENT_ITEM}}) à chaque cran de
      curseur, sans qu'il ait besoin de redemander le widget au serveur. La
      version 4.3.98 posait ces positions au rendu, en `style` inline : le
      widget était détruit et rechargé à chaque pixel.

   2. LES BRANCHES. Le SVG a pour repère le cadre (viewBox 0 0 100 100 +
      preserveAspectRatio "none") : une unité = un pour cent, dans les deux
      sens. C'est ce qui permet de tracer en pourcentages sans JS. La rançon,
      c'est que le repère est déformé — d'où vector-effect="non-scaling-stroke"
      sur chaque trait, qui rend son épaisseur au pixel près.

   3. L'ICÔNE. Elle est en display:inline-block DANS le texte, pas en colonne
      à côté : sur une étiquette alignée à droite dont le titre est plus court
      que la description, une icône en flex se retrouverait décrochée du mot.

   Les variables --ckp-* appartiennent à ce widget. On ne touche PAS aux
   --ck-* : celles-là sont le design system du site, réglé par le client.
   ========================================================================== */

.ck-pchaud {
	--ckp-image-w: 52%;
	--ckp-image-r: 0px;

	/* Positions : Elementor les pousse par `selectors` sur chaque ligne du
	   répéteur, donc en direct, sans re-rendu. Le `-defaut` posé au rendu
	   n'est qu'un repli — voir le commentaire du widget PHP. */
	--ckp-x-defaut: 50;
	--ckp-y-defaut: 50;

	--ckp-pt: 14px;
	--ckp-pt-fond: #fffcf8;
	--ckp-pt-bord: #333333;
	--ckp-pt-ep: 2px;
	--ckp-halo: 4px;
	--ckp-halo-c: rgba(0, 0, 0, .12);
	--ckp-pulse-ampleur: 2px;    /* de combien le halo enfle au sommet */
	--ckp-pulse-duree: 3.2s;     /* un aller-retour complet */
	--ckp-num-c: #0b1726;

	--ckp-trait: #303946;
	--ckp-trait-ep: 1;
	--ckp-trait-op: .55;

	--ckp-etq-w: 21%;
	--ckp-etq-gap: 10px;
	--ckp-ico: 14px;
	--ckp-ico-c: #333333;
	--ckp-ico-gap: 6px;
	--ckp-titre-c: #0b1726;
	--ckp-texte-c: #8a8580;
	--ckp-bulle-fond: #0b1726;
	--ckp-bulle-texte: #fffcf8;
	--ckp-bandeau-pad: 14px 18px;   /* l'air autour du texte, en bas du cadre */
	--ckp-bandeau-texte: 44ch;      /* au-delà, une ligne devient pénible à lire */
	--ckp-bandeau-fond: #0b1726;
	--ckp-bandeau-titre: #fffcf8;
	--ckp-bandeau-align: center;

	/* La loupe. Ses couleurs ne sont PAS empruntées à celles du point ou du
	   trait : elle est posée SUR l'image du client, elle doit pouvoir s'y
	   fondre ou s'en détacher indépendamment du reste. */
	--ckp-loupe-taille: 32px;
	--ckp-loupe-marge: 10px;
	--ckp-loupe-ecart: 4px;
	--ckp-loupe-texte: #0b1726;
	--ckp-loupe-fond: #fffcf8;
	--ckp-loupe-bord: #303946;
	--ckp-loupe-ep: 1px;
	--ckp-loupe-rayon: 4px;
	--ckp-pt-actif: var(--ckp-pt-fond);
	--ckp-actif-halo: 7px;    /* le halo quand le point est ouvert */
	--ckp-actif-taille: 1;    /* son grossissement */
	--ckp-survol: 1.22;       /* le grossissement au survol, souris seulement */
	--ckp-tactile: 44px;   /* la zone qu'un doigt doit pouvoir viser */
	--ckp-suivi: .5;       /* combien le point grossit avec l'image agrandie */
}

/* ---------------------------------------------------------------- le cadre */
/* ⚠️ LE CADRE SUIT L'IMAGE — il n'y a plus de hauteur à régler. Kévin,
   2026-08-30 : « la largeur devrait l'adapter automatiquement, on perd un
   jour de taff juste pour un réglage nul ». Deux curseurs à accorder l'un à
   l'autre, c'était du bricolage. On règle la largeur, la hauteur en découle. */
.ck-pchaud__scene { position: relative; width: 100%; }

/* ------------------------------------------------------------------ LA LOUPE
   Le PLAN porte l'agrandissement. Il enveloppe tout le contenu du cadre, pour
   que l'image, les points, les branches et les étiquettes bougent ENSEMBLE :
   un point qui se décalerait d'un cheveu par rapport au détail qu'il montre
   ne montrerait plus rien.

   Au repos --ckp-zoom vaut 1 : ce niveau de plus ne change alors rien du tout,
   et le rendu sans loupe est exactement celui d'avant. */
.ck-pchaud__plan {
	position: relative;
	transform-origin: 50% 50%;
	transform: translate(var(--ckp-pan-x, 0px), var(--ckp-pan-y, 0px)) scale(var(--ckp-zoom, 1));
	transition: transform .18s ease-out;
}
.ck-pchaud--zoome .ck-pchaud__scene { overflow: hidden; }
.ck-pchaud--zoome .ck-pchaud__plan {
	cursor: grab; transition: none;
	/* Sans ça, le navigateur interprète le glissement comme un défilement de
	   la page et interrompt la séquence en cours de route. */
	touch-action: none;
}
.ck-pchaud--saisi .ck-pchaud__plan { cursor: grabbing; }

/* ⚠️ ENTRE DEUX EXTRÊMES, ET NI L'UN NI L'AUTRE. Rendre au point l'inverse
   exact de l'agrandissement lui garde sa taille à l'écran — mais face à une
   image qui triple, il a l'air de fondre. Kévin, 2026-08-29 : « QUAND JE ZOOM
   LES PASTILLE SE RETRECISSE MAIS DU COUP C'EST CHIANT, FAUDRAIT QU'ELLE
   RETRECISSE MAIS PAS AUTANT ». Le laisser grossir comme l'image serait
   l'autre excès : à ×3 le point mangerait le détail qu'il désigne.

   --ckp-suivi fait la route entre les deux : 0 = taille fixe à l'écran,
   1 = il grossit autant que l'image. Entre les deux, il grossit un peu, donc
   il rétrécit moins par rapport à l'image. */
.ck-pchaud__pt {
	--ckp-contre-zoom: calc(
		1 / var(--ckp-zoom, 1)
		+ (1 - 1 / var(--ckp-zoom, 1)) * var(--ckp-suivi, .5)
	);
}

.ck-pchaud__loupe {
	position: absolute; z-index: 5;
	display: none; gap: var(--ckp-loupe-ecart);
	top: var(--ckp-loupe-marge); left: var(--ckp-loupe-marge);
}
/* Le coin où elle se pose. Un seul des quatre est appliqué à la fois : les
   trois autres repassent à `auto`, sinon la boîte s'étirerait d'un bord à
   l'autre. */
.ck-pchaud--coin-hd .ck-pchaud__loupe { left: auto; right: var(--ckp-loupe-marge); }
.ck-pchaud--coin-bg .ck-pchaud__loupe { top: auto; bottom: var(--ckp-loupe-marge); }
.ck-pchaud--coin-bd .ck-pchaud__loupe {
	top: auto; left: auto;
	bottom: var(--ckp-loupe-marge); right: var(--ckp-loupe-marge);
}
.ck-pchaud--loupe-partout .ck-pchaud__loupe { display: flex; }
.ck-pchaud__loupe-btn {
	width: var(--ckp-loupe-taille); height: var(--ckp-loupe-taille);
	padding: 0; margin: 0;
	display: grid; place-items: center;
	font-weight: 600; line-height: 1;
	font-size: calc(var(--ckp-loupe-taille) * .56);
	color: var(--ckp-loupe-texte);
	background: var(--ckp-loupe-fond);
	border: var(--ckp-loupe-ep) solid var(--ckp-loupe-bord);
	border-radius: var(--ckp-loupe-rayon);
	cursor: pointer;
	opacity: .9;
	transition: opacity .15s ease;
}
.ck-pchaud__loupe-btn:hover:not([disabled]) { opacity: 1; }
.ck-pchaud__loupe-btn[disabled] { opacity: .35; cursor: default; }

/* ⚠️ `flex: 0 0 auto` EST INDISPENSABLE. Dès qu'une hauteur est posée le plan
   passe en flex, et un enfant de flex se laisse COMPRIMER par défaut
   (`flex-shrink: 1`) : l'image se retrouvait réduite à un timbre-poste au
   milieu du cadre — constaté sur la capture de Kévin, cadre de 870 px, image
   réglée à 100 % et large de 150 px à l'écran. */
.ck-pchaud__visuel {
	width: var(--ckp-image-w);
	max-width: 100%;
	flex: 0 0 auto;
	margin: 0 auto;
	position: relative;
}

/* UNE VRAIE FENÊTRE. Sans hauteur propre, le cadre épouse l'image : agrandir
   ×2 fait aussitôt sortir les points du champ — mesuré en 4.3.105, quatre
   points sur cinq hors cadre dès ×2,25. Kévin : « j'peux zoomer mais ça coupe
   dedans, faudrait une hauteur d'image ». Avec une hauteur, l'image se centre
   dedans et on a de la place pour regarder. */
.ck-pchaud__visuel img {
	display: block; width: 100%; height: auto;
	border-radius: var(--ckp-image-r);
}

/* ------------------------------------------------------------- les branches */
.ck-pchaud__traits {
	position: absolute; inset: 0; width: 100%; height: 100%;
	pointer-events: none; overflow: visible;
}
.ck-pchaud__traits line {
	stroke: var(--ckp-trait);
	stroke-width: var(--ckp-trait-ep);
	opacity: var(--ckp-trait-op);
	stroke-linecap: round;
}
.ck-pchaud--pointille .ck-pchaud__traits line { stroke-dasharray: 4 3; }

/* ============================================================================
   QUAND ÇA APPARAÎT — « au survol » et « au clic »
   ============================================================================
   Kévin, 2026-08-30 : « masquer la branche et l'intitulé, et que ça apparaisse
   soit au hover d'un point soit au clic ». L'image reste alors nue : ni
   étiquette, ni branche, tant que personne n'a touché un point.

   ⚠️ ON CACHE EN `visibility`, PAS EN `display`. Les étiquettes du mode
   colonnes sont placées les unes par rapport aux autres ; les retirer du flux
   ferait sauter tout le rangement au premier survol, et le texte danserait.
   La branche, elle, est un groupe SVG : `opacity` suffit et n'affecte rien
   d'autre. Le tout reste inerte au pointeur tant que c'est caché.
   ⚠️ ET TOUT EST CONDITIONNÉ À `--js`. Sans script, rien ne pourrait
   rouvrir ce qu'on cache : la page servirait une image muette. Le repli
   sans JavaScript, c'est donc « tout visible », comme avant. */
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__etq,
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__etq {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Elle arrive APRÈS le trait, pas avec lui : le trait va la chercher, elle
	   se montre quand il est arrivé. */
	transition: opacity .22s ease .40s, visibility .22s ease .40s;
}
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__etq--ouverte,
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__etq--ouverte {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
/* Au retrait, elle part la première — sinon elle resterait seule en l'air
   pendant que le trait s'efface. */
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__etq:not(.ck-pchaud__etq--ouverte),
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__etq:not(.ck-pchaud__etq--ouverte) {
	transition-delay: 0s;
}
/* ⚠️ QUI REFUSE LE MOUVEMENT NE LE SUBIT PAS. Le trait est alors posé d'un
   coup, et l'étiquette avec : le widget reste utilisable, il ne raconte
   simplement plus rien. */
@media (prefers-reduced-motion: reduce) {
	.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__trait line,
	.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__trait line,
	.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__etq,
	.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__etq { transition: none !important; }
}
/* ⚠️ LA BRANCHE SE TRACE, ELLE N'APPARAIT PAS. Kévin : « et tu fais une vraie
   animation hein ». Un fondu sur un trait, ça ne raconte rien ; un trait qui
   part du point et va chercher l'étiquette, si. Chaque segment porte
   `pathLength="100"` (posé par le script) : sa longueur est donc normalisée,
   et un `stroke-dashoffset` de 100 à 0 le dessine d'un bout à l'autre, quelle
   que soit sa taille réelle à l'écran.
   Le coude se trace EN DEUX TEMPS — l'oblique depuis le point, puis le petit
   horizontal contre l'étiquette. C'est l'ordre dans lequel un stylo le
   ferait, et c'est pour ça que le second segment attend son tour. */
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__trait,
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__trait { opacity: 1; }
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__trait line,
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__trait line {
	/* La longueur vraie du trait, en pixels d'ecran, posee par le script.
	   Le repli est volontairement enorme : si elle manquait, mieux vaut un
	   trait entierement cache qu'un pointille en morceaux. */
	stroke-dasharray: var(--ckp-trait-len, 4000px);
	stroke-dashoffset: var(--ckp-trait-len, 4000px);
	transition: stroke-dashoffset .34s cubic-bezier(.22, .61, .36, 1);
}
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__trait line + line,
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__trait line + line {
	transition-delay: .26s;
}
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__trait--actif line,
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__trait--actif line {
	stroke-dashoffset: 0;
}
/* Le trait se retire dans l'autre sens quand on quitte le point : le dernier
   segment tracé est le premier effacé. */
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__trait line,
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__trait line { transition-delay: .18s; }
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__trait--actif line,
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__trait--actif line { transition-delay: 0s; }
.ck-pchaud--js.ck-pchaud--rev-survol .ck-pchaud__trait--actif line + line,
.ck-pchaud--js.ck-pchaud--rev-clic   .ck-pchaud__trait--actif line + line { transition-delay: .26s; }

/* --------------------------------------------------------------- les points */
/* ============================================================================
   ON ÉCRASE TOUJOURS LE THÈME. C'est une règle de Kévin, et le dépôt l'avait
   déjà payée TROIS fois avant aujourd'hui (4.2.730, 4.2.735, 4.2.740) : un
   widget front qui ne pose que les propriétés qu'il veut changer laisse le
   thème décider de toutes les autres — et ça se voit chez le client, pas ici.

   Donc : chaque élément du widget que le thème sait styler (button, a, ol, li,
   img) pose TOUT, y compris ses états, et en `!important`. Ce n'est pas de la
   surenchère : ces éléments ne sont pas des boutons ni des listes « du site »,
   ce sont les pièces d'un widget dont l'apparence appartient à ses réglages.
   ========================================================================== */

/* Liens des étiquettes : un thème colore et souligne les <a> au survol. */
.ck-pchaud .ck-pchaud__lien,
.ck-pchaud .ck-pchaud__lien:hover,
.ck-pchaud .ck-pchaud__lien:focus,
.ck-pchaud .ck-pchaud__lien:visited {
	color: inherit !important;
	background: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
}
.ck-pchaud .ck-pchaud__lien:hover .ck-pchaud__tt { text-decoration: underline !important; }

/* La liste de repli : puces, retraits et marges des thèmes. */
.ck-pchaud .ck-pchaud__liste,
.ck-pchaud .ck-pchaud__ligne {
	list-style: none !important;
	padding-left: 0 !important;
	background: none !important;
}
.ck-pchaud .ck-pchaud__liste { margin: 24px 0 0 !important; }
.ck-pchaud .ck-pchaud__ligne::before,
.ck-pchaud .ck-pchaud__ligne::marker { content: none !important; }

/* L'image : bordures, ombres et arrondis imposés par les thèmes et le kit. */
.ck-pchaud .ck-pchaud__visuel img {
	border: 0 !important;
	box-shadow: none !important;
	max-width: 100% !important;
	border-radius: var(--ckp-image-r) !important;
}

/* ⚠️ UN POINT EST UN <button>, DONC IL HÉRITE DES BOUTONS DU SITE.
   C'est la cause du rose que Kévin voyait AU SURVOL, et il me l'a dit dix
   fois avant que je regarde au bon endroit : le thème (ou Elementor) applique
   `button:hover { background: <couleur d'accent> }`, et son accent est rose.
   Mon widget n'y était pour rien — mais ne rien reprendre en main revenait à
   laisser n'importe quel thème repeindre les points.

   On reprend donc TOUS les états à notre compte : repos, survol, focus,
   appui, visité.

   ⚠️ `!important` ASSUMÉ. Un thème qui repeint ses boutons le fait souvent
   lui-même en `!important` : sans ça, aucune spécificité raisonnable ne
   suffirait. Et ces boutons-là ne sont pas des boutons de site — ce sont des
   repères posés sur une image, dont l'apparence appartient aux réglages du
   widget. Je n'ai pas pu le vérifier à la mesure : le panneau qui me sert à
   tester ne rend pas les pseudo-classes (:hover, :focus) — même limite que
   pour le survol en 4.3.98. Le !important, lui, ne dépend d'aucune mesure. */
.ck-pchaud .ck-pchaud__pt,
.ck-pchaud .ck-pchaud__pt:hover,
.ck-pchaud .ck-pchaud__pt:focus,
.ck-pchaud .ck-pchaud__pt:active,
.ck-pchaud .ck-pchaud__pt:visited {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--ckp-pt-fond) !important;
	background-image: none !important;
	border: var(--ckp-pt-ep) solid var(--ckp-pt-bord) !important;
	border-radius: 50% !important;
	color: var(--ckp-num-c) !important;
	font: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0;
	min-height: 0;
	outline: none;
	filter: none !important;
	transition: transform .15s ease, box-shadow .15s ease !important;
}
.ck-pchaud .ck-pchaud__pt--actif,
.ck-pchaud .ck-pchaud__pt--actif:hover,
.ck-pchaud .ck-pchaud__pt--actif:focus {
	background: var(--ckp-pt-actif) !important;
	border-color: var(--ckp-actif-bord, var(--ckp-pt-bord)) !important;
}
/* Idem pour les deux boutons de la loupe. */
/* ⚠️ CE BLOC REPREND LE THÈME EN MAIN, IL NE VERROUILLE PAS LE SURVOL.
   Jusqu'à la 4.3.125 il posait les MÊMES couleurs sur les quatre états, en
   `!important` : le thème ne pouvait plus repeindre les boutons — c'était le
   but — mais NOUS non plus. Kévin : « j'avais demandé le custom des boutons
   de la loupe en hover et tout ». Les couleurs sortent donc d'ici, et le bloc
   qui suit les redonne état par état. Tout le reste (apparence, police,
   marges, ombres, filtres) reste verrouillé pour les quatre. */
.ck-pchaud .ck-pchaud__loupe-btn,
.ck-pchaud .ck-pchaud__loupe-btn:hover,
.ck-pchaud .ck-pchaud__loupe-btn:focus,
.ck-pchaud .ck-pchaud__loupe-btn:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	border-style: solid !important;
	border-width: var(--ckp-loupe-ep) !important;
	border-radius: var(--ckp-loupe-rayon) !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0;
	min-height: 0;
	outline: none;
	filter: none !important;
}

/* LES COULEURS, ÉTAT PAR ÉTAT. Le survol n'a pas de valeur par défaut : sans
   réglage, `var(--x-h, var(--x))` retombe sur le repos et le rendu est celui
   d'avant, au pixel. `:focus-visible` suit le survol — c'est le même geste au
   clavier, et il ne doit pas laisser le thème reprendre la main. */
.ck-pchaud .ck-pchaud__loupe-btn {
	background: var(--ckp-loupe-fond) !important;
	border-color: var(--ckp-loupe-bord) !important;
	color: var(--ckp-loupe-texte) !important;
}
.ck-pchaud .ck-pchaud__loupe-btn:hover:not([disabled]),
.ck-pchaud .ck-pchaud__loupe-btn:focus-visible:not([disabled]) {
	background: var(--ckp-loupe-fond-h, var(--ckp-loupe-fond)) !important;
	border-color: var(--ckp-loupe-bord-h, var(--ckp-loupe-bord)) !important;
	color: var(--ckp-loupe-texte-h, var(--ckp-loupe-texte)) !important;
}

.ck-pchaud__pt {
	position: absolute;
	/* ⚠️ LE POINT EST POSÉ DANS L'IMAGE, pas dans le cadre. Avant la 4.3.106 il
	   vivait dans le cadre, avec une conversion pour retrouver l'image dedans.
	   Ça marchait tant que le cadre épousait l'image — mais dès qu'on lui donne
	   une hauteur propre (une vraie fenêtre pour la loupe), l'image se centre
	   dedans et la conversion devenait fausse. Ancré à l'image, le point suit
	   son détail quoi qu'il arrive au cadre. */
	left: calc(var(--ckp-x, var(--ckp-x-defaut)) * 1%);
	top:  calc(var(--ckp-y, var(--ckp-y-defaut)) * 1%);
	transform: translate(-50%, -50%) scale(var(--ckp-contre-zoom, 1));
	width: var(--ckp-pt); height: var(--ckp-pt);
	margin: 0; padding: 0;
	border: var(--ckp-pt-ep) solid var(--ckp-pt-bord);
	border-radius: 50%;
	background: var(--ckp-pt-fond);
	box-shadow: 0 0 0 var(--ckp-halo) var(--ckp-halo-c);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
	z-index: 2;
	display: grid; place-items: center;
	line-height: 1;
}
/* ⚠️ LA ZONE QU'UN DOIGT PEUT VISER, mesurée le 2026-08-29 : le point faisait
   14 × 14 px. Un doigt en couvre environ 45. Kévin : « ÇA MARCHE UNE FOIS SUR
   40 SUR TACTILE » — c'était exactement ça, et ce n'était pas une impression.
   Apple comme Google demandent 44 px au minimum.

   On agrandit donc la CIBLE sans toucher au DESSIN : un rectangle invisible,
   centré sur le point, qui reçoit le doigt. Le point garde sa taille et son
   allure. `touch-action: manipulation` supprime en plus l'attente que le
   navigateur s'impose pour guetter un double-tap. */
.ck-pchaud__pt { touch-action: manipulation; }
.ck-pchaud__pt::before {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width:  max(var(--ckp-tactile), 100%);
	height: max(var(--ckp-tactile), 100%);
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

/* ⚠️ LE SURVOL N'EXISTE QUE LA OU L'ON SURVEILLE. Sans ce garde, un doigt qui
   appuie laisse le point en etat « survole » APRES avoir relache — il reste
   gonfle jusqu'a ce qu'on touche ailleurs. Kevin, 2026-08-30 : « on dirait un
   etat hover ou actif, mais on le voit que sur tel ». C'etait exactement ca.
   Le focus clavier, lui, reste dans tous les cas : il doit se voir. */
@media (hover: hover) and (pointer: fine) {
	.ck-pchaud__pt:hover {
		transform: translate(-50%, -50%) scale(calc(var(--ckp-survol) * var(--ckp-contre-zoom, 1)));
		box-shadow: 0 0 0 calc(var(--ckp-halo) + 3px) var(--ckp-halo-c);
	}
}
.ck-pchaud__pt:focus-visible {
	transform: translate(-50%, -50%) scale(calc(var(--ckp-survol) * var(--ckp-contre-zoom, 1)));
	box-shadow: 0 0 0 calc(var(--ckp-halo) + 3px) var(--ckp-halo-c);
}

/* Le numéro : caché tant qu'on ne l'a pas demandé — mais le repli du petit
   écran le rallume d'office, sinon la liste du dessous ne se rattache à rien. */
.ck-pchaud__num { display: none; }
.ck-pchaud--numerote .ck-pchaud__pt { width: auto; min-width: calc(var(--ckp-pt) * 1.9); height: calc(var(--ckp-pt) * 1.9); }
.ck-pchaud--numerote .ck-pchaud__num {
	display: block;
	font-size: calc(var(--ckp-pt) * .82);
	font-weight: 600;
	color: var(--ckp-num-c);
	padding: 0 .25em;
}

/* La pulsation, si on l'a demandée — et jamais contre l'avis du système. */
/* ⚠️ DOSÉ. La première version gonflait le halo de 8 px : sur le défaut de
   4 px, il TRIPLAIT à chaque battement. Kévin, 2026-08-29 : « LA RESPIRATION
   TA FUMÉ C'EST BIEN TROP, DOSE ». Le défaut est maintenant +2 px — le point
   respire, il ne clignote pas — et l'ampleur est un réglage, parce qu'un
   mouvement se dose à l'œil, pas dans le code d'un widget. */
@keyframes ck-pchaud-pulse {
	0%, 100% { box-shadow: 0 0 0 var(--ckp-halo) var(--ckp-halo-c); }
	50%      { box-shadow: 0 0 0 calc(var(--ckp-halo) + var(--ckp-pulse-ampleur)) var(--ckp-halo-c); }
}
.ck-pchaud--pulse .ck-pchaud__pt {
	animation: ck-pchaud-pulse var(--ckp-pulse-duree) ease-in-out infinite;
}
.ck-pchaud--pulse .ck-pchaud__pt:hover,
.ck-pchaud--pulse .ck-pchaud__pt:focus-visible,
.ck-pchaud--pulse .ck-pchaud__pt--actif { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.ck-pchaud--pulse .ck-pchaud__pt { animation: none; }
	.ck-pchaud__pt { transition: none; }
}

/* ----------------------------------------------------------- les étiquettes */
.ck-pchaud__etq {
	position: absolute;
	max-width: var(--ckp-etq-w);
	line-height: 1.35;
	z-index: 1;
}

/* EN COLONNES, la place est calculée (au rendu, puis par le script dès que ça
   bouge) : --ckp-ex / --ckp-ey. LIBRES, elle vient des curseurs qu'Elementor
   pousse en direct — avec repli sur la place d'office. */
/* --ckp-fix : le rattrapage posé par le script quand une étiquette sort du
   cadre (un texte plus long que la place laissée). Il s'AJOUTE, il ne remplace
   pas — sinon on écraserait la valeur qu'Elementor pousse depuis le curseur,
   et le réglage cesserait de répondre. */
.ck-pchaud--colonnes .ck-pchaud__etq {
	left: calc((var(--ckp-ex) + var(--ckp-fix, 0)) * 1%);
	top:  calc(var(--ckp-ey) * 1%);
}
.ck-pchaud--libre .ck-pchaud__etq {
	left: calc((var(--ckp-lx, var(--ckp-lx-defaut)) + var(--ckp-fix, 0)) * 1%);
	top:  calc(var(--ckp-ly, var(--ckp-ly-defaut)) * 1%);
}
.ck-pchaud__etq--gauche { transform: translate(-100%, -50%); text-align: right; padding-right: var(--ckp-etq-gap); }
.ck-pchaud__etq--droite { transform: translate(0, -50%);      text-align: left;  padding-left:  var(--ckp-etq-gap); }

/* ⚠️ LA BRANCHE ARRIVE SUR LA LIGNE DU TITRE, pas au milieu du bloc.
   Kévin, 2026-08-29 : « ET TA BRANCHE SI Y'A PAS DE DESCRIPTION ÇA DOIT
   S'ALIGNER VERTICALEMENT SUR LE TITRE ». Centrer le bloc entier fait arriver
   le trait ENTRE le titre et la description — il ne montre plus rien de
   précis. On cale donc la PREMIÈRE LIGNE sur le point d'arrivée : avec ou
   sans description, le trait tombe sur le titre.

   `lh` = la hauteur d'une ligne de l'élément. Les navigateurs qui ne la
   connaissent pas gardent le centrage du bloc ci-dessus : ils affichent
   l'ancien comportement, jamais un décalage aberrant. */
@supports (height: 1lh) {
	.ck-pchaud__etq--gauche { transform: translate(-100%, -0.5lh); }
	.ck-pchaud__etq--droite { transform: translate(0, -0.5lh); }
}

.ck-pchaud__tt { display: block; color: var(--ckp-titre-c); font-weight: 600; font-size: .95em; }
.ck-pchaud__ds { display: block; color: var(--ckp-texte-c); font-size: .85em; margin-top: 2px; }
.ck-pchaud--sans-titre .ck-pchaud__tt { display: none; }

/* ⚠️ LA DESCRIPTION SE CALE SOUS LE PREMIER MOT DU TITRE, pas sous l'icône.
   Kévin, 2026-08-29 : « ET SI ICONE TA DESCRIPTION SE CALLE AU DESSOUS DU
   DÉBUT DU TITRE PAS DÉBUT D'ICONE ». On lui réserve donc exactement la
   largeur de l'icône et son écart.

   Uniquement à DROITE, et ce n'est pas un oubli : à gauche le texte est aligné
   à droite, donc le titre et la description finissent déjà sur le même bord —
   il n'y a rien à rattraper, et un décalage les désalignerait. */
.ck-pchaud__etq--droite.ck-pchaud__etq--ico .ck-pchaud__ds,
.ck-pchaud__ligne--ico .ck-pchaud__ds {
	padding-left: calc(var(--ckp-ico) + var(--ckp-ico-gap));
}

.ck-pchaud__lien { text-decoration: none; color: inherit; }
.ck-pchaud__lien:hover .ck-pchaud__tt { text-decoration: underline; }

/* L'icône, dans le flux : elle suit la première ligne du texte. */
.ck-pchaud__ico {
	display: inline-block;
	width: var(--ckp-ico); height: var(--ckp-ico);
	color: var(--ckp-ico-c);
	margin-right: var(--ckp-ico-gap);
	vertical-align: -.14em;
}
.ck-pchaud__ico svg,
.ck-pchaud__ico i { width: 100%; height: 100%; display: block; fill: currentColor; font-size: var(--ckp-ico); line-height: 1; }

/* ------------------------------------------- LES BULLES
   Deux situations les demandent : le mode « sans branche » sur grand écran, et
   le petit écran, où il n'y a la place pour rien d'autre. Kévin, 2026-08-29 :
   « LA POSITION DE L'ÉTIQUETTE SUR MOBILE C'EST LA CATA ON CAPTE VRMT PAS » —
   le détail s'affichait sous l'image, toujours au même endroit, entre 181 et
   323 px du point touché (mesuré), et rien ne reliait les deux. Il a choisi la
   bulle accrochée au point : elle sort de CE point-là, on ne peut pas se
   tromper sur qui parle. */
.ck-pchaud--branche-aucune .ck-pchaud__etq,
.ck-pchaud--bulle .ck-pchaud__etq {
	opacity: 0; visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
	/* ⚠️ `width: max-content` EST INDISPENSABLE. Sans lui, une boîte absolue
	   tire sa largeur de la place restante à droite de `left` : une bulle posée
	   près du bord se retrouvait écrasée à 112 px, avec le texte empilé mot par
	   mot (constaté le 2026-08-29). Avec max-content elle prend sa largeur
	   naturelle, bornée ci-dessous, et le placement ne la déforme plus. */
	width: max-content;
	max-width: min(260px, 88%);
	padding: 8px 11px;
	border-radius: 4px;
	background: var(--ckp-bulle-fond);
	text-align: left;
	transform: translate(-50%, calc(-100% - var(--ckp-pt) - 10px)) scale(var(--ckp-contre-bulle, 1));
	transform-origin: 50% 100%;
	z-index: 3;
}
/* La petite pointe qui designe le point : sans elle, la bulle flotte. */
.ck-pchaud--branche-aucune .ck-pchaud__etq::after,
.ck-pchaud--bulle .ck-pchaud__etq::after {
	content: '';
	position: absolute;
	left: 50%; bottom: -4px;
	width: 9px; height: 9px;
	background: var(--ckp-bulle-fond);
	transform: translateX(-50%) rotate(45deg);
}
/* ------------------------------------------------------------- LE BANDEAU
   Sur petit écran, le détail prend TOUTE LA LARGEUR, en bas du cadre, centré.
   Kévin, 2026-08-30 : « fais moi une belle étiquette custom qui prends toute
   la largeur en bas avec l'item bien centrer. ça va pas la y'a plein de
   décalage et tout ».

   Il avait d'abord choisi la bulle accrochée au point — et elle avait un
   défaut qu'aucune mesure ne dit : elle se replace à chaque point touché
   (dessus, dessous, recalée d'un bord), donc le texte danse d'un endroit à
   l'autre. Le bandeau, lui, ne bouge JAMAIS : seul son contenu change. C'est
   ce qui rend la lecture calme.

   Il est hors du plan zoomable : il reste collé au bas du cadre même quand on
   agrandit l'image. */
.ck-pchaud--bandeau .ck-pchaud__etq {
	position: absolute;
	left: 0; right: 0;
	bottom: var(--ckp-bandeau-decal, 0px);
	top: auto;
	width: auto; max-width: none;
	transform: none !important;
	margin: 0; padding: var(--ckp-bandeau-pad);
	text-align: var(--ckp-bandeau-align);
	background: var(--ckp-bandeau-fond);
	border-radius: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
	z-index: 4;
}
.ck-pchaud--bandeau .ck-pchaud__etq--ouverte { opacity: 1; visibility: visible; }

/* SOUS L'IMAGE : l'étiquette sort du cadre et se met dans le flux, elle ne
   recouvre plus rien. Les autres sont retirées du flux pour de bon — en
   `visibility` seule, elles occuperaient encore leur place. */
/* SOUS L'IMAGE : L'ÉTIQUETTE EST DANS LE FLUX, ET ELLE POUSSE LA HAUTEUR.
   ⚠️ CE COMMENTAIRE DISAIT L'INVERSE, ET IL AVAIT RAISON — À L'ÉPOQUE. Tant
   que le cadre avait une hauteur réglée à la main, le plan passait en absolu,
   ne prenait plus de place dans le flux, et une étiquette en `static`
   remontait tout en haut. On la posait donc en absolu sur le bas réel de
   l'image, mesuré par le script — et la hauteur réglée lui faisait la place.

   CETTE HAUTEUR A ÉTÉ RETIRÉE EN 4.3.125, et l'étiquette est restée en absolu :
   elle ne poussait donc plus rien, et elle débordait sur la section suivante.
   Kévin : « t'as compris que c'est l'étiquette qui pousse pas la hauteur
   hein ». MESURÉ sur le banc à 375 px, avant correction : cadre 151→417,
   étiquette ouverte 417→504, bloc suivant 437→536 — 67 px de recouvrement.

   Le plan étant redevenu `relative`, donc dans le flux, l'étiquette peut enfin
   y être aussi. Les fermées sortent du flux pour de bon (`display: none`) :
   en `visibility` seule, les dix-sept d'une page occuperaient leur place. */
.ck-pchaud--etq-sous.ck-pchaud--bandeau .ck-pchaud__etq {
	position: static;
	top: auto; right: auto; bottom: auto; left: auto;
	margin-top: var(--ckp-bandeau-decal, 0px);
	display: none;
	opacity: 1;
	visibility: visible;
	transition: none;
}
/* Elle apparaît en douceur quand même : une apparition, pas un clignotement.
   `display` ne se transitionne pas, donc c'est une animation, pas une
   transition. */
.ck-pchaud--etq-sous.ck-pchaud--bandeau .ck-pchaud__etq--ouverte {
	display: block;
	animation: ck-pchaud-etq-apparait .18s ease both;
}
@keyframes ck-pchaud-etq-apparait { from { opacity: 0; } to { opacity: 1; } }
.ck-pchaud--bandeau .ck-pchaud__etq::after { display: none; }   /* pas de pointe */
/* Chacun sa couleur, avec un repli sensé : la description et l'icône suivent
   le titre tant qu'on ne leur en a pas donné d'autre. */
.ck-pchaud--bandeau .ck-pchaud__tt  { color: var(--ckp-bandeau-titre); }
.ck-pchaud--bandeau .ck-pchaud__ds  { color: var(--ckp-bandeau-desc, var(--ckp-bandeau-titre)); opacity: .82; }
.ck-pchaud--bandeau .ck-pchaud__ico { color: var(--ckp-bandeau-ico, var(--ckp-bandeau-titre)); }
.ck-pchaud--bandeau .ck-pchaud__tt,
.ck-pchaud--bandeau .ck-pchaud__ds { text-align: var(--ckp-bandeau-align); }
/* Centré, le bloc de texte se centre aussi ; aligné, il se colle au bord. */
.ck-pchaud--bandeau .ck-pchaud__tt,
.ck-pchaud--bandeau .ck-pchaud__ds { margin-left: auto; margin-right: auto; }
.ck-pchaud--bandeau[style*="left"] .ck-pchaud__tt { margin-left: 0; }
/* Le texte reste lisible même en ligne longue : on le borne et on le centre. */
.ck-pchaud--bandeau .ck-pchaud__tt,
.ck-pchaud--bandeau .ck-pchaud__ds {
	max-width: var(--ckp-bandeau-texte);
	margin-left: auto; margin-right: auto;
}
/* La liste du repli ne sert plus : c'est le bandeau qui parle. */
.ck-pchaud--bandeau .ck-pchaud__liste { display: none !important; }

/* Trop haut dans le cadre : la bulle passe SOUS le point plutot que de sortir. */
.ck-pchaud__etq--dessous {
	transform: translate(-50%, calc(var(--ckp-pt) + 10px)) scale(var(--ckp-contre-bulle, 1)) !important;
	transform-origin: 50% 0;
}
.ck-pchaud__etq--dessous::after { bottom: auto; top: -4px; }
/* Le texte reste lisible quand l'image est agrandie : la bulle ne grossit pas
   avec elle, contrairement au point qui, lui, la suit a moitie. */
.ck-pchaud { --ckp-contre-bulle: calc(1 / var(--ckp-zoom, 1)); }
.ck-pchaud--branche-aucune .ck-pchaud__etq {
	left: calc(var(--ckp-ex) * 1%);
	top:  calc(var(--ckp-ey) * 1%);
}
.ck-pchaud--branche-aucune .ck-pchaud__tt,
.ck-pchaud--branche-aucune .ck-pchaud__ds,
.ck-pchaud--branche-aucune .ck-pchaud__ico,
.ck-pchaud--bulle .ck-pchaud__tt,
.ck-pchaud--bulle .ck-pchaud__ds,
.ck-pchaud--bulle .ck-pchaud__ico { color: var(--ckp-bulle-texte); }
.ck-pchaud--branche-aucune .ck-pchaud__ds,
.ck-pchaud--bulle .ck-pchaud__ds { opacity: .82; }
/* La bulle s'ouvre par une CLASSE, plus par la proximité dans le document :
   depuis la 4.3.106 le point vit dans l'image et l'étiquette dans le cadre,
   ils ne sont plus voisins. C'est le script qui les rapproche — et au passage
   ça marche aussi au doigt, là où `:hover` n'existe pas. */
.ck-pchaud--branche-aucune .ck-pchaud__etq--ouverte,
.ck-pchaud--branche-aucune .ck-pchaud__etq:hover,
.ck-pchaud--bulle .ck-pchaud__etq--ouverte { opacity: 1; visibility: visible; }

/* ------------------------------------------------- le repli du petit écran */
.ck-pchaud__liste { display: none; list-style: none; margin: 24px 0 0; padding: 0; gap: 14px; }
.ck-pchaud__ligne { display: flex; align-items: flex-start; gap: 12px; }

/* ⚠️ SUR PETIT ÉCRAN, UN SEUL DÉTAIL À LA FOIS — celui du point qu'on touche.
   Kévin, 2026-08-29 : « y doit avoir qu'un item a chaque clique sur un point
   et pas de numéro ». Une liste de dix lignes sous l'image, c'était deux fois
   la même information et un mur de texte.

   La règle est conditionnée à `--js` : c'est le script qui pose cette classe.
   Sans lui (script en échec, JS coupé), toutes les lignes restent affichées —
   on retombe sur une liste complète, jamais sur une seule ligne figée qu'on
   ne pourrait plus changer. */
.ck-pchaud--js .ck-pchaud__ligne { display: none; }
.ck-pchaud--js .ck-pchaud__ligne--actif { display: flex; }

/* ⚠️ L'ÉTAT OUVERT EST UN ÉTAT À PART, ET IL SE RÈGLE ENTIÈREMENT. Il ne
   s'affiche QUE là où un seul détail est montré à la fois : le bandeau du
   petit écran, et le mode « sans branche ». Ailleurs toutes les étiquettes
   sont visibles, aucun point n'est « ouvert » plutôt qu'un autre — en marquer
   un ferait croire à une sélection qui n'existe pas. C'est le script qui pose
   la classe, et lui seul sait dans quel cas on est. */
.ck-pchaud__pt--actif {
	background: var(--ckp-pt-actif);
	border-color: var(--ckp-actif-bord, var(--ckp-pt-bord));
	border-width: var(--ckp-actif-ep, var(--ckp-pt-ep));
	box-shadow: 0 0 0 var(--ckp-actif-halo) var(--ckp-actif-halo-c, var(--ckp-halo-c));
	transform: translate(-50%, -50%) scale(calc(var(--ckp-actif-taille) * var(--ckp-contre-zoom, 1)));
}

/* Le point ouvert se remplit : c'est ce qui remplace le numéro pour dire
   « c'est celui-là que tu lis ».
   ⚠️ SEULEMENT SOUS LE SEUIL DU REPLI. Sur grand écran toutes les étiquettes
   sont là, aucun point n'est « ouvert » plutôt qu'un autre — en remplir un
   d'office ferait croire à une sélection qui n'existe pas. */

.ck-pchaud__num--liste {
	display: grid; place-items: center; flex: 0 0 auto;
	width: calc(var(--ckp-pt) * 1.9); height: calc(var(--ckp-pt) * 1.9);
	border: var(--ckp-pt-ep) solid var(--ckp-pt-bord);
	border-radius: 50%;
	background: var(--ckp-pt-fond);
	color: var(--ckp-num-c);
	font-size: calc(var(--ckp-pt) * .82); font-weight: 600; line-height: 1;
}
.ck-pchaud__ligne .ck-pchaud__tt,
.ck-pchaud__ligne .ck-pchaud__ds { text-align: left; }
/* Le numéro n'apparaît que si on l'a demandé — le repli ne l'impose plus. */
.ck-pchaud__num--liste { display: none; }
.ck-pchaud--numerote .ck-pchaud__num--liste { display: grid; }

/* Le repli lui-même : l'image reprend toute la largeur (et la conversion des
   points suit toute seule, puisqu'elle est en calc), les branches et les
   étiquettes s'effacent, la liste prend le relais. */
@media (max-width: 1024px) {
	/* ⚠️ `!important` ASSUMÉ, ET MESURÉ. La largeur de l'image est posée par
	   Elementor, qui écrit un sélecteur à QUATRE classes :
	   `.elementor-578 .elementor-element.elementor-element-pc1 .ck-pchaud__scene`.
	   Aucune règle raisonnable ne bat ça — et surtout, il ne FAUT pas la
	   battre par une surenchère de classes qui casserait au prochain
	   changement d'Elementor. Le repli du petit écran n'est pas un goût
	   concurrent du réglage : c'est la condition pour que la page reste
	   lisible. Il doit primer, point. (Constaté en 4.3.101 : sans lui,
	   l'image restait à 52 % de large sur un téléphone.) */
	.ck-pchaud--repli-tablette .ck-pchaud__traits { display: none; }
	.ck-pchaud--repli-tablette .ck-pchaud__liste { display: grid; }
	/* Avec le script, c'est la bulle qui parle : la liste ne sert plus que
	   de repli quand le JS n'a pas tourne. */
	.ck-pchaud--js.ck-pchaud--repli-tablette .ck-pchaud__liste { display: none; }
	.ck-pchaud--loupe-petit.ck-pchaud--repli-tablette .ck-pchaud__loupe { display: flex; }
	/* Plus de numéro imposé : c'est le point REMPLI qui dit lequel on lit,
	   et son détail s'affiche seul sous l'image. */

}
@media (max-width: 767px) {
	/* Une loupe sans place pour regarder ne sert a rien : si aucune hauteur
	   n'est reglee, on en impose une. Le reglage, lui, prime toujours. */
	/* ⚠️ PAS DE HAUTEUR IMPOSÉE POUR LA LOUPE NON PLUS — MESURÉ, PUIS RETIRÉ.
	   Ces 60vh donnaient de la place pour se promener une fois agrandi, mais
	   au repos ils fabriquaient EXACTEMENT le défaut que Kévin reprochait : un
	   grand cadre vide autour d'une petite image. Mesuré sur le banc le
	   2026-08-30, à 375 px : cadre à 487 px (60vh de 812) pour une image haute
	   de 106 px. Le cadre colle donc à l'image partout, et l'agrandissement se
	   promène dedans — c'est ce que fait n'importe quel zoom. */
	/* Loupe « petit écran » : elle apparaît ici même si le repli est désactivé. */
	.ck-pchaud--loupe-petit .ck-pchaud__loupe { display: flex; }
	.ck-pchaud--repli-mobile .ck-pchaud__traits { display: none; }
	.ck-pchaud--repli-mobile .ck-pchaud__liste { display: grid; }
	/* Avec le script, c'est la bulle qui parle : la liste ne sert plus que
	   de repli quand le JS n'a pas tourne. */
	.ck-pchaud--js.ck-pchaud--repli-mobile .ck-pchaud__liste { display: none; }
	.ck-pchaud--loupe-petit.ck-pchaud--repli-mobile .ck-pchaud__loupe { display: flex; }
	/* Plus de numéro imposé : c'est le point REMPLI qui dit lequel on lit,
	   et son détail s'affiche seul sous l'image. */

}