@import url('styles/boots-bones.css');
/*
Theme Name: Naked Wordpress
Theme URI: http://bckmn.com/naked-wordpress
Author: J Beckman
Author URI: http://bckmn.com
Description: A super bare theme for designers who don't know Wordpress PHP but want to build with Wordpress.
Version: 1.0
License: GNU General Public License

-------------------------------------------------------------- */
/* Reset
-------------------------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font: inherit;
  font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
  /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */

  -webkit-text-size-adjust: 100%;
  /* Prevents iOS text size adjust after orientation change, without disabling user zoom */

  -ms-text-size-adjust: 100%;
  /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */

}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
code,
kbd,
tt,
var {
  font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}
mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}
sup,
sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}
small {
  font-size: 75%;
}
big {
  font-size: 125%;
}
figure {
  margin: 0;
}
table {
  margin: 0 0 1.5em;
  width: 100%;
}
th {
  font-weight: bold;
}
button,
input,
select,
textarea {
  font-size: 100%;
  /* Corrects font size not being inherited in all browsers */

  margin: 0;
  /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */

  vertical-align: baseline;
  vertical-align: middle;
  /* Improves appearance and consistency in all browsers */

}
button,
input {
  line-height: normal;
  /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */

  overflow: visible;
  /* Corrects inner spacing displayed oddly in IE6/7 */

}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: none;
  border-radius: 10px;
  background: #ccc;
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  /* Improves usability and consistency of cursor style between image-type 'input' and others */

  -webkit-appearance: button;
  /* Corrects inability to style clickable 'input' types in iOS */

  font-size: 12px;
  font-size: 1.4rem;
  line-height: 1;
  padding: 1.12em 1.5em 1em;
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5);
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5);
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* Addresses box sizing set to content-box in IE8/9 */

  padding: 0;
  /* Addresses excess padding in IE8/9 */

}
input[type="search"] {
  -webkit-appearance: textfield;
  /* Addresses appearance set to searchfield in S5, Chrome */

  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */

  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
  /* Corrects inner padding displayed oddly in S5, Chrome on OSX */

  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */

  border: 0;
  padding: 0;
}
input[type=text],
input[type=email],
textarea {
  color: #888888;
  border: 1px solid #dddddd;
  border-radius: 5px;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  color: #101010;
}
input[type=text],
input[type=email] {
  padding: 3px;
}
textarea {
  overflow: auto;
  /* Removes default vertical scrollbar in IE6/7/8/9 */

  padding: 10px;
  vertical-align: top;
  /* Improves readability and alignment in all browsers */

  width: 98%;
}
/* styles
-------------------------------------------------------------- */
/* Typographie unique pour tout le site : Helvetica, 15px. Le style
   détaillé (couleurs, tailles différenciées, espacements précis...)
   sera affiné dans un second temps, une fois la structure validée. */
body,
button,
input,
select,
textarea {
  padding: 0;
  margin: 0;
  background: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.2;
}
/* Décale tout le contenu de 40px en haut, pour qu'il ne passe pas sous le
   bandeau du haut (position fixed, 40px de haut, voir .site-header-inner). */
body {
  padding-top: 40px;
}
/* typography
-------------------------------------------------------------- */
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  margin: 0;
  padding: 0;
}
/* Hiérarchie des titres utilisables dans le texte (blocs "Titre" de
   l'éditeur, niveaux H1/H2/H3) — sans toucher au titre du projet lui-même
   (.title), qui garde son style spécifique bien plus grand (voir plus
   bas, .projet-single .title). */
h1 {
  font-size: 24px;
	font-family: 'Playfair Display', serif; /* demande explicite : toute la typo du site en Playfair Display, à la place de "PP Eiko" à l'origine, puis "Instrument Serif" — voir naked_scripts() dans functions.php pour le chargement de la police. Ce h1 générique est aussi celui qui habille le "vrai titre Chapeau" d'une fiche projet/page Mission (.projet-zone-chapeau h1, .projet-grille-chapeau h1), qui n'a pas de règle dédiée pour sa police — sa lettrine (première lettre) repasse en 400/regular via la règle ::first-letter dédiée, voir plus bas. */
  font-weight: 500; /* medium, demande explicite pour tous les titres */
  line-height: 1.1;
  margin: 0 0 1em;
}
h2 {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.25;
  margin: 18px 10px 0.3em 10px;
	
	
}
h3 {
  font-size: 15px;
  font-weight: normal;
  font-family: Helvetica, Arial, sans-serif;
	text-decoration: underline;
  line-height: 1.2;
  margin: 1em 0 0.3em;
}
hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin: 0;
  padding: 0;
}
/* Text elements */
p {
  margin: 0;
  padding: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style-position: inside; /* sans ça, avec padding à 0, le point/numéro se retrouve hors de la boîte de texte (et déborde de la colonne) */
}
ul {
list-style-type: decimal;
  list-style-position: inside;
}
ol {
  list-style: decimal;
  list-style-position: inside;
}
ul ul,
ol ol,
ul ol,
ol ul {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin: 0;
  padding: 0;
}
b,
strong {
  font-weight: bold;
}
dfn,
cite,
em,
i {
  font-style: italic;
}
blockquote {
  margin: 0;
  padding: 0;
}
address {
  margin: 0;
  padding: 0;
}
pre {
  background: #eee;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  margin: 0;
  padding: 0;
  overflow: auto;
  max-width: 100%;
  box-shadow: 0 3px 5px #ddd inset;
}
/* Links */
a {
  color: #000;
  -webkit-transition: color 0.25s ease-in-out;
  -moz-transition: color 0.25s ease-in-out;
  -o-transition: color 0.25s ease-in-out;
  -ms-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;
  text-decoration: none;
}
a:hover,
a:focus,
a:active {
  color: #000;
}
/* Alignment */
.alignleft {
  display: inline;
  float: left;
  margin: 0;
}
.alignright {
  display: inline;
  float: right;
  margin: 0;
}
.aligncenter {
  clear: both;
  display: block;
  margin: 0;
}
.center {
  text-align: center;
}
/* Header
-------------------------------------------------------------- */
.site-title a{
  text-align: center;
}
.site-title a:hover{
}
.site-description{
  font-style: italic;
}
header {
	margin-right: 10px;
    margin-left: 10px;
    padding: 10px 10px 0 10px;
    max-width: 100%;
  background: transparent;
}
header .gravatar {
  overflow: hidden;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin: 0;
  float: right;
}
header #brand {
  margin: 0;
  padding: 0;
}
header #brand h1 {
display: inline-block;
  max-width: 100%;
  color: inherit;
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif; /* le titre du site — demande explicite : tous les titres du site en Playfair Display */
  font-weight: 500; /* medium, demande explicite pour tous les titres */
  font-size: 24px; /* même taille que les titres du menu (.primary-menu) */
  line-height: 24px;
  margin-right: 0.3em; /* petit espace entre 2 titres, pour qu'ils ne se touchent pas — valeur provisoire */
  overflow-wrap: break-word; /* autorise un titre trop long à couper au milieu d'un mot */
  word-break: break-word;
  hyphens: auto; /* coupure avec un tiret, si la langue de la page est bien réglée sur le français */
	color: #565656;
  margin: 0;
  padding: 0;
}
header #brand h1 a {
  color: #000000;
  text-decoration: none;
}
header #brand h1 span {
  font-weight: 200;
  color: #000000;
  text-transform: lowercase;
}

/* Logo "journal" de l'en-tête, sur les pages à en-tête façon journal (voir
   header.php et Apparence → Personnaliser → "Page Headline"). Centré dans
   l'en-tête, voir la mise en page complète de l'en-tête de cette page plus
   bas (section "#Page Headline"). Hauteur fixe à 90px (réduite depuis
   140px, largeur automatique — le logo garde ses proportions d'origine). */
.site-title-headline {
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-title-headline img {
  display: block;
  height: 90px;
  width: auto;
}

/* 2 versions du logo dans le HTML (voir header.php) : la grande par
   défaut, la petite (.logo-headline-mobile, thejulyreviewsmall.png par
   défaut) réservée au mobile — basculement au même point de rupture que
   le reste du site (600px, voir plus bas).
   ".site-title-headline .logo-headline-mobile" plutôt que
   ".logo-headline-mobile" seul : il faut au moins la même spécificité que
   ".site-title-headline img" ci-dessus (qui met déjà "display: block" sur
   les 2 logos) pour pouvoir le repasser à "none" ici — sans ça, les 2
   logos restaient affichés côte à côte, la règle plus spécifique
   l'emportant malgré l'ordre dans le fichier. */
.site-title-headline .logo-headline-mobile {
  display: none;
}

header nav {
}
/* Mise en page du header : marque à gauche, navigation à droite.
   Le titre du site (#brand) et le menu (nav) sont tous les deux à
   l'intérieur de ce conteneur, qui est maintenant le bandeau flottant du
   haut : fixe, pleine largeur, 350px de haut. */
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 20px 0 20px;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 100;
}
.site-header-inner #brand {
  margin: 0;
  padding: 0;
}
.site-header-inner .primary-menu {
display: inline-block;
  color: inherit;
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif; /* même typo que le titre du site */
  font-weight: normal; /* le menu n'est pas un "titre" (voir la demande : medium 500 pour les titres, regular 400 pour les lettrines) — laissé en 400/regular comme avant */
  font-size: 24px; /* même taille que le titre du site */
  line-height: 24px;
  margin-right: 0.3em; /* petit espace entre 2 titres, pour qu'ils ne se touchent pas — valeur provisoire */
	color: #000000;
  margin: 0;
  padding: 0;
  margin-left: 20px; /* décale le menu vers la droite, pour qu'il ne touche pas le nom du site */
}
.site-header-inner .primary-menu li {
  display: inline-block; /* les noms du menu restent côte à côte, sur la même ligne que le titre */
  margin: 0 20px 0 0;
  padding: 0;
  float: none;
}
.menu-main-nav-container, .menu-main-container {
  float: right;
}
header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
header nav ul li {
  float: left;
  margin: 0;
  padding: 0;
}
header nav ul li a {
  color: #000;
}

/* La page Mission affichait seul le nom du site en haut, menu masqué —
   elle a maintenant le même en-tête complet (logo, date, menu) que le
   reste du site à en-tête "journal" (voir plus bas, "#Page Headline /
   fiche projet / archive des projets / Mission & Contact"), donc plus
   besoin de masquer la navigation ici. */
/* Posts/Articles
-------------------------------------------------------------- */
article {
  background: transparent;
  padding: 0;
  margin: 0;
}
article .title {
  color: #404040;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.1em;
  margin: 0;
  padding: 0;
}
article .title a {
  text-decoration: none;
  color: #000;
}
article .title a:hover {
  color: #000;
}
article .post-meta {
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
}
article .post-meta a {
  color: #000;
  text-decoration: none;
}
article .post-meta a:hover {
  color: #000;
}
article .the-content a {
  font-weight: 900;
  text-decoration: none;
}
article .the-content p {
  color: #000000;
  text-align: justify;
  margin: 0;
  padding: 0;
}
article .the-content img {
  width: 100%;
  height: auto;
}
article .meta {
  text-transform: uppercase;
  letter-spacing: .9px;
}
article .meta div {
  margin: 0;
  padding: 0;
}
article .meta .post-categories {
  list-style: none;
  margin: 0;
  padding: 0;
}
article .meta .post-categories li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
/* Page loop styling */
.page article {
  border-bottom: none;
}
.page article .title {
  margin: 0;
  padding: 0;
}
/* Pagination */
#pagination {
  margin: 0;
  padding: 0;
  width: 100%;
}
#pagination .past-page {
  float: right;
  width: 49%;
  text-align: right;
}
#pagination .next-page {
  float: left;
  width: 50%;
  border-right: 1px solid #ccc;
  height: 200px;
}
.next-page a, .past-page a {
  font-weight: 400;
  font-style: italic;
  padding: 0;
  margin: 0;
}
/* Comments */
h3#comments {
  margin: 0;
  padding: 0;
}
.commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.commentlist .comment {
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.commentlist .comment .children {
  margin: 0;
  padding: 0;
}
.commentlist .comment-author {
  float: left;
  margin: 0;
  padding: 0;
}
.commentlist .comment-author img {
  position: absolute;
  left: -50px;
  top: 5px;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.commentlist .comment-author .says {
  display: none;
}
.comment-meta {
  margin: 0;
  padding: 0;
}
.comment-subscription-form,
.comment-subscription-form {
  margin: 0;
  padding: 0;
}
#respond {
  margin: 0;
  padding: 0;
}
#respond > h3 {
  margin: 0;
  padding: 0;
}
#respond form label {
  color: #888888;
}
footer {
	margin-right: 10px;
    margin-left: 10px;
    padding: 0px 10px 10px 10px;
    max-width: 100%;
  background: transparent;
	  display: inline-block;
  max-width: 100%;
  color: inherit;
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif;
  font-weight: normal;  font-size: 90pt;
  line-height: 90pt;
margin-right: 0.3em; /* petit espace entre 2 titres, pour qu'ils ne se touchent pas — valeur provisoire */
  overflow-wrap: break-word; /* autorise un titre trop long à couper au milieu d'un mot */
  word-break: break-word;
  hyphens: auto; /* coupure avec un tiret, si la langue de la page est bien réglée sur le français */

}
/* Misc & mixens
-------------------------------------------------------------- */
.site-footer{
}
/* Footer des fiches projet uniquement (demande explicite du 07/09/2026 :
   "rajoute en bas de chaque page projet, un footer. de 50px de haut,
   blanc, avec en bas au centre, avec la typo courante, le meme menu que
   en haut (archives, a la une, Mission et contact)") — voir footer.php
   pour le HTML (is_singular('projet')), qui réutilise tel quel le <ul
   class="primary-menu"> du menu du haut (header.php) : pas de nouvelle
   classe de liens à styler, la fiche projet a déjà "body.single-projet"
   qui donne à ".primary-menu" sa "typo courante" (Archivo, majuscules,
   lettres espacées — voir plus bas "body.page-template-page-home-headline
   .primary-menu, [...] body.single-projet .primary-menu, [...]"), centrée
   par ce même bloc de règles. Ici, on ne fait que placer ce menu dans une
   bande blanche de 50px en bas de la page (pas fixe/collée à l'écran,
   contrairement au bandeau défilant de l'accueil : un vrai footer de fin
   de page), et le centrer aussi verticalement dans cette bande. */
.site-footer-projet {
  background: #fff;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hide-text {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.clear {
  clear: both;
}
/* clear floats */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
  display: inline-block;
}
html[xmlns] .clearfix {
  display: block;
}
* html .clearfix {
  height: 1%;
}

/* #Fil d'ariane (breadcrumb), affiché dans le footer par naked_breadcrumb()
================================================== */
.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li {
  display: inline;
  margin: 0;
  padding: 0;
}
.breadcrumb li + li:before {
  content: " > ";
}
.breadcrumb a {
  color: #000;
}
.breadcrumb .breadcrumb-current {
  color: inherit;
}

/* Le fil d'ariane ne s'affiche pas du tout sur l'accueil, la fiche
   projet, ni la page Mission — décidé en PHP (voir footer.php), pas ici
   en CSS, pour qu'il ne soit jamais présent sur ces pages (pas juste
   masqué visuellement). */

/* Sur la page d'archive des projets (/projets/) : le fil d'ariane, en
   bas de page, devient un bandeau flottant identique à celui du tri par
   catégorie sur la page d'accueil (voir .projets-filtres). */
body.post-type-archive-projet .breadcrumb {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: left;
  justify-content: left;
  z-index: 100;
  background: none;
  font-family: 'Playfair Display', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  font-size: 24px;
  line-height: 24px;
	padding-left: 20px;
}

/* #Media Queries
================================================== */
/* Une seule taille de police (15px, Helvetica) sur tous les écrans pour
   l'instant : pas de variations responsives de typographie tant que la
   structure n'est pas validée. Cette section ne garde donc plus que les
   ajustements qui ne concernent pas le texte. */

/* #Projets (custom post type)
================================================== */

.projet-card-types {
  margin: 0;
  padding: 0;
}

/* Sur la fiche projet, les catégories passent après le titre : petit
   espace au-dessus pour les séparer, alignées à gauche (comportement par
   défaut d'un bloc, pas de centrage à annuler ici). */
.projet-single .projet-card-types {
  margin: 10px 0 0;
  padding: 0;
  text-align: left;
}

/* Demande explicite du 07/09/2026 : « rajoutes un margin bottom 5px a
   cette class : projet-type-badge ». Seule la 3ème valeur du raccourci
   "margin" (haut / droite / bas / gauche) change, de 0 à 5px : quand
   plusieurs badges de catégories passent à la ligne (plusieurs catégories,
   écran étroit), un espace vertical sépare désormais 2 lignes de badges
   au lieu qu'ils se touchent. */
.projet-type-badge {
  display: inline-block;
  letter-spacing: 0.05em;
  padding: 0 3px 0 3px;
  margin: 0 2px 5px 0;
  border: 1px solid currentColor;
  opacity: 1;
	text-transform: uppercase;
}

/* Lien "Modifier ce projet", sur la fiche projet — n'apparaît dans le HTML
   que si July est connectée (voir single-projet.php, is_user_logged_in()
   + get_edit_post_link()) : ce style n'a donc jamais besoin de se soucier
   des visiteurs. Même traitement typographique que .headline-en-savoir-plus
   (majuscules, espacement des lettres, soulignement) pour rester cohérent
   avec les autres petits liens du site, avec un peu d'espace au-dessus des
   badges de catégorie qui le précèdent. */
