/* ==========================================================================
   Composants réutilisables, chargés sur tout le site :
   - boutons (v1.9.14) : 2 types + 1 variante, voir plus bas ;
   - cartes .cesma-cards > .cesma-card (accueil « Activités du club »,
     page Contacts…). Variante .cesma-cards--3 : 3 par ligne.
   ========================================================================== */
/* --- Activités du club : 4 cartes --- */
.cesma-cards {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.cesma-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0 !important;
	padding: 22px 18px 18px;
	border-radius: 16px;
	background: #EEF6FB;
	transition: transform .2s ease, box-shadow .2s ease;
}
.cesma-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(11, 53, 86, .16); }
.cesma-card .cesma-card__img { margin: 0 0 12px; }
.cesma-card .cesma-card__img img {
	display: block;
	width: auto;
	height: 140px; /* pingouins harmonisés : même taille de corps (images/pingouins/) */
	max-width: 100%;
	object-fit: contain;
	box-shadow: none !important;
}
.cesma-card .cesma-card__title {
	margin: 0 0 8px !important;
	font-family: 'Poppins', Arial, sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
}
.cesma-card .cesma-card__title a { color: #0B3556 !important; text-decoration: none !important; }
.cesma-card .cesma-card__text { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #1F2D33; flex: 1 1 auto; }
.cesma-card .cesma-card__more { margin: 0; }
.cesma-card .cesma-card__more a {
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	color: #17808B !important;
	text-decoration: none !important;
}
.cesma-card .cesma-card__more a:hover,
.cesma-card .cesma-card__title a:hover { color: #10659C !important; text-decoration: underline !important; }


/* Bouton dans une carte (Contacts) */
.cesma-card .wp-block-buttons { justify-content: center; margin-top: auto; }
.cesma-card .wp-block-button .wp-block-button__link { font-size: 15px; padding: 10px 22px !important; }

/* 3 cartes par ligne */
.cesma-cards.cesma-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media screen and (max-width: 1024px) {
	.cesma-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 900px) {
	.cesma-cards.cesma-cards--3 { grid-template-columns: 1fr; }
	.cesma-cards--3 .cesma-card { flex-direction: row; flex-wrap: wrap; text-align: left; align-items: center; column-gap: 16px; }
	.cesma-cards--3 .cesma-card .cesma-card__img { margin: 0; flex: 0 0 auto; }
	.cesma-cards--3 .cesma-card .cesma-card__img img { height: 96px; }
	.cesma-cards--3 .cesma-card > :not(.cesma-card__img) { flex: 1 1 calc(100% - 110px); }
	.cesma-cards--3 .cesma-card .wp-block-buttons { justify-content: flex-start; flex-basis: 100%; margin-top: 8px; }
}
@media screen and (max-width: 768px) {
	.cesma-cards { gap: 12px; }
	.cesma-card { padding: 16px 10px 14px; }
	.cesma-card .cesma-card__img img { height: 100px; }
	.cesma-card .cesma-card__title { font-size: 17px !important; }
	.cesma-card .cesma-card__text { font-size: 13px; }
	.cesma-cards--3 .cesma-card { padding: 16px; }
	.cesma-cards--3 .cesma-card .cesma-card__img img { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
	.cesma-card { transition: none; }
	.cesma-card:hover { transform: none; }
}

/* --- Mini-tuiles (v1.9.18) : page Plongée – Formations ---
   Badge rond (N1…N5, Ini, MF1, Nx), titre, une phrase, « Découvrir → ».
   Grille de 5 colonnes (une par niveau du cursus ; 3 en tablette, 2 en
   smartphone), toutes les tuiles de même largeur ;
   toute la tuile est cliquable (lien du titre étendu). */
.cesma-cards.cesma-cards--mini {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 8px;
}
.cesma-card.cesma-card--mini {
	position: relative;
	padding: 14px 10px 12px;
	border-radius: 14px;
}
.cesma-card--mini .cesma-card__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin: 0 0 8px !important;
	border-radius: 50%;
	background: #0B3556;
	color: #FFFFFF;
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}
.cesma-card--mini:hover .cesma-card__badge { background: #FFB400; color: #0B3556; }
.cesma-card.cesma-card--mini .cesma-card__title { font-size: 16px !important; margin: 0 0 6px !important; }
.cesma-card--mini .cesma-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cesma-card--mini .cesma-card__text { font-size: 13px; line-height: 1.45; margin: 0 0 8px; }
.cesma-card--mini .cesma-card__text a { position: relative; z-index: 1; } /* lien codep 33 reste cliquable */
.cesma-card--mini .cesma-card__more a { font-size: 13px; }
/* Tuile informative, sans lien (ex. RIFA-Apnée, v1.9.19) : pas d'effet de survol « cliquable » */
.cesma-card.cesma-card--mini:not(:has(.cesma-card__title a)):hover { transform: none; box-shadow: none; }
.cesma-card--mini:not(:has(.cesma-card__title a)):hover .cesma-card__badge { background: #0B3556; color: #FFFFFF; }
@media screen and (max-width: 1024px) {
	.cesma-cards.cesma-cards--mini { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media screen and (max-width: 900px) {
	.cesma-cards.cesma-cards--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 560px) {
	.cesma-cards.cesma-cards--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.cesma-card.cesma-card--mini { padding: 12px 8px 10px; }
}

/* ==========================================================================
   Boutons (v1.9.14) — 2 types seulement, ceux de la bannière d'accueil,
   et 1 variante :
   1. PLEIN JAUNE (« Adhérer ») — par défaut : tout bloc Bouton sans style
      particulier, classe .cesma-btn-yellow, ancien bouton .cesma-button-cta
      (Yapla, Le Local), boutons d'envoi des formulaires (Contact Form 7,
      espace membre).
   2. CONTOUR BLANC (« Nous contacter ») — classe .cesma-btn-light, sur fond
      foncé (bannière d'accueil).
   Variante : CONTOUR BLEU NUIT — style « Contour » de l'éditeur
      (.is-style-outline), même bouton que 2 pour les fonds clairs.
   Les !important battent les règles en ligne du thème parent (survol
   --responsive-global-palette7, couleur des liens de style.css).
   ========================================================================== */
.wp-block-button .wp-block-button__link,
a.cesma-button-cta,
.wpcf7 input.wpcf7-submit,
input.swpm-submit-btn-default-style {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 12px 28px !important;   /* bat les réglages en ligne de l'éditeur */
	border: 2px solid transparent;
	border-radius: 999px !important;
	font-family: 'Poppins', Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}

/* 1. Plein jaune */
.wp-block-button:not(.cesma-btn-light):not(.is-style-outline) .wp-block-button__link,
a.cesma-button-cta,
.wpcf7 input.wpcf7-submit,
input.swpm-submit-btn-default-style {
	background: #FFB400 !important;
	border-color: #FFB400 !important;
	color: #0B3556 !important;
}
.wp-block-button:not(.cesma-btn-light):not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.cesma-btn-light):not(.is-style-outline) .wp-block-button__link:focus-visible,
a.cesma-button-cta:hover,
a.cesma-button-cta:focus-visible,
.wpcf7 input.wpcf7-submit:hover,
.wpcf7 input.wpcf7-submit:focus-visible,
input.swpm-submit-btn-default-style:hover,
input.swpm-submit-btn-default-style:focus-visible {
	background: #FFC733 !important;
	border-color: #FFC733 !important;
	color: #0B3556 !important;
	transform: translateY(-1px);
}
a.cesma-button-cta { margin-top: 10px; }
.cesma-button-cta__logo { height: 24px; width: auto; display: block; }

/* 2. Contour blanc (fond foncé) */
.wp-block-button.cesma-btn-light .wp-block-button__link {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .85) !important;
	color: #FFFFFF !important;
}
.wp-block-button.cesma-btn-light .wp-block-button__link:hover,
.wp-block-button.cesma-btn-light .wp-block-button__link:focus-visible {
	background: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: #0B3556 !important;
}

/* Variante : contour bleu nuit (fond clair) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border-color: #0B3556 !important;
	color: #0B3556 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: #0B3556 !important;
	border-color: #0B3556 !important;
	color: #FFFFFF !important;
}

/* Flux Instagram (Smash Balloon, v1.9.15) : ses boutons ont leurs propres
   couleurs (style en ligne) → rattachés au système ci-dessus.
   « Suivre sur Instagram » = plein jaune ; « Charger plus » = contour bleu nuit. */
#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram #sbi_load .sbi_follow_btn a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 6px !important;
	padding: 12px 28px !important;
	border: 2px solid transparent !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	font-family: 'Poppins', Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-decoration: none !important;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
#sb_instagram #sbi_load .sbi_follow_btn a {
	background: #FFB400 !important;
	border-color: #FFB400 !important;
	color: #0B3556 !important;
}
#sb_instagram #sbi_load .sbi_follow_btn a:hover,
#sb_instagram #sbi_load .sbi_follow_btn a:focus-visible {
	background: #FFC733 !important;
	border-color: #FFC733 !important;
	color: #0B3556 !important;
	transform: translateY(-1px);
}
#sb_instagram #sbi_load .sbi_load_btn {
	background: transparent !important;
	border-color: #0B3556 !important;
	color: #0B3556 !important;
}
#sb_instagram #sbi_load .sbi_load_btn:hover,
#sb_instagram #sbi_load .sbi_load_btn:focus-visible {
	background: #0B3556 !important;
	color: #FFFFFF !important;
}
#sb_instagram #sbi_load .sbi_follow_btn a svg { width: 18px; height: 18px; margin: 0 !important; }
#sb_instagram #sbi_load .sbi_load_btn .sbi_btn_text { color: inherit !important; }

/* Bouton loupe du formulaire de recherche (page 404, résultats) : plein jaune (v1.9.16) */
.search-form .search-submit {
	background: #FFB400 !important;
	border: 2px solid #FFB400 !important;
	color: #0B3556 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer;
}
.search-form .search-submit:hover,
.search-form .search-submit:focus-visible {
	background: #FFC733 !important;
	border-color: #FFC733 !important;
	color: #0B3556 !important;
}
.search-form .search-submit svg { fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
	#sb_instagram #sbi_load .sbi_load_btn,
	#sb_instagram #sbi_load .sbi_follow_btn a { transition: none; transform: none !important; }
	.wp-block-button .wp-block-button__link,
	a.cesma-button-cta,
	.wpcf7 input.wpcf7-submit,
	input.swpm-submit-btn-default-style { transition: none; transform: none !important; }
}