/* Copyroom Child Template - Design fidele a l'ancien site */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800;900&family=Playfair+Display:wght@400;700;900&family=Droid+Sans:wght@400;700&display=swap");

:root {
    --hue: 28;
    --template-bg-light: #f5f5f5;
    --template-text-dark: #333333;
    --template-text-light: #ffffff;
    --template-link-color: #006699;
    --template-special-color: #fa9401;
    --cassiopeia-color-primary: #fa9401;
    --cassiopeia-color-link: #992f17;
    --cassiopeia-color-hover: #333333;
    --copyroom-orange: #fa9401;
    --copyroom-red: #e54d40;
    --copyroom-green: #24b05b;
    --copyroom-blue: #006699;
    --copyroom-dark: #333333;
    --copyroom-brown: #78473C;
    --copyroom-brown-dark: #360e05;
    --copyroom-link: #992f17;
    --copyroom-light: #f5f5f5;
}

/* === RESET === */
body {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--copyroom-dark);
    background-color: #fff;
}

/* ======================
   HEADER - fond BLANC comme l'ancien site
   (logorow = blanc, bordure orange en bas)
   ====================== */
.container-header {
    background: #ffffff !important;
    border-bottom: none;
    padding: 0;
    box-shadow: none !important;
    box-sizing: border-box;
}

.container-header *,
.container-header *::before,
.container-header *::after {
    box-sizing: border-box;
}

/* Logorow : logo + description — logo centre */
.container-logorow {
    border-bottom: none;
    padding: 10px 0;
    width: 100%;
    display: block;
    text-align: center;
}

/* Annuler le padding Cassiopeia sur les enfants du header */
.container-header .grid-child {
    padding: 0 !important;
}

/* Logo */
.container-header .brand-logo img {
    max-height: 80px;
    width: auto;
}

.container-header .navbar-brand {
    padding: 10px 0;
    display: inline-block;
    text-align: center;
}

.container-header .site-description {
    color: #999;
    font-size: 12px;
}

/* ======================
   TOPBAR - barre sombre (contact info + menu principal)
   Ancien site : row1 = #333, row3 = #360e05
   On met le menu dans le topbar avec fond brun fonce
   ====================== */
.container-topbar {
    background-color: var(--copyroom-brown-dark) !important;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    display: block;
}

/* Barre contact (module custom dans topbar) */
.container-topbar .mod-custom {
    color: #eee;
    font-size: 13px;
    padding: 3px 10px;
}

.container-topbar .mod-custom a {
    color: #eee !important;
}

.container-topbar .mod-custom a:hover {
    color: var(--copyroom-orange) !important;
}

/* ======================
   NAVIGATION (dans le topbar)
   Ancien site : fond #360e05, items en Playfair Display
   ====================== */
.container-topbar .mod-menu {
    background-color: var(--copyroom-brown-dark);
}

nav .mod-menu,
.container-topbar > .mod-menu,
.container-topbar ul.mod-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.container-topbar .mod-menu > li > a,
nav .mod-menu > li > a {
    display: block;
    color: #fff !important;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    padding: 6px 10px;
    text-decoration: none;
    transition: background 0.3s;
    border-radius: 0;
    margin: 0;
    white-space: nowrap;
}

.container-topbar .mod-menu > li:hover > a,
.container-topbar .mod-menu > li.active > a,
.container-topbar .mod-menu > li.current > a,
nav .mod-menu > li:hover > a,
nav .mod-menu > li.active > a,
nav .mod-menu > li.current > a {
    background-color: var(--copyroom-orange) !important;
    color: #fff !important;
}

/* Dropdown */
.container-topbar .mod-menu .mod-menu__sub,
nav .mod-menu .mod-menu__sub {
    background-color: var(--copyroom-dark) !important;
    border-radius: 0 20px 20px 20px;
    padding: 12px;
    min-width: 200px;
    border: none;
}

.container-topbar .mod-menu .mod-menu__sub a,
nav .mod-menu .mod-menu__sub a {
    color: #fff !important;
    font-size: 12px;
    font-family: "Playfair Display", serif;
    padding: 4px 10px;
    display: block;
    line-height: 25px;
}

