/*
Theme Name: Yalhma Robette
Author: Yalhma Robette
Description: Portfolio de Yalhma Robette, designer eco-social. Theme bloc sur mesure, modifiable dans l'editeur.
Version: 1.4.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: yalhma-robette
*/
/* Yalhma Robette — maquette
   Registre : affiches riso (encres riso, grain, flous granuleux, bandes de couleur, photos imprimées en une encre),
   sans papiers découpés ni dessin au trait, à la demande de la cliente. Contenu : dossier « Récit de paysages ».
   Titres : Coconat (Collletttivo, OFL). Texte : Asul, la police du dossier. Fond blanc, à la demande de la cliente. */

@font-face { font-family: "Coconat"; src: url("assets/fonts/Coconat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Coconat"; src: url("assets/fonts/Coconat-Demi.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Coconat"; src: url("assets/fonts/Coconat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* blanc et encres riso */
  --papier: #ffffff;
  --creme: #ffffff;
  --encre: #1d1d1b;
  --bleu: #3255a4;
  --rouge: #e2264f;
  --orange: #f47b3f;
  --vert: #6f9446;
  --ciel: #82adc9;

  --titre: "Coconat", Georgia, serif;
  --texte: "Asul", Georgia, serif;
  --marge: clamp(16px, 3vw, 48px);
  --entete: 76px;
  /* le bleu marbré de la page, repris par la barre du menu et par le fond d'eau (app.js) */
  --fond:
    radial-gradient(60vw 45vw at 12% 8%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%),
    radial-gradient(55vw 40vw at 88% 55%, rgba(10, 20, 60, .2), rgba(10, 20, 60, 0) 70%),
    radial-gradient(40vw 30vw at 30% 90%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%),
    var(--bleu);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* toute la page sur un même aplat d'encre bleue, marbré comme une impression riso */
body {
  margin: 0;
  background: var(--fond);
  background-attachment: fixed;
  color: var(--creme);
  font: 400 17px/1.55 var(--texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }

/* — Grain d'impression sur toute la page — */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background-image: var(--grain); background-size: 220px;
  mix-blend-mode: multiply; opacity: .38;
}
.bande > * { position: relative; }

.petites-caps { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
/* grands titres de section : capitales centrées */
.titre-section {
  font-family: var(--titre); font-weight: 500;
  font-size: clamp(38px, 6vw, 100px); line-height: .95; letter-spacing: -.01em;
  text-transform: uppercase; text-align: center;
  padding: .1em 0;
}
/* le grand titre mène à sa page : souligné au survol, comme les titres des cartes */
.titre-lien { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .045em; text-underline-offset: .12em; transition: text-decoration-color .2s; }
.titre-lien:hover, .titre-lien:focus-visible { text-decoration-color: currentColor; }

/* — En-tête — */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 99; /* sous le grain et avec le fond de la page : aucune différence de bleu */
  height: var(--entete);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--marge);
  background: var(--fond); background-attachment: fixed; color: var(--creme);
  transition: box-shadow .25s;
}
.entete.est-plein { box-shadow: 0 1px 0 rgba(255, 255, 255, .22); }
.entete-nom { font-family: var(--titre); font-size: clamp(26px, 2.4vw, 34px); }
.entete-nav { display: flex; gap: 8px; }
.entete-nav a {
  padding: 7px 16px; border-radius: 999px; font-size: clamp(16px, 1.35vw, 19px);
  transition: background-color .15s;
}
.entete-nav a:hover { background: var(--creme); color: var(--bleu); }

/* — Photos en couleurs, avec un grain d'impression ; au survol des cartes, seules photos cliquables, monotone riso
     bleu : les noirs deviennent l'encre, les blancs restent blancs — */
.riso { position: relative; overflow: hidden; }
.riso img { width: 100%; height: 100%; object-fit: cover; transition: filter .45s; }
.riso::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--bleu); mix-blend-mode: screen;
  opacity: 0; transition: opacity .45s;
}
@media (hover: hover) {
  .carte:hover .riso img { filter: grayscale(1) contrast(1.25) brightness(1.04); }
  .carte:hover .riso::after { opacity: 1; }
}
.riso::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); background-size: 160px; mix-blend-mode: multiply; opacity: .35;
}

/* — Bandes de couleur — */
.bande { position: relative; overflow: hidden; }

