/* Escale Lumineuse · En-tête 1.0.1
 * Toutes les règles commencent par .esct.esct (classe doublée) : elles passent devant
 * les styles globaux du kit Elementor (.elementor-kit-479 a, button) et de Hello.
 * 1.0.1 : Imagify enveloppe le logo dans <picture> et y déplace la classe : la taille
 * vise donc l'image et son enveloppe dans le lien, quelle que soit la classe. */

.esct.esct{
	--esct-bx:#6D071A; --esct-bxd:#560514;
	--esct-or:#B59460; --esct-orc:#D9C5A7; --esct-ort:#C2A474;
	--esct-creme:#FBF7F1; --esct-txt:#4A353A; --esct-txt2:#7F6A5D;
	position:relative; z-index:50; width:100%; margin:0; padding:0;
	background:#FFFFFF; border-bottom:1px solid var(--esct-orc);
	font-family:'Open Sans',Arial,Helvetica,sans-serif; color:var(--esct-txt);
	box-sizing:border-box; text-align:left;
}
.esct.esct *{box-sizing:border-box}
.esct.esct ul{list-style:none; margin:0; padding:0}
.esct.esct li{margin:0; padding:0}
.esct.esct .esct-lecteur{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.esct.esct .esct-in{
	max-width:1240px; margin:0 auto; padding:14px 24px;
	display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* Logo + nom */
.esct.esct a.esct-marque{display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none; color:var(--esct-bx)}
.esct.esct a.esct-marque:hover{color:var(--esct-bxd)}
.esct.esct a.esct-marque picture{display:block; flex-shrink:0; width:56px; height:56px; margin:0}
.esct.esct a.esct-marque img{display:block; flex-shrink:0; width:56px; height:56px; max-width:none; object-fit:contain; margin:0}
.esct.esct a.esct-marque span{font-family:'Playfair Display',Georgia,'Times New Roman',serif; font-size:23px; font-weight:400; line-height:1.2; letter-spacing:.01em; white-space:nowrap}

/* Liens */
.esct.esct .esct-nav{display:flex; align-items:center; gap:30px}
.esct.esct .esct-liste{display:flex; align-items:center; gap:26px}
.esct.esct .esct-item{position:relative; display:flex; align-items:center; gap:2px}
.esct.esct a.esct-lien{
	display:inline-block; padding:8px 0; border-bottom:2px solid transparent;
	color:var(--esct-txt); text-decoration:none; font-size:15px; font-weight:600; line-height:1.3;
	transition:color .2s, border-color .2s;
}
.esct.esct a.esct-lien:hover,
.esct.esct a.esct-lien:focus-visible{color:var(--esct-bx)}
.esct.esct .est-actif > a.esct-lien{color:var(--esct-bx); border-bottom-color:var(--esct-or)}

/* Petite flèche du sous-menu */
.esct.esct button.esct-ouvrir,
.esct.esct button.esct-ouvrir:hover,
.esct.esct button.esct-ouvrir:focus{
	background:transparent; border:0; box-shadow:none; color:var(--esct-txt);
	width:auto; height:auto; min-height:0; margin:0; padding:8px 4px; line-height:0;
	border-radius:6px; cursor:pointer; font-size:0;
}
.esct.esct button.esct-ouvrir:focus-visible{outline:2px solid var(--esct-or); outline-offset:2px}
.esct.esct .esct-chevron{display:inline-block; width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s}
.esct.esct .est-ouvert > button.esct-ouvrir .esct-chevron{transform:translateY(1px) rotate(225deg)}

/* Sous-menu en carte */
.esct.esct .esct-sous{
	position:absolute; top:100%; left:-22px; z-index:60; padding-top:12px;
	opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity .18s, transform .18s, visibility 0s linear .18s;
}
.esct.esct .esct-sous ul{
	min-width:410px; padding:10px; background:#FFFFFF;
	border:1px solid var(--esct-orc); border-radius:14px; box-shadow:0 16px 36px rgba(86,5,20,.12);
}
.esct.esct .esct-sous a{display:block; padding:12px 14px; border-radius:10px; text-decoration:none; transition:background .2s}
.esct.esct .esct-sous a:hover,
.esct.esct .esct-sous a:focus-visible{background:var(--esct-creme)}
.esct.esct .esct-sous li.est-actif a{background:var(--esct-creme); box-shadow:inset 3px 0 0 var(--esct-or)}
.esct.esct .esct-sous strong{display:block; font-family:'Playfair Display',Georgia,serif; font-size:16.5px; font-weight:600; line-height:1.3; color:var(--esct-bx)}
.esct.esct .esct-sous small{display:block; margin-top:3px; font-size:13px; line-height:1.45; color:var(--esct-txt2)}
.esct.esct .esct-a-sous.est-ouvert > .esct-sous{opacity:1; visibility:visible; transform:none; transition:opacity .18s, transform .18s}

/* Bouton doré */
.esct.esct a.esct-cta{
	display:inline-block; padding:12px 24px; border:0; border-radius:999px;
	background:var(--esct-orc); color:var(--esct-bx); text-decoration:none; white-space:nowrap;
	font-size:15px; font-weight:700; line-height:1.3; transition:background .2s;
}
.esct.esct a.esct-cta:hover,
.esct.esct a.esct-cta:focus-visible,
.esct.esct a.esct-cta.est-actif{background:var(--esct-or); color:var(--esct-bx)}

/* Burger (téléphone et tablette) */
.esct.esct button.esct-burger,
.esct.esct button.esct-burger:hover,
.esct.esct button.esct-burger:focus{
	display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
	width:46px; height:46px; min-height:0; margin:0; padding:0;
	background:#FFFFFF; border:1px solid var(--esct-orc); border-radius:12px; box-shadow:none; cursor:pointer;
}
.esct.esct button.esct-burger:focus-visible{outline:2px solid var(--esct-or); outline-offset:2px}
.esct.esct button.esct-burger i{display:block; width:20px; height:2px; border-radius:2px; background:var(--esct-bx); transition:transform .2s, opacity .2s}
.esct.esct.est-ouvert button.esct-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.esct.esct.est-ouvert button.esct-burger i:nth-child(2){opacity:0}
.esct.esct.est-ouvert button.esct-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Ordinateur : le sous-menu s'ouvre aussi au survol et au clavier */
@media (min-width:1081px){
	.esct.esct .esct-a-sous:focus-within > .esct-sous{opacity:1; visibility:visible; transform:none; transition:opacity .18s, transform .18s}
}
@media (min-width:1081px) and (hover:hover){
	.esct.esct .esct-a-sous:hover > .esct-sous{opacity:1; visibility:visible; transform:none; transition:opacity .18s, transform .18s}
}

/* Écran moyen : un peu plus serré */
@media (min-width:1081px) and (max-width:1220px){
	.esct.esct .esct-liste{gap:20px}
	.esct.esct .esct-nav{gap:22px}
	.esct.esct a.esct-marque span{font-size:21px}
}

/* Téléphone et tablette : menu burger */
@media (max-width:1080px){
	.esct.esct .esct-in{padding:12px 18px}
	.esct.esct button.esct-burger,
	.esct.esct button.esct-burger:hover,
	.esct.esct button.esct-burger:focus{display:flex}
	.esct.esct a.esct-marque picture,
	.esct.esct a.esct-marque img{width:46px; height:46px}
	.esct.esct a.esct-marque span{font-size:20px}

	.esct.esct .esct-nav{
		display:none; position:absolute; top:100%; left:0; right:0;
		flex-direction:column; align-items:stretch; gap:16px; padding:6px 22px 22px;
		background:#FFFFFF; border-bottom:1px solid var(--esct-orc); box-shadow:0 18px 30px rgba(86,5,20,.10);
		max-height:calc(100vh - 80px); overflow-y:auto;
	}
	.esct.esct.est-ouvert .esct-nav{display:flex}
	.esct.esct .esct-liste{flex-direction:column; align-items:stretch; gap:0}
	.esct.esct .esct-item{flex-wrap:wrap; justify-content:space-between; border-bottom:1px solid #F1E8DF}
	.esct.esct a.esct-lien{flex:1; padding:14px 0; font-size:16px; border-bottom:0}
	.esct.esct .est-actif > a.esct-lien{text-decoration:underline; text-decoration-color:var(--esct-or); text-decoration-thickness:2px; text-underline-offset:7px}
	.esct.esct button.esct-ouvrir,
	.esct.esct button.esct-ouvrir:hover,
	.esct.esct button.esct-ouvrir:focus{padding:14px 12px}

	.esct.esct .esct-sous{position:static; display:none; width:100%; padding:0 0 12px; opacity:1; visibility:visible; transform:none; transition:none}
	.esct.esct .esct-a-sous.est-ouvert > .esct-sous{display:block}
	.esct.esct .esct-sous ul{min-width:0; padding:6px; border:0; box-shadow:none; background:var(--esct-creme)}
	.esct.esct .esct-sous a:hover{background:#FFFFFF}
	.esct.esct .esct-sous li.est-actif a{background:#FFFFFF}

	.esct.esct a.esct-cta{text-align:center; padding:14px 24px; font-size:16px}
}
@media (max-width:380px){
	.esct.esct a.esct-marque span{font-size:17px}
	.esct.esct a.esct-marque picture,
	.esct.esct a.esct-marque img{width:40px; height:40px}
	.esct.esct a.esct-marque{gap:9px}
}

/* Message pour l'administratrice si le menu manque */
.esct-alerte{padding:12px 16px; background:#FFF7E8; border-left:4px solid #E8A13C; font-size:14px}
