/* =========================================================
   0) Reset + variables
   ========================================================= */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --c-main:#316EFF;      /* primary */
  --c-sec:#2865B9;       /* secondary */
  --c-bg:#F2F5FA;        /* light background */
  --c-text:#2b2f36;
  --c-border:#e1e6f0;
}

html, body { height:100%; }
body{
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.6; color:#333;
}

.container{ width:90%; max-width:1200px; margin:auto; }

/* ================================
   HEADER + NAV + BURGER (clean)
   ================================ */
header{
  background: var(--c-main);
  color:#fff;
  padding:12px 0;
  position:relative;
  z-index:1000;
}
header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  position:relative; /* ancre du panneau mobile */
}

/* Boutons (toujours visibles) */
.header-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
.header-buttons .btn{
  background:#fff; color:var(--c-main);
  padding:6px 12px; border-radius:6px; font-size:.9rem;
  text-decoration:none; transition:background .25s;
}
.header-buttons .btn:hover{ background:#e9eef8; }

/* NAV – desktop */
nav{ position:relative; z-index:1010; }
nav .menu{
  list-style:none; display:flex; gap:18px; margin:0; padding:0;
}
nav .menu > li{ position:relative; }
nav .menu > li > a{
  color:#fff; text-decoration:none;
  font-size:1rem; font-weight:600;
  padding:6px 10px; border-radius:4px;
  transition:background .25s, color .25s;
}
nav .menu > li > a:hover{ background:var(--c-sec); color:#fff; }

/* Dropdown – desktop (hover) */
.submenu{
  display:none; position:absolute; top:100%; left:0;
  background:#fff; list-style:none; min-width:220px;
  border-radius:8px; padding:6px 0;
  box-shadow:0 10px 18px rgba(0,0,0,.18);z-index: 1010;
}
.submenu li a{
  display:block; padding:9px 14px; font-size:.92rem;
  color:var(--c-main); text-decoration:none;z-index: 1010;
}
.submenu li a:hover{ background:var(--c-main); color:#fff; }
.dropdown:hover > .submenu{ display:block; }

/* Burger */
.burger{
  display:none; font-size:1.8rem; line-height:1;
  cursor:pointer; user-select:none; color:#fff;
}

/* ================================
   MOBILE ≤ 900px
   ================================ */
@media (max-width:900px){

  .burger{ display:block; z-index:1002; }

  /* Panneau mobile : fond blanc lisible, scroll si long */
  nav .menu{
    display:none;                   /* fermé par défaut */
    position:absolute; top:100%; left:0; right:0;
    background:#fff;
    border-radius:0 0 12px 12px;
    box-shadow:0 14px 28px rgba(0,0,0,.25);
    flex-direction:column; gap:0;
    padding:8px 0;
    max-height:70vh; overflow:auto;
    z-index:1001;
  }
  nav .menu.active{ display:flex !important; }

  /* Titres des pages (liens principaux) : plus d’air + séparateurs */
  nav .menu > li > a{
    display:block;
    color:var(--c-main);
    font-weight:700;
    font-size:1.05rem;
    padding:14px 18px;
    border-top:1px solid #eef1f7;
    background:#fff;
    border-radius:0;
    margin :0;
  }
  nav .menu > li:first-child > a{ border-top:none; }

  /* Item ouvert (quand .dropdown a .open via JS) */
  nav .menu > .dropdown.open > a{
    background:var(--c-bg);
    color:var(--c-sec);
  }

  /* Sous-menus : repliés par défaut, ouverts via .open */
  .submenu{
    position:static;
    display:none;
    background:#f7f9ff;
    box-shadow:none;
    padding:6px 0 8px;
    border-top:1px solid #e8ecf6;
    margin:0;
  }
  .dropdown.open > .submenu{ display:block; }

  .submenu li a{
    font-size:.92rem; color:#2a3f7f;
    padding:8px 20px 8px 34px;   /* retrait visuel */
  }
  .submenu li a:hover{
    background:#eaf0ff;
    color:#112a6a;
  }
}

/* Sécurité desktop */
@media (min-width:901px){
  nav .menu{ display:flex; }
  .burger{ display:none; }
}
/* === PATCH BURGER — priorité mobile === */
@media (max-width:900px){
  header .container{ position: relative; }  /* ancre de l’overlay */
  header nav{ position: static; }           /* UL s’accroche au container (pas au nav) */

  header nav .menu{
    display: none;                          /* fermé par défaut */
    position: absolute;
    top: 100%; left: 0; right: 0;           /* panneau sous la barre */
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 14px 28px rgba(0,0,0,.25);
    flex-direction: column; gap: 0;
    padding: 8px 0;
    max-height: 70vh; overflow: auto;
    z-index: 1001;
  }
  header nav .menu.active{ display: flex !important; }

  .burger{ position: relative; z-index: 1002; } /* bouton au-dessus */

  /* sous-menus mobile (repliés par défaut) */
  header nav .menu > .dropdown > .submenu{
    position: static;
    display: none;
    background: #f7f9ff;
    box-shadow: none;
    padding: 6px 0 8px;
    border-top: 1px solid #e8ecf6;
    margin: 0;
  }
  header nav .menu > .dropdown.open > .submenu{ display: block; }
}

/* =========================================================
   2) Hero
   ========================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 50px 10%;
  background: url("../imgs/background.svg") repeat;
  background-size: 40%;     /* <-- important : garde la taille d'origine du svg */
  min-height: 80vh;
}

.hero-text{ font-size:1.1rem; line-height:1.6;}
.hero-text h1{ font-size:3rem; margin-bottom:20px; color: #ffffff; text-align:center; }
.hero-text a{ color:#2a4d69; text-decoration:none;}
.hero-image img{ width:100%; object-fit:cover; }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; text-align:center;  background-size: 80%; }
  .hero-image{ order:-1; }
}

/* =========================================================
   3) Blocs génériques (cartes, sections)
   ========================================================= */
.section-card{
  margin:40px 0; padding:20px; background:#f9f9f9;
  border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.contact{ composes: section-card; } /* (annotation : purement documentaire) */
.contact{ margin:40px 0; padding:20px; background:#f9f9f9; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.contact h2{border-left:4px solid var(--c-main); padding-left:.5rem;}

.urgences{
  margin:40px 0; padding:20px; background:#ffdddd;
  border-left:6px solid #f44336; border-radius:12px;
}
.urgences h2{ border-left:0; }

.presentation{ margin:40px 0; padding:20px; background:#f9f9f9; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.presentation h2{ margin-bottom:20px; border-left:4px solid var(--c-main); padding-left:.5rem; }

/* =========================================================
   4) Actualités (accordéon)
   ========================================================= */
:root{ --accent:#1e8a8a; --border:#e7e7e7; }

.actualites{ margin:40px 0; padding:20px; background:#f9f9f9; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.actualites h2{ margin-bottom:20px; border-left:4px solid var(--c-main); padding-left:.5rem; }

.actus{ max-width:760px; margin:2rem auto; }
.actu{ background:var(--c-bg); border:1px solid var(--border); border-radius:12px; border-left:4px solid var(--c-main); overflow:hidden; }
.actu + .actu{ margin-top:.75rem; }

.actu summary{
  cursor:pointer; list-style:none; padding:1rem 3rem 1rem 1rem; font-weight:600; position:relative;
}
.actu summary::-webkit-details-marker{ display:none; }
.actu summary::after{
  content:"＋"; position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-size:1.2rem; transition:transform .2s;
}
.actu[open] summary::after{ content:"–"; }

.actu-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
.actu[open] .actu-body{ grid-template-rows:1fr; }
.actu-body > div{ min-height:0; overflow:hidden; padding:0 1rem 1rem; }

.actu summary:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* =========================================================
   Accès (aligné sur les autres sections)
   ========================================================= */
.access{
  margin: 40px 0;
  padding: 20px 0;                 /* pas de largeur ici, fond plein */
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.access h2{
  text-align: center;
  margin-bottom: 20px;
  border-left: 0;
}

/* On centre comme une .container classique */
.access .access-container{
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.access .access-details{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.subaccess h3{ margin-bottom: 8px; }
.subaccess p{ margin-bottom: 12px; }

@media (min-width:768px){
  .access .access-container{ grid-template-columns: 1fr 1fr; }
  .access .access-details{ display: flex; flex-direction: column; justify-content: flex-start; }
}

/* Grille cartes (si tu en utilises ici) */
.access .grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 20px;
}
.access .card{
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

/* Sécurité overflow horizontal */
html, body{ overflow-x: hidden; }

/* Iframe Google Maps responsive */
.access .map{
  border-radius: 10px;
  overflow: hidden;
}
.access .map iframe{
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Mobile tweaks */
@media (max-width:768px){
  .access{ padding: 16px 0; }
}


/* =========================================================
   6) Boutons/figures
   ========================================================= */
.boutons{ margin:40px 0; padding:20px; background:#f9f9f9; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.boutons h2{border-left:4px solid var(--c-main);padding-left:.5rem;}
.boutons-container{
  display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-top:15px;
}
.logo{ height:150px; }
.boutons-container a{ text-align:center; text-decoration:none; color:inherit; }
.boutons-container figure{ margin:0; }
.boutons-container figcaption{ margin-top:.5rem; font-size:.9rem; color:#333; }

/* =========================================================
   7) Équipe
   ========================================================= */
#equipe{
  max-width:1100px; margin:3rem auto; padding:2rem; color:#333;
}
#equipe h2{
  text-align:center; font-size:2rem; margin-bottom:2rem; color:var(--c-main); border-left:0;
}
#equipe .grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:2rem;
}
#equipe .card{
  background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:1.5rem; transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; justify-content:space-between;
}
#equipe .card:hover{ transform:translateY(-5px); box-shadow:0 4px 16px rgba(0,0,0,.12); }
#equipe .card h3{ font-size:1.3rem; margin-bottom:1rem; color:var(--c-main); }
#equipe .card p{ margin-bottom:1rem; font-size:.95rem; line-height:1.5; }
#equipe .card a{ color:#316EFF; text-decoration:none; }
#equipe .card a:hover{ text-decoration:underline; }
#equipe .card img{
  margin-top:1rem; border-radius:10px; width:100%; height:auto; object-fit:cover;
}
/* ==================================
   Services (section + intro)
   ================================== */
.services{
  padding: 2.5rem 0;
  background: #fff;
}
.services .container{
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}
.services__intro h2{
  font-size: 2rem;
  margin-bottom: .75rem;
  color: var(--c-main);
  text-align: center;
}
.services__intro ul{
  margin: .75rem 0 1.5rem;
  padding-left: 1.1rem;
}
.services__intro li{ margin: .35rem 0; }

/* ==================================
   Panneaux alternés (toujours 2 colonnes en desktop)
   ================================== */
.service-block{
  display: grid;
  grid-template-columns: 1.2fr .9fr;       /* texte | médias */
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border, #e1e6f0);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  margin-bottom: 1.25rem;

  width: 100%;
  max-width: 100%;
  overflow: hidden;                         /* anti-débordement */
  box-sizing: border-box;
}

/* Alternance gauche/droite conservée */
.service-block:nth-child(odd){
  grid-template-columns: .9fr 1.2fr;       /* médias | texte */
}
.service-block:nth-child(odd) .service-block__text{ order: 2; }
.service-block:nth-child(odd) .service-block__media{ order: 1; }

/* ==================================
   Texte
   ================================== */
.service-block__text h3{
  margin: 0 0 .4rem;
  font-size: 1.35rem;
  color: var(--c-sec);
  border-left: 5px solid var(--c-main);
  padding-left: .55rem;
}
.service-block__text p{ margin: .5rem 0; }
.service-block__text{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.inline-list{
  display: flex; flex-wrap: wrap; gap: .5rem .75rem; padding: 0; margin: .5rem 0 0;
  list-style: none;
}
.inline-list li{
  background: #fff; border: 1px solid #e9eef8; border-radius: 999px; padding: .25rem .6rem; font-size: .9rem;
}

/* ==================================
   Médias (images fluides)
   ================================== */
.service-block__media{
  width: 100%;
  max-width: 100%;
}
.service-block img{
  display: block;
  width: 100%;
  height: auto;                               /* conserve le ratio */
  max-width: 100%;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.service-block figure{
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}
.service-block figcaption{
  font-size: .85rem;
  text-align: center;
  color: #556;
  margin-top: .35rem;
}

/* ==================================
   Cas "Labo" : 3 images empilées dans la colonne médias
   ================================== */
.service-block__media--grid3{
  display: flex;
  flex-direction:row;
  gap: 12px;
}
.service-block__media--grid3 figure{
   /*aspect-ratio: 4 / 3;*/
}
.service-block__media--grid3 img{
  width: 100%;
  /*height: 100%;*/
  object-fit: cover;
} 

/* ==================================
   Responsive
   ================================== */
@media (max-width: 900px){
  .service-block{
    grid-template-columns: 1fr;              /* pile : texte au-dessus, médias dessous */
    gap: 16px;
    padding: 1rem;
  }
  .service-block:nth-child(odd) .service-block__text,
  .service-block:nth-child(odd) .service-block__media{
    order: initial;                           /* on supprime l’alternance en mobile */
  }
.service-block__media--grid3 figure{ aspect-ratio: auto; } 
}

@media (max-width: 520px){
  .service-block{ gap: 12px; }
}

/* ================================
   Témoignages
   ================================ */
#Témoignages {
  margin: 3rem auto;
  padding: 2rem 1.5rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border, #e1e6f0);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  text-align: center;
  max-width: 900px;
}

#Témoignages h2 {
  font-size: 2rem;
  color: var(--c-main);
  margin-bottom: 1rem;
}

#Témoignages p {
  margin-bottom: 2rem;
  color: #444;
  font-size: 1rem;
}

#Témoignages h3 {
  font-size: 1.3rem;
  color: var(--c-sec);
  margin: 1.5rem 0 .75rem;
}

#Témoignages img {
  max-width: 300px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem auto 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Boutons déjà cohérents avec le site */
#Témoignages .btn {
  display: inline-block;
  margin-bottom: 1.5rem;
  background: var(--c-main);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background .25s, transform .2s;
}

#Témoignages .btn:hover {
  background: var(--c-sec);
  transform: translateY(-2px);
}


/* =========================================================
   8) Tarifs
   ========================================================= */
#tarifs{
  --border:#e8ecec;
  max-width:1100px; margin:3rem auto; padding:1rem 1.25rem 2rem;
}
#tarifs h2{
  text-align:center; font-size:2rem; color:var(--c-main); margin-bottom:1rem; border-left:0;
}
#tarifs .intro{ text-align:center; margin:0 auto 1.25rem; max-width:80ch; }
#tarifs .notice{
  background:var(--c-bg); border:1px solid var(--c-border);
  padding:.9rem 1rem; border-radius:10px; margin:1rem 0 2rem;
}

/* Sous-titres */
#tarifs h4{ font-size:1.05rem; color:var(--c-sec); margin:1.25rem 0 .25rem; }

/* Liste prix (dt/dd) */
#tarifs .price-list{ margin:0; }
#tarifs .price-line{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:.5rem 1rem;
  padding:.6rem 0; border-bottom:1px dashed var(--border);
}
#tarifs .price-line:last-child{ border-bottom:none; }
#tarifs .price-line dt{ font-weight:500; }
#tarifs .price-line dt small{ font-weight:400; opacity:.8; }
#tarifs .price-line dd{ margin:0; display:flex; align-items:baseline; gap:.5rem; min-width:9ch; justify-self:end; }

