/* ==========================================================================
   Rituel — site public
   Transcription CSS du Design System « Organic » (Rituel/DesignSystem/Theme.swift).
   Chaque valeur ci-dessous vient de ce fichier : rien n'est réinventé ici.
   Toute modification de la palette de l'app doit être reportée ici.
   ========================================================================== */

/* --- Jetons : apparence claire ------------------------------------------- */

:root {
  /* Fonds */
  --canvas:        #F4EEE4;
  --surface:       #FBF8F2;
  --surface-sunken:#F0EAE0;

  /* Texte */
  --ink:           #17161A;
  --ink-2:         #7C7466;
  --ink-3:         #9D9484;
  --hairline:      #DED6C8;

  /* Bronze — l'accent principal */
  --accent:        #8C6A3F;
  --accent-100:    #F7EFE2;
  --accent-200:    #ECDCC2;
  --accent-300:    #DCC39B;
  --accent-700:    #6E5230;
  --accent-800:    #4E3A22;

  /* Sauge — la seconde voix */
  --sage:          #6F784F;
  --sage-100:      #EFF1E5;
  --sage-200:      #DFE3CA;
  --sage-800:      #3D432A;

  /* Teintes de mesure */
  --steps:         #5C6440;
  --heart:         #6E1F2A;
  --sleep:         #2F5D63;
  --calorie:       #A8811F;
  --heart-100:     #F7E8E9;
  --sleep-100:     #E7F1F1;
  --terracotta:    #A8584F;

  /* Texte posé sur un aplat d'accent */
  --on-accent:     #FBF8F2;

  /* Élévations */
  --shadow-sm: 0 1px 3px rgba(46, 43, 37, .07);
  --shadow-md: 0 4px 12px rgba(46, 43, 37, .10);
  --shadow-lg: 0 14px 34px rgba(46, 43, 37, .16);

  /* Verre chaud : voile crème + liseré clair (voir WarmGlassModifier) */
  --glass-veil:    rgba(251, 248, 242, .78);
  --glass-edge:    rgba(255, 255, 255, .60);
  --glass-sheen:   rgba(255, 255, 255, .50);

  /* Rayons — « sur-arrondir » : une carte ne descend jamais sous 24 */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Espacement : base 4 densifiée */
  --s-xxs: 4px;
  --s-xs:  8px;
  --s-sm:  12px;
  --s-md:  16px;
  --s-lg:  22px;
  --s-xl:  32px;
  --s-xxl: 44px;
  --s-section: 72px;

  /* Mouvement — la courbe « rise » du design */
  --rise: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
}

/* --- Jetons : apparence sombre ------------------------------------------- */
/* La rampe est inversée autour du même axe chromatique — l'app ne fournit
   qu'une apparence claire, la sombre en est la déclinaison, pas une seconde
   direction artistique. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:        #14130F;
    --surface:       #1F1D18;
    --surface-sunken:#100F0C;
    --ink:           #F4EEE4;
    --ink-2:         #A79E90;
    --ink-3:         #7C7466;
    --hairline:      #2E2B25;
    --accent:        #C3A374;
    --accent-100:    #322515;
    --accent-200:    #4E3A22;
    --accent-300:    #6E5230;
    --accent-700:    #DCC39B;
    --accent-800:    #ECDCC2;
    --sage:          #A8B088;
    --sage-100:      #272B1A;
    --sage-200:      #3D432A;
    --sage-800:      #DFE3CA;
    --steps:         #99A473;
    --heart:         #C97F89;
    --sleep:         #7FB3B9;
    --calorie:       #D9B45C;
    --heart-100:     #2C1216;
    --sleep-100:     #14262A;
    --terracotta:    #C17B6F;
    --on-accent:     #14130F;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .32);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .40);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, .52);
    --glass-veil:  rgba(31, 29, 24, .82);
    --glass-edge:  rgba(255, 255, 255, .10);
    --glass-sheen: rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --canvas:        #14130F;
  --surface:       #1F1D18;
  --surface-sunken:#100F0C;
  --ink:           #F4EEE4;
  --ink-2:         #A79E90;
  --ink-3:         #7C7466;
  --hairline:      #2E2B25;
  --accent:        #C3A374;
  --accent-100:    #322515;
  --accent-200:    #4E3A22;
  --accent-300:    #6E5230;
  --accent-700:    #DCC39B;
  --accent-800:    #ECDCC2;
  --sage:          #A8B088;
  --sage-100:      #272B1A;
  --sage-200:      #3D432A;
  --sage-800:      #DFE3CA;
  --steps:         #99A473;
  --heart:         #C97F89;
  --sleep:         #7FB3B9;
  --calorie:       #D9B45C;
  --heart-100:     #2C1216;
  --sleep-100:     #14262A;
  --terracotta:    #C17B6F;
  --on-accent:     #14130F;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .32);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .40);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, .52);
  --glass-veil:  rgba(31, 29, 24, .82);
  --glass-edge:  rgba(255, 255, 255, .10);
  --glass-sheen: rgba(255, 255, 255, .06);
  color-scheme: dark;
}

/* --- Base ----------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-700); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Typographie ---------------------------------------------------------- */
/* L'échelle de Theme.TextStyle, ramenée aux proportions d'un écran large. */

