/* ==========================================================================
   EduGraphik Latéral — menu latéral + panneaux d'accueil
   S'ajoute au thème parent « edugraphik » (assets/css/theme.css).
   ========================================================================== */

:root {
	--egl-side: 296px;
	--egl-head: 410px;
	--egl-top: var(--wp-admin--admin-bar--height, 0px);
	--egl-night: #14213a;
	--egl-line: #e8e8ec;
	--egl-sans: 'Roboto', var(--eg-sans, system-ui), sans-serif;
	--egl-cond: 'Roboto Condensed', 'Roboto', var(--eg-sans, system-ui), sans-serif;
}

/* ---------- Colonne de gauche (écrans larges) ---------- */
@media (min-width: 1024px) {
	body.egl { padding-left: var(--egl-side); overflow-x: clip; }

	/* En-tête : logo, nom, outils */
	.egl .eg-header {
		position: fixed; left: 0; top: var(--egl-top); width: var(--egl-side); height: var(--egl-head);
		z-index: 60; background: #fff; box-shadow: none;
	}
	.egl .eg-header__inner {
		max-width: none; margin: 0; height: 100%;
		flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;
		gap: 14px; padding: 22px 18px 18px;
	}
	.egl .eg-brand { flex-direction: column; text-align: center; gap: 8px; }
	.egl .eg-brand__logo { width: 230px; height: 213px; object-fit: contain; }
	.egl .eg-brand__text { align-items: center; gap: 6px; }
	.egl .eg-brand__name {
		font-family: var(--egl-sans); font-weight: 400; text-transform: uppercase;
		font-size: 22px; letter-spacing: .14em; color: #111; line-height: 1.15;
	}
	.egl .eg-brand__tagline {
		font-family: var(--egl-sans); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
		color: #666; line-height: 1.5; max-width: 250px;
	}
	.egl .eg-header__tools { gap: 8px; }
	.egl .eg-header__tools .eg-round { width: 40px; height: 40px; }
	.egl .eg-cart { height: 40px; padding: 0 18px; font-size: 15px; }
	.egl .eg-menu-toggle { display: none !important; }

	/* Recherche : s'ouvre en haut de la zone de contenu */
	.egl .eg-search { position: fixed; left: var(--egl-side); right: 0; top: var(--egl-top); z-index: 70; box-shadow: 0 10px 30px rgba(15, 31, 61, .18); }

	/* Menu */
	.egl .eg-nav {
		position: fixed; left: 0; top: calc(var(--egl-top) + var(--egl-head)); bottom: 0; width: var(--egl-side);
		z-index: 60; background: #fff; box-shadow: none; overflow-y: auto; overscroll-behavior: contain;
		display: flex; flex-direction: column;
	}
	.egl .eg-header::after {
		content: ""; position: fixed; left: var(--egl-side); top: var(--egl-top); bottom: 0; width: 1px;
		background: transparent; box-shadow: 2px 0 18px rgba(0, 0, 0, .09); pointer-events: none;
	}
	.egl .eg-nav::after { display: none; }
	.egl .eg-nav > .eg-wrap { max-width: none; margin: 0; padding: 0; }
	.egl .eg-nav__list { flex-direction: column; flex-wrap: nowrap; gap: 0; border-top: 1px solid var(--egl-line); }
	.egl .eg-nav__item { position: relative; }
	.egl .eg-nav__link {
		position: relative; justify-content: center; text-align: center;
		font-family: var(--egl-sans); font-weight: 500; font-size: 16.5px; text-transform: uppercase; letter-spacing: .01em;
		color: #1f2430; padding: 14px 18px; border-bottom: 1px solid var(--egl-line) !important;
		text-decoration: none !important; transition: background .25s, color .25s;
	}
	.egl .eg-nav__link .eg-dot { display: none; }
	.egl .eg-nav__link::before {
		content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
		background: var(--egl-c, var(--eg-navy)); transform: scaleY(0); transition: transform .25s;
	}
	.egl .eg-nav__link:has(.eg-dot-pink)   { --egl-c: var(--eg-pink); }
	.egl .eg-nav__link:has(.eg-dot-yellow) { --egl-c: var(--eg-yellow); }
	.egl .eg-nav__link:has(.eg-dot-cyan)   { --egl-c: var(--eg-cyan); }
	.egl .eg-nav__link:has(.eg-dot-blue)   { --egl-c: var(--eg-blue); }
	.egl .eg-nav__link:has(.eg-dot-ring)   { --egl-c: var(--eg-cyan); }
	.egl .eg-nav__link:hover, .egl .eg-nav__link.is-current,
	.egl .eg-nav__item--parent:hover > .eg-nav__link { background: #f6f7fa; color: var(--eg-navy); }
	.egl .eg-nav__link:hover::before, .egl .eg-nav__link.is-current::before,
	.egl .eg-nav__item--parent:hover > .eg-nav__link::before { transform: scaleY(1); }

	/* Sous-menu : s'ouvre sous la rubrique, dans la colonne */
	.egl .eg-nav__sub {
		position: static; min-width: 0; display: none; background: #f6f7fa; box-shadow: none; border-radius: 0;
		padding: 4px 0 8px; border-bottom: 1px solid var(--egl-line);
	}
	.egl .eg-nav__item--parent:hover > .eg-nav__sub,
	.egl .eg-nav__item--parent:focus-within > .eg-nav__sub,
	.egl .eg-nav__item--parent:has(.is-current, [aria-current]) > .eg-nav__sub { display: block; }
	.egl .eg-nav__sublink {
		text-align: center; font-family: var(--egl-sans); font-weight: 500; font-size: 14.5px;
		color: #4a5568; padding: 7px 14px; border-radius: 0;
	}
	.egl .eg-nav__sublink:hover, .egl .eg-nav__sublink[aria-current] { background: transparent; color: var(--eg-navy); text-decoration: underline; text-underline-offset: 4px; }

	/* Barre flottante du parent : inutile avec un menu fixe */
	.egl .eg-sticky { display: none !important; }

	/* Petite hauteur d'écran : on resserre l'en-tête */
	@media (max-height: 760px) {
		:root { --egl-head: 336px; }
		.egl .eg-brand__logo { width: 165px; height: 153px; }
		.egl .eg-nav__link { padding: 11px 18px; font-size: 15.5px; }
	}
}

/* ==========================================================================
   Panneaux de l'accueil
   ========================================================================== */
.egl-has-panels .eg-hero { display: none !important; }

/* Les panneaux sont imprimés juste après <body> : sans colonne latérale,
   on les replace sous l'en-tête et le menu. */
@media (max-width: 1023px) {
	body.egl-has-panels { display: flex; flex-direction: column; }
	body.egl-has-panels > * { order: 2; }
	body.egl-has-panels > .eg-skip,
	body.egl-has-panels > .eg-header,
	body.egl-has-panels > .eg-nav,
	body.egl-has-panels > .eg-sticky { order: 0; }
	body.egl-has-panels > .egl-hero { order: 1; }
}

.egl-hero {
	position: relative; display: flex; overflow: hidden; background: var(--egl-night);
	height: calc(100vh - var(--egl-top)); height: calc(100svh - var(--egl-top)); min-height: 600px;
	font-family: var(--egl-sans);
}
.egl-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.egl-call {
	position: absolute; top: 26px; right: 30px; z-index: 6; text-align: right; color: #fff; text-decoration: none;
	font-family: var(--egl-cond); background: rgba(20, 33, 58, .82); padding: 12px 18px 10px; border-radius: 10px;
	backdrop-filter: blur(4px);
}
.egl-call:hover { color: #fff; }
.egl-call b { display: block; font-size: 38px; line-height: 1; color: var(--eg-yellow); letter-spacing: .02em; }
.egl-call span { font-weight: 700; font-size: 16px; text-transform: uppercase; }
.egl-call em { font-style: normal; color: var(--eg-yellow); }

.egl-panel {
	position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer;
	border-right: 1px solid rgba(255, 255, 255, .08);
	transition: flex-grow .7s cubic-bezier(.6, .05, .25, 1);
}
.egl-panel.is-open { flex-grow: 4.2; cursor: default; }
.egl-panel__bg {
	position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat;
	transform: scale(1.06); filter: brightness(.72) saturate(.9); transition: transform 1.2s ease, filter .7s;
}
.egl-panel.is-open .egl-panel__bg { transform: scale(1); filter: none; }
.egl-panel:not(.is-open):hover .egl-panel__bg { transform: scale(1.12); }
.egl-panel::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 18, 36, .05) 0%, rgba(10, 18, 36, .2) 35%, rgba(10, 18, 36, .8) 68%, rgba(10, 18, 36, .95) 100%);
}
.egl-panel__stripe { position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--c); z-index: 2; }

