/* ------------------------------------------------------------------
   MADAME CARREAUX — carreaux de ciment artisanaux, Roncherolles-sur-
   le-Vivier (76). Maquette de démonstration Meriova.

   Direction artistique « encre-et-pigment » : l'encre presque noire du
   monogramme publié par l'atelier sert de fond ; le papier est un
   biscuit de ciment cru ; toute la couleur vient des carreaux
   eux-mêmes (terre, ocre, bleu, vert, rose relevés sur les photos).
   Géométrie strictement carrée — un carreau n'a pas de coins arrondis ;
   le losange du monogramme est la seule diagonale, réutilisé comme
   marqueur. Les sections et les grilles sont séparées par des filets
   d'un pixel qui jouent le rôle des joints de pose.
   Thème unique verrouillé (clair). Aucune ressource tierce : polices,
   images et icônes auto-hébergées. Aucun script tiers, aucun tracking.
   ------------------------------------------------------------------ */

/* --- Polices (SIL Open Font License 1.1, licences dans assets/fonts) */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/fraunces-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;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/fraunces-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: "Archivo";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/archivo-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;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/archivo-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;
}

/* --- Jetons -------------------------------------------------------- */
:root {
  color-scheme: light;

  /* encre du monogramme */
  --encre: #202224;
  --encre-fonce: #17191a;
  --encre-clair: #2c2f31;

  /* papier : biscuit de ciment cru */
  --papier: #f4efe8;
  --papier-2: #eae2d6;
  --blanc: #fcfaf7;

  --ink: #1b1d1f;
  --ink-doux: #55565a;
  --ink-mat: #7d7c78;
  --sur-encre: #f0ebe4;
  --sur-encre-doux: #a9a9a5;

  /* joints */
  --joint: #ddd5c8;
  --joint-encre: #34383a;

  /* pigments relevés sur les carreaux de l'atelier */
  --terre: #a94a34;
  --terre-clair: #e07a5c;
  --pig-bleu: #2f5aa8;
  --pig-vert: #5f7d5e;
  --pig-ocre: #d6a544;
  --pig-rose: #e0b1ad;

  --gouttiere: clamp(1.25rem, 4vw, 3.5rem);
  --large: 1240px;
  --etroit: 720px;

  --ombre: 0 1px 0 rgba(27, 29, 31, 0.06), 0 18px 40px -28px rgba(27, 29, 31, 0.5);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
  font-variation-settings: "opsz" 120;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

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

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

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--sur-encre);
  padding: 0.75rem 1.25rem;
  z-index: 60;
}

.saut:focus {
  left: 0;
}

/* --- Losange : marqueur repris du monogramme ----------------------- */
.losange {
  display: inline-block;
  width: 0.44em;
  height: 0.44em;
  transform: rotate(45deg);
  background: currentColor;
  vertical-align: 0.06em;
  margin-right: 0.7em;
  flex: none;
}

/* dans les blocs alignés en haut, le losange se cale sur la 1re ligne */
.heros-adresse .losange,
.galerie-note .losange {
  margin-top: 0.5em;
}

/* --- Bandeau maquette ---------------------------------------------- */
.bandeau {
  margin: 0;
  background: var(--encre-fonce);
  color: var(--sur-encre);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.7rem var(--gouttiere);
  border-bottom: 1px solid var(--joint-encre);
}

.bandeau a {
  color: var(--terre-clair);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* --- En-tête ------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--encre);
  border-bottom: 1px solid var(--joint-encre);
  color: var(--sur-encre);
}

.entete-in {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 74px;
  padding-block: 0.6rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  margin-right: auto;
}

.marque img {
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--joint-encre);
}

.marque-mots {
  display: block;
  line-height: 1.15;
}

.marque-nom {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.marque-sous {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sur-encre-doux);
  margin-top: 0.25rem;
}

.nav-principale {
  display: flex;
  gap: 1.6rem;
}

.nav-principale a {
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sur-encre);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-principale a:hover {
  color: #fff;
  border-bottom-color: var(--terre-clair);
}

.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--joint-encre);
  color: var(--sur-encre);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* --- Boutons ------------------------------------------------------- */
.btn {
  --btn-fond: var(--terre);
  --btn-texte: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--btn-fond);
  color: var(--btn-texte);
  border: 1px solid var(--btn-fond);
  border-radius: 2px;
  padding: 0.78rem 1.35rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  background: #93402c;
  border-color: #93402c;
  transform: translateY(-1px);
}

