/*
Theme Name: Agence Wwweb - Listen In
Theme URI: https://agence-wwweb.fr/
Template: agence-wwweb
Author: Arthur Deguines - Agence Wwweb
Author URI: https://agence-wwweb.fr/
Description: Déclinaison du thème Agence Wwweb pour l'association Listen-In. Charte, polices, blocs signature et gabarits issus de la maquette. Le thème parent reste générique et peut être mis à jour sans rien écraser ici.
Version: 1.1.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: agence-wwweb-listen-in
*/

/**
 * Habillage du site Listen-In.
 *
 * Les blocs ont chacun leur feuille dans assets/css/blocks/ ; ce fichier ne
 * porte que l'en-tête, le pied de page et quelques ajustements globaux.
 *
 * Graisses de Jost utilisées par la maquette :
 *   400 texte courant, 500 libellés, 600 gras dans le texte, 700 titres,
 *   logo, boutons et pavés du menu.
 */

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

/*
 * La barre de la maquette fait 69 px de haut. Le repère global est encore
 * posé à 66 px dans :root (functions.php) ; on le recale sur le corps du
 * document, d'où il redescend sur l'en-tête comme sur les blocs qui s'y
 * accrochent (scroller, page News).
 */
.ww-li {
	--ww-li-nav-height: 69px;
}

.ww-li-nav {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	min-height: var(--ww-li-nav-height, 69px);
	padding: 0;
	background: var(--ww-color-light);
	border-bottom: 0;
}

/* Le mot « listen-in » commence à 32 px du bord sur la maquette (1440 px). */
.ww-li-nav__brand {
	display: flex;
	align-items: center;
	padding-left: clamp(16px, 2.2vw, 32px);
}

/* Le logo n'est jamais un titre : le h1 de la page est porté par le héros
   (ou par l'article). Le lien tire son nom accessible du dessin, qui porte
   role="img" et aria-label="listen-in". Deux classes pour passer devant la
   règle « .ww-header a » du parent, qui compose l'en-tête en noir. */
.ww-li-nav .ww-li-nav__logo {
	display: flex;
	align-items: center;
	color: var(--ww-color-ink, var(--ww-color-dark));
	text-decoration: none;
}

/* Le tracé prend currentColor et garde ses proportions (viewBox 308 × 78) :
   sa hauteur suffit à le dimensionner. 39 px de haut = 154 px de large,
   comme la maquette. */
.ww-li-nav__wordmark {
	display: block;
	width: auto;
	height: var(--ww-li-logo-size, 39px);
	color: var(--ww-color-ink, var(--ww-color-dark));
}

/* Un logo déposé dans le Customizer suit le même réglage de hauteur. */
.ww-li-nav .custom-logo-link {
	display: flex;
	align-items: center;
}

.ww-li-nav .custom-logo {
	width: auto;
	max-height: var(--ww-li-logo-size, 39px);
}

.ww-li-nav__nav {
	display: flex;
	align-items: stretch;
}

.ww-li-nav__menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

/* Chaque pavé porte sa couleur (--ww-li-item-bg, posée par le walker). */
.ww-li-nav__item {
	position: relative;
	display: flex;
	margin: 0;
	background: var(--ww-li-item-bg, var(--ww-color-primary));
}

/* Forme et typographie du lien. La spécificité (trois classes) passe devant
   les règles « .ww-menu a » du parent, y compris celles du panneau mobile. */
.ww-li-nav__menu .ww-li-nav__item > .ww-li-nav__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ww-li-item-width, 160px);
	padding: 0.75em 1em;
	border: 0;
	border-radius: 0;
	font-family: var(--ww-font-display);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: 0.05em;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

