/* =====================================================================
   SÈVE — Système graphique
   Version 0.1.0

   Un seul fichier définit toute l'identité visuelle : couleurs,
   typographie, espacements, composants. Changer une variable ici
   change l'application entière.

   Les couleurs sont aussi stockées en base (table settings, groupe
   « apparence ») : l'API les renvoie au chargement et le script
   applique les valeurs choisies par l'administratrice par-dessus
   celles-ci. Voir assets/js/theme.js.
   ===================================================================== */

/* ---------- Typographie auto-hébergée (aucun appel à un tiers,
              conforme aux exigences RGPD du cahier des charges §10.27) --- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

/* ---------- Jetons de design ---------- */
:root {
  /* Identité (§7.6) */
  --petrole:          #264A54;
  --petrole-fonce:    #123A49;
  --petrole-clair:    #3B646F;
  --or:               #D9A441;
  --or-profond:       #A2762A;   /* version lisible sur fond clair */
  --or-pale:          #F0DCB4;
  --ecru:             #FAF6ED;
  --ecru-clair:       #FDFBF7;
  --sable:            #E4D7C1;
  /* Les cinq familles de contenu (0.21.0). Elles vivent ici, et non
     dans le script, pour pouvoir changer avec le thème : le pétrole des
     vidéos est invisible sur le fond d'un univers immersif. */
  --fam-regarder:     #264A54;
  --fam-ecouter:      #4F7355;
  --fam-lire:         #6B4E71;
  --fam-ecrire:       #A85C3C;
  --fam-pratiquer:    #A2762A;

  --sauge:            #789B8A;
  --sauge-pale:       #DCE5DE;
  --vegetal:          #5C7F5E;

  /* Palette élargie — touches de couleur ponctuelles dans l'interface
     générale, en plus des couleurs d'univers (V0.7.0, retour ergonomique).
     Comme --succes/--alerte/--danger plus bas, ce sont des teintes fixes :
     elles ne sont pas pilotées depuis les réglages d'apparence. */
  --terre-cuite:      #C68162;
  --terre-cuite-pale: #D99A7C;
  --bois-de-rose:     #B98282;
  --dore-solaire:     #E3AD3D;
  --jaune-solaire:    #E8B84A;
  --bleu-profondeur:  #536B82;

  /* Check-in quotidien : une couleur par ressenti — jamais un dégradé
     rouge → vert, qui évoquerait un questionnaire médical. */
  --checkin-tres-mal:  var(--terre-cuite-pale);
  --checkin-mal:       #E8B08F;
  --checkin-moyen:     #E6C77A;
  --checkin-bien:      #A8BEA5;
  --checkin-tres-bien: var(--sauge);

  /* Tuiles de statistiques de « Mon espace » : teintes très pâles mais
     opaques (jamais transparentes/grisées). */
  --tuile-sauge-pale:  #EAF1EC;
  --tuile-jaune-creme: #FBF0D8;
  --tuile-peche-pale:  #FBE7DC;
  --tuile-rose-pale:   #F7E9E9;

  /* Rôles d'interface */
  --fond:             var(--ecru);
  --surface:          #FFFDFC;
  --surface-douce:    var(--ecru-clair);
  --surface-sable:    var(--sable);
  --bordure:          #E3DACB;
  --bordure-forte:    #CFC2AC;
  --texte:            var(--petrole);
  --texte-doux:       #5E7078;
  --texte-faible:     #8B979C;
  --texte-inverse:    #F4EFE4;
  --accent:           var(--or-profond);
  --accent-vif:       var(--or);

  /* États */
  --succes:           #4E7C59;
  --succes-fond:      #E4EFE5;
  --alerte:           #B4762C;
  --alerte-fond:      #FAEEDA;
  --danger:           #A8453C;
  --danger-fond:      #F8E5E2;
  --info-fond:        #E6EEF1;

  /* Rythme */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px; --r5: 24px;
  --r6: 32px; --r7: 48px; --r8: 64px; --r9: 96px;

  /* Rayons */
  --arrondi-s: 10px;
  --arrondi-m: 16px;
  --arrondi-l: 24px;
  --arrondi-xl: 32px;
  --arrondi-plein: 999px;

  /* Ombres — très douces, jamais dures */
  --ombre-1: 0 1px 2px rgba(38, 74, 84, .05), 0 2px 8px rgba(38, 74, 84, .04);
  --ombre-2: 0 2px 6px rgba(38, 74, 84, .06), 0 12px 28px rgba(38, 74, 84, .07);
  --ombre-3: 0 8px 20px rgba(38, 74, 84, .10), 0 24px 56px rgba(38, 74, 84, .10);
  --ombre-immersive: 0 0 60px rgba(217, 164, 65, .16);

  /* Typographie */
  --police-titre: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --police-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Mise en page */
  --largeur-app: 460px;      /* mobile-first : l'app reste une colonne */
  --largeur-page: 1080px;
  --hauteur-nav: 68px;

  --transition: 200ms cubic-bezier(.22, .61, .36, 1);
}

