@charset "utf-8";

/* ==========================================================================
   Fred Ampaud — carreleur (Marsaz, Drôme)
   Direction : la matière du métier. Le fond est le gris d'un joint de ciment,
   la couleur de marque la terre cuite d'une tomette, et la page entière est
   posée sur une trame — comme un sol calepiné.
   Rampes calculées en OKLCH avec palette.mjs, jamais à l'œil.
   ========================================================================== */

/* --- Polices auto-hébergées : zéro origine tierce, donc zéro bandeau ------ */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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: 'Plex Mono';
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Palier 1 : valeurs littérales issues de palette.mjs ------------------ */

:root {
  /* Le joint : gris ciment, teinte OKLCH 113°, chroma 0.011 */
  --joint-050: #f6f6f4;
  --joint-100: #eaebe8;
  --joint-200: #d7d7d3;
  --joint-300: #bdbeb9;
  --joint-400: #a3a49d;
  --joint-500: #8b8c85;
  --joint-600: #73746d;
  --joint-700: #5b5b56;
  --joint-800: #444440;
  --joint-900: #2e2e2b;
  --joint-950: #1b1b19;

  /* La tomette : terre cuite, teinte OKLCH 41°, chroma 0.119 */
  --terrecuite-050: #fff3ef;
  --terrecuite-100: #fee4da;
  --terrecuite-200: #f9cbba;
  --terrecuite-300: #eeac92;
  --terrecuite-400: #dd8c6c;
  --terrecuite-500: #c7714f;
  --terrecuite-600: #aa5a3a;
  --terrecuite-700: #89452a;
  --terrecuite-800: #663420;
  --terrecuite-900: #452316;

  /* La faïence : bleu, teinte OKLCH 257°, chroma 0.088 — micro-accents seuls */
  --faience-100: #e1ebfb;
  --faience-700: #405c84;
  --faience-800: #304563;

  /* --- Palier 2 : les rôles. C'est ce que le reste du CSS utilise. ------- */

  --fond: var(--joint-050);
  --fond-surface: #ffffff;
  --fond-profond: var(--joint-950);

  --texte: var(--joint-900);          /* 13,62:1 sur le fond */
  --texte-doux: var(--joint-700);     /*  6,81:1 */
  --texte-tenu: var(--joint-800);

  --accent: var(--terrecuite-600);        /* tracés, aplats, grands titres */
  --accent-vif: var(--terrecuite-500);
  --accent-texte: var(--terrecuite-700);  /* 7,12:1 — texte courant */
  --accent-doux: var(--terrecuite-100);

  --filet: var(--joint-200);
  --filet-fort: var(--joint-300);

  --police-titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --police-texte: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --police-technique: 'Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --largeur-lecture: 68ch;
  --largeur-page: 76rem;

  /* Le joint structurel : la même mesure sert de gouttière partout */
  --joint-fin: 0.1875rem;
  --gouttiere: clamp(1rem, 2.5vw, 1.75rem);
  --respiration: clamp(3.25rem, 7vw, 6rem);

  --rayon: 2px; /* un carreau n'a pas de coins arrondis */
}

/* --- Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 5rem;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.65;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-texte);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--faience-700);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--police-titre);
  color: var(--texte);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.1rem, 1.15rem + 4vw, 3.9rem);
  font-weight: 800;
  font-stretch: 118%; /* l'axe de chasse d'Archivo : format de carreau, pas de titre de blog */
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
  font-weight: 700;
  font-stretch: 112%;
}

h3 {
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.35rem);
  font-weight: 700;
  font-stretch: 105%;
}

p {
  margin: 0 0 1.1em;
  max-width: var(--largeur-lecture);
}

ul {
  padding-inline-start: 1.15em;
}

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

.evitement {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--texte);
  color: var(--joint-050);
  transform: translateY(-120%);
}

.evitement:focus {
  transform: translateY(0);
}

/* --- Trame de page ------------------------------------------------------- */

.enveloppe {
  width: min(100% - 2 * var(--gouttiere), var(--largeur-page));
  margin-inline: auto;
}

.section {
  padding-block: var(--respiration);
  border-block-start: var(--joint-fin) solid var(--filet);
}

.section:first-of-type {
  border-block-start: 0;
}

.section > .enveloppe > h2 {
  margin-block-end: 0.35em;
}

/* L'étiquette de section : reprend la typographie d'une étiquette de palette */
.etiquette {
  display: block;
  font-family: var(--police-technique);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-block-end: 1.1rem;
}

.chapeau {
  font-size: 1.12em;
  color: var(--texte-doux);
  max-width: 58ch;
}

