/* ══════════════════════════════════════════════════════════════════════════
   SITE SUPER AI — la feuille de style
   15 septembre 2026, premiere version.

   L'ESPRIT, DEMANDE PAR CLOCLO : la structure et le rythme de metamask.io,
   avec NOS atouts et NOS couleurs. Des couleurs vives qui CHANGENT a chaque
   section. Des lettres enormes qui disent le message et qui s'en vont quand
   on defile. Un telephone qui RESTE au centre pendant que les cartes defilent
   autour — c'est l'animation qu'il aime.

   ⚠ ON NE COPIE RIEN : ni leur renard, ni leur logo, ni leur signature. Notre
     mascotte est le BOUCLIER du portefeuille Super Senior, et nos phrases sont
     les notres.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --nuit:#070b18;        /* le fond du portefeuille Super Senior */
  --nuit-2:#0d1426;
  --bleu:#2563eb;        /* le bouclier */
  --bleu-clair:#93c5fd;
  --or:#e8a100;          /* le S */
  --blanc:#ffffff;
  --rayon:28px;
  --police:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  /* Les couleurs vives des sections, une par ecran */
  --vif-1:#c9f27a;  --vif-2:#7c3aed;  --vif-3:#fb923c;
  --vif-4:#f0abfc;  --vif-5:#38bdf8;  --vif-6:#fde047;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nuit); color:var(--blanc);
  font-family:var(--police); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}

/* ── LA BARRE DU HAUT ───────────────────────────────────────────────── */
.barre{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(14px,3vw,34px);
  transition:background .35s ease, backdrop-filter .35s ease;
}
.barre.posee{background:rgba(7,11,24,.82); backdrop-filter:blur(14px)}
.marque{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em}
.marque svg,.marque img{height:34px; width:auto; display:block}
.marque span{font-size:19px; line-height:1.05}
.marque span b{display:block; font-weight:800}
.marque span i{display:block; font-style:normal; font-weight:800; color:var(--or)}
.haut-droite{display:flex; align-items:center; gap:10px}

.b-commencer{
  /* ⚠ `inline-block`, sinon la marge du haut ne pousse rien : sur un lien,
     une marge verticale n'a aucun effet tant qu'il reste en ligne, et le
     bouton venait se poser SUR la derniere ligne du paragraphe. Vu sur la
     photo du hero. */
  display:inline-block;
  background:var(--blanc); color:var(--nuit); border:0; cursor:pointer;
  font:800 14px/1 var(--police); letter-spacing:.04em; text-transform:uppercase;
  padding:15px 24px; border-radius:999px; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease;
}
.b-commencer:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,255,255,.22)}

.b-menu{
  width:50px;height:50px;border-radius:999px;border:0;cursor:pointer;
  background:var(--nuit-2); display:grid; place-items:center; gap:5px;
  padding:0; flex-direction:column;
}
/* ⚠ 16 SEPTEMBRE — DEUX TRAITS, PAS TROIS. Cloclo, en regardant leur site :
   « toi tu en as fait trois, ils sont un peu espaces, un peu grossiers ; ils
   sont plus jolis les deux petits traits a cote de Get MetaMask ». Donc deux
   traits, plus fins, plus courts, plus serres. La croix de fermeture devient
   une vraie croix : les deux traits se rejoignent au centre. */
.b-menu i{display:block;width:16px;height:1.5px;background:var(--blanc);border-radius:2px;
  transition:transform .25s ease}
.b-menu i+i{margin-top:5px}
.b-menu[aria-expanded="true"] i:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.b-menu[aria-expanded="true"] i:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* ── LE PANNEAU DU MENU ─────────────────────────────────────────────── */
.panneau{
  position:fixed; inset:0; z-index:55; background:rgba(7,11,24,.97);
  backdrop-filter:blur(18px); padding:104px clamp(18px,5vw,64px) 40px;
  overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.panneau.ouvert{opacity:1; visibility:visible}
.panneau h3{font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bleu-clair); margin:0 0 14px}
.panneau nav{display:grid; gap:6px; margin-bottom:40px}
.panneau nav a{font-size:clamp(26px,5vw,44px); font-weight:800; letter-spacing:-.03em;
  padding:6px 0; transition:color .2s ease, transform .2s ease}
