/* ============================================================
   REFUGE — feuille de style
   Principes sensoriels appliqués :
   - aucun blanc pur, aucun noir sur blanc : contrastes doux
   - aucune animation rapide, aucun clignotement
   - zones tactiles très larges (min 64px) : la motricité fine
     se dégrade pendant une crise
   - trois thèmes : Doux sombre (défaut), Doux clair, Bouclier
   - huit gammes de couleurs : celle d'origine (« refuge ») et les
     sept de Cap, toutes désaturées, en sombre et en clair
   ============================================================ */

/* ---------- 1. Thèmes (variables de couleur) ---------- */

:root {
  /* Thème DOUX SOMBRE — celui par défaut */
  --bg:          #171b21;
  --surface:     #1e242c;
  --surface-2:   #262d37;
  --bord:        #333b46;
  --texte:       #d2d8de;   /* gris très clair, jamais #fff */
  --texte-doux:  #96a0ac;
  --accent:      #7ea8a0;   /* vert sauge désaturé */
  --accent-fond: #24322f;
  --aide-fond:   #4a3a34;   /* terracotta profond, jamais rouge vif */
  --aide-bord:   #a97f6d;
  --aide-texte:  #f0d9cd;
  --rayon: 20px;
  --duree: 300ms;           /* toutes les transitions, volontairement lentes */
  --echelle: 1;             /* taille de police, pilotée par les reglages */

  /* Indispensable : sans cette ligne, le navigateur dessine les cases à
     cocher et les champs avec SON habillage clair — des carrés blanc pur
     sur fond sombre. Avec quarante propositions à l'écran, cela fait un
     mur de blanc, exactement ce que cette application refuse. */
  color-scheme: dark;
}

html[data-theme="clair"] {
  --bg:          #f1eee8;   /* beige papier, jamais #fff */
  --surface:     #f8f6f1;
  --surface-2:   #ebe7df;
  --bord:        #d8d2c7;
  --texte:       #3b4046;
  --texte-doux:  #6e757d;
  --accent:      #5d8579;
  --accent-fond: #e2ebe6;
  --aide-fond:   #f0dcd2;
  --aide-bord:   #c08e78;
  --aide-texte:  #5a3a2c;
  color-scheme: light;      /* thème beige : habillage clair du navigateur */
}

/* ---------- Gammes de couleurs (les mêmes que dans Cap) ----------
   Choisies dans Réglages, posées par app.js via data-palette="<gamme>"
   sur <html>. Sans data-palette, ou avec « refuge », ce sont les
   couleurs d'origine ci-dessus. Le bouton d'aide garde partout sa teinte
   terracotta (variables --aide-…) : on le reconnaît quelle que soit la
   gamme. Toute nouvelle gamme doit rester aussi douce que celles-ci. */

