/* --------------------------
   Raag Vision — Design System
   Tokens + composants
   -------------------------- */
:root{
  /* Brand tokens */
  --background: #f2f2f2;
  --surface: #e7e7f4;
  --card: #e4e4e4;
  --card-2: #d4d4d4;
  --text: #111111;
  --muted: #5e5e5e;
  --accent: #d41c1c;       /* rose/violet */
  --accent-contrast: #000000;

  /* Spacing & radius */
  --gap: 20px;
  --radius: 14px;


  /* Typography */
  --font-heading: 'TASA Orbiter', sans-serif;   /* pour les titres */
  --font-body: 'Inconsolata', monospace;       /* pour le corps de texte */
  --h1: 46px;
  --h2: 38px;
  --body: 16px;
}

/* Corps de texte */
body, p, li, small {
  font-family: var(--font-body);
}

/* Titres */
h1, h2, h3, h4, h5, h6, span, a {
  font-family: var(--font-heading);
}


/* Responsive tokens (override if needed) */
@media (max-width:800px){
  :root{ --h1: 28px; --h2: 22px; }
  .brand-name {
    display: none;
  }
  .nav-inner {
     gap: 10px;        /* réduit l’espace entre éléments */
  }
  .lang-burger {
    margin-left: 0;   /* supprime la marge qui fait dépasser */
    flex-shrink: 0;   /* empêche le bouton de rétrécir trop */
  }
  .burger-btn {
    width: 36px;  /* ajuste la taille si besoin */
    height: 36px;
  }


}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--background);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

/* Container */
.container{width:min(1100px,94%); margin:0 auto; padding:40px 0}

/* NAV */
.brand, .menu, .lang-burger {
  max-width: 100%;   /* empêche de dépasser */
}


.nav{
  background-color: rgba(217, 217, 217, 0.283);
  border-bottom:1px solid rgba(255,255,255,0.03);
  position:sticky;
  top:0;
  z-index:60
  
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px;
  width: 100%;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px
}

.logo-img{height:44px; display:block}
.brand-name{font-weight:500; letter-spacing:0.02em}

.lang-burger {
  position: relative;
  display: inline-block;
  margin-left: 40px; 
}

.burger-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.5em;
  cursor: pointer;
  position: relative;
}

.lang-menu {
  display: none;
  position: absolute;
  top: 2.5rem; /* juste en dessous du bouton */
  right: 0;
  background: var(--card-2);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  list-style: none;
  padding: 10px 0;
  min-width: 80px;
}

.lang-menu li {
  padding: 8px 15px;
}

.lang-menu li a {
  text-decoration: none;
  color: var(--text);
}

.lang-menu li a:hover {
  background: rgba(0,0,0,0.1);
  border-radius: 5px;
}

/* Style du bouton burger */
.burger-btn {
  background: none;   /* pas de fond */
  border: none;       /* pas de bordure */
  cursor: pointer;
  padding: 0;
}

/* Taille de l'image */
.burger-btn .burger-icon {
  width: 25px;    /* largeur souhaitée */
  height: 25px;   /* hauteur souhaitée */
  display: block;
}

.burger-btn:hover {
  background: var(--accent); /* devient rouge */
  border-radius: 50px;
}

/* Menu */
.menu {
  display: flex;
  align-items: center;           /* centre les liens verticalement */
  gap: 20px;                     /* espace entre chaque lien */
  justify-content: center; 
}

.menu a{
  color:var(--text);
  text-decoration:none;
  margin-left:18px;
  font-weight:500;
  opacity:.9}

.menu a:hover{color:var(--accent)}

/* Sections */
.section{padding:48px 0}
.kicker{color:var(--accent); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:12px}
h1{font-size:var(--h1); margin:12px 0}
h2{font-size:var(--h2); color:var(--accent); margin-bottom:14px}
h3,h4{margin:8px 0 6px}

/* Surface / Card */
.surface{background:var(--surface); padding:28px; border-radius:var(--radius); border:1px solid rgba(255,255,255,0.03); box-shadow: 0 8px 24px rgba(0,0,0,0.5)}
.card{background:var(--card); border-radius:var(--radius); padding:18px; border:1px solid rgba(255,255,255,0.02)}

/* Filters (pills) */
.filters{
  display:flex;
  gap:12px;
  margin:18px 0 26px;
  flex-wrap:wrap
}

.pill{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  font-weight:500
}

.pill:hover
  {background:var(--card-2)}

.pill.active{
  background:var(--accent);
  color:var(--accent-contrast);
  box-shadow: 0 6px 22px rgba(255,60,120,0.12)
}

/* Grid projects */
.grid{display:grid; gap:var(--gap)}
.projects-grid{grid-template-columns:repeat(3,1fr); align-items:start}
@media (max-width:1000px){ .projects-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .projects-grid{grid-template-columns:1fr} }

/* Project card */
.project{cursor:pointer; transition:transform .22s var(--ease, ease); overflow:hidden}
.project:hover{transform:translateY(-6px)}
.thumb{height:170px; border-radius:10px; background-size:cover; background-position:center; position:relative; display:flex; align-items:flex-end; padding:12px}
.thumb-badge{background:rgba(0,0,0,0.4); padding:6px 10px; border-radius:999px; font-weight:800; color:var(--accent-contrast)}
.meta{color:var(--muted); font-size:14px}

