/* Bandeau photo fige a 1440px : la vraie balise <img> dans wow-image.bgImage a un style inline width/height en dur */
.bgImage img,
wow-image.bgImage img {
  width: 100% !important;
  height: 100% !important;
}

/* Galerie photo cliquable : agrandissement plein ecran + partage (gallery-lightbox.js).
   Le widget Wix d'origine (like/zoom/partage) dependait de son runtime JS, absent
   de cette capture statique ; ceci est une reimplementation maison, pas un portage. */
.ce-gallery-clickable { cursor: zoom-in; }

.ce-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.ce-lightbox.is-open { display: flex; }
body.ce-lightbox-open { overflow: hidden; }
body.ce-lightbox-open .contact-fab,
body.ce-cookie-open .contact-fab { display: none; }

/* Bouton "Cookies" (mobile-menu.js) : ce site ne depose aucun cookie de mesure
   d'audience/publicite/suivi ; petit point d'information transparent, bas-gauche,
   style repris du contact-fab existant (bas-droite) pour coherence visuelle. */
.ce-cookie-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  background: #2F2E2E;
  color: #fff;
  font-family: Georgia, Palatino, "Book Antiqua", serif;
  font-size: 13px;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 9400;
}
.ce-cookie-fab:hover { background: #DC1384; }

.ce-cookie-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9800;
}
.ce-cookie-overlay.is-open { display: block; }

.ce-cookie-panel {
  display: none;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9900;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  padding: 22px 24px;
  max-width: 360px;
  width: calc(100% - 32px);
  box-sizing: border-box;
}
.ce-cookie-panel.is-open { display: block; }
.ce-cookie-panel h2 {
  font-family: Georgia, Palatino, "Book Antiqua", serif;
  font-size: 19px;
  margin: 0 0 10px;
}
.ce-cookie-panel p {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0 0 12px;
}
.ce-cookie-panel a {
  font-size: 14px;
  color: #DC1384;
  text-decoration: underline;
}
.ce-cookie-panel__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  padding: 6px;
}

.ce-lightbox__stage {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 60px 16px;
  box-sizing: border-box;
}
.ce-lightbox__img {
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.ce-lightbox__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}
.ce-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
}
.ce-lightbox__prev { left: 12px; }
.ce-lightbox__next { right: 12px; }

.ce-lightbox__share {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px 26px;
  color: #fff;
}
.ce-lightbox__share-label { font-size: 14px; opacity: 0.8; }
.ce-lightbox__share-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.ce-lightbox__share-btn:hover { background: rgba(255, 255, 255, 0.26); }

@media (max-width: 480px) {
  .ce-lightbox__nav { width: 40px; height: 40px; font-size: 16px; }
  .ce-lightbox__share { gap: 8px; }
  .ce-lightbox__share-btn { padding: 7px 12px; font-size: 13px; }
}

/* Les 3 cartes "Nos valeurs / Concept / Notre offre" (accueil) sont sizees a leur
   propre contenu texte (2 a 3 lignes selon la carte) au lieu de suivre la hauteur
   de leur colonne : le bloc blanc visible ne fait donc pas la meme taille d'une
   carte a l'autre. Hauteur partagee forcee au desktop (empile en pleine largeur
   sur mobile, pas de probleme de hauteur inegale a ce format). */
@media (min-width: 751px) {
  #comp-ih26ixw7, #comp-ih26ixwf, #comp-ih26ixwl {
    height: 515px !important;
  }
}
.jv9xi4.wixui-box { height: 100% !important; }

/* Sous-menu desktop "Plus" (repare par mobile-menu.js) : le fond/l'ombre d'origine
   dependent de variables CSS de theme Wix absentes de cette capture statique
   (transparent par defaut) -> re-affirmer un fond plein pour lisibilite. */
.wixui-dropdown-menu__submenu {
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
  border-radius: 6px !important;
  padding: 6px 0 !important;
}
.wixui-dropdown-menu__submenu li a {
  display: block !important;
  padding: 10px 20px !important;
  white-space: nowrap !important;
}

