/* === OPTIONS GENERALES DU SITE === */
html {
    font-size: 18px;
	scrollbar-gutter: stable; /* reserve toujours l'espace de la scrollbar,
       							 meme quand GLightbox ou un modal desactive le scroll.*/
}

body {
	font-family: 'InterVar', system-ui, -apple-system, sans-serif;
	font-size: 1rem;
	line-height: 1.42857143;
    letter-spacing: -0.03em;
	background-color: white;
	width: 100%;
    margin: 0;
}

b,
a,
strong {
    font-weight: 550;
}

a,
a:visited,
a:active,
a:focus {
    color: #333   /* mets ta couleur principale */
}



/* Barre info fixe en haut, toujours au-dessus de la navbar */
.infobar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FCD003;
    z-index: 1100;
    overflow: hidden;
    max-height: 0;
}

.infobar.disabled {
    display: none !important;
}

.infobar-inner {
	font-size: clamp(0.75rem, 0.5rem + 1.2vw, 1rem);
    padding: 0.4rem 0.7rem; /* padding déplacé ici */
    text-align: center;
	box-sizing: border-box; /* pour que scrollHeight inclue padding */
}

/* Reduire la vitesse de l animation fade de l icone */
#infobar i.fa-fade {
	animation-duration: 3s;
}

.infobar-close {
	cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.infobar-close:hover {
    opacity: 1;
    transform: scale(1.1);
}


.text-capitalize {
    text-transform: uppercase!important;
}
.text-center {
    text-align: center!important;
}
a.text-center {
    display: block;
}
.text-italic {
    font-style: italic!important;
}
.line-gap {
	display: block;      /* devient un vrai saut de ligne */
	height: 12px;        /* change la valeur comme tu veux */
}


html {
    scrollbar-width: auto;
    scrollbar-color: #ff0b01 #ccc;
}

/* WebKit */
html::-webkit-scrollbar {
    width: 16px;
}

html::-webkit-scrollbar-track {
    background: #ccc;
}

html::-webkit-scrollbar-thumb {
    background-color: #ff0b01;
    border-radius: 10px;
}

::-moz-selection {
    color: #fff;
    background: #f40f12;
}

::selection {
    color: #fff;
    background: #f40f12;
}

/* === FIN OPTIONS GENERALES DU SITE === */












/* ===============================
   BOUTON CONTACT FLOTTANT
================================ */
.contact-float {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-image: linear-gradient(to right, #d20000, #dd0000, #e80000, #f40000, #ff0000);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 10px;
    border-radius: 30px 0 0 30px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.7);
    width: 54px;
    overflow: hidden;
    z-index: 9999;

    /* apparition progressive */
    opacity: 0;
    pointer-events: none;

    /* transitions */
    transition:
        width 0.5s ease,
        opacity 0.4s ease,
        box-shadow 0.3s ease;

    font-weight: 600;
}

/* visible après scroll */
.contact-float.visible {
    opacity: 1;
    pointer-events: auto;
}

/* hover : déroulement + box-shadow */
.contact-float:hover {
    width: 295px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.9);
}

/* ouverture tactile */
.contact-float.touch-open {
    width: 295px;
}

.contact-float.touch-open .contact-float-text {
    opacity: 1;
    transform: translateX(0);
}



/* ===============================
   Intersection Observer
================================ */
.reveal-content {
  	opacity: 0;
	transform: translateY(20px) scale(0.985);
  	transition: opacity 0.65s ease-out, transform 0.65s ease-out;
	border-radius: none;
	border: none;
}

.reveal-content.visible {
  opacity: 1;
  transform: none;
}

.reveal-section {
    position: relative;
    overflow: hidden;
}
/* ===============================
   FIN Intersection Observer
================================ */


/* ===============================
   ICONE PHONE
================================ */
.fa-phone-animated i {
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 1px 2px 1px rgba(0,0,0,0.9);

    /* animation fa-shake permanent */
    animation-duration: 5s !important;
    animation-iteration-count: infinite;
}

/* ===============================
   TEXTE
================================ */
.contact-float-text {
    display: inline-block;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 2px 1px rgba(0,0,0,0.9);
    opacity: 0;
    transform: translateX(10px);
    transition:
        opacity 0.3s ease,
        transform 0.35s ease;
    font-size: 1.1em;
}

/* texte visible au hover */
.contact-float:hover .contact-float-text {
    opacity: 1;
    transform: translateX(0);
}

/* évite les styles de liens du site */
.contact-float-text:active,
.contact-float-text:focus,
.contact-float-text:visited,
.contact-float-text:hover {
    color: #fff;
    text-decoration: none;
}



/* ===============================
   MOBILE / TABLETTE
================================ */
@media (max-width: 1024px) {
    .contact-float {
        width: 52px;
    }
}




/* === UNDERLINE === */
a {
  text-decoration: underline;
  color: #333; 
}
/* === FIN UNDERLINE === */



/* === SCREEN-SMALL / SCREEN-LARGE  === */
[class*="screen-small"],
[class*="screen-large"] {
  display: none !important;
}


/* === PETITS ECRANS : max 767px (mobile) === */
@media (max-width: 767px) {
  [class*="screen-small"] {
    display: block !important;
  }
}

/* === GRANDS ECRANS : min 768px (tablette + desktop) === */
@media (min-width: 768px) {
  [class*="screen-large"] {
    display: block !important;
  }
}
/* === FIN SCREEN-SMALL / SCREEN-LARGE  === */









/* ========================================================================== */
/* REGLAGES COMMUNS (DESKTOP + MOBILE)                                    */
/* ========================================================================== */

/* ---------- Navbar principale ---------- */

.navbar-custom,
.navbar-custom .navbar-collapse,
.title-logo-link {
	background-color: #292A2C; /* couleur du menu et du fond du logo principal */
}


.navbar-custom {
    position: fixed;
    top: 0; /* sera mis a jour dynamiquement via JS */
	height: 62px;
    box-shadow: 0 6px 10px rgba(0,0,0,0.6);
    padding: 0;
    transition: transform 0.75s ease, box-shadow 0.75s ease;
	flex-wrap: nowrap;
	z-index: 2000; /* inferieur au panneau info */
}

.navbar-custom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #DD3900;
    pointer-events: none;
}

.navbar-custom .container-fluid {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}



/* ---------- Logos et telephone ---------- */
.navbar-header, 
.navbar-logo {
	display: flex;
    align-items: center;
}

.navbar-header {
    height: 45px;
    margin-left: 0;
    gap: 4px;
	transition: gap 0.25s ease; /* transition douce */
}


