/*
 * Design system ZePartner — fiches formation
 * Jetons repris du modèle validé par le client (zepartner.ai) et alignés sur le
 * kit Elementor 7860 : les couleurs y sont aussi disponibles comme couleurs globales.
 * Une seule source de vérité par valeur ; les composants ne font que les décliner.
 */

.zp-fiche {
	--zp-navy: #12314C;
	--zp-navy-2: #1D4569;
	--zp-blue: #2E73AC;
	--zp-blue-soft: #E8F0F6;
	--zp-green: #4C8B45;
	--zp-green-soft: #E9F2E6;
	--zp-amber: #E0982E;
	--zp-amber-soft: #FBF1DF;
	--zp-paper: #F6F8FA;
	--zp-white: #FFFFFF;
	--zp-ink: #16232F;
	--zp-ink-soft: #4A5B6A;
	--zp-line: #DCE4EC;

	--zp-shadow-sm: 0 1px 3px rgba(18, 49, 76, .06), 0 8px 24px rgba(18, 49, 76, .05);
	--zp-shadow-md: 0 4px 12px rgba(18, 49, 76, .08), 0 20px 48px rgba(18, 49, 76, .10);

	--zp-r: 16px;
	--zp-r-sm: 10px;
	--zp-ease: cubic-bezier(.16, .84, .44, 1);

	--zp-titre: 'Bricolage Grotesque', system-ui, sans-serif;
	--zp-texte: 'Inter', system-ui, sans-serif;

	font-family: var(--zp-texte);
	color: var(--zp-ink);
	line-height: 1.6;
}

.zp-fiche h1,
.zp-fiche h2,
.zp-fiche h3,
.zp-fiche h4 {
	font-family: var(--zp-titre);
	line-height: 1.05;
	letter-spacing: -.02em;
	font-weight: 700;
	color: var(--zp-navy);
}

/* ---------------------------------------------------------------- Surtitre */

.zp-eyebrow {
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--zp-blue);
	display: inline-flex;
	align-items: center;
	gap: .6em;
}

.zp-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--zp-amber);
	display: inline-block;
}

/* ----------------------------------------------------------------- Boutons */

/*
 * Elementor pose les classes personnalisées sur le conteneur du widget, jamais sur
 * le <a>. Les règles visent donc le bouton descendant ; « a.zp-btn » couvre l'usage
 * hors Elementor (widgets maison, contenu libre).
 */
.zp-btn .elementor-button,
a.zp-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--zp-texte);
	font-weight: 600;
	font-size: .95rem;
	padding: .72em 1.4em;
	border-radius: 100px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .25s var(--zp-ease), box-shadow .25s, background .25s, border-color .25s;
}

/* Le conteneur du widget ne porte aucun décor : il ne doit pas doubler la pilule. */
.zp-btn.elementor-widget-button {
	background: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.zp-btn--primaire .elementor-button,
a.zp-btn--primaire {
	background: var(--zp-amber);
	color: #3A2708;
	box-shadow: 0 4px 14px rgba(224, 152, 46, .35);
}

.zp-btn--primaire .elementor-button:hover,
.zp-btn--primaire .elementor-button:focus-visible,
a.zp-btn--primaire:hover,
a.zp-btn--primaire:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(224, 152, 46, .45);
	color: #3A2708;
}

.zp-btn--fantome .elementor-button,
a.zp-btn--fantome {
	background: transparent;
	color: var(--zp-navy);
	border: 1.5px solid var(--zp-line);
}

.zp-btn--fantome .elementor-button:hover,
.zp-btn--fantome .elementor-button:focus-visible,
a.zp-btn--fantome:hover,
a.zp-btn--fantome:focus-visible {
	border-color: var(--zp-navy);
	background: var(--zp-white);
	color: var(--zp-navy);
}

.zp-eyebrow .elementor-heading-title {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
}

/* ------------------------------------------------------- Titre de section */

.zp-sec-head {
	max-width: 720px;
	margin-bottom: clamp(38px, 5vw, 60px);
}

.zp-sec-head h2 {
	font-size: clamp(1.9rem, 4vw, 3rem);
	margin: .7rem 0 .8rem;
	letter-spacing: -.03em;
}

