/* =============================================================================
   ALBATROS ARCHITECTES, V2
   Système de design. Papier chaud, terracotta, sérif éditorial.
   Les couleurs sont tirées des documents de l'agence ; le terracotta est
   exactement celui du logo.
   ============================================================================= */

/* ----------------------------------------------------------- 0. Caractères */
/* Switzer, Indian Type Foundry, licence gratuite pour usage commercial.
   Servi depuis le site plutôt que depuis le CDN Fontshare : une dépendance
   externe de moins, et la police s'affiche partout, y compris dans les
   environnements qui filtrent les domaines tiers. */
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- 1. Jetons */
:root {
  /* Papier */
  --paper:      #F3EBDD;   /* fond général, crème chaud */
  --paper-haut: #F9F4EA;   /* surfaces claires, cartes */
  --paper-bas:  #EADFCC;   /* bandes alternées */
  --paper-bord: #E3D6BF;

  /* Encre */
  --ink:    #2A1B0E;
  --ink-2:  #5A4632;
  --ink-3:  #745B40;   /* contraste >= 4.5:1 sur les trois fonds papier */

  /* Accent, couleur du logo */
  --terre:       #9C4A16;
  --terre-fonce: #7A3910;
  --terre-clair: #C0703C;
  --terre-voile: rgba(156, 74, 22, .10);

  /* Nuit, pour les sections contrastées */
  --nuit:    #241608;
  --nuit-2:  #33210F;
  --nuit-ink:#EFE3D0;

  --trait:      rgba(42, 27, 14, .14);
  --trait-fort: rgba(42, 27, 14, .26);

  /* Typographie */
  --sans: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Mesures */
  --wrap: 1280px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --sec-y: clamp(3.25rem, 6vw, 5.75rem);
  --r: 2px;

  --nav-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 860px) { :root { --nav-h: 64px; } }

/* ------------------------------------------------------------- 2. Réglages */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: .002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grain de papier. Très léger : il doit se deviner, pas se voir. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }

a { color: inherit; }

::selection { background: var(--terre); color: #fff; }

:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 3px;
  border-radius: var(--r);
}

.u-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: var(--r);
  font-size: .85rem; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ----------------------------------------------------- 3. Blocs de section */
.section { padding-block: var(--sec-y); }

.section--agence   { background: var(--paper-bas); }
.section--pourquoi { background: var(--paper-haut); }
.section--methode  { background: var(--paper-bas); }
.section--documents{ background: var(--nuit); color: var(--nuit-ink); }
.section--contact  { background: var(--paper-haut); }

.label {
  margin: 0 0 1.25rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terre);
  display: flex;
  align-items: center;
  gap: .85rem;
}
.label::after {
  content: "";
  flex: 0 0 46px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.label--clair { color: var(--terre-clair); }

.shead { max-width: 58ch; margin-bottom: clamp(1.75rem, 3.4vw, 3rem); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .label { justify-content: center; }
.shead--center .label::before {
  content: ""; flex: 0 0 46px; height: 1px; background: currentColor; opacity: .55;
}

.shead__title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  font-weight: 500;
}
.shead__lead {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--ink-2);
  max-width: 62ch;
}
.shead--center .shead__lead { margin-inline: auto; }

/* Cormorant sort par défaut des chiffres elzéviriens : « 01 » se lit alors « oi ».
   Partout où un nombre sert de repère, on demande les chiffres alignés, comme
   dans les documents de l'agence. */
.projet__index, .pilier__n, .tl__n, .phase__n, .agence__nom,
.explorateur__rail button span:first-child {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin-inline: .6em;
  opacity: .6;
}

.mention {
  margin-top: 2rem;
  font-size: .82rem;
  color: var(--ink-3);
  max-width: 60ch;
}

.citation {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.3;
  color: var(--terre);
}
.citation::before { content: "« "; }
.citation::after  { content: " »"; }

.lien {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--terre);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.lien::after { content: "\2192"; transition: transform .25s var(--ease); }
.lien:hover { color: var(--terre-fonce); gap: .8rem; }

