/* Kobby — la palette de l'app, à l'identique.
   ENCRE #453A5E · OR_FONCE #E8964E · fond #F1E7DA

   ⚠ Les classes .page .marque .bloc .maj .resume .fin .pied et les styles de
   h2/h3/p/ul/table sont utilisés par confidentialite.html — page validée par
   Apple et référencée dans la fiche App Store. Ne pas les retirer. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Outfit:wght@400;500;600&display=swap');

:root {
  --encre: #453A5E;
  --encre-douce: #7C7091;
  --or: #E8964E;
  --or-clair: #F6BE7E;
  --fond: #F1E7DA;
  --carte: #FBF4EA;
  --trait: rgba(69, 58, 94, 0.12);
  --eau: #3F9E98;
  --braise: #D9713C;
  --songe: #7C6BC4;
  --statik: #6C5FCE;
  --flore: #4E8B45;
  --display: 'Baloo 2', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --texte: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* `height: auto` est indispensable : les attributs width/height du HTML (qui
   réservent la place et évitent le décalage au chargement) figeraient sinon la
   hauteur à leur valeur brute, et le logo s'étirerait sur 600 px de haut. */
img { max-width: 100%; height: auto; display: block; }

/* ——— gabarit des pages de texte (confidentialité) ——— */
.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 5rem) clamp(1.25rem, 5vw, 2rem) 4rem;
}

.marque {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 700;
  margin: 0 0 1.25rem;
}

h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  font-weight: 800;
}
h1 em { font-style: normal; color: var(--or); }

.chapo { font-size: 1.05rem; color: var(--encre-douce); margin: 0; max-width: 34rem; }

.bloc {
  background: var(--carte);
  border-radius: 22px;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  margin-top: 3rem;
}

h2 {
  font-family: var(--display);
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.bloc h3 { font-family: var(--display); font-size: 1.05rem; margin: 2rem 0 0.5rem; font-weight: 700; }
.bloc p { margin: 0 0 1rem; }
.bloc ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.bloc li { margin-bottom: 0.4rem; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-weight: 700; }

a { color: var(--or); text-underline-offset: 3px; }
a:hover { color: var(--encre); }

.maj {
  display: inline-block; font-size: 0.85rem; color: var(--encre-douce);
  background: rgba(69, 58, 94, 0.06); border-radius: 999px;
  padding: 0.3rem 0.85rem; margin-bottom: 1.5rem;
}

.resume { border-left: 3px solid var(--or); padding-left: 1rem; font-size: 1.05rem; margin: 0 0 2rem; }
.fin { color: var(--encre-douce); font-size: 0.95rem; margin-bottom: 0; }

.pied {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--trait);
  display: flex; gap: 0.6rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--encre-douce);
}

/* ═══════════════════════════════════════════════
   LA VITRINE
   ═══════════════════════════════════════════════ */

.large { max-width: 68rem; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2.5rem); }

/* ——— hero ——— */
.hero {
  background: linear-gradient(178deg, #FBD9B4 0%, #F3B98A 62%, var(--fond) 100%);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; left: 50%; top: 18%;
  width: min(760px, 120vw); height: min(760px, 120vw); transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 68%);
  pointer-events: none;
}
.hero .large { position: relative; z-index: 1; }

.logo { width: clamp(150px, 22vw, 210px); margin: 0 auto clamp(1.5rem, 4vw, 2.25rem); }

