/* =====================================================================
   WEB 213 — Page d'accueil
   Sections, maquette du héros, grille tarifaire, FAQ, révélations.
   S'appuie sur tokens.css / base.css / components.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Révélation au défilement
   Les états masqués ne s'appliquent QUE si reveal.js a posé `.js-reveal`
   sur <html>. Sans JavaScript, la page reste entièrement lisible.
   --------------------------------------------------------------------- */
/* reveal.js marque chaque élément à animer d'un attribut `data-reveal-item` —
   y compris le conteneur lui-même quand il n'a pas d'enfants à animer. Un
   seul sélecteur suffit donc, sans `:has()`, et le rendu reste identique
   sur les navigateurs plus anciens. */
.js-reveal [data-reveal-item] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  will-change: opacity, transform;
}

.js-reveal [data-reveal].is-visible [data-reveal-item],
.js-reveal [data-reveal-item].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity .62s var(--ease) calc(var(--i, 0) * 80ms),
    transform .62s var(--ease) calc(var(--i, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   2. Rythme des sections
   --------------------------------------------------------------------- */
.section { padding-block: clamp(56px, 8vw, 108px); }

.section--tinted {
  position: relative;
  background: color-mix(in srgb, var(--brand-500) 5%, transparent);
  border-block: 1px solid var(--border);
}

.container--narrow { max-width: 820px; }

.section__head {
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: clamp(34px, 5vw, 58px);
  text-align: center;
}

.kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
}
html[dir="rtl"] .kicker { letter-spacing: 0; }

.section__head h2 { margin-bottom: 14px; }
.section__head .lede { margin: 0; color: var(--text-soft); font-size: 1.04rem; }

.grad {
  background: linear-gradient(105deg, var(--brand-500) 10%, var(--accent-500) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[dir="rtl"] .grad { background-image: linear-gradient(255deg, var(--brand-500) 10%, var(--accent-500) 90%); }

.btn-lg { min-height: 54px; padding: 15px 30px; font-size: 1.02rem; }
.badge-lg { padding: 8px 16px; font-size: .84rem; }

/* ---------------------------------------------------------------------
   3. Héros
   --------------------------------------------------------------------- */
.hero { padding-block: clamp(34px, 6vw, 78px) clamp(46px, 7vw, 88px); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 5vw, 62px);
  align-items: center;
}

.hero__copy h1 {
  margin: 16px 0 18px;
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem);
  line-height: 1.08;
}

.hero__copy .lede {
  max-width: 52ch;
  margin-bottom: 30px;
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  color: var(--text-soft);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: .88rem;
  color: var(--text-muted);
}
.hero__note > svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---- Maquette de navigateur ---------------------------------------- */
.hero__mock { position: relative; padding-block: 10px; }

.mock-window {
  overflow: hidden;
  border-radius: var(--r-lg);
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transform-origin: center;
}
html[dir="rtl"] .mock-window { transform: perspective(1400px) rotateY(7deg) rotateX(3deg); }

.mock-window__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
}
.mock-window__bar .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}
.mock-window__url {
  flex: 1;
  margin-inline-start: 10px;
  padding: 4px 12px;
  font-size: .72rem;
  color: var(--text-muted);
  text-align: center;
  background: var(--field-bg);
  border-radius: var(--r-full);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-window__body { padding: 18px; }

.mock-shop__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.mock-avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand-500) 14%, transparent);
  color: var(--primary);
}
.mock-avatar .mock-logo { width: 26px; height: 26px; }

.mock-lines { display: grid; gap: 7px; flex: 1; }
.mock-lines i, .mock-line {
  display: block;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--border);
}
.mock-line { margin-top: 7px; }

.mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mock-card {
  padding: 10px;
  border-radius: var(--r-sm);
  background: var(--field-bg);
  border: 1px solid var(--border);
}
.mock-card b { display: block; margin-top: 8px; font-size: .8rem; }
.mock-card em {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  font-style: normal;
  font-weight: 700;
  color: var(--primary);
}
.mock-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-200), var(--brand-400));
}
.mock-thumb--2 { background: linear-gradient(135deg, var(--accent-400), var(--brand-300)); }
.mock-thumb--3 { background: linear-gradient(135deg, var(--brand-300), var(--brand-600)); }
.mock-thumb--4 { background: linear-gradient(135deg, var(--brand-400), var(--accent-500)); }