/* ------------------------------------------------------------ 4. Boutons */
.btn {
  --bg: transparent;
  --fg: var(--ink);
  --bd: var(--trait-fort);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--solid { --bg: var(--terre); --fg: #fff; --bd: var(--terre); }
.btn--solid:hover { --bg: var(--terre-fonce); --bd: var(--terre-fonce); }
.btn--ghost:hover { --bd: var(--ink); background: rgba(42,27,14,.04); }
.btn--small { padding: .72rem 1.15rem; font-size: .82rem; }
.btn--bloc { width: 100%; }
.btn:active { transform: translateY(1px); }
.btn__note {
  font-size: .72rem;
  font-weight: 400;
  opacity: .72;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------- 5. Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(243, 235, 221, .88);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--trait); }

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { height: 42px; width: auto; }

.nav__menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.nav__menu a {
  font-size: .86rem;
  text-decoration: none;
  color: var(--ink-2);
  padding: .4rem 0;
  position: relative;
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--terre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__menu a:hover { color: var(--ink); }
.nav__menu a:hover::after,
.nav__menu a.is-active::after { transform: scaleX(1); }
.nav__menu a.is-active { color: var(--terre); }

.nav__cta {
  background: var(--terre);
  color: #fff !important;
  padding: .62rem 1.1rem !important;
  border-radius: var(--r);
  transition: background .25s var(--ease) !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--terre-fonce); }

.nav__burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  cursor: pointer;
}
.nav__burger-box { display: block; width: 18px; }
.nav__burger-box span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger-box span + span { margin-top: 5px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav__menu { gap: 1.1rem; }
  .nav__menu a { font-size: .8rem; }
}
@media (max-width: 960px) {
  .nav__burger { display: flex; }
  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--trait);
    padding: .5rem var(--gut) 1.5rem;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__menu a {
    font-size: 1.05rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--trait);
  }
  .nav__menu a::after { display: none; }
  .nav__cta {
    margin-top: 1.25rem;
    text-align: center;
    padding: .95rem 1.1rem !important;
    border-bottom: 0 !important;
  }
}

/* --------------------------------------------------------------- 6. Hero */
/* Le dessin d'architecture est posé en fond, le texte vient dessus. Le papier du
   dessin et le fond du site sont de la même famille de crème : la jointure avec
   la section suivante ne se voit pas, aucun cadre n'est nécessaire.
   Cadrage : le ciel dégagé occupe le haut, les montagnes la gauche, le bâtiment
   la droite. Le calage vertical privilégie le ciel, derrière le texte, sans
   perdre ni les montagnes ni le bâtiment. */
.hero {
  min-height: calc(92vh - var(--nav-h));
  display: grid;
  align-content: start;
  padding-block: clamp(2.25rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem);
  background-color: var(--paper);
  /* Deux couches : un voile en dégradé qui part du coin haut-gauche et se dissout
     avant le milieu, puis le dessin. Ce n'est pas un bandeau derrière le texte,
     mais une brume : les montagnes restent lisibles au travers, et la moitié
     droite, où se trouve le bâtiment, n'est pas touchée du tout. */
  background-image:
    linear-gradient(96deg,
      rgba(246, 239, 228, .88) 0%,
      rgba(246, 239, 228, .74) 24%,
      rgba(246, 239, 228, .40) 42%,
      rgba(246, 239, 228, 0) 62%),
    url("assets/hero/photo-hero-albatros.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  background-position: 0 0, 50% 16%;
}

/* Bloc de contenu tenu à gauche, dans la zone claire, pour que le bâtiment
   dessiné à droite garde de l'air. */
.hero__grid > * { max-width: 700px; }

/* À partir de la tablette, un second dessin, recadré pour le hero : moins de
   ciel, montagnes et lac plus présents, végétation au premier plan. Son format
   16:9 est proche de celui du hero, le recadrage reste donc faible. Le calage
   vertical prend surtout sur le ciel et épargne le premier plan.
   Le mobile garde son propre dessin, déclaré plus bas. */
@media (min-width: 768px) {
  .hero {
    background-image:
      /* Voile un cran plus dense que sur le premier dessin : celui-ci comporte
         beaucoup moins de ciel, le texte passe donc sur les montagnes. */
      linear-gradient(96deg,
        rgba(246, 239, 228, .90) 0%,
        rgba(246, 239, 228, .80) 26%,
        rgba(246, 239, 228, .48) 44%,
        rgba(246, 239, 228, 0) 64%),
      url("assets/hero/photo-hero-albatros-desktop.jpg");
    background-position: 0 0, 50% 58%;
  }
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--terre);
  font-weight: 500;
}

