/* =====================================================================
   WEBSEE – Module « Demande de disponibilité » en cartes
   Feuille de style réutilisable d'une commune à l'autre.
   NET 15 – v1.0 – octobre 2026 (1re mise en place : Brommat)

   INSTALLATION
   1. Déposer ce fichier dans « Gestion des fichiers > Template ».
   2. Dans « Edition HTML » du template, partie <head>, ajouter :
      <link href="/template/websee-dispo-cartes.css" rel="stylesheet" type="text/css" />
   3. Adapter les couleurs dans le bloc :root ci-dessous (et rien d'autre).

   COULEURS – règle de contraste RGAA
   --dispo-accent doit être une couleur CLAIRE : le texte posé dessus est
   --dispo-sombre, il faut un contraste d'au moins 4,5:1 entre les deux.
   --dispo-intro-fond doit être une couleur FONCÉE : le texte blanc posé
   dessus (bloc « Comment réserver ») doit aussi atteindre 4,5:1.
   Vérification : https://webaim.org/resources/contrastchecker/

   CONTENU D'UNE FICHE (saisi par la commune dans le module, sans code)
   - 1er paragraphe   -> pastille de capacité (ex. « Jusqu'à 100 personnes »)
   - Tableau 2 col.   -> tarifs (période | prix), caution en dernière ligne
   - Titre 3          -> petit intertitre (ex. « Équipements »)
   - Liste à puces    -> étiquettes d'équipements

   BLOC « COMMENT RÉSERVER » (facultatif, dans le même bloc de page que
   le module, juste avant la balise du module) :
   <div class="dispo-intro"><h2>…</h2><ol><li>…</li></ol><p>…</p></div>
   ===================================================================== */

:root {
  /* ---- À ADAPTER pour chaque commune ---- */
  --dispo-accent: #F5B738;          /* couleur de la charte (boutons, pastilles) */
  --dispo-accent-survol: #E3A322;   /* accent un peu plus foncé, au survol */
  --dispo-sombre: #152F40;          /* titres, prix, texte des boutons */
  --dispo-intro-fond: #232D33;      /* fond du bloc « Comment réserver » (foncé) */
  --dispo-intro-fond-2: #313D44;    /* fond des étapes (fond intro un peu éclairci) */

  /* ---- Neutres (en général inutile d'y toucher) ---- */
  --dispo-texte: #232D33;
  --dispo-gris: #4A555D;            /* 7,9:1 sur blanc */
  --dispo-fond-doux: #F7F6F0;       /* fond des photos et des étiquettes */
  --dispo-bord: #E4E0D2;
  --dispo-ligne: #ECE9DF;
  --dispo-carte: #FFFFFF;
  --dispo-rayon: 20px;
}

/* ---------- Grille des cartes ---------- */
.wrapper-contents:has(> .disponnibilite-item) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  gap: 24px;
  padding: 8px 0 32px;
}
/* le clearfix créerait des cellules vides dans la grille */
.wrapper-contents:has(> .disponnibilite-item)::before,
.wrapper-contents:has(> .disponnibilite-item)::after,
.disponnibilite-item::before,
.disponnibilite-item::after {
  display: none !important;
}

/* ---------- Carte ---------- */
.disponnibilite-item {
  display: flex;
  flex-direction: column;
  margin: 0 0 24px;          /* utile seulement sans :has() */
  padding: 0;
  border: 0;
  border-radius: var(--dispo-rayon);
  overflow: hidden;
  background: var(--dispo-carte);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .08);
}
.wrapper-contents:has(> .disponnibilite-item) > .disponnibilite-item { margin: 0; }
.disponnibilite-item:last-child { border-bottom: 0; }

.disponnibilite-diaporama,
.disponnibilite-contenu {
  float: none;
  width: auto;
  margin: 0;
}

/* ---------- Photo / diaporama ---------- */
.disponnibilite-diaporama {
  background: var(--dispo-fond-doux);
  overflow: hidden;
}
.disponnibilite-diaporama .responsive-container { width: 100%; }
.disponnibilite-diaporama img.element-100 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.disponnibilite-diaporama [id^="slider_container_"] { margin: 0 auto; }

/* ---------- Contenu ---------- */
.disponnibilite-contenu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 20px;
  padding: 28px;
  color: var(--dispo-texte);
  font-size: 16px;
  line-height: 1.5;
}
.disponnibilite-contenu > div:not(.disponnibilite-btn) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.disponnibilite-contenu h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--dispo-sombre);
}
.disponnibilite-contenu p { margin: 0; }