#tarifs .price{ font-weight:600; color:#222; min-width:8ch; text-align:right; }
#tarifs .group{
  background:var(--c-bg); border:1px solid var(--c-border);
  padding:.75rem .9rem; border-radius:10px; margin-top:1rem;
}

/* Accordéons espèces (style unifié avec les autres menus déroulants) */
#tarifs details{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:12px;
  overflow:hidden;
  margin:.75rem 0;
}
#tarifs summary{
  cursor:pointer; list-style:none;
  padding:1rem 3rem 1rem 1rem;
  font-weight:700; position:relative; color:#0f1b40;
  background:#fff;
}
#tarifs summary::-webkit-details-marker{ display:none; }
#tarifs summary::marker{ content:""; }
#tarifs summary::after{
  content:"▼";
  position:absolute; right:1rem; top:50%;
  transform:translateY(-50%);
  transition:transform .2s ease; opacity:.65;
}
#tarifs details[open] > summary::after{ transform:translateY(-50%) rotate(-180deg); }
#tarifs details > .price-list,
#tarifs details > .group,
#tarifs details > div{
  border-top:1px solid var(--c-border);
  padding:.85rem 1rem 1rem;
  background:#fff;
}

/* Choix poids (chiens) */
#tarifs .poids-box{
  border-top:1px solid var(--c-border); margin-top:.5rem; padding:1rem 1rem 1.2rem;
  background:linear-gradient(180deg,#fff,var(--c-bg));
}
#tarifs .poids-head{
  display:grid; grid-template-columns:1fr auto auto; gap:.75rem 1rem; align-items:end; margin-bottom:.75rem;
}
#tarifs .poids-head h4{ margin:0; color:var(--c-sec); }
#tarifs label{ font-size:.9rem; color:#455; }
#tarifs .cat-out{ font-size:.95rem; }
#tarifs .poids-group{
  border:1px solid var(--c-border); border-radius:10px; padding:.75rem .9rem; background:#fff; margin:.6rem 0;
}
#tarifs .poids-group h5{ margin:0 0 .25rem; font-size:1rem; color:#183a7a; }
#tarifs select{
  padding:.5rem .6rem; border:1px solid var(--c-border); border-radius:8px; background:#fff; font-size:.95rem;
}
#tarifs .res-line{ font-weight:600; }
#tarifs .cta{ margin-top:2rem; text-align:center; }
#tarifs .button{
  display:inline-block; margin-left:.5rem; padding:.6rem 1rem; border-radius:999px;
  background:var(--c-main); color:#fff; text-decoration:none; font-weight:600;
  transition:transform .15s, box-shadow .15s, opacity .2s;
}
#tarifs .button:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
#tarifs .button:active{ transform:translateY(0); box-shadow:none; }

