/* ============================================================
   CD — Onglets illustrés
   ------------------------------------------------------------
   Des onglets en pilules à gauche, une image qui change à côté,
   dans un cadre arrondi. Référence de Kévin (2026-09-11) : la
   section « De plus près » d'apple.com/fr/iphone-duo, sans la 3D.

   ⚠️ CE FICHIER EST DU FRONT : il habille le site du CLIENT, pas
   notre interface — pas de jetons `--ckui-*` ici (CLAUDE.md,
   « périmètre »).

   ⚠️ UN RÉGLAGE = UNE VARIABLE, DÉCLARÉE UNE SEULE FOIS DANS LE
   BLOC CI-DESSOUS avec sa valeur par défaut. Elementor la repose
   sur `.cd-oi` quand on la règle ; tout ce qui l'emploie suit.
   Défauts : les mesures données par Kévin (apple.com, fenêtre
   1920 px), écrites en rem (Kévin, 2026-09-11) — 1rem = 16px.
   Les valeurs marquées « choisi » ne venaient pas de la mesure.

   Quand une valeur en suit une autre (`--cd-oi-bulle-bg:
   var(--cd-oi-pill-bg)`), elle suit AUSSI le réglage : une
   variable se résout après la cascade, sur l'élément. Changer le
   fond des onglets repeint donc la bulle et les flèches, tant
   qu'on ne leur a pas donné le leur.

   Les champs de typographie facultatifs (police, interligne des
   pilules, espacements, casse…) ne sont PAS déclarés : non réglés,
   ils héritent. D'où leur repli écrit au point d'usage — `inherit`
   ne peut pas se ranger dans une variable.

   L'ANIMATION : seules `transform` et `opacity` bougent sur l'image
   et le texte. Trois états, posés par le script :
     .is-entree  la pose de départ, SANS transition (en bas, invisible)
     .is-in      visible, en place — avec transition
     .is-out     s'en va vers le haut en s'effaçant — avec transition
   Sans classe, un calque est caché, sans transition.
   ============================================================ */

.cd-oi {
	/* ── Le cadre ── */
	--cd-oi-bg:          #fff;
	--cd-oi-radius:      1.75rem;             /* 28 px */
	--cd-oi-min-h:       47.5rem;             /* 760 px */
	--cd-oi-pad:         0 0 0 5.625rem;      /* 90 px à gauche */
	--cd-oi-col:         26.4375rem;          /* 423 px — la colonne des onglets, et la largeur de la bulle */
	--cd-oi-gap:         3rem;                /* 48 px, choisi — entre les onglets et l'image */
	--cd-oi-valign:      center;              /* le contenu, centré dans la hauteur du cadre */
	--cd-oi-bord-style:  none;
	--cd-oi-bord-w:      0;
	--cd-oi-bord-c:      currentColor;
	--cd-oi-ombre:       none;

	/* ── Les onglets fermés : les pilules ── */
	--cd-oi-pill-h:       3.5rem;             /* 56 px */
	--cd-oi-pill-radius:  1.75rem;            /* 28 px */
	--cd-oi-pill-pad:     0 2rem 0 0.875rem;  /* 0 32 0 14 px */
	--cd-oi-pill-gap:     0.75rem;            /* 12 px entre deux onglets */
	--cd-oi-pill-bg:      rgb(232 232 237 / .72);
	--cd-oi-pill-bg-h:    rgb(232 232 237 / .92);
	--cd-oi-pill-dur:     250ms;              /* le changement de fond au survol */
	--cd-oi-pill-color:   #1d1d1f;
	--cd-oi-pill-color-h: var(--cd-oi-pill-color);
	--cd-oi-pill-fz:      1.0625rem;          /* 17 px */
	--cd-oi-pill-fw:      600;
	--cd-oi-plus:         1.5rem;             /* 24 px, le cercle « + » */
	--cd-oi-plus-gap:     0.75rem;            /* 12 px, choisi — entre le cercle et le titre */

	/* ── L'onglet ouvert : la bulle ── */
	--cd-oi-bulle-pad:    1.75rem;            /* 28 px */
	--cd-oi-bulle-radius: 1.75rem;            /* 28 px */
	--cd-oi-bulle-bg:     var(--cd-oi-pill-bg);
	--cd-oi-titre-color:  #1d1d1f;
	--cd-oi-titre-fz:     1.0625rem;          /* 17 px */
	--cd-oi-titre-fw:     600;
	--cd-oi-texte-color:  #1d1d1f;
	--cd-oi-texte-fz:     1.0625rem;          /* 17 px */
	--cd-oi-texte-lh:     1.5625rem;          /* 25 px */
	--cd-oi-texte-fw:     400;

	/* ── Les flèches ── */
	--cd-oi-fl-size:     2.25rem;             /* 36 px, le cercle */
	--cd-oi-fl-hit:      2.75rem;             /* 44 px, la zone cliquable */
	--cd-oi-fl-gap:      0.5rem;              /* 8 px, choisi — entre les deux */
	--cd-oi-fl-x:        0rem;                /* choisi — collées à la liste */
	--cd-oi-fl-bg:       var(--cd-oi-pill-bg);
	--cd-oi-fl-bg-h:     var(--cd-oi-pill-bg-h);
	--cd-oi-fl-color:    #1d1d1f;
	--cd-oi-fl-color-h:  var(--cd-oi-fl-color);
	--cd-oi-fl-off:      .4;                  /* choisi — l'opacité d'une flèche désactivée */

	/* ── L'image ── */
	--cd-oi-img-fit:     contain;
	--cd-oi-img-h:       34rem;               /* 544 px, choisi — tient dans le cadre de 760 */
	--cd-oi-img-ratio:   4 / 3;               /* servi seulement en « Taille : Ratio » */
	--cd-oi-img-pos:     center;
	--cd-oi-img-radius:  0rem;
	/* 5.0.37 — la galerie : les vignettes sous la photo */
	--cd-oi-vig-h:       4rem;                /* 64 px, choisi */
	--cd-oi-vig-gap:     var(--ck-space-sm, .5rem);
	--cd-oi-vig-radius:  var(--cd-oi-img-radius);
	--cd-oi-vig-off:     .5;                  /* choisi — l'opacité d'une vignette qui n'est pas en grand */
	/* Ce que l'image emploie vraiment : la hauteur, OU le ratio.
	   « Taille : Ratio » échange les deux (voir le widget). */
	/* 5.0.99 — `--cd-oi-u-*` : l'Image réglée dans le widget (Style › Image, par appareil), en Prédéfini comme en
	   Personnalisé. Aucun modèle ne les écrit : elles passent devant, sans bataille de sélecteurs. */
	--cd-oi-img-h-actif:     var(--cd-oi-u-img-h, var(--cd-oi-img-h));
	--cd-oi-img-ratio-actif: auto;

	/* ── L'animation ── */
	--cd-oi-dur:         600ms;               /* choisi */
	--cd-oi-dist:        2.5rem;              /* 40 px, choisi */
	--cd-oi-delai:       80ms;                /* choisi — le texte part après l'image */
	--cd-oi-courbe:      cubic-bezier(.22, 1, .36, 1); /* choisi */
	--cd-oi-mouvement:   1;                   /* 0 quand le visiteur demande moins de mouvement */

	/* ── La mise en page, reposée par « Disposition » ── */
	--cd-oi-cols-cote:   auto minmax(0, var(--cd-oi-u-photo-w, var(--cd-oi-photo-w, 1fr)));   /* 5.0.17 — la photo : réglée en %, sinon la place qui reste */
	--cd-oi-g-col-cote:  1;
	--cd-oi-i-col-cote:  2;
	--cd-oi-cols:        var(--cd-oi-cols-cote);
	--cd-oi-g-col:       var(--cd-oi-g-col-cote);
	--cd-oi-i-col:       var(--cd-oi-i-col-cote);
	--cd-oi-g-row:       1;
	--cd-oi-i-row:       1;
}

/* L'image à gauche : les deux colonnes échangent leur place. */
.cd-oi--img-gauche {
	--cd-oi-cols-cote:   minmax(0, var(--cd-oi-u-photo-w, var(--cd-oi-photo-w, 1fr))) auto;
	--cd-oi-g-col-cote:  2;
	--cd-oi-i-col-cote:  1;
}

/* ============================================================
   LE CADRE
   ============================================================ */