/*
 * Le lien lui-même reste transparent : c'est le <li> qui est coloré.
 *
 * Le thème parent peint en jaune les entrées « current-menu-item » ; or
 * WordPress ignore le fragment d'une URL pour décider de la page courante,
 * si bien que les ancres « /#contact » et « /#help » passent pour la page
 * d'accueil. On neutralise ce style avec une spécificité supérieure à celle
 * du parent (.ww-menu .current-menu-item > a), au repos comme au survol,
 * dans la barre comme dans le panneau mobile. Seules les couleurs sont
 * posées ici : la forme du pavé reste celle de la règle précédente.
 */
.ww-li-nav__menu .ww-li-nav__item > .ww-li-nav__link,
.ww-li-nav__menu .ww-li-nav__item > .ww-li-nav__link:hover,
.ww-li-nav__menu .ww-li-nav__item > .ww-li-nav__link:focus,
.ww-li-nav__menu .ww-li-nav__item > .ww-li-nav__link:focus-visible,
.ww-li-nav__menu .ww-li-nav__item > .ww-li-nav__link[aria-current],
.ww-li-nav__menu .current-menu-item > .ww-li-nav__link,
.ww-li-nav__menu .current_page_item > .ww-li-nav__link,
.ww-li-nav__menu .current-menu-ancestor > .ww-li-nav__link {
	background: transparent;
	color: var(--ww-li-item-color, var(--ww-color-dark));
}

.ww-li-nav__item:hover,
.ww-li-nav__item:focus-within {
	filter: brightness(0.94);
}

/* Sous-menus : repris du parent, mais calés sous le pavé coloré. */
.ww-li-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ww-li-item-bg, var(--ww-color-primary));
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ww-duration) var(--ww-ease), visibility var(--ww-duration);
}

.ww-li-nav__item:hover > .ww-li-nav__submenu,
.ww-li-nav__item:focus-within > .ww-li-nav__submenu {
	opacity: 1;
	visibility: visible;
}

.ww-li-nav__burger {
	display: none;
	align-self: center;
	margin-right: clamp(12px, 3vw, 24px);
}

@media (max-width: 1024px) {
	.ww-li-nav__burger { display: inline-flex; }

	/* Panneau mobile : les pavés s'empilent, bord à bord, sans le
	   rembourrage que le parent donne à son propre panneau. */
	.ww-li-nav__nav {
		position: fixed;
		inset: var(--ww-li-nav-height, 69px) 0 0;
		z-index: var(--ww-z-overlay);
		display: block;
		padding: 0;
		background: var(--ww-color-light);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--ww-duration) var(--ww-ease), visibility var(--ww-duration);
	}

	.ww-li-nav__nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.ww-li-nav__menu {
		flex-direction: column;
		height: auto;
	}

	.ww-li-nav__menu .ww-li-nav__item > .ww-li-nav__link {
		width: 100%;
		padding: 1.4em 1em;
	}

	/* Anneau de focus tracé à l'intérieur du pavé : ses côtés ne sont plus
	   rognés par le défilement du panneau, ni son bas recouvert par le pavé
	   suivant (qui passe aussi sous le pavé focalisé). */
	.ww-li-nav__menu .ww-li-nav__item > .ww-li-nav__link:focus-visible {
		outline-offset: -4px;
	}

	.ww-li-nav__item:focus-within {
		z-index: 1;
	}

	.ww-li-nav__submenu {
		position: static;
		opacity: 1;
		visibility: visible;
	}

	/* Sans JavaScript, pas de bouton de menu : les pavés restent dans le
	   flux, empilés sous le logo (la classe no-js est retirée par le script
	   du thème parent). */
	.no-js .ww-li-nav {
		flex-wrap: wrap;
	}

	.no-js .ww-li-nav__brand {
		min-height: var(--ww-li-nav-height, 69px);
	}

	.no-js .ww-li-nav__nav {
		position: static;
		inset: auto;
		width: 100%;
		transform: none;
		visibility: visible;
		transition: none;
	}

	.no-js .ww-li-nav__burger {
		display: none;
	}
}

/* Sur téléphone, le bouton de menu passe à gauche, là où le place la
   maquette, et le mot « listen-in » se cale à droite, toujours lié à
   l'accueil. Seul l'ordre d'affichage change : dans le DOM, le bouton reste
   juste avant le menu. Sans bouton (pas de menu, ou pas de JavaScript),
   le logo reprend sa place à gauche. */
