/* ===========================================================================
   Site vitrine
   ---------------------------------------------------------------------------
   La partie publique du site : ce qu'un visiteur voit avant d'avoir un
   compte. Elle a sa feuille à elle, distincte de `style.css` — qui porte
   l'héritage — et de `admin.css`, réservée à l'espace membre.

   Les couleurs viennent du thème du club, injecté par theme_styles() :
   --couleur-primaire, --couleur-secondaire, --couleur-accent. Chacune est
   doublée d'une valeur littérale, pour qu'un thème absent ne laisse pas
   une page en noir sur noir.
   =========================================================================== */

:root {
  --vt-primaire:   #026D7E;
  --vt-secondaire: #09599B;
  --vt-accent:     #E24A2E;

  --vt-encre:      #1d2b33;
  --vt-texte:      #3d4a53;
  --vt-doux:       #6b7780;
  --vt-pale:       #939ea6;
  --vt-trait:      #e3e8ec;
  --vt-fond:       #f6f8f9;
  --vt-carte:      #ffffff;

  --vt-rayon:      10px;
  --vt-mesure:     72rem;   /* largeur de lecture confortable */
  --vt-ombre:      0 1px 2px rgba(29, 43, 51, .06), 0 8px 24px rgba(29, 43, 51, .06);
}