/* Responsive tarifs */
@media (max-width:640px){
  #tarifs{ padding:0 1rem 2rem; }
  #tarifs .price-line{ grid-template-columns:1fr; }
  #tarifs .price-line dd{ justify-self:start; }
  #tarifs .poids-head{ grid-template-columns:1fr 1fr; }
  #tarifs .cat-out{ grid-column:1 / -1; }
}

/* =========================================================
   9) Tarifs spéciaux (carte + tableau commun)
   ========================================================= */
#tarifs-speciaux{
  max-width:1000px; margin:3rem auto; padding:1rem; color:var(--c-text);
}
#tarifs-speciaux h2{
  text-align:center; font-size:2rem; margin-bottom:2rem; border-left:0;
  background:linear-gradient(90deg,var(--c-main),var(--c-sec));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
#tarifs-speciaux .tarif-card{
  background:var(--c-bg); border:1px solid var(--c-border); border-radius:14px;
  padding:1.25rem 1.25rem 1.5rem; margin-bottom:2rem; box-shadow:0 2px 10px rgba(0,0,0,.05);
}
#tarifs-speciaux .tarif-card h3{
  margin:0 0 .75rem; font-size:1.4rem; color:var(--c-sec);
}
#tarifs-speciaux ul{ margin:1rem 0 0; padding-left:1.2rem; }
#tarifs-speciaux li{ margin-bottom:.5rem; }
#tarifs-speciaux .vetobudget{ border-left:6px solid var(--c-main); }
#tarifs-speciaux .vpt{ border-left:6px solid var(--c-sec); }
/* Header de chaque carte */
#tarifs-speciaux .card-header {
  display: flex;
  justify-content: space-between; /* titre à gauche, logo à droite */
  align-items: center;
  margin-bottom: 1rem;
}