/* Univers immersif NeuroSens : l'interface s'assombrit (§7.6) */
.immersif, [data-univers="immersif"] {
  --fond:          var(--petrole-fonce);
  --surface:       #16404F;
  --surface-douce: #17475A;
  --bordure:       #2C5C6C;
  /* Sur fond sombre, les teintes de famille s'éclaircissent : sinon la
     pastille se fond dans la carte et l'intertitre disparaît. */
  --fam-regarder:  #7FB4C4;
  --fam-ecouter:   #93C09B;
  --fam-lire:      #C4A3CB;
  --fam-ecrire:    #E8A184;
  --fam-pratiquer: #E4BC6A;
  --bordure-forte: #3D7386;
  --texte:         #F1E9DA;
  --texte-doux:    #BFD0D6;
  --texte-faible:  #8FA9B2;
  --accent:        var(--or);
  --accent-vif:    #F0C572;
}

/* ---------- Réinitialisation mesurée ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
img, svg, video, audio { max-width: 100%; }
img, svg, video { height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4, .serif, .curseur-valeur {
  font-family: var(--police-titre);
  /* Cormorant utilise des chiffres elzéviriens par défaut : « 1 » y
     ressemble à un I majuscule. On force des chiffres alignés. */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}
h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--r3);
  color: var(--texte);
}
h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 5.2vw, 1.95rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; font-family: var(--police-texte); font-weight: 600; letter-spacing: 0; }
p  { margin: 0 0 var(--r4); }
p:last-child { margin-bottom: 0; }

/* ---------- Utilitaires de texte ---------- */
.sur-titre {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.doux   { color: var(--texte-doux); }
.faible { color: var(--texte-faible); font-size: .875rem; }
.petit  { font-size: .875rem; }
.mini   { font-size: .78rem; }
.serif  { font-family: var(--police-titre); }
.centre { text-align: center; }
.gras   { font-weight: 600; }
.invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Structure ---------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur-app);
  margin-inline: auto;
  padding-inline: var(--r5);
}
.large { max-width: var(--largeur-page); }
.pile      { display: flex; flex-direction: column; }
.pile > * + * { margin-top: var(--espace, var(--r4)); }
.ligne     { display: flex; align-items: center; gap: var(--r3); }
.ligne-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); }
.grille    { display: grid; gap: var(--r4); }
.grille-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pousse    { margin-left: auto; }
.section   { padding-block: var(--r6); }

