/* base.css : structure commune à tous les thèmes.
   Les thèmes fournissent les variables (--bg, --ink, --accent, --font-display…)
   et peuvent surcharger librement les composants. */

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

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

h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: var(--poids-titre, 700); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: var(--poids-titre, 700); margin-bottom: 0.9em; }
h3 { font-size: 1.18rem; margin-bottom: 0.35em; }

.section-inner { max-width: 1160px; margin: 0 auto; padding: clamp(64px, 9vw, 110px) 24px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg, var(--bg));
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1160px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { text-decoration: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Les logos arrivent dans tous les formats : bandeau horizontal, carré, empilé.
   On borne la hauteur ET la largeur pour qu'aucun ne domine ni ne devienne illisible. */
.brand-logo {
  height: clamp(46px, 5.4vw, 56px); width: auto;
  max-width: min(240px, 46vw); object-fit: contain;
}
.brand-name {
  font-family: var(--font-display); font-weight: var(--poids-titre, 700);
  font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-tel {
  font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--accent-fonce, var(--accent));
}

/* ---------- boutons ---------- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 14px 26px; border-radius: var(--radius, 4px);
  border: 2px solid transparent; cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
.btn-plein { background: var(--accent); color: var(--sur-accent, #fff); }
.btn-plein:hover { filter: brightness(1.08); }
.btn-contour { border-color: currentColor; background: transparent; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- héro : plein ---------- */
.hero-plein { position: relative; min-height: min(88vh, 780px); display: flex; align-items: flex-end; }
.hero-plein .hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-plein .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% var(--hero-cadrage, 50%);
}
.hero-plein .hero-voile {
  position: absolute; inset: 0;
  background: var(--hero-voile, linear-gradient(to top, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.25) 45%, rgba(10,10,10,0.05) 100%));
}
.hero-plein .hero-contenu {
  position: relative; max-width: 1160px; width: 100%; margin: 0 auto;
  padding: 72px 24px 64px; color: var(--hero-ink, #fff);
}
.hero-plein h1 { max-width: 15ch; }
.hero-plein .hero-sous { margin-top: 14px; max-width: 52ch; font-size: 1.12rem; opacity: 0.94; }

.hero-metier {
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 16px; color: var(--metier-ink, inherit);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- héro : scindé ----------
   La hauteur est fixée par la colonne de texte, JAMAIS par la photo. La photo est
   détachée du flux (position absolue) puis recadrée : sans cela, une photo verticale
   (portrait du dirigeant) étirerait le héro sur 1500 px et repousserait tout le contenu. */
.hero-scinde {
  display: grid; grid-template-columns: 1.05fr 1fr;
  min-height: min(78vh, 660px);
  max-height: 760px;
}
.hero-scinde .hero-texte {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 5.5vw, 80px);
  min-width: 0;
}
/* colonne deux fois plus étroite que la page : le titre se cale dessus */
.hero-scinde h1 { font-size: clamp(1.9rem, 3.3vw, 3rem); }
.hero-scinde .hero-sous { margin-top: 16px; max-width: 48ch; font-size: 1.1rem; color: var(--muted); }
.hero-scinde .hero-photo { position: relative; overflow: hidden; min-height: 340px; }
.hero-scinde .hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% var(--hero-cadrage, 20%);
}

/* ---------- héro : photo montrée en entier ----------
   Classe posée par build.js dans deux cas : photo plus haute que large, ou photo de
   l'artisan marquée à la planche contact (quel que soit son format).
   Deux pièges, évités ici : la recadrer dans un panneau paysage lui coupe la tête ou
   le buste ; la poser en entier DANS ce panneau laisse deux bandes vides autour
   d'elle. La solution n'est pas de corriger la photo, c'est de changer de contenant :
   le héro devient un bloc centré comme le reste de la page, et la photo devient une
   carte au format exact du fichier (--hero-ratio). Rien n'est coupé, rien n'est vide.
   Le format du contenant suit la photo, jamais l'inverse. */
.hero-scinde.hero-photo-entiere {
  display: flex; align-items: center;
  gap: clamp(32px, 4.5vw, 72px);
  max-width: 1160px; margin: 0 auto;
  padding: clamp(44px, 6vw, 88px) 24px;
  min-height: 0; max-height: none;
}
.hero-scinde.hero-photo-entiere .hero-texte { flex: 1 1 auto; min-width: 0; padding: 0; }
/* Face à une carte verticale, un titre en pavé étroit et haut fait bloc avec elle ;
   étalé sur toute la colonne il laisserait un trou blanc au milieu du héro. */
