/* =========================================================================
   HELVETECH — Feuille de style du site
   -------------------------------------------------------------------------
   Emplacement : wp-content/mu-plugins/ns-site/site.css
   Chargée par : 01-ns-styles.php

   Ce fichier est servi tel quel par le serveur. Divi ne le minifie pas et
   n'en extrait pas de « CSS critique », contrairement au champ CSS
   personnalisé du thème — c'est ce traitement qui faisait disparaître
   les marges (variables séparées de leurs règles) et les media queries.

   IMPORTANT : le champ Divi → Options du thème → CSS personnalisé doit
   être VIDE, sinon les deux feuilles se contredisent.
   ========================================================================= */


/* =========================================================================
   1. TOKENS DU SYSTÈME DE DESIGN
   ========================================================================= */
:root {
  /* Couleur primaire : orange #F39200.
     Nuances foncées tournées vers le rouge, claires vers le jaune,
     pour éviter l'effet délavé aux extrémités de l'échelle. */
  --orange-500: #f39200;
  --orange-400: #ffb524;
  --orange-600: #d17d00;

  --error-light: #b81d1d;
  --error-dark: #f07a7a;

  /* Échelle typographique, valeurs choisies à la main */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  --text-7xl: 72px;

  /* Échelle d'espacement : aucun palier à moins de ~25 % du suivant */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --nav-height: 80px;
  --gutter: 32px;

  /* Ombres en deux parties : diffuse (lumière directe) + serrée (ambiante bloquée) */
  --shadow-sm: 0 1px 3px rgba(10,11,13,0.16), 0 1px 2px rgba(10,11,13,0.10);
  --shadow-md: 0 4px 8px rgba(10,11,13,0.18), 0 2px 4px rgba(10,11,13,0.10);
  --shadow-lg: 0 16px 32px rgba(10,11,13,0.24), 0 4px 8px rgba(10,11,13,0.10);

  --radius: 8px;
  --radius-sm: 4px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="light"] {
  --nav-bg: #ffffff;
  --nav-border: #e3e5e8;
  --nav-text: #060607;
  --page-bg: #faf5ee;      /* Blanc cassé teinté d'orange, pas de blanc clinique */
  --page-text: #4e5058;
  --page-title: #060607;
  --page-muted: #6d6f78;
  --panel-bg: #f3ece1;
  --panel-text: #4e5058;
  --panel-title: #060607;
  --field-bg: #ffffff;
  --field-border: #d9cfbe;
  --field-text: #060607;
  --error-color: #b81d1d;
  --footer-bg: #ebe4d8;
  --footer-panel: #ddd3c2;
  --footer-border: #c4b8a4;
  --footer-title: #1f2126;
  --footer-text: #47494f;
  --footer-soft: #63656d;
  --footer-muted: #7f818a;
}

html[data-theme="dark"] {
  --nav-bg: #1e1f22;
  --nav-border: #3f4147;
  --nav-text: #f2f3f5;
  --page-bg: #313338;
  --page-text: #dbdee1;
  --page-title: #f2f3f5;
  --page-muted: #949ba4;
  --panel-bg: #2b2d31;
  --panel-text: #dbdee1;
  --panel-title: #f2f3f5;
  --field-bg: #1a1b1e;
  --field-border: #3f4147;
  --field-text: #f2f3f5;
  --error-color: #f07a7a;
  --footer-bg: #111214;
  --footer-panel: #232428;
  --footer-border: #2e3035;
  --footer-title: #f2f3f5;
  --footer-text: #dbdee1;
  --footer-soft: #b5bac1;
  --footer-muted: #949ba4;
}


/* =========================================================================
   2. BASES
   ========================================================================= */

html[data-theme] body {
  background-color: var(--page-bg) !important;
  color: var(--page-text);
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;   /* Aucun débordement horizontal possible */
}

h1, h2, h3, h4 {
  font-family: 'Archivo', 'Noto Sans', sans-serif;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ns-eyebrow {
  font-family: 'Archivo', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;   /* Les capitales manquent de repères visuels */
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--orange-500);
  outline-offset: 3px;
}


/* =========================================================================
   3. EN-TÊTE
   ========================================================================= */

html[data-theme] .ns-entete {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999 !important;
  height: 80px !important;
  min-height: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border) !important;
}