.projet-lien-modifier {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #000;
}

.projet-single .title {
  margin: 0;
  padding: 0;
  color: #000; /* même couleur que les titres de l'accueil, au lieu du gris de "article .title" */
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif; /* demande explicite : tous les titres du site en Playfair Display */
  font-weight: 500; /* medium, demande explicite pour tous les titres */
  /* 40pt (contre 70pt avant) — demande explicite ("baisse la taille de la
     typo du titre"), modèle "3SEPT". */
  font-size: 40pt;
  /* Plus grand que la taille du texte (au lieu d'être strictement égal) :
     les polices à empattements comme celle-ci ont des hampes/jambages qui
     dépassent la boîte de ligne standard à cette taille. Avec une hauteur
     de ligne trop juste, le haut des lettres se faisait couper net par
     .projet-detail (le conteneur défilant du dessus, voir plus bas — il
     masque tout ce qui dépasse sa propre boîte). */
  line-height: 1.2;
  text-align: left; /* annule le centrage de "article .title" */
  letter-spacing: normal; /* annule l'espacement de "article .title" */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Le bandeau du bas (fil d'ariane, voir plus haut) est fixe : on laisse
   40px de marge en bas de page pour que la dernière rangée de la grille
   ne passe pas dessous. */
body.post-type-archive-projet {
  padding-bottom: 40px;
}

/* Page d'archive des projets (/projets/) : présentation en piles — chaque
   projet publié est représenté par la même image de journal plié (voir
   archive-projet.php, images/journaux/journalplie-01.svg), avec son titre
   et un bout de sa photo mise en avant imprimés dessus (voir
   .projet-masonry-une plus bas) plutôt que sa propre photo en entier.
   Remplace l'ancienne grille fixe façon masonry (6 colonnes, 3 journaux
   par ligne) — demande explicite ("j'aimerais que les projets soit
   empilés comme ça").

   3 piles (colonnes) côte à côte, réparties en PHP (voir
   $naked_pile_colonnes dans archive-projet.php, même répartition en blocs
   contigus que l'ancienne grille, pour ne pas bouleverser l'ordre déjà en
   place). "display: flex" plutôt que "grid" : plus besoin de connaître de
   nombre de colonnes/rangées à l'avance, chaque pile est juste une boîte
   qui prend un tiers de la largeur — l'empilement à l'intérieur de
   chacune (voir .naked-pile-colonne plus bas) se fait par positionnement,
   pas par la grille. */
.projets-masonry {
  display: flex;
  align-items: flex-start;
  /* Journaux plus petits et plus d'espace entre les piles — demande
     explicite, approuvée sur aperçu avant/après ("marge" plus grande de
     chaque côté, donc chaque pile plus étroite ; "gap" agrandi entre les
     piles). Avant : gap 8px, marge 0 8%. */
  gap: 48px;
  margin: 0 16%;
  padding: 0;
}

/* Une pile : le 1er journal (voir .projet-masonry-item ci-dessous) reste
   dans le flux normal et donne sa hauteur à la pile ; les suivants (voir
   .naked-pile-empilee plus bas) sont posés par-dessus lui en
   "position: absolute", chacun un peu plus bas que le précédent, de sorte
   que seule une fine tranche de chacun dépasse en dessous du groupe posé
   au-dessus — demande explicite ("seul le premier pleinement visible, les
   autres en tranches en dessous"). "padding-bottom" réserve la place
   nécessaire pour que ces tranches ne débordent pas de la pile : la
   hauteur d'une tranche (--naked-pile-tranche, responsive comme la taille
   du texte plus bas dans ce fichier — voir .projet-masonry-titre)
   multipliée par le nombre de journaux "en trop" (--naked-pile-rangees,
   posé en style inline par PHP). "overflow: visible" (valeur par défaut,
   précisé pour la clarté) : le petit décalage aléatoire gauche/droite de
   chaque journal (voir .projet-masonry-item, "left" en style inline) peut
   légèrement déborder de la pile sans être coupé. */
.naked-pile-colonne {
  position: relative;
  flex: 1 1 0;
  overflow: visible;
  --naked-pile-tranche: clamp(50px, 6vw, 90px);
  padding-bottom: calc(var(--naked-pile-rangees, 0) * var(--naked-pile-tranche));
  z-index: 1; /* établit son propre contexte d'empilement, pour le survol ci-dessous */
}

/* Au survol d'une tranche (n'importe laquelle, voir js/pile-projets-preview.js),
   ce sont les journaux AU-DESSUS du journal survolé qui remontent, ensemble,
   pour se dégager — le journal survolé lui-même NE BOUGE PAS — demande
   explicite, confirmée par 3 exemples fournis (survol de "St Germain",
   "Ravensburger" et "My Little Paris") après un 1er essai dans l'autre sens
   ("c'est pas encore ça mais c'est mieux [...] je veux que les journaux qui
   sont au dessus de celui survolé se déplacent vers le haut [...] le journal
   survolé ne bouge pas").

   "z-index" plus élevé que celui de l'en-tête (100, voir .site-header-inner
   plus haut dans ce fichier) — demande explicite ("les piles soit au
   dessus du menu quand ils se déplacent") : les journaux qui remontent
   peuvent, pour les piles commençant juste sous l'en-tête, passer par-dessus
   lui — sans ce z-index, ils passeraient DERRIÈRE l'en-tête au lieu de
   par-dessus, puisque celui-ci a son propre z-index élevé. Valeur choisie en
   dessous de celle de "Vrac de journaux" (200, tout en haut de l'écran en
   permanence) pour ne jamais rivaliser avec elle, mais largement au-dessus
   de l'en-tête. */
.naked-pile-colonne.naked-pile-en-survol {
  z-index: 150;
}

/* Chaque journal d'une pile — "left" (petit décalage aléatoire) et
   "z-index" (les premiers de la pile recouvrent les suivants) sont posés
   en style inline par PHP (voir archive-projet.php), différents pour
   chaque journal. "transition" ici : que ce journal soit le 1er de la pile
   (jamais empilé, voir plus bas) ou l'un des suivants, n'importe lequel
   peut être amené à remonter au survol d'un journal posé plus bas dans la
   même pile (voir js/pile-projets-preview.js) — la transition doit donc
   s'appliquer à tous, pas seulement aux journaux empilés. */
.projet-masonry-item {
  display: block;
  position: relative; /* le 1er de chaque pile : reste dans le flux normal, donne sa hauteur à .naked-pile-colonne */
  /* Ombre portée sous chaque journal — demande explicite ("drop-shadow",
     pas très diffuse mais plutôt assez sombre) : "filter: drop-shadow()"
     plutôt que "box-shadow" — remplace l'ancien box-shadow (plus léger,
     plus diffus). Petit flou (3px, contre 14px avant) et forte opacité
     (0.55, contre 0.18 avant) pour une ombre nette et sombre plutôt que
     douce. */
  filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.55));
  transition: transform 0.35s ease, filter 0.35s ease;
}

/* Le journal survolé lui-même (voir js/pile-projets-preview.js) — demande
   explicite : il se décale un peu vers le haut ET grossit de 10%, en plus
   du dégagement des journaux au-dessus de lui (inchangé, voir plus haut).
   "transform-origin: bottom" : le bas du journal reste à peu près à sa
   place, il grossit surtout vers le HAUT (cohérent avec le petit
   déplacement vers le haut posé juste à côté) plutôt que de déborder aussi
   vers le bas, par-dessus le journal suivant. "translateY(-5%)" en
   pourcentage plutôt qu'en pixels : se rapporte à la propre hauteur du
   journal (comportement standard de "transform"), donc reste proportionné
   à n'importe quelle taille d'écran sans mesure JavaScript. */
.naked-pile-en-vedette {
  transform: translateY(-5%) scale(1.1);
  transform-origin: bottom center;
}

/* L'ombre (voir "filter" sur .projet-masonry-item plus haut) du journal
   juste au-dessus de celui qu'on survole — demande explicite ("l'ombre qui
   est sous le journal qui est juste au-dessus de celui qu'on survole,
   disparaisse au moment où les journaux montent") : posée par
   js/pile-projets-preview.js uniquement sur CE journal-là (pas tout le bloc
   qui remonte). "filter: none" plutôt que retirer la valeur : la transition
   posée juste au-dessus (sur .projet-masonry-item) anime aussi "filter",
   donc l'ombre s'estompe pendant que le journal remonte, plutôt que de
   disparaître d'un coup. */
.naked-pile-ombre-cachee {
  filter: none;
}

/* Les journaux à partir du 2ᵉ de chaque pile (voir "naked-pile-empilee"
   posée conditionnellement dans archive-projet.php) : sortis du flux
   normal, empilés par-dessus le 1er journal (leur ancêtre positionné le
   plus proche, voir .naked-pile-colonne) à une hauteur croissante avec
   leur rang dans la pile (--naked-pile-rangee, posé en style inline par
   PHP) — la hauteur d'une "tranche" (--naked-pile-tranche, voir
   .naked-pile-colonne) fois ce rang. "top" ici est une LONGUEUR (pas un
   pourcentage), donc sans ambiguïté sur l'axe de référence : elle se
   mesure toujours depuis le haut de .naked-pile-colonne, quelle que soit
   sa hauteur. */
.naked-pile-empilee {
  position: absolute;
  top: calc(var(--naked-pile-rangee, 0) * var(--naked-pile-tranche));
  left: 0;
  width: 100%;
}

.projet-masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Le titre du projet, un bout de sa photo mise en avant et des lignes
   muettes (aucun vrai texte, juste des barres) imprimés directement sur la
   une du journal, par-dessus l'image du journal plié
   (images/journaux/journalplie-01.svg) — demande explicite, sur le modèle
   d'un exemple fourni : le titre en haut à gauche (.projet-masonry-titre),
   puis en dessous une rangée (.projet-masonry-bas) avec les lignes
   muettes à gauche (.projet-masonry-colonnes) et un bout de la photo du
   projet à droite si elle existe (.projet-masonry-photo). "inset" en
   pourcentage plutôt qu'en pixels : chaque case peut avoir une taille
   réelle légèrement différente selon la grille, des pourcentages restent
   proportionnés. Marge droite plus petite que les autres (10% contre 8%)
   : le pli du journal (partie ombrée avant le bord de l'image) commence
   vers 90-95% de la largeur de l'image, cette marge l'évite tout en
   restant proche du bord. Marge du HAUT nettement plus grande (28% + 15px
   de plus, demande explicite — corrigé depuis 8%) : contrairement à
   l'ancienne image (journalplie.png, vierge), journalplie-01.svg a déjà
   "The July Review" imprimé en haut — bug constaté sur le site en ligne :
   le titre du projet, posé trop haut, se superposait illisiblement à ce
   bandeau (le bandeau occupe environ les 24 premiers % de la hauteur de
   l'image, mesuré directement dans le fichier SVG) ; 28% laissait déjà une
   marge de sécurité sous ce bandeau, encore reculée de 15px (calc()) —
   demande explicite ("descends le contenu du journal de 15px vers le
   bas"). Marge du BAS réduite à 1% (était 8%, puis 3% — demande explicite
   à chaque fois, "le contenu doit aller jusqu'en bas de l'image", encore
   descendu ensuite) : .projet-masonry-bas (flex: 1 1 auto, voir plus bas)
   s'étire déjà automatiquement pour remplir tout l'espace vertical
   disponible sous le titre, donc réduire cette marge suffit à faire
   descendre les lignes/la photo jusqu'en bas, sans avoir besoin d'ajouter
   d'autres éléments. "pointer-events: none" : ce bloc ne doit jamais
   intercepter le clic, qui doit continuer d'aller vers le lien de la
   fiche projet (.projet-masonry-item). */
.projet-masonry-une {
  position: absolute;
  inset: calc(28% + 15px) 10% 1% 8%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.projet-masonry-titre {
  margin: 0 0 6%;
  padding: 0;
  color: #1a1613;
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif; /* demande explicite : tous les titres du site en Playfair Display */
  font-weight: 500; /* medium, jamais de vrai gras — demande explicite pour tous les titres, même ceux qui imitent un gros titre de journal */
  font-size: clamp(16px, 2.6vw, 32px); /* remontée un peu (était clamp(14px, 2.2vw, 28px), avant ça clamp(18px, 3vw, 40px)) — demande explicite ("augmenter un peu la taille de la typo") */
  line-height: 1.05;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Rangée du bas : les lignes muettes à gauche, la photo (si elle existe)
   à droite — voir le commentaire de .projet-masonry-une plus haut. */
.projet-masonry-bas {
  flex: 1 1 auto;
  display: flex;
  gap: 5%;
  min-height: 0;
}

/* Les lignes muettes : occupent environ un tiers de la largeur de la
   rangée du bas quand la photo est là à côté — mais toute la largeur
   quand un projet n'a pas de photo mise en avant (":only-child" plus
   bas), pour ne pas laisser un vide à la place de la photo absente. */
.projet-masonry-colonnes {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  gap: 10%;
  min-height: 0;
}

.projet-masonry-bas > .projet-masonry-colonnes:only-child {
  flex: 1 1 auto;
}

.projet-masonry-colonne {
  flex: 1 1 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(26, 22, 19, 0.55) 0,
    rgba(26, 22, 19, 0.55) 2px,
    transparent 2px,
    transparent 16%
  );
}

/* Un bout de l'image mise en avant du projet, comme si elle dépassait du
   pli du journal — demande explicite ("Un bout de l'image clef"). Prend
   tout l'espace restant de la rangée du bas, à droite des lignes muettes.
   "overflow: hidden" + l'image en "height: 100%; object-fit: cover" :
   cadre toujours proprement cet espace quelles que soient les proportions
   de la photo mise en avant du projet. */
.projet-masonry-photo {
  flex: 1 1 auto;
  overflow: hidden;
}

.projet-masonry-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* #Page Pile de journaux : autre façon de parcourir les projets (voir
   page-pile-journaux.php) — une image de pile de journaux vue de côté
   (https://julyloubeyre.fr/pilejournaux.png, référencée directement par son
   adresse, comme les logos du header), centrée sur la page. Son espace
   est divisé en autant de bandes horizontales invisibles qu'il y a de
   projets publiés : .pile-journaux-bandes est superposée pile sur l'image
   ("position: absolute; inset: 0", .pile-journaux-zone sert de repère en
   "position: relative"), et chaque bande a "flex: 1 1 0" à l'intérieur
   d'un conteneur "display: flex; flex-direction: column" — ça les répartit
   automatiquement en hauteurs égales quel que soit leur nombre, sans
   aucun calcul en PHP ou en JS. Chaque bande est juste un lien simple
   vers la fiche du projet correspondant — l'ancien effet de titre au
   survol (qui réutilisait le mécanisme de la page d'archive) a été retiré
   partout, demande explicite : ces bandes n'ont donc plus d'effet visuel
   au survol du tout, seulement le curseur qui change (lien cliquable). */
.pile-journaux-page {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}

.pile-journaux-zone {
  position: relative;
  width: 100%;
  max-width: 420px; /* l'image est haute et étroite (705×1449) */
}

.pile-journaux-image {
  display: block;
  width: 100%;
  height: auto;
}

.pile-journaux-bandes {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.pile-journaux-bande {
  display: block;
  flex: 1 1 0;
}

/* En-tête fixe, uniquement sur cette page (contrairement aux 6 autres
   gabarits "journal", voir .site-header-inner plus haut, qui scrolle
   normalement avec la page) : "position: fixed" plutôt que le "relative"
   hérité de la règle partagée.

   "top: 10px" et non "0", "left: 20px" et "width: calc(100% - 40px)" et
   non "left: 0" / "width: 100%" : il fallait 10px de plus pour retomber à
   la même hauteur que sur la page d'accueil (et les autres gabarits
   "journal") — trouvé en inspectant les 2 pages : le vrai <header>
   (#masthead, qui enveloppe .site-header-inner) a du padding hérité d'une
   règle générique tout en haut de ce fichier ("header { margin: 10px
   10px 0 10px; ... }", 10px en haut et sur les 2 côtés). En position
   relative (page d'accueil), .site-header-inner en profite normalement,
   décalé de 10px en haut et 20px sur les côtés (10px de margin + 10px de
   padding empilés) par rapport à #masthead. En position fixed (cette
   page), l'élément sort du flux normal et ignore complètement le
   padding/margin de son parent #masthead — d'où le décalage. Les valeurs
   ci-dessous compensent à la main pour retomber exactement au même
   endroit. "overflow: auto" en plus, au cas où le contenu de l'en-tête
   (logo, date, menu, sur 3 lignes) dépasserait sa hauteur sur un écran
   très bas — une scrollbar apparaîtrait alors à l'intérieur du bandeau
   plutôt que de couper le contenu.

   Sélecteur "body.page-template-page-pile-journaux" répété 2 fois :
   ça ne change rien pour le navigateur (ça désigne toujours le même
   body), mais ça double le nombre de classes comptées dans la
   spécificité CSS (0,3,1 au lieu de 0,2,1). Sans ce doublement, cette
   règle a EXACTEMENT la même spécificité que la règle partagée plus haut
   qui met "position: relative" (même sélecteur à 2 classes) — dans ce
   cas-là, c'est la règle la PLUS BAS dans le fichier qui gagne, peu
   importe l'ordre "logique" des sections. La règle partagée étant plus
   bas dans ce fichier que celle-ci, "position: relative" gagnait
   silencieusement et l'en-tête ne devenait jamais fixe malgré cette
   règle — bug confirmé dans l'inspecteur du navigateur. Le doublement
   force cette règle à gagner quel que soit l'ordre des sections. */
body.page-template-page-pile-journaux.page-template-page-pile-journaux .site-header-inner {
  position: fixed;
  top: 10px;
  left: 20px;
  width: calc(100% - 40px);
  overflow: auto;
  z-index: 100;
}

/* L'image de la pile (et ses bandes de survol) passe DEVANT l'en-tête fixe
   ci-dessus quand on scrolle, plutôt que de rester cachée derrière : un
   z-index plus élevé que celui de l'en-tête (100). Posé sur
   .pile-journaux-zone plutôt que .pile-journaux-page, qui a déjà
   "position: relative" (nécessaire pour qu'un z-index ait un effet). */
.pile-journaux-zone {
  z-index: 200;
}

/* #Page Vrac de journaux : encore une autre façon de parcourir les projets
   (voir page-vrac-journaux.php), à côté de l'archive habituelle
   (archive-projet.php) et de "Pile de journaux" (page-pile-journaux.php) —
   demande explicite : "duplique" la présentation de l'archive (même une de
   journal plié, voir .projet-masonry-une et alentours, réutilisées telles
   quelles ici) mais "disposés de manière aléatoire... sans suivre de
   grille", chacun tourné d'un angle aléatoire entre 0° et 180°, avec une
   ombre portée toujours verticale (3px sous le journal, demande explicite)
   quel que soit cet angle, et occupant 100% de la page, y compris
   par-dessus le header. Position (top/left en %) et rotation sont
   calculées côté PHP avec wp_rand() (voir page-vrac-journaux.php) plutôt
   qu'en CSS/JS : une disposition stable au chargement de la page, sans
   étape de recalcul après affichage — même logique que l'ancien tirage au
   sort d'image de journal (archive-projet.php).

   Rotation et ombre sont posées sur 2 éléments différents plutôt qu'un
   seul — demande explicite ("ombre noire toujours verticale... sous le
   svg", donc indépendante de la rotation) :
   - .vrac-journaux-item (le lien, positionné en absolute) ne tourne
     JAMAIS, et porte l'ombre en "filter: drop-shadow()" plutôt qu'en
     "box-shadow" — "box-shadow" aurait dessiné l'ombre du RECTANGLE de
     cet élément (non tourné), visuellement décalée par rapport au journal
     tourné à l'intérieur ; "filter: drop-shadow()", lui, s'applique à
     l'image déjà tournée de son contenu (un filtre posé sur un ancêtre
     s'applique après les transformations de ses enfants), donc l'ombre
     qu'il projette suit la forme du journal tout en restant verticale à
     l'écran quel que soit son angle de rotation.
   - .vrac-journaux-carte (à l'intérieur de .vrac-journaux-item) porte la
     rotation elle-même (posée en style inline par PHP, voir
     page-vrac-journaux.php) — et sert aussi de repère "position: relative"
     pour .projet-masonry-une (position: absolute) à l'intérieur. */
.vrac-journaux-zone {
  position: fixed; /* couvre toute la fenêtre, immobile même si la page devait défiler — demande explicite : "100% de la page" */
  inset: 0;
  overflow: hidden; /* aucun journal ne doit faire apparaître de barre de défilement en dépassant du bord */
  z-index: 200; /* par-dessus le header (z-index 100, voir .site-header-inner plus haut) — demande explicite */
}

.vrac-journaux-item {
  display: block;
  position: absolute;
  width: clamp(180px, 18vw, 300px); /* même image que la grille (602×416), mais une taille qui s'adapte à la fenêtre plutôt qu'une largeur de case fixée par une grille */
  transform: translate(0, 0) scale(1);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)); /* ombre noire, toujours verticale (3px sous le journal) quelle que soit sa rotation — demande explicite, voir le commentaire de section plus haut */
  transition: transform 0.35s ease, filter 0.35s ease; /* pour l'effet au survol ci-dessous (voir js/vrac-preview.js) */
}

/* Au survol d'un journal (ordinateur uniquement, voir js/vrac-preview.js) :
   il se déplace au centre de la page, reprend une rotation de 0° et
   s'agrandit — demande explicite. Même technique "FLIP" de mesure/
   déplacement en JavaScript qu'ailleurs sur le site (translate + scale
   sur .vrac-journaux-item, qui ne tourne jamais lui-même — voir plus
   haut), MAIS avec en plus la remise à 0° de la rotation : elle se fait
   séparément, en CSS pur, sur .vrac-journaux-carte juste en dessous (pas
   besoin de JavaScript pour ça, contrairement à la position, puisqu'il
   suffit de remplacer l'angle inline posé par PHP par 0deg quand
   l'ancêtre porte cette classe). "z-index" élevé : pendant le
   déplacement, ce journal doit passer AU-DESSUS de tous les autres
   journaux qu'il traverse en chemin vers le centre. L'ombre s'écarte
   aussi du journal (décalage et flou augmentés) — demande explicite
   ("l'ombre doit s'adapter pour être plus éloignée du svg") : un journal
   agrandi au centre de l'écran doit sembler "soulevé" plus haut au-dessus
   de la page. */
.vrac-journaux-item.est-en-survol {
  transform: translate(var(--naked-dx, 0), var(--naked-dy, 0)) scale(1.5);
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.45));
  z-index: 500;
}

