/* ==========================================================================
   BRASÉ'ROQ — BASE
   Remise à zéro, typographie, gabarits de page, jeu de lumière et
   animations d'apparition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REMISE À ZÉRO
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Les ancres ne passent pas sous la barre de navigation fixe */
  scroll-padding-top: calc(var(--hauteur-nav) + 2rem);
  /* Aucun défilement horizontal possible. On utilise `clip` plutôt que
     `hidden` car `hidden` casserait les éléments en position collante
     (le récapitulatif du configurateur, le schéma du brasero). */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--c-fonte);
  color: var(--c-texte);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: var(--lh-texte);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

/* Cible tactile confortable sur mobile */
a, button, label, summary { -webkit-tap-highlight-color: rgba(242,107,15,.2); }

/* --------------------------------------------------------------------------
   2. FOCUS CLAVIER
   Indispensable pour la navigation au clavier. On ne l'affiche que pour
   les personnes qui naviguent au clavier (:focus-visible).
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-flamme-clair);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

/* Lien d'évitement pour les lecteurs d'écran */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-lightbox);
  background: var(--c-flamme);
  color: #140A02;
  padding: var(--e-3) var(--e-5);
  font-weight: 700;
  border-radius: 0 0 var(--r-m) 0;
}
.saut-contenu:focus { left: 0; }

/* Masqué à l'écran mais lu par les 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;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-titre);
  color: var(--c-titre);
  font-weight: 500;
  line-height: var(--lh-titre);
  letter-spacing: .005em;
  text-wrap: balance;         /* évite les mots orphelins en fin de titre */
}

h1 { font-size: var(--t-3xl); font-weight: 400; line-height: var(--lh-serre); }
h2 { font-size: var(--t-2xl); font-weight: 400; }
h3 { font-size: var(--t-xl);  font-weight: 500; }
h4 { font-size: var(--t-l);   font-weight: 500; }

p { text-wrap: pretty; }

strong, b { color: var(--c-titre); font-weight: 600; }

/* Titre monumental (hero) */
.titre-geant {
  font-size: var(--t-4xl);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* Petit surtitre au-dessus des titres de section */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--f-titre);
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-flamme-clair);
  margin-bottom: var(--e-4);
  flex-wrap: wrap;
}
/* Sur petit écran, cet interlettrage généreux fait déborder la ligne */
@media (max-width: 520px) {
  .surtitre { letter-spacing: .16em; font-size: var(--t-xs); }
  .surtitre::before, .surtitre::after { width: 22px; }
}
.surtitre::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--g-flamme-h);
  flex-shrink: 0;
}
.surtitre--centre { justify-content: center; }
.surtitre--centre::after {
  content: "";
  width: 34px; height: 1px;
  background: linear-gradient(270deg, var(--c-braise), var(--c-etincelle));
  flex-shrink: 0;
}

/* Mot mis en feu dans un titre */
.feu {
  background: var(--g-texte);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-flamme-clair);   /* repli si le dégradé n'est pas géré */
}

/* Chapeau introductif */
.chapeau {
  font-size: var(--t-l);
  color: var(--c-texte-doux);
  font-weight: 300;
  line-height: 1.65;
  max-width: var(--largeur-texte);
}

.texte-doux   { color: var(--c-texte-doux); }
.texte-faible { color: var(--c-texte-faible); font-size: var(--t-m); }
.centre       { text-align: center; }
.centre .chapeau,
.centre .mesure { margin-inline: auto; }
.mesure { max-width: var(--largeur-texte); }

/* --------------------------------------------------------------------------
   4. GABARITS
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}
.conteneur--large  { max-width: var(--largeur-large); }
.conteneur--etroit { max-width: 900px; }

.section { position: relative; padding-block: var(--section-y); }
.section--cuve  { background: var(--c-cuve); }
.section--serre { padding-block: calc(var(--section-y) * .6); }
.section--haut-nul { padding-top: 0; }

/* Filet lumineux qui sépare deux sections */
.filet-braise {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(242,107,15,.05) 15%,
              rgba(242,107,15,.45) 50%,
              rgba(242,107,15,.05) 85%,
              transparent 100%);
}