#tarifs-speciaux .logo {
  height: 100px;   /* ajuste selon tes images */
  width: auto;
}

@media (max-width:640px){
  #tarifs-speciaux{ padding:.5rem; }
  #tarifs-speciaux .tarif-card{ padding:1rem; }
}

/* =========================================================
   10) Tableaux (Tarifs complets / Vetobudget / VPT) — UNIFIÉS
   ========================================================= */
.table-section{
  --c-main:#316EFF; --c-sec:#2865B9; --c-bg:#F2F5FA; --c-bord:#e1e6f0; --c-text:#2b2f36;
  max-width:1100px; margin:3rem auto; padding:1rem; font-family:system-ui,sans-serif; color:var(--c-text);
}
.table-section h2{
  text-align:center; font-size:2rem; margin-bottom:.25rem;
  background:linear-gradient(90deg,var(--c-main),var(--c-sec));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.table-section .subtitle{
  text-align:center; margin:0 auto 1rem; max-width:80ch; color:#3b4768;
}

/* Menus déroulants (détails) — mêmes règles partout */
.table-section details,
#tarifs-speciaux .tarif-card details{
  background:#fff;
  border:1px solid var(--c-bord);
  border-radius:12px;
  overflow:hidden;
  margin-top:1rem;
}
.table-section summary,
#tarifs-speciaux .tarif-card summary{
  cursor:pointer; list-style:none;
  padding:1rem 3rem 1rem 1rem;
  font-weight:700; position:relative;
}
.table-section summary::-webkit-details-marker,
#tarifs-speciaux .tarif-card summary::-webkit-details-marker{ display:none; }
.table-section summary::marker,
#tarifs-speciaux .tarif-card summary::marker{ content:""; }
.table-section summary::after,
#tarifs-speciaux .tarif-card summary::after{
  content:"▼";
  position:absolute; right:1rem; top:50%;
  transform:translateY(-50%); transition:transform .2s; opacity:.65;
}
.table-section details[open] > summary::after,
#tarifs-speciaux .tarif-card details[open] > summary::after{
  transform:translateY(-50%) rotate(-180deg);
}

