@charset "UTF-8";
/*
Theme Name: Polym Studio
Theme URI: https://polym.fr
Author: Polym Studio — Alexandre Pradel
Author URI: https://polym.fr
Description: Thème bloc sur mesure du site polym.fr : direction artistique, design graphique, photo et vidéo à Bordeaux. Pages et projets en blocs natifs, modifiables dans l’éditeur.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: polym-studio
*/

/* =========================================================
   Polym Studio — maquette
   Registre : charte Polym (orange + Terra Black), fond #F3F1EC
   ========================================================= */

:root {
  --orange: #DC6518;          /* Polym Orange — champ dominant, motif sur orange */
  --orange-clair: #E06C1A;    /* fond de la bannière sous le motif */
  --noir: #1E1511;            /* Terra Black */
  --noir-motif: #000000;      /* motif ton sur ton sur Terra Black */
  --noir-section: #18110E;    /* fond du pied de page à motif : Terra Black assombri de 20 %, le motif ressort moins */
  --fond: #F3F1EC;            /* fond clair validé par le client */
  --filet: rgba(30, 21, 17, .22);
  --filet-clair: rgba(243, 241, 236, .18);

  --f-texte: "acumin-variable", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-riot: "Protest Riot", "Archivo", sans-serif;

  /* Acumin Variable Concept (kit Adobe) : le CSS du kit ne déclare ni largeur ni italique,
     on pilote donc directement les axes de la police.
     wdth : 50 extra-condensé · 67.5 condensé · 90 semi-condensé · 100 normal · 115 large
     slnt : 0 droit · -12 italique */
  --w-xc: 50;
  --w-c: 67.5;
  --w-sc: 90;
  --wdth: 100;
  --slnt: 0;

  --marge: clamp(20px, 3.4vw, 48px);
  /* héro : il occupe l'écran moins la hauteur du premier bandeau, qui reste visible à l'arrivée.
     Corps de « Direction Artistique » (moins fort que le bouton), limité aussi par la hauteur d'écran ;
     bande noire calée sur « ARTISTIQUE » (jusqu'au bas du Q) + --noir-bas (air + pied du héro) */
  --t-hero: min(6.4vw, 96px, 11svh);
  --noir-bas: 90px;
  --coupe: calc(100% - var(--t-hero) * .822 - var(--noir-bas));
  --h-bandeau: calc(clamp(30px, 3.4vw, 50px) + 28px);   /* corps du bandeau + marges + filets */
  --logo-entete: clamp(56px, 4.6vw, 72px);
  --entete-haut: 26px;
  --h-entete: calc(var(--entete-haut) + 26px + var(--logo-entete) * 1.102);
}

*, *::before, *::after {
  box-sizing: border-box;
  font-variation-settings: "wdth" var(--wdth), "slnt" var(--slnt);
}
/* pas d'italique ni de gras simulés : l'italique vient de l'axe slnt */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-synthesis: none; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--noir);
  font-family: var(--f-texte);
  --wdth: var(--w-sc);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ---------- Marques (logos en masque, couleur = currentColor) ---------- */
.logogramme, .logo-complet, .entete__logo a, .pied__logo a, .pourquoi__grille::after, .bandeau__piste > p::after, .visuel-attente::before {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--src) no-repeat center / contain;
          mask: var(--src) no-repeat center / contain;
}
.logogramme, .bandeau__piste > p::after, .visuel-attente::before { --src: url(assets/img/brand/f57.svg); aspect-ratio: 49.76 / 71.83; width: 28px; }
.logo-complet, .entete__logo a, .pied__logo a { --src: url(assets/img/brand/f60.svg); aspect-ratio: 143.43 / 158.07; width: 120px; }

/* ---------- Motif « Direction Artistique », ton sur ton ---------- */
.hero::before, .hero::after, .page-tete::before, .pied::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url(assets/img/brand/motif.svg) no-repeat;
          mask: url(assets/img/brand/motif.svg) no-repeat;
  /* hauteur = la plus grande entre 110 % de la zone et l'échelle d'origine (150vw de large,
     ratio du motif 1,34) : le motif couvre toujours toute la hauteur, même sur mobile */
  -webkit-mask-size: auto max(110%, 112vw);
          mask-size: auto max(110%, 112vw);
  -webkit-mask-position: 38% 46%;
          mask-position: 38% 46%;
}

/* ---------- Éléments communs ---------- */
.label {
  font-size: 12px;
  font-weight: 600;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 26px 40px 24px;
  border: 0;
  font-family: inherit;   /* un <button> (envoi du formulaire) prendrait sinon la police et la bordure du système */
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.bouton::after { content: "\2192"; font-style: normal; --slnt: 0; }
.bouton--noir { background: var(--noir); color: var(--orange); }
.bouton--noir:hover { background: var(--fond); color: var(--noir); }
.bouton--orange { background: var(--orange); color: var(--noir); }
.bouton--orange:hover { background: var(--fond); }

.lien-fleche {
  display: inline-flex;
  gap: .5em;
  font-size: 15px;
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
}
.lien-fleche::after { content: "\2192"; font-style: normal; --slnt: 0; transition: transform .2s; }
.lien-fleche:hover::after { transform: translateX(4px); }

.section { position: relative; padding: 0 var(--marge) clamp(80px, 9vw, 140px); }

.meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  padding: 22px 0 14px;
  margin-bottom: clamp(48px, 6vw, 96px);
  border-bottom: 1px solid var(--filet);
  font-size: 11px;
  font-weight: 600;
  --wdth: var(--w-c);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.meta > :nth-child(2) { text-align: center; }
.meta > :last-child { text-align: right; }

/* tous les H2 : Acumin extra-condensé, ultra-noir, italique, capitales */
.titre-condense {
  font-size: clamp(80px, 13vw, 200px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .8;
  letter-spacing: -.01em;
  text-transform: uppercase;
}


/* =========================================================
   EN-TÊTE
   ========================================================= */
.entete {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--entete-haut) var(--marge) 26px;
  color: var(--noir);
}
.entete__logo { display: flex; color: var(--noir); }
.entete__logo a { width: var(--logo-entete); }
.entete__nav { display: flex; gap: clamp(20px, 2.6vw, 44px); }
.entete__nav a {
  font-size: 15px;
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.entete__liens .wp-block-navigation-item__label::after { font-size: 9px; margin-left: 3px; font-weight: 600; vertical-align: super; }
.entete__nav a:hover { color: var(--fond); }
.entete__nav a[aria-current] { text-decoration: underline 2px; text-underline-offset: 5px; }
.entete__nav .nav-contacts { display: none; }
.entete__cta { justify-self: end; padding: 17px 26px 16px; font-size: 15px; }
.entete__burger { display: none; }
/* bouton menu : celui de l'en-tête (tablette, mobile) et le bouton flottant (toutes tailles) */
.entete__burger, .flottant__burger {
  gap: 6px;
  width: 48px; height: 48px; padding: 17px 11px; border: 0; background: var(--noir); cursor: pointer;
}
:is(.entete__burger, .flottant__burger)::before, :is(.entete__burger, .flottant__burger)::after { content: ""; display: block; height: 2px; background: var(--orange); transition: transform .2s; }
.menu-ouvert :is(.entete__burger, .flottant__burger)::before { transform: translateY(4px) rotate(45deg); }
.menu-ouvert :is(.entete__burger, .flottant__burger)::after { transform: translateY(-4px) rotate(-45deg); }

/* menu ouvert : plein écran orange, quelle que soit la taille d'écran */
.menu-ouvert .entete { position: fixed; bottom: 0; align-content: start; background: var(--orange); }
.menu-ouvert .entete__nav {
  display: grid; position: fixed; inset: var(--h-entete) 0 0; align-content: start; gap: 6px; overflow-y: auto;
  padding: 32px var(--marge); background: var(--orange); border-top: 2px solid var(--noir);
}
.menu-ouvert .entete__nav a { font-size: 54px; font-weight: 900; --wdth: var(--w-xc); line-height: 1; }
.menu-ouvert .entete__liens .wp-block-navigation-item__label::after { font-size: 14px; }
.menu-ouvert .entete__nav .nav-contacts {
  display: grid;
  margin-top: 36px;
  border-top: 2px solid var(--noir);
}
.menu-ouvert .entete__nav .nav-contacts > * {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-bottom: 1px solid rgba(30, 21, 17, .35);
  font-size: 17px;
  font-weight: 600;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.menu-ouvert .entete__nav .nav-contacts .label { width: 44px; font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }

/* =========================================================
   HÉRO
   ========================================================= */
.hero {
  position: relative;
  height: max(calc(100svh - var(--h-bandeau)), 480px);   /* plancher : en dessous, le contenu se chevaucherait */
  max-height: 1100px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--orange-clair) 0 var(--coupe), var(--noir) var(--coupe) 100%);
}
.hero::before, .page-tete::before { background: var(--orange); clip-path: inset(0 0 calc(100% - var(--coupe)) 0); }
.hero::after { background: var(--noir-motif); clip-path: inset(var(--coupe) 0 0 0); }

.hero__intro {
  position: absolute;
  /* bloc central, texte centré */
  left: 50%;
  top: calc((var(--coupe) - var(--t-hero) * .673 + var(--h-entete) - 26px) / 2);   /* centré entre le bas du logo et « DIRECTION » */
  width: min(900px, 76vw);
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}
.hero__accroche {
  font-size: clamp(28px, 3.1vw, 50px);
  line-height: 1.08;
  font-weight: 800;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  color: var(--noir);
  margin-bottom: clamp(24px, 2.4vw, 40px);
  text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 32px; }

.hero__contacts {
  position: absolute;
  /* de la fin de « DIRECTION » jusqu'à la fin de « ARTISTIQUE », posée juste au-dessus de l'horizon noir */
  left: calc(50% + var(--t-hero) * .3);
  right: calc(50% - var(--t-hero) * 3.371);
  bottom: calc(100% - var(--coupe) + clamp(8px, .7vw, 14px));
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-size: max(13px, calc(var(--t-hero) * .17));
  font-weight: 600;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  color: var(--noir);
  white-space: nowrap;
}
.hero__contacts .label { font-size: 10px; margin-right: 6px; opacity: .7; }
.hero__contacts a:hover { color: var(--fond); }

.hero__titre {
  font-size: var(--t-hero);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .78;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.hero__l1, .hero__l2 { position: absolute; z-index: 3; white-space: nowrap; }
/* chevauchements symétriques de l'horizon : la base de « DIRECTION » descend de 0,035 em dans le noir,
   le haut des capitales de « ARTISTIQUE » monte de 0,035 em dans l'orange
   (capitales Acumin = 0,708 em, leur haut est à 0,072 em du haut de la ligne) */
.hero__l1 { right: calc(50% - .05em); bottom: calc(100% - var(--coupe) - .035em); color: var(--noir); }
.hero__l2 { left: 50%; top: calc(var(--coupe) - .107em); color: var(--orange); }

.hero__pied {
  position: absolute;
  left: var(--marge); right: var(--marge); bottom: 22px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  --wdth: var(--w-c);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
}

/* =========================================================
   BANDEAU DÉFILANT
   ========================================================= */
.bandeau {
  background: var(--orange);
  color: var(--noir);
  overflow: hidden;
  border-top: 1px solid var(--noir);
  border-bottom: 1px solid var(--noir);
}
/* l'écart final (padding à droite) égal à l'écart entre les éléments : la piste
   se décale de -50 % pile sur une série, la boucle ne saute pas */
.bandeau__piste {
  --pas: 28px;
  display: flex;
  align-items: center;
  gap: var(--pas);
  width: max-content;
  padding: 14px var(--pas) 12px 0;
  animation: defile 32s linear infinite;
}
.bandeau__piste > p {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.bandeau__piste > p::after { width: clamp(20px, 2vw, 30px); flex: none; }
/* règle : bandeau orange avant une section sombre, bandeau sombre avant une section orange ou claire */
.bandeau--sombre { background: var(--noir); color: var(--orange); border-bottom-color: var(--filet-clair); }
/* bandeau « contact » : fond blanc cassé, contenu Terra Black */
.bandeau--clair { background: var(--fond); color: var(--noir); }
@keyframes defile { to { transform: translateX(-50%); } }

/* =========================================================
   01 · STUDIO
   ========================================================= */
.enonce {
  font-size: clamp(42px, 6.3vw, 96px);
  font-weight: 800;
  --wdth: var(--w-sc);
  line-height: .96;
  letter-spacing: -.025em;
  max-width: 13.5em;
  text-wrap: balance;
  hyphens: none;
}
.enonce em { font-style: normal; --slnt: 0; color: var(--orange); }

.studio__corps {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5.5vw, 96px);
  margin-top: clamp(56px, 7vw, 110px);
  align-items: end;
}
.studio__texte {
  max-width: 760px;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 600;
  line-height: 1.24;
}

.lignes { border-top: 2px solid var(--noir); }
.lignes li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0 16px;
  border-bottom: 2px solid var(--noir);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 700;
  --wdth: var(--w-c);
  text-transform: uppercase;
  line-height: 1.05;
}
/* variante phrases : filets de la liste, texte courant */
.lignes--phrases li {
  display: block;
  padding: 20px 0 18px;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 500;
  --wdth: var(--w-sc);
  line-height: 1.32;
  text-transform: none;
}
.tag {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  font-style: italic; --slnt: -12;
  letter-spacing: .05em;
  color: var(--orange);
}

/* =========================================================
   02 · SERVICES
   ========================================================= */
.services__tete {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(48px, 5vw, 80px);
}
/* citation : italique semi-gras, casse normale, largeur normale — contraste avec le titre */
.citation {
  font-size: clamp(22px, 2.5vw, 40px);
  font-weight: 600;
  font-style: italic; --slnt: -12;
  --wdth: 100;
  line-height: 1.3;
  text-wrap: pretty;
}
.citation strong { font-weight: inherit; color: var(--orange); }
.citation::before { content: "\AB\00A0"; color: var(--orange); }
.citation::after { content: "\00A0\BB"; color: var(--orange); }

.services__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 44px;
  border-top: 1px solid var(--filet);
}
/* colonnes de largeur égale : le filet vertical est tracé au milieu de l'écart */
.service {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  padding-top: 18px;
}
.service + .service::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -22px;
  border-left: 1px solid var(--filet);
}
.service__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin: 6px 0 8px; background: var(--noir); }
:root .service__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
:root .service:hover .service__photo img { transform: scale(1.04); }
/* titre dans l'image, en bas, ferré à gauche — orange sur Terra Black comme la bannière */
.service__titre {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: calc(100% - 24px);
  padding: 11px 16px 9px;
  background: var(--noir);
  color: var(--orange);
  font-family: var(--f-texte);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: 1;
  text-transform: uppercase;
}
.service__texte { font-size: 16px; line-height: 1.4; }
.service__lien { justify-self: start; font-size: 13px; }

