:root{
  /* Couleurs système Apple */
  --noir:#000000;
  --gris-900:#0b0b0d;
  --gris-800:#141416;
  --blanc:#f5f5f7;
  --gris:#86868b;
  --bleu:#0a84ff;
  --bleu-clair:#409cff;
  --indigo:#5e5ce6;

  /* Verre */
  --verre:rgba(255,255,255,.055);
  --verre-fort:rgba(255,255,255,.085);
  --bord:rgba(255,255,255,.11);
  --arete:rgba(255,255,255,.22);
  --ligne:rgba(255,255,255,.09);
  --ombre:0 12px 44px rgba(0,0,0,.5);
  --flou:blur(34px) saturate(190%);

  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--noir);color:var(--blanc);font-family:var(--sf);font-weight:400;
  font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}

/* Lumière de fond : la matière que le verre réfracte */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 540px at 14% -8%, rgba(10,132,255,.20), transparent 62%),
    radial-gradient(660px 500px at 86% 12%, rgba(94,92,230,.15), transparent 60%),
    radial-gradient(900px 640px at 50% 50%, rgba(255,255,255,.04), transparent 68%),
    radial-gradient(720px 540px at 18% 94%, rgba(10,132,255,.12), transparent 62%);}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);background-size:3px 3px}

/* ---------- Grammaire typographique Apple ---------- */
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.wrap-lg{max-width:1250px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.texte{max-width:700px;margin:0 auto}

h1,h2,h3{font-weight:600;line-height:1.05;letter-spacing:-.028em;color:var(--blanc)}
.t-hero{font-size:clamp(3rem,7.6vw,5.9rem);letter-spacing:-.035em;line-height:1.02}
.t-section{font-size:clamp(2.4rem,5.4vw,4rem);letter-spacing:-.032em}
.t-sous{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.028em}
.intro{font-size:clamp(1.18rem,1.75vw,1.5rem);line-height:1.38;color:var(--gris);font-weight:400;letter-spacing:-.02em}
.corps{font-size:1.06rem;line-height:1.55;color:var(--gris)}
.eyebrow{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--bleu-clair);margin-bottom:1.1rem}
.centre{text-align:center}
.centre .intro,.centre .texte{margin-left:auto;margin-right:auto}
.lumiere{background:linear-gradient(180deg,#ffffff 20%,#b6b9c1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

section{padding:clamp(5.5rem,13vh,9.5rem) 0;position:relative;z-index:1}
.filet{height:1px;background:linear-gradient(90deg,transparent,var(--bord),transparent);position:relative;z-index:1}

/* ---------- En-tete : une seule barre ---------- */
.entete{position:sticky;top:0;z-index:50;
  background:rgba(8,8,10,.6);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  border-bottom:1px solid var(--ligne);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.entete .wrap-lg{display:flex;align-items:center;gap:2rem;height:56px}
.mark{font-size:1.16rem;font-weight:600;letter-spacing:.34em;padding-left:.34em;color:var(--blanc);text-decoration:none;flex-shrink:0}
.nav-liens{display:flex;gap:2.2rem;align-items:center;margin:0 auto}
.nav-liens a{font-size:.84rem;color:var(--gris);text-decoration:none;transition:color .25s;position:relative}
.nav-liens a:hover{color:var(--blanc)}
.nav-liens a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--bleu);
  transform:scaleX(0);transition:transform .3s var(--ease)}
.nav-liens a:hover::after{transform:scaleX(1)}
.entete-droite{display:flex;align-items:center;gap:1.1rem;flex-shrink:0}
.entete-note{font-size:.78rem;color:var(--gris);white-space:nowrap}

/* ---------- Boutons ---------- */
.btn{display:inline-block;color:#fff;text-decoration:none;padding:.72em 1.5em;border-radius:980px;
  font-size:1.02rem;font-weight:400;letter-spacing:-.022em;white-space:nowrap;
  background:linear-gradient(180deg,var(--bleu-clair),var(--bleu));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 6px 20px rgba(10,132,255,.32);
  transition:transform .28s var(--ease), box-shadow .28s, filter .28s}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.44), 0 12px 32px rgba(10,132,255,.46)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-sm{padding:.5em 1.15em;font-size:.88rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 4px 14px rgba(10,132,255,.3)}
