/* ===== Theme: Light / Dark, clean and accessible ===== */
:root{
  --bg: #f7f8fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --brand:#2563eb;
  --brand-2:#0ea5e9;
  --border:#e2e8f0;
  --ring: 0 0 0 4px rgba(37,99,235,.25);
  --shadow: 0 10px 30px rgba(2,6,23,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin:0 auto}

/* Header / Navbar */
.header{
  position:sticky;top:0;z-index:1000;background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
.brand-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--text);
  animation: typing 5s steps(30, end) infinite, blink-caret .75s step-end infinite;
}
.brand .logo{
  width:28px;height:28px;border-radius:6px;
  background: var(--text);
  animation: spin 6s linear infinite; /* Ajout de l'animation de rotation */
}
.nav-links{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.nav-links a{
  position: relative; /* Nécessaire pour le pseudo-élément */
  padding:.45rem .7rem;
  border-radius:.6rem;
  transition: color .2s ease-out; /* Transition sur la couleur du texte */
}
.nav-links a::after {
  content: '';
  position: absolute;
  width: 100%; height: 2px; bottom: 0; left: 0;
  background-color: var(--brand);
  transform: scaleX(0); transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.nav-links a.active, .nav-links a:not(.btn):hover{color: var(--brand);}
.nav-links a:not(.btn):hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Style spécifique pour le bouton DOCS */
.nav-links .btn-docs:hover {
  transform: translateY(0) rotate(360deg); /* Annule le translate et ajoute la rotation */
  transition: transform 0.5s ease-in-out;
  box-shadow: 0 12px 35px rgba(2,6,23,.1); /* Garde l'ombre au survol */
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:none;border-radius:.8rem;padding:.7rem 1rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:all .2s ease}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(2,6,23,.1);
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:white}
.btn.ghost{background:#f1f5f9}
.btn.tiny{padding:.35rem .6rem;font-size:.85rem}

/* Sections */
.section{padding:64px 0}
.section h1,.section h2{margin:0 0 .75rem}
.section p.lead{color:var(--muted);max-width:65ch}

/* Hero */
.hero{padding:72px 0 40px}
.hero .wrap {
  display: flex; /* Utilise flexbox pour aligner les éléments */
  align-items: center; /* Centre les éléments verticalement */
  gap: 2rem; /* Ajoute un espace entre le texte et l'image */
}
.hero .hero-text {
  flex: 1; /* Permet au texte de prendre l'espace restant */
}
.hero .hero-image {
  flex-shrink: 0; /* Empêche le conteneur de rétrécir */
  width: 350px; /* Définit une largeur fixe pour l'image */
  height: 350px; /* Définit une hauteur fixe pour l'image */
  border-radius: 16px; /* Rend les coins de l'image arrondis (carré) */
  overflow: hidden; /* Cache les parties de l'image qui dépassent du cercle */
  padding: 0; /* Retire le padding initial de la carte */
}
.hero .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Assure que l'image est entièrement visible */
  transform: scale(1.1); /* Zoome légèrement pour mieux remplir l'espace */
  animation: float 4s ease-in-out infinite;
}
/* Grid & Cards */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  grid-column:span 12;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow);transition: all .2s ease;
  animation: slideUp 0.5s ease-out forwards;
  opacity: 0;
  animation-delay: calc(var(--i, 0) * 100ms);
}
.card .meta{color:var(--muted);font-size:.95rem}
.card object {
  height: 1150px; /* Hauteur pour les aperçus PDF */
}

/* List cards */
.list{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.item{
  grid-column:span 12;display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow);transition: all .2s ease;
  animation: slideUp 0.5s ease-out forwards;
  opacity: 0;
  animation-delay: calc(var(--i, 0) * 100ms);
}
.card:hover, .item:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(2,6,23,.1);
}
.item .thumb{
  height:110px;overflow:hidden;
  display: flex; /* Ajout pour centrer */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
}
.item .thumb img {
  animation: pulse 3s ease-in-out infinite;
}

.item .thumb img.contain {
  object-fit: contain;     /* Assure que l'image est entièrement visible */
  transform: scale(1);     /* Empêche le zoom de l'animation pulse */
}

/* Footer */
.footer{
  border-top:1px solid var(--border);padding:22px 0;background:var(--surface);
  /* Animation de fondu à l'entrée */
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}

/* Utilities */
.meta{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.badge{display:inline-flex;align-items:center;border:1px solid var(--border);background:#f8fafc;padding:.2rem .5rem;border-radius:.5rem;font-size:.85rem}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; border:1px solid var(--border); border-bottom-width:2px; padding:.1rem .35rem; border-radius:.4rem; background:#fff;}

/* Responsive */
@media (max-width: 900px){
  .hero .wrap{flex-direction: column;}
  .item{grid-template-columns:1fr}
}

/* Keyframes pour les animations */
@keyframes fadeInAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Animation pour l'effet de frappe */
@keyframes typing {
  from, to { width: 0 }
  50% { width: 100% }
}

/* Animation pour le curseur qui clignote */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--text); }
}

/* Animation pour faire tourner le logo */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media print {
  .header, .footer, .btn, nav, .no-print { display:none !important; }
  body { background: #fff; color: #000; }
}
main{
  flex: 1 0 auto;
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* Sticky footer for homepage */
.home-page { 
  /* On garde la classe pour d'éventuels styles spécifiques, mais on retire le centrage */
}