/* =========================================================
   03 · MÉTHODE — comment ça marche
   ========================================================= */
.methode { background: var(--fond); color: var(--noir); }
.methode__tete {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 32px;
  justify-items: start;
}

.etapes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(72px, 8vw, 130px);
  border-top: 1px solid var(--filet);
}
.etapes > * {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 260px;
  padding: 20px 26px 0;
  align-content: start;
  border-left: 1px solid var(--filet);
}
.etapes > *:first-child { border-left: 0; padding-left: 0; }
.etapes__num { font-size: 12px; font-weight: 700; --wdth: var(--w-c); letter-spacing: .06em; }
.etapes h3 {
  margin-top: 64px;
  font-size: clamp(24px, 2.2vw, 34px);
  text-wrap: balance;
  font-weight: 800;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1;
  text-transform: uppercase;
}
.etapes p:not(.etapes__num) { font-size: 16px; line-height: 1.42; }

/* =========================================================
   04 · PORTFOLIO
   ========================================================= */
.portfolio__tete {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.portfolio__tete .titre-condense em { color: var(--orange); }

/* un projet par section : même construction que « Où j'interviens »
   (photo de fond, quatre blocs autour d'un centre invisible), mais en clair :
   photo noir et blanc très pâle sur le blanc cassé, texte Terra Black, bouton orange */
.projet {
  --ecart: clamp(20px, 2vw, 32px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "titre cta" "categorie texte";
  min-height: clamp(460px, 62svh, 780px);
  padding: clamp(44px, 7vh, 96px) 0;
  overflow: hidden;
  background: var(--fond);
  color: var(--noir);
}
.projet > :not(.fond-traite) { position: relative; z-index: 2; }
/* H3 « Nom — catégorie » : il couvre toute la grille (sous-grille), le nom et la catégorie
   gardent chacun leur coin ; le tiret n'est lu que par les lecteurs d'écran et Google */
.projet__entete { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.projet .fond-traite { background: var(--fond); }
:root .projet .fond-traite img { filter: grayscale(1); opacity: .25; }
.projet .fond-traite::after { display: none; }
.projet__cta:hover { background: var(--noir); color: var(--orange); }
/* haut gauche — nom du projet */
.projet__titre {
  grid-area: titre;
  align-self: end;
  justify-self: end;
  padding: 0 var(--ecart) var(--ecart) var(--marge);
  font-size: clamp(56px, 6.4vw, 120px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .82;
  letter-spacing: -.01em;
  text-align: right;
  text-transform: uppercase;
  text-wrap: balance;
}
/* haut droite — bouton */
.projet__cta { grid-area: cta; align-self: end; justify-self: start; margin: 0 var(--marge) var(--ecart) var(--ecart); }
/* bas gauche — catégorie */
.projet__categorie {
  grid-area: categorie;
  align-self: start;
  justify-self: end;
  max-width: calc(26ch + var(--ecart) + var(--marge));
  padding: var(--ecart) var(--ecart) 0 var(--marge);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1.25;
  letter-spacing: .03em;
  text-align: right;
  text-transform: uppercase;
}
/* bas droite — description */
.projet__texte {
  grid-area: texte;
  align-self: start;
  max-width: calc(44ch + var(--ecart) + var(--marge));
  padding: var(--ecart) var(--marge) 0 var(--ecart);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.4;
}

/* Logothèque : bandeau défilant plus haut que les autres, au-dessus des projets.
   Exception à la règle des bandeaux : clair, logos Terra Black, sans filets.
   Logos en masque, à la couleur du texte ; à surface égale (largeur × hauteur ≈ --taille²)
   pour qu'un logo carré ne paraisse pas plus petit qu'un logo allongé. */
.bandeau--logos { background: var(--fond); color: var(--noir); border: 0; }
.bandeau--logos .bandeau__piste { --pas: clamp(80px, 9.5vw, 180px); padding-block: clamp(44px, 9vh, 104px); }
.logo-client {
  --taille: clamp(81px, 9vw, 155px);
  flex: none;
  height: calc(var(--taille) / sqrt(var(--r)));
  aspect-ratio: var(--r);
  background: currentColor;
  -webkit-mask: var(--src) no-repeat center / contain;
          mask: var(--src) no-repeat center / contain;
}
.logo-client--botanique   { --r: 1.961; }
.logo-client--gb-coaching { --r: 2.572; }
.logo-client--graphit     { --r: 2.607; }
.logo-client--tricot      { --r: 1.913; }
.logo-client--primordium  { --r: 1.016; }
.logo-client--squidsoup   { --r: 1.376; }
.logo-client--supracore   { --r: 2.772; }
.logo-client--unadvised   { --r: 1; }
.logo-client--via-2-roues { --r: 1.656; }

/* =========================================================
   05 · CE QU'ILS EN DISENT — témoignages
   ========================================================= */
.temoignages { background: var(--fond); color: var(--noir); }
.temoignages__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 32px 64px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.temoignages__chapo { font-size: 18px; line-height: 1.42; }
.temoignages__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
  border-top: 1px solid var(--filet);
}
.temoignage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 28px;
  margin: 0;
  padding-top: 28px;
}
.temoignage + .temoignage::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -22px;
  border-left: 1px solid var(--filet);
}
.temoignage__citation { margin: 0; }
.temoignage__citation::before {
  content: "\AB";
  display: block;
  margin-bottom: 14px;
  font-family: var(--f-riot);
  font-size: 88px;
  line-height: .55;
  color: var(--orange);
}
.temoignage__citation p {
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 300;
  font-style: italic; --slnt: -12;
  line-height: 1.35;
}
.temoignage__auteur {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--filet);
}
.temoignage__marque {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  background: var(--orange);
  color: var(--noir);
  font-size: 22px;
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
}
.temoignage__nom {
  font-size: 15px;
  font-weight: 700;
  --wdth: var(--w-c);
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
}
.temoignage__nom small { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.temoignage__lien { grid-column: 2; justify-self: start; font-size: 12px; }
.temoignage__lien:hover { color: var(--orange); }

/* =========================================================
   06 · QUESTIONS FRÉQUENTES — design de l'ancienne section « Pour qui »
   ========================================================= */
.faq { background: var(--orange); color: var(--noir); }
.faq .meta { border-bottom-color: rgba(30, 21, 17, .35); }
.faq__tete { margin-bottom: 40px; }
.tableau { border-top: 2px solid var(--noir); }
.tableau > * {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: 24px;
  padding: 16px 0 14px;
  border-bottom: 2px solid var(--noir);
  font-size: 17px;
  --wdth: var(--w-c);
  line-height: 1.3;
  transition: background-color .2s, padding .2s;
}
.tableau > * > p:first-child { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.tableau > * > p:last-child { text-align: right; font-weight: 700; font-style: italic; --slnt: -12; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
.tableau > :not(.tableau__entete):hover { background: var(--noir); color: var(--orange); padding-left: 12px; padding-right: 12px; }
.tableau .tableau__entete { font-size: 11px; padding: 10px 0 9px; }
.tableau--faq > * { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr) 28px; gap: 40px; padding: 20px 0 18px; align-items: start; }
.tableau--faq h3 {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 800;
  --wdth: var(--w-c);
  letter-spacing: .01em;
  line-height: 1.15;
  text-transform: uppercase;
}
/* questions repliables : au repos, seules les questions ; au clic, la ligne s'ouvre
   et la réponse s'écrit comme à la machine (js/app.js). Sans JS, tout reste ouvert. */
.faq__item { cursor: pointer; }
.faq__question { grid-column: 1; grid-row: 1; }
.faq__question button {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}
.faq__question button:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.faq__reponse { grid-column: 2; grid-row: 1; display: grid; }
.faq__reponse-int { min-height: 0; overflow: hidden; }
.faq__reponse-texte { display: grid; gap: 12px; justify-items: start; }
.js .faq__reponse {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s;
}
.js .faq__item.est-ouvert .faq__reponse {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.tableau--faq .faq__item.est-ouvert { background: var(--noir); color: var(--orange); padding-left: 12px; padding-right: 12px; }
.faq__item.est-ouvert .faq__reponse p:not(.lien-fleche) { color: var(--fond); }
/* le signe + devient − */
.faq__signe { grid-column: 3; grid-row: 1; position: relative; justify-self: end; width: 18px; height: 18px; margin-top: 3px; }
.faq__signe::before, .faq__signe::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transition: transform .3s;
}
.faq__signe::after { transform: rotate(90deg); }
.faq__item.est-ouvert .faq__signe::after { transform: rotate(0deg); }
/* machine à écrire (js/app.js) : le texte restant est réservé, transparent,
   pour que le bloc ait déjà sa hauteur finale */
.ecriture--attente, .ecriture--attente strong { color: transparent; }
.ecriture--attente::before, .ecriture--attente::after, .ecriture--en-cours::after { opacity: 0; }
.ecriture__reste { color: transparent; }
.ecriture__curseur {
  display: inline-block;
  width: .5em;
  height: 1.05em;
  margin: 0 1px -.18em;
  background: var(--orange);
  animation: clignote .5s steps(1) infinite;
}
@keyframes clignote { 50% { opacity: 0; } }
.js .faq__reponse-texte .lien-fleche { opacity: 0; transition: opacity .3s; }
.js .faq__item.tape-fini .faq__reponse-texte .lien-fleche { opacity: 1; }
.tableau--faq p:not(.lien-fleche) { font-size: clamp(16px, 1.2vw, 18px); --wdth: var(--w-sc); line-height: 1.45; }
.tableau--faq .lien-fleche { font-size: 13px; }
.tableau--faq .tableau__entete > p:last-child { text-align: left; }
.tableau .tableau__entete p { text-transform: uppercase; font-weight: 600 !important; font-style: normal !important; --slnt: 0 !important; color: var(--noir) !important; letter-spacing: .08em !important; font-size: 11px !important; }

/* =========================================================
   BORDEAUX
   ========================================================= */
/* Deux axes invisibles, centrés, découpent le bloc en quatre ;
   chaque élément part de leur intersection (même logique que la coupe du héro). */
.ville {
  --ecart: clamp(20px, 2vw, 32px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "titre mot" "petit texte";
  min-height: clamp(560px, 100svh, 1100px);
  padding: clamp(64px, 11vh, 140px) 0;
  overflow: hidden;
  background: var(--noir);
  color: var(--fond);
}
.ville > :not(.fond-traite) { position: relative; z-index: 2; }

/* haut gauche — H2 : extra-condensé noir italique */
.ville__titre {
  grid-area: titre;
  align-self: end;
  justify-self: end;
  padding: 0 var(--ecart) var(--ecart) var(--marge);
  text-align: right;
  white-space: nowrap;
}
/* haut droite — « Bordeaux » : extra-condensé regular, droit */
.ville__mot {
  grid-area: mot;
  align-self: end;
  justify-self: start;
  padding: 0 var(--marge) var(--ecart) var(--ecart);
  font-size: clamp(40px, 4.6vw, 88px);
  font-weight: 400;
  --wdth: var(--w-xc);
  line-height: .8;
  text-transform: uppercase;
}
/* bas gauche — accroche : condensé gras italique, icône de localisation à droite */
.ville__petit {
  grid-area: petit;
  align-self: start;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: var(--ecart) var(--ecart) 0 var(--marge);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1.25;
  letter-spacing: .03em;
  text-align: right;
  text-transform: uppercase;
}
/* bas droite — paragraphe */
.ville__icone { flex: none; width: auto; height: 2.2em; fill: currentColor; }
.ville__texte {
  grid-area: texte;
  align-self: start;
  max-width: calc(44ch + var(--ecart) + var(--marge));
  padding: var(--ecart) var(--marge) 0 var(--ecart);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.4;
}

/* Ordinateur : chaque bloc arrive par son coin de la section, vers le centre (js/app.js).
   Sans JS ou avec « réduire les animations », tout est en place d'emblée. */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  .ville { --coin-x: 30vw; --coin-y: 34vh; }
  .projet { --coin-x: 30vw; --coin-y: 24vh; }
  .ville__titre, .ville__mot, .ville__petit, .ville__texte,
  .projet__titre, .projet__categorie, .projet__texte {
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), opacity 1s ease;
  }
  /* le bouton garde sa transition de couleur au survol, sans retard */
  .projet__cta, .ville__cta {
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), opacity 1s ease, background-color .2s, color .2s;
    transition-delay: .1s, .1s, 0s, 0s;
  }
  .ville__mot { transition-delay: .1s; }
  .ville__petit, .projet__categorie { transition-delay: .2s; }
  .ville__texte, .projet__texte { transition-delay: .3s; }
  .coins--attente :is(.ville__titre, .projet__titre) { transform: translate(calc(var(--coin-x) * -1), calc(var(--coin-y) * -1)); opacity: 0; }
  .coins--attente :is(.ville__mot, .projet__cta, .ville__cta) { transform: translate(var(--coin-x), calc(var(--coin-y) * -1)); opacity: 0; }
  .coins--attente :is(.ville__petit, .projet__categorie) { transform: translate(calc(var(--coin-x) * -1), var(--coin-y)); opacity: 0; }
  .coins--attente :is(.ville__texte, .projet__texte) { transform: translate(var(--coin-x), var(--coin-y)); opacity: 0; }
}