/* --- En-tête -------------------------------------------------------------- */

.entete {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: var(--joint-fin) solid var(--filet);
}

.entete__bloc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.marque {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--police-titre);
  font-weight: 800;
  font-stretch: 115%;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--texte);
  text-decoration: none;
}

/* Emplacement du logo : cadré en carré, il accepte le fichier du client tel
   quel. Si le logo est large, seule sa hauteur est contrainte. */
.marque__logo {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  flex: none;
  align-self: center;
}

.marque__nom {
  white-space: nowrap;
}

.marque__metier {
  font-family: var(--police-technique);
  font-size: 0.75rem;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.nav {
  display: none;
  gap: 1.5rem;
}

.nav a {
  color: var(--texte-doux);
  font-size: 0.95rem;
  text-decoration: none;
}

.nav a:hover {
  color: var(--accent-texte);
  text-decoration: underline;
}

/* En dessous de 62rem, la barre d'appel collante du bas porte déjà le
   téléphone : le répéter dans l'en-tête écrasait le nom sur deux lignes. */
.entete .bouton {
  display: none;
}

@media (min-width: 62rem) {
  .nav {
    display: flex;
  }

  .entete .bouton {
    display: inline-flex;
  }
}

/* --- Boutons -------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border: 2px solid var(--accent-texte);
  border-radius: var(--rayon);
  background: var(--accent-texte);
  color: #fff;
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.bouton:hover {
  background: var(--terrecuite-800);
  border-color: var(--terrecuite-800);
  transform: translateY(-1px);
}

.bouton--fantome {
  background: transparent;
  color: var(--accent-texte);
}

.bouton--fantome:hover {
  background: var(--accent-doux);
  border-color: var(--accent-texte);
  color: var(--terrecuite-800);
}

.bouton--compact {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}

/* --- Héros : le sol ------------------------------------------------------- */

.heros {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 5.5rem) 0;
}

.heros__texte {
  position: relative;
  z-index: 2;
}

.heros h1 {
  hyphens: none;
}

.heros h1 .accent {
  color: var(--accent-texte);
}

.heros__chapeau {
  max-width: 46ch;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  color: var(--texte-doux);
  margin-block-start: 1.4rem;
}

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-block-start: 2rem;
}

.heros__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--police-technique);
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.heros__reperes li::before {
  content: '▪';
  color: var(--accent);
  margin-inline-end: 0.5rem;
}

/* Le sol en perspective : deux dégradés répétés dessinent les joints. */
.heros__sol {
  --carreau: 84px;
  position: relative;
  height: clamp(190px, 30vw, 320px);
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  perspective: 420px;
  perspective-origin: 50% 0%;
}

.heros__sol::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: rotateX(66deg);
  transform-origin: 50% 0%;
  background-color: var(--terrecuite-300);
  background-image:
    linear-gradient(90deg, var(--joint-100) 2px, transparent 0),
    linear-gradient(var(--joint-100) 2px, transparent 0);
  background-size: var(--carreau) var(--carreau);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 97%);
}

@media (min-width: 62rem) {
  .heros {
    padding-block-end: 0;
  }

  .heros__sol {
    --carreau: 96px;
  }
}

/* --- Repères de confiance ------------------------------------------------- */

.reperes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--joint-fin);
  background: var(--filet);
  border: var(--joint-fin) solid var(--filet);
}

@media (min-width: 40rem) {
  .reperes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .reperes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.repere {
  background: var(--fond-surface);
  padding: 1.6rem 1.4rem;
}

.repere__valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  color: var(--accent-texte);
}

.repere__libelle {
  display: block;
  margin-block-start: 0.6rem;
  color: var(--texte-doux);
  font-size: 0.98rem;
}

/* --- Prestations ---------------------------------------------------------- */

/* Six prestations : les colonnes sont comptées, pas déduites. En auto-fit,
   la dernière rangée laissait deux cases vides sur grand écran. */
.prestations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--joint-fin);
  margin-block-start: 2.5rem;
  background: var(--filet);
  border: var(--joint-fin) solid var(--filet);
}

@media (min-width: 40rem) {
  .prestations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .prestations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.prestation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--fond-surface);
  padding: 1.75rem 1.5rem 1.9rem;
}

.prestation__numero {
  font-family: var(--police-technique);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--joint-500);
}

.prestation h3 {
  margin: 0;
}

.prestation p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.99rem;
}

/* --- Le calepinage : l'élément signature ---------------------------------- */

.calepinage {
  display: grid;
  gap: 1.75rem;
  margin-block-start: 2.5rem;
}