.hero-scinde.hero-photo-entiere h1 { max-width: 14ch; }
.hero-scinde.hero-photo-entiere .hero-sous { max-width: 34ch; }
/* La hauteur de la carte est décidée ici, jamais par les pixels du fichier : sans ce
   plafond une photo de 1700 px de haut repousserait les boutons d'appel sous la ligne
   de flottaison. La largeur en découle par le ratio, donc aucun recadrage. */
.hero-photo-entiere .hero-photo {
  flex: 0 0 auto;
  position: relative; overflow: hidden;
  min-height: 0;
  height: clamp(360px, 66vh, 600px);
  aspect-ratio: var(--hero-ratio, 0.7);
  width: auto;
  border-radius: var(--radius-photo, 22px);
  box-shadow: 0 10px 30px rgba(16, 20, 26, 0.11);
}
.hero-photo-entiere .hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Photo entière PLUS LARGE QUE HAUTE (artisan devant sa camionnette, équipe en pied).
   Elle se pilote par sa largeur : réglée en hauteur comme une verticale, la carte
   s'étalerait sur 900 px et écraserait la colonne de texte contre le bord. */
.hero-photo-entiere.hero-photo-large .hero-photo {
  height: auto;
  width: min(52%, 620px);
}
.hero-scinde.hero-photo-entiere.hero-photo-large h1 { max-width: 18ch; }
.hero-scinde.hero-photo-entiere.hero-photo-large .hero-sous { max-width: 42ch; }
/* Le nom de l'artisan posé sur sa photo : c'est ce qui transforme une image en personne
   à qui l'on parle. Écrit seulement si le client a donné son prénom (hero.personne). */
.hero-photo .hero-personne {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  margin: 0; padding: 42px 20px 16px;
  background: linear-gradient(to top, rgba(12, 14, 17, 0.74) 0%, rgba(12, 14, 17, 0.36) 55%, rgba(12, 14, 17, 0) 100%);
  color: #fff; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ---------- héro : bandeau ---------- */
.hero-bandeau .hero-texte { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 24px clamp(36px, 4vw, 56px); }
.hero-bandeau h1 { max-width: 22ch; }
.hero-bandeau .hero-ligne {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-top: 20px;
}
.hero-bandeau .hero-sous { max-width: 46ch; font-size: 1.1rem; color: var(--muted); }
.hero-bandeau .hero-actions { margin-top: 0; }
.hero-bandeau .hero-photo { position: relative; overflow: hidden; height: min(56vh, 520px); }
.hero-bandeau .hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% var(--hero-cadrage, 20%);
}

/* ---------- héro : sobre (aucune photo) ----------
   Pour les clients sans photo de chantier. Le fond profond et la typographie tiennent
   la page : c'est un parti pris, pas un manque. */
.hero-sobre {
  background: var(--sobre-bg, var(--ink));
  color: var(--sobre-ink, var(--bg));
  position: relative;
  overflow: hidden;
}
.hero-sobre::after {
  content: ""; position: absolute; right: -12%; top: -35%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 68%);
  pointer-events: none;
}
.hero-sobre .hero-contenu {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto;
  padding: clamp(72px, 12vw, 150px) 24px clamp(56px, 9vw, 110px);
}
.hero-sobre h1 { max-width: 17ch; }
.hero-sobre .hero-metier { color: var(--sobre-accent, var(--accent)); }
.hero-sobre .hero-sous {
  margin-top: 18px; max-width: 54ch; font-size: 1.15rem;
  color: color-mix(in srgb, var(--sobre-ink, var(--bg)) 78%, transparent);
}
.hero-sobre .btn-contour { color: var(--sobre-ink, var(--bg)); }
.hero-zone {
  display: flex; flex-wrap: wrap; gap: 8px 0;
  margin-top: clamp(36px, 6vw, 60px);
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--sobre-ink, var(--bg)) 22%, transparent);
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--sobre-ink, var(--bg)) 68%, transparent);
}
.hero-zone span + span::before {
  content: "·"; margin: 0 12px; color: var(--sobre-accent, var(--accent));
}

/* ---------- engagements (sans image) ---------- */
.engagements { background: var(--engagements-bg, var(--surface-2, transparent)); }
.engagements-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 4vw, 48px);
}
.engagement { padding-top: 18px; border-top: 2px solid var(--accent); }
.engagement h3 { margin-bottom: 8px; }
.engagement p { color: var(--muted); }

/* ---------- services : version sans photo ----------
   Numérotation discrète pour donner du rythme quand aucune image ne le fait. */
