/* ============================================================================
   SEVNO — STYLES
   Repris fidèlement de la maquette Claude Design, nettoyé en CSS standard.
   (Normalement tu n'as pas besoin de toucher ce fichier — le contenu se règle
    dans js/contenu.js.)
   ============================================================================ */

/* --- Polices hébergées localement (aucune dépendance à un CDN) ------------ */
@font-face{ font-family:'Switzer'; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/switzer-300.woff2') format('woff2'); }
@font-face{ font-family:'Switzer'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/switzer-400.woff2') format('woff2'); }
@font-face{ font-family:'Switzer'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/switzer-500.woff2') format('woff2'); }
@font-face{ font-family:'Switzer'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/switzer-600.woff2') format('woff2'); }
@font-face{ font-family:'Switzer'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/switzer-700.woff2') format('woff2'); }
/* Caveat est une police variable : un seul fichier couvre les graisses 500 à 700 */
@font-face{ font-family:'Caveat'; font-style:normal; font-weight:500 700; font-display:swap; src:url('../assets/fonts/caveat.woff2') format('woff2'); }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; }

:root{
  --surface:#EDE7D8; --surface-2:#DFD7C6; --ink:#17130E; --ink-soft:#4a453c; --ink-faint:#6a6555;
  --accent:#152B6A; --navy:#152B6A; --pat-scrim:rgba(0,0,0,0); --scrim1:rgba(21,43,106,0.6); --scrim2:rgba(21,43,106,0.55);
  --chip-bg:#EDE7D8; --chip-ink:#17130E; --chip-accent:#152B6A; --chip-brd:rgba(21,43,106,0.3);
  --pat-eyebrow:#9fb0e0; --pat-muted:#b6bfd8; --hero-sub:#c7cfe6; --veil-rgb:21,43,106; --shadow-rgb:11,22,58;
  --on-accent:#EDE7D8; --pat-img:url('../assets/pattern-navy.webp'); --lb-scrim:rgba(9,14,32,0.86);
}
:root.theme-dark{
  --surface:#181917; --surface-2:#20211e; --ink:#f1e7d2; --ink-soft:#c8c0b1; --ink-faint:#96958d;
  --accent:#d4ba70; --navy:#30312c; --pat-scrim:rgba(0,0,0,0); --scrim1:rgba(8,8,7,0.72); --scrim2:rgba(8,8,7,0.68);
  --chip-bg:#f1e7d2; --chip-ink:#20211e; --chip-accent:#20211e; --chip-brd:rgba(212,186,112,0.4);
  --pat-eyebrow:#c9b78a; --pat-muted:#c8c0b1; --hero-sub:#c8c0b1; --veil-rgb:22,20,17; --shadow-rgb:0,0,0;
  --on-accent:#20211e; --pat-img:url('../assets/pattern-dark-v2.webp'); --lb-scrim:rgba(10,10,9,0.9);
}
:root.theme-dark [data-about-badge]{ color:#20211e !important; }
:root.theme-dark [data-hero-scrim]{ background:linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.46) 100%) !important; }

html,body{ background:var(--surface); overscroll-behavior-y:none; }
body{ color:var(--ink); font-family:'Switzer',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--navy); color:#EDE7D8; }

[data-reveal]{ opacity:0; transform:translateY(34px) scale(.985); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
[data-reveal].in{ opacity:1; transform:none; }

@keyframes sevmarq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes sevmarqR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes sevspin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes sevfloatA{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-18px) rotate(-4deg); } }
@keyframes sevfloatB{ 0%,100%{ transform:translateY(0) rotate(5deg); } 50%{ transform:translateY(-24px) rotate(5deg); } }
@keyframes sevfloatC{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes sevwobble{ 0%,100%{ transform:rotate(-1.2deg) scale(1); } 50%{ transform:rotate(1.2deg) scale(1.012); } }
@keyframes sevpulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes sevpatflow{ from{ background-position:32% 36%; } to{ background-position:68% 64%; } }
@keyframes sevlogofloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes sevscrollbob{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(7px); opacity:1; } }
@keyframes sevplayring{ 0%{ transform:scale(1); opacity:.7; } 70%{ opacity:0; } 100%{ transform:scale(1.85); opacity:0; } }

[data-starflip]{ transform:scale(0) rotate(-140deg); opacity:0; transition:transform 1.05s cubic-bezier(.16,1,.3,1), opacity .7s ease; }
[data-starflip].in{ transform:scale(1) rotate(0deg); opacity:1; }
[data-star-line]{ transform:scaleX(0); transform-origin:center; transition:transform 1s cubic-bezier(.16,1,.3,1) .1s; }
[data-starflip].in ~ [data-star-line], .in [data-star-line]{ transform:scaleX(1); }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; } }
::view-transition-group(root){ animation-duration:0s; }
::view-transition-old(root){ animation:none; mix-blend-mode:normal; z-index:1; }
::view-transition-new(root){ animation:none; mix-blend-mode:normal; z-index:9999; }