/* Table scrollable */
.table-section .table-wrap,
#tarifs-speciaux .tarif-card .table-wrap{
  max-height:520px; overflow:auto; border-top:1px solid var(--c-bord); background:#fff;
}
.table-section table,
#tarifs-speciaux .tarif-card table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:780px; font-size:.95rem;
}
.table-section thead th,
#tarifs-speciaux .tarif-card thead th{
  position:sticky; top:0; z-index:1; text-align:left; padding:.6rem .75rem;
  font-weight:700; color:#0f1b40;
  background:linear-gradient(90deg,#fff,#f6f8ff);
  border-bottom:2px solid var(--c-main);
}
.table-section tbody td,
#tarifs-speciaux .tarif-card tbody td{
  padding:.55rem .75rem; border-bottom:1px solid #eef2f7;
}
.table-section tbody tr:nth-child(even),
#tarifs-speciaux .tarif-card tbody tr:nth-child(even){ background:#fbfdff; }
.table-section tbody tr:hover,
#tarifs-speciaux .tarif-card tbody tr:hover{ background:#eef4ff; }

/* =========================================================
   11) Faq
   ========================================================= */
#faq {
  max-width: 900px;
  margin: 3rem auto;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  color: #2b2f36;
}

#faq h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--c-main);
}

/* Conteneur d’une question */
#faq details {
  background: #fff;
  border: 1px solid var(--c-border, #e1e6f0);
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
#faq details:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Question */
#faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 3rem 1rem 1rem;
  font-weight: 600;
  font-size: 1.05rem;
  position: relative;
  background: var(--c-bg, #f2f5fa);
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after {
  content: "▼";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  color: var(--c-sec, #2865B9);
  transition: transform .25s ease;
}
#faq details[open] summary::after {
  transform: translateY(-50%) rotate(-180deg);
}

/* Réponse */
#faq details > div {
  padding: 1rem;
  background: #fff;
  font-size: .95rem;
  line-height: 1.6;
}

/* Boutons dans la FAQ */
#faq .btn {
  display: inline-block;
  margin-top: .5rem;
  padding: .6rem 1rem;
  border-radius: 6px;
  background: var(--c-main, #316EFF);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background .25s ease;
}
#faq .btn:hover {
  background: var(--c-sec, #2865B9);
}

/* =============================
          Fiches
   ============================= */
:root{
  --c-main:#316EFF;
  --c-sec:#2865B9;
  --c-bg:#F2F5FA;
  --c-text:#2b2f36;
  --c-bord:#e1e6f0;
}

/* Section */
#fiches{
  padding:2.5rem 0 2rem;
  background:#fff;
  color:var(--c-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

#fiches h2{
  font-size:2rem;
  margin-bottom:.75rem;
  color:#ffffff;
}

/* HEADER fiches = bandeau pleine largeur */
#fiches .fiches__header{
  width:100%;
  background: var(--c-main);              /* fond bleu principal */
  color:#fff;
  padding: 1.5rem 1rem;
  margin:0 0 2rem;                        /* espace après le bandeau */
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  z-index: 990;
}