html[data-palette="bleu"][data-theme="sombre"] {
  --bg: #161b21; --surface: #1d242d; --surface-2: #252e39; --bord: #344050;
  --texte: #d4dae0; --texte-doux: #97a2ae; --accent: #9dbcd0; --accent-fond: #233240;
}
html[data-palette="bleu"][data-theme="clair"] {
  --bg: #eef0f2; --surface: #f7f8f9; --surface-2: #e9ebee; --bord: #d7dbe0;
  --texte: #3b4046; --texte-doux: #6e757d; --accent: #4f7086; --accent-fond: #e3eaee;
}
html[data-palette="sauge"][data-theme="sombre"] {
  --bg: #161c19; --surface: #1d2621; --surface-2: #25302a; --bord: #354539;
  --texte: #d4dcd6; --texte-doux: #98aa9e; --accent: #a5ccb4; --accent-fond: #243529;
}
html[data-palette="sauge"][data-theme="clair"] {
  --bg: #eef1ec; --surface: #f6f8f4; --surface-2: #e7ebe3; --bord: #d3dbcd;
  --texte: #384038; --texte-doux: #69756a; --accent: #5d8579; --accent-fond: #e2ebe6;
}
html[data-palette="lavande"][data-theme="sombre"] {
  --bg: #1a1822; --surface: #221f2d; --surface-2: #2b2839; --bord: #3d3850;
  --texte: #dcd8e3; --texte-doux: #a59fb3; --accent: #c0b6e6; --accent-fond: #2f2945;
}
html[data-palette="lavande"][data-theme="clair"] {
  --bg: #f1eef5; --surface: #f8f6fa; --surface-2: #eae6f0; --bord: #d8d2e2;
  --texte: #423d4c; --texte-doux: #756e82; --accent: #7871a8; --accent-fond: #e8e4f0;
}
html[data-palette="sable"][data-theme="sombre"] {
  --bg: #1c1815; --surface: #241f1a; --surface-2: #2e2721; --bord: #453a30;
  --texte: #ded6cc; --texte-doux: #a89c8e; --accent: #b89a7a; --accent-fond: #332b22;
}
html[data-palette="sable"][data-theme="clair"] {
  --bg: #f3ece2; --surface: #faf6f0; --surface-2: #ede4d6; --bord: #ddd0bd;
  --texte: #453a30; --texte-doux: #7d7062; --accent: #8c6a46; --accent-fond: #f0e6d8;
}
html[data-palette="peche"][data-theme="sombre"] {
  --bg: #1d1816; --surface: #27201d; --surface-2: #312824; --bord: #4a3b34;
  --texte: #e6dbd4; --texte-doux: #b09f95; --accent: #ddb8a3; --accent-fond: #3d2b22;
}
html[data-palette="peche"][data-theme="clair"] {
  --bg: #f7eee8; --surface: #fcf7f3; --surface-2: #f1e5dc; --bord: #e3d1c4;
  --texte: #4a3a32; --texte-doux: #806c61; --accent: #a47260; --accent-fond: #f5e2d7;
}
html[data-palette="miel"][data-theme="sombre"] {
  --bg: #1c1a15; --surface: #26231c; --surface-2: #302c23; --bord: #484133;
  --texte: #e3ddd0; --texte-doux: #aca48f; --accent: #d6c19f; --accent-fond: #3a3324;
}
html[data-palette="miel"][data-theme="clair"] {
  --bg: #f6f1e4; --surface: #fbf8ef; --surface-2: #efe8d6; --bord: #ded3b9;
  --texte: #463f2e; --texte-doux: #7d735c; --accent: #8a7748; --accent-fond: #f1e9d2;
}
html[data-palette="rose"][data-theme="sombre"] {
  --bg: #1d1719; --surface: #271f22; --surface-2: #31272b; --bord: #4a3a40;
  --texte: #e5d9dd; --texte-doux: #ae9ca3; --accent: #daabb5; --accent-fond: #3d2a30;
}
html[data-palette="rose"][data-theme="clair"] {
  --bg: #f6eef0; --surface: #fbf6f7; --surface-2: #efe3e6; --bord: #e0cdd2;
  --texte: #4a3940; --texte-doux: #806b73; --accent: #a4677a; --accent-fond: #f3e2e7;
}

/* Thème BOUCLIER : noir absolu #000 (pixels OLED éteints = batterie
   économisée et zero lumiere émise), texte gris très doux.
   Les « !important » sont voulus : le bouclier doit passer AVANT
   n'importe quelle gamme de couleurs, même une gamme ajoutée plus tard
   dans ce fichier. Sans eux, choisir « Lavande » laisserait un bouclier
   violet au lieu d'un écran noir. */
html[data-bouclier="on"] {
  --bg:          #000000 !important;
  --surface:     #000000 !important;
  --surface-2:   #070707 !important;
  --bord:        #232323 !important;
  --texte:       #6f6f6f !important;
  --texte-doux:  #4d4d4d !important;
  --accent:      #3f4b48 !important;
  --accent-fond: #000000 !important;
  --aide-fond:   #000000 !important;
  --aide-bord:   #4a413d !important;
  --aide-texte:  #8a7f79 !important;
  --duree: 0ms !important;  /* plus aucune transition en crise */
  color-scheme: dark !important;  /* même en thème clair, le bouclier reste noir */
}

