/* SAS Hullo Froid, styles du site public */
/* Mobile-first, vanilla CSS, charte hexagonale bleu nuit/or/feu */

/* ===== @FONT-FACE ===== */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fallback Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Breakpoints de référence (mobile-first, min-width uniquement) :
   480px grand mobile, 768px tablette, 1024px desktop, 1280px grand écran */
:root {
  /* Couleurs */
  --nuit:         #0A1A2F;
  --nuit-2:       #0E2643;
  --nuit-secondaire: #0E2643;
  --nuit-deep:    #06111F;
  --or:           #C8A24C;
  --or-clair:     #E7CE92;
  --or-fonce:     #9A7728;
  --feu:          #E2541B;
  --feu-clair:    #F08A3C;
  --froid:        #5CFAFD;
  --froid-2:      #2BB8D9;
  --froid-fonce:  #17869F;
  --acier:        #8B95A1;
  --acier-clair:  #C9D1DA;
  --brume:        #F2F5F8;
  --brume-2:      #E6ECF2;
  --ligne:        #DCE3EA;
  --encre:        #101D2B;
  --gris-texte:   #5C6976;
  --blanc:        #FFFFFF;

  /* Gradients */
  --metal:    linear-gradient(135deg, #EAEFF4 0%, #A8B2BD 26%, #D4DBE2 50%, #8E99A5 74%, #C4CCD5 100%);
  --or-grad:  linear-gradient(135deg, #F2DEA4 0%, #C8A24C 46%, #9A7728 100%);
  --feu-grad: linear-gradient(135deg, #F4A24A, #E2541B 60%, #B8371A);
  /* Bleu électrique métallique : univers du froid */
  --froid-grad: linear-gradient(120deg, #D7FBFF 0%, #5CFAFD 32%, #2BB8D9 58%, #9CF3FF 82%, #5CFAFD 100%);

  /* Typographies */
  --font-titre: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-corps: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* Hexagone avec pointe en haut, aligné sur le logo HF.
     Ratio régulier : largeur = hauteur × 0.866 (√3/2). */
  --hex-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --hex-ratio: 0.866;

  /* Espacements (échelle 8px) */
  --space-1:  .5rem;   /* 8px  */
  --space-2:  1rem;    /* 16px */
  --space-3:  1.5rem;  /* 24px */
  --space-4:  2rem;    /* 32px */
  --space-6:  3rem;    /* 48px */
  --space-8:  4rem;    /* 64px */
  --space-10: 5rem;    /* 80px */
  --space-12: 6rem;    /* 96px */
  --section-py: 5rem;
  --container-max: 1280px;
  --container-px: 1rem;   /* 16px mobile */
  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 2px 8px rgba(10,26,47,.12);
  --shadow-md: 0 4px 20px rgba(10,26,47,.18);
  --shadow-lg: 0 8px 40px rgba(10,26,47,.22);

  /* Transitions */
  --trans: .25s ease-out;
  --trans-fast: .15s ease-out;

  /* Header */
  --header-height: 76px;  /* 76px mobile, 92px à 1280px */
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--or-fonce) var(--nuit-2);
}

html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: var(--nuit-2); }
html::-webkit-scrollbar-thumb { background: var(--or-fonce); border-radius: 3px; }

body {
  font-family: var(--font-corps);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--encre);
  background: var(--blanc);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--or);
  color: var(--nuit-deep);
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--or);
  text-decoration: none;
  transition: color var(--trans-fast);
}
a:hover { color: var(--or-clair); }

button, input, select, textarea { font: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
}

/* ===== SKIP LINK (accessibilité clavier) ===== */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  background: var(--or-grad);
  color: var(--nuit-deep);
  padding: .75rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .875rem;
  z-index: 9999;
  transition: top .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--or-fonce);
  outline-offset: 0;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-style: normal;
  line-height: 1.2;
  color: var(--nuit);
}

h1 { font-size: clamp(1.9rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* Surtitre */
.kick {
  display: block;
  font-family: var(--font-titre);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--or);
  margin-bottom: .75rem;
}

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

/* Titre de section */
.section-title {
  font-family: var(--font-titre);
  font-weight: 800;
  color: var(--nuit);
  margin-bottom: var(--space-3);
}
.section-title--center { text-align: center; }

/* Sous-titre accroche */
.lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--gris-texte);
  max-width: 65ch;
}
.lead--center { margin-left: auto; margin-right: auto; text-align: center; }
.lead-white { color: rgba(255,255,255,.8); }

strong { font-weight: 700; }
em { font-style: italic; }

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: var(--container-max);
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding: var(--section-py) 0;
}

.section--nuit {
  background: var(--nuit);
  color: var(--blanc);
}
.section--nuit h1,
.section--nuit h2,
.section--nuit h3,
.section--nuit h4 { color: var(--blanc); }

.section--brume   { background: var(--brume); }
.section--brume-2 { background: var(--brume-2); }

.section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-6);
}

.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 2rem;
  font-family: var(--font-titre);
  font-size: .9rem;
  font-weight: 700;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: filter var(--trans), box-shadow var(--trans), transform var(--trans-fast);
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  min-height: 44px;
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 3px; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Bouton principal (or) */
.btn-gold,
.btn--gold,
.btn--or {
  background: var(--or-grad);
  color: var(--nuit-deep);
  box-shadow: 0 2px 12px rgba(200,162,76,.35);
}
.btn-gold:hover,
.btn--gold:hover,
.btn--or:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 20px rgba(200,162,76,.5);
  color: var(--nuit-deep);
}

/* Bouton outline or */
.btn-ghost,
.btn--ghost {
  background: transparent;
  border: 2px solid var(--or);
  color: var(--or);
}
.btn-ghost:hover,
.btn--ghost:hover {
  background: rgba(200,162,76,.12);
  color: var(--or-clair);
  border-color: var(--or-clair);
}

/* Bouton outline blanc */
.btn-ghost-white,
.btn--ghost-white {
  background: transparent;
  border: 2px solid rgba(255,255,255,.6);
  color: var(--blanc);
}
.btn-ghost-white:hover,
.btn--ghost-white:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--blanc);
  color: var(--blanc);
}

/* Bouton outline (neutre) */
.btn--outline {
  background: transparent;
  border: 2px solid var(--ligne);
  color: var(--encre);
}
.btn--outline:hover {
  border-color: var(--or);
  color: var(--or);
  background: rgba(200,162,76,.06);
}

/* Bouton feu */
.btn-feu,
.btn--feu {
  background: var(--feu-grad);
  color: var(--blanc);
  box-shadow: 0 2px 12px rgba(226,84,27,.3);
}
.btn-feu:hover,
.btn--feu:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 20px rgba(226,84,27,.5);
  color: var(--blanc);
}

/* Tailles */
.btn-sm,
.btn--sm {
  padding: .5rem 1.25rem;
  font-size: .8rem;
  min-height: 36px;
}
.btn-lg,
.btn--lg {
  padding: 1rem 2.5rem;
  font-size: 1rem;
  min-height: 52px;
}

/* Groupe */
.btn-group {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* ===== HEXICONE (icône dans hexagone) =====
   Proportions régulières calées sur l'hexagone du logo :
   pointe en haut, largeur = hauteur × 0.866 */
.hexicone,
.hexicon {
  position: relative;
  width: 56px;
  height: 64px;
  clip-path: var(--hex-clip);
  background: var(--nuit);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hexicone--lg,
.hexicon--lg {
  width: 70px;
  height: 80px;
}
.hexicone--or,
.hexicon--or {
  background: var(--or-grad);
}
.hexicone--outline,
.hexicon--outline {
  background: transparent;
  border: 2px solid var(--or);
}
.hexicone svg,
.hexicone img,
.hexicon svg,
.hexicon img {
  width: 32px;
  height: 32px;
  color: var(--or);
}
.hexicone--lg svg,
.hexicone--lg img { width: 40px; height: 40px; }
.hexicone--or svg,
.hexicon--or svg { color: var(--nuit); }

/* ===== CARDS PRODUIT ===== */
.card-produit,
.prod-card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--trans), box-shadow var(--trans);
  display: flex;
  flex-direction: column;
}
.card-produit:hover,
.prod-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Image produit en format classique, pleine largeur, produit bien lisible */
.prod-card__hex {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
  margin: 0;
  width: 100%;
}
.prod-card__hex img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .75rem;
  transition: transform .4s ease;
}
.prod-card:hover .prod-card__hex img { transform: scale(1.04); }

.prod-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brume) 0%, var(--brume-2) 100%);
}
.prod-card__img-placeholder::after {
  content: 'Photo à venir';
  font-size: .75rem;
  font-weight: 500;
  color: var(--acier);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.prod-card__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.prod-card__name {
  font-family: var(--font-titre);
  font-size: 1rem;
  font-weight: 700;
  color: var(--nuit);
  line-height: 1.3;
}
.prod-card__name a { color: inherit; }
.prod-card__name a:hover { color: var(--or); }
.prod-card__specs {
  font-size: .82rem;
  color: var(--gris-texte);
  flex: 1;
  line-height: 1.5;
}
.prod-card--placeholder { opacity: .65; }

/* Card produit format classique */
.card-produit__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--brume);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-produit__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: .5rem;
  background: #fff;
  transition: transform .4s ease;
}
.card-produit:hover .card-produit__img img { transform: scale(1.04); }
.card-produit__tag { position: absolute; top: .75rem; left: .75rem; }
.card-produit__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-produit__title {
  font-family: var(--font-titre);
  font-size: 1rem;
  font-weight: 700;
  color: var(--nuit);
  margin-bottom: .35rem;
  line-height: 1.3;
}
.card-produit__specs { font-size: .8rem; color: var(--gris-texte); margin-bottom: .75rem; flex: 1; }
.card-produit__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--ligne);
}
.card-produit__prix {
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--or);
  font-size: .95rem;
}

/* ===== CARDS RÉALISATION ===== */
.real-card {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--trans), box-shadow var(--trans);
  cursor: pointer;
}
.real-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.real-card__hex {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--brume);
}
.real-card__hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.real-card:hover .real-card__hex img { transform: scale(1.05); }

.real-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--nuit-2) 0%, var(--nuit) 100%);
}

.real-card__body { padding: 1.25rem; }
.real-card__body h3 {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .95rem;
  color: var(--nuit);
  margin: .4rem 0 .35rem;
  line-height: 1.3;
}
.real-card__body p { font-size: .82rem; color: var(--gris-texte); line-height: 1.5; margin-bottom: .5rem; }
.real-card__year {
  font-size: .75rem;
  color: var(--acier);
  font-weight: 600;
}