/* ---------- Boutons ---------- */
.btn {
  --btn-fond: var(--petrole);
  --btn-texte: #F7F2E6;
  --btn-bordure: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 var(--r5);
  background: var(--btn-fond); color: var(--btn-texte);
  border: 1.5px solid var(--btn-bordure);
  border-radius: var(--arrondi-plein);
  font-size: .96rem; font-weight: 560; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover  { box-shadow: var(--ombre-2); }
.btn:active { transform: scale(.978); }
.btn:focus-visible { outline: 2.5px solid var(--accent-vif); outline-offset: 3px; }
.btn[disabled], .btn.charge { opacity: .55; pointer-events: none; }
.btn-large  { width: 100%; }
.btn-or     { --btn-fond: var(--or); --btn-texte: #35240A; }
.btn-clair  { --btn-fond: var(--surface); --btn-texte: var(--petrole); --btn-bordure: var(--bordure-forte); }
.btn-fantome{ --btn-fond: transparent; --btn-texte: var(--texte); --btn-bordure: var(--bordure-forte); }
.btn-nu     { --btn-fond: transparent; --btn-texte: var(--texte-doux); --btn-bordure: transparent; min-height: 44px; padding-inline: var(--r3); }
.btn-nu:hover { box-shadow: none; color: var(--texte); }
.btn-petit  { min-height: 40px; padding-inline: var(--r4); font-size: .875rem; }
.btn-danger { --btn-fond: transparent; --btn-texte: var(--danger); --btn-bordure: var(--danger); }

/* Bouton boussole : l'élément le plus important de l'accueil (§7.12) */
.boussole {
  position: relative; overflow: hidden;
  display: block; width: 100%; text-align: left;
  padding: var(--r5); border: 0;
  border-radius: var(--arrondi-l);
  background: linear-gradient(152deg, var(--petrole) 0%, var(--petrole-fonce) 100%);
  color: var(--texte-inverse);
  box-shadow: var(--ombre-2);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.boussole:active { transform: scale(.99); }
.boussole::after {
  content: ''; position: absolute; inset: -40% -30% auto auto;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,164,65,.30) 0%, rgba(217,164,65,0) 68%);
  pointer-events: none;
}
.boussole h3 { color: var(--texte-inverse); font-size: 1.4rem; margin-bottom: 6px; }
.boussole p  { color: rgba(244,239,228,.78); font-size: .9rem; margin-bottom: var(--r4); }
.boussole .btn { --btn-fond: var(--dore-solaire); --btn-texte: #35240A; min-height: 46px; }

/* ---------- Cartes ---------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-m);
  padding: var(--r4);
  box-shadow: var(--ombre-1);
}
.carte-douce { background: var(--surface-douce); box-shadow: none; }
.carte-sable { background: var(--surface-sable); border-color: transparent; box-shadow: none; }
a.carte, button.carte {
  display: block; width: 100%; text-align: left; text-decoration: none; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
a.carte:hover, button.carte:hover { box-shadow: var(--ombre-2); border-color: var(--bordure-forte); }
a.carte:active, button.carte:active { transform: scale(.99); }

/* Carte de formule mise en avant (page Tarifs, §6.4) */
.carte-formule-vedette {
  border-color: var(--or);
  box-shadow: 0 0 0 2px var(--or-pale), var(--ombre-2);
}

/* Carte de contenu : vignette + titre + méta */
/* La carte accueille le lien et, à sa droite, la marque « fait »
   (0.20.0). Le lien garde la disposition d'avant — vignette puis texte —
   pour que rien ne bouge dans les listes existantes. */
.carte-contenu { display: grid; grid-template-columns: 1fr auto; gap: var(--r3); align-items: center; padding: var(--r3); }
.carte-contenu-lien {
  display: grid; grid-template-columns: 76px 1fr; gap: var(--r4);
  align-items: center; min-width: 0; color: inherit; text-decoration: none;
}
/* La carte n'est plus le lien lui-même (0.20.0) : elle le contient. Les
   règles « a.carte » ne s'y appliquent donc plus, et elle avait perdu sa
   réaction au doigt. On la lui rend, depuis le lien qu'elle abrite. */
.carte-contenu {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-contenu:has(.carte-contenu-lien:hover) { box-shadow: var(--ombre-2); border-color: var(--bordure-forte); }
.carte-contenu:has(.carte-contenu-lien:active) { transform: scale(.99); }
.carte-contenu-lien { cursor: pointer; }
.carte-contenu .vignette {
  width: 76px; height: 76px; border-radius: var(--arrondi-s);
  background: linear-gradient(150deg, var(--sauge-pale), var(--sable));
  display: grid; place-items: center; overflow: hidden; flex: none;
  position: relative;   /* pour la pastille de famille */
}
.carte-contenu .vignette img { width: 100%; height: 100%; object-fit: cover; }
.carte-contenu .titre { font-weight: 560; line-height: 1.3; margin-bottom: 4px; }
.carte-contenu .meta  { font-size: .8rem; color: var(--texte-faible); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.carte-contenu .meta .sep::before { content: '•'; margin-right: 6px; }

/* ---------- La pastille de famille (0.21.0) ----------
   Regarder, écouter, lire, écrire, pratiquer. Un rond de couleur posé
   sur la vignette : on sait de quoi il s'agit avant d'avoir lu le titre.
   Le pictogramme est blanc sur une couleur toujours assez sombre, et un
   voile d'ombre décolle la pastille des images claires. */
.pastille-famille {
  width: var(--taille, 22px); height: var(--taille, 22px);
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--arrondi-plein);
  background: var(--teinte, var(--petrole));
  color: #fff;
}
/* En HAUT à gauche, et non en bas : les miniatures de SÈVE portent leur
   titre dans le bas de l'image. Le coin supérieur gauche est le seul qui
   soit vide sur toutes. L'ombre décolle la pastille d'une photo claire. */
.vignette .pastille-famille {
  position: absolute; left: 4px; top: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.carte-contenu.contenu-fait .pastille-famille { opacity: .62; }

/* Dans un univers immersif les teintes sont claires : un pictogramme
   blanc dessus ne se verrait plus. On le repasse en sombre. */
.immersif .pastille-famille,
[data-univers="immersif"] .pastille-famille { color: var(--petrole-fonce); }

/* L'en-tête d'une section de famille. Discret : il sépare, il
   n'annonce pas. Le compte à droite évite d'avoir à descendre pour
   savoir combien il y en a. */
.entete-famille {
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding-bottom: 7px;
  border-bottom: 1px solid var(--bordure);
  font-family: inherit; font-size: .8rem; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--teinte, var(--texte));
}
.entete-famille .compte {
  margin-left: auto;
  font-size: .78rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--texte-faible);
}

/* ---------- Le cœur des affirmations (0.21.0) ----------
   Le remplissage doré est posé par le script ; ici, seul le battement
   qui suit le geste. Il ne se joue jamais à l'ouverture de la page. */
@keyframes coeur-bat {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.24); }
  100% { transform: scale(1); }
}
.coeur-affirmation.coeur-bat { animation: coeur-bat .28s ease-out; }