.navbar-logo-sud {
    width: auto;
    vertical-align: middle;
    transition: 0.75s;
    filter: drop-shadow(2px 2px 2px #111111)
            drop-shadow(0 0 4px #111111);
}

/* Mobile (jusqu'à ~430px) */
@media (max-width: 430.98px) {
    .navbar-logo-sud {
        height: clamp(34px, 12vw - 2px, 46px);
    }
}


/* Mobile large → tablette */
@media (min-width: 431px) and (max-width: 991.98px) {
    .navbar-logo-sud {
        height: clamp(50px, 8vw, 56px);
    }
}

/* Desktop standard */
@media (min-width: 992px) {
    .navbar-logo-sud {
        height: clamp(43px, 4.1vw, 52px);
    }
}

/* Ultra wide */
@media (min-width: 1800px) {
    .navbar-logo-sud {
        height: 54px;
    }
}

@media (min-width: 2000px) {
    .navbar-logo-sud {
        height: 56px;
    }
}

/* Logo supplémentaire - état par défaut (caché) */
/* Logo supplémentaire - état par défaut (caché) */
.navbar-logo-extra {
    height: clamp(42px, 11vw, 52px);
    width: auto;
    opacity: 0;
    max-width: 0;
    margin-right: 0;
    overflow: hidden;
    transform: translateY(10px);
    transition: 
        opacity 0.75s ease, 
        max-width 0.75s ease, 
        margin-right 0.75s ease, 
        transform 0.75s cubic-bezier(0.34, 1.85, 0.64, 1); /* rebond plus fort */
}

/* Apparition */
.navbar-custom.navbar-compact .navbar-logo-extra {
    opacity: 1;
    max-width: 120px;
    transform: translateY(0);
}






/* ===================================================
   NAVBAR COMPACTE AU SCROLL
   =================================================== */

/* ---------- Navbar compacte au scroll ---------- */


.navbar-custom.navbar-compact .navbar-logo-sud {
    height: clamp(38px, 10vw, 45px);
}

.navbar-custom.navbar-compact .navbar-nav .nav-link {
    /* Tablette */
    font-size: clamp(0.81rem, 1.89vw, 1.26rem);
}

@media (min-width: 992px) {
    .navbar-custom.navbar-compact .navbar-nav .nav-link {
        font-size: clamp(0.85rem, 1.53vw, 1.3rem);
    }
}

@media (min-width: 2048px) {
    .navbar-custom.navbar-compact .navbar-nav .nav-link {
        font-size: 1.35rem; /* 1.5rem × 0.9 */
    }
}


.navbar-logo-sud:hover {
    transform: scale(1.04); /* zoom leger */
}



/* ---------- Nav links et dropdown ---------- */
.navbar-nav .nav-link {
    font-family: 'Exo2-ExtraBold';
	display: flex;
    align-items: center;
    padding: 0 0.75rem;
    height: 62px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: normal;
    text-decoration: none;
    text-shadow: 1px 1px 1px black, 1.5px 1.5px 1.5px black, 1px 1px 1px black, 1.5px 1.5px 1.5px black;
    trzzzansition: background-color 0.2s ease, color 0.2s ease;
	transition: background-color 0.2s ease, color 0.2s ease, font-size 0.75s ease;
	
	position: relative;
    overflow: hidden;
    z-index: 1;
}

.navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #d20000, #ff0000);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
}

.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link:focus::before {
    opacity: 1;
}

.navbar-custom .dropdown:hover > .nav-link {
    background-image: linear-gradient(to top, #d20000, #ff0000);
}

.navbar-nav .nav-link .nav-text {
    display: inline-block;
    transform: skewX(-3deg);
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.navbar-nav .nav-link {
		font-size: clamp(0.9rem, 2.1vw, 1.4rem);
  }
}
@media (min-width: 992px) {
	.navbar-nav .nav-link {
		font-size: clamp(0.95rem, 1.7vw, 1.45rem);
  }
}
@media (min-width: 2048px) {
	.navbar-nav .nav-link {
		font-size: 1.5rem;
  }
}



/* ---------- Dropdown menus ---------- */
.dropdown-menu {
    left: 0 !important;
    right: auto !important;
    text-align: left;
    background: rgba(34,34,34,0.95);
    border: none;
    box-shadow: 2px 2px 2px #444;
    min-width: 20rem;
    border-radius: 0 0 10px 10px;
    margin-top: 0!important;
	padding-top: 0!important;
    padding-bottom: 0!important;
    overflow: hidden;
}

/* Dropdown scaleY pour animation desktop */
.navbar-custom .dropdown-menu {
    display: block;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}

.navbar-custom .dropdown-menu > li > a {
    color: white;
    font-size: clamp(1.15rem, 1.7vw, 1.35rem) !important;
    text-transform: none;
}

@media (min-width: 768px) and (max-width: 1000px) {
	.navbar-custom .dropdown-menu > li > a {
		font-size: clamp(1.1rem, 2.2vw, 1.9rem) !important;
	}
}

@media (max-width: 991.98px) {
    .navbar-custom .dropdown-menu > li > a {
        font-size: 1.2rem !important; /* ou une valeur qui te convient */
    }
}


.navbar-custom .dropdown-menu.show {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 768px) {
    .navbar-custom .dropdown:hover .dropdown-menu {
        transform: scaleY(1);
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------- Caret avec ombre ---------- */
.navbar-nav .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.25rem;
    margin-top: 8px;
    content: "";
    border-top: 0.3em solid #fff;
    border-right: 0.22em solid transparent;
    border-left: 0.22em solid transparent;
    filter: drop-shadow(0.75px 1px 1px black)
            drop-shadow(1px 1px 1px black);
    transition: none;
}

/* ---------- Dropdown item ---------- */
.dropdown-item {
    color: #DDD;
    text-decoration: none !important;
    padding-left: clamp(8px, 1.2vw, 14px);
    padding-right: clamp(8px, 1.2vw, 14px);
	font-size: 3em;
    padding-top: 12px;
    padding-bottom: 12px;
    text-shadow: 1px 1px 1px black, 1px 1px 1px black, 1.5px 1.5px 1.5px black;
	transition: 0.25s
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #ff0000;
    color: #fff;
}

/* ---------- Toggler hamburger ---------- */
.navbar-toggler {
    width: 45px;
    height: 36px;
    border: none;
    background-image: linear-gradient(to top, #ff4d00, #ff7a00, #ffb000);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    cursor: pointer;
    transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 6px black!important;
	position: relative;
}

.navbar-toggler:hover {
    filter: brightness(1.15);
    box-shadow: 
        0 6px 14px rgba(0,0,0,0.45)!important;
}

.navbar-toggler:active {
    transform: scale(0.95);
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.35),
        inset 0 2px 5px rgba(0,0,0,0.25);
}


.navbar-toggler .toggler-bar {
	position: absolute;
	left: 50%;
    transform-origin: center;
    width: 30px;
    height: 2.2px;
    border-radius: 3px;

    background: linear-gradient(to right, #ffffff, #ffe0c2);

    box-shadow: 0 1px 2px rgba(0,0,0,0.5);

    transition: transform 0.4s ease, opacity 0.4s ease;
}

.navbar-toggler .toggler-bar:nth-child(1) {
    top: 10px;
    transform: translateX(-50%);
}

.navbar-toggler .toggler-bar:nth-child(2) {
    top: 17px;
    transform: translateX(-50%);
}

.navbar-toggler .toggler-bar:nth-child(3) {
    top: 24px;
    transform: translateX(-50%);
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) {
    top: 17px;
    transform: translateX(-50%) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) {
    top: 17px;
    transform: translateX(-50%) rotate(-45deg);
}






/* ========================================================================== */
/* REGLAGES DESKTOP (>= 768px)                                           */
/* ========================================================================== */

@media (min-width: 768px) {
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
    }

    .navbar-nav .dropdown > .dropdown-toggle:after {
        margin-left: 0.25rem;
    }
	
}

/* ========================================================================== */
/* REGLAGES MOBILE (< 768px)                                             */
/* ========================================================================== */

@media (max-width: 991.98px) {
    .navbar-header {
        margin-right: 0.5rem;
    }

    .navbar-custom .container-fluid {
        gap: 0.25rem;
    }

    .navbar-nav .nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 1.3rem !important; /* valeur fixe pour mobile */
    }

    .navbar-nav .dropdown-menu {
        border-radius: 0 !important;
        background-color: #333333 !important;
        padding: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 1s ease-out, opacity 1s ease-out;
        display: block;
    }

    .navbar-nav .dropdown-menu > li > a {
        color: #D8D8D8 !important;
        background-color: #333333 !important;
        padding: 12px 22px !important;
        text-align: center;
        display: block;
        width: 100%;
        text-decoration: none !important;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .navbar-nav .dropdown-menu > li > a:hover,
    .navbar-nav .dropdown-menu > li > a:focus {
        color: #FFF !important;
        background-color: #555555 !important;
    }

    /* Sous-menu ouvert */
    .navbar-nav .dropdown-menu.open {
        max-height: 800px;  /* ajuster selon nombre d'items */
        opacity: 1;
    }
	
	/* Reparer l'affichage des menus mobiles */
    .navbar-custom .dropdown-menu {
        transform: none !important;
        opacity: 1 !important;
        display: none;
        pointer-events: auto;
    }

    .navbar-custom .dropdown-menu.show {
        display: block !important;
    }


	
	/* container avec logos + toggler reste centre verticalement */
    .navbar-custom .container-fluid {
        position: relative;
        display: flex !important;
        align-items: center !important; /* logos et toggler restent centres */
    }

    /* menu deroule positionne absolument sous la navbar */
    .navbar-custom .navbar-collapse {
        position: absolute;
        top: 53px; /* juste sous la navbar */
        left: 0;
        right: 0;
        border-bottom: 2px solid #DD3900;
        box-shadow: 0 6px 10px rgba(0,0,0,0.6);
        z-index: 1000;
    }
	
	.navbar-collapse {
        padding-left: 0;
        padding-right: 0;
    }

    /* Navbar-nav en colonne sur mobile */
    .navbar-nav {
        flex-direction: column; /* vertical */
        align-items: stretch;   /* liens prennent toute la largeur */
    }

    .navbar-nav .nav-item {
        width: 100%; /* chaque item prend toute la largeur */
    }

    .navbar-nav .nav-link {
        display: flex;
    	align-items: center;
    	justify-content: center;
        width: 100%;
        background: none;
        color: #fff;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        background-image: linear-gradient(to top, #d20000, #dd0000, #e80000, #f40000, #ff0000);
        color: #fff;
    }

    /* Sous-menus deja geres par Bootstrap, rien a changer */
}














/* === DEBUT GLIGHTBOX  === */
/* 1) Wrapper genere par GLightbox autour du contenu inline */
.gslide-inline {
    max-width: 95vw !important;          /* limite largeur au viewport */
    width: auto !important;
    margin: 0 auto !important;
    border-radius: 18px;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* 2) Neutralise les paddings/marges internes imposes par GLightbox */
.gslide-inline .ginner-container,b
.gslide-inline .gslide-inner-content {
    padding: 0 !important;
    margin: 0 !important;
}
.popup-body .impression {
    color: white !important;
    display: block;
    text-align: center;
    border-radius: 10px;
    background-color: #3A3A3A;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
}

/* 3) Cacher la div inline sur la page originale */
.glightbox-inline-content {
    display: none;
	position: relative;	
    background: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 180px auto;
	background-image: url(../img/logo-accueil-sud1formatic-mini-opaque10.svg);
    border-radius: 18px;
    overflow: hidden !important; /* empeche tout depassement visuel */
    margin: 0 !important;
    padding: 0 !important;
	padding-bottom: 60px !important; /* espace interne reserve au bouton */
}
.glightbox-inline-content.no-background {
	background-image: none;
}


/* 4) Style de l'iframe (utile pour les Google Maps / videos) */
.gslide-media iframe {
    overflow: hidden !important;
	border-radius: inherit !important;
}

.gslide-media {
    border-radius: 18px 18px 0 18px;
    overflow: hidden !important;
}




@media (max-width: 767px) {

  .gslide-inline {
    width: 94vw !important;
    height: 75dvh !important;       /* HAUTEUR REDUITE */
    max-height: 80dvh !important;
    margin: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .gslide-inline .gslide-content,
  .gslide-inline .ginner-container,
  .gslide-inline .gslide-inner-content {
    height: 100% !important;
    overflow: hidden !important;
  }

  .glightbox-inline-content {
    height: 100% !important;
  }

  .popup-body {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 12px 18px !important;  /* garde la zone du bouton */
  }

  .popup-btn-fixed {
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 50;
  }
}


/* BOUTON CONTACTEZ-NOUS FIXE EN BAS A DROITE */
.popup-btn-fixed {
    position: absolute;
    right: 15px;
    bottom: -15px;       /* depasse volontairement de la popup */
    z-index: 50;
    overflow: visible !important;
}

/* Desactive TOUT overflow dans TOUS les containers internes */
.glightbox-container * {
    overflow: visible !important;
}

/* Style du bouton close GLightbox (forme d'origine) */
.gclose.gbtn {
  background: #a80000 !important;  /* rouge fonce */
  border-radius: 6px !important;   /* identique au style original */
  padding: 8px !important;         /* garde la taille d'origine */
  opacity: 1 !important;
  transition: background 0.25s ease;
}

/* Croix d'origine, on ne la modifie PAS */
.gclose.gbtn svg {
  stroke: #ffffff !important;      /* croix blanche */
}

/* Hover : rouge un peu plus clair */
.gclose.gbtn:hover {
    background-color: #BF0909 !important;  /* rouge legerement plus clair */
}

/* Cacher uniquement les fleches */
.glightbox-button-prev,
.glightbox-button-next,
.gprev,
.gnext,
.glightbox-container .gcontrols .prev,
.glightbox-container .gcontrols .next {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cacher les SVG des fleches, mais garder celui du bouton close. */
.glightbox-button-prev svg,
.glightbox-button-next svg,
.gprev svg,
.gnext svg {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Laisser intact le bouton close */
.glightbox-button-close,
.glightbox-button-close svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* === FIN GLIGHTBOX  === */


/* === TITRES  === */
.h1-titre,
.h3-titre,
.h2-titre-popup,
.h3-titre-footer,
.lity-titre {
    font-family: 'Poetsen One';
	letter-spacing: -0.75px;
}

.dropdown-menu {
    font-family: 'Exo2-SemiBold', sans-serif;
}
.carousel-titre1,
.tarifs-designation-titre td {
    font-family: 'Amaranth', sans-serif;
}

.h1-titre {
	padding: 0 12px;
	font-size: clamp(1rem, 1rem + 1.5vw, 2.35rem) !important;
    font-weight: 700;
    text-shadow: 1.5px 1px 2px #B0B0B0;
    animation: backInDown;
	--animate-duration: 1.25s;
}
.h1-sous-titre {
    font-size: clamp(0.8rem, 0.8rem + 0.5vw, 1.2rem) !important;
	font-weight: 300;
}

.h2-titre {
    font-family: 'Poetsen One';
    letter-spacing: -0.75px;
    margin-top: 0px!important;
    text-align: center;
    color: white;
	margin-left: 0px;
    padding-top: 6px;
    padding-bottom: 8px;
	padding-left: 12px;
	padding-right: 12px;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 3px 2px 3px #000;
    border-radius: 0 0 18px 18px;
    transition: 0.8s;
    font-size: clamp(1rem, 1rem + 1.8vw, 1.4rem);
    display: block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.h2-titre::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 1s ease;
}

a:hover .h2-titre::after {
    opacity: 1;
}



a .h2-titre.rouge {
    background-image: linear-gradient(to top, #a50000, #c40000, #df1200, #f22b00, #ff4500);
}

a .h2-titre.rouge::after {
    background-image: linear-gradient(to top, #c40000, #df1200, #f22b00, #ff4500);
}

a .h2-titre.orange, .carousel-titre2.magasin, .h2-titre.general {
    background-image: linear-gradient(to top, #e60000, #ff2600, #ff5000, #ff7500, #ff9a00);
}

a .h2-titre.orange::after {
    background-image: linear-gradient(to top, #ff2600, #ff5000, #ff7500, #ff9a00);
}

a .h2-titre.vert,
.carousel-titre2.domicile {
    background-image: linear-gradient(to top, #197500, #329300, #4caf12, #66ca1f, #82e63a);
}

a .h2-titre.vert::after {
    background-image: linear-gradient(to top, #329300, #4caf12, #66ca1f, #82e63a);
}

a .h2-titre.bleu,
.carousel-titre2.onsite{
    background-image: linear-gradient(to top, #0c1c7c, #0045a5, #006bc4, #1492dc, #55b8ed);
}

a .h2-titre.bleu::after {
    background-image: linear-gradient(to top, #0045a5, #006bc4, #1492dc, #55b8ed);
}
a .h2-titre.global {
    background-image: linear-gradient(to top, #3a3a3a, #4d4d4d, #606060, #747474, #898989)
}

a .h2-titre.global::after {
    background-image: linear-gradient(to top, #3a3a3a, #585858, #797979, #9b9b9b, #bebebe);
}


/* Tablettes : 2 colonnes */
@media (min-width: 992px) {
    .rubrique-services .h2-titre {
        font-size: clamp(1.2rem, 1.2rem + 1vw, 1.35rem);
    }
}

/* Desktop : 4 colonnes */
@media (min-width: 1200px) {
    .rubrique-services .h2-titre {
        font-size: clamp(1.3rem, 1.3rem + 0.5vw, 1.45rem);
    }
}



.h2-titre.general {
    margin: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    color: #fff;
    text-align: left;
    font-size: clamp(1.3rem, 1.5vw, 1.5rem);
    text-shadow: 2px 2px 2px #000, 1.5px 1.5px 1px #000, 1.5px 1.5px 1px #000;
    border-radius: 18px 18px 0 0;
}
.h2-titre.general.centre {
    text-align: center;
}

.h3-titre-wrapper {
    width: 100%;
    overflow: hidden;
}


.h3-titre {
    display: inline-block; /* Evite que l animation deborde sur toute la largeur */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-bottom: 6px;
    padding-right: 2px;
    font-size: clamp(1.2rem, 1.2rem + 1vw, 2rem);
    /* [disabled]letter-spacing: -0.75px; */
    text-shadow: 1px 1px 2px #646464;
    overflow: hidden;
    animation: headShake;
    --animate-duration: 4s;
}

.h3-titre.gauche {
    text-align: left !important;
    margin-left: 15px !important; /* ou ce que tu veux */
    margin-right: auto !important;
}
.h3-titre.projet {
	margin-left: 0 !important;
    padding-left: 0 !important;
	background-image: linear-gradient(to right, #ff0000 0%, #ff5300 25%, #ff9a00 50%, #ffb712 75%, #ffe30b 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: #fff0;
    text-shadow: none;
    width: fit-content;
    filter: drop-shadow(1px 1px 1px #000);
}
.h3-titre.avis2 {
    color: #B30B3A;
}
.h3-titre.avis {
	text-align: center;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	color: #fff0;
	text-shadow: none;
    background-image: linear-gradient(to right, #f30000, #d3061d, #b20b3a, #921156, #711673);
	background-clip: text;
	-webkit-background-clip: text;
	filter: drop-shadow(1px 1px 1px #888);
}
.h3-titre-footer {
    margin-top: 14px;
    padding: 12px 8px 8px 8px!important;
    color: #FFF;
    font-size: clamp(1.3rem, 1.3rem + 0.9vw, 1.6rem) !important;
    text-align: center;
    text-shadow: 2px 2px 3px #000;
    margin-bottom: 14px;
}
.h3-titre-footer  {
  text-decoration: none;

}
.h3-titre-footer a:hover,
.h3-titre-footer a:focus,
.h3-titre-footer a:active,
.h3-titre-footer a:visited {
  text-decoration: none;
}


.no-underline:active h3.h3-titre-footer {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}
/* === FIN TITRES  === */






/* === DEBUT PARAGRAPHES  === */

/* ===============================
   Texte responsive general general global pour divers elements
   Utilise clamp() pour une taille fluide
=============================== */
.services-description,
.projet-paragraphe,
.rubrique-paragraphe,
.divers-paragraphe,
.chiffres-paragraphe,
.avis-paragraphe,
.nota-bene-sap, .nota-bene-cgv,
.tarifs-designation,
.status-div {
	font-size: clamp(0.9rem, 0.5rem + 1.2vw, 1rem);
}

/* === FIN PARAGRAPHES  === */



.sap-50 {
    display: inline-block;
    margin-left: 7px;
    padding: 3px 4px 4px;
    background: linear-gradient(to top, #d20000, #ff0000);
    color: #fff;
    font-size: 0.75em;
    font-weight: 900;
    line-height: 1;
    border-radius: 4px;
    vertical-align: 3px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    border: 1px solid white;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
}

.sap-percent {
    position: relative;
    top: -0.1em;
    font-size: 0.75em;
    margin-left: 1px;
}

.sap-logo {
    display: inline-block;
    width: 68px;
    height: 40px;
    margin-left: 6px;
    object-fit: contain;
    vertical-align: middle;
    position: relative;
    background: url("../img/logo-sap-menu.png") center center / contain no-repeat;
	transform: translateY(-3px);
}


/* NO-UNDERLINE */
.no-underline {
	text-decoration: none !important;
}

.no-underline:hover,
.no-underline:focus,
.no-underline:active,
.no-underline:visited {
	text-decoration: none !important;
	outline: none !important;
}
/* FIN NO-UNDERLINE */




/* === DEBUT POPUP-SERVICES  === */
/* Bandeau rouge colle aux bords */
.popup-header {
    margin: 0!important;
    padding: 0!important;
}
.popup-body {
    padding: 12px 25px;
}

.h2-titre-popup {
    margin: 0;
	padding: 8px 20px;
    color: #fff;
    font-size: clamp(1rem, 1rem + 1vw, 1.45rem);
    text-shadow: 1.5px 1.5px 1px #000, 1.5px 1.5px 1px #000, 1.5px 1.5px 1px #000;
    line-height: 1.2em;
    text-align: center;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    background-image: linear-gradient(to top, #b30000, #be0000, #ca0000, #d50000, #e10000);
}

.h2-titre-popup .fa-solid, .h3-titre-popup .fa-solid {
    margin-right: 8px
}

/* ===== TITRES DES BLOCS (H3) ===== */
.h3-titre-popup {
    font-size: clamp(0.8rem, 0.8rem + 0.5vw, 1.1rem);
    font-weight: 700;
    background: #FFE2C4;             /* fond orange clair */
    color: #D84315;                  /* texte orange vif */
    padding-top: 6px;
    padding-right: 13px;
    padding-left: 13px;
    padding-bottom: 6px;              /* (haut/bas - gauche/droite) */
    margin-top: 8px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 8px;           /* marge haut - bas */
    border-left: 6px solid #FF5B00;  /* orange intense */
    border-radius: 6px;
    transition: background 0.25s ease;
}

/* Hover legerement plus contraste */
.h3-titre-popup:hover {
    background: #FFD4AD;
}

/* Harmonisation icone */
.h3-titre-popup i {
	font-size: 1.25rem;
  	margin-right: 0.4em;
  	color: #FF5B00;
}

/* ===== PARAGRAPHES ===== */
.paragraphe-popup {
  font-size: clamp(0.9rem, 1.5vw, 0.95rem);
  line-height: 1.55;
  margin: 0 0 1.2em 0;
  color: #2b2b2b;
}

/* Couleur des liens */
.paragraphe-popup a {
    font-weight: 700;
    color: #D84315;         /* meme orange texte */
    text-decoration: none;
}

.paragraphe-popup a:hover {
    text-decoration: underline;
}



.paragraphe-popup .zone-intervention {
    display: inline;
    color: #555;
    font-weight: 700;
    padding: 3px 8px 3px 6px;
    border-radius: 8px;
    background-color: #FFDF49;
}
.paragraphe-popup .zone-intervention i {
    margin-right: 10px;
}

/* === FIN POPUP-SERVICES  === */








/* BOUTONS BTN */

.btn .fa-solid,
.titre-tarifs .fa-solid,
.tarifs-rubrique-vente .fa-solid,
.quartier-bulle .fa-solid,
.quartier-bulle .fa-brands,
.quartier-bulle .fa-regular,
.tarifs-bas-deplacements .fa-solid,
.tarifs-bas-magasin .fa-solid,
.tarifs-bas-devis .fa-solid {
	margin-right: 8px;
}

.btn .fa-play, .fa-play.fa-lity, .fa-paper-plane,
.h2-titre.general .fa-location-dot,
.h2-titre.general .fa-envelope {
	--fa-animation-duration: 2.5s;
}

.btn {
    font-weight: 480;
    margin-top: 20px;
    display: inline-flex;        /* remplacer inline-block par inline-flex */
    align-items: center;          /* centre verticalement le texte et icone */
    justify-content: center;      /* centre horizontalement si necessaire */
    height: 50px;
    padding: 0 20px 0 15px;
    color: #fff;
    font-size: clamp(0.85rem, 0.75rem + 0.9vw, 1.15rem);
    line-height: 1.5em;
    white-space: nowrap;
    text-shadow: 1.5px 1.5px 0.5px #000;
    border: 0.25px solid #fff0;
    border-radius: 50px;
    box-shadow: 2px 2px 3px #202020;
    background-size: 200% auto;
    transition: 0.75s;
    letter-spacing: -0.02em;
}

/* Tous les boutons conservent le texte blanc dans tous les etats */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn:focus-visible,
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled):active:focus {
    color: #fff !important;
}

.btn,
.btn.active,
.btn:active,
.form-control {
    background-image: none;
}
.btn.focus,
.btn:focus,
.btn:hover {
    background-position: right center;
    box-shadow: 3px 3px 3px #202020;
    transform: translateY(2px);
    color: #FFF;
}
.btn.active,
.btn:active {
    outline: 0;
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.65;
}
a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none;
}
.btn.align-right {
    margin-right: 10px;
    float: none;
}
.btn.active,
.btn:active,
.open > .dropdown-toggle.btn {
    color: #fff;
    background-image: none;
    box-shadow: inset 2px 2px 3px #202020;
}






/* BOUTON BTN-ORANGE */
.btn-orange {
    border: 1px solid #dd4200;
    background-image: linear-gradient(
        to right,
        #ff0000 0%,
        #ff3a00 25%,
        #ff7b12 50%,
        #ff3a00 75%,
        #ff0000 100%
    );
}

/* hover + focus */
.btn-orange:hover,
.btn-orange:focus {
    background-color: #dd4200;
    border-color: #bc3100!important;
}

/* active */
.btn-orange:active,
.btn-orange:not(:disabled):not(.disabled):active:focus {
    background-image: linear-gradient(to right, #ff0000 0%, #ff7b12 51%, #ff0000 100%);
    border-color: #d04000 #d04000 #bc3100;
}


/* BOUTON BTN-RED */
.btn-red {
    background-image: linear-gradient(
    to right,
    #C30000 0%,
    #E22609 25%,
    #FF4B11 50%,
    #E22609 75%,
    #C30000 100%
);
}

/* hover + focus */
.btn-red:hover,
.btn-red:focus {
    background-color: #f10000;
    border-color: #d80000!important;
}

/* active (couleurs à ajuster si necessaire) */
.btn-red:active,
.btn-red:not(:disabled):not(.disabled):active:focus {
    background-image: linear-gradient(
        to right,
        rgb(195, 0, 0) 0%,
        rgb(255, 75, 17) 51%,
        rgb(195, 0, 0) 100%
    );
}



/* BOUTON BTN-ORANGE2 */
.btn-orange2 {
    border: 1px solid #C84A00;
    background-image: linear-gradient(
        to right,
        #C84A00 0%,
        #E05A00 25%,
        #F07800 50%,
        #E05A00 75%,
        #C84A00 100%
    );
}

/* hover + focus */
.btn-orange2:hover,
.btn-orange2:focus {
    background-color: #E56700;
    border-color: #B83F00 !important;
}

/* active */
.btn-orange2:active,
.btn-orange2:not(:disabled):not(.disabled):active:focus {
    background-image: linear-gradient(
        to right,
        #C84A00 0%,
        #F07800 51%,
        #C84A00 100%
    );
    border-color: #C84A00 #C84A00 #A83A00;
}






/* FIN BOUTONS BTN */





/* LINK-HOVER */

/* tous les liens avec une transition */
.jumbotron a,
.link-hover a,
.rubrique-paragraphe a,
.zone-intervention-precision a,
.projet-paragraphe a,
.rubrique-chiffres a,
.rubrique-avis a,
.articles-paragraphe a,
.footer1 a h3,
.footer2 a,
.blog-readmore-custom {
    transition: 0.5s;
}

/* couleur des liens sur le hover */
.jumbotron a:hover,
.rubrique-paragraphe a:hover,
.zone-intervention-precision a:hover,
.rubrique-chiffres a:hover,
.rubrique-avis a:hover,
.articles-paragraphe a:hover,
.blog-readmore-custom:hover {
    color: #e30800;
}
.footer1 a:hover h3,
.footer2 a:hover {
    color: #FFBF39;
}

.link-hover.rouge a:hover {
    color: #e30800;
}
.link-hover.orange a:hover {
    color: #ff4f00;
}
.link-hover.vert a:hover {
    color: #50ad2a;
}
.link-hover.bleu a:hover {
    color: #1429a9;
}
.projet-paragraphe a:hover{
    color: #ff4f00;
}

/* FIN LINK-HOVER */














/* JUMBOTRON */
.jumbotron {
	padding-top: 10px;
    padding-bottom: 6px;
    color: inherit;
    background-color: #F4F4F4;
  	box-shadow: 0 2px 5px #888;
	margin-left: 3px;
    margin-right: 3px;
    border-radius: 0 0 20px 20px;   /* légèrement plus arrondi */
}

.jumbotron p {
    padding-top: 0;
    padding-right: 6px;
    padding-left: 6px;
    padding-bottom: 0;
    margin-bottom: 10px;
    font-size: clamp(0.85rem, 0.85rem + 0.5vw, 1.15rem) !important;
    line-height: 1.3em;
    font-weight: 300;
}

/* FIN JUMBOTRON */


/* CAROUSEL */




#carousel-195620 .carousel-caption {
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 900px;
    padding: clamp(1rem, 2.8vw, 1.75rem) clamp(1.5rem, 4vw, 2.75rem);
    text-align: center;
}





.carousel {
  position: relative;
}

.carousel-item {
    position: relative;
}


.carousel-padding {
    padding-left: 2px;
    padding-right: 2px;
}






/* =======================
   CONTAINER TITLE-LOGO
======================= */

.title-logo-link {
    position: absolute;

    top: clamp(10px, 1vw, 20px);
    left: clamp(10px, 1vw, 20px);

    width: clamp(65px, 8vw, 200px);
    aspect-ratio: 1 / 1;

    display: block;
    z-index: 10;

    border-radius: 20%;
    overflow: hidden;

    border: 1.25px solid rgba(255,255,255,0.9);

    box-shadow:
        0 0 clamp(4px, 1.5vw, 10px) rgba(255,255,255,0.8),
        0 0 clamp(6px, 2vw, 14px) rgba(0,0,0,0.4);

    transition:
        transform 0.75s ease,
        box-shadow 0.75s ease;
}

.title-logo-link::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at top left,
        rgba(255,255,255,0.20),
        transparent 60%
    );

    pointer-events: none;

    opacity: 0.6;

    transition: opacity 0.75s ease;
}



/* =======================
   IMAGE LOGO
======================= */

.title-logo {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: contain;

    padding: 3%;
    box-sizing: border-box;

    transform-origin: center;
	
    transition: transform 0.75s ease;
	
	opacity: 1;
}

/* =======================
   HOVER
======================= */

.title-logo-link:hover {
    transform: translateY(-1px) scale(1.02);

    box-shadow:
        0 0 10px rgba(255,255,255,0.16),
        0 0 24px rgba(0,0,0,0.45);
}

.title-logo-link:hover::after {
    opacity: 0.5;
}

.title-logo-link:hover .title-logo {
    transform: scale(1.03);
}






/* === CENTRAGE VERTICAL DES CHEVRONS DANS LE CAROUSEL === */
.carousel-control-prev i,
.carousel-control-next i {
    font-size: clamp(2em, 2vw, 3.5em);   /* taille des flèches */
    color: white;      /* couleur */
    text-shadow: 2px 2px 4px black; /* optionnel */
	position: relative; /* ou absolute si tu veux les superposer sur l'image */
    left: 0;            /* recentre les icônes */
	top: clamp(20px, 2.5vw, 58px);
}

.carousel-control-prev,
.carousel-control-next {
    width: 6%; /* zone cliquable */
}

.carousel-control-prev:hover::before,
.carousel-control-next:hover::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.carousel-control-prev:hover::before {
    left: 4px;
    background: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0));
}

.carousel-control-next:hover::before {
    right: 4px;
    background: linear-gradient(to left, rgba(0,0,0,0.4), rgba(0,0,0,0));
}






@media (max-width: 767px) {
    .carouel p, .carousel-control i, .carousel-caption a .carousel, .carousel-control-prev, .carousel-control-next {
        display: none;
    }
	.carousel-indicators {
    	bottom: -20px!important; /* decale tout le bloc d'indicateurs de 50px vers le bas */
	
	}
.carousel-titre1, .carousel-titre2 {
		transform: translateY(38px);
		padding: 4px 8px!important;
	}
.carousel-titre1 {
		font-size: 1.1em!important;
		border-radius: 12px 12px 0 0!important;
	}
	.carousel-titre2 {
		font-size: 0.82em!important;
		font-weight: 550!important;
		border-radius: 0 0 12px 12px!important;
	}
}

@media (min-width:767px) and (max-width:867px){
	.carousel-control-prev, .carousel-control-next {
        display: none;
    }
	.carousel-caption {
        bottom: 5px;
    }
	.carousel-indicators {
    	bottom: -10px; /* decale tout le bloc d'indicateurs de 50px vers le bas */
	}
}



/* === ANIMATION TEXTE CAROUSEL === */
.carousel-caption {
	opacity: 0;
    transform: translateY(10px);
    transition: all 0.8s ease-in-out;
}

.carousel-item.active .carousel-caption {
    opacity: 1;
    transform: translateY(0);
}

.bulle-contenu {
    transition: transform 0.75s ease;
}

.carousel-item:hover .bulle-contenu {
    transform: translateY(4px);
}
/* === FIN ANIMATION TEXTE CAROUSEL === */

.carousel-inner {
    position: relative;
    width: 100%;
    box-shadow: 0 1px 4px #888;
    margin-top: 62px;
    background-color: #f4f4f4;
}
.carousel-inner img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .carousel-inner img:not(.title-logo) {
        height: clamp(151.33px, calc(151.33px + (768px - 100vw) * 0.05), 260px);
        object-fit: cover;
        object-position: center;
    }
}

@media (min-width: 1680px) {
    .carousel-inner img:not(.title-logo) {
        height: clamp(300px, calc(342.15px - (100vw - 1680px) * 0.05), 342.15px);
        object-fit: cover;
        object-position: center;
    }
}
.carousel-titre1 {
    font-size: clamp(0.9rem, 0.9rem + 1vw, 1.9rem);
	backdrop-filter: blur(6px);
    color: red;
    background-color: rgba(255,255,255,0.8);
	border-radius: 18px 18px 0px 0px;
    padding: 8px;
    text-shadow: 1px 1px 1px #999;
}
.carousel-titre2 {
	backdrop-filter: blur(6px);
	text-transform: uppercase;
	font-size: clamp(0.6rem, 0.6rem + 0.65vw, 1.15rem);
	font-weight: 450;
	color: white;
	text-shadow: 1.25px 1.25px 1px #000, 1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
	border-radius: 0 0 18px 18px;
	padding: 8px;
	margin-top: -18px;
}



/* FIN CAROUSEL */



/* RUBRIQUE-COMMUN */
.rubrique-projet,
.rubrique-chiffres,
.rubrique-avis,
.rubrique-articles,
.footer1 {
    padding-bottom: 20px !important;
}
/* FIN RUBRIQUE-COMMUN */



/* RUBRIQUE-SERVICES */

.row.quartiers {
	justify-content: center;
}





/* XS : moins de 576 px */
.row.quartiers > .quartier {
    width: 96%;
}

/* SM : à partir de 576 px */
@media (min-width: 576px) {
    .row.quartiers > .quartier {
        width: 50%;
    }
}

/* MD : à partir de 768 px */
@media (min-width: 768px) {
    .row.quartiers > .quartier {
        width: 50%;
    }
}

/* LG : à partir de 992 px */
@media (min-width: 992px) {
    .row.quartiers > .quartier {
        width: 50%;
    }
}

/* XL : à partir de 1200 px */
@media (min-width: 1200px) {
    .row.quartiers > .quartier {
        width: 49%;
    }
}

/* XXL : à partir de 1400 px */
@media (min-width: 1400px) {
    .row.quartiers > .quartier {
        width: 25%;
    }
}






.rubrique-services .quartier-bulle {
    border-radius: 18px;
    margin-top: 0;
    margin-bottom: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.4s ease;
}

.rubrique-services .quartier-bulle:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
}

.rubrique-services .services-description {
    line-height: 1.4;
    margin-bottom: 0;
}
.quartier .description-espace {
    margin-top: -4px;
	margin-bottom: auto; /* pousse le bloc bas vers le bas */
    text-align: justify;
    padding-left: 10px;
	padding-right: 10px;
}


.quartier {
    margin-bottom: 40px;
	display: flex;
    flex-direction: column;
	transition: all 0.35s ease !important;
	justify-content: center;
}

.quartier:hover {
    transform: translateY(4px)
}
.quartier1,
.quartier2,
.quartier3,
.quartier4,
.quartier-services-depannage-informatique,
.quartier-installation-assistance-internet,
.quartier-services-depannage-internet,
.quartier-services-sauvegarde-donnees,
.quartier-initiation-informatique,
.quartier-diagnostic,
.quartier-maintenance,
.quartier-vente-pc-assembles {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #fff;
    background-clip: content-box;
}

.img-thumbnail {
    width: 100%;
    aspect-ratio: 2.34 / 1; /* Ratio d'origine des SVG : 1344 × 600 = 2.24 / 1 */
    height: auto;
    object-fit: cover;
	object-position: top;
    display: block;
    padding: 3px;
    border-radius: 18px 18px 0 0;
    border-style: solid;
    border-width: 1.2px;
    border-bottom: 0;
    min-height: 0;
}


.img-thumbnail.rouge {
    border-color: #FE4301;
}

.img-thumbnail.orange {
    border-color: #FF9802;
}

.img-thumbnail.vert {
    border-color: #80E439;
}

.img-thumbnail.bleu {
    border-color: #51B6EC;
}

.fleche-maxi {
    font-size: 1.25em;
    display: inline-block;
    margin-left: -6px;
    vertical-align: -0.05em;
}
.fleche-maxi.rouge {
    color: #E10000;
}
.fleche-maxi.orange {
    color: #FF4F00;
}
.fleche-maxi.vert {
    color: #50AD2A;
}
.fleche-maxi.bleu {
    color: #1429a9;
}






.zone-intervention {
    width: min(98%, 3860px);
    box-sizing: border-box;
    margin: clamp(18px, 3vw, 25px) auto;
    padding: clamp(18px, 2.5vw, 30px) clamp(12px, 2vw, 24px);
    text-align: center;

	border: 1px solid #D9D9D9;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(41, 42, 44, 0.08);
	

    background: linear-gradient(
    180deg,
    #DCECF7 0%,
    #EAF3F9 30%,
    #F5F8FA 65%,
    #FFFFFF 100%);
}

.zone-intervention h2 {
    margin: 0 0 16px;
    font-family: 'Poetsen One';
    font-size: clamp(1rem, 1rem + 1.11vw, 2rem) !important;
    text-shadow: 1.5px 1px 2px lightgrey;
}

.zone-intervention h2 .fa-solid {
    font-size: 1.2em;
	color: #EE4800;
    margin-right: clamp(1px, 1vw, 10px);
}

.zone-intervention-sous-titre {
    font-size: clamp(0.95rem, 0.6rem + 1.2vw, 1.1rem);
    margin-bottom: clamp(16px, 2vw, 24px);
}

.zone-intervention-villes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(7px, 1vw, 12px);
    width: 100%;
    margin: 0 auto;
}

.zone-intervention-villes span {
    text-decoration: none;
	font-weight: 400;
	box-sizing: border-box;
    font-size: clamp(0.95rem, 0.6rem + 1.2vw, 1rem);
    padding: clamp(7px, 0.7vw, 9px) clamp(11px, 1.2vw, 17px);
    border: 1.25px solid #FF5D00;
    border-radius: 22px;
    color: #292A2C;
    background: #FFFFFF;
    line-height: 1.3;
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

.zone-intervention-villes span:hover {
    background: #FFE8D6;
    border-color: #FF3F00;
    color: #000000;
}




.ville-plus {
    align-self: center;
    margin: 0;
	display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    box-sizing: border-box;
    padding: 0 0 2px !important;
    border: 1px solid #FF7900;
    border-radius: 50%;
    background: #292A2C;
    color: #FF7900;
    font-family: inherit;
    font-size: 1.2rem !important;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.2s ease, color 0.2s ease;
}


.ville-plus:hover {
    background: #FF7900;
    color: #292A2C;
}

.ville-plus:focus-visible {
    outline: 2px solid #FF7900;
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .zone-intervention-villes .ville-plus {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .zone-intervention-villes .ville-avec-photo.screen-large {
        display: none !important;
    }

    .zone-intervention-villes.villes-developpees .ville-avec-photo.screen-large {
        display: inline-flex !important;
    }
}





.zone-intervention-precision {
    font-size: clamp(0.95rem, 0.6rem + 1.2vw, 1.1rem);
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid #E5D9CF;
    line-height: 1.6;
}

/* Mobiles */
@media (max-width: 575.98px) {
    .zone-intervention {
        width: 98%;
        padding: 18px 10px;
        border-radius: 11px;
    }

    .zone-intervention-sous-titre {
        margin-bottom: 18px;
    }

    .zone-intervention-villes {
        gap: 5px;
		padding-inline: 0;
    }

    .zone-intervention-villes span {
        padding: 5px 8px;
        line-height: 1.3;
    }

    .zone-intervention-precision {
        margin-top: 18px;
        padding-top: 12px;
        line-height: 1.5;
    }
}





.zone-intervention-villes .ville-avec-photo {
    position: relative;
	cursor: pointer;
}

.zone-intervention-villes .ville-photo {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 6px);
    padding: 5px;
    background: #FFFFFF;
    border: 1px solid #FF7900;
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}


/* Mobiles : jusqu'à 575,98 px */
@media (max-width: 575.98px) {
    .zone-intervention-villes .ville-photo {
        width: 90px;
        box-sizing: border-box;
    }
}

/* Petites tablettes : 576 à 767,98 px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .zone-intervention-villes .ville-photo {
        width: 100px;
        box-sizing: border-box;
    }
}

/* Tablettes : 768 à 899,98 px */
@media (min-width: 768px) and (max-width: 899.98px) {
    .zone-intervention-villes .ville-photo {
        width: 120px;
        box-sizing: border-box;
    }
}

/* De 900 à 1679,98 px */
@media (min-width: 900px) and (max-width: 1679.98px) {
    .zone-intervention-villes .ville-photo {
        width: 150px;
        box-sizing: border-box;
    }
}

/* Grands écrans : à partir de 1680 px */
@media (min-width: 1680px) {
    .zone-intervention-villes .ville-photo {
        width: 175px;
        box-sizing: border-box;
    }
}




.zone-intervention-villes .ville-photo::after {
    content: "";
    position: absolute;
    right: clamp(4px, 1.3vw, 10px);
	top: clamp(4px, 1.3vw, 10px);
	width: clamp(15px, 5vw, 35px);
	height: clamp(15px, 5vw, 35px);
    background: url("../img/logo-sud1formatic-official.png") center / contain no-repeat;
    border-radius: clamp(3px, 1.2vw, 8px);
    opacity: 0.9;
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.85))
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.75));
    pointer-events: none;
}

.zone-intervention-villes .ville-photo img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
  	height: auto;
  	aspect-ratio: 220 / 150;   /* proportions correctes */
}

.zone-intervention-villes .ville-avec-photo:hover .ville-photo,
.zone-intervention-villes .ville-avec-photo:focus-within .ville-photo {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}



.zone-intervention-yaris {
    position: relative;
    width: calc(100% + 2 * clamp(12px, 2vw, 24px));
    height: 145px;
    margin: 0 0 calc(-1 * (clamp(18px, 2.5vw, 30px) + 6px));
    margin-left: calc(-1 * clamp(12px, 2vw, 24px));
    overflow: hidden;
    line-height: 0;

}

.zone-intervention-yaris img {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 250px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(1.5px 2.5px 3px rgba(0, 0, 0, 0.4));
    animation: yaris-circulation 14s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes yaris-circulation {
    from {
        left: -250px;
    }
    to {
        left: 100%;
    }
}

/* Pas d'animation sur mobile */
@media (max-width: 767.98px) {
    .zone-intervention-yaris {
        display: none;
    }
}

/* Respect des préférences de réduction des animations */
@media (prefers-reduced-motion: reduce) {
    .zone-intervention-yaris img {
        animation: none;
        left: 0;
    }
}











.rubrique-services-contact {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* aligner a droite */
	transform: translateY(-10px)
}









/* FIN RUBRIQUE-SERVICES */




.rubrique-projet {
    background-image: url("../img/fond-projet.jpg");
    background-position: center center;
    background-repeat: no-repeat;
	background-size: cover; /* remplit la div, coupe si necessaire */
    box-shadow: 0 0;
    margin-right: 0px;
    padding-left: 15px !important;
}
.projet-paragraphe {
    padding-right: 10px;
    text-shadow: 1.5px 1.5px 0.5px #000000;
    text-align: justify;
}
.projet-paragraphe, .projet-paragraphe a {
    color: #FFFFED;
}
.rubrique-projet .bon-plan {
    font-size: 1.2em;
	font-weight: 600;
    padding-top: 14px;
}

.bon-plan.gradient-text-orange-red {
    background-image: linear-gradient(to right, #ff0000 0%, #ff5300 25%, #ff9a00 50%, #ffb712 75%, #ffe30b 100%);
    background-clip: text;
    color: transparent;
    text-decoration: none; /* on supprime l'underline classique */
    position: relative;
    text-shadow: none;
    display: inline-block;
    transition: transform 0.5s ease; /* pour l'effet de texte */
}


/* soulignement degrade */
.bon-plan.gradient-text-orange-red::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0em; /* ajuster selon taille texte */
    width: 100%;
    height: 0.07em; /* epaisseur du soulignement */
    background-image: linear-gradient(to right, #ff0000 0%, #ff5300 25%, #ff9a00 50%, #ffb712 75%, #ffe30b 100%);
    border-radius: 2px;
    transition: 0.5s ease; /* pour l'animation d'epaisseur */
}

/* Hover : texte lift + soulignement plus epais */
.bon-plan.gradient-text-orange-red:hover {
    transform: translateX(2px); /* effet subtil de texte */
}

.bon-plan.gradient-text-orange-red:hover::after {
    height: 0.07em; /* soulignement plus epais */
}



.rubrique-projet .bon-plan .fa-solid {
    margin-right: 8px;
    font-size: 1.2em;
	--fa-animation-duration: 2s;
}

.rubrique-projet a:hover {
    color: #FF8C00;
}
.nota-bene-sap, .nota-bene-cgv, .nota-bene-tarifs {
    font-style: italic;
	font-weight: 300;
    font-size: 0.85rem !important;
    line-height: 1.1rem;
    display: inline-block;
}


/* FIN RUBRIQUE-PROJET */




/* DEBUT RUBRIQUE-NOTRE-HISTOIRE - TIMELINE */

.timeline-wrapper {
  
}


.company-timeline {
    font-weight: 300;
  --ct-primary: #EE4800;
    position: relative;
    max-width: 1000px;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 60px;
    padding: 20px;
    background: radial-gradient(
  circle at center,
  #ffffff 0%,
  #f6f8fc 100%
);
    border-radius: 16px;
    box-shadow: inset 0 30px 30px -20px rgba(255,255,255,0.9),
    inset 0 -30px 30px -20px rgba(255,255,255,0.9);
}

/* central line */
.company-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  top: 0px;
  height: 100%;

  background: var(--ct-primary);
  transform: translateX(-50%);
	
  border-top: 10px solid var(--ct-primary);
  border-radius: 10px;
}

.timeline-top {
  position: absolute;
  left: 50%;
  top: 10px;

  width: 20px;
  height: 20px;

  background: var(--ct-primary);
  border-radius: 50%;

  transform: translateX(-50%);
}

.company-timeline::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10px;

  width: 20px;
  height: 20px;

  background: var(--ct-primary);
  border-radius: 50%;

  transform: translateX(-50%);
}

/* item */
.company-timeline .ct-item {
  position: relative;
  width: 50%;
  padding: 20px 30px;
  box-sizing: border-box;
}

/* left */
.company-timeline .ct-item:nth-child(odd) {
  left: 0;
  text-align: right;
}

/* right */
.company-timeline .ct-item:nth-child(even) {
  left: 50%;
  text-align: left;
}


/* marker */
.company-timeline .ct-marker {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translate(-50%, -50%);

	width: 50px;
	height: 50px;

	background: var(--ct-primary);
	border: none;
	border-radius: 50%;

	box-shadow: 0 4px 10px rgba(0,0,0,0.08);

	display: flex;
	align-items: center;
	justify-content: center;
}

/* marker icon */
.company-timeline .ct-marker i {
	font-size: 25px;
	color: whitesmoke;
	line-height: 1;
	text-shadow: 0 2px 2px rgba(0,0,0,0.85);
}

/* marker right side */
.company-timeline .ct-item:nth-child(even) .ct-marker {
  left: 0;
}

/* bulle, dimensions et padding */
.company-timeline .ct-content {
  background: linear-gradient(145deg, #ffffff, #f3f6fb);

  padding: 18px 18px 12px 18px;
  border-radius: 12px;

  border: 1px solid #e6eaf0;

  box-shadow: 0 10px 25px rgba(0,0,0,0.06);

  max-width: 560px;

  transition: transform 0.5s ease,
              box-shadow 0.5s ease,
              background 0.5s ease,
              border-color 0.5s ease;
}

/* hover */
.company-timeline .ct-content:hover {
  transform: translateY(2px);

  background: linear-gradient(145deg, #fff4ed, #ffe3d6);

  border-color: var(--ct-primary);

  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* droite */
.company-timeline .ct-item:nth-child(even) .ct-content {
  margin-left: 5px;
}

/* gauche */
.company-timeline .ct-item:nth-child(odd) .ct-content {
  margin-right: 5px;
}

/* title */
.company-timeline .ct-content h3 {
    font-weight: 600;
    font-size: 1.1rem;
}

.company-timeline .ct-content p {
    font-size: 0.97rem;
  }

/* header */
.ct-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* align right */
.company-timeline .ct-item:nth-child(odd) .ct-header {
  justify-content: flex-end;
}

/* logo */
.ct-header img {
  transform: translateY(-0.2em);
  height: 32px;
  width: auto;
}

/* BASE DATE CENTERED */
.company-timeline .ct-date {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin-bottom: 15px;

  font-size: 0.95rem;
  color: var(--ct-primary);
  font-weight: 380;
}

/* LEFT AND RIGHT SHARED LINES */
.company-timeline .ct-date::before,
.company-timeline .ct-date::after {
  content: '';
  flex: 1;
  height: 1px;

  background: rgba(238, 72, 0, 0.3);
}

/* SPACE BETWEEN LINE AND TEXT */
.company-timeline .ct-date::before,
.company-timeline .ct-date::after {
  background: linear-gradient(
    to right,
    transparent,
    rgba(238, 72, 0, 1),
    transparent
  );
}





















/* responsive */
@media (max-width: 768px) {

  .company-timeline .ct-content p {
    font-size: 0.9rem;
  }

  .company-timeline .ct-content h3 {
    font-size: 1.1rem;
  }

  .company-timeline .ct-date {
    font-size: 0.85rem;
  }

  .company-timeline .ct-content {
    max-width: 100%;
  }

  .timeline-top {
    left: 21px;
	top:20px;
    transform: translate(-50%, -50%);
  }
	
  .company-timeline::before {
    left: 20px;
    transform: none;
  }
	.company-timeline::after {
    left: 21px;
    transform: translateX(-50%);
  }

  .company-timeline .ct-item:nth-child(odd),
  .company-timeline .ct-item:nth-child(even) {
    text-align: left !important;
  }

  .company-timeline .ct-header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .company-timeline .ct-item {
    width: 100%;
    left: 0 !important;
    text-align: left !important;
    padding-left: 30px;
    padding-right: 20px;
  }

  .company-timeline .ct-marker {
    left: 0 !important;
    transform: translate(-50%, -50%);

    width: 38px;
    height: 38px;
  }

  .company-timeline .ct-marker i {
    font-size: 20px;
  }
}
/* FIN RUBRIQUE-NOTRE-HISTOIRE */





/* DEBUT RUBRIQUE-CHIFFRES */
.rubrique-chiffres {
    font-weight: 300;
    text-align: center;
    background-image: url("../img/fond-rubrique-chiffres.svg");
    background-attachment: fixed;
}

.chiffres-bulle a,
.chiffres-bulle a:hover,
.chiffres-bulle a:focus,
.chiffres-bulle a:active {
    text-decoration: none;
    color: inherit;
}

@media (max-width: 992px) {
    .rubrique-chiffres {
        background-attachment: scroll;
    }
}

.rubrique-chiffres a {
    color: #333;
}

p.no-click {
    pointer-events: none;
    color: #333;
}

.chiffres-bulle {
    padding-left: 25px;
    padding-right: 25px;
    margin: 0;
}

.chiffres {
    position: relative;                 /* nécessaire pour le ::before */
    min-height: 340px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 10px;
    font-size: 0.9em;
    font-weight: 375;
    text-transform: uppercase;
    line-height: 58px;
    background-size: auto 150px;
    background-position: center 150px;
    background-repeat: no-repeat;
	border-radius: 50px;
    transition: background-size 0.75s ease,
                background-color 0.75s ease,
                box-shadow 0.75s ease;
    text-decoration: none;
}

@media (max-width: 768px) {
    .chiffres {
        min-height: 340px;
    }
}

/* Image grise en superposition */
.chiffres::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    opacity: 1;
    transition: opacity 0.75s ease;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Au survol on fait disparaître l’image grise */
.chiffres:hover::before {
    opacity: 0;
}

.chiffres:hover {
    background-color: #fafafa;
    background-size: auto 160px;
    box-shadow: 1px 1px 10px #c6c6c6;
    animation: pulse;
    animation-duration: 2s;
    animation-iteration-count: 2;
}

.counter-value {
    margin: -15px 0 -12px 0;
    color: red;
    font-family: 'Digital-7';
    font-size: 3.25em;
    text-shadow: 2px 2px 1px #bcbcbc;
    display: block;
}

/* On inverse les images : version colorée = fond de base */
.chiffres-ordinateurs-vendus {
    background-image: url(../img/chiffres-ordinateurs-vendus-rvb.svg);
}
.chiffres-ordinateurs-vendus::before {
    background-image: url(../img/chiffres-ordinateurs-vendus.svg);
}

.chiffres-interventions {
    background-image: url(../img/chiffres-interventions-rvb.svg);
}
.chiffres-interventions::before {
    background-image: url(../img/chiffres-interventions.svg);
}

.chiffres-installations-internet {
    background-image: url(../img/chiffres-installations-internet-rvb.svg);
}
.chiffres-installations-internet::before {
    background-image: url(../img/chiffres-installations-internet.svg);
}

.chiffres-annees {
    background-image: url(../img/chiffres-annees-rvb.svg);
}
.chiffres-annees::before {
    background-image: url(../img/chiffres-annees.svg);
}

/* Texte au-dessus de l’image */
.chiffres p {
    position: relative;
    z-index: 1;
}
/* FIN RUBRIQUE-CHIFFRES */



/* =========================================================
   RUBRIQUE AVIS - CONTENEUR GENERAL
========================================================= */

.rubrique-avis {
    text-align: center;
	
	background-image: url(../img/fond-rubrique-avis.svg);
    background-attachment: fixed;
}


/* =========================================================
   POLICES & TEXTE COMMUNS
========================================================= */

.avis-paragraphe,
.divers-paragraphe,
blockquote p,
.avis-header {
	font-weight: 300;
}


/* =========================================================
   TEXTE DES AVIS
========================================================= */

.avis-col p {
    display: inline-block;
    margin-top: 6px !important;
    transition: all 0.35s ease-in-out;
}

.avis-text {
    margin-bottom: 5px !important;
	font-weight: 300;
}

.avis-source {
	font-weight: 500;
}

.avis-date {
    white-space: nowrap;
    color: #666;
}


/* =========================================================
   TEXTE REDUIT / LIRE LA SUITE
========================================================= */

.avis-col p.collapsed {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Bouton Lire la suite */
.toggle-review {
    display: inline-block;
    color: #FFA401;
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
    transition: 0.25s;
}

.toggle-review:hover {
    text-decoration: underline;
}

.toggle-review i {
    margin-left: 4px;
    transition: transform .2s;
}


/* =========================================================
   FILTRE - PAGE AVIS COMPLETS
========================================================= */

.avis-filter {
    text-align: center;
    margin-bottom: 20px;
}

.avis-filter button {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 6px 10px;
    border-radius: 20px;
    border: 1px solid #777;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: 0.95rem;
    box-shadow: 1px 1px 2px #777;
    transition: 0.25s;
}

.avis-filter button:hover,
.avis-filter button.active {
    background: #ED3833;
    color: #fff;
    border-color: #ED3833;
	text-shadow: 1px 1px 1px black;
}

.avis-filter button:hover {
    transform: translateY(2px);
}



/* =========================================================
   SLIDER AVIS - AUTOPLAY
========================================================= */

.row.rubrique-avis .autoplay {
    /* reserve volontairement */
}



/* =========================================================
   SLIDER - CONTROLES (FLECHES)
========================================================= */

.tns-controls {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 0.25rem;
}

@media (max-width: 767px) {
    .tns-controls { display: none; }
}

.tns-controls button {
    margin-top: 30px;
    position: relative; /* pour positionner le texte */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #FFCF50;
    border: 1px solid #777;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 1px 1px 1px #999;
    transition: background-color 0.5s ease,
        border-color 0.5s ease,
        transform 0.5s ease;
}

.tns-controls button i {
    font-size: 0.8em;
    color: #6f6f6f;
    transition: color 0.35s ease;
}

.tns-controls button:hover {
    background-color: #FFA500;
    transform: translateY(-1px);
    box-shadow: 1px 2px 3px rgba(0,0,0,0.25);
    border-color: #6f6f6f;
}

.tns-controls button:hover i {
    color: #333;
}

/* POUR TEXTE PRECEDENT ET SUIVANT */
.tns-controls button .nav-text {
	font-weight: 300;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: rgba(0,0,0,0.9);
    white-space: nowrap;
    text-decoration: underline;
}

.tns-controls button .nav-text.left {
    right: 100%;    /* place a gauche du bouton */
    margin-right: 14px;
    text-align: right;
}

.tns-controls button .nav-text.right {
    left: 100%;     /* place a droite du bouton */
    margin-left: 14px;
    text-align: left;
}

.tns-controls button:hover .nav-text {
    color: rgba(0,0,0,0.8); /* legerement plus visible au hover */
}



/* =========================================================
   PARAGRAPHES D'INTRO
========================================================= */

.avis-paragraphe {
    text-align: center;
    padding: 0 10px;
}

.avis-paragraphe .fa-solid.fa-user-large {
    margin-bottom: 30px;
    text-shadow: 1px 1px 1px #888;
    color: #b20b3a;
    width: fit-content;
}

.divers-paragraphe {
    padding: 0 10px;
}


/* =========================================================
   NOTE MOYENNE
========================================================= */

.note-moyenne {
    width: clamp(300px, 40%, 400px);
    text-align: center;
    margin: 0 auto 20px;
    padding: 10px 12px;
    border-radius: 25px;
    color: #333;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    background-color: rgb(255 255 255 / 0.75);
    transition: all 0.75s ease;
}

.note-moyenne:hover {
    animation: pulse 2s ease-in-out;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    background-color: rgb(255 255 255 / 0.9);
}


/* =========================================================
   CARTE AVIS BLOCKQUOTE
========================================================= */

blockquote {
    border-left: none;
    font-weight: 400;
    font-size: 0.9em;
    text-align: left;
    min-height: 150px;
    max-height: 600px;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 25px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.14);
    background-color: rgb(255 255 255 / 0.75);
    transition: all 0.75s ease;
}

blockquote:hover {
    transform: translateY(4px);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
    background-color: white;
}

blockquote p {
    font-size: 0.9em;
    color: #555;
}


/* =========================================================
   EN-TETE AVIS
========================================================= */

.avis-header {
    position: relative;
    padding-right: 30px;
    font-size: 0.9em;
}

.meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    font-size: 0.3em !important;
}

.meta-line b {
	font-weight: 600;
}

.meta-line cite {
    font-style: italic;
    font-weight: 200;
    opacity: 0.85;
}


/* =========================================================
   LOGO SOURCE
========================================================= */

.avis-blockquote {
    position: relative;
    padding-top: 20px;
}

.avis-icon-topright {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 25px;
    height: 25px;
}


/* =========================================================
   ETOILES (AVIS INDIVIDUEL)
========================================================= */

.rating {
    width: 100px;
    height: 22px;
    display: block;
}

.avis-header img.rating {
    margin-top: 4px;
}


/* =========================================================
   NOTE GLOBALE PAGE AVIS
========================================================= */

.avis-global-rating {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 10px 0;
    display: none;
}

.avis-global-rating .rating-stars {
    display: inline-block;
    width: 200px;
    vertical-align: middle;
}


/* =========================================================
   PAGINATION
========================================================= */

.avis-pagination {
    padding: 0;
    margin-top: 15px;
}

.avis-pagination li {
    display: inline-block;
    margin: 0 3px;
}

.avis-pagination button.btn-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0;
    margin: 2px;
    line-height: 33px;
    border: 1px solid #ED3833;
    background: #f9f9f9;
    color: #ED3833!important;
    cursor: pointer;
    transition: 0.3s;
    text-shadow: 1px 1px 0.5px #777;
    box-shadow: 1px 1px 2px #999;
}

.avis-pagination button.btn-circle:hover,
.avis-pagination button.btn-circle.active {
    background: #ED3833;
    color: #fff!important;
    border-color: #ED3833;
}


/* =========================================================
   GRILLE AVIS - PAGE AVIS COMPLETS
========================================================= */

.avis-wrapper {
    width: 100%;
    padding: 10px 0;
    background-image: url(../img/fond-rubrique-avis.svg);
    background-repeat: repeat;
    background-attachment: fixed;
}

.avis-all-pagination {
    width: 100% !important;
    margin: 50px auto;
    display: grid !important;
    gap: 20px;             /* 15px entre chaque colonne et ligne */
    padding: 0 25px;       /* 15px à gauche et à droite du container */
    box-sizing: border-box;
	transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.avis-all-pagination.fading {
    opacity: 0;
    transform: translateY(8px);
}

@media (min-width: 576px)  { .avis-all-pagination { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 992px)  { .avis-all-pagination { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1400px) { .avis-all-pagination { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 1920px) { .avis-all-pagination { grid-template-columns: repeat(5, 1fr) !important; } }

.avis-all-pagination .avis-col {
    display: block !important;
    max-width: 100% !important;
	box-sizing: border-box;
}

.avis-all-pagination .avis-header img {
    display: flex;
    flex-direction: column;
}


/* =========================================================
   FIN RUBRIQUE AVIS
========================================================= */










/* ==========================================================
   DEMANDE D'ASSISTANCE
   ========================================================== */


/* ETAPE 1 : PROFIL */


.rubrique-services {
    background-image: radial-gradient(
            ellipse 90% 45% at 50% 100%,
            rgba(221, 66, 0, 0.04) 0%,
            transparent 70%
        ),
        linear-gradient(
			to bottom,
			#ffffff 0%,
			#fafafa 45%,
			#f7f7f7 80%,
			#f4f4f4 100%
		);
    background-repeat: no-repeat, no-repeat;
    background-position: bottom center, center top;
    background-size: 100% 100%, 100% 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}


.contact-link {
    display: inline-flex;
    align-items: center;
	gap: 8px;
    padding: 0px 13px;
    border: 0.5px solid #dd4200;
    border-radius: 10px;
    background: rgba(221, 66, 0, 0.08);
    color: #dd4200 !important;
    font-family: inherit;
	font-size: 0.9em;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.contact-link:hover {
    border-color: #dd4200;
    background: #dd4200;
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

.demande-assistance {
    width: 100%;
    margin: 0 auto;
}

.da-step {
    width: 100%;
    display: none;
}

.da-step-active {
    display: block;
}

.da-step-title {
    margin: 0 0 10px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.da-step-intro {
    max-width: 700px;
    margin: 0 auto 30px;
    text-align: center;
    font-size: 1rem;
	font-weight: 350;
}

#da-step-6-success {
    white-space: pre-line;
}




/* =========================================================
   PROPRIÉTÉS COMMUNES DES CARTES
   ========================================================= */

.da-choice-card,
.da-need-card,
.da-question-option {
    border: 1px solid #86868A;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;

    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}


/* ---------------------------------------------------------
   ÉTAT SURVOLÉ
   --------------------------------------------------------- */

.da-choice-card:hover,
.da-need-card:hover,
.da-question-option:hover {
    border-color: #dd4200;
    box-shadow: inset 0 0 0 1px #dd4200;
    transform: translateY(2px);
}


/* ---------------------------------------------------------
   ÉTAT SÉLECTIONNÉ
   --------------------------------------------------------- */

.da-choice-card.selected,
.da-need-card.selected,
.da-question-option.selected {
    border-color: #dd4200;
    box-shadow: inset 0 0 0 1px #dd4200;
    background: rgba(221, 66, 0, 0.07);
}


.da-choice-grid {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.da-customer-grid {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.da-choice-card {
    min-height: clamp(105px, 18vw, 130px);
    padding: clamp(14px, 3vw, 25px) clamp(12px, 2.5vw, 20px);

    font-size: clamp(0.9rem, 2.5vw, 1rem);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.8vw, 12px);
}

.da-choice-card i {
    font-size: clamp(1.7rem, 5vw, 2rem);
}


.da-navigation {
    width: 92%;
    max-width: 1400px;
    margin: 30px auto 0;
    display: flex;
    justify-content: flex-end;
}

.da-btn {
    border: 0;
    border-radius: 8px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
	box-shadow: 1px 1px 2px #202020;
    transition: opacity 0.2s ease,
        transform 0.2s ease;
}

.da-btn-back {
    color: #222222;
    text-shadow: 1.5px 1.5px 0.5px #DADADA,1.5px 1.5px 0.5px #DADADA;
}

.da-btn-next {
    background: #dd4200;
    color: #fff;
    text-shadow: 1.5px 1.5px 0.5px #000, 1.5px 1.5px 0.5px #000;
}

.da-btn:hover:not(:disabled) {
    transform: translateY(2px);
}

.da-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 767.98px) {

    .da-choice-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }
	
	.da-customer-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .da-navigation {
        width: 100%;
    }

    .da-btn {
        width: auto;
        padding: 9px 16px;
        font-size: 0.9rem;
        justify-content: center;
    }

}

/* FIN ETAPE 1 : PROFIL */



/* ETAPE 2 : APPAREILS */

.da-navigation-between {
    justify-content: space-between;
}

.da-multiple-choice {
    margin: -15px auto 25px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.da-multiple-choice i {
    margin-right: 5px;
}

/* FIN ETAPE 2 : APPAREILS */




/* ETAPE 3 : BESOIN */

.da-needs-device {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto 35px;
}

.da-device-title {
    margin: 0 0 15px;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: left;
}

.da-device-title i {
    margin-right: 8px;
	font-size: 1.5em;
}

.da-needs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.da-need-card {
    min-height: clamp(62px, 10vw, 75px);
    padding: clamp(10px, 2vw, 15px);

    font-size: clamp(0.88rem, 2.2vw, 0.95rem);

    display: flex;
    align-items: center;
    gap: clamp(8px, 1.6vw, 12px);

    text-align: left;
}

.da-need-card i {
    flex: 0 0 auto;
    width: clamp(22px, 4vw, 25px);
    text-align: center;
    font-size: clamp(1.05rem, 2.8vw, 1.2rem);
}


@media (max-width: 991.98px) {

    .da-needs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 767.98px) {

    .da-needs-device {
        width: 100%;
    }

    .da-needs-grid {
        grid-template-columns: 1fr;
    }

}

/* FIN ETAPE 3 : BESOIN */





/* ETAPE 4 : PRECISIONS */

#da-step-4 {
    width: 100%;
}

#da-step-4 .da-details-container {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
}

.da-details-section .da-device-title {
    margin: 35px 0 20px;
    padding-left: 14px;
    border-left: 6px solid #dd4200;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.da-question {
    margin-bottom: 25px;
}


.da-question-input[type="text"] {
	height: 42px;
	min-height: 42px;
	padding: 0 14px;
	box-sizing: border-box;
}

textarea.da-question-input {
	min-height: 100px;
	resize: vertical;
	box-sizing: border-box;
}





.da-question.da-question-appear {
    animation: da-question-appear 0.75s ease-out;
}

@keyframes da-question-appear {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}



.da-question-label {
    display: block;
    margin-bottom: clamp(8px, 1.5vw, 10px);
    font-size: clamp(0.92rem, 2.3vw, 1rem);
    font-weight: 700;
}

.da-question-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2vw, 15px);
}

.da-question-option {
    min-height: clamp(62px, 10vw, 75px);
    padding: clamp(10px, 2vw, 15px);

    font-size: clamp(0.88rem, 2.2vw, 0.95rem);

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.da-question-option.disabled {
    position: relative;
    background: #f5f5f5;
    border-color: #d8d8d8;
    color: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

.da-question-option.disabled:hover {
    border-color: #d8d8d8;
    transform: none;
}



.da-location-info {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 12px 15px;
    border-radius: 8px;
    background: rgba(221, 66, 0, 0.06);
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
}





.da-question-input {
    width: 100%;
    min-height: 90px;
    margin-top: 10px;
    padding: 12px 15px;
    border: 1px solid #86868A;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    box-sizing: border-box;
}

.da-question-input:focus {
    outline: none;
    border-color: #dd4200;
}

.da-no-details {
    text-align: center;
    margin: 30px 0;
}

.da-details-device-label {
    margin: 30px 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #555;
}

@media (max-width: 991.98px) {

    .da-question-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 767.98px) {

    #da-step-4 .da-details-container {
        width: 100%;
    }

    .da-question-options {
        grid-template-columns: 1fr;
    }

}

/* FIN ETAPE 4 : PRECISIONS */






/* =========================================================
   ETAPE 5 — RECAPITULATIF
   ========================================================= */

.da-summary-container {
    width: 100%;
	color: #1D1D1F;
    max-width: 900px;
    margin: 0 auto;
}


/* INTRO */

.da-summary-intro {
    margin: 0 0 28px;
    text-align: center;
    color: #666;
}


/* BLOCS PRINCIPAUX */

.da-summary-main-icon {
    font-size: 1.4em;
    margin-right: 0.15em;
}

.da-summary-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 20px;

    border: 1px solid #86868A;
    border-radius: 14px;

    background: #fff;
}


/* CONTENU PROFIL / APPAREILS */

.da-summary-content {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 1rem;
    font-weight: 500;
}


.da-summary-content > i {
    width: 20px;
    text-align: center;
}


/* LISTE DES APPAREILS */

.da-summary-devices {
    flex-wrap: wrap;
    gap: 10px 22px;
}


.da-summary-device {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}


/* BOUTONS MODIFIER */

.da-summary-edit {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    border: none;
    background: transparent;

    color: #888;

    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;

    border-radius: 6px;
}


.da-summary-edit:hover {
    color: #dd4200;
    background: #fff4ef;
}


.da-summary-edit i {
    font-size: 0.8rem;
}


/* ESPACEMENT ENTRE PROFIL ET APPAREILS */

.da-summary-block + .da-summary-block {
    margin-top: 12px;
}


/* =========================================================
   BESOINS
   ========================================================= */

/* PROPRIÉTÉS COMMUNES DES LABELS */
.da-summary-client-label,
.da-summary-device-label,
.da-summary-need-label {
    color: #888;
    font-size: 0.9rem;
    font-weight: 500;
}


/* CLIENT */
.da-summary-client-label {
    margin: 0 0 8px;
}


/* APPAREILS */
.da-summary-device-label {
    margin-bottom: 10px;
}


/* BESOINS */
.da-summary-need-label {
    margin: 18px 20px 8px;
}

.da-summary-need-label + .da-summary-need {
    padding-top: 0px;
}

.da-summary-block > div:first-child {
    flex: 1;
}

.da-summary-needs {
    margin-top: 12px;
		
    border: 1px solid #86868A;
    border-radius: 14px;

    background: #fff;

    overflow: hidden;
}


/* CHAQUE BESOIN */

.da-summary-need {
    padding: 18px 20px;
}


/* NOM DE L'APPAREIL */

.da-summary-device-label {
    margin-bottom: 10px;
}


/* LIGNE TITRE + MODIFIER */

.da-summary-need-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.da-summary-need-title {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 1rem;
    font-weight: 600;
}


.da-summary-need-title i {
    width: 25px;
    text-align: center;
}


/* =========================================================
   REPONSES
   ========================================================= */

.da-summary-answers {
    margin-top: 14px;
}


.da-summary-answer {
    display: block;

    margin-top: 10px;

    font-size: 0.92rem;
    line-height: 1.45;
}


.da-summary-answer:first-child {
    margin-top: 0;
}


.da-summary-answer-label {
    display: block;
    margin-bottom: 2px;

    color: #888;
}


.da-summary-answer-label::after {
    content: '';
}


.da-summary-answer-value {
    font-weight: 600;
}


/* PRECISION */

.da-summary-precision {
    padding-left: 12px;

    border-left: 2px solid #e5e5e5;
}


.da-summary-precision .da-summary-answer-value {
    font-weight: 400;
    font-style: italic;
}


/* =========================================================
   MODIFIER LES BESOINS
   ========================================================= */

.da-summary-edit-needs {
    display: flex;
    margin: 18px auto 0;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .da-summary-block {
        align-items: flex-start;
        padding: 16px;
    }


    .da-summary-edit {
        padding: 5px 7px;
    }


    .da-summary-need {
        padding: 20px 16px;
    }


    .da-summary-need-header {
        align-items: flex-start;
    }


    .da-summary-need-title {
        font-size: 1rem;
    }


    .da-summary-answers {
        margin-top: 12px;
    }


    .da-summary-answer {
        display: block;
    }


    .da-summary-answer-label {
        display: block;
        margin-bottom: 2px;
    }


    .da-summary-answer-label::after {
        content: '';
    }

}





 /* =========================================================
    ETAPE 6 — COORDONNEES ET ENVOI
    ========================================================= */

#da-step-6 {
    width: 100%;
}

#da-step-6 .da-contact-container {
    width: 92%;
    max-width: 900px;
    margin: 0 auto;
}


/* =========================================================
   PROFILS ET CHAMPS
   ========================================================= */

.da-contact-profile {
    margin-bottom: 25px;
}

.da-contact-field {
    margin-bottom: 22px;
}

.da-contact-field label {
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 700;
}

.da-captcha > label {
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 400;
}


/* =========================================================
   CHAMPS DE SAISIE
   ========================================================= */

.da-contact-input {
    width: 100%;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid #86868A;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;

    transition:
        border-color 0.25s,
        box-shadow 0.25s;
}

.da-contact-input::placeholder {
    color: #777777;
    opacity: 1;
}


/* FOCUS */

.da-contact-input:focus {
    outline: none;
    border-color: #dd4200;
    box-shadow: 0 0 0 2px rgba(221, 66, 0, 0.08);
}


/* ZONE DE TEXTE */

textarea.da-contact-input {
    min-height: 110px;
    resize: vertical;
}


/* =========================================================
   VALIDATION
   ========================================================= */

.da-contact-input-error {
    border-color: #dd4200 !important;
}

.da-contact-input-valid {
    border-color: #0b8d2f !important;
}


/* MESSAGE D'ERREUR */

.da-contact-error {
    margin-top: 6px;
    color: #dd4200;
    font-size: 0.9rem;
    font-weight: 600;
}


/* ANIMATION D'ERREUR */

@keyframes da-shake-soft {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-3px); }
    50%  { transform: translateX(3px); }
    75%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.da-contact-shake {
    animation: da-shake-soft 0.3s ease;
}


/* =========================================================
   CHAMPS DÉSACTIVÉS
   ========================================================= */

.da-contact-input:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}


/* =========================================================
   FACULTATIF / OBLIGATOIRE
   ========================================================= */

.da-required {
    color: #dd4200;
}

.da-optional {
    font-size: 0.85em;
    font-weight: 400;
    color: #777;
}


/* =========================================================
   COORDONNÉES COMMUNES
   ========================================================= */

.da-contact-common {
    margin-top: 5px;
}


/* =========================================================
   ÉLÉMENT ACCESSIBLE MASQUÉ
   ========================================================= */

.da-contact-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================================================
   CAPTCHA
   ========================================================= */

.da-captcha-refresh {
    background: transparent;
    border: none;
    padding: 4px 6px;
    margin: 0;
    cursor: pointer;
    color: #555;
    font-size: 20px;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease;
}

.da-captcha-refresh:hover {
    background: transparent;
    border: none;
    color: #dd4200;
}

.da-captcha-refresh:focus {
    outline: none;
    background: transparent;
    border: none;
}

.da-captcha-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.da-captcha-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.da-captcha-image {
    display: block;
    height: 46px;
    width: 200px;
    border-radius: 6px;
    cursor: zoom-in;
    transition: transform 0.25s ease;
    transform-origin: top left;
}

.da-captcha-image:hover {
    transform: scale(1.6) translate(2px, -8px);
    position: relative;
    z-index: 10;
}

.da-captcha-refresh.clicked {
    animation: da-captcha-refresh-rotate 0.4s ease;
}

@keyframes da-captcha-refresh-rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* =========================================================
   CONSENTEMENT
   ========================================================= */

.da-consent {
    margin-top: 25px;
    padding: 15px;
    border-radius: 8px;
    background: rgba(221, 66, 0, 0.06);
}

.da-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
}

.da-consent-label input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 4px;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.da-form-message {
    margin-top: 20px;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.da-form-message-error {
    background: #fce8e6;
}

.da-form-message-success {
    background: #e8f5e9;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

#da-step-6 .da-navigation {
    width: 92%;
    max-width: 900px;
    margin: 30px auto 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    #da-step-6 .da-contact-container {
        width: 100%;
    }

    #da-step-6 .da-navigation {
        width: 100%;
    }

    .da-captcha-content {
    align-items: stretch;
    flex-direction: column;
	}

	.da-captcha-wrap {
		align-self: flex-start;
	}

	.da-captcha-input {
		width: 100%;
		flex: none;
	}

}


/* ==========================================================
   DEMANDE DE PROJET
   ========================================================== */

































/* === RUBRIQUE ARTICLES - MARGE BAS AJOUTEE === */
.rubrique-articles {
    padding-top: 1px !important;
    background-image: url(../img/fond-rubrique-chiffres.svg);
    background-attachment: fixed;
    text-align: center;
}
.articles-paragraphe {
    font-weight: 300;
}



/* Espacement entre cartes */
.blog-card-col {
  	padding: 20px !important;
}

/* CARTE - OMBRE PERMANENTE */
.blog-card-custom {
    border-radius: 18px;
    transition: all 0.75s ease;
    background-color: #FEFEFE;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1) !important;
}
.blog-card-custom:hover {
  	transform: translateY(4px);
  	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Image */
.blog-img-wrapper {
  	padding: 20px 20px 1px 20px;
  	text-align: center;
}
.blog-img-custom {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Corps */
.blog-body-custom {
    padding: 14px 20px 20px 20px !important;
    text-align: justify;
}

/* Titre */
.blog-title-custom {
    font-size: clamp(0.9rem, 0.9rem + 0.5vw, 1.1rem);
    line-height: 1.25;
    color: #004a99;
    margin: 0 0 10px 0 !important;
    text-align: center;
    font-weight: 600;
}
.blog-title-custom a {
	font-weight: 600;
	color: #004a99;
	text-decoration: none;
	transition: color 0.3s ease;
}
.blog-title-custom a:hover {
    text-decoration: underline !important;
    color: #003D7F;
}

/* Extrait */
.blog-excerpt-custom {
    font-size: clamp(0.75rem, 0.5rem + 1.2vw, 0.85rem);
    line-height: 1.4;
    color: #333;
    margin: 0 0 18px 0 !important;
    font-weight: 300;
}

/* Date & Lire la suite */
.blog-date-custom,
.blog-readmore-custom,
.blog-likes,
.separator {
    color: #333;
    font-size: clamp(0.75rem, 0.5rem + 1.2vw, 0.8rem);
    font-weight: 300;
}


.blog-likes {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  color: #333;
}

.blog-likes {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #333;
  transition: color 0.15s ease, transform 0.15s ease;
}

.blog-likes:hover {
  color: #0d6efd;
}

.blog-likes i {
  opacity: 0.85;
}



.blog-readmore-custom {
    font-weight: 600;
    color: #FF8800;
}
.blog-readmore-custom:hover {
    text-decoration: underline;
}

.blog-readmore-custom i {
    font-size: 0.8em; 
}

.separator {
    margin: 0 6px;/* espace avant et apres le tiret */
}


/* === RESPONSIVE - ESPACE TITRE/EXTRAIT REDUIT SUR MOBILE === */
@media (max-width: 992px) {
}

@media (max-width: 768px) {
  .blog-card-col { padding: 15px !important; }
  .blog-img-wrapper { padding: 12px 15px 10px 15px !important; }
  .blog-body-custom { padding: 15px !important; }
  .blog-title-custom { 
    margin-bottom: 6px !important; /* ← ESPACE REDUIT */
  }
  .blog-excerpt-custom { 
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }
}



/* === ALIGNEMENT DES CARTES BLOG À HAUTEUR IDENTIQUE === */

#blog-articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Chaque colonne doit se comporter comme un item flex */
.blog-card-col {
    display: flex !important;
}

/* La carte devient une colonne responsive → hauteur uniforme */
.blog-card-custom {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

/* pousse la partie texte vers le haut → égalise la hauteur */
.blog-body-custom {
    margin-bottom: auto !important;
}


/* Animation de l'affichage "Afficher plus d'articles" */
.blog-card-col {
  transition: opacity 1.5s ease, max-height 0.5s ease;
  opacity: 1;
  max-height: 2000px;
  overflow: hidden;
}

.blog-card-col.hidden-article {
  opacity: 0;
  max-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}



#toggle-articles {
  display: inline-block;
  margin: 20px auto 0;
  font-size: 0.9rem;
  color: #004a99;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  transition: color 0.75s ease;
}

#toggle-articles:hover {
  color: red;
}

#toggle-articles i {
	margin-left: 4px;
	font-size: 0.8rem;
	transition: transform 0.3s ease;
}

#toggle-articles.open i {
	transform: rotate(180deg); /* pointe vers le haut lorsque “Afficher moins” */
}





/* === CLASSE UNIFORME POUR LES COLONNES D'AVIS === */
.avis-col {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  padding: 0 0;
  box-sizing: border-box !important;
}

/* Responsive - meme comportement que tes col-* */
@media (max-width: 1200px) {
  .avis-col {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}
@media (max-width: 992px) {
  .avis-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 768px) {
  .avis-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}



/* === LOADER & MESSAGES  === */
.blog-loader {
    text-align: center;
    padding: 40px 20px;
    font-size: 1rem;
    font-weight: 300;
}

.blog-loader .spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #f0f0f0;
  border-top: 5px solid #004a99;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

/* Message d'erreur ou indisponible */
#blog-articles p.text-center {
    font-weight: 300;
    font-size: 1rem !important;
    margin: 40px 0 !important;
    text-align: center !important;
}
#blog-articles:only-child,
#blog-articles:empty,
#blog-articles > p.text-center {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}


@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === FIN RUBRIQUE ARTICLES  === */




/* PAGE TRUCS ET ASTUCES ACCORDION */

.accordion-button {
	font-size: 1rem;
	justify-content: center !important;
	text-align: center !important;
	background-color: #F4F4F4;
}

.accordion-item:first-of-type,
.accordion-item:first-of-type .accordion-header,
.accordion-item:first-of-type .accordion-button,
.accordion-item:first-of-type .accordion-collapse {
    border-radius: 0 !important;
}
.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-header,
.accordion-item:last-of-type .accordion-button,
.accordion-item:last-of-type .accordion-collapse {
    border-radius: 0 !important;
}


/* Underline au hover */
.accordion-button:hover {
    text-decoration: underline;
}

.accordion-button::after {
	display: none !important;
}

.accordion-body {
    font-size: 1rem;
    text-align: center !important;
    background-color: #DDEFFE; /* couleur personnalisee */
}

.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}

.accordion-button:not(.collapsed) {
	font-weight: 700;
	text-decoration: underline;
}

/* Pas d'underline quand ferme (classe .collapsed) */
.accordion-button.collapsed {
    text-decoration: none;
}

/* FIN PAGE TRUCS ET ASTUCES */



/* DIVERSES PAGES */
.rubrique-paragraphe {
    padding: 20px;
	margin-bottom: 30px;
    border: 0.5px solid #fa0000;
    border-top: none;
    border-radius: 0 0 18px 18px;
}


.rubrique-paragraphe centre {
	text-align: center;
}
.rubrique-paragraphe.contact {
    border: 0.5px solid #fa0000;
    border-top: none;
    border-bottom: none;
    margin-bottom : 0px;
    border-radius: 0px;
    padding: 12px;
	font-weight: 400;
}
#map-link:hover p {
    color: #222; /* couleur souhaitee au survol */
}
.rubrique-paragraphe.classique {
	border: 0.5px solid #fa0000;
    border-top: none;
	border-radius: 0 0 18px 18px;
}
.rubrique-paragraphe.classique.mentions {

}
.trait-mentions {
  display: block;
  width: 15%;
  height: 1px;
  background-color: currentColor; /* herite de la couleur du texte */
  margin: 20px auto 25px;
}

.rubrique-paragraphe .orange {
    color: #ff4f00;
}

.rubrique-paragraphe {
    background-color: #FEFEFE;
}
.rubrique-paragraphe:hover {
    background-color: #FBFBFB;
}
.rubrique-paragraphe.marques img {
    height: 150px;
    padding-top: 8px;
}
.rubrique-paragraphe.centre {
    text-align: center;
}
.rubrique-paragraphe.numerisation img {
    height: 100px;
    padding-top: 8px;
}
.rubrique-paragraphe.recuperation img {
    height: 150px;
    padding-top: 8px;
}



/* DEBUT PAGE TARIFS */

/* STRIPED PERSONNALISE DES TITRES */
/* Empeche le fond alterne uniquement pour la ligne de titre */
table.table.table-striped-tarifs tbody tr.tarifs-designation-titre td {
    background-color: #333 !important; /* fond sombre permanent */
    color: #ffffff !important;
    font-size: clamp(0.8em, 0.8em + 1vw, 1.35em) !important;
    font-style: normal !important;
    text-align: left !important;
    line-height: 1.4em !important;       /* hauteur de ligne plus faible */
}

/* Empeche tout changement au hover (force le meme style au survol) */
table.table.table-striped-tarifs tbody tr.tarifs-designation-titre:hover td,
table.table.table-striped-tarifs tbody tr.tarifs-designation-titre td:hover {
    background-color: #333 !important;
    color: #ffffff !important;
    cursor: default !important;
}



/* Si tu veux enlever completement toute propagation de l'effet "hover" sur cette ligne */
table.table.table-striped-tarifs tbody tr.tarifs-designation-titre {
    pointer-events: auto; /* conserve interactions si necessaire */
}

/* Centrage horizontal uniquement pour ce TD */
table.table-striped-tarifs tbody tr.tarifs-designation-titre td.tarifs-titre-centre {
    text-align: center !important;
}




/* STRIPED PERSONNALISE DES LIGNES*/
.table-striped-tarifs tbody td {
    padding-left: 15px;
	padding-right: 15px;
}
.table-striped-tarifs tbody tr:nth-child(odd) td {
    background-color: #ffffff; /* blanc */
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.table-striped-tarifs tbody tr:nth-child(even) td {
    background-color: #f7f7f7; /* blanc casse ou couleur perso */
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


/* HOVER PERSONNALISE */
.table-striped-tarifs tbody tr:hover td,
.table-striped-horaires tbody tr:hover td {
    background-color: #FFE0C2!important;
	color: black;
}




.tarifs-separateur {
    border-right: thin solid #cdcdcd;
}
.tarifs-designation td {
    padding-top: .8rem;
    padding-bottom: .8rem;
	line-height: 1.3em; /* hauteur de ligne plus faible */
}
.tarifs-designation {
    vertical-align: middle;
    font-weight: 350;
}
.tarifs-designation:hover,
.horaires-designation:hover {
    font-weight: 500;
    letter-spacing: -0.038em;
}

.tarifs-designation .bold {
	font-weight: 600;
}

.tarifs-separateur .fa-solid,
.tarifs-bas-deplacements .fa-solid {
	margin-right: 10px;
}

.tarifs-rubrique-vente {
    text-align: center;
}

.tarifs-rubrique-vente a{
    color: #FF0700;
	transition: 0.75s;
}

.tarifs-rubrique-vente a:hover {
    color: #B60500;
}

tarifs-bas-arrondis {
	border-radius: 0 0 18px 18px;
}

.tarifs-bas-deplacements,
.tarifs-bas-magasin,
.tarifs-bas-devis {
    margin-top: -20px;
    padding: 10px;
    text-align: center;
    background-color: #ffd300;
    border-radius: 0 0 18px 18px;
    border-top: thin solid #cdcdcd;
}
.tarifs-bas-deplacements,
.tarifs-bas-magasin {
    background-color: #ffd300;
}
.tarifs-bas-magasin {
    margin-bottom: 20px;
}
.tarifs-bas-devis {
    background-color: #333;
    color: #fff;
}
.tarifs-bas-devis a {
    color: #FF0700;
	transition: 0.75s;
}
.tarifs-bas-devis:hover {
    color: #fff;
}
.tarifs-bas-devis a:hover {
    color: #fff;
}
.titre-tarifs-badge {
    height: 65px;
	padding-right: 80px !important;
    background-image: url(../img/services-tampon-sap.svg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 80px auto;
}

.table-responsive {
    min-height: 0.01%;
    overflow-x: auto;
}





/* PAGE HORAIRES */

/* =========================
   TABLE STRIPED PERSONNALISE
   ========================= */

.table-striped-horaires tbody td {
    color: #333;
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.table-striped-horaires tbody tr:nth-child(odd) td {
    background-color: #ffffff;
}

.table-striped-horaires tbody tr:nth-child(even) td {
    background-color: #f7f7f7;
}



/* =========================
   STATUT (OUVERT / FERME)
   ========================= */

.status-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin: 0 auto;
    padding: 0.3rem 0.6rem;
    text-align: center;
    white-space: pre;
    color: #333;
    font-weight: 700;
    font-size: clamp(0.85rem, 0.5rem + 1.2vw, 1rem) !important;
}

/* Fonds selon statut */
.status-open {
    background-color: #d9f2d9;
}

.status-closed {
    background-color: #f2d9d9;
}

/* Textes */
.open-text {
    color: #04C80D;
}

.closed-text {
    color: #DD0000;
}


/* =========================
   LIGNE JOUR ACTUEL
   ========================= */

table.table tr.horaires-designation td.horaires-jour-actuel {
    font-weight: 600;
    border-top: 1.5px solid #888 !important;
    border-bottom: 1.5px solid #888 !important;
    text-shadow: 1px 1px 1px #DEDEDE;
}

table.table tr.horaires-designation td.horaires-separateur.horaires-jour-actuel::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ff7900;
    border-radius: 50%;
	margin-left: -10px;
    margin-right: 4px;
    vertical-align: middle;
}


/* =========================
   DETAILS HORAIRES
   ========================= */

.horaires-details {
    min-height: 136px;
    margin-top: -20px;
    margin-right: 0;
    margin-left: 0;
    padding-top: 18px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    border-radius: 0 0 18px 18px;
    background-color: #e2e2e2;
    text-indent: 0 !important;
    text-align: center;
}


.horaires-details,
.horaires-designation {
	font-size: clamp(0.8rem, 0.5rem + 1.2vw, 0.9rem) !important;
}


.horaires-designation {
    text-indent: 10px;
    font-weight: 400;
}

table.table.table-striped-horaires.magasin tbody tr,
table.table.table-striped-horaires.magasin tbody tr td,
table.table.table-striped-horaires tbody tr,
table.table.table-striped-horaires tbody tr td {
	border-bottom: none;
}


/* =========================
   SEPARATEUR HORAIRES
   ========================= */

.magasin .horaires-separateur,
.domicile .horaires-separateur {
    border-right: thin solid #cdcdcd;
    width: 50%;
}

/* Responsive */
@media (max-width: 400px) {
    .magasin .horaires-separateur {
        width: 25%;
    }
}

@media (min-width: 400px) and (max-width: 576px) {
    .magasin .horaires-separateur {
        width: 35%;
    }
}

@media (max-width: 576px) {
    .domicile .horaires-separateur {
        width: 35%;
    }
}

/* FIN PAGE HORAIRES */




/* PAGE SERVICES A LA PERSONNE */
.cercle-declaration {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	box-sizing: border-box;
	text-align: center;
	display: inline-block;
	line-height: 25px;
	background-image: linear-gradient(to top, #d20000, #dd0000, #e80000, #f40000, #ff0000);
	text-decoration: none;
	color: #fff;
	font-size: 1em;
}
/* FIN PAGE SERVICES A LA PERSONNE */


.yaris-fondd {
    background-image: url(../img/yaris-route2.svg);
    background-position: 0% bottom;
    height: 135px;
    background-repeat: repeat-x;
}
.no-yaris-car,
.no-yaris-car2 {
    height: 100px;
    background-image: url(../img/yaris-sans-roues.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 110% bottom;
    animation: mymove 20s ease-in-out infinite;
    margin-bottom: -7px;
    margin-top: 10px;
}
.no-yaris-car {
    background-image: url(../img/yaris-sans-roues.svg);
}
.no-yaris-car2 {
    background-image: url(../img/yaris-roues.gif);
}
.immobile {
    background-position: 50% bottom;
    animation: none;
}



/* PAGE CONTACT ET LOCALISATION */
.rounded-google-maps2 {
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;
    border: 0;
}
.contact-tel.blink {
    color: #FDFDFD;
	font-weight: 600;
    padding: 3px 13px 3px 13px;
    border-radius: 15px;
    background-color: #515151;
    white-space: nowrap;
    line-height: 2;
    transition: 0.75s !important;
}
.contact-tel.blink:hover {
    background-color: #333
}
.contact-tel.blink.orange:hover {
    color: #ff4200 !important;
	transition: 0.75s !important;
}
.contact-tel.blink.vert:hover {
    color: #00e604 !important
}
.contact-tel.blink.bleu:hover {
    color: #00e5ff !important
}
a .contact-coordonnees {
    padding: 10px 8px 10px 8px;
    border-radius: 0 0 18px 18px;
    margin-bottom: 30px;
    font-size: 1em;
    margin-top: 0;
    text-decoration: none;
}
.contact-coordonnees.passage {
    background-color: #ffd300;
    text-indent: 3px;
    color: #444;
	border: 0.5px solid #ff0000;
    border-top: 1px dotted #444;
	font-weight: 400;
}
.contact-coordonnees.passage:hover {
    background-color: #ffda2c;
    color: #222;
}
.contact-coordonnees.impression {
    background-color: #3c5586;
    color: #fff;
    text-indent: 3px;
    margin-top: -5px;
	border-color: #3c5586;
}
.contact-coordonnees.impression:hover {
    background-color: #406595;
}



	/* FORMULAIRE */
/* PROFIL DU CONTACT */

#form_profil {
    color: inherit;
    padding: 0 14px;
}

.form-control {
    font-size: 0.95em;
    padding: 12px 14px;
    border: 1px solid #d3d3d3;
    border-radius: 14px;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.25s, box-shadow 0.25s;
}

/* style au focus */
.form-control:focus {
    border-color: #dd4200;
    box-shadow: 0 0 4px rgba(255, 60, 60, 0.25);
    outline: none;
}

#contact-form .mb-3 {
    margin-bottom: 14px !important;
}

#contact-form .form-control::placeholder {
    color: #777777;
    opacity: 1;
}

/* Style general pour les messages d'erreur */
.help-block.with-errors {
    color: #dd4200;
    font-size: 0.9em;
    margin-top: 6px;
	margin-left: 15px;
    font-weight: 600;
}
/* Pour les messages d'erreur sous un  en erreur */
.has-error .help-block {
    color: #dd4200;
}

.captcha-rubrique-contact label {
    padding-left: 26px; /* espace pour le logo */
    display: inline-block;
    background-image: url(../img/logo-pin-antispam.svg);
    background-repeat: no-repeat;
    background-size: 18px auto;
    background-position: 0 50%; /* centre vertical */
}

.captcha-rubrique-contact .form-control {
    margin-top: 12px;
}

.captcha-rubrique-contact .captcha-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-wrap {
	position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.captcha-wrap img#captcha-img {
    transition: transform 0.25s ease;
    transform-origin: top left; /* permet de controler le deplacement lors du zoom */
    z-index: 1;
	display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Effet zoom + leger decalage */
.captcha-wrap img#captcha-img:hover {
    transform: scale(1.6) translate(2px, -8px);
    position: relative;
    z-index: 10; /* passe devant le reste */
}

.captcha-refresh {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    padding: 0;
    margin: 0;

    cursor: pointer;
    color: #555;
}

.captcha-refresh:hover {
    color: #dd4200;
}

.captcha-refresh-icon {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform-origin: center center;
}

.captcha-refresh.clicked .captcha-refresh-icon {
    animation: captcha-refresh-rotate 0.4s ease;
}

.captcha-refresh-icon .fa-solid {
    margin-right: 0;
}

@keyframes captcha-refresh-rotate {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.form-group .btn {
    margin-bottom: 10px;
    margin-top: 10px;
}
/* Animation du message de retour du formulaire */
#form-message {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    margin-top: 10px;
}

#form-message.visible {
    opacity: 1;
    transform: translateY(0);
}

#form-message .alert {
    margin-bottom: 0;
}

/* Confirmation d'envoi du formulaire de contact */
.contact-success {
    color: #527A6A;
    background-color: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 16px;
}

.contact-success .fa-circle-check {
    font-size: 1.25em;
    color: #059669;
    margin-right: 4px;
}

.form-group {
	margin-bottom: 1rem;
}
#form_message {
	min-height: 150px;
}

@media screen and (max-width: 768px) {
    .captcha-rubrique-contact .captcha-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}



	/* FIN FORMULAIRE */
/* FIN PAGE CONTACT ET LOCALISATION */


/* DEBUT PAGE COORDONNEES */

/* Conteneur principal */
.coordonnees-container {
  margin: 30px auto;
  max-width: 900px;
  padding: 25px 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Texte d'information general (p sans classe specifique) */
.coordonnees-container p {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  line-height: 1.4;
}

/* -------------------------- */
/* Bouton impression */
.bouton-print-container {
    margin-top: 5px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 25px;
}

.btn-print {
  cursor: pointer;
}

.btn-print:hover {
  background-color: #0056b3;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* -------------------------- */
/* Carte Google Maps */
.map-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 20px auto; /* reduit espace entre carte et logo */
  height: 300px; /* hauteur sur ecran */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

@media (max-width: 576px) {
.map-container {
	height: 200px; /* plus compacte sur petit ecran */
}
.info-line i {
    display: none; /* masque les icones FontAwesome */
}
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* -------------------------- */

.logo-footer {
    width: clamp(100px, 10vw, 150px);
    height: auto;
    object-fit: contain;
    flex-shrink: 0; /* evite qu'il se compresse */
}

.info-footer {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: center; /* centrage vertical */

  font-size: clamp(0.85rem, 2vw, 1rem);
  padding: 18px;
  background-color: #f5f5f5;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;

  gap: 20px; /* espace entre logo et texte */
}

.info-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* texte aligne a gauche */
}

.info-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;  /* espace reduit mais lisible */
  font-size: clamp(0.85rem, 2vw, 1rem);
}

.info-line i {
  margin-right: 8px;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
}

.info-footer:hover {
  background-color: rgba(0,0,0,0.07);
}



/* -------------------------- */
/* Footer copyright */
.copyright-footer {
	margin-top: 15px;
	font-size: 0.95em;
	text-align: center;
}

/* -------------------------- */
/* Impression */
@media print {
  .btn-print {
    display: none; /* pas imprime, pas d'espace laisse */
  }

  body {
    margin: 0;
    font-size: 12pt;
  }

  .map-container {
    height: 440px; /* carte plus haute pour impression */
    margin-bottom: 15px;
  }

  .info-footer {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #f5f5f5 !important; /* force l'impression du fond */
    -webkit-print-color-adjust: exact;    /* Chrome/Safari */
    color-adjust: exact;                   /* Firefox */
  }

  .logo-footer {
    width: 120px;
    height: auto;
  }
}


/* FIN PAGE COORDONNEES */



/* FIN DIVERSES PAGES */




/* DEBUT PAGE FOOTER1 + FOOTER2 */
.footer1 {
	background-color: #222;
  	padding-bottom: 20px;
}
.footer-logo-sud1formatic {
    width: auto;
    margin-bottom: 10px;
    height: 220px;
    background-image: url(../img/footer-logo-sud1formatic.png);
    background-repeat: no-repeat;
    background-size: 280px auto;
    background-position: center top;
    transition: 0.75s;
    filter: drop-shadow(2.5px 2.5px 1.5px black);
    margin-top: 14px;
}



.footer-baseline {
	dissplay: none;
	text-align: center;
    margin: 10px 0 30px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #fff;
}








.footer-adresse-contenu,
.footer-horaires-contenu {
	text-align: center;
	font-size: 0.97rem;
	color: #d0d0d0;
	font-weight: 350;
}


.footer-adresse-contenu {
	margin-top: 30px;
}

.footer-adresse-bloc {
    position: relative;
    display: inline-block;
}

.footer-adresse-bloc address {
    margin: 0;
    font-style: normal;
    line-height: 1.5;
}

.footer-adresse-bloc address > span {
    display: block;
}

.footer-adresse-bloc > i {
    font-size: 2rem;
}

.footer-horaires-bloc > i {
    font-size: 1.9rem;
}


.footer-adresse-bloc > i,
.footer-horaires-bloc > i {
    position: absolute;
    right: calc(100% + 20px);
    top: 50%;
    transform: translateY(-50%);
    color: #FF8702;
}






.footer-horaires-contenu {
    position: relative;
    margin-top: 28px;
    margin-bottom: 30px;
    padding-top: 20px;
}

.footer-horaires-contenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 1px;
    background: #3d3d3d;
}

.footer-horaires-bloc {
    position: relative;
    display: inline-block;
}

.footer-horaires-bloc a {
    color: #d0d0d0!important;
    text-decoration: none;
	font-weight: 400;
}

.footer-horaires {
    line-height: 1.45;
}

.footer-horaires span {
    display: block;
}





.footer1 a,
.footer2 a {
	color: #fff;
	text-decoration: none;
}
.footer2 p,
.footer2 a {
	font-weight: 400;
}
.footer1 h3 {
	padding: 0 8px 12px 8px;
    color: #FFF;
    font-size: clamp(2.2rem, 2.0544rem + 0.5825vw, 2.8rem);
    text-shadow: 2px 2px 3px #000;
}


.footer-reseaux {
    position: relative;
    margin-top: 30px;
    padding-top: 20px;
    margin-bottom: 15px;
    text-align: center;
}

.footer-reseaux::before {
    content: "";
    display: block;
    width: 75%;
    height: 1px;
    margin: 0 auto 20px;
    background-color: #444;
}







/* FOOTER - Version mobile */
@media (max-width: 767.98px) {

    /* Espacement plus compact */
    .footer1 .col-12 {
        margin-bottom: 10px;
    }


    /* Reseaux sociaux centres */
    .footer-reseaux {
        text-align: center;
    }
    .footer-reseaux img {
    display: inline-block;
    max-width: 70px;
    }

    /* LOGO SAP centre */
    .logo-sap-footer {
        margin: 10px auto;
        display: block;
		width: 250px !important;        /* augmente la taille */
        max-width: 60% !important;      /* evite que ca explose sur petit ecran */
    }

    /* Google Maps reduit en mobile */
    .rounded-google-maps {
        height: 250px !important;
    }
}









.footer-logo-sud1formatic:hover,
.logo-sap-footer:hover,
.footer-tel1:hover,
.footer-tel2:hover,
.footer-email:hover {
    transform: translateY(2px);
}

.footer-tel1, .footer-tel2, .footer-email {
    display: block; /* ou inline-block */
    margin: 0 5px 15px auto;
    transition: ease-out 0.5s;
}
.footer-tel1 a, .footer-tel2 a, .footer-email a {
    font-size: 1em;
	font-weight: 600;
    padding: 10px 25px;
    border-radius: 30px;
    background-color: #141414;
    box-shadow: 3px 3px 6px #000;
    border: 1.5px solid;
    display: inline-block;
    align-items: center;
    justify-content: center;
    min-width: 225px; /* largeur minimum identique pour tous */
}



.faa-hideshow:hover .fa-phone:before {
    content: "\f2a0";
}
.faa-hideshow:hover .fa-envelope:before {
    content: "\f658";
}

.footer-tel1 a:hover, .footer-tel2 a:hover, .footer-email a:hover {
    color: #fff;
    border-color: #fff;
    text-shadow: 1px 1px 1px black, 1px 1px 1px black, 1.5px 1.5px 1.5px black;
}
.footer-tel1 a {
    border-color: red;
    color: red;
    background-color: #370000;
}
.footer-tel1 a:hover {
    background-color: #d40000;
}
.footer-tel2 a {
    border-color: #ff6700;
    color: #ff6700;
    background-color: #2D1707;
}
.footer-tel2 a:hover {
    background-color: #ff6700;
}
.footer-email a {
    border-color: #80abf8;
    color: #80abf8;
    letter-spacing: 0.02em;
    background-color: #162336;
}
.footer-email a:hover {
    background-color: #2f71e6;
}

.footer-pagesjaunes {
    background-color: #fff;
}
.footer-img {
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 50%;
    box-shadow: 3px 3px 3px #000;
    transition: 0.75s;
    width: clamp(40px, 3.3vw, 45px);
    height: clamp(40px, 3.3vw, 45px);
}

@media (max-width:992px){
	.footer-img {
    width: 40px;
    height: 40px;
	}
}

.footer-img:hover, .logo-sap-footer:hover {
    transform: scale(1.12);
}

.logo-sap-footer {
    width: 135px;
    height: 100px;
    transition: 0.75s;
}

a:hover .footer-facebook {
    background-color: #3b5998;
}
a:hover .footer-blog {
    background-color: #ee4800;
}
a:hover .footer-twitter {
    background-color: #0096f8;
}
a:hover .footer-google {
    background-color: #cd0030;
}
a:hover .footer-pagesjaunes {
    background-color: #f6e52e;
}


.footer-contact {
    text-align: center;
    margin-bottom: 10px;
}
.footer-contact .fa-solid {
    padding-right: 10px;
}

.footer-contact a i {
    margin-right: 8px; /* ou 8px / 1rem selon l'espace souhaite */
}

.footer2 {
    padding-top: 15px;
    color: #fff;
    text-align: center;
    border-top: 0.5px solid #fff;
    background-color: #141414;
    padding-bottom: 10px;
}

.footer2 p {
	font-size: clamp(0.8rem, 0.8vw + 0.7rem, 1rem);
    margin: 0;          /* supprime tout l'espace vertical */
    margin-bottom: 4px; /* optionnel : espace minimal entre paragraphes */
}


.rounded-google-maps {
    border-radius: 18px 18px 6px;
    border: 0;
}
/* FIN PAGE FOOTER1 + FOOTER2 */




/* CRETOUR */
.cRetour {
    position: fixed;
}
.cRetour {
    border-radius: 50px;
    padding: 12px 15px 12px 15px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: rgb(237 56 51 / 0.8);
    z-index: 99999;
    cursor: pointer;
    bottom: 2.5em;
    right: 30px;
    display: none;
}
.cRetour:before {
    content: "\25b2";
}
.cRetour:hover {
    background-color: rgb(237 56 51);
}

.cRetour,
.cRetour:hover {
    transition: all ease-in 0.2s;
}
/* FIN CRETOUR */








/* === BANNIERE COOKIE === */

#cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(41, 42, 44, 0.97);
    color: #FFF;
    font-weight: 300;
    font-size: 10.5pt;
    line-height: 1.3;
    padding: 7px 16px;
    z-index: 9999;
    display: block;
    box-sizing: border-box;
    transition: transform 0.35s ease, opacity 0.35s ease;
    border-top: 1px solid #787E86;
}

/* Respect de l'attribut hidden */

#cookie-bar [hidden] {
    display: none !important;
}