/* ===== TAGS / BADGES ===== */
.tag {
  display: inline-flex;
  align-items: center;
  padding: .2rem .65rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--brume-2);
  color: var(--gris-texte);
  border: 1px solid var(--ligne);
}
.tag--small { font-size: .65rem; padding: .15rem .5rem; }
.tag--froid { background: rgba(10,26,47,.85); color: var(--acier-clair); border-color: rgba(139,149,161,.4); }
.tag--cuisson { background: var(--nuit); color: var(--or-clair); border: none; }
.tag--cuisine { background: var(--nuit); color: var(--or-clair); border: none; }
.tag--sur_mesure { background: var(--or-grad); color: var(--nuit-deep); border: none; }
.tag--autre { background: var(--acier-clair); color: var(--encre); border: none; }
.tag--clim { background: linear-gradient(135deg, #2d7dd2, #1a5ca0); color: var(--blanc); border: none; }
.tag--positif { background: rgba(56,161,105,.15); color: #276749; border-color: rgba(56,161,105,.3); }
.tag--negatif { background: rgba(44,82,130,.15); color: #2c5282; border-color: rgba(44,82,130,.25); }
.tag--or { background: var(--or-grad); color: var(--nuit-deep); border: none; }

/* ===== BREADCRUMB (fil d'Ariane horizontal) ===== */
.breadcrumb {
  font-size: .8rem;
  color: var(--acier);
  padding: .75rem 0;
}
.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li { display: inline-flex; align-items: center; }
/* Séparateur auto entre les éléments (chevron doré) */
.breadcrumb li + li::before {
  content: '›';
  margin-right: .5rem;
  opacity: .55;
  color: inherit;
}
/* Mais pas de double séparateur si un <li> séparateur explicite est présent */
.breadcrumb li.breadcrumb-sep { display: none; }
.breadcrumb a { color: var(--acier); text-decoration: none; transition: color var(--trans-fast); }
.breadcrumb a:hover { color: var(--or); }
.breadcrumb .current,
.breadcrumb [aria-current="page"] { color: var(--or); font-weight: 600; }

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-content: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .6rem;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--encre);
  background: var(--blanc);
  transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
  text-decoration: none;
}
.page-link:hover { border-color: var(--or); color: var(--or); background: #fef9ec; }
.page-link.active { background: var(--or-grad); border-color: var(--or); color: var(--nuit-deep); font-weight: 700; }
.page-link.disabled { opacity: .4; pointer-events: none; }

/* ===== FORM ===== */
.form-contact { max-width: 640px; }
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-weight: 600;
  font-size: .875rem;
  color: var(--encre);
  margin-bottom: .4rem;
}
.form-control {
  width: 100%;
  padding: .75rem 1rem;
  font-family: var(--font-corps);
  font-size: 1rem; /* ≥ 16px : évite le zoom auto iOS sur les champs */
  color: var(--encre);
  background: var(--blanc);
  border: 1.5px solid var(--ligne);
  border-radius: var(--radius);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
  line-height: 1.5;
}
.form-control:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(200,162,76,.2);
}
.form-control--error { border-color: #e53e3e; }
.form-control--dark {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: var(--blanc);
}
.form-control--dark::placeholder { color: rgba(255,255,255,.4); }
.form-control--dark:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(200,162,76,.2); }
textarea.form-control { resize: vertical; min-height: 140px; }
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6976' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.form-submit { margin-top: 1.5rem; }
.form-error {
  display: block;
  font-size: .78rem;
  color: #c53030;
  margin-top: .25rem;
}
.form-feedback {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  margin-top: 1rem;
  display: none;
}
.form-feedback.success {
  background: #f0fff4;
  border: 1px solid #9ae6b4;
  color: #276749;
  display: block;
}
.form-feedback.error {
  background: #fff5f5;
  border: 1px solid #feb2b2;
  color: #c53030;
  display: block;
}

/* ===== RUCHE BACKGROUND ===== */
.ruche-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ruche-bg svg {
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  opacity: .06;
}

/* ===== UTIL BAR ===== */
.util-bar {
  background: var(--nuit-deep);
  padding: .5rem 0;
  font-size: .78rem;
  color: var(--acier);
  line-height: 1.4;
}
.util-bar .container,
.util-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.util-bar__left,
.util-bar__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.util-bar__badge {
  font-weight: 700;
  color: var(--or);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.util-bar__sep { opacity: .4; }
.util-bar a,
.util-bar__link {
  color: var(--acier);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  transition: color var(--trans-fast);
}
.util-bar a:hover,
.util-bar__link:hover { color: var(--or); }
.util-bar svg { display: inline-block; width: 13px; height: 13px; }
.util-bar__tagline { display: none; }
/* Mobile épuré : on ne garde que « Depuis 1986 » + le téléphone */
@media (max-width: 599px) {
  .util-bar__left > span:not(.util-bar__badge) { display: none; }
  .util-bar__right a[href^="mailto:"] { display: none; }
  .util-bar { font-size: .72rem; }
}

/* ===== HEADER & NAVIGATION (BEM: .site-header) ===== */
.site-header {
  background: var(--nuit);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow var(--trans), background var(--trans);
}
.site-header--scrolled {
  background: rgba(10,26,47,.97);
  box-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--header-height);
  gap: 1.5rem;
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header__logo img { height: 54px; width: auto; }
.site-header__logo-text {
  display: flex;
  flex-direction: column;
}
.site-header__logo-main {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: .95rem;
  color: var(--blanc);
  line-height: 1.1;
  letter-spacing: .04em;
}
.site-header__logo-sub {
  font-size: .6rem;
  color: var(--or);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
}

/* Nav : list reset */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.site-nav__item { list-style: none; }
.site-nav__link { position: relative; transition: color .25s ease; }
.site-nav__link:hover,
.site-nav__link--active { color: var(--or); background: transparent; }
/* Soulignement doré animé (révélé depuis le centre) */
.site-nav__link::after {
  content: ''; position: absolute; left: 50%; bottom: .35rem;
  width: 0; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, #F2DEA4, #C8A24C, #9A7728);
  border-radius: 2px; transition: width .28s cubic-bezier(.4,.8,.3,1);
}
.site-nav__link:hover::after,
.site-nav__link--active::after { width: calc(100% - 1.4rem); }

/* CTA header */
.site-header__cta {
  display: none;
  margin-left: auto;
  flex-shrink: 0;
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburger__line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blanc);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, width .3s ease;
  transform-origin: center;
}
.hamburger--open .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger--open .hamburger__line:nth-child(2) { opacity: 0; width: 0; }
.hamburger--open .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay menu mobile */
.site-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 990;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.site-nav-overlay--visible {
  opacity: 1;
  visibility: visible;
}

/* Mobile nav en slide */
.site-nav {
  position: fixed;
  inset: 0;
  background: var(--nuit);
  z-index: 995;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-height) + 1rem) 2rem 2rem;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  height: 100dvh;
}
.site-nav--open {
  transform: translateX(0);
}
.site-nav--open .site-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.site-nav__link {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  border-radius: 0;
  width: 100%;
}
.site-nav__link:hover,
.site-nav__link--active {
  color: var(--or);
  background: none;
}
.site-nav__cta-mobile {
  margin-top: 1.5rem;
}
.site-nav__cta-mobile .btn {
  width: 100%;
  justify-content: center;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100svh;
  background: radial-gradient(ellipse at 30% 40%, #0E2643 0%, #06111F 55%, #000d17 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 6rem 0 4rem;
}
/* Photo de fond hero */
.hero__bg-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.hero__bg-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .18;
}
/* Texture scan */
.hero__scan,
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 39px,
      rgba(200,162,76,.03) 39px,
      rgba(200,162,76,.03) 40px
    );
  pointer-events: none;
  z-index: 0;
}
.hero__scan { z-index: 1; }
.hero__inner,
.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3rem;
}

.hero__content { max-width: 680px; }

/* Kick hero */
.hero__kick {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-titre);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--or);
  margin-bottom: 1.25rem;
}
.hero__kick::before,
.hero__kick::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--or);
}

.hero__title {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.75rem);
  color: var(--blanc);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.hero__title span {
  background: var(--or-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__text {
  font-size: 1.1rem;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 55ch;
}

/* CTA du hero */
.hero__actions,
.hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Badge 40 ans */
.hero__badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__badge {
  width: 180px;
  height: auto;
  filter: drop-shadow(0 8px 32px rgba(200,162,76,.3));
}

.badge-40 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  clip-path: var(--hex-clip);
  background: var(--or-grad);
  color: var(--nuit-deep);
  position: absolute;
  top: -1rem;
  right: -1rem;
  z-index: 3;
}
.badge-40__num {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
}
.badge-40__label {
  font-family: var(--font-titre);
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Hero hexagones décoratifs */
.hero__hexagons { display: none; position: relative; }

/* Page header interne */
.page-hero {
  background: linear-gradient(135deg, var(--nuit-deep) 0%, var(--nuit) 100%);
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 39px, rgba(200,162,76,.03) 39px, rgba(200,162,76,.03) 40px);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--blanc); margin-bottom: .5rem; }
.page-hero .lead { color: rgba(255,255,255,.7); }
.page-hero .breadcrumb { margin-bottom: .75rem; }
.page-hero .breadcrumb,
.page-hero .breadcrumb a { color: rgba(255,255,255,.5); }
.page-hero .breadcrumb a:hover { color: var(--or); }
.page-hero .breadcrumb .current { color: var(--or); }

/* ===== SECTIONS HOMEPAGE ===== */

/* Réassurance */
.reassurance {
  background: var(--brume);
  padding: 3.5rem 0;
}
.reassurance__grid,
.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.reassurance__item,
.reassurance-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.reassurance__body { display: flex; flex-direction: column; gap: .25rem; }
.reassurance__body strong,
.reassurance-item__title {
  font-family: var(--font-titre);
  font-size: .95rem;
  font-weight: 700;
  color: var(--nuit);
  display: block;
}
.reassurance__body span,
.reassurance-item__text {
  font-size: .82rem;
  color: var(--gris-texte);
  line-height: 1.5;
}
.reassurance-item__icon {
  width: 56px;
  height: 56px;
  clip-path: var(--hex-clip);
  background: var(--nuit);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reassurance-item__icon svg { width: 26px; height: 26px; color: var(--or); }

/* Expertise */
.expertise {
  padding: var(--section-py) 0;
  background: var(--blanc);
}
.expertise__grid,
.expertise-cards .grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.expertise-card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  transition: box-shadow var(--trans), transform var(--trans);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.expertise-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  color: inherit;
}
.expertise-card__title {
  font-family: var(--font-titre);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nuit);
}
.expertise-card__text { font-size: .85rem; color: var(--gris-texte); line-height: 1.6; }
.expertise-card__link {
  font-size: .82rem;
  font-weight: 700;
  color: var(--or);
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: auto;
  transition: gap var(--trans-fast);
}
.expertise-card:hover .expertise-card__link { gap: .6rem; }
.expertise-card--feu .hexicone { background: var(--or-grad); }
.expertise-card--feu .hexicone svg { color: var(--nuit); }

/* Réalisations home */
.realisations-home {
  padding: var(--section-py) 0;
  background: var(--brume);
}
.realisations-home__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: var(--space-6);
}

/* Produits home */
.produits-home {
  padding: var(--section-py) 0;
  background: var(--blanc);
}
.produits-home__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: var(--space-6);
}

/* CTA section */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

/* État vide */
.empty-state {
  text-align: center;
  color: var(--gris-texte);
  font-size: .95rem;
  padding: 3rem 0;
}