/* 1er paragraphe = capacité, en pastille */
.disponnibilite-contenu > div > p:first-child {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--dispo-accent);
  color: var(--dispo-sombre);
  font-size: 15px;
  font-weight: 500;
}
.disponnibilite-contenu > div > p:first-child::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5M16 4.5a3.5 3.5 0 0 1 0 7M18 14.8c2 .7 3.2 2.4 3.5 5.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5M16 4.5a3.5 3.5 0 0 1 0 7M18 14.8c2 .7 3.2 2.4 3.5 5.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.disponnibilite-contenu > div > p:first-child strong { font-weight: 700; }

/* Titre 3 et légende de tableau = petit intertitre */
.disponnibilite-contenu h3,
.disponnibilite-contenu caption {
  margin: 4px 0 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--dispo-gris);
}
.disponnibilite-contenu caption { margin: 0 0 4px; }

/* Tableau = tarifs */
.disponnibilite-contenu table {
  width: 100% !important;
  height: auto !important;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}
.disponnibilite-contenu table th,
.disponnibilite-contenu table td {
  width: auto !important;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--dispo-ligne);
  background: none;
  vertical-align: baseline;
}
/* 1re colonne : période (cellule d'en-tête ou cellule simple) */
.disponnibilite-contenu table th,
.disponnibilite-contenu table td:first-child {
  text-align: left;
  font-weight: 400;
  font-size: 15px;
  color: var(--dispo-gris);
}
/* 2e colonne : prix */
.disponnibilite-contenu table td:last-child:not(:first-child),
.disponnibilite-contenu table th + td {
  text-align: right;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 700;
  color: var(--dispo-sombre);
}
/* dernière ligne (caution) : plus discrète, sans filet */
.disponnibilite-contenu table tr:last-child th,
.disponnibilite-contenu table tr:last-child td { border-bottom: 0; }
.disponnibilite-contenu table tr:last-child td:last-child:not(:first-child),
.disponnibilite-contenu table tr:last-child th + td {
  font-size: 16px;
  font-weight: 600;
  color: var(--dispo-texte);
}

/* Liste à puces = étiquettes */
.disponnibilite-contenu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.disponnibilite-contenu ul li {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--dispo-bord);
  border-radius: 999px;
  background: var(--dispo-fond-doux);
  font-size: 14px;
  color: var(--dispo-texte);
}
.disponnibilite-contenu ul li::before { display: none; }

/* ---------- Bouton « Demander une disponibilité » ---------- */
.disponnibilite-btn {
  position: static;
  float: none;
  order: 99;               /* affiché en bas de carte */
  margin-top: auto;
}
.disponnibilite-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  background: var(--dispo-accent);
  color: var(--dispo-sombre) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
.disponnibilite-btn a::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M9 15l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M9 15l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.disponnibilite-btn a:hover {
  background: var(--dispo-accent-survol);
}
.disponnibilite-btn a:focus-visible {
  outline: 3px solid var(--dispo-sombre);
  outline-offset: 3px;
}

/* ---------- Bloc « Comment réserver » ---------- */
.dispo-intro {
  grid-column: 1 / -1;       /* toute la largeur de la grille */
  margin: 0 0 8px;
  padding: 32px;
  border-radius: var(--dispo-rayon);
  background: var(--dispo-intro-fond);
  color: #FFFFFF;
}
.dispo-intro h2 {
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-size: 24px !important;
  font-weight: 600;
  color: #FFFFFF !important;
  background: none !important;
}
.dispo-intro h2::before {
  content: "";
  display: block;
  width: 56px; height: 6px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: var(--dispo-accent);
}
.dispo-intro ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dispo-etape;
}
.dispo-intro ol li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--dispo-intro-fond-2);
  font-size: 15px;
  line-height: 1.5;
  color: #E4EAEE;
  counter-increment: dispo-etape;
}
.dispo-intro ol li::before {
  content: counter(dispo-etape);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--dispo-accent);
  color: var(--dispo-sombre);
  font-weight: 700;
}
.dispo-intro strong { font-weight: 600; color: #FFFFFF; }
.dispo-intro p {
  margin: 20px 0 0 !important;
  font-size: 15px;
  color: #E4EAEE;
}
.dispo-intro a {
  color: #FFFFFF !important;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.dispo-intro a:focus-visible {
  outline: 3px solid var(--dispo-accent);
  outline-offset: 3px;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .wrapper-contents:has(> .disponnibilite-item) { padding-left: 16px; padding-right: 16px; gap: 20px; }
  .dispo-intro { padding: 24px 18px; }
  .disponnibilite-contenu { padding: 20px; gap: 18px; }
  .disponnibilite-contenu h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .disponnibilite-btn a { transition: none; }
}