/* ---------- La marque « vu, écouté, lu » (0.20.0) ----------
   Un cercle vide qui se remplit. Discret tant que rien n'est fait — il
   ne doit pas réclamer d'être coché — et franc une fois coché, pour se
   repérer d'un coup d'œil dans une longue liste.
   La zone tactile fait 44 px quelle que soit la taille du cercle : c'est
   le minimum pour qu'un pouce ne rate pas sa cible. */
.marque-faite {
  width: var(--taille, 26px); height: var(--taille, 26px);
  flex: none; position: relative;
  display: grid; place-items: center;
  border: 2px solid var(--bordure-forte); border-radius: 50%;
  background: transparent; color: transparent;
  cursor: pointer; padding: 0;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.marque-faite::after {
  content: ''; position: absolute;
  inset: calc((44px - var(--taille, 26px)) / -2);
  border-radius: 50%;
}
.marque-faite:hover { border-color: var(--vegetal); }
.marque-faite.est-fait {
  background: var(--vegetal); border-color: var(--vegetal); color: #fff;
}
.marque-faite:disabled { opacity: .5; cursor: default; }

/* Une carte faite s'efface un peu : ce qui reste à découvrir ressort. */
.carte-contenu.contenu-fait .vignette,
.carte-contenu.contenu-fait .titre { opacity: .62; }

/* ---------- Étiquettes ---------- */
.etiquette {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--arrondi-plein);
  background: var(--sauge-pale); color: var(--petrole);
  font-size: .74rem; font-weight: 600; letter-spacing: .03em;
  white-space: nowrap;
}
.etiquette-or       { background: var(--or-pale); color: #6E4E11; }
.etiquette-immersive{ background: var(--petrole); color: var(--or); }
.etiquette-contour  { background: transparent; border: 1px solid var(--bordure-forte); color: var(--texte-doux); }
.etiquette-succes   { background: var(--succes-fond); color: var(--succes); }
.etiquette-alerte   { background: var(--alerte-fond); color: var(--alerte); }
.etiquette-danger   { background: var(--danger-fond); color: var(--danger); }

/* ---------- Pastille de notifications non lues (§8.18) ---------- */
.badge-notif {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--arrondi-plein);
  background: var(--or-profond); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1;
  flex: none;
}