.vrac-journaux-carte {
  display: block;
  position: relative; /* repère pour .projet-masonry-une (position: absolute) à l'intérieur */
  transition: transform 0.35s ease; /* pour la remise à 0° au survol, voir .vrac-journaux-item.est-en-survol ci-dessus */
}

/* La rotation (posée en style inline par PHP, voir page-vrac-journaux.php)
   est remplacée par 0° — "!important" nécessaire pour l'emporter sur ce
   style inline (un style inline non-important a normalement priorité sur
   une règle de feuille de style, sauf si celle-ci est elle-même
   "!important"). */
.vrac-journaux-item.est-en-survol .vrac-journaux-carte {
  transform: rotate(0deg) !important;
}

.vrac-journaux-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* #Ancienne police perso "PP Eiko" — retirée du site (demande explicite :
   Playfair Display partout à la place, voir naked_scripts() dans
   functions.php), plus aucune règle de ce fichier ne la référence. Ce
   @font-face est donc supprimé ; les fichiers eux-mêmes (dossier /font/ du
   thème, à côté de ce style.css) restent sur le serveur — pas touchés
   d'ici, à supprimer toi-même si tu veux faire le ménage, mais ils ne sont
   plus chargés ni utilisés par aucune page.
================================================== */

/* #Accueil : liste de titres de projets + aperçu image au survol
================================================== */

.projets-titres-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.projets-titres-item {
  display: inline; /* les titres se suivent sur la même ligne (et reviennent à la ligne automatiquement s'ils manquent de place) */
  max-width: 100%; /* indispensable : sans ça, le float ci-dessous rend "break-word" inopérant, voir remarque plus bas */
  margin: 0;
  padding: 0;
  float: left;
	  max-width: 100%;
  color: #000;
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif; /* demande explicite : tous les titres du site en Playfair Display */
  font-weight: 500;  font-size: 70pt; /* medium, demande explicite pour tous les titres */
  line-height: 70pt;
margin-right: 0.3em;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;

}

.projets-titres-lien {
  display: inline-block;
}

.projets-titres-lien:hover {
}

/* Filtre par type de projet (page d'accueil) : les titres qui ne
   correspondent pas au filtre choisi restent exactement à leur place
   (rien ne bouge dans la mise en page) mais deviennent invisibles et non
   cliquables. */
.projets-titres-item.is-filtered-out {
  visibility: hidden;
  pointer-events: none;
}

/* #Accueil (essai) : variante de mise en page de la même liste de titres
   (voir page-home-alt.php) — une vraie liste verticale ("un titre par
   ligne"), alignée à gauche, en 38px, dans un bloc décalé à 60% de la
   largeur de la page. Le survol/filtre (JS) et le reste de la structure
   sont partagés avec l'accueil actuel : on ne change ici que la mise en
   page de .projets-titres-item/.projets-titres-lien, à l'intérieur de ce
   bloc uniquement — l'accueil actuel n'est pas affecté. */
.accueil-essai {
  margin-left: 60%;
}

.accueil-essai .projets-titres-item {
  display: block; /* un titre par ligne, plutôt que côte à côte façon nuage de mots */
  float: none;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit; /* la taille se règle sur le lien ci-dessous, voir .accueil-essai .projets-titres-lien */
  line-height: inherit;
}

.accueil-essai .projets-titres-lien {
  display: block;
  text-align: left;
  font-size: 38px;
  line-height: 1.3;
}

/* L'image du projet survolé : un seul élément, fixe et centré, dont le
   "src" change en JavaScript (voir js/home-preview.js). Aucune taille
   n'est imposée : chaque image garde ses proportions naturelles ; les
   max-width/max-height ci-dessous ne servent qu'à éviter qu'une image
   ne déborde de la fenêtre pendant qu'on construit la page. */
.projet-preview {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
  margin: 0;
  padding: 0;
  z-index: -10;
  pointer-events: none;
}

.projet-preview.is-visible {
  display: block;
}

/* Filtre par type de projet : bandeau flottant, collé en bas de la fenêtre */
.projets-filtres {
  list-style: none;
  max-width: 100%;
  color: inherit;
  /* Même typo/taille que le bandeau du bas des pages single/archive (voir
     plus haut, .breadcrumb) : Playfair Display, 24px. */
  font-family: 'Playfair Display', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  font-size: 24px;
  line-height: 24px;
  margin-right: 0.3em; /* petit espace entre 2 titres, pour qu'ils ne se touchent pas — valeur provisoire */
  overflow-wrap: break-word; /* autorise un titre trop long à couper au milieu d'un mot */
  word-break: break-word;
  hyphens: auto; /* coupure avec un tiret, si la langue de la page est bien réglée sur le français */
	color: #000;
  margin: 0;
  padding: 0;

  /* Même emplacement que .breadcrumb : bandeau fixe en bas, aligné à
     gauche avec la même marge intérieure (plutôt que centré). Remonté à
     "bottom: 30px" (au lieu de "0") — demande explicite du 07/09/2026,
     « il faut que le bandeau [défilant] soit collé en bas » : c'est
     maintenant .bandeau-defilant (voir plus bas) qui occupe le tout dernier
     bas de l'écran (bottom: 0). Sa hauteur, passée à 40px (3ᵉ ajustement,
     « augmenter la hauteur du bandeau »), puis à 60px (6ᵉ ajustement, même
     demande répétée), .projets-filtres remonte d'autant à chaque fois
     (bottom: 60px désormais) pour continuer à s'empiler juste au-dessus,
     sans jamais le recouvrir. */
  position: fixed;
  bottom: 60px;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: left;
  justify-content: left;
  z-index: 100;
  padding-left: 20px;
}

.projets-filtres li {
  display: inline;
  margin: 0;
  padding: 0;
}

.projets-filtres li + li:before {
  content: " / ";
}

/* #Bandeau défilant (accueil uniquement)
================================================== */
/* Demande explicite du 07/09/2026 : « un bandeau en bas de page de 15px de
   haut avec un texte qui défile », précisée ensuite : uniquement sur
   l'accueil, fixe en bas de l'écran (voir is_front_page() dans
   footer.php). Ajustements du 07/09/2026 (2ᵉ demande, même jour) :
   « collé en bas, avec un liseré 1px noir en haut. Typo taille 17px,
   hauteur du bandeau 30px, je veux que le bandeau fasse la largeur du
   header » — désormais "bottom: 0" (le tout dernier bas de l'écran, plus
   "bottom: 40px" comme avant) ; .projets-filtres (le bandeau de filtre par
   type, juste au-dessus) remonte en conséquence (voir plus haut) pour
   continuer à ne jamais se recouvrir avec celui-ci. Hauteur et typo encore
   augmentées le 07/09/2026 (3ᵉ ajustement) : « augmenter la hauteur du
   bandeau et de la typo et mettre Playfair Display » — 30px -> 40px de
   haut, même hauteur que les autres bandeaus fixes du bas (.breadcrumb,
   .projets-filtres) ; police et taille alignées sur ces mêmes bandeaus
   (voir plus bas, .bandeau-defilant-piste span : Playfair Display, 24px)
   plutôt que Helvetica 17px.
   Alignement horizontal revu une 3ᵉ fois le 07/09/2026 : « le bandeau
   aligné avec .headline-vedette-bloc », puis une 4ᵉ fois le même jour
   (« il faut que le bandeau fasse la largeur de .headline-vedette-bloc »)
   après un bug repéré entre-temps : "width: 100%" + "padding: 0 8%" sur un
   élément en "content-box" (pas de reset "box-sizing: border-box" global
   dans ce thème) donne une boîte de 100% + 16% = 116% de large — le bord
   droit débordait donc largement au-delà de .headline-vedette-bloc.
   Remplacé par "left: 8%; right: 8%;" (sans "width" ni "padding") : la
   largeur se déduit de l'écart entre les 2 bords, exactement comme le
   "margin: 0 8%;" de .headline-vedette-bloc (voir plus bas) — indépendant
   du box-sizing, donc fiable. Reprend aussi son équivalent mobile ("8px",
   voir plus bas dans "@media (max-width: 600px)") pour rester aligné à
   toutes les tailles d'écran. */
.bandeau-defilant {
  position: fixed;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 60px;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #000;
  z-index: 100;
}

/* La piste contient la séquence complète (texte / icône / mail / icône,
   voir footer.php) répétée 10 fois, puis cette même série de 10 une 2ᵉ
   fois (voir "bandeau-defilant-doublon" plus bas) : l'astuce classique du
   "bandeau défilant" en CSS pur (sans JavaScript) consiste à faire
   glisser une piste 2 fois plus longue que son contenu de "0" à "-50%" —
   au moment où la 1ère série sort complètement de l'écran à gauche, la
   2ème série est exactement à sa place de départ : la boucle est donc
   invisible, sans à-coup ni "trou" au moment du redémarrage. "width:
   max-content" empêche la piste de se faire comprimer à la largeur de
   l'écran (elle doit garder sa vraie largeur, même si elle dépasse), et
   "white-space: nowrap" empêche le texte de revenir à la ligne. Durée
   remontée à 240s (au lieu de 80s) — demande explicite du 07/09/2026:
   « le bandeau va beaucoup trop vite !! » : la piste, avec ses 20
   répétitions (2 séries de 10) et leurs "gap" de 60px, est en réalité
   très longue (~20 000px) — 80s donnait une vitesse d'environ 128px/s,
   bien trop rapide pour lire l'adresse mail au passage ; 240s ramène ça à
   une quarantaine de px/s, largement plus confortable. À ajuster ici si
   le texte/l'icône changent sensiblement de longueur/taille (plus la
   piste est longue, plus il faut de temps pour garder la même vitesse de
   défilement). "gap: 60px" espace UNIFORMÉMENT
   chaque élément de la séquence (texte, icône, mail, icône, texte
   suivant...) — demande explicite du 07/09/2026 : « "texte" espace long
   "logo" espace long "mail" espace long "logo" espace long » — un seul
   réglage plutôt qu'une marge posée à la main sur chaque élément. */
.bandeau-defilant-piste {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  gap: 60px;
  white-space: nowrap;
  animation: bandeau-defilant-glissement 240s linear infinite;

  /* Typo du texte de la séquence — Playfair Display, posée ici (plutôt que
     sur chaque élément un par un) : héritée par le texte ET le lien mail
     juste en dessous (qui redéfinit sa propre police/taille, voir
     .bandeau-defilant-piste a plus bas), les <img> n'en tiennent de toute
     façon pas compte. "text-transform" retiré et taille en "24pt" (pas
     "px") — demande explicite du 07/09/2026 : « la typo playfair du
     bandeau en minuscule avec la première lettre de phrase en capitale
     font-size: 24pt » — le texte s'affiche donc désormais tel qu'écrit
     dans footer.php ("Prenons un café et parlons-en !"), au lieu d'être
     mis en capitales par le CSS comme les autres bandeaus fixes du bas du
     site (.breadcrumb, .projets-filtres), qui gardent eux leur "uppercase"
     — ce choix ne concerne que le bandeau défilant. */
  font-family: 'Playfair Display', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  font-size: 24pt;
  font-weight: 500; /* demande explicite du 07/09/2026 : « pour la typo playfair je veux font-weight: 500 » — déjà chargé (voir naked_scripts() dans functions.php, "wght@400;500") */
  line-height: 24pt;
  color: #000;
  /* "letter-spacing: 0.08em" retiré le 07/09/2026 — demande explicite :
     "enleve l'interlettrage dans le playfair du bandeau". Repris tel quel
     sur .bandeau-defilant-piste a juste en dessous (le mail, en Archivo)
     pour ne pas changer son apparence au passage — la demande ne visait
     que le Playfair Display. */
}

/* Icône (demande explicite du 07/09/2026 : « je veux pas le logo du site,
   je veux cette icone [...] cafe-02.svg », à la place du petit logo mis
   juste avant) — déposée dans le dossier images/ du thème (voir
   footer.php). Hauteur d'abord calée sur la taille du texte à côté
   (24px), puis agrandie à 40px (6ᵉ ajustement du 07/09/2026, « le logo
   plus grand »), maintenant que le bandeau lui-même fait 60px de haut
   (voir plus haut) — largeur automatique pour respecter ses proportions
   réelles. Son espacement avec le texte/mail autour vient du "gap" de
   .bandeau-defilant-piste ci-dessus, pas d'une marge propre. */
/* 07/09/2026 : logo du bandeau agrandi de 40px a 50px, demande de Jean ("rajoute ca : hauteur 50px" pour .bandeau-defilant-icone) */
.bandeau-defilant-icone {
  display: block;
  height: 50px;
  width: auto;
}

