/*
Theme Name: Trapèze
Theme URI: https://trapeze-conseil.com
Author: Jeremy Teurterie
Description: Thème sur mesure du site Trapèze, agence de design de marque. Intégration de la maquette Figma "HOME PAGE - 6".
Version: 0.346.0
Requires PHP: 7.4
License: Proprietary
Text Domain: trapeze
*/

:root {
  --accent: #e30047;
  --black: #000000;
  --white: #ffffff;
  --gutter: clamp(14px, 1.2vw, 23px);
  --edge: clamp(16px, 1.3vw, 25px);
  /* Hauteur de l'en-tete : il est sticky, tout ce qui doit rester visible sous
     lui la lit. */
  --header-h: clamp(70px, 5.73vw, 110px);
  /* Hauteur du logo ; sert aussi a rattraper le vide de son fichier (menu
     mobile). */
  --logo-h: clamp(40px, 3.39vw, 65px);
  /* Gris des filets de separation. */
  --filet: #d7d7d7;
  --font-sans: 'Poppins', -apple-system, sans-serif;
  --font-serif: 'PP Editorial New', 'Playfair Display', Georgia, serif;
}

/* Sous le seuil du menu mobile, 20px de marge laterale partout. */
@media (max-width: 899px) {
  :root { --edge: 20px; }
}

/* Marge des blocs d'images. Egale a --edge aujourd'hui ; le jeton dit ce qui
   est une image, si les deux devaient se separer. */
:root { --edge-media: var(--edge); }

/* Espacements verticaux : 28px sur mobile, independants de la marge laterale. */
:root { --edge-v: var(--edge); }

/* Largeur de la colonne de lecture : les Mentions legales et le corps d'un
   article. Portee par « :root » et non par « .actu » parce que le canevas de
   l'editeur la lit aussi, et qu'il n'a pas d'element « .actu » a qui l'emprunter
   — voir assets/editor-resources.css. */
:root { --actu-colonne: 790px; }

@media (max-width: 899px) {
  :root { --edge-v: 28px; }
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * Safari iOS ne grossit plus les textes de lui-meme quand un bloc deborde la
 * fenetre, ce que le carrousel et la mosaique font a dessein. Ne se voit que
 * sur un vrai telephone.
 *
 * « 100% » et non « none » : le zoom du visiteur reste permis.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Pleine largeur, sans plafond : les clamp() atteignent leur maximum a 1920px,
   base de la maquette, et n'augmentent plus au-dela. */
.site {
  width: 100%;
  margin: 0 auto;
}

.site-main {
  width: 100%;
}

/* ---------- Header ---------- */
/* Releve sur la frame Figma « HOME PAGE - 6 », base 1920px. */

/* Maintenu en haut pendant le defilement. C'est « overflow-x: clip » sur le
   body qui le permet : « hidden » aurait fait du body un conteneur de
   defilement et casse le sticky. Ne pas l'y remplacer. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 clamp(16px, 2.08vw, 40px) 0 clamp(16px, 1.56vw, 30px);
  background: var(--white);
}

/* La barre d'administration de WordPress est fixee au-dessus : l'en-tete se
   cale dessous plutot que de passer derriere. Sous 600px elle redevient
   defilante, il n'y a plus de decalage a prevoir. */
.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

@media screen and (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}

/* Sous 1024px l'en-tete est fixe, et non colle. Les navigateurs mobiles
   changent la hauteur de la fenetre en escamotant leur barre d'adresse :
   colle, l'en-tete decrochait en remontant. Fixe, il ne depend plus de la zone
   de defilement. */
@media (max-width: 1023px) {
  .site-header {
    position: fixed;
    left: 0;
    right: 0;
  }

  /* Sorti du flux, l'en-tete ne reserve plus sa hauteur : le contenu la
     reprend. --header-real, mesure publiee par main.js, et non --header-h :
     sous 640px l'en-tete est en hauteur automatique. */
  .site-main { padding-top: var(--header-real, var(--header-h)); }
}

.site-header__logo {
  /* Repere de la bande des poses, qui se cale sur la boite de l'image. */
  position: relative;
}

.site-header__logo img {
  height: var(--logo-h);
  width: auto;
}

/*
 * Trace du symbole au survol et a la revelation de l'en-tete.
 *
 * Une seule image du debut a la fin : les 35 poses du GIF d'origine sont
 * empilees dans une bande que « steps() » fait defiler. Au repos, la bande
 * montre sa derniere pose. Ne pas relayer vers un autre rendu en fin
 * d'animation : deux rendus du meme symbole ne coincident jamais, et la releve
 * se voit.
 *
 * Bande et non GIF : un GIF ne se pilote pas en CSS. En x4 comme l'export,
 * pour que symbole et mot gardent le meme grain.
 *
 * Si la bande est refaite, changer le nom du fichier : son adresse n'est pas
 * versionnee, monter la version du theme ne la sortira pas des caches.
 */
.site-header__logo-anim {
  position: absolute;
  left: 0;
  top: 0;
  /* La zone du symbole : 260 des 908 colonnes de l'export. */
  width: 28.634%;
  height: 100%;
  background: url(assets/img/logo-trapeze-trace.webp) 0 100% / 100% 3500% no-repeat;
  pointer-events: none;
}

.site-header__logo.is-intro-playing .site-header__logo-anim,
.site-header__logo.is-hover-playing .site-header__logo-anim {
  animation: trapeze-header-trace 1.4s steps(35, jump-none) both;
}

/* 1,4s pour 35 poses : les 40ms par pose du GIF. « jump-none » : la seule
   variante qui passe par la premiere et la derniere pose. */
@keyframes trapeze-header-trace {
  from { background-position-y: 0%; }
  to { background-position-y: 100%; }
}

/* La bande reste sur sa derniere pose, qui est l'etat de repos. */
@media (prefers-reduced-motion: reduce) {
  .site-header__logo.is-intro-playing .site-header__logo-anim,
  .site-header__logo.is-hover-playing .site-header__logo-anim {
    animation: none;
  }
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 48px);
}

.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3.23vw, 62px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav a {
  position: relative;
  font-size: clamp(13px, 0.94vw, 18px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Survol : un filet noir qui se trace de gauche a droite. La pastille CONTACT
   a son propre survol. */
.site-header__nav li:not(.is-pill) a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 0;
  border-bottom: 2px solid var(--black);
  transition: width 0.3s ease;
}

.site-header__nav li:not(.is-pill) a:hover::after,
.site-header__nav li:not(.is-pill) a:focus-visible::after {
  width: 100%;
}

/* Le selecteur de langue garde son survol en couleur : ce n'est pas un
   bouton de navigation, et deux filets cote a cote se liraient mal. */
.site-header__lang a:hover { color: var(--accent); }

/* Entree en pastille : classe « is-pill » (CONTACT). Bordure de 2px, comme le
   filet de survol des autres entrees. */
.site-header__nav li.is-pill a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(34px, 2.4vw, 46px);
  padding: 0 clamp(14px, 1vw, 19px);
  border: 2px solid var(--black);
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Remplissage au survol, et au clavier. */
.site-header__nav li.is-pill a:hover,
.site-header__nav li.is-pill a:focus-visible {
  background: var(--black);
  color: var(--white);
}

.site-header__social {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.68vw, 13px);
}

.site-header__social a {
  display: inline-flex;
  color: var(--black);
  transition: color 0.25s ease;
}

/* Les icones sont des SVG en ligne : elles heritent de « currentColor », donc
   le survol du lien les teinte. */
.site-header__social a:hover,
.site-header__social a:focus-visible {
  color: var(--accent);
}

.site-header__icon {
  display: block;
  width: clamp(16px, 1.2vw, 23px);
  height: auto;
}

.site-header__lang {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.52vw, 10px);
  font-size: clamp(12px, 0.94vw, 18px);
  font-weight: 500;
}

.site-header__lang .is-active { font-weight: 800; }

/* La langue disponible se distingue de l'active par la seule graisse. */
.site-header__lang a { font-weight: 400; }

.site-header__lang-sep {
  width: 1px;
  height: 1.1em;
  background: currentColor;
  opacity: 0.5;
}

/* ---------- Grille projets ---------- */

.project-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 607 / 455;
  background: #f2f2f2;
}

/* Hors du flux : l'image remplit sa tuile, elle ne la dimensionne jamais.
   Dans le flux, une image en portrait trop petite pour être recadrée en 4/3
   — zerda-05.png, 659 x 878 — étirait la grande tuile à sa hauteur et
   trouait la mosaïque (29 septembre 2026). */
.project-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.project-card:hover img { transform: scale(1.03); }

.project-card--large {
  grid-column: span 2;
  grid-row: span 2;
  /* Proportion de repli, que la grille étire à ses deux rangées : seule en
     fin de grille, sans voisines, la grande tuile garde sa forme. */
  align-self: stretch;
  justify-self: stretch;
  aspect-ratio: 607 / 455;
}