/* Fond : noir et blanc + aplat orange en mode couleur.
   L'image est à 40 % d'opacité sur un gris neutre : le gris ne fixe que la luminosité
   (le mode couleur impose la teinte orange), ce qui écrase les détails de la photo
   et garde le texte lisible. */
.fond-traite { position: absolute; inset: 0; z-index: 0; background: #444; }
:root .fond-traite img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.65); opacity: .4; }
.fond-traite::after { content: ""; position: absolute; inset: 0; background: var(--orange); mix-blend-mode: color; }

/* =========================================================
   PIED DE PAGE — version sombre (négatif de la carte orange) :
   Terra Black, motif noir ton sur ton, titre / logo / repères en orange,
   contenus en blanc, filets fins comme dans la section méthode.
   ========================================================= */
.pied {
  --filet-pied: var(--fond);   /* délimitations des blocs : blanc, 1 px */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noir-section);
  color: var(--fond);
  padding: clamp(80px, 9vw, 140px) var(--marge) 0;
}
.pied > * { position: relative; z-index: 1; }
.pied::before {
  z-index: 0;
  background: var(--noir-motif);
  -webkit-mask-size: auto max(110%, 93.3vw);
          mask-size: auto max(110%, 93.3vw);
  -webkit-mask-position: 60% 40%;
          mask-position: 60% 40%;
}

/* — l'appel à contact — */
.pied__appel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px 64px;
  align-items: end;
  padding-bottom: clamp(96px, 11vw, 180px);
}
.pied .titre-condense { color: var(--orange); }
.pied__intro { display: grid; gap: 28px; }
.pied__chapo { max-width: 40ch; font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; line-height: 1.35; }
.pied__contact { display: grid; gap: 22px; justify-items: end; }
.pied__mail {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}
.pied__mail:hover { color: var(--orange); }

/* — la partie basse — */
.pied__carte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
  border-top: 1px solid var(--filet-pied);
}
.pied__identite { display: grid; align-content: start; gap: 28px; padding: clamp(48px, 5vw, 80px) clamp(32px, 4vw, 64px) clamp(48px, 5vw, 80px) 0; }
.pied__devise { max-width: 34ch; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.35; }
.pied__logo { display: block; width: clamp(150px, 13vw, 210px); color: var(--orange); }
.pied__liens {
  display: flex;
  gap: clamp(40px, 5vw, 96px);
  padding: clamp(48px, 5vw, 80px) 0 clamp(48px, 5vw, 80px) clamp(32px, 4vw, 64px);
  border-left: 1px solid var(--filet-pied);
}
.pied__nav { display: grid; align-content: start; gap: 8px; font-size: 16px; font-weight: 500; --wdth: var(--w-c); }
.pied__nav .label { margin-bottom: 6px; color: var(--orange); }
.pied__nav a { color: var(--orange); }
.pied__nav a:hover { color: var(--fond); }

/* carte de visite : une seule rangée répartie sur toute la largeur,
   encadrée de filets, juste au-dessus du dernier filet (© 2026) */
