/* TS Menuiserie — identité visuelle reprise du site actuel (thème Craftmax).
   Sources : craftmax/assets/css/style.css (:root, typographies) et les
   surcharges Elementor de la page d'accueil.
   Mobile-first : les media queries desktop arrivent en phase 3. */

:root {
  /* Palette */
  --rouge: #d90429;          /* --thm-base du thème : accent, boutons, liens actifs */
  --rouge-fonce: #ca1d1d;    /* --thm-secondary : survol */
  --rouge-clair: #ec5a52;    /* même rouge éclairci, pour lisibilité sur fond sombre
                                (le rouge de marque ne donne que 3.33:1 sur #221715) */
  --brun-tres-fonce: #221715;/* fond des sections sombres */
  --brun-titre: #29231f;     /* couleur des titres */
  --texte: #444444;
  --creme: #eeead8;
  --gris-clair: #f5f5f5;
  --bordure: #dddddd;
  --blanc: #ffffff;

  /* Typographies */
  --font-corps: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-titre: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rythme */
  --gouttiere: 1rem;
  --section-y: 3.5rem;
  --max-largeur: 1200px;
  --radius: 4px;
}

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

body {
  margin: 0;
  font-family: var(--font-corps);
  font-size: 1.125rem;   /* 18px, comme le thème actuel */
  line-height: 1.556;    /* 28px */
  font-weight: 400;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  color: var(--brun-titre);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1rem; }

a { color: var(--rouge); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rouge-fonce); }

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

:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }

/* Sur-titre rouge en capitales du carrousel, repris du site actuel. Les
   sections, elles, démarrent toutes directement sur leur titre. */
.diapo div > p:first-child {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 0.5rem;
}

/* Sections */
main > section {
  padding: var(--section-y) var(--gouttiere);
  max-width: var(--max-largeur);
  margin-inline: auto;
}
#accueil {
  background: var(--brun-tres-fonce);
  color: var(--blanc);
  max-width: none;
  padding: 0;
  position: relative;
}
/* Les deux diapositives ont le même poids visuel : le titre de la seconde
   est un h2 pour la hiérarchie du document, pas pour la taille affichée. */
#accueil h1, #accueil h2 { color: var(--blanc); font-size: 2.25rem; }
.diapo div > p:first-child { color: var(--rouge-clair); }

/* Carrousel : défilement horizontal natif avec accroche CSS. Sans JavaScript,
   il reste balayable au doigt et à la molette. */
.diapos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.diapos::-webkit-scrollbar { display: none; }
.diapo {
  flex: 0 0 100%;
  /* Voile sombre sur la photo : sans lui, le texte blanc et le sur-titre
     rouge passent sous le seuil de contraste selon la zone de l'image. */
  background-image: linear-gradient(rgba(34, 23, 21, 0.78), rgba(34, 23, 21, 0.78)), var(--photo);
  background-size: cover;
  background-position: center;
  scroll-snap-align: start;
  padding: var(--section-y) var(--gouttiere) calc(var(--section-y) + 2.5rem);
}
.diapo:nth-child(1) { --photo: url('/assets/img/banniere-01.webp'); }
.diapo:nth-child(2) { --photo: url('/assets/img/banniere-02.webp'); }
.diapo > div { max-width: var(--max-largeur); margin-inline: auto; }

.diapos-controles {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  display: flex;
  gap: 0.5rem;
  padding-inline: var(--gouttiere);
  max-width: var(--max-largeur);
  margin-inline: auto;
}
.diapos-controles button[data-diapo] {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--blanc);
  background: transparent;
}
.diapos-controles button[aria-current="true"] {
  background: var(--rouge-clair);
  border-color: var(--rouge-clair);
}
#chiffres { background: var(--creme); max-width: none; }

