/* ==========================================================================
   DDA - Diomat Design Architecture
   Feuille de style principale
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --white: #ffffff;
  --bg: #f3f3f1;           /* fond de page : gris très léger */
  --bg-rgb: 243, 243, 241;
  --ink: #0d0d0c;          /* noir du logo et des titres */
  --ink-2: #33302d;        /* texte courant */
  --muted: #7a736d;        /* légendes, libellés */
  --stone: #e0dcd9;        /* gris chaud de la maquette */
  --stone-2: #eeebe8;      /* gris chaud clair (fonds d'images) */
  --line: #d6d0cb;         /* filets */
  --red: #d1281f;          /* rouge du repère de l'agence sur le plan */

  --f-display: "Barlow", "D-DIN", "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --header-h: 46px;
  --gutter: clamp(20px, 1.6vw, 32px);

  /* Largeur du cadre image portrait (5:6) du hero, calée sur la hauteur de l'écran.
     Elle sert aussi de colonne de référence pour aligner les autres sections. */
  /* Cadre de l'image du hero : toujours 2/5 de la largeur de la page (ordinateur / paysage).
     Sa hauteur suit l'écran ; la photo à l'intérieur est recadrée pour remplir le cadre.
     --page-w est la largeur réelle de la page (sans la barre de défilement), fournie par le script. */
  --screen-h: 100vh;
  --frame-w: calc(var(--page-w, 100vw) * .4);

  /* Mouvement : discret et cohérent sur tout le site */
  --ease: cubic-bezier(.65, 0, .35, 1);        /* entrée-sortie douce */
  --ease-out: cubic-bezier(.22, 1, .36, 1);    /* décélération calme */
  --t-fast: .25s;
  --t-med: .6s;
  --t-slow: .9s;
  --wipe: 900ms;
}

/* Hauteur d'écran stable sur mobile (sans la barre d'adresse) quand le navigateur la connaît */
@supports (height: 100svh) {
  :root { --screen-h: 100svh; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }
html:has(body.is-locked) { overflow: hidden; }   /* visionneuse ouverte : aucune barre de défilement */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--ink); color: var(--white); padding: 10px 14px;
  font-family: var(--f-display); font-weight: 500;
}
.skip-link:focus { top: 8px; }

/* ---------- Typographie ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: .004em;
  line-height: .9;
}

.page-title {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(3.25rem, 9.2vw, 10rem);
  line-height: .86;
  letter-spacing: .002em;
}

.h2 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(2rem, 4.2vw, 4.25rem);
  line-height: .92;
  text-wrap: balance;
}

.h3 {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  letter-spacing: .02em;
  line-height: 1.1;
}

.eyebrow {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead {
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.25vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.prose p + p { margin-top: 1em; }

/* Boutons : rectangles simples, texte seul, en minuscules (plus lisible) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
/* Au survol, chaque bouton s'inverse : le noir plein devient blanc à contour noir,
   le contour (« Découvrir l'agence ») se remplit de noir. */
.btn:hover { background: var(--bg); color: var(--ink); border-color: var(--ink); }
/* ombre des boutons, la même que sous l'en-tête */
/* À propos : titres de section en minuscules (seule la 1re lettre en majuscule) */
.page-a-propos .h2 { text-transform: none; }   /* couleur du fond de page */
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* Grand bouton (fin de section) : plus présent, même style */
.btn--lg {
  min-width: min(100%, 360px);
  padding: 24px 56px;
  font-size: clamp(1.0625rem, 1.25vw, 1.375rem);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  background-color: var(--bg);   /* opaque, de la couleur du fond de page */
  box-shadow: 0 1px 0 rgba(13, 13, 12, 0), 0 8px 18px -12px rgba(13, 13, 12, 0);
  transition: box-shadow .3s ease;
}
/* légère ombre sous l'en-tête, seulement une fois la page défilée (tout en haut : pas d'ombre) */
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(13, 13, 12, .05), 0 8px 18px -12px rgba(13, 13, 12, .28); }

/* Logo : presque toute la hauteur de l'en-tête (6 px au-dessus et au-dessous), marge gauche = gouttière */
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand svg {
  display: block;
  flex-shrink: 0;
  /* hauteur entière et même marge en haut et en bas (6 px) : centrage net, sans demi-pixel */
  height: calc(var(--header-h) - 12px);
  width: auto;
  fill: currentColor;
  /* le « A » touche le bord du dessin : sans ceci, certaines résolutions coupent son pied droit */
  overflow: visible;
}

/* Liens du header (graisse normale) : le script mesure la police réelle et règle --nav-size
   pour que les lettres (accents et jambages compris) occupent 90 % de la bande du logo ;
   --nav-shift recentre l'encre des lettres, --nav-under place le trait de survol
   sous les jambages, --nav-sep-* cale les séparateurs sur les majuscules. */
.nav {
  position: absolute;
  left: 40%;
  top: 50%;
  transform: translate(-50%, calc(-50% + var(--nav-shift, 0px)));
  display: flex;
  align-items: center;
}
.nav a,
.nav-contact {
  position: relative;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--nav-size, clamp(1.125rem, 1.25vw, 1.375rem));
  line-height: 1;
  letter-spacing: .005em;
  color: var(--ink);
}
.nav a + a { margin-left: 1.1em; }
.nav a + a::before {
  content: "";
  position: absolute;
  left: -.55em;
  top: var(--nav-sep-top, 50%);          /* centré sur les majuscules */
  width: 1px;
  height: var(--nav-sep-h, .7em);        /* hauteur des majuscules */
  background: #b9b3ae;
  transform: translateY(-50%);
}
.nav a::after,
.nav-contact::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--nav-under, calc(100% + 2px));
  height: 1px;
  background: currentColor;
  /* au survol, le trait apparaît sous le mot, sans animation */
  opacity: 0;
}
.nav a:hover::after,
.nav-contact:hover::after { opacity: 1; }

.nav-contact {
  position: absolute;
  right: calc(var(--gutter) + var(--frame-w) / 2);
  top: 50%;
  transform: translate(50%, calc(-50% + var(--nav-shift, 0px)));
}

.menu-toggle {
  display: none;
  margin-left: auto;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  color: var(--ink);
  /* icône seule, zone de clic confortable (44 px), calée sur la gouttière de droite */
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: flex-end;
}
.menu-toggle__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.menu-toggle__bars { position: relative; width: 26px; height: 9px; }
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease-out), top .4s var(--ease-out);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 7.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 3.75px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 3.75px; transform: rotate(-45deg); }

/* Menu plein écran (mobile / tablette) : même langage que le reste du site.
   Fond gris de la page, noir du logo, titres Barlow en capitales, filets de 1 px, angles droits. */