html[data-theme] .ns-entete .et_pb_fullwidth_menu,
html[data-theme] .ns-entete .et_pb_menu {
  height: 100% !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.ns-entete.ns-scrolled { box-shadow: var(--shadow-md); }

/* --- MARGES DE 32px ---
   Divi impose aux rangées une largeur de 80 % centrée automatiquement.
   On repasse en pleine largeur, puis on applique le rembourrage nous-mêmes.
   Valeurs littérales : aucune variable, pour écarter tout risque de
   substitution ratée. */
html[data-theme] .ns-entete .et_pb_row {
  box-sizing: border-box !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 32px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

html[data-theme] .ns-entete .et_pb_menu__wrap {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- CORRECTIF DÉCALAGE VERTICAL ---
   Divi ajoute un rembourrage haut au conteneur de navigation, ce qui
   décalait les liens vers le bas dans la barre. On le neutralise et on
   centre le bloc sur toute la hauteur. */
html[data-theme] .ns-entete .et_pb_menu__menu {
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

html[data-theme] .ns-entete .et_pb_menu__menu > nav,
html[data-theme] .ns-entete .et-menu-nav {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Placeholder de logo, tant qu'aucune image n'est configurée */
.ns-entete .et_pb_fullwidth_menu--without-logo .et_pb_menu__wrap:before {
  content: 'LOGO';
  flex: 0 0 auto;
  width: 96px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--nav-text);
  color: var(--nav-bg);
  border-radius: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ns-entete .et_pb_menu__logo img {
  width: 96px !important;
  height: 48px !important;
  max-height: 48px !important;
  object-fit: contain;
}

/* --- Liens de navigation --- */
html[data-theme] .ns-entete .et-menu {
  display: flex !important;
  align-items: center !important;
  gap: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: 100% !important;
}

html[data-theme] .ns-entete .et-menu > li {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Tous les liens partagent la même couleur : Divi atténue les liens
   inactifs, on annule cet effet. */
html[data-theme] .ns-entete .et-menu > li > a,
html[data-theme] .ns-entete .et-menu > li > a:visited,
html[data-theme] .ns-entete .et-menu > li.current-menu-item > a,
html[data-theme] .ns-entete .et-menu > li.current_page_item > a {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  color: var(--nav-text) !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}

.ns-entete .et-menu > li > a:before { display: none !important; }

/* Barre inférieure animée, déployée de la gauche vers la droite */
.ns-entete .et-menu > li > a:after {
  content: '' !important;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--orange-500) !important;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease);
  opacity: 1 !important;
  display: block !important;
}

.ns-entete .et-menu > li > a:hover:after,
.ns-entete .et-menu > li > a:focus-visible:after,
.ns-entete .et-menu > li.current-menu-item > a:after {
  transform: scaleX(1);
}

/* Décale le contenu du site sous la barre fixe */
body:not(.et-fb) #page-container,
body:not(.et-fb) #et-boc,
body:not(.et-fb) .et-l--body { padding-top: 80px; }

/* Le diaporama reprend la pleine hauteur en remontant sous la barre */
body:not(.et-fb) .ns-diaporama { margin-top: -80px !important; }


/* =========================================================================
   4. MENU MOBILE
   Divi pose la classe « opened » sur .mobile_nav à l'ouverture :
   aucun script supplémentaire n'est nécessaire.
   ========================================================================= */

html[data-theme] .ns-entete .mobile_menu_bar:before {
  color: var(--nav-text) !important;
}

html[data-theme] .ns-entete .et_mobile_menu {
  background-color: var(--nav-bg) !important;
  border-top: 3px solid var(--orange-500) !important;
  padding: 8px 20px 16px !important;
  box-shadow: var(--shadow-lg);
  /* Fermé : réduit à un point sous le hamburger, en haut à droite */
  clip-path: circle(0% at calc(100% - 20px) 0%);
  transition: clip-path 480ms var(--ease);
}

html[data-theme] .ns-entete .mobile_nav.opened .et_mobile_menu {
  clip-path: circle(150% at calc(100% - 20px) 0%);
}

html[data-theme] .ns-entete .et_mobile_menu li a {
  position: relative;
  color: var(--nav-text) !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--nav-border) !important;
  padding: 16px 0 16px 16px !important;
  font-size: 18px !important;
  opacity: 1 !important;
}

/* Le dernier lien n'a pas de séparateur : rien ne le suit */
html[data-theme] .ns-entete .et_mobile_menu li:last-child > a {
  border-bottom: none !important;
}

/* Le lien courant garde la couleur du thème : le repère visuel est la
   barre orange, pas un changement de couleur du texte. */
html[data-theme] .ns-entete .et_mobile_menu li.current-menu-item > a,
html[data-theme] .ns-entete .et_mobile_menu li.current_page_item > a {
  color: var(--nav-text) !important;
  background-color: transparent !important;
  font-weight: 600 !important;
}

html[data-theme] .ns-entete .et_mobile_menu li.current-menu-item > a:before {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  border-radius: 2px;
  background-color: var(--orange-500) !important;
}


/* =========================================================================
   5. DIAPORAMA
   ========================================================================= */

.ns-diaporama,
.ns-diaporama .et_pb_slider,
.ns-diaporama .et_pb_slides,
.ns-diaporama .et_pb_slide {
  min-height: 100vh;
  min-height: 100svh;
}

.ns-diaporama .et_pb_slide {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}

/* Voile dégradé, plus dense au centre où se trouve le texte */
.ns-diaporama .et_pb_slide:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom,
    rgba(19,20,22,0.55) 0%,
    rgba(19,20,22,0.70) 50%,
    rgba(19,20,22,0.60) 100%);
  pointer-events: none;
}

.ns-diaporama .et_pb_container,
.ns-diaporama .et_pb_slide_description {
  position: relative;
  z-index: 2 !important;
  text-align: center;
}

.ns-diaporama .et_pb_slide_description {
  padding: 80px 32px 140px !important;
}

html[data-theme] .ns-diaporama .et_pb_slide_title,
html[data-theme] .ns-diaporama .et_pb_slide_title a {
  color: #f2f3f5 !important;
  font-family: 'Archivo', sans-serif !important;
  font-stretch: 112%;
  font-size: 72px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  max-width: 16ch;
  margin: 0 auto 24px !important;
  text-decoration: none !important;
  /* Ombre floue sans décalage : agit comme une lueur */
  text-shadow: 0 2px 24px rgba(19,20,22,0.85);
}

html[data-theme] .ns-diaporama .et_pb_slide_content,
html[data-theme] .ns-diaporama .et_pb_slide_content p {
  color: #dbdee1 !important;
  font-size: 20px !important;
  line-height: 1.5;
  max-width: 46ch;   /* Zone de confort de lecture */
  margin: 0 auto !important;
  text-shadow: 0 2px 16px rgba(19,20,22,0.75);
}

.ns-diaporama .et-pb-controllers { bottom: 48px; z-index: 3; }

.ns-diaporama .et-pb-controllers a {
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background-color: rgba(255,255,255,0.32) !important;
}

.ns-diaporama .et-pb-controllers .et-pb-active-control {
  background-color: var(--orange-500) !important;
}

.ns-diaporama .et-pb-slider-arrows a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  color: #fff;
  opacity: 1 !important;
  z-index: 3;
}