/* En-tête / pied de page */
header, footer {
  padding: 1rem var(--gouttiere);
  background: var(--brun-tres-fonce);
  color: var(--blanc);
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
header > a {
  display: inline-block;
  flex: none;      /* sans quoi le logo se comprime quand la navigation est large */
}
header > a img { height: 2.25rem; width: auto; }

/* Menu mobile : bouton + aria-expanded, la navigation est son frère direct. */
.menu-bouton {
  padding: 0.75rem;
  background: transparent;
  border-color: transparent;
}
.menu-bouton:hover { background: transparent; border-color: transparent; }
.menu-bouton span,
.menu-bouton span::before,
.menu-bouton span::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--blanc);
  transition: transform 0.2s, background-color 0.2s;
}
.menu-bouton span::before,
.menu-bouton span::after { content: ''; position: relative; }
.menu-bouton span::before { top: -0.5rem; }
.menu-bouton span::after { top: calc(0.5rem - 2px); }
.menu-bouton[aria-expanded="true"] span { background: transparent; }
.menu-bouton[aria-expanded="true"] span::before { transform: translateY(0.5rem) rotate(45deg); }
.menu-bouton[aria-expanded="true"] span::after { transform: translateY(calc(-0.5rem + 2px)) rotate(-45deg); }

.menu-bouton[aria-expanded="false"] + nav { display: none; }

/* Panneau déroulant : l'en-tête étant transparent sur la bannière, le menu
   ouvert porte son propre fond. */
header nav {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--brun-tres-fonce);
  padding: 0.5rem var(--gouttiere) 1.5rem;
}
header nav ul { flex-direction: column; margin-top: 0; }

header nav ul, footer nav ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
header nav a, footer nav a, footer address a {
  font-family: var(--font-label);
  font-weight: 500;
  color: var(--blanc);
  text-decoration: none;
}
header nav a:hover, footer nav a:hover { color: var(--rouge-clair); }
footer address { font-style: normal; margin-bottom: 1rem; }

/* En-tête posé sur le carrousel, comme sur le site actuel : transparent,
   séparé de la photo par un simple filet clair. Seulement sur l'accueil :
   les pages légales n'ont pas de bannière sous l'en-tête. */
body:has(#accueil) { position: relative; }
body:has(#accueil) header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
/* La première diapositive laisse la place de l'en-tête au-dessus du texte. */
body:has(#accueil) .diapo { padding-block-start: calc(var(--section-y) + 4.5rem); }

/* Boutons et liens d'action */
button,
a.bouton {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--rouge);
  border-radius: var(--radius);
  background: var(--rouge);
  color: var(--blanc);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
button:hover,
a.bouton:hover {
  background: var(--rouge-fonce);
  border-color: var(--rouge-fonce);
  color: var(--blanc);
}

/* Filtres de la galerie : boutons secondaires, l'actif passe en rouge plein. */
#projets [role="group"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
#projets [role="group"] button {
  background: transparent;
  color: var(--brun-titre);
  border-color: var(--bordure);
  padding: 0.5rem 1rem;
}
#projets [role="group"] button:hover,
#projets [role="group"] button[aria-pressed="true"] {
  background: var(--rouge);
  border-color: var(--rouge);
  color: var(--blanc);
}

/* Illustrations de section (présentation, étapes) */
.illustration {
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 32rem;
}

/* Icônes reprises du site actuel. Décoratives : le libellé est juste à côté,
   d'où alt="" — les annoncer deux fois n'apporterait rien. */
#services img, #chiffres img { width: 3rem; height: auto; margin-bottom: 1rem; }
#avis img { width: 2.5rem; height: auto; margin-bottom: 1rem; }

/* Listes de contenu : services, projets, étapes, chiffres, avis */
/* Grilles fluides : auto-fit + minmax fait le passage 1 → 2 → 3 colonnes
   tout seul, sans media query. Une seule valeur à régler par grille. */
#services ul, #galerie, #etapes ol, #chiffres ul, #avis ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
#galerie { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
#chiffres ul { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
#avis ul { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
#services li, #avis li, #etapes li {
  padding: 1.5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  background: var(--blanc);
}
#services h3, #etapes h3 { margin-bottom: 0; }

#etapes { counter-reset: etape; }
#etapes li { counter-increment: etape; }
#etapes h3::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-family: var(--font-label);
  font-size: 2rem;
  font-weight: 600;
  color: var(--rouge);
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* Vignettes cliquables : le bouton ne doit pas ressembler à un bouton. */
.vignette {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius);
  cursor: zoom-in;
  overflow: hidden;
}
.vignette img { transition: transform 0.3s; }
.vignette:hover img, .vignette:focus-visible img { transform: scale(1.04); }