@media (min-width: 58rem) {
  .calepinage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 2.5rem;
  }
}

.calepinage input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.calepinage__motifs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-column: 1 / -1;
}

.calepinage__motifs label {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 2px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--fond-surface);
  color: var(--texte-doux);
  font-family: var(--police-technique);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.calepinage__motifs label:hover {
  border-color: var(--accent);
  color: var(--accent-texte);
}

.calepinage__plateau {
  margin: 0;
  border: var(--joint-fin) solid var(--filet-fort);
  background: var(--joint-200);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.calepinage__plateau svg {
  display: block;
  width: 100%;
  height: 100%;
}

.calepinage__fiche {
  align-self: center;
}

.calepinage__fiche h3 {
  margin-block-end: 0.5rem;
}

.calepinage__desc {
  display: none;
}

.calepinage__desc p {
  color: var(--texte-doux);
}

.calepinage__desc dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
  border-block-start: var(--joint-fin) solid var(--filet);
  padding-block-start: 1.1rem;
}

.calepinage__desc dt {
  font-family: var(--police-technique);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--joint-600);
  align-self: center;
}

.calepinage__desc dd {
  margin: 0;
  color: var(--texte);
}

/* Motif affiché par défaut, avant toute interaction */
.calepinage__desc--droit {
  display: block;
}

/* Chaque bouton pilote le remplissage du plateau ET la fiche technique.
   Combinateur « ~ » plutôt que :has() : les inputs sont frères du plateau,
   donc pas besoin d'une fonctionnalité plus récente que nécessaire. */
#motif-droit:checked ~ .calepinage__plateau .calepinage__sol {
  fill: url(#p-droit);
}
#motif-decale:checked ~ .calepinage__plateau .calepinage__sol {
  fill: url(#p-decale);
}
#motif-diagonale:checked ~ .calepinage__plateau .calepinage__sol {
  fill: url(#p-diagonale);
}
#motif-hongrie:checked ~ .calepinage__plateau .calepinage__sol {
  fill: url(#p-hongrie);
}
#motif-opus:checked ~ .calepinage__plateau .calepinage__sol {
  fill: url(#p-opus);
}

#motif-droit:checked ~ .calepinage__fiche .calepinage__desc--droit,
#motif-decale:checked ~ .calepinage__fiche .calepinage__desc--decale,
#motif-diagonale:checked ~ .calepinage__fiche .calepinage__desc--diagonale,
#motif-hongrie:checked ~ .calepinage__fiche .calepinage__desc--hongrie,
#motif-opus:checked ~ .calepinage__fiche .calepinage__desc--opus {
  display: block;
}

#motif-droit:checked ~ .calepinage__fiche .calepinage__desc:not(.calepinage__desc--droit),
#motif-decale:checked ~ .calepinage__fiche .calepinage__desc:not(.calepinage__desc--decale),
#motif-diagonale:checked ~ .calepinage__fiche .calepinage__desc:not(.calepinage__desc--diagonale),
#motif-hongrie:checked ~ .calepinage__fiche .calepinage__desc:not(.calepinage__desc--hongrie),
#motif-opus:checked ~ .calepinage__fiche .calepinage__desc:not(.calepinage__desc--opus) {
  display: none;
}

#motif-droit:checked ~ .calepinage__motifs label[for='motif-droit'],
#motif-decale:checked ~ .calepinage__motifs label[for='motif-decale'],
#motif-diagonale:checked ~ .calepinage__motifs label[for='motif-diagonale'],
#motif-hongrie:checked ~ .calepinage__motifs label[for='motif-hongrie'],
#motif-opus:checked ~ .calepinage__motifs label[for='motif-opus'] {
  background: var(--accent-texte);
  border-color: var(--accent-texte);
  color: #fff;
}

#motif-droit:focus-visible ~ .calepinage__motifs label[for='motif-droit'],
#motif-decale:focus-visible ~ .calepinage__motifs label[for='motif-decale'],
#motif-diagonale:focus-visible ~ .calepinage__motifs label[for='motif-diagonale'],
#motif-hongrie:focus-visible ~ .calepinage__motifs label[for='motif-hongrie'],
#motif-opus:focus-visible ~ .calepinage__motifs label[for='motif-opus'] {
  outline: 3px solid var(--faience-700);
  outline-offset: 3px;
}

/* Teintes des carreaux dans les motifs SVG */
.carreau-a {
  fill: var(--terrecuite-300);
}
.carreau-b {
  fill: var(--terrecuite-400);
}
.carreau-c {
  fill: var(--terrecuite-200);
}
.mortier {
  fill: var(--joint-300);
}

