/* L'ossature de ce que le thème dessine lui-même.
 *
 * L'en-tête, le pied de page, le menu déroulant et son tiroir mobile sont
 * écrits par les gabarits du thème, pas par la maquette : leurs classes
 * n'apparaissent nulle part dans le contenu. Une feuille de site qui ne les
 * connaît pas — c'est le cas de toute maquette qui n'a pas été relue ligne à
 * ligne — laissait jusqu'ici une navigation empilée, un bouton de menu visible
 * en grand écran et le lien d'évitement en plein milieu de la page.
 *
 * Cette feuille est donc chargée avant celle du site, et elle ne fait que de
 * la structure : des dispositions, pas une identité. Tout ce qui relève du
 * goût passe par les jetons (--line, --ink, --muted, --paper…) ou se
 * redéclare dans la feuille du site, qui gagne puisqu'elle vient après.
 */

/* Le lien d'évitement ne se montre qu'au clavier. */
.skip-link {
	position: fixed;
	top: -100px;
	left: 20px;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--paper, #fff);
}
.skip-link:focus { top: 15px; }

/* ===== En-tête ===== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 80;
	height: var(--header-h, 84px);
	background: var(--paper, #fff);
	border-bottom: 1px solid var(--line, #e7e2ec);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 100%;
	width: min(var(--container, 1370px), calc(100% - 48px));
	margin: auto;
}

/* La marque se règle en hauteur et non en largeur : un logo carré et un logo
   en bandeau doivent tenir tous les deux dans la même barre. Sans logo, le
   thème écrit le nom du site — voir jolifish_marque(). */
.brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: auto;
	height: var(--brand-h, 40px);
}
.brand img {
	width: auto;
	height: 100%;
	max-width: var(--brand-max, 210px);
	object-fit: contain;
	object-position: left center;
}
/* La couleur vient du contexte, jamais d'un jeton fixe : le même mot sert
   d'en-tête sur fond clair et de pied de page sur fond sombre. Écrit en
   « --ink », il disparaissait purement et simplement dans le pied. */