.hero__title {
  margin-top: 1.5rem;
  font-family: var(--serif);
  /* Calibré pour que « Concevoir aujourd’hui, » tienne sur une ligne dans les
     700 px du bloc, sans jamais toucher le bâtiment dessiné à droite. */
  font-size: clamp(2.6rem, 5.4vw, 4.75rem);
  line-height: .98;
  letter-spacing: -.022em;
  font-weight: 500;
}
.hero__title em { font-style: italic; color: var(--terre); }

.hero__lead {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: var(--ink-2);
}

.hero__cta {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}
/* Le bouton secondaire est posé sur un dessin : une simple bordure s'y perd.
   Un fond translucide le détache sans l'alourdir. Uniquement dans le hero. */
.hero .btn--ghost {
  background: rgba(249, 244, 234, .74);
  border-color: rgba(42, 27, 14, .3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hero .btn--ghost:hover {
  background: rgba(249, 244, 234, .94);
  border-color: var(--ink);
}

.hero__tag {
  margin-top: 2.25rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* Posée sur le dessin, cette ligne se perdait : un brun très foncé, plus
     profond encore que l'encre du titre, et la graisse 500 plutôt que 400.
     C'est la graisse qui fait le plus de travail, des capitales fines et très
     espacées paraissant toujours plus claires qu'elles ne le sont.
     Pas de 600 : seules les graisses 400 et 500 de Switzer sont embarquées,
     et le navigateur fabriquerait un faux gras. */
  font-weight: 500;
  color: #1A1008;
}

@media (max-width: 767px) {
  /* Même principe que sur grand écran : le dessin est l'arrière-plan du hero et
     le couvre entièrement, le contenu se pose dessus. Seuls le cadrage et le
     voile changent. En portrait, « cover » cale le dessin sur sa hauteur : on
     en voit donc toute la hauteur et une tranche verticale choisie par
     background-position. Le voile s'estompe vers le bas pour que le dessin
     reprenne la main sous la dernière ligne. */
  .hero {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    padding-block: clamp(1.5rem, 5vw, 2.5rem) clamp(2rem, 7vw, 3rem);
    background-image:
      linear-gradient(to bottom,
        rgba(246, 239, 228, .86) 0%,
        rgba(246, 239, 228, .80) 50%,
        rgba(246, 239, 228, .58) 72%,
        rgba(246, 239, 228, .18) 88%,
        rgba(246, 239, 228, 0) 100%),
      url("assets/hero/photo-hero-albatros.jpg");
    background-size: auto, cover;
    background-position: 0 0, 58% center;
  }

  /* Titre un peu plus compact : il descendait trop avant le paragraphe. */
  .hero__title { font-size: clamp(2.2rem, 9.4vw, 2.9rem); }

  /* Les deux boutons empilés, de largeur identique, sans occuper toute la
     largeur de l'écran. */
  .hero__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
  }
  .hero__cta .btn { min-width: min(15.5rem, 100%); }
}


/* ----------------------------------------------------------- 7. Manifeste */
.manifeste { padding-block: clamp(3rem, 5.6vw, 5.5rem); }
.manifeste__line {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  max-width: 22ch;
}
.manifeste__line em { font-style: italic; color: var(--terre); }
.manifeste .mot {
  display: inline-block;
  opacity: .16;
  transition: opacity .45s var(--ease);
}
.manifeste .mot.is-on { opacity: 1; }
.no-js .manifeste .mot, .manifeste.is-plain .mot { opacity: 1; }

/* ------------------------------------------------------------- 8. Projets */
.projets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.projet--large { grid-column: span 2; }

.projet__btn {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.projet__media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-bas);
}
/* Voile terracotta : il unifie des photographies froides avec la palette
   papier de la page. Il se lève au survol. */
.projet__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(156, 74, 22, .22), rgba(42, 27, 14, .12));
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
.projet__btn:focus-visible .projet__media::after { opacity: .12; }
.projet__media img {
  width: 100%;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  /* Les photographies de projet sont réchauffées pour tenir avec la palette
     papier du reste de la page ; le survol les rend à leurs couleurs. */
  filter: sepia(.32) saturate(.88) contrast(1.04);
  transition: transform .8s var(--ease), filter .6s var(--ease);
}
.projet__media--haut img { aspect-ratio: 4 / 5; }
.projet__btn:focus-visible .projet__media img {
  transform: scale(1.035);
  filter: sepia(.04) saturate(1) contrast(1.02);
}

