/*!
 * Hulotte — feuille de style de marque
 * Polices : Baloo 2 et Atkinson Hyperlegible (SIL Open Font License, voir /fonts)
 * Pensée pour les seniors et les personnes en situation de handicap :
 * texte de base à 20px, cibles tactiles de 56px, contrastes AA, focus très visible.
 */

/* ----------------------------------------------------------- Polices */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/baloo-2-latin-600-normal.woff2) format('woff2'), url(../fonts/baloo-2-latin-600-normal.woff) format('woff');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/baloo-2-latin-800-normal.woff2) format('woff2'), url(../fonts/baloo-2-latin-800-normal.woff) format('woff');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/baloo-2-latin-ext-600-normal.woff2) format('woff2'), url(../fonts/baloo-2-latin-ext-600-normal.woff) format('woff');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/baloo-2-latin-ext-800-normal.woff2) format('woff2'), url(../fonts/baloo-2-latin-ext-800-normal.woff) format('woff');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-latin-400-normal.woff) format('woff');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-latin-700-normal.woff) format('woff');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/atkinson-hyperlegible-latin-400-italic.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-latin-400-italic.woff) format('woff');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff) format('woff');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff) format('woff');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/atkinson-hyperlegible-latin-ext-400-italic.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-latin-ext-400-italic.woff) format('woff');
}

/* ----------------------------------------------------------- Variables */
:root {
  --h-nuit: #1E2A47;
  --h-nuit-2: #2A3A5E;
  --h-fauve: #8A5A34;
  --h-ecorce: #6B4226;
  --h-plumage: #E9C99A;
  --h-ventre: #F3E3C8;
  --h-creme: #F7EFE2;
  --h-or: #E8A33D;
  --h-sarcelle: #2F7F7A;
  --h-terre: #C2552D;
  --h-alerte: #B83A2E;
  --h-encre: #2A1A10;
  --h-blanc: #FFFFFF;

  /* Rôles (thème clair) */
  --h-fond: var(--h-creme);
  --h-surface: var(--h-blanc);
  --h-texte: var(--h-encre);
  --h-texte-doux: var(--h-ecorce);
  --h-titre: var(--h-nuit);
  --h-bordure: var(--h-plumage);
  --h-primaire: var(--h-nuit);
  --h-sur-primaire: var(--h-creme);
  --h-focus: var(--h-or);
  --h-alerte-fond: #FBE7E4;

  --h-police-titre: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --h-police-texte: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;

  --h-taille-xs: 1rem;      /* 16px */
  --h-taille-s: 1.125rem;   /* 18px */
  --h-taille-m: 1.25rem;    /* 20px, texte courant */
  --h-taille-l: 1.5rem;     /* 24px */
  --h-taille-xl: 2rem;      /* 32px */
  --h-taille-2xl: 2.75rem;  /* 44px */
  --h-taille-3xl: 4rem;     /* 64px */

  --h-esp-1: 4px; --h-esp-2: 8px; --h-esp-3: 12px; --h-esp-4: 16px;
  --h-esp-5: 24px; --h-esp-6: 32px; --h-esp-7: 48px; --h-esp-8: 64px;

  --h-rayon-s: 12px; --h-rayon-m: 20px; --h-rayon-l: 28px; --h-rayon-pilule: 999px;
  --h-cible: 56px;
  --h-ombre: 0 2px 0 rgba(42, 26, 16, .08), 0 8px 24px rgba(30, 42, 71, .08);
}

/* Thème sombre : automatique, ou forcé avec data-theme="sombre" sur <html> */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --h-fond: var(--h-nuit);
    --h-surface: var(--h-nuit-2);
    --h-texte: var(--h-creme);
    --h-texte-doux: var(--h-plumage);
    --h-titre: var(--h-creme);
    --h-bordure: #3B4C74;
    --h-primaire: var(--h-or);
    --h-sur-primaire: var(--h-encre);
    --h-alerte-fond: #3D2228;
  }
}
:root[data-theme="sombre"] {
  --h-fond: var(--h-nuit);
  --h-surface: var(--h-nuit-2);
  --h-texte: var(--h-creme);
  --h-texte-doux: var(--h-plumage);
  --h-titre: var(--h-creme);
  --h-bordure: #3B4C74;
  --h-primaire: var(--h-or);
  --h-sur-primaire: var(--h-encre);
  --h-alerte-fond: #3D2228;
}

/* Contraste renforcé, au choix de l'utilisateur */
:root[data-contraste="fort"] {
  --h-fond: #FFFFFF; --h-surface: #FFFFFF; --h-texte: #000000; --h-texte-doux: #000000;
  --h-titre: #000000; --h-bordure: #000000; --h-primaire: #000000; --h-sur-primaire: #FFFFFF;
}

/* Taille de texte agrandie, au choix de l'utilisateur */
:root[data-texte="grand"] { font-size: 120%; }
:root[data-texte="tres-grand"] { font-size: 145%; }