/* En-tête de section réutilisable */
.entete-section { margin-bottom: clamp(2.5rem, 4vw, 4.5rem); }
.entete-section h2 { margin-bottom: var(--e-4); }

/* Grilles */
.grille { display: grid; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.grille--auto { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

@media (max-width: 980px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
}

/* Duo texte + image, alternable */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.duo--inverse > :first-child { order: 2; }
/* Colonnes alignées en haut plutôt que centrées */
.duo--haut { align-items: start; }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: var(--e-6); }
  .duo--inverse > :first-child { order: 0; }
}

.pile   { display: flex; flex-direction: column; gap: var(--e-4); }
.rangee { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; }
.rangee--centre { justify-content: center; }

/* --------------------------------------------------------------------------
   5. LE JEU DE LUMIÈRE
   Deux couches fixes, posées derrière le contenu, qui réagissent :
   — .lueur-curseur suit la souris (variables --souris-x / --souris-y)
   — .lueur-ambiante respire au fil du scroll (variable --chaleur)
   Aucune des deux n'intercepte les clics.
   -------------------------------------------------------------------------- */
.couche-lumiere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-lueur);
  /* La torche est un grand disque qui dépasse largement de l'écran :
     on le découpe ici, sinon il élargit la page sur mobile. */
  overflow: hidden;
}

/* La torche qui suit le curseur.
   On déplace un disque en `transform` (calculé par le processeur graphique)
   plutôt que de redessiner un dégradé plein écran à chaque mouvement :
   c'est ce qui garde l'effet parfaitement fluide.
   La transition crée une légère traîne, comme une lanterne qu'on promène. */
.lueur-curseur {
  position: absolute;
  top: 0; left: 0;
  width: 1300px; height: 1300px;
  margin: -650px 0 0 -650px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
      rgba(242,107,15,.13) 0%,
      rgba(194,65,12,.055) 42%,
      transparent 72%);
  transform: translate3d(var(--souris-px, 50vw), var(--souris-py, 30vh), 0);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity var(--tr-normal);
  will-change: transform;
  opacity: 0;
}
/* Allumée seulement quand une vraie souris est détectée */
.lueur-curseur.est-allumee { opacity: 1; }

/* Sur écran tactile, pas de curseur : on n'affiche pas la torche */
@media (hover: none) {
  .lueur-curseur { display: none; }
}

.lueur-ambiante {
  position: absolute;
  inset: 0;
  /* Deux foyers fixes : un en bas (le brasier), un en haut à droite */
  background:
    radial-gradient(90vw 60vh at 50% 108%,
      rgba(194,65,12, calc(.20 * var(--chaleur))) 0%, transparent 65%),
    radial-gradient(60vw 45vh at 88% -8%,
      rgba(163,21,21, calc(.16 * var(--chaleur))) 0%, transparent 62%);
  transition: opacity var(--tr-lent);
}

/* Le canvas des braises qui montent */
#braises {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-lueur);
  opacity: .85;
}

/* Tout le contenu passe au-dessus des couches lumineuses */
.page { position: relative; z-index: var(--z-contenu); }

/* Barre de progression de lecture, en haut de l'écran */
.progression {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll));
  background: var(--g-flamme-h);
  z-index: calc(var(--z-nav) + 1);
  box-shadow: 0 0 12px rgba(242,107,15,.7);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. APPARITION AU SCROLL
   Les éléments .reveal montent et s'éclaircissent quand ils entrent dans
   l'écran. Le décalage --d permet de faire apparaître une série en cascade.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity   700ms cubic-bezier(.16,1,.3,1) var(--d, 0ms),
    transform 700ms cubic-bezier(.16,1,.3,1) var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.est-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
.reveal--gauche { transform: translate3d(-32px, 0, 0); }
.reveal--droite { transform: translate3d(32px, 0, 0); }
.reveal--zoom   { transform: scale(.96); }