.ns-diaporama .et-pb-arrow-prev { left: 32px !important; }
.ns-diaporama .et-pb-arrow-next { right: 32px !important; }


/* =========================================================================
   6. BOUTONS
   La flèche est dessinée dans « :before » puis repositionnée après le
   libellé par « order ». Divi contrôle « :after » et le masque quand
   l'icône de bouton est désactivée sur le module : on ne s'y frotte pas.
   ========================================================================= */

html[data-theme] .ns-diaporama .et_pb_more_button,
html[data-theme] .ns-diaporama .et_pb_button,
html[data-theme] .ns-formulaire .et_pb_contact_submit,
html[data-theme] .ns-bouton .et_pb_button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 14px 32px !important;
  background-color: var(--orange-500) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border: none !important;
  border-top: 1px solid var(--orange-400) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-md) !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: transform 200ms var(--ease) !important;
}

html[data-theme] .ns-diaporama .et_pb_more_button { margin-top: 48px !important; }

/* La flèche, dans :before, repoussée après le libellé */
html[data-theme] .ns-diaporama .et_pb_more_button:before,
html[data-theme] .ns-diaporama .et_pb_button:before,
html[data-theme] .ns-formulaire .et_pb_contact_submit:before,
html[data-theme] .ns-bouton .et_pb_button:before {
  content: '\2192' !important;   /* → */
  order: 2;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  font-family: Arial, 'Noto Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  transform: translateX(0);
  transition: transform 200ms var(--ease) !important;
}