.container-topbar .mod-menu .mod-menu__sub a:hover,
nav .mod-menu .mod-menu__sub a:hover {
    color: var(--copyroom-orange) !important;
    background: transparent !important;
}

/* ======================
   CAROUSEL - taille controlee comme l'ancien site
   ====================== */
.container-banner {
    overflow: hidden;
    max-height: 400px;
    background: #000;
}

.carousel-copyroom {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height: 400px;
}

.carousel-copyroom .carousel-slides {
    display: flex;
    animation: carousel-scroll 18s infinite;
    width: 300%;
}

.carousel-copyroom .carousel-slide {
    min-width: 33.333%;
    position: relative;
    overflow: hidden;
    max-height: 400px;
}

.carousel-copyroom .carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 400px;
}

@keyframes carousel-scroll {
    0%, 28% { transform: translateX(0); }
    33%, 61% { transform: translateX(-33.333%); }
    66%, 94% { transform: translateX(-66.666%); }
    100% { transform: translateX(0); }
}

/* ======================
   HEADINGS - identique ancien site
   ====================== */
h1, h1 a {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: var(--copyroom-dark);
    padding: 20px 0;
    margin: 0;
    line-height: 1;
}

h2, h2 a {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--copyroom-dark);
    padding: 10px 0;
    margin: 0;
    line-height: 1;
    border-bottom: none;
    display: block;
}

h3 {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--copyroom-dark);
    padding: 10px 0;
    margin: 0;
    line-height: 1.4;
}

h4 {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--copyroom-dark);
}

/* ======================
   LINKS - brun/marron comme ancien site
   ====================== */
a {
    color: var(--copyroom-link);
    text-decoration: none;
    transition: all 0.3s;
}

a:hover, a:active, a:focus {
    color: var(--copyroom-dark);
    text-decoration: none;
}

/* ======================
   BUTTONS - arrondis, brun comme ancien site
   ====================== */
.btn,
button.btn,
a.btn,
.btn-primary,
.btn-secondary,
p.readmore a,
a.readmore {
    display: inline-block;
    padding: 5px 14px;
    border: 0 !important;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    background-color: var(--copyroom-brown) !important;
    color: #eee !important;
    transition: all 0.3s;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
}

.btn:hover,
button.btn:hover,
a.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
p.readmore a:hover,
a.readmore:hover {
    background-color: var(--copyroom-brown-dark) !important;
    color: #fff !important;
}

/* ======================
   CONTENT AREA
   ====================== */
/* Grille 4 colonnes avec named lines pour compatibilite Cassiopeia */
.site-grid {
    max-width: 1060px;
    margin: 0 auto;
    grid-template-columns: [full-start main-start] repeat(4, 1fr) [main-end full-end] !important;
    grid-gap: 0 !important;
    grid-template-areas:
        "banner banner banner banner"
        "top-a top-a top-a top-a"
        "top-b top-b top-b top-b"
        "comp comp comp comp"
        "side-r side-r side-r side-r"
        "bot-a bot-a bot-a bot-a"
        "bot-b bot-b bot-b bot-b" !important;
}

.site-grid > .full-width {
    grid-column: full-start / full-end !important;
}

/* Header centre */
.container-header {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
}

/* Desktop avec sidebar (detection via :has) */
@media (min-width: 992px) {
    .site-grid:has(.container-sidebar-right) {
        grid-template-areas:
            "banner banner banner banner"
            "top-a top-a top-a top-a"
            "top-b top-b top-b top-b"
            "comp comp comp side-r"
            "bot-a bot-a bot-a bot-a"
            "bot-b bot-b bot-b bot-b" !important;
    }
    .site-grid:has(.container-sidebar-left) {
        grid-template-areas:
            "banner banner banner banner"
            "top-a top-a top-a top-a"
            "top-b top-b top-b top-b"
            "side-l comp comp comp"
            "bot-a bot-a bot-a bot-a"
            "bot-b bot-b bot-b bot-b" !important;
    }
}

/* Introduction (top-a) */
.container-top-a {
    padding: 10px 0;
}

.container-top-a .card {
    border: none;
    background: transparent;
}

.container-top-a .card-body {
    padding: 0;
}

