/* =========================================================================
   CDSA – Habillage · Charte graphique du site pour Divi
   -------------------------------------------------------------------------
   Rien ici ne s'applique tout seul : chaque style ne s'active que si l'on
   saisit sa classe dans Divi, onglet « Avancé › ID et classes CSS ›
   Classe CSS » d'une section, d'une ligne, d'une colonne ou d'un module.

   Les règles commencent par #page-container pour passer devant les
   réglages de design faits dans Divi.

   SOMMAIRE
     1. Couleurs et polices (à modifier ici)
     2. Sections ........ cdsa-hero, cdsa-fond-clair
     3. Textes .......... cdsa-surtitre, cdsa-titre, cdsa-sous-titre,
                          cdsa-texte, cdsa-badges, cdsa-lien
     4. Boutons ......... cdsa-bouton, cdsa-bouton-bleu
     5. Cartes .......... cdsa-carte, cdsa-carte-event
     6. Blog ............ cdsa-blog
     7. Réglages propres à certaines pages
     8. Téléphones et tablettes
   ========================================================================= */


/* ---------- 1. COULEURS ET POLICES ---------- */
:root {
	--cdsa-nuit: #000A33;
	--cdsa-jaune: #FFB300;
	--cdsa-jaune-fonce: #8A5F00;   /* jaune lisible sur fond blanc */
	--cdsa-rouge: #E2231A;
	--cdsa-bleu: #1F5FAE;
	--cdsa-texte: #4A5470;
	--cdsa-fond-clair: #F3F5FA;
	--cdsa-rose: #FBE9E9;
	--cdsa-ombre: 0 2px 8px rgba(0, 10, 51, .06);
	--cdsa-ombre-forte: 0 18px 40px rgba(0, 10, 51, .14);
	--cdsa-titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}


/* ---------- 2. SECTIONS ---------- */

/* cdsa-hero : grande bannière avec image de fond.
   Ajoute un voile bleu nuit (plus foncé à gauche, côté texte)
   et un liseré jaune / blanc / rouge en bas. */
#page-container .cdsa-hero {
	position: relative;
	overflow: hidden;
	padding: 64px 0 76px;
	background-color: var(--cdsa-nuit);
}
#page-container .cdsa-hero .et_parallax_bg_wrap,
#page-container .cdsa-hero .et_parallax_bg { z-index: 0; }
#page-container .cdsa-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0, 10, 51, .96) 0%, rgba(0, 10, 51, .86) 45%, rgba(0, 10, 51, .35) 100%);
	pointer-events: none;
}
#page-container .cdsa-hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	height: 6px;
	background: linear-gradient(90deg,
		var(--cdsa-jaune) 0 33.33%,
		#ffffff 33.33% 66.66%,
		var(--cdsa-rouge) 66.66% 100%);
}
#page-container .cdsa-hero > .et_pb_row { position: relative; z-index: 2; }
/* Dans la bannière, le titre et le texte s'étalent sur plus de largeur
   (moins de lignes, donc une bannière moins haute). */
#page-container .cdsa-hero .cdsa-titre { max-width: 1080px; margin-bottom: 18px; }
#page-container .cdsa-hero .cdsa-surtitre { margin-bottom: 12px; }
#page-container .cdsa-hero .cdsa-texte { max-width: 1200px; margin-bottom: 24px; }

/* cdsa-fond-clair : fond gris très clair, pour faire ressortir des cartes blanches.
   !important : passe devant la couleur de fond par défaut des sections Divi. */
#page-container .cdsa-fond-clair {
	background-color: var(--cdsa-fond-clair) !important;
	background-image: none !important;
}


/* ---------- 3. TEXTES ---------- */

/* cdsa-surtitre : petite ligne en capitales au-dessus d'un titre. */
#page-container .cdsa-surtitre,
#page-container .cdsa-surtitre p {
	margin: 0;
	padding: 0;
	color: var(--cdsa-jaune-fonce);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-shadow: none;
}
#page-container .cdsa-hero .cdsa-surtitre,
#page-container .cdsa-hero .cdsa-surtitre p { color: var(--cdsa-jaune); }

/* cdsa-titre : grand titre italique en capitales.
   Astuce : le texte mis en GRAS dans le module s'affiche en couleur
   (jaune sur fond sombre, rouge dans une carte). */