.services-sans-photo .service {
  grid-template-columns: 64px 1fr;
  align-items: start;
  padding: clamp(24px, 3vw, 34px) 0;
}
.services-sans-photo .service::before {
  content: counter(service, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1rem; font-weight: var(--poids-titre, 700);
  color: var(--accent); padding-top: 3px;
}
.services-sans-photo .services-liste { counter-reset: service; }
.services-sans-photo .service { counter-increment: service; }
.services-sans-photo .service-texte p { max-width: 62ch; }

/* ---------- services ---------- */
.services { background: var(--services-bg, transparent); }
.services-liste { display: grid; gap: 0; }
.service {
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(20px, 4vw, 48px);
  padding: 30px 0; border-top: 1px solid var(--line); align-items: center;
}
.service:last-child { border-bottom: 1px solid var(--line); }
.service-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-img, 0); }
.service:not(:has(.service-photo)) { grid-template-columns: 1fr; }
.service-texte p { color: var(--muted); max-width: 68ch; }

/* ---------- galerie mosaïque ---------- */
.mosaique { columns: 3 300px; column-gap: 18px; }
.mosaique figure { break-inside: avoid; margin-bottom: 18px; }
.mosaique img { width: 100%; border-radius: var(--radius-img, 0); cursor: zoom-in; }

/* ---------- galerie rangées ---------- */
.rangees { display: flex; flex-wrap: wrap; gap: 14px; }
.rangees figure {
  flex-grow: var(--ratio, 1); flex-basis: calc(var(--ratio, 1) * 240px);
  min-width: 200px; max-width: calc(var(--ratio, 1) * 460px);
}
.rangees img { width: 100%; aspect-ratio: var(--ratio, 4/3); object-fit: cover; border-radius: var(--radius-img, 0); cursor: zoom-in; }

figcaption { font-size: 0.85rem; color: var(--muted); padding-top: 7px; }

/* ---------- avant / après ---------- */
/* Deux photos du même chantier, côte à côte et à la même taille : c'est le rapprochement
   qui vend, pas la photo. Elles restent côte à côte sur téléphone aussi, les empiler
   obligerait à faire défiler entre les deux et la comparaison serait perdue. */
.avant-apres { background: var(--avant-apres-bg, var(--surface, transparent)); }
.duos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 3.2vw, 40px); }
.duo-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.duo-vue { position: relative; overflow: hidden; }
.duo-vue img {
  width: 100%; aspect-ratio: var(--ratio, 0.75); object-fit: cover;
  border-radius: var(--radius-img, 0); cursor: zoom-in;
}
.duo-etiquette {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-weight: var(--poids-titre, 700);
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 11px; background: rgba(18, 20, 23, 0.86); color: #fff;
}
.duo-vue-apres .duo-etiquette { background: var(--accent); color: var(--sur-accent, #fff); }
.duo figcaption { padding-top: 10px; }

/* ---------- à propos ---------- */
.apropos { background: var(--apropos-bg, transparent); }
.apropos-inner { display: grid; grid-template-columns: 380px 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.apropos-photo-droite .apropos-inner { grid-template-columns: 1fr 380px; }
.apropos-photo-droite .apropos-photo { order: 2; }
.apropos-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-img, 0); }
.apropos-texte p { margin-bottom: 1em; max-width: 60ch; }
.apropos-inner:not(:has(.apropos-photo)) { grid-template-columns: 1fr; }

/* ---------- zone ---------- */
.zone .section-inner { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.zone-phrase { color: var(--muted); max-width: 62ch; margin-bottom: 20px; }
.zone-villes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; font-weight: 600; }
.zone-villes li { display: flex; align-items: center; }
.zone-villes li + li::before { content: "·"; margin: 0 14px; color: var(--accent); font-weight: 700; }

/* ---------- avis ---------- */
.avis-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.avis-item { border-left: 3px solid var(--accent); padding-left: 20px; }
.avis-item p { font-size: 1.05rem; margin-bottom: 10px; }
.avis-item cite { font-style: normal; color: var(--muted); font-size: 0.9rem; }

/* ---------- contact ---------- */
.contact { background: var(--contact-bg, transparent); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); }
.contact-accroche { color: var(--muted); max-width: 40ch; }
.contact-tel {
  display: inline-block; margin: 22px 0 6px;
  font-family: var(--font-display); font-weight: var(--poids-titre, 700);
  font-size: clamp(1.7rem, 4vw, 2.6rem); text-decoration: none;
  color: var(--accent-fonce, var(--accent));
}
.contact-email a { color: var(--muted); }
.contact-horaires, .contact-adresse { color: var(--muted); margin-top: 10px; font-size: 0.95rem; }

