/* Aphasica — site vitrine. Palette tirée de l'application « Nuit bleue ». */
:root{
  --nuit:#13213D;      /* barre et fond de l'appli */
  --nuit2:#22447A;     /* dégradé de l'écran */
  --papier:#F3F6FB;    /* fond des pages */
  --encre:#16213E;     /* texte */
  --gris:#4A5670;      /* texte secondaire */
  --blanc:#FFFFFF;
  --jaune:#F2C14E;     /* bande des boutons */
  --rouge:#D9383A;     /* bande « besoin urgent » */
  --bleu:#2C86E0;      /* bande « boire, manger » */
  --violet:#8E2BB0;    /* bande « appel » */
  --ligne:#D5DEEC;
  --r:22px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:5rem}
body{margin:0;background:var(--papier);color:var(--encre);font:400 1.125rem/1.6 "Atkinson Hyperlegible",Verdana,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--nuit2);text-underline-offset:.18em}
a:hover{color:var(--nuit)}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px;border-radius:6px}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:9}

/* En-tête */
.top{position:sticky;top:0;z-index:5;background:var(--nuit);color:#fff}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.25rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-weight:700;font-size:1.35rem;letter-spacing:.01em}
.brand img{width:2.2rem;height:2.2rem}
.top nav{margin-left:auto;display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center}
.top nav a{color:#E6ECF7;text-decoration:none;font-size:1rem}
.top nav a:hover,.top nav a[aria-current]{color:#fff;text-decoration:underline}
.top nav .lang{border:2px solid #4D6597;border-radius:999px;padding:.15rem .8rem}

/* Accueil : l'écran de l'appli, en grand */
.hero{background:linear-gradient(160deg,var(--nuit) 0%,var(--nuit2) 100%);color:#fff;padding:3.5rem 0 4rem}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;margin:0 0 1.2rem;font-weight:700;letter-spacing:-.01em}
.hero p.lead{font-size:1.3rem;color:#DCE5F4;max-width:32rem;margin:0 0 1.8rem}
.hero .note{font-size:1rem;color:#B9C6DE;margin-top:1rem}
.store{display:inline-flex;align-items:center;gap:.7rem;background:#fff;color:var(--nuit);border-radius:14px;padding:.8rem 1.3rem;font-weight:700;text-decoration:none;border:0;font:inherit;font-weight:700}
.store small{display:block;font-weight:400;font-size:.85rem;color:var(--gris)}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.tile{appearance:none;border:0;background:#fff;color:var(--encre);border-radius:var(--r);padding:0 0 1.2rem;cursor:pointer;font:inherit;text-align:center;position:relative;overflow:hidden;box-shadow:0 10px 0 -2px rgba(0,0,0,.18);transition:transform .12s ease,box-shadow .12s ease}
.tile::before{content:"";display:block;height:14px;background:var(--band,var(--jaune));margin-bottom:1rem}
.tile .emo{display:grid;place-items:center;width:5.6rem;height:5.6rem;margin:0 auto .6rem;border-radius:50%;background:#EEF2F8;font-size:3.3rem;line-height:1}
.tile .lab{display:block;font-weight:700;font-size:1.45rem}
.tile .say{display:block;font-size:.95rem;color:var(--gris);margin-top:.15rem}
.tile:hover{transform:translateY(-2px)}
.tile.on{transform:translateY(4px);box-shadow:0 4px 0 -2px rgba(0,0,0,.18)}
.tile.on .lab::after{content:" 🔊"}
.tilehint{grid-column:1/-1;color:#C9D5EA;font-size:1rem;margin:.2rem 0 0}
.spoken{grid-column:1/-1;min-height:3.2rem;background:#0D1830;border-radius:14px;padding:.75rem 1rem;font-size:1.25rem;font-weight:700;color:#fff}
.spoken:empty::before{content:attr(data-empty);color:#7F92B6;font-weight:400}

/* Sections */
section{padding:4rem 0}
section+section{border-top:1px solid var(--ligne)}
h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15;margin:0 0 1rem;letter-spacing:-.005em}
h3{font-size:1.3rem;margin:0 0 .4rem}
.intro{max-width:44rem;color:var(--gris);margin:0 0 2.2rem}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;counter-reset:s}
.steps li{counter-increment:s;padding-top:3.4rem;position:relative}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--nuit);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.2rem}
.steps p{margin:0;color:var(--gris)}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:start}
.offer{background:#fff;border-radius:var(--r);padding:1.6rem 1.7rem;border-top:12px solid var(--band,var(--jaune))}
.offer ul{margin:.8rem 0 0;padding-left:1.2rem}
.offer li{margin:.35rem 0}
.offer .price{font-size:1rem;color:var(--gris);margin:.2rem 0 0}

.shots{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:1.5rem;align-items:end}
.shots figure{margin:0}
.shots img{border-radius:18px;border:6px solid var(--nuit)}
figcaption{font-size:1rem;color:var(--gris);margin-top:.6rem}

.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.who p{margin:0;color:var(--gris)}

.promise{background:var(--nuit);color:#fff;border-radius:var(--r);padding:2.2rem 2.4rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:center}
.promise .big{font-size:3.4rem;line-height:1}
.promise h2{color:#fff;margin-bottom:.5rem}
.promise p{margin:0;color:#DCE5F4}
.promise a{color:#fff}

.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:14px;overflow:hidden;font-size:1.02rem}
th,td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--ligne);vertical-align:top}
th{background:#E7EDF7}
tr:last-child td{border-bottom:0}

details{background:#fff;border-radius:14px;padding:1rem 1.3rem;margin:0 0 .8rem}
summary{cursor:pointer;font-weight:700;font-size:1.15rem}
details p,details ul{margin:.7rem 0 0;color:var(--gris)}

/* Pages de texte (confidentialité, conditions, aide) */
.doc{max-width:46rem;padding:3rem 0 4rem}
.doc h1{font-size:clamp(2rem,4vw,2.8rem);line-height:1.1;margin:0 0 .4rem}
.doc .updated{color:var(--gris);margin:0 0 2rem}
.doc h2{font-size:1.55rem;margin:2.6rem 0 .8rem}
.doc ul{padding-left:1.3rem}
.doc li{margin:.35rem 0}
.doc .warn li{margin:.7rem 0}
.doc table{margin:1rem 0}

footer{background:var(--nuit);color:#C9D5EA;padding:2.5rem 0;font-size:1rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between}
footer a{color:#fff}
footer nav{display:flex;gap:1.3rem;flex-wrap:wrap}

@media (max-width:860px){
  .hero .wrap,.two,.shots{grid-template-columns:minmax(0,1fr)}
  .steps,.who{grid-template-columns:minmax(0,1fr)}
  .shots .phone{max-width:16rem}
  .promise{grid-template-columns:minmax(0,1fr)}
  .top{position:static}
  .top .wrap{gap:.4rem 1.2rem;padding-top:.6rem;padding-bottom:.6rem}
  .top nav{margin-left:0;gap:.4rem 1rem}
  .top nav a{font-size:.95rem}
}
@media (max-width:420px){
  .tile .emo{width:4.4rem;height:4.4rem;font-size:2.6rem}
  .tile .lab{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.herologo{display:block;width:min(420px,90%);height:auto;margin:0 0 1.2rem -.4rem}
.brand img{border-radius:22%}

/* ===== Refonte « lever du jour » ===== */
:root{--aube:#2F6FED;--or:#FFB238;--or2:#FFD27A;--rose:#F59A7E;--ciel:#EAF2FF}
h1,h2,h3,.brand{font-family:"Lexend","Atkinson Hyperlegible",Verdana,sans-serif;letter-spacing:-.01em}
h1{font-weight:700}h2{font-weight:600;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.15}h3{font-weight:600}
/* Ciel d'aube derrière l'accueil */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-bottom:9rem;
 background:linear-gradient(180deg,#0E1A3A 0%,#16295A 40%,#25478F 68%,#5A6FB0 84%,#E7A27F 100%)}
.hero>.wrap{position:relative;z-index:1}
.sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.sun{position:absolute;left:71%;bottom:-17rem;width:34rem;height:34rem;margin-left:-17rem;border-radius:50%;
 background:radial-gradient(circle at 50% 50%,#FFE6A6 0%,var(--or2) 30%,var(--or) 52%,rgba(255,178,56,.0) 72%);
 filter:saturate(1.05);animation:rise 2.6s cubic-bezier(.2,.7,.2,1) both}
.horizon{position:absolute;left:0;right:0;bottom:3.2rem;height:2px;background:linear-gradient(90deg,transparent,rgba(255,240,215,.85) 20%,rgba(255,240,215,.85) 80%,transparent)}
.horizon::after{content:"";position:absolute;left:0;right:0;top:2px;height:3.2rem;background:linear-gradient(180deg,rgba(26,46,98,.55),#13213D)}
@keyframes rise{from{transform:translateY(6rem);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sun{animation:none}}
.herologo{filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}
.hero .tiles .t,.hero .tiles>div:not(.spoken){box-shadow:0 14px 30px rgba(8,16,40,.35)}
/* Mot du fondateur */
.founder{background:#13213D;color:#fff;padding:3.5rem 0 4rem;border-top:0}
.founder figure{margin:0 auto;max-width:46rem;text-align:center}
.founder blockquote{margin:0}
.founder blockquote p{font-family:"Lexend",sans-serif;font-weight:500;font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.45;margin:0;color:#F4F7FF}
.founder blockquote p::before{content:"";display:block;width:3.2rem;height:1.6rem;margin:0 auto 1.4rem;border-radius:3.2rem 3.2rem 0 0;background:radial-gradient(circle at 50% 100%,var(--or2),var(--or) 70%)}
.founder figcaption{margin-top:1.4rem;color:#B9C6E4;display:flex;flex-direction:column;gap:.2rem;align-items:center}
.founder figcaption span{color:#fff;font-weight:700}
.founder figcaption a{color:var(--or2);margin-top:.5rem}
.founder figcaption a:hover{color:#fff}
/* Étapes : pastilles soleil */
.steps li::before,.steps .num{background:radial-gradient(circle at 50% 70%,var(--or2),var(--or))!important;color:#3A2400!important}
/* Pour qui */
.whoi{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;font-size:2rem;margin-bottom:.8rem;
 background:radial-gradient(circle at 50% 75%,#FFE9BF,#FFF6E3 70%);box-shadow:inset 0 -6px 0 rgba(255,178,56,.35)}
/* Offres : Aphasica+ en lumière */
.offer{box-shadow:0 10px 28px rgba(22,33,62,.08)}
.offer:last-child{box-shadow:0 12px 34px rgba(255,178,56,.28);outline:2px solid rgba(255,178,56,.55)}
/* Pied de page : ligne d'horizon */
footer{border-top:3px solid var(--or)}
@media (max-width:900px){.sun{left:50%;bottom:-20rem}.hero{padding-bottom:7rem}}