/* Visionneuse */
#visionneuse {
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}
#visionneuse::backdrop { background: rgba(34, 23, 21, 0.92); }
#visionneuse img {
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  width: auto;
  margin: 7vh auto 0;
  border-radius: var(--radius);
  object-fit: contain;
}
.visionneuse-position {
  font-family: var(--font-label);
  color: var(--blanc);
  text-align: center;
  margin: 1rem 0 0;
}
#visionneuse button {
  position: fixed;
  padding: 0;
  width: 3rem;
  height: 3rem;
  font-size: 1.75rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--blanc);
}
#visionneuse button:hover { background: var(--rouge); border-color: var(--rouge); }
#visionneuse [data-action="precedent"] { left: 1rem; top: 50%; transform: translateY(-50%); }
#visionneuse [data-action="suivant"]   { right: 1rem; top: 50%; transform: translateY(-50%); }
#visionneuse [data-action="fermer"]    { right: 1rem; top: 1rem; }

#galerie img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4 / 3;   /* cadrage homogène : les photos n'ont pas toutes le même format */
  object-fit: cover;
}

#chiffres li { font-family: var(--font-label); font-size: 1.125rem; }
#chiffres [data-counter] {
  display: block;
  font-size: 3rem;
  font-weight: 600;
  color: var(--rouge);
  line-height: 1;
}

#avis figure { margin: 0; }
#avis blockquote { margin: 0 0 1rem; font-size: 1.125rem; font-style: italic; }
#avis figcaption {
  font-family: var(--font-label);
  color: var(--brun-titre);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Pastille d'initiales à la place d'un portrait : les photos du site actuel
   sont des portraits de banque d'images livrés avec le thème, pas les clients. */
.pastille {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--blanc);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* FAQ */
#faq h3 { margin-top: 2rem; }
#faq h3:first-of-type { margin-top: 0; }

/* Coordonnées de contact */
.coordonnees {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.coordonnees li {
  padding: 1.5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
}
.coordonnees address { font-style: normal; margin-bottom: 1rem; }
.coordonnees .bouton { margin-bottom: 1rem; }

/* Pages légales */
main > h1, main > p, main > section > h2 { max-width: var(--max-largeur); margin-inline: auto; }
main > h1, main > p { padding-inline: var(--gouttiere); }
main > h1 { padding-top: var(--section-y); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/*** Responsive — au-delà des grilles fluides ci-dessus, seuls la barre de
     navigation, l'échelle typographique et les rythmes verticaux changent. ***/

/* Tablette */
@media (min-width: 48em) {
  :root {
    --gouttiere: 2rem;
    --section-y: 5rem;
  }
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  #accueil h1, #accueil h2 { font-size: 3rem; }

  /* Assez de place pour la navigation en clair : le hamburger disparaît et
     le panneau se remet dans le flux. */
  header { padding-block: 1.25rem; }
  header > a img { height: 3rem; }
  .menu-bouton { display: none; }
  .menu-bouton[aria-expanded="false"] + nav,
  header nav {
    display: block;
    position: static;
    background: transparent;
    padding: 0;
  }
  header nav ul { flex-direction: row; margin-top: 0; }

  /* Illustration à droite, texte à gauche, comme sur le site actuel. */
  #etapes {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  /* margin-inline: auto (règle des pages légales) réduit un élément de grille
     à son contenu : on le neutralise pour que le titre occupe la ligne. */
  #etapes > h2 { grid-column: 1 / -1; margin-inline: 0; max-width: none; }
  #etapes > ol { grid-column: 1; }
  #etapes > .illustration {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin-bottom: 0;
    max-width: none;
  }

  /* Le texte des sections d'intro reste lisible : pas de lignes à rallonge. */
  .diapo p { max-width: 46rem; }

  footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 1.5rem 2rem;
    padding-block: 2.5rem;
  }
  footer nav ul { margin-top: 0; flex-direction: column; }

}

/* Desktop */
@media (min-width: 64em) {
  :root { --section-y: 6.5rem; }
  h1 { font-size: 3.5rem; }

  /* Les sections pleine largeur gardent leur contenu dans le conteneur. */
  .diapo, .diapos-controles, #chiffres, header, footer {
    padding-inline: max(var(--gouttiere), (100vw - var(--max-largeur)) / 2 + var(--gouttiere));
  }

  .diapo { padding-block: 8rem calc(8rem + 2.5rem); }
  body:has(#accueil) .diapo { padding-block-start: calc(8rem + 3rem); }
  #accueil h1, #accueil h2 { font-size: 4rem; max-width: 20ch; }

}