/* === CONTENU PRINCIPAL === */

.cookie-bar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 14px;
    box-sizing: border-box;
}

.cookie-bar-main p {
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* === BOUTONS PRINCIPAUX === */

.cookie-bar-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

#cookie-bar button {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 15px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

#cookie-bar-accept,
#cookie-bar-save {
    background-color: #FF8A22;
    color: #171717;
    border: 1px solid #FF8A22;
}

#cookie-bar-accept:hover,
#cookie-bar-save:hover {
    background-color: #FFA044;
    border-color: #FFA044;
}

#cookie-bar-reject,
#cookie-bar-cancel {
    background-color: transparent;
    color: #FFF;
    border: 1px solid #A0A0A0;
}

#cookie-bar-reject:hover,
#cookie-bar-cancel:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#cookie-bar-customize {
    background-color: transparent;
    color: #FFF;
    border: 1px solid transparent;
    text-decoration: underline;
}

#cookie-bar-customize:hover {
    color: #FFA044;
}

/* === PANNEAU DE PERSONNALISATION === */

#cookie-preferences {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid #555;
}

#cookie-preferences[hidden] {
    display: none !important;
}

.cookie-preferences-intro {
    width: 100%;
    margin: 0;
}

#cookie-preferences label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

#cookie-preferences input[type="checkbox"] {
    accent-color: #FFA044;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.cookie-preferences-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* === LIEN DE GESTION DES COOKIES === */