@media (max-width: 768px) {
	.ww-li-nav {
		justify-content: flex-start;
	}

	.ww-li-nav__burger {
		order: -1;
		margin: 0 0 0 clamp(12px, 3vw, 16px);
	}

	.ww-li-nav--has-menu .ww-li-nav__brand {
		margin-left: auto;
		padding-right: clamp(12px, 3vw, 16px);
	}

	.no-js .ww-li-nav--has-menu .ww-li-nav__brand {
		margin-left: 0;
		padding-right: 0;
	}
}

/* Pied de page -------------------------------------------------------------- */

/*
 * Fond blanc, faisceau de rayons jaunes de la maquette étiré sur toute la
 * surface (assets/img/footer-rays.svg, preserveAspectRatio="none"), texte
 * noir posé en bas : il passe aussi bien sur le jaune que sur le blanc.
 *
 * --ww-li-footer-height  hauteur de la bande sur un écran de 1 440 px
 *                        (Customizer, 883 px par défaut, la valeur mesurée
 *                        sur la maquette) ; en deçà, la hauteur suit la
 *                        largeur pour garder les proportions du faisceau.
 */
.ww-li-footer {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/*
	 * La bande de la maquette mesure 883 px de haut pour 1 440 de large, soit
	 * 61 % : en dessous de 1 440 px, la hauteur suit la largeur. Sans cela le
	 * pied de page gardait ses 883 px sur un écran étroit, le faisceau s'y
	 * étirait à la verticale et son cœur descendait hors du cadre, ne laissant
	 * que deux rayons rasants et beaucoup de blanc. Le réglage du Customizer
	 * fixe la hauteur sur grand écran ; le palier téléphone la reprend plus
	 * bas, à ses propres proportions.
	 */
	/*
	 * Deux hauteurs à distinguer : la « bande » que dessine la maquette
	 * (883 px pour 1 440, proportionnelle en deçà) et le dessin lui-même, qui
	 * mesure 1 032 px pour ces 883 — soit 149 px de plus, faits pour passer
	 * au-dessus de la bande. Le pied de page réserve donc ce débord en
	 * rembourrage haut, et remonte d'autant : la bande reste exactement à sa
	 * place, et le dessin tient entier dans la boîte, sans dépendre d'aucun
	 * débordement. (« .ww-site-main » porte « flex: 1 0 auto » : le pied de
	 * page reste collé en bas sans « margin-top: auto ».)
	 */
	--ww-li-footer-band: min(var(--ww-li-footer-height, 883px), 61.3vw);
	/*
	 * Ampleur du débord. La maquette en pose 149 pour 883 ; on l'accentue
	 * d'une fois et demie sur ordinateur et du double sur tablette et
	 * téléphone, où le faisceau se lit de plus près.
	 */
	--ww-li-footer-boost: 1.5;
	--ww-li-footer-overhang: calc(var(--ww-li-footer-band) * 149 / 883 * var(--ww-li-footer-boost));

	min-height: calc(var(--ww-li-footer-band) + var(--ww-li-footer-overhang));
	padding-top: var(--ww-li-footer-overhang);
	margin-top: calc(-1 * var(--ww-li-footer-overhang));
	background: transparent;
	color: var(--ww-color-dark);
	font-family: var(--ww-font-sans);
	font-weight: 500;
	/* 20 px sur la maquette (1440 px), interligne 29 px. */
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.45;
	/*
	 * Le décor dépasse de 17 % au-dessus de la bande (voir
	 * .ww-li-footer__rays) : « clip » laisse voir ce débord sans jamais créer
	 * de barre de défilement, contrairement à « visible ». Les navigateurs qui
	 * ignorent « clip » (Safari 15 et antérieurs) gardent « hidden » et
	 * coupent au bord haut : la patte y arrive large, elle ne montre
	 * simplement pas sa pointe.
	 */
	overflow: hidden;
	/*
	 * Remonté d'autant que son débord, le pied de page recouvre le bas de la
	 * section précédente (223 px sur ordinateur) : transparente, cette zone
	 * n'en captait pas moins les clics, et le bandeau « MORE » des dernières
	 * cartes de la page News devenait inerte sur un écran peu haut. Les clics
	 * traversent donc la boîte ; seules les mentions les reçoivent.
	 */
	pointer-events: none;
}

