:root{--nuit:#17130F;--creme:#F6EEE2;--gris:#8F8476;--texte:#AFA393;--orange:#F28224;--separateur:rgba(246,238,226,0.14);--carte:#221C16;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--nuit)}
body{margin:0;background:var(--nuit);color:var(--creme);font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.o{color:var(--orange)}
.g{color:var(--gris)}

/* Navigation */
.nav{width:100%;max-width:1120px;margin:0 auto;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;font-size:15px}
.marque{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-0.01em;text-decoration:none}
.marque img{width:32px;height:32px;border-radius:8px}
.langue{text-decoration:none;color:var(--texte)}
.langue:hover{color:var(--creme)}

/* Big type, as on the store screens */
.titre{margin:0;font-weight:700;letter-spacing:-0.035em;line-height:1.04}
.titre span{display:block}

/* Both languages take the same room: the other language's text sits invisible under the visible one */
.jumeau{display:grid!important}
.jumeau>*{grid-area:1/1;min-width:0}
.fantome{visibility:hidden;user-select:none;pointer-events:none}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--nuit) url(img/horizon.jpg) no-repeat center bottom;background-size:cover}
.hero-grille{max-width:1120px;margin:0 auto;padding:48px 24px 0;display:grid;grid-template-columns:1.15fr 0.85fr;gap:24px;align-items:center}
.hero .titre{font-size:clamp(44px,6vw,72px)}
.sous-titre{margin:14px 0 28px;font-size:21px;font-weight:600;letter-spacing:-0.01em}
.badge{display:inline-block}
.badge img{height:52px;width:auto}
.scene{position:relative;justify-self:end;width:min(320px,100%);margin:24px 24px -140px 0}
.telephone{transform:rotate(7deg);border-radius:46px;overflow:hidden;box-shadow:0 0 0 1px rgba(246,238,226,0.18),0 30px 60px rgba(0,0,0,0.55)}
.bulles{position:absolute;inset:0;pointer-events:none}
.bulle{position:absolute;padding:12px 20px 13px;border-radius:24px;font-weight:600;font-size:clamp(18px,2vw,24px);line-height:1.1;letter-spacing:-0.02em;white-space:nowrap;background:rgba(250,243,227,0.55);color:rgba(30,26,21,0.75);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 0 0 1px rgba(255,255,255,0.45),0 14px 28px rgba(0,0,0,0.35)}
.bulle:nth-child(1){left:-40%;top:22%;transform:rotate(-4deg)}
.bulle:nth-child(2){left:-32%;top:36%;transform:rotate(3deg)}
.bulle:nth-child(3){left:-50%;top:52%;transform:rotate(-2deg);background:rgba(250,243,227,0.88);color:#1E1A15;box-shadow:inset 0 1px 0 rgba(255,255,255,0.75),0 0 0 1px rgba(255,255,255,0.6),0 20px 40px rgba(0,0,0,0.45),0 0 40px rgba(242,130,36,0.25)}
.hero-pied{height:160px}

/* Chapters: one idea each, separated by space and a change of background */
.chapitre{padding:128px 24px}
.chapitre>*{max-width:1120px;margin-left:auto;margin-right:auto}
.bande{background:#1F1A15}
.chapitre .titre{font-size:clamp(40px,5.6vw,64px)}
.chapitre .texte{margin-top:28px;font-size:21px;line-height:1.5;color:var(--texte)}
.chapitre .texte>span{display:block;max-width:640px}
.chapitre .titre.petit{font-size:clamp(32px,4vw,44px)}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.etape{background:var(--nuit);border-radius:28px;padding:28px}
.etape p{margin:0;font-size:19px;line-height:1.45;color:var(--creme)}
.icone{display:block;height:40px;width:auto;margin-bottom:20px;color:var(--orange)}
/* Light chapters: the app's light full screens. Cream, a grey grain multiplied at 20 %, and the round halo */
.orange,.beige{position:relative;overflow:hidden;isolation:isolate}
.beige::after{content:"";position:absolute;inset:0;z-index:3;background:url(img/grain.png);background-size:80px;mix-blend-mode:multiply;opacity:.2;pointer-events:none}
/* How it works: the hero's horizon, flipped, so the orange light comes from the top and darkens a little downwards */
.orange{background:var(--nuit)}
.orange::before{content:"";position:absolute;left:0;right:0;top:0;height:190%;z-index:0;background:url(img/horizon.jpg) no-repeat center bottom/cover;transform:scaleY(-1);transform-origin:top;translate:0 100%;pointer-events:none}
.orange>*{position:relative;z-index:1}
.orange .titre{color:#fff}
.orange .etape{background:#FAF3E3}
.orange .etape p{color:#1E1A15}
.beige{background:#FAF3E3;color:#1E1A15}
.beige .texte{color:#5C5346}
.halo{position:absolute;border-radius:50%;background:radial-gradient(circle farthest-corner,#FFE2C2 0%,#F28224 26%,rgba(242,130,36,.35) 52%,rgba(242,130,36,0) 72%);filter:blur(8px);pointer-events:none}
.chapitre>.grille{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.halo-mot{position:relative;width:min(360px,100%);aspect-ratio:1;justify-self:center;display:flex;align-items:center;justify-content:center}
.halo-mot .halo{inset:0}
.halo-mot span{position:relative;font-size:46px;font-weight:400;letter-spacing:-0.02em;color:#1E1A15;white-space:nowrap}
/* The tool chapter: smaller, with the halo rising from the bottom-left corner */
.beige{padding-top:88px;padding-bottom:88px}
.beige.outil{padding:72px 24px 160px}
.beige.outil .titre{font-size:clamp(26px,3vw,34px)}
.beige.outil .texte{margin-top:14px;font-size:18px}
.beige.outil .halo{width:620px;height:620px;left:-200px;bottom:-400px}
.beige.outil>*:not(.halo){position:relative}
.beige .texte{color:#5C5346}
.horizon{background:var(--nuit) url(img/horizon.jpg) no-repeat center bottom;background-size:cover;padding-bottom:280px}
.horizon .titre{font-size:clamp(48px,7.4vw,88px)}
.horizon h3{margin:64px auto 8px;font-size:21px;font-weight:600;letter-spacing:-0.01em}
.horizon .texte{margin-top:0}
.majuscules{margin-top:20px;font-size:15px;font-weight:600;letter-spacing:0.08em}

/* Card */
.carte{background:var(--carte);border-radius:28px;padding:48px}
.carte .titre{font-size:clamp(28px,3.6vw,40px)}
.carte p{margin:12px 0 28px;font-size:19px;color:var(--texte);max-width:640px}
.bouton{display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:26px;background:var(--creme);color:var(--nuit);font-weight:600;letter-spacing:-0.01em;text-decoration:none}
.bouton:hover{background:#fff}
.support{padding-top:0}

/* Footer */
footer{max-width:1120px;margin:0 auto;padding:24px 24px 48px;border-top:1px solid var(--separateur);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:14px;color:var(--texte)}
footer nav{display:flex;gap:24px}
footer a{text-decoration:none}
footer a:hover{color:var(--creme)}

/* Document pages (privacy) */
.doc .nav,.doc main,.doc footer{max-width:728px}
.doc main{margin:0 auto;padding:8px 24px 0}
.doc h1{margin:32px 0 8px;font-size:clamp(34px,5vw,44px);line-height:1.06;font-weight:700;letter-spacing:-0.03em}
.doc h2{font-size:22px;letter-spacing:-0.01em;margin:40px 0 8px}
.doc p,.doc li{color:var(--texte)}
.doc .carte{padding:20px 24px;margin:24px 0}
.doc .carte p{margin:0;color:var(--creme)}
.doc main a{color:var(--orange)}
.doc footer{margin-top:72px}

@media (max-width:820px){
  .hero-grille{grid-template-columns:1fr;padding-top:24px;gap:0}
  .scene{width:62%;margin:64px 4% -170px auto}
  .bulle{font-size:17px;padding:10px 16px 11px}
  .bulle:nth-child(1){left:-52%;top:14%}
  .bulle:nth-child(2){left:-44%;top:27%}
  .bulle:nth-child(3){left:-58%;top:41%}
  .hero .titre{font-size:clamp(34px,10vw,44px)}
  .hero-pied{height:190px}
  .chapitre{padding:88px 24px}
  .chapitre .texte{font-size:18px}
  .etapes{grid-template-columns:1fr;gap:12px}
  .etape{padding:22px;display:flex;gap:18px;align-items:center}
  .etape p{font-size:17px}
  .icone{height:32px;margin:0;flex:none;width:auto;min-width:32px}
  .horizon{padding-bottom:220px}
  .beige{padding-top:64px;padding-bottom:64px}
  .beige.outil{padding:56px 24px 140px}
  .beige.outil .texte{font-size:17px}
  .beige.outil .halo{width:440px;height:440px;left:-170px;bottom:-290px}
  .chapitre>.grille{grid-template-columns:1fr;gap:8px}
  .halo-mot{width:250px;margin-top:8px}
  .halo-mot span{font-size:40px}
  .horizon h3{margin-top:48px}
  .carte{padding:28px 24px}
  .support{padding-top:0}
  footer{margin-top:0}
}
@media (prefers-reduced-motion:no-preference){.bouton{transition:background .2s}}
@media (max-width:420px){footer{flex-direction:column}}

/* « Signalez un problème. »: two bubbles from the store screen, standing still */
.bulles-fixes{display:flex;flex-direction:column;align-items:flex-start;gap:18px;justify-self:center}
.bulles-fixes .bulle{position:static;transform:rotate(-3deg)}
.bulles-fixes .bulle.forte{margin-left:40px;transform:rotate(2deg);background:rgba(250,243,227,0.88);color:#1E1A15;box-shadow:inset 0 1px 0 rgba(255,255,255,0.75),0 0 0 1px rgba(255,255,255,0.6),0 20px 40px rgba(0,0,0,0.45),0 0 40px rgba(242,130,36,0.25)}

/* iPhone Duo: the closed Duo's outer display, a D (left corners small, right corners round) with the camera hole top right */
.ecran-ext{position:relative;justify-self:center;width:min(300px,100%);aspect-ratio:1398/2034;background:#110E0B;border-radius:16px 72px 72px 16px/16px 52px 52px 16px;box-shadow:0 0 0 1px rgba(246,238,226,0.18),0 30px 60px rgba(0,0,0,0.55);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:12px}
.ecran-ext::before{content:"";position:absolute;top:22px;right:26px;width:18px;height:18px;border-radius:50%;background:#000;box-shadow:0 0 0 1px rgba(246,238,226,0.12)}
.etiquette{padding:4px 10px;border-radius:9px;background:var(--orange);color:#fff;font-size:14px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
.phrase{font-size:30px;font-weight:600;line-height:1.12;letter-spacing:-0.02em}
@media (max-width:820px){
  .bulles-fixes{justify-self:start;margin-top:32px}
  .ecran-ext{width:min(240px,70%);margin-top:40px;justify-self:start;padding:22px}
  .phrase{font-size:24px}
}