@media (max-width: 880px){ [data-contact-grid]{ grid-template-columns:1fr !important; } }
@media (max-width: 900px){
  [data-work-grid]{ grid-template-columns:repeat(2,1fr) !important; }
  [data-about-grid]{ grid-template-columns:1fr !important; gap:clamp(28px,5vw,44px) !important; }
  [data-about-grid] > [data-reveal]:last-child{ max-width:440px; width:100%; margin:0 auto; }
}
@media (max-width: 760px){
  [data-navlink]{ display:none !important; }
  [data-nav-inner]{ display:flex !important; justify-content:space-between !important; }
  [data-logo] img, [data-logo] .wordmark-fallback{ height:44px !important; margin:-8px 0 !important; }
  [data-nav] [data-contact-btn]{ padding:12px 18px !important; font-size:14px !important; }
  [data-hero-badge]{ display:none !important; }
  [data-rise], [data-layer]{ position:relative !important; top:auto !important; margin-top:0 !important; }
}
@media (max-width: 560px){
  [data-work-grid]{ grid-template-columns:1fr !important; }
}

[data-play-badge]{ transition:opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1), background .35s ease !important; }
[data-hero-play]{ transition:opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1), background .4s ease !important; }
[data-navlink]{ transition:background .35s cubic-bezier(.16,1,.3,1), color .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1) !important; }

@media (hover: hover) and (pointer: fine){
  a:hover{ opacity:0.72; }
  [data-tool]:hover [data-tool-label]{ opacity:1 !important; transform:translateX(-50%) translateY(0) !important; }
  [data-hero-embed]:hover [data-hero-play]{ opacity:0; }

  /* --- Effets de survol qui étaient portés par le runtime de la maquette --- */
  [data-theme-toggle]:hover{ transform:scale(1.1); border-color:rgba(237,231,216,0.6); }
  [data-lb-close]:hover{ background:rgba(237,231,216,0.2); transform:rotate(90deg); }
  [data-tool]:nth-child(odd):hover{ transform:rotate(-9deg) scale(1.12); }
  [data-tool]:nth-child(even):hover{ transform:rotate(9deg) scale(1.12); }

  .work-card:hover{ transform:translateY(-6px); }
  .work-card:hover .work-card-img{ transform:scale(1.05); }

  .client-card:hover{ box-shadow:0 26px 46px -16px rgba(23,19,14,0.5); }
  .client-card:nth-child(odd):hover{ transform:rotate(9deg) scale(1.07); }
  .client-card:nth-child(even):hover{ transform:rotate(-9deg) scale(1.07); }
}
html.is-touch [data-hero-embed]:hover [data-hero-play]{ opacity:1 !important; }
html.is-touch [data-tool]:hover [data-tool-label]{ opacity:0 !important; }

