/* ==========================================================================
   Cartes "Nos cours de danse" (widget Classes v2 - style dance-box2)
   - Carte entièrement cliquable (redirige vers le lien du titre)
   - Cartes de même hauteur, quel que soit la longueur du texte
   - Responsive (héritage des colonnes Bootstrap du widget)
   ========================================================================== */

/* La ligne Bootstrap (.row) est déjà en flex avec align-items: stretch,
   donc chaque colonne a la hauteur de la plus grande. On propage cette
   hauteur jusqu'à la carte pour que toutes les cartes soient identiques. */
.dance-box2-wrap,
.dance-box2 {
	height: 100%;
}

.dance-box2 {
	display: flex;
	flex-direction: column;
}

.dance-box2 .box-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Le texte prend l'espace disponible pour garder les titres alignés
   entre les cartes, quelle que soit la longueur de la description. */
.dance-box2 .box-text {
	flex: 1 1 auto;
}

.dance-box2.dance-box2--clickable {
	cursor: pointer;
}

@media (max-width: 767px) {
	.dance-box2 {
		height: auto;
	}
}

/* ==========================================================================
   Cartes "Vos Enseignantes" (widget Team v2 - .team-box3)
   Le widget est un carousel Slick. Slick calcule la largeur des cartes en
   pixels via JS ; si ce calcul rate (page lente, chargement des polices/
   images après l'init, etc.) les cartes retombent sur la mise en page
   Bootstrap brute qui n'a pas de classe de colonne pour le mobile et se
   réduisent alors à la taille de leur contenu (cartes minuscules, côte à
   côte). On neutralise le carousel (voir custom.js) et on affiche les
   enseignantes dans une grille CSS simple, fiable et responsive.
   ========================================================================== */
.elementor-widget-danzateamv2 .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

/* Le CSS de Slick masque .slick-track/.slick-slide par défaut et ne les
   révèle qu'une fois le carousel initialisé par JS (voir custom.js). Si
   cette initialisation échoue (script bloqué, erreur, navigateur qui
   diffère), les enseignantes restent invisibles indéfiniment. On force
   l'affichage ici, indépendamment de l'état de Slick, puisqu'on affiche
   de toute façon une grille CSS à la place du carousel. */
.elementor-widget-danzateamv2 .slick-track,
.elementor-widget-danzateamv2 .slick-slide {
	visibility: visible !important;
	display: block !important;
}

.elementor-widget-danzateamv2 .row > div {
	width: 100%;
}

.elementor-widget-danzateamv2 .team-box3 {
	height: 100%;
	max-width: 360px;
	margin: 0 auto;
}

.team-box3.team-box3--clickable {
	cursor: pointer;
}

@media (min-width: 768px) {
	.elementor-widget-danzateamv2 .row > div {
		width: calc(50% - 15px);
	}

	.elementor-widget-danzateamv2 .team-box3 {
		max-width: none;
	}
}

@media (min-width: 1200px) {
	.elementor-widget-danzateamv2 .row > div {
		width: calc(33.333% - 20px);
	}
}

/* ==========================================================================
   Premier tableau d'horaires "Nos horaires" (widget danzaschedule)
   Le CSS mobile personnalisé de ce widget (Elementor > CSS personnalisé de
   l'élément) transforme les lignes en cartes empilées, mais masque
   l'en-tête Mardi/Mercredi/Jeudi sans ajouter d'étiquette de remplacement :
   sur mobile, impossible de savoir à quel jour un cours correspond. On
   ajoute l'étiquette manquante, sur le même principe que le second
   tableau (schedule-details2) plus bas sur la page, qui gère déjà bien ce
   cas. Les 3 colonnes visibles (nth-of-type 1/2/3, les autres jours étant
   masqués côté desktop) correspondent toujours à Mardi/Mercredi/Jeudi.

   Le thème définit déjà un ::before décoratif sur .schedule-title
   (rectangle blanc en position:absolute / z-index:-1, derrière la carte).
   Sans redéfinir position/z-index/inset, notre étiquette héritait de ce
   positionnement et se retrouvait invisible derrière la carte : on les
   neutralise explicitement pour repasser en flux normal.
   ========================================================================== */
@media (max-width: 767px) {
	.class-schedule-table tr:not(.schedule-day) td.schedule-title:nth-of-type(1):before {
		content: "Mardi";
		display: block;
		position: static;
		inset: auto;
		z-index: auto;
		background-color: transparent;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--theme-color);
		margin-bottom: 6px;
	}

	.class-schedule-table tr:not(.schedule-day) td.schedule-title:nth-of-type(2):before {
		content: "Mercredi";
		display: block;
		position: static;
		inset: auto;
		z-index: auto;
		background-color: transparent;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--theme-color);
		margin-bottom: 6px;
	}

	.class-schedule-table tr:not(.schedule-day) td.schedule-title:nth-of-type(3):before {
		content: "Jeudi";
		display: block;
		position: static;
		inset: auto;
		z-index: auto;
		background-color: transparent;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--theme-color);
		margin-bottom: 6px;
	}
}

