/* ========== style.css (corrigé) ========== */
:root{
  --bg: #0a0a0d;
  --bg-2: #0c0c11;
  --text: #e8e8e8;
  --muted: #9a9a9a;
  --muted-2: #777;
  --meta: #bdbdbd;
  --header-bg: rgba(15,15,18,0.55);
  --glass-border: rgba(255,255,255,0.05);
  --accent: rgba(50,130,255,0.12);
}
/* Global reset */
*{ box-sizing:border-box; }
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 40%, var(--bg) 100%);
  color: var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Links */
a{ text-decoration:none; color:inherit; }
/* ================= HEADER ================= */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 8%;
  background: var(--header-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom:1px solid var(--glass-border);
  z-index:1000;
}
.logo{ font-size:12px; letter-spacing:3px; color:#888; }
nav{ display:flex; gap:40px; }
nav a{
  font-size:13px;
  color:var(--muted-2);
  transition:opacity .3s ease;
}
nav a:hover{ opacity:.6; }
/* BURGER */
.burger{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  z-index:1100;
}
.burger span{
  width:24px;
  height:1px;
  background:#fff;
  transition:0.4s ease;
}
.burger.open span:nth-child(1){
  transform:rotate(45deg) translate(4px,4px);
}
.burger.open span:nth-child(2){
  transform:rotate(-45deg) translate(4px,-4px);
}
/* ================= INTRO / HERO / PRINCIPES ================= */
.intro{
  padding:110px 8% 10px 8%;
  max-width:900px;
}

.thebox{
  padding:10px 8% 20px 8%;
  max-width:900px;
  font-family:'Inter',sans-serif;
  color:var(--muted);
  font-size:12px;
} 

h1{
  font-weight:300;
  font-size:clamp(38px,6vw,68px);
  margin:0 0 30px 0;
  letter-spacing:-1px;
}
.intro p{
  color:var(--muted);
  font-size:18px;
}
/* HERO */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:140px 8% 80px 8%;
}
.hero-inner{ max-width:800px; }
.hero h1{
  font-weight:300;
  font-size:clamp(40px,6vw,72px);
  margin:0 0 40px 0;
  letter-spacing:-1px;
}
.hero p{
  color:var(--muted);
  font-size:18px;
  max-width:650px;
}
/* PRINCIPES */
.principes{
  display:flex;
  justify-content:space-between;
  gap:60px;
  padding:80px 8% 140px 8%;
  max-width:1200px;
}
.bloc{ flex:1; }
.bloc h3{ font-weight:400; margin-bottom:20px; }
.bloc p{ color:#888; line-height:1.7; font-size:14px; }
/* ================= PORTFOLIO ================= */
.portfolio{
  padding:40px 8% 20px 8%;
  max-width:1000px;
}
/* ================= FOOTER ================= */
footer{
  padding:80px 8%;
  font-size:12px;
  color:#555;
  border-top:1px solid var(--glass-border);
}
/* ===== Layout & spacing for list items / lines ===== */
.line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  transform-origin: left center;
}
/* force pas de marge par défaut + couleurs héritées du thème /
.company,
.meta {
  margin: 0;
  color: inherit;   / prend color du body ou du conteneur parent */
}
/* group texte empilé */
.text-group { display: flex; flex-direction: column; gap: 2px; }
/* ===== Logo sizing ===== /
.logo-wrap{
  width:40px;
  height:40px;
  min-width:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  position: relative; / pour focus ring éventuel */
}
.company-logo{
  width:100%;
  height:100%;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  display:block;
}
/* === Neutraliser toutes animations/transforms/effets sur le logo === */
.logo-wrap,
.logo-wrap *,
.company-logo,
.company-logo * {
  animation: none !important;
  -webkit-animation: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Empêche l'effet hover/focus qui scale la logo */
.line:hover .company-logo,
.line:focus-within .company-logo {
  transform: none !important;
  box-shadow: none !important;
}
/* Si tu utilises .logo-wrap::after pour le focus ring, neutralise-le */
.logo-wrap::after {
  content: none !important;
  box-shadow: none !important;
}
/* Si une classe .pulse (ou autre) est ajoutée dynamiquement par JS */
.pulse,
.pulse *,
.logo-pulse,
.logo-pulse * {
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;
}
/* ===== Animations (gardées pour le reste de la page, non pour le logo) ===== */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-8px) scale(.995); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes logoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(50,150,255,0.08); transform: scale(.98); }
  50%  { box-shadow: 0 8px 20px rgba(50,150,255,0.08); transform: scale(1.02); }
  100% { box-shadow: 0 1px 6px rgba(0,0,0,0.08); transform: scale(1); }
}
@keyframes logoReveal {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* apply animations when container has .animated (texts kept) /
.line.animated {
  animation: fadeSlideIn .45s cubic-bezier(.22,.9,.32,1) both;
}
/ staggered effect: texts only (logo neutralized by the patch above) */
.line.animated .company { animation: fadeSlideIn .36s ease-out .12s both; }
.line.animated .meta    { animation: fadeSlideIn .36s ease-out .18s both; transform-origin: left; }
/* ===== Hover / focus micro-interaction (accessible) ===== /
/ Note : logo hover/focus effects neutralized earlier; keep focus ring for keyboard users on the .line */
.line:focus-within { outline: none; }
.line:focus-within .logo-wrap::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--accent);
  pointer-events: none;
}
/* ===== Typography small tweaks (final, non-conflicting) ===== */
.company { font-weight: 600; font-size: 15px; }
.meta    { font-size: 13px; opacity: 0.92; color: var(--muted-2); }
/* ===== Responsive adjustments ===== /
/ Tablet and small desktop */
@media (max-width:768px){
  header{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding:20px 5%;
  }
  nav{
    position:fixed;
    top:0;
    right:-100%;
    width:70%;
    height:100vh;
    background:#111;
    flex-direction:column;
    padding:120px 40px;
    gap:30px;
    transition:0.4s ease;
    z-index:1050;
  }
  nav.active{ right:0; }
  .burger{ display:flex; position:relative; z-index:1100; }
  /* IMPORTANT: keep lines as horizontal list items on tablet/mobile /
  .line{
    flex-direction: row;      / prevent stacking / centering */
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 0;
    align-items: center;
  }
  .logo-wrap { width: 36px; height: 36px; min-width:36px; }
  .company { font-size: 14px; }
  .meta { font-size: 12px; }
}
/* Very small screens: allow stacking if space is too tight /
@media (max-width:420px){
  .line{
    flex-direction: column;
    align-items: flex-start;  / keep content left-aligned /
    gap: 6px;
  }
  .logo-wrap{ width:32px; height:32px; min-width:32px; }
  .text-group{ width: calc(100% - 40px); } / ensure text doesn't center */
}
/* Optional: ensure portfolio lines are left-aligned */
@media (max-width:600px) {
  .portfolio,
  .portfolio .line {
    justify-content: flex-start;
    text-align: left;
  }
}
/* ========== End of file ========== */