@font-face {
  font-family: "Raleway"; /* le nom que tu appelles dans font-family */
  src: url("./fonts/Raleway-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;   /* parce que c'est une variable font */
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Ravlys";
  src: url("./fonts/RavlysRegular.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}



/* Mets ça tout en haut de ton fichier style.css */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;600&display=swap');



/* Supprime le scroll horizontal parasite */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* bloque l'espace à droite */
  width: 100%;
  box-sizing: border-box;
}

/* hérite du box-sizing pour tous les enfants */
*, *::before, *::after {
  box-sizing: inherit;
}



html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;              /* stop scroll horizontal */
}

*, *::before, *::after { box-sizing: border-box; }

img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  word-break: break-word;
  overflow-wrap: anywhere;
}



/* Exemple d'utilisation */
#section1 nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 25px;
  font-family: "Raleway", sans-serif;
  font-weight: 200; /* choisis le poids que tu veux */
}


/* Reset global */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: "Raleway" , sans-serif;
}

/* Section 1 */
#section1 {
    background-color: white;
    height: 275px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 2px solid #eee; /* juste pour bien voir la séparation */
}

#section1 nav {
  position: absolute;
  bottom: 30px;       /* 👉 espace entre le bas de la section et le texte du menu */
  left: 50%;
  transform: translateX(-50%); /* centre horizontalement */
}

#section1 nav ul {
  list-style: none;
  display: flex;
  gap: 30px;          /* espace entre les liens */
  margin: 0;
  padding: 0;
}


#section1 img {
    --logo-height: 55px;
    --logo-top: 75px;

    height: var(--logo-height);
    width: auto;
    position: absolute;
    top: var(--logo-top);
    left: 50%;
    transform: translateX(-50%);
}








#section2 {
    width: 100%;
    margin: 0;
    padding: 0;
}

#section2 img {
    width: 100%;   /* occupe toute la largeur */
    height: auto;  /* garde les proportions */
    display: block; /* enlève l’espace blanc en dessous de l’image */
}




#section3{
  --container-max: 1400px;
  --pad-x: 48px;
  --pad-y: 72px;

  --img-max: 620px;

  --p-size: 16px;
  --p-line: 1.7;
  --h2-size: 26px;
  --h2-weight: 800;
  --h2-highlight: #efe5c7;
  --bottom-highlight: #efe5c7;

  /* Largeur max des 4 textes */
  --intro-max: 650px;
  --valentine-max: 380px;
  --marc-max: 380px;
  --bottom-max: 650px;

  /* Position blocs texte */
  --valentine-top: 450px;
  --valentine-left: 1px;
  --marc-top: 500px;
  --marc-left: 1050px;

  /* Icônes */
  --logo-size: 200px;
  --logo1-left: 350px;
  --logo1-top: 450px;
  --logo2-left: 870px;
  --logo2-top: 520px;
}

/* Grille de base */
#section3{
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  row-gap: 32px;
}

#section3 h2 {
  font-family: "Ravlys", sans-serif;
  font-weight: 100; /* Normal, pas gras */
  margin: 0 0 1rem 0; /* un peu d’air en dessous (optionnel) */
}

/* Intro (haut) */
#section3 .bloc-haut{
  grid-row: 1;
  text-align: center;
  max-width: var(--intro-max);
  margin: 0 auto;
}
#section3 .bloc-haut p{
  margin: 0;
  font-size: var(--p-size);
  line-height: var(--p-line);
}

/* Image centrale */
#section3 .img-centree{
  grid-row: 2;
  width: 100%;
  max-width: var(--img-max);
  height: auto;
  margin: 0 auto;
  display: block;
  z-index: 1;
}

/* Bloc bas */
#section3 .bloc-bas{
  grid-row: 3;
  text-align: center;
  max-width: var(--bottom-max);
  margin: 8px auto 0;
}
#section3 .bloc-bas p{
  margin: 0;
  font-size: var(--p-size);
  line-height: var(--p-line);
}
#section3 .bloc-bas strong{
  background: linear-gradient(transparent 58%, var(--bottom-highlight) 58%);
  padding: 0 .15em;
}

/* === Blocs texte latéraux === */
#section3 .bloc-texte1,
#section3 .bloc-texte2{
  position: absolute;
  z-index: 2;
}

#section3 .bloc-texte1{
  top: var(--valentine-top);
  left: var(--valentine-left);
  text-align: right;
  max-width: var(--valentine-max);
}

