@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/manrope-normal-400-700-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/manrope-normal-400-700-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Bat Pro Rénov' — feuille de styles
   1. Variables et base   2. Composants communs   3. Sections
   4. Visionneuse, modales, barre mobile   5. Mouvement réduit
   Points de rupture : 1025 px (ordinateur), 768 px (tablette), 600 px (téléphone)
   ============================================================ */

/* ---------- 1. Variables et base ---------- */
:root {
  /* Charte */
  --violet:       #7B3586;
  --violet-clair: #B07BC4;
  --encre:        #1E2A38;
  --texte:        #5A6070;
  --noir:         #1A1A1D;
  --gris-fond:    #F5F5F7;
  --blanc:        #FFFFFF;
  /* Dérivées de la charte */
  --violet-fonce: #652B6E;
  --filet:        #E4E4EA;
  --erreur:       #B3261E;

  --police:     'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1280px;
  --gouttiere: clamp(20px, 4vw, 40px);
  --hdr-h: 64px;
  --rayon: 10px;
  --ombre: 0 6px 24px rgba(30,42,56,0.07);
}
@media (min-width:1025px) { :root { --hdr-h: 76px; } }

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--police); font-size:16px; line-height:1.6; color:var(--texte); background:var(--blanc); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
[hidden] { display:none !important; }
img { display:block; max-width:100%; }
h1, h2, h3, p, figure, blockquote { margin:0; }
ul { margin:0; padding:0; list-style:none; }
a { color:var(--violet); }
button, input, textarea { font:inherit; }
::selection { background:var(--violet); color:var(--blanc); }
:focus:not(:focus-visible) { outline:none; }
:focus-visible { outline:3px solid var(--violet); outline-offset:3px; }
.sombre :focus-visible { outline-color:var(--violet-clair); }
section[id] { scroll-margin-top:var(--hdr-h); }


.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.ic { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ic-plein { fill:currentColor; stroke:none; }
.sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:12px; top:-80px; z-index:100; padding:10px 16px; border-radius:6px; background:var(--violet); color:var(--blanc); font-weight:600; text-decoration:none; }
.skip:focus { top:12px; }

/* ---------- 2. Composants communs ---------- */
.wrap { max-width:calc(var(--wrap) + 2 * var(--gouttiere)); margin-inline:auto; padding-inline:var(--gouttiere); }
.sec { padding-block:clamp(56px,6vw,80px); }

.kicker { display:flex; align-items:center; gap:14px; margin:0 0 10px; font-size:12px; font-weight:700; line-height:1.4; letter-spacing:0.06em; text-transform:uppercase; color:var(--encre); }
.kicker::before { content:''; flex:none; width:30px; height:2px; background:var(--violet); }
.kicker-clair { color:var(--blanc); }
.kicker-clair::before { background:var(--violet-clair); }
.hero .kicker-clair::before { background:currentColor; }

.h2 { font-size:clamp(28px,2.6vw,36px); line-height:1.15; font-weight:700; letter-spacing:-0.01em; color:var(--encre); text-wrap:balance; }
.h2-clair { color:var(--blanc); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:10px 20px; border:1.5px solid transparent; border-radius:6px; font-size:14px; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; transition:background-color .2s ease, border-color .2s ease, color .2s ease, gap .2s ease; }
.btn .ic { width:18px; height:18px; }
.btn-lg { min-height:52px; padding:14px 28px; font-size:15px; }
.btn-violet { background:var(--violet); color:var(--blanc); }
.btn-violet:hover { background:var(--violet-fonce); color:var(--blanc); gap:14px; }
.btn-contour { border-color:rgba(255,255,255,0.85); background:rgba(26,26,29,0.25); color:var(--blanc); }
.btn-contour:hover { background:var(--blanc); color:var(--encre); }
.btn-play { display:inline-grid; place-items:center; width:30px; height:30px; margin-left:-8px; border-radius:50%; background:var(--blanc); color:var(--noir); }
.btn-play .ic { width:12px; height:12px; margin-left:2px; }

.lnk { padding:0; border:0; background:none; color:var(--violet); font-size:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.lnk:hover { color:var(--violet-fonce); }

/* Logo de l'en-tête : logo-bat-pro-renov.webp (800 × 334, fond transparent), 56 px de haut,
   44 px sous 768 px (section 3, en-tête) */
.logo { display:block; flex:none; line-height:0; }
.logo img { width:auto; height:56px; }

/* ---------- 3. Sections ---------- */

/* En-tête */
.hdr { position:sticky; top:0; z-index:60; height:var(--hdr-h); background:var(--blanc); border-bottom:1px solid transparent; transition:box-shadow .2s ease, border-color .2s ease; }
.hdr.is-scrolled { border-bottom-color:var(--filet); box-shadow:0 4px 20px rgba(30,42,56,0.06); }
/* Pas de navigation : logo, téléphone, bouton devis. La page se parcourt au défilement. */
.hdr-in { height:100%; display:flex; align-items:center; gap:clamp(12px,2vw,28px); }
.hdr-tel { flex:none; display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-left:auto; color:var(--encre); font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap; }
.hdr-cta { flex:none; white-space:nowrap; }
.hdr-tel-rond { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--violet); color:var(--blanc); transition:background-color .2s ease; }
.hdr-tel-rond .ic { width:18px; height:18px; }
.hdr-tel:hover .hdr-tel-rond { background:var(--violet-fonce); }
.hdr-tel:hover .hdr-tel-num { color:var(--violet); }
/* Sous 768 px : rond d'appel seul (numéro dans l'aria-label) et bouton « Devis » ;
   le libellé raccourcit, la taille du texte ne change pas */