.lien{color:var(--bleu-clair);text-decoration:none;font-size:1.02rem;transition:opacity .25s}
.lien:hover{opacity:.75;text-decoration:underline}
.lien::after{content:" \203A";font-weight:400}
.actions{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.centre .actions{justify-content:center}

/* ---------- Hero ---------- */
.hero{min-height:calc(100vh - 56px);display:flex;flex-direction:column;justify-content:center;text-align:center;padding-top:4rem}
.hero .t-hero{max-width:15ch;margin:0 auto 1.5rem}
.hero .intro{max-width:620px;margin:0 auto 2.4rem}
.hero .note{margin-top:1.8rem;font-size:.92rem;color:var(--gris)}

/* ---------- Tuiles de verre ---------- */
.verre{border-radius:24px;
  background:var(--verre);backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);
  border:1px solid var(--bord);box-shadow:inset 0 1px 0 var(--arete), var(--ombre)}
.verre-fort{background:var(--verre-fort)}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tuile{padding:2.3rem 2rem;transition:transform .4s var(--ease), box-shadow .4s}
.tuile:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 22px 54px rgba(0,0,0,.55)}
.tuile .idx{font-size:.88rem;font-weight:600;color:var(--bleu-clair);letter-spacing:.04em;margin-bottom:1rem}
.tuile h3{font-size:1.32rem;margin-bottom:.65rem}
.tuile p{font-size:1rem;line-height:1.5;color:var(--gris)}

/* ---------- Chiffres ---------- */
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:3.4rem}
.chiffre{padding:2.7rem 1.6rem;text-align:center;transition:transform .4s var(--ease), box-shadow .4s}
.chiffre:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 22px 54px rgba(0,0,0,.55)}
.chiffre .val{font-size:clamp(2.3rem,4.6vw,3.2rem);font-weight:600;letter-spacing:-.04em;line-height:1;margin-bottom:.7rem}
.chiffre .lib{font-size:.85rem;color:var(--gris);line-height:1.4}

/* ---------- Listes ---------- */
.liste{border-radius:24px;padding:.5rem 2rem;max-width:760px;margin:2.6rem auto 0;
  background:var(--verre);backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);
  border:1px solid var(--bord);box-shadow:inset 0 1px 0 var(--arete), var(--ombre)}
.liste .item{padding:1.7rem 0;border-top:1px solid var(--ligne);text-align:left}
.liste .item:first-child{border-top:none}
.liste .lab{font-size:.8rem;font-weight:600;color:var(--bleu-clair);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
.liste .tx{font-size:1.04rem;line-height:1.55;color:var(--gris)}
.liste .tx b{color:var(--blanc);font-weight:500}
.liste .pt{font-size:1.08rem;color:var(--blanc);position:relative;padding-left:1.7rem}
.liste .pt::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--bleu);box-shadow:0 0 12px rgba(10,132,255,.9)}

/* ---------- Qui pilote ---------- */
.qui{display:grid;grid-template-columns:.78fr 1.22fr;gap:4.5rem;align-items:center;margin-top:3.4rem;text-align:left}
.qui img{width:100%;height:auto;border-radius:26px;display:block;filter:grayscale(100%) contrast(1.04);
  border:1px solid var(--bord);box-shadow:inset 0 1px 0 var(--arete), 0 24px 70px rgba(0,0,0,.62)}
.qui .nom{font-size:1.9rem;font-weight:600;letter-spacing:-.03em;margin-bottom:.25rem}
.qui .role{font-size:.98rem;color:var(--gris);margin-bottom:1.9rem}
.qui p{color:var(--gris);font-size:1.06rem;line-height:1.58;margin-bottom:1.15rem}
.qui p b{color:var(--blanc);font-weight:500}

/* ---------- Offre ---------- */
.offre-tab{border-radius:26px;max-width:880px;margin:3.2rem auto 0;padding:.5rem 2.2rem;
  background:var(--verre-fort);backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);
  border:1px solid var(--bord);box-shadow:inset 0 1px 0 var(--arete), var(--ombre)}
