/* ==========================================================================
   Mereu Ceram — feuille de style unique
   Fond blanc cassé · encre #14120E · or #DEA940 (l'or EXACT du logo)

   Deux principes :
   1. L'or ne sert jamais de couleur de texte sur fond clair (illisible).
      Il est employé en aplats : boutons, pastilles, carreaux, bandeau d'appel.
      C'est donc toujours l'or du logo, jamais une version rabattue.
   2. La mise en page reprend la logique du carrelage : des dalles blanches
      séparées par un joint d'1 px, pas des cartes à ombre portée.

   Taille de base 19 px, tout est en rem : agrandir la base agrandit tout.
   ========================================================================== */

:root {
  --blanc: #ffffff;
  --coquille: #faf8f4;        /* le blanc cassé des sections alternées */
  --sable: #f1eadd;           /* réservé aux emplacements photo */
  --encre: #14120e;
  --encre-doux: #54503f;
  --or: #dea940;              /* or du logo — aplats uniquement */
  --trait: #e6dfd2;           /* le joint */

  --pas: 46px;              /* largeur d'un carreau de la trame */
  --rayon: 14px;
  --max: 1160px;
  --transition: 0.18s ease;

  --ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--encre);
  background: var(--blanc);
  line-height: 1.6;
  /* 17 px sur une petite fenêtre, 19 px sur un grand écran : tout le site
     est en rem, donc titres, marges et boutons suivent. */
  font-size: clamp(1.0625rem, min(1.15vw, 2vh), 1.1875rem);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 4px;
}

.conteneur { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* --------------------------------------------------------------- typographie */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, min(3.4vw, 5vh), 2.6rem); }
h3 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.02em; }

/* le surtitre : un carreau d'or, puis le mot */
.surtitre {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre); font-weight: 600; margin-bottom: 20px;
}
.surtitre::before { content: ''; width: 16px; height: 16px; flex: none; background: var(--or); }
.surtitre--clair { color: var(--encre); }
.section__tete--centre .surtitre { justify-content: center; }

.chapo { font-size: 1.3rem; line-height: 1.58; color: var(--encre-doux); max-width: min(60ch, 100%); }
.chapo--clair { color: var(--encre-doux); }

/* le filet : trois carreaux, pas un trait générique */
.filet {
  width: 76px; height: 16px; border: 0; margin: 28px 0 32px;
  background: var(--or);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 30px);
  mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 30px);
}
.filet--centre { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: clamp(46px, 6vh, 60px); padding: 12px clamp(20px, 2vw, 34px);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  border-radius: 10px; border: 2px solid transparent;
  transition: var(--transition); cursor: pointer; text-align: center;
}
.btn--or { background: var(--or); color: var(--encre); border-color: var(--or); }
.btn--or:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.btn--ligne, .btn--ligne-sombre {
  border-color: var(--encre); color: var(--encre); background: transparent;
}
.btn--ligne:hover, .btn--ligne-sombre:hover { background: var(--encre); color: #fff; }

/* ------------------------------------------------------------------ en-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.entete__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 88px;
  max-width: none;                          /* la barre occupe toute la largeur */
  padding: 0 clamp(20px, 3.4vw, 60px);      /* logo à gauche, devis à droite */
}
.marque { display: flex; align-items: center; gap: 14px; }
.marque img { height: 52px; width: auto; }
.marque__nom { color: var(--encre); font-size: 1.3rem; letter-spacing: .05em; font-weight: 600; white-space: nowrap; }
.marque__nom span { color: var(--or); }      /* le M et le C en or, comme le logo */

