@charset "utf-8";

/* ===================
   Fonts
=================== */
@font-face {
	font-family: 'HelveticaNowDisplay-CnBlk';
  	src: url('../fonts/HelveticaNowDisplayCondensedBlack.woff2') format('woff2');
	font-weight: normal;
 	font-style: normal;
  	font-display: swap;
}

@font-face {
  font-family: 'HelveticaNowDisplayMedium';
  src: url('../fonts/HelveticaNowDisplayMedium.ttf') format('truetype');
}

@font-face {
  font-family: 'HelveticaNowText';
  src: url('../fonts/HelveticaNowTextRegular.woff2') format('woff2');
font-display: swap;
}

/* ===================
   Variables
=================== */
:root {
  --container-max-width: 2200px;
  --header-height: clamp(200px, 26.67vw, 512px);
  --section-margin-top: clamp(48px, 6.67vw, 128px);

  --h1-size: clamp(32px, 3.54vw, 72px);
  --h2-size: clamp(40px, 3.54vw, 72px);
  --h2-margin-bottom: clamp(32px, 3.54vw, 68px);
  --h3-size: clamp(22px, 1.25vw, 24px);
  --h3-margin-bottom: clamp(24px, 2.5vw, 48px);
  --text-size: clamp(14px, 0.83vw, 16px);

  --button-width: clamp(160px, 13.75vw, 264px);
  --button-height: clamp(48px, 3.33vw, 64px);
  --button-radius: clamp(4px, 0.73vw, 7px);
  --button-font-size: clamp(16px, 1.25vw, 24px);
  --button-bg: #ff5000;
  --button-color: #ffffff;
  --button-margin-top: clamp(16px, 2.5vw, 32px);

  --icon-width: clamp(24px, 1.67vw, 32px);
  --icon-margin-left: clamp(16px, 1.25vw, 24px);

  --text-side-margin: clamp(64px, 7.29vw, 140px);
  --image-text-gap: clamp(64px, 6.67vw, 128px);
  --image-border-radius: clamp(16px, 1.67vw, 32px);
}

/* ===================
   Base styles
=================== */
*, ::before, ::after {
    box-sizing: border-box;
	}

html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: var(--text-size);
  font-family: 'HelveticaNowText', 'Segoe UI', 'Roboto', sans-serif;
}

h1 {
  font-size: var(--h1-size);
  font-family: 'HelveticaNowDisplay-CnBlk';
	color: #ff5000;
	text-align: center;
	text-transform: uppercase;
	line-height: 100%;
	letter-spacing: clamp(0.02em, 0.05vw, 0.05em);
}

h2 {
  font-size: var(--h2-size);
  margin-bottom: var(--h2-margin-bottom);
  font-family: 'HelveticaNowDisplay-CnBlk';
	line-height: 100%;
	color: #ffffff;
	text-align: center;
}

h3 {
  font-size: var(--h3-size);
  margin-bottom: var(--h3-margin-bottom);
  font-family: 'HelveticaNowDisplayMedium';
	color: #ffffff;
	line-height: 125%;
	letter-spacing: clamp(0.02em, 0.05vw, 0.05em);
}

p,
li {
  font-size: var(--text-size);
	font-family: 'HelveticaNowText';
	line-height: 125%;
	color: #ffffff;
}

strong{
	font-family: 'HelveticaNowDisplayMedium';
	letter-spacing: clamp(0.02em, 0.05vw, 0.05em);
}

/* ===================
   Header
=================== */
header {
  max-width: 100%;
  height: var(--header-height);
  margin: 0 auto;
	display: flex;
  align-items: stretch; /* ⚠️ clé pour que les deux colonnes aient la même hauteur */
}

/* ===================
   Section
=================== */


body{
	background-color: #272727;
	margin: 0;
}

main, section{
	padding-top : 2rem;
	padding-bottom: 2rem;
}

/* ===================
   Footer
=================== */

footer{
	padding-top: 2rem;
	margin: 0;
 background-color: #1A1A1A;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
	 justify-items: center; /* horizontal */


}

footer h3{
	color: #ffffff;
}

footer div{
	margin-bottom: 1rem;
}

footer a{
	font-family: 'HelveticaNowText';
	font-size: 1rem;
	line-height : 125%;
	color: #ffffff;
	text-decoration: none;
	
}


/* ===================
   Buttons
=================== */

.centred{
	display: flex;
	justify-content: center;
	align-items: center;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--button-width);
  height: var(--button-height);
  border: none;
  border-radius: var(--button-radius);
  background-color: var(--button-bg);
  margin-top: var(--button-margin-top);
  cursor: pointer;
  text-decoration: none;
  font-family: 'FontFour', sans-serif;
}

.button a {
	font-family: 'HelveticaNowDisplay-CnBlk';
	font-size: var(--button-font-size);
	color: var(--button-color);
	text-decoration: none;
	text-transform: uppercase;
	line-height: 100%;
	letter-spacing: clamp(0.02em, 0.05vw, 0.05em);
}


/* ===================
   Pictogrammes
=================== */
.icon {
  width: var(--icon-width) !important;
  margin-right: var(--icon-margin-left);

}