#section3 .bloc-texte2{
  top: var(--marc-top);
  left: var(--marc-left);
  text-align: left;
  max-width: var(--marc-max);
}

/* Titres */
#section3 .bloc-texte1 h2,
#section3 .bloc-texte2 h2{
  margin: 0 0 10px;
  display: inline-block;
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: 1.1;
  padding: 0 .15em;
  background: linear-gradient(transparent 58%, var(--h2-highlight) 58%);
}

/* Paragraphes */
#section3 .bloc-texte1 p,
#section3 .bloc-texte2 p{
  margin: 0;
  font-size: var(--p-size);
  line-height: var(--p-line);
}

/* Icônes décoratives */
#section3 .img-logo1,
#section3 .img-logo2{
  position: absolute;
  width: var(--logo-size);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
#section3 .img-logo1{ left: var(--logo1-left); top: var(--logo1-top); }
#section3 .img-logo2{ left: var(--logo2-left); top: var(--logo2-top); }




/***** ===========
 *  CONTRÔLES GLOBAUX (modifie les valeurs ici)
 *  Tu peux aussi surcharger par carte via un style inline:
 *  <div class="image-container" style="--icon-size:120px; --card-h:380px"></div>
 *=========== *****/
#section4 {
  /* Mise en page */
  --columns: 4;             /* nombre de colonnes (desktop) */
  --gap-x: 10px;            /* espacement horizontal entre colonnes */
  --gap-y: 0px;            /* espacement vertical entre rangées */

  /* Marges internes (distance gauche/droite/haut/bas) */
  --pad-x: 120px;           /* padding horizontal de la section */
  --pad-y: 30px;            /* padding vertical de la section */
  --container-max: 100%;  /* largeur max de la section (centrée) */

  /* Carte (chaque colonne) */
  --card-w: 240px;          /* largeur max d’une carte */
  --card-h: 300px;           /* hauteur d’une carte (ex: 360px, sinon auto) */
  --card-radius: 0px;      /* arrondi des coins */
  --card-bg: #f5f0e3;       /* fond de la carte (peut être transparent) */
  --card-px: 20px;          /* padding horizontal de la carte */
  --card-py: 22px;          /* padding vertical de la carte */
  --card-shadow: 0 0 0 rgba(0,0,0,0); /* ex: 0 10px 30px rgba(0,0,0,.08) */

  /* Icône */
  --icon-size: 200px;        /* taille de l’icône (px) */
  --icon-bottom: 3px;      /* espace sous l’icône */

  /* Titres */
  --title-size: 16px;       /* taille du titre */
  --title-weight: 700;      /* graisse du titre */
  --title-bottom: 3px;     /* espace sous le titre */
  --title-color: #111;      /* couleur du titre */

  /* Texte */
  --text-size: 12px;        /* taille du texte */
  --text-line: 1.7;         /* interligne */
  --text-max: 240px;        /* largeur max du paragraphe */
  --text-color: #333;       /* couleur du texte */
}

/***** ===========
 *  SECTION
 *=========== *****/
#section4 {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gap-y) var(--gap-x);
  padding: var(--pad-y) var(--pad-x);
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--card-bg); /* retire si tu veux un fond page différent */
  text-align: center;
}

/***** ===========
 *  CARTE (chaque colonne)
 *=========== *****/
#section4 .image-container {
  justify-self: center;
  align-self: start;

  width: min(var(--card-w), 100%);
  height: var(--card-h); /* auto par défaut, fixe si tu mets une valeur */
  background: transparent;       /* la carte peut être transparente */
  border-radius: var(--card-radius);
  padding: var(--card-py) var(--card-px);
  box-shadow: var(--card-shadow);

  display: flex;
  flex-direction: column;
  align-items: center;
}

/***** Icône *****/
#section4 .image-container img {
  width: var(--icon-size);
  height: auto;
  display: block;
  margin: 0 auto var(--icon-bottom);
}

/***** Titre *****/
#section4 .titre {
  margin: 0 0 var(--title-bottom);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  color: var(--title-color);
  text-transform: uppercase;
  line-height: 1.25;
}

/***** Texte *****/
#section4 .texte {
  margin: 0 auto;
  max-width: var(--text-max);
  font-size: var(--text-size);
  line-height: var(--text-line);
  color: var(--text-color);
}



/***** ===========
 *  (Optionnel) Effets au survol – commente si tu n’en veux pas
 *=========== *****/