/* ----------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--h-fond);
  color: var(--h-texte);
  font-family: var(--h-police-texte);
  font-size: var(--h-taille-m);
  line-height: 1.55;
}
h1, h2, h3, .h-titre {
  font-family: var(--h-police-titre);
  font-weight: 800;
  color: var(--h-titre);
  line-height: 1.1;
  margin: 0 0 var(--h-esp-4);
}
h1 { font-size: var(--h-taille-2xl); }
h2 { font-size: var(--h-taille-xl); }
h3 { font-size: var(--h-taille-l); }
p { margin: 0 0 var(--h-esp-4); max-width: 65ch; }
a { color: var(--h-titre); text-decoration-thickness: 2px; text-underline-offset: 3px; }
img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: 4px solid var(--h-focus);
  outline-offset: 3px;
  border-radius: var(--h-rayon-s);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.h-visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ----------------------------------------------------------- Mise en page */
.h-conteneur { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: var(--h-esp-4); }
.h-pile { display: flex; flex-direction: column; gap: var(--h-esp-4); }
.h-grille-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--h-esp-4); }

/* ----------------------------------------------------------- Boutons */
.h-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--h-esp-3);
  min-height: var(--h-cible); padding: var(--h-esp-3) var(--h-esp-6);
  border: 3px solid transparent; border-radius: var(--h-rayon-pilule);
  font: 700 var(--h-taille-m)/1.2 var(--h-police-texte);
  text-decoration: none; cursor: pointer;
  background: var(--h-primaire); color: var(--h-sur-primaire);
}
.h-bouton:hover { filter: brightness(1.12); }
.h-bouton:active { transform: translateY(1px); }
.h-bouton--secondaire { background: transparent; color: var(--h-titre); border-color: currentColor; }
.h-bouton--sarcelle { background: var(--h-sarcelle); color: #FFFFFF; }
.h-bouton--alerte { background: var(--h-alerte); color: #FFFFFF; }
.h-bouton--large { width: 100%; }
.h-bouton svg { width: 28px; height: 28px; flex-shrink: 0; }

/* Grande tuile d'action de l'écran d'accueil */
.h-tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--h-esp-3);
  min-height: 150px; padding: var(--h-esp-5) var(--h-esp-4);
  background: var(--h-surface); color: var(--h-titre);
  border: 3px solid var(--h-bordure); border-radius: var(--h-rayon-l);
  font: 800 var(--h-taille-l)/1.15 var(--h-police-titre); text-align: center; text-decoration: none;
  box-shadow: var(--h-ombre); cursor: pointer;
}
.h-tuile:hover { border-color: var(--h-fauve); }
.h-tuile img, .h-tuile svg { width: 88px; height: auto; }

/* ----------------------------------------------------------- Cartes et messages */
.h-carte {
  background: var(--h-surface); border-radius: var(--h-rayon-l);
  padding: var(--h-esp-5); box-shadow: var(--h-ombre); border: 2px solid var(--h-bordure);
}

/* Bulle de Hulotte : ce que dit la mascotte */
.h-bulle {
  display: flex; gap: var(--h-esp-4); align-items: flex-start;
}
.h-bulle__avatar { width: 72px; flex-shrink: 0; }
.h-bulle__texte {
  position: relative; background: var(--h-surface); border: 2px solid var(--h-bordure);
  border-radius: var(--h-rayon-l); border-top-left-radius: var(--h-esp-1);
  padding: var(--h-esp-4) var(--h-esp-5); font-size: var(--h-taille-m);
}

/* Alerte arnaque ou échéance urgente */
.h-alerte {
  display: flex; gap: var(--h-esp-4); align-items: flex-start;
  background: var(--h-alerte-fond); color: var(--h-texte);
  border: 3px solid var(--h-alerte); border-radius: var(--h-rayon-l); padding: var(--h-esp-5);
}
.h-alerte__titre { font: 800 var(--h-taille-l)/1.2 var(--h-police-titre); color: var(--h-alerte); margin: 0 0 var(--h-esp-2); }
:root[data-theme="sombre"] .h-alerte__titre { color: #FF9C8F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .h-alerte__titre { color: #FF9C8F; } }

/* Étiquette d'échéance ou de montant repéré dans un courrier */
.h-etiquette {
  display: inline-flex; align-items: center; gap: var(--h-esp-2);
  padding: var(--h-esp-1) var(--h-esp-3); border-radius: var(--h-rayon-pilule);
  background: var(--h-ventre); color: var(--h-encre); font-weight: 700; font-size: var(--h-taille-s);
}

/* Bouton micro : dictée vocale */
.h-micro {
  width: 96px; height: 96px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--h-sarcelle); color: #FFFFFF;
  display: inline-grid; place-items: center; box-shadow: var(--h-ombre);
}
.h-micro svg { width: 44px; height: 44px; }
.h-micro[aria-pressed="true"] { background: var(--h-alerte); }

