/* ============================================================================
   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 */

  /* ---- LE SOLEIL ----------------------------------------------------------
     Tout le crème et tout le bronze appartiennent à la même famille : le site
     finissait beige sur beige et paraissait fade. Il fallait une couleur qui
     l'éclaire sans le refroidir — un bleu, essayé d'abord, tirait la page vers
     le froid et se mariait mal au bronze. Celle-ci est celle du soleil : elle
     ne sert qu'aux détails et à un fond de section, jamais à un aplat large.

     Le jaune d'accent est plus SOMBRE que le crème, sinon il disparaît : sur
     ce fond très clair, un jaune pâle ne se voit pas. C'est le fond de section
     qui porte la pâleur.

     Sur un grand écran, une paille franche couvre des centaines de milliers de
     pixels et devient criarde : ce qui passait sur un téléphone agressait sur
     un moniteur. Le fond de section n'est plus qu'un souffle plus chaud que le
     crème, et l'accent quitte le jaune vif pour un or brûlé. */
  --soleil:#A8792A;       /* détail : puces, numéros, losange du filet */
  --soleil-clair:#C69A4A; /* survol, second plan */
  /* Plus employée : les fonds de section teintés ont été retirés, le crème est
     désormais le même d'un bout à l'autre de la page. Conservée pour un encart
     ponctuel, pas pour une bande. */
  --soleil-pale:#FBF4E1;
  --fleur:#B8446A;        /* le bougainvillier : un seul point à la fois */
  --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}

/* La barre de navigation est collante : sans cette réserve, cliquer « Notre
   métier » amène le titre SOUS la barre, et le visiteur croit avoir raté sa
   cible. La hauteur de la barre, plus un peu d'air. */
html{scroll-behavior:smooth;scroll-padding-top:calc(74px + var(--pas-4))}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* Le repère du clavier. Il ne s'affiche qu'à la navigation au clavier — la
   souris n'en a pas besoin —, et il reprend le bronze plutôt que le bleu du
   navigateur, qui jure avec tout le reste. */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--bronze);
  outline-offset:3px;
  border-radius:1px;
}

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;
  /* Un titre de deux lignes dont la seconde ne porte qu'un mot est une faute
     de composition. Le navigateur équilibre les lignes lui-même. */
  text-wrap:balance;
}

/* Un paragraphe ne doit pas laisser un mot seul en dernière ligne. */
p{text-wrap:pretty}

/* Les numéros de téléphone et les montants s'alignent en colonne : des chiffres
   de largeurs différentes donnent une liste qui tremble. */
.tel,.montant,.val{font-variant-numeric:tabular-nums}

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}
}