/* En bouclier, le Journal reste lisible : contraste doux mais suffisant. */
html[data-bouclier="on"] .lisible-en-bouclier {
  --texte:      #8e8e8e;
  --texte-doux: #666666;
}

/* ---------- 2. Base ---------- */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: calc(17px * var(--echelle));
  line-height: 1.6;
  overscroll-behavior: none;
  transition: background var(--duree) linear, color var(--duree) linear;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* On respecte les encoches et la barre de navigation Android */
  padding-top: env(safe-area-inset-top);
}

/* Respect absolu du réglage système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3 { font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; color: var(--texte-doux); font-weight: 600; }
p  { margin: 0 0 14px; }
small { font-size: 0.85rem; color: var(--texte-doux); }

/* Focus toujours visible : indispensable au clavier et aux lecteurs d'écran */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- 3. Mise en page ---------- */

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 18px 24px;
  -webkit-overflow-scrolling: touch;
}

.vue { display: none; max-width: 640px; width: 100%; margin: 0 auto; }
.vue.active { display: block; }

/* L'accueil se centre verticalement : les boutons tombent ainsi dans la
   zone basse de l'écran, celle qu'un pouce atteint sans changer de prise. */
#vue-accueil.active { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 18px;
  margin-bottom: 16px;
}

/* ---------- 4. Boutons ---------- */

button, .bouton {
  font: inherit;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 16px 18px;
  min-height: 60px;
  width: 100%;
  cursor: pointer;
  text-align: center;
  transition: background var(--duree) linear, border-color var(--duree) linear;
}

button:active { background: var(--bord); }

/* Un lien qui a l'allure d'un bouton (ex. « Envoyer un retour par e-mail »). */
a.bouton {
  display: block;
  box-sizing: border-box;
  text-decoration: none;
}

/* Une adresse e-mail est un long mot sans espace : on autorise la coupure
   pour qu'elle ne déborde pas de l'écran sur un petit téléphone. */
.adresse-mail { display: block; overflow-wrap: anywhere; }

/* Lien vers la licence (À propos) : couleur du texte autour, simplement
   souligné (le bleu du navigateur serait trop vif). La hauteur minimale
   garde une zone tactile de 60 px. */
.lien-licence {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 60px;
}
/* En bouclier, la mention disparaît : aucun lien vers internet. */
html[data-bouclier="on"] .mention-licence { display: none; }

.bouton-doux {
  background: var(--accent-fond);
  border-color: var(--accent);
  color: var(--texte);
}

/* LE bouton d'appel à l'aide : énorme, impossible à manquer,
   mais chaleureux plutôt qu'alarmant. */
.bouton-aide {
  background: var(--aide-fond);
  border: 2px solid var(--aide-bord);
  color: var(--aide-texte);
  min-height: 168px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 26px;
  margin-bottom: 16px;
  padding: 20px;
}

.bouton-aide .sous {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 10px;
  opacity: 0.85;
}

.bouton-rangee { display: flex; gap: 12px; }
.bouton-rangee > * { flex: 1; }

/* ---------- 5. Barre d'onglets ---------- */

/* « sticky » : la barre reste collée en bas de l'écran pendant qu'on fait
   défiler une page longue (Réglages, Protocole, Journal). Sans cela, elle
   n'apparaissait qu'une fois arrivé tout en bas de la page. z-index : la
   barre passe au-dessus du contenu qui défile, mais sous les écrans plein
   écran (z-index 100). */
.onglets {
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.onglet {
  flex: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--texte-doux);
  min-height: 68px;
  padding: 8px 4px;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.onglet svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.onglet[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-fond);
  box-shadow: inset 0 2px 0 var(--accent);   /* repère franc mais silencieux */
}
html[data-bouclier="on"] .onglet[aria-selected="true"] { color: var(--texte); background: #0d0d0d; }

/* ---------- 6. Formulaires ---------- */

label { display: block; margin-bottom: 8px; color: var(--texte-doux); font-size: 0.92rem; }

input[type="text"], input[type="tel"], input[type="number"],
input[type="url"], input[type="email"],
input[type="datetime-local"], textarea, select {
  font: inherit;
  width: 100%;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 14px;
  min-height: 56px;
  margin-bottom: 16px;
}

textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

/* Interrupteur (case à cocher agrandie, zone tactile confortable) */
.interrupteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bord);
  margin: 0;
  color: var(--texte);
  font-size: 1rem;
}
.interrupteur:last-child { border-bottom: none; }
.interrupteur input { width: 30px; height: 30px; flex-shrink: 0; accent-color: var(--accent); margin: 0; }

