/* ============================================
   GRAPHISCANN - CSS UNIFIÉ
   ============================================ */

/* RESET & BASE */
* {font-family:Roboto,sans-serif;}

html.sansfond{background:transparent;}
body {width:100%;height: 100%; margin: 0;padding: 0px; background:transparent;position:relative;}
body.petitetaille{font-size:11px;}
body.popup {width:90%; padding: 5%; }

/* ============================================
   MENU PRINCIPAL
   ============================================ */
#header {display:table; position:relative; width:100%;background:transparent;margin:0;padding:0;height:auto;}

#menuprincipal {
    display:flex;
    width:100%;
    margin:26px 0 0 0;
    border-collapse: separate;
    padding:0;
    background:#f7f7f7;
    border-radius: 8px 0 0 0;
    z-index:9;
}

#menuprincipal div.menuitem{
    display:flex;
    vertical-align:middle;
    width:14.28%;
    text-align:center;
    border-right: 1px solid #e0e0e0;
    font-size:1em;
    line-height:100%;
    min-width: 103px;
    padding-left: 2px;
    padding-right: 2px;
}

.menuitem a:hover, .menuitem span:hover{
    background:#dd0333;
    color:white;
}

.menuitem.premier a:hover{
    border-radius: 8px 0 0 0;
}

#menuprincipal div.menuitem.premier{border-radius:8px 0 0 0;}
#menuprincipal div.menuitem.dernier{border-radius:0 8px 0 0;}
#menuprincipal div.menuitem.active{background:#dd0333;}
#menuprincipal div.menuitem.ouvert{background:#dd0333;}
#menuprincipal div.menuitem.active a{color:white;}
#menuprincipal div.menuitem.ouvert span{color:white;}

#menuprincipal div.menuitem a, #menuprincipal div.menuitem span{
    display:flex;
    flex:1;
    justify-content: center;
    align-items: center;
    font-size:1.2em;
    cursor:pointer;
    opacity:1;
}

@keyframes animation_menu_active {
  from {background-color: white;}
  to {background-color: #dd0333;}
}

#menuprincipal div.menuitem.active {
  background-color: #dd0333;
  animation-name: animation_menu_active;
  animation-duration: 1s;
}

#menuprincipal div.menuitem .caret{color:#666;}

.menufenetre {
    position:absolute;
    display:none;
    border-bottom-left-radius:15px;
    border-bottom-right-radius: 15px;
    top:67px;
    left:2%;
    width:96%;
    background-color:#f7f7f7;
    z-index:999;
    padding:20px 0;
}

.menufenetre.ouvert {display:block;}
.menufenetre h2{color:#dd0333; font-size:1em;padding:0; margin:0;}
.menufenetre div div{border-right:1px solid #cecece;}
.menufenetre ul {list-style: none;right: 15px;position:relative;}
.menufenetre a:hover{color:#dd0333;}

/* ============================================
   LOGO & HEADER
   ============================================ */
#logo{
    position:relative;
    padding:4px 0 0 16px;
    display:flex;
    flex-direction: column;
    max-width: 450px;
}

img#lelogo {width:346px; height:61px;}

#coordonnees{
    width:180px;
    position:absolute;
    top:6px;
    right:20px;
    font-size:0.9em;
    z-index: 3;
}

#coordonnees p{text-align: right;}

#responsive_menu_button {display: none;}
#responsive_menu_button img {display: block;width: 35px;height: auto;}

/* ============================================
   RECHERCHE
   ============================================ */
#champrecherche {
    background-image:url(images/icons/search.png);
    background-size:12%;
    background-repeat:no-repeat;
    background-position:right center;
    line-height: 25px;
}

#resultatrecherche {padding:0;}
#resultatrecherche #interieurrecherche{
    position:relative;
    z-index:999;
    background:#fff;
    padding:4px 8px;
    border:1px solid #999;
}

/* ============================================
   CONTENEUR PRINCIPAL
   ============================================ */
#conteneurprincipal {
    position:relative;
    z-index:2;
    width:100%;
    background:transparent;
    padding-bottom:180px;
    padding-top:0px;
}

#conteneurprincipal.court {padding-bottom:20px;}
#conteneurprincipal.court p{margin:4px 0;}
#conteneurprincipal *{z-index:2;}

#conteneurprincipal #blocgauche{
    display:table-cell;
    width:66%;
    background: transparent;
    padding:30px 20px;
}

#conteneurprincipal #blocgauche.taille800{width:800px;}

#conteneurprincipal #blocdroit{
    display:table-cell;
    width:33%;
    padding:10px 20px;
    height:100%;
}

#conteneurprincipal #blocdroit.tailleauto{width:auto;}

#svglayer{position:absolute;top:0;left:0;width:100%;z-index:1;}
#svglayer svg{width:100%;}

#blocdroit ul li {text-align:justify;margin-bottom:10px;}
#blocdroit ul li ul li {text-align:justify;margin-bottom:4px;}

/* ============================================
   TYPOGRAPHIE
   ============================================ */
h1{
    font-size:3em;
    margin:6px 0 10px 0;
    padding:0px;
    color:#444;
    text-align:center;
    font-weight:100;
    line-height:100%;
}

