:root{
  --bg:#0b0b0b;
  --accent:#E27904;
  --accent-2:#ff5f6d;
  --text:#fff;
  --muted:rgba(255,255,255,.82);
  --border:rgba(255,255,255,.12);
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --max:1200px;
}

*{
  box-sizing:border-box;
}

html{
  width:100%;
  max-width:100%;
  scroll-behavior:smooth;
}

body{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
}

img{
  width:100%;
  display:block;
}

h1,h2,h3{
  margin-top:0;
  text-align:center;
}

h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(34px,5vw,50px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:.02em;
}

h2{
  margin-bottom:28px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px,4vw,42px);
  line-height:1.12;
  font-weight:500;
  letter-spacing:.03em;
}

h2::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  margin:16px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#ff7a1a);
  box-shadow:0 0 18px rgba(226,121,4,.35);
}

h3{
  font-size:22px;
  font-weight:400;
}

p{
  margin-top:20px;
  color:var(--text);
  font-size:18px;
  line-height:1.7;
}

.container{
  width:min(var(--max),calc(100% - 40px));
  margin-inline:auto;
}

.section-intro{
  max-width:900px;
  margin:0 auto 30px;
  text-align:center;
  color:var(--muted);
}

/* =========================
   HEADER
========================= */

.bande{
  position:sticky;
  top:0;
  z-index:1000;
  padding:0;
  background:rgba(5,5,5,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(226,121,4,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}

.header-inner{
  width:min(1450px,calc(100% - 50px));
  height:88px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.header-logo{
  display:none;
}

.header-menu{
  flex:1;
  display:flex;
  justify-content:center;
}

#menu,
#contenant_menu{
  width:100%;
  height:auto;
}

#btn_menu,
#menu label{
  display:none;
}

.menu ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}

.menu ul li{
  border-radius:999px;
  transition:.3s;
}

.menu a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 4px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:.3s;
}

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

.menu li:first-child{
  margin-right:24px;
}

.menu li:first-child a img{
  width:165px !important;
  margin-top:0 !important;
}

.menu li a[href="boutique.php"]{
  padding:12px 22px;
  border-radius:999px;
  background:linear-gradient(45deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 22px rgba(226,121,4,.35);
}

.menu li a[href="boutique.php"]:hover{
  color:#fff;
  transform:translateY(-2px);
}

.menu li a[href$="accueil.php"] img,
.menu li a[href$="deconnexion.php"] img{
  width:22px !important;
  margin-top:0 !important;
}

#reso{
  display:flex;
  align-items:center;
  gap:12px;
}

.header-social a{
  width:42px;
  height:42px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  transition:.3s;
}

.header-social a:hover{
  transform:translateY(-3px);
  background:var(--accent);
  border-color:var(--accent);
}

.fa{
  width:20px;
  color:#fff;
}

/* =========================
   BUTTONS
========================= */

#btn{
  padding:14px 28px;
  border:none;
  border-radius:50px;
  background:linear-gradient(45deg,var(--accent),var(--accent-2));
  color:#fff;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:.3s;
}

#btn:hover{
  background:linear-gradient(45deg,var(--accent-2),var(--accent));
  transform:scale(1.05);
}

/* =========================
   IMAGE SECTIONS
========================= */

.ParaImage{
  position:relative;
  width:100%;
  min-height:min(900px,100svh);
  padding:clamp(120px,18vh,200px) 0;
  display:flex;
  align-items:center;
  background-color:rgba(0,0,0,.5);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

.ParaImage::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.60));
}

.bg3{
  background-image:url(https://doodproject.fr/images/dood_project_bardenas1.jpg);
}

.bg4{
  background-image:url(https://doodproject.fr/images/Doodproject_printemps_de_bourges.jpg);
}

.ParaImage1{
  position:relative;
  width:100%;
  height:550px;
  padding:200px 0;
  background-color:rgba(0,0,0,.5);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

.ParaImage1::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42));
}

.ParaImage1 .container{
  position:relative;
  z-index:2;
}

/* =========================
   CONTENT SECTIONS
========================= */

.ParaContent{
  position:relative;
  width:100%;
  text-align:center;
  background:
    url('https://doodproject.fr/images/Doodproject_6.jpg')
    center/cover no-repeat;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.ParaContent::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
}

.ParaContent > .container,
.ParaContent > div > .container,
.ParaContent > div{
  position:relative;
  z-index:2;
}

.section-block{
  padding-top:clamp(48px,6vw,70px);
  padding-bottom:clamp(42px,5vw,60px);
}



/* =========================
   VIDEO BACKGROUND SECTIONS
========================= */

.ParaVedio{
  position:relative;
  overflow:hidden;
  min-height:650px;
  padding:60px 0;
  background:#000;
}

.ParaVedio > video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center 20%;
  z-index:0;
}

.ParaVedio > .container{
  position:relative;
  z-index:2;
}

.ParaVedio:not(.hero-video)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(0,0,0,.18);
}

@media (max-width: 768px) {
  .ParaVedio > video{
    object-position: center;
  }
}

/* =========================
   HERO VIDEO
========================= */

.hero-video{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-video > #hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
  padding:0;
  object-fit:contain;
  object-position:center;
  transform:none;
  z-index:0;
  pointer-events:none;
}

@media (min-width: 769px) {
  .hero-video {
    height: calc(100vh - 88px) !important;
    min-height: calc(100vh - 88px) !important;
  }

  .hero-video > #hero-video {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 15% !important;
  }
}

.hero-video .hero-video-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.02) 0%,
    rgba(0,0,0,.035) 55%,
    rgba(0,0,0,.06) 100%
  );
}

.hero-video .hero-content{
  position:relative;
  z-index:2;
  width:min(560px,70%);
  margin:auto;
  padding:18px 26px;
  text-align:center;
  pointer-events:auto;
  background:rgba(0,0,0,.35);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.16);
}

.hero-video .hero-logo{
  width:min(280px,46%);
  margin:0 auto 12px;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));
}

.hero-video h1{
  margin:0 auto 6px;
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.15;
  color:#fff;
  text-shadow:
    0 2px 5px rgba(0,0,0,.9),
    0 5px 18px rgba(0,0,0,.65);
}

.hero-video .hero-tagline{
  margin:4px auto;
  color:var(--accent);
  font-family:'Inter',sans-serif;
  font-size:clamp(12px,1vw,14px);
  font-weight:700;
  font-style:normal;
  letter-spacing:.08em;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}

.hero-video .hero-description{
  max-width:480px;
  margin:6px auto 12px;
  color:#fff;
  font-size:13px;
  line-height:1.4;
  text-shadow:
    0 2px 5px rgba(0,0,0,.9),
    0 4px 12px rgba(0,0,0,.6);
}