.zp-sec-head p {
	font-size: 1.1rem;
	color: var(--zp-ink-soft);
}

/* ------------------------------------------------- Grilles et cartes base */

.zp-grille {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.zp-carte {
	background: var(--zp-white);
	border: 1px solid var(--zp-line);
	border-radius: var(--zp-r);
	padding: 1.7rem 1.6rem;
	transition: transform .3s var(--zp-ease), box-shadow .3s, border-color .3s;
}

.zp-carte:hover {
	transform: translateY(-5px);
	box-shadow: var(--zp-shadow-md);
}

/* ------------------------------------------------------- Module de programme */

.zp-module {
	display: flex;
	flex-direction: column;
}

.zp-module__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	gap: 1rem;
}

.zp-module__num {
	font-family: var(--zp-titre);
	font-weight: 800;
	font-size: 2.4rem;
	color: var(--zp-blue-soft);
	line-height: 1;
	letter-spacing: -.04em;
}

.zp-module__duree {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--zp-blue);
	background: var(--zp-blue-soft);
	padding: .4em .8em;
	border-radius: 100px;
	white-space: nowrap;
}

.zp-module h3 {
	font-size: 1.14rem;
	margin-bottom: .6rem;
}

.zp-module p {
	font-size: .92rem;
	color: var(--zp-ink-soft);
	flex: 1;
}

.zp-module__atelier {
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px dashed var(--zp-line);
	font-size: .86rem;
	color: var(--zp-green);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: .5em;
}

/* --------------------------------------------------- Caractéristique (pilier) */

.zp-pilier {
	position: relative;
	overflow: hidden;
	padding: 2rem 1.6rem;
}

.zp-pilier::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 4px;
	width: 100%;
	background: var(--zp-teinte, var(--zp-blue));
}

.zp-pilier__ico {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	margin-bottom: 1.2rem;
	background: var(--zp-teinte-douce, var(--zp-blue-soft));
	color: var(--zp-teinte, var(--zp-blue));
}

.zp-pilier h3 {
	font-size: 1.16rem;
	margin-bottom: .5rem;
}

.zp-pilier p {
	font-size: .94rem;
	color: var(--zp-ink-soft);
	white-space: pre-line;
}

/* Déclinaisons de teinte, dans l'ordre du modèle. */
.zp-pilier:nth-child(4n+1) { --zp-teinte: var(--zp-blue);  --zp-teinte-douce: var(--zp-blue-soft); }
.zp-pilier:nth-child(4n+2) { --zp-teinte: var(--zp-green); --zp-teinte-douce: var(--zp-green-soft); }
.zp-pilier:nth-child(4n+3) { --zp-teinte: var(--zp-amber); --zp-teinte-douce: var(--zp-amber-soft); }
.zp-pilier:nth-child(4n)   { --zp-teinte: var(--zp-navy);  --zp-teinte-douce: var(--zp-blue-soft); }

/* ------------------------------------------------------------ Étiquettes */

.zp-tag {
	font-size: .84rem;
	background: var(--zp-white);
	border: 1px solid var(--zp-line);
	border-radius: 100px;
	padding: .4em .9em;
	color: var(--zp-ink-soft);
	font-weight: 500;
	display: inline-block;
}

.zp-pill {
	border: 1px solid var(--zp-line);
	border-radius: var(--zp-r-sm);
	padding: .7rem 1rem;
	flex: 1;
	min-width: 120px;
	background: var(--zp-white);
}

.zp-pill b {
	display: block;
	font-family: var(--zp-titre);
	color: var(--zp-navy);
	font-size: 1.05rem;
}

.zp-pill span {
	font-size: .8rem;
	color: var(--zp-ink-soft);
}

/* ------------------------------------------------------------- Objectifs */

.zp-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.zp-liste li {
	position: relative;
	padding-left: 1.9rem;
	color: var(--zp-ink-soft);
}

.zp-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--zp-green);
}

/* ------------------------------------------------------------ Indicateurs */

.zp-stats {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.zp-stat {
	background: var(--zp-navy);
	border-radius: var(--zp-r);
	padding: 1.4rem 1.3rem;
	color: #EAF1F7;
}

.zp-stat b {
	display: block;
	font-family: var(--zp-titre);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--zp-amber);
	margin-bottom: .35rem;
}