h1.sansmarges{margin:0;}
h1 strong, h1 span strong{font-weight:900; color:#dd0333;}

h2{
    font-size:1.4em;
    margin:2px 0;
    color:#052a39;
    text-align:left;
    font-weight:900;
}

h2.grand{font-size:2em;margin:2px 0;color:#052a39; font-weight:200;}
h2 strong{color:#dd0333;}

h3{
    font-weight:normal;
    font-size:1.2em;
    padding:0px;
    margin:4px 0;
    text-align:left;
    color:#000;
    padding:0 4px;
    line-height:100%;
}

p{
    text-align:justify;
    font-size:1em;
    padding:6px 0;
    line-height:120%;
}

em{font-size:1em;}

p.sansbottom{margin-bottom:0;}
p.sanstop{margin-top:0; padding-top:0;}
p.moyenpetit{font-size:1.2em; letter-spacing:-1px;}
p.apeinepetit{font-size:1em; }
p.petit{font-size:1em; letter-spacing:-1px;}
p.aere{line-height:140%;}

p a { color:#666;text-decoration:none;}
p a:hover { color:#052a39;text-decoration:none;}

a {color:#052a39;text-decoration:none;}
a:hover {color:#052a39;text-decoration:none;}
a:hover h2{text-decoration:none;}
a:hover h3{text-decoration:none;}

a.active{background:#000; color:#fff; padding:1px 4px;}
a.active:hover{background:#000; color:#fff; padding:1px 4px;}

a.social img {
    opacity:0.6;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
    transition:0.2s ease-in-out;
}

a.social:hover img {opacity:1;}

/* ============================================
   IMAGES
   ============================================ */
img.fullwidth{width:100%;}
img.auto{width:auto; max-width:50%;}
img.sansmax{max-width:100%;}
img.petit{width:33.33%;}
img.w20{width:20px;}
img.auto.full{width:auto; max-width:100%;}
img.img36{width:36px; max-width:50%;}
img.trespetit{width:80px;float:left;margin-right:12px;}
img.gauche{float:left;margin-right:12px;}
div img.droite{float:right;margin-left:12px;}
img.petitlogo {float:left;margin-right:12px;height:72px;width:auto;}

.imagebandeau {
    display:block;
    width:100%;
    height:180px;
    text-align:left;
    padding:0;
    position:relative;
    background-repeat:no-repeat;
    background-position:center 50%;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

.image {
  display: block;
  height: auto;
  margin: right 5px;
  max-height: 60vh;
  max-width: 60vw;
}

.text {line-height: 1.5;}

/* ============================================
   FORMULAIRES
   ============================================ */
input, input[type="text"] {width:100%; border:1px solid #ddd;}
input[type="submit"] {background:#dd0333; font-size:1.2em; border:0px; color:#fff; text-transform:uppercase; padding:8px;}
input[type="text"].auto {width:auto;}
textarea, select, button {width:100%; border:1px solid #ddd;}
input[type="password"] {width:100%;}
input[type="password"].auto {width:auto;}
input[type="radio"] {width:20px;}
input.erreur{border:1px solid #dd0333;}

label {font-weight:500; cursor:pointer;}

#editeur {width: 100%; height: 200px; border: 1px solid black; padding: 5px; overflow: auto; }

#txthtml input[type='button'] {display:inline; padding:2px 4px; width:auto !important; }
#txthtml select {display:inline; padding:2px 4px; width:auto !important; }

.blocform {
    padding:0px;
    border-radius:16px 0 0 16px;
    background:#fff;
    border:1px solid #ddd;
    border-top:0px;
    box-shadow:0px 4px 30px rgba(0,0,0,0.1);
    margin:0 0 0 30px;
    position:absolute;
    top:-90px;
    right:0;
    width:80%;
    z-index:99;
}

.blocform .blocformtitre{
    padding:40px 40px 10px 40px;
    border-radius:16px 0 0 0;
    color:#000;
    text-align:center;
    font-size:1.8em;
    font-weight:100;
    margin:0;
    border-top:1px solid #ddd;
    text-transform:uppercase;
}

.blocform .blocformtitre strong {font-weight:900; color:#dd0333;}

.blocform .blocformcontenu{
    padding:0px 40px 40px 40px;
    text-transform:uppercase;
    font-size:0.8em;
    color:#999;
}

/* ============================================
   BOUTONS
   ============================================ */
.fobouton {
    background:#ddd;
    text-transform:uppercase;
    font-size:0.9em;
    padding:2px 6px;
    cursor:pointer;
    color:#333;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
    transition:0.2s ease-in-out;
}

.fobouton:hover {background:#666; color:#fff; }
.fobouton.grand{display:block; width:100%; font-size:1.4em; text-align:center;}

/* ============================================
   UTILITAIRES
   ============================================ */
.invisible {display:none;}
.visible {display:block; z-index:999; }
.clear{clear:both;}
.cliquable{cursor:pointer;}
.floatright{float:right; margin-left:20px;}
.floatleft{float:left;}

.flou {opacity:0.5;}
.plusgrand {font-size:1.2em;}
.grand {font-size:1.2em;}
.bcpplusgrand {font-size:1.4em;}
.vraimentbcpplusgrand {font-size:2em;}

.trespetit {font-size:10px; color:#666;}
.petitsoustitre {font-size:0.9em;}

.ligneslarges{line-height:200%;}
.blocsouligne {width:80%; margin:30px 10%; display:block; border-bottom:1px solid #eee;}

.opacity50{opacity:0.5;}
.opacity70{opacity:0.7;}
.opacity90{opacity:0.9;}

.quepetit{display:none;}

.rose{color:#dd0333 !important;margin-left: 5px;}
.vert{color:#75b756;}
.bleu{color:#008fcb;}
.orange{color:#ed8025;}

.colonnecentrale {padding:0 20px;}
.colonnedroite {padding-left:30px; border-left:1px solid #ccc;}
.colonnegauche {border-right:1px solid #ccc;}

.colonneunique.un{width:100%;margin:0 auto;}
.colonneunique.deux{width:100%;margin:0 auto;}

.row{margin-right:0 !important;margin-left:0 !important; width:100%;}
.row div{position:relative; z-index:2;}
.row div.sansmarge{margin:0;padding:0;}
.row div.sansmarges{padding-left:0; padding-right:0;}
.row div.petitesmarges{padding-left:4px; padding-right:4px;}
.row div.grandesmarges{padding-left:60px; padding-right:60px;}

.table{display:table;width:100%}
.table div{display:table-cell;vertical-align:middle;}
.table div.parallelep{width:50px;}

/* ============================================
   VIGNETTES
   ============================================ */
.container_vignettes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    max-width: 960px;
    margin: 0 auto;
}

.box_vignettes {
    flex-basis: 23%;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.box_vignettes img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.box_vignettes h2 {
    margin-top: 10px;
    font-size: 18px;
    color: #fff;
    transition: all 0.3s ease;
}

.box_vignettes a {
    display: block;
    padding: 10px 20px;
    background-color: #dd0333;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    flex: 1;
}

.box_vignettes a:hover {background-color: #ba0029;}
.box_vignettes a:hover h2 {color: #fff;}
.box_vignettes a:hover img {transform: scale(1.1);}

.title_vignettes {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #333;
}

/* ============================================
   ADMIN
   ============================================ */
li.delete_category,
li.delete_category_class {
    background-color: #cc0422;
    padding: 5px !important;
    margin: auto;
    display: block;
    width: max-content;
    border-radius: 20px;
    cursor: pointer;
    color:#FFF;
    font-size: 0.9em;
}

li.move_category,
li.move_category_class {
    background-color: #029274;
    padding: 5px !important;
    margin: auto;
    display: block;
    width: max-content;
    border-radius: 20px;
    cursor: pointer;
    color:#FFF;
}

#idservices {
    position:absolute;
    top:0;
    right:0;
    font-size:10px;
    text-transform:uppercase;
    background:#000;
    color:#fff;
    padding:2px 8px;
    line-height:10px;
    z-index: 99;
}

#idservices a{color:#bbb; line-height:10px; display:inline;}
#idservices a:hover,#idservices a:active {color:#fff;}
#idservices .cliquable{color:#bbb; line-height:10px; display:inline;}
#idservices .cliquable:hover,#idservices .cliquable:active {color:#fff;}

/* ============================================
   CAPTCHA
   ============================================ */
#refresh_captcha{cursor: pointer;}
#div_refresh_captcha::after{content: "rafraichir le captcha"}

#wrong_captcha{
    position: absolute;
    width: 100%;
    text-align: center;
    height: 300px;
    background: antiquewhite;
    z-index: 100;
    font-size: 4em;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 2s ease;
    opacity:1;
}

#img_captcha{min-width: 150px;}

#roulette {
    position:fixed;
    width:40%;
    height:300px;
    left:30%;
    bottom:40px;
    display:none;
    z-index:999;
    font-size:2em;
    text-align:center;
}

.modal-dialog{max-width:90% !important;}
.timeline-Tweet {padding:0 !important;}
.timeline-Widget {background:transparent !important;}
.text-italic {font-family:Libre Baskerville; font-weight:400; font-style:italic; text-transform:none;}

/* ============================================
   CAROUSEL
   ============================================ */
#liseusecalameo {width:800px;height:500px;border:1px solid #ddd;}

#myCarousel {
    width:100%;
    background:transparent;
    padding:0px;
    border-radius:0 0 0 0;
}

#myCarousel .item{padding:0px;}
#myCarousel .item .focuscontenu {padding:0px 0px 0px 0px;}
#myCarousel .item .focuscontenu img {border:0px solid #999;}

#myCarousel .item .bandetitre {
    position:absolute;
    top:30px;
    left:-1%;
    width:102%;
    padding:0 0 0 0px;
}

#myCarousel h2{
    padding:8px 0 0 0;
    margin:12px 0 20px 0;
    font-weight:500;
    font-size:2em;
}

#myCarousel h3{
    padding:0;
    margin:12px 0;
    text-align:left;
    font-size:1.2em;
}

#myCarousel p{padding:0;margin:6px 0;}

#myCarousel p.quote {
    font-size:1.3em;
    font-style:italic;
    color:#333;
    margin-left:40px !important;
    border-left:1px solid #ddd;
    padding-left:20px;
}

#myCarousel ul{padding:0 0px 0 30px;margin:6px 0;}
#myCarousel iframe{width:100%;height:300px;}
#myCarousel video{width:100%;height:300px;}

#focus {
    width:100%;
    padding:0;
    border-radius:0 0 0 0;
    margin:0;
    font-size:0.9em;
}

#focus .danslefocus {
    background:rgba(0,0,0,0.8);
    color:#fff;
    width:45%;
    max-width:90%;
    position:absolute;
    top:15%;
    left:2%;
    font-weight:500;
    font-size:2em;
    line-height:120%;
    text-align:center;
    padding:16px;
    word-wrap:break-word;
    overflow-wrap:break-word;
}

#focus .danslefocus h2 {
    color:#fff;
    text-transform:uppercase;
    margin:0;
    padding:0;
    text-align:center;
    letter-spacing:normal;
    word-spacing:normal;
}

#focus .danslefocus h3 {
    color:#fff;
    margin:0;
    padding:0;
    font-weight:500;
    font-size:0.9em;
    text-align:center;
    letter-spacing:normal;
    word-spacing:normal;
}

.lienfocus {
    background:rgba(0,0,0,0.8);
    color:#fff;
    position:absolute;
    bottom:20%;
    left:2%;
    font-weight:500;
    font-size:1.4em;
    line-height:120%;
    text-align:center;
    padding:8px 16px;
}

.carousel-indicators {
    top:auto;
    bottom:6px;
    text-align:center;
    right:0;
    left:0;
    height:24px !important;
    width:100%;
    z-index:99 !important;
    margin-left:0;
    padding:4px;
}

.carousel-indicators li {
    border: 0px;
    border-radius: 0;
    width: 16px;
    margin:0;
    height: 16px;
    padding:0;
    opacity:1;
    color:#fff;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    background:url(images/indicator-noir.png) no-repeat center center;
    background-size:16px 16px;
    margin:0 4px;
}

.carousel-indicators li.active {
    width: 16px;
    margin:0;
    height: 16px;
    background:url(images/indicator-rouge.png) no-repeat center center;
    background-size:16px 16px;
}

#myCarousel .carousel-control {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    text-shadow: 0px;
    opacity: 0.5;
}

.carousel-control.right,.carousel-control.left {
    background-image: none;
    background-repeat: repeat-x;
}

#myCarousel .carousel-control .glyphicon-chevron-left,
#myCarousel .carousel-control .glyphicon-chevron-right,
#myCarousel .carousel-control .icon-next,
#myCarousel .carousel-control .icon-prev {
    width: 40px;
    height: 16px;
    margin-top: -15px;
    font-size: 16px;
    top: 40px;
}

.carousel-inner>.item>img.petitlogo {
    float:left;
    margin-right:12px;
    height:72px;
    width:auto;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    position:relative;
    width:100%;
    padding:6px 0 6px 0;
    background:#2e2c2c;
    color:#fff;
    text-align:center;
    z-index:1;
}

footer.varinline {
    position:relative !important;
    display:block;
    z-index:9;
    width:100%;
    padding:6px 0 6px 0;
    background:#111;
    color:#fff;
    text-align:center;
    position:fixed;
    z-index:9;
    transform:rotate(0deg);
}

footer p{font-size:1em;}

footer a{
    color:#fff;
    opacity:0.5;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

footer a:hover{color:#fff; opacity:1; }

footer #footinterne {
    display:table;
    table-layout:fixed;
    width:100%;
}

footer #footinterne .footcase{
    width:auto;
    display:table-cell;
    color:#fff;
    text-align:center;
    vertical-align:top;
    padding-left:20px;
    font-size:0.9em;
    line-height:110%;
}

footer #footinterne .footcase strong{color:#008fcb;font-weight:500;}
footer #footinterne .footcase.premier{background:transparent;text-align:right;width:60px;}
footer #footinterne .footcase.dernier{background:transparent;}
footer #footinterne .footcase a{color:#fff;text-decoration:underline;font-size:1em;}
footer #footinterne .footcase a:hover{color:#fff;text-decoration:none;}

footer .footertitres div{
    color:#02597d;
    font-weight:100;
    text-transform:uppercase;
    font-size:1.2em;
    letter-spacing:2px;
    margin-bottom:12px;
}

footer p {color:#02597d;}

iframe {width:100%; height:auto;}
iframe.h400 {height:400px;}
iframe.h250 {height:250px;}
iframe.h200 {height:200px;}

/* ============================================
   STYLES PAGE D'ACCUEIL
   ============================================ */

:root {
  --gs-red: #e63946;
  --gs-red-dark: #9b2226;
  --gs-light: #f8f9fa;
  --gs-dark: #111;
}

.gs-home-container {font-family: 'Segoe UI', sans-serif;}

.gs-section-title {
  text-align: center;
  font-size: 2.2em;
  color: var(--gs-dark);
  margin-bottom: 15px;
}

.gs-section-subtitle {
  text-align: center;
  font-size: 1.1em;
  color: #555;
  margin-bottom: 50px;
}

.gs-hero {
  background: white;
  color: var(--gs-dark);
  padding: 100px 20px 80px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.gs-hero h1 {
  font-size: 2.6em;
  margin-bottom: 20px;
  color: var(--gs-red);
  font-weight: 700;
}

.gs-hero p {
  font-size: 1.2em;
  margin-bottom: 40px;
  color: #444;
  line-height: 1.6;
  text-align: center;
}

.gs-cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.gs-btn {
  padding: 14px 32px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
}

.gs-btn-primary {background: var(--gs-red);color: white;}
.gs-btn-primary:hover {background: var(--gs-red-dark);}

.gs-btn-secondary {border: 2px solid var(--gs-red);color: var(--gs-red);}
.gs-btn-secondary:hover {background: var(--gs-red);color: white;}

.gs-services {background: var(--gs-light);padding: 70px 20px;}

.gs-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 30px;
}

.gs-service-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 30px 20px;
  text-align: left;
  transition: transform 0.3s, box-shadow 0.3s;
}

.gs-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.gs-service-icon {
  font-size: 2.2em;
  margin-bottom: 12px;
  color: var(--gs-red);
}

.gs-service-title {
  font-size: 1.3em;
  color: var(--gs-dark);
  margin-bottom: 10px;
}

.gs-service-desc {color: #555;font-size: 0.95em;line-height: 1.5;}
.gs-service-card h3 {margin-top: 0;}

.gs-featured {padding: 70px 20px;background: white;}
.gs-featured-block {margin-bottom: 50px;}
.gs-subtitle {font-size: 1.5em;color: var(--gs-red);margin-bottom: 20px;}

.gs-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 20px;
}

.gs-featured-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  color: var(--gs-dark);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.gs-featured-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.gs-featured-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.gs-featured-item h4 {
  margin: 12px;
  font-size: 1em;
  font-weight: 600;
  color: var(--gs-dark);
}

.gs-featured-item p {
  margin: 0 12px 12px;
  font-size: 0.85em;
  color: #666;
  line-height: 1.4;
}

.gs-eco {
  padding: 70px 20px;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  position: relative;
  overflow: hidden;
}

.gs-eco::before {
  content: '♻️';
  position: absolute;
  font-size: 300px;
  opacity: 0.03;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.gs-eco-header {
  max-width: 900px;
  margin: 0 auto 50px;
  text-align: center;
}

.gs-eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 12px 24px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
  margin-bottom: 20px;
  font-weight: 600;
  color: #2e7d32;
}

.gs-eco-badge i {font-size: 1.5em;color: #4caf50;}
.gs-eco-intro {font-size: 1.1em;color: #555;line-height: 1.7;}

.gs-eco-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
}

.gs-eco-label {
  background: white;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.gs-eco-label h3 {
  font-size: 1.6em;
  color: var(--gs-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-eco-label h3 i {color: #4caf50;}

.gs-eco-list {list-style: none;padding: 0;margin: 0;}

.gs-eco-list li {
  padding: 12px 0 12px 35px;
  position: relative;
  color: #555;
  line-height: 1.6;
  border-bottom: 1px solid #f0f0f0;
}

.gs-eco-list li:last-child {border-bottom: none;}

.gs-eco-list li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: #4caf50;
  font-weight: bold;
  font-size: 1.2em;
}

.gs-eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.gs-eco-box {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.gs-eco-box h3 {
  font-size: 1.4em;
  color: var(--gs-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-eco-box h3 i {color: #4caf50;font-size: 1.2em;}
.gs-eco-box ul {list-style: none;padding: 0;margin: 0;}

.gs-eco-box li {
  padding: 10px 0 10px 30px;
  position: relative;
  color: #555;
  line-height: 1.5;
}

.gs-eco-box li::before {
  content: '•';
  position: absolute;
  left: 10px;
  color: #4caf50;
  font-size: 1.5em;
  line-height: 1;
}

.gs-eco-cta {text-align: center;margin-top: 40px;}

.gs-eco-cta .gs-btn {
  background: #4caf50;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.gs-eco-cta .gs-btn:hover {background: #2e7d32;}

.gs-why-us {padding: 70px 20px;background: var(--gs-light);}

.gs-why-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
}

.gs-why-card {
  background: white;
  padding: 30px 20px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.gs-why-icon {font-size: 2em;color: var(--gs-red);margin-bottom: 15px;}
.gs-why-title {font-size: 1.2em;margin-bottom: 8px;color: var(--gs-dark);}
.gs-why-desc {color: #555;}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb-container {margin: 20px 0 30px 0;padding: 0;}

.breadcrumb {
    background-color: #f8f9fa;
    padding: 12px 20px;
    border-radius: 5px;
    margin-bottom: 0;
    list-style: none;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumb-item {display: inline-block;}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    padding: 0 10px;
    color: #6c757d;
    font-weight: bold;
}

.breadcrumb-item a {
    color: #e4007f;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-item a:hover {
    color: #b30060;
    text-decoration: underline;
}

.breadcrumb-item.active {color: #495057;font-weight: 500;}

/* ============================================
   STYLES PAGE CATÉGORIE
   ============================================ */
.gs-category-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 40px 20px 50px;
  text-align: center;
  border-bottom: 3px solid var(--gs-red);
  margin-bottom: 50px;
}

.gs-category-title {
  font-size: 2.5em;
  color: var(--gs-red);
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.gs-category-intro {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.15em;
  line-height: 1.7;
  color: #333;
  text-align: center;
}

.gs-category-intro strong {color: var(--gs-red);}

.gs-products-section {padding: 0 20px 60px;}

.gs-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
  max-width: 1400px;
  margin: 0 auto;
}

.gs-product-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.gs-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(230, 57, 70, 0.15);
}

.gs-product-image {
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
  position: relative;
  background: var(--gs-light);
}

.gs-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
  position: absolute;
  top: 0;
  left: 0;
}

.gs-product-card:hover .gs-product-image img {transform: scale(1.08);}

.gs-product-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gs-product-title {
  font-size: 1.4em;
  color: var(--gs-dark);
  margin-bottom: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.gs-product-desc {
  color: #555;
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;
}

.gs-product-features {list-style: none;padding: 0;margin: 0 0 20px 0;}

.gs-product-features li {padding: 8px 0;color: #333;font-size: 0.95em;}

.gs-product-features i {
  color: var(--gs-red);
  margin-right: 8px;
  font-size: 0.9em;
}

.gs-product-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.gs-product-actions .gs-btn {
  flex: 1;
  text-align: center;
  padding: 12px 16px;
  font-size: 0.95em;
}

.gs-product-actions .gs-btn-secondary {background: white;}

.gs-why-category {
  background: var(--gs-light);
  padding: 60px 20px;
  margin: 60px 0;
}

.gs-why-item {
  background: white;
  padding: 30px 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s;
}

.gs-why-item:hover {transform: translateY(-5px);}

.gs-why-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--gs-red) 0%, var(--gs-red-dark) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 1.8em;
}

.gs-why-item h3 {
  font-size: 1.25em;
  color: var(--gs-dark);
  margin-bottom: 12px;
  font-weight: 600;
}

.gs-why-item p {
  color: #555;
  line-height: 1.6;
  font-size: 0.95em;
}

.gs-options-section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.gs-options-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
  margin-top: 40px;
}

.gs-options-list h3 {
  color: var(--gs-red);
  font-size: 1.3em;
  margin-bottom: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-options-list h3 i {font-size: 1.1em;}
.gs-options-list ul {list-style: none;padding: 0;margin: 0;}

.gs-options-list li {
  padding: 10px 0;
  padding-left: 25px;
  position: relative;
  color: #333;
  line-height: 1.5;
  border-bottom: 1px solid #eee;
}

.gs-options-list li:last-child {border-bottom: none;}

.gs-options-list li:before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--gs-red);
  font-weight: bold;
}

.gs-cta-category {
  background: linear-gradient(135deg, var(--gs-red) 0%, var(--gs-red-dark) 100%);
  color: white;
  padding: 60px 20px;
  text-align: center;
  margin-top: 60px;
}

.gs-cta-content {max-width: 800px;margin: 0 auto;}

.gs-cta-category h2 {
  color: white;
  font-size: 2em;
  margin-bottom: 20px;
  font-weight: 700;
}

.gs-cta-category p {
  font-size: 1.15em;
  margin-bottom: 30px;
  opacity: 0.95;
  line-height: 1.6;
}

.gs-btn-large {padding: 16px 40px;font-size: 1.05em;}
.gs-btn-white {background: white;color: var(--gs-red);border: none;}
.gs-btn-white:hover {background: var(--gs-light);color: var(--gs-red-dark);}

.gs-cta-phone {margin-top: 25px;font-size: 1.1em;}

.gs-cta-phone a {
  color: white;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.3s;
}

.gs-cta-phone a:hover {border-bottom-color: white;}

.gs-category-hero-photo .gs-category-stats {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.gs-category-hero-photo .gs-stat-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  padding: 20px 30px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 140px;
  transition: all 0.3s;
}

.gs-category-hero-photo .gs-stat-item:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-5px);
}

.gs-category-hero-photo .gs-stat-number {
  font-size: 2.8em;
  font-weight: 700;
  color: white;
  display: block;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.gs-category-hero-photo .gs-stat-label {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
  display: block;
}

.gs-category-hero-photo {position: relative;overflow: hidden;}

.gs-category-hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4));
  z-index: 1;
  transition: background 0.3s ease;
}

.gs-category-hero-photo * {position: relative;z-index: 2;}

.gs-category-hero-photo .gs-category-title,
.gs-category-hero-photo .gs-category-intro,
.gs-category-hero-photo .gs-stat-number,
.gs-category-hero-photo .gs-stat-label {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.5);
}

.gs-category-hero-photo:hover::before {
  background: linear-gradient(rgba(0, 0, 0, 0.35),rgba(0, 0, 0, 0.35));
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    body:has(.blocform) #conteneurprincipal {
        padding: 20px 15px 180px 15px !important;
    }
    
    .blocform ~ * .row,
    .blocform + .row {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    body:has(.blocform) .row > [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .gs-section-title {font-size: 1.8em;}
    .gs-featured-grid {grid-template-columns: 1fr;}
    .gs-services-grid {grid-template-columns: 1fr;}
    .gs-hero h1 {font-size: 1.8em;}
    .gs-hero p {font-size: 1em;}
    .gs-eco-grid {grid-template-columns: 1fr;}
    
    .gs-category-title {font-size: 1.8em;}
    .gs-category-intro {font-size: 1em;}
    .gs-products-grid {grid-template-columns: 1fr;gap: 25px;}
    .gs-product-actions {flex-direction: column;}
    .gs-why-grid {grid-template-columns: 1fr;}
    .gs-options-content {grid-template-columns: 1fr;gap: 25px;}
    .gs-cta-category h2 {font-size: 1.6em;}
    .gs-cta-buttons {flex-direction: column;align-items: center;}
    .gs-btn-large {width: 100%;max-width: 320px;}
    .breadcrumb {font-size: 12px;padding: 10px 15px;}
    .breadcrumb-item + .breadcrumb-item::before {padding: 0 5px;}
    
    .gs-category-hero-photo {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
    }
    
    body > *:not(#header):not(#responsive_menu_button):not(#menuprincipal):not(#alerte_rgpd) {
        z-index: auto !important;
    }
    
    #header {z-index: 10002 !important;position: relative;}
    
    #myCarousel,#focus,.carousel,.carousel-inner,.carousel-indicators {
        display: none !important;
    }
    
    #logo {
        position: relative;
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 10px 60px 10px 10px;
        text-align: center;
        display: block;
    }
    
    #logo div {display: none !important;}
    #logo a {display: inline-block;width: 100%;text-align: center;}
    
    img#lelogo {
        max-width: 280px;
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    
    #coordonnees {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        text-align: center;
        padding: 15px 10px;
        margin: 0;
        display: block !important;
    }
    
    #coordonnees p {display: none !important;}
    
    #champrecherche {
        width: calc(100% - 20px);
        max-width: 400px;
        margin: 0 auto;
        display: block;
        padding: 10px 40px 10px 10px;
        font-size: 1em;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-image: url(images/icons/search.png);
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: right 10px center;
    }
    
    #resultatrecherche {
        padding: 0;
        width: calc(100% - 20px);
        max-width: 400px;
        margin: 0 auto;
    }
    
    #resultatrecherche #interieurrecherche {
        position: relative;
        z-index: 999;
        background: #fff;
        padding: 4px 8px;
        border: 1px solid #999;
        margin-top: 5px;
    }
    
    #responsive_menu_button {
        display: block !important;
        position: absolute;
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        cursor: pointer;
        z-index: 10001 !important;
        background: rgba(255, 255, 255, 1) !important;
        border-radius: 5px;
        padding: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        pointer-events: auto !important;
    }
    
    #responsive_menu_button img {display: block;width: 100%;height: auto;}
    
    #menuprincipal {
        display: none;
        position: absolute;
        top: 70px;
        right: 10px;
        width: 280px;
        max-width: calc(100% - 20px);
        margin: 0;
        border-collapse: separate;
        padding: 10px;
        background-color: rgba(155, 174, 177, 1) !important;
        border-radius: 8px;
        z-index: 9999 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        pointer-events: auto !important;
    }
    
    #menuprincipal div.menuitem {
        position: relative;
        display: block;
        width: 100%;
        text-align: center;
        height: auto;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        color: #999;
        font-size: 1em;
        line-height: 40px;
        z-index: 10000 !important;
        pointer-events: auto !important;
        background-color: transparent;
    }
    
    #menuprincipal div.menuitem:last-child {border-bottom: 0;}
    #menuprincipal hr {margin: 5px;border-top: 1px solid rgba(255, 255, 255, 0.2);}
    #menuprincipal .premier a {line-height: 40px;}
    
    #menuprincipal div.menuitem a, 
    #menuprincipal div.menuitem span {
        color: #000 !important;
        text-transform: uppercase;
        display: block;
        font-size: 1.1em;
        padding: 10px;
    }
    
    #menuprincipal div.menuitem.active {background: #dd0333;}
    
    #menuprincipal div.menuitem.active a, 
    #menuprincipal div.menuitem.active span {
        color: #ffffff !important;
        font-weight: 900;
    }
    
    #menuprincipal div.menuitem span.pasdelien {
        color: #000 !important;
        text-transform: uppercase;
        display: block;
        font-size: 1em;
        line-height: 150%;
        padding: 10px;
    }
    
    #menuprincipal div.menuitem a:hover, 
    #menuprincipal div.menuitem span:hover {
        text-decoration: none;
        background: #dd0333 !important;
        color: #ffffff !important;
    }
    
    #menuprincipal div.menuitem:hover > a, 
    #menuprincipal div.menuitem:hover > span {
        text-decoration: none;
        background: #dd0333 !important;
        color: #ffffff !important;
    }
    
    #menuprincipal div.menuitem .caret {color: #666;}
    
    .menufenetre {
        position: relative;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(200,200,200,0.95);
        z-index: 998;
        padding: 15px;
        margin-top: 10px;
        border-radius: 8px;
    }
    
    .menufenetre.ouvert {display: block;}
    
    #conteneurprincipal {
        position: relative;
        display: block;
        width: 100%;
        background: transparent;
        height: auto;
        padding-top: 20px;
        z-index: 1 !important;
    }
    
    #conteneurprincipal * {z-index: auto !important;}
    
    #conteneurprincipal #blocdroit {
        display: block;
        width: 100%;
        height: auto;
        padding: 20px 15px;
        background: rgba(255, 255, 255, 0.5);
    }
    
    footer {width: 100%;padding: 16px 0;text-align: center;position: relative;}
    footer #footinterne {width: 100%;margin: 0;display: block;}
    
    footer #footinterne .footcase {
        width: 100%;
        display: block;
        color: #fff;
        background: transparent;
        text-align: left;
        vertical-align: middle;
        padding-left: 12px;
        font-size: 0.7em;
        line-height: 110%;
        margin: 12px 0 0 0;
        padding: 0 12px;
    }
    
    footer #footinterne .footcase.premier {
        background: transparent;
        text-align: right;
        width: 60px;
        float: left;
        margin-top: 0;
    }
    
    footer #footinterne .footcase.deuxieme {clear: both;padding-left: 12px;}
    footer #footinterne .footcase.dernier {background: transparent;padding-left: 12px;}
    
    #regards {display: none;}
    .row {width: 100%;margin: 0;padding: 0;}
    .row div {width: 100%;margin: 0;padding: 0;}
    ul ul {margin-left: -30px;}
    .colonneunique.un {width: 100%;margin: 0 auto;}
    .colonneunique.deux {width: 100%;margin: 0 auto;}
    .quepetit {display: inline;}
    #googlemap {width: 100%;}
    body {height: auto;}
    .menufenetre{top: 91px;left: 0;}
    #menuprincipal div.menuitem{line-height: normal;}
    #logo{float: none;}
    .facultatif p{display:none;}
    #coordonnees{top:97px;}
}