/*
 * Le fond blanc ne couvre que la bande : la zone de débord reste transparente,
 * pour que la section précédente continue de s'y voir. Le décor, lui, occupe
 * toute la boîte et passe donc par-dessus — c'est là que la patte du haut
 * finit sa pointe.
 */
.ww-li-footer::before {
	content: "";
	position: absolute;
	inset: var(--ww-li-footer-overhang) 0 0;
	background: var(--ww-color-light);
}

/*
 * Décor : le tracé prend currentColor, d'où le jaune posé sur la balise. Il
 * couvre toute la surface du pied de page, sur ordinateur comme sur
 * téléphone ; les mentions se posent par-dessus.
 */
.ww-li-footer__rays {
	position: absolute;
	/*
	 * Le dessin mesure 1 032 px de haut pour une bande de 883 : la maquette le
	 * pose sur le bas de la page et le laisse dépasser de 149 px au-dessus,
	 * dans le blanc de la section précédente. C'est là que la patte du haut
	 * finit sa pointe — elle s'affine jusqu'au point (0,0) du dessin. Le
	 * comprimer dans la bande, comme on le faisait, ramenait cette pointe pile
	 * dans le coin : la patte n'y entrait plus que sur six pixels de large.
	 *
	 * La bande valant 61,3 vw, le dessin mesure 0,613 × 1032/883 = 71,7 vw de
	 * haut : exactement 1032/1440 de sa largeur. Il n'est donc jamais déformé
	 * en deçà de 1 440 px.
	 */
	/*
	 * Le dessin remplit la boîte en hauteur et garde ses proportions : accentuer
	 * le débord l'agrandit, il déborde alors à droite où le pied de page le
	 * coupe, plutôt que de s'étirer. « min-width » le garde au moins aussi
	 * large que la page (écran très large, ou téléphone couché).
	 */
	inset: 0 auto 0 0;
	z-index: 0;
	display: block;
	width: auto;
	min-width: 100%;
	aspect-ratio: 1440 / 1032;
	/*
	 * Le thème parent impose « max-width: 100% » à tous les svg (base.css) :
	 * sans cette levée, le dessin ne peut pas être plus large que le pied de
	 * page, et le rapport demandé plus bas au palier téléphone est écrasé en
	 * silence.
	 */
	max-width: none;
	height: 100%;
	color: var(--ww-color-primary);
	pointer-events: none;
}

/*
 * Le texte tient dans la grille du site (x = 186 → 1253 sur 1440 px). Les
 * trois blocs de la maquette commencent à 186, 741 et 1115 px, soit 0, 52 %
 * et 87 % de cette grille : d'où des colonnes de 52 %, 35 % et 13 %, toutes
 * alignées à gauche. L'écart entre colonnes est pris en rembourrage, pour ne
 * pas décaler ces repères.
 */
.ww-li-footer__columns {
	position: relative;
	z-index: 1;
	pointer-events: auto; /* voir .ww-li-footer */
	display: grid;
	grid-template-columns: 52% 35% 13%;
	gap: 0;
	width: min(100% - 2 * var(--ww-gutter, 24px), var(--ww-container, 1068px));
	margin-inline: auto;
	padding-block: 24px clamp(24px, 4vw, 56px);
}

.ww-li-footer__column:not(:last-child) {
	padding-right: 16px;
}

.ww-li-footer__columns p { margin: 0; }

.ww-li-footer a {
	color: inherit;
	text-decoration: none;
}

