/* ═══════════════════════════════════════════════════════════════════════════
   Page d'accueil (/fr/, /en/…) — style du gabarit « Luna » (Launch UI).

   Fond quasi noir, titres en dégradé blanc → gris, cartes de verre (dégradé
   blanc 5 % → 2 %, liseré blanc très fin, ombre portée), boutons clairs en
   dégradé, halos radiaux et « planète » : un grand disque dont le bord
   lumineux sert d'horizon sous les captures. Captures de l'application en
   thème sombre. Page autonome : elle ne charge pas /site.css.
   ═══════════════════════════════════════════════════════════════════════════ */



*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--fond)}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--police);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--liseré-fort)}
:where(a,button,summary):focus-visible{outline:1px solid var(--lueur);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:96px}
.centre{text-align:center}

/* ── Verre ────────────────────────────────────────────────────────────── */
.verre{position:relative;background:var(--verre);border-radius:var(--r);box-shadow:var(--ombre-xl)}
.verre::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--bord-verre);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* ── Typo ─────────────────────────────────────────────────────────────── */
.titre-degrade{background:linear-gradient(to right,var(--titre-de) 0%,var(--titre-a) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 25px 25px rgba(0,0,0,.15))}
.titre-hero{font-size:clamp(38px,7vw,96px);line-height:1.2;font-weight:600;letter-spacing:-0.02em;max-width:1100px}
.titre-geant{font-size:clamp(34px,5.4vw,72px);line-height:1.22;font-weight:600;letter-spacing:-0.02em;max-width:980px;margin:0 auto}
.titre-2{font-size:clamp(30px,3.6vw,48px);line-height:1.25;font-weight:600;letter-spacing:-0.015em}
h3{font-size:18px;font-weight:600;letter-spacing:-0.015em;line-height:1.3}
.chapo{margin-top:16px;max-width:560px;font-size:clamp(16px,1.4vw,20px);line-height:1.45;font-weight:500;color:var(--doux)}
.petit-titre{text-align:center;font-size:16px;font-weight:600;color:var(--doux)}
.mention{margin-top:20px;font-size:13px;color:var(--pale)}
.entete{margin-bottom:56px}
.entete .chapo{max-width:720px}

.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.actions-gauche{justify-content:flex-start}


/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:168px 0 0}
.hero-texte{display:flex;flex-direction:column;align-items:center;text-align:center}
.badge-annonce{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;padding:4px 12px 4px 4px;border-radius:999px;font-size:13px;font-weight:500;color:var(--doux);
  background:var(--verre);box-shadow:inset 0 0 0 1px var(--liseré-fort)}
.badge-annonce span{padding:2px 8px;border-radius:999px;background:var(--verre-fort);color:var(--encre);box-shadow:inset 0 0 0 1px var(--liseré-fort)}
.badge-annonce:hover{color:var(--encre)}
.hero-sous{margin-top:28px;max-width:840px;font-size:clamp(16px,1.5vw,20px);line-height:1.45;font-weight:500;color:var(--doux)}
.hero-note{margin-top:16px;font-size:12px;color:var(--pale)}
.hero-scene{position:relative;margin-top:80px;padding-bottom:0}
.maquette{position:relative;z-index:2;border-radius:var(--r);overflow:hidden;background:var(--fond);
  box-shadow:inset 0 0 0 1px var(--liseré),var(--ombre-maquette),0 0 0 1px var(--liseré)}
