/* ═══════════════════════════════════════════════════════════════════════════
   BoutiqueOuf — site de présentation (boutiqueouf.com)

   Rien n'est une capture d'écran : les vues de l'application sont DESSINÉES en
   HTML/CSS, donc nettes à n'importe quelle définition. Les seules images sont
   les vraies photos des articles de la boutique.
   Fond clair et blocs de couleur douce, pas de grand aplat violet.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --violet: #6B21A8;
  --violet-clair: #A855F7;
  --profond: #4C1D95;
  --nuit: #1C1430;
  --pale: #F3E8FF;
  --vert: #2E8B3C;
  --or: #D9A441;
  --rose: #D52271;
  --bleu: #2F6FED;

  /* Les fonds doux des blocs, dans l'esprit de la référence. */
  --sable: #E8DFD3;
  --pierre: #DCDEE0;
  --bleu-gris: #C3CEDA;
  --vert-fonce: #104B4B;
  --rose-pale: #F5E0E0;
  --gris-clair: #EDEDEC;
  --lilas: #E7DCFA;

  --encre: #1B1230;
  --encre-douce: #5B5470;
  --trait: #E8E3F2;
  --fond: #FFFFFF;
  --fond-doux: #F8F7F4;

  --large: 1180px;
  --r: 18px;
  --r-grand: 28px;
  --ombre: 0 2px 10px rgba(27, 18, 48, .05), 0 12px 32px rgba(27, 18, 48, .07);

  --titre: 'Figtree', 'Nunito', system-ui, sans-serif;
  --texte: 'Nunito', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; font-family: var(--texte); color: var(--encre);
  background: var(--fond); -webkit-font-smoothing: antialiased;
  line-height: 1.6; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--titre); margin: 0; letter-spacing: -.03em; line-height: 1.1; font-weight: 800; }
.conteneur { width: min(100% - 40px, var(--large)); margin-inline: auto; }

/* ─────────────────────────── Briques ─────────────────────────── */

.pilule {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--titre); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--violet); background: var(--pale); padding: 7px 14px; border-radius: 999px;
}
.pilule::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--violet-clair); }

