/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* ==========================================================================
   GLOBAL — anti scroll horizontal (panier latéral OceanWP positionné hors écran)
   clip préserve position:sticky contrairement à hidden.
   ========================================================================== */
html,
body,
#outer-wrap,
#wrap {
	overflow-x: clip;
}

/* Logo responsive : OceanWP impose max-width:400px (Customizer non accessible par
   SFTP/API → réglage en CSS). Le logo 400px déborde le viewport mobile et se fait couper.
   On le contraint à la largeur disponible. !important pour battre le style OceanWP. */
@media (max-width: 768px) {
	#site-logo #site-logo-inner .custom-logo {
		max-width: min(62vw, 240px) !important;
		max-height: 46px !important;
		width: auto !important;
		height: auto !important;
	}
}

/* Marge haut/bas du logo réduite (OceanWP met 30px par défaut) */
.top-header-wrap {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

/* --- Recherche header : loupe or à gauche, barre qui s'ouvre vers la DROITE au clic --- */
/* Conteneur en flex : loupe (gauche) + input (droite) */
body #medium-searchform .header-searchform {
	display: flex !important;
	flex-direction: row-reverse !important; /* loupe (dernier visible) passe à gauche */
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem;
	background: transparent !important;
}
body #medium-searchform,
body #medium-searchform .header-searchform-wrap {
	background: transparent !important;
}
/* Loupe en or, à gauche */
body #medium-searchform .search-submit {
	position: static !important; /* OceanWP la met en absolute right:0 → on la remet dans le flux */
	flex: none;
	cursor: pointer;
	padding: 0;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	/* taille + couleur pilotées par le Customizer via cyw_header_icons_dynamic_css() */
}
/* L'ordre est géré par flex-direction: row-reverse (loupe à gauche, input à droite).
   On masque la div.search-bg pour qu'elle ne crée pas d'espace. */
/* OceanWP impose `#site-header.medium-header #medium-searchform input { background:transparent!important }`
   (3 IDs/classes). On le bat avec un sélecteur d'égale spécificité + #medh-input. */
#site-header.medium-header #medium-searchform input#medh-input,
body input#medh-input[type="search"] {
	width: 220px;
	max-width: 45vw;
	opacity: 1;
	transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, border-width 0.25s ease;
	background-color: #ffffff !important;
	background-image: none !important;
	color: #0a0a0a !important;
	border: 1px solid #E3B861 !important;
	border-radius: 4px;
	padding: 7px 12px !important;
	height: auto !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}
body #medium-searchform #medh-input::placeholder {
	color: #888 !important;
}
/* Masquer le label + fond natif */
body #medium-searchform label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
body #medium-searchform .search-bg {
	display: none !important;
}
/* Fermé PAR DÉFAUT (dès le CSS, pour éviter le flash au chargement = FOUC).
   L'input est ouvert uniquement quand le JS ajoute .cyw-search--open. */
#site-header.medium-header #medium-searchform input#medh-input,
body #medium-searchform #medh-input {
	width: 0 !important;
	opacity: 0;
	padding-inline: 0 !important;
	border-width: 0 !important;
	pointer-events: none;
}
#site-header.medium-header #medium-searchform.cyw-search--open input#medh-input,
body #medium-searchform.cyw-search--open #medh-input {
	width: 220px !important;
	max-width: 45vw;
	opacity: 1;
	padding: 7px 12px !important;
	border-width: 1px !important;
	pointer-events: auto;
}

/* Icônes compte + panier dans la top-bar (à droite du logo) */
.cyw-header-icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.3rem;
	height: 100%;
}
.cyw-header-icons__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #E3B861;
	font-size: 14px;
	line-height: 1;
	transition: opacity 0.2s ease;
}
.cyw-header-icons__link:hover {
	opacity: 0.7;
}