/* Placeholders (état db-error) */
.placeholder-grid {
  display: grid;
  gap: 1.25rem;
}
.placeholder-grid--3 { grid-template-columns: repeat(2, 1fr); }
.placeholder-card {
  background: var(--brume);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ligne);
}
.placeholder-card__hex {
  aspect-ratio: 4/3;
  background: linear-gradient(90deg, var(--brume) 25%, var(--brume-2) 50%, var(--brume) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.placeholder-card__lines { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.placeholder-line {
  height: .75rem;
  background: linear-gradient(90deg, var(--brume) 25%, var(--brume-2) 50%, var(--brume) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
.placeholder-line--tag { width: 40%; height: .6rem; }
.placeholder-line--title { width: 70%; height: .875rem; }
.placeholder-line--text { width: 90%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* CTA Bandeau */
.cta-bandeau {
  background: var(--nuit-deep);
  padding: var(--space-10) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-bandeau::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,162,76,.06) 0%, transparent 60%);
  pointer-events: none;
}
.cta-bandeau__inner,
.cta-bandeau .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.cta-bandeau__text { max-width: 600px; }
.cta-bandeau__title,
.cta-bandeau h2 { color: var(--blanc); margin-bottom: .5rem; }
.cta-bandeau p { color: rgba(255,255,255,.65); margin-bottom: 0; }
.cta-bandeau__actions,
.cta-bandeau .btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== PAGE CATALOGUE ===== */
.sidebar-filters {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sidebar-filters__header {
  padding: 1rem 1.25rem;
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filters-group { border-bottom: 1px solid var(--ligne); }
.filters-group:last-child { border-bottom: none; }
.filters-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .875rem;
  color: var(--encre);
  transition: color var(--trans-fast);
  user-select: none;
}
.filters-group__header:hover { color: var(--or); }
.filters-group__arrow { width: 16px; height: 16px; color: var(--acier); transition: transform .25s; flex-shrink: 0; }
.filters-group.open .filters-group__arrow { transform: rotate(180deg); }
.filters-group__body { display: none; padding: 0 1.25rem 1rem; }
.filters-group.open .filters-group__body { display: block; }
.filter-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  cursor: pointer;
  font-size: .875rem;
  color: var(--gris-texte);
  transition: color var(--trans-fast);
}
.filter-option:hover { color: var(--encre); }
.filter-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--or); cursor: pointer; flex-shrink: 0; }
.filter-option__count { margin-left: auto; font-size: .75rem; color: var(--acier); }
.filters-reset {
  margin: .75rem 1.25rem;
  font-size: .8rem;
  color: var(--or);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-corps);
}
.filters-reset:hover { text-decoration: underline; }

.catalogue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.catalogue-count { font-size: .875rem; color: var(--gris-texte); }
.catalogue-count strong { color: var(--encre); }
.view-toggle { display: flex; gap: .25rem; }
.view-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--blanc);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acier);
  transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}
.view-btn.active, .view-btn:hover { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.view-btn svg { width: 16px; height: 16px; }
.products-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.products-grid.list-view { grid-template-columns: 1fr; }
.products-grid.list-view .card-produit { flex-direction: row; }
.products-grid.list-view .card-produit__img { width: 160px; flex-shrink: 0; aspect-ratio: auto; }
.sort-select {
  padding: .45rem .9rem;
  font-size: .85rem;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  color: var(--encre);
  background: var(--blanc);
  cursor: pointer;
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6976' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
}
.sort-select:focus { outline: none; border-color: var(--or); }
.no-results { grid-column: 1/-1; text-align: center; padding: 4rem 2rem; color: var(--gris-texte); }
.no-results svg { width: 64px; height: 64px; color: var(--acier-clair); margin: 0 auto 1rem; }

/* Spinner */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--ligne);
  border-top-color: var(--or);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.specs-table { width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ligne); margin-bottom: 1.5rem; }
.specs-table th, .specs-table td { padding: .7rem 1rem; text-align: left; font-size: .875rem; border-bottom: 1px solid var(--ligne); }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }
.specs-table th { background: var(--brume); font-weight: 600; color: var(--encre); width: 38%; }
.specs-table td { color: var(--gris-texte); }

/* ===== PAGE RÉALISATIONS ===== */
/* Barre de filtres réalisations : bande blanche aérée sous le hero */
.realisations-filters {
  display: block;
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
  padding: 1.75rem 0;
  margin-bottom: 0;
}
.realisations-filters .filter-tabs {
  margin-bottom: 0;
  justify-content: center;
}

/* ===== MENTIONS LÉGALES =====
   Contenu 1220px, marges généreuses haut/bas, sections aérées */
.legal-content { padding: 4rem 0 5rem; background: var(--brume); }
.legal-container { max-width: 1220px; margin: 0 auto; }
.legal-section {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.legal-section__title {
  font-size: 1.25rem;
  color: var(--nuit);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid rgba(200,162,76,.35);
}
.legal-section h3 {
  font-size: 1rem;
  color: var(--nuit);
  margin: 1.5rem 0 .5rem;
}
.legal-section p, .legal-section li { font-size: .95rem; color: var(--gris-texte); line-height: 1.75; margin-bottom: .7rem; }
.legal-section ul { list-style: disc; padding-left: 1.5rem; margin-bottom: .7rem; }
.legal-dl { display: grid; gap: 0; }
.legal-dl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--brume-2);
}
.legal-dl__row:last-child { border-bottom: none; }
.legal-dl dt { font-weight: 600; color: var(--nuit); font-size: .9rem; }
.legal-dl dd { color: var(--gris-texte); font-size: .95rem; }
@media (min-width: 768px) {
  .legal-content { padding: 5rem 0 6rem; }
  .legal-dl__row { grid-template-columns: 240px 1fr; gap: 1.5rem; }
}

/* ===== FOOTER (BEM: .site-footer) ===== */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(200,162,76,.07) 0%, transparent 58%),
    linear-gradient(180deg, #0A1A2F 0%, var(--nuit-deep) 100%);
  color: var(--acier);
  padding: 0;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent 8%, #C8A24C 50%, transparent 92%) 1;
}
/* Maillage d'abeille en fond (fondu vers le bas) */
.site-footer::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../images/svg/ruche-or.svg");
  background-size: 210px auto;
  opacity: .06;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 80%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 80%);
}
/* Grande alvéole dorée décorative en filigrane (coin) */
.site-footer::after {
  content: ''; position: absolute; top: -60px; right: -40px; z-index: 0; pointer-events: none;
  width: 320px; height: 360px;
  background: url("../images/svg/ruche-or.svg") center / 120px auto;
  opacity: .05;
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 0%, transparent 70%);
          mask-image: radial-gradient(circle at 70% 30%, #000 0%, transparent 70%);
}
.site-footer > * { position: relative; z-index: 1; }
.site-footer__main {
  padding: var(--space-10) 0 var(--space-8);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.site-footer__col {}
.site-footer__col--brand {}

/* Logo footer */
.site-footer__logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  text-decoration: none;
}
.site-footer__logo-img {
  height: 52px; width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition: transform .35s cubic-bezier(.2,.75,.3,1), filter .35s;
}
.site-footer__logo:hover .site-footer__logo-img {
  transform: scale(1.05) rotate(-2deg);
  filter: drop-shadow(0 4px 13px rgba(200,162,76,.4));
}
.site-footer__logo-text {
  display: flex;
  flex-direction: column;
}
.site-footer__logo-text strong {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: .95rem;
  color: var(--blanc);
  line-height: 1.1;
}
.site-footer__logo-text span {
  font-size: .6rem;
  color: var(--or);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
}
.site-footer__slogan {
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  max-width: 28ch;
  margin-bottom: 1rem;
}

/* Adresse */
.site-footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
}
.site-footer__address-line {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: rgba(255,255,255,.45);
}
.site-footer__address-line svg { width: 13px; height: 13px; color: var(--or); flex-shrink: 0; }
.site-footer__contact-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  transition: color var(--trans-fast);
}
.site-footer__contact-link:hover { color: var(--or); }
.site-footer__contact-link svg { width: 13px; height: 13px; color: var(--or); flex-shrink: 0; }

/* Réseaux sociaux */
.site-footer__social {
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
}
.site-footer__social-link {
  width: 38px;
  height: 42px;
  background: rgba(255,255,255,.07);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acier);
  transition: background var(--trans-fast), color var(--trans-fast), transform var(--trans-fast);
}
.site-footer__social-link:hover {
  background: linear-gradient(135deg, #F2DEA4, #C8A24C, #9A7728);
  color: var(--nuit-deep);
  transform: translateY(-2px);
}
.site-footer__social-link svg { width: 16px; height: 16px; }

/* Navigation footer */
.site-footer__heading {
  position: relative;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--blanc);
  margin-bottom: 1.15rem;
  padding-bottom: .55rem;
}
.site-footer__heading::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 30px; height: 2px;
  background: linear-gradient(90deg, var(--or), transparent);
}
.site-footer__nav-list { display: flex; flex-direction: column; gap: 0; }
.site-footer__nav-link {
  position: relative;
  display: block;
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  padding: .3rem 0;
  transition: color var(--trans-fast), padding-left var(--trans-fast);
  text-decoration: none;
}
.site-footer__nav-link::before {
  content: '›'; position: absolute; left: -.55rem; opacity: 0;
  color: var(--or); transition: opacity var(--trans-fast);
}
.site-footer__nav-link:hover { color: var(--or); padding-left: .6rem; }
.site-footer__nav-link:hover::before { opacity: 1; }

/* Contact rapide */
.site-footer__contact-block { display: flex; flex-direction: column; gap: .5rem; }
.site-footer__cta-tel {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .9rem;
  color: var(--blanc);
  transition: color var(--trans-fast);
  text-decoration: none;
}
.site-footer__cta-tel:hover { color: var(--or); }
.site-footer__cta-tel svg { width: 18px; height: 18px; color: var(--or); flex-shrink: 0; }

/* Horaires */
.site-footer__horaires { margin-top: 1.25rem; }
.site-footer__horaires-title {
  font-family: var(--font-titre);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--blanc);
  margin-bottom: .6rem;
}
.site-footer__horaires-list { display: flex; flex-direction: column; gap: .25rem; }
.site-footer__horaires-list li {
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  display: flex;
  gap: .4rem;
}
.site-footer__horaires-list li span { color: rgba(255,255,255,.6); font-weight: 600; min-width: 6ch; }
.site-footer__horaires-sav { color: var(--or) !important; }
.site-footer__eurochef {
  font-size: .78rem;
  color: rgba(255,255,255,.3);
}

/* Barre basse */
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1.25rem 0;
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer__copy { font-size: .75rem; color: rgba(255,255,255,.3); margin-bottom: 0; }
.site-footer__legal-nav { display: flex; gap: 1.25rem; }
.site-footer__legal-link {
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  transition: color var(--trans-fast);
  text-decoration: none;
}
.site-footer__legal-link:hover { color: var(--or); }

/* ===== ANIMATIONS ===== */

/* Classes statiques (sans JS) */
.fade-in {
  opacity: 0;
  transition: opacity .7s ease;
}
.fade-in.visible { opacity: 1; }

.slide-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.slide-up.visible { opacity: 1; transform: translateY(0); }

/* Stagger delays */
.slide-up:nth-child(1) { transition-delay: 0s; }
.slide-up:nth-child(2) { transition-delay: .1s; }
.slide-up:nth-child(3) { transition-delay: .2s; }
.slide-up:nth-child(4) { transition-delay: .3s; }

/* Animation via IntersectionObserver */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.animate-on-scroll:nth-child(2) { transition-delay: .1s; }
.animate-on-scroll:nth-child(3) { transition-delay: .2s; }
.animate-on-scroll:nth-child(4) { transition-delay: .3s; }
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation hero au chargement */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__content {
  animation: heroFadeUp .8s ease-out both;
}
.hero__badge-wrap {
  animation: heroFadeUp .8s .2s ease-out both;
}

/* ===== COOKIES BANNER ===== */
.cookies-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--nuit);
  border-top: 1px solid rgba(200,162,76,.3);
  padding: 1rem var(--container-px);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
  transform: translateY(100%);
  transition: transform .4s ease;
}
.cookies-banner.visible { transform: translateY(0); }
.cookies-banner__text { flex: 1; font-size: .82rem; color: rgba(255,255,255,.7); min-width: 200px; }
.cookies-banner__text a { color: var(--or); }
.cookies-banner__actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* ===== EDIT MODE ===== */
.edit-lock-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 950;
  width: 44px;
  height: 44px;
  background: var(--nuit);
  border: 2px solid var(--or);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--or);
  box-shadow: var(--shadow-md);
  transition: background var(--trans), color var(--trans);
}
.edit-lock-btn:hover { background: var(--or); color: var(--nuit); }
.edit-lock-btn svg { width: 18px; height: 18px; }
.edit-mode [data-editable] {
  outline: 2px dashed var(--or);
  outline-offset: 3px;
  cursor: text;
  transition: outline-color var(--trans-fast);
}
.edit-mode [data-editable]:hover { outline-color: var(--feu); }
.edit-mode [data-editable-img] { outline: 2px dashed #3182ce; cursor: pointer; }
.edit-save-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--or);
  padding: .6rem 1.5rem;
  display: none;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-titre);
  font-size: .85rem;
  font-weight: 700;
  color: var(--nuit-deep);
}
.edit-mode .edit-save-bar { display: flex; }

