/*!
 * Start Bootstrap - 2 Col Portfolio HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 0px; /* 70px required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
	width:100%;
	margin:auto;
	font-family: "Montserrat", Arial, sans-serif;
	color: #000000
}

html{
    scroll-behavior: smooth;
} 


h1, button, .banner p {
    animation-name:opacity;
    animation-duration:6s;
	animation: 1s ease-out 0s 1 slideInFromBottom;
}
    @keyframes opacity{
    0%{opacity:0;}
	50%{opacity:0.5;}
    100%{opacity:1;}
		
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.banner h1 {height:50px; font-family: Times, Times New Roman, serif}


.banner h1 {margin-top:-30%; margin-bottom:5%;}

h1 {font-size:36px; text-align:center; color:#ffffff; font-weight: normal}

@media (max-width: 600px) {
	h1 {margin-bottom:5%}
	}

#feature-text {height:30px; font-weight: bold}

h2, h3, h2 strong, h3 strong {font-family: 'Montserrat', Arial, sans-serif;}

.parallax {
  /* The image used */
  /* background-image: url("../img/BANNER.jpg");

  /* Set a specific height */
  /* min-height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
	box-shadow: 0px 1px 5px #ccc
}

button {margin-top: 30px;
    text-align: center;
    background: #000000;
    color: #ffffff;
    border: #000000 1px solid;
    padding: 10px 40px;
    font-size: 16px;
	border-radius: 10px}

button strong {font-family: 'Helvetica', Arial, sans-serif;}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

.nav > li > a > img {max-width: 50px}

.paddingleft {padding-left: 50px; margin-top: 15px}
.coordonnees {margin-top: 0px; padding-top: 40px; padding-bottom: 20px}

.flex {	display: flex;}

.objectifs {background-color: #000d20; padding-top: 40px; padding-bottom: 40px; padding-left: 7%; padding-right: 7%}


.objectifs h2 {margin-bottom: 20px; color: #c0bbb3; padding-bottom:0px;}

.apropos p{
    font-size:16px;
	margin-top: 0px;
	margin-bottom: 10px;
	}

.vignette h3 {width: 100%; text-align: center; color:#1e3c39}

.objectifs img {margin:auto; max-width: 80px; padding-top:20px}


.accompagnement .apropos {margin-bottom:50px}

.accompagnement {background-color: #fe9264; padding-top: 40px; padding-bottom: 20px}

.accompagnement h2 {margin-bottom: 40px; color: #ffffff; padding-bottom:10px;}

.accompagnement p {font-size:16px}

.accompagnement h3, .accompagnement p {color:#ffffff; text-align: center; padding-left: 10%;
    padding-right: 10%;}


.accompagnement img {margin:auto; max-width: 400px;width:100%}

.accompagnement .apropos {display: unset}


.vignette {min-height: 450px; position: relative; display: grid;}


@media (max-width: 1400px) {
.vignette {min-height: 450px;}
	h3 {font-size:20px}

}

@media (max-width: 991px) {
.vignette {min-height: 350px;}
	.parallax {min-height: 350px; background-attachment: unset}
	.accompagnement .apropos {margin-bottom:0px}
	.whiteborder {border-right:none !important}
	#contact .flex {display: block !important}

	

}


.temoignage1 {
	background: url(../img/SITE-AINOS-TEMOIGNAGE.jpg) no-repeat;
	background-size: cover;
	background-position: center;
    }

.temoignage2 {
	background: url(../img/SITE-AINOS-TEMOIGNAGE2.jpg) no-repeat;
	background-size: cover;
	background-position: center;
    }


.white {background-color: #ffffff; position: relative; padding-top:20px; padding-bottom: 20px}

.green {background-color: #103437; position: relative; padding-top:20px; padding-bottom: 20px}

.green p {color:#ffffff}

.green i {color:#ffffff}

.grey {background-color: #f2f2ef; position: relative; padding-top:20px; padding-bottom: 20px}

#references .grey {padding-top:0px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px}

#references .vignette {padding-top:10%; padding-bottom: 10%; margin-top:0px}

#references h2 hr {width:100%; margin-bottom: 30px}

.apropos hr {width:100px}

.accompagnement {padding-top:20px}

.accompagnement h2 span {color:#103437; font-size:20px}

.accompagnement h3 {font-weight: normal; display: grid;  align-items: center}

.grey p {text-align: center !important}

#contact h2 {color: #ffffff; text-align: left; padding: 30px}

#contact hr {border: 0px solid #ffffff; width: 100px; margin-top: 0px; border-radius:0px; margin-bottom: 10px}

h3 {text-align: center;
	margin-bottom:0px;
height: 50px;
padding:15px}

.objectifs h3 {color:#ffffff}

.fa-plus-circle {color: #64a969; width: 100%; text-align: center; font-size: 22px}

.fa-right-long {float: left;
    padding-left: 1%;
	padding-top:5px
}
.banner p {color: #000000; padding-left: 4%; padding-right: 8%; font-size: 1.5em; text-align: right}

hr {
	margin-top: 25px;
	border-radius:0px;
	margin-bottom: 0px;
	 color:#c0bbb3;
	width: 100px;
    height: 1px;       /* ou ta hauteur */
    background: #c0bbb3;  /* couleur */
    border: 0;
}

