/*
Theme Name: Hello Elementor Cool Again
Theme URI: https://coolagain.fr/
Description: Thème enfant de Hello Elementor pour Cool Again. Porte les polices auto-hébergées de la charte (DynaPuff, Archivo) et le CSS qui n'a pas d'équivalent en contrôle natif Elementor.
Author: Cool Again
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-cool-again
License: GNU General Public License v3 or later
*/

/* ------------------------------------------------------------------
   Feuille de style du thème enfant

   Règle (décision du 13/10/2026, site hybride) : tout ce qui dispose d'un
   contrôle natif dans les onglets Style et Avancé d'Elementor se règle dans
   Elementor, jamais ici. Ne vient ici que ce qu'Elementor ne sait pas faire.
   Chaque bloc ci-dessous vise une classe ca-* posée sur un élément Elementor
   (champ « Classes CSS » de l'onglet Avancé).
   Source de la mise en forme : assets/maquette-accueil.html (v13).
   ------------------------------------------------------------------ */


/* ------------------------------------------------------------------
   Largeur étendue d'Archivo (petites capitales espacées)
   Elementor n'a pas de réglage « font-stretch ». La police variable
   embarquée couvre 100 % à 125 %.
   ------------------------------------------------------------------ */
.ca-etendu,
.ca-etendu .elementor-heading-title,
.ca-etendu li {
	font-stretch: 125%;
}


/* ------------------------------------------------------------------
   Ouverture : le titre et la baseline se posent PAR-DESSUS la photo
   (superposition centrée sur toute la section), le titre ne passe
   jamais à la ligne. Les tailles et couleurs restent dans Elementor.
   ------------------------------------------------------------------ */
.ca-ouverture {
	position: relative;
}

.elementor-element.ca-ouverture-bloc {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ca-titre-geant .elementor-heading-title {
	white-space: nowrap;
}


/* ------------------------------------------------------------------
   Bébé / Enfant : la flèche de la pastille glisse au survol de la carte
   (souris uniquement, coupé si l'utilisateur refuse les animations).
   ------------------------------------------------------------------ */
.ca-entree {
	text-decoration: none;
}

.ca-entree .elementor-widget-icon svg {
	transition: transform .25s;
}

@media (hover: hover) and (pointer: fine) {
	.ca-entree:hover .elementor-widget-icon svg {
		transform: translateX(4px);
	}
}


/* ------------------------------------------------------------------
   Manifeste past season : justifié jusqu'à la dernière ligne
   (« text-align-last » n'a pas de réglage natif).
   ------------------------------------------------------------------ */
.ca-manifeste .elementor-heading-title {
	text-align-last: justify;
}


/* ------------------------------------------------------------------
   Questions (accordéon natif d'Elementor)
   Grand numéro 01, 02... généré automatiquement, libellé aligné sur le bas
   du numéro, « + » après la question tant qu'elle est fermée, réponse
   alignée sous le libellé. Ajouter ou retirer une question dans Elementor
   suffit : la numérotation suit.
   ------------------------------------------------------------------ */
/* ⚠️ Pas de grille sur <details> : Elementor anime l'ouverture en calculant la
   hauteur de l'élément, et une grille fausse ce calcul (la question restait
   bloquée à la hauteur de son titre, réponse invisible ; constaté le 13/10/2026).
   Le numéro a donc une largeur fixe (--ca-num-l) et la réponse est décalée
   d'autant, ce qui l'aligne sous le libellé comme sur la maquette. */
.ca-faq {
	--ca-num: clamp(56px, 7vw, 108px);
	--ca-num-l: calc(var(--ca-num) * 1.22);
	--ca-ecart: clamp(14px, 2.4vw, 32px);
}

.ca-faq .e-n-accordion {
	counter-reset: ca-question;
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.2vw, 30px);
}

.ca-faq .e-n-accordion-item {
	counter-increment: ca-question;
	border: 0;
}

.ca-faq .e-n-accordion-item > .e-n-accordion-item-title {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: var(--ca-ecart);
	padding: 14px 0 0;
	border: 0;
	border-top: 1px solid var(--e-global-color-caligne);
	border-radius: 0;
	background: none;
	cursor: pointer;
	list-style: none;
}

.ca-faq .e-n-accordion-item > .e-n-accordion-item-title::-webkit-details-marker {
	display: none;
}

