:root{
    --blue:#36517c;
    --btn-color:#716eef;
    --electric:#d4d4d6;
    --dark-bg:#2c3e50;
    --dark-border:#415061;
    --white:#fff;
    --black:#000;
    --dark:#3b3b3b;
  }

  /* ===== RESET & BASE ===== */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body{font-family:system-ui,Arial,sans-serif;background:var(--white);color:#111;line-height:1.4}
  img{display:block;width:100%;height:auto}
  a{text-decoration:none;color:inherit}

  /* ===== TOP BAR ===== */
  .top-bar{
    background:var(--dark-bg);color:var(--white);
    font-size:.8rem;padding:.35rem 1.5rem;
    display:flex;justify-content:space-between;align-items:center;
  }
  .top-contact span{margin-right:1.2rem;display:inline-flex;align-items:center;gap:.25rem}

  /* ===== WRAPPER ===== */
  .wrapper{margin:0 5cm}
  @media(max-width:1400px){.wrapper{margin:0 3cm}}
  @media(max-width:900px){.wrapper{margin:0 1rem}}

  /* ===== HEADER & MENU ===== */
  header{background:var(--blue);display:flex;align-items:center;padding:0 1.5rem}
  .logo img{width:90px}
  .hex-nav{flex:1;display:flex;justify-content:center;flex-wrap:wrap;gap:1.2rem}
  .hex-item{
    position:relative;width:150px;aspect-ratio:1.1547;
    clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
    background:var(--dark-bg);
    border:2px solid var(--dark-border);
    color:var(--white);transition:all .5s ease;
  }
  .hex-item:hover{
    box-shadow:inset 0 0 0 1.3em var(--electric);
    border-color:var(--electric);
  }
  .hex-link{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    color:inherit;font:600 .8rem/1.3 system-ui;text-align:center;gap:.3rem;
  }
  .hex-link .icon{font-size:1.2rem}

  /* ===== DIVIDER ===== */
  .divider{height:6px;background:var(--white)}

  /* ===== HERO / SLIDER ===== */
  .hero{
    background:url('img/background2.png') center/cover no-repeat;
    padding:3rem 1rem 5rem;text-align:center;
  }
  .slider-wrapper{display:flex;justify-content:center}
  .slider{
    position:relative;width:800px;height:260px;
    border-radius:200px;overflow:hidden;
    background:#d6d6d6;
    border:10px double var(--white);
    box-shadow:0 4px 20px rgba(0,0,0,.3);
  }
  .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
  .slide.active{opacity:1}
  .slide img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
  .dots{
    position:absolute;bottom:15px;left:50%;transform:translateX(-50%);
    display:flex;gap:10px;
  }
  .dot{
    width:12px;height:12px;border-radius:50%;
    background:rgba(255,255,255,.5);cursor:pointer;transition:background .3s;
  }
  .dot.active,.dot:hover{background:#fff}
  @media(max-width:900px){.slider{width:100%;height:220px;border-radius:150px}.slide img{border-radius:150px}}

  /* ===== ABOUT SECTION ===== */
  .about-section{
    display:flex;flex-wrap:wrap;align-items:center;gap:2rem;
    padding:4rem 2rem;margin:4rem auto;width:90%;max-width:1100px;
    border:1px dashed var(--black);
  }
  .about-slider{position:relative;width:320px;height:320px;overflow:hidden;border-radius:12px;flex-shrink:0}
  .about-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
  .about-slide.active{opacity:1}
  .about-slide img{width:100%;height:100%;object-fit:cover}
  .about-text{flex:1;min-width:260px}
  .about-text h2{font-size:1.5rem;margin-bottom:1rem;color:var(--blue)}
  .about-text p{margin-bottom:1rem;line-height:1.6}

  /* ===== SERVICES ===== */
  .services{padding:4rem 2rem}
  .categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:3rem}
  .category{width:100%;max-width:260px;margin:0 auto;text-align:center}
  .category-title{background:var(--black);color:var(--white);padding:.6rem 1rem;border-radius:3px;margin-bottom:1.5rem;font-size:1rem;font-weight:600}
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
  @media(max-width:500px){.cards{grid-template-columns:1fr}}
  .card{position:relative;height:160px;border-radius:6px;overflow:hidden;cursor:pointer;transition:transform .35s}
  .card:hover{transform:translateY(-4px)}
  .card img{width:100%;height:100%;object-fit:cover;filter:brightness(40%);transition:filter .35s}
  .card:hover img{filter:brightness(100%)}
  .caption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;color:var(--white);font-weight:600;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;transition:color .35s}
  .card:hover .caption{color:var(--electric)}

  /* ===== FOOTER ===== */
  footer{
    background:var(--dark);color:var(--white);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 1.5rem;height:100px;font-size:.85rem;
    position:relative;

  }
  .footer-left{
    position:absolute;left:50%;transform:translateX(-50%);
  }
  .footer-right{position:absolute;left:93%;transform:translateX(-50%);}

  /* Ajustement de la taille du contenu */