.btn-fantome {
  --btn-fond: transparent;
  --btn-texte: var(--sur-encre);
  border-color: rgba(240, 235, 228, 0.32);
}

.btn-fantome:hover {
  background: rgba(240, 235, 228, 0.09);
  border-color: rgba(240, 235, 228, 0.6);
  color: #fff;
}

.btn-entete {
  padding: 0.6rem 1rem;
  font-size: 0.8125rem;
}

/* --- Héros --------------------------------------------------------- */
.heros {
  background: var(--encre);
  color: var(--sur-encre);
  border-bottom: 1px solid var(--joint-encre);
  position: relative;
  overflow: hidden;
}

.heros::before {
  content: "";
  position: absolute;
  inset: 0;
  /* trame de joints de pose, très basse intensité */
  background-image: linear-gradient(to right, rgba(240, 235, 228, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240, 235, 228, 0.05) 1px, transparent 1px);
  background-size: 92px 92px;
  pointer-events: none;
}

.heros-in {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}

.surtitre {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sur-encre-doux);
  margin: 0 0 1.6rem;
}

.heros h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.25rem);
  font-variation-settings: "opsz" 144;
  color: #fff;
  max-width: 12ch;
  margin-bottom: 1.5rem;
}

.heros h1 em {
  font-style: italic;
  color: var(--terre-clair);
  font-variation-settings: "opsz" 144;
}

.heros-texte {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--sur-encre);
  max-width: 42ch;
  margin-bottom: 2rem;
}

.heros-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.heros-adresse {
  display: flex;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--sur-encre-doux);
  border-top: 1px solid var(--joint-encre);
  padding-top: 1.2rem;
  margin: 0;
  max-width: 40ch;
}

.heros-visuel {
  position: relative;
}

.heros-visuel img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--joint-encre);
}

.heros-visuel figcaption {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sur-encre-doux);
  margin-top: 0.85rem;
}

.heros-visuel {
  margin: 0;
}

/* --- Rubans de faits ----------------------------------------------- */
.ruban {
  background: var(--papier-2);
  border-bottom: 1px solid var(--joint);
}

.ruban-in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--joint);
  border-inline: 1px solid var(--joint);
}

.ruban-item {
  background: var(--papier-2);
  padding: 2rem clamp(1.25rem, 2.4vw, 2rem);
}

.ruban-item h2 {
  font-size: 1.1875rem;
  font-variation-settings: "opsz" 36;
  margin-bottom: 0.6rem;
}

.ruban-item p {
  font-size: 0.9375rem;
  color: var(--ink-doux);
}

.ruban-num {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--terre);
  margin-bottom: 1.1rem;
  font-weight: 600;
}

/* --- Sections ------------------------------------------------------ */
.section {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  border-bottom: 1px solid var(--joint);
}

.section-encre {
  background: var(--encre);
  color: var(--sur-encre);
  border-bottom-color: var(--joint-encre);
}

.section-tete {
  max-width: 56ch;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.section-eyebrow {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 1.1rem;
}

.section-encre .section-eyebrow {
  color: var(--terre-clair);
}

.section h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  font-variation-settings: "opsz" 96;
  margin-bottom: 1rem;
}

.section-encre h2 {
  color: #fff;
}

.section-tete p {
  color: var(--ink-doux);
  font-size: 1.0625rem;
}

.section-encre .section-tete p {
  color: var(--sur-encre-doux);
}

/* --- Catalogue ----------------------------------------------------- */
.catalogue-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.planche {
  margin: 0;
  background: var(--blanc);
  border: 1px solid var(--joint);
  box-shadow: var(--ombre);
}

.planche img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.planche figcaption {
  padding: 1.1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--joint);
}

.planche-titre {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  font-variation-settings: "opsz" 36;
  margin-bottom: 0.3rem;
}

.planche-note {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-mat);
  letter-spacing: 0.04em;
}

.catalogue-mot {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--joint);
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.catalogue-mot p {
  color: var(--ink-doux);
  margin: 0;
}

/* --- Galerie des modèles ------------------------------------------- */
.galerie-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--joint-encre);
  border: 1px solid var(--joint-encre);
}

.carreau {
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  margin: 0;
}

.carreau img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--papier-2);
}

