/* =============================================================================
   Coyard : apparence reprise de FutureProspects (style 4) sur Cassiopeia - V2
   Emplacement : media/templates/site/cassiopeia_cassiopeia_coyard/css/user.css
   Les images (../images/...) sont celles copiees par copie_fichiers.sh
   ========================================================================== */

/* --- 1. Couleurs, polices, base ------------------------------------------- */
:root {
  --cassiopeia-color-primary: #7a0405;
  --cassiopeia-color-link:    #7a0405;
  --cassiopeia-color-hover:   #000;
  --coyard-menu-red: #a10327;
  --coyard-font-size: 12px;            /* reglage du style FutureProspects (template.css : 14px) */
}
body.site {
  font-family: Helvetica, Arial, sans-serif;
  font-size: var(--coyard-font-size);
  line-height: 24px;
  color: #666;
  background-color: #fafafa;
  border-top: 4px solid #0f0f0f;
}
a { color: #7a0405; text-decoration: none; }
a:hover, a:focus, a:active { color: #000; text-decoration: none; }
p { margin: 12px 0; }

h1, h2, h3, h4, h5, h6 { margin: 10px 0; letter-spacing: 0; font-weight: 300; }
h1, h2, h3, h1 a, h2 a, h3 a { color: #7a0405; }
h1 { font-size: 39px; line-height: 48px; }
h2 { font-size: 30px; line-height: 36px; }
h3 { font-size: 20px; line-height: 30px; }       /* reduit par le CSS personnalise */
h4 { font-size: 18px; line-height: 27px; }
h5 { font-size: 14px; line-height: 24px; }
h6 { font-size: 12px; line-height: 18px; }
h4, h5, h6 { text-transform: capitalize; color: #000; }

.btn-primary {
  --bs-btn-bg: #a10327;            --bs-btn-border-color: #a10327;
  --bs-btn-hover-bg: #000;         --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000;        --bs-btn-active-border-color: #000;
}

/* --- 2. En-tete : fond sombre + logo ---------------------------------------- */
.container-header {
  background:
    url(../images/body/header-glow.jpg) no-repeat center top,
    url(../images/body/header-bg.jpg) repeat-x top,
    #010101;
  color: #eee;
  box-shadow: none;
}
.container-header .navbar-brand { margin: 30px 0 32px; }   /* logoMarginTop / Bottom */

/* --- 3. Menu principal (A VALIDER avec le HTML reel de Joomla 6) ------------- */
.container-header .container-nav {
  background-color: #0a0a0a;
  border-bottom: 1px solid #282828;
  border-radius: 4px;
  box-shadow: inset 0 2px 4px 0 #000;
  margin-bottom: 15px;
}
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button {
  font-size: 12px;
  line-height: 42px;
  height: 42px;
  padding: 0 18px;
  color: #888;
  background: transparent;
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .mod-menu > li:hover > a,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li > button:hover,
.container-header .mod-menu > li.active > button {
  background: url(../images/style4/menu_hover.png) repeat-x center bottom transparent;
  color: #fff;
}
/* sous-menus */
.container-header .mod-menu ul,
.container-header .mod-menu__sub {
  background: rgba(0, 0, 0, .9);
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .2);
}
.container-header .mod-menu ul li > a,
.container-header .mod-menu ul li > span {
  display: block;
  min-width: 200px;
  padding: 0 20px;
  line-height: 42px;
  font-size: 12px;
  color: #959595;
  border-bottom: 1px solid #222;
}
.container-header .mod-menu ul li:last-child > a { border-bottom: 0; }
.container-header .mod-menu ul li > a:hover,
.container-header .mod-menu ul li > a:focus,
.container-header .mod-menu ul li.active > a {
  color: #fff;
  background-color: var(--coyard-menu-red);
}

/* --- 4. Bandeau du slider et pied de page ---------------------------------- */
.container-banner {
  background: #b1b1b1 url(../images/body/slider-bg.png) repeat-x top;
}
.container-footer {
  background-color: #050505;
  color: #707070;
  font-size: 11px;
  padding: 9px 20px 20px;
}
.container-footer a { color: #fff; }
.container-footer a:hover { text-decoration: underline; }

/* --- 5. Classes specifiques du contenu (addons STVA et CSS personnalise) ---- */
.flag {                                   /* drapeaux (pages references) */
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .5);
  height: 70px;
  margin: 15px;
}
.kolom-rechts { text-indent: 0; }         /* alignement tableau doc */
.mobileShow { display: none; }            /* visible seulement sur smartphone */
@media (max-width: 480px) { .mobileShow { display: inline; } }

.datasheet_frame { background-color: #e8e8e8; padding: 5px 20px; margin-bottom: 15px; }
.pdf_file_list { list-style-image: url(/images/pdf_icon.png); margin-left: 30px !important; }
.news_header {
  font-size: 120%; color: #fff; background-color: #7a0405;
  padding: 5px 20px; margin-bottom: 0;
}
.news_container { background-color: #e8e8e8; padding: 5px 20px; }
.news_date  { font-size: 80% !important; font-weight: lighter !important; }
.news_title { font-weight: bold !important; }
ul.square-list li { list-style-type: square; }
li.lang-active > a:hover { text-decoration: none !important; }   /* drapeau langue actif */

/* Gestion des fiches techniques (page Documentation) */
#FTs { display: flex; flex-flow: row wrap; }
.FT_box { display: inline; width: 45%; margin-right: 3%; }
.FT_box > ol > li { color: #000; font-weight: bold; margin-bottom: 1em; }
.FT_box ol {
  counter-reset: li;
  list-style: none;
  font: 15px 'Trebuchet MS', 'Lucida Sans', sans-serif;
  padding: 0;
  margin-bottom: 2em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.FT_box ol ol { margin: 0 0 0 2em; }
.FT_box a {
  position: relative;
  display: block;
  width: 90%;
  padding: .4em .4em .4em .8em;
  margin: .5em 0 .5em 2.5em;
  background: #ddd;
  color: #444;
  text-decoration: none;
  transition: all .3s ease-out;
}
.FT_box > ol > li > a { font-weight: bold; background: #bbb; }
.FT_box > ol > li > ol > li > a { background: #cdcdcd; }
.FT_box a:hover { background: #eee; }
.FT_box a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -2.5em;
  top: 50%;
  margin-top: -1em;
  background: #7b0000;
  color: #fff;
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  font-weight: bold;
}
.FT_box a:after {
  position: absolute;
  content: '';
  border: .5em solid transparent;
  left: -1em;
  top: 50%;
  margin-top: -.5em;
  transition: all .3s ease-out;
}
.FT_box a:hover:after { left: -.5em; border-left-color: #7b0000; }
a.nolink { cursor: no-drop; }

/* --- 5b. Largeur du site (OPTIONNEL) : l'ancien site faisait 940 px ----------
   Decommenter pour retrouver cette largeur (a tester sur Cassiopeia de Joomla 6).
.site-grid {
  grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 13.9rem)) [main-end] minmax(0, 1fr) [full-end];
}
*/

/* --- 5c. Selecteur de langue dans le coin de l'en-tete (position topbar) ----- */
.container-topbar { display: flex; justify-content: flex-end; }

/* --- 6. Slider Coyard : fondu automatique, sans JavaScript (5 x 3,5 s) ------ */
.coyard-slider {
  --t: 3.5s; position: relative; overflow: hidden;
  max-width: 940px; height: 350px; margin: 0 auto;   /* images d'origine : 940 x 350 */
}
.coyard-slide {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  animation: coyard-fade calc(5 * var(--t)) infinite;
}
.coyard-slide:nth-child(2) { animation-delay: calc(1 * var(--t)); }
.coyard-slide:nth-child(3) { animation-delay: calc(2 * var(--t)); }
.coyard-slide:nth-child(4) { animation-delay: calc(3 * var(--t)); }
.coyard-slide:nth-child(5) { animation-delay: calc(4 * var(--t)); }
.coyard-slide img { width: 100%; height: 100%; object-fit: cover; }
.coyard-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .75rem 1.5rem; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 14px; line-height: 1.5;
}
.coyard-slide figcaption h3 { color: #fff; margin: 0 0 .25rem; }
.coyard-slide figcaption p { margin: 0; }
.coyard-slider:hover .coyard-slide { animation-play-state: paused; }
@keyframes coyard-fade { 0% { opacity: 0 } 4% { opacity: 1 } 20% { opacity: 1 } 24% { opacity: 0 } 100% { opacity: 0 } }
@media (max-width: 480px) { .coyard-slider { height: 280px; } }
@media (prefers-reduced-motion: reduce) {
  .coyard-slide { animation: none; }
  .coyard-slide:first-child { opacity: 1; }
}