/* Structure invariante, commune à tous les clients.
   Aucune couleur, aucune police, aucun rayon ici : tout ce qui distingue
   visuellement deux sites vit dans le skin. Ce fichier ne bouge que pour
   corriger la structure — et alors il bouge pour tout le parc à la fois. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: 1.65;
  color: var(--couleur-texte);
  background: var(--couleur-fond);
}

h1, h2, h3 {
  font-family: var(--police-titre);
  line-height: 1.15;
  margin: 0 0 .6em;
  color: var(--couleur-titre);
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

a { color: var(--couleur-accent); }

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

.conteneur {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

.conteneur-etroit { width: min(100% - 2.5rem, 44rem); }

/* La CSP interdit les styles en ligne : toute mise en forme passe par une
   classe, y compris pour un simple centrage. */
.centre { text-align: center; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--couleur-accent);
  color: var(--couleur-sur-accent);
}

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--couleur-fond-entete);
  border-bottom: 1px solid var(--couleur-filet);
}

.entete-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.2rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--couleur-titre);
}

.marque-nom {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-weight: 600;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.nav a {
  text-decoration: none;
  color: var(--couleur-texte);
  font-size: .95rem;
}

.nav a:hover { color: var(--couleur-accent); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  padding: .75rem 1.4rem;
  border-radius: var(--rayon-bouton);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-principal {
  background: var(--couleur-accent);
  color: var(--couleur-sur-accent);
}

.btn-discret {
  border-color: var(--couleur-filet);
  color: var(--couleur-texte);
}

.btn-nav { padding: .5rem 1rem; }

/* ---------- Sections ---------- */

.hero { padding: var(--espace-hero) 0; }
.section { padding: var(--espace-section) 0; }
.section-alt { background: var(--couleur-fond-alt); }

.section-tete { margin-bottom: 2.5rem; }

.surtitre {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--couleur-accent);
}

.chapo {
  font-size: 1.15rem;
  max-width: 42rem;
  color: var(--couleur-texte-doux);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

/* ---------- Photos ----------
   Les photos du client portent l'essentiel de l'identité visuelle : plus que
   le skin, ce sont elles qui font que deux sites ne se ressemblent pas.
   width et height sont toujours renseignés dans le HTML pour éviter le saut
   de mise en page au chargement. */

.hero-image img,
.apropos-image img,
.galerie-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--rayon-image);
}

.hero-image, .apropos-image, .galerie-item { margin: 0; }

.hero-illustre .hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-image img { aspect-ratio: 4 / 3; }

/* Défilement : les photos sont empilées. La première reste dans le flux pour
   donner sa hauteur au cadre, les suivantes se superposent. Le minutage est
   généré par le build, car il dépend du nombre de photos. */

.hero-diapo { position: relative; }

.hero-diapo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.hero-diapo img:first-child {
  position: relative;
  opacity: 1;
}

.apropos-illustre {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: center;
}

.apropos-image img { aspect-ratio: 1 / 1; }

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.galerie-item img { aspect-ratio: 4 / 3; }

figcaption {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--couleur-texte-doux);
}

.grille-prestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.prestation {
  padding: var(--espace-carte);
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-carte);
}

.horaires, .coordonnees { margin: 0; }

.horaire, .coordonnees > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--couleur-filet);
}

.horaire dt, .coordonnees dt { font-weight: 600; margin: 0; }
.horaire dd, .coordonnees dd { margin: 0; text-align: right; color: var(--couleur-texte-doux); }

/* ---------- Contact ---------- */

.section-contact { background: var(--couleur-fond-contact); }

.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Sans formulaire — l'offre Présence — l'encadré coordonnées occupe seul la
   section, centré. Le téléphone devient l'appel à l'action principal : un
   artisan se fait appeler, il ne se fait pas écrire. */

.contact-seul {
  grid-template-columns: minmax(0, 34rem);
  justify-content: center;
  text-align: center;
}

.encadre-coordonnees {
  padding: var(--espace-carte);
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-carte);
}

.contact-seul .encadre-coordonnees { padding: calc(var(--espace-carte) * 1.4); }

.tel-vedette {
  display: block;
  margin: .2rem 0 1.4rem;
  font-family: var(--police-titre);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--couleur-accent);
}

.contact-seul .horaire,
.contact-seul .coordonnees > div { text-align: left; }

.encadre-coordonnees .btn { margin-top: 1.4rem; }

.champ { margin-bottom: 1rem; }

.champ label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .3rem;
}

.champ input, .champ textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-champ);
  font: inherit;
  background: var(--couleur-champ);
  color: inherit;
}

.champ input:focus-visible, .champ textarea:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 1px;
}

/* Piège à robots : invisible pour l'humain, rempli par les automates. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.retour {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: var(--rayon-champ);
}

.retour.succes { background: var(--couleur-succes); }
.retour.erreur { background: var(--couleur-erreur); }

/* ---------- Pied ---------- */

.pied {
  padding: 2.5rem 0;
  border-top: 1px solid var(--couleur-filet);
  font-size: .9rem;
  color: var(--couleur-texte-doux);
}

.pied-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.pied nav { display: flex; gap: 1.2rem; }
.pied p { margin: 0; }
.signature { font-size: .82rem; }

/* Le logo Lewel Labs est un SVG inline peint en currentColor : il suit la
   couleur du texte du pied et reste lisible sur tous les skins, clairs comme
   sombres, sans variante par skin ni requête supplémentaire. */
.signature-logo {
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  text-decoration: none;
}
.signature-logo svg { display: block; height: 2.1rem; width: auto; }
.signature-logo:hover { color: var(--couleur-accent); }

/* ---------- Pages légales ---------- */

.legal { padding: var(--espace-section) 0; }
.legal h2 { margin-top: 2.4rem; }
.legal dl > div { padding: .4rem 0; }
.legal dt { font-weight: 600; }
.legal dd { margin: 0 0 .6rem; color: var(--couleur-texte-doux); }

/* ---------- Apparition ---------- */

.js [data-apparition] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

.js [data-apparition].vu {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-apparition] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 48rem) {
  .contact-grille { grid-template-columns: 1fr; gap: 2rem; }
  .hero-illustre .hero-inner,
  .apropos-illustre { grid-template-columns: 1fr; gap: 2rem; }
  .nav a:not(.btn-nav) { display: none; }
  .horaire, .coordonnees > div { flex-direction: column; gap: .2rem; }
  .horaire dd, .coordonnees dd { text-align: left; }
}