.carte {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 32px;
  padding: 16px 0;
  border-top: 1px solid var(--filet-pied);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 300;
  --wdth: var(--w-xc);
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 18px 72px 26px 0;   /* à droite, la place du bouton « retour en haut » */
  border-top: 1px solid var(--filet-pied);
  font-size: 11px;
  font-weight: 600;
  --wdth: var(--w-c);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pied__bas a:hover { color: var(--orange); }
/* liens légaux */
.pied__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* =========================================================
   DESKTOP — ligne de flottaison
   Chaque section tient sur un écran : la ligne méta reste en tête,
   le contenu est centré dans la hauteur restante, avec un espace
   minimum de 11vh au-dessus et en dessous.
   ========================================================= */
@media (min-width: 1101px) {
  .section {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100svh;
    padding-bottom: 0;
  }
  .section > .meta { margin-bottom: 0; }

  /* 01 · studio */
  .enonce { font-size: min(6.3vw, 10vh); }
  .studio__corps { margin-top: min(7vw, 8vh); }
  .section__contenu {
    position: relative;
    z-index: 1;
    align-self: center;
    padding-block: clamp(64px, 11vh, 140px);
  }

  /* 02 · services : photos verticales 4/5 comme sur tablette, la section dépasse un écran */
  .services__tete { gap: clamp(20px, 3vh, 36px); margin-bottom: clamp(28px, 3.5vh, 56px); }

  /* 03 · méthode : titre à gauche, bouton à droite, étapes resserrées */
  .methode__tete { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 64px; }
  .etapes { margin-top: clamp(48px, 8vh, 110px); }
  .etapes > * { min-height: 0; }
  .etapes h3 { margin-top: clamp(20px, 4vh, 48px); min-height: 2em; }

  /* tous les H2 : même corps, calé sur la hauteur d'écran */
  .titre-condense { font-size: min(9vw, 15vh); }
  .portfolio__tete .titre-condense br { display: none; }
  .portfolio__tete, .faq__tete { margin-bottom: clamp(28px, 4vh, 56px); }
  .portfolio { min-height: 0; }
  .portfolio .portfolio__tete { margin-bottom: 0; }

  /* 05 · témoignages */
  .temoignages__tete { margin-bottom: clamp(32px, 5vh, 64px); }
}

/* Ordinateurs à écran bas (moins de 880 px de haut) : on resserre pour que
   chaque section tienne encore sur un écran. */
@media (min-width: 1101px) and (max-height: 880px) {
  .section__contenu { padding-block: clamp(44px, 7.5vh, 140px); }
  .citation { font-size: min(2.2vw, 3.6vh); }
  .studio__texte { font-size: min(2vw, 3.4vh); }
  .service { gap: 12px; }
  .service__texte { font-size: 15px; }
  .tableau--faq > * { padding: 14px 0 12px; }
  .tableau--faq p:not(.lien-fleche) { font-size: 15.5px; line-height: 1.4; }
}

@media (max-width: 1100px) {
  :root { --t-hero: min(10vw, 11svh); --noir-bas: 75px; }
  .hero__contacts { display: none; }

  .entete__nav { display: none; }
  .entete { grid-template-columns: 1fr auto auto; gap: 14px; }
  .entete__burger { display: grid; justify-self: end; }

  .services__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .service:nth-child(3)::before { display: none; }

  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes > *:nth-child(3) { border-left: 0; padding-left: 0; }
  .ville {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "titre" "mot" "texte" "petit";
    min-height: 0;
    padding: 96px 0;
  }
  .ville__titre, .ville__mot, .ville__petit, .ville__texte { justify-self: start; text-align: left; padding: 0 var(--marge); max-width: none; }
  .ville__titre { white-space: normal; }

  .projet {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "titre" "categorie" "texte" "cta";
    align-content: end;
    min-height: min(100svh, 760px);
    padding: 96px 0 72px;
  }
  .projet__titre, .projet__categorie, .projet__texte { justify-self: start; text-align: left; padding: 0 var(--marge); max-width: none; }
  .projet__categorie { margin-top: 18px; }
  .projet__texte { margin-top: 14px; max-width: 62ch; }
  .projet__cta { justify-self: start; margin: 28px var(--marge) 0; }
  .ville__mot { margin-top: 10px; padding-bottom: 28px; }
  .ville__texte { padding-top: 8px; max-width: 62ch; }
  .ville__petit { padding-top: 24px; }
  .pied__carte { grid-template-columns: minmax(0, 1fr) minmax(0, 50%); }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  :root { --entete-haut: 18px; --logo-entete: 50px; }
  .entete { grid-template-columns: 1fr auto; }   /* sans le bouton Contact, le menu reste sur la marge */
  .entete__cta { display: none; }

  .hero__intro { left: var(--marge); right: var(--marge); width: auto; transform: translateY(-50%); }
  .hero__accroche { font-size: 26px; margin-bottom: 22px; }
  :root { --t-hero: min(20vw, 11.5svh); }
  .hero__l1 { left: var(--marge); right: auto; }
  .hero__l2 { left: auto; right: var(--marge); }
  .hero__pied > :nth-child(2) { display: none; }

  .meta { grid-template-columns: 1fr 1fr; }
  .meta > :nth-child(2) { display: none; }
  /* fil d'Ariane : toute la largeur, le numéro à droite */
  :is(.page-tete__meta, .projet-meta) { grid-template-columns: minmax(0, 1fr) auto; }

  .studio__corps { grid-template-columns: 1fr; }
  .lignes li { flex-direction: column; gap: 6px; }

  .services__grille { grid-template-columns: 1fr; }
  .service + .service::before { display: none; }
  .service__photo { aspect-ratio: 16 / 9; }

  .etapes { grid-template-columns: 1fr; }
  .etapes > * { border-left: 0; padding: 18px 0 28px; min-height: 0; border-bottom: 1px solid var(--filet); }
  .etapes h3 { margin-top: 12px; }

  .portfolio__tete { flex-direction: column; align-items: start; gap: 24px; }

  .temoignages__tete { grid-template-columns: 1fr; }
  .temoignages__grille { grid-template-columns: 1fr; }
  .temoignage { padding: 28px 0; }
  .temoignage + .temoignage { border-top: 1px solid var(--filet); }
  .temoignage + .temoignage::before { display: none; }

  .tableau > * { grid-template-columns: 1fr; gap: 4px; }
  .tableau--faq > * { grid-template-columns: minmax(0, 1fr) 24px; gap: 10px 16px; }
  .faq__reponse { grid-column: 1 / -1; grid-row: 2; }
  .faq__signe { grid-column: 2; }
  .tableau > * > p:last-child { text-align: left; }
  .tableau .tableau__entete { display: none; }

  .ville {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "titre" "mot" "texte" "petit";
    padding: 80px 0;
  }
  .ville__titre, .ville__mot, .ville__petit, .ville__texte { justify-self: start; text-align: left; padding: 0 var(--marge); max-width: none; }
  .ville__mot { margin-top: 10px; padding-bottom: 28px; font-size: 40px; }
  .ville__texte { padding-top: 8px; }
  .ville__petit { padding-top: 24px; }
  .pied__appel { grid-template-columns: 1fr; }
  .pied__contact { justify-items: start; }
  .pied__carte { grid-template-columns: 1fr; }
  .pied__identite { padding: 40px 0; }
  .pied__logo { width: 140px; }
  .pied__liens { gap: 40px; padding: 40px 0; border-left: 0; border-top: 1px solid var(--filet-pied); }
  .carte { justify-content: flex-start; gap: 8px 22px; }
  .bouton { padding: 20px 26px 18px; font-size: 16px; }
}

/* =========================================================
   ÉLÉMENTS FIXES — visibles une fois le héro dépassé (js/app.js) :
   logo sur tuile orange collée au coin haut gauche, menu en haut à droite,
   retour en haut de page en bas à droite
   ========================================================= */
.flottant__burger, .flottant__haut {
  position: fixed;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, transform .3s, visibility 0s .3s;
}
.flottant__burger { transform: translateY(-12px); }
.flottant__haut { transform: translateY(12px); }
.apres-hero :is(.flottant__burger, .flottant__haut) {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s, transform .3s;
}
.flottant__burger { display: grid; top: calc(var(--entete-haut) + var(--logo-entete) * .551 - 24px); right: var(--marge); }   /* à la place du bouton de l'en-tête */
.flottant__haut {
  right: var(--marge); bottom: 24px;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: var(--noir);
  color: var(--orange);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.flottant__haut:hover { background: var(--orange); color: var(--noir); }
/* menu ouvert après le héro : la croix flottante remplace les boutons de l'en-tête */
.menu-ouvert .flottant__haut { opacity: 0; visibility: hidden; }
.apres-hero.menu-ouvert :is(.entete__cta, .entete__burger) { visibility: hidden; }
@media (min-width: 1101px) {
  .menu-ouvert .entete__nav a { font-size: clamp(54px, 6vw, 96px); }
}
@media (max-width: 760px) {
  .flottant__haut { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .flottant__burger, .flottant__haut { transition: none; transform: none; }
}

/* =========================================================
   PAGES INTERNES
   ========================================================= */
/* texte lu par les lecteurs d'écran et par Google, masqué à l'écran */
.invisible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* suite d'un H2 trop long pour le corps condensé : même ligne de titre, en plus petit */
.titre-suite { display: block; margin-top: .14em; font-size: .4em; --wdth: var(--w-c); line-height: 1; letter-spacing: 0; }
/* intertitre « Pour qui ? », « Ce que je fais »… et son bloc de texte sous filet */
.intertitre {
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 800;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1;
  text-transform: uppercase;
}
.bloc-texte { display: grid; align-content: start; gap: 12px; padding-top: 16px; border-top: 1px solid var(--filet); }
.bloc-texte p { max-width: 62ch; font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; line-height: 1.42; }

/* ---------- En-tête de page : le champ orange à motif du héro ---------- */
.page-tete {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--h-entete) var(--marge) 0;
  background: var(--orange-clair);
}
.page-tete > * { position: relative; z-index: 1; }
.page-tete::before { clip-path: none; }
.page-tete__meta { margin-bottom: 0; border-bottom-color: rgba(30, 21, 17, .35); }
.page-tete__meta a { border-bottom: 1px solid currentColor; }
.page-tete__meta a:hover { color: var(--fond); }
.page-tete__contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titre" "intro" "sommaire";
  gap: 32px;
  align-content: start;
  padding: 40px 0 56px;
}
.page-tete__titre {
  grid-area: titre;
  font-size: min(20vw, 120px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .78;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.page-tete__intro { grid-area: intro; max-width: 60ch; font-size: clamp(19px, 1.75vw, 26px); font-weight: 600; line-height: 1.35; }
.sommaire { grid-area: sommaire; }
.sommaire .label { margin-bottom: 10px; }
.sommaire__liste { border-top: 2px solid var(--noir); }
.sommaire__liste a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0 8px;
  border-bottom: 2px solid var(--noir);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 800;
  --wdth: var(--w-c);
  letter-spacing: .02em;
  line-height: 1.15;
  text-transform: uppercase;
  transition: background-color .2s, color .2s, padding .2s;
}
.sommaire__liste a::after { content: "\2193"; }
.sommaire__liste a:hover { background: var(--noir); color: var(--orange); padding-inline: 12px; }

/* ---------- Services : une section par service. Titre, textes et offres d'un côté,
   visuel vertical de l'autre ; le côté alterne d'un service à l'autre ---------- */
.prestation__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titre" "visuel" "textes" "offres";
  gap: 32px clamp(40px, 5.5vw, 96px);
}
.prestation__titre { grid-area: titre; }
.prestation__textes { grid-area: textes; display: grid; gap: 32px; }
.prestation__offres { grid-area: offres; }
.prestation__visuel {
  grid-area: visuel;
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--noir);
}
:root .prestation__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
:root .prestation__visuel:has(a):hover img { transform: scale(1.04); }
/* lien vers le projet : dans l'image, en bas à gauche, orange sur Terra Black comme les services de l'accueil */
.prestation__visuel figcaption {
  position: absolute;
  left: 0; bottom: 0;
  display: inline-flex;
  gap: .5em;
  padding: 11px 16px 9px;
  background: var(--noir);
  color: var(--orange);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 800;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}
.prestation__visuel figcaption::after { content: "\2192"; font-style: normal; --slnt: 0; transition: transform .2s; }
.prestation__visuel:has(a):hover figcaption::after { transform: translateX(4px); }
.prestation__note { margin-top: 18px; max-width: 62ch; font-size: 15px; font-style: italic; --slnt: -12; line-height: 1.4; }

/* offres : intitulé en haut à gauche, description dessous, prix ferré en bas à droite
   (le H4 « intitulé — prix » couvre la ligne entière en sous-grille) */