@media (max-width: 580px) {
    #menuprincipal {width: 200px;font-size: 0.9em;}
    #menuprincipal div.menuitem a, 
    #menuprincipal div.menuitem span {font-size: 1em;padding: 8px;}
}

@media (max-width: 480px) {
    #logo {padding: 10px 55px 10px 5px;}
    img#lelogo {max-width: 220px;}
    
    #responsive_menu_button {
        width: 40px;
        height: 40px;
        top: 12px;
        right: 10px;
    }
    
    #menuprincipal {width: 90%;right: 5%;top: 60px;}
    
    #menuprincipal div.menuitem a, 
    #menuprincipal div.menuitem span {font-size: 1em;padding: 8px;}
    
    .gs-category-hero {padding: 30px 15px 40px;}
    .gs-category-title {font-size: 1.5em;}
    .gs-product-title {font-size: 1.2em;}
    .gs-section-title {font-size: 1.6em;}
}

@media print {
    #logo div,#coordonnees,#menuprincipal,#responsive_menu_button,#idservices,footer,#alerte_rgpd {
        display: none;
    }
    #conteneurprincipal {padding: 0;}
    #conteneurprincipal #blocgauche,#conteneurprincipal #blocdroit {
        display: block;width: 100%;padding: 10px;
    }
    body {background: white;}
    a {text-decoration: underline;}
}

