/* ==========================================================================
   CISCO / TACF — Mise en page structurelle
   Barre supérieure, header collant, navigation, menu mobile, footer.
   ========================================================================== */

/* Lien d'évitement (accessibilité) */
.cc-skip-link {
	position: absolute;
	left: -9999px;
}
.cc-skip-link:focus {
	left: 12px; top: 12px;
	z-index: 9999;
	background: var(--cc-primary);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--cc-radius-sm);
}

/* --------------------------------------------------------------------------
   BARRE SUPÉRIEURE
   -------------------------------------------------------------------------- */
.cc-topbar {
	background: var(--cc-dark);
	color: #cbd5e1;
	font-size: .86rem;
}
.cc-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 42px;
	gap: 20px;
}
.cc-topbar a { color: #cbd5e1; }
.cc-topbar a:hover { color: #fff; }
.cc-topbar__contact { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.cc-topbar__account { display: flex; gap: 16px; align-items: center; }
.cc-topbar .dashicons { font-size: 16px; width: 16px; height: 16px; vertical-align: text-bottom; color: var(--cc-primary); }
.cc-topbar__login { font-weight: 600; }

/* --------------------------------------------------------------------------
   HEADER PRINCIPAL
   -------------------------------------------------------------------------- */
.cc-header {
	background: var(--cc-white);
	border-bottom: 1px solid var(--cc-line);
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow .25s ease, padding .25s ease;
}
.cc-header.is-scrolled { box-shadow: var(--cc-shadow); }
.cc-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 84px;
}
.cc-header.is-scrolled .cc-header__inner { min-height: 68px; }

/* Logo */
.cc-header__brand img { max-height: 52px; width: auto; }
.cc-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.cc-logo-text strong {
	font-family: var(--cc-font-title);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--cc-primary);
	letter-spacing: .01em;
}
.cc-logo-text span { font-size: .72rem; color: var(--cc-muted); }

/* Navigation principale */
.cc-nav { margin-left: auto; }
.cc-menu {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cc-menu li { position: relative; }
.cc-menu a {
	display: block;
	font-family: var(--cc-font-title);
	font-weight: 600;
	font-size: .96rem;
	color: var(--cc-dark);
	padding: 10px 14px;
	border-radius: var(--cc-radius-sm);
}
.cc-menu a:hover,
.cc-menu .current-menu-item > a { color: var(--cc-primary); background: var(--cc-primary-soft); }

/* Sous-menu déroulant (ex. Catalogue → catégories) */
.cc-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-radius-sm);
	box-shadow: var(--cc-shadow);
	padding: 8px;
	list-style: none;
	margin: 8px 0 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all .2s ease;
	z-index: 50;
}
.cc-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cc-menu .sub-menu a { font-weight: 500; font-size: .92rem; }

/* Actions à droite (panier + CTA) */
.cc-header__actions { display: flex; align-items: center; gap: 16px; }
.cc-cart { position: relative; color: var(--cc-dark); display: inline-flex; }
.cc-cart .dashicons { font-size: 24px; width: 24px; height: 24px; }
.cc-cart:hover { color: var(--cc-primary); }
.cc-cart__count {
	position: absolute;
	top: -8px; right: -10px;
	background: var(--cc-accent);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	min-width: 18px; height: 18px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	padding: 0 4px;
}
.cc-header__cta { padding: 11px 20px; }

/* Bouton burger (caché en desktop) */
.cc-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.cc-burger span { width: 26px; height: 2px; background: var(--cc-dark); border-radius: 2px; transition: .25s; }

/* Zone de contenu principale */
.cc-main { min-height: 40vh; }

/* --------------------------------------------------------------------------
   FOOTER (compléments à design-system.css)
   -------------------------------------------------------------------------- */
.cc-footer__logo strong { font-family: var(--cc-font-title); font-weight: 800; font-size: 1.5rem; color: #fff; }
.cc-footer__brand p { margin: 14px 0; }
.cc-footer__addr { display: flex; gap: 8px; align-items: flex-start; }
.cc-footer__addr .dashicons { color: var(--cc-primary); }
.cc-footer__menu,
.cc-footer__contact { list-style: none; margin: 0; padding: 0; }
.cc-footer__menu li,
.cc-footer__contact li { margin-bottom: 10px; }
.cc-footer__contact li { display: flex; gap: 10px; align-items: center; }
.cc-footer__contact .dashicons { color: var(--cc-primary); }
.cc-footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.cc-footer__legal a,
.cc-legal-menu { display: inline-flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.cc-footer__legal a { color: #9aa7b8; }

/* --------------------------------------------------------------------------
   RESPONSIVE — MENU MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	.cc-topbar__hours { display: none; }
	.cc-burger { display: flex; }
	.cc-header__actions { order: 3; }

	.cc-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(320px, 84vw);
		background: #fff;
		box-shadow: var(--cc-shadow-lg);
		padding: 90px 20px 30px;
		transform: translateX(100%);
		transition: transform .3s ease;
		z-index: 998;
		overflow-y: auto;
	}
	.cc-nav.is-open { transform: translateX(0); }
	.cc-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.cc-menu a { padding: 14px 12px; border-radius: var(--cc-radius-sm); }
	.cc-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--cc-line);
		border-radius: 0;
		margin: 4px 0 4px 12px;
		padding: 0 0 0 8px;
	}
}

@media (max-width: 640px) {
	.cc-topbar__contact { gap: 14px; font-size: .8rem; }
	.cc-topbar__contact a:last-child { display: none; } /* masque l'email, garde le tel */
	.cc-header__cta { display: none; }                  /* CTA déplacé dans le menu mobile */
	.cc-logo-text strong { font-size: 1.25rem; }
}