.panneau nav a:hover{color:var(--or); transform:translateX(8px)}
.langues{display:flex; flex-wrap:wrap; gap:9px}
.langues button{
  background:var(--nuit-2); color:var(--blanc); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:11px 18px; font:700 14px var(--police); cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.langues button:hover{background:#17203a}
.langues button[aria-pressed="true"]{background:var(--or); color:var(--nuit); border-color:var(--or)}

/* ── LE HERO ────────────────────────────────────────────────────────── */
.hero{
  /* ⚠ LE TEXTE EN HAUT, LE BOUCLIER EN BAS, ET ILS NE SE MARCHENT PAS
     DESSUS. Premiere ecriture : tout etait centre, et le bouclier
     recouvrait la phrase et le bouton. Vu sur la premiere photo. */
  position:relative; min-height:100svh; display:grid;
  align-content:start; justify-items:center;
  overflow:hidden; padding:clamp(96px,12vh,140px) 16px 0; text-align:center;
}
.hero h1{
  position:relative; z-index:3; margin:0;
  font-size:clamp(42px,10.5vw,150px); line-height:.88; letter-spacing:-.045em;
  font-weight:900; color:var(--bleu-clair); text-transform:uppercase;
}
.hero h1 em{font-style:normal; color:var(--or); display:block}
.hero p{
  position:relative; z-index:3; max-width:640px; margin:22px auto 0;
  font-size:clamp(16px,2vw,21px); line-height:1.55; color:#c8d4ef;
}
.hero .b-commencer{position:relative; z-index:5; margin-top:26px; padding:19px 40px; font-size:15px}

/* les pieces qui flottent DERRIERE les lettres */
.piece{position:absolute; z-index:1; border-radius:50%; display:grid; place-items:center;
  font-weight:800; color:#0b1020; filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
  animation:flotte 7s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-26px) rotate(6deg)}}

/* le bouclier qui monte du bas et passe PAR-DESSUS */
.bouclier-hero{
  /* Il ne montre que sa tete au repos, et il monte quand on defile —
     comme le renard de chez eux, mais c'est NOTRE bouclier. */
  position:absolute; z-index:4; left:50%; bottom:0;
  width:clamp(170px,21vw,270px); transform:translate(-50%,80%);
  filter:drop-shadow(0 -22px 54px rgba(37,99,235,.55));
  pointer-events:none;
}

/* ── LES SECTIONS COLOREES ──────────────────────────────────────────── */
.section{
  position:relative; padding:clamp(70px,10vw,130px) clamp(16px,4vw,48px) clamp(50px,6vw,84px);
  color:var(--nuit); transition:background-color .6s ease;
}
.section[data-vif="1"]{background:var(--vif-1)}
.section[data-vif="2"]{background:var(--vif-2); color:var(--blanc)}
.section[data-vif="3"]{background:var(--vif-3)}
.section[data-vif="4"]{background:var(--vif-4)}
.section[data-vif="5"]{background:var(--vif-5)}
.section[data-vif="6"]{background:var(--vif-6)}
.section[data-vif="nuit"]{background:var(--nuit); color:var(--blanc)}

.titre-geant{
  font-size:clamp(34px,7.5vw,104px); line-height:.94; letter-spacing:-.04em;
  font-weight:900; text-transform:uppercase; margin:0 0 18px; max-width:15ch;
}
.sous{font-size:clamp(16px,1.9vw,20px); line-height:1.6; max-width:52ch; margin:0; opacity:.86}