/* titre lu par les moteurs de recherche et les lecteurs d'écran, sans ouverture à gros titre */
.pour-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* — Projets : sur la couverture du dossier, adoucie et retournée, voilée de bleu — */
.projets { position: relative; padding: calc(var(--entete) + clamp(32px, 5vw, 72px)) var(--marge) clamp(80px, 9vw, 140px); }
.projets > :not(.section-fond) { position: relative; z-index: 1; }
/* overflow: clip (et non hidden) pour que l'image puisse rester collée en haut de l'écran pendant le défilement */
.section-fond {
  position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; background: var(--bleu);
  /* le bas de la photo se fond dans le fond d'eau : pas de limite nette, et l'eau reste visible dans le fondu */
  --fondu: clamp(140px, 26vh, 280px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fondu)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fondu)), transparent);
}
.section-fond img {
  position: sticky; top: 0; display: block;
  width: 100%; height: 100vh; max-width: none; object-fit: cover;
  transform: scaleX(-1) scale(1.06); filter: blur(7px); /* agrandie pour cacher les bords flous */
}
/* fond d'eau : canvas basse définition étiré sur l'écran, sous le contenu (app.js le fait onduler) */
.fond-eau { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.section-fond::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bleu); mix-blend-mode: multiply; opacity: .55;
}
.projets-tete { margin-bottom: clamp(40px, 5vw, 72px); }
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(24px, 3vw, 44px); }
.filtres + .filtres { margin-top: 10px; }
.filtres-titre { align-self: center; margin-right: 6px; }
.fiches-aucun { padding: clamp(40px, 5vw, 80px) 0; text-align: center; font-size: clamp(17px, 1.25vw, 19px); }
.filtre {
  font: inherit; font-size: 15px; color: var(--creme);
  border: 1.5px solid var(--creme); border-radius: 999px; padding: 6px 16px;
  background: transparent; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.filtre:hover { background: var(--creme); border-color: var(--creme); color: var(--bleu); }
.filtre.est-actif { background: var(--creme); border-color: var(--creme); color: var(--bleu); }

.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4vw, 64px) clamp(20px, 2.4vw, 36px); }
.grille-suite { margin-top: clamp(16px, 2vw, 32px); text-align: center; }
.carte { display: block; }
.carte.est-masque { display: none; }
/* photos en portrait, posées directement sur le fond de la page */
.carte-image { aspect-ratio: 4 / 5; }
.carte-titre { margin-top: 16px; font-family: var(--titre); font-weight: 500; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.05; transition: color .2s; }
.carte-meta { margin-top: 6px; font-size: 15px; opacity: .8; }
@media (hover: hover) {
  .carte:hover .carte-titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
}