.carreau figcaption {
  padding: 0.85rem 0.95rem 1rem;
  border-top: 1px solid var(--joint);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.carreau-eti {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mat);
}

.carreau-nom {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.0625rem;
  font-variation-settings: "opsz" 24;
  color: var(--ink);
}

.galerie-note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--sur-encre-doux);
  display: flex;
  align-items: flex-start;
}

/* --- Situations ---------------------------------------------------- */
.situations-grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.situation {
  margin: 0;
  border: 1px solid var(--joint);
  background: var(--blanc);
}

.situation img {
  width: 100%;
  object-fit: cover;
}

.situation figcaption {
  font-size: 0.8125rem;
  color: var(--ink-mat);
  padding: 0.8rem 1rem 0.9rem;
  border-top: 1px solid var(--joint);
  letter-spacing: 0.03em;
}

/* Hauteurs fixes par rangée : les photos de l'atelier ont des formats
   très différents, seule une hauteur commune garde la ligne de base. */
.situation-a {
  grid-column: span 7;
}

.situation-b {
  grid-column: span 5;
}

.situation-a img,
.situation-b img {
  height: clamp(300px, 33vw, 440px);
}

.situation-c,
.situation-d,
.situation-e {
  grid-column: span 4;
}

.situation-c img,
.situation-d img,
.situation-e img {
  height: clamp(230px, 24vw, 320px);
}

/* --- Palette de pigments ------------------------------------------- */
.pigments {
  display: flex;
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--joint);
  background: var(--joint);
}

.pigments span {
  flex: 1;
  height: 46px;
}

/* --- Atelier ------------------------------------------------------- */
.atelier-visuel {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--joint-encre);
}

.atelier-visuel img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.atelier-visuel figcaption {
  font-size: 0.8125rem;
  color: var(--sur-encre-doux);
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--joint-encre);
}

.atelier-colonnes {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.atelier-colonnes p {
  color: var(--sur-encre);
}

.fiche {
  border: 1px solid var(--joint-encre);
  background: var(--encre-clair);
}

.fiche dl {
  margin: 0;
}

.fiche div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--joint-encre);
}

.fiche div:last-child {
  border-bottom: 0;
}

.fiche dt {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sur-encre-doux);
}

.fiche dd {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}

.fiche dd a {
  color: var(--terre-clair);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 122, 92, 0.45);
}

.fiche dd a:hover {
  border-bottom-color: var(--terre-clair);
}

/* --- Contact ------------------------------------------------------- */
.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.coords {
  display: grid;
  gap: 1px;
  background: var(--joint);
  border: 1px solid var(--joint);
}

.coord {
  background: var(--blanc);
  display: flex;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
}

.coord svg {
  flex: none;
  margin-top: 0.25rem;
  color: var(--terre);
}

.coord .lib {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mat);
  margin-bottom: 0.25rem;
}

.coord a {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  font-variation-settings: "opsz" 30;
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 74, 52, 0.4);
  color: var(--ink);
  /* l'adresse e-mail est une chaîne insécable : sans cela elle déborde
     de la colonne sur mobile */
  overflow-wrap: anywhere;
}

.coord a:hover {
  border-bottom-color: var(--terre);
  color: var(--terre);
}

.coord p {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.125rem;
  font-variation-settings: "opsz" 30;
  line-height: 1.35;
}

.form-demo {
  border: 1px solid var(--joint);
  background: var(--papier-2);
  padding: clamp(1.35rem, 3vw, 2rem);
}

.form-demo-note {
  font-size: 0.875rem;
  color: var(--ink-doux);
  border-left: 3px solid var(--terre);
  padding-left: 0.9rem;
  margin-bottom: 1.5rem;
}

.form-demo label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mat);
  margin-bottom: 1rem;
}

.form-demo input,
.form-demo textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  background: var(--blanc);
  border: 1px solid var(--joint);
  border-radius: 2px;
  padding: 0.65rem 0.8rem;
}

.form-demo fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.form-demo fieldset[disabled] {
  opacity: 0.72;
}

.form-demo button[disabled] {
  cursor: not-allowed;
  opacity: 0.85;
}

/* --- Pied ---------------------------------------------------------- */
.socle {
  background: var(--encre-fonce);
  color: var(--sur-encre-doux);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  font-size: 0.875rem;
}

.socle-haut {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--joint-encre);
}

