/* =========================================================
   PASCAL VINCENT — page d'accueil
   Maquette de travail. Aucune donnée réelle : les contenus
   affichés servent à juger la mise en page et les rythmes.
   ========================================================= */

:root{
  --encre:#161814;          /* le noir des textes, très légèrement vert */
  --doux:#3c423c;           /* gris de lecture, réchauffé de vert */
  --tres-doux:#4a524b;      /* mentions discrètes — assombri d’un ton
                               le 25 août 2026, quand le mur a foncé : sur
                               l’ancien vert il donnait 2,8:1, illisible. */

  /* L'orange du néon. Deux valeurs, et deux seulement : la claire ne se lit
     pas sur fond pâle, la foncée s'éteint sur fond noir. C'est la même
     couleur, à deux luminosités. */
  --or:#623509;             /* sur fond clair — assombri deux fois avec le mur.
                               Sur le vert réchauffé il donne 4,7:1 ; à #67390a
                               il retombait à 4,4, sous le seuil. */
  --or-clair:#f5a623;       /* sur fond sombre */

  --ligne:#a8b5ab;
  --filet:#b84208;      /* le filet qui se déroule, sur fond clair */          /* filets */
  /* Le vert du mur, choisi par Pascal le 25 août 2026 sur un échantillon.
     L’ancien, #bfcac1, était un vert-gris délavé : les cartes blanches y
     flottaient (contraste carte/mur 1,37:1). Celui-ci le porte à 1,72:1 —
     elles sont posées sur quelque chose. Ce n’est pas qu’un assombrissement :
     c’est le bleu qui chute le plus (−39 contre −22 sur le rouge), et c’est
     ce qui le rend vert plutôt que gris.

     Réchauffé le 25 août sur un second échantillon : #a9b79a → #acb088. La
     teinte passe de 89° à 66°, le vert prend du jaune — le même mur, au soleil
     de fin d’après-midi. La valeur est mesurée sur l’échantillon de Pascal, et
     non lue à l’œil : #abb28a avait d’abord été déployé d’après une estimation,
     à trois points près sur 255. Une troisième nuance a été essayée, plus grise et plus
     kaki (#a1a384) : écartée, elle faisait tomber le gris de lecture à 4,0:1,
     sous le seuil, et le site y perdait son identité verte.

     Pour revenir en arrière : #bfcac1, #5f6760, #82480e (l’original), ou
     #a9b79a, #4a524b, #67390a (l’étape du 25 août au matin). */
  --papier:#acb088;         /* le mur */
  --blanc:#e4e9e3;          /* les cartes, un ton au-dessus du mur */
  --largeur:1120px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Newsreader',Georgia,serif;
  background:var(--papier);
  color:var(--encre);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.large{max-width:var(--largeur);margin:0 auto;padding:0 26px;}

/* Les rubriques de l'accueil n'avaient aucune marge entre elles : les cartes
   se touchaient, et deux sections portaient un margin-top écrit à la main
   dans le HTML. Une règle unique tient le rythme de la page. */
/* Le rythme de l'accueil.

   Deux pièges se sont succédé ici. D'abord la spécificité : les sections
   portent la classe .large, qui pose margin:0 auto — il faut être au moins
   aussi précis qu'elle. Ensuite les emplacements : depuis qu'un <div> peut se
   glisser entre deux sections, « section + section » ne se rencontre presque
   plus. Il faut nommer les trois voisinages possibles, sinon la marge saute —
   c'est ce qui collait les Archives à l'anecdote, et quatre autres endroits. */
main > section.large + section.large,
main > .emplacement + section.large,
main > section.large + .emplacement{margin-top:clamp(38px,5.2vw,64px);}

/* ---------- l'éclair, motif récurrent ---------- */
.eclair{width:.62em;height:1.15em;fill:url(#degrade-eclair);flex:none;}

/* ---------- barre de navigation ---------- */
.barre{
  position:sticky;top:0;z-index:60;
  /* Une bande franche posée sur le mur, plutôt qu'un voile translucide qui
     n'était ni le mur ni un objet. Le noir est déjà la ponctuation du site :
     la barre en fait partie au lieu de flotter au-dessus. */
  background:#191c17;
}
.barre .large{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px;}
.marque{display:flex;align-items:center;gap:12px;flex:none;}
/* L'enseigne au néon dans la barre : 42 px le 9 septembre 2026, portée à 52
   à la demande de Pascal — c'est la seule image de la barre et elle était
   timide. Au-delà d'environ 54 px (bordure comprise) elle touche les bords
   d'une barre haute de 64 : il faudrait alors épaissir la barre elle-même. */
.marque img{width:52px;border:2px solid rgba(243,239,228,.30);}
.marque span{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;font-size:12.5px;color:#f3efe4;
}
.menu{display:flex;gap:20px;font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.09em;font-size:11px;color:#a8b0a4;
  /* Dix entrées dont une longue : plutôt que de laisser la barre s'épaissir
     ou couper un libellé en deux, on la fait défiler sur le côté. Chaque
     entrée reste entière. */
  /* Aligné à droite, mais s'il déborde c'est vers la droite qu'il part —
     jamais vers la gauche, où le début du menu deviendrait inatteignable. */
  overflow-x:auto;scrollbar-width:none;margin-left:auto;min-width:0;}
.menu::-webkit-scrollbar{display:none;}
.menu a{position:relative;padding:4px 0;transition:color .2s ease;white-space:nowrap;}
.menu a:hover{color:#f3efe4;}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--or-clair);transition:right .25s ease;
}
.menu a:hover::after{right:0;}
.burger{display:none;background:none;border:none;cursor:pointer;font-size:20px;color:#f3efe4;}

/* ---------- entrée ---------- */
.entree{padding:58px 0 46px;text-align:center;}
.plaque{
  display:inline-block;border:4px solid var(--encre);margin-bottom:28px;
  box-shadow:0 18px 38px -18px rgba(0,0,0,.5);
}
/* Sur un grand écran il y a de la place : le logo peut occuper l'espace qu'il
   mérite. Sur un téléphone il reste à sa taille, sinon il mangerait la page. */
.plaque img{width:100%;max-width:clamp(300px,32vw,430px);display:block;}
.signature{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,6.6vw,76px);line-height:.95;letter-spacing:-.015em;
}
.metiers{
  margin-top:22px;font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:11.5px;color:var(--doux);
}
.metiers b{color:var(--encre);font-weight:500;}
/* La taille et la couleur sont fixées plus bas, avec la fonte : il n'y a
   qu'une seule règle qui décide, et c'est celle-là. Ici, l'écart au-dessus. */
.accroche{margin-top:14px;}

/* ---------- titres de section ---------- */
.chapeau{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--ligne);padding-bottom:12px;margin-bottom:20px;
}
.chapeau h2{
  /* Un nom de rubrique n'est pas une étiquette de service : c'est un titre.
     Il était à 12 px, en gris, quand celui du murmure en fait 34 — le site
     n'avait pas deux niveaux de titre, il en avait deux qui s'ignoraient.
     Tous les noms de rubrique parlent maintenant de la même voix. */
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-weight:700;font-size:clamp(23px,2.9vw,36px);line-height:1.05;
  color:var(--encre);display:flex;align-items:center;gap:12px;
}
/* 36 px et non 30. Un nom de rubrique coiffait des titres d'article de 31 et
   33 px : il était donc plus petit que ce qu'il annonce, et l'échelle marchait
   à l'envers. L'échelle est maintenant droite — 13,5 la capsule, 31/33 le titre
   d'un article, 36 le nom de la rubrique, 40 « Comédien, auteur… », 76
   l'enseigne. La correction n'est pas venue d'un manque de taille mais d'un
   défaut d'ordre : on ne règle pas un titre tout seul, on le règle contre ses
   voisins. */
.chapeau h2 .eclair{width:16px;height:29px;flex:none;}
.chapeau a{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:11px;color:var(--or);white-space:nowrap;
}
.chapeau a:hover{text-decoration:underline;text-underline-offset:3px;}

/* Phrase qui présente une rubrique, sous son titre */
/* Le chapeau d'une rubrique — « Les projets tout chauds du moment ». Il était
   à 14,5 px quand le texte courant est à 15,5 : plus petit ET plus gris que ce
   qu'il annonce, donc invisible deux fois. Un chapeau se lit AVANT le corps du
   texte, il doit donc être un peu plus grand, jamais plus gras : le gras
   viendrait concurrencer le titre juste au-dessus, qui fait 36 px. */
.intro-section{
  font-size:17px;line-height:1.5;color:var(--doux);margin:-2px 0 22px;max-width:640px;
}

/* Dans la fiche « Quoi de neuf ? » : ce qui mijote, en retrait du projet en cours */
.mijote{
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);
  font-style:italic;
}

/* ---------- fiches ---------- */
.duo{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;}
/* Plus aucune fiche à montrer : la grille ne doit pas laisser un blanc. */
.trio:empty{display:none;}
.fiche{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:11px;
  padding:24px;display:flex;flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.fiche:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(0,0,0,.35);}
.etiquette{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.15em;
  font-size:10px;color:var(--or);margin-bottom:10px;
}
.fiche h3{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:22px;line-height:1.14;margin-bottom:10px;
}
.trio .fiche h3{font-size:17px;}
.fiche p{font-size:13.5px;color:var(--doux);line-height:1.65;}
.fiche .date{margin-top:14px;font-size:11px;color:var(--tres-doux);
  font-family:'Oswald',sans-serif;letter-spacing:.1em;text-transform:uppercase;}

.fiche.sombre{background:var(--encre);border-color:var(--encre);}
.fiche.sombre h3{color:#f4f2ee;}
.fiche.sombre p{color:#a49e93;}
.fiche.sombre .etiquette{color:var(--or-clair);}
.fiche.sombre .date{color:#6f6a62;}

.bouton{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  margin-top:18px;padding:12px 22px;border-radius:10px;
  background:var(--encre);color:#fff;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.11em;font-size:11px;
  box-shadow:0 10px 24px -9px rgba(249,168,37,.7);
  transition:transform .2s ease, box-shadow .2s ease;
}
.bouton:hover{transform:translateY(-1px);box-shadow:0 12px 28px -9px rgba(249,168,37,.85);}
.fiche.sombre .bouton{background:#f4f2ee;color:var(--encre);}

/* Une fiche seule dans sa rubrique : on la borne, sinon elle s'étire sur toute
   la largeur et le texte devient pénible. */
.fiche.seule{max-width:640px;}
.fiche.seule h3{font-size:24px;}

/* ---------- photographies ----------
   Toutes réunies ici : changer une image ou la retirer se fait
   à un seul endroit, sans toucher au reste de la page. */
.portrait{
  width:100%;border:4px solid var(--encre);
  box-shadow:0 18px 38px -20px rgba(0,0,0,.55);
}
.credit{
  margin-top:9px;font-size:10.5px;color:var(--tres-doux);
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.11em;
}

/* le grand bloc de présentation : photo à gauche, texte à droite */
.presentation{
  margin-top:52px;display:grid;grid-template-columns:1fr 1.05fr;
  gap:42px;align-items:center;
}
.presentation h2{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,40px);line-height:1.06;margin-bottom:18px;
}
/* Le bloc « Comédien, auteur… » : un chapeau, puis le texte.

   Les deux paragraphes étaient à 14,5 px — moins que le texte courant du site,
   qui est à 15,5 — et de la même taille l'un que l'autre. Résultat : la
   première ligne, qui est un chapeau (« Trente ans de scène, de télévision… »),
   ne se distinguait pas du paragraphe qui la suit, et l'ensemble paraissait
   plus petit que le reste de la page. Même correction que pour « Les projets
   tout chauds » : le chapeau à 17 px, le corps rendu à sa taille normale, et
   pas de gras — c'est la taille qui hiérarchise, pas le poids. */
/* Le portrait de la seconde colonne, et la grille qui se referme quand il
   n'y en a pas. La classe « sans-photo » existait dans le HTML depuis toujours
   sans qu'aucune règle ne la lise : le bloc gardait une colonne vide de cinq
   cents pixels, et c'était le seul de la page à se coller ainsi à gauche. */
.presentation.sans-photo{grid-template-columns:minmax(0,660px);}
.portrait-presentation{line-height:0;}
.portrait-presentation img{
  width:100%;height:auto;display:block;border-radius:11px;
  box-shadow:0 18px 40px -26px rgba(20,24,19,.8);
}
@media (max-width:760px){
  /* Sur un téléphone la photo passe sous le texte : une colonne, dans
     l'ordre où on lit. */
  .portrait-presentation{max-width:420px;margin:0 auto;}
}

/* Agrandis le 9 septembre 2026 : Pascal les trouvait peu lisibles sur
   ordinateur. Le gris de lecture donne 4,58:1 sur le mur vert — au-dessus de la
   norme, mais de peu ; à 15,5 px cela suffit à fatiguer. Plutôt que de toucher
   taille. Le clamp ne bouge rien sur un téléphone, où le texte occupe déjà
   toute la largeur : c'est sur les grands écrans qu'il était trop menu.

   La taille n'a pas suffi. Trois gris ont été mis côte à côte sur un banc
   d'essai — 4,6:1, 6,0:1 et 7,9:1 — et Pascal a choisi le plus foncé : le noir
   des titres. C'est le seul texte de lecture de la page à passer à --encre, et
   c'est justifié — il se lit sur le mur vert, sans carte blanche dessous pour
   l'aider, et c'est le seul endroit où il parle de lui à la première personne.
   Les autres gris de la page ne bougent pas. */
.presentation p{font-size:clamp(15.5px,1.45vw,18px);color:var(--encre);margin-bottom:14px;}
.presentation p:first-of-type{font-size:clamp(17px,1.7vw,20px);line-height:1.5;margin-bottom:16px;}
.presentation .lien{
  display:inline-flex;align-items:center;gap:9px;margin-top:6px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.11em;
  font-size:11.5px;border-bottom:1.5px solid var(--encre);padding-bottom:4px;
}

/* --- EN RÉSERVE : silhouette à droite du titre ---
   Composition mise de côté, conservée pour pouvoir y revenir.
   Il suffit de rétablir le balisage correspondant dans l'entrée. */
.titre-et-silhouette{
  display:grid;grid-template-columns:1fr auto;
  gap:30px;align-items:end;justify-items:start;
  text-align:left;margin-top:6px;
}
.bloc-titre .signature{text-align:left;}
.bloc-titre .metiers,
.bloc-titre .accroche{text-align:left;}
.silhouette{margin:0;line-height:0;}
.silhouette img{
  height:clamp(230px,30vw,340px);width:auto;
  border:4px solid var(--encre);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.6);
}
/* Version détourée : plus de cadre, la silhouette se pose sur la page */
.silhouette.detouree img{border:none;box-shadow:none;}

/* fiche du spectacle : la photo en pied à côté du texte */
/* La fiche du prochain événement occupe désormais toute la largeur : la photo
   peut respirer, et le texte est bridé pour rester lisible — une ligne de mille
   pixels ne se lit pas. */
.fiche.avec-image{display:grid;grid-template-columns:clamp(180px,24vw,300px) 1fr;
  gap:28px;align-items:center;}

/* La fenêtre du projet à venir, dans le bouton noir : on voit de quoi il
   s'agit avant de cliquer. Photo, vidéo ou son — le genre se devine à
   l'extension du fichier. */
.fenetre-projet{
  margin:16px 0 4px;max-width:520px;border:1px solid #3a4038;border-radius:8px;
  overflow:hidden;background:#0d0f13;
}
.fenetre-projet img,.fenetre-projet video{
  width:100%;display:block;aspect-ratio:16/9;object-fit:cover;
}
.fenetre-projet.son{background:transparent;border:none;}
.fenetre-projet audio{width:100%;display:block;}

/* L'invitation à descendre voir les autres projets. */
.invite-projets{
  display:inline-flex;align-items:center;gap:9px;margin:26px 0 6px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.11em;
  font-size:11.5px;color:var(--encre);
}
.invite-projets .eclair{width:.62em;height:1.15em;}

/* L'étiquette du coup de cœur ouvre la grande vue, comme la photo. */
.titre-rubrique.ouvrable{cursor:zoom-in;}
.titre-rubrique.ouvrable:hover{background:#2b312a;}
.fiche.avec-image p{max-width:62ch;}
.fiche.avec-image img{width:100%;border:3px solid #3a3733;}

/* le portrait rond de l'invitation */
.portrait-rond{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  margin:0 auto 16px;border:3px solid var(--encre);
}

/* la vignette comique, posée un peu de travers */
.vignette{
  width:132px;border:4px solid var(--encre);transform:rotate(-3deg);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.55);
  transition:transform .25s ease;
}
.vignette:hover{transform:rotate(1.5deg) scale(1.04);}
.pensee{position:relative;}
.pensee .vignette{
  position:absolute;right:26px;bottom:-34px;
}

/* ---------- la pensée, en respiration ---------- */
.pensee{
  margin:52px 0 6px;padding:38px 30px;text-align:center;
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
}
.pensee blockquote{
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  font-size:clamp(20px,2.7vw,29px);line-height:1.32;
}
.pensee cite{
  display:block;margin-top:15px;font-style:normal;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--doux);
}

/* ---------- l'écoute ---------- */
.ecoute{
  margin-top:44px;background:var(--encre);border-radius:13px;padding:32px 30px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.ecoute .texte{flex:1;min-width:250px;}

.ecoute h3{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:18px;color:#f4f2ee;line-height:1.2;margin-bottom:8px;
  letter-spacing:.02em;
}
.ecoute p{font-size:13.5px;color:#a49e93;}
/* Le lecteur doit pouvoir rétrécir.

   Ses trois pièces — le bouton, l'onde, la durée — refusaient de céder un
   pixel : 40 + 228 + 130, plus les espaces, faisaient 465 px dans une colonne
   de 323. Le téléphone se mettait alors à glisser de gauche à droite. Un
   élément de flex ne rétrécit pas sous la taille de son contenu tant qu'on ne
   lui a pas dit « min-width:0 » : c'est la cause, et elle est classique.

   Le défaut se voyait d'autant plus qu'il manque le son du murmure : la durée
   affiche « Enregistrement introuvable » là où elle dirait « 7 min ». */
.lecteur{display:flex;align-items:center;gap:15px;background:#242220;
  border-radius:44px;padding:12px 22px 12px 12px;max-width:100%;}
.lire{width:40px;height:40px;border-radius:50%;background:#f4f2ee;color:var(--encre);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;cursor:pointer;}
.onde{display:flex;align-items:center;gap:2.5px;height:28px;
  flex:1 1 0;min-width:0;overflow:hidden;}
.onde i{width:2.5px;border-radius:2px;background:#514c44;display:block;}
.onde i.lu{background:linear-gradient(178deg,#ffd54a,#f9a825 38%,#ef7f1a 68%,#d94f2b);}
.onde{cursor:pointer;}
.lire{transition:transform .15s ease;}
.lire:hover{transform:scale(1.06);}
.lecteur .duree{
  font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:.1em;
  color:#8f8981;margin-left:4px;white-space:nowrap;
  /* Un message long — « Enregistrement introuvable » — se coupe plutôt que
     de pousser tout le lecteur hors de l'écran. */
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
}
/* Pas d'enregistrement déposé : le lecteur ne fait plus semblant d'en être un. */
/* Le bouton « Mettre le son ». Les navigateurs refusent de lancer un son tant
   que le visiteur n'a touché à rien : ce bouton est le recours, et il ne paraît
   que dans ce cas — jingleALArrivee() lui met la classe « visible ».

   Il vivait en trois exemplaires, dans les feuilles locales de chaque page. Ils
   avaient déjà divergé : celui des vidéos portait une ombre que les autres
   n'avaient pas. Un seul exemplaire, ici, le 2 septembre 2026. */
.reveil-son{
  display:none;margin:22px auto 0;align-items:center;gap:9px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  padding:11px 20px;border-radius:999px;border:1.5px solid var(--encre);
  background:var(--encre);color:#fff;cursor:pointer;
  box-shadow:0 10px 22px -14px rgba(201,120,26,.9);
}
.reveil-son.visible{display:inline-flex;}
.reveil-son svg{width:11px;height:19px;fill:url(#degrade-eclair);}

/* Le renvoi vers la page du murmure, sous le bloc noir de l'accueil. Discret :
   il ne concurrence pas l'épisode en vitrine, il dit seulement qu'il y en a
   d'autres derrière. */
/* Le bloc du murmure est un bouton : tout son corps mène à la page des
   épisodes. Le curseur le dit partout, sauf sur le lecteur — où l'on écoute
   au lieu de partir. */
.ecoute.toute-cliquable{cursor:pointer;transition:transform .22s ease, box-shadow .22s ease;}
.ecoute.toute-cliquable:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(30,40,28,.06), 0 20px 38px -24px rgba(20,24,19,.8);
}
.ecoute.toute-cliquable .lecteur{cursor:default;}
.ecoute.toute-cliquable:hover .tous-episodes{color:var(--or-clair);border-bottom-color:rgba(245,166,35,.5);}
.ecoute.toute-cliquable:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px;}

.tous-episodes{
  display:inline-block;margin-top:14px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:10.5px;color:#8d877d;text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.tous-episodes:hover{color:var(--or-clair);border-bottom-color:rgba(245,166,35,.5);}

.lecteur.muet{opacity:.55;}
.lecteur.muet .lire,.lecteur.muet .onde{cursor:default;pointer-events:none;}

/* ---------- les dates de « Quoi de neuf ? » ----------
   Ce qui vient est en gras et bien noir ; ce qui est passé s'efface sans
   disparaître, sous son propre intertitre. */
.dates-suite{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;margin-top:20px;
}
.fiche.date-avenir h3{font-weight:700;}
.fiche.date-avenir .etiquette{color:var(--or);}
.mijote.hors{
  margin-top:22px;font-size:13.5px;color:var(--doux);font-style:italic;
  border-left:2px solid var(--ligne);padding-left:14px;
}
.plus-neuf{margin-top:38px;}
.plus-neuf > h3{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;color:var(--doux);padding-bottom:9px;border-bottom:1px solid var(--ligne);
}
.fiche.date-passee{
  background:transparent;border-color:#eeebe4;box-shadow:none;
}
.fiche.date-passee:hover{transform:none;box-shadow:none;border-color:var(--ligne);}
.fiche.date-passee h3{font-weight:500;color:#8a857c;font-size:16px;}
.fiche.date-passee .etiquette{color:#b3ada2;}
.fiche.date-passee p{color:#9d978d;}
.fiche .lieu{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:10px;color:var(--doux);margin-bottom:8px;
}

/* ---------- les deux grands portails : Archives et Vidéos ----------
   Deux fiches cliquables en entier, avec une image en bandeau. Le texte
   explicatif se change depuis l'atelier, pas ici. */
.portails{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px;}
/* Un portail sorti de « À visiter » vit seul à son emplacement : pas de
   colonne vide à côté de lui, et pas de titre de section au-dessus.

   Il se met alors à l'horizontale — la photo à gauche, le texte à côté.
   Étirée sur toute la largeur, la photo prenait un tiers de l'écran sans que
   ce soit voulu : c'était la carte de la grille, simplement élargie. */
.portails.seul{grid-template-columns:1fr;margin-top:0;}
/* La photo ne touche plus les bords : la carte a sa marge, et le tirage est
   posé dedans avec son cadre sombre, comme celui du coup de cœur. Collée
   bord à bord et haute comme la carte, elle pesait beaucoup trop lourd. */
.portails.seul .portail{flex-direction:row;align-items:center;padding:22px;gap:26px;}
.portails.seul .portail img{
  width:clamp(140px,21%,210px);flex:none;align-self:center;
  height:auto;aspect-ratio:4/3;object-fit:cover;
  border:3px solid #3a3733;border-radius:3px;
}
.portails.seul .portail .dedans{padding:0;justify-content:center;}
@media (max-width:680px){
  .portails.seul .portail{flex-direction:column;align-items:flex-start;padding:20px;}
  .portails.seul .portail img{width:min(200px,60%);aspect-ratio:4/3;}
}
.portail{
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  text-decoration:none;color:inherit;
}
.portail img{width:100%;height:200px;object-fit:cover;display:block;}
.portail .dedans{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}

/* Sans étiquette au-dessus, le titre a besoin d'un peu d'air. */
.portail .etiquette:empty{display:none;}
.portail .bouton{margin-top:auto;}
.portail p{margin-bottom:16px;}
@media (max-width:760px){ .portails{grid-template-columns:1fr;} }

/* ---------- le nom d'une rubrique, dans son bouton ----------

   Sur fond clair, un orange vif est illisible en petit : 1,65 de contraste,
   là où il en faut 4,5. En le fonçant jusqu'au seuil on obtient de la brique,
   plus du tout de l'orange.

   La sortie : le nom se pose sur une petite pastille sombre. L'orange y garde
   toute sa vivacité — 8,5 de contraste — et la pastille fait en plus ce qu'on
   attend d'un nom de rubrique : elle le désigne comme une étiquette.

   Sur les blocs déjà sombres, pas de pastille : le fond fait le travail.
   ========================================================================= */
/* 13,5 px et non 11,5 : ces capsules nomment les rubriques d'une page dont les
   autres titres montent à 76 px, et elles restaient sous la taille d'une note
   de bas de page. Essayé à 15 px : la capsule se met alors à rivaliser avec le
   titre qu'elle annonce, et ce n'est plus une étiquette. L'interlettrage est en
   « em », il suit donc tout seul. */
.titre-rubrique{
  display:inline-block;
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;font-size:13.5px;line-height:1.4;
  background:#191c17;color:var(--or-clair);
  padding:6px 14px 5px;border-radius:999px;
  margin-bottom:14px;
}
.fiche.sombre .titre-rubrique,
.ecoute .titre-rubrique,
.portail.sombre .titre-rubrique{
  background:none;color:var(--or-clair);padding:0;letter-spacing:.14em;
}
.titre-rubrique.petit{font-size:11.5px;padding:5px 12px 4px;margin-bottom:11px;}

/* Le mot d'explication du coup de cœur ne paraît qu'une fois la photo ouverte
   en grand. Sur l'accueil, l'image et le titre suffisent à donner envie ; tout
   dire d'avance retire la raison de cliquer, et la vue agrandie ne montrait
   alors rien de plus, en plus gros.

   Il reste affiché en mode « Voir et cliquer » : sans cela, on ne pourrait plus
   atteindre ce texte depuis la page pour aller le corriger. */
.coeur-texte{display:none;}
html.repere .coeur-texte{display:block;}

/* Le titre du moment : c'est lui qu'on doit lire en premier. */
.fiche.seule h3{font-size:clamp(24px,3vw,33px);line-height:1.06;margin-bottom:12px;}
.ecoute h3{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(23px,2.9vw,31px);line-height:1.08;color:#f4f2ee;
  margin:17px 0 10px;letter-spacing:.01em;
}
.trio .fiche h3{font-size:18px;line-height:1.16;}

/* Les deux portails n'annoncent pas d'actualité : leur nom EST le contenu.
   Ils gardent donc un grand titre, et le même orange que partout ailleurs.

   Sur fond clair, cet orange manquerait de contraste s'il était seul. Un fin
   liseré noir autour des lettres le lui rend : ce sont les bords sombres qui
   détachent le mot du mur, la couleur n'a plus à s'en charger.

   « paint-order » fait passer le liseré DERRIÈRE la lettre. Sans lui il se
   dessine à cheval sur le contour et amaigrit le caractère. */
/* Le titre d'un grand bouton se présente désormais comme tous les autres
   titres de rubrique du site : une capsule noire, des lettres orange. Il était
   le seul à porter un grand titre en dégradé cerclé de noir, et cette
   singularité se voyait plus que le titre lui-même. */
.portail h3{
  display:inline-block;align-self:flex-start;
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;font-size:13.5px;line-height:1.4;
  background:#191c17;color:var(--or-clair);
  padding:6px 14px 5px;border-radius:999px;margin-bottom:14px;
  max-width:100%;
}
/* Plus de liseré : les lettres orange sur le noir de la capsule donnent 8,5 de
   contraste, le contour n'a plus rien à corriger. */
.portail:not(.sombre) h3{
  -webkit-text-stroke:0;
}
/* Le dégradé orange → rouge des titres de boutons (proposition C, choisie le
   14 août 2026). Il n'est posé que là où le navigateur sait découper une image
   sur du texte : ailleurs, l'orange plein reste en place. Sans cette
   précaution, un vieux navigateur afficherait un titre transparent, donc
   invisible. */
/* Le dégradé orange → rouge (choix C du 14 août) valait pour un titre de
   28 px. Dans une capsule de 11,5 px il ne se verrait pas : on revient à
   l'orange plein, celui de toutes les autres capsules du site. */
/* Sur le portail sombre, la règle générale des blocs noirs reprenait le dessus
   et remettait le titre en crème. On la contre ici, avec le même poids. */
.portail.sombre h3{
  background:none;color:var(--or-clair);padding:0;letter-spacing:.14em;
}

/* Le petit texte explicatif ajouté sous un titre de rubrique.
   En italique : il dit ce qu'est la rubrique, il ne raconte pas — il ne doit
   pas se confondre avec le texte qui suit. */
/* Le texte explicatif d'une rubrique : ce qu'elle est, en une phrase. Il n'est
   plus en italique — Pascal n'en voulait pas. Ce qui le distingue du texte
   courant : un corps plus grand, et le filet qui le sépare de la suite. */
.explique{
  font-size:14.5px;line-height:1.55;color:var(--doux);
  margin:2px 0 14px;padding-bottom:14px;
  border-bottom:1px solid var(--ligne);
}
/* DEUX TEXTES, DEUX RÔLES.

   Dans les blocs de l'accueil qui présentent une pièce d'une série — le
   murmure, l'anecdote — deux paragraphes se suivent : celui qui explique la
   RUBRIQUE, toujours le même, et celui qui parle de l'ÉPISODE, qui change.

   Ils étaient écrits dans des corps presque égaux, et le permanent l'emportait
   même sur le changeant : 14,5 px contre 13,5. On ne savait plus lequel parlait
   de quoi. La rubrique passe donc en retrait — plus petite, plus pâle, en
   petites capitales espacées, sous la ligne qui ferme la présentation — et
   l'épisode prend le corps de lecture. */
.ecoute .explique{
  /* En italique et en retrait, pas en capitales : les petites capitales font
     une belle étiquette d'un mot et une bouillie de trois lignes. Celle de
     Pascal est une phrase — et une blague — elle doit se lire. */
  font-style:italic;font-size:13px;line-height:1.6;color:#8d9585;
  margin:9px 0 0;max-width:520px;
  border-bottom-color:#3a4038;padding-bottom:15px;
}
.ecoute .propos{font-size:15px;line-height:1.6;color:#c3bdb2;max-width:60ch;}

/* Marque « réservé à La Troupe » sur les rubriques fermées. */
.reserve{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:9.5px;color:var(--or);border:1px solid #e8dcc0;background:#fdf8ec;
  padding:5px 10px;border-radius:999px;align-self:flex-start;
}

/* ---------- rubriques : trois noms, en grand ----------
   Les cartes sont tombées. Elles tenaient un titre minuscule et un texte de
   longueur très inégale, et la grille les alignait sur la plus haute : deux
   boîtes vides pour une pleine. Ce qu'on vient y chercher, c'est le nom et
   la porte derrière — alors il ne reste que le nom, assez grand pour qu'on
   ait envie de le toucher, et plus petit que le titre de la rubrique pour
   que la hiérarchie tienne. */
.rubriques{
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:center;gap:18px 26px;margin-top:22px;
  border-top:1px solid var(--ligne);padding-top:26px;
}
.rub{
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:6px 4px;text-decoration:none;color:inherit;
}
.rub h4{
  display:inline-flex;flex-direction:column;align-items:center;gap:9px;
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(18px,2.2vw,27px);line-height:1.06;letter-spacing:.015em;
  color:var(--encre);transition:color .2s ease;
}
/* Le trait se tire du centre vers les bords : le titre répond sans bouger. */
.rub h4 .nom{display:block;position:relative;padding-bottom:7px;}
.rub h4 .nom::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);
  transition:transform .25s ease;
}
.rub:hover h4,.rub:focus-visible h4{color:var(--filet);}
.rub:hover h4 .nom::after,.rub:focus-visible h4 .nom::after{transform:scaleX(1);}

/* Une rubrique sans lien : annoncée, mais sa page n'existe pas encore. On le
   dit franchement plutôt que de laisser cliquer dans le vide. */
.rub.bientot{cursor:default;color:var(--tres-doux);}
.rub.bientot h4{color:var(--tres-doux);}
.rub.bientot:hover h4{color:var(--tres-doux);}
.rub.bientot:hover h4 .nom::after{transform:scaleX(0);}
.rub .pastille-bientot{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:9px;padding:3px 8px;border-radius:999px;
  background:#dcd8cd;color:#5a554c;flex:none;
}

/* ---------- lettre d'information ---------- */
.lettre{
  margin-top:46px;border:1px solid var(--ligne);border-radius:13px;
  padding:32px 30px;text-align:center;background:var(--blanc);
}
.lettre h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:22px;margin-bottom:9px;}
.lettre p{font-size:13.5px;color:var(--doux);max-width:480px;margin:0 auto 20px;}
/* Ce qu'on gagne à rejoindre La Troupe, dit en deux lignes plutôt qu'espéré.
   Chacune disparaît si on la laisse vide dans l'admin. */
.avantages{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin:0 auto 22px;max-width:640px;
}
.avantages > div{
  flex:1 1 240px;max-width:290px;text-align:left;
  display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;color:var(--doux);line-height:1.5;
}
.avantages svg{width:11px;height:19px;flex:none;margin-top:2px;fill:url(#degrade-eclair);}

.formulaire{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.reponse-troupe{margin-top:14px;font-size:13.5px;}
.reponse-troupe.bien{color:#2f7a41;}
.reponse-troupe.raté{color:#b4442e;}
.promesse{
  margin-top:14px;font-size:11.5px;color:var(--tres-doux);line-height:1.55;
  max-width:400px;margin-left:auto;margin-right:auto;
}
.formulaire input{
  padding:13px 16px;border:1px solid #cfc9bd;border-radius:9px;font-family:'Newsreader',Georgia,serif;
  font-size:14px;min-width:180px;flex:1;max-width:230px;background:#e9ede7;
}
.formulaire input:focus{outline:none;border-color:var(--encre);background:#f2f5ef;}
.formulaire button{border:none;cursor:pointer;}

/* ---------- pied de page ---------- */
.pied{margin-top:56px;border-top:1px solid var(--ligne);padding:30px 0 46px;}
.pied .large{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;font-size:12px;color:var(--doux);}
.reseaux{display:flex;gap:18px;font-size:16px;}
.reseaux a{transition:color .2s ease;}
.reseaux a:hover{color:var(--or);}

/* ---------- adaptation aux petits écrans ---------- */
@media (max-width:900px){
  .trio{grid-template-columns:1fr;}
  .duo{grid-template-columns:1fr;}
  .presentation{grid-template-columns:1fr;gap:26px;}
  .pensee .vignette{position:static;display:block;margin:24px auto 0;transform:rotate(-3deg);}
}
@media (max-width:560px){
  .fiche.avec-image{grid-template-columns:1fr;}
  .fiche.avec-image img{max-width:190px;}
}
@media (max-width:720px){
  /* Déroulé sur téléphone, le menu devient un panneau CLAIR. Il héritait
     pourtant du gris pâle écrit pour la barre noire : les dix entrées
     s'affichaient bien, mais invisibles sur le fond. Elles passent à
     l'encre, et le panneau prend le blanc du site pour se détacher. */
  .menu{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:var(--blanc);border-bottom:1px solid var(--ligne);
    color:var(--encre);
    box-shadow:0 18px 30px -22px rgba(30,40,28,.55);
    flex-direction:column;gap:0;padding:8px 26px 18px;
  }
  .menu.ouvert{display:flex;}
  .menu a{padding:11px 0;border-bottom:1px solid var(--ligne);font-size:12px;
    color:var(--encre);}
  .menu a:last-child{border-bottom:none;}
  .menu a:hover,.menu a:active{color:var(--filet);}
  .burger{display:block;}
  .entree{padding:40px 0 34px;}
  .pied .large{flex-direction:column;text-align:center;}
}
@media (max-width:560px){
  .rubriques{grid-template-columns:1fr;gap:22px;}
  .ecoute{padding:24px 20px;}
}


/* ============================================================================
   LE MUR — la matière vient d'une vraie surface

   C'est la photo de béton du Mur Mur, passée en niveaux de gris. Le vert est
   dessous ; la photo ne fait que moduler la lumière par-dessus. On récupère
   donc ce qu'aucun bruit calculé ne savait donner — les traînées de truelle,
   les reprises, le mordant — et le site tient à la même matière que le Mur Mur.

   Le réglage du ton se fait ici, en CSS, et non dans le fichier image : on
   peut donc l'ajuster sans rien réenvoyer sur le serveur.

     grayscale  → on ne garde que la lumière, la couleur vient du vert
     contrast   → on écrase les écarts, sinon le béton mange la page
     brightness → on remonte l'ensemble, sinon « multiply » assombrit tout
   ============================================================================ */

/* Quand seul le <body> porte une couleur de fond, le navigateur la remonte au
   niveau de la page entière — et le calque de matière n'a alors plus rien avec
   quoi se fondre : il se mélangeait au blanc du canevas, d'où le gris.
   En donnant aussi la couleur à <html> et en isolant le <body>, le fond
   redevient un vrai fond d'élément et la fusion fonctionne. */
/* Rien ne doit jamais glisser de gauche à droite.

   Le site se lit de haut en bas, un point c'est tout. Ce garde-fou coupe ce
   qui dépasserait par le côté, quelle qu'en soit la cause — un jour, un titre
   trop long ou une image mal taillée recommencera, et personne ne s'en
   apercevra avant qu'un téléphone se mette à valser.

   Trois précautions, apprises à la dure :
   — « clip » et non « hidden » : « hidden » fabrique un conteneur de
     défilement, ce qui décollerait la barre du haut, qui est collante ;
   — sur le CORPS et non sur « html » : poser un débordement sur la racine
     change la façon dont le navigateur transmet le défilement à la fenêtre,
     et c'est le défilement vertical qu'on risque de casser en voulant
     supprimer l'horizontal ;
   — ce n'est pas une excuse pour laisser des débordements : la cause se
     corrige, ceci ne fait que rattraper l'oubli. */
/* L'attribut « hidden » l'emporte toujours, sur tout le site.

   Le navigateur cache un élément « hidden » par une règle de très faible
   priorité : la moindre déclaration de « display » dans cette feuille l'annule
   sans bruit. C'est ainsi que les flèches de feuilletage de la galerie sont
   restées visibles sur des souvenirs d'une seule page, alors que le code les
   cachait correctement. Le piège se referme ici, une fois pour toutes. */
[hidden]{display:none !important;}

/* ---------- la grande vue d'un film ----------
   Un film regardé dans une vignette de trois cents pixels n'est pas regardé.
   Au clic il prend l'écran, le temps du visionnage. Le fond est presque noir :
   c'est la seule fois où le mur s'efface, et c'est voulu — on ne regarde pas
   un film sur un mur vert. */
.grand-film{
  position:fixed;inset:0;z-index:950;background:rgba(12,12,11,.95);
  display:flex;align-items:center;justify-content:center;padding:26px;
}
.grand-film .dedans-film{display:flex;align-items:center;justify-content:center;
  max-width:100%;max-height:100%;}
.grand-film video{max-width:min(94vw,1400px);max-height:84vh;display:block;background:#000;}
.grand-film iframe{width:min(94vw,1400px);aspect-ratio:16/9;max-height:84vh;border:0;display:block;}
.grand-film .fermer-film{
  position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(20,24,19,.6);color:#f4f2ee;
  font-size:17px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.grand-film .fermer-film:hover{background:#000;border-color:rgba(245,166,35,.65);}
/* La porte de sortie vers la chaîne. Discrète : elle ne doit pas concurrencer
   la vidéo, mais elle doit exister — on ne peut pas s'abonner depuis un
   lecteur intégré, et une chaîne vit de ses abonnés. */
.grand-film .chez-hote{
  /* Le cadre est un flex centré : posée dedans, la sortie se serait rangée
     à côté de la vidéo, en colonne étroite. Elle est donc détachée du flux,
     comme le titre, et se glisse sous lui. */
  position:absolute;left:50%;bottom:15px;transform:translateX(-50%);
  white-space:nowrap;
  font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:10.5px;color:#8d877d;text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
/* Deux lignes sous la vidéo au lieu d'une : le titre remonte, et l'image
   laisse la place. */
.grand-film.avec-sortie .titre-film{bottom:41px;}
.grand-film.avec-sortie video,
.grand-film.avec-sortie iframe{max-height:76vh;}
.grand-film .chez-hote:hover{color:#f5a623;border-bottom-color:rgba(245,166,35,.55);}

/* L'affiche d'une anecdote hébergée ailleurs, sur la page d'accueil. */
.montre .en-ligne{
  position:relative;display:block;width:100%;background:#0d0f13;cursor:pointer;
  border:0;padding:0;line-height:0;border-radius:11px;overflow:hidden;
}
.montre .en-ligne img{width:100%;display:block;}
.montre .en-ligne .rien{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  color:#6f6a61;font-family:'Oswald',sans-serif;letter-spacing:.12em;font-size:11px;
  text-transform:uppercase;
}
.montre .en-ligne .jouer{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(20,24,19,.62);color:#fff;font-size:24px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.montre .en-ligne:hover .jouer{background:rgba(20,24,19,.85);border-color:var(--or-clair);}
/* Le temps du jingle : le bouton bat, pour dire que le clic a été entendu. */
.montre .en-ligne.attend .jouer{
  border-color:var(--or-clair);animation:battement 1.1s ease-in-out infinite;
}
@keyframes battement{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  50%    {transform:translate(-50%,-50%) scale(1.12);opacity:.72;}
}
@media (prefers-reduced-motion:reduce){
  .montre .en-ligne.attend .jouer{animation:none;opacity:.72;}
}

.grand-film .titre-film{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;padding:0 22px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:#9d978c;
}
@media (max-width:640px){
  .grand-film{padding:8px;}
  .grand-film .fermer-film{right:8px;top:8px;width:38px;height:38px;}
  .grand-film video{max-height:78vh;}
}

html{background-color:var(--papier);}

body{
  background-color:var(--papier);
  background-image:none;
  isolation:isolate;
  overflow-x:clip;
}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("medias/mur-turquoise.jpg") center center / cover no-repeat;
  /* « soft-light » plutôt que « multiply » : le premier module la lumière en
     laissant la teinte du fond intacte, le second mélange les couleurs et
     grisait le vert. Le gris moyen de la photo devient neutre, seuls les
     creux et les reliefs agissent. */
  filter:grayscale(1) contrast(.70) brightness(.74);
  mix-blend-mode:soft-light;
  opacity:1;
}

/* Le grain fin : la photo s'agrandit sur les grands écrans et perd son
   mordant. Le grain le lui rend. */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27g%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27/%3E%3C/filter%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23g%29%27%20opacity%3D%270.6%27/%3E%3C/svg%3E");
}

/* ---------- l'inscription fantôme ----------
   Première tentative : en fond fixe, dans la marge de droite. Abandonnée —
   avec une colonne centrée, il n'y a pas de marge libre, et l'inscription
   ressortait coupée en morceaux derrière les boutons.

   Elle a donc sa propre place, tout en bas, juste avant le pied de page :
   un mur qu'on découvre en arrivant au bout. Rien ne passe devant, rien ne
   la coupe, et la lecture du reste n'est jamais gênée. */
.inscription{
  pointer-events:none;user-select:none;
  margin:64px auto -10px;max-width:var(--largeur);padding:0 24px;
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,10.5vw,150px);line-height:.84;letter-spacing:.005em;
  color:#38443a;mix-blend-mode:multiply;opacity:.17;text-align:center;
  /* Une peinture ancienne n'a pas de bord net : on la mange par les bords. */
  -webkit-mask-image:radial-gradient(105% 130% at 50% 45%, #000 22%, transparent 74%);
  mask-image:radial-gradient(105% 130% at 50% 45%, #000 22%, transparent 74%);
}

/* Le contenu passe devant la matière. */
body > *{position:relative;z-index:1;}

@media (prefers-reduced-motion:reduce){ body{background-attachment:scroll;} }

/* ---------- réglages de la nouvelle police ----------
   Newsreader a un œil plus petit qu'Inter : à taille égale le texte
   paraîtrait rétréci. On compense légèrement, et on aère l'interligne. */
body{font-size:15.5px;line-height:1.62;letter-spacing:.002em;}
p{text-wrap:pretty;}

/* La ligne des métiers et l'accroche gagnent en italique : c'est là que la
   romaine montre ce qu'elle sait faire, et ça pose le ton tout de suite. */
/* Même caractère que « C'est bon de se retrouver ! » : c'est ce qui fait
   comprendre que les deux phrases n'en font qu'une. Seules la taille et la
   place changent. */
.accroche{
  font-family:'Oswald',sans-serif;font-style:normal;font-weight:500;
  /* Agrandie le 9 septembre 2026 par erreur — je m'étais trompé de bloc —
     puis remise ici à sa taille d'origine : mis côte à côte sur un banc
     d'essai, Pascal a préféré l'ancienne. Elle est petite exprès. Elle sort
     de sous « C'est bon de se retrouver ! » comme une remarque ajoutée à
     mi-voix ; grossie, elle réclamait la même attention que la signature et
     lui volait sa place. */
  text-transform:uppercase;letter-spacing:.09em;
  font-size:15px;color:var(--doux);
}
.metiers{font-family:'Oswald',sans-serif;}

/* La citation de la pensée : plein cadre, en romaine, sans guillemets ajoutés. */
.pensee blockquote{font-style:italic;}

/* Les cartes se détachent du mur par un souffle, pas par un trait. */
.fiche,.rub,.lettre,.souvenir,.film,.portail{
  box-shadow:0 1px 2px rgba(30,40,28,.05), 0 10px 26px -22px rgba(30,40,28,.5);
}

/* Sur le vert, un noir pur serait un trou : le nôtre tire très légèrement
   vers le vert, il s'assied dans la page au lieu de la percer. */
.fiche.sombre,.ecoute,.souvenir.son,.souvenir.video,.film{
  background:#191c17;border-color:#191c17;
}


/* Une fiche qui mène quelque part le montre : au survol elle se soulève un
   peu plus, et une invitation apparaît en bas. Une fiche sans destination
   reste immobile — mieux vaut ne rien promettre. */
.fiche.cliquable{text-decoration:none;color:inherit;cursor:pointer;}
.fiche.cliquable .aller{
  margin-top:14px;font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.12em;font-size:10px;color:var(--or);
  opacity:.75;transition:opacity .2s ease;
}
.fiche.cliquable:hover{border-color:var(--encre);}
.fiche.cliquable:hover .aller{opacity:1;}
.fiche:not(.cliquable):hover{transform:none;box-shadow:0 1px 2px rgba(30,40,28,.05);}

/* ---------- l'inscription, premier épisode ----------
   Sur la première petite fiche, haut dans la page. Elle y est volontairement
   trop grande pour le cadre : on n'en lit que deux ou trois lettres, ça
   accroche l'œil sans se laisser lire.

   On la retrouve entière tout en bas. C'est la distance entre les deux qui
   fait l'effet — collées l'une à l'autre, il n'y aurait plus de question.

   Pas sur le coup de cœur ni sur « Quoi de neuf ? » : ces boutons-là porteront
   une photo différente chaque semaine, elle serait recouverte.
   ========================================================================= */
#trio .fiche:first-child{position:relative;overflow:hidden;}
#trio .fiche:first-child > *{position:relative;z-index:1;}
#trio .fiche:first-child::after{
  content:"Tu es une troupe !";
  position:absolute;z-index:0;right:-22%;bottom:-30%;
  width:6.5ch;text-align:right;
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(58px,7.5vw,104px);line-height:.8;letter-spacing:.01em;
  color:#38443a;mix-blend-mode:multiply;opacity:.15;
  pointer-events:none;user-select:none;
  -webkit-mask-image:radial-gradient(120% 130% at 55% 45%, #000 26%, transparent 78%);
  mask-image:radial-gradient(120% 130% at 55% 45%, #000 26%, transparent 78%);
}


/* ---------- la pensée et le livre ----------
   La pensée occupe le centre, la couverture se tient à côté d'elle, comme
   le livre posé sur la table à côté de la phrase qu'on vient de lire. */
.pensee{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap;}
.pensee-texte{flex:0 1 620px;}
.livre{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:inherit;
  transition:transform .22s ease;
}
.livre:hover{transform:translateY(-3px);}
.livre img{
  width:clamp(120px,13vw,168px);display:block;
  border:1px solid rgba(30,40,28,.18);
  box-shadow:0 2px 4px rgba(30,40,28,.10), 0 16px 34px -20px rgba(30,40,28,.55);
}
.livre span{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;color:var(--or);text-align:center;max-width:15ch;line-height:1.5;
}
.livre:hover span{text-decoration:underline;text-underline-offset:3px;}
@media (max-width:760px){ .pensee{flex-direction:column;} }

/* ---------- L'anecdote de Pascal Vincent ----------
   Volontairement claire, là où le murmure est sombre : l'une se regarde de
   face et se partage, l'autre s'écoute au casque et tard. Deux rubriques
   voisines par le principe, opposées par le ton — le site doit le dire tout
   seul, sans qu'on ait à l'expliquer. */
/* L'anecdote tient la droite, quand le coup de cœur tient la gauche : la page
   descend en zigzag au lieu de s'aligner toujours sur le même bord. */
.fiche.anecdote{
  display:grid;grid-template-columns:1fr clamp(200px,24vw,300px);
  gap:clamp(20px,3vw,36px);align-items:center;
  max-width:700px;margin-left:auto;padding:26px 28px;
}
.fiche.anecdote .dit{min-width:0;}
.fiche.anecdote h3{font-size:clamp(23px,2.9vw,31px);line-height:1.07;margin-bottom:12px;}
.fiche.anecdote .montre video{
  width:100%;display:block;border-radius:9px;background:#0d0f13;max-height:420px;
}
/* L'emplacement d'une vidéo pas encore déposée. Les hachures grises faisaient
   « image manquante » — un défaut, pas une promesse. Une plaque sombre avec
   le mot en lettres d'or dit la même chose, mais volontairement. */
.attente-media{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:180px;border-radius:9px;padding:34px 20px;text-align:center;
  background:#191c17;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.22em;
  font-size:15px;font-weight:600;color:var(--or-clair);
}
.attente-media::before{
  content:"";width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(245,166,35,.45);
  background:radial-gradient(circle at 50% 50%, rgba(245,166,35,.22) 0 40%, transparent 41%);
}
.attente-media::after{
  content:"Ça arrive";font-size:10px;letter-spacing:.14em;font-weight:400;
  color:rgba(236,232,222,.55);text-transform:none;font-style:italic;
}
/* Une anecdote déposée en son plutôt qu'en vidéo. */
.ecoute-anecdote{
  display:flex;align-items:center;gap:14px;justify-content:center;
  background:#191c17;border-radius:9px;padding:26px 20px;
}
.lire-anecdote{
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:var(--or-clair);color:#191c17;font-size:16px;line-height:1;
}
.ecoute-anecdote .duree{
  font-family:'Oswald',sans-serif;letter-spacing:.12em;font-size:11px;color:#a49e93;
}
.fiche.anecdote audio{width:100%;margin-top:10px;}
@media (max-width:780px){
  .fiche.anecdote{grid-template-columns:1fr;}
  .fiche.anecdote .montre{order:-1;}
}

/* ---------- le coup de cœur de la semaine ----------
   La photo était un bandeau de 340 px en tête de carte : elle écrasait le
   reste et la rubrique venait coller à ses voisines. C'est maintenant un
   petit tirage encadré posé à côté du texte — comme une photo punaisée sur
   le mur — et on l'ouvre en grand d'un clic. */
.fiche.coeur{display:grid;grid-template-columns:clamp(140px,19vw,200px) 1fr;
  gap:24px;align-items:start;}
.fiche.coeur .dit{min-width:0;}
.media-coeur{margin:0;}
.tirage{
  display:block;width:100%;padding:0;border:none;background:none;
  cursor:zoom-in;position:relative;line-height:0;
  /* Posé un peu de travers, comme une photo punaisée ; on la redresse pour
     la regarder. La classe s'appelle « tirage » et non « vignette » : ce
     dernier nom servait déjà à la petite image comique de la page. */
  transform:rotate(-1.6deg);
  transition:transform .22s ease;
  filter:drop-shadow(0 10px 18px rgba(30,40,28,.28));
}
.tirage:hover,.tirage:focus-visible{transform:rotate(0deg);}
.tirage img,.tirage video{
  width:100%;box-sizing:border-box;aspect-ratio:1/1;object-fit:cover;display:block;
  border:3px solid #3a3733;background:#d3dbd2;
}
.tirage video{background:#0d0f13;}
.tirage .agrandir{
  position:absolute;left:3px;right:3px;bottom:3px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:9.5px;line-height:1;padding:7px 0;text-align:center;
  background:rgba(22,24,20,.84);color:#f4f2ee;
  opacity:0;transition:opacity .18s ease;
}
.tirage:hover .agrandir,.tirage:focus-visible .agrandir{opacity:1;}
.tirage .jouer{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(22,24,20,.74);
  color:#f4f2ee;font-size:15px;line-height:44px;text-align:center;
}
@media (max-width:640px){
  /* Empilé, mais toujours un petit tirage : pleine largeur, la photo
     redeviendrait le bandeau dont on vient de se débarrasser. */
  .fiche.coeur{grid-template-columns:1fr;gap:18px;}
  .media-coeur{max-width:186px;}
}

/* ---------- écouter le jingle d'une rubrique ----------
   Certaines rubriques sont des blocs de la page d'accueil : on n'y « entre »
   pas, il n'y a donc aucun moment où lancer leur jingle tout seul. Ce petit
   bouton est ce moment. Il rejoue à chaque fois qu'on le presse — c'est un
   comique de répétition, ce serait dommage de l'économiser. */
.ecouter-jingle{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.13em;
  font-size:10px;padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--ligne);background:var(--blanc);color:var(--encre);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.ecouter-jingle:hover{background:var(--encre);color:#f4f2ee;border-color:var(--encre);}
.ecouter-jingle[hidden]{display:none;}
.ecouter-jingle .eclair{width:.6em;height:1.1em;}
.ecouter-jingle.passe{background:var(--encre);color:#f4f2ee;border-color:var(--encre);}
/* Sur le bloc noir du murmure, la pastille claire ferait une tache : on
   l'inverse, et c'est le survol qui l'allume. */
.ecoute .ecouter-jingle{background:transparent;color:#f4f2ee;border-color:#3f453d;}
.ecoute .ecouter-jingle:hover,
.ecoute .ecouter-jingle.passe{background:#f4f2ee;color:var(--encre);border-color:#f4f2ee;}

/* Les emplacements où viennent se poser les petits mots et les portails
   déplacés. Vides, ils ne prennent aucune place. */
.emplacement:empty{display:none;}
.emplacement > .large + .large{margin-top:22px;}
/* Les deux marges de l'enseigne d'accueil.

   À 1280 px de fenêtre, la colonne fait 1120 px et l'enseigne 494 : il reste
   313 px de mur nu de chaque côté. Assez pour un pense-bête, pas pour une
   pleine feuille — la largeur est donc imposée ici, quel que soit le format
   choisi dans l'admin, et c'est la taille du texte qui continue de le
   distinguer.

   En dessous du seuil, ces deux emplacements ne sont plus positionnés : ils
   retombent dans le flux, sous l'enseigne. Une note ne doit jamais disparaître
   parce que la fenêtre a rétréci.

   Les deux hauteurs diffèrent exprès : deux feuilles punaisées à la même ligne
   font une symétrie de bureau d'accueil. */
/* En dessous du seuil, les deux marges de l'enseigne retombent dans le flux,
   juste sous l'accroche. Il leur faut de l'air : le scotch de la note dépasse
   de douze pixels vers le haut et venait chevaucher la ligne « Surtout si,
   comme moi, tu es une troupe ! ». Sur grand écran, la règle qui suit remet
   cette marge à zéro puisque la note est alors posée à part. */
.emplacement.cote > .large{margin-top:34px;}

@media (min-width:1200px){
  .entree{position:relative;}
  .emplacement.cote{position:absolute;width:250px;margin:0;}
  .emplacement.cote > .large{padding:0;margin:0;}
  .emplacement.cote .note-service{max-width:100%;flex-basis:100%;}
  /* À hauteur du « Vincent » de l'enseigne, pas au ras du bandeau : plus haut,
     les deux feuilles montaient dans le vide au-dessus du néon. Et rangées au
     bord de la colonne, pas contre le cadre : à 26 px il ne restait que six
     pixels entre la feuille et le néon, ce qui se lisait comme un collage.
     La hauteur est réglée sur le bas de l'éclair de l'enseigne, et vaut pour
     une feuille seule : deux notes dans la même marge descendront plus bas que
     le cadre. Ces valeurs suivent la hauteur de l'enseigne actuelle — changer
     la photo du logo pour une autre proportion demandera de les reprendre. */
  .emplacement.cote.gauche{left:0;top:258px;}
  .emplacement.cote.droite{right:0;top:288px;}
  /* Les deux feuilles remontent vers l'enseigne : à gauche, le coin gauche
     descend et le droit pointe vers le haut ; à droite, l'inverse. Elles se
     relèvent donc l'une vers l'autre au lieu de plonger vers le néon. */
  .emplacement.cote.gauche .note-service{--penche:-2.4deg;--decale:0px;}
  .emplacement.cote.droite .note-service{--penche:2.4deg;--decale:0px;}
}

/* Un grand bouton déplacé ouvre derrière lui son propre emplacement, imbriqué
   dans celui qui l'accueille. Ce qui s'y pose a besoin du même souffle que le
   reste, sinon la note vient coller au bouton. */
.emplacement .emplacement > .large{margin-top:22px;}

/* ---------- la note de service ----------
   Le générique des jingles, affiché par la direction : une feuille scotchée
   au mur. Papier plus chaud que le reste du site, en-tête administratif,
   machine à écrire, signature en bas à droite, et le tout un peu de travers.
   La forme fait la blague ; le texte reste sérieux. */
.note-service{
  position:relative;max-width:520px;margin:0 auto;
  padding:26px 30px 20px;
  background:#f1ece0;border:1px solid #cbc2b0;
  box-shadow:0 16px 32px -20px rgba(30,40,28,.65);
  /* Inclinaison et décalage passent par des variables : le format donne la
     première, la position dans le groupe corrige les deux. Sans ça, chaque
     règle réécrirait la transformation entière et effacerait l'autre. */
  --penche:-.8deg; --decale:0px;
  transform:translateX(var(--decale)) rotate(var(--penche));
}
.note-service .ruban{
  position:absolute;left:50%;top:-12px;width:116px;height:25px;
  transform:translateX(-50%) rotate(1.8deg);
  background:rgba(226,221,204,.78);
  border-left:1px solid rgba(30,40,28,.09);
  border-right:1px solid rgba(30,40,28,.09);
  box-shadow:0 1px 3px rgba(30,40,28,.2);
}
.note-service .entete{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:11px;color:#3a3733;text-align:center;
  padding-bottom:11px;margin-bottom:15px;border-bottom:1px solid #cbc2b0;
}
.note-service p{
  font-family:ui-monospace,"Courier New",Courier,monospace;
  font-size:12.5px;line-height:1.78;color:#2c2922;text-align:left;
}
.note-service .signature{
  margin-top:15px;text-align:right;
  font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.17em;font-size:10px;color:#6a6459;
}
.note-service [hidden]{display:none;}

/* Un petit dessin sur la note. Punaisé au-dessus ou en dessous du texte, au
   choix — c'est le même billet, pas une image à part. La hauteur est bornée :
   un croquis scanné en pleine résolution transformerait sinon le pense-bête
   en affiche. */
.note-service .dessin-note{
  display:block;max-width:100%;height:auto;max-height:230px;
  margin:0 auto 10px;object-fit:contain;
}
.note-service .dessin-note.dessous{margin:12px auto 0;}
.note-service.petite .dessin-note{max-height:150px;}
.note-service.moyenne .dessin-note{max-height:190px;}

/* Trois formats de billet, réglés un par un dans l'admin. Tout se réduit
   ensemble — feuille, marges, en-tête, corps, scotch — sinon un petit billet
   n'est qu'un grand billet mal cadré. Le grand reste le format d'origine :
   un billet qui ne dit rien de sa taille est un grand billet. */
.note-service.moyenne{max-width:400px;padding:20px 24px 16px;--penche:-1.1deg;}
.note-service.moyenne .ruban{width:96px;height:21px;top:-10px;}
.note-service.moyenne .entete{font-size:10px;letter-spacing:.2em;padding-bottom:9px;margin-bottom:12px;}
.note-service.moyenne p{font-size:11.5px;line-height:1.72;}
.note-service.moyenne .signature{margin-top:12px;font-size:9.5px;}

.note-service.petite{max-width:300px;padding:15px 18px 12px;--penche:-1.6deg;}
.note-service.petite .ruban{width:76px;height:18px;top:-9px;}
.note-service.petite .entete{font-size:9px;letter-spacing:.18em;padding-bottom:7px;margin-bottom:10px;}
.note-service.petite p{font-size:10.5px;line-height:1.68;}
.note-service.petite .signature{margin-top:10px;font-size:9px;}

/* Plusieurs notes au même endroit. Elles se partagent la largeur tant qu'elle
   suffit et ne passent à la ligne qu'une fois la place épuisée : deux petites
   tiennent largement côte à côte, deux grandes non. Une seule note ne voit
   aucune de ces règles — elle reste exactement où elle était. */
.mur-notes{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:26px 34px;
}
/* Chaque feuille occupe la largeur de son format, et ne se rétrécit que si la
   ligne déborde. Sans cette base, une note de trois mots se recroqueville
   autour de son texte et le réglage « grande / moyenne / petite » ne veut plus
   rien dire. */
.mur-notes > .note-service{margin:0;flex:0 1 520px;}
.mur-notes > .note-service.moyenne{flex-basis:400px;}
.mur-notes > .note-service.petite{flex-basis:300px;}
/* Chacune penche et se décale à sa façon. Le décalage est un pourcentage de la
   feuille elle-même, donc il reste discret sur une petite note. Plafonné à 5 %
   pour qu'une feuille ne déborde jamais de la colonne. */
.mur-notes > *:nth-child(2){--penche:1.2deg;--decale:4%;margin-top:24px;}
.mur-notes > *:nth-child(3){--penche:-1.9deg;--decale:-5%;}
.mur-notes > *:nth-child(4){--penche:.9deg;--decale:3%;margin-top:18px;}
.mur-notes > *:nth-child(5){--penche:-1.3deg;--decale:-3%;}
.mur-notes > *:nth-child(n+6){--penche:1.5deg;--decale:2%;margin-top:12px;}

@media (max-width:520px){
  .note-service{padding:22px 20px 18px;--penche:-.5deg;}
  /* Sur un téléphone, la largeur est déjà celle de l'écran : seul le corps du
     texte distingue encore les trois formats. Plus d'espace latéral avec lequel
     jouer, donc les décalages horizontaux sont rendus ; les inclinaisons, elles,
     restent — c'est ce qui empêche une pile de feuilles de faire un classeur. */
  .note-service.moyenne{padding:18px 18px 15px;--penche:-.9deg;}
  .note-service.petite{padding:14px 16px 12px;--penche:-1.2deg;}
  .mur-notes{gap:20px;}
  .mur-notes > *{--decale:0px !important;margin-top:0;}
}

/* ---------- le mur qui voyage, en option ----------
   Le mur est fixe par défaut : Pascal l'a essayé mobile le 15 août 2026 et a
   préféré le laisser immobile — ce sont les raccords qui l'ont retenu. Mais il
   veut pouvoir montrer les deux à des proches et leur demander.

   D'où cet interrupteur : ajouter « ?mur=voyage » à l'adresse d'une page, et
   le mur descend avec elle. « ?mur=fixe » ou rien du tout : comme aujourd'hui.
   Le choix se garde le temps de la visite. Rien à déployer, rien à défaire :
   les deux versions cohabitent. */
body.mur-voyage{position:relative;}
body.mur-voyage::before{
  position:absolute;
  /* Un enduit brossé à la chaux, sans motif ni banche. C'est ce qui rend le
     mur voyageur tenable : l'essai précédent utilisait la photo de béton, qui
     se répétait de façon visible — « ce sont les différences et les joints qui
     me retiennent », et c'était juste.

     Cette tuile-ci est une tuile MIROIR : sa moitié basse est le reflet de la
     haute, donc son bas est identique au haut de la suivante. Le raccord est
     mathématiquement invisible, et sur un enduit diffus la symétrie ne se
     remarque pas. À la largeur d'une page ordinaire elle mesure près de cinq
     mille pixels de haut : sur la plupart des pages, elle ne se répète même
     pas une fois. */
  background:url("medias/mur-chaux.jpg") top center / 100% auto repeat-y;
  /* Réglage mesuré, pas estimé. L'enduit brut, passé au filtre du béton,
     donnait une clarté moyenne de 127 sur 255 — le gris parfaitement neutre,
     qui en soft-light ne modifie rien : le mur devenait lisse et la page
     s'éclaircissait. Ici : clarté moyenne 115, exactement celle du béton
     actuel, donc aucune dérive de teinte.

     À savoir tout de même : l'écart entre le plus clair et le plus sombre
     plafonne à 73, là où le béton monte à 119. C'est le matériau qui veut ça,
     pas le réglage — un enduit à la chaux n'a pas les accidents d'un béton
     banché. Le mur sera plus calme. Pousser le contraste au-delà ne rend rien
     de plus : ça écrase les valeurs et l'écart redescend. */
  filter:grayscale(1) brightness(.62) contrast(1.4);
}
/* Le grain suit le mur, sinon il glisserait dessus comme un voile immobile.
   Lui se raccorde sans couture : 200 × 200, tuiles cousues. */
body.mur-voyage::after{position:absolute;}

/* ---------- le filet qui se déroule ----------
   Le geste du menu, repris partout où il y a un lien de texte : un trait qui
   part de la gauche et s'ouvre en un quart de seconde. C'est le mouvement qui
   le rend vivant, pas la couleur.

   Deux orangés, et ce n'est pas une coquetterie : mesuré, l'or clair du menu
   ne donne que 1,2 de contraste sur le mur — il s'y évanouit. Il est fait pour
   le noir de la barre, où il donne 8,5. Sur fond clair, le filet prend donc un
   orange-rouge plus profond (3,25 sur le mur, 4,5 sur une carte) et deux
   pixels d'épaisseur au lieu d'un et demi : un trait aussi fin a besoin de
   cette compensation pour exister. */
.chapeau a,
.lien,
.pied a:not([aria-label]),
.file-orange{position:relative;}

.chapeau a::after,
.pied a:not([aria-label])::after,
.file-orange::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;
  background:var(--filet);transition:right .25s ease;
}
/* Celui-ci recouvre exactement le trait d'encre déjà là. */
.lien::after{
  content:"";position:absolute;left:0;right:100%;bottom:-1.5px;height:1.5px;
  background:var(--filet);transition:right .25s ease;
}
.chapeau a:hover::after,
.lien:hover::after,
.pied a:not([aria-label]):hover::after,
.file-orange:hover::after{right:0;}

/* Le soulignement au survol devient inutile : le filet le remplace. */
.chapeau a:hover{text-decoration:none;}

@media (prefers-reduced-motion:reduce){
  .menu a::after,.chapeau a::after,.lien::after,
  .pied a:not([aria-label])::after,.file-orange::after{transition:none;}
}

/* ---------- le curseur du préveneur de nuit ----------
   Pendant le lancement, le pointeur devient une petite torche : c'est le
   visiteur qui éclaire le site. Un curseur ne s'anime pas — c'est une image
   fixe, aucun navigateur ne fait autrement. Et il n'existe pas sur téléphone,
   faute de pointeur. L'image fait 32 x 32 px : c'est la taille qu'aucun système
   ne refuse. Le point chaud (15 1) est posé sur la pointe de la flamme —
   c'est elle qui désigne, pas le manche.

   Le fichier a changé de nom deux fois : le premier envoyé était corrompu, et
   le deuxième se lisait « allumette » plutôt que « torche » — manche trop
   mince, ligature invisible à cette taille. Le dessin actuel a le manche
   épais, deux bandes de ligature nettes et un contour sombre qui le tient
   sur le mur clair comme sur une photo. À 32 px, il faut trois formes, pas
   dix. Le manche a ensuite été allongé et la flamme réchauffée — elle partait
   trop dans le jaune, elle démarre maintenant sur un rouge sombre. Un nom neuf
   à chaque fois : sinon les navigateurs resservent l'ancienne image gardée en
   mémoire. Dans les champs du formulaire, on rend la barre
   d'écriture : sinon on ne sait plus où l'on tape. */
.curseur-torche,
.curseur-torche .tirage{cursor:url("medias/torche-curseur-c.png") 15 1, auto;}
.curseur-torche a,
.curseur-torche button,
.curseur-torche [role=button],
.curseur-torche label{cursor:url("medias/torche-curseur-c.png") 15 1, pointer;}
.curseur-torche input,
.curseur-torche textarea,
.curseur-torche select{cursor:auto;}

/* ---------- « Ça va être tout noir ! » ----------
   La blague du site actuel, reprise telle quelle. Un interrupteur discret,
   posé à un endroit différent à chaque visite : il ne doit jamais concurrencer
   l'inscription. La diode dit que le courant passe encore ; elle vire au rouge
   au survol — la coupure est annoncée avant le clic. */
.rang-gag{display:flex;margin:14px 0;}
.rang-gag.a-gauche{justify-content:flex-start;}
.rang-gag.a-droite{justify-content:flex-end;}
.rang-gag.au-centre{justify-content:center;}
.btn-noir{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border:1.5px solid var(--ligne);border-radius:4px;
  background:var(--blanc);color:#5f5a51;
  font-family:'Oswald',sans-serif;font-size:10px;text-transform:uppercase;
  letter-spacing:.13em;cursor:pointer;white-space:nowrap;
  transition:color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.btn-noir::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:#3f8f4c;box-shadow:0 0 6px rgba(63,143,76,.8);
  transition:background .25s ease,box-shadow .25s ease;
}
.btn-noir:hover{color:var(--encre);border-color:var(--encre);
  box-shadow:0 2px 10px -4px rgba(0,0,0,.35);}
.btn-noir:hover::before{background:#d94f2b;box-shadow:0 0 9px rgba(217,79,43,.95);}

.tout-noir{
  position:fixed;inset:0;z-index:9999;background:#000;
  display:flex;align-items:center;justify-content:center;padding:30px;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.tout-noir.visible{opacity:1;pointer-events:auto;cursor:pointer;}
.tout-noir p{
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  text-align:center;font-size:clamp(18px,3.6vw,32px);line-height:1.4;
  letter-spacing:.04em;color:#ededea;opacity:0;transition:opacity .5s ease;
}
.tout-noir.parle p{opacity:1;}
@media (max-width:560px){ .btn-noir{font-size:9px;padding:6px 11px;} }

/* ---------- la grande vue du coup de cœur ----------
   Elle s'appelait « visionneuse » — un nom déjà pris par la loupe de la page
   Archives. Ma règle `.visionneuse .fermer`, plus précise que la leur,
   écrasait le bouton de fermeture de cette page-là sans que rien ne le
   signale. Deuxième fois qu'un nom trop commun fait ça : d'abord `vignette`,
   maintenant celui-ci. Un nom par usage, pas un nom par idée. */
.grande-vue{position:fixed;inset:0;z-index:200;display:flex;
  align-items:center;justify-content:center;padding:24px;}
.grande-vue[hidden]{display:none;}
.grande-vue .fond{position:absolute;inset:0;background:rgba(14,16,13,.87);}
.grande-vue .boite{
  position:relative;z-index:1;background:var(--blanc);border-radius:13px;
  max-width:900px;width:100%;max-height:calc(100vh - 48px);overflow:auto;
  display:grid;grid-template-columns:1.15fr 1fr;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.grande-vue .grand{background:#0d0f13;display:flex;flex-direction:column;
  justify-content:center;}
.grande-vue .grand img,.grande-vue .grand video{
  width:100%;display:block;max-height:74vh;object-fit:contain;}
/* La légende appartient à l'image : elle reste sur le fond sombre, sous elle,
   et non dans la colonne de texte où on la lirait comme un paragraphe. */
.grande-vue .legende{
  padding:12px 18px 15px;font-size:12.5px;line-height:1.55;font-style:italic;
  color:#aab1a6;}
.grande-vue .mots{padding:26px 28px 30px;}
.grande-vue h3{font-family:'Oswald',sans-serif;font-weight:600;
  text-transform:uppercase;font-size:clamp(21px,2.5vw,28px);
  line-height:1.08;margin-bottom:12px;}
.grande-vue p{font-size:14px;color:var(--doux);line-height:1.65;}
.grande-vue .date{margin-top:14px;font-family:'Oswald',sans-serif;
  text-transform:uppercase;letter-spacing:.13em;font-size:11px;
  color:var(--tres-doux);}
.grande-vue .fermer{
  position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;
  border-radius:50%;border:none;cursor:pointer;
  background:rgba(22,24,20,.82);color:#f4f2ee;font-size:14px;line-height:1;
}
@media (max-width:760px){ .grande-vue .boite{grid-template-columns:1fr;} }
/* ============================================================================
   18 août 2026 — quatre réglages demandés par Pascal
   ============================================================================ */

/* ---- 1. « Quoi de neuf » : la fenêtre du projet passe à droite -------------
   Elle était sous le texte, ce qui allongeait la carte sans rien montrer de
   plus. À droite, on voit d'un coup d'œil le portrait, ce qui est annoncé, et
   à quoi ça ressemble. */
.fiche.avec-image.avec-fenetre{
  grid-template-columns:clamp(150px,17vw,240px) minmax(0,1fr) clamp(210px,25vw,340px);
  align-items:center;
}
.fiche.avec-image.avec-fenetre .fenetre-projet{
  margin:0;max-width:none;width:100%;
}
.fiche.avec-image.avec-fenetre p{max-width:46ch;}

/* ---- 2. Le bouton « Archives… », mis en avant ------------------------------
   C'est la page qui raconte qui il est. Elle ne peut pas avoir exactement le
   même poids que les autres. Trois choses, sans crier : un cadre doré qui
   double le bord, une ombre plus profonde qui le fait avancer, et une lueur
   qui parcourt lentement le pourtour. */
.portails.seul .portail.vedette,
.portail.vedette{
  position:relative;
  border:1px solid rgba(200,138,60,.42);
  box-shadow:
    0 0 0 1px rgba(240,190,120,.14),
    0 2px 6px rgba(30,40,28,.10),
    0 26px 54px -28px rgba(30,40,28,.72);
  transition:transform .3s ease, box-shadow .3s ease;
}
.portail.vedette:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(240,190,120,.30),
    0 2px 6px rgba(30,40,28,.12),
    0 32px 64px -28px rgba(30,40,28,.8);
}
/* La lueur qui fait le tour : un dégradé plus clair que le reste, tourné
   lentement par une variable d'angle. Le masque ne laisse voir que le bord. */
@property --tour{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.portail.vedette::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  padding:1.5px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--tour),
    rgba(240,190,120,0) 0deg, rgba(240,190,120,0) 250deg,
    rgba(255,214,140,.85) 305deg, rgba(255,236,190,.95) 330deg,
    rgba(240,190,120,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:tourne-vedette 7s linear infinite;
}
@keyframes tourne-vedette{ to{ --tour:360deg; } }
/* Sans la propriété enregistrée, l'angle ne s'anime pas : on garde alors le
   cadre doré, immobile. Mieux vaut fixe que saccadé. */
@supports not (background: conic-gradient(from 0deg, red, blue)){
  .portail.vedette::after{display:none;}
}
/* Le petit galon « la pièce maîtresse » en haut de la carte. */
.portail.vedette .galon{
  position:absolute;top:0;left:0;z-index:4;
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.18em;
  background:linear-gradient(100deg,#c8802c,#e8a94a);color:#1b1a16;
  padding:5px 12px 5px 14px;border-radius:0 0 10px 0;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.5);
}
.portail:not(.vedette) .galon{display:none;}

/* ---- 3. Le bouton « Les vidéos » montre la vidéo du moment -----------------
   Un bouton qui annonce des vidéos sans en montrer une seule demande un acte
   de foi. Celle-ci vient de la page Vidéos : rien à tenir à jour deux fois. */
.bande-videos{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:2px 0 16px;padding:9px;border-radius:9px;
  background:rgba(20,24,19,.055);border:1px solid rgba(30,40,28,.10);
  max-width:min(100%,392px);box-sizing:border-box;align-self:flex-start;
}
.portail.sombre .bande-videos{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);
}
.bande-videos .ecran{
  position:relative;flex:0 0 82px;width:82px;height:52px;
  border-radius:5px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
}
.bande-videos .ecran img,
.portails .portail .bande-videos .ecran img{
  width:100%;height:100%;display:block;object-fit:cover;
  max-width:none;min-width:0;flex:none;align-self:auto;
  aspect-ratio:auto;border:0;border-radius:0;
}
/* Le triangle ne se pose que sur la première : répété quatre fois, il
   bariole la bande au lieu de dire « ça se regarde ». */
.bande-videos .ecran.premier::after{
  content:"\25B6";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:14px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.85);
}
.bande-videos .combien-videos{
  flex:0 0 auto;margin-left:3px;
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.13em;font-size:9.5px;color:var(--doux);
}
.portail.sombre .bande-videos .combien-videos{color:#c9cdbf;}
@media (max-width:620px){
  .bande-videos{justify-content:center;align-self:center;}
}

/* ---- 4. La pensée : la flèche pour en lire une autre ---------------------- */
.autre-pensee{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  background:none;border:1px solid var(--ligne);border-radius:999px;
  padding:7px 15px;cursor:pointer;color:var(--doux);
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  font-size:10px;letter-spacing:.16em;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.autre-pensee:hover{border-color:var(--filet);color:var(--filet);background:rgba(184,66,8,.05);}
.autre-pensee .fleche{font-size:13px;line-height:1;}
.pensee blockquote{transition:opacity .18s ease;}
.pensee blockquote.change{opacity:0;}

@media (prefers-reduced-motion:reduce){
  .portail.vedette::after{animation:none;}
  .pensee blockquote{transition:none;}
}

/* ---- sur téléphone --------------------------------------------------------
   La carte à trois colonnes se déplie, et surtout : en colonne, « flex:0 1
   620px » ne fixait plus une largeur mais une HAUTEUR. Le texte de la pensée
   se retrouvait haut de 620 px et poussait la couverture du livre tout en bas
   du bloc, très loin du reste. C'était ça, le défaut signalé. */
@media (max-width:900px){
  .fiche.avec-image.avec-fenetre{
    grid-template-columns:clamp(140px,20vw,200px) minmax(0,1fr);
  }
  .fiche.avec-image.avec-fenetre .cote-projet{grid-column:1 / -1;}
  .fiche.avec-image.avec-fenetre .fenetre-projet{max-width:520px;}
}
@media (max-width:760px){
  .pensee-texte{flex:0 1 auto;}
  .pensee{gap:22px;}
  .livre{order:2;}
  .fiche.avec-image.avec-fenetre{grid-template-columns:1fr;}
  .fiche.avec-image.avec-fenetre img{max-width:190px;}
  .portail.vedette .galon{font-size:8.5px;padding:4px 10px 4px 12px;}
}

/* ---- 5. Le titre « Quoi de neuf » devient cliquable ------------------------
   Il mène à la page qui montre tous les rendez-vous. Il ne doit pas pour
   autant ressembler à un lien : le filet orange, qui se déroule au survol,
   suffit à le dire. */
.chapeau h2 .titre-lien{
  color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  position:relative;
}
.chapeau h2 .titre-lien::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;
  background:var(--filet);transition:right .32s ease;
}
.chapeau h2 .titre-lien:hover::after{right:0;}

/* ---- la vitrine vidéo : reprendre la main sur les règles du grand bouton ---
   « .portails.seul .portail img » impose une largeur en POURCENTAGE. Dans une
   vignette qui se dimensionne sur son contenu, ce pourcentage n'a rien à quoi
   se rapporter : le cadre gonflait à 511 px pour une image de 140. D'où ces
   règles plus précises, qui reprennent la main sur les trois propriétés en
   cause — largeur, proportion, bordure. */
/* ============================================================================
   LE BOUTON « ARCHIVES… » — la pile de tirages
   ----------------------------------------------------------------------------
   Il ne s'agit plus de le décorer un peu : il doit se voir comme incontournable.
   Trois moyens, et le premier fait tout le travail :

   1. Une PILE de tirages au lieu d'une photo. Des vraies photos de la galerie,
      qui dépassent en désordre derrière celle que Pascal a choisie. Rien
      d'autre sur la page n'a cette allure — on comprend « archives » avant
      d'avoir lu le titre.
   2. La carte prend de la HAUTEUR et de l'air : elle ne se lit plus comme une
      ligne parmi d'autres.
   3. Le nombre de souvenirs, écrit. « 34 souvenirs », c'est une promesse.
   ============================================================================ */

.portails.seul .portail.vedette{
  /* Un cran au-dessus des autres boutons : c'est le bouton vedette, et la
     différence doit se voir sans se remarquer. Environ un dixième de plus
     que les valeurs d'origine (24/3.4/42 et 26/4/52). */
  padding:clamp(27px,3.8vw,47px);
  gap:clamp(29px,4.4vw,57px);
  align-items:center;
}

/* ---- la pile ------------------------------------------------------------- */
.pile-archives{
  position:relative;flex:none;align-self:center;
  width:clamp(242px,33%,396px);
  aspect-ratio:4/3;
  display:block;
}
.tirage-pile{
  position:absolute;inset:0;display:block;
  background:#fbf9f4;padding:7px 7px 24px;      /* la marge blanche du tirage */
  border-radius:2px;
  box-shadow:0 1px 2px rgba(20,24,19,.20), 0 14px 30px -16px rgba(20,24,19,.75);
  transition:transform .42s cubic-bezier(.2,.7,.3,1);
  transform-origin:50% 85%;
}
.portails.seul .portail.vedette .tirage-pile img,
.pile-archives img{
  width:100%;height:100%;display:block;
  aspect-ratio:auto;object-fit:cover;
  border:0;border-radius:0;
}
/* Le désordre : trois angles pris au hasard une fois pour toutes, pas au
   hasard à chaque visite — un bouton qui bouge tout seul inquiète. */
.tirage-pile.t1{transform:rotate(-9deg)   translate(-13px, 7px) scale(.93);}
.tirage-pile.t2{transform:rotate(7.5deg)  translate(15px, -5px) scale(.95);}
.tirage-pile.t3{transform:rotate(-3.5deg) translate(-4px, -11px) scale(.97);}
.tirage-pile.dessus{
  transform:rotate(1.6deg);
  box-shadow:0 2px 4px rgba(20,24,19,.22), 0 22px 44px -18px rgba(20,24,19,.85);
}
/* Au survol, la pile s'ouvre en éventail : on sent qu'il y en a d'autres. */
.portail.vedette:hover .tirage-pile.t1{transform:rotate(-15deg)  translate(-25px, 10px) scale(.93);}
.portail.vedette:hover .tirage-pile.t2{transform:rotate(13deg)   translate(27px, -9px) scale(.95);}
.portail.vedette:hover .tirage-pile.t3{transform:rotate(-6.5deg) translate(-9px, -18px) scale(.97);}
.portail.vedette:hover .tirage-pile.dessus{transform:rotate(1.6deg) translateY(-5px);}

/* ---- le nombre de souvenirs ---------------------------------------------- */
.combien-souvenirs{
  position:absolute;right:-10px;bottom:-12px;z-index:6;
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:10px;letter-spacing:.16em;
  background:#191c17;color:var(--or-clair);
  padding:7px 13px;border-radius:999px;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
  white-space:nowrap;
}

/* ---- le texte, à la hauteur de la pile ----------------------------------- */
.portail.vedette h3{font-size:clamp(16.5px,1.66vw,21px);letter-spacing:.15em;}
.portail.vedette p{font-size:15.5px;max-width:54ch;}
.portail.vedette .bouton{align-self:flex-start;}

@media (max-width:760px){
  .portails.seul .portail.vedette{padding:20px;gap:30px;}
  .pile-archives{width:min(74%,270px);align-self:center;margin:6px auto 4px;}
  .combien-souvenirs{right:-4px;bottom:-10px;font-size:9px;padding:6px 11px;}
  .portail.vedette p{font-size:14px;}
}
@media (prefers-reduced-motion:reduce){
  .tirage-pile{transition:none;}
}

/* La carte coupe ce qui dépasse — c'est ce qui fait tenir le bandeau photo des
   boutons ordinaires. Mais la pile penche, et l'éventail du survol sort du
   cadre : ici, on laisse voir. Le décalage à gauche ménage la place. */
.portails.seul .portail.vedette{overflow:visible;}
.portails.seul .portail.vedette .pile-archives{margin-left:14px;}


/* ---- L'enseigne au néon dans l'entrée -------------------------------------
   Une première tentative reconstituait le décor : néon détouré, béton en fond,
   halo en CSS. Le halo du fichier se déposait alors comme un voile laiteux, et
   le béton disparaissait. Inutile : la photo porte déjà sa nuit, son mur et sa
   lumière. On ne fait plus que l'encadrer — et laisser sa lueur déborder un peu
   sur le mur de la page, comme une vraie enseigne éclaire le sien. */
.plaque.neon{
  border-color:#14160f;
  line-height:0;
  box-shadow:
    0 0 44px -6px rgba(255,168,44,.30),
    0 22px 48px -20px rgba(0,0,0,.66);
}
.plaque.neon img{
  max-width:clamp(300px,38vw,520px);
  width:100%;display:block;
}
/* Sur téléphone, l'enseigne prenait 89 % de la largeur et il ne restait que
   40 px entre elle et la barre noire du menu : les deux masses sombres se
   soudaient en un seul bloc lourd, et le sombre montait à 31 % du premier
   écran. On écarte, et on réduit un peu. Sur ordinateur, rien ne change :
   58 px de mur clair séparaient déjà les deux, c'était confortable. */
@media (max-width:640px){
  .plaque.neon img{max-width:min(76vw,300px);}
  .plaque.neon{margin-top:24px;}
}

/* ---- Le direct du club, annoncé sur l'accueil ------------------------------
   Un bandeau et non une fiche : il ne doit pas rivaliser avec les événements
   juste au-dessus. « Quoi de neuf » dit où Pascal sera ; ceci dit ce qui se
   passe sur le site. Deux natures différentes, deux formes différentes. */
.direct-annonce{
  display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);flex-wrap:wrap;
  margin-top:22px;padding:14px 20px;
  background:rgba(20,24,19,.05);
  border:1px solid var(--ligne);border-left:3px solid var(--filet);
  border-radius:10px;text-decoration:none;color:inherit;
  transition:background .2s ease, border-color .2s ease;
}
.direct-annonce:hover{background:rgba(184,66,8,.06);border-color:rgba(184,66,8,.35);}
.direct-annonce .eclair{width:11px;height:19px;fill:url(#degrade-eclair);flex:none;}
.direct-annonce .reserve-club{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.16em;
  background:#191c17;color:var(--or-clair);
  padding:5px 11px;border-radius:999px;flex:none;
}
.direct-annonce .quand{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.1em;color:var(--encre);
}
.direct-annonce .quoi{
  font-size:14.5px;color:var(--doux);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 160px;
}
.direct-annonce .aller{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.13em;
  font-size:10px;color:var(--filet);flex:none;margin-left:auto;
}
@media (max-width:640px){
  .direct-annonce{gap:9px;padding:13px 15px;}
  .direct-annonce .quoi{white-space:normal;flex-basis:100%;}
  .direct-annonce .aller{margin-left:0;}
}

/* Le compte des directs passés, sur la page du club. */
.compte-directs{
  margin-top:16px;text-align:center;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:10.5px;color:var(--doux);
}

/* ---- Le bloc « Quoi de neuf » : le lien vers la liste complète ------------
   Le bloc ne montre que le rendez-vous le plus proche. Ce lien mène à la page
   où tous figurent — sinon rien ne dit qu'il y en a d'autres. */
.fiche.sombre .vers-la-suite{
  /* En « inline-block » il se collait à la suite du bouton « Voir les dates »
     et le chevauchait. Il lui faut sa propre ligne — mais pas toute la
     largeur, sinon le filet orange se déroulerait dans le vide. */
  display:block;width:fit-content;margin-top:20px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.13em;
  font-size:10.5px;color:var(--or-clair);text-decoration:none;
  position:relative;align-self:flex-start;
}
.fiche.sombre .vers-la-suite::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--or-clair);transition:right .32s ease;
}
.fiche.sombre .vers-la-suite:hover::after{right:0;}

/* La flèche entre deux jours, sur la page : « 3 → 12 ». */
.rendez-vous .jour .fleche-jours{
  font-size:.42em;vertical-align:middle;margin:0 .12em;color:var(--or);
  font-weight:400;
}


/* ============================================================================
   LA CARTE COUPÉE — « Quoi de neuf »
   ----------------------------------------------------------------------------
   Une seule carte, fendue verticalement entre le portrait et le texte. Le mur
   du fond apparaît dans la fente : environ un millimètre, soit 4 px.

   Pourquoi : la photo est celle de Pascal, pas celle de l'événement. Enfermée
   dans la même carte, elle se lisait comme l'illustration du rendez-vous. La
   fente le corrige sans rien ajouter — pas de cadre, pas d'agrandissement.

   Les bas sont alignés. Si le portrait est plus haut, il ne dépasse que par
   LE HAUT : c'est le sol qui doit être commun, comme deux affiches collées
   côte à côte sur un mur.
   ============================================================================ */
.fiche.sombre.avec-image.coupee{
  /* La carte elle-même n'est plus qu'une grille : ce sont les deux blocs qui
     portent le fond sombre. */
  background:none;border:0;padding:0;box-shadow:none;border-radius:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px;                       /* la fente, où l'on voit le mur */
  align-items:end;               /* même sol pour les deux blocs */
}
.coupee .bloc-portrait,
.coupee .bloc-dit{
  background:var(--encre);
  padding:24px;
  box-shadow:0 1px 2px rgba(30,40,28,.05), 0 10px 26px -22px rgba(30,40,28,.5);
}
/* Arrondis à l'extérieur seulement : à l'endroit de la coupe, le bord est
   droit — c'est ce qui fait lire « une carte fendue » et non « deux cartes ». */
.coupee .bloc-portrait{border-radius:11px 0 0 11px;}
.coupee .bloc-dit{border-radius:0 11px 11px 0;}

/* Le portrait garde exactement l'aspect qu'il avait avant la coupe. */
.coupee .bloc-portrait .portrait-projet{
  display:block;width:clamp(150px,17vw,240px);
  border:3px solid #3a3733;
}
/* Le bloc de droite reprend la mise en trois temps : le texte, puis la
   fenêtre du projet. */
.coupee .bloc-dit{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:28px;align-items:center;
}
.coupee.avec-fenetre .bloc-dit{
  grid-template-columns:minmax(0,1fr) clamp(210px,25vw,340px);
}
.coupee .bloc-dit .cote-projet .fenetre-projet{margin:0;max-width:none;width:100%;}
.coupee .bloc-dit p{max-width:46ch;}

/* La hauteur du bouton d'accueil ne suit plus la longueur du texte.

   Une annonce de 789 signes faisait dix-sept lignes et poussait la carte à
   609 px, contre 275 pour l'annonce précédente : le bloc changeait de taille
   à chaque changement de programme. Le descriptif tient donc dans une boîte
   de quatre lignes, ni plus ni moins — hauteur fixe, débordement coupé, points
   de suspension. Le texte entier reste lisible sur la page « Quoi de neuf ? »,
   où il a la place.

   Le titre est borné à deux lignes pour la même raison : « Les Dicodeurs-Le
   spectacles des 30 ans- » en occupait déjà deux à lui seul. */
.coupee .dit-projet p:not(.lieu){
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  overflow:hidden;height:6.6em;margin-bottom:14px;
}
.coupee .dit-projet h3{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

@media (max-width:900px){
  /* Empilés, les deux blocs redeviennent deux rectangles complets, et la
     fente passe à l'horizontale. */
  .fiche.sombre.avec-image.coupee{grid-template-columns:minmax(0,1fr);align-items:stretch;}
  .coupee .bloc-portrait{border-radius:11px 11px 0 0;text-align:center;}
  .coupee .bloc-dit{border-radius:0 0 11px 11px;}
  .coupee .bloc-portrait .portrait-projet{width:min(190px,52vw);margin:0 auto;}
  .coupee.avec-fenetre .bloc-dit{grid-template-columns:minmax(0,1fr);}
}

/* ---- « Mon coup de cœur » : posé à droite -------------------------------
   Trois blocs de suite commençaient au même bord gauche : le regard n'avait
   plus de raison de bouger. Celui-ci part à droite. C'est une rubrique légère,
   un aparté — l'écarter du fil principal lui va bien, et ça redonne un rythme
   à la page. */
.fiche.seule.coeur{margin-left:auto;margin-right:0;}
@media (max-width:900px){
  .fiche.seule.coeur{margin-left:0;}
}

/* ============================================================================
   LE BOUTON « ARCHIVES… » PASSE AU NOIR
   ----------------------------------------------------------------------------
   Sur le mur clair, le crème est l'état par défaut : c'est le noir qui fait
   l'accent. Et les tirages à marge blanche se détachent bien mieux sur du
   sombre — une pile de photos sur une table le soir.

   Mais la page a déjà d'autres cartes noires. Ce qui distingue celle-ci n'est
   donc plus sa couleur : c'est le filet orange qui tourne autour du cadre.
   Franc, cette fois, et dans les deux orangés du site — l'or de l'éclair et
   le rouge du filet des liens (#b84208). Pas une lumière de console de jeu :
   deux couleurs maison, un tour lent.
   ============================================================================ */
.portail.vedette{
  border:1px solid rgba(184,66,8,.30);
  box-shadow:
    0 0 0 1px rgba(255,170,60,.10),
    0 2px 6px rgba(20,24,19,.20),
    0 28px 58px -28px rgba(20,24,19,.85);
}
.portail.vedette:hover{
  box-shadow:
    0 0 0 1px rgba(255,170,60,.24),
    0 2px 6px rgba(20,24,19,.24),
    0 34px 68px -28px rgba(20,24,19,.9);
}
/* Le filet qui tourne. Plus épais et plus franc que la lueur d'avant : deux
   arcs orangés qui virent au rouge, séparés par du vide, et qui font le tour
   en dix secondes. */
.portail.vedette::after{
  padding:2px;
  background:conic-gradient(from var(--tour),
    rgba(184,66,8,0)     0deg,
    rgba(184,66,8,.85)  38deg,
    rgba(249,168,37,1)  74deg,
    rgba(255,213,74,1)  96deg,
    rgba(239,127,26,.9) 124deg,
    rgba(184,66,8,0)   176deg,
    rgba(184,66,8,0)   184deg,
    rgba(184,66,8,.7)  222deg,
    rgba(249,168,37,.95) 262deg,
    rgba(239,127,26,.8) 300deg,
    rgba(184,66,8,0)   352deg);
  animation-duration:10s;
}

/* ---- ce que le passage au noir demande de rattraper ---------------------- */

/* La pastille du nombre était noire : invisible sur une carte noire. */
.portail.sombre .combien-souvenirs{
  background:linear-gradient(100deg,#c8802c,#e8a94a);
  color:#1b1a16;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.7);
}
/* Le galon doré et la pastille dorée côte à côte feraient doublon : sur fond
   noir, le galon se contente d'un contour. */
.portail.sombre.vedette .galon{
  background:none;color:var(--or-clair);
  border:1px solid rgba(240,190,120,.45);
  border-radius:0 0 10px 0;
  box-shadow:none;
}
/* Le texte de la carte, lisible sur le noir. */
.portail.sombre p{color:#a49e93;}
.portail.sombre .bouton{background:#f4f2ee;color:#191c17;}
/* Les tirages : une ombre plus profonde, sinon ils flottent sans poids. */
.portail.sombre .tirage-pile{
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 34px -14px rgba(0,0,0,.95);
}

/* ---- Les deux filets qui encadraient la pensée -----------------------------
   Ils avaient un rôle quand la page était plus nue : isoler la pensée comme
   une respiration entre deux sections. Depuis, la page s'est remplie de
   cartes, et le mur de fond se voit partout — l'espace sépare mieux qu'un
   trait. Ces deux traits pleine largeur étaient devenus les seuls à ne pas
   souligner un titre : ils se lisaient comme un reste.

   On les retire, on garde le blanc. Les filets sous les titres de section,
   eux, restent : ceux-là font leur travail — ils accrochent le titre à ce
   qu'il annonce. */
.pensee{border-top:0;border-bottom:0;padding-top:26px;padding-bottom:26px;}

/* ---- Le bloc « Quoi de neuf » se clique en entier --------------------------
   On l'appelle un bouton ; il doit s'ouvrir sous le doigt où qu'on le touche.
   Le curseur et un léger soulèvement le disent — sans quoi rien n'indiquerait
   qu'une surface aussi large est cliquable. Les éléments qui ont leur propre
   rôle (billetterie, vidéo) gardent le leur : c'est traité dans le script. */
.fiche.toute-cliquable{cursor:pointer;}
.fiche.toute-cliquable .bloc-portrait,
.fiche.toute-cliquable .bloc-dit,
.fiche.coeur.toute-cliquable .media-coeur,
.fiche.coeur.toute-cliquable .dit{
  transition:transform .22s ease, box-shadow .22s ease;
}
.fiche.toute-cliquable:hover .bloc-portrait,
.fiche.toute-cliquable:hover .bloc-dit,
.fiche.coeur.toute-cliquable:hover .media-coeur,
.fiche.coeur.toute-cliquable:hover .dit{
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(30,40,28,.06), 0 18px 34px -22px rgba(20,24,19,.75);
}
/* Au clavier, on doit voir où l'on est. */
.fiche.toute-cliquable:focus-visible{outline:3px solid var(--or-clair);outline-offset:4px;}
.fiche.toute-cliquable:focus{outline:none;}
/* La fenêtre du projet et les commandes vidéo gardent leur propre curseur. */
.fiche.toute-cliquable video,
.fiche.toute-cliquable audio,
.fiche.toute-cliquable a,
.fiche.toute-cliquable button{cursor:auto;}
.fiche.toute-cliquable a,
.fiche.toute-cliquable button{cursor:pointer;}
@media (prefers-reduced-motion:reduce){
  .fiche.toute-cliquable:hover .bloc-portrait,
  .fiche.toute-cliquable:hover .bloc-dit,
  .fiche.coeur.toute-cliquable:hover .media-coeur,
  .fiche.coeur.toute-cliquable:hover .dit{transform:none;}
}

/* Le lien d'une note de service. Discret, mais c'est un bouton : on doit
   voir qu'on peut appuyer dessus. */
.note-service .lien-note{
  display:inline-block;margin-top:12px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:10px;color:#1b1d18;background:rgba(27,29,24,.09);
  border:1px solid rgba(27,29,24,.22);border-radius:3px;
  padding:7px 13px;text-decoration:none;
}
.note-service .lien-note:hover{background:#1b1d18;color:#f3efe4;border-color:#1b1d18;}

/* La note mise en vedette. Les billets ordinaires sont du papier clair
   punaisé ; celle-ci demande quelque chose au visiteur, et doit se voir
   comme une affiche au milieu des pense-bêtes. */
.note-service.vedette{
  background:#191c17;color:#ece8de;
  border-color:#191c17;
  box-shadow:0 3px 6px rgba(20,22,18,.22), 0 24px 46px -26px rgba(20,22,18,.7);
}
.note-service.vedette .ruban{background:rgba(245,166,35,.42);}
.note-service.vedette .entete{color:var(--or-clair);border-bottom-color:rgba(245,166,35,.32);}
.note-service.vedette p{color:#ece8de;}
.note-service.vedette .signature{color:rgba(236,232,222,.55);}
.note-service.vedette .lien-note{
  background:var(--or-clair);color:#191c17;border-color:var(--or-clair);font-weight:600;
}
.note-service.vedette .lien-note:hover{background:#fff;border-color:#fff;color:#191c17;}