/* ==========================================================================
   ÉmoiNaturo - couche « sérénité »

   Chargée APRÈS jetons.css et site.css. Elle ne change aucune structure :
   elle ralentit le rythme du gabarit, qui est celui d'une agence, pour
   celui d'une praticienne.

   La règle de lisibilité tient toujours : aucun texte n'est atténué ici.
   Le calme vient de la teinte, de la graisse, de l'air et des formes, jamais
   d'une opacité posée sur du texte. Les seules opacités touchent des filets.
   ========================================================================== */

:root{
  /* Le fond de page quitte le blanc pur pour un céladon très pâle : c'est
     lui qui donne le premier sentiment de calme, avant tout le reste. */
  --page:        #f2f4f0;
  --sombre:      #28352f;   /* bande profonde, 11,5:1 avec le clair */
  --sur-sombre:  #f5f3ed;
  --accent-clair:#a8c7ba;   /* accent lisible sur la bande sombre, 6,6:1 */

  /* Trois rayons, plus doux que ceux du gabarit. */
  --r-bouton: 999px;
  --r-bloc:   22px;
  --r-image:  28px;
}

body{ background: var(--page); line-height: 1.72; letter-spacing: -.004em; }

/* ------------------------------------------------- typographie apaisée
   Le gabarit titre en 700 avec un lettrage très serré : c'est une voix qui
   affirme. On descend en graisse et on desserre : la voix se pose. */
h1,h2,h3,h4{ font-weight: 500; letter-spacing: -.016em; line-height: 1.18; }
h1{ font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.5rem); }
h2{ font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.5rem); }
h3{ font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-weight: 600; }
p{ max-width: 62ch; }
.chapo{ font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.65; max-width: 48ch; }

/* ------------------------------------------------- de l'air
   Le vide fait le travail de séparation. On l'augmente franchement. */
.sect{ padding-block: clamp(80px, 10vw, 168px); }
.sect--court{ padding-block: clamp(52px, 6vw, 96px); }
.tete{ margin-bottom: clamp(44px, 5vw, 76px); }
.tete h2{ margin-top: 18px; }
.tete p{ margin-top: 20px; }

/* Les filets verticaux du gabarit structurent beaucoup. On les laisse mais
   on les efface presque : ce sont des traits, pas du texte. */
.regle::before, .regle::after{ opacity: .45; }

/* ------------------------------------------------- surfaces douces */
.carte{
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(30,42,36,.04), 0 10px 30px -18px rgba(30,42,36,.16);
  gap: 14px;
}
.carte:hover{ transform: translateY(-2px); box-shadow: 0 2px 4px rgba(30,42,36,.05), 0 18px 40px -20px rgba(30,42,36,.2); }
.photo-cadre img, .photo-cadre{ border-radius: var(--r-image); }
.appel{ border-radius: 32px; }

/* ------------------------------------------------- boutons en pastille
   Le bloc noir plein du gabarit est une injonction. On l'arrondit et on
   l'allège, sans jamais descendre sous le contraste utile. */
.btn{
  border-radius: 999px; font-weight: 600; padding: 16px 30px;
  background: var(--sombre); border-color: var(--sombre); color: var(--sur-sombre);
}
.btn:hover{ background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--fantome{ border-color: rgba(245,243,237,.42); }
.pastille{ border-radius: 999px; padding: 7px 16px; font-weight: 500; }

/* ------------------------------------------------- bandes */
.bande--creme{ background: var(--creme); }
.bande--encre{
  background: var(--sombre); color: var(--sur-sombre);
  --accent: var(--accent-clair); --accent-texte: var(--accent-clair);
  --accent-bord: var(--accent-clair);
}
.bande--encre h2, .bande--encre p{ color: var(--sur-sombre); }
.pied{ background: var(--sombre); color: var(--sur-sombre); }

/* ------------------------------------------------- repères
   Des nombres plus calmes : moins gras, plus aérés. */
.reperes b{ font-weight: 600; letter-spacing: -.03em; }
.reperes li{ padding-block: 24px; }

/* ------------------------------------------------- étapes et questions */
.etape{ padding-block: clamp(26px, 3vw, 40px); }
.etape-num{ font-weight: 600; letter-spacing: .1em; color: var(--accent-texte); }
.question summary{ font-weight: 600; }

@media (prefers-reduced-motion: reduce){ .carte:hover{ transform: none; } }