/* Lien "mailto" (demande explicite : « tu peux lier un sendto ») — couleur
   héritée (noir, comme le reste du bandeau) plutôt que le bleu des liens
   dans le texte des fiches projet (.projet-3sept-texte-courant a) : ici
   c'est un élément de "chrome" d'interface, pas un lien dans un texte
   éditorial. Le soulignement garde le signal habituel "ceci est
   cliquable". Police en 'Archivo' — demande explicite du 07/09/2026
   (« j'aimerais que le mail soit affiché avec la typo archivo ») — plutôt
   que Playfair Display hérité de .bandeau-defilant-piste : seul le mail
   change de police, pas le reste de la séquence (texte, voir plus haut).
   Même taille/graisse (24px, hérité) pour ne pas casser l'alignement
   vertical avec le texte Playfair Display à côté. */
.bandeau-defilant-piste a {
  color: inherit;
  text-decoration: underline;
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-weight: 300; /* "light" — demande explicite du 07/09/2026 : « pour la archivo je veux light » — poids ajouté au chargement de la police, voir naked_scripts() dans functions.php ("wght@300;400;500") */
  font-size: 17px; /* demande explicite du 07/09/2026 : « pour le texte en archivo je veux en minuscule et tu peux mettre 17px » — remplace les 24pt hérités de .bandeau-defilant-piste */
  line-height: normal; /* le "line-height: 24pt" hérité n'a plus de sens à cette taille — centrage vertical déjà assuré par "align-items: center" sur .bandeau-defilant-piste */
  letter-spacing: 0.08em; /* repris ici tel quel : l'interlettrage n'a été retiré que du Playfair Display juste au-dessus, pas d'ici */
}

/* "display: contents" : ce conteneur (la 2ᵉ série de 10, voir footer.php)
   disparaît de la mise en page — ses enfants (texte/icône/mail/icône) se
   comportent comme s'ils étaient directement les enfants de
   .bandeau-defilant-piste (le flex ci-dessus, "gap" compris), sans lui
   ajouter de boîte intermédiaire. Sert uniquement à pouvoir poser
   "aria-hidden" sur toute la 2ᵉ série d'un coup, voir le commentaire
   complet dans footer.php. */
.bandeau-defilant-doublon {
  display: contents;
}