.socle .marque {
  margin-right: 0;
  margin-bottom: 1.25rem;
  color: var(--sur-encre);
}

.socle-coords {
  display: grid;
  gap: 0.35rem;
}

.socle-coords a {
  color: var(--terre-clair);
  text-decoration: none;
}

.socle-coords a:hover {
  text-decoration: underline;
}

.socle-nav {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.socle-nav a {
  color: var(--sur-encre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  justify-self: start;
}

.socle-nav a:hover {
  border-bottom-color: var(--terre-clair);
}

.socle-legal {
  padding-top: 1.5rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #85857f;
}

/* --- Pages secondaires --------------------------------------------- */
.page-tete {
  background: var(--encre);
  color: var(--sur-encre);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--joint-encre);
}

.page-tete h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  color: #fff;
  margin-bottom: 0.9rem;
}

.page-tete p {
  color: var(--sur-encre-doux);
  max-width: 62ch;
  margin: 0;
}

.prose {
  max-width: var(--etroit);
}

.prose h2 {
  font-size: 1.5rem;
  font-variation-settings: "opsz" 36;
  margin: 2.5rem 0 0.85rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--ink-doux);
}

.prose ul {
  padding-left: 1.1rem;
  margin: 0 0 1.1em;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose a {
  color: var(--terre);
  text-underline-offset: 3px;
}

.encadre {
  border: 1px solid var(--joint);
  border-left: 3px solid var(--terre);
  background: var(--papier-2);
  padding: 1.25rem 1.4rem;
  margin-bottom: 2rem;
}

.encadre p {
  margin: 0;
  color: var(--ink);
}

/* --- Avant / après -------------------------------------------------- */
.comparaison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.volet {
  margin: 0;
  border: 1px solid var(--joint);
  background: var(--blanc);
}

.volet-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--joint);
}

.volet-tete strong {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.125rem;
  font-variation-settings: "opsz" 30;
}

.volet-eti {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mat);
}

.volet-cadre {
  max-height: 560px;
  overflow: hidden;
  border-bottom: 1px solid var(--joint);
  background: var(--papier-2);
}

.volet-cadre img {
  width: 100%;
}

.volet figcaption {
  padding: 0.85rem 1.1rem 1rem;
  font-size: 0.8125rem;
  color: var(--ink-mat);
}

.ameliorations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--joint);
  border: 1px solid var(--joint);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.amelioration {
  background: var(--blanc);
  padding: 1.6rem 1.5rem;
}

.amelioration h3 {
  font-size: 1.125rem;
  font-variation-settings: "opsz" 30;
  margin-bottom: 0.5rem;
}

.amelioration p {
  font-size: 0.9375rem;
  color: var(--ink-doux);
  margin: 0;
}

.amelioration-num {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--terre);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

/* --- Révélation au défilement -------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* --- Adaptations --------------------------------------------------- */
@media (max-width: 1080px) {
  .galerie-grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .nav-burger {
    display: inline-flex;
    order: 3;
  }

  .nav-principale {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--joint-encre);
    padding-block: 0.5rem;
  }

  .nav-principale.ouverte {
    display: flex;
  }

  .nav-principale a {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--joint-encre);
  }

  .entete-in {
    flex-wrap: wrap;
  }

  .btn-entete {
    order: 2;
  }

  .heros-in {
    grid-template-columns: 1fr;
  }

  .heros h1 {
    max-width: 14ch;
  }

  .heros-visuel img {
    aspect-ratio: 4 / 3;
  }

  .ruban-in,
  .catalogue-grille,
  .catalogue-mot,
  .atelier-colonnes,
  .contact-grille,
  .socle-haut,
  .comparaison,
  .ameliorations {
    grid-template-columns: 1fr;
  }

  .situations-grille > * {
    grid-column: span 12;
  }

  .situation img {
    height: clamp(230px, 56vw, 380px);
  }

  .ruban-in {
    border-inline: 0;
    border-block: 1px solid var(--joint);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }

  .bande {
    grid-template-columns: repeat(3, 1fr);
  }

  .galerie-grille {
    grid-template-columns: repeat(2, 1fr);
  }

  .marque-sous {
    display: none;
  }

  .heros-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .volet-cadre {
    max-height: 340px;
  }

  .coord a,
  .coord p {
    font-size: 1.0625rem;
  }

  .socle-coords {
    overflow-wrap: anywhere;
  }
}