.offres { border-top: 1px solid var(--filet); }
.offre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 32px;
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--filet);
}
.offre__titre { grid-column: 1 / -1; grid-row: 1 / span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.offre__titre {
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 800;
  --wdth: var(--w-c);
  letter-spacing: .01em;
  line-height: 1.15;
  text-transform: uppercase;
}
.offre__titre em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin-bottom: 3px;   /* sa ligne de base sur celle de la dernière ligne de la description */
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .9;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
/* détail d'une offre par catégorie (Photo, Vidéo) : deux colonnes, prix à droite de chaque ligne */
.offre__detail { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin: 10px 0 0; }
.offre__detail > * { display: grid; align-content: start; }
.offre__detail .offre__categorie {
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.offre__detail .offre__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  padding: 7px 0 6px;
  border-top: 1px solid var(--filet);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.offre__detail strong {
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .9;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
.offre__titre em strong, .pack__titre em strong, .offre__detail strong em { font-size: .5em; font-weight: 700; --wdth: var(--w-c); letter-spacing: .04em; margin-right: .15em; }
.offre__texte { grid-column: 1; grid-row: 2; max-width: 62ch; font-size: 16px; line-height: 1.38; }

/* ---------- Tarifs : section claire, trois packs en blocs colorés :
   Synopsis et Odyssey en orange, Fable (recommandé) en Terra Black ---------- */
.tarifs { background: var(--fond); color: var(--noir); }
.tarifs__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 32px 64px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.tarifs__chapo { font-size: clamp(18px, 1.45vw, 22px); font-weight: 500; line-height: 1.4; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); }
.pack {
  --filet-pack: rgba(30, 21, 17, .35);
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 20px;
  padding: clamp(24px, 2.4vw, 36px);
  background: var(--orange);
  color: var(--noir);
}
.pack--recommande { --filet-pack: var(--filet-clair); background: var(--noir); color: var(--fond); }
.pack__badge { position: absolute; top: 0; right: 0; padding: 8px 12px 7px; background: var(--orange); color: var(--noir); }
.pack__titre { display: grid; gap: 12px; }
.pack__titre {
  font-size: clamp(56px, 5.6vw, 104px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .8;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.pack--recommande .pack__titre { color: var(--orange); }
.pack__titre em {
  font-size: clamp(30px, 2.8vw, 46px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1;
  text-transform: uppercase;
}
.pack__accroche { font-size: 17px; font-weight: 600; font-style: italic; --slnt: -12; line-height: 1.35; }
.pack__liste { align-self: start; border-top: 1px solid var(--filet-pack); }
.pack__liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0 9px;
  border-bottom: 1px solid var(--filet-pack);
  font-size: 16px;
  line-height: 1.35;
}
.pack__liste strong { flex: none; font-weight: 800; }
.pack__cta { justify-content: space-between; margin-top: 8px; padding: 20px 22px 18px; font-size: clamp(15px, 1.15vw, 18px); white-space: normal; text-align: left; }
.pack--recommande .pack__cta:hover { background: var(--fond); color: var(--noir); }
.tarifs__plus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(40px, 5.5vw, 96px); margin-top: clamp(48px, 6vw, 88px); }

/* ---------- Déroulé d'un projet : les sept étapes en lignes ---------- */
.deroule__grille { display: grid; gap: 40px clamp(40px, 5.5vw, 96px); align-items: start; }
.deroule__etapes { border-top: 2px solid var(--noir); }
.deroule__etapes > * {
  display: grid;
  grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr);
  gap: 6px 24px;
  align-items: baseline;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--filet);
}
.deroule__num { font-size: 12px; font-weight: 700; --wdth: var(--w-c); letter-spacing: .06em; }
.deroule__etapes h3 {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 800;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1.05;
  text-transform: uppercase;
}
.deroule__etapes p:not(.deroule__num) { font-size: 16px; line-height: 1.42; }

/* ---------- Ordinateur ---------- */
/* En-tête de page, de la tablette à l'ordinateur : à l'arrivée, le premier bandeau reste visible,
   comme sur l'accueil ; le H1 tient sur une ligne, au-dessus du paragraphe */
@media (min-width: 761px) {
  .page-tete { min-height: max(calc(100svh - var(--h-bandeau)), 480px); }
  .page-tete__contenu {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "titre titre" "intro sommaire";
    gap: clamp(32px, 6vh, 72px) clamp(32px, 5.5vw, 96px);
    align-content: end;
    align-items: end;
    padding: clamp(32px, 6vh, 80px) 0 clamp(32px, 6vh, 72px);
  }
  .page-tete__titre { font-size: min(13vw, 26svh); white-space: nowrap; }
  .page-tete__titre br { display: none; }
  .page-tete--contact .page-tete__titre { font-size: min(12vw, 22svh); }
}
@media (min-width: 761px) and (max-height: 880px) {
  .page-tete__contenu { gap: clamp(20px, 3.5vh, 72px) clamp(32px, 5.5vw, 96px); padding-block: clamp(20px, 3.5vh, 80px); }
  .page-tete__intro { font-size: clamp(17px, min(1.6vw, 2.9vh), 24px); }
  .page-tete__titre { font-size: min(13vw, 22svh); }
  .sommaire__liste a { padding: clamp(4px, .8vh, 7px) 0 clamp(3px, .5vh, 5px); font-size: clamp(14px, min(1.3vw, 2.4vh), 19px); }
}

@media (min-width: 1101px) {
  .prestation__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "titre visuel" "textes visuel" "offres visuel";
    row-gap: 0;
  }
  .prestation--inverse .prestation__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "visuel titre" "visuel textes" "visuel offres";
  }
  .prestation__titre { margin-bottom: clamp(32px, 5vh, 56px); }
  .prestation__textes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(28px, 3vw, 48px); }
  .prestation__offres { margin-top: clamp(36px, 5vh, 64px); }
  .prestation__visuel { aspect-ratio: 4 / 5; align-self: start; justify-self: end; width: min(100%, 60svh); }
  .prestation--inverse .prestation__visuel { justify-self: start; }

  .deroule__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .prestation__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "titre titre" "textes visuel" "offres offres";
  }
  .prestation--inverse .prestation__grille { grid-template-areas: "titre titre" "visuel textes" "offres offres"; }
  .prestation__visuel { aspect-ratio: 4 / 5; align-self: start; }
  .packs { grid-template-columns: 1fr; }
  .pack__cta { justify-self: start; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .page-tete__contenu { padding-bottom: 40px; }
  .prestation__grille, .prestation--inverse .prestation__grille {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titre" "visuel" "textes" "offres";
  }
  .prestation__visuel { aspect-ratio: 16 / 9; }
  .offre { column-gap: 16px; }
  .tarifs__tete { grid-template-columns: 1fr; }
  .pack__cta { justify-self: stretch; }
  .tarifs__plus { grid-template-columns: 1fr; }
  .offre__detail { grid-template-columns: 1fr; }
  .deroule__etapes > * { grid-template-columns: 40px minmax(0, 1fr); }
  .deroule__etapes p:not(.deroule__num) { grid-column: 2; }
}

/* ---------- À propos : le récit, tout centré. Le portrait tramé (trame fine, en orange, à 45 %) passe en fond,
   sous le titre et le texte. La trame est un masque PNG (le blanc y est vide) que la couleur
   de l'élément remplit, fondu tout autour ---------- */
.recit { isolation: isolate; overflow: hidden; }
.recit__grille { display: grid; gap: 32px; justify-items: center; text-align: center; }
.recit__texte { display: grid; align-content: start; gap: 1em; max-width: 40em; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.42; }
.recit .recit__texte { max-width: 34em; font-size: clamp(20px, 1.9vw, 28px); font-weight: 700; font-style: italic; --slnt: -12; line-height: 1.36; }
.recit .section__contenu { position: relative; z-index: 1; }
.recit::before {
  position: relative;
  z-index: 0;
  pointer-events: none;
  background: var(--orange);
  opacity: .45;
  -webkit-mask: url(assets/img/trame/portrait-trame-fine.png) no-repeat 50% 35% / 112% auto, radial-gradient(closest-side, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask: url(assets/img/trame/portrait-trame-fine.png) no-repeat 50% 35% / 112% auto, radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-composite: intersect;
}

/* ---------- À propos : Pourquoi Polym, section orange, le symbole et la devise ---------- */
.pourquoi { background: var(--orange); color: var(--noir); }
.pourquoi .meta { border-bottom-color: rgba(30, 21, 17, .35); }
.pourquoi__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titre" "texte" "symbole" "devise";
  gap: 32px clamp(40px, 5.5vw, 96px);
}
.pourquoi__titre { grid-area: titre; }
/* l'autre version du symbole (contour), en Terra Black sur l'orange */
.pourquoi__grille::after { --src: url(assets/img/brand/f58.svg); grid-area: symbole; justify-self: start; aspect-ratio: 118.85 / 166.75; width: clamp(96px, 16vw, 260px); color: var(--noir); }
.pourquoi__devise { grid-area: devise; margin: clamp(16px, 3vw, 48px) 0 0; }
.pourquoi__devise .enonce { font-style: italic; --slnt: -12; }
.pourquoi__devise .enonce::before { content: "\AB\00A0"; color: var(--fond); }
.pourquoi__devise .enonce::after { content: "\00A0\BB"; color: var(--fond); }
.pourquoi__devise em { font-style: italic; --slnt: -12; color: var(--fond); }

/* ---------- En dehors du studio : la croix de « Où j'interviens », bouton en haut à droite ---------- */
.ville__cta { grid-area: mot; align-self: end; justify-self: start; margin: 0 var(--marge) var(--ecart) var(--ecart); }

@media (min-width: 761px) {
  .pourquoi__grille { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titre titre" "texte symbole" "devise devise"; }
  .pourquoi__grille::after { align-self: center; width: clamp(120px, 15vw, 260px); }
  /* trois principes : trois colonnes dès la tablette */
  .etapes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .etapes--3 > *:nth-child(3) { border-left: 1px solid var(--filet); padding-left: 26px; }
}
@media (min-width: 1101px) {
  /* récit : le portrait en carré au centre, sur toute la hauteur sous la ligne méta */
  .recit__grille { row-gap: clamp(32px, 5vh, 56px); }
  .recit::before { position: absolute; top: 51px; bottom: 0; left: 50%; aspect-ratio: 1; transform: translateX(-50%); }
  .pourquoi__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "titre symbole" "texte symbole" "devise devise";
    row-gap: 0;
  }
  .pourquoi__titre { margin-bottom: clamp(32px, 5vh, 56px); }
  .pourquoi__grille::after { justify-self: center; }
}
@media (max-width: 1100px) {
  .ville__cta { justify-self: start; margin: 20px var(--marge) 28px; }
  .recit::before { height: min(100vw, 640px); margin: 0; }
  .recit .section__contenu { margin-top: calc(clamp(48px, 6vw, 96px) + min(100vw, 640px) * .28); }
}
@media (max-width: 760px) {
  .ville__cta { white-space: normal; }
}

/* =========================================================
   PORTFOLIO — en-tête clair .tete-claire (le titre et l'intro côte à côte, les filtres en barre dessous),
   puis la galerie : une pochette carrée par projet, pleine largeur, sans espace.
   En WordPress : la boucle du type de contenu « Projets » ; chaque carte reçoit
   d'elle-même les classes discipline-*, sur lesquelles filtre js/app.js.
   ========================================================= */
