/* ============================================================
   151 PHOTOS — FEUILLE DE STYLE UNIQUE
   Direction artistique V4 verrouillée. Fidélité > exploration.

   POLICES AUTO-HÉBERGÉES (inchangé) : servies depuis le domaine de
   l'app, jamais depuis Google Fonts, pour ne pas transmettre l'IP
   des visiteurs à un tiers. Fichiers @fontsource-variable.

   AJOUT V4 : Source Sans 3 remplace Inter comme sans-serif d'interface.
   Les deux .woff2 sont auto-hébergés dans ./fonts/. Inter reste le
   fallback de sécurité si le chargement de la police échoue.
   ============================================================ */
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('./fonts/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
  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:'Source Sans 3';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('./fonts/source-sans-3-latin-ext-wght-normal.woff2') format('woff2-variations');
  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:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('./fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  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:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('./fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  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:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('./fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  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:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('./fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations');
  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:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('./fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations');
  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:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('./fonts/fraunces-latin-ext-wght-italic.woff2') format('woff2-variations');
  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;
}

/* ============================================================
   1. TOKENS V4 — seule source de vérité chromatique
   ============================================================ */
:root{
  --paper:#F8F3E9;
  --surface:#FDFAF4;
  --sunken:#F0E9DB;

  --rule:#E2DACB;
  --rule-strong:#D8CFC1;

  --ink:#3B3531;
  --ink-secondary:#5A504A;
  --ink-muted:#6B645B;

  --terracotta:#D7553D;
  --terracotta-dense:#BE4529;

  --success:#4A5D3A;
  --warning:#7A5C2E;
  --error:#8E3320;

  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'Source Sans 3','Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;

  --radius:6px;
  --radius-pill:99px;

  /* Alias de compatibilité : d'anciennes règles et quelques styles
     inline de app.js consomment encore ces noms. Ils pointent
     désormais sur les tokens V4 — aucun navy, aucun doré ne subsiste. */
  --line:var(--rule);
  --ink-900:var(--ink);
  --ink-950:var(--ink);
  --ink-700:var(--ink-secondary);
  --muted-600:var(--ink-secondary);
  --cream-50:var(--paper);
  --cream-100:var(--sunken);
  --navy-950:var(--ink);
  --navy-800:var(--ink);
  --navy-700:var(--rule-strong);
  --gold-500:var(--terracotta);
  --gold-600:var(--terracotta-dense);
  --gold-700:var(--terracotta-dense);
  --gold-300:var(--terracotta-dense);
  --gold-100:var(--sunken);
  --ok-600:var(--success);
  --error-ink:var(--error);
  --error-line:var(--rule);
  --error-bg:var(--surface);
  --radius-lg:var(--radius);
  --radius-md:var(--radius);
  --radius-sm:var(--radius);
  --shadow:none;
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box}
html,body{min-height:100%;min-height:100dvh;scroll-behavior:auto}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  background:var(--paper);
  color:var(--ink);
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,textarea,select{font:inherit;color:inherit}
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.app{
  max-width:480px;margin:0 auto;background:var(--paper);
  min-height:100svh;min-height:100dvh;
  padding-bottom:max(40px,calc(24px + env(safe-area-inset-bottom)));
}
main{
  padding:20px max(16px,calc(12px + env(safe-area-inset-right)))
          max(20px,calc(12px + env(safe-area-inset-bottom)))
          max(16px,calc(12px + env(safe-area-inset-left)));
}

/* L'accueil reste dans le flux normal du document. Chrome iOS peut décaler
   son viewport visuel à l'ouverture depuis une app externe : un wrapper fixé
   au viewport de mise en page serait alors partiellement masqué par la barre
   du navigateur. Le défilement naturel et resetScreenScroll() gardent le haut
   de la page accessible sans dépendre de la hauteur des barres iOS. */
a{color:var(--terracotta-dense);text-underline-offset:3px}
a:hover{color:var(--error)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.locale-btn:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px
}

/* ============================================================
   3. HEADER — calme, papier, une ligne
   ============================================================ */
.topband{
  background:var(--paper);
  color:var(--ink);
  border-bottom:1px solid var(--rule);
  border-radius:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:max(14px,calc(10px + env(safe-area-inset-top)))
          max(16px,calc(12px + env(safe-area-inset-right))) 13px
          max(16px,calc(12px + env(safe-area-inset-left)));
}
.brandrow{display:flex;align-items:baseline;gap:9px;flex-wrap:nowrap;min-width:0}
.brandrow > div{display:flex;align-items:baseline;gap:9px;flex-wrap:nowrap;min-width:0}
/* Wordmark V4 variante B : « 151 » dense, « Photos » calme, une seule police. */
.wordmark{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:21px;
  line-height:1;
  color:var(--ink);
  letter-spacing:-.012em;
  font-variation-settings:'opsz' 144;
  white-space:nowrap;
}
.wordmark span{font-weight:700;letter-spacing:-.04em;margin-right:.16em}
.tagline{
  font-family:var(--font-sans);
  font-style:normal;font-weight:400;font-size:11px;line-height:1.3;
  color:var(--ink-muted);margin:0;white-space:nowrap;
}
.locale-switch{display:flex;gap:9px;margin:0;flex:0 0 auto}
.locale-btn{
  background:transparent;border:0;border-radius:0;
  color:var(--ink-muted);padding:2px 0 3px;
  font-size:12px;font-weight:400;cursor:pointer;letter-spacing:.01em;
}
.locale-btn[aria-pressed="true"]{
  background:transparent;color:var(--ink);font-weight:600;
  box-shadow:inset 0 -1.5px 0 var(--terracotta);
}
.debugbar{display:flex;gap:6px;margin:12px 16px 0;flex-wrap:wrap}
.debugbar button{
  flex:1;min-width:100px;border:1px solid var(--rule-strong);background:var(--surface);
  color:var(--ink-secondary);border-radius:var(--radius);padding:7px;font-size:11px;cursor:pointer
}

/* ============================================================
   4. SURFACES — l'app est bord à bord, plate, sans carte blanche
   ============================================================ */
.card{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:0;margin:0 0 8px;
}
.accentbox{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:15px 17px;margin:16px 0;
}
.divider{display:flex;align-items:center;margin:24px 0}
.divider::before{content:"";flex:1;height:1px;background:var(--rule)}
.divider::after{content:none}
.divider .dot{display:none}
.email-preview{
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);padding:16px;
}

/* ============================================================
   5. TYPOGRAPHIE
   Fraunces ne parle que du souvenir : accueil, défi, progression,
   célébrations. Les écrans de réglage restent en sans.
   ============================================================ */
h1,h2,h3{margin:0 0 12px;color:var(--ink);font-weight:600}
h1,h2{font-family:var(--font-serif);font-variation-settings:'opsz' 144;letter-spacing:-.02em}
h1{font-size:29px;line-height:1.1}
h2{font-size:24px;line-height:1.16}
h3{font-family:var(--font-sans);font-size:17px;line-height:1.3;letter-spacing:0}
p{line-height:1.6;margin:10px 0}
.lead{font-size:16.5px;line-height:1.6}
.muted{color:var(--ink-secondary)}
.small{font-size:14px}
.strong{font-weight:600}
/* Le surtitre doré en capitales espacées est supprimé : casse normale,
   couleur secondaire, hiérarchie portée par le poids. */
.eyebrow{
  font-family:var(--font-sans);font-size:14.5px;text-transform:none;
  letter-spacing:0;color:var(--ink-secondary);font-weight:400;
}
.legend{font-size:13.5px;color:var(--ink-secondary);margin-top:6px}

/* Écrans de réglage : aucun serif, y compris sur leurs titres.
   Le crochet #view[data-screen] est posé par render() (une ligne,
   sans effet sur la logique) — voir REPORT.md. */
#view[data-screen="age"] h1,#view[data-screen="age"] h2,
#view[data-screen="principles"] h1,#view[data-screen="principles"] h2,
#view[data-screen="preview"] h1,#view[data-screen="preview"] h2,
#view[data-screen="adapt"] h1,#view[data-screen="adapt"] h2,
#view[data-screen="reminders"] h1,#view[data-screen="reminders"] h2,
#view[data-screen="remindersFreq"] h1,#view[data-screen="remindersFreq"] h2,
#view[data-screen="noReminders"] h1,#view[data-screen="noReminders"] h2,
#view[data-screen="notifDemo"] h1,#view[data-screen="notifDemo"] h2,
#view[data-screen="motherSent"] h1,#view[data-screen="motherSent"] h2,
#view[data-screen="motherEmail"] h1,#view[data-screen="motherEmail"] h2,
#view[data-screen="bookEmail"] h1,#view[data-screen="bookEmail"] h2,
#view[data-screen="bookCode"] h1,#view[data-screen="bookCode"] h2,
#view[data-screen="bookProfiles"] h1,#view[data-screen="bookProfiles"] h2,
#view[data-screen="bookRecover"] h1,#view[data-screen="bookRecover"] h2,
#view[data-screen="bookPersonalize"] h1,#view[data-screen="bookPersonalize"] h2,
#view[data-screen="bookPrinciples"] h1,#view[data-screen="bookPrinciples"] h2,
#view[data-screen="bookAgeEdit"] h1,#view[data-screen="bookAgeEdit"] h2,
#view[data-screen="bookProfileDeleteConfirm"] h1,#view[data-screen="bookProfileDeleteConfirm"] h2,
#view[data-screen="bookChoose"] h1,#view[data-screen="bookChoose"] h2,
#view[data-screen="bookChallengeConfirm"] h1,#view[data-screen="bookChallengeConfirm"] h2,
#view[data-screen="bookReminders"] h1,#view[data-screen="bookReminders"] h2,
#view[data-screen="bookRemindersFreq"] h1,#view[data-screen="bookRemindersFreq"] h2,
#view[data-screen="bookNoReminders"] h1,#view[data-screen="bookNoReminders"] h2,
#view[data-screen="bookNotifDemo"] h1,#view[data-screen="bookNotifDemo"] h2,
#view[data-screen="bookChangeConfirm"] h1,#view[data-screen="bookChangeConfirm"] h2,
#view[data-screen="bookSuggestions"] h1,#view[data-screen="bookSuggestions"] h2,
#view[data-screen="bookHistoryAdd"] h1,#view[data-screen="bookHistoryAdd"] h2,
#view[data-screen="bookAccount"] h1,#view[data-screen="bookAccount"] h2,
#view[data-screen="bookAccountDelete"] h1,#view[data-screen="bookAccountDelete"] h2,
#view[data-screen="privacyPolicy"] h1,#view[data-screen="privacyPolicy"] h2{
  font-family:var(--font-sans);letter-spacing:0;font-variation-settings:normal;
}
#view[data-screen="age"] h1,#view[data-screen="reminders"] h1,
#view[data-screen="remindersFreq"] h1,#view[data-screen="noReminders"] h1,
#view[data-screen="bookCode"] h1,#view[data-screen="bookEmail"] h1,
#view[data-screen="bookProfiles"] h1,#view[data-screen="bookPersonalize"] h1,
#view[data-screen="bookAccount"] h1,#view[data-screen="bookReminders"] h1,
#view[data-screen="bookRemindersFreq"] h1{font-size:23px;line-height:1.28}

