/*
 * `coffret` — le pied entier tient dans une carte, barre du bas comprise.
 *
 * Cadre sous `.ivy-footer--coffret` : tout le CSS du rayon est charge sur la
 * meme page, et une regle non cadree repeindrait les six autres produits selon
 * l'ordre de chargement.
 *
 * Engagement 5 : aucun hexadecimal, replis compris.
 */

.ivy-footer--coffret {
	padding: clamp( 1.5rem, 3vw, 2.5rem ) max( 1rem, calc( ( 100% - 100rem ) / 2 ) );
	background: transparent;
}

/*
 * L'APLAT, ET SON ENCRE, D'UN SEUL GESTE.
 *
 * La racine reste transparente — le sol de section appartient au conteneur
 * Elementor parent, tranche le 24 aout (S4). Ce qui se peint ici est la
 * CARTE, un element propre a ce produit : aucun site livre n'en porte, donc
 * aucun ne se repeint. Et le plan sombre arrive avec l'encre claire qui va
 * avec, comme LIVRAISON.md §3 l'exige — un fond pose sans son encre est la
 * facon dont on livre un pied illisible.
 */
.ivy-footer--coffret .ivy-footer__card {
	padding: clamp( 1.5rem, 3vw, 2rem ) clamp( 1.25rem, 2.5vw, 1.75rem );
	border-radius: var( --ivy-radius-surface, 24px );
	background: var( --ivy-deep, rgb( 27 30 28 ) );
	color: var( --ivy-on-deep, rgb( 245 246 242 ) );
}

.ivy-footer--coffret .ivy-footer__inner {
	display: grid;
	/*
	 * QUATRE pistes egales, et toutes BORNEES par minmax(). Jamais `auto` :
	 * une piste auto face a un minmax( 0, 1fr ) se dimensionne sur son
	 * max-content et prend toute la place, l'autre acceptant de tomber a zero.
	 * Piege deja paye sur le hero kora — 1 045 px contre 0 px.
	 */
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: clamp( 1.5rem, 3vw, 3rem );
	padding-block-end: clamp( 1.5rem, 3vw, 2.5rem );
}

.ivy-footer--coffret :is( .ivy-footer__brand, .ivy-footer__nav, .ivy-footer__contact-block, .ivy-footer__pitch ) {
	min-width: 0;
}

/*
 * LE LOGO PREND SA COLONNE, sans plafond en dur.
 *
 * Les cinq autres produits du rayon bornent l'image a `max-width: 10rem` /
 * `max-height: 2.75rem` : la famille `size` ecrit bien `width` sur le lien,
 * et le plafond de la feuille empeche le reglage d'atteindre l'image. Le
 * controle parait mort. Ici l'image suit son lien, et le lien suit `size`.
 */
.ivy-footer--coffret .ivy-footer__logo {
	display: block;
	inline-size: 70%;
	/*
	 * 44 px de plancher : le lien du logo EST une cible tactile, et la hauteur
	 * d'une image au ratio libre ne la garantit pas. Mesure du 7 septembre sur
	 * la fixture du semis : 43,03 px, soit une cible courte sur un pied par
	 * ailleurs conforme.
	 */
	min-block-size: 2.75rem;
}

.ivy-footer--coffret .ivy-footer__logo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
}