.cd-oi {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: var(--cd-oi-cols);
	align-items: var(--cd-oi-valign);
	gap: var(--cd-oi-gap);
	width: 100%;
	min-height: var(--cd-oi-min-h);
	padding: var(--cd-oi-pad);
	background-color: var(--cd-oi-bg);
	border-radius: var(--cd-oi-radius);
	border-style: var(--cd-oi-bord-style);
	border-width: var(--cd-oi-bord-w);
	border-color: var(--cd-oi-bord-c);
	box-shadow: var(--cd-oi-ombre);
}

.cd-oi__gauche {
	grid-column: var(--cd-oi-g-col);
	grid-row: var(--cd-oi-g-row);
	display: flex;
	align-items: center;
	min-width: 0;
}

.cd-oi__images {
	grid-column: var(--cd-oi-i-col);
	grid-row: var(--cd-oi-i-row);
	display: grid;
	align-items: center;
	min-width: 0;
}

.cd-oi__vide {
	padding: 1rem;
	border: 0.0625rem dashed currentColor;
	opacity: .6;
}

/* ============================================================
   LA LISTE
   ⚠️ `container-type: inline-size` : la bulle prend la largeur
   de la LISTE (`100cqi`), pas celle de l'onglet. Sans ça, son
   texte se recomposerait à chaque image pendant que l'onglet
   s'élargit. La contrepartie : la liste ne se mesure plus sur
   son contenu — d'où sa largeur écrite.
   ============================================================ */

.cd-oi__liste {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	align-items: var(--cd-oi-pill-align, flex-start);   /* 5.0.93 — Alignement (Style › Onglets) */
	gap: var(--cd-oi-pill-gap);
	width: var(--cd-oi-col);
	min-width: 0;
	container-type: inline-size;
}

/* L'onglet. Trois classes : un thème peint `button`, `[type=button]:focus`
   et `.elementor-kit-N button` — il faut passer devant les trois. */
.cd-oi .cd-oi__liste .cd-oi__onglet {
	position: relative;
	box-sizing: border-box;
	display: block;
	max-width: 100%;
	margin: 0;
	padding: 0;
	/* 5.0.10 — la bordure des onglets (0 par défaut : rien ne bouge sans réglage). */
	border: var(--cd-oi-pill-bord-ep, 0px) solid var(--cd-oi-pill-bc, transparent);
	border-radius: var(--cd-oi-pill-radius);
	background-color: var(--cd-oi-pill-bg);
	box-shadow: none;
	/* Une couleur de texte offerte au client se déclare `!important` :
	   son thème peut peindre les boutons en `!important` (limites-du-banc). */
	color: var(--cd-oi-pill-color) !important;
	font: inherit;
	text-align: start;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	/* width / height ne bougent que quand le script les écrit en ligne :
	   c'est le glissement des onglets du dessous. */
	transition:
		background-color var(--cd-oi-pill-dur) ease,
		border-color var(--cd-oi-pill-dur) ease,
		border-radius var(--cd-oi-dur) var(--cd-oi-courbe),
		width var(--cd-oi-dur) var(--cd-oi-courbe),
		height var(--cd-oi-dur) var(--cd-oi-courbe);
}

.cd-oi .cd-oi__liste .cd-oi__onglet:not(.is-active):hover {
	background-color: var(--cd-oi-pill-bg-h);
	border-color: var(--cd-oi-pill-bc-h, var(--cd-oi-pill-bc, transparent));
	color: var(--cd-oi-pill-color-h) !important;
}

.cd-oi .cd-oi__liste .cd-oi__onglet:focus-visible {
	outline: 0.125rem solid currentColor;
	outline-offset: 0.125rem;
}

.cd-oi .cd-oi__liste .cd-oi__onglet.is-active {
	width: 100%;
	border-radius: var(--cd-oi-bulle-radius);
	background-color: var(--cd-oi-bulle-bg);
	border-color: var(--cd-oi-pill-bc-a, var(--cd-oi-pill-bc, transparent));
	cursor: default;
}

/* ── La pilule : le cercle « + » et le titre ── */

.cd-oi__pilule {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--cd-oi-plus-gap);
	height: var(--cd-oi-pill-h);
	padding: var(--cd-oi-tab-pad, var(--cd-oi-pill-pad));
	white-space: nowrap;
	transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe);
}

.cd-oi__onglet.is-active .cd-oi__pilule {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	opacity: 0;
	pointer-events: none;
}

.cd-oi__plus {
	/* 5.0.11 — avec ou sans le « + » (réglage du modèle ou du widget). */
	display: var(--cd-oi-plus-d, block);
	flex: 0 0 auto;
	width: var(--cd-oi-plus);
	height: var(--cd-oi-plus);
}

.cd-oi__plus svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cd-oi__titre {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--cd-oi-pill-ff, inherit);
	font-size: var(--cd-oi-pill-fz);
	font-weight: var(--cd-oi-pill-fw);
	font-style: var(--cd-oi-pill-fst, normal);
	line-height: var(--cd-oi-pill-lh, normal);
	letter-spacing: var(--cd-oi-pill-ls, normal);
	word-spacing: var(--cd-oi-pill-ws, normal);
	text-transform: var(--cd-oi-pill-tt, none);
	text-decoration: var(--cd-oi-pill-td, none);
}

/* ── La bulle : « Titre. » puis le texte ── */

.cd-oi__bulle {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	box-sizing: border-box;
	display: block;
	width: var(--cd-oi-col);   /* repli, navigateur sans unités de conteneur */
	width: 100cqi;
	padding: var(--cd-oi-bulle-pad);
	white-space: normal;
	pointer-events: none;
}

.cd-oi__onglet.is-active .cd-oi__bulle {
	position: relative;
	pointer-events: auto;
}

.cd-oi__texte {
	display: block;
	margin: 0;
	color: var(--cd-oi-texte-color) !important;
	font-family: var(--cd-oi-texte-ff, inherit);
	font-size: var(--cd-oi-texte-fz);
	font-weight: var(--cd-oi-texte-fw);
	font-style: var(--cd-oi-texte-fst, normal);
	line-height: var(--cd-oi-texte-lh);
	letter-spacing: var(--cd-oi-texte-ls, normal);
	word-spacing: var(--cd-oi-texte-ws, normal);
	text-transform: var(--cd-oi-texte-tt, none);
	text-decoration: var(--cd-oi-texte-td, none);
}

/* Un <span> et pas un <strong> : un thème qui repeint `strong` en
   `!important` le bloquait en noir (Vidéos YouTube, 4.3.194). */
.cd-oi__bulle-titre {
	color: var(--cd-oi-titre-color) !important;
	font-family: var(--cd-oi-titre-ff, inherit);
	font-size: var(--cd-oi-titre-fz);
	font-weight: var(--cd-oi-titre-fw);
	font-style: var(--cd-oi-titre-fst, normal);
	line-height: var(--cd-oi-titre-lh, inherit);
	letter-spacing: var(--cd-oi-titre-ls, normal);
	word-spacing: var(--cd-oi-titre-ws, normal);
	text-transform: var(--cd-oi-titre-tt, none);
	text-decoration: var(--cd-oi-titre-td, none);
}

/* ============================================================
   LES FLÈCHES
   ============================================================ */

.cd-oi__fleches {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: var(--cd-oi-fl-gap);
	translate: var(--cd-oi-fl-x) 0;
}

.cd-oi .cd-oi__fleches .cd-oi__fleche {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cd-oi-fl-hit);
	height: var(--cd-oi-fl-hit);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	box-shadow: none;
	color: var(--cd-oi-fl-color) !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.cd-oi__fleche-rond {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cd-oi-fl-size);
	height: var(--cd-oi-fl-size);
	border-radius: 50%;
	background-color: var(--cd-oi-fl-bg);
	transition: background-color var(--cd-oi-pill-dur) ease;
}

.cd-oi__fleche-rond svg {
	display: block;
	width: 50%;
	height: 50%;
}

.cd-oi .cd-oi__fleches .cd-oi__fleche:not(:disabled):hover {
	background-color: transparent;
	color: var(--cd-oi-fl-color-h) !important;
}

.cd-oi .cd-oi__fleches .cd-oi__fleche:not(:disabled):hover .cd-oi__fleche-rond {
	background-color: var(--cd-oi-fl-bg-h);
}

.cd-oi .cd-oi__fleches .cd-oi__fleche:focus-visible {
	outline: 0.125rem solid currentColor;
	outline-offset: 0;
}