/* ==========================================================================
   Pied de page responsive
   Certains conteneurs flex d'Elementor (.e-con) restent en "nowrap" sur
   mobile faute de réglage responsive dans l'éditeur : leurs colonnes sont
   alors poussées hors de l'écran au lieu de s'empiler. On force le
   retour à la ligne uniquement à l'intérieur du footer.
   ========================================================================== */
@media (max-width: 767px) {
	footer .e-con {
		flex-wrap: wrap !important;
	}

	footer .e-con > * {
		max-width: 100%;
	}
}

/* ==========================================================================
   Bandeau "titre de page" des pages internes (Nos cours, etc.)
   Le thème utilise par défaut la couleur de titre (--title-color, un bleu
   marine très foncé) comme fond de ce bandeau, avec un fil d'ariane.
   Sur le site de production (larosedunil.ch/v2), ce bandeau est affiché
   sans fond coloré ni fil d'ariane : juste le titre de la page. On aligne
   le rendu local sur ce comportement.
   ========================================================================== */
.breadcumb-wrapper {
	background-color: transparent;
	padding: 40px 0 20px;
}

.breadcumb-title {
	color: var(--title-color);
	font-size: 40px;
}

/* Le contenu qui suit le bandeau garde son propre espacement de section
   (classes utilitaires .space-top / .space-extra-top / etc., variables
   selon la page), ce qui donnait un très grand vide sous le titre en plus
   du padding du bandeau lui-même. On uniformise cet espacement sur
   toutes les pages qui utilisent ce bandeau, quelle que soit la classe
   d'espacement utilisée par la section suivante. */
.breadcumb-wrapper + * {
	padding-top: 50px !important;
}

.breadcumb-menu {
	display: none;
}

/* ==========================================================================
   Cartes de la page "Nos cours" (widget Classes - .couple-card)
   Même traitement que les cartes "Nos cours de danse" de l'accueil :
   hauteur uniforme entre les cartes et carte entièrement cliquable
   (redirige vers le lien du titre, voir custom.js).
   ========================================================================== */
.couple-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.couple-card_text {
	flex: 1 1 auto;
}

.couple-card.couple-card--clickable {
	cursor: pointer;
}

/* Format d'image uniforme : les photos sources ont des proportions très
   différentes (portrait, paysage, presque carrées, parfois panoramique),
   ce qui donnait des vignettes de hauteurs très inégales avec un rendu
   "en timbre-poste" (object-fit: contain sur un ratio 4/3 fixe : chaque
   image gardait sa propre hauteur affichée à l'intérieur d'un cadre gris,
   d'où l'aspect peu homogène des cartes entre elles).

   On recadre désormais (object-fit: cover) sur un ratio 3/2 (plus haut que
   le 16/9 initial, à la demande : les cartes montrent ainsi une plus
   grande partie de chaque photo) tout en restant raisonnable pour
   l'image la plus panoramique ("Moyennes"). Un compromis, pas une
   solution parfaite pour chaque photo individuellement, mais un rendu de
   grille bien plus homogène dans l'ensemble. */
.couple-card_img {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: #f4f4f4;
}

/* Sélecteur ".couple-card .couple-card_img img" (au lieu de
   ".couple-card_img img") : Elementor charge après ce fichier une règle
   ".elementor img { height: auto; }" de même spécificité qui, à égalité,
   l'emportait et annulait le "height: 100%" ci-dessous. Une classe
   ancêtre en plus suffit à gagner la cascade sans !important. */
.couple-card .couple-card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Cartes où les danseuses sont cadrées près du haut de la photo d'origine
   (têtes/chapeaux proches du bord supérieur) : un recadrage centré coupait
   les têtes. On recadre depuis le haut à la place : on perd un peu plus de
   jambes/bas de robe en bas, mais les visages restent entiers.
   - "80's" (cours-annees-80.jpeg) : photo presque carrée.
   - "Avancées" (cours-avancees.jpeg) : groupe sur deux rangées, la rangée
     du fond a la tête tout en haut du cadre. */
.couple-card .couple-card_img img[src*="cours-annees-80"],
.couple-card .couple-card_img img[src*="cours-avancees"] {
	object-position: center top;
}