#section4 .image-container:hover img {
  transform: translateY(-2px) scale(1.02);
  transition: transform 180ms ease;
}



#section5 {
    display: flex;
    flex-wrap: wrap;        /* passe à la ligne si petit écran */
    justify-content: center; /* centrer les images horizontalement */
    gap: 40px;              /* espace entre les images */
    padding: 20px;
    background-color: #fff;
}













/* -------- Variables : MODIFIE TOUT ICI -------- */
:root{
  /* Largeur & espacements */
  --maxw: 100%;
  --pad-x: 150px;         /* <<< marge gauche/droite (réduis/augmente) */
  --pad-y: 150px;
  --gap: 70px;            /* espace entre cartes */

  /* Couleurs */
  --ink: #111;
  --muted: #777;
  --line: #d9d9d9;
  --underline-bg: #efe8d2; /* bandeau beige sous le titre général */

  /* Typos */
  --font-title: "Ravlys", sans-serif;     /* titre général */
  --font-step-head: "Ravlys", sans-serif; /* chiffres + titres des étapes */
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Graisses */
  --w-normal: 800;
  --w-bold: 800;
  --w-body: 100;          /* <<< AJOUT : poids très fin pour le texte */

  /* Tailles (tu choisis tout ici) */
  --fs-heading: clamp(22px, 2.2vw, 34px);     /* titre général */
  --fs-step-head: clamp(20px, 1.8vw, 26px);   /* chiffres + h3 */
  --fs-step-num: var(--fs-step-head);         /* si tu veux dissocier, change ici */
  --fs-body: clamp(14px, 1.05vw, 16px);

  /* (déjà ajouté précédemment) contrôles du H2 */
  --heading-mt: 0.5rem;
  --heading-mb: 1.25rem;
  --heading-tracking: .02em;
  --underline-thickness: 10px;
}

/* -------- Layout -------- */
.steps{
  padding: var(--pad-y) var(--pad-x);
  color: var(--ink);
}
.steps__inner{
  margin: 0 auto;
  max-width: var(--maxw);
}
.steps__grid{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap) calc(var(--gap) + 12px);
  margin: 0;
  padding: 0;
}

/* -------- Titre général avec bandeau beige (souligné) -------- */
.steps__heading{
  font-family: var(--font-title);
  font-weight: var(--w-normal);
  font-size: var(--fs-heading);
  line-height: 1.15;

  letter-spacing: var(--heading-tracking);
  display: block;
  width: fit-content;
  margin: var(--heading-mt) auto var(--heading-mb) auto;
  background: linear-gradient(
    to bottom,
    transparent calc(100% - var(--underline-thickness)),
    var(--underline-bg) 0
  );
}

/* -------- Card -------- */
.step{
  position: relative;
  padding-left: 22px; /* filet gauche */
}
.step::before{
  content: "";
  position: absolute;
  left: 0; top: .35rem; bottom: .6rem;
  width: 1px;
  background: var(--line);
}

/* -------- Tête : chiffres + titres (même style) -------- */
.step__head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: .5rem;
}

/* Applique exactement la même typo aux chiffres et aux h3 */
.step__num,
.step__title{
  font-family: var(--font-step-head);
  font-weight: var(--w-normal);
  font-size: var(--fs-step-head);
  line-height: 1.15;
  text-transform: uppercase; /* retire si tu ne veux pas tout en caps */
  letter-spacing: .02em;
  margin: 0;
}

.step__num{ font-size: var(--fs-step-num); line-height: 1; }
.step .slash{ padding-left: .1em; }

/* -------- Corps -------- */
.step__body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  font-weight: var(--w-body);   /* <<< AJOUT : texte très fin */
}
.step__body p{ margin: .35rem 0; }
.step__body em{ color: var(--muted); }
.step__note{ color: var(--muted); font-size: .95em; }

/* Dernière carte large */
.step--wide{
  grid-column: 1 / -1;
  max-width: 58%;
  margin-inline: auto;
}









#testimonials {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 0;
  background: #fff;
}

.testimonial-container {
  position: relative;
  width: 80%;
  max-width: 1100px;
  display: flex;
  align-items: center;
}

.testimonial-slider {
  display: flex;
  gap: 20px;
  overflow: hidden;
  scroll-behavior: smooth;
}

