/* ============================================
   GRAPHISCANN - CSS UNIFIÉ (Version template.css originale)
   Consolidation de : template.css + style_savoir_faire.css
   ============================================ */

/* 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 - CSS ORIGINAL EXACT
   ============================================ */
#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;
}

/* Animation menu */
@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;}
#menuprincipal div.menuitem:hover{}

/* Menu fenêtre déroulante */
.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:0;
    left:auto;
    right:20px;
    font-size:0.9em;
    z-index: 3;
}

#coordonnees p{
    text-align: right;
}

/* ============================================
   BOUTON MENU HAMBURGER - BASE
   ============================================ */
#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;
}

/* Style_savoir_faire.css */
.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;}

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

/* Colonnes */
.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;}

/* Grid */
.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 */
.table{display:table;width:100%}
.table div{display:table-cell;vertical-align:middle;}
.table div.parallelep{width:50px;}

/* ============================================
   COMPONENTS - 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;
}

/* ============================================
   SERVICES
   ============================================ */
#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;
}

/* ============================================
   RGPD
   ============================================ */
#alerte_rgpd {
    position:fixed;
    display:block;
    bottom:0;
    left:0;
    width:100%;
    padding:10px;
    background:rgba(0,0,0,0.9);
    color:#fff;
    z-index:999;
    font-size:0.9em;
}

#alerte_rgpd p{margin-bottom:0px; padding:0;}
#alerte_rgpd p.alertergpd{text-transform:uppercase;}
#alerte_rgpd .boutonrgpd{ border:1px solid #fff; cursor:pointer; padding:2px 8px;}
#alerte_rgpd .boutonrgpd:hover{ background:#fff; color:#000;}
#alerte_rgpd a{ color:#ccc;}
#alerte_rgpd a:hover{ color:#fff;}

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

/* ============================================
   MODALES
   ============================================ */
.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 - Bootstrap 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 (conteneur du carousel) */
#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;
}

/* Indicators du carousel */
.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;
}

/* ============================================
   CAROUSEL
   ============================================ */
#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
   ============================================ */
iframe {width:100%; height:auto;}
iframe.h400 {height:400px;}
iframe.h250 {height:250px;}
iframe.h200 {height:200px;}

/* ============================================
   25. STYLES PAGE D'ACCUEIL (INDEX.PHP)
   ============================================ */

/* Variables CSS pour la page d'accueil */
:root {
  --gs-red: #e63946;
  --gs-red-dark: #9b2226;
  --gs-light: #f8f9fa;
  --gs-dark: #111;
}

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

/* Section titres */
.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;
}

/* Hero Section */
.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;
}

/* Services */
.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;
}

/* Produits phares */
.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;
}

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

/* Carte produit */
.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);
}

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

/* Titre produit */
.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;
}

/* Section Écoresponsable */
.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;
}

/* Bloc label */
.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;
}

/* Grille actions + impact */
.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;
}

/* CTA éco */
.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;
}

/* Pourquoi nous choisir */
.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; 
}

/* Responsive */
@media (max-width: 768px) {
  .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;
  }
}

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

/* ============================================
   RESPONSIVE - TABLETTES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
        body > *:not(#header):not(#responsive_menu_button):not(#menuprincipal) {
        z-index: auto !important;
    }
    
    #header {
        z-index: 10002 !important;
        position: relative;
    }
    /* ========================================
       1. MASQUER LE CAROUSEL EN MOBILE
       ======================================== */
    #myCarousel,
    #focus,
    .carousel,
    .carousel-inner,
    .carousel-indicators {
        display: none !important;
    }
    
    /* ========================================
       2. RÉORGANISATION DU HEADER MOBILE
       ======================================== */
    #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;
    }
    
    /* ========================================
       3. RÉAFFICHER LA RECHERCHE SOUS LE LOGO
       ======================================== */
    #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;
    }
    
    /* ========================================
       4. POSITIONNER LE HAMBURGER CORRECTEMENT
       ======================================== */
	#responsive_menu_button {
		display: block !important;
		position: absolute;
		top: 15px;
		right: 15px;
		width: 45px;
		height: 45px;
		cursor: pointer;
		z-index: 10001 !important; /* Le plus élevé */
		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;
    }
    
    /* ========================================
       5. MENU HAMBURGER DROPDOWN
       ======================================== */
	#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; /* Force opacité à 100% */
		border-radius: 8px;
		z-index: 9999 !important; /* Très élevé */
		box-shadow: 0 4px 20px rgba(0,0,0,0.5);
		pointer-events: auto !important; /* Force la cliquabilité */
	}
    
	#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; /* Plus élevé que le conteneur */
		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;
    }
    
    /* ========================================
       6. SOUS-MENUS DÉROULANTS
       ======================================== */
    .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;
    }
    
    /* ========================================
       7. CONTENEUR PRINCIPAL
       ======================================== */

    #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);
    }
    
    /* ========================================
       8. FOOTER
       ======================================== */
    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;
    }
    
    body {height:auto;}
    .facultatif p{display:none;}
    #coordonnees{top:97px;}
    .quepetit{display:inline;}
    #googlemap{width:100%;}
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 580px)
   ============================================ */
@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;
    }
}

/* ============================================
   PRINT
   ============================================ */
@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;
    }
}

/* ========================================== */
/* OPTIMISATIONS SEO - HEADINGS ET SECTIONS */
/* ========================================== */

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

/* Introduction sous le H1 */
.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;
}

/* Titres des catégories de produits (H3) */
.gs-subtitle {
  text-align: center;
  margin-bottom: 10px;
}

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

/* Section Pourquoi nous choisir */
.gs-why-title {
  font-size: 1.1em;
  margin: 15px 0 10px;
}

.gs-why-desc {
  line-height: 1.6;
}

/* Section CTA final */
.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-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.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;
}

/* Section Éco-responsable */
.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;
}

/* Responsive */
@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-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .gs-cta .gs-btn-primary,
  .gs-cta .gs-btn-secondary {
    width: 100%;
    max-width: 300px;
  }
}

/* ============================================
   FIN DU FICHIER
   Version consolidée de template.css + style_savoir_faire.css + index.php
   ============================================ */