/* ===== UTILITIES ===== */
.text-or     { color: var(--or) !important; }
.text-feu    { color: var(--feu) !important; }
.text-blanc  { color: var(--blanc) !important; }
.text-acier  { color: var(--acier) !important; }
.text-nuit   { color: var(--nuit) !important; }
.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }
.bg-nuit     { background: var(--nuit) !important; }
.bg-brume    { background: var(--brume) !important; }
.bg-blanc    { background: var(--blanc) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* Texte utilitaires : variantes HTML */
.text--gold { color: var(--or); }
.text--feu  { color: var(--or); }
.link-or { color: var(--or); font-weight: 600; text-decoration: none; }
.link-or:hover { color: var(--or-clair); text-decoration: underline; }

/* Hexicone : variantes manquantes */
.hexicone--xl { width: 83px; height: 96px; }
.hexicone--xl svg, .hexicone--xl img { width: 52px; height: 52px; }
.hexicone--sm { width: 42px; height: 48px; }
.hexicone--sm svg, .hexicone--sm img { width: 24px; height: 24px; }
.hexicone--nuit { background: var(--nuit); }
.hexicone--nuit svg { color: var(--or); }

/* Boutons : variantes manquantes */
.btn-outline {
  background: transparent;
  border: 2px solid var(--ligne);
  color: var(--encre);
}
.btn-outline:hover { border-color: var(--or); color: var(--or); }
.btn-outline--nuit {
  background: transparent;
  border: 2px solid rgba(255,255,255,.45);
  color: var(--blanc);
}
.btn-outline--nuit:hover { border-color: var(--blanc); background: rgba(255,255,255,.1); }
.btn-nuit { background: var(--nuit); color: var(--blanc); border: 2px solid transparent; }
.btn-nuit:hover { background: var(--nuit-secondaire); border-color: var(--or); color: var(--blanc); }
.btn-nuit--large { padding: 1rem 2.5rem; font-size: 1rem; min-height: 52px; }
.btn-gold--large { padding: 1rem 2.5rem; font-size: 1rem; min-height: 52px; }
.btn--full,
.btn-full { width: 100%; justify-content: center; }

/* ===== PAGE HEADER (en-tête pages intérieures) ===== */
.page-header {
  padding: 4rem 0 3rem;
  background: var(--brume);
}
.page-header--nuit {
  position: relative;
  overflow: hidden;
}
.page-header--nuit .container { position: relative; z-index: 2; }
.page-header--compact { padding: 3rem 0 2.5rem; }
.page-header--nuit .breadcrumb a { color: rgba(255,255,255,.6); }
.page-header--nuit .breadcrumb a:hover { color: var(--or); }
.page-header--nuit .breadcrumb-sep,
.page-header--nuit [aria-current] { color: rgba(255,255,255,.55); }
.page-header__content { max-width: 720px; }
.page-header__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--blanc);
  margin-bottom: .75rem;
  margin-top: 1rem;
  line-height: 1.2;
}
.page-header__subtitle {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: .4rem;
}
.page-header__intro {
  font-size: 1rem;
  color: rgba(255,255,255,.72);
  max-width: 600px;
  line-height: 1.65;
  margin-top: .25rem;
}

/* Hex-frame : conteneur image hexagonale (BEM) */
.hex-frame {
  position: relative;
  display: block;
  clip-path: var(--hex-clip);
  overflow: hidden;
  background: var(--nuit-secondaire);
}
.hex-frame--realisation {
  width: 100%;
  aspect-ratio: 1 / 1;
}
/* Photos produits : format classique (pas d'hexagone), plus lisible */
.hex-frame--produit {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  clip-path: none;
  border-radius: var(--radius);
  background: var(--blanc);
  border: 1px solid var(--ligne);
}
.hex-frame--large,
.hex-frame--produit-detail {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 520px;
  clip-path: none;
  border-radius: var(--radius-lg);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  box-shadow: var(--shadow);
}
.hex-frame--produit .hex-frame__img,
.hex-frame--produit-detail .hex-frame__img {
  object-fit: contain;
  padding: 1rem;
}
.hex-frame--produit::after,
.hex-frame--produit-detail::after { display: none; }
.hex-frame--icon {
  width: 104px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background: var(--brume-2);
}
.hex-frame--empty {
  width: 87px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background: var(--brume-2);
}
.hex-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.hex-frame__img--cover { object-position: center center; }
.hex-frame:hover .hex-frame__img { transform: scale(1.05); }

/* Overlay doré sur les images hexagonales */
.hex-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,26,47,.2) 0%, rgba(10,26,47,.05) 60%, rgba(200,162,76,.08) 100%);
  pointer-events: none;
  z-index: 1;
}
/* L'overlay réalisation a sa propre gestion, pas de ::after automatique ici */
.hex-frame--realisation::after { display: none; }

.hex-frame__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .75rem;
  background: var(--nuit-secondaire);
  min-height: 160px;
}
.hex-frame__placeholder--realisation { min-height: 200px; }
.hex-frame__placeholder--large { min-height: 260px; }
.hex-frame__placeholder-text {
  font-size: .72rem;
  color: var(--acier);
  font-family: var(--font-corps);
  text-align: center;
}

/* ===== PRODUIT CARD (catalogue, froid, cuisine) ===== */
.produits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.produits-grid--3 { grid-template-columns: 1fr; }
.produits-section { padding: var(--section-py) 0; }
/* Mobile épuré : 1 produit par ligne ; 2 à partir des grands téléphones */
@media (min-width: 600px) {
  .produits-grid,
  .produits-grid--3,
  .products-grid,
  .produits-home__grid { grid-template-columns: repeat(2, 1fr); }
}

.produit-card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.produit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.produit-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.produit-card__visual {
  position: relative;
  background: var(--brume);
  padding: 1rem 1rem 0;
}
.produit-card__body {
  padding: 1rem 1.25rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.produit-card__name {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .92rem;
  color: var(--encre);
  margin-bottom: .3rem;
  line-height: 1.35;
}
.produit-card:hover .produit-card__name { color: var(--or); }
.produit-card__specs {
  font-size: .78rem;
  color: var(--gris-texte);
  line-height: 1.5;
  flex: 1;
  margin-bottom: .6rem;
}
.produit-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px solid var(--ligne);
}
.produit-card__price {
  font-size: .85rem;
  font-weight: 700;
  color: var(--or);
}
.produit-card__tag {
  position: absolute;
  top: .5rem;
  left: .5rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--nuit);
  color: var(--or);
  padding: .18rem .55rem;
  border-radius: 3px;
  z-index: 2;
}

/* ===== DISPO BADGE ===== */
.dispo-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 4px;
  border: 1px solid transparent;
}
.dispo-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.dispo-badge--disponible  { background: rgba(56,161,105,.12); color: #276749; border-color: rgba(56,161,105,.25); }
.dispo-badge--commande    { background: rgba(200,162,76,.12); color: #9A7728; border-color: rgba(200,162,76,.3); }
.dispo-badge--indisponible { background: rgba(229,62,62,.1); color: #c53030; border-color: rgba(229,62,62,.2); }

/* Catalogue : éléments manquants */
.catalogue-inner { display: contents; }
.catalogue-main  { min-width: 0; }
.catalogue-sidebar { }
.catalogue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: .75rem;
  flex-wrap: wrap;
}
.count-badge { font-size: .82rem; color: var(--gris-texte); font-weight: 500; }
.produit-tag-cat {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--nuit);
  color: var(--or);
}
.catalogue-empty { text-align: center; padding: 4rem 2rem; }
.catalogue-empty__title {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--encre);
  margin: 1rem 0 .5rem;
}
.catalogue-empty__text { color: var(--gris-texte); margin-bottom: 1.5rem; }
.catalogue-empty__actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* Filtres groupe (sidebar catalogue) */
.filter-group { border-bottom: 1px solid var(--ligne); }
.filter-group:last-child { border-bottom: none; }
.filter-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .875rem;
  color: var(--encre);
  transition: color var(--trans-fast);
  user-select: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-corps);
}
.filter-group__toggle:hover { color: var(--or); }
.filter-group__toggle .chevron { width: 14px; height: 14px; transition: transform .25s; flex-shrink: 0; }
.filter-group.open .filter-group__toggle .chevron { transform: rotate(180deg); }
.filter-group__body { display: none; padding: 0 1.25rem .9rem; }
.filter-group.open .filter-group__body { display: block; }
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem 0;
  cursor: pointer;
  font-size: .875rem;
  color: var(--gris-texte);
  transition: color var(--trans-fast);
  user-select: none;
}
.filter-checkbox:hover { color: var(--encre); }
.filter-checkbox input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--or); cursor: pointer; flex-shrink: 0; }
.filter-checkbox__label { flex: 1; }
.filter-empty { font-size: .82rem; color: var(--acier); font-style: italic; padding: .5rem 0; }
.sidebar-card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.bandeau-conseil {
  background: var(--brume);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  margin-top: 2rem;
}
.bandeau-conseil__hex { margin: 0 auto .75rem; }
.bandeau-conseil__title {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nuit);
  margin-bottom: .35rem;
}
.bandeau-conseil__sub { color: var(--gris-texte); font-size: .88rem; margin-bottom: 1rem; }
.bandeau-conseil__inner { max-width: 480px; margin: 0 auto; }
.bandeau-conseil__text { color: var(--gris-texte); margin-bottom: 1rem; }

.realisations-empty { text-align: center; padding: 4rem 2rem; }
.realisations-empty__title {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--encre);
  margin: 1rem 0 .5rem;
}
.realisations-empty__text { color: var(--gris-texte); font-size: .9rem; }

/* ===== FILTER TABS (réalisations, page-level) ===== */
.filter-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.filter-tab {
  padding: .45rem 1.1rem;
  border: 1px solid var(--ligne);
  border-radius: 99px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gris-texte);
  background: var(--blanc);
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}
.filter-tab:hover { border-color: var(--or); color: var(--or); background: rgba(200,162,76,.06); }
.filter-tab--active { background: var(--nuit); color: var(--blanc); border-color: var(--nuit); }

/* ===== PRODUIT DETAIL (fiche produit) ===== */
.produit-detail { padding: var(--section-py) 0; }
.produit-detail__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
.produit-detail__gallery { }
.produit-detail__info { }
.produit-detail__title {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 800;
  color: var(--nuit);
  margin-bottom: .75rem;
  line-height: 1.2;
}
.produit-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.produit-detail__price { font-size: 1.05rem; font-weight: 700; color: var(--or); }
.produit-detail__description { color: var(--gris-texte); line-height: 1.7; margin-bottom: 1.5rem; }
.produit-detail__specs { margin-bottom: 1.5rem; }
.produit-detail__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.produit-detail__similar { padding: 4rem 0; border-top: 1px solid var(--ligne); }
.produit-gallery__thumbs {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brume);
  border: 1px solid var(--ligne);
  padding: 0;
  cursor: pointer;
  opacity: .65;
  transition: opacity var(--trans-fast);
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb--active { opacity: 1; outline: 2px solid var(--or); outline-offset: 2px; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.devis-form {
  background: var(--brume);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--ligne);
  margin-top: 1.5rem;
}
.devis-form h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--nuit); }
.not-found-wrap { text-align: center; padding: 6rem 2rem; }
.btn-label { flex: 1; }
.btn-loader { display: none; }
.btn.loading .btn-label { opacity: 0; }
.btn.loading .btn-loader { display: inline-block; }