.maquette img{width:100%}
.hero-scene .conteneur{max-width:1440px}
.hero-scene .maquette{max-width:1360px;margin:0 auto;mask-image:linear-gradient(#000 70%,transparent);-webkit-mask-image:linear-gradient(#000 70%,transparent)}

/* Halos radiaux (comme Luna : deux ellipses centrées, l'une large et grise,
   l'autre plus petite et claire). */
.halo{position:absolute;left:50%;border-radius:50%;pointer-events:none;z-index:0}
.halo-large{top:24%;width:60%;height:512px;transform:translate(-50%,-50%) scale(2.5);opacity:1;
  background:radial-gradient(var(--halo-1) 10%,transparent 60%)}
.halo-petit{top:24%;width:40%;height:256px;transform:translate(-50%,-50%) scale(2);
  background:radial-gradient(var(--halo-2) 10%,transparent 60%)}
.hero .halo-large{opacity:.55}

/* La planète : un disque géant dont seul le bord supérieur se voit, avec un
   liseré lumineux et une lueur intérieure. */
.horizon{position:relative;z-index:3;height:360px;margin-top:-260px;overflow:hidden;pointer-events:none;
  /* L'arc s'éteint en douceur : vers les côtés, et vers le bas. */
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 55%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,#000 22%,#000 55%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-composite:intersect}
.planete{position:absolute;top:150px;left:-50%;width:200%;padding-top:100%;border-radius:100%;background:var(--planete-fond);
  border:4px solid var(--lueur);
  box-shadow:0 0 12px var(--lueur),0 0 64px var(--lueur-2),inset 0 0 12px var(--lueur);
  animation:pulsation 6s ease-in-out infinite}
@keyframes pulsation{0%,100%{box-shadow:0 0 12px var(--lueur),0 0 64px var(--lueur-2),inset 0 0 12px var(--lueur)}
  50%{box-shadow:0 0 16px var(--lueur),0 0 96px var(--lueur-2),inset 0 0 16px var(--lueur)}}

/* ── Sections ─────────────────────────────────────────────────────────── */
.section{position:relative;padding:clamp(72px,9vw,128px) 0}

/* Logos qui défilent */
.defile{margin-top:32px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.defile + .defile{margin-top:14px}
.piste{display:flex;gap:12px;width:max-content;animation:defile 60s linear infinite}
.defile-inverse .piste{animation-direction:reverse;animation-duration:72s}
.defile:hover .piste{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
.piste li{display:flex;align-items:center;gap:10px;height:60px;padding:0 24px;border-radius:var(--r);background:var(--verre);box-shadow:inset 0 0 0 1px var(--liseré);
  font-size:16px;font-weight:600;letter-spacing:-0.01em;color:var(--texte-2);white-space:nowrap}
.piste img{height:22px;width:auto;filter:var(--filtre-logo);opacity:.85}
.piste img.mot{height:24px;max-width:130px}
.piste img.logo-aws{height:26px}
/* Logos-mots pleins (lettres sur toute la hauteur) : plus bas, même poids. */
.piste img.dense{height:18px}
.piste li small{font-size:12px;font-weight:500;letter-spacing:0;color:var(--doux)}
.mention-marques{margin-top:18px;text-align:center;font-size:12.5px;color:var(--pale)}

/* Chiffres */
.chiffres{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:center}
.chiffres-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.carte-chiffre{padding:clamp(20px,3vw,32px) clamp(20px,3.4vw,48px)}
.carte-chiffre .etiquette{font-size:14px;font-weight:500;color:var(--doux)}
.carte-chiffre b{display:block;margin:10px 0 8px;font-size:clamp(36px,4vw,56px);font-weight:500;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:var(--lueur-chiffre)}
.carte-chiffre .os{display:flex;align-items:center;gap:18px;height:56px;margin:10px 0 8px}
.carte-chiffre .os img{height:40px;width:40px;filter:var(--filtre-logo) drop-shadow(0 0 18px var(--liseré-fort))}
.carte-chiffre p:last-child{font-size:14px;color:var(--doux);line-height:1.4}
@media (max-width:900px){.chiffres{grid-template-columns:1fr}}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tuile{display:flex;flex-direction:column;overflow:hidden;min-height:420px;grid-column:span 6}
.tuile-large{grid-column:span 7;flex-direction:row}
.bento .tuile:nth-child(2){grid-column:span 5}
.bento .tuile:nth-child(3){grid-column:span 5}
.tuile-texte{position:relative;z-index:2;padding:28px 28px 0}
.tuile-large .tuile-texte{flex:0 0 42%;padding:32px 0 32px 32px}
.tuile h3{font-size:24px;line-height:1.1;letter-spacing:-0.025em;margin-top:14px}
.tuile p{margin-top:10px;color:var(--doux);font-size:15px;line-height:1.5;max-width:440px}
.tuile-icone{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--verre-fort);box-shadow:inset 0 0 0 1px var(--liseré)}
.tuile-icone svg{width:16px;height:16px;fill:none;stroke:var(--texte-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tuile-image{position:relative;margin:28px 0 0 28px;border-radius:10px 0 0 0;overflow:hidden;box-shadow:inset 0 0 0 1px var(--liseré),var(--ombre-maquette);flex:1;min-height:200px}
.tuile-image img{width:100%;height:100%;object-fit:cover;object-position:left top}
.tuile-image-droite{margin:32px 0 0 28px}
.tuile:hover .tuile-image img{transform:scale(1.015)}
.tuile-image img{transition:transform .6s var(--courbe)}
@media (max-width:1000px){
  .bento{grid-template-columns:1fr}
  .tuile,.tuile-large,.bento .tuile:nth-child(n){grid-column:auto;flex-direction:column;min-height:0}
  .tuile-large .tuile-texte{padding:28px 28px 0}
  .tuile-image{min-height:220px}
}

/* Section planète : titre géant, trois captures, horizon */
.section-planete{overflow:hidden;padding-bottom:0}
.entete-geant{text-align:center;display:flex;flex-direction:column;align-items:center}
.entete-geant .chapo{margin-inline:auto;text-align:center}
.scene-planete{position:relative;margin-top:64px}
.scene-planete .halo-large{top:30%;opacity:.7}
.trio{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.35fr 1fr;align-items:end;gap:16px}
.maquette-cote{opacity:.85;transform:translateY(24px)}
.maquette-centre{z-index:3}
.horizon-bas{margin-top:-200px}
@media (max-width:900px){.trio{grid-template-columns:1fr}.maquette-cote{transform:none;opacity:1}}

/* Capacités 4 × 2 */
.capacites{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 32px;margin-top:56px}
.capacites h3{display:flex;align-items:center;gap:10px;font-size:16px}
.capacites h3 .ic{opacity:.85}
.capacites h3 img{width:18px;height:18px;filter:var(--filtre-logo);opacity:.85}
.capacites p{margin-top:8px;font-size:14.5px;color:var(--doux);line-height:1.5}
.icone-texte{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:4px;font-size:9.5px;font-weight:700;font-family:var(--mono);
  color:var(--fond);background:var(--texte-2)}
@media (max-width:1000px){.capacites{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.capacites{grid-template-columns:1fr}}

/* NIS2 */
.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.liste-verre{display:grid;gap:12px}
.liste-verre li{padding:20px 24px}
.liste-verre b{font-size:16px;font-weight:600}
.liste-verre p{margin-top:4px;font-size:14.5px;color:var(--doux)}
@media (max-width:900px){.deux{grid-template-columns:1fr}}

/* Tarifs */
.tarifs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.tarif{display:flex;flex-direction:column;padding:28px 24px}
.tarif h3{font-size:18px}
.tarif-pour{margin-top:4px;font-size:14px;color:var(--doux)}
.prix{margin:22px 0 24px;font-size:48px;font-weight:700;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums}
.prix small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--doux);margin-left:4px}
.tarif ul{display:grid;gap:10px;margin-top:24px;padding-top:24px;box-shadow:inset 0 1px 0 var(--liseré);font-size:14px;color:var(--texte-2)}
.tarif li{position:relative;padding-left:24px}
.tarif li::before{content:"";position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.2px var(--doux)}
.tarif li::after{content:"";position:absolute;left:4.5px;top:6px;width:5px;height:3px;border-left:1.2px solid var(--doux);border-bottom:1.2px solid var(--doux);transform:rotate(-45deg)}
.tarif-vedette{background:var(--vedette)}
.tarif-vedette::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:var(--vedette-lueur)}
.tarifs-lien{margin-top:28px;text-align:center;font-size:14px;color:var(--doux)}
.tarifs-lien a:hover{color:var(--encre)}
@media (max-width:1040px){.tarifs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tarifs{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(32px,6vw,96px)}
.faq-liste details{border-bottom:1px solid var(--liseré)}
.faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font-weight:600;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:24px;width:7px;height:7px;border-right:1.5px solid var(--doux);border-bottom:1.5px solid var(--doux);
  transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:28px}
.faq details p{padding:0 0 20px;color:var(--doux);font-size:15px;line-height:1.6;max-width:640px}
@media (max-width:900px){.faq{grid-template-columns:1fr}}



/* ── Apparitions (Luna : appear / appear-zoom) ────────────────────────── */
.apparait{opacity:0;animation:apparait .6s forwards var(--courbe)}
.apparait-zoom{opacity:0;animation:apparait-zoom .8s forwards var(--courbe)}
.retard-1{animation-delay:.1s}.retard-2{animation-delay:.3s}.retard-3{animation-delay:.6s}
@keyframes apparait{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes apparait-zoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.js .revele{opacity:0;transform:translateY(20px);transition:opacity .7s var(--courbe),transform .7s var(--courbe)}
.js .revele.vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .apparait,.apparait-zoom,.js .revele{opacity:1;transform:none}
}

/* Petits écrans : l'horizon reste sous la capture. */
@media (max-width:700px){
  .hero{padding-top:128px}
  .hero-scene{margin-top:48px}
  .horizon{height:180px;margin-top:-60px}
  .planete{top:110px;left:-100%;width:300%;padding-top:300%;border-width:3px}
  .horizon-bas{margin-top:-40px}
}

/* Le halo et la planète débordent de leur section : un fondu vers le fond
   remplace la coupure nette en bas de la section. */
.hero,.section-planete{isolation:isolate}
.hero::after,.section-planete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;z-index:5;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--fond) 85%)}
.section-planete{padding-bottom:40px}
.scene-planete .halo-large{mask-image:linear-gradient(#000 40%,transparent 85%);-webkit-mask-image:linear-gradient(#000 40%,transparent 85%)}

/* Section « Français » : une ligne droite bleu blanc rouge, floutée,
   limitée au centre de la page, au-dessus d'une carte en verre. */
.francais{position:relative;max-width:1040px;margin:0 auto;text-align:center}
/* Lueur bleu blanc rouge floutée, derrière le contenu de la section. */
.francais{isolation:isolate;padding-top:24px}
.flou-fr{position:absolute;z-index:-1;left:50%;top:50%;width:min(1000px,110%);height:360px;transform:translate(-50%,-50%);display:flex;pointer-events:none;
  filter:blur(70px);opacity:var(--fr-opacite);animation:souffle-fr 7s ease-in-out infinite}
.flou-fr i{flex:1;border-radius:50%}
.flou-fr i:nth-child(1){background:#2f5fe0}
.flou-fr i:nth-child(2){background:var(--fr-centre-flou);margin:0 -12%}
.flou-fr i:nth-child(3){background:#e5372c}
@keyframes souffle-fr{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.flou-fr{animation:none}}
:root{--fr-opacite:.32}
:root[data-theme="light"]{--fr-opacite:.22}
@media (max-width:700px){.flou-fr{height:520px;flex-direction:column}.flou-fr i:nth-child(2){margin:-12% 0}}
.francais .titre-2{margin:0 auto 14px}
.francais .chapo{max-width:620px;margin:0 auto 40px;color:var(--doux)}
.points-fr{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:left;list-style:none;padding:0;margin:0}
.points-fr b{display:block;margin-bottom:6px;color:var(--encre);font-weight:600}
.points-fr p{margin:0;font-size:14px;color:var(--doux)}
@media (max-width:900px){.points-fr{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.points-fr{grid-template-columns:1fr}}

/* Mensuel / annuel : un interrupteur à curseur glissant ; les prix des deux
   cycles sont dans la page (synchronisés par tarifs.py), on montre l'un ou
   l'autre avec un léger glissé. */
.cycle{position:relative;display:flex;width:max-content;margin:0 0 36px;padding:4px;border-radius:999px;background:var(--verre);box-shadow:inset 0 0 0 1px var(--liseré-fort)}
html:not(.js) .cycle{display:none}
.cycle button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border:0;border-radius:999px;background:none;
  font:inherit;font-size:14px;font-weight:500;color:var(--doux);cursor:pointer;transition:color .3s var(--courbe)}
.cycle button[aria-checked="true"]{color:var(--bouton-fort-encre)}
.cycle .curseur{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--bouton-fort);
  box-shadow:0 2px 12px var(--liseré-fort);transition:transform .45s var(--courbe),width .45s var(--courbe)}
.offert{padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;color:var(--offert-encre);background:var(--offert-fond);transition:background .3s,color .3s}
.cycle button[aria-checked="false"] .offert{background:var(--offert-fond-doux);color:var(--offert-encre-doux)}
.facturation{margin:-14px 0 22px;min-height:20px;font-size:13px;color:var(--doux)}
.tarifs[data-cycle="annuel"] .v-m,.tarifs[data-cycle="mensuel"] .v-a{display:none}
.tarifs.bascule .v-m,.tarifs.bascule .v-a{animation:arrivee .45s var(--courbe)}
@keyframes arrivee{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.valeurs>span{display:inline-block}
@media (prefers-reduced-motion:reduce){.tarifs.bascule .v-m,.tarifs.bascule .v-a{animation:none}.cycle .curseur{transition:none}}

:root[data-theme="light"] .tuile-image,:root[data-theme="light"] .maquette{background:#fff}
:root[data-theme="light"] .piste li{box-shadow:inset 0 0 0 1px var(--liseré),0 1px 2px rgba(9,9,11,.04)}


:root[data-theme="light"] .titre-degrade{filter:none}
/* Montants et unités sur une ligne, dans toutes les langues (« /Monat »…). */
.prix{white-space:nowrap;font-size:clamp(30px,2.9vw,44px)}
@media (max-width:1040px){.prix{font-size:44px}}