/* Okilou : feuille de style du site (okilou.fr) */
:root {
  --cream:#FFF7EE; --cream-dark:#F3EADC; --ink:#2A2440; --soft:#6A6379; --faint:#9A93A2;
  --green:#22C48A; --green-dark:#1E8F65; --green-bg:#E3F7EE;
  --amber:#FF9E3D; --amber-bg:#FFF1DE; --violet:#7C6FDE;
  --border:#EFE7D8; --card:#FFFFFF;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); line-height:1.6;
       font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width:960px; margin:0 auto; padding:24px 22px 60px; }

/* ── En-tête / wordmark au o-visage ─────────────────────────────── */
header { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:2px; font-weight:800; font-size:24px;
         color:var(--ink); text-decoration:none; letter-spacing:-0.01em; }
.brand .o-face { width:0.98em; height:0.98em; vertical-align:-0.14em; margin:0 1px; }
nav.menu { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
nav.menu a { color:var(--soft); text-decoration:none; font-size:15px; font-weight:600; }
nav.menu a:hover, nav.menu a[aria-current="page"] { color:var(--green-dark); }
nav.menu .flag { display:block; width:20px; height:14px; border-radius:3px; flex:none;
                 box-shadow:inset 0 0 0 1px rgba(42,36,64,0.10); }
nav.menu details.lang-picker { position:relative; }
nav.menu details.lang-picker summary { list-style:none; cursor:pointer; display:block; }
nav.menu details.lang-picker summary::-webkit-details-marker { display:none; }
nav.menu details.lang-picker summary::marker { content:""; display:none; }
nav.menu details.lang-picker .cur { display:inline-flex; align-items:center; gap:5px; }
nav.menu details.lang-picker .chev { font-size:9px; color:var(--faint); }
nav.menu details.lang-picker[open] .chev { color:var(--green-dark); }
nav.menu .lang-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:30;
  min-width:158px; padding:6px; display:flex; flex-direction:column; gap:2px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 14px 30px rgba(42,36,64,0.16); }
nav.menu .lang-menu a { display:flex; align-items:center; gap:9px; padding:7px 10px;
  border-radius:8px; font-size:14.5px; color:var(--ink); }
nav.menu .lang-menu a:hover { background:var(--green-bg); color:var(--green-dark); }
nav.menu .lang-menu a[aria-current] { color:var(--green-dark); }
nav.menu .lang-menu a[aria-current]::after { content:"✓"; margin-left:auto; color:var(--green); }
/* Smartphone : le wordmark reste sur la MÊME ligne que le menu (il passait
   au-dessus dès que la rangée dépassait). On rétrécit la barre au lieu de la
   casser ; le flex-wrap reste en filet sous ~300 px,
   où retomber sur deux lignes vaut mieux que déborder en largeur. */
@media (max-width:600px) {
  header { gap:8px; }
  .brand { font-size:19px; flex:0 0 auto; }
  nav.menu { gap:11px; flex-wrap:nowrap; }
  nav.menu a { font-size:13px; padding:5px 0; white-space:nowrap; }
}
@media (max-width:359px) {           /* iPhone SE & co : on gagne les ~20 px qui manquent */
  .wrap { padding-left:14px; padding-right:14px; }
  .brand { font-size:18px; }
  nav.menu { gap:9px; }
}

/* ── Héros ──────────────────────────────────────────────────────── */
.hero { text-align:center; padding:52px 0 26px; }
.hero .logo { display:block; margin:0 auto 18px; }
/* Smartphone : les badges stores doivent être visibles SANS scroller (test
   iPhone 17 Pro). Le héros cumulait le margin-top:56 des <section> ET son
   propre padding:52 — 108 px au-dessus du logo. On resserre tout le bloc. */
@media (max-width:600px) {
  .hero { margin-top:0; padding:18px 0 20px; }
  .hero .logo { width:104px; height:104px; margin-bottom:12px; }
  .hero .tagline { font-size:16.5px; margin-top:12px; }
  .hero .store-badges { margin-top:18px; gap:10px; }
}
h1 { font-size:clamp(28px, 5vw, 42px); line-height:1.14; margin:0; letter-spacing:-0.01em; text-wrap:balance; }
h1 .ok { color:var(--green); }
.tagline { color:var(--soft); font-size:18px; max-width:56ch; margin:16px auto 0; }
.cta { margin-top:26px; display:inline-block; background:var(--green); color:#fff; font-weight:700;
       padding:13px 26px; border-radius:14px; text-decoration:none; }
.cta:hover { background:var(--green-dark); }
.cta.ghost { background:transparent; color:var(--green-dark); border:2px solid var(--green);
             padding:11px 24px; margin-left:10px; }
