/*
 * LE SOCLE : jetons, reglages de base, rythme.
 *
 * LA DIRECTION, DEUXIEME VERSION
 *
 * La premiere v2 nettoyait le site sans le refonder : meme palette de creme et
 * d'espresso, meme serif de titre, meme grille de cartes. Elle avait l'air
 * d'une v1 bien rangee.
 *
 * Deux corrections de fond.
 *
 * LA PALETTE. Creme chaude en fond, brun espresso en texte, laiton en accent :
 * c'est la palette par defaut de tous les sites « premium » generes, au point
 * que la marque y devient invisible. On part donc sur un vert-sarcelle profond
 * -- proche de la couleur d'origine de la maison, mais tenu en surface pleine
 * plutot qu'en filet -- avec un os clair pour lire et une aigue-marine vive
 * pour agir. Sombre par defaut, ce qui est rare dans le bien-etre et donne au
 * site une signature au lieu d'un genre.
 *
 * LA TYPOGRAPHIE. Un serif de titre est le reflexe qu'on a des qu'un brief
 * touche au soin ou a l'artisanat, et c'est pour cela qu'il ne distingue plus
 * personne. Le titrage passe a une grotesque contemporaine, Bricolage
 * Grotesque, dont les formes legerement irregulieres tiennent la chaleur que le
 * serif apportait. Le corps est en Plus Jakarta Sans : Inter et ses derives sont
 * la police par defaut de la moitie du web, et ne distinguent donc plus rien.
 *
 * Ce que ces deux choix produisent ensemble : un site moderne, pas un site de
 * spa comme les autres.
 */

:root {
  /* --- Surfaces -------------------------------------------------------
     Trois profondeurs seulement. Une quatrieme nuance de vert n'ajouterait
     que du flou : la hierarchie se lit a la lumiere, pas au nombre de tons. */
  --nuit:      #071A18;   /* le fond dominant */
  --nuit-haut: #0C2724;   /* ce qui remonte : cartes, entetes */
  --nuit-bas:  #04120F;   /* ce qui s'enfonce : pied de page */
  --voile:     rgba(232, 236, 233, .10);   /* filets et separations */

  /* --- Encre ----------------------------------------------------------
     Jamais de blanc pur : sur un fond sombre il vibre et fatigue. */
  --os:        #E8ECE9;
  --os-doux:   rgba(232, 236, 233, .68);
  --os-tenu:   rgba(232, 236, 233, .44);

  /* --- L'accent, un seul ----------------------------------------------
     L'aigue-marine de la maison, poussee jusqu'a tenir sur du vert profond.
     Une seule couleur d'action sur tout le site : un site vert ne se
     reveille pas en bleu a la section sept. */
  --vif:       #4FE0C8;
  --vif-sourd: #2FB9A4;

  /* --- Le revers -------------------------------------------------------
     Deux sections claires par page au plus, pour respirer. Elles ne sont
     pas cremes : un gris tres legerement vert, qui appartient au meme
     monde que le fond sombre. */
  --jour:      #EDF1EE;
  --encre:     #071A18;

  /* --- Typographie ----------------------------------------------------- */
  --titre: 'Bricolage Grotesque', system-ui, sans-serif;
  --texte: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Une echelle fluide, sans point de rupture : les titres ne sautent pas
     d'une taille a l'autre quand on redimensionne. */
  --t-xs:  0.75rem;
  --t-s:   0.875rem;
  --t-m:   1rem;
  --t-l:   clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  --t-xl:  clamp(1.625rem, 1.1rem + 2vw,    2.25rem);
  --t-2xl: clamp(2.25rem, 1.2rem + 4.2vw,   4rem);
  --t-3xl: clamp(3rem, 1.1rem + 7.6vw,      7rem);

  /* --- Rythme ---------------------------------------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-6: 1.5rem;   --e-8: 2rem;     --e-12: 3rem;    --e-16: 4rem;
  --e-24: 6rem;
  /* 72 px au plus. Partie de 144, passee a 88, puis ici.
     A 144 de chaque cote, deux sections qui changent de fond mettaient 288 px
     entre elles -- plus d'un tiers d'ecran de vide. La regle « meme fond »
     avait deja retire l'empilement la ou il ne separait rien ; restait la
     valeur elle-meme, calee sur un rythme trop ample.

       changement de fond   288 -> 176 -> 144 px
       meme fond            144 ->  88 ->  72 px

     C'est un plancher raisonnable : sous 64 px, deux sections de meme fond
     cessent de se lire comme deux sections. */
  --section: clamp(2.5rem, 1.25rem + 3.75vw, 4.5rem);

  /* --- Formes ----------------------------------------------------------
     Presque droit. Les grands rayons appartiennent au registre doux dont on
     sort ; ici la forme vient du cadrage des images, pas de l'arrondi. */
  --r-s: 0.25rem;
  --r-m: 0.5rem;
  --r-pilule: 999px;

  /* --- Mouvement -------------------------------------------------------
     Courbes franches. Jamais ease-in sur une interface : elle demarre
     lentement, au moment exact ou l'oeil regarde. */
  --sortie: cubic-bezier(0.23, 1, 0.32, 1);
  /* La courbe des panneaux d'iOS : lente a s'installer, franche a la fin.
     Elle remplace « ease », qui est la courbe par defaut de tout le web. */
  --glisse: cubic-bezier(0.32, 0.72, 0, 1);
  --v-court: 160ms;
  --v-moyen: 240ms;

  /* --- L'amplitude de la parallaxe -------------------------------------
     Deux reglages, et un seul endroit ou les changer.

     Le deplacement ne peut pas depasser ce que l'agrandissement laisse
     deborder du cadre, sinon le bord de l'image entre dans le champ. La
     limite exacte vaut 50 * (zoom - 1) / zoom :

       zoom 1.16  ->  6,90 %       zoom 1.24  ->  9,68 %
       zoom 1.20  ->  8,33 %       zoom 1.30  -> 11,54 %

     On reste sous la limite avec de la marge : au bord exact, un arrondi de
     sous-pixel suffit a faire apparaitre une ligne claire. */
  --parallaxe:      8%;      /* le carrousel */
  --parallaxe-zoom: 1.24;

  /* Deux fois plus discrete sur les plaques : leurs images sont a cote du
     texte qu'on lit, et un mouvement marque a cote d'une ligne en cours de
     lecture est desagreable. */
  --parallaxe-douce:      5%;
  --parallaxe-douce-zoom: 1.16;

  --mesure: 60ch;
}

/* -------------------------------------------------------------- reglages */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:target { scroll-margin-top: 5.5rem; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--os);
  font-family: var(--texte);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.02;
  /* Le resserrage fait la difference entre un titre pose et un titre
     simplement gros. Il grandit avec la taille : a 7 rem, un interlettrage
     normal laisse des trous. */
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p { margin: 0 0 var(--e-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--vif); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { color: var(--vif-sourd); }

strong, b { font-weight: 600; }

::selection { background: var(--vif); color: var(--nuit); }

:focus-visible { outline: 2px solid var(--vif); outline-offset: 3px; border-radius: var(--r-s); }

/* Moins d'animation ne veut pas dire aucune : les fondus aident a comprendre,
   les deplacements donnent le tournis. On retire les seconds. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-revele] { opacity: 1 !important; transform: none !important; }
}