/* ---- Notification de commande flottante ---------------------------- */
.mock-toast {
  position: absolute;
  inset-inline-start: -26px;
  bottom: -18px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 290px;
  padding: 14px 16px;
  border-radius: var(--r-md);
}
.mock-toast__icon { color: var(--ok-500); flex: 0 0 auto; }
.mock-toast__icon > svg { width: 22px; height: 22px; }
.mock-toast b     { display: block; font-size: .88rem; }
.mock-toast small { display: block; margin-top: 2px; font-size: .76rem; color: var(--text-muted); }
.mock-toast em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: .74rem;
  font-style: normal;
  font-weight: 600;
  color: var(--primary);
}
.mock-toast em > svg { width: 14px; height: 14px; }

/* Flottement continu, désactivé si l'utilisateur préfère moins d'animations */
@keyframes floaty {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -14px, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-float="slow"] { animation: floaty 5.5s ease-in-out infinite alternate; }
}

/* ---------------------------------------------------------------------
   4. Bandeau de chiffres
   --------------------------------------------------------------------- */
.stats-band { padding-bottom: clamp(20px, 4vw, 40px); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0;
  padding: 24px 18px;
  list-style: none;
}
.stats li {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 10px;
  text-align: center;
}
.stats li + li { border-inline-start: 1px solid var(--border); }
.stats__icon { color: var(--primary); margin-bottom: 4px; }
.stats__icon > svg { width: 22px; height: 22px; }
.stats b {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}
.stats small { font-size: .82rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   5. Comment ça marche
   --------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step { position: relative; padding: 26px 22px 24px; }
.step h3 { margin: 14px 0 8px; font-size: 1.06rem; }
.step p  { margin: 0; font-size: .92rem; color: var(--text-soft); }

.step__num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: 13px;
  box-shadow: 0 8px 20px -8px rgba(30, 143, 213, .8);
}

/* Trait de liaison entre les étapes */
.step::after {
  content: "";
  position: absolute;
  top: 46px;
  inset-inline-start: calc(100% + 1px);
  width: 16px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-300), transparent);
}
html[dir="rtl"] .step::after { background: linear-gradient(270deg, var(--brand-300), transparent); }
.steps li:last-child::after { display: none; }

/* ---------------------------------------------------------------------
   6. Fonctionnalités
   --------------------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 18px;
}

.feature {
  padding: 26px 24px;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.feature:hover { transform: translateY(-4px); }
.feature h3 { margin: 16px 0 8px; font-size: 1.04rem; }
.feature p  { margin: 0; font-size: .92rem; color: var(--text-soft); }

.feature__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  color: var(--primary);
  background: color-mix(in srgb, var(--brand-500) 13%, transparent);
  border-radius: 14px;
}
.feature__icon > svg { width: 23px; height: 23px; }

/* ---------------------------------------------------------------------
   7. Tarifs
   --------------------------------------------------------------------- */
.cycle { display: flex; justify-content: center; margin-top: 26px; }

.cycle__switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--glass-bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cycle__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 600;
  font-size: .93rem;
  color: var(--text-soft);
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.cycle__btn:hover { color: var(--text); }
.cycle__btn.is-active {
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: 0 6px 16px -8px rgba(30, 143, 213, .9);
}
.cycle__save {
  padding: 3px 8px;
  font-size: .7rem;
  font-weight: 700;
  border-radius: var(--r-full);
  color: var(--ok-500);
  background: rgba(22, 164, 107, .14);
}
.cycle__btn.is-active .cycle__save { color: #fff; background: rgba(255, 255, 255, .22); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 28px;
}

.plan--featured {
  border-color: var(--brand-400);
  box-shadow: var(--glass-shadow), 0 0 0 2px var(--brand-400) inset;
}

