/* ============================================================================
   CHARTE GRAPHIQUE JEM CARE
   Une seule source pour les quatre pages : le site, l'espace propriétaire,
   le livret d'accueil, les mentions légales. Ce qui est défini ici ne se
   redéfinit pas ailleurs — sans quoi la charte n'en est plus une.

   Le parti pris tient en une phrase : le crème et le bronze de Saint-Barth,
   une serif pour ce qui se lit, une sans pour ce qui se manipule, et beaucoup
   de blanc. Rien ne crie. La confiance ne se démontre pas en haussant le ton.

   La documentation de référence — pourquoi ces choix, quand employer quoi —
   est dans CHARTE.md à la racine du dépôt.
   ========================================================================== */

:root{
  /* ---- COULEURS -----------------------------------------------------------
     Trois familles seulement. Le crème porte les fonds, le bronze porte les
     accents et les actions, l'encre porte le texte. L'or ne sert qu'au filet
     et aux détails — jamais à un aplat, il vire au doré bon marché. */
  --creme:#F9F0E6;        /* fond général */
  --creme-2:#F3E7D7;      /* fond secondaire : encarts, cartes */
  --bronze:#836A4A;       /* accent, actions, liens */
  --bronze-dark:#6a5439;  /* survol d'une action */
  --ink:#2b2620;          /* texte principal */
  --ink-soft:#5b5347;     /* texte secondaire, légendes */
  --line:#d9c7ae;         /* filets et bordures */
  --gold:#b08d57;         /* détail : losange du filet, liseré des encarts */
  --nuit:#241f1a;         /* pied de page, seule zone sombre du site */

  /* Sens, pas décoration : ces deux-là ne servent qu'à un verdict. */
  --vert:#4a6b4f;         /* accord donné */
  --rouge:#8c4a3f;        /* refus */

  /* ---- TYPOGRAPHIE --------------------------------------------------------
     Cormorant Garamond pour les titres et tout ce qui doit se lire comme une
     phrase écrite à la main. Jost pour le corps, les libellés et l'interface.
     Deux familles, pas trois. */
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Interlettrage. Le surtitre respire largement, le reste des capitales
     modérément. Au-delà, on tombe dans le catalogue de luxe des années 2010. */
  --track-over:.26em;     /* surtitres */
  --track-caps:.14em;     /* navigation, libellés, boutons */

  /* Échelle typographique. Fluide sur les titres — un titre figé casse sur un
     téléphone —, fixe sur le corps où la lisibilité prime sur l'effet. */
  --t-hero:clamp(2.6rem,7.4vw,4.5rem);
  --t-titre:clamp(2rem,5vw,2.9rem);
  --t-sous:clamp(1.5rem,3.4vw,1.95rem);
  --t-carte:1.3rem;
  --t-corps:1rem;
  --t-note:.88rem;
  --t-menu:.78rem;
  --t-surtitre:.72rem;

  /* ---- RYTHME -------------------------------------------------------------
     Une progression, pas des valeurs au jugé : chaque cran vaut à peu près
     une fois et demie le précédent. */
  --pas-1:8px;
  --pas-2:14px;
  --pas-3:22px;
  --pas-4:34px;
  --pas-5:52px;
  --pas-6:84px;

  --rayon:3px;            /* les angles sont presque droits : c'est du papier */
  --rayon-pilule:999px;   /* sauf les pastilles : langue, accès propriétaire */

  --wrap:1100px;          /* largeur de page ; les pages de lecture la réduisent */
  --lecture:720px;        /* largeur d'une colonne de texte suivi */

  /* Deux durées, pas plus. Le site ne s'anime pas, il se pose. */
  --temps-court:.2s;
  --temps-long:.9s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:var(--t-corps);
  line-height:1.7;
  color:var(--ink);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,.serif{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.14;
  letter-spacing:.006em;
}

a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media(max-width:520px){ .wrap{padding:0 22px} }

/* ---- SURTITRE ------------------------------------------------------------
   La petite ligne en capitales bronze au-dessus d'un titre. Elle annonce, elle
   ne titre pas : jamais plus de trois ou quatre mots. */
.surtitre{
  font-size:var(--t-surtitre);
  font-weight:500;
  letter-spacing:var(--track-over);
  text-transform:uppercase;
  color:var(--bronze);
}

/* ---- ACTIONS -------------------------------------------------------------
   Une seule action pleine par écran : celle qu'on attend du visiteur. Tout le
   reste est en second rang (.doux), sauf le refus, qui se dit en rouge. */
.bouton{
  display:inline-block;
  padding:14px 32px;
  border:none;
  border-radius:2px;
  background:var(--bronze);
  color:var(--creme);
  font-family:inherit;
  font-size:var(--t-menu);
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--temps-court);
}
.bouton:hover{background:var(--bronze-dark)}
.bouton.doux{background:transparent;color:var(--bronze);border:1px solid var(--line)}
.bouton.doux:hover{background:transparent;border-color:var(--bronze)}
.bouton.refus{background:transparent;color:var(--rouge);border:1px solid var(--rouge)}
.bouton[disabled]{opacity:.45;cursor:default}

/* Une action de troisième rang : un mot souligné, sans cadre. */
.lien-discret{
  background:none;border:none;padding:0;
  font:inherit;font-size:var(--t-note);
  color:var(--bronze);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---- SAISIE --------------------------------------------------------------
   Fond blanc sur crème : le champ se voit sans qu'on ait à l'encadrer lourdement. */
.champ{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:var(--rayon);
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:var(--t-corps);
  margin-bottom:var(--pas-2);
}
.champ:focus{outline:none;border-color:var(--bronze)}

/* ---- TEXTES SECONDAIRES --------------------------------------------------- */
.note{font-size:var(--t-note);color:var(--ink-soft);margin-top:10px}

/* Titre de rubrique : capitales bronze sur un filet. Il découpe une page de
   consultation — livret, espace — sans peser comme un vrai titre. */
.rubrique{
  font-size:var(--t-surtitre);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bronze);
  padding-bottom:var(--pas-1);
  border-bottom:1px solid var(--line);
  margin:var(--pas-4) 0 var(--pas-2);
}

/* ---- ENCART --------------------------------------------------------------
   Ce qui attend une action : liseré or à gauche, fond légèrement plus chaud. */
.encart{
  background:var(--creme-2);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:var(--rayon);
  padding:var(--pas-3) 24px;
}

[hidden]{display:none !important}

/* Personne ne devrait avoir à subir une animation qu'il n'a pas demandée. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}