@charset "utf-8";
/*
  Couleurs :
    Jaune       : #f7cb61
    Jaune pâle  : #fff8dd
    Rouge       : #5b0010
    Blanc pâle  : #fffbf7
    Vert        : #218e45
    Vert pâle   : #21ab56
*/

.syne-font{font-family: "Syne", sans-serif !important; font-weight:400; font-style: normal;} 
.barlow-font{font-family: "Barlow Condensed", sans-serif !important; font-weight:400; font-style: normal;} 

hr{border: none; height: 1px; background-color: #5b0010; opacity:1;}


html, body {
  height: 100%;           /* Important pour que le conteneur prenne toute la hauteur */
  margin: 0;              /* Supprime les marges par défaut */
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;      /* Hauteur = 100% de la fenêtre */
}



body{font-family: "Barlow Condensed", sans-serif; font-weight: 400; font-style: normal; font-size:16px;}

#TopMenu{height:50px; background:#f7cb61;}
  #TopMenu .menu-accueil{display:block; padding:0 0.75rem; background:url("../img/menu-home.png") no-repeat center center;}
  #TopMenu .menu-accueil:hover{background:url("../img/menu-home-ov.png") no-repeat center center;}
  #TopMenu .menu-carte{display:block; padding:0 0.75rem; background:url("../img/menu-carte.png") no-repeat center center;}
  #TopMenu .menu-carte:hover{background:url("../img/menu-carte-ov.png") no-repeat center center;}
  #TopMenu .menu-visite{display:block; padding:0 0.75rem; background:url("../img/menu-3d.png") no-repeat center center;}
  #TopMenu .menu-visite:hover{background:url("../img/menu-3d-ov.png") no-repeat center center;}
  #TopMenu .menu-top{display:block; padding:0; margin:0 1rem; color:#5b0010; border-bottom:1px solid #f7cb61; text-decoration:none; text-transform: uppercase; font-family: "Syne", sans-serif; font-weight:600;}
  #TopMenu .menu-top:hover{display:block; padding:0; margin:0 1rem; color:#5b0010; border-bottom:1px solid #5b0010;}
  #TopMenu .menu-top.menu-top-active{color:#5b0010; border-bottom:1px solid #5b0010;}

header{height:900px; background:#fffbf7;}
  header #AccueilBanniere{height:900px; background:url("../img/accueil-banniere-mosaique.png") bottom right no-repeat; background-size: contain;}
  header #AccueilBanniere h1{font-size:8rem;font-family: "Syne", sans-serif; font-weight:600; line-height:100%; font-style: normal; color:#5b0010}
  header #AccueilBanniere .sous-titre-1{font-size:3.5rem; font-family: "Barlow Condensed", sans-serif; font-weight:600; font-style: normal; color:#5b0010; text-transform: uppercase;}
  header #AccueilBanniere .en-savoir-plus{display:block; padding:0; background:url("../img/en-savoir-plus.png") no-repeat center center; background-size:contain; width:286px; height:79px;}
  header #AccueilBanniere img{display:block; width: 100%;}
  header #AccueilBanniere .en-savoir-plus:hover{display:block; padding:0; background:url("../img/en-savoir-plus-ov.png") no-repeat center center;}

footer{background:#218e45}
.footer-link-titre{font-family: "Syne", sans-serif; font-weight:600; font-style: normal; font-size:1.2rem; color:#fffbed; text-decoration:none;}
.footer-link-adresse{font-family: "Barlow Condensed", sans-serif; font-weight: 400; font-style: normal; color:#fffbed; text-decoration:none;}
.copyright{font-family: "Syne", sans-serif; font-weight:600; font-style: normal; font-size:1rem; color:#fffbed; text-decoration:none;}


.menu-scrolltop{display:block; padding:0; background:url("../img/btn-up-cercle.png") no-repeat center center; height:103px; width:103px;}
.menu-scrolltop:hover{background:url("../img/btn-up-cercle-ov.png") no-repeat center center;}



#Catalogue{border-top:2px solid #5b0010; background:#FFF8DC;}
#Catalogue .grid{width:100% !important; margin-left:auto; margin-right:auto;}
/* ≥ 1400px — 5 colonnes (4 × 20px = 80px) */
@media(min-width:1400px){#Catalogue .grid-sizer,#Catalogue .grid-item{width:calc((100% - 80px)/5);}}

/* ≥ 1200px et < 1400px — 5 colonnes aussi */
@media(min-width:1200px) and (max-width:1399.98px){#Catalogue .grid-sizer,#Catalogue .grid-item{width:calc((100% - 80px)/5);}}

/* ≥ 992px et < 1200px — 4 colonnes (3 × 20px = 60px) */
@media(min-width:992px) and (max-width:1199.98px){#Catalogue .grid-sizer,#Catalogue .grid-item{width:calc((100% - 60px)/4);}}

/* ≥ 576px et < 992px — 3 colonnes (2 × 20px = 40px) */
@media(min-width:576px) and (max-width:991.98px){#Catalogue .grid-sizer,#Catalogue .grid-item{width:calc((100% - 40px)/3);}}

/* < 576px — 1 colonne */
@media(max-width:575.98px){#Catalogue .grid-sizer,#Catalogue .grid-item{width:100%;}}

/* Styles items */
#Catalogue .grid-item{margin-bottom:40px; padding:0; border-bottom:1px solid #5b0010; box-sizing:border-box;}
#Catalogue .grid-item img{width:100%; height:auto; display:block;}
#Catalogue .caption{margin-top:10px;}
#Catalogue .caption h4{margin:0; font-size:1.1rem; font-family:"Syne",sans-serif; font-weight:600; color:#5b0010;}
#Catalogue .caption p{margin:2px 0 0; font-size:0.9rem; font-family:"Syne",sans-serif; font-weight:400; color:#5b0010;}


#Article{background:#DEEEFD;}
#Article h1{font-family: "Syne", sans-serif; font-weight:600; font-style: normal; font-size:1.4rem; color: #5b0010; text-transform: uppercase; padding-bottom:1.5rem;}
#Article p{font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size:0.9rem; color:#5b0010; line-height:160%;}
#Article p span{font-family: "Syne", sans-serif; font-weight:600; font-style: normal; font-size:1rem; color: #5b0010;}
#Article p.text-excert{font-size: 1.1rem; line-height: 150%;}
#Article p.text-bleu{font-size: 0.9rem; line-height: 200%; color:#286cce;font-weight:400; text-align: center; padding-top:12rem;}
	
	


#Artistes{background:#fff8dd; flex: 1;}
#Artistes .titre{font-size:1.5rem; font-family: "Barlow Condensed", sans-serif; font-weight:600; font-style: normal; color:#5b0010; text-transform: uppercase;}
#Artistes .tableau-debordant {width: 100vw; left: calc(-1 * ((100vw - 100%) / 2 + 8.333%)); z-index: 10;}
#Artistes .tableau-row {display: flex; align-items: center; border-top: 1px solid #5b0010;}
#Artistes .col-nom {font-family: "Syne", sans-serif; font-weight:400; font-style: normal; font-size:1.8rem; color: #5b0010; padding:1rem 0;}
#Artistes .col-logo {font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size:0.9rem; text-align: center;}
#Artistes .col-logo .badge1{border: 1px solid #5b0010; border-radius: 50% / 50%; padding:0.5rem 1rem;}
#Artistes .col-description {font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size:0.9rem; color: #5b0010;}
#Artistes .tableau-row:hover {background:#21ab56;}
#Artistes .tableau-row:hover .col-nom {color: #ffffff; padding:1rem 0; text-indent: 1rem;}
#Artistes .tableau-row:hover .col-logo {color: #ffffff;}
#Artistes .tableau-row:hover .col-logo .badge1{border: 1px solid #ffffff; border-radius: 50% / 50%; padding:0.5rem 1rem;}
#Artistes .tableau-row:hover .col-description {color: #ffffff;}
#Oeuvre-preview-wrap{position:sticky; top: 80px; min-height:500px;}




/* L’image d’aperçu occupe 100% de la largeur disponible et garde ses proportions */
#Oeuvre-preview {
  display: block;
  width: 100%;
  height: auto;          /* garde le ratio de l'image */
  object-fit: contain;   /* utile si tu fixes une hauteur sur .preview-wrapper */
}

/* Optionnel : si tu veux réserver un ratio d’emplacement */
.preview-wrapper {
  /* Dé-commente si tu veux figer une hauteur tout en gardant l'image contenue
  aspect-ratio: 400 / 507;  /* ratio approximatif de tes vignettes */
  /* height: 520px;          /* alternative à aspect-ratio ; alors garde object-fit: contain */
  }



#FicheOeuvre{background:#fff8dd; flex: 1;}
#FicheOeuvre .oeuvre-link{display:block; padding:0.25rem 0; font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size:1rem; color:#5b0010; text-decoration:none}
#FicheOeuvre .oeuvre-link:hover{text-decoration:underline}
#FicheOeuvre .oeuvre-nav{display:inline-block; padding:0.25rem 0.5rem; border:1px solid #5b0010; color:#5b0010; text-decoration:none}
#FicheOeuvre .oeuvre-nav:hover{background:#fffbf7; border:1px solid #5b0010}
#FicheOeuvre .titre-oeuvre-artiste{font-size:3rem;font-family: "Syne", sans-serif; font-weight:600; font-style: normal; color:#5b0010; line-height:110%;}
#FicheOeuvre .titre-oeuvre{font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size:1.4rem; color:#5b0010;}
#FicheOeuvre .oeuvre-resume{font-family: "Merriweather", serif; font-style: normal; font-weight: 300; font-size:0.9rem; color:#5b0010;}
#FicheOeuvre .oeuvre-resume p{padding-right:4rem; font-size:0.9rem;}
#FicheOeuvre .tab-toggle-desc{font-family: "Merriweather", serif; font-style: normal; font-weight: 300; font-size:0.9rem; color:#5b0010;}
#FicheOeuvre .tab-toggle-desc p{padding-right:4rem; font-size:0.9rem;}
#FicheOeuvre .badge2{border: 1px solid #5b0010; border-radius: 50% / 50%; padding:0.25rem 0.5rem; font-size:0.8rem; margin-left:1.5rem;}
#FicheOeuvre .toggle-oeuvre{font-family: "Syne", sans-serif; font-weight:400; font-style: normal; color:#5b0010; padding:1rem 0;}
#FicheOeuvre .toggle-oeuvre a{text-decoration:none; color:#5b0010; padding:1rem 0;}

.conteneur-gauche,.conteneur-droite{width:50%;}
.conteneur-gauche{border-right:1px solid #5b0010;}

.half-container{flex: 0 1 650px; min-width: 320px; max-width: 650px;}

#carouselExampleCaptions{min-height:500px;}
.carousel-item{min-height:500px;}

.carousel-caption.bottom-right {position: absolute; bottom: 1rem; right: 1rem; left: auto; text-align: right; background: rgba(0, 0, 0, 0.5); padding: 0.5rem 1rem; border-radius: 0.5rem;}
.carousel-indicators {bottom: -40px; /* espace sous l'image */}
.carousel-indicators [data-bs-target] {width: 12px; height: 12px; border-radius: 50%; background-color: #5b0010; margin: 0 6px; border: none; transition: background-color 0.3s;}
.carousel-indicators .active {background-color: #5b0010;}
.carousel-control-prev{left:-25px; opacity:1;}
.carousel-control-next{right:-25px; opacity:1;}
.carousel-control-prev .custom-arrow {width: 50px; height: auto;}
.carousel-control-next .custom-arrow {width: 50px; height: auto;}
.img-oeuvre {width:275px;}


.titre-collection{font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size:0.9rem; color:#5b0010;}

/* Extra small: <576px → 100% / 2 = 100% */
.half-container-inner {width: 100%; display: flex;}

/* Small: ≥576px → container = 540px → moitié = 270px * 2 = 540px */
@media (min-width: 576px) {.half-container-inner {max-width: 540px;}}

/* Medium: ≥768px → container = 720px → moitié = 360px * 2 = 720px */
@media (min-width: 768px) {.half-container-inner {max-width: 720px;}}

/* Large: ≥992px → container = 960px → moitié = 480px * 2 = 960px */
@media (min-width: 992px) {.half-container-inner {max-width: 960px;}}

/* X-Large: ≥1200px → container = 1140px → moitié = 570px * 2 = 1140px */
@media (min-width: 1200px) {.half-container-inner {max-width: 1140px;}}

/* XX-Large: ≥1400px → container = 1320px → moitié = 660px * 2 = 1320px */
@media (min-width: 1400px) {.half-container-inner {max-width: 1320px;}}

#Infos{background:#DEEEFD;}
#Infos h1{font-family: "Syne", sans-serif; font-weight:400; font-style: normal; font-size:1.4rem; color: #5b0010;}
#Infos p{font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size:0.9rem; color:#5b0010; line-height:130%;}
#Infos p span{font-family: "Syne", sans-serif; font-weight:600; font-style: normal; font-size:1rem; color: #5b0010;}

#Infos-Remerciement{background:#FFFCF7;}
#Infos-Remerciement h2{font-family: "Syne", sans-serif; font-weight:400; font-style: normal; font-size:2.5rem; color: #5b0010;}
#Infos-Remerciement p{font-family: "Syne", sans-serif; font-style: normal; font-weight: 400; font-size:0.9rem; color:#5b0010; line-height:130%;}
#Infos-Remerciement a{text-decoration:none; color:#5b0010; font-size:1.3rem;}
#Infos-Remerciement a:hover{text-decoration:underline;}
#Infos-Remerciement a.image-hover::after {
  content: ""; /* Nécessaire pour générer l'élément */
  display: inline-block;
  width: 29px;
  height: 22px;
  margin-left: 5px;
  background-image: url("../img/fleche-lien.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#Infos-Remerciement a.image-hover:hover::after {
  opacity: 1;
}


#Infos-Politique{background:#FFFCED;}
#Infos-Politique h3{font-family: "Syne", sans-serif; font-weight:600; font-style: normal; font-size:1.2rem; color: #5b0010; text-transform: uppercase;}
#Infos-Politique p{font-family: "Barlow Condensed", sans-serif; font-weight:400; font-style: normal;  font-size:0.9rem; color:#5b0010; line-height:130%;}
#Infos-Politique a{color:#5b0010; text-decoration:underline;}
#Infos-Politique a:hover{text-decoration:underline;}



  #BanniereJeunesse{background:#fffbf7; background-size: contain;}
  #BanniereJeunesseBG{background:url("../img/crayons-v2.png") bottom right no-repeat; background-size: contain;}
  #BanniereJeunesse h1{font-size:2.5rem;font-family: "Syne", sans-serif; font-weight:600; font-style: normal; color:#5b0010}
  #BanniereJeunesse .sous-titre-1{font-size:1.1rem; font-family: "Syne", sans-serif; font-weight:600; font-style: normal; color:#5b0010;}
  #BanniereJeunesse p{font-size:1.1rem; font-family: "Barlow Condensed", sans-serif; font-weight:400; font-style: normal; color:#5b0010;}
  

#A-Vos-Crayons{background:url("../img/a-vos-crayon.png"); background-repeat: repeat-x; height:137px; width:100%;}

#Explorateur{background:#628FD0; min-height:900px;}
#Explorateur h2.titre3{font-family: "Barlow Condensed", sans-serif; font-weight:600; font-style: normal; color:#ffffff; text-transform:uppercase;}
#Explorateur p{font-family: "Syne", sans-serif; font-weight:400; font-style: normal; font-size:1.2rem; color:#ffffff; line-height:150%;}
#Explorateur .texte-zone-bleu{font-size:1.8rem;}

#Explorateur .owl-carousel {  position: relative; height: auto !important;}
#Explorateur .owl-nav {position: absolute; top: calc(50% - 50px); width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); margin:0;}
#Explorateur .owl-theme .owl-nav [class*="owl-"] {all: unset; display: inline-block !important; background: none !important; color: inherit !important; margin: 0 !important; padding: 0 !important; font-size: inherit !important; border-radius: 0 !important; cursor: pointer !important;}
#Explorateur .owl-prev, #Explorateur .owl-next {width: 50px; height: 50px;}
#Explorateur .owl-theme .owl-nav .owl-prev{position:absolute; left:-75px;}
#Explorateur .owl-theme .owl-nav .owl-next{position:absolute; right:-75px;}
#Explorateur .owl-carousel .item .item-wrap{background:#ffffff; max-width:275px;}
#Explorateur .owl-carousel .item .item-wrap .item-info{background:#FFE6A6; padding:1.5rem;}
#Explorateur .owl-carousel .item .item-wrap .item-info p.item-info-titre{font-family: "Syne", sans-serif; font-weight:600; font-style: normal; color:#5b0010; font-size:1rem; line-height:110%;}
#Explorateur .owl-carousel .item .item-wrap .item-info p.item-info-artiste{font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size:0.75rem; color:#5b0010; line-height:110%;}
#Explorateur .equal-height .item-info {height: auto;}
#Explorateur .equal-height.js-equalized .item-info {height: var(--max-height);}
#Explorateur .owl-theme .owl-dots{margin-top:2rem;}
#Explorateur .owl-theme .owl-dots .owl-dot.active span{background: #5b0010;}
#Explorateur .owl-theme .owl-dots .owl-dot span{background: #fffbf7;}
#Explorateur .carousel-wrapper {position: relative; padding: 0 100px;}
#Explorateur .telechargement{position:absolute; bottom: 0.75rem; right:0.75rem;}
#Explorateur .pencil-blanc-jeunesse{display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:9px; border-radius:50%; background:#ffffff; color:#5b0010; text-decoration:none; transition: background 0.25s ease;}
#Explorateur .pencil-blanc-jeunesse:hover{background:#5b0010;}
#Explorateur .pencil-blanc-jeunesse .icone-crayon-jeunesse{color:#5b0010; transition: color 0.25s ease;}
#Explorateur .pencil-blanc-jeunesse:hover .icone-crayon-jeunesse{color:#ffffff;}




#FicheOeuvre .pencil-blanc-jeunesse-fiche{background:#FFE5A6; color:#5b0010; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:1rem; font-family: "Syne",sans-serif; font-weight: 400; font-size: 1.1rem;}
#FicheOeuvre .pencil-blanc-jeunesse-fiche .icone-cc{width:18px; height:18px; flex-shrink:0; color:#5b0010; transition:color 0.25s ease;}
#FicheOeuvre .pencil-blanc-jeunesse-fiche:hover{background:#5b0010; color:#FFE5A6;}
#FicheOeuvre .pencil-blanc-jeunesse-fiche:hover .icone-cc{color:#FFE5A6;}


.AnneeOeuvreJeunesse{font-family: "Syne", sans-serif; font-weight:600; color: #5b0010; font-size:1.4rem;}


.conteneur-gauche-jeunesse,.conteneur-droite-jeunesse{width:50%;}
.conteneur-gauche-jeunesse{border-right:1px solid #5b0010;}

.conteneur-gauche-jeunesse{background:url("../img/jeunesse-fiche-feuille-bleu.png") bottom right no-repeat #628FCF;}
.conteneur-droite-jeunesse{background:#DEEEFD; }










.bouton-crayon{display:flex; align-items:center; justify-content:space-between; padding:1rem; background:#FFE5A6; color:#5b0010; text-decoration:none; gap:1rem;}
.bouton-crayon .icone-crayon{width:18px; height:18px; flex-shrink:0; color:currentColor; transition:color 0.25s ease;}
.bouton-crayon:hover{background:#5b0010; color:#FFE5A6;}
.bouton-crayon:hover .icone-crayon{color:#FFE5A6;}

.btn-link-oeuvre-blanc{display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:1.5rem; background:#fffbf7; color:#5b0010; text-decoration:none; font-family:"Syne",sans-serif; font-weight:400; font-size:1.1rem; border-right:1px solid #5b0010; width: 100%;}
.btn-link-oeuvre-blanc:last-child{border-right:none;}
.btn-link-oeuvre-blanc .icone-crayon{width:22px; height:22px; flex-shrink:0; color:currentColor; transition:color 0.25s ease;}
.btn-link-oeuvre-blanc:hover{background:#5b0010; color:#fffbf7;}
.btn-link-oeuvre-blanc:hover .icone-crayon{color:#fffbf7;}

.bouton-crayon .icone-fill{width:18px; height:18px; flex-shrink:0; color:currentColor; transition:color 0.25s ease;}
.bouton-crayon:hover .icone-fill{color:#FFE5A6;}
.btn-link-oeuvre-blanc .icone-fill{width:22px; height:22px; flex-shrink:0; color:currentColor; transition:color 0.25s ease;}
.btn-link-oeuvre-blanc:hover .icone-fill{color:#fffbf7;}

.btns-border-bottom{border-bottom:1px solid #5b0010}
.row-btns .btn-link-oeuvre-blanc {
    border-right: 1px solid #5b0010;
}





.menu-visite {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    color:#640D0D;       /* couleur normale */
    text-decoration:none;
}

.menu-visite svg {
    width:25px;
    height:25px;
    color:currentColor;
    transition:color .25s ease;
}

/* Hover */
.menu-visite:hover {
    color:#FFF6D3;       /* couleur hover */
}


/*
.BanniereSplit a div{display:inline-flex; align-items:center; justify-content:center; padding:1rem; background:#FFE5A6; color:#5b0010; text-decoration:none; gap:1rem; font-family:"Syne", sans-serif; font-weight:600; font-style:normal; line-height:130%; font-size:2.5rem;}
.BanniereSplit a div span{flex: 0 1 auto;}
.BanniereSplit a div svg{width:120px; height:80px; flex: 0 0 120px; color:#5b1a1a; transition:color 0.25s ease;}
*/

#BanniereSplit{position:relative;}
#BanniereSplit a.wrap{ display:inline-flex; align-items:center; gap:40px; padding:2.5rem 1.5rem; color:#5b0010; text-decoration:none; z-index:10; background-color: transparent;}
#BanniereSplit a.wrap-droite{ display:inline-flex; align-items:center; gap:40px; padding:2.5rem 1.5rem; color:#5b0010; text-decoration:none; z-index:10}
#BanniereSplit a .col-flex{ flex:0 1 auto; min-width:0; font-family:"Syne", sans-serif; font-weight:600; font-style:normal; line-height:130%; font-size:2.5rem;}
#BanniereSplit a .col-fixe{ flex:0 0 120px; height:80px; }
#BanniereSplit a .col-fixe svg{ display:block; width:100%; height:100%; }
#BanniereSplit .col-fixe{ flex:0 0 120px; display:flex; justify-content:flex-end; }
#BanniereSplit .ico-stack{ position:relative; width:120px; height:80px; }
#BanniereSplit .ico{ position:absolute; inset:0; display:block; width:120px; height:80px; color:#5b0010; transition:opacity .2s ease, transform .2s ease; }
#BanniereSplit .ico-1{ opacity:1; }
#BanniereSplit .ico-2{ opacity:0; }
#BanniereSplit a:hover .ico-1{ opacity:0; }
#BanniereSplit a:hover .ico-2{ opacity:1;}

.BanniereSplitLeft{position:absolute; top:0; left:0; width:50%; pointer-events:none; background:#F7CB61; transition:background .25s ease; height:100%; border-right:1px solid #5b0010;}
.BanniereSplitRight{position:absolute; top:0; left:50%; width:50%; pointer-events:none; background:#F7CB61; transition:background .25s ease; height:100%;}
#BanniereSplit:has(.wrap:hover) .BanniereSplitLeft{ background:#f0d58e; }
#BanniereSplit:has(.wrap-droite:hover) .BanniereSplitRight{ background:#f0d58e; }
.AccueilBanniereGauche{border-right:1px solid #5b0010}







/* Mobile (petits écrans) — max 600px */
@media only screen and (max-width: 600px) {
  /* Accueil */
  header #AccueilBanniere h1 {font-size:3.5rem;}
  header #AccueilBanniere .sous-titre-1 {font-size:2rem;}
  header #AccueilBanniere .en-savoir-plus{width: 227px; height: 63px;}
  header {height: 500px;}
  header #AccueilBanniere {height: 500px; background-size: 50% auto;}
  .AccueilBanniereGauche{border-right:none; border-bottom: 1px solid #5b0010;}
  #BanniereSplit a.wrap {gap: 0; background:#f0d58e; width:100%; padding:1rem 1.5rem;}
  #BanniereSplit a.wrap-droite {gap: 0; background:#f0d58e; width:100%; padding:1rem 1.5rem;}
  #BanniereSplit a .col-flex {font-size: 1.5rem; flex:1 1 auto}
  .BanniereSplitLeft{display:none}
  .BanniereSplitRight{display:none}

  /* Menu */
  #TopMenu{display:none}
  #TopMenuMobile {background:#f7cb61 !important; border-bottom:1px solid #ddd; padding:0!important;}
  #TopMenuMobile .navbar-toggler {box-shadow: none !important; color:#5b0010}
  #TopMenuMobile .navbar-nav {background:#D6EBFE;}
  #TopMenuMobile #MenuMobileMain {min-height:50px; width:100%; margin:0; padding:0;display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between;}
  #TopMenuMobile .menu-accueil{display:block; padding:0 0.75rem; background:url("../img/menu-home.png") no-repeat center center;}
  #TopMenuMobile .menu-accueil:hover{background:url("../img/menu-home-ov.png") no-repeat center center;}
  #TopMenuMobile .menu-carte{display:block; padding:0 0.75rem; background:url("../img/menu-carte.png") no-repeat center center;}
  #TopMenuMobile .menu-carte:hover{background:url("../img/menu-carte-ov.png") no-repeat center center;}
  #TopMenuMobile .menu-visite{display:block; padding:0 0.75rem; background:url("../img/menu-3d.png") no-repeat center center;}
  #TopMenuMobile .menu-visite:hover{background:url("../img/menu-3d-ov.png") no-repeat center center;}
  #TopMenuMobile .menu-top{display:block; padding:0; margin:0 1rem; color:#5b0010; border-bottom:0 !important; text-decoration:none; text-transform: uppercase; font-family: "Syne", sans-serif; font-weight:600;}
  #TopMenuMobile .menu-top:hover{display:block; padding:0; margin:0 1rem; color:#5b0010; border-bottom:1px solid #5b0010;}
  #TopMenuMobile .menu-top.menu-top-active{color:#5b0010; border-bottom:none !important; margin-left:0}
  #TopMenuMobile #menuMobile .nav-item { display:flex; align-items:center; gap:.5rem; padding:.75rem 0; border-bottom:1px solid #5b0010; }
  #TopMenuMobile #menuMobile .nav-item:last-child { border-bottom:none; }
  #TopMenuMobile #menuMobile .nav-item:has(.menu-top-active)::before {content:""; width:24px; height:24px; background:url("../img/fleche-lien.png") no-repeat center/contain; flex:0 0 24px; margin-left:1rem}
  #TopMenuMobile #menuMobile .nav-item > .nav-link.menu-top { display:block; flex:1 1 auto; text-transform:uppercase; color:#5b0010; border-bottom:1px solid #5b0010; }
  
  /* Icône hamburger par défaut */
  .navbar-toggler .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(91,0,16,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
  /* Icône X quand le menu est ouvert (bouton NON .collapsed) */
  .navbar-toggler:not(.collapsed) .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(91,0,16,1)' stroke-linecap='round' stroke-width='2' d='M6 6L24 24M24 6L6 24'/%3E%3C/svg%3E"); }
  
  /* Artistes */  
  #Artistes .col-nom-mobile {font-family: "Syne", sans-serif; font-weight: 400; font-style: normal; font-size: 1.2rem; color: #5b0010; padding: 0rem 0;}
  #Artistes .col-description-mobile {font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size: 0.8rem; color: #5b0010;}
  #TableauMobileArtist .tableau-row-mobile { display:flex; flex-direction:column; gap:.25rem; padding:.75rem 0; border-bottom:1px solid #5b0010; cursor:pointer; }
  #TableauMobileArtist .col-nom-mobile {line-height:1.25; }
  #TableauMobileArtist .line-2 { display:flex; align-items:center; gap:.5rem; }
  #TableauMobileArtist .col-description-mobile { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #TableauMobileArtist .col-logo-mobile { flex:0 0 55px; display:flex; align-items:center; justify-content:center; }
  #TableauMobileArtist .col-logo-mobile img { max-width:100%; max-height:100%; object-fit:contain; }
  .ArtisteTableau{display:none}

  /* oeuvre */
  #FicheOeuvre{flex-direction: column;}
  .conteneur-gauche,.conteneur-droite{width:100%; padding-right: .5rem !important; padding-left: .5rem !important;}
  .conteneur-gauche{border-right:0}
  .half-container {flex: 1 1 auto; min-width: 100%; max-width: 100%;}
  #FicheOeuvre .toggle-oeuvre{padding:0}
  button.is-prev{left:-1rem !important;}
  button.is-next{right:-1rem !important;}
  .row-btns{border-left:1px solid #5b0010;border-bottom:1px solid #5b0010}
  .btns-border-bottom{border-bottom:none}
  .row-btns .btn-link-oeuvre-blanc {border-right: 1px solid #5b0010; border-top: 1px solid #5b0010;}
  
  /* jeunesse */
  #BanniereJeunesseBG {background:none;} 
  #Explorateur .texte-zone-bleu {font-size: 1.3rem;}
  #Explorateur .carousel-wrapper {position: relative; padding: 0 2rem;}
  #Explorateur .owl-theme .owl-nav .owl-prev {left: -1.5rem;}
  #Explorateur .owl-theme .owl-nav .owl-next {right: -1.5rem;}
  #Explorateur .owl-carousel .item .item-wrap {max-width: 100%;}
  
.img-oeuvre { width:100%; height:auto; display:block; }

  
  /* Jeunesse fiche */
  .conteneur-gauche-jeunesse, .conteneur-droite-jeunesse {width:100%;}
  .conteneur-gauche-jeunesse {border-right:0;}
  #FicheOeuvre .toggle-oeuvre-fiche{padding:0.75rem 0}
  #FicheOeuvre .titre-oeuvre-artiste-fiche{font-size:2rem}
}

/* Tablette — entre 601px et 768px */
@media only screen and (min-width: 601px) and (max-width: 991px) {
  /* Accueil */
  header #AccueilBanniere h1 {font-size:4rem;}
  header #AccueilBanniere .sous-titre-1 {font-size:2rem;}
  header #AccueilBanniere .en-savoir-plus{width: 227px; height: 63px;}
  header {height: 500px;}
  header #AccueilBanniere {height: 500px; background-size: 50% auto;}
  .AccueilBanniereGauche{border-right:none; border-bottom: 1px solid #5b0010;}
  #BanniereSplit a.wrap {gap: 0; background:#f0d58e; width:100%; padding:1rem 1.5rem;}
  #BanniereSplit a.wrap-droite {gap: 0; background:#f0d58e; width:100%; padding:1rem 1.5rem;}
  #BanniereSplit a .col-flex {font-size: 1.5rem; flex:1 1 auto}
  .BanniereSplitLeft{background: #f0d58e;}
  .BanniereSplitRight{background: #f0d58e;}

  /* Menu */
 #TopMenu{display:none}
  #TopMenuMobile {background:#f7cb61 !important; border-bottom:1px solid #ddd; padding:0!important;}
  #TopMenuMobile .navbar-toggler {box-shadow: none !important; color:#5b0010}
  #TopMenuMobile .navbar-nav {background:#D6EBFE;}
  #TopMenuMobile #MenuMobileMain {min-height:50px; width:100%; margin:0; padding:0;display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between;}
  #TopMenuMobile .menu-accueil{display:block; padding:0 0.75rem; background:url("../img/menu-home.png") no-repeat center center;}
  #TopMenuMobile .menu-accueil:hover{background:url("../img/menu-home-ov.png") no-repeat center center;}
  #TopMenuMobile .menu-carte{display:block; padding:0 0.75rem; background:url("../img/menu-carte.png") no-repeat center center;}
  #TopMenuMobile .menu-carte:hover{background:url("../img/menu-carte-ov.png") no-repeat center center;}
  #TopMenuMobile .menu-visite{display:block; padding:0 0.75rem; background:url("../img/menu-3d.png") no-repeat center center;}
  #TopMenuMobile .menu-visite:hover{background:url("../img/menu-3d-ov.png") no-repeat center center;}
  #TopMenuMobile .menu-top{display:block; padding:0; margin:0 1rem; color:#5b0010; border-bottom:0 !important; text-decoration:none; text-transform: uppercase; font-family: "Syne", sans-serif; font-weight:600;}
  #TopMenuMobile .menu-top:hover{display:block; padding:0; margin:0 1rem; color:#5b0010; border-bottom:1px solid #5b0010;}
  #TopMenuMobile .menu-top.menu-top-active{color:#5b0010; border-bottom:none !important; margin-left:0}
  #TopMenuMobile #menuMobile .nav-item { display:flex; align-items:center; gap:.5rem; padding:.75rem 0; border-bottom:1px solid #5b0010; }
  #TopMenuMobile #menuMobile .nav-item:last-child { border-bottom:none; }
  #TopMenuMobile #menuMobile .nav-item:has(.menu-top-active)::before {content:""; width:24px; height:24px; background:url("../img/fleche-lien.png") no-repeat center/contain; flex:0 0 24px; margin-left:1rem}
  #TopMenuMobile #menuMobile .nav-item > .nav-link.menu-top { display:block; flex:1 1 auto; text-transform:uppercase; color:#5b0010; border-bottom:1px solid #5b0010; }
  
  /* Icône hamburger par défaut */
  .navbar-toggler .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(91,0,16,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
  /* Icône X quand le menu est ouvert (bouton NON .collapsed) */
  .navbar-toggler:not(.collapsed) .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(91,0,16,1)' stroke-linecap='round' stroke-width='2' d='M6 6L24 24M24 6L6 24'/%3E%3C/svg%3E"); }
  
  /* Artistes */  
  #Artistes .col-nom-mobile {font-family: "Syne", sans-serif; font-weight: 400; font-style: normal; font-size: 1.2rem; color: #5b0010; padding: 0rem 0;}
  #Artistes .col-description-mobile {font-family: "Merriweather", serif; font-style: normal; font-weight: 400; font-size: 0.8rem; color: #5b0010;}
  #TableauMobileArtist .tableau-row-mobile { display:flex; flex-direction:column; gap:.25rem; padding:.75rem 0; border-bottom:1px solid #5b0010; cursor:pointer; }
  #TableauMobileArtist .col-nom-mobile {line-height:1.25; }
  #TableauMobileArtist .line-2 { display:flex; align-items:center; gap:.5rem; }
  #TableauMobileArtist .col-description-mobile { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #TableauMobileArtist .col-logo-mobile { flex:0 0 55px; display:flex; align-items:center; justify-content:center; }
  #TableauMobileArtist .col-logo-mobile img { max-width:100%; max-height:100%; object-fit:contain; }
  .ArtisteTableau{display:none}

  /* oeuvre */
  #FicheOeuvre{flex-direction: column;}
  .conteneur-gauche,.conteneur-droite{width:100%; padding-right: .5rem !important; padding-left: .5rem !important;}
  .conteneur-gauche{border-right:0}
  .half-container {flex: 1 1 auto; min-width: 100%; max-width: 100%;}
  #FicheOeuvre .toggle-oeuvre{padding:0}
  button.is-prev{left:-1rem !important;}
  button.is-next{right:-1rem !important;}
  .row-btns{border-left:1px solid #5b0010;border-bottom:1px solid #5b0010}
  .btns-border-bottom{border-bottom:none}
  .row-btns .btn-link-oeuvre-blanc {border-right: 1px solid #5b0010; border-top: 1px solid #5b0010;}
  
  /* jeunesse */
  #BanniereJeunesseBG {background:none;} 
  #Explorateur .texte-zone-bleu {font-size: 1.3rem;}
  #Explorateur .carousel-wrapper {position: relative; padding: 0 2rem;}
  #Explorateur .owl-theme .owl-nav .owl-prev {left: -1.5rem;}
  #Explorateur .owl-theme .owl-nav .owl-next {right: -1.5rem;}
  #Explorateur .owl-carousel .item .item-wrap {max-width: 100%;}
  
.img-oeuvre { width:100%; height:auto; display:block; }

  
  /* Jeunesse fiche */
  .conteneur-gauche-jeunesse, .conteneur-droite-jeunesse {width:100%;}
  .conteneur-gauche-jeunesse {border-right:0;}
  #FicheOeuvre .toggle-oeuvre-fiche{padding:0.75rem 0}
  #FicheOeuvre .titre-oeuvre-artiste-fiche{font-size:2rem}
}


@media only screen and (min-width: 992px) {
  #TopMenuMobile {display:none}
  .ArtisteTableauMobile{display:none}
  .conteneur-gauche-jeunesse, .conteneur-droite-jeunesse {padding-bottom:15rem !important;}

}