.tete-claire {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titre" "intro" "filtres";
  gap: 28px clamp(32px, 5.5vw, 96px);
  padding: clamp(40px, 8vh, 112px) var(--marge) clamp(40px, 7vh, 96px);
  background: var(--fond);
}
.tete-claire__titre {
  grid-area: titre;
  font-size: min(20vw, 120px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .78;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.tete-claire__intro { grid-area: intro; max-width: 52ch; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; line-height: 1.4; }
.tete-claire__filtres { grid-area: filtres; }
@media (min-width: 761px) {
  .tete-claire { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "titre intro" "filtres filtres"; align-items: end; }
  .tete-claire__titre { font-size: min(11vw, 20svh); }
  .tete-claire__intro { padding-bottom: .3em; }
}

/* filtres par discipline, en barre : chaque filtre a son contour fin complet, quelle que soit
   la ligne où il passe (les bords voisins se superposent d'un pixel au lieu de doubler).
   Sans JavaScript, ils sont masqués et toute la galerie reste affichée. */
html:not(.js) .filtres { display: none; }
.filtres .label { margin-bottom: 10px; }
.filtres__liste { display: flex; flex-wrap: wrap; padding: 0 1px 1px 0; }
.filtres__liste li { flex: 1 1 auto; margin: 0 -1px -1px 0; }
.filtre, .tete-legal__pages li > a {
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 14px 16px 12px;
  border: 1px solid var(--noir);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 800;
  --wdth: var(--w-c);
  letter-spacing: .02em;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
:is(.filtre, .tete-legal__pages li > a):is(:hover, [aria-pressed="true"], [aria-current]) { background: var(--noir); color: var(--orange); }
.filtre__compte { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
/* mobile : une ligne par filtre, sur toute la largeur de l'écran, texte ferré à gauche */
@media (max-width: 760px) {
  .filtres__liste { display: block; margin-inline: calc(var(--marge) * -1); padding: 0; border-top: 1px solid var(--noir); }
  .filtres__liste li { margin: 0; }
  .filtre, .tete-legal__pages li > a { justify-content: space-between; padding: 14px var(--marge) 12px; border: 0; border-bottom: 1px solid var(--noir); }
}

/* ---------- la galerie : pleine largeur, sans espace ---------- */
.galerie { min-height: 0; padding-bottom: 0; }
.galerie .meta { margin-bottom: 0; }
.galerie > .section__contenu { padding-block: 0; }
.galerie__grille { display: grid; grid-template-columns: minmax(0, 1fr); margin-inline: calc(var(--marge) * -1); }
@media (min-width: 761px) { .galerie__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* une pochette : la photo en fond ; en tête, les disciplines sur une ligne, sous un filet ;
   en pied, la catégorie puis le nom, à la taille des titres de cartes
   (corps en unités du conteneur : la composition suit la taille de la pochette) */
.carte-projet { container-type: inline-size; }
.carte-projet[hidden] { display: none; }
.carte-projet__lien {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "disc" "." "cat" "nom";
  aspect-ratio: 1;
  padding: 5cqi;
  color: var(--fond);
}
.carte-projet__lien > * { position: relative; z-index: 1; min-width: 0; }
.carte-projet__image { position: absolute; inset: 0; z-index: 0; background: var(--noir); }
:root .carte-projet__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.5) contrast(1.05); transition: filter .5s, transform .8s; }
:root .carte-projet__lien:is(:hover, :focus-within) .carte-projet__image img { filter: grayscale(0) brightness(.6); transform: scale(1.03); }
/* le H2 « Nom — catégorie » en sous-grille : la catégorie au-dessus du nom */
.carte-projet__titre { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.carte-projet__disciplines {
  grid-area: disc;
  padding-bottom: 1.8cqi;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  overflow: hidden;
  font-size: max(10px, 2.1cqi);
  font-weight: 700;
  --wdth: var(--w-c);
  letter-spacing: .06em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.carte-projet__categorie {
  grid-area: cat;
  margin-bottom: 1.6cqi;
  font-size: max(12px, 2.5cqi);
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
}
.carte-projet__nom {
  grid-area: nom;
  font-size: max(36px, 10cqi);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .82;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  transition: color .2s;
}
.carte-projet__lien:is(:hover, :focus-within) .carte-projet__nom { color: var(--orange); }

/* ---------- Page projet (en WordPress : le gabarit single des « Projets ») ---------- */
/* fiche du projet (type, disciplines), au style du sommaire */
.fiche { grid-area: sommaire; margin: 0; border-top: 2px solid var(--noir); }
.fiche > * { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0 8px; border-bottom: 2px solid var(--noir); }
.fiche .fiche__nom { font-size: 12px; font-weight: 700; font-style: italic; --slnt: -12; --wdth: var(--w-c); letter-spacing: .04em; text-transform: uppercase; }
.fiche .fiche__valeur { margin: 0; text-align: right; font-size: clamp(16px, 1.3vw, 19px); font-weight: 800; --wdth: var(--w-c); letter-spacing: .02em; line-height: 1.15; text-transform: uppercase; }

/* point de départ, démarche, résultat : trois chapitres en lignes */
.chapitres__liste { border-top: 1px solid var(--filet); }
.chapitres__liste > * {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px 24px;
  align-items: baseline;
  padding: clamp(28px, 4vh, 48px) 0;
  border-bottom: 1px solid var(--filet);
}
.chapitres__num { font-size: 12px; font-weight: 700; --wdth: var(--w-c); letter-spacing: .06em; }
.chapitres__titre {
  font-size: clamp(32px, 3.4vw, 60px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .9;
  text-transform: uppercase;
}
.chapitres__texte { grid-column: 1 / -1; display: grid; gap: .9em; max-width: 40em; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.45; }
.chapitres__texte ul { display: grid; gap: .35em; }
.chapitres__texte li { position: relative; padding-left: 1.5em; }
.chapitres__texte li::before { content: "\2014"; position: absolute; left: 0; color: var(--orange); }

/* visuels : le premier en pleine largeur, les suivants deux par deux */
.visuels__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); }
/* en WordPress, d'autres blocs pourront s'ajouter ici : une image prend sa case, un texte toute la ligne */
:root .visuels__grille img { display: block; width: 100%; height: auto; }
.visuels__grille > figure { margin: 0; }
/* visuels par deux : même format 3/2, recadrés au centre, pour des rangées alignées */
:root .visuel:not(.visuel--large) img { aspect-ratio: 3 / 2; object-fit: cover; }
.visuels__grille > :is(p, h2, h3, ul, blockquote) { grid-column: 1 / -1; max-width: 62ch; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.45; }
.visuel-attente {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  margin: 0;
  padding: 24px;
  aspect-ratio: 4 / 3;
  background: var(--noir);
  color: var(--orange);
  text-align: center;
}
.visuel-attente::before { width: clamp(40px, 4vw, 64px); }
.visuel-attente .label { max-width: 32ch; color: var(--fond); opacity: .7; }
.visuels__note { margin-top: 18px; max-width: 62ch; font-size: 15px; font-style: italic; --slnt: -12; line-height: 1.4; }

/* vidéo : la vignette d'abord, la vidéo YouTube (sans cookie) ne se charge qu'au clic */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--noir); }
.video__facade { appearance: none; position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: var(--noir); cursor: pointer; }
.video__facade img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .55; transition: opacity .3s; }
.video__facade:is(:hover, :focus-visible) img { opacity: .8; }
.video__facade:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.video__lecture { position: absolute; left: 50%; top: 50%; width: clamp(72px, 8vw, 120px); aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--orange); }
.video__lecture::after { content: ""; position: absolute; inset: 30% 26% 30% 38%; background: var(--noir); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.video__mention { position: absolute; left: 16px; bottom: 14px; color: var(--fond); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (min-width: 761px) {
  .chapitres__liste > * { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr); }
  .chapitres__texte { grid-column: auto; }
  .visuels__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* « large » : toute la ligne ; les autres visuels vont par deux */
  .visuels__grille > .visuel--large { grid-column: 1 / -1; }
  .visuel-attente.visuel--large { aspect-ratio: 16 / 9; }
}

/* ---------- Page projet : l'en-tête du menu en clair (le projet vit dans un espace neutre),
   le fil d'Ariane sur fond clair, puis l'image principale en fond, en couleur (sans duotone),
   et le texte sur un bloc orange, Terra Black, collé dans le coin bas gauche (version validée) ---------- */
.page-claire:not(.menu-ouvert) .entete { position: relative; background: var(--fond); }
.page-claire:not(.menu-ouvert) .entete__nav a:hover { color: var(--orange); }
.page-claire .entete__cta:hover { background: var(--orange); color: var(--noir); }
.projet-meta { margin: 0; padding-inline: var(--marge); background: var(--fond); }

.projet-tete {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  justify-items: start;
  min-height: max(calc(100svh - var(--h-entete) - 53px), 420px);   /* l'écran, moins le menu et la ligne du fil d’Ariane (53 px) */
  padding-top: 28px;
  color: var(--noir);
}
.projet-tete__bloc {
  display: grid;
  justify-items: start;
  gap: 14px;
  max-width: 100%;
  padding: clamp(32px, 3.8vw, 64px);
  background: var(--orange);
}
.projet-tete__titre { display: grid; gap: 18px; }
.projet-tete__nom {
  font-size: clamp(56px, 8vw, 150px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .82;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.projet-tete__categorie {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .03em;
  line-height: 1.25;
  text-transform: uppercase;
}
.projet-tete__intro { max-width: 52ch; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; line-height: 1.4; }
.projet-tete__fiche { grid-area: auto; width: min(100%, 520px); margin-top: 4px; }
.projet-tete .fiche, .projet-tete .fiche > * { border-width: 1px; border-color: color-mix(in srgb, currentColor 55%, transparent); }

/* projets voisins : la miniature en duotone du projet précédent et du suivant
   (au bout de la liste, une carte « Tous les projets » prend la place) */
.voisins {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 24px);
  padding: clamp(40px, 6vw, 80px) var(--marge);
  border-top: 1px solid var(--filet);
}
.voisin {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 8px;
  min-height: clamp(240px, 26vw, 420px);
  padding: clamp(20px, 2.4vw, 36px);
  color: var(--noir);
}
.voisin--suiv { justify-items: end; text-align: right; }
:root .voisin .fond-traite img { transition: transform .6s; }
:root .voisin:is(:hover, :focus-visible) .fond-traite img { transform: scale(1.04); }
.voisin__nom {
  font-size: clamp(36px, 4.4vw, 80px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .85;
  text-transform: uppercase;
  transition: color .2s;
}
.voisin:is(:hover, :focus-visible) .voisin__nom { color: var(--orange); }
.voisin__categorie {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .03em;
  line-height: 1.25;
  text-transform: uppercase;
}
.voisin--tous { align-content: center; justify-items: center; text-align: center; background: var(--noir); color: var(--orange); transition: background-color .2s, color .2s; }
.voisin--tous .logogramme { width: clamp(40px, 4vw, 64px); }
.voisin--tous:is(:hover, :focus-visible) { background: var(--orange); color: var(--noir); }
.voisin--tous:is(:hover, :focus-visible) .voisin__nom { color: var(--noir); }
.voisins__tous { justify-self: center; margin-top: 8px; }

/* en-tête : la photo telle quelle */
.projet-tete .fond-traite { background: none; }
:root .projet-tete .fond-traite img { filter: none; opacity: 1; }
.projet-tete .fond-traite::after { display: none; }

/* miniatures des projets voisins : duotone clair, la photo en noir et blanc sur le blanc cassé,
   sous un voile blanc léger, plus dense en bas, sous le texte */
:is(.projet-tete, .voisin) > :not(.fond-traite) { position: relative; z-index: 2; }
.voisin .fond-traite { background: var(--fond); }
:root .voisin .fond-traite img { filter: grayscale(1); opacity: .5; }
.voisin .fond-traite::after { display: none; }
.voisin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(243, 241, 236, .9) 0%, rgba(243, 241, 236, .3) 75%);
}
.voisin--tous::before { display: none; }

/* bandeau des pages projet : version claire validée */
.bandeau--projet { background: var(--fond); color: var(--noir); }

@media (min-width: 761px) {
  .projet-tete { padding-top: clamp(40px, 6vh, 80px); }
  .voisins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voisins__tous { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* le bloc orange prend toute la largeur de l'écran, posé sur le bas de la section */
  .projet-tete__bloc { justify-self: stretch; padding: 32px var(--marge) 36px; }
}

/* =========================================================
   CONTACT — le formulaire en cinq questions, en lignes comme le déroulé
   (en WordPress : Contact Form 7, avec ces classes dans le gabarit du formulaire),
   puis « Et ensuite ? » et les coordonnées en orange, ferrées à gauche
   (ni téléphone ni adresse précise)
   ========================================================= */
.formulaire__grille { display: grid; gap: clamp(32px, 4vw, 56px); }
.formulaire__note { margin-top: 18px; font-size: 15px; font-style: italic; --slnt: -12; line-height: 1.4; }
.formulaire__etoile { color: var(--orange); font-weight: 800; font-style: normal; --slnt: 0; }
.formulaire__form { border-top: 1px solid var(--noir); }
.question {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 32px;
  min-width: 0;
  margin: 0;
  padding: 22px 0 26px;
  border: 0;
  border-bottom: 1px solid var(--filet);
}
/* légende flottante : elle devient une case de la grille comme les autres */
.question__titre {
  float: left;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: baseline;
  align-content: start;
  align-self: start;
  gap: 6px 0;
  width: 100%;
  padding: 0;
}
.question__num { font-size: 12px; font-weight: 700; --wdth: var(--w-c); letter-spacing: .06em; }
.question__libelle {
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 800;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1.05;
  text-transform: uppercase;
}
.question__aide { grid-column: 2; font-size: 14px; font-weight: 500; font-style: italic; --slnt: -12; line-height: 1.3; }
.question__champs { display: grid; gap: 22px 28px; }
.champ { display: grid; align-content: start; gap: 6px; }
.champ__nom {
  font-size: 12px;
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.champ__facultatif { font-weight: 500; text-transform: none; letter-spacing: 0; }
.champ input, .champ__texte {
  width: 100%;
  margin: 0;
  padding: 8px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--noir);
  border-radius: 0;
  background: transparent;
  color: var(--noir);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  --wdth: var(--w-sc);
  line-height: 1.35;
}
.champ__texte { min-height: 9em; padding: 12px 14px; border: 1px solid var(--noir); resize: vertical; }
.champ input:focus-visible { outline: none; border-bottom-color: var(--orange); box-shadow: 0 1px 0 var(--orange); }
.champ__texte:focus-visible { outline: 2px solid var(--orange); outline-offset: -1px; }

/* choix (cases et boutons radio) : des étiquettes à contour fin, comme les filtres du portfolio ;
   la case reste dans la page, invisible, pour le clavier et les lecteurs d'écran */
.question__choix { display: flex; flex-wrap: wrap; padding: 0 1px 1px 0; }
.question__choix .wpcf7-list-item { position: relative; margin: 0 -1px -1px 0; cursor: pointer; }
.question__choix .wpcf7-list-item input { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; }
.question__choix .wpcf7-list-item-label {
  display: block;
  height: 100%;
  padding: 12px 16px 10px;
  border: 1px solid var(--noir);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 800;
  --wdth: var(--w-c);
  letter-spacing: .02em;
  line-height: 1.15;
  text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.question__choix .wpcf7-list-item:hover .wpcf7-list-item-label { background: rgba(30, 21, 17, .08); }
.question__choix .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--noir); color: var(--orange); }
.question__choix .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { position: relative; z-index: 1; outline: 2px solid var(--orange); outline-offset: 2px; }

.formulaire__envoi { display: grid; justify-items: start; gap: 24px; padding-top: 28px; }
.consentement label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; max-width: 70ch; font-size: 15px; line-height: 1.4; cursor: pointer; }
.consentement input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--noir); }
.consentement a { text-decoration: underline; text-underline-offset: 3px; }
.consentement a:hover { color: var(--orange); }

