/* ================================
   Auto Moto École Clocheworld
   Styles personnalisés
================================ */

/* Corps */
/*body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #333;
}

/* Logo
header img {
  max-height: 60px;
}*/

/* Texte principal 
#headline {
  animation: fadeSlideUp 1s ease forwards;
}

/* Sous-titre 
#subheadline {
  animation: fadeSlideUp 1.5s ease forwards;
}

/* Annonce 
#announcement span {
  display: block;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 1s ease forwards;
}

#announcement span:nth-child(1) {
  animation-delay: 2s;
}

#announcement span:nth-child(2) {
  animation-delay: 3s;
}

/* Animation clé
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}*/

/* ================================
   Auto Moto École Clocheworld
   Styles site officiel
================================ */



:root{
  --beige-dore: #e2ba7c;
  --blanc-casse: #fefefd;
  --rouge-profond: #b1212a;
  --turquoise: #02adee;
  --bleu-marine: #2b3a91;
  --brun-dore: #b18555;
  --noir: #000;
  --gris: #6d6d6d;
  --max-w: 1200px;
  --radius: 7px;
  --tran: 300ms;
  --glass-alpha: 0.6;
}

header img {
  max-height: 60px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:var(--blanc-casse);
  color:var(--noir);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
  transition:background var(--tran);
  overflow-x:hidden;
}
p1 { font-size:30px;
    font-weight: bold;
}

/* container */
.container{max-width:var(--max-w); margin:0 auto; padding:0px}

/* ========== TOPBAR (glass) ========= */
.topbar{
  position:sticky; top:0px; z-index:90;
  display:flex; flex-direction: column; align-items:center;justify-content:center;
  padding:10px 0;
}
.nav{
  width:100%; max-width:var(--max-w); display:flex;  flex-direction: column; align-items:center; gap:16px;
  background:rgba(255,255,255,0.5); border-radius:10px; padding:10px;
  backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px rgba(43,58,145,0.06);
  align-items:center;
}
.brand img{height:auto; width:95%; max-width:var(--max-w); display:block}

/* main nav */
.main-nav{margin-left:12px}
.menu{list-style:none; margin:20px; padding:0; display:flex; gap:10px; align-items:center}
.menu .nav-link{
  position:relative; display:inline-block; padding:8px 10px; color:var(--bleu-marine);
  text-decoration:none; font-weight:600; letter-spacing:0.2px; transition:all var(--tran) cubic-bezier(.2,.9,.2,1);
}
.menu .nav-link::after{
  content:""; position:absolute; left:8px; right:8px; bottom:2px; height:2px; background:transparent; border-radius:2px; transition:all var(--tran);
}
.menu .nav-link:hover{color:var(--rouge-profond)}
.menu .nav-link:hover::after{background:linear-gradient(90deg,var(--rouge-profond),var(--turquoise))}

/* dropdown */
.has-dropdown{position:relative}
.submenu{
  position:absolute; left:0; top:44px; background:var(--blanc-casse); padding:8px; border-radius:10px;
  box-shadow:0 12px 30px rgba(11,18,30,0.08); display:none; min-width:220px;
  transform-origin:top center; opacity:0; transform:translateY(-6px) scale(.98);
}
.has-dropdown:hover .submenu{display:block; opacity:1; transform:translateY(0) scale(1)}
.submenu li{padding:6px 8px}
.submenu a{color:var(--gris); display:block; border-radius:6px; padding:6px}
.submenu a:hover{background:var(--beige-dore); color:var(--noir)}

/* actions */
.actions{margin-left:auto; display:flex; align-items:center; gap:8px}
.lang .flag{background:transparent; border:0; cursor:pointer; font-size:20px; margin-left:2px}
.burger{display:none; background:transparent; border:0; font-size:22px; cursor:pointer}

