/* ==========================================================================
   beton-cire-piece.css — blocs communs aux trois pages de pièce
   (beton-cire-salon.html, beton-cire-cuisine.html,
    beton-cire-salle-de-bain.html).

   Chargée APRÈS la feuille propre à chaque page. Elle ne s'appuie que sur
   les variables que les trois feuilles définissent à l'identique :
     --papier --encre --encre-douce --gris-texte --gris-leger
     --teinte --teinte-clair --sur-fond --sur-fond-doux
     --gout --ease
   Aucune classe de mise en page propre à une page n'est touchée ici.

   Deux blocs :
     1. le H1 du hero — le mot-clé de la page, au-dessus du grand titre
        manuscrit qui, lui, porte le nom de la teinte et change avec le JS ;
     2. la section « guide » en bas de page — le contenu de fond.
   ========================================================================== */

/* ==========================================================================
   1 · H1 du hero
   ========================================================================== */
/* Le grand titre esthétique (.hero__titre) reste piloté par le JS et n'est
   plus un titre de document : c'est ce H1 qui porte « béton ciré <pièce> ».
   Il suit --sur-fond, donc il bascule en clair sur les teintes sombres. */
.hero__h1{
  margin:0 0 28px;font-weight:400;font-size:clamp(19px,1.7vw,25px);line-height:1.25;
  letter-spacing:.015em;color:var(--sur-fond);
}
/* Le kicker reservait la place que la manuscrite deborde vers le haut ; c'est
   le H1 qui la precede maintenant, il reprend donc cette marge. (La page
   cuisine n'a pas de kicker et cale son H1 dans sa propre feuille.) */
.hero__kicker{margin-bottom:10px}

/* ==========================================================================
   2 · Section « guide » — le contenu de fond de la page
   ========================================================================== */
.guide{background:var(--papier);padding:clamp(74px,8vw,118px) var(--gout) clamp(78px,8vw,122px)}

/* ---------- en-tête ---------- */
.guide__entete{max-width:64ch}
.guide__surtitre{margin:0 0 14px;font-size:44px;line-height:1;color:var(--gris-leger)}
.guide__chapo{margin:26px 0 0;max-width:60ch;font-size:17px;line-height:1.75;color:var(--gris-texte);text-wrap:pretty}

/* ---------- corps rédactionnel : deux colonnes d'articles ---------- */
.guide__corps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(34px,4vw,62px);margin-top:clamp(46px,5vw,78px);
}
/* le filet reprend la teinte courante : le bloc suit la page */
.guide__corps h3{
  margin:0;font-size:20px;line-height:1.28;font-weight:400;letter-spacing:.01em;color:var(--encre);
}
/* Le filet reprend la teinte, legerement rabattue vers l'encre : sur Craie
   111 ou Opale 112, la teinte pure serait invisible sur le fond blanc.
   La premiere declaration sert de repli si color-mix n'est pas supporte. */
.guide__corps h3::before{content:"";display:block;width:36px;height:2px;margin-bottom:18px;background:var(--teinte)}
.guide__corps h3::before{background:color-mix(in srgb, var(--teinte) 78%, var(--encre))}
.guide__corps p{margin:16px 0 0;font-size:15px;line-height:1.9;color:var(--gris-texte);text-wrap:pretty}
.guide__corps a{border-bottom:1px solid rgba(29,29,27,.26);transition:border-color .25s}
.guide__corps a:hover{border-bottom-color:var(--encre)}
.guide__corps strong{font-weight:500;color:var(--encre-douce)}

/* ---------- repères : bande teintée, une donnée par case ----------
   Le fond est --teinte-clair et les encres --sur-fond : sur une teinte quasi
   noire, la bande passe en sombre et le texte en clair, sans règle de plus. */
.guide__reperes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:1px;margin-top:clamp(50px,5vw,82px);background:rgba(29,29,27,.14);
}
.repere{background:var(--teinte-clair);padding:26px 24px 28px}
.repere__cle{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sur-fond-doux)}
.repere__val{display:block;margin:11px 0 0;font-size:29px;line-height:1.05;color:var(--sur-fond)}
.repere p{margin:12px 0 0;font-size:13.5px;line-height:1.7;color:var(--sur-fond-doux)}

/* ---------- questions fréquentes ---------- */
.guide__faq{margin-top:clamp(50px,5vw,82px);max-width:80ch}
.guide__faq-titre{margin:0 0 8px;font-size:20px;line-height:1.25;font-weight:400;letter-spacing:.01em;color:var(--encre)}
.guide__faq details{border-top:1px solid rgba(29,29,27,.14)}
.guide__faq details:last-of-type{border-bottom:1px solid rgba(29,29,27,.14)}
.guide__faq summary{
  display:flex;align-items:baseline;gap:18px;padding:21px 0;cursor:pointer;
  font-size:16px;line-height:1.45;color:var(--encre);list-style:none;
}
.guide__faq summary::-webkit-details-marker{display:none}
.guide__faq summary::after{content:"+";margin-left:auto;font-size:21px;line-height:1;color:var(--gris-leger)}
.guide__faq details[open] summary::after{content:"–"}
.guide__faq summary:hover{color:var(--gris-texte)}
.guide__faq details p{margin:0 0 22px;max-width:66ch;font-size:15px;line-height:1.9;color:var(--gris-texte);text-wrap:pretty}
.guide__faq details a{border-bottom:1px solid rgba(29,29,27,.26)}

/* ---------- maillage : la page mère et les deux autres pièces ---------- */
.guide__liens{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:14px;margin-top:clamp(50px,5vw,82px);
}
.lien-carte{
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:152px;padding:24px;border:1px solid rgba(29,29,27,.16);
  transition:background .3s,border-color .3s;
}
/* survol volontairement neutre, pas --teinte-clair : sur une teinte quasi
   noire ce fond passerait en sombre sous un texte reste sombre */
.lien-carte:hover{background:rgba(29,29,27,.035);border-color:var(--encre)}
.lien-carte__cle{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-leger)}
.lien-carte__titre{display:block;margin-top:11px;font-size:19px;line-height:1.25;color:var(--encre)}
.lien-carte__go{font-size:12px;letter-spacing:.1em;color:var(--gris-texte)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:760px){
  .guide{padding:72px var(--gout) 80px}
  .guide__surtitre{font-size:36px}
  .guide__chapo{font-size:16px}
  .guide__corps{grid-template-columns:1fr;gap:38px}
  .repere__val{font-size:26px}
}