.formulaire__merci { padding: clamp(32px, 4vw, 56px); background: var(--orange); color: var(--noir); }
.formulaire__merci[hidden] { display: none; }
.formulaire__merci:focus { outline: none; }
.formulaire__merci-titre {
  margin-bottom: 18px;
  font-size: clamp(56px, 7vw, 120px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .8;
  text-transform: uppercase;
}
.formulaire__merci p:last-child { max-width: 40ch; font-size: clamp(19px, 1.7vw, 26px); font-weight: 600; line-height: 1.35; }

/* coordonnées : section orange, tout ferré à gauche ; les réseaux en lignes, au style du sommaire */
.coordonnees { background: var(--orange); color: var(--noir); }
.coordonnees .meta { border-bottom-color: rgba(30, 21, 17, .35); }
.coordonnees__grille { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: clamp(28px, 3.4vw, 44px); }
.coordonnees__grille > * { max-width: min(100%, 640px); }
.coordonnees__grille > .titre-condense { max-width: none; }
.coordonnees__fiche { display: grid; justify-items: start; gap: 8px; }
.coordonnees__nom { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; line-height: 1.2; }
.coordonnees__nom strong { font-weight: 800; }
.coordonnees__lieu {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.coordonnees__mail {
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 2px solid currentColor;
  font-size: clamp(24px, 2.3vw, 36px);
  font-weight: 800;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1;
  transition: color .2s;
}
.coordonnees__mail:hover { color: var(--fond); }
.coordonnees__textes { display: grid; gap: 1em; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.42; }
.reseaux { width: 100%; }
.reseaux__liste { border-top: 2px solid var(--noir); }
.reseaux__liste a {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0 10px;
  border-bottom: 2px solid var(--noir);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 600;
  --wdth: var(--w-c);
  letter-spacing: .02em;
  line-height: 1.15;
  text-transform: uppercase;
  transition: background-color .2s, color .2s, padding .2s;
}
.reseaux__liste a::after { content: "\2197"; }
.reseaux__liste a:hover { background: var(--noir); color: var(--orange); padding-inline: 12px; }
.reseaux__icone { width: 22px; height: 22px; }
.reseaux__compte { justify-self: end; font-size: .78em; font-weight: 500; letter-spacing: .03em; text-transform: none; }

@media (min-width: 761px) {
  .question { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .question__champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question__champs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .question__champs--1 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .question__champs--3 { grid-template-columns: minmax(0, 1fr); }
}
/* mobile : les choix en lignes sur toute la largeur de l'écran, texte ferré à gauche */
@media (max-width: 760px) {
  .question__choix { display: block; margin-inline: calc(var(--marge) * -1); padding: 0; border-top: 1px solid var(--noir); }
  .question__choix .wpcf7-list-item { display: block; margin: 0; }
  .question__choix .wpcf7-list-item-label { padding: 14px var(--marge) 12px; border: 0; border-bottom: 1px solid var(--noir); }
  .formulaire__bouton { justify-self: stretch; justify-content: space-between; }
  .coordonnees .titre-condense { font-size: min(80px, 21vw); }   /* un seul long mot : il tient sur les plus petits écrans */
  .pied .titre-condense { font-size: min(80px, 20vw); }   /* « …par où commencer ? » tient aussi à 360 px */
}

/* =========================================================
   PAGES LÉGALES — mentions légales, confidentialité, cookies : menu et fil d'Ariane clairs,
   un en-tête clair et compact (titre, intro, les trois pages en barre), puis le texte
   en articles numérotés, serrés : de l'information, sans grands espaces
   (les H2 y sont des intertitres : on ne met pas onze titres condensés géants)
   ========================================================= */
.tete-legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titre" "intro" "pages";
  gap: 16px clamp(32px, 5.5vw, 96px);
  padding: clamp(28px, 5vh, 56px) var(--marge) clamp(24px, 4vh, 40px);
}
.tete-legal__titre {
  grid-area: titre;
  font-size: clamp(44px, 7vw, 110px);
  font-weight: 900;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-xc);
  line-height: .82;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.tete-legal__intro { grid-area: intro; max-width: 60ch; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.45; }
.tete-legal__pages { grid-area: pages; }
.tete-legal__pages .filtres__liste li > a { padding-block: 11px 9px; font-size: clamp(14px, 1.1vw, 16px); }
.legal { min-height: 0; padding-bottom: clamp(48px, 6vw, 88px); }
.legal > .section__contenu { padding-block: 0; }
@media (min-width: 761px) {
  .tete-legal { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "titre titre" "intro pages"; align-items: end; }
}
.legal__articles { border-top: 1px solid var(--noir); }
.article-legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 32px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--filet);
  scroll-margin-top: 24px;
}
.article-legal__titre { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; align-self: start; }
.article-legal__num { font-size: 12px; font-weight: 700; --wdth: var(--w-c); letter-spacing: .06em; }
.article-legal__libelle {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 800;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  line-height: 1.05;
  text-transform: uppercase;
}
.article-legal__texte { display: grid; justify-items: start; gap: .7em; min-width: 0; max-width: 64ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; }
.article-legal__texte a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-legal__texte a:hover { color: var(--orange); }
/* une fiche : intitulé à gauche, valeur à droite, sous filets */
.legal__fiche { width: 100%; margin: 0; border-top: 1px solid var(--noir); }
.legal__fiche > * { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 4px 20px; padding: 6px 0 5px; border-bottom: 1px solid var(--filet); }
.legal__fiche .fiche__nom {
  font-size: 12px;
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: uppercase;
}
.legal__fiche .fiche__valeur { margin: 0; }

/* tableaux : une ligne par traitement ; en lignes empilées sur les petits écrans */
.wp-block-table.tableau-legal { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.wp-block-table.tableau-legal thead th {
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--noir);
  font-size: 12px;
  font-weight: 700;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}