.ca-faq .e-n-accordion-item > .e-n-accordion-item-title::before {
	content: counter(ca-question, decimal-leading-zero);
	flex: 0 0 var(--ca-num-l);
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: var(--ca-num);
	line-height: .82;
	letter-spacing: -.05em;
	font-variant-numeric: tabular-nums;
	color: var(--e-global-color-primary);
}

.ca-faq .e-n-accordion-item-title-header {
	padding-bottom: 4px;
}

.ca-faq .e-n-accordion-item-title-text {
	margin: 0;
	font-family: "Archivo", sans-serif;
	font-stretch: 125%;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--e-global-color-primary);
}

.ca-faq .e-n-accordion-item:not([open]) .e-n-accordion-item-title-text::after {
	content: "\00a0\00a0+";
}

.ca-faq .e-n-accordion-item > [role="region"] {
	margin-top: 10px;
	margin-left: calc(var(--ca-num-l) + var(--ca-ecart));
	width: auto;
	border: 0;
	padding: 0;
	background: none;
}


/* ------------------------------------------------------------------
   En-tête : fixe, caché sur le premier écran, il glisse dès que l'on
   défile (classe est-visible posée par assets/js/entete.js) ou dès qu'un
   lien reçoit le focus clavier.
   ------------------------------------------------------------------ */
.elementor-element.ca-entete {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 20;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
	transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1);
}

.elementor-element.ca-entete.est-visible,
.elementor-element.ca-entete:focus-within {
	transform: none;
}

/* Dans l'éditeur Elementor, l'en-tête reste visible pour pouvoir le modifier */
.elementor-editor-active .elementor-element.ca-entete {
	position: relative;
	transform: none;
}

.ca-logo .elementor-heading-title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}


/* ------------------------------------------------------------------
   Menus (en-tête et pied de page) : le widget Nav Menu n'est pas fiable
   en réglage généré, son style fin vit ici (guide agence, pré-vol n°11).
   Zones cliquables de 44 px, soulignement au survol.
   ------------------------------------------------------------------ */
.ca-nav .elementor-nav-menu--main .elementor-nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--e-global-color-primary);
	text-underline-offset: 6px;
}

.ca-nav .elementor-nav-menu--main .elementor-nav-menu > li + li {
	margin-left: 26px;
}

.ca-nav .elementor-nav-menu--main .elementor-nav-menu > li > a:hover,
.ca-nav .elementor-nav-menu--main .elementor-nav-menu > li > a:focus-visible,
.ca-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item-active {
	text-decoration: underline;
	color: var(--e-global-color-primary);
}

@media (max-width: 860px) {
	.ca-entete .ca-nav .elementor-nav-menu--main .elementor-nav-menu {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ca-entete .ca-nav .elementor-nav-menu--main .elementor-nav-menu > li > a {
		font-size: 13px;
		white-space: nowrap;
	}

	.ca-entete .ca-nav .elementor-nav-menu--main .elementor-nav-menu > li + li {
		margin-left: 20px;
	}
}

.ca-nav-pied .elementor-nav-menu--main .elementor-nav-menu > li + li {
	margin-left: 22px;
}

.ca-nav-pied .elementor-nav-menu--main .elementor-nav-menu > li > a {
	text-underline-offset: 4px;
}


/* ------------------------------------------------------------------
   Pied de page : logo blanc qui défile en continu sur la bande rose
   (référence delitclub.com). S'arrête au survol, et pour les visiteurs
   qui refusent les animations.
   ------------------------------------------------------------------ */
.ca-defile .elementor-widget-html {
	width: 100%;
}

.ca-piste {
	display: flex;
	width: max-content;
	animation: ca-defile 32s linear infinite;
}

.ca-piste span {
	font-family: "DynaPuff", sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 5.2vw, 84px);
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
	color: #fff;
	padding-inline: clamp(18px, 3vw, 48px);
}

.ca-piste i {
	display: inline-block;
	width: .4em;
	height: .4em;
	margin-left: clamp(36px, 6vw, 96px);
	border-radius: 50%;
	background: #fff;
	vertical-align: middle;
}

@keyframes ca-defile {
	to {
		transform: translateX(-50%);
	}
}

.ca-defile:hover .ca-piste {
	animation-play-state: paused;
}


/* ------------------------------------------------------------------
   Animations coupées si l'utilisateur les refuse
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.elementor-element.ca-entete,
	.ca-entree .elementor-widget-icon svg {
		transition: none;
	}

	.ca-piste {
		animation: none;
	}
}

html {
	scroll-behavior: smooth;
}