/* ============================================================
   Rocasol — CSS custom
   Remplace le CSS Oxygen (#_header-30-16, #section-55-16…)
   Palette : dark #23232d · orange #f58127 · white #fff
   ============================================================ */

:root {
	--roca-dark   : #23232d;
	--roca-orange : #f58127;
	--roca-white  : #ffffff;
	--roca-light  : #f9f9fa;
	--roca-max-w  : 1200px;
	--roca-pad    : 20px;
}

/* ── Utilitaire container ─────────────────────────────── */
.roca-container {
	max-width : var(--roca-max-w);
	margin    : 0 auto;
	padding   : 0 var(--roca-pad);
	width     : 100%;
	box-sizing: border-box;
}

/* ============================================================
   HEADER
   ============================================================ */

.roca-header {
	background : var(--roca-dark);
	position   : relative;
	z-index    : 100;
}

/* ── Row base ─────────────────────────────────────────── */
.roca-row { width: 100%; }

.roca-row .roca-container {
	display    : flex;
	align-items: center;
}

/* ── Row 1 : Logo + social ──────────────────────────── */
.roca-row--logo {
	background : var(--roca-dark);
	padding    : 12px 0;
}

.roca-row--logo .roca-container {
	justify-content: center;
	position       : relative;
}

.roca-row--logo .roca-row__right {
	position: absolute;
	right   : var(--roca-pad);
	top     : 50%;
	transform: translateY(-50%);
}

.roca-logo-link  { display: flex; align-items: center; text-decoration: none; }
.roca-logo--lg   { display: block; }

/* ── Row 2 : Navigation ───────────────────────────────── */
.roca-row--nav {
	background: linear-gradient(var(--roca-dark) 93%, var(--roca-orange) 7%);
}

.roca-row--nav .roca-container {
	justify-content: center;
	gap            : 0;
	flex-wrap      : wrap;
	position       : relative;
}

/* ── Row 3 : Sticky (masqué par défaut) ──────────────── */
.roca-row--sticky { display: none; }

.roca-row--sticky .roca-container {
	justify-content: space-between;
}

.roca-row__left, .roca-row__center, .roca-row__right {
	display    : flex;
	align-items: center;
}

.roca-logo--sm { display: block; }

/* ── Sticky actif ─────────────────────────────────────── */
.roca-header--sticky {
	position  : fixed;
	top       : 0;
	left      : 0;
	right     : 0;
	z-index   : 9999;
	box-shadow: 0 0 10px rgba(0,0,0,.35);
	animation : roca-fadein .3s ease;
}

.roca-header--sticky .roca-row--logo,
.roca-header--sticky .roca-row--nav  { display: none; }
.roca-header--sticky .roca-row--sticky { display: block; }

.roca-row--sticky {
	background: linear-gradient(var(--roca-dark) 92%, var(--roca-orange) 8%);
}