/* Titre */
#fiches .fiches__header h2{
  margin:0 0 .75rem;
  font-size:2rem;
  color:#fff;
  text-align:center;
}

/* Champ recherche sur fond bleu */
#fiches .fiches__search input{
  border:1px solid #fff;
  border-radius:8px;
  padding:.6rem .9rem;
  width:100%;
  max-width:600px;
  margin:0 auto 1rem;
  display:block;
}


/* Chips (filtres) */
#fiches .fiches__filters{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1rem;
}
#fiches .chip{
  padding:.4rem .75rem;
  border:1px solid var(--c-bord);
  border-radius:999px;
  background:#fff;
  color:var(--c-main);
  cursor:pointer;
  font-weight:600;
}
#fiches .chip:hover{ background:#f7f9ff; }
#fiches .chip.is-active{
  background:linear-gradient(90deg,var(--c-main),var(--c-sec));
  color:#fff; border-color:transparent;
}

/* Liste */
#fiches .fiches__list{ display:flex; flex-direction:column; gap:.7rem; }

/* Accordéon */
#fiches details.fiche{
  background:#fff;
  border:1px solid var(--c-bord);
  border-radius:12px;
  overflow:hidden;
}
#fiches details.fiche[open]{ border-color:#dfe7ff; box-shadow:0 6px 22px rgba(0,0,0,.06); }