.ww-li-footer a:hover,
.ww-li-footer a:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* L'adresse et le numéro sur une ligne, largement espacés comme sur la
   maquette (61 px entre deux mentions pour un texte de 20 px). */
.ww-li-footer__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 3em;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Un numéro de téléphone ne se coupe pas au milieu : si la place manque,
   c'est la mention entière qui passe à la ligne. */
.ww-li-footer__contacts li {
	margin: 0;
	white-space: nowrap;
}

/* Menu légal, quand il est assigné : à la place du texte de la colonne. */
.ww-li-footer .ww-footer__legal {
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0;
	font-size: inherit;
}

/* Tablette : les trois colonnes restent, la ligne de contact se resserre
   pour tenir sur sa ligne. */
/*
 * Tablette et téléphone : le faisceau se regarde de plus près, on double
 * l'accentuation du débord — la patte monte deux fois plus haut au-dessus de
 * la bande.
 */
@media (max-width: 1024px) {
	.ww-li-footer {
		--ww-li-footer-boost: 2;
	}
}

@media (max-width: 900px) {
	.ww-li-footer__contacts {
		gap: 0 1.4em;
	}
}

@media (max-width: 700px) {
	/*
	 * Comme sur la maquette téléphone : le faisceau descend jusqu'au bas de
	 * la page, et les mentions se posent par-dessus, en bas, sur une seule
	 * ligne - le nom et les coordonnées à gauche, les mentions légales à
	 * droite, dans le blanc que laissent les rayons à cet endroit.
	 */
	/*
	 * Le pied de page y est presque aussi haut que large : étirer le dessin
	 * (1440 × 1032) sur cette boîte écrasait ses angles à l'horizontale, et la
	 * patte en haut à gauche s'y réduisait à un ruban collé au bord. La
	 * hauteur commande donc, la largeur suit, et le faisceau déborde à droite
	 * où le pied de page le coupe : les rayons gardent l'ouverture de la
	 * maquette et la patte monte entière jusqu'au bord haut. Ses tracés
	 * touchent les quatre bords de son repère : le bas reste couvert.
	 *
	 * min-width le garde au moins aussi large que le pied de page, sur un
	 * écran large et bas (téléphone couché) : il s'étire alors, comme avant,
	 * plutôt que de laisser du blanc à droite.
	 */
	.ww-li-footer {
		--ww-li-footer-band: clamp(300px, 88vw, 380px);
		/*
		 * Le corps suit la largeur de l'écran : c'est ce qui garde l'adresse
		 * et le numéro sur une seule ligne jusqu'à 360 px (en dessous, la
		 * ligne se coupe plutôt que de devenir illisible). À 700 px, la
		 * valeur rejoint les 16 px du palier supérieur : aucun saut.
		 */
		font-size: clamp(10px, 2.9vw, 16px);
	}

	.ww-li-footer__columns {
		grid-template-columns: auto auto;
		column-gap: 14px;
		row-gap: 2px;
		align-items: end;
		padding-block: 0 16px;
	}

	.ww-li-footer__column:not(:last-child) {
		padding-right: 0;
	}

	/* L'année n'est pas sur la maquette téléphone : la garder imposerait une
	   deuxième ligne de mentions, ou un corps illisible. */
	.ww-li-footer__column:last-child {
		display: none;
	}

	/* Les mots sont resserrés : l'écart de la maquette d'ordinateur
	   déborderait de l'écran. */
	.ww-li-footer__contacts {
		gap: 0 1.2em;
	}

	/* Zones tactiles : les liens gardent 44 px de haut sans écarter les
	   lignes, la hauteur étant prise de part et d'autre du texte. */
	.ww-li-footer__columns a {
		display: inline-block;
		padding: 11px 0;
		margin-block: -11px;
	}
}

/* Ajustements globaux ------------------------------------------------------- */