.projet__info {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.1rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--trait);
}
.projet__index {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--terre);
}
.projet__body { display: block; }
.projet__nom {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.2;
}
.projet__meta {
  display: block;
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--ink-3);
}
.projet__go {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terre);
  white-space: nowrap;
  transition: opacity .25s var(--ease);
  opacity: .65;
}
.projet__go::after { content: " \2197"; }
/* Survol réservé aux écrans à souris : sur iPhone, un :hover qui modifie le
   rendu peut avaler le premier toucher, et « Voir » semblait ne rien faire. */
@media (hover: hover) {
  .projet__btn:hover .projet__media::after { opacity: .12; }
  .projet__btn:hover .projet__media img {
    transform: scale(1.035);
    filter: sepia(.04) saturate(1) contrast(1.02);
  }
  .projet__btn:hover .projet__go { opacity: 1; }
}
@media (hover: none) {
  .projet__go { opacity: 1; }
}
.projet__btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

@media (max-width: 760px) {
  .projets { grid-template-columns: 1fr; }
  .projet--large { grid-column: auto; }
  .projet__media--haut img { aspect-ratio: 7 / 5; }
}

/* -------------------------------------------------------------- 9. Agence */
.agence {
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.agence__portrait { position: relative; }
/* Le fichier est déjà au format 4:5 voulu : on l'affiche à son rapport naturel,
   sans recadrage. La composition, portrait devant le croquis et la montagne,
   arrive donc entière. */
.agence__portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
}
.agence__portrait figcaption {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait-fort);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.agence__nom {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
}
.agence__role {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terre);
}

.agence__texte { display: flex; flex-direction: column; gap: 1.15rem; }
.agence__texte p { color: var(--ink-2); max-width: 62ch; }
.agence__lead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.32;
  color: var(--ink) !important;
}
.agence__mot {
  margin-top: 1rem;
  padding: 1.6rem 1.8rem;
  background: var(--paper-haut);
  border-left: 2px solid var(--terre);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.agence__mot cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.piliers {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  overflow: hidden;
}
.pilier { background: var(--paper-bas); padding: clamp(1.5rem, 3vw, 2.4rem); }
.pilier__n {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--terre);
  opacity: .85;
}
.pilier__titre {
  margin-top: .9rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pilier__texte { margin-top: .7rem; font-size: .95rem; color: var(--ink-2); }

.domaines {
  margin-top: clamp(2rem, 3.6vw, 3rem);
  padding-top: clamp(1.5rem, 2.8vw, 2.25rem);
  border-top: 1px solid var(--trait-fort);
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.domaines__titre {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terre);
}
.domaines__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem 2rem;
}
.domaines__liste li {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--trait);
}

@media (max-width: 900px) {
  .agence { grid-template-columns: 1fr; }
  .agence__portrait { max-width: 420px; }
  .piliers { grid-template-columns: 1fr; }
  .domaines { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- 10. Pourquoi / atouts */

.atouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  overflow: hidden;
}
.atout {
  background: var(--paper-haut);
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  transition: background .3s var(--ease);
}
.atout:hover { background: #FDFAF4; }
/* Les quatre icônes sont normalisées sur une même boîte de repère de 464 x 320 :
   à hauteur fixe, elles partagent donc exactement la même ligne de base et la
   même emprise, quelles que soient leurs proportions internes. */
.atout__icone {
  height: 72px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;          /* la boîte est centrée dans la colonne */
  object-fit: contain;
  object-position: center bottom;
}
.atout__titre {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
}
.atout__texte { margin-top: .8rem; font-size: .93rem; color: var(--ink-2); }

@media (max-width: 1000px) {
  .atouts { grid-template-columns: repeat(2, 1fr); }
  .atout__icone { height: 66px; }
}
@media (max-width: 560px) {
  .atouts { grid-template-columns: 1fr; }
  .atout__icone { height: 62px; }
}

.interieur {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr minmax(240px, 460px);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--paper-bas);
  border-radius: var(--r);
  overflow: hidden;
}
.interieur__texte { padding: clamp(2rem, 4vw, 3.5rem); }
.interieur__texte p { margin-top: 1rem; color: var(--ink-2); max-width: 48ch; }
.interieur__texte .lien { margin-top: 1.75rem; }
.interieur__titre {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  line-height: 1.15;
}
/* La vignette cuisine ne mesure que 304 px de large dans la planche du client :
   on la présente petite, à son rapport naturel, plutôt que de l'étirer. */
.interieur__media {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  padding-left: 0;
}
.interieur__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
}
@media (max-width: 860px) {
  .interieur { grid-template-columns: 1fr; }
  .interieur__media {
    order: -1;
    padding: clamp(1.25rem, 4vw, 2rem);
    padding-bottom: 0;
  }
  .interieur__media img { max-width: 460px; margin-inline: auto; }
}