/* ============================================================
   6. BOUTONS
   Primaire : terracotta plein, texte crème. 19 px / 700 : plancher
   imposé par WCAG AA (crème sur #D7553D = 3,83:1, conforme en
   grand texte gras). Le bouton grandit, la typographie ne rétrécit
   jamais. Deux lignes maximum : au-delà, c'est un sujet de contenu.
   ============================================================ */
.btn{
  display:block;width:100%;border:0;border-radius:var(--radius);
  padding:14px 16px;min-height:56px;
  font-weight:700;font-size:19px;line-height:1.25;
  cursor:pointer;text-align:center;margin-top:12px;
  text-wrap:balance;
}
.btn-primary{background:var(--terracotta);color:var(--surface)}
.btn-primary:hover,.btn-primary:active{background:var(--terracotta-dense)}
.btn-secondary{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--rule-strong);font-size:16px;font-weight:600;min-height:52px;
}
.btn-secondary:hover,.btn-secondary:active{background:var(--sunken)}
.btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--rule-strong);font-size:16px;font-weight:600;min-height:52px;
}
.btn-ghost:hover,.btn-ghost:active{background:var(--sunken)}
.btn-danger{
  background:transparent;color:var(--error);
  border:1px solid var(--rule);font-size:16px;font-weight:600;min-height:52px;
}
.btn-danger:hover{background:transparent;border-color:var(--error);filter:none}
.btn-danger:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}
.linkbtn{
  display:block;width:100%;background:none;border:0;padding:12px 0;margin-top:4px;
  color:var(--ink);font-size:15.5px;font-weight:600;text-decoration:none;
  cursor:pointer;text-align:center;min-height:44px;
}
.linkbtn:hover{color:var(--terracotta-dense)}
.linkbtn.legal-link,.legal-link,.danger-link{text-decoration:underline;text-underline-offset:3px}
.danger-link{color:var(--error)!important;font-weight:600}
.advanced-link{
  width:100%;border:0;background:transparent;color:var(--ink);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;padding:12px 0 2px;cursor:pointer;text-align:left
}
.advanced-panel{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.more-actions{margin:10px auto 0;text-align:center}
.more-actions summary{
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  color:var(--ink);font-size:15.5px;font-weight:600;list-style:none;padding:10px
}
.more-actions summary::-webkit-details-marker{display:none}
.more-actions-list{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding-top:4px}

/* ============================================================
   7. CHAMPS ET CONTRÔLES — patterns standards, style 151 Photos
   ============================================================ */
.input{
  width:100%;padding:15px;min-height:54px;border-radius:var(--radius);
  border:1px solid var(--rule-strong);background:var(--surface);
  color:var(--ink);margin-top:8px;font-size:16.5px;
}
.input::placeholder{color:var(--ink-muted)}

/* Harmoniser les champs remplis automatiquement sans désactiver l'autofill.
   Sélecteurs séparés pour les navigateurs qui ne reconnaissent qu'un alias. */
.input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
  box-shadow:0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
.input:autofill{
  box-shadow:0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
@media(forced-colors:active){
  .input:-webkit-autofill{box-shadow:none;-webkit-box-shadow:none;-webkit-text-fill-color:CanvasText;caret-color:CanvasText}
  .input:autofill{box-shadow:none;-webkit-text-fill-color:CanvasText;caret-color:CanvasText}
}

textarea.input{resize:vertical;font-family:inherit;line-height:1.5}
.checkrow{
  display:flex;gap:12px;align-items:flex-start;margin-top:16px;
  font-size:14.5px;line-height:1.55;color:var(--ink-secondary)
}
.checkrow input[type="checkbox"]{
  flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--terracotta)
}
.choicegrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.choice{
  border:1px solid var(--rule-strong);border-radius:var(--radius);padding:16px;
  cursor:pointer;background:var(--surface);min-height:56px;
  text-align:left;width:100%;font:inherit;color:var(--ink)
}
.choice[aria-pressed="true"]{
  border-color:var(--ink);background:var(--sunken);box-shadow:none
}
.freq-row{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}
.freq{
  display:flex;align-items:center;gap:12px;border:1px solid var(--rule-strong);
  background:var(--surface);border-radius:var(--radius);padding:15px;min-height:56px;
  cursor:pointer;width:100%;font:inherit;text-align:left;color:var(--ink)
}
.freq[aria-pressed="true"]{border-color:var(--ink);background:var(--sunken);box-shadow:none}
.radio-dot{
  width:20px;height:20px;border:1.5px solid var(--rule-strong);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto
}
.freq[aria-pressed="true"] .radio-dot{border-color:var(--terracotta)}
.freq[aria-pressed="true"] .radio-dot:after{
  content:"";width:10px;height:10px;background:var(--terracotta);border-radius:50%
}
.freq-more{margin:12px 0 2px;text-align:center}
.freq-more summary{
  cursor:pointer;display:inline-block;color:var(--ink);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;padding:8px 10px
}
.freq-row-more{margin-top:10px}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.preset{
  border:1px solid var(--rule-strong);background:var(--surface);border-radius:var(--radius);
  padding:14px;min-height:74px;cursor:pointer;text-align:left;
  font:inherit;font-weight:600;font-size:15.5px;line-height:1.4;width:100%;color:var(--ink)
}
.preset[aria-pressed="true"]{background:var(--sunken);border-color:var(--ink);color:var(--ink)}
.schedule-wrap{overflow-x:auto;margin:14px 0 16px}
.schedule{width:100%;border-collapse:separate;border-spacing:6px;min-width:390px}
.schedule th{font-size:12px;color:var(--ink-secondary);font-weight:600;text-align:center;padding:2px}
.schedule th:first-child{text-align:left}
.schedule td:first-child{font-size:13px;font-weight:600;padding-right:4px}
.slotcell{
  border:1px solid var(--rule-strong);background:var(--surface);border-radius:var(--radius);
  min-width:76px;height:44px;text-align:center;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink-secondary)
}
.slotcell[aria-pressed="true"]{background:var(--sunken);border-color:var(--ink);color:var(--ink)}
.input[inputmode="numeric"],.input[type="tel"]{
  font-variant-numeric:tabular-nums;letter-spacing:.14em;font-weight:600;text-align:center
}