.brand-mot {
	font-size: var(--brand-size, 1.32rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.025em;
	color: inherit;
	white-space: nowrap;
}

.site-header .brand { color: var(--ink, #201b27); }

.main-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-inline: auto;
	font-size: .875rem;
	font-weight: 600;
}

.nav-link,
.nav-group > summary {
	padding: 13px 11px;
	border-radius: 8px;
	white-space: nowrap;
}

.nav-group { position: relative; }
.nav-group > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }

.chevron { width: 12px; height: 12px; transition: transform .2s; }
.nav-group[open] .chevron { transform: rotate(180deg); }

.nav-dropdown {
	position: absolute;
	top: 57px;
	left: -20px;
	width: 310px;
	max-height: calc(100dvh - 160px);
	overflow-y: auto;
	padding: 12px;
	border: 1px solid var(--line, #e7e2ec);
	border-radius: 18px;
	background: var(--paper, #fff);
	box-shadow: 0 16px 45px #201b2717;
}
.nav-dropdown a {
	display: block;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: .9rem;
	line-height: 1.5;
}
.nav-dropdown small {
	display: block;
	margin-top: 3px;
	font-size: .79rem;
	font-weight: 400;
	color: var(--muted, #655e70);
}

.header-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 18px;
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 1px solid var(--line, #e7e2ec);
	border-radius: 10px;
	background: var(--paper, #fff);
}

/* Ces entrées doublent, dans le tiroir, ce que l'en-tête ne peut plus porter
   en petit écran. Elles n'ont donc rien à faire en grand. */
.mobile-only { display: none; }

/* ===== Pied de page ===== */

.site-footer {
	padding: 66px 0 25px;
	border-top: 1px solid var(--line, #e7e2ec);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 45px;
}

.footer-col h2,
.footer-col h3 {
	margin: 4px 0 20px;
	font-size: .85rem;
	font-weight: 800;
	letter-spacing: 0;
}
.footer-col a {
	display: block;
	margin-top: 11px;
	font-size: .83rem;
	color: var(--muted, #655e70);
}

.footer-brand p {
	max-width: 270px;
	margin-top: 23px;
	font-size: .89rem;
	color: var(--muted, #655e70);
}
.footer-brand img { max-width: var(--brand-max, 210px); }

.footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 25px;
	margin-top: 48px;
	padding-top: 22px;
	border-top: 1px solid var(--line, #e7e2ec);
	font-size: .74rem;
	color: var(--muted, #655e70);
}
.footer-bottom div { display: flex; flex-wrap: wrap; gap: 20px; }

/* L'espacement d'une section, quand le bundle en demande un autre que le
   sien. La valeur par défaut appartient à la feuille du site ; ici on ne dit
   que le rapport — plus serré, plus aéré. */
.section-tight { padding-block: var(--section-tight, 36px); }
.section-loose { padding-block: var(--section-loose, 110px); }

/* ===== Tiroir ===== */

/* Sous ce seuil la navigation ne tient plus sur une ligne : elle passe en
   tiroir, ouvert par le bouton, que app.js bascule par la classe nav-open.
   C'est le comportement par défaut, et c'est un filet : un site dont la
   feuille ignore la navigation reste utilisable au téléphone.

   Mais tous les sites n'en veulent pas. Celui qui fait défiler sa navigation
   horizontalement pose « nav_mobile: "defilante" » dans son identité, et le
   thème cesse d'écrire « nav-tiroir » sur le corps : rien de ce bloc ne
   s'applique plus. Sans cette porte de sortie, les deux stratégies
   s'additionnaient — le tiroir posait la barre en absolu sur toute la largeur,
   la feuille du site y ajoutait ses marges négatives, et la page débordait de
   trente-huit pixels sur tous les téléphones. */
@media (max-width: 940px) {
	.nav-tiroir .main-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: var(--header-h, 84px);
		align-items: stretch;
		max-height: calc(100dvh - var(--header-h, 84px));
		overflow: auto;
		padding: 18px 28px 25px;
		background: var(--paper, #fff);
		border-bottom: 1px solid var(--line, #e7e2ec);
		font-size: 1rem;
	}
	.nav-tiroir.nav-open .main-nav { display: flex; flex-direction: column; gap: 4px; }
	.nav-tiroir .main-nav .mobile-only { display: block; margin: 12px 0; }
	.nav-tiroir .nav-dropdown { position: static; width: auto; border: 0; box-shadow: none; padding: 0 0 0 10px; }
	.nav-tiroir .nav-toggle { display: block; }
}

@media (max-width: 1160px) {
	.header-inner { gap: 20px; }
	.brand { height: var(--brand-h, 34px); }
	.brand-mot { font-size: var(--brand-size, 1.18rem); }
	.nav-link, .nav-group > summary { padding: 13px 8px; }
	.header-actions { gap: 12px; }
	.main-nav { font-size: .82rem; }
}

@media (max-width: 720px) {
	.site-header { height: var(--header-h, 74px); }
	.header-inner { width: calc(100% - 32px); gap: 10px; }
	.brand { height: var(--brand-h, 30px); }
	.brand-mot { font-size: var(--brand-size, 1.06rem); }
	.nav-toggle { width: 40px; height: 40px; padding: 8px; }
	.site-footer { padding: 45px 0 22px; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
	.footer-brand { display: block; }
	.footer-bottom { margin-top: 35px; }
}

@media (max-width: 480px) {
	.header-inner { width: calc(100% - 20px); gap: 8px; }
	.brand { height: var(--brand-h, 26px); }
	.brand-mot { font-size: var(--brand-size, .95rem); }
	.header-actions { gap: 6px; }
	.header-actions .nav-toggle { width: 36px; padding: 6px; }
	.footer-grid { grid-template-columns: 1fr; }
}