.project-card__caption {
  /* Rendu en h2 : la marge par defaut du titre decalerait le cartouche. */
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  min-height: clamp(52px, 4.4vw, 85px);
  padding: 10px clamp(14px, 1.35vw, 26px);
  background: var(--black);
  color: var(--white);
  font-size: clamp(12px, 0.94vw, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.project-card__caption--hover {
  transform: translateY(101%);
  transition: transform 0.35s ease;
}

.project-card:hover .project-card__caption--hover,
.project-card:focus-visible .project-card__caption--hover {
  transform: translateY(0);
}

/* ---------- Vie d'agence ---------- */

@keyframes badge-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Footer ---------- */

/* Releve sur « HOME PAGE - 5 1 » (TRAPEZE V2, base 1920px). Seul ecart assume
   : le vide sous la ligne basse, reduit au quart. */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  padding: clamp(24px, 2.4vw, 46px) 0 clamp(16px, 1.5vw, 29px);
}

.site-footer__inner {
  margin-left: clamp(24px, 25vw, 480px);
  margin-right: clamp(24px, 4.8vw, 92px);
}

.site-footer__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  height: clamp(48px, 3.5vw, 67px);
  padding: 0 clamp(16px, 1.2vw, 24px);
  border: 2px solid var(--white);
  border-radius: 34px;
  font-size: clamp(15px, 1.3vw, 25px);
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.pill:hover {
  background: var(--white);
  color: var(--black);
}

/* Les deux filets de la maquette sont les bordures de cette bande. */
.site-footer__band {
  margin-top: clamp(22px, 2.26vw, 43px);
  border-top: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  padding: clamp(20px, 1.59vw, 31px) 0 clamp(20px, 1.65vw, 32px);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  font-size: clamp(14px, 1.04vw, 20px);
  line-height: 1.45;
}

/* 50px entre les lignes dans la maquette : 29 d'interligne et 21 d'ecart. */
.site-footer__band p { margin: 0 0 1.05em; }
.site-footer__band p:last-child { margin-bottom: 0; }

/* Badge EcoVadis a gauche des reseaux, sa legende centree dessous. */
.site-footer__droite {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 2.6vw, 50px);
}

.site-footer__label {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.52vw, 10px);
}

.site-footer__label img {
  display: block;
  width: clamp(64px, 5.47vw, 105px);
  height: auto;
}

.site-footer__label figcaption {
  font-size: clamp(11px, 0.8vw, 15px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* Mobile et tablette : les reseaux restent au bout de la ligne des
   coordonnees, et le badge passe dessous, centre (13 octobre 2026).
   « contents » rend ses deux enfants a la bande, qui les ordonne. */
@media (max-width: 1023px) {
  .site-footer__band { flex-wrap: wrap; row-gap: clamp(20px, 3vw, 28px); }
  .site-footer__droite { display: contents; }
  .site-footer__contact { order: 1; }
  .site-footer__social { order: 2; }
  /* Seul sur sa ligne, centre dans la bande, la legende sous le badge. */
  .site-footer__label {
    order: 3;
    flex-basis: 100%;
    align-items: center;
  }
}

/* Empilees, dans l'ordre de l'en-tete : Instagram puis LinkedIn. */
.site-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(14px, 1.1vw, 21px);
}

.site-footer__social a {
  display: inline-flex;
  color: var(--white);
  transition: color 0.25s ease;
}

.site-footer__social a:hover { color: var(--accent); }

.site-footer__icon {
  display: block;
  width: clamp(20px, 1.46vw, 28px);
  height: auto;
}

/* Meme filet de survol que l'en-tete, en blanc. Les icones et les pastilles
   gardent leur propre survol. */
.site-footer__contact a,
.site-footer__menu a,
.site-footer__legal a {
  position: relative;
  display: inline-block;
}

.site-footer__contact a::after,
.site-footer__menu a::after,
.site-footer__legal a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  border-bottom: 2px solid var(--white);
  transition: width 0.3s ease;
}

.site-footer__contact a:hover::after,
.site-footer__contact a:focus-visible::after,
.site-footer__menu a:hover::after,
.site-footer__menu a:focus-visible::after,
.site-footer__legal a:hover::after,
.site-footer__legal a:focus-visible::after {
  width: 100%;
}

