/*
Theme Name: Charlene Obaton
Theme URI: charleneobaton.fr
Author: Malik CANOINE
Description: Thème FSE sur mesure pour Charlene Obaton.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: charleneobaton
*/


/* ==========================================================================
   TABLE DES MATIÈRES
   ========================================================================== 
   1. Styles généraux
   2. Boutons
   3. Cartes et colonnes
   4. Cartes d'étapes
   5. Barre supérieure
   6. Évaluations et avis
   7. Images
   8. Polaroid
   9. Arrière-plans
   10. Logo et navigation
   11. Étapes de rendez-vous
   12. Sections décoratives (plantes)
   13. Media Queries
   ========================================================================== */


/* ==========================================================================
   1. STYLES GÉNÉRAUX
   ========================================================================== */

html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

/* Classes utilitaires d'affichage responsive */
.mobile-only {
	display: none;
}

.desktop-only {
	display: block;
}


/* ==========================================================================
   2. BOUTONS
   ========================================================================== */

/* Transition commune pour tous les boutons */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.is-style-secondary .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Bouton Primary - Hover */
.wp-block-button.is-style-primary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

/* Bouton Secondary - Hover (inversion fond/texte) */
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--green-light);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Boutons avec icône - Via ::before (gauche) ou ::after (droite) */
.wp-block-button[class*="icon-"] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.66em;
}

.wp-block-button[class*="icon-"] .wp-block-button__link::before {
	font-family: 'charleneobaton-icons';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	speak: never;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Icône à droite - Ajouter la classe .icon-after */
.wp-block-button.icon-after .wp-block-button__link::before {
	display: none;
}

.wp-block-button.icon-after .wp-block-button__link::after {
	font-family: 'charleneobaton-icons';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	speak: never;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* CTA sticky mobile - Masqué sur desktop par défaut */
.mobile-sticky-cta {
	display: none !important;
}

/* CTA sticky mobile */
.mobile-sticky-cta,
.mobile-sticky-cta a {
	pointer-events: auto;
}


/* ==========================================================================
   3. CARTES ET COLONNES
   ========================================================================== */

/* Cartes de hauteur égale */
.cards-equal.wp-block-columns {
	align-items: stretch;
}

.cards-equal > .wp-block-column {
	align-self: auto !important;
	display: flex;
	flex-direction: column;
}

.cards-equal > .wp-block-column > .wp-block-group {
	display: flex;
}

.cards-equal > .wp-block-column > .wp-block-group .wp-block-buttons {
	margin-top: auto;
}


/* ==========================================================================
   4. CARTES D'ÉTAPES
   ========================================================================== */

.step-card {
	position: relative;
}

.step-card__number {
	position: absolute;
	top: -2rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	line-height: 1;
	z-index: 2;
	pointer-events: none;
	font-size: 64px !important;
}


/* ==========================================================================
   5. BARRE SUPÉRIEURE
   ========================================================================== */

.topbar {
	text-align: center;
	font-size: 14px;
	position: relative;
	z-index: 1;
}

.topbar.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}


/* ==========================================================================
   6. ÉVALUATIONS ET AVIS
   ========================================================================== */

.rating-line {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: normal;
	flex-wrap: wrap;
	max-width: 100%;
	vertical-align: middle;
}

.rating-line .stars {
	display: inline-flex;
	gap: 0.15rem;
	transform: translateY(1px);
	white-space: nowrap;
}

.star {
	width: 1em;
	height: 1em;
	display: block;
	fill: #f6ad01;
}

.google-logo {
	height: 1.5em;
	width: auto;
	display: inline-block;
	vertical-align: -0.4em;
}


/* ==========================================================================
   7. IMAGES
   ========================================================================== */

.full-width img {
	width: 100%;
}

.align-svg {
	display: flex;
	margin: 0 auto;
}


/* ==========================================================================
   8. POLAROID
   ========================================================================== */

.polaroid-wrap {
	position: relative;
	display: inline-block;
}

.polaroid-wrap figure,
.polaroid-wrap img {
	display: block;
}

.polaroid-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4%;
	margin: 0;
	text-align: center;
	z-index: 2;
	pointer-events: none;
}


