/*
Theme Name:   Astra Child – CECIL Center
Theme URI:    https://cecil.center
Description:  Thème enfant d'Astra pour CECIL Center. Contient le nouveau design (inspiration Apple, charte CECIL).
Author:       CECIL Center
Template:     astra
Version:      1.5.5
Text Domain:  astra-child-cecil
*/

/* ==========================================================================
   1. Repères de design (charte CECIL + esthétique Apple)
   ========================================================================== */

:root {
	--cc-orange: #F19426;
	--cc-orange-lisible: #9A5200;
	--cc-bleu: #055DA9;
	--cc-bleu-fonce: #03447D;
	--cc-noir: #1D1D1F;
	--cc-texte-2: #4A4A4F;
	--cc-gris: #6E6E73;
	--cc-fond: #FBFBFD;
	--cc-carte: #F5F5F7;

	--cc-rayon: 28px;
	--cc-rayon-petit: 14px;
	--cc-ombre: 0 1px 2px rgba(0, 0, 0, .04);
	--cc-ombre-survol: 0 18px 40px rgba(0, 0, 0, .08);

	/* Ressort : léger dépassement puis stabilisation, comme sur iOS. */
	--cc-ressort: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.6%, 1.06 22.6%, 1.072 25.3%, 1.065 28.6%, 1.004 41.4%, 0.993 47.6%, 1);
	--cc-sortie: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   2. Réglages généraux (sans effet visible sur la mise en page existante)
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html {
	scroll-behavior: smooth;
}

/* ==========================================================================
   3. Classes à ajouter dans Elementor (onglet Avancé > Classes CSS)
   ========================================================================== */

/* Verre dépoli : en-tête, barres flottantes. */
.cc-verre {
	background-color: rgba(251, 251, 253, .72) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* En-tête qui reste collé en haut lors du défilement. */
.cc-colle {
	position: sticky !important;
	top: 0;
	z-index: 999;
}

.admin-bar .cc-colle {
	top: 32px;
}

/* Carte claire qui se soulève au survol. */
.cc-carte {
	background-color: var(--cc-carte);
	border-radius: var(--cc-rayon);
	transition: transform .55s var(--cc-ressort), box-shadow .3s ease;
}

.cc-carte:hover {
	transform: translateY(-4px);
	box-shadow: var(--cc-ombre-survol);
}

/* Carte blanche sur fond clair. */
.cc-carte-blanche {
	background-color: #fff;
	border-radius: var(--cc-rayon);
	box-shadow: var(--cc-ombre);
	transition: transform .55s var(--cc-ressort), box-shadow .3s ease;
}

.cc-carte-blanche:hover {
	transform: translateY(-4px);
	box-shadow: var(--cc-ombre-survol);
}

/* Boutons en pilule avec effet ressort (à mettre sur le widget Bouton). */
.cc-bouton .elementor-button {
	border-radius: 980px;
	padding: 16px 28px;
	font-weight: 500;
	transition: transform .45s var(--cc-ressort), background-color .2s ease, color .2s ease;
}

.cc-bouton .elementor-button:hover {
	transform: scale(1.03);
}

.cc-bouton .elementor-button:active {
	transform: scale(.97);
}

.cc-bouton-plein .elementor-button {
	background-color: var(--cc-bleu);
	color: #fff;
}

.cc-bouton-plein .elementor-button:hover {
	background-color: var(--cc-bleu-fonce);
	color: #fff;
}

.cc-bouton-contour .elementor-button {
	background-color: transparent;
	color: var(--cc-bleu);
	border: 1px solid rgba(5, 93, 169, .3);
}

.cc-bouton-contour .elementor-button:hover {
	background-color: rgba(5, 93, 169, .08);
	color: var(--cc-bleu);
}

/* Grands titres serrés, façon Apple. */
.cc-titre .elementor-heading-title {
	letter-spacing: -.025em;
	line-height: 1.07;
}

/* Petit sur-titre orange au-dessus d'un titre. */
.cc-surtitre .elementor-heading-title {
	color: var(--cc-orange-lisible);
	font-size: 15px;
	font-weight: 500;
}

/* Apparition douce au chargement. */
@keyframes cc-apparition {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.cc-apparait {
	animation: cc-apparition .9s var(--cc-sortie) both;
}

.cc-delai-1 { animation-delay: .08s; }
.cc-delai-2 { animation-delay: .16s; }
.cc-delai-3 { animation-delay: .24s; }

/* ==========================================================================
   4. En-tête : reste visible en haut pendant le défilement
   ========================================================================== */

.ehf-header #masthead {
	position: sticky;
	top: 0;
	z-index: 999;
}

.admin-bar.ehf-header #masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.ehf-header #masthead {
		top: 46px;
	}
}

/* Sous 600 px, la barre d'administration de WordPress n'est plus fixe. */
@media (max-width: 600px) {
	.admin-bar.ehf-header #masthead {
		top: 0;
	}
}

