/* ===== le téléphone jaune qui montre un geste de l'appli (pages « Sophie vous explique Emile ») =====
   Un petit film en HTML : on le corrige en une minute si un écran de l'appli change.
   Les couleurs sont celles de l'appli (voir la démonstration de l'accueil). */
.tuto-fig{--a-chat:oklch(0.95609 0.010921 182.871);--a-carte:#FDFAF4;--a-client:#F4ECDE;--a-saisie:#F4ECDE;
  --a-action:oklch(0.5453 0.0844 198.14);--a-vert-clair:#D9F3F1;--a-texte:oklch(0.29 0.062 255);--a-encre:oklch(0.216 0.008 70);
  --a-systeme:#2563EB;--a-discret:oklch(0.52 0.032 255);--a-signal:oklch(0.872952 0.13961 93.538);
  margin:10px 0 18px;width:min(290px,100%);font-family:Manrope,system-ui,sans-serif}
@media (min-width:901px){.tuto-fig{float:right;margin:-8px -8px 18px 32px}}
@media (max-width:900px){.tuto-fig{margin-inline:auto}}
.tuto-tel{position:relative;aspect-ratio:735/1416}
.tuto-tel .cadre-tel{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.tuto-ecran{position:absolute;z-index:1;left:calc(11.02% - 1.2%);right:calc(12.24% - 1.2%);top:calc(7.77% - .6%);bottom:calc(9.18% - .6%);
  border-radius:11% / 5.5%;overflow:hidden;background:var(--a-chat);color:var(--a-texte);display:flex;flex-direction:column;container-type:inline-size}
.tuto-tete{flex:none;display:flex;flex-direction:column;align-items:center;padding-top:13cqw}
.tuto-tete img{width:19cqw;height:19cqw;border-radius:50%;object-fit:cover}
.tuto-tete span{margin-top:-3cqw;padding:0 3cqw;border:1px solid var(--a-action);border-radius:999px;background:var(--a-vert-clair);color:var(--a-action);font:600 3.4cqw/1.5 Manrope,sans-serif}
.tuto-fil{flex:1;min-height:0;overflow:hidden;padding:3cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:3cqw}
.tuto-jour{align-self:center;font:500 3.3cqw/1.3 Manrope;color:var(--a-discret);margin:0}
.tuto-bulle{max-width:86%;border:1px solid var(--a-action);border-radius:6cqw;padding:2.4cqw 3.3cqw;font-size:4cqw;line-height:1.38;margin:0;animation:tuto-envol .35s ease both}
.tuto-bulle.client{align-self:flex-end;background:var(--a-client);color:var(--a-encre);border-bottom-right-radius:1.2cqw}
.tuto-bulle.emile{align-self:flex-start;background:var(--a-carte);border-bottom-left-radius:1.2cqw}
.tuto-bulle .qui{display:block;font-size:3.2cqw;color:var(--a-discret);margin-bottom:.6cqw}
.tuto-bulle .piece{display:flex;align-items:center;gap:2cqw;margin-bottom:1.6cqw;padding:1.6cqw 2.4cqw;border-radius:3cqw;background:#fff;border:1px solid #d9cdb8;font-size:3.4cqw}
.tuto-bulle .piece i{font-style:normal;font-size:5.4cqw}
.tuto-bulle .gestes{display:flex;justify-content:space-between;margin-top:2cqw;color:var(--a-action);font-size:3cqw}
.tuto-ecrit{align-self:flex-start;display:flex;align-items:center;gap:2cqw;animation:tuto-envol .3s ease both}
.tuto-ecrit img{width:8.5cqw;height:8.5cqw;border-radius:50%}
.tuto-ecrit span{display:flex;align-items:center;gap:1.6cqw;padding:2cqw 3.3cqw;border:1px solid var(--a-action);border-radius:6cqw;border-bottom-left-radius:1.2cqw;background:var(--a-carte);color:var(--a-systeme);font:500 3.8cqw/1.3 Manrope}
.tuto-ecrit i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--a-systeme);animation:tuto-point 1.2s infinite}
.tuto-ecrit i:nth-child(3){animation-delay:.2s}.tuto-ecrit i:nth-child(4){animation-delay:.4s}
/* la zone d'écriture : le +, le cadenas, le texte, le micro, la flèche */
.tuto-saisie{position:relative;flex:none;margin:0 2.4cqw 3cqw;padding:2cqw;border:1px solid var(--a-action);border-radius:6cqw;background:var(--a-saisie)}
.tuto-saisie .texte{min-height:6cqw;padding:0 1.2cqw 2cqw;font-size:4cqw;line-height:1.35;color:var(--a-encre)}
.tuto-saisie .texte:empty::before{content:"Écrivez à Emile…";color:var(--a-discret)}
.tuto-saisie .texte.tape::after{content:"";display:inline-block;width:.5cqw;height:4.2cqw;margin-left:.4cqw;vertical-align:-.6cqw;background:var(--a-action);animation:tuto-curseur .8s steps(1) infinite}
.tuto-saisie .joint{display:none;align-items:center;gap:1.6cqw;margin:0 0 2cqw;padding:1.4cqw 2.4cqw;border-radius:3cqw;background:#fff;border:1px solid #d9cdb8;font-size:3.4cqw;width:max-content}
.tuto-saisie .joint.la{display:flex;animation:tuto-envol .3s ease both}
.tuto-saisie .rang{display:flex;align-items:center;gap:2cqw}
.tuto-saisie .rond{width:9.5cqw;height:9.5cqw;border-radius:50%;border:1px solid var(--a-action);background:var(--a-chat);color:var(--a-action);display:grid;place-items:center;font:600 5.4cqw/1 Manrope;transition:transform .15s,background .15s,color .15s}
.tuto-saisie .rond svg{width:5.4cqw;height:5.4cqw}
.tuto-saisie .cadenas{color:var(--a-action);font-size:3.8cqw}
.tuto-saisie .vide{flex:1}
.tuto-saisie .envoi{background:var(--a-signal);border-color:#c9a93a;color:var(--a-encre)}
.tuto-saisie .rond.touche{transform:scale(.86);background:var(--a-action);color:#fff}
/* le menu du + */
.tuto-plus{position:absolute;left:2cqw;bottom:calc(100% + 2cqw);z-index:2;display:none;flex-direction:column;min-width:62cqw;padding:1.6cqw;border-radius:4cqw;background:#fff;box-shadow:0 2cqw 6cqw -1cqw rgba(0,0,0,.28);font-size:3.7cqw}
.tuto-plus.la{display:flex;animation:tuto-monte .25s ease both}
.tuto-plus span{padding:2cqw 2.4cqw;border-radius:2.4cqw;color:var(--a-encre)}
.tuto-plus span.touche{background:var(--a-vert-clair)}
/* le doigt qui touche */
.tuto-doigt{position:absolute;z-index:4;width:13%;aspect-ratio:1;border-radius:50%;background:rgba(194,81,122,.28);border:2px solid rgba(194,81,122,.85);
  transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;transition:left .45s ease,top .45s ease,opacity .2s}
.tuto-doigt.la{opacity:1}
.tuto-doigt.appui{animation:tuto-appui .35s ease}
/* la légende sous le téléphone : l'étape en cours */
.tuto-etapes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;font-size:.88rem;line-height:1.35}
.tuto-etapes li{display:flex;gap:8px;align-items:baseline;padding:5px 10px;border-radius:10px;color:#6d6358;transition:background .25s,color .25s}
.tuto-etapes li b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e8dfd3;color:#1C1A17;font-size:.72rem}
.tuto-etapes li.ici{background:#FBF0F3;color:#1C1A17;font-weight:700}
.tuto-etapes li.ici b{background:#c2517a;color:#fff}
.tuto-note{margin:8px 0 0;font-size:.78rem;color:#7a7066;text-align:center}
@keyframes tuto-envol{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}
@keyframes tuto-monte{from{opacity:0;transform:translateY(3cqw) scale(.96)}to{opacity:1;transform:none}}
@keyframes tuto-point{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes tuto-curseur{50%{opacity:0}}
@keyframes tuto-appui{0%{transform:translate(-50%,-50%) scale(.6)}50%{transform:translate(-50%,-50%) scale(.45)}100%{transform:translate(-50%,-50%) scale(.6)}}
@media (prefers-reduced-motion:reduce){.tuto-bulle,.tuto-ecrit,.tuto-plus.la,.tuto-saisie .joint.la{animation:none}.tuto-doigt{display:none}}

/* le menu de « Signaler » réutilise .tuto-plus, posé sur la conversation */
.tuto-ecran > .tuto-plus{left:auto;right:3cqw;bottom:24cqw}
.tuto-bulle .signal.touche{background:var(--a-vert-clair);border-radius:2cqw}
/* l'écran des réglages */
.tuto-reglages{flex:1;display:flex;flex-direction:column;gap:3cqw;padding:3cqw 4cqw;background:var(--a-chat)}
.tuto-reglages h4{margin:0;font:800 5cqw/1.2 Manrope;color:var(--a-encre)}
.tuto-menu-reglages{align-self:flex-start;padding:1.6cqw 3cqw;border-radius:999px;border:1px solid var(--a-action);background:var(--a-vert-clair);color:var(--a-action);font:700 3.6cqw/1.3 Manrope}
.tuto-reglage{padding:3cqw;border-radius:4cqw;background:#fff;border:1px solid #e3d9c8}
.tuto-reglage .ligne{display:flex;justify-content:space-between;font:700 3.8cqw/1.3 Manrope;color:var(--a-encre);margin-bottom:3cqw}
.tuto-reglage .valeur{color:var(--a-action)}
.tuto-reglage .rail{position:relative;height:1.4cqw;margin:2cqw 2cqw 1cqw;border-radius:1cqw;background:#e5ddd0}
.tuto-reglage .pouce{position:absolute;top:50%;left:0;width:6cqw;height:6cqw;border-radius:50%;background:var(--a-action);transform:translate(-50%,-50%);box-shadow:0 1cqw 2cqw rgba(0,0,0,.25);transition:left .5s ease}
.tuto-reglage .bornes{display:flex;justify-content:space-between;font:500 3cqw/1 Manrope;color:var(--a-discret)}
.tuto-apercu{padding:3cqw;border-radius:4cqw;background:var(--a-carte);border:1px solid var(--a-action);font-size:3.4cqw;line-height:1.35;color:var(--a-texte);transition:font-size .5s ease}
.tuto-apercu .qui{display:block;font-size:.75em;color:var(--a-discret)}

/* la petite main dessinée qui tapote (30/09) : le bout de l'index se pose sur l'endroit touché */
.main-doigt{position:absolute;z-index:9;width:42px;height:56px;pointer-events:none;opacity:0;transform:translate(-14px,-2px);
  transition:left .55s ease,top .55s ease,opacity .3s;filter:drop-shadow(0 4px 5px rgba(0,0,0,.28))}
.main-doigt .main{width:100%;height:100%;display:block;transform-origin:14px 2px}
.main-doigt .onde{position:absolute;left:14px;top:2px;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #c2517a;opacity:0}
.main-doigt.la{opacity:1}
.main-doigt.appui .main{animation:main-tape .38s ease}
.main-doigt.appui .onde{animation:main-onde .5s ease-out}
@keyframes main-tape{40%{transform:translateY(4px) scale(.94) rotate(-4deg)}}
@keyframes main-onde{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
@media (prefers-reduced-motion:reduce){.main-doigt{display:none}}