.testimonial-card {
  flex: 0 0 300px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testimonial-header img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.testimonial-header h3 {
  margin: 0;
  font-size: 18px;
}

.testimonial-header span {
  font-size: 14px;
  color: #777;
}

.testimonial-stars {
  color: #f5a623;
  font-size: 18px;
  margin: 10px 0;
}

.testimonial-card p {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.arrow {
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  color: #333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.arrow.left {
  left: -40px;
}

.arrow.right {
  right: -40px;
}


#section7 {
    display: flex;
    flex-wrap: wrap;        
    justify-content: center; 
    background-color: #eae6d7;
}

#section7 img {
  width: 600px;   /* largeur fixe */
  height: auto;   /* garde les proportions */
  max-width: 100%; /* évite que l'image dépasse du conteneur */
  display: block;  /* évite les petits espaces sous l’image */
  margin: 0 auto; /* centre l’image */
}


#section8{
    background-color: #fff;
}

/* Footer */
/*************** FOOTER 1 ****************/
#footer1{
  background-color: #000;
  color: #fff;
  width: 100%;
  /* plus de height fixe */
  padding: 24px 40px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;   /* gauche / centre / droite */
  gap: 24px;
  flex-wrap: wrap;                  /* autorise le retour à la ligne si besoin */
}

#footer1 .footer-block1,
#footer1 .footer-block2{
  max-width: 320px;
  text-decoration: none;
}

#footer1 .footer-block1{ text-align: left; }
#footer1 .footer-block2{ text-align: right; color:#fff; }

#footer1 .footer-logo{
  text-align: center;
  flex: 1;                          /* prend l’espace restant pour centrer */
}
#footer1 .footer-logo img{
  height: 55px;
  width: auto;
  display: inline-block;
}

/*************** FOOTER 2 ****************/
#footer2{
  background-color: #eae6d7;
  color: #000;
  width: 100%;
  /* plus de height fixe */
  padding: 12px 20px;
  font-size: 14px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;          /* centre le texte */
  position: relative;               /* pour placer les icônes en desktop */
  gap: 12px;
  text-align: center;
}

#footer2 span{
  flex: 1;                          /* occupe la largeur pour un vrai centrage */
}

#footer2 a{
  color:#000;
  text-decoration: none;
}

#footer2 .social-icons{
  display: flex;
  gap: 10px;
  position: absolute;
  right: 20px;                      /* collé à droite en desktop */
  top: 50%;
  transform: translateY(-50%);
}

#footer2 .social-icons a{
  color: #000;
  font-size: 30px;
  transition: color .2s, transform .2s;
}
#footer2 .social-icons a:hover{
  transform: scale(1.2);
}

/*************** LIENS GÉNÉRAUX **********/
footer a{
  color: inherit;                   /* garde la couleur du parent */
  text-decoration: none;
}
footer a:hover{
  color: #ccc;
  text-decoration: none;
}

/*************** RESPONSIVE **************/

/* Tablette */
@media (max-width: 992px){
  #footer1{ padding: 20px 24px; gap: 16px; }
  #footer1 .footer-block1,
  #footer1 .footer-block2{ max-width: 280px; }

  #footer1 .footer-logo img{ height: 50px; }
}

@media (max-width: 600px) {
  #footer1 .footer-logo img {
    height: 10px;  /* taille compacte pour mobile */
  }
} 


/* Mobile */
@media (max-width: 600px){
  /* Footer 1 : empilement + centrage */
  #footer1{
    padding: 20px 16px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }
  #footer1 .footer-block1,
  #footer1 .footer-block2{
    max-width: 100%;
    text-align: center;             /* uniformise l’alignement */
  }
  #footer1 .footer-logo img{ height: 46px; }

  /* Footer 2 : tout centré, icônes sous le texte */
  #footer2{
    padding: 14px 16px 18px;
    flex-direction: column;
    gap: 10px;
  }
  #footer2 span{
    flex: 0 0 auto;
    width: 100%;
    order: 1;
  }
  #footer2 .social-icons{
    position: static;               /* plus d'absolu */
    transform: none;
    justify-content: center;
    order: 2;
  }
}





/* ================== #cuisine — FIX ULTIME (force 3 horizontales) ================== */
/* Réglages rapides */
:root{
  --fix-gap: 24px;             /* espace entre vignettes */
  --fix-img-height: 20px;      /* ex: 260px pour hauteur fixe */
  --fix-img-ratio: 16 / 10;    /* ignoré si hauteur fixe */
  --fix-img-fit: cover;        /* cover = crop élégant | contain = tout voir */
  --fix-radius: 10px;
}