.wp-block-table.tableau-legal tbody :is(th, td) { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.wp-block-table.tableau-legal tbody th { font-weight: 800; --wdth: var(--w-c); text-transform: uppercase; letter-spacing: .01em; }

@media (min-width: 761px) {
  .article-legal { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
/* les tableaux prennent toute la largeur sous leur titre */
@media (min-width: 1101px) {
  .article-legal--tableau .article-legal__texte { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 1100px) {
  .js .wp-block-table.tableau-legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wp-block-table.tableau-legal, .wp-block-table.tableau-legal tbody, .wp-block-table.tableau-legal tr { display: block; }
  .wp-block-table.tableau-legal tr { padding: 14px 0 12px; border-bottom: 1px solid var(--noir); }
  .wp-block-table.tableau-legal tr:first-child { border-top: 1px solid var(--noir); }
  .wp-block-table.tableau-legal tbody :is(th, td) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 4px 20px; padding: 4px 0; border: 0; }
  .wp-block-table.tableau-legal tbody :is(th, td)::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    font-style: italic; --slnt: -12;
    --wdth: var(--w-c);
    letter-spacing: .04em;
    line-height: 1.6;
    text-transform: uppercase;
  }
}
@media (max-width: 760px) {
  .legal__fiche > *, .wp-block-table.tableau-legal tbody :is(th, td) { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   COUCHE WORDPRESS — ce qui change avec le balisage des blocs natifs.
   La feuille de la maquette, au-dessus, est reprise telle quelle,
   à quelques sélecteurs près (scripts/wordpress.py, liste ADAPTATIONS).
   Le CSS des blocs du cœur est imprimé à part : chaque surcharge
   de ses règles est écrite plus spécifique, pas seulement plus tard.
   ========================================================= */

/* ---------- Socle ---------- */
/* l'espacement automatique est coupé dans theme.json (blockGap 0) ; filet de sécurité à spécificité nulle */
:where(.wp-block-group) > :where(*), :where(.wp-site-blocks) > :where(*) { margin-block: 0; }
img { height: auto; }   /* sinon l'attribut height des images l'emporte sur les aspect-ratio */
figure.wp-block-image, figure.wp-block-post-featured-image, figure.wp-block-table { margin: 0; }
figure > .wp-element-caption { margin: 0; }
blockquote { margin: 0; }
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* barre d'administration (connecté) : l'en-tête et les boutons flottants passent dessous */
.admin-bar .entete { top: 32px; }
.admin-bar .flottant__burger { margin-top: 32px; }
@media (max-width: 782px) {
  .admin-bar .entete { top: 46px; }
  .admin-bar .flottant__burger { margin-top: 46px; }
}

/* ---------- Boutons et liens fléchés : un paragraphe qui porte le lien ;
   le lien couvre tout le bouton, flèche comprise ---------- */
.bouton, .lien-fleche { position: relative; }
:is(p.bouton, p.lien-fleche) > a::before { content: ""; position: absolute; inset: 0; }
:is(p.bouton, p.lien-fleche) > a:focus-visible { outline: none; }
:is(p.bouton, p.lien-fleche):has(> a:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
/* « Voir le projet » de l'accueil : le bloc « Lire la suite » des projets */
.wp-block-read-more.bouton { display: inline-flex; width: auto; }

/* ---------- En-tête : logo, menu (bloc Navigation), boutons ---------- */
:is(.entete__logo, .pied__logo) a { font-size: 0; line-height: 0; overflow: hidden; }
.pied__logo a { display: block; width: 100%; }

.wp-block-navigation.entete__liens { gap: 0; }
.wp-block-navigation.entete__liens .wp-block-navigation__container { gap: clamp(20px, 2.6vw, 44px); counter-reset: rubrique; }
.entete__liens .wp-block-navigation-item { counter-increment: rubrique; }
.entete__liens .wp-block-navigation-item__label::after { content: counter(rubrique, decimal-leading-zero); }
/* couleurs du menu : posées sur l'élément, le lien en hérite (le bloc impose color: inherit au lien) */
.entete__liens .wp-block-navigation-item:hover { color: var(--fond); }
.page-claire:not(.menu-ouvert) .entete__liens .wp-block-navigation-item:hover { color: var(--orange); }
.menu-ouvert .wp-block-navigation.entete__liens { display: block; }
.menu-ouvert .wp-block-navigation.entete__liens .wp-block-navigation__container { display: grid; gap: 6px; justify-items: start; }
/* contacts du menu ouvert : dans la maquette, les liens sont les lignes elles-mêmes ; ici ce sont des
   paragraphes qui portent le lien, le lien reprend donc leur typographie (pas celle des rubriques) */
.menu-ouvert .entete__nav .nav-contacts a { font: inherit; --wdth: inherit; --slnt: inherit; letter-spacing: inherit; text-transform: inherit; }
.menu-ouvert .entete__nav .nav-contacts strong {
  width: 44px;
  font-size: 10px;
  font-weight: 600;
  font-style: italic; --slnt: -12;
  --wdth: var(--w-c);
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: .7;
}

/* bouton menu : un paragraphe, changé en bouton par app.js ; les deux traits en pseudo-éléments */
:is(.entete__burger, .flottant__burger) { gap: 0; font-size: 0; line-height: 0; color: transparent; }
:is(.entete__burger, .flottant__burger)::before { margin-bottom: 3px; }
:is(.entete__burger, .flottant__burger)::after { margin-top: 3px; }
/* retour en haut de page : la flèche en pseudo-élément, le lien couvre la tuile */
.flottant__haut a { display: grid; place-items: center; width: 100%; height: 100%; font-size: 0; }
.flottant__haut a::before { content: "\2191"; font-size: 24px; }

/* ---------- Champs de motif, portrait, symbole : des pseudo-éléments ---------- */
:is(.hero, .page-tete)::before, .hero::after, .pied::before { content: ""; }
.recit::before, .pourquoi__grille::after { content: ""; }
.pourquoi__grille::after { display: block; background: currentColor; }

/* Portrait tramé, jusqu'à la tablette : il reste en fond, sous la ligne méta,
   et le texte le recouvre aux trois quarts comme dans la maquette */
@media (max-width: 1100px) {
  .recit::before { position: absolute; top: calc(53px + clamp(48px, 6vw, 96px)); left: 0; right: 0; height: min(100vw, 640px); }
}

/* ---------- Bandeaux défilants : un paragraphe par mot, le logogramme en pseudo-élément ;
   app.js double la série pour boucler ---------- */
.bandeau__piste > p { display: flex; align-items: center; gap: var(--pas); flex: none; }
.bandeau__piste > p::after { content: ""; }
/* logothèque : des images de la médiathèque, ramenées en Terra Black */
figure.logo-client { background: none; -webkit-mask: none; mask: none; }
:root .logo-client img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(17%) sepia(69%) saturate(3193%) hue-rotate(17deg) brightness(10%) contrast(87%);
}

/* ---------- Marges du dernier enfant d'un groupe ----------
   Les styles globaux de WordPress annulent la marge basse du dernier enfant d'un groupe
   (« :root :where(.is-layout-flow) > :last-child », plus spécifique qu'une classe) :
   les marges de la maquette qui tombent sur un dernier enfant sont redonnées ici. */
@media (max-width: 1100px) {
  .section__contenu > .portfolio__tete:last-child { margin-bottom: clamp(40px, 5vw, 72px); }
}

/* ---------- Images de fond (bloc Image ou image mise en avant) ---------- */
.wp-block-post-featured-image:is(.fond-traite, .carte-projet__image) { position: absolute; margin: 0; }
.service__photo > figure, .prestation__visuel > a { display: block; height: 100%; }
.prestation__visuel figcaption { margin: 0; }

/* ---------- Bordeaux : l'icône de localisation ---------- */
.ville__petit--lieu::after {
  content: "";
  flex: none;
  height: 2.2em;
  aspect-ratio: 24 / 32;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill-rule='evenodd' d='M12 0C5.4 0 0 5.3 0 11.9 0 20.8 12 32 12 32s12-11.2 12-20.1C24 5.3 18.6 0 12 0Zm0 16.5a4.6 4.6 0 1 1 0-9.2 4.6 4.6 0 0 1 0 9.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill-rule='evenodd' d='M12 0C5.4 0 0 5.3 0 11.9 0 20.8 12 32 12 32s12-11.2 12-20.1C24 5.3 18.6 0 12 0Zm0 16.5a4.6 4.6 0 1 1 0-9.2 4.6 4.6 0 0 1 0 9.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Titres « intitulé + prix » : le prix en <em>, placé dans la grille ---------- */
.portfolio__tete .titre-condense em { font-style: inherit; }
.faq__tete .titre-condense em { display: block; margin-top: .14em; font-size: .4em; font-style: inherit; --wdth: var(--w-c); line-height: 1; letter-spacing: 0; }
.offre__titre em { letter-spacing: normal; }
.pack__titre em { color: inherit; letter-spacing: normal; }
.pack--recommande .pack__titre em { color: var(--fond); }
.offre__detail strong em { font-style: inherit; }

/* ---------- Questions fréquentes : le signe + / − en pseudo-élément ---------- */
.faq__item::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: background-size .3s;
}
.faq__item.est-ouvert::after { background-size: 100% 2px, 2px 0; }
@media (max-width: 760px) {
  .faq__item::after { grid-column: 2; }
}

/* ---------- Coordonnées : les réseaux, icône en pseudo-élément ---------- */
.reseaux__liste a::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--icone) no-repeat center / contain;
          mask: var(--icone) no-repeat center / contain;
}
.reseaux__liste em { justify-self: end; font-size: .78em; font-weight: 500; font-style: normal; --slnt: 0; letter-spacing: .03em; text-transform: none; }
.reseaux__item--instagram { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3'/%3E%3C/svg%3E"); }
.reseaux__item--linkedin { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm2.5 6.8V18h2.7V9.8H6.5Zm1.35-4.1a1.55 1.55 0 1 0 0 3.1 1.55 1.55 0 0 0 0-3.1ZM11 9.8V18h2.7v-4.3c0-1.2.4-2 1.5-2s1.3.9 1.3 2.1V18h2.7v-4.9c0-2.5-1.1-3.5-3-3.5-1.3 0-2.1.6-2.5 1.3V9.8H11Z'/%3E%3C/svg%3E"); }
.reseaux__item--behance { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 6h5.2c2 0 3.3 1 3.3 2.7 0 1-.5 1.8-1.4 2.2 1.2.3 1.9 1.3 1.9 2.5 0 2-1.5 3.1-3.7 3.1H2V6Zm2.4 2v2.9h2.4c.9 0 1.4-.5 1.4-1.4 0-1-.6-1.5-1.5-1.5H4.4Zm0 4.8v3h2.6c1 0 1.6-.5 1.6-1.5s-.6-1.5-1.7-1.5H4.4ZM17.3 9.3c2.4 0 3.9 1.7 3.9 4.2v.6h-5.8c.1 1.2.8 1.9 2 1.9.8 0 1.4-.4 1.6-1h2.1c-.4 1.7-1.8 2.7-3.7 2.7-2.5 0-4.1-1.6-4.1-4.2 0-2.5 1.6-4.2 4-4.2Zm-1.9 3.4h3.7c-.1-1-.7-1.7-1.8-1.7s-1.8.7-1.9 1.7ZM14.8 6.6h5V8h-5V6.6Z'/%3E%3C/svg%3E"); }

/* ---------- Pied de page : les menus (bloc Navigation), en colonnes ---------- */
.wp-block-navigation.pied__menu { display: block; }
.wp-block-navigation.pied__menu .wp-block-navigation__container { display: grid; gap: 8px; justify-items: start; }
.pied__menu .wp-block-navigation-item { color: var(--orange); }
.pied__menu .wp-block-navigation-item:hover { color: var(--fond); }

/* ---------- Portfolio : la boucle des projets ---------- */
.wp-block-post-template.galerie__grille { max-width: none; }   /* elle déborde sur les marges, bord à bord */
.galerie__grille > li { min-width: 0; }
/* la pochette entière est cliquable : le lien du titre la recouvre (padding de la pochette compris) */
.carte-projet__titre > a { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.carte-projet__titre > a::after { content: ""; position: absolute; inset: -5cqi; z-index: 3; }
.carte-projet__titre > a:focus-visible { outline: none; }
.carte-projet__lien:has(a:focus-visible) { outline: 3px solid var(--orange); outline-offset: -3px; }
/* les disciplines : du texte, sans lien */
.carte-projet__disciplines .wp-block-post-terms__separator { white-space: pre; }

/* ---------- Page projet ---------- */
.fil-ariane > * { display: inline; }
.fiche__valeur.wp-block-post-terms .wp-block-post-terms__separator { white-space: pre; }
/* au bout de la liste, la carte « Tous les projets » remplace le lien du bas */
.voisins:has(.voisin--tous) .voisins__tous { display: none; }
/* visuel annoncé, pas encore fourni : le logogramme en pseudo-élément */
.visuel-attente::before { content: ""; }

/* vidéo : la vignette d'abord ; au clic, app.js charge la vidéo YouTube (domaine sans cookie).
   Sans JavaScript, le lien de la mention ouvre la vidéo sur YouTube. */
.video { --lecture: clamp(72px, 8vw, 120px); overflow: hidden; }
.js .video { cursor: pointer; }
.video > figure { position: absolute; inset: 0; margin: 0; }
:root .video > figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .55; transition: opacity .3s; }
.video:is(:hover, :focus-within) > figure img { opacity: .8; }
.video::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  z-index: 1;
  width: var(--lecture);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--orange);
  pointer-events: none;
}
.video::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--lecture) * .12);
  top: calc(50% - var(--lecture) * .2);
  z-index: 2;
  width: calc(var(--lecture) * .36);
  height: calc(var(--lecture) * .4);
  background: var(--noir);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  pointer-events: none;
}
.video__mention { z-index: 2; }
.video__mention a:focus-visible { outline: none; }
.video:has(a:focus-visible) { outline: 3px solid var(--orange); outline-offset: 4px; }
.video.est-lancee::before, .video.est-lancee::after { display: none; }

/* ---------- Pages légales ---------- */
.wp-block-table.tableau-legal :is(thead, tfoot, th, td) { border: 0; padding: 0; }
.wp-block-table.tableau-legal table { width: 100%; border-collapse: collapse; }
@media (max-width: 1100px) {
  .wp-block-table.tableau-legal table { display: block; }
}
.tete-legal__retour { justify-self: start; }

/* ---------- Contact : Contact Form 7, avec les classes de la maquette dans le gabarit du formulaire ---------- */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7-form-control-wrap > :is(input, textarea, select) { display: block; }
.question__choix :is(.wpcf7-form-control-wrap, .wpcf7-form-control),
.consentement :is(.wpcf7-form-control-wrap, .wpcf7-form-control, .wpcf7-list-item) { display: contents; }
.question__choix .wpcf7-list-item label { display: block; height: 100%; cursor: pointer; }
.wpcf7-spinner { display: none; }
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  padding-left: 10px;
  border-left: 3px solid var(--orange);
  color: var(--noir);
  font-size: 14px;
  font-weight: 700;
  font-style: italic; --slnt: -12;
  line-height: 1.3;
}
.question__choix .wpcf7-not-valid-tip { flex: 1 0 100%; margin: 12px 0 0; }
.champ input.wpcf7-not-valid { border-bottom-color: var(--orange); box-shadow: 0 1px 0 var(--orange); }
.wpcf7 form.formulaire__form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px 13px;
  border: 1px solid var(--noir);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.wpcf7 form.formulaire__form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { border-color: var(--orange); border-left-width: 4px; }
/* envoyé : le remerciement prend la place du formulaire */
.wpcf7 form .formulaire__merci { display: none; }
.wpcf7 form.sent { border-top: 0; }
.wpcf7 form.sent > :not(.formulaire__merci) { display: none; }
.wpcf7 form.sent .formulaire__merci { display: block; }
/* bouton d'envoi : le conteneur est le bouton de la maquette (padding, flèche) ; le champ submit
   n'en garde que le texte. Un clic sur tout le bouton envoie (app.js). */
.formulaire__bouton { cursor: pointer; }
.formulaire__bouton .wpcf7-submit {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.formulaire__bouton:has(.wpcf7-submit:focus-visible) { outline: 2px solid var(--noir); outline-offset: 3px; }
.formulaire__bouton .wpcf7-submit:focus-visible { outline: none; }

/* ---------- Témoignages (motif à insérer quand les avis seront là) ---------- */
.temoignage__citation { padding: 0; border: 0; }
.temoignage__citation::before { font-family: var(--f-texte); font-weight: 900; --wdth: var(--w-xc); }
/* le rôle, sous le nom (le <small> de la maquette) */
.temoignage__nom em { display: block; font-size: 14px; font-weight: 400; font-style: normal; --slnt: 0; letter-spacing: 0; text-transform: none; }