/* =============================================================================
 * Slider — Composants Ipedis (famille B : multi-slides défilants, accessible)
 * Contrôles AVANT le contenu (DOM), repositionnés en CSS. Calé sur la maquette.
 *
 * Le SQUELETTE des cartes (.ipdc-card / .ipdc-compact / badges / CTA) est
 * MUTUALISÉ dans assets/cards.css (dépendance). Ce fichier ne contient que la
 * mise en page propre au slider (viewport, contrôles, défilement) et les
 * surcharges de fond spécifiques à chaque modèle.
 * ========================================================================== */
.ipdc-slider { display: flex; flex-direction: column; gap: 20px; }
.ipdc-slider__viewport { order: 1; }
.ipdc-slider__controls { order: 2; }

/* Zone de défilement focusable — sans barre de défilement visible. */
.ipdc-slider__viewport {
	display: flex;
	align-items: stretch; /* toutes les cartes d'une même vue à hauteur uniforme */
	gap: var(--ipdc-gap, 24px);
	/* padding 0 !important : neutralise le padding-left des styles de liste du thème (sinon le slide
	 * ne fait pas toute la largeur et laisse voir le 2e slide). Garde le 1er item calé à gauche. */
	margin: 0; padding: 0 !important; list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.ipdc-slider__viewport::-webkit-scrollbar { display: none; }
.ipdc-slider__slide {
	flex: 0 0 calc((100% - (var(--ipdc-per, 3) - 1) * var(--ipdc-gap, 24px)) / var(--ipdc-per, 3));
	scroll-snap-align: start; min-width: 0;
}
/* Nombre d'items visibles sur ordinateur choisi par l'auteur → via CLASSE (jamais de style inline).
 * Valeurs = IPDC_Slider_Admin::perview_choices() ; consommé par les media queries ≥1024px des modèles. */
.ipdc-per--2   { --ipdc-per-desktop: 2; }
.ipdc-per--2-5 { --ipdc-per-desktop: 2.5; }
.ipdc-per--3   { --ipdc-per-desktop: 3; }
.ipdc-per--3-5 { --ipdc-per-desktop: 3.5; }
.ipdc-per--4   { --ipdc-per-desktop: 4; }
.ipdc-per--4-5 { --ipdc-per-desktop: 4.5; }
.ipdc-per--5   { --ipdc-per-desktop: 5; }

/* Contrôles — pastille beige contenant les boutons (calée à gauche par défaut). */
.ipdc-slider__controls { display: flex; gap: 12px; justify-content: flex-start; margin: 0; width: fit-content; background: #F5F1D8; padding: 8px; border-radius: 8px; }
/* Ordre DOM des boutons (pause, précédent, suivant) = ordre VISUEL = ordre de tabulation.
 * Le viewport précède les contrôles dans le DOM → focus : liens des slides visibles, puis contrôles.
 * Aucun réordonnancement `order` nécessaire ici (DOM et visuel coïncident). */
.ipdc-slider__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 35px; height: 35px; padding: 0;
	border: none; border-radius: 6px;
	background: #FFFDED; color: var(--ipdc-navy); cursor: pointer;
	transition: background-color 0.16s ease-out, color 0.16s ease-out, transform 0.1s ease-out;
}
.ipdc-slider--temoignages .ipdc-slider__btn {
    background: #F5F1D8;
}
.ipdc-slider__btn .ipdc-slider__ico svg { width: 20px; }
.ipdc-slider__btn:hover { background: var(--ipdc-navy); color: #FFFDED; }
.ipdc-slider__btn:active { transform: scale(0.93); }
.ipdc-slider__btn:focus-visible { outline: 3px solid var(--ipdc-navy); outline-offset: 2px; background: var(--ipdc-navy); color: #FFFDED; }
/* Bouton indisponible = attribut natif `disabled` (retiré du parcours clavier ET de l'arbre
 * d'accessibilité — retour d'audit) : plus jamais atteignable au clavier quand il n'y a pas d'action. */
.ipdc-slider__btn:disabled,
.ipdc-slider__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.ipdc-slider__btn:disabled:hover,
.ipdc-slider__btn[aria-disabled="true"]:hover { background: #FFFDED; color: var(--ipdc-navy); }
.ipdc-slider__ico { display: inline-flex; }

/* =============================================================================
 * Modèle 01 — Bandeau logos (contrôles CENTRÉS)
 * ========================================================================== */
.ipdc-slider--logos { --ipdc-per: 1; --ipdc-gap: 28px; } /* mobile (<768) : un seul logo, sans aperçu */
@media (min-width: 768px) { .ipdc-slider--logos { --ipdc-per: 3; } }
@media (min-width: 1024px) { .ipdc-slider--logos { --ipdc-per: 6; } }
.ipdc-slider--logos .ipdc-slider__controls { justify-content: center; margin: auto; }
.ipdc-logoslide { display: flex; align-items: center; justify-content: center; }
.ipdc-logo { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 96px; padding: 12px 16px; text-decoration: none; color: var(--ipdc-navy); }
.ipdc-logo__img { max-width: 100%; width: auto; height: auto; max-height: 60px; object-fit: contain; transition: transform 0.22s ease-out; }
.ipdc-logo__text { font-weight: 600; text-align: center; }
.ipdc-logo:hover .ipdc-logo__img, .ipdc-logo:focus-visible .ipdc-logo__img, .ipdc-logo:active .ipdc-logo__img { transform: scale(1.06); }
.ipdc-logo:focus-visible { outline: 3px solid var(--ipdc-navy); outline-offset: -3px; border-radius: var(--ipdc-radius-sm); position: relative; z-index: 2; }

/* =============================================================================
 * Modèles carte (03 Sélection / 05 Cas) — peek de l'item suivant
 * (le squelette .ipdc-card est dans cards.css ; ici : dimensionnement + fond du modèle)
 * ========================================================================== */
.ipdc-slider--cas, .ipdc-slider--solutions { --ipdc-per: 1; --ipdc-gap: 28px; } /* mobile (<768) : un seul, sans aperçu */
@media (min-width: 768px) { .ipdc-slider--cas, .ipdc-slider--solutions { --ipdc-per: 1.6; } }
/* Bureau : --ipdc-per-desktop est posé en inline par l'admin (2 → 5, demi-pas) ; sinon valeur par défaut du modèle. */
@media (min-width: 1024px) {
	.ipdc-slider--cas { --ipdc-per: var(--ipdc-per-desktop, 2.3); }
	.ipdc-slider--solutions { --ipdc-per: var(--ipdc-per-desktop, 2); }
}
/* Modèles carte 03 (sélection) / 05 (cas) : fond crème #F5F1D8 + cadre image assorti. */
.ipdc-slider--solutions .ipdc-card,
.ipdc-slider--cas .ipdc-card { background: #F5F1D8; }
.ipdc-slider--solutions .ipdc-card__media,
.ipdc-slider--cas .ipdc-card__media { border-color: #F5F1D8; }
/* Modèles compacts « repères » 02 et 04 (sans lien) : fond crème clair #FFFDED. */
.ipdc-slider--reperes .ipdc-compact,
.ipdc-slider--cartes .ipdc-compact { background: #FFFDED; }

/* =============================================================================
 * Disposition « collé au bord droit » (bureau ≥ 1024px) — modèles 02→05
 * La zone s'étend jusqu'au bord droit du viewport tout en gardant l'alignement à gauche.
 * Le défilement reste actif (overflow inchangé) : c'est la LARGEUR qui change, pas l'overflow —
 * contrairement à `overflow:visible` (qui, lui, supprime le défilement).
 * ========================================================================== */
@media (min-width: 1024px) {
	.ipdc-slider--bleed-right { margin-right: calc(50% - 50vw); }
}

/* =============================================================================
 * Modèle 06 — Témoignage : logo à gauche, citation à droite, flèches ↑↓ à DROITE
 * ========================================================================== */
.ipdc-slider--temoignages { --ipdc-per: 1; flex-direction: row; align-items: stretch; gap: 0!important; background: #F5F1D8; border-radius: 16px; }
/* Défilement VERTICAL réel (flèches ↑↓) : UN SEUL témoignage visible à la fois, le reste caché. */
.ipdc-slider--temoignages .ipdc-slider__viewport {
	order: 1; flex: 1 1 auto;
	flex-direction: column;
	overflow-x: hidden; overflow-y: auto;
	scroll-snap-type: y mandatory;
	gap: 0;                 /* aucun demi-item visible */
	height: 320px;          /* hauteur d'un témoignage ; le reste défile hors-vue */
	padding: 0;
}
.ipdc-slider--temoignages .ipdc-slider__viewport { border-radius: 16px; }
/* Chaque slide occupe toute la hauteur du viewport → exactement un par vue. */
.ipdc-slider--temoignages .ipdc-slider__slide { flex: 0 0 auto; width: 100%; min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.ipdc-slider--temoignages .ipdc-slider__controls { order: 2; flex-direction: column; justify-content: center;
  margin-right: 5%;
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
  background: #FFFDED;
}
.ipdc-testi { display: flex; }
.ipdc-testi__fig {
	margin: 0; width: 100%;
	display: grid; grid-template-columns: 1fr; gap: 20px;
	background: var(--ipdc-cream, #FFFDED); border-radius: var(--ipdc-radius-lg); padding: 40px 48px;
}
.ipdc-slider--temoignages .ipdc-testi__fig {
    padding: 30px;
    background: #F5F1D8;
}
@media (min-width: 768px) {
	.ipdc-testi__fig { grid-template-columns: 220px 1fr; align-items: center; gap: 40px; }
}
.ipdc-testi__logo { display: flex; align-items: center; justify-content: center; }
.ipdc-testi__logo img { max-width: 190px; max-height: 84px; width: auto; height: auto; object-fit: contain; }
/* Citation : pas de bordure gauche héritée du thème, typo Urbanist (sélecteur renforcé pour surcharger le thème). */
.ipdc-testi .ipdc-testi__quote {
	margin: 0 0 22px; border: 0; padding: 0; quotes: none;
	font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.5px;
	line-height: 1.6; color: #04162F;
}
.ipdc-testi__author { display: block; font-weight: 700; color: #04162F; text-transform: uppercase; letter-spacing: 0.02em; }
.ipdc-testi__role { display: block; color: rgba(4, 22, 47, 0.7); font-size: 0.92rem; margin-top: 2px; }

/* =============================================================================
 * Modèles 02 & 04 — Repères (compact) : dimensionnement propre au slider
 * (le squelette .ipdc-compact est dans cards.css)
 * ========================================================================== */
.ipdc-slider--reperes, .ipdc-slider--cartes { --ipdc-per: 1; --ipdc-gap: 24px; } /* mobile (<768) : un seul, sans aperçu */
@media (min-width: 768px) { .ipdc-slider--reperes, .ipdc-slider--cartes { --ipdc-per: 2.2; } }
@media (min-width: 1024px) { .ipdc-slider--reperes, .ipdc-slider--cartes { --ipdc-per: var(--ipdc-per-desktop, 3.2); } }

/* =============================================================================
 * Responsive mobile — un seul item centré (logos) ; témoignages en horizontal
 * ========================================================================== */
@media (max-width: 767px) {
	/* Logos : le logo unique reste centré. */
	.ipdc-slider--logos .ipdc-slider__slide { scroll-snap-align: center; }
}
@media (max-width: 767px) {
	/* Témoignages : bascule en HORIZONTAL (un par vue), contrôles en bas au centre. */
	.ipdc-slider--temoignages { flex-direction: column; gap: 16px; }
	.ipdc-slider--temoignages .ipdc-slider__viewport {
		flex-direction: row;
		overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x mandatory;
		height: auto;
	}
	.ipdc-slider--temoignages .ipdc-slider__slide { flex: 0 0 100%; width: 100%; min-height: 0; scroll-snap-align: center; }
	.ipdc-slider--temoignages .ipdc-slider__controls { order: 2; flex-direction: row; justify-content: center;
		margin: auto;
        margin-bottom: 30px;
    }
	.ipdc-slider--temoignages .ipdc-testi__fig { align-items: center; }
	/* Les flèches ↑↓ deviennent ←→ (cohérent avec le défilement horizontal). */
	.ipdc-slider--temoignages .ipdc-slider__prev .ipdc-slider__ico,
	.ipdc-slider--temoignages .ipdc-slider__next .ipdc-slider__ico { transform: rotate(-90deg); }
}

/* Mouvement réduit — défilement (le mouvement réduit des cartes est géré dans cards.css). */
@media (prefers-reduced-motion: reduce) {
	.ipdc-slider__viewport { scroll-behavior: auto; }
	.ipdc-slider__btn, .ipdc-logo__img { transition: none !important; }
	.ipdc-logo:hover .ipdc-logo__img, .ipdc-logo:focus-visible .ipdc-logo__img, .ipdc-logo:active .ipdc-logo__img { transform: none; }
}

/* =============================================================================
 * Élément COURANT — carrousels sans élément actionnable uniquement
 *
 * La classe `ipdc-slider__slide--current` est posée par le script sur l'élément que les
 * boutons précédent/suivant viennent d'annoncer (jamais sur un carrousel dont les
 * diapositives contiennent un lien : là, c'est le focus du lien qui repère la position).
 *
 * Elle porte l'information VISUELLE que le lecteur d'écran reçoit par la région live et
 * `aria-current` : sans elle, rien à l'écran ne dit quel élément est annoncé — en
 * particulier en fin de liste, où le défilement est borné et l'élément courant ne peut plus
 * remonter au premier rang.
 *
 * Modèle 04 (Cartes) : plusieurs éléments visibles à la fois → un fond distinctif est
 * nécessaire pour désigner lequel est courant. Aucune couleur nouvelle, c'est le beige déjà
 * utilisé par le composant ; contraste du texte (#04162F) supérieur à 12:1.
 *
 * Modèle 06 (Témoignages) : un SEUL élément visible à la fois, qui défile — l'élément visible
 * EST l'élément courant, aucun fond n'est utile. Volontairement aucune règle ici : la seule
 * marque y est `aria-current`, invisible et sans effet sur le rendu validé.
 * ========================================================================== */
.ipdc-slider__slide--current.ipdc-compact { background: #F5F1D8; }