/*
Theme Name: CORE CLASS
Theme URI: https://coreclass.ch
Description: Thème enfant de Hello Elementor pour CORE CLASS.
Author: Numero19
Author URI: https://numero19.ch
Template: hello-elementor
Version: 1.0.0
Text Domain: coreclass
*/

/* ─────────────────────────────────────────────────────────────────────────
   En-tête transparent posé par-dessus le héros.

   Sur coreclass.ch la barre de navigation a une hauteur de 0 et son contenu
   flotte au-dessus de l'image : il n'y a donc aucune barre blanche sous le
   bandeau d'annonce. On reproduit ça en sortant #cc-nav du flux.

   Conséquence voulue : le wrapper de l'en-tête ne fait plus que la hauteur
   du bandeau (40 px), et le héros remonte juste en dessous.
   ───────────────────────────────────────────────────────────────────────── */

[data-elementor-type="header"] {
	position: relative;
	z-index: 100;
}

#cc-nav {
	position: absolute;
	top: 100%;          /* juste sous le bandeau d'annonce */
	left: 0;
	right: 0;
	width: 100%;
	background: transparent;
	z-index: 100;
}

/* le logo et les liens sont blancs : ils reposent sur l'image */
#cc-nav .elementor-widget-theme-site-logo img {
	filter: none;
}

/* Sur les pages sans grande image de tête, on garde quand même un fond
   sombre derrière la barre pour que les liens blancs restent lisibles. */
body.cc-sans-banniere #cc-nav {
	background: #121212;
}

/* Sur ces pages la barre est opaque : le contenu doit commencer en dessous.
   Le padding d'un conteneur Elementor est porté par .e-con-inner, pas par
   .e-con — viser le mauvais niveau ne produit aucun effet. */
body.cc-sans-banniere .elementor > .elementor-element:first-child > .e-con-inner {
	padding-top: 200px;
}

/* ── Confort de lecture ────────────────────────────────────────────────── */

/* les ancres (#galerie, #faq, #contact) ne doivent pas passer sous l'en-tête */
[id="galerie"],
[id="faq"],
[id="contact"] {
	scroll-margin-top: 110px;
}

/* aucun effet au survol ni sur le lien courant : les liens restent blancs */
#cc-nav .elementor-nav-menu a.elementor-item,
#cc-nav .elementor-nav-menu a.elementor-item:hover,
#cc-nav .elementor-nav-menu a.elementor-item:focus,
#cc-nav .elementor-nav-menu a.elementor-item.elementor-item-active,
#cc-nav .elementor-nav-menu .current-menu-item a {
	color: #FCFCFC;
	text-decoration: none;
}

/* le trait de soulignement d'Elementor ne doit jamais apparaître */
#cc-nav .elementor-nav-menu--main .elementor-item::before,
#cc-nav .elementor-nav-menu--main .elementor-item::after {
	display: none;
	content: none;
}

/* images de la galerie : pas de saut de mise en page pendant le chargement */
.elementor-widget-image-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   Grille des tarifs

   La source affiche 3 colonnes de 321,5 px séparées de 30 px, soit 1024 px.
   Un conteneur GRILLE Elementor porte le display:grid sur l'élément lui-même :
   il n'a pas de .e-con-inner, contrairement aux conteneurs flex. Viser
   « > .e-con-inner » ne matche donc rien.
   ───────────────────────────────────────────────────────────────────────── */

/* largeur des tarifs : voir le bloc « Espacements » */

/* ─────────────────────────────────────────────────────────────────────────
   Largeur de contenu des sections

   Le réglage « boxed » d'un conteneur crée bien un .e-con-inner, mais sa
   largeur vient de --container-max-width (1680 px, valeur du kit) : le
   contrôle « width » du conteneur ne l'alimente pas. On la pose ici.

   Seuls les conteneurs « boxed » ont un .e-con-inner : les sections en
   pleine largeur (héros, bandeau de logos, galerie, Instagram) ne sont donc
   pas touchées, et leurs fonds continuent de filer d'un bord à l'autre.
   ───────────────────────────────────────────────────────────────────────── */

/* Plus de plafond global : les retraits sont posés section par section,
   en pourcentage, comme la source. Voir le bloc « Espacements » plus bas. */