/* — À propos : sur le bleu riso de la page (le fond d'eau), portrait dans un cercle de texte — */
.apropos { padding: clamp(90px, 11vw, 170px) var(--marge) clamp(56px, 7vw, 110px); }
/* accueil : À propos ouvre la page, sous la barre du menu ; les projets suivent */
.pour-lecteur + .apropos { padding-top: calc(var(--entete) + clamp(32px, 5vw, 72px)); }
.apropos + .projets { padding-top: clamp(48px, 6vw, 88px); }
.apropos > .titre-section { z-index: 1; margin-bottom: clamp(32px, 4vw, 64px); }
.apropos-grille {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: var(--marge);
}
.apropos-texte { margin-top: 28px; max-width: 38ch; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; }
.parcours { margin-top: 32px; max-width: 640px; border-top: 1px solid rgba(246, 238, 223, .55); }
.parcours li { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(246, 238, 223, .55); }
.parcours span { font-weight: 700; }
/* même pastille que les filtres : contour blanc, blanc plein et texte bleu au survol */
.bouton {
  display: inline-block; margin-top: 32px;
  padding: 6px 16px; border: 1.5px solid var(--creme); border-radius: 999px;
  color: var(--creme); font-size: 15px;
  transition: background-color .15s, color .15s;
}
.bouton:hover { background: var(--creme); color: var(--bleu); }
.medaillon { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: center; }
.medaillon-photo { position: absolute; inset: 15%; border-radius: 50%; }
.cercle { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cercle text { fill: var(--creme); font-family: var(--texte); font-weight: 700; font-size: 19px; letter-spacing: .16em; }
/* rotation lente, toujours active (même quand le système demande de réduire les animations) */
.cercle text { transform-origin: 200px 200px; animation: tourne 40s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* — Contact : à la fin de chaque page, sur le fond d'eau — */
/* trois colonnes sur toute la largeur, sous un filet, alignées sur celles des projets (même écart que .grille) */
.pied {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px);
  padding: 0 var(--marge) clamp(28px, 3vw, 44px);
  color: var(--creme); font-size: 17px; line-height: 1.5;
}
.pied::before { content: ""; grid-column: 1 / -1; border-top: 1px solid rgba(246, 238, 223, .55); }
/* accueil : À propos sur la photo, voile plus dense pour lire le texte ; Projets sur le fond d'eau */
.page-accueil .apropos { overflow: clip; }
.page-accueil .section-fond::after { opacity: .75; }
/* une ligne par coordonnée, toutes de la même taille : seuls le nom (capitales) et le mail (souligné) se distinguent */
.pied-contact a, .pied-liens a { display: block; width: fit-content; }
.pied-contact a:hover, .pied-liens a:hover, .pied-mail { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.pied-nom { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* newsletter : le champ et le bouton sur un même filet ; le bouton plein, comme un filtre actif */
.pied-newsletter form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--creme); }
.pied-newsletter input[type="email"] { flex: 1 1 150px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--creme); font: inherit; }
.pied-newsletter input::placeholder { color: var(--creme); opacity: .7; }
.pied-newsletter input:focus { outline: none; }
.pied-newsletter form:focus-within { border-bottom-width: 2px; padding-bottom: 7px; }
.pied-newsletter .bouton { flex: none; margin-top: 0; background: var(--creme); color: var(--bleu); font-family: inherit; cursor: pointer; }
.pied-newsletter .bouton:hover { background: transparent; color: var(--creme); }

/* — Pages intérieures — */
html { scroll-padding-top: calc(var(--entete) + 20px); } /* les ancres ne passent pas sous la barre du menu */
.entete-nav a[aria-current="page"] { background: var(--creme); color: var(--bleu); }
.texte-long { max-width: 62ch; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.5; }
.texte-long p + p { margin-top: .9em; }
.texte-long a, .parcours--complet a, .extrait a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

.page-projets .projets-tete { margin-bottom: clamp(32px, 4vw, 56px); }