.nav { display: flex; align-items: center; gap: 26px; }
.nav a:not(.btn) {
  color: var(--encre); font-size: 1.0625rem; font-weight: 500;
  padding: 10px 0; border-bottom: 3px solid transparent; transition: var(--transition);
}
.nav a:not(.btn):hover, .nav a:not(.btn).actif { border-color: var(--or); }
.nav a:not(.btn).actif { font-weight: 600; }
.nav .btn {
  padding: 12px 22px; min-height: 50px; font-size: 1.0625rem;
  white-space: nowrap; flex: none;
}
.nav .btn:hover { border-color: var(--encre); }
.nav__tel::before {
  content: ''; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--ico-tel) center / contain no-repeat;
  mask: var(--ico-tel) center / contain no-repeat;
}

.burger { display: none; background: none; border: 0; cursor: pointer; width: 46px; height: 40px; position: relative; }
.burger span { position: absolute; left: 7px; width: 32px; height: 3px; background: var(--encre); transition: var(--transition); }
.burger span:nth-child(1) { top: 10px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 28px; }

/* --------------------------------------------------------------------- hero
   Le titre à gauche sur blanc, une bande de carreaux nette à droite :
   la composition de la photo de couverture.                                  */
.hero {
  position: relative; background: var(--blanc); color: var(--encre);
  overflow: hidden;
  /* La bannière occupe exactement une fenêtre, en-tête déduit : sur un petit
     écran rien n'est coupé, sur un grand elle ne paraît pas perdue. */
  min-height: calc(100svh - 88px);
  display: flex; align-items: center;
  padding: clamp(26px, 4.5vh, 80px) 0;
}
/* Tout ce qui est dans la bannière suit la PLUS PETITE des deux dimensions :
   la largeur sur un écran large, la hauteur sur une fenêtre basse. */
