@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');






#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%);
}

/* ===== Bandeau catégories ===== */
#bandeau{
  /* --- règle ce que tu veux ici --- */
  --band-h: 56px;             /* <<< hauteur de la bande */
  --band-bg: #eae6d7;         /* couleur de fond */
  --band-color: #1a1a1a;      /* couleur du texte */
  --band-fs: 20px;  /* taille du texte */
  --band-tracking: .14em;     /* espacement des lettres */
  --band-uppercase: uppercase;/* uppercase | none */

  display: flex;
  align-items: center;        /* centre verticalement */
  justify-content: center;    /* centre horizontalement */
  min-height: var(--band-h);  /* hauteur de la bande */
  padding: 0 16px;            /* marges latérales */
  background: var(--band-bg);
  color: var(--band-color);
}

#bandeau p{
  margin: 0;
  font-size: var(--band-fs);
  letter-spacing: var(--band-tracking);
  text-transform: var(--band-uppercase);
  text-align: center;
}



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



/* 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 — grille 3 colonnes + modale (cadre supprimé) ====== */
#cuisine{
  /* Grille */
  --cols: 3;
  --gap-x: 28px; --gap-y: 28px;
  --maxw: 1400px; --pad-x: 24px; --pad-y: 24px;

  /* Vignettes */
  --thumb-ratio: 16/10;     /* si --thumb-height = auto */
  --thumb-height: auto;     /* mets 260px pour une hauteur fixe */
  --thumb-fit: cover;       /* cover = crop, contain = tout voir */

  /* Modale */
  --modal-w: min(1100px, 92vw);
  --modal-gap: 32px;        /* espace image/texte */
  --modal-left: 58%;        /* largeur colonne image */
  --modal-pad: 28px 40px;

  /* (ex-cadre du slider – on laisse les variables mais on neutralise) */
  --frame-color: transparent;
  --frame-width: 0px;
  --frame-bg: transparent;

  /* Flèches */
  --nav-size: 40px;
}

/* ===== Grille ===== */
#cuisine .cuisine__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}

#cuisine .cuisine__grid{
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  margin: 0; padding: 0; list-style: none;
}

#cuisine .cuisine__card{ list-style: none; cursor: pointer; }
#cuisine .cuisine__figure{ margin: 0; position: relative; }
#cuisine .cuisine__figure img{
  width: 100%; display: block;
  aspect-ratio: var(--thumb-ratio);
  height: var(--thumb-height);
  object-fit: var(--thumb-fit);
  border-radius: 0;              /* pas d’arrondi */
}

/* ===== Modale ===== */
.cui-modal{
  position: fixed; inset: 0; z-index: 9999;
  display: none;                  /* cachée par défaut */
}
.cui-modal[aria-hidden="false"]{
  display: flex;                  /* centrage parfait */
  align-items: center;
  justify-content: center;
  padding: 4vh 0;                 /* petite marge de respiration */
}

.cui-modal__overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
}

.cui-modal__dialog{
  position: relative;
  width: var(--modal-w);
  max-height: min(900px, 92vh);
  height: auto;
  margin: 0;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;               /* rien ne sort de la boîte */
  display: grid;
}

.cui-modal__close{
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; font-size: 32px; cursor: pointer;
}

.cui-modal__content{
  display: grid;
  grid-template-columns: var(--modal-left) 1fr;
  gap: var(--modal-gap);
  padding: var(--modal-pad);
  height: clamp(520px, 72vh, 820px); /* hauteur utile bornée */
  box-sizing: border-box;
}

/* ===== Slider gauche — SANS CADRE, SANS DÉPASSEMENT ===== */
.cui-modal__left{ min-width: 0; height: 100%; display: flex; }
.cui-slider{
  flex: 1 1 auto;
  height: 100%; width: 100%;
  overflow: hidden;                               /* coupe net */
  background: transparent;                        /* ⟵ plus de fond gris */
  border: 0;                                      /* ⟵ plus de bordure */
  box-sizing: border-box;
  position: relative;
}
.cui-slider__track{
  height: 100%; width: 100%;
  display: flex;
  transition: transform .35s ease;
}
.cui-slider__track img{
  flex: 0 0 100%;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;                             /* ⟵ ne dépasse jamais */
  /* ASTUCE : mets `cover` ici si tu veux remplir sans bandes :
     object-fit: cover; */
  object-position: center;
}