/* ─────────────────────────────────────────────────────────────────────────
   FAQ

   Relevé sur coreclass.ch, à deux largeurs — le bloc est FLUIDE, à 80 % de
   la fenêtre (le retrait de 10 % vient de la section) :
     1280 → bloc 1012, 2 colonnes de 498 px, gouttières 16 px
     1920 → bloc 1524, 2 colonnes de 754 px, gouttières 16 px
     item     : fond #FAF5EC, coins 10 px, hauteur 60 px replié
     question : Jost 16 px / 600, noir, padding 20 px, icône + / − à droite
     réponse  : Jost 14 px / 400, noir

   Elementor ne propose pas de fond ni d'arrondi par item sur le widget
   « toggle » : on les pose ici. Le widget reste éditable dans Elementor.
   ───────────────────────────────────────────────────────────────────────── */

/* aucun plafond : la section porte déjà son retrait de 10 % */
#cc-faq-grille {
	width: 100%;
	margin-inline: auto;
}

#faq .elementor-toggle-item {
	background: #FAF5EC;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}

#faq .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
	border: 0;
	min-height: 60px;
}

/* l'icône passe à droite de la question, comme la source */
#faq .elementor-tab-title .elementor-toggle-icon {
	order: 2;
	margin: 0;
	width: auto;
	flex: 0 0 auto;
	font-size: 13px;
}

#faq .elementor-tab-title .elementor-toggle-icon-closed,
#faq .elementor-tab-title .elementor-toggle-icon-opened {
	color: #000;
}

#faq .elementor-tab-content {
	padding: 0 20px 20px;
	border: 0;
}

#faq .elementor-tab-content p {
	margin: 0;
}

/* (#faq est un conteneur pleine largeur : il n'a pas de .e-con-inner —
   la règle qui visait cet enfant ne matchait rien.) */

@media (max-width: 767px) {
	#faq .elementor-tab-title { padding: 16px; min-height: 54px; }
	#faq .elementor-tab-content { padding: 0 16px 16px; }
	#faq .elementor-toggle-item { margin-bottom: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   « Les fondamentaux du Lagree »

   Relevé sur coreclass.ch : ce n'est pas un accordéon mais une liste
   d'onglets verticale.
     titre       : Jost 32 px / 500, #222222
     item        : padding 36 px haut et bas, filet 1 px #DADADA en bas
     description : masquée, révélée au clic
     aucune icône
   ───────────────────────────────────────────────────────────────────────── */

#cc-fondamentaux .elementor-toggle-item {
	border-bottom: 1px solid #DADADA;
}

#cc-fondamentaux .elementor-tab-title {
	padding: 36px 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

#cc-fondamentaux .elementor-tab-title .elementor-toggle-icon {
	display: none;
}

#cc-fondamentaux .elementor-tab-content {
	padding: 0 0 30px;
	border: 0;
}

#cc-fondamentaux .elementor-tab-content p {
	margin: 0;
	max-width: 46ch;
}

/* quand une entrée est ouverte, son titre se resserre pour laisser la place */
#cc-fondamentaux .elementor-tab-title.elementor-active {
	padding-bottom: 14px;
}

@media (max-width: 767px) {
	#cc-fondamentaux .elementor-tab-title { padding: 24px 0; }
	#cc-fondamentaux .elementor-tab-title.elementor-active { padding-bottom: 10px; }
	#cc-fondamentaux .elementor-tab-content { padding-bottom: 22px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Menu mobile

   Sur coreclass.ch, le burger ouvre un panneau BLANC PLEINE LARGEUR sous
   l'en-tête, avec les liens centrés (14 px / 400, #121212, ~40 px de haut).

   Par défaut Elementor cale son panneau sur la largeur du widget de menu —
   ici 150 px, puisque la barre est en flex. On le sort donc en absolu par
   rapport à #cc-nav, qui est déjà positionné.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {

	#cc-nav .elementor-widget-nav-menu {
		position: static;
	}

	#cc-nav .elementor-nav-menu--dropdown {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		background: #FCFCFC;
		box-shadow: 0 14px 28px rgb(0 0 0 / 10%);
		margin: 0;
	}

	#cc-nav .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item {
		justify-content: center;
		text-align: center;
		padding: 15px 20px;
		font-family: Jost, sans-serif;
		font-size: 14px;
		font-weight: 400;
		text-transform: uppercase;
		color: #121212;
		border-bottom: 1px solid #EFEFEF;
	}

	#cc-nav .elementor-nav-menu--dropdown .elementor-nav-menu li:last-child a.elementor-item {
		border-bottom: 0;
	}

	#cc-nav .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item,
	#cc-nav .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item:hover,
	#cc-nav .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item.elementor-item-active {
		color: #121212;
		background: transparent;
		text-decoration: none;
	}

	/* le burger reste à droite, avant le bouton RÉSERVER */
	#cc-nav .elementor-menu-toggle {
		color: #FCFCFC;
		background: transparent;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   L'en-tête et le pied de page ont leur propre largeur

   La règle générale plus haut borne le contenu des pages à 1024 px. Le pied
   de page de coreclass.ch, lui, s'étend sur 1680 px (logo à x=113 pour un
   écran de 1920) — et l'en-tête occupe toute la largeur.
   ───────────────────────────────────────────────────────────────────────── */