.display, .title, .subtitle, .figure, h1, h2, h3 {
  font-family: "Caprasimo", Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-wrap: balance;
  margin: 0;
}

.display, h1 {
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}

.title, h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -.012em;
}

.subtitle, h3 {
  font-size: 1.24rem;
  line-height: 1.3;
}

.overline {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

.lede {
  font-size: 1.2rem;
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 34em;
}

p { margin: 0 0 1.05em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

small, .footnote { font-size: .82rem; color: var(--ink-2); line-height: 1.55; }

strong { font-weight: 600; color: var(--ink); }

code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .87em;
  background: var(--surface-sunken);
  border-radius: 6px;
  padding: .12em .38em;
  color: var(--accent-700);
}

/* --- Grille --------------------------------------------------------------- */

.wrap {
  width: min(1080px, calc(100% - 2 * var(--s-lg)));
  margin-inline: auto;
}

/* Une colonne étroite, mais alignée sur le même bord gauche que les sections
   larges : centrer la colonne ferait sauter la marge d'une section à l'autre. */
.wrap--narrow > * { max-width: 760px; }

.section { padding-block: var(--s-section); }
.section + .section { padding-top: 0; }

.stack        { display: flex; flex-direction: column; gap: var(--s-md); }
.stack > p    { margin-bottom: 0; }
.row          { display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center; }
.stack--lg    { gap: var(--s-lg); }
.stack--xl    { gap: var(--s-xl); }
.stack--tight { gap: var(--s-xs); }

.grid {
  display: grid;
  gap: var(--s-md);
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
}

.grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--quad { grid-template-columns: repeat(auto-fit, minmax(min(228px, 100%), 1fr)); }

/* --- Barre de navigation -------------------------------------------------- */
/* La gélule de verre chaud de FloatingTabBar, remontée en tête de page. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-block: var(--s-sm);
  background: linear-gradient(to bottom, var(--canvas) 62%, transparent);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--glass-veil);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-sheen);
  border: 1px solid var(--glass-edge);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}

.nav__brand {
  font-family: "Caprasimo", Georgia, serif;
  font-size: 1.06rem;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 16px;
  margin-right: auto;
  white-space: nowrap;
}

.nav__links { display: flex; gap: 2px; }

.nav__link {
  display: block;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .22s var(--rise), color .22s var(--rise);
}

.nav__link:hover { background: var(--accent-100); color: var(--ink); }

/* L'onglet actif : pastille bronze, texte crème — exactement la barre de l'app. */
.nav__link[aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
}
.nav__link[aria-current="page"]:hover { background: var(--accent); color: var(--on-accent); }

@media (max-width: 620px) {
  .nav { flex-wrap: wrap; justify-content: center; }
  .nav__brand { margin-right: 0; width: 100%; text-align: center; padding-bottom: 2px; }
  .nav__links { flex-wrap: wrap; justify-content: center; }
}

/* --- Cartes --------------------------------------------------------------- */
/* Pas de bordure : la carte se détache par le contraste crème / sable et une
   ombre de trois points. Un contour durcirait une forme dont tout le propos
   est d'être molle. */

.card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card--lift { box-shadow: var(--shadow-md); }
.card--xl   { border-radius: var(--r-xl); padding: var(--s-xl); }

.card--sage { background: var(--sage-100); }
.card--sage .overline { color: var(--sage); }

/* La rondeur qui déborde du coin, rognée par la carte : on n'en voit qu'un
   quartier, et c'est ce décalage qui la fait lire comme une matière du fond. */
.card__blob {
  position: absolute;
  top: -46px;
  right: -44px;
  width: 170px;
  height: 170px;
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  background: var(--sage-200);
  opacity: .7;
  pointer-events: none;
}

.card__blob--accent { background: var(--accent-200); }

.card > * { position: relative; }

/* --- Étiquettes ----------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Échelon 200 et non 100 : posée à même le fond sable, une pastille au
     100 est à deux points de valeur du fond et disparaît. */
  background: var(--accent-200);
  color: var(--accent-800);
  white-space: nowrap;
  align-self: flex-start;
}

