/* Pebbilo, site vitrine : mêmes couleurs et même police que l'appli (Inter, marine, orange, bleu ; graphite en sombre). */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-201F,U+2020-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
 --bg:#f6f8fc;--surface:#ffffff;--soft:#ecf0f8;--ink:#152951;--muted:#5d6b84;--line:#e1e6f0;
 --accent:#2458ef;--accent-soft:#e8efff;--orange:#ff9a3d;--orange-deep:#ee7e2e;--gold:#f0b429;--green:#1f8f63;
 --radius:22px;--shadow:0 18px 40px rgba(21,41,81,.10);
 color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
 --bg:#1e2023;--surface:#2b2d32;--soft:#25272b;--ink:#f2f3f5;--muted:#a3a8b1;--line:rgba(255,255,255,.08);
 --accent:#ffb877;--accent-soft:#33363c;--green:#7fdcb8;--shadow:0 18px 40px rgba(0,0,0,.35);
 color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-feature-settings:'cv11' 1;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent)}
.wrap{width:min(1080px,100%);margin:0 auto;padding-inline:20px}
h1,h2,h3{line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:clamp(28px,7.2vw,52px);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(24px,4vw,34px);font-weight:700;letter-spacing:-.01em}
h3{font-size:18px;font-weight:650}
p{margin:0}
.muted{color:var(--muted)}
.eyebrow{font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* En-tête */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:62px}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:700;font-size:18px;text-decoration:none}
.brand svg{width:26px;height:26px}
.top nav{display:flex;gap:4px;margin-left:auto}
.top nav a{padding:8px 12px;border-radius:12px;color:var(--muted);font-size:14.5px;font-weight:550;text-decoration:none}
.top nav a:hover{background:var(--soft);color:var(--ink)}
@media (max-width:720px){.top nav a.hide-sm{display:none}.top nav a{padding:8px 9px}}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 20px;border-radius:16px;font-weight:650;font-size:15.5px;text-decoration:none}
.btn-play{background:var(--ink);color:var(--bg)}
.btn-play small{display:block;font-size:11px;font-weight:500;opacity:.75;line-height:1.1}
.btn-play span{line-height:1.15}
.btn-ghost{background:var(--accent-soft);color:var(--accent)}
.soon{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;background:var(--orange);color:#2a1a08;font-size:11.5px;font-weight:700;letter-spacing:.02em;vertical-align:middle}

/* Accueil — mobile d'abord : le texte, puis un seul téléphone ; deux colonnes à partir de 820 px. */
.hero{padding-block:22px 8px;overflow:hidden}
.hero .wrap{display:grid;gap:18px}
.hero-copy{display:grid;gap:12px}
.hero-copy .lead{font-size:16.5px;color:var(--muted);max-width:36ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.store-soon{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);cursor:default}
.store-soon svg{width:20px;height:20px}
.hero-points{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0;padding:0;list-style:none;color:var(--muted);font-size:14px}
.hero-points li{display:flex;align-items:center;gap:6px}
.hero-points li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green)}
.phone{border-radius:30px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);border:5px solid var(--surface)}
.phone img{width:100%;height:auto;border-radius:25px}
.hero-shot{position:relative;width:min(250px,66vw);margin:0 auto;padding-bottom:4px}
/* Diaporama : dix écrans en fondu ; un toucher passe au suivant, les points y mènent, et ça repart tout seul. */
.show{display:block;width:100%;padding:0;cursor:pointer;position:relative;aspect-ratio:600/1228;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.show img{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.show img.on{opacity:1}
.show-captions{position:relative;height:24px;margin:12px 0 0;padding:0;list-style:none;text-align:center;font-size:14.5px;font-weight:550;color:var(--ink)}
.show-captions li{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.show-captions li.on{opacity:1}
.show-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.show-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:width .25s ease,background .25s ease}
.show-hint{margin:8px 0 0;text-align:center;font-size:12.5px;color:var(--muted);transition:opacity .4s ease}.show-hint.off{opacity:0}
.show-dots button[aria-selected="true"]{width:22px;border-radius:4px;background:var(--orange)}
@media (prefers-color-scheme:dark){.show-dots button{background:rgba(255,255,255,.18)}}
.hero-mascot{position:absolute;right:-30px;bottom:48px;width:96px;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.18))}
@media (min-width:820px){.hero{padding-block:56px 32px}.hero .wrap{grid-template-columns:1.1fr .9fr;grid-template-areas:"copy shot" "points shot";align-items:center;column-gap:40px;row-gap:12px}.hero-copy{grid-area:copy}.hero-shot{grid-area:shot;width:min(320px,100%);margin:0 auto}.hero-points{grid-area:points;justify-content:flex-start}.hero-copy .lead{font-size:18px}.hero-mascot{right:-44px;bottom:52px;width:110px}}

