/* Polices auto-hébergées (la CSP n'autorise que 'self') : fichiers variables, sous-ensemble latin. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/static/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Mobile d'abord. Tailles en rem/clamp() : elles suivent la taille de texte du système et le zoom.
   Hauteurs : 100dvh (repli 100vh pour les navigateurs anciens). */
:root{
  --bg:#F5EFE4;--ink:#23201C;--muted:#5E574D;--card:#FFFBF3;--line:#E2D8C6;--soft:#EBDFC9;
  --tomato:#B93F1E;--teal:#2F6F62;--onteal:#FFFFFF;--ontomato:#FFFFFF;--alert:#1F4A42;--onink:#F5EFE4;
  --col:30rem;
}
@media (min-width:48em){:root{--col:35rem}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1B1815;--ink:#F1EADD;--muted:#B5AB9B;--card:#26221E;--line:#3A342D;--soft:#2E2923;
    --tomato:#EE8163;--teal:#7CC4B1;--onteal:#10231E;--ontomato:#2B1207;--alert:#12302A;--onink:#1B1815;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1815;--ink:#F1EADD;--muted:#B5AB9B;--card:#26221E;--line:#3A342D;--soft:#2E2923;
  --tomato:#EE8163;--teal:#7CC4B1;--onteal:#10231E;--ontomato:#2B1207;--alert:#12302A;--onink:#1B1815;
}
html{scroll-padding-bottom:5rem}
html,body{margin:0}
body{
  background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.5;-webkit-text-size-adjust:100%;overflow-wrap:break-word;
  min-height:100vh;min-height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);
}
body.alert{background:var(--alert);color:#fff}
#app{width:100%;max-width:var(--col);margin:0 auto;flex:1 0 auto;display:flex;flex-direction:column;box-sizing:border-box;
  padding:clamp(1rem,4vw,1.5rem) clamp(1rem,5vw,1.5rem) 1.5rem}