.site-footer__bottom {
  margin-top: clamp(14px, 1.35vw, 26px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

/* 20 et non 18 comme dans l'en-tete : la bande du pied de page ecrit plus
   gros. */
.site-footer__menu {
  display: flex;
  gap: clamp(20px, 2.3vw, 44px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(14px, 1.04vw, 20px);
}

/* Calee sur la marge du bandeau, comme le reste : c'est le bouton « revenir en
   haut » qui s'ecarte. */
.site-footer__legal {
  display: flex;
  gap: clamp(20px, 2.3vw, 44px);
  font-size: clamp(14px, 1.04vw, 20px);
}

/* Symbole debordant a gauche et coupe en bas, comme dans la maquette. */
.site-footer__symbol {
  position: absolute;
  left: clamp(-81px, -4.2vw, -30px);
  bottom: -6.9%;
  width: clamp(180px, 26.6vw, 511px);
  pointer-events: none;
}

/* ---------- Retour en haut ---------- */

/*
 * Meme pastille que la fleche de l'intro, en blanc au-dessus du pied de page.
 * Masquee par defaut, revelee par main.js : sans JavaScript elle n'apparait
 * pas.
 *
 * Serree contre le bord pour tenir entre la marge du bandeau et la fenetre.
 * Entre 1000 et 1300px, sa zone de clic mord de quelques pixels sur la ligne
 * legale.
 */
.to-top {
  position: fixed;
  right: clamp(6px, 0.5vw, 12px);
  bottom: clamp(10px, 1.04vw, 20px);
  z-index: 20;
  margin: 0;
  padding: clamp(6px, 0.6vw, 12px);
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 400ms;
}

.to-top.is-visible {
  opacity: 0.9;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 0s;
}

.to-top.is-visible:hover,
.to-top:focus-visible {
  opacity: 1;
}

/* 46px au plus sur grand ecran. Le plancher de 38 garde, avec le rembourrage,
   une cible tactile au-dela de 44px. */
.to-top__icon {
  display: block;
  width: clamp(38px, 2.4vw, 46px);
  height: auto;
}

/* Le cercle reste en retrait, la pointe porte le regard. */
.to-top__ring {
  opacity: 0.45;
  transition: opacity 300ms ease;
}

.to-top__tip {
  transition: transform 300ms ease;
}

.to-top:hover .to-top__ring,
.to-top:focus-visible .to-top__ring {
  opacity: 1;
}

.to-top:hover .to-top__tip,
.to-top:focus-visible .to-top__tip {
  transform: translateY(-2px);
}

.to-top:focus-visible {
  outline: 1px solid var(--white);
  outline-offset: 6px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top.is-visible {
    transform: none;
    transition: none;
  }
}

/* ---------- Page Work ---------- */

/* Releve sur « PROJETS - 4 1 » (49:2) : le bandeau tient dans les 310px de
   gauche, la mosaique va de x=310 a 1900. */
.work {
  display: grid;
  grid-template-columns: clamp(180px, 16.1vw, 310px) minmax(0, 1fr);
  gap: 0;
  padding: 0 clamp(10px, 1.04vw, 20px) clamp(70px, 6.9vw, 133px) 0;
}

/* La colonne court sur toute la hauteur de la mosaique ; ce sont les
   disciplines qui collent, au milieu de l'ecran sous l'en-tete (demande de la
   cliente, 13 octobre 2026). Colonne entiere collante et haute d'un ecran,
   elle remontait des que le pied de page arrivait, et les disciplines avec :
   tout en bas, on ne les voyait plus. */
.work__aside {
  align-self: stretch;
  /* Meme marge des deux cotes : les disciplines sont centrees sur la colonne. */
  padding: 0 clamp(12px, 1.3vw, 25px);
}

/* Le titre n'est plus affiche : il reste pour les lecteurs d'ecran. */
.work__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Interligne a 1 : la gouttiere regle seule le pas entre deux disciplines. */
/* Centrees dans la largeur de la colonne, et collees au milieu de la hauteur
   sous l'en-tete (13 octobre 2026). Le pourcentage d'un « top » collant se
   rapporte a la fenetre : 50 %, plus la moitie de l'en-tete, puis la
   translation ramene le milieu du bloc sur ce point. En fin de mosaique, le
   bloc remonte avec elle et reste visible au-dessus du pied de page. */
.work__filters {
  position: sticky;
  top: calc(50% + clamp(90px, 7vw, 134px) / 2);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(13px, 1.41vw, 27px);
  line-height: 1;
}

/* Connecte, la barre d'administration descend l'en-tete de 32px. */
.admin-bar .work__filters { top: calc(50% + (clamp(90px, 7vw, 134px) + 32px) / 2); }

.work__filter {
  font-size: clamp(12px, 1.04vw, 20px);
  font-weight: 600;
  text-transform: uppercase;
}

.work__filter.is-active,
.work__filter:hover { color: var(--accent); }

/* Trois colonnes de 516px pour 21 de gouttiere, tuiles en 4:3. « dense »
   laisse les petites tuiles combler les trous que laissent les grandes. */
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(10px, 1.09vw, 21px);
}

.work__tile { display: contents; }

/* Retiree de la grille et non seulement transparente : la place ne doit pas
   rester reservee, sinon le filtre laisserait des trous. */
.work__tile.is-hidden { display: none; }

/* Video Digital : meme case qu'un cas dans la mosaique, mais sans lien — elle
   se lit sur place. Figure et non lien, d'ou la marge remise a zero. */
.project-card--video {
  margin: 0;
}

/* Posee sur la case, et non dans son flux : la case tient sa taille de la
   grille, jamais du fichier. Dans le flux, une video en grande tuile sous
   « Tout » — sans proportion, elle — prenait la hauteur de son fichier : 976px
   pour un 4/5, 1387 pour un 9/16, au lieu des 589 de ses voisines. */
.project-card--video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le signe « lecture », au repos : sans lui, rien ne distingue la case d'une
   image. Dans le coin haut, la bande du titre occupant le bas. */
.project-card--video::after {
  content: '';
  position: absolute;
  top: clamp(10px, 1vw, 20px);
  right: clamp(10px, 1vw, 20px);
  width: clamp(34px, 2.3vw, 44px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E")
    center / 50% no-repeat;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.project-card--video.is-playing::after {
  opacity: 0;
}

.project-card--video {
  cursor: pointer;
}

/* Filtre Digital : chaque video a son format, choisi dans sa fiche
   (trapeze_work_video_formats()). Les cases suivent l'ordre sans combler les
   trous : « dense » rangerait une video ailleurs que la ou on l'a mise. */
.work__grid--videos {
  grid-auto-flow: row;
}

/* Une ligne, une hauteur : celle de sa case la plus haute. Les autres s'y
   etirent, et la video, en « cover », se recadre pour remplir. Les deux
   axes en « stretch » : sinon la proportion reprend la main sur la largeur
   et la case deborde de sa colonne. */
.work__grid--videos .project-card {
  align-self: stretch;
  justify-self: stretch;
}

.work__grid--videos .project-card[data-format="large"] {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.work__grid--videos .project-card[data-format="deux-tiers"] {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

/* Le 33 du 66/33 : la proportion qui donne la hauteur du deux-tiers en
   16/9, a l'ecart pres. */
.work__grid--videos .project-card[data-format="tiers"] {
  aspect-ratio: 8 / 9;
}

.work__grid--videos .project-card[data-format="portrait"] {
  aspect-ratio: 4 / 5;
}

.work__grid--videos .project-card[data-format="story"] {
  aspect-ratio: 9 / 16;
}

.work__vide {
  margin: clamp(30px, 3vw, 58px) 0 0;
  font-size: clamp(16px, 1.15vw, 22px);
}

.work__bas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: clamp(20px, 1.9vw, 37px);
}

/* « Voir plus » : meme ecriture que « Tout savoir sur l'agence », mais centre
   sur la page et non sur la mosaique, comme dans l'export. Les remises a zero
   sont celles du <button>. */
.work__more {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 0 0 12px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  font-size: clamp(14px, 1.05vw, 20px);
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}

/* « hidden », pose par work.js, perd contre le « display » ci-dessus. */
.work__more[hidden] {
  display: none;
}

.work__more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  border-bottom: 2px solid currentColor;
  transition: width 0.3s ease;
}

.work__more:hover::after,
.work__more:focus-visible::after {
  width: 100%;
}

.work__agency {
  margin: 0;
}

/* Recopie des boutons des blocs, et non partagee : trapeze-blocks ne depend
   d'aucune classe du theme, et l'inverse. Deux endroits a toucher si
   l'ecriture change. */
.work__agency a {
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
  color: inherit;
  text-decoration: none;
  font-size: clamp(14px, 1.05vw, 20px);
  font-weight: 500;
  text-transform: uppercase;
}

.work__agency a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  border-bottom: 2px solid currentColor;
  transition: width 0.3s ease;
}

.work__agency a:hover::after,
.work__agency a:focus-visible::after {
  width: 100%;
}

/* Sous 900px le bandeau passe au-dessus : garder deux colonnes y laisserait
   moins de 200px a la mosaique. */
@media (max-width: 899px) {
  .work {
    grid-template-columns: minmax(0, 1fr);
    padding-right: var(--edge-media);
  }

  .work__aside {
    padding: clamp(30px, 6vw, 60px) var(--edge) clamp(20px, 4vw, 40px);
  }

  /* Filtres en pastilles, sur une bande qui glisse au doigt : en texte nu, «
     Digital » tombait seul sur une seconde ligne, et la cible tactile etait
     trop petite. La bande ne depend plus du nombre de disciplines. */
  .work__filters,
  .admin-bar .work__filters {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    /* Bord a bord : la pastille coupee par l'ecran dit qu'on peut faire
       glisser. A droite, il faut aussi annuler le --edge-media de « .work ». */
    margin-left: calc(var(--edge) * -1);
    margin-right: calc((var(--edge) + var(--edge-media)) * -1);
    padding-left: var(--edge);
    padding-right: calc(var(--edge) + var(--edge-media));
    /* Pas de barre : le fondu du bord droit annonce la suite. */
    scrollbar-width: none;
    /* Fondu sur le dernier centimetre ; la version prefixee pour Safari. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }

  .work__filters::-webkit-scrollbar { display: none; }

  .work__filter {
    /* « 0 0 auto » : sans lui les pastilles se laisseraient comprimer pour
       tenir dans la bande, ce qui est exactement ce qu'on ne veut pas. */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 clamp(14px, 4vw, 19px);
    border: 2px solid var(--black);
    border-radius: 999px;
    transition: background 0.25s ease, color 0.25s ease;
  }

  /* L'active se lit en plein : la couleur seule ne suffisait pas a ce corps. */
  .work__filter.is-active {
    background: var(--black);
    color: var(--white);
  }

  /* Mosaique avec la marge du site, comme celle de l'accueil, 20px entre les
     tuiles. La droite vient de « .work », la gauche est posee ici : sur
     « .work », elle decalerait aussi le bandeau des disciplines. */
  .work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding-left: var(--edge-media);
  }

  /* Les videos vont par trois : deux colonnes laisseraient un trou apres
     chaque troisieme. Une seule classe, pour que la colonne unique des
     telephones, plus bas, l'emporte encore. */
  .work__grid--videos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  /* Les deux boutons du bas s'empilent, centres : le « Voir plus » absolu
     passait sur le lien de droite. work.js l'insere en tete du bandeau, il
     vient donc au-dessus sans ordre a declarer. */
  .work__bas {
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 4vw, 30px);
  }

  /* « relative » et non « static » : le bouton reste le repere de son filet,
     qui sinon irait se dessiner en bas a gauche de « .work__bas ». */
  .work__more {
    position: relative;
    left: auto;
    transform: none;
  }
}

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

/* Fond noir aussi sur le document : sinon un defilement rapide laisse voir du
   blanc derriere le bandeau colle. */
body.single-work,
body.page-template-page-service { background: var(--black); }

/* Sauf la page service dessinée par trapeze/methode, qui est blanche. */
body.page-template-page-service.service-methode { background: var(--white); }

.project-detail {
  background: var(--black);
  color: var(--white);
}

.project-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 34vw, 654px);
  /* La gouttiere vaut le bord de la page. */
  gap: var(--edge-media);
  align-items: start;
  /* Meme marge en haut, sur les cotes et en bas : 25px a 1920, releve sur «
     PROJETS - SINGLE ». */
  padding: var(--edge-media);
}

/* Chiffres cles, facultatifs : cinq au plus sur une ligne, en Poppins.
   Sous la fiche quand elle ne porte qu'un projet, au bout de chaque galerie
   sinon. Les lettres d'un chiffre (« min », « s ») descendent en petit sur
   la ligne de base. */
.project-chiffres {
  display: grid;
  /* Une colonne ne depasse jamais la largeur qu'elle a sur une ligne de
     quatre : a deux ou trois chiffres, le groupe se resserre au centre au
     lieu de s'etirer d'un bord a l'autre. A cinq, les colonnes se partagent
     la largeur, l'espace libre ne suffisant plus a les porter a ce plafond. */
  --chiffres-gap: clamp(20px, 2vw, 40px);
  grid-template-columns: repeat(var(--chiffres, 4), minmax(0, calc((100% - 3 * var(--chiffres-gap)) / 4)));
  justify-content: center;
  gap: var(--chiffres-gap);
  margin: 0;
  /* Meme blanc au-dessus et au-dessous, mesure sur une legende d'une seule
     ligne : une legende plus longue mord sur le blanc du bas, sans pousser le
     bandeau. En haut, la marge basse de la fiche (--edge-media) s'ajoute
     deja : on la retranche. En bas, on retranche la ligne de legende
     supplementaire qu'une legende sur deux lignes ajoute. */
  --chiffres-blanc: clamp(48px, 5.2vw, 100px);
  --chiffres-ligne: calc(clamp(12px, 0.94vw, 18px) * 1.6);
  padding: calc(var(--chiffres-blanc) - var(--edge-media)) var(--edge-media) calc(var(--chiffres-blanc) - var(--chiffres-ligne));
  list-style: none;
}

.project-detail__chapter .project-chiffres {
  padding-left: 0;
  padding-right: 0;
}

/* Chiffre et legende centres dans leur colonne, a toutes les tailles :
   alignee a gauche, une legende plus large que son chiffre le decentrait. */
.project-chiffres__item {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.project-chiffres__bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  text-align: center;
}

.project-chiffres__valeur {
  font-size: clamp(44px, 5.2vw, 100px);
  font-weight: 600;
  /* Sous 1, la boite du chiffre perd le jambage vide de Poppins : la legende
     remonte au ras des chiffres, comme sur la maquette. */
  line-height: 0.85;
  white-space: nowrap;
}

.project-chiffres__unite {
  font-size: 0.4em;
  text-transform: uppercase;
}

/* La barre oblique de Poppins descend sous la ligne de base, jusque sur la
   legende : reduite et remontee, elle reste dans la hauteur des chiffres. */
.project-chiffres__barre {
  font-size: 0.8em;
  vertical-align: 0.1em;
}

/* Cinq chiffres sur une ligne : plus petits, pour que les nombres a six
   chiffres tiennent dans leur colonne. */