html[data-theme] .ns-diaporama .et_pb_more_button:hover:before,
html[data-theme] .ns-diaporama .et_pb_button:hover:before,
html[data-theme] .ns-formulaire .et_pb_contact_submit:hover:before,
html[data-theme] .ns-bouton .et_pb_button:hover:before {
  transform: translateX(5px) !important;
}

/* L'ancienne flèche de Divi reste masquée : elle ferait doublon */
html[data-theme] .ns-diaporama .et_pb_more_button:after,
html[data-theme] .ns-diaporama .et_pb_button:after,
html[data-theme] .ns-formulaire .et_pb_contact_submit:after,
html[data-theme] .ns-bouton .et_pb_button:after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

/* Rembourrage figé au survol : neutralise l'animation native de Divi,
   qui élargit le bouton et fait coulisser son libellé */
html[data-theme] .ns-diaporama .et_pb_more_button:hover,
html[data-theme] .ns-diaporama .et_pb_button:hover,
html[data-theme] .ns-formulaire .et_pb_contact_submit:hover {
  padding: 14px 32px !important;
  background-color: var(--orange-500) !important;
  transform: none !important;
  letter-spacing: normal !important;
}


/* =========================================================================
   7. PAGE SERVICES
   ========================================================================= */

html[data-theme] .ns-service {
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--page-bg) !important;
}

html[data-theme] .ns-service .et_pb_row {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
  min-height: 100svh;
}

html[data-theme] .ns-service .et_pb_column {
  box-sizing: border-box !important;
  width: 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  flex: 0 0 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Alternance : l'ordre visuel s'inverse, l'ordre du HTML reste inchangé,
   ce qui préserve la logique de lecture pour les lecteurs d'écran */
html[data-theme] .ns-service-inverse .et_pb_row {
  flex-direction: row-reverse !important;
}

html[data-theme] .ns-service-image {
  position: relative;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.ns-service-image:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(82,56,13,0.22), rgba(16,20,26,0.34));
  pointer-events: none;
}

/* --- MARGES DU TEXTE ---
   Valeurs littérales : c'est ce rembourrage qui disparaissait quand la
   feuille passait par le traitement de Divi. */
html[data-theme] .ns-service .et_pb_column.ns-service-texte {
  background-color: var(--panel-bg) !important;
  padding-top: 128px !important;     /* 80px de barre + 48px de respiration */
  padding-right: 64px !important;
  padding-bottom: 64px !important;
  padding-left: 64px !important;
}

.ns-service-texte .et_pb_text { max-width: 60ch; }

html[data-theme] .ns-service-texte h2 {
  font-size: 48px !important;
  font-weight: 800 !important;
  color: var(--panel-title) !important;
  margin-bottom: 24px !important;
}

html[data-theme] .ns-service-texte p {
  color: var(--panel-text) !important;
  margin-bottom: 16px !important;
}

.ns-service-icone .et_pb_main_blurb_image {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px !important;
  background-color: var(--orange-500);
  border-radius: 8px;
  border-top: 1px solid var(--orange-400);
  box-shadow: var(--shadow-sm);
}

.ns-service-icone .et-pb-icon {
  color: #ffffff !important;
  font-size: 26px !important;
}

/* --- Animation d'apparition, pilotée par le script --- */
html[data-theme] .ns-service .ns-service-texte {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-theme] .ns-service.ns-visible .ns-service-texte { opacity: 1; }

/* Dans l'éditeur, le texte reste toujours visible */
body.et-fb .ns-service .ns-service-texte { opacity: 1 !important; }


/* =========================================================================
   8. PAGE CONTACT
   ========================================================================= */

html[data-theme] .ns-contact-hero {
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--page-bg) !important;
}

html[data-theme] .ns-contact-hero .et_pb_row {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
  min-height: 100svh;
}