.cover{
	width: 100%;
  height: auto;
  object-fit: cover;
  flex: 1 1 50%;
	background-image: url('../img/sr_ban_708918382.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.layout{
	 flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* ou space-between selon le besoin */
	background-color: #1A1A1A;
	align-items: center;
}

.colortitre{
	color: #ffffff;
}

.colororange{
	color: #ff5000;
}

/* ===================
   Flex Rows Alternés
=================== */

.flex-row{
	display: flex;
	flex-direction: row;
	gap: 2rem;
	align-items: center;
	margin-left: clamp(48px, 6.67vw, 128px);
	margin-right: clamp(48px, 6.67vw, 128px);
}

.flex-row > * {
  flex: 1 1 100%; /* Pour les petits écrans */
}

.flex-row.reverse {
  flex-direction: row-reverse;
}

.flex-row img {
  border-radius: var(--image-border-radius);
  max-width: 100%;
  height: auto;
}

.flex-row.reverse img {
  border-radius: var(--image-border-radius);
}

.titres{
	display: flex;
	flex-direction: row;
	align-items: center;
}


.choix{
	background-color: #1e1e1e;
	padding: 5rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	
}

.avantages{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	
}

.choix h3{
	margin: 0;
}

.choix p{
	margin: 0;
}

.choix .arguments{
	 flex: 1;
}

.arguments{
	display: flex;
    gap: 0.625rem;
    flex-direction: column;
}

.qualite{
	background-color: #1A1A1A;
}

.clients-text{
	text-align: center;
}

.clients, .choix, .qualite, main{
	padding-top: clamp(48px, 6.67vw, 128px);
	padding-bottom: clamp(48px, 6.67vw, 128px);
	
}

.clients{
	    margin-left: auto;
    margin-right: auto;
    max-width: calc(100rem);
    width: 100%;
	padding: 5rem;
}

/* ===================
   Timeline
=================== */
.timeline {
  position: relative;
  list-style: none;
  padding-left: 2rem;
  margin: auto;
  max-width: var(--container-max-width);
  counter-reset: step;
	z-index: 0;
}

.timeline li {
  position: relative;
  margin-bottom: clamp(24px, 3vw, 48px);
  padding-left: 48px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
	z-index: 0;

}

/* Cercle numéroté */
.timeline li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(28px, 1.67vw, 32px);
  height: clamp(28px, 1.67vw, 32px);
  font-size: clamp(20px, 1.25vw, 24px);
  background-color: #ff5000;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-family: 'HelveticaNowDisplay-CnBlk';
}

/* Ligne verticale */
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 45px;
  width: 4px;
  height: 100%;
  background-color: #ffffff;
  z-index: -1;
}

/* Révélation */
.timeline li.visible {
  opacity: 1;
  transform: translateY(0);
}

.titrecentre{
	text-align: center;
}

.warning{
	padding-left: 2rem;
}

/* ===================
   Hover Effects
=================== */
.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 0.5px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
}

.hover-underline-animation.right::after {
  transform-origin: bottom left;
}

.hover-underline-animation.right:hover::after {
  transform-origin: bottom right;
}

.baseline{
	display: flex;
	-webkit-box-align: baseline;
    align-items: baseline;
	justify-content: center;
}

.logbase{
	height: 2.5rem;
}

.titrebase{
	font-family: 'HelveticaNowText';
	position: relative;
    bottom: 0.0625rem;
    left: 0.5rem;
	font-size: clamp(20px, 3vw, 40px);
	font-weight: normal;
}

.logosclients{
	    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    -webkit-box-pack: center;
    justify-content: space-between;
    margin-top: 2.5rem;
    -webkit-box-align: center;
    align-items: center;
    grid-auto-flow: row dense;
    gap: 2rem;		
}

.logosclients img {
	height: auto;
  	display: block;
}

/*cookies*/

.cookie-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* gris semi-transparent */
  z-index: 9998;
  pointer-events: auto;
  cursor: not-allowed;
}

/* Bloquer le scroll sur le body */
body.no-scroll {
  overflow: hidden;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 1em;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
}

.cookie-banner p {
  margin: 0 0 1em 0;
  text-align: center;
color: #1A1A1A;
}

.cookie-buttons {
  display: flex;
  gap: 1em;
}

.cookie-buttons button {
  padding: 0.5em 1.2em;
  border: none;
  background-color: #1A1A1A;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.cookie-buttons button:hover {
  background-color: #ff5000;
}


@media (min-width: 1024px){
	footer .icon{
		margin-bottom: 0;
	}
	
	.icon{
		
		border-radius: 0 !important;
	}
	
	.avantages{
		gap: 3rem;
	}
}

/* === Tablet 600px–1023px === */
@media (min-width: 600px) and (max-width: 1023px) {
	footer{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	 .flex-row > * {
    flex: 1 1 45%; /* espace pour le gap */
  }
	
	.avantages{
		display: flex;
		flex-direction: column;
		gap: 3rem;
		
	}
	
	.titrebase{
		font-size: 2.125rem;
	}
	
	.logosclients{
		display: grid;
        	grid-template-columns: repeat(3, minmax(0, 1fr));
        	justify-content: center;
        	margin-top: 2.5rem;
        	gap: 2rem;
        	-webkit-box-align: center;
        	align-items: center;
	}
}
	

/* === Mobile ≤599px === */
@media (min-width: 300px) and (max-width: 599px) {
	
	 header {
		 display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }

  header .cover,
  header .layout {
    height: auto;
    min-height: 25vh;
	  padding: 0 1rem;
  }
	
	  footer {
    grid-template-columns: 1fr;
	
  }
	
	.flex-row,
  	.flex-row.reverse {
    	flex-direction: column;
  	}

  	.flex-row > *,
  	.flex-row.reverse > * {
    	flex: 0 0 100%;
  	}

  	.flex-row img,
  	.flex-row.reverse img {
    	border-radius: var(--image-border-radius);
    	width: 100%;
    	height: auto;
  	}
	
	.avantages{
		display: flex;
		flex-direction: column;
		gap: 2rem;
		}
	
	.clients{
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	
	.logbase{
		height: 1.975rem;
	}
	
	.logosclients{
		display: grid;
		margin-top: 2.5rem;
		gap: 1.5rem;
		-webkit-box-align: center;
		align-items: center;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		justify-content: center;
		padding-right: 25%;
		padding-left: 25%;	
	}
}