/* ==========================================================================
   ART & CONFORT — Sellerie, bassin de Thau (Hérault)
   Refonte fidèle du site Adobe Muse : fond noir, cartes #1D1D1F arrondies 25px,
   police Outfit, texte blanc justifié.
   ========================================================================== */

/* ---------- Police Outfit (variable, auto-hébergée) ----------
   Un seul fichier woff2 couvre toutes les graisses (100 à 900) et
   tout le latin étendu (accents français, œ, €…). Les anciens woff
   exportés par Muse étaient incomplets : les caractères accentués
   basculaient sur une police de secours. */
@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/outfit-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --noir: #000000;            /* fond de page */
  --carte: #1D1D1F;           /* fond des cartes et du hero */
  --gris-slide: #4F4F4F;      /* fond d'attente des diaporamas */
  --blanc: #FFFFFF;
  --gris-btn: #999999;        /* flèches des diaporamas */
  --radius: 25px;             /* arrondi signature du site */
  --largeur: 920px;           /* largeur de contenu du site d'origine */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Pas de scroll-behavior:smooth ici : Lenis gère l'inertie et les deux entrent en conflit */

body {
  background-color: var(--noir);
  color: var(--blanc);
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Texte réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { position: relative; }

/* ---------- Carte générique (fond sombre, coins arrondis) ---------- */
.card {
  background-color: var(--carte);
  border-radius: var(--radius);
}

/* ---------- Pictos SVG (trait fin blanc, taille calée sur le texte) ---------- */
.icone {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: -0.28em;
  margin-right: 0.5em;
  opacity: 0.9;
}

/* ==========================================================================
   HERO — vidéo pleine largeur + logo flottant + tagline
   ========================================================================== */
.hero {
  position: relative;
  min-height: 646px;
  height: 100svh;
  max-height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--carte);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Léger voile pour la lisibilité du logo et de la tagline */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.hero__logo {
  position: relative;
  width: clamp(180px, 28vw, 268px);
  height: auto;
  z-index: 2;
}

/* Flottement vertical du logo — identique au widget Muse (2s aller-retour) */
.float { animation: floatVertical ease-in-out 2s infinite; }
@keyframes floatVertical {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.hero__tagline {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
  font-size: clamp(16px, 2.4vw, 22px);
  letter-spacing: 0.02em;
  color: var(--blanc);
  padding-inline: 16px;
}

/* ==========================================================================
   INTRO — carte sombre semi-transparente
   ========================================================================== */
.intro { margin-top: 51px; }

.intro__card {
  background-color: rgba(29, 29, 31, 0.75);
  padding: 42px;
  text-align: justify;
}

.intro__card p + p { margin-top: 23px; }

/* ==========================================================================
   AVIS — widget Elfsight
   ========================================================================== */
.avis { margin-top: 61px; text-align: center; }

/* ==========================================================================
   DIAPORAMAS
   ========================================================================== */
.galerie { margin-top: 39px; }

.slideshow {
  position: relative;
  border-radius: var(--radius);
  background-color: var(--gris-slide);
  overflow: hidden;
}

/* Grand diaporama : ratio 920x360 du site d'origine */
.slideshow--wide { aspect-ratio: 920 / 360; }

/* Diaporamas des cartes services : ratio 424x360, arrondi bas uniquement */
.slideshow--card {
  aspect-ratio: 424 / 360;
  border-radius: 0 0 var(--radius) var(--radius);
}

.slideshow__track { position: absolute; inset: 0; }

.slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.slideshow__slide.is-active { opacity: 1; pointer-events: auto; }

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flèches < > — discrètes comme sur le site d'origine, sous le diaporama */
.slideshow__btn {
  position: absolute;
  bottom: 8px;
  z-index: 3;
  width: 44px;
  height: 40px;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  color: var(--blanc);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.slideshow__btn:hover { background: rgba(0, 0, 0, 0.65); transform: scale(1.05); }
.slideshow__btn--prev { left: calc(50% - 52px); }
.slideshow__btn--next { left: calc(50% + 8px); }

/* ==========================================================================
   SERVICES — deux colonnes : carte texte + diaporama
   ========================================================================== */
.services { margin-top: 57px; }

.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0 72px; /* pas d'écart vertical : la carte texte touche son diaporama */
}

/* Chaque service partage les rangées de la grille parente (subgrid) :
   les deux cartes texte prennent la hauteur de la plus grande, et les
   deux diaporamas démarrent et finissent donc au même niveau. */
.service {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.service__card {
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 39px 36px;
  text-align: justify;
}

.service__card h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 23px;
}

.service__card p + p { margin-top: 23px; }

/* ==========================================================================
   SAVOIR-FAIRE — bandeau gradient + « l'art du sur mesure »
   ========================================================================== */
.savoir-faire {
  margin-top: 96px;
  padding-block: 56px 48px;
}

/* Bande dégradée pleine largeur, 32 % d'opacité comme l'original.
   Elle épouse toute la hauteur de la section : le texte et le titre
   restent toujours à l'intérieur du bloc. */
.savoir-faire__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #F5F5F5, #7F7F7F);
  opacity: 0.32;
  pointer-events: none;
}

.savoir-faire__texte {
  position: relative;
  margin-top: 44px;
}
.savoir-faire__texte p + p { margin-top: 0; }

.savoir-faire__titre {
  position: relative;
  text-transform: uppercase;
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   SEO LOCAL — sellier dans l'Hérault + FAQ
   ========================================================================== */
.local { margin-top: 90px; }

.local__titre {
  text-transform: uppercase;
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: 0.02em;
  margin-bottom: 39px;
}

.local__card {
  padding: 30px 36px;
  text-align: justify;
}
.local__card strong { font-weight: 700; }

/* Quatre prestations en grille */
.local__services {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.local__services li {
  background-color: var(--carte);
  border-radius: var(--radius);
  padding: 22px 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.local__services li:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.local__services h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.local__services p { font-size: 16px; }

/* FAQ dépliable */
.local__faq {
  margin-top: 24px;
  padding: 28px 36px 14px;
}

.local__faq h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.local__faq details {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.local__faq details:last-child { border-bottom: 0; }

.local__faq summary {
  cursor: pointer;
  padding: 16px 28px 16px 0;
  font-weight: 400;
  font-size: 18px;
  list-style: none;
  position: relative;
  transition: opacity 0.3s ease;
}
.local__faq summary::-webkit-details-marker { display: none; }
.local__faq summary:hover { opacity: 0.8; }

/* Indicateur + qui pivote en × à l'ouverture */
.local__faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
  transition: transform 0.35s ease;
}
.local__faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.local__faq details p {
  padding-bottom: 18px;
  text-align: justify;
  font-size: 16px;
}

.local__faq details a {
  color: var(--blanc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  margin-top: 60px;
  padding-bottom: 70px;
  text-align: center;
}

.contact__titre {
  text-transform: uppercase;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
}
.contact__titre span { font-size: 20px; }

/* Pastille téléphone : fond noir, bord blanc épais, arrondi 30px */
.contact__tel {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 32px;
  background-color: var(--noir);
  border: 4px solid var(--blanc);
  border-radius: 30px;
  color: var(--blanc);
  font-weight: 900;
  font-size: 24px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact__tel:hover {
  transform: scale(1.04);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.35);
}

.contact__coords {
  margin-top: 31px;
  font-style: normal;
  font-size: 18px;
  line-height: 1.3;
}

.contact__adresse {
  display: block;
  color: var(--blanc);
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.contact__adresse:hover { opacity: 0.75; }
.contact__adresse strong { font-weight: 700; }

.contact__email {
  display: inline-block;
  margin-top: 18px;
  color: var(--blanc);
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.3s ease;
}
.contact__email:hover { opacity: 0.75; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}

.footer__inner {
  max-width: var(--largeur);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--blanc);
}

.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer__credit a { display: inline-flex; transition: opacity 0.3s ease; }
.footer__credit a:hover { opacity: 0.7; }

.footer__copyright { opacity: 0.85; }

/* ==========================================================================
   ANIMATIONS AU SCROLL — état initial (GSAP anime vers visible)
   Le JS ajoute .js-anim sur <body> ; sans JS, tout reste visible.
   ========================================================================== */
.js-anim .reveal { opacity: 0; transform: translateY(40px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  .services__grid { gap: 0 48px; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }

  .hero { min-height: 70svh; }

  .intro__card { padding: 28px 22px; }
  .intro__card p + p { margin-top: 18px; }

  .services__grid { grid-template-columns: 1fr; gap: 40px 0; }
  /* En une colonne, plus besoin d'aligner les hauteurs entre les deux services */
  .service { display: block; }

  .service__card { padding: 28px 22px; }
  .service__card p + p { margin-top: 18px; }

  .slideshow--wide { aspect-ratio: 4 / 3; }

  .savoir-faire { margin-top: 64px; padding-block: 40px 36px; }

  .local { margin-top: 64px; }
  .local__card { padding: 28px 22px; }
  .local__card p + p { margin-top: 18px; }
  .local__services { grid-template-columns: 1fr; gap: 16px; }
  .local__services li { padding: 24px 22px; }
  .local__faq { padding: 26px 22px 12px; }

  .contact__tel { font-size: 20px; }
}

/* ---------- Accessibilité : réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .float { animation: none; }
  .js-anim .reveal { opacity: 1; transform: none; }
  .slideshow__slide { transition: none; }
}