/* ----------------------------------------------------------- Champs */
.h-champ { display: flex; flex-direction: column; gap: var(--h-esp-2); }
.h-champ label { font-weight: 700; }
.h-champ input, .h-champ textarea, .h-champ select {
  min-height: var(--h-cible); padding: var(--h-esp-3) var(--h-esp-4);
  font: inherit; color: var(--h-texte); background: var(--h-surface);
  border: 3px solid var(--h-bordure); border-radius: var(--h-rayon-m);
}
.h-champ input:focus-visible, .h-champ textarea:focus-visible { border-color: var(--h-focus); }
.h-champ .h-aide { font-size: var(--h-taille-s); color: var(--h-texte-doux); margin: 0; }

/* ----------------------------------------------------------- En-tête de l'app connectée */
.h-entete {
  display: flex; align-items: center; gap: var(--h-esp-4);
  padding: var(--h-esp-3) var(--h-esp-4); background: var(--h-surface);
  border-bottom: 2px solid var(--h-bordure); flex-wrap: wrap;
}
.h-entete__marque { display: inline-flex; align-items: center; flex-shrink: 0; }
.h-entete__jauge { flex: 1 1 220px; min-width: 180px; }
.h-entete__config { flex-shrink: 0; padding-block: var(--h-esp-2); min-height: 48px; }

/* Jauge de quota : barre + message en langage humain */
.h-jauge { display: flex; flex-direction: column; gap: var(--h-esp-1); }
.h-jauge__barre {
  height: 16px; border-radius: var(--h-rayon-pilule);
  background: var(--h-ventre); border: 2px solid var(--h-bordure); overflow: hidden;
}
.h-jauge__barre span { display: block; height: 100%; border-radius: var(--h-rayon-pilule); min-width: 4px; }
.h-jauge__texte { margin: 0; font-size: var(--h-taille-s); color: var(--h-texte-doux); }

/* ----------------------------------------------------------- Choix segmenté (préférences) */
.h-segment { display: flex; flex-wrap: wrap; gap: var(--h-esp-2); }
.h-segment input { position: absolute; opacity: 0; width: 0; height: 0; }
.h-segment label {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-cible);
  padding: var(--h-esp-2) var(--h-esp-5); border: 3px solid var(--h-bordure);
  border-radius: var(--h-rayon-pilule); font-weight: 700; cursor: pointer; background: var(--h-surface);
}
.h-segment input:checked + label { border-color: var(--h-primaire); background: var(--h-ventre); }
.h-segment input:focus-visible + label { outline: 4px solid var(--h-focus); outline-offset: 2px; }

/* Lien de retour : grosse flèche gauche */
.h-retour { display: inline-flex; align-items: center; gap: var(--h-esp-2); font-weight: 700; min-height: 48px; }
.h-retour::before { content: "←"; font-size: 1.4em; }

/* ----------------------------------------------------------- Composant Conversation */
.h-conv-reponse {
  min-height: 120px; padding: var(--h-esp-4); background: var(--h-fond);
  border: 2px dashed var(--h-bordure); border-radius: var(--h-rayon-m);
}
.h-conv-saisie { display: flex; align-items: center; gap: var(--h-esp-3); }
.h-conv-champ {
  flex: 1; min-height: var(--h-cible); padding: var(--h-esp-3) var(--h-esp-4);
  font: inherit; color: var(--h-texte); background: var(--h-surface);
  border: 3px solid var(--h-bordure); border-radius: var(--h-rayon-m);
}
.h-conv-saisie .h-micro { width: 64px; height: 64px; }
.h-conv-saisie .h-micro svg { width: 30px; height: 30px; }
.h-conv-champ:disabled, .h-micro:disabled { opacity: .6; cursor: not-allowed; }

/* Fil de messages */
.h-conv-fil { display: flex; flex-direction: column; gap: var(--h-esp-4); margin-bottom: var(--h-esp-4); }
.h-conv-msg { display: flex; }
.h-conv-msg--utilisateur { justify-content: flex-end; }
.h-conv-bulle {
  max-width: 85%; padding: var(--h-esp-4) var(--h-esp-5);
  border-radius: var(--h-rayon-l); border: 2px solid var(--h-bordure); background: var(--h-surface);
}
.h-conv-msg--utilisateur .h-conv-bulle { background: var(--h-ventre); border-top-right-radius: var(--h-esp-1); }
.h-conv-msg--hulotte .h-conv-bulle { border-top-left-radius: var(--h-esp-1); }
.h-conv-texte { margin: 0 0 var(--h-esp-3); }
.h-conv-bulle .h-bouton { padding-block: var(--h-esp-2); min-height: 48px; }

/* Mot en cours de lecture : pas seulement la couleur (soulignement + fond) — règle #12 */
.h-mot--actif {
  background: var(--h-or); color: var(--h-encre);
  box-shadow: 0 2px 0 var(--h-ecorce); border-radius: 4px;
  text-decoration: underline; text-decoration-thickness: 3px;
}