.tag--sage    { background: var(--sage-200);  color: var(--sage-800); }
.tag--neutral { background: var(--hairline); color: var(--ink); }
.tag--heart   { background: var(--heart-100); color: var(--heart); }
.tag--sleep   { background: var(--sleep-100); color: var(--sleep); }

.tags { display: flex; flex-wrap: wrap; gap: var(--s-xs); }

/* --- Boutons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .22s var(--rise), background .22s var(--rise);
}

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-700); color: var(--canvas); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.btn--ghost:hover { background: var(--accent-100); color: var(--ink); }

.btn:active { transform: scale(.985); }

/* --- Filets --------------------------------------------------------------- */

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* --- Listes de faits ------------------------------------------------------ */

.facts { display: grid; gap: 0; margin: 0; padding: 0; }

.fact {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: var(--s-md);
  padding-block: var(--s-md);
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.fact:first-child { border-top: 0; padding-top: 0; }

.fact__key { color: var(--ink-2); font-size: .93rem; }
.fact__val { margin: 0; }

@media (max-width: 560px) {
  .fact { grid-template-columns: 1fr; gap: var(--s-xxs); }
}

/* --- Listes à puces ------------------------------------------------------- */

ul.plain, ol.plain { margin: 0; padding-left: 1.15em; }
ul.plain li, ol.plain li { margin-bottom: .45em; max-width: 66ch; }
ul.plain li::marker { color: var(--accent-300); }
ol.plain li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* --- Journal des mises à jour --------------------------------------------- */

.release { display: grid; grid-template-columns: 190px 1fr; gap: var(--s-xl); }

.release + .release { margin-top: var(--s-xl); padding-top: var(--s-xl); border-top: 1px solid var(--hairline); }

.release__meta { position: sticky; top: 96px; align-self: start; }

.release__version {
  font-family: "Caprasimo", Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--accent);
}

.release__date { color: var(--ink-2); font-size: .86rem; margin-top: 2px; }

.change { display: grid; grid-template-columns: auto 1fr; gap: var(--s-md); align-items: baseline; }
.change + .change { margin-top: var(--s-md); }

@media (max-width: 760px) {
  .release { grid-template-columns: 1fr; gap: var(--s-md); }
  .release__meta { position: static; display: flex; align-items: baseline; gap: var(--s-sm); }
  .change { grid-template-columns: 1fr; gap: var(--s-xxs); }
}

/* --- Anneaux (le motif de l'écran Accueil) -------------------------------- */

.rings { display: flex; gap: var(--s-lg); flex-wrap: wrap; }

.ring { text-align: center; }

.ring svg { display: block; }

.ring__circle {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Le tracé se remplit à l'apparition — Theme.Motion.draw, 1,4 s. */
.ring__value {
  stroke-dasharray: var(--circumference);
  stroke-dashoffset: var(--circumference);
  animation: draw 1.4s var(--rise) .2s forwards;
}

@keyframes draw { to { stroke-dashoffset: var(--offset); } }

@media (prefers-reduced-motion: reduce) {
  .ring__value { animation: none; stroke-dashoffset: var(--offset); }
}

.ring__figure {
  font-family: "Caprasimo", Georgia, serif;
  font-size: 1.55rem;
  fill: var(--ink);
}

.ring__label { margin-top: var(--s-xs); }

/* --- Pied de page --------------------------------------------------------- */

.footer {
  margin-top: var(--s-section);
  padding-block: var(--s-xl) var(--s-xxl);
  border-top: 1px solid var(--hairline);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-xl);
  align-items: baseline;
  justify-content: space-between;
}

.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--accent); text-decoration: underline; }

/* --- Bandeau de page interne ---------------------------------------------- */

.internal-banner {
  background: var(--accent-100);
  color: var(--accent-800);
  border-radius: var(--r-md);
  padding: var(--s-sm) var(--s-md);
  font-size: .88rem;
  display: flex;
  gap: var(--s-sm);
  align-items: baseline;
}

/* --- Entrée en scène ------------------------------------------------------ */

.rise-in {
  animation: rise .6s var(--rise) both;
}
.rise-in:nth-child(2) { animation-delay: .06s; }
.rise-in:nth-child(3) { animation-delay: .12s; }
.rise-in:nth-child(4) { animation-delay: .18s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}