@media (min-width:48em){#app{padding:3rem 2rem 2.5rem}}
h1,h2{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0;line-height:1.12;overflow-wrap:anywhere}
h1{font-size:clamp(1.75rem,1.5rem + 2.1vw,2.5rem)} h2{font-size:clamp(1.375rem,1.2rem + 1vw,1.75rem)}
h1:focus,h2:focus{outline:none}
p{margin:0}
.eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:.875rem} .tiny{font-size:.8125rem}
.col{display:flex;flex-direction:column;min-width:0}.grow{flex-grow:1}
.gap8{gap:.5rem}.gap12{gap:.75rem}.gap16{gap:1rem}.gap24{gap:1.5rem}
.center{text-align:center;align-items:center}
.mid{justify-content:center}
.tcenter{text-align:center}
.mt8{margin-top:.5rem} .mb8{margin-bottom:.5rem}
.strong{font-weight:600}
.c-tomato{color:var(--tomato)} .c-teal{color:var(--teal)}
.row-between{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.25rem .75rem}
.row-center{display:flex;align-items:center;gap:.75rem}
.row-center>p{min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;min-height:2.75rem;margin-bottom:.75rem}
.logo{display:inline-flex;align-items:center;min-height:2.75rem;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.375rem;line-height:1;letter-spacing:-.01em;text-transform:lowercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo-bang{color:var(--tomato)}
@media (min-width:48em){.logo{font-size:1.625rem}}
body.alert .logo,body.alert .logo-bang{color:#F5EFE4}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dots{display:flex;justify-content:center;gap:.5rem;min-height:.5rem}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--line)}
.dot.on{width:1.5rem;border-radius:.25rem;background:var(--tomato)}
/* Présentation : colonne de 520 px max au-delà de 768 px. */
@media (min-width:48em){.intro-col{width:100%;max-width:32.5rem;margin:0 auto}}
.intro-art{display:block;width:100%;max-width:19rem}
.intro-art svg{display:block;width:100%;height:auto;max-height:26dvh}
/* Image de l'écran 1 (fond transparent, identique en mode sombre) : 420 px max ; object-fit garde
   les proportions si la hauteur est plafonnée sur les écrans bas. */
.intro-img{display:block;width:100%;max-width:26.25rem;height:auto;max-height:26dvh;object-fit:contain;margin:0 auto}
.ill-soft{color:var(--soft)} .ill-soft2{color:var(--line)} .ill-ink{color:var(--ink)} .ill-card{color:var(--card)} .ill-accent{color:var(--tomato)}
.ill-ear{fill:var(--card);stroke:var(--ink)}
.intro-main{min-height:0}
.steps{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:.625rem;width:100%;text-align:left}
.step{display:flex;align-items:center;gap:.875rem;padding:.75rem 1rem;border-radius:1.125rem;font-size:1rem;line-height:1.35}
.step-n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--tomato);color:var(--bg);font:700 1rem 'DM Sans',system-ui,sans-serif}
.btn{display:flex;align-items:center;justify-content:center;min-height:3.5rem;border-radius:1.75rem;border:1.5px solid transparent;padding:.5rem 1.25rem;font:600 1.0625rem 'DM Sans',system-ui,sans-serif;cursor:pointer;text-decoration:none;text-align:center;box-sizing:border-box;width:100%}
.btn.primary{background:var(--ink);color:var(--onink)}
.btn.teal{background:var(--teal);color:var(--onteal)}
.btn.tomato{background:var(--tomato);color:var(--ontomato)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);min-height:3.25rem;font-size:1rem}
.btn.narrow{max-width:15rem}
.btn.alert-ghost{color:#fff;border-color:#CFE3DC}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;color:var(--muted);font:500 .9375rem 'DM Sans',system-ui,sans-serif;min-height:2.75rem;padding:0 .5rem;cursor:pointer;text-decoration:underline}
.sos{min-height:2.75rem;min-width:4rem;padding:0 1rem;border-radius:1.375rem;border:1.5px solid var(--tomato);background:transparent;color:var(--tomato);font:700 .9375rem 'DM Sans',system-ui,sans-serif;letter-spacing:.06em;cursor:pointer}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:1.5rem;padding:clamp(1rem,4vw,1.25rem)}
textarea{box-sizing:border-box;display:block;width:100%;max-width:100%;min-height:8rem;padding:1rem;border-radius:1rem;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:400 1.125rem/1.45 'DM Sans',system-ui,sans-serif;resize:none}
input[type=range]{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;height:2.75rem;margin:0}
.r-tomato{accent-color:var(--tomato)} .r-teal{accent-color:var(--teal)}
.lbl{font-size:.875rem;font-weight:600}
.bignum{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:2.5rem;line-height:1}
.bignum span{font-size:1.125rem;color:var(--muted)}
.h1-xl{font-size:clamp(2rem,1.7rem + 3.4vw,3.5rem)} .h1-lg{font-size:clamp(1.875rem,1.6rem + 3vw,3rem)}
.lead{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem)}
.intro{font-size:1rem;line-height:1.4}
.mascot{display:inline-flex;width:100%}
.avatar{display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:50%;flex-shrink:0;aspect-ratio:1}
.avatar .mascot{width:80%}
.avatar svg{display:block;width:100%;height:auto}
.av64{width:4rem} .av160{width:min(clamp(7rem,40vw,11rem),42dvh)} .av224{width:min(clamp(9rem,52vw,17rem),42dvh)}
.quote{padding:.875rem 1rem;border-radius:.875rem;background:var(--soft);font-size:.9375rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.absurd{font-family:'Fraunces',Georgia,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',serif;font-weight:400;font-size:clamp(1.25rem,1.1rem + .8vw,1.5rem);line-height:1.45}
.mot-doux{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-family:'DM Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--muted)}
.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:21.25rem){.style-grid{grid-template-columns:1fr}}
.style-card{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1rem;border-radius:1.25rem;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-sizing:border-box;width:100%}
.style-icon{display:inline-flex}
.style-icon svg{display:block}
.style-title{font-weight:700}
.style-desc{margin:0;font-size:.875rem;line-height:1.4;color:var(--muted)}
.style-card.selected.humour{border-color:var(--tomato);background:color-mix(in srgb, var(--tomato) 14%, var(--card))}
.style-card.selected.douceur{border-color:var(--teal);background:color-mix(in srgb, var(--teal) 14%, var(--card))}
.opt{display:flex;align-items:center;min-height:3.25rem;padding:0 1.125rem;border-radius:1rem;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:500 1.0625rem 'DM Sans',system-ui,sans-serif;cursor:pointer;text-align:left;width:100%;box-sizing:border-box}
.opt[aria-pressed="true"]{border-color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal);font-weight:700}
.opt.hist-head{flex-direction:column;align-items:flex-start;gap:.375rem;padding:.875rem 1.125rem;min-height:2.75rem}
.opt.hist-head>span{max-width:100%;overflow-wrap:anywhere}
.hist-item{margin-bottom:.625rem}
.hist-body{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .25rem .25rem}
.meta{font-size:.875rem;font-weight:400;color:var(--muted)}
.badge{display:inline-block;font-size:.8125rem;font-weight:700;padding:.125rem .625rem;border-radius:.75rem;background:var(--soft);color:var(--ink)}
.flash{padding:.75rem 1rem;border-radius:.875rem;background:var(--soft);font-weight:600}
.telcard{display:flex;flex-direction:column;gap:.25rem;padding:clamp(1rem,4vw,1.25rem);border-radius:1.25rem;background:#F5EFE4;color:#23201C;text-decoration:none}
.telnum{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(2.25rem,2rem + 2vw,3rem);line-height:1.1}
.tel-teal{color:#2F6F62} .tel-tomato{color:#B93F1E}
.telcard .telcopy{font-size:1rem;line-height:1.4}
.alert-eyebrow{color:#CFE3DC}
.alert-text{color:#E8F1EE}
.alert-soft{color:#CFE3DC;font-size:.875rem}
.note a{color:var(--ink);text-underline-offset:3px}
.noscript{padding:1.25rem;text-align:center}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
body.alert :focus-visible{outline-color:#fff}
body.alert .link{color:#E8F1EE}

/* Pied de page permanent : collé en bas, fond opaque, jamais par-dessus le contenu en fin de page. */
.foot{position:sticky;bottom:0;z-index:10;margin-top:auto;box-sizing:border-box;background:var(--bg);border-top:1px solid var(--line);
  color:var(--muted);font-size:.8125rem;line-height:1.3;padding:0 .75rem env(safe-area-inset-bottom,0px)}
.foot-in{max-width:var(--col);margin:0 auto;min-height:3rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.foot p{padding:.25rem .5rem}
.foot p::after{content:"·";content:"·" / "";margin-left:.5rem}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center}
.foot a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .5rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.foot a+a::before{content:"·";content:"·" / "";margin-right:1rem;margin-left:-.5rem;text-decoration:none;display:inline-block}
.foot a[aria-current="page"]{color:var(--ink);font-weight:600}
@media (max-width:30rem){.foot p::after{content:none}.foot p{width:100%;text-align:center;padding-bottom:0}}
body.alert .foot{background:var(--alert);border-top-color:rgba(255,255,255,.28);color:#CFE3DC}
body.alert .foot a{color:#E8F1EE}
/* Masqué (et non retiré) pendant la saisie : garder sa place évite tout décalage quand le champ perd le focus au toucher d'un bouton. */
body.typing .foot{visibility:hidden}

/* Pages Confidentialité / Mentions légales : ~65 caractères par ligne */
.doc{width:100%;max-width:calc(65ch + 2 * clamp(1rem,5vw,2rem));margin:0 auto;flex:1 0 auto;box-sizing:border-box;padding:clamp(1rem,4vw,1.5rem) clamp(1rem,5vw,2rem) 2rem}
@media (min-width:48em){.doc{padding-top:3rem;padding-bottom:3rem}}
.doc h1{margin:1.25rem 0 1rem}
.doc h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);margin:2rem 0 .5rem}
.doc p,.doc li{margin:0 0 .75rem;line-height:1.6}
.doc ul{margin:0 0 .75rem;padding-left:1.5rem}
.doc a{color:var(--ink);text-underline-offset:3px}
.doc .draft{padding:.75rem 1rem;border-radius:.875rem;background:var(--soft);font-size:.9375rem;margin-bottom:.5rem}
.doc .topbar{margin-bottom:0}
.doc a.back{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.125rem;border:1.5px solid var(--ink);border-radius:1.375rem;font-weight:600;text-decoration:none}

/* Paysage court (téléphone) : on resserre pour que les boutons restent atteignables, le reste défile. */
@media (max-height:30rem){
  #app{padding-top:.5rem;padding-bottom:1rem}
  .gap24{gap:1rem}.gap16{gap:.75rem}
  .topbar{margin-bottom:.25rem}
  textarea{min-height:5rem}
  .intro-art svg,.intro-img{max-height:34dvh}
  .btn{min-height:3rem}
  .doc{padding-top:.75rem}
}

@media (prefers-reduced-motion:no-preference){
  .wobble{animation:wob 1.2s ease-in-out infinite;transform-origin:50% 90%}
  @keyframes wob{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
}