/* =========================================================
   Revboost — site vitrine
   Direction : « Atelier, la nuit ». La palette d'un des sites
   livrés (alex-menuiserie-bois) portée sur un fond sombre.

   POURQUOI LES VALEURS NE SONT PAS RETOUCHÉES. Chaque fois
   qu'on éclaircit une de ces terres pour la rendre lisible sur
   du noir, elle atterrit sur l'accent d'un AUTRE site client :
   #C85F35 à ΔE 5,5 de #BC5230, #C9522C à 7,1, #CE5A2E à 8,3,
   #D4643A à 8,3. Entre L* 45 et 60, la terre cuite éclaircie
   est déjà prise quatre fois. La seule reprise sûre est la
   reprise à l'identique : c'est l'adaptation qui crée la
   collision, pas la réutilisation. Ne pas « ajuster » ces hex.

   CE QUI EN DÉCOULE, ET QU'IL NE FAUT PAS DÉFAIRE :
   terre cuite et chêne plafonnent à 3,04:1 et 3,07:1 sur le
   fond. Ils ne portent JAMAIS de texte courant. Ils vivent en
   grands aplats (crème dessus : 5,96:1 et 5,90:1) et en
   non-texte (liserés, filets, soulignements). Tout le texte est
   en pierre ou en crème. Les chiffres de section sont en pierre
   et non en terre cuite pour cette raison, pas par goût.

   LE FOND. #0F0C0A, chroma 1,3 : la teinte existe mais n'est
   pas perceptible. À comparer à P16 « noyer nuit » #1E1712,
   chroma 5,1, qui est un vrai brun. L'encre d'Alex #1A1410
   (chroma 3,9, ΔE 3 de P16) a été écartée pour cette raison :
   elle lirait « bois ». Ne pas la réintroduire.

   P2 est réservée à Revboost dans diversite-catalogue.md
   depuis le 27/08/2026 et sortie de la rotation client.

   Typo : Archivo (titres, axe de largeur) + Public Sans (corps)
   Signature : la paire. Le produit est toujours montré deux
   fois, grand écran et téléphone, jamais l'un sans l'autre.
   Aucune matière, aucun grain : les seules images sont des
   écrans. C'est ça, et pas la teinte, qui distingue l'agence
   d'une menuiserie.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("polices/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("polices/public-sans-var.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- les valeurs d'alex-menuiserie-bois, telles quelles --- */
  --fond:        #0F0C0A;   /* bg-deep — chroma 1,3 */
  --texte:       #FBF6EC;   /* cream */
  --texte-doux:  #B79C75;   /* stone */
  --accent:      #A23F22;   /* clay  — aplats et non-texte SEULEMENT */
  --fort:        #8E4F2A;   /* wood  — aplats SEULEMENT */
  --parchemin:   #F2EAD9;
  --creme-doux:  #ECE0C9;
  --ligne-claire:#D6C3A2;

  /* --- les deux seuls dérivés, tous deux de faible chroma --- */
  --panneau:     #171412;   /* chroma 1,9 */
  --trait:       #282422;   /* chroma 2,5 */
  --panneau-2:   #1E1A17;   /* carte sur panneau */

  /* --- rôles --- */
  --lien:        var(--texte-doux);
  --lien-clair:  var(--ligne-claire);
  --sur-accent:      var(--texte);
  --sur-accent-doux: var(--creme-doux);
  --fort-texte:  var(--texte);
  --fort-doux:   var(--creme-doux);
  --fort-trait:  #6E3C1F;

  --f-titre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-corps: "Public Sans", system-ui, -apple-system, sans-serif;

  --e-1: 8px;  --e-2: 16px; --e-3: 24px; --e-4: 32px;
  --e-5: 48px; --e-6: 64px; --e-7: 96px; --e-8: 128px;

  --w-large: 1180px;
  --w-texte: 62ch;

  --t: 180ms cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-corps);
  font-size: 18px;
  line-height: 1.62;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); text-underline-offset: 3px; }

.wrap { width: 100%; max-width: var(--w-large); margin: 0 auto; padding: 0 28px; }

/* ---------- typographie ---------- */
h1, h2, h3 { font-family: var(--f-titre); font-weight: 600; letter-spacing: -0.02em; }
h1 {
  font-size: clamp(40px, 6.4vw, 88px);
  font-stretch: 112%;          /* l'axe de largeur : la signature typographique */
  line-height: 1.0;
  letter-spacing: -0.038em;
}
h2 { font-size: clamp(30px, 4vw, 46px); font-stretch: 106%; line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: 21px; line-height: 1.3; font-stretch: 100%; }

