/**
 * Composants — boutons pilule Bitelo, cartes, badges, alertes, tooltips,
 * loaders, reveal au scroll.
 */

/* ============================================================
   BOUTONS — style .btn-accent de Bitelo : pilule pleine bleue,
   hover inversé (fond clair, bordure sombre).
   ============================================================ */
.bt-theme .et_pb_button,
.bt-theme #main-content input[type="submit"],
.bt-theme #main-content button[type="submit"],
.bt-theme .button:not(.wp-block-search__button):not(span),
.bt-theme a.read-more-button,
.bt-theme .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 2.9rem;
	padding: 0.6rem 1.8rem !important;
	background: var(--bt-color-accent) !important;
	color: #ffffff !important;
	border: 1px solid var(--bt-color-accent) !important;
	border-radius: var(--bt-radius-pill) !important;
	font-family: var(--bt-font) !important;
	font-weight: 500;
	font-size: var(--bt-font-size-base);
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--bt-transition-normal),
		color var(--bt-transition-normal),
		border-color var(--bt-transition-normal),
		box-shadow var(--bt-transition-normal);
}

/* Survol : bleu plus foncé, le bouton garde sa forme et son contour */
.bt-theme .et_pb_button:hover,
.bt-theme #main-content input[type="submit"]:hover,
.bt-theme #main-content button[type="submit"]:hover,
.bt-theme .button:not(.wp-block-search__button):not(span):hover,
.bt-theme a.read-more-button:hover,
.bt-theme .wp-block-button__link:hover {
	background: var(--bt-color-accent-hover) !important;
	color: #ffffff !important;
	border-color: var(--bt-color-accent-hover) !important;
	box-shadow: var(--bt-shadow-md);
}

.bt-theme .et_pb_button:active,
.bt-theme #main-content input[type="submit"]:active {
	background: var(--bt-color-accent-dark) !important;
	color: #ffffff !important;
	border-color: var(--bt-color-accent-dark) !important;
}

.bt-theme .et_pb_button:disabled,
.bt-theme #main-content input[type="submit"]:disabled,
.bt-theme .button:disabled,
.bt-theme .button.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Icône façon Bitelo : cercle blanc avec flèche bleue après le texte
   (remplace l'icône ETmodules native de Divi qui décale le texte).
   Taille de texte uniforme : les tailles custom des modules (20px+)
   faisaient déborder les pilules de leur colonne. */
body.bt-theme #page-container .et_pb_section .et_pb_button {
	white-space: nowrap;
	max-width: 100%;
	font-size: var(--bt-font-size-base) !important;
	letter-spacing: 0 !important;
}

/* Certains contenus injectent une icône PDF FontAwesome en ::before
   sur les boutons (rendu cassé au milieu du texte) : on la supprime,
   le cercle-flèche fait office d'icône */
body.bt-theme #page-container .et_pb_section .et_pb_button::before {
	content: none !important;
	display: none !important;
}

/* Couleur du texte verrouillée : certains modules définissent des
   couleurs de marque (Bouygues bleu, SFR rouge…) illisibles sur le
   fond bleu — l'ID #page-container bat le CSS généré par le module */
/* .bt-theme répété : certains modules (formulaire de contact) génèrent
   des règles à 1 id + 5 classes avec !important — on doit les dépasser.
   Le padding y est aussi verrouillé : les paddings custom des modules
   (23px|55px…) gonflaient les pilules en production. */
body.bt-theme.bt-theme.bt-theme.bt-theme #page-container .et_pb_section .et_pb_button,
body.bt-theme.bt-theme.bt-theme.bt-theme #page-container .et_pb_button {
	color: #ffffff !important;
	background: var(--bt-color-accent) !important;
	border-width: 1px !important;
	border-color: var(--bt-color-accent) !important;
	padding: 0.6rem 1.8rem !important;
	line-height: 1.2 !important;
}