@keyframes bandeau-defilant-glissement {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Confort de lecture : si le visiteur a demandé de réduire les animations
   au niveau de son système (réglage d'accessibilité), on fige le
   défilement au lieu de l'ignorer — le texte reste lisible en entier
   (1ère copie), simplement immobile. */
@media (prefers-reduced-motion: reduce) {
  .bandeau-defilant-piste {
    animation: none;
  }
}


.projets-filtre-lien {
  color: #000;
}

.projets-filtre-lien.is-active {
  text-decoration: none;
}

/* #Fiche Projet : un seul format d'affichage, "Grille éditoriale" (voir
   .projet-detail-grille plus bas, et naked_projet_repartir_contenu() dans
   functions.php). Les anciens formats "6 colonnes (journal, fluide)" et
   "Chapeau / Texte / Médias" ont été retirés en tant que formats de fiche
   (choix du 21/08/2026) — leurs classes (.projet-detail-corps) ont donc
   été supprimées ici. Le gabarit "Chapeau / Texte / Médias" ci-dessous
   (.projet-detail-structure, .projet-zone-*) n'est PLUS utilisé par
   AUCUNE page — la page Mission, qui était le dernier gabarit à s'en
   servir, est passée au modèle "3SEPT" (.projet-3sept-*, voir plus bas)
   — demande explicite ("j'aimerais que tu appliques notre nouvelle façon
   de présenter [...] sur la page mission et contact", choix du
   03/09/2026). Laissé en place tel quel, comme le reste du code devenu
   inutilisé sur ce site.

   Le titre ne reste pas fixe : il fait partie du même bloc que le texte,
   dans le flux normal de la page, et remonte avec lui quand on scrolle —
   c'est tout simplement parce que .projet-detail n'a ni hauteur limitée
   ni défilement interne : c'est la page elle-même (la fenêtre du
   navigateur) qui défile normalement, comme sur n'importe quel site.
   (Avant : .projet-detail était limité à calc(100vh - 80px) avec son
   propre défilement interne, pour un effet "tout tient à l'écran, sinon
   ça défile en interne" — supprimé, entre autres parce que "100vh" est
   peu fiable sur mobile : au premier chargement, la barre d'adresse du
   téléphone est encore visible et prend de la place, donc "100vh" se
   calcule plus grand que l'espace réellement visible, avec le risque de
   cacher le bas du contenu.) */

/* Marges de 8% de chaque côté — le titre (.projet-detail-header) et la
   grille (.projet-detail-grille) ci-dessous héritent tous les deux de
   cette largeur, pour les mêmes marges que la page d'accueil "Headline"
   (.headline-grille, .headline-vedette-bloc). */
.projet-detail {
  margin: 0 8%;
  padding: 0;
}

.projet-detail-header {
  margin: 0;
  padding: 0;
}

/* Un titre ne se retrouve pas seul en bas d'une colonne, coupé de son
   texte — règle utilisée par la page Mission (.projet-zone-texte, format
   Chapeau / Texte / Médias). Ne touche jamais à la taille/graisse/couleur
   du texte (définies une seule fois, tout en haut de ce fichier) :
   uniquement le comportement de coupure en colonnes. */
.projet-zone-texte h1,
.projet-zone-texte h2,
.projet-zone-texte h3 {
  break-inside: avoid;
  break-after: avoid-column;
}

/* Lettrine ("drop cap") : uniquement sur la première lettre du titre
   "Chapeau" — la colonne dédiée du Chapeau, en page Mission
   (.projet-zone-chapeau), en fiche projet (.projet-3sept-chapeau, modèle
   "3SEPT" ; .projet-grille-chapeau, ancien format "Grille éditoriale",
   plus utilisé mais laissé en place), sur le texte du Chapeau de la
   vedette en page d'accueil (.headline-vedette-chapeau .headline-chapeau,
   voir plus bas — même style que le vrai titre "Chapeau" d'une fiche
   projet, pas le style "paragraphe de journal" des autres textes de la
   page), et, depuis une demande explicite, sur le Chapeau de chaque carte
   des 5 projets récents (.headline-recent-article .headline-chapeau, voir
   la page "Headline 2"). Un seul endroit pour cette règle, réutilisée dans
   tous ces gabarits. "font-family" déclarée ici explicitement (Playfair
   Display) plutôt que laissée à l'héritage : pour
   .projet-zone-chapeau/.projet-3sept-chapeau/.projet-grille-chapeau, le h1
   parent est déjà en Playfair Display (voir la règle h1 générique tout en
   haut de ce fichier) donc ça ne change rien, mais pour
   .headline-recent-article .headline-chapeau, le paragraphe parent reste
   volontairement dans la police courante du site (pas un titre) — seule
   cette lettrine doit passer en Playfair Display. "font-weight: 400"
   (regular) déclaré ici explicitement aussi, demande explicite — plus
   léger que les titres (500/medium, voir plus haut) : sans cette ligne, la
   lettrine des Chapeau hériterait du 500 du h1 parent. */
.projet-zone-chapeau h1::first-letter,
.projet-grille-chapeau h1::first-letter,
.projet-3sept-chapeau h1::first-letter,
.headline-vedette-chapeau .headline-chapeau::first-letter,
.headline-recent-article .headline-chapeau::first-letter {
  float: left;
  font-family: 'Playfair Display', serif;
  font-size: 2.5em;
  line-height: 0.8;
  font-weight: 400; /* regular, demande explicite pour les lettrines */
  padding-right: 9px;
  padding-top: 4px;
}

/* Gabarit "Chapeau / Texte / Médias" (voir naked_projet_repartir_contenu()
   dans functions.php) : utilisé uniquement par la page Mission
   (page-mission.php) désormais. Le contenu est réparti dans 3 colonnes
   fixes plutôt que de s'écouler librement :
   - Chapeau : 1 colonne (220px), le premier titre "Chapeau" seul.
   - Texte : 2 colonnes (220px x2 + 1 gouttière = 500px), le reste du
     texte, toujours réparti sur 2 colonnes internes façon journal.
   - Médias : 1 colonne large (500px, soit l'équivalent de 2 colonnes
     fusionnées — la gouttière du milieu disparaît), toutes les
     images/vidéos les unes sous les autres, en pleine largeur. */
.projet-detail-structure {
  display: grid;
  grid-template-columns: 220px calc(2 * 220px + 60px) calc(2 * 220px + 60px);
  column-gap: 60px;
  /* Pas d'overflow/hauteur ici : le défilement (si besoin) se fait sur
     .projet-detail dans son ensemble, titre compris — voir plus haut. */
  margin: 0;
  margin-top: 10px;
  padding: 0;
}

.projet-zone-chapeau,
.projet-zone-texte,
.projet-zone-media {
  min-width: 0; /* évite qu'une colonne de grille déborde de sa largeur à cause de son contenu */
}

/* N'est PLUS utilisé : la page Mission est passée au modèle "3SEPT" (voir
   page-mission.php et .projet-3sept-* plus bas), qui a sa propre marge
   (héritée de .projet-detail, 8% de chaque côté, comme la fiche projet)
   — laissé en place tel quel, comme le reste de ce gabarit "Chapeau /
   Texte / Médias" devenu inutilisé (voir le commentaire de section plus
   haut). Ancien commentaire, pour référence : le même gabarit "Chapeau /
   Texte / Médias", mais fluide (occupe toute la largeur disponible de la
   page) plutôt que les largeurs fixes et volontairement étroites de la
   fiche projet — mêmes proportions que 220px / 500px / 500px
   (1 / 2,3 / 2,3), mais en unités "fr" pour que ça s'étire. */
body.page-template-page-mission .projet-detail-structure {
  grid-template-columns: 1fr 2.3fr 2.3fr;
  max-width: 1800px; /* évite que ça devienne démesuré sur un très grand écran */
  margin-left: 8%;
  margin-right: 8%;
}

/* Colonne "Texte" : le reste du texte s'étale sur 2 colonnes internes
   façon journal (CSS multi-colonnes). */
.projet-zone-texte {
  column-count: 2;
  column-width: 220px;
  column-gap: 60px;
}

.projet-zone-texte p {
  break-inside: avoid;
}

/* Colonne "Médias" : une seule colonne large, pas de multi-colonnes —
   chaque image/vidéo/iframe en pleine largeur, les unes sous les autres. */
.projet-zone-media img,
.projet-zone-media video,
.projet-zone-media iframe {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  margin-top: 0;
  margin-bottom: 20px;
}

/* Le dernier média n'a pas besoin de marge en dessous — le sélecteur
   couvre à la fois le cas où l'image/vidéo est un enfant direct de la
   colonne, et le cas où elle est enveloppée dans un <figure> par le bloc
   Gutenberg (core/image, core/video...). */
.projet-zone-media > *:last-child,
.projet-zone-media > *:last-child img,
.projet-zone-media > *:last-child video,
.projet-zone-media > *:last-child iframe {
  margin-bottom: 0;
}

/* Page Mission : le même menu déroulant "Largeur (grille projet)" que la
   fiche projet (voir js/editor-media-colonnes.js) fonctionne aussi ici,
   mais avec un effet différent — demande explicite. Pas de vraie grille
   avec plusieurs cases par rangée sur cette page (une seule colonne
   "Médias" à largeur fixe, une image sous l'autre, voir plus haut) :
   "colonne-2"/"colonne-3" réduisent simplement la largeur de CE média
   dans sa colonne (66%/33%, centré) plutôt que d'élargir une case de
   grille — même principe que "media-small" sur la fiche projet (voir plus
   bas), juste avec 2 crans au lieu d'un seul.
   Pas besoin de ":has()" ici contrairement à la grille de la fiche projet :
   la classe "colonne-N" est posée directement sur l'élément du bloc
   (<figure> pour image/vidéo/audio/intégration/galerie, <div> pour
   couverture), qui EST déjà l'élément à rétrécir — il n'y a pas de case
   ajoutée en PHP à cibler séparément comme .projet-grille-media.
   "colonne-1" a sa propre règle explicite (pleine largeur, pas de
   centrage) plutôt que de compter sur l'absence de classe, pour éviter
   qu'une largeur/un centrage choisi avant (colonne-2/colonne-3) ne
   reste accroché en revenant à "1 colonne" — même raison que pour
   .projet-grille-media:has(.colonne-1) plus bas. */
.projet-zone-media .colonne-1 {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.projet-zone-media .colonne-2,
.projet-zone-media .colonne-3 {
  margin-left: auto;
  margin-right: auto;
}

.projet-zone-media .colonne-2 {
  width: 66%;
}

.projet-zone-media .colonne-3 {
  width: 33%;
}

/* Modèle "3SEPT" (voir naked_projet_repartir_contenu_3sept() dans
   functions.php, et single-projet.php) : seul modèle de fiche projet
   désormais — demande explicite ("on va créer un nouveau modèle de page
   single projet [...] Remplace tout", choix du 03/09/2026). Remplace le
   format "Grille éditoriale" ci-dessous (laissé en place, plus utilisé).

   2 moitiés côte à côte (.projet-3sept-texte / .projet-3sept-media,
   "flex: 1 1 50%" chacune — l'équivalent de 3 colonnes sur une base de 6,
   demande explicite) :
   - à gauche (.projet-3sept-texte) : le Chapeau en pleine largeur, puis
     en dessous (.projet-3sept-texte-bas) le texte courant et l'Impact
     côte à côte, sur une grille à 2 colonnes de largeurs 2fr / 1fr — donc
     le texte courant occupe 2 fois la largeur de l'Impact, demande
     explicite ("le texte courant sur 2 colonnes [...] le texte impact sur
     1 colonne").
   - à droite (.projet-3sept-media) : tous les médias, une grille à 3
     colonnes qui se répartit automatiquement (aucune position fixée en
     PHP), une case par média — demande explicite ("toutes les images et
     média sont affichés sur les 3 colonnes restantes"). Cette moitié n'a
     pas besoin de suivre la hauteur de la colonne de texte : chacune des
     2 moitiés grandit avec son propre contenu ("align-items: flex-start"
     sur .projet-3sept-grille), comme 2 colonnes de journal indépendantes. */
.projet-3sept-grille {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin: 0;
  margin-top: 10px;
  padding: 0;
}

.projet-3sept-texte,
.projet-3sept-media {
  flex: 1 1 50%;
  min-width: 0; /* évite qu'une moitié ne déborde de sa largeur à cause de son contenu */
}

/* Image clé du projet, sous le Chapeau (voir single-projet.php) — demande
   explicite du 07/09/2026 : « rajouter une l'image cléf sur les page
   projet version mobile. Sous le chapeau. Visible seulement sur mobile. »
   Masquée par défaut ici (fiche projet sans image mise en avant sur
   ordinateur, choix d'origine du modèle "3SEPT", voir le commentaire en
   haut de single-projet.php) ; réaffichée uniquement dans le
   "@media (max-width: 600px)" plus bas. */
.projet-image-cle-mobile {
  display: none;
}
.projet-image-cle-mobile img {
  display: block;
  width: 100%;
  height: auto;
}

.projet-3sept-texte-bas {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px 20px;
  margin-top: 40px; /* même espace que celui entre les rangées de l'ancienne grille éditoriale */
}

.projet-3sept-texte-courant p,
.projet-3sept-texte-courant h1,
.projet-3sept-texte-courant h2,
.projet-3sept-texte-courant h3,
.projet-3sept-impact p,
.projet-3sept-impact h1,
.projet-3sept-impact h2,
.projet-3sept-impact h3 {
  /* Aligné à gauche, drapeau à droite (fer à gauche) — demande explicite
     ("on repasse en alignement drapeau férré à gauche plutôt que justifié
     droite et gauche sur les pages single"), remplace le 1er essai
     "justifié comme une colonne de journal" (text-align: justify), qui
     imitait l'ancienne "Grille éditoriale" (.projet-grille-texte,
     inchangée, voir plus bas — garde son propre justifié, n'est de toute
     façon plus utilisée). */
  text-align: left;
}

/*
 * Liens dans le texte « Réalisation et rôle » (.projet-3sept-texte-courant)
 * et « Informations » (.projet-3sept-impact) — mêmes zones que le vert et
 * le rose de l'éditeur (voir editor-zones-2.css) — demande explicite du
 * 07/09/2026, cette fois pour les visiteurs du site : "liens texte dans
 * les blocs verts et rose : soulignés #2e3786".
 */
.projet-3sept-texte-courant a,
.projet-3sept-impact a {
	color: #2e3786;
	text-decoration: underline;
}

/*
 * Iframe/intégration insérée directement dans le texte "Réalisation et
 * rôle" grâce à la classe manuelle "colonne-texte" (voir
 * naked_projet_bloc_est_media() dans functions.php, qui la fait sortir de
 * la grille Médias pour rejoindre cette colonne à la place, à l'endroit où
 * elle a été placée dans l'éditeur) — demande explicite du 07/09/2026.
 * Même principe de hauteur homothétique que dans la grille Médias (voir
 * plus haut ".projet-3sept-media-case iframe"), pour ne pas avoir une
 * hauteur figée dans une colonne bien plus étroite.
 */
.projet-3sept-texte-courant .wp-block-embed {
	margin: 20px 0;
}
.projet-3sept-texte-courant iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/*
 * Bloc « Intégration (colonne de texte) » (naked/embed-texte, voir
 * js/editor-embed-texte.js et naked_afficher_embed_texte() dans
 * functions.php) — demande explicite du 07/09/2026. Espace au-dessus, comme
 * entre 2 paragraphes du texte courant. La mise en forme de l'iframe
 * elle-même (largeur, ratio 16/9) est déjà réglée par
 * ".projet-3sept-texte-courant iframe" juste au-dessus.
 */
.naked-embed-texte {
	margin-top: 20px;
}

/* Espace après chaque paragraphe du texte courant — demande explicite du
   05/09/2026, d'abord juste entre 2 paragraphes qui se suivent ("p + p",
   pour l'espace manquant avant un CTA/iframe collé à la main), puis
   élargie le même jour à TOUS les paragraphes. "margin-bottom" plutôt que
   "margin-top" (1er essai) : un "margin-top" sur le tout premier
   paragraphe remontait sa marge dans celle du bloc parent (fusion des
   marges, comportement standard CSS) et décalait toute la zone vers le
   bas — "il faut que l'espace soit placé après le paragraphe, sinon ça
   décale tout le contenu". Le reset général "p { margin: 0 }" (tout en
   haut de ce fichier) ne laissait sinon aucun espace du tout. Seulement
   dans le texte courant (zone de gauche), pas dans .projet-3sept-impact ni
   ailleurs, demande explicite ("Juste dans la zone gauche"). */
.projet-3sept-texte-courant p {
  margin-bottom: 1.5em;
}

/* Bouton "Boutons" orange (CTA collé dans le texte courant, ex. "Découvrir
   la plateforme" sur la fiche Ravensburger) — demande explicite du
   05/09/2026 : taille de texte 17px et texte noir plutôt que blanc. Cible
   n'importe quel bouton orange "plein" (style "Remplir" de l'éditeur,
   couleur de fond "Orange vif lumineux") plutôt qu'un seul projet, pour que
   le prochain bouton du même genre garde automatiquement la même
   apparence, sans avoir à la refaire à la main à chaque fois.
   Attention, ce réglage seul ne suffit pas : WordPress pose par défaut une
   règle globale ".has-large-font-size { font-size: ... !important; }" sur
   tout bouton créé avec la taille "Large" du menu de l'éditeur — un simple
   style ici, moins prioritaire qu'un "!important", resterait donc sans
   effet tant que cette classe reste posée sur le bouton. Il faut retirer
   "has-large-font-size" de ses classes (dans le contenu du bloc, pas
   possible depuis ce fichier CSS) pour que ce réglage s'applique
   réellement — sinon le bouton garde sa taille "Large" d'origine (36px)
   malgré ce fichier. */
.wp-block-button__link.has-luminous-vivid-orange-background-color {
  font-size: 17px;
  color: #000;
}

/* Le Client/Impact (voir plus haut) sans le soulignement que porte
   n'importe quel titre de niveau 3 ailleurs sur le site (règle générique
   "h3", tout en haut de ce fichier) — demande explicite. Ne touche qu'à
   .projet-3sept-impact : la règle générique "h3" garde son soulignement
   partout ailleurs (dont .projet-3sept-texte-courant, si jamais un texte
   courant contenait un titre de niveau 3). "text-decoration: none" (plutôt
   que de ne rien écrire) l'emporte sur la règle générique "h3" grâce à sa
   spécificité plus précise (une classe + la balise, contre la balise
   seule) — pas besoin de "!important".
   S'affichait aussi en capitales (text-transform: uppercase) — retiré,
   demande explicite du 04/09/2026 ("la zone client anciennement impact ne
   doit pas être en capitales"). */
.projet-3sept-impact h1,
.projet-3sept-impact h2,
.projet-3sept-impact h3 {
  text-decoration: none;
}

/* Le "Client" (bloc Titre de niveau 3, voir .projet-3sept-impact h3
   ci-dessus et js/editor-heading-labels.js) — demande explicite du
   04/09/2026 : plus de marge en haut (pour empiler plusieurs "Client" les
   uns sous les autres sans espace, un nom de client par bloc), en italique,
   et en Times New Roman plutôt que la police Helvetica générique héritée de
   la règle "h3" tout en haut de ce fichier. Ne touche qu'à
   .projet-3sept-impact : la règle générique "h3" garde son style partout
   ailleurs. */
.projet-3sept-impact h3 {
  margin-top: 0;
  font-style: italic;
  font-family: 'Times New Roman', Times, serif;
}

/* Demande explicite du 07/09/2026 : « enleve le gap haut de cette class :
   .projet-3sept-media ». Le seul espacement de cette grille à 3 colonnes
   vient de "gap" (raccourci "row-gap column-gap") : le "gap haut" ne peut
   désigner que le row-gap (l'espace vertical, entre 2 rangées de médias
   empilées) — "gap" ne crée jamais d'espace avant la 1ère rangée ni après
   la dernière. Passé de "40px 20px" à "0 20px" : les médias se touchent
   verticalement, le column-gap de 20px entre 2 médias côte à côte sur la
   même rangée est conservé. */
.projet-3sept-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 20px;
}

.projet-3sept-media-case img,
.projet-3sept-media-case video,
.projet-3sept-media-case iframe {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/*
 * Hauteur « homothétique » des iframes (intégrations vidéo/réseaux
 * sociaux) dans la grille Médias — demande explicite du 07/09/2026 :
 * « forcer les iframes à afficher une hauteur homothétique ». Une
 * <iframe> n'a pas de ratio intrinsèque (contrairement à une image ou une
 * vidéo <video>, qui gardent leurs proportions naturelles avec
 * « height: auto » seul) : sans ce réglage, sa hauteur reste celle fixée
 * en dur par le code d'intégration d'origine (ex. 315px pour un embed
 * YouTube 560×315) alors que sa largeur, elle, est fluide (100% de la
 * case, elle-même 1/2/3 colonnes selon « .colonne-1/2/3 », ou 3
 * colonnes forcées pour les iframes — voir plus bas) : résultat,
 * l'intégration apparaît écrasée ou étirée selon la largeur réellement
 * obtenue. « aspect-ratio » calcule la hauteur automatiquement à partir
 * de la largeur pour garder toujours le même rapport, quelle que soit la
 * colonne ou la taille d'écran. 16/9 = format standard des lecteurs
 * vidéo (YouTube, Vimeo...), qui couvre la grande majorité des
 * intégrations de ce site.
 */
.projet-3sept-media-case iframe {
  aspect-ratio: 16 / 9;
}

/* Diaporama d'un bloc "Galerie" (plusieurs images) dans la grille médias
   d'une fiche projet — demande explicite, voir naked_projet_media_bloc()
   dans functions.php pour le balisage et js/projet-slideshow.js pour la
   navigation. ".naked-slideshow" est le bloc Galerie lui-même (rendu
   natif de WordPress, mêmes <figure class="wp-block-image"> que
   n'importe quelle galerie ailleurs sur le site) ; "display: block"
   remplace sa grille/son flex natif — seule LA diapo courante (voir
   .naked-slide-active plus bas) est affichée, les autres sont
   "display: none", donc la case garde simplement la hauteur de l'image du
   moment, pas de hauteur fixée à l'avance. */
.naked-slideshow-wrap {
  position: relative;
}

/* "!important" nécessaire à partir d'ici : le bloc Galerie natif de
   WordPress a ses propres règles (feuille de style du cœur, pas la
   nôtre) pour ranger ses images en grille — largeur calculée à 50%
   ("figure.wp-block-image:not(#individual-image)", un sélecteur qui se
   sert d'un ID inutilisé dans un ":not()" juste pour gonfler sa propre
   priorité — un des ":not()" comptant comme un ID dans le calcul de
   priorité CSS), "display: flex" (via la classe générique
   "is-layout-flex", posée par WordPress sur le bloc Galerie), recadrage
   ("object-fit: cover") de chaque image sur une hauteur à 100%... Plus
   prioritaires que nos propres classes seules (bug constaté : les 6
   images d'une vraie galerie s'affichaient TOUTES en même temps, écrasées
   à ~53px de large, "display: none" ignoré) — "!important" laisse nos
   règles gagner à coup sûr, sans avoir à deviner la priorité exacte
   (susceptible de changer à la prochaine mise à jour de WordPress). */
.naked-slideshow.wp-block-gallery {
  display: block !important;
}

.naked-slideshow .wp-block-image {
  display: none !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  flex: none !important;
}

.naked-slideshow .wp-block-image.naked-slide-active {
  display: block !important;
}

.naked-slideshow .wp-block-image img,
.naked-slideshow .wp-block-image a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  flex: none !important;
}

/* Flèches précédente/suivante — à un endroit fixe, en haut du bloc plutôt
   que centrées verticalement (2ᵉ essai : centrées, "il faut absolument
   que les flèches soient à un endroit fixe [...] en haut du bloc, à 10px
   des bords" — au milieu, leur position dépendait de la hauteur de
   l'image du moment, donc elles se déplaçaient d'une diapo à l'autre).
   Fond blanc plein (pas semi-transparent comme le 1er essai) et typo
   noire — demande explicite. Carré (pas de border-radius) et flèches en
   gras — demande explicite du 05/09/2026, remplace l'ancien rond. Classe
   commune aux 2 carrousels du site (diaporama de galerie ET carrousel
   Instagram, voir plus bas) : un seul changement ici s'applique aux deux,
   comme demandé ("les deux flèches [...] des carroussels"). */
.naked-slideshow-fleche {
  position: absolute;
  top: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.naked-slideshow-prec {
  left: 10px;
}

.naked-slideshow-suiv {
  right: 10px;
}

/* Points, sous l'image, un par diapo — posés vides ici, remplis par
   js/projet-slideshow.js (leur nombre dépend du nombre d'images dans
   chaque galerie). */
.naked-slideshow-points {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.naked-slideshow-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #000;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.naked-slideshow-point-active {
  background: #000;
}

/* Carrousel "Instagram" (bloc naked/carousel-instagram) — demande explicite
   du 05/09/2026, voir naked_afficher_carousel_instagram() dans
   functions.php pour le balisage et js/carousel-instagram.js pour la
   navigation. Réutilise l'apparence des flèches/points du diaporama de
   galerie juste au-dessus (.naked-slideshow-wrap pour le positionnement,
   .naked-slideshow-fleche/-prec/-suiv/-points/-point/-point-active pour
   leur style) — seul le mécanisme d'affichage des diapos change ici :
   "visibility" plutôt que "display: none", pour que chaque post Instagram
   ait quand même une largeur réelle dès le chargement de la page, même
   ceux pas encore affichés (voir le commentaire en haut de
   js/carousel-instagram.js pour le détail). Les diapos sont donc empilées
   les unes sur les autres ("position: absolute"), sauf celle affichée
   ("position: relative", qui redonne alors sa hauteur au carrousel). */
.naked-carousel-instagram {
  position: relative;
}

.naked-carousel-instagram-slide {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.naked-carousel-instagram-slide.naked-carousel-instagram-slide-active {
  visibility: visible;
  position: relative;
}

/* Un seul post collé (pas de carrousel, voir naked_afficher_carousel_instagram()
   dans functions.php) : affiché tel quel, simplement centré comme une diapo
   active. */
.naked-carousel-instagram-slide-unique {
  display: flex;
  justify-content: center;
}

/* Correctif du 05/09/2026 ("c'est toujours tronqué") : la règle plus haut
   ".projet-3sept-media-case iframe { height: auto }" (pensée pour d'autres
   médias) écrasait la vraie hauteur qu'Instagram calcule pour chaque post
   (texte de légende compris) — Instagram la fixe via l'attribut HTML
   "height" de son <iframe> (ex: height="567"), pas via son style, et
   n'importe quelle règle CSS externe l'emporte sur un attribut HTML de ce
   genre (même "revert", essayé en premier ici, ne suffit pas à revenir à
   la valeur de l'attribut dans les navigateurs testés). La hauteur
   retombait donc à la valeur par défaut du navigateur pour un iframe
   (environ 150px) au lieu de la vraie hauteur voulue — d'où le post
   "coupé" juste sous l'en-tête.
   Solution finale : js/carousel-instagram.js recopie lui-même, en style
   inline, la valeur de l'attribut "height" dès qu'Instagram la pose
   (asynchrone : chaque post reçoit sa hauteur à un moment différent, d'où
   l'observateur de mutation plutôt qu'une simple lecture une fois au
   chargement de la page) — un style inline l'emporte, lui, sur n'importe
   quelle règle externe. Rien à faire ici côté CSS. */

/* Menu déroulant "Largeur (grille projet)" ajouté dans l'éditeur pour les
   blocs média (voir js/editor-media-colonnes.js) : "1 colonne" / "2
   colonnes" / "3 colonnes", même mécanisme ":has()" que pour l'ancienne
   "Grille éditoriale" plus bas (.projet-grille-media:has(.colonne-2) etc.)
   — appliqué ici à .projet-3sept-media-case (la case de la grille à 3
   colonnes de 3SEPT) plutôt qu'à .projet-grille-media. Oubliée lors de la
   création du modèle 3SEPT (la classe "colonne-N" était bien écrite par
   l'éditeur, mais aucune règle ne la lisait encore ici) — corrigé
   suite à un signalement ("pourquoi les attributs de colonnes des médias
   ne fonctionnent pas"). "colonne-1" a sa propre règle explicite (plutôt
   que de compter sur "aucune classe = largeur par défaut") pour les mêmes
   raisons que dans l'ancienne grille : ça garantit qu'elle l'emporte bien
   si la case avait déjà "colonne-2"/"colonne-3" avant. */
.projet-3sept-media-case:has(.colonne-1) {
  grid-column: span 1;
}

.projet-3sept-media-case:has(.colonne-2) {
  grid-column: span 2;
}

.projet-3sept-media-case:has(.colonne-3) {
  grid-column: span 3;
}

/*
 * TOUTES les iframes (intégrations : YouTube, Instagram, vidéo...) sur 3
 * colonnes dans la grille Médias — demande explicite du 07/09/2026 : "je
 * veux qu'ils s'intègrent tous dans 3 colonnes sur la zone droite".
 * Contrairement à une image ou une vidéo (qui restent en 1 colonne par
 * défaut, largeur choisie au cas par cas via le menu "Largeur (grille
 * projet)" — voir js/editor-media-colonnes.js), TOUTE case contenant une
 * intégration passe systématiquement à "grid-column: span 3" PAR DÉFAUT,
 * soit le réglage "colonne-1/2/3" choisi sur le bloc, SAUF si ce réglage
 * a été mis à la main sur le bloc de l'intégration elle-même (voir
 * "Exception manuelle" ci-dessous) — d'où le "!important" : il doit
 * l'emporter sur les 3 règles juste au-dessus
 * (".projet-3sept-media-case:has(.colonne-1/2/3)"), qui sont plus
 * spécifiques (une classe) que ":has(iframe)"/":has(.wp-block-embed)"
 * (une seule balise) et gagneraient sinon. ".wp-block-embed" en plus de
 * "iframe" : certaines intégrations (Instagram...) n'affichent leur
 * <iframe> qu'après coup, via un script — le bloc "wp-block-embed" est
 * là dès le rendu de la page.
 */
.projet-3sept-media-case:has(iframe):not(:has(:is(.colonne-1, .colonne-2, .colonne-3))),
.projet-3sept-media-case:has(.wp-block-embed):not(:has(:is(.colonne-1, .colonne-2, .colonne-3))) {
	grid-column: span 3 !important;
}

/*
 * Exception manuelle — demande explicite du 07/09/2026 : « une classe
 * iframe que je puisse ajouter manuellement pour que la frame soit dans
 * les 2 colonnes de gauche » (cas concret : le lecteur Spotify de la
 * fiche "St-Germain", trop large en 3 colonnes). Pas besoin d'une
 * nouvelle classe : le menu existant "Largeur (grille projet)" (voir
 * js/editor-media-colonnes.js) fonctionne déjà sur le bloc "Intégration"
 * ("core/embed", qui couvre Spotify/YouTube/Instagram...) — il posait
 * juste une classe "colonne-1/2/3" ignorée jusqu'ici pour les iframes à
 * cause du "!important" ci-dessus. Le ":not(:has(...))" ajouté juste
 * au-dessus corrige ça : dès qu'une iframe reçoit "colonne-1", "colonne-2"
 * ou "colonne-3" (via le menu, ou tapée à la main dans "Avancé" → "Classe(s)
 * CSS supplémentaire(s)" du bloc), elle sort du "span 3" forcé et repasse
 * sous les 3 règles ".has(.colonne-1/2/3)" juste au-dessus (span 1, 2 ou
 * 3 selon le choix). En CSS Grid, une case seule sur sa ligne avec
 * "span 2" occupe naturellement les 2 premières colonnes (les 2 de
 * gauche) de la grille à 3 colonnes — pas besoin de règle de position
 * séparée. Les iframes SANS classe "colonne-X" gardent le comportement
 * par défaut (3 colonnes).
 */

/* Le carrousel Instagram (voir plus bas, .naked-carousel-instagram-wrap)
   prend toujours toute la largeur des 3 colonnes — demande explicite du
   05/09/2026 : "j'aimerais que le carroussel prenne les 3 colonnes".
   Contrairement aux autres médias, pas de menu "Largeur (grille projet)"
   pour lui (voir js/editor-media-colonnes.js, pas concerné) : une seule
   largeur, toujours la plus grande, pour laisser assez de place à
   Instagram — un post Instagram a besoin d'une largeur minimale (environ
   326px) pour s'afficher correctement, largeur qu'1 seule des 3 colonnes
   ne suffit pas toujours à offrir. */
.projet-3sept-media-case:has(.naked-carousel-instagram-wrap),
.projet-3sept-media-case:has(.naked-carousel-instagram-slide-unique) {
  grid-column: span 3;
}

/* Ancien format "Grille éditoriale" — n'est PLUS utilisé par
   single-projet.php (remplacé par le modèle "3SEPT", voir plus bas,
   .projet-3sept-grille et compagnie — choix du 03/09/2026). Classes
   laissées telles quelles plutôt que supprimées, même principe que les
   formats "6 colonnes" et "Chapeau / Texte / Médias" avant elle (voir plus
   haut).

   (voir naked_projet_repartir_contenu() dans
   functions.php) : grille à 2 niveaux, sur la même
   base de 6 colonnes que la page d'accueil "Headline" (.headline-grille,
   .headline-vedette-grille — même "gap: 40px 20px", mêmes marges de 8%
   héritées de .projet-detail).
   - Niveau externe (.projet-detail-grille) : 6 colonnes — le "Chapeau"
     (1 colonne) et .projet-grille-contenu (les 5 colonnes restantes).
     Une seule rangée : le Chapeau s'étire donc automatiquement à la même
     hauteur que le contenu (comportement par défaut de grid, sans avoir
     besoin de forcer un nombre de rangées).
   - Niveau interne (.projet-grille-contenu) : grille de 5 colonnes
     égales qui reçoit la case de texte et une case par média. Les cases
     se placent automatiquement (aucune position fixée en PHP) : le
     navigateur les range dans l'ordre, de gauche à droite puis de haut
     en bas, nouvelle rangée dès qu'une rangée est pleine. S'il y a moins
     de médias que de cases disponibles, la grille s'arrête simplement là
     — aucune case n'est étirée pour combler le vide.
   (Avant : une seule grille de 5 colonnes avec "grid-row: 1 / span 50"
   sur le Chapeau pour le faire tenir sur toute la hauteur — mais "gap"
   s'appliquait entre les ~50 rangées créées, dont la plupart vides,
   ajoutant ~1000px d'espace mort en bas de page. La grille à 2 niveaux
   n'a plus ce problème : le Chapeau s'étire naturellement, aucune
   rangée vide n'est créée.) */
.projet-detail-grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 20px;
  margin: 0;
  margin-top: 10px;
  padding: 0;
}

.projet-grille-chapeau {
  grid-column: 1 / span 1;
  grid-row: 1;
}

.projet-grille-contenu {
  grid-column: 2 / span 5;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 20px;
  /* "dense" : quand un média plus large (media-large, media-xlarge) ne
     tient pas dans la place restante d'une rangée, le navigateur le
     renvoie à la rangée suivante SANS "dense" — la case vide qu'il
     laisse derrière lui ne se comble jamais, ce qui donne des espaces
     irréguliers entre les images (des gouttières qui semblent plus
     larges à certains endroits qu'à d'autres). "dense" comble ces trous
     avec les médias suivants qui peuvent y tenir, sans changer la taille
     de chaque média — seul l'ordre d'affichage peut légèrement changer. */
  grid-auto-flow: row dense;
}

/* Le texte (tous les paragraphes ensemble) occupe une case large de 2
   colonnes (sur les 5 de .projet-grille-contenu), pour qu'il se lise en
   continu plutôt que de sauter de colonne en colonne à chaque
   paragraphe. */
.projet-grille-texte {
  grid-column: span 2;
  /* Le texte se répartit en 2 morceaux visuellement distincts (comme les
     colonnes journal ailleurs sur le site), plutôt qu'un seul bloc plein
     large de 2 colonnes de grille — répartition automatique par le
     navigateur (pas coupée à chaque paragraphe). */
  column-count: 2;
  column-gap: 20px;
}

/* "p" pour un vrai paragraphe, mais aussi "h2"/"h3" : les intitulés
   "Texte" et "Impact" proposés dans l'éditeur (voir
   naked_enqueue_editor_heading_labels() / js/editor-heading-labels.js
   dans functions.php) sont en réalité des blocs "Titre" de niveau 2 et 3
   — de vraies balises <h2>/<h3>, pas des <p> — pour July, ça reste du
   texte courant à écrire normalement. Sans cette ligne, un bloc "Texte"
   (h2) ne profitait PAS de "break-inside: avoid" (seuls les <p> l'avaient) :
   le navigateur pouvait couper sa phrase en plein milieu entre les 2
   colonnes, exactement comme si on avait array_slice une phrase au hasard —
   c'est ce qui donnait l'impression que "le texte courant est coupé".
   Même règle que .projet-zone-texte h1/h2/h3 plus haut (page Mission, déjà
   correcte) — .projet-grille-texte (fiche projet) ne l'avait tout
   simplement jamais eue. */
.projet-grille-texte p,
.projet-grille-texte h1,
.projet-grille-texte h2,
.projet-grille-texte h3 {
  break-inside: avoid; /* un paragraphe/titre ne se coupe pas entre les 2 morceaux */
  text-align: justify; /* justifié à droite et à gauche, comme une colonne de journal */
}

.projet-grille-media img,
.projet-grille-media video,
.projet-grille-media iframe {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Pour changer la taille d'une image/vidéo dans la grille : dans
   l'éditeur, sélectionne le bloc image/vidéo concerné, ouvre le panneau
   "Avancé" (colonne de droite) et ajoute une des classes CSS
   supplémentaires ci-dessous — "media-small", "media-large" ou
   "media-xlarge". ":has()" permet de cibler la case (le vrai élément de
   la grille) à partir de cette classe posée sur le bloc à l'intérieur,
   sans avoir besoin de toucher au PHP.

   "media-large" (2 colonnes) et "media-xlarge" (5 colonnes, toute la
   largeur de .projet-grille-contenu) élargissent la case elle-même dans
   la grille — le média reste à 100% de la largeur de sa case, mais la
   case est plus large.

   "media-small" est différent : la case reste à 1 colonne (la largeur
   par défaut, donc rien à élargir), alors pour rendre le média
   visuellement plus petit, on réduit sa propre largeur à 50% de sa case
   et on le centre — sinon, à largeur de case égale, la classe n'aurait
   aucun effet visible. */
.projet-grille-media:has(.media-large) {
  grid-column: span 2;
}

.projet-grille-media:has(.media-xlarge) {
  grid-column: span 5;
}

.projet-grille-media:has(.media-small) img,
.projet-grille-media:has(.media-small) video,
.projet-grille-media:has(.media-small) iframe {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

/* Menu déroulant "Largeur (grille projet)" ajouté dans l'éditeur pour les
   blocs média (voir js/editor-media-colonnes.js) : "1 colonne" / "2
   colonnes" / "3 colonnes". Écrit une classe CSS supplémentaire sur le
   bloc ("colonne-1", "colonne-2" ou "colonne-3"), lue ici exactement comme
   media-small/media-large/media-xlarge ci-dessus, avec le même mécanisme
   ":has()". "colonne-1" a sa propre règle explicite ci-dessous (plutôt que
   de compter sur "aucune classe = largeur par défaut") : ça évite tout
   souci si une case avait déjà "colonne-2"/"colonne-3" avant — revenir à
   "1 colonne" écrit bien sa propre classe, qui force "span 1" et gagne
   forcément (aucune des 3 classes ne peut être posée en même temps qu'une
   autre, voir editor-media-colonnes.js).
   Les 2 systèmes cohabitent : celui-ci pour choisir un nombre de colonnes
   précis depuis un menu (recommandé, pas de classe à taper à la main),
   l'ancien (media-small/media-large/media-xlarge) toujours disponible
   pour ses 2 effets propres (rétrécir un média dans sa case, ou l'étaler
   sur toute la largeur). */
.projet-grille-media:has(.colonne-1) {
  grid-column: span 1;
}

.projet-grille-media:has(.colonne-2) {
  grid-column: span 2;
}

.projet-grille-media:has(.colonne-3) {
  grid-column: span 3;
}

/* #Téléphones : la "Grille éditoriale" passe de 6 colonnes (1 pour le
   Chapeau + 5 pour le contenu) à une grille plate à 2 colonnes — en-tête
   du site (inchangé, déjà sobre), puis le titre du projet, puis :
   - le Chapeau sur 1 colonne (au lieu de toute la hauteur à gauche) ;
   - le texte courant en pleine largeur (2 colonnes), sur 1 seule colonne
     de texte à l'intérieur (2 morceaux ne tiendraient pas côte à côte
     sur un écran de téléphone) ;
   - chaque média sur 1 colonne, sauf "media-large"/"media-xlarge" qui
     passent en pleine largeur (2 colonnes) — même logique que sur
     ordinateur, juste 2 colonnes au lieu de 5.
   ".projet-grille-contenu" (la grille imbriquée à 5 colonnes) est
   neutralisée avec "display: contents" : elle "disparaît" et son texte +
   ses médias rejoignent directement la grille à 2 colonnes de
   .projet-detail-grille, dans l'ordre où ils sont déjà dans la page. */
@media (max-width: 600px) {

  /* Sur mobile, la petite version du logo (.logo-headline-mobile,
     thejulyreviewsmall.png par défaut) remplace la grande (voir
     header.php et le CSS plus haut, .site-title-headline) — mêmes
     sélecteurs scopés sous .site-title-headline que plus haut, pour la
     même raison de spécificité. */
  .site-title-headline .logo-headline-desktop {
    display: none;
  }

  /* Les 3 piles de la page d'archive des projets (/projets/, voir plus
     haut .projets-masonry et .naked-pile-colonne) restent 3 sur mobile —
     "display: flex" les rétrécit déjà automatiquement, pas besoin d'une
     règle à part comme du temps de l'ancienne grille CSS (qui avait
     besoin de connaître son nombre de colonnes à l'avance).

     En revanche, la présentation "en tranches" (seul le 1er journal de
     chaque pile pleinement visible, les suivants juste devinés par une
     fine bande en dessous, qui ne se révèlent qu'au survol) ne marche pas
     sur mobile : pas de souris, donc pas de survol pour dévoiler le reste
     — demande explicite ("on va simplement espacer les lignes de
     journaux. Pour que chaque journal soit visible en entier comme sur
     mon exemple"). Chaque journal repasse donc dans le flux normal de la
     page ("position: relative" plutôt que "absolute", posé par
     .naked-pile-empilee sur ordinateur) : les journaux s'empilent
     simplement les uns EN DESSOUS des autres (plus par-dessus), chacun
     entièrement visible, espacés par une vraie marge plutôt qu'une simple
     tranche qui dépasse. "position: relative" plutôt que "static" :
     garde actif le petit décalage aléatoire gauche/droite de chaque
     journal (voir archive-projet.php, "left" posé en style inline —
     n'a d'effet que sur un élément positionné). "padding-bottom" de la
     pile (qui réservait la place des tranches empilées en absolu) n'a
     plus lieu d'être ici : les journaux reprennent leur propre hauteur
     dans le flux normal, la pile n'a plus besoin de ce calcul. */
  .naked-pile-colonne {
    padding-bottom: 0;
  }

  .naked-pile-empilee {
    position: relative;
    top: auto;
    margin-top: 16px;
  }

  /* Titres des journaux : remontés de 7px (1er réglage), puis redescendus
     de 4px (demande explicite, "baisse les titres des journaux de 4px")
     — net -3px. */
  .projet-masonry-titre {
    transform: translateY(-3px);
  }

  /* Contenu de chaque journal (titre + lignes muettes + photo, voir
     .projet-masonry-une plus haut) encore un peu remonté — demande
     explicite ("tu peux monter encore un peu le contenu des journaux"),
     en plus du titre seul juste au-dessus. Reprend le "top" de la marge
     de .projet-masonry-une (calc(28% + 15px)) réduit de 10px de plus —
     seul le "top" est repris ici (pas tout le raccourci "inset"), les 3
     autres marges (droite/bas/gauche) restent celles d'ordinateur, pas
     concernées par cette demande. */
  .projet-masonry-une {
    top: calc(28% + 5px);
  }

  .site-title-headline .logo-headline-mobile {
    display: block;
  }

  .projet-single .title {
    /* 70pt (~93px) est bien trop grand pour un écran de téléphone — pas
       demandé explicitement, mais nécessaire pour que le titre reste
       lisible sans déborder. Dis-moi si tu préfères une autre taille. */
    font-size: 36px;
    line-height: 1.2;
  }

  /* La fiche projet (.projet-detail-grille et compagnie) est passée à 1
     seule colonne sur mobile (demande explicite) — voir la version
     complète tout en bas de ce fichier, section "#Surcharges mobile" :
     ces sélecteurs existent déjà ailleurs dans ce fichier (le "Niveau
     externe"/"Niveau interne" de la grille éditoriale, voir plus bas),
     donc ils doivent être placés après eux pour être sûrs de gagner (même
     principe que les autres surcharges regroupées là-bas). */

}

/* Les surcharges mobile de la vedette de l'accueil, des marges 8% → 8px et
   du menu déroulant sont regroupées tout en bas de ce fichier (voir
   "#Surcharges mobile (fin de fichier, volontairement)"), pas ici — voir
   l'explication là-bas. */

/* #Page Mission : texte en grand, justifié à gauche
================================================== */
/* Taille de texte volontairement plus grande que le reste du site sur
   cette page uniquement (demande explicite) — la valeur exacte est un
   point de départ, à ajuster au moment du style. */

.texte-grand {
  font-size: 2rem;
  line-height: 1.4;
  text-align: left;
  margin: 0;
  padding: 0;
}

.texte-grand p {
  text-align: left;
  margin: 0;
  padding: 0;
}

/* #Page Headline / fiche projet / archive des projets / Mission & Contact /
   Pile de journaux / Vrac de journaux : en-tête façon "une de journal"
   (voir page-home-headline.php, page-home-headline-2.php,
   single-projet.php, archive-projet.php, page-mission.php,
   page-pile-journaux.php et page-vrac-journaux.php)
================================================== */

/* Cet en-tête habillé "journal" (logo image, date, liens unifiés) est
   partagé par 7 gabarits : la page d'accueil "Headline", sa variante à
   l'essai "Headline 2", chaque fiche projet individuelle, la page
   d'archive des projets, la page "Mission & Contact", la variante "Pile
   de journaux" ET la variante "Vrac de journaux" (voir
   $naked_entete_style_journal dans header.php) — d'où les 7 sélecteurs à
   chaque règle ci-dessous, plutôt qu'une seule page. Le logo centré, et
   les 2 liens du menu ("Archives" et "Mission & Contact") sur une ligne à
   part, en dessous, centrés eux aussi — plutôt qu'à côté du logo (essayé
   d'abord, voir l'historique des versions : avec les liens sur la même
   ligne que le logo, difficile de garantir que ce dernier reste pile
   centré quelle que soit la longueur des liens).
   .site-header-inner empile les 2 lignes (logo, puis nav) avec
   "flex-direction: column" — plus besoin d'astuces de centrage en
   position absolue. Une ligne noire de 1px ferme l'en-tête en bas. Pas de
   marge latérale ici (contrairement à .headline-grille plus bas, qui
   garde ses 8%) : l'en-tête occupe toute la largeur.
   "position: relative" (et non plus "fixed", hérité par défaut de la règle
   générale .site-header-inner, valable pour le reste du site) : sur ces 7
   gabarits, l'en-tête défile normalement avec la page au lieu de rester
   collé en haut de l'écran — "relative" plutôt que "static" pour que le
   ::after ci-dessous (le liseret, position: absolute) continue à se
   positionner par rapport à ce bandeau plutôt que par rapport à toute la
   page. Exception : "Vrac de journaux" n'a de toute façon rien qui puisse
   faire défiler la page (voir .vrac-journaux-zone, "position: fixed"),
   donc cet en-tête reste visuellement immobile en haut de l'écran malgré
   "relative" — pas besoin de reprendre l'astuce "position: fixed" de
   "Pile de journaux" plus bas, propre à cette page-là. */
body.page-template-page-home-headline .site-header-inner,
body.page-template-page-home-headline-2 .site-header-inner,
body.single-projet .site-header-inner,
body.post-type-archive-projet .site-header-inner,
body.page-template-page-mission .site-header-inner,
body.page-template-page-pile-journaux .site-header-inner,
body.page-template-page-vrac-journaux .site-header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px; /* réduit depuis 10px, pour un en-tête un peu moins haut */
  height: auto;
  padding: 10px 0; /* réduit depuis 16px */
  background: #fff;
  position: relative;
}

/* Le liseret noir du bas ne fait que la largeur des 6 colonnes de la grille
   (.headline-grille plus bas, 8% de marge de chaque côté) — pas toute la
   largeur de l'en-tête. Un pseudo-élément plutôt qu'une vraie bordure : une
   bordure suivrait toute la largeur de .site-header-inner.

   Gardé uniquement sur l'accueil (les 2 gabarits "Headline") et sur les
   fiches projet individuelles ("Single projet") — demande explicite,
   retiré des 4 autres gabarits de ce groupe (archive des projets, Mission
   & Contact, Pile de journaux, Vrac de journaux), qui gardent le reste de
   l'en-tête "journal" (voir .site-header-inner juste au-dessus, toujours
   sur les 7 gabarits) mais plus ce trait de fermeture en bas. */
body.page-template-page-home-headline .site-header-inner::after,
body.page-template-page-home-headline-2 .site-header-inner::after,
body.single-projet .site-header-inner::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: #000;
  visibility: visible; /* déclaré explicitement : sans cette ligne, le trait
    restait invisible au test malgré des propriétés par ailleurs correctes —
    prudence plutôt qu'une vraie explication trouvée. */
}

/* Typo du menu (et du sous-titre, et de la date juste au-dessus du logo) :
   Archivo (Google Fonts), chargée sur ces 7 gabarits (voir naked_scripts()
   dans functions.php) — remplace "Playfair Display" utilisée par défaut
   par .site-header-inner .primary-menu (règle générale, tout le site). Taille
   et style (espacement des lettres, majuscules) unifiés avec
   .header-soustitre et .header-date ci-dessous — letter-spacing et
   text-transform sont hérités par les liens à l'intérieur (<a>), pas
   besoin de les répéter sur chaque lien. */
body.page-template-page-home-headline .primary-menu,
body.page-template-page-home-headline-2 .primary-menu,
body.single-projet .primary-menu,
body.post-type-archive-projet .primary-menu,
body.page-template-page-mission .primary-menu,
body.page-template-page-pile-journaux .primary-menu,
body.page-template-page-vrac-journaux .primary-menu {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 40px; /* remplace la marge à droite de chaque lien (.site-header-inner .primary-menu li), pas utile ici : les liens sont centrés, pas alignés à gauche */
  margin: 0;
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
}

body.page-template-page-home-headline .primary-menu li,
body.page-template-page-home-headline-2 .primary-menu li,
body.single-projet .primary-menu li,
body.post-type-archive-projet .primary-menu li,
body.page-template-page-mission .primary-menu li,
body.page-template-page-pile-journaux .primary-menu li,
body.page-template-page-vrac-journaux .primary-menu li {
  margin: 0;
  /* 07/09/2026 : "list-style: none" ajouté ici (et non plus seulement sur
     "header nav ul", voir plus haut) car ce même menu (.primary-menu) est
     désormais aussi réutilisé tel quel HORS du <header>, dans le nouveau
     footer des fiches projet (voir .site-footer-projet plus bas et
     footer.php) — sans ce reset, le <ul> générique du thème affiche des
     numéros (voir la règle "ul { list-style-type: decimal; }" plus haut). */
  list-style: none;
}

/* "À la une" ("July Loubeyre Portfolio" à l'origine, renommé — demande
   explicite du 04/09/2026, avec "Projets" -> "Archives" juste à côté dans
   le menu, voir header.php) : sous-titre du logo, entre les 2 liens du
   menu (voir header.php — un 3ᵉ <li>, entre les 2 vrais liens). Devenu
   lui-même cliquable le 07/09/2026 (demande explicite : "rendre le menu
   'a la une' cliquable qui renvoi a la home page") — pas de style
   particulier à ajouter pour autant : le reset global "a { color: #000;
   text-decoration: none; }" (voir plus haut dans ce fichier) donne déjà
   exactement le même rendu qu'avant, texte simple non souligné. Même
   taille et même style que le menu et la date (.header-date), unifiées —
   répétés ici (plutôt que de compter seulement sur l'héritage de
   .primary-menu ci-dessus) pour que le sous-titre garde ce style même si
   utilisé ailleurs un jour. */
.header-soustitre {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
}

/* Date du jour (ex. "Mercredi 2 Septembre 2026", voir
   naked_date_du_jour_fr() dans functions.php), au-dessus du logo — même
   taille et même style que le sous-titre et le menu, pour unifier les
   typos de tout l'en-tête. */
.header-date {
  margin: 0;
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
}

/* L'en-tête de 6 de ces 7 gabarits n'est plus fixe (voir .site-header-inner
   ci-dessus) : plus besoin de réserver de la place au-dessus du contenu
   pour compenser un bandeau collé en haut de l'écran. On annule seulement
   le padding-top: 40px du reste du site (voir body { padding-top: 40px; }
   tout en haut de ce fichier, pensé pour SON en-tête fixe à lui).
   "Pile de journaux" fait exception : son en-tête, lui, redevient fixe
   (voir plus bas, section "#Page Pile de journaux") — il garde donc besoin
   d'un padding-top, réglé séparément juste après cette règle plutôt qu'ici,
   à la hauteur réelle de son en-tête. "Vrac de journaux" n'en a par contre
   pas besoin (contrairement à "Pile de journaux") : rien sur cette page ne
   peut faire défiler la fenêtre (voir .vrac-journaux-zone, "position:
   fixed"), donc aucun padding compensatoire n'est nécessaire — regroupée
   ici avec les 5 autres plutôt qu'avec "Pile de journaux". */
body.page-template-page-home-headline,
body.page-template-page-home-headline-2,
body.single-projet,
body.post-type-archive-projet,
body.page-template-page-mission,
body.page-template-page-vrac-journaux {
  padding-top: 0;
}

/* Exception ci-dessus : en-tête fixe rétabli uniquement pour "Pile de
   journaux" (voir section "#Page Pile de journaux" plus bas pour le
   détail) — la page a donc de nouveau besoin d'une marge réservée en haut,
   à la hauteur totale de cet en-tête : 10px (voir "top: 10px" sur
   .site-header-inner plus bas, pour retomber à la même hauteur que sur la
   page d'accueil) + 173px (hauteur mesurée de l'en-tête lui-même) = 183px.
   Cette règle, plus spécifique (3 classes) que la règle générale juste
   au-dessus (2 classes), la remplace pour ce seul gabarit sans avoir
   besoin de la retirer de la liste ci-dessus. */
body.page-template-page-pile-journaux.page-template-page-pile-journaux {
  padding-top: 183px;
}

/* Bloc de la vedette (le projet le plus récent) : gros titre pleine
   largeur, puis une rangée à part de 6 colonnes (voir
   .headline-vedette-grille plus bas) — entièrement séparé de la grille
   des mini-articles ci-dessous (.headline-grille), qui commence donc
   toujours sur sa propre rangée, en dessous. Mêmes marges de 8% de chaque
   côté que l'en-tête et que .headline-grille. Le liseret noir en bas
   (border-bottom) sépare visuellement la vedette du contenu qui suit
   (.headline-grille ou .headline-recents) — comme .headline-vedette-bloc
   a déjà ces mêmes marges de 8%, ce trait fait naturellement la même
   largeur que celui du header (6 colonnes), sans avoir besoin du même
   procédé en ::after à cheval sur le conteneur. */
.headline-vedette-bloc {
  margin: 0 8%;
  padding-top: 20px;
  padding-bottom: 40px;
  border-bottom: 1px solid #000;
}

/* Gros titre de la vedette : sur toute la largeur — texte saisi dans le
   champ "Gros titre" de l'admin (voir naked_projet_gros_titre() dans
   functions.php), à défaut le titre normal du projet. */
.headline-titre-vedette-lien {
  display: block;
  color: inherit;
  text-decoration: none;
}


.headline-titre-vedette {
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif; /* demande explicite : tous les titres du site en Playfair Display */
  font-weight: 500; /* medium, demande explicite pour tous les titres */
  font-size: 44px; /* 07/09/2026 : 56px -> 44px, demande explicite ("font-size: 44px") */
  line-height: 1.05;
  margin: 0 0 24px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* La rangée de la vedette, juste sous son gros titre : 6 colonnes,
   réparties en 3 blocs de 2 colonnes chacun — à gauche le texte du
   Chapeau de sa fiche, au milieu son image, à droite son texte "Impact"
   suivi d'un lien "En savoir plus" (voir page-home-headline.php). */
.headline-vedette-grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 20px;
}

.headline-vedette-chapeau,
.headline-vedette-image,
.headline-vedette-impact {
  grid-column: span 2;
}

/* Le texte du Chapeau de la vedette (le mini-article mis en avant) prend
   le même style que le vrai titre "Chapeau" d'une fiche projet (voir h1,
   tout en haut de ce fichier, et .projet-grille-chapeau) — Playfair
   Display 24px, sans gras, avec sa lettrine (voir plus haut) — plutôt que
   le style "paragraphe de journal", plus petit et justifié, de
   .headline-chapeau utilisé ailleurs sur cette page (mini-articles, texte
   "Impact" de la vedette). Sélecteur plus spécifique que .headline-chapeau
   seul, pour ne changer que cet emplacement précis sans toucher aux
   autres. Reste volontairement en graisse 400/regular : ce n'est pas un
   "titre" au sens de la demande (medium 500), c'est un paragraphe stylé
   pour ressembler à un titre. */
.headline-vedette-chapeau .headline-chapeau {
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.1;
  text-align: left;
}

.headline-vedette-image {
  display: block;
}

/* "En savoir plus" : lien vers la fiche du projet, sous le texte de la
   vedette qui l'accompagne dans les 2 dernières colonnes — le texte
   "Impact"/"Client" (h3) sur la page "Headline" classique
   (page-home-headline.php), le 1er paragraphe "sans style" (voir
   .headline-vedette-texte-h2 juste en dessous) sur "Headline 2" depuis le
   04/09/2026. Même traitement typographique (majuscules, espacement des
   lettres) que les liens du menu et la date, pour rester cohérent avec le
   reste de l'en-tête "journal" de la page. */
.headline-en-savoir-plus {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #000;
}

/* Le 1er paragraphe "sans style" (un bloc Paragraphe ordinaire — pas un
   titre) affiché dans les 2 dernières colonnes de la vedette de
   "Headline 2" (page-home-headline-2.php), à la place de l'ancien texte
   "Impact"/"Client" (h3), lui-même remplacé un temps par le texte "Texte"
   (h2) — demande explicite du 04/09/2026 ("afficher le texte qui n'a pas
   de style plutôt que le texte H2"). Nom de la classe inchangé depuis
   l'essai précédent (h2), purement interne, sans lien avec le contenu
   affiché aujourd'hui. Style volontairement basique ("un style basique
   15px helvetica font weight normal") : pas de classe partagée avec
   .headline-chapeau (utilisée ailleurs sur cette page avec un tout autre
   style, justifié et 14px) — une classe dédiée pour ne pas toucher aux
   autres emplacements. */
.headline-vedette-texte-h2 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
}

/* #Page Headline 2 : les 5 projets les plus récents (après la vedette),
   sous la vedette (voir page-home-headline-2.php) — remplace, demande
   explicite, un essai précédent avec un "mur" de texte Lorem Ipsum
   (titres disséminés dedans, voir naked_mur_lorem_avec_titres() dans
   functions.php, encore présente mais plus appelée). Reprend le principe
   de .headline-grille ci-dessous (grille de 6 colonnes, mêmes marges de
   8%), mais recadré : chaque case occupe 2 des 6 colonnes plutôt qu'1
   seule, donc 3 projets par rangée au lieu de 6 — avec seulement 5
   projets à afficher, la grille se termine sur une 2ᵉ rangée à 2 cases,
   ce qui est attendu (pas besoin de forcer une 3ᵉ case vide). */
.headline-recents {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 20px;
  margin: 0 8%;
  padding-top: 40px;
}

/* Chaque carte occupe 2 des 6 colonnes (voir .headline-recents plus haut).
   Ce n'est plus un <a> unique enveloppant toute la carte (contrairement à
   .headline-article ci-dessous, réutilisé par la grille de la page
   "Headline" classique) : le titre est son propre lien
   (.headline-recent-titre-lien) et un lien "Lire la suite" est ajouté à
   part en bas de carte (.headline-en-savoir-plus, voir plus haut, même
   style que sous le texte "Impact" de la vedette) — un <a> ne peut pas en
   contenir un autre, d'où les 2 liens séparés plutôt qu'un seul comme sur
   .headline-article. */
.headline-recent-article {
  grid-column: span 2;
  /* 07/09/2026 : "rajoute une marge de 100px sous les articles sur la
     home" — demande explicite. S'ajoute au "gap" de 40px déjà présent
     entre les rangées de .headline-recents (voir plus haut) : chaque
     article prend donc 140px d'écart avec le suivant, y compris le
     dernier avant le bas de la page. */
  margin-bottom: 100px;
}

.headline-recent-titre-lien {
  display: block;
  color: inherit;
  text-decoration: none;
}


/* Grille de 6 colonnes égales, pour tous les mini-articles à l'exception
   de la vedette (voir .headline-vedette-bloc ci-dessus, à part) — 1
   projet par colonne, dans un ordre différent à chaque chargement de la
   page. Mêmes marges de 8% de chaque côté que l'en-tête. */
.headline-grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 20px;
  margin: 0 8%;
  padding-top: 40px;
}

.headline-article {
  display: block;
  color: inherit;
  text-decoration: none;
}


/* Le titre "ressort" par la typo "Playfair Display" (la même que les
   autres titres du site, demande explicite — remplace "PP Eiko" à
   l'origine, puis "Instrument Serif"), en graisse 500/medium comme tous
   les titres — jamais de vrai gras (600 à 900) : contrairement à
   "Instrument Serif" (qui n'existait qu'en 400 chez Google Fonts),
   "Playfair Display" a bien une vraie graisse grasse, mais elle n'est ni
   chargée (voir naked_scripts() dans functions.php, seuls 400 et 500 sont
   chargés) ni utilisée ici. */
.headline-titre {
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif;
  font-weight: 500; /* medium, demande explicite pour tous les titres */
  font-size: 24pt; /* demande explicite — remplace 16px ; s'applique aussi à la grille "Headline" classique (page-home-headline.php), qui réutilise la même classe */
  line-height: 1.05; /* réduit depuis 1.3, demande explicite */
  margin: 0 0 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Texte du "Chapeau" du projet (le premier titre H1 de sa fiche, voir
   naked_projet_repartir_contenu() dans functions.php) plutôt qu'un extrait
   à écrire à part — affiché ici comme un paragraphe de texte courant
   (justifié à gauche et à droite), pas comme un titre. Réutilisé tel quel
   pour le Chapeau et l'Impact de la vedette (même style, voir
   page-home-headline.php). */
.headline-chapeau {
  font-size: 14px;
  line-height: 1.2; /* réduit depuis 1.4, demande explicite */
  margin: 0 0 12px;
  text-align: justify;
}

/* .headline-image est tantôt un <div> (mini-articles de la grille
   classique, page-home-headline.php), tantôt un <a> cliquable (image de
   la vedette, et désormais aussi de chaque carte de .headline-recents —
   voir page-home-headline-2.php, demande explicite) — "display: block"
   ici assure que l'image se comporte pareil dans tous les cas (un <a> est
   en ligne par défaut). */
.headline-image {
  display: block;
}

.headline-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
}

