/* La Maison du Couvreur — styles globaux.
   La mise en page vient de l'export Claude Design (styles inline dans index.html) ;
   ce fichier ne contient que ce qui ne peut pas être inline : polices, états
   (survol, focus), affichage mobile / desktop et le hero animé. */

/* ---------- Polices (auto-hébergées, mêmes fichiers que Google Fonts) ---------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(../fonts/archivo-latin.woff2) 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; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/lato-400-latin-ext.woff2) 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/lato-400-latin.woff2) 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; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/lato-700-latin-ext.woff2) 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/lato-700-latin.woff2) 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; }

/* ---------- Base (reprise du design) ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F4EDE3; color: #272E37; font-family: Lato, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: #CB6A3E; }
a:hover { color: #A6522B; }
input, select, textarea, button { font: inherit; }
::selection { background: #D6BC9A; color: #272E37; }
[hidden] { display: none !important; }
a, button, [role="slider"] { -webkit-tap-highlight-color: transparent; }

/* ---------- Mobile / desktop (remplace les conditions du design) ---------- */
@media (max-width: 959.98px) { .only-desk { display: none !important; } }
@media (min-width: 960px) { .only-mobile { display: none !important; } }
@media (max-width: 1199.98px) { .only-wide { display: none !important; } }
@media (min-width: 1200px) { .only-narrow { display: none !important; } }
@media (max-height: 679.98px) { .only-tall { display: none !important; } }