/* --- Carte projet (rendue depuis contenu.js) ------------------------------ */
.work-card{
  appearance:none; -webkit-appearance:none; text-align:left; padding:0; margin:0; background:none; border:0;
  cursor:pointer; display:block; border-radius:20px; overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.work-card-media{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:20px; background:var(--surface-2); }
.work-card-img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.work-card-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, var(--scrim2), transparent 62%); pointer-events:none; }
/* Format long : grille 16:9 uniforme (nb de colonnes réglable via l'admin, appliqué en JS) → alignement parfait */
[data-work-grid]{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
/* Format court : étagère 9:16 qui défile horizontalement */
.short-card{ appearance:none; -webkit-appearance:none; padding:0; border:0; background:var(--surface-2); cursor:pointer; flex:0 0 auto; width:var(--short-w, clamp(168px,15vw,200px)); aspect-ratio:9/16; border-radius:20px; overflow:hidden; position:relative; scroll-snap-align:start; transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1); display:block; }
.short-card .work-card-media{ aspect-ratio:9/16; border-radius:20px; height:100%; }
/* Pas de scrim (dégradé navy) sur les Shorts : c'était la « lueur bleue » du bas */
.short-card .work-card-scrim{ display:none; }
/* Le padding (12px haut / 28px bas, dans le HTML) laisse l'ombre portée s'estomper au lieu d'être coupée net par l'overflow → vraie ombre douce, pas de ligne droite. */
[data-shorts-row]{ scrollbar-width:thin; }
[data-shorts-row]::-webkit-scrollbar{ height:8px; }
[data-shorts-row]::-webkit-scrollbar-thumb{ background:rgba(21,43,106,.22); border-radius:100px; }
/* Survol format court : léger soulèvement, sans ombre. */
@media (hover:hover) and (pointer:fine){
  .short-card:hover{ transform:translateY(-6px); }
  .short-card:hover .work-card-img{ transform:none; }
}

/* Accessibilité : anneau de focus clavier sur les champs du formulaire (les inputs ont outline:none en inline).
   Ne s'affiche qu'au clavier (:focus-visible), invisible à la souris → aucun changement pour le visiteur souris. */
[data-input]:focus-visible{ border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(21,43,106,0.28); }

/* --- Carte client (rendue depuis contenu.js) ------------------------------ */
.client-card{
  flex:0 0 auto; width:clamp(200px,23vw,232px); background:#FBF7EE; padding:12px 12px 16px; border-radius:3px;
  box-shadow:0 16px 34px -14px rgba(23,19,14,0.42);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease; display:block;
}
.client-card:nth-child(1){ rotate:-4deg; }
.client-card:nth-child(2){ rotate:3deg; }
.client-card:nth-child(3){ rotate:-2deg; }
.client-card:nth-child(4){ rotate:4deg; }
.client-card:nth-child(n+5){ rotate:-3deg; }

/* --- Repli logo "sevno" en texte si le SVG n'est pas (encore) fourni ------ */
.wordmark-fallback{
  font-family:'Switzer',sans-serif; font-weight:700; letter-spacing:-0.04em;
  line-height:1; display:inline-block; user-select:none;
}

/* --- Menu mobile ---------------------------------------------------------- */
@media (max-width: 760px){
  .menu-toggle{ display:inline-flex !important; }
}
[data-mobile-menu].open{ display:flex !important; }
@media (hover: hover) and (pointer: fine){
  [data-menu-link]:hover{ background:rgba(237,231,216,0.12); }
  .menu-toggle:hover{ border-color:rgba(237,231,216,0.6); }
}

/* --- Indicateur de scroll : masqué sur écrans très courts (anti-chevauchement) */
@media (max-height: 640px){ [data-scroll-cue]{ display:none !important; } }

/* --- Focus clavier visible (accessibilité) -------------------------------- */
:focus-visible{ outline:3px solid #9C9CFC; outline-offset:3px; border-radius:8px; }

/* --- Repli photo "à propos" si l'image n'est pas (encore) fournie --------- */
.about-photo-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--navy), #0e1834); color:rgba(237,231,216,0.5);
  font-weight:600; font-size:14px; text-align:center; padding:20px;
}