/* ---------- Formulaires ---------- */
.champ { display: block; margin-bottom: var(--r4); }
.champ > .libelle {
  display: block; font-size: .84rem; font-weight: 600;
  color: var(--texte-doux); margin-bottom: 7px;
}
.champ > .aide { display: block; font-size: .8rem; color: var(--texte-faible); margin-top: 6px; }
.saisie {
  width: 100%; min-height: 52px; padding: 13px var(--r4);
  background: var(--surface); color: var(--texte);
  border: 1.5px solid var(--bordure-forte); border-radius: var(--arrondi-s);
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea.saisie { min-height: 130px; resize: vertical; line-height: 1.6; }
select.saisie { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E7078' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.saisie::placeholder { color: var(--texte-faible); }
.saisie:focus { outline: none; border-color: var(--petrole); box-shadow: 0 0 0 4px rgba(38,74,84,.10); }
.saisie.erreur { border-color: var(--danger); }

/* Choix multiples sous forme de pastilles (onboarding, questionnaire) */
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix-option {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px var(--r4); min-height: 46px;
  background: var(--surface); color: var(--texte);
  border: 1.5px solid var(--bordure-forte); border-radius: var(--arrondi-plein);
  font-size: .9rem; cursor: pointer; text-align: left;
  transition: all var(--transition);
}
.choix-option:hover { border-color: var(--sauge); }
.choix-option[aria-pressed="true"], .choix-option.actif {
  background: var(--petrole); border-color: var(--petrole); color: var(--texte-inverse);
}
.choix-liste { display: grid; gap: 10px; }
.choix-liste .choix-option { border-radius: var(--arrondi-s); width: 100%; justify-content: flex-start; }

/* Pastilles du check-in quotidien : fond coloré par ressenti, texte et
   tracé pétrole (défini en JS, propre à chaque bouton). L'état choisi
   renforce la bordure pétrole plutôt que d'assombrir le fond (V0.7.0). */
.choix-humeur { transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.choix-humeur:hover        { box-shadow: var(--ombre-1); }
.choix-humeur:active       { transform: scale(.97); }
.choix-humeur:focus-visible{ outline: 2.5px solid var(--petrole); outline-offset: 2px; }

/* Curseur d'intensité 0 → 10 (§7.16) */
.curseur { width: 100%; appearance: none; height: 6px; border-radius: 999px; background: var(--sable); outline: none; }
.curseur::-webkit-slider-thumb {
  appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--petrole); border: 4px solid var(--surface);
  box-shadow: var(--ombre-2); cursor: pointer;
}
.curseur::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--petrole); border: 4px solid var(--surface);
  box-shadow: var(--ombre-2); cursor: pointer;
}
.curseur-valeur { font-family: var(--police-titre); font-size: 2.6rem; line-height: 1; color: var(--petrole); }

/* --------------------------------------------------------------------
   « Mon moment » — accueil (V0.9.0) : émotions, gratitudes, décharge,
   sommeil. Une carte chaleureuse et lumineuse, dans les tons chauds de
   la palette plutôt que le pétrole/écru du reste de l'accueil.
   -------------------------------------------------------------------- */
.moment-du-jour {
  background: linear-gradient(160deg, var(--tuile-peche-pale) 0%, var(--surface) 55%);
  border-color: #EAD3C2;
}
.moment-entete { display: flex; align-items: center; gap: var(--r3); margin-bottom: var(--r4); }
.moment-vignette {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, var(--jaune-solaire), var(--terre-cuite) 115%);
  color: #fff; box-shadow: var(--ombre-1);
}
.moment-question { font-family: var(--police-titre); font-size: 1.08rem; line-height: 1.3; margin: 2px 0 0; color: var(--petrole); }

.moment-parties { display: grid; gap: 10px; margin-top: var(--r4); }
.moment-partie {
  background: var(--surface); border: 1.5px solid #EAD3C2; border-radius: var(--arrondi-m);
  overflow: hidden;
}
.moment-partie > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px var(--r4); font-weight: 600; color: var(--petrole);
}
.moment-partie > summary::-webkit-details-marker { display: none; }
.moment-partie > summary::after {
  content: ''; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--terre-cuite); border-bottom: 2px solid var(--terre-cuite);
  transform: rotate(45deg); transition: transform var(--transition);
}
.moment-partie[open] > summary::after { transform: rotate(-135deg); }
.moment-partie-titre { display: flex; align-items: center; gap: 8px; }
.moment-fait {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--sauge); color: #fff;
}
.moment-partie-corps { padding: 0 var(--r4) var(--r4); }

/* Le titre et son aperçu, l'un sous l'autre (0.31.0). Les parties sont
   désormais fermées par défaut : sans cette ligne d'aperçu, on ne
   saurait plus d'un coup d'œil ce qui a déjà été rempli. */