#page-container .cdsa-titre h1,
#page-container .cdsa-titre h2,
#page-container .cdsa-titre h3,
#page-container .cdsa-titre p {
	margin: 0;
	padding: 0;
	font-family: var(--cdsa-titre);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--cdsa-nuit);
	line-height: .95;
	letter-spacing: 0;
	text-shadow: none;
}
#page-container .cdsa-titre h1 { font-size: clamp(36px, 3.8vw, 56px); }
#page-container .cdsa-titre h2,
#page-container .cdsa-titre p { font-size: clamp(36px, 4vw, 56px); }
#page-container .cdsa-titre h3 { font-size: clamp(28px, 3vw, 40px); }
#page-container .cdsa-titre strong { font-weight: 900; color: var(--cdsa-rouge); }
#page-container .cdsa-hero .cdsa-titre h1,
#page-container .cdsa-hero .cdsa-titre h2,
#page-container .cdsa-hero .cdsa-titre p { color: #ffffff; }
#page-container .cdsa-hero .cdsa-titre strong { color: var(--cdsa-jaune); }

/* cdsa-sous-titre : ligne italique bleue (dates, lieu…). */
#page-container .cdsa-sous-titre,
#page-container .cdsa-sous-titre p {
	margin: 0;
	padding: 0;
	font-family: var(--cdsa-titre);
	font-style: italic;
	font-weight: 800;
	font-size: 28px;
	line-height: 1.05;
	color: var(--cdsa-bleu);
}

/* cdsa-texte : paragraphe confortable (blanc cassé dans une bannière). */
#page-container .cdsa-texte,
#page-container .cdsa-texte p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--cdsa-texte);
	text-shadow: none;
	font-style: normal;
}
#page-container .cdsa-texte p { padding-bottom: .8em; }
#page-container .cdsa-texte p:last-child { padding-bottom: 0; }
#page-container .cdsa-texte strong { color: var(--cdsa-nuit); }
#page-container .cdsa-hero .cdsa-texte,
#page-container .cdsa-hero .cdsa-texte p { color: #D5DBEA; }
#page-container .cdsa-hero .cdsa-texte strong { color: #ffffff; }

/* cdsa-badges : pastilles. Dans le module texte (onglet Texte) :
   <span>Événement</span><span>1re édition</span>
   La 1re pastille est rouge, les suivantes bleu nuit. */
#page-container .cdsa-badges .et_pb_text_inner { display: flex; flex-wrap: wrap; gap: 8px; }
#page-container .cdsa-badges span {
	display: inline-block;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--cdsa-nuit);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
}
#page-container .cdsa-badges span:first-child { background: var(--cdsa-rouge); }

/* cdsa-lien : lien en gras avec une flèche (ex. « Toutes les manifestations »). */
#page-container .cdsa-lien a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--cdsa-nuit);
	font-weight: 900;
	font-size: 16px;
	text-decoration: none;
}
#page-container .cdsa-lien a::after {
	content: "→";
	font-size: 1.2em;
	transition: transform .15s ease;
}
#page-container .cdsa-lien a:hover::after { transform: translateX(4px); }
#page-container .cdsa-hero .cdsa-lien a { color: #ffffff; }


/* ---------- 4. BOUTONS ----------
   À saisir dans « Avancé › Classe CSS » du module Bouton. */
#page-container .et_pb_section a.et_pb_button.cdsa-bouton,
#page-container .et_pb_section a.et_pb_button.cdsa-bouton-bleu {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 26px !important; /* neutralise le décalage de l'icône Divi au survol */
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--cdsa-jaune) !important;
	color: var(--cdsa-nuit) !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
	text-shadow: none !important;
	box-shadow: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
/* Les !important passent devant les « styles personnalisés » du bouton Divi */
#page-container .et_pb_section a.et_pb_button.cdsa-bouton-bleu {
	background: var(--cdsa-nuit) !important;
	color: #ffffff !important;
}
#page-container .et_pb_section a.et_pb_button.cdsa-bouton:hover,
#page-container .et_pb_section a.et_pb_button.cdsa-bouton-bleu:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 10, 51, .28);
}
#page-container .et_pb_section a.et_pb_button.cdsa-bouton::after,
#page-container .et_pb_section a.et_pb_button.cdsa-bouton-bleu::after { display: none; }
#page-container .et_pb_section a.et_pb_button.cdsa-bouton:focus-visible,
#page-container .et_pb_section a.et_pb_button.cdsa-bouton-bleu:focus-visible {
	outline: 3px solid var(--cdsa-rouge);
	outline-offset: 3px;
}


/* ---------- 5. CARTES ---------- */