.project-chiffres[style*="--chiffres: 5"] .project-chiffres__valeur {
  font-size: clamp(36px, 4vw, 80px);
}

.project-chiffres__legende {
  margin-top: 0;
  font-size: clamp(12px, 0.94vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  /* Une legende longue se coupe en deux lignes de longueur voisine, comme
     « des joueurs ont participe / au jeu plusieurs fois ». */
  max-width: 15em;
  text-wrap: balance;
}

/* Sur telephone, une seule colonne : a deux par rangee, les chiffres et leurs
   legendes se serraient et se lisaient mal. */
@media (max-width: 767px) {
  .project-chiffres {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 56px;
  }

  /* Seul sur sa ligne, le chiffre a la place de grandir, et la variante a
     cinq n'a plus de raison d'etre plus petite. */
  .project-chiffres .project-chiffres__valeur,
  .project-chiffres[style*="--chiffres: 5"] .project-chiffres__valeur {
    font-size: 64px;
  }
}

/* La galerie est faite de blocs trapeze/work-row, qui portent leur propre
   grille. Ne reste ici que le repli : l'image a la une d'un work sans galerie.
   Pas de selecteurs descendants ici, ils ecrasaient ceux du bloc. */
.project-detail__media > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Accroche a sa position de repos, sous l'en-tete : il ne bouge plus des le
   premier pixel. */
.project-detail__panel {
  position: sticky;
  top: calc(var(--header-h) + var(--edge));
  /* Le meme retrait a droite qu'a gauche : le texte est aussi loin du bord
     de l'ecran que de la galerie. */
  padding: 0 clamp(0px, 1vw, 20px);
}

/* Connecte, la barre d'administration pousse l'en-tete de 32 px (voir plus
   haut) : le panneau suit, sinon il repasse dessous. Sous 782 px la barre
   n'est plus fixee, et sous 1023 px le panneau n'est plus sticky du tout. */
.admin-bar .project-detail__panel {
  top: calc(var(--header-h) + var(--edge) + 32px);
}

/* Au bureau, le panneau defile quand son texte depasse la fenetre : colle, la
   fin en etait inatteignable. Pas de JavaScript : la molette pilote deja un
   conteneur defilant, et le chainage rend la page une fois le texte epuise. */
@media (min-width: 1024px) {
  .project-detail__panel {
    max-height: calc(100vh - var(--header-h) - var(--edge) * 2);
    overflow-y: auto;
    /* Sans barre : elle dessinait une seconde colonne. Le panneau defile
       toujours. */
    scrollbar-width: none;
    /* Le texte qui continue vers le bas s'efface, puis s'arrete un blanc
       avant le bord, comme le titre commence un blanc sous l'en-tete : sans
       ce blanc, en fin de page, le texte touchait le bas de la galerie. Le
       contenu porte le fondu et le blanc en marge basse : au bout du
       defilement, « Voir plus de projets » sort entier. Blanc du bas fixe a
       18 px, un peu plus serre que celui du haut, a la demande. */
    --panneau-fondu: var(--edge-media);
    --panneau-blanc: 18px;
    padding-bottom: calc(var(--panneau-fondu) + var(--panneau-blanc));
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--panneau-fondu) - var(--panneau-blanc)), transparent calc(100% - var(--panneau-blanc)));
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--panneau-fondu) - var(--panneau-blanc)), transparent calc(100% - var(--panneau-blanc)));
  }

  /* Safari ne connait pas « scrollbar-width ». */
  .project-detail__panel::-webkit-scrollbar {
    display: none;
  }

  .admin-bar .project-detail__panel {
    max-height: calc(100vh - var(--header-h) - var(--edge) * 2 - 32px);
  }

  /* Page service : le panneau ne defile pas a part. Sa galerie est courte —
     trois visuels —, la page s'arretait avant que le texte ait fini, et rien
     ne disait qu'il en restait a faire defiler. Il prend toute sa hauteur et
     suit la page, jusqu'a ses deux liens. */
  .project-detail--service .project-detail__panel,
  .admin-bar .project-detail--service .project-detail__panel {
    max-height: none;
    overflow: visible;
    padding-bottom: var(--edge);
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Les exemplaires masques, sortis du flux, depassent de leur pile et
     rendaient le panneau defilable sans raison. On les rogne. */
  .project-detail__bodies,
  .project-detail__disciplines-stack {
    overflow: hidden;
  }
}

/* Deux lignes : le client en grand, le projet dessous. Le titre WordPress est
   le projet, un client pouvant en avoir plusieurs. */
/* Sous le titre, le meme ecart que sous le filet, avant les disciplines : le
   filet respire autant de chaque cote. */
.project-detail__title {
  margin: 0 0 clamp(9px, 0.85vw, 16px);
  font-weight: 600;
}

.project-detail__client,
.project-detail__project {
  display: block;
}

/* 34px a 1920. Le client s'ecrit comme il est saisi, sans capitales forcees
   (demande du 1er octobre 2026 ; « DETAILS PROJETS - 5 » le mettait en
   capitales). */
.project-detail__client {
  font-size: clamp(24px, 1.77vw, 34px);
  line-height: 1.15;
}

.project-detail__project {
  margin-top: clamp(4px, 0.4vw, 8px);
  /* 16px a 1920, comme le texte du panneau. */
  font-size: clamp(14px, 0.83vw, 16px);
  font-weight: 400;
}

/* Un projet sans client : son nom reprend la taille du titre, sinon le
   panneau s'ouvrirait sur une ligne minuscule. */
.project-detail__project:only-child {
  margin-top: 0;
  font-size: clamp(24px, 1.77vw, 34px);
  font-weight: 600;
  line-height: 1.15;
}

/* Deux filets encadrent la ligne de disciplines. */
.project-detail__disciplines {
  margin: 0;
  font-size: clamp(12px, 0.83vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  padding: clamp(9px, 0.85vw, 16px) 0;
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
}

.project-detail__section {
  margin-top: clamp(16px, 1.6vw, 30px);
}

/* La premiere rubrique se rattache au titre du projet ; les suivantes gardent
   leur respiration complete pour que les deux textes restent bien separes. */
.project-detail__body > .project-detail__section:first-child {
  margin-top: clamp(8px, 0.8vw, 15px);
}

/* Au bureau, la question respire un peu plus sous le filet ou les onglets. */
@media (min-width: 1024px) {
  .project-detail__body > .project-detail__section:first-child {
    margin-top: clamp(20px, 1.8vw, 35px);
  }
}

.project-detail__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.project-detail__summary::-webkit-details-marker { display: none; }

/* Fleche au bord droit : vers le bas au repos, vers le haut une fois le texte
   deroule. Elle est dessinee en CSS pour rester nette a toutes les tailles. */
.project-detail__summary::after {
  content: '';
  flex: none;
  width: clamp(12px, 0.83vw, 16px);
  height: clamp(12px, 0.83vw, 16px);
  margin-right: 2px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  /* Le carre tourne a 45 degres deborde vers le bas de la moitie de sa
     diagonale : la remontee le recale sur la ligne du titre, et la descente
     fait de meme une fois le chevron retourne. Les deux suivent sa taille. */
  transform: translateY(-0.2em) rotate(45deg);
  transition: transform 220ms ease;
}

.project-detail__section[open]:not(.is-closing) > .project-detail__summary::after {
  transform: translateY(0.2em) rotate(225deg);
}

/* Pas de contour au focus : Chrome le dessinait aussi apres un clic de
   souris, deux filets au-dessus et au-dessous de la question. */
.project-detail__summary:focus,
.project-detail__summary:focus-visible {
  outline: none;
}

.project-detail__section-content {
  padding-top: clamp(14px, 1.3vw, 25px);
}

/* Sans question, pas de titre au-dessus : le texte n'a pas a s'en ecarter. */
.project-detail__section-content:first-child {
  padding-top: 0;
}

/* La reponse, a l'interieur de la rubrique de la question : la meme
   respiration qu'entre deux rubriques. */
.project-detail__part {
  margin-top: clamp(16px, 1.6vw, 30px);
}

.project-detail__section-content > .project-detail__part:first-child {
  margin-top: 0;
}

/* 700 et non 800 : le theme n'embarque PP Editorial New qu'en 400 et 700.
   Changer le chiffre si le fichier 800 rejoint assets/fonts/. */
.project-detail__heading {
  margin: 0;
  flex: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  /* 25px a 1920. */
  font-size: clamp(20px, 1.3vw, 25px);
  /* Lignes de longueur voisine : pas de mot seul sur la derniere. */
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .project-detail__summary::after { transition: none; }
}

/* « Notre reponse » : une etiquette en tete de son texte et non un titre,
   comme sur la maquette. Les deux-points suivent la typographie de la
   langue. */
.project-detail__label {
  display: block;
  margin-bottom: clamp(14px, 1.3vw, 25px);
  /* 18px a 1920. */
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 700;
  text-transform: uppercase;
}

.project-detail__label::after { content: '\00a0:'; }
.project-detail__label:lang(en)::after { content: ':'; }

/* 18px et non les 22 du texte courant : dans une colonne aussi etroite, 22
   faisait defiler le panneau bien trop longtemps. Plancher a 15 : sous 1024px
   ce texte descend dans la galerie et se lit en continu. */
/* 16px a 1920 (demande du 1er octobre 2026). */
.project-detail__text {
  font-size: clamp(15px, 0.83vw, 16px);
  /* Lignes de 22px pour un texte de 16px : la cliente voulait un texte plus
     serre. En rapport et non en pixels, pour suivre la taille du texte. */
  line-height: 1.375;
}

/* Tailles proposees dans l'editeur, en em pour suivre le clamp du corps. */
.project-detail__text .is-grand { font-size: 1.22em; }
.project-detail__text .is-petit { font-size: 0.83em; }

.project-detail__text p { margin: 0 0 1.4em; }
.project-detail__text p:last-child { margin-bottom: 0; }

/* Onglets des projets d'un meme client : ils remplacent la ligne du nom de
   projet. */
.project-detail__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.7vw, 33px);
  /* En bas, le blanc du haut moins la marge que la premiere rubrique pose
     deja au-dessus d'elle : la question arrive a la meme distance des
     onglets que les onglets du filet. */
  margin: clamp(16px, 1.6vw, 30px) 0 clamp(8px, 0.8vw, 15px);
}