.egl-panel__label {
	position: absolute; left: 22px; bottom: 28px; z-index: 4; margin: 0; cursor: pointer;
	writing-mode: vertical-rl; transform: rotate(180deg);
	background: rgba(20, 33, 58, .88); color: #fff; border: 0; border-left: 5px solid var(--c); border-radius: 0;
	padding: 16px 10px; font-family: var(--egl-cond); font-weight: 700; font-size: 30px; line-height: 1; white-space: nowrap;
	transition: opacity .35s, transform .5s;
}
.egl-panel.is-open .egl-panel__label { opacity: 0; transform: rotate(180deg) translateX(-20px); pointer-events: none; }

.egl-panel__content {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-width: 760px; padding: 0 7% 9%;
	color: #fff; opacity: 0; transform: translateY(30px); pointer-events: none;
	transition: opacity .4s, transform .6s;
}
.egl-panel.is-open .egl-panel__content { opacity: 1; transform: none; transition-delay: .35s; pointer-events: auto; }
.egl-panel__eyebrow {
	display: inline-block; margin-bottom: 14px; font-family: var(--egl-cond); font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--c);
}
.egl-panel--blue .egl-panel__eyebrow { color: #7fb8ff; }
.egl-panel__title {
	margin: 0; color: #fff; font-family: var(--egl-cond); font-weight: 700;
	font-size: clamp(34px, 4vw, 62px); line-height: 1.02; text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.egl-panel__text { max-width: 540px; margin: 16px 0 26px; font-size: 19px; line-height: 1.5; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.egl-cta {
	display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
	background: var(--c); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
	transition: transform .2s, box-shadow .2s;
}
.egl-panel--yellow .egl-cta, .egl-panel--cyan .egl-cta { color: var(--egl-night); }
.egl-cta:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.egl-panel--yellow .egl-cta:hover, .egl-panel--cyan .egl-cta:hover { color: var(--egl-night); }
.egl-panel--pink .egl-cta:hover, .egl-panel--blue .egl-cta:hover { color: #fff; }

/* Panneau « Bienvenue » */
.egl-welcome .egl-panel__bg { background: linear-gradient(135deg, #1B3A6B, #14213a 60%, #0d1628); filter: none; }
.egl-welcome::after { display: none; }
.egl-welcome .egl-panel__content {
	top: 0; max-width: none; padding: 0 6%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.egl-welcome__title { margin: 0; color: #fff; font-family: var(--egl-sans); font-weight: 900; line-height: 1; }
.egl-welcome__title .l1 { display: block; font-size: clamp(40px, 4.6vw, 76px); }
.egl-welcome__title em { font-style: normal; color: var(--eg-pink); }
.egl-welcome__title .l2 { display: block; font-size: clamp(56px, 7vw, 116px); margin-top: .12em; }
.egl-welcome__motto { margin: .7em 0 0; font-family: var(--egl-cond); font-style: italic; font-weight: 700; font-size: clamp(22px, 2vw, 32px); color: var(--eg-yellow); }
.egl-welcome__colors { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.egl-welcome__colors i { width: 44px; height: 6px; border-radius: 3px; background: var(--k); }

.egl-scroll { position: absolute; left: 50%; bottom: 24px; z-index: 6; width: 38px; transform: translateX(-50%); opacity: .85; animation: egl-bob 2s ease-in-out infinite; }
.egl-scroll svg { display: block; width: 100%; height: auto; }
@keyframes egl-bob { 50% { transform: translate(-50%, 8px); } }

/* ---------- Téléphone : panneaux empilés ---------- */
@media (max-width: 860px) {
	.egl-hero { flex-direction: column; height: auto; min-height: 0; }
	.egl-panel { flex: none; height: 92px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); transition: height .6s cubic-bezier(.6, .05, .25, 1); }
	.egl-panel.is-open { height: min(78vh, 560px); }
	.egl-panel__label { writing-mode: horizontal-tb; transform: none; left: 16px; bottom: 20px; font-size: 22px; padding: 10px 14px; }
	.egl-panel.is-open .egl-panel__label { transform: translateY(10px); }
	.egl-panel__content { padding: 0 20px 28px; }
	.egl-panel__text { font-size: 16px; }
	.egl-call, .egl-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.egl-panel, .egl-panel__bg, .egl-panel__content, .egl-panel__label, .egl-scroll { transition: none !important; animation: none !important; }
}

/* ---------- Page Applications ---------- */
.egl .egl-apps-empty {
	margin: 32px 0; padding: 28px 26px; text-align: center;
	background: #f6f7fa; border-left: 6px solid var(--eg-cyan, #1fb6d4); border-radius: 6px;
	font-size: 17px; color: #3a4252;
}
.egl .egl-apps-empty p { margin: 0; }
.egl .egl-apps-list { margin-top: 32px; }

/* Panneaux à image claire ou chargée (Applications, Service graphique) : voile sombre pour lire le texte */
.egl-panel--cyan .egl-panel__bg::after,
.egl-panel--blue .egl-panel__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(13, 22, 40, .96) 0%, rgba(13, 22, 40, .82) 42%, rgba(13, 22, 40, .35) 75%, rgba(13, 22, 40, .15) 100%);
}

/* Titres de section sur une seule ligne (écrans larges) ; les sous-titres gardent une largeur lisible */
@media (min-width: 1024px) {
	.egl .eg-head__text, .egl .eg-head--center .eg-head__text, .egl .eg-sec__head { max-width: none; }
	.egl .eg-head__sub, .egl .eg-sec__head > p { max-width: 760px; }
	.egl .eg-head--center .eg-head__sub, .egl .eg-sec__head--center > p { margin-left: auto; margin-right: auto; }
}

/* Titres en deux parties (retour à la ligne forcé) ou en colonne étroite : une seule ligne, taille adaptée à la colonne */
@media (min-width: 1024px) {
	.egl .eg-h2 br { display: none; }
	.egl .eg-h2 br + *::before { content: " "; }
	.egl .eg-about__text, .egl .eg-studio__text { container-type:inline-size; }
	.egl .eg-about__text .eg-h2, .egl .eg-studio__text .eg-h2 { white-space: nowrap; font-size: min(46px, 6.3cqi); }
}

/* ---------- Barre latérale : fond distinct du contenu ---------- */
@media (min-width: 1024px) {
	.egl .eg-header, .egl .eg-nav { background: #eef2f8; }
	.egl .eg-header::after { background: #d3dbe8; box-shadow: 4px 0 22px rgba(15, 31, 61, .14); }
	.egl .eg-nav__list { border-top-color: #d6deea; }
	.egl .eg-nav__link { border-bottom-color: #d6deea !important; }
	.egl .eg-nav__link:hover, .egl .eg-nav__link.is-current,
	.egl .eg-nav__item--parent:hover > .eg-nav__link { background: #fff; }
	.egl .eg-nav__sub { background: #f8fafd; border-bottom-color: #d6deea; }
	.egl .eg-header__tools .eg-round { background: #fff; }
	.egl .egl-nav-sites > .eg-nav__sublink { color: var(--eg-blue, #1f6fd1); font-weight: 700; }
}

/* ---------- Bandeau « Conception de sites internet » (accueil) ---------- */
.egl-sites {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 44px; align-items: center;
	padding: 60px 48px; background: linear-gradient(120deg, #0d1628 0%, #14213a 45%, #1B3A6B 100%);
	border-top: 6px solid var(--eg-blue, #1f6fd1); color: #fff; font-family: var(--egl-sans);
}
.egl-sites__eyebrow { font-family: var(--egl-cond); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #7fb8ff; }
.egl-sites__title { font-family: var(--egl-cond); font-weight: 700; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.05; margin: 10px 0 14px; color: #fff; }
.egl-sites__lede { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .86); margin: 0 0 24px; max-width: 540px; }
.egl-sites__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.egl-sites__link { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.egl-sites__link:hover { color: #7fb8ff; }
.egl-sites-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.egl-site-card {
	display: block; overflow: hidden; border-radius: 12px; background: #fff; color: #14213a; text-decoration: none;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .25); transition: transform .25s, box-shadow .25s;
}
.egl-site-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .3); }
.egl-site-card__img { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center top; }
.egl-site-card__title { display: block; padding: 10px 14px 12px; font-size: 14px; font-weight: 500; line-height: 1.35; }
@media (max-width: 1023px) {
	body.egl-has-panels > .egl-sites { order: 1; }
	.egl-sites { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; }
}
@media (max-width: 560px) { .egl-sites-grid { grid-template-columns: 1fr; } }

/* Page « Création de sites internet » */
.eg-content .egl-sites-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 18px 0 32px; }
.eg-content .egl-site-card { box-shadow: 0 6px 20px rgba(15, 31, 61, .12); }
.egl-sites-points { margin: 18px 0 30px; padding-left: 1.2em; line-height: 1.7; }
.egl-sites-h { margin-top: 34px; }
.egl-sites-cta { margin-top: 26px; }

/* Logo sur fond gris : on fond son blanc dans la barre */
@media (min-width: 1024px) { .egl .eg-brand__logo { mix-blend-mode: multiply; } }
/* Titre du bandeau sur une ligne, taille adaptée à la colonne */
.egl-sites__text { container-type: inline-size; }
.egl-sites__title { white-space: nowrap; font-size: min(48px, 7cqi); }
@media (max-width: 1023px) { .egl-sites__title { white-space: normal; font-size: clamp(28px, 7vw, 40px); } }