/* re•set, page de présentation. Bootstrap 5 pour la grille et les composants, ce fichier pour l'identité. */
@font-face { font-family:'AT Glanela'; font-display:swap; src:url(../fonts/at-glanela.woff2) format('woff2'); }
@font-face { font-family:'Montserrat'; font-weight:300; font-display:swap; src:url(../fonts/montserrat-300.woff2) format('woff2'); }
@font-face { font-family:'Montserrat'; font-weight:500; font-display:swap; src:url(../fonts/montserrat-500.woff2) format('woff2'); }

:root {
  --ink:#444444; --ink-soft:#6b6762; --muted:#8a8378; --line:#e8e3db; --paper:#fbfaf7; --paper-2:#f4f1ec;
  --lav:#d8cbfe; --lav-soft:#efe9ff; --lav-deep:#7d70b8;
  --b-eau:#9cc8ec; --b-vue:#f6e7c8; --b-marche:#a8d58a; --b-escalier:#f7b6c8;
  --title:'AT Glanela', Georgia, serif;
  --text:'Montserrat', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-family:var(--text); --bs-body-color:var(--ink); --bs-body-bg:var(--paper);
}
:lang(ja) { --text:'Montserrat','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif; --title:'AT Glanela','Hiragino Mincho ProN','Noto Serif JP',serif; }
:lang(ko) { --text:'Montserrat','Apple SD Gothic Neo','Noto Sans KR',sans-serif; --title:'AT Glanela','Apple SD Gothic Neo','Noto Serif KR',serif; }

html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { font-family:var(--text); font-weight:300; font-size:17px; line-height:1.75; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
b, strong { font-weight:500; }
a { color:var(--ink); text-decoration-color:var(--lav-deep); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--lav-deep); }
h1,h2,h3,h4 { font-family:var(--title); font-weight:400; color:var(--ink); letter-spacing:.005em; line-height:1.15; }
h1 { font-size:clamp(2.3rem, 5.2vw, 4.1rem); }
h2 { font-size:clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom:1.2rem; }
h3 { font-size:1.45rem; margin-bottom:.6rem; }
p { margin-bottom:1.1rem; }
.lead { font-size:1.2rem; font-weight:300; line-height:1.7; color:var(--ink-soft); }
.small-caps { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; color:var(--muted); }
.muted { color:var(--muted); }
.skip { position:absolute; left:-9999px; } .skip:focus { left:12px; top:12px; z-index:2000; background:#fff; padding:8px 12px; }
:focus-visible { outline:2px solid var(--lav-deep); outline-offset:3px; }

/* le mot-marque, avec son point plus petit et plus bas, comme sur le logo */
.brand { font-family:var(--title); white-space:nowrap; }
.brand i { display:inline-block; width:.21em; height:.21em; border-radius:50%; background:currentColor; vertical-align:.17em; margin:0 .02em; }

/* ---------- en-tête ---------- */
.site-nav { position:sticky; top:0; z-index:1030; background:rgba(251,250,247,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s; }
.site-nav.scrolled { border-bottom-color:var(--line); }
.site-nav .navbar-brand { font-size:1.75rem; color:var(--ink); padding:0; }
.site-nav .navbar-brand img { height:38px; width:auto; }
.site-nav .nav-link { font-size:.86rem; font-weight:400; color:var(--ink-soft); padding:.4rem .8rem !important; }
.site-nav .nav-link:hover { color:var(--ink); }
.lang-switch .dropdown-toggle { font-size:.8rem; letter-spacing:.08em; border:1px solid var(--line); border-radius:20px; padding:.25rem .8rem; background:transparent; color:var(--ink); }
.lang-switch .dropdown-menu { border:1px solid var(--line); border-radius:12px; font-size:.9rem; min-width:10rem; }
.lang-switch .dropdown-item.active, .lang-switch .dropdown-item:active { background:var(--lav-soft); color:var(--ink); }
.navbar-toggler { border:0; } .navbar-toggler:focus { box-shadow:none; }

.btn-ink { background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:40px; padding:.62rem 1.4rem; font-weight:500; font-size:.92rem; transition:background .25s, color .25s, border-color .25s; }
.btn-ink:hover, .btn-ink:focus { background:var(--lav); border-color:var(--lav); color:var(--ink); }
.btn-line { background:transparent; color:var(--ink); border:1px solid var(--ink); border-radius:40px; padding:.62rem 1.4rem; font-weight:500; font-size:.92rem; }
.btn-line:hover { background:var(--lav-soft); border-color:var(--lav-deep); color:var(--ink); }

/* ---------- sections ---------- */
section { position:relative; padding:clamp(4.5rem,9vw,8.5rem) 0; }
.sec-label { display:flex; align-items:center; gap:.8rem; margin-bottom:1.6rem; }
.sec-label::before { content:''; width:28px; height:1px; background:var(--ink); opacity:.5; }
.vert { position:absolute; left:max(12px, calc(50% - 700px)); top:clamp(4.5rem,9vw,8.5rem); writing-mode:vertical-rl; font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); font-weight:500; }
@media (max-width:1399px){ .vert { display:none; } }
.hair { border-top:1px solid var(--line); }
.paper-2 { background:var(--paper-2); }
.sun { position:absolute; border-radius:50%; background:var(--lav); opacity:.35; pointer-events:none; z-index:0; }

/* ---------- hero ---------- */
.hero { padding-top:clamp(2.5rem,6vw,5rem); overflow:hidden; }
.hero h1 { max-width:14ch; }
.hero-grid { display:grid; grid-template-columns:7fr 5fr; grid-template-areas:"head logo" "body logo"; column-gap:1.5rem; }
.hero-head { grid-area:head; } .hero-body { grid-area:body; } .hero-logo-col { grid-area:logo; position:relative; }
@media (max-width:767px){
  .hero-grid { grid-template-columns:1fr 30%; grid-template-areas:"head logo" "body body"; column-gap:.8rem; }
  .hero-head h1 { font-size:clamp(1.9rem, 9vw, 2.6rem); }
  .hero-grid { padding-right:26px; }
  .univers .handle { padding:.8rem .5rem .8rem .4rem; font-size:.6rem; letter-spacing:.18em; gap:.45rem; }
  .univers .handle img { width:18px; height:18px; }
}
.hero-logo { position:absolute; top:7.5%; left:0; width:100%; height:85%; object-fit:contain; animation:float 7s ease-in-out infinite; pointer-events:none; }
.hero .lead { max-width:40rem; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.6rem 0 0; padding:0; list-style:none; }
.chips li { display:flex; align-items:center; gap:.45rem; font-size:.85rem; border:1px solid var(--line); background:#fff; border-radius:30px; padding:.28rem .8rem .28rem .5rem; }
.bal { width:12px; height:15px; display:inline-block; flex:none; }

/* écran fictif */
.mac { position:relative; z-index:1; margin:3.2rem auto 0; max-width:1060px; }
.mac .screen { position:relative; background:#1d1d1f; border-radius:18px 18px 6px 6px; padding:14px 14px 18px; box-shadow:0 40px 80px -30px rgba(60,40,90,.35); }
.mac .screen::before { content:''; position:absolute; top:5px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#3a3a3c; }
.mac .glass { position:relative; aspect-ratio:16/10; border-radius:6px; overflow:hidden; background:#f3efe8; }
.mac iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.mac .base { height:16px; margin:0 -3.5%; background:linear-gradient(#e4e2df,#c9c6c1); border-radius:0 0 14px 14px; position:relative; }
.mac .base::before { content:''; position:absolute; left:50%; top:0; width:16%; height:6px; margin-left:-8%; background:#bdb9b3; border-radius:0 0 8px 8px; }
.mac .poster { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#f3efe8; transition:opacity .5s; }
.mac .poster img { height:60%; width:auto; opacity:.9; }
.mac.live .poster { opacity:0; pointer-events:none; }
.demo-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem 1rem; margin:1.6rem auto 0; max-width:1060px; }
.demo-bar select { border:1px solid var(--line); border-radius:30px; padding:.5rem 2.2rem .5rem 1rem; font-size:.9rem; background-color:#fff; color:var(--ink); }
.hints { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.6rem 1.6rem; max-width:1060px; margin:1.4rem auto 0; padding:0; list-style:none; font-size:.86rem; color:var(--ink-soft); }
.hints li { display:flex; gap:.6rem; align-items:baseline; line-height:1.5; }
.hints kbd { font-family:var(--text); font-size:.72rem; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:.05rem .45rem; white-space:nowrap; box-shadow:none; }
.cta-row { display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; margin-top:2rem; }
.cta-meta { font-size:.82rem; color:var(--muted); }

/* ---------- quatre gestes ---------- */
.gest { padding-top:1.4rem; position:relative; }
.gest::before { content:''; position:absolute; top:0; left:calc(var(--bs-gutter-x) * .5); right:calc(var(--bs-gutter-x) * .5); border-top:1px solid var(--line); }
.gest .bal-lg { width:34px; height:44px; margin-bottom:.9rem; animation:float 6s ease-in-out infinite; }
.gest:nth-child(2) .bal-lg { animation-delay:-1.5s; }
.gest h3 { font-size:1.6rem; }
.gest .freq { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; }
@keyframes float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(2deg); } }

/* frise d'une journée */
.day { margin-top:3.4rem; background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(1.2rem,3vw,2.2rem); }
.day-head { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-bottom:1.6rem; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:30px; padding:3px; background:var(--paper); }
.seg button { border:0; background:transparent; border-radius:30px; padding:.28rem .8rem; font-size:.82rem; color:var(--ink-soft); }
.seg button.on { background:var(--ink); color:#fff; }
.track { position:relative; height:132px; margin:0 8px; }
.track .axis { position:absolute; left:0; right:0; bottom:26px; height:1px; background:var(--line); }
.track .tick { position:absolute; bottom:0; transform:translateX(-50%); font-size:.68rem; color:var(--muted); }
.track .pass { position:absolute; bottom:27px; transform:translateX(-50%); display:flex; flex-direction:column-reverse; align-items:center; gap:3px; }
.track .pass::after { content:''; width:1px; height:12px; background:#c9c2b6; order:-1; }
.track .pass .bal { width:11px; height:14px; transition:transform .3s; }
.track .pass:hover .bal { transform:translateY(-3px); }
.day-legend { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:.82rem; color:var(--ink-soft); margin-top:1rem; }
.day-legend span { display:flex; align-items:center; gap:.4rem; }
.day-legend .warn { color:#a2604a; }
.day-note { font-size:.82rem; color:var(--muted); margin:1rem 0 0; }

/* ---------- l'application ---------- */
.feature { padding:1.6rem 0; border-top:1px solid var(--line); }
.feature h3 { font-size:1.35rem; }
.macwin { background:#f6f2ea; border-radius:12px; box-shadow:0 30px 60px -28px rgba(50,40,70,.35),0 0 0 .5px rgba(0,0,0,.16); overflow:hidden; }
.macwin .bar { height:28px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#efebe3; border-bottom:1px solid #e3ddd2; }
.macwin .bar i { width:11px; height:11px; border-radius:50%; background:#d9d4cc; display:block; }
.macwin .bar b { flex:1; text-align:center; font-weight:500; font-size:.78rem; color:#777; margin-right:40px; }
.shot { height:440px; overflow:hidden; position:relative; }
.shot img { width:100%; height:auto; display:block; transform:translateY(0); transition:transform 9s cubic-bezier(.45,0,.55,1); }
.shot::after { content:''; position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(rgba(246,242,234,0),#f6f2ea); }
.tabs-shot { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.tabs-shot button { border:1px solid var(--line); background:#fff; border-radius:30px; font-size:.82rem; padding:.3rem .9rem; color:var(--ink-soft); }
.tabs-shot button.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.menu-mock { max-width:340px; background:rgba(248,247,245,.98); border-radius:10px; box-shadow:0 18px 40px -18px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.2); padding:6px; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; font-size:.84rem; font-weight:400; }
.menu-mock .it { display:flex; justify-content:space-between; padding:.2rem .7rem .2rem 1.5rem; border-radius:5px; position:relative; }
.menu-mock .it.dim { color:#8b8b8b; }
.menu-mock .it.chk::before { content:'✓'; position:absolute; left:.5rem; }
.menu-mock .it .k { color:#999; }
.menu-mock hr { margin:.3rem .5rem; border-color:rgba(0,0,0,.25); }
.menu-mock .it:hover:not(.dim) { background:var(--lav-deep); color:#fff; }
.menubar-mock { display:flex; justify-content:flex-end; align-items:center; gap:.9rem; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; font-size:.8rem; font-weight:500; background:#efebe3; border-radius:8px 8px 0 0; padding:.25rem .8rem; max-width:340px; }
.menubar-mock .tr { background:rgba(0,0,0,.1); border-radius:4px; padding:0 .4rem; display:flex; align-items:center; gap:.25rem; }
.langs { display:flex; flex-wrap:wrap; gap:.4rem; padding:0; list-style:none; }
.langs li { border:1px solid var(--line); border-radius:30px; padding:.15rem .75rem; font-size:.85rem; background:#fff; }

/* ---------- personnages ---------- */
.cast { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.4rem; margin-top:2.4rem; }
.cast button { border:0; background:transparent; padding:.6rem .2rem .4rem; border-radius:16px; display:flex; flex-direction:column; align-items:center; gap:.3rem; color:var(--ink-soft); font-size:.74rem; transition:background .25s; }
.cast button img { height:84px; width:auto; transition:transform .35s cubic-bezier(.3,1.6,.5,1); -webkit-user-drag:none; }
.cast button:hover { background:#fff; }
.cast button:hover img { transform:translateY(-6px) rotate(-3deg); }
.cast button.on { background:var(--lav-soft); }

/* ---------- histoire, public ---------- */
.quote { font-family:var(--title); font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.35; }
.croc { width:100%; max-width:300px; height:auto; display:block; margin:0 auto; animation:float 7s ease-in-out infinite; }
.who { padding-top:1.2rem; padding-bottom:1.2rem; position:relative; }
.who::before, .idea::before { content:""; position:absolute; top:0; left:calc(var(--bs-gutter-x) * .5); right:calc(var(--bs-gutter-x) * .5); border-top:1px solid var(--line); }
.who h3 { font-size:1.2rem; margin-bottom:.3rem; }
.who p { margin:0; font-size:.95rem; color:var(--ink-soft); }

/* ---------- science ---------- */
.sci { padding:2.4rem 0; border-top:1px solid var(--line); }
.sci .tag { display:inline-flex; align-items:center; gap:.5rem; }
.sci h3 { font-size:1.9rem; margin-bottom:1rem; }
.sci h4 { font-family:var(--text); font-weight:500; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:1.2rem 0 .5rem; }
.sci p { font-size:.98rem; }
.reco { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.3rem; font-size:.93rem; }
.reco p:last-child { margin:0; }
sup a { text-decoration:none; font-size:.72em; font-weight:500; color:var(--lav-deep); padding:0 .1em; }
.refs { font-size:.82rem; color:var(--ink-soft); padding-left:1.2rem; }
.refs li { margin-bottom:.45rem; }
.refs a { word-break:break-word; }

/* équilibre honnête */
.balance { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:2rem; }
.balance > div { background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.4rem 1.5rem; }
.balance h3 { font-size:1.25rem; }
.balance p, .balance li { font-size:.93rem; }
.balance ul { padding-left:1.1rem; margin:0; }

/* ---------- approche ---------- */
.idea { padding-top:1.6rem; padding-bottom:1.6rem; position:relative; }
.idea h3 { font-size:1.35rem; }
.idea p { font-size:.97rem; margin-bottom:.6rem; }
.note-perso { border-left:2px solid var(--lav); padding:.4rem 0 .4rem 1.2rem; margin-top:2rem; font-size:1rem; }

/* ---------- FAQ ---------- */
.accordion { --bs-accordion-bg:transparent; --bs-accordion-border-color:var(--line); --bs-accordion-btn-focus-box-shadow:none; --bs-accordion-active-bg:transparent; --bs-accordion-active-color:var(--ink); }
.accordion-button { font-family:var(--title); font-size:1.2rem; color:var(--ink); padding:1.2rem 0; background:transparent; }
.accordion-body { padding:0 0 1.4rem; font-size:.96rem; color:var(--ink-soft); }
.accordion-item { border-left:0; border-right:0; border-radius:0 !important; }

/* ---------- téléchargement ---------- */
.dl { text-align:center; overflow:hidden; }
.dl .sun { width:440px; height:440px; left:50%; top:50%; transform:translate(-50%,-50%); opacity:.28; }
.dl .icon { width:112px; height:112px; margin-bottom:1.2rem; }
.req { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.2rem; font-size:.85rem; color:var(--ink-soft); margin-top:1.4rem; padding:0; list-style:none; }

/* ---------- pied de page ---------- */
footer { border-top:1px solid var(--line); padding:3rem 0 6rem; font-size:.85rem; color:var(--ink-soft); }
footer .brand { font-size:1.6rem; color:var(--ink); }
footer a { color:var(--ink-soft); }

/* ---------- univers de l'auteur : onglet fixe à droite ---------- */
.univers { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:1040; display:flex; flex-direction:row-reverse; align-items:center; pointer-events:none; }
.univers > * { pointer-events:auto; }
.univers .handle { writing-mode:vertical-rl; transform:rotate(180deg); background:var(--ink); color:#fff; border:0; border-radius:0 12px 12px 0; padding:1rem .75rem 1rem .65rem; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; display:flex; align-items:center; gap:.6rem; }
.univers .handle img { width:22px; height:22px; border-radius:6px; transform:rotate(180deg); }
.univers .panel { width:0; overflow:hidden; visibility:hidden; transition:width .45s cubic-bezier(.2,.8,.2,1), visibility 0s .45s; background:#fff; border:1px solid var(--line); border-right:0; border-radius:0; box-shadow:-20px 20px 50px -30px rgba(50,40,70,.35); }
.univers.open .panel { width:min(300px, calc(100vw - 60px)); visibility:visible; transition:width .45s cubic-bezier(.2,.8,.2,1); }
.univers .panel-in { width:min(300px, calc(100vw - 60px)); padding:1.2rem 1.2rem .8rem; }
.univers .panel h2 { font-size:1.25rem; margin-bottom:.8rem; }
.univers a.proj { display:flex; gap:.75rem; align-items:center; text-decoration:none; padding:.45rem; border-radius:12px; color:var(--ink); }
.univers a.proj:hover { background:var(--lav-soft); }
.univers a.proj img { width:44px; height:44px; border-radius:11px; flex:none; }
.univers a.proj b { display:block; font-size:.88rem; line-height:1.3; }
.univers a.proj small { display:block; font-size:.74rem; color:var(--muted); line-height:1.35; }

/* apparition au défilement */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } * { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } }

/* images : pas de glisser-déposer ni de menu « enregistrer » sur iOS */
img { -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }

@media (max-width:767px){
  body { font-size:16px; }
  .mac .screen { padding:7px 7px 10px; border-radius:12px 12px 4px 4px; }
  .mac .glass { aspect-ratio:4/3; }
  .shot { height:360px; }
}