/* Structure et mise en forme. AUCUNE couleur littérale ici : tout vient des
   tokens générés (assets/tokens.css). Les nuances intermédiaires sont
   composées avec color-mix() à partir des cinq rôles. */

:root {
  --pas: 8px;
  --largeur-max: 72rem;
  --largeur-texte: 42rem;
  --rayon: 14px;
  --rayon-petit: 8px;
  --respire: clamp(3.25rem, 5.5vw, 5.25rem);
  --ombre: 0 1px 2px color-mix(in srgb, var(--texte) 8%, transparent),
           0 12px 28px -12px color-mix(in srgb, var(--texte) 22%, transparent);
  --ombre-forte: 0 2px 4px color-mix(in srgb, var(--texte) 10%, transparent),
                 0 24px 48px -18px color-mix(in srgb, var(--texte) 32%, transparent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fond-site);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.enveloppe { max-width: var(--largeur-max); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem); }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); overflow-wrap: anywhere; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); overflow-wrap: anywhere; }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
p, li, figcaption { overflow-wrap: anywhere; }

a { color: var(--soulignage); text-underline-offset: .18em; }
:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--soulignage);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- boutons ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(var(--pas) * 1.6) calc(var(--pas) * 3.2);
  background: var(--soulignage); color: var(--texte-sur-soulignage);
  border: 2px solid var(--soulignage); border-radius: 999px;
  text-decoration: none; font-weight: 650; letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.bouton--grand { padding: calc(var(--pas) * 2) calc(var(--pas) * 4); font-size: 1.05rem; }
.bouton--fantome {
  background: transparent; color: var(--texte);
  border-color: color-mix(in srgb, var(--texte) 28%, transparent);
}
.bouton--inverse {
  background: var(--fond-site); color: var(--soulignage); border-color: var(--fond-site);
}
button.bouton { cursor: pointer; font-family: inherit; }

/* ---------- en-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fond-site) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet);
}
.barre {
  display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2);
  align-items: center; justify-content: space-between;
  padding-top: calc(var(--pas) * 1.75); padding-bottom: calc(var(--pas) * 1.75);
}
.marque {
  display: inline-flex; align-items: center; gap: calc(var(--pas) * 1.25);
  font-family: var(--police-titre); font-size: 1.2rem; font-weight: 700;
  letter-spacing: -0.015em; text-decoration: none; color: var(--texte);
}
.logo { height: 42px; width: auto; border-radius: var(--rayon-petit); }
.initiales {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--rayon-petit);
  background: var(--soulignage); color: var(--texte-sur-soulignage); font-weight: 700;
}
.entete nav { display: flex; gap: calc(var(--pas) * 2.5); flex-wrap: wrap; }
.entete nav a {
  color: var(--texte-doux); text-decoration: none; font-weight: 550; font-size: .97rem;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.entete nav a:hover { color: var(--texte); border-bottom-color: var(--soulignage); }
.actions { display: flex; gap: calc(var(--pas) * 1.5); align-items: center; }
.tel { font-weight: 650; text-decoration: none; color: var(--texte); white-space: nowrap; }
@media (max-width: 60rem) { .entete nav, .tel { display: none; } }

/* ---------- bandeau d'accueil ---------- */

.hero { position: relative; padding: var(--respire) 0; overflow: hidden; }
.hero__corps { position: relative; z-index: 2; max-width: 54rem; }
.hero__sur {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 650; color: var(--soulignage); margin: 0 0 calc(var(--pas) * 2);
}
.hero .chapeau {
  font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--texte-doux);
  max-width: var(--largeur-texte); margin: calc(var(--pas) * 2.5) 0 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2); margin-top: calc(var(--pas) * 4.5); }

/* Bandeau avec photo : le texte passe en clair sur un voile sombre,
   dont l'opacité est calculée pour rester lisible sur n'importe quelle image. */