/* ============================================================
   8. DÉFI ACTIF — le grand aplat identitaire
   Pleine largeur, rayon 0, numéro narratif en Fraunces.
   Aucun petit texte régulier posé sur le terracotta : le corps est
   à 19 px / 700 (AA grand texte), le badge famille part sur une
   surface claire.
   ============================================================ */
.challenge{
  background:var(--terracotta);border:0;border-radius:0;
  margin:12px calc(-1 * max(16px,calc(12px + env(safe-area-inset-right)))) 16px
         calc(-1 * max(16px,calc(12px + env(safe-area-inset-left))));
  padding:26px max(16px,calc(12px + env(safe-area-inset-right))) 30px
          max(16px,calc(12px + env(safe-area-inset-left)));
}
/* Libellé en sans, nombre en Fraunces. Les deux restent à un corps conforme
   AA sur terracotta (crème = 3,83:1, valide en grand texte gras). */
.challenge .num{
  font-family:var(--font-sans);
  font-size:19px;font-weight:700;line-height:1.2;letter-spacing:0;
  color:var(--surface);text-transform:none;
  display:flex;align-items:baseline;gap:.3em;flex-wrap:wrap;
}
.challenge .num .num-value{
  font-family:var(--font-serif);font-variation-settings:'opsz' 144;
  font-size:30px;font-weight:600;line-height:1;letter-spacing:-.02em;
}
.challenge .title{
  font-family:var(--font-serif);font-variation-settings:'opsz' 144;
  font-size:34px;line-height:1.05;letter-spacing:-.02em;
  color:var(--surface);margin:10px 0 12px;font-weight:600;
}
.challenge .text{color:var(--surface);font-size:19px;line-height:1.45;font-weight:700;margin:0}
.challenge .child-badge,.challenge .family-badge{
  display:inline-block;width:auto;max-width:100%;line-height:1.35;
  padding:7px 12px;margin:0 0 14px;border-radius:var(--radius);
  background:var(--surface);border:0;
  color:var(--ink);font-size:14.5px;font-weight:600;line-height:1.25;letter-spacing:0;
}
.progress{height:4px;background:var(--sunken);border-radius:2px;overflow:hidden;margin:10px 0 20px}
.progress > span{display:block;height:100%;background:var(--terracotta);width:0}
/* Chiffres narratifs : compteur de série et progression. */
.progress-label,.challenge .num,.success{font-family:var(--font-serif)}

/* ============================================================
   9. ÉTATS — une phrase, un symbole discret, aucune couleur de fond
   ============================================================ */
.notice,.form-error,.offline-banner,.tip{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--rule);border-left-width:1px;
  border-radius:var(--radius);padding:15px 17px;margin:14px 0;
  font-size:15.5px;line-height:1.55;color:var(--ink);
}
.offline-banner{margin:0 0 14px}
.form-error{color:var(--ink)}
.form-error::before{content:"!";flex:0 0 auto;color:var(--error);font-size:15px;line-height:1.55;font-weight:700}
.offline-banner::before{content:"•";flex:0 0 auto;color:var(--warning);font-size:15px;line-height:1.55}
.success{
  font-family:var(--font-serif);font-variation-settings:'opsz' 144;
  color:var(--ink);font-weight:600;letter-spacing:-.01em;
}
/* Le symbole d'état se lit comme une ponctuation : pas de pastille,
   pas de cercle doré, pas d'icône décorative. */
.icon-chip{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:18px;height:18px;border-radius:0;background:transparent;color:var(--ink-secondary);
}
.icon-chip svg{display:block;width:16px;height:16px;stroke-width:1.6}
.icon-row{display:flex;gap:11px;align-items:flex-start}
.icon-row > div{flex:1;min-width:0}
.icon-heading{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.icon-heading > *{margin:0}
.icon-heading .icon-chip{color:var(--success)}
.celebration-heading{gap:9px;margin-bottom:0}
.celebration-heading .icon-chip{width:18px;height:18px;background:transparent;color:var(--success)}
.celebration-heading .icon-chip svg{width:16px;height:16px;stroke-width:1.6}
.tip .icon-chip,.notice .icon-chip{color:var(--warning)}
.sim-notif{
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);
  padding:15px 17px;box-shadow:none;margin:16px 0;cursor:pointer;
  width:100%;text-align:left;font:inherit;color:var(--ink)
}
.sim-notif .appname{font-size:13px;color:var(--ink-secondary);margin-bottom:5px}
.sim-notif .notif-title{font-weight:600;margin-bottom:4px}

/* ============================================================
   10. CÉLÉBRATIONS — plein terracotta, sans header
   Le registre change avant la couleur : le wordmark disparaît.
   TOUT texte posé sur l'aplat est à 19 px / 700 minimum (AA grand
   texte, 3,83:1) ; ce qui doit rester en petit corps passe sur une
   surface claire (.accentbox), à 11,6:1.
   ============================================================ */