.plan__flag {
  position: absolute;
  top: -13px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: var(--r-full);
  box-shadow: 0 8px 18px -8px rgba(30, 143, 213, .9);
}
html[dir="rtl"] .plan__flag { transform: translateX(50%); }
.plan__flag > svg { width: 13px; height: 13px; }

.plan__name    { margin: 0 0 4px; font-size: 1.22rem; }
.plan__tagline { margin: 0 0 20px; font-size: .88rem; color: var(--text-muted); min-height: 3em; }

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  flex-wrap: wrap;
}
.plan__amount {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plan__unit { font-size: .88rem; font-weight: 600; color: var(--text-muted); }

.plan__sub {
  margin: 0 0 20px;
  font-size: .82rem;
  color: var(--text-muted);
  min-height: 1.4em;
}

.plan__features {
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  display: grid;
  gap: 11px;
}
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--text-soft);
}
.plan__features svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; }
.plan__features .is-on  svg { color: var(--ok-500); }
.plan__features .is-off { color: var(--text-muted); opacity: .65; }
.plan__features .is-off svg { color: var(--text-muted); }

/* ---- Bandeau « compris dans tous les packs » ----------------------- */
.included { margin-top: 26px; padding: 28px 30px; }
.included h3 { margin: 0 0 16px; font-size: 1rem; }
.included ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.included li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .9rem;
  color: var(--text-soft);
}
.included li > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ok-500); }
.included__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .86rem;
  color: var(--text-muted);
}
.included__note > svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }

/* ---------------------------------------------------------------------
   8. FAQ
   --------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; }

.faq__item { overflow: hidden; }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--primary); }

.faq__sign {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  color: var(--primary);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  border-radius: 50%;
  transition: transform var(--t-base);
}
.faq__sign > svg { width: 16px; height: 16px; }
.faq__item[open] .faq__sign { transform: rotate(45deg); }

.faq__answer { padding: 0 22px 20px; }
.faq__answer p { margin: 0; font-size: .95rem; color: var(--text-soft); }

@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__answer { animation: faqOpen .3s var(--ease); }
  @keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------------
   9. Appel à l'action final
   --------------------------------------------------------------------- */
.final-cta { padding-block: clamp(50px, 7vw, 96px); }

.final-cta__box {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  text-align: center;
}
.final-cta__box::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto;
  height: 220px;
  background: radial-gradient(closest-side, var(--blob-1), transparent);
  pointer-events: none;
}
.final-cta__box > * { position: relative; }
.final-cta__box h2 { margin-bottom: 12px; }
.final-cta__box .lede {
  max-width: 54ch;
  margin: 0 auto 28px;
  color: var(--text-soft);
}
.final-cta__login { margin: 18px 0 0; font-size: .9rem; color: var(--text-muted); }
.final-cta__login a { font-weight: 700; }

/* ---------------------------------------------------------------------
   10. Navigation d'ancres dans l'en-tête
   --------------------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav a {
  padding: 9px 12px;
  white-space: nowrap;
  font-size: .91rem;
  font-weight: 600;
  color: var(--text-soft);
  border-radius: var(--r-full);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.site-nav a:hover {
  color: var(--text);
  background: var(--glass-bg-soft);
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   12. Adaptation aux petits écrans
   --------------------------------------------------------------------- */
/* En dessous de 1180 px, la barre devient trop dense : les ancres
   disparaissent au profit des boutons d'action, qui priment. */
