:root{
--bg:#fff; --fg:#0f172a; 
--header-muted:#475569;
--accent:#7c3aed; 
--accent-2:#06b6d4; 
--border:#e5e7eb;
--shadow:0 2px 10px rgba(0,0,0,.06); 
--radius:16px;
--font-base:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--font-splash:"Jersey 10",system-ui;

--space:clamp(12px,1.4vw,20px); 
--space-lg:clamp(24px,3.4vw,56px);
--maxw:min(1100px,92vw); 

--hdr-h:clamp(56px,10svh,72px); 
--ftr-h:clamp(64px,8svh,120px);
--progress-h:3px;
--ok:#10b981; --violet:#7c3aed;

}
html,body{height:100%} 
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-base);line-height:1.6;text-rendering:optimizeLegibility}
.wrap{ padding-bottom: var(--ftr-h); }

header.header{
position:sticky; top:0; z-index:70;
background: rgba(255,255,255,0.92);
border-bottom:1px solid var(--border);
-webkit-backdrop-filter: saturate(120%) blur(6px);
backdrop-filter: saturate(120%) blur(6px);
}
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))){
header.header{ background:#fff; }
}

.progress{
position:absolute;
inset-inline:0;
top:0;
height:var(--progress-h);
background:linear-gradient(90deg,var(--accent),var(--accent-2));
transform-origin:left center;
transform:scaleX(0)
}

nav.nav{
  height: var(--hdr-h);
  display: flex;              /* ← remplace grid */
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space);
}
.brand{
display:flex;
align-items:center;
gap:12px;
min-width:0;
flex-shrink:0;
}
@media (max-width: 420px){
  .brand-name{
    display:none;   /* garde juste le logo */
  }
}