.zp-stat span {
	font-size: .86rem;
}

/* ---------------------------------------------------------------- Sessions */

.zp-sessions {
	width: 100%;
	border-collapse: collapse;
	background: var(--zp-white);
	border: 1px solid var(--zp-line);
	border-radius: var(--zp-r);
	overflow: hidden;
}

.zp-sessions th,
.zp-sessions td {
	text-align: left;
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--zp-line);
	font-size: .93rem;
}

.zp-sessions th {
	font-family: var(--zp-titre);
	font-weight: 700;
	color: var(--zp-navy);
	background: var(--zp-paper);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.zp-sessions tr:last-child td {
	border-bottom: 0;
}

/* ------------------------------------------------------------- Mention légale */

.zp-mention {
	margin-top: 1.1rem;
	font-size: .84rem;
	color: var(--zp-ink-soft);
	border-left: 3px solid var(--zp-amber);
	padding-left: .9rem;
	white-space: pre-line;
}

@media (prefers-reduced-motion: reduce) {
	.zp-fiche * {
		transition: none !important;
	}
}

/* ---------------------------------------------------------- Fond sombre */

/*
 * Sur fond navy, les titres héritent de la couleur globale « primary » du kit,
 * elle-même navy : illisible. La spécificité est portée à trois classes pour
 * repasser devant la règle du widget Elementor (.elementor-widget-heading
 * .elementor-heading-title), sans recourir à !important.
 */
.zp-fiche.zp-inverse .elementor-heading-title,
.zp-fiche.zp-inverse h1,
.zp-fiche.zp-inverse h2,
.zp-fiche.zp-inverse h3 {
	color: var(--zp-white);
}

.zp-fiche.zp-inverse,
.zp-fiche.zp-inverse p {
	color: #EAF1F7;
}

.zp-fiche.zp-inverse .zp-eyebrow {
	color: var(--zp-amber);
}

/* ------------------------------------------------------------------ Tarif */

.zp-tarif .elementor-heading-title,
.zp-tarif {
	font-family: var(--zp-titre);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--zp-navy);
}

/* --------------------------------------------------------- Bandeau d'en-tête */

/*
 * Le grand aplat bleu du modèle : un dégradé linéaire plus deux halos radiaux
 * (bleu en haut à droite, vert en bas à gauche). Il est porté par la feuille et
 * non par un réglage Elementor, parce qu'un fond de container ne sait pas
 * empiler plusieurs dégradés.
 */
.zp-bandeau {
	background:
		radial-gradient(1200px 600px at 78% -8%, rgba(46, 115, 172, .20), transparent 60%),
		radial-gradient(900px 500px at 10% 110%, rgba(76, 139, 69, .16), transparent 55%),
		linear-gradient(160deg, #0F2B43 0%, #12314C 46%, #163B5C 100%);
	position: relative;
	overflow: hidden;
}

.zp-bandeau h1 {
	font-size: clamp(2.15rem, 5.4vw, 4.35rem);
	font-weight: 800;
	letter-spacing: -.035em;
}

/* Cartes en verre dépoli : le liseré coloré du pilier reste le seul aplat vif. */
.zp-inverse .zp-carte,
.zp-inverse .zp-pilier {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	backdrop-filter: blur(6px);
}

.zp-inverse .zp-carte:hover,
.zp-inverse .zp-pilier:hover {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .22);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.zp-inverse .zp-pilier h3 {
	color: var(--zp-white);
}

.zp-inverse .zp-pilier p,
.zp-inverse .zp-liste li {
	color: #B3C8DB;
}

/* Le bouton fantôme doit se détacher du bleu, pas du blanc. */
.zp-inverse .zp-btn--fantome .elementor-button,
.zp-inverse a.zp-btn--fantome {
	color: var(--zp-white);
	border-color: rgba(255, 255, 255, .28);
}

.zp-inverse .zp-btn--fantome .elementor-button:hover,
.zp-inverse .zp-btn--fantome .elementor-button:focus-visible,
.zp-inverse a.zp-btn--fantome:hover {
	background: rgba(255, 255, 255, .08);
	border-color: var(--zp-white);
	color: var(--zp-white);
}

/* Respiration entre l'accroche du haut et le sous-titre « L'essentiel ». */
.zp-bandeau .zp-sec-head {
	margin-top: clamp(48px, 6vw, 82px);
}

/* ------------------------------------------------------------- Deux colonnes */

/*
 * La disposition en deux colonnes est portée par le gabarit Elementor
 * (flex_direction / width), pas par cette feuille : le CSS généré par Elementor
 * a trois classes de spécificité et gagnerait sur toute règle posée ici.
 * Ne restent donc que l'habillage et le comportement.
 */

/* Une carte qui contient un formulaire ne doit pas bouger sous le curseur. */
.zp-fiche .zp-colonne:hover {
	transform: none;
	box-shadow: var(--zp-shadow-sm);
}

.zp-colonne h3 {
	font-size: 1.3rem;
	margin-bottom: .8rem;
}

.zp-colonne p {
	font-size: .95rem;
	color: var(--zp-ink-soft);
}

.zp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-top: .9rem;
}