.hero--image { padding: calc(var(--respire) * 1.5) 0; min-height: 32rem; display: flex; align-items: center; }
.hero--image .hero__fond { position: absolute; inset: 0; z-index: 0; }
.hero--image .hero__fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--image .hero__fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--texte) 78%, transparent) 0%,
    color-mix(in srgb, var(--texte) 52%, transparent) 42%,
    color-mix(in srgb, var(--texte) 18%, transparent) 100%);
}
.hero--image .hero__corps, .hero--image h1 { color: var(--fond-site); }
.hero--image .hero__sur { color: color-mix(in srgb, var(--fond-site) 82%, var(--soulignage)); }
.hero--image .chapeau { color: color-mix(in srgb, var(--fond-site) 88%, transparent); }
.hero--image .bouton--fantome {
  color: var(--fond-site); border-color: color-mix(in srgb, var(--fond-site) 55%, transparent);
}

/* ---------- sections ---------- */

section { padding: var(--respire) 0; }
.section__titre { margin-bottom: calc(var(--pas) * 4); }
.section__titre--clair { color: var(--texte-sur-soulignage); }
.section__intro { color: var(--texte-doux); max-width: var(--largeur-texte); margin: calc(var(--pas) * -3) 0 calc(var(--pas) * 4); }
.services { background: var(--fond-bloc); }

.grille { display: grid; gap: calc(var(--pas) * 3); }
.grille--services { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.carte {
  background: var(--fond-site); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: calc(var(--pas) * 4); margin: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.carte--service:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: color-mix(in srgb, var(--soulignage) 40%, var(--filet)); }
.carte h3 { margin-bottom: calc(var(--pas) * 1.5); }
.carte p { color: var(--texte-doux); margin: 0; }
.carte__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--rayon-petit);
  background: color-mix(in srgb, var(--soulignage) 12%, var(--fond-site));
  color: var(--soulignage); margin-bottom: calc(var(--pas) * 2.5);
}

/* ---------- chiffres ---------- */

.bandeau-chiffres { background: var(--soulignage); color: var(--texte-sur-soulignage); padding: calc(var(--respire) * .8) 0; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: calc(var(--pas) * 4); }
.chiffre { display: flex; flex-direction: column; gap: calc(var(--pas) * .5); }
.valeur {
  font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.libelle { color: color-mix(in srgb, var(--texte-sur-soulignage) 78%, transparent); font-size: .98rem; }

/* ---------- réalisations ---------- */

.grille--galerie { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.realisation {
  margin: 0; border-radius: var(--rayon); overflow: hidden;
  background: var(--fond-bloc); border: 1px solid var(--filet);
}
.realisation img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.realisation figcaption { display: block; padding: calc(var(--pas) * 2.5) calc(var(--pas) * 3); }
.realisation figcaption strong { display: block; font-family: var(--police-titre); font-size: 1.1rem; }
.realisation figcaption span { display: block; color: var(--texte-doux); font-size: .95rem; margin-top: calc(var(--pas) * .75); }
@media (min-width: 60rem) {
  .grille--galerie { grid-template-columns: repeat(3, 1fr); }
  .realisation--large { grid-column: span 2; grid-row: span 2; }
  .realisation--large img { aspect-ratio: 16 / 11; height: auto; }
}

/* ---------- zone d'intervention ---------- */

.zone { background: var(--fond-bloc); }
.villes, .labels { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 1.25); }
.villes li {
  background: var(--fond-site); border: 1px solid var(--filet); border-radius: 999px;
  padding: calc(var(--pas) * .9) calc(var(--pas) * 2.25); font-weight: 550;
}
.labels li { display: flex; align-items: center; gap: var(--pas); background: var(--fond-bloc); border: 1px solid var(--filet); border-radius: 999px; padding: calc(var(--pas)) calc(var(--pas) * 2.25); }
.labels img { max-height: 44px; width: auto; }

/* ---------- relance ---------- */

.relance { background: var(--soulignage); color: var(--texte-sur-soulignage); text-align: center; }
.relance__corps { display: flex; flex-direction: column; align-items: center; }
.relance h2 { color: var(--texte-sur-soulignage); max-width: 28ch; }
.relance .hero__actions { justify-content: center; margin-top: calc(var(--pas) * 4); }

/* ---------- prose et formulaire ---------- */

.prose { max-width: var(--largeur-texte); }
.prose p { color: var(--texte-doux); font-size: 1.1rem; }
.prose img { width: 100%; border-radius: var(--rayon); margin-top: calc(var(--pas) * 4); }

label { display: block; margin-bottom: calc(var(--pas) * .75); font-weight: 600; font-size: .95rem; }
input, textarea {
  width: 100%; max-width: 36rem; padding: calc(var(--pas) * 1.75);
  border: 1px solid var(--filet); border-radius: var(--rayon-petit);
  font: inherit; margin-bottom: calc(var(--pas) * 2.5);
  background: var(--fond-site); color: var(--texte);
}
input:focus, textarea:focus { border-color: var(--soulignage); }
.pot-de-miel { position: absolute; left: -9999px; }

/* ---------- pied ---------- */

.pied {
  background: color-mix(in srgb, var(--texte) 96%, var(--soulignage));
  color: color-mix(in srgb, var(--fond-site) 86%, transparent);
  font-size: .95rem;
}
.pied a { color: var(--fond-site); }
.pied strong { color: var(--fond-site); }

/* Carte de service illustrée : la photo prend le haut, le texte respire en
   dessous. Sans photo, la carte garde son icône — elle ne reste jamais vide. */
.carte--illustree { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.carte--illustree .carte__corps { padding: calc(var(--pas) * 3.5); }
.carte:not(.carte--illustree) .carte__corps { display: contents; }

/* ---------- pied de page ---------- */

.pied__corps {
  padding-top: calc(var(--pas) * 7);
  padding-bottom: calc(var(--pas) * 7);
  display: grid;
  gap: calc(var(--pas) * 5);
}
/* Deux blocs : l'identité à gauche, les liens à droite. La colonne de droite
   se dimensionne sur son contenu — une grille automatique laissait les blocs
   flotter sans alignement. */
@media (min-width: 48rem) {
  .pied__corps { grid-template-columns: 1fr auto; align-items: start; }
  .pied__liens { text-align: right; }
}
.pied__identite p { margin: 0 0 calc(var(--pas) * 2); }
.pied__identite p:last-child { margin-bottom: 0; }
.pied__nom { font-family: var(--police-titre); font-size: 1.15rem; }
.pied__horaires { color: color-mix(in srgb, var(--fond-site) 62%, transparent); }

.pied__liens ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 1.5);
}
/* Pas de soulignement : dans une liste où tout est lien, le trait n'apprend
   rien et alourdit. L'état survolé se marque par le contraste. */