.cd-oi .cd-oi__fleches .cd-oi__fleche:disabled {
	background-color: transparent;
	cursor: default;
	opacity: var(--cd-oi-fl-off);
}

/* 5.0.51 — La croix du téléphone (onglet ouvert → la rangée) : l'habit des flèches, sur la photo. */
.cd-oi__images { position: relative; }
.cd-oi .cd-oi__images .cd-oi__fermer {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--cd-oi-fl-hit);
	height: var(--cd-oi-fl-hit);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	box-shadow: none;
	color: var(--cd-oi-fl-color) !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.cd-oi .cd-oi__images .cd-oi__fermer:hover { background-color: transparent; color: var(--cd-oi-fl-color-h) !important; }
.cd-oi .cd-oi__images .cd-oi__fermer:hover .cd-oi__fleche-rond { background-color: var(--cd-oi-fl-bg-h); }
.cd-oi .cd-oi__images .cd-oi__fermer .cd-oi__fleche-rond svg { rotate: none; }

/* ============================================================
   L'IMAGE
   Toutes dans la même case : la hauteur de la colonne ne dépend
   pas de l'image affichée, rien ne saute au changement.
   ============================================================ */

.cd-oi__image {
	grid-area: 1 / 1;
	min-width: 0;
}

/* Deux classes et une balise : `.elementor img` remet `height: auto`
   et `border-radius: 0` à égalité de poids avec une classe. */
.cd-oi .cd-oi__image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: var(--cd-oi-img-h-actif);
	aspect-ratio: var(--cd-oi-img-ratio-actif);
	margin: 0;
	border: 0;
	border-radius: var(--cd-oi-u-img-radius, var(--cd-oi-img-radius));
	box-shadow: none;
	object-fit: var(--cd-oi-u-img-fit, var(--cd-oi-img-fit));
	object-position: var(--cd-oi-u-img-pos, var(--cd-oi-img-pos));
}

/* ============================================================
   L'ANIMATION — l'image et le texte de la bulle
   Toujours du bas vers le haut : on arrive d'en dessous, on part
   par au-dessus, quel que soit le sens du changement.
   ============================================================ */

.cd-oi__bulle,
.cd-oi__image {
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(var(--cd-oi-dist) * var(--cd-oi-mouvement)));
	transition: none;
}

.cd-oi__bulle.is-entree,
.cd-oi__image.is-entree {
	visibility: visible;
	transition: none;
}

.cd-oi__bulle.is-in,
.cd-oi__image.is-in {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity var(--cd-oi-dur) var(--cd-oi-courbe),
		transform var(--cd-oi-dur) var(--cd-oi-courbe);
}

.cd-oi__bulle.is-in {
	transition-delay: var(--cd-oi-delai);
}

.cd-oi__bulle.is-out,
.cd-oi__image.is-out {
	opacity: 0;
	visibility: visible;
	transform: translateY(calc(-1 * var(--cd-oi-dist) * var(--cd-oi-mouvement)));
	transition:
		opacity var(--cd-oi-dur) var(--cd-oi-courbe),
		transform var(--cd-oi-dur) var(--cd-oi-courbe);
}

/* Moins de mouvement demandé : la distance tombe à zéro, le fondu
   reste. Elementor ne pose jamais `--cd-oi-mouvement` : aucun réglage
   ne peut passer devant cette règle. */
@media (prefers-reduced-motion: reduce) {
	.cd-oi {
		--cd-oi-mouvement: 0;
	}
}

/* ============================================================
   5.0.8 — TEXTE DANS LA BOÎTE (maquette validée par Kévin, 06/10)
   Un menu (en haut / à gauche / à droite), une boîte : titre,
   texte, bouton, photo, plusieurs slides. Les MÊMES variables que
   le texte dans l'onglet : une pilule = un onglet du menu, et les
   flèches, le titre, le texte, la photo. Les valeurs de départ sont
   les jetons du design system (`--neutres-*`, `--ck-radius-*`,
   `--ck-space-*`), chacun avec sa valeur recommandée en repli.
   ============================================================ */