body.bt-theme.bt-theme.bt-theme.bt-theme #page-container .et_pb_section .et_pb_button:hover,
body.bt-theme.bt-theme.bt-theme.bt-theme #page-container .et_pb_button:hover {
	color: #ffffff !important;
	background: var(--bt-color-accent-hover) !important;
	border-color: var(--bt-color-accent-hover) !important;
}

body.bt-theme #page-container .et_pb_button::after,
body.bt-theme #page-container .et_pb_button:hover::after {
	content: "" !important;
	font-family: inherit !important;
	font-size: inherit !important;
	display: inline-block !important;
	position: static !important;
	flex-shrink: 0 !important;
	width: 1.5em !important;
	height: 1.5em !important;
	min-width: 1.5em !important;
	margin-left: 0.35em !important;
	opacity: 1 !important;
	vertical-align: middle;
	border-radius: 50% !important;
	background-color: #ffffff !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232868ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8h9M8.5 4.5L12 8l-3.5 3.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 58% !important;
	line-height: 1;
	transition: background-color var(--bt-transition-normal);
}

/* Liens PDF : l'icône du cercle devient un téléchargement de document,
   détecté automatiquement sur l'extension du lien */
body.bt-theme #page-container .et_pb_section .et_pb_button[href$=".pdf" i]::after,
body.bt-theme #page-container .et_pb_section .et_pb_button[href$=".PDF"]::after,
body.bt-theme #page-container .et_pb_button[href$=".pdf" i]::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232868ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 3v7M5 7.5L8 10.5l3-3M3.5 13h9'/%3E%3C/svg%3E") !important;
	background-size: 62% !important;
}

/* Variante contour (comme .btn-accent-3 de Bitelo) */
.bt-theme .bt-btn-outline,
.bt-theme .et_pb_button.bt-btn-outline {
	background: transparent !important;
	color: var(--bt-color-text) !important;
	border-color: var(--bt-color-text) !important;
}

.bt-theme .bt-btn-outline:hover {
	background: var(--bt-color-accent) !important;
	color: #ffffff !important;
	border-color: var(--bt-color-accent) !important;
}

/* Variante discrète */
.bt-theme .bt-btn-ghost {
	background: transparent !important;
	color: var(--bt-color-text) !important;
	border-color: transparent !important;
}

.bt-theme .bt-btn-ghost:hover {
	background: var(--bt-color-surface-grey) !important;
	color: var(--bt-color-heading) !important;
}

/* Variante danger */
.bt-theme .bt-btn-danger {
	background: var(--bt-color-danger) !important;
	border-color: var(--bt-color-danger) !important;
	color: #ffffff !important;
}

.bt-theme .bt-btn-danger:hover {
	background: #991b1b !important;
	border-color: #991b1b !important;
	color: #ffffff !important;
}

/* Tailles */
.bt-theme .bt-btn-sm {
	min-height: 2.3rem;
	padding: 0.35rem 1.1rem !important;
	font-size: var(--bt-font-size-sm);
}

.bt-theme .bt-btn-lg {
	min-height: 3.4rem;
	padding: 0.8rem 2.2rem !important;
	font-size: var(--bt-font-size-lg);
}

/* ============================================================
   CARTES — rayon 20px, bordure fine, élévation douce au survol
   ============================================================ */
.bt-theme .bt-card,
.bt-theme .et_pb_extra_column .module,
.bt-theme .posts-blog-feed-module .hentry,
.bt-theme .et_extra_other_module {
	background: var(--bt-color-surface);
	border: 1px solid var(--bt-color-border);
	border-radius: var(--bt-radius-lg);
	box-shadow: var(--bt-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--bt-transition-normal), transform var(--bt-transition-normal);
}

.bt-theme .posts-blog-feed-module .hentry:hover,
.bt-theme .bt-card:hover {
	box-shadow: var(--bt-shadow-md);
	transform: translateY(-4px);
}

/* Zoom subtil des images de cartes */
.bt-theme .hentry .post-thumbnail {
	overflow: hidden;
}

.bt-theme .hentry .post-thumbnail img {
	transition: transform var(--bt-transition-slow);
}

.bt-theme .hentry:hover .post-thumbnail img {
	transform: scale(1.05);
}