/* ------------------------------------------------------------ 11. Méthode */
.timeline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(2rem, 5vw, 4rem);
  counter-reset: tl;
}
.tl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--trait);
  position: relative;
}
.tl__n {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--terre);
  min-width: 2ch;
  padding-top: .1rem;
}
.tl__titre {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}
.tl__titre i {
  font-style: normal;
  color: var(--ink-3);
  font-weight: 400;
}
.tl__texte {
  display: block;
  margin-top: .3rem;
  font-size: .88rem;
  color: var(--ink-2);
}
.tl[data-detail] { cursor: pointer; }
.tl[data-detail]:hover .tl__titre { color: var(--terre); }
.tl[data-detail]::after {
  content: "\2197";
  position: absolute;
  right: .25rem; top: 1.45rem;
  font-size: .8rem;
  color: var(--terre);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.tl[data-detail]:hover::after { opacity: .8; }

.methode__suite { margin-top: 2rem; }

@media (max-width: 820px) { .timeline { grid-template-columns: 1fr; } }

/* Ces deux visuels proviennent d'une zone de 600 à 660 px des planches du client.
   Ils sont donc présentés en planche centrée, à leur rapport naturel et sans
   dépasser leur résolution : ni recadrage à l'affichage, ni agrandissement. */
.bande {
  margin-top: clamp(2.5rem, 4.6vw, 4rem);
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.bande img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
}
.bande--fin {
  margin-top: 0;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.bande figcaption {
  padding-top: 1rem;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------------- 12. Phases */
.explorateur { display: grid; gap: 1rem; }

/* Version accordéon, socle commun. */
.phase {
  border: 1px solid var(--trait);
  border-radius: var(--r);
  background: var(--paper-haut);
  overflow: hidden;
}
.phase__tete { margin: 0; }
.phase__toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.15rem;
  width: 100%;
  padding: 1.35rem clamp(1.15rem, 3vw, 2rem);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.phase__n {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--terre);
}
.phase__nom {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.25;
}
.phase__chev {
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--terre);
  border-bottom: 1.5px solid var(--terre);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
  margin-right: 4px;
}
.phase__toggle[aria-expanded="true"] .phase__chev { transform: rotate(-135deg); }
.phase__toggle:hover .phase__nom { color: var(--terre); }

.phase__panneau {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding: 0 clamp(1.15rem, 3vw, 2rem) clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
}
.js .phase__panneau[hidden] { display: none; }

.phase__objectif {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.35;
  color: var(--ink);
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--trait);
}
.phase__texte p { color: var(--ink-2); }
.phase__texte p + p { margin-top: .9rem; }
.phase__soustitre {
  margin-top: 1.9rem;
  margin-bottom: 1rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terre);
}
.phase__note {
  margin-top: 1.1rem;
  font-size: .84rem;
  color: var(--ink-3);
  font-style: italic;
}

.livrables { display: grid; gap: .95rem; }
.livrables li {
  display: grid;
  gap: .2rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--trait);
}
.livrable__nom { font-size: .92rem; font-weight: 500; }
.livrable__txt { font-size: .88rem; color: var(--ink-2); }

.pieces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .55rem 1.5rem;
}
.pieces li {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  font-size: .89rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--trait);
}
.pieces b {
  font-weight: 500;
  color: var(--terre);
  font-size: .76rem;
  letter-spacing: .06em;
  min-width: 2.2em;
}
.pieces--code b { min-width: 3.6em; }