.cd-oi.cd-oi--boite {
	/* 5.0.15 — le cadre (texte dans l'onglet) a ses propres réglages : la boîte ne les prend pas. */
	padding: 0;
	min-height: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	--cd-oi-pill-radius: var(--ck-radius-pill, 999px);
	--cd-oi-pill-gap: var(--ck-space-md, .75rem);
	--cd-oi-pill-bg: var(--neutres-100, #f3f2f2);
	--cd-oi-pill-bg-h: var(--neutres-300, #e6e5e5);
	--cd-oi-pill-color: var(--neutres-900, #1a1a1a);
	--cd-oi-titre-color: var(--neutres-900, #1a1a1a);
	--cd-oi-texte-color: var(--neutres-700, #3c3939);
	--cd-oi-fl-bg: var(--neutres-0, #fff);
	--cd-oi-fl-bg-h: var(--neutres-300, #e6e5e5);
	--cd-oi-fl-color: var(--neutres-900, #1a1a1a);
	--cd-oi-img-radius: var(--ck-radius-xl, 1rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--cd-oi-boite-gap, var(--ck-space-lg, 1rem));
}
.cd-oi--boite.cd-oi--menu-gauche { grid-template-columns: 14rem minmax(0, 1fr); }
.cd-oi--boite.cd-oi--menu-droite { grid-template-columns: minmax(0, 1fr) 14rem; }
.cd-oi--boite.cd-oi--menu-droite .cd-oi__menu { order: 2; }

/* Le menu */
.cd-oi--boite .cd-oi__menu {
	display: flex;
	justify-content: var(--cd-oi-menu-justify, flex-start);
	gap: var(--cd-oi-pill-gap);
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.cd-oi--boite .cd-oi__menu::-webkit-scrollbar { display: none; }
.cd-oi--menu-gauche .cd-oi__menu,
.cd-oi--menu-droite .cd-oi__menu { flex-direction: column; }
.cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab {
	flex: var(--cd-oi-tab-flex, 0 0 auto);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cd-oi-plus-gap);
	margin: 0;
	padding: var(--cd-oi-tab-pad, var(--ck-space-md, .75rem) var(--ck-space-xl, 1.5rem));
	border: var(--cd-oi-pill-bord-ep, 0px) solid var(--cd-oi-pill-bc, transparent);
	border-radius: var(--cd-oi-pill-radius);
	background-color: var(--cd-oi-pill-bg);
	color: var(--cd-oi-pill-color);
	font-family: inherit;
	font-size: var(--cd-oi-pill-fz);
	font-weight: var(--cd-oi-pill-fw);
	line-height: 1.25;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--cd-oi-pill-dur), color var(--cd-oi-pill-dur), border-color var(--cd-oi-pill-dur);
}
.cd-oi.cd-oi--menu-gauche .cd-oi__menu .cd-oi__tab,
.cd-oi.cd-oi--menu-droite .cd-oi__menu .cd-oi__tab { flex: 0 0 auto; text-align: start; justify-content: flex-start; }
/* 5.0.12 — LE « + » COMME DANS LE TEXTE DANS L'ONGLET : l'onglet fermé porte son +, l'onglet qui
   s'ouvre le perd en fondu (la pilule qui devient bulle, mêmes durée et courbe). */
.cd-oi--boite .cd-oi__tab .cd-oi__plus {
	width: var(--cd-oi-plus);
	height: var(--cd-oi-plus);
	overflow: hidden;
	transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), width var(--cd-oi-dur) var(--cd-oi-courbe), margin var(--cd-oi-dur) var(--cd-oi-courbe);
}
.cd-oi--boite .cd-oi__tab.is-active .cd-oi__plus {
	width: 0;
	opacity: 0;
	margin-inline-end: calc(-1 * var(--cd-oi-plus-gap));
}
.cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab:focus { outline: none; box-shadow: none; }
.cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab:focus-visible { outline: 0.125rem solid currentColor; outline-offset: -0.25rem; }
.cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab:hover {
	background-color: var(--cd-oi-pill-bg-h);
	color: var(--cd-oi-pill-color-h);
	border-color: var(--cd-oi-pill-bc-h, var(--cd-oi-pill-bc, transparent));
}
.cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab.is-active {
	background-color: var(--cd-oi-pill-bg-a, var(--neutres-900, #1a1a1a));
	color: var(--cd-oi-pill-color-a, var(--neutres-0, #fff));
	border-color: var(--cd-oi-pill-bc-a, var(--cd-oi-pill-bc, transparent));
}

/* La boîte */
.cd-oi--boite .cd-oi__boite {
	box-sizing: border-box;
	min-width: 0;
	padding: var(--cd-oi-boite-pad, var(--ck-space-3xl, 3rem));
	background-color: var(--cd-oi-boite-bg, var(--neutres-50, #f8f7f7));
	border: var(--cd-oi-boite-bord-ep, 0px) solid var(--cd-oi-boite-bord-c, transparent);
	border-radius: var(--cd-oi-boite-radius, var(--ck-radius-2xl, 1.5rem));
}
.cd-oi--boite .cd-oi__panneau {
	display: grid;
	/* 5.0.17 — la photo : réglée en %, sinon moitié-moitié avec le texte. */
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--cd-oi-u-photo-w, var(--cd-oi-photo-w, 1fr)));
	gap: var(--cd-oi-u-gap-texte, var(--cd-oi-gap-texte, var(--ck-space-3xl, 3rem)));
	align-items: stretch;
}
/* TOUS LES ONGLETS ET TOUS LES SLIDES DANS LA MÊME CASE : la boîte prend la hauteur du plus haut,
   rien ne bouge autour quand on change d'onglet ou de slide. */
.cd-oi--boite .cd-oi__boite { display: grid; }
.cd-oi--boite .cd-oi__panneau { grid-area: 1 / 1; }
/* Ce qui s'en va s'efface (l'arrivée, elle, rejoue son apparition plus bas) : un fondu enchaîné. */
.cd-oi--boite .cd-oi__panneau:not(.is-in),
.cd-oi--boite .cd-oi__slide-p:not(.is-in),
.cd-oi--boite .cd-oi__slide-t:not(.is-in) {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity calc(var(--cd-oi-dur) * .5) var(--cd-oi-courbe), visibility 0s linear calc(var(--cd-oi-dur) * .5);
}
.cd-oi--photo-gauche .cd-oi__p-photo { order: -1; }
.cd-oi--boite.cd-oi--photo-gauche .cd-oi__panneau { grid-template-columns: minmax(0, var(--cd-oi-u-photo-w, var(--cd-oi-photo-w, 1fr))) minmax(0, 1fr); }

.cd-oi--boite .cd-oi__p-texte {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--ck-space-xl, 1.5rem);
	min-width: 0;
}
.cd-oi--boite .cd-oi__slides { display: grid; }
/* 5.0.13 — LE CHOIX POUR TOUT (Kévin) : le texte en haut / au milieu / en bas ; le bouton et les flèches
   en haut / au milieu / en bas, ou avec le texte. Ensemble : le groupe se place. Séparés : le plus haut
   des deux d'abord, des marges automatiques pour le reste (classes posées par le rendu). */
.cd-oi--boite .cd-oi__p-texte--ensemble-milieu { justify-content: center; }
.cd-oi--boite .cd-oi__p-texte--ensemble-bas { justify-content: flex-end; }
.cd-oi--boite .cd-oi__pos-premier { order: 0; }
.cd-oi--boite .cd-oi__pos-second { order: 1; }
.cd-oi--boite .cd-oi__p-texte .cd-oi__m-auto { margin-block: auto; }
.cd-oi--boite .cd-oi__p-texte .cd-oi__mt-auto { margin-top: auto; }
.cd-oi--boite .cd-oi__slide-t { grid-area: 1 / 1; min-width: 0; }
/* La photo suit la hauteur du texte (jamais l'inverse : une photo haute ne pousse pas la boîte). */
.cd-oi--boite .cd-oi__slide-p { position: absolute; inset: 0; }
.cd-oi--boite .cd-oi__panneau.is-in .cd-oi__slide-p.is-in { animation: cd-oi-fondu var(--cd-oi-dur) var(--cd-oi-courbe) both; }
/* Le texte part après la photo (le « Décalage du texte »), et le bouton après le texte. */
.cd-oi--boite .cd-oi__panneau.is-in .cd-oi__slide-t.is-in { animation: cd-oi-fondu var(--cd-oi-dur) var(--cd-oi-courbe) var(--cd-oi-delai) both; }
/* 5.0.10 — UN CHANGEMENT D'ONGLET SE VOIT (Kévin : « 0 effet de transition ») : en entrant, le panneau
   rejoue l'apparition de sa photo, de son texte et de ses actions. */
.cd-oi--boite .cd-oi__panneau.is-in .cd-oi__actions { animation: cd-oi-fondu var(--cd-oi-dur) var(--cd-oi-courbe) calc(var(--cd-oi-delai) * 2) both; }
@keyframes cd-oi-fondu {
	from { opacity: 0; transform: translateY(calc(var(--cd-oi-dist) * .5 * var(--cd-oi-mouvement))); }
	to   { opacity: 1; transform: none; }
}
.cd-oi--boite .cd-oi__b-titre {
	margin: 0 0 var(--ck-space-md, .75rem);
	color: var(--cd-oi-titre-color);
	font-size: 1.75rem;
	font-weight: var(--cd-oi-titre-fw);
	line-height: 1.2;
}
.cd-oi--boite .cd-oi__b-texte {
	margin: 0;
	color: var(--cd-oi-texte-color);
	font-size: var(--cd-oi-texte-fz);
	font-weight: var(--cd-oi-texte-fw);
	line-height: var(--cd-oi-texte-lh);
}
/* 5.0.17 — le texte enrichi : paragraphes et listes espacés d'une ligne, rien avant le premier ni après le dernier. */
.cd-oi--boite .cd-oi__b-texte > * { margin: 0 0 .75em; }
.cd-oi--boite .cd-oi__b-texte > :last-child { margin-bottom: 0; }
.cd-oi--boite .cd-oi__b-texte ul,
.cd-oi--boite .cd-oi__b-texte ol { padding-inline-start: 1.25em; }
.cd-oi--boite .cd-oi__b-texte a { color: inherit; text-decoration: underline; }
.cd-oi__texte ul, .cd-oi__texte ol { margin: .5em 0 0; padding-inline-start: 1.25em; text-align: start; }

/* La ligne du bouton : le bouton à gauche, les flèches à droite, sur toute la largeur */
.cd-oi--boite .cd-oi__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ck-space-lg, 1rem);
	width: 100%;
}
.cd-oi--boite .cd-oi__actions .ck-btn { white-space: nowrap; }
.cd-oi--boite .cd-oi__fls { display: inline-flex; gap: var(--cd-oi-fl-gap); margin-inline-start: auto; }
.cd-oi.cd-oi--boite .cd-oi__fls .cd-oi__fl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cd-oi-fl-size);
	height: var(--cd-oi-fl-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--cd-oi-fl-bg);
	color: var(--cd-oi-fl-color);
	cursor: pointer;
	transition: background-color var(--cd-oi-pill-dur), color var(--cd-oi-pill-dur);
}
.cd-oi.cd-oi--boite .cd-oi__fls .cd-oi__fl:hover { background-color: var(--cd-oi-fl-bg-h); color: var(--cd-oi-fl-color-h); }
.cd-oi--boite .cd-oi__fl svg { width: 1.125rem; height: 1.125rem; }

/* La photo */
.cd-oi--boite .cd-oi__p-photo { position: relative; min-width: 0; min-height: var(--cd-oi-u-photo-h, var(--cd-oi-photo-h, 18rem)); height: var(--cd-oi-u-photo-h, auto); }
.cd-oi--boite .cd-oi__slide-p img,
.cd-oi--boite .cd-oi__slide-p .cd-oi__sans-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--cd-oi-u-img-fit, var(--cd-oi-img-fit, contain));
	object-position: var(--cd-oi-u-img-pos, var(--cd-oi-img-pos, center));   /* 5.0.17 — Contenir par défaut, Couvrir au réglage (Kévin) */
	border-radius: var(--cd-oi-u-img-radius, var(--cd-oi-img-radius));
}
.cd-oi--boite .cd-oi__sans-photo { background-color: var(--neutres-100, #f3f2f2); }

/* « Dans l'onglet » : le bouton de l'onglet ouvert, DANS SON CADRE (5.0.227 — Kévin, 23/10 : « le bouton va juste en dessous
   du texte, dans le cadre blanc »). Il suit l'onglet ouvert (le script le déplace) et en prolonge le cadre : même fond, même
   marge intérieure, l'arrondi du bas passe de l'onglet au bouton. Il reste HORS de l'onglet dans le HTML (un lien ne se
   range pas dans un bouton) ; c'est le dessin qui les réunit. */
.cd-oi .cd-oi__boutons {
	position: relative;
	z-index: 1;   /* 5.0.228 — PAR-DESSUS l'onglet qu'il prolonge (Kévin, 23/10, capture : le cadre « mange » le haut du bouton) */
	box-sizing: border-box;
	width: 100%;
	margin-top: calc(-1 * var(--cd-oi-pill-gap) - 0.0625rem);   /* un soupçon de recouvrement : jamais de liseré entre les deux */
	padding: calc(var(--cd-oi-pill-gap) + 0.0625rem) var(--cd-oi-bulle-pad) var(--cd-oi-bulle-pad);   /* ce qu'il recouvre de l'onglet */
	border-radius: 0 0 var(--cd-oi-bulle-radius) var(--cd-oi-bulle-radius);
	background-color: var(--cd-oi-bulle-bg);
}
.cd-oi .cd-oi__liste .cd-oi__onglet.is-active:has(+ .cd-oi__boutons) { border-end-start-radius: 0; border-end-end-radius: 0; }
.cd-oi .cd-oi__onglet.is-active:has(+ .cd-oi__boutons) .cd-oi__bulle { padding-block-end: calc(var(--cd-oi-bulle-pad) / 2); }
.cd-oi .cd-oi__bouton:not(.is-in) { display: none; }

@media (prefers-reduced-motion: reduce) {
	.cd-oi--boite .cd-oi__panneau.is-in .cd-oi__slide-t.is-in,
	.cd-oi--boite .cd-oi__panneau.is-in .cd-oi__slide-p.is-in,
	.cd-oi--boite .cd-oi__panneau.is-in .cd-oi__actions { animation: none; }
}

/* Tablette et téléphone : le menu passe en haut et défile de côté, la photo au-dessus
   du texte. L'aperçu de Configuration suit l'appareil choisi (html[data-ck-appareil]),
   pas sa largeur — il est plus étroit qu'un téléphone. */
@media (max-width: 1024px) {
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite { grid-template-columns:minmax(0,1fr); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite .cd-oi__menu { order:0; flex-direction:row; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab { flex:0 0 auto; text-align:center; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite .cd-oi__panneau { grid-template-columns:minmax(0,1fr); gap:var(--cd-oi-u-gap-texte,var(--cd-oi-gap-texte,var(--ck-space-xl,1.5rem))); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite .cd-oi__p-photo { order:-1; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite .cd-oi__boite { padding:var(--cd-oi-boite-pad,var(--ck-space-xl,1.5rem)); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite .cd-oi__p-photo { min-height:var(--cd-oi-u-photo-h,var(--cd-oi-photo-h,14rem)); width:var(--cd-oi-u-photo-w,100%); justify-self:center; }
}
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite { grid-template-columns:minmax(0,1fr); }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite .cd-oi__menu { order:0; flex-direction:row; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab { flex:0 0 auto; text-align:center; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite .cd-oi__panneau { grid-template-columns:minmax(0,1fr); gap:var(--cd-oi-u-gap-texte,var(--cd-oi-gap-texte,var(--ck-space-xl,1.5rem))); }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite .cd-oi__p-photo { order:-1; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite .cd-oi__boite { padding:var(--cd-oi-boite-pad,var(--ck-space-xl,1.5rem)); }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite .cd-oi__p-photo { min-height:var(--cd-oi-u-photo-h,var(--cd-oi-photo-h,14rem)); width:var(--cd-oi-u-photo-w,100%); justify-self:center; }

/* 5.0.51 — TÉLÉPHONE, TEXTE DANS L'ONGLET : apple.com/fr/iphone-duo « De plus près », la rangée
   AU-DESSUS de la photo (Kévin, 07/10 : « EXACTEMENT la même chose qu'Apple… Onglet en haut »).
   Fermé (`is-ferme`, l'état de départ) : une rangée de pilules « + Titre » qui défile. Un onglet
   touché : sa bulle au centre, les onglets voisins dépassent au bord de l'écran avec le chevron
   d'Apple posé dessus (« je veux les mêmes flèches, avec une belle animation ») ; la rangée glisse
   d'un onglet à l'autre (`--cd-oi-n`, posé par le script). Une croix sur la photo ramène la rangée.
   Tablette : côte à côte, comme l'ordinateur (Apple). `--cd-oi-mobile` : le script ne fait pas
   glisser les tailles des onglets. L'aperçu de Configuration suit l'appareil (html[data-ck-appareil]). */
/* Le cadre de l'ordinateur (90 px à gauche, colonne de 423 px) ne suit pas : sur tablette, les valeurs
   des modèles (48 px, colonne de 390 px) ; sur téléphone, marge interne 0 — sauf réglage du widget par
   appareil (Elementor, plus fort). */
@media (max-width: 1024px) { html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite) { --cd-oi-pad: 0 0 0 3rem; --cd-oi-col: 24.375rem; --cd-oi-min-h: 0; } }
html[data-ck-appareil~="tablet"] .cd-oi:not(.cd-oi--boite) { --cd-oi-pad: 0 0 0 3rem; --cd-oi-col: 24.375rem; --cd-oi-min-h: 0; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite) { --cd-oi-pad: 0; }
@media (max-width: 767px) { html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite) { --cd-oi-pad: 0; } }
@media (max-width: 767px) {
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite) { --cd-oi-mobile: 1; --cd-oi-peek: 2.5rem; --cd-oi-peek-gap: 0.625rem; grid-template-columns: minmax(0, 1fr); min-height: 0; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite) .cd-oi__gauche { grid-column: 1; grid-row: 1; position: relative; display: block; min-width: 0; overflow: hidden; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite) .cd-oi__images { grid-column: 1; grid-row: 2; width: var(--cd-oi-u-photo-w, 100%); justify-self: center; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite) .cd-oi__fleche-rond svg { rotate: -90deg; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__liste { display: flex; flex-direction: row; align-items: center; justify-content: safe var(--cd-oi-pill-align, flex-start); width: auto; overflow-x: auto; scrollbar-width: none; container-type: normal; transform: none; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__liste::-webkit-scrollbar { display: none; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__liste .cd-oi__onglet, html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__liste .cd-oi__onglet.is-active { flex: 0 0 auto; width: auto; height: auto; border-radius: var(--cd-oi-pill-radius); background-color: var(--cd-oi-pill-bg); border-color: var(--cd-oi-pill-bc, transparent); cursor: pointer; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__onglet.is-active .cd-oi__pilule { position: static; opacity: 1; pointer-events: auto; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__bulle, html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__fleches, html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__boutons, html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__fermer { display: none; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__liste { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 2 * var(--cd-oi-peek)); align-items: end; column-gap: var(--cd-oi-peek-gap); row-gap: 0; width: auto; margin: 0; container-type: normal; transform: translateX(calc(var(--cd-oi-peek) - var(--cd-oi-n, 0) * (100% - 2 * var(--cd-oi-peek) + var(--cd-oi-peek-gap)))); transition: transform var(--cd-oi-dur) var(--cd-oi-courbe); }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__liste .cd-oi__onglet { grid-row: 1; width: 100%; container-type: inline-size; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__liste .cd-oi__onglet:not(.is-active) .cd-oi__pilule { opacity: 0; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__liste > .cd-oi__boutons { grid-row: 2; grid-column: var(--cd-oi-c, 1); margin-top: -0.0625rem; padding-top: 0.0625rem; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches { position: absolute; inset: 0; z-index: 1; flex-direction: row; justify-content: space-between; align-items: flex-end; padding-bottom: var(--cd-oi-sous, 0px); translate: none; pointer-events: none; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche { width: calc(var(--cd-oi-peek) - var(--cd-oi-peek-gap)); height: var(--cd-oi-pill-h); border-radius: 0; pointer-events: auto; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe); }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche-rond, html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche:not(:disabled):hover .cd-oi__fleche-rond { width: auto; height: auto; background-color: transparent; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche-rond svg { width: 1.25rem; height: 1.25rem; stroke-width: 3; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche:disabled { visibility: hidden; opacity: 0; }
	html:not([data-ck-appareil]) .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__images .cd-oi__fermer { display: flex; }
}
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite) { --cd-oi-mobile: 1; --cd-oi-peek: 2.5rem; --cd-oi-peek-gap: 0.625rem; grid-template-columns: minmax(0, 1fr); min-height: 0; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite) .cd-oi__gauche { grid-column: 1; grid-row: 1; position: relative; display: block; min-width: 0; overflow: hidden; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite) .cd-oi__images { grid-column: 1; grid-row: 2; width: var(--cd-oi-u-photo-w, 100%); justify-self: center; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite) .cd-oi__fleche-rond svg { rotate: -90deg; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__liste { display: flex; flex-direction: row; align-items: center; justify-content: safe var(--cd-oi-pill-align, flex-start); width: auto; overflow-x: auto; scrollbar-width: none; container-type: normal; transform: none; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__liste::-webkit-scrollbar { display: none; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__liste .cd-oi__onglet, html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__liste .cd-oi__onglet.is-active { flex: 0 0 auto; width: auto; height: auto; border-radius: var(--cd-oi-pill-radius); background-color: var(--cd-oi-pill-bg); border-color: var(--cd-oi-pill-bc, transparent); cursor: pointer; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__onglet.is-active .cd-oi__pilule { position: static; opacity: 1; pointer-events: auto; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__bulle, html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__fleches, html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__boutons, html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite).is-ferme .cd-oi__fermer { display: none; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__liste { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 2 * var(--cd-oi-peek)); align-items: end; column-gap: var(--cd-oi-peek-gap); row-gap: 0; width: auto; margin: 0; container-type: normal; transform: translateX(calc(var(--cd-oi-peek) - var(--cd-oi-n, 0) * (100% - 2 * var(--cd-oi-peek) + var(--cd-oi-peek-gap)))); transition: transform var(--cd-oi-dur) var(--cd-oi-courbe); }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__liste .cd-oi__onglet { grid-row: 1; width: 100%; container-type: inline-size; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__liste .cd-oi__onglet:not(.is-active) .cd-oi__pilule { opacity: 0; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__liste > .cd-oi__boutons { grid-row: 2; grid-column: var(--cd-oi-c, 1); margin-top: -0.0625rem; padding-top: 0.0625rem; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches { position: absolute; inset: 0; z-index: 1; flex-direction: row; justify-content: space-between; align-items: flex-end; padding-bottom: var(--cd-oi-sous, 0px); translate: none; pointer-events: none; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche { width: calc(var(--cd-oi-peek) - var(--cd-oi-peek-gap)); height: var(--cd-oi-pill-h); border-radius: 0; pointer-events: auto; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe); }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche-rond, html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche:not(:disabled):hover .cd-oi__fleche-rond { width: auto; height: auto; background-color: transparent; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche-rond svg { width: 1.25rem; height: 1.25rem; stroke-width: 3; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__fleches .cd-oi__fleche:disabled { visibility: hidden; opacity: 0; }
html[data-ck-appareil~="mobile"] .cd-oi:not(.cd-oi--boite):not(.is-ferme) .cd-oi__images .cd-oi__fermer { display: flex; }

/* 5.0.16 — TÉLÉPHONE, TEXTE DANS LA BOÎTE : chaque onglet à la taille de son texte, même marge
   des deux côtés, même hauteur que les flèches ; le menu centré. S'il ne tient pas, les flèches
   apparaissent et les onglets défilent entre elles (l'onglet ouvert vient en entier).
   5.0.49 — le « + » reste (Kévin, 07/10 : « mes onglets gardent pas le + ») : « Le + » décide. */
@media (max-width: 767px) {
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite .cd-oi__menu { overflow-x: auto; justify-content: center; align-items: center; gap: var(--ck-space-sm, .5rem); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab { flex: 0 0 auto; box-sizing: border-box; height: var(--cd-oi-fl-size); padding-block: 0; padding-inline: var(--ck-space-md, .75rem); justify-content: center; text-align: center; white-space: nowrap; font-size: min(var(--cd-oi-pill-fz), 0.9375rem); }
}
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite .cd-oi__menu { overflow-x: auto; justify-content: center; align-items: center; gap: var(--ck-space-sm, .5rem); }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab { flex: 0 0 auto; box-sizing: border-box; height: var(--cd-oi-fl-size); padding-block: 0; padding-inline: var(--ck-space-md, .75rem); justify-content: center; text-align: center; white-space: nowrap; font-size: min(var(--cd-oi-pill-fz), 0.9375rem); }

/* 5.0.16 — LES FLÈCHES DU MENU (Kévin : « j'ai même pas une flèche ») : la pièce des flèches des
   slides, de part et d'autre des onglets, seulement quand le menu ne tient pas dans la largeur
   (`is-defile`, posé par le script) ; seuls les onglets défilent, entre elles. Elles passent à
   l'onglet précédent / suivant. Sinon `cd-oi__menu-defil` ne compte pas dans la mise en page. */
/* 5.0.49 — « Flèches entre les onglets » par défaut : toujours sur tablette et téléphone (Kévin : « j'ai pas
   les flèches sur tablette »). Le réglage du widget, posé plus fort par Elementor, l'emporte. */
@media (max-width: 1024px) { html:not([data-ck-appareil]) .cd-oi--boite { --cd-oi-menu-fls: 1; } }
html[data-ck-appareil~="tablet"] .cd-oi--boite,
html[data-ck-appareil~="mobile"] .cd-oi--boite { --cd-oi-menu-fls: 1; }
.cd-oi--boite .cd-oi__menu-defil { display: contents; }
.cd-oi--boite .cd-oi__menu > .cd-oi__menu-fls { display: none; }
.cd-oi--boite .cd-oi__menu.is-defile { overflow: visible; align-items: center; }
.cd-oi--boite .cd-oi__menu.is-defile > .cd-oi__menu-defil { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: var(--ck-space-sm, .5rem); overflow-x: auto; scrollbar-width: none; }
.cd-oi--boite .cd-oi__menu.is-defile > .cd-oi__menu-defil::-webkit-scrollbar { display: none; }
/* Un onglet coupé au bord s'efface en fondu au lieu d'être tranché net — seulement du côté où il
   reste des onglets cachés (`--cd-oi-fg` / `--cd-oi-fd`, posés par le script au défilement) : au
   début et à la fin, rien ne s'efface et les deux écarts aux flèches sont les mêmes. */
.cd-oi--boite .cd-oi__menu.is-defile > .cd-oi__menu-defil {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--cd-oi-fg, 0px), #000 calc(100% - var(--cd-oi-fd, 0px)), transparent);
	        mask-image: linear-gradient(to right, transparent, #000 var(--cd-oi-fg, 0px), #000 calc(100% - var(--cd-oi-fd, 0px)), transparent);
}
/* L'onglet ouvert n'a pas l'anneau de focus du thème (blanc + noir) : seulement au clavier, le nôtre. */
.cd-oi.cd-oi--boite .cd-oi__menu .cd-oi__tab:focus-visible { box-shadow: none; }
.cd-oi--boite .cd-oi__menu.is-defile > .cd-oi__menu-fls { display: inline-flex; flex: 0 0 auto; margin: 0; }
.cd-oi.cd-oi--boite .cd-oi__menu-fls .cd-oi__fl:disabled { opacity: var(--cd-oi-fl-off, .4); cursor: default; }
/* 5.0.52 — LES FLÈCHES D'APPLE (Kévin, 07/10 : « elle est ignoble ») : le chevron noir épais, sans rond,
   à la hauteur des onglets ; au premier et au dernier onglet, la flèche s'efface au lieu de griser. */
.cd-oi.cd-oi--boite .cd-oi__menu-fls .cd-oi__fl,
.cd-oi.cd-oi--boite .cd-oi__menu-fls .cd-oi__fl:hover {
	width: 2.25rem;
	height: var(--cd-oi-pill-h);
	border-radius: 0;
	background-color: transparent;
	color: var(--cd-oi-fl-color);
	transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), visibility 0s linear var(--cd-oi-dur);
}
.cd-oi.cd-oi--boite .cd-oi__menu-fls .cd-oi__fl svg { width: 1.25rem; height: 1.25rem; stroke-width: 3; }
.cd-oi.cd-oi--boite .cd-oi__menu-fls .cd-oi__fl:disabled { opacity: 0; visibility: hidden; }
.cd-oi.cd-oi--boite .cd-oi__menu-fls .cd-oi__fl:not(:disabled) { transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe); }

/* 5.0.17 — LES PLACES PAR APPAREIL (texte, bouton et flèches) : le rendu pose les classes de chaque
   appareil (`t-` tablette, `m-` mobile) ; ici, dans la requête de l'appareil, on efface celles du cran
   au-dessus et on applique les siennes. L'aperçu de Configuration suit l'appareil choisi. */
@media (max-width: 1024px) {
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte { justify-content: flex-start; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__slides, html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__actions { order: 0; margin-block: 0; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte--t-ensemble-milieu { justify-content: center; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte--t-ensemble-bas { justify-content: flex-end; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__t-pos-second { order: 1; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__t-m-auto { margin-block: auto; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__t-mt-auto { margin-top: auto; }
}
html[data-ck-appareil~="tablet"] .cd-oi--boite .cd-oi__p-texte { justify-content: flex-start; }
html[data-ck-appareil~="tablet"] .cd-oi--boite .cd-oi__p-texte .cd-oi__slides, html[data-ck-appareil~="tablet"] .cd-oi--boite .cd-oi__p-texte .cd-oi__actions { order: 0; margin-block: 0; }
html[data-ck-appareil~="tablet"] .cd-oi--boite .cd-oi__p-texte--t-ensemble-milieu { justify-content: center; }
html[data-ck-appareil~="tablet"] .cd-oi--boite .cd-oi__p-texte--t-ensemble-bas { justify-content: flex-end; }
html[data-ck-appareil~="tablet"] .cd-oi--boite .cd-oi__p-texte .cd-oi__t-pos-second { order: 1; }
html[data-ck-appareil~="tablet"] .cd-oi--boite .cd-oi__p-texte .cd-oi__t-m-auto { margin-block: auto; }
html[data-ck-appareil~="tablet"] .cd-oi--boite .cd-oi__p-texte .cd-oi__t-mt-auto { margin-top: auto; }
@media (max-width: 767px) {
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte { justify-content: flex-start; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__slides, html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__actions { order: 0; margin-block: 0; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte--m-ensemble-milieu { justify-content: center; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte--m-ensemble-bas { justify-content: flex-end; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__m-pos-second { order: 1; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__m-m-auto { margin-block: auto; }
	html:not([data-ck-appareil]) .cd-oi--boite .cd-oi__p-texte .cd-oi__m-mt-auto { margin-top: auto; }
}
html[data-ck-appareil~="mobile"] .cd-oi--boite .cd-oi__p-texte { justify-content: flex-start; }
html[data-ck-appareil~="mobile"] .cd-oi--boite .cd-oi__p-texte .cd-oi__slides, html[data-ck-appareil~="mobile"] .cd-oi--boite .cd-oi__p-texte .cd-oi__actions { order: 0; margin-block: 0; }
html[data-ck-appareil~="mobile"] .cd-oi--boite .cd-oi__p-texte--m-ensemble-milieu { justify-content: center; }
html[data-ck-appareil~="mobile"] .cd-oi--boite .cd-oi__p-texte--m-ensemble-bas { justify-content: flex-end; }
html[data-ck-appareil~="mobile"] .cd-oi--boite .cd-oi__p-texte .cd-oi__m-pos-second { order: 1; }
html[data-ck-appareil~="mobile"] .cd-oi--boite .cd-oi__p-texte .cd-oi__m-m-auto { margin-block: auto; }
html[data-ck-appareil~="mobile"] .cd-oi--boite .cd-oi__p-texte .cd-oi__m-mt-auto { margin-top: auto; }

/* ============================================================
   5.0.37 — LA GALERIE D'UN ONGLET
   La photo en grand, dessous ses vignettes (la photo d'abord).
   Une vignette cliquée pose sa photo PAR-DESSUS celle de
   l'onglet (ou du slide) : la case ne change pas de taille.
   ============================================================ */
.cd-oi__galerie { display: flex; flex-direction: column; gap: var(--cd-oi-vig-gap); min-width: 0; }
.cd-oi__grand { position: relative; min-width: 0; }
.cd-oi__vue {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity calc(var(--cd-oi-dur) * .5) var(--cd-oi-courbe), visibility 0s linear calc(var(--cd-oi-dur) * .5);
}
.cd-oi__vue.is-in { opacity: 1; visibility: visible; transition: opacity calc(var(--cd-oi-dur) * .5) var(--cd-oi-courbe); }
/* Dans la boîte, la photo garde sa hauteur : les vignettes s'ajoutent dessous. */
.cd-oi--boite .cd-oi__p-photo:has(> .cd-oi__galerie) { box-sizing: content-box; padding-bottom: calc(var(--cd-oi-vig-h) + var(--cd-oi-vig-gap)); }
.cd-oi--boite .cd-oi__galerie { position: absolute; inset: 0; }
.cd-oi--boite .cd-oi__grand { flex: 1 1 auto; min-height: 0; }
.cd-oi--boite .cd-oi__vue img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--cd-oi-u-img-fit, var(--cd-oi-img-fit, contain));
	object-position: var(--cd-oi-u-img-pos, var(--cd-oi-img-pos, center));
	border-radius: var(--cd-oi-u-img-radius, var(--cd-oi-img-radius));
}
.cd-oi__vigs { display: flex; flex-wrap: wrap; justify-content: safe center; gap: var(--cd-oi-vig-gap); }
/* Trois classes : le bouton du thème (fond, bord, marge intérieure) ne passe pas. */
.cd-oi .cd-oi__vigs .cd-oi__vig {
	flex: 0 0 auto;
	width: var(--cd-oi-vig-h);
	height: var(--cd-oi-vig-h);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--cd-oi-vig-radius);
	background: none;
	overflow: hidden;
	opacity: var(--cd-oi-vig-off);
	outline: 0;
	box-shadow: none;
	cursor: pointer;
	transition: opacity var(--cd-oi-pill-dur);
}
/* Le bouton du thème au survol / au focus (fond, bord, filet de couleur) ne passe pas non plus. */
.cd-oi .cd-oi__vigs .cd-oi__vig:hover,
.cd-oi .cd-oi__vigs .cd-oi__vig:focus { border: 0; outline: 0; box-shadow: none; background: none; }
.cd-oi .cd-oi__vigs .cd-oi__vig:hover,
.cd-oi .cd-oi__vigs .cd-oi__vig.is-active { opacity: 1; }
.cd-oi .cd-oi__vigs .cd-oi__vig:focus-visible { opacity: 1; }
.cd-oi .cd-oi__vigs .cd-oi__vig img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

/* 5.0.52 — TÉLÉPHONE ET TABLETTE, TEXTE DANS LA BOÎTE : LA NAVIGATION SEULEMENT (Kévin, 07/10 : « la première est
   géniale… la deuxième est horrible », « juste la navigation », « ta pilule pleine largeur, dégueulasse »).
   Seul l'onglet ouvert se voit (« trois onglets coupés en plein dans la section », Kévin), sur toute la largeur entre les deux flèches
   (Kévin : « un onglet sur 100 % de la largeur, c'est logique ») ; les autres s'effacent ; la rangée glisse pour mettre l'onglet ouvert au centre (`--cd-oi-x`,
   calculé par le script) ; les flèches de la première : un demi-rond gris
   collé au bord, le chevron d'Apple dedans. La boîte ne change pas. */
@media (max-width: 1024px) {
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite { --cd-oi-centre: 1; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu, html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu.is-defile { --cd-oi-fl-w: 2.25rem; position: relative; display: block; overflow: hidden; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-defil, html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu.is-defile > .cd-oi__menu-defil { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--cd-oi-pill-gap); width: max-content; overflow: visible; -webkit-mask-image: none; mask-image: none; transform: translateX(var(--cd-oi-x, 0px)); clip-path: inset(-1px calc(100% - var(--cd-oi-mw, 100%) + var(--cd-oi-fl-w) + var(--cd-oi-pill-gap) + var(--cd-oi-x, 0px)) -1px calc(var(--cd-oi-fl-w) + var(--cd-oi-pill-gap) - var(--cd-oi-x, 0px))); transition: transform var(--cd-oi-dur) var(--cd-oi-courbe), clip-path var(--cd-oi-dur) var(--cd-oi-courbe); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab { flex: 0 0 auto; height: var(--cd-oi-pill-h); font-size: var(--cd-oi-pill-fz); padding-inline: var(--ck-space-lg, 1rem); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab .cd-oi__plus { transition: none; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), visibility 0s linear var(--cd-oi-dur); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-active { width: calc(var(--cd-oi-mw, 100%) - 2 * (var(--cd-oi-fl-w) + var(--cd-oi-pill-gap))); opacity: 1; visibility: visible; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), background-color var(--cd-oi-pill-dur), color var(--cd-oi-pill-dur); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-active > * { animation: cd-oi-fondu var(--cd-oi-dur) var(--cd-oi-courbe) var(--cd-oi-delai) both; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-fls, html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu.is-defile > .cd-oi__menu-fls { position: absolute; inset-block: 0; z-index: 1; display: flex; align-items: center; width: var(--cd-oi-fl-w); margin: 0; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-fls--prec { inset-inline-start: 0; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-fls--suiv { inset-inline-end: 0; justify-content: flex-end; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls .cd-oi__fl, html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls .cd-oi__fl:hover { width: 100%; height: var(--cd-oi-pill-h); background-color: var(--cd-oi-pill-bg); color: var(--cd-oi-fl-color); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--prec .cd-oi__fl, html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--prec .cd-oi__fl:hover { border-radius: 0 var(--cd-oi-pill-h) var(--cd-oi-pill-h) 0; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--suiv .cd-oi__fl, html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--suiv .cd-oi__fl:hover { border-radius: var(--cd-oi-pill-h) 0 0 var(--cd-oi-pill-h); }
}
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite { --cd-oi-centre: 1; }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite { --cd-oi-centre: 1; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu, html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu.is-defile { --cd-oi-fl-w: 2.25rem; position: relative; display: block; overflow: hidden; }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu, html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu.is-defile { --cd-oi-fl-w: 2.25rem; position: relative; display: block; overflow: hidden; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-defil, html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu.is-defile > .cd-oi__menu-defil { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--cd-oi-pill-gap); width: max-content; overflow: visible; -webkit-mask-image: none; mask-image: none; transform: translateX(var(--cd-oi-x, 0px)); clip-path: inset(-1px calc(100% - var(--cd-oi-mw, 100%) + var(--cd-oi-fl-w) + var(--cd-oi-pill-gap) + var(--cd-oi-x, 0px)) -1px calc(var(--cd-oi-fl-w) + var(--cd-oi-pill-gap) - var(--cd-oi-x, 0px))); transition: transform var(--cd-oi-dur) var(--cd-oi-courbe), clip-path var(--cd-oi-dur) var(--cd-oi-courbe); }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-defil, html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu.is-defile > .cd-oi__menu-defil { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--cd-oi-pill-gap); width: max-content; overflow: visible; -webkit-mask-image: none; mask-image: none; transform: translateX(var(--cd-oi-x, 0px)); clip-path: inset(-1px calc(100% - var(--cd-oi-mw, 100%) + var(--cd-oi-fl-w) + var(--cd-oi-pill-gap) + var(--cd-oi-x, 0px)) -1px calc(var(--cd-oi-fl-w) + var(--cd-oi-pill-gap) - var(--cd-oi-x, 0px))); transition: transform var(--cd-oi-dur) var(--cd-oi-courbe), clip-path var(--cd-oi-dur) var(--cd-oi-courbe); }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab { flex: 0 0 auto; height: var(--cd-oi-pill-h); font-size: var(--cd-oi-pill-fz); padding-inline: var(--ck-space-lg, 1rem); }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab { flex: 0 0 auto; height: var(--cd-oi-pill-h); font-size: var(--cd-oi-pill-fz); padding-inline: var(--ck-space-lg, 1rem); }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab .cd-oi__plus { transition: none; }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab .cd-oi__plus { transition: none; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), visibility 0s linear var(--cd-oi-dur); }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), visibility 0s linear var(--cd-oi-dur); }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-active { width: calc(var(--cd-oi-mw, 100%) - 2 * (var(--cd-oi-fl-w) + var(--cd-oi-pill-gap))); opacity: 1; visibility: visible; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), background-color var(--cd-oi-pill-dur), color var(--cd-oi-pill-dur); }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-active { width: calc(var(--cd-oi-mw, 100%) - 2 * (var(--cd-oi-fl-w) + var(--cd-oi-pill-gap))); opacity: 1; visibility: visible; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), background-color var(--cd-oi-pill-dur), color var(--cd-oi-pill-dur); }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-active > * { animation: cd-oi-fondu var(--cd-oi-dur) var(--cd-oi-courbe) var(--cd-oi-delai) both; }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-active > * { animation: cd-oi-fondu var(--cd-oi-dur) var(--cd-oi-courbe) var(--cd-oi-delai) both; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-fls, html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu.is-defile > .cd-oi__menu-fls { position: absolute; inset-block: 0; z-index: 1; display: flex; align-items: center; width: var(--cd-oi-fl-w); margin: 0; }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-fls, html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu.is-defile > .cd-oi__menu-fls { position: absolute; inset-block: 0; z-index: 1; display: flex; align-items: center; width: var(--cd-oi-fl-w); margin: 0; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-fls--prec { inset-inline-start: 0; }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-fls--prec { inset-inline-start: 0; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-fls--suiv { inset-inline-end: 0; justify-content: flex-end; }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu > .cd-oi__menu-fls--suiv { inset-inline-end: 0; justify-content: flex-end; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls .cd-oi__fl, html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls .cd-oi__fl:hover { width: 100%; height: var(--cd-oi-pill-h); background-color: var(--cd-oi-pill-bg); color: var(--cd-oi-fl-color); }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls .cd-oi__fl, html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls .cd-oi__fl:hover { width: 100%; height: var(--cd-oi-pill-h); background-color: var(--cd-oi-pill-bg); color: var(--cd-oi-fl-color); }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--prec .cd-oi__fl, html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--prec .cd-oi__fl:hover { border-radius: 0 var(--cd-oi-pill-h) var(--cd-oi-pill-h) 0; }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--prec .cd-oi__fl, html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--prec .cd-oi__fl:hover { border-radius: 0 var(--cd-oi-pill-h) var(--cd-oi-pill-h) 0; }
html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--suiv .cd-oi__fl, html[data-ck-appareil~="tablet"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--suiv .cd-oi__fl:hover { border-radius: var(--cd-oi-pill-h) 0 0 var(--cd-oi-pill-h); }
html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--suiv .cd-oi__fl, html[data-ck-appareil~="mobile"] .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__menu-fls--suiv .cd-oi__fl:hover { border-radius: var(--cd-oi-pill-h) 0 0 var(--cd-oi-pill-h); }

/* 5.0.52 — TABLETTE, TEXTE DANS LA BOÎTE : deux onglets entre les flèches (Kévin : « sur tablette, tu peux en
   mettre deux »). Le script montre l'onglet ouvert et son voisin (`is-vu`), la rangée glisse d'un cran. */
@media (min-width: 768px) and (max-width: 1024px) {
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite { --cd-oi-cols: 2; }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab, html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-active { width: calc((var(--cd-oi-mw, 100%) - 2 * (var(--cd-oi-fl-w) + var(--cd-oi-pill-gap)) - var(--cd-oi-pill-gap)) / 2); }
	html:not([data-ck-appareil]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-vu { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), background-color var(--cd-oi-pill-dur), color var(--cd-oi-pill-dur); }
}
html[data-ck-appareil~="tablet"]:not([data-ck-appareil~="mobile"]) .cd-oi.cd-oi--boite { --cd-oi-cols: 2; }
html[data-ck-appareil~="tablet"]:not([data-ck-appareil~="mobile"]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab, html[data-ck-appareil~="tablet"]:not([data-ck-appareil~="mobile"]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-active { width: calc((var(--cd-oi-mw, 100%) - 2 * (var(--cd-oi-fl-w) + var(--cd-oi-pill-gap)) - var(--cd-oi-pill-gap)) / 2); }
html[data-ck-appareil~="tablet"]:not([data-ck-appareil~="mobile"]) .cd-oi.cd-oi--boite > .cd-oi__menu .cd-oi__tab.is-vu { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--cd-oi-dur) var(--cd-oi-courbe), background-color var(--cd-oi-pill-dur), color var(--cd-oi-pill-dur); }