.hero-video #btn{
  position:relative;
  z-index:3;
  padding:10px 22px;
  font-size:13px;
  pointer-events:auto;
  cursor:pointer;
}

/* =========================
   VIDEO GALLERY
========================= */

.video-grid{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:26px;
}

.video-card{
  position:relative;
  width:100%;
  max-width:340px;
  overflow:hidden;
  border-radius:22px;
  cursor:pointer;
  background:#111;
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.video-card.featured{
  max-width:430px;
}

.video-card:hover{
  transform:translateY(-8px);
  border-color:rgba(226,121,4,.85);
  box-shadow:0 22px 48px rgba(0,0,0,.50);
}

.video-card img{
  height:220px;
  object-fit:cover;
  transition:transform .45s ease;
}

.video-card.featured img{
  height:270px;
}

.video-card:hover img{
  transform:scale(1.06);
}

.video-card-overlay{
  position:absolute;
  inset:0;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.92) 10%,
    rgba(0,0,0,.22) 58%,
    rgba(0,0,0,.04) 100%
  );
}

.video-badge{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  padding:8px 13px;
  border-radius:999px;
  background:linear-gradient(45deg,var(--accent),var(--accent-2));
  color:#fff;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.video-play{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:18px;
}

.video-title{
  margin-bottom:7px;
  color:#fff;
  text-align:left;
  font-family:'Cormorant Garamond',serif;
  font-size:20px;
  line-height:1.15;
  font-weight:600;
}

.video-description{
  color:rgba(255,255,255,.88);
  text-align:left;
  font-size:12px;
  line-height:1.3;
  font-style:italic;
  font-weight:400;
}

/* =========================
   LIGHTBOX
========================= */

.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:2000;
  padding:20px;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.85);
}

.lightbox-content{
  position:relative;
  width:min(92vw,920px);
  padding:20px;
  border-radius:18px;
  background:#000;
  text-align:center;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}

.close{
  position:absolute;
  top:10px;
  right:15px;
  color:#fff;
  cursor:pointer;
  font-size:30px;
}

.lightbox-content iframe{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  display:block;
}

/* =========================
   PREMIUM / CONTACT
========================= */

.premium-card{
  padding:34px 28px;
  border-radius:24px;
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(226,121,4,.05)
  );
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 38px rgba(0,0,0,.30);
  backdrop-filter:blur(6px);
}

.cards-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}

.contact-links{
  margin-top:24px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}

.contact-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.contact-chip:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-2px);
}

.logo-row{
  margin-top:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:34px;
}

.logo-row img{
  width:auto;
  max-height:72px;
}

.press-cover{
  max-width:320px;
  margin:20px auto 0;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}

.press-btn{
  display:inline-block;
  margin-top:18px;
  padding:13px 24px;
  border-radius:999px;
  background:linear-gradient(45deg,var(--accent),var(--accent-2));
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.03em;
  transition:.3s;
}

.press-btn:hover{
  transform:translateY(-2px) scale(1.02);
}

/* =========================
   PROJECT FACTS / LINKS
========================= */

.project-facts{
  margin-top:28px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

.project-facts span{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(226,121,4,.45);
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
}

.text-link,
.text-link:link,
.text-link:visited,
.text-link:active{
  color:inherit;
  text-decoration:none;
}

.text-link:hover{
  color:inherit;
  text-decoration:underline;
}

/* =========================
   CONCERT HISTORY
========================= */

.concert-history-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  max-width:900px;
  margin:35px auto 0;
}

#concerts-passes::before{
  background: rgba(0,0,0,.42); /* au lieu de .62 hérité */
}

.concert-history-card{
  position:relative;
  padding:20px 22px;
  border-radius:22px;
  text-align:center;
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.14),
    rgba(226,121,4,.10)
  );
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 14px 38px rgba(0,0,0,.30);
  transition:.3s;
}

.concert-history-card:hover{
  transform:translateY(-4px);
  border-color:rgba(226,121,4,.7);
}

.concert-year{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(226,121,4,.15);
  color:var(--accent);
  font-size:13px;
  font-weight:700;
}

.concert-history-card h3{
  margin:0 0 8px;
  font-family:'Cormorant Garamond',serif;
  font-size:24px;
}

.concert-location{
  margin:0;
  font-size:16px;
}

.concert-date{
  margin:4px 0 0;
  color:rgba(255,255,255,.75);
  font-size:15px;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:980px){
  .cards-row{
    grid-template-columns:1fr;
  }
}

@media(max-width:768px){

  .header-inner{
    height:auto;
    flex-direction:column;
    gap:12px;
  }

  .header-menu{
    width:100%;
    justify-content:center;
  }

  #reso{
    display:none;
  }

  #menu{
    margin-left:5px;
    background:#000;
    font-size:12px;
  }

  #contenant_menu{
    width:100%;
    height:auto;
  }

  #menu label{
    display:block;
    font-size: 28px;
    padding: 14px;
    text-align: left;
    color:#fff;
    background:#000;
    cursor: pointer;
  }

  .menu{
    position:sticky;
    width:100%;
    margin-top:-100%;
    display:none;
    background:rgba(0,0,0,.6);
    transition:.3s;
  }

  .menu ul{
    display:block;
    width:100%;
  }

  .menu ul > li,
  .menu ul > li > ul{
    width:100%;
  }

  .menu li{
    width:100%;
    border-top:1px solid #fff;
    border-radius:0;
  }

  .menu ul > li > ul{
    position:absolute;
    display:none;
    background:rgba(0,0,0,.6);
    transition:2s;
  }

  .menu ul > li > ul > li{
    border-bottom:0;
  }

  #btn_menu:checked ~ .menu{
    display:block;
    margin:0;
  }

  .ParaImage{
    min-height:calc(100svh - 70px);
    padding:100px 0 80px;
    background-attachment:scroll;
  }

  .ParaImage1{
    height:340px;
    padding:120px 0;
    background-attachment:scroll;
  }

  .hero-video{
    height:auto;
    min-height:calc(100svh - 70px);
    padding:28px 0;
  }

  .hero-video .hero-content{
    width:92%;
    padding:28px 20px;
    border-radius:22px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .hero-video .hero-logo{
    width:min(340px,82%);
    margin:0 auto 18px;
  }

  .hero-video h1{
    font-size:clamp(34px,10vw,48px);
    margin-bottom:10px;
  }

  .hero-video .hero-tagline{
    font-size:17px;
    margin:8px auto;
  }

  .hero-video .hero-description{
    font-size:15px;
    margin:10px auto 16px;
  }

  .hero-video #btn{
    font-size:14px;
    padding:12px 24px;
  }

  .video-grid{
    gap:18px;
  }

  .video-card,
  .video-card.featured{
    max-width:95%;
  }

  .video-card img,
  .video-card.featured img{
    height:220px;
  }

  .project-facts{
    gap:8px;
  }

  .project-facts span{
    padding:9px 14px;
    font-size:13px;
  }

  .concert-history-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   MOBILE / TABLETTE PAYSAGE
   Faible hauteur : le hero peut dépasser l'écran
   pour que le bouton reste toujours visible.