.cta.ghost:hover { background:var(--green-bg); }
.stores { margin-top:14px; color:var(--soft); font-size:13.5px; }
.store-badges { margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:11px; background:var(--ink); color:#fff;
         padding:10px 20px 10px 16px; border-radius:14px; text-decoration:none; text-align:left; }
.badge:hover { background:#3B3458; }
.badge svg { width:24px; height:24px; flex:none; }
.badge small { display:block; font-size:11px; font-weight:500; opacity:0.85; line-height:1.25; }
.badge b { display:block; font-size:16.5px; line-height:1.25; letter-spacing:0.01em; }

/* ── Vidéo (façade click-to-load, aucune requête YouTube avant le clic) ── */
.video { max-width:720px; margin:0 auto; }
.video-poster { position:relative; display:block; width:100%; padding:0; border:1px solid var(--border);
                border-radius:18px; overflow:hidden; cursor:pointer; background:var(--ink);
                box-shadow:0 14px 30px rgba(42,36,64,0.14); }
.video-poster img { display:block; width:100%; height:auto; }
.video-play { position:absolute; inset:0; display:grid; place-items:center; }
.video-play svg { width:76px; height:76px; padding:18px; box-sizing:border-box;
                  background:rgba(42,36,64,0.72); border-radius:50%; transition:transform .12s; }
.video-poster:hover .video-play svg { transform:scale(1.06); }
.video iframe, .video video { display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:18px;
                box-shadow:0 14px 30px rgba(42,36,64,0.14); }
.video.vertical iframe, .video.vertical video { aspect-ratio:9/16; max-width:min(72vw, 340px); margin:0 auto; }
.videos-duo { display:flex; gap:28px; justify-content:center; align-items:flex-start; flex-wrap:wrap;
              margin:0; padding:0; }
.videos-duo .video-cell { margin:0; width:min(42vw, 290px); }
.videos-duo .video-poster img { aspect-ratio:9/16; height:auto; object-fit:cover; }
.videos-duo video { display:block; width:100%; aspect-ratio:9/16; border:0; border-radius:18px;
                    box-shadow:0 14px 30px rgba(42,36,64,0.14); }
.videos-duo figcaption { text-align:center; margin-top:10px; color:var(--soft); font-size:15px; }
@media (max-width:640px) {
  .videos-duo { gap:20px; }
  .videos-duo .video-cell { width:min(72vw, 340px); }
}
@media (max-width:640px) {
  .video-poster { max-width:min(72vw, 340px); margin:0 auto; display:block; }
  .video-poster img { aspect-ratio:9/16; height:auto; }
}

/* ── Blog ───────────────────────────────────────────────────────── */
/* Partage d'article : liens purs (wa.me, sharer, mailto) — AUCUN SDK tiers. */
.share { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
         margin-top:30px; padding-top:18px; border-top:1px solid var(--border);
         color:var(--soft); font-size:14px; }
.share a, .share button { display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border:1px solid var(--border); border-radius:12px;
  background:var(--card); color:var(--ink); text-decoration:none;
  font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; }
.share a:hover, .share button:hover { border-color:var(--green); color:var(--green-dark); }
.share svg { width:16px; height:16px; flex:none; }
/* Variante compacte sous le titre : icônes seules, rondes */
.share.mini { border-top:0; padding-top:0; margin:10px 0 0; gap:8px; }
.share.mini a, .share.mini button { padding:9px; border-radius:50%; line-height:0; }
.share.mini svg { width:17px; height:17px; }
.card .thumb { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
               border-radius:12px; margin-bottom:12px; }
.art-img { margin:20px 0 0; }
.art-img img { width:100%; height:auto; border-radius:18px; box-shadow:0 12px 26px rgba(42,36,64,0.10); }

/* ── Blog : article long format ─────────────────────────────────── */
/* Trois principes, dans cet ordre :
   ① La mesure de lecture reste à ~70 caractères par ligne (optimum 66,
     borne haute 75), sur toutes les tailles d'écran. Le ch a été abandonné :
     il vaut la chasse du ZÉRO, ~25 % plus large que le caractère moyen, et
     il change avec la police système — l'ancien 68ch donnait 587 px et
     81 caractères mesurés sur Segoe UI, ~86 sur SF.
   ② Sur un grand écran, le confort ne vient pas de lignes plus longues (on
     lit de plus loin, pas plus large) mais d'un TEXTE PLUS GRAND : la prose
     va de 17 px à 22 px avec la largeur de fenêtre. La mesure est en em,
     donc la colonne grandit avec elle et le nombre de caractères ne bouge
     pas. Toute la typo de l'article est en em pour suivre le mouvement.
   ③ Le cadre de la page s'élargit au-delà de 1500 px et les médias
     débordent la colonne de texte : une colonne étroite paraît voulue
     quand les photos respirent autour, et ridicule dans un ruban. */

/* Cadre : le .wrap commun (960) devient container pour que les médias
   sachent jusqu'où déborder, et s'élargit sur les très grands écrans. */
body:has(article) .wrap { container-type:inline-size; }
@media (min-width:1600px) { body:has(article) .wrap { max-width:1240px; } }
@media (min-width:2100px) { body:has(article) .wrap { max-width:1400px; } }

article {
  font-size:clamp(1.0625rem, 0.625rem + 0.58vw, 1.5rem);    /* 17 px → 24 px */
  max-width:32em;                                            /* ~70 caractères */
  margin:0 auto;
}
/* Médias : ils débordent la colonne jusqu'à la largeur du cadre. Le calcul
   marche à toutes les tailles — sur mobile, 100cqw < --media, la largeur
   retombe sur celle de la colonne et les marges à zéro. */
article > .art-img,
article > table.settings,
article > .hero > .art-img {
  --w:min(58em, 100cqw);
  width:var(--w);
  max-width:none;
  margin-inline:calc((100% - var(--w)) / 2);
}

article .hero h1 { font-size:clamp(1.75rem, 5vw, 2.4em); }
article .lead { font-size:1.06em; color:var(--soft); }
article h2 { font-size:1.45em; margin-block:1.45em 0.4em;
             letter-spacing:-0.01em; text-wrap:pretty; }
article .meta-line { color:var(--faint); font-size:0.8em; margin-bottom:1.3em; }
article .box { background:var(--green-bg); border-radius:16px; padding:0.95em 1.05em;
               margin-block:1.3em; }
article .box.amber { background:var(--amber-bg); }
article blockquote { margin-block:1.05em; padding:0.7em 1.05em; border-left:4px solid var(--green);
                     background:var(--card); border-radius:0 14px 14px 0; color:var(--soft); }
article blockquote p { margin:0; }
article table.settings { border-collapse:collapse; margin-block:0.85em; }
article table.settings td,
article table.settings th { border:1px solid var(--border); padding:0.55em 0.7em;
                            text-align:left; font-size:0.9em; }
article table.settings th { background:var(--green-bg); }
/* Rangée de CTA de fin d'article : les deux boutons tiennent moins bien dans
   la mesure que dans l'ancienne colonne. En flex ils retombent proprement au
   lieu de s'indenter des 10 px de .cta.ghost. */
article > p:has(.cta) { display:flex; flex-wrap:wrap; gap:12px; padding-top:26px; }
article > p:has(.cta) .cta { margin:0; }

/* ── Sections ───────────────────────────────────────────────────── */
section { margin-top:56px; }
h2.section { font-size:clamp(22px, 3.4vw, 28px); margin:0 0 6px; letter-spacing:-0.01em; }
p.section-sub { margin:0 0 22px; color:var(--soft); max-width:64ch; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px;
        box-shadow:0 10px 26px rgba(42,36,64,0.06); }
.card h3 { font-size:17px; margin:0 0 8px; }
.card p { margin:0; color:var(--soft); font-size:14.5px; }

/* Étapes numérotées */
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; counter-reset:step; }
.step { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px;
        box-shadow:0 10px 26px rgba(42,36,64,0.06); position:relative; }