/* ------------------------------------------------------------- Formulaires */

.zp-form .elementor-field-group > label {
	font-size: .8rem;
	font-weight: 600;
	color: var(--zp-ink-soft);
	margin-bottom: .35rem;
}

.zp-form .elementor-field-textual {
	font-family: var(--zp-texte);
	font-size: .95rem;
	line-height: 1.5;
	color: var(--zp-ink);
	background: var(--zp-white);
	border: 1px solid var(--zp-line);
	border-radius: var(--zp-r-sm);
	padding: .68em .9em;
	transition: border-color .2s, box-shadow .2s;
}

.zp-form .elementor-field-textual:focus {
	border-color: var(--zp-blue);
	box-shadow: 0 0 0 3px rgba(46, 115, 172, .16);
	outline: 0;
}

.zp-form .elementor-field-textual::placeholder {
	color: #9AA9B6;
}

/* Le bouton d'envoi reprend le bouton primaire du design system. */
.zp-form .elementor-button[type="submit"] {
	font-family: var(--zp-texte);
	font-weight: 600;
	font-size: .95rem;
	padding: .72em 1.4em;
	border-radius: 100px;
	border: 0;
	background: var(--zp-amber);
	color: #3A2708;
	box-shadow: 0 4px 14px rgba(224, 152, 46, .35);
	transition: transform .25s var(--zp-ease), box-shadow .25s;
}

.zp-form .elementor-button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(224, 152, 46, .45);
}

.zp-form .elementor-message {
	font-size: .9rem;
	margin-top: .6rem;
}

.zp-form .elementor-message.elementor-message-success {
	color: var(--zp-green);
}

/* ------------------------------------------------------- Formulaire déroulant */

/*
 * Le panneau est créé par fiche.js, hors de l'arborescence de containers
 * Elementor : sa disposition est donc entièrement maîtrisée ici. La transition
 * sur grid-template-rows permet d'animer vers la hauteur réelle du contenu,
 * ce qu'une max-height chiffrée ne sait pas faire.
 */
.zp-repli {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .38s var(--zp-ease), opacity .28s var(--zp-ease);
}

.zp-repli__interieur {
	overflow: hidden;
	min-height: 0;
}

.zp-colonne.est-ouvert .zp-repli {
	grid-template-rows: 1fr;
	opacity: 1;
}

/*
 * Les deux colonnes ont la même hauteur mais pas le même contenu : sans cette
 * marge, un bouton flotterait plus haut que l'autre.
 */
.zp-colonne .zp-declencheur {
	margin-top: auto;
}

/* Le bouton occupe toute la largeur : il fait office de barre d'accordéon. */
.zp-declencheur .elementor-button {
	width: 100%;
	justify-content: center;
	margin-top: .4rem;
}

.zp-declencheur .elementor-button::after {
	content: "";
	width: .5em;
	height: .5em;
	margin-left: .1em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-.15em) rotate(45deg);
	transition: transform .3s var(--zp-ease);
}

.zp-colonne.est-ouvert .zp-declencheur .elementor-button::after {
	transform: translateY(.1em) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.zp-repli {
		transition: none;
	}
}