.moment-partie-intitule { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.moment-partie-apercu {
  font-size: .74rem; font-weight: 400; color: var(--texte-faible);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.moment-partie-apercu:empty { display: none; }

/* Les quarante-quatre émotions dans un cadre qui défile, plutôt qu'un
   pavé de quinze lignes qui enterre tout ce qui suit. */
.emotions-cadre {
  max-height: 210px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bordure); border-radius: var(--arrondi-s);
  background: var(--surface-douce); padding: 0 10px 10px;
  overscroll-behavior: contain;   /* on ne fait pas défiler la page derrière */
}
/* Ce qui a été choisi reste visible en haut du cadre : sans cela, il
   faudrait parcourir toute la liste pour se rappeler ses propres choix. */
.emotions-epingle {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-douce); padding: 8px 0 6px;
  border-bottom: 1px solid var(--bordure);
}
.emotions-rappel { margin: 0; color: var(--texte-doux); line-height: 1.45; }

/* Dictaphone, partagé par toutes les zones d'écriture de « Mon moment » (§5) */
.champ-vocal-zone { position: relative; }
.champ-vocal-zone textarea.saisie { padding-right: 54px; }
.btn-micro {
  position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--or-pale); color: #6E4E11; transition: all var(--transition);
}
.btn-micro:hover { background: var(--or); color: #fff; }
.btn-micro[aria-pressed="true"] { background: var(--danger); color: #fff; animation: pulse-micro 1.4s ease-in-out infinite; }
@keyframes pulse-micro { 0%, 100% { box-shadow: 0 0 0 0 rgba(196,84,66,.35); } 50% { box-shadow: 0 0 0 8px rgba(196,84,66,0); } }
.champ-vocal-astuce { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; color: var(--texte-faible); }

/* --------------------------------------------------------------------
   « Mon suivi » — calendrier des outils pratiqués et des émotions du
   jour (§7, V0.10.0), à la place de l'ancien « Mon historique ».
   -------------------------------------------------------------------- */
.suivi-entetes {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  text-align: center; font-size: .72rem; color: var(--texte-faible); margin-top: var(--r3);
}
.suivi-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.suivi-jour {
  aspect-ratio: 1; border: 1.5px solid transparent; border-radius: var(--arrondi-s);
  background: var(--surface-douce); color: var(--texte); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: .82rem; transition: all var(--transition);
}
.suivi-jour:hover { border-color: var(--sauge); }
.suivi-jour-aujourdhui { border-color: var(--terre-cuite); font-weight: 600; }
.suivi-points { display: flex; gap: 2px; }
.suivi-point { width: 5px; height: 5px; border-radius: 50%; }
.suivi-point-outil  { background: var(--terre-cuite); }
.suivi-point-humeur { background: var(--dore-solaire); }

/* Interrupteur */
.interrupteur { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; }
.interrupteur .piste {
  width: 48px; height: 28px; border-radius: 999px; background: var(--bordure-forte);
  position: relative; transition: background var(--transition); flex: none;
}
.interrupteur .piste::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: var(--ombre-1);
  transition: transform var(--transition);
}
.interrupteur input:checked + .piste { background: var(--vegetal); }
.interrupteur input:checked + .piste::after { transform: translateX(20px); }
.interrupteur input:focus-visible + .piste { outline: 2.5px solid var(--accent-vif); outline-offset: 3px; }

/* ---------- Messages ---------- */
.message {
  padding: var(--r4); border-radius: var(--arrondi-s);
  font-size: .9rem; border: 1px solid transparent;
}
.message-info    { background: var(--info-fond);   border-color: #C9DBE2; }
.message-succes  { background: var(--succes-fond); border-color: #BFD8C4; color: #2F5A3A; }
.message-alerte  { background: var(--alerte-fond); border-color: #E8D0A5; color: #7A4E12; }
.message-danger  { background: var(--danger-fond); border-color: #E9C4BF; color: #8A332B; }

/* Bandeau de prudence sur les contenus sensibles (§8.28) */
.note-prudence {
  border-left: 3px solid var(--sauge);
  padding: var(--r3) var(--r4);
  background: var(--surface-douce);
  border-radius: 0 var(--arrondi-s) var(--arrondi-s) 0;
  font-size: .85rem; color: var(--texte-doux);
}

/* ---------- Éléments d'identité ---------- */
.rayons {
  position: absolute; inset: auto 0 0 50%;
  width: 460px; height: 230px; transform: translateX(-50%);
  pointer-events: none; opacity: .5;
}
.monogramme { width: 56px; height: 56px; border-radius: 14px; }
.marque {
  font-family: var(--police-titre); font-size: 1.6rem;
  letter-spacing: .04em; font-weight: 500;
}

/* Séparateur végétal discret */
.separateur {
  height: 1px; border: 0; margin-block: var(--r5);
  background: linear-gradient(90deg, transparent, var(--bordure-forte) 20%, var(--bordure-forte) 80%, transparent);
}

/* ---------- Navigation principale (5 onglets, §7.14) ---------- */
.nav-basse {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--hauteur-nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(252, 250, 245, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--bordure);
}
.nav-basse a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--texte-faible);
  font-size: .66rem; font-weight: 560; letter-spacing: .01em;
  transition: color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.nav-basse a svg { width: 22px; height: 22px; }
.nav-basse a[aria-current="page"] { color: var(--petrole); }
.nav-basse a[aria-current="page"] svg { stroke: var(--petrole); }

.avec-nav { padding-bottom: calc(var(--hauteur-nav) + env(safe-area-inset-bottom) + var(--r5)); }

/* En-tête d'écran */
.entete-ecran {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--r3);
  min-height: 60px; padding: var(--r3) var(--r5);
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
.entete-ecran.detache { border-bottom-color: var(--bordure); }
.entete-ecran .titre { font-family: var(--police-titre); font-size: 1.25rem; }

/* ---------- Lecteur immersif (§7.15) ---------- */
.lecteur-plein {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: space-between;
  /* Filet de sécurité (0.19.1) : sur un très petit écran, ou avec un
     titre de trois lignes, le contenu peut encore dépasser. Mieux vaut
     alors pouvoir faire défiler que perdre le bouton de lecture. */
  gap: var(--r4); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top) + var(--r5)) var(--r5) calc(env(safe-area-inset-bottom) + var(--r6));
  background: radial-gradient(120% 80% at 50% 15%, #1A4C5E 0%, var(--petrole-fonce) 62%, #0C2B37 100%);
  color: var(--texte-inverse);
}
.onde-respiration {
  width: 220px; height: 220px; margin-inline: auto; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,164,65,.28) 0%, rgba(217,164,65,0) 70%);
  animation: respire 9s ease-in-out infinite;
  /* Purement décoratif : ne doit jamais intercepter un appui. */
  pointer-events: none;
}
@keyframes respire {
  0%, 100% { transform: scale(.82); opacity: .55; }
  45%      { transform: scale(1.12); opacity: 1; }
}
.barre-progression {
  height: 4px; border-radius: 999px; background: rgba(244,239,228,.20); overflow: hidden;
}
.barre-progression > span { display: block; height: 100%; background: var(--or); border-radius: 999px; transition: width .25s linear; }

/* ---------- Écran de lancement (§7.11) ---------- */
.ouverture {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-content: center; justify-items: center; gap: var(--r4);
  background: var(--petrole-fonce);
  animation: ouverture-sortie .6s ease .0s forwards;
}
.ouverture img { width: 88px; border-radius: 22px; animation: monte .8s cubic-bezier(.2,.8,.3,1) both; }
.ouverture .marque { color: var(--or); animation: monte .8s cubic-bezier(.2,.8,.3,1) .18s both; }
@keyframes monte { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ouverture-sortie { to { opacity: 0; visibility: hidden; } }

/* ---------- Squelettes de chargement ---------- */
.squelette {
  background: linear-gradient(90deg, var(--sable) 25%, #EFE6D6 50%, var(--sable) 75%);
  background-size: 200% 100%; animation: glisse 1.4s infinite; border-radius: var(--arrondi-s);
  min-height: 14px;
}
@keyframes glisse { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- État vide ---------- */
.vide { text-align: center; padding: var(--r7) var(--r5); color: var(--texte-doux); }
.vide h3 { color: var(--texte); }

/* ---------- Accessibilité et confort ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .onde-respiration { animation: none; }
}
:focus-visible { outline: 2.5px solid var(--accent-vif); outline-offset: 3px; border-radius: 4px; }

/* ---------- Adaptation grand écran : l'app reste une colonne centrée,
              le desktop est une adaptation du mobile (§9.3) ---------- */
@media (min-width: 900px) {
  body.app { background: linear-gradient(160deg, #EFE7D8, var(--ecru) 55%); }
  body.app .cadre-app {
    max-width: 480px; margin-inline: auto; min-height: 100dvh;
    background: var(--fond); box-shadow: var(--ombre-3);
  }
}