/* Les lames du point de Hongrie se touchent en pointe : le joint y est tracé
   au filet plutôt que dessiné en creux. */
.carreau-trait {
  stroke: var(--joint-300);
  stroke-width: 3;
}

/* --- Le chantier, étape par étape ----------------------------------------- */

.etapes {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: var(--joint-fin);
  background: var(--filet);
  border: var(--joint-fin) solid var(--filet);
  counter-reset: etape;
}

@media (min-width: 48rem) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.etape {
  background: var(--fond-surface);
  padding: 1.6rem 1.5rem;
  counter-increment: etape;
}

.etape::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-family: var(--police-technique);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-block-end: 0.6rem;
}

.etape h3 {
  margin-block-end: 0.4rem;
}

.etape p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.99rem;
}

/* --- Réalisations --------------------------------------------------------- */

/* Le nombre de réalisations varie au gré du client, et la dernière rangée est
   donc rarement complète. Plutôt que de laisser une case grise, le dernier
   chantier s'étire sur la place restante — avec un cadre proportionnellement
   plus large, pour que la rangée garde la même hauteur. */
.realisations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--joint-fin);
  margin-block-start: 2.5rem;
  background: var(--filet);
  border: var(--joint-fin) solid var(--filet);
}

@media (min-width: 40rem) and (max-width: 63.999rem) {
  .realisations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .realisation:last-child:nth-child(2n + 1) {
    grid-column: span 2;
  }

  .realisation:last-child:nth-child(2n + 1) img {
    aspect-ratio: 8 / 3;
  }
}

@media (min-width: 64rem) {
  .realisations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* reste 1 case : le dernier chantier prend les trois colonnes */
  .realisation:last-child:nth-child(3n + 1) {
    grid-column: span 3;
  }

  .realisation:last-child:nth-child(3n + 1) img {
    aspect-ratio: 4 / 1;
  }

  /* restent 2 cases : il en prend deux */
  .realisation:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }

  .realisation:last-child:nth-child(3n + 2) img {
    aspect-ratio: 8 / 3;
  }
}

.realisation {
  margin: 0;
  background: var(--fond-surface);
}

/* Le cadre impose le rapport : une photo de chantier arrive dans n'importe
   quelle dimension, et la page ne doit pas sauter pendant le chargement. */
.realisation img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--joint-200);
}

.realisation figcaption {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.25rem 1.25rem;
}

.realisation figcaption strong {
  font-family: var(--police-titre);
  font-weight: 700;
  font-stretch: 105%;
}

.realisation__lieu {
  font-family: var(--police-technique);
  font-size: 0.82rem;
  color: var(--texte-doux);
}

.realisations-repli {
  margin-block-start: 2rem;
  padding: 1.75rem;
  background: var(--fond-surface);
  border: var(--joint-fin) solid var(--filet-fort);
  border-inline-start: 4px solid var(--accent);
}

.realisations-repli p:last-child {
  margin-block-end: 0;
}

/* --- Zone d'intervention -------------------------------------------------- */

.zone {
  display: grid;
  gap: 2rem;
  margin-block-start: 2rem;
}

