/* ============================================================
   CK — Fond jusqu'au bord
   ------------------------------------------------------------
   Une colonne posée dans un conteneur « boxed » a son fond
   enfermé dans la zone de contenu. Elementor n'a aucun réglage
   pour le prolonger jusqu'au bord de l'écran : la parade
   courante est un dégradé à deux arrêts posé sur le conteneur
   parent, avec un pourcentage qui n'est juste qu'à une seule
   largeur d'écran.

   Ici on pose un calque derrière l'élément, qui déborde de la
   GOUTTIÈRE — la moitié de ce qui reste entre l'écran et la
   largeur de contenu du site. Aucun pourcentage à régler :
   la valeur se recalcule seule à chaque largeur, et retombe à
   zéro dès que l'écran est plus étroit que le contenu.

   Trois détails qui ne sont pas décoratifs :

   - `background: inherit` — le calque reprend le fond déjà
     réglé dans Elementor. Rien à saisir deux fois, et une image
     ou un dégradé suivent aussi.
   - `isolation: isolate` + `z-index: -1` — sans l'isolation, un
     calque en z-index négatif passe DERRIÈRE le fond du
     conteneur parent et devient invisible dès que le parent en
     a un. L'isolation le garde au-dessus de ce fond, et sous
     tout le contenu.
   - `::after`, jamais `::before` — Elementor occupe déjà
     `.e-con::before` pour sa superposition d'arrière-plan, et
     lui impose `width: 100%`. Un débordement écrit dessus est
     calculé, appliqué… et sans le moindre effet à l'écran.
     Le `width: auto` est là pour la même raison, au cas où.
   ============================================================ */

.ck-fondbord--on{
	--ck-fondbord-marge: max( 0px, calc( ( 100vw - var( --container-max-width, var( --ck-fondbord-contenu, 1140px ) ) ) / 2 ) );
	position: relative;
	isolation: isolate;
}

.ck-fondbord--on::after{
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: auto;
	height: auto;
	background: inherit;
	border-radius: inherit;
	pointer-events: none;
}

.ck-fondbord-cote--droite::after,
.ck-fondbord-cote--deux::after{
	right: calc( -1 * var( --ck-fondbord-marge ) );
}

.ck-fondbord-cote--gauche::after,
.ck-fondbord-cote--deux::after{
	left: calc( -1 * var( --ck-fondbord-marge ) );
}

/* Garde-fou. Coché sur une colonne, le calque s'arrête pile au bord de
   l'écran. Coché par erreur sur une section déjà pleine largeur, il
   dépasserait — et une barre de défilement horizontale apparaîtrait sur
   TOUTE la page. Le conteneur qui héberge l'élément coché coupe donc ce
   qui sortirait. `clip` coupe SANS créer de conteneur de défilement —
   `hidden` casserait un enfant en `position: sticky`. */
.e-con:has( > .ck-fondbord--on ),
.e-con:has( > .e-con-inner > .ck-fondbord--on ),
.elementor-section:has( > .elementor-container > .ck-fondbord--on ){
	overflow-x: clip;
}

/* Coché par erreur sur une section de PREMIER NIVEAU : elle occupe déjà toute
   la largeur de l'écran — son fond touche déjà les bords, il n'y a rien à
   prolonger. Sans cette annulation, le calque déborderait dans le vide et
   ouvrirait une barre de défilement horizontale sur toute la page. La garde
   `overflow-x` ci-dessus ne peut pas l'attraper : il n'y a aucun conteneur
   au-dessus pour couper. */
.elementor > .ck-fondbord--on::after{
	left: 0;
	right: 0;
}