/* CP Atelier — menu plein écran. Variables réglées dans Mon site › Apparence › Menu. */
:root {
	--cpm-bg: #2f2a26;
	--cpm-ink: #fbf8f2;
	--cpm-accent: #d9a75a;
	--cpm-burger: #3a3430;
	--cpm-burger-open: #fbf8f2;
	--cpm-image: none;
	--cpm-overlay: #2f2a26;
	--cpm-overlay-opacity: 82;
	--cpm-fs: 44px;
	--cpm-font: var(--cpc-font-head, Georgia, serif);
	--cpm-ui: var(--cpc-font-ui, system-ui, sans-serif);
	--cpm-ease: cubic-bezier(.77, 0, .175, 1);
	--cpm-x: 100%;
	--cpm-y: 0%;
}

/* ------------------------------------------------------------------ */
/*  En-tête : boutons                                                  */
/* ------------------------------------------------------------------ */
.cpm-actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; position: relative; z-index: 2; }
.cpm-actions-holder { display: none; }
body.cpm-on .site-header .inside-header { gap: 28px; }
body.cpm-on .site-header .main-navigation { margin-left: auto; }
body.cpm-dnav-center .site-header .main-navigation { margin-left: auto; margin-right: auto; }
body.cpm-dnav-center .site-header .main-navigation .main-nav > ul { justify-content: center; }
body.cpm-on .main-navigation .menu-toggle { display: none !important; } /* on remplace le bouton de GeneratePress */
body.cpm-mode-always .site-header .main-navigation { display: none !important; }
body.cpm-mode-always .cpm-actions { margin-left: auto; }