/* L'onglet actif se distingue par le contraste, sans souligne : il y a deja
   deux filets juste au-dessus. */
.project-detail__tab {
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
}

.project-detail__tab:hover {
  opacity: 0.8;
}

.project-detail__tab.is-active {
  font-weight: 700;
  opacity: 1;
}

/* L'ecart entre deux chapitres est porte par le bas du premier : a l'arrivee
   d'un onglet, la bande sous l'en-tete est du vide, et non la fin des images
   du chapitre precedent. */
.project-detail__chapter:not(:last-child) {
  padding-bottom: var(--gutter);
}

/* Les textes et disciplines des projets voisins sont empiles au meme endroit,
   seul l'actif est visible. Les inactifs sortent du flux : la pile prend la
   hauteur du seul affiche. Changement net, sans animation. */
.project-detail__bodies,
.project-detail__disciplines-stack {
  position: relative;
}

.project-detail__body,
.project-detail__disciplines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
}

.project-detail__body.is-active,
.project-detail__disciplines.is-active {
  position: relative;
  visibility: visible;
}

/* Meme ecriture que le « Voir plus » de la mosaique, recopiee : theme et
   plugin ne dependent pas l'un de l'autre. */
/* Titre des projets similaires, « A voir aussi » : le serif italique de la
   question, a sa taille — 25px a 1920 —, sans deux-points. */
.project-detail__similaires-titre {
  display: block;
  /* Le meme ecart qu'entre la question et le premier texte. */
  margin-bottom: clamp(14px, 1.3vw, 25px);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.3vw, 25px);
}

/* Projets similaires : sous leur titre, un lien par ligne, precede d'une
   pastille ronde portant un chevron. Au survol, la pastille s'etire sous
   tout le nom, le chevron s'allonge en fleche et avance, le nom passe en
   noir sur le blanc. En negatif sur le fond noir du panneau. */
.project-detail__similaires ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 0.8vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-detail__similaires a {
  --cercle: clamp(30px, 2.1vw, 40px);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--cercle);
  /* 16px a 1920, comme le texte du panneau. */
  font-size: clamp(14px, 0.83vw, 16px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.project-detail__similaire-cercle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cercle);
  height: var(--cercle);
  border-radius: calc(var(--cercle) / 2);
  background: var(--white);
  transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

/* La tige de la fleche, invisible au repos : seul le chevron se voit. */
.project-detail__similaire-fleche {
  position: absolute;
  top: 50%;
  left: calc(var(--cercle) * 0.28);
  width: calc(var(--cercle) * 0.32);
  height: 1.5px;
  margin-top: -0.75px;
  background: transparent;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.076, 1), background 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.project-detail__similaire-fleche::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 1px;
  width: calc(var(--cercle) * 0.2);
  height: calc(var(--cercle) * 0.2);
  border-top: 1.5px solid var(--black);
  border-right: 1.5px solid var(--black);
  transform: translateY(-50%) rotate(45deg);
}

.project-detail__similaire-nom {
  position: relative;
  padding: 0 calc(var(--cercle) * 0.45) 0 calc(var(--cercle) + 0.8em);
  line-height: var(--cercle);
  transition: color 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.project-detail__similaires a:hover .project-detail__similaire-cercle,
.project-detail__similaires a:focus-visible .project-detail__similaire-cercle {
  width: 100%;
}

.project-detail__similaires a:hover .project-detail__similaire-fleche,
.project-detail__similaires a:focus-visible .project-detail__similaire-fleche {
  background: var(--black);
  transform: translateX(calc(var(--cercle) * 0.25));
}

.project-detail__similaires a:hover .project-detail__similaire-nom,
.project-detail__similaires a:focus-visible .project-detail__similaire-nom {
  color: var(--black);
}

@media (prefers-reduced-motion: reduce) {
  .project-detail__similaire-cercle,
  .project-detail__similaire-fleche,
  .project-detail__similaire-nom {
    transition: none;
  }
}

.project-detail__more,
.project-detail__lien {
  display: inline-block;
  position: relative;
  margin-top: clamp(28px, 3vw, 58px);
  padding-bottom: 12px;
  /* 17px au plus : dans la colonne, le bouton ne doit pas peser plus que le
     texte. */
  font-size: clamp(14px, 0.94vw, 17px);
  font-weight: 500;
  text-transform: uppercase;
}

.project-detail__more::after,
.project-detail__lien::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  border-bottom: 2px solid currentColor;
  transition: width 0.3s ease;
}

.project-detail__more:hover::after,
.project-detail__more:focus-visible::after,
.project-detail__lien:hover::after,
.project-detail__lien:focus-visible::after {
  width: 100%;
}

/* Page service : les deux sorties de fin de texte, l'une sous l'autre. Le
   lien des projets a le dessin de « Voir plus de projets » (une classe a lui :
   sur mobile, project-detail.js deplace et masque les « __more ») ; puis la
   pastille du contact, celle du pied de page ramenee a la taille du texte du
   panneau. La marge haute de « __lien » passe au conteneur. */
.service-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(30px, 2.4vw, 46px);
}

/* Detache du texte au-dessus : le double de l'ecart entre deux parties. */
.project-detail__part.service-cta {
  margin-top: clamp(36px, 3.2vw, 60px);
}

.service-cta .project-detail__lien {
  margin-top: 0;
}

.service-cta .pill {
  height: auto;
  padding: 8px 18px;
  font-size: clamp(14px, 0.94vw, 17px);
}

/* Le savoir-faire d'une page service, quand il est rempli : les tirets de la
   bande des expertises de L'agence. Le tiret sort de l'alinea, les tirets
   forment une colonne nette. */
.project-detail__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-detail__liste li {
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.project-detail__liste li::before {
  content: '- ';
}

.project-detail__liste li + li {
  margin-top: 4px;
}

/* Les domaines de competence d'une page service, sur fond blanc sous la fiche
   noire : le nom de l'expertise a gauche, comme les titres de L'agence, et a
   droite les domaines, serres l'un sous l'autre. */
.service-domaines {
  display: grid;
  /* Le titre a sa largeur, les domaines tout pres, et le couple centre. */
  grid-template-columns: max-content minmax(0, 760px);
  justify-content: center;
  /* L'ecart de L'agence entre « 35 annees d'expertise » et son texte, mesure
     le 3 octobre 2026 : 360px a 1920, 315 a 1440, 279 a 1280. */
  gap: clamp(160px, 21.8vw, 360px);
  align-items: start;
  /* 160px en haut et en bas a 1920. */
  padding: clamp(70px, 8.3vw, 160px) clamp(24px, 6.25vw, 120px);
  background: var(--white);
  color: var(--black);
}

.service-domaines__titre {
  margin: 0;
  /* 100px a 1920. */
  font-size: clamp(40px, 5.2vw, 100px);
  font-weight: 600;
  line-height: 0.94;
  text-transform: uppercase;
}

.service-domaines__titre em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}

.service-domaines__case + .service-domaines__case {
  margin-top: clamp(16px, 1.25vw, 24px);
}

.service-domaines__nom {
  margin: 0 0 clamp(6px, 0.5vw, 10px);
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 600;
  line-height: 1.1;
}

.service-domaines__case p {
  margin: 0;
  max-width: 640px;
  /* 22px a 1920, comme le texte des blocs de L'agence. */
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .service-domaines {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 6vw, 46px);
  }
}

/* ---------- Page L'agence ---------- */

