/* axelmilon.com — reproduction fidèle
   Relevé sur la vidéo de navigation + code source d'origine */

:root{
  --header:230px;
  --noir:#070E13;
  --blanc:#fff;
  --gris-clair:#f7f7f7;
  --gris:#787878;
  --gris-2:#939393;
  --gris-fonce:#454545;
  --violet-a:#0d0010;
  --violet-b:#9c00bd;
  --violet-c:#bf00e2;
  --bleu-a:#dff0fb;
  --bleu-b:#5b9bd5;

  --e1:8px; --e2:16px; --e3:24px; --e4:40px; --e5:64px; --e6:96px;
  --max:1180px;
  --header:230px;
}

*{box-sizing:border-box;margin:0;padding:0}
img,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
body{
  background:var(--noir);color:var(--blanc);
  font-family:'Figtree',-apple-system,'Segoe UI',sans-serif;
  font-size:17.5px;font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--e3)}

/* ── Typographie ─────────────────────────── */
.serif{font-family:'Cormorant Garamond',Georgia,serif}
h1,h2,.chiffre{
  font-family:'Outfit',sans-serif;
  font-weight:500;line-height:1.15;letter-spacing:.01em;
}
h1{font-size:clamp(2.6rem,6vw,4.2rem)}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h3{font-family:'Outfit',sans-serif;font-weight:500;font-size:1.05rem;
   text-transform:uppercase;letter-spacing:.14em}
.caps{font-family:'Outfit',sans-serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:.82rem;font-weight:500}

/* ── En-tête ─────────────────────────────── */
.top{
  position:fixed;inset:0 0 auto 0;z-index:60;background:var(--noir);
  padding:var(--e3) var(--e3) 0;transition:padding .35s ease;
}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:max-height .35s ease,opacity .3s ease,margin .35s ease;
  max-height:150px;overflow:hidden}
.brand img{height:150px;width:auto}
.brand .nom{font-family:'Cormorant Garamond',serif;font-size:1.6rem;
  letter-spacing:.06em;line-height:1}