/* Sous-menu en verre, coins arrondis. */
.cc-verre .hfe-nav-menu .sub-menu {
	background-color: rgba(251, 251, 253, .92);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-radius: var(--cc-rayon-petit);
	box-shadow: var(--cc-ombre-survol);
	overflow: hidden;
}

/* Liens du menu réservés au menu mobile (☰) : « Se connecter », changement de langue. */
@media (min-width: 1025px) {
	.hfe-nav-menu .cc-mobile-seul {
		display: none !important;
	}
}

/* Lien de langue (EN / FR) de l'en-tête. */
.cc-langue {
	color: var(--cc-noir);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	padding: 8px;
}

.cc-langue:hover {
	color: var(--cc-bleu);
}

/* ==========================================================================
   5. Contenus : liens de titres, formulaire, articles, questions fréquentes
   ========================================================================== */

/* Titres cliquables (cartes) : pas de soulignement, bleu au survol. */
.elementor-widget-heading .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

.elementor-widget-heading .elementor-heading-title a:hover {
	color: var(--cc-bleu);
}

/* Ancres (#agrement, #evenements…) : le titre ne passe pas sous l'en-tête collé. */
[data-elementor-type="wp-page"] > .e-con[id] {
	scroll-margin-top: 80px;
}

/* Badge d'agrément (haut de l'accueil). */
.cc-badge-agrement {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	padding: 8px 18px 8px 10px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 980px;
	background-color: #fff;
	box-shadow: var(--cc-ombre);
	color: var(--cc-noir);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	transition: transform .45s var(--cc-ressort), border-color .3s ease, box-shadow .3s ease;
}

.cc-badge-agrement img {
	flex: none;
	width: 26px;
	height: 26px;
	margin: 0;
	object-fit: contain;
}

.cc-badge-num {
	color: var(--cc-gris);
	font-weight: 400;
	white-space: nowrap;
}

.cc-badge-num::before {
	content: "·";
	margin-right: 8px;
}

.cc-badge-fleche {
	flex: none;
	color: var(--cc-bleu);
	transition: transform .45s var(--cc-ressort);
}

.cc-badge-agrement:hover,
.cc-badge-agrement:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(5, 93, 169, .45);
	box-shadow: 0 8px 24px rgba(5, 93, 169, .12);
	color: var(--cc-noir);
}

.cc-badge-agrement:hover .cc-badge-fleche,
.cc-badge-agrement:focus-visible .cc-badge-fleche {
	transform: translateX(3px);
}

.cc-badge-agrement:focus-visible {
	outline: 3px solid rgba(5, 93, 169, .35);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.cc-badge-agrement {
		font-size: 13px;
		padding: 8px 14px 8px 8px;
		border-radius: 18px;
	}

	.cc-badge-num {
		display: block;
		margin-top: 2px;
	}

	.cc-badge-num::before {
		content: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-badge-agrement,
	.cc-badge-fleche {
		transition: none;
	}

	.cc-badge-agrement:hover,
	.cc-badge-agrement:hover .cc-badge-fleche {
		transform: none;
	}
}

/* Formulaire de contact (Contact Form 7). */
.cc-formulaire .wpcf7-form p {
	margin: 0 0 18px;
}

.cc-formulaire .wpcf7-form label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--cc-noir);
}

.cc-formulaire input[type="text"],
.cc-formulaire input[type="email"],
.cc-formulaire input[type="tel"],
.cc-formulaire select,
.cc-formulaire textarea {
	width: 100%;
	margin-top: 8px;
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: var(--cc-rayon-petit);
	background-color: #fff;
	color: var(--cc-noir);
	font-family: inherit;
	font-size: 16px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.cc-formulaire input:focus,
.cc-formulaire select:focus,
.cc-formulaire textarea:focus {
	outline: none;
	border-color: var(--cc-bleu);
	box-shadow: 0 0 0 4px rgba(5, 93, 169, .15);
}

.cc-formulaire textarea {
	min-height: 160px;
	resize: vertical;
}

.cc-formulaire input[type="submit"] {
	padding: 16px 32px;
	border: 0;
	border-radius: 980px;
	background-color: var(--cc-bleu);
	color: #fff;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease, transform .45s var(--cc-ressort);
}

.cc-formulaire input[type="submit"]:hover {
	background-color: var(--cc-bleu-fonce);
	transform: scale(1.03);
}

.cc-formulaire .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
}

.cc-formulaire .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 14px 16px;
	border-radius: var(--cc-rayon-petit);
	font-size: 15px;
}

/* Cartes d'événements (Essential Addons, grille d'articles). */
.cc-articles .eael-grid-post-holder {
	border: 0;
	border-radius: var(--cc-rayon);
	box-shadow: var(--cc-ombre);
	overflow: hidden;
	transition: transform .55s var(--cc-ressort), box-shadow .3s ease;
}

.cc-articles .eael-grid-post-holder:hover {
	transform: translateY(-4px);
	box-shadow: var(--cc-ombre-survol);
}