/* ---------- Survol et focus (style-hover / style-focus du design) ---------- */
@media (hover: hover) {
  .hv1:hover { background: rgba(39,46,55,.07) !important; color: #272E37 !important; }
  .hv2:hover { background: #272E37 !important; color: #F4EDE3 !important; border-color: #272E37 !important; }
  .hv3:hover { background: #B45A30 !important; color: #FFF8F0 !important; }
  .hv4:hover { background: #161B21 !important; color: #F4EDE3 !important; }
  .hv5:hover { color: #D6BC9A !important; }
  .hv6:hover { background: #B45A30 !important; }
  .hv7:hover { color: #F4EDE3 !important; }
}
.fc1:focus-visible { box-shadow: 0 0 0 3px #F4EDE3, 0 6px 18px rgba(0,0,0,.3) !important; }
.fc2:focus { border-color: #CB6A3E !important; box-shadow: 0 0 0 3px rgba(203,106,62,.18) !important; }

/* ---------- Hero : vidéo pilotée par le défilement ---------- */
/* Mobile : la section reste fixée pendant 4 hauteurs d'écran.
   svh/lvh ne bougent pas quand la barre d'adresse de Safari apparaît ou disparaît,
   donc l'animation ne saute pas. vh sert de secours aux vieux navigateurs. */
.hero-m { height: 500vh; height: calc(100lvh + 400svh); }
.hero-m .hero-sticky { height: 100vh; height: 100lvh; }
.hero-d { height: 500vh; height: 500svh; }

.hero-media { position: absolute; inset: 0; }
/* Ciel seul, sous les images de l'animation (ciel transparent). Agrandi de 20 % pour avoir de la
   marge, puis décalé de +7,5 % : c'est sa position en haut du hero (le canvas fait la même chose). */
.hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 50%; transform: translateX(7.5%) scale(1.2); transform-origin: 50% 50%; }
.hero-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.hero-media canvas.is-ready { opacity: 1; }

/* ---------- Barre mobile « Appeler / Demander un devis » ----------
   Cachée sur le hero (il a déjà ses boutons), elle glisse en place dès qu'on le quitte.
   Sans JavaScript, elle reste toujours visible. */
.mobile-bar { transition: transform .35s ease, opacity .35s ease, visibility 0s linear 0s; }
.js .mobile-bar:not(.is-shown) { transform: translateY(110%); opacity: 0; visibility: hidden;
  transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s; }
/* Desktop : même idée pour « Demander un devis » dans l'en-tête (le hero a déjà le sien) :
   il se déplie à côté du téléphone une fois le hero quitté. */
.hdr-devis { max-width: 240px; overflow: hidden;
  transition: max-width .35s ease, padding .35s ease, margin .35s ease, opacity .25s ease, visibility 0s linear 0s; }
.js .hdr-devis:not(.is-shown) { max-width: 0; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px;
  opacity: 0; visibility: hidden;
  transition: max-width .35s ease, padding .35s ease, margin .35s ease, opacity .2s ease, visibility 0s linear .35s; }
@media (prefers-reduced-motion: reduce) {
  .mobile-bar, .js .mobile-bar:not(.is-shown), .hdr-devis, .js .hdr-devis:not(.is-shown) { transition: none; }
}

/* ---------- Moins d'espace entre « Nos services » et « Zone d'intervention » ----------
   72 px sur mobile (au lieu de 128), ~125 px sur grand écran (au lieu de ~230). */
.sec-services { padding-bottom: clamp(28px, 4cqw, 56px) !important; }
.sec-zone { padding-top: clamp(44px, 6cqw, 72px) !important; }

/* ---------- Zone tactile agrandie des liens texte, sans changer leur aspect ---------- */
.tap-pad { padding-block: 13px; margin-block: -13px; }
.tap-pad-s { padding-block: 3px; }

/* ---------- Mouvement réduit : image finale fixe, pas d'épinglage ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-m { height: 100vh; height: 100lvh; }
  .hero-d { height: 100vh; height: 100svh; }
  .hero-media canvas { display: none; }
  [data-hero-text], [data-stage-bar] { transition: none !important; }
}

/* Desktop : la colonne de texte du hero sert de repère de taille (cqw) au titre,
   pour qu'il tienne toujours à côté de l'image, même sur un grand écran. */
.hero-d-copy { container-type: inline-size; width: 100%; }

/* ---------- Galerie « Réalisations » sans trous ----------
   8 photos dont 2 grandes = 14 cases : 2 colonnes jusqu'à la tablette,
   puis 7 colonnes sur 2 rangées sur ordinateur (grande · 2×2 petites · grande · 2 petites). */
@media (max-width: 959.98px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 960px) {
  .gallery { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; grid-auto-flow: row !important; }
  .gallery > :nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1 / 3 !important; }
  .gallery > :nth-child(2) { grid-column: 3; grid-row: 1; }
  .gallery > :nth-child(3) { grid-column: 4; grid-row: 1; }
  .gallery > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .gallery > :nth-child(5) { grid-column: 4; grid-row: 2; }
  .gallery > :nth-child(6) { grid-column: 5 / 7 !important; grid-row: 1 / 3 !important; }
  .gallery > :nth-child(7) { grid-column: 7; grid-row: 1; }
  .gallery > :nth-child(8) { grid-column: 7; grid-row: 2; }
}

/* ---------- Page « Mentions légales » ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 40px) clamp(56px, 8vw, 96px); }
.legal h1 { margin: 0 0 clamp(24px, 4vw, 40px); font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; font-size: clamp(28px, 7vw, 52px); line-height: .95; letter-spacing: -.015em; }
.legal h2 { margin: 32px 0 8px; font-family: Archivo, system-ui, sans-serif; font-weight: 800; font-size: clamp(17px, 2.6vw, 21px); line-height: 1.2; scroll-margin-top: 24px; }
.legal p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #3B434E; text-wrap: pretty; }
.legal a { color: #A6522B; }

/* ---------- Bandeau des atouts sous le hero : centré, « Artisan basé à Caen » au milieu ----------
   Mobile : 3 colonnes égales, coche au-dessus du texte. Ordinateur : une ligne centrée. */
.trust { display: flex; justify-content: center; gap: 10px; }
.trust > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; font-size: 13px; font-weight: 600; line-height: 1.3; }
@media (min-width: 720px) {
  /* 3 colonnes « 1fr auto 1fr » : l'atout du milieu est pile au centre de l'écran.
     (Si l'assurance décennale est réactivée, passer à 4 colonnes.) */
  .trust { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: clamp(32px, 6vw, 88px); }
  .trust > div { flex-direction: row; gap: 10px; font-size: 14px; text-align: left; white-space: nowrap; }
  .trust > div:nth-child(1) { justify-self: end; }
  .trust > div:nth-child(3) { justify-self: start; }
}