p { max-width: var(--w-texte); }
p + p { margin-top: var(--e-3); }
.chapo { font-size: 22px; line-height: 1.5; color: var(--texte-doux); margin-top: var(--e-3); max-width: 54ch; }
.mention { font-size: 14px; color: var(--texte-doux); }
strong { font-weight: 600; }

/* ---------- bandes : le rythme de la page ----------
   Chaque section est une bande pleine largeur. C'est l'alternance
   des bandes qui porte la couleur, pas des touches posées ici et là. */
.bande { padding: var(--e-8) 0; }
.bande--haut  { padding: var(--e-6) 0 var(--e-7); }
.bande--serre { padding: var(--e-7) 0; }

.bande--clair   { background: var(--fond);    color: var(--texte); }
.bande--panneau { background: var(--panneau); color: var(--texte); }
.bande--fort    { background: var(--fort);    color: var(--fort-texte); }
.bande--accent  { background: var(--accent);  color: var(--sur-accent); }

.bande--fort h1, .bande--fort h2, .bande--fort h3 { color: var(--fort-texte); }
.bande--fort p, .bande--fort .chapo, .bande--fort li { color: var(--fort-doux); }
.bande--fort a { color: var(--fort-texte); }

.bande--accent h1, .bande--accent h2, .bande--accent h3 { color: var(--sur-accent); }
.bande--accent p, .bande--accent .chapo, .bande--accent li { color: var(--sur-accent-doux); }
.bande--accent a { color: var(--sur-accent); }

/* ---------- numérotation de section ----------
   Les sections de l'accueil sont un argument qui se déroule dans
   l'ordre : le problème, ce qui est livré, ce qui se passe après,
   comment on s'y prend. Le numéro dit cet ordre, il ne décore pas. */
.rang { display: flex; align-items: baseline; gap: var(--e-2); margin-bottom: var(--e-3); }
.rang b {
  font-family: var(--f-titre); font-weight: 700;
  font-size: 15px; font-stretch: 118%; letter-spacing: .04em;
  color: var(--texte-doux);
}
.rang span {
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texte-doux);
}
.rang::after {
  content: ""; flex: 1 1 auto; height: 2px;
  background: var(--accent);        /* la terre cuite en non-texte : 3,04:1 */
  align-self: center; margin-left: var(--e-2);
}
.bande--fort .rang b, .bande--fort .rang span { color: var(--fort-doux); }
.bande--fort .rang::after { background: var(--fort-trait); }
.bande--accent .rang b, .bande--accent .rang span { color: var(--sur-accent-doux); }
.bande--accent .rang::after { background: var(--sur-accent-doux); }

.bande-entete { max-width: 58ch; margin-bottom: var(--e-6); }
.bande-entete p { margin-top: var(--e-3); color: var(--texte-doux); }
.bande--fort .bande-entete p { color: var(--fort-doux); }
.bande--accent .bande-entete p { color: var(--sur-accent-doux); }

/* ---------- hero ---------- */
.chapeau {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--accent); color: var(--sur-accent);
  padding: 8px 14px; margin-bottom: var(--e-4);
}
.hero-h1 { max-width: 16ch; }
.hero-h1 em { font-style: normal; color: var(--texte-doux); }

/* ---------- LA PAIRE — signature du site ----------
   Chaque format a SON cadre. Un cadre 16/10 unique rognerait la
   capture de téléphone, qui est en portrait, jusqu'à l'illisible. */
