/* CLC Boutons — bloc Bouton (image + texte) et bloc Appel à l'action.
   Couleurs personnalisables via variables CSS (--clc-bg, --clc-text,
   --clc-text-soft, --clc-accent). */

/* ---------- Bouton CLC (image + texte) ---------- */

.clc-bouton {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px 24px;
	border: 2.5px solid var(--clc-text, #111);
	/* 2.7.0 : rayon et taille de texte deviennent des valeurs par défaut de
	   la feuille de style. Les panneaux natifs Bordure et Typographie les
	   surchargent en ligne quand ils sont utilisés ; sans réglage, le bouton
	   garde exactement sa géométrie d'origine. */
	border-radius: 0 18px 18px 18px;
	font-size: 18px;
	background: var(--clc-bg, #fff);
	color: var(--clc-text, #111);
	font-family: var(--clc-font, Arial, sans-serif);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.clc-bouton:visited {
	color: var(--clc-text, #111);
}

.clc-bouton:hover,
.clc-bouton:focus {
	background: var(--clc-accent, #f5d000);
	color: var(--clc-text, #111);
}

/* Dispositions */
.clc-bouton-vertical-inverse {
	flex-direction: column-reverse;
}

.clc-bouton-horizontal {
	flex-direction: row;
}

.clc-bouton-horizontal-inverse {
	flex-direction: row-reverse;
}

/* L'image (ou l'icône) occupe un carré invisible de côté --clc-img-w, la
   taille réglée dans le bloc. Une image rectangulaire s'y inscrit entière,
   centrée, sans déformation : deux boutons voisins gardent le même gabarit
   et la même ligne de texte quel que soit le rapport de forme des images. */
.clc-bouton-img {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--clc-img-w, 64px);
	height: var(--clc-img-w, 64px);
}

.clc-bouton-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* --clc-btn-text n'est plus écrite par le bloc depuis la 2.7.0, mais elle
   reste lue : un bouton enregistré avant la migration, et pas encore rouvert
   dans l'éditeur, conserve ainsi sa taille de texte. Une fois migré, la
   variable disparaît, 1em prend le relais et la taille suit le panneau
   Typographie du bloc. */
.clc-bouton-text {
	font-size: var(--clc-btn-text, 1em);
	line-height: 1.3;
}

/* Largeur fixe ou pleine : le bouton devient un bloc */
.clc-bouton.clc-w-bloc {
	display: flex;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Ombres */
.clc-shadow-douce {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

.clc-shadow-dure {
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.85);
}

/* ---------- Appel à l'action CLC (style .btn2 d'origine) ---------- */

.clc-cta {
	border: 2.5px solid var(--clc-text, #111);
	border-radius: 0 40px 0 40px;
	padding: 28px 24px 20px;
	text-align: center;
	text-decoration: none;
	color: var(--clc-text, #111);
	background: var(--clc-bg, #fff);
	/* 2.8.0 : base de référence des quatre lignes, exprimées en em les unes
	   par rapport à elle. Le panneau Typographie natif la surcharge, et tout
	   le bloc se redimensionne d'un seul réglage au lieu de quatre tailles
	   fixes indépendantes. */
	font-size: 18px;
	display: block;
	cursor: pointer;
	transition: background 0.2s, transform 0.25s ease, box-shadow 0.25s ease;
	max-width: 280px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--clc-font, Arial, sans-serif);
}

.clc-cta:visited {
	color: var(--clc-text, #111);
}

.clc-cta:hover,
.clc-cta:focus {
	background: var(--clc-accent, #f5d000);
	color: var(--clc-text, #111);
}

/* Animations au survol (CTA et Bouton).
   --clc-lift : hauteur du soulèvement ; --clc-shadow : couleur de l'ombre. */
.clc-lift-haut:hover,
.clc-lift-haut:focus,
.clc-cta-lift:hover,
.clc-cta-lift:focus {
	transform: translateY(calc(-1 * var(--clc-lift, 3px)));
	box-shadow: 0 calc(var(--clc-lift, 3px) * 2 + 4px) 18px var(--clc-shadow, rgba(0, 0, 0, 0.2));
}

/* 45° : le bouton monte vers le haut-gauche, l'ombre s'étire en bas-droite
   (dans l'axe de l'ombre signature CLC). */
.clc-lift-diag:hover,
.clc-lift-diag:focus {
	transform: translate(calc(-1 * var(--clc-lift, 3px)), calc(-1 * var(--clc-lift, 3px)));
	box-shadow: calc(var(--clc-lift, 3px) + 3px) calc(var(--clc-lift, 3px) + 3px) 0 0 var(--clc-shadow, rgba(0, 0, 0, 0.22));
}

.clc-lift-zoom:hover,
.clc-lift-zoom:focus {
	transform: scale(1.04);
	box-shadow: 0 8px 18px var(--clc-shadow, rgba(0, 0, 0, 0.18));
}

/* Avec l'ombre dure, l'ombre reste franche et s'étire. */
.clc-shadow-dure.clc-lift-diag:hover,
.clc-shadow-dure.clc-lift-diag:focus {
	box-shadow: calc(6px + var(--clc-lift, 3px)) calc(6px + var(--clc-lift, 3px)) 0 0 var(--clc-shadow, rgba(0, 0, 0, 0.85));
}

.clc-shadow-dure.clc-lift-haut:hover,
.clc-shadow-dure.clc-lift-haut:focus {
	box-shadow: 6px calc(6px + var(--clc-lift, 3px) * 2) 0 0 var(--clc-shadow, rgba(0, 0, 0, 0.85));
}

.clc-shadow-dure.clc-lift-zoom:hover,
.clc-shadow-dure.clc-lift-zoom:focus {
	box-shadow: 8px 8px 0 0 var(--clc-shadow, rgba(0, 0, 0, 0.85));
}

/* Icône du bouton image + texte */
.clc-bouton-icon {
	display: block;
	line-height: 1;
	color: currentColor;
}

/* Icône ou image en tête du CTA */
.clc-cta-icon {
	display: block;
	margin: 0 auto 10px;
	line-height: 1;
	color: var(--clc-text, #111);
}

.clc-cta-imgwrap {
	display: block;
	margin: 0 0 10px;
}

.clc-cta-imgwrap img {
	display: block;
	margin: 0 auto;
	height: auto;
}

.clc-cta-top {
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.clc-cta-main {
	font-size: 2em;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 10px;
	white-space: nowrap;
}

.clc-cta-sub {
	font-size: 0.72em;
	color: var(--clc-text-soft, #555);
	margin-bottom: 18px;
}

.clc-cta-btn {
	display: inline-block;
	background: var(--clc-text, #111);
	color: var(--clc-bg, #fff);
	font-size: 0.61em;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 7px 18px;
	border-radius: 30px;
	text-transform: uppercase;
}

/* Largeurs */
.clc-cta.clc-w-adaptatif {
	max-width: none;
	width: auto;
	display: inline-block;
}

.clc-cta.clc-w-pleine {
	max-width: none;
}

@media (max-width: 768px) {
	.clc-cta {
		max-width: 100%;
		padding: 24px 16px 18px;
	}

	.clc-cta-main {
		font-size: 1.67em;
	}
}

/* ---------- Compteur CLC ---------- */

.clc-compteur {
	display: block;
	text-align: center;
	font-family: var(--clc-font, Arial, sans-serif);
	color: var(--clc-text, #111);
	box-sizing: border-box;
	max-width: 280px;
	margin: 0 auto;
	width: 100%;
}

.clc-compteur-carte {
	border: 2.5px solid var(--clc-text, #111);
	border-radius: 0 40px 0 40px;
	background: var(--clc-bg, #fff);
	padding: 28px 24px 20px;
}

.clc-compteur.clc-w-adaptatif {
	max-width: none;
	width: auto;
	display: inline-block;
}

.clc-compteur.clc-w-pleine {
	max-width: none;
}

.clc-cpt-top {
	font-size: var(--clc-cpt-top-size, 14px);
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 8px;
}

.clc-cpt-number {
	font-size: var(--clc-cpt-size, 48px);
	font-weight: 900;
	line-height: 1;
	color: var(--clc-text, #111);
	display: flex;
	justify-content: center;
	align-items: baseline;
}

/* Odomètre : chaque chiffre est une fenêtre sur un rouleau 0-9. */
.clc-cpt-digit {
	display: inline-block;
	width: 1ch;
	height: 1em;
	overflow: hidden;
	transition: width 0.3s ease, opacity 0.3s ease;
}

.clc-cpt-digit.clc-cpt-zero {
	width: 0;
	opacity: 0;
}

.clc-cpt-strip {
	display: flex;
	flex-direction: column;
	transition: transform 0.45s cubic-bezier(0.33, 0.1, 0.25, 1);
}

.clc-cpt-strip span {
	height: 1em;
	line-height: 1;
}

.clc-cpt-suffix {
	margin-left: 3px;
}

.clc-cpt-label {
	font-size: var(--clc-cpt-label-size, 16px);
	color: var(--clc-text-soft, #555);
	margin-top: 10px;
}

/* ---------- Alignement du texte ---------- */

.clc-align-left { text-align: left; }
.clc-align-center { text-align: center; }
.clc-align-right { text-align: right; }

/* ---------- Alignement du bloc dans son conteneur ---------- */

.clc-bouton.clc-pos-left,
.clc-bouton.clc-pos-center,
.clc-bouton.clc-pos-right {
	display: flex;
}

.clc-bouton.clc-pos-left:not(.clc-w-bloc),
.clc-bouton.clc-pos-center:not(.clc-w-bloc),
.clc-bouton.clc-pos-right:not(.clc-w-bloc) {
	width: fit-content;
}

.clc-cta.clc-w-adaptatif.clc-pos-left,
.clc-cta.clc-w-adaptatif.clc-pos-center,
.clc-cta.clc-w-adaptatif.clc-pos-right,
.clc-compteur.clc-w-adaptatif.clc-pos-left,
.clc-compteur.clc-w-adaptatif.clc-pos-center,
.clc-compteur.clc-w-adaptatif.clc-pos-right {
	display: block;
	width: fit-content;
}

.clc-bouton.clc-pos-left,
.clc-cta.clc-pos-left,
.clc-compteur.clc-pos-left {
	margin-left: 0;
	margin-right: auto;
}

.clc-bouton.clc-pos-center,
.clc-cta.clc-pos-center,
.clc-compteur.clc-pos-center {
	margin-left: auto;
	margin-right: auto;
}

.clc-bouton.clc-pos-right,
.clc-cta.clc-pos-right,
.clc-compteur.clc-pos-right {
	margin-left: auto;
	margin-right: 0;
}

/* Alignement du texte visible aussi dans le Bouton (contenu flex) */
.clc-bouton.clc-align-left {
	text-align: left;
	align-items: flex-start;
}

.clc-bouton.clc-align-right {
	text-align: right;
	align-items: flex-end;
}