@media (max-width: 1180px) {
  .site-nav { display: none; }
}
@media (max-width: 1080px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan--featured { order: -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2)::after { display: none; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { text-align: center; }
  .hero__copy .lede { margin-inline: auto; }
  .hero__actions, .hero__note { justify-content: center; }
  .hero__mock { max-width: 520px; margin-inline: auto; }
  .mock-window,
  html[dir="rtl"] .mock-window { transform: none; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stats li:nth-child(odd) { border-inline-start: 0; }
  .stats li:nth-child(3), .stats li:nth-child(4) {
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .mock-toast { position: static; max-width: none; margin-top: 14px; }
  .cycle__switch { width: 100%; }
  .cycle__btn { flex: 1; justify-content: center; padding-inline: 12px; }
  .included { padding: 24px 20px; }
}

/* ---- Le prix barré d'un pack en promotion ---------------------------- */
/* Les deux prix vivent sur la même ligne que l'unité : « 1 900 DA / mois »
   puis, en plus petit, ce qu'on ne paie pas. */
.plan__was {
  font-size: .92rem;
  color: var(--text-muted);
  text-decoration-thickness: 1.5px;
}
.plan__off {
  padding: 3px 9px;
  font-size: .74rem;
  font-weight: 800;
  color: #fff;
  background: var(--err-500, #E1493F);
  border-radius: var(--r-full);
  white-space: nowrap;
}

/* La règle des 12 mois, sous les trois packs : elle vaut pour tous, elle ne
   doit donc pas être répétée trois fois. */
.plans__year {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 26px 0 0;
  font-size: .96rem;
  font-weight: 600;
  color: var(--text-soft);
}
.plans__year svg { width: 18px; height: 18px; color: var(--primary); }

/* =====================================================================
   Le héros : le téléphone du client

   L'histoire dans l'ordre où elle se vit — d'abord le geste du client, sur
   son écran à lui. Tout ce bloc est décoratif : aucun vrai bouton, aucune
   vraie image à charger, tout est dessiné en CSS.
   ===================================================================== */
.hero--phone .hero__grid { align-items: center; }

.hero__ticks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hero__ticks li { display: flex; gap: 10px; font-size: .95rem; color: var(--text-soft); }
.hero__ticks svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--accent-500); margin-top: 2px; }

.hero__phone-wrap { position: relative; display: grid; place-items: center; }

/* ---- Le téléphone ---- */
.ph {
  width: 300px;
  padding: 11px;
  border-radius: 40px;
  background: #0A1420;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 90px -30px rgba(4, 18, 29, .55);
}
[data-theme="dark"] .ph { box-shadow: 0 40px 90px -28px rgba(0, 0, 0, .75); }

.ph__screen {
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(60% 60% at 15% 5%,  rgba(30, 143, 213, .34) 0%, transparent 62%),
    radial-gradient(70% 70% at 90% 100%, rgba(31, 184, 177, .24) 0%, transparent 70%),
    #08131F;
}
.ph__bar { display: flex; justify-content: space-between; padding: 9px 18px 5px; font-size: .68rem; color: #9FB4C8; }
.ph__shop { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ph__shop b { font-size: .84rem; color: #EAF3FB; }
.ph__logo { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-400), var(--accent-400)); }

/* La photo du produit : un rectangle, et une forme claire au centre. Mieux
   vaut un aplat franc qu'une fausse photo qui ne ressemble à rien. */
.ph__shot { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(140deg, #20364B, #16283A); }
.ph__shot::after { content: ''; position: absolute; inset: 36% 34%; border-radius: 10px; background: rgba(255,255,255,.07); }

.ph__body { padding: 12px 14px 16px; }
.ph__name { display: block; margin-bottom: 4px; font-size: .9rem; color: #EAF3FB; }
.ph__price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 10px; }
.ph__price b { font-size: 1.05rem; font-weight: 800; color: var(--brand-400); }
.ph__price s { font-size: .74rem; color: #7D93A8; }

.ph__chips { display: flex; gap: 5px; margin-bottom: 11px; }
.ph__chips i {
  min-width: 26px; padding: 4px 7px;
  font-size: .68rem; font-style: normal; font-weight: 700; text-align: center;
  color: #B8CBDD; border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
}
.ph__chips i.is-on { color: var(--brand-400); border-color: var(--brand-400); }

.ph__field { display: block; height: 30px; margin-bottom: 7px; border-radius: 8px; background: rgba(255,255,255,.06); }
.ph__buy {
  display: block; padding: 10px;
  font-size: .8rem; font-weight: 800; text-align: center;
  color: #04121D;
  background: linear-gradient(95deg, var(--brand-400), var(--accent-400));
  border-radius: var(--r-full);
}

/* La notification : ce que la vendeuse reçoit pendant qu'elle dort. */
.ph-toast {
  position: absolute; inset-inline-end: -22px; bottom: 52px;
  display: flex; align-items: center; gap: 11px;
  max-width: 250px; padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ph-toast__ic {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(22, 164, 107, .16); color: var(--ok-600, #0B6B46);
}
[data-theme="dark"] .ph-toast__ic { color: #67E3AE; }
.ph-toast__ic svg { width: 19px; height: 19px; }
.ph-toast b { display: block; font-size: .86rem; }
.ph-toast small { font-size: .78rem; color: var(--text-muted); }

/* =====================================================================
   La boutique, en grand
   ===================================================================== */
.sc-window {
  max-width: 980px; margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-elevated);
  box-shadow: 0 30px 80px -34px rgba(8, 30, 56, .34);
}
.sc-window__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}
.sc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.sc-url {
  flex: 1; max-width: 320px;
  margin-inline-start: 10px; padding: 5px 12px;
  font-size: .78rem; text-align: center; color: var(--text-muted);
  background: var(--bg); border-radius: var(--r-full);
}

/* Les couleurs de l'ambiance « rose poudré », telles qu'elles existent
   vraiment dans Palette.php — pas une teinte inventée pour la maquette. */
.sc-shop {
  --sc-accent: #DB5C8A;
  background:
    radial-gradient(60% 70% at 12% 8%,   rgba(240, 150, 180, .30) 0%, transparent 60%),
    radial-gradient(70% 80% at 88% 100%, rgba(248, 190, 210, .34) 0%, transparent 70%),
    var(--bg);
}
.sc-shop__bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.sc-shop__logo { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; background: var(--sc-accent); }
.sc-shop__bar b { font-size: .98rem; }
.sc-shop__bar small { margin-inline-start: auto; font-size: .78rem; color: var(--text-muted); }

.sc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 20px; }
.sc-card { overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); }
.sc-thumb { display: block; aspect-ratio: 1; }
.sc-thumb--1 { background: linear-gradient(135deg, #F3C9D6, #E6A9BE); }
.sc-thumb--2 { background: linear-gradient(135deg, #D9E4F0, #B7C8DE); }
.sc-thumb--3 { background: linear-gradient(135deg, #F2DFC9, #E0C09A); }
.sc-thumb--4 { background: linear-gradient(135deg, #D4E9E2, #AACFC4); }
.sc-card__body { display: block; padding: 10px 12px 14px; }
.sc-card__body b { display: block; font-size: .84rem; }
.sc-card__body em { font-style: normal; font-weight: 800; font-size: .92rem; color: var(--sc-accent); }
.sc-card__btn {
  display: block; margin-top: 8px; padding: 7px;
  font-size: .78rem; font-weight: 700; text-align: center;
  color: #fff; background: var(--sc-accent); border-radius: var(--r-full);
}

/* =====================================================================
   D'où viennent les ventes
   ===================================================================== */
.sb-dash { max-width: 900px; margin-inline: auto; padding: 22px; border-radius: var(--r-lg); }
.sb-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.sb-tile { padding: 14px 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); }
.sb-tile b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.sb-tile small { font-size: .8rem; color: var(--text-muted); }

/* Les mêmes teintes que le vrai tableau de bord : elles ont été vérifiées
   pour rester distinctes en daltonisme, et chaque tuile écrit son nom. */
.sb-dot { display: block; width: 10px; height: 10px; margin-bottom: 7px; border-radius: 50%; background: var(--sb, var(--text-muted)); }
.sb-dot--facebook  { --sb: #2F6FD0; }
.sb-dot--instagram { --sb: #C0398C; }
.sb-dot--tiktok    { --sb: #C97A16; }
.sb-dot--other     { --sb: #1E9E8A; }
[data-theme="dark"] .sb-dot--facebook  { --sb: #4487E2; }
[data-theme="dark"] .sb-dot--instagram { --sb: #D0619C; }
[data-theme="dark"] .sb-dot--tiktok    { --sb: #BD8324; }
[data-theme="dark"] .sb-dot--other     { --sb: #2BA995; }

.sb-chart { height: 120px; padding: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); }
.sb-chart svg { display: block; width: 100%; height: 100%; }
.sb-area { stroke: none; }
.sb-line {
  fill: none; stroke: var(--primary); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  /* Le dessin est étiré : sans cela le trait s'épaissirait avec lui. */
  vector-effect: non-scaling-stroke;
}
.sb-peak { fill: var(--primary); }

@media (max-width: 900px) {
  .hero__phone-wrap { margin-top: 30px; }
  .ph-toast { inset-inline-end: 0; bottom: 20px; }
  .sc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ph { width: 100%; max-width: 300px; }
  .ph-toast { position: static; max-width: none; margin-top: 16px; }
  .sb-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   La barre du haut sur petit écran

   À 390 px la barre débordait. On récupère la largeur là où elle ne
   coûte rien — l'espacement, le globe du sélecteur de langue, et deux
   pixels sur le bouton rond. Rien n'est caché : les réglages restent
   tous accessibles au pouce.
   ===================================================================== */
@media (max-width: 560px) {
  .site-header .header-actions { gap: 4px; }
  /* Le globe est redondant : « FR » dit déjà que c'est la langue. */
  .site-header .lang-switch__btn > svg:first-child { display: none; }
  .site-header .lang-switch__btn { padding-inline: 9px; }
  .site-header .theme-toggle { width: 34px; min-height: 34px; }
}

/* La bulle « nouvelle commande » sort du téléphone par construction :
   c'est ce qui lui donne son relief. Mais entre 980 et 1100 px, ces
   22 px de débord poussaient la page de deux pixels sur la droite — et
   une page qui glisse horizontalement sur un ordinateur portable fait
   mauvais effet. On la rentre. */
@media (max-width: 1100px) {
  .ph-toast { inset-inline-end: 0; }
}

/* Entre 580 et 1280 px, le menu d'ancres et les quatre réglages tiennent
   encore, mais pas avec « Créer ma boutique » en toutes lettres : le
   libellé court prend le relais plus tôt qu'avant. */
@media (max-width: 1280px) {
  .page-landing .lbl-full  { display: none; }
  .page-landing .lbl-short { display: inline; }
}

/* Sous 400 px — les téléphones les plus étroits encore en service — la
   barre du haut demande un dernier dégraissage. Rien n'est retiré : on
   reprend les pixels sur les marges, pas sur les boutons. */
@media (max-width: 400px) {
  .site-header .bar { padding-inline: 8px; gap: 8px; }
  .site-header .header-actions { gap: 3px; }
  .site-header .header-actions > .btn { padding-inline: 10px; font-size: .82rem; }
  .site-header .brand .logo { height: 22px; }
}

/* Sous 360 px — un vieil écran de 320, encore en circulation ici — même
   le libellé court du bouton principal ne tient plus à côté des quatre
   réglages. Le bouton garde son icône seule : il reste la cible la plus
   grande de la barre, et son adresse ne change pas. */
@media (max-width: 360px) {
  .site-header .header-actions > .btn .lbl-short { display: none; }
  .site-header .header-actions > .btn::after {
    content: "+";
    font-size: 1.15rem;
    line-height: 1;
  }
  .site-header .header-actions > .btn { padding-inline: 12px; }
}

/* Sous 360 px, la carte de pack gardait un rembourrage de grand écran et
   poussait la page de quelques pixels. Les cartes sont déjà empilées à
   cette largeur : il ne reste qu'à resserrer. */
@media (max-width: 420px) {
  .plan { padding: 20px 16px; min-width: 0; }
  .plans { gap: 14px; }
  /* Un élément de grille ne descend pas sous la largeur de son contenu
     tant qu'on ne le lui dit pas : sans `min-width: 0`, une carte de pack
     reste plus large que l'écran et pousse toute la page. */
  .plan > * { min-width: 0; }
  /* Un bouton d'appel à l'action tient sur deux lignes plutôt que de
     sortir de l'écran. */
  .btn-lg { white-space: normal; }
}