/* ==========================================================================
   Dorothée Perreau — Améliorations design & responsive
   Thème enfant de "chords". Chargé APRÈS tous les styles parent/enfant
   afin de surcharger proprement, sans modifier le thème parent.
   Breakpoint principal du thème : 797/798px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Base globale : pas de scroll horizontal, images fluides, focus visible
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* Garde-fou : aucun scroll horizontal (ex. menu off-canvas / lecteur audio) */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

/* Accessibilité : contour clair au clavier (n'apparaît pas à la souris) */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Boutons : coins arrondis, transitions douces, léger relief au survol */
.btn,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
	border-radius: 4px;
	transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn:hover,
.button:hover,
input[type="submit"]:hover,
button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(217, 47, 5, .28);
}

/* --------------------------------------------------------------------------
   1. Slider d'accueil : hauteur fluide, image couvrante, voile de lisibilité
   -------------------------------------------------------------------------- */
#home-slider .slides li {
	height: clamp(420px, 66vh, 720px);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Voile dégradé pour garantir la lisibilité du titre sur toute image */
#home-slider .slides li::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.5) 100%);
	z-index: 1;
	pointer-events: none;
}

.slide-content {
	z-index: 3;
	padding-left: 20px;
	padding-right: 20px;
}

.slide-title {
	font-size: clamp(28px, 6vw, 48px);
}

.slide-subtitle {
	font-size: clamp(15px, 2.4vw, 18px);
}

/* --------------------------------------------------------------------------
   2. Titres de section (accueil) : centrés + trait d'accent centré
   -------------------------------------------------------------------------- */
.home-sections .section-title {
	text-align: center;
	font-size: clamp(18px, 3vw, 24px);
}
.home-sections .section-title::after {
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
}

/* --------------------------------------------------------------------------
   3. Cartes d'accueil (encarts + événements) : passage en cartes modernes
      -> image nette en haut, texte dans le flux en dessous, bouton en pied.
      Corrige le texte superposé illisible sur mobile.
   -------------------------------------------------------------------------- */
.home-sections .item {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 0; /* l'espacement vertical est géré par le gap du conteneur */
	background: #1c1c1c;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-sections .item:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 42px rgba(0, 0, 0, .4);
	border-color: rgba(217, 47, 5, .55);
}

/* Vignette : image nette (fini l'opacité 0.5) + léger zoom au survol */
.home-sections .item-thumb {
	overflow: hidden;
}
.home-sections .item-thumb img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 1;
	transition: transform .45s ease;
}
.home-sections .item-hold:hover .item-thumb img,
.home-sections .item-thumb:hover img {
	opacity: 1;
	transform: scale(1.05);
}

/* Bloc texte : ramené dans le flux normal (au lieu de position:absolute) */
.home-sections .item-info {
	position: static;
	top: auto;
	left: auto;
	padding: 20px 22px 6px;
}
/* Neutralise le décalage hérité (.cpt_gallery .item-info { padding-top:75px }) */
.home-sections .cpt_gallery .item-info {
	padding-top: 20px;
}
.home-sections .item-title-intro {
	font-size: clamp(17px, 2.4vw, 22px);
	margin-bottom: 4px;
}
.home-sections .item-title-main {
	font-size: clamp(15px, 2vw, 18px);
	line-height: 1.35;
	color: rgba(255, 255, 255, .85);
}
.home-sections .item-byline {
	margin-top: 6px;
	color: rgba(255, 255, 255, .6);
}

/* Bouton : dans le flux, aligné à gauche, poussé en bas de la carte */
.home-sections .item-btn {
	position: static;
	left: auto;
	bottom: auto;
	display: inline-block;
	margin: 14px 22px 22px;
	margin-top: auto; /* se cale en bas quelle que soit la longueur du texte */
	align-self: flex-start;
}
.home-sections .item .item-hold {
	display: block;
}

/* --------------------------------------------------------------------------
   3a. Mise en page en GRILLE FLEXBOX — on reprend la main sur la disposition.

   Cause des chevauchements sur mobile/tablette :
   - Encarts : le JS matchHeight pose une `height` inline figée (ex. 679px) sur
     le wrapper .col-xs-12 et la 1re carte -> le contenu déborde une fois empilé.
   - Événements : le JS isotope met le conteneur en `height` fixe et les cartes
     en `position:absolute` avec des tops mal calculés -> cartes superposées.

   On neutralise ces styles inline avec `!important` et on dispose les cartes
   en flexbox (hauteurs égales natives, sans dépendre du JS), à tous les écrans.
   Portée limitée à la page d'accueil (.home-sections) : les autres pages
   (galeries, archives) conservent matchHeight / isotope.
   -------------------------------------------------------------------------- */

/* Conteneurs de grille : wrapper des encarts + conteneur masonry des événements */
.home-sections .item-list:not(.list-masonry) > .col-xs-12,
.home-sections .item-list.list-masonry {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	height: auto !important;   /* annule la hauteur figée (matchHeight / isotope) */
	gap: 30px 0;               /* espace vertical entre lignes de cartes */
}

/* Colonnes-cartes : on annule float (Bootstrap), position:absolute (isotope)
   et height inline (matchHeight), puis on les étire en éléments flex. */
.home-sections .item-list:not(.list-masonry) > .col-xs-12 > [class*="col-"],
.home-sections .item-list.list-masonry > [class*="col-"] {
	float: none;
	position: static !important;
	height: auto !important;
	display: flex;
}