/* Le thème du club prend la main quand il est là. */
:root { --vt-primaire: var(--couleur-primaire, #026D7E); }
:root { --vt-secondaire: var(--couleur-secondaire, #09599B); }
:root { --vt-accent: var(--couleur-accent, #E24A2E); }

/* ---------- Trame commune ------------------------------------------------ */

.vt { color: var(--vt-texte); line-height: 1.65; }

.vt-section { padding: 3.4rem 1.25rem; }
.vt-section:nth-child(even) { background: var(--vt-fond); }
.vt-dedans { max-width: var(--vt-mesure); margin: 0 auto; }

.vt-titre {
  margin: 0 0 .4rem;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700; letter-spacing: -.01em; color: var(--vt-encre);
}
.vt-chapeau {
  margin: 0 0 2rem; max-width: 46rem;
  font-size: 1.02rem; color: var(--vt-doux);
}

/* Un filet court sous le titre, aux couleurs du club : de la couleur sans
   aplat, qui laisse le texte respirer. */
.vt-titre::after {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 2px;
  margin-top: .7rem; background: #026D7E; background: var(--vt-primaire);
}

.vt-lien-fort {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #026D7E; background: var(--vt-primaire);
  color: #fff; text-decoration: none;
  padding: .7rem 1.4rem; border-radius: 6px;
  font-weight: 600; font-size: .95rem;
  transition: filter .15s, transform .15s;
}
.vt-lien-fort:hover { filter: brightness(.9); color: #fff; transform: translateY(-1px); }

.vt-lien-doux {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #026D7E; color: var(--vt-primaire); text-decoration: none;
  padding: .7rem 1.2rem; border-radius: 6px; font-weight: 600; font-size: .95rem;
  border: 1px solid var(--vt-trait);
}
.vt-lien-doux:hover { border-color: currentColor; }

/* ---------- Bandeau d'accueil -------------------------------------------- */

.vt-une {
  padding: 4rem 1.25rem 3.4rem;
  background: linear-gradient(180deg, var(--vt-fond), var(--vt-carte));
  border-bottom: 1px solid var(--vt-trait);
}
.vt-une-dedans {
  max-width: var(--vt-mesure); margin: 0 auto;
  display: grid; gap: 2.4rem; align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .vt-une-dedans { grid-template-columns: 1fr; } }

.vt-une h1 {
  margin: 0 0 .8rem;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.15; font-weight: 800; letter-spacing: -.02em;
  color: var(--vt-encre);
}
.vt-une .accroche { margin: 0 0 1.6rem; font-size: 1.1rem; color: var(--vt-doux); max-width: 34rem; }
.vt-une-actions { display: flex; gap: .7rem; flex-wrap: wrap; }

.vt-surtitre {
  display: inline-block; margin-bottom: .9rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: #026D7E; color: var(--vt-primaire);
}

/* Les chiffres du club, à droite du bandeau. */
.vt-chiffres { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-chiffre {
  background: var(--vt-carte); border: 1px solid var(--vt-trait);
  border-radius: var(--vt-rayon); padding: 1.1rem 1rem; text-align: center;
}
.vt-chiffre .n {
  display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1;
  color: #026D7E; color: var(--vt-primaire);
  font-variant-numeric: tabular-nums;
}
.vt-chiffre .quoi { font-size: .82rem; color: var(--vt-doux); }

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

.vt-cartes {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.vt-carte {
  background: var(--vt-carte); border: 1px solid var(--vt-trait);
  border-radius: var(--vt-rayon); padding: 1.15rem 1.2rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.vt-carte:hover { box-shadow: var(--vt-ombre); transform: translateY(-2px); }
.vt-carte h3 { margin: 0; font-size: 1.02rem; font-weight: 650; color: var(--vt-encre); }
.vt-carte p  { margin: 0; font-size: .92rem; color: var(--vt-doux); }

/* Le repli des demandes de participation. */
.vt-participer { margin-top: .4rem; border-top: 1px solid var(--vt-trait); padding-top: .7rem; }
.vt-participer > summary {
  cursor: pointer; font-weight: 600; font-size: .92rem;
  color: #026D7E; color: var(--vt-primaire); list-style: none;
}
.vt-participer > summary::-webkit-details-marker { display: none; }
.vt-participer > summary::before { content: "+ "; font-weight: 700; }
.vt-participer[open] > summary::before { content: "– "; }
.vt-participer .vt-form { margin-top: .8rem; max-width: none; }

/* ---------- Prochains événements ----------------------------------------- */

.vt-event { display: flex; gap: 1rem; align-items: flex-start; }
.vt-event-date {
  flex: none; width: 68px; text-align: center; border-radius: 8px;
  background: var(--vt-fond); padding: .5rem .3rem;
  border-top: 3px solid #026D7E; border-top-color: var(--vt-primaire);
}
.vt-event-date .j { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--vt-encre); }
.vt-event-date .m { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vt-doux); }
.vt-event-corps { flex: 1; min-width: 0; }
.vt-event-corps h3 { margin: 0 0 .15rem; }
.vt-event-meta {
  display: flex; flex-wrap: wrap; gap: .15rem .9rem;
  font-size: .85rem; color: var(--vt-doux); margin-bottom: .4rem;
}
.vt-event-meta i { margin-right: .3rem; color: var(--vt-pale); }

/* ---------- Annuaire des membres ----------------------------------------- */

.vt-membres {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.vt-membre {
  background: var(--vt-carte); border: 1px solid var(--vt-trait);
  border-radius: var(--vt-rayon); padding: 1.1rem 1rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .55rem; text-decoration: none; color: inherit;
  transition: box-shadow .18s, transform .18s;
}
.vt-membre:hover { box-shadow: var(--vt-ombre); transform: translateY(-2px); color: inherit; }

.vt-membre-logo {
  height: 74px; width: 100%; display: flex; align-items: center; justify-content: center;
}
.vt-membre-logo img { max-height: 74px; max-width: 100%; object-fit: contain; }

.vt-membre .nom { font-weight: 650; font-size: .95rem; color: var(--vt-encre); line-height: 1.35; }
.vt-membre .qui { font-size: .84rem; color: var(--vt-doux); }
.vt-membre .secteur {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #026D7E; color: var(--vt-primaire);
  background: var(--vt-fond); border-radius: 10px; padding: .2em .65em;
}

/* Une carte qui s'ouvre sur une illustration. */
.vt-carte-illustree { align-items: flex-start; }
.vt-carte-illustree img { max-height: 76px; margin-bottom: .3rem; }

/* Un sous-titre à l'intérieur d'une section, notamment dans une page
   rédigée depuis le back-office. */
.vt-sous-titre {
  margin: 2.6rem 0 1.2rem; font-size: 1.1rem; font-weight: 650;
  color: var(--vt-encre);
}
.page-cms .vt-sous-titre:first-child { margin-top: 0; }

/* ---------- Ce que le club apporte --------------------------------------- */

.vt-atouts { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.vt-atout { text-align: center; }
.vt-atout i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: .8rem; border-radius: 50%;
  font-size: 1.35rem;
  background: #E8F3F0; color: #026D7E; color: var(--vt-primaire);
}
.vt-atout h3 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 650; color: var(--vt-encre); }
.vt-atout p  { margin: 0; font-size: .9rem; color: var(--vt-doux); }

/* ---------- Formulaires du site public ----------------------------------- */

.vt-form { max-width: 40rem; }
.vt-champs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vt-champ { display: block; min-width: 0; }
.vt-champ label,
.vt-libelle {
  display: block; margin-bottom: .35rem;
  font-size: .78rem; font-weight: 600; color: var(--vt-doux);
}
.vt-champ input[type=search],
.vt-champ input[type=text],
.vt-champ input[type=email],
.vt-champ input[type=tel],
.vt-champ input[type=number],
.vt-champ select,
.vt-champ textarea {
  width: 100%; padding: .6rem .7rem;
  border: 1px solid #d5dce1; border-radius: 6px; background: var(--vt-carte);
  font: inherit; font-size: .95rem; color: var(--vt-texte);
  transition: border-color .15s, box-shadow .15s;
}
.vt-champ input:focus, .vt-champ select:focus, .vt-champ textarea:focus {
  outline: none; border-color: #026D7E; border-color: var(--vt-primaire);
  box-shadow: 0 0 0 3px rgba(2, 109, 126, .12);
}
.vt-champ textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.vt-note { margin: .35rem 0 0; font-size: .8rem; color: var(--vt-pale); }

.vt-form button[type=submit] {
  margin-top: 1.2rem;
  background: #026D7E; background: var(--vt-primaire);
  color: #fff; border: 0; border-radius: 6px;
  padding: .75rem 1.5rem; font: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer; transition: filter .15s;
}
.vt-form button[type=submit]:hover { filter: brightness(.9); }

/* Le champ leurre : hors de vue sans sortir du document, pour que les
   robots le remplissent. */
.vt-leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vt-message {
  margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: var(--vt-rayon);
  font-size: .93rem; border-left: 3px solid;
}
.vt-message.ok     { background: #eef7f2; border-color: #1E7A54; color: #16593d; }
.vt-message.erreur { background: #fdeeec; border-color: #c0392b; color: #8f2b20; }

/* ---------- Appel final --------------------------------------------------- */

.vt-appel {
  background: var(--vt-carte); border: 1px solid var(--vt-trait);
  border-radius: var(--vt-rayon); padding: 2.2rem 1.6rem; text-align: center;
}
.vt-appel h2 { margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 700; color: var(--vt-encre); }
.vt-appel p  { margin: 0 auto 1.4rem; max-width: 38rem; color: var(--vt-doux); }

/* ---------- Vide ---------------------------------------------------------- */

.vt-vide {
  margin: 0; padding: 1.6rem; text-align: center;
  color: var(--vt-pale); font-size: .93rem;
  border: 1px dashed var(--vt-trait); border-radius: var(--vt-rayon);
}

/* Filtre de l'annuaire public : deux champs sur une ligne, le compteur en
   dessous. Un visiteur qui cherche un couvreur ne doit pas lire tout
   l'annuaire pour le trouver. */
.vt-filtre { margin: 0 0 1.6rem; align-items: end; }
.vt-filtre .vt-champ { max-width: 22rem; }
.vt-filtre-compte { grid-column: 1 / -1; margin: 0; }