html[data-theme] .ns-contact-hero .et_pb_column {
  box-sizing: border-box !important;
  width: 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  flex: 0 0 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Marges du formulaire, en valeurs littérales */
html[data-theme] .ns-contact-hero .et_pb_column.ns-contact-formulaire {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: var(--panel-bg) !important;
  padding-top: 128px !important;
  padding-right: 64px !important;
  padding-bottom: 64px !important;
  padding-left: 64px !important;
}

.ns-contact-formulaire > .et_pb_module {
  width: 100% !important;
  max-width: 520px !important;   /* Au-delà, les champs deviennent pénibles à balayer */
}

html[data-theme] .ns-contact-formulaire h1 {
  color: var(--panel-title) !important;
  font-size: 48px !important;
  font-weight: 800 !important;
}

html[data-theme] .ns-contact-formulaire p { color: var(--panel-text) !important; }

html[data-theme] .ns-contact-image {
  position: relative;
  background-size: cover !important;
  background-position: center center !important;
}

.ns-contact-image:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(82,56,13,0.20), rgba(16,20,26,0.32));
  pointer-events: none;
}

/* --- Champs : seuls Prénom et Nom se partagent une ligne --- */
html[data-theme] .ns-formulaire .et_pb_contact_field {
  box-sizing: border-box !important;
  padding: 0 0 16px 0 !important;
  width: 100% !important;
  float: none !important;
}

html[data-theme] .ns-formulaire .et_pb_contact_field_half {
  width: calc(50% - 8px) !important;
  display: inline-block !important;
  vertical-align: top;
  margin-right: 16px !important;
}

html[data-theme] .ns-formulaire .et_pb_contact_field_half + .et_pb_contact_field_half {
  margin-right: 0 !important;
}

html[data-theme] .ns-formulaire input[type="text"],
html[data-theme] .ns-formulaire input[type="email"],
html[data-theme] .ns-formulaire input[type="tel"],
html[data-theme] .ns-formulaire textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 12px 16px !important;
  font-family: inherit;
  font-size: 16px !important;   /* 16px : évite le zoom automatique sur iOS */
  color: var(--field-text) !important;
  background-color: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 8px !important;
  /* Ombre intérieure : le champ paraît creusé dans la page */
  box-shadow: inset 0 1px 2px rgba(10,11,13,0.08);
}

html[data-theme] .ns-formulaire ::placeholder {
  color: var(--page-muted) !important;
  opacity: 1;
}

.ns-formulaire input:focus,
.ns-formulaire textarea:focus {
  outline: none;
  border-color: var(--orange-500) !important;
  box-shadow: 0 0 0 3px rgba(243,146,0,0.25) !important;
}

.ns-formulaire textarea { min-height: 120px !important; resize: vertical; }