[data-elementor-type="footer"] > .e-con > .e-con-inner {
	max-width: 1680px;
	margin-inline: auto;
}

[data-elementor-type="header"] > .e-con > .e-con-inner {
	max-width: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Rangée haute du pied de page

   Sur coreclass.ch la navigation est centrée sur l'écran (x 725→1180 pour un
   viewport de 1920, soit un centre à 952 = le milieu exact), alors que le logo
   à gauche et les réseaux à droite n'ont pas la même largeur. Un
   « space-between » ne peut donc pas y arriver : on passe par une grille à
   trois colonnes, dont seule celle du milieu est centrée.

   Ça règle aussi le passage à la ligne des réseaux : un conteneur Elementor
   occupe 100 % par défaut, et le réglage de largeur des widgets ne s'y
   applique pas.
   ───────────────────────────────────────────────────────────────────────── */

#cc-footer-haut {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}

#cc-footer-haut > *:first-child { justify-self: start; }
#cc-footer-haut > *:nth-child(2) { justify-self: center; }
#cc-footer-haut > *:last-child   { justify-self: end; width: auto; }

@media (max-width: 767px) {
	#cc-footer-haut {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 18px;
	}
	#cc-footer-haut > *:first-child,
	#cc-footer-haut > *:last-child { justify-self: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   « Articles récents » en fin d'article

   Relevé sur coreclass.ch (viewport 1920) :
     titre  : 38 px / 700, centré
     grille : 3 colonnes de 485 px, gouttière 55 px, largeur totale 1605
     image  : 485 × 200, coins 10 px, en couverture
     méta   : rubrique à gauche, « par Auteur » à droite, 14 px / 400
     titre  : 20 px / 600 · chapô : 14 px / 400
   ───────────────────────────────────────────────────────────────────────── */

.cc-recents {
	padding: 70px 24px 80px;
}

.cc-recents h2.cc-recents__titre {
	margin: 0 0 54px;
	text-align: center;
	font-family: Jost, sans-serif;
	font-size: 38px;
	font-weight: 700;
	line-height: 44px;
	color: #121212;
}

.cc-recents__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 55px;
	max-width: 1605px;
	margin-inline: auto;
}

.cc-recents__carte { min-width: 0; }

.cc-recents__lien {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* `.elementor img { height:auto }` bat une règle à une seule classe :
   on monte la spécificité pour imposer la hauteur de la vignette. */
.cc-recents__carte img.cc-recents__image {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 10px;
}

.cc-recents__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-family: Jost, sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #121212;
	margin-bottom: 14px;
}

.cc-recents__auteur { white-space: nowrap; }
.cc-recents__auteur strong { font-weight: 600; }

.cc-recents h3.cc-recents__titre-article {
	margin: 0 0 12px;
	font-family: Jost, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: #121212;
	transition: color .25s ease;
}

