/* 
-----------------------------------------------------------------------
 1. Image de fond sur tout le site (url ou chemin interne du serveur)
---------------------------------------------------------------------
*/
body {
  background-image: url('/images/site/fond.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  min-height: 100vh;
}

/* 
-----------------------------------------------------------------------
  2. Donne une couleur générale à toutes les pages, y compris les sidebar left et right, règle la transparence (dernier chiffre du rgba et surtout réduit la largeur général du site par apport au fond) (pour séparer les couleurs des sidebars, voir le site du jumelage)
-----------------------------------------------------------------------------------
*/
.site-grid {
  background-color: rgba(247, 248, 217, 0.92) !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2em;
  border-radius: 8px;
}

/*
-----------------------------------------------------------------------------------
   3. MENU  Barre d'en-tête (container-header) — rouge Cassiopeia remplacé par la couleur désirée
   --------------------------------------------------------------------------------------- */
:root {
    --cassiopeia-color-primary: #c82b26;
    --cassiopeia-color-hover: #c82b26;
}
.container-header {
    background-color: #c82b26 !important;
    background-image: none !important;
}
/* 
----------------------------------------------------------------------
Texte des liens du footer en noir (au lieu du blanc par défaut, invisible sur fond crème) class footer-links à mettre dans le module
-------------------------------------------------------------------------
*/
.footer-links a {
    color: #000 !important;
}
.footer-links a:hover {
    color: #CC1515 !important;
}
/*
----------------------------------------------------------------------------------------
banniere du site, penser à mettre la class "menu-banner" dans l'élément du lien de menu et dropdown-nav dans le module du menu, dropdown dans la mise en page
----------------------------------------------------------------------------------
*/
.dropdown-nav .menu-banner > a,
.dropdown-nav a.menu-banner,
.dropdown-nav li.menu-banner > a {
    background-image: url('/images/banners/banniere-jaune.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    width: clamp(200px, 90vw, 1000px) !important;
    max-width: 600px !important; /*longueur image et en dessous: height = largeur*/
    height: 50px !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    display: block !important;
}
.dropdown-nav .menu-banner > a:hover,
.dropdown-nav a.menu-banner:hover {
    background-color: transparent !important;
    transform: none !important;
}
/*
--------------------------------------------------------------------------
   4. Menu principal (haut de page) — remplace MaxiMenuCK
      (module "Menu principal", suffixe de classe de module : dropdown-nav)
   --------------------------------------------------------------------------
*/
.dropdown-nav ul { list-style: none; margin: 0; padding: 0; }
.dropdown-nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.dropdown-nav > ul > li { position: relative; }
.dropdown-nav > ul > li > a {
    display: block; padding: 8px 16px;
    color: #000 !important; background: #FEF7ED;
    text-decoration: none; font-weight: bold;
    font-size: 14px;
    border-radius: 8px 8px 0 0;/*Arrondi du bouton*/
    transition: transform 0.15s ease;
}
.dropdown-nav > ul > li > a:hover {
    background: #F7F8D9; color: #000 !important;/*effet souris sur btn*/
    transform: translateY(-2px);/*fond bleu foncé et écriture blanche*/
}
.dropdown-nav ul ul {
    display: none; position: absolute; top: 100%; left: 0;
    min-width: 200px; background: #FEF7ED; z-index: 100;
    border: 1px solid #e5d9c3;
}
.dropdown-nav li.open > ul { display: block; }
.dropdown-nav ul ul li a {
    display: block; padding: 8px 16px;
    color: #000 !important; text-decoration: none;
    font-size: 14px;
    transition: transform 0.15s ease;
}
.dropdown-nav ul ul li a:hover {
    background: #C82B26; color: #000 !important;
    transform: translateY(-2px);
}
/* 
-----------------------------------------------------------------------
  5 Menu hamburger (mobile)  voir aussi le fichier user.js
-----------------------------------------------------------------------
*/
.nav-toggle {
  display: none;
  background: #FEF7ED;
  border: none;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  padding: 8px 16px;
  margin: 0 auto 8px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
  .dropdown-nav > ul {
    display: none;
    flex-direction: column;
  }
  .dropdown-nav.mobile-open > ul {
    display: flex;
  }
  .dropdown-nav > ul > li {
    width: 100%;
  }
  .dropdown-nav > ul > li > a {
    border-radius: 8px;
  }
  .dropdown-nav ul ul {
    position: static;
    border: none;
    width: 100%;
  }
}
/*
--------------------------------------------------------------------------------------------------
   6. Contact — formulaire de contact - mise en forme du formulaire joomla. Ne prends pas en charge le tableau de la liste des contacts, voir le site jumelage qui le fait. Ne pas oublier de mettre dans le lien de menu: "page-contact" dans "affichage de la page"  "classe de page"---------------------------------------------------------
*/
body.page-contact .com-contact.contact h3 {
    display: none;
}
body.page-contact .com-contact.contact {
    max-width: 600px;
    margin: 20px auto;
    padding: 24px;
    background: #FFFBEA;
    border: 1px solid #e5d9c3;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.08);
}
body.page-contact .com-contact.contact h1 {
    font-size: 1.6rem !important;
}
body.page-contact .com-contact.contact h2 {
    font-size: 1.2rem !important;
}
body.page-contact .com-contact.contact textarea {
    height: 120px !important;
}
body.page-contact .com-contact.contact button[type="submit"] {
    background-color: #CC1515 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}
/*
-------------------------------------------------------------------
    7 - schema.org pour les IA  IMPORTANT: il faut vérifier tous les ans si les infos son bonnes
----------------------------------------------------------------
*/
document.addEventListener('DOMContentLoaded', function () {
  var schema = document.createElement('script');
  schema.type = 'application/ld+json';
  schema.text = JSON.stringify({
    "@context": "https://schema.org",
    "@type": "TouristAttraction",
    "name": "TFBCO – Tourisme Ferroviaire de la Brie Champenoise à l'Omois",
    "description": "Association de tourisme ferroviaire proposant des balades en autorail Picasso des années 1950 entre Montmirail et Artonges, un musée ferroviaire et une maison de garde-barrière restaurée.",
    "url": "https://www.tfbco.eu",
    "sameAs": "https://www.tfbco.fr",
    "image": "https://www.tfbco.eu/images/articles/home/images/6_le_picasso.jpg",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "23 avenue Charles de Gaulle",
      "addressLocality": "Montmirail",
      "postalCode": "51210",
      "addressCountry": "FR"
    },
    "openingHoursSpecification": {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Sunday",
      "validFrom": "2026-05-02",
      "validThrough": "2026-10-03"
    },
    "telephone": "+33640294020"
  });
  document.head.appendChild(schema);
});