/* ============================================================
   BADGES / TAGS — pilules comme les .tags de Bitelo
   ============================================================ */
.bt-theme .bt-badge {
	display: inline-block;
	padding: 0.25rem 0.8rem;
	border-radius: var(--bt-radius-pill);
	font-size: var(--bt-font-size-xs);
	font-weight: 600;
	background: var(--bt-color-surface-alt);
	color: var(--bt-color-accent);
}

.bt-theme .bt-badge-solid {
	background: var(--bt-color-accent);
	color: #ffffff;
}

/* ============================================================
   ALERTES
   ============================================================ */
.bt-theme .bt-alert {
	padding: var(--bt-spacing-md) var(--bt-spacing-lg);
	border-radius: var(--bt-radius-md);
	border: 1px solid transparent;
	margin-bottom: var(--bt-spacing-md);
	font-size: var(--bt-font-size-sm);
}

.bt-theme .bt-alert-success { background: var(--bt-color-success-bg); border-color: var(--bt-color-success); color: var(--bt-color-success); }
.bt-theme .bt-alert-warning { background: var(--bt-color-warning-bg); border-color: var(--bt-color-warning); color: var(--bt-color-warning); }
.bt-theme .bt-alert-danger  { background: var(--bt-color-danger-bg);  border-color: var(--bt-color-danger);  color: var(--bt-color-danger); }
.bt-theme .bt-alert-info    { background: var(--bt-color-info-bg);    border-color: var(--bt-color-info);    color: var(--bt-color-info); }

/* ============================================================
   BANDEAU COOKIES (cookie-law-info)
   ============================================================ */
.bt-theme #cookie-law-info-bar {
	background: var(--bt-color-surface) !important;
	box-shadow: var(--bt-shadow-lg) !important;
	border-top: 3px solid var(--bt-color-accent);
	color: var(--bt-color-text);
}

.bt-theme #wt-cli-privacy-save-btn,
.bt-theme .cli_action_button,
.bt-theme .wt-cli-accept-btn {
	background-color: var(--bt-color-accent) !important;
	border-radius: var(--bt-radius-pill) !important;
	color: #ffffff !important;
	transition: background-color var(--bt-transition-fast);
}

.bt-theme #wt-cli-privacy-save-btn:hover,
.bt-theme .cli_action_button:hover {
	background-color: var(--bt-color-accent-hover) !important;
}

.bt-theme .cli-switch input:checked + .cli-slider {
	background-color: var(--bt-color-accent) !important;
}

/* ============================================================
   TOOLTIPS (attribut data-bt-tooltip)
   ============================================================ */
.bt-theme [data-bt-tooltip] {
	position: relative;
}

.bt-theme [data-bt-tooltip]::after {
	content: attr(data-bt-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--bt-color-dark);
	color: #ffffff;
	font-size: var(--bt-font-size-xs);
	padding: 0.35rem 0.8rem;
	border-radius: var(--bt-radius-pill);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bt-transition-fast), transform var(--bt-transition-fast);
	z-index: 9999;
}

.bt-theme [data-bt-tooltip]:hover::after,
.bt-theme [data-bt-tooltip]:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ============================================================
   LOADER
   ============================================================ */
.bt-theme .bt-loader {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border: 3px solid var(--bt-color-border);
	border-top-color: var(--bt-color-accent);
	border-radius: var(--bt-radius-pill);
	animation: bt-spin 0.8s linear infinite;
}

@keyframes bt-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.bt-theme .bt-loader {
		animation-duration: 2s;
	}
}

/* ============================================================
   ENTRÉE DU BANDEAU HÉRO (premiers textes du slider) :
   montée en fondu au chargement de la page
   ============================================================ */
@keyframes bt-hero-enter {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.bt-theme:not(.bt-no-animations) .et_pb_slider .et_pb_slide_description {
	animation: bt-hero-enter 700ms ease 150ms both;
}

/* Les apparitions au scroll utilisent le moteur du template Bitelo :
   voir animations.css (keyframes Animate.css + adr/adl) et theme.js. */