/* Toutes les images de la page d'accueil en noir et blanc — demande
   explicite du 04/09/2026. "body.home" (classe ajoutée par WordPress
   uniquement sur la page réglée comme page d'accueil, voir Réglages >
   Lecture) plutôt qu'un des 2 gabarits "Headline" en particulier : le
   changement suit la page d'accueil, quel que soit le gabarit choisi pour
   elle (voir page-home-headline.php et page-home-headline-2.php, tous 2
   utilisent ".headline-image" pour leurs images — vedette et grille). */
body.home .headline-image img {
  filter: grayscale( 100% );
  transition: filter 0.35s ease; /* pour le passage en couleur au survol, voir juste plus bas */
}

/* ...sauf la toute 1re, celle du mini article "vedette" tout en haut de la
   page (.headline-vedette-image, voir plus haut) — reste en couleur,
   demande explicite du 04/09/2026. Plus précis que la règle juste au-dessus
   (une classe de plus : .headline-vedette-image en plus de .headline-image)
   donc l'emporte sans "!important". */
body.home .headline-vedette-image .headline-image img {
  filter: none;
}

/* Au survol d'une image en noir et blanc (donc pas la vedette, déjà en
   couleur), elle repasse en couleur — demande explicite du 04/09/2026.
   ".headline-image" est le lien/bloc cliquable qui contient l'image (voir
   plus haut) : le survol de tout son bloc déclenche l'effet, pas seulement
   l'image elle-même au pixel près. Autant de classes que la règle "noir et
   blanc" ci-dessus plus ":hover" : l'emporte sans "!important". Même durée
   de transition (0.35s) que les autres effets de survol du site (voir
   js/vrac-preview.js, js/archive-preview.js...). */