.app:has(#view[data-screen="success"]),
.app:has(#view[data-screen="bookSuccess"]),
.app:has(#view[data-screen="finish"]),
.app:has(#view[data-screen="bookFinish"]){background:var(--terracotta)}
.app:has(#view[data-screen="success"]) .topband,
.app:has(#view[data-screen="bookSuccess"]) .topband,
.app:has(#view[data-screen="finish"]) .topband,
.app:has(#view[data-screen="bookFinish"]) .topband{display:flex}
.app:has(#view[data-screen="success"]) main,
.app:has(#view[data-screen="bookSuccess"]) main,
.app:has(#view[data-screen="finish"]) main,
.app:has(#view[data-screen="bookFinish"]) main{
  padding-top:max(64px,calc(52px + env(safe-area-inset-top)))
}
#view[data-screen="success"],#view[data-screen="bookSuccess"],
#view[data-screen="finish"],#view[data-screen="bookFinish"]{color:var(--surface)}
#view[data-screen="success"] h1,#view[data-screen="bookSuccess"] h1,
#view[data-screen="finish"] h1,#view[data-screen="bookFinish"] h1,
#view[data-screen="success"] h2,#view[data-screen="bookSuccess"] h2,
#view[data-screen="finish"] h2,#view[data-screen="bookFinish"] h2{
  color:var(--surface);font-size:33px;line-height:1.1
}
#view[data-screen="success"] .success,#view[data-screen="bookSuccess"] .success,
#view[data-screen="finish"] .success,#view[data-screen="bookFinish"] .success{
  color:var(--surface);font-size:52px;line-height:1;letter-spacing:-.03em;
  display:block;white-space:nowrap
}
/* Célébration : le compteur est le seul visuel, aucun pictogramme. */
#view[data-screen="success"] .celebration-heading,#view[data-screen="bookSuccess"] .celebration-heading,
#view[data-screen="finish"] .celebration-heading,#view[data-screen="bookFinish"] .celebration-heading{display:block}
#view[data-screen="success"] .celebration-heading .icon-chip,#view[data-screen="bookSuccess"] .celebration-heading .icon-chip,
#view[data-screen="finish"] .celebration-heading .icon-chip,#view[data-screen="bookFinish"] .celebration-heading .icon-chip{display:none}
#view[data-screen="success"] h1,#view[data-screen="bookSuccess"] h1,
#view[data-screen="finish"] h1,#view[data-screen="bookFinish"] h1{margin-top:34px}
#view[data-screen="success"] p,#view[data-screen="bookSuccess"] p,
#view[data-screen="finish"] p,#view[data-screen="bookFinish"] p,
#view[data-screen="success"] .lead,#view[data-screen="bookSuccess"] .lead,
#view[data-screen="finish"] .lead,#view[data-screen="bookFinish"] .lead,
#view[data-screen="success"] .small,#view[data-screen="bookSuccess"] .small,
#view[data-screen="finish"] .small,#view[data-screen="bookFinish"] .small,
#view[data-screen="success"] .muted,#view[data-screen="bookSuccess"] .muted,
#view[data-screen="finish"] .muted,#view[data-screen="bookFinish"] .muted{
  color:var(--surface);font-size:19px;line-height:1.5;font-weight:700
}
#view[data-screen="success"] .accentbox,#view[data-screen="bookSuccess"] .accentbox,
#view[data-screen="finish"] .accentbox,#view[data-screen="bookFinish"] .accentbox{
  background:var(--surface);border-color:var(--surface);color:var(--ink)
}
#view[data-screen="success"] .accentbox p,#view[data-screen="bookSuccess"] .accentbox p,
#view[data-screen="finish"] .accentbox p,#view[data-screen="bookFinish"] .accentbox p,
#view[data-screen="success"] .accentbox .lead,#view[data-screen="bookSuccess"] .accentbox .lead,
#view[data-screen="finish"] .accentbox .lead,#view[data-screen="bookFinish"] .accentbox .lead,
#view[data-screen="success"] .accentbox .small,#view[data-screen="bookSuccess"] .accentbox .small,
#view[data-screen="finish"] .accentbox .small,#view[data-screen="bookFinish"] .accentbox .small{
  color:var(--ink);font-size:16px;font-weight:400
}
#view[data-screen="success"] .accentbox strong,#view[data-screen="bookSuccess"] .accentbox strong,
#view[data-screen="finish"] .accentbox strong,#view[data-screen="bookFinish"] .accentbox strong{font-weight:600}
#view[data-screen="success"] .icon-chip,#view[data-screen="bookSuccess"] .icon-chip,
#view[data-screen="finish"] .icon-chip,#view[data-screen="bookFinish"] .icon-chip{color:var(--surface)}
#view[data-screen="success"] .btn-primary,#view[data-screen="bookSuccess"] .btn-primary,
#view[data-screen="finish"] .btn-primary,#view[data-screen="bookFinish"] .btn-primary{
  background:var(--surface);color:var(--ink)
}
#view[data-screen="success"] .btn-primary:hover,#view[data-screen="bookSuccess"] .btn-primary:hover,
#view[data-screen="finish"] .btn-primary:hover,#view[data-screen="bookFinish"] .btn-primary:hover{background:var(--sunken)}
#view[data-screen="success"] .btn-secondary,#view[data-screen="bookSuccess"] .btn-secondary,
#view[data-screen="finish"] .btn-secondary,#view[data-screen="bookFinish"] .btn-secondary,
#view[data-screen="success"] .btn-ghost,#view[data-screen="bookSuccess"] .btn-ghost,
#view[data-screen="finish"] .btn-ghost,#view[data-screen="bookFinish"] .btn-ghost{
  background:transparent;border-color:var(--surface);color:var(--surface);font-size:19px;font-weight:700
}
#view[data-screen="success"] .linkbtn,#view[data-screen="bookSuccess"] .linkbtn,
#view[data-screen="finish"] .linkbtn,#view[data-screen="bookFinish"] .linkbtn{
  color:var(--surface);font-size:19px;font-weight:700
}
#view[data-screen="success"] .divider::before,#view[data-screen="bookSuccess"] .divider::before,
#view[data-screen="finish"] .divider::before,#view[data-screen="bookFinish"] .divider::before{
  background:rgba(253,250,244,.45)
}
.finish-title{font-size:33px!important;line-height:1.1!important}
/* Aucun effet de célébration : le code de confettis a été retiré de app.js,
   les styles correspondants n'existent plus. */

/* ============================================================
   11. INSTALLATION PWA — même papier, même encre, même boutons
   Fonctionnement, déclenchement et contenus inchangés : seuls le
   téléphone dessiné, les étincelles dorées, les dégradés radiaux
   et les ombres partent. Le visuel devient une vignette sobre.
   ============================================================ */
.install-screen{text-align:left}
.install-screen .lead{max-width:none;margin-left:0;margin-right:0}
.install-final{
  text-align:left;padding:0;overflow:visible;box-shadow:none;background:transparent;border:0;
}
.install-hero{
  position:relative;min-height:0;display:flex;justify-content:flex-start;align-items:center;
  margin:4px 0 22px;
}
.install-hero::before{content:none}
.install-phone{
  position:relative;width:84px;height:132px;padding:9px;
  border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--surface);transform:none;box-shadow:none;z-index:1;
}
.install-speaker{display:none}
.install-phone-inner{
  height:100%;border-radius:4px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.install-phone-inner img{width:52px;height:52px;border-radius:4px;box-shadow:none}
.install-spark,.install-spark-left,.install-spark-right{display:none}
.install-final h1{
  font-family:var(--font-serif);font-variation-settings:'opsz' 144;
  font-size:clamp(27px,7.4vw,33px);line-height:1.08;letter-spacing:-.022em;
  max-width:none;margin:0 0 14px;color:var(--ink);
}
.install-copy{
  font-size:16.5px;line-height:1.6;max-width:none;margin:0 0 22px;color:var(--ink-secondary);
}
.install-family{color:var(--ink);font-weight:600}
.install-final .btn{font-size:19px;padding:14px 16px;border-radius:var(--radius);margin-top:8px}
.install-later{font-size:15.5px;margin-top:8px}
.install-offer{
  margin:16px 0;padding:16px 17px;border:1px solid var(--rule);
  border-radius:var(--radius);background:var(--surface);
}
.install-offer strong{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.install-offer p{font-size:14.5px;line-height:1.55;color:var(--ink-secondary);margin:6px 0 10px}
.install-offer .btn{margin-top:8px}
.install-offer .linkbtn{margin-top:2px;padding-bottom:4px}
.install-privacy{margin-top:14px}

/* ============================================================
   12. COMPTE, LÉGAL, DIVERS
   ============================================================ */
.account-section{padding:4px 0}
.account-section-title{
  font-family:var(--font-sans);font-size:14.5px;font-weight:400;
  color:var(--ink-secondary);margin:22px 0 6px;
}
.account-meta{margin:4px 0 8px;overflow-wrap:anywhere;color:var(--ink-secondary)}
.account-data-lead{margin:4px 0 8px;color:var(--ink-secondary)}
.account-confirm-label{display:block;margin-top:16px;font-weight:600}
.legal-link{margin-top:10px;text-align:left}
.account-section .legal-link{display:block;width:100%;margin:8px 0 12px;text-align:left}
.legal-card{line-height:1.6}
.legal-card h1{
  font-family:var(--font-sans);font-size:26px;line-height:1.2;
  letter-spacing:0;font-variation-settings:normal;margin-bottom:10px
}
.legal-card h2{
  font-family:var(--font-sans);font-size:19px;line-height:1.3;letter-spacing:0;
  font-variation-settings:normal;margin:30px 0 10px
}
.legal-card h3{font-size:16px;line-height:1.35;margin:20px 0 6px}
.legal-card ul{padding-left:22px}
.legal-card li{margin:5px 0}
.legal-card a{color:var(--terracotta-dense);font-weight:600;text-underline-offset:3px}
.legal-table-wrap{overflow-x:auto;margin:14px 0 18px;border:1px solid var(--rule);border-radius:var(--radius)}
.legal-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:14px;line-height:1.5}
.legal-table-wide{min-width:620px}
.legal-table th,.legal-table td{overflow-wrap:anywhere}
.legal-table:not(.legal-table-wide) th:first-child{width:38%}
.legal-table th{background:var(--surface)}
.legal-table th+th,.legal-table td+td{border-left:1px solid var(--rule)}
.legal-table th,.legal-table td{padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.legal-table th{font-weight:600;color:var(--ink-secondary)}
.legal-table tr:last-child td{border-bottom:0}
@media(max-width:400px){.legal-table th,.legal-table td{padding:9px 8px}}
.legal-back{margin-top:28px}
.legal-back-top{
  position:sticky;top:max(8px,calc(8px + env(safe-area-inset-top)));z-index:20;
  display:inline-flex;align-items:center;
  width:auto;margin:-4px 0 16px;padding:9px 12px;min-height:44px;
  border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--surface);box-shadow:0 2px 8px rgb(0 0 0 / 10%);
  color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer
}
.hidden{display:none!important}
.family-heading{
  margin:2px 0 -2px;text-align:left;font-family:var(--font-serif);
  font-size:20px;font-weight:600;color:var(--ink)
}
.boot-splash{min-height:210px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--ink-secondary)}
.boot-splash i{width:7px;height:7px;border-radius:var(--radius-pill);background:currentColor;opacity:.28;animation:bootPulse 1s ease-in-out infinite}
.boot-splash i:nth-child(2){animation-delay:.14s}
.boot-splash i:nth-child(3){animation-delay:.28s}
@keyframes bootPulse{0%,100%{transform:translateY(0);opacity:.24}50%{transform:translateY(-4px);opacity:.7}}
@media (prefers-reduced-motion:reduce){.boot-splash i{animation:none}}
@media (prefers-reduced-motion:no-preference){
  main section{animation:fadein .25s ease-out}
}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   13. PETITS ÉCRANS
   Aucune hauteur de viewport fixe, aucun débordement horizontal.
   Le CTA ne descend jamais sous 19 px : c'est le bouton qui grandit.
   ============================================================ */
@media (max-width:400px){
  h1{font-size:27px}
  h2{font-size:22px}
  .challenge{padding-top:22px;padding-bottom:26px}
  .challenge .title{font-size:30px}
  .install-phone{width:76px;height:120px}
  #view[data-screen="success"] .success,#view[data-screen="bookSuccess"] .success,
  #view[data-screen="finish"] .success,#view[data-screen="bookFinish"] .success{font-size:46px}
  #view[data-screen="success"] h1,#view[data-screen="bookSuccess"] h1,
  #view[data-screen="finish"] h1,#view[data-screen="bookFinish"] h1,
  .finish-title{font-size:29px!important;line-height:1.12!important}
  .preset-grid{gap:9px}
}
@media (max-height:700px){
  .app:has(#view[data-screen="success"]) main,
  .app:has(#view[data-screen="bookSuccess"]) main,
  .app:has(#view[data-screen="finish"]) main,
  .app:has(#view[data-screen="bookFinish"]) main{
    padding-top:max(36px,calc(24px + env(safe-area-inset-top)))
  }
  .install-hero{margin-bottom:14px}
  .install-phone{width:72px;height:114px}
}



/* ============================================================
   RC3 — QA MOBILE CONSOLIDÉE (05/09/2026)
   Ajustements présentationnels uniquement : header compact, dosage
   terracotta, cartes défi adoucies, célébrations mixtes et profils.
   ============================================================ */

/* Header : auto-détection conservée, correction manuelle discrète. */
.topband{
  align-items:center;gap:10px;
  padding-top:max(12px,calc(8px + env(safe-area-inset-top)));
  padding-bottom:11px;
}
.brandrow>div{display:grid;grid-template-columns:auto;gap:3px;align-items:start}
.wordmark{font-size:24px;line-height:1.02;color:var(--ink)}
.wordmark span{color:var(--terracotta);font-weight:700}
.tagline{font-size:10.5px;line-height:1.15;color:var(--ink-secondary)}
.header-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.locale-switch{display:block;margin:0}
.locale-compact-label{position:relative;display:inline-flex;align-items:center}
.locale-compact-label::after{content:"⌄";position:absolute;right:7px;top:50%;transform:translateY(-58%);color:var(--terracotta-dense);font-size:14px;pointer-events:none}
.locale-select{
  appearance:none;-webkit-appearance:none;
  min-width:48px;height:38px;padding:0 20px 0 8px;
  border:0;border-bottom:1.5px solid var(--terracotta);border-radius:0;
  background:transparent;color:var(--terracotta-dense);
  font:600 13px/1 var(--font-sans);cursor:pointer
}
.install-quick{
  width:38px;height:38px;padding:8px;border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--surface);color:var(--terracotta-dense);cursor:pointer;display:inline-flex;align-items:center;justify-content:center
}
.install-quick svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Plus de joie sur les pages fonctionnelles sans grand aplat. */
.choice[aria-pressed="true"],.freq[aria-pressed="true"],.preset[aria-pressed="true"]{
  border-color:var(--terracotta);background:var(--surface)
}
.choice[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--terracotta)}

/* Profils : cartes respirantes, CTA compact et note éditoriale lisible. */
#view[data-screen="bookProfiles"] .profile-choice{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;
  margin-bottom:12px;padding:18px 16px;border-color:var(--rule);background:var(--surface)
}
#view[data-screen="bookProfiles"] .profile-choice-copy{min-width:0}
#view[data-screen="bookProfiles"] .profile-choice-copy>strong{font-size:18px;color:var(--ink)}
#view[data-screen="bookProfiles"] .profile-choice .btn-secondary{
  width:auto;min-width:92px;min-height:46px;margin:0;padding:10px 16px;
  border-color:var(--terracotta);background:var(--terracotta);color:var(--surface);font-size:16px;font-weight:700
}
#view[data-screen="bookProfiles"] .profile-choice .btn-secondary:hover,
#view[data-screen="bookProfiles"] .profile-choice .btn-secondary:active{background:var(--terracotta-dense)}
.profile-book-note{
  margin-top:18px;padding:15px 16px 15px 18px;border-left:3px solid var(--terracotta);
  background:transparent;color:var(--ink-secondary);line-height:1.55
}
.profile-book-note strong{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}

