/* ==========================================================================
   PIED DE PAGE

   Feuille du widget « Pied de page » (`CP_Widget_Pied`), posé dans le modèle
   Elementor « Footer » (bibliothèque, affiché sur tout le site). Comme le
   Hero, ce widget gère lui-même sa largeur de contenu : rien ne l'entoure
   dans le modèle, contrairement aux widgets d'une page qui héritent de la
   largeur de la section.
   ========================================================================== */

.cp-pied {
	background: var(--cp-encre);
	color: color-mix(in srgb, var(--cp-fond) 78%, transparent);
	/* En bas : la place du bouton « remonter » d'OceanWP (#scroll-top, fixé
	   40 px de haut à 20 px du bas de l'écran). En fin de page, la barre du bas
	   se trouve exactement sous lui ; entre 1024 et 1280 px de large il
	   recouvrait la mention du badge. 4,75 rem la garde toujours au-dessus. */
	padding-block: clamp(2.5rem, 5vw, 3.5rem) 4.75rem;
}

/* Motif en tête (l'ananas) : un motif de fond, pas un ornement de premier
   plan. Estompé, penché, décalé vers la droite et rogné par le bord haut,
   il passe DERRIÈRE les colonnes : `isolation: isolate` fait du pied le
   contexte d'empilement, le `z-index: -1` reste donc au-dessus de son fond
   sombre mais sous le texte. `overflow: clip` rogne ce qui dépasse du bord
   sans créer de conteneur de défilement. */
.cp-pied--motif {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.cp-pied .cp-pied__motif {
	position: absolute;
	top: calc(var(--cp-pied-motif, 300px) * -.12);
	left: var(--cp-pied-motif-position, 78%);
	z-index: -1;
	width: auto;
	height: var(--cp-pied-motif, 300px);
	max-width: none;
	opacity: var(--cp-pied-motif-opacite, .22);
	transform: translateX(-50%) rotate(14deg);
	pointer-events: none;
}

.cp-pied__conteneur {
	width: min(1240px, 100% - clamp(1.25rem, 4vw, 3rem) * 2);
	margin-inline: auto;
}

.cp-pied__cols {
	display: grid;
	gap: 1.8rem;
	grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}

.cp-pied__logo {
	display: block;
	width: 56px;
	height: auto;
	margin-bottom: .9rem;
	opacity: .9;
}

.cp-pied__adresse {
	font-size: .87rem;
	line-height: 1.7;
	margin: 0;
}

.cp-pied h4 {
	font-family: var(--cp-font-texte);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cp-pied-accent, var(--cp-rose-sur-encre, var(--cp-accent)));
	margin: 0 0 .8rem;
}

.cp-pied ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .87rem;
	line-height: 2;
}

.cp-pied a {
	color: inherit;
	text-decoration: none;
}

.cp-pied a:hover {
	color: var(--cp-fond);
	text-decoration: underline;
}

.cp-pied__bas {
	border-top: 1px solid rgba(255, 255, 255, .16);
	margin-top: 2rem;
	padding-top: 1.1rem;
	/* Trois colonnes égales : copyright à gauche, crédit au centre exact,
	   badge à droite. `minmax (0, 1fr)` et non `1fr`, sans quoi la phrase du
	   badge, plus longue, élargirait sa colonne et décentrerait le crédit. */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 1rem 2rem;
	font-family: var(--cp-font-mono);
	font-size: .68rem;
	color: rgba(255, 255, 255, .6);
	letter-spacing: .05em;
}

.cp-pied__mentions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 2rem;
}

.cp-pied__credit {
	text-align: center;
}

/* Badge qualité (« Excellence 100% La Réunion ») — en bas de pied de page,
   sur toutes les pages du site. */
.cp-pied__badge {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .7rem;
	font-family: var(--cp-font-texte);
	letter-spacing: normal;
	text-align: right;
}

/* Sous 860 px, trois colonnes deviennent trop étroites : on empile, tout
   centré, badge en dernier. */
@media (max-width: 860px) {
	.cp-pied__bas {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}
	.cp-pied__mentions { justify-content: center; }
	.cp-pied__badge {
		flex-direction: column;
		text-align: center;
	}
}

.cp-pied__badge img {
	width: 76px;
	height: 76px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Le crédit : seul lien de la barre du bas, souligné d'office pour qu'il se
   lise comme tel (les liens du pied ne se soulignent qu'au survol). */
.cp-pied__credit a {
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Sur deux lignes, deux lignes de longueur voisine plutôt qu'un mot orphelin. */
.cp-pied__badge span {
	text-wrap: balance;
}