.paire {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: var(--e-4);
  align-items: end;
}
.paire figure { margin: 0; }
.paire picture { display: block; }   /* sinon un filet de 4 px sous chaque capture */
.paire img { width: 100%; border: 1px solid var(--trait); }
.paire-large img  { aspect-ratio: 16 / 10;   object-fit: cover; object-position: top; }
.paire-etroit img { aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.paire figcaption { font-size: 13px; color: var(--texte-doux); margin-top: var(--e-1); }
/* Les captures sont sombres et dorées : posées sur le chêne elles s'y
   fondaient. Un cadre crème les détache du bloc. */
.bande--fort .paire img { border-color: var(--fort-doux); }
.bande--fort .paire figcaption { color: var(--fort-doux); }

/* ---------- ANCRE 1 : la barre d'adresse ----------
   Le produit en un objet : une adresse à soi. Du monde des écrans,
   jamais du bois. */
.ancre-adresse {
  margin-top: var(--e-6);
  border: 2px solid var(--trait); border-radius: 999px;
  padding: clamp(14px, 2.2vw, 26px) clamp(20px, 3.4vw, 44px);
  display: flex; align-items: baseline; gap: .35em; flex-wrap: wrap;
  background: var(--fond);
}
.ancre-adresse .proto { font-size: clamp(14px, 1.6vw, 20px); color: var(--texte-doux); font-weight: 600; }
.ancre-adresse .nom {
  font-family: var(--f-titre); font-weight: 700; font-stretch: 108%;
  font-size: clamp(30px, 6.6vw, 76px); letter-spacing: -0.04em;
  line-height: 1; color: var(--texte);
}
.ancre-adresse .nom i { font-style: normal; color: var(--texte-doux); }
.ancre-legende { margin-top: var(--e-3); color: var(--texte-doux); font-size: 17px; }

/* ---------- ANCRE 2 : les trois riens ----------
   Trois mots du texte validé, posés en grand. Rien d'ajouté. */
.ancre-trio { margin-top: var(--e-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-5); }
.ancre-trio > div { border-top: 3px solid var(--sur-accent); padding-top: var(--e-3); }
.ancre-trio b {
  display: block; font-family: var(--f-titre); font-weight: 700; font-stretch: 118%;
  font-size: clamp(40px, 6vw, 76px); line-height: .95; letter-spacing: -0.045em;
  color: var(--sur-accent);
}
.ancre-trio span { display: block; margin-top: var(--e-2); font-size: 18px; font-weight: 600; color: var(--sur-accent); }

/* ---------- cartes ---------- */
.cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
.carte {
  background: var(--panneau);
  border-left: 4px solid var(--accent);   /* terre cuite en non-texte */
  padding: var(--e-4);
}
.bande--panneau .carte { background: var(--panneau-2); }
.carte h3 { margin-bottom: var(--e-1); }
.carte p { color: var(--texte-doux); font-size: 17px; max-width: none; }

/* ---------- les étapes ---------- */
.etapes { list-style: none; counter-reset: e; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-5); }
.etapes li { counter-increment: e; border-top: 2px solid var(--trait); padding-top: var(--e-3); }
.etapes li::before {
  content: "0" counter(e);
  display: block; margin-bottom: var(--e-2);
  font-family: var(--f-titre); font-weight: 700; font-stretch: 118%;
  font-size: clamp(34px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.04em;
  color: var(--texte-doux);
}
.etapes li p { max-width: none; font-size: 17px; color: var(--texte-doux); }

/* ---------- FAQ ---------- (details/summary : natif, aucun JavaScript) */
.faq { border-top: 1px solid var(--trait); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--e-3) 44px var(--e-3) 0;
  position: relative; font-family: var(--f-titre); font-weight: 600;
  font-stretch: 104%; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.3;
  letter-spacing: -0.02em; color: var(--texte);
  transition: color var(--t);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--texte-doux); }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px;
  background: var(--ligne-claire); transform: translateY(-50%);
}
.faq summary::before {
  content: ""; position: absolute; right: 15px; top: 50%; width: 2px; height: 16px;
  background: var(--ligne-claire); transform: translateY(-50%);
  transition: opacity var(--t);
}
.faq details[open] summary::before { opacity: 0; }
.faq .reponse { padding: 0 0 var(--e-4); }
.faq .reponse p { color: var(--texte-doux); max-width: 66ch; }

/* ---------- actions ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); align-items: center; }
.bouton {
  display: inline-block; padding: 16px 30px;
  font-family: var(--f-corps); font-size: 16px; font-weight: 600;
  text-decoration: none; border: 2px solid transparent;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.bouton-plein { background: var(--lien); color: var(--fond); }
.bouton-plein:hover { background: var(--lien-clair); }
/* Sur le chêne, un bouton terre cuite disparaîtrait : deux tons de même
   clarté. Il s'inverse en crème. */
.bande--fort .bouton-plein { background: var(--fort-texte); color: var(--fort); }
.bande--fort .bouton-plein:hover { background: var(--fort-doux); }
.bande--accent .bouton-plein { background: var(--sur-accent); color: var(--accent); }
.bande--accent .bouton-plein:hover { background: var(--sur-accent-doux); }
.bouton-ligne { border-color: var(--trait); color: var(--texte); }
.bouton-ligne:hover { border-color: var(--texte-doux); }
.bande--fort .bouton-ligne { border-color: var(--fort-doux); color: var(--fort-texte); }
.bande--fort .bouton-ligne:hover { border-color: var(--fort-texte); }