/* Intro Papa : deux messages, deux pictos, un seul bloc calme. */
.father-intro-points{
  margin:18px 0;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);overflow:hidden
}
.father-intro-point{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:17px 18px;align-items:start}
.father-intro-point+.father-intro-point{border-top:1px solid var(--rule)}
.father-intro-point .icon-chip{color:var(--terracotta-dense);width:22px;height:22px;margin-top:2px}
.father-intro-point .icon-chip svg{width:20px;height:20px}
.father-intro-point p{margin:0 0 7px;line-height:1.55}
.father-intro-point p:last-child{margin-bottom:0;color:var(--ink-secondary)}

/* Défis : un bloc fort mais inset, plus doux et plus éditorial. */
.challenge{
  border-radius:8px;
  margin:14px 0 18px;
  padding:22px 24px 24px;
}
.challenge-context{margin:8px 0 -2px}
.challenge-context .child-badge,.challenge-context .family-badge{
  display:inline-flex;width:auto;max-width:100%;padding:0;margin:0;
  background:transparent;border:0;color:var(--ink-secondary);font-size:14.5px;font-weight:600
}
.challenge .num{font-family:var(--font-sans);font-size:17px;font-weight:600;gap:.34em}
.challenge .num .num-value{font-size:42px;font-weight:600}
.challenge .title{font-size:31px;line-height:1.08;margin:12px 0 10px}
.challenge .text{font-size:18px;line-height:1.45;font-weight:600}
#view[data-screen="bookActive"]>.card>.progress{margin-bottom:14px}
#view[data-screen="bookActive"] .btn-primary{margin-top:16px}