/* cdsa-carte : bloc blanc arrondi (sur une colonne ou un module). */
#page-container .cdsa-carte {
	box-sizing: border-box;
	padding: 26px;
	background: #ffffff;
	border: 0;
	border-radius: 20px;
	box-shadow: var(--cdsa-ombre);
}

/* cdsa-carte-event : LIGNE à deux colonnes mise en avant (championnat…).
   Colonne de gauche : badges, titre, texte, lien.
   Colonne de droite : image (personnage, logo…), posée en bas. */
#page-container .et_pb_row.cdsa-carte-event {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	margin-top: -56px;
	padding: 0;
	background: #ffffff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0, 10, 51, .12);
	transition: transform .2s ease, box-shadow .2s ease;
}
#page-container .et_pb_row.cdsa-carte-event:hover {
	transform: translateY(-4px);
	box-shadow: var(--cdsa-ombre-forte);
}
#page-container .cdsa-carte-event > .et_pb_column {
	box-sizing: border-box;
	margin: 0;
	float: none;
}
#page-container .cdsa-carte-event > .et_pb_column:first-child {
	width: 60%;
	padding: 40px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
#page-container .cdsa-carte-event > .et_pb_column:first-child .et_pb_module { margin-bottom: 0; }
#page-container .cdsa-carte-event > .et_pb_column:last-child {
	width: 40%;
	min-height: 260px;
	padding: 24px 24px 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-color: var(--cdsa-rose);
}
#page-container .cdsa-carte-event > .et_pb_column:last-child .et_pb_module { margin: 0; }
#page-container .cdsa-carte-event .cdsa-texte p { font-size: 16px; }


/* ---------- 6. BLOG ----------
   cdsa-blog : sur un module Blog en mode « Grille ».
   Cartes blanches, image en haut, date en pastille, « Lire la suite → ». */
#page-container .cdsa-blog .et_pb_post {
	display: flex;
	flex-direction: column;
	padding: 0 0 26px;
	margin-bottom: 24px;
	background: #ffffff;
	border: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--cdsa-ombre);
	transition: transform .2s ease, box-shadow .2s ease;
}
#page-container .cdsa-blog .et_pb_post:hover {
	transform: translateY(-4px);
	box-shadow: var(--cdsa-ombre-forte);
}
#page-container .cdsa-blog .et_pb_image_container { margin: 0 0 20px; }
#page-container .cdsa-blog .et_pb_image_container img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
#page-container .cdsa-blog .entry-title,
#page-container .cdsa-blog .post-meta,
#page-container .cdsa-blog .post-content { padding: 0 24px; }
#page-container .cdsa-blog .entry-title {
	order: 3;
	margin: 10px 0 8px;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 900;
}
#page-container .cdsa-blog .entry-title a { color: var(--cdsa-nuit); }
/* La ligne de date : on masque les séparateurs « | » et on garde la date en pastille */
#page-container .cdsa-blog .post-meta { order: 2; font-size: 0; line-height: 1; margin: 0; }
#page-container .cdsa-blog .post-meta .published {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: #FFF1CC;
	color: #6B4A00;
	font-size: 13px;
	font-weight: 700;
}
#page-container .cdsa-blog .post-content { order: 4; }
#page-container .cdsa-blog .post-content,
#page-container .cdsa-blog .post-content p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--cdsa-texte);
}
#page-container .cdsa-blog .more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	color: var(--cdsa-jaune-fonce);
	font-weight: 900;
	font-size: 15px;
	text-transform: none;
}
#page-container .cdsa-blog .more-link::after { content: "→"; }
#page-container .cdsa-blog .pagination a {
	color: var(--cdsa-nuit);
	font-weight: 700;
}


/* ---------- 6 bis. PROCHAINES MANIFESTATIONS ----------
   Cartes générées par le shortcode [cdsa_evenements]. */