.cc-recents__lien:hover .cc-recents__titre-article { color: #C4AD85; }

.cc-recents__chapo {
	margin: 0;
	font-family: Jost, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #121212;
}

@media (max-width: 991px) {
	.cc-recents__grille { grid-template-columns: repeat(2, 1fr); gap: 34px; }
	.cc-recents h2.cc-recents__titre { font-size: 30px; margin-bottom: 36px; }
}

@media (max-width: 767px) {
	.cc-recents { padding: 50px 20px 56px; }
	.cc-recents__grille { grid-template-columns: 1fr; gap: 30px; }
	.cc-recents h2.cc-recents__titre { font-size: 26px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   ESPACEMENTS

   Relevés sur coreclass.ch aux deux largeurs (1920 → 1905 utiles,
   1280 → 1265 utiles). La règle du site source :
   retraits HORIZONTAUX en pourcentage, espacements VERTICAUX en pixels.

   Elementor n'accepte qu'une seule unité pour les quatre côtés d'un padding :
   le vertical reste donc réglé dans Elementor, l'horizontal est posé ici.

   Repère            1920      1280     →  règle retenue
   ───────────────────────────────────────────────────────────
   galerie/FAQ/contact  191 px   127 px  →  10 %
   grille tarifs         95 px    63 px  →  5 % (+ 4,5 % interne)
   citation             285 px   140 px  →  15 %, puis 140 px sous 1440
   « bienvenue »        140 px   140 px  →  140 px fixes
   héros                 70 px    40 px  →  3,7 %, puis 40 px sous 1440
   pied de page         113 px    63 px  →  5 % plafonné à 1680
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 10 % ── */
#galerie,
#faq,
#contact,
#cc-tarifs-titre,
#cc-etudiants {
	padding-inline: 10%;
}

/* ── 5 % ── */
#cc-chiffres,
#cc-app {
	padding-inline: 5%;
}

/* ── grille des tarifs : 5 % de marge, 4,5 % de retrait interne ── */
#cc-tarifs {
	/* Elementor génère pour ce conteneur un `width: var(--container-widget-width, 620px)`
	   qu’aucun réglage du bloc ne demande. Un sélecteur d’identifiant passe devant
	   sa règle de classe : on rétablit la pleine largeur ici. */
	width: 100%;
	max-width: none;
	/* 5 % de retrait + 4,5 % interne = 9,5 %.
	   Surtout pas de margin-inline : un conteneur Elementor a une largeur
	   explicite de 100 %, la marge s'y ajoute et fait déborder la page. */
	padding-inline: 9.5%;
}

/* ── citation : 15 %, mais 140 px fixes en dessous de 1440 ── */
#cc-citation { padding-inline: 15%; }

/* ── « Bienvenue » : 140 px à toutes les largeurs ── */
#cc-bienvenue { padding-inline: 140px; }

/* ── héros ── */
#cc-hero { padding-inline: 3.7%; }

/* ── bandeau de logos et Instagram : pleine largeur ── */
#cc-marquee { padding-inline: 0; }
#cc-insta   { padding-inline: 3%; }

/* ── espacements verticaux relevés sur la source ── */
#cc-app     { padding-block: 70px 0; }
#faq        { padding-block: 70px 70px; }
#contact    { padding-block: 0 70px; }
#cc-insta   { padding-block: 70px 98px; }
#cc-citation{ padding-block: 28px 28px; }

/* ── palier 1440 : la source resserre plusieurs valeurs ── */
@media (max-width: 1440px) {
	#cc-citation { padding-inline: 140px; }
	#cc-hero     { padding-inline: 40px; }
}

/* ── tablette ── */
@media (max-width: 991px) {
	#galerie, #faq, #contact, #cc-fondamentaux-sec,
	#cc-tarifs-titre, #cc-etudiants, #cc-chiffres, #cc-app,
	#cc-citation, #cc-bienvenue {
		padding-inline: 6%;
	}
	#cc-tarifs { padding-inline: 5%; }
	#faq      { padding-block: 55px 55px; }
	#cc-insta { padding-block: 50px 60px; }
}

/* ── mobile ── */
@media (max-width: 767px) {
	/* 5 % = 18,75 px à 375, valeur relevée sur la source */
	#galerie, #faq, #contact, #cc-fondamentaux-sec,
	#cc-tarifs-titre, #cc-etudiants, #cc-chiffres, #cc-app,
	#cc-citation, #cc-bienvenue, #cc-hero, #cc-insta,
	#cc-tarifs {
		padding-inline: 5%;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   HAUTEURS

   Relevées sur coreclass.ch à 1920 × 1000 :
     héros         : 960 px = hauteur du viewport MOINS le bandeau de 40 px
                     (donc plein écran), 60 px de retrait en bas
     « bienvenue » : section de 598 px · image 773 × 500 à droite
     fondamentaux  : section de 715 px · contenu dans un bloc centré de 928 px
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Héros : plein écran sous le bandeau d'annonce ── */
#cc-hero {
	min-height: calc(100vh - 40px);
	padding-block: 0 60px;
}

/* la barre de navigation flotte par-dessus : on réserve sa hauteur en haut */
#cc-hero > .e-con-inner {
	padding-top: 120px;
}