/* Services : service-bloc (section avec icône latérale) */
.service-bloc { padding: var(--section-py) 0; }
.service-bloc--blanc { background: var(--blanc); }
.service-bloc--brume { background: var(--brume); }
.service-bloc--nuit  { background: var(--nuit); }
.service-bloc__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.service-bloc__icon { display: flex; justify-content: center; }
.service-bloc__img {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.service-bloc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-bloc__intro { color: var(--gris-texte); line-height: 1.7; margin-bottom: 1.25rem; font-size: 1rem; }
.service-bloc__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--or);
  font-weight: 600;
  font-size: .9rem;
  transition: gap var(--trans-fast);
}
.service-bloc__link:hover { gap: .7rem; color: var(--or-clair); }
.service-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.service-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: var(--gris-texte);
  line-height: 1.55;
}
.service-list__bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
  flex-shrink: 0;
  margin-top: .45rem;
}

/* Processus (alias pour la structure HTML utilisée dans services.php) */
.processus { padding: var(--section-py) 0; background: var(--brume); }
.processus__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 640px;
  margin: 2rem auto 0;
}
.processus__step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.processus__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--or-grad);
  color: var(--nuit-deep);
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.processus__connector {
  width: 2px;
  background: var(--ligne);
  height: 2.5rem;
  margin-left: 23px;
}
.processus__body { padding-bottom: 2rem; }
.processus__body h3 { font-family: var(--font-titre); font-weight: 700; color: var(--nuit); margin-bottom: .35rem; }
.processus__body p { color: var(--gris-texte); font-size: .9rem; line-height: 1.6; margin: 0; }

/* À propos : composants HTML (aliases et manquants) */
.about-histoire { padding: var(--section-py) 0; }
.about-histoire__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
.about-histoire__badge-wrap { display: flex; justify-content: center; }
.about-histoire__badge {
  width: 190px; height: auto;
  filter: drop-shadow(0 10px 26px rgba(200,162,76,.28));
  animation: badgeFloat 5.5s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .about-histoire__badge { animation: none; }
}
.about-histoire__text p { color: var(--gris-texte); line-height: 1.7; margin-bottom: 1rem; }
.about-photos-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.75rem;
}
.about-photos-row figure {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.about-photos-row figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.about-photos-row figure:hover img { transform: scale(1.05); }
/* La 2e photo (les patrons, format portrait) : recadrage biaisé vers les visages */
.about-photos-row figure:nth-child(2) img { object-position: center 18%; }

.about-valeurs { padding: var(--section-py) 0; background: var(--brume); }
.about-valeurs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.valeur-card {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--blanc);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ligne);
}
.valeur-card__title { font-family: var(--font-titre); font-weight: 700; color: var(--nuit); font-size: .95rem; margin: .75rem 0 .35rem; }
.valeur-card__text { font-size: .84rem; color: var(--gris-texte); line-height: 1.55; }

.about-eurochef { padding: var(--section-py) 0; background: var(--nuit); }
.about-eurochef__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  text-align: center;
}
.about-eurochef__icon { display: flex; justify-content: center; }
.about-eurochef__content { color: rgba(255,255,255,.8); }
.about-eurochef__content h2 { color: var(--blanc); margin-bottom: .75rem; }
.about-eurochef__content p { color: rgba(255,255,255,.72); line-height: 1.7; }
.about-eurochef__list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .45rem; text-align: left; }
.about-eurochef__list li { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.8); font-size: .9rem; }

.about-chiffres { padding: var(--section-py) 0; }
.about-chiffres__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.chiffre-card {
  text-align: center;
  padding: 1.5rem;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.chiffre-card__num {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--or);
  line-height: 1;
  margin-bottom: .25rem;
}
.chiffre-card__unit { font-size: 1.1rem; color: var(--or); }
.chiffre-card__label { font-size: .82rem; color: var(--gris-texte); line-height: 1.45; margin-top: .2rem; }

/* Froid commercial / cuisine pro : composants */
.expertise-intro { padding: var(--section-py) 0; }
.expertise-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.expertise-intro__text h2 { margin-bottom: 1rem; }
.expertise-intro__text p { color: var(--gris-texte); line-height: 1.7; margin-bottom: .75rem; }
.expertise-intro__cards { display: flex; flex-direction: column; gap: .75rem; }

/* Carte type (Chambres froides, Armoires, Vitrines…) */
.type-card {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: .875rem 1rem;
}
.type-card h3 {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .9rem;
  color: var(--nuit);
  margin: 0 0 .25rem;
  line-height: 1.3;
}
.type-card p {
  font-size: .8rem;
  color: var(--gris-texte);
  line-height: 1.5;
  margin: 0;
}

.expertise-intro__illus {
  margin-top: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.expertise-intro__illus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rubriques { padding: var(--section-py) 0; }
.rubriques--brume { background: var(--brume); }
.rubriques__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
.rubrique-card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}
.rubrique-card--fire { border-left: 3px solid var(--or); }
.rubrique-card__title {
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--nuit);
  font-size: 1rem;
  margin-bottom: .5rem;
}
.rubrique-card__title--fire { color: var(--nuit); }
.rubrique-card__list { list-style: none; padding: 0; margin: 0; }
.rubrique-card__list li {
  font-size: .88rem;
  color: var(--gris-texte);
  padding: .28rem 0;
  border-bottom: 1px solid var(--brume-2);
}
.rubrique-card__list li:last-child { border-bottom: none; }

.differenciants { padding: var(--section-py) 0; }
.differenciants--brume { background: var(--brume); }
.differenciants__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.diff-item { text-align: center; padding: 1.25rem 1rem; }
.diff-item h3 {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .92rem;
  color: var(--nuit);
  margin: .6rem 0 .3rem;
}
.diff-item p { font-size: .82rem; color: var(--gris-texte); line-height: 1.5; }

.cuisine-deco { display: flex; justify-content: center; margin-bottom: 2rem; }
.cuisine-deco__hex {
  clip-path: var(--hex-clip);
  width: 120px;
  height: 120px;
  background: var(--nuit);
  display: flex;
  align-items: center;
  justify-content: center;
}
.produits-grid--3 { grid-template-columns: 1fr; }

/* ===== RESPONSIVE 480px ===== */
@media (min-width: 480px) {
  :root { --container-px: 1.5rem; } /* 24px tablette */
}

/* Responsive 768px : manquants */
@media (min-width: 768px) {
  .page-header--nuit { padding: 7rem 0 5rem; }
  .produit-card__name { font-size: 1rem; }
  .produits-grid { grid-template-columns: repeat(3, 1fr); }
  .produits-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .about-valeurs__grid { grid-template-columns: repeat(4, 1fr); }
  .about-chiffres__grid { grid-template-columns: repeat(4, 1fr); }
  .about-eurochef__inner { grid-template-columns: auto 1fr; text-align: left; }
  .about-histoire__inner { grid-template-columns: 200px 1fr; }
  .service-bloc__inner { grid-template-columns: 1fr 2fr; }
  .service-bloc__inner--reverse { direction: rtl; }
  .service-bloc__inner--reverse > * { direction: ltr; }
  .differenciants__grid { grid-template-columns: repeat(4, 1fr); }
  .differenciants__grid--3col { grid-template-columns: repeat(3, 1fr); }
  .rubriques__grid { grid-template-columns: repeat(2, 1fr); }
  .expertise-intro__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .produits-grid { grid-template-columns: repeat(4, 1fr); }
  .produit-detail__inner { grid-template-columns: 1fr 1fr; }
}

/* Responsive 768px */
@media (min-width: 768px) {
  :root {
    --section-py: 5.5rem;
    --container-px: 1.5rem;
  }

  /* Typography */
  .lead { font-size: 1.15rem; }

  /* Layout */
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }

  /* Util bar */
  .util-bar__tagline { display: block; }

  /* Nav desktop : remplace le panneau mobile */
  .site-nav {
    position: static;
    inset: auto;
    transform: none;
    padding: 0;
    background: transparent;
    display: flex !important;
    flex-direction: row;
    overflow: visible;
    flex: 1;
    /* Réinitialise le panneau mobile plein écran : sinon la nav reste haute de
       100dvh avec z-index 995 → boîte invisible qui recouvre le contenu et
       bloque les clics (icônes de réassurance, etc.). */
    height: auto;
    z-index: auto;
  }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: .25rem;
  }
  .site-nav__link {
    display: block;
    width: auto;
    font-size: .82rem;
    font-weight: 600;
    padding: .5rem .7rem;
    border-bottom: none;
    color: rgba(255,255,255,.8);
    border-radius: 4px;
  }
  .site-nav__link:hover,
  .site-nav__link--active {
    color: var(--or);
    background: rgba(200,162,76,.1);
  }
  .site-nav__cta-mobile { display: none; }

  /* CTA + hamburger */
  .site-header__cta { display: flex; }
  .hamburger { display: none !important; }

  /* Hero */
  .hero { min-height: 85vh; padding: 0; }
  .hero__inner,
  .hero .container { grid-template-columns: 1fr 1fr; align-items: center; }
  .hero__hexagons { display: block; }

  /* Reassurance */
  .reassurance__grid,
  .reassurance-grid { grid-template-columns: repeat(4, 1fr); }

  /* Expertise */
  .expertise__grid,
  .expertise-cards .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Réalisations */
  .realisations-home__grid { grid-template-columns: repeat(3, 1fr); }

  /* Produits */
  .produits-home__grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }

  /* Contact */
  .form-row { grid-template-columns: 1fr 1fr; }

  /* Placeholder */
  .placeholder-grid--3 { grid-template-columns: repeat(3, 1fr); }

  /* Footer */
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }

  /* Catalogue */
  .sidebar-filters { position: sticky; top: 90px; }

  /* CTA bandeau horizontal */
  .cta-bandeau__inner,
  .cta-bandeau .container {
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
    align-items: center;
  }
  .cta-bandeau__text { text-align: left; }
}

/* Responsive 1024px */
@media (min-width: 1024px) {
  :root { --section-py: 6rem; }

  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .expertise__grid,
  .expertise-cards .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* Nav à 15px pour un menu plus lisible */
  .site-nav__link { padding: .5rem .85rem; font-size: .9375rem; }

  /* Hero */
  .hero { min-height: 90vh; }
  .hero__title { font-size: clamp(2.5rem, 4vw, 3.75rem); }

  /* Products */
  .produits-home__grid { grid-template-columns: repeat(4, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

}

/* Responsive 1280px */
@media (min-width: 1280px) {
  :root {
    --container-px: 2rem;    /* 32px grand écran */
    --header-height: 92px;   /* header plus grand */
  }

  .products-grid { grid-template-columns: repeat(4, 1fr); }

  .hero__inner,
  .hero .container { gap: 5rem; }

  /* Header plus grand, logo agrandi en proportion */
  .site-header__logo img { height: 62px; }
  .site-nav__link { font-size: .9375rem; }
}

/* Page catalogue */

/* Wrapper page */
.catalogue-page {
  padding: 2rem 0 5rem;
  background: var(--brume);
  min-height: 60vh;
}

/* Toolbar */
.cat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  padding: .875rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}
.cat-toolbar__left  { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-width: 0; }
.cat-toolbar__right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.cat-toolbar__count { font-size: .875rem; color: var(--gris-texte); margin: 0; line-height: 1.3; }
.cat-toolbar__count strong { color: var(--encre); font-weight: 700; }
.cat-reset-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 600; color: var(--or);
  text-decoration: none; margin-left: .5rem;
  transition: color var(--trans-fast);
}
.cat-reset-link:hover { color: var(--or-fonce); text-decoration: underline; }

