/*
Theme Name: Thème FSE Capitaine WP 👨🏼‍✈️
Theme URI: 
Author: Capitaine WP
Author URI: https://capitainewp.io
Description: Thème agence pour le Full Site Editing
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: capitaine
*/

:root {
    color-scheme: light dark;
}

@media (width < 768px) {
    .hide-on-mobile {
        display: none;
    }
}

/* ===== SCROLL =====
===== ===== ===== ===== */

/* ===== scroll général ===== */
html {
	scroll-behavior: smooth;
}

/* ===== Scroll & décalage ancre "question" depuis bouton menu mobile===== */
#question {
	scroll-margin-top: 30px;
}

/* ===== Scroll & décalage ancre "commentaires" depuis image "témoignages" ===== */
#commentaires {
	scroll-margin-top: 30px;
}

/* ===== FIN SCROLL =====
===== ===== ===== ===== */

/* =========================
   HEADER STICKY PROPRE
========================= */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* ===== FIN HEADER STICKY =====
===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */

/* ===== COMPORTEMENTS BOUTONS PAR DÉFAUT WP / transparent / ALT
===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */

/* ===== bouton WP ===== */
.wp-element-button,
.wp-block-button__link {
    transition: 
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0); /* micro profondeur */
}

/* ===== HOVER bouton WP ===== */
.wp-element-button:hover,
.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ===== ACTIVE (clic) bouton WP ===== */
.wp-element-button:active,
.wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* ===== Fin bouton WP ===== */

/* ===== bouton TRANSPARENT ===== */
.wp-block-button.is-style-transparent .wp-block-button__link {
    transition: 
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    border: 1px solid var(--wp--preset--color--primary);
}

/* HOVER spécifique TRANSPARENT */
.wp-block-button.is-style-transparent .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background-color: #98302e;
    color: var(--wp--preset--color--base);
}

/* ACTIVE TRANSPARENT */
.wp-block-button.is-style-transparent .wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* ===== Fin bouton TRANSPARENT ===== */

/* ===== bouton ALT ===== */
.wp-block-button.is-style-alt .wp-block-button__link {
    transition: 
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

/* HOVER spécifique ALT */
.wp-block-button.is-style-alt .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background-color: #2b6fe5;
    color: var(--wp--preset--color--base);
}

/* ACTIVE ALT */
.wp-block-button.is-style-alt .wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* ===== Fin bouton ALT ===== */

/* ===== FIN comportements Bouton WP / Transparent / ALT
===== ===== ===== ===== ===== ===== ===== ===== */

/* ===== COMPORTEMENTS dU HEADER EN RESPONSIVE
===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */

/* ===== gestion du responsive texte et gap toggle menu mobile ===== */

/* Masquer le bouton Réserver sous 380px */
@media (max-width: 380px) {
	.main-header .wp-block-button {
		display: none;
	}
	.wp-block-navigation__responsive-container-open {
		margin-left: auto !important;
	}
}

@media (max-width: 750px) {
	.bandeau-promo,
	.bandeau-promo p,
	.bandeau-promo a,
	.bandeau-promo strong {
		font-size: 15px !important;
	}

	.bandeau-promo img {
		width: 20px !important;
		height: 20px !important;
	}
}

@media (max-width: 600px) {
	.bandeau-promo,
	.bandeau-promo p,
	.bandeau-promo a,
	.bandeau-promo strong {
		font-size: 12px !important;
	}
}

@media (max-width: 500px) {
	.bandeau-promo img {
		width: 15px !important;
		height: 15px !important;
	}
}

/* ===== FIN gestion du responsive texte et gap toggle menu mobile ===== */

/* ===== Gestion du burger ===== */

/* Cache l'icône burger SVG native WP */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	display: none;
}

/* Recrée le burger en CSS*/
/* Bouton toggle */
.wp-block-navigation__responsive-container-open {
	position: relative;
	width: 48px;
	height: 48px;
	background: transparent;
	border: none;
	cursor: pointer;
}

/* base commune */
.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
	position: absolute;
	left: 12px !important;
	height: 2px;
	background: #98302e;
	content: "";
}

/* ligne du haut + milieu (box-shadow) */
.wp-block-navigation__responsive-container-open::before {
	top: 20px !important;
	width: 24px !important;
	box-shadow: 0 6px 0 #98302e !important;
}

/* ligne du bas */
.wp-block-navigation__responsive-container-open::after {
	top: 32px !important;
	width: 16px !important;
}
/* Fin Recrée le burger en CSS*/