html[data-theme] .ns-formulaire .et_pb_contact_field_checkbox label,
html[data-theme] .ns-formulaire .et_pb_contact_field_options_title {
  color: var(--panel-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.ns-formulaire input[type="checkbox"] { accent-color: var(--orange-500); }

/* Champ en erreur : bordure rouge, en renfort du message texte */
html[data-theme] .ns-formulaire .et_contact_error,
html[data-theme] .ns-formulaire [aria-invalid="true"] {
  border-color: var(--error-color) !important;
}

/* Message injecté par le script. L'icône accompagne la couleur :
   l'information ne repose jamais sur la seule couleur. */
.ns-champ-erreur {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--error-color);
  line-height: 1.4;
}

.ns-champ-erreur:before {
  content: '\26A0';   /* ⚠ */
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}

html[data-theme] .ns-formulaire .et-pb-contact-message {
  color: var(--error-color) !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  background: none !important;
  border: none !important;
}

html[data-theme] .ns-formulaire .et-pb-contact-message ul {
  margin: 0;
  padding: 12px 16px;
  background-color: rgba(184,29,29,0.08);
  border-left: 3px solid var(--error-color);
  border-radius: 0 8px 8px 0;
  list-style-position: inside;
}

/* --- Trois colonnes d'informations --- */
html[data-theme] .ns-infos {
  padding: 96px 32px !important;
  background-color: var(--page-bg) !important;
}

.ns-infos .et_pb_row { width: 100% !important; max-width: 100% !important; }

html[data-theme] .ns-infos .ns-eyebrow { color: var(--page-muted) !important; }

html[data-theme] .ns-infos-valeur {
  font-size: 18px !important;
  font-weight: 600;
  color: var(--page-title) !important;
  line-height: 1.4;
}

html[data-theme] .ns-infos-note {
  font-size: 14px !important;
  color: var(--page-muted) !important;
  margin-top: 8px;
}

/* Le contexte suffit à identifier ces liens : pas de couleur vive */
.ns-infos-valeur a {
  color: inherit !important;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.ns-infos-valeur a:hover { border-bottom-color: var(--orange-500); }

.ns-carte { padding: 0 !important; }
.ns-carte iframe { width: 100%; height: 460px; border: 0; display: block; }

html[data-theme] .ns-carte-note {
  padding: 12px 32px;
  font-size: 12px !important;
  color: var(--page-muted) !important;
}


/* =========================================================================
   9. PIED DE PAGE
   ========================================================================= */

html[data-theme] .ns-pied {
  background-color: var(--footer-bg) !important;
  border-top: 3px solid var(--orange-500) !important;
  padding: 96px 0 48px !important;
  margin: 0 !important;
}

html[data-theme] .ns-pied .et_pb_row {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 32px !important;
  margin: 0 !important;
  gap: 64px !important;
}

html[data-theme] .ns-pied .et_pb_column {
  box-sizing: border-box !important;
  width: 33.3333% !important;
  max-width: 33.3333% !important;
  min-width: 0 !important;
  flex: 1 1 33.3333% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ns-pied-centre { text-align: center; }

/* --- CORRECTIF COLONNE « NOUS SUIVRE » ---
   Tous les modules de la colonne sont alignés sur la marge de droite :
   titre, icônes et bascule. Sans cela, chaque module gardait son propre
   alignement, d'où le titre au centre et les icônes à gauche. */
html[data-theme] .ns-pied .et_pb_column.ns-pied-droite {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}

html[data-theme] .ns-pied .ns-pied-droite > .et_pb_module {
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  text-align: right !important;
}

/* Divi fait flotter ses icônes sociales et les empile : on repasse en
   ligne horizontale alignée à droite. */
html[data-theme] .ns-pied .et_pb_social_media_follow {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  text-align: right !important;
}

html[data-theme] .ns-pied .et_pb_social_media_follow li,
html[data-theme] .ns-pied .et_pb_social_media_follow li.et_pb_social_icon {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html[data-theme] .ns-pied .et_pb_social_media_follow li a.icon {
  width: 44px !important;   /* Cible tactile recommandée */
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--footer-panel) !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-theme] .ns-pied .et_pb_social_media_follow li a.icon:hover {
  background-color: var(--orange-500) !important;
}

/* Textes */
html[data-theme] .ns-pied .ns-eyebrow {
  color: var(--footer-muted) !important;
  margin-bottom: 24px;
}

html[data-theme] .ns-pied-societe {
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--footer-title) !important;
  margin-bottom: 12px;
}

html[data-theme] .ns-pied p,
html[data-theme] .ns-pied .et_pb_text,
html[data-theme] .ns-pied .et_pb_text p {
  color: var(--footer-soft) !important;
  font-size: 14px;
}

html[data-theme] .ns-pied a {
  color: var(--footer-soft) !important;
  text-decoration: none;
}

html[data-theme] .ns-pied a:hover { color: var(--footer-title) !important; }

html[data-theme] .ns-pied-menu a {
  position: relative;
  display: inline-block;
  color: var(--footer-text) !important;
  font-size: 16px !important;
  font-weight: 500;
  padding-bottom: 2px;
}

.ns-pied-menu a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--orange-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease);
}

.ns-pied-menu a:hover:after { transform: scaleX(1); }

/* Barre inférieure : copyright à gauche, liens légaux à droite */
html[data-theme] .ns-pied .ns-pied-bas {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 16px;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 64px !important;
  padding: 24px 32px 0 !important;
  border-top: 1px solid var(--footer-border) !important;
  text-align: left !important;
}

html[data-theme] .ns-pied .ns-pied-bas p {
  margin: 0 !important;
  font-size: 14px !important;
  color: var(--footer-muted) !important;
}

html[data-theme] .ns-pied .ns-pied-bas p:last-child {
  margin-left: auto !important;
  text-align: right !important;
}


/* =========================================================================
   10. BASCULE JOUR / NUIT
   ========================================================================= */

.ns-theme-switch {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

html[data-theme] .ns-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 88px;
  height: 44px;
  padding: 4px;
  border: none;
  background-color: var(--footer-panel) !important;
  border-radius: 8px;   /* Seul le rail extérieur est arrondi */
  cursor: pointer;
}

.ns-theme-toggle__knob {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(50% - 6px);
  height: calc(100% - 12px);
  border-top: 1px solid rgba(255,255,255,0.35);
  box-shadow: var(--shadow-sm);
  transition: transform 320ms var(--ease),
              background-color 320ms var(--ease),
              border-radius 320ms var(--ease);
}