@media (max-width: 767px) {
	#cc-hero { min-height: calc(100svh - 40px); padding-block: 0 44px; }
	#cc-hero > .e-con-inner { padding-top: 90px; }
}

/* ── « Bienvenue chez CORE CLASS » ──
   Attention : ces sections sont des conteneurs PLEINE LARGEUR, donc sans
   .e-con-inner. Viser « > .e-con-inner » ne matche rien — on cible les
   colonnes directement. */
#cc-bienvenue {
	min-height: 598px;
	padding-block: 0;
	align-items: center;
}

/* image de droite : 773 × 500 sur la source, soit ~47,5 % de la zone de contenu */
#cc-bienvenue > .e-con:first-child { flex: 0 0 52.5%; }
#cc-bienvenue > .e-con:last-child  { flex: 0 0 47.5%; }

#cc-bienvenue img {
	width: 100%;
	height: 500px;
	object-fit: cover;
}

@media (max-width: 991px) {
	#cc-bienvenue { min-height: 0; padding-block: 50px; }
	#cc-bienvenue > .e-con:first-child,
	#cc-bienvenue > .e-con:last-child { flex: 1 1 100%; }
	#cc-bienvenue img { height: 380px; }
}
@media (max-width: 767px) {
	#cc-bienvenue img { height: 260px; }
}

/* ── « Les fondamentaux du Lagree » ──
   La source cale son contenu dans un bloc centré de 928 px. On l'obtient par
   un retrait calculé, puisqu'il n'y a pas de conteneur interne à borner. */
#cc-fondamentaux-sec {
	min-height: 715px;
	align-items: center;
	padding-inline: max(6%, calc((100% - 928px) / 2));
}

/* la machine ne doit pas dépasser la hauteur de la liste (5 × 113 px) */
#cc-fondamentaux-sec img {
	max-height: 565px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin-inline: auto;
}