/* Groupes de choix (intensité, préréglages, durée) */
.choix { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.choix button {
  width: auto;
  flex: 1 1 auto;
  min-width: 64px;
  min-height: 64px;
  padding: 12px;
}
.choix button[aria-pressed="true"] {
  background: var(--accent-fond);
  border-color: var(--accent);
  color: var(--texte);
  font-weight: 600;
}
html[data-bouclier="on"] .choix button[aria-pressed="true"] { background: #101010; }

/* ---------- 7. Guides du mode bouclier ---------- */

.guide { border-left: 3px solid var(--accent); padding-left: 14px; margin-bottom: 20px; }
.guide h3 { color: var(--texte); margin-bottom: 6px; }
.guide p { color: var(--texte-doux); margin-bottom: 0; font-size: 0.95rem; }
.etapes { margin: 8px 0 0; padding-left: 20px; color: var(--texte-doux); font-size: 0.95rem; }
.etapes li { margin-bottom: 6px; }

/* ---------- 8. Carte de communication (plein écran) ---------- */

.carte-sos {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Marges gauche et droite : 24 px sur téléphone. Sur un grand écran
     (ordinateur, tablette, vidéoprojecteur), elles grandissent pour que le
     contenu garde la largeur des onglets (640 px), centré, au lieu de
     s'étirer sur tout l'écran. */
  padding: 28px max(24px, calc((100% - 640px) / 2)) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.carte-sos[hidden] { display: none; }
.carte-sos .message {
  white-space: pre-line;   /* respecte les retours à la ligne du message */
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--texte);
  margin-bottom: 28px;
}
html[data-bouclier="on"] .carte-sos .message { color: #9a9a9a; }

/* Contraste renforcé, activé à la demande : pour tendre le téléphone à
   quelqu'un. Jamais automatique — la lumière reste toujours un choix. */
.carte-sos.contraste-fort .message,
html[data-bouclier="on"] .carte-sos.contraste-fort .message { color: #d8d8d8; }
.carte-sos.contraste-fort { background: #101010; }

/* Ce bouton n'apparaît qu'en bouclier, où le message est volontairement
   très sombre. Ailleurs, le message est déjà bien contrasté : le bouton n'y
   changeait presque rien en thème sombre, et noircissait l'écran en thème
   clair (puis le rallumait d'un coup en revenant). */
html:not([data-bouclier="on"]) #sos-contraste { display: none; }
.carte-sos .pied { margin-top: auto; padding-top: 28px; }

/* ---------- 8 bis. Numéros d'urgence ----------
   Même carte plein écran, mais une liste qui se lit et qui défile :
   elle part donc du haut, au lieu d'être centrée. */
.carte-sos.urgences { justify-content: flex-start; }
.carte-sos.urgences h2 { font-size: 1.3rem; margin-bottom: 10px; }
.carte-sos.urgences .intro { color: var(--texte-doux); margin-bottom: 24px; }

.urgence {
  border-top: 1px solid var(--bord);
  padding-top: 18px;
  margin-bottom: 22px;
}
.urgence .tete { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
/* Le numéro lui-même, lisible d'un coup d'œil et sans ambiguïté. */
.urgence .numero {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  margin-right: 10px;
  font-variant-numeric: tabular-nums;
}
.urgence p { color: var(--texte-doux); font-size: 0.95rem; margin-bottom: 14px; }
.urgence p strong { color: var(--texte); }
/* Un bouton armé attend une confirmation : il change de couleur pour que
   ce second appui soit un choix, pas un réflexe. */
.urgence button.arme { background: var(--accent-fond); border-color: var(--accent); }

/* En bouclier, --accent descend très bas (#3f4b48) : le numéro deviendrait
   l'élément le MOINS lisible de la carte, alors que c'est le seul qu'il
   faut vraiment pouvoir lire. On lui rend le gris de lisible-en-bouclier.
   Même raison pour le bouton armé : il faut voir qu'un second appui
   appellerait vraiment les secours. */
html[data-bouclier="on"] .urgence .numero { color: #8e8e8e; }
html[data-bouclier="on"] .urgence button.arme {
  background: #101010;
  border-color: #5a5a5a;
  color: #9a9a9a;
}

/* ---------- 9. Journal ---------- */

.entree {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.entree .haut { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.entree .date { font-weight: 600; }
.entree .meta { color: var(--texte-doux); font-size: 0.9rem; margin-top: 6px; }
.jauge { display: inline-flex; gap: 4px; vertical-align: middle; }
.jauge i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--accent); display: block; }
.jauge i.plein { background: var(--accent); }
.supprimer { width: auto; min-height: 60px; padding: 10px 16px; font-size: 0.9rem; margin-top: 12px; }

/* Notes vocales. Le temps écoulé change une fois par seconde, sans
   clignotement ni couleur vive. En bouclier, tout disparaît : aucun son
   ne peut venir de Refuge pendant le bouclier. */
.zone-voix { margin-bottom: 16px; }
.zone-voix > button { margin-bottom: 12px; }
.zone-voix .bouton-rangee { margin-bottom: 12px; }
.etiquette { margin-bottom: 4px; color: var(--texte-doux); font-size: 0.92rem; }
.voix-etat { font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.entree .voix-temps { font-variant-numeric: tabular-nums; }
html[data-bouclier="on"] .voix { display: none !important; }

/* ---------- 10. Respiration ---------- */

.scene-respiration {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  margin: 10px 0 6px;
}
.cercle {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--accent-fond);
  transform: scale(0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* En bouclier : simple contour fin gris, aucun aplat lumineux */
html[data-bouclier="on"] .cercle {
  background: transparent;
  border: 1px solid #2e2e2e;
}
.consigne {
  text-align: center;
  font-size: 1.3rem;
  min-height: 2.2em;
  color: var(--texte);
  margin-bottom: 4px;
}
.compteur { text-align: center; color: var(--texte-doux); margin-bottom: 20px; font-variant-numeric: tabular-nums; }

/* ---------- 11. Divers ---------- */

.avis {
  background: var(--accent-fond);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  color: var(--texte);
}
html[data-bouclier="on"] .avis { background: #0a0a0a; border-color: var(--bord); }

/* « Nouvelle version prête » (accueil et Réglages) : rien en bouclier,
   le bouclier, c'est le silence, pas une proposition de plus. */
html[data-bouclier="on"] .nouvelle-version { display: none !important; }

/* Ligne de transparence de la carte SOS : ce qui partira avec le SMS.
   Quand le bouton de retrait est masqué, le texte ne doit pas laisser
   un blanc en bas de l'encadré. */
#sos-position p { margin-bottom: 12px; }
#sos-position p:last-child { margin-bottom: 0; }
.vide { color: var(--texte-doux); text-align: center; padding: 36px 12px; }
.masque { display: none !important; }

/* Message d'état annoncé aux lecteurs d'écran */
.annonce {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   12. MON PROTOCOLE (v2)
   Une liste de cases à cocher qui doit rester lisible et
   confortable : chaque ligne fait au moins 60 px de haut, la
   case elle-même 30 px, et toute la ligne est cliquable.
   ============================================================ */

.proposition {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid var(--bord);
  color: var(--texte);
  font-size: 0.98rem;
  line-height: 1.45;
  cursor: pointer;
}
.proposition:last-of-type { border-bottom: none; }
.proposition input {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  accent-color: var(--accent);
  margin: 0;
}
.proposition span { flex: 1; }
/* Une ligne cochée s'épaissit : on voit d'un coup d'œil ce qui ira
   sur la carte, sans couleur criarde ni pastille clignotante. */
.proposition:has(input:checked) span { font-weight: 600; }

/* Le champ libre de chaque thème : plus court qu'une vraie note,
   c'est une ligne ou deux à ajouter aux propositions. */
.champ-libre { min-height: 84px; margin-bottom: 4px; }

/* En bouclier, le navigateur dessine la coche en blanc pour la faire
   ressortir — c'est le seul pixel lumineux d'un écran volontairement
   noir. On assombrit donc toutes les cases : elles restent lisibles,
   sans trouer l'obscurité. */
html[data-bouclier="on"] .proposition input,
html[data-bouclier="on"] .interrupteur input { filter: brightness(0.55); }

/* ---------- Aperçu de la carte ---------- */

#apercu-carte { max-width: 340px; margin: 0 auto 20px; }
#apercu-carte canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bord);
  border-radius: 14px;
}

/* Les deux nouveaux écrans pleine page sont des listes qui défilent :
   comme les numéros d'urgence, ils partent du haut. */
.carte-sos.defile { justify-content: flex-start; }
.carte-sos.defile h2 { font-size: 1.3rem; margin-bottom: 10px; }
.carte-sos.defile .intro { color: var(--texte-doux); margin-bottom: 22px; }
.carte-sos.defile ol.etapes { margin-bottom: 18px; }

/* ============================================================
   13. LIENS APAISANTS (v2)
   ============================================================ */

/* Le formulaire d'ajout ne doit pas coller au premier lien de la liste. */
#form-lien { margin-bottom: 22px; }

.lien {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.lien .nom { font-weight: 600; margin-bottom: 4px; }
.lien .adresse {
  color: var(--texte-doux);
  font-size: 0.85rem;
  margin-bottom: 12px;
  word-break: break-all;
}
.lien .bouton-rangee button { min-height: 60px; }
/* Un bouton armé attend le second appui, comme pour les urgences. */
.lien button.arme { background: var(--accent-fond); border-color: var(--accent); }
html[data-bouclier="on"] .lien button.arme { background: #101010; border-color: #5a5a5a; }

/* ============================================================
   13 bis. NOUVEAUTÉS DE LA VERSION 2.2
   ============================================================ */

/* Réglages : choix de la gamme, comme dans Cap. */
.palette-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.palette-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 16px 10px;
}
.palette-carte .pastille {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--bord);
  display: block;
}
.palette-carte[aria-pressed="true"] {
  background: var(--accent-fond);
  border-color: var(--accent);
  font-weight: 600;
}

/* Carte « Montrer un message » avec les phrases courtes : la liste peut
   dépasser l'écran, elle part donc du haut (centrée, le haut serait
   coupé et impossible à atteindre). */
.carte-sos.avec-phrases { justify-content: flex-start; }
.phrases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.phrases button { min-height: 64px; padding: 12px; overflow-wrap: anywhere; }
.phrases .retour-message { grid-column: 1 / -1; }
.phrases button[aria-pressed="true"] {
  background: var(--accent-fond);
  border-color: var(--accent);
  font-weight: 600;
}
html[data-bouclier="on"] .phrases button[aria-pressed="true"] { background: #101010; }
/* Une phrase courte s'affiche encore plus grand que le message. */
.carte-sos .message.phrase { font-size: 2.3rem; line-height: 1.3; overflow-wrap: anywhere; }

/* Journal : champ + bouton côte à côte, et boutons d'une entrée. */
.ajout-ligne { display: flex; gap: 10px; align-items: stretch; margin-bottom: 18px; }
.ajout-ligne input { margin-bottom: 0; flex: 1; min-width: 0; }
.ajout-ligne button { width: auto; flex-shrink: 0; }
.actions-entree { display: flex; flex-wrap: wrap; gap: 10px; }
.choix button { overflow-wrap: anywhere; }

/* Écran « Quand ça monte » : des listes simples, bien espacées. */
.liste-monte { margin: 0 0 22px; padding-left: 22px; }
.liste-monte li { margin-bottom: 10px; font-size: 1.05rem; line-height: 1.5; }

/* ============================================================
   14. BARRE D'ONGLETS À CINQ ENTRÉES (v2)
   Un onglet de plus : on resserre un peu le texte pour que
   « Protocole » et « Réglages » tiennent sur un écran étroit,
   sans jamais descendre sous 68 px de hauteur tactile.
   ============================================================ */
.onglet { font-size: 0.72rem; padding: 8px 2px; gap: 4px; }
.onglet svg { width: 22px; height: 22px; }

/* Note d'installation (section À propos) : inutile une fois l'application
   installée, puisqu'elle s'ouvre alors dans sa propre fenêtre (mode
   d'affichage autre que « browser », celui d'un onglet de navigateur). */
@media not all and (display-mode: browser) {
  .note-installation { display: none; }
}

/* ============================================================
   15. PROCÉDURES PAR ÉMOTION
   Des smileys en gros, faciles à toucher : deux par ligne, au
   moins 132 px de haut. Les smileys en couleur sont adoucis
   (saturation réduite) ; en bouclier, ils passent en gris sombre,
   sinon ce seraient les seuls points jaunes vifs d'un écran noir.
   ============================================================ */
.grille-emotions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grille-emotions button {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  overflow-wrap: anywhere;
}
/* Un nombre impair d'émotions : la dernière prend toute la largeur. */
.grille-emotions button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.smiley { font-size: 3rem; line-height: 1; filter: saturate(0.7); }
.smiley-petit { font-size: 1.5rem; line-height: 1; filter: saturate(0.7); vertical-align: middle; }
html[data-bouclier="on"] .smiley,
html[data-bouclier="on"] .smiley-petit { filter: grayscale(1) brightness(0.6); }

#procedure-titre { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; }
#procedure-etapes .proposition { font-size: 1.08rem; }

/* Réglages : une émotion par encadré dépliable. Le titre fait au
   moins 60 px de haut pour se toucher facilement. */
:is(.emotion-reglage, .proche-reglage) { border: 1px solid var(--bord); border-radius: 14px; margin-bottom: 12px; }
:is(.emotion-reglage, .proche-reglage) > summary {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
}
:is(.emotion-reglage, .proche-reglage)[open] > summary { border-bottom: 1px solid var(--bord); }
:is(.emotion-reglage, .proche-reglage) .dedans { padding: 14px 12px 6px; }
:is(.emotion-reglage, .proche-reglage) summary small { font-weight: 400; margin-left: auto; }
.choix-smiley { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin-bottom: 12px; }
.choix-smiley button { padding: 6px; font-size: 1.6rem; line-height: 1; }
.choix-smiley button[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-fond); }
.etape-reglage { border-top: 1px solid var(--bord); padding: 12px 0; }
.etape-reglage label { margin-bottom: 4px; }
/* Deux lignes de haut : une étape longue se lit en entier. */
.etape-reglage textarea { min-height: 64px; margin-bottom: 8px; }
/* Trois boutons côte à côte, même sur un téléphone de 360 px : ils
   peuvent rétrécir sous la largeur de leur mot (min-width: 0). */
.etape-reglage .bouton-rangee { gap: 6px; }
.etape-reglage .bouton-rangee button {
  min-width: 0;
  padding: 8px 2px;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
/* Un bouton qui ne peut pas servir (« Monter » sur la première étape) :
   estompé, mais toujours lisible. */
:is(.emotion-reglage, .proche-reglage) button:disabled { opacity: 0.45; cursor: default; }

/* ============================================================
   16. ÉCRIRE À UN PROCHE
   Un bouton par contact, puis un bouton par message. Le message
   s'affiche en entier, aligné à gauche, pour être relu avant
   l'appui. Les encadrés des Réglages reprennent ceux des émotions.
   ============================================================ */
.liste-boutons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.liste-boutons button { min-height: 72px; overflow-wrap: anywhere; }
.liste-boutons .bouton-contact { font-size: 1.15rem; font-weight: 600; }
.liste-boutons .bouton-contact small { display: block; font-weight: 400; margin-top: 2px; }
.liste-boutons .bouton-message { text-align: left; white-space: pre-line; line-height: 1.45; }
.message-reglage { border-top: 1px solid var(--bord); padding: 12px 0; }
.message-reglage textarea { min-height: 84px; margin-bottom: 8px; }
.message-reglage button { width: auto; padding: 10px 16px; font-size: 0.9rem; }