========================= */

@media (orientation:landscape) and (max-height:700px){

  .hero-video{
    height:auto;
    min-height:520px;
    padding:24px 0;
  }

  .hero-video > #hero-video{
    object-position:center 20%;
  }

  .hero-video .hero-content{
    width:min(900px,88%);
    padding:24px 40px;
  }

  .hero-video .hero-logo{
    width:min(300px,42%);
    margin-bottom:10px;
  }

  .hero-video h1{
    font-size:42px;
    margin-bottom:10px;
  }

  .hero-video .hero-tagline{
    font-size:18px;
    margin:8px auto;
  }

  .hero-video .hero-description{
    font-size:16px;
    margin:10px auto 16px;
  }

  .hero-video #btn{
    font-size:14px;
    padding:12px 24px;
  }
}

/* =========================
   AGENDA PAGE — styles spécifiques
   (le reste de la charte vient de styles.css, déjà chargé sur le site)
========================= */

.agenda-hero{
  position:relative;
  padding:clamp(90px,14vw,140px) 0 clamp(60px,8vw,90px);
  text-align:center;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.80)),
    url('https://doodproject.fr/images/Doodproject_6.jpg')
    center/cover no-repeat;
  border-bottom:1px solid rgba(226,121,4,.35);
}

.agenda-hero h1{
  font-size:clamp(38px,5vw,58px);
}

.agenda-hero p{
  max-width:640px;
  margin:14px auto 0;
  color:rgba(255,255,255,.82);
  font-size:18px;
}

/* =========================
   PROCHAIN CONCERT
========================= */

.next-date{
  padding:clamp(50px,7vw,80px) 0;
  background:#0b0b0b;
}

.next-date-label{
  display:inline-block;
  margin-bottom:18px;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(226,121,4,.15);
  border:1px solid rgba(226,121,4,.5);
  color:var(--accent);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.next-date-featured{
  position:relative;
  width:min(100%,1000px);
  min-height:460px;
  margin:0 auto;
  overflow:hidden;

  display:flex;
  align-items:flex-end;

  border-radius:28px;

  background:
    url("/images/Doodproject_22.jpg")
    center 35% / cover no-repeat;

  border:1px solid rgba(255,255,255,.15);

  box-shadow:
    0 25px 60px rgba(0,0,0,.55);
}

.next-date-overlay{
  position:absolute;
  inset:0;
  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.58) 50%,
      rgba(0,0,0,.15) 100%
    );
}

.next-date-content{
  position:relative;
  z-index:2;

  width:100%;
  padding:55px;

  display:flex;
  align-items:flex-end;
  gap:45px;
}

.next-date-calendar{
  flex:0 0 auto;
  min-width:150px;
  padding:22px 25px;

  text-align:center;

  background:rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,.20);
  border-radius:20px;
}

.next-date-day{
  font-family:'Cormorant Garamond',serif;
  font-size:82px;
  line-height:.8;
  font-weight:600;
  color:#fff;
}

.next-date-month{
  margin-top:15px;

  color:var(--accent);

  font-size:22px;
  font-weight:700;
  letter-spacing:.15em;
}

.next-date-year{
  margin-top:5px;

  color:rgba(255,255,255,.75);

  font-size:14px;
  letter-spacing:.12em;
}

.next-date-info{
  text-align:left;
}

.next-date-kicker{
  margin-bottom:10px;

  color:var(--accent);

  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
}

.next-date-venue{
  margin:0;

  font-family:'Cormorant Garamond',serif;
  font-size:clamp(48px,6vw,76px);
  line-height:1;
  font-weight:600;

  color:#fff;

  text-shadow:
    0 4px 15px rgba(0,0,0,.65);
}

.next-date-place{
  margin-top:15px;

  color:rgba(255,255,255,.88);

  font-size:20px;
}

.next-date-place .fa{
  margin-right:7px;
  color:var(--accent);
}

.next-date-actions{
  margin-top:28px;
  display:flex;
  justify-content:flex-start;
}

@media(max-width:768px){

  .next-date{
    padding:45px 0;
  }

  .next-date-featured{
    min-height:520px;
    background-position:center;
  }

  .next-date-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.50) 40%,
        rgba(0,0,0,.94) 100%
      );
  }

  .next-date-content{
    padding:28px 24px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    gap:25px;
  }

  .next-date-calendar{
    min-width:110px;
    padding:15px 18px;
  }

  .next-date-day{
    font-size:58px;
  }

  .next-date-month{
    margin-top:10px;
    font-size:17px;
  }

  .next-date-venue{
    font-size:48px;
  }

  .next-date-place{
    font-size:17px;
  }
}

/* -------- Grille des dates suivantes -------- */

.upcoming-list{
  padding:0 0 clamp(70px,9vw,110px);
}

.upcoming-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;
  max-width:1000px;
  margin:0 auto;
}

.upcoming-card{
  display:flex;
  align-items:center;
  gap:22px;
  padding:24px 26px;
  border-radius:20px;
  text-align:left;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  transition:.3s;
}

.upcoming-card:hover{
  transform:translateY(-3px);
  border-color:rgba(226,121,4,.6);
  background:rgba(255,255,255,.07);
}

.upcoming-date-block{
  flex:0 0 auto;
  width:74px;
  text-align:center;
  padding:12px 0;
  border-radius:14px;
  background:rgba(226,121,4,.12);
  border:1px solid rgba(226,121,4,.35);
}

.upcoming-date-block .day{
  font-family:'Cormorant Garamond',serif;
  font-size:26px;
  font-weight:700;
  line-height:1;
  color:#fff;
}

.upcoming-date-block .month{
  margin-top:2px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#E27904;
}

.upcoming-info h3{
  margin:0 0 4px;
  text-align:left;
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
  font-weight:600;
}

.upcoming-info p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:15px;
}


@media(max-width:600px){
  .upcoming-card{
    flex-direction:row;
  }
}
/* =========================
   SOUS-MENUS (ESPACE PRIVÉ)
   -------------------------
   À coller À LA FIN de styles.css : ces règles doivent passer APRÈS
   le media query mobile existant (@media(max-width:768px)) pour
   pouvoir le corriger, sinon les sous-menus restent en position
   absolue sur téléphone.
========================= */

