/* Touil House — feuille de style du site.
   Les couleurs sont relevées sur les plaquettes du client (voir _source/scripts). */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --rouge: #D21921;          /* rouge du logo */
  --rouge-profond: #B91313;  /* bandeau rouge du dépliant */
  --noir: #0E0F10;
  --texte: #1B1D1F;
  --gris: #5B636B;
  --filet: #E3E3E0;
  --papier: #FFFFFB;         /* blanc de ses pages */
  --clair: #F3F2F2;          /* gris clair du dépliant */
  --ciel-haut: #505F6C;      /* ciel de la couverture, en haut */
  --ciel: #5D6D7A;
  --ciel-bas: #81909C;
  --ciel-clair: #ACB3BA;
  --ciel-depliant: #91A4BC;  /* ciel du dépliant, derrière son logo rouge et noir */
  --largeur: 1240px;
  --marge: clamp(20px, 5vw, 56px);
  --entete: 76px;
  --espace: clamp(72px, 11vw, 150px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Outfit", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--texte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }

.conteneur { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }
.section { padding-block: var(--espace); position: relative; }
.section--claire { background: var(--clair); }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cache:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip-path: none; padding: 10px 14px; background: #fff; color: var(--noir); }

/* ---------- Titres ---------- */
.titre {
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rouge);
}
.titre--petit { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; }
.surtitre {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
  font-size: 13px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gris);
}
.surtitre::before { content: ""; width: 34px; height: 2px; background: var(--rouge); }
.chapo { margin-top: 22px; max-width: 46em; font-size: clamp(17px, 1.5vw, 20px); }
.chapo strong { font-weight: 600; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 30px;
  font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 2px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.bouton--rouge { background: var(--rouge); color: #fff; }
.bouton--rouge:hover { background: var(--rouge-profond); }
.bouton--clair { background: #fff; color: var(--noir); border-color: var(--noir); }
.bouton--clair:hover { background: var(--noir); color: #fff; }
.bouton--petit { min-height: 44px; padding: 0 22px; font-size: 13px; }
.lien {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--noir);
  padding-bottom: 6px; border-bottom: 2px solid var(--rouge);
  transition: gap .25s ease, color .25s ease;
}
.lien:hover { gap: 18px; color: var(--rouge); }
.lien::after { content: "\2192"; font-weight: 400; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--entete);
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
  transition: background-color .3s ease, border-color .3s ease;
}
.entete__dedans {
  width: min(100% - 2 * var(--marge), 1400px); height: 100%; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.entete__logo { flex: none; transition: opacity .3s ease; }
.entete__logo img { height: 46px; width: auto; }
.nav { display: none; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav a:not(.bouton) {
  position: relative; padding: 10px 0;
  font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--noir);
  transition: color .25s ease;
}
.nav a:not(.bouton)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--rouge); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav a:not(.bouton):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.burger { width: 46px; height: 46px; display: grid; place-content: center; gap: 6px; color: var(--noir); }
.burger span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
.menu-ouvert .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
.menu-ouvert .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* En-tête posée sur le ciel (haut de la page d'accueil) */
.entete--transparente { background: transparent; border-color: transparent; }
.entete--transparente .entete__logo { opacity: 0; visibility: hidden; }
.menu-ouvert .entete { background: var(--papier); border-color: var(--filet); }
.menu-ouvert .entete .entete__logo { opacity: 1; visibility: visible; }
.menu-ouvert .entete .burger { color: var(--noir); }

/* Menu du téléphone */
.menu {
  position: fixed; inset: var(--entete) 0 0 0; z-index: 49;
  background: var(--papier);
  padding: 28px var(--marge) 40px;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
  visibility: hidden; opacity: 0; transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.menu-ouvert .menu { visibility: visible; opacity: 1; transform: none; }
.menu-ouvert { overflow: hidden; }
.menu a:not(.bouton) {
  padding: 16px 0; border-bottom: 1px solid var(--filet);
  font-size: 22px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--noir);
}
.menu .bouton { margin-top: 26px; }
.menu__contact { margin-top: 22px; display: grid; gap: 4px; font-size: 17px; color: var(--gris); }
.menu__contact a { padding: 6px 0; border: 0; font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texte); }

main { padding-top: var(--entete); }
.accueil main { padding-top: 0; }

@media (min-width: 1000px) {
  .nav { display: flex; }
  .burger, .menu { display: none; }
}

/* ---------- Haut de la page d'accueil : sa couverture ---------- */
.hero {
  position: relative;
  display: flex; flex-direction: column;
  color: var(--noir);
  background: linear-gradient(180deg, var(--ciel-depliant) 0%, var(--ciel-clair) 100%);
}
.hero__tete { order: -1; position: relative; z-index: 2; padding: calc(var(--entete) + 26px) var(--marge) 10px; text-align: center; }
.hero__logo { width: min(76vw, 320px); margin-inline: auto; }
.hero__slogan { margin-top: 20px; font-size: clamp(14px, 3.8vw, 20px); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.hero__photo {
  width: 100%; aspect-ratio: 31 / 20; object-fit: cover; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
}
.hero__voile { display: none; }
.hero__actions { display: grid; gap: 12px; padding: 26px var(--marge) 6px; background: var(--papier); }

/* Ordinateur : la photo garde toute sa largeur, collée au bas du bloc.
   Le logo et le slogan prennent leur place au-dessus ; le bloc des boutons réserve
   exactement la hauteur qui va du toit de la capsule au bas de la photo.
   Le toit tombe donc toujours juste sous le slogan, quelle que soit la fenêtre.
   Mesures sur la photo (2480 × 2000) : toit à 51 %, pieds à 82,5 %. */
@media (min-width: 900px) {
  .hero { display: block; background: var(--ciel-clair); overflow: hidden; }
  .hero__photo {
    position: absolute; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__voile {
    display: block; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 46%);
  }
  .hero__tete { padding: calc(var(--entete) + 10px) var(--marge) 1.2vw; }
  .hero__logo { width: clamp(240px, min(26vw, 44vh), 382px); }
  .hero__slogan { margin-top: 14px; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.2; }
  /* De 49,5 % de la photo (un peu d'air au-dessus du toit) jusqu'en bas : 2480 × 1010.
     Les boutons se posent juste sous les pieds de la capsule (27,7 % de la largeur sous le
     haut du bloc ; les pieds sont à 26,6 %), sur le reflet : ils restent visibles sans défiler. */
  .hero__actions {
    position: relative; z-index: 2; aspect-ratio: 2480 / 1010;
    display: flex; justify-content: center; align-items: flex-start; gap: 16px;
    padding: 27.7% 0 0; background: none;
  }
}

/* ---------- Accroche ---------- */
.accroche { overflow: hidden; }
.points {
  position: absolute; top: 0; left: 0; width: min(62vw, 460px); aspect-ratio: 1; pointer-events: none;
  background-image: radial-gradient(circle, var(--rouge) 0 34%, transparent 36%);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at 0 0, #000 0, transparent 68%);
  mask-image: radial-gradient(ellipse at 0 0, #000 0, transparent 68%);
  opacity: .9;
}
.points--droite { left: auto; right: 0; transform: scaleX(-1); }
.accroche__texte { position: relative; max-width: 980px; }
.accroche__titre { font-size: clamp(30px, 5.4vw, 72px); line-height: 1.04; color: var(--noir); }
.accroche__titre strong { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.accroche__titre span { display: block; font-weight: 300; }
.accroche__phrase {
  display: inline-block; margin-top: 34px; padding-bottom: 14px; max-width: 30em;
  font-size: clamp(18px, 2vw, 24px); font-weight: 400; line-height: 1.4; color: var(--rouge);
  border-bottom: 5px double var(--rouge);
}

/* ---------- La gamme (défilement) ---------- */
.gamme__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.fleches { display: none; gap: 10px; }
.fleche {
  width: 52px; height: 52px; display: grid; place-content: center;
  border: 1px solid var(--noir); border-radius: 2px; font-size: 20px; color: var(--noir);
  transition: background-color .25s ease, color .25s ease;
}
.fleche:hover { background: var(--noir); color: #fff; }
.piste {
  margin-top: clamp(30px, 4vw, 54px);
  display: flex; gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
  padding-inline: max(var(--marge), (100% - var(--largeur)) / 2);
  padding-bottom: 18px;
  scrollbar-width: thin; scrollbar-color: var(--rouge) transparent;
}
.carte { flex: 0 0 min(82vw, 470px); scroll-snap-align: start; display: block; color: var(--noir); }
.carte__image { overflow: hidden; background: var(--clair); aspect-ratio: 1820 / 985; }
.carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.carte:hover .carte__image img { transform: scale(1.045); }
.carte__texte { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; padding-top: 18px; border-top: 2px solid transparent; transition: border-color .3s ease; }
.carte__famille { grid-column: 1 / -1; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.carte__nom { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; transition: color .25s ease; }
.carte:hover .carte__nom { color: var(--rouge); }
.carte__meta { font-size: 15px; color: var(--gris); text-align: right; }
.gamme__suite { margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .fleches { display: flex; } }

/* ---------- Manifeste ---------- */
.manifeste { background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-bas) 100%); color: #fff; text-align: center; }
.manifeste__titre { font-size: clamp(30px, 6.4vw, 92px); font-weight: 800; line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; }
.manifeste__titre span { display: block; }
.trait { width: min(74%, 560px); height: 2px; margin: 0 auto clamp(30px, 4vw, 54px); background: linear-gradient(90deg, transparent, var(--rouge) 22%, var(--rouge) 78%, transparent); }
.trait--bas { margin: clamp(30px, 4vw, 54px) auto 0; }

/* ---------- Deux colonnes ---------- */
.duo { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
.duo__image img { width: 100%; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1.1fr .9fr; }
  .duo--inverse .duo__image { order: 2; }
  .duo--inverse { grid-template-columns: .9fr 1.1fr; }
}
.materiaux { margin-top: 30px; display: grid; gap: 0; border-top: 1px solid var(--filet); }
.materiaux li { position: relative; padding: 13px 0 13px 26px; border-bottom: 1px solid var(--filet); font-size: 16px; font-weight: 400; }
.materiaux li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--rouge); }
@media (min-width: 560px) { .materiaux { grid-template-columns: 1fr 1fr; column-gap: 34px; } }
.duo__suite { margin-top: 34px; }

/* ---------- Études de cas ---------- */
.cas__grille { margin-top: clamp(30px, 4vw, 54px); display: grid; gap: clamp(14px, 1.6vw, 22px); }
@media (min-width: 640px) { .cas__grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cas__grille { grid-template-columns: 1fr 1fr 1fr; } }
.cas { position: relative; overflow: hidden; background: var(--clair); }
.cas img { width: 100%; aspect-ratio: 1820 / 915; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.cas:hover img { transform: scale(1.04); }
.cas figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 18px 14px;
  font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, rgba(14, 15, 16, 0), rgba(14, 15, 16, .72));
}
.cas__suite { margin-top: clamp(28px, 4vw, 48px); }

/* ---------- Bandeau rouge ---------- */
.bandeau { background: var(--rouge-profond); color: #fff; padding-block: clamp(54px, 7vw, 96px); }
.bandeau__dedans { display: grid; gap: 30px; align-items: center; }
.bandeau__titre { font-size: clamp(30px, 4.6vw, 60px); font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
.bandeau__slogan { margin-top: 8px; font-size: clamp(14px, 1.4vw, 18px); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.bandeau__contact { display: grid; gap: 6px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; }
.bandeau__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bandeau .bouton { background: #fff; color: var(--rouge-profond); border-color: #fff; justify-self: start; }
.bandeau .bouton:hover { background: var(--noir); border-color: var(--noir); color: #fff; }
@media (min-width: 900px) { .bandeau__dedans { grid-template-columns: 1.3fr 1fr auto; } }

/* ---------- Pied de page ---------- */
.pied { background: var(--clair); color: var(--texte); padding-block: clamp(48px, 6vw, 80px) 28px; font-size: 16px; font-weight: 400; }
.pied__haut { display: grid; gap: 38px; }
.pied__logo { width: 220px; }
.pied__slogan { margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.pied h2 { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--rouge); }
.pied li { padding: 4px 0; }
.pied a:hover { color: var(--rouge); }
.pied__bas { margin-top: clamp(36px, 5vw, 60px); padding-top: 22px; border-top: 1px solid #D6D6D3; color: var(--gris); display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; font-size: 14px; }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
@media (min-width: 800px) { .pied__haut { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Apparition douce au défilement ---------- */
.js [data-apparait] { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js [data-apparait].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-apparait] { opacity: 1; transform: none; transition: none; }
  .carte__image img, .cas img { transition: none; }
}

/* ================= Pages intérieures ================= */

/* ---------- Haut de page ---------- */
.tete-page { position: relative; overflow: hidden; background: var(--clair); padding-block: clamp(44px, 6vw, 84px) clamp(40px, 5vw, 70px); }
.tete-page--fiche { background: var(--papier); padding-bottom: clamp(24px, 3vw, 40px); }
.tete-page .conteneur { position: relative; }
.titre--grand { font-size: clamp(34px, 6vw, 84px); line-height: 1.02; }
.fil { margin-bottom: clamp(22px, 3vw, 40px); font-size: 13px; font-weight: 400; letter-spacing: .08em; color: var(--gris); }
.fil a { border-bottom: 1px solid transparent; transition: border-color .25s ease, color .25s ease; }
.fil a:hover { color: var(--rouge); border-color: var(--rouge); }
.fil span[aria-hidden] { margin-inline: 6px; color: var(--rouge); }

/* ---------- La gamme : un modèle par ligne ---------- */
.famille { padding-block: clamp(54px, 7vw, 100px); }
.famille + .famille { border-top: 1px solid var(--filet); }
.famille__titre { margin-bottom: clamp(28px, 4vw, 52px); }
.rang { display: grid; gap: clamp(22px, 4vw, 64px); align-items: center; }
.rang + .rang { margin-top: clamp(48px, 7vw, 110px); }
.rang__image { display: block; overflow: hidden; background: var(--clair); }
.rang__image img { width: 100%; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.rang__image:hover img { transform: scale(1.035); }
.rang__nom { margin-top: 6px; font-size: clamp(40px, 6vw, 84px); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--noir); }
.rang__nom a { transition: color .25s ease; }
.rang__nom a:hover { color: var(--rouge); }
.mini { margin: 22px 0 28px; border-top: 1px solid var(--filet); }
.mini div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--filet); }
.mini dt { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding-top: 3px; }
.mini dd { margin: 0; font-weight: 400; }
@media (min-width: 900px) {
  .rang { grid-template-columns: 1.35fr 1fr; }
  .rang--inverse { grid-template-columns: 1fr 1.35fr; }
  .rang--inverse .rang__image { order: 2; }
}

/* ---------- Fiche d'un modèle ---------- */
.fiche__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; }
.fiche__transport { font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; color: var(--rouge); }
.fiche { padding-bottom: var(--espace); }
.fiche__photo a { display: block; background: var(--clair); }
.fiche__photo img { width: 100%; }
.fiche__corps { margin-top: clamp(40px, 6vw, 84px); display: grid; gap: clamp(40px, 5vw, 80px); align-items: start; }
@media (min-width: 900px) { .fiche__corps { grid-template-columns: 1fr 1.15fr; } }
.specs { margin: 0; border-top: 2px solid var(--noir); }
.specs div { display: grid; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.specs dt { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); padding-top: 4px; }
.specs dd { margin: 0; font-size: 18px; font-weight: 500; color: var(--noir); }
@media (min-width: 520px) { .specs div { grid-template-columns: 13em 1fr; } }
.fiche__devis { margin-top: 34px; }

/* Photos ouvrables : jamais affichées plus grand que leur taille d’origine */
a[data-agrandir] { cursor: zoom-in; }
.galerie { display: flex; flex-wrap: wrap; gap: 14px; }
.galerie a { flex: 1 1 100%; max-width: var(--l); overflow: hidden; background: var(--clair); }
.galerie img { width: 100%; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.galerie a:hover img { transform: scale(1.04); }
@media (min-width: 600px) {
  .galerie a { flex: var(--r) 1 calc(var(--r) * 170px); min-width: 0; aspect-ratio: var(--r); }
  .galerie img { height: 100%; object-fit: cover; }
}

/* ---------- Modèle précédent / suivant ---------- */
.voisins { border-top: 1px solid var(--filet); }
.voisins__dedans { display: grid; grid-template-columns: 1fr 1fr; }
.voisin { display: grid; gap: 4px; padding: clamp(24px, 4vw, 46px) 0; transition: color .25s ease; }
.voisin span { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.voisin strong { font-size: clamp(16px, 2.2vw, 26px); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.voisin:hover { color: var(--rouge); }
.voisin--suivant { text-align: right; padding-left: 20px; border-left: 1px solid var(--filet); }

/* ---------- Mosaïque de l’atelier ---------- */
.mosaique { margin-top: clamp(30px, 4vw, 54px); display: grid; gap: clamp(8px, 1vw, 14px); }
.mosaique__rang { display: grid; gap: clamp(8px, 1vw, 14px); }
.mosaique__rang a { display: block; overflow: hidden; background: var(--clair); }
.mosaique__rang img { width: 100%; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.mosaique__rang a:hover img { transform: scale(1.03); }
@media (min-width: 700px) {
  .mosaique__rang { display: flex; }
  .mosaique__rang a { flex: var(--r) 1 0px; min-width: 0; aspect-ratio: var(--r); }
  .mosaique__rang img { height: 100%; object-fit: cover; }
}

/* ---------- Tableau ---------- */
.tableau { margin-top: 30px; overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; background: var(--papier); }
.tableau th, .tableau td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--filet); font-weight: 400; }
.tableau thead th { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--ciel-haut); border: 0; }
.tableau tbody th { font-weight: 600; color: var(--noir); }
.tableau tbody th a:hover { color: var(--rouge); }

/* ---------- Études de cas (page) ---------- */
.etudes { display: grid; gap: clamp(44px, 6vw, 90px); }
.etude a { display: block; overflow: hidden; background: var(--papier); }
.etude img { width: 100%; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.etude a:hover img { transform: scale(1.025); }
.etude figcaption { display: grid; gap: 2px; margin-top: 16px; padding-left: 18px; border-left: 3px solid var(--rouge); }
.etude figcaption span { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.etude figcaption strong { font-size: clamp(20px, 2.6vw, 32px); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--rouge); }

/* ---------- Contact ---------- */
.contact { display: grid; gap: clamp(44px, 6vw, 90px); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: .8fr 1.2fr; } }
.coordonnees { border-top: 2px solid var(--noir); }
.coordonnees li { display: grid; gap: 2px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
.coordonnees span { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.coordonnees a { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; color: var(--noir); overflow-wrap: anywhere; transition: color .25s ease; }
.coordonnees a:hover { color: var(--rouge); }
.formulaire { display: grid; gap: 20px 24px; }
@media (min-width: 620px) { .formulaire { grid-template-columns: 1fr 1fr; } .champ--large { grid-column: 1 / -1; } }
.champ label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 56px; padding: 14px 16px;
  font: inherit; font-weight: 400; color: var(--noir);
  background: #fff; border: 1px solid #B9BDC1; border-radius: 2px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { resize: vertical; line-height: 1.5; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--noir); box-shadow: 0 0 0 3px rgba(210, 25, 33, .18); }
.champ [aria-invalid="true"] { border-color: var(--rouge); }
.champ__erreur { margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--rouge); }
.formulaire__note { margin-top: 14px; font-size: 15px; color: var(--gris); }
.formulaire__etat { margin-top: 16px; padding: 16px 18px; font-weight: 400; background: var(--clair); border-left: 3px solid var(--rouge); }

/* ---------- Pages de texte ---------- */
.texte { max-width: 860px; }
.texte h2 { margin: clamp(36px, 5vw, 60px) 0 18px; }
.texte h2:first-of-type { margin-top: 0; }
.texte p { margin-bottom: 14px; }
.texte p a, .texte dd a { border-bottom: 1px solid var(--rouge); }
.avis { margin-bottom: clamp(30px, 4vw, 48px); padding: 16px 18px; font-weight: 500; color: var(--rouge-profond); background: #FBEDED; border-left: 4px solid var(--rouge); }
.a-completer { padding: 2px 8px; font-weight: 500; color: var(--rouge-profond); background: #FBEDED; }

/* ---------- Photo en grand ---------- */
.visionneuse { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; }
.visionneuse::backdrop { background: rgba(14, 15, 16, .93); }
.visionneuse__scene { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 16px 18px; }
.visionneuse img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; }
.visionneuse__legende { margin-top: 14px; font-size: 14px; letter-spacing: .06em; color: #fff; text-align: center; }
.visionneuse button { position: absolute; width: 52px; height: 52px; display: grid; place-content: center; font-size: 26px; color: #fff; background: rgba(14, 15, 16, .5); border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px; transition: background-color .25s ease; }
.visionneuse button:hover { background: var(--rouge); border-color: var(--rouge); }
.visionneuse__fermer { top: 12px; right: 12px; }
.visionneuse__avant { left: 12px; top: 50%; margin-top: -26px; }
.visionneuse__apres { right: 12px; top: 50%; margin-top: -26px; }
.visionneuse[data-seule] .visionneuse__avant, .visionneuse[data-seule] .visionneuse__apres { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rang__image img, .galerie img, .mosaique__rang img, .etude img { transition: none; }
}