/* ========== HERO ========== */
.hero{
  min-height:88vh; display:flex; align-items:center; justify-content:center; position:relative;
  background-size:cover; background-position:center;
  border-bottom-left-radius:24px; border-bottom-right-radius:24px;
}
.hero-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,18,30,0.48), rgba(11,18,30,0.28));
  border-bottom-left-radius:24px; border-bottom-right-radius:24px;
}
.hero-content{position:relative; z-index:2; text-align:center; color:var(--blanc-casse); padding:64px 20px}
.hero h1{font-size:48px; margin:0 0 12px; font-weight:800; letter-spacing:-0.6px}
.lead{font-size:30px; margin:0 0 20px; opacity:0.95}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn-primary{
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700; color:white;
  background:linear-gradient(90deg,var(--turquoise), var(--rouge-profond));
  box-shadow: 0 12px 30px rgba(2,173,238,0.12); text-decoration:none; transition:transform var(--tran);
}
.logo-cloche {
  width: 300px;         /* largeur fixe souhaitée */
  max-width: 100%;      /* s'adapte aux écrans plus petits */
  height: auto;         /* conserve les proportions */
  display: block;       /* supprime l'espace en dessous de l'image */
  margin: 16px 0;       /* espace autour du logo */
}
.about-left a {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}
.btn-primary:hover{transform:translateY(-4px)}
.btn-ghost{
  display:inline-block; padding:10px 16px; border-radius:10px; font-weight:700; color:var(--blanc-casse);
  border:1px solid rgba(255,255,255,0.18); background:transparent; text-decoration:none;
  transition:all var(--tran);
}
.btn-ghost:hover{background:rgba(255,255,255,0.03)}

/* ========== MAIN CARDS & LAYOUT ========== */
main{margin-top:28px; margin-bottom:28px}
.card{background:linear-gradient(180deg,#ffffff,#fbfbfb); border-radius:14px; padding:20px; box-shadow:0 10px 30px rgba(11,18,30,0.05); transition:transform var(--tran)}
.card:hover{transform:translateY(-6px)}
h2{font-weight:800; color:var(--bleu-marine); margin:0 0 10px}
.small{color: (--white); font-size:14px}

/* ABOUT */
.about{display:flex; gap:18px; align-items:center}
.about-left{flex:1}
.about-right{flex:1; border-radius:12px; overflow:hidden}
.about-right img{width:100%; height:100%; object-fit:cover; display:block}

/* GALLERY grid asymétrique */
.gallery-section{margin: 20px;}
.gallery-grid{margin-bottom: 40px; display:grid; gap:10px; grid-template-columns: 1.6fr 1fr; grid-auto-rows:160px; align-items:stretch}
.g-item{background-size:cover; background-position:center; border-radius:12px; overflow:hidden; transition:transform var(--tran) ease, box-shadow var(--tran)}
.g-item:hover{transform:scale(1.03)}
.g-large{grid-row: span 2;}
.g3-large{grid-row: span 3;}
/* TEAM */
.team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:12px}
.instructor{background:transparent; text-align:center; padding:8px; border-radius:12px}
.instructor .photo{position:relative; height:220px; border-radius:12px; overflow:hidden}
.instructor img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity var(--tran)}
.instructor .meta{padding:8px}

/* FOOTER */
.site-footer{background:var(--bleu-marine); color:var(--blanc-casse); padding:40px 0;}
.site-footer a{color:rgba(255,255,255,0.95)}
.flex-container1 { display: flex; flex-wrap: wrap; justify-content: space-around;}
.1 { text-align: center;}
h4 {margin:0}
.3 {width:50%;}
.turquoise { min-height: 5px;
			  background: #02adee;	
                }
.bleu-marine { min-height: 5px;
			      background: #2b3a91;	
                }
.rouge      { min-height: 5px;
			      background: #b1212a;	
                }

/* small components */
.link{color:var(--bleu-marine); font-weight:700}

/* ready reveal */
body:not(.ready) .card, body:not(.ready) .team-grid, body:not(.ready) .gallery-grid{opacity:0; transform:translateY(10px); transition:all 600ms ease}
body.ready .card, body.ready .team-grid, body.ready .gallery-grid{opacity:1; transform:none}

