/*
Theme Name: Petit-Hallet Couleurs
Theme URI: https://petithallet.be/
Author: Les Amis Réunis de Petit-Hallet
Description: Version claire et colorée du thème Petit-Hallet, dans l'esprit d'une sérigraphie : quatre encres vives qui se superposent, trames de points, titres légèrement décalés comme une impression mal calée. Fond blanc chaud, accessible, responsive, sans aucune ressource chargée depuis l'extérieur.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petit-hallet
Tags: two-columns, custom-menu, custom-logo, featured-images, accessibility-ready, translation-ready
*/

/* =========================================================
   0. FONTE D'AFFICHAGE (auto-hébergée, rien chez Google)
      TeX Gyre Adventor — GUST Font License, redistribuable.
   ========================================================= */
@font-face{
	font-family:"Adventor";
	src:url("assets/fonts/adventor-regular.woff2") format("woff2");
	font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
	font-family:"Adventor";
	src:url("assets/fonts/adventor-bold.woff2") format("woff2");
	font-weight:700;font-style:normal;font-display:swap;
}

/* =========================================================
   1. VARIABLES

   Quatre encres, trois rôles chacune — c'est cette discipline
   qui permet des couleurs vives tout en restant lisible :

     --x        encre vive : aplats, formes, très grands chiffres
     --x-t      version foncée : petit texte, et fond sous texte blanc
     --x-p      teinte pâle : fonds de rubrique

   Le jaune n'est JAMAIS du texte : il ne sert que de fond,
   toujours avec du texte encre par-dessus.
   ========================================================= */
:root{
	--ink:#17171F;
	--ink-2:#4A4A58;
	--paper:#FFFDF7;
	--paper-2:#FFF7EC;
	--line:#E6DFD1;
	--white:#FFFFFF;

	--rose:#FF4B7D;   --rose-t:#C4184D;   --rose-p:#FFE4EC;
	--bleu:#2B6CE8;   --bleu-t:#1E4FB8;   --bleu-p:#E3EBFC;
	--jaune:#FFC21A;  --jaune-t:#8A6200;  --jaune-p:#FFF1CC;
	--vert:#19A86E;   --vert-t:#0E7A4E;   --vert-p:#DFF3E9;

	--display:"Adventor","Avant Garde","Century Gothic","URW Gothic",
	          "Futura",system-ui,sans-serif;
	--body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

	--wrap:1240px;
	--gut:clamp(1.15rem,4vw,2.75rem);
	--rule:3px;

	/* Grain d'impression */
	--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}

/* =========================================================
   2. BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
	margin:0;background-color:var(--paper);color:var(--ink);
	font-family:var(--body);font-size:1.125rem;line-height:1.7;
	overflow-wrap:break-word;position:relative;
	-webkit-font-smoothing:antialiased;
}
body::before{
	content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
	background-image:var(--grain);opacity:.04;mix-blend-mode:multiply;
}
body > *{position:relative;z-index:2}

img,svg,video,iframe{max-width:100%;height:auto}
img{display:block;border:0}
figure{margin:0 0 1.75rem}

h1,h2,h3,h4,h5,h6{
	font-family:var(--display);font-weight:700;color:var(--ink);
	line-height:1.02;letter-spacing:-.02em;margin:0 0 .5em;
}
h1{font-size:clamp(2.3rem,1.5rem + 3.6vw,4.4rem)}
h2{font-size:clamp(1.8rem,1.3rem + 2.2vw,2.9rem)}
h3{font-size:clamp(1.3rem,1.12rem + .9vw,1.75rem);letter-spacing:-.015em}
h4{font-size:1.25rem}
h5,h6{font-size:1.05rem}

p{margin:0 0 1.3rem}
ul,ol{margin:0 0 1.3rem;padding-left:1.4rem}
li{margin-bottom:.45rem}

a{color:var(--bleu-t);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
a:hover,a:focus{color:var(--rose-t);text-decoration-thickness:3px}

:focus-visible{outline:var(--rule) solid var(--bleu);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:7rem}
main:focus{outline:none}

blockquote{
	margin:2rem 0;padding:1.2rem 1.4rem;background:var(--jaune-p);
	border-left:8px solid var(--jaune);font-size:1.15rem;
}
hr{border:0;height:var(--rule);background:var(--ink);margin:2.5rem 0}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
pre{background:var(--bleu-p);padding:1rem;border-radius:8px;overflow:auto}

table{width:100%;border-collapse:collapse;margin:0 0 1.75rem;font-size:1rem}
th,td{padding:.75rem .85rem;border-bottom:2px solid var(--line);text-align:left}
th{background:var(--bleu-p);font-family:var(--display);font-weight:700}

/* =========================================================
   3. UTILITAIRES
   ========================================================= */
.ph-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.ph-wrap--text{max-width:68ch}