.step::before { counter-increment:step; content:counter(step);
        display:inline-flex; align-items:center; justify-content:center;
        width:32px; height:32px; border-radius:10px; background:var(--green); color:#fff;
        font-weight:800; font-size:16px; margin-bottom:10px; }
.step h3 { font-size:16.5px; margin:0 0 6px; }
.step p { margin:0; color:var(--soft); font-size:14.5px; }

/* ── Captures d'écran ───────────────────────────────────────────── */
.shots { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.shot { width:min(230px, 44vw); }
.shot img { display:block; width:100%; height:auto; border-radius:22px; border:1px solid var(--border);
            box-shadow:0 16px 36px rgba(42,36,64,0.14); }
.shot figcaption { text-align:center; color:var(--soft); font-size:13px; margin-top:8px; }
figure { margin:0; }

/* Guide : capture + texte côte à côte */
.guide-step { display:flex; gap:26px; align-items:flex-start; margin-top:36px; flex-wrap:wrap; }
.guide-step .txt { flex:1 1 320px; }
.guide-step .pic { flex:0 0 218px; margin:0 auto; }
.guide-step .pic img { display:block; width:100%; height:auto; border-radius:20px; border:1px solid var(--border);
                       box-shadow:0 14px 30px rgba(42,36,64,0.13); }
img { height:auto; }
.guide-step h3 { font-size:19px; margin:2px 0 8px; }
.guide-step h3 .n { display:inline-flex; align-items:center; justify-content:center;
                    width:28px; height:28px; border-radius:9px; background:var(--green); color:#fff;
                    font-size:15px; margin-right:9px; vertical-align:-4px; }
.guide-step p, .guide-step li { color:var(--soft); font-size:15px; }
.guide-step .tip { background:var(--amber-bg); border-radius:12px; padding:10px 14px; font-size:14px;
                   color:var(--ink); margin-top:10px; }

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq details { background:var(--card); border:1px solid var(--border); border-radius:14px;
               padding:4px 18px; margin-top:10px; }
.faq summary { font-weight:700; font-size:15.5px; cursor:pointer; padding:12px 0; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color:var(--green); font-weight:800; font-size:18px; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:0 0 14px; color:var(--soft); font-size:14.5px; }

/* Bandeau garde alternée */
.duo { background:linear-gradient(135deg, var(--green-bg), #fff); border:1px solid var(--border);
       border-radius:22px; padding:30px 26px; }
.duo h2 { margin:0 auto 8px; max-width:600px; font-size:clamp(20px, 3vw, 26px); }
.duo p { color:var(--soft); margin:0 auto; max-width:600px; }

.pledge { margin-top:56px; background:var(--card); border:1px solid var(--border); border-radius:18px;
          padding:26px; text-align:center; }
.pledge strong { color:var(--green-dark); }

footer { margin-top:64px; padding-top:22px; border-top:1px solid var(--border);
         display:flex; flex-wrap:wrap; gap:18px; justify-content:center; color:var(--soft); font-size:14px; }
footer a { color:var(--soft); text-decoration:none; }
footer a:hover { color:var(--green-dark); }

.note { color:var(--faint); font-size:13px; }
@media (max-width:560px) {
  .cta.ghost { margin-left:0; margin-top:12px; }
  .guide-step { flex-direction:column-reverse; }
  .guide-step .pic { flex-basis:auto; width:min(240px, 70vw); }
}

/* Encart de fin d'article + barre d'appel (blog seulement) */
.appcard { background:var(--green-bg); border-radius:18px; padding:20px 22px; margin:28px 0 6px; }
.appcard p { margin:0 0 4px; }
.appcard .store-badges { margin-top:16px; justify-content:flex-start; }

/* Carte flottante, jamais un bandeau collé aux bords : elle se lit comme une
   notification de l'app, pas comme une bannière de cookies. */
.appbar { position:fixed; z-index:40; left:50%; bottom:calc(14px + env(safe-area-inset-bottom));
          width:min(540px, calc(100% - 26px));
          display:flex; align-items:center; gap:12px; padding:11px 12px 11px 14px;
          background:var(--card); border:1px solid var(--border); border-radius:20px;
          box-shadow:0 14px 38px rgba(42,36,64,0.20);
          transform:translate(-50%, calc(100% + 30px));
          transition:transform .34s cubic-bezier(.2,.85,.3,1); }
.appbar.on { transform:translate(-50%, 0); }
.appbar .oki { width:34px; height:34px; flex:none; }
.appbar-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.appbar-txt b { font-size:14.5px; line-height:1.25; letter-spacing:-0.01em; }
.appbar-txt span { font-size:12.5px; line-height:1.25; color:var(--faint); }
.appbar .cta { margin:0; flex:none; padding:10px 17px; font-size:14.5px; border-radius:13px; white-space:nowrap; }
.appbar-x { flex:none; width:28px; height:28px; display:grid; place-items:center; padding:0;
            background:none; border:0; border-radius:50%; color:var(--faint);
            font-size:15px; line-height:1; cursor:pointer; font-family:inherit; }
.appbar-x:hover { background:var(--cream-dark); color:var(--ink); }
@media (max-width:430px) {
  .appbar { gap:9px; padding:10px 9px 10px 11px; width:calc(100% - 20px);
            bottom:calc(10px + env(safe-area-inset-bottom)); }
  .appbar .oki { width:29px; height:29px; }
  .appbar-txt b { font-size:13.5px; }
  .appbar-txt span { font-size:11.5px; }
  .appbar .cta { padding:9px 13px; font-size:13.5px; }
  .appbar-x { width:24px; height:24px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce) { .appbar { transition:none; } }

/* /app/ : le store de l'appareil est mis en avant (l'autre reste offert) */
.badge.primaire { outline:3px solid var(--green); outline-offset:3px; }