/* Célébrations : le terracotta devient un moment, plus un mur. */
.app:has(#view[data-screen="success"]),
.app:has(#view[data-screen="bookSuccess"]),
.app:has(#view[data-screen="finish"]){background:var(--paper)}
.app:has(#view[data-screen="success"]) main,
.app:has(#view[data-screen="bookSuccess"]) main,
.app:has(#view[data-screen="finish"]) main{padding:0}
#view[data-screen="success"],#view[data-screen="bookSuccess"],#view[data-screen="finish"]{color:var(--ink)}
.celebration-mixed{margin:0}
.celebration-hero{
  background:var(--terracotta);color:var(--surface);
  padding:max(48px,calc(36px + env(safe-area-inset-top))) 20px 34px;
}
.celebration-body{padding:28px 20px max(32px,calc(22px + env(safe-area-inset-bottom)));background:var(--paper);color:var(--ink)}
.celebration-hero .success,.celebration-hero h1,.celebration-hero h2,.celebration-hero p,.celebration-hero .lead{color:var(--surface)!important}
.celebration-kicker{font-size:39px!important;line-height:1.02!important;white-space:normal!important;margin-bottom:10px}
.celebration-progress{font-size:34px!important;line-height:1.08!important;white-space:normal!important;overflow-wrap:anywhere}
.celebration-hero .lead{font-size:18px!important;font-weight:600!important;line-height:1.45!important;margin-top:14px}
.celebration-hero .progress-label{color:var(--surface);font-family:var(--font-serif);font-size:21px;font-weight:600}
.celebration-hero .progress{background:rgba(253,250,244,.34);margin:12px 0 0}
.celebration-hero .progress>span{background:var(--surface)}
.celebration-body h2{color:var(--ink)!important;font-size:27px;line-height:1.15;margin-bottom:12px}
.celebration-body .challenge{margin-top:14px}
.celebration-body .btn-primary{background:var(--terracotta)!important;color:var(--surface)!important}
.celebration-body .btn-primary:hover,.celebration-body .btn-primary:active{background:var(--terracotta-dense)!important}
.celebration-body .linkbtn{color:var(--ink)!important;font-size:15.5px!important;font-weight:600!important}
.celebration-tip{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  margin:0 0 20px;padding:0;border:0;background:transparent;color:var(--ink-secondary);font-size:15.5px;line-height:1.55
}
.celebration-tip .icon-chip{color:var(--terracotta-dense)!important;margin-top:2px}
.finish-badge{font-size:42px!important;max-width:100%}
.finish-mixed .finish-title{margin:26px 0 12px!important;font-size:31px!important;line-height:1.12!important}
.finish-mixed .celebration-hero .lead{font-weight:500!important}
.finish-offer .icon-heading{align-items:center;gap:10px}
.finish-offer .icon-heading .icon-chip{color:var(--terracotta-dense)!important}
.finish-offer h2{margin:0!important}
.finish-offer p{color:var(--ink)!important;font-size:16.5px!important;font-weight:400!important;line-height:1.6!important}
.finish-offer .small,.finish-offer .muted{color:var(--ink-secondary)!important;font-size:14px!important;font-weight:400!important}
.finish-offer .btn-secondary{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--rule-strong)!important;font-size:16px!important;font-weight:600!important}

/* 151/151 reste la célébration majeure pouvant conserver le plein écran. */
.app:has(#view[data-screen="bookFinish"]){background:var(--terracotta)}

@media (max-width:400px){
  .topband{gap:7px;padding-left:14px;padding-right:14px}
  .wordmark{font-size:22px}
  .tagline{font-size:9.8px}
  .header-actions{gap:5px}
  .locale-select{min-width:45px;padding-left:6px;padding-right:18px}
  .install-quick{width:36px;height:36px;padding:8px}
  .challenge{padding:20px 20px 22px}
  .challenge .num .num-value{font-size:39px}
  .challenge .title{font-size:29px}
  .celebration-kicker{font-size:36px!important}
  .celebration-progress{font-size:31px!important}
  .finish-badge{font-size:36px!important}
  #view[data-screen="bookProfiles"] .profile-choice{grid-template-columns:1fr;gap:12px}
  #view[data-screen="bookProfiles"] .profile-choice .btn-secondary{width:auto;min-width:118px;justify-self:start;margin-top:0}
}

/* ============================================================
   RC4 — QA MOBILE CONSOLIDÉE (06/09/2026)
   Corrections issues du parcours réel sur téléphone : densité profils,
   dosage terracotta des écrans fonctionnels, pictos pédagogiques et
   hiérarchie finale du 3/3. Présentation uniquement.
   ============================================================ */

/* Profils multiples : le premier viewport doit annoncer visuellement
   qu'il existe une suite. Cartes plus compactes, CTA conservé à droite. */
#view[data-screen="bookProfiles"] .profile-choice{
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin-bottom:9px;
  padding:13px 14px;
  min-height:0;
}
#view[data-screen="bookProfiles"] .profile-choice-copy>strong{font-size:17.5px}
#view[data-screen="bookProfiles"] .profile-choice-copy .small{line-height:1.38;margin-top:2px}
#view[data-screen="bookProfiles"] .profile-choice .btn-secondary{
  min-width:96px;min-height:42px;padding:8px 14px;font-size:15.5px;
}
#view[data-screen="bookProfiles"] .divider{margin:15px 0}
#view[data-screen="bookProfiles"] .btn-ghost{min-height:46px;margin-top:6px}
#view[data-screen="bookProfiles"] .profile-book-note{
  margin-top:12px;padding:12px 14px 12px 15px;line-height:1.48;
}
#view[data-screen="bookProfiles"] .profile-book-note strong{margin-bottom:4px}

/* Écrans fonctionnels : papier dominant, mais identité visible.
   Un petit filet sous le titre, états actifs et focus terracotta. */
.functional-accent>h2::after,
.functional-accent>h3::after{
  content:"";display:block;width:34px;height:3px;background:var(--terracotta);
  border-radius:2px;margin-top:10px;
}
#view[data-screen="bookRecover"] .choice{
  border-left:3px solid var(--terracotta);padding-left:15px;
}
#view[data-screen="bookRecover"] .choice strong{color:var(--ink)}
#view[data-screen="bookRecover"] .linkbtn{color:var(--terracotta-dense)}
#view[data-screen="bookPersonalize"] .input:focus,
#view[data-screen="bookPersonalize"] .input:focus-visible,
#view[data-screen="bookRecover"] .input:focus,
#view[data-screen="bookRecover"] .input:focus-visible{
  border-color:var(--terracotta);box-shadow:0 0 0 1px var(--terracotta);outline:none;
}
#view[data-screen="bookPersonalize"] .choice[aria-pressed="true"]{
  border-color:var(--terracotta);background:var(--surface);box-shadow:inset 3px 0 0 var(--terracotta);
}
#view[data-screen="bookPersonalize"] .choice[aria-pressed="true"] strong{color:var(--terracotta-dense)}
#view[data-screen="bookAccount"] .account-section-title{
  color:var(--terracotta-dense);font-weight:700;
}
#view[data-screen="bookAccount"] .legal-link{color:var(--terracotta-dense)!important}
#view[data-screen="bookAccount"] .divider::before{background:linear-gradient(90deg,var(--terracotta) 0 34px,var(--rule) 34px 100%)}
#view[data-screen="bookAccount"]>button.linkbtn:last-child{color:var(--terracotta-dense)}