/* Bouton ouvrir filtres (mobile) */
.cat-filter-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem;
  background: var(--nuit); color: var(--blanc);
  border: none; border-radius: var(--radius);
  font-family: var(--font-corps); font-size: .85rem; font-weight: 600;
  cursor: pointer; min-height: 36px;
  transition: background var(--trans-fast);
}
.cat-filter-btn:hover { background: var(--nuit-2); }
.cat-filter-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.cat-filter-btn__badge {
  background: var(--or); color: var(--nuit-deep);
  border-radius: 99px; font-size: .65rem; font-weight: 800;
  padding: 0 5px; min-width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Active filter chips */
.cat-active-filters {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 1rem;
}
.cat-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .65rem .28rem .75rem;
  background: var(--nuit); color: var(--or);
  border-radius: 99px; font-size: .78rem; font-weight: 600;
  text-decoration: none;
  transition: background var(--trans-fast);
  line-height: 1;
}
.cat-chip:hover { background: var(--nuit-2); color: var(--or-clair); }
.cat-chip__group { color: rgba(255,255,255,.5); font-weight: 400; margin-right: .15rem; }
.cat-chip__x {
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(200,162,76,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--or);
  transition: background var(--trans-fast);
}
.cat-chip:hover .cat-chip__x { background: rgba(200,162,76,.35); }
.cat-chip__x svg { width: 7px; height: 7px; }

/* Layout sidebar + produits */
.cat-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
.cat-products { min-width: 0; }

/* Sidebar mobile overlay */
.cat-sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 500;
  backdrop-filter: blur(3px);
}
.cat-sidebar-overlay--visible { display: block; }

/* Sidebar mobile (drawer) */
@media (max-width: 767px) {
  .sidebar-filters {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 88vw);
    z-index: 600;
    transform: translateX(-110%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    border: none;
  }
  .sidebar-filters.is-open { transform: translateX(0); }
}

/* Sidebar footer */
.sidebar-filters__footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ligne);
}

/* Bouton fermer sidebar (mobile) */
.sidebar-filters__close {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .875rem 1.25rem;
  background: var(--nuit-deep); color: rgba(255,255,255,.65);
  border: none; font-family: var(--font-corps); font-size: .85rem; font-weight: 600;
  cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color var(--trans-fast);
}
.sidebar-filters__close:hover { color: var(--blanc); }
.sidebar-filters__close svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Placeholder image produit */
.card-produit__img-placeholder {
  width: 100%; height: 100%;
  background: var(--brume);
  display: flex; align-items: center; justify-content: center;
}
.card-produit__img-placeholder svg { opacity: .3; }

/* Vue liste */
.products-grid.list-view {
  grid-template-columns: 1fr !important;
  gap: .75rem;
}
.products-grid.list-view .card-produit {
  flex-direction: row;
  max-height: 150px;
}
.products-grid.list-view .card-produit__img {
  width: 150px;
  flex-shrink: 0;
  aspect-ratio: auto;
  height: 100%;
}
.products-grid.list-view .card-produit__img img {
  height: 100%;
}
.products-grid.list-view .card-produit__body {
  border-left: 1px solid var(--ligne);
  padding: 1rem 1.25rem;
}

/* Pagination dots */
.page-link--dots {
  border-color: transparent;
  background: transparent;
  color: var(--acier);
  pointer-events: none;
  cursor: default;
  letter-spacing: .1em;
}
.page-link--dots:hover { border-color: transparent; background: transparent; color: var(--acier); }

/* Responsive */
@media (min-width: 768px) {
  .catalogue-page { padding: 2.5rem 0 6rem; }
  .cat-layout { grid-template-columns: 240px 1fr; gap: 2rem; }
  .sidebar-filters { position: sticky; top: 90px; }
  .cat-filter-btn { display: none !important; }
  .sidebar-filters__close { display: none !important; }
}
@media (min-width: 1024px) {
  .cat-layout { grid-template-columns: 260px 1fr; gap: 2.5rem; }
}
@media (min-width: 1280px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Identité premium : logo, or, ruche, EuroChef */

/* ---- Fonds décoratifs réutilisables ---- */
.fx-ruche {
  position: absolute; inset: -8%;
  background-image: url("../images/svg/ruche-or.svg");
  background-size: 240px auto;
  opacity: .05;
  pointer-events: none; z-index: 0;
}
.fx-glow {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,162,76,.22) 0%, rgba(200,162,76,0) 65%);
  pointer-events: none; z-index: 0;
}

/* ---- Header : logo détouré (fond transparent) + hover stylé ---- */
.site-header__logo { position: relative; }
.site-header__logo-img {
  height: 54px; width: auto; position: relative; z-index: 1;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.35));
  transition: transform .4s cubic-bezier(.2,.75,.3,1), filter .4s;
}
/* Halo doré révélé au survol (aucune démarcation au repos) */
.site-header__logo::before {
  content: ''; position: absolute; left: -8px; top: 50%;
  width: 88px; height: 88px; transform: translateY(-50%) scale(.85);
  background: radial-gradient(circle, rgba(200,162,76,.32) 0%, transparent 66%);
  opacity: 0; pointer-events: none; z-index: 0;
  transition: opacity .4s ease, transform .4s ease;
}
.site-header__logo:hover .site-header__logo-img {
  transform: scale(1.07) rotate(-2deg);
  filter: drop-shadow(0 5px 15px rgba(200,162,76,.42));
}
.site-header__logo:hover::before { opacity: 1; transform: translateY(-50%) scale(1.05); }
.site-header__logo-sub { color: var(--or-clair); }

/* Hero (accueil) */
.hero--home {
  position: relative; overflow: hidden;
  background: var(--nuit-deep);
  padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}
/* Image de fond animée (léger zoom type Ken Burns) */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: 62% 42%;
  animation: heroKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns { from { transform: scale(1.03); } to { transform: scale(1.17); } }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4,12,22,.97) 0%, rgba(8,20,36,.85) 44%, rgba(10,26,47,.6) 100%),
    radial-gradient(ellipse at 72% 40%, rgba(22,56,90,.45) 0%, transparent 58%);
}
.hero__veil { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hero__veil::before {
  content: ''; position: absolute; inset: -10%;
  background-image: url("../images/svg/ruche-or.svg");
  background-size: 240px auto; opacity: .05;
}
.hero__veil::after {
  content: ''; position: absolute; top: -12%; right: -6%;
  width: min(680px, 75%); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(200,162,76,.20) 0%, transparent 60%);
}
.hero--home .hero__inner { position: relative; z-index: 2; align-items: center; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-titre); font-weight: 700; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--or);
  padding: .45rem .95rem; margin-bottom: 1.4rem;
  border: 1px solid rgba(200,162,76,.35); border-radius: 999px;
  background: rgba(200,162,76,.07);
}
.hero__eyebrow b { color: var(--or-clair); font-weight: 800; font-size: .95rem; }

.hero--home .hero__title { font-size: clamp(2.1rem, 5vw, 3.5rem); margin-bottom: .85rem; }
.hero--home .hero__title span {
  background: var(--or-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__tagline {
  font-family: var(--font-titre); font-style: italic; font-weight: 600;
  font-size: clamp(1.15rem, 2.3vw, 1.55rem);
  color: var(--or-clair); margin-bottom: 1.2rem; line-height: 1.3;
}
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.25rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
}
.hero__trust li { color: rgba(255,255,255,.6); font-size: .82rem; line-height: 1.3; }
.hero__trust strong {
  display: block; font-family: var(--font-titre); font-weight: 800;
  font-size: 1.35rem; color: #fff; margin-bottom: .1rem;
}
.hero__trust b { color: var(--or); font-weight: 800; }

/* Vitrine : logo chromé fondu dans le fond (sans démarcation) */
.hero__showcase { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.hero__logo { position: relative; z-index: 2; }
/* Halo doux (or) qui bave dans l'environnement, sans contour */
.hero__logo::before {
  content: ''; position: absolute; inset: -38%; z-index: -1;
  background: radial-gradient(circle at 50% 47%, rgba(200,162,76,.20) 0%, rgba(200,162,76,.05) 34%, transparent 62%);
}
.hero__logo img {
  width: clamp(260px, 33vw, 500px); height: auto; display: block;
  mix-blend-mode: screen;          /* la lumière du logo émerge du fond (pas de découpe) */
  opacity: .9;
  /* masque plumé : les bords se dissolvent progressivement dans le fond */
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 47%, #000 20%, rgba(0,0,0,.55) 48%, transparent 76%);
          mask-image: radial-gradient(ellipse 58% 62% at 50% 47%, #000 20%, rgba(0,0,0,.55) 48%, transparent 76%);
  animation: heroFloat 6.5s ease-in-out infinite;
}
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Bande expertises (5 domaines) */
.expertise { position: relative; }
.expertise__grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem;
}
.expertise-card {
  flex: 1 1 200px; max-width: 248px;
  position: relative; padding-top: 1.75rem;
  border: 1px solid var(--ligne); border-radius: var(--radius);
  background: var(--blanc); box-shadow: var(--shadow);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  overflow: hidden;
}
.expertise-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--or-grad); transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans);
}
.expertise-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(200,162,76,.45); }
.expertise-card:hover::before { transform: scaleX(1); }

/* Section EuroChef (membre du réseau) */
.eurochef {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0E2643 0%, var(--nuit) 55%, var(--nuit-deep) 100%);
  padding: var(--section-py) 0;
  color: #fff;
}
.eurochef .fx-glow { top: -20%; left: -10%; width: 560px; height: 560px; }
.eurochef__inner {
  position: relative; z-index: 2;
  display: grid; gap: 2.5rem; align-items: center;
}
.eurochef__media { display: flex; justify-content: center; }
.eurochef__logo-card {
  position: relative; background: #fff; border-radius: var(--radius-lg);
  padding: 2rem 2.25rem; box-shadow: 0 24px 60px rgba(0,0,0,.4);
  max-width: 420px; width: 100%;
}
.eurochef__logo-card::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
  border: 1px solid rgba(200,162,76,.5); pointer-events: none;
}
.eurochef__logo-card img { width: 100%; height: auto; display: block; }
.eurochef__since {
  margin-top: 1rem; text-align: center;
  font-family: var(--font-titre); font-weight: 700; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--or-fonce);
}
.eurochef__kick { color: var(--or); }
.eurochef__title { color: #fff; margin-bottom: .75rem; }
.eurochef__title span {
  background: var(--or-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.eurochef__lead { font-size: 1.15rem; color: rgba(255,255,255,.85); line-height: 1.6; margin-bottom: 1rem; max-width: 56ch; }
.eurochef__text { color: rgba(255,255,255,.66); line-height: 1.7; margin-bottom: 1.75rem; max-width: 56ch; }
.eurochef__benefits {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem;
  margin: 0 0 2rem; padding: 0; list-style: none;
}
.eurochef__benefit { display: flex; align-items: flex-start; gap: .8rem; }
.eurochef__benefit-ico {
  flex-shrink: 0; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  clip-path: var(--hex-clip); background: rgba(200,162,76,.14);
}
.eurochef__benefit-ico svg { width: 22px; height: 22px; stroke: var(--or); }
.eurochef__benefit strong { display: block; font-family: var(--font-titre); font-size: .95rem; color: #fff; margin-bottom: .15rem; }
.eurochef__benefit span { font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.45; }

/* En-têtes des pages intérieures */
.page-header--nuit {
  background: linear-gradient(160deg, #0E2643 0%, var(--nuit) 55%, var(--nuit-deep) 100%);
}
.page-header--nuit .hero__bg-picture img { opacity: .14; }
/* Nid d'abeille TRÈS discret, fondu vers le bas.
   NB : ::before est déjà le voile navy (plus bas) → on utilise ::after ici. */
.page-header--nuit::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../images/svg/ruche-or.svg") center top / 220px auto;
  opacity: .05;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
.page-header--nuit .container { z-index: 2; }
.page-header--nuit .ruche-mask { opacity: .07; }

/* Responsive : identité premium */
@media (max-width: 991px) {
  .hero__hex, .hero__chip { display: none; }
  .hero__showcase { min-height: auto; margin-bottom: .5rem; }
  .hero__logo img { width: clamp(220px, 60vw, 320px); margin: 0 auto; }
}
@media (min-width: 768px) {
  .eurochef__inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3.5rem; }
}
@media (max-width: 560px) {
  .eurochef__benefits { grid-template-columns: 1fr; }
  .hero__trust { gap: 1.25rem; }
  .hero__trust strong { font-size: 1.15rem; }
}

/* Réassurance, bandeaux, cartes, CTA, contact */

/* ---- Titres de section : accent doré moderne ---- */
.section-title--center::after {
  content: ''; display: block; width: 56px; height: 3px;
  margin: 1.1rem auto 0; background: var(--or-grad); border-radius: 2px;
}

/* ---- Réassurance : cartes flottantes qui chevauchent le hero ---- */
.reassurance {
  background: transparent;
  margin-top: -3.5rem;
  position: relative;
  z-index: 5;
  padding: 0 0 var(--section-py);
}
.reassurance__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.reassurance__item {
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
}
.reassurance__item::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--or-grad); transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans);
}
.reassurance__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.reassurance__item:hover::before { transform: scaleX(1); }
.reassurance__item .hexicone {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--nuit) 0%, var(--nuit-2) 100%);
}