.ligne{display:flex;justify-content:space-between;align-items:baseline;gap:2.2rem;padding:2.1rem 0;border-top:1px solid var(--ligne);text-align:left}
.ligne:first-child{border-top:none}
.ligne .t{font-size:1.4rem;font-weight:600;letter-spacing:-.028em;margin-bottom:.45rem}
.ligne .d{color:var(--gris);font-size:1rem;max-width:540px;line-height:1.55}
.ligne .p{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;white-space:nowrap;text-align:right}
.ligne .p small{display:block;font-size:.84rem;font-weight:400;color:var(--gris);letter-spacing:-.01em;margin-top:.35rem}

/* ---------- Pied de page ---------- */
footer{background:var(--gris-900);border-top:1px solid var(--ligne);position:relative;z-index:1;
  font-size:.82rem;color:var(--gris);line-height:1.6;padding:3.6rem 0 2rem}
footer a{color:var(--gris);text-decoration:none;transition:color .22s}
footer a:hover{color:var(--blanc)}
.f-haut{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem 3rem;padding-bottom:2.6rem;border-bottom:1px solid var(--ligne)}
.f-col h4{font-size:.8rem;font-weight:600;color:var(--blanc);margin-bottom:.85rem;letter-spacing:-.01em}
.f-col ul{list-style:none}
.f-col li{margin-bottom:.45rem}
.f-marque .mark{font-size:1.05rem;display:inline-block;margin-bottom:.8rem;padding-left:.34em}
.f-marque p{max-width:270px}
.f-cta{margin-top:1.1rem}

details.legal{border-bottom:1px solid var(--ligne)}
details.legal summary{list-style:none;cursor:pointer;padding:1.5rem 0;display:flex;align-items:center;gap:.6rem;
  font-size:.86rem;font-weight:500;color:var(--blanc);transition:opacity .22s}
details.legal summary::-webkit-details-marker{display:none}
details.legal summary:hover{opacity:.7}
details.legal summary .chev{display:inline-block;transition:transform .3s var(--ease);color:var(--bleu-clair);font-size:1.05rem;line-height:1}
details.legal[open] summary .chev{transform:rotate(90deg)}
.legal-corps{padding:0 0 2rem;max-width:920px;columns:2;column-gap:3rem}
.legal-corps p{break-inside:avoid;margin-bottom:1.15rem}
.legal-corps b{color:var(--blanc);font-weight:500;display:block;margin-bottom:.15rem}
.f-bas{padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem 2rem;font-size:.78rem}
.f-bas .f-liens{display:flex;gap:1.6rem;flex-wrap:wrap}

/* ---------- Points forts (signature page produit Apple) ---------- */
.forts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:3rem}
.fort{padding:2rem 1.6rem;border-radius:22px;text-align:left;
  background:var(--verre);backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);
  border:1px solid var(--bord);box-shadow:inset 0 1px 0 var(--arete);
  transition:transform .4s var(--ease), box-shadow .4s}
.fort:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 20px 48px rgba(0,0,0,.5)}
.fort .gros{font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.04em;line-height:1;margin-bottom:.7rem}
.fort p{font-size:.97rem;line-height:1.45;color:var(--gris)}

/* ---------- Miroir ---------- */
.miroir{max-width:820px;margin:3.2rem auto 0}
.miroir .ligne-m{font-size:clamp(1.3rem,2.5vw,1.85rem);font-weight:600;letter-spacing:-.03em;line-height:1.28;
  color:var(--blanc);padding:1.5rem 0;border-top:1px solid var(--ligne);text-align:left;opacity:.45;
  transition:opacity .7s var(--ease)}
.miroir .ligne-m:first-child{border-top:none}
.miroir .ligne-m.on{opacity:1}
.bascule{margin-top:3rem;font-size:clamp(1.35rem,2.6vw,1.95rem);font-weight:600;letter-spacing:-.03em;line-height:1.3;max-width:780px;margin-left:auto;margin-right:auto}