/* Panier natif OceanWP intégré dans la zone icônes : retirer la puce + aligner */
.cyw-header-cart,
.cyw-header-cart li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.cyw-header-cart,
.cyw-header-cart li,
.cyw-header-cart a {
	display: flex !important;
	align-items: center;
	line-height: 1 !important;
}
.cyw-header-cart a {
	gap: 4px;
}
/* Panier : couleur or cohérente avec l'icône compte (taille native 14px conservée) */
.cyw-header-cart a,
.cyw-header-cart i,
.cyw-header-cart .icon-handbag {
	color: #E3B861 !important;
}
.cyw-header-cart a:hover,
.cyw-header-cart a:hover i {
	color: #E3B861 !important;
	opacity: 0.7;
}

/* Masquer le panier dupliqué dans la barre de menu (on garde celui du top) */
#site-navigation .wcmenucart,
#site-navigation li.wcmenucart-toggle-sub-menu,
.dropdown-menu .wcmenucart {
	display: none !important;
}


/* Mini-panier dropdown — décalage bord droit */
.owp-mini-cart { right: 50px !important; }

/* Croix supprimer article — recentrée verticalement */
.woocommerce-mini-cart-item .remove.remove_from_cart_button {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	line-height: 1;
	margin-left: auto;
}

/* Boutons mini-panier — couleurs injectées dynamiquement via cyw_header_icons_dynamic_css() */

/* ==========================================================================
   HOME PREMIUM — ciblé .page-id-948 uniquement (aucun effet sur le reste du site)
   Charte : noir / blanc / or #E3B861 + accent corail #ff5a3c
   ========================================================================== */

:root {
	/* Primitives */
	--cyw-gold: #E3B861;
	--cyw-gold-deep: #b8923f;
	--cyw-coral: #ff5a3c;
	--cyw-ink: #0a0a0a;
	--cyw-white: #ffffff;
	--cyw-grey: #777777;
	--cyw-grey-light: #cfcfcf;

	/* Tokens sémantiques */
	--cyw-accent: var(--cyw-gold);
	--cyw-cta: var(--cyw-coral);
}

/* --- Support alignfull / alignwide (OceanWP ne le gère pas nativement) ---
   Anti-débordement : on borne le contenu, et on étire SANS 100vw (qui inclut
   la scrollbar et provoque le scroll horizontal vu sur mobile). --- */
.page-id-948 .entry {
	--cyw-gutter: clamp(1.25rem, 5vw, 4rem); /* gouttière latérale fluide */
	overflow-x: clip; /* coupe tout débordement résiduel sans bloquer le sticky */
}

/* Blocs NON full-width : gouttière latérale pour ne pas coller aux bords */
.page-id-948 .entry > :not(.alignfull) {
	padding-inline: var(--cyw-gutter);
	box-sizing: border-box;
}

/* Blocs full-width : étirés sans 100vw, padding interne via la gouttière */
.page-id-948 .entry > .alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	padding-inline: var(--cyw-gutter);
	box-sizing: border-box;
}

/* Le media-text étire son image bord à bord, donc on n'ajoute la gouttière
   qu'au contenu texte, pas au conteneur (sinon l'image se décolle) */
.page-id-948 .entry > .wp-block-media-text.alignfull {
	padding-inline: 0;
}
.page-id-948 .wp-block-media-text.alignfull .wp-block-media-text__content {
	padding-inline: var(--cyw-gutter);
}

/* alignwide : borné et centré dans la gouttière */
.page-id-948 .entry > .alignwide {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--cyw-gutter);
	box-sizing: border-box;
}

/* --- Typographie : titres plus grands, graisses fortes, letter-spacing serré --- */
.page-id-948 .entry h1,
.page-id-948 .entry h2 {
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
}

.page-id-948 .entry h2 {
	font-size: clamp(23px, 19px + 1vw, 28px) !important;
}

/* Titres sur fond noir : blanc franc pour le contraste */
.page-id-948 .has-background h2.wp-block-heading {
	color: var(--cyw-white);
}