body.home .headline-image:hover img {
  filter: none;
}

/* Bouton "Menu" du menu déroulant mobile (voir header.php et la section
   tout en bas de ce fichier, "#Surcharges mobile") : caché sur ordinateur,
   affiché uniquement sur mobile. Un seul endroit pour cette règle (pas
   besoin de la répéter en bas) : contrairement aux règles ci-dessous, il
   n'existe qu'une seule déclaration de ".menu-mobile-toggle" ailleurs dans
   ce fichier (aucune), donc pas de risque de conflit d'ordre/spécificité. */
.menu-mobile-toggle {
  display: none;
}

/* "À la une" ("July Loubeyre Portfolio" à l'origine, renommé le
   04/09/2026) affiché à la place de la date, uniquement sur mobile (voir
   header.php et la section "#Surcharges mobile" plus bas, qui l'affiche).
   Masqué par défaut sur ordinateur, où la date suffit — un
   seul endroit pour cette règle par défaut, comme ".menu-mobile-toggle"
   juste au-dessus : aucune autre déclaration de
   ".header-portfolio-mobile" ailleurs dans ce fichier avant la section
   mobile, donc pas de conflit d'ordre/spécificité à gérer ici. */
.header-portfolio-mobile {
  display: none;
}

/* #Surcharges mobile (regroupées en fin de fichier, volontairement)
================================================== */
/* Ces règles pourraient sembler mieux à leur place à côté de ce qu'elles
   modifient (la vedette, les marges à 8%, le menu...), mais chacune d'elle
   cible un sélecteur qui existe DÉJÀ ailleurs dans ce fichier avec
   exactement la même spécificité CSS (ex. ".headline-grille" contre
   ".headline-grille", ou la même liste de 6 gabarits "body.page-template-
   ... .primary-menu" contre elle-même). Dans ce cas de spécificité égale,
   la règle qui l'emporte est celle déclarée LE PLUS BAS dans le fichier —
   peu importe qu'elle soit dans un @media ou pas, et peu importe l'ordre
   "logique" des sections. En les regroupant ici, tout en bas, on garantit
   qu'elles gagnent à coup sûr, sans avoir à gonfler artificiellement leur
   spécificité (comme fait plus haut pour l'en-tête fixe de la page Pile,
   avec le sélecteur doublé "body.page-template-page-pile-journaux.page-
   template-page-pile-journaux") — solution plus simple à lire une fois
   qu'on sait pourquoi cette section existe. Un bug de ce type exact (en-
   tête de la page Pile jamais vraiment fixe malgré la bonne règle) a déjà
   été trouvé et corrigé plus haut dans ce fichier — cette section est la
   manière d'éviter qu'il ne se reproduise à chaque nouvelle surcharge
   mobile. */