.screen-reader-text{
	border:0;clip-path:inset(50%);height:1px;width:1px;margin:-1px;
	overflow:hidden;padding:0;position:absolute;white-space:nowrap;
}
.skip-link{
	position:absolute;left:-9999px;top:0;z-index:999;
	background:var(--bleu-t);color:#fff;padding:1rem 1.5rem;
	font-weight:700;text-decoration:none;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0;color:#fff}

/* Trame de points — la signature sérigraphie */
.ph-halftone{
	background-image:radial-gradient(currentColor 1.4px,transparent 1.5px);
	background-size:7px 7px;
}

.ph-label{
	display:inline-block;font-family:var(--display);font-weight:700;
	font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
	color:var(--ink);background:var(--jaune);
	padding:.3rem .7rem;border-radius:99px;margin:0 0 1rem;
}

/* Pastille numérotée */
.ph-num{
	display:grid;place-items:center;
	width:clamp(3.2rem,7vw,4.6rem);height:clamp(3.2rem,7vw,4.6rem);
	border-radius:50%;background:var(--rose);color:#fff;
	font-family:var(--display);font-weight:700;
	font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1;letter-spacing:0;
}

/* Bouton : aplat plein + bloc décalé dans une seconde encre */
.ph-btn{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:54px;padding:.85rem 1.7rem;
	font-family:var(--display);font-weight:700;font-size:1.02rem;
	letter-spacing:.01em;line-height:1;text-decoration:none;cursor:pointer;
	border:0;border-radius:6px;
	background:var(--rose-t);color:#fff;
	box-shadow:5px 5px 0 0 var(--btn-shadow,var(--bleu));
	transition:transform .12s linear,box-shadow .12s linear,background-color .12s linear;
}
.ph-btn:hover,.ph-btn:focus{
	transform:translate(5px,5px);box-shadow:0 0 0 0 transparent;
	background:var(--rose-t);color:#fff;text-decoration:none;
}
.ph-btn--paper{background:var(--white);color:var(--ink);box-shadow:5px 5px 0 0 var(--btn-shadow,var(--rose))}
.ph-btn--paper:hover,.ph-btn--paper:focus{background:var(--white);color:var(--ink)}
.ph-btn--ink{background:var(--bleu-t);color:#fff;box-shadow:5px 5px 0 0 var(--jaune)}
.ph-btn--ink:hover,.ph-btn--ink:focus{background:var(--bleu-t);color:#fff}
.ph-btn--block{width:100%}

/* Rubriques — fonds pâles alternés */
.ph-sec{padding-block:clamp(3rem,7vw,5.5rem)}
.ph-sec--plain{}
.ph-sec--paper2{background:var(--jaune-p)}
.ph-sec--ink{background:var(--bleu-t);color:#fff}
.ph-sec--ink h1,.ph-sec--ink h2,.ph-sec--ink h3{color:#fff}
.ph-sec--ink .ph-label{background:var(--jaune);color:var(--ink)}
.ph-sec--ink a{color:#fff}
.ph-sec--ink a:hover,.ph-sec--ink a:focus{color:var(--jaune)}
.ph-sec--spot{background:var(--vert-t);color:#fff}
.ph-sec--spot h2{color:#fff}
.ph-sec--spot .ph-label{background:var(--jaune);color:var(--ink)}
.ph-sec--ink,.ph-sec--spot{--btn-shadow:var(--jaune)}

.ph-sechead{display:grid;gap:1rem 1.6rem;align-items:center;margin-bottom:2.25rem;grid-template-columns:1fr}
@media (min-width:760px){.ph-sechead{grid-template-columns:auto minmax(0,1fr)}}
.ph-sechead__body{min-width:0}
.ph-sechead p{margin:.7rem 0 0;max-width:54ch;color:var(--ink-2);font-size:1.05rem}
.ph-sec--ink .ph-sechead p,.ph-sec--spot .ph-sechead p{color:#F0F3FF}

/* =========================================================
   4. BANDEAU + EN-TÊTE
   ========================================================= */
.ph-strip{background:var(--ink);color:var(--paper);font-size:.88rem}
.ph-strip .ph-wrap{
	display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;align-items:center;
	justify-content:center;padding-block:.6rem;text-align:center;
}
.ph-strip a{color:var(--jaune);text-decoration:none;font-weight:600}
.ph-strip a:hover,.ph-strip a:focus{text-decoration:underline;color:var(--jaune)}

.ph-head{
	background:var(--paper);border-bottom:var(--rule) solid var(--ink);
	position:sticky;top:0;z-index:100;
}
.ph-head__in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding-block:.9rem}
/* Plancher de largeur : sans lui, un menu long comprime le nom de
   l'association jusqu'à un mot par ligne (voire zéro pixel). */
.ph-mark{display:flex;align-items:center;gap:.9rem;text-decoration:none;flex:0 1 auto;min-width:13rem}
.ph-mark:hover,.ph-mark:focus{text-decoration:none}
.ph-mark img{max-height:56px;width:auto}
.ph-mark__name{
	display:block;font-family:var(--display);font-weight:700;
	font-size:clamp(1.1rem,.9rem + .8vw,1.55rem);line-height:1;
	letter-spacing:-.02em;color:var(--ink);
}
.ph-mark__sub{
	display:block;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
	color:var(--rose-t);font-weight:700;margin-top:.3rem;
}

.ph-burger{
	display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.5rem 1.05rem;
	background:var(--rose-t);color:#fff;border:0;border-radius:99px;
	font-family:var(--display);font-weight:700;font-size:.95rem;cursor:pointer;
}
.ph-burger:hover{background:var(--bleu-t)}
.ph-burger__i{position:relative;display:block;width:20px;height:2.5px;background:currentColor;border-radius:2px}
.ph-burger__i::before,.ph-burger__i::after{
	content:"";position:absolute;left:0;width:20px;height:2.5px;background:currentColor;border-radius:2px;
	transition:transform .15s linear,top .15s linear;
}
.ph-burger__i::before{top:-6px}
.ph-burger__i::after{top:6px}
.ph-burger[aria-expanded="true"] .ph-burger__i{background:transparent}
.ph-burger[aria-expanded="true"] .ph-burger__i::before{top:0;transform:rotate(45deg)}
.ph-burger[aria-expanded="true"] .ph-burger__i::after{top:0;transform:rotate(-45deg)}

.ph-nav ul{list-style:none;margin:0;padding:0}
.ph-nav li{margin:0}
.ph-nav a{
	display:flex;align-items:center;min-height:46px;padding:.55rem .85rem;
	font-family:var(--display);font-weight:700;font-size:1rem;
	color:var(--ink);text-decoration:none;border-radius:99px;
}
.ph-nav a:hover,.ph-nav a:focus{background:var(--jaune);color:var(--ink);text-decoration:none}
.ph-nav .current-menu-item > a,
.ph-nav .current_page_item > a,
.ph-nav .current-menu-ancestor > a,
.ph-nav .current_page_parent > a{background:var(--rose-t);color:#fff}

@media (max-width:980px){
	.ph-nav{
		display:none;position:absolute;left:0;right:0;top:100%;
		background:var(--paper);border-bottom:var(--rule) solid var(--ink);
		padding:.6rem var(--gut) 1.1rem;max-height:calc(100vh - 100%);overflow-y:auto;
	}
	.ph-nav.is-open{display:block}
	.ph-nav li{border-bottom:2px solid var(--line)}
	.ph-nav li:last-child{border-bottom:0}
	.ph-nav a{padding:.95rem .8rem;font-size:1.1rem;border-radius:8px}
	.ph-nav .sub-menu a{padding-left:1.6rem;font-weight:400}
}
@media (min-width:981px){
	.ph-burger{display:none}
	.ph-nav{display:block!important}
	/* Le menu passe à la ligne au lieu de déborder sur le nom du site :
	   c'est ce qui arrive tant qu'aucun menu n'est assigné et que le
	   thème liste toutes les pages. */
	.ph-nav{flex:1 1 auto;min-width:0}
	.ph-nav > ul{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;justify-content:flex-end}
	.ph-nav > ul > li{position:relative}
	.ph-nav > ul > li > a{white-space:nowrap;font-size:.98rem}
	.ph-nav .sub-menu{
		position:absolute;left:0;top:100%;min-width:230px;
		background:var(--white);border:var(--rule) solid var(--ink);border-radius:10px;
		padding:.3rem;opacity:0;visibility:hidden;z-index:20;
	}
	.ph-nav li:hover > .sub-menu,.ph-nav li:focus-within > .sub-menu{opacity:1;visibility:visible}
}

/* =========================================================
   5. HÉRO — aplats d'encre qui se superposent
   ========================================================= */
.ph-hero{position:relative;background:var(--jaune-p);overflow:hidden;isolation:isolate}
.ph-hero::before,.ph-hero::after{
	content:"";position:absolute;border-radius:50%;
	mix-blend-mode:multiply;pointer-events:none;z-index:0;
}
/* Les deux disques se recouvrent : là où ils se croisent, l'encre
   se mélange — c'est tout le principe de la sérigraphie. */
.ph-hero::before{
	width:clamp(15rem,32vw,28rem);aspect-ratio:1;
	background:var(--rose);opacity:.9;
	right:-7%;top:-22%;
}
.ph-hero::after{
	width:clamp(13rem,27vw,24rem);aspect-ratio:1;
	background:var(--bleu);opacity:.85;
	right:-3%;top:30%;
}
/* Sur petit écran, le disque bleu passerait derrière le texte courant et
   ferait chuter le contraste : on ne garde que le rose, dans l'angle. */
@media (max-width:899px){
	.ph-hero::after{display:none}
	.ph-hero::before{width:58vw;right:-16%;top:-9%}
}
.ph-hero__img{position:absolute;inset:0;z-index:0}
.ph-hero__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.ph-hero__img::after{content:"";position:absolute;inset:0;background:var(--bleu);mix-blend-mode:multiply;opacity:.55}
.ph-hero__in{position:relative;z-index:3;padding-block:clamp(3rem,9vw,6.5rem)}

.ph-hero__grid{display:grid;gap:1.75rem;grid-template-columns:1fr}
@media (min-width:900px){.ph-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:3rem;align-items:center}}
/* Titre légèrement décalé, comme une impression mal calée */
.ph-hero h1{
	color:var(--ink);margin-bottom:0;
	text-shadow:.055em .055em 0 var(--rose);
}
.ph-hero__rule{height:8px;background:var(--ink);margin:1.6rem 0;max-width:12rem;border-radius:99px}
.ph-hero__lead{font-size:1.2rem;color:var(--ink);margin:0 0 2rem;max-width:44ch;font-weight:500}
.ph-hero__acts{display:flex;flex-wrap:wrap;gap:1rem}

/* Cachet rond « depuis 1961 » */
.ph-stamp{
	display:grid;place-content:center;text-align:center;
	width:clamp(8rem,17vw,11rem);aspect-ratio:1;border-radius:50%;
	background:var(--vert-t);color:#fff;transform:rotate(-7deg);
	font-family:var(--display);font-weight:700;font-size:.72rem;
	letter-spacing:.1em;text-transform:uppercase;line-height:1.5;padding:1rem;
}
.ph-stamp b{display:block;font-size:1.9rem;letter-spacing:0;margin:.1rem 0}

/* Bandeau de page intérieure */
.ph-pagehead{
	background:var(--bleu-t);color:#fff;position:relative;overflow:hidden;
	padding-block:clamp(2.25rem,5vw,3.75rem);isolation:isolate;
}
.ph-pagehead::after{
	content:"";position:absolute;right:-4%;top:-40%;
	width:clamp(12rem,26vw,22rem);aspect-ratio:1;border-radius:50%;
	background:var(--rose);mix-blend-mode:multiply;opacity:.9;z-index:0;
}
.ph-pagehead > .ph-wrap{position:relative;z-index:2}
.ph-pagehead h1{color:#fff;margin-bottom:0}
.ph-pagehead__rule{height:8px;background:var(--jaune);margin:1.2rem 0 0;max-width:9rem;border-radius:99px}
.ph-pagehead p{margin:1.1rem 0 0;color:#EAF0FF;max-width:58ch}
.ph-crumb{font-size:.86rem;color:#D3E0FF;margin-bottom:1rem;font-weight:600}
.ph-crumb a{color:#fff;text-decoration:underline;text-decoration-thickness:2px}
.ph-crumb a:hover,.ph-crumb a:focus{color:var(--jaune)}

/* =========================================================
   6. AGENDA — blocs d'encre
   ========================================================= */
.ph-events .event-list,.entry-content .event-list{margin:0}
.ph-events .event-list-view,.entry-content .event-list-view{
	list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
}
/* align-items:start — sinon une fiche sans affiche s'étire pour
   atteindre la hauteur de celle qui en a une. */
@media (min-width:860px){.ph-events .event-list-view{grid-template-columns:repeat(2,1fr);align-items:start}}
.ph-events .event-list-view > li,.entry-content .event-list-view > li{
	display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;
	align-items:start;margin:0;padding:1.2rem;
	background:var(--white);border:var(--rule) solid var(--ink);border-radius:12px;
	box-shadow:6px 6px 0 0 var(--vert);
}
.ph-events .event-list-view > li:nth-child(2n),
.entry-content .event-list-view > li:nth-child(2n){box-shadow:6px 6px 0 0 var(--bleu)}
.ph-events .event-list-view > li:nth-child(3n),
.entry-content .event-list-view > li:nth-child(3n){box-shadow:6px 6px 0 0 var(--rose)}

.ph-events .startdate,.entry-content .startdate,
.ph-events .enddate,.entry-content .enddate{
	background:var(--ink);color:var(--white);border-radius:10px;
	width:80px;padding:.6rem .25rem;text-align:center;line-height:1.12;
}
.ph-events .event-weekday,.entry-content .event-weekday{
	display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jaune);font-weight:700;
}
.ph-events .event-day,.entry-content .event-day{
	display:block;font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;margin:.12rem 0;
}
.ph-events .event-month,.entry-content .event-month{
	display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
}
.ph-events .event-year,.entry-content .event-year{display:block;font-size:.68rem;color:#BDC0CC}
.ph-events .event-info,.entry-content .event-info{min-width:0;padding-top:.1rem}
.ph-events .event-title h3,.entry-content .event-title h3{font-size:1.25rem;margin:0 0 .35rem}
.ph-events .event-time,.entry-content .event-time,
.ph-events .event-location,.entry-content .event-location{
	display:block;font-size:.95rem;color:var(--ink-2);
}
.ph-events .event-content,.entry-content .event-content{margin-top:.6rem;font-size:1rem}
.ph-events .event-content p,.entry-content .event-content p{margin:0 0 .6rem}
.ph-events .event-content img,.entry-content .event-content img{
	border-radius:8px;border:2px solid var(--ink);margin-top:.45rem;
	/* L'affiche d'un événement est souvent au format portrait : on la
	   borne pour qu'elle ne mange pas toute la rubrique. */
	max-height:320px;width:auto;
}
.entry-content .filterbar{margin-bottom:1.5rem}
.entry-content .filterbar .hlist{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0 0 .5rem}
.entry-content .filterbar .hlist a{
	display:inline-block;padding:.4rem .85rem;background:var(--bleu-p);border-radius:99px;
	text-decoration:none;color:var(--bleu-t);font-weight:700;font-size:.9rem;
}
.entry-content .filterbar .hlist a:hover{background:var(--bleu-t);color:#fff}

/* --- Neutralisation de la feuille de style de l'extension ---------------
   Le thème la retire côté PHP. Ces règles, plus spécifiques que les
   siennes, tiennent bon si elle revenait par un autre chemin (extension
   d'optimisation qui l'intègre au HTML, par exemple). Sans cela :
   bloc de date flottant, texte décalé de 7,5 em et pastilles grises. */
.ph-events .event-list-view > li,
.entry-content .event-list-view > li{clear:none;margin:0}
.ph-events .event-list-view > li > .event-date,
.entry-content .event-list-view > li > .event-date{
	float:none;margin:0;background-image:none;
	display:grid;gap:.35rem;justify-items:start;
}
.ph-events .event-list-view .startdate,.ph-events .event-list-view .enddate,
.entry-content .event-list-view .startdate,.entry-content .event-list-view .enddate{
	float:none;margin:0;width:80px;background-color:var(--ink);
}
.ph-events .event-list-view > li > .event-info,
.entry-content .event-list-view > li > .event-info{
	margin:0;width:auto;min-width:0;float:none;
}
/* Le titre d'un événement est un lien : il ne doit pas s'afficher comme
   un lien de texte courant, en bleu souligné. */
.ph-events .event-title h3 a,.entry-content .event-title h3 a{color:inherit;text-decoration:none}
.ph-events .event-title h3 a:hover,.ph-events .event-title h3 a:focus,
.entry-content .event-title h3 a:hover,.entry-content .event-title h3 a:focus{
	color:var(--rose-t);text-decoration:underline;text-decoration-thickness:3px;
}

/* =========================================================
   7. EN PRATIQUE — liste colorée
   ========================================================= */
.ph-index{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.ph-index > li{margin:0}
.ph-index a{
	display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem 1.4rem;align-items:center;
	padding:1.3rem 1.4rem;text-decoration:none;color:var(--ink);
	background:var(--white);border:var(--rule) solid var(--ink);border-radius:14px;
	transition:transform .12s linear,box-shadow .12s linear;
	box-shadow:0 0 0 0 transparent;
}
.ph-index > li:nth-child(1) a{box-shadow:6px 6px 0 0 var(--rose)}
.ph-index > li:nth-child(2) a{box-shadow:6px 6px 0 0 var(--bleu)}
.ph-index > li:nth-child(3) a{box-shadow:6px 6px 0 0 var(--jaune)}
.ph-index > li:nth-child(4) a{box-shadow:6px 6px 0 0 var(--vert)}
.ph-index a:hover,.ph-index a:focus{transform:translate(3px,3px);text-decoration:none}
.ph-index__n{
	display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;
	background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:1.05rem;
}
.ph-index__t{min-width:0}
.ph-index__t strong{
	display:block;font-family:var(--display);font-weight:700;
	font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.05;letter-spacing:-.015em;
}
.ph-index__t span{display:block;font-size:1rem;color:var(--ink-2);margin-top:.3rem}
.ph-index__go{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--rose-t)}
@media (max-width:620px){
	.ph-index a{grid-template-columns:auto minmax(0,1fr)}
	.ph-index__go{display:none}
}

/* =========================================================
   8. NOUVELLES
   ========================================================= */
.ph-news{display:grid;gap:1.4rem}
@media (min-width:860px){
	.ph-news{grid-template-columns:repeat(2,1fr)}
	.ph-post--lead{grid-column:1 / -1}
}
.ph-post{
	display:grid;gap:.5rem;padding:1.4rem 1.5rem;
	background:var(--white);border:var(--rule) solid var(--ink);border-radius:14px;
	grid-template-columns:1fr;align-content:start;
}
/* L'article en tête occupe toute la largeur. On ne met PAS deux colonnes :
   la photo est à l'intérieur de .ph-post__body, elle se retrouverait
   dans la colonne étroite et écraserait le titre. */
.ph-post--lead{background:var(--rose-p)}
.ph-post__date{
	display:inline-block;font-family:var(--display);font-weight:700;font-size:.78rem;
	letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
	background:var(--jaune);padding:.25rem .6rem;border-radius:99px;justify-self:start;
}
.ph-post__body{min-width:0}
.ph-post__t{margin:.6rem 0 .5rem;font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem)}
.ph-post--lead .ph-post__t{font-size:clamp(1.6rem,1.25rem + 1.8vw,2.5rem)}
.ph-post__t a{color:var(--ink);text-decoration:none}
.ph-post__t a:hover,.ph-post__t a:focus{color:var(--rose-t);text-decoration:underline;text-decoration-thickness:3px}
.ph-post__x{margin:0 0 .9rem;color:var(--ink-2);font-size:1rem}
.ph-post__more{
	display:inline-block;font-family:var(--display);font-weight:700;font-size:.92rem;
	color:var(--bleu-t);text-decoration:none;border-bottom:3px solid var(--jaune);padding-bottom:1px;
}
.ph-post__more:hover,.ph-post__more:focus{color:var(--rose-t);border-bottom-color:var(--rose)}
/* La photo passe toujours en tête de carte, au-dessus de la date. */
.ph-post__thumb{margin:0 0 .9rem;order:-1}
.ph-post__thumb img{width:100%;border-radius:10px;border:var(--rule) solid var(--ink)}

/* =========================================================
   9. CONTENU
   ========================================================= */
.ph-main{padding-block:clamp(2.25rem,5vw,4rem)}
.ph-cols{display:grid;gap:2.5rem}
@media (min-width:1040px){.ph-cols--side{grid-template-columns:minmax(0,1fr) 300px;gap:3.5rem}}

.entry-content{font-size:1.125rem}
.entry-content > *:last-child{margin-bottom:0}
.entry-content h2{margin-top:2.4rem}
.entry-content h2::after{
	content:"";display:block;width:3.5rem;height:6px;border-radius:99px;
	background:var(--rose);margin-top:.5rem;
}
.entry-content h3{margin-top:1.9rem}
.entry-content img{border-radius:10px}
.entry-content ul li::marker{color:var(--rose)}
.ph-article--drop .entry-content > p:first-of-type::first-letter{
	float:left;font-family:var(--display);font-weight:700;
	font-size:3.8em;line-height:.82;margin:.06em .09em 0 0;color:var(--rose-t);
}
.entry-content .alignleft{float:left;margin:.3rem 2rem 1.4rem 0}
.entry-content .alignright{float:right;margin:.3rem 0 1.4rem 2rem}
.entry-content .aligncenter{margin-inline:auto}
@media (max-width:620px){.entry-content .alignleft,.entry-content .alignright{float:none;margin:0 0 1.4rem}}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.9rem;color:var(--ink-2);margin-top:.5rem}

.ph-article__meta{
	font-size:.9rem;color:var(--ink-2);margin:0 0 1.75rem;padding-bottom:.9rem;
	border-bottom:var(--rule) solid var(--line);display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;
}
.ph-article__meta strong{color:var(--rose-t)}
.ph-article__hero{margin:0 0 2rem}
.ph-article__hero img{width:100%;border-radius:14px;border:var(--rule) solid var(--ink)}

.ph-box{
	background:var(--white);border:var(--rule) solid var(--ink);border-radius:16px;
	padding:1.6rem 1.75rem;
}
.ph-box + .ph-box{margin-top:1.5rem}
.ph-box--spot{background:var(--jaune-p);box-shadow:7px 7px 0 0 var(--jaune)}
.ph-box--fill{background:var(--bleu-p)}
.ph-box > :first-child{margin-top:0}
.ph-box > :last-child{margin-bottom:0}
.ph-box h2{margin-top:0;font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem)}
.ph-box h2::after{display:none}
.ph-box h3{font-size:1.15rem;margin-top:1.6rem}

.ph-pn{display:grid;gap:1rem;margin-top:2.5rem}
@media (min-width:640px){.ph-pn{grid-template-columns:1fr 1fr}}
.ph-pn a{
	display:block;padding:1.1rem 1.25rem;text-decoration:none;color:var(--ink);
	background:var(--white);border:var(--rule) solid var(--ink);border-radius:12px;
}
.ph-pn a:hover,.ph-pn a:focus{background:var(--jaune-p)}
.ph-pn small{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--rose-t);font-weight:700;margin-bottom:.25rem}
.ph-pn span{font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.15}
.ph-pn .is-next{text-align:right}

.ph-pag{margin-top:2.5rem}
.ph-pag .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.ph-pag .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:50px;min-height:50px;padding:0 .9rem;border-radius:99px;
	background:var(--white);border:var(--rule) solid var(--ink);
	font-family:var(--display);font-weight:700;text-decoration:none;color:var(--ink);
}
.ph-pag .page-numbers:hover{background:var(--jaune)}
.ph-pag .page-numbers.current{background:var(--rose-t);border-color:var(--rose-t);color:#fff}

/* =========================================================
   10. SALLE
   ========================================================= */
.ph-salle{display:grid;gap:2.5rem}
@media (min-width:980px){.ph-salle{grid-template-columns:minmax(0,1fr) 23rem;gap:3rem;align-items:start}}
.ph-sticky{position:sticky;top:7.5rem}

.ph-facts{list-style:none;margin:0;padding:0}
.ph-facts li{margin:0;padding:.95rem 0;border-bottom:2px solid var(--line)}
.ph-facts li:last-child{border-bottom:0}
.ph-facts strong{
	display:block;font-family:var(--display);font-weight:700;font-size:.78rem;
	letter-spacing:.1em;text-transform:uppercase;color:var(--rose-t);margin-bottom:.3rem;
}
.ph-facts span{display:block;font-size:1rem}

.ph-who{display:grid;gap:1.2rem}
.ph-person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start}
.ph-person__i{
	display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
	background:var(--vert-t);color:#fff;font-family:var(--display);font-weight:700;font-size:1.05rem;
}
.ph-person:nth-child(2n) .ph-person__i{background:var(--bleu-t)}
.ph-person__n{display:block;font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.1;margin-bottom:.3rem}
.ph-person a{display:block;font-size:.98rem;text-decoration:none;color:var(--bleu-t);min-height:30px;line-height:1.8}
.ph-person a:hover,.ph-person a:focus{color:var(--rose-t);text-decoration:underline}

.ph-docs{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ph-docs li{margin:0}
.ph-docs a{
	display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;
	min-height:56px;padding:.85rem 1.1rem;text-decoration:none;color:var(--ink);
	background:var(--white);border:2px solid var(--ink);border-radius:10px;
	font-family:var(--display);font-weight:700;font-size:1rem;
}
.ph-docs a:hover,.ph-docs a:focus{background:var(--jaune);text-decoration:none}
.ph-docs em{font-style:normal;font-size:1.2rem;color:var(--rose-t)}

.ph-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.ph-steps li{counter-increment:s;margin:0;padding:.9rem 0 .9rem 3.4rem;position:relative;border-bottom:2px solid rgba(23,23,31,.1)}
.ph-steps li:last-child{border-bottom:0}
.ph-steps li::before{
	content:counter(s);position:absolute;left:0;top:.75rem;
	display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;
	background:var(--rose-t);color:#fff;font-family:var(--display);font-weight:700;font-size:1rem;
}

/* =========================================================
   11. FORMULAIRE
   ========================================================= */
.ph-form{display:grid;gap:1.25rem}
.ph-form__r{display:grid;gap:.4rem}
@media (min-width:680px){.ph-form__r--2{grid-template-columns:1fr 1fr;gap:1.25rem}}
.ph-form label{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink)}
.ph-form .ph-req{color:var(--rose-t)}
.ph-form input[type="text"],.ph-form input[type="email"],
.ph-form input[type="tel"],.ph-form textarea,.ph-form select{
	width:100%;min-height:54px;padding:.8rem .95rem;
	font-family:var(--body);font-size:1.05rem;color:var(--ink);
	background:var(--white);border:var(--rule) solid var(--ink);border-radius:10px;
	transition:border-color .12s linear,box-shadow .12s linear;
}
.ph-form textarea{min-height:180px;resize:vertical;line-height:1.6}
.ph-form input:focus,.ph-form textarea:focus,.ph-form select:focus{
	outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px var(--bleu-p);
}
.ph-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ph-form__note{font-size:.95rem;color:var(--ink-2);margin:0}

.ph-note{border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:1.75rem;border:var(--rule) solid var(--ink)}
.ph-note p{margin:0}
.ph-note ul{margin:.6rem 0 0;padding-left:1.3rem}
.ph-note--ok{background:var(--vert-p);box-shadow:5px 5px 0 0 var(--vert)}
.ph-note--bad{background:var(--rose-p);box-shadow:5px 5px 0 0 var(--rose)}
.ph-note strong{font-family:var(--display)}

/* =========================================================
   12. COLONNE LATÉRALE
   ========================================================= */
.ph-side{display:grid;gap:1.5rem;align-content:start}
.ph-widget{
	background:var(--white);border:var(--rule) solid var(--ink);border-radius:14px;
	padding:1.3rem 1.4rem;font-size:1rem;
}
.ph-widget__t{font-size:1.15rem;margin:0 0 .9rem}
.ph-widget__t::after{content:"";display:block;width:2.5rem;height:5px;border-radius:99px;background:var(--jaune);margin-top:.45rem}
.ph-widget ul{list-style:none;margin:0;padding:0}
.ph-widget li{margin:0;border-bottom:2px solid var(--line)}
.ph-widget li:last-child{border-bottom:0}
.ph-widget a{display:inline-block;padding:.5rem 0;text-decoration:none;color:var(--ink);font-weight:500}
.ph-widget a:hover,.ph-widget a:focus{color:var(--rose-t);text-decoration:underline}
.ph-widget img{border-radius:8px}
.ph-widget select{width:100%;min-height:48px;padding:.5rem;border:2px solid var(--ink);border-radius:8px;font-size:1rem}

.ph-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.ph-search input[type="search"]{
	min-width:0;min-height:50px;padding:.6rem .9rem;font-size:1rem;font-family:var(--body);
	border:var(--rule) solid var(--ink);border-radius:10px;background:var(--white);color:var(--ink);
}
.ph-search input[type="search"]:focus-visible{outline:var(--rule) solid var(--bleu);outline-offset:2px}
.ph-search input[type="search"]:focus{border-color:var(--bleu)}
.ph-search button{
	min-height:50px;padding:0 1.2rem;border:0;border-radius:10px;
	background:var(--bleu-t);color:#fff;cursor:pointer;
	font-family:var(--display);font-weight:700;font-size:.95rem;
}
.ph-search button:hover{background:var(--rose-t)}

/* =========================================================
   13. PIED DE PAGE
   ========================================================= */
.ph-foot{background:var(--ink);color:#D9DAE4;margin-top:auto;position:relative;overflow:hidden;isolation:isolate}
.ph-foot::before{
	content:"";position:absolute;left:-5%;bottom:-45%;
	width:clamp(14rem,30vw,26rem);aspect-ratio:1;border-radius:50%;
	background:var(--bleu);mix-blend-mode:screen;opacity:.35;z-index:0;
}
.ph-foot > *{position:relative;z-index:2}
.ph-foot a{color:#fff;text-decoration:none;border-bottom:2px solid transparent}
.ph-foot a:hover,.ph-foot a:focus{border-bottom-color:var(--jaune);color:var(--jaune)}
.ph-foot__in{display:grid;gap:2.5rem;padding-block:clamp(2.5rem,5vw,4rem)}
@media (min-width:780px){.ph-foot__in{grid-template-columns:1.5fr 1fr 1.2fr}}
.ph-foot h2,.ph-foot h3{color:#fff;font-size:1.1rem;margin:0 0 1rem}
.ph-foot h3::after{content:"";display:block;width:2.2rem;height:5px;border-radius:99px;background:var(--jaune);margin-top:.5rem}
.ph-foot ul{list-style:none;margin:0;padding:0}
.ph-foot li{margin-bottom:.55rem}
.ph-foot__logo img{max-height:74px;width:auto;background:var(--white);padding:.5rem .7rem;border-radius:10px;margin-bottom:1rem}
.ph-foot__who li{margin-bottom:1.05rem}
.ph-foot__who strong{display:block;color:#fff;font-family:var(--display);font-weight:700;margin-bottom:.2rem}
.ph-foot__who a{display:block;font-size:.95rem;padding:.1rem 0}
.ph-foot__end{
	border-top:2px solid rgba(255,255,255,.18);padding-block:1.2rem;
	display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:space-between;align-items:center;
	font-size:.86rem;color:#AEB0BE;
}

.ph-top{
	position:fixed;right:1rem;bottom:1rem;z-index:90;
	width:54px;height:54px;border-radius:50%;border:var(--rule) solid var(--ink);
	background:var(--jaune);color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.3rem;
	cursor:pointer;opacity:0;visibility:hidden;transition:opacity .15s linear,visibility .15s;
}
.ph-top.is-visible{opacity:1;visibility:visible}
.ph-top:hover,.ph-top:focus{background:var(--rose-t);color:#fff}

/* =========================================================
   14. DIVERS
   ========================================================= */
.ph-body{display:flex;flex-direction:column;min-height:100vh}
.ph-site{flex:1}
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:1.75rem}
.gallery-item{margin:0!important;width:auto!important}
.gallery-item img{border-radius:10px!important;width:100%;border:2px solid var(--ink)!important}
.bypostauthor{display:block}
.admin-bar .ph-head{top:32px}
@media (max-width:782px){.admin-bar .ph-head{top:46px}}
@media (max-width:600px){.admin-bar .ph-head{position:static}}

@media print{
	.ph-strip,.ph-head,.ph-foot,.ph-top,.ph-side,.ph-pag,.ph-pn{display:none!important}
	body::before{display:none}
	body{background:#fff;font-size:12pt}
	.ph-box,.ph-post{border:1px solid #000;box-shadow:none}
	a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
}