/* App témoin « Mon histoire » (PWA). Feuille externe : la CSP n'autorise aucun style en ligne.
   Charte Alètheia (docs/design/Temoin-*.dc.html, nuit 5) : papier, encre, accent ; titres et
   question en Cormorant Garamond, texte en Atkinson Hyperlegible, polices SERVIES PAR LE SERVICE
   (/polices/, licence OFL — aucune origine tierce, CSP inchangée). Un seul grand bouton par écran.
   Accessibilité (cahier des charges §7) : tout texte ≥ 21 px, cibles ≥ 44 px, contrastes AA dans
   les deux thèmes — vérifiés par tests/test_pwa_navigateur.py (axe-core et mesures réelles). */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url("/polices/AtkinsonHyperlegible-400-latin.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: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url("/polices/AtkinsonHyperlegible-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap;
  src: url("/polices/AtkinsonHyperlegible-700-latin.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: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap;
  src: url("/polices/AtkinsonHyperlegible-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500 600; font-display: swap;
  src: url("/polices/CormorantGaramond-latin.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-weight: 500 600; font-display: swap;
  src: url("/polices/CormorantGaramond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/polices/CormorantGaramond-italique-latin.woff2") format("woff2"); }
/* Nuit 10 : l'écriture arabe (projet en darija). Noto Sans Arabic (OFL), servie par le service, déclarée sous
   les deux noms de la charte avec la plage arabe : chaque pile de polices trouve ses glyphes arabes sans autre règle. */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url("/polices/NotoSansArabic-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap;
  src: url("/polices/NotoSansArabic-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500 600; font-display: swap;
  src: url("/polices/NotoSansArabic-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  --fond: #F6F1EB;             /* papier */
  --fond-carte: #FFFFFF;
  --texte: #2C2522;            /* encre */
  --texte-doux: #5A514B;
  --accent: #5B3A29;
  --accent-fonce: #3A2418;
  --sur-accent: #FFFFFF;       /* texte posé sur l'accent */
  --accent-voile: #EFE3D6;
  --filet: #E6DED4;            /* bordures décoratives */
  --bord: #8A7B6E;             /* contour des boutons : ≥ 3:1 sur le papier (WCAG 1.4.11) */
  --ecoute: #2F5A1B;           /* « je vous écoute » : état ok de la charte */
  --sur-ecoute: #FFFFFF;
  --reflechit: #7A4E07;        /* attente : état attention de la charte */
  --danger: #8A2525;
  --urgence: #A32D2D;          /* le 15 */
  --sur-urgence: #FFFFFF;
  --bandeau: #FBECD0;
  --voile: rgba(44, 37, 34, 0.6);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1E1916;
    --fond-carte: #2A2420;
    --texte: #F3ECE4;
    --texte-doux: #CDBFB3;
    --accent: #E2BFA5;
    --accent-fonce: #F3DCCB;
    --sur-accent: #1E1916;
    --accent-voile: #3A2E27;
    --filet: #4A3F38;
    --bord: #9C8C7F;
    --ecoute: #A8D58F;
    --sur-ecoute: #1E1916;
    --reflechit: #E7B866;
    --danger: #F2A6A6;
    --urgence: #A32D2D;          /* bouton plein : blanc sur rouge, même contraste qu'en clair */
    --sur-urgence: #FFFFFF;
    --bandeau: #3A2E27;
    --voile: rgba(0, 0, 0, 0.7);
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--fond); color: var(--texte);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 21px;              /* rien d'écrit en plus petit (exigence de la charte) */
  line-height: 1.45;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body {
  height: 100vh; height: 100dvh;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.cache { display: none !important; }
.serif, h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }

button, .bouton-lien {
  font: inherit;
  border: none;
  cursor: pointer;
  min-height: 48px;
  min-width: 48px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled { cursor: default; opacity: 0.45; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }

/* Le seul grand bouton de l'écran. */
.bouton-fort {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sur-accent);
  background: var(--accent);
  padding: 18px 28px;
  min-height: 68px;
  border-radius: 14px;
  text-decoration: none;
}
/* Les actions secondaires : contour, jamais aussi grosses. */
.bouton-doux, .bouton-pointille {
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--fond-carte);
  border: 2px solid var(--accent);
  padding: 10px 18px;
  min-height: 56px;
  border-radius: 14px;
  text-decoration: none;
}
.bouton-pointille { border-style: dashed; }
.alerte { color: var(--danger); border-color: var(--danger); }
.lien {
  font-size: 1rem;
  font-weight: 400;
  color: var(--accent);
  background: transparent;
  padding: 8px 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rangee {
  display: flex; justify-content: center; gap: 12px;
  width: 100%; max-width: 560px;
}
.rangee > button { flex: 1 1 0; }

/* ---- écrans pleins (accueil, guide, connexion, autre appareil, aide, fin) ---- */
.ecran.plein {
  height: 100%;
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center; padding: 32px 24px;
}
.ecran.plein > .bouton-fort, .ecran.plein > .rangee { width: 100%; max-width: 560px; }
.ecran.plein h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); margin: 0; line-height: 1.15; }
.ecran.plein p { font-size: 1rem; margin: 0; max-width: 34ch; line-height: 1.5; }
.marque { color: var(--texte-doux); letter-spacing: 0.14em; text-transform: uppercase; }
.texte-doux { color: var(--texte-doux); }
.message { color: var(--danger); min-height: 1.4em; }
.message:empty { display: none; }
.etape { color: var(--texte-doux); font-weight: 700; }
.illustration { color: var(--accent); }

/* ---- « Besoin d'aide ? » : par-dessus la séance, qui reste telle quelle dessous ---- */
#ecran-aide {
  position: fixed; inset: 0; z-index: 30;
  background: var(--fond);
  justify-content: flex-start;
  text-align: start; align-items: stretch;
  padding: calc(32px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
}
#ecran-aide > * { max-width: 560px; width: 100%; margin-left: auto; margin-right: auto; }
#ecran-aide h1 { text-align: start; }
#ecran-aide p { max-width: none; }
.bouton-urgence {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 76px;
  border-radius: 14px;
  background: var(--urgence); color: var(--sur-urgence);
  font-size: 1.1rem; font-weight: 700; text-decoration: none; text-align: center;
  padding: 10px 18px;
}
.bouton-urgence .precision { font-weight: 400; font-size: 1rem; }
.carte-aide {
  background: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.carte-aide .titre-carte { font-weight: 700; margin: 0; }
#aide-conseil { margin: 0; }
#aide-conseil:empty { display: none; }
.pousse { flex: 1 1 auto; }

/* ---- la séance : trois bandes, seule la zone centrale défile ---- */
.ecran.seance {
  display: flex; flex-direction: column;
  height: 100%;
}
header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--filet);
}
header .titre { color: var(--texte-doux); }

#zone-centrale {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 16px 24px 20px;
  text-align: center;
}
#panneau-historique {
  width: min(680px, 92vw);
  max-height: 38vh;
  overflow-y: auto;
  background: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: start;
}
#panneau-historique .ligne { margin: 0 0 12px; line-height: 1.45; }
#panneau-historique .ligne:last-child { margin-bottom: 0; }
#panneau-historique .qui { font-weight: 700; color: var(--accent); }
#panneau-historique .ligne.intervieweur { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.15rem; }
#panneau-historique .ligne.intervieweur .qui { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; font-size: 1rem; }
#panneau-historique .ligne.temoin .qui { color: var(--texte-doux); }