/* Flèches uniquement */
.cui-slider__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--nav-size); height: var(--nav-size);
  border: 0; background: #fff; color:#000; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  font-size: 24px; line-height: var(--nav-size); text-align: center;
}
.cui-slider__prev{ left: 12px; }
.cui-slider__next{ right: 12px; }

/* ===== Colonne droite (texte) ===== */
.cui-modal__right{ overflow: auto; padding-right: 6px; }
.cui-modal__right h3{ margin: 0 0 .35rem; font-weight: 600; letter-spacing: .02em; }
.cui-subtitle{ margin: 0 0 1rem; color: #666; }
.cui-desc{ margin: 0; line-height: 1.6; color: #222; }





/* ===== Section “flèche” — tout paramétrable par variables ===== */
#section_fleche{
  /* ——— CONTAINER ——— */
  --maxw: 1000px;
  --pad-x: 72px;                 /* marges latérales */
  --pad-y: 120px;                /* marges verticales */
  --gap: 10px;                   /* espace entre les 3 blocs */
  --wrap: nowrap;                /* nowrap | wrap */
  --valign: center;              /* top | center | baseline | stretch */

  /* ——— ORDRE / LARGEURS ——— */
  --order-left: 1;
  --order-arrow: 2;
  --order-right: 3;

  /* base/largeur mini/maxi de chaque bloc */
  --left-basis: 52ch;            /* largeur “idéale” bloc gauche */
  --left-min: 20ch;
  --left-max: 60ch;

  --right-basis: 32ch;           /* largeur “idéale” bloc droite */
  --right-min: 18ch;
  --right-max: 40ch;

  /* ——— TYPO ——— */
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-title: "Ravlys", sans-serif;

  --fs-left: clamp(13px, 1.0vw, 16px);      /* texte gauche */
  --lh-left: 1.55;

  --fs-title: clamp(20px, 2.0vw, 30px);     /* titre droite */
  --ls-title: .02em;
  --lh-title: 1.15;
  --title-transform: uppercase;             /* uppercase | none */
  --title-mb: .35rem;                       /* espace sous titre */

  --fs-sub: clamp(12px, 1.0vw, 16px);       /* sous-titre droite */
  --ls-sub: .03em;
  --lh-sub: 1.4;

  /* ——— FLÈCHE ——— */
  --arrow-w: 220px;                         /* taille flèche */
  --arrow-rotate: 0deg;                     /* rotation */
  --arrow-offset-y: 0px;                    /* décalage vertical */
  --arrow-offset-x: 0px;                    /* décalage horizontal */

  /* ——— COULEURS ——— */
  --ink: #111;
  --muted: #767676;

  /* ——— SOULIGNÉ DU TITRE ——— */
  --underline-bg: #efe8d2;
  --underline-thickness: 8px;               /* 0 = désactivé */
  --underline-offset: 0.88em;               /* position verticale */
}

/* Conteneur principal (FLEX robuste) */
#section_fleche.fleche-layout{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  align-items: var(--valign);
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: var(--wrap);
  color: var(--ink);
}

/* —— G A U C H E —— */
#section_fleche .zone-left{
  order: var(--order-left);
  flex: 1 1 var(--left-basis);
  min-width: var(--left-min);
  max-width: var(--left-max);
  font-family: var(--font-body);
  font-size: var(--fs-left);
  line-height: var(--lh-left);
  font-weight: 300;
  margin: 0;
  overflow-wrap: anywhere;  /* anti-coupure */
  min-height: 0;            /* flex overflow fix */
}

/* —— F L È C H E —— */
#section_fleche .zone-center.arrow{
  order: var(--order-arrow);
  flex: 0 0 auto;
  width: var(--arrow-w);
  max-width: 100%;
  height: auto;
  display: block;
  transform: translate(var(--arrow-offset-x), var(--arrow-offset-y))
             rotate(var(--arrow-rotate));
}

/* —— D R O I T E —— */
#section_fleche .zone-right{
  order: var(--order-right);
  flex: 1 1 var(--right-basis);
  min-width: var(--right-min);
  max-width: var(--right-max);
  overflow-wrap: anywhere;
  min-height: 0;
}