.page-id-948 .entry h3 {
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* H3 titres de cards collection + sous-titres bloc SEO : +~12% (origine 13-16px) */
.page-id-948 .wp-block-columns .wp-block-cover h3.wp-block-heading {
	font-size: clamp(18px, 15px + 0.4vw, 19px) !important;
}
.page-id-948 .entry > .alignfull h3.wp-block-heading,
.page-id-948 .entry > .alignwide h3.wp-block-heading {
	font-size: clamp(15px, 13px + 0.3vw, 16px) !important;
}

/* Chiffres clés stats : +~12% (origine 36px) */
.page-id-948 .has-background h3.wp-block-heading[style*="E3B861"] {
	font-size: clamp(40px, 34px + 1vw, 42px) !important;
	line-height: 1;
}

/* Hero : hauteur proportionnelle à l'écran (430px fixe = écrasé sur desktop) */
.page-id-948 .entry > .wp-block-cover.aligncenter,
.page-id-948 .entry .wp-block-cover:first-child {
	min-height: 60vh !important;
}
@media (max-width: 768px) {
	.page-id-948 .entry > .wp-block-cover.aligncenter,
	.page-id-948 .entry .wp-block-cover:first-child {
		min-height: 50vh !important;
	}
}

.page-id-948 .wp-block-cover h1.wp-block-heading {
	font-size: clamp(36px, 30px + 2vw, 50px) !important;
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* ⚠️ OceanWP règle html { font-size: 62.5% } → 1rem = 10px (pas 16px) !
   Tous les rem sont donc divisés par 1,6. On raisonne en px/vw absolus pour
   garantir des tailles réelles, et !important pour battre les font-size inline. */

/* Corps de texte : 16px pile (standard e-commerce / minimum lisibilité) */
.page-id-948 .entry p,
.page-id-948 .entry li {
	font-size: 16px !important;
	line-height: 1.75;
}

/* Sous-titre hero : +~12% (origine 16px) */
.page-id-948 .wp-block-cover h1.wp-block-heading + p,
.page-id-948 .wp-block-cover .wp-block-cover__inner-container > p {
	font-size: clamp(18px, 15px + 0.5vw, 20px) !important;
	letter-spacing: 0.01em;
}

/* Intro bandeau noir + labels stats : +~12% (origine 12-15px), contrastés */
.page-id-948 .has-background p[style*="cfcfcf"] {
	color: #e8e8e8 !important;
	font-size: clamp(14px, 12px + 0.3vw, 16px) !important;
}

/* Sous-titres dans les cards collection (paragraphe blanc) : +~12% (origine 12px) */
.page-id-948 .wp-block-columns .wp-block-cover p {
	font-size: clamp(14px, 12px + 0.3vw, 15px) !important;
	line-height: 1.55;
}

/* Eyebrow "COLLECTION" (origine ~9px, illisible) : 13px en majuscules espacées */
.page-id-948 .wp-block-cover p[style*="text-transform"] {
	font-size: 13px !important;
}

/* Pitch sous les titres de section (gris) : 16px */
.page-id-948 .entry p[style*="777777"],
.page-id-948 .entry p[style*="5a6478"] {
	font-size: 16px !important;
}

/* --- Espacements généreux entre les sections --- */
.page-id-948 .entry > .wp-block-group,
.page-id-948 .entry > .wp-block-media-text,
.page-id-948 .entry > .wp-block-columns {
	margin-block: 0;
}

/* --- Images des sections Voyage / Pro (media-text) ---
   Étaient trop grandes (563px, étirées) avec marges différentes et sans arrondi.
   On contraint la hauteur, on recadre proprement (cover) et on arrondit. */
.page-id-948 .entry .wp-block-media-text {
	padding-block: 3.5rem !important; /* aligné sur les autres sections */
	align-items: center;
}
.page-id-948 .entry .wp-block-media-text__media {
	padding-inline: var(--cyw-gutter); /* marge latérale → l'arrondi respire */
}
.page-id-948 .entry .wp-block-media-text__media img {
	height: clamp(280px, 32vw, 420px) !important;
	width: 100%;
	object-fit: cover !important;
	border-radius: 16px;
	display: block;
}

/* --- Boutons premium : pilule, graisse, hover affirmé ---
   Les boutons étaient à 9px (font-size inline 0.9rem rabaissé par OceanWP) → !important. */
.page-id-948 .entry .wp-block-button__link {
	font-size: clamp(14px, 13px + 0.2vw, 15px) !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding-block: 0.85rem;
	padding-inline: 1.8rem;
	border-radius: 999px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.page-id-948 .entry .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}

/* CTA corail — la seule touche de couleur vive */
.page-id-948 .entry .wp-block-button__link[style*="ff5a3c"]:hover {
	background-color: color-mix(in srgb, var(--cyw-coral) 88%, black) !important;
}

/* --- Cards collection : overlay plus dramatique + accent or au survol --- */
.page-id-948 .wp-block-columns .wp-block-cover {
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-id-948 .wp-block-columns .wp-block-cover:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgb(0 0 0 / 0.28);
}

.page-id-948 .wp-block-columns .wp-block-cover img {
	transition: transform 0.4s ease;
}

.page-id-948 .wp-block-columns .wp-block-cover:hover img {
	transform: scale(1.05);
}


/* --- Respect des préférences de mouvement --- */
@media (prefers-reduced-motion: reduce) {
	.page-id-948 .entry .wp-block-button__link,
	.page-id-948 .wp-block-columns .wp-block-cover,
	.page-id-948 .wp-block-columns .wp-block-cover img {
		transition: none;
	}
	.page-id-948 .entry .wp-block-button__link:hover,
	.page-id-948 .wp-block-columns .wp-block-cover:hover {
		transform: none;
	}
}

/* ==========================================================================
   ONGLETS (page Informations légales) — radio hack, 0 JS
   ========================================================================== */
.cyw-tabs {
	margin-top: 2.5rem;
}
.cyw-tabs__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.cyw-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	margin-bottom: 2rem;
}
.cyw-tabs__label {
	cursor: pointer;
	padding: 0.85rem 1.2rem;
	font-size: clamp(15px, 13px + 0.4vw, 18px);
	font-weight: 600;
	color: #777;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.cyw-tabs__label:hover {
	color: var(--cyw-ink, #0a0a0a);
}
.cyw-tabs__panel {
	display: none;
	font-size: clamp(16px, 14px + 0.4vw, 18px);
	line-height: 1.7;
}
.cyw-tabs__panel h2 {
	font-size: clamp(24px, 18px + 1.5vw, 34px) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 1.2rem;
}
.cyw-tabs__panel h3 {
	font-size: clamp(18px, 15px + 0.5vw, 22px) !important;
	font-weight: 700;
	margin-top: 1.8rem;
}
/* Onglet actif souligné (radios DANS .cyw-tabs) */
.cyw-tabs:has(#cyw-tab-1:checked) label[for="cyw-tab-1"],
.cyw-tabs:has(#cyw-tab-2:checked) label[for="cyw-tab-2"],
.cyw-tabs:has(#cyw-tab-3:checked) label[for="cyw-tab-3"] {
	color: var(--cyw-ink, #0a0a0a);
	border-bottom-color: var(--cyw-gold, #E3B861);
}

/* Liaison radio ↔ panneau : les panneaux sont des blocs Gutenberg FRÈRES de .cyw-tabs.
   On remonte au parent commun (.entry) avec :has() pour piloter l'affichage. */
.entry:has(#cyw-tab-1:checked) .cyw-panel-1,
.entry:has(#cyw-tab-2:checked) .cyw-panel-2,
.entry:has(#cyw-tab-3:checked) .cyw-panel-3 {
	display: block;
}

/* ==========================================================================
   FAQ (page Contact & FAQ) — accordéons <details>, 0 JS
   ========================================================================== */
.cyw-faq {
	margin-top: 1rem;
}
.cyw-faq__cat {
	font-size: clamp(19px, 16px + 0.6vw, 24px) !important;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 2.2rem 0 1rem;
	color: var(--cyw-ink, #0a0a0a);
}
.cyw-faq__item {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	margin-bottom: 0.75rem;
	overflow: hidden;
	background: #fff;
}
.cyw-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 1.3rem;
	font-size: clamp(16px, 14px + 0.4vw, 18px);
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.cyw-faq__item summary::-webkit-details-marker {
	display: none;
}
.cyw-faq__item summary::after {
	content: "+";
	font-size: 1.4em;
	font-weight: 400;
	color: var(--cyw-gold, #E3B861);
	transition: transform 0.2s ease;
	flex: none;
}
.cyw-faq__item[open] summary::after {
	transform: rotate(45deg);
}
.cyw-faq__item[open] summary {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.cyw-faq__answer {
	padding: 1.1rem 1.3rem;
	font-size: clamp(15px, 13px + 0.4vw, 17px);
	line-height: 1.7;
}
.cyw-faq__answer p {
	margin: 0 0 0.8rem;
}
.cyw-faq__answer p:last-child {
	margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
	.cyw-faq__item summary::after {
		transition: none;
	}
}
/* ==========================================================================
   FOOTER custom (3 colonnes) — charte noir / or #E3B861
   ========================================================================== */
.cyw-footer {
	background: #0a0a0a;
	color: #cfcfcf;
	padding: 3.5rem 1.5rem 1.5rem;
}
.cyw-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1.3fr;
	gap: 2.5rem;
	align-items: start;
}
.cyw-footer__title {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 1.1rem;
}
.cyw-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cyw-footer__menu li {
	margin-bottom: 0.7rem;
}
.cyw-footer__col--links a,
.cyw-footer__text a {
	color: #cfcfcf;
	text-decoration: none;
	transition: color 0.2s ease;
}
.cyw-footer__col--links a:hover,
.cyw-footer__text a:hover {
	color: #E3B861;
}
.cyw-footer__text {
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 1.1rem;
}
.cyw-footer__text a {
	color: #E3B861;
}
.cyw-footer__hours {
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 1.3rem;
}
.cyw-footer__pay {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.cyw-pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	box-sizing: border-box;
}
.cyw-pay svg {
	height: 100%;
	width: auto;
	display: block;
}
.cyw-footer__logo-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 60px;
	border: 1px dashed #E3B861;
	color: #E3B861;
	border-radius: 8px;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.cyw-footer__col--logo {
	display: flex;
	align-items: center;
	align-self: stretch;
}
.cyw-footer__logo {
	max-width: 240px;
	max-height: 200px;
	width: auto;
	height: auto;
}
.cyw-footer__bottom {
	max-width: 1200px;
	margin: 2.5rem auto 0;
	padding-top: 1.3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	color: #888;
	text-align: center;
}
.cyw-footer__bottom p {
	margin: 0;
}

@media (max-width: 768px) {
	.cyw-footer__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
	.cyw-footer__pay {
		justify-content: center;
	}
}

/* ── Onglet Livraison ───────────────────────────────────────────────────── */
.cyw-tab-livraison {
	padding: 1.5rem 0;
}
.cyw-tliv__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 2rem;
}
.cyw-tliv__block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	background: #f9f9f9;
	border-radius: 10px;
	padding: 1.5rem 1.2rem;
}
.cyw-tliv__icon {
	font-size: 2rem;
	line-height: 1;
}
.cyw-tliv__block strong {
	display: block;
	font-size: 15px;
	margin-bottom: 0.3rem;
	color: #1a1a1a;
}
.cyw-tliv__block p {
	margin: 0;
	font-size: 13px;
	color: #555;
	line-height: 1.5;
}
@media (max-width: 640px) {
	.cyw-tliv__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Pages catégorie — fil d'Ariane en haut, H1 en dessous ── */
.tax-product_cat .page-header-inner {
	display: flex;
	flex-direction: column;
}
.tax-product_cat .page-header-title {
	order: 2;
}
.tax-product_cat .site-breadcrumbs {
	order: 1;
}


/* ── Pages catégorie WooCommerce — description en bas ── */
.cyw-cat-description {
	max-width: 860px;
	margin: 2rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(0,0,0,0.08);
	font-size: 15px;
	color: #555;
	line-height: 1.7;
}