/* ---------- Dispositif ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:3rem;text-align:left}
.duo .carte{padding:2.4rem 2.1rem;border-radius:24px;
  background:var(--verre);backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);
  border:1px solid var(--bord);box-shadow:inset 0 1px 0 var(--arete)}
.duo .carte.eux{opacity:.62}
.duo .tete{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;margin-bottom:1.1rem;color:var(--gris)}
.duo .carte.moi .tete{color:var(--bleu-clair)}
.duo .phrase{font-size:1.32rem;font-weight:600;letter-spacing:-.028em;line-height:1.3;margin-bottom:1.2rem}
.duo ul{list-style:none}
.duo li{font-size:1rem;color:var(--gris);line-height:1.5;padding:.55rem 0 .55rem 1.5rem;position:relative}
.duo li::before{content:"";position:absolute;left:0;top:1.12em;width:6px;height:6px;border-radius:50%;background:var(--gris)}
.duo .carte.moi li::before{background:var(--bleu);box-shadow:0 0 10px rgba(10,132,255,.8)}
@media(max-width:900px){.forts{grid-template-columns:1fr 1fr}.duo{grid-template-columns:1fr}}
@media(max-width:560px){.forts{grid-template-columns:1fr}}

/* ---------- Les places (rarete) ---------- */
.places{display:flex;gap:18px;justify-content:center;margin:3.2rem 0 2.6rem}
.place{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;text-align:center;padding:.4rem}
.place.prise{background:var(--verre-fort);border:1px solid var(--bord);color:var(--gris);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);box-shadow:inset 0 1px 0 var(--arete)}
.place.libre{border:1px solid rgba(10,132,255,.55);color:var(--bleu-clair);
  background:rgba(10,132,255,.07);box-shadow:0 0 26px rgba(10,132,255,.22), inset 0 1px 0 rgba(255,255,255,.18)}
.places-note{font-size:.84rem;color:var(--gris);letter-spacing:.04em;text-transform:uppercase}
@media(max-width:560px){.place{width:62px;height:62px;font-size:.64rem}.places{gap:12px}}

/* ---------- Simulateur ---------- */
.sim{border-radius:26px;max-width:900px;margin:3.4rem auto 0;padding:2.6rem 2.4rem;text-align:left;
  background:var(--verre-fort);backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);
  border:1px solid var(--bord);box-shadow:inset 0 1px 0 var(--arete), var(--ombre)}
.sim-reglages{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem}
.sim-champ label{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;color:var(--gris);margin-bottom:.9rem}
.sim-champ .v{font-size:1.32rem;font-weight:600;color:var(--blanc);letter-spacing:-.028em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,var(--bleu) var(--p,50%),rgba(255,255,255,.16) var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);cursor:grab;transition:transform .2s var(--ease)}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.12);cursor:grabbing}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:none;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5);cursor:grab}
.sim-sortie{margin-top:2.4rem;padding-top:2.2rem;border-top:1px solid var(--ligne)}
.sim-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.sim-bloc .lab{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);margin-bottom:.55rem}
.sim-bloc .num{font-size:clamp(1.5rem,3vw,2.15rem);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.sim-bloc .num.accent{background:linear-gradient(180deg,#5ab0ff,#0a84ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sim-note{margin-top:1.8rem;font-size:.95rem;color:var(--gris);line-height:1.55}
.sim-note b{color:var(--blanc);font-weight:500}
.sim-alerte{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:14px;font-size:.93rem;line-height:1.5;
  background:rgba(10,132,255,.1);border:1px solid rgba(10,132,255,.3);color:var(--blanc);display:none}
.sim-alerte.on{display:block}
@media(max-width:900px){.sim{padding:2rem 1.5rem}.sim-reglages{grid-template-columns:1fr;gap:1.8rem}.sim-grille{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Apparition au scroll ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- Adaptatif ---------- */
@media(max-width:900px){
  .grille-3,.chiffres{grid-template-columns:1fr}
  .grille-2{grid-template-columns:1fr}
  .qui{grid-template-columns:1fr;gap:2.4rem;text-align:center}
  .qui img{max-width:300px;margin:0 auto}
  .ligne{flex-direction:column;gap:.6rem}
  .ligne .p{text-align:left}
  .nav-liens{display:none}
  .entete-note{display:none}
  .f-haut{grid-template-columns:1fr 1fr;gap:2rem}
  .f-marque{grid-column:1 / -1}
  .legal-corps{columns:1}
  .liste,.offre-tab{padding-left:1.4rem;padding-right:1.4rem}
  .f-cols{grid-template-columns:1fr;gap:1.6rem}
}