/* La question : grande, en Cormorant ; jamais sous 21 px (exigence §7). */
#question {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 6vw, 2.6rem);
  line-height: 1.3;
  max-width: 30ch;
}
#statut { color: var(--accent); font-weight: 700; min-height: 1.5em; }
canvas#onde { width: min(420px, 80vw); height: 72px; display: block; }

.bandeau {
  background: var(--bandeau);
  color: var(--texte);
  border-radius: 14px;
  padding: 10px 16px;
  max-width: 560px;
  margin: 0;
}
.bandeau.alerte { border: 2px solid var(--danger); color: var(--texte); }

footer {
  flex: 0 0 auto;     /* jamais rogné : la barre de boutons reste toujours visible */
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  background: var(--fond);
  border-top: 1px solid var(--filet);
  padding: 14px 20px calc(10px + env(safe-area-inset-bottom));
}
#bouton-principal {
  width: 100%; max-width: 560px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sur-accent);
  background: var(--accent);
  min-height: 68px;
  padding: 14px 24px;
  border-radius: 14px;
  transition: transform 0.15s ease, background 0.25s ease;
}
#bouton-principal.ecoute { background: var(--ecoute); color: var(--sur-ecoute); }
#bouton-principal:active:not(:disabled) { transform: translateY(2px); }
#bouton-principal.respire { animation: respire 2.2s ease-in-out infinite; }
@keyframes respire {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-voile); }
  50% { box-shadow: 0 0 0 10px var(--accent-voile); }
}
@media (prefers-reduced-motion: reduce) {
  #bouton-principal.respire { animation: none; }
}
#choix-suite .bouton-fort, #choix-suite .bouton-doux, #actions-attente button { min-height: 60px; }

/* ---- confirmation de fin ---- */
.voile {
  position: fixed; inset: 0;
  background: var(--voile);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 20;
}
.voile .carte {
  background: var(--fond-carte);
  border-radius: 18px;
  padding: 28px 22px;
  max-width: 480px;
  display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center;
}
.voile .carte p { font-size: 1.1rem; margin: 0; }

/* Petits téléphones : les boutons d'une rangée passent l'un sous l'autre plutôt que de rapetisser
   — sauf la rangée « Une pause / Terminer », courte, qui tient sur une ligne. */
@media (max-width: 420px) {
  .rangee { flex-direction: column; }
  #ligne-secondaire { flex-direction: row; }
  .ecran.plein { padding: 24px 18px; gap: 18px; }
  footer { padding-left: 16px; padding-right: 16px; }
}

/* Nuit 10 : de droite à gauche (arabe) — pas d'italique synthétique sur l'écriture arabe. */
[dir="rtl"] #question, [dir="rtl"] .ligne.intervieweur { font-style: normal; }