@media (min-width: 58rem) {
  .zone {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.zone__communes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zone__communes li {
  padding: 0.35rem 0.7rem;
  background: var(--fond-surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font-family: var(--police-technique);
  font-size: 0.82rem;
  color: var(--texte-doux);
}

.zone__communes li.est-base {
  background: var(--accent-doux);
  border-color: var(--terrecuite-300);
  color: var(--terrecuite-800);
}

/* --- Avis (servis par statics-worker, masqués tant qu'il n'y en a pas) ----- */

.avis-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--joint-fin);
  margin-block-start: 2rem;
  background: var(--filet);
  border: var(--joint-fin) solid var(--filet);
}

.avis-liste > * {
  background: var(--fond-surface);
  padding: 1.5rem;
}

.avis-resume {
  font-family: var(--police-technique);
  color: var(--texte-doux);
}

/* --- Contact -------------------------------------------------------------- */

.contact {
  display: grid;
  gap: 2.5rem;
  margin-block-start: 2rem;
}

@media (min-width: 58rem) {
  .contact {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

.coordonnees {
  margin: 0;
  display: grid;
  gap: 1.4rem;
}

.coordonnees dt {
  font-family: var(--police-technique);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--joint-600);
  margin-block-end: 0.25rem;
}

.coordonnees dd {
  margin: 0;
  font-size: 1.05rem;
}

.coordonnees a {
  font-weight: 600;
}

.horaires {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
  font-family: var(--police-technique);
  font-size: 0.92rem;
}

.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 22rem;
  padding-block: 0.15rem;
  border-block-end: 1px solid var(--filet);
}

.horaires .ferme {
  color: var(--joint-700); /* 6,81:1 — --joint-600 tombait à 4,36:1 sur ce fond */
}

/* Cibles tactiles : un lien de coordonnées est souvent le seul moyen de
   joindre l'artisan. On lui donne 24 px de haut minimum, sans casser le flux
   du texte. */
.coordonnees a,
.pied a,
.formulaire__mention a,
.pl-maj a {
  display: inline-block;
  padding-block: 0.3rem;
}

/* --- Formulaire ----------------------------------------------------------- */

.formulaire {
  display: grid;
  gap: 1.15rem;
  padding: 1.75rem;
  background: var(--fond-surface);
  border: var(--joint-fin) solid var(--filet-fort);
}

@media (min-width: 36rem) {
  .formulaire {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .champ--large,
  .formulaire > .formulaire__pied,
  .formulaire > .formulaire__statut {
    grid-column: 1 / -1;
  }
}

.champ {
  display: grid;
  gap: 0.35rem;
}

.champ label {
  font-family: var(--police-technique);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-tenu);
}

.champ .facultatif {
  text-transform: none;
  letter-spacing: 0;
  color: var(--joint-600);
}

.champ input,
.champ textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 2px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--joint-050);
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
}

.champ textarea {
  min-height: 8rem;
  resize: vertical;
}

.champ input:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--faience-700);
  background: var(--fond-surface);
}

.champ input:user-invalid,
.champ textarea:user-invalid,
.champ input[aria-invalid='true'],
.champ textarea[aria-invalid='true'] {
  border-color: var(--terrecuite-700);
  background: var(--terrecuite-050);
}

.champ__erreur {
  display: none;
  font-size: 0.88rem;
  color: var(--terrecuite-800);
}

.champ input:user-invalid ~ .champ__erreur,
.champ textarea:user-invalid ~ .champ__erreur,
.champ input[aria-invalid='true'] ~ .champ__erreur,
.champ textarea[aria-invalid='true'] ~ .champ__erreur {
  display: block;
}

.formulaire__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.formulaire__mention {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texte-doux);
  max-width: 40ch;
}

.formulaire__statut:not(:empty) {
  padding: 0.85rem 1rem;
  border-inline-start: 4px solid var(--accent);
  background: var(--accent-doux);
  color: var(--terrecuite-900);
  font-size: 0.95rem;
}

/* Champ-piège anti-robot : jamais visible, jamais atteignable au clavier */
.appat {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Barre d'appel collante (mobile) -------------------------------------- */

.appel-mobile {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 50;
  display: flex;
  gap: var(--joint-fin);
  padding: 0.55rem;
  background: color-mix(in srgb, var(--joint-050) 94%, transparent);
  backdrop-filter: blur(8px);
  border-block-start: var(--joint-fin) solid var(--filet-fort);
}

.appel-mobile .bouton {
  flex: 1;
  justify-content: center;
}

@media (min-width: 62rem) {
  .appel-mobile {
    display: none;
  }
}

body {
  /* la barre ne doit jamais recouvrir la fin du pied de page */
  padding-block-end: 4.5rem;
}

@media (min-width: 62rem) {
  body {
    padding-block-end: 0;
  }
}

/* --- Pied de page --------------------------------------------------------- */

.pied {
  background: var(--fond-profond);
  color: var(--joint-300);
  padding-block: 3rem 2.5rem;
  font-size: 0.95rem;
}

.pied__bloc {
  display: grid;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .pied__bloc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pied__logo {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  margin-block-end: 1rem;
  /* Le losange du logo est noir : sur le fond presque noir du pied de page,
     il disparaîtrait. Une plaque claire lui rend sa silhouette. */
  padding: 0.4rem;
  background: var(--joint-050);
}

.pied h2 {
  font-size: 0.8rem;
  font-family: var(--police-technique);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--joint-400);
  margin-block-end: 0.9rem;
}

.pied a {
  color: var(--terrecuite-300);
}

.pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.pied__legal {
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--joint-800);
  font-family: var(--police-technique);
  font-size: 0.78rem;
  color: var(--joint-500);
}

.pied__legal p {
  margin: 0 0 0.3rem;
  max-width: none;
}

/* --- Mouvement : une seule intention, discrète ---------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .revele {
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }

    @keyframes apparition {
      from {
        opacity: 0;
        transform: translateY(1.25rem);
      }
    }
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}