@media (max-width:767px) {
  .logo img { height:44px; }
  .hdr-tel-num, .hdr-cta-suite { display:none; }
  .hdr-tel-rond { width:44px; height:44px; }
  .hdr-cta { padding-inline:16px; }
}

/* Hero */
.hero { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:center; min-height:clamp(520px, calc(100svh - var(--hdr-h)), 600px); overflow:hidden; background:var(--noir); color:var(--blanc); }
.hero-bg { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.hero-voile { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(26,26,29,0.92) 0%, rgba(26,26,29,0.8) 34%, rgba(26,26,29,0.35) 68%, rgba(26,26,29,0.2) 100%); }
.hero-in { width:100%; padding-block:56px; }
/* Taille réduite d'environ 20 % (clamp(36px, 4.2vw, 60px) avant) ; sous 1025 px, voir les blocs suivants */
.hero-titre { margin:4px 0 14px; font-size:clamp(32px,3.4vw,48px); line-height:1.04; font-weight:700; letter-spacing:-0.01em; text-transform:uppercase; color:var(--blanc); }
/* Seconde ligne du violet des boutons (demande de l'utilisateur), à toutes les largeurs */
.hero-titre span { color:var(--violet); }
.hero-sous { margin-bottom:12px; font-size:clamp(17px,1.45vw,21px); font-weight:600; color:var(--blanc); }
.hero-p { max-width:520px; margin-bottom:28px; font-size:16px; color:rgba(255,255,255,0.88); }
.hero-cta { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:26px; }
.hero-zone { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; }
.hero-zone .ic { width:22px; height:22px; }
/* Ordinateur (à partir de 1025 px) : la hauteur du hero se déduit du format de la photo
   panoramique (1920 × 819, soit 2,34:1), visible en entier en largeur, sans rognage.
   min-height reste automatique : si le texte ne tenait pas, le hero grandirait plutôt que
   de le couper. Texte à gauche sur le voile, comme avant. */
@media (min-width:1025px) {
  .hero { min-height:auto; aspect-ratio:1920 / 819; }
}
/* 1025–1199 px : hauteur de 437 à 511 px, trop juste pour le texte (471 px à 1025 px) ;
   marges, interlignes et écarts resserrés plutôt que de rogner la photo */
@media (min-width:1025px) and (max-width:1199px) {
  .hero-in { padding-block:28px; }
  .hero-titre { margin:2px 0 8px; line-height:1; }
  .hero-sous { margin-bottom:8px; }
  .hero-p { margin-bottom:16px; line-height:1.45; }
  .hero-cta { margin-bottom:14px; }
}
/* 768–1024 px (option C, choisie par l'utilisateur) : hero au format de la photo comme sur
   ordinateur ; marges et interlignes resserrés, polices réduites pour que
   le texte tienne (min-height automatique : sinon le hero grandit plutôt que de couper). */
@media (min-width:768px) and (max-width:1024px) {
  .hero { min-height:auto; aspect-ratio:1920 / 819; }
  .hero-in { padding-block:28px; }
  .hero-titre { margin:2px 0 8px; font-size:24px; line-height:1; }
  .hero-sous { margin-bottom:8px; font-size:15px; }
  .hero-p { margin-bottom:16px; font-size:14.5px; line-height:1.4; }
  .hero-cta { margin-bottom:14px; }
  .hero .btn-lg { min-height:44px; padding:10px 20px; font-size:14px; }
  .hero-zone { font-size:14px; }
}
/* Téléphone (< 768 px) : même logique que l'ordinateur, photo en fond et texte posé dessus.
   Photo portrait hero-mobile.webp (941 × 1412) plein cadre, voile vertical pour la
   lisibilité du texte blanc ; titre, prestations et paragraphe à gauche, boutons de
   200 × 42 px, zone affichée. Intitulé masqué (affiché sur ordinateur). */