.hero h1 {
  font-size: clamp(2.1rem, 6.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0 auto 1.1rem;
  max-width: 18ch;
}
.hero .chapo {
  text-align: center; margin: 0 auto; max-width: 40ch;
  font-size: clamp(1rem, 2.2vw, 1.2rem); color: #6B5B45;
}

.badge-store { display: flex; justify-content: center; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; }
.badge-store img { height: 54px; width: auto; transition: transform .18s ease; }
.badge-store a:hover img { transform: translateY(-2px); }

.telephone {
  width: min(310px, 74vw); margin: clamp(2.5rem, 6vw, 3.5rem) auto -6vw;
  border-radius: 40px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(69,58,94,.28), 0 0 0 1px rgba(69,58,94,.07);
}

/* ——— sections ——— */
.section { padding: clamp(4.5rem, 10vw, 7.5rem) 0; }
.section-titre {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.12;
  margin: 0 0 0.9rem; max-width: 20ch;
}
.section-lead { color: var(--encre-douce); max-width: 46ch; margin: 0 0 clamp(2rem, 5vw, 3rem); font-size: 1.05rem; }
.centre .section-titre, .centre .section-lead { margin-left: auto; margin-right: auto; text-align: center; }

/* ——— les Veillous ——— */
.veillous { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.veillou {
  background: var(--carte); border-radius: 24px; padding: 1.35rem 1rem 1.5rem;
  text-align: center; border: 1px solid var(--trait);
}
.veillou img, .veillou video { width: 78%; height: auto; margin: 0 auto .75rem; display: block; border-radius: 18px; }
.veillou h3 { font-family: var(--display); font-size: 1.12rem; font-weight: 800; margin: 0 0 .3rem; }
.veillou p { font-size: .89rem; line-height: 1.45; color: var(--encre-douce); margin: 0; }

/* ——— les quatre gestes ——— */
.gestes { display: grid; gap: clamp(.9rem, 2vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.geste { background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; padding: 1.25rem 1.35rem; }
.geste .pastille { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .75rem; font-size: 1.05rem; }
.geste h3 { font-family: var(--display); font-size: 1.02rem; font-weight: 700; margin: 0 0 .25rem; }
.geste p { font-size: .88rem; color: var(--encre-douce); margin: 0; line-height: 1.45; }

/* ——— duo texte + écran ——— */
.duo { display: grid; gap: clamp(2rem, 6vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 0.85fr; } .duo.inverse { grid-template-columns: 0.85fr 1fr; } .duo.inverse .duo-texte { order: 2; } }
.duo-ecran { width: 100%; height: auto; display: block; border-radius: 34px; overflow: hidden; box-shadow: 0 26px 60px rgba(69,58,94,.24), 0 0 0 1px rgba(69,58,94,.06); }

/* « Réduire les animations » est honoré par un script en bas de page : le CSS
   ne sait pas mettre une vidéo en pause, seulement masquer — ce qui laisserait
   le décodage tourner pour rien. */

/* ——— promesses ——— */
.promesses { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.promesse { display: flex; gap: .7rem; align-items: flex-start; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 1rem 1.1rem; }
.promesse svg { flex: none; margin-top: 2px; color: var(--or); }
.promesse b { font-family: var(--display); font-weight: 700; display: block; font-size: .97rem; }
.promesse span { font-size: .87rem; color: var(--encre-douce); line-height: 1.45; }

/* ——— rappel de téléchargement ——— */
.final { background: var(--encre); color: #fff; border-radius: 30px; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem); text-align: center; }
.final h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: .7rem; }
.final p { color: rgba(255,255,255,.72); max-width: 34ch; margin: 0 auto; }

/* ——— pied de page du site ——— */
.pied-site { border-top: 1px solid var(--trait); padding: 2rem 0 3rem; font-size: .9rem; color: var(--encre-douce); }
.pied-site .large { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pied-site nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #F5EFE6; --encre-douce: #B0A5BF;
    --fond: #2A2340; --carte: #352C4D; --trait: rgba(255, 255, 255, 0.14);
  }
  a:hover { color: var(--or-clair); }
  .maj { background: rgba(255, 255, 255, 0.08); }
  /* Le hero garde sa lumière : c'est l'ambiance « Plein jour » de l'app, et
     l'encre y reste sombre parce que le fond, lui, ne bascule pas. */
  .hero { background: linear-gradient(178deg, #FBD9B4 0%, #F3B98A 62%, var(--fond) 100%); }
  .hero h1, .hero .chapo { color: #453A5E; }
  .final { background: #1E1832; }
}