#conteneurprincipal > h1 {
  font-size: 2.2em;
  margin: 30px auto 20px;
  max-width: 900px;
  text-align: center;
}

.gs-intro {max-width: 800px;margin: 0 auto 40px;padding: 0 20px;}
.gs-intro p {font-size: 1.1em;line-height: 1.6;text-align: center;}
.gs-subtitle {text-align: center;margin-bottom: 10px;}

.gs-block-intro {
  text-align: center;
  max-width: 700px;
  margin: 10px auto 20px;
  font-size: 0.95em;
  color: #555;
  line-height: 1.5;
}

.gs-why-title {font-size: 1.1em;margin: 15px 0 10px;}
.gs-why-desc {line-height: 1.6;}

.gs-cta {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 20px;
  margin-top: 60px;
  text-align: center;
}

.gs-cta h2 {color: white;margin-bottom: 20px;font-size: 2em;}

.gs-cta p {
  font-size: 1.2em;
  margin-bottom: 30px;
  opacity: 0.95;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.gs-cta .gs-btn-primary {
  background: white;
  color: #667eea;
  padding: 15px 40px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.2s;
}

.gs-cta .gs-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.gs-cta .gs-btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
  padding: 15px 40px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: all 0.2s;
}

.gs-cta .gs-btn-secondary:hover {background: white;color: #667eea;}

.gs-eco-header {margin-bottom: 40px;}

.gs-eco-intro {
  max-width: 800px;
  margin: 15px auto 30px;
  text-align: center;
  font-size: 1.05em;
  line-height: 1.6;
}

@media (max-width: 768px) {
  #conteneurprincipal > h1 {font-size: 1.8em;margin: 20px auto 15px;}
  .gs-intro p {font-size: 1em;}
  .gs-cta h2 {font-size: 1.6em;}
  .gs-cta p {font-size: 1em;}
  
  .gs-cta .gs-btn-primary,
  .gs-cta .gs-btn-secondary {width: 100%;max-width: 300px;}
  
  .gs-category-hero-photo::before {
    background: linear-gradient(rgba(0, 0, 0, 0.45),rgba(0, 0, 0, 0.45));
  }

  .gs-category-hero-photo .gs-category-title,
  .gs-category-hero-photo .gs-category-intro,
  .gs-category-hero-photo .gs-stat-number,
  .gs-category-hero-photo .gs-stat-label {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.6);
  }
}