/* 1) On purge tout ce qui traîne puis on REdéclare proprement */
#cuisine .cuisine__grid{
  all: unset !important;                 /* purge TOTALLE des styles hérités */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;  /* 3 colonnes */
  gap: var(--fix-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  list-style: none !important;
}

#cuisine .cuisine__grid > li{
  all: unset !important;
  display: block !important;
  list-style: none !important;
}

/* 2) Carte / figure */
#cuisine .cuisine__figure{
  all: unset !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;          /* mets 'visible' si tu veux laisser dépasser */
  border-radius: var(--fix-radius) !important;
  background: #f4f4f4 !important;
}

/* 3) Image : remplit sa cellule, taille contrôlable */
#cuisine .cuisine__figure img{
  all: unset !important;
  display: block !important;
  width: 100% !important;

  /* Choisis : hauteur fixe OU ratio */
  height: var(--fix-img-height) !important;      /* ex: 260px */
  aspect-ratio: var(--fix-img-ratio) !important; /* utilisé si height = auto */

  object-fit: var(--fix-img-fit) !important;
  object-position: center !important;
}

/* 4) Légende au survol (si utilisée) */
#cuisine .cuisine__caption{
  all: unset !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 1.1rem !important;
  color: #fff !important;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.45)) !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity .25s ease, transform .25s ease !important;
  pointer-events: none !important;
}
#cuisine .cuisine__figure:hover .cuisine__caption{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 5) Ceinture & bretelles : si un style impose flex/float, on neutralise quand même */
#cuisine .cuisine__grid{
  float: none !important;
  clear: none !important;
  flex: none !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* 6) Fallback ultime si un moteur casse Grid : on force 3 colonnes en floats */
@supports not (display: grid){
  #cuisine .cuisine__grid{ display: block !important; }
  #cuisine .cuisine__grid > li{
    float: left !important;
    width: calc((100% - 2 * var(--fix-gap)) / 3) !important;
    margin-right: var(--fix-gap) !important;
    margin-bottom: var(--fix-gap) !important;
  }
  #cuisine .cuisine__grid > li:nth-child(3n){ margin-right: 0 !important; }
  #cuisine .cuisine__grid::after{ content:""; display:block; clear:both; }
}


























































/* ===== Mobile : logo centré + menu en une seule ligne ===== */
@media (max-width: 768px) {
  #section1 { 
    /* Variables personnalisables */
    --logo-mobile-size: 30px;     /* taille logo */
    --menu-font-size: 22px;       /* taille texte */
    --menu-gap: 5px;             /* espace entre les liens */

    height: auto;
    padding: 20px 12px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Logo centré et ajustable */
  #section1 img {
    position: static;
    transform: none;
    height: var(--logo-mobile-size);
    width: auto;
    margin: 0 auto 14px;
  }

  /* Menu */
  #section1 nav {
    position: static;
    transform: none;
    width: 100%;
    margin: 0;
  }

  #section1 nav ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;      /* centrés */
    align-items: center;
    gap: var(--menu-gap);         /* espace entre items réglable */
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #section1 nav ul li {
    list-style: none;
    flex: 0 1 auto;
  }

  #section1 nav ul li a {
    display: block;
    text-align: center;
    white-space: nowrap;
    font-family: "Raleway", system-ui, sans-serif;
    font-size: var(--menu-font-size); /* taille réglable */
    line-height: 1.2;
    color: #111;
    text-decoration: none;
    padding: 6px 2px;
  }

  #section1 nav ul li a:hover {
    color: #555;
  }
}




@media (max-width: 768px) {
  #section2 img {
    --mobile-max-height: 280px;  /* tu peux changer la valeur */
    width: 100%;
    height: var(--mobile-max-height);
    object-fit: cover;           /* l’image remplit, recadrée */
  }
}


/* === Responsive : tablette et mobile === */
@media (max-width: 1024px) {
  #section3 {
    padding: 40px 20px;
    row-gap: 24px;
  }

  /* Image centrale plus fluide */
  #section3 .img-centree {
    max-width: 90%;
  }

  /* Blocs latéraux replacés sous l’image */
  #section3 .bloc-texte1,
  #section3 .bloc-texte2 {
    position: static;     /* plus d’absolu */
    text-align: center;
    max-width: 100%;
    margin: 24px auto 0;
  }

  #section3 .bloc-texte1 h2,
  #section3 .bloc-texte2 h2 {
    font-size: 22px;
  }

  #section3 .bloc-texte1 p,
  #section3 .bloc-texte2 p {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Logos décoratifs plus petits et centrés */
  #section3 .img-logo1,
  #section3 .img-logo2 {
    position: static;
    display: block;
    margin: 30px auto;
    width: 120px;
  }
}