/* Sections */
section.block{padding-block:44px}
@media (min-width:820px){section.block{padding-block:60px}}
.block-head{display:grid;gap:10px;max-width:640px;margin-bottom:24px}

/* Ce que ça fait : des mots-clés avec une icône, deux colonnes sur mobile, quatre ensuite */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.facts li{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.facts .ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:var(--accent-soft);color:var(--accent)}
.facts .ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.facts strong{display:block;font-size:14px;font-weight:650;line-height:1.25}
.facts small{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.facts li:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:820px){.facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.facts strong{font-size:15px}.facts small{font-size:13px}.facts li:last-child:nth-child(odd){grid-column:auto}}

/* Foyer partagé */
.cloud{background:var(--surface);border-block:1px solid var(--line)}
.cloud .wrap{display:grid;gap:26px}
.cloud-copy{display:grid;gap:12px}
.cloud-shots{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;width:min(420px,100%);margin:0 auto;padding:10px 0}
.cloud-shots .phone:first-child{transform:translateY(-10px)}
.cloud-shots .phone:last-child{transform:translateY(10px)}
.cloud-points{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.cloud-points li{display:flex;gap:14px;align-items:flex-start}
.cloud-points .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);flex:none}
.cloud-points .ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cloud-points strong{display:block;font-size:15.5px}
.cloud-points p{color:var(--muted);font-size:14.5px}
.cloud-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:820px){.cloud .wrap{grid-template-columns:1fr 1fr;grid-template-areas:"copy shots" "facts shots";align-items:center;column-gap:48px}.cloud-copy{grid-area:copy}.cloud-shots{grid-area:shots}.cloud-facts{grid-area:facts;grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tarifs */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:820px}
.plan{display:grid;gap:8px;align-content:start;padding:22px 24px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.plan.featured{border:2px solid var(--orange)}
.plan .price{font-size:34px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan .price small{font-size:15px;font-weight:550;color:var(--muted);letter-spacing:0}
.plan .alt{font-size:14px;color:var(--muted)}
@media (max-width:540px){.plans{grid-template-columns:1fr}}
.compare-wrap{max-width:820px;margin-top:14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:12px 14px;border-top:1px solid var(--line);text-align:center;vertical-align:middle}
.compare thead th{border-top:0;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.compare tbody th{text-align:left;font-weight:500}
.compare td{color:var(--muted);font-size:13.5px;width:96px}
.compare .hi{background:color-mix(in srgb,var(--orange) 9%,transparent)}
.compare thead th.hi{color:var(--orange-deep)}
@media (prefers-color-scheme:dark){.compare thead th.hi{color:var(--orange)}}
.compare i{display:inline-block;width:20px;height:20px;border-radius:50%;vertical-align:middle}
.compare i.yes{background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%231f8f63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.compare i.no{background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' fill='none' stroke='%239aa5bb' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat}
.compare .hi i.yes{background-color:color-mix(in srgb,var(--orange) 22%,transparent)}
@media (max-width:540px){.compare th,.compare td{padding:10px 8px}.compare tbody th{font-size:14px}.compare td{width:78px;font-size:12px;line-height:1.3}}
p.small{font-size:13.5px;margin-top:12px;max-width:820px}

/* FAQ */
.faq{display:grid;gap:10px;max-width:760px}
.faq details{padding:16px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:650;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--muted);font-weight:500}
.faq details[open] summary::after{content:'–'}
.faq details p{margin-top:10px;color:var(--muted);font-size:15px}

/* Pages légales */
.legal{padding-block:40px 64px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(28px,5vw,38px);margin-bottom:8px}
.legal h2{font-size:21px;margin:34px 0 10px}
.legal h3{font-size:16.5px;margin:22px 0 6px}
.legal p,.legal li{color:var(--ink);font-size:15.5px}
.legal p+p{margin-top:10px}
.legal ul{padding-left:22px}
.legal li{margin:5px 0}
.legal .updated{color:var(--muted);font-size:14px}
.legal .card{margin-top:18px;padding:18px 20px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.legal .steps{counter-reset:s;list-style:none;padding:0}
.legal .steps li{counter-increment:s;position:relative;padding-left:38px;margin:10px 0}
.legal .steps li::before{content:counter(s);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px}
.todo{background:#fff1c2;color:#5a3d00;padding:0 4px;border-radius:4px}
@media (prefers-color-scheme:dark){.todo{background:#5a4510;color:#ffe7a3}}

/* Pied de page */
.foot{padding-block:36px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
section[id]{scroll-margin-top:70px}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Tarifs : le prix dans l'en-tête de la grille */
.compare thead th{vertical-align:top;padding-top:14px;padding-bottom:12px}
.plan-name{display:block;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.plan-name .soon{margin-left:4px;letter-spacing:0;text-transform:none}
.plan-price{display:block;margin-top:4px;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
.plan-price small{font-size:12px;font-weight:550;color:var(--muted)}
.plan-alt{display:block;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.compare thead th.hi .plan-price{color:var(--orange-deep)}
@media (prefers-color-scheme:dark){.compare thead th.hi .plan-price{color:var(--orange)}}
@media (max-width:540px){.plan-price{font-size:18px}.plan-name{font-size:11.5px}}
.plan-price{white-space:nowrap}.plan-price small{display:block;line-height:1.2}
.compare thead th{min-width:88px}
/* Petit écran d'abord : lignes courtes, colonnes serrées, en-tête compact */
.compare th,.compare td{padding:11px 10px}
.compare tbody th{font-size:14px;line-height:1.3}
.compare td{width:84px;font-size:12.5px}
.compare thead th{min-width:0;padding:12px 8px 10px}
.plan-name{font-size:11.5px}.plan-price{font-size:19px}.plan-alt{font-size:11px}
@media (min-width:820px){.compare th,.compare td{padding:12px 14px}.compare tbody th{font-size:15px}.compare td{width:120px;font-size:14px}.plan-name{font-size:13px}.plan-price{font-size:22px}}
/* Lien vers les tarifs sous le foyer, et bloc de fin */
.cloud-link{margin:4px 0 0;font-size:15px;font-weight:600}.cloud-link a{text-decoration:none}
@media (min-width:820px){.cloud-link{grid-area:facts;align-self:end;margin-top:0}.cloud .wrap{grid-template-areas:"copy shots" "facts shots" "link shots"}.cloud-link{grid-area:link}}
.closing{padding-top:8px}
.closing-card{display:grid;gap:14px;justify-items:center;text-align:center;padding:26px 20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.closing-card img{width:72px;height:auto}
.closing-card h2{font-size:22px;margin-bottom:6px}
.closing-card p{color:var(--muted);font-size:15px}
@media (min-width:640px){.closing-card{grid-template-columns:auto 1fr;align-items:center;text-align:left;justify-items:start;gap:22px;padding:24px 28px}}
.foot .wrap{flex-direction:column;align-items:flex-start;gap:12px}
.foot span{line-height:1.6}
@media (min-width:820px){.foot .wrap{flex-direction:row;align-items:center}}

/* Slideshow controls: pause beside the dots. */
.show-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}.show-bar .show-dots{margin-top:0}
.show-pause{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer}
.show-pause svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.show-pause .i-play{display:none;fill:currentColor;stroke:none}.show-pause[aria-pressed="true"] .i-play{display:block}.show-pause[aria-pressed="true"] .i-pause{display:none}
/* Features in three groups. */
.facts-title{margin:22px 0 10px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.block-head+.facts-title{margin-top:4px}
.facts li{align-items:flex-start}.facts .ico{margin-top:1px}
@media (min-width:820px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.block h3.facts-title{margin:22px 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.block .block-head+h3.facts-title{margin-top:6px}
@media (max-width:559px){.facts{grid-template-columns:1fr;gap:8px}.facts li{min-height:0;align-items:center}.facts li:last-child:nth-child(odd){grid-column:auto}}
@media (min-width:560px) and (max-width:819px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hero-shot .show-pause{flex:none;width:32px;height:32px;border-radius:50%;padding:0}
@media (max-width:819px){.show-captions{padding-right:72px}}