/* Cibles tactiles trop petites (audit accessibilite "target-size", WCAG 2.5.8) :
   icones sociales des cartes repeater (24x24, aucune marge) et puces de carrousel
   (7-11px). Agrandit la zone cliquable a 24px min sans changer l'apparence visuelle
   (le point/l'icone reste a sa taille d'origine, seule la zone de clic s'etend). */
.twXk19 {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 10px;
  margin: -10px;
}
.v1smN8 {
  min-width: 24px !important;
  min-height: 24px !important;
  background-color: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.v1smN8::before {
  content: '';
  display: block;
  width: var(--nav-dot-size);
  height: var(--nav-dot-size);
  border-radius: 50%;
  background-color: rgba(var(--dotsColor, var(--color_12, color_12)), var(--alpha-dotsColor, 1));
}
.v1smN8.JPnvZO::before {
  width: var(--nav-dot-size-selected);
  height: var(--nav-dot-size-selected);
  background-color: rgba(var(--dotsSelectedColor, var(--color_11, color_11)), var(--alpha-dotsSelectedColor, 1));
}

/* Menu hamburger maison (mobile-menu.js). Bouton fixe, masque au-dela de 750px ;
   panneau coulissant depuis la droite, liste simple des 6 pages du site. */
.ce-hamburger {
  display: none;
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9500;
  width: 44px;
  height: 44px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}
.ce-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #222;
  border-radius: 1px;
}

.ce-mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9600;
}
.ce-mobile-nav-overlay.is-open { display: block; }

.ce-mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(78vw, 320px);
  background: #fff;
  z-index: 9700;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  padding: 70px 0 30px;
  box-sizing: border-box;
  overflow-y: auto;
}
.ce-mobile-nav.is-open { transform: translateX(0); }

.ce-mobile-nav__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  color: #222;
}

