/* =========================================================================
   Atelier VOUS : l'encre bleue, le fluo du surligneur, les photos d'ateliers.
   Règle des survols : seule la couleur change, rien ne bouge ni ne grandit.
   ========================================================================= */

:root {
	--bleu: var(--wp--preset--color--bleu, #2d2e82);
	--bleu-sombre: var(--wp--preset--color--bleu-sombre, #20215f);
	--fluo: var(--wp--preset--color--fluo, #e2f22a);
	--brume: var(--wp--preset--color--brume, #eef0f6);
	--blanc: var(--wp--preset--color--blanc, #fff);
	--affiche: var(--wp--preset--font-family--affiche);
	--texte: var(--wp--preset--font-family--texte);
	--gouttiere: clamp(20px, 3.5vw, 48px);
	--large: 1360px;
	--trait: 2px solid var(--bleu);
	--surligne: linear-gradient(transparent 38%, var(--fluo) 38%, var(--fluo) 90%, transparent 90%);
}

/* Surligneur au survol : un trait épais posé sous les lettres, plutôt qu'un fond.
   Il suit chaque ligne d'un titre sur plusieurs lignes et s'arrête au dernier mot,
   quelle que soit la largeur de la boîte. */
.voisins a:hover strong, .liste-journal li:hover h2 a, .projet-lie a:hover strong,
.coordonnees .geant a:hover, .coordonnees .geant a:focus-visible, .coordonnees .moyen a:hover, .coordonnees .moyen a:focus-visible,
.references a:hover, .references a:focus-visible, .faq summary:hover {
	text-decoration: underline var(--fluo); text-decoration-thickness: .6em; text-underline-offset: -.46em; text-decoration-skip-ink: none;
}
/* Surligné fixe (étiquettes, légendes) : si le texte passe à la ligne, chaque ligne garde sa marge. */
.etiquette span, .wp-element-caption span, .references h3 span { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

body { -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
::selection { background: var(--fluo); color: var(--bleu); }
/* Retours à la ligne : les titres et les textes courts s'équilibrent sur leurs lignes (pas de mot seul en bas),
   les paragraphes évitent le mot orphelin. Les espaces insécables du français sont posés par inc/typographie.php. */
h1, h2, h3, h4, h5, h6, .wp-block-post-title, figcaption, summary, dt, strong, .etiquette, .wp-block-button__link, .carte span, .table-projets .carte span { text-wrap: balance; }
p, li, dd, td, blockquote { text-wrap: pretty; }

/* -------------------------------------------------------------------------
   Gabarit : les sections pleine largeur gardent leur contenu dans 1360 px.
   ---------------------------------------------------------------------- */

.contenu-page { margin-block: 0; }
.contenu-page > * { margin-block: 0; }
.contenu-page > :where(p, h2, h3, h4, ul, ol, .wp-block-image:not(.alignfull), .wp-block-buttons, .wp-block-details, .wp-block-gallery, .wp-block-quote, .wp-block-table) {
	max-width: 760px; margin-inline: auto; padding-inline: var(--gouttiere); box-sizing: content-box; margin-block: 24px;
}
.section { padding: 64px var(--gouttiere); margin: 0 !important; }
.section > * { max-width: var(--large); margin-inline: auto; }
.section > * + * { margin-top: 28px; }
.section.has-background + .section.has-background { margin-top: 0; }

/* Tête de section : grand titre à gauche, texte à droite */
.tete { display: grid !important; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.tete > * { margin: 0 !important; }
.tete p { max-width: 46ch; }

/* -------------------------------------------------------------------------
   En-tête et pied de page
   ---------------------------------------------------------------------- */

.entete { border-bottom: var(--trait); padding: 16px var(--gouttiere) !important; display: flex !important; justify-content: space-between; align-items: center; gap: 24px; min-height: 88px; box-sizing: border-box; }
.entete .wp-block-site-logo img { width: 120px; }
.entete .wp-block-navigation { font-weight: 600; font-size: 16px; gap: 4px 24px; }
.entete .wp-block-navigation a { text-decoration: none; }
.entete .wp-block-navigation a { padding-bottom: 4px; background: linear-gradient(var(--fluo), var(--fluo)) 0 100% / 0 3px no-repeat; }
.entete .wp-block-navigation a:hover, .entete .wp-block-navigation a:focus-visible, .entete .wp-block-navigation .current-menu-item > a, .entete .wp-block-navigation a[aria-current] { background-size: 100% 3px; }
.wp-block-navigation .ext > a::after, a.ext::after { content: "\2009\2197"; font-weight: 400; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--bleu) !important; color: var(--blanc) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font: 900 34px/1 var(--affiche); text-transform: uppercase; }

.pied { border-top: var(--trait); padding: 40px var(--gouttiere) 32px !important; font-size: 15px; margin-top: 0 !important; }
.pied > * { max-width: var(--large); margin-inline: auto; }
.pied .colonnes-pied { display: grid !important; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.pied h2 { font-size: 26px; margin: 0 0 8px; }
.pied p { margin: 0 0 4px; }
.pied .devise { font: 900 22px/1.1 var(--affiche); text-transform: uppercase; margin: 0 0 12px; }
.pied .devise span { background: var(--surligne); padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pied a { text-underline-offset: 4px; }
.pied .mentions { margin-top: 28px; opacity: .8; }

/* -------------------------------------------------------------------------
   Surligneur : étiquettes, années, boutons, filtres
   ---------------------------------------------------------------------- */

.etiquette { display: inline-block; background: var(--blanc); color: var(--bleu); font-weight: 700; font-size: 15px; line-height: 1.3; padding: 6px 12px; }
.etiquette span { background: var(--surligne); padding: 0 2px; }
.etiquette.annee { background: none; padding: 0; font: 900 28px/1 var(--affiche); }
.etiquette.annee span { background: var(--fluo); padding: 3px 7px 1px; }

.wp-block-buttons { gap: 12px 32px; }
.wp-block-button__link, .wp-element-button { border-bottom: 3px solid currentColor !important; white-space: nowrap; }
.wp-block-button__link:hover, .wp-block-button__link:focus-visible { background-image: linear-gradient(transparent 22%, var(--fluo) 22%, var(--fluo) 96%, transparent 96%); color: var(--bleu) !important; }
.has-bleu-background-color .wp-block-button__link, .has-bleu-sombre-background-color .wp-block-button__link { color: var(--blanc); }
.has-fluo-background-color .wp-block-button__link:hover { background-image: linear-gradient(transparent 22%, var(--blanc) 22%, var(--blanc) 96%, transparent 96%); }

.filtres-projets { display: grid; gap: 6px; }
.ligne-filtres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.ligne-filtres small { flex: 0 0 120px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.aucun-projet { font-weight: 600; }
.filtres-projets button { font: 600 17px var(--texte); color: var(--bleu); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.filtres-projets button span { padding: 0 2px; }
.filtres-projets button:hover span { text-decoration: underline; text-underline-offset: 5px; }
.filtres-projets button[aria-pressed="true"] span { background: var(--surligne); }
.filtres-journal a { font: 600 17px var(--texte); color: var(--bleu); text-decoration: none; padding: 4px 0; }
.filtres-journal a span { padding: 0 2px; }
.filtres-journal a:hover span { text-decoration: underline; text-underline-offset: 5px; }
.filtres-journal a[aria-current] span { background: var(--surligne); }

/* -------------------------------------------------------------------------
   Cyanotype : la photo au bleu, ses couleurs au survol
   ---------------------------------------------------------------------- */

.is-style-cyano { background: var(--bleu); overflow: hidden; position: relative; }
.is-style-cyano img { filter: grayscale(1) contrast(1.15) brightness(1.08); mix-blend-mode: screen; transition: filter .45s ease; }
.is-style-cyano:hover img { filter: none; mix-blend-mode: normal; }

/* Légende posée sur l'image, surlignée */
.ouverture figure .wp-element-caption, .contact figure .wp-element-caption {
	position: absolute; left: 0; bottom: 22px; margin: 0; background: var(--blanc); color: var(--bleu); font-weight: 700; font-size: 15px; padding: 6px 12px; text-align: left;
}
.ouverture figure .wp-element-caption span, .contact figure .wp-element-caption span { background: var(--surligne); padding: 0 2px; }

/* -------------------------------------------------------------------------
   Ouverture : le titre fait l'affiche, la photo au bleu à droite
   ---------------------------------------------------------------------- */

.ouverture { display: grid !important; grid-template-columns: 1.15fr 1fr; min-height: min(calc(100vh - 90px), 680px); border-bottom: var(--trait); margin: 0 !important; }
.ouverture > .titre { display: flex !important; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px var(--gouttiere) 40px; }
.ouverture > .titre > * { margin: 0 !important; }
.ouverture h1 { font-size: clamp(48px, 6.6vw, 108px); }
.ouverture .chapo { font-size: clamp(18px, 1.5vw, 21px); max-width: 40ch; }
.ouverture .pied-titre { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.ouverture .pied-titre > * { margin: 0 !important; }
.ouverture > figure { margin: 0 !important; border-left: var(--trait); min-height: 420px; position: relative; }
.ouverture > figure img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.ouverture .fil { font-size: 15px; }
.ouverture .fil a { text-underline-offset: 4px; }
/* Pages intérieures : un titre un peu plus petit, l'accroche sous le titre */
.ouverture-page { min-height: min(calc(100vh - 90px), 560px); }
.ouverture-page > .titre { justify-content: flex-start; }
.ouverture-page > .titre .chapo { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; font-weight: 500; max-width: 32ch; margin-top: auto !important; }

/* -------------------------------------------------------------------------
   Savoir-faire : quatre grandes photos, le titre sur une plaque
   ---------------------------------------------------------------------- */

.savoirs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; max-width: none !important; margin-inline: calc(var(--gouttiere) * -1) !important; }
.savoir { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin: 0 !important; }
.savoir > figure { margin: 0 !important; height: 100%; }
.savoir > figure img { width: 100%; height: 100% !important; object-fit: cover; }
.savoir .plaque { position: absolute; left: 0; bottom: 0; background: var(--blanc); padding: 18px 28px 20px var(--gouttiere); max-width: 80%; margin: 0 !important; }
.savoir .plaque > * { margin: 0 !important; }
.savoir .plaque p { margin-top: 8px !important; font-size: 16px; }
.savoir h3 { font-size: clamp(32px, 3.4vw, 54px); }
.savoir h3 a { text-decoration: none; }
.savoir h3 a::after { content: ""; position: absolute; inset: 0; }
.savoir:hover .plaque, .savoir:focus-within .plaque { background: var(--fluo); }

/* -------------------------------------------------------------------------
   Listes de projets : bande défilante, grille, archives
   ---------------------------------------------------------------------- */

.carte-projet { display: grid !important; gap: 12px; align-content: start; }
.carte-projet > * { margin: 0 !important; }
.carte-image { position: relative; }
.carte-image .wp-block-post-featured-image { margin: 0; }
.carte-image .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.carte-image .etiquette.annee { position: absolute; left: 0; top: 16px; }
.carte-projet h3 { font-size: clamp(24px, 2vw, 32px); }
.carte-projet h3 a { text-decoration: none; }
.carte-projet h3::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 10px; background: transparent; }
.carte-projet:hover h3::after, .carte-projet:focus-within h3::after { background: var(--bleu); }
.carte-projet .wp-block-post-terms { font-size: 15px; }
.carte-projet .wp-block-post-terms a { text-decoration: none; }

.grille-projets .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 24px; padding: 0; margin: 0; list-style: none; }
.grille-projets .wp-block-post-template > li[hidden] { display: none; }
.grille-archives .wp-block-post-template { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 18px; padding: 0; margin: 0; list-style: none; }
.grille-archives .carte-projet h3 { font-size: 22px; }
.grille-archives .etiquette.annee { font-size: 20px; top: 10px; }

.bande { max-width: none !important; margin-inline: calc(var(--gouttiere) * -1) !important; }
.bande .wp-block-post-template { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(270px, 29vw, 430px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0; margin: 0; list-style: none; }
.bande .wp-block-post-template::-webkit-scrollbar { display: none; }
.bande .wp-block-post-template::before, .bande .wp-block-post-template::after { content: ""; width: calc(max(0px, (100vw - var(--large)) / 2) + var(--gouttiere) - 24px); }
.bande .wp-block-post-template > li { scroll-snap-align: start; scroll-margin-left: calc(max(0px, (100vw - var(--large)) / 2) + var(--gouttiere)); }
.bande.glisse .wp-block-post-template { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.bande.glisse a { pointer-events: none; }
.commandes-bande { display: flex; align-items: center; gap: 24px; }
.commandes-bande .jauge { flex: 1; height: 4px; background: rgba(45, 46, 130, .15); position: relative; }
.commandes-bande .jauge span { position: absolute; top: 0; bottom: 0; left: 0; background: var(--bleu); }
.commandes-bande button { width: 56px; height: 56px; border: var(--trait); background: var(--blanc); color: var(--bleu); font: 800 26px var(--affiche); cursor: pointer; }
.commandes-bande button + button { margin-left: 8px; }
.commandes-bande button:hover:not(:disabled) { background: var(--bleu); color: var(--fluo); }
.commandes-bande button:disabled { opacity: .3; cursor: default; }
@media (hover: none) { .commandes-bande .fleches { display: none; } }

/* Archives repliées */
.bloc-archives summary { list-style: none; cursor: pointer; display: inline-block; font: 800 28px/1 var(--affiche); text-transform: uppercase; padding: 8px 0 6px; border-bottom: 3px solid currentColor; }
.bloc-archives summary::-webkit-details-marker { display: none; }
.bloc-archives summary:hover { background-image: linear-gradient(transparent 22%, var(--fluo) 22%, var(--fluo) 96%, transparent 96%); }
.bloc-archives details[open] summary { margin-bottom: 36px; }

/* -------------------------------------------------------------------------
   Méthode : ligne de temps fluo, tirets jusqu'au bord après la dernière étape
   ---------------------------------------------------------------------- */

.methode { overflow: hidden; }
ol.temps { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(var(--etapes, 4), 1fr); gap: 28px; counter-reset: temps; }
ol.temps > li { position: relative; counter-increment: temps; padding-top: 86px; margin: 0; }
ol.temps > li::before { content: counter(temps); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--fluo); color: var(--bleu); font: 900 36px var(--affiche); }
ol.temps > li::after { content: ""; position: absolute; top: 30px; left: 64px; right: -28px; height: 4px; background: var(--fluo); }
ol.temps > li:last-child::after { right: auto; left: 76px; width: 100vw; background: repeating-linear-gradient(90deg, var(--fluo) 0 16px, transparent 16px 28px); }
ol.temps strong { display: block; font: 900 clamp(28px, 2.6vw, 38px)/1 var(--affiche); text-transform: uppercase; margin-bottom: 10px; }
.has-bleu-background-color ol.temps > li { color: #dcdcf2; }
.has-bleu-background-color ol.temps strong { color: var(--blanc); }
ol.temps.cinq { --etapes: 5; }

/* -------------------------------------------------------------------------
   Outils en ligne : cases inversées au survol
   ---------------------------------------------------------------------- */

.liste-outils { display: grid !important; grid-template-columns: repeat(4, 1fr); border-top: 3px solid var(--bleu); }
.liste-outils .outil { position: relative; padding: 22px 18px 28px; margin: 0 !important; }
.liste-outils .outil + .outil { border-left: 1px solid var(--bleu); }
.liste-outils .outil > * { margin: 0 !important; }
.liste-outils .outil p { margin-top: 8px !important; }
.liste-outils h3 a { text-decoration: none; }
.liste-outils h3 a::after { content: ""; position: absolute; inset: 0; }
.liste-outils .outil:hover, .liste-outils .outil:focus-within { background: var(--bleu); color: var(--fluo); }

/* -------------------------------------------------------------------------
   Contact
   ---------------------------------------------------------------------- */

.contact { display: grid !important; grid-template-columns: 1fr 1fr; margin: 0 !important; }
.contact > figure { margin: 0 !important; min-height: 480px; position: relative; }
.contact > figure img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.contact > .texte { padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 72px); display: flex !important; flex-direction: column; justify-content: center; gap: 22px; margin: 0 !important; }
.contact > .texte > * { margin: 0 !important; }
.contact h2 { font-size: clamp(52px, 6vw, 100px); color: var(--blanc); }
.contact p { max-width: 46ch; color: #dcdcf2; }
.contact .courriel a { font: 800 clamp(30px, 3.4vw, 52px)/1.1 var(--affiche); color: var(--fluo); text-decoration-thickness: 3px; text-underline-offset: 8px; overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   Blocs de contenu des pages
   ---------------------------------------------------------------------- */

/* Deux colonnes de texte */
.deux { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 56px; }
.deux > * { margin: 0 !important; }
.deux h3 { font-size: 30px; margin-bottom: 10px !important; }
.deux p + p, .deux h3 + p { margin-top: 12px !important; }
.trois, .quatre { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.quatre { grid-template-columns: repeat(4, 1fr); }
.trois > *, .quatre > * { margin: 0 !important; border-top: 3px solid currentColor; padding-top: 16px; }
.trois > * > *, .quatre > * > * { margin: 0 !important; }
.trois > * > * + *, .quatre > * > * + * { margin-top: 10px !important; }
.trois h3, .quatre h3 { font-size: clamp(26px, 2.2vw, 32px); }
.trois ul, .quatre ul { padding-left: 1.1em; }
.trois li, .quatre li { margin: 4px 0; }

/* Citation en exergue */
.citation p { font: 900 clamp(40px, 4.6vw, 76px)/.98 var(--affiche); text-transform: uppercase; max-width: 18ch; }
.citation p.signature { font: 400 16px var(--texte); text-transform: none; margin-top: 18px; }

/* Grand chiffre */
.chiffre { display: grid !important; grid-template-columns: auto 1fr; gap: 24px; align-items: center; border-top: 3px solid var(--bleu); border-bottom: 3px solid var(--bleu); padding: 18px 0; }
.chiffre > * { margin: 0 !important; }
.chiffre .nombre { font: 900 clamp(90px, 10vw, 160px)/.85 var(--affiche); }

/* Questions fréquentes */
.faq .wp-block-details { border-top: 1px solid var(--bleu); padding: 16px 0; margin: 0 !important; }
.faq .wp-block-details:last-child { border-bottom: 1px solid var(--bleu); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 19px; }
.faq details p { margin: 12px 0 0; max-width: 70ch; }

/* Galeries */
.wp-block-gallery.has-nested-images figure.wp-block-image img { object-fit: cover; }

/* Schéma au trait, affiché au bleu */
.schema.is-style-cyano img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.3); }
.schema.is-style-cyano { background: var(--blanc); }

/* -------------------------------------------------------------------------
   Fiche projet
   ---------------------------------------------------------------------- */

.fiche-technique { display: grid; grid-template-columns: max-content 1fr; margin: 0; border-top: var(--trait); font-size: 16px; }
.fiche-technique dt, .fiche-technique dd { margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(45, 46, 130, .28); }
.fiche-technique dt { font-weight: 600; padding-right: 28px; }
.fiche-technique a { text-underline-offset: 4px; }
.ouverture .wp-block-post-excerpt__excerpt { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; font-weight: 500; max-width: 36ch; margin: 0; }
.ouverture .wp-block-post-excerpt { margin: 0; }
.ouverture > .wp-block-post-featured-image { margin: 0 !important; border-left: var(--trait); min-height: 480px; position: relative; }
.ouverture > .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.ouverture .fil .wp-block-post-terms { display: inline; }

.recit { padding: 56px var(--gouttiere) 72px !important; margin: 0 !important; }
.recit h2 { font-size: clamp(36px, 4vw, 64px); margin-top: 56px; }
.recit h2:first-child { margin-top: 0; }
.recit .wp-block-image, .recit .wp-block-gallery { max-width: 1100px !important; }

.liens-projet { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--trait); border-bottom: var(--trait); }
.liens-projet > div { padding: 32px var(--gouttiere) 40px; }
.liens-projet > div + div { border-left: var(--trait); }
.liens-projet h2 { font-size: 36px; margin: 0 0 16px; }
.liens-projet ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(45, 46, 130, .28); }
.liens-projet li a { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(45, 46, 130, .28); text-decoration: none; font-weight: 600; }
.liens-projet li a:hover span:first-child, .liens-projet li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.liens-projet li span { font-weight: 400; white-space: nowrap; }

.voisins { display: grid; grid-template-columns: 1fr 1fr; }
.voisins a { display: grid; grid-template-columns: 140px 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center; align-content: center; padding: 24px var(--gouttiere); text-decoration: none; }
.voisins a + a, .voisins span + a { border-left: var(--trait); }
.voisins img { grid-row: span 2; width: 140px; height: 140px; object-fit: cover; }
.voisins small { font-size: 14px; align-self: end; }
.voisins strong { font: 900 34px/1 var(--affiche); text-transform: uppercase; align-self: start; }

/* -------------------------------------------------------------------------
   Journal
   ---------------------------------------------------------------------- */

.liste-journal .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 24px; padding: 0; list-style: none; }
.liste-journal .wp-block-post-template > li > * { margin: 0 0 10px; }
.liste-journal .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.liste-journal h2 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.05; }
.liste-journal h2 a { text-decoration: none; }
.liste-journal .wp-block-post-date { font-size: 14.5px; }
.liste-journal .wp-block-post-excerpt { font-size: 15.5px; }
.wp-block-query-pagination { margin-top: 48px !important; font-weight: 600; gap: 16px; }

.article-tete { padding: 48px var(--gouttiere) 32px !important; border-bottom: var(--trait); margin: 0 !important; }
.article-tete > * { max-width: 1100px; margin-inline: auto; }
.article-tete h1 { font-size: clamp(40px, 5vw, 80px); margin-top: 12px; }
.article-tete .wp-block-post-date { font-size: 15px; margin-top: 16px; }
.article-corps { padding: 40px var(--gouttiere) 64px !important; margin: 0 !important; }
.article-corps .wp-block-post-featured-image { max-width: 1100px; margin: 0 auto 40px; }
.article-corps h2 { font-size: clamp(30px, 3vw, 48px); margin-top: 48px; }
.article-corps h3 { font-size: 28px; margin-top: 36px; }

.projet-lie { max-width: 760px; margin: 0 auto 40px; padding: 0 var(--gouttiere); }
.projet-lie a { display: flex; align-items: center; gap: 18px; padding: 16px; background: var(--brume); text-decoration: none; }
.projet-lie img { width: 80px; height: 80px; object-fit: cover; }
.projet-lie small { display: block; font-size: 14px; }
.projet-lie strong { font: 900 30px/1 var(--affiche); text-transform: uppercase; }

.navigation-articles { border-top: var(--trait); padding: 24px var(--gouttiere) !important; display: flex !important; justify-content: space-between; gap: 24px; margin: 0 !important; font-weight: 600; }

/* -------------------------------------------------------------------------
   Petits écrans
   ---------------------------------------------------------------------- */

@media (max-width: 980px) {
	.entete { flex-wrap: wrap; }
	.tete, .ouverture, .contact, .deux, .liens-projet, .voisins { grid-template-columns: 1fr; }
	.ouverture { min-height: 0; }
	.ouverture > figure, .ouverture > .wp-block-post-featured-image { border-left: 0; border-top: var(--trait); min-height: 360px; }
	.savoirs { grid-template-columns: 1fr; }
	.savoir .plaque { padding-left: var(--gouttiere); }
	.bande .wp-block-post-template { grid-auto-columns: 72%; }
	.grille-projets .wp-block-post-template, .liste-journal .wp-block-post-template { grid-template-columns: 1fr 1fr; }
	.grille-archives .wp-block-post-template { grid-template-columns: repeat(3, 1fr); }
	ol.temps, ol.temps.cinq, .liste-outils, .quatre, .trois { grid-template-columns: 1fr 1fr; }
	ol.temps > li::after { display: none; }
	.liste-outils .outil:nth-child(3) { border-left: 0; }
	.liens-projet > div + div, .voisins a + a, .voisins span + a { border-left: 0; border-top: var(--trait); }
	.contact > figure { min-height: 320px; }
	.pied .colonnes-pied { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.grille-projets .wp-block-post-template, .liste-journal .wp-block-post-template, ol.temps, ol.temps.cinq, .liste-outils, .quatre, .trois { grid-template-columns: 1fr; }
	.grille-archives .wp-block-post-template { grid-template-columns: 1fr 1fr; }
	.liste-outils .outil + .outil { border-left: 0; border-top: 1px solid var(--bleu); }
	.savoir { aspect-ratio: 4 / 5; }
	.voisins a { grid-template-columns: 90px 1fr; }
	.voisins img { width: 90px; height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------------------
   Page L'atelier
   ---------------------------------------------------------------------- */

/* Portrait et fiche de Jonathan */
.portrait { display: grid !important; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.portrait > * { margin: 0 !important; }
.portrait > figure img { width: 100%; height: auto; }
.portrait .role { font: 900 clamp(26px, 2.4vw, 36px)/1.05 var(--affiche); text-transform: uppercase; margin-top: 14px !important; }
.portrait .texte > * + * { margin-top: 16px !important; }
.portrait .texte > * { margin: 0; }
.fiche-table { margin: 28px 0 0 !important; }
.fiche-table table { width: 100%; border-collapse: collapse; font-size: 16px; border-top: var(--trait); }
.fiche-table td { padding: 10px 0; border: 0; border-bottom: 1px solid rgba(45, 46, 130, .28); vertical-align: top; }
.fiche-table table, .fiche-table thead, .fiche-table tbody, .fiche-table tr { border-left: 0; border-right: 0; }
.fiche-table td:first-child { font-weight: 600; width: 34%; padding-right: 24px; }

/* Mosaïque de l'atelier : une grande photo, trois petites, légendes surlignées */
.mosaique { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 6px; max-width: none !important; margin-inline: calc(var(--gouttiere) * -1) !important; }
.mosaique > figure { margin: 0 !important; position: relative; overflow: hidden; }
.mosaique > figure:first-child { grid-row: span 2; }
.mosaique > figure:last-child { grid-column: span 2; }
.mosaique img { width: 100%; height: 100% !important; object-fit: cover; }
.mosaique .wp-element-caption { position: absolute; left: 0; bottom: 16px; margin: 0; background: var(--blanc); color: var(--bleu); font-weight: 700; font-size: 15px; padding: 6px 12px; }
.mosaique .wp-element-caption span { background: var(--surligne); padding: 0 2px; }
.credit { font-size: 14px; }

/* Chronologie : les années en grand */
ol.chronologie { list-style: none; padding: 0 !important; border-top: 2px solid currentColor; }
ol.chronologie > li { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .3); margin: 0; align-items: baseline; }
ol.chronologie strong { font: 900 clamp(48px, 5.6vw, 92px)/.85 var(--affiche); color: var(--fluo); }
ol.chronologie span { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; }
ol.chronologie span em { font-style: normal; font-weight: 600; color: var(--blanc); }
.has-bleu-background-color ol.chronologie > li { color: #dcdcf2; }

/* Le Portemine : le logo à sa juste taille */
.portemine { display: grid !important; grid-template-columns: 220px 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.portemine > * { margin: 0 !important; }
.portemine > figure img { width: 220px; height: auto; }
.portemine .texte > * + * { margin-top: 16px !important; }
.portemine .texte > * { margin: 0; }
.liste-outils.trois-sites { grid-template-columns: repeat(3, 1fr); }

/* -------------------------------------------------------------------------
   Page Contact
   ---------------------------------------------------------------------- */

.coordonnees > * { margin: 0 !important; }
.coordonnees .libelle { font-weight: 700; font-size: 15px; margin-top: 36px !important; }
.coordonnees .libelle:first-child { margin-top: 0 !important; }
.coordonnees .geant { font: 900 clamp(44px, 7.4vw, 128px)/.92 var(--affiche); text-transform: lowercase; overflow-wrap: anywhere; margin-top: 8px !important; }
.coordonnees .geant a { text-decoration: none; }
.coordonnees .moyen { font: 900 clamp(34px, 4.4vw, 72px)/.95 var(--affiche); margin-top: 8px !important; }
.coordonnees .moyen a { text-decoration: none; }
.adresse-bloc { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 56px; border-top: var(--trait); padding-top: 28px; }
.adresse-bloc > * { margin: 0 !important; }
.adresse-bloc .grand { font: 900 clamp(28px, 2.8vw, 44px)/1 var(--affiche); text-transform: uppercase; }
.adresse-bloc > * > * + * { margin-top: 12px !important; }
.adresse-bloc > * > * { margin: 0; }

@media (max-width: 980px) {
	.portrait, .portemine, .adresse-bloc { grid-template-columns: 1fr; }
	.mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 200px 200px; }
	.mosaique > figure:first-child { grid-row: auto; grid-column: span 2; }
	.liste-outils.trois-sites { grid-template-columns: 1fr; }
	.liste-outils.trois-sites .outil + .outil { border-left: 0; border-top: 1px solid var(--bleu); }
	ol.chronologie > li { grid-template-columns: 1fr; gap: 6px; }
}

/* -------------------------------------------------------------------------
   Corps de fiche projet : bandes texte et image, chiffres, photos en situation
   ---------------------------------------------------------------------- */

.fiche-corps { margin: 0 !important; }
.fiche-corps > * { margin: 0 !important; }

.bande-fiche { display: grid !important; grid-template-columns: 1fr 1fr; border-bottom: var(--trait); min-height: 460px; }
.bande-fiche > .texte { padding: 56px var(--gouttiere) 64px; margin: 0 !important; align-self: center; }
.bande-fiche > .texte > * { margin: 0; max-width: 56ch; }
.bande-fiche > .texte > * + * { margin-top: 16px !important; }
.bande-fiche h2 { font-size: clamp(36px, 3.8vw, 60px); margin-bottom: 8px !important; }
.bande-fiche ul { padding-left: 1.1em; }
.bande-fiche li { margin: 6px 0; }
.bande-fiche > figure { margin: 0 !important; border-left: var(--trait); position: relative; min-height: 380px; overflow: hidden; }
.bande-fiche > figure img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.bande-fiche.inverse > figure { order: -1; border-left: 0; border-right: var(--trait); }
.bande-fiche figure .wp-element-caption { position: absolute; left: 0; bottom: 18px; margin: 0; background: var(--blanc); color: var(--bleu); font-weight: 700; font-size: 15px; padding: 6px 12px; }
.bande-fiche figure .wp-element-caption span { background: var(--surligne); padding: 0 2px; }
.bande-fiche.inverse figure .wp-element-caption { left: auto; right: 0; }
.bande-fiche.texte-seul { grid-template-columns: 1fr; min-height: 0; }

.chiffres { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-bottom: var(--trait); }
.chiffres > .chiffre-item { padding: 32px var(--gouttiere) 36px; margin: 0 !important; }
.chiffres > .chiffre-item + .chiffre-item { border-left: 1px solid rgba(45, 46, 130, .28); }
.chiffres > .chiffre-item > * { margin: 0 !important; }
.chiffres .nombre { font: 900 clamp(64px, 7vw, 120px)/.85 var(--affiche); }
.chiffres .libelle-chiffre { margin-top: 10px !important; font-size: 16px; max-width: 26ch; }

.duo-photos { display: grid !important; grid-template-columns: 1fr 1fr; border-bottom: var(--trait); }
.duo-photos > figure { margin: 0 !important; position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.duo-photos > figure + figure { border-left: var(--trait); }
.duo-photos img { width: 100%; height: 100% !important; object-fit: cover; }
.duo-photos .wp-element-caption { position: absolute; left: 0; bottom: 16px; margin: 0; background: var(--blanc); color: var(--bleu); font-weight: 700; font-size: 15px; padding: 6px 12px; }
.duo-photos .wp-element-caption span { background: var(--surligne); padding: 0 2px; }

.fiche-corps > .section { border-bottom: var(--trait); }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery { gap: 6px !important; }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery figure { margin: 0 !important; }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery img { aspect-ratio: 1; }
.fiche-corps .equipe { font-size: 15.5px; }

@media (max-width: 980px) {
	.bande-fiche, .duo-photos { grid-template-columns: 1fr; }
	.bande-fiche > figure, .bande-fiche.inverse > figure { order: -1; border: 0; border-bottom: var(--trait); min-height: 300px; }
	.duo-photos > figure + figure { border-left: 0; border-top: var(--trait); }
	.chiffres > .chiffre-item + .chiffre-item { border-left: 0; border-top: 1px solid rgba(45, 46, 130, .28); }
}
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images { display: grid !important; grid-template-columns: repeat(4, 1fr); }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images figure.wp-block-image { width: auto !important; }
@media (max-width: 760px) { :is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------------------
   Fiche projet, version récit : « En bref », puis des parties
   (titre dans la marge, texte en colonne de lecture, grande photo).
   ---------------------------------------------------------------------- */

.en-bref { display: grid !important; grid-template-columns: repeat(3, 1fr); background: var(--brume); border-bottom: var(--trait); }
.en-bref > div { padding: 36px var(--gouttiere) 40px; margin: 0 !important; }
.en-bref > div + div { border-left: 1px solid rgba(45, 46, 130, .28); }
.en-bref > div > * { margin: 0 !important; }
.en-bref h2 { font-size: 30px; margin-bottom: 10px !important; }
.en-bref p { font-size: 17px; line-height: 1.5; }

/* Planche : chaque section est une rangée de quatre cases carrées.
   Le texte occupe une plaque de deux ou trois cases, ses photos le reste ; le côté alterne d'une section à l'autre.
   Les cases se règlent seules selon le contenu : une photo, deux photos (groupe .duo), une photo en largeur, ou aucune. */
.fiche-corps { padding-bottom: 80px; }
:is(.fiche-corps, .is-root-container) > .partie {
	--texte: 1 / -1; --photos: 1 / -1;
	display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 6px; row-gap: 0;
	max-width: calc(var(--large) + 2 * var(--gouttiere)); padding: 0 var(--gouttiere); margin: 6px auto 0 !important; box-sizing: border-box;
}
:is(.fiche-corps, .is-root-container) > .partie:first-child, .fiche-corps > .chapo-fiche + .partie { margin-top: 56px !important; }
:is(.fiche-corps, .is-root-container) > .partie::before { content: ""; grid-column: var(--texte); grid-row: 1 / 3; background: var(--brume); }
:is(.fiche-corps, .is-root-container) > .partie > * { margin: 0 !important; }
:is(.fiche-corps, .is-root-container) > .partie > h2 { grid-column: var(--texte); grid-row: 1; position: relative; padding: 26px 28px 0; font-size: clamp(28px, 2.5vw, 38px); line-height: .95; }
:is(.fiche-corps, .is-root-container) > .partie > .texte { grid-column: var(--texte); grid-row: 2; position: relative; padding: 14px 28px 26px; font-size: 16px; line-height: 1.6; column-gap: 32px; }
:is(.fiche-corps, .is-root-container) > .partie > .texte > * { margin: 0; break-inside: avoid-column; }
:is(.fiche-corps, .is-root-container) > .partie > .texte > * + * { margin-top: 12px !important; }
:is(.fiche-corps, .is-root-container) > .partie > .texte ul { padding-left: 1.1em; }
:is(.fiche-corps, .is-root-container) > .partie > .texte li { margin: 4px 0; }
:is(.fiche-corps, .is-root-container) > .partie > .texte strong { font-weight: 700; }
:is(.fiche-corps, .is-root-container) > .partie > figure, :is(.fiche-corps, .is-root-container) > .partie > .duo { grid-column: var(--photos); grid-row: 1 / 3; }
:is(.fiche-corps, .is-root-container) > .partie > .duo { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; }
:is(.fiche-corps, .is-root-container) > .partie > .duo > figure { margin: 0 !important; }

/* Combien de cases pour le texte et pour les photos */
:is(.fiche-corps, .is-root-container) > .partie:not(:has(> figure, > .duo)) > .texte { columns: 2; max-width: 1000px; }
:is(.fiche-corps, .is-root-container) > .partie:has(> figure) { --texte: 1 / span 3; --photos: 4 / span 1; }
:is(.fiche-corps, .is-root-container) > .partie:has(> figure) > .texte { columns: 2; }
:is(.fiche-corps, .is-root-container) > .partie:has(> figure.cadre-paysage), :is(.fiche-corps, .is-root-container) > .partie:has(> .duo) { --texte: 1 / span 2; --photos: 3 / span 2; }
:is(.fiche-corps, .is-root-container) > .partie:has(> figure.cadre-paysage) > .texte { columns: auto; }
:is(.fiche-corps, .is-root-container) > .partie:nth-of-type(even):has(> figure) { --texte: 2 / span 3; --photos: 1 / span 1; }
:is(.fiche-corps, .is-root-container) > .partie:nth-of-type(even):has(> figure.cadre-paysage), :is(.fiche-corps, .is-root-container) > .partie:nth-of-type(even):has(> .duo) { --texte: 3 / span 2; --photos: 1 / span 2; }

/* Les photos : des cases carrées (deux cases de large pour une photo en largeur), recadrées autour du point d'intérêt */
:is(.fiche-corps, .is-root-container) > .partie figure { position: relative; overflow: hidden; margin: 0; }
:is(.fiche-corps, .is-root-container) > .partie figure::before { content: ""; display: block; padding-top: 100%; }
:is(.fiche-corps, .is-root-container) > .partie > figure.cadre-paysage::before { padding-top: 50%; }
:is(.fiche-corps, .is-root-container) > .partie figure img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover !important; padding: 0 !important; background: none !important; }
:is(.fiche-corps, .is-root-container) > .partie figure .wp-element-caption, :is(.fiche-corps, .is-root-container) .galerie-fiche figure .wp-element-caption {
	position: absolute; left: 0; bottom: 12px; max-width: calc(100% - 24px); margin: 0; padding: 5px 10px; background: var(--blanc); color: var(--bleu);
	font-weight: 700; font-size: 13px; line-height: 1.35; text-align: left;
	text-decoration: underline var(--fluo); text-decoration-thickness: .6em; text-underline-offset: -.46em; text-decoration-skip-ink: none;
}

/* Dans l'éditeur, l'image est enveloppée d'un cadre de redimensionnement : il ne doit pas servir de repère. */
.is-root-container > .partie figure .components-resizable-box__container { position: static !important; width: auto !important; height: auto !important; }

/* « En images » : la suite de la planche, quatre photos par rangée */
:is(.fiche-corps, .is-root-container) > .galerie-fiche { max-width: calc(var(--large) + 2 * var(--gouttiere)); padding: 0 var(--gouttiere) !important; margin: 6px auto 0 !important; box-sizing: border-box; border-bottom: 0 !important; }
:is(.fiche-corps, .is-root-container) > .galerie-fiche > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images figure.wp-block-image { position: relative; }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery img { object-fit: cover !important; padding: 0 !important; background: none !important; }
/* Rangée incomplète : une ou deux photos s'élargissent pour que la dernière rangée tombe juste */
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images { grid-auto-flow: dense; }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:first-child:nth-last-child(4n+3) { grid-column: span 2; }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:first-child:nth-last-child(4n+2), :is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:first-child:nth-last-child(4n+2) + figure { grid-column: span 2; }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:first-child:nth-last-child(4n+5) { grid-column: span 2; grid-row: span 2; }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:only-child { grid-column: 1 / -1; }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:first-child:nth-last-child(4n+2) img, :is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:first-child:nth-last-child(4n+2) + figure img, :is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:only-child img { aspect-ratio: 2 / 1; }
:is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:first-child:nth-last-child(4n+3) img, :is(.fiche-corps, .is-root-container) .galerie-fiche .wp-block-gallery.has-nested-images > figure:first-child:nth-last-child(4n+5) img { aspect-ratio: auto; height: 100% !important; }

@media (max-width: 980px) {
	.en-bref { grid-template-columns: 1fr; }
	.en-bref > div + div { border-left: 0; border-top: 1px solid rgba(45, 46, 130, .28); }
}
@media (max-width: 780px) {
	:is(.fiche-corps, .is-root-container) > .partie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
	:is(.fiche-corps, .is-root-container) > .partie::before, :is(.fiche-corps, .is-root-container) > .partie > h2, :is(.fiche-corps, .is-root-container) > .partie > .texte { grid-column: 1 / -1 !important; }
	:is(.fiche-corps, .is-root-container) > .partie > .texte { columns: auto !important; }
	:is(.fiche-corps, .is-root-container) > .partie > figure, :is(.fiche-corps, .is-root-container) > .partie > .duo { grid-column: 1 / -1 !important; grid-row: 3 !important; margin-top: 6px !important; }
	:is(.fiche-corps, .is-root-container) > .partie > figure::before { padding-top: 66% !important; }
}

/* Chapô de fiche : le projet en deux ou trois phrases */
.chapo-fiche { display: grid !important; grid-template-columns: 4fr 8fr; gap: 0 clamp(32px, 5vw, 80px); padding: 56px var(--gouttiere) 8px; max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto !important; box-sizing: border-box; }
.chapo-fiche > p { grid-column: 2; margin: 0 !important; max-width: 40ch; font-size: clamp(22px, 2vw, 30px); line-height: 1.4; font-weight: 500; }
@media (max-width: 980px) { .chapo-fiche { grid-template-columns: 1fr; } .chapo-fiche > p { grid-column: 1; } }
.chargement-journal { margin: 40px 0 0 !important; min-height: 1.6em; font-weight: 600; }

/* Parcours en trois colonnes : projets, enseignement, formation */
.parcours { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; border-top: 2px solid currentColor; }
.parcours > div { padding: 24px 28px 8px 0; margin: 0 !important; }
.parcours > div + div { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .3); }
.parcours > div > * { margin: 0 !important; }
.parcours h3 { font-size: clamp(28px, 2.4vw, 38px); color: var(--blanc); margin-bottom: 16px !important; }
.parcours ul { list-style: none; padding: 0 !important; }
.parcours li { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .2); color: #dcdcf2; line-height: 1.45; }
.parcours li strong { font: 900 22px/1.1 var(--affiche); color: var(--fluo); }
@media (max-width: 980px) {
	.parcours { grid-template-columns: 1fr; }
	.parcours > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); margin-top: 16px !important; }
}

.savoir > figure a { display: block; height: 100%; }

/* -------------------------------------------------------------------------
   Commanditaires : une colonne par secteur, les noms à l'encre
   ---------------------------------------------------------------------- */

.references { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 3px solid var(--bleu); }
.references > div { padding: 20px 24px 8px 0; margin: 0 !important; }
.references > div + div { padding-left: 24px; border-left: 1px solid var(--bleu); }
.references h3 { font: 600 14px/1.3 var(--texte); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.references h3 span { background: var(--surligne); padding: 0 2px; }
.references ul { list-style: none; margin: 0; padding: 0; }
.references li { font: 900 clamp(24px, 2.2vw, 34px)/1.05 var(--affiche); text-transform: uppercase; padding: 10px 0; border-top: 1px solid rgba(45, 46, 130, .25); }
.references a { text-decoration: none; }
@media (max-width: 980px) {
	.references > div + div { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
	.ligne-filtres { gap: 2px 20px; }
	.ligne-filtres small { flex-basis: 100%; margin-top: 8px; }
	.references li { padding: 7px 0; }
}

/* Menu (variante D) : les savoir-faire, un séparateur, le site, Contact surligné */
.entete .wp-block-navigation .debut-groupe { padding-left: 24px; border-left: 1px solid rgba(45, 46, 130, .35); }
.entete .wp-block-navigation .bouton-contact > a { font: 800 22px/1 var(--affiche); text-transform: uppercase; padding: 2px 4px; background: var(--surligne); background-size: auto; }
.entete .wp-block-navigation .bouton-contact > a:hover, .entete .wp-block-navigation .bouton-contact > a:focus-visible, .entete .wp-block-navigation .bouton-contact.current-menu-item > a { background: var(--bleu); color: var(--fluo); }
.wp-block-navigation__responsive-container.is-menu-open .debut-groupe { padding-left: 0; border-left: 0; margin-top: 18px; }
@media (max-width: 1400px) {
	.entete .wp-block-navigation { font-size: 15px; gap: 4px 18px; }
	.entete .wp-block-navigation .debut-groupe { padding-left: 18px; }
}
/* Sous 1200 px, le menu passe en bouton et panneau, comme sur téléphone */
@media (max-width: 1200px) {
	.entete .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.wp-block-navigation__responsive-container.is-menu-open .bouton-contact > a { margin-top: 18px; }
/* Panneau du menu sur petit écran : aligné à gauche, aéré, Contact en grand */
.wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--gouttiere) 40px !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding-top: 48px !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; gap: 6px !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .bouton-contact > a { font: 900 34px/1 var(--affiche); background: var(--fluo); color: var(--bleu); padding: 4px 8px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { background-image: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.debut-groupe { padding-left: 0 !important; border-left: 0 !important; margin-top: 18px; }

/* -------------------------------------------------------------------------
   Cadrage des images (extension atelier-vous-images)
   - le point d'intérêt arrive en object-position sur chaque image ;
   - .cadre-fond-uni : objet sur fond uni, montré entier sur la couleur de son fond (--fond-image) ;
   - .cadre-portrait / .cadre-carre / .cadre-paysage : orientation de la photo.
   ---------------------------------------------------------------------- */

/* Objets sur fond uni : entiers, posés sur leur propre fond, dans les cartes, galeries, fiches et listes */
.carte-image img.cadre-fond-uni,
.voisins img.cadre-fond-uni,
.liste-journal img.cadre-fond-uni,
.projet-lie img.cadre-fond-uni {
	object-fit: contain !important;
	background: var(--fond-image, #fff);
	padding: 5%;
	box-sizing: border-box;
}