.logo{
width: clamp(22px, 6vw, 40px);  /* plus compact */
height: auto;
flex-shrink: 0;    
block-size: auto;                    /* conserve le ratio */
display: block;
object-fit: contain;
image-rendering: auto;               /* SVG net, pas pixelisé */
border-radius: 6px;                  /* si tu veux garder l’arrondi */
box-shadow: 0 2px 10px rgba(0,0,0,.06);
-webkit-user-drag: none;
}    
.brand-name{
font-family:var(--font-splash);
font-size:clamp(30px,4.8vw,51px);
letter-spacing:.5px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
@media (max-width: 520px){
  .brand-name{
    font-size: 20px;
  }

  .menu a{
    font-size: 13px;
    padding: 6px 8px;
  }
}
.menu{
display:flex;
gap:clamp(8px,1.4vw,16px);
align-items:center;
flex-wrap:nowrap;          /* ← important */
white-space:nowrap; 
justify-content:flex-end}
.menu a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--header-muted);font-weight:700;padding:8px 12px;border-radius:10px;border:1px solid transparent;font-size:clamp(13px,1.4vw,15px)}
.menu a:hover{color:#111827;background:#f8fafc}

.menu a.btn-pill{
color:#fff !important;
background: var(--accent);
border-color: var(--accent);
border-radius:12px;
text-decoration: none;
}
.menu a.btn-pill:visited{ color:#fff; }
.menu a.btn-pill:hover{ filter: brightness(0.95); }

/* Priorités mobile : logo + nom + CTA seulement */
/* @media (max-width:820px){
.menu a:not(.btn-pill){display:none}
} */
@media (max-width:820px){
  /* On cache tout par défaut */
  .menu a {
    display: none;
  }

  /* On garde : Galerie (.btn-pill) + Compte (.account-link) */
  .menu a.btn-pill,
  .menu a.account-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

.account-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.account-link .icon img {
  width: 18px;
  height: 18px;
  display: block;
}


/* ===== Layout ===== */
.wrap{min-height:calc(100svh - var(--hdr-h));display:flex;flex-direction:column}
main{flex:1 0 auto}
.container{
max-width:var(--maxw);
margin:0 auto;
padding:var(--space-lg) var(--space)
}
/* ===== HERO très épuré ===== */
.headline{font-weight:800;font-size:clamp(28px,6vw,58px);line-height:1.1;letter-spacing:-.02em;margin:0 0 8px}

.punch{font-size:clamp(16px,2.4vw,20px);color:var(--fg);margin:8px 0 0}
.splash{
margin:5px 0 0;
font-family:var(--font-splash);
font-size:clamp(36px,4.4vw,56px)}

.splash, .brand-name {
font-family: "Jersey 10", system-ui, sans-serif;
font-weight: 400 !important; /* car Jersey n’a qu’un seul poids */
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
image-rendering: pixelated;
letter-spacing: 0;
}

/* ===== Sections légères ===== */
section+section{margin-top:var(--space-lg)}
.sec-title{font-size:clamp(20px,3.2vw,28px);font-weight:800;margin-bottom:10px}
.grid-3{display:grid;gap:var(--space);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:clamp(46px,5.9vw,62px);box-shadow:var(--shadow)}
.mono{font-family:var(--font-mono);font-size:.95em;color:var(--header-muted)}

/* Bouton générique */
.btn{
pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;
padding:12px 16px;border-radius:12px;border:1px solid var(--violet);
font-weight:700;text-decoration:none;background:var(--violet);color:#fff;
}
/* Variante "révélable" */
.reveal{ transform: scale(.96); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.reveal.show{ transform: scale(1); opacity: 1; }

.site-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: var(--ftr-h);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.9);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
z-index: 9;
}

.site-footer .bar {
width: min(1100px, 100vw);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 0 var(--space);
}

.site-footer .legal {
color: var(--header-muted);
font-size: clamp(13px,1.4vw,15px);
flex: 1 1 auto;
}
.site-footer .legal a {
color: var(--fg);
text-decoration: none;
}
.site-footer .legal a:hover {
text-decoration: underline;
}

.newsletter {
display: flex;
align-items: center;
gap: 8px;
}
.newsletter input {
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 10px;
}
.newsletter button {
padding: 8px 14px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 10px;
font-weight: 700;
}

.social {
display: flex;
gap: 10px;
}
.social a.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 36px;
block-size: 36px;
border-radius: 0px;
overflow: hidden;
position: relative;
}
.social a.social-icon img {
width: 100%;
height: 100%;
display: block;
}
.social a.social-icon .lottie-overlay {
position: absolute;
inset: 0;
display: none;
}
.social a.social-icon.lottie-active .lottie-overlay {
display: block;
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.fr-flag {
  display:inline-block;
  width: 2vw;
  height: 1vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("/templates/transverse/WebDesign/design_assets/icons/frflag.svg");
  margin: 0 4px 0 4px; /* espace visuel léger avant/après */
  vertical-align: baseline;
  border-radius: 2px;
}
.fr-flag-XL {
  display: inline-block;
  height: 1.3em; /* responsive avec la font */
  aspect-ratio: 3 / 2; /* typique ou ajuster selon flag */
  background-image: url("/templates/transverse/WebDesign/design_assets/icons/frflag.svg");
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 0.3em;
  border-radius: 2px;
}

/* Footer : ajustements mobile */
@media (max-width: 600px) {
  /* On force le footer à rester sur une seule ligne
     (legal + social dans la même "rangée") */
  .site-footer .bar {
    flex-wrap: nowrap;
    gap: 8px;
  }

  /* Texte un peu plus compact */
  .site-footer .legal {
    font-size: 12px;
    line-height: 1.4;
  }

  /* Icônes plus petites + moins d’espace entre elles */
  .social {
    gap: 6px;
  }

  .social a.social-icon {
    inline-size: 26px;
    block-size: 26px;
  }
}
/* Header: sur très petits écrans, on garde uniquement le logo (évite le "B" tronqué) */
@media (max-width: 520px){
  .brand-name{ display:none !important; }
}

/* =========================
   Landing2 UX patches (scoped)
   ========================= */
body.header-ux .menu { position: relative; }

/* 1) Mobile: on annule la règle common.css qui cache les liens */
@media (max-width:820px){
  body.header-ux .menu a{
    display:inline-flex !important;
  }
  body.header-ux .menu{
    gap: 10px;
  }
}
/* 2) Pill dynamique pour "Galerie" */
body.header-ux .menu a.menu-cta{
  /* état normal = comme un lien menu standard */
}

/* Souris / trackpad */
@media (hover:hover) and (pointer:fine){
  body.header-ux .menu a.menu-cta:hover{
    color:#fff !important;
    background: var(--accent);
    border-color: var(--accent);
    border-radius:12px;
    text-decoration:none;
  }
}

/* Touch: état activé via JS */
body.header-ux .menu a.menu-cta.pill-active{
  color:#fff !important;
  background: var(--accent);
  border-color: var(--accent);
  border-radius:12px;
  text-decoration:none;
}
/* 3) Tooltips (laptops) */
@media (hover:hover) and (pointer:fine){
  body.header-ux .menu a[data-tip]{ position: relative; }

  body.header-ux .menu a[data-tip]:hover::after{
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    /* white-space: nowrap; */
    white-space: normal;
    max-width: min(320px, calc(100vw - 18px));
    background: rgba(17,24,39,.96);
    color: #fff;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.25;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    z-index: 50;
  }

  body.header-ux .menu a[data-tip]:hover::before{
    content:"";
    position:absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(17,24,39,.96);
    z-index: 51;
  }
}
/* 4) Help trigger icon (touch devices) */
body.header-ux .header-help-trigger{
  width: 42px;
  height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;

  opacity: 0;
  pointer-events: none;
  flex: 0 0 42px;
}
body.header-ux .header-help-trigger.is-gone{
  visibility: hidden; /* ✅ plus visible */
  opacity: 0;
  pointer-events: none; /* ✅ plus cliquable */
}
body.header-ux .header-help-trigger img{
  width: 100%;
  height: 100%;
  display:block;
  image-rendering: pixelated;
  user-select:none;
  -webkit-user-drag:none;
}
body.header-ux .header-help-trigger.is-visible{
  opacity: 1;
  pointer-events: auto;
}
body.header-ux .header-help-trigger.is-pulsing{
  animation: landing2Pulse var(--volet-pulse, 1600ms) ease-in-out infinite;
}
@keyframes landing2Pulse{
  0%{
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255,0,168,0));
  }
  40%{
    transform: translateY(-3px) scale(1.10);
    filter:
      drop-shadow(0 6px 14px rgba(255,0,168,.35))
      drop-shadow(0 0 12px rgba(255,0,168,.45));
  }
  70%{
    transform: translateY(-1px) scale(1.04);
    filter:
      drop-shadow(0 3px 8px rgba(255,0,168,.22));
  }
  100%{
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255,0,168,0));
  }
}