html.menu-lock { overflow: hidden; scrollbar-gutter: stable; overscroll-behavior: none; }   /* la page ne bouge pas : pas de saut au retour */
.menu {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 60;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  padding: var(--header-h) 0 env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  animation: menu-in .3s ease both;
}
.menu.is-closing { animation: menu-out .22s ease both; }
.menu__links {
  /* minimaliste : les catégories seules, centrées */
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  flex: 1;
  margin-inline: var(--gutter);
  padding-bottom: var(--header-h);
}
.menu__links a {
  display: block;
  padding-block: 6px;
  text-align: center;
  color: var(--ink);
  animation: menu-item-in .7s var(--ease-out) both;
}
.menu__links a:nth-child(1) { animation-delay: .05s; }
.menu__links a:nth-child(2) { animation-delay: .1s; }
.menu__links a:nth-child(3) { animation-delay: .15s; }
.menu__links a:nth-child(4) { animation-delay: .2s; }
.menu__num {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: .02em;
  color: var(--muted);
}
.menu__label {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.75rem, min(9vw, 7vh), 3.25rem);
  line-height: .95;
  letter-spacing: .002em;
  text-decoration: underline transparent 1px;
  text-underline-offset: .12em;
}
.menu__links svg { align-self: center; width: 22px; height: auto; color: var(--ink); }
.menu__links a[aria-current="page"] .menu__label { text-decoration-color: var(--ink); }   /* page en cours : trait sous le mot */
.menu__foot {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin: auto var(--gutter) 0;
  padding: clamp(28px, 5vh, 48px) 0 calc(var(--gutter) + 8px);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.menu__name { margin: 0 0 .35em; font-weight: 600; font-size: 1.25rem; color: var(--ink); }
.menu__foot a { color: inherit; }
.menu__socials { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: .9em; }
/* survol / appui : trait sous le mot, sans animation (comme le header et le pied de page) */
.menu__foot a:hover, .menu__foot a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (hover: hover) { .menu__links a:hover .menu__label { text-decoration-color: var(--ink); } }
.menu__links a:focus-visible .menu__label { text-decoration-color: var(--ink); }
/* ni halo bleu ni sélection de texte quand on touche le bouton ou un lien du menu */
.menu-toggle, .menu a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.menu-toggle:focus:not(:focus-visible), .menu a:focus:not(:focus-visible) { outline: none; }
.menu-toggle::selection, .menu ::selection { background: transparent; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes menu-item-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* En-tête pendant l'ouverture du menu : reste en place (même couleur, même place), au-dessus du panneau */
.site-header.is-menu-open, .site-header.is-menu-open.is-scrolled { z-index: 70; touch-action: none; transition: none;
  box-shadow: 0 1px 0 rgba(13, 13, 12, .05), 0 8px 18px -12px rgba(13, 13, 12, .28); }   /* menu ouvert : même en-tête, avec son ombre */

/* ==========================================================================
   HERO (accueil)
   ========================================================================== */
.hero {
  position: relative;
  /* Le hero occupe exactement l'écran sous l'en-tête : rien ne déborde */
  height: calc(var(--screen-h) - var(--header-h));
  min-height: 280px;
  /* le bloc titre + paragraphe ne descend jamais plus bas que le bas de l'image */
  padding-bottom: var(--gutter);
  display: flow-root;   /* la marge du texte reste à l'intérieur du hero */
}

/* Cadre de l'image : 2/5 de la largeur, du haut du hero jusqu'à une gouttière du bas */
.hero__frame {
  position: absolute;
  top: 0;
  bottom: var(--gutter);
  right: var(--gutter);
  width: var(--frame-w);
  overflow: hidden;
  background: var(--bg);
  z-index: 1;
}

/* Les images sont empilées ; le script fait monter chaque nouvelle image
   de bas en haut (balayage) par-dessus la précédente. */
.hero__slide {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: 0;
  visibility: hidden;
}
.hero__slide:first-child { visibility: visible; }
.js .hero__slide:first-child { visibility: hidden; }
.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* la photo s'adapte au cadre (recadrage) */
  object-position: 50% 50%;
}

/* Titre + paragraphe (au-dessus de l'image) */
.hero__text {
  /* Au défilement, le titre (et le paragraphe dessous) s'accroche sous l'en-tête,
     puis repart avec l'image quand le paragraphe arrive au bas de celle-ci. */
  position: -webkit-sticky;
  position: sticky;
  z-index: 2;
  top: calc(var(--header-h) + var(--sticky-gap, 14px));
  margin-left: var(--gutter);
  margin-right: calc(var(--gutter) * 2 + var(--frame-w));
  /* position de départ : le haut du titre à 44 % de la hauteur */
  margin-top: calc((var(--screen-h) - var(--header-h) - var(--gutter)) * .44 - 5.3vw * var(--k, 1) * .57);
}

.hero__title {
  width: max-content;
  font-size: calc(5.3vw * var(--k, 1));
  line-height: .9;
  white-space: nowrap;
  /* marge intérieure pour que la couleur couvre toute la hauteur des lettres */
  padding-block: .12em;
}
.hero__title .w { display: inline; }

/* Un seul vrai texte. La partie qui passe sur l'image prend la couleur de l'image
   affichée (noir de jour, blanc de nuit) ; le changement suit la ligne du balayage. */
.js .hero__title {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(to bottom, var(--c-top, #0d0d0c) var(--split, 0px), var(--c-bot, #0d0d0c) var(--split, 0px));
  background-size: var(--edge, 100%) 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
.js .hero__title::selection,
.js .hero__title .w::selection { -webkit-text-fill-color: var(--white); color: var(--white); background: var(--ink); }

.hero__lead {
  margin-top: .95em;
  text-align: right;
  font-size: clamp(1rem, 1.12vw, 1.1875rem);   /* même taille que le texte « Notre mission… » */
  line-height: 1.5;
  color: var(--ink-2);
}

/* Arrivée du texte */
.js .hero__title { animation: rise-in 1.1s var(--ease-out) .2s both; }
.js .hero__lead { animation: rise-in 1.1s var(--ease-out) .35s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Sections communes
   ========================================================================== */
.section { padding: clamp(104px, 12vw, 220px) var(--gutter); }
.section--stone { background: var(--bg); }
.section--tight { padding-block: clamp(56px, 6vw, 112px); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: clamp(48px, 6vw, 112px);
}
.section-head .eyebrow { margin-bottom: 14px; }

/* ---------- Mission / agence (accueil) ---------- */
.intro { padding-block: clamp(128px, 16vw, 300px); }
.intro__grid {
  display: grid;
  grid-template-columns: 1fr calc(var(--frame-w) * .8) var(--frame-w);
  column-gap: clamp(24px, 2.4vw, 48px);
  align-items: end;
}
.intro__media { grid-column: 2; }
.intro__media img { width: 100%; aspect-ratio: 563 / 319; object-fit: cover; }
/* [data-morph] (photo de l'agence) : au défilement, l'élément part d'un carré
   centré et s'élargit sur les côtés jusqu'à sa forme, au rythme du défilement.
   --p : 0 = carré, 1 = forme entière ; --mx : rognage max de chaque côté (script).
   Les 6 px négatifs laissent visible le contour de focus. */
[data-morph] {
  --p: 1;
  -webkit-clip-path: inset(-6px calc((1 - var(--p)) * var(--mx, 0px) - 6px));
  clip-path: inset(-6px calc((1 - var(--p)) * var(--mx, 0px) - 6px));
}
.intro__text { grid-column: 3; }
.intro__text .eyebrow { margin-bottom: 18px; color: #6c655f; }
.intro__text p.body {
  font-size: clamp(1rem, 1.12vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.intro__text .btn { margin-top: 28px; }

/* ---------- Expertises ---------- */
.expertises__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink);
}
.expertise {
  padding: 32px 40px 8px 0;
  display: grid;
  align-content: start;
  gap: 18px;
}
.expertise + .expertise { padding-left: 32px; border-left: 1px solid var(--line); }
.expertise p { color: var(--ink-2); font-size: .9688rem; max-width: 34ch; }

/* ---------- Page Projets : tuiles carrées ----------
   Photos seules, en carré, sans titre, sans filtre et sans nom (gardés pour Google et les
   lecteurs d'écran). Même filet de fond que les projets de l'accueil : écarts et marges
   d'une demi-gouttière. 4 par ligne sur ordinateur, 3 sur tablette, 2 sur petit écran, 1 sur téléphone.
   Couverture dessinée (case « Plan » dans l'admin) : montrée en entier sur fond blanc. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--gutter) / 2);
}
.project-card { min-width: 0; }
.project-card__link { position: relative; display: block; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.project-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--stone-2);
  aspect-ratio: 1 / 1;
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-card__media.is-drawing { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.project-card__media.is-drawing img { object-fit: contain; padding: 8%; }
@media (max-width: 1023px) {
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- Pied de page : feuille de plan (trame de points) + cartouche ---------- */
.site-footer {
  color: var(--ink-2);
  background: var(--bg);
  padding: clamp(40px, 5vw, 80px) 0 0;
}
/* Bloc « Un projet ? Parlons-en. » (sans trame : les points sont sur le bloc noir) */
.footer-sheet {
  display: flow-root;
  margin-inline: var(--gutter);
}
/* Canvas de la trame de points (dessiné par initDots) */
.dots-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.footer-sheet__in { position: relative; padding: clamp(72px, 9vw, 170px) 0 clamp(64px, 7vw, 128px); }

.cta__eyebrow { color: #8f8882; }
.cta__title {
  margin-top: 18px;
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(2.75rem, 7.6vw, 8.5rem);
  line-height: .88;
}
.cta__btn { display: flex; width: max-content; margin-top: clamp(28px, 3vw, 48px); }
.cta__mail {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: clamp(28px, 3vw, 48px);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.3vw, 2.25rem);
  color: var(--ink);
  border-bottom: 1px solid rgba(13, 13, 12, .3);
  padding-bottom: 6px;
  word-break: break-all;
  transition: border-color .3s ease;
}
.cta__mail:hover { border-color: var(--ink); }
.cta__mail svg { width: .8em; height: .8em; flex: none; transition: transform .4s var(--ease-out); }
.cta__mail:hover svg { transform: translate(3px, -3px); }

/* Pied de page noir : menus en haut à droite, grand nom de l'agence sur toute la largeur
   (même police que le titre du haut de page), coordonnées dessous, mentions en bas. */
.ft {
  /* trame de points blancs (le script la redessine, sans points sous les textes) */
  --dot-rgb: 255, 255, 255;
  --dot-alpha: .34;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: clamp(40px, 5vw, 80px);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .34) .7px, transparent 1.1px);
  background-size: 32px 32px;   /* même écart que la trame dessinée par le script */
  background-repeat: space;
  padding: clamp(72px, 9vw, 150px) var(--gutter) calc(clamp(16px, 1.6vw, 24px) + env(safe-area-inset-bottom, 0px));
  background-color: var(--ink);
  color: var(--white);
}
.ft.has-canvas { background-image: none; }
.ft > :not(.dots-canvas) { position: relative; }
.ft a { color: inherit; }
/* survol : trait sous le mot, sans animation (comme le header) */
.ft a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ft__menus {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 32px clamp(40px, 5vw, 96px);
}
.ft__col {
  display: grid;
  align-content: start;
  justify-items: start;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.35vw, 1.375rem);   /* même taille que l'adresse */
  line-height: 1.45;
}
.ft__label {
  margin-bottom: .4em;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.375rem);
  line-height: 1.15;
}
/* le script cale la taille pour que le nom occupe toute la largeur, d'un bord à l'autre */
.ft__word {
  margin-top: clamp(40px, 5vw, 88px);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .004em;
  line-height: .9;
  font-size: 7.4vw;
  white-space: nowrap;
}
.ft__word span { display: inline-block; }
.ft__info {
  display: grid;
  justify-items: start;
  margin-top: clamp(14px, 1.4vw, 24px);
  font-style: normal;
  font-family: var(--f-body);
  font-size: clamp(1rem, 1.35vw, 1.375rem);
  line-height: 1.45;
}
.ft__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: clamp(28px, 3.5vw, 56px);
  font-family: var(--f-body);
  font-size: clamp(.8125rem, .95vw, .9375rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}
.ft__bottom > span + span::before { content: "/"; margin: 0 .55em; opacity: .7; }
.ft__bottom a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); }