/* Titre */
#section_fleche .zone-right .title{
  display: inline;
  font-family: var(--font-title);
  font-size: var(--fs-title);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
  text-transform: var(--title-transform);
  margin: 0 0 var(--title-mb) 0;
  /* Souligné “bandeau” (met --underline-thickness:0 pour désactiver) */
  background: linear-gradient(
    to bottom,
    transparent calc(100% - var(--underline-thickness)),
    var(--underline-bg) 0
  );
}

/* Sous-titre */
#section_fleche .zone-right .subtitle{
  display: block;
  margin: .25rem 0 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sub);
  letter-spacing: var(--ls-sub);
  line-height: var(--lh-sub);
  color: var(--muted);
  text-transform: none;
}

/* ——— UTILITAIRES (tu peux combiner) ——— */
/* Centrer verticalement + tout sur 1 ligne */
#section_fleche.is-center { --valign: center; --wrap: nowrap; }
/* Aligner en haut */
#section_fleche.is-top    { --valign: flex-start; }
/* Inverser l’ordre (droite ↔ gauche) */
#section_fleche.is-reverse{
  --order-left: 3; --order-arrow: 2; --order-right: 1;
}
/* Rétrécir ou élargir rapidement les colonnes */
#section_fleche.is-narrow  { --left-max: 46ch; --right-max: 28ch; }
#section_fleche.is-wide    { --left-max: 64ch; --right-max: 44ch; }




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


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













/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Raleway:wght@400;500;600&display=swap");

/* ===== Variables d’uniformisation ===== */
:root{
  --proj-ratio: 16 / 9;   /* ratio mobile */
  --proj-height-md: 280px;/* hauteur commune tablette/desktop */
}

/* Conteneur */
.projects-section {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}

/* Projet */
.project-item {
  display: flex;
  flex-direction: column;    /* image en haut, texte en dessous (mobile first) */
  flex: 1 1 100%;
  gap: 18px;
  min-width: 280px;
}

/* Image (mobile: ratio uniforme) */
.project-image {
  width: 100%;
  aspect-ratio: var(--proj-ratio);
  margin: 0;
  overflow: hidden;
}
.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* Texte aligné à gauche */
.project-details {
  width: 100%;
  text-align: left;
  font-family: "Raleway", sans-serif;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

/* Titre */
.project-details h3 {
  margin: 0 0 12px;
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 600;
}

/* Infos */
.project-details p {
  margin: 6px 0;
  font-size: 15px;
  color: #222;
}
.project-details p strong {
  font-weight: 600;
  color: #111;
  margin-right: 4px;
}

/* Bouton */
.project-details a {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 16px;
  background: #EFE6CF;
  color: #111;
  text-decoration: none;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  transition: filter .15s ease;
}
.project-details a:hover { filter: brightness(0.95); }

/* =========================
   Responsive amélioré
   ========================= */

/* Mobiles (≤ 640px) : image plein écran + texte dessous */
@media (max-width: 640px) {
  .projects-section {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .project-item {
    display: block;       /* casse le flex → pile image + texte */
    width: 100%;
    min-width: 0;
    gap: 16px;
  }

  /* Image bord à bord (full-bleed) */
  .project-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: var(--proj-ratio); /* uniformise la hauteur */
    display: block;
  }
  .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Texte visible et confortable */
  .project-details {
    padding: 16px;
  }
}

/* Tablette intermédiaire (641px – 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  .projects-section { padding-left: 12px; padding-right: 12px; }

  .project-item {
    display: flex;
    flex-direction: row;    /* 2 colonnes */
    align-items: flex-start;
    gap: 28px;
    flex: 1 1 calc(50% - 25px);
    min-width: 0;           /* évite le débordement */
  }

  /* Images : même hauteur sur toutes les cartes */
  .project-image {
    flex: 0 0 58%;
    height: var(--proj-height-md);
    aspect-ratio: auto;     /* la hauteur fixe prime */
  }
  .project-image img {
    height: 100%;
    object-fit: cover;
  }

  .project-details { flex: 1; padding: 0; }
}

/* Desktop (≥ 1025px) : deux colonnes + même hauteur d’image */
@media (min-width: 1025px) {
  .project-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
    flex: 1 1 calc(50% - 25px);
    min-width: 0;
  }
  .project-image {
    flex: 0 0 58%;
    height: var(--proj-height-md);
    aspect-ratio: auto;
  }
  .project-image img { height: 100%; object-fit: cover; }
  .project-details { flex: 1; padding: 0; }
}









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

