/* Pictos pédagogiques : même langage que l'intro Papa, terracotta,
   sauf états sémantiques (succès / erreur / hors-ligne) inchangés. */
#view[data-screen="principles"] .notice .icon-chip,
#view[data-screen="bookPrinciples"] .notice .icon-chip,
.principles-screen .notice .icon-chip{
  color:var(--terracotta-dense);
}

/* Fin des 3 défis : le livre reste l'action principale ; le partage vient ensuite. */
.finish-share-block{margin:14px 0 4px}
.finish-share-link{
  width:auto;margin:0 auto;padding:10px 8px;min-height:44px;
  color:var(--ink-secondary)!important;text-decoration:underline;text-underline-offset:3px;
}
.finish-offer .divider{margin:20px 0 24px}
.finish-offer-content .btn-secondary{
  margin-top:12px;background:transparent!important;color:var(--ink)!important;
  border-color:var(--rule-strong)!important;
}
.finish-offer-content .btn-primary{margin-top:16px}
.finish-buy-link{text-decoration:none}
.finish-buy-disabled,.finish-buy-disabled:hover,.finish-buy-disabled:active{
  opacity:1!important;background:var(--sunken)!important;color:var(--ink-secondary)!important;
  border:1px solid var(--rule-strong)!important;cursor:not-allowed;
}
.finish-badge{
  font-size:clamp(31px,9.5vw,42px)!important;
  line-height:1.06!important;white-space:normal!important;overflow-wrap:anywhere;
}

/* Les CTA des écrans fonctionnels restent le principal apport de couleur ;
   le header et les sélections complètent sans saturer. */
#view[data-screen="bookRecover"] .btn-primary,
#view[data-screen="bookPersonalize"] .btn-primary,
#view[data-screen="bookPrinciples"] .btn-primary{
  background:var(--terracotta);color:var(--surface);
}

@media (max-width:400px){
  /* RC3 empilait les cartes profil et rallongeait artificiellement la page.
     À 360–400 px, la grille à deux colonnes reste lisible. */
  #view[data-screen="bookProfiles"] .profile-choice{
    grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 13px;
  }
  #view[data-screen="bookProfiles"] .profile-choice .btn-secondary{
    width:auto;min-width:94px;justify-self:end;margin:0;padding:8px 12px;
  }
}
@media (max-width:340px){
  #view[data-screen="bookProfiles"] .profile-choice{grid-template-columns:1fr;gap:8px}
  #view[data-screen="bookProfiles"] .profile-choice .btn-secondary{justify-self:start}
}


/* ============================================================
   RC5 — VERROUILLAGE QA MOBILE (06/09/2026)
   Derniers retours du parcours réel : densité profils, chaleur des écrans
   fonctionnels, pictos terracotta et installation accessible partout.
   ============================================================ */

/* Installation : accès explicite depuis tous les écrans tant que l'app
   n'est pas ouverte en mode standalone. */
.install-quick{
  width:auto;min-width:0;height:38px;padding:0 9px;gap:5px;
  border-color:rgba(215,85,61,.38);color:var(--terracotta-dense);
  font:700 12.5px/1 var(--font-sans);white-space:nowrap;
}
.install-quick svg{width:17px;height:17px;flex:0 0 auto}
.install-quick-label{display:inline-block}
.install-manual{
  margin:14px 0 2px;padding:12px 14px;border-left:3px solid var(--terracotta);
  background:var(--surface);color:var(--ink-secondary);font-size:14.5px;line-height:1.5;
}

/* Profils multiples : rendre le premier viewport plus informatif. */
#view[data-screen="bookProfiles"] .book-profiles-screen>h2{margin-bottom:7px}
#view[data-screen="bookProfiles"] .profiles-lead{margin:0 0 12px;line-height:1.45}
#view[data-screen="bookProfiles"] .profile-choice{
  gap:8px;margin-bottom:7px;padding:9px 12px;
}
#view[data-screen="bookProfiles"] .profile-choice-copy>strong{font-size:17px;line-height:1.2}
#view[data-screen="bookProfiles"] .profile-choice-copy .small{font-size:13.5px;line-height:1.28;margin-top:1px}
#view[data-screen="bookProfiles"] .profile-choice .btn-secondary{
  min-width:88px;min-height:38px;padding:7px 11px;font-size:14.5px;
}
#view[data-screen="bookProfiles"] .profile-add-link{
  display:block;width:auto;margin:8px 0 4px;padding:4px 0;color:var(--terracotta-dense);
  font-size:15px;font-weight:700;text-align:left;
}
#view[data-screen="bookProfiles"] .profile-book-note{
  margin-top:6px;padding:10px 12px 10px 13px;font-size:13.5px;line-height:1.4;
}
#view[data-screen="bookProfiles"] .profile-book-note strong{font-size:15px;margin-bottom:3px}

/* Un peu plus de terracotta sur les écrans purement fonctionnels : la
   couleur guide les actions et les sections, sans créer de grand aplat. */
.functional-accent>h2::after,.functional-accent>h3::after{
  width:44px;height:4px;margin-top:9px;
}
#view[data-screen="bookRecover"] .choice{
  border-color:rgba(215,85,61,.34);border-left:4px solid var(--terracotta);
  background:var(--surface);
}
#view[data-screen="bookRecover"] .choice strong{color:var(--terracotta-dense)}
#view[data-screen="bookRecover"] .linkbtn{color:var(--terracotta-dense);font-weight:700}

#view[data-screen="bookPersonalize"] label.strong,
#view[data-screen="bookPersonalize"] h3{color:var(--terracotta-dense)}
#view[data-screen="bookPersonalize"] .input{
  border-color:rgba(215,85,61,.28);background:var(--surface);
}
#view[data-screen="bookPersonalize"] .choice{
  border-color:rgba(215,85,61,.24);
}

#view[data-screen="bookAccount"] .account-section{
  border-left:3px solid var(--terracotta);padding-left:14px;
}
#view[data-screen="bookAccount"] .account-section-title{color:var(--terracotta-dense)!important}
#view[data-screen="bookAccount"] .account-section .btn-ghost:not(.danger-link){
  border-color:rgba(215,85,61,.45);color:var(--terracotta-dense);background:var(--surface);
}
#view[data-screen="bookAccount"]>button.linkbtn:last-child{font-weight:700}

/* Pictos pédagogiques : terracotta exact de la couverture. */
#view[data-screen="principles"] .notice .icon-chip,
#view[data-screen="bookPrinciples"] .notice .icon-chip,
.principles-screen .notice .icon-chip{
  color:var(--terracotta)!important;
}

@media (max-width:400px){
  .install-quick{height:36px;padding:0 7px;font-size:11.5px;gap:4px}
  .install-quick svg{width:16px;height:16px}
  #view[data-screen="bookProfiles"] .profile-choice{
    grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:8px 10px;
  }
  #view[data-screen="bookProfiles"] .profile-choice .btn-secondary{
    min-width:82px;min-height:36px;padding:6px 9px;font-size:14px;
  }
}
@media (max-width:360px){
  .wordmark{font-size:21px}
  .tagline{font-size:9.2px}
  .header-actions{gap:3px}
  .locale-select{min-width:42px;padding-left:4px;padding-right:16px;font-size:12px}
  .install-quick{padding:0 6px;font-size:11px}
}