#fiches details.fiche > summary{
  cursor:pointer;
  list-style:none;
  padding:1rem 3rem 1rem 1rem;
  position:relative;
  display:flex; align-items:center; gap:.75rem;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-bord);
  justify-content: space-between;
}
#fiches details.fiche > summary::-webkit-details-marker{ display:none; }
#fiches details.fiche > summary::after{
  content:"▼";
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  font-size:.9rem; opacity:.65; transition:transform .2s ease;
}
#fiches details.fiche[open] > summary::after{ transform:translateY(-50%) rotate(-180deg); }

#fiches details.fiche h3{
  margin:0; font-size:1.1rem; color:#0f1b40;
}
#fiches .badge{
  margin-left:auto;
  font-size:.75rem;
  font-weight:700;
  color:var(--c-sec);
  background:#fff;
  border:1px solid var(--c-bord);
  border-radius:999px;
  padding:.25rem .55rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;      /* pas de wrap badge par badge */
  margin-left: 0;
}
#fiches details.fiche > summary .badge:first-of-type{
  margin-left: auto;        /* pousse le groupe de badges à droite */
}
/* Corps de fiche */
#fiches .fiche__body{
  padding:1rem;
  background:#fff;
}
#fiches .btn-link{
  display:inline-block;
  margin-top:.25rem;
  font-weight:700;
  color:var(--c-main);
  text-decoration:none;
}
#fiches .btn-link:hover{ text-decoration:underline; }

/* Accessibilité focus */
#fiches summary:focus-visible{
  outline:2px solid var(--c-main);
  outline-offset:4px;
}

/* Responsive */
@media (max-width:640px){
  #fiches details.fiche > summary{ padding: .9rem 2.25rem .9rem .9rem; }
}


/* =========================================================
   12) Footer
   ========================================================= */
footer{
  text-align:center; padding:20px; background:var(--c-main); color:#fff; margin-top:40px;
}
footer a{ color:#fff; text-decoration:underline; }