/* base.css — système commun v4 (frame, palette, typo, header, composants).
   Fidèle à la maquette Canva : fond clair pointillé, indigo/lavande, titres Fraunces,
   mots-vedette en cursive (Yellowtail), pas d'or. */

:root{
  --indigo:#5A618F;        /* indigo principal (titres, header) */
  --indigo-deep:#3E4470;   /* indigo foncé (gras, accents) */
  --indigo-ink:#23243a;
  --lav:#AEAFD5;           /* lavande */
  --lav-soft:#cfd0e8;
  --lav-bg:#e8e8f3;        /* fond cartes/boutons */
  --rose:#E94B8A;          /* accent rose (annotations, toggles actifs) */
  --paper:#f4f3f9;         /* fond écran clair */
  --paper-2:#eceaf4;
  --violet-1:#5b5aa0;      /* écran intro animé */
  --violet-2:#3f3d77;
  --violet-3:#2c2a5a;
  --ink:#3a3f5e;
  --muted:#7e84a8;
  --radius:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at center, #cfd0e6 1.1px, transparent 1.4px) 0 0/22px 22px,
    linear-gradient(160deg,#eef0f8,#e6e6f2 60%,#e9e7f3);
  background-attachment:fixed;
  min-height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:28px 16px;
  -webkit-font-smoothing:antialiased;
}

/* ===== Frame téléphone ===== */
.phone{
  width:390px;max-width:100%;
  background:#0c0d14;
  border-radius:54px;
  padding:13px;
  box-shadow:
    0 2px 0 1px #25263a inset,
    0 40px 80px -30px rgba(35,36,58,.55),
    0 12px 30px -12px rgba(35,36,58,.35);
  position:relative;
}
.phone::before{ /* encoche — collée au bord haut de l'écran */
  content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:118px;height:24px;background:#0c0d14;border-radius:0 0 15px 15px;z-index:30;
}
.screen{
  position:relative;
  border-radius:42px;
  overflow:hidden;
  height:min(78vh,780px);
  padding-top:30px;            /* dégage le contenu sous l'encoche */
  /* intérieur = dégradé lisse (les pointillés sont le fond du board, hors téléphone) */
  background:
    radial-gradient(120% 80% at 78% 8%, #fbfbfe 0%, transparent 55%),
    linear-gradient(155deg,#e7e7f1,#eef0f8 45%,#f4f4fa);
  display:flex;flex-direction:column;
}
/* En vrai mobile : plein écran, sans frame */
@media (max-width:480px){
  body{padding:0;background:#0c0d14}
  .phone{width:100%;height:100dvh;border-radius:0;padding:0}
  .phone::before{display:none}
  .screen{border-radius:0;height:100dvh;padding-top:env(safe-area-inset-top,0)}
}

/* zone scrollable interne */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0}

/* ===== Header ===== */
.hdr{
  position:relative;z-index:10;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  height:58px;padding:0 16px;
}
.hdr__brand{
  font-family:"Fraunces",serif;font-weight:600;font-size:15px;letter-spacing:.01em;
  color:var(--indigo-deep);
}
.hdr--violet .hdr__brand{color:#fff}
.hdr__back{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:#dcdcec;color:var(--indigo-deep);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:16px;transition:background .15s,transform .15s;
}
.hdr__back:hover{background:#cbcbe3;transform:translateY(-50%) scale(1.06)}
.hdr--violet .hdr__back{background:rgba(255,255,255,.18);color:#fff}

/* ===== Typo titres ===== */
.h-kicker{font-family:"Fraunces",serif;font-style:italic;font-weight:600;color:var(--indigo-deep)}
.h-script{font-family:"Pacifico",cursive;font-weight:400;color:var(--indigo)}
.h-display{font-family:"Fraunces",serif;font-weight:600;color:var(--indigo-deep)}

/* ===== Boutons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Inter",sans-serif;font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:99px;border:none;cursor:pointer;
  text-decoration:none;transition:transform .15s var(--ease),box-shadow .2s,filter .2s;
}
.btn--solid{background:var(--indigo-deep);color:#fff;box-shadow:0 12px 26px -12px rgba(63,61,119,.7)}
.btn--solid:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn--ghost{background:#dadaec;color:var(--indigo-deep)}
.btn--ghost:hover{background:#cdcde6}
.btn--outline{background:transparent;border:1.5px solid var(--lav);color:var(--indigo-deep)}
.btn--block{display:flex;width:100%}

.link{color:var(--indigo);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:none;font-size:14px;font-family:inherit}

/* badge placeholder de langue non traduite */
.lang-ribbon{
  position:absolute;top:0;left:0;right:0;z-index:25;
  background:rgba(233,75,138,.92);color:#fff;font-size:11px;font-weight:600;
  text-align:center;padding:5px 10px;letter-spacing:.02em;
}
.lang-ribbon + .hdr{margin-top:26px}

.note-ph{font-size:11px;color:var(--muted);font-style:italic;margin-top:6px}

/* utilitaire pour masquer la barre démo en mobile réel si besoin */
.center{display:flex;flex-direction:column;align-items:center;text-align:center}

/* chevron « scroll down » flottant, fixé en bas de l'écran, semi-transparent */
.scrolldown{position:absolute;left:50%;bottom:14px;z-index:40;
  width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
  color:var(--indigo-deep);background:rgba(255,255,255,.6);backdrop-filter:blur(6px);
  box-shadow:0 6px 18px -8px rgba(40,38,70,.5);
  transition:opacity .3s ease;animation:bob-x 1.7s ease-in-out infinite}
.scrolldown--hidden{opacity:0;pointer-events:none}
.scrolldown--bar{bottom:50px}                 /* au-dessus de la barre démo (grille) */
.screen--violet .scrolldown{color:#fff;background:rgba(255,255,255,.2)}
@keyframes bob-x{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}