.cc-articles .eael-entry-wrapper {
	padding: 24px;
}

.cc-articles .eael-entry-title {
	margin-bottom: 8px;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
}

.cc-articles .eael-entry-title a {
	color: var(--cc-noir);
	text-decoration: none;
}

.cc-articles .eael-entry-title a:hover {
	color: var(--cc-bleu);
}

.cc-articles .eael-grid-post-excerpt p {
	color: var(--cc-texte-2);
	font-size: 15px;
	line-height: 1.55;
}

.cc-articles .eael-post-elements-readmore-btn {
	color: var(--cc-bleu);
	font-weight: 500;
	text-decoration: none;
}

.cc-articles .eael-entry-footer,
.cc-articles .eael-posted-on {
	color: var(--cc-gris);
	font-size: 13px;
}

/* Articles (événements) : ligne « Catégorie · date », titre et texte aux couleurs du site. */
.single-post .entry-header .entry-meta {
	display: none;
}

/* Elementor masque le titre des pages sur tout le site : on le réaffiche pour les articles. */
.single-post {
	--page-title-display: block;
}

.cc-article-meta {
	margin: 0 0 12px;
	color: var(--cc-orange-lisible);
	font-size: 15px;
	font-weight: 500;
}

.single-post .entry-title {
	color: var(--cc-noir);
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.single-post .entry-content {
	color: var(--cc-texte-2);
	font-size: 18px;
	line-height: 1.65;
}

.single-post .entry-content img {
	border-radius: var(--cc-rayon);
}

@media (max-width: 767px) {
	.single-post .entry-title {
		font-size: 32px;
	}
}

/* Questions fréquentes : signe + / – à droite. */
details > summary {
	position: relative;
	padding-right: 36px;
}

details > summary::-webkit-details-marker {
	display: none;
}

details > summary::after {
	content: "+";
	position: absolute;
	top: -2px;
	right: 4px;
	color: var(--cc-bleu);
	font-size: 24px;
	font-weight: 300;
}

details[open] > summary::after {
	content: "–";
}

/* ==========================================================================
   6. Apparition douce au défilement (voir animations.js)
   ========================================================================== */

.cc-js body:not(.elementor-editor-active) .cc-carte-blanche,
.cc-js body:not(.elementor-editor-active) .cc-carte,
.cc-js body:not(.elementor-editor-active) .cc-articles article,
.cc-js body:not(.elementor-editor-active) .elementor-widget-heading h2.elementor-heading-title {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s var(--cc-sortie), transform .6s var(--cc-sortie), box-shadow .3s ease;
}

/* Même poids que les règles ci-dessus, pour que l'élément révélé l'emporte toujours. */
.cc-js body:not(.elementor-editor-active) .cc-carte-blanche.cc-visible,
.cc-js body:not(.elementor-editor-active) .cc-carte.cc-visible,
.cc-js body:not(.elementor-editor-active) .cc-articles article.cc-visible,
.cc-js body:not(.elementor-editor-active) .elementor-widget-heading h2.elementor-heading-title.cc-visible {
	opacity: 1;
	transform: none;
}

.cc-js body:not(.elementor-editor-active) .cc-carte-blanche.cc-visible:hover,
.cc-js body:not(.elementor-editor-active) .cc-carte.cc-visible:hover {
	transform: translateY(-4px);
}

/* ==========================================================================
   7. Rythme vertical : sections plus resserrées
   ========================================================================== */

[data-elementor-type="wp-page"] > .e-con.e-parent {
	--padding-top: 64px !important;
	--padding-bottom: 64px !important;
}

/* Pas de marge sous le dernier paragraphe d'un bloc de texte (Astra en ajoute une partout). */
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child {
	margin-bottom: 0;
}

/* Section de même couleur que la précédente : pas de marge en double (voir animations.js). */
[data-elementor-type="wp-page"] > .e-con.e-parent.cc-meme-fond {
	--padding-top: 0px !important;
}

[data-elementor-type="wp-page"] > .e-con.e-parent:first-child {
	--padding-top: 56px !important;
	--padding-bottom: 64px !important;
}

@media (max-width: 767px) {
	[data-elementor-type="wp-page"] > .e-con.e-parent,
	[data-elementor-type="wp-page"] > .e-con.e-parent:first-child {
		--padding-top: 48px !important;
		--padding-bottom: 48px !important;
	}

	[data-elementor-type="wp-page"] > .e-con.e-parent.cc-meme-fond {
		--padding-top: 0px !important;
	}
}

/* ==========================================================================
   8. Accessibilité : moins d'animations si l'appareil le demande
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.cc-apparait {
		animation: none;
	}

	.cc-carte,
	.cc-carte-blanche,
	.cc-bouton .elementor-button {
		transition: none;
	}

	.cc-carte:hover,
	.cc-carte-blanche:hover,
	.cc-bouton .elementor-button:hover,
	.cc-bouton .elementor-button:active {
		transform: none;
	}
}