/* ── LE TELEPHONE QUI RESTE AU CENTRE ───────────────────────────────── */
.scene{position:relative; display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,3vw,34px); align-items:start; max-width:1240px; margin:0 auto}
.colonne{display:grid; gap:clamp(22px,5vh,64px); align-content:start}

/* ⚠⚠ LE TELEPHONE RESTE AU CENTRE PENDANT QUE LES CARTES DEFILENT.
   C'est l'animation que Cloclo aime chez eux : « le telephone ne bouge pas,
   c'est le monde qui defile autour ».
   Premiere ecriture : `top:50%` avec `translateY(-50%)`. Ca ne colle PAS —
   une boite collante se cale sur son bord HAUT, et la transformation la
   decale sans que le collage en tienne compte : le telephone partait avec
   le defilement. Vu sur la deuxieme photo, il avait carrement disparu.
   On le colle donc par le haut, sans transformation, et ce sont les colonnes
   qui sont assez hautes pour lui donner de quoi rester. */
.tel{
  position:sticky; top:calc((100vh - 60vh) / 2); align-self:start;
  width:clamp(230px,26vw,320px); height:60vh; max-height:620px; aspect-ratio:auto;
  background:#0a0f1e; border:9px solid #05080f; border-radius:42px;
  box-shadow:0 34px 80px rgba(0,0,0,.45); overflow:hidden; justify-self:center;
}
.tel .ecran{position:absolute; inset:0; padding:16px 14px; font-size:12px; overflow:hidden}
.tel .haut{display:flex; justify-content:space-between; align-items:center;
  color:#8fa3c8; font-size:11px; margin-bottom:12px}
.tel .total{font-size:29px; font-weight:800; letter-spacing:-.02em; color:#fff}
.tel .variation{color:#4ade80; font-size:12px; margin-top:2px}
.tel .actions{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:15px 0}
.tel .actions div{background:#141c31; border-radius:13px; padding:10px 4px; text-align:center;
  color:#c7d3ec; font-size:10px}
.tel .ligne{display:flex; align-items:center; gap:9px; padding:9px 0;
  border-top:1px solid rgba(255,255,255,.07)}
.tel .rond{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#0b1020;flex:none}
.tel .nom{flex:1;color:#e7edfb;font-weight:600;font-size:12px}
.tel .nom small{display:block;color:#8fa3c8;font-weight:400;font-size:10px}
.tel .val{text-align:right;color:#e7edfb;font-weight:700;font-size:12px}

.carte{
  /* Assez hautes pour que la colonne donne au telephone de quoi rester
     colle pendant qu'on defile — mais le texte reste groupe en haut. */
  border-radius:var(--rayon); padding:clamp(20px,2.6vw,32px); min-height:clamp(210px,30vh,300px);
  display:flex; flex-direction:column; justify-content:flex-start;
  opacity:0; transform:translateY(38px); transition:opacity .6s ease, transform .6s ease;
}
.carte.vue{opacity:1; transform:none}
.carte h3{font-size:clamp(19px,2.3vw,27px); line-height:1.16; letter-spacing:-.02em;
  font-weight:800; margin:0}
.carte p{margin:12px 0 0; font-size:15px; line-height:1.55; opacity:.82}
.carte .emoji{font-size:44px; align-self:flex-end; line-height:1; margin-top:auto}
.c-nuit{background:#06301f; color:#d7ffe9}
.c-bleu{background:#bfdbfe; color:#0b1020}
.c-violet{background:#5b21b6; color:#ede9fe}
.c-orange{background:#fdba74; color:#3b1d02}
.c-rose{background:#fbcfe8; color:#500724}
.c-jaune{background:#fef08a; color:#3b2f02}
.c-ciel{background:#7dd3fc; color:#05243b}

/* ── L'ANALYSE QUI TOURNE POUR DE VRAI ──────────────────────────────── */
.analyse{display:grid; gap:9px}
.analyse .etape{display:flex; align-items:center; gap:9px; font-size:11px; color:#8fa3c8;
  opacity:.25; transition:opacity .4s ease, color .4s ease}
.analyse .etape.active{opacity:1; color:#c9f27a}
.analyse .etape.faite{opacity:1; color:#8fa3c8}
.analyse .point{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;flex:none;
  display:grid;place-items:center;font-size:9px}
.jauge{height:6px;border-radius:99px;background:#141c31;overflow:hidden;margin-top:12px}
.jauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#c9f27a);
  transition:width .5s ease}

/* ── LES CHIFFRES QUI MONTENT ───────────────────────────────────────── */
.chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(16px,3vw,34px); max-width:1100px; margin:44px auto 0}
.chiffre{text-align:center}
.chiffre b{display:block; font-size:clamp(38px,6vw,76px); font-weight:900; letter-spacing:-.04em;
  line-height:1; color:var(--or)}
.chiffre span{display:block; margin-top:8px; font-size:14px; opacity:.8; line-height:1.4}

/* ── L'APPARITION AU DEFILEMENT ─────────────────────────────────────── */
.monte{opacity:0; transform:translateY(46px); transition:opacity .7s ease, transform .7s ease}
.monte.vue{opacity:1; transform:none}

/* ── LE PIED ────────────────────────────────────────────────────────── */
.pied{background:var(--nuit-2); padding:clamp(48px,7vw,86px) clamp(16px,4vw,48px) 40px}
.pied .grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:32px; max-width:1180px; margin:0 auto}
.pied h4{font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--bleu-clair);
  margin:0 0 14px}
.pied a,.pied p{display:block; color:#b9c6e2; font-size:15px; line-height:2; margin:0}
.pied .bas{max-width:1180px; margin:44px auto 0; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1); color:#7e8db0; font-size:13px; line-height:1.7}

/* ── LE TELEPHONE SUR PETIT ECRAN ───────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
   LE TELEPHONE — ET IL DOIT ETRE PARFAIT, PAS SEULEMENT ACCEPTABLE
   ══════════════════════════════════════════════════════════════════════
   Demande de Cloclo, 15 septembre au soir : « le site doit etre joli sur
   l'ordinateur et aussi PARFAIT sur les telephones. Android, Apple, les
   petits telephones, les grands telephones. »
   Mesure faite a 360, 390 et 430 px de large, les trois tailles qui couvrent
   la quasi-totalite des telephones en circulation.
   ⚠ ET LA REGLE QUI NE SE DISCUTE PAS : rien ne depasse sur les cotes. Un
     site qui defile lateralement sur un telephone est casse, meme s'il est
     beau. */
@media (max-width:1000px){
  .scene{grid-template-columns:1fr}
  /* ⚠ SUR TELEPHONE, LE TELEPHONE DESSINE EPOUSE SON CONTENU.
     A 9/19 comme sur ordinateur, il restait un grand vide noir sous la
     derniere ligne — vu sur la photo a 430 px. Ici il s'arrete ou le contenu
     s'arrete, et la maquette reste credible. */
  .tel{position:relative; top:auto; height:auto; aspect-ratio:auto; min-height:0;
       order:-1; margin:0 auto 26px; align-self:center; width:min(300px,78vw)}
  .tel .ecran{position:relative; inset:auto; padding:18px 16px 22px}
  .colonne{grid-template-columns:1fr; gap:16px}
  .carte{min-height:0}
}

@media (max-width:720px){
  /* ── LA BARRE : le bouton du haut s'efface, le hero en a deja un ── */
  .barre{padding:10px 12px}
  .b-commencer{padding:13px 18px; font-size:13px}
  .haut-droite .b-commencer{display:none}
  .b-menu{width:46px;height:46px}
  .marque svg,.marque img{height:30px}
  .marque span{font-size:17px}

  /* ── LE HERO ─────────────────────────────────────────────────── */
  .hero{min-height:auto; padding:96px 18px clamp(150px,34vw,230px)}
  .hero h1{font-size:clamp(38px,11.5vw,62px); line-height:.94; letter-spacing:-.035em}
  .hero p{font-size:15.5px; line-height:1.55; margin-top:18px; max-width:34ch}
  .hero .b-commencer{margin-top:22px; padding:17px 34px; font-size:14px}

  /* ⚠ La taille et la place des pieces sont decidees dans site.js, qui a deux
     jeux de positions : sur telephone elles ne vivent QUE dans les marges,
     jamais dans la bande du texte. Ici on ne fait que les adoucir. */
  .piece{opacity:.92}

  /* Il ne montre que sa pointe haute : il « se leve » de la section
     suivante au lieu d'etre coupe en plein milieu. */
  .bouclier-hero{width:clamp(130px,36vw,180px); transform:translate(-50%,70%)}

  /* ── LES SECTIONS ────────────────────────────────────────────── */
  .section{padding:clamp(54px,13vw,80px) 18px clamp(40px,9vw,60px)}
  .titre-geant{font-size:clamp(30px,8.6vw,46px); line-height:1.02; max-width:100%}
  .sous{font-size:15.5px; line-height:1.6}
  .carte h3{font-size:19px}
  .carte p{font-size:14.5px}
  .carte .emoji{font-size:34px}

  /* ── LES CHIFFRES : deux par ligne, jamais un par ligne ──────── */
  .chiffres{grid-template-columns:repeat(2,1fr); gap:22px 14px; margin-top:32px}
  .chiffre b{font-size:clamp(30px,10vw,46px)}
  .chiffre span{font-size:12.5px}

  /* ── LE MENU ─────────────────────────────────────────────────── */
  .panneau{padding:88px 20px 36px}
  .panneau nav a{font-size:27px}
  .langues button{padding:10px 15px; font-size:13.5px}

  .pied{padding:46px 18px 32px}
  .pied .grille{gap:26px}
}

/* Les tout petits telephones — 360 px et moins (Android d'entree de gamme) */
@media (max-width:380px){
  .hero h1{font-size:34px}
  .hero p{font-size:15px}
  .titre-geant{font-size:27px}
  .chiffres{grid-template-columns:1fr 1fr; gap:18px 10px}
  .chiffre b{font-size:28px}
  .tel{width:min(270px,84vw)}
  .marque span{font-size:16px}
}

/* ⚠ LE FILET DE SECURITE : quoi qu'il arrive, rien ne deborde sur les cotes. */
html,body{max-width:100%; overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .monte,.carte{opacity:1; transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   AJOUTS DU 15 SEPTEMBRE, DEUXIEME PASSE — apres ses retours sur la maquette
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LE BOUCLIER QUI VOYAGE SUR TOUTE LA PAGE ───────────────────────────
   « le renard, il est toujours sur la page, il se retrecit. »
   Il est FIXE a l'ecran, et c'est le defilement qui decide de sa place et de
   sa taille. Il passe DEVANT le telephone, comme le leur. */
.bouclier-voyage{
  position:fixed; z-index:40; left:50%; top:0;
  width:300px; pointer-events:none; will-change:transform,opacity;
  filter:drop-shadow(0 14px 42px rgba(37,99,235,.45));
  transform:translate(-50%,0);
}

/* ── LA DECHIRURE ENTRE LES SECTIONS ────────────────────────────────────
   Chez eux, une section « se dechire » en diagonale sur la suivante. On fait
   la meme chose : le haut de la section est coupe en biais, et elle remonte
   sur celle d'au-dessus pour que la couleur precedente apparaisse dans le
   coin. Une section marquee `data-droit` garde un bord droit. */
.section[data-vif]:not([data-droit]){
  clip-path:polygon(0 0, 100% 46px, 100% 100%, 0 100%);
  margin-top:-46px; padding-top:calc(clamp(70px,10vw,130px) + 46px);
}
.section[data-vif]:nth-of-type(even):not([data-droit]){
  clip-path:polygon(0 46px, 100% 0, 100% 100%, 0 100%);
}

/* ── LE RESULTAT AVANT / APRES DE SUPER AI ──────────────────────────────
   ⚠ CE SONT DES CHIFFRES DE DEMONSTRATION, et la ligne « example » juste en
     dessous le dit. On ne fait jamais passer un exemple pour un vrai compte. */
.resultat{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:8px; margin-top:16px; padding:12px 10px; background:#101830; border-radius:14px}
.resultat .rd{text-align:center}
.resultat .et{display:block; font-size:9.5px; color:#8fa3c8; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:3px}
.resultat b{font-size:19px; font-weight:800; letter-spacing:-.02em}
.resultat .rouge{color:#f87171}
.resultat .vert{color:#4ade80}
.resultat .fleche{color:#8fa3c8; font-size:15px}
.exemple{margin:8px 0 0; font-size:9.5px; color:#6d7f9f; text-align:center; line-height:1.4}

/* ── LE MINAGE : la vraie interface ─────────────────────────────────────
   Demande de Cloclo : « on clique minage, on choisit sa machine, et puis on
   voit la machine qui tourne ». C'est exactement ce que fait cet ecran, tout
   seul, en boucle, devant les gens. */
.machine{display:flex; align-items:center; gap:9px; padding:9px 10px; margin-top:7px;
  background:#121a2e; border:1px solid transparent; border-radius:12px;
  transition:border-color .3s ease, background .3s ease}
.machine.choisie{border-color:var(--or); background:#1a1c1f}
.machine .mi{font-size:17px; flex:none}
.machine .nom{flex:1; color:#e7edfb; font-weight:600; font-size:12px}
.machine .nom small{display:block; color:#8fa3c8; font-weight:400; font-size:10px}
.machine .val{color:#8fa3c8; font-size:13px}
.b-tel{margin-top:12px; background:var(--or); color:#1a1200; border-radius:12px;
  padding:11px; text-align:center; font-weight:800; font-size:12.5px}

.rotor{display:grid; place-items:center; margin:14px 0 6px}
.rotor .pale{font-size:46px; display:block; animation:tourne 2.6s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.m-th{text-align:center; color:#e7edfb; font-size:12px}
.m-th b{font-size:26px; font-weight:800; color:var(--or); display:block; letter-spacing:-.02em}
.m-barre{height:5px; border-radius:99px; background:#141c31; overflow:hidden; margin:12px 0 6px}
.m-barre i{display:block; height:100%; width:0; background:linear-gradient(90deg,#e8a100,#f7931a)}
.m-note{margin-top:10px; text-align:center; font-size:10px; color:#8fa3c8; letter-spacing:.05em}

@media (max-width:720px){
  .bouclier-voyage{width:190px}
  .section[data-vif]:not([data-droit]){
    clip-path:polygon(0 0, 100% 26px, 100% 100%, 0 100%);
    margin-top:-26px; padding-top:calc(clamp(54px,13vw,80px) + 26px);
  }
  .section[data-vif]:nth-of-type(even):not([data-droit]){
    clip-path:polygon(0 26px, 100% 0, 100% 100%, 0 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .rotor .pale{animation:none}
  .bouclier-voyage{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   LA PAGE « COMMENCER » — commencer.html
   16 septembre 2026.

   La structure est celle de leur page de telechargement : le selecteur en
   haut a gauche, le grand titre, les cartes dessous, et le portefeuille a
   DROITE QUI DEBORDE DU BORD. Les couleurs, elles, sont les notres : le fond
   nuit du portefeuille et le bleu du bouclier, pas leur peche.

   ⚠ NOS GLYPHES SONT LES NOTRES. Ce sont des silhouettes d'appareils que
     j'ai dessinees : un telephone a encoche, un telephone a pastille, un
     ecran d'ordinateur. Ce ne sont PAS les logos des marques, et ils ne
     pretendent pas l'etre. Le jour ou Cloclo veut les vrais, ils doivent
     venir des pages officielles d'Apple, de Microsoft et de Google — je les
     pose, je ne les redessine pas de memoire.
   ══════════════════════════════════════════════════════════════════════════ */
.page-dl{min-height:100vh}
.dl{
  min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,46%);
  align-items:center; gap:clamp(24px,4vw,60px);
  padding:120px 0 60px clamp(18px,6vw,90px);
  position:relative; overflow:hidden;
}
.dl-gauche{max-width:620px}

/* ── LE SELECTEUR ──────────────────────────────────────────────────── */
.onglets{
  display:inline-flex; gap:4px; padding:5px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:rgba(255,255,255,.03); margin-bottom:clamp(26px,4vw,44px);
}
.onglets button{
  border:0; cursor:pointer; background:transparent; color:rgba(255,255,255,.62);
  font:800 13.5px/1 var(--police); letter-spacing:.05em; text-transform:uppercase;
  padding:12px 22px; border-radius:999px; transition:background .2s ease, color .2s ease;
}
.onglets button:hover{color:var(--blanc)}
.onglets button.actif{background:var(--blanc); color:var(--nuit)}

.dl h1{
  font-size:clamp(34px,5.4vw,62px); line-height:1.02; letter-spacing:-.035em;
  font-weight:900; margin:0 0 18px;
}
.dl-sous{font-size:clamp(15px,1.5vw,18px); line-height:1.6; color:rgba(255,255,255,.72);
  margin:0 0 clamp(26px,3.5vw,38px); max-width:46ch}

/* ── LES CARTES ────────────────────────────────────────────────────── */
.cartes-dl{display:flex; flex-wrap:wrap; gap:14px}
.carte-dl{
  flex:0 0 auto; width:168px; padding:18px 14px 16px; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:22px; cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.carte-dl:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.08)}
.carte-dl.choisie{border-color:var(--or); background:rgba(232,161,0,.10)}
.carte-dl b{display:block; font-size:15px; font-weight:800; margin-top:12px}
.carte-dl small{display:block; font-size:12px; line-height:1.35; margin-top:5px;
  color:rgba(255,255,255,.58)}

.vignette{display:grid; place-items:center; width:128px; height:128px; margin:0 auto;
  background:var(--blanc); border-radius:16px; overflow:hidden}
.vignette img{display:block; width:112px; height:112px}
.vignette-glyphe{background:rgba(255,255,255,.08)}
.glyphe{width:58px; height:58px; fill:none; stroke:var(--blanc); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}
.glyphe .plein{fill:var(--blanc); stroke:none}

/* ⚠ UNE CARTE ETEINTE NE PROMET RIEN. Elle reste visible pour que la rangee
   garde son rythme, mais elle ne clique pas et elle dit « bientot ». */
.carte-dl.eteinte{opacity:.42; cursor:default}
.carte-dl.eteinte:hover{transform:none; border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.05)}

.dl-note{margin:26px 0 0; font-size:13.5px; line-height:1.6; max-width:52ch;
  color:rgba(255,255,255,.5)}
.dl-aide{margin-top:26px; padding:20px 22px; border-radius:20px;
  background:rgba(37,99,235,.14); border:1px solid rgba(147,197,253,.3); max-width:52ch}
.dl-aide p{margin:0 0 16px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.9)}
.dl-retour{margin:clamp(30px,5vw,50px) 0 0; font-size:13.5px}
.dl-retour a{color:rgba(255,255,255,.55); text-decoration:underline;
  text-underline-offset:4px}
.dl-retour a:hover{color:var(--blanc)}

/* ── LE PORTEFEUILLE A DROITE, QUI DEBORDE ─────────────────────────── */
.dl-droite{position:relative; display:flex; justify-content:flex-end; align-items:center}
.dl-tel{
  position:relative; width:min(330px,80%); padding:11px;
  border-radius:44px; background:#0b1120;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  transform:translateX(6%);
}
.dl-tel::before{
  content:''; position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:86px; height:5px; border-radius:99px; background:rgba(255,255,255,.22); z-index:2;
}
.dl-tel img{display:block; width:100%; height:auto; border-radius:34px}

/* ── LE TELEPHONE ──────────────────────────────────────────────────── */
@media (max-width:900px){
  .dl{grid-template-columns:1fr; padding:104px 18px 50px; gap:34px; text-align:left}
  .dl-gauche{max-width:none}
  .dl-droite{justify-content:center; order:2}
  .dl-tel{transform:none; width:min(280px,82%)}
  .carte-dl{width:calc(50% - 7px); max-width:210px}
  .vignette{width:100%; max-width:132px; height:auto; aspect-ratio:1}
  .vignette img{width:86%; height:auto}
}
@media (max-width:360px){
  /* ⚠ 320 px : deux cartes cote a cote ne tiennent plus. Une par ligne,
     sinon le texte deborde et la page se met a glisser sur le cote. */
  .carte-dl{width:100%; max-width:none}
  .onglets button{padding:11px 16px; font-size:12.5px}
}


/* ══════════════════════════════════════════════════════════════════════════
   ⚠⚠ DEFAUT TROUVE ET REPARE LE 16 SEPTEMBRE 2026 — IL ETAIT EN LIGNE
   ══════════════════════════════════════════════════════════════════════════
   Le banc au navigateur, lance AVEC l'entete de securite du fichier _headers,
   a mesure ceci sur la page d'accueil telle qu'elle est en ligne :

       margin-top:56px        ->  0px      (six endroits, les espacements)
       background:#f7931a     ->  transparent
       text-align:center      ->  start

   POURQUOI : la regle `style-src 'self'` que j'avais ecrite dans _headers
   interdit au navigateur d'appliquer un style ecrit DANS une balise HTML.
   Resultat : les pastilles de couleur des jetons dans les telephones
   (le orange du Bitcoin, le bleu de l'Ethereum, le vert de Solana, le
   Tether...) etaient INVISIBLES en ligne, et plusieurs espacements etaient
   ecrases. Cloclo m'avait dit « la page d'accueil c'est joli » — elle l'etait
   quand meme, mais elle etait cassee, et c'est MOI qui l'avais cassee.

   LA REPARATION : plus un seul style ecrit dans une balise. Tout est passe
   ici, en classes. La regle de securite reste stricte — on ne l'affaiblit
   pas avec 'unsafe-inline' pour se simplifier la vie.

   ⚠ CONSEQUENCE POUR PLUS TARD : on n'ecrit plus jamais style="..." dans le
     HTML de ce site. Une couleur ou un espacement nouveau -> une classe ici.
     (Les styles poses par site.js en JavaScript, eux, ne sont PAS concernes :
      la regle ne les touche pas, c'est mesure.)
   ══════════════════════════════════════════════════════════════════════════ */
.c-4ade80{color:#4ade80}
.c-bleu-clair{color:var(--bleu-clair)}
.c-f87171{color:#f87171}
.centre-38{text-align:center; margin-top:38px}
.f-14f195{background:#14f195}
.f-26a17b{background:#26a17b}
.f-8b9dff{background:#8b9dff}
.f-e11d48{background:#e11d48}
.f-e5a100{background:#e5a100}
.f-f0a500{background:#f0a500}
.f-f0b90b{background:#f0b90b}
.f-f7931a{background:#f7931a}
.fs-18{font-size:18px}
.fs-19{font-size:19px}
.fs-20{font-size:20px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.mt-56{margin-top:56px}