/* Featured articles grid */
.blog-featured .blog-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.blog-featured .blog-item {
    padding: 10px;
}

.blog-featured .item-title a {
    font-size: 16px;
    font-weight: 700;
    color: var(--copyroom-dark);
    line-height: 1.2;
    text-shadow: 1px 1px 0 #fff;
}

.blog-featured .item-title a:hover {
    color: var(--copyroom-green);
    text-shadow: 2px 2px 0 #fff;
}

.blog-featured h2.item-title {
    min-height: 40px;
    font-size: 16px;
    padding: 5px 0;
}

.blog-featured .item-image img,
.item-image img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.blog-featured .item-image img:hover {
    box-shadow: 0 10px 20px #ccc;
    transform: scale(1.1);
}

.article-info {
    font-size: 12px;
    color: #999;
}

/* ======================
   SIDEBAR - cadre orange arrondi comme ancien site
   ====================== */
.container-sidebar-right,
.container-sidebar-left {
    margin-top: 30px;
}

.container-sidebar-right .card,
.container-sidebar-left .card,
.sidebar-right.card {
    background: rgba(255,255,255,0.4);
    border-radius: 20px;
    border: 1px solid var(--copyroom-orange);
    margin-bottom: 15px;
}

.container-sidebar-right .card-header,
.container-sidebar-left .card-header,
.sidebar-right .card-header {
    background-color: transparent !important;
    border: none;
    color: var(--copyroom-green) !important;
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 10px 15px;
}

.container-sidebar-right .mod-menu a,
.sidebar-right .mod-menu a {
    color: var(--copyroom-link);
    font-weight: 700;
    padding: 5px 15px;
    display: block;
    font-size: 13px;
}

.container-sidebar-right .mod-menu a:hover,
.sidebar-right .mod-menu a:hover {
    color: var(--copyroom-dark);
}

.container-sidebar-right li,
.sidebar-right li {
    border-bottom: 1px solid #eee;
    padding: 5px 0;
    list-style: none;
}

.container-sidebar-right .active a,
.sidebar-right .active a {
    color: var(--copyroom-brown-dark);
}

/* ======================
   FOOTER - fond sombre
   ====================== */
.container-footer,
.footer {
    background: var(--copyroom-dark) !important;
    background-image: none !important;
    color: #eee;
    padding: 20px 0;
    margin-top: 0 !important;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    box-sizing: border-box;
}

.container-footer a {
    color: #eee !important;
}

.container-footer a:hover {
    color: var(--copyroom-orange) !important;
}

.container-footer h3 {
    color: var(--copyroom-green);
    font-size: 18px;
}

.container-footer .card {
    background: transparent !important;
    border: none;
}

.container-footer .card-header {
    background: transparent !important;
    color: var(--copyroom-green) !important;
    border: none;
}

.container-footer .mod-footer,
.footer-copyright {
    text-align: center;
    color: #888;
    font-size: 12px;
}

/* ======================
   BREADCRUMBS
   ====================== */
.container-breadcrumbs {
    background-color: var(--copyroom-light);
    font-size: 12px;
    padding: 5px 0;
}

/* ======================
   TABLES
   ====================== */
table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background-color: var(--copyroom-orange);
    color: #fff;
    padding: 10px;
    font-weight: 700;
}

table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ======================
   FORMS
   ====================== */
.com-contact .contact-form .form-control {
    border-radius: 4px;
    border: 1px solid #ccc;
}

.com-contact .contact-form .form-control:focus {
    border-color: var(--copyroom-orange);
    box-shadow: 0 0 0 3px rgba(250, 148, 1, 0.2);
}

/* ======================
   MISC
   ====================== */
.back-to-top-link {
    background-color: var(--copyroom-orange) !important;
}

blockquote {
    border-left: 3px solid var(--copyroom-orange);
    font-family: Georgia, serif;
    font-style: italic;
    margin: 15px;
    padding: 15px;
}

.com-content-article__body img,
.item-page img {
    max-width: 100%;
    height: auto;
}

.pagination .page-link {
    color: var(--copyroom-link);
}

.pagination .page-item.active .page-link {
    background-color: var(--copyroom-orange);
    border-color: var(--copyroom-orange);
}

input.form-control[type="search"] {
    border-radius: 8px;
}