@media (max-width: 600px) {

  /* Vedette de l'accueil (.headline-vedette-grille plus haut) : sur
     ordinateur, 3 blocs (Chapeau / image / Impact) côte à côte sur 6
     colonnes, 2 colonnes chacun — repris tel quel sur mobile lors d'un
     premier essai (2 colonnes au lieu de 6), mais le système de colonnes
     restait illisible une fois écrasé sur un écran de téléphone (demande
     explicite : une présentation différente, pas juste moins de
     colonnes). Nouvelle disposition : plus de grille du tout, un simple
     empilement vertical ("display: flex; flex-direction: column") — image
     d'abord (pleine largeur, "order: -1" la fait passer avant le Chapeau
     sans toucher à l'ordre du HTML), puis le Chapeau, puis l'Impact, l'un
     sous l'autre, chacun en pleine largeur et donc bien plus lisible. */
  .headline-vedette-grille {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .headline-vedette-chapeau,
  .headline-vedette-image,
  .headline-vedette-impact {
    grid-column: auto; /* neutralise le "span 2" hérité de la règle ordinateur — plus de grille ici, "grid-column" n'a plus d'effet mais autant l'annuler proprement */
    width: 100%;
  }

  .headline-vedette-image {
    order: -1;
  }

  /* Titre de la vedette (le mini-article mis en avant en haut de la page
     d'accueil) réduit sur mobile — demande explicite, en 2 temps : 42pt
     de base (~56px, voir .headline-titre-vedette plus haut, qui reste
     inchangée sur ordinateur) → 40pt → 36pt. */
  .headline-titre-vedette {
    font-size: 36pt;
  }

  /* Marges latérales : 8px fixes sur mobile plutôt que 8% (qui reste très
     large en valeur absolue sur un petit écran) — demande explicite,
     appliquée partout où le reste du site utilise ces 8% (en-tête, vedette,
     grille des mini-articles, mur Lorem Ipsum, fiche projet, archive des
     projets, page Mission). Chaque sélecteur ci-dessous reprend exactement
     le même texte que la règle qu'il remplace (voir plus haut dans ce
     fichier) — même spécificité, donc c'est bien la position en bas de
     fichier qui tranche en sa faveur (voir le commentaire de section
     ci-dessus). */
  body.page-template-page-home-headline .site-header-inner::after,
  body.page-template-page-home-headline-2 .site-header-inner::after,
  body.single-projet .site-header-inner::after {
    left: 8px;
    right: 8px;
  }

  .headline-vedette-bloc {
    margin: 0 8px;
  }

  /* .bandeau-defilant aligné sur .headline-vedette-bloc juste au-dessus
     (voir le commentaire complet plus haut, section "#Bandeau défilant") :
     même équivalent mobile "8px" que son "8%" en desktop — "left/right"
     ici aussi (voir plus haut pour le pourquoi), pas "padding". */
  .bandeau-defilant {
    left: 8px;
    right: 8px;
  }

  .headline-grille {
    margin: 0 8px;
  }

  /* Bas de la page d'accueil "Headline 2" (.headline-recents, les
     mini-articles après la vedette) sur mobile — demande explicite : sur
     2 colonnes plutôt que 3 cases resserrées héritées d'ordinateur (voir
     .headline-recents plus haut, grille à 6 colonnes, chaque carte sur 2
     — sans cette section, une carte sur 3 colonnes de 6 restait bien trop
     étroite sur un écran de téléphone), présentées "en masonry" (chaque
     carte prend la hauteur de son propre contenu, pas de case vide en
     dessous d'une carte plus courte que sa voisine) plutôt qu'en grille
     classique où toutes les cartes d'une même rangée doivent partager la
     même hauteur.
     "column-count: 2" (mise en page multi-colonnes, native CSS) plutôt que
     "display: grid" : une grille caserait chaque carte dans une case de
     hauteur fixée par la rangée (donc autant de hauteur perdue qu'avec
     .headline-recents sur ordinateur) ; les colonnes CSS répartissent au
     contraire les cartes en respectant leur propre hauteur, en comblant
     au mieux chaque colonne — l'effet "masonry" demandé, sans JavaScript.
     "break-inside: avoid" sur chaque carte (voir plus bas) : empêche une
     carte d'être coupée en 2 par un changement de colonne au milieu de
     son texte. */
  .headline-recents {
    display: block;
    column-count: 2;
    column-gap: 16px;
    margin: 0 8px;
  }

  .headline-recent-article {
    break-inside: avoid;
    margin-bottom: 24px;
  }

  /* Titre et lettrine plus petits sur ces cartes, demande explicite — ne
     touche qu'aux cartes de .headline-recents (bas de page), pas au
     titre de la vedette juste au-dessus (.headline-titre-vedette, qui a
     sa PROPRE règle mobile séparée, voir plus haut — pas cette
     réduction-ci) ni à .headline-titre tel qu'utilisé par l'ancienne page
     "Headline" classique (.headline-grille, plus la page d'accueil en
     ligne actuellement, mais toujours sélectionnable dans Réglages →
     Lecture — pas concernée par cette demande). */
  .headline-recent-article .headline-titre {
    font-size: 15pt;
  }

  .headline-recent-article .headline-chapeau::first-letter {
    font-size: 1.6em;
  }

  /* Images retirées de ces cartes sur mobile — demande explicite. Reste
     affichées sur ordinateur (voir .headline-image plus haut) et pour la
     vedette, sur mobile comme ordinateur (.headline-vedette-image, pas
     concernée). */
  .headline-recent-article .headline-image {
    display: none;
  }

  .projet-detail {
    margin: 0 8px;
  }

  .projets-masonry {
    margin: 0 8px;
    /* Le "gap" agrandi entre les piles (48px, voir plus haut) est pensé
       pour ordinateur — sur un écran de téléphone, il grignoterait trop de
       largeur utile pour 3 piles côte à côte. Repris ici à une valeur plus
       modeste, comme la marge juste au-dessus. */
    gap: 16px;
  }

  /* N'est plus utilisé : la page Mission est passée au modèle "3SEPT",
     enveloppé dans .projet-detail — sa marge mobile (.projet-detail
     { margin: 0 8px; } juste au-dessus) s'applique déjà à elle aussi,
     rien à ajouter ici. Laissé en place tel quel. */
  body.page-template-page-mission .projet-detail-structure {
    margin-left: 8px;
    margin-right: 8px;
  }

  /* Sur mobile, la date du jour (.header-date) est remplacée par "July
     Loubeyre Portfolio" (.header-portfolio-mobile, un 2ᵉ <p> qui cumule la
     classe ".header-date" pour garder la même taille/police — voir
     header.php) — demande explicite. Le sous-titre affiché dans le menu
     déroulant (.header-soustitre, le 3ᵉ <li> entre les 2 liens) est masqué
     en même temps, pour éviter de le voir deux fois (une fois ici,
     toujours visible, une fois dans le menu une fois déplié).
     ".header-date.header-portfolio-mobile" (2 classes) est plus spécifique
     que ".header-portfolio-mobile" seule (1 classe, la règle par défaut
     qui la masque sur ordinateur, voir plus haut) : l'affichage l'emporte
     ici sans dépendre de l'ordre dans le fichier. */
  .header-date {
    display: none;
  }

  .header-date.header-portfolio-mobile {
    display: block;
  }

  /* ".primary-menu li.header-soustitre" (2 classes + 1 sélecteur de type,
     testé en direct sur le site) plutôt que ".header-soustitre" seule (1
     classe) : la règle générale ".site-header-inner .primary-menu li"
     (2 classes, voir plus haut) qui affiche chaque <li> du menu en
     "inline-block" a une spécificité plus élevée qu'une simple classe
     seule — ".header-soustitre" toute seule perdait donc face à elle,
     malgré sa position en fin de fichier (même piège de spécificité que
     ".primary-menu.is-open" plus bas, déjà rencontré et corrigé). Avec le
     sélecteur de type "li" en plus, cette règle dépasse clairement la
     spécificité de la règle à masquer, sans dépendre de l'ordre. */
  .primary-menu li.header-soustitre {
    display: none;
  }

  /* Menu déroulant mobile (voir header.php, .menu-mobile-toggle plus haut,
     js/menu-mobile.js) : le menu (liens + sous-titre) est replié par
     défaut derrière le bouton "Menu", centré — au lieu de s'écraser sur
     plusieurs lignes comme avant. Mêmes 7 sélecteurs que la règle
     ordinateur de .primary-menu qu'elle remplace (voir plus haut). */
  .menu-mobile-toggle {
    display: block;
    margin: 0 auto;
    padding: 6px 0; /* plus de contour (voir "border" retiré ci-dessous, demande explicite) : juste le mot "Menu", un peu d'air en haut/bas pour la zone cliquable, mais rien sur les côtés puisqu'il n'y a plus de cadre à respirer dedans */
    background: none;
    border: 0;
    font-family: 'Archivo', Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
  }

  body.page-template-page-home-headline .primary-menu,
  body.page-template-page-home-headline-2 .primary-menu,
  body.single-projet .primary-menu,
  body.post-type-archive-projet .primary-menu,
  body.page-template-page-mission .primary-menu,
  body.page-template-page-pile-journaux .primary-menu,
  body.page-template-page-vrac-journaux .primary-menu {
    display: none; /* replié par défaut — voir .is-open ci-dessous, ajoutée/retirée par js/menu-mobile.js au clic sur le bouton */
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    width: 100%;
  }

  /* Correction : ".primary-menu.is-open" seul (2 classes, aucun sélecteur
     de type) a en réalité une spécificité PLUS FAIBLE que les 7 sélecteurs
     "body.page-template-... .primary-menu" ci-dessus (qui comptent en plus
     l'élément "body") — testé en direct dans le navigateur : le clic sur
     "Menu" fonctionnait bien en JavaScript (la classe "is-open" était
     bien ajoutée), mais "display: none" continuait à gagner, donc rien ne
     s'affichait. Repris ici avec "body" + les 7 gabarits + ".is-open", qui
     dépasse clairement la spécificité de la règle à masquer, sans dépendre
     de l'ordre des règles dans le fichier. */
  body.page-template-page-home-headline .primary-menu.is-open,
  body.page-template-page-home-headline-2 .primary-menu.is-open,
  body.single-projet .primary-menu.is-open,
  body.post-type-archive-projet .primary-menu.is-open,
  body.page-template-page-mission .primary-menu.is-open,
  body.page-template-page-pile-journaux .primary-menu.is-open,
  body.page-template-page-vrac-journaux .primary-menu.is-open {
    display: flex;
  }

  /* Ancienne fiche projet, format "Grille éditoriale" (.projet-detail-grille
     et compagnie, voir plus haut) — n'est PLUS utilisé par single-projet.php
     (remplacé par le modèle "3SEPT", voir .projet-3sept-* juste en dessous),
     laissé en place tel quel. Sur ordinateur, une grille à 2 niveaux — le
     Chapeau dans 1 colonne à gauche, le texte + les médias dans une grille
     imbriquée de 5 colonnes à droite. Sur mobile, tout repasse en 1 seule
     colonne : le Chapeau, puis le texte, puis chaque média, les uns sous
     les autres, dans l'ordre où ils sont déjà dans la page. Chaque
     sélecteur reprend le texte exact de la règle ordinateur qu'il remplace
     (voir "Grille éditoriale" plus haut) — même principe que le reste de
     cette section. */
  .projet-detail-grille {
    grid-template-columns: 1fr;
  }

  .projet-grille-chapeau {
    grid-column: 1;
    grid-row: auto;
  }

  .projet-grille-contenu {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: 1fr;
  }

  .projet-grille-texte {
    grid-column: 1;
    column-count: 1; /* 1 seule colonne de texte, au lieu de 2 côte à côte */
  }

  .projet-grille-media {
    grid-column: 1;
  }

  /* "media-large"/"media-xlarge" (ancien système) et "colonne-2"/"colonne-3"
     (menu déroulant "Largeur", voir plus haut) élargissent la case sur
     ordinateur — sur mobile, tout est déjà en pleine largeur (1 colonne),
     donc ces variantes n'ont plus besoin d'un traitement particulier :
     "grid-column: 1" leur suffit, comme n'importe quel autre média. */
  .projet-grille-media:has(.media-large),
  .projet-grille-media:has(.media-xlarge),
  .projet-grille-media:has(.colonne-1),
  .projet-grille-media:has(.colonne-2),
  .projet-grille-media:has(.colonne-3) {
    grid-column: 1;
  }

  /* Fiche projet, modèle "3SEPT" (voir .projet-3sept-* plus haut) — sur
     mobile, tout repasse en 1 seule colonne, comme partout ailleurs sur le
     site : le Chapeau, puis le texte courant, puis l'Impact, puis chaque
     média, les uns sous les autres, dans l'ordre où ils sont déjà dans la
     page. */
  .projet-3sept-grille {
    flex-direction: column;
  }

  .projet-3sept-texte-bas {
    grid-template-columns: 1fr;
  }

  /* Image clé (voir .projet-image-cle-mobile plus haut, et
     single-projet.php) : réaffichée uniquement ici, sur mobile — même
     "margin-top: 40px" que .projet-3sept-texte-bas juste au-dessus, pour
     garder le même rythme d'espacement entre le Chapeau, l'image et la
     suite du texte. */
  .projet-image-cle-mobile {
    display: block;
    margin-top: 40px;
  }

  .projet-3sept-media {
    grid-template-columns: 1fr;
  }

  /* Sur mobile, la grille des médias n'a plus qu'1 colonne (juste
     au-dessus) : la classe "colonne-2"/"colonne-3" (voir plus haut, menu
     "Largeur (grille projet)") n'a alors plus de sens — revient à "span 1"
     comme n'importe quelle autre case, même principe que l'ancienne
     "Grille éditoriale" plus haut dans cette section. */
  .projet-3sept-media-case {
    grid-column: 1;
  }

}

/* #Formulaire de contact (page Mission & Contact)
================================================== */
/* Demande explicite du 07/09/2026 : "j'aimerais que tu implantes un
   formulaire de contact pour envoyer un mail a july" — voir
   naked_afficher_formulaire_contact() dans functions.php pour le balisage,
   et page-mission.php pour son emplacement (sous la grille "3SEPT",
   hérite donc déjà de la marge de 8% de .projet-detail, pas besoin de la
   répéter ici). Esthétique volontairement alignée sur le reste du site :
   noir sur blanc, pas d'arrondi (comme .naked-slideshow-fleche, les
   boutons du carrousel...), Playfair Display pour le titre "Contact"
   (comme tous les titres du site), Helvetica pour le formulaire lui-même
   (comme le corps de texte courant). */
.naked-contact {
  /* margin-top, padding-top et border-top (liseré) retirés le 07/09/2026 —
     demandes explicites successives : "enleve le margin top de
     .naked-contact", puis "le liseret tu peux lenlever ainsi que le
     padding". Le formulaire s'enchaîne donc directement à la suite du
     reste du contenu de la page, sans séparation visuelle. */
  max-width: 480px;
}

.naked-contact-titre {
  margin: 0 0 20px;
  color: #000;
  font-family: 'Playfair Display', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 24pt;
}

/* Message de confirmation/d'erreur après un envoi (voir "?contact=ok" ou
   "erreur" dans l'URL, ajouté par naked_traiter_formulaire_contact()) —
   même principe de couleur que les liens du texte courant/impact
   (.projet-3sept-texte-courant a : #2e3786) pour le message de succès,
   plutôt qu'un vert/rouge "feu de signalisation" hors de la charte
   graphique noir/blanc du site. */
.naked-contact-message {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid #000;
  font-size: 15px;
}

.naked-contact-message-ok {
  color: #2e3786;
  border-color: #2e3786;
}

.naked-contact-message-erreur a {
  color: inherit;
  text-decoration: underline;
}

.naked-contact-champ {
  margin-bottom: 20px;
}

.naked-contact-champ label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.naked-contact-champ input,
.naked-contact-champ textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  box-sizing: border-box; /* le "border-box" est explicite ici (le thème n'en a pas par défaut, voir plus haut dans ce fichier) : sans ça, la bordure de 1px + le padding de 10-12px s'ajouteraient au "width: 100%" et feraient légèrement déborder le champ de .naked-contact. */
}

.naked-contact-champ textarea {
  resize: vertical;
}

/* Honeypot anti-spam (voir le commentaire complet dans
   naked_afficher_formulaire_contact(), functions.php) — repoussé hors de
   l'écran plutôt que "display: none"/"visibility: hidden" : certains
   robots de spam ignorent déjà les champs cachés de cette façon-là,
   repérer un champ juste "hors champ visuel" est plus difficile pour eux
   à détecter automatiquement, tout en restant invisible pour un vrai
   visiteur. */
.naked-contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.naked-contact-bouton {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid #000;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.naked-contact-bouton:hover {
  background: #fff;
  color: #000;
}