/* ---- Cartes réalisations / produits : profondeur + survol ---- */
.real-card, .prod-card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.real-card:hover, .prod-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(200,162,76,.4);
}

/* ---- Bandeaux pages intérieures : plus designés + teintes thématiques ---- */
.page-header--nuit { padding: 5.5rem 0 4rem; }
.page-header--nuit .hero__bg-picture img { opacity: .22; }
.page-header--nuit::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(6,17,31,.92) 0%, rgba(10,26,47,.6) 55%, rgba(10,26,47,.25) 100%);
}
.page-header--froid::before {
  background:
    linear-gradient(105deg, rgba(6,17,31,.92) 0%, rgba(10,26,47,.55) 55%, rgba(14,38,67,.3) 100%),
    radial-gradient(ellipse at 78% 25%, rgba(90,150,210,.28) 0%, transparent 58%);
}
.page-header--cuisine::before {
  background:
    linear-gradient(105deg, rgba(6,17,31,.92) 0%, rgba(10,26,47,.55) 55%, rgba(40,20,10,.3) 100%),
    radial-gradient(ellipse at 78% 25%, rgba(226,84,27,.22) 0%, transparent 58%);
}
.page-header__title { position: relative; padding-bottom: 1rem; }
.page-header__title::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px;
  background: var(--or-grad); border-radius: 2px;
}

/* ---- CTA bandeau : plus premium ---- */
.cta-bandeau {
  background: linear-gradient(135deg, var(--nuit) 0%, var(--nuit-deep) 100%);
  padding: var(--space-12) 0;
}
.cta-bandeau::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../images/svg/ruche-or.svg") center / 240px auto;
  opacity: .05;
}
.cta-bandeau__title, .cta-bandeau h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }

/* Contact */
.contact-main { padding: var(--section-py) 0; background: var(--brume); }
.contact-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}
/* Carte formulaire surélevée qui chevauche le bandeau */
.contact-form-wrap {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 3;
}
.contact-form-wrap .section-title { margin-bottom: 1.5rem; }
.contact-form .form-control {
  border-radius: 10px;
  border: 1.5px solid var(--ligne);
  padding: .8rem 1rem;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.contact-form .form-control:focus {
  border-color: var(--or);
  box-shadow: 0 0 0 4px rgba(200,162,76,.15);
  outline: none;
}
.contact-form__submit { width: 100%; justify-content: center; margin-top: .5rem; }

/* Panneau infos sombre premium */
.contact-info {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(200,162,76,.16) 0%, transparent 55%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
/* Nid d'abeille discret uniquement (halo géré par le fond) */
.contact-info::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../images/svg/ruche-or.svg") 0 0 / 230px auto;
  opacity: .05;
}
.contact-info > * { position: relative; z-index: 1; }
.contact-info .section-title { color: #fff; }
.contact-info__block { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.75rem; }
.contact-info__item { display: flex; align-items: flex-start; gap: .9rem; }
.contact-info__item .hexicone--sm {
  width: 42px; height: 42px; flex-shrink: 0;
  background: rgba(200,162,76,.14);
}
.contact-info__item strong {
  display: block; font-family: var(--font-titre); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--or); margin-bottom: .15rem;
}
.contact-info__item address,
.contact-info__link { font-style: normal; color: rgba(255,255,255,.85); font-size: .95rem; }
a.contact-info__link:hover { color: var(--or); }
.contact-info__horaires { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; margin-bottom: 1.5rem; }
.contact-info__horaires-title { font-family: var(--font-titre); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--or); margin-bottom: .75rem; }
.horaires-table { width: 100%; font-size: .92rem; border-collapse: collapse; }
.horaires-table th { text-align: left; font-weight: 500; color: rgba(255,255,255,.7); padding: .3rem 0; }
.horaires-table td { text-align: right; color: #fff; font-weight: 600; padding: .3rem 0; }
.horaires-table__sav { color: var(--or) !important; }
.contact-info__cta-tel { width: 100%; justify-content: center; }

/* Contact : bloc « Nous trouver » (bas de page avant footer) */
.contact-find { padding: var(--section-py) 0; background: var(--brume-2); position: relative; }
.contact-find__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
.contact-find__lead { color: var(--gris-texte); line-height: 1.7; margin-bottom: 1.5rem; max-width: 46ch; }
.contact-find__facts { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.75rem; list-style: none; padding: 0; }
.contact-find__fact { display: flex; align-items: flex-start; gap: .9rem; }
.contact-find__ico {
  width: 42px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--or); background: rgba(200,162,76,.14);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.contact-find__ico svg { width: 20px; height: 20px; }
.contact-find__fact > span { color: var(--gris-texte); font-size: .92rem; line-height: 1.5; }
.contact-find__fact strong {
  display: block; font-family: var(--font-titre); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--nuit); margin-bottom: .12rem;
}
.contact-find__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.contact-find__map {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  min-height: 340px; border: 1px solid var(--ligne);
}
.contact-find__map iframe { display: block; height: 100%; filter: grayscale(.15) contrast(1.04); }
/* Placeholder carte (aucun embed configuré) */
.contact-find__map-ph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  height: 100%; min-height: 340px; text-decoration: none;
  background: linear-gradient(160deg, var(--nuit) 0%, var(--nuit-deep) 100%); color: #fff; overflow: hidden;
}
.contact-find__map-ruche { position: absolute; inset: 0; background: url("../images/svg/ruche-or.svg") center / 200px auto; opacity: .06; }
.contact-find__pin {
  position: relative; width: 68px; height: 74px; display: flex; align-items: center; justify-content: center;
  color: var(--nuit); background: linear-gradient(135deg, #F2DEA4, #C8A24C, #9A7728);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow: 0 8px 24px rgba(200,162,76,.45); margin-bottom: .5rem;
  transition: transform .35s ease;
}
.contact-find__pin svg { width: 30px; height: 30px; }
.contact-find__map-ph:hover .contact-find__pin { transform: translateY(-4px) scale(1.05); }
.contact-find__map-city { position: relative; font-family: var(--font-titre); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; }
.contact-find__map-cta { position: relative; font-size: .85rem; color: var(--or); font-weight: 600; }
.contact-find__map-ph:hover .contact-find__map-cta { text-decoration: underline; }

@media (min-width: 880px) {
  .contact-main__grid { grid-template-columns: 1.25fr .9fr; gap: 2.5rem; }
  /* Les deux cartes remontent d'autant → leurs sommets s'alignent */
  .contact-form-wrap,
  .contact-info { margin-top: -4.5rem; }
  .contact-find__grid { grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
}
@media (min-width: 768px) {
  .reassurance__item { padding: 1.75rem 1.5rem; }
}
@media (max-width: 767px) {
  .reassurance__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .reassurance { margin-top: -2.5rem; }
}
@media (max-width: 520px) {
  .reassurance__grid { grid-template-columns: 1fr; }
}

/* Gammes et « Pourquoi nous choisir » (pages froid/cuisine) */

/* ---- Nos gammes : cartes mieux rythmées (icône détachée du titre) ---- */
.rubriques__grid { gap: 1.5rem; margin-top: 2.5rem; }
.rubrique-card {
  display: flex;
  flex-direction: column;
  padding: 1.85rem 1.6rem;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.rubrique-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(200,162,76,.4);
}
.rubrique-card .hexicone { margin-bottom: 1.15rem; }
.rubrique-card__title {
  font-size: 1.12rem;
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--brume-2);
}
.rubrique-card--fire .rubrique-card__title { border-bottom-color: rgba(200,162,76,.35); }
.rubrique-card__list li { padding: .45rem 0; font-size: .9rem; line-height: 1.4; }

@media (min-width: 1024px) {
  .rubriques__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Pourquoi nous choisir : cartes centrées, icônes centrées, espacées ---- */
.differenciants__grid { gap: 1.75rem; margin-top: 2.5rem; }
.diff-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2.25rem 1.75rem;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.diff-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(200,162,76,.4);
}
.diff-item .hexicone { margin-bottom: 1.2rem; }
.diff-item h3 { font-size: 1.05rem; margin: .25rem 0 .65rem; }
.diff-item p { font-size: .9rem; line-height: 1.65; color: var(--gris-texte); max-width: 34ch; margin: 0 auto; }

/* Centrer le bloc si 3 items (évite l'étirement sur très grand écran) */
@media (min-width: 1024px) {
  .differenciants__grid--3col { max-width: 1040px; margin-left: auto; margin-right: auto; }
}

/* À propos et services : alignements */

/* ---- À propos : valeurs (icônes centrées + cartes) ---- */
.valeur-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 2.1rem 1.6rem;
  box-shadow: var(--shadow);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.valeur-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(200,162,76,.4); }
.valeur-card .hexicone { margin-bottom: 1.05rem; }
.valeur-card__title { font-size: 1.05rem; margin: .25rem 0 .55rem; }
.valeur-card__text { font-size: .88rem; line-height: 1.6; }

/* ---- À propos : section EuroChef (HTML utilise __text → texte était invisible) ---- */
.about-eurochef {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(200,162,76,.15) 0%, transparent 55%),
    linear-gradient(160deg, #0E2643 0%, var(--nuit) 55%, var(--nuit-deep) 100%);
}
/* Nid d'abeille discret uniquement (halo géré par le fond) */
.about-eurochef::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../images/svg/ruche-or.svg") 0 0 / 260px auto;
  opacity: .05;
}
.about-eurochef__inner { position: relative; z-index: 2; text-align: left; }
.about-eurochef__text .kick { color: var(--or); }
.about-eurochef__text h2 { color: #fff; margin-bottom: .85rem; }
.about-eurochef__text p { color: rgba(255,255,255,.74); line-height: 1.7; margin-bottom: 1rem; }
.about-eurochef__list {
  list-style: none; padding: 0; margin: 1.4rem 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; text-align: left;
}
.about-eurochef__list li {
  display: flex; align-items: flex-start; gap: .55rem;
  color: rgba(255,255,255,.88); font-size: .92rem; line-height: 1.4;
}
.about-eurochef__list li::before {
  content: '✓'; color: var(--or); font-weight: 800; flex-shrink: 0; line-height: 1.4;
}
/* Carte logo EuroChef officiel (cohérence avec l'accueil) */
.about-eurochef__logo-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 1.75rem 2rem; box-shadow: 0 22px 55px rgba(0,0,0,.4);
  max-width: 380px; width: 100%; margin: 0 auto; position: relative;
}
.about-eurochef__logo-card::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
  border: 1px solid rgba(200,162,76,.5); pointer-events: none;
}
.about-eurochef__logo-card img { width: 100%; height: auto; display: block; }
.about-eurochef__logo-since {
  margin-top: .9rem; text-align: center;
  font-family: var(--font-titre); font-weight: 700; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce);
}