#page-container .cdsa-evenements {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 24px;
}
#page-container .cdsa-evenement {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--cdsa-ombre);
	transition: transform .2s ease, box-shadow .2s ease;
}
#page-container .cdsa-evenement:hover {
	transform: translateY(-4px);
	box-shadow: var(--cdsa-ombre-forte);
}
#page-container .cdsa-evenement:focus-visible { outline: 3px solid var(--cdsa-jaune); outline-offset: 3px; }
#page-container .cdsa-evenement__visuel {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cdsa-nuit);
}
#page-container .cdsa-evenement__visuel img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
#page-container .cdsa-evenement__date {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 56px;
	padding: 8px 10px;
	background: #ffffff;
	border-radius: 12px;
	color: var(--cdsa-nuit);
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0, 10, 51, .2);
}
#page-container .cdsa-evenement__jour {
	font-family: var(--cdsa-titre);
	font-style: italic;
	font-weight: 900;
	font-size: 30px;
}
#page-container .cdsa-evenement__mois {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
#page-container .cdsa-evenement__corps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 20px 24px 24px;
}
#page-container .cdsa-evenement__infos { font-size: 13px; font-weight: 700; color: var(--cdsa-jaune-fonce); }
#page-container .cdsa-evenement__titre { font-size: 19px; line-height: 1.3; font-weight: 900; color: var(--cdsa-nuit); }
#page-container .cdsa-evenement__extrait { font-size: 15px; line-height: 1.55; color: var(--cdsa-texte); }
#page-container .cdsa-evenement__suite {
	margin-top: auto;
	padding-top: 6px;
	font-size: 15px;
	font-weight: 900;
	color: var(--cdsa-jaune-fonce);
}
#page-container .cdsa-evenement__suite::after { content: " →"; }
#page-container .cdsa-evenements__vide {
	padding: 24px;
	background: #ffffff;
	border-radius: 20px;
	color: var(--cdsa-texte);
}


/* ---------- 6 ter. RÉSEAUX SOCIAUX ----------
   cdsa-reseaux : sur un module Texte contenant des liens, un par réseau :
   <a class="cdsa-facebook" href="…">Facebook</a>
   <a class="cdsa-instagram" href="…">Instagram</a> */
#page-container .cdsa-reseaux .et_pb_text_inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#page-container .cdsa-reseaux p { display: contents; }
#page-container .cdsa-reseaux a {
	flex: 1 1 140px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 18px;
	border-radius: 12px;
	background: var(--cdsa-nuit);
	color: #ffffff;
	font-weight: 900;
	font-size: 15px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
#page-container .cdsa-reseaux a:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 10, 51, .28);
	color: #ffffff;
}
#page-container .cdsa-reseaux a::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	background: currentColor;
	-webkit-mask: var(--icone) center / contain no-repeat;
	mask: var(--icone) center / contain no-repeat;
}
#page-container .cdsa-reseaux a.cdsa-facebook {
	background: #1877F2;
	--icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8V6.5c0-.8.2-1.5 1.5-1.5H17V2h-2.6C11.6 2 11 3.9 11 6v2H9v3h2v11h3V11h2.4l.6-3z'/%3E%3C/svg%3E");
}
#page-container .cdsa-reseaux a.cdsa-instagram {
	background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF);
	--icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black'/%3E%3C/svg%3E");
}


/* ---------- 7. RÉGLAGES PROPRES À CERTAINES PAGES ---------- */

/* Accueil : masque le bandeau titre orange de l'en-tête.
   Dans le modèle d'en-tête Divi, c'est la 3e section (numérotée 2) :
   0 = logo + Espace adhérent, 1 = menu, 2 = titre de la page.
   Si l'ordre des sections de l'en-tête change, adapter ce numéro.
   Supprimer ce bloc pour faire réapparaître le bandeau. */
body.home .et_pb_section_2_tb_header { display: none; }


/* ---------- 8. TÉLÉPHONES ET TABLETTES ---------- */
@media (max-width: 980px) {
	#page-container .cdsa-hero { padding: 48px 0 60px; }
	#page-container .cdsa-hero::before { background: rgba(0, 10, 51, .86); }
	#page-container .cdsa-carte-event > .et_pb_column:first-child,
	#page-container .cdsa-carte-event > .et_pb_column:last-child { width: 100%; }
	#page-container .cdsa-carte-event > .et_pb_column:first-child { padding: 32px 24px; }
	#page-container .et_pb_row.cdsa-carte-event { margin-top: -40px; }
}
@media (max-width: 600px) {
	#page-container .cdsa-titre h1 { font-size: 34px; }
	#page-container .cdsa-titre h2,
	#page-container .cdsa-titre p { font-size: 32px; }
	#page-container .et_pb_section a.et_pb_button.cdsa-bouton,
	#page-container .et_pb_section a.et_pb_button.cdsa-bouton-bleu {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	#page-container .cdsa-blog .et_pb_post,
	#page-container .cdsa-evenement,
	#page-container .cdsa-reseaux a,
	#page-container .et_pb_row.cdsa-carte-event,
	#page-container .et_pb_section a.et_pb_button.cdsa-bouton,
	#page-container .et_pb_section a.et_pb_button.cdsa-bouton-bleu { transition: none; }
}