@media (max-width: 699px) {
  .ft__menus { justify-content: flex-start; }
  .ft__bottom { justify-content: flex-start; flex-direction: column; }
  .ft__bottom > span + span::before { content: none; }
}

/* ==========================================================================
   Pages intérieures
   ========================================================================== */
.page-head {
  padding: clamp(88px, 12vw, 220px) var(--gutter) clamp(64px, 8vw, 140px);
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, var(--frame-w));
  gap: 24px 30px;
  align-items: end;
}
.page-head .page-title { white-space: nowrap; }
.page-head .lead { max-width: 46ch; }
/* page sans grand titre visible (À propos) : le texte d'introduction seul */
.page-head--lead { display: block; padding-top: clamp(56px, 7vw, 120px); padding-bottom: clamp(40px, 5vw, 88px); }
.page-head--lead .lead { max-width: 60ch; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.45; }

/* ---------- Mentions légales, Confidentialité : texte simple, une colonne lisible ---------- */
.legal { padding: 0 var(--gutter) clamp(64px, 8vw, 140px); }
.legal__head { padding: clamp(72px, 9vw, 160px) 0 clamp(40px, 5vw, 80px); display: grid; gap: 24px; }
.legal__head .lead { max-width: 52ch; }
.legal__body { display: grid; gap: clamp(32px, 3.5vw, 48px); max-width: 72ch; }
.legal__body h2 { margin: 0 0 .6em; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.2; color: var(--ink); }
.legal__body p, .legal__body li { font-size: clamp(1rem, 1.1vw, 1.0625rem); line-height: 1.65; color: var(--ink-2); }
.legal__body p + p { margin-top: .8em; }
.legal__body ul { margin: .6em 0 0; padding-left: 1.2em; list-style: disc; }
.legal .page-title { font-size: clamp(2.25rem, 8.4vw, 9rem); overflow-wrap: break-word; hyphens: auto; }
.legal__body a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.legal__body .btn { margin-top: .4em; }
.legal__state strong { color: var(--ink); }

.projects-page { padding: 0 calc(var(--gutter) / 2) calc(var(--gutter) / 2); }   /* photos collées sous l'en-tête ; marges des côtés et du bas comme les photos de l'accueil */
/* Page Projets : le pied de page noir suit les photos au même écart qu'entre deux photos (demi-gouttière) */
.page-projets .site-footer { padding-top: 0; }
.page-projets .ft { margin-top: 0; }

/* ---------- Page d'un projet ----------
   Comme un article : le nom, la couverture, le texte et les images dans une colonne CENTRÉE sur la page ;
   la fiche (programme, lieu, année…) dans la marge de droite, à côté de la couverture.
   Les photos sont recadrées au format choisi dans l'admin (--pj-ratio, 3:4 par défaut), sur le point choisi
   pour chacune ; les plans restent en entier sur blanc. Rien ne reste collé (l'en-tête non plus).
   Tablette et téléphone : une colonne (couverture, fiche, texte, images). */
.page-projet .site-header { position: relative; }
.pj {
  --pj-col: 600px;
  padding: 0 var(--gutter) clamp(56px, 7vw, 120px);
}
.pj__head { padding: clamp(40px, 5vw, 80px) 0 clamp(24px, 2.8vw, 40px); text-align: center; }
.pj__title {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: .95;
  letter-spacing: .005em;
  text-wrap: balance;
}