/* ==========================================================================
   Cartes "Nous contacter" (widget Contact Info - .contact-info)
   Le conteneur flex Elementor qui englobe ce widget (un ".e-con" ancêtre,
   pas un enfant) ne s'étire pas à 100% de large comme prévu par ses
   propres variables CSS (--width/--container-widget-width restent à
   "100%" sans qu'aucune règle ne les applique) : il se réduit à la
   largeur de son contenu. Résultat : entre 768px et 991px, Bootstrap
   passe déjà en grille 2 colonnes (col-md-6) mais dans un conteneur déjà
   trop étroit, ce qui pousse la 3e carte seule sur une ligne, décalée.
   On force ce conteneur à occuper toute la largeur disponible, et on
   affiche les 3 cartes sur une seule ligne dès 768px (pas de palier à 2
   colonnes, il n'y a que 3 cartes) au lieu d'attendre 992px. */
.e-con:has(.elementor-widget-danzacontactinfo) {
	width: 100% !important;
}

@media (min-width: 768px) {
	.elementor-widget-danzacontactinfo .row > [class*="col-"] {
		flex: 0 0 33.333% !important;
		max-width: 33.333% !important;
		width: 33.333% !important;
	}
}

/* ==========================================================================
   Page "Cours de danse orientale enfants" (page-id-4578)
   Par défaut du thème, l'image ("feature-image") et la liste à puces
   ("feature-icon-list") sont côte à côte en desktop, ce qui donnait une
   petite vignette au lieu de la grande photo en bandeau utilisée en haut
   de toutes les autres pages de cours (widget Image seul, pleine largeur,
   même border-radius 20px). On empile l'image au-dessus de la liste, en
   pleine largeur, pour aligner cette page sur le même gabarit visuel que
   les autres — quel que soit la largeur d'écran (le thème ne passait ce
   comportement qu'en dessous de 1200px). */
body.page-id-4578 .feature-tab-wrapper {
	flex-direction: column;
}

body.page-id-4578 .feature-tab-wrapper .feature-image img {
	min-width: 0;
	min-height: 0;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

/* ==========================================================================
   Page "Démonstrations" (page-id-5231)
   Page reprise telle quelle de l'ancien site : un mur de texte brut, sans
   hiérarchie visuelle, avec les 5 photos jetées en vrac tout en bas, hors
   contexte. On l'aligne sur le reste du site (photo en haut, sections
   typées, liste à puces travaillée, CTA visible) sans toucher au texte.
   ========================================================================== */

/* La photo/galerie et le bloc de texte sont deux blocs frères au même
   niveau dans le HTML (pas liés par un widget commun) : on passe leur
   parent commun en flex pour pouvoir remonter la galerie tout en haut via
   "order", juste après le titre de page, sans déplacer le contenu dans
   Elementor. */
body.page-id-5231 .elementor.elementor-5231 {
	display: flex;
	flex-direction: column;
}

body.page-id-5231 .elementor-element-8ea8a14 {
	order: -1;
	margin-bottom: 40px;
}

/* Galerie : grille régulière, photos plus grandes, coins arrondis, légère
   ombre et zoom léger au survol — au lieu de vignettes minuscules et
   inégales entassées en bas de page. */
body.page-id-5231 .elementor-element-4a3c18a .elementor-gallery__container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

body.page-id-5231 .elementor-element-4a3c18a .e-gallery-item {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

body.page-id-5231 .elementor-element-4a3c18a .e-gallery-image {
	aspect-ratio: 4 / 3;
	transition: transform 0.35s ease;
}

body.page-id-5231 .elementor-element-4a3c18a .e-gallery-item:hover .e-gallery-image {
	transform: scale(1.06);
}

/* Titres de section : le thème les rendait en 16px gras Arial, à peine
   différents du texte courant. On leur donne une vraie identité visuelle
   (police du site, taille, couleur d'accent, espacement au-dessus pour
   bien séparer les sections). */
body.page-id-5231 .e-heading-base {
	display: block;
	margin-top: 42px;
	margin-bottom: 12px;
	font-family: "Poppins", sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: #b5772f;
	letter-spacing: -0.3px;
}

body.page-id-5231 .e-heading-base::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 3px;
	margin-right: 10px;
	vertical-align: middle;
	background: #d9a63c;
	border-radius: 2px;
}

/* Paragraphes : un peu plus grands et aérés pour la lecture, largeur de
   ligne limitée pour rester confortable sur un écran large (le bloc de
   texte occupait auparavant toute la largeur de la page, ~1220px). */
body.page-id-5231 .e-paragraph-base,
body.page-id-5231 .e-heading-base {
	max-width: 760px;
}

body.page-id-5231 .e-paragraph-base {
	font-size: 17px;
	line-height: 1.7;
}

body.page-id-5231 .e-paragraph-base strong {
	color: #171717;
}

/* Lien "Contactez-nous" inséré dans le texte : mis en évidence comme un
   vrai lien plutôt qu'un texte en gras muet. */
body.page-id-5231 .e-paragraph-base a:not(.demo-cta-btn) {
	color: #b5772f;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: #d9a63c;
	text-underline-offset: 3px;
}

/* Liste à puces ("Pour toutes sortes d'événements") : sur deux colonnes,
   coche dans un badge rond doré au lieu d'une simple icône grise. */
body.page-id-5231 .elementor-element-e29e27a .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 24px;
}

