/* ========================================================= */
/* R-ONE VIDÉASTE — styles.css                               */
/* Organisation simple + facile à maintenir                  */
/* ========================================================= */



/* ========================================================= */
/* 1) VARIABLES (THÈME)                                      */
/* ========================================================= */

:root{
  --bg:#070a12;

  --overlay1:rgba(7,10,18,.72);
  --overlay2:rgba(7,10,18,.90);

  --panel:rgba(12,16,28,.72);
  --panel2:rgba(12,16,28,.60);

  --text:#edf2ff;
  --muted:#a8b0c5;
  --line:rgba(255,255,255,.10);

  --accent:#ef4444;
  --accent2:#60a5fa;

  --radius:18px;
  --shadow:0 18px 50px rgba(0,0,0,.55);

  --max:1120px;
}



/* ========================================================= */
/* 2) RESET / BASE                                           */
/* ========================================================= */

*{ box-sizing:border-box; }

html,
body{
  height:100%;
}

html{
  color-scheme:dark;
}

body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

a{
  color:inherit;
}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:24px 16px 70px;
}



/* ========================================================= */
/* 3) BACKGROUND (IMAGE + OVERLAY)                           */
/* ========================================================= */

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url("../assets/hero.webp") center/cover no-repeat;
  transform:translateZ(0);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 560px at 15% 12%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(900px 560px at 85% 20%, rgba(239,68,68,.14), transparent 60%),
    linear-gradient(to bottom, var(--overlay1), var(--overlay2));
}

.brand span {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ========================================================= */
/* 4) ACCESSIBILITÉ                                          */
/* ========================================================= */

.skip-link{
  position:absolute;
  left:12px;
  top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  color:var(--text);
  text-decoration:none;
  transform:translateY(-140%);
  transition:transform .2s ease;
}

.skip-link:focus{
  transform:translateY(0);
  outline:3px solid rgba(96,165,250,.55);
  outline-offset:3px;
}



/* ========================================================= */
/* 5) HEADER + NAVIGATION                                    */
/* ========================================================= */

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  background:linear-gradient(to bottom, rgba(7,10,18,.78), rgba(7,10,18,.35));
  border-bottom:1px solid var(--line);
}

.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  min-width:220px;
}

/* Logo */
.brand img{
  width:150px;
  height:150px;
  border-radius:999px;
  display:block;
  border:none;
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  background:rgba(255,255,255,.03);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.brand:hover img{
  transform:scale(1.06);
  box-shadow:0 22px 55px rgba(0,0,0,.65);
  filter:saturate(1.08) contrast(1.05);
}

/* Texte brand */
.brand strong{
  display:block;
  font-size:14px;
  letter-spacing:.2px;
}

.brand span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* Navigation */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.nav a{
  text-decoration:none;
  color:var(--muted);
  font-size:13px;
  padding:8px 10px;
  border-radius:12px;
}

.nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}

.nav a[aria-current="page"],
.nav a.active{
  color:var(--text);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}



/* ========================================================= */
/* 6) BOUTONS                                                */
/* ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  font-weight:650;
  font-size:13px;
  white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  cursor:pointer;
}

.btn:hover{
  background:rgba(255,255,255,.10);
}

.btn:focus-visible{
  outline:3px solid rgba(96,165,250,.55);
  outline-offset:3px;
}

.btn.primary{
  border-color:rgba(239,68,68,.55);
  background:linear-gradient(135deg, rgba(239,68,68,.95), rgba(96,165,250,.72));
}



/* ========================================================= */
/* 7) BLOCS / LAYOUT                                         */
/* ========================================================= */

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.pad{
  padding:18px;
}

.hero{
  padding:26px 0 10px;
  display:grid;
  gap:16px;
  grid-template-columns:1.25fr .75fr;
  align-items:stretch;
}



/* ========================================================= */
/* 8) TYPO                                                   */
/* ========================================================= */

h1{
  margin:12px 0 10px;
  font-size:44px;
  line-height:1.08;
  letter-spacing:-.9px;
}

h2{
  font-size:22px;
  margin:18px 0 12px;
}

h3{
  margin:0 0 8px;
  font-size:16px;
}

p{
  margin:0;
}

.lead{
  color:var(--muted);
  font-size:16px;
  margin:0 0 10px;
}

.muted{
  color:var(--muted);
}



/* ========================================================= */
/* 9) COMPOSANTS                                             */
/* ========================================================= */

.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  width:fit-content;
  font-size:12px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.18);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}

.list{
  margin:10px 0 0;
  padding:0 0 0 18px;
  color:var(--muted);
}

.list li{
  margin:6px 0;
}



/* ========================================================= */
/* 10) FORMULAIRES                                           */
/* ========================================================= */

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:10px 0 6px;
}