.encart {
  margin-top: 1.75rem;
  padding: 1.35rem 1.5rem;
  background: var(--terre-voile);
  border-radius: var(--r);
}
.encart__titre {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: .8rem !important;
}
.encart p { font-size: .88rem; }
.encart p + p { margin-top: .6rem; }
.encart b { font-weight: 500; color: var(--ink); }
.encart__note { font-size: .8rem !important; color: var(--ink-3) !important; font-style: italic; }

.etapes {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.etapes li {
  display: flex;
  align-items: center;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: .45rem .85rem;
  border: 1px solid var(--trait-fort);
  border-radius: 100px;
  color: var(--ink-2);
}
.etapes li:not(:last-child)::after {
  content: "\2192";
  margin-left: .85rem;
  margin-right: -.35rem;
  color: var(--terre);
}

.phase__aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.phase__visuel { margin: 0; }
.phase__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
}
.phase__zoom img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
@media (hover: hover) { .phase__zoom:hover img { transform: scale(1.03); } }
.phase__zoom-txt {
  position: absolute;
  left: .75rem; bottom: .75rem;
  background: rgba(36, 22, 8, .82);
  color: var(--paper);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem .85rem;
  border-radius: var(--r);
  backdrop-filter: blur(4px);
}
.phase__actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.phase__actions .btn { flex-direction: column; align-items: flex-start; gap: .15rem; }

/* Version onglets, à partir de 1024 px. */
@media (min-width: 1024px) {
  .explorateur {
    grid-template-columns: minmax(230px, 280px) 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .explorateur__rail {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
    display: grid;
    gap: 0;
    border-top: 1px solid var(--trait);
  }
  .explorateur__rail button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9rem;
    align-items: baseline;
    width: 100%;
    text-align: left;
    padding: .95rem .5rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--trait);
    cursor: pointer;
    color: var(--ink-2);
    font-size: .92rem;
    transition: color .25s var(--ease), padding-left .25s var(--ease);
  }
  .explorateur__rail button span:first-child {
    font-family: var(--serif);
    font-size: .95rem;
    color: var(--ink-3);
    transition: color .25s var(--ease);
  }
  .explorateur__rail button:hover { color: var(--ink); padding-left: .85rem; }
  .explorateur__rail button.is-on { color: var(--terre); padding-left: .85rem; }
  .explorateur__rail button.is-on span:first-child { color: var(--terre); }

  .explorateur .phase {
    border: 0;
    background: none;
    border-radius: 0;
  }
  .explorateur .phase[hidden] { display: none; }
  .phase__tete { display: none; }
  .phase__panneau { padding: 0; }
}

/* Version mobile, sous 700 px. Les deux colonnes du panneau ramenaient le texte
   à moins de la moitié de l'écran et laissaient un vide à droite. Tout s'empile
   ici dans l'ordre du document : texte, puis aperçu, puis téléchargement.
   La tablette garde ses deux colonnes. */
@media (max-width: 700px) {
  /* Les cartes filent d'un bord à l'autre de l'écran et reprennent à leur
     compte la gouttière du site. Le texte commence donc exactement là où
     commence celui de toutes les autres sections, et non 20 px plus loin. */
  .explorateur {
    margin-inline: calc(var(--gut) * -1);
    gap: .5rem;
  }
  .phase {
    border-inline: 0;
    border-radius: 0;
  }
  .phase__toggle { padding-inline: var(--gut); }
  .phase__panneau {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding-inline: var(--gut);
  }
  .phase__aside { position: static; }
  .phase__visuel { max-width: 420px; }
  .phase__soustitre { margin-top: 1.6rem; }
  /* Les pièces réglementaires tiennent sur une seule colonne : à cette largeur,
     deux colonnes coupaient les libellés. */
  .pieces { grid-template-columns: 1fr; gap: .5rem; }
}

/* ----------------------------------------------------------- 13. Documents */
.section--documents .shead__title { color: var(--nuit-ink); }
.section--documents .shead__lead  { color: rgba(239, 227, 208, .74); }