/* Icone maison dans le menu */
a.icon-home::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f015";
    font-size: 14px;
}
a.icon-home {
    font-size: 0;
    line-height: 1;
}
a.icon-home::before {
    font-size: 14px;
}



/* ======================
   ARTICLE CONTENT COMPATIBILITY
   Classes Joomla 3 / Sparky / Bootstrap 2 dans le contenu migre
   ====================== */

/* Bootstrap 2 row-fluid grid */
.row-fluid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
}

.row-fluid::before,
.row-fluid::after {
    display: none;
}

/* Bootstrap 2 span classes */
.row-fluid .span1 { flex: 0 0 8.33%; max-width: 8.33%; }
.row-fluid .span2 { flex: 0 0 16.66%; max-width: 16.66%; }
.row-fluid .span3 { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); }
.row-fluid .span4 { flex: 0 0 calc(33.33% - 10px); max-width: calc(33.33% - 10px); }
.row-fluid .span5 { flex: 0 0 41.66%; max-width: 41.66%; }
.row-fluid .span6 { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
.row-fluid .span7 { flex: 0 0 58.33%; max-width: 58.33%; }
.row-fluid .span8 { flex: 0 0 66.66%; max-width: 66.66%; }
.row-fluid .span9 { flex: 0 0 75%; max-width: 75%; }
.row-fluid .span10 { flex: 0 0 83.33%; max-width: 83.33%; }
.row-fluid .span11 { flex: 0 0 91.66%; max-width: 91.66%; }
.row-fluid .span12 { flex: 0 0 100%; max-width: 100%; }

/* Joomla 3 items-row */
.items-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.items-row .item {
    flex: 1 1 0;
    min-width: 200px;
}

.items-row.cols-2 .item { flex: 0 0 calc(50% - 8px); }
.items-row.cols-3 .item { flex: 0 0 calc(33.33% - 10px); }
.items-row.cols-4 .item { flex: 0 0 calc(25% - 12px); }

/* Sparky Framework containers */
[class*="sparky_row"],
[class*="sparky_container"] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

[class*="sparky_cell"] {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

/* Sparky sparkle columns */
[class*="sparkle"] {
    box-sizing: border-box;
}

/* Override inline widths that break layout in new template */
.com-content-article__body [style*="width"],
.item-page [style*="width"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix floated images in article content */
.com-content-article__body img[style*="float"],
.item-page img[style*="float"] {
    max-width: 50%;
    margin: 5px 15px 10px 0;
}

.com-content-article__body img[style*="float: right"],
.com-content-article__body img[style*="float:right"],
.item-page img[style*="float: right"],
.item-page img[style*="float:right"] {
    margin: 5px 0 10px 15px;
}

/* Clearfix for floated content */
.com-content-article__body::after,
.item-page::after,
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Prevent absolutely positioned elements from overlapping */
.com-content-article__body [style*="position: absolute"],
.item-page [style*="position: absolute"] {
    position: relative !important;
}

/* Tables in articles - prevent overflow */
.com-content-article__body table,
.item-page table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
    word-wrap: break-word;
}

.com-content-article__body table table,
.item-page table table {
    display: table;
}

/* Fix old Joomla 3 module classes in content */
.row-0, .row-1 { margin-bottom: 10px; }

/* Responsive: stack columns on mobile */
@media (max-width: 767px) {
    .row-fluid .span3,
    .row-fluid .span4,
    .row-fluid .span6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .items-row .item {
        flex: 0 0 100% !important;
    }
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 992px) {
    .blog-featured .blog-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .container-topbar .mod-menu > li > a,
    nav .mod-menu > li > a {
        border-radius: 0;
        margin: 0;
        padding: 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    h1, h1 a { font-size: 24px; }
    h2, h2 a { font-size: 20px; }
    h3 { font-size: 16px; }

    .blog-featured .blog-items {
        grid-template-columns: 1fr;
    }

    .carousel-copyroom,
    .container-banner {
        max-height: 200px;
    }

    .carousel-copyroom .carousel-slide img {
        max-height: 200px;
    }
}

@media (max-width: 500px) {
    .carousel-copyroom,
    .container-banner {
        max-height: 150px;
    }
}