/* ==========================================================================
   9. ARRIÈRE-PLANS
   ========================================================================== */

.background-shape {
	background-color: #f4f8f4;
	background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23127a75' fill-opacity='0.09'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-size: 5%;
}


/* ==========================================================================
   10. LOGO ET NAVIGATION
   ========================================================================== */

.navbar-logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.navbar-logo svg {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}


/* ==========================================================================
   11. ÉTAPES DE RENDEZ-VOUS
   ========================================================================== */

.co-rdv-steps {
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 1rem 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.co-rdv-step {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	font-weight: 500;
}

.co-rdv-step .co-s-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: white;
	font-size: 0.82rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}


/* ==========================================================================
   12. SECTIONS DÉCORATIVES (PLANTES)
   ========================================================================== */

.section-plante {
	position: relative;
	overflow: hidden;
}

.section-plante::before {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.section-plante > * {
	position: relative;
	z-index: 1;
}

/* Plante 1 */
.section-plante.plante-1::before {
	width: 350px;
	height: 350px;
	right: -50px;
	top: 0px;
	background-image: url("assets/img/plante-1.svg");
	transform: rotate(250deg);
}

/* Plante 2 */
.section-plante.plante-2::before {
	width: 350px;
	height: 350px;
	left: -40px;
	top: 500px;
	background-image: url("assets/img/plante-2.svg");
	transform: rotate(12deg);
}

/* Plante 3 */
.section-plante.plante-3::before {
	width: 350px;
	height: 350px;
	left: -95px;
	bottom: 51px;
	background-image: url("assets/img/plante-1.svg");
	transform: rotate(49deg);
}

/* Plante 4 */
.section-plante.plante-4::before {
	width: 350px;
	height: 350px;
	right: -50px;
	top: -70px;
	background-image: url("assets/img/plante-3.svg");
	transform: rotate(-90deg);
}

/* Plante 5 */
.section-plante.plante-5::before {
	width: 350px;
	height: 350px;
	right: 20px;
	bottom: -50px;
	background-image: url("assets/img/plante-2.svg");
	transform: scaleX(-1) rotate(0deg);
}


/* ==========================================================================
   13. MEDIA QUERIES
   ========================================================================== */

/* Tablettes et petits écrans (max 768px) */
@media (max-width: 768px) {
	/* Classes utilitaires d'affichage responsive */
	.mobile-only {
		display: block;
	}

	.desktop-only {
		display: none;
	}

	/* Bouton CTA sticky mobile */
	.mobile-sticky-cta {
		display: flex !important;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 20px;
		z-index: 9999;
		justify-content: center;
		pointer-events: none;
	}

	.mobile-sticky-cta > .wp-block-button > .wp-block-button__link {
		box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-color: #083432;
	}

	.mobile-sticky-cta > .wp-block-button__link {
		pointer-events: auto;
	}

	/* Images alignées */
	.wp-block-image.alignleft,
	.wp-block-image.alignright,
	img.alignleft,
	img.alignright {
		float: none !important;
		display: block;
		width: 100% !important;
		margin: 0 0 1rem 0 !important;
	}

	.wp-block-image.alignleft img,
	.wp-block-image.alignright img,
	img.alignleft,
	img.alignright {
		width: 100% !important;
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Sections plantes désactivées sur mobile */
	.section-plante::before {
		display: none;
	}
}

/* Petits mobiles (max 600px) */
@media (max-width: 600px) {
	.co-rdv-steps {
		gap: 1rem;
	}

	.co-rdv-step {
		font-size: 0.88rem;
	}
}

.no-height{
	height: 0 !important;
}