@media (max-width: 767px) {
	body.page-id-5231 .elementor-element-e29e27a .elementor-icon-list-items {
		grid-template-columns: 1fr;
	}
}

body.page-id-5231 .elementor-element-e29e27a .elementor-icon-list-item {
	align-items: center;
}

body.page-id-5231 .elementor-element-e29e27a .elementor-icon-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-right: 12px;
	color: #ffffff;
	background: #d9a63c;
	border-radius: 50%;
}

body.page-id-5231 .elementor-element-e29e27a .elementor-icon-list-icon svg {
	width: 13px;
	height: 13px;
}

body.page-id-5231 .elementor-element-e29e27a .elementor-icon-list-text {
	font-size: 16px;
}

/* Bouton "Demander un devis" ajouté en fin de page : reprend le style du
   bouton CTA de la bannière d'accueil (fond doré, texte sombre, pilule
   arrondie) pour rester cohérent avec le reste du site. */
body.page-id-5231 .demo-cta-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 16px 38px;
	background: #d9a63c;
	color: #1b1b1b !important;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(217, 166, 60, 0.35);
	transition: transform 0.2s ease, background 0.2s ease;
}

body.page-id-5231 .demo-cta-btn:hover {
	background: #1b1b1b;
	color: #d9a63c !important;
	transform: translateY(-2px);
}

/* ==========================================================================
   Page "Notre école" — superposition des deux photos du bloc "À propos"
   (widget Elementor "danzaimage", conteneur .img-box8).
   La seconde photo ("image2") est une image source carrée de 1587×1587 px
   sans réglage de taille dans le widget : elle s'affichait quasiment à sa
   taille native, presque aussi grande que la photo principale, et la
   recouvrait entièrement au lieu d'être un petit accent en coin comme le
   prévoit le design du thème (positionnement bas-droite déjà correct,
   seule la taille manquait). On la limite à une taille raisonnable de
   vignette d'accent.
   ========================================================================== */
.img-box8 .img2 {
	width: 55%;
	max-width: 260px;
}

.img-box8 .img2 img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Pages de cours individuelles (enfants de "Nos cours", page-id 4369) :
   - photo d'en-tête trop grande (pleine largeur, hauteur naturelle de
     l'image, jusqu'à ~560px) : on la limite à une hauteur raisonnable de
     bandeau, recadrée (object-fit: cover) pour ne pas la déformer.
   - le texte de description ("dance-single-content") était limité par le
     thème à 451px de large alors qu'il y a largement la place, avec un
     grand vide avant la carte "Informations sur le cours" (positionnée
     avec justify-content: space-between). On élargit le texte et on
     resserre l'écart avec la carte.
   ========================================================================== */
body.parent-pageid-4369 .elementor-widget-image img {
	max-height: 460px;
	width: 100%;
	object-fit: cover;
}

body.parent-pageid-4369 .dance-single-wrapper {
	justify-content: flex-start;
	gap: 40px;
}

body.parent-pageid-4369 .dance-single-content {
	max-width: 620px;
}

/* Le bandeau de titre standard (tout en haut de page, class ".breadcumb-
   title") porte maintenant le vrai titre de chaque page de cours. Le
   widget "Class Info" affichait en plus son propre titre juste au-dessus
   de la description — désormais redondant. On le masque (sélecteur
   ".page-title.th-title", propre à ce widget, sans rapport avec le
   bandeau du haut) sans toucher au plugin qui le génère. */
body.parent-pageid-4369 .page-title.th-title {
	display: none;
}

/* Rubrique "Pourquoi choisir ce cours ?" sans image (voir custom.js, qui
   ajoute cette classe quand l'image du bloc est absente/cassée) : on
   masque la colonne image vide et on laisse la liste à puces prendre
   toute la largeur disponible. */
.feature-image--empty {
	display: none;
}

.feature-image--empty + .feature-icon-list {
	flex: 1 1 100%;
}