/* Fin 3/3 compacte sur mobile : la réussite reste lisible avant l'offre. */
.finish-mixed .celebration-hero{padding:24px 20px}
.finish-mixed .celebration-kicker{font-size:30px!important;margin-bottom:7px}
.finish-mixed .finish-badge{font-size:30px!important;line-height:1.1!important}
.finish-mixed .finish-title{font-size:25px!important;line-height:1.18!important;margin:16px 0 10px!important}
.finish-mixed .celebration-hero .lead{font-size:16px!important;line-height:1.45!important;margin-top:10px}
.finish-mixed .finish-share-block{margin:14px 0 0}

/* R21 WIP : sur Chrome Android avec ses barres visibles, laisser apparaître
   le bouton secondaire suivant sans ajouter de libellé artificiel. */
@media (max-width:430px){
  .finish-mixed .celebration-hero{padding:18px 20px 10px}
  .finish-mixed .celebration-body{padding-top:18px}
  .finish-mixed .finish-offer-content .btn-primary{margin-top:10px}
  .finish-mixed .finish-offer-content .btn-secondary{margin-top:8px}
  .finish-mixed .finish-offer .divider{margin:14px 0 8px}
}

/* ============================================================
   R22 — ÉCRAN FINAL DU PARCOURS DÉCOUVERTE
   Reproduction intégrée de la maquette validée. Les sélecteurs sont
   strictement limités à l'écran 3/3 pour ne pas modifier les autres vues.
   ============================================================ */
.app:has(#view[data-screen="finish"]){
  max-width:430px;
  padding-bottom:0;
  background:#F8F3EA;
  color:#12294A;
}
.app:has(#view[data-screen="finish"])>.topband{display:none}
.app:has(#view[data-screen="finish"])>main{padding:0}
#view[data-screen="finish"]{color:#12294A}

.finish-page{
  width:100%;
  max-width:430px;
  margin:0 auto;
  overflow:hidden;
  background:#F8F3EA;
  color:#12294A;
  text-align:left;
}
.finish-hero{
  padding:24px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));
  padding-top:max(24px,env(safe-area-inset-top));
  background:#D9522F;
  color:#fff;
}
.finish-hero-kicker{
  margin:0;
  color:rgba(255,255,255,.85)!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.4!important;
}
.finish-hero-title{
  margin:0;
  color:#fff!important;
  font-family:var(--font-serif);
  font-size:38px!important;
  font-weight:700;
  line-height:1.05!important;
}
.finish-hero-copy{
  margin:8px 0 0;
  color:#fff!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:1.4!important;
}
.finish-main{
  padding:12px max(20px,env(safe-area-inset-right)) max(32px,calc(20px + env(safe-area-inset-bottom))) max(20px,env(safe-area-inset-left));
}
.finish-content-title{
  margin:0 0 8px!important;
  color:#12294A!important;
  font-family:var(--font-serif);
  font-size:30px!important;
  font-weight:700;
  line-height:1.15!important;
}
.finish-intro{
  margin:0 0 24px;
  color:#12294A!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:1.45!important;
}
.finish-visual{margin:0}
.finish-visual-grid,.finish-caption-grid{
  display:grid;
  grid-template-columns:46% 8% 46%;
  width:100%;
}
.finish-book-page{
  position:relative;
  aspect-ratio:1;
  background:#F4EFE4;
  box-shadow:0 4px 12px rgba(18,41,74,.12);
}
.finish-challenge-content{
  position:absolute;
  inset:12%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  color:#12294A;
  text-align:center;
}
.finish-challenge-title{
  margin:0;
  color:#12294A!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.3!important;
}
.finish-photo-mark{width:64px;height:64px;color:#12294A}
.finish-photo-emblem{display:block;width:100%;height:100%;overflow:visible}
.finish-photo-emblem text{
  fill:currentColor;
  font-family:var(--font-sans);
  font-size:9px;
  font-weight:700;
  letter-spacing:1.5px;
}
.finish-corner{
  position:absolute;
  z-index:4;
  width:8%;
  height:8%;
  border-color:#12294A;
  border-style:solid;
  border-width:0;
}
.finish-corner-tl{top:7%;left:7%;border-top-width:1px;border-left-width:1px}
.finish-corner-tr{top:7%;right:7%;border-top-width:1px;border-right-width:1px}
.finish-corner-bl{bottom:7%;left:7%;border-bottom-width:1px;border-left-width:1px}
.finish-corner-br{right:7%;bottom:7%;border-right-width:1px;border-bottom-width:1px}
.finish-photo-print{
  position:absolute;
  z-index:3;
  inset:7%;
  display:block;
  box-sizing:border-box;
  width:86%;
  height:86%;
  max-width:none;
  overflow:hidden;
  font-size:0;
  object-fit:cover;
  border:6px solid #fff;
  box-shadow:none;
  transform:none;
}
.finish-arrow{display:flex;align-items:center;justify-content:center;color:#D9522F}
.finish-arrow svg{display:block;width:100%;height:40px;overflow:visible}
.finish-caption-grid{margin-top:8px}
.finish-caption{
  margin:0;
  color:rgba(18,41,74,.7)!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.3!important;
}
.finish-caption-left{grid-column:1}
.finish-caption-right{grid-column:3}
.finish-example{
  display:inline;
  color:rgba(18,41,74,.6);
  font-size:11px;
  line-height:1.3;
}
.finish-example::before{content:" · "}
.finish-pillar{
  margin:16px 0 24px;
  color:#12294A!important;
  font-family:var(--font-serif);
  font-size:18px!important;
  font-weight:400!important;
  line-height:1.3!important;
}
.finish-amazon-link{
  display:flex;
  width:100%;
  height:56px;
  padding:0 16px;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:#D9522F;
  color:#fff;
  font-family:var(--font-sans);
  font-size:18px;
  font-weight:600;
  line-height:1;
  text-align:center;
  text-decoration:none;
}
.finish-amazon-link:hover,.finish-amazon-link:active{background:#BE4529;color:#fff}
.finish-amazon-link.finish-buy-disabled,
.finish-amazon-link.finish-buy-disabled:hover,
.finish-amazon-link.finish-buy-disabled:active{
  border:1px solid rgba(18,41,74,.18)!important;
  background:#F1EADF!important;
  color:rgba(18,41,74,.7)!important;
  cursor:not-allowed;
}
.finish-product-line{
  margin:8px 0 16px;
  color:rgba(18,41,74,.7)!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.3!important;
}
.finish-owned-box{padding:20px;border-radius:8px;background:#F1EADF}
.finish-text-link,.finish-share-link{
  position:relative;
  display:inline-block;
  width:auto;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-family:var(--font-sans);
  text-align:left;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  cursor:pointer;
}
.finish-text-link{color:#12294A;font-size:16px;font-weight:500;line-height:1.4}
.finish-owned-copy,.finish-resume-copy{
  margin:0;
  color:rgba(18,41,74,.7)!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.4!important;
}
.finish-owned-copy,.finish-resume-copy{margin-top:12px}
.finish-share-wrap{margin-top:16px}
.finish-share-link{color:rgba(18,41,74,.7);font-size:13px;font-weight:400;line-height:1.4}
.finish-text-link::after,.finish-share-link::after{position:absolute;content:"";inset:-14px -8px}
.finish-debug-link{margin-top:28px}

@media (max-width:389px){
  .finish-hero-title{font-size:clamp(30px,9.7vw,38px)!important}
  .finish-content-title{font-size:clamp(25px,7.7vw,30px)!important}
  .finish-intro,.finish-hero-copy{font-size:clamp(15px,4.1025641026vw,16px)!important}
  .finish-caption{font-size:11px!important}
  .finish-example{font-size:10px}
}