.ce-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ce-mobile-nav__list li { border-bottom: 1px solid #eee; }
.ce-mobile-nav__list a {
  display: block;
  padding: 16px 24px;
  font-family: Georgia, "Palatino Linotype", serif;
  font-size: 17px;
  color: #222;
  text-decoration: none;
}
.ce-mobile-nav__list a.is-current { font-weight: bold; color: #DC1384; }

body.ce-mobile-nav-open { overflow: hidden; }

/* Responsive mobile reel, derive du CSS desktop capture (pas de reference au site Wix source) */
@media (max-width: 750px) {
  .ce-hamburger { display: flex; }
  html, body { overflow-x: hidden; }

  /* Certains blocs ont un padding desktop (ex: 24px) sans box-sizing:border-box,
     qui s'ajoute alors a la largeur au lieu d'etre inclus dedans et deborde. */
  *, *::before, *::after { box-sizing: border-box !important; }

  /* Un item flex garde par defaut min-width:auto (sa taille de contenu minimale),
     ce qui peut faire deborder tout le conteneur flex ; on autorise le retrecissement. */
  * { min-width: 0 !important; }

  /* Garde-fou absolu independant des chaines de pourcentages (certains composants,
     ex. le formulaire de contact, gardent une largeur figee malgre les overrides
     ci-dessus) : rien ne doit jamais depasser la largeur reelle de l'ecran. */
  * { max-width: 100vw !important; }

  [id] { min-width: 0 !important; }

  /* Plusieurs enveloppes de mise en page (page, header, footer...) centrent une
     largeur figee via margin-left:calc((100% - var(--site-width))/2) + width:var(--site-width).
     Rediriger cette variable neutralise toutes ces formules d'un coup, sans avoir
     a rejouer chaque classe hashee une par une. */
  :root, :host, .spxThemeOverride, .theme-vars, .max-width-container {
    --site-width: 100% !important;
  }

  /* Le conteneur racine de page (.wixui-page) est position:absolute;inset:0
     avec une largeur figee a --site-width (980px) et une marge de centrage
     negative sur petit ecran : le neutraliser en premier, avant tout le reste. */
  .wixui-page {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  /* Le padding horizontal ne se met qu'une seule fois, au niveau page,
     sinon chaque conteneur imbrique rajoute 4vw et le contenu retrecit en cascade */
  #PAGES_CONTAINER, #SITE_HEADER, #SITE_FOOTER {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    box-sizing: border-box !important;
  }

  [data-mesh-id$="-gridContainer"],
  [data-mesh-id$="-rotated-wrapper"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  [data-mesh-id$="-gridContainer"] > *,
  [data-mesh-id$="-gridContainer"] > interact-element > *,
  [data-mesh-id$="-rotated-wrapper"] > *,
  [data-mesh-id$="-rotated-wrapper"] > interact-element > * {
    position: relative !important;
    grid-area: auto !important;
    justify-self: center !important;
    align-self: center !important;
    left: auto !important;
    margin: 0 auto 16px auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Les strips colonnes (Concept/Nos valeurs/etc.) passent aussi en colonne simple */
  [data-testid="columns"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  [data-testid="columns"] > [class*="wixui-column-strip__column"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* La carte directement a l'interieur d'une colonne doit remplir la colonne
     (elle occupait deja quasi toute la largeur de sa colonne en desktop) ;
     chaine de combinateurs directs pour ne pas retomber sur les petits elements
     (icone/separateur/bouton) plus profondement imbriques dans la carte. */
  [class*="wixui-column-strip__column"] > div[data-mesh-id] > [data-mesh-id$="-gridContainer"] > * {
    width: 100% !important;
  }

  img { max-width: 100% !important; }

  /* Header : logo + tagline + menu empiles, plus de largeur figee a 623px pour le menu */
  #SITE_HEADER [data-mesh-id=SITE_HEADERinlineContent-gridContainer] {
    padding: 12px 4vw !important;
  }
  #SITE_HEADER [data-mesh-id=SITE_HEADERinlineContent-gridContainer] > * {
    max-width: 100% !important;
    width: auto !important;
  }
  /* Logo + tagline avaient une largeur figee tres etroite (calculee pour
     tenir cote a cote sur desktop) qui casse les mots sur mobile */
  #SITE_HEADER p {
    text-align: center !important;
  }
  /* Le menu desktop (wix-dropdown-menu) ne montrait que 3 des 6 pages sur mobile
     (3 items restaient caches en aria-hidden par Wix, prevus pour un sous-menu
     "Plus" anime en JS absent de cette capture statique). Remplace par un menu
     hamburger maison (bouton + panneau coulissant, mobile-menu.js) qui liste
     les 6 pages directement : le widget d'origine est simplement masque ici. */
  .wixui-dropdown-menu { display: none !important; }

  /* Tailles de police lisibles sur petit ecran (valeurs choisies a la main, pas de scaling proportionnel global) */
  h1, .font_0 { font-size: clamp(22px, 7vw, 30px) !important; line-height: 1.25 !important; }
  h2, .font_2 { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.3 !important; }
  h3, .font_3 { font-size: clamp(20px, 6vw, 26px) !important; line-height: 1.3 !important; }
  h4, .font_4 { font-size: clamp(18px, 5.5vw, 24px) !important; line-height: 1.3 !important; }
  h5, .font_5 { font-size: clamp(16px, 5vw, 20px) !important; line-height: 1.3 !important; }
  p, span, .font_7, .font_8, .font_9 { font-size: clamp(14px, 4vw, 16px) !important; line-height: 1.5 !important; }
  p[style*="text-align:justify"], p[style*="text-align: justify"] { text-align: left !important; }

  /* Repeater Wix (cartes repetees, ex. "L'expertise"/"Artisan..." sur ce-qui-nous-motive) :
     chaque item est position:absolute;left:XXXpx calcule pour une rangee desktop en colonnes.
     Repasser le conteneur en colonne flex et chaque item en flux normal. */
  .wixui-repeater {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
  }
  .wixui-repeater__item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 24px 0 !important;
  }
  /* Le wrapper interne du repeater (fluid-columns-repeater) bleedait a 100vw/left:0
     alors que son propre parent (.wngi8) est deja retreci et centre (overflow-x:hidden) :
     la moitie du contenu de chaque carte se retrouvait clippee des deux cotes. */
  fluid-columns-repeater {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  [id$="_wrapper"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Sections plein ecran (hero, bandeaux photo) : hauteur qui suit le contenu au lieu d'une hauteur desktop figee */
  [data-mesh-id$="inlineContent"] {
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .contact-fab { right: 12px; bottom: 12px; font-size: 15px; padding: 12px 18px; }

  /* Bandeau photo "Tous Chefs!" (concept.html) : sa colonne suit la hauteur de son
     texte de premier plan (court), pas celle de la photo de fond (position absolue,
     ignoree du calcul de hauteur auto) -> photo quasi entierement ecrasee sur mobile.
     Fix scope a ce seul bandeau (id unique a concept.html), pas une regle generale :
     une regle sitewide precedente a deforme toutes les autres photos du site (revert). */
  #comp-mt91okxe2 { aspect-ratio: 980 / 780; }

  /* Galerie photo (Wix ProGallery) : chaque item est position:absolute;left:Npx
     range en ligne horizontale (item0 a 0px, item1 a 360px, item2 a 720px...),
     pensee pour defiler horizontalement au JS Wix (absent ici, capture statique) -
     seul le 1er item est visible sur mobile, les autres tombent hors ecran.
     On les empile en colonne, en flux normal. */
  .pro-gallery, .pro-gallery-parent-container, .pro-gallery-margin-container {
    width: 100% !important;
    height: auto !important;
  }
  [data-key="pro-gallery-inner-container"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
  }
  .gallery-item-container {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 12px 0 !important;
  }
  .gallery-item-wrapper,
  .gallery-item-content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  .gallery-item-content img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ------------------------------------------------------------------------
   Selecteur de langue (js/lang-switcher.js + bloc langues du menu mobile).
   Le coin haut-droite de l'en-tete est libre sur toutes les pages (baseline et
   menu Wix sont cales a gauche), donc le controle s'y pose en position fixe :
   l'en-tete Wix est un mesh layout dont les enfants portent des positions en
   pixels calculees par un editeur absent de cette capture statique, y injecter
   un element casserait sa mise en page. Sous 750px le hamburger occupe deja ce
   coin, le choix de langue passe alors dans le panneau coulissant.
   ------------------------------------------------------------------------ */
.ce-lang-switcher {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 9400;
  font-family: Georgia, "Palatino Linotype", serif;
}
.ce-lang-switcher__button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  background: #fff;
  color: #2F2E2E;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.ce-lang-switcher__button:hover,
.ce-lang-switcher.is-open .ce-lang-switcher__button {
  border-color: #DC1384;
  color: #DC1384;
}
.ce-lang-switcher__caret { font-size: 10px; }

.ce-lang-switcher__list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.ce-lang-switcher.is-open .ce-lang-switcher__list { display: block; }
.ce-lang-switcher__list a {
  display: block;
  padding: 11px 16px;
  font-size: 15px;
  line-height: 1.1;
  color: #2F2E2E;
  text-decoration: none;
  white-space: nowrap;
}
.ce-lang-switcher__list a:hover { background: #f5f5f5; }
.ce-lang-switcher__list a.is-current { font-weight: bold; color: #DC1384; }

body.ce-lightbox-open .ce-lang-switcher,
body.ce-cookie-open .ce-lang-switcher { display: none; }

/* Choix de langue dans le panneau coulissant (mobile-menu.js). */
.ce-mobile-nav__langs { margin-top: 22px; padding: 0 24px; }
.ce-mobile-nav__langs-title {
  margin: 0 0 10px;
  font-family: Georgia, "Palatino Linotype", serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #737373;
}
.ce-mobile-nav__langs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ce-mobile-nav__langs a {
  display: block;
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-family: Georgia, "Palatino Linotype", serif;
  font-size: 15px;
  line-height: 1.1;
  color: #222;
  text-decoration: none;
}
.ce-mobile-nav__langs a.is-current {
  border-color: #DC1384;
  color: #DC1384;
  font-weight: bold;
}

@media (max-width: 750px) {
  .ce-lang-switcher { display: none; }
}

/* ------------------------------------------------------------------------
   Note de langue (js/lang-switcher.js) : le site est traduit dans plus de
   langues que l'equipe n'en parle. Rendue en bas de page, apres le pied de
   page Wix, comme une vraie note de bas de page. Volontairement discrete :
   meme famille serif que le site, gris #737373 deja valide en contraste,
   aucun aplat de couleur, aucune icone - le seul signe est un sourire
   typographique monochrome, qui ne jure pas avec le reste.
   ------------------------------------------------------------------------ */
.ce-language-note {
  margin: 0;
  /* Le bouton de contact est fixe en bas a droite (bottom 24px, hauteur ~54px) :
     sans cette reserve, il recouvre la note quand la page est defilee a fond. */
  padding: 22px 24px 100px;
  font-family: Georgia, "Palatino Linotype", serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  color: #737373;
  text-align: center;
  background: #fff;
}
.ce-language-note::first-letter { font-style: normal; }

@media (max-width: 750px) {
  .ce-language-note { padding: 18px 20px 78px; font-size: 12.5px; }
}

/* ========================================================================
   Bandeau d'accueil sur mobile : pleine largeur, photo entiere, titre lisible.
   ------------------------------------------------------------------------
   Constat mesure a 390px avant correction :
   - #SITE_CONTAINER faisait 375px dans un viewport de 390 (canevas mobile fige
     par Wix), laissant une bande morte de 15px a droite de TOUTE la page ;
   - #PAGES_CONTAINER ajoute 4% de padding lateral, d'ou les gouttieres ;
   - la photo du bandeau est en position:sticky sur 844px de haut, revelee par
     une fenetre de 168px : on n'en voyait qu'une tranche floue au milieu ;
   - le titre tombait a 23px en #2F2E2E sur une photo claire : illisible.
   Tout est porte par des id uniques et borne a 750px, pour ne pas repeter la
   regression de la passe "photos de fond" (cf. en-tete de ce fichier).
   ======================================================================== */
@media (max-width: 750px) {

  /* Le site occupe enfin toute la largeur reelle de l'ecran. */
  #SITE_CONTAINER,
  #main_MF,
  #site-root,
  #masterPage,
  #SITE_PAGES_TRANSITION_GROUP,
  #SITE_PAGES {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Le bandeau deborde des gouttieres et va d'un bord a l'autre.
     On annule exactement le padding de #PAGES_CONTAINER (4vw de chaque cote)
     plutot que de forcer 100vw : sur un navigateur a barre de defilement
     classique, 100vw compte la barre alors que la page ne l'a pas, ce qui
     decale le bandeau et cree un debordement horizontal. */
  #comp-lvfcrftb {
    position: relative;
    width: auto !important;
    max-width: none !important;
    margin-left: -4vw !important;
    margin-right: -4vw !important;
  }
  #comp-lvfcrftb > div,
  #comp-ih26ixvi,
  #comp-ih26ixvi > div,
  #mediaisk0rcyg13 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hauteur reelle : la photo a enfin la place d'exister. */
  #mediaisk0rcyg13,
  #bgLayers_mediaisk0rcyg13 {
    min-height: 78vh !important;
  }

  /* La photo remplit son cadre au lieu d'etre une tranche d'une image figee. */
  #img_mediaisk0rcyg13 {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }
  #img_mediaisk0rcyg13 img {
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Le titre passe au-dessus du voile, centre verticalement dans le bandeau. */
  #mediaisk0rcyg13 [data-mesh-id="mediaisk0rcyg13inlineContent"] {
    position: relative;
    z-index: 2;
    min-height: 78vh;
    display: flex !important;
    align-items: center;
  }
  #comp-ih26ixvk {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 22px;
    box-sizing: border-box;
  }

  /* Deux a trois fois plus gros, et enfin contraste.
     Le texte visible est porte par les <span> imbriques du rich-text Wix, pas
     par le <h1> : agrandir le seul h1 ne change rien a l'ecran. La taille est
     absolue, donc l'imbrication ne la multiplie pas. */
  #comp-ih26ixvk h1,
  #comp-ih26ixvk h1 span {
    font-size: clamp(28px, 8.2vw, 42px) !important;
    line-height: 1.12 !important;
    /* les garde-fous mobiles autorisent la coupure en plein mot : sur un titre
       ca donne "GASTRONO / MIE", il faut la reinterdire ici. */
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  /* La baseline rose est un sous-titre : elle reste plus petite que le titre. */
  #comp-ih26ixvk h1 span[style*="#DC1384"],
  #comp-ih26ixvk h1 span[style*="#DC1384"] span,
  #comp-ih26ixvk h1 span[style*="#dc1384"],
  #comp-ih26ixvk h1 span[style*="#dc1384"] span {
    font-size: clamp(21px, 6.2vw, 32px) !important;
  }
}

/* Lisibilite du titre d'accueil, a toutes les largeurs : le #2F2E2E sur une
   photo claire et le rose de marque sur les assiettes ne passaient ni sur
   telephone ni sur ordinateur. Un voile degrade suffit a les tenir, sans
   assombrir la photo elle-meme ni toucher a la mise en page desktop. */
#bgLayers_mediaisk0rcyg13::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .52) 0%,
    rgba(0, 0, 0, .34) 42%,
    rgba(0, 0, 0, .16) 70%,
    rgba(0, 0, 0, .30) 100%);
  pointer-events: none;
  z-index: 1;
}
#mediaisk0rcyg13 [data-mesh-id="mediaisk0rcyg13inlineContent"],
#comp-ih26ixvk {
  position: relative;
  z-index: 2;
}
#comp-ih26ixvk h1 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
#comp-ih26ixvk h1 span[style*="#2F2E2E"],
#comp-ih26ixvk h1 span[style*="#2f2e2e"] {
  color: #fff !important;
}
/* Le rose de marque vire au rose clair : meme couleur, lisible sur photo. */
#comp-ih26ixvk h1 span[style*="#DC1384"],
#comp-ih26ixvk h1 span[style*="#dc1384"] {
  color: #FFA6D6 !important;
}