.pied a { text-decoration: none; }
.pied__liens a { color: color-mix(in srgb, var(--fond-site) 74%, transparent); }
.pied__liens a:hover { color: var(--fond-site); }

/* ═══ STRUCTURE « ASYMÉTRIQUE » ═══
   Rien n'est centré, rien n'a la même largeur. Les cartes sont décalées les
   unes par rapport aux autres, la galerie remonte sur la section précédente.
   Un parti pris de studio, qui suppose d'assumer un peu de désordre —
   à réserver aux clients qui veulent qu'on les remarque. */

.enveloppe { max-width: 78rem; }
.hero__corps { max-width: 40rem; margin-left: 0; }
.hero--image { min-height: 34rem; }

.grille--services { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; gap: calc(var(--pas) * 3); }
/* Décalage vertical progressif : la lecture zigzague au lieu de s'aligner. */
.grille--services > :nth-child(2) { transform: translateY(clamp(1rem, 4vw, 3.5rem)); }
.grille--services > :nth-child(3) { transform: translateY(clamp(2rem, 8vw, 7rem)); }
@media (max-width: 56rem) { .grille--services > * { transform: none !important; } }

.carte { border-radius: 2px 22px 2px 22px; }
.carte__photo { border-radius: 0; }

/* La galerie mord sur la section du dessus. */
.galerie { padding-top: 0; margin-top: calc(var(--respire) * -0.5); }
.grille--galerie { grid-template-columns: repeat(6, 1fr); gap: calc(var(--pas) * 2); }
.realisation { grid-column: span 3; border-radius: 2px 22px 2px 22px; }
.realisation:nth-child(1) { grid-column: span 4; }
.realisation:nth-child(2) { grid-column: span 2; margin-top: calc(var(--pas) * 5); }
.realisation:nth-child(3) { grid-column: span 2; }
@media (max-width: 56rem) { .realisation, .realisation:nth-child(n) { grid-column: span 6; margin-top: 0; } }

.section__titre { max-width: 22ch; }
.bandeau-chiffres .enveloppe { display: flex; justify-content: flex-end; }
.chiffres { max-width: 46rem; }