.etiquette {
  display: inline-block; font-family: var(--titre); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce);
  border: 1px solid #D9D3E6; border-radius: 999px; padding: 8px 16px; background: #fff;
}
.etiquette-claire { color: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--titre); font-weight: 700; font-size: .96rem;
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap; cursor: pointer;
}
.bouton-plein { background: var(--violet); color: #fff; box-shadow: 0 8px 20px rgba(107, 33, 168, .28); }
.bouton-plein:hover { background: #7C2FBD; transform: translateY(-1px); }
.bouton-clair { background: #fff; color: var(--encre); border-color: #DCD5EA; box-shadow: 0 6px 18px rgba(27, 18, 48, .07); }
.bouton-clair:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }
.bouton-contour { border-color: var(--violet); color: var(--violet); background: transparent; }
.bouton-contour:hover { background: var(--pale); }
.bouton-grand { padding: 16px 30px; font-size: 1.05rem; }

.mot { font-family: var(--titre); font-weight: 800; font-size: 1.28rem; letter-spacing: -.03em; }
.mot-b { color: var(--encre); }
.mot-o { color: var(--violet); }

.jeton { font-family: var(--titre); font-size: 10px; font-weight: 700; font-style: normal; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.jeton-vert { background: #E3F5E6; color: #1F6E2B; }
.jeton-bleu { background: #E2E7FD; color: #27499C; }
.jeton-or { background: #FDF0DC; color: #9A6A12; }

/* Les petites bulles posées sur les visuels. */
.bulle {
  position: absolute; z-index: 4; background: #fff; color: var(--encre);
  font-family: var(--titre); font-weight: 700; font-size: .8rem;
  padding: 9px 15px; border-radius: 999px; box-shadow: 0 10px 26px rgba(27, 18, 48, .18);
}
.bulle-lien { left: 24px; bottom: 24px; color: var(--encre-douce); font-weight: 600; }
.bulle-duree { right: 24px; top: 24px; }
.bulle-vert { right: 24px; bottom: 24px; background: var(--vert); color: #fff; }
.bulle-ia { left: 18px; bottom: 18px; }

/* ─────────────────────────── En-tête ─────────────────────────── */

.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.entete.colle { border-bottom-color: var(--trait); box-shadow: 0 4px 20px rgba(27, 18, 48, .06); }
.entete-rangee { display: flex; align-items: center; gap: 30px; height: 76px; }
.marque { display: flex; align-items: center; gap: 10px; }
.marque-ico { width: 36px; height: 36px; border-radius: 11px; }

.nav { display: flex; gap: 26px; margin-right: auto; }
.nav a {
  font-family: var(--titre); font-weight: 600; font-size: .95rem; white-space: nowrap;
  color: var(--encre-douce); padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a:hover { color: var(--encre); border-bottom-color: var(--violet); }

.entete-actions { display: flex; align-items: center; gap: 16px; }
.entete-cta { padding: 11px 20px; font-size: .92rem; }

.langue { position: relative; }
.langue-bouton {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--trait); border-radius: 999px;
  padding: 7px 12px 7px 9px; font-family: var(--titre); font-weight: 700; font-size: .88rem;
  color: var(--encre); transition: border-color .2s ease;
}
.langue-bouton:hover { border-color: var(--violet-clair); }
.langue-bouton .chev { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.langue.ouverte .chev { transform: rotate(180deg); }

.drapeau { width: 22px; height: 16px; border-radius: 3px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(27, 18, 48, .12); }
.drapeau svg { width: 100%; height: 100%; display: block; }

.langue-liste {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  list-style: none; margin: 0; padding: 6px; min-width: 190px;
  background: #fff; border: 1px solid var(--trait); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(27, 18, 48, .18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.langue.ouverte .langue-liste { opacity: 1; visibility: visible; transform: none; }
.langue-liste button {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  background: none; border: 0; border-radius: 10px; padding: 9px 10px;
  font-family: var(--titre); font-weight: 600; font-size: .92rem; color: var(--encre); text-align: left;
}
.langue-liste button:hover { background: var(--pale); }
.langue-liste .lg-nom { flex: 1; }
.langue-liste .coche { fill: none; stroke: var(--violet); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.langue-liste button[aria-selected="true"] .coche { opacity: 1; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { width: 22px; height: 2px; background: var(--encre); border-radius: 2px; }
.nav-mobile { display: none; flex-direction: column; gap: 2px; padding: 8px 20px 20px; background: #fff; border-top: 1px solid var(--trait); }
.nav-mobile.ouvert { display: flex; }
.nav-mobile a { font-family: var(--titre); font-weight: 700; padding: 12px 0; color: var(--encre); }
.nav-mobile .bouton { margin-top: 10px; }

/* ─────────────────────────── Héro ─────────────────────────── */

/* LA FIN DU HÉRO.
   Le bloc teinté qui s'arrêtait net sur un trait faisait une CASSURE (JM, 20/10 :
   « une transition qui n'est pas propre »). Le héro fond maintenant vers le blanc sur
   son dernier tiers, et deux halos de couleur derrière les cartes lui donnent sa
   profondeur : la limite se sent, elle ne se voit plus. */
.hero {
  position: relative; overflow: hidden; padding: 62px 0 0;
  background: linear-gradient(180deg, #F1ECFA 0%, #F5F0FB 52%, #FFFFFF 100%);
}
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 680px; height: 680px; left: -220px; top: -140px; background: radial-gradient(circle, rgba(168, 85, 247, .22), transparent 64%); }
.hero::after { width: 600px; height: 600px; right: -180px; top: 60px; background: radial-gradient(circle, rgba(213, 34, 113, .14), transparent 64%); }
.hero-haut { text-align: center; max-width: 1080px; position: relative; z-index: 5; }
.hero-titre { font-size: clamp(2.2rem, 5vw, 3.7rem); letter-spacing: -.045em; line-height: 1.04; margin: 24px auto 0; }
/* Le mot en italique, comme sur la référence : une serif, en dégradé violet. */
.hero-titre em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -.01em; padding-right: .06em;
  background: linear-gradient(100deg, #7C3AED 0%, #A855F7 45%, #D8569E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sous { margin: 22px auto 0; font-size: 1.1rem; color: var(--encre-douce); max-width: 62ch; line-height: 1.6; }
.hero-actions { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

/* ── La scène : quatre cartes qui se poussent ── */

.scene {
  position: relative; perspective: 1900px; margin-top: 54px; height: 452px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
}

.pcarte {
  position: absolute; top: 0; left: 50%; width: 660px; margin-left: -330px;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 34px 74px rgba(27, 18, 48, .26), 0 0 0 1px rgba(27, 18, 48, .05);
  transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .6s ease;
  will-change: transform; transform-style: preserve-3d;
}
/* La carte du milieu, celle de gauche, celle de droite — plus basse — et celle
   qui attend hors champ. À chaque onglet, tout le monde avance d'un cran. */
/* Les cartes NE SE TOUCHENT PAS : il reste un vide entre celle du milieu et
   ses voisines, sinon on ne voit plus celles qui suivent. La droite est posée un
   cran plus bas. Les deux attentes, à gauche et à droite, sont invisibles : c'est
   de l'une d'elles que sort la carte suivante, selon le sens de marche. */
.pl-c { transform: translate3d(0, 0, 0) scale(1); opacity: 1; z-index: 4; }
.pl-g { transform: translate3d(-600px, 14px, 0) scale(.72) rotateY(16deg); opacity: 1; z-index: 2; }
.pl-d { transform: translate3d(600px, 46px, 0) scale(.72) rotateY(-16deg); opacity: 1; z-index: 3; }
.pl-hd { transform: translate3d(1180px, 86px, 0) scale(.62) rotateY(-22deg); opacity: 0; z-index: 1; }
.pl-hg { transform: translate3d(-1180px, 10px, 0) scale(.62) rotateY(22deg); opacity: 0; z-index: 1; }
.pl-sg { transform: translate3d(-1020px, 4px, 0) scale(.66) rotateY(20deg); opacity: 0; z-index: 1; }
.pl-sd { transform: translate3d(1020px, 62px, 0) scale(.66) rotateY(-20deg); opacity: 0; z-index: 1; }

.mk-barre { display: flex; align-items: center; gap: 6px; padding: 12px 15px; background: #F3F0F8; border-bottom: 1px solid #E8E3F2; }
.mk-barre i { width: 9px; height: 9px; border-radius: 50%; background: #D7D0E4; }
.mk-url {
  margin-left: 14px; flex: 1; background: #fff; border-radius: 999px; padding: 5px 14px;
  font-size: 11px; color: #8E86A3; font-family: var(--titre); font-weight: 600;
}

.pc-corps { display: flex; height: 376px; }
.pc-gauche { position: relative; width: 45%; flex: none; overflow: hidden; background: #EFEAF7; }
.pc-gauche img { width: 100%; height: 100%; object-fit: cover; }
.pc-promo {
  position: absolute; inset: auto 0 0 0; padding: 26px 18px 16px; color: #fff;
  background: linear-gradient(0deg, rgba(8, 3, 18, .86), transparent);
}
.pc-promo span { display: block; font-family: var(--titre); font-size: 9px; letter-spacing: .2em; font-weight: 700; opacity: .9; }
.pc-promo b { font-family: var(--titre); font-size: 16px; font-weight: 800; }

.pc-droite { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; min-width: 0; }
.pc-tete { font-family: var(--titre); font-weight: 800; font-size: 17px; display: flex; flex-direction: column; }
.pc-tete small { font-weight: 600; font-size: 9px; letter-spacing: .18em; color: var(--rose); }
.pc-chips { display: flex; gap: 6px; margin: 12px 0 10px; }
.pc-chips span { font-family: var(--titre); font-size: 11px; font-weight: 700; color: #7E7691; background: #F4F1FA; border-radius: 999px; padding: 5px 11px; }
.pc-chips .on { background: var(--rose); color: #fff; }
.pc-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-grille figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; height: 104px; }
.pc-grille img { width: 100%; height: 100%; object-fit: cover; }
.pc-grille figcaption {
  position: absolute; inset: auto 0 0 0; padding: 16px 9px 7px; color: #fff;
  background: linear-gradient(0deg, rgba(8, 3, 18, .8), transparent);
  font-family: var(--titre); font-weight: 800; font-size: 12px;
}
.pc-grille figcaption i { font-style: normal; font-size: 8px; opacity: .85; }

.pc-fiche { justify-content: center; gap: 10px; align-items: flex-start; }
.pc-titre { font-family: var(--titre); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.pc-prix { font-family: var(--titre); font-weight: 800; font-size: 26px; color: var(--rose); letter-spacing: -.02em; }
.pc-prix i { font-style: normal; font-size: 12px; }
.pc-tailles { display: flex; gap: 7px; }
.pc-tailles span {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
  border: 1.4px solid #E6E0F1; font-family: var(--titre); font-size: 12px; font-weight: 700; color: #6E6686;
}
.pc-tailles .on { background: var(--violet); border-color: var(--violet); color: #fff; }
.pc-stock { font-size: 12px; color: #847C99; }
.pc-action { margin-top: 6px; background: var(--violet); color: #fff; font-family: var(--titre); font-weight: 700; font-size: 13px; padding: 11px 20px; border-radius: 999px; }

.pc-video .pc-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .92);
}
.pc-video .pc-play::after {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-left: 15px solid var(--violet); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.pc-duree { position: absolute; top: 12px; left: 12px; background: rgba(8, 3, 18, .66); color: #fff; font-family: var(--titre); font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.pc-outils { display: flex; gap: 8px; margin: 14px 0 16px; }
.pc-outils span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--titre); font-size: 10px; font-weight: 700; color: #4A4262; }
.pc-outils i { width: 38px; height: 38px; border-radius: 12px; display: block; }
.pc-outils .o1 { background: #FDE2EC; } .pc-outils .o2 { background: #E6DEFB; }
.pc-outils .o3 { background: #E2E7FD; } .pc-outils .o4 { background: #FBE5DC; }
.pc-sstitre { font-family: var(--titre); font-weight: 800; font-size: 13px; margin-bottom: 9px; }
.pc-rouleau { display: flex; gap: 8px; }
.pc-rouleau figure { position: relative; margin: 0; width: 72px; height: 104px; border-radius: 11px; overflow: hidden; }
.pc-rouleau img { width: 100%; height: 100%; object-fit: cover; }
.pc-rouleau span { position: absolute; left: 6px; bottom: 6px; background: rgba(8, 3, 18, .66); color: #fff; font-family: var(--titre); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 999px; }

.pc-chat { gap: 7px; background: #FBF9FE; }
.pc-tete-oufy { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; }
.pc-tete-oufy img { width: 26px; height: 26px; border-radius: 8px; }
.pc-tete-oufy .pt { width: 7px; height: 7px; border-radius: 50%; background: #35C759; }
.bl { max-width: 84%; padding: 9px 13px; font-size: 12.5px; border-radius: 15px; line-height: 1.35; }
.bl-cli { align-self: flex-end; background: linear-gradient(120deg, var(--violet), #9333EA); color: #fff; border-bottom-right-radius: 5px; }
.bl-ouf { align-self: flex-start; background: #fff; border: 1px solid #EFEAF8; border-bottom-left-radius: 5px; }
.pc-saisie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1.4px solid #E9E1F7; border-radius: 999px; padding: 9px 14px; color: #A49EB6; font-size: 12px; }
.pc-saisie i { width: 22px; height: 22px; border-radius: 50%; background: var(--violet); display: block; }

/* ── Le carrousel ── */

.carrousel { position: relative; z-index: 6; padding-bottom: 44px; max-width: 760px; }
.onglets { display: flex; gap: 4px; padding: 5px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); border: 1px solid rgba(107, 33, 168, .12); border-radius: 999px; box-shadow: 0 10px 30px rgba(107, 33, 168, .10); }
.onglet {
  position: relative; flex: 1; overflow: hidden; cursor: pointer; min-width: 0;
  border: 0; background: transparent; border-radius: 999px; padding: 11px 6px;
  font-family: var(--titre); font-weight: 700; font-size: .92rem;
  color: var(--encre-douce); transition: background-color .2s ease;
}
.onglet span { position: relative; z-index: 1; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onglet:hover { color: var(--encre); }
/* L'onglet actif : une pilule blanche posée sur la barre, le libellé en violet, et le
   temps qui s'écoule sur un TRAIT fin en dégradé sous le mot. Le remplissage noir
   d'avant était jugé lourd (JM, 20/10 : « plus joli, plus cool, plus propre »). */
.onglet.actif { color: var(--violet); background: #fff; box-shadow: 0 6px 18px rgba(107, 33, 168, .16), 0 0 0 1px rgba(107, 33, 168, .10); }
.jauge { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 3px; z-index: 0; border-radius: 999px; background: linear-gradient(90deg, #7C3AED, #D8569E); transform: scaleX(0); transform-origin: left center; opacity: 0; }
.onglet.actif .jauge { opacity: 1; animation: remplir 6.5s linear forwards; }
.carrousel.en-pause .onglet.actif .jauge { animation-play-state: paused; }
@keyframes remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.carrousel-bas { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.carrousel-txts { display: grid; flex: 1; }
.ctxt { grid-area: 1 / 1; color: var(--encre-douce); font-size: 1.02rem; line-height: 1.5; opacity: 0; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease; }
.ctxt-on { opacity: 1; transform: none; }
.pause {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--trait); background: #fff; color: var(--encre);
  display: grid; place-items: center; transition: border-color .2s ease, background .2s ease;
}
.pause:hover { border-color: var(--violet); background: var(--pale); }
.pause svg { fill: currentColor; }
.pause .ico-play { display: none; }
.pause[aria-pressed="true"] .ico-pause { display: none; }
.pause[aria-pressed="true"] .ico-play { display: block; }

/* ─────────────────────────── Chiffres ─────────────────────────── */

/* Claire, pas noire : le fond sombre coupait la page en deux. */
/* La bande des chiffres est refaite plus bas, au bloc « LA BANDE DES CHIFFRES ». */

/* ─────────────────────────── Sections ─────────────────────────── */

.section { padding: 86px 0; }
.section-douce { background: var(--fond-doux); }
.section-tete { max-width: 56ch; margin-bottom: 52px; }
/* en ch, la mesure se ferait sur le conteneur (16 px) et non sur le titre : trop etroit. */
.section-tete-large { max-width: 620px; }
.section-centre { max-width: 46ch; margin-inline: auto; text-align: center; }
.section-tete h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 16px 0 0; }
.section-tete p { margin-top: 14px; color: var(--encre-douce); font-size: 1.06rem; }

/* ── Les blocs alternés : visuel d'un côté, texte de l'autre ── */

.duo { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.duo + .duo { margin-top: 32px; }
.duo-inverse .duo-visuel { order: 2; }
.duo-inverse .duo-texte { order: 1; }
.duo-visuel {
  position: relative; margin: 0; border-radius: var(--r-grand);
  padding: 46px; display: grid; place-items: center; min-height: 420px; overflow: hidden;
}
.fond-sable { background: var(--sable); }
.fond-rose { background: var(--rose-pale); }
.fond-bleu { background: var(--bleu-gris); }
.fond-vert { background: var(--vert-fonce); }
.fond-pierre { background: var(--pierre); }
.fond-gris { background: var(--gris-clair); }
.fond-lilas { background: var(--lilas); }
.duo-texte h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-bottom: 14px; }
.duo-texte p { color: var(--encre-douce); font-size: 1.04rem; }

.mk { background: #fff; border-radius: 16px; box-shadow: 0 20px 48px rgba(27, 18, 48, .18); overflow: hidden; width: 100%; max-width: 420px; }

/* Le visuel « ta boutique » */
.mkb-tete { display: flex; align-items: center; gap: 10px; padding: 14px; background: linear-gradient(120deg, #B81B60, #D52271 60%, #E84B8E); color: #fff; }
.mkb-logo { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; background: #fff; flex: none; }
.mkb-logo img { width: 100%; height: 100%; object-fit: cover; }
.mkb-nom { font-family: var(--titre); font-weight: 800; font-size: 14px; display: flex; flex-direction: column; }
.mkb-nom small { font-weight: 600; font-size: 8px; letter-spacing: .18em; opacity: .86; }
.mkb-heros { height: 168px; overflow: hidden; }
.mkb-heros img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.mkb-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 10px; }
.mkb-grille figure { position: relative; margin: 0; height: 88px; border-radius: 10px; overflow: hidden; }
.mkb-grille img { width: 100%; height: 100%; object-fit: cover; }
.mkb-grille figcaption { position: absolute; inset: auto 0 0 0; padding: 14px 7px 6px; color: #fff; background: linear-gradient(0deg, rgba(8, 3, 18, .8), transparent); font-family: var(--titre); font-weight: 800; font-size: 10px; }
.mkb-grille figcaption i { font-style: normal; font-size: 7px; opacity: .85; }

/* Le visuel « l'Atelier » */
.mk-atelier { padding: 14px; }
.mka-haut { display: flex; gap: 12px; }
.mka-apercu { position: relative; width: 46%; height: 164px; border-radius: 12px; overflow: hidden; flex: none; }
.mka-apercu img { width: 100%; height: 100%; object-fit: cover; }
.mka-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.mka-play::after { content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); border-left: 12px solid var(--violet); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.mka-reglages { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.mka-chip { font-family: var(--titre); font-size: 10px; font-weight: 700; color: #6E6686; background: #F4F1FA; border-radius: 999px; padding: 5px 10px; }
.mka-chip.on { background: var(--violet); color: #fff; }
.mka-curseur { width: 100%; height: 5px; border-radius: 999px; background: #EEEAF7; margin-top: 10px; position: relative; }
.mka-curseur i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 999px; background: var(--violet-clair); }
.mka-curseur-2 i { width: 34%; background: var(--rose); }
.mka-piste { position: relative; display: flex; gap: 5px; margin-top: 14px; padding: 8px; background: #F6F3FB; border-radius: 10px; }
.mka-clip { width: 25%; height: 44px; border-radius: 6px; overflow: hidden; display: block; }
.mka-clip img { width: 100%; height: 100%; object-fit: cover; }
.mka-tete-lecture { position: absolute; left: 38%; top: 4px; bottom: 4px; width: 2px; background: var(--violet); border-radius: 2px; }
.mka-tete-lecture::before { content: ''; position: absolute; top: -3px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); }

/* Le visuel « tes commandes » */
.mk-commandes { padding: 16px; }
.mkc-titre { font-family: var(--titre); font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.mkc-l { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid #F1EEF7; }
.mkc-l img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.mkc-l span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mkc-l b { font-family: var(--titre); font-size: 12px; font-weight: 800; }
.mkc-l small { font-size: 10px; color: #847C99; }
.mkc-graphe { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin-top: 14px; }
.mkc-graphe span { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--violet-clair), var(--violet)); }

/* ── La grille de tuiles ── */

.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.tuile { text-align: center; }
.tuile-visuel {
  position: relative; border-radius: var(--r-grand); height: 268px;
  display: grid; place-items: center; padding: 26px; overflow: hidden; margin-bottom: 20px;
}
.tuile h4 { font-size: 1.1rem; margin-bottom: 8px; }
.tuile p { color: var(--encre-douce); font-size: .94rem; max-width: 38ch; margin-inline: auto; }
.tuile .mk { max-width: 300px; box-shadow: 0 16px 36px rgba(27, 18, 48, .22); }
.tuile-photo { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.fond-mannequin { background: #E4DCD2; }

.mk-pay { padding: 16px; }
.mkp-solde { font-family: var(--titre); font-weight: 800; font-size: 22px; letter-spacing: -.02em; display: flex; flex-direction: column; margin-bottom: 14px; }
.mkp-solde small { font-family: var(--titre); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8E86A3; }
.mkp-solde i { font-style: normal; font-size: 12px; color: #8E86A3; }
.mkp-moyens { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mkp-moyens span { display: flex; align-items: center; gap: 7px; background: #F6F3FB; border-radius: 9px; padding: 8px 9px; font-family: var(--titre); font-size: 10px; font-weight: 700; color: #4A4262; }
.mkp-moyens img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.mkp-txt { justify-content: center; }

.mk-livr { padding: 16px; }
.mkl-trajet { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.mkl-a, .mkl-b { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mkl-a { background: var(--violet); }
.mkl-b { background: var(--vert); }
.mkl-ligne { flex: 1; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, #D9D2EA 0 7px, transparent 7px 13px); }
.mkl-adr { display: flex; flex-direction: column; margin-bottom: 14px; }
.mkl-adr b { font-family: var(--titre); font-size: 13px; font-weight: 800; }
.mkl-adr small { font-size: 11px; color: #847C99; }
.mkl-bouton { background: var(--violet); color: #fff; text-align: center; font-family: var(--titre); font-weight: 700; font-size: 12px; padding: 10px; border-radius: 999px; }

.mk-oufy { padding: 18px; display: flex; flex-direction: column; gap: 9px; }
.mko-face { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 4px; }
.mko-bulle { align-self: flex-start; background: #F4F1FA; border-radius: 14px; border-bottom-left-radius: 4px; padding: 9px 13px; font-size: 12px; max-width: 86%; }
.mko-cli { align-self: flex-end; background: linear-gradient(120deg, var(--violet), #9333EA); color: #fff; border-radius: 14px; border-bottom-right-radius: 4px; order: -1; }

.mk-pub { padding: 14px; }
.mkpub-img { position: relative; height: 128px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.mkpub-img img { width: 100%; height: 100%; object-fit: cover; }
.mkpub-img span { position: absolute; left: 9px; bottom: 9px; background: #fff; font-family: var(--titre); font-weight: 800; font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.mkpub-rs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* LES PASTILLES DE RESEAUX portent leur vraie icone, sur une carte claire — plus
   d'aplat de couleur par reseau (JM, 20/10/2026 : « des trucs plus modernes, plus
   professionnels, avec les icones, pas des fonds uniformes comme ceux-la »). Seule
   l'icone garde la couleur de la marque : c'est elle qu'on reconnait. */
.rs {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--titre); font-size: 10.5px; font-weight: 700; color: var(--encre);
  background: #fff; border: 1px solid var(--trait); border-radius: 10px;
  padding: 7px 10px; box-shadow: 0 1px 3px rgba(27, 18, 48, .07);
}
.rs svg { width: 15px; height: 15px; flex: none; }
.rs-wa svg { color: #25D366; }
.rs-fb svg { color: #1877F2; }
.rs-ig svg { color: #E1306C; }
.rs-tt svg { color: #111; }
/* Sur un fond sombre, la carte devient translucide et le texte passe au blanc. */
.cadeau-rs .rs, .app-carte .rs {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .20); color: #fff;
  box-shadow: none;
}
.cadeau-rs .rs-tt svg, .app-carte .rs-tt svg { color: #fff; }

.mk-shop { padding: 16px; }
.mks-url { display: flex; align-items: center; gap: 8px; background: #F4F1FA; border-radius: 999px; padding: 8px 12px; font-size: 11px; color: #6E6686; margin-bottom: 12px; }
.mks-url svg { width: 14px; height: 14px; fill: none; stroke: #8E86A3; stroke-width: 2; stroke-linecap: round; flex: none; }
.mks-res { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.mks-res img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; flex: none; }
.mks-res span { display: flex; flex-direction: column; min-width: 0; }
.mks-res b { font-family: var(--titre); font-size: 12px; font-weight: 800; }
.mks-res small { font-size: 10px; color: #847C99; }
.mks-bouton { background: var(--violet); color: #fff; text-align: center; font-family: var(--titre); font-weight: 700; font-size: 12px; padding: 10px; border-radius: 999px; }

/* ─────────────────────────── Étapes ─────────────────────────── */

.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.etape { background: #fff; border: 1px solid var(--trait); border-radius: var(--r-grand); overflow: hidden; padding-bottom: 24px; }
.etape-img { position: relative; height: 142px; overflow: hidden; }
.etape-img img { width: 100%; height: 100%; object-fit: cover; }
.etape-img-pay { background: var(--fond-doux); display: grid; place-items: center; padding: 14px; }
.etape-img-pay .pay-logos { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.pay-chip { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--trait); border-radius: 999px; padding: 4px 9px; font-family: var(--titre); font-weight: 700; font-size: 9.5px; }
.pay-chip img { width: 14px; height: 14px; object-fit: contain; border-radius: 3px; }
.etape-nb {
  position: absolute; left: 18px; bottom: -18px; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--violet); color: #fff;
  font-family: var(--titre); font-weight: 800; font-size: 1.02rem;
  box-shadow: 0 6px 18px rgba(107, 33, 168, .4);
}
.etape h3 { font-size: 1.02rem; margin: 34px 20px 7px; }
.etape p { color: var(--encre-douce); font-size: .9rem; margin: 0 20px; }

/* ─────────────────────────── Télécharger ─────────────────────────── */

.telecharger { padding: 86px 0; }
.telecharger-boite {
  position: relative; overflow: hidden; border-radius: 34px; padding: 58px 54px;
  background:
    radial-gradient(520px 320px at 88% 12%, rgba(236, 72, 153, .5) 0%, transparent 62%),
    radial-gradient(460px 300px at 8% 92%, rgba(56, 189, 248, .36) 0%, transparent 60%),
    linear-gradient(135deg, #2A1148 0%, #5B1C96 48%, #7C3AED 100%);
  color: #fff; box-shadow: 0 30px 70px rgba(44, 17, 72, .34);
}
.tb-lueur { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.tb-lueur-a { width: 300px; height: 300px; background: rgba(255, 214, 102, .3); top: -90px; left: 34%; }
.tb-lueur-b { width: 260px; height: 260px; background: rgba(168, 85, 247, .5); bottom: -110px; right: 22%; }
.tb-contenu { position: relative; z-index: 2; }
.telecharger-boite h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 18px 0 0; }
.telecharger-boite p { margin: 14px 0 28px; color: rgba(255, 255, 255, .84); max-width: 46ch; }
.badges { display: flex; gap: 12px; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: rgba(10, 4, 24, .55); color: #fff; border-radius: 14px; padding: 11px 20px 11px 16px;
  border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(6px);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.badge:hover { transform: translateY(-2px); background: rgba(10, 4, 24, .74); border-color: rgba(255, 255, 255, .5); }
.badge-txt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.badge-txt small { font-size: .64rem; letter-spacing: .02em; opacity: .85; }
.badge-txt b { font-family: var(--titre); font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }

.tb-visuel { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* L'icône de l'application se pose sur une TUILE BLANCHE. Le logo de Business a un
   canal alpha : sans ce fond, le violet du cadre passait au travers et l'icône changeait
   de couleur selon le bloc où on la posait. */
.tb-ico { width: 104px; height: 104px; border-radius: 30px; background: #fff; padding: 7px; object-fit: contain; box-shadow: 0 18px 44px rgba(0, 0, 0, .34); }
.tb-qr {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 14px; padding: 10px; width: 108px;
}
.tb-qr span { aspect-ratio: 1; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.tb-qr span:nth-child(1), .tb-qr span:nth-child(3), .tb-qr span:nth-child(5),
.tb-qr span:nth-child(6), .tb-qr span:nth-child(9), .tb-qr span:nth-child(12),
.tb-qr span:nth-child(13), .tb-qr span:nth-child(15), .tb-qr span:nth-child(17),
.tb-qr span:nth-child(20), .tb-qr span:nth-child(21), .tb-qr span:nth-child(23),
.tb-qr span:nth-child(25) { background: #fff; }

/* ─────────────────────────── PROFICI ─────────────────────────── */

.profici-bloc { max-width: 62ch; }
.profici-bloc h2 { font-size: clamp(1.75rem, 2.6vw, 2.2rem); margin: 16px 0 0; }
.profici-txt { margin: 18px 0 26px; color: var(--encre-douce); font-size: 1.02rem; }

/* ─────────────────────────── Pied ─────────────────────────── */

/* LE PIED REPREND LE DÉGRADÉ DE LA CARTE PREMIUM (JM, 20/10/2026, capture à l'appui :
   « un peu de violet blanc noir... un truc de ce genre »). Du presque noir au violet,
   texte blanc : la marque signe le bas de page sans y poser un deuxième site, comme le
   faisait le noir plat. Le blanc essayé avant, lui, ne tenait pas la page. */
.pied {
  position: relative; isolation: isolate;
  background: linear-gradient(150deg, rgba(28, 20, 48, .88) 0%, rgba(76, 29, 149, .86) 58%, rgba(107, 33, 168, .84) 100%);
  backdrop-filter: saturate(170%) blur(16px);
  color: rgba(255, 255, 255, .74); padding: 32px 0 14px;
}
/* Le verre a besoin de quelque chose DERRIERE lui pour se voir : sans ce voile clair,
   un dégradé translucide sur du blanc rend juste une couleur délavée. */
.pied::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 120% at 15% 0%, rgba(168, 85, 247, .55), transparent 70%),
              radial-gradient(60% 110% at 95% 100%, rgba(213, 34, 113, .35), transparent 70%),
              #15101F;
}
.pied-colonnes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 18px; }
.pied-colonnes h4 { color: #fff; font-size: .85rem; margin-bottom: 7px; letter-spacing: -.01em; }
.pied-colonnes a { display: block; padding: 1.5px 0; font-size: .84rem; transition: color .15s ease; }
.pied-colonnes a:hover { color: #fff; text-decoration: underline; }

.pied-milieu {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .18);
}
.pied-milieu .mot-b { color: #fff; }
.pied-milieu .mot-o { color: #D8B4FE; }
.pied-langue { display: flex; align-items: center; gap: 20px; margin-right: auto; }
.langue-pied {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: none; border: 0; padding: 0; color: rgba(255, 255, 255, .88);
  font-family: var(--titre); font-weight: 600; font-size: .9rem;
}
.langue-pied:hover { color: #fff; }
.langue-pied svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pied-devise { font-family: var(--titre); font-weight: 600; font-size: .9rem; color: rgba(255, 255, 255, .88); }
.pied-reseaux { display: flex; gap: 10px; }
.pied-reseaux a {
  width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center;
  color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pied-reseaux a:hover { background: #fff; border-color: #fff; color: var(--violet); }

.pied-bas {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .76rem; color: rgba(255, 255, 255, .54);
}
.pied-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.pied-legal a:hover { color: #fff; text-decoration: underline; }

/* ─────────────────────────── Contactez-nous ─────────────────────────── */

.contactez {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: var(--encre); border: 1.5px solid var(--violet-clair);
  border-radius: 999px; padding: 12px 20px;
  font-family: var(--titre); font-weight: 700; font-size: .94rem;
  box-shadow: 0 10px 30px rgba(27, 18, 48, .22);
  transition: transform .15s ease, box-shadow .2s ease;
}
.contactez:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(27, 18, 48, .3); }
.contactez svg { fill: none; stroke: var(--violet); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────────────────────── Écrans étroits ─────────────────────────── */

@media (max-width: 1180px) {
  .pcarte { width: 560px; margin-left: -280px; }
  .pc-corps { height: 318px; }
  .pl-g { transform: translate3d(-512px, 12px, 0) scale(.72) rotateY(16deg); }
  .pl-d { transform: translate3d(512px, 42px, 0) scale(.72) rotateY(-16deg); }
  .pl-hd { transform: translate3d(1020px, 78px, 0) scale(.62) rotateY(-22deg); }
  .pl-hg { transform: translate3d(-1020px, 8px, 0) scale(.62) rotateY(22deg); }
  .pl-sg { transform: translate3d(-880px, 4px, 0) scale(.66) rotateY(20deg); }
  .pl-sd { transform: translate3d(880px, 56px, 0) scale(.66) rotateY(-20deg); }
  .scene { height: 404px; }
  .duo { gap: 40px; }
  .etapes { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .nav, .entete-actions { display: none; }
  .burger { display: flex; margin-left: auto; }
  .hero { padding-top: 44px; }
  .section { padding: 64px 0; }
  .pcarte { width: min(100% - 40px, 540px); margin-left: 0; left: 50%; }
  .pl-c { transform: translate3d(-50%, 0, 0); opacity: 1; }
  .pl-g { transform: translate3d(calc(-50% - 460px), 12px, 0) scale(.86); opacity: 0; }
  .pl-d { transform: translate3d(calc(-50% + 460px), 32px, 0) scale(.86); opacity: 0; }
  .pl-hd { transform: translate3d(calc(-50% + 800px), 60px, 0) scale(.7); opacity: 0; }
  .pl-hg { transform: translate3d(calc(-50% - 800px), 8px, 0) scale(.7); opacity: 0; }
  .pl-sg { transform: translate3d(calc(-50% - 700px), 0, 0) scale(.7); opacity: 0; }
  .pl-sd { transform: translate3d(calc(-50% + 700px), 40px, 0) scale(.7); opacity: 0; }
  .pc-corps { height: 300px; }
  .scene { height: 356px; margin-top: 42px; }
  .duo, .duo-inverse { grid-template-columns: 1fr; gap: 26px; }
  .duo-inverse .duo-visuel, .duo-inverse .duo-texte { order: initial; }
  .duo-visuel { min-height: 330px; padding: 32px; }
  .tuiles { grid-template-columns: repeat(2, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); }
  .tb-contenu { grid-template-columns: 1fr; gap: 34px; }
  .tb-visuel { flex-direction: row; justify-content: center; }
  .pied-colonnes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .tuiles, .etapes { grid-template-columns: 1fr; }
  .pc-corps { height: 268px; }
  .scene { height: 320px; }
  .pc-gauche { width: 40%; }
  .pc-droite { padding: 14px 16px; }
  .pc-grille figure { height: 72px; }
  .onglet { font-size: .76rem; padding: 10px 4px; }
  .carrousel-bas { gap: 12px; }
  .telecharger-boite { padding: 40px 22px; border-radius: 26px; }
  .contactez { right: 14px; bottom: 14px; padding: 11px 16px; font-size: .88rem; }
  .pied-milieu { gap: 18px; }
  .pied-bas { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcarte { transition: opacity .2s linear; }
  .outils-piste { scroll-behavior: auto; }
  .onglet.actif .jauge { animation: none; transform: scaleX(1); }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AJOUTS — les cinq gestes, le carrousel d'outils, les panneaux.
   ═══════════════════════════════════════════════════════════════════════════ */

.bouton-noir { background: #15101F; color: #fff; }
.bouton-noir:hover { background: #2A2140; transform: translateY(-1px); }
.lien-bouton {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit; font-size: .82rem;
}
.lien-bouton:hover { color: #fff; text-decoration: underline; }

/* On peut attraper les cartes du héro. */
.scene { cursor: grab; touch-action: pan-y; }
.scene.attrapee { cursor: grabbing; }
.pcarte { user-select: none; -webkit-user-select: none; }

/* ─────────────── Les cinq gestes ─────────────── */

.gestes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.geste { display: flex; flex-direction: column; }
.geste-visuel {
  position: relative; border-radius: 22px; height: 254px; overflow: hidden;
  display: grid; place-items: center; padding: 20px; margin-bottom: 26px;
}
.geste-nb {
  position: absolute; left: 16px; bottom: -18px; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--violet); color: #fff;
  font-family: var(--titre); font-weight: 800; font-size: .98rem;
  box-shadow: 0 6px 18px rgba(107, 33, 168, .4);
}
.geste h3 { font-size: 1.02rem; margin-bottom: 7px; }
.geste p { color: var(--encre-douce); font-size: .9rem; }

/* La maquette posée dans chaque geste. */
.gk {
  background: #fff; border-radius: 13px; padding: 13px; width: 100%;
  box-shadow: 0 14px 30px rgba(27, 18, 48, .2); display: flex; flex-direction: column; gap: 7px;
}
.gk-lab { font-family: var(--titre); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8E86A3; }
.gk-champ {
  border: 1.4px solid #E6E0F1; border-radius: 9px; padding: 8px 10px;
  font-family: var(--titre); font-weight: 700; font-size: 12px; color: var(--encre);
}
.gk-champ-petit { font-size: 11px; padding: 6px 9px; }
.gk-champ-prix { color: var(--rose); }
.gk-champ-prix i { font-style: normal; font-size: 9px; }
.gk-couleurs { display: flex; gap: 6px; }
.gk-couleurs i { width: 22px; height: 22px; border-radius: 50%; display: block; }
.gk-couleurs .c1 { background: #D52271; } .gk-couleurs .c2 { background: var(--violet); }
.gk-couleurs .c3 { background: #2E8B3C; } .gk-couleurs .c4 { background: #D9A441; }
.gk-couleurs .on { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px currentColor; color: #D52271; }
.gk-bouton {
  background: var(--violet); color: #fff; text-align: center; border-radius: 999px;
  font-family: var(--titre); font-weight: 700; font-size: 11.5px; padding: 9px; margin-top: 2px;
}

.gk-produit { flex-direction: row; align-items: center; gap: 10px; }
.gk-photo { width: 62px; height: 72px; border-radius: 9px; overflow: hidden; flex: none; }
.gk-photo img { width: 100%; height: 100%; object-fit: cover; }
.gk-info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gk-bascule { display: flex; align-items: center; gap: 7px; font-family: var(--titre); font-size: 10.5px; font-weight: 700; color: #1F6E2B; }
.gk-bascule span { width: 26px; height: 15px; border-radius: 999px; background: #35C759; position: relative; flex: none; }
.gk-bascule span::after { content: ''; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }

.gk-lien {
  display: flex; align-items: center; gap: 7px; background: #F4F1FA; border-radius: 999px;
  padding: 8px 11px; font-size: 10.5px; color: #6E6686; font-family: var(--titre); font-weight: 600;
}
.gk-lien svg { width: 13px; height: 13px; fill: none; stroke: #8E86A3; stroke-width: 2; stroke-linecap: round; flex: none; }
.gk-rs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.gk-rs .rs { font-size: 9px; padding: 6px 7px; border-radius: 7px; }

.gk-cmd { display: flex; align-items: center; gap: 8px; }
.gk-cmd img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; }
.gk-cmd span { display: flex; flex-direction: column; min-width: 0; }
.gk-cmd b { font-family: var(--titre); font-size: 11px; font-weight: 800; }
.gk-cmd small { font-size: 9px; color: #847C99; }
.gk-suivi { display: flex; gap: 4px; }
.gk-suivi i { flex: 1; height: 4px; border-radius: 999px; background: #EEEAF7; display: block; }
.gk-suivi .on { background: var(--violet); }
.gk-etat { font-family: var(--titre); font-size: 10px; font-weight: 700; color: #9A6A12; }

.gk-pay { gap: 10px; }
.gk-solde { display: flex; flex-direction: column; font-family: var(--titre); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.gk-solde small { font-family: var(--titre); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8E86A3; }
.gk-solde i { font-style: normal; font-size: 10px; color: #8E86A3; }
.gk-moyens { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.gk-moyens span { display: flex; align-items: center; gap: 5px; background: #F6F3FB; border-radius: 7px; padding: 6px 7px; font-family: var(--titre); font-size: 9px; font-weight: 700; color: #4A4262; }
.gk-moyens img { width: 14px; height: 14px; object-fit: contain; border-radius: 3px; }
.gk-moyen-txt { justify-content: center; }

/* ─────────────── Le carrousel d'outils ─────────────── */

.outils-titre { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.04em; line-height: 1.08; margin-bottom: 34px; }
.outils-titre em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  background: linear-gradient(100deg, #7C3AED 0%, #A855F7 48%, #D8569E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.outils-barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.outils-onglets { display: inline-flex; gap: 2px; padding: 5px; background: #ECE8F4; border-radius: 999px; }
.oo {
  border: 0; background: transparent; border-radius: 999px; cursor: pointer;
  padding: 11px 22px; font-family: var(--titre); font-weight: 700; font-size: .94rem;
  color: var(--encre-douce); white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.oo:hover { color: var(--encre); }
.oo.actif { background: var(--violet); color: #fff; box-shadow: 0 6px 16px rgba(107, 33, 168, .28); }
.outils-fleches { display: flex; gap: 10px; flex: none; }
.fleche {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1.5px solid var(--trait); background: #fff; color: var(--encre);
  transition: border-color .2s ease, background .2s ease;
}
.fleche:hover { border-color: var(--violet); background: var(--pale); color: var(--violet); }
.fleche svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.outils-piste {
  display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding-bottom: 12px; margin-bottom: 34px;
  scrollbar-width: none;
}
.outils-piste::-webkit-scrollbar { display: none; }
.lame { flex: none; width: 362px; scroll-snap-align: start; }
.lame[hidden] { display: none; }
.lame-carte {
  position: relative; height: 332px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; padding: 26px 24px;
  background: linear-gradient(150deg, #6D28D9 0%, #7C3AED 46%, #9F67F5 100%);
}
.lame-chip {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #C8F7D4; color: #0C3A1C; border-radius: 4px; padding: 4px 9px;
  font-family: var(--titre); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.lame-carte .mk { max-width: 292px; box-shadow: 0 18px 40px rgba(10, 4, 24, .34); }
.lame-carte-photo { padding: 0; }
.lame-photo { width: 100%; height: 100%; object-fit: cover; }
.lame-txt { margin-top: 18px; font-size: .97rem; line-height: 1.55; color: var(--encre-douce); }
.lame-txt b { color: var(--encre); font-family: var(--titre); font-weight: 800; }

/* ─────────────── Les panneaux (contact, cookies) ─────────────── */

.panneau {
  position: fixed; right: 22px; bottom: 82px; z-index: 90; width: 352px;
  background: #fff; border: 1px solid var(--trait); border-radius: 20px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(27, 18, 48, .3);
  animation: panneauEntre .22s ease both;
}
@keyframes panneauEntre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pan-tete { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; border-bottom: 1px solid var(--trait); }
.pan-tete img { width: 38px; height: 38px; border-radius: 11px; }
.pan-qui { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pan-qui b { font-family: var(--titre); font-size: 1rem; font-weight: 800; }
.pan-qui small { font-size: .78rem; color: var(--encre-douce); }
.pan-fermer {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: #F4F1FA; cursor: pointer;
  display: grid; place-items: center; color: var(--encre-douce); flex: none;
}
.pan-fermer:hover { background: var(--pale); color: var(--violet); }
.pan-fermer svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pan-corps { padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.pan-bonjour { font-family: var(--titre); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.pan-txt { font-size: .92rem; color: var(--encre-douce); line-height: 1.5; }
.pan-choix {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 13px;
  border: 1.4px solid var(--trait); font-family: var(--titre); font-weight: 700; font-size: .92rem;
  transition: border-color .18s ease, background .18s ease;
}
.pan-choix:hover { border-color: var(--violet); background: var(--pale); }
.pan-choix svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pan-wa { border-color: #B6EBC6; background: #EFFBF2; color: #0E6B2A; }
.pan-wa:hover { border-color: #25D366; background: #E2F8E9; }
.pan-wa svg { fill: currentColor; stroke: none; }

.panneau-cookies { width: 388px; }
.ck-liste { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 10px; }
.ck-liste li { display: flex; flex-direction: column; gap: 2px; padding-left: 26px; position: relative; }
.ck-liste li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.ck-liste b { font-family: var(--titre); font-size: .88rem; font-weight: 800; }
.ck-liste span { font-size: .84rem; color: var(--encre-douce); }
.ck-actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ck-actions .bouton { flex: 1; padding: 11px 16px; font-size: .9rem; }

@media (max-width: 1180px) {
  .lame { width: 320px; }
}

@media (max-width: 980px) {
  .gestes { grid-template-columns: repeat(2, 1fr); }
  .outils-barre { flex-direction: column; align-items: flex-start; gap: 18px; }
  .outils-fleches { align-self: flex-end; }
}

@media (max-width: 680px) {
  .gestes { grid-template-columns: 1fr; }
  .outils-onglets { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .outils-onglets::-webkit-scrollbar { display: none; }
  .oo { padding: 10px 16px; font-size: .86rem; }
  .lame { width: 272px; }
  .lame-carte { height: 290px; }
  .panneau { right: 12px; left: 12px; width: auto; bottom: 76px; }
  .panneau-cookies { width: auto; }
}

/* Dans les lames, les maquettes sont un peu plus ramassées : sinon la plus haute
   (la boutique) déborde de la carte et se fait couper en bas. */
.lame-carte { height: 348px; }
.lame-carte .mkb-heros { height: 116px; }
.lame-carte .mkb-grille figure { height: 68px; }
.lame-carte .mk-commandes { padding: 13px; }
.lame-carte .mkc-graphe { height: 48px; margin-top: 10px; }

/* Le premier geste est le plus chargé : on le resserre de quelques pixels pour
   que le bouton « Créer » ne soit pas coupé en bas de la carte. */
.gk { padding: 12px; }
.gk-couleurs i { width: 19px; height: 19px; }
.gk-bouton { padding: 8px; }

/* Les cinq gestes : la maquette REMPLIT la carte, bord à bord. Le numéro n'est
   plus posé sur l'image mais au-dessus du titre, comme un repère de lecture. */
.geste-visuel { padding: 0; height: 262px; }
.geste-visuel .gk {
  width: 100%; height: 100%; border-radius: 0; box-shadow: none;
  padding: 20px; justify-content: center; background: #fff;
}
.geste-nb {
  font-family: var(--titre); font-weight: 800; font-size: .82rem; letter-spacing: .1em;
  color: var(--violet-clair); margin-bottom: 6px;
}
.geste-visuel .gk-produit { align-items: center; }

/* Le carrousel d'outils vit maintenant dans la section de la gérante. */
.outils { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--trait); }
.outils-titre { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.outils-pieds { display: flex; gap: 12px; flex-wrap: wrap; }

/* Le texte de PROFICI porte la police des titres : c'est une prise de parole. */
.profici-txt {
  font-family: var(--titre); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.5; letter-spacing: -.015em; color: #3C3553;
}

/* Pleine carte, mais chacune garde sa teinte : cinq cartes blanches d'affilée,
   c'etait plat. Le numéro, lui, se lit au-dessus du titre. */
.geste-visuel.fond-lilas .gk { background: #F7F2FF; }
.geste-visuel.fond-sable .gk { background: #FBF7F1; }
.geste-visuel.fond-pierre .gk { background: #F6F7F9; }
.geste-visuel.fond-bleu .gk { background: #F2F6FA; }
.geste-visuel.fond-vert .gk { background: #F1F8F3; }
.geste-nb { font-size: .9rem; color: var(--violet); letter-spacing: .12em; margin-bottom: 7px; }

/* ═══ Les cinq gestes, version « waouh » ═══
   Fond violet, la maquette posée dessus avec un halo, et qui DÉBORDE par le bas :
   c'est ce débordement qui donne la profondeur. Le titre passe en grand et léger —
   une graisse 500, pas 800 : lu en une fois, sans crier. */
.geste-visuel {
  height: 304px; padding: 26px 24px 0; border-radius: 20px;
  display: grid; align-items: start; justify-items: center;
  background: linear-gradient(165deg, #5B21B6 0%, #7C3AED 46%, #A78BFA 100%);
}
.geste-visuel.fond-lilas, .geste-visuel.fond-sable, .geste-visuel.fond-pierre,
.geste-visuel.fond-bleu, .geste-visuel.fond-vert {
  background: linear-gradient(165deg, #5B21B6 0%, #7C3AED 46%, #A78BFA 100%);
}
.geste-visuel .gk {
  width: 100%; height: 278px; padding: 16px; justify-content: flex-start; gap: 8px;
  border-radius: 14px 14px 0 0; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 44px 6px rgba(201, 167, 245, .55), 0 20px 44px rgba(10, 4, 24, .42);
}
.geste-visuel.fond-lilas .gk, .geste-visuel.fond-sable .gk, .geste-visuel.fond-pierre .gk,
.geste-visuel.fond-bleu .gk, .geste-visuel.fond-vert .gk { background: #fff; }
.geste-visuel .gk-produit { align-items: flex-start; }
.geste-nb { font-size: .78rem; color: var(--violet-clair); letter-spacing: .14em; margin: 22px 0 8px; }
.geste h3 {
  font-weight: 500; font-size: clamp(1.18rem, 1.6vw, 1.46rem);
  line-height: 1.22; letter-spacing: -.022em; margin-bottom: 9px;
}
.geste p { font-size: .93rem; }
.gestes { gap: 22px; }

@media (max-width: 980px) {
  .geste-visuel { height: 280px; }
  .geste-visuel .gk { height: 254px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES MAQUETTES S'ANIMENT — de petites séquences, pas des images fixes.

   Chaque maquette joue une boucle lente : des éléments qui arrivent l'un après
   l'autre, un curseur factice qui se déplace et clique, une tête de lecture qui
   balaie. Tout est en CSS, donc net et sans une image de plus à charger.

   Rien ne tourne tant que la carte n'est pas à l'écran : c'est la classe `anime`,
   posée par js/main.js, qui démarre tout. Hors champ, aucune animation ne tourne.
   Et `prefers-reduced-motion` coupe l'ensemble.
   ═══════════════════════════════════════════════════════════════════════════ */

.mk { position: relative; }

/* Le curseur factice, posé en ::after sur la maquette : aucune balise en plus. */
.anime .mk::after {
  content: ''; position: absolute; z-index: 6; width: 19px; height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5 19 11.6l-6.1.9-3 5.7z' fill='white' stroke='%231B1230' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 2px 5px rgba(10, 4, 24, .4));
  opacity: 0; pointer-events: none;
}
/* L'onde du clic, en ::before, au même endroit que le curseur. */
.anime .mk::before {
  content: ''; position: absolute; z-index: 5; width: 26px; height: 26px; margin: -4px 0 0 -4px;
  border-radius: 50%; border: 2px solid rgba(124, 58, 237, .85);
  opacity: 0; pointer-events: none;
}

@keyframes ondeClic { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes surgit { 0%, 6% { opacity: 0; transform: translateY(9px) scale(.97); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes allume { 0%, 10% { filter: none; } 18%, 30% { filter: brightness(1.12) saturate(1.2); } 40%, 100% { filter: none; } }

/* ── 1. La boutique : les articles arrivent, le curseur clique une catégorie ── */
.anime .mk-boutique::after { animation: curseurBoutique 9s ease-in-out infinite; }
.anime .mk-boutique::before { animation: ondeClic 9s ease-out infinite; }
@keyframes curseurBoutique {
  0% { opacity: 0; left: 78%; top: 86%; }
  8% { opacity: 1; left: 78%; top: 86%; }
  26% { opacity: 1; left: 30%; top: 13%; }
  34%, 44% { opacity: 1; left: 30%; top: 13%; }
  66% { opacity: 1; left: 24%; top: 72%; }
  88% { opacity: 1; left: 24%; top: 72%; }
  100% { opacity: 0; left: 24%; top: 72%; }
}
.anime .mk-boutique::before {
  left: 30%; top: 13%;
  animation: ondeBoutique 9s ease-out infinite;
}
@keyframes ondeBoutique {
  0%, 31% { opacity: 0; transform: scale(.3); }
  34% { opacity: .9; transform: scale(.4); }
  44% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; }
}
.anime .mkb-grille figure { animation: surgit 9s ease-in-out infinite; }
.anime .mkb-grille figure:nth-child(2) { animation-delay: .18s; }
.anime .mkb-grille figure:nth-child(3) { animation-delay: .36s; }
.anime .mkb-heros img { animation: zoomDoux 9s ease-in-out infinite; }
@keyframes zoomDoux { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ── 2. Les commandes : les lignes tombent, les barres poussent ── */
.anime .mkc-l { animation: surgit 8s ease-in-out infinite; }
.anime .mkc-l:nth-of-type(2) { animation-delay: .2s; }
.anime .mkc-l:nth-of-type(3) { animation-delay: .4s; }
.anime .mkc-graphe span { transform-origin: bottom; animation: pousse 8s ease-in-out infinite; }
@keyframes pousse { 0%, 10% { transform: scaleY(.06); } 34%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.06); } }
.anime .mkc-graphe span:nth-child(2) { animation-delay: .07s; }
.anime .mkc-graphe span:nth-child(3) { animation-delay: .14s; }
.anime .mkc-graphe span:nth-child(4) { animation-delay: .21s; }
.anime .mkc-graphe span:nth-child(5) { animation-delay: .28s; }
.anime .mkc-graphe span:nth-child(6) { animation-delay: .35s; }
.anime .mkc-graphe span:nth-child(7) { animation-delay: .42s; }
.anime .mk-commandes::after, .anime .mk-commandes::before { display: none; }

/* ── 3. Les paiements : chaque moyen s'allume à son tour ── */
.anime .mkp-moyens span { animation: allumeMoyen 7s ease-in-out infinite; }
@keyframes allumeMoyen {
  0%, 8% { background: #F6F3FB; transform: none; }
  13%, 20% { background: #EAE2FA; transform: translateY(-2px); }
  26%, 100% { background: #F6F3FB; transform: none; }
}
.anime .mkp-moyens span:nth-child(2) { animation-delay: .5s; }
.anime .mkp-moyens span:nth-child(3) { animation-delay: 1s; }
.anime .mkp-moyens span:nth-child(4) { animation-delay: 1.5s; }
.anime .mkp-solde { animation: battement 7s ease-in-out infinite; }
@keyframes battement { 0%, 60% { transform: none; } 68% { transform: scale(1.04); } 76%, 100% { transform: none; } }
.anime .mk-pay::after, .anime .mk-pay::before { display: none; }

/* ── 4. L'Atelier : la tête de lecture balaie, les réglages bougent ── */
.anime .mka-tete-lecture { animation: balaie 7s linear infinite; }
@keyframes balaie { 0% { left: 7%; } 100% { left: 93%; } }
.anime .mka-clip { animation: allume 7s ease-in-out infinite; }
.anime .mka-clip:nth-child(2) { animation-delay: 1.75s; }
.anime .mka-clip:nth-child(3) { animation-delay: 3.5s; }
.anime .mka-clip:nth-child(4) { animation-delay: 5.25s; }
.anime .mka-curseur i { animation: glisseCurseur 7s ease-in-out infinite; }
@keyframes glisseCurseur { 0%, 100% { width: 36%; } 50% { width: 78%; } }
.anime .mka-curseur-2 i { animation-delay: .9s; }
.anime .mka-apercu img { animation: zoomDoux 7s ease-in-out infinite; }
.anime .mk-atelier::after { animation: curseurAtelier 7s ease-in-out infinite; }
@keyframes curseurAtelier {
  0% { opacity: 0; left: 86%; top: 20%; }
  10%, 24% { opacity: 1; left: 86%; top: 46%; }
  44%, 60% { opacity: 1; left: 68%; top: 46%; }
  86% { opacity: 1; left: 50%; top: 84%; }
  100% { opacity: 0; left: 50%; top: 84%; }
}
.anime .mk-atelier::before { display: none; }

/* ── 5. Publier : les quatre réseaux s'allument l'un après l'autre ── */
.anime .mkpub-rs .rs { animation: surgitPop 6.4s ease-in-out infinite; }
@keyframes surgitPop {
  0%, 6% { opacity: .35; transform: scale(.95); }
  14%, 82% { opacity: 1; transform: none; }
  90%, 100% { opacity: .35; transform: scale(.95); }
}
.anime .mkpub-rs .rs:nth-child(2) { animation-delay: .22s; }
.anime .mkpub-rs .rs:nth-child(3) { animation-delay: .44s; }
.anime .mkpub-rs .rs:nth-child(4) { animation-delay: .66s; }
.anime .mkpub-img img { animation: zoomDoux 6.4s ease-in-out infinite; }
.anime .mk-pub::after { animation: curseurPub 6.4s ease-in-out infinite; }
@keyframes curseurPub {
  0% { opacity: 0; left: 84%; top: 88%; }
  12%, 22% { opacity: 1; left: 24%; top: 78%; }
  40% { opacity: 1; left: 72%; top: 78%; }
  58% { opacity: 1; left: 24%; top: 92%; }
  76%, 88% { opacity: 1; left: 72%; top: 92%; }
  100% { opacity: 0; left: 72%; top: 92%; }
}
.anime .mk-pub::before { display: none; }

/* ── 6. Shopping sur le Net : l'adresse se tape, le résultat tombe ── */
.anime .mks-url span { display: inline-block; overflow: hidden; white-space: nowrap; animation: tape 8s steps(26, end) infinite; }
@keyframes tape { 0% { max-width: 0; } 30%, 88% { max-width: 20em; } 96%, 100% { max-width: 0; } }
.anime .mks-res { animation: surgit 8s ease-in-out infinite; animation-delay: .9s; }
.anime .mks-bouton { animation: pulseBouton 8s ease-in-out infinite; }
@keyframes pulseBouton {
  0%, 52% { transform: none; box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
  62% { transform: translateY(-2px); box-shadow: 0 0 0 7px rgba(124, 58, 237, .16); }
  74%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
.anime .mk-shop::after { animation: curseurShop 8s ease-in-out infinite; }
@keyframes curseurShop {
  0% { opacity: 0; left: 80%; top: 14%; }
  14%, 46% { opacity: 1; left: 80%; top: 14%; }
  60%, 78% { opacity: 1; left: 52%; top: 88%; }
  100% { opacity: 0; left: 52%; top: 88%; }
}
.anime .mk-shop::before { left: 52%; top: 88%; animation: ondeShop 8s ease-out infinite; }
@keyframes ondeShop {
  0%, 60% { opacity: 0; transform: scale(.3); }
  64% { opacity: .9; transform: scale(.4); }
  76%, 100% { opacity: 0; transform: scale(1.9); }
}

/* ── 7. Oufy : les bulles arrivent l'une après l'autre ── */
.anime .mko-cli { animation: surgit 7s ease-in-out infinite; }
.anime .mko-bulle:not(.mko-cli) { animation: surgit 7s ease-in-out infinite; animation-delay: .8s; }
.anime .mko-face { animation: respire 7s ease-in-out infinite; }
@keyframes respire { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) rotate(-3deg); } }
.anime .mk-oufy::after, .anime .mk-oufy::before { display: none; }

/* ── 8. La livraison : le point remonte la route ── */
.mkl-ligne { position: relative; }
.anime .mkl-ligne::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .22);
  animation: roule 5.5s ease-in-out infinite;
}
@keyframes roule { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } }
.anime .mkl-b { animation: battement 5.5s ease-in-out infinite; animation-delay: 4.4s; }
.anime .mk-livr::after, .anime .mk-livr::before { display: none; }

/* ── 9. Le mannequin : la photo respire ── */
.anime .lame-photo { animation: zoomDoux 10s ease-in-out infinite; }
.anime .bulle-ia { animation: surgit 10s ease-in-out infinite; }

/* ── Les cinq gestes s'animent aussi, en plus sobre ── */
.anime .gk-couleurs i.on { animation: battement 6s ease-in-out infinite; }
.anime .gk-bouton { animation: pulseBouton 6s ease-in-out infinite; }
.anime .gk-rs .rs { animation: surgitPop 6s ease-in-out infinite; }
.anime .gk-rs .rs:nth-child(2) { animation-delay: .2s; }
.anime .gk-rs .rs:nth-child(3) { animation-delay: .4s; }
.anime .gk-rs .rs:nth-child(4) { animation-delay: .6s; }
.anime .gk-suivi i.on { animation: pousseLarge 6s ease-in-out infinite; transform-origin: left; }
@keyframes pousseLarge { 0%, 12% { transform: scaleX(0); } 34%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.anime .gk-suivi i.on:nth-child(2) { animation-delay: .35s; }
.anime .gk-moyens span { animation: allumeMoyen 6s ease-in-out infinite; }
.anime .gk-moyens span:nth-child(2) { animation-delay: .4s; }
.anime .gk-moyens span:nth-child(3) { animation-delay: .8s; }
.anime .gk-moyens span:nth-child(4) { animation-delay: 1.2s; }
.anime .gk-photo img { animation: zoomDoux 6s ease-in-out infinite; }
.anime .gk-bascule span { animation: battement 6s ease-in-out infinite; }

/* Au survol, la séquence accélère un peu : la carte répond à la souris. */
.lame-carte:hover .mk, .geste-visuel:hover .gk { animation-duration: inherit; }
.lame-carte:hover .mk *, .geste-visuel:hover .gk * { animation-duration: 4s; }

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

/* Les séquences où un élément DISPARAÎT puis revient sont réservées aux petites
   lames. Dans les trois grands panneaux, elles donnaient une carte vide une
   seconde par boucle : on dirait un bug, pas une animation. Là, seul ce qui
   bouge en continu tourne (zoom, tête de lecture, barres, curseurs). */
.duo-visuel.anime .mkb-grille figure,
.duo-visuel.anime .mkc-l,
.duo-visuel.anime .mks-res,
.duo-visuel.anime .mko-bulle,
.duo-visuel.anime .bulle-ia { animation: none; opacity: 1; transform: none; }

/* Et dans les lames, le temps « invisible » est réduit au strict minimum. */
@keyframes surgit {
  0% { opacity: 0; transform: translateY(9px) scale(.97); }
  9%, 95% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* ═══ Trois corrections de cadrage ═══ */

/* La piste s'arrêtait au bord du conteneur : la dernière lame restait coupée et
   on ne comprenait pas qu'il y en avait d'autres. Elle va maintenant jusqu'au
   bord droit de la fenêtre, comme chez la référence. */
.outils-piste { margin-right: calc((100% - 100vw) / 2 + 10px); padding-right: 26px; }

/* Plus de pastille violette posée sur l'image : le numéro a disparu avec elle. */
.geste-nb { display: none; }

/* PROFICI portait .conteneur ET un max-width : les deux ensemble le centraient.
   Le bloc reprend la largeur du conteneur, et seul le texte est borné. */
.profici-bloc { max-width: none; }
.profici-bloc h2, .profici-txt { max-width: 620px; }

/* Le bouton qui ouvre Oufy. Le fil, lui, est dans le panneau d'Oufy. */
.pan-assistant { width: 100%; cursor: pointer; background: #fff; text-align: left; }
.pan-assistant img { width: 24px; height: 24px; border-radius: 7px; flex: none; }

.pied-role { display: block; padding: 0 0 3px; font-size: .74rem; color: rgba(255, 255, 255, .48); }

/* ═══ Les cartes du héro répondent à la main ═══
   `translate` porte le décalage du glissé : il se compose avec le `transform` des
   places au lieu de l'écraser. Les cartes de côté s'allument au survol pour dire
   qu'on peut les amener au milieu. */
.pcarte { translate: var(--tire, 0px) 0; }
.scene.attrapee .pcarte { transition: transform .18s ease-out, opacity .3s ease; }
.pcarte.pl-g, .pcarte.pl-d { cursor: pointer; }
.pcarte.pl-g:hover, .pcarte.pl-d:hover {
  box-shadow: 0 0 0 2px rgba(168, 85, 247, .8), 0 0 40px 8px rgba(168, 85, 247, .42),
              0 34px 74px rgba(27, 18, 48, .3);
}
.scene.attrapee .pcarte.pl-c {
  box-shadow: 0 0 0 2px rgba(168, 85, 247, .7), 0 0 48px 10px rgba(168, 85, 247, .38),
              0 34px 74px rgba(27, 18, 48, .3);
}


/* ═══ La langue reste visible, même au format téléphone ═══
   Elle était emportée avec le reste des actions dans le menu burger : on la
   garde dans la barre, et seul le bouton d'appel passe dans le menu. */
@media (max-width: 980px) {
  .entete-actions { display: flex; margin-left: auto; gap: 10px; }
  .entete-cta { display: none; }
  .burger { margin-left: 0; }
}
@media (max-width: 520px) {
  .entete-rangee { gap: 12px; }
  .langue-bouton { padding: 7px 9px; }
  .langue-bouton #langueNom { display: none; }
}

/* ═══════════════════ CE QUI RESTE HORIZONTAL SUR TÉLÉPHONE ═══════════════════
   Trois paires d'éléments se mettaient à la file les unes sous les autres dès
   qu'on rétrécissait : les deux boutons du héro, les onglets et leurs flèches.
   Ils tiennent côte à côte, il suffit de les réduire. */

.lib-court { display: none; }

@media (max-width: 980px) {
  /* Onglets à gauche, flèches à droite, sur la même ligne. */
  .outils-barre { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .outils-fleches { align-self: auto; }
  .outils-onglets { width: auto; }
}

@media (max-width: 680px) {
  /* Les deux boutons du héro restent côte à côte, libellé court pour le second. */
  .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero-actions .bouton { flex: 1 1 0; min-width: 0; padding: 14px 10px; font-size: .86rem; }
  .hero-actions .lib-long { display: none; }
  .hero-actions .lib-court { display: inline; }

  .outils-onglets { padding: 4px; }
  .oo { padding: 9px 12px; font-size: .76rem; }
  .outils-fleches { gap: 8px; }
  .fleche { width: 36px; height: 36px; }
  .fleche svg { width: 16px; height: 16px; }

  /* L'étiquette du héro tenait sur deux lignes en pleine largeur. */
  .etiquette { font-size: .64rem; letter-spacing: .1em; padding: 7px 13px; }

}


@media (max-width: 360px) {
  .hero-actions .bouton { padding: 13px 6px; font-size: .8rem; }
  .oo { padding: 8px 10px; font-size: .72rem; }
}

/* ═══════════════ LE BOUTON DU MENU DÉPLIANT ═══════════════
   `.nav-mobile a` posait `padding: 12px 0` et gagnait en priorité sur `.bouton` :
   le bouton violet se retrouvait sans marge sur les côtés, le texte collé aux
   bords. On lui rend sa forme de bouton. */

.nav-mobile { padding: 10px 20px 22px; gap: 0; }
.nav-mobile a { font-size: 1rem; padding: 13px 0; border-bottom: 1px solid var(--trait); }
.nav-mobile a:last-of-type { border-bottom: 0; }
.nav-mobile .bouton {
  margin-top: 14px; padding: 15px 24px; font-size: 1rem;
  justify-content: center; border-bottom: 0; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   OUFY — LE PANNEAU DE LA VITRINE, RECOPIÉ TEL QUEL.

   Les règles ci-dessous viennent de shopboutique/css/theme.css (blocs « #boChatPanel »,
   « .boGreet », « .boChips » et « LA ZONE DE SAISIE D'OUFY, CELLE DE MANAGE »), avec leurs
   valeurs déjà appliquées là-bas. Rien n'est redessiné ici : les variables de la vitrine
   sont simplement posées sur le panneau, pour que le texte des règles reste le même des
   deux côtés et qu'une retouche se recopie sans se retraduire.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

#boChatPanel {
  --accent: #6B21A8;
  --primary: #6B21A8;
  --primary-light: #A855F7;
  --primary-dark: #4C1D95;
  --bo-purple-dark: #4C1D95;
  --primary-bg: #F3E8FF;
  --accent-tint: #F3E8FF;
  --surface: #fff;
  --border: #E8E4EE;
  --text: #1B1230;
  --text-sec: #5B5470;
  --ink: #1B1230;
  --muted: #8A8698;

  position: fixed; z-index: 9999;
  right: 10px; bottom: 10px;
  width: min(370px, 94vw); height: min(620px, 85vh);
  background: var(--surface);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(24, 6, 46, .32);
  display: none; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(107, 33, 168, .12);
  font-family: var(--texte);
}
#boChatPanel.open { display: flex; animation: boPanelIn .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes boPanelIn { from { opacity: 0; transform: translateY(24px) scale(.96) } to { opacity: 1; transform: none } }

#boChatHead {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
#boChatHead .boAvatar {
  width: 34px; height: 34px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, #7C3AED, var(--bo-purple-dark));
  display: flex; align-items: center; justify-content: center; color: #fff;
}
#boChatHead .boAvatar svg { width: 19px; height: 19px; }
/* Oufy sort du carré violet, comme dans Manage et la vitrine. */
#boChatHead .boAvatar.oufy { background: none !important; width: auto; height: auto; }
#boChatHead .boAvatar.oufy svg { width: auto; height: auto; }
#boChatHead .boTitle { font-family: var(--titre); font-weight: 800; font-size: 15px; color: var(--text); line-height: 1.15; }
#boChatHead .boClose {
  margin-left: auto; background: transparent; border: none;
  line-height: 1; color: #9CA3AF; cursor: pointer;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
#boChatHead .boClose svg { width: 20px; height: 20px; }
#boChatHead .boClose:hover { background: #F3F4F6; }

#boChatBody {
  flex: 1; overflow-y: auto; padding: 18px 16px 8px;
  display: flex; flex-direction: column; gap: 14px;
  background: #fff;
  scroll-behavior: smooth;
}

/* L'accueil façon Gemini : salutation en dégradé puis suggestions cliquables. */
.boGreet { padding: 6px 2px 2px; }
.boGreet h2 {
  font-family: var(--titre);
  font-size: 27px; line-height: 1.2; font-weight: 700; margin: 0 0 4px;
  background: linear-gradient(90deg, #7C3AED, #C026D3 45%, var(--primary-dark));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.boGreet p { font-size: 22px; line-height: 1.25; color: #5F6368; margin: 0; font-weight: 400; }
.boChips { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.boChip {
  display: flex; align-items: center; gap: 10px;
  background: #F6F3FB; border: 1px solid var(--border);
  border-radius: 999px; padding: 11px 16px;
  font-size: 14px; color: var(--text); text-align: left;
  cursor: pointer; transition: background .15s ease, transform .15s ease;
  font-family: inherit;
}
.boChip:hover { background: var(--accent-tint); }
.boChip:active { transform: scale(.98); background: var(--accent-tint); }
.boChip svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

/* Les bulles : la personne à droite dans un cartouche, Oufy à plat, comme Gemini. */
.boMsg { max-width: 86%; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.boMsg.customer {
  align-self: flex-end;
  background: linear-gradient(135deg, #7C3AED, var(--primary));
  color: #fff; padding: 11px 15px;
  border-radius: 20px 20px 5px 20px;
  box-shadow: 0 2px 8px rgba(27, 18, 48, .08);
}
.boMsg.ai { align-self: flex-start; color: var(--text); padding: 2px 0; max-width: 100%; }

.boTyping { display: flex; gap: 5px; padding: 6px 2px; align-self: flex-start; }
.boTyping span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary-light);
  animation: boDot 1.3s ease-in-out infinite;
}
.boTyping span:nth-child(2) { animation-delay: .18s }
.boTyping span:nth-child(3) { animation-delay: .36s }
@keyframes boDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-6px); opacity: 1 } }

/* La zone de saisie : la CARTE de Manage — le texte, puis les outils, l'envoi au bout. */
#boChatFoot { flex: none; padding: 10px 12px 14px; background: #fff; }
.boInputWrap {
  display: flex; align-items: flex-end; gap: 8px;
  background: #fff;
  border: 1.5px solid #E4E0EB;
  border-radius: 28px;
  padding: 5px 5px 5px 6px;
  box-shadow: 0 1px 2px rgba(18, 12, 26, .04), 0 6px 18px rgba(18, 12, 26, .05);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.boInputWrap:focus-within {
  border-color: #B9B2C6;
  box-shadow: 0 2px 6px rgba(18, 12, 26, .07), 0 10px 26px rgba(18, 12, 26, .09);
}
/* SEIZE PIXELS, PAS MOINS : en dessous, l'iPhone zoome toute la page dès qu'on touche
   le champ. Mesuré dans la vitrine le 13 octobre 2026. */
#boChatInput {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none; resize: none;
  font-size: 16px; font-family: inherit; color: var(--text);
  padding: 9px 0; min-height: 24px; max-height: 156px; line-height: 1.45; overflow-y: auto;
  caret-color: var(--accent);
}
#boChatInput::placeholder { color: #A9A3B6; }
#boEmoji {
  width: 34px; height: 34px; flex: none;
  border: none; background: none; color: #8A8698; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; align-self: flex-end; margin-bottom: 3px;
  transition: color .15s ease, background .15s ease;
}
#boEmoji svg { width: 21px; height: 21px; }
#boEmoji:hover { background: rgba(0, 0, 0, .05); color: var(--accent); }
#boChatSend {
  width: 40px; height: 40px; flex: none; border: none; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  align-self: flex-end; margin-bottom: 3px;
  transition: background .18s ease, transform .15s ease;
}
#boChatSend svg { width: 18px; height: 18px; }
#boChatSend:active { transform: scale(.92); }
/* Le micro, en pastille pleine à droite : la cible la plus évidente de l'écran, là où
   la main la cherche puisque c'est là qu'elle est dans WhatsApp. */
/* LE MICRO EST NU, comme dans la discussion d'Oufy de Manage (ZoneSaisie.tsx : le
   MicTranscribeButton y est posé `nu`, 36 px, dessin de 23 px). Pas de pastille au
   repos : il prend l'encre des autres outils de la zone. Il ne se remplit de violet
   que pendant qu'il écoute — c'est l'écoute qui mérite une couleur, pas l'attente. */
#boMicro {
  position: relative;
  width: 36px; height: 36px; flex: none; align-self: flex-end; margin-bottom: 3px;
  border: none; border-radius: 50%;
  background: transparent; color: #8A8698; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
#boMicro svg { width: 23px; height: 23px; }
#boMicro:hover { background: rgba(0, 0, 0, .05); color: var(--accent); }
#boMicro:active { transform: scale(.92); }
#boMicro.actif {
  background: var(--accent); color: #fff; transform: scale(1.12);
  box-shadow: 0 0 0 8px rgba(107, 33, 168, .18);
}
#boEmojiTiroir {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin-top: 8px; padding: 6px 4px;
  background: #F6F3FB; border-radius: 18px;
}
#boEmojiTiroir::-webkit-scrollbar { display: none; }
#boEmojiTiroir[hidden] { display: none; }
.boEmojiChoix {
  flex: none; width: 38px; height: 38px; border: none; background: none;
  font-size: 22px; line-height: 1; cursor: pointer; border-radius: 12px;
}
.boEmojiChoix:hover { background: rgba(0, 0, 0, .06); }

@media (max-height: 720px) {
  #boChatPanel { height: min(620px, 82dvh); max-height: calc(100dvh - 20px); }
}
@media (max-width: 480px) {
  #boChatPanel { right: 8px; left: 8px; bottom: 8px; width: auto; }
}

/* ═══════════════════ LE TÉLÉPHONE : MOINS DE LIGNES ═══════════════════
   Le titre tenait sur quatre lignes, le sous-titre sur trois, et la bande des
   chiffres occupait un écran entier pour quatre nombres. Sur un téléphone, chaque
   ligne en trop repousse le bouton hors de vue. */

@media (max-width: 680px) {
  .hero-titre { font-size: 1.62rem; letter-spacing: -.035em; line-height: 1.14; margin-top: 18px; }
  .hero-sous { margin-top: 14px; font-size: .95rem; line-height: 1.45; }
  .hero-sous .lib-long { display: none; }
  .hero-sous .lib-court { display: inline; }
  .hero-actions { margin-top: 24px; }

  /* Les légendes du carrousel : deux lignes, jamais trois. */
  .ctxt {
    font-size: .88rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

}

@media (max-width: 380px) {
  .hero-titre { font-size: 1.48rem; }
}

/* Le lien de secours, quand le serveur ne répond pas. */
.boLienWa { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--violet); text-decoration: underline; }

/* ═══════════════ L'EN-TÊTE SUIT LA LECTURE ═══════════════
   Le lien de la section qu'on est en train de lire s'allume et se souligne. Le trait
   existait déjà au survol : on réutilise le même, sinon survoler et être « sur » la
   section donneraient deux dessins différents pour la même idée. */

.nav a.ici { color: var(--encre); border-bottom-color: var(--violet); }
.nav-mobile a.ici { color: var(--violet); }

/* ═══════════════════════════════════════════════════════════════════════════
   LES SIX PAGES — ce que l'accueil seul n'avait pas.

   Rien n'est redessiné ici : les sections, les boutons, les étiquettes et le
   pied viennent du haut de ce fichier. On n'ajoute que les blocs qui n'avaient
   pas encore lieu d'être quand tout tenait sur une seule page.
   ═══════════════════════════════════════════════════════════════════════════ */

.lien-connexion {
  font-family: var(--titre); font-weight: 700; font-size: .92rem;
  color: var(--encre); white-space: nowrap;
}
.lien-connexion:hover { color: var(--violet); }
.nav-mobile .lien-connexion { padding: 13px 0; border-bottom: 1px solid var(--trait); }

/* Une page intérieure n'a pas de héro : elle commence juste sous la barre, et
   reprend le ton du haut de l'accueil pour qu'on reste dans la même maison. */
.section-haut {
  padding-top: 64px;
  background: linear-gradient(180deg, #F1ECFA 0%, #FAF8FD 70%, #FFFFFF 100%);
}
.section-haut .section-tete { margin-bottom: 42px; }
.cta-rang { display: flex; justify-content: center; margin-top: 44px; }

/* ── Les fonctions de la gérante : une image, un texte, en alternance ── */
.fonctions-liste { display: flex; flex-direction: column; gap: 34px; }
.fonction {
  display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 34px;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-grand);
  overflow: hidden; box-shadow: var(--ombre);
}
.fonction-inverse { grid-template-columns: 1fr 300px; }
.fonction-inverse .fonction-vue { order: 2; }
.fonction-vue { margin: 0; height: 100%; min-height: 210px; position: relative; background: var(--pale); }
.fonction-vue > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fonction-mot { padding: 26px 32px; }
.fonction-mot h3 { font-size: 1.22rem; margin-bottom: 9px; }
.fonction-mot p { color: var(--encre-douce); font-size: .98rem; line-height: 1.6; max-width: 54ch; }

/* ── Les types de commerce ── */
.commerces { display: flex; flex-wrap: wrap; gap: 10px; }
.commerces span {
  font-family: var(--titre); font-weight: 700; font-size: .9rem; color: var(--encre);
  background: #fff; border: 1px solid var(--trait); border-radius: 999px; padding: 10px 18px;
}

/* ── Les étapes numérotées ── */
.etapes-n {
  list-style: none; margin: 0; padding: 0; counter-reset: pas;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.etapes-n li {
  counter-increment: pas; position: relative; padding-top: 52px;
  display: flex; flex-direction: column; gap: 7px;
}
.etapes-n li::before {
  content: counter(pas); position: absolute; top: 0; left: 0;
  width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center;
  background: var(--violet); color: #fff; font-family: var(--titre); font-weight: 800; font-size: .98rem;
}
.etapes-n b { font-family: var(--titre); font-size: 1.06rem; }
.etapes-n span { color: var(--encre-douce); font-size: .94rem; line-height: 1.55; }

/* ── La FAQ ── */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r);
  padding: 4px 20px; transition: border-color .18s ease;
}
.faq details[open] { border-color: var(--violet-clair); }
.faq summary {
  font-family: var(--titre); font-weight: 700; font-size: 1rem; color: var(--encre);
  padding: 16px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--encre-douce); border-bottom: 2px solid var(--encre-douce);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { padding: 0 0 18px; color: var(--encre-douce); font-size: .96rem; line-height: 1.65; max-width: 70ch; }

/* ── Les offres. Les prix viennent de SubscriptionsController.Plans ── */
.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.offre {
  position: relative; background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-grand); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 16px; box-shadow: var(--ombre);
}
.offre-vedette { border-color: var(--violet); box-shadow: 0 20px 50px rgba(107, 33, 168, .16); }
.offre-ruban {
  position: absolute; top: -12px; left: 28px;
  font-family: var(--titre); font-weight: 800; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--violet);
  border-radius: 999px; padding: 5px 13px;
}
.offre h3 { font-size: 1.3rem; }
.offre-prix { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.offre-prix b { font-family: var(--titre); font-weight: 800; font-size: 2.3rem; letter-spacing: -.04em; color: var(--violet); }
.offre-prix span { font-size: .88rem; color: var(--encre-douce); }
.offre ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.offre li { position: relative; padding-left: 26px; font-size: .95rem; line-height: 1.5; color: var(--encre-douce); }
.offre li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 15px; height: 9px;
  border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert);
  transform: rotate(-45deg);
}
.offre .bouton { justify-content: center; }
.offres-note { margin-top: 24px; font-size: .9rem; color: var(--encre-douce); max-width: 70ch; }

/* ── Le téléchargement ── */
.telechargements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.telechargement {
  display: flex; flex-direction: column; gap: 8px; padding: 28px 26px;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-grand);
  box-shadow: var(--ombre); color: var(--encre);
  transition: border-color .18s ease, transform .18s ease;
}
a.telechargement:hover { border-color: var(--violet); transform: translateY(-2px); }
.telechargement-bientot { opacity: .62; }
.tc-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--pale); color: var(--violet); margin-bottom: 6px;
}
.telechargement b { font-family: var(--titre); font-size: 1.1rem; }
.telechargement span:not(.tc-ico) { color: var(--encre-douce); font-size: .92rem; line-height: 1.5; }

.qr-bloc { margin-top: 36px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.qr-bloc p { color: var(--encre-douce); font-size: .94rem; }
/* Un VRAI code QR, genere par qrcode vers manage.boutiqueouf.com : un carre
   decoratif qui ne scanne pas serait une promesse que la page ne tient pas. */
.qr {
  width: 132px; height: 132px; flex: none; border-radius: 16px;
  background: #fff; border: 1px solid var(--trait); padding: 8px;
}

/* ── Les avis ── */
.avis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.avis-carte {
  margin: 0; padding: 28px; background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-grand); box-shadow: var(--ombre);
}
.avis-carte blockquote {
  margin: 0 0 18px; font-family: var(--titre); font-weight: 600; font-size: 1.08rem;
  line-height: 1.5; color: var(--encre);
}
.avis-carte figcaption { display: flex; flex-direction: column; gap: 2px; }
.avis-carte figcaption b { font-family: var(--titre); font-size: .96rem; }
.avis-carte figcaption span { font-size: .86rem; color: var(--encre-douce); }

@media (max-width: 980px) {
  .fonction, .fonction-inverse { grid-template-columns: 1fr; }
  .fonction-inverse .fonction-vue { order: initial; }
  .fonction-vue { min-height: 200px; }
  .fonction-mot { padding: 22px 24px 26px; }
  .etapes-n { grid-template-columns: repeat(2, 1fr); }
  .offres, .telechargements, .avis { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .section-haut { padding-top: 40px; }
  .etapes-n { grid-template-columns: 1fr; gap: 18px; }
  .etapes-n li { padding-top: 0; padding-left: 50px; min-height: 38px; justify-content: center; }
  .offre-prix b { font-size: 2rem; }
}

/* ── La barre tient six onglets et deux actions ──
   Avec trois onglets elle avait de la place. À six, plus « Se connecter » et
   « Créer ma boutique », elle débordait de 29 px à 1440 : le premier onglet
   venait toucher le mot BoutiqueOuf. On resserre au lieu de replier, parce
   qu'un onglet qui passe à la ligne n'est plus un onglet. */
.entete-rangee { gap: 20px; }
.nav { gap: 18px; }
.nav a { font-size: .88rem; }
.entete-actions { gap: 12px; }
.entete-cta { padding: 10px 17px; font-size: .88rem; }

@media (max-width: 1180px) {
  .entete-rangee { gap: 14px; }
  .nav { gap: 13px; }
  .nav a { font-size: .83rem; }
  .entete-cta { padding: 9px 14px; font-size: .84rem; }
}


/* Le code QR du bloc violet est un VRAI code, genere vers manage.boutiqueouf.com.
   Le damier dessine en CSS invitait a le viser avec l'appareil photo sans rien rendre. */
.tb-qr-vrai { width: 104px; height: 104px; border-radius: 14px; background: #fff; padding: 7px; }
.section-haut-courte { padding-bottom: 18px; }
.section-haut-courte .section-tete { margin-bottom: 0; }

/* ── Les liens de l'accueil vers les vraies pages ──
   Chaque section de l'accueil resume une page : sans ces liens, l'accueil est un
   cul-de-sac et les cinq autres pages n'existent que dans la barre du haut. */
.lien-page { margin-top: 26px; }
.lien-page a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--titre); font-weight: 700; font-size: .98rem; color: var(--violet);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color .18s ease, gap .18s ease;
}
.lien-page a:hover { border-bottom-color: var(--violet); gap: 11px; }
.lien-page svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.section-lien { padding: 40px 0 0; }
.section-lien .conteneur { display: flex; gap: 34px; flex-wrap: wrap; }
.section-lien .lien-page { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   20/10/2026 — JM : « fais du waouh ». Apparitions, téléphones, vitrine, bento.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Les blocs montent en apparaissant. `--d` décale les voisins d'un bento. */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
[data-reveal].vu { opacity: 1; transform: none; }
#fonctions { padding-top: 40px; }

/* Le téléphone : un cadre, un écran. Il porte une vidéo ou une vitrine. */
.tel { position: relative; width: 272px; aspect-ratio: 9 / 19; border-radius: 42px; background: #0E0A18; padding: 11px; box-shadow: 0 34px 70px rgba(27, 18, 48, .38), inset 0 0 0 1.5px #2B2140; flex: none; }
.tel::before { content: ''; position: absolute; top: 22px; left: 50%; width: 80px; height: 20px; margin-left: -40px; background: #0E0A18; border-radius: 999px; z-index: 3; }
.tel-petit { width: 224px; border-radius: 36px; }
.tel-petit::before { top: 19px; width: 64px; height: 16px; margin-left: -32px; }
.tel-ecran { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #fff; }
.tel-ecran video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tel-duree { position: absolute; top: 50px; left: 14px; background: rgba(8, 3, 18, .66); color: #fff; font-family: var(--titre); font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.fond-nuit { background: linear-gradient(150deg, #1C1430, #4C1D95); }

/* La vitrine dans le téléphone : ce que voit le client. */
.vit { height: 100%; display: flex; flex-direction: column; background: #fff; font-size: 11px; }
.vit-tete { display: flex; align-items: center; gap: 8px; padding: 46px 12px 10px; background: linear-gradient(120deg, #B81B60, #D52271 60%, #E84B8E); color: #fff; }
.vit-tete .mkb-logo { width: 28px; height: 28px; border-radius: 8px; }
.vit-tete .mkb-nom { font-size: 12px; }
.vit-panier { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--rose); font-style: normal; font-family: var(--titre); font-weight: 800; font-size: 10px; display: grid; place-items: center; }
.vit-heros { position: relative; height: 118px; overflow: hidden; flex: none; }
.vit-heros img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.vit-promo { position: absolute; left: 10px; bottom: 10px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); display: flex; flex-direction: column; }
.vit-promo span { font-family: var(--titre); font-size: 8px; letter-spacing: .2em; font-weight: 700; }
.vit-promo b { font-family: var(--titre); font-size: 13px; font-weight: 800; }
.vit .pc-chips { padding: 0 10px; margin: 10px 0 8px; overflow: hidden; }
.vit .pc-chips span { font-size: 9.5px; padding: 4px 9px; flex: none; }
.vit-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 10px; flex: 1; align-content: start; overflow: hidden; }
.vit-grille figure { margin: 0; border-radius: 10px; overflow: hidden; background: #F6F3FB; }
.vit-grille img { width: 100%; height: 84px; object-fit: cover; display: block; }
.vit-grille figcaption { padding: 6px 8px 8px; font-family: var(--titre); font-weight: 600; font-size: 9.5px; color: #4A4262; display: flex; flex-direction: column; }
.vit-grille figcaption b { font-weight: 800; font-size: 10.5px; color: var(--rose); }
.vit-bas { margin-top: auto; padding: 10px; flex: none; }
.vit-bas span { display: block; text-align: center; background: #25D366; color: #fff; font-family: var(--titre); font-weight: 700; font-size: 11px; padding: 10px; border-radius: 999px; }
.vit-article .vit-photo { height: 56%; overflow: hidden; flex: none; }
.vit-article .vit-photo img { width: 100%; height: 100%; object-fit: cover; }
.vit-fiche { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.vit-fiche b { font-family: var(--titre); font-size: 15px; font-weight: 800; }
.vit-prix { font-family: var(--titre); font-weight: 800; font-size: 18px; color: var(--rose); }
.vit-prix i { font-style: normal; font-size: 10px; }
.vit-bouton { align-self: stretch; margin-top: auto; text-align: center; background: var(--violet); color: #fff; font-family: var(--titre); font-weight: 700; font-size: 11px; padding: 10px; border-radius: 999px; }

/* La page Gérants : les maquettes remplacent les photos nues. */
.fonction { grid-template-columns: 440px 1fr; gap: 20px; }
.fonction-inverse { grid-template-columns: 1fr 440px; }
.fonction-vue { display: grid; place-items: center; padding: 30px; min-height: 350px; }
.fonction-vue .mk { max-width: 340px; width: 100%; }
.fonction-vue .bulle { position: absolute; }
.fonction-mot { padding: 30px 44px; }
.fonction-mot h3 { font-size: 1.5rem; }
.fonction-mot p { font-size: 1.04rem; }
.mk-fiche { display: flex; }
.mkf-photo { position: relative; width: 46%; flex: none; height: 196px; }
.mkf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkf-photo .jeton { position: absolute; top: 10px; left: 10px; }
.mkf-infos { padding: 18px; display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; }
.mkf-infos b { font-family: var(--titre); font-size: 15px; font-weight: 800; }
.mkf-prix { font-family: var(--titre); font-weight: 800; font-size: 20px; color: var(--rose); }
.mkf-prix i { font-style: normal; font-size: 11px; }
.mkf-tailles { display: flex; gap: 6px; }
.mkf-tailles span { width: 26px; height: 26px; border-radius: 8px; border: 1.4px solid #E3DDF0; display: grid; place-items: center; font-family: var(--titre); font-size: 10px; font-weight: 700; color: #6E6686; }
.mkf-tailles .on { background: var(--violet); border-color: var(--violet); color: #fff; }
.mko-note { margin-top: 6px; background: #fff; border: 1px solid #EDE8F7; border-radius: 12px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
.mko-note b { font-family: var(--titre); font-size: 10px; font-weight: 800; color: var(--violet); letter-spacing: .04em; text-transform: uppercase; }
.mko-note span { font-size: 11.5px; color: #4A4262; }

/* Le bento « Ce que BoutiqueOuf te donne ». */
.cadeaux { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 210px; gap: 16px; }
.cadeau { position: relative; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--trait); box-shadow: var(--ombre); grid-column: span 4; }
.cadeau-haut { grid-row: span 2; border: 0; background: #1C1430; }
.cadeau-large { grid-column: span 8; }
.cadeau video, .cadeau-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cadeau-mot { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 20px; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(0deg, rgba(8, 3, 18, .8), transparent); color: #fff; }
.cadeau-mot b { font-family: var(--titre); font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; }
.cadeau-mot span { font-size: .88rem; opacity: .88; }
.cadeau-photo { border: 0; }
.cadeau-clair, .cadeau-violet, .cadeau-oufy { padding: 20px; display: flex; flex-direction: column; }
.cadeau-clair .cadeau-mot, .cadeau-violet .cadeau-mot, .cadeau-oufy .cadeau-mot { position: static; padding: 0; background: none; margin-bottom: 14px; }
.cadeau-clair .cadeau-mot { color: var(--encre); }
.cadeau-clair .cadeau-mot span { color: var(--encre-douce); opacity: 1; }
.cadeau-mosaique { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cadeau-mosaique img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cadeau-violet { background: linear-gradient(150deg, #6D28D9 0%, #7C3AED 46%, #9F67F5 100%); border: 0; color: #fff; }
.cadeau-rs { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: end; }
.cadeau-rs .rs { text-align: center; padding: 11px 10px; font-size: 11px; }
.cadeau-pay { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cadeau-pay span { display: grid; place-items: center; background: #F6F3FB; border-radius: 12px; }
.cadeau-pay img { height: 28px; max-width: 70%; object-fit: contain; }
.cadeau-pay-txt { font-family: var(--titre); font-weight: 800; color: #1B4FBF; }
.cadeau-oufy { background: linear-gradient(150deg, #1C1430, #4C1D95 70%, #6B21A8); border: 0; color: #fff; flex-direction: row; align-items: center; gap: 24px; padding: 24px 30px; }
.cadeau-oufy .cadeau-mot { margin: 0; }
.cadeau-oufy-face { width: 96px; height: 96px; border-radius: 28px; flex: none; box-shadow: 0 18px 44px rgba(0, 0, 0, .34); }

/* « Voilà à quoi ressemble ton shop », et la question qui fait avancer. */
.vitrine-demo { padding: 30px 0 96px; }
.vitrine-boite {
  position: relative; overflow: hidden; border-radius: 34px; padding: 64px 60px; color: #fff;
  background: radial-gradient(900px 500px at 12% 8%, #7C3AED 0%, transparent 60%), linear-gradient(135deg, #1C1430 0%, #3B1A7A 55%, #6B21A8 100%);
}
.vitrine-contenu { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.vitrine-texte h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin: 18px 0 0; }
.vitrine-texte p { margin-top: 14px; color: rgba(255, 255, 255, .84); max-width: 46ch; font-size: 1.06rem; }
.vitrine-texte .vitrine-question { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3vw, 2.4rem); color: #fff; margin-top: 30px; line-height: 1.1; }
.vitrine-actions { display: flex; align-items: center; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.bouton-blanc { background: #fff; color: var(--violet); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.bouton-blanc:hover { background: #F3E8FF; transform: translateY(-1px); }
.lien-clair { color: #fff; font-family: var(--titre); font-weight: 700; border-bottom: 2px solid rgba(255, 255, 255, .4); padding-bottom: 2px; transition: border-color .18s ease; }
.lien-clair:hover { border-bottom-color: #fff; }
.vitrine-tel { display: flex; justify-content: center; }
.vitrine-tel .tel { transform: rotate(-4deg); }

/* La page Clients : quatre gestes, quatre formats d'image. */
.parcours { list-style: none; margin: 0; padding: 0; counter-reset: pas; display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.pas { counter-increment: pas; display: flex; flex-direction: column; gap: 16px; }
.pas-a { grid-column: span 7; }
.pas-b { grid-column: span 5; grid-row: span 2; }
.pas-c { grid-column: span 3; }
.pas-d { grid-column: span 4; }
.pas-vue { position: relative; flex: 1; min-height: 250px; border-radius: 24px; overflow: hidden; display: grid; place-items: center; padding: 26px; }
.pas-b .pas-vue { min-height: 540px; }
.pas-vue-photo { padding: 0; background: var(--pale); }
.pas-vue-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pas-vue .mk { max-width: 330px; width: 100%; }
.mk-flottant { position: absolute; left: 18px; right: 18px; bottom: 18px; width: auto; max-width: none; }
.pas-mot { position: relative; padding-left: 52px; display: flex; flex-direction: column; gap: 5px; }
.pas-mot::before { content: counter(pas); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-family: var(--titre); font-weight: 800; font-size: .98rem; }
.pas-mot b { font-family: var(--titre); font-size: 1.14rem; }
.pas-mot span { color: var(--encre-douce); font-size: .95rem; line-height: 1.55; }
.mk-payer { padding: 16px; }
.mk-payer .mks-bouton { margin-top: 12px; }
.mk-wa { padding: 14px; background: #ECE5DD; }
.mkw-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.mkw-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; font-size: 13px; flex: none; }
.mkw-tete > span { display: flex; flex-direction: column; }
.mkw-tete b { font-family: var(--titre); font-size: 12px; font-weight: 800; }
.mkw-tete small { font-size: 10px; color: #4A7A4A; }
.mkw-bulle { background: #fff; border-radius: 12px; border-top-left-radius: 3px; padding: 9px 11px; font-size: 12px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.mkw-bulle a { display: block; color: #0A66C2; text-decoration: underline; font-size: 11.5px; margin-top: 2px; word-break: break-all; }
.mkw-apercu { display: flex; gap: 9px; align-items: center; background: #F3F0F8; border-radius: 9px; padding: 7px; margin-top: 8px; }
.mkw-apercu img { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; flex: none; }
.mkw-apercu span { display: flex; flex-direction: column; }
.mkw-apercu b { font-family: var(--titre); font-size: 11.5px; font-weight: 800; }
.mkw-apercu small { font-size: 10px; color: #847C99; }
.cta-rang-gauche { justify-content: flex-start; margin-top: 28px; }
.duo-texte h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 14px 0 14px; }

/* Tarifs : ce que Pro et Premium APPORTENT, à la place de la commission. */
.avantages { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.avantage { position: relative; overflow: hidden; border-radius: var(--r-grand); padding: 30px 32px; background: #fff; border: 1px solid var(--trait); box-shadow: var(--ombre); }
.avantage-pour { display: inline-block; font-family: var(--titre); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); background: var(--pale); border-radius: 999px; padding: 5px 12px; }
.avantage h3 { font-size: 1.45rem; margin: 14px 0 10px; }
.avantage p { color: var(--encre-douce); line-height: 1.6; max-width: 48ch; }
.avantage-premium { background: linear-gradient(150deg, #1C1430, #4C1D95 60%, #6B21A8); border: 0; color: #fff; }
.avantage-premium .avantage-pour { background: rgba(255, 255, 255, .14); color: #fff; }
.avantage-premium p { color: rgba(255, 255, 255, .84); }

@media (max-width: 980px) {
  .fonction, .fonction-inverse { grid-template-columns: 1fr; }
  .fonction-inverse .fonction-vue { order: 0; }
  .fonction-vue { min-height: 300px; padding: 24px; }
  .cadeaux { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .cadeau { grid-column: span 1; }
  .cadeau-large { grid-column: span 2; }
  .vitrine-contenu { grid-template-columns: 1fr; }
  .vitrine-boite { padding: 44px 26px; }
  .vitrine-tel .tel { transform: none; }
  .parcours { grid-template-columns: 1fr 1fr; }
  .pas-a, .pas-b, .pas-c, .pas-d { grid-column: span 1; grid-row: auto; }
  .pas-a { grid-column: span 2; }
  .pas-b .pas-vue { min-height: 460px; }
  .avantages { grid-template-columns: 1fr; }
  .conteneur.duo { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cadeaux { grid-template-columns: 1fr; }
  .cadeau, .cadeau-large { grid-column: span 1; }
  .parcours { grid-template-columns: 1fr; }
  .pas-a { grid-column: span 1; }
  .cadeau-oufy { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ═══════════ Les deux applications : Business (gérant) et BoutiqueOuf (client) ═══════════
   JM, 20/10/2026 : « il y a deux applications ». Le cadre violet les présente côte à
   côte, un onglet chacune, avec sa propre icône, ses propres boutons et son code QR. */

.apps-onglets {
  display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 30px;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; backdrop-filter: blur(8px);
}
.app-ong {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 0; background: transparent; border-radius: 999px; padding: 9px 18px 9px 10px;
  font-family: var(--titre); font-weight: 700; font-size: .94rem; white-space: nowrap;
  color: rgba(255, 255, 255, .78); transition: background .2s ease, color .2s ease;
}
.app-ong img { width: 28px; height: 28px; border-radius: 9px; padding: 2px; object-fit: contain; background: #fff; flex: none; }
.app-ong:hover { color: #fff; }
.app-ong.actif { background: #fff; color: var(--violet); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }

.app-volet { display: grid; grid-template-columns: 1.35fr .65fr; gap: 44px; align-items: center; }
.app-volet[hidden] { display: none; }
/* Le volet qu'on vient d'afficher monte doucement : sans ça, le changement d'onglet
   fait un à-coup sec, et on ne voit pas que le contenu a changé. */
@keyframes volet-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.app-volet:not([hidden]) { animation: volet-entre .4s cubic-bezier(.2, .7, .2, 1); }

/* L'étiquette d'une application porte son icône. */
.etiquette .et-ico { width: 20px; height: 20px; border-radius: 6px; padding: 1px; object-fit: contain; background: #fff; margin-right: 2px; }
.etiquette { display: inline-flex; align-items: center; gap: 8px; }

/* ── « Comment ça marche » : le numéro du geste et les précisions ── */
.pas-num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--violet); color: #fff; font-family: var(--titre); font-weight: 800;
  font-size: .96rem; margin-bottom: 14px;
}
.detail-liste { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.detail-liste li { position: relative; padding-left: 26px; font-size: .95rem; line-height: 1.55; color: var(--encre-douce); }
.detail-liste li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 8px;
  border-left: 2px solid var(--violet-clair); border-bottom: 2px solid var(--violet-clair);
  transform: rotate(-45deg);
}

@media (max-width: 980px) {
  .app-volet { grid-template-columns: 1fr; gap: 30px; }
  .apps-onglets { display: flex; width: 100%; }
  .app-ong { flex: 1; justify-content: center; padding: 9px 12px 9px 9px; font-size: .86rem; }
}
@media (max-width: 600px) {
  .app-ong span { font-size: .8rem; }
  .app-ong img { width: 24px; height: 24px; }
}


/* ═══════════ Télécharger : une carte par application ═══════════
   La page a la largeur pour les montrer ENSEMBLE : deux onglets obligeaient à cliquer
   pour decouvrir la seconde, et personne ne clique sur ce qu'il ne sait pas manquer. */
.apps-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.app-carte {
  position: relative; overflow: hidden; border-radius: var(--r-grand);
  padding: 42px 38px; color: #fff; display: flex; flex-direction: column;
  background: linear-gradient(135deg, #1C1430 0%, #3B1A7A 55%, #6B21A8 100%);
}
.app-carte > *:not(.tb-lueur) { position: relative; z-index: 2; }
.app-carte-tete { display: flex; align-items: center; gap: 15px; margin-bottom: 26px; }
.app-carte-ico {
  width: 76px; height: 76px; border-radius: 22px; background: #fff; padding: 6px;
  object-fit: contain; box-shadow: 0 14px 34px rgba(0, 0, 0, .32); flex: none;
}
.app-carte-nom { font-family: var(--titre); font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.app-carte h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.app-carte p { margin: 12px 0 26px; color: rgba(255, 255, 255, .84); }
.app-carte .badges { margin-bottom: 28px; }
.app-carte-bas { margin-top: auto; }

@media (max-width: 980px) {
  .apps-duo { grid-template-columns: 1fr; }
  .app-carte { padding: 34px 26px; }
}


/* ═══════════ 20/10/2026 — la conversation d'Oufy, et moins de violet ═══════════ */

/* LA CARTE D'OUFY MONTRE LA CONVERSATION (JM : « montre les conversations en vidéo, un
   truc où Oufy est en train de répondre »). Pas une vidéo à charger : les bulles
   arrivent l'une après l'autre, en boucle, et la carte passe au BLANC — le bento avait
   trop d'aplats violets. */
.cadeau-chat {
  background: #fff; border: 1px solid var(--trait);
  display: flex; align-items: center; gap: 24px; padding: 20px 26px;
}
.cadeau-chat .cadeau-mot {
  position: static; padding: 0; background: none; color: var(--encre); flex: 1;
}
.cadeau-chat .cadeau-mot span { color: var(--encre-douce); opacity: 1; }
.oc {
  width: 54%; max-width: 310px; flex: none; align-self: stretch;
  background: var(--fond-doux); border: 1px solid var(--trait); border-radius: 14px;
  padding: 10px 12px; display: flex; flex-direction: column; overflow: hidden;
}
.oc-tete { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--trait); }
.oc-tete img { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.oc-tete span { display: flex; flex-direction: column; min-width: 0; }
.oc-tete b { font-family: var(--titre); font-size: 11.5px; font-weight: 800; }
.oc-tete small { font-size: 9px; color: #2E8B3C; }
.oc-pt { width: 7px; height: 7px; border-radius: 50%; background: #35C759; margin-left: auto; flex: none; }
.oc-fil { flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 9px; justify-content: flex-end; }
.oc-bulle {
  max-width: 84%; padding: 7px 11px; font-size: 11px; line-height: 1.35; border-radius: 13px;
  opacity: 0; animation: oc-passe 9s infinite; animation-delay: calc(var(--i) * 1.1s);
}
.oc-cli { align-self: flex-end; background: linear-gradient(120deg, var(--violet), #9333EA); color: #fff; border-bottom-right-radius: 4px; }
.oc-ouf { align-self: flex-start; background: #fff; border: 1px solid #EFEAF8; border-bottom-left-radius: 4px; }
@keyframes oc-passe {
  0%, 3% { opacity: 0; transform: translateY(7px); }
  9%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
.oc-tape { display: flex; gap: 4px; align-items: center; padding: 10px 12px; }
.oc-tape i { width: 5px; height: 5px; border-radius: 50%; background: #B9B0CC; animation: oc-point 1.3s infinite; }
.oc-tape i:nth-child(2) { animation-delay: .18s; }
.oc-tape i:nth-child(3) { animation-delay: .36s; }
@keyframes oc-point { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* MOINS DE VIOLET (JM : « il y a trop de fond totalement violet »). Le noir et le blanc
   de la marque prennent leur part : la carte des reseaux passe au noir, la carte du
   client aussi, et le bloc de l'espace client passe au clair. */
.cadeau-violet { background: linear-gradient(150deg, #15101F 0%, #241A38 100%); }
/* LA CARTE DU CLIENT EST CLAIRE, comme le bloc de l'espace client sur la page Clients
   (JM, 20/10/2026 : « je veux la même chose pour le client »). Les deux applications se
   distinguent ainsi d'un coup d'œil : le gérant sur le violet, le client sur le clair. */
.app-carte-client { background: var(--fond-doux); border: 1px solid var(--trait); color: var(--encre); }
.app-carte-client h2 { color: var(--encre); }
.app-carte-client p { color: var(--encre-douce); }
.app-carte-client .app-carte-nom { color: var(--encre); }
.app-carte-client .app-carte-ico { box-shadow: 0 10px 26px rgba(27, 18, 48, .14); border: 1px solid var(--trait); }
.app-carte-client .tb-lueur { opacity: .3; }
.app-carte-client .badge { background: #15101F; border-color: #15101F; color: #fff; }
.app-carte-client .badge:hover { background: #2A2140; border-color: #2A2140; }
.app-carte-client .tb-qr-vrai { border: 1px solid var(--trait); }

.vitrine-claire { background: var(--fond-doux); border: 1px solid var(--trait); color: var(--encre); }
.vitrine-claire .etiquette-claire { color: var(--encre); border-color: var(--trait); background: #fff; }
.vitrine-claire p { color: var(--encre-douce); }
.vitrine-claire .vitrine-question { color: var(--violet); }
.vitrine-claire .tb-lueur { opacity: .3; }
.vitrine-claire .badge { background: #15101F; border-color: #15101F; color: #fff; }
.vitrine-claire .badge:hover { background: #2A2140; border-color: #2A2140; }

/* La liste d'une reponse de la FAQ : des points alignes, et le lien vers les tarifs. */
.faq-liste { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.faq-liste li { position: relative; padding-left: 22px; font-size: .96rem; color: var(--encre-douce); }
.faq-liste li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--violet-clair);
}
.faq-lien {
  display: inline-flex; align-items: center; gap: 6px; padding-bottom: 16px;
  font-family: var(--titre); font-weight: 700; font-size: .96rem; color: var(--violet);
  border-bottom: 2px solid transparent;
}
.faq-lien:hover { border-bottom-color: var(--violet); }

/* L'icone de Moov rejoint celles de Wave, Orange et MTN. */
.cadeau-pay img { border-radius: 8px; }

@media (max-width: 760px) {
  .cadeau-chat { flex-direction: column; align-items: stretch; gap: 14px; }
  .oc { width: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-bulle { opacity: 1; animation: none; }
  .oc-tape i { animation: none; }
}


/* LE PIED EST PLUS BAS (JM, 20/10/2026 : « il peut encore descendre, diminué en
   hauteur »). Les colonnes se resserrent et la rangée du milieu passe en une ligne. */
.pied-milieu { gap: 18px; }
.pied-langue { gap: 14px; }
.mot-pied { font-size: 1.15rem; }