/* Bouton contact */
.cpm-contact {
	display: inline-flex; align-items: center;
	font-family: var(--cpm-ui); font-size: 11.5px; font-weight: 400;
	letter-spacing: .16em; text-transform: uppercase; text-decoration: none !important;
	padding: .95em 1.6em; line-height: 1; border-radius: 999px;
	border: 1px solid var(--cpc-ochre, #b8873a); color: var(--cpc-ink, #3a3430);
	background: transparent;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
	white-space: nowrap;
}
.cpm-contact:hover, .cpm-contact:focus-visible { background: var(--cpc-ochre, #b8873a); color: #fff; transform: translateY(-1px); }
body.cpm-cstyle-solid .cpm-contact { background: var(--cpc-ochre, #b8873a); color: #fff; }
body.cpm-cstyle-solid .cpm-contact:hover { background: var(--cpc-ink, #3a3430); border-color: var(--cpc-ink, #3a3430); }
body.cpm-contact-0 .cpm-contact { display: none !important; }

/* Bouton burger */
.cpm-burger {
	display: none; align-items: center; gap: 12px;
	background: none !important; border: 0 !important; padding: 8px 0 !important; margin: 0;
	color: var(--cpm-burger); cursor: pointer; box-shadow: none !important;
	font-family: var(--cpm-ui); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
	-webkit-tap-highlight-color: transparent;
}
body.cpm-mode-always .cpm-burger { display: inline-flex; }
body.cpm-label-0 .cpm-burger-label { display: none; }
.cpm-burger-label { min-width: 4.4em; text-align: right; transition: color .3s ease; }
.cpm-burger-box { position: relative; width: 30px; height: 18px; display: block; }
.cpm-burger-box span {
	position: absolute; left: 0; height: 1.5px; width: 100%;
	background: currentColor; border-radius: 2px;
	transition: transform .45s var(--cpm-ease), opacity .3s ease, width .35s var(--cpm-ease), top .45s var(--cpm-ease), background .3s ease;
}
.cpm-burger-box span:nth-child(1) { top: 0; }
.cpm-burger-box span:nth-child(2) { top: 8px; }
.cpm-burger-box span:nth-child(3) { top: 16px; }
/* Style « traits décalés » : longueurs différentes, s'alignent au survol */
body.cpm-burger-lines .cpm-burger-box span:nth-child(1) { width: 100%; }
body.cpm-burger-lines .cpm-burger-box span:nth-child(2) { width: 70%; left: auto; right: 0; }
body.cpm-burger-lines .cpm-burger-box span:nth-child(3) { width: 45%; left: auto; right: 0; }
body.cpm-burger-lines .cpm-burger:hover .cpm-burger-box span { width: 100%; }
/* Survol du style « croix » : léger écart des traits */
body.cpm-burger-cross .cpm-burger:hover .cpm-burger-box span:nth-child(1) { transform: translateY(-2px); }
body.cpm-burger-cross .cpm-burger:hover .cpm-burger-box span:nth-child(3) { transform: translateY(2px); }
/* Ouvert : croix */
.cpm-open .cpm-burger { color: var(--cpm-burger-open); }
.cpm-open .cpm-burger-box span { width: 100% !important; }
.cpm-open .cpm-burger-box span:nth-child(1) { top: 8px; transform: rotate(45deg) !important; }
.cpm-open .cpm-burger-box span:nth-child(2) { opacity: 0; transform: translateX(14px) !important; }
.cpm-open .cpm-burger-box span:nth-child(3) { top: 8px; transform: rotate(-45deg) !important; }
.cpm-burger:focus-visible { outline: 1px dashed currentColor; outline-offset: 6px; }
/* Le thème colore les <button> au survol (fond accent, texte blanc) : on verrouille la couleur du burger dans tous les états */
.cpm-burger, .cpm-burger:hover, .cpm-burger:focus, .cpm-burger:active { color: var(--cpm-burger) !important; background: none !important; }
.cpm-open .cpm-burger, .cpm-open .cpm-burger:hover, .cpm-open .cpm-burger:focus, .cpm-open .cpm-burger:active { color: var(--cpm-burger-open) !important; }

/* En-tête par-dessus le panneau ouvert : il devient transparent */
.cpm-open .site-header { background: transparent !important; box-shadow: none !important; border-bottom-color: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cpm-open .site-header .main-navigation,
.cpm-open .cpm-header-contact { visibility: hidden; opacity: 0; }
.cpm-open .site-header .main-title a { color: var(--cpm-ink) !important; transition: color .3s ease; }
.cpm-open .site-header .site-description { color: var(--cpm-ink) !important; opacity: .7; }
html.cpm-open, html.cpm-open body { overflow: hidden; }

/* ------------------------------------------------------------------ */
/*  Panneau                                                            */
/* ------------------------------------------------------------------ */
.cpm-panel {
	position: fixed; inset: 0; z-index: 99; /* sous l'en-tête (100), qui garde le nom et la croix */
	color: var(--cpm-ink);
	display: flex; align-items: stretch;
	visibility: hidden; pointer-events: none;
	transition: visibility 0s linear .7s;
}
.cpm-open .cpm-panel { visibility: visible; pointer-events: auto; transition: none; }
.cpm-bg {
	position: absolute; inset: 0;
	background: var(--cpm-bg) var(--cpm-image) center / cover no-repeat;
	transition: opacity .55s ease, transform .7s var(--cpm-ease), clip-path .8s var(--cpm-ease);
}
.cpm-bg::after {
	content: ""; position: absolute; inset: 0;
	background: var(--cpm-overlay);
	opacity: calc(var(--cpm-overlay-opacity) / 100);
}
/* Animations d'ouverture */
body.cpm-anim-fade .cpm-bg { opacity: 0; }
body.cpm-anim-fade.cpm-is-open .cpm-bg { opacity: 1; }
body.cpm-anim-slide .cpm-bg { transform: translateX(100%); }
body.cpm-anim-slide.cpm-is-open .cpm-bg { transform: none; }
body.cpm-anim-circle .cpm-bg { clip-path: circle(0 at var(--cpm-x) var(--cpm-y)); }
body.cpm-anim-circle.cpm-is-open .cpm-bg { clip-path: circle(150vmax at var(--cpm-x) var(--cpm-y)); }

.cpm-inner {
	position: relative; z-index: 1; width: 100%;
	display: flex; flex-direction: column; justify-content: center;
	padding: 120px clamp(24px, 8vw, 120px) 48px;
	overflow-y: auto; max-height: 100dvh;
}
.cpm-nav { flex: 1; display: flex; align-items: center; }
body.cpm-align-center .cpm-nav { justify-content: center; }
.cpm-list, .cpm-list ul { list-style: none; margin: 0; padding: 0; }
.cpm-list { display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 14px); }
body.cpm-align-center .cpm-list { align-items: center; text-align: center; }

.cpm-list > li {
	opacity: 0; transform: translateY(26px);
	transition: opacity .5s ease, transform .7s var(--cpm-ease);
	transition-delay: 0s;
}
.cpm-is-open .cpm-list > li {
	opacity: 1; transform: none;
	transition-delay: calc(.25s + var(--i, 0) * .07s);
}
.cpm-list > li > a {
	position: relative; display: inline-block;
	font-family: var(--cpm-font); font-size: clamp(calc(var(--cpm-fs) * .62), 6vw, var(--cpm-fs));
	font-weight: 400; line-height: 1.12; letter-spacing: .01em;
	color: var(--cpm-ink) !important; text-decoration: none !important;
	padding: .08em 0;
	transition: color .3s ease, transform .4s var(--cpm-ease);
}
.cpm-list > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 1px;
	background: var(--cpm-accent); transform: scaleX(0); transform-origin: left;
	transition: transform .45s var(--cpm-ease);
}
body.cpm-align-center .cpm-list > li > a::after { transform-origin: center; }
.cpm-list > li > a:hover, .cpm-list > li > a:focus-visible { color: var(--cpm-accent) !important; }
.cpm-list > li > a:hover::after, .cpm-list > li > a:focus-visible::after,
.cpm-list > li.current-menu-item > a::after,
.cpm-list > li.current-menu-ancestor > a::after,
.cpm-list > li.current-menu-parent > a::after { transform: scaleX(1); }
.cpm-list > li > a:focus-visible { outline: none; }
.cpm-list .dropdown-menu-toggle, .cpm-list .gp-icon { display: none !important; }

/* Sous-menus : en ligne, discrets, sous l'entrée parente */
.cpm-list .sub-menu {
	display: flex; flex-wrap: wrap; gap: .2em 1.4em; margin: .35em 0 .5em;
	position: static !important; opacity: 1 !important; visibility: visible !important;
	background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important;
}
body.cpm-align-center .cpm-list .sub-menu { justify-content: center; }
.cpm-list .sub-menu a {
	font-family: var(--cpm-ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--cpm-ink) !important; opacity: .72; text-decoration: none !important;
	padding: .4em 0; transition: opacity .25s ease, color .25s ease;
}
.cpm-list .sub-menu a:hover, .cpm-list .sub-menu a:focus-visible,
.cpm-list .sub-menu .current-menu-item > a { opacity: 1; color: var(--cpm-accent) !important; }

/* Bas du panneau */
.cpm-bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	padding-top: 28px; margin-top: 28px;
	border-top: 1px solid color-mix(in srgb, var(--cpm-ink) 18%, transparent);
	opacity: 0; transform: translateY(14px);
	transition: opacity .5s ease, transform .6s var(--cpm-ease);
}
.cpm-is-open .cpm-bottom { opacity: 1; transform: none; transition-delay: .55s; }
body.cpm-align-center .cpm-bottom { flex-direction: column; justify-content: center; text-align: center; }
.cpm-panel-contact { border-color: var(--cpm-accent); color: var(--cpm-ink); }
.cpm-panel-contact:hover, .cpm-panel-contact:focus-visible { background: var(--cpm-accent); color: var(--cpm-bg); }
body.cpm-cstyle-solid .cpm-panel-contact { background: var(--cpm-accent); color: var(--cpm-bg); border-color: var(--cpm-accent); }
body.cpm-cstyle-solid .cpm-panel-contact:hover { background: var(--cpm-ink); border-color: var(--cpm-ink); }
.cpm-foot-text { font-family: var(--cpm-ui); font-size: 12.5px; letter-spacing: .06em; opacity: .75; }
.cpm-foot-text a { color: var(--cpm-ink); }
.cpm-foot-text:empty { display: none; }
.cpm-empty { font-family: var(--cpm-ui); opacity: .8; }

/* Mobile */
@media (max-width: 600px) {
	.cpm-inner { padding: 96px 24px 32px; justify-content: flex-start; }
	.cpm-nav { align-items: flex-start; padding-top: 4vh; }
	.cpm-actions { gap: 14px; }
	body.cpm-label-1 .cpm-burger-label { display: none; } /* place gagnée sur petit écran */
}

/* Barre d'administration */
.admin-bar .cpm-inner { padding-top: 152px; }

@media (prefers-reduced-motion: reduce) {
	.cpm-bg, .cpm-list > li, .cpm-bottom, .cpm-burger-box span { transition-duration: .01s !important; transition-delay: 0s !important; }
}