/*
 * Typographie de la maquette : le texte courant est en Jost 400 (24 px via
 * --ww-text-base), le gras dans le texte en 600, les libellés en 500. Les
 * liens du contenu sont bleu électrique : la variable est déjà posée en bleu
 * dans :root par functions.php (filtre ww_css_variables) tant que le
 * Customizer ne dit rien ; cette règle la suit si le bleu change.
 */
.ww-li {
	--ww-color-link: var(--ww-color-ink, var(--ww-color-dark));
}

.ww-li strong,
.ww-li b {
	font-weight: 600;
}

.ww-li label,
.ww-li .ww-label {
	font-weight: 500;
}

/* Spécificité volontairement basse (:where) : un bloc qui colore ses propres
   liens garde la main. */
.ww-li :where(.ww-site-main a:not(.ww-btn)) {
	color: var(--ww-color-ink, var(--ww-color-dark));
}

/* La maquette ne souligne pas les liens de navigation. */
.ww-li .ww-site-main a:not(.ww-btn):not(.ww-li-picto__link) {
	text-underline-offset: 0.2em;
}

/* Les titres de section reprennent la graisse de la maquette. */
.ww-li .ww-title {
	font-family: var(--ww-font-display);
}

/* Sur ce site, les sections de page sont pleine largeur et se touchent :
   on annule la marge que le thème parent place entre deux blocs. */
.ww-li .ww-page-body > .ww-block + .ww-block,
.ww-li .ww-entry-content > .ww-block + .ww-block {
	margin-top: 0;
}

/*
 * Grille du site : sur la maquette, le contenu occupe 1068 px (x = 186 → 1253
 * sur 1440). Le conteneur du thème parent retranche sa gouttière de
 * --ww-container ; on la lui rend, pour que les sections composées avec ses
 * blocs (« How it works », « Good news », contact) s'alignent sur les cartes
 * d'actualité, l'article et le pied de page.
 */
.ww-li .ww-container--wide {
	max-width: calc(var(--ww-container) + 2 * var(--ww-gutter));
}

/* Le héros démarre juste sous la barre de navigation. */
.ww-li .ww-page-body > .ww-li-hero:first-child {
	padding-top: clamp(2rem, 6vw, 4.5rem);
}

/*
 * Découpe « Zigzag Listen-In » ------------------------------------------------
 *
 * Le contour de la maquette (« LI - Elements WEB »), extrait dans
 * assets/img/listen-in-masque-zigzag.svg : trois dents par bord vertical,
 * pointes arrondies, haut et bas droits. Il s'ajoute aux découpes du parent
 * (filtre ww_mask_choices, functions.php), donc il est applicable à toute
 * image : bloc « Texte + image » du pavé « À propos », bloc « Image »…
 *
 * Le masque impose ses proportions, comme le fait la découpe « Cercle » du
 * parent : un contour dessiné ne s'étire pas au format venu du réglage, sans
 * quoi ses dents changent de profondeur. Le format choisi dans le bloc est
 * donc ignoré tant que cette découpe est active.
 *
 * Le clip-path du parent est effacé : les deux se cumuleraient.
 */
.ww-mask--li-zigzag {
	aspect-ratio: 548 / 697;
	clip-path: none;
	border-radius: 0;
	-webkit-mask: url("assets/img/listen-in-masque-zigzag.svg") center / 100% 100% no-repeat;
	        mask: url("assets/img/listen-in-masque-zigzag.svg") center / 100% 100% no-repeat;
}

/* Sans masque CSS, la découpe en pointes vives du parent tient lieu de repli. */
@supports not ((mask-image: url("assets/img/listen-in-masque-zigzag.svg")) or (-webkit-mask-image: url("assets/img/listen-in-masque-zigzag.svg"))) {
	.ww-mask--li-zigzag {
		clip-path: polygon(
			18% 0%, 0% 16.67%, 18% 33.33%, 0% 50%, 18% 66.67%, 0% 83.33%, 18% 100%,
			82% 100%, 100% 83.33%, 82% 66.67%, 100% 50%, 82% 33.33%, 100% 16.67%, 82% 0%
		);
	}
}