@keyframes roca-fadein {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* ── Navigation menu ─────────────────────────────────── */
.roca-nav { display: flex; align-items: center; }

.roca-nav__list {
	display       : flex;
	align-items   : center;
	list-style    : none;
	margin        : 0;
	padding       : 0;
	flex-direction: row;
	flex-wrap     : wrap;
}

.roca-nav__list .menu-item { position: relative; }

.roca-nav__list .menu-item > a {
	display        : block;
	padding        : 20px;
	font-size      : 12px;
	color          : var(--roca-white);
	font-weight    : 700;
	letter-spacing : 1px;
	text-transform : uppercase;
	text-decoration: none;
	transition     : color .2s;
	white-space    : nowrap;
}

.roca-nav__list .menu-item > a:hover,
.roca-nav__list .current-menu-item > a,
.roca-nav__list .current-menu-ancestor > a { color: var(--roca-orange); }

/* Dropdown */
.roca-nav__list .sub-menu {
	position  : absolute;
	top       : 100%;
	left      : 0;
	background: var(--roca-dark);
	list-style: none;
	margin    : 0;
	padding   : 0;
	min-width : 220px;
	display   : none;
	z-index   : 200;
	box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.roca-nav__list .menu-item-has-children:hover   > .sub-menu,
.roca-nav__list .menu-item-has-children:focus-within > .sub-menu,
.roca-nav__list .roca-submenu--open > .sub-menu { display: block; }

.roca-nav__list .sub-menu .menu-item > a {
	padding   : 12px 20px;
	font-size : 12px;
	white-space: nowrap;
	color     : var(--roca-light);
}

.roca-nav__list .sub-menu .menu-item > a:hover { color: var(--roca-orange); }

/* ── Hamburger ────────────────────────────────────────── */
.roca-hamburger {
	display        : none;
	flex-direction : column;
	justify-content: space-between;
	width          : 24px;
	height         : 18px;
	background     : none;
	border         : none;
	cursor         : pointer;
	padding        : 0;
	margin-right   : 12px;
	flex-shrink    : 0;
}

.roca-hamburger span {
	display   : block;
	width     : 100%;
	height    : 2px;
	background: var(--roca-white);
	transition: transform .2s, opacity .2s;
}

.roca-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.roca-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.roca-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Social ───────────────────────────────────────────── */
.roca-social__link {
	display    : flex;
	align-items: center;
	padding-left: 14px;
	color      : var(--roca-white);
	text-decoration: none;
}

.roca-social__icon { display: block; }

/* ── Mini-cart ────────────────────────────────────────── */
.roca-cart {
	position: relative;
	display : flex;
	align-items: center;
	margin-left: 4px;
}

.roca-cart__trigger {
	position       : relative;
	display        : flex;
	align-items    : center;
	color          : var(--roca-light);
	padding        : 8px;
	text-decoration: none;
}

.roca-cart__trigger:hover { color: var(--roca-orange); }

.roca-cart__badge {
	position       : absolute;
	top            : 2px;
	right          : 2px;
	min-width      : 14px;
	height         : 14px;
	border-radius  : 50%;
	background     : var(--roca-orange);
	color          : #fff;
	font-size      : 9px;
	font-weight    : 800;
	display        : flex;
	align-items    : center;
	justify-content: center;
	line-height    : 1;
	padding        : 0 2px;
}

.roca-cart__badge:empty { display: none; }

.roca-cart__flyout {
	position      : absolute;
	right         : 0;
	top           : 100%;
	min-width     : 300px;
	background    : var(--roca-dark);
	padding       : 16px;
	z-index       : 9999;
	opacity       : 0;
	pointer-events: none;
	transition    : opacity .2s ease;
	box-shadow    : 0 4px 16px rgba(0,0,0,.4);
}

.roca-cart:hover    .roca-cart__flyout,
.roca-cart:focus-within .roca-cart__flyout {
	opacity       : 1;
	pointer-events: all;
}

/* Contenu WooCommerce dans le flyout */
.roca-cart__flyout .woocommerce-mini-cart-item a         { color: var(--roca-orange); }
.roca-cart__flyout .woocommerce-mini-cart__total strong,
.roca-cart__flyout .woocommerce-Price-amount,
.roca-cart__flyout .quantity,
.roca-cart__flyout .woocommerce-mini-cart__empty-message { color: var(--roca-light); }

.roca-cart__flyout ul.product_list_widget {
	list-style: none;
	padding   : 0;
	margin    : 0;
}

.roca-cart__flyout .product_list_widget li {
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding      : 8px 0;
	list-style   : none;
	display      : flex;
	align-items  : center;
}

.roca-cart__flyout .woocommerce-mini-cart__buttons {
	display       : flex;
	flex-direction: column;
	margin-top    : 12px;
}

.roca-cart__flyout .woocommerce-mini-cart__buttons .button {
	display        : flex;
	justify-content: center;
	width          : 100%;
	background     : var(--roca-orange);
	padding        : 12px 24px;
	color          : #fff;
	font-size      : 12px;
	font-weight    : 700;
	text-transform : uppercase;
	letter-spacing : 1px;
	text-decoration: none;
	border         : 1px solid var(--roca-orange);
	margin-bottom  : 8px;
	transition     : background .2s, border-color .2s;
	box-sizing     : border-box;
}

.roca-cart__flyout .woocommerce-mini-cart__buttons .button:last-child { margin-bottom: 0; }

.roca-cart__flyout .woocommerce-mini-cart__buttons .button:first-child {
	background  : #fff;
	color       : var(--roca-dark);
	border-color: #ccc;
}

.roca-cart__flyout .woocommerce-mini-cart__buttons .button:hover {
	background  : #1e56a6;
	border-color: #1e56a6;
	color       : #fff;
}

.roca-cart__flyout .woocommerce-mini-cart__buttons .button:first-child:hover {
	border-color: #6799b2;
	color       : #6799b2;
	background  : #fff;
}

/* ============================================================
   FOOTER
   ============================================================ */

.roca-footer {
	background: linear-gradient(var(--roca-orange) 2%, var(--roca-dark) 2%);
	padding   : 20px 0;
	color     : var(--roca-white);
}

.roca-footer__cols {
	display: flex;
	gap    : 0;
	align-items: flex-start;
}

.roca-footer__col {
	flex      : 1;
	padding   : 16px;
	box-sizing: border-box;
}

/* Col 1 : menu vertical gauche */
.roca-footer__col--nav { text-align: left; align-items: flex-start; }

.roca-footer-nav { width: 100%; }

.roca-footer-nav__list {
	list-style    : none;
	margin        : 0;
	padding       : 0;
	display       : flex;
	flex-direction: column;
	align-items   : flex-start;
}

.roca-footer-nav__list .menu-item > a {
	display        : block;
	padding        : 8px 20px;
	color          : var(--roca-white);
	font-weight    : 700;
	font-size      : 14px;
	letter-spacing : 1px;
	text-transform : uppercase;
	text-decoration: none;
	transition     : color .15s;
}

.roca-footer-nav__list .menu-item > a:hover { color: var(--roca-orange); }

/* Col 2 : centré */
.roca-footer__col--center {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	text-align     : center;
}

.roca-footer__logo { margin-bottom: 20px; display: block; }

.roca-footer-nav-b__list {
	list-style    : none;
	margin        : 0;
	padding       : 0;
	display       : flex;
	flex-direction: column;
	align-items   : center;
}

.roca-footer-nav-b__list .menu-item > a {
	display        : block;
	padding        : 8px 20px;
	color          : var(--roca-light);
	font-size      : 13px;
	font-weight    : 700;
	text-decoration: none;
	transition     : color .15s;
}

.roca-footer-nav-b__list .menu-item > a:hover { color: var(--roca-orange); }

.roca-footer__partners {
	display        : flex;
	align-items    : center;
	justify-content: space-around;
	gap            : 10px;
	margin-top     : 16px;
	flex-wrap      : wrap;
}

.roca-footer__partners img { height: 40px; width: auto; }

/* Col 3 : contact droite */
.roca-footer__col--contact {
	display        : flex;
	flex-direction : column;
	align-items    : flex-end;
	text-align     : right;
}

.roca-footer__heading {
	color        : var(--roca-white);
	margin-bottom: 12px;
	margin-top   : 0;
	font-size    : 1em;
	font-weight  : 700;
}

.roca-footer__col--contact .roca-footer__heading + .roca-footer__heading,
.roca-footer__col--contact h4:not(:first-child) { margin-top: 24px; }

.roca-footer__link {
	display        : block;
	color          : var(--roca-white);
	text-decoration: none;
	transition     : color .15s;
}

.roca-footer__link:hover { color: var(--roca-orange); }

/* Social dans footer */
.roca-footer__col--contact .roca-social__link { padding-left: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablette (< 1120px) : header colonnes */
@media (max-width: 1120px) {
	.roca-row--logo .roca-container {
		flex-direction: column;
		padding-bottom: 0;
	}
	.roca-row--logo .roca-row__right {
		position : static;
		transform: none;
		margin-top: 4px;
	}
	#_header_row-50-16 { padding-top: 15px; }
}

/* Tablette (< 991px) */
@media (max-width: 991px) {
	.roca-nav__list .menu-item > a {
		padding: 12px;
	}
	.roca-footer__cols {
		flex-wrap: wrap;
	}
	.roca-footer__col--nav,
	.roca-footer__col--contact {
		flex       : 1 1 45%;
		text-align : center;
		align-items: center;
	}
	.roca-footer-nav__list { align-items: center; }
	.roca-footer__col--center { flex: 1 1 100%; order: -1; }
}

/* Mobile (< 767px) : hamburger */
@media (max-width: 767px) {
	.roca-hamburger { display: flex; }

	/* Header compacté : on récupère ~210 px gaspillés.
	   1) On masque l'icône Facebook isolée (redondante avec le footer). */
	.roca-row--logo .roca-row__right { display: none; }
	/* 2) Logo et rangées resserrés. */
	.roca-row--logo { padding: 8px 0; }
	.roca-row--logo .roca-container { padding-bottom: 0; }
	.roca-logo--lg {
		max-height: 54px;
		width     : auto;
		height    : auto;
	}
	.roca-row--nav { padding: 2px 0; }

	#roca-nav-main {
		position  : absolute;
		top       : 100%;
		left      : 0;
		right     : 0;
		background: var(--roca-dark);
		z-index   : 1000;
		display   : none;
	}

	#roca-nav-main.roca-nav--open { display: block; }

	#roca-nav-main .roca-nav__list {
		flex-direction: column;
		width         : 100%;
	}

	#roca-nav-main .roca-nav__list .menu-item { width: 100%; }

	#roca-nav-main .roca-nav__list .menu-item > a {
		padding: 12px 20px;
		width  : 100%;
	}

	#roca-nav-main .roca-nav__list .sub-menu {
		position  : static;
		display   : block;
		padding-left: 20px;
		box-shadow: none;
	}

	/* Footer toutes colonnes en pleine largeur */
	.roca-footer__col,
	.roca-footer__col--nav,
	.roca-footer__col--center,
	.roca-footer__col--contact {
		flex      : 1 1 100%;
		text-align: center !important;
		align-items: center !important;
	}
}

/* Petit mobile (< 479px) */
@media (max-width: 479px) {
	.roca-footer__partners img { height: 30px; }
	.roca-cart { margin-left: 15px; }
}

/* ============================================================
   ACCUEIL (page 17) — contenu centré
   Le design Oxygen d'origine alignait le texte à gauche ;
   sur l'accueil on centre titres, textes et boutons.
   ============================================================ */
body.page-id-17 .entry-content .ct-headline,
body.page-id-17 .entry-content .ct-text-block,
body.page-id-17 .entry-content .ct-link-text,
body.page-id-17 .entry-content p,
body.page-id-17 .entry-content li {
	text-align: center !important;
}

/* Boutons et images centrés horizontalement */
body.page-id-17 .entry-content .ct-link-button {
	margin-left: auto !important;
	margin-right: auto !important;
}