.content {
    max-width: 800px;  /* réduisez de 1000px à 800px */
    padding: 2rem 1rem; /* ajustez le padding si besoin */
    margin: 0 auto;     /* centrage horizontal */
  }

  /* 1. Plus d’espace entre les cartes */
.grid {
    gap: 3rem;  /* au lieu de 2rem */
  }
  
  /* 2. Bordure épaisse double autour de chaque carte */
  .card {
    border: 6px double var(--blue);
    box-sizing: border-box;  /* pour inclure la bordure dans la taille */
  }


/* CSS à ajouter dans main.css */

/* 1) Grille 2×2 centrée, plus grande et espacée */
.grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;            /* espace horizontal + vertical */
    max-width: 1000px;    /* largeur totale de la grille */
    margin: 0 auto;       /* centrage horizontal */
    padding: 1rem 0;      /* marge haut/bas */
  }
  
  /* 2) Style des cartes agrandies */
  .grid-2x2 .card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 6px double var(--blue);
    min-height: 350px;    /* hauteur minimum pour agrandir */
    box-sizing: border-box;
    transition: transform .3s;
  }
  .grid-2x2 .card:hover {
    transform: translateY(-4px);
  }
  
  /* 3) Ajustement de l’image pour remplir */
  .grid-2x2 .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* 4) Overlay toujours visible */
  .grid-2x2 .card .overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  
  /* 5) Styles du bouton “En savoir plus” centré */
  .grid-2x2 .card .btn {
    display: block;
    margin: 0.5rem auto 0;
    background: #fff;
    color: #000;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: .9rem;
    cursor: pointer;
    transition: background .2s;
  }
  .grid-2x2 .card .btn:hover {
    background: var(--electric);
  }

  /* Bannière : centrer le texte au milieu */
.banner {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* centre verticalement */
    align-items: center;      /* centre horizontalement */
    text-align: center;       /* assure le centrage du texte */
    min-height: 300px;        /* hauteur minimale, à ajuster */
    background: url('cours-banner.jpg') center/cover no-repeat;
    color: #881717;
    padding: 2 1rem;          /* on supprime le padding vertical précédent */
  }
  
  /* Ajustement des titres et paragraphes */
  .banner h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }
  .banner p {
    max-width: 600px;
    font-size: 1.1rem;
  }
  
  main.content {
    padding-top: 0rem;     /* au lieu de 3rem */
  }


  /* Section tarifs : centrage et espacement */
.tarifs {
    padding: 3rem 1.5rem;
    text-align: center;
  }
  .tarifs h1 {
    margin-bottom: 2rem;
    font-size: 2rem;
    color: var(--blue);
  }
  /* Wrapper pour le tableau permettant le scroll si nécessaire */
  .table-wrapper {
    overflow-x: auto;
    margin: 0 auto;
    max-width: 700px;
  }
  
  /* Tableau de tarifs joli */
  .tarif-table {
    width: 100%;
    border-collapse: collapse;
  }
  .tarif-table th,
  .tarif-table td {
    border: 1px solid var(--dark-border);
    padding: 0.75rem 1rem;
  }
  .tarif-table th {
    background: var(--blue);
    color: #fff;
  }
  .tarif-table tr:nth-child(even) {
    background: var(--electric);
  }
  .tarif-table tr:hover {
    background: rgba(30, 122, 176, 0.1);
  }

  /* Centrage et espacement des tableaux */
.table-wrapper {
    margin: 2rem auto;
    text-align: center;
    max-width: 700px;
  }
  
  /* Style des titres comme boutons */
  .table-title {
    display: inline-block;
    background: var(--dark-bg);
    color: var(--white);
    padding: .5rem 1rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    font-size: 1.1rem;
  }