/* Repère visuel sur les entrées qui ouvrent un sous-menu */
.menu .has-sub > a::after{
  content:"▾";
  margin-left:7px;
  font-size:10px;
  opacity:.85;
}

/* Le sous-menu se positionne par rapport à son entrée parente */
.menu ul > li{
  position:relative;
}

.menu ul > li > ul{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  z-index:1200;

  min-width:235px;
  margin:0;
  padding:8px 0;

  display:none;
  flex-direction:column;
  gap:0;

  background:rgba(5,5,5,.98);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(226,121,4,.35);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

/* Ouverture au survol ET au clavier (navigation au Tab) */
.menu ul > li:hover > ul,
.menu ul > li:focus-within > ul{
  display:flex;
}

.menu ul > li > ul > li{
  width:100%;
  margin:0;
  border-radius:10px;
}

.menu ul > li > ul > li > a{
  justify-content:flex-start;
  padding:11px 18px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  white-space:nowrap;
}

.menu ul > li > ul > li > a:hover{
  background:rgba(226,121,4,.14);
  color:var(--accent);
}

.menu ul > li > ul > li > a small{
  margin-left:5px;
  opacity:.65;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
}

/* -------- Mobile : le menu est déjà déplié en colonne --------
   Les sous-menus se placent dans le flux (et restent ouverts,
   puisqu'il n'y a pas de survol au doigt). */
@media(max-width:768px){

  .menu ul > li > ul{
    position:static;
    transform:none;
    display:flex;
    min-width:0;
    width:100%;
    padding:0;
    background:rgba(0,0,0,.45);
    border:0;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .menu ul > li > ul > li{
    border-top:1px solid rgba(255,255,255,.18);
    border-radius:0;
  }

  .menu ul > li > ul > li > a{
    padding-left:34px;
    font-size:11px;
  }

  .menu .has-sub > a::after{
    display:none;
  }
}

/* =========================
   ESPACE PRIVÉ (ADMIN)
   -------------------------
   À coller à la fin de styles.css, après le bloc "SOUS-MENUS".

   Tout est portée par <body class="admin"> : ces règles ne
   s'appliquent QUE sur les pages d'administration et ne touchent
   jamais le site public, même si les noms de classes (.panel, .btn,
   .message, .badge...) sont volontairement génériques.

   Pages concernées : gerer_concerts.php, et à terme dashboard.php
   et liste_contacts.php.
========================= */

body.admin{
  padding:0;
  background:#f4f6f9;
  color:#222;
  font-family:'Inter',Arial,sans-serif;
}

/* Le site public centre les titres et leur ajoute une barre orange :
   inadapté à des panneaux d'administration. */
.admin h1,
.admin h2,
.admin h3{
  margin-top:0;
  text-align:left;
  font-family:'Inter',Arial,sans-serif;
  color:#333;
}

.admin h2::after{
  display:none;
}

.admin p{
  margin-top:0;
  color:#333;
  font-size:15px;
  line-height:1.55;
}

/* styles.css met img{width:100%} pour les visuels du site */
.admin .admin-container img{
  width:auto;
}

.admin-container{
  width:min(1100px,calc(100% - 40px));
  margin:30px auto;
}

/* -------- Panneaux -------- */

.admin .panel{
  padding:25px;
  margin-bottom:30px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.admin .panel h2{
  font-size:20px;
}

/* -------- Formulaire en grille -------- */

.admin .form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
}

.admin .form-field{
  display:flex;
  flex-direction:column;
}

.admin .form-field.span-2{
  grid-column:span 2;
}

.admin .form-field label{
  margin-bottom:4px;
  color:#444;
  font-size:13px;
  font-weight:700;
}

.admin .form-field .required{
  color:#dc3545;
}

.admin .form-field input,
.admin .form-field select{
  padding:9px;
  background:#fff;
  color:#222;
  border:1px solid #ccc;
  border-radius:6px;
  font-family:inherit;
  font-size:14px;
}

.admin .form-field input:focus,
.admin .form-field select:focus{
  outline:none;
  border-color:#007bff;
  box-shadow:0 0 0 2px rgba(0,123,255,.15);
}

.admin .form-field input.is-invalid,
.admin .form-field select.is-invalid{
  border-color:#dc3545;
}

.admin .form-field .field-error{
  margin-top:3px;
  color:#dc3545;
  font-size:12px;
}

.admin .form-section-title{
  grid-column:1 / -1;
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px solid #eee;
  color:#007bff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.admin .form-actions{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* -------- Boutons -------- */

.admin .btn{
  display:inline-flex;
  align-items:center;
  padding:10px 24px;
  background:#007bff;
  color:#fff;
  border:none;
  border-radius:25px;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  text-decoration:none;
  transition:background-color .3s ease,transform .2s ease;
}

.admin .btn:hover{
  background:#0056b3;
  transform:scale(1.03);
}

.admin .btn-secondary{ background:#6c757d; }
.admin .btn-secondary:hover{ background:#5a6268; }

.admin .btn-danger{ background:#dc3545; }
.admin .btn-danger:hover{ background:#bb2d3b; }

.admin .btn-small{
  padding:5px 14px;
  font-size:13px;
}

/* -------- Messages -------- */

.admin .message{
  margin-bottom:20px;
  padding:12px;
  border-radius:8px;
  font-weight:700;
  text-align:center;
}

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

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

/* -------- Onglets -------- */

.admin .tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:15px;
}

.admin .tab{
  padding:8px 20px;
  background:#e9ecef;
  color:#333;
  border-radius:20px;
  font-size:14px;
  text-decoration:none;
}

.admin .tab.active{
  background:#007bff;
  color:#fff;
  font-weight:700;
}

/* -------- Tableaux -------- */

.admin .table-wrapper{
  overflow-x:auto;
}

.admin table.concerts-table{
  width:100%;
  min-width:850px;
  border-collapse:collapse;
}

.admin table.concerts-table th{
  padding:8px;
  background:#007bff;
  color:#fff;
  font-size:.9rem;
  text-align:left;
  white-space:nowrap;
}

.admin table.concerts-table td{
  padding:7px 8px;
  border:1px solid #e3e3e3;
  color:#222;
  font-size:.9rem;
  white-space:nowrap;
}

/* -------- Badges d'état -------- */

.admin .badge{
  display:inline-block;
  padding:2px 10px;
  border-radius:12px;
  font-size:.8rem;
  font-weight:700;
}

.admin .badge-a-confirmer{ background:#ffe4b3; color:#8a5300; }
.admin .badge-confirme   { background:#d9f2d9; color:#1b5e20; }
.admin .badge-annule     { background:#f5c6cb; color:#721c24; }
.admin .badge-termine    { background:#e2e3e5; color:#41464b; }

.admin .empty{
  padding:25px;
  color:#666;
  font-style:italic;
  text-align:center;
}

@media(max-width:700px){
  .admin .form-field.span-2{
    grid-column:span 1;
  }
}

/* =========================
   ESPACE PRIVÉ — TABLEAU DE BORD
   -------------------------
   À coller à la fin de styles.css, après le bloc
   "ESPACE PRIVÉ (ADMIN)" dont il complète les composants.

   Toujours porté par <body class="admin"> : aucun effet sur le
   site public.
========================= */

.dashboard-container{
  width:min(1100px,calc(100% - 40px));
  margin:30px auto;
  padding:20px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}

.admin .dashboard-container > h2{
  margin-bottom:24px;
  text-align:center;
  font-size:26px;
}

.admin .dashboard-section{
  margin-bottom:40px;
  padding-bottom:30px;
  border-bottom:1px solid #eee;
}

.admin .dashboard-section:last-child{
  margin-bottom:0;
  border-bottom:none;
}

.admin .dashboard-section h3{
  margin-bottom:15px;
  color:#333;
  font-size:18px;
}

/* -------- Bandeau de filtre -------- */

.admin .filter-panel{
  margin-bottom:30px;
  padding:15px;
  background:#eef4ff;
  border:1px solid #cfe0ff;
  border-radius:10px;
}

.admin .filter-panel h3{
  margin-bottom:10px;
}

.admin .filter-hint{
  margin:0 0 10px;
  color:#555;
  font-size:13px;
}

.admin .filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:0;
}

.admin .filter-row input{
  flex:1 1 200px;
  padding:8px;
  border:1px solid #ccc;
  border-radius:5px;
  font-family:inherit;
  font-size:14px;
}

.admin .search-button{
  display:inline-flex;
  align-items:center;
  padding:8px 20px;
  background:#007bff;
  color:#fff;
  border:none;
  border-radius:25px;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  text-decoration:none;
  transition:background-color .3s ease,transform .2s ease;
}

.admin .search-button:hover{
  background:#0056b3;
  transform:scale(1.05);
}

/* -------- Cartes indicateurs -------- */

.admin .row-indicators{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:20px;
}

.admin .card{
  flex:1 1 45%;
  min-height:100px;
  padding:15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:10px;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
  text-align:center;
}

.admin .card.card-full{
  flex:1 1 100%;
}

.admin .card h4,
.admin .card h2{
  margin:0;
  color:#fff;
  text-align:center;
}

.admin .card h4{
  margin-bottom:6px;
  font-size:16px;
  font-weight:600;
}

.admin .card h2{
  font-size:34px;
  font-weight:700;
}

/* Variantes de couleur (remplacent les classes Bootstrap) */
.admin .card-primary       { background:#007bff; }
.admin .card-dark          { background:#212529; }
.admin .card-grey          { background:#6c757d; }
.admin .card-devis-demande { background:#7b52c7; }
.admin .card-devis-envoye  { background:#17a2b8; }

/* -------- Graphiques --------
   Le conteneur est en colonne : le titre prend sa place, le canvas
   occupe tout le reste. Plus besoin de max-height au pixel près,
   les libellés d'axe ne sont donc jamais rognés. */

.admin .chart-container{
  display:flex;
  flex-direction:column;
  margin-bottom:20px;
  padding:20px;
  background:#fff;
  border:2px solid #ddd;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  text-align:center;
}

.admin .chart-container h5{
  flex:0 0 auto;
  margin:0 0 10px;
  color:#333;
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
}

.admin .chart-canvas-wrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
}

.admin .chart-canvas-wrap canvas{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
}

/* Hauteurs des différents graphiques */
.admin .chart-etat  { height:340px; }
.admin .chart-devis { height:380px; }
.admin .chart-region{ height:400px; }
.admin .chart-tall  { height:560px; }

/* Habillages colorés */
.admin .chart-bar       { background:#fff3e0; border-color:#FF9800; }
.admin .chart-horizontal{ background:#e8f5e9; border-color:#4CAF50; }
.admin .chart-devis     { background:#f3edfb; border-color:#7b52c7; }

/* -------- Tableau des devis (lecture seule) -------- */

.admin .devis-table-container{
  width:100%;
  max-height:500px;
  overflow:auto;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
}

.admin table.devis-table{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
}

.admin table.devis-table thead th{
  position:sticky;
  top:0;
  z-index:5;
  padding:8px;
  background:#7b52c7;
  color:#fff;
  font-size:.9rem;
  text-align:left;
  white-space:nowrap;
}

.admin table.devis-table td{
  padding:6px 8px;
  border:1px solid #e3e3e3;
  color:#222;
  font-size:.9rem;
  white-space:nowrap;
}

/* Séparateur visuel entre deux régions (la liste est triée par région) */
.admin table.devis-table tr.region-start td{
  border-top:2px solid #7b52c7;
}

.admin table.devis-table td.region-cell{
  color:#4b2e83;
  font-weight:700;
}

.admin .badge-etat{
  display:inline-block;
  padding:2px 10px;
  border-radius:12px;
  font-size:.8rem;
  font-weight:700;
  white-space:nowrap;
}

.admin .badge-demande{ background:#e5d9f7; color:#4b2e83; }
.admin .badge-envoye { background:#d0f0f0; color:#006064; }

.admin .devis-empty{
  padding:20px;
  color:#666;
  font-style:italic;
  text-align:center;
}

.admin .devis-count{
  margin:20px 0 10px;
  color:#333;
  font-size:16px;
  font-weight:700;
}

@media(max-width:600px){

  .dashboard-container{
    width:calc(100% - 20px);
    margin:10px auto;
    padding:12px;
  }

  .admin .card{
    flex:1 1 100%;
  }

  .admin .chart-container{
    padding:10px;
  }
}

/* =========================
   ESPACE PRIVÉ — MODÈLES DE MAILS
   -------------------------
   À coller à la fin de styles.css, après le bloc
   "ESPACE PRIVÉ (ADMIN)" dont il réutilise .btn et .message.

   Toujours porté par <body class="admin">.
========================= */

.admin .top-actions{
  margin:0 0 20px;
}

/* Encadré jaune rappelant les variables disponibles */
.admin .intro{
  margin-bottom:20px;
  padding:12px 16px;
  background:#fff3cd;
  color:#664d03;
  border:1px solid #ffe69c;
  border-radius:8px;
  font-size:.9rem;
  line-height:1.6;
}

.admin .intro code{
  padding:1px 6px;
  background:#fff;
  border-radius:4px;
  font-size:.9em;
}

/* -------- Une carte par modèle de mail -------- */

.admin .template-card{
  margin-bottom:20px;
  padding:20px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}

.admin .template-card h2{
  margin-top:0;
  color:#007bff;
  font-size:1.1rem;
}

.admin .template-card label{
  display:block;
  margin:14px 0 4px;
  color:#444;
  font-size:13px;
  font-weight:700;
}

.admin .template-card input[type="text"],
.admin .template-card textarea{
  width:100%;
  padding:9px;
  background:#fff;
  color:#222;
  border:1px solid #ccc;
  border-radius:6px;
  font-family:inherit;
  font-size:14px;
}

.admin .template-card input[type="text"]:focus,
.admin .template-card textarea:focus{
  outline:none;
  border-color:#007bff;
  box-shadow:0 0 0 2px rgba(0,123,255,.15);
}

.admin .template-card textarea{
  min-height:180px;
  line-height:1.55;
  resize:vertical;
}

/* -------- Barre d'enregistrement -------- */

.admin .save-row{
  margin:25px 0 40px;
  text-align:center;
}

.admin .btn-success{
  background:#28a745;
}

.admin .btn-success:hover{
  background:#1e7e34;
}

/* =========================
   ESPACE PRIVÉ — TABLEAUX DE DONNÉES
   -------------------------
   À coller à la fin de styles.css, après le bloc
   "ESPACE PRIVÉ (ADMIN)".

   .data-table est générique : réutilisable pour tout tableau de
   consultation de l'espace privé (historique des devis, et autres
   listes à venir).
========================= */

/* -------- Barre de recherche -------- */

.admin .search-bar{
  margin-bottom:15px;
  text-align:center;
}

.admin .search-bar input[type="text"]{
  width:min(400px,100%);
  padding:10px 14px;
  background:#fff;
  color:#222;
  border:1px solid #ccc;
  border-radius:25px;
  font-family:inherit;
  font-size:14px;
}

.admin .search-bar input[type="text"]:focus{
  outline:none;
  border-color:#007bff;
  box-shadow:0 0 0 2px rgba(0,123,255,.15);
}

/* -------- Tableau de données -------- */

.admin .table-wrapper{
  overflow-x:auto;
}

.admin table.data-table{
  width:100%;
  min-width:700px;
  border-collapse:collapse;
}

.admin table.data-table th{
  position:sticky;
  top:0;
  z-index:5;
  padding:10px;
  background:#007bff;
  color:#fff;
  font-size:.9rem;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}

.admin table.data-table th:hover{
  background:#0056b3;
}

.admin table.data-table td{
  padding:9px 10px;
  border:1px solid #e3e3e3;
  color:#222;
  font-size:.92rem;
}

.admin table.data-table tbody tr:nth-child(even){
  background:#f6f8fa;
}

/* Colonnes de montants alignées à droite */
.admin table.data-table td.num,
.admin table.data-table th.num{
  text-align:right;
  white-space:nowrap;
}

/* Ligne cliquable (ouvre le détail) */
.admin table.data-table tbody tr.clickable{
  cursor:pointer;
  transition:background-color .15s ease;
}

.admin table.data-table tbody tr.clickable:hover{
  background:#e7f1ff;
}

/* Flèche de tri sur la colonne active */
.admin table.data-table th .sort-arrow{
  margin-left:5px;
  opacity:.55;
  font-size:.8em;
}

.admin table.data-table th.sorted .sort-arrow{
  opacity:1;
}

/* Ligne de totaux en pied de tableau */
.admin table.data-table tfoot td{
  background:#eef4ff;
  font-weight:700;
}

/* =========================
   ESPACE PRIVÉ — FENÊTRE MODALE
   -------------------------
   À coller à la fin de styles.css, après les blocs
   "ESPACE PRIVÉ (ADMIN)" et "TABLEAUX DE DONNÉES".
========================= */

.admin .modal{
  display:none;            /* masquée par défaut, ouverte en JS */
  position:fixed;
  inset:0;
  z-index:2000;
  padding:20px;
  overflow:auto;
  background:rgba(15,20,30,.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.admin .modal.open{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.admin .modal-content{
  width:min(560px,100%);
  margin-top:6vh;
  padding:25px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 25px 60px rgba(0,0,0,.45);
}

.admin .modal-content h2{
  margin:0 0 5px;
  font-size:20px;
}

.admin .modal-hint{
  margin-bottom:18px;
  color:#666;
  font-size:13px;
}

.admin .modal-close{
  position:absolute;
  top:18px;
  right:26px;
  color:#fff;
  font-size:38px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  background:none;
  border:none;
}

.admin .modal-close:hover{
  color:#f44336;
}

/* Tableau de consultation sans tri : le curseur ne doit pas laisser
   croire que les en-têtes sont cliquables. */
.admin table.data-table.no-sort th{
  cursor:default;
}

.admin table.data-table.no-sort th:hover{
  background:#007bff;
}

/* Lien long : on autorise le retour à la ligne pour ne pas faire
   déborder le tableau. */
.admin table.data-table td.cell-link{
  max-width:420px;
  white-space:normal;
  word-break:break-all;
}

.admin table.data-table td a{
  color:#0066cc;
}

/* Bandeau de catégorie séparant les groupes de liens */
.admin table.data-table tr.cat-start td{
  border-top:2px solid #007bff;
}

.admin table.data-table td.cat-cell{
  color:#0d4a8a;
  font-weight:700;
  white-space:nowrap;
}

/* =========================
   ESPACE PRIVÉ — LISTE DES CONTACTS
   -------------------------
   À coller dans styles.css APRÈS le bloc "ESPACE PRIVÉ (ADMIN)" et
   AVANT le bloc "CORRECTIFS" (qui doit rester le dernier du fichier).

   Toujours porté par <body class="admin">.

   ATTENTION : dans l'ancien <style> de la page, les règles `th, td`,
   `table` et `input[type="text"]` n'étaient pas restreintes au
   tableau. Transposées telles quelles dans styles.css, elles
   auraient repeint TOUS les tableaux et TOUS les champs texte du
   site. Elles sont donc ici limitées à .contacts-table.
========================= */

/* Cette page a besoin de plus de largeur que les autres : 22 colonnes. */
.contacts-container{
  width:min(1600px,calc(100% - 30px));
  margin:25px auto;
}

/* -------- Formulaire de recherche -------- */

.admin .search-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.admin .search-row input,
.admin .search-row select{
  flex:1 1 130px;
  min-width:0;
  padding:8px;
  background:#fff;
  color:#222;
  border:1px solid #ccc;
  border-radius:5px;
  font-family:inherit;
  font-size:14px;
}

.admin .button-container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:10px 0;
}

.admin .results-info{
  margin-bottom:10px;
  color:#555;
  font-size:14px;
  text-align:right;
}

/* -------- Conteneur du tableau --------
   max-height + overflow sur CE conteneur : c'est lui qui défile, ce
   qui est la condition pour que l'en-tête collant fonctionne. */

.admin .table-container{
  position:relative;
  width:100%;
  max-height:min(600px,70vh);
  overflow:auto;
  padding:0;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}

.admin table.contacts-table{
  width:100%;
  min-width:1600px;
  border-collapse:separate;   /* separate : indispensable pour que les
                                 bordures ne disparaissent pas sous les
                                 cellules collantes */
  border-spacing:0;
}

.admin table.contacts-table th,
.admin table.contacts-table td{
  padding:5px 7px;
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
  color:#222;
  font-size:.88rem;
  text-align:left;
  white-space:nowrap;
}

/* En-tête collant en haut */
.admin table.contacts-table thead th{
  position:sticky;
  top:0;
  z-index:10;
  background:#007bff;
  color:#fff;
  font-weight:700;
}

.admin table.contacts-table thead th a{
  display:block;
  color:#fff;
  text-decoration:none;
}

.admin table.contacts-table thead th a:hover{
  text-decoration:underline;
}

.admin table.contacts-table tbody td a{
  color:#0066cc;
}

.admin table.contacts-table tbody input[type="email"],
.admin table.contacts-table tbody input[type="text"]{
  width:190px;
  padding:4px 6px;
  background:#fff;
  color:#222;
  border:1px solid #ccc;
  border-radius:4px;
  font-family:inherit;
  font-size:.85rem;
}

.admin .etat-select{
  max-width:150px;
  padding:4px;
  background:#fff;
  color:#222;
  border:1px solid #ccc;
  border-radius:5px;
  font-family:inherit;
  font-size:.85rem;
}

/* Notes : texte tronqué, contenu complet dans l'info-bulle (title) */
.admin .notes-cell{
  display:inline-block;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
  cursor:help;
}

/* -------- Colonne "choix" figée à gauche --------
   Empilement : coin haut-gauche (30) > en-tête (10) > colonne figée (8)
   > cellules normales. */

.admin .col-fixed{
  position:sticky;
  left:0;
  z-index:8;
  background:#fff;
  text-align:center;
}

.admin thead .col-fixed{
  z-index:30;
  background:#007bff;
}

/* -------- Couleurs de ligne par état --------
   La cellule figée doit reprendre la couleur de sa ligne, sinon le
   contenu qui défile dessous transparaîtrait derrière elle. */

.admin tr.grisee             td{ background:#d9d9d9; color:#666; }
.admin tr.etat-devis-demande td{ background:#e5d9f7; color:#4b2e83; }
.admin tr.etat-devis-envoye  td{ background:#d0f0f0; color:#006064; }
.admin tr.etat-contacte      td{ background:#d9f2d9; color:#1b5e20; }
.admin tr.etat-relance1      td{ background:#ffe4b3; color:#8a5300; }
.admin tr.etat-relance2      td{ background:#f5c6cb; color:#721c24; }
.admin tr.etat-valide        td{ background:#cfe2ff; color:#084298; }

/* Les champs de saisie restent lisibles sur fond coloré */
.admin table.contacts-table tbody tr td input,
.admin table.contacts-table tbody tr td select{
  background:#fff;
  color:#222;
}

/* -------- Boutons d'action (démarchage / relances) -------- */

.admin .demarche{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px;
  margin-top:18px;
}

.admin .btn-comite     { background:#008020; }
.admin .btn-comite:hover     { background:#0d7326; }

.admin .btn-bars       { background:#6f42c1; }
.admin .btn-bars:hover       { background:#5a32a3; }

.admin .btn-demarchage { background:#ff9800; }
.admin .btn-demarchage:hover { background:#e68900; }

.admin .btn-relance1   { background:#fd7e14; }
.admin .btn-relance1:hover   { background:#e8590c; }

.admin .btn-relance2   { background:#dc3545; }
.admin .btn-relance2:hover   { background:#bb2d3b; }

.admin .btn-refus      { background:#6c757d; }
.admin .btn-refus:hover      { background:#5a6268; }

.admin .btn-valide     { background:#0d6efd; }
.admin .btn-valide:hover     { background:#0b5ed7; }

.admin .btn-templates  { background:#17a2b8; }
.admin .btn-templates:hover  { background:#12828f; }

.admin .btn-enregistrer{ background:#28a745; }
.admin .btn-enregistrer:hover{ background:#1e7e34; }

/* -------- Pagination -------- */

.admin .pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:20px 0 40px;
  color:#555;
  font-size:14px;
}

.admin .pagination a{
  padding:8px 16px;
  background:#007bff;
  color:#fff;
  border-radius:20px;
  text-decoration:none;
  transition:background-color .3s ease;
}

.admin .pagination a:hover{
  background:#0056b3;
}

/* -------- Responsive -------- */

@media(max-width:900px){

  .admin .search-row input,
  .admin .search-row select{
    flex:1 1 45%;
  }

  .admin .demarche .btn{
    flex:1 1 45%;
    justify-content:center;
  }
}

@media(max-width:600px){

  .contacts-container{
    width:calc(100% - 16px);
    margin:12px auto;
  }

  .admin .search-row{
    flex-direction:column;
  }

  .admin .search-row input,
  .admin .search-row select{
    flex:1 1 auto;
    width:100%;
  }

  .admin .button-container,
  .admin .demarche{
    flex-direction:column;
  }

  .admin .button-container .btn,
  .admin .demarche .btn{
    width:100%;
    justify-content:center;
  }

  .admin .results-info{
    text-align:center;
  }

  /* Le tableau reste défilable horizontalement plutôt que transformé
     en cartes : sinon on perdrait le tri par colonne et le champ mail
     éditable. */
  .admin .table-container{
    max-height:70vh;
    border-radius:6px;
  }

  .admin table.contacts-table th,
  .admin table.contacts-table td{
    padding:6px;
    font-size:.82rem;
  }
}

/* =========================
   CORRECTIFS (audit)
   -------------------------
   À coller À LA TOUTE FIN de styles.css.

   Ces règles corrigent des points relevés dans les blocs précédents.
   Elles sont volontairement placées en dernier : à spécificité égale,
   c'est la dernière règle déclarée qui gagne, donc elles écrasent les
   valeurs fautives sans qu'il soit nécessaire d'aller les modifier
   une par une plus haut dans le fichier.
========================= */

/* -------------------------------------------------------------
   1. ANCRES MASQUÉES SOUS LE BANDEAU  (site public)
   -------------------------------------------------------------
   .bande est en position:sticky sur 88px de haut, et html a
   scroll-behavior:smooth. Résultat : un clic sur "Projet", "Vidéos"
   ou "Contact" amène bien la section en haut de la fenêtre... mais
   son titre se retrouve caché DERRIÈRE le bandeau.
   scroll-margin-top réserve la hauteur du bandeau.
   ------------------------------------------------------------- */

:target,
[id]{
  scroll-margin-top:100px;
}

@media(max-width:768px){
  :target,
  [id]{
    scroll-margin-top:80px;
  }
}

/* -------------------------------------------------------------
   2. EN-TÊTES DE TABLEAU COLLANTS QUI NE COLLENT PAS  (admin)
   -------------------------------------------------------------
   .data-table th est en position:sticky top:0, mais .table-wrapper
   n'a que overflow-x:auto et AUCUNE hauteur maximale : il ne défile
   donc jamais verticalement, et le sticky n'a aucun effet. Pire, en
   défilant la page les en-têtes passent sous le bandeau (z-index 1000
   contre 5).
   -> on donne une hauteur max au conteneur : les en-têtes restent
      visibles pendant le défilement du tableau lui-même.
   ------------------------------------------------------------- */

.admin .table-wrapper{
  max-height:70vh;
  overflow:auto;
}

.admin table.data-table th,
.admin table.concerts-table th{
  position:sticky;
  top:0;
  z-index:6;
}

/* -------------------------------------------------------------
   3. IMAGES ÉTIRÉES DANS L'ESPACE PRIVÉ
   -------------------------------------------------------------
   styles.css impose img{width:100%} pour les visuels du site. Le
   correctif existant ne couvrait que .admin-container : une image
   placée dans .dashboard-container, dans une modale ou dans un
   tableau s'affichait donc en pleine largeur.
   (Le logo du menu garde sa taille grâce à son !important.)
   ------------------------------------------------------------- */

body.admin img{
  width:auto;
  max-width:100%;
}

/* -------------------------------------------------------------
   4. TITRES H1 SURDIMENSIONNÉS DANS L'ESPACE PRIVÉ
   -------------------------------------------------------------
   Le bloc .admin redéfinit la police et l'alignement des titres,
   mais pas leur taille : les h1 gardaient le clamp(34px,5vw,50px)
   du site vitrine, soit 50px au-dessus d'un formulaire.
   ------------------------------------------------------------- */

.admin h1{
  margin-bottom:20px;
  font-size:26px;
  font-weight:700;
  letter-spacing:0;
}

.admin h2{
  margin-bottom:18px;
  font-size:20px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.3;
}

.admin h3{
  font-size:17px;
  font-weight:700;
}

/* -------------------------------------------------------------
   5. BOUTONS D'ALIGNEMENT INÉGAL
   -------------------------------------------------------------
   .btn est utilisé indifféremment sur <a> et sur <button>. Les deux
   n'ont pas la même hauteur de ligne par défaut : côte à côte dans
   .form-actions, ils ne s'alignaient pas exactement.
   ------------------------------------------------------------- */

.admin .btn{
  justify-content:center;
  line-height:1.4;
  white-space:nowrap;
}

/* -------------------------------------------------------------
   6. ZOOM AUTOMATIQUE SUR IPHONE
   -------------------------------------------------------------
   Safari iOS zoome sur tout champ dont la police fait moins de 16px
   au moment de la mise au point, ce qui décale toute la page. Les
   champs de l'espace privé sont à 14px.
   ------------------------------------------------------------- */

@media(max-width:600px){
  .admin input,
  .admin select,
  .admin textarea{
    font-size:16px;
  }
}

/* -------------------------------------------------------------
   7. MODALE TROP HAUTE SUR PETIT ÉCRAN
   -------------------------------------------------------------
   .modal-content n'a pas de hauteur maximale : un formulaire long
   dépasse sous le bas de l'écran, et le bouton de validation devient
   inatteignable sur mobile.
   ------------------------------------------------------------- */

.admin .modal-content{
  max-height:86vh;
  overflow-y:auto;
}

@media(max-width:600px){
  .admin .modal-content{
    margin-top:2vh;
    padding:18px;
  }
}

/* -------------------------------------------------------------
   8. ACCESSIBILITÉ : VISIBILITÉ DU FOCUS CLAVIER
   -------------------------------------------------------------
   Plusieurs règles font outline:none sans rien mettre à la place.
   :focus-visible ne se déclenche qu'à la navigation au clavier, la
   souris n'est donc pas affectée.
   ------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

.admin a:focus-visible,
.admin button:focus-visible{
  outline-color:#007bff;
}

/* -------------------------------------------------------------
   9. ANIMATIONS : RESPECT DES PRÉFÉRENCES SYSTÈME
   -------------------------------------------------------------
   Certaines personnes désactivent les animations pour raison
   médicale (vertiges, migraines). Le site en contient beaucoup
   (transform:scale au survol, défilement doux, transitions .3s).
   ------------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  .video-card:hover,
  .upcoming-card:hover,
  .concert-history-card:hover,
  .admin .btn:hover,
  .admin .search-button:hover,
  .header-social a:hover,
  .press-btn:hover,
  #btn:hover{
    transform:none;
  }
}

/* -------------------------------------------------------------
   10. IMPRESSION  (devis, récapitulatifs, listes)
   -------------------------------------------------------------
   Sans feuille d'impression, l'espace privé sort avec le bandeau
   noir, le menu, les ombres et les fonds colorés — beaucoup d'encre
   pour un devis à faire signer.
   ------------------------------------------------------------- */

@media print{

  body.admin{
    background:#fff;
    color:#000;
  }

  .bande,
  .top-actions,
  .search-bar,
  .form-actions,
  .save-row,
  .tabs,
  .filter-panel,
  .modal,
  .btn{
    display:none !important;
  }

  .admin .panel,
  .admin .template-card,
  .dashboard-container{
    margin:0 0 15px;
    padding:0;
    box-shadow:none;
    border-radius:0;
    break-inside:avoid;
  }

  .admin .table-wrapper{
    max-height:none;
    overflow:visible;
  }

  .admin table.data-table th,
  .admin table.concerts-table th{
    position:static;
    background:#eee !important;
    color:#000 !important;
  }

  .admin table.data-table tbody tr:nth-child(even){
    background:#fff;
  }

  /* Afficher l'adresse réelle des liens à l'impression */
  .admin table.data-table td a::after{
    content:" (" attr(href) ")";
    font-size:.85em;
    word-break:break-all;
  }
}