/* HABITAT CONFORT — charte « Ardoise & Galet » v1.0
   Ordre de chargement : main.css → components.css → responsive.css (cascade d'origine conservée). */
/* Couche finale d'adaptation aux appareils : petits téléphones (320 px), écrans courts (paysage), correctifs mobiles */
/* Correctifs responsive de la home */
@media (max-width:479px){
  .chiffres b{ font-size:44px; }
  .caption{ flex-direction:column; gap:4px; }
  .contact__ways .big{ font-size:24px; }
  .protocole{ grid-template-columns:1fr; }
  .exp__name{ font-size:26px; }
}
@media (max-width:1023px){ .exp__item a{ grid-template-columns:1fr 44px; } }
.hero__h1,.display{ overflow-wrap:break-word; }
@media (min-width:1024px) and (max-width:1279px){ .hero__h1{ max-width:11em; } }


.hero--tight .hero__canvas{ opacity:.3; transition:opacity 400ms var(--ease); }
.phero--wide .h1{ max-width:20em; }

/* Écrans très courts (téléphone en paysage, petites fenêtres) : pas d'épinglage */
@media (max-height:560px){
  .hero{ height:auto; }
  .hero__stick{ position:relative; height:auto; min-height:100vh; min-height:100svh; }
  .hero__copy{ height:auto; min-height:100vh; min-height:100svh; justify-content:flex-start; padding-top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 24px); padding-bottom:48px; }
  .hero__canvas{ opacity:.3; }
  .hero__scroll,.hero__hud{ display:none; }
}

/* Très petits téléphones (320 px, iPhone SE 1re gén.) */
@media (max-width:359px), (max-width:479px) and (max-height:700px){
  .hero__h1{ font-size:33px; line-height:1.06; }
  .hero__chapo{ font-size:16px; margin-top:16px; }
  .hero__copy .label{ margin-bottom:14px; }
  .hero__ctas{ margin-top:22px; gap:10px; }
  .hero__copy{ padding-bottom:calc(env(safe-area-inset-bottom,0px) + 80px); }
}
@media (max-width:479px) and (max-height:600px){ .hero__copy .label{ display:none; } }

/* Contraste WCAG AA sur fond galet : la charte valide ocre (4,86) et chêne (4,53) sur chaux uniquement ;
   sur galet ils tombent à 4,35 et 4,07. Petits textes en encre douce (5,3:1), liens en ardoise soulignés d'ocre. */
.scene--galet .label,.scene--galet .etape__n,.scene--galet .kicker__n,.methode__aside .label{ color:var(--encre-douce); }
.scene--galet .deroule li::before{ color:var(--encre-douce); }
.scene--galet .link{ color:var(--ardoise); background-image:linear-gradient(var(--ocre),var(--ocre)); background-size:100% 2px; }
.scene--galet .link:hover{ color:var(--encre); }
.scene--galet .srow__go,.scene--galet .exp__go{ color:var(--ardoise); }
.scene--galet .exp__item a:hover .exp__go{ color:var(--blanc); }

/* Petits numéros sur ardoise : l'ocre clair (3,78:1) est réservé aux grands textes par la charte */
.on-dark .kicker__n,.projet__n{ color:var(--pierre); }

.ba__pane .label{ color:var(--encre-douce); }