@media (max-width: 600px) {
  .gs-category-hero-photo::before {
    background: linear-gradient(rgba(0, 0, 0, 0.55),rgba(0, 0, 0, 0.55));
  }

  .gs-category-hero-photo .gs-category-title {font-size: 1.6em;}
  .gs-category-hero-photo .gs-category-intro {font-size: 1em;}
}

.gs-category-hero-photo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 0;
}

.gs-category-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .gs-category-hero-photo {
        height: auto;
        min-height: 400px;
        justify-content: center;
    }

    .gs-category-stats {flex-direction: column;gap: 0;}
    .gs-stat-item {margin: 15px 0;}
}

/* ============================================
   ⭐ CORRECTION DÉFINITIVE ALERTE RGPD ⭐
   ============================================ */

#alerte_rgpd {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 60px !important;
    background: rgba(0, 0, 0, 0.97) !important;
    color: #fff !important;
    z-index: 999999 !important;
    font-size: 0.9em !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#alerte_rgpd p,
#alerte_rgpd a,
#alerte_rgpd span,
#alerte_rgpd .boutonrgpd {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1000000 !important;
}

#alerte_rgpd p {
    margin-bottom: 0px !important;
    padding: 0 !important;
}

#alerte_rgpd p.alertergpd {
    text-transform: uppercase !important;
}