/* Événement sans vignette : masque la zone image uniquement si elle est vide
   (un événement avec image affichera bien sa vignette). */
.home-sections .list-masonry .item-thumb:not(:has(img)) {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Section « À propos » (widget split-content) : image couvrante + voile
      Le bloc vidéo (iframe non référencée) a été retiré du template.
   -------------------------------------------------------------------------- */
.apropos-wrap {
	position: relative;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}
.apropos-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.72) 100%);
	z-index: 1;
}
.apropos-wrap > .container {
	position: relative;
	z-index: 2;
}
.apropos-content {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.apropos-content .btn {
	margin-top: 8px;
}
section.widget_ci-split-content h3 {
	font-size: clamp(26px, 4vw, 36px);
}

/* --------------------------------------------------------------------------
   5. Section newsletter / call-to-action : rythme et alignement
   -------------------------------------------------------------------------- */
section.widget_ci-newsletter .ci-newsletter-form label {
	font-size: clamp(18px, 3vw, 24px);
}

/* CTA longs : on autorise le retour à la ligne pour qu'aucun bouton ne
   déborde du cadre, quelle que soit la longueur du texte (parent = nowrap). */
.home-sections .btn,
.apropos-content .btn {
	white-space: normal;
	max-width: 100%;
}

@media (max-width: 797px) {
	section.widget_ci-newsletter .col-md-7 {
		margin-bottom: 18px;
	}
	section.widget_ci-newsletter .btn {
		display: inline-block;
		width: 100%;
		max-width: 340px;
	}
	/* Gros boutons pleine largeur des sections « À propos » : lisibles, contenus */
	.apropos-content .btn {
		display: inline-block;
		width: 100%;
		max-width: 340px;
		line-height: 1.3;
	}
}

/* --------------------------------------------------------------------------
   6. Ajustements mobile fins (<= 797px)
   -------------------------------------------------------------------------- */
@media (max-width: 797px) {
	.home-sections .item-info {
		padding: 18px 18px 4px;
	}
	.home-sections .item-btn {
		margin: 12px 18px 18px;
	}
	.apropos-content {
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   7. Préférence de mouvement réduit (accessibilité)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.home-sections .item:hover,
	.btn:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   8. Footer : éviter le doublon de widgets sur tablette / mobile.

   Sur desktop (>= 798px) la sidebar est affichée SUR LE CÔTÉ : rappeler les
   articles/extraits dans le footer ne gêne pas. Sous 798px, les colonnes du
   thème s'empilent -> la sidebar passe juste AU-DESSUS du footer, ce qui donne
   l'impression de doublons (articles + extraits deux fois de suite).

   On masque donc, uniquement dans ce cas, les colonnes Footer #2 (articles) et
   #3 (extraits) — déjà présentes dans la sidebar. Footer #1 (infos Dorothée
   Perreau), absente de la sidebar, est conservée.

   `:has(.sidebar .widget)` limite la règle aux pages dont la sidebar contient
   RÉELLEMENT des widgets (blog, article, agenda, pages statiques) et épargne
   l'accueil ainsi qu'une sidebar vide (ex. événement sans image ni widget).
   -------------------------------------------------------------------------- */
@media (max-width: 797px) {
	body:has(.sidebar .widget) #footer .col-sm-4:nth-child(2),
	body:has(.sidebar .widget) #footer .col-sm-4:nth-child(3) {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   9. Page Agenda (/agenda/) : mêmes cartes modernes que l'accueil, pour la
      cohérence visuelle + gestion propre des événements sans image à la une.
      La page utilise `.item.cpt_event` dans `.item-list` (sans masonry).
      NB : spécificité renforcée (body.… .item-list .cpt_event …) pour battre
      les règles !important du style.css enfant sur .item-info / .item-btn.
   -------------------------------------------------------------------------- */

/* Grille flexbox : cartes à hauteur égale, sans dépendre de matchHeight */
.post-type-archive-agenda .item-list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 30px 0;
}
.post-type-archive-agenda .item-list > [class*="col-"] {
	float: none;
	display: flex;
	height: auto !important; /* annule la hauteur inline de matchHeight */
}

/* Carte */
.post-type-archive-agenda .item {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 0;
	background: #1c1c1c;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-type-archive-agenda .item:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 42px rgba(0, 0, 0, .4);
	border-color: rgba(217, 47, 5, .55);
}
.post-type-archive-agenda .item-hold {
	display: block;
}

/* Vignette : image nette + zoom au survol ; masquée si l'événement n'a pas d'image */
.post-type-archive-agenda .item-thumb {
	overflow: hidden;
}
.post-type-archive-agenda .item-thumb:not(:has(img)) {
	display: none;
}
.post-type-archive-agenda .item-thumb img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 1;
	transition: transform .45s ease;
}
.post-type-archive-agenda .item-hold:hover .item-thumb img {
	transform: scale(1.05);
}

/* Texte en flux sous l'image (surcharge le position:relative !important hérité) */
body.post-type-archive-agenda .item-list .cpt_event .item-info {
	position: static !important;
	padding: 20px 22px 6px;
	color: #fff;
}

/* Bouton en flux, calé en bas de carte (surcharge les !important hérités) */
body.post-type-archive-agenda .item-list .cpt_event .item-btn {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	display: inline-block;
	margin: 12px 22px 20px;
	margin-top: auto;
	align-self: flex-start;
}