@media (max-width:767px) {
  .hero { position:relative; justify-content:flex-start; min-height:590px; background:var(--noir); }
  .hero picture { position:absolute; inset:0; display:block; margin:0; }
  .hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:0; }
  /* Voile léger, comme la référence (ancien site sur iPhone) : la photo reste claire. La lisibilité
     vient de l'ombre portée des textes, pas d'un voile plus sombre. */
  .hero-voile { display:block; background:linear-gradient(180deg, rgba(26,26,29,0.08) 0%, rgba(26,26,29,0.28) 35%, rgba(26,26,29,0.32) 70%, rgba(26,26,29,0.18) 100%); }
  .hero-titre, .hero-sous, .hero-p, .hero-zone { text-shadow:0 1px 2px rgba(0,0,0,0.55), 0 0 14px rgba(0,0,0,0.35); }
  .hero-zone .ic { filter:drop-shadow(0 1px 2px rgba(0,0,0,0.55)); }
  /* Haut 149 px = 128 + la place de l'intitulé masqué (20,7 px) : le titre ne remonte pas. */
  .hero-in { position:relative; padding:149px 20px 56px; }
  .hero .kicker { display:none; }
  /* « RÉNOVATEUR DE CONFIANCE » (≈ 13,61 × la taille) tient sur une ligne dans la largeur utile
     (100vw − 40 px) : taille ajustée, plafond 30 px, 22 px et plus à partir de 340 px ; en
     dessous (320–339 px, choix de l'utilisateur), elle descend jusqu'à 20,5 px à 320 px. */
  .hero-titre { font-size:min(30px, calc((100vw - 40px) / 13.63)); line-height:1.08; }
  .hero-sous { font-size:14px; color:var(--blanc); white-space:nowrap; }
  .hero-p { display:block; margin:18px 0 0; font-size:14px; line-height:1.55; color:rgba(255,255,255,0.9); }
  .hero-cta { flex-direction:column; align-items:flex-start; gap:10px; margin:22px 0 0; }
  .hero-cta .btn { width:200px; height:42px; min-height:42px; padding:0 16px; font-size:15px; white-space:nowrap; }
  /* « Voir nos réalisations » sur une ligne dans 200 px : rond lecture 24 px, marges 12 px. */
  .hero-cta .btn-contour { padding:0 12px; gap:6px; }
  .hero-cta .btn-play { width:24px; height:24px; margin-left:-6px; }
  .hero-zone { display:flex; margin-top:48px; font-size:14px; color:var(--blanc); }
}
@media (max-width:599px) {
  .h2 br { display:none; }
  .hero-titre span { white-space:nowrap; }
}