/* ===== 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) {
  #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: 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;
  }
}

/* ============================
   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;
  }
}
/* Tablettes */
@media (max-width: 1024px) {
  #bandeau {
    --band-h: 50px;
    padding: 0 12px;
  }
  #bandeau p {
    font-size: 18px;
    letter-spacing: .12em;
  }
}

/* Mobiles */
@media (max-width: 600px) {
  #bandeau {
    --band-h: auto;     /* hauteur s’adapte au texte */
    padding: 8px 10px;
  }
  #bandeau p {
    font-size: 16px;
    letter-spacing: .1em;
    white-space: normal; /* autorise le retour à la ligne */
    word-break: break-word;
  }
}













/* ====== #cuisine — grille 3 colonnes + modale (cadre supprimé) ====== */
#cuisine{
  /* Grille */
  --cols: 3;
  --gap-x: 28px; --gap-y: 28px;
  --maxw: 1400px; --pad-x: 24px; --pad-y: 24px;

  /* Vignettes */
  --thumb-ratio: 16/10;     /* si --thumb-height = auto */
  --thumb-height: auto;     /* mets 260px pour une hauteur fixe */
  --thumb-fit: cover;       /* cover = crop, contain = tout voir */

  /* Modale */
  --modal-w: min(1100px, 92vw);
  --modal-gap: 32px;        /* espace image/texte */
  --modal-left: 58%;        /* largeur colonne image */
  --modal-pad: 28px 40px;

  /* (ex-cadre du slider – on laisse les variables mais on neutralise) */
  --frame-color: transparent;
  --frame-width: 0px;
  --frame-bg: transparent;

  /* Flèches */
  --nav-size: 40px;
}

/* ===== Grille ===== */
#cuisine .cuisine__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}

#cuisine .cuisine__grid{
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  margin: 0; padding: 0; list-style: none;
}

#cuisine .cuisine__card{ list-style: none; cursor: pointer; }
#cuisine .cuisine__figure{ margin: 0; position: relative; }
#cuisine .cuisine__figure img{
  width: 100%; display: block;
  aspect-ratio: var(--thumb-ratio);
  height: var(--thumb-height);
  object-fit: var(--thumb-fit);
  border-radius: 0;              /* pas d’arrondi */
}

/* ===== Modale ===== */
.cui-modal{
  position: fixed; inset: 0; z-index: 9999;
  display: none;                  /* cachée par défaut */
}
.cui-modal[aria-hidden="false"]{
  display: flex;                  /* centrage parfait */
  align-items: center;
  justify-content: center;
  padding: 4vh 0;                 /* petite marge de respiration */
}

.cui-modal__overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
}

.cui-modal__dialog{
  position: relative;
  width: min(var(--modal-w), 100vw);
  max-width: 100vw;
  box-sizing: border-box;
  max-height: min(900px, 92vh);
  height: auto;
  margin: 0;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;               /* rien ne sort de la boîte */
  display: grid;
}

.cui-modal__close{
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; font-size: 32px; cursor: pointer;
}

.cui-modal__content{
  display: grid;
  grid-template-columns: minmax(0, var(--modal-left)) minmax(0, 1fr);
  gap: var(--modal-gap);
  padding: var(--modal-pad);
  height: clamp(520px, 72vh, 820px);
  box-sizing: border-box;
}

.cui-modal__left,
.cui-modal__right{
  min-width: 0; /* évite les dépassements */
}

/* ===== Slider gauche — SANS CADRE, SANS DÉPASSEMENT ===== */
.cui-modal__left{ min-width: 0; height: 100%; display: flex; }
.cui-slider{
  flex: 1 1 auto;
  height: 100%; width: 100%;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  position: relative;
}
.cui-slider__track{
  height: 100%; width: 100%;
  display: flex;
  transition: transform .35s ease;
}
.cui-slider__track img{
  flex: 0 0 100%;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Flèches uniquement */
.cui-slider__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--nav-size); height: var(--nav-size);
  border: 0; background: #fff; color:#000; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  font-size: 24px; line-height: var(--nav-size); text-align: center;
}
.cui-slider__prev{ left: 12px; }
.cui-slider__next{ right: 12px; }