/* HERO Contact */
.small-hero { height:50vh; };
.hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5);}
.hero-content { position:relative; z-index:1; }
.hero h1 { font-size:2.5rem; font-weight:800; margin-bottom:0.5rem; }
.hero p { font-size:1.2rem; }
.flex-container { display: flex; flex-wrap: wrap; justify-content: space-around;}
.flex-container h2 {text-align: center;}
.flex-container div { padding-top: 40px auto; min-width: 350px;}
#form-message { padding-top: 0;}
.contact-map h2 {text-align: center; padding-top: 40px;}
label {
    display: block;      /* force le label à occuper toute la largeur */
    margin-bottom: 5px;  /* espace entre label et textarea */
    font-weight: bold;   /* optionnel, pour le rendre plus visible */
  }
textarea {
    width: 100%;         /* textarea prend toute la largeur du conteneur */
    box-sizing: border-box;
  }

/* Opening Hours */
  .opening-hours {
    margin: 20px auto;
    line-height: 1.6;
  }
  
  .opening-hours h2{ 
	text-align: center;
}

  /* Horaires list */
  .opening-hours .hours {
	min-width: 350px;
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
  }

  .opening-hours .hours li {
	display: flex;
    justify-content: space-between; /* espace entre gauche et droite */
    align-items: center; /* alignement vertical au centre */
    padding: 8px 0;
    font-size: 1.1rem;
  }

  .opening-hours .hours li:last-child {
    border-bottom: none;
    font-weight: bold;
  }
/* Theorie lessons */

.theorielessons flex-container2 {
    max-width:100%;
    line-height: 1.6;
  }

.theorielessons h2{ 
	text-align: center;
}

.lessons {padding:0}

.lesson-item {
  display: flex;
  justify-content: center; 
  align-items: center; 
  padding: 5px 0px
}

.time{
	margin: 0 40px 0 0;
}

/* Fixe la largeur du conteneur des jours pour aligner les horaires */

.left .day {
  display: inline-block;
  width: 100px; /* Ajustez selon le mot le plus long */
}

.right img.flag {
  width: 50px;
  height: auto;
}

/*TARIFS*/

main.containertarifs {
      max-width: 1000px;
      margin: 2rem auto;
      padding: 1rem 2rem;
      background-color: ;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      border-radius: 10px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0;
    }
    th, td {
      padding: 0.75rem;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    tr:hover {
      background-color: #f1f7fc;
    }
    section p {
      margin: 0.5rem 0 1rem 0;
    }
    .note {
      font-size: 0.9rem;
      color: #555;
      margin-top: 1rem;
    }

/*VIDEO*/

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  margin-bottom: 40px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* RESPONSIVE */
@media (max-width:1000px){
  .hero h1{font-size:40px}
  .gallery-grid{grid-template-columns:1fr 1fr; grid-auto-rows:140px}
  .g-large{grid-row:span 1}
  .about{flex-direction:column}
  .about-right{order:-1}
  .opening-hours .hours {min-width: 350px;}
}

@media (max-width:900px){
  .menu{display:none}
  .burger{display:block}
  .nav.mobile-open .menu{display:flex; position: absolute; left:12px; right:12px; top:74px; background:rgba(255,255,255,0.98); padding:12px; flex-direction:column; gap:6px; border-radius:12px; box-shadow:0 12px 36px rgba(11,18,30,0.12)}
  .submenu{position:static; background:transparent; box-shadow:none; margin-left:0}
  .has-dropdown.open .submenu{display:block}
  .opening-hours .hours {min-width: 350px;}
}

@media (max-width:520px){
  .hero h1{font-size:26px}
  .lead{font-size:15px}
  .g-item{height:120px}
  .instructor .photo{height:160px}
  .opening-hours .hours {min-width: 300px;}
}