.team {
  padding: clamp(50px, 4.7vw, 90px) var(--edge);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

/* ---------- Single générique ---------- */

.single-project {
  padding: clamp(50px, 6vw, 115px) var(--edge) clamp(70px, 6.9vw, 133px);
  max-width: 1290px;
  margin: 0 auto;
}

.single-project h1 {
  font-size: clamp(26px, 2.4vw, 46px);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 1em;
}

.single-project__content {
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.6;
  margin-top: 2em;
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .site-header__social { display: none; }

  .site-footer__inner { margin-left: clamp(24px, 8vw, 120px); }
  .site-footer__symbol { display: none; }
}

@media (max-width: 899px) {
  .site-footer__inner {
    margin-left: var(--edge-media);
    margin-right: var(--edge-media);
  }
}

@media (max-width: 639px) {
  .site-header__lang { display: none; }

  .site-header {
    height: auto;
    min-height: 60px;
    padding: 10px 16px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* 44px : a 36, le logo paraissait plus petit que la croix. */
  .site-header { --logo-h: 44px; }

  .site-header__nav,
  .site-header__nav ul { gap: 14px; }

  .site-header__nav a { font-size: 12px; }

  /* Une tuile par ligne, comme la mosaique de l'accueil. */
  .work__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-card--large {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 607 / 455;
  }

  /* Colonne unique : le deux-tiers n'a plus de voisin, il reprend sa place
     seul. Le tiers qui le suivait garde la proportion qu'il a seul. */
  .work__grid--videos .project-card[data-format="deux-tiers"] {
    grid-column: auto;
  }

  /* « Nous rejoindre » passe au-dessus. Inverse a l'affichage et non dans le
     gabarit : le bureau garde l'ordre de la maquette. */
  .site-footer__cta {
    justify-content: center;
    flex-direction: column-reverse;
    align-items: center;
  }
  .pill { white-space: normal; height: auto; padding: 12px 20px; text-align: center; font-size: 13px; }
  .site-footer__menu,
  .site-footer__legal {
    flex-wrap: wrap;
    gap: 10px 18px;
  }
}

@media (max-width: 1023px) {
  /* Une colonne, en flex et non en grille : en grille, le panneau n'aurait
     aucune course pour coller. */
  .project-detail__layout {
    display: flex;
    flex-direction: column;
    /* Indispensable : l'« align-items: start » de la grille reduirait ici la
       galerie a zero. */
    align-items: stretch;
    /* Pas de marge haute : le bandeau ouvre directement a sa position collee. */
    padding-top: 0;
  }

  /* Le panneau n'est plus une boite, pour que son bandeau colle sur toute la
     hauteur de la page. */
  .project-detail__panel { display: contents; }

  /* Seul le bandeau (client, disciplines, onglets) reste colle ; le texte,
     trop long, descend dans sa galerie. */
  .project-detail__head {
    position: sticky;
    /* Le bas de l'en-tete, barre d'administration comprise. Publie par
       main.js. */
    top: var(--header-bottom, var(--header-real, var(--header-h)));
    z-index: 2;
    order: -1;
    padding: var(--edge-v) 0 10px;
    background: var(--black);
  }

  .project-detail__tabs { margin-bottom: 8px; }

  .project-detail__layout { row-gap: 0; }

  /* Conditionne a la classe du script et non a « :empty », qui ne matche pas a
     cause des noeuds de texte. Sans script, rien n'est masque. */
  .project-detail.is-eclate .project-detail__bodies { display: none; }

  /* Descendus dans leur chapitre, les textes sont tous visibles et dans le
     flux. */
  .project-detail__chapter .project-detail__body {
    position: static;
    visibility: visible;
    padding-bottom: var(--edge-v);
    padding-left: 0;
    padding-right: 0;
  }

  .project-detail__head {
    padding-left: 0;
    padding-right: 0;
  }

  /* Sous 900px la galerie va bord a bord ; les textes reprennent la marge du
     site par leur rembourrage. */
  @media (max-width: 899px) {
    .project-detail__layout {
      padding-left: 0;
      padding-right: 0;
    }

    .project-detail__head,
    .project-detail__chapter .project-detail__body {
      padding-left: var(--edge);
      padding-right: var(--edge);
    }
  }

  /* Garde dans le fond noir la marge basse du bouton ci-dessous, qui sinon
     traversait la fiche et laissait une bande blanche avant le pied de page. */
  .project-detail {
    display: flow-root;
  }

  /* Un seul appel a l'archive, pose par le script en fin de fiche — apres
     le bandeau des chiffres cles —, aligne a gauche sur la marge du site.
     « fit-content » : son filet partait sinon du bord de la page. En bas, la
     marge de la fiche. */
  .project-detail > .project-detail__more {
    display: block;
    width: fit-content;
    margin: clamp(28px, 3vw, 58px) var(--edge) var(--edge-media);
  }

  /* Les projets a voir aussi, poses par le script juste au-dessus, alignes
     a gauche comme lui, sur la marge du site. */
  .project-detail > .project-detail__similaires {
    margin: clamp(28px, 3vw, 58px) var(--edge) 0;
  }

  /* Les exemplaires restes dans les textes des autres projets. */
  .project-detail__chapter .project-detail__more,
  .project-detail__chapter .project-detail__similaires { display: none; }

  /* La question du projet courant monte dans le bandeau colle, plus petite
     qu'au bureau : 20px, pour que le bandeau ne mange pas l'ecran. Son
     original, en tete du texte, s'efface. Seulement script actif : sans lui,
     les textes restent en place avec leur question. */
  .project-detail.is-eclate .project-detail__question-collee.is-active {
    display: flex;
  }

  .project-detail.is-eclate .project-detail__chapter .project-detail__summary {
    display: none;
  }

  /* Le texte n'a plus de titre au-dessus de lui : pas d'ecart a garder. */
  .project-detail.is-eclate .project-detail__chapter details > .project-detail__section-content {
    padding-top: 0;
  }
}

/* Copie de la question pour le bandeau colle du mobile : masquee partout
   ailleurs. */
.project-detail__question-collee {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  /* Le plancher de l'ecart du bureau sous le filet : a 10px, la question
     collait aux disciplines. */
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  /* 1,4 et non 1,25 : sur deux ou trois lignes, l'italique grasse se
     serrait. */
  line-height: 1.4;
  text-align: left;
  text-wrap: balance;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Le meme chevron que la question du bureau : vers le haut ouvert, vers le
   bas replie. */
.project-detail__question-collee::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg);
  transition: transform 220ms ease;
}

.project-detail__question-collee[aria-expanded="true"]::after {
  transform: translateY(0.2em) rotate(225deg);
}

.project-detail__question-collee:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .project-detail__question-collee::after { transition: none; }
}

/* ---------- Menu mobile ---------- */

/* Sous 900px la nav devient un panneau plein ecran, ouvert par le burger. Bloc
   en fin de feuille a dessein : il repasse devant les « display: none » poses
   plus haut sur les icones et la langue. */

.site-header__burger { display: none; }

