/* index.html */
:root{
--bg:#ffffff; --fg:#111111; --muted:#666; --border:rgba(0,0,0,.14);
--gold-1:#fbf3d2; --gold-2:#d9c571; --gold-3:#b39545;
--radius:22px; --shadow:0 8px 24px rgba(0,0,0,.08); --maxw:1120px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.stack-xs{margin-top:.5rem}.stack-s{margin-top:.75rem}.stack-m{margin-top:1rem}.stack-l{margin-top:1.5rem}.stack-xl{margin-top:2rem}
.muted{color:var(--muted)}
.rule{display:inline-block;width:24px;height:1px;background:var(--border);margin-right:8px}
.eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#9a9a9a;display:flex;align-items:center;gap:8px}
.title{font-family:"Playfair Display",ui-serif,Georgia,serif;letter-spacing:.02em}
.lead{color:#222;max-width:780px}
.section{padding:64px 0}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:1fr}
@media(min-width:900px){.grid-2{grid-template-columns:5fr 7fr}}
/* header */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.75);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#e8e8e8,#bdbdbd)}
.brand-name{font-family:"Playfair Display",ui-serif,Georgia,serif;letter-spacing:.25em;text-transform:uppercase;font-size:13px}
.nav a{color:#333;text-decoration:none;font-size:14px;margin-left:14px}
.nav a:hover{color:#000}
/* ===== Nav mobile ===== */
.menu-toggle{
display:none;
width:42px;height:42px;
border:1px solid var(--border);
border-radius:10px;background:#fff;cursor:pointer;
align-items:center;justify-content:center;gap:4px;
}
.menu-toggle span{
display:block;width:18px;height:2px;background:#111;border-radius:2px;
}
.menu-toggle span:nth-child(2){width:14px}
.menu-toggle span:nth-child(3){width:18px}
@media (max-width: 900px){
/* Conteneur header stable et respirant */
.nav{height:64px;gap:10px}
.brand-name{font-size:12px;letter-spacing:.22em}
/* Bouton burger visible, liens cachés par défaut */
.menu-toggle{display:inline-flex}
header .nav > nav{
position:fixed; inset:64px 0 auto 0; /* sous le header */
background:#fff; border-top:1px solid var(--border);
display:none; flex-direction:column; padding:10px 14px 16px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
}
header .nav > nav a{
margin:0; padding:14px 8px; font-size:16px; border-radius:10px;
}
header .nav > nav a:active{background:rgba(0,0,0,.04)}
/* État ouvert */
header .nav > nav.open{display:flex}
/* Le CTA reste à droite sans chevaucher */
.nav .btn.btn-primary{
padding:10px 12px; white-space:nowrap; font-size:13px;
}
}
/* Logos partenaires : garder les proportions, taille cohérente */
.logo-partenaire{
display:block;
height:42px; /* ajuste si tu veux 36–60px */
width:auto;
object-fit:contain; /* jamais étiré */
flex:0 0 auto; /* ne pas s’étirer dans le flex */
}
/* Un peu plus grand sur écrans + larges */
@media (min-width: 768px){
.logo-partenaire{ height:50px; }
}
@media (min-width: 1200px){
.logo-partenaire{ height:58px; }
}
/* Option: rendu plus net pendant l’anim */
#partenaires .d-flex{ will-change: transform; }
/* Empêcher le scroll de la page quand le menu est ouvert */
body.no-scroll{overflow:hidden}
/* buttons */
.btn{appearance:none;border:1px solid var(--border);border-radius:18px;padding:12px 16px;background:#fff;color:#111;cursor:pointer;font-weight:600}
.btn:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.btn-primary{border-color:color-mix(in oklab, var(--gold-3) 30%, #000 10%);
background:linear-gradient(90deg,var(--gold-1),var(--gold-2));color:#111}
.btn-link{border:0;background:transparent;padding:0;color:#111}
/* cards / tiles */
.card{border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.card .p{padding:28px}
.tile{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.tile>img{display:block;width:100%;height:220px;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(255,255,255,.6),transparent)}
/* lists */
.list{margin:0;padding-left:1.2rem}
.list li{margin:.35rem 0}
/* subtle motion */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.in-view{opacity:1;transform:none}
.hover-rise{transition:transform .35s ease}.hover-rise:hover{transform:translateY(-4px)}
/* footer */
footer{border-top:1px solid var(--border)}
@media(prefers-reduced-motion:reduce){
.reveal,.hover-rise{transition:none}
}
footer {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px; /* espace entre les lignes */
}
footer .footer-brand {
font-weight: bold;
}
footer .footer-links {
display: flex;
flex-direction: column;
gap: 4px;
}
footer .footer-links a {
text-decoration: none;
}
@media (max-width: 600px) {
.title{font-size:24px}
.lead{font-size:16px}
.section{padding:48px 0}
.grid-2{grid-template-columns:1fr;gap:16px}
.container{padding:0 16px}
}
@media (min-width: 1200px) {
:root{--maxw:1280px}
.title{font-size:32px}
.lead{font-size:20px}
.section{padding:96px 0}
.grid-2{grid-template-columns:4fr 8fr;gap:32px}
}
/* accueil.html */
/* ——— JPG-inspired layer (blanc & noir, ultra sobre) ——— */
:root{
--ink:#111; --muted:#6b6b6b; --line:rgba(0,0,0,.14);
--radius:22px; --shadow:0 10px 30px rgba(0,0,0,.06);
}
body{ padding-top:90px; color:var(--ink); }
.container{ max-width:1140px; }
/* Titres façon maison : serif, uppercase, tracking léger */
.jp-title{ font-family:"Playfair Display", ui-serif, Georgia, serif; text-transform:uppercase; letter-spacing:.22em; }
.jp-kicker{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#9a9a9a; display:inline-flex; align-items:center; gap:10px; }
.jp-rule{ width:28px; height:1px; background:var(--line); display:inline-block; }
/* Boutons pilules sobres */
.btn-ink{ border-radius:999px; border:1px solid var(--line); color:var(--ink); background:#fff; font-weight:600; }
.btn-ink:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.btn-ink-fill{ border-color:#000; background:#000; color:#fff; }
.btn-ink-fill:hover{ filter:contrast(1.1); }
/* Cartes & tuiles */
.jp-card{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.jp-card .card-img-top{ height:260px; object-fit:cover; }
.jp-tile{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
/* Séparateurs très légers */
.jp-band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* Micro-motions discrètes */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:none; }
.hover-rise{ transition:transform .35s ease; }
.hover-rise:hover{ transform:translateY(-4px); }
/* Défilement logos partenaires */
@keyframes defilement { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.logo-partenaire{ height:34px; opacity:.8; }
.logo-partenaire:hover{ opacity:1; }
/* Ajustements blocs */
.lead{ max-width:820px; margin-inline:auto; color:#222; }
.section-pad{ padding:64px 0; }
.section-pad-sm{ padding:44px 0; }
@media (min-width:992px){
.hero-title{ font-size:48px; }
}
/* media.html */
/* hauteur de navbar pilotée par variable */
:root { --navbar-h: 90px; }
/* applique l’offset à la page + aux ancres */
body { padding-top: var(--navbar-h); }
.hero, .hero-text, [id] { scroll-margin-top: calc(var(--navbar-h) + 16px); }
/* Option UX : éviter la nav trop haute sur mobile */
.navbar-brand small { line-height: 1.1; }
@media (max-width: 991.98px) { /* < lg */
.navbar-brand small { display: none; } /* masque la 2e ligne quand l’espace est réduit */
}
/* ——— HERO LUXE (inspirations JPG / YSL / LV / Rolls) ——— */
.lux-hero{ position:relative; isolation:isolate; }
.lux-hero .lux-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.lux-hero .lux-media video,
.lux-hero .lux-media img{
width:100%;
height:100vh;
height:100dvh;
object-fit:cover;
display:block;
}
/* voile luxueux (blanc vers transparent) */
.lux-hero::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.55) 22%, rgba(255,255,255,.15) 60%, rgba(255,255,255,.0) 100%);
pointer-events:none;
}
.lux-hero .container{
min-height:calc(100vh - var(--navbar-h,90px));
min-height:calc(100dvh - var(--navbar-h,90px));
display:flex; flex-direction:column; justify-content:center;
}
/* micro système typographique */
.lux-eyebrow{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:#8a8a8a; display:inline-flex; align-items:center; gap:10px; }
.lux-rule{ width:28px; height:1px; background:rgba(0,0,0,.14); display:inline-block; }
.lux-title{ font-family:"Playfair Display", ui-serif, Georgia, serif; text-transform:uppercase; letter-spacing:.22em; line-height:1.1; font-size:clamp(28px, 6vw, 56px); margin:.25rem 0 .75rem; }
.lux-lead{ max-width:880px; color:#222; font-size:clamp(16px, 2.2vw, 18px); }
.lux-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
/* boutons pilules sobres */
.btn-ink{ border-radius:999px; border:1px solid rgba(0,0,0,.18); background:#fff; color:#111; font-weight:600; padding:.85rem 1.2rem; }
.btn-ink:hover{ box-shadow:0 10px 30px rgba(0,0,0,.06); transform:translateY(-1px); }
.btn-ink-fill{ border-radius:999px; border:1px solid #111; background:#111; color:#fff; font-weight:600; padding:.95rem 1.35rem; }
.btn-ink-fill:hover{ filter:contrast(1.08); }
/* invite à scroller */
.lux-scroll{ position:absolute; left:0; right:0; bottom:18px; text-align:center;
font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:#7a7a7a; }
/* responsive */
@media (max-width: 991.98px){
.lux-hero .lux-media video, .lux-hero .lux-media img{
height:100vh;
height:100dvh;
}
}
/* Player CTA (luxe, sobre) */
.player-cta{ display:flex; align-items:center; gap:10px; }
.btn-play{
position:relative; width:46px; height:46px; border-radius:999px;
border:1px solid rgba(0,0,0,.18); background:#fff; color:#111;
display:grid; place-items:center; transition:transform .25s ease, box-shadow .25s ease;
}
.btn-play:hover{ transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.06); }
.btn-play .icon-pause{ position:absolute; opacity:0; transition:opacity .18s ease; }
.btn-play .icon-play{ opacity:1; transition:opacity .18s ease; }
.btn-play.is-playing .icon-play{ opacity:0; }
.btn-play.is-playing .icon-pause{ opacity:1; }
.player-link{
font-weight:600; color:#111; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.22);
padding-bottom:2px;
}
.player-link:hover{ color:#000; border-bottom-color:#000; }
/* s’assure que tout reste sur une seule ligne si la place le permet */
.lux-actions{ align-items:center; }