@media (max-width: 991px) {
	#cc-fondamentaux-sec { min-height: 0; padding-inline: 6%; }
	#cc-fondamentaux-sec img { max-height: 420px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Variante « accueil » du bloc articles

   Relevé sur coreclass.ch, identique à 1280 et 1920 :
     grille  : démarre à x=170, cartes de 272 px FIXES, écart 55 px
               (c'est un carrousel : les cartes ne s'élargissent pas)
     image   : 272 × 200, coins 10 px
     méta    : rubrique à gauche, « par Auteur » à droite, 14 / 400, #FCFCFC
     titre   : 20 / 600, #FCFCFC
     chapô   : 14 / 400, #FCFCFC, justifié
     bouton  : 136 × 38, fond #FCFCFC, coins 5 px, texte 14 / 500, #121212
   ───────────────────────────────────────────────────────────────────────── */

.cc-recents--accueil {
	padding: 28px 150px;
	background: #121212;
	min-height: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cc-recents--accueil .cc-recents__grille {
	display: flex;
	flex-wrap: nowrap;
	gap: 15px;
	max-width: none;
	margin-inline: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-padding-inline: 0;
}

/* la barre de défilement reste masquée : on navigue aux flèches ou au doigt */
.cc-recents--accueil .cc-recents__grille::-webkit-scrollbar { display: none; }

/* 3 vignettes visibles, 15 px d'écart — réglage relevé sur la source */
.cc-recents--accueil .cc-recents__carte {
	flex: 0 0 calc((100% - 30px) / 3);
	width: calc((100% - 30px) / 3);
	scroll-snap-align: start;
}

.cc-recents--accueil .cc-recents__carte img.cc-recents__image {
	height: 200px;
	margin-bottom: 12px;
}

.cc-recents--accueil .cc-recents__meta,
.cc-recents--accueil .cc-recents h3.cc-recents__titre-article,
.cc-recents--accueil .cc-recents__chapo {
	color: #FCFCFC;
}

.cc-recents--accueil h3.cc-recents__titre-article {
	color: #FCFCFC;
	margin-bottom: 14px;
}

.cc-recents--accueil .cc-recents__chapo {
	text-align: justify;
	margin-bottom: 20px;
}

.cc-recents--accueil .cc-recents__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 136px;
	height: 38px;
	background: #FCFCFC;
	border-radius: 6px;
	font-family: Jost, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #121212;
	transition: background .25s ease;
}

.cc-recents--accueil .cc-recents__lien:hover .cc-recents__bouton { background: #C4AD85; }
.cc-recents--accueil .cc-recents__lien:hover h3.cc-recents__titre-article { color: #C4AD85; }

@media (max-width: 991px) {
	.cc-recents--accueil { padding: 28px 6%; }
	.cc-recents--accueil .cc-recents__grille { gap: 34px; }
}

@media (max-width: 767px) {
	.cc-recents--accueil { padding: 28px 20px; }
	.cc-recents--accueil .cc-recents__carte { flex: 1 1 100%; width: 100%; }
	.cc-recents--accueil .cc-recents__grille { gap: 30px; }
}

/* ── Flèches du carrousel ──────────────────────────────────────────────── */

.cc-recents--accueil { position: relative; }

.cc-recents__fleche {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* même langage que les boutons « Découvrir l'article » : blanc sur fond
	   sombre, doré au survol. On évite la syntaxe rgb() moderne à barre
	   oblique, mal interprétée par certains moteurs. */
	background: #FCFCFC;
	border: 0;
	border-radius: 50%;
	color: #121212;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease;
}

.cc-recents__fleche:hover { background: #C4AD85; color: #121212; }
.cc-recents__fleche[hidden] { display: none; }
.cc-recents__fleche--prec { left: 92px; }
.cc-recents__fleche--suiv { right: 92px; }

/* 2 vignettes en tablette, 1 en mobile — comme les paliers de la source */
@media (max-width: 991px) {
	.cc-recents--accueil .cc-recents__carte {
		flex: 0 0 calc((100% - 10px) / 2);
		width: calc((100% - 10px) / 2);
	}
	.cc-recents--accueil .cc-recents__grille { gap: 10px; }
	.cc-recents__fleche--prec { left: 8px; }
	.cc-recents__fleche--suiv { right: 8px; }
}

/* Mobile : la source affiche UNE vignette de 313 px dans un cadre de 355,
   donc la suivante dépasse légèrement — c'est ce qui signale qu'on peut
   faire défiler. Sans cet aperçu, rien n'indique qu'il y a une suite. */
@media (max-width: 767px) {
	.cc-recents--accueil .cc-recents__carte { flex: 0 0 88%; width: 88%; }
	.cc-recents--accueil .cc-recents__grille { gap: 12px; }
	.cc-recents__fleche { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   CORRECTIFS MOBILE
   ═════════════════════════════════════════════════════════════════════════ */

/* ── En-tête : RÉSERVER puis le burger, tous deux à droite ───────────────
   Relevé sur coreclass.ch à 375 : logo à gauche, bouton RÉSERVER jusqu'à
   x=303, puis le burger (icône 24×24) dont le bord droit est à 351 — soit
   24 px du bord de l'écran, et 24 px après le bouton.

   Dans le DOM Elementor le widget de menu précède le bouton : une marge
   automatique le poussait bien à droite, mais il restait DEVANT le bouton.
   On inverse donc les deux avec `order`. */
@media (max-width: 991px) {
	/* écart et retrait droit relevés sur la source : 24 px chacun */
	#cc-nav { column-gap: 24px; justify-content: flex-end; padding-right: 24px; }

	/* le glyphe d'Elementor fait 33 px par défaut ; la source est à 24 */
	#cc-nav .elementor-menu-toggle {
		width: 24px;
		height: 24px;
		padding: 0;
		font-size: 24px;
		line-height: 1;
	}
	#cc-nav .elementor-menu-toggle i,
	#cc-nav .elementor-menu-toggle svg { font-size: 24px; width: 24px; height: 24px; }

	#cc-nav .elementor-widget-theme-site-logo,
	#cc-nav .elementor-widget-image { order: 1; margin-right: auto; }

	#cc-nav .elementor-widget-button { order: 2; }

	/* le burger ferme la marche */
	#cc-nav .elementor-widget-nav-menu { order: 3; margin-left: 0; margin-right: 0; }
}

/* ── Pied de page : liste lisible et centrée sur petit écran ─────────── */
@media (max-width: 767px) {
	[data-elementor-type="footer"] .elementor-nav-menu--main .elementor-nav-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 6px;
	}
	[data-elementor-type="footer"] .elementor-nav-menu--main a.elementor-item {
		padding: 6px 10px;
	}
	/* la barre de burger d'Elementor n'a plus lieu d'être ici */
	[data-elementor-type="footer"] .elementor-menu-toggle { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   CARROUSEL — flèches et paliers, calqués sur la source

   Relevé en tablette (768) : conteneur à 10 px des bords seulement,
   flèches de 36 × 48, coins 8 px, fond rgba(34,34,34,.5), glyphe #F5F5F5,
   posées à 10 px à l'intérieur. En mobile : UNE vignette par vue.
   ═════════════════════════════════════════════════════════════════════════ */

.cc-recents__fleche {
	width: 36px;
	height: 48px;
	border-radius: 8px;
	background: rgba(34, 34, 34, 0.5);
	border: 0;
	color: #F5F5F5;
	font-size: 22px;
}

.cc-recents__fleche:hover { background: rgba(34, 34, 34, 0.8); color: #F5F5F5; }

@media (max-width: 991px) {
	/* la source ne laisse que 10 px de marge : les vignettes respirent mieux */
	.cc-recents--accueil { padding: 42px 10px; }
	.cc-recents--accueil .cc-recents__carte {
		flex: 0 0 calc((100% - 10px) / 2);
		width: calc((100% - 10px) / 2);
	}
	.cc-recents--accueil .cc-recents__grille { gap: 10px; }
	.cc-recents__fleche--prec { left: 20px; }
	.cc-recents__fleche--suiv { right: 20px; }
}

@media (max-width: 767px) {
	/* UNE vignette par vue, avec les flèches — comme la source */
	.cc-recents--accueil { padding: 42px 10px; }
	.cc-recents--accueil .cc-recents__carte { flex: 0 0 100%; width: 100%; }
	.cc-recents--accueil .cc-recents__grille { gap: 5px; }
	.cc-recents__fleche { display: flex; }
	.cc-recents__fleche--prec { left: 14px; }
	.cc-recents__fleche--suiv { right: 14px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Image « Bienvenue chez CORE CLASS »

   Le cadre de la source fait 773 × 500, mais en `background-size: contain`
   avec un fichier CARRÉ de 750 × 750 : l'image visible ne fait donc que
   500 × 500, centrée, avec du vide de part et d'autre. En `cover` elle
   remplissait tout le cadre et paraissait bien trop grande.
   ═════════════════════════════════════════════════════════════════════════ */

#cc-bienvenue img {
	width: 500px;
	max-width: 100%;
	height: 500px;
	object-fit: cover;
	border-radius: 6px;
	margin-inline: auto;
}

/* le fichier source est carré : on garde le rapport 1:1 à toutes les tailles,
   sinon l'image s'étire dès que la colonne devient plus étroite que la hauteur */
@media (max-width: 991px) {
	#cc-bienvenue img { width: 380px; height: auto; aspect-ratio: 1; }
}
@media (max-width: 767px) {
	#cc-bienvenue img { width: 100%; height: auto; aspect-ratio: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Cartes de tarifs : le visuel est CARRÉ sur la source (481 × 481 à 1920),
   pas au rapport naturel du fichier.
   ───────────────────────────────────────────────────────────────────────── */

#cc-tarifs .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
}

/* ── Page Franchise : le texte occupe toute la largeur du contenu ──────── */

#cc-franchise .elementor-widget-text-editor { width: 100%; }
#cc-franchise .elementor-widget-text-editor p { margin: 0 0 18px; }
#cc-franchise .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   « Fondamentaux » : la machine touche le bas de la section

   Sur la source, l'image mesure exactement la hauteur de la section (637 px
   relevés) et son bord inférieur coïncide au pixel près avec le haut de la
   bande beige des chiffres. Elle n'est ni centrée ni détourée : `cover`,
   ancrée en bas.
   ───────────────────────────────────────────────────────────────────────── */

#cc-fondamentaux-sec {
	align-items: stretch;
	padding-block: 0;
	overflow: hidden;
}

/* la liste reste centrée verticalement, elle */
#cc-fondamentaux-sec > .e-con:first-child {
	align-self: center;
	padding-block: 70px;
}

/* la colonne de l'image occupe toute la hauteur, image calée en bas */
#cc-fondamentaux-sec > .e-con:last-child {
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-block: 0;
}

/* Les wrappers d'Elementor sont poussés en bas de colonne, mais l'image
   garde sa taille naturelle : elle est POSÉE sur la bande suivante, pas
   étirée pour remplir la section. */
#cc-fondamentaux-sec > .e-con:last-child > .elementor-element,
#cc-fondamentaux-sec > .e-con:last-child .elementor-widget-container,
#cc-fondamentaux-sec > .e-con:last-child .elementor-widget-image {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	margin-top: auto;
}

#cc-fondamentaux-sec img {
	width: 410px;
	max-width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	margin: 0;
	display: block;
}

@media (max-width: 991px) {
	#cc-fondamentaux-sec { padding-block: 0 0; }
	#cc-fondamentaux-sec > .e-con:first-child { padding-block: 46px; }
	#cc-fondamentaux-sec img { width: 300px; height: auto; max-height: 420px; }
}

/* Page Franchise : contenu à 10 % des bords, comme la source (x=191 à 1905) */
#cc-franchise { padding-inline: 10%; }
@media (max-width: 991px) { #cc-franchise { padding-inline: 6%; } }
@media (max-width: 767px) { #cc-franchise { padding-inline: 20px; } }

/* ═════════════════════════════════════════════════════════════════════════
   PIED DE PAGE — TABLETTE ET MOBILE

   Relevé sur coreclass.ch :
     768 px (utile 753) → hauteur 458, retrait 5 %, logo 192 centré,
                          les 5 liens sur UNE rangée, paiements 339 px
     375 px            → hauteur 572, retrait 18,75 px, liens repliés,
                          paiements 270 px

   Dans les deux cas c'est une colonne centrée : logo · navigation · réseaux
   · mentions · crédit · moyens de paiement EN DERNIER.

   Le point de rupture est à 991 px, pas 767 : au-delà de 767 la grille
   3 colonnes du bureau reprenait la main et Elementor réaffichait son menu
   déroulant vertical.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

	[data-elementor-type="footer"] > .e-con {
		padding-inline: 5%;
	}

	/* colonne unique, tout centré.
	   Il faut aussi neutraliser les justify-self start/end du bureau, sinon
	   le logo reste collé à gauche et les réseaux à droite. */
	#cc-footer-haut {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 26px;
	}

	#cc-footer-haut > *:first-child,
	#cc-footer-haut > *:nth-child(2),
	#cc-footer-haut > *:last-child {
		justify-self: center;
	}

	#cc-footer-haut > *:first-child img { width: 192px; }

	/* Le conteneur du pied de page est en mode « boxed » : ses widgets sont
	   dans un .e-con-inner, pas enfants directs du .e-con. */
	[data-elementor-type="footer"] .e-con-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	[data-elementor-type="footer"] .e-con-inner > #cc-footer-haut { order: 0; }
	[data-elementor-type="footer"] .e-con-inner > .elementor-widget-nav-menu { order: 1; }
	[data-elementor-type="footer"] .e-con-inner > .elementor-widget-text-editor { order: 2; }
	[data-elementor-type="footer"] .e-con-inner > .elementor-widget-image { order: 3; }

	[data-elementor-type="footer"] .e-con-inner > .elementor-widget-image img {
		width: 339px;
		max-width: 100%;
	}

	/* Malgré `toggle: none`, Elementor bascule quand même sur son menu
	   DÉROULANT sous le point de rupture : il masque la liste principale et
	   affiche une pile verticale. On rétablit la liste horizontale. */
	[data-elementor-type="footer"] .elementor-widget-nav-menu .elementor-nav-menu--main {
		display: block;
	}
	[data-elementor-type="footer"] .elementor-widget-nav-menu .elementor-nav-menu--dropdown {
		display: none;
	}

	[data-elementor-type="footer"] .elementor-widget-nav-menu {
		width: 100%;
	}

	[data-elementor-type="footer"] .elementor-nav-menu--main .elementor-nav-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2px 4px;
	}

	[data-elementor-type="footer"] .elementor-nav-menu--main > ul > li,
	[data-elementor-type="footer"] .elementor-nav-menu--main > ul > li > a.elementor-item {
		width: auto;
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

@media (max-width: 767px) {
	[data-elementor-type="footer"] > .e-con { padding-inline: 18.75px; }
	[data-elementor-type="footer"] .e-con-inner > .elementor-widget-image img { width: 270px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Corps des articles

   Relevé sur coreclass.ch : bloc de 1280 px centré (x=313 pour 1905),
   texte 16 px / interligne 25, graisse 400. Mon interligne à 30 donnait
   l'impression d'un texte « écarté ».

   Comme ailleurs, le réglage de largeur du conteneur Elementor n'alimente
   pas --container-max-width : on la pose ici.
   ───────────────────────────────────────────────────────────────────────── */

#cc-article-corps > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}