/* Bouton de contact flottant : en allemand il mesurait 334px de large et
   recouvrait le bouton "Cookies" a gauche. On le borne : le texte passe a la
   ligne tout seul, dans toutes les langues, y compris celles a venir. */
.contact-fab {
  max-width: min(62vw, 340px) !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

/* ------------------------------------------------------------------------
   Suite : sur l'accueil, la photo remonte derriere l'en-tete, qui devient
   transparent. Sans ca le bandeau reste une vignette collee sous un bloc
   blanc. Borne a l'accueil via :has(#mediaisk0rcyg13) - l'en-tete est partage
   par les 9 pages, le rendre transparent partout casserait les 8 autres.
   ------------------------------------------------------------------------ */
@media (max-width: 750px) {
  body:has(#mediaisk0rcyg13) #SITE_HEADER {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: transparent !important;
  }
  body:has(#mediaisk0rcyg13) #SITE_HEADER [data-hook="bgLayers"],
  body:has(#mediaisk0rcyg13) #SITE_HEADER [data-testid="colorUnderlay"],
  body:has(#mediaisk0rcyg13) #SITE_HEADER [data-testid="bgOverlay"] {
    background: transparent !important;
    background-color: transparent !important;
  }
  /* Le nom et la baseline passent en blanc pour tenir sur la photo. */
  body:has(#mediaisk0rcyg13) #SITE_HEADER p,
  body:has(#mediaisk0rcyg13) #SITE_HEADER span,
  body:has(#mediaisk0rcyg13) #SITE_HEADER a {
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
  }
  /* La place liberee par l'en-tete sorti du flux est rendue au titre. */
  body:has(#mediaisk0rcyg13) #mediaisk0rcyg13 [data-mesh-id="mediaisk0rcyg13inlineContent"] {
    padding-top: 132px;
    box-sizing: border-box;
  }
}