@media (max-width: 899px) {
  /* Memes marges des deux cotes, panneau ouvert ou non : le logo et le burger
     ne bougent pas. */
  .site-header {
    padding-left: var(--edge);
    padding-right: var(--edge);
  }

  /* Rattrape le vide du fichier du logo (42px sur 908) : c'est l'encre qui
     s'aligne sur la marge, pas la boite. */
  .site-header__logo { margin-left: calc(var(--logo-h) * -0.162); }

  /* Burger, releve sur « ham-to-x, variante 2 » : quatre traits, ceux du
     milieu superposes. A l'ouverture, les extremes se resorbent et ceux du
     milieu tournent pour former la croix. Rapports a la taille de la boite. En
     CSS et non lottie-web : 250 ko pour quatre traits. */
  .site-header__burger {
    --burger: 46px;
    --bar-w: calc(var(--burger) * 0.667);
    --bar-h: calc(var(--burger) / 24);
    --spread: calc(var(--burger) / 6);
    display: block;
    width: var(--burger);
    height: var(--burger);
    padding: 0;
    border: 0;
    background: none;
    color: var(--black);
    cursor: pointer;
    /* Pas de voile gris sous le doigt : sur mobile il s'attarde apres l'appui
       et se lit comme un temps de reponse. */
    -webkit-tap-highlight-color: transparent;
    /* Au-dessus du panneau : la croix reste cliquable une fois ouvert. */
    position: relative;
    z-index: 2;
    /* Le trait vient au bord de la marge ; la zone tactile garde sa taille. */
    margin-right: calc((var(--burger) - var(--bar-w)) / -2);
  }

  .site-header__burger span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--bar-w);
    height: var(--bar-h);
    margin: calc(var(--bar-h) / -2) 0 0 calc(var(--bar-w) / -2);
    background: currentColor;
    /* Courbe du fichier ; duree ramenee de 430 a 300ms pour suivre le panneau. */
    transition: transform 300ms cubic-bezier(0.167, 0.167, 0.833, 0.833);
  }

  /* Les deux traits visibles du burger, ecartes de part et d'autre. Leur
     origine est posee du cote vers lequel ils se resorbent. */
  .site-header__burger span:nth-child(1) {
    transform: translateY(calc(var(--spread) * -1));
    transform-origin: left center;
  }

  .site-header__burger span:nth-child(4) {
    transform: translateY(var(--spread));
    transform-origin: right center;
  }

  .site-header[data-menu='open'] .site-header__burger span:nth-child(1) {
    transform: translateY(calc(var(--spread) * -1)) scaleX(0);
  }

  .site-header[data-menu='open'] .site-header__burger span:nth-child(4) {
    transform: translateY(var(--spread)) scaleX(0);
  }

  /* Les deux traits du milieu se separent en tournant, 40ms apres les autres,
     a l'ouverture seulement. */
  .site-header[data-menu='open'] .site-header__burger span:nth-child(2) {
    transform: rotate(-45deg);
    transition-delay: 40ms;
  }

  .site-header[data-menu='open'] .site-header__burger span:nth-child(3) {
    transform: rotate(-135deg);
    transition-delay: 40ms;
  }

  /* Le panneau s'ouvre sous l'en-tete, dont --header-real (main.js) donne la
     hauteur reelle. */
  .site-header__nav {
    position: fixed;
    top: var(--header-real, 60px);
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      'menu'
      'social'
      'lang';
    align-content: start;
    justify-items: start;
    gap: clamp(28px, 7vw, 44px);
    padding: clamp(28px, 8vw, 56px) var(--edge)
      calc(var(--edge-v) + 24px);
    background: var(--white);
    overflow-y: auto;
    /* Le defilement ne se propage pas a la page derriere. */
    overscroll-behavior: contain;
    /* Devoilement par clip-path et non par translation : Safari composait le
       fond avant le contenu. Cache, le panneau sort du parcours au clavier. */
    clip-path: inset(0 100% 0 0);
    visibility: hidden;
    pointer-events: none;
    transition:
      clip-path 240ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 240ms;
  }

  .site-header[data-menu='open'] .site-header__nav {
    clip-path: inset(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 240ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }

  .site-header__nav ul {
    grid-area: menu;
    flex-direction: column;
    align-items: start;
    gap: clamp(10px, 2.6vw, 16px);
  }

  /* Cible les seules entrees de menu : « .site-header__nav a » attraperait
     aussi le lien de langue et les deux icones, qui gardent leur taille. */
  .site-header__nav ul a {
    font-size: clamp(19px, 4.8vw, 27px);
    font-weight: 500;
    letter-spacing: 0;
  }

  /* Meme filet que dans la barre, joue a l'appui au doigt. Les deux selecteurs
     repassent devant le « :not(.is-pill) » de la barre, CONTACT compris. */
  .site-header__nav li a::after,
  .site-header__nav li:not(.is-pill) a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    border-bottom: 2px solid var(--black);
    transition: width 0.3s ease;
  }

  .site-header__nav li a:hover::after,
  .site-header__nav li a:focus-visible::after,
  .site-header__nav li a:active::after {
    width: 100%;
  }

  .site-header__nav li.is-pill a {
    display: inline;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  /* Pas de fond noir pour CONTACT dans le panneau : sur tactile, « :hover »
     reste colle apres la tape. Il repond par le filet, comme les autres
     entrees. */
  .site-header__nav li.is-pill a:hover,
  .site-header__nav li.is-pill a:focus-visible,
  .site-header__nav li.is-pill a:active {
    background: none;
    color: inherit;
  }

  /* FR | EN cote a cote, sous les reseaux sociaux. */
  .site-header__lang {
    grid-area: lang;
    display: flex;
    font-size: clamp(16px, 4.4vw, 21px);
  }

  /* La langue inactive est un lien : sans cette reprise, EN restait a la
     taille de la barre, plus petit que FR. */
  .site-header__lang a {
    font-size: inherit;
    font-weight: 400;
  }

  /* 3px a pleine opacite : a 1px le filet disparaissait entre les mentions
     agrandies. */
  .site-header__lang-sep {
    width: 3px;
    opacity: 1;
    /* Hauteur des capitales de Poppins : les deux mentions n'ont que des
       capitales. */
    height: 0.7em;
    align-self: center;
  }

  .site-header__social {
    grid-area: social;
    display: flex;
    gap: clamp(10px, 2.6vw, 14px);
  }

  .site-header__icon { width: 28px; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .site-header__nav,
  .site-header[data-menu='open'] .site-header__nav {
    transition: none;
  }
}

/* Au-dela du seuil, plus de panneau : la nav reprend sa place dans la barre,
   meme si l'attribut « open » est reste pose. */
@media (min-width: 900px) {
  .site-header__nav {
    position: static;
    transform: none;
    visibility: visible;
  }
}

/* ---------- Actualites ---------- */

/* Rubrique sans maquette : valeurs derivees de la page Work. Classes non
   partagees avec « .work », pour que la premiere maquette puisse les separer. */
/*
 * --actu-morsure : part de la photo qui mord la bande noire.
 * --actu-colonne est remontee sur « :root », en tete de feuille : l'editeur la
 * lit hors de toute « .actu ».
 *
 * Pas de commentaire dans ce bloc : Autoptimize y perdait le selecteur
 * suivant.
 */
.actu {
  --actu-morsure: clamp(50px, 6.25vw, 120px);
  padding: 0 0 clamp(70px, 6.9vw, 133px);
}

.actus,
.actu {
  --resources-air-x: clamp(10px, 1.09vw, 21px);
  --resources-air-y: clamp(20px, 2.08vw, 40px);
  --resources-card-content-gap: clamp(14px, 1.04vw, 20px);
  --resources-filter-gap: clamp(20px, 2.6vw, 50px);
  --resources-outer-x: calc(var(--edge) + var(--resources-air-x));
}

/* Sur mobile, la tete d'un article n'ajoute pas sa respiration laterale a la
   marge du site : titre et date tombent a 20px, comme tout le reste. */
@media (max-width: 899px) {
  .actus,
  .actu {
    --resources-air-x: 0px;
  }
}

.actus {
  padding: 0 0 clamp(70px, 6.9vw, 133px);
}

/* Texte lu mais pas vu : le titre de la rubrique Resources, et celui que
   the_posts_pagination() pose au-dessus de la pagination. La classe est celle
   que WordPress attend d'un theme. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fiche article : bande noire bord a bord. Son rembourrage bas est la part de
   la photo qui la mord. */
.actu__tete {
  /* La marge de bord est portee par la colonne, pas ici. */
  padding:
    var(--resources-filter-gap)
    0
    calc(var(--resources-filter-gap) + var(--actu-morsure));
  background: var(--black);
  color: var(--white);
}

/* Une seule colonne pour toute la fiche : 790px au plus, centree, sur la marge
   du site. */
.actu__colonne,
.actu__media,
.actu__content {
  width: min(var(--actu-colonne), 100% - 2 * var(--edge-media));
  margin-inline: auto;
}

.actu__title {
  margin: clamp(14px, 1.9vw, 36px) 0 clamp(18px, 1.88vw, 36px);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 3.33vw, 64px);
  line-height: 1.05;
  text-align: center;
}

.actu__infos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 0.78vw, 15px);
}

/* Grille de douze colonnes : les cartes alternent tiers, moitie et deux tiers.
   La disposition vient de trapeze_resources_disposition() en PHP, qui pose les
   classes : « --droite » ferme sa ligne, « --haute » est la grande carte d'un
   bloc, « --etiree » celle d'une ligne tiers et deux tiers, « --seule » une
   derniere carte sans voisine. */
.actus__list {
  /* La marge de la grille porte la respiration exterieure. Pas de gouttiere,
     pour des filets continus. */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  margin-inline: var(--resources-outer-x);
}

.actu-card--4 { grid-column: span 4; }
.actu-card--6 { grid-column: span 6; }
.actu-card--8 { grid-column: span 8; }

/* Sous le seuil du menu mobile, toutes les largeurs se valent : une colonne. */
@media (max-width: 899px) {
  .actus__list {
    grid-template-columns: 1fr;
    margin-inline: var(--edge-media);
  }

  .actu-card--4,
  .actu-card--6,
  .actu-card--8 { grid-column: auto; }
}

/* Cartes sans fond ni cadre, comme la mosaique des work : visuel et texte
   seuls, separes par des filets. */
.actu-card {
  position: relative;
  background: var(--white);
  padding-top: var(--resources-air-y);
  padding-bottom: var(--resources-air-y);
}

/* Sur une ligne partagee, la respiration reste autour du filet central. Les
   bords exterieurs sont geres une seule fois par la marge de la grille. */
.actu-card { padding-right: var(--resources-outer-x); }
.actu-card--droite {
  padding-right: 0;
  padding-left: var(--resources-outer-x);
}

/* Le filet horizontal suit toute la largeur de la carte afin de rejoindre le
   filet vertical sans trou. La marge de la grille l'arrete toujours avant les
   bords exterieurs de la page. */
.actu-card::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--filet);
}

@media (max-width: 899px) {
  .actu-card {
    padding-right: 0;
    padding-left: 0;
  }

  .actu-card--droite {
    padding-right: 0;
    padding-left: 0;
  }

  .actu-card::after {
    right: 0;
    left: 0;
  }
}

/*
 * Le filet vertical ne separe que les deux cartes d'une meme ligne : il est
 * porte par celle de droite.
 */
@media (min-width: 900px) {
  .actu-card--droite {
    border-left: 1px solid var(--filet);
  }

  /* La grande carte d'un bloc tient deux rangees : les deux cartes d'un tiers
     du bloc s'empilent a cote d'elle, a gauche ou a droite selon le bloc. */
  .actu-card--haute {
    grid-row: span 2;
  }

  /* Derniere carte seule sur sa ligne : le filet que sa voisine aurait porte
     manque, elle le porte donc a droite, pour que la grille ne s'ouvre pas. */
  .actu-card--seule {
    border-right: 1px solid var(--filet);
  }

  /* Premiere ligne : le filet vertical part du haut des photos, rien ne
     l'attend au-dessus. La bordure reste, transparente, pour ne rien decaler. */
  .actu-card--droite:nth-child(2) {
    border-left-color: transparent;
  }

  .actu-card--droite:nth-child(2)::before {
    content: '';
    position: absolute;
    top: var(--resources-air-y);
    bottom: 0;
    left: -1px;
    width: 1px;
    background: var(--filet);
  }
}

.actu-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Rapport de la reference, et non le 4/3 de la mosaique : la carte pleine
   largeur depasserait un ecran. */
.actu-card__media {
  aspect-ratio: 1803 / 1110;
  overflow: hidden;
  /* Comble le cadre autour d'un visuel qui ne le remplit pas. */
  background: var(--black);
}

/* Le visuel d'une ressource n'est jamais rogne (13 octobre 2026) : entier
   dans n'importe quel cadre, la grande carte d'un bloc comprise. Il peut
   porter du texte, qu'un recadrage couperait. */
.actu-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.actu-card__texte {
  display: flex;
  flex-direction: column;
  gap: var(--resources-card-content-gap);
  /* Le texte s'aligne sur le bord du visuel. */
  padding: clamp(14px, 1.25vw, 24px) 0 0;
}