/* Styliser le bouton close */
/* Bouton close */
.wp-block-navigation__responsive-container-close {
	width: 26px;
	height: 26px;
	position: absolute;
	top: 30px;
	right: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 8px;
	background: #98302e;
	cursor: pointer;
	box-shadow:
		0 4px 10px rgba(0,0,0,0.05),
		0 1px 2px rgba(0,0,0,0.04);
}

/* Croix */
.wp-block-navigation__responsive-container-close::before,
.wp-block-navigation__responsive-container-close::after {
	content: "";

	position: absolute;

	width: 16px;
	height: 2px;

	background: #fff;

	border-radius: 2px;
}

/* Barre 1 */
.wp-block-navigation__responsive-container-close::before {
	transform: rotate(45deg);
}

/* Barre 2 */
.wp-block-navigation__responsive-container-close::after {
	transform: rotate(-45deg);
}
/* Fin styliser le bouton close */

/* ===== Fin Gestion du burger ===== */

#nav-3 .wp-block-navigation__responsive-dialog {
	margin-top: 0 !important;
}

#nav-3 .wp-block-navigation__responsive-container-content {
	padding-top: 0 !important;
}

/* ===== FIN COMPORTEMENTS dU HEADER EN RESPONSIVE
===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */

/* ===== COMPORTEMENTS HERO RESPONSIVE
===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */

/* --- décalage du hero-section pour compenser le sticky header --- */

.zone-hero {
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

/* --- FIN padding-top appliqué pour compenser le sticky header --- */

/* ======= block columns à la ligne et centré ======= */

@media (max-width: 1100px) {

	/* Le bloc Columns devient vertical */
	.hero-section > .wp-block-columns {
		flex-direction: column !important;
		align-items: center;
		gap: 4rem;
	}

	/* Colonnes pleine largeur */
	.hero-section > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}

	/* ======= CONTENU col. GAUCHE ======= */

	.hero-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* Stack paragraphe + image */
	.hero-stack {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* CTA centré */
	.hero-content .wp-block-buttons {
		justify-content: center;
	}

	/* ======== PHOTOS col. droite ======== */

	.hero-photos {
		width: 100%;
		max-width: 650px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Conserve le chevauchement - la galerie reste horizontale */
	.hero-photos .wp-block-gallery {
		display: flex;
		flex-wrap: nowrap !important;
		justify-content: center;
		align-items: flex-start;
		gap: 0;
		margin-top: -2rem;
	}

	/* Empêche Gutenberg de redimensionner les images */
	.hero-photos .wp-block-gallery .wp-block-image {
		flex: 0 0 auto;
	}
}

/* ======= Fin block columns à la ligne et centré ======= */

/* ===== FIN COMPORTEMENTS HERO RESPONSIVE
===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */

/* ===== FAQ ===== ===== ===== ===== =====
===== ===== ===== ===== ===== ===== =====  */

/* ===== container ===== */
.faq {
	width: 100%;
}

/* ===== ITEM ===== */

.faq-item {
	border-bottom: 1px solid #f7d2d1;
	padding: 0;
	transition: background-color .25s ease;
}

.faq-item:not(:last-child) {
	margin-bottom: 8px;
}

.faq-item:hover {
	background: #fcf4f4;
}

.faq-item.active {
	background: #fcf4f4;
	border-radius: 8px;
}

/* ===== QUESTION ===== */

.faq-question {
	width: 100%;
	text-align: left;
	padding: 24px 50px 24px 0;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 500;
	background: none;
	border: none;
	cursor: pointer;
	position: relative;
	color: inherit;
}

/* ===== ICÔNE + / - ===== */

.faq-question::before,
.faq-question::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 16px;
	height: 2px;
	background: currentColor;
	transform-origin: center;
	transition: all .3s ease;
}

/* trait horizontal */

.faq-question::after {
	transform: translateY(-50%);
}

/* trait vertical */

.faq-question::before {
	transform: translateY(-50%) rotate(90deg);
}

/* devient un - */

.faq-item.active .faq-question::before {
	opacity: 0;
	transform: translateY(-50%) rotate(90deg) scale(0);
}

/* ===== ANSWER ===== */

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s ease;
}

/* contenu */

.faq-answer > * {
	padding-bottom: 24px;
}

/* animation du texte */

.faq-answer p,
.faq-answer ul,
.faq-answer ol {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity .25s ease,
		transform .25s ease;
}

.faq-item.active .faq-answer p,
.faq-item.active .faq-answer ul,
.faq-item.active .faq-answer ol {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .1s;
}

/* ===== TYPO ===== */

.faq-answer p:last-child {
	margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
	padding-left: 20px;
}

.faq-answer li {
	margin-bottom: 8px;
}

/* ===== Fin FAQ ===== ===== ===== =====
===== ===== ===== ===== ===== ===== ===== =====  */