/* Sur mobile, les colonnes sont empilées : une entrée latérale n'a plus de
   sens, et son décalage élargirait la page tant qu'elle n'est pas déclenchée.
   On repasse donc tout le monde en entrée verticale. */
@media (max-width: 900px) {
  .reveal--gauche,
  .reveal--droite { transform: translate3d(0, 28px, 0); }
}

/* Si le JS ne tourne pas, rien ne doit rester invisible */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  #braises { display: none; }
}

/* --------------------------------------------------------------------------
   7. IMAGES ET CADRES
   -------------------------------------------------------------------------- */
.cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  border: 1px solid var(--c-trait);
  background: var(--c-suie);
  box-shadow: var(--ombre-m);
}
.cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr-lent);
}

/* ÉTALONNAGE PHOTO
   Les clichés viennent de l'atelier, de chantiers et de soirées : lumières,
   appareils et saisons très différents. Ce réglage commun — un peu moins de
   saturation, un peu plus de contraste, une légère baisse de luminosité —
   les fait tenir ensemble et les accorde au fond sombre du site.
   Il ne s'applique évidemment pas aux schémas techniques. */
.cadre img,
.carte__media img {
  filter: saturate(.9) contrast(1.06) brightness(.93);
}

/* Cadre réservé aux rendus techniques détourés (fond transparent) */
.cadre--schema {
  background:
    radial-gradient(72% 72% at 50% 45%, rgba(242,107,15,.09), transparent 70%),
    var(--c-cuve);
}
.cadre--schema img {
  object-fit: contain;
  padding: clamp(1rem, 3vw, 2.5rem);
  filter: none;
}
.cadre--schema::after { display: none; }
.cadre--haut   { aspect-ratio: 3 / 4; }
.cadre--carre  { aspect-ratio: 1 / 1; }
.cadre--large  { aspect-ratio: 4 / 3; }
.cadre--pano   { aspect-ratio: 16 / 9; }

/* Léger reflet chaud en haut du cadre, comme un métal qui accroche la lumière */
.cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,200,97,.09) 0%, transparent 42%);
}

.cadre--zoom:hover img { transform: scale(1.05); }

/* Légende sous une image */
.legende {
  margin-top: var(--e-3);
  font-size: var(--t-m);
  color: var(--c-texte-faible);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   8. UTILITAIRES
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   IMPRESSION
   Un client imprime parfois un devis, une fiche technique ou un article.
   On repasse alors en noir sur blanc, on retire tout le décor, et surtout
   on force l'affichage des éléments animés — sinon la page sortirait
   avec des blocs blancs à la place du texte.
   -------------------------------------------------------------------------- */
@media print {
  .couche-lumiere, #braises, .progression, .remonter,
  .nav, .hero__halo, .hero__fond, .saut-contenu { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }

  .reveal { opacity: 1 !important; transform: none !important; }

  .section, .hero, .hero-page { padding-block: 1.2rem !important; }
  .section--cuve, .carte, .panneau, .appel, .pied { background: #fff !important; }

  h1, h2, h3, h4, strong, .specs__val { color: #000 !important; }
  p, li, .chapeau, .carte__texte { color: #222 !important; }
  .feu { -webkit-text-fill-color: #000 !important; color: #000 !important; }

  .carte, .panneau, .appel, .cadre, .encart { border-color: #bbb !important; box-shadow: none !important; }

  /* On donne l'adresse des liens, invisible à l'écran mais utile sur papier */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }

  .cadre img, .carte__media img { filter: none !important; }

  /* Évite qu'un titre se retrouve seul en bas de page */
  h1, h2, h3 { break-after: avoid; }
  .carte, .etape, .encart { break-inside: avoid; }
}

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.mt-6 { margin-top: var(--e-6); }
.mt-7 { margin-top: var(--e-7); }
.mb-4 { margin-bottom: var(--e-4); }
.mb-5 { margin-bottom: var(--e-5); }
.mb-6 { margin-bottom: var(--e-6); }

.pleine-largeur { width: 100%; }

@media (max-width: 640px) {
  .cacher-mobile { display: none !important; }
}