/* MakeHub · le site public
   Bandeaux clairs en haut et en bas, sections profondes au milieu : les vues du
   produit y ressortent comme des fenetres eclairees. */

body.site{margin:0;background:#0B0B08;color:var(--encre);font-family:var(--f-ui);-webkit-font-smoothing:antialiased}
body.site a{color:inherit}

/* ---------------------------------------------------------------- en-tete clair */
.site-tete{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) 240px auto;gap:22px;align-items:center;
  padding:12px 32px;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #E1E4DC;color:#16170F}
.site-marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-titre);font-weight:800;font-size:19px;letter-spacing:-.02em;color:#16170F}
.site-marque .logo{width:32px;height:32px}
.site-marque{--mh-ocre:#B7772A}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{padding:7px 11px;border-radius:9px;font-size:14px;font-weight:600;text-decoration:none;color:#3A3C33}
.site-nav a:hover{background:#ECEEE8;color:#16170F}
.site-cherche{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;border:1px solid #CBCFC4;border-radius:10px;color:#6A6D62;font-size:13px;cursor:pointer;background:#fff}
.site-cherche kbd{font-family:var(--f-code);font-size:11px;padding:1px 6px;border:1px solid #CBCFC4;border-radius:5px}
.site-acces{display:flex;gap:8px}
.site .site-tete .btn{background:#fff;color:#16170F;border-color:#CBCFC4}
.site .site-tete .btn-prim{background:#16170F;color:#fff;border-color:#16170F}

/* ---------------------------------------------------------------- sections profondes */
.bloc{position:relative;padding:96px 32px;overflow:hidden}
.bloc.sombre{
  --fond:#0B0B08; --surface:#15150F; --surface-2:#1A1A13; --surface-3:#222219;
  --trait:#2C2C22; --trait-fort:#3C3C30;
  --encre:#F1EFE7; --encre-2:#D2CFC3; --doux:#A09D90; --pale:#75736A;
  --ocre:#D8A25E; --ocre-vif:#E8B878; --ocre-voile:#2E2517; --ocre-texte:#E8B878;
  --ok:#66B892; --ok-voile:#15291F; --rupture:#E8806C; --rupture-voile:#351A15;
  --vivant:#8AABF4; --vivant-voile:#18213A; --ia:#B697F0; --ia-voile:#251C38;
  background:#0B0B08;color:var(--encre);border-bottom:1px solid #1C1C15}
.bloc h1,.bloc h2{font-family:var(--f-titre);letter-spacing:-.035em;margin:0;color:#F7F5EE}
.bloc h1{font-size:clamp(40px,6vw,76px);line-height:1.02;font-weight:800}
.bloc h2{font-size:clamp(30px,3.6vw,48px);line-height:1.08;font-weight:700}
.chapeau{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:#C9C6BA;margin:18px auto 0;max-width:62ch}
.etroit{max-width:960px;margin:0 auto;text-align:center;position:relative;z-index:2}
.centre{text-align:center}
.attenue{color:#8F8C80}
.appel{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.btn.grand{height:48px;padding:0 22px;font-size:15.5px;border-radius:12px}
.bloc .btn-prim{background:linear-gradient(135deg,#E8B878,#C9893A);color:#16150F;border:0}
.btn.clair{background:transparent;color:#F1EFE7;border:1px solid #4A4A3C}
.btn.clair:hover{border-color:#E8B878}

/* accroche : halo et orbites de sessions qui convergent */
.heros{padding-top:120px;padding-bottom:40px;min-height:78vh;background:radial-gradient(ellipse 80% 60% at 50% 100%,#3A2A12 0%,#0B0B08 62%)}
.halo{position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(ellipse at center,rgba(216,162,94,.35),transparent 60%);filter:blur(20px);pointer-events:none}
.orbites{position:relative;height:260px;max-width:620px;margin:40px auto 0;z-index:2}
.orbites .coeur{position:absolute;left:calc(50% - 55px);top:95px;width:110px;height:110px;z-index:1}
.orbites .coeur::before{content:"";position:absolute;inset:-60px;border-radius:50%;background:radial-gradient(circle,rgba(232,184,120,.32),transparent 62%);z-index:-1;pointer-events:none}
.orbites .coeur .logo{position:relative;display:block;image-rendering:auto;shape-rendering:geometricPrecision}
.orbites .coeur .logo{width:110px;height:110px}
.orbe{position:absolute;padding:10px 16px;border-radius:99px;background:#1B1B14;border:1px solid #3C3C30;color:#F1EFE7;font:600 14px var(--f-ui);box-shadow:0 10px 30px -10px rgba(0,0,0,.8);animation:flotte 6s ease-in-out infinite}
.orbe.ia{border-color:#6D55A0;color:#D8C8FA;background:#1E1830}
.orbe.o1{left:6%;top:10%}.orbe.o2{right:4%;top:22%;animation-delay:-2s}.orbe.o3{left:16%;bottom:4%;animation-delay:-4s}
.orbites.petites{height:200px;margin:0 auto 24px}
.orbites.petites .coeur,.orbites.petites .coeur .logo{width:84px;height:84px}
.orbites.petites .coeur{left:calc(50% - 42px);top:74px}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* fenetres du produit, eclairees par dessous */
.cadre-produit{max-width:1120px;margin:56px auto 0;position:relative;z-index:2}
.cadre-produit::before{content:"";position:absolute;inset:-30px -40px -60px;background:radial-gradient(ellipse at 50% 20%,rgba(216,162,94,.28),transparent 65%);z-index:-1;filter:blur(8px)}
.fenetre{border:1px solid #3C3C30;border-radius:18px;background:#121209;box-shadow:0 0 0 6px rgba(255,255,255,.03),0 40px 90px -30px rgba(0,0,0,.9);overflow:hidden;text-align:left}
.fenetre.petite{border-radius:16px}
.fenetre-t{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #2C2C22;font-size:13px;color:#A09D90}
.fenetre-t b{color:#F1EFE7;font-size:14px}
.legende-apercu{margin:14px 0 0;text-align:center;font-size:12.5px;color:#75736A}

/* deux colonnes, a la maniere d'un cahier */
.deux-colonnes{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;position:relative;z-index:2}
.deux-colonnes .colonne{padding:40px 44px}
.deux-colonnes.bordees{border-top:1px solid #24241C;border-bottom:1px solid #24241C}
.deux-colonnes.bordees .colonne+.colonne{border-left:1px solid #24241C}
.grand-texte{font-size:clamp(20px,2vw,26px);line-height:1.35;color:#8F8C80;margin:0}
.grand-texte b{color:#F7F5EE;font-weight:600}
.lien-fleche{display:inline-flex;margin-top:18px;color:#E8B878 !important;font-weight:600;text-decoration:none;font-size:15px}
.lien-fleche::after{content:"›";margin-left:8px;transition:transform .2s}
.lien-fleche:hover::after{transform:translateX(3px)}
.pile-faits{display:grid;gap:0;padding:0 !important}
.pile-faits>div{padding:32px 40px;border-bottom:1px solid #24241C}
.pile-faits>div:last-child{border-bottom:0}
.fait-titre{font-family:var(--f-titre);font-size:22px;font-weight:700;color:#F7F5EE;letter-spacing:-.02em}
.pile-faits p{margin:8px 0 0;color:#A09D90;line-height:1.55}
.texte-bloc{text-align:left}
.texte-bloc h2{font-size:clamp(26px,2.6vw,36px)}
.texte-bloc>p{color:#A09D90;line-height:1.6;font-size:16px;margin:12px 0 0}
.illustration{display:flex;align-items:center;background:radial-gradient(ellipse at 50% 0%,rgba(216,162,94,.22),transparent 70%)}
.illustration .fenetre{width:100%}

.accordeon{margin-top:28px;border-top:1px solid #2C2C22}
.accordeon details{border-bottom:1px solid #2C2C22}
.accordeon summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:18px;color:#C9C6BA}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon summary::after{content:"+";color:#E8B878;font-size:20px;transition:transform .2s}
.accordeon details[open] summary{color:#F7F5EE}
.accordeon details[open] summary::after{transform:rotate(45deg)}
.accordeon details p{margin:-6px 0 18px;color:#A09D90;line-height:1.55}

.pictogramme{width:72px;height:72px;margin:0 auto 22px;display:block;filter:drop-shadow(0 12px 30px rgba(216,162,94,.35))}
.chiffres{margin-top:64px !important}
.chiffre{display:block;font-family:var(--f-titre);font-size:clamp(34px,3.4vw,46px);font-weight:700;color:#F7F5EE;letter-spacing:-.03em}
.chiffres p{color:#A09D90;margin:8px 0 0;line-height:1.5}

.grille-briques{max-width:1120px;margin:48px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #24241C;border-left:1px solid #24241C;position:relative;z-index:2}
.grille-briques div{padding:26px 20px;border-right:1px solid #24241C;border-bottom:1px solid #24241C;display:grid;gap:4px;text-align:center}
.grille-briques b{font-family:var(--f-titre);font-size:21px;color:#F7F5EE;letter-spacing:-.02em}
.grille-briques span{font-size:12.5px;color:#8F8C80}

.fil-site{max-width:860px;margin:40px auto 0;display:grid;gap:10px;position:relative;z-index:2}
.evt-site{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border:1px solid #2C2C22;border-radius:14px;background:#121209;text-decoration:none;text-align:left;color:#D2CFC3;font-size:14.5px}
.evt-site:hover{border-color:#5A4A30}
.evt-site b{color:#F7F5EE}
.evt-site small{display:block;color:#8F8C80;font-size:13px;margin-top:2px}
.evt-site time{font-size:12.5px;color:#75736A;white-space:nowrap}

.final{padding-top:72px;background:radial-gradient(ellipse 70% 60% at 50% 30%,#2E2210 0%,#0B0B08 65%)}

/* apparition douce au defilement */
.bloc.apparait>*{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.bloc.apparait.visible>*{opacity:1;transform:none}
.bloc.heros.apparait>*{opacity:1;transform:none}

/* ---------------------------------------------------------------- pied clair */
.site-pied{background:#fff;color:#3A3C33;padding:56px 32px 28px;border-top:1px solid #E1E4DC}
.site-pied-grille{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.site-pied p{color:#6A6D62;font-size:14px;line-height:1.55;max-width:34ch}
.site-pied h6{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9A9D91}
.site-pied a:not(.site-marque){display:block;text-decoration:none;font-size:14px;padding:4px 0;color:#3A3C33}
.site-pied a:hover{color:#8C581A}
.site-pied-bas{max-width:1120px;margin:40px auto 0;padding-top:20px;border-top:1px solid #E1E4DC;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#9A9D91}

/* ---------------------------------------------------------------- petits ecrans */
@media (max-width:980px){
  .site-tete{grid-template-columns:auto auto;padding:10px 16px}
  .site-nav,.site-cherche{display:none}
  .site-acces{justify-self:end}
  .bloc{padding:64px 16px}
  .deux-colonnes{grid-template-columns:1fr}
  .deux-colonnes .colonne{padding:28px 8px}
  .deux-colonnes.bordees .colonne+.colonne{border-left:0;border-top:1px solid #24241C}
  .pile-faits>div{padding:24px 8px}
  .grille-briques{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-pied-grille{grid-template-columns:1fr 1fr}
  .heros{min-height:auto;padding-top:72px}
  .orbites{height:220px}
  .cadre-produit .grille-2{grid-template-columns:1fr}
  .fenetre .liste{display:block;overflow-x:auto}
}
@media (max-width:520px){
  .site-acces .btn:first-child{display:none}
  .evt-site{grid-template-columns:34px minmax(0,1fr)}
  .evt-site time{display:none}
}
@media (prefers-reduced-motion:reduce){.orbe{animation:none}}