/* === Responsive : tablette et mobile === */
@media (max-width: 1024px) {
  #section3 {
    padding: 40px 20px;
    row-gap: 24px;
  }

  /* Image centrale fluide */
  #section3 .img-centree {
    max-width: 90%;
  }

  /* Blocs latéraux deviennent centrés et empilés */
  #section3 .bloc-texte1,
  #section3 .bloc-texte2 {
    position: static;     /* supprime le positionnement absolu */
    text-align: center;
    max-width: 100%;
    margin: 24px auto 0;
  }

  #section3 .bloc-texte1 h2,
  #section3 .bloc-texte2 h2 {
    font-size: 22px;
  }

  #section3 .bloc-texte1 p,
  #section3 .bloc-texte2 p {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Icônes masquées */
  #section3 .img-logo1,
  #section3 .img-logo2 {
    display: none;
  }
}

@media (max-width: 600px) {
  #section3 {
    padding: 32px 16px;
  }

  #section3 .bloc-haut p,
  #section3 .bloc-bas p {
    font-size: 14px;
    line-height: 1.6;
  }

  #section3 .bloc-texte1 h2,
  #section3 .bloc-texte2 h2 {
    font-size: 18px;
  }

  #section3 .img-centree {
    max-width: 100%;
  }
}

/* ============================
   Responsive Section 4 : mobile
   ============================ */
@media (max-width: 600px) {
  #section4 {
    --columns: 1;           /* 1 seule colonne */
    --pad-x: 20px;          /* padding autour */
    --pad-y: 40px;
    --card-w: 100%;
    --card-h: auto;
    --icon-size: 120px;     /* taille icône */
    --title-size: 16px;     /* texte plus lisible */
    --text-size: 14px;
    
    background: #f5f0e3;    /* 👉 fond uniforme sur toute la section */
    text-align: center;
  }

  /* Cartes : supprimons l'effet “boîte” */
  #section4 .image-container {
    background: transparent;  /* pas de fond différent */
    box-shadow: none;         /* pas d’ombre */
    border-radius: 0;
    padding: 20px 10px;
    width: 100%;
    align-items: center;
  }

  /* Icône centrée */
  #section4 .image-container img {
    width: var(--icon-size);
    margin: 0 auto 14px;  /* espace sous l’icône */
  }

  /* Texte centré sous l’icône */
  #section4 .titre {
    margin-bottom: 8px;
    font-size: var(--title-size);
    font-weight: 700;
  }

  #section4 .texte {
    font-size: var(--text-size);
    line-height: 1.6;
    max-width: 90%;
    margin: 0 auto;
  }
}










/* ============================
   Responsive Steps (mobile)
   ============================ */
@media (max-width: 600px) {
  .steps {
    --pad-x: 20px;       /* marges latérales réduites */
    --pad-y: 40px;
    --gap: 40px;

    text-align: center;  /* tout centré */
    padding: var(--pad-y) var(--pad-x);
  }

  /* Grille devient 1 seule colonne */
  .steps__grid {
    grid-template-columns: 1fr;
    gap: var(--gap);
    justify-items: center;   /* centre les cartes */
  }

  /* Chaque carte prend toute la largeur dispo */
  .step {
    padding-left: 0;         /* supprime le filet gauche */
    position: relative;
    max-width: 90%;          /* largeur confortable */
  }
  .step::before {
    display: none;           /* pas de trait vertical */
  }

  /* Titre général */
  .steps__heading {
    font-size: clamp(20px, 6vw, 26px);
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Numéro + titre → centrés et empilés */
  .step__head {
    justify-content: center;
    flex-direction: column;
    gap: 6px;
  }
  .step__num,
  .step__title {
    font-size: clamp(16px, 5vw, 20px);
    text-align: center;
  }

  /* Texte */
  .step__body {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }

  /* Carte large = pleine largeur */
  .step--wide {
    max-width: 100%;
    margin: 0 auto;
  }
}









/* ===== Responsive Testimonials ===== */
@media (max-width: 768px) {
  .testimonial-container {
    width: 100%;
    padding: 0 20px;
  }

  .testimonial-slider {
    gap: 0;                    /* pas d’espace entre cartes */
    overflow-x: auto;           /* scroll horizontal (swipe) */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .testimonial-card {
    flex: 0 0 100%;             /* chaque avis occupe 100% de la largeur */
    scroll-snap-align: center;  /* l’avis se centre à l’arrêt */
    border-radius: 12px;
    padding: 16px;
    margin: 0 5px;
  }

  .testimonial-header h3 {
    font-size: 16px;
  }

  .testimonial-card p {
    font-size: 13px;
  }

  /* Flèches masquées sur mobile (swipe suffit) */
  .arrow {
    display: none;
  }
}






@media (max-width: 768px) {
  #section7 {
    flex-direction: column;       /* tout en colonne */
    align-items: center;          /* centre les images */
    padding: 32px 16px;           /* marges internes réduites */
    gap: 16px;                    /* espace plus petit entre images */
  }

  #section7 img {
    width: 100%;                  /* pleine largeur */
    max-width: 100%;
    border-radius: 4px;           /* arrondi plus discret */
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }
}