#alerte_rgpd .boutonrgpd {
    border: 2px solid #fff !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
    display: inline-block !important;
    background: transparent !important;
    color: #fff !important;
    font-weight: bold !important;
    margin-left: 10px !important;
}

#alerte_rgpd .boutonrgpd:hover {
    background: #fff !important;
    color: #000 !important;
}

#alerte_rgpd a {
    color: #ccc !important;
    text-decoration: underline !important;
}

#alerte_rgpd a:hover {
    color: #fff !important;
}

@media (max-width: 768px) {
    body > * {z-index: auto !important;}
    
    #header {z-index: 10 !important;}
    #responsive_menu_button {z-index: 100 !important;}
    #menuprincipal {z-index: 90 !important;}
    #menuprincipal div.menuitem {z-index: 91 !important;}
    .blocform {z-index: 5 !important;}
    .menufenetre {z-index: 85 !important;}
    
    #alerte_rgpd {
        z-index: 999999 !important;
        padding: 10px 20px !important;
    }
}

@media (min-width: 769px) {
    #alerte_rgpd {z-index: 999999 !important;}
}
/* ============================================
   🔧 CORRECTIONS FINALES - À AJOUTER À LA FIN DE MAIN.CSS
   ============================================ */

/* ✅ PROBLÈME FORMULAIRE QUI CHEVAUCHE LE TEXTE */
@media (max-width: 960px) {
    .blocform {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 20px 0 !important;
        border-radius: 16px !important;
    }
}