.contact-form { display: grid; gap: 14px; align-content: start; }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.92rem; }
.contact-form input, .contact-form textarea {
  font: inherit; padding: 12px 14px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius, 4px);
  background: var(--champ-bg, var(--bg)); color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.contact-form .hp { position: absolute; left: -9999px; }
.champ-option { font-weight: 400; color: var(--muted); font-size: 0.85em; }
.form-etat { font-weight: 600; }
.form-rgpd { font-size: 0.78rem; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--footer-bg, transparent); }
.footer-inner {
  max-width: 1160px; margin: 0 auto; padding: 36px 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;
  font-size: 0.9rem; color: var(--muted);
}
.footer-nap { display: grid; gap: 4px; }
.footer-nap strong { color: var(--ink); }
.footer-nap a { color: inherit; }
.footer-liens { display: grid; gap: 6px; align-content: start; text-align: right; }
.footer-liens a { color: inherit; }
.footer-credit { font-size: 0.82rem; opacity: 0.75; transition: opacity 0.2s ease, color 0.2s ease; }
.footer-credit:hover { opacity: 1; color: var(--accent-fonce, var(--accent)); }

@media (max-width: 560px) {
  .footer-liens { text-align: left; }
}

/* ---------- galerie bandeau défilant ---------- */
.galerie-bandeau .galerie-bandeau-titre { padding-bottom: 30px; }
.bandeau { overflow: hidden; padding-bottom: clamp(56px, 8vw, 100px); }
.bandeau-piste { display: flex; width: max-content; padding-left: 24px; }
.bandeau figure { flex: none; margin-right: 18px; }
.bandeau img {
  height: clamp(220px, 30vw, 320px); width: auto;
  border-radius: var(--radius-img, 0); cursor: zoom-in;
}
.bandeau-piste.anime { animation: defile linear infinite; }
.bandeau:hover .bandeau-piste.anime,
.bandeau:focus-within .bandeau-piste.anime { animation-play-state: paused; }
@keyframes defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau { overflow-x: auto; }
  .bandeau-piste.anime { animation: none; }
}

/* ---------- mouvement : entrée du héro (CSS pur, une seule fois) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-metier, .hero h1, .hero .hero-sous, .hero .hero-actions {
    animation: hero-entre 0.85s cubic-bezier(0.2, 0.65, 0.25, 1) both;
  }
  .hero h1 { animation-delay: 0.08s; }
  .hero .hero-sous { animation-delay: 0.16s; }
  .hero .hero-actions { animation-delay: 0.26s; }
  .hero-plein .hero-media img, .hero-scinde .hero-photo img, .hero-bandeau .hero-photo img {
    animation: hero-zoom 1.5s ease-out both;
  }
}
@keyframes hero-entre {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-zoom {
  from { transform: scale(1.05); }
  to { transform: none; }
}

/* ---------- mouvement : apparitions au défilement (classes posées par site.js) ---------- */
.rv {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--vitesse-reveal, 0.6s) ease, transform var(--vitesse-reveal, 0.6s) ease;
}
.rv-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- micro-interactions ---------- */
.site-header { transition: box-shadow 0.25s ease; }
.site-header.scrolle { box-shadow: 0 2px 16px rgba(20, 15, 8, 0.09); }
.btn { transition: filter 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 15, 8, 0.14); }
.mosaique img, .rangees img, .bandeau img, .service-photo img, .duo-vue img {
  transition: transform 0.5s ease;
}
.mosaique figure:hover img, .rangees figure:hover img,
.bandeau figure:hover img, .service:hover .service-photo img,
.duo-vue:hover img {
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .mosaique figure:hover img, .rangees figure:hover img,
  .bandeau figure:hover img, .service:hover .service-photo img,
  .duo-vue:hover img { transform: none; }
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 8, 8, 0.92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 90vh; }
.lightbox-fermer {
  position: absolute; top: 14px; right: 20px;
  font-size: 2.2rem; line-height: 1; color: #fff;
  background: none; border: none; cursor: pointer;
}

/* ---------- responsive ---------- */
/* RÈGLE MOBILE INTANGIBLE : à l'ouverture, le visiteur doit voir le titre ET le bouton
   d'appel sans faire défiler. Une photo de héro ne passe donc jamais avant le texte,
   et sa hauteur est toujours plafonnée. Ne pas assouplir sans revérifier sur 375x812. */