a {color:#103437}

.contact a {color:#000000}

#contact {
		background-size: contain; padding-top: 35px; padding-bottom: 50px; background-color: #f2f2ef; background-position:center;}

#contact a {color:#000000}

.apropos {
    padding-left:7%;
	padding-right:7%;
	display: flex;
	padding-top:15px;
	padding-bottom:15px}

.apropos p{text-align: left; font-size: 15px }

.flexslider .apropos {padding-bottom: 0px}

.services {
    padding-left:0%;
	padding-right:0%;
	display: flex;
	padding-top:50px;
	padding-bottom:0px}

.services p{
    text-align:justify;
	font-size:14px
}

.presentation {margin-top: 30px;background-color: #eae8e4;}

.presentation h2 {text-align: left; margin-left: 0px; margin-right: 0px; font-weight: bold}

.presentation h2 span {color: #384048; font-size: 16px; font-weight: normal}

h2 span {font-size: 19px; font-family: Times, Times New Roman, serif; font-weight: normal}

.presentation p{
    font-size:14px;
	margin-top: 5px;
	margin-bottom: 10px;
}

.presentation img {width: 100%;}

.presentation a {color:#df5c28; text-decoration: underline}

#references {padding-top:20px;}

#references h2 {color:#281c4e}

#references .img-responsive {margin:auto; max-height:120px}

#references p {font-size:13px}

.temoignages {
    padding-left:7%;
	padding-right:7%;
	padding-bottom:70px}

.contact {
    padding-left:7%;
	padding-right:7%;
	padding-top:40px;
	padding-bottom:20px}

.apropos2 {color:#ffffff; z-index:1; display:flex; flex-direction: column; padding:0px}
.apropos3 {display:flex; padding:0px}



.equipe {
	padding-top:0px;
	padding-bottom:30px;
	padding-left: 7%;
	padding-right: 7%
	}

.equipe img {border-radius: 50%; margin-bottom: 10px}

.equipe p {font-size:12px}


#services p {padding-left: 7%;
	padding-right: 7%;
font-size: 15px}

#services h2 {font-size: 18px}

#services img:hover {filter: brightness(1.75);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out}


.services {
	padding-left:7%;
	padding-right:7%;
	display: flex;}


.coordonnees {background-color:#d0cdc4 }

.imagetemoin {z-index: 10}

.temoignage {margin-top: -200px;
	padding-top: 200px;
	background-color:#f4f5f5;
	min-height: 700px}


@media (min-width: 1400px) {
	.temoignage {min-height: 600px}
}

@media (max-width: 991px) {
	.temoignage {min-height:0px !important}
}

.imagetemoin img {width:80%}


.arrow::before {
    font-family: "Font Awesome 5 Brands"; 
	font-weight: 400;
	content: "\F0DA";
}

.marginbottom {margin-bottom:30px}

@media (max-width: 767px) {
	.row {display: block}
	.borderleft {border-left:none}
	.marginbottom {margin-bottom:6em}
	.marginbottomsm {margin-bottom:3em}
	h1 {font-size:18px !important}
	h3 {height:auto !important}
	
	.apropos3 {margin-top: -90px}
	.paddingleft {padding-left: 0px}
	.temoin {margin-left: 0px; margin-right: 0px}
	
	.vignette {margin-top: -80px;}
}

@media (max-width: 600px) {
	.vignette {min-height:250px}
	#references .grey {padding: 20px}
}






@media (max-width: 390px) {

	h2 {font-size: 14px}
		button {padding: 5px 20px;
    font-size: 10px;}
}

.contact {bottom:20px; text-align:center; margin:auto; width:90%; position: absolute}

.coordonnees p {text-align: left; color:#ffffff}

#contact {padding-left: 7%; padding-right: 7%; padding-top: 0px; margin-bottom: 0px;}

.button {width:80%; background-color:#ef3e61; margin:auto; padding:20px; color:#ffffff; font-weight:bold; font-size:1.3em}


footer {
    padding-top:120px;
	padding-bottom:100px;
	padding-left: 14%;
	padding-right: 14%;
	background-color: #000d20;
		
}

.footerlinks a {margin-left:20px; font-weight: normal; text-transform: uppercase}


footer p{
    text-align:center; padding-top: 15px; font-size: 14px; float: right; padding-left: 0px; padding-right: 0px; font-weight: bold;color: #ffffff
}

footer a {color: #df5c28}

.social {float: right}

.social img {width: 30px}

#contact p{text-align:center; color: #000000; padding-left: 5px; padding-right: 5px}

footer img{
    float:right; margin-left: 10px; margin-top: 10px }

@media (max-width: 991px) {
footer p {text-align: center; width:100%; }
	.social {width:100%; text-align: center; overflow: auto}
	footer img {float:none; text-align: center; display: unset !important; margin-right: 0px !important}
	.footerlinks a {margin-left: 0px; display: block}
}

footer .row{margin:0px; margin-top: -80px; }

.nopadding {padding:0px !important}

.mainmenu {height:auto; padding:0px; z-index:1;}

.mainmenu .container-fluid {padding-left: 0px; padding-right: 0px}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    background-color: #ffffff;
    border-color: transparent;
	margin:auto;
	height:auto}

.navbar-default {border-color:  transparent !important;background-color: transparent}

#primarymenu	{
	background-color: #ffffff;}

.menu {background-color:#ffffff; margin-top:0px; z-index:10000; padding-top: 20px; padding-bottom: 0px; max-width: 1400px}

.logo {z-index:10000;}

.logo img {padding-bottom:5px; max-width: 220px; margin:auto; width: 150%}

.navbar{margin-bottom:5px; }

.banner {top:0; z-index:1000;margin-left:0px; margin-right:0px}

.banner .vignette {margin-top: 30px;
    width: 100%;
    margin-bottom: 30px;
	min-height: 400px;
}


.productbanner { padding-top: 50px; padding-bottom: 40px;
    background-position: center top;
    top: 0;
	margin-left:0px; margin-right:0px;
	background-size: cover !important;
}


.productbanner h1 {font-family: 'Montserrat', Arial, sans-serif; text-transform: uppercase} 
.productbanner h1 strong {font-family: 'Montserrat', Arial, sans-serif; font-weight: bold} 

#product2 {background-color:  #ebecec}

.headerhome {     padding-top: 0px;
    background-size: 100% auto;
    background-position: center top;
    top: 0;
	margin-left:0px; margin-right:0px
}

.header {
	padding-top: 20px;
    top: 0;
	margin-left:0px; margin-right:0px
}

.navbar-nav > li > a {
	color: #3e474d !important;
	font-size: 12px;
	padding-bottom: 20px;
	padding-left: 2em;
    padding-right: 2em;
	text-align: center;
	padding-top: 5px;
	text-transform: uppercase
}

#menu-item-4 {border-right: none}

@media (max-width: 1165px) {
.navbar-nav > li > a {padding-left: 1.5em; padding-right: 1.5em;}
	.service-assistance-list {min-height: 0 !important}
	
}

@media (max-width: 1000px) {
.navbar-nav > li > a {padding-left: 1em; padding-right: 1em;}
.service-assistance-visual {justify-content: center !important}
.service-assistance-image {padding: 0 !important}
}

.navbar-nav > li > a:hover {
border-bottom: 1px solid #eb8f59;
}

#primarymenu {
	float:none !important;
	margin: auto;
	max-width: 1100px;
	margin-top: 15px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
	.navbar-nav > li > a {padding-left: 0.5em; padding-right: 0.5em;}
	.nav > li {border:none}
	.mainmenu {
		position: absolute;
    right: 20px;
	}

	.menu-item {width:100% !important}
}

p {text-align:center;}

.footerlinks a {width: 100%; color: #ffffff}


.banner h1 b {color: #eb8f59;}

.banner .text {background-color: #ffffff;
    margin-left: -53%;
    margin-right: -80%;
}

h1 {font-size:2.9em; text-align:right; color:#df5c28; font-weight: normal; padding-right: 8%}

@media (max-width: 768px) {
	.banner .text {margin-left: 0; margin-right: 0;}
}

@media (max-width: 600px) {
	h1 {margin-bottom:5%}
	}
	
h2 {font-size: 1.6em;
    margin: auto;
	padding-top:5px;
	padding-bottom:5px;
	color:#df5c28;
	text-align:center;
	font-weight: bold}
	
	.dropdown-menu {border-color:#ffffff; border-radius:0 !important; min-width:140px;}
	
	.navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
		background-color:#ffffff !important; font-weight:bold
		}
		
	.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {background-color:#ffffff !important; font-weight:bold}
	
	.dropdown-menu > li > a {
    display: block;
    padding: 5px 0px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #000000;
    white-space: nowrap;
    border-bottom: #64a969 solid 1px;
    margin-left: 10px;
    margin-right: 10px;
	text-align: center;
	}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {border-color: #64a969}
	
	.container {
    width: 100%;
	padding:0px;
max-width: 1400px}
	
	.row {margin-right:0px;
	margin-left:0px}

	
@media (max-width: 480px) {

  .menu {background-color:none;}
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {border-color:#ffffff}

.navbar-default {
    background-color: none;
    border-color: #ffffff;
	margin:auto;
	height:auto;
	font-size: 16px;
    line-height: 40px;
	padding-bottom: 40px;
}
	


}
	
	@media (max-width: 	767px) {
			.menu {
    padding-right:15px!important;
	padding-left:15px!important;}

		.navbar {background-color: transparent !important}
}

select
{
	border: solid 1px #f5f5f5;
	color:#848788;
	line-height:40px;
	font-size:13px;
	border-radius:0px;
	width:100%;
	height:30px;
	text-align:center
}

input[type=text]
{
	border: solid 1px #f5f5f5;
	color:#848788;
	line-height:28px;
	font-size:11px;
	-webkit-appearance: none;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-radius:0px;
	width:100%;
	text-align:left;
	margin-top: 12px;
	padding-left: 5px
}


input[type=textarea]
{
	color:#848788;
	width:100%;
	height:150px;
	-webkit-appearance: none;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-radius:0px;
	text-align:left;
	padding-top: 70px;
    font-size: 11px;
	padding-left: 5px;
	margin-top: 12px;
}
input[type=submit]
{
	border: solid 1px #000000;
	color:#ffffff;
	background-color:#000000;
	cursor:pointer;
	font-size:18px;
	margin-top:10px;
	margin-bottom:40px;
	padding:10px;
	-webkit-appearance: none;
	text-align:center;
	width:100%;
	border-radius: 0px;
	max-width: 250px;
	font-weight: bold;
	display: block;
	margin: auto;
	margin-top: 30px
}
input[type=submit]:hover
{
	border:solid 1px #ffffff;
	color:#000000;
	background-color:#ffffff;
	-webkit-appearance: none;
	text-align:center
}
#contact span
{
	color:#ef3e61;
	font-size:14px;
}

	
#adress
{
	display:none
}
label
{
	color:#000000;
	font-size:15px;
	font-weight:normal
}

textarea
	{
	border: solid 1px #f5f5f5;
	color:#848788;
	width:100%;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-radius:0px;
	text-align:left;
	padding-bottom: 70px;
    font-size: 11px;
	padding-left: 5px;
	margin-top: 12px;
}

td {padding-right:5px; background-color:#ffffff; font-size:15px}
table {max-width:100%; background-color:#ffffff}
.right {text-align:right}
.left {text-align:left}
.fields {padding-left:12%; padding-right:12%}
.topmargin {margin-top:10px}

@media (max-width: 992px) {
.right {text-align:center}
.left {text-align:center}
.fields {padding-left:0%; padding-right:0%}
}

.form {margin-top:15px; margin-left: 30px}

.form p {font-size: 1.6em; color: #928d7f !important}


.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-sm-12 col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {padding-left:5px; padding-right:5px}

.mainslider .flex-direction-nav {display:none}

.notop {padding-top: 0px}

.nobottom {padding-bottom: 0px}

.anchor {margin-top: -220px; height: 220px; display: block}

/* Effet machine à écrire Aïnos */

.typing-container {
  position: relative;
}

#feature-text {
  display: inline-block;
}

.input-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  margin-left: 3px;
  background-color: #ffffff;
  vertical-align: middle;
  animation: blink-ainos 0.7s steps(1) infinite;
}

@keyframes blink-ainos {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Bloc services - centrage parfait */
#services .service-box {
    text-align: center;
    display: block;
}

#services .service-box img {
    max-width: 80px;
    margin: 0 auto 20px auto;
    display: block;
}

#services .service-box h3 {
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    line-height: 1.3;
    margin: 0;
    font-family: "news-gothic-std", Arial, sans-serif;
}

/* Uniformiser la hauteur des blocs services */
#services .service-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Même hauteur pour les pictos */
#services .service-box img {
    max-width: 80px;
    height: 80px;            /* FIXE → garantit l’alignement vertical */
    object-fit: contain;
    margin-bottom: 15px;
}

/* Même hauteur pour les textes */
#services .service-box h3 {
    color: #c0bbb3;
    font-size: 18px;
    text-align: center;
    line-height: 1.3;
    margin: 0;
    height: 45px;  
    align-items: center;     /* centre verticalement le texte */
    justify-content: center;
}

/* ===== Section ASSISTANTE DE DIRECTION ===== */

.service-assistance {
    margin-top: 10px;
    margin-bottom: 0px;
	padding-top: 50px;
	padding-bottom: 0px
}

.direction {background-color: #dedcd6;}

.rh {background-color: #f5f4f2}


/* Colonne texte */
.service-assistance-text h2, .service-block h2 {
    text-align: left;
    margin-bottom: 15px;
}

.service-assistance-text h2 span, .service-block h2 span {
    color:#000000
}

.service-assistance-text h2 hr, .service-block h2 hr {
    color:#df5c28;
	width: 100px;
    height: 1px;       /* ou ta hauteur */
    background: #df5c28;  /* couleur */
    border: 0;
    margin-left: 0;    /* aligné à gauche */
    margin-right: auto;/* évite le centrage */
}

.rh h2 hr {margin-bottom: 0px}

.rh h2 {margin-bottom: 0px}

.rh .apropos, .ao .apropos, .com .apropos  {padding-bottom: 0px; padding-top: 0px}

.service-assistance-text p {
    text-align: left;
    font-size: 15px;
    margin-bottom: 10px;
}

.service-assistance-text .btn-assistance {
    margin-top: 20px;
    background: transparent;
    color: #df5c28;
    border: 1px solid #df5c28;
    padding: 10px 30px;
    font-size: 14px;
	display: block;         /* devient un bloc centré */
    width: fit-content;     /* largeur du bouton seulement */
    margin: 40px auto 0px auto;         /* centre horizontalement */
	font-weight: bold
}

.service-assistance-text {padding-top: 0px; padding-bottom: 50px}

.rh .service-assistance-text {padding-top: 50px; padding-bottom: 0px; padding-left: 15px}

.service-assistance-text .fa-check {margin-left: 0px}

.service-assistance-text li {margin-left: 0px}

.btn-assistance a {
	display: block;         /* devient un bloc centré */
    width: fit-content;     /* largeur du bouton seulement */
    margin: 0 auto;         /* centre horizontalement */
}

/* Colonne visuelle */
.service-assistance-visual {
    /* pour garder le comportement flex de .apropos tout en gérant le chevauchement */
}

.service-assistance-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 0;
}

/* Image à gauche */
.service-assistance-image {
    width: 100%;
    display: block;
	padding: 0px
}

/* Cartouche blanc qui chevauche l'image et est CENTRÉ verticalement */
.service-assistance-list {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: #ebe9e6;
    padding: 40px 25px;
    max-width: 60%;
    font-size: 14px;
    overflow: hidden;
    max-width: 240px;
    min-height: 365px;
}

.rh .service-assistance-list {
   padding: 75px 25px; background-color: #dedcd6
}

.ao .service-assistance-list {
   padding: 75px 25px; background-color: #ebe9e6
}


/* Coin supérieur droit coupé */
.service-assistance-list::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;   /* 👈 taille du biseau — AJUSTABLE */
    height: 35px;  /* 👈 taille du biseau — AJUSTABLE */
    clip-path: polygon(0 0, 100% 0, 100% 100%); /*_tri impeccable*/
	margin-top: -1px;
    margin-right: -1px;
}

.direction .service-assistance-list::before {
    background: #dedcd6; /* couleur de fond de la section derrière */
}

.rh .service-assistance-list::before {
    background: #f5f4f2; /* couleur de fond de la section derrière */
}

.ao .service-assistance-list::before {
    background: #ffffff; /* couleur de fond de la section derrière */
}
	
.service-assistance-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.service-assistance-list li {
    text-align: left;
    margin-bottom: 6px;
    position: relative;
    padding-left: 0px;
	    font-size: 13px;
    font-weight: bold;
	margin-left: 20px
}


/* Responsive : sur mobile, on enlève le chevauchement pour éviter les soucis */
@media (max-width: 767px) {
    
    .service-assistance-image-wrapper {
        max-width: 100%;
    }
    .service-assistance-list {
        position: static;
        max-width: 100%;
        margin-top: 15px;
        box-shadow: none;
    }
}

/* Force la colonne image + cartouche à se coller en bas */
/* Colonne droite globale */
.service-assistance-visual {
    display: flex;
    justify-content: flex-start;   /* tout commence à gauche */
    align-items: flex-start;
}

/* Wrapper de l'image : 50% de la largeur de la colonne, collé à gauche */
.service-assistance-image-wrapper {
    display: block;
    text-align: left;              /* au cas où un text-align:center remonte */
}

/* L'image elle-même : on annule le centrage Bootstrap */
.service-assistance-image {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 !important;          /* 👈 casse le margin:auto de .img-responsive */
	padding: 5%;
}

.service-assistance-visual {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 👈 aligne le contenu en BAS */
    padding-bottom: 0px;
}

.pourquoi {background-color: #ebe9e6;}

/* Coin supérieur droit coupé */
.pourquoi::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;   /* 👈 taille du biseau — AJUSTABLE */
    height: 50px;  /* 👈 taille du biseau — AJUSTABLE */
    clip-path: polygon(0 0, 100% 0, 100% 100%); /*_tri impeccable*/
	margin-top: -1px;
    margin-right: -1px;
	background-color: #000d20;}

.pourquoi:hover {width:100%;-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-transition:0.5s ease-in-out;transition:0.5s ease-in-out}

.atouts {background-color: #000d20;}

.atouts img {width: 100%; margin: auto}

.atouts h2 {margin-bottom: 0px; color: #c0bbb3; padding-bottom:0px; padding-top: 30px}

.atouts h3 {color:#df5c28; height: 80px; padding-top: 30px; margin-bottom: 20px}

.atouts p {text-align: center; padding: 10px 20px; min-height: 140px}

.typewrite {
    font-size: 15px;
    color: #000000;
    text-align: right;
    padding-right: 8%;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;                /* invisible tant que pas en cours */
    border-right: none;        /* PAS DE CURSEUR au repos */
}

.typewrite.active {
    border-right: 0px solid #fff;        /* curseur visible seulement pendant écriture */
    animation: caret .7s step-end infinite;
}

.typewrite.typed {
    border-right: none;        /* curseur disparaît quand terminé */
}

@keyframes caret {
    0% { border-color: transparent; }
    50% { border-color: #fff; }
    100% { border-color: transparent; }
}

.banner .vignette {
    position: relative;
    min-height: 500px; /* Ajuste selon ta bannière */
}

/* Bloc contenant les 4 lignes : fixé, rien ne bouge */
.banner-lines {
    position: relative;
    height: 120px; /* FIXE – à ajuster selon ton design */
    margin-top: 20px;
}
    
/* Conteneur de la section à propos */
#about .row {
    display: flex;
    align-items: center; /* centre verticalement les 2 colonnes */
}

/* Colonne texte */
.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center; /* centre verticalement le contenu interne */
}


/* On laisse .apropos en flex, mais on force cette row à étirer les colonnes */
.sonia-row {
    align-items: stretch; /* les colonnes ont la même hauteur */
	padding-bottom: 0px;
}

/* Colonne texte avec fond marron */
.brown {
    background-color: #b9b3a7; /* ta couleur */
    display: flex;             /* pour pouvoir centrer le contenu */
}

/* Wrapper interne centré verticalement */
.brown-inner {
    margin: auto 20px; padding-left:10%; padding-right: 10%; padding-top: 25px; padding-bottom: 25px;}

.brown-inner h2 span {font-family: 'Montserrat', Arial, sans serif; font-weight: bold}

.coordonnees h2 {font-weight: normal}

/* Sécurité : le h2 reste bien aligné à gauche */
.sonia-row h2 {
    text-align: left !important;
}

/* Colonne gauche (bloc texte) — coin supérieur gauche */
.sonia-row .col-xs-12.col-sm-9.col-md-9.col-lg-9.brown {
    border-top-left-radius: 20px;
    overflow: hidden; /* évite que le texte déborde */
}

/* Colonne droite (photo) — coin supérieur droit */
.sonia-row .col-xs-12.col-sm-3.col-md-3.col-lg-3 {
    border-top-right-radius: 20px;
    overflow: hidden; /* évite que l’image dépasse */
}

@media (max-width: 767px) {
.sonia-row .col-xs-12.col-sm-3.col-md-3.col-lg-3 {
    border-top-right-radius: 0px;
	
	}
}

/* L’image couvre son arrondi proprement */
.sonia-row .col-xs-12.col-sm-3.col-md-3.col-lg-3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner {
    position: relative;
    text-align: right;      /* 👈 permet d’aligner le cartouche à droite */
}

/* Cartouche téléphone */
.banner-phone {
    display: inline-block;   /* 👈 indispensable pour que l’alignement droite fonctionne */
    margin-right: 7%;        /* 👈 distance exacte du bord comme .apropos */
    
    padding: 10px 15px;
    background-color: #df5c28;
    color: #ffffff;
    font-weight: bold;
    border-radius: 0px;
    white-space: nowrap;
    font-size: 14px;
	margin-top: -20px
}

/* Le menu flotte à droite */
#primarymenu {
    float: right !important;
    margin-right: 7%;     /* 👈 retrait demandé */
}

.fa-check {color: #efa34a; padding-right: 10px; font-weight: bold; margin-left: -20px}

.tick-list {
    list-style: none;        /* on supprime les puces HTML */
    padding: 0;
    margin: 0;
}

.tick-list li {
    margin-bottom: 6px;
    font-size: 14px;
}

.tick-list li i {
    color: #efa34a;          /* ton orange */
    margin-right: 8px;       /* espace entre icône et texte */
}

.service-assistance-list ul,
.tick-list,
.tick-list-compact {
    list-style: none;
    padding-left: 0;   /* empêche le décalage gauche */
    margin-left: 0;
}

.clients p {text-align: center}
.contactphoto {background-color: #241d18}

.contactphoto img {margin: auto;}

/* Centrer VERTICALEMENT le contenu de .grey dans la section témoignages */
#references .grey {
    display: flex;
    flex-direction: column;   /* le contenu s'empile verticalement */
    justify-content: center;  /* centre VERTICALEMENT le contenu */
}

.service-assistance-list {
	display: flex;
    flex-direction: column;   /* le contenu s'empile verticalement */
    justify-content: center;  /* centre VERTICALEMENT le contenu */
}

.atouts h2 {font-weight: normal}

/* Centrer verticalement le contenu de la zone photo + titre */
.contactphoto {
    display: flex;
    align-items: center;     /* centre horizontalement les colonnes */
    justify-content: center; /* centrer verticalement le contenu */
}

.contactphoto h2 strong {font-family: Times New Roman, Times, serif; font-size: 1.4em}

/* La ligne devient un conteneur flex */
#contact .row.flex {
    display: flex;
    align-items: stretch; /* force les colonnes à avoir la même hauteur */
}

/* Chaque colonne doit pouvoir s'étirer */
#contact .coordonnees,
#contact .form {
    display: flex;
    flex-direction: column;
}

.contactdescription {padding: 20px}

.fa-square-phone {font-size: 1em}

.service-assistance-list:hover {background-color: #ffffff !important}

.btn-assistance:hover {background-color: #df5c28; color:#ffffff; text-decoration: none !important}

button:hover {background-color: #df5c28; color:#ffffff; text-decoration: none !important; border:#df5c28}

.service-assistance-text a {text-decoration: none !important}

@media (max-width: 1080px) {

	h2 {font-size: 16px}
	
	button {padding: 5px 20px;
    font-size: 1em; 
     float: right;
        margin-right: 8%;}
	
	h1 {font-size:1.5em}
	.banner p {font-size:1em}

}


@media (max-width: 768px) {
	.desktop {display: none !important}
	.mobile {display: block !important}
	.banner h1 {margin-top:-90%}
	.presentation {margin-top:50%}
	
	}

@media (max-width: 767px) {

    /* On empile les colonnes, texte + visuel */
    .apropos.service-assistance,
    .service-assistance .apropos {
        flex-direction: column;
		margin-bottom: -60px
    }

    .service-assistance-text,
    .service-assistance-visual {
        width: 100%;
        max-width: 100%;
        float: none;          /* on neutralise les floats Bootstrap */
		margin-bottom: -80px
    }

    /* Optionnel : un peu d'espace entre les 2 blocs */
    .service-assistance-text {
        margin-bottom: 20px;
    }
	.service-assistance-image {width:100%}
	
	#references .grey {padding: 20px}
	
	.rh .service-assistance-text {padding-top: 0px}
}

#services a:hover {text-decoration: none}