.hero .surtitre { font-size: clamp(.85rem, min(1.1vw, 1.6vh), 1rem); margin-bottom: clamp(8px, 1.8vh, 20px); }
.hero h1 { font-size: clamp(1.8rem, min(5.2vw, 7.4vh), 5rem); }
.hero .filet { margin-block: clamp(12px, 2.2vh, 28px) clamp(14px, 2.6vh, 32px); }
.hero .chapo { font-size: clamp(1rem, min(1.35vw, 2.1vh), 1.35rem); }
.hero .btn {
  min-height: clamp(46px, 6.2vh, 64px);
  padding: 0 clamp(18px, 1.9vw, 36px);
  font-size: clamp(.95rem, min(1.1vw, 1.9vh), 1.15rem);
}
.hero__fond {
  /* bande de carreaux à GAUCHE, comme sur la photo de couverture */
  position: absolute; top: 0; left: 0; bottom: 0; right: auto;
  width: clamp(46px, 9.5vw, 138px);                        /* repli */
  width: round(down, clamp(46px, calc((100vw - 1100px) / 2), 138px), var(--pas));
  background-position: left top; background-repeat: repeat;
  background-size: calc(var(--pas) * 6) auto;
  /* le fondu ne couvre que le joint final : aucun carreau n'est rongé */
  -webkit-mask-image: linear-gradient(90deg, #000 0 97%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 97%, transparent 100%);
}
/* --- photo du dirigeant : panneau pleine hauteur, fondu dans le blanc --- */
.hero__photo {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 1;
  width: clamp(320px, 44%, 660px); margin: 0;
}
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 24%;
  display: block; border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
/* le nom, écrit à même la photo, en bas à droite : pas de voile, pas d'ombre,
   texte encre posé sur le carrelage clair du sol. */
.hero__photo figcaption {
  position: absolute; right: 46px; bottom: 44px;
  text-align: right; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 14px rgba(0, 0, 0, .35);
}
.hero__photo figcaption strong {
  display: block; font-size: clamp(1.2rem, min(1.8vw, 3vh), 1.9rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15;
}
.hero__photo figcaption span { font-size: 1.0625rem; color: rgba(255, 255, 255, .85); }

.hero__inner { position: relative; z-index: 2; }
.hero__inner > * { max-width: min(54%, 660px); }
.hero h1 { margin-bottom: 4px; }
/* le mot accentué est souligné d'un aplat d'or, il reste noir donc lisible */
.hero h1 em {
  font-style: normal; color: var(--encre);
  background: linear-gradient(var(--or), var(--or)) 0 86% / 100% .14em no-repeat;
  padding-bottom: .04em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(16px, 3.2vh, 40px); }

.hero--court { padding: clamp(34px, 5.5vh, 72px) 0; min-height: 0; }
.hero--court h1 { font-size: clamp(1.9rem, min(4.4vw, 7vh), 3.4rem); }

/* ------------------------------------------------------------------ bandeau
   Bande noire pleine largeur : le contraste du logo, et ça casse le blanc.   */
.bandeau { background: var(--encre); color: #fff; }
.bandeau__grille { display: grid; grid-template-columns: repeat(4, 1fr); text-align: left; }
.bandeau__item { padding: 18px 24px; border-left: 1px solid rgba(255, 255, 255, .14); }
.bandeau__item:first-child { border-left: 0; }
.bandeau__item strong {
  display: block; color: #fff; font-size: 1.0625rem; font-weight: 600; margin-bottom: 1px;
}
.bandeau__item span { font-size: .9375rem; color: #a8a295; }

/* ------------------------------------------------------------------ section */
.section {
  position: relative; overflow: hidden;
  background: var(--blanc);
  padding: clamp(52px, 6.5vw, 88px) 0;
}
/* La colonne de carreaux court sur toute la hauteur des pages. Sa largeur
   est calculée pour vivre dans la marge : elle ne mord jamais sur le texte. */
.section--carreaux::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  width: clamp(0px, calc((100vw - 1100px) / 2), 138px);    /* repli */
  width: round(down, clamp(0px, calc((100vw - 1100px) / 2), 138px), var(--pas));
  background: url('../assets/motif-carreaux-1.jpg') left top / calc(var(--pas) * 6) auto repeat;
  /* le fondu ne couvre que le joint final : aucun carreau n'est rongé */
  -webkit-mask-image: linear-gradient(90deg, #000 0 97%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 97%, transparent 100%);
  pointer-events: none;
}
.section > .conteneur { position: relative; z-index: 1; }
/* La colonne se pose uniquement sur les sections portant .section--carreaux :
   elle s'arrête donc net au premier changement de fond. */
.section--creme { background: var(--coquille); }
.section--noire { background: var(--blanc); color: var(--encre); }
.section--noire h2 { color: var(--encre); }
.section__tete { max-width: 800px; margin-bottom: 34px; }
.section__tete--centre { margin-left: auto; margin-right: auto; text-align: center; }

/* ------------------------------------------------- dalles jointoyées (cartes)
   gap 1 px sur fond « joint » : les blocs se lisent comme un calepinage.      */
.grille { display: grid; gap: 28px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3, .grille--4 {
  gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden;
}
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

.carte { background: var(--blanc); border-radius: var(--rayon); padding: 40px 34px; transition: var(--transition); }
.grille--3 > .carte, .grille--4 > .carte { border-radius: 0; }
.grille--3 > .carte:hover, .grille--4 > .carte:hover { background: var(--coquille); }
.carte__num {
  display: inline-block; min-width: 44px; height: 44px; padding: 0 12px;
  background: var(--or); color: var(--encre);
  font-size: 1.0625rem; font-weight: 600; line-height: 44px; text-align: center;
  white-space: nowrap; margin-bottom: 18px;
}
.carte h3 { margin-bottom: 12px; }
.carte p { color: var(--encre-doux); font-size: 1.125rem; }
.carte ul { list-style: none; margin-top: 20px; }
.carte li { font-size: 1.0625rem; color: var(--encre-doux); padding-left: 26px; position: relative; margin-bottom: 9px; }
.carte li::before { content: ''; position: absolute; left: 0; top: .58em; width: 11px; height: 11px; background: var(--or); }

/* les deux blocs « particuliers / professionnels » : en noir, pour trancher */
.carte--sombre { background: var(--encre); border: 0; border-radius: var(--rayon); }
.carte--sombre h3 { color: #fff; }
.carte--sombre h3::before { content: ''; display: block; width: 14px; height: 14px; background: var(--or); margin-bottom: 18px; }
.carte--sombre p, .carte--sombre li { color: #b8b2a3; }

/* --------------------------------------------------------------- prestation */
.presta { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.presta + .presta { margin-top: clamp(36px, 4vw, 58px); }
.presta--inverse .presta__media { order: 2; }
.presta__media { aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; background: var(--sable); }
.presta__media img { width: 100%; height: 100%; object-fit: cover; }
.presta h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.presta ul { list-style: none; margin-top: 26px; }
.presta li { padding-left: 32px; position: relative; margin-bottom: 12px; color: var(--encre-doux); font-size: 1.125rem; }
.presta li::before { content: ''; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; background: var(--or); }

/* ------------------------------------------------------------------ galerie */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.galerie__item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon); background: var(--sable); }
.galerie__item img { width: 100%; height: 100%; object-fit: cover; transition: .5s ease; }
.galerie__item:hover img { transform: scale(1.05); }
.galerie__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 24px 22px;
  color: #fff; font-size: 1.125rem; font-weight: 500;
  background: linear-gradient(transparent, rgba(10, 9, 6, .92));
}
.galerie__item figcaption em {
  font-style: normal; display: block; color: var(--or);
  font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px;
}

/* tant qu'aucune photo n'est déposée : légende lisible sur fond clair */
.galerie__item:has(.vide) figcaption {
  background: rgba(255, 255, 255, .96); color: var(--encre);
  padding: 16px 20px; border-top: 1px solid var(--trait);
}
.galerie__item:has(.vide) figcaption em { color: var(--encre-doux); }

.vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--encre-doux); font-size: 1rem; text-align: center;
  border: 2px dashed var(--trait); border-radius: var(--rayon);
  gap: 10px; padding: 20px; line-height: 1.5; background: var(--coquille);
}
.vide svg { width: 34px; height: 34px; stroke: var(--encre); fill: none; stroke-width: 1.5; }

/* --------------------------------------------------------------------- zone */
.zone { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 3vw, 56px); align-items: center; }
.zone__liste { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.zone__liste span {
  font-size: 1rem; padding: 8px 16px; background: var(--coquille);
  border: 1px solid var(--trait); border-radius: 8px; color: var(--encre);
}

/* ------------------------------------------------------------------ contact */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; }
.coord { list-style: none; }
.coord li { display: flex; gap: 20px; padding: clamp(10px, 1.5vh, 18px) 0; border-bottom: 1px solid var(--trait); }
.coord strong {
  display: block; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre); font-weight: 600; margin-bottom: 2px;
}
.coord a, .coord p { color: var(--encre); font-size: 1.15rem; }
.coord a:hover { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 3px; }

.form { display: grid; gap: clamp(12px, 1.8vh, 20px); }
.form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }
/* sans ceci, un intitulé long élargit sa colonne et écrase l'autre */
.form__duo > * { min-width: 0; }
.champ select { text-overflow: ellipsis; }
.champ { display: flex; flex-direction: column; gap: 5px; }
.champ label { font-size: 1rem; color: var(--encre); font-weight: 500; }
.champ input, .champ select, .champ textarea {
  font-family: inherit; font-size: 1.0625rem;
  padding: clamp(8px, 1.2vh, 13px) 15px;
  min-height: clamp(42px, 5.6vh, 54px);
  border: 2px solid var(--trait); border-radius: 10px; background: var(--blanc);
  color: var(--encre); transition: var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--encre); box-shadow: 0 0 0 4px rgba(222, 169, 64, .38);
}
.champ textarea { resize: vertical; min-height: clamp(100px, 15vh, 160px); }
.mention { font-size: 1rem; color: var(--encre-doux); }
.case {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 1.0625rem; cursor: pointer; padding: 4px 0;
}
.case input {
  width: 26px; height: 26px; flex: none; margin-top: 3px;
  accent-color: var(--or); cursor: pointer;
}
.champ select:disabled { background: var(--coquille); color: var(--encre-doux); cursor: not-allowed; }
/* piège à robots : invisible pour un humain, rempli par les spams */
.anti-robot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ------------------------------------------------- appel : un aplat d'or plein */
.cta {
  position: relative; background: var(--or); color: var(--encre);
  text-align: left; padding: clamp(44px, 5.5vw, 72px) 0; overflow: hidden;
}
.cta .conteneur { position: relative; z-index: 2; max-width: var(--max); }
.cta .btn--or {
  background: var(--encre); border-color: var(--encre); color: #fff;
  min-height: 54px; padding: 14px 28px;
}
.cta .btn--or:hover { background: #fff; border-color: #fff; color: var(--encre); }
.cta h2 { margin-bottom: 14px; max-width: 18ch; }
.cta p { color: #4a3a12; font-size: 1.15rem; max-width: 52ch; margin: 0 0 26px; }
/* quelques carreaux détourés dans l'or, en haut à droite */
.cta::after {
  content: ''; position: absolute; top: 50%; right: 9%; translate: 0 -50%;
  width: 232px; height: 152px;
  background:
    linear-gradient(var(--encre), var(--encre)) 0 0 / 68px 68px no-repeat,
    linear-gradient(#fff, #fff) 82px 0 / 68px 68px no-repeat,
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 164px 0 / 68px 68px no-repeat,
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 0 84px / 68px 68px no-repeat,
    linear-gradient(var(--encre), var(--encre)) 82px 84px / 68px 68px no-repeat,
    linear-gradient(#fff, #fff) 164px 84px / 68px 68px no-repeat;
}
@media (max-width: 1000px) { .cta::after { display: none; } .cta { text-align: center; } .cta p { margin-inline: auto; } .cta h2 { max-width: none; } }

/* ------------------------------------------------------------------- footer */
.pied { background: var(--encre); color: #a8a295; padding: 38px 0 20px; font-size: 1rem; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
.pied h4 { color: #fff; font-size: 1.0625rem; margin-bottom: 12px; font-weight: 600; }
.pied h4::before { content: ''; display: block; width: 11px; height: 11px; background: var(--or); margin-bottom: 10px; }
.pied ul { list-style: none; }
.pied li { margin-bottom: 7px; }
.pied a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; }
.pied__bas {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .9375rem;
}

/* ------------------------------------------------------------ texte légal */
.legal { max-width: 820px; }
.legal h2 { font-size: 1.7rem; margin: 46px 0 14px; }
.legal p { color: var(--encre-doux); margin-bottom: 14px; }

/* ------------------------------------------------------------- responsive */
/* Le menu passe en burger dès 1200 px : en dessous, les deux boutons de
   l'en-tête ne tiennent plus sur la ligne et débordent du bandeau. */
@media (max-width: 1200px) {
  .nav {
    position: fixed; inset: 94px 0 auto 0; background: var(--blanc);
    flex-direction: column; align-items: stretch; gap: 0; padding: 14px 28px 30px;
    display: none; border-bottom: 1px solid var(--trait);
    box-shadow: 0 18px 40px rgba(20, 18, 14, .12);
  }
  .nav.ouvert { display: flex; }
  .nav a { width: 100%; padding: 20px 0; font-size: 1.25rem; border-bottom: 1px solid var(--trait); }
  .nav a.actif, .nav a:hover { border-bottom-color: var(--or); }
  .nav .btn { margin-top: 16px; width: 100%; }
  .burger { display: block; }
}

@media (max-width: 1020px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .presta, .zone, .contact { grid-template-columns: 1fr; gap: 38px; }
  .presta--inverse .presta__media { order: 0; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .bandeau__grille { grid-template-columns: repeat(2, 1fr); }
  .bandeau__item:nth-child(3) { border-left: 0; }
  .bandeau__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .hero__inner > * { max-width: 100%; }
  /* on empile : carreaux en bandeau, texte, puis la photo pleine largeur */
  .hero { min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; align-items: stretch; }
  .hero__fond {
    order: 1; position: relative; inset: auto;
    width: 100vw; margin-left: calc(50% - 50vw);
    height: 150px; margin-bottom: 48px;
    background-size: 278px auto; background-repeat: repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .hero__inner { order: 2; padding-left: 28px; }
  .hero__photo {
    order: 3; position: relative; inset: auto;
    width: 100vw; margin-left: calc(50% - 50vw);
    height: auto; margin-top: 52px;
  }

  .hero__photo figcaption strong { font-size: 1.5rem; }
  /* le nom passe SOUS la photo : au-dessus il tomberait sur le t-shirt noir */
  /* sous la photo, sur fond blanc : le nom repasse en encre, sinon invisible */
  .hero__photo figcaption {
    position: static; right: auto; bottom: auto;
    text-align: right; padding: 18px 28px 0; color: var(--encre);
  }
  .hero__photo figcaption span { color: var(--encre-doux); }
  .hero__photo img {
    width: 100%; height: 480px; object-fit: cover; object-position: 58% 20%;
    -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .hero__photo figcaption strong { font-size: 1rem; }
  .hero__photo figcaption span { font-size: .9rem; }
}

@media (max-width: 620px) {
  body { font-size: 1.125rem; }
  h1 { font-size: clamp(2.1rem, 9.2vw, 2.9rem); }
  h2 { font-size: clamp(1.8rem, 7.4vw, 2.3rem); }
  .surtitre { font-size: .9rem; letter-spacing: .08em; align-items: flex-start; gap: 10px; }
  .surtitre::before { width: 13px; height: 13px; margin-top: .3em; }
  .conteneur { padding: 0 20px; }
  .hero__inner { padding-left: 20px; }
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .form__duo { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; }
  .bandeau__grille { grid-template-columns: 1fr; }
  .bandeau__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .bandeau__item:first-child { border-top: 0; }
  .hero__actions .btn { width: 100%; }
  .hero { min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; }
  .hero__fond { height: 118px; margin-bottom: 36px; background-size: 208px auto; }
  .hero__photo { margin-top: 40px; }
  .hero__photo img { height: 400px; }
  .hero__photo figcaption { padding: 16px 20px 0; }
  .hero__photo img { object-position: 58% 22%; }
}

/* Le bloc de texte est centré dans l'espace blanc, c'est-à-dire entre la bande
   de carreaux à gauche et le début de la photo à droite. Les deux bornes sont
   calculées à partir des mêmes valeurs que .hero__fond et .hero__photo. */
@media (min-width: 1021px) {
  .hero__inner {
    max-width: none; padding: 0;
    --bande: round(down, clamp(46px, calc((100vw - 1100px) / 2), 138px), var(--pas));
    --ecart: clamp(34px, 4.4vw, 92px);      /* respiration après les carreaux */
    --photo: clamp(320px, 44vw, 660px);
    --bord-gauche: var(--bande);
    --bord-droit: calc(100vw - var(--photo) - 12px);
    --bloc: calc(var(--bord-droit) - var(--bord-gauche) - var(--ecart));
  }
  .hero__inner > * {
    /* le bloc démarre juste après les carreaux et court jusqu'à la photo */
    margin-left: calc(var(--bord-gauche) + var(--ecart));
    width: calc(var(--bord-droit) - var(--bord-gauche) - var(--ecart));
    max-width: none;
  }
  /* le filet garde sa largeur de trois carreaux, il ne suit pas le bloc */
  .hero__inner > .filet { width: 76px; }
  .hero--court .hero__inner > * {
    margin-left: calc(var(--bord-gauche) + var(--ecart));
    width: min(66vw, 1000px); max-width: none;
  }
  .hero--court .hero__inner > .filet { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .galerie__item:hover img { transform: none; }
}