.cookie-settings-link {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.cookie-settings-link:hover {
    color: #FFA044;
}

/* === VERSION ORDINATEUR === */

@media (min-width: 768px) {
    #cookie-bar {
        padding: 7px 16px;
    }

    .cookie-bar-main {
        flex-wrap: nowrap;
    }

    .cookie-bar-actions {
        flex-wrap: nowrap;
    }

    #cookie-preferences {
        align-items: flex-start;
    }
}

/* === VERSION MOBILE === */

@media (max-width: 767.98px) {
    #cookie-bar {
        padding: 6px 8px;
        font-size: 9.5pt;
        line-height: 1.2;
    }

    .cookie-bar-main {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        text-align: center;
    }

    .cookie-bar-main p {
        flex: none;
        width: 100%;
        min-width: 0;
        margin: 0;
        text-align: center;
    }

    .cookie-bar-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    #cookie-bar button {
        padding: 4px 7px;
        font-size: 0.7rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Personnalisation : toujours sous le contenu principal */

    #cookie-preferences {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        padding-top: 8px;
        margin-top: 8px;
        text-align: center;
        box-sizing: border-box;
    }

    #cookie-preferences[hidden] {
        display: none !important;
    }

    .cookie-preferences-intro {
        width: 100%;
        margin: 0;
        overflow-wrap: anywhere;
    }

    #cookie-preferences label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        max-width: 100%;
    }

    .cookie-preferences-actions {
        display: flex;
        justify-content: center;
        gap: 6px;
        width: 100%;
        margin-left: 0;
    }

    .cookie-preferences-actions button {
        flex: 1;
        min-width: 0;
        white-space: normal;
    }
}

/* === FIN BANNIERE COOKIE === */




/* === BARRE DE GESTION DES COOKIES === */

#cookie-settings-bar {
    display: none;
    width: 100%;
    padding: 0 8px 3px 20px;
    box-sizing: border-box;
    background-color: #151414;
}

/* === BOUTON PERSONNALISE === */

#cookie-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
	text-decoration: none;
    gap: 7px;
    margin: 0;
    padding: 5px 10px;
    background-color: transparent;
    border: 1px solid #555659;
    border-radius: 15px;
    color: #E0E0E0;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease,
                background-color 0.2s ease;
}

#cookie-settings i {
    color: #FFA044;
}

#cookie-settings:hover {
    color: #FFF;
    border-color: #FFA044;
    background-color: rgba(255, 160, 68, 0.06);
}