.tele {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.tele__une {
  display: grid;
  gap: .5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--terre);
  color: #fff;
  border-radius: var(--r);
  text-decoration: none;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.tele__une:hover { background: var(--terre-fonce); transform: translateY(-2px); }
.tele__une-k {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .85;
}
.tele__une-t {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.22;
}
.tele__une-m { font-size: .8rem; opacity: .8; margin-top: .4rem; }
.tele__une::after {
  content: "\2193\00a0\00a0Télécharger";
  margin-top: 1rem;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,.3);
  padding-top: 1rem;
}

.tele__liste { display: grid; gap: 0; border-top: 1px solid rgba(239,227,208,.2); }
.tele__liste a {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: 1.05rem .25rem;
  border-bottom: 1px solid rgba(239,227,208,.2);
  text-decoration: none;
  transition: padding-left .25s var(--ease), color .25s var(--ease);
}
.tele__liste a:hover { padding-left: .85rem; color: var(--terre-clair); }
.tele__liste span { font-size: 1rem; }
.tele__liste em {
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(239,227,208,.6);
  white-space: nowrap;
  margin-left: auto;
}
.tele__liste a::before {
  content: "\2193";
  color: var(--terre-clair);
}
@media (max-width: 820px) { .tele { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- 14. Contact */
.contact {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 520px);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.coords {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--trait);
}
.coords li {
  display: grid;
  grid-template-columns: minmax(110px, 150px) 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .95rem .25rem;
  border-bottom: 1px solid var(--trait);
}
.coords__k {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.coords__v { font-size: .98rem; text-decoration: none; }
a.coords__v { color: var(--terre); border-bottom: 1px solid transparent; transition: border-color .2s; }
a.coords__v:hover { border-bottom-color: currentColor; }

.form {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--trait);
  border-radius: var(--r);
}
.field { display: grid; gap: .45rem; }
.field--duo { grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field--duo > div { display: grid; gap: .45rem; }
.field label {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .82rem .9rem;
  background: var(--paper-haut);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  font-size: .95rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--terre);
  background: #fff;
}
.field select { appearance: none; background-image: none; cursor: pointer; }
.field__aide { font-size: .78rem; color: var(--ink-3); }
.field__err { font-size: .78rem; color: #A3301A; }
/* Seul le champ fautif est souligné en rouge, pas tout le bloc « duo ». */
.field [aria-invalid="true"] { border-color: #A3301A; }

.form__etat { font-size: .88rem; min-height: 1.2em; }
.form__etat.is-ok  { color: #2F6B3A; }
.form__etat.is-bad { color: #A3301A; }
.form__rgpd { font-size: .74rem; color: var(--ink-3); }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
  .field--duo { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .coords li { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------------------------------------------------------------- 15. Pied */
.pied {
  background: var(--nuit);
  color: var(--nuit-ink);
  padding-top: clamp(2.75rem, 5vw, 4.25rem);
}
.pied__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(2rem, 3.6vw, 3rem);
}
.pied__logo img {
  width: auto;
  height: 96px;
  filter: brightness(1.45) saturate(1.15);
}
.pied__signe {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: var(--terre-clair);
}
.pied__ident {
  margin-top: .9rem;
  font-size: .86rem;
  color: rgba(239,227,208,.7);
  line-height: 1.7;
}
.pied__nav { display: grid; gap: .55rem; }
.pied__nav a {
  font-size: .86rem;
  text-decoration: none;
  color: rgba(239,227,208,.78);
  transition: color .2s var(--ease);
}
.pied__nav a:hover { color: var(--terre-clair); }
.pied__contact { display: grid; gap: .55rem; }
.pied__contact a {
  font-size: .86rem;
  text-decoration: none;
  color: rgba(239,227,208,.78);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.pied__contact a:hover { color: var(--terre-clair); border-bottom-color: currentColor; }

/* Réseaux sociaux. Les deux marques gardent leurs couleurs officielles ; aucun
   fond, aucun cadre. La zone cliquable est élargie par un padding invisible,
   pour rester confortable au doigt sans grossir les logos. */
.reseaux {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(239, 227, 208, .16);
}
.reseaux__mot {
  font-size: .82rem;
  color: rgba(239, 227, 208, .7);
  margin-bottom: .9rem;
}
.reseaux__liens {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pied__contact .reseaux__liens a {
  display: block;
  padding: 6px;
  line-height: 0;
  border-bottom: 0;
  border-radius: 8px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.reseaux__liens a:first-child { margin-left: -6px; }
.reseaux__liens img {
  width: 32px;
  height: 32px;
  display: block;
}
.pied__contact .reseaux__liens a:hover,
.pied__contact .reseaux__liens a:focus-visible {
  transform: scale(1.06);
  opacity: .85;
}
.pied__contact .reseaux__liens a:active { transform: scale(1.01); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(239,227,208,.16);
  font-size: .78rem;
  color: rgba(239,227,208,.55);
}
.pied__bas a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pied__bas a:hover { color: var(--terre-clair); }

@media (max-width: 980px) {
  /* Deux colonnes : identité puis contact à gauche, navigation à droite sur
     toute la hauteur. Sans ce placement, la hauteur de la navigation creusait
     un vide entre l'identité et les coordonnées. */
  .pied__inner { grid-template-columns: 1fr 1fr; }
  .pied__logo { grid-column: 1 / -1; }
  .pied__logo img { height: 76px; }
  .pied__bloc    { grid-column: 1; grid-row: 2; }
  .pied__contact { grid-column: 1; grid-row: 3; }
  .pied__nav     { grid-column: 2; grid-row: 2 / 4; }
}
@media (max-width: 560px) {
  .pied__inner { grid-template-columns: 1fr; gap: 2rem; }
  /* On relâche le placement en grille posé plus haut, sinon il force une
     deuxième colonne alors que le pied doit s'empiler. */
  .pied__bloc, .pied__contact, .pied__nav { grid-column: auto; grid-row: auto; }
}

/* -------------------------------------------------------- 16. Visionneuse */
.vis {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.vis::backdrop { background: rgba(26, 15, 6, .92); backdrop-filter: blur(6px); }
.vis:not([open]) { display: none; }
.vis[open] { display: flex; }
/* Repli sans <dialog> natif, voir main.js : pas de ::backdrop, le fond sombre
   est porté par l'élément lui-même. */
.vis--repli {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(26, 15, 6, .94);
}

.vis__zone {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
  gap: 1.25rem;
}
.vis__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 100%;
  min-height: 0;
}
.vis__img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r);
  background: var(--paper);
}
.vis__legende { text-align: center; color: var(--paper); max-width: 68ch; }
.vis__titre {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}
.vis__meta {
  margin-top: .4rem;
  font-size: .84rem;
  color: rgba(243, 235, 221, .66);
}

.vis__fermer {
  position: absolute;
  top: clamp(.9rem, 2vw, 1.5rem);
  right: clamp(.9rem, 2vw, 1.5rem);
  width: 44px; height: 44px;
  background: rgba(243,235,221,.1);
  border: 1px solid rgba(243,235,221,.25);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .2s var(--ease);
}
.vis__fermer:hover { background: rgba(243,235,221,.2); }
.vis__fermer span, .vis__fermer span::before {
  position: absolute;
  left: 50%; top: 50%;
  width: 15px; height: 1.5px;
  background: var(--paper);
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}
.vis__fermer span::before { transform: translate(-50%, -50%) rotate(90deg); left: 50%; top: 50%; }

.vis__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--paper);
}
.vis__nav[hidden] { display: none; }
.vis__prec, .vis__suiv {
  width: 40px; height: 40px;
  background: rgba(243,235,221,.1);
  border: 1px solid rgba(243,235,221,.25);
  border-radius: var(--r);
  cursor: pointer;
  position: relative;
  transition: background .2s var(--ease);
}
.vis__prec:hover, .vis__suiv:hover { background: rgba(243,235,221,.2); }
.vis__prec::before, .vis__suiv::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  border-left: 1.5px solid var(--paper);
  border-bottom: 1.5px solid var(--paper);
}
.vis__prec::before { transform: translate(-40%, -50%) rotate(45deg); }
.vis__suiv::before { transform: translate(-60%, -50%) rotate(-135deg); }
.vis__compteur {
  font-size: .8rem;
  letter-spacing: .14em;
  color: rgba(243,235,221,.7);
  min-width: 5ch;
  text-align: center;
}

/* ------------------------------------------------------- 17. Apparitions */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .manifeste .mot { opacity: 1 !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------- 18. Impression */
@media print {
  .nav, .hero__cta, .form, .vis, .pied__nav { display: none; }
  body { background: #fff; color: #000; }
  .phase__panneau { display: block !important; }
}