/* Page d'un projet : la photo reste derrière, mais le voile est plus dense pour lire de longs textes */
.page-projet .section-fond::after { opacity: .88; }
.page-projet .projets { padding-bottom: 0; }
.projet-tete { text-align: center; }
.projet-tete .bouton { margin-top: 0; }
.projet-titre { margin-top: clamp(24px, 3vw, 40px); font-family: var(--titre); font-weight: 500; font-size: clamp(34px, 4.6vw, 76px); line-height: 1.02; text-wrap: balance; }
.projet-suite {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px);
  padding: clamp(28px, 3vw, 44px) var(--marge);
}
.projet-suite a { font-family: var(--titre); font-weight: 500; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.05; }
.projet-suite a:last-child { text-align: right; }
.projet-suite a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.projet-suite .petites-caps { display: block; margin-bottom: 8px; font-family: var(--texte); }
.fiche {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(28px, 5vw, 88px);
  padding: clamp(32px, 4vw, 64px) 0;
}
/* une seule photo de présentation, sans légende */
.fiche-photo .riso { display: block; aspect-ratio: 4 / 5; }
.fiche-photo--libre .riso { aspect-ratio: auto; }
.fiche-photo--libre img { height: auto; }
.galerie figcaption { margin-top: 6px; font-size: 13px; line-height: 1.3; }
/* sous-parties de photos : titre et petit texte à gauche, photos légendées à droite, sans recadrage */
.galerie { grid-column: 1 / -1; }
.galerie-partie {
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(16px, 3vw, 48px);
  padding: clamp(28px, 3vw, 44px) 0;
  border-top: 1px solid rgba(246, 238, 223, .55);
}
.galerie-partie:last-child { padding-bottom: 0; }
.galerie-intro h3 { font-family: var(--titre); font-weight: 500; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.05; }
.galerie-intro p { margin-top: 12px; max-width: 34ch; font-size: 17px; line-height: 1.4; }
/* toujours deux colonnes, dans l'ordre de lecture (avant, pendant, après) */
.galerie-photos { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(14px, 1.6vw, 24px) clamp(10px, 1.2vw, 18px); }
.galerie-video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* vidéo réservée : le bouton ouvre le champ de code, le lecteur prend ensuite sa place */
.fiche-texte > .galerie-video { margin-top: 32px; }
.video-code summary { list-style: none; cursor: pointer; }
.video-code summary::-webkit-details-marker { display: none; }
.video-code form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; }
.video-code label, .video-code-erreur { flex-basis: 100%; }
.video-code input { width: min(100%, 220px); padding: 6px 16px; border: 1.5px solid var(--creme); border-radius: 999px; background: transparent; color: var(--creme); font: inherit; }
.video-code form .bouton { margin-top: 0; background: transparent; font-family: inherit; cursor: pointer; }
.video-code form .bouton:hover { background: var(--creme); color: var(--bleu); }
.galerie .riso { display: block; }
.galerie .riso img { height: auto; }
.fiche > .extrait { grid-column: 1 / -1; margin-top: clamp(8px, 2vw, 28px); margin-bottom: clamp(8px, 2vw, 28px); }
/* carte de situation du projet : la France en filet blanc, le lieu en point d'encre blanche */
/* la carte fait corps avec la ligne Lieu : le filet qui clôt la liste passe sous la carte */
.fiche-infos:has(+ .lieu) { margin-bottom: 0; }
.fiche-infos:has(+ .lieu) li:last-child { border-bottom: 0; }
.lieu { max-width: 640px; margin-bottom: 32px; padding: 8px 0 24px; border-bottom: 1px solid rgba(246, 238, 223, .55); }
.lieu svg { display: block; width: min(100%, 260px); height: auto; overflow: visible; }
.lieu-halo { fill: none; stroke: var(--creme); stroke-width: 6; }
.lieu-point { fill: var(--creme); }
/* catégories et crédits du projet : une information par ligne */
.fiche-infos { margin-top: 0; margin-bottom: 32px; font-size: 15px; }
.fiche-infos li { padding: 8px 0; }

/* À propos : en haut de page, sous la barre du menu */
.apropos--page { padding-top: calc(var(--entete) + clamp(32px, 5vw, 72px)); padding-bottom: 0; overflow: clip; }
/* le haut de la page sur la photo, jusqu'au bord de l'écran ; le fondu se termine juste avant la première rubrique */
.apropos-haut { display: flow-root; padding-bottom: clamp(56px, 7vw, 110px); }
.apropos-haut > :not(.section-fond) { position: relative; z-index: 1; }
.apropos-haut > .titre-section { margin-bottom: clamp(32px, 4vw, 64px); }
.apropos-haut > .section-fond { inset: calc(-1 * (var(--entete) + clamp(32px, 5vw, 72px))) calc(-1 * var(--marge)) 0; }
.page-apropos .section-fond::after { opacity: .75; }
.apropos-intro .apropos-texte { max-width: 46ch; }
.apropos-intro .apropos-texte:first-child { margin-top: 0; }
.extrait { margin: clamp(48px, 7vw, 110px) auto; max-width: 25em; font-family: var(--titre); font-size: clamp(24px, 2.6vw, 42px); line-height: 1.18; text-align: center; }
.extrait figcaption { margin-top: 1em; font-family: var(--texte); font-size: 15px; line-height: 1.4; }
.extrait blockquote { text-wrap: balance; }
.rubrique {
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(16px, 3vw, 48px);
  padding: clamp(32px, 4vw, 60px) 0;
  border-top: 1px solid rgba(246, 238, 223, .55);
}
.rubrique-titre { font-family: var(--titre); font-weight: 500; font-size: clamp(26px, 2.8vw, 46px); line-height: 1.05; }
.parcours--complet { margin-top: 0; max-width: none; }
.parcours--complet li { padding: 14px 0; }
.parcours--complet { border-top: 0; }
.parcours--complet li:first-child { padding-top: 0; }
.parcours--complet li:last-child { border-bottom: 0; padding-bottom: 0; } /* le filet de la rubrique suivante suffit */
.parcours--complet h3 { font-size: 17px; font-weight: 700; line-height: 1.35; }
.parcours--complet p { font-size: 15px; line-height: 1.45; }
.parcours--complet h3 + p { margin-top: 2px; opacity: .85; }
.parcours--complet p + p { margin-top: 6px; }