/* Services */

/* Reset simple */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


.service-section {
  text-align: center;
  padding: 50px 20px;
}

.service-section h1 {
  margin-bottom: 40px;
  font-size: 2em;
}

/* Grid responsive */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-items: stretch + width: 100%;
}

@media (max-width: 1000px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* service-Card */
.service-card {
  background-color: var(--card-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px var(--background);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column; /* texte sous l'image */
  align-items: center;
  text-align: center;
}

.service-card img {
  width: 100%;
  height: auto;
}

.service-card h2 {
  margin: 15px 0 10px 0;
  font-size: 1.2em;
  background: linear-gradient(135deg,var(--accent), rgba(255,60,120,0.06));
  padding: 10px 20px;
  border-radius: 8px;
}

.service-card p {
  margin-bottom: 20px;
  color: var(--muted);
  padding: 0 10px;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  cursor: pointer;
}


/* Contacts */

.contact-form{max-width:680px; margin:0 auto; display:grid; gap:12px}
.contact-form label{display:block; color:var(--muted); font-size:14px}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:var(--card); color:var(--text)
}

/* Footer */
.footer{padding:18px 0; border-top:1px solid rgba(255,255,255,0.03); margin-top:36px; color:var(--muted)}

/* MODAL */
.modal{
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:rgba(3,3,3,0.7);
  align-items:center; justify-content:center;
  padding:28px;
}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{
  width:min(960px, 98%); max-height:92vh; overflow:auto;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:16px; padding:20px; position:relative; border:1px solid rgba(255,255,255,0.04)
}
.modal-close{
  position:absolute; top:10px; right:12px; background:transparent; border:none; font-size:28px; cursor:pointer; color:var(--)
}
.modal-body{margin-top:12px; color:var(--background)}
.video-wrap{width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden}
.gallery{display:flex; gap:10px; flex-wrap:wrap}
.gallery img{width:calc(50% - 5px); border-radius:8px; object-fit:cover}
@media (max-width:560px){ .gallery img{width:100%} }

/* Images dans les modales */
.modal-body img {
  display: block;          /* force le bloc */
  max-width: 100%;         /* ne dépasse pas la largeur */
  max-height: 80vh;        /* ne dépasse pas la hauteur de l'écran */
  margin: 0 auto;          /* centre horizontalement */
  object-fit: cover;       /* recadre l’image proprement */
  border-radius: 10px;     /* angles arrondis */
}

.modal-video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  max-height: 80vh; /* pour éviter que la vidéo dépasse de l'écran */
  object-fit: cover;
}


/* small helpers */
.hidden{display:none}

/* --------- VIDEO RESPONSIVE --------- */
.video-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;   /* largeur max du lecteur */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: #000;   /* fond noir si la vidéo ne charge pas */
}

.video-wrap iframe,
.video-wrap video {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Ratio horizontal (16:9) — YouTube classique */
.video-wrap.ratio-16-9 {
  aspect-ratio: 16 / 9;
}

/* Ratio vertical (9:16) — Shorts, TikTok, Reels */
.video-wrap.ratio-9-16 {
  aspect-ratio: 9 / 16;
  max-height: 90vh; /* empêche de dépasser l’écran */
}

/* Ratio carré (1:1) — Instagram, posts carrés */
.video-wrap.ratio-1-1 {
  aspect-ratio: 1 / 1;
}


/*PAGE D'ACCUEIL*/
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color:var(--text);
}

/* Contenu */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 20px;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--text);
}

.hero h1 span {
  color: var(--accent); /* accent violet/bleu */
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: var(--text);
}

.btn {display: inline-block;
      background:var(--accent);
      color:var(--text); 
      border:none;
      padding:12px 20px;
      border-radius:30px;
      text-decoration: none;
      font-weight:400;
      transition: background 0.3s ease;
    }

.btn:hover {background:var(--card-2)}

/* Section Hero */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden; /* empêche la vidéo de dépasser */
  
}

/* Vidéo en background */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover; /* remplit toute la section */
  z-index: 1;
  pointer-events: none;
  
}

/* Overlay sombre */
.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4); /* ajuste l’opacité */
  z-index: 2;
}

/* Texte par-dessus la vidéo */
.hero-content {
  position: relative;
  z-index: 3;
  color: #fff;
  text-align: left;
  max-width: 800px;
  padding: 20px;
}



/* --- Formulaire --- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form label span {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  border: 1px solid #444;
  border-radius: 6px;
  background-color: var(--background);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  transition: border 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.contact-form button {
  padding: 14px;
  background-color: var(--accent);
  color: var(--text);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.contact-form button:hover {
  background-color: var(--card-2);
}

/* --- Message dynamique --- */
.form-message {
  display: none;
  padding: 12px;
  border-radius: 6px;
  margin-top: 10px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.5s;
}

.form-message.show {
  display: block;
  opacity: 1;
}

.form-message.success {
  background-color: #d4edda;
  color: #155724;
}

.form-message.error {
  background-color: #f8d7da;
  color: #721c24;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}