input,
textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:12px 12px;
  color:var(--text);
  font-size:14px;
  outline:none;
}

textarea{
  min-height:120px;
  resize:vertical;
}

input:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(96,165,250,.55);
  outline-offset:2px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.note{
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
}



/* ========================================================= */
/* 11) INDEX SPÉCIFIQUES                                     */
/* ========================================================= */

.about-text{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

.works-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:600px;
  overflow:auto;
  padding-right:6px;
  scrollbar-gutter:stable;
  margin: top 10px;
}

.after-wide{
  margin-top:18px;
}

/* Tabs */
.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.tab-panels[hidden]{
  display:none;
}



/* ========================================================= */
/* 12) FOOTER                                                */
/* ========================================================= */

.footer{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}

.social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.social a{
  text-decoration:none;
  color:var(--muted);
  padding:6px 10px;
  border-radius:12px;
}

.social a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}

/* Footer pro */
.footer-pro{
  align-items:flex-start;
  gap:16px;
}

.footer-left{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:240px;
}

.footer-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.footer-line .sep{
  opacity:.55;
}

.footer-link{
  color:var(--muted);
  text-decoration:none;
}

.footer-link:hover{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:3px;
}

.footer-mail{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
  width:fit-content;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.footer-mail:hover{
  color:var(--text);
  background:rgba(255,255,255,.07);
}

.icon-mail{
  opacity:.9;
}

.footer-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-left:auto;
}

/* Réseaux */
.social-icon{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  transition:transform .12s ease, background .12s ease;
}

.social-icon:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
}

.social-icon svg{
  display:block;
}

.social-icon.facebook{ color:#1877F2; }
.social-icon.instagram{ color:#E4405F; }
.social-icon.linkedin{ color:#0A66C2; }
.social-icon.youtube{ color:#FF0000; }



/* ========================================================= */
/* 13) MATÉRIEL                                              */
/* ========================================================= */

[data-tabs="materiel"] .grid3{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

[data-tabs="materiel"] .card{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:16px;
  align-items:center;
  padding:16px;
  background:rgba(12,16,28,.60);
}

[data-tabs="materiel"] .card-image{
  background:#ffffff;
  border-radius:16px;
  padding:16px;
  border:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
}

[data-tabs="materiel"] .card-image img{
  width:100%;
  height:200px;
  object-fit:contain;
  display:block;
}

[data-tabs="materiel"] .card .list{
  margin:6px 0 0;
  padding-left:18px;
}



/* ========================================================= */
/* 14) STORIES / HISTOIRES                                   */
/* ========================================================= */

.story{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:16px;
  align-items:center;
}

.story-media img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
  display:block;
}

.story-body{
  text-wrap:pretty;
}

.story-body h3{
  margin-bottom:6px;
}

.story-body p{
  text-align:justify;
  line-height:1.6;
  margin-bottom:12px;
  hyphens:auto;
}

.story-body p + p{
  margin-top:8px;
}

/* ========================================================= */
/* SPLIT — cartes côte à côte                                */
/* ========================================================= */

.split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:18px;
}

.split > .card{
  height:100%;
}

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



/* ========================================================= */
/* 15) RÉALISATIONS                                          */
/* ========================================================= */

.videos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:18px;
  margin-top:18px;
}

.video-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.video-card:hover{
  transform:translateY(-4px);
}

.video-card-media{
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:14px;
  margin-bottom:14px;
  background:#0f1522;
  display:flex;
  align-items:center;
  justify-content:center;
}

.video-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.video-card-content h3{
  margin:0 0 10px;
}

.video-kicker{
  margin:0 0 8px;
  font-size:.92rem;
  font-weight:700;
  color:#ff8b61;
}

.video-card .muted{
  margin:0;
  line-height:1.6;
}


/* ========================================================= */
/* ONGLETS / INTERCALAIRES (générique, toutes pages)         */
/* ========================================================= */

.tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
  margin-bottom:12px;
}

.tab-btn{
  padding:12px 18px;
  font-size:14px;
  font-weight:600;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  cursor:pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.tab-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
  color:var(--text);
}

.tab-btn[aria-selected="true"]{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Couleurs spécifiques UNIQUEMENT pour la page réalisations */
.tab-btn[data-tab="tab-ouvrages-video"][aria-selected="true"]{
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.35);
  color:#ffb4a3;
  box-shadow:0 6px 18px rgba(239,68,68,.18);
}

.tab-btn[data-tab="tab-ouvrages-sites"][aria-selected="true"]{
  background:rgba(96,165,250,.15);
  border-color:rgba(96,165,250,.35);
  color:#bcd9ff;
  box-shadow:0 6px 18px rgba(96,165,250,.18);
}

.tab-panel[hidden],
.tab-panels[hidden]{
  display:none;
}

/* ========================= */
/* Couleur passive (subtile) */
/* ========================= */
.tab-btn[data-tab="tab-ouvrages-video"]{
  border-color:rgba(239,68,68,.25);
}

.tab-btn[data-tab="tab-ouvrages-sites"]{
  border-color:rgba(96,165,250,.25);
}

/* ========================= */
/* ACTIF — VIDÉO (rouge doux) */
/* ========================= */
.tab-btn[data-tab="tab-ouvrages-video"][aria-selected="true"]{
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.35);
  color:#ffb4a3;
  box-shadow:0 6px 18px rgba(239,68,68,.18);
}