@media (max-width: 960px) {
  /* Ordre mobile : accroche, titre, sous-titre, PHOTO, puis boutons d'appel.
     La photo se voit immédiatement, et le bouton d'appel reste le dernier élément lu,
     juste avant le geste d'appeler. `display: contents` fait remonter les enfants de la
     colonne de texte au niveau du héro, seule façon d'intercaler la photo entre eux. */
  .hero-scinde { display: flex; flex-direction: column; min-height: 0; max-height: none; }
  .hero-scinde .hero-texte { display: contents; }
  .hero-scinde .hero-metier { order: 1; padding: clamp(22px, 5vw, 36px) 24px 0; }
  .hero-scinde h1 { order: 2; padding: 0 24px; }
  .hero-scinde .hero-sous { order: 3; padding: 0 24px; }
  .hero-scinde .hero-photo {
    order: 4; min-height: 0; height: 28vh; max-height: 250px;
    margin-top: clamp(18px, 4vw, 28px);
  }
  /* La bande mobile est bien plus courte que le panneau de bureau : le même point
     d'ancrage y couperait le visage. On vise le centre haut, là où sont les visages. */
  .hero-scinde .hero-photo img, .hero-bandeau .hero-photo img {
    object-position: 50% var(--hero-cadrage-mobile, 32%);
  }
  .hero-scinde .hero-actions {
    order: 5; padding: 0 24px clamp(24px, 5vw, 36px);
    margin-top: clamp(18px, 4vw, 26px);
  }

  /* Verticale sur téléphone : la carte prend toute la largeur utile. Le portrait du
     dirigeant est l'argument de confiance no 1, il passe donc avant le fait de voir le
     bouton d'appel sans faire défiler : on l'atteint d'un pouce, il n'a pas à être
     visible d'emblée. Seul garde-fou, la hauteur plafonne à 66vh pour qu'une photo
     très étroite ne remplisse pas l'écran entier. */
  .hero-scinde.hero-photo-entiere {
    align-items: stretch; gap: 0;
    max-width: none; margin: 0; padding: 0;
  }
  /* le pavé étroit n'a plus de sens dans une colonne unique : il ajouterait une ligne
     de titre, donc 70 px de moins pour la photo et le bouton d'appel */
  .hero-scinde.hero-photo-entiere h1 { max-width: none; }
  .hero-scinde.hero-photo-entiere .hero-photo {
    align-self: center;
    width: min(100% - 48px, calc(66vh * var(--hero-ratio, 0.7)));
    height: auto; max-height: none;
    margin: clamp(18px, 4vw, 28px) 0 0;
  }

  .hero-bandeau .hero-photo { height: min(34vh, 280px); }
  .apropos-inner, .apropos-photo-droite .apropos-inner { grid-template-columns: 1fr; }
  .apropos-photo-droite .apropos-photo { order: 0; }
  .apropos-photo img { aspect-ratio: 16 / 10; }
  .contact-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .service, .service:not(:has(.service-photo)) { grid-template-columns: 1fr; gap: 14px; }
  .services-sans-photo .service { grid-template-columns: 1fr; gap: 6px; }
  .service-photo img { aspect-ratio: 16 / 9; }
  .mosaique { columns: 2 160px; column-gap: 12px; }
  .mosaique figure { margin-bottom: 12px; }
  .header-tel span { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }

  /* Budget du premier écran sur téléphone : titre, sous-titre, boutons ET photo
     doivent tenir ensemble. C'est pour ça que le titre est plafonné ici, quel que
     soit le thème, et que les marges sont resserrées. */
  .hero h1 { font-size: clamp(1.75rem, 8.2vw, 2.15rem); line-height: 1.14; }
  .hero .hero-metier { font-size: 0.78rem; margin-bottom: 10px; }
  .hero .hero-sous { font-size: 1rem; margin-top: 12px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 9px; }
  .hero-plein .hero-actions, .hero-bandeau .hero-actions, .hero-sobre .hero-actions { margin-top: 20px; }
  .btn { padding: 13px 20px; font-size: 0.95rem; }

  /* héro plein écran : le texte est superposé, on réduit la hauteur pour que les
     boutons d'appel restent dans le premier écran */
  .hero-plein { min-height: min(70vh, 560px); }
  .hero-plein .hero-contenu { padding: 44px 24px 32px; }
  .hero-scinde .hero-photo { height: 26vh; max-height: 220px; }
  .hero-bandeau .hero-texte { padding-top: 32px; padding-bottom: 24px; }
  .header-inner { padding: 9px 20px; }
}