/* ---- À propos : chiffres clés (HTML utilise __number → non stylé) sur fond nuit ---- */
.about-chiffres {
  position: relative; overflow: hidden;
  background: var(--nuit-deep);
}
.about-chiffres::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../images/svg/ruche-or.svg") center / 300px auto; opacity: .06;
}
.about-chiffres .container { position: relative; z-index: 2; }
.about-chiffres .section-title { color: #fff; }
.about-chiffres__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.chiffre-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: none;
  padding: 2rem 1.25rem;
  transition: transform var(--trans), border-color var(--trans);
}
.chiffre-card:hover { transform: translateY(-4px); border-color: rgba(200,162,76,.45); }
.chiffre-card__number {
  display: block;
  font-family: var(--font-titre); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  color: var(--or); line-height: 1;
}
.chiffre-card__unit { font-size: 1.2rem; color: var(--or-clair); margin-left: .12rem; font-weight: 700; }
.chiffre-card__label { color: rgba(255,255,255,.7); font-size: .86rem; margin-top: .55rem; line-height: 1.45; }

/* ---- Services : processus en timeline horizontale (corrige connecteur mal placé) ---- */
.processus__connector { display: none; }
.processus__timeline { max-width: 760px; }
.processus__step { position: relative; }
@media (min-width: 768px) {
  .processus__timeline { flex-direction: row; max-width: none; gap: 1.75rem; align-items: flex-start; }
  .processus__step { flex-direction: column; align-items: center; text-align: center; flex: 1; gap: 0; }
  .processus__num { margin-bottom: 1.25rem; position: relative; z-index: 2; }
  .processus__connector {
    display: block; position: absolute; top: 23px; left: 50%;
    width: calc(100% + 1.75rem); height: 2px; margin: 0; z-index: 0;
    background: linear-gradient(90deg, var(--or) 0%, rgba(200,162,76,.25) 100%);
  }
  .processus__body { padding: 0 .75rem; }
  .processus__body p { max-width: 32ch; margin: 0 auto; }
}

/* ---- Services : blocs (image et texte mieux alignés) ---- */
@media (min-width: 768px) {
  .service-bloc__inner { grid-template-columns: 1fr 1fr; }
  .service-bloc__inner--reverse .service-bloc__icon { order: 2; }
}
.service-bloc__img { box-shadow: var(--shadow-md); }

/* ---- À propos EuroChef : 2 colonnes (logo + texte) ---- */
@media (min-width: 768px) {
  .about-eurochef__inner { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 3.5rem; }
  .about-valeurs__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Catalogue : filtrage dynamique (AJAX) */
[hidden] { display: none !important; }
.products-grid { transition: opacity .15s ease; }
.products-grid.is-loading { opacity: .45; pointer-events: none; }
#cat-pagination:empty { display: none !important; }
.cat-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--gris-texte);
}
.cat-empty p { margin-bottom: 1.1rem; font-size: 1rem; }

/* Retouches diverses */

/* ---- Bleu électrique métallique : univers du froid ---- */
.text--ice,
.hero__title span.text--ice,
.page-header__title span.text--ice,
.section-title span.text--ice {
  background: var(--froid-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(92,250,253,.28);
}
.tag--froid { background: rgba(10,26,47,.88); color: var(--froid); border-color: rgba(92,250,253,.35); }
.page-header--froid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(92,250,253,.14) 0%, transparent 55%);
  pointer-events: none;
}
.hexicone--froid { background: var(--nuit); box-shadow: inset 0 0 0 1.5px rgba(92,250,253,.4); }
.hexicone--froid svg { color: var(--froid); }

/* ---- Accueil : cartes réalisations cliquables ---- */
.real-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.real-card__link:hover { color: inherit; }
.real-card__link:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.real-card__more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--or-fonce);
}
.real-card:hover .real-card__more { color: var(--or); }

/* ---- Page Réalisations : refonte en cartes claires ---- */
.realisations-grid-section { padding: var(--section-py) 0; }
.realisations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 600px)  { .realisations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .realisations-grid { grid-template-columns: repeat(3, 1fr); } }

.realisation-card {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,.28);
  transition: transform var(--trans), box-shadow var(--trans);
}
.realisation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 44px rgba(0,0,0,.4);
}
.realisation-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--nuit-2);
}
.realisation-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.realisation-card:hover .realisation-card__media img { transform: scale(1.05); }
.realisation-card__badge {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
}
.realisation-card__body {
  padding: 1.25rem 1.35rem 1.45rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
}
.realisation-card__title {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--nuit);
  line-height: 1.35;
}
.realisation-card__desc {
  font-size: .875rem;
  color: var(--gris-texte);
  line-height: 1.6;
  flex: 1;
}
.realisation-card__year {
  font-size: .78rem;
  font-weight: 600;
  color: var(--or-fonce);
  letter-spacing: .04em;
}
.realisation-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--nuit-2) 0%, var(--nuit) 100%);
}
.section-nuit .realisations-empty__title { color: var(--blanc); }
.section-nuit .realisations-empty__text { color: var(--acier-clair); }

/* ---- Placeholder produit (catalogue & fiches) ---- */
.produit-placeholder {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: linear-gradient(135deg, var(--brume) 0%, var(--brume-2) 100%);
  color: var(--acier);
}
.produit-placeholder__text {
  font-size: .75rem;
  font-weight: 500;
  color: var(--acier);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---- Fiche produit : hiérarchie & finitions ---- */
.produit-detail__inner { gap: 3rem; }
.produit-detail__title {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  margin: .65rem 0 1.15rem;
  line-height: 1.25;
}
.produit-tag-cat {
  display: inline-flex;
  align-items: center;
  padding: .3rem .8rem;
  border-radius: 99px;
  background: var(--nuit);
  color: var(--or-clair);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.produit-detail__meta { margin-bottom: 1.5rem; }
.produit-detail__description {
  font-size: .975rem;
  margin-bottom: 2rem;
}
.produit-detail__specs { margin-bottom: 2.25rem; }
.specs-title {
  font-family: var(--font-titre);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nuit);
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid rgba(200,162,76,.35);
}

/* Formulaire de devis produit */
.produit-devis-form {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-top: 3px solid var(--or);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  margin-top: 2.25rem;
}
.produit-devis-form__title {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--nuit);
  margin-bottom: 1.35rem;
}
.form-field { margin-bottom: 1.15rem; }
.form-row--2col { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 600px) { .form-row--2col { grid-template-columns: 1fr 1fr; } }
.form-input {
  display: block;
  width: 100%;
  padding: .8rem 1rem;
  font-family: var(--font-corps);
  font-size: 1rem;
  color: var(--encre);
  background: var(--brume);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
}
.form-input:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(200,162,76,.18);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-field--checkbox { margin: 1.25rem 0; }
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
}
.form-checkbox input { margin-top: .25rem; accent-color: var(--or); width: 16px; height: 16px; flex-shrink: 0; }
.form-checkbox__label { font-size: .82rem; color: var(--gris-texte); line-height: 1.55; }
.form-feedback {
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.form-feedback--success { background: rgba(56,161,105,.12); color: #276749; border: 1px solid rgba(56,161,105,.3); }
.form-feedback--error   { background: rgba(229,62,62,.1);  color: #9b2c2c; border: 1px solid rgba(229,62,62,.3); }
.produit-devis-form .btn-gold {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.produit-devis-form .btn-loader {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(6,17,31,.25);
  border-top-color: var(--nuit-deep);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.produit-devis-form .btn-loader[hidden] { display: none; }
.similaires__cta { text-align: center; margin-top: 2.25rem; }

/* ---- Footer : adresse cliquable ---- */
a.site-footer__address-line {
  color: inherit;
  text-decoration: none;
  transition: color var(--trans-fast);
}
a.site-footer__address-line:hover { color: var(--or-clair); }

/* ---- À propos : « 2ème génération » en entier ---- */
.chiffre-card__unit--ord { font-size: 1.2rem; vertical-align: super; }

/* ---- Boutons autonomes btn-gold / btn-nuit / btn-outline :
        même socle que .btn (ils étaient rendus comme de simples liens) ---- */
.btn-gold, .btn-nuit, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 2rem;
  font-family: var(--font-titre);
  font-size: .9rem;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  min-height: 44px;
  text-decoration: none;
  transition: filter var(--trans), box-shadow var(--trans), transform var(--trans-fast),
              border-color var(--trans-fast), color var(--trans-fast), background var(--trans-fast);
}
.btn-gold:focus-visible, .btn-nuit:focus-visible, .btn-outline:focus-visible {
  outline: 3px solid var(--or-clair);
  outline-offset: 3px;
}
.btn-nuit svg, .btn-outline svg, .btn-gold svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- Surtitres (petites capitales dorées au-dessus des titres) ---- */
.surtitre {
  font-family: var(--font-corps);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--or);
  margin-bottom: .6rem;
}
.surtitre--or   { color: var(--or); }
.surtitre--nuit { color: var(--nuit); }

/* ---- En-têtes de section génériques ---- */
.section-header { margin-bottom: 2rem; }
.section-header--center { text-align: center; }
.section-header--center .section-title { margin-left: auto; margin-right: auto; }

/* ---- Section fond or ---- */
.section-or {
  background: linear-gradient(120deg, #E7CE92 0%, #C8A24C 45%, #B08A38 100%);
  color: var(--nuit-deep);
}

/* ---- Réalisations : bandeau CTA « Votre projet » ---- */
.realisations-cta { padding: 4.5rem 0; position: relative; overflow: hidden; }
.realisations-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/svg/deco-ruche.svg') repeat;
  opacity: .06;
  pointer-events: none;
}
.realisations-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}
.realisations-cta__text { max-width: 620px; }
.realisations-cta__title {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  color: var(--nuit-deep);
  margin-bottom: .75rem;
  line-height: 1.25;
}
.realisations-cta__sub {
  color: rgba(6,17,31,.78);
  line-height: 1.7;
  margin-bottom: 0;
}
.realisations-cta__actions {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* Sur fond or, le bouton « outline nuit » doit être sombre (pas blanc) */
.section-or .btn-outline--nuit {
  border-color: rgba(6,17,31,.55);
  color: var(--nuit-deep);
  background: transparent;
}
.section-or .btn-outline--nuit:hover {
  border-color: var(--nuit-deep);
  background: rgba(6,17,31,.08);
  color: var(--nuit-deep);
}
.section-or .btn-nuit:hover {
  background: var(--nuit-deep);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(6,17,31,.35);
}
@media (min-width: 880px) {
  .realisations-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ===== PRINT ===== */
@media print {
  .util-bar, .site-header, .hamburger, .site-nav, .site-footer,
  .btn, .cookies-banner, .edit-lock-btn { display: none !important; }
  body { color: #000; }
  a { color: #000; }
  .hero { min-height: auto; background: none; color: #000; }
  .hero__title, .hero__text { color: #000; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
  .hero__content,
  .hero__badge-wrap {
    animation: none;
    opacity: 1;
    transform: none;
  }
}