/*
 * La vitrine de Nextilt : la page que voit qui arrive sans être connecté.
 * Construite à part de l'app (chantier vitrine, `.scratch/chantiers/vitrine/en-attente.md`),
 * d'après la maquette validée par Igor le 2026-10-20 (`maquettes/vitrine.html`).
 * Les polices sont servies par la page elle-même, jamais par un tiers.
 */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('polices/figtree-400-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: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('polices/figtree-400-latin-ext.woff2') format('woff2');
  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: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('polices/figtree-500-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: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('polices/figtree-500-latin-ext.woff2') format('woff2');
  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: 'Figtree';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('polices/figtree-600-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: 'Figtree';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('polices/figtree-600-latin-ext.woff2') format('woff2');
  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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  size-adjust: 125%;
  src: url('polices/caveat-500-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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  size-adjust: 125%;
  src: url('polices/caveat-500-latin-ext.woff2') format('woff2');
  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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  size-adjust: 125%;
  src: url('polices/caveat-700-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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  size-adjust: 125%;
  src: url('polices/caveat-700-latin-ext.woff2') format('woff2');
  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;
}

:root{--fond:#f4ecdc;--fond2:#ece0c8;--papier:#fffaf0;--blanc:#fffdf8;--encre:#2f2924;--forte:#4a4038;--douce:#6b5d4b;--tierce:#8a7d6a;--trait:#e3d7bf;
--accent:#2f8f9d;--accent-f:#217480;--accent-v:#e6f2f3;--monde:#c9973c;--monde-e:#6e5b32;--monde-v:#fdf3dc;--bleu:#4a74a8;--vert:#4f8a5e;--corail:#c46a4f;--violet:#7b62a3;--ocre:#b08d48}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");font-family:Figtree,system-ui,sans-serif;color:var(--encre);font-size:16px;line-height:1.5}
.main{font-family:Caveat;font-weight:700;letter-spacing:0}
.large{max-width:1240px;margin:0 auto;padding:0 32px}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;height:52px;padding:0 28px;border-radius:14px;font-weight:700;font-size:15.5px;text-decoration:none;white-space:nowrap}
.btn-p{background:var(--accent);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 22px -10px rgba(47,143,157,.9)}
.btn-s{background:var(--blanc);color:var(--encre);box-shadow:0 0 0 1px var(--trait),0 6px 12px -6px rgba(80,55,25,.4)}
.ligne{background-image:repeating-linear-gradient(transparent 0 27px,#ebe2cf 27px 28px)}
.feuille{background:var(--papier);border-radius:14px;box-shadow:0 1px 0 #fff inset,0 0 0 1px var(--trait),0 18px 30px -14px rgba(80,55,25,.45),0 4px 0 -1px #efe4cd,0 8px 0 -2px #e7dbc2}
.scotch{position:absolute;width:90px;height:22px;background:rgba(240,228,190,.82);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.galet{position:absolute;display:flex;flex-direction:column;justify-content:center;padding:10px 22px;min-height:72px;width:170px;background:var(--blanc);box-shadow:0 0 0 2px var(--c),0 10px 16px -8px rgba(80,55,25,.45)}
.galet b{font-family:Caveat;font-size:17px;line-height:1.05}
.galet small{font-size:11.5px;color:var(--tierce)}
.galet.att{background:var(--monde-v)}
.galet.ok{opacity:.55}
.r1{border-radius:62% 38% 55% 45% / 45% 55% 45% 55%}.r2{border-radius:45% 55% 40% 60% / 60% 40% 60% 40%}.r3{border-radius:55% 45% 62% 38% / 50% 62% 38% 50%}.r4{border-radius:58% 42% 46% 54% / 52% 58% 42% 48%}
.postit{position:absolute;padding:14px 16px;width:190px;background:var(--pc,#fff3b0);box-shadow:0 1px 2px rgba(0,0,0,.12),0 12px 18px -10px rgba(80,55,25,.45);font-size:13px;color:#4a4038;line-height:1.45}
.postit h5{margin:0 0 4px;font-family:Caveat;font-size:18px;color:var(--encre)}
.postit::before{content:"";position:absolute;top:-8px;left:50%;width:60px;height:18px;margin-left:-30px;background:rgba(240,228,190,.85);transform:rotate(-3deg)}
.pastille{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);vertical-align:middle;margin-right:6px}

/* -------- haut -------- */
.nav{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,#ece0c8,#e6d8bc);box-shadow:0 2px 0 #d9c9a8,0 10px 20px -16px rgba(80,55,25,.6)}
.nav .large{display:flex;align-items:center;height:76px;gap:28px}
.marque{display:flex;align-items:center;gap:10px;font-family:Caveat;font-size:29px;font-weight:700}
.marque svg{flex:none}
.nav a.l{color:var(--douce);text-decoration:none;font-weight:600;font-size:14.5px}
.nav .droite{margin-left:auto;display:flex;gap:10px}
.nav .btn{height:44px;padding:0 20px}

/* -------- héros -------- */
.heros{padding:80px 0 40px}
.heros .large{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:center}
.surtitre{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait);font-size:13px;font-weight:600;color:var(--douce)}
.heros h1{font-family:Caveat;font-size:74px;line-height:.9;margin:22px 0 22px}
.heros h1 em{font-style:normal;color:var(--accent-f);background:linear-gradient(transparent 62%,rgba(47,143,157,.18) 62%)}
.heros p.promesse{font-size:19px;line-height:1.6;color:var(--forte);max-width:540px;margin:0 0 30px}
.heros .boutons{display:flex;gap:12px;align-items:center}
.heros .invite{margin-top:14px;font-size:13.5px;color:var(--tierce)}
.trois-mots{display:flex;gap:22px;margin-top:34px}
.trois-mots div{font-size:13.5px;color:var(--douce);max-width:150px}
.trois-mots b{display:block;font-family:Caveat;font-size:19px;color:var(--encre)}
.scene{position:relative;height:620px}
.ordi{position:absolute;left:0;top:30px;width:640px;height:420px;border-radius:16px;background:#2f2924;padding:12px 12px 22px;box-shadow:0 40px 60px -26px rgba(40,25,10,.7)}
.ordi::after{content:"";position:absolute;left:-30px;right:-30px;bottom:-18px;height:20px;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#5a4c40,#3b3128)}
.ecran-o{position:relative;height:100%;border-radius:8px;overflow:hidden;background:var(--fond);display:grid;grid-template-columns:120px 1fr 170px}
.mini-barre{background:linear-gradient(180deg,#ece0c8,#e6d8bc);padding:12px 10px;font-size:10px;color:var(--douce)}
.mini-barre .it{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:6px;margin-bottom:2px}
.mini-barre .it.ici{background:var(--blanc);color:var(--encre);font-weight:700;box-shadow:0 2px 4px rgba(80,55,25,.2)}
.mini-barre .it i{width:12px;height:12px;border-radius:3px;background:#d8c9ab}
.mini-barre .it.ici i{background:var(--encre)}
.mini-carte{position:relative;margin:12px 8px;border-radius:10px;background:var(--papier);background-image:repeating-linear-gradient(transparent 0 15px,#ebe2cf 15px 16px);box-shadow:0 0 0 1px var(--trait),0 3px 0 -1px #efe4cd}
.mini-carte .galet{min-height:40px;width:96px;padding:4px 10px}
.mini-carte .galet b{font-size:13px}.mini-carte .galet small{font-size:8px}
.mini-toi{position:absolute;left:50%;top:50%;width:62px;height:46px;margin:-23px 0 0 -31px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Caveat;font-size:14px;background:radial-gradient(circle at 30% 20%,#55493f,#2f2924 70%);border-radius:58% 42% 46% 54% / 52% 58% 42% 48%}
.mini-blocs{padding:12px 10px 0 0;display:flex;flex-direction:column;gap:8px}
.mini-bloc{background:var(--papier);border-radius:8px;padding:7px 8px;box-shadow:0 0 0 1px var(--trait);font-size:8.5px;color:var(--douce)}
.mini-bloc b{display:block;font-family:Caveat;font-size:10px;color:var(--encre)}
.mini-bloc.m{background:var(--accent-v)}
.tel{position:absolute;width:250px;height:510px;border-radius:36px;background:#1f1b18;padding:11px;box-shadow:0 40px 60px -24px rgba(20,12,5,.75)}
.ecran-t{position:relative;height:100%;border-radius:27px;overflow:hidden;background:#f4f1ec;padding:30px 14px 0;font-size:12px}
.ecran-t .jour{display:flex;justify-content:space-between;color:var(--tierce);font-size:11px}
.ecran-t h6{margin:12px 0 10px;font-size:22px;font-weight:700}
.deb{padding:14px;border-radius:16px;background:var(--accent);color:#fff}
.deb small{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.deb b{display:block;font-size:17px;margin:6px 0 2px}
.deb .ou{font-size:11px;opacity:.85}
.deb .bt{display:flex;gap:6px;margin-top:10px}
.deb .bt span{flex:1;text-align:center;padding:7px 0;border-radius:9px;background:#fff;color:var(--accent-f);font-weight:700;font-size:11px}
.deb .bt span+span{background:transparent;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.ens{margin-top:12px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tierce);font-weight:700}
.ecran-t .l{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #ebe6dc}
.ecran-t .l em{font-style:normal;font-size:10px;padding:3px 7px;border-radius:999px;background:var(--accent-v);color:var(--accent-f)}
.ecran-t .l em.w{background:var(--monde-v);color:var(--monde-e)}
.onglets{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;height:56px;background:#fff;border-top:1px solid #ebe6dc;font-size:9px;color:var(--tierce)}
.onglets .plus{width:34px;height:34px;border-radius:10px;background:var(--encre);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.notif{position:absolute;padding:12px 14px;width:280px;border-radius:16px;background:rgba(255,253,248,.97);box-shadow:0 18px 30px -12px rgba(40,25,10,.5),0 0 0 1px var(--trait);font-size:13px}
.notif .t{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tierce);margin-bottom:4px}
.notif .t i{width:16px;height:16px;border-radius:5px;background:var(--encre)}
.notif b{display:block;font-size:13.5px}

/* -------- le fil -------- */
.fil{position:relative;padding:40px 0 20px}
.fil .tete{text-align:center;max-width:760px;margin:0 auto 10px}
.fil .tete h2{font-family:Caveat;font-size:51px;line-height:1;margin:0 0 12px}
.fil .tete p{font-size:18px;color:var(--douce);margin:0}
.chemin{position:absolute;left:50%;top:210px;bottom:120px;width:4px;margin-left:-2px;background:repeating-linear-gradient(180deg,#c7b795 0 10px,transparent 10px 20px)}
.etape{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:70px 0}
.etape.inv .texte{order:2}
.etape .num{position:absolute;left:50%;top:50%;width:64px;height:54px;margin:-27px 0 0 -32px;display:flex;align-items:center;justify-content:center;font-family:Caveat;font-size:24px;font-weight:700;color:#fff;background:radial-gradient(circle at 30% 20%,#55493f,#2f2924 70%);border-radius:58% 42% 46% 54% / 52% 58% 42% 48%;box-shadow:0 0 0 6px var(--fond),0 10px 18px -6px rgba(40,25,10,.5);z-index:2}
.texte .quand{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-f)}
.texte h3{font-family:Caveat;font-size:43px;line-height:1;margin:8px 0 14px}
.texte p{font-size:17px;color:var(--forte);margin:0 0 14px;max-width:470px}
.texte ul{margin:16px 0 0;padding:0;list-style:none;max-width:470px}
.texte li{position:relative;padding:7px 0 7px 30px;color:var(--forte);font-size:15.5px}
.texte li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:14px;border-radius:58% 42% 46% 54% / 52% 58% 42% 48%;background:var(--c,var(--accent))}
.vue{position:relative;height:440px}

/* vue 1 : la fiche et ses post-it */
.fiche{position:absolute;left:30px;top:30px;width:420px;padding:28px 30px}
.fiche .titre{font-family:Caveat;font-size:32px;line-height:1}
.fiche .meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px}
.fiche .meta span{padding:5px 10px;border-radius:999px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait);font-size:12.5px;color:var(--douce)}
.fiche .note{font-size:14.5px;line-height:1.7;color:var(--forte)}
.fiche .case{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14.5px}
.fiche .case i{width:16px;height:16px;border-radius:4px;border:2px solid var(--bleu)}
.fiche .case.f i{background:var(--bleu)}
.fiche .case.f span{text-decoration:line-through;color:var(--tierce)}
/* vue 2 : la carte et ses liens */
.carte-g{position:absolute;inset:10px 0 10px 0;border-radius:16px}
.trait-att{position:absolute;border-top:2px dashed #b9a7d9}
.etiq-att{position:absolute;padding:4px 10px;border-radius:999px;background:#f7f3fb;box-shadow:0 0 0 1px #dcd0ec;font-size:11.5px;color:#6b5e8c}
.date-pt{position:absolute;right:24px;top:22px;padding:10px 14px;border-radius:12px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait),0 8px 14px -8px rgba(80,55,25,.4);font-size:12.5px;color:var(--douce)}
.date-pt b{display:block;font-family:Caveat;font-size:19px;color:var(--encre)}
/* vue 3 : le monde */
.attente{position:absolute;padding:16px 18px;width:330px;border-radius:14px;background:var(--monde-v);box-shadow:0 0 0 1px #ebd9b4,0 14px 22px -12px rgba(80,55,25,.45)}
.attente small{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--monde-e);font-weight:700}
.attente b{display:block;font-size:17px;margin:6px 0 4px}
.attente .jauge{height:6px;border-radius:4px;background:#efe3cc;margin:10px 0 8px;overflow:hidden}
.attente .jauge i{display:block;height:100%;background:#dfc48a}
.attente .bt{display:inline-block;margin-top:6px;padding:7px 12px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #ebd9b4;font-weight:700;font-size:12.5px;color:var(--monde-e)}
/* vue 4 : maintenant */
.mt{position:absolute;inset:20px 10px;padding:24px 26px}
.mt h4{margin:0 0 4px;font-family:Caveat;font-size:32px}
.mt .regl{display:flex;gap:8px;margin:8px 0 16px}
.mt .regl span{padding:7px 12px;border-radius:999px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait);font-size:12.5px;color:var(--douce)}
.mt .regl b{color:var(--encre)}
.grand-deb{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px;border-radius:16px;background:var(--blanc);box-shadow:0 0 0 1.5px var(--encre),0 18px 26px -14px rgba(80,55,25,.5)}
.grand-deb small{font-size:12px;color:var(--douce)}
.grand-deb b{display:block;font-family:Caveat;font-size:27px;line-height:1;margin:6px 0 12px}
.grand-deb .libere span{display:block;margin-bottom:6px;padding:6px 10px;border-radius:10px;background:var(--blanc);box-shadow:0 0 0 1.5px #d7c9ab;font-size:12.5px}
.grand-deb .bts{display:flex;gap:8px}
.grand-deb .bts span{padding:9px 14px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;font-size:13px}
.grand-deb .bts span+span{background:var(--blanc);color:var(--encre);box-shadow:0 0 0 1px var(--trait)}
.etages{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.etages div{padding:10px 12px;border-radius:12px;background:var(--papier);box-shadow:0 0 0 1px var(--trait);font-size:12.5px}
.etages div small{display:block;color:var(--tierce);font-size:11px}
/* vue 5 : la poche */
/* vue 6 : l'IA */
.conv{position:absolute;left:20px;top:20px;width:430px;padding:20px 22px;border-radius:16px;background:#fbfaf7;box-shadow:0 0 0 1px #e5e0d6,0 20px 30px -16px rgba(40,25,10,.45);font-size:14px}
.conv .q{margin-left:auto;max-width:300px;padding:10px 14px;border-radius:14px 14px 4px 14px;background:#ece6da;margin-bottom:12px}
.conv .r{max-width:360px;padding:10px 0;color:var(--forte)}
.conv .outil{display:inline-flex;align-items:center;gap:6px;margin:4px 0 8px;padding:5px 10px;border-radius:8px;background:#f1ede4;font-size:12px;color:var(--douce)}
.conv .outil i{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.conv .jour{margin-top:6px;padding:12px 14px;border-radius:12px;background:var(--papier);box-shadow:0 0 0 1px var(--trait)}
.conv .jour div{display:flex;gap:10px;padding:4px 0;font-size:13px}
.conv .jour div b{width:46px;color:var(--tierce);font-weight:600}
.plan{position:absolute;right:0;bottom:10px;width:250px;padding:16px 18px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;line-height:1.6;color:#4a4038;background:#fffdf8;border-radius:12px;box-shadow:0 0 0 1px var(--trait),0 14px 22px -12px rgba(80,55,25,.45);transform:rotate(2deg)}
/* vue fichiers */
.drive{position:absolute;left:-10px;top:10px;width:350px;padding:18px 20px}
.drive .tt{display:flex;align-items:center;gap:10px;font-family:Caveat;font-size:24px;margin-bottom:4px}
.drive .tt i{width:26px;height:22px;background:linear-gradient(120deg,#4f8a5e 0 33%,#c9973c 33% 66%,#4a74a8 66%);clip-path:polygon(33% 0,67% 0,100% 60%,83% 100%,17% 100%,0 60%)}
.drive .s{font-size:12.5px;color:var(--tierce);margin-bottom:12px}
.fichier{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;border-radius:10px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait)}
.fichier .ic{width:30px;height:36px;border-radius:4px;background:#f1e9d8;position:relative;flex:none}
.fichier .ic::after{content:attr(data-t);position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:8px;font-weight:800;color:var(--douce)}
.fichier b{display:block;font-size:13.5px}
.fichier small{font-size:11.5px;color:var(--tierce)}
.fichier .ou{margin-left:auto;font-size:11px;padding:3px 8px;border-radius:999px;background:var(--accent-v);color:var(--accent-f);white-space:nowrap}
.dossier-rdv{position:absolute;right:-110px;top:300px;width:270px;transform:rotate(2deg);padding:16px 18px;border-radius:16px;background:var(--blanc);box-shadow:0 0 0 1.5px var(--encre),0 18px 28px -14px rgba(40,25,10,.55)}
.dossier-rdv small{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-f);font-weight:700}
.dossier-rdv b{display:block;font-family:Caveat;font-size:22px;line-height:1.05;margin:6px 0 10px}
.dossier-rdv .f{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed #e3d7bf;font-size:13px}
.dossier-rdv .f::before{content:"";width:12px;height:14px;border-radius:2px;background:#f1e9d8;box-shadow:0 0 0 1px #d4c5a8}
.dossier-rdv .bt{display:block;margin-top:10px;padding:9px 0;text-align:center;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;font-size:13px}

/* personnalisation */
.perso{padding:70px 0 40px}
.perso h2{font-family:Caveat;font-size:46px;text-align:center;margin:0}
.perso .s{text-align:center;color:var(--douce);font-size:18px;margin:6px auto 40px;max-width:720px}
.perso .deux{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.perso h4{font-family:Caveat;font-size:26px;margin:0 0 4px}
.perso .q{font-size:14.5px;color:var(--douce);margin:0 0 18px}
.etagere{position:relative;padding:26px 24px 0;border-radius:14px;background:linear-gradient(180deg,#f3e8d4,#eadcc2);box-shadow:inset 0 0 0 1px #e0d0b2}
.rayon{display:flex;align-items:flex-end;gap:14px;height:230px;padding:0 6px;border-bottom:14px solid #b8946a;box-shadow:0 10px 0 -2px #8e6d4a;border-radius:0 0 4px 4px}
.livre-p{position:relative;width:122px;height:196px;border-radius:4px 10px 10px 4px;background:var(--c);box-shadow:inset 10px 0 0 rgba(0,0,0,.14),0 10px 14px -6px rgba(60,40,20,.45);padding:16px 12px 12px 20px;color:#fff;display:flex;flex-direction:column}
.livre-p .et{background:#fffaf0;color:var(--encre);border-radius:4px;padding:8px 8px 7px;font-family:Caveat;font-size:16px;line-height:1;box-shadow:0 2px 4px rgba(0,0,0,.18)}
.livre-p .et small{display:block;font-family:Figtree;font-size:10px;color:var(--tierce);margin-top:4px}
.livre-p .int{display:flex;flex-direction:column;gap:5px;position:absolute;right:-6px;top:28px}
.livre-p .int i{width:8px;height:14px;border-radius:0 3px 3px 0;background:#fffaf0;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.livre-p .int i.f{opacity:.45}.livre-p .int i.a{box-shadow:0 0 0 1.5px var(--ocre)}
.livre-p .mot{margin-top:auto;font-size:10.5px;opacity:.9}
.livre-p.l1{transform:rotate(-1deg)}.livre-p.l3{transform:rotate(1.5deg)}
.themes{display:flex;gap:10px;margin:18px 0 6px;flex-wrap:wrap}
.theme{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait);font-size:12.5px;color:var(--douce)}
.theme i{width:30px;height:22px;box-shadow:0 0 0 2px var(--c);background-color:#fffdf8}
.fiches4{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f4{position:relative;padding:16px 18px;min-height:178px;border-radius:12px;background-color:#fffdf8;box-shadow:0 0 0 1px var(--trait),0 12px 20px -14px rgba(80,55,25,.5)}
.f4 .ty{position:absolute;top:12px;right:12px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--accent-v);color:var(--accent-f)}
.f4 b{display:block;font-family:Caveat;font-size:21px;line-height:1;margin-bottom:8px}
.f4 p{margin:0;font-size:13px;line-height:1.55;color:var(--forte)}
.f4 .pas{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.f4 .pas span{padding:3px 8px;border-radius:999px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait);font-size:11px;color:var(--douce)}
.f4.l{background-image:repeating-linear-gradient(transparent 0 21px,#ece3d1 21px 22px)}
.f4.c{background-image:linear-gradient(#ece3d1 1px,transparent 1px),linear-gradient(90deg,#ece3d1 1px,transparent 1px);background-size:14px 14px}
.f4.pi{background-color:#fff3b0;transform:rotate(-1deg)}
.f4 .contact{display:flex;align-items:center;gap:12px}
.f4 .contact i{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbe9c4,#e6c58c);flex:none;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;color:#6e5b32}
.f4 .lienp{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed #e3d7bf;font-size:12.5px;color:var(--accent-f)}
.perso .bas{display:flex;justify-content:center;gap:12px;margin-top:30px;flex-wrap:wrap}

/* à toi */
.atoi{padding:70px 0}
.atoi .grille{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.atoi .postit{position:relative;width:auto;padding:22px 20px 20px}
.atoi .postit h5{font-size:28px}
/* fin */
.fin{padding:90px 0 100px;text-align:center;background:linear-gradient(180deg,var(--fond),#e9dcc2)}
.fin h2{font-family:Caveat;font-size:67px;line-height:.95;margin:0 0 18px}
.fin p{font-size:18px;color:var(--douce);margin:0 0 30px}
.fin .boutons{display:flex;gap:12px;justify-content:center}
.pied{padding:26px 0;background:#e6d8bc;font-size:13px;color:var(--tierce)}
.pied .large{display:flex;gap:20px}
.pied a{color:var(--douce)}
.maquette-note{max-width:1240px;margin:0 auto;padding:16px 32px;font-size:13px;color:var(--tierce)}

/* -------- Au téléphone et sur une fenêtre étroite -------- */
@media (max-width: 1100px) {
  .heros .large, .etape, .perso .deux { grid-template-columns: 1fr; gap: 36px; }
  .etape.inv .texte { order: 0; }
  .chemin, .etape .num { display: none; }
  .scene { height: 600px; max-width: 680px; }
  .vue { max-width: 560px; }
  .atoi .grille { grid-template-columns: repeat(2, 1fr); }
  .nav a.l { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .large { padding: 0 18px; }
  .nav .large { height: 64px; gap: 12px; }
  .nav .btn-s { display: none; }
  .nav .btn { height: 40px; padding: 0 14px; font-size: 14px; }
  .marque { font-size: 28px; }
  .heros { padding: 40px 0 20px; }
  .heros h1 { font-size: 46px; }
  .heros p.promesse { font-size: 16.5px; }
  .heros .boutons { flex-direction: column; align-items: stretch; }
  .trois-mots { flex-direction: column; gap: 10px; }
  .scene { height: 520px; }
  .ordi { display: none; }
  .scene .tel { left: 50%; right: auto; top: 20px !important; margin-left: -125px; transform: rotate(2deg) !important; }
  .scene .notif { left: 50% !important; top: auto !important; bottom: 0; margin-left: -140px; }
  .scene .postit { display: none; }
  .fil .tete h2, .demo h2, .perso h2 { font-size: 40px; }
  .texte h3 { font-size: 36px; }
  .etape { padding: 40px 0; }
  .vue { height: auto; min-height: 380px; }
  #fichiers .vue { height: auto; }
  .drive { width: auto !important; }
  .vue > * { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; max-width: 100%; margin: 0 0 16px; transform: none !important; }
  .vue .carte-g { position: relative !important; height: 360px; }
  .vue .carte-g > * { position: absolute; }
  .vue .tel { width: 250px !important; height: 510px; margin: 0 auto 16px; }
  .fiches4 { grid-template-columns: 1fr; }
  .perso .deux > div, .etagere { min-width: 0; }
  .rayon { overflow-x: auto; overflow-y: hidden; }
  .livre-p { flex: none; }
  .vue .carte-g { overflow: hidden; }
  .atoi .grille { grid-template-columns: 1fr; }
  .fin h2 { font-size: 44px; }
  .fin .boutons { flex-direction: column; align-items: stretch; }
  .pied .large { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==================== Les effets visuels ==================== */
/* Ce qui arrive en glissant depuis le côté ne doit jamais faire défiler la page de côté. */
html, body { overflow-x: clip; }

/*
 * L'arrivée, le vivant et le survol sont en CSS ; l'apparition au défilement et le chemin qui se
 * dessine passent par `effets.js`, qui pose la classe `anime`. Les mouvements utilisent `translate`
 * et `rotate` à part de `transform`, pour ne pas écraser l'inclinaison écrite sur chaque élément.
 */

/* -- L'arrivée : plus lente, l'ordinateur s'ouvre, puis le téléphone glisse dessus -- */
@keyframes ecrire { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }
@keyframes monter { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes poser { from { opacity: 0; translate: 0 -34px; rotate: -6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes glisser { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }
/* L'écran qu'on relève : l'ordinateur part couché, son écran se redresse depuis la charnière. */
@keyframes ouvrir {
  0% { opacity: 0; transform: perspective(1400px) rotateX(-88deg); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: perspective(1400px) rotateX(0deg); }
}
/* Le téléphone arrive de la droite et vient se poser sur l'ordinateur. */
@keyframes glisser-dessus { from { opacity: 0; translate: 220px 40px; } to { opacity: 1; translate: 0 0; } }
.heros h1 { animation: ecrire 1.8s cubic-bezier(.3,.7,.2,1) .2s both; }
.heros .surtitre { animation: monter .9s ease-out both; }
.heros p.promesse { animation: monter 1s ease-out .9s both; }
.heros .boutons, .heros .invite { animation: monter 1s ease-out 1.2s both; }
.trois-mots div { animation: monter .9s ease-out both; }
.trois-mots div:nth-child(1) { animation-delay: 1.5s; }
.trois-mots div:nth-child(2) { animation-delay: 1.7s; }
.trois-mots div:nth-child(3) { animation-delay: 1.9s; }
.scene .ordi { transform-origin: 50% 100%; animation: ouvrir 1.6s cubic-bezier(.25,.8,.25,1) .5s both; }
.scene .tel { animation: glisser-dessus 1.2s cubic-bezier(.2,.8,.2,1) 2.1s both; }
.scene .postit { animation: poser 1s cubic-bezier(.2,.9,.3,1.2) 3s both; }
.scene .notif { animation: glisser 1s cubic-bezier(.2,.8,.2,1) 3.6s both, notif-revient 10s ease-in-out 6s infinite; }
@keyframes notif-revient {
  0%, 70%, 100% { opacity: 1; translate: 0 0; }
  78%, 86% { opacity: 0; translate: 50px 0; }
}

/* -- L'apparition au défilement (effets.js) -- */
.anime .etape .texte, .anime .etape .vue,
.anime .fil .tete, .anime .demo h2, .anime .demo .dm-soustitre, .anime .dm-ordi, .anime .dm-bas,
.anime .perso h2, .anime .perso .s, .anime .perso .deux > div, .anime .perso .bas,
.anime .atoi .postit, .anime .fin .large {
  opacity: 0;
  translate: 0 34px;
  transition: opacity 1.2s ease-out, translate 1.2s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--decale, 0ms);
}
.anime .etape .vue { translate: 40px 24px; transition-delay: calc(var(--decale, 0ms) + 120ms); }
.anime .etape.inv .vue { translate: -40px 24px; }
.anime .vu .texte, .anime .vu .vue, .anime .vu.tete, .anime h2.vu, .anime .s.vu, .anime .dm-soustitre.vu, .anime .dm-ordi.vu, .anime .dm-bas.vu,
.anime .deux > div.vu, .anime .bas.vu, .anime .postit.vu, .anime .large.vu {
  opacity: 1;
  translate: 0 0;
}
.anime .etape.vu .vue { opacity: 1; translate: 0 0; }
@keyframes rebond { 0% { scale: 0; } 70% { scale: 1.18; } 100% { scale: 1; } }
.anime .etape .num { scale: 0; }
.anime .etape.vu .num { animation: rebond .8s cubic-bezier(.3,1.4,.5,1) .4s both; }

/* Le chemin qui se dessine */
.anime .chemin { clip-path: inset(0 0 calc((1 - var(--progres, 0)) * 100%) 0); }

/* -- Le moment 2 : le plan se construit petit à petit, une bulle après l'autre -- */
@keyframes bulle-arrive { from { opacity: 0; scale: .4; } 70% { opacity: 1; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes trait-arrive { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.anime .carte-g > * { opacity: 0; }
.anime .etape.vu .carte-g > .galet { animation: bulle-arrive .7s cubic-bezier(.3,1.3,.5,1) both, flotte 3.4s ease-in-out infinite alternate; }
.anime .etape.vu .carte-g > :nth-child(2) { animation-delay: .7s, 1.4s; }
.anime .etape.vu .carte-g > :nth-child(3) { animation-delay: 1.4s, 2.1s; }
.anime .etape.vu .carte-g > :nth-child(4) { animation-delay: 2s, 2.7s; }
.anime .etape.vu .carte-g > :nth-child(5) { animation-delay: 2.6s, 3.3s; }
.anime .etape.vu .carte-g > :nth-child(6) { animation-delay: 3.2s, 3.9s; }
.anime .etape.vu .carte-g > :nth-child(7) { animation-delay: 3.8s, 4.5s; }
/* Une étape faite reste en retrait, même après son arrivée. */
@keyframes bulle-arrive-pale { from { opacity: 0; scale: .4; } 70% { opacity: .55; scale: 1.08; } to { opacity: .55; scale: 1; } }
.anime .etape.vu .carte-g > .galet.ok { animation-name: bulle-arrive-pale, flotte; }
.anime .etape.vu .carte-g > .trait-att { animation: trait-arrive .8s ease-out 4.5s both; }
.anime .etape.vu .carte-g > .etiq-att { animation: bulle-arrive .6s ease-out 5s both; }
.anime .etape.vu .carte-g > .date-pt { animation: monter .9s ease-out 5.5s both; }

/* -- Le moment 6 : le Drive ouvre le bon projet, la bonne bulle, et liste ses fichiers -- */
.drive { width: 380px !important; }
#fichiers .vue { height: 600px; }
.fil-drive { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -2px 0 10px; font-size: 12px; color: var(--tierce); }
.fil-drive span + span::before { content: '›'; margin-right: 4px; color: #c7b795; }
.fil-drive .f1, .fil-drive .f2 { font-weight: 700; color: var(--accent-f); }
.arbo { display: flex; flex-direction: column; gap: 4px; }
.dos { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 34px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--forte); }
.dos::before { content: ''; position: absolute; left: 10px; top: 50%; width: 16px; height: 12px; margin-top: -6px; border-radius: 2px 3px 3px 3px; background: #d9b76a; box-shadow: inset 0 3px 0 #e7c983; }
.dos::after { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 3px; margin-top: -8px; border-radius: 2px 2px 0 0; background: #d9b76a; }
.dos small { margin-left: auto; font-weight: 500; font-size: 11.5px; color: var(--tierce); }
.dos.petit { font-size: 13px; }
.sous1 { margin-left: 18px; padding-left: 8px; border-left: 1.5px dashed #d4c5a8; display: flex; flex-direction: column; gap: 4px; }
.sous2 { margin-left: 18px; padding-left: 8px; border-left: 1.5px dashed #b9d5d9; display: flex; flex-direction: column; gap: 6px; }
.ouvre1, .ouvre2 { background: var(--accent-v); color: var(--accent-f); }
.fichier .coche { display: inline-block; margin-right: 4px; font-weight: 800; }
.dossier-rdv .pret { display: inline; }
.dossier-rdv .prepare { display: none; }
.dossier-rdv .f::after { content: '✓'; margin-left: auto; font-weight: 800; color: var(--accent-f); }

@keyframes paraitre { from { opacity: 0; } to { opacity: 1; } }
@keyframes disparaitre { to { opacity: 0; width: 0; font-size: 0; overflow: hidden; } }
@keyframes trouver { from { opacity: 0; translate: -12px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes cocher { from { opacity: 0; scale: .2; } 70% { opacity: 1; scale: 1.4; } to { opacity: 1; scale: 1; } }
@keyframes deplier { from { max-height: 0; opacity: 0; } to { max-height: 420px; opacity: 1; } }
@keyframes choisir { 0% { background: transparent; color: var(--forte); } 40% { background: #f1e9d8; } 100% { background: var(--accent-v); color: var(--accent-f); } }
@keyframes pointer { 0% { background: transparent; } 50% { background: #f1e9d8; } 100% { background: transparent; } }
@keyframes allumer { 0% { box-shadow: 0 0 0 1.5px var(--encre), 0 18px 28px -14px rgba(40,25,10,.55); } 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px rgba(47,143,157,.18), 0 18px 28px -14px rgba(40,25,10,.55); } 100% { box-shadow: 0 0 0 1.5px var(--encre), 0 18px 28px -14px rgba(40,25,10,.55); } }

/* Avant d'être atteint : les dossiers fermés, rien n'est choisi. */
.anime #fichiers .ouvre1, .anime #fichiers .ouvre2 { background: transparent; color: var(--forte); }
.anime #fichiers .sous1, .anime #fichiers .sous2 { max-height: 0; opacity: 0; overflow: hidden; }
.anime #fichiers .fil-drive .f1, .anime #fichiers .fil-drive .f2,
.anime #fichiers .sous2 .fichier, .anime #fichiers .sous2 .coche,
.anime #fichiers .dossier-rdv, .anime #fichiers .dossier-rdv .f, .anime #fichiers .dossier-rdv .bt { opacity: 0; }
.anime #fichiers .dossier-rdv .f::after { opacity: 0; display: inline-block; }
.anime #fichiers .dossier-rdv .pret { display: none; }
.anime #fichiers .dossier-rdv .prepare { display: inline; }

/* 1. Le regard passe sur les projets, et s'arrête sur La maison, qui s'ouvre. */
.anime #fichiers.vu .arbo > .dos:nth-child(1) { animation: pointer .5s ease-in-out .5s; }
.anime #fichiers.vu .arbo > .dos:nth-child(2) { animation: pointer .5s ease-in-out .9s; }
.anime #fichiers.vu .ouvre1 { animation: choisir .5s ease-out 1.3s forwards; }
.anime #fichiers.vu .fil-drive .f1 { animation: paraitre .3s ease-out 1.5s forwards; }
.anime #fichiers.vu .sous1 { animation: deplier .6s ease-out 1.8s forwards; }
/* 2. Dans La maison, il choisit la bulle du rendez-vous : Le prêt, qui s'ouvre à son tour. */
.anime #fichiers.vu .sous1 > .dos:nth-child(1) { animation: pointer .5s ease-in-out 2.4s; }
.anime #fichiers.vu .ouvre2 { animation: choisir .5s ease-out 2.8s forwards; }
.anime #fichiers.vu .fil-drive .f2 { animation: paraitre .3s ease-out 3s forwards; }
.anime #fichiers.vu .sous2 { animation: deplier .6s ease-out 3.3s forwards; }
/* 3. Ses fichiers se listent un à un, chacun coché. */
.anime #fichiers.vu .sous2 .fichier { animation: trouver .5s cubic-bezier(.2,.8,.2,1) both; }
.anime #fichiers.vu .sous2 .coche { animation: cocher .45s cubic-bezier(.3,1.5,.5,1) both; }
.anime #fichiers.vu .sous2 .fichier:nth-child(1) { animation-delay: 3.7s; } .anime #fichiers.vu .sous2 .fichier:nth-child(1) .coche { animation-delay: 4s; }
.anime #fichiers.vu .sous2 .fichier:nth-child(2) { animation-delay: 4.2s; } .anime #fichiers.vu .sous2 .fichier:nth-child(2) .coche { animation-delay: 4.5s; }
.anime #fichiers.vu .sous2 .fichier:nth-child(3) { animation-delay: 4.7s; } .anime #fichiers.vu .sous2 .fichier:nth-child(3) .coche { animation-delay: 5s; }
/* 4. Les mêmes fichiers passent dans le dossier du rendez-vous, qui s'allume. */
.anime #fichiers.vu .dossier-rdv { animation: trouver .7s cubic-bezier(.2,.8,.2,1) 5.4s both, allumer 1.2s ease-in-out 7.6s; }
.anime #fichiers.vu .dossier-rdv .f { animation: paraitre .4s ease-out both; }
.anime #fichiers.vu .dossier-rdv .f::after { animation: cocher .45s cubic-bezier(.3,1.5,.5,1) both; }
.anime #fichiers.vu .dossier-rdv .f:nth-of-type(1) { animation-delay: 5.8s; } .anime #fichiers.vu .dossier-rdv .f:nth-of-type(1)::after { animation-delay: 6.1s; }
.anime #fichiers.vu .dossier-rdv .f:nth-of-type(2) { animation-delay: 6.2s; } .anime #fichiers.vu .dossier-rdv .f:nth-of-type(2)::after { animation-delay: 6.5s; }
.anime #fichiers.vu .dossier-rdv .f:nth-of-type(3) { animation-delay: 6.6s; } .anime #fichiers.vu .dossier-rdv .f:nth-of-type(3)::after { animation-delay: 6.9s; }
.anime #fichiers.vu .dossier-rdv .prepare { animation: disparaitre .01s linear 7.3s forwards; }
.anime #fichiers.vu .dossier-rdv .pret { display: inline; opacity: 0; animation: paraitre .5s ease-out 7.4s forwards; }
.anime #fichiers.vu .dossier-rdv .bt { animation: monter .6s ease-out 7.8s both; }

/* -- Les cinq angles : un écran de l'app où un curseur construit le projet, puis le lit (demo.js) -- */
/*
 * L'écran est dessiné à 1200 × 720 et réduit à la largeur disponible (`--s`, posé par demo.js ;
 * les valeurs des media queries ne servent que sans JavaScript). Les tailles de Caveat sont
 * celles des maquettes multipliées par 0,8, la police étant agrandie de 25 % (`size-adjust`).
 * Les changements d'état passent par des transitions, jamais par des animations : demo.js peut
 * ainsi sauter à une scène sans que rien ne se rejoue.
 */
.demo { padding: 60px 0 30px; }
.demo h2 { font-family: Caveat; font-size: 46px; text-align: center; margin: 0; }
.demo .dm-soustitre { text-align: center; color: var(--douce); font-size: 18px; margin: 6px 0 30px; }
.dm-ordi { position: relative; padding: 14px 14px 20px; border-radius: 18px; background: #2f2924; box-shadow: 0 40px 60px -26px rgba(40,25,10,.7); }
.dm-ordi::after { content: ""; position: absolute; left: -24px; right: -24px; bottom: -16px; height: 18px; border-radius: 0 0 18px 18px; background: linear-gradient(180deg,#5a4c40,#3b3128); }
.dm-vitre { --s: .98; position: relative; height: calc(720px * var(--s)); border-radius: 8px; overflow: hidden; background: var(--fond); }
.dm-ecran { position: absolute; left: 0; top: 0; width: 1200px; height: 720px; transform: scale(var(--s)); transform-origin: 0 0; display: grid; grid-template-columns: 200px 1000px; overflow: hidden; background: var(--fond); color: var(--encre); font-size: 14px; line-height: 1.4; transition: opacity .5s ease; -webkit-user-select: none; user-select: none; }
.dm-ecran.dm-fondu { opacity: 0; }
.dm-ecran svg:not(.dm-traits):not(.dm-htraits) { width: 15px; height: 15px; flex: none; }
.dm-sec, .dm-sec * { transition: none !important; }

/* La barre de gauche */
.dm-gauche { position: relative; z-index: 2; padding: 18px 12px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: #5c5246; background: linear-gradient(180deg,#ece0c8,#e6d8bc); box-shadow: inset -10px 0 14px -10px rgba(80,55,25,.35), 2px 0 0 #d9c9a8; }
.dm-logo { display: flex; align-items: center; gap: 8px; margin: 0 6px 14px; font-family: Caveat; font-size: 26px; font-weight: 700; color: var(--encre); }
.dm-ecran .dm-logo svg { width: 24px; height: 24px; }
.dm-it, .dm-proj { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 11px; transition: background .35s, box-shadow .35s, color .35s; }
.dm-proj { padding: 6px 8px; font-size: 13px; }
.dm-pic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f6eedd; color: #6b5d4b; box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(80,55,25,.18); transition: background .35s, color .35s; }
.dm-it.ici, .dm-proj.ici { background: #fffaf0; color: var(--encre); font-weight: 600; box-shadow: 0 1px 0 #fff inset, 0 4px 10px -2px rgba(80,55,25,.25); }
.dm-it.ici .dm-pic { background: #3b3530; color: #f6e3b8; }
.dm-sep { margin: 16px 8px 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #9c8f7a; }
.dm-sw { display: inline-block; width: 12px; height: 12px; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dm-moi { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 10px 6px 0; border-top: 1px solid #d9c9a8; }
.dm-moi b { display: block; font-size: 13px; color: var(--encre); }
.dm-moi small { font-size: 11.5px; color: #9c8f7a; }
.dm-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #f6e3b8; background: radial-gradient(circle at 35% 30%,#5a4f45,#2f2924); }

/* La page */
.dm-page { position: relative; overflow: hidden; }
.dm-projet { position: absolute; inset: 0; padding: 16px 22px 18px; }
.dm-fil { display: flex; gap: 6px; height: 17px; font-size: 12.5px; color: #9c8f7a; white-space: nowrap; }
.dm-fil span + span::before { content: '›'; margin-right: 6px; color: #c7b795; }
.dm-fil-p { transition: color .3s; }
.dm-fil-e { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .5s ease, opacity .4s; }
.dm-dedans .dm-fil-e { max-width: 120px; opacity: 1; font-weight: 600; color: var(--encre); }
.dm-dedans .dm-fil-p { color: var(--accent-f); text-decoration: underline; text-underline-offset: 2px; }
.dm-tete { display: flex; align-items: center; gap: 12px; height: 44px; }
.dm-tete h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: Caveat; font-size: 32px; line-height: 1; text-shadow: 0 1px 0 #fff; }
.dm-meta { margin-left: auto; font-size: 12.5px; color: var(--tierce); }
.dm-outils { display: flex; justify-content: space-between; align-items: center; height: 40px; margin-top: 4px; }
.dm-angles { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: #ece0c8; box-shadow: inset 0 2px 4px rgba(80,55,25,.2); }
.dm-angles span { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #6b5d4b; transition: background .3s, color .3s, box-shadow .3s; }
.dm-angles .ici { background: #fffaf0; color: var(--encre); box-shadow: 0 1px 0 #fff inset, 0 3px 6px -1px rgba(80,55,25,.3); }
.dm-droite { position: relative; display: flex; align-items: center; gap: 8px; }
.dm-bouton { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 11px; background: #fffaf0; font-size: 13px; color: #5c5246; box-shadow: 0 1px 0 #fff inset, 0 3px 6px -1px rgba(80,55,25,.28), 0 0 0 1px #e3d7bf; transition: box-shadow .3s; }
.dm-prof span { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; color: var(--encre); transition: background .3s, color .3s; }
.dm-prof span.ici { background: var(--encre); color: #fff; }
.dm-engrenage.ici { box-shadow: 0 0 0 2px var(--accent), 0 3px 6px -1px rgba(80,55,25,.28); }
.dm-menu { position: absolute; right: 0; top: 42px; z-index: 6; width: 200px; padding: 6px; border-radius: 12px; background: #fffdf8; box-shadow: 0 0 0 1px var(--trait), 0 18px 28px -12px rgba(40,25,10,.45); opacity: 0; translate: 0 -6px; visibility: hidden; transition: opacity .25s, translate .25s, visibility .25s; }
.dm-menu.ouvert { opacity: 1; translate: 0 0; visibility: visible; }
.dm-menu div { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--forte); transition: background .2s; }
.dm-menu div:first-child { background: var(--accent-v); color: var(--accent-f); font-weight: 600; }
.dm-menu kbd, .dm-ajout kbd { font: inherit; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; box-shadow: 0 0 0 1.5px #d8ccb2; color: var(--douce); transition: background .2s, color .2s, box-shadow .2s; }

/* La feuille du projet et ses vues */
.dm-feuille { position: absolute; left: 22px; right: 22px; top: 136px; bottom: 18px; border-radius: 14px; overflow: hidden; background: #fffdf6; background-image: repeating-linear-gradient(transparent 0 27px,#ebe2cf 27px 28px); box-shadow: 0 1px 0 #fff inset, 0 0 0 1px #e3d7bf, 0 14px 30px -14px rgba(80,55,25,.35); }
.dm-vue { position: absolute; inset: 0; opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity .5s ease, visibility .5s, translate .5s cubic-bezier(.2,.8,.2,1); }
.dm-ecran[data-vue="carte"] .dm-v-carte, .dm-ecran[data-vue="liste"] .dm-v-liste,
.dm-ecran[data-vue="hierarchie"] .dm-v-hier, .dm-ecran[data-vue="agenda"] .dm-v-agenda,
.dm-ecran[data-vue="maintenant"] .dm-v-maint { opacity: 1; visibility: visible; translate: 0 0; }

/* La carte */
.dm-plan { position: absolute; left: 0; top: 0; width: 956px; height: 470px; transform-origin: 0 0; transition: transform .7s cubic-bezier(.3,.8,.3,1); }
.dm-fiche-ouverte .dm-plan { transform: translate(8px, 104px) scale(.585); }
.dm-traits { position: absolute; left: 0; top: 0; overflow: visible; }
.dm-traits path { fill: none; stroke: var(--bleu); stroke-linecap: round; transition: opacity .5s ease; }
.dm-t-e { stroke-width: 3; opacity: .6; }
.dm-t-s { stroke-width: 2; opacity: .42; }
.dm-g { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 10px; text-align: center; background: #fffaf0; line-height: 1.05; transition: left .85s cubic-bezier(.3,.8,.3,1), top .85s cubic-bezier(.3,.8,.3,1), opacity .45s ease, scale .55s cubic-bezier(.3,1.45,.5,1), box-shadow .35s ease, outline-color .3s; outline: 2px dashed transparent; outline-offset: 7px; }
.dm-g b { font-family: Caveat; font-weight: 700; }
.dm-g small { margin-top: 3px; font-size: 11px; color: var(--tierce); }
.dm-g small:empty { display: none; }
.dm-mere { z-index: 2; width: 200px; height: 104px; color: #fff; border-radius: 58% 42% 46% 54% / 52% 58% 42% 48%; background: linear-gradient(160deg,#6b93c6,#3f6799); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 18px 28px -10px rgba(40,60,100,.55), 0 4px 8px rgba(40,60,100,.25); }
.dm-mere b { font-size: 24px; }
.dm-mere small { color: #dfe8f4; font-size: 12px; }
.dm-etape { z-index: 1; width: 156px; height: 62px; box-shadow: 0 0 0 3px var(--bleu), 0 12px 18px -8px rgba(80,55,25,.45); }
.dm-etape b { font-size: 18px; }
.dm-sous { width: 136px; height: 46px; box-shadow: 0 0 0 2px #8fa9cc, 0 8px 12px -7px rgba(80,55,25,.4); }
.dm-sous b { font-size: 15px; color: var(--forte); }
.dm-g.dm-cache { opacity: 0; scale: .3; }
.dm-g.dm-ouvert { box-shadow: 0 0 0 3px var(--bleu), 0 0 0 9px rgba(74,116,168,.25), 0 12px 18px -8px rgba(80,55,25,.45); }
.dm-rang { position: absolute; left: 4px; top: -13px; width: 30px; height: 25px; display: flex; align-items: center; justify-content: center; font-family: Caveat; font-size: 17px; font-weight: 700; color: #fff; background: var(--encre); border-radius: 58% 42% 46% 54% / 52% 58% 42% 48%; box-shadow: 0 4px 8px -3px rgba(40,25,10,.5); opacity: 0; scale: .2; transition: opacity .3s, scale .45s cubic-bezier(.3,1.6,.5,1), background .4s; }
.dm-classe .dm-rang { opacity: 1; scale: 1; }
.dm-designe .dm-rang { background: var(--accent); }
.dm-hier .dm-etape { outline-color: rgba(47,143,157,.55); }
.dm-hier .dm-etape.dm-designe { outline-color: transparent; box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px rgba(47,143,157,.18), 0 12px 18px -8px rgba(80,55,25,.45); }
/* Le post-it et la liste posés sur la carte */
.dm-pi { position: absolute; left: 398px; top: 318px; width: 162px; padding: 14px 14px 12px; background: linear-gradient(170deg,#fdeea0,#f6dc72); box-shadow: 0 18px 24px -12px rgba(60,40,10,.5), 0 3px 6px rgba(60,40,10,.15); rotate: -2.5deg; transition: opacity .45s, translate .6s cubic-bezier(.2,.9,.3,1.25), rotate .6s cubic-bezier(.2,.9,.3,1.25); }
.dm-pi::before, .dm-li::before, .dm-scotch { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(240,232,210,.8); box-shadow: 0 1px 2px rgba(0,0,0,.12); rotate: -3deg; }
.dm-pi h5 { min-height: 16px; margin: 0 0 2px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(0,0,0,.55); }
.dm-pi .dm-main { min-height: 30px; font-family: Caveat; font-size: 23px; font-weight: 700; line-height: 1.15; color: #2a2620; }
.dm-pi.dm-cache { opacity: 0; translate: 0 -34px; rotate: -9deg; }
.dm-li { position: absolute; left: 384px; top: 10px; width: 188px; padding: 14px 14px 10px; border-radius: 6px; background: #fffaf0; box-shadow: 0 1px 0 #fff inset, 0 18px 26px -12px rgba(80,55,25,.5), 0 3px 6px rgba(80,55,25,.15); rotate: .8deg; transition: opacity .45s, translate .6s cubic-bezier(.2,.9,.3,1.25); }
.dm-li.dm-cache { opacity: 0; translate: 0 -30px; }
.dm-li h5 { min-height: 24px; margin: 0 0 4px; font-family: Caveat; font-size: 20px; color: var(--encre); }
.dm-c { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 2px 0; font-family: Caveat; font-size: 16px; font-weight: 700; transition: opacity .3s, translate .3s; }
.dm-c i { width: 14px; height: 14px; flex: none; border: 2px solid var(--bleu); border-radius: 4px; }
.dm-c.dm-cache { opacity: 0; translate: -8px 0; }
.dm-tape::after, .dm-ajout.actif .dm-champ::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--encre); animation: dm-caret 1s steps(1) infinite; }
@keyframes dm-caret { 50% { opacity: 0; } }
/* La barre d'ajout, les papiers, le bandeau de Hiérarchiser */
.dm-ajout { position: absolute; left: 18px; right: 232px; bottom: 14px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 13px; background: #fffdf8; box-shadow: 0 0 0 1.5px #d8ccb2, 0 8px 14px -8px rgba(80,55,25,.4); transition: box-shadow .3s, opacity .4s, translate .4s cubic-bezier(.2,.8,.2,1), right .6s cubic-bezier(.3,.8,.3,1); }
.dm-ajout.fixe { right: 18px; }
.dm-plus { font-size: 19px; color: var(--douce); }
.dm-champ { flex: 1; overflow: hidden; white-space: nowrap; font-size: 14.5px; }
.dm-champ:empty::before { content: attr(data-vide); color: #8a7d6a; }
.dm-ajout.actif { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(47,143,157,.14), 0 8px 14px -8px rgba(80,55,25,.4); }
.dm-ajout.actif .dm-champ:empty::before { content: none; }
.dm-ajout kbd.appuye { background: var(--accent); color: #fff; box-shadow: 0 0 0 1.5px var(--accent); }
.dm-papiers { position: absolute; right: 18px; bottom: 14px; display: flex; gap: 8px; transition: opacity .4s, translate .4s; }
.dm-papiers span { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 14px; border-radius: 13px; background: #fffaf0; font-size: 13.5px; font-weight: 600; color: #5c5246; box-shadow: 0 1px 0 #fff inset, 0 6px 12px -4px rgba(80,55,25,.4), 0 0 0 1px #e3d7bf; }
.dm-bandeau { position: absolute; left: 18px; right: 18px; bottom: 14px; height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 8px 0 18px; border-radius: 13px; background: var(--accent-v); box-shadow: 0 0 0 1.5px #b9dade, 0 10px 18px -10px rgba(47,143,157,.6); opacity: 0; visibility: hidden; translate: 0 22px; transition: opacity .4s, visibility .4s, translate .45s cubic-bezier(.2,.8,.2,1); }
.dm-bandeau b { font-family: Caveat; font-size: 21px; }
.dm-compte { font-weight: 700; color: var(--accent-f); font-variant-numeric: tabular-nums; }
.dm-ok { margin-left: auto; padding: 8px 14px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; opacity: .4; transition: opacity .3s; }
.dm-ok.actif { opacity: 1; }
.dm-non { padding: 8px 12px; border-radius: 10px; background: #fffdf8; box-shadow: 0 0 0 1px var(--trait); color: var(--douce); font-weight: 600; font-size: 13px; }
.dm-hier .dm-bandeau { opacity: 1; visibility: visible; translate: 0 0; }
.dm-hier .dm-ajout, .dm-hier .dm-papiers { opacity: 0; translate: 0 22px; }
.dm-fiche-ouverte .dm-v-carte .dm-ajout { right: 418px; }
.dm-fiche-ouverte .dm-papiers { opacity: 0; }

/* La liste */
.dm-v-liste { padding: 18px 26px; }
.dm-ranger { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--douce); }
.dm-ranger b { margin-right: 4px; color: var(--encre); }
.dm-ranger span { padding: 5px 12px; border-radius: 999px; background: #fffdf8; box-shadow: 0 0 0 1px var(--trait); font-weight: 600; }
.dm-ranger span.ici { background: var(--encre); color: #fff; box-shadow: none; }
.dm-lg { display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: 6px; padding: 0 14px 0 8px; border-radius: 11px; background: rgba(255,253,248,.94); box-shadow: 0 0 0 1px #ece2cd, 0 4px 8px -6px rgba(80,55,25,.35); opacity: 0; translate: -14px 0; transition: opacity .45s ease calc(var(--i) * 70ms + 150ms), translate .45s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms + 150ms); }
.dm-ecran[data-vue="liste"] .dm-lg { opacity: 1; translate: 0 0; }
.dm-lg.sous { margin-left: 46px; }
.dm-lg .n { width: 16px; text-align: right; font-weight: 700; color: var(--douce); }
.dm-lg .ch { width: 12px; color: var(--douce); }
.dm-lg .rd { position: relative; width: 19px; height: 19px; flex: none; border: 2px solid var(--bleu); border-radius: 50%; transition: background .3s; }
.dm-lg .rd::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; opacity: 0; scale: .3; transition: opacity .3s, scale .4s cubic-bezier(.3,1.6,.5,1); }
.dm-lg .t { flex: 1; font-family: Caveat; font-size: 18px; font-weight: 700; text-decoration: line-through; text-decoration-color: transparent; transition: color .4s, text-decoration-color .4s; }
.dm-lg em { font-style: normal; font-size: 12.5px; color: var(--tierce); }
.dm-lg.fait .rd { background: var(--bleu); }
.dm-lg.fait .rd::after { opacity: 1; scale: 1; }
.dm-lg.fait .t { color: var(--tierce); text-decoration-color: var(--tierce); }

/* La hiérarchie : un arbre couché, la feuille à gauche */
.dm-htraits { position: absolute; left: 0; top: 0; overflow: visible; }
.dm-htraits path { fill: none; stroke: var(--bleu); stroke-width: 2.5; stroke-linecap: round; opacity: .55; transition: opacity .45s; }
.dm-hc { position: absolute; height: 54px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border-radius: 12px; background: #fffdf8; box-shadow: 0 0 0 2px #b8c9e0, 0 10px 16px -10px rgba(80,55,25,.45); opacity: 0; translate: -16px 0; transition: left .7s cubic-bezier(.3,.8,.3,1), top .7s cubic-bezier(.3,.8,.3,1), opacity .45s ease calc(var(--i) * 90ms + 150ms), translate .45s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 90ms + 150ms), box-shadow .3s; }
.dm-ecran[data-vue="hierarchie"] .dm-hc:not(.dm-cache) { opacity: 1; translate: 0 0; }
.dm-hc.p { width: 190px; flex-direction: column; justify-content: center; gap: 0; color: #fff; border-radius: 58% 42% 46% 54% / 52% 58% 42% 48%; height: 64px; background: linear-gradient(160deg,#6b93c6,#3f6799); box-shadow: 0 14px 22px -10px rgba(40,60,100,.55); }
.dm-hc.p b { flex: none; font-size: 20px; }
.dm-hc.p small { font-size: 11.5px; color: #dfe8f4; }
.dm-hc.e { width: 250px; }
.dm-hc.s { width: 240px; box-shadow: 0 0 0 1.5px #ccd8e8, 0 8px 12px -9px rgba(80,55,25,.4); }
.dm-hc .rd { width: 16px; height: 16px; flex: none; border: 2px solid var(--bleu); border-radius: 50%; }
.dm-hc .rg { font-size: 13px; font-weight: 800; color: var(--douce); }
.dm-hc b { flex: 1; font-family: Caveat; font-size: 18px; font-weight: 700; line-height: 1; }
.dm-hc .pts { font-size: 9px; letter-spacing: 2px; color: #8fa9cc; }
.dm-hc .fl { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: #f1e9d8; color: var(--douce); font-weight: 700; transition: background .3s, color .3s; }
.dm-hc.ouvert { box-shadow: 0 0 0 2.5px var(--bleu), 0 10px 16px -10px rgba(80,55,25,.45); }
.dm-hc.ouvert .fl { background: var(--bleu); color: #fff; }

/* L'agenda du mois */
.dm-v-agenda { padding: 12px 18px; background: #fffdf8; }
.dm-cal-haut { display: flex; align-items: center; gap: 14px; height: 40px; }
.dm-cal-haut > span { font-size: 19px; color: #9c8f7a; }
.dm-cal-haut b { font-family: Caveat; font-size: 27px; }
.dm-filtres { margin-left: auto; }
.dm-filtres span { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: #f4ecdc; font-size: 12.5px; font-weight: 600; color: #5c5246; }
.dm-jours { display: grid; grid-template-columns: repeat(7, 1fr); padding: 2px 6px 5px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9c8f7a; }
.dm-mois { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 88px; border-top: 1.5px solid #e3d8c2; border-left: 1.5px solid #e3d8c2; }
.dm-j { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 5px 6px; border-right: 1.5px solid #e3d8c2; border-bottom: 1.5px solid #e3d8c2; }
.dm-j .num { font-family: Caveat; font-size: 17px; line-height: 1; color: #5c5246; }
.dm-j.hors { background: repeating-linear-gradient(135deg,#faf5ea 0 6px,#f4ecdc 6px 12px); }
.dm-j.hors .num { color: #c9bca2; }
.dm-j.auj .num { display: inline-flex; width: 30px; height: 25px; align-items: center; justify-content: center; color: #fff; background: var(--accent); border-radius: 58% 42% 46% 54% / 52% 58% 42% 48%; }
.dm-ev { padding: 4px 6px; border-radius: 5px; font-size: 11.5px; line-height: 1.25; transition: opacity .4s, translate .5s cubic-bezier(.3,1.5,.5,1); }
.dm-ev.rdv { background: var(--bleu); color: #fff; font-weight: 600; box-shadow: 0 4px 8px -4px rgba(40,60,100,.6); }
.dm-ev.ech { background: #fffdf8; color: var(--encre); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--bleu); }
.dm-ev.att { border: 1.5px dashed var(--monde); background: var(--monde-v); color: var(--monde-e); }
.dm-ev.dm-cache { opacity: 0; translate: 0 -12px; }

/* Maintenant, pour ce projet */
.dm-v-maint { padding: 16px 24px; }
.dm-m-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dm-m-sous { font-size: 13.5px; color: #7a6e5d; }
.dm-m-sous b { color: var(--encre); }
.dm-m-reg { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: #ece0c8; box-shadow: inset 0 2px 4px rgba(80,55,25,.2); }
.dm-m-reg span { padding: 7px 12px; border-radius: 10px; background: #fffaf0; font-size: 13px; font-weight: 600; box-shadow: 0 1px 0 #fff inset, 0 3px 6px -1px rgba(80,55,25,.28); }
.dm-m-reg em { margin-right: 5px; font-style: normal; font-weight: 400; color: #9c8f7a; }
.dm-m-grille { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 26px; }
.dm-deb, .dm-gt, .dm-mpi, .dm-libere em { opacity: 0; translate: 0 18px; transition: opacity .5s ease calc(var(--i) * 160ms + 250ms), translate .6s cubic-bezier(.2,.9,.3,1.2) calc(var(--i) * 160ms + 250ms); }
.dm-ecran[data-vue="maintenant"] :is(.dm-deb, .dm-gt, .dm-mpi, .dm-libere em) { opacity: 1; translate: 0 0; }
.dm-deb { position: relative; padding: 22px 24px 20px; border-radius: 8px; background: #fffaf0; border-left: 8px solid var(--bleu); box-shadow: 0 1px 0 #fff inset, 0 22px 30px -16px rgba(80,55,25,.55), 0 3px 6px rgba(80,55,25,.15); }
.dm-etiq { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 6px; background: var(--accent-v); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-f); }
.dm-d-haut { display: flex; gap: 16px; align-items: flex-start; }
.dm-galet-d { width: 46px; height: 36px; flex: none; margin-top: 4px; border: 3px solid var(--bleu); border-radius: 58% 42% 46% 54% / 52% 58% 42% 48%; background: #fffdf8; box-shadow: inset 0 2px 4px rgba(0,0,0,.12); }
.dm-deb h4 { margin: 0; font-family: Caveat; font-size: 30px; line-height: 1.05; }
.dm-d-info { margin-top: 6px; font-size: 13.5px; color: #7a6e5d; }
.dm-marge { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: #efe6d4; font-size: 12.5px; font-weight: 600; }
.dm-libere { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0 62px; font-size: 13.5px; }
.dm-libere span { font-weight: 700; color: var(--accent-f); }
.dm-libere em { padding: 6px 11px; border-radius: 999px; background: #fffdf8; font-style: normal; box-shadow: 0 0 0 1.5px #d7c9ab, 0 3px 6px -3px rgba(80,55,25,.3); }
.dm-d-bas { display: flex; gap: 8px; margin: 18px 0 0 62px; }
.fb { display: inline-flex; padding: 9px 14px; border-radius: 11px; background: linear-gradient(180deg,#4a443d,#2f2924); color: #f6e3b8; font-size: 13px; font-weight: 600; box-shadow: 0 6px 12px -4px rgba(0,0,0,.4); }
.fb.doux { background: #fffaf0; color: #5c5246; box-shadow: 0 0 0 1px #e3d7bf, 0 4px 8px -3px rgba(80,55,25,.3); }
.dm-ensuite { margin: 26px 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tierce); }
.dm-gts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 4px 10px; }
.dm-gt { padding: 14px 16px; text-align: center; background: #fffaf0; box-shadow: 0 0 0 3px var(--bleu), 0 14px 18px -10px rgba(80,55,25,.5); }
.dm-gt b { display: block; font-family: Caveat; font-size: 18px; line-height: 1.05; }
.dm-gt small { font-size: 11.5px; color: #9c8f7a; }
.dm-m-droite { display: flex; flex-direction: column; gap: 26px; padding-top: 8px; }
.dm-mpi { position: relative; padding: 18px 16px 16px; box-shadow: 0 18px 24px -12px rgba(60,40,10,.5), 0 3px 6px rgba(60,40,10,.15); }
.dm-mpi.jaune { background: linear-gradient(170deg,#fdeea0,#f6dc72); rotate: -1.5deg; }
.dm-mpi.lignes { background: #fffef8; background-image: repeating-linear-gradient(transparent 0 26px,#c9daf0 26px 27px); background-position: 0 34px; border-left: 3px solid #e8a3a3; rotate: 1deg; }
.dm-mpi h5 { margin: 0 0 4px; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; color: rgba(0,0,0,.55); }
.dm-mpi .dm-main { font-family: Caveat; font-size: 19px; font-weight: 700; line-height: 1.2; }
.dm-mpi .att { color: var(--monde-e); }
.dm-hr { display: flex; gap: 10px; font-family: Caveat; font-size: 18px; font-weight: 700; line-height: 27px; }
.dm-hr b { width: 38px; color: var(--tierce); }
.dm-punaise { position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#7fa8dc,#2f5d96); box-shadow: 0 4px 5px rgba(0,0,0,.35); }

/* La fiche, en panneau à droite, ses quatre papiers */
.dm-fiche { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: 400px; padding: 20px 24px; overflow: hidden; background: #fffdf8; box-shadow: -18px 0 30px -14px rgba(60,40,20,.45); translate: 105% 0; transition: translate .6s cubic-bezier(.3,.8,.3,1); }
.dm-fiche-ouverte .dm-fiche { translate: 0 0; }
.dm-papier { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.p-note { background: #fffef8; background-image: repeating-linear-gradient(transparent 0 31px,#c9daf0 31px 32px); background-position: 0 14px; border-left: 4px solid #e8a3a3; }
.p-note .dm-punaise { top: 8px; background: radial-gradient(circle at 35% 30%,#7fa8dc,#2f5d96); }
.p-contact { background: linear-gradient(180deg,#fbf6ea,#f6efdd); border-top: 6px solid var(--vert); }
.p-plan { background: #fff; background-image: linear-gradient(#e6ebf2 1px,transparent 1px), linear-gradient(90deg,#e6ebf2 1px,transparent 1px); background-size: 18px 18px; border-top: 6px solid var(--bleu); }
.dm-fiche[data-type="note"] .p-note, .dm-fiche[data-type="contact"] .p-contact, .dm-fiche[data-type="plan"] .p-plan { opacity: 1; }
.dm-fiche.dm-regl .dm-papier { opacity: 0; }
.dm-f-haut, .dm-corps, .dm-mt { position: relative; z-index: 1; }
.dm-f-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dm-type { padding: 5px 10px; border-radius: 8px; background: #f1e8d6; font-size: 12.5px; font-weight: 600; color: #6b5d4b; box-shadow: inset 0 1px 2px rgba(80,55,25,.18); }
.dm-type b { color: var(--encre); }
.dm-f-d { display: flex; align-items: center; gap: 10px; }
.dm-reg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #fffaf0; font-size: 12.5px; font-weight: 600; box-shadow: 0 0 0 1px #e3d7bf, 0 3px 6px -2px rgba(80,55,25,.3); transition: background .3s, color .3s; }
.dm-reg.ici { background: #3b3530; color: #f6e3b8; }
.dm-ferme { font-size: 21px; color: #9c8f7a; }
.dm-mt { position: absolute; left: 24px; top: 52px; z-index: 3; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #fffdf8; box-shadow: 0 0 0 1px var(--trait), 0 14px 22px -10px rgba(40,25,10,.45); opacity: 0; translate: 0 -6px; visibility: hidden; transition: opacity .25s, translate .25s, visibility .25s; }
.dm-mt.ouvert { opacity: 1; translate: 0 0; visibility: visible; }
.dm-mt span { padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #6b5d4b; transition: background .25s, color .25s; }
.dm-mt span.ici { background: #3b3530; color: #f6e3b8; }
.dm-corps { display: grid; }
.ft { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .45s ease, visibility .45s, translate .45s cubic-bezier(.2,.8,.2,1); }
.dm-fiche[data-type="classique"] .ft-classique, .dm-fiche[data-type="note"] .ft-note,
.dm-fiche[data-type="contact"] .ft-contact, .dm-fiche[data-type="plan"] .ft-plan { opacity: 1; visibility: visible; translate: 0 0; }
.dm-fiche.dm-regl .ft { opacity: 0; visibility: hidden; translate: 0 8px; }
.dm-fiche.dm-regl .ft-reglages { opacity: 1; visibility: visible; translate: 0 0; }
.f-chemin { font-size: 12.5px; color: #9c8f7a; }
.f-titre { margin: 4px 0 12px; font-family: Caveat; font-size: 30px; line-height: 1; }
.f-etats, .f-pas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.f-etats span { padding: 5px 10px; border-radius: 999px; background: #f4ecdc; font-size: 12px; color: #6b5d4b; }
.f-etats .ici { background: #3b3530; color: #f6e3b8; }
.pa { padding: 5px 10px; border-radius: 10px; font-size: 12.5px; color: #9c8f7a; box-shadow: inset 0 0 0 1.5px #d9ccb3; border: 0; outline: 1.5px dashed transparent; transition: background .4s, color .4s, box-shadow .4s; }
.pa:not(.plein) { box-shadow: none; outline-color: #d9ccb3; outline-offset: -1.5px; }
.pa i { font-style: normal; }
.pa b { display: none; font-weight: 600; }
.pa.plein { background: #fffaf0; color: var(--encre); box-shadow: 0 0 0 1px #e3d7bf, 0 2px 4px -1px rgba(80,55,25,.2); }
.pa.plein i { display: none; }
.pa.plein b { display: inline; }
.pa[data-r="imp"].plein { background: var(--accent-v); color: var(--accent-f); box-shadow: 0 0 0 1px #b9dade; }
.f-rub { padding: 9px 0; border-top: 1px dashed #e3d8c2; }
.f-rub h6, .r-l h6, .f-schema h6 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9c8f7a; }
.f-rub p { margin: 0; font-size: 13.5px; color: var(--forte); }
.f-l { display: none; align-items: center; gap: 8px; margin-bottom: 6px; padding: 5px 8px; border-radius: 8px; font-size: 13.5px; }
.f-l.pose { display: flex; }
.f-l i { width: 11px; height: 11px; flex: none; border-radius: 50%; }
.f-l small { width: 78px; flex: none; font-size: 11.5px; color: #9c8f7a; }
.f-l .txt { font-weight: 600; }
.f-l.rdv { background: #eef2f8; } .f-l.rdv i { background: var(--bleu); }
.f-l.ech { background: #fffaf0; box-shadow: 0 0 0 1px #e3d7bf; } .f-l.ech i { border-radius: 3px; box-shadow: inset 0 0 0 2px var(--bleu); }
.f-l.att { background: var(--monde-v); border: 1.5px dashed var(--monde); color: var(--monde-e); } .f-l.att i { border: 2px dashed var(--monde); } .f-l.att small { color: var(--monde-e); }
.f-ajouts { display: flex; flex-wrap: wrap; gap: 6px; }
.f-ajouts span { padding: 5px 10px; border-radius: 10px; outline: 1.5px dashed #d9ccb3; outline-offset: -1.5px; font-size: 12.5px; color: #8a7d6a; }
.f-ajouts span.parti { display: none; }
.f-lien { padding: 2px 0; font-size: 13.5px; color: #5c5246; }
.f-lien b { color: var(--encre); }
.f-lien.att { color: var(--monde-e); }
.f-lien em { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--monde-e); }
.f-bas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.f-ecrit { margin-top: 8px; font-family: Caveat; font-size: 20px; font-weight: 700; line-height: 32px; color: #24324a; }
.f-replie { margin-top: 26px; padding: 8px 10px; border-radius: 8px; background: rgba(255,250,240,.85); font-size: 12.5px; color: #9c8f7a; }
.ft-note .f-titre { margin-top: 14px; }
.f-visite { display: flex; gap: 14px; align-items: center; margin: 4px 0 14px; padding: 14px; border-radius: 10px; background: #fffdf8; box-shadow: 0 0 0 1px #e3d7bf, 0 8px 16px -8px rgba(80,55,25,.35); }
.f-visite .f-titre { margin: 0; }
.f-av { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: Caveat; font-size: 26px; font-weight: 700; color: #fff; background: radial-gradient(circle at 35% 30%,#7fb08a,#3f7350); }
.f-metier { margin-top: 4px; font-size: 12.5px; color: #7a6e5d; }
.f-coord { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 14px; }
.f-coord em { font-style: normal; font-size: 12.5px; color: var(--vert); }
.ft-contact .f-bas { margin: 8px 0 12px; }
.f-schema { display: grid; grid-template-columns: 1fr 92px 1fr; gap: 6px; align-items: center; margin-top: 6px; }
.f-schema .col { display: flex; flex-direction: column; gap: 6px; }
.nd { padding: 7px 8px; border-radius: 8px; background: #fffaf0; font-size: 12.5px; line-height: 1.25; box-shadow: 0 0 0 1px #e3d7bf, 0 4px 8px -4px rgba(80,55,25,.35); }
.nd.ok { background: #eef5ec; color: var(--vert); }
.nd.c { background: linear-gradient(180deg,#5a84b8,#41699b); color: #fff; font-weight: 700; text-align: center; }
.f-schema .mil { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.f-schema .fl { font-size: 20px; color: var(--bleu); }
.f-schema .plus { padding-left: 4px; font-size: 12.5px; color: #9c8f7a; }
.f-retient { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: #fffaf0; font-size: 13.5px; box-shadow: 0 0 0 1px #e3d7bf; }
.ft-reglages .f-titre { margin-bottom: 2px; }
.r-l { padding: 10px 0 12px; border-top: 1px dashed #e3d8c2; }
.ft-reglages .f-chemin { margin-bottom: 10px; }
.r-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.r-ch em { padding: 6px 11px; border-radius: 10px; background: #fffaf0; font-style: normal; font-size: 12.5px; font-weight: 600; color: #5c5246; box-shadow: 0 0 0 1px #e3d7bf; transition: background .3s, color .3s, box-shadow .3s; }
.r-ch em.ici { background: #3b3530; color: #f6e3b8; box-shadow: none; }
.r-ch.imp em.ici { background: var(--accent); color: #fff; }
.r-duree { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #7a6e5d; }
.r-case { width: 46px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fffdf8; font-size: 15px; font-weight: 700; color: var(--encre); box-shadow: inset 0 0 0 1.5px #d9ccb3; transition: box-shadow .3s; }
.r-case.actif { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px rgba(47,143,157,.14); }
.r-et { display: flex; gap: 4px; font-size: 22px; line-height: 1; }
.r-et i { font-style: normal; color: #ddd2bd; transition: color .3s, scale .3s; }
.r-et i.ici { color: var(--forte); }
.r-adr { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; font-size: 13px; color: var(--forte); transition: max-height .4s, opacity .4s, margin .4s; }
.r-adr.ici { max-height: 30px; margin-top: 8px; opacity: 1; }
.r-adr::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--bleu); }

/* Le curseur et ses clics */
.dm-curseur { display: none; position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.dm-js .dm-curseur { display: block; }
.dm-clic { position: absolute; z-index: 9; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid var(--accent); border-radius: 50%; background: rgba(47,143,157,.18); pointer-events: none; animation: dm-onde .55s ease-out forwards; }
@keyframes dm-onde { from { scale: .2; opacity: 1; } to { scale: 1.5; opacity: 0; } }

/* Sous l'écran : la légende, l'avancement, la lecture et les scènes */
.dm-bas { margin-top: 30px; }
.dm-avance { height: 3px; margin-bottom: 14px; overflow: hidden; border-radius: 2px; background: #e3d7bf; }
.dm-avance i { display: block; width: 0; height: 100%; background: var(--accent); }
.dm-ligne { display: flex; align-items: center; gap: 16px; }
.dm-legende { flex: 1; min-width: 0; margin: 0; font-size: 15.5px; color: var(--douce); }
.dm-legende .dm-n:not(:empty) { margin-right: 6px; font-family: Caveat; font-size: 24px; color: var(--accent-f); }
.dm-legende .dm-n:not(:empty)::after { content: "."; }
.dm-legende .dm-t { margin-right: 4px; font-family: Caveat; font-size: 24px; font-weight: 700; color: var(--encre); }
.dm-lecture, .dm-points, .dm-avance { display: none; }
.dm-js .dm-lecture { display: flex; }
.dm-js .dm-points { display: flex; }
.dm-js .dm-avance { display: block; }
.dm-lecture { position: relative; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--blanc); color: var(--encre); box-shadow: 0 0 0 1px var(--trait), 0 6px 12px -6px rgba(80,55,25,.4); cursor: pointer; }
.dm-lecture::before { content: ""; height: 13px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: content-box; width: 3px; }
.dm-lecture.arrete::before { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent currentColor; border-width: 7px 0 7px 12px; margin-left: 3px; }
.dm-lecture.suivante::before { width: 9px; height: 9px; border-width: 0 3px 3px 0; border-style: solid; border-color: currentColor; border-left: 0; rotate: -45deg; margin-left: -4px; }
.dm-lecture:focus-visible, .dm-points button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-points { flex: none; gap: 6px; align-items: center; }
.dm-points button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #d4c5a8; cursor: pointer; transition: width .3s, background .3s; }
.dm-points button:hover { background: var(--douce); }
.dm-points button.ici { width: 24px; background: var(--accent); }

/* Sans JavaScript, l'écran suit la largeur par paliers (demo.js donne la valeur exacte). */
@media (max-width: 1240px) { .dm-vitre { --s: .84; } }
@media (max-width: 1100px) { .dm-vitre { --s: .67; } }
@media (max-width: 900px) { .dm-vitre { --s: .52; } }
/* La démonstration est faite pour l'ordinateur : au téléphone, l'écran se réduit simplement. */
@media (max-width: 720px) {
  .dm-vitre { --s: .23; }
  .dm-ordi { padding: 6px 6px 10px; border-radius: 12px; }
  .dm-ordi::after { left: -8px; right: -8px; }
  .dm-ligne { flex-wrap: wrap; }
  .dm-points { order: 3; width: 100%; flex-wrap: wrap; }
}

/* -- Le vivant -- */
@keyframes flotte { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes papier { from { rotate: -.8deg; } to { rotate: .8deg; } }
.carte-g .galet, .mini-carte .galet, .habit .galet { animation: flotte 3.2s ease-in-out infinite alternate; }
.carte-g .galet:nth-child(2n), .mini-carte .galet:nth-child(2n) { animation-duration: 4s; animation-delay: -1.2s; }
.carte-g .galet:nth-child(3n), .mini-carte .galet:nth-child(3n) { animation-duration: 3.6s; animation-delay: -2.1s; }
.vue .postit, .atoi .postit.vu { animation: papier 4.5s ease-in-out infinite alternate; transform-origin: 50% 0; }
.vue .postit:nth-of-type(2n) { animation-duration: 5.5s; animation-delay: -2s; }
.attente .jauge i { transform-origin: left; animation: jauge 2.4s ease-out both; }
@keyframes jauge { from { scale: 0 1; } }
.deb { position: relative; overflow: hidden; }
.deb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); translate: -100% 0; animation: reflet 5s ease-in-out 2.5s infinite; }
@keyframes reflet { 0%, 60% { translate: -100% 0; } 85%, 100% { translate: 100% 0; } }

/* -- Sous la souris -- */
.btn { transition: translate .18s ease, box-shadow .18s ease; }
.btn:hover { translate: 0 -2px; }
.btn-p:hover { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 26px -10px rgba(47,143,157,.95); }
.btn:active { translate: 0 1px; }
.livre-p { transition: translate .25s cubic-bezier(.2,.8,.2,1); cursor: default; }
.livre-p:hover { translate: 0 -14px; }
.f4, .postit, .attente, .fiche { transition: rotate .3s ease, translate .3s ease, box-shadow .3s ease; }
.f4:hover { translate: 0 -4px; }
.f4.pi:hover { rotate: 1deg; }
.nav a.l { transition: color .15s; }
.nav a.l:hover { color: var(--encre); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}