.ivy-footer--coffret .ivy-footer__column-title,
.ivy-footer--coffret .ivy-footer__pitch-title {
	/* Intitules de colonne, colonne editoriale comprise : role h5 (20 px au bureau), decision d'Alex du 26/09/2026. */
	font-size: var( --ivy-font-h5 );
	margin: 0 0 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ivy-footer--coffret .ivy-footer__column-title {
	/* Intitule de colonne : role h5 (20 px au bureau), decision d'Alex du 26/09/2026. */
	font-size: var( --ivy-font-h5 );
	color: currentColor;
}

.ivy-footer--coffret .ivy-footer__nav > .ivy-footer__menu,
.ivy-footer--coffret .ivy-footer__contact,
.ivy-footer--coffret .ivy-footer__social {
	display: grid;
	/* 8 px de plancher entre deux cibles cliquables (S2). */
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivy-footer--coffret .ivy-footer__nav {
	color: var( --ivy-menu-color, currentColor );
}

.ivy-footer--coffret .ivy-footer__contact {
	color: var( --ivy-contact-color, currentColor );
	font-style: normal;
}

/*
 * `inherit`, et surtout pas une couleur a soi : ces liens sont DANS les
 * parties `menu` et `contact`, et une declaration explicite ici couperait
 * l'heritage de leur propriete personnalisee. Le reglage du client
 * s'arreterait au bloc et n'atteindrait jamais le lien — piege deja paye.
 */
.ivy-footer--coffret :is( .ivy-footer__menu a, .ivy-footer__contact a, .ivy-footer__contact-text ) {
	display: inline-flex;
	align-items: center;
	/* 44 px : le plancher de cible tactile retenu partout dans ce depot. */
	min-height: 2.75rem;
	color: inherit;
	line-height: 1.4;
	text-decoration: none;
}

.ivy-footer--coffret :is( .ivy-footer__menu a, .ivy-footer__contact a ):hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.ivy-footer--coffret .ivy-footer__contact-line {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/*
 * LE DISQUE des lignes de contact — le geste que le rayon n'avait pas.
 *
 * Les cinq autres produits rendent un glyphe nu : leur partie `contact_icon`
 * ne porte ni `background` ni `border`, donc aucun fond ne s'y pose. Ici la
 * partie porte les deux ; la feuille ne decide que de la GEOMETRIE du disque,
 * et son repli est un voile neutre, jamais une couleur de marque.
 */
.ivy-footer--coffret .ivy-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background: rgb( 255 255 255 / 0.08 );
	color: var( --ivy-contact_icon-color, currentColor );
}

.ivy-footer--coffret .ivy-footer__contact-icon :is( svg, i ) {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	/* Un role, jamais une taille absolue : la garde du barème typographique
	 * refuse tout font-size qui n'en lit pas un. */
	font-size: var( --ivy-font-body );
	/*
	 * `fill`, ET PAS SEULEMENT `color`. Le <svg> d'Elementor peint par `fill`,
	 * qui ne suit pas `color` : sans cette ligne le reglage de couleur de la
	 * partie s'applique bien — mesure du 8 septembre, `color` passait de
	 * rgb(84,89,95) a rgb(2,0,0) au survol — et le glyphe restait NOIR dans
	 * les deux etats. C'est la meme classe de defaut que S1, qui portait sur
	 * la taille du meme <svg>.
	 */
	fill: currentColor;
}

.ivy-footer--coffret .ivy-footer__social-block {
	margin-block-start: 1.5rem;
}

.ivy-footer--coffret .ivy-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ivy-footer--coffret .ivy-footer__social a {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background: rgb( 255 255 255 / 0.08 );
	/* Le lien est DANS la partie `social` : il suit sa couleur. */
	color: var( --ivy-social-color, currentColor );
	text-decoration: none;
	transition: transform calc( 180ms * var( --ivy-motion, 1 ) ) ease;
}

/*
 * S1 : le glyphe est dimensionne PAR LE RAYON. Le <svg class="e-font-icon-svg">
 * d'Elementor sort sans width ni height, et aucune regle du coeur ne le
 * dimensionne — cinq pieds sur six ont servi des reseaux a 0 x 0 px.
 */
.ivy-footer--coffret .ivy-footer__social svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	fill: currentColor;
}

.ivy-footer--coffret .ivy-footer__social a:hover {
	transform: translateY( -2px );
}

.ivy-footer--coffret .ivy-footer__pitch-text {
	margin: 0;
	color: var( --ivy-text-color, var( --ivy-on-deep-muted, rgb( 190 195 186 ) ) );
	font-size: var( --ivy-font-body );
	line-height: 1.55;
}

.ivy-footer--coffret .ivy-footer__pitch-title {
	color: var( --ivy-title-color, currentColor );
}

.ivy-footer--coffret .ivy-footer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin-block-start: 1.25rem;
	padding: 0.5rem 1.5rem;
	border-radius: var( --ivy-radius-action, 999px );
	background: var( --ivy-on-deep, rgb( 245 246 242 ) );
	color: var( --ivy-cta-color, var( --ivy-deep, rgb( 27 30 28 ) ) );
	line-height: 1.3;
	text-decoration: none;
	transition: transform calc( 180ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-footer--coffret .ivy-footer__cta:hover {
	transform: translateY( -2px );
}

.ivy-footer--coffret .ivy-footer__nav .ivy-footer__column-title {
	color: var( --ivy-nav_title-color, currentColor );
}

.ivy-footer--coffret .ivy-footer__contact-block > .ivy-footer__column-title {
	color: var( --ivy-contact_title-color, currentColor );
}

.ivy-footer--coffret .ivy-footer__social-block .ivy-footer__column-title {
	color: var( --ivy-social_title-color, currentColor );
}

.ivy-footer--coffret :is( a, .ivy-footer__cta ):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ivy-footer--coffret .ivy-footer__rule {
	border-block-start: 1px solid rgb( 255 255 255 / 0.16 );
}

/*
 * La barre du bas n'est PAS habillee ici : elle appartient au fragment
 * footer_bottom, qui livre sa feuille avec son balisage. Cette composition ne
 * regle que sa GEOMETRIE — l'ecart au filet, et les trois tiers egaux qui
 * font la silhouette du produit.
 */
.ivy-footer--coffret .ivy-footer__bottom {
	padding-block-start: 1.25rem;
}

.ivy-footer--coffret .ivy-footer__bottom > * {
	flex: 1 1 0;
}

/*
 * La signature tient la DROITE de son tiers — mais seulement tant qu'il y a
 * trois tiers. Sous 767 px le fragment empile ses trois blocs et les aligne au
 * bord de depart ; une signature poussee a droite y devenait le seul bloc
 * decale de la colonne. Mesure du 7 septembre a 390 px.
 */
@media ( min-width: 768px ) {
	.ivy-footer--coffret .ivy-footer__bottom .ivy-footer__agency {
		justify-content: flex-end;
	}
}

@media ( max-width: 900px ) {
	.ivy-footer--coffret .ivy-footer__inner {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 640px ) {
	.ivy-footer--coffret .ivy-footer__inner {
		grid-template-columns: minmax( 0, 1fr );
		gap: 2rem;
	}

	.ivy-footer--coffret .ivy-footer__logo {
		inline-size: 50%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ivy-footer--coffret :is( .ivy-footer__social a, .ivy-footer__cta ) {
		transition: none;
	}
}