.pj__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--pj-col)) minmax(0, 1fr);
  gap: 0 clamp(28px, 3.4vw, 56px);
  align-items: start;
}
.pj__cover, .pj__text, .pj__photos { grid-column: 2; }
.pj__cover { grid-row: 1; }
.pj__info { grid-column: 3; grid-row: 1; max-width: 300px; }
.pj__facts { display: grid; margin: 0; border-top: 1px solid var(--ink); }
.pj__facts > div { display: grid; gap: 4px; padding: 12px 0 13px; border-bottom: 1px solid var(--line); }
.pj__facts dt { font-family: var(--f-display); font-weight: 500; font-size: .75rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #6c655f; }
.pj__facts dd { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.35; color: var(--ink); }

.pj__cover, .pj__fig { margin: 0; min-width: 0; }
.pj__frame { position: relative; display: block; background: var(--stone-2); cursor: zoom-in; overflow: hidden; }
.pj__frame img { display: block; width: 100%; height: auto; }
.is-cropped .pj__frame { aspect-ratio: var(--pj-ratio, 3 / 4); }
.pj__cover.is-cropped .pj__frame { aspect-ratio: var(--pj-cratio, 4 / 3); }   /* 1re photo : paysage 4:3 par défaut */
.is-cropped .pj__frame img { height: 100%; object-fit: cover; }
.is-plan .pj__frame { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.is-plan .pj__frame img { padding: 6%; }
.pj__frame::after {                 /* petite icône « plein écran » au survol */
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230d0d0c' stroke-width='1.3'%3E%3Cpath d='M1 5.5V1h4.5M10.5 1H15v4.5M15 10.5V15h-4.5M5.5 15H1v-4.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}
.pj__frame:hover::after,
.pj__frame:focus-visible::after { opacity: 1; }
.pj__cap { margin-top: 10px; font-size: .875rem; line-height: 1.45; color: #6c655f; text-align: center; }

.pj__text {
  padding-top: clamp(32px, 3.6vw, 56px);
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: var(--ink-2);
}
.pj__text p + p { margin-top: 1em; }
.pj__photos { display: grid; gap: clamp(16px, 2vw, 32px); padding-top: clamp(32px, 3.6vw, 56px); }

.pj-missing { min-height: 50vh; display: grid; align-content: center; justify-items: start; gap: 24px; padding: 64px var(--gutter); }
.pj-missing__text { color: var(--ink-2); }

/* tablette et téléphone : une colonne centrée, la fiche juste sous la couverture */
@media (max-width: 899px) {
  .pj__body { grid-template-columns: minmax(0, var(--pj-col)); justify-content: center; }
  .pj__cover, .pj__info, .pj__text, .pj__photos { grid-column: 1; grid-row: auto; }
  .pj__info { max-width: none; padding-top: 24px; }
  .pj__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
@media (max-width: 479px) {
  .pj__frame::after { display: none; }
}

/* impression : la page sans menu ni pied de page */
@media print {
  .site-header, .skip-link, .site-footer, .viewer { display: none !important; }
  html, body { background: #fff !important; }
  .pj__fig, .pj__cover { break-inside: avoid; }
  .pj__frame::after { display: none; }
  .fade-img { opacity: 1 !important; }
}

/* ---------- Page projet : visionneuse plein écran ----------
   Fond noir, l'image en entier ; on glisse du doigt (ou à la souris) pour passer
   à la suivante, flèches et clavier sur ordinateur, Échap ou « Fermer » pour sortir. */
.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #0d0d0c;
  color: #fff;
  overscroll-behavior: contain;
}
.viewer::backdrop { background: #0d0d0c; }
.viewer[open] { animation: viewer-in .35s ease; }
.viewer.is-closing { animation: viewer-out .25s ease both; }
@keyframes viewer-in { from { opacity: 0; } }
@keyframes viewer-out { to { opacity: 0; } }

.viewer__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;   /* le glissement horizontal est géré par le script */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.viewer__stage.is-dragging { cursor: grabbing; }
.viewer__track {
  display: flex;
  height: 100%;
  transition: transform .55s var(--ease-out);
  will-change: transform;
}
.viewer__track.is-dragging { transition: none; }
.viewer__slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 8vh, 80px) clamp(12px, 6.5vw, 120px) clamp(64px, 10vh, 96px);
}
.viewer__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;                 /* plans aux fonds transparents : lisibles sur le noir */
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.viewer__slide img.is-loaded { opacity: 1; }

.viewer__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--gutter);
  font-family: var(--f-display);
  pointer-events: none;
}
.viewer__bar > * { pointer-events: auto; }
.viewer__count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .86);
  font-variant-numeric: tabular-nums;
}
.viewer__bar { justify-content: flex-end; }
.viewer, .viewer__stage { scrollbar-width: none; }
.viewer::-webkit-scrollbar, .viewer__stage::-webkit-scrollbar { display: none; }
.viewer__close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  color: #fff;
}
.viewer__close svg { width: 20px; height: 20px; transition: transform var(--t-fast) ease; }
.viewer__close:hover svg { transform: rotate(90deg); }
.viewer__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  transition: background var(--t-fast) ease, color var(--t-fast) ease, opacity var(--t-fast) ease;
}
.viewer__arrow:hover { background: #fff; color: var(--ink); }
.viewer__arrow svg { width: 18px; height: 18px; }
.viewer__arrow--prev { left: var(--gutter); }
.viewer__arrow--next { right: var(--gutter); }
.viewer__arrow:disabled { opacity: 0; pointer-events: none; }
.viewer__arrow[hidden] { display: none; }
.viewer__cap {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.6vh, 34px);
  z-index: 2;
  width: max-content;
  max-width: min(64ch, calc(100% - 2 * var(--gutter) - 128px));
  translate: -50% 0;
  text-align: center;
  font-size: .9375rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .8);
}
@media (max-width: 699px) {
  .viewer__slide { padding: 56px 0 76px; }
  .viewer__arrow { top: auto; bottom: 12px; margin-top: 0; width: 44px; height: 44px; background: transparent; }
  .viewer__arrow--prev { left: 6px; }
  .viewer__arrow--next { right: 6px; }
  .viewer__cap { bottom: 22px; max-width: calc(100% - 120px); font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__track { transition-duration: .01ms; }
}

/* ---------- À propos ---------- */
.about-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--frame-w);
  gap: 48px clamp(24px, 3vw, 56px);
  align-items: end;
}
/* À propos : photo de couverture pleine largeur, son bas noir continue dans le bloc noir du texte */
.about-hero { background: #000; color: #fff; }
.about-hero__img {
  display: block;
  width: 100%;
  height: clamp(240px, 34vw, 620px);   /* bande large : les baies vitrées, sans tout le plafond */
  object-fit: cover;
  object-position: 50% 60%;
}
.about-hero__text { padding: 0 var(--gutter) clamp(56px, 6vw, 104px); margin-top: -1px; }
/* « Une architecture » : toujours sur le noir, les trois valeurs en tuiles */
.about-values { background: #000; padding-top: 0; padding-bottom: clamp(72px, 8vw, 140px); }
.about-values .section-head { margin-bottom: clamp(20px, 2.2vw, 32px); }
.about-values .h2 { color: #fff; }
.about-values .values { border-top: 0; gap: var(--gutter); }
.about-values .value,
.about-values .value + .value {
  padding: clamp(24px, 2.6vw, 40px);
  border: 0;
  border-radius: 0;
  background: #1a1a19;
}
.about-values .value__word { color: #fff; font-size: clamp(1.75rem, 2.8vw, 3rem); }
.about-values .value p { color: rgba(255, 255, 255, .78); }
/* puis, sur le fond clair, la phrase alignée à droite */
.about-statement { padding-top: clamp(48px, 5vw, 88px); padding-bottom: 0; }
.about-team { padding-top: clamp(48px, 5vw, 88px); }
.about-team .section-head, .about-steps .section-head { margin-bottom: clamp(20px, 2.2vw, 32px); }
.about-team { padding-bottom: clamp(48px, 5vw, 88px); }
.about-steps { padding-top: clamp(48px, 5vw, 88px); }
.about-statement p { max-width: 60ch; margin-inline: auto; text-align: center; font-size: clamp(1rem, 1.12vw, 1.1875rem); line-height: 1.55; color: var(--ink); }
.about-hero__text p + p { margin-top: 1em; }
.about-hero__text p {
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1rem, 1.12vw, 1.1875rem);   /* taille des paragraphes du site */
  line-height: 1.55;
  color: #fff;
}
@media (max-width: 699px) {
  .about-hero__img { height: auto; aspect-ratio: 16 / 10; object-position: 50% 60%; }
}
.about-intro__media img { width: 100%; aspect-ratio: 1920 / 1120; object-fit: cover; }
.about-intro__text p { font-size: clamp(1rem, 1.12vw, 1.1875rem); line-height: 1.55; color: var(--ink); }

.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.value { padding: 34px 44px 0 0; display: grid; gap: 18px; align-content: start; }
.value + .value { padding-left: 36px; border-left: 1px solid var(--line); }
.value__word {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 3.75rem);
  line-height: .9;
}
.value p { max-width: 38ch; }

/* « De la faisabilité à la réception » (a-propos.php) : titre centré, étapes centrées dans l'ordre de lecture
   (3 par ligne, 2 sur tablette, 1 sur téléphone), numéro en haut à gauche de chaque illustration. */
.about-steps .section-head { justify-content: center; text-align: center; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 88px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.step { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; width: min(100%, 340px); justify-self: center; }   /* bloc centré, texte aligné à gauche sous le dessin */
.step__fig { order: -1; position: relative; width: min(100%, 230px); }
.step__num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.step__art { display: block; width: 100%; height: auto; color: var(--ink); }
.step__title {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  line-height: 1.1;
}
.step p { max-width: none; }
@media (min-width: 700px) and (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}
.step__art .plot{fill:currentColor;fill-opacity:.05;stroke:currentColor;stroke-width:1}
.step__art .plot-d{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:4 3}
.step__art .ln{stroke:currentColor;stroke-width:1;fill:none}
.step__art .ln-b{stroke:currentColor;stroke-width:1.6}
.step__art .ln-t{stroke:currentColor;stroke-width:.8;opacity:.7}
.step__art .dash,.step__art .none{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 3}
.step__art .zone{fill:none;stroke:currentColor;stroke-width:.8;stroke-dasharray:2 3;opacity:.6}
.step__art .grid{stroke:currentColor;stroke-width:.5;opacity:.25}
.step__art .f-top{fill:#fff;stroke:currentColor;stroke-width:1}
.step__art .f-l{fill:#d9d6d2;stroke:currentColor;stroke-width:1}
.step__art .f-r{fill:#b9b4af;stroke:currentColor;stroke-width:1}
.step__art .f-w{fill:#fff;stroke:currentColor;stroke-width:1}
.step__art .f-w2{fill:#ebe8e5;stroke:currentColor;stroke-width:1}
.step__art .win{fill:#0d0d0c;fill-opacity:.75;stroke:none}
.step__art .f-tree{fill:#fff;stroke:currentColor;stroke-width:1}
.step__art .sign{fill:#fff;stroke:currentColor;stroke-width:1.2}
.step__art .path{fill:currentColor;fill-opacity:.12;stroke:none}


.team {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(48px, 4vw, 80px) clamp(20px, 2.4vw, 44px);
}
.member__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stone-2);
}
.member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  filter: grayscale(1) contrast(1.02);
}
.member__name {
  margin-top: 18px;
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.2;
}
.member__role { font-size: .875rem; color: var(--muted); margin-top: 2px; }

/* ---------- Contact (bas de l'accueil) ----------
   Une scène plein écran qui suit le défilement (voir initMap) :
   1. « Un Projet ? Parlons-en ! » en haut, La Réunion entière dessous (pas derrière le titre), qui arrive par le bas en fondu ;
   2. le plan reste en place (sticky) : le titre s'en va vers le haut, l'île remonte au milieu, puis le plan zoome jusqu'à la rue de l'agence ;
   3. coordonnées et réseaux apparaissent en bas à droite ; le plan repart et le formulaire arrive.
   Haut et bas du plan fondus dans le fond de la page. */
.contact {
  --frame-h: calc(100vh - var(--header-h));   /* hauteur du plan : tout l'écran sous l'en-tête */
  padding: 0 var(--gutter) clamp(48px, 5vw, 96px);
  scroll-margin-top: var(--header-h);         /* lien « Contact » : le titre au milieu de l'écran, sur l'île */
}
@supports (height: 100svh) {
  .contact { --frame-h: calc(100svh - var(--header-h)); }   /* téléphone : hauteur stable, barre d'adresse comprise */
}
/* la scène, d'un bord à l'autre de l'écran */
.contact__stage { position: relative; margin: 0 calc(var(--gutter) * -1); }
/* défilement pendant lequel le plan reste en place (titre qui s'en va, zoom, courte pause) ;
   un espace dans le bloc et non une marge intérieure : un élément collé reste dans le contenu de son parent */
.js .contact__stage::after { content: ""; display: block; height: calc(var(--frame-h) * 2.2); }
/* titre en haut du premier écran, l'île entière dessous (jamais derrière) ; il glisse vers le haut au défilement */
.contact__intro {
  position: relative;
  z-index: 3;
  height: var(--frame-h);
  margin-bottom: calc(var(--frame-h) * -1);
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(24px, 7vh, 96px) var(--gutter) 0;
  pointer-events: none;        /* le plan dessous reste cliquable (Google Maps) */
}
.contact__title {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--ink);   /* « Un Projet ? Parlons-en ! » tel qu'écrit, pas en capitales */
  letter-spacing: .004em;
  line-height: .9;
  font-size: clamp(2.75rem, min(9.5vw, 17vh), 10rem);   /* plus petit sur un écran bas : l'île garde sa place dessous */
  text-align: center;          /* deux lignes centrées sur la page */
  /* liseré de la couleur de la page : le titre reste net sur les traits du plan */
  text-shadow: 0 0 10px var(--bg), 0 0 24px var(--bg);
}
.contact__title span { display: block; white-space: nowrap; }
/* le cadre du plan, collé sous l'en-tête pendant la scène */
.contact__frame {
  position: sticky;
  top: var(--header-h);
  height: var(--frame-h);
  overflow: hidden;
}
/* Panneau des coordonnées et du formulaire.
   Grand écran : collé à droite du plan pendant la scène (même hauteur que le cadre), sur un voile de la couleur
   de la page qui laisse deviner le plan ; il apparaît à la fin du zoom (classe is-arrived posée par initMap),
   les coordonnées d'abord, le formulaire juste après.
   Téléphone et tablette : après l'espace de défilement de la scène, il monte par-dessus le plan resté en place. */
.contact__panel { position: relative; z-index: 3; }
.form.contact__form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  width: 100%;
  position: relative;
}
.contact__form .field label { font-size: clamp(.9375rem, 1vw, 1.0625rem); }
.contact__form .field input, .contact__form .field textarea { padding: 6px 0 8px; }
.contact__form .field textarea { min-height: 76px; }
.contact__form .form__foot { display: grid; gap: 10px; }
.contact__form .btn { width: 100%; }
.contact__form .form__note { max-width: none; font-size: .8125rem; }
.js .contact__stage { display: flex; flex-direction: column; }
@media (min-width: 1024px) and (min-height: 560px) {
  .js .contact__panel {
    position: sticky;
    top: var(--header-h);
    align-self: flex-end;
    width: min(46%, 700px);
    height: var(--frame-h);
    margin-top: calc(var(--frame-h) * -1);
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    gap: clamp(18px, 4.5vh, 48px);
    overflow-x: hidden;   /* les éléments glissent depuis la droite sans élargir la page */
    overflow-y: auto;     /* écran très bas : le panneau défile plutôt que de couper le formulaire */
    padding: clamp(16px, 4vh, 48px) var(--gutter) clamp(16px, 4vh, 48px) clamp(40px, 5vw, 96px);
    /* voile de la couleur de la page, fondu sur son bord gauche : le plan reste visible derrière */
    background: linear-gradient(to right, rgba(243, 243, 241, 0), rgba(243, 243, 241, .88) clamp(40px, 5vw, 96px));
    transition: visibility 0s;
  }
  .js .contact__panel .contact__side,
  .js .contact__panel .contact__form { transition: opacity .6s ease, transform .7s var(--ease-out); }
  .js .contact__panel .contact__form { transition-delay: .45s; }   /* le formulaire arrive juste après les coordonnées */
  .js .contact__stage:not(.is-arrived) .contact__panel { visibility: hidden; pointer-events: none; transition: visibility 0s .5s; }
  .js .contact__stage:not(.is-arrived) .contact__side,
  .js .contact__stage:not(.is-arrived) .contact__form { opacity: 0; transform: translateX(28px); transition-delay: 0s; transition-duration: .3s; }
  /* écrans peu hauts : formulaire plus serré */
  @media (max-height: 760px) {
    .contact__panel .contact__block { font-size: .9375rem; line-height: 1.35; }
    .contact__panel .contact__label { margin-bottom: .25em; font-size: 1.125rem; }
    .form.contact__form { gap: 12px 24px; }
    .contact__form .field { gap: 2px; }
    .contact__form .field label { font-size: .875rem; }
    .contact__form .field input, .contact__form .field textarea { padding: 4px 0 6px; }
    .contact__form .field textarea { min-height: 48px; height: 52px; }
    .contact__form .btn.btn--lg { padding-block: 12px; }
    .contact__form .form__note { font-size: .75rem; }
  }
}
/* téléphone et tablette : le panneau après l'espace de défilement de la scène (ordre des éléments de la scène) */
@media not all and (min-width: 1024px) and (min-height: 560px) {
  .js .contact__stage::after { order: 1; }
  .js .contact__panel { order: 2; }
  .contact__panel { background: var(--bg); padding: 40px var(--gutter) 0; display: grid; gap: 40px; }
  .contact__panel .contact__form { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.field .req { color: var(--ink); }
/* coordonnées et réseaux côte à côte, en haut du panneau */
.contact__side {
  display: grid;
  grid-template-columns: max-content max-content;
  align-content: start;
  gap: 24px clamp(32px, 3.2vw, 56px);
}
.contact__block {
  display: grid;
  justify-items: start;
  align-content: start;   /* lignes serrées, même quand la colonne voisine est plus haute */
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink);
}
.contact__block address { font-style: normal; }
.contact__label {
  margin-bottom: .4em;
  font-weight: 600;
  font-size: clamp(1.375rem, 1.7vw, 1.75rem);
  line-height: 1.15;
}
/* survol : trait sous le mot, sans animation (comme le header) */
.contact__block a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* le plan remplit le cadre ; long fondu en haut (il arrive doucement depuis le fond de la page), plus court en bas */
.contact__map {
  position: absolute;
  inset: 0;
  background: transparent;   /* le plan est posé sur le fond de la page */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 82%, transparent 100%);
}
/* Plan en traits fins dessiné par le script (initMap, carte OpenStreetMap sans aucun nom) ;
   il apparaît en fondu une fois chargé. */
.contact__mapcanvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .4s ease;
}
.contact__map.is-ready .contact__mapcanvas { opacity: 1; }
/* le strict nécessaire de la feuille de style de MapLibre (évite un fichier de plus) */
.contact__mapcanvas .maplibregl-canvas { position: absolute; top: 0; left: 0; }
.maplibregl-canary { background-color: salmon; }
/* repère : point rouge qui « respire » lentement, seul (sans texte).
   Place à la fin du zoom : un peu à gauche et au-dessus du centre, loin des coordonnées ;
   le script dessine l'agence sous ce point, où qu'il soit (initMap). Il apparaît une fois le titre passé. */
.contact__map { --pin-x: 27%; --pin-y: 50%; }
.contact__pin {
  position: absolute;
  left: var(--pin-x); top: var(--pin-y);
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--red);
  pointer-events: none;
  transition: opacity .5s ease;
}
.js .contact__stage:not(.is-zooming) .contact__pin { opacity: 0; }
.contact__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(209, 40, 31, .35);
  animation: pin-pulse 2.6s var(--ease-out) infinite;
}
@keyframes pin-pulse {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(3.4); opacity: 0; }
}
.contact__mapopen { position: absolute; inset: 0; }
.contact__mapopen:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }

/* Page Contact : pas de scène au défilement, le plan tout de suite à la fin du zoom et le formulaire à côté
   (dessous sur téléphone et tablette, il monte par-dessus le plan). Plan net en haut, fondu seulement en bas. */
.contact--page { padding-bottom: 0; }
.js .contact--page .contact__stage::after { display: none; }
.contact--page .contact__map {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
}
.contact--page .contact__panel { padding-bottom: clamp(40px, 5vw, 80px); }
/* page Contact, téléphone et tablette : petit plan en haut, le formulaire tout de suite dessous */
@media not all and (min-width: 1024px) and (min-height: 560px) {
  .contact--page .contact__frame { position: relative; top: auto; height: clamp(200px, 32vh, 320px); }
  .contact--page .contact__panel { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .contact__pin::before { animation: none; opacity: 0; } }


.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 40px; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
/* intitulés des champs : texte normal, même taille que les coordonnées et les réseaux */
.field label {
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.35vw, 1.375rem);
  line-height: 1.45;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid #bdb6b0;
  border-radius: 0;
  padding: 10px 0 12px;
  transition: border-color .25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230d0d0c' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
  padding-right: 24px;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { box-shadow: 0 1px 0 var(--ink); }

.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.form__note { font-size: .875rem; color: var(--muted); max-width: 46ch; }
.form__status { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.form__status.is-error { color: #a1281b; }
.form__status a { text-decoration: underline; text-underline-offset: .2em; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: #a1281b; }
/* piège à robots : hors de l'écran, jamais vu par les visiteurs */
.form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form.is-sending .btn { opacity: .6; cursor: progress; }


/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablette paysage / petits portables */
@media (max-width: 1180px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expertises__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expertise { padding: 24px 24px 28px 0; }
  .expertise + .expertise { padding-left: 0; border-left: 0; }
  .expertise:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
  .expertise:nth-child(n+3) { border-top: 1px solid var(--line); }
}


/* Tablette et mobile : navigation repliée */
@media (max-width: 1023px), (orientation: portrait) and (max-width: 1366px) {
  :root { --header-h: 54px; }
  .nav, .nav-contact { display: none; }
  .menu-toggle { display: inline-flex; }

  /* l'image, puis « Notre mission… », puis le bouton */
  .intro__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .intro__text { display: contents; }
  .intro__media { order: 1; grid-column: 1; }
  .intro__text p.body { order: 2; grid-column: 1; margin-top: clamp(28px, 5vw, 48px); }
  .intro__text .btn { order: 3; grid-column: 1; justify-self: start; margin-top: clamp(28px, 5vw, 40px); }

  .page-head { grid-template-columns: 1fr; }
  .about-intro__grid { grid-template-columns: 1fr 1fr; }

}

/* Hero empilé (écrans en portrait, et mobiles étroits) : titre, paragraphe, puis image.
   Le tout tient dans la hauteur de l'écran : l'image se raccourcit si besoin
   (recadrée par le bas, le bâtiment reste visible). En paysage, l'image reste à droite. */
/* Téléphone et tablette en portrait : l'image en haut (même marge sous le logo que sur les côtés), sur environ
   la moitié de l'écran, puis sous l'image le titre sur une ligne (ajusté à la largeur par le script) et le
   paragraphe justifié, en noir. */
@media (orientation: portrait) and (max-width: 1366px), (max-width: 699px) {
  .hero {
    height: auto;
    min-height: 0;
    /* au-dessus de l'image : la gouttière moins les 6 px déjà vides sous le logo, dans l'en-tête */
    padding: calc(var(--gutter) - 6px) var(--gutter) 0;
    display: flex;
    flex-direction: column;
  }
  .hero__frame {
    position: relative;
    order: 1;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: calc((var(--screen-h) - var(--header-h)) * .5);
    min-height: 240px;
  }
  .hero__text {
    position: static;
    order: 2;
    margin: clamp(20px, 5vw, 36px) 0 0;
  }
  .hero__title {
    font-size: calc(6vw * var(--k, 1));
    line-height: .88;
    white-space: nowrap;
  }
  .js .hero__title { background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); }
  .hero__lead {
    margin-top: clamp(12px, 3vw, 20px);
    max-width: none;
    text-align: justify;
    hyphens: auto;
    color: var(--ink-2);
  }
  .hero__lead br { display: none; }
  /* On garde le bas de l'image (le bâtiment) plutôt que le ciel */
  .hero__slide img { object-position: 50% 100%; }
}


/* Mobile */
@media (max-width: 699px) {

  .section { padding-block: 96px; }
  .intro { padding-block: 104px; }

  .expertises__grid { grid-template-columns: 1fr; }
  .expertise, .expertise:nth-child(even) { padding: 28px 0 36px; border-left: 0; }
  .expertise + .expertise { border-top: 1px solid var(--line); }


  .about-intro__grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .value, .value + .value { padding: 28px 0 36px; border-left: 0; }
  .value + .value { border-top: 1px solid var(--line); }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member__name { white-space: nowrap; font-size: clamp(.75rem, 3.6vw, 1.0625rem); letter-spacing: 0; }   /* nom sur une seule ligne */

  .form, .form.contact__form { grid-template-columns: 1fr; gap: 32px; }
  /* téléphone et tablette : repère au milieu (le panneau vient après le plan) */
  .contact__map { --pin-x: 50%; --pin-y: 46%; }
  .contact__side {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 24px 16px;
  }
  .contact__block { font-size: .9375rem; }
  .contact__label { font-size: 1.125rem; }

}

/* Très petits téléphones : coordonnées et réseaux l'un sous l'autre */
@media (max-width: 379px) {
  .contact__side { grid-template-columns: 1fr; }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu, .menu.is-closing, .menu__links a { animation: none; }
}

/* Anciens navigateurs sans aspect-ratio (iOS < 15) */
@supports not (aspect-ratio: 1 / 1) {
  .project-card__media { height: 0; padding-top: 100%; }
  .project-card__media img { position: absolute; top: 0; left: 0; }
}
@supports not (aspect-ratio: 1 / 1) {
  @media (orientation: portrait) and (max-width: 1366px), (max-width: 699px) {
    .hero__frame { height: calc(var(--screen-h) - var(--header-h) - 30vw); }
  }
}

/* ---------- Carte : cadre affiché à la place de Google Maps dans l'aperçu ---------- */
.map__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  color: var(--ink-2);
}
.map__placeholder strong { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }

/* ---------- Compléments ---------- */
.section--flush { padding-top: 0; }
.section-head__aside { max-width: 36ch; }
.about-intro__text .eyebrow { margin-bottom: 18px; color: #6c655f; }
.about-intro__text .spaced + .spaced { margin-top: 1em; }
.field .opt { text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: .75rem; }

/* ==========================================================================
   Mouvement au défilement (discret)
   Les blocs apparaissent en fondu avec un léger glissement vers le haut,
   une seule fois, quand ils entrent dans l'écran.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* « Voir tous les projets » : apparition en zoom très léger (94 % → 100 %) */
.js .tiles__foot .btn[data-reveal] {
  transform: scale(.94);
  transition:
    transform 1s var(--ease-out),
    opacity .4s ease,
    background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.js .tiles__foot .btn[data-reveal].is-in { transform: none; }

/* Les images chargées tardivement arrivent en fondu, sans « pop » */
.js img.fade-img { opacity: 0; transition: opacity var(--t-med) ease; }
.js img.fade-img.is-loaded { opacity: 1; }

/* Le défilement doux est géré par le script : pas de double lissage */
html.has-smooth-scroll { scroll-behavior: auto; }


/* ==========================================================================
   Accueil : projets en tuiles (grandes photos rectangulaires)
   Marges et espaces = ceux de l'image du haut de page.
   ========================================================================== */
.section.featured {
  padding-top: clamp(24px, 4vw, 64px);
  padding-inline: calc(var(--gutter) / 2);
}
.featured .section-head { margin-bottom: clamp(28px, 3.5vw, 56px); }
.section-head--center { justify-content: center; text-align: center; }

/* Grandes photos seules, sans texte ni mouvement au survol.
   Marges et espaces : la moitié de la gouttière du haut de page. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--gutter) / 2);
}
.tile { position: relative; display: block; color: var(--ink); -webkit-tap-highlight-color: transparent; }   /* le nom masqué reste dans la tuile (pas de débordement de la bande) */
.tile__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--stone-2);
}
.tiles--odd .tile:last-child .tile__media { aspect-ratio: 21 / 9; }
.tiles--odd .tile:last-child { grid-column: 1 / -1; }
.tile__img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Nom + catégorie : lus par les lecteurs d'écran ; affichés dans l'étiquette
   qui suit la souris (ordinateur) ou sous la photo (écran tactile). */
.tile__info {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (hover: none), (pointer: coarse) {
  .tile__info {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 12px 2px 6px;
  }
  .tile__title { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.2; color: var(--ink); }
  .tile__cat { display: none; }   /* écran tactile : le nom du projet seul sous la photo (catégorie lue par les lecteurs d'écran via le lien) */
}

/* Étiquette qui suit la souris au survol d'un projet (fond blanc opaque) */
.tile-tip {
  position: fixed;
  top: 0; left: 0;
  z-index: 45;
  display: grid;
  gap: 3px;
  min-width: 210px;
  max-width: 300px;
  padding: 15px 18px 14px;
  overflow: hidden;
  pointer-events: none;
  background: var(--white);
  box-shadow: 0 14px 34px -18px rgba(13, 13, 12, .45);
  color: var(--ink);
  /* Apparition : l'étiquette se dévoile de gauche à droite, puis son texte glisse en place.
     Les marges négatives du découpage laissent passer l'ombre. */
  opacity: 0;
  -webkit-clip-path: inset(-40px calc(100% + 40px) -40px -40px);
  clip-path: inset(-40px calc(100% + 40px) -40px -40px);
  transition: opacity .2s ease, -webkit-clip-path 0s linear .2s, clip-path 0s linear .2s;
}
.tile-tip.is-on {
  opacity: 1;
  -webkit-clip-path: inset(-40px);
  clip-path: inset(-40px);
  transition: opacity .1s ease, -webkit-clip-path .28s cubic-bezier(.4, 0, .2, 1), clip-path .28s cubic-bezier(.4, 0, .2, 1);
}
.tile-tip > span {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.tile-tip.is-on > span {
  opacity: 1;
  transform: none;
  transition: opacity .25s ease, transform .35s var(--ease-out);
}
.tile-tip.is-on > span:nth-child(1) { transition-delay: .04s; }
.tile-tip.is-on > span:nth-child(2) { transition-delay: .07s; }
.tile-tip.is-on > span:nth-child(3) { transition-delay: .1s; }
/* Sur les photos (ordinateur), le pointeur est masqué : l'étiquette le remplace */
.has-tile-tip .tile,
.has-tile-tip .tile * { cursor: none; }
.tile-tip__title { font-family: var(--f-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.2; }
.tile-tip__cat { font-size: .875rem; line-height: 1.4; color: var(--muted); }
.tile-tip__cta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(13, 13, 12, .14);
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--ink-2);
}

.tiles__foot { display: flex; justify-content: center; margin-top: clamp(40px, 4.5vw, 72px); }

/* Tablette et téléphone : les projets en bande qu'on fait glisser de gauche à droite (défilement natif, aimanté) */
@media (max-width: 1023px) {
  .featured .tiles {
    display: flex;
    gap: calc(var(--gutter) / 2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(var(--gutter) / 2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) / -2);
    padding-inline: calc(var(--gutter) / 2);
  }
  .featured .tiles::-webkit-scrollbar { display: none; }
  .featured .tile, .featured .tiles--odd .tile:last-child { flex: 0 0 62%; scroll-snap-align: start; grid-column: auto; }
  .featured .tile__media, .featured .tiles--odd .tile:last-child .tile__media { aspect-ratio: 4 / 5; }
}
@media (max-width: 699px) {
  .featured .tile, .featured .tiles--odd .tile:last-child { flex-basis: 84%; }
}

@media (max-width: 699px) {
  .tiles { grid-template-columns: 1fr; }
  .tiles--odd .tile:last-child { grid-column: auto; }
  .tile__media, .tiles--odd .tile:last-child .tile__media { aspect-ratio: 4 / 5; }
  .tiles__foot .btn--lg { width: 100%; }
  /* « Découvrir l'agence » : même bouton pleine largeur que « Voir tous les projets » */
  .intro__text .btn { width: 100%; padding: 24px 56px; font-size: 1.0625rem; }
}



/* ==========================================================================
   Accueil : clients et partenaires « Ils nous font confiance » (inc/partners.php)
   Le titre centré, puis les logos en noir et blanc dans des tuiles blanches qui remplissent toute la largeur
   entre les marges de la page. Chaque tuile s'élargit selon son poids --g (forme du logo, calculé en PHP) :
   toutes les lignes sont pleines. Retours à la ligne (.partners__br) calculés pour des lignes de même largeur :
   is-br1 grand écran (2 lignes), is-br2 tablette (3 lignes), is-br3 téléphone (6 lignes).
   ========================================================================== */
.partners {
  --tile-gap: max(8px, calc(var(--gutter) / 2));
  --tile-h: clamp(62px, 6.4vw, 104px);
  /* collée à la section des projets : l'écart avec « Voir tous les projets » est celui du bas de cette section */
  padding: 0 var(--gutter) clamp(48px, 6vw, 112px);
}
.partners__title {
  margin: 0 auto clamp(32px, 3.6vw, 56px);
  font-family: var(--f-display);
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  font-size: clamp(1.875rem, 3vw, 3.125rem);
  letter-spacing: 0;
  line-height: 1;
  text-wrap: balance;
}
.partners__grid {
  display: flex;
  flex-wrap: wrap;
  /* écart entre lignes = écart entre logos : il est porté par le retour à la ligne (pas d'écart de ligne) */
  gap: 0 var(--tile-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.partners__item { flex: var(--g, 3) 1 0; min-width: 0; }
.partners__br { display: none; flex-basis: 100%; height: var(--tile-gap); }
.partners__br.is-br1 { display: block; }
.partners__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tile-h);
  padding: 0 6%;
  border-radius: 10px;
  background: #fff;
  transition: box-shadow .25s ease;
}
a.partners__tile:hover, a.partners__tile:focus-visible { box-shadow: 0 0 0 1px var(--line); }
a.partners__tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.partners__tile img {
  display: block;
  width: auto;
  height: calc(var(--tile-h) * .64 * var(--k, 1));
  max-width: 100%;
  object-fit: contain;
  /* logos en noir et blanc sur la tuile blanche (zones blanches des logos gardées blanches) */
  filter: grayscale(1);   /* fichiers déjà en noir et blanc (l'Entre-Deux en nuances de gris) ; logos envoyés depuis l'admin : passés en gris */
}
@media (max-width: 1099px) {
  .partners__br.is-br1 { display: none; }
  .partners__br.is-br2 { display: block; }
}
@media (max-width: 599px) {
  .partners { --tile-h: 64px; }
  .partners__br.is-br2 { display: none; }
  .partners__br.is-br3 { display: block; }
}

/* Réseaux sociaux : le compte (@...) après le nom, plus discret (inc/layout.php, dda_social_label) */
.social-handle { text-transform: none; letter-spacing: 0; opacity: .62; overflow-wrap: anywhere; }

/* ==========================================================================
   Le Mag : liste des articles (mag.php), page d'un article (article.php), « à la une » du pied de page
   ========================================================================== */
.mag-page { padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(48px, 6vw, 96px); }
.mag-head { max-width: 760px; margin: 0 auto clamp(28px, 3.5vw, 48px); text-align: center; }
.mag-head__title { font-family: var(--f-display); font-weight: 700; color: var(--ink); font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1; margin: 0; }
.mag-head__lead { margin: clamp(12px, 1.4vw, 18px) auto 0; max-width: 60ch; color: var(--ink-2); line-height: 1.6; }
.mag-themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(18px, 2vw, 28px); }
.mag-themes a { font-family: var(--f-display); font-weight: 500; font-size: .9375rem; color: var(--ink-2); text-decoration: none; padding: 6px 14px; border: 1px solid var(--line); background: var(--white); }
.mag-themes a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
@media (hover: hover) { .mag-themes a:not([aria-current]):hover { border-color: var(--ink); } }
.mag-empty { text-align: center; color: var(--muted); }

/* tuiles horizontales : dessin à gauche, jamais plus haut que le texte (il prend la hauteur de la tuile) */
.mag-list { display: grid; gap: clamp(10px, 1.2vw, 16px); max-width: 980px; margin: 0 auto; }
.mag-tile__link { display: grid; grid-template-columns: clamp(110px, 22%, 200px) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(14px, 1.6vw, 20px); background: var(--white); color: inherit; text-decoration: none; }
.mag-tile__media { position: relative; display: block; min-height: 90px; background: var(--stone-2); overflow: hidden; }
.mag-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mag-tile__media.is-illus { background: var(--bg); }
.mag-tile__media.is-illus img { object-fit: contain; padding: 4%; }
.mag-tile__text { display: grid; gap: 6px; align-content: center; min-width: 0; }
.mag-tile__meta, .mag-tile__date { font-family: var(--f-display); font-size: .8125rem; color: var(--muted); }
.mag-tile__title { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.2; margin: 0; text-wrap: balance; }
.mag-tile__excerpt { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
@media (hover: hover) { .mag-tile__link:hover .mag-tile__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } }
@media (max-width: 599px) { .mag-tile__excerpt { display: none; } }

/* article : une seule colonne de lecture, image à la largeur du texte (ou moins pour un dessin) */
.mag-article-page { padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(48px, 6vw, 96px); }
.mag-draft { max-width: 700px; margin: 0 auto 24px; padding: 12px 16px; background: #fff4d6; border: 1px solid #e6c766; color: var(--ink); font-size: .9375rem; line-height: 1.5; }
.mag-article { max-width: 700px; margin: 0 auto; }
.mag-article__title { font-family: var(--f-display); font-weight: 700; color: var(--ink); font-size: clamp(1.875rem, 3.6vw, 3rem); line-height: 1.05; margin: 0; text-wrap: balance; }
.mag-article__lead { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; color: var(--ink); margin: clamp(14px, 1.6vw, 20px) 0 0; }
.mag-article__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 16px 0 0; font-family: var(--f-display); font-size: .875rem; color: var(--muted); }
.mag-article__meta > * + *::before { content: "·"; margin: 0 .6em; }
.mag-article__cover { margin: clamp(24px, 3vw, 40px) 0; }
.mag-article__cover img { display: block; width: 100%; height: auto; }
.mag-article__cover.is-illus img { width: min(100%, 420px); margin: 0 auto; }
/* sommaire : encadré blanc, bien séparé de l'introduction */
.mag-toc { background: var(--white); padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px); margin: 0 0 clamp(32px, 4vw, 48px); }
.mag-toc__title { font-family: var(--f-display); font-weight: 600; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.mag-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-family: var(--f-display); font-size: 1rem; counter-reset: toc; }
.mag-toc li { counter-increment: toc; display: grid; grid-template-columns: 2em 1fr; }
.mag-toc li::before { content: counter(toc, decimal-leading-zero); color: var(--muted); font-size: .875em; padding-top: .1em; }
.mag-toc a { color: var(--ink); text-decoration: none; }
.mag-toc a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.mag-article__body { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.7; color: var(--ink-2); }
.mag-article__body > * { margin: 0 0 1.1em; }
.mag-article__body h2 { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: clamp(1.4rem, 2vw, 1.875rem); line-height: 1.15; margin: 1.8em 0 .6em; scroll-margin-top: calc(var(--header-h) + 16px); }
.mag-article__body h3 { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: clamp(1.1875rem, 1.5vw, 1.375rem); line-height: 1.2; margin: 1.5em 0 .5em; }
.mag-article__body ul, .mag-article__body ol { padding-left: 1.3em; }
.mag-article__body li { margin-bottom: .45em; }
.mag-article__body strong { color: var(--ink); font-weight: 500; }
.mag-article__body a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.mag-article__body blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--ink); font-family: var(--f-display); font-size: 1.25em; line-height: 1.4; color: var(--ink); }
.mag-article__body blockquote p { margin: 0; }
.mag-fig { margin: 1.6em 0; }
.mag-fig img { display: block; width: 100%; height: auto; }
.mag-fig--illus img { width: min(100%, 360px); margin: 0 auto; }
.mag-fig figcaption { margin-top: 8px; font-size: .875rem; line-height: 1.45; color: var(--muted); text-align: center; }
.mag-more { max-width: 980px; margin: clamp(48px, 6vw, 88px) auto 0; }
.mag-more__title { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: clamp(1.375rem, 2vw, 1.875rem); margin: 0 0 clamp(14px, 1.6vw, 20px); }

/* pied de page : articles « à la une », à gauche des menus */
.ft__mag { margin-right: auto; display: grid; align-content: start; gap: 12px; width: min(100%, 460px); }
.ft__mag .ft__label { margin-bottom: 0; }
.ft-tile { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; text-decoration: none; }
.ft-tile__media { display: block; aspect-ratio: 6 / 5; background: var(--bg); overflow: hidden; }
.ft-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ft-tile__media.is-illus img { object-fit: contain; padding: 6%; }
.ft-tile__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1rem, 1.2vw, 1.1875rem); line-height: 1.25; }
.ft a.ft-tile:hover { text-decoration: none; }
.ft a.ft-tile:hover .ft-tile__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width: 899px) { .ft__mag { width: 100%; margin-right: 0; } }