/* ===== Mobile : logo centré + menu en une seule ligne ===== */
@media (max-width: 768px) {
  #section1 { 
    /* Variables personnalisables */
    --logo-mobile-size: 30px;     /* taille logo */
    --menu-font-size: 10px;       /* taille texte */
    --menu-gap: 1px;             /* espace entre les liens */

    height: auto;
    padding: 20px 12px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Logo centré et ajustable */
  #section1 img {
    position: static;
    transform: none;
    height: var(--logo-mobile-size);
    width: auto;
    margin: 0 auto 14px;
  }

  /* Menu */
  #section1 nav {
    position: static;
    transform: none;
    width: 100%;
    margin: 0;
  }

  #section1 nav ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;      /* centrés */
    align-items: center;
    gap: var(--menu-gap);         /* espace entre items réglable */
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #section1 nav ul li {
    list-style: none;
    flex: 0 1 auto;
  }

  #section1 nav ul li a {
    display: block;
    text-align: center;
    white-space: nowrap;
    font-family: "Raleway", system-ui, sans-serif;
    font-size: var(--menu-font-size); /* taille réglable */
    line-height: 1.2;
    color: #111;
    text-decoration: none;
    padding: 6px 2px;
  }

  #section1 nav ul li a:hover {
    color: #555;
  }
}




@media (max-width: 768px) {
  #section2 img {
    --mobile-max-height: 280px;  /* tu peux changer la valeur */
    width: 100%;
    height: var(--mobile-max-height);
    object-fit: cover;           /* l’image remplit, recadrée */
  }
}


/* === Responsive : tablette et mobile === */
@media (max-width: 1024px) {
  #section3 {
    padding: 40px 20px;
    row-gap: 24px;
  }

  /* Image centrale plus fluide */
  #section3 .img-centree {
    max-width: 90%;
  }

  /* Blocs latéraux replacés sous l’image */
  #section3 .bloc-texte1,
  #section3 .bloc-texte2 {
    position: static;     /* plus d’absolu */
    text-align: center;
    max-width: 100%;
    margin: 24px auto 0;
  }

  #section3 .bloc-texte1 h2,
  #section3 .bloc-texte2 h2 {
    font-size: 22px;
  }

  #section3 .bloc-texte1 p,
  #section3 .bloc-texte2 p {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Logos décoratifs plus petits et centrés */
  #section3 .img-logo1,
  #section3 .img-logo2 {
    position: static;
    display: block;
    margin: 30px auto;
    width: 120px;
  }
}

/* === Responsive : tablette et mobile === */
@media (max-width: 1024px) {
  #section3 {
    padding: 40px 20px;
    row-gap: 24px;
  }

  /* Image centrale fluide */
  #section3 .img-centree {
    max-width: 90%;
  }

  /* Blocs latéraux deviennent centrés et empilés */
  #section3 .bloc-texte1,
  #section3 .bloc-texte2 {
    position: static;     /* supprime le positionnement absolu */
    text-align: center;
    max-width: 100%;
    margin: 24px auto 0;
  }

  #section3 .bloc-texte1 h2,
  #section3 .bloc-texte2 h2 {
    font-size: 22px;
  }

  #section3 .bloc-texte1 p,
  #section3 .bloc-texte2 p {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Icônes masquées */
  #section3 .img-logo1,
  #section3 .img-logo2 {
    display: none;
  }
}