/* ✅ ALERTE RGPD - BOUTON CLIQUABLE */
#alerte_rgpd {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 20px !important;
    background: rgba(0, 0, 0, 0.97) !important;
    color: #fff !important;
    z-index: 999999 !important;
    font-size: 0.9em !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
}

#alerte_rgpd * {
    pointer-events: auto !important;
}

#alerte_rgpd .boutonrgpd {
    border: 2px solid #fff !important;
    cursor: pointer !important;
    padding: 10px 20px !important;
    display: inline-block !important;
    background: transparent !important;
    color: #fff !important;
    font-weight: bold !important;
    margin: 10px 10px 0 10px !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10000000 !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.3) !important;
    touch-action: manipulation !important;
}

#alerte_rgpd .boutonrgpd:hover,
#alerte_rgpd .boutonrgpd:active {
    background: #fff !important;
    color: #000 !important;
}

#alerte_rgpd p {
    margin-bottom: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

#alerte_rgpd a {
    color: #ccc !important;
    text-decoration: underline !important;
    pointer-events: auto !important;
}

#alerte_rgpd a:hover {
    color: #fff !important;
}

/* Réduire les z-index concurrents */
@media (max-width: 768px) {
    #header {
        z-index: 10 !important;
    }
    
    #responsive_menu_button {
        z-index: 100 !important;
    }
    
    #menuprincipal {
        z-index: 90 !important;
    }
    
    #menuprincipal div.menuitem {
        z-index: 91 !important;
    }
    
    .menufenetre {
        z-index: 85 !important;
    }
    
    .blocform {
        z-index: 5 !important;
    }
    
    #conteneurprincipal {
        z-index: 1 !important;
    }
    
    #conteneurprincipal * {
        z-index: auto !important;
    }
}

/* ✅ PADDING MOBILE POUR PAGES PRODUIT */
@media (max-width: 768px) {
    #conteneurprincipal {
        padding: 20px 15px 180px 15px !important;
    }
    
    #conteneurprincipal .row {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #conteneurprincipal .row > [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ============================================
   FORMULAIRE PAGE PRODUIT - MOBILE
   ============================================ */
@media (max-width: 960px) {
    .blocform {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        margin: 30px 0 !important;
        z-index: 1 !important;
    }
    
    #conteneurprincipal {
        padding: 20px 15px !important;
    }
}
/* ============================================
   FIN DU FICHIER - Version complète corrigée
   ============================================ */