.actu-card__meta {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Simple mention sur la carte. */
.actu-card__date {
  font-size: 1.125rem;
  line-height: 1.2;
}

.actu__date {
  font-size: 1.125rem;
  line-height: 1.2;
}

/* Serif italique, comme les autres titres du site. */
.actu-card__title {
  margin: clamp(6px, 0.52vw, 10px) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  /* Le corps suit la largeur de la carte (voir « --8 » plus bas). */
  font-size: clamp(22px, 2.34vw, 45px);
  line-height: 1.08;
}

.actu-card--8 .actu-card__title {
  font-size: clamp(28px, 3.33vw, 64px);
}

.actu-card__link:hover .actu-card__title { color: var(--accent); }

.actu-card__excerpt {
  /* S'ajoute a l'ecart du bloc, pour detacher l'extrait du titre en serif. */
  margin: clamp(6px, 0.52vw, 10px) 0 0;
  font-size: clamp(14px, 1.15vw, 22px);
  line-height: 1.55;
  /* Les deux premieres lignes de l'article, a toutes les tailles. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Deux cartes d'une meme ligne ont la meme hauteur : titre et extrait
   plafonnes, visuel au meme rapport. Les grandes cartes (« --haute », «
   --etiree ») prennent l'ecart par leur visuel, qui remplit ce que le texte
   laisse ; sa base a zero fait dimensionner le bloc sur les petites cartes. */
@media (min-width: 900px) {
  .actu-card__title,
  .actu-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Deux lignes au plus, sans hauteur reservee : l'extrait suit le titre de
     pres. */
  /* Le rognage coupait les jambages de l'italique — q, j, p — sous une
     interligne de 1.08 (15 octobre 2026). A 1.15 ils tiennent dans la boite.
     Un rembourrage bas les montrait aussi, mais laissait voir le haut de la
     troisieme ligne d'un titre coupe. */
  .actu-card__title {
    -webkit-line-clamp: 2;
    line-height: 1.15;
  }

  .actu-card__excerpt {
    min-height: calc(2em * 1.55);
  }

  .actu-card--haute .actu-card__media,
  .actu-card--etiree .actu-card__media {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }

  .actu-card--haute .actu-card__image,
  .actu-card--etiree .actu-card__image {
    position: absolute;
    inset: 0;
  }
}

/* Rubrique sans article, l'etat du lancement : une annonce centree, dans
   l'italique du titre « Work », qui tient la hauteur d'un ecran pour que le
   pied de page ne remonte pas sous l'en-tete. */
.actus__vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(360px, 55vh, 640px);
  margin-inline: var(--resources-outer-x);
  text-align: center;
}

.actus__vide-titre {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 4.69vw, 90px);
  line-height: 1;
}

.actus__vide-texte {
  max-width: 34em;
  margin: clamp(18px, 1.67vw, 32px) 0 0;
  font-size: clamp(15px, 1.04vw, 20px);
  line-height: 1.5;
}

.actus__vide-lien {
  margin: clamp(28px, 2.6vw, 50px) 0 0;
}

/* Meme ecriture que « Tout savoir sur l'agence » de Work. */
.actus__vide-lien a {
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
  color: inherit;
  text-decoration: none;
  font-size: clamp(14px, 1.05vw, 20px);
  font-weight: 500;
  text-transform: uppercase;
}

.actus__vide-lien a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 45px;
  border-bottom: 2px solid currentColor;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.actus__vide-lien a:hover::after,
.actus__vide-lien a:focus-visible::after {
  width: 100%;
}

/* La photo remonte dans la bande noire de la hauteur de son rembourrage bas.
   Dans la colonne, au rapport des cartes de l'archive. */
.actu__media {
  margin-top: calc(-1 * var(--actu-morsure));
  margin-bottom: 0;
  aspect-ratio: 1803 / 1110;
  overflow: hidden;
  background: var(--black);
}

.actu__image {
  width: 100%;
  height: 100%;
  /* Jamais rogne, comme dans la carte. */
  object-fit: contain;
  display: block;
}

.actu__content {
  margin-top: clamp(40px, 4.17vw, 80px);
  font-size: clamp(14px, 1.04vw, 20px);
  line-height: 1.65;
}

/* 16px sur mobile : un article se lit en continu. */
@media (max-width: 899px) {
  .actu__content {
    font-size: 16px;
  }
}

/* Sans photo, rien ne mord la bande : elle garde le meme rembourrage en bas
   qu'en haut. */
.actu__article:not(:has(.actu__media)) {
  --actu-morsure: 0px;
}

.actu__content > * + * { margin-top: 1em; }

/* Plus d'air autour d'une image qu'entre deux paragraphes (13 octobre 2026). */
.actu__content > .wp-block-image {
  margin-top: clamp(32px, 3.13vw, 60px);
  margin-bottom: clamp(32px, 3.13vw, 60px);
}

.actu__content h2,
.actu__content h3 {
  margin-top: 1.8em;
  font-weight: 600;
  line-height: 1.3;
}

.actu__content h2 { font-size: clamp(20px, 1.67vw, 32px); }
.actu__content h3 { font-size: clamp(17px, 1.35vw, 26px); }

/* Sur mobile, l'intertitre suit le texte passe en 16. */
@media (max-width: 899px) {
  .actu__content h2 {
    font-size: 22px;
  }
}

.actu__content a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Souligne au repos, plus au survol (13 octobre 2026). */
.actu__content a:hover {
  color: var(--accent);
  text-decoration: none;
}

.actu__content img {
  max-width: 100%;
  height: auto;
}

.actu__content blockquote {
  margin-left: 0;
  padding-left: clamp(14px, 1.2vw, 23px);
  border-left: 2px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
}

/* Pagination de la liste. Rendue par WordPress, d'ou les classes qu'il pose. */
.actus__pagination {
  margin-top: clamp(40px, 4.17vw, 80px);
  margin-inline: var(--resources-outer-x);
}

.actus__pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.09vw, 21px);
  align-items: baseline;
}

.actus__pagination .page-numbers {
  font-size: clamp(12px, 1.04vw, 20px);
  font-weight: 600;
  text-transform: uppercase;
}

.actus__pagination .page-numbers.current,
.actus__pagination a.page-numbers:hover { color: var(--accent); }

/* ---------- Page introuvable (404.php) ---------- */

/* Le gabarit dit « not-found » et non « error404 » : « body_class() » pose deja
   « error404 » sur le body, et une regle « .error404 { padding } » s'appliquait
   donc au body entier — 130px de blanc au-dessus de l'en-tete. Garder les deux
   noms distincts. */

/* Le pied de page tient le bas de la fenetre. Cale sur le corps du 404 et non
   sur « .site » en general : le reste du site a toujours de quoi remplir un
   ecran, cette page non, et une regle globale toucherait des gabarits qui ne
   demandent rien. */
body.error404 .site {
  display: flex;
  flex-direction: column;
  /* « svh » et non « vh » : sur mobile la barre d'adresse retractile fait
     mentir « vh » de sa propre hauteur, et le pied de page depasserait. */
  min-height: 100svh;
}

body.error404 .site-main { flex: 1 0 auto; }

.not-found {
  display: flex;
  align-items: center;
  /* Centre dans les deux sens. C'est la seule page du site a ne pas etre calee
     sur la marge de gauche : elle n'a ni grille ni suite, un bloc isole au
     milieu du champ se lit comme une parenthese. */
  justify-content: center;
  /* Le haut respire plus que le bas : l'en-tete sticky mord sur le contenu.
     Les maxima sont retenus : a 1920x1080, ecran courant, des marges plus
     larges poussaient le pied de page 81px sous la ligne de flottaison alors
     que la page tient sans defilement partout ailleurs. Le centrage vertical
     fait le reste du travail des qu'il y a de la place. */
  padding: clamp(48px, 5.7vw, 110px) var(--edge) clamp(36px, 4.4vw, 85px);
}

.not-found__inner {
  /* 46em : la ligne d'accroche casse d'elle-meme avant d'etre trop longue a
     lire, sans point de rupture. */
  max-width: 46em;
  text-align: center;
}

/* Le code d'erreur, en surtitre. C'est le seul endroit de la page ou l'accent
   parait, il porte le regard sur la nature de l'ecran avant le titre. */
.not-found__code {
  margin: 0 0 clamp(10px, 1vw, 18px);
  color: var(--accent);
  font-size: clamp(13px, 0.94vw, 18px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Meme serif italique que les titres d'archive, un cran plus bas : cet ecran
   n'est pas une destination, il ne doit pas peser autant qu'une rubrique. */
.not-found__title {
  margin: 0 0 clamp(16px, 1.6vw, 30px);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 3.85vw, 74px);
  line-height: 1;
}

.not-found__lead {
  /* « auto » sur les cotes : sans ca, sa largeur de lecture de 34em restait
     calee a gauche du bloc centre. */
  margin: 0 auto clamp(28px, 2.9vw, 56px);
  max-width: 34em;
  font-size: clamp(15px, 1.04vw, 20px);
  line-height: 1.6;
}

/* La pastille du pied de page, retournee : le fond est blanc ici. */
.not-found__pill {
  display: inline-flex;
  align-items: center;
  height: clamp(48px, 3.5vw, 67px);
  padding: 0 clamp(20px, 1.5vw, 30px);
  border: 2px solid var(--black);
  border-radius: 999px;
  font-size: clamp(15px, 1.3vw, 25px);
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.not-found__pill:hover,
.not-found__pill:focus-visible {
  background: var(--black);
  color: var(--white);
}