/* — Responsive — */
@media (max-width: 900px) {
  .apropos-grille { grid-template-columns: 1fr; }
  .grille { grid-template-columns: repeat(2, 1fr); }
  .fiche, .rubrique { grid-template-columns: 1fr; }
  .pied { grid-template-columns: repeat(2, 1fr); }
  .galerie-partie { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grille { grid-template-columns: 1fr; }
  .galerie-photos { grid-template-columns: 1fr; } /* sur téléphone, chaque photo et chaque vidéo sur sa ligne */
  .entete-nav a { padding: 6px 9px; font-size: 14px; }
  .filtres-titre { flex-basis: 100%; margin-right: 0; text-align: center; }
  .pied { grid-template-columns: 1fr; }
  .parcours li { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================================
   Adaptations WordPress : ce qui change quand la maquette passe en blocs natifs.
   Le CSS de bloc arrive au même niveau que celui du thème : chaque règle ci-dessous
   est donc plus spécifique que celle du bloc, jamais simplement plus tardive.
   ============================================================================ */

/* Espacement automatique : coupé dans theme.json (blockGap), filet ici à spécificité nulle */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image, figure.wp-block-embed { margin: 0; }
img { height: auto; }
.wp-site-blocks { padding: 0; }

/* Liens et photos de la maquette : hérités, sans la couleur par défaut */
.wp-block-post-content a, .wp-block-template-part a { color: inherit; }
h1.wp-block-heading:where(:not([class*="titre"])), :where(.wp-block-heading) { margin-block: 0; }

/* La photo de fond : le bloc image porte directement .section-fond, l'image reste collée en haut de l'écran */
.wp-block-image.section-fond { margin: 0; }
.wp-block-image.section-fond img {
  position: sticky; top: 0; display: block;
  width: 100%; height: 100vh; max-width: none; object-fit: cover;
}

/* Photos : .riso est sur la figure du bloc */
.wp-block-image.riso img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carte:hover .wp-block-image.riso img { filter: grayscale(1) contrast(1.25) brightness(1.04); }
.wp-block-image.fiche-photo.riso { display: block; aspect-ratio: 4 / 5; }
.wp-block-image.fiche-photo--libre.riso { aspect-ratio: auto; }
.wp-block-image.fiche-photo--libre.riso img { height: auto; }

/* Photos légendées : le grain s'arrête à la photo, la légende reste nette dessous */
.wp-block-image.galerie-photo.riso { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; }
.wp-block-image.galerie-photo.riso img { grid-area: 1 / 1; height: auto; }
.wp-block-image.galerie-photo.riso::before { position: relative; inset: auto; grid-area: 1 / 1; }
.wp-block-image.galerie-photo.riso::after { display: none; }
.galerie .wp-block-image figcaption, .galerie .wp-block-embed figcaption { grid-area: 2 / 1; margin: 6px 0 0; font-size: 13px; line-height: 1.3; text-align: left; }

/* Blocs Galerie, partout : deux colonnes au plus (une sur téléphone), quel que soit le réglage de colonnes, et la légende sous la photo.
   (:not(#yr):not(#yr2) pour passer devant les règles du bloc Galerie, qui portent déjà un :not(#…)) */
/* une galerie, ou un groupe qui en contient une, posée dans les photos d'une sous-partie : ses photos rejoignent la grille de deux colonnes */
:where(body:not(.editor-styles-wrapper)) .galerie-photos :is(.wp-block-group, .wp-block-gallery):has(.wp-block-gallery),
:where(body:not(.editor-styles-wrapper)) .galerie-photos .wp-block-gallery.has-nested-images { display: contents; }
/* Photos des sous-parties et galeries : pensées en deux colonnes qui se remplissent l'une après l'autre (demande de Léo),
   sans blanc entre deux photos d'une même colonne ; une seule colonne sur téléphone. */
.galerie-photos, .wp-block-gallery.has-nested-images {
  --ecart-photos: clamp(14px, 1.6vw, 24px);
  display: block; columns: 2; column-gap: clamp(10px, 1.2vw, 18px);
  margin: 0 0 calc(-1 * var(--ecart-photos)); /* l'écart sous la dernière photo de chaque colonne ne compte pas */
}
.galerie-photos .wp-block-gallery.has-nested-images { margin: 0; }
.galerie-photos :is(figure.wp-block-image, figure.wp-block-embed),
.galerie-photos > :not(.wp-block-group):not(.wp-block-gallery),
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#yr):not(#yr2) {
  break-inside: avoid; margin: 0 0 var(--ecart-photos);
}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#yr):not(#yr2) {
  display: grid; grid-template-columns: minmax(0, 1fr);
  width: auto !important; max-width: none; flex: none; position: relative; /* le bloc Galerie impose une largeur en pourcentage */
}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#yr):not(#yr2) img {
  grid-area: 1 / 1; display: block; width: 100%; height: auto; max-width: 100% !important; object-fit: initial; flex: none;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#yr):not(#yr2) figcaption {
  position: static; grid-area: 2 / 1; width: auto; max-height: none; overflow: visible;
  margin: 6px 0 0; padding: 0; background: none; color: inherit; text-shadow: none;
  font-size: 13px; line-height: 1.3; text-align: left;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#yr):not(#yr2)::before {
  content: ""; position: relative; inset: auto; grid-area: 1 / 1; z-index: 1; pointer-events: none;
  width: auto; height: auto; max-height: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  -webkit-mask-image: none; mask-image: none;
  background: none; background-image: var(--grain); background-size: 160px; mix-blend-mode: multiply; opacity: .35;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#yr):not(#yr2)::after { display: none; }
/* un groupe qui porte .riso ne doit pas griser la légende : le grain reste sur les photos */
.galerie .wp-block-group.riso { overflow: visible; }
.galerie .wp-block-group.riso::before, .galerie .wp-block-group.riso::after { content: none; }
@media (max-width: 560px) { .galerie-photos, .wp-block-gallery.has-nested-images { columns: 1; } }

/* Deux colonnes séparées (demande de Léo) : un bloc Colonnes .colonnes-photos dans les photos d'une sous-partie.
   Chaque colonne se remplit à la main, indépendamment de l'autre ; une seule colonne sur téléphone. */
.galerie-photos:has(> .colonnes-photos) { columns: auto; margin: 0; }
.wp-block-columns.colonnes-photos {
  display: flex; flex-wrap: nowrap !important; align-items: flex-start;
  gap: clamp(10px, 1.2vw, 18px); margin: 0; padding: 0;
}
.wp-block-columns.colonnes-photos > .wp-block-column { flex: 1 1 0; min-width: 0; margin: 0; }
.wp-block-columns.colonnes-photos > .wp-block-column > :last-child,
.wp-block-columns.colonnes-photos > .wp-block-column > .wp-block-gallery:last-child figure.wp-block-image:last-child { margin-bottom: 0; }
.wp-block-columns.colonnes-photos .wp-block-gallery.has-nested-images { columns: 1; margin: 0; }
@media (max-width: 560px) {
  .wp-block-columns.colonnes-photos { flex-direction: column; gap: var(--ecart-photos); }
  .wp-block-columns.colonnes-photos > .wp-block-column { flex-basis: auto; width: 100%; }
}

/* Lecteurs vidéo : même format que dans la maquette */
.wp-block-embed.galerie-photo .wp-block-embed__wrapper { width: 100%; }
.wp-block-embed.galerie-photo iframe { display: block; width: 100%; border: 0; }

/* Cartes : le lien du titre couvre toute la carte */
.carte { position: relative; }
.carte-titre a { color: inherit; }
.carte-titre a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* Cartes automatiques (bloc Boucle de requete) : image mise en avant, titre de la page, ligne de la carte */
.grille > .est-masque { display: none; }
.wp-block-post-template.grille { margin: 0; padding: 0; list-style: none; max-width: none; }
.wp-block-post-featured-image.riso { margin: 0; }
.wp-block-post-featured-image.riso img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.carte:hover .wp-block-post-featured-image.riso img { filter: grayscale(1) contrast(1.25) brightness(1.04); }
.wp-block-post-title.carte-titre a { display: inline; font: inherit; color: inherit; text-decoration: inherit; }
button.filtre { line-height: inherit; }

/* Boutons : la pastille est sur le lien, le conteneur du bloc reste neutre */
.wp-block-buttons.boutons { display: block; }
.wp-block-button.bouton { display: inline-block; margin-top: 32px; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; }
.wp-block-button.bouton:hover { background: none; }
.wp-block-button.bouton .wp-block-button__link {
  display: inline-block; padding: 6px 16px; border: 1.5px solid var(--creme); border-radius: 999px;
  background: transparent; color: var(--creme); font: inherit; font-size: 15px; line-height: inherit; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.wp-block-button.bouton .wp-block-button__link:hover { background: var(--creme); color: var(--bleu); }
.projet-tete .wp-block-button.bouton { margin-top: 0; }

/* Filtres : des paragraphes éditables, que le script transforme en boutons */
p.filtre { line-height: inherit; user-select: none; }
p.filtre:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }
.fiches-aucun { display: none; }
.fiches-aucun.est-visible { display: block; }

/* Médaillon : le texte tournant vient du paragraphe caché ; le script en fait le cercle */
.cercle-mots { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Listes de parcours : la date est en gras natif */
.parcours strong { font-weight: 700; }
ul.wp-block-list.parcours { margin-top: 32px; padding: 0; list-style: none; }
ul.wp-block-list.parcours.fiche-infos { margin-top: 0; margin-bottom: 32px; }
ul.wp-block-list.parcours.fiche-infos:has(+ .lieu) { margin-bottom: 0; }

/* Parcours complet (À propos) : une ligne de groupes, mêmes mesures que les lignes de la maquette */
.parcours--complet .parcours-ligne {
  display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid rgba(246, 238, 223, .55);
}
.parcours--complet .parcours-ligne:first-child { padding-top: 0; }
.parcours--complet .parcours-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.parcours--complet p.parcours-date { font-size: inherit; line-height: inherit; font-weight: 700; }
.parcours--complet h3.wp-block-heading { font-family: inherit; }

/* En-tête */
.entete-nom a { color: inherit; }
.wp-block-navigation.entete-nav { display: flex; }
.wp-block-navigation.entete-nav .wp-block-navigation__container { display: flex; flex-wrap: nowrap; gap: 8px; }
.wp-block-navigation.entete-nav .wp-block-navigation-item__content {
  display: block; padding: 7px 16px; border-radius: 999px; color: inherit; font-size: clamp(16px, 1.35vw, 19px);
  transition: background-color .15s;
}
.wp-block-navigation.entete-nav .wp-block-navigation-item__content:hover,
.wp-block-navigation.entete-nav .wp-block-navigation-item__content[aria-current="page"] { background: var(--creme); color: var(--bleu); }

/* Projet précédent et suivant : deux lignes éditables, le lien du titre couvre l'ensemble */
.projet-suite-lien { position: relative; }
.projet-suite-lien:last-child { text-align: right; }
.projet-suite-lien .petites-caps { margin-bottom: 8px; font-family: var(--texte); }
.projet-suite-titre { font-family: var(--titre); font-weight: 500; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.05; }
.projet-suite-titre a::after { content: ""; position: absolute; inset: 0; }
.projet-suite-lien:hover .projet-suite-titre a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* Pied de page : les coordonnées sont des paragraphes, le lien garde sa largeur */
.pied-contact a, .pied-liens a { width: fit-content; }
.pied-mail a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* Citation du mémoire : le bloc Citation porte .extrait */
.wp-block-quote.extrait { padding: 0; border: 0; box-sizing: border-box; text-align: center; }
.wp-block-quote.extrait p { text-wrap: balance; }
.wp-block-quote.extrait cite { display: block; margin-top: 1em; font-family: var(--texte); font-size: 15px; font-style: normal; line-height: 1.4; }

/* Page 404, page Newsletter et archives : le minimum */
.texte-simple { min-height: 60vh; }
.texte-simple .wp-block-query a { color: inherit; }
.texte-simple .tnp, .texte-simple p { max-width: 62ch; margin-inline: auto; text-align: center; }

/* Barre d'administration : le menu fixe passe dessous */
body.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { body.admin-bar .entete { top: 46px; } }

@media (max-width: 560px) {
  .wp-block-navigation.entete-nav .wp-block-navigation-item__content { padding: 6px 9px; font-size: 14px; }
  .parcours--complet .parcours-ligne { grid-template-columns: 1fr; gap: 2px; }
}