/* ===== Colonne droite (texte) ===== */
.cui-modal__right{ overflow: auto; padding-right: 6px; }
.cui-modal__right h3{ margin: 0 0 .35rem; font-weight: 600; letter-spacing: .02em; }
.cui-subtitle{ margin: 0 0 1rem; color: #666; }
.cui-desc{ margin: 0; line-height: 1.6; color: #222; }

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

/* ≥1600px : grille plus aérée, mini 4 colonnes si espace */
@media (min-width: 1600px) {
  #cuisine { --cols: 4; --gap-x: 32px; --gap-y: 32px; --maxw: 1680px; }
  #cuisine .cuisine__inner { --pad-x: 28px; }
  #cuisine { --modal-w: min(1200px, 88vw); }
}

/* Tablettes (<= 1024px) : 2 colonnes, modale plus compacte */
@media (max-width: 1024px) {
  #cuisine { --cols: 2; --gap-x: 22px; --gap-y: 22px; }
  #cuisine .cuisine__inner { --pad-x: 20px; --pad-y: 22px; }
  #cuisine { --modal-w: min(920px, 94vw); --modal-gap: 24px; --modal-left: 55%; --modal-pad: 22px 24px; }
  .cui-modal__dialog { max-height: 88vh; }
  .cui-slider__nav { --nav-size: 38px; font-size: 22px; }
}

/* Mobiles (<= 640px) : 1 colonne, modale empilée */
@media (max-width: 640px) {
  #cuisine { --cols: 1; --gap-x: 16px; --gap-y: 18px; }
  #cuisine .cuisine__inner { --pad-x: 16px; --pad-y: 18px; }
  #cuisine { --thumb-ratio: 4/3; }

  #cuisine { --modal-w: 96vw; --modal-gap: 14px; --modal-left: 1fr; --modal-pad: 16px; }
  .cui-modal[aria-hidden="false"] { padding: 0; }
  .cui-modal__dialog { width: var(--modal-w); max-height: 96vh; border-radius: 8px; }
  .cui-modal__content {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    height: auto;
  }
  .cui-modal__left { height: auto; }
  .cui-slider { height: auto; max-height: 56vh; }
  .cui-slider__track img { height: auto; max-height: 56vh; }

  .cui-slider__nav {
    --nav-size: 48px;
    font-size: 24px;
  }
  .cui-modal__close { top: 6px; right: 8px; font-size: 28px; }

  .cui-modal__right { padding-right: 2px; }
  .cui-modal__right h3 { font-size: clamp(18px, 5.2vw, 22px); }
  .cui-subtitle { font-size: clamp(14px, 4.2vw, 16px); }
  .cui-desc { font-size: 14px; line-height: 1.65; }
}

/* Accessibilité : réduit les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  .cui-slider__track { transition: none; }
}

/* ===========================
   Correctifs anti-dépassement
   =========================== */
html, body { overflow-x: hidden; }
body.is-modal-open { overflow: hidden; }




















/* =========================
   R E S P O N S I V E
   ========================= */

/* — Tablette (≤ 1024px) — */
@media (max-width: 1024px){
  #section_fleche{
    --pad-x: 40px;
    --pad-y: 80px;
    --gap: 16px;
    --wrap: wrap;
    --left-basis: 48ch;
    --right-basis: 28ch;
    --arrow-w: 160px;
  }
  #section_fleche .zone-center.arrow{
    margin-inline: 12px;
  }
}

/* — Mobile (≤ 640px) — */
@media (max-width: 640px){
  #section_fleche{
    --pad-x: 20px;
    --pad-y: 56px;
    --gap: 20px;
    --wrap: wrap;
    --left-basis: 100%;
    --right-basis: 100%;
    --left-min: 0;
    --right-min: 0;
    --left-max: 62ch;
    --right-max: 62ch;
    --valign: center;
  }

  #section_fleche.fleche-layout{
    justify-content: center;
  }

  #section_fleche .zone-left,
  #section_fleche .zone-right{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* >>> On masque la flèche sur mobile <<< */
  #section_fleche .zone-center.arrow{
    display: none !important;
  }
}

/* — Très petits écrans (≤ 380px) — */
@media (max-width: 380px){
  #section_fleche{
    --pad-x: 14px;
    --gap: 16px;
  }
}

/* Sécurité */
#section_fleche .zone-left,
#section_fleche .zone-right{ min-width: 0; }