/* ========================= */
/* ACTIF — SITES (bleu doux) */
/* ========================= */
.tab-btn[data-tab="tab-ouvrages-sites"][aria-selected="true"]{
  background:rgba(96,165,250,.15);
  border-color:rgba(96,165,250,.35);
  color:#bcd9ff;
  box-shadow:0 6px 18px rgba(96,165,250,.18);
}

/* Légère mise en avant */
.tab-btn[aria-selected="true"]{
  transform:scale(1.04);
}

/* ========================= */
/* APERÇU SITE (iframe)      */
/* ========================= */

.site-preview{
  width:100%;
  height:280px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background:#0f1522;
  position:relative;
}

/* on centre correctement le site */
.site-preview iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:1440px;
  height:900px;
  border:0;
  transform:translate(-50%, -50%) scale(0.35);
  transform-origin:center;
  pointer-events:none;
}

/* petit effet hover propre */
.video-card:hover .site-preview iframe{
  transform:translate(-50%, -50%) scale(0.37);
}

.video-card .muted{
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.6;
  hyphens: auto;
}
/* ========================================================= */
/* 15.2) RÉALISATIONS — PANELS                               */
/* ========================================================= */

.tab-panel[hidden]{
  display:none;
}

/* ========================================================= */
/* BOUTONS RÉSEAUX — YouTube / Facebook                      */
/* ========================================================= */

/* Taille + style général */
.btn.youtube,
.btn.facebook{
  padding:14px 22px;
  font-size:15px;
  font-weight:700;
  border-radius:16px;
  border:none;
  color:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  transition:all .2s ease;
}

/* YouTube */
.btn.youtube{
  background:#FF0000;
}

.btn.youtube:hover{
  background:#cc0000;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(255,0,0,.35);
}

/* Facebook */
.btn.facebook{
  background:#1877F2;
}

.btn.facebook:hover{
  background:#125ed1;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(24,119,242,.35);
}

/* ========================================================= */
/* 16) RESPONSIVE                                            */
/* ========================================================= */

@media (max-width: 980px){
  .container{
    padding:22px 14px 64px;
  }

  .header-inner{
    flex-wrap:wrap;
    justify-content:space-between;
    gap:12px;
  }

  .nav{
    order:3;
    width:100%;
    justify-content:flex-start;
  }

  .btn{
    padding:10px 12px;
  }

  .pad{
    padding:16px;
  }

  h1{
    font-size:40px;
  }
}

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

  [data-tabs="materiel"] .card{
    grid-template-columns:220px 1fr;
  }
}

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

  .story-media img{
    height:240px;
  }
}

@media (max-width: 720px){
  .footer-pro{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-right{
    margin-left:0;
    justify-content:flex-start;
  }

  .videos-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 620px){
  .container{
    padding:18px 12px 58px;
  }

  .brand{
    min-width:0;
  }

  .brand img{
    width:72px;
    height:72px;
    border-radius:999px;
  }

  .brand span{
    font-size:11px;
  }

  .header-inner{
    padding:12px 12px;
  }

  .nav a{
    font-size:13px;
    padding:10px 10px;
  }

  .btn{
    font-size:13px;
    padding:10px 12px;
    border-radius:14px;
  }

  .pad{
    padding:14px;
  }

  h1{
    font-size:32px;
    letter-spacing:-.6px;
  }

  .lead{
    font-size:15px;
  }

  .actions{
    gap:8px;
  }

  .footer{
    gap:10px;
  }

  .form-row{
    grid-template-columns:1fr;
  }

  [data-tabs="materiel"] .card{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
}

@media (max-width: 520px){
  h1{
    font-size:36px;
  }
}

@media (max-width: 360px){
  h1{
    font-size:28px;
  }

  .nav{
    gap:6px;
  }

  .nav a{
    padding:9px 9px;
  }
}



/* ========================================================= */
/* 17) RÉDUCTION DES ANIMATIONS                              */
/* ========================================================= */

@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
  }

}