/* ------------------------------------------------------- Contact Form 7 */

/*
 * Contact Form 7 n'impose presque aucun style : tout l'habillage est ici, aligné
 * sur les champs du design system.
 */
.zp-cf7__ligne {
	margin-bottom: .9rem;
}

.zp-cf7__ligne--double {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .9rem;
}

.zp-cf7__champ {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	color: var(--zp-ink-soft);
}

/* CF7 enveloppe chaque champ dans un span inline : le passer en bloc évite que
   la largeur de l'input dépende d'un contexte inline. */
.zp-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: .35rem;
}

.zp-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
	display: block;
	width: 100%;
	font-family: var(--zp-texte);
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--zp-ink);
	background: var(--zp-white);
	border: 1px solid var(--zp-line);
	border-radius: var(--zp-r-sm);
	padding: .68em .9em;
	transition: border-color .2s, box-shadow .2s;
}

.zp-form .wpcf7-form-control:focus {
	border-color: var(--zp-blue);
	box-shadow: 0 0 0 3px rgba(46, 115, 172, .16);
	outline: 0;
}

.zp-form .wpcf7-form-control::placeholder {
	color: #9AA9B6;
	font-weight: 400;
}

.zp-form textarea.wpcf7-form-control {
	resize: vertical;
	min-height: 5.5em;
}

.zp-cf7__envoi {
	margin-top: 1.1rem;
}

.zp-form .wpcf7-submit {
	width: 100%;
	font-family: var(--zp-texte);
	font-weight: 600;
	font-size: .95rem;
	padding: .72em 1.4em;
	border-radius: 100px;
	border: 0;
	cursor: pointer;
	background: var(--zp-amber);
	color: #3A2708;
	box-shadow: 0 4px 14px rgba(224, 152, 46, .35);
	transition: transform .25s var(--zp-ease), box-shadow .25s;
}

.zp-form .wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(224, 152, 46, .45);
}

/* Messages de validation. */
.zp-form .wpcf7-not-valid-tip {
	font-size: .8rem;
	font-weight: 500;
	color: #B32D2E;
	margin-top: .3rem;
}

.zp-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: #B32D2E;
}

.zp-form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: .8rem 1rem;
	font-size: .9rem;
	border-radius: var(--zp-r-sm);
	border: 1px solid var(--zp-line);
	background: var(--zp-paper);
}

.zp-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--zp-green);
	background: var(--zp-green-soft);
	color: #2F5C2A;
}

.zp-form .wpcf7-form.invalid .wpcf7-response-output,
.zp-form .wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--zp-amber);
	background: var(--zp-amber-soft);
	color: #6B4A12;
}

.zp-form .wpcf7-spinner {
	margin: .6rem auto 0;
	display: block;
}

@media (max-width: 767px) {
	.zp-cf7__ligne--double {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------- Autres formations */

/*
 * Cartes sans image : aucune formation n'a de vignette, et le modèle n'en
 * utilise pas non plus. La hiérarchie repose donc sur la typographie et sur
 * le liseré coloré, comme les cartes « pilier ».
 */
.zp-autre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .55rem;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	padding-top: 1.9rem;
}

.zp-autre::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 4px;
	width: 100%;
	background: var(--zp-teinte, var(--zp-blue));
}

.zp-autres .zp-autre:nth-child(3n+1) { --zp-teinte: var(--zp-blue); }
.zp-autres .zp-autre:nth-child(3n+2) { --zp-teinte: var(--zp-green); }
.zp-autres .zp-autre:nth-child(3n)   { --zp-teinte: var(--zp-amber); }

.zp-autre h3 {
	font-size: 1.14rem;
	margin: 0;
}

.zp-autre p {
	font-size: .92rem;
	color: var(--zp-ink-soft);
	margin: 0;
	flex: 1;
}

.zp-autre__lien {
	margin-top: .5rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--zp-blue);
	display: inline-flex;
	align-items: center;
	gap: .4em;
}

.zp-autre__lien::after {
	content: "→";
	transition: transform .25s var(--zp-ease);
}

.zp-autre:hover .zp-autre__lien::after {
	transform: translateX(3px);
}