/* Prestations */
.sec-tete { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 48px; margin-bottom:32px; }
.sec-tete-p { max-width:480px; font-size:15px; }
.prest-grille { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
/* Cartes non cliquables : aucun effet au survol */
.prest { display:flex; flex-direction:column; overflow:hidden; background:var(--blanc); border:1px solid var(--filet); border-radius:var(--rayon); box-shadow:var(--ombre); }
.prest-media { position:relative; }
/* Demi-disque découpé dans la photo : la photo est masquée par un cercle de rayon
   --disque centré sur son bord bas, à 24 px + --disque du bord gauche. Le blanc visible
   est le fond de la carte, pas une pastille. */
.prest-media { --disque:72px; }
.prest-photo { aspect-ratio:4/3; overflow:hidden; background:var(--gris-fond);
  -webkit-mask-image:radial-gradient(circle at calc(24px + var(--disque)) 100%, transparent var(--disque), #000 calc(var(--disque) + 0.5px));
          mask-image:radial-gradient(circle at calc(24px + var(--disque)) 100%, transparent var(--disque), #000 calc(var(--disque) + 0.5px)); }
.prest-photo img { width:100%; height:100%; object-fit:cover; }
/* Icône sombre de 44 px dans le demi-disque (144 × 72 px), centrée ; 11 px au-dessus
   du bord pour rester loin de l'arrondi (proportions de la version 32 px / 52 px) */
.prest-ic { position:absolute; left:24px; bottom:0; display:flex; align-items:flex-end; justify-content:center; width:calc(2 * var(--disque)); height:var(--disque); padding-bottom:11px; }
.prest-ic img { width:44px; height:44px; object-fit:contain; }
.prest-corps { flex:1; display:flex; flex-direction:column; gap:8px; padding:20px 24px 24px; }
.prest-t { font-size:17px; font-weight:700; line-height:1.3; letter-spacing:0.02em; text-transform:uppercase; color:var(--noir); }
.prest-p { font-size:14.5px; }
@media (max-width:1024px) { .prest-grille { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:599px) { .prest-grille { grid-template-columns:minmax(0,1fr); gap:16px; } }

/* Réalisations */
.real-sec { background:var(--gris-fond); }
.real-grille { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; }
.real-txt .h2 { margin-bottom:14px; }
.real-p { max-width:440px; margin-bottom:26px; font-size:15px; }
/* Deux compteurs symétriques : grille 1fr / trait / 1fr, trait (pseudo-élément placé dans la
   colonne du milieu) exactement au centre du bloc, 16 px de chaque côté. Bloc de la largeur
   du paragraphe au-dessus (même max-width), toute la largeur utile sur mobile. */
.stats { container-type:inline-size; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:16px; align-items:start; max-width:440px; margin-top:36px; }
.stats::before { content:''; grid-column:2; grid-row:1; align-self:stretch; width:1px; background:#D5D5DD; }
/* Ordinateur : 24 px de plus au-dessus, pour éloigner les compteurs du bouton */
@media (min-width:768px) { .stats { margin-top:60px; } }
.stat { display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center; }
/* Icône 22 px, 8 px au-dessus de la valeur ; libellé 4 px sous la valeur */
.stat .ic { width:22px; height:22px; margin-bottom:8px; color:var(--violet); }
/* Même taille pour les deux valeurs : 24 px, sauf si « Devis gratuit » (≈ 6,21 × la taille)
   ne tient plus sur une ligne dans sa moitié (50cqi − 16,5 px) : entre 1025 et ~1150 px,
   où la colonne de texte est étroite */
.stat-val { font-size:min(24px, calc((50cqi - 16.5px) / 6.4)); font-weight:700; line-height:1.25; color:var(--violet); white-space:nowrap; }
/* Libellé jamais tronqué : les trois régions restent lisibles en entier */
.stat-lib { margin-top:4px; font-size:14px; line-height:1.35; }

.mosaique { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:270px 245px; gap:12px; }
.tuile { position:relative; overflow:hidden; display:block; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:var(--rayon); background:var(--encre); color:var(--blanc); text-align:left; }
button.tuile { cursor:pointer; }
.tuile:nth-child(1) { grid-column:span 7; }
.tuile:nth-child(2) { grid-column:span 5; }
/* Quatre tuiles photo : rangée du haut 7 + 5, rangée du bas en trois tiers (deux tuiles et la citation) */
.tuile:nth-child(n+3) { grid-column:span 4; }
.tuile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tuile:hover img { transform:scale(1.04); }
/* Badge : règle unique, commune à toutes les tuiles */
.tuile-badge { position:absolute; left:16px; bottom:12px; display:inline-flex; align-items:center; gap:8px; max-width:calc(100% - 32px); height:36px; padding:8px 14px; border-radius:6px; background:var(--noir); color:var(--blanc); font-size:14px; font-weight:600; line-height:20px; white-space:nowrap; }
.tuile-badge-txt { overflow:hidden; text-overflow:ellipsis; }
.tuile-badge .ic { width:16px; height:16px; stroke-width:2; }
/* Légende sous la photo, générée par main.js à partir des data-* : affichée sous 768 px */
.tuile-legende { display:none; flex-direction:column; gap:2px; min-width:0; padding:8px 8px 10px; text-align:left; }
.tuile-cat { font-size:10.5px; font-weight:600; line-height:1.3; letter-spacing:0.12em; text-transform:uppercase; color:var(--texte); }
.tuile-lieu { font-size:13.5px; font-weight:700; line-height:1.3; color:var(--encre); }
/* Survol des photos de réalisations (tuiles photo et vignettes de la galerie). Au repos :
   la photo seule. Au survol ou au focus clavier : légende sur un voile sombre qui monte
   depuis le bas (prestation en capitales espacées violet clair, lieu en gras blanc) et
   icône d'agrandissement en haut à droite ; fondu de 200 ms (coupé par
   prefers-reduced-motion, section 5). Sans survol possible (écran tactile) : affichés
   en permanence. Éléments ajoutés et ajustés par main.js (ajouterSurvol, ajusterSurvol). */
.a-survol { position:relative; isolation:isolate; }
/* Le voile est le fond de la légende : il suit la hauteur du texte, précédé d'un fondu
   (--fondu, proportionnel à la hauteur de la photo, posé par main.js) et ne dépasse
   jamais 45 % de la hauteur. Derrière le texte : 94 à 97 % d'opacité, soit 4,5:1 pour le
   violet clair même sur une photo presque blanche. */
.survol-legende { position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:2px; max-height:45%; overflow:hidden; padding:var(--fondu, 24px) 16px 16px; background:linear-gradient(to top, rgba(26,26,29,0.97) 0, rgba(26,26,29,0.94) calc(100% - var(--fondu, 24px)), rgba(26,26,29,0) 100%); text-align:left; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.survol-cat { flex:none; max-width:100%; font-size:11px; font-weight:700; line-height:1.3; letter-spacing:0.14em; text-transform:uppercase; color:var(--violet-clair); }
.survol-lieu { flex:none; max-width:100%; font-size:15px; font-weight:700; line-height:1.3; color:var(--blanc); }
/* Tailles inférieures, choisies par main.js tant que le texte dépasse (lieu sur trop de
   lignes ou voile au-delà de 45 %) ; en dernier recours, la prestation seule */
.survol-legende.survol-t1 .survol-cat, .survol-legende.survol-t2 .survol-cat, .survol-legende.survol-sans-lieu .survol-cat { font-size:10px; letter-spacing:0.08em; }
.survol-legende.survol-t1 .survol-lieu { font-size:12.5px; }
.survol-legende.survol-t2 .survol-lieu { font-size:11px; }
.survol-legende.survol-sans-lieu .survol-lieu { display:none; }
.survol-loupe { position:absolute; top:12px; right:12px; z-index:2; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(26,26,29,0.6); color:var(--blanc); opacity:0; transition:opacity .2s ease; pointer-events:none; }
.survol-loupe .ic { width:16px; height:16px; stroke-width:2; }
.a-survol:hover .survol-legende, .a-survol:focus-visible .survol-legende,
.a-survol:hover .survol-loupe, .a-survol:focus-visible .survol-loupe { opacity:1; }
@media (hover:none) {
  .survol-legende, .survol-loupe { opacity:1; }
}
/* Tuiles : le badge de catégorie reste au-dessus du voile ; le texte se place juste
   au-dessus du badge (12 + 36 + 8 px) ; fondu plus court (4 % de la hauteur), le badge
   occupant déjà le bas du voile */
.tuile.a-survol { --fondu-ratio:0.04; }
.tuile .tuile-badge { z-index:2; }
.tuile .survol-legende { padding-bottom:56px; }
.tuile-citation { container-type:inline-size; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; padding:24px 20px; background:var(--noir); text-align:center; }
.citation-guillemet { width:34px; height:34px; color:var(--violet-clair); }
/* Composition centrée à toutes les largeurs : deux lignes « Le savoir-faire » / « qui
   façonne vos espaces » (seconde ligne en nowrap). Taille bornée par la
   largeur utile de la tuile (« qui façonne vos espaces » ≈ 11,81 × la taille). */
.citation-txt { font-size:min(clamp(26px, 2.2vw, 34px), calc(100cqi / 12)); font-weight:700; line-height:1.2; color:var(--blanc); }
.citation-l2 { white-space:nowrap; }
.citation-trait { width:76px; height:3px; border-radius:2px; background:var(--violet-clair); transform:rotate(-4deg); }

@media (min-width:1025px) {
  .real-grille { grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:48px; align-items:center; }
}
/* Téléphone : cartes compactes sur deux colonnes (~170 px : photo 118 px + légende),
   légende sous la photo, tuile citation sur toute la largeur */
@media (max-width:767px) {
  /* Écart de 10 px et marges de légende réduites : plus de place pour le lieu sur une ligne */
  .mosaique { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; gap:10px; }
  .tuile:nth-child(n) { grid-column:auto; height:auto; }
  button.tuile { display:flex; flex-direction:column; border:1px solid var(--filet); background:var(--blanc); color:var(--encre); }
  .tuile img { position:static; flex:none; height:118px; }
  .tuile:hover img { transform:none; }
  .tuile-badge { display:none; }
  .tuile-legende { display:flex; }
  /* Nombre impair de tuiles photo : la dernière prend la ligne entière plutôt que de laisser un trou */
  .mosaique > button.tuile:nth-child(odd):nth-last-child(2) { grid-column:1 / -1; }
  /* Citation sur toute la largeur, hauteur minimale d'avant (181 px) ; à 320 px, la ligne
     « qui façonne vos espaces » est réduite plutôt que coupée */
  .tuile-citation, .tuile-citation:nth-child(n) { grid-column:1 / -1; min-height:181px; padding:28px 20px; }
  .citation-txt { font-size:min(clamp(24px, 7.5vw, 30px), calc(100cqi / 12)); }
  /* Même taille pour les deux valeurs : clamp(18px, 5vw, 20px) (tient toujours dans la moitié ;
     la borne reste en garde-fou) ; libellés 13 px */
  .stat-val { font-size:min(clamp(18px, 5vw, 20px), calc((50cqi - 16.5px) / 6.4)); }
  .stat-lib { font-size:13px; }
  /* Cartes : la légende est déjà sous la photo, pas de voile ni de légende par-dessus */
  .tuile .survol-legende, .tuile .survol-loupe { display:none; }
}
/* Moins de 410 px : légende resserrée pour que la catégorie et le lieu tiennent chacun
   sur une ligne (mesuré : « Rénovation intérieure » faisait 152 px et
   « Loire-Atlantique (44) » 138 px, pour 132 px disponibles à 360 px) */
@media (max-width:409px) {
  .tuile-legende { padding-inline:6px; }
  .tuile-cat { font-size:10px; letter-spacing:0.06em; }
  .tuile-lieu { font-size:13px; }
}

/* L'artisan */
.artisan { display:grid; grid-template-columns:minmax(0,1fr); }
.artisan-txt { padding:56px var(--gouttiere); background:var(--encre); color:rgba(255,255,255,0.88); }
.artisan-txt .h2 { margin-bottom:16px; }
/* Titre bicolore : « Bat Pro Rénov' » en violet clair sur sa propre ligne */
.artisan-txt .h2 span { display:block; color:var(--violet-clair); }
/* Paragraphes séparés de 10 px ; signature (sans police manuscrite) précédée d'un trait violet de 32 px */
.artisan-txt p { max-width:540px; font-size:15px; line-height:1.6; }
.artisan-txt p + p { margin-top:10px; }
.artisan-txt .artisan-signature { display:flex; align-items:center; gap:12px; margin-top:18px; font-weight:600; color:var(--violet-clair); }
.artisan-signature::before { content:''; flex:none; width:32px; height:2px; background:var(--violet-clair); }
.artisan-photo { position:relative; aspect-ratio:4/5; background:var(--gris-fond); }
/* Portrait vertical : cadrage remonté pour ne jamais couper la tête quand la zone est plus large que haute */
.artisan-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 10%; }
.engagements { display:grid; align-content:center; gap:28px; padding:48px var(--gouttiere); background:var(--blanc); }
.eng { display:flex; align-items:flex-start; gap:20px; }
/* Icônes isométriques en SVG (<img> décoratives) : carré de 56 px, 48 px sous 768 px. */
.eng-ic { flex-shrink:0; width:56px; height:56px; object-fit:contain; }
.eng strong { display:block; font-size:15px; font-weight:700; color:var(--encre); }
.eng span span { display:block; font-size:14px; }
@media (max-width:767px) {
  .eng-ic { width:48px; height:48px; }
}
@media (min-width:600px) and (max-width:1024px) {
  .artisan { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .artisan-txt { grid-column:1 / -1; }
  .artisan-photo { aspect-ratio:auto; min-height:420px; }
}
@media (min-width:1025px) {
  .artisan { grid-template-columns:39.5fr 27fr 33.5fr; min-height:404px; }
  /* 24 px en haut et en bas (48 avant) : le texte, plus long, fait grandir la section au minimum */
  .artisan-txt { padding:24px 48px 24px max(var(--gouttiere), calc(50vw - var(--wrap) / 2)); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
  .artisan-photo { aspect-ratio:auto; }
  .engagements { padding:40px max(var(--gouttiere), calc(50vw - var(--wrap) / 2)) 40px 56px; }
}

/* Avis clients */
.avis-sec { background:var(--gris-fond); padding-bottom:40px; }
.avis-tete { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; }
.avis-fleches { display:flex; gap:10px; }
.fleche { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--filet); border-radius:6px; background:var(--blanc); color:var(--violet); cursor:pointer; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.fleche:hover:not(:disabled) { border-color:var(--violet); background:var(--violet); color:var(--blanc); }
.fleche:disabled { color:#A7A7B2; cursor:default; }
.avis-piste { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px) / 3); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.avis-piste::-webkit-scrollbar { display:none; }
.avis { scroll-snap-align:start; display:flex; flex-direction:column; gap:10px; padding:24px 28px; background:var(--blanc); border:1px solid var(--filet); border-radius:var(--rayon); }
.avis-txt { flex:1; font-size:14.5px; }
.avis-nom { margin-top:4px; font-size:15px; font-weight:700; color:var(--encre); }
.avis-qual { margin-top:-10px; font-size:14px; }
@media (max-width:1024px) { .avis-piste { grid-auto-columns:calc((100% - 20px) / 2); } }
@media (max-width:599px) { .avis-piste { grid-auto-columns:86%; gap:14px; } }

/* Fournisseurs */
/* Hauteur optique homogène : chaque logo occupe la même surface (--logo × --logo),
   largeur = --logo × √ratio. Couleurs d'origine, aucun effet au survol. */
.fourn-sec { --logo:76px; padding-block:clamp(40px,4.5vw,56px); background:var(--blanc); }
.fourn-logos { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:clamp(24px,3.8vw,56px); }
.fourn-logos li { flex:0 1 auto; min-width:0; }
.fourn-logos img { width:calc(var(--logo) * sqrt(var(--ratio, 3))); max-width:100%; height:auto; }
@media (max-width:1024px) { .fourn-sec { --logo:56px; } }
@media (max-width:899px) { .fourn-sec { --logo:42px; } }
/* Téléphone : une ligne serait illisible, deux rangées de trois */
@media (max-width:767px) {
  .fourn-sec { --logo:48px; }
  .fourn-logos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); justify-items:center; gap:28px 20px; }
}

/* Contact : section blanche ; bandeau violet pleine largeur à partir du bord inférieur
   de la carte (au niveau des champs Email / Téléphone) jusqu'en bas de la section.
   La photo commence au-dessus du bandeau et se termine dedans. */
.contact { isolation:isolate; overflow-x:clip; padding-top:clamp(56px,6vw,80px); background:var(--blanc); }
.contact-grille { display:grid; grid-template-columns:minmax(0,32fr) minmax(0,68fr); column-gap:clamp(24px,3.5vw,48px); }
.contact-photo { position:relative; z-index:1; margin-bottom:clamp(40px,4vw,56px); overflow:hidden; border-radius:8px; background:var(--gris-fond); box-shadow:0 16px 40px rgba(26,26,29,0.2); }
.contact-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.contact-corps { min-width:0; }
/* Carte : ombre douce sur trois côtés, coupée en bas pour que son bord coïncide avec le bandeau */
.contact-carte { padding:clamp(28px,3.5vw,44px) clamp(20px,3.5vw,48px) clamp(24px,2.5vw,32px); background:var(--blanc); border-radius:var(--rayon) var(--rayon) 0 0; box-shadow:0 0 36px rgba(30,42,56,0.1); clip-path:inset(-48px -48px 0 -48px); }
.contact-titre { margin-bottom:14px; font-size:clamp(26px,2.7vw,38px); line-height:1.1; font-weight:700; text-transform:uppercase; color:var(--noir); }
.contact-titre span { display:block; color:var(--violet); }
.contact-p { max-width:640px; margin-bottom:24px; font-size:15px; }
.contact-bande { position:relative; padding:clamp(20px,2.5vw,28px) clamp(20px,3.5vw,48px) clamp(40px,4.5vw,64px); color:var(--blanc); }
.contact-bande::before { content:''; position:absolute; z-index:-1; top:0; bottom:0; left:-100vw; right:-100vw; background:var(--violet); }

.form-champs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.fld { min-width:0; }
/* Champs : gris clair uni, sans bordure ; focus et erreur dessinés par une ombre intérieure */
.form input:not([type="checkbox"]), .form textarea { width:100%; min-height:48px; padding:12px 16px; border:0; border-radius:6px; background:var(--gris-fond); color:var(--encre); font-size:15px; transition:box-shadow .2s ease; }
.form textarea { display:block; min-height:132px; line-height:1.5; resize:vertical; }
.form ::placeholder { color:var(--texte); opacity:1; }
.form input:focus, .form textarea:focus { outline:none; box-shadow:inset 0 0 0 2px var(--violet); }
.form .has-err { box-shadow:inset 0 0 0 2px var(--erreur); }
.contact-bande textarea:focus { box-shadow:inset 0 0 0 2px var(--violet), 0 0 0 3px var(--blanc); }
.fld-err { margin-top:6px; font-size:13px; color:var(--erreur); }
/* Message d'envoi (succès ou échec) sur le bandeau violet, blanc gras ; sans marge quand il est vide */
.form-msg { margin-top:12px; font-size:14px; font-weight:600; line-height:1.5; color:var(--blanc); }
.form-msg:empty { margin-top:0; }
/* Sur le violet, le rouge n'est pas lisible : messages en blanc */
.contact-bande .fld-err { font-weight:600; color:var(--blanc); }
.form-pied { display:flex; align-items:center; justify-content:flex-end; gap:12px 16px; margin-top:16px; }
.btn-contour-blanc { border-color:var(--blanc); background:transparent; color:var(--blanc); }
.btn-contour-blanc:hover { background:var(--blanc); color:var(--violet); }
.contact-bande :focus-visible { outline-color:var(--blanc); }
.submit { min-width:150px; }
.submit[disabled] { opacity:0.75; cursor:not-allowed; }
.spin { width:16px; height:16px; border:2px solid rgba(255,255,255,0.35); border-top-color:var(--blanc); border-radius:50%; animation:tourne .7s linear infinite; }

/* Téléphone et petite tablette : tout empilé, photo au-dessus de la carte */
@media (max-width:767px) {
  .contact-grille { grid-template-columns:minmax(0,1fr); }
  /* Photo carrée (contact-chantier-mobile.webp, 900 × 900, via <source>) */
  .contact-photo { aspect-ratio:1 / 1; margin-bottom:28px; }
}
@media (max-width:479px) {
  .form-champs { grid-template-columns:minmax(0,1fr); }
  .form-pied .submit { width:100%; }
}

/* Pied de page */
/* Trois zones : marque | accroche et métiers | téléphone, e-mail, ronds. Puis un filet
   et la barre du bas sur trois colonnes. Empilé et centré sous 1025 px. */
.foot { padding-top:clamp(48px,5vw,64px); background:var(--noir); color:rgba(255,255,255,0.78); font-size:14px; }
.foot a { color:rgba(255,255,255,0.78); text-decoration:none; }
.foot a:hover { color:var(--blanc); text-decoration:underline; }
.foot-grille { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:32px 48px; padding-bottom:40px; }
/* Logo du pied de page sur un cadre blanc (fond sombre), 56 px de haut, 44 px sous 768 px */
.foot-logo { display:inline-block; padding:12px 16px; border-radius:10px; background:var(--blanc); line-height:0; }
.foot-logo img { width:auto; height:56px; }
.foot-marque p { margin-top:14px; line-height:1.6; }
.foot-accroche { text-align:center; }
.foot-phrase { font-size:clamp(19px,1.6vw,22px); font-style:italic; font-weight:500; line-height:1.35; color:var(--blanc); }
.foot-metiers { margin-top:10px; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; }
.foot-contact { display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; }
.foot a.foot-tel { font-size:clamp(24px,2.2vw,30px); font-weight:700; line-height:1.25; color:var(--blanc); white-space:nowrap; }
.foot a.foot-tel:hover { color:var(--violet-clair); text-decoration:none; }
.foot-ronds { display:flex; gap:12px; margin-top:14px; }
.foot a.foot-rond { display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,0.3); border-radius:50%; color:var(--blanc); transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.foot a.foot-rond:hover { border-color:var(--violet-clair); background:var(--violet-clair); color:var(--noir); }
.foot-rond .ic { width:20px; height:20px; }
.foot-bas { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px 24px; padding-block:20px 24px; border-top:1px solid rgba(255,255,255,0.12); font-size:13px; }
.foot-legal { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.foot-credit { text-align:right; }
.foot .lnk { color:rgba(255,255,255,0.78); text-decoration:none; }
.foot .lnk:hover { color:var(--blanc); text-decoration:underline; }
@media (max-width:1024px) {
  .foot-grille, .foot-bas { grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
  .foot-contact { align-items:center; text-align:center; }
  .foot-credit { text-align:center; }
}
@media (max-width:767px) { .foot-logo img { height:44px; } }
@media (max-width:599px) { .foot-bas { padding-bottom:96px; } }
/* Sous 400 px : la ligne des métiers tient sur une ligne (sinon un « · » reste en bout de ligne) */
@media (max-width:399px) { .foot-metiers { font-size:11px; letter-spacing:0.1em; } }

/* ---------- 4. Galerie et visionneuse, modales, barre mobile ---------- */
@keyframes fondu { from { opacity:0; } to { opacity:1; } }
@keyframes monte { from { transform:translateY(100%); } to { transform:none; } }
@keyframes tourne { to { transform:rotate(360deg); } }

.barre { position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(26,26,29,0.96); border-top:1px solid rgba(255,255,255,0.1); animation:monte .25s ease both; }
.barre a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border-radius:6px; font-size:15px; font-weight:700; text-decoration:none; }
.barre-appel { border:1.5px solid rgba(255,255,255,0.7); color:var(--blanc); }
.barre-devis { background:var(--violet); color:var(--blanc); }
@media (min-width:768px) { .barre { display:none !important; } }

/* Réalisations en deux étapes : galerie plein écran (.gal : filtres, compteur, grille de
   vignettes qui défile) puis visionneuse par-dessus (.lb) */
.gal { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; background:var(--noir); color:var(--blanc); animation:fondu .2s ease both; }
.gal-tete { position:relative; flex:none; height:80px; }
.gal-filtres { position:absolute; top:16px; left:16px; right:84px; display:flex; align-items:center; gap:14px; min-width:0; }
.gal-chips { display:flex; gap:8px; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:4px; padding:4px; scrollbar-width:none; }
.gal-chips::-webkit-scrollbar { display:none; }
.chip { flex:none; scroll-snap-align:center; min-height:38px; padding:8px 15px; border:1px solid rgba(255,255,255,0.28); border-radius:999px; background:transparent; color:var(--blanc); font-size:13.5px; font-weight:500; white-space:nowrap; cursor:pointer; transition:border-color .2s ease, background-color .2s ease; }
.chip:hover { border-color:var(--violet-clair); }
.chip.is-on { border-color:var(--violet-clair); background:var(--violet-clair); color:var(--noir); font-weight:700; }
.gal-total { flex:none; font-size:13px; color:rgba(255,255,255,0.65); font-variant-numeric:tabular-nums; }
.gal-corps { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px clamp(16px,7vw,104px) 40px; }
.gal-grille { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:1080px; margin-inline:auto; }
.gal-vignette { display:block; width:100%; aspect-ratio:4/3; padding:0; border:0; border-radius:8px; overflow:hidden; background:var(--encre); cursor:pointer; }
.gal-vignette img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.gal-vignette:hover img { transform:scale(1.04); }
@media (max-width:900px) { .gal-grille { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
/* Vignettes : fondu de 10 % de leur hauteur. Sous 480 px, texte plus petit et plus
   serré pour que le lieu tienne sur une ligne sans que le voile dépasse 45 % */
.gal-vignette.a-survol { --fondu-ratio:0.1; }
@media (max-width:480px) {
  .gal-vignette .survol-legende { padding-bottom:12px; gap:1px; }
  .gal-vignette .survol-cat { font-size:10px; letter-spacing:0.08em; line-height:1.2; }
  .gal-vignette .survol-lieu { font-size:12.5px; line-height:1.2; }
}

.lb { position:fixed; inset:0; z-index:91; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:76px clamp(16px,7vw,104px) 28px; background:rgba(26,26,29,0.96); color:var(--blanc); animation:fondu .2s ease both; }
.gal-fermer, .lb-fermer, .lb-nav { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,0.28); border-radius:50%; background:rgba(26,26,29,0.6); color:var(--blanc); cursor:pointer; transition:border-color .2s ease, color .2s ease; }
.gal-fermer:hover, .lb-fermer:hover, .lb-nav:hover { border-color:var(--violet-clair); color:var(--violet-clair); }
.gal-fermer, .lb-fermer { position:absolute; z-index:1; top:16px; right:16px; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); }
.lb-prec { left:clamp(8px,2vw,28px); }
.lb-suiv { right:clamp(8px,2vw,28px); }
.lb-nav .ic, .lb-fermer .ic, .gal-fermer .ic { width:24px; height:24px; }
.lb-fig { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:1080px; height:100%; min-height:0; }
.lb-media { position:relative; flex:1; width:100%; min-height:0; }
.lb-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:6px; }
.lb-cap { display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:center; gap:14px; max-width:100%; white-space:nowrap; }
.lb-cat { font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.62); }
.lb-ville { font-size:15px; font-weight:600; }
.lb-count { font-size:13px; color:rgba(255,255,255,0.62); font-variant-numeric:tabular-nums; }
@media (max-width:767px) {
  .gal-tete { height:92px; }
  /* Barre de filtres de bord à bord, sous la croix : le filtre suivant apparaît coupé
     par le bord droit, avec un fondu de 32 px qui disparaît en fin de défilement
     (classe is-fin posée par main.js). Le compteur passe sous la barre. */
  .gal-filtres { top:13px; left:0; right:0; flex-wrap:wrap; row-gap:4px; }
  .gal-filtres::after { content:''; position:absolute; top:0; right:0; width:32px; height:46px; background:linear-gradient(90deg, transparent, var(--noir)); pointer-events:none; transition:opacity .2s ease; }
  .gal-filtres.is-fin::after { opacity:0; }
  /* Zone d'accroche = partie visible hors croix (12 + 44 + 12 px à droite) : les filtres
     s'y centrent, au doigt comme à l'ouverture (scrollIntoView inline: 'center') */
  .gal-chips { flex:1 0 100%; padding:4px 12px; scroll-padding-inline:12px 68px; }
  /* Fin de course : le dernier filtre s'arrête avant la croix (12 + 48 + 8 px d'écart) */
  .gal-chips::after { content:''; flex:0 0 48px; }
  .gal-total { padding-inline:12px; }
  .gal-corps { padding:4px 12px 24px; }
  .lb { padding:72px 12px 24px; }
  .lb-nav { top:auto; bottom:18px; transform:none; width:44px; height:44px; }
  .gal-fermer, .lb-fermer { top:14px; right:12px; width:44px; height:44px; background:var(--noir); }
  .lb-fig { padding-bottom:64px; }
  .lb-cap { flex-wrap:wrap; gap:4px 10px; white-space:normal; }
}

.modal { position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); background:rgba(26,26,29,0.7); animation:fondu .2s ease both; }
.modal-box { position:relative; width:100%; max-width:720px; max-height:85vh; overflow-y:auto; padding:clamp(24px,4vw,40px); border-radius:12px; background:var(--blanc); }
.modal-fermer { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--filet); border-radius:50%; background:var(--blanc); color:var(--encre); cursor:pointer; }
.modal-fermer:hover { border-color:var(--violet); color:var(--violet); }
.modal-box h2 { margin-bottom:20px; padding-right:52px; font-size:26px; line-height:1.2; font-weight:700; color:var(--encre); }
.modal-blk { margin-bottom:20px; }
.modal-blk h3 { margin-bottom:6px; font-size:16px; font-weight:700; color:var(--encre); }
.modal-blk p { font-size:14.5px; line-height:1.65; }

/* ---------- 5. Mouvement réduit ---------- */
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}