@media (max-width: 600px) {
  #section3 {
    padding: 32px 16px;
  }

  #section3 .bloc-haut p,
  #section3 .bloc-bas p {
    font-size: 14px;
    line-height: 1.6;
  }

  #section3 .bloc-texte1 h2,
  #section3 .bloc-texte2 h2 {
    font-size: 18px;
  }

  #section3 .img-centree {
    max-width: 100%;
  }
}

/* ============================
   Responsive Section 4 : mobile
   ============================ */
@media (max-width: 600px) {
  #section4 {
    --columns: 1;           /* 1 seule colonne */
    --pad-x: 20px;          /* padding autour */
    --pad-y: 40px;
    --card-w: 100%;
    --card-h: auto;
    --icon-size: 120px;     /* taille icône */
    --title-size: 16px;     /* texte plus lisible */
    --text-size: 14px;
    
    background: #f5f0e3;    /* 👉 fond uniforme sur toute la section */
    text-align: center;
  }

  /* Cartes : supprimons l'effet “boîte” */
  #section4 .image-container {
    background: transparent;  /* pas de fond différent */
    box-shadow: none;         /* pas d’ombre */
    border-radius: 0;
    padding: 20px 10px;
    width: 100%;
    align-items: center;
  }

  /* Icône centrée */
  #section4 .image-container img {
    width: var(--icon-size);
    margin: 0 auto 14px;  /* espace sous l’icône */
  }

  /* Texte centré sous l’icône */
  #section4 .titre {
    margin-bottom: 8px;
    font-size: var(--title-size);
    font-weight: 700;
  }

  #section4 .texte {
    font-size: var(--text-size);
    line-height: 1.6;
    max-width: 90%;
    margin: 0 auto;
  }
}










/* ============================
   Responsive Steps (mobile)
   ============================ */
@media (max-width: 600px) {
  .steps {
    --pad-x: 20px;       /* marges latérales réduites */
    --pad-y: 40px;
    --gap: 40px;

    text-align: center;  /* tout centré */
    padding: var(--pad-y) var(--pad-x);
  }

  /* Grille devient 1 seule colonne */
  .steps__grid {
    grid-template-columns: 1fr;
    gap: var(--gap);
    justify-items: center;   /* centre les cartes */
  }

  /* Chaque carte prend toute la largeur dispo */
  .step {
    padding-left: 0;         /* supprime le filet gauche */
    position: relative;
    max-width: 90%;          /* largeur confortable */
    margin: 0 auto;          /* centrage horizontal */
    text-align: center;      /* contenu centré */
  }
  .step::before {
    display: none;           /* pas de trait vertical */
  }

  /* Titre général */
  .steps__heading {
    font-size: clamp(20px, 6vw, 26px);
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: none !important;   /* supprime le surlignement */
    -webkit-text-fill-color: inherit; /* au cas où surlignement via webkit */
  }

  /* Numéro + titre → centrés et empilés */
  .step__head {
    justify-content: center;
    flex-direction: column;
    gap: 6px;
  }
  .step__num,
  .step__title {
    font-size: clamp(16px, 5vw, 20px);
    text-align: center;
  }

  /* Texte */
  .step__body {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }

  /* Carte large = pleine largeur */
  .step--wide {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}










/* ===== Responsive Testimonials ===== */
@media (max-width: 768px) {
  .testimonial-container {
    width: 100%;
    padding: 0 20px;
  }

  .testimonial-slider {
    gap: 0;                    /* pas d’espace entre cartes */
    overflow-x: auto;           /* scroll horizontal (swipe) */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .testimonial-card {
    flex: 0 0 100%;             /* chaque avis occupe 100% de la largeur */
    scroll-snap-align: center;  /* l’avis se centre à l’arrêt */
    border-radius: 12px;
    padding: 16px;
    margin: 0 5px;
  }

  .testimonial-header h3 {
    font-size: 16px;
  }

  .testimonial-card p {
    font-size: 13px;
  }

  /* Flèches masquées sur mobile (swipe suffit) */
  .arrow {
    display: none;
  }
}




@media (max-width: 768px) {
    #section7 {
        flex-direction: column; /* empile les images */
        align-items: center;
    }

    #section7 img {
        max-width: 90%; /* prend presque toute la largeur */
    }
}

/* Écrans moyens (tablettes) */
@media (min-width: 769px) and (max-width: 1200px) {
    #section7 img {
        max-width: 45%; /* 2 images par ligne */
    }
}