/* Mode jour : curseur noir à gauche, arrondi sur ses coins extérieurs */
html[data-theme="light"] .ns-theme-toggle__knob {
  background-color: #060607;
  border-radius: 4px 0 0 4px;
}

/* Mode nuit : curseur orange à droite, arrondi sur ses coins extérieurs */
html[data-theme="dark"] .ns-theme-toggle__knob {
  background-color: var(--orange-500);
  border-radius: 0 4px 4px 0;
  transform: translateX(100%);
}

.ns-theme-toggle__icon {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-muted);
}

html[data-theme="light"] .ns-theme-toggle__icon--sun,
html[data-theme="dark"] .ns-theme-toggle__icon--moon {
  color: #ffffff !important;
}

html[data-theme] .ns-theme-switch__label {
  font-size: 14px !important;
  color: var(--footer-muted) !important;
}


/* =========================================================================
   11. VUE TABLETTE (jusqu'à 1024px)
   Les grands éléments rétrécissent plus vite que les petits.
   ========================================================================= */
@media (max-width: 1024px) {

  html[data-theme] .ns-entete,
  body:not(.et-fb) #page-container,
  body:not(.et-fb) #et-boc { }

  html[data-theme] .ns-entete { height: 72px !important; min-height: 72px !important; }
  body:not(.et-fb) #page-container { padding-top: 72px; }
  body:not(.et-fb) .ns-diaporama { margin-top: -72px !important; }

  html[data-theme] .ns-entete .et_pb_row { padding: 0 24px !important; }
  html[data-theme] .ns-entete .et-menu { gap: 32px !important; }

  html[data-theme] .ns-diaporama .et_pb_slide_title { font-size: 48px !important; }
  html[data-theme] .ns-diaporama .et_pb_slide_content,
  html[data-theme] .ns-diaporama .et_pb_slide_content p { font-size: 18px !important; }
  html[data-theme] .ns-service-texte h2 { font-size: 36px !important; }

  html[data-theme] .ns-service .et_pb_column.ns-service-image { flex: 0 0 38% !important; width: 38% !important; max-width: 38% !important; }
  html[data-theme] .ns-service .et_pb_column.ns-service-texte { flex: 0 0 62% !important; width: 62% !important; max-width: 62% !important; }
  html[data-theme] .ns-contact-hero .et_pb_column.ns-contact-formulaire { flex: 0 0 58% !important; width: 58% !important; max-width: 58% !important; }
  html[data-theme] .ns-contact-hero .et_pb_column.ns-contact-image { flex: 0 0 42% !important; width: 42% !important; max-width: 42% !important; }

  html[data-theme] .ns-service .et_pb_column.ns-service-texte,
  html[data-theme] .ns-contact-hero .et_pb_column.ns-contact-formulaire {
    padding-top: 104px !important;
    padding-right: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 32px !important;
  }

  html[data-theme] .ns-infos { padding: 64px 24px !important; }
  .ns-carte iframe { height: 380px; }

  html[data-theme] .ns-pied .et_pb_row { flex-wrap: wrap !important; gap: 48px !important; padding: 0 24px !important; }
  html[data-theme] .ns-pied .ns-pied-gauche { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
  html[data-theme] .ns-pied .ns-pied-centre,
  html[data-theme] .ns-pied .ns-pied-droite { flex: 1 1 45% !important; width: 45% !important; max-width: 45% !important; }
  .ns-pied-centre { text-align: left; }
}


/* =========================================================================
   12. VUE MOBILE (jusqu'à 768px)
   ========================================================================= */
@media (max-width: 768px) {

  html[data-theme] .ns-entete { height: 64px !important; min-height: 64px !important; }
  body:not(.et-fb) #page-container { padding-top: 64px; }
  body:not(.et-fb) .ns-diaporama { margin-top: -64px !important; }

  html[data-theme] .ns-entete .et_pb_row { padding: 0 20px !important; }

  .ns-entete .et_pb_menu__logo img,
  .ns-entete .et_pb_fullwidth_menu--without-logo .et_pb_menu__wrap:before {
    width: 80px !important;
    height: 40px !important;
    font-size: 12px !important;
  }

  /* Titre du diaporama nettement réduit : les grands éléments rétrécissent
     bien plus vite que les petits (72px → 28px) */
  html[data-theme] .ns-diaporama .et_pb_slide_title {
    font-size: 28px !important;
    line-height: 1.15 !important;
    max-width: 18ch;
    margin-bottom: 16px !important;
  }

  html[data-theme] .ns-diaporama .et_pb_slide_content,
  html[data-theme] .ns-diaporama .et_pb_slide_content p {
    font-size: 15px !important;
    max-width: 32ch;
  }

  .ns-diaporama .et_pb_slide_description { padding: 64px 20px 110px !important; }
  .ns-diaporama .et-pb-slider-arrows { display: none !important; }

  html[data-theme] .ns-diaporama .et_pb_more_button {
    margin-top: 32px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
  }

  /* Colonnes empilées : image en bandeau, texte en dessous */
  html[data-theme] .ns-service .et_pb_row,
  html[data-theme] .ns-service-inverse .et_pb_row,
  html[data-theme] .ns-contact-hero .et_pb_row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    min-height: 0 !important;
  }

  html[data-theme] .ns-service .et_pb_column,
  html[data-theme] .ns-contact-hero .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  html[data-theme] .ns-service .et_pb_column.ns-service-image,
  html[data-theme] .ns-contact-hero .et_pb_column.ns-contact-image {
    min-height: 38svh !important;
    order: 1 !important;
  }

  html[data-theme] .ns-service .et_pb_column.ns-service-texte,
  html[data-theme] .ns-contact-hero .et_pb_column.ns-contact-formulaire {
    order: 2 !important;
    padding-top: 48px !important;
    padding-right: 20px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
  }

  html[data-theme] .ns-service-texte h2 { font-size: 24px !important; }
  html[data-theme] .ns-contact-formulaire h1 { font-size: 24px !important; }

  /* Le défilement n'est plus séquencé par service : le texte reste
     toujours visible, le faire disparaître en lecture serait gênant */
  html[data-theme] .ns-service .ns-service-texte { opacity: 1 !important; }

  /* Formulaire sur une seule colonne : deux champs côte à côte seraient
     trop étroits sur un téléphone */
  html[data-theme] .ns-formulaire .et_pb_contact_field_half {
    width: 100% !important;
    display: block !important;
    margin-right: 0 !important;
  }

  html[data-theme] .ns-infos { padding: 48px 20px !important; }

  html[data-theme] .ns-infos .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 48px !important;
  }

  .ns-carte iframe { height: 300px; }

  /* --- PIED DE PAGE MOBILE : une colonne, tout centré --- */
  html[data-theme] .ns-pied { padding: 48px 0 32px !important; }

  html[data-theme] .ns-pied .et_pb_row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 48px !important;
    padding: 0 20px !important;
  }

  html[data-theme] .ns-pied .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    text-align: center !important;
  }

  /* La colonne de droite se recentre au lieu de rester collée au bord,
     ce qui la faisait déborder de l'écran */
  html[data-theme] .ns-pied .et_pb_column.ns-pied-droite {
    align-items: center !important;
    text-align: center !important;
  }

  html[data-theme] .ns-pied .ns-pied-droite > .et_pb_module {
    text-align: center !important;
  }

  html[data-theme] .ns-pied .et_pb_social_media_follow {
    justify-content: center !important;
    text-align: center !important;
  }

  .ns-theme-switch { align-items: center !important; }

  /* Mentions légales : tout centré, plus de mélange gauche/droite */
  html[data-theme] .ns-pied .ns-pied-bas {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px;
    padding: 24px 20px 0 !important;
  }

  html[data-theme] .ns-pied .ns-pied-bas p,
  html[data-theme] .ns-pied .ns-pied-bas p:last-child {
    margin-left: 0 !important;
    text-align: center !important;
    width: 100%;
  }
}


/* =========================================================================
   13. MOUVEMENT RÉDUIT — respecte le réglage système
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .ns-service .ns-service-texte { opacity: 1 !important; }
}


/* =========================================================================
   14. VISUAL BUILDER
   Positions fixes et hauteurs plein écran neutralisées dans l'éditeur,
   sans quoi les modules deviennent impossibles à sélectionner.
   ========================================================================= */
body.et-fb .ns-entete { position: relative !important; height: auto !important; }
body.et-fb .ns-service .et_pb_row,
body.et-fb .ns-contact-hero .et_pb_row,
body.et-fb .ns-diaporama .et_pb_slide { min-height: 400px !important; }