.brand .baseline{font-family:'Outfit',sans-serif;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.42em;color:#d8d8d8}
.top.compact .brand{max-height:0;opacity:0;margin-bottom:0}

.nav{display:flex;justify-content:center;gap:var(--e5);padding:var(--e3) 0 var(--e2)}
.nav a{font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:400;color:var(--gris-2);
  padding-bottom:4px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;font-weight:500}

.social{position:absolute;top:var(--e3);right:var(--e3);display:flex;gap:14px;align-items:center}
.social a{opacity:.95;transition:transform .25s,opacity .25s}
.social a:hover{transform:translateY(-2px);opacity:1}
.social svg{width:20px;height:20px;display:block}

.location{position:absolute;top:var(--e3);left:var(--e3);font-style:italic;color:#8d8d8d;
  font-size:.85rem;line-height:1.4;white-space:nowrap}

.burger{display:none;position:absolute;top:var(--e3);left:var(--e3);
  background:none;border:0;color:#fff;font-family:'Outfit',sans-serif;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;cursor:pointer}

/* ── Hero ────────────────────────────────── */
/* bannière large, affichée en entier (jamais recadrée) */
.hero{position:relative;width:100%;background:#000;padding-top:var(--header)}
.hero video{width:100%;height:auto;display:block}

/* bouton showreel, fixe en bas */
.showreel{
  position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:55;
  font-family:'Outfit',sans-serif;font-size:.9rem;
  padding:11px 26px;border-radius:999px;border:2px solid #fff;
  background:rgba(7,14,19,.9);color:#fff;backdrop-filter:blur(3px);
  box-shadow:0 3px 16px rgba(0,0,0,.35);
  transition:background .25s,color .25s;
}
.showreel:hover{background:#fff;color:#000}

/* ── Sections ────────────────────────────── */
section{padding:var(--e6) 0}
.centre{text-align:center}
.lede{max-width:70ch;margin:0 auto;color:#e6e6e6}
.lede p{margin-bottom:var(--e2)}

/* Le violet occupe toute la section ; la transition vers le clair est une bande
   de hauteur FIXE collée en bas, pour que le texte reste toujours sur fond foncé
   (sinon, en une colonne sur mobile, les arguments tombaient dans la zone claire). */
.violet{position:relative;--bande:210px;
  background:linear-gradient(180deg,var(--noir) 0%,#33063f 20%,var(--violet-b) 45%,var(--violet-c) 65%,var(--violet-c) 100%)}
.violet::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--bande);pointer-events:none;
  background:linear-gradient(180deg,var(--violet-c) 0%,#cf4ae5 22%,#d9a8ea 52%,#e9d2f2 80%,var(--gris-clair) 100%)}
@media (max-width:900px){.violet{--bande:120px}}
.violet>*{position:relative;z-index:1}
.clair{background:var(--blanc);color:#222}
.clair .caps,.clair h3{color:#555}

/* ── Chiffres ────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);text-align:center}
.stat .chiffre{font-size:clamp(2.6rem,5vw,3.6rem);line-height:1}
.stat .ico{height:64px;margin:var(--e2) auto;display:block;fill:#fff}
.stat .lib{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:400}

/* ── Quatre arguments ────────────────────── */
.args{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);
  text-align:center;margin-top:var(--e6)}
.args h3{margin-bottom:var(--e2);font-size:.95rem}
.args .ico-fin{width:42px;height:42px;margin:0 auto var(--e2);display:block;
  stroke:#fff;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.args p{color:#f0e2f5;font-size:.95rem}

/* ── Boutons ─────────────────────────────── */
.btn{display:inline-block;font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:500;border-radius:6px;
  padding:14px 26px;background:var(--gris-fonce);color:#fff;
  transition:background .25s}
.btn:hover{background:#000}
.btn.clairbtn{background:#000}
.btn.caps{letter-spacing:.14em;font-size:.8rem}
.clair .btn{color:#fff}

/* ── Portfolio ───────────────────────────── */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e2)}
.vignette{position:relative;display:block;border-radius:10px;overflow:hidden;
  aspect-ratio:3/4;background:#111;box-shadow:0 2px 14px rgba(0,0,0,.5)}
.vignette img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vignette .voile{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--e3);background:rgba(0,0,0,.28);
  opacity:0;transition:opacity .4s;text-align:left;
}
.vignette:hover .voile,.vignette:focus-visible .voile{opacity:1}
.vignette:hover img{transform:scale(1.04)}
.vignette .titre{font-family:'Outfit',sans-serif;text-transform:uppercase;
  letter-spacing:.08em;font-size:1rem;margin-bottom:6px}
.vignette .desc{font-size:.88rem;color:#e8e8e8;line-height:1.45}

/* ── Bandeau « mon Univers » (portfolio) ─── */
.univers{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--e5);align-items:center}
.univers .titre-univers{font-size:clamp(2.2rem,4.5vw,3.4rem);letter-spacing:.12em;font-weight:500;line-height:1.1}
.univers .lede-univers{font-size:1.25rem;color:#e6e6e6;line-height:1.55}
@media (max-width:900px){.univers{grid-template-columns:1fr;gap:var(--e3)}
  .univers .lede-univers{font-size:1.05rem}}

/* ── Logos clients ───────────────────────── */
.logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:var(--e3) 34px;margin-top:var(--e4)}
.logos li{display:grid;place-items:center;height:70px}
.logos img{max-height:70px;max-width:142px;width:auto;object-fit:contain}

/* ── Tableau des formules ────────────────── */
.formules{background:linear-gradient(180deg,#eaf4fc 0%,#a8cceb 55%,#5b9bd5 100%);
  padding:var(--e4) var(--e3) var(--e5);color:#222;text-align:center;border-radius:14px}
.formules table{width:100%;border-collapse:collapse;background:#fff;font-size:1rem}
.formules th{font-family:'Outfit',sans-serif;font-weight:600;font-size:1.45rem;
  padding:var(--e2) var(--e2) var(--e1);border:0;background:#fff}
.formules td{padding:14px var(--e2);border:0}
.formules tr:nth-child(even) td{background:#e4f0fa}

/* ── Formulaire ──────────────────────────── */
form{display:grid;gap:var(--e3);max-width:460px}
label{font-family:'Outfit',sans-serif;font-size:.9rem;color:#444;display:block;margin-bottom:4px}
input,textarea{width:100%;border:0;border-bottom:1px solid #bdbdbd;background:#fafcff;
  padding:9px 6px;font-family:inherit;font-size:1rem;color:#222}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--bleu-b);background:#eef5fd}
textarea{min-height:110px;border:1px solid #bdbdbd;resize:vertical}

/* ── Pied de page ────────────────────────── */
footer{background:var(--blanc);color:#333;padding:var(--e6) 0 var(--e4)}
.foot{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5);align-items:center}
.foot .ident{display:flex;flex-direction:column;align-items:center;gap:6px;color:#8aa0ad}
.foot .ident img{height:96px;width:auto}
.foot .ident .nom{font-family:'Cormorant Garamond',serif;font-size:1.5rem;letter-spacing:.06em}
.foot .ident .baseline{font-family:'Outfit',sans-serif;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.4em}
.coord{display:grid;gap:var(--e2);font-size:.95rem}
.coord div{display:flex;gap:12px;align-items:flex-start}
.coord svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;stroke:#666;fill:none}
.legal{margin-top:var(--e5);padding-top:var(--e2);border-top:1px solid #e6e6e6;
  font-size:.8rem;color:#999;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--e1)}

/* ── Apparition au défilement ────────────── */
.rev{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.rev.on{opacity:1;transform:none}

/* ── Accessibilité ───────────────────────── */
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--e3);top:var(--e3);z-index:99;background:#fff;color:#000;padding:10px 16px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rev{opacity:1;transform:none}
}

/* ── Mobile ──────────────────────────────── */
@media (max-width:900px){
  :root{
  --header:230px;--header:150px}
  .stats,.args{grid-template-columns:1fr 1fr;gap:var(--e3)}
  .grid4{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr;gap:var(--e4)}
  .location{display:none}
  /* En-tête mobile : logo à gauche, réseaux petits à droite, onglets étalés dessous.
     Au défilement, ce sont les RÉSEAUX qui s'effacent — le logo reste toujours visible. */
  .top{display:grid;grid-template-columns:auto 1fr auto;
    grid-template-areas:"logo . social" "nav nav nav";
    align-items:center;padding:var(--e2) var(--e3) 0}
  .brand{grid-area:logo;align-items:flex-start;max-height:none;overflow:visible}
  .brand img{height:52px}
  .brand .nom{font-size:1.25rem}
  .social{grid-area:social;position:static;justify-content:flex-end;gap:11px;padding-top:0;
    transition:opacity .3s ease,max-height .35s ease;max-height:30px}
  .social svg{width:17px;height:17px}
  .nav{grid-area:nav;justify-content:space-between;gap:0;flex-wrap:nowrap;padding:var(--e2) 0 var(--e1)}
  .nav a{font-size:.88rem}
  .top.compact .brand{max-height:none;opacity:1;margin-bottom:0}
  .top.compact .social{max-height:0;opacity:0;pointer-events:none;overflow:hidden}
  footer{padding:var(--e4) 0 var(--e3)}
  .foot .ident img{height:72px}
  .legal{margin-top:var(--e4)}
  .vignette .voile{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.8),transparent 55%)}
  section{padding:var(--e5) 0}
}
@media (max-width:560px){
  .grid4{grid-template-columns:1fr}
}
/* Mobile : les 4 chiffres sur UNE ligne, les 4 arguments en 2×2, le tout compact —
   empilés en colonne, ils rendaient l'accueil interminable. */
@media (max-width:900px){
  .stats{grid-template-columns:repeat(4,1fr);gap:var(--e1)}
  .stat .chiffre{font-size:1.55rem}
  .stat .ico{height:26px;margin:6px auto}
  .stat .lib{font-size:.62rem;line-height:1.25}
  .args{grid-template-columns:1fr 1fr;gap:var(--e3) var(--e2);margin-top:var(--e5)}
  .args .ico-fin{width:30px;height:30px;margin-bottom:var(--e1)}
  .args h3{font-size:.76rem;letter-spacing:.08em;margin-bottom:6px}
  .args p{font-size:.78rem;line-height:1.4}
}

/* la mention Location disparaît quand l'en-tête se compacte */
.top.compact .location{opacity:0;pointer-events:none}
.location{transition:opacity .3s}

/* ── Lecteur vidéo en surimpression ──────── */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
  display:grid;place-items:center;padding:var(--e4)}
.lightbox[hidden]{display:none}
.lb-inner{width:min(1100px,92vw)}
.lb-frame{position:relative;padding-top:56.25%;background:#000}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-close{position:absolute;top:18px;right:26px;background:none;border:0;
  color:#fff;font-size:2.6rem;line-height:1;cursor:pointer;padding:8px}
.lb-close:hover{opacity:.7}

/* corrections mobile */
@media (max-width:900px){
  .wrap>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;gap:var(--e4)!important}
  form{max-width:100%}
  /* Le tableau des formules doit tenir ENTIER à l'écran, même en portrait :
     on le rétrécit plutôt que de le faire défiler horizontalement. */
  .formules{padding:var(--e3) var(--e2) var(--e4);overflow:visible}
  .formules table{font-size:.62rem;table-layout:fixed}
  .formules th{font-size:.8rem;padding:8px 2px 4px;hyphens:auto}
  .formules td{padding:7px 3px;line-height:1.3;hyphens:auto;word-break:break-word}
}
@media (max-width:420px){
  .formules table{font-size:.55rem}
  .formules th{font-size:.7rem}
  .formules td{padding:6px 2px}
}

.deux-col{grid-template-columns:1fr 1fr}
@media (max-width:900px){.deux-col{grid-template-columns:1fr!important}}

/* bloc encadré (section "Prêt à signer ? On y va !") */
.encadre{background:#000;color:#fff;border-radius:14px;padding:var(--e5) var(--e4);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);align-items:center}
@media (max-width:900px){.encadre{grid-template-columns:1fr;text-align:center}}
/* la section violette réserve la place de sa bande de transition */
.violet{padding-bottom:calc(var(--e4) + var(--bande))}
@media (max-width:900px){.violet{padding-bottom:calc(var(--e2) + var(--bande))}}

/* ── Fonds photographiques ───────────────── */
.fond{position:relative;background-size:cover;background-position:center;background-attachment:scroll}
.fond::before{content:"";position:absolute;inset:0;background:rgba(7,14,19,.66)}
.fond>*{position:relative;z-index:1}
.fond-etoile{background-image:url("/images/fonds/fond-etoile.jpg")}
.fond-services{background-image:url("/images/fonds/fond-services.jpg")}
.fond-telephones{background-image:url("/images/fonds/bandeau-telephones.jpg");background-position:center 78%}
/* le bandeau téléphones de l'original est clair, sans voile sombre */
.fond-telephones::before{background:none}
/* bandeau haut de la page Contact : plus court sur mobile, sinon l'image
   (très large) est tellement agrandie qu'on ne voit plus les combinés */
.bandeau-contact{padding:0;height:calc(var(--header) + 340px)}
@media (max-width:900px){.bandeau-contact{height:calc(var(--header) + 175px);background-position:center 72%}}

/* ── Transitions entre sections ──────────── */
.vers-clair{height:360px;background:linear-gradient(180deg,
   var(--noir) 0%,#0C1519 12%,#152026 24%,#202C33 36%,#2F3C45 48%,
   #47545C 60%,#6A767E 71%,#939EA4 81%,#BDC5C9 90%,#E2E6E8 96%,var(--gris-clair) 100%)}
.vers-sombre{height:360px;background:linear-gradient(180deg,
   var(--gris-clair) 0%,#E2E6E8 5%,#BDC5C9 12%,#939EA4 21%,#6A767E 31%,
   #47545C 42%,#2F3C45 54%,#202C33 66%,#152026 77%,#0C1519 89%,var(--noir) 100%)}
/* fondus plus courts sur mobile : sinon ils occupent la moitié de l'écran */
@media (max-width:900px){.vers-clair,.vers-sombre{height:190px}}
footer{background:var(--gris-clair)}

/* formulaires sur fond sombre */
section:not(.clair) form label{color:#b9c2c8}
section:not(.clair) form input,section:not(.clair) form textarea{
  background:rgba(255,255,255,.06);border-bottom-color:#3d4a52;color:#fff}
section:not(.clair) form input:focus,section:not(.clair) form textarea:focus{
  background:rgba(255,255,255,.12);border-bottom-color:#fff}
section:not(.clair) form textarea{border-color:#3d4a52}

/* ── Section lavande (Let's create together) ── */
.lavande{background:#dad3f6;color:#151515}
.lavande h2{color:#111}
.lavande h3{color:#222;text-transform:none;letter-spacing:0;font-size:1.15rem;
  text-decoration:underline;text-underline-offset:4px}
.lavande h3+p,.lavande h3+p a{font-family:'Outfit',sans-serif;
  font-size:1.15rem;font-weight:600;line-height:1.4}
section.lavande form label{color:#222;font-size:1.05rem}
section.lavande form input,section.lavande form textarea{background:transparent;
  border:0;border-bottom:1px solid #555;color:#111}
section.lavande form textarea{min-height:70px}
section.lavande form input:focus,section.lavande form textarea:focus{
  border-bottom-color:#000;background:rgba(255,255,255,.35)}

/* ── Encadré et carrousel sur fond clair ─── */
.encadre .btn{background:transparent;border:1.5px solid #fff;border-radius:4px}
.encadre .btn:hover{background:#fff;color:#000}
.clair .cr-vide{background:#f1f1f1;border-color:#aaa}
.clair .cr-vide span{color:#666}
.clair .cr-points button{background:rgba(0,0,0,.22)}
.clair .cr-points button.on{background:#333}

/* ── Bloc « Mon matériel » ───────────────── */
.materiel h3{color:#1a1a1a;font-size:2.1rem;font-weight:400;letter-spacing:.03em;
  margin-bottom:var(--e3)}
.materiel p{color:#444;font-size:.98rem;line-height:1.5;margin-bottom:11px}
.materiel .btn{margin-top:var(--e3)}
@media (max-width:900px){
  .materiel h3{font-size:1.7rem;margin-bottom:var(--e2)}
  .materiel p{font-size:.92rem;line-height:1.45;margin-bottom:9px}
}

/* ── Carrousel matériel ──────────────────── */
.carrousel{position:relative;overflow:hidden;border-radius:8px}
.cr-piste{display:flex;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.cr-item{flex:0 0 100%;margin:0;aspect-ratio:4/3;display:grid;place-items:center;background:#fff}
.cr-item img{max-width:92%;max-height:92%;width:auto;height:auto;display:block}
.cr-vide{aspect-ratio:4/3;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18)}
.cr-vide span{font-family:'Outfit',sans-serif;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.2em;color:#7d8a92}
.cr-points{display:flex;gap:8px;justify-content:center;margin-top:var(--e2)}
.cr-points button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .3s,transform .3s}
.cr-points button.on{background:#fff;transform:scale(1.3)}