.courriel {
  font-family: var(--f-titre); font-stretch: 102%; font-weight: 700;
  font-size: clamp(22px, 3vw, 36px); letter-spacing: -0.03em;
  color: var(--lien); text-decoration: none;
  border-bottom: 3px solid var(--accent); padding-bottom: 4px;
  transition: opacity var(--t);
}
.courriel:hover { opacity: .72; }
.bande--fort .courriel { color: var(--fort-texte); border-bottom-color: var(--fort-texte); }
.bande--accent .courriel { color: var(--sur-accent); border-bottom-color: var(--sur-accent); }

/* ---------- listes ---------- */
.liste { list-style: none; }
.liste li { position: relative; padding-left: var(--e-3); margin-top: var(--e-2); }
.liste li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 1px; background: var(--texte-doux); }

/* ---------- en-tête ---------- */
.entete { position: sticky; top: 0; z-index: 40; background: var(--fond); border-bottom: 1px solid var(--trait); }
.entete .wrap {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
}
.marque {
  font-family: var(--f-titre); font-weight: 700; font-stretch: 108%;
  font-size: 22px; letter-spacing: -0.03em;
  color: var(--texte); text-decoration: none;
}
.marque i { font-style: normal; color: var(--accent); }
.nav { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.nav a { font-size: 16px; color: var(--texte-doux); text-decoration: none; transition: color var(--t); }
.nav a:hover { color: var(--texte); }
.nav a[aria-current="page"] { color: var(--texte); font-weight: 600; }

/* ---------- pages légales ---------- */
.legal h2 { font-size: 26px; margin-top: var(--e-6); }
.legal h2:first-of-type { margin-top: var(--e-5); }
.legal p, .legal ul { margin-top: var(--e-3); }
/* `.bloc-texte` partage la balise avec `.wrap` : lui donner un max-width
   plus étroit RECENTRE tout le bloc et le décale par rapport à l'en-tête, qui
   reste calé sur 1180 px. La largeur de lecture se limite donc sur les enfants,
   pas sur le conteneur. */
.legal .bloc-texte { max-width: var(--w-large); }
.legal .bloc-texte > * { max-width: 78ch; }
.legal .groupe { margin-top: var(--e-3); }
.legal .groupe p { margin-top: var(--e-1); }

/* ---------- pied de page ---------- */
.pied { background: var(--panneau); border-top: 1px solid var(--trait); padding: var(--e-6) 0 var(--e-4); }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--e-5); }
.pied p, .pied li, .pied a { font-size: 15px; color: var(--texte-doux); }
.pied h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte); margin-bottom: var(--e-2); font-family: var(--f-corps); font-weight: 600; }
.pied ul { list-style: none; }
.pied li { padding: 4px 0; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--texte); text-decoration: underline; }
.pied-baseline { margin-top: 12px; max-width: 46ch; }
.pied-bas { margin-top: var(--e-5); padding-top: var(--e-3); border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); justify-content: space-between; }

/* ---------- accessibilité ---------- */
a:focus-visible, summary:focus-visible { outline: 3px solid var(--ligne-claire); outline-offset: 3px; }
.bande--accent a:focus-visible, .bande--accent summary:focus-visible,
.bande--fort a:focus-visible { outline-color: var(--texte); }
.saut-contenu { position: absolute; left: -9999px; background: var(--fond); color: var(--texte); padding: 14px 18px; z-index: 60; border: 2px solid var(--texte); }
.saut-contenu:focus { left: 16px; top: 16px; position: fixed; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- espacements utilitaires ---------- */
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.apres-ancre { margin-top: var(--e-6); }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .etapes { grid-template-columns: repeat(2, 1fr); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .ancre-trio { gap: var(--e-4); }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }
  .bande { padding: var(--e-7) 0; }
  .bande--serre, .bande--haut { padding: var(--e-6) 0; }
  .chapo { font-size: 19px; }
  .cartes, .etapes, .ancre-trio { grid-template-columns: 1fr; gap: var(--e-4); }
  /* la paire tient encore : le téléphone rétrécit, il ne disparaît pas */
  .paire { grid-template-columns: minmax(0, 1fr) 96px; gap: var(--e-2); }
  /* « Sur un téléphone » passe sur deux lignes dans une colonne de 96 px,
     « Sur un ordinateur » sur une seule : sans hauteur commune, l'alignement
     par le bas décale les deux images l'une par rapport à l'autre. */
  .paire figcaption { font-size: 12px; min-height: 2.8em; }
  .ancre-adresse { border-radius: 22px; }
}
@media (max-width: 380px) {
  .nav { gap: var(--e-2); }
  .nav a { font-size: 15px; }
}