/* ===== LES DEUX POLICES DE LA CHARTE, HEBERGEES CHEZ NOUS =====
   ⛔ Elles etaient DECLAREES partout et CHARGEES nulle part. `Outfit` est
   ecrite 155 fois dans le CSS, `Bebas Neue` 66 fois — et aucun @font-face,
   aucun next/font, aucun lien Google actif ne les servait. Tout le texte du
   site tombait sur la police du systeme.
   Pire : `Bebas Neue` s'affichait correctement sur le poste de developpement
   parce qu'elle y etait installee dans Windows. Chez un client, le logo
   « PARQUET » passait de 114 a 194 px : les titres etaient 38 a 70 % plus
   larges que prevu, sans que personne le voie (Sam, 20/09).

   ⛔ LES NOMS DE FAMILLE SONT CONSERVES A L'IDENTIQUE. C'est ce qui permet aux
   221 declarations existantes de resoudre SANS EN REECRIRE UNE SEULE.
   `next/font/google` aurait renomme la famille (`__Outfit_a1b2c3`) : les 221
   regles ne l'auraient jamais trouvee.

   ⛔ HEBERGEES ICI, PAS CHEZ GOOGLE : passer par fonts.googleapis.com
   transmettrait l'adresse IP de chaque visiteur aux Etats-Unis.

   (!) Outfit est une police VARIABLE : un seul fichier couvre les cinq
   graisses 300 a 700. Origine et licences : public/fonts/LICENCES.md */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --orange:      #B5622A;
  --orange-rim:  rgba(181,98,42,0.22);
  --orange-bg:   rgba(181,98,42,0.07);
  --border-o:    rgba(181,98,42,0.35);
  --bg:          #FFFFFF;
  --cream:       #FFFFFF;
  --card:        #FFFFFF;
  /* ⛔ --border, --text, --muted, --dim et --input-bg etaient declares ICI
     ET dans le second :root plus bas, avec des valeurs differentes. Le second
     gagnait — meme specificite, il vient apres — donc ces cinq lignes etaient
     MORTES, alors que 435 regles du site s'appuient sur elles. */
}
/* ══ BANDEAU CONFIANCE ══ */
.hd-trust {
  background: var(--cream);
  border-bottom: 1px solid var(--dim);
}
.hd-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 36px;
}
.hd-trust-badge {
  width: 20px; height: 20px;
  background: var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hd-trust-badge svg { color: #fff; }
.hd-trust-inner > span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}

/* ══ BARRE SUPPORT PRO ══ */
.hd-pro {
  background: var(--text);
}
.hd-pro-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  height: 46px;
}
.hd-pro-left { display: flex; align-items: center; }
.hd-pro-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .76rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: .03em;
}
.hd-pro-item svg { color: #fff; }
.hd-pro-right {
  display: flex;
  align-items: center;
  gap: 0;
}
.hd-pro-contact {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: .03em;
  padding: .35rem 1rem;
  border-radius: 6px;
  transition: all .2s;
}
.hd-pro-contact strong {
  font-weight: 600;
  color: #fff;
}
.hd-pro-contact:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.hd-pro-icon-wrap {
  width: 30px; height: 30px;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.hd-pro-icon-wrap svg { color: #fff; }
.hd-pro-contact:hover .hd-pro-icon-wrap {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.1);
}
.hd-pro-icon-wa { border-color: rgba(255,255,255,.3); }
.hd-pro-icon-wa svg { color: #fff; }
.hd-pro-wa:hover .hd-pro-icon-wa {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.1);
}
.hd-pro-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.2);
  margin: 0 .6rem;
}

/* ══ BARRE UTILITAIRE (LIGNE 1) ══ */
.hd-utility{background:var(--text)}
.hd-utility-inner{max-width:1200px;margin:0 auto;padding:7px 2rem;display:flex;align-items:center;justify-content:center;gap:0}
.hd-utility-left{display:flex;align-items:center;gap:0}
.hd-utility-right{display:flex;align-items:center}
.hd-utility-item{display:flex;align-items:center;gap:.5rem;font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:500;color:#FFFFFF !important;letter-spacing:.02em;line-height:1;white-space:nowrap}
.hd-utility-item--support{font-weight:500}
.hd-utility-item--toggle{cursor:pointer}
.hd-utility-item strong{font-weight:600;color:#FFFFFF !important}
.hd-utility .hd-utility-item,
.hd-utility .hd-utility-item--support,
.hd-utility .hd-utility-item--toggle,
.hd-utility .hd-utility-link,
.hd-utility .hd-utility-item span,
.hd-utility .hd-utility-item strong {
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  opacity:1 !important;
}
.hd-utility-item > img,
.hd-utility-item > svg{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  display:block !important;
  vertical-align:middle !important;
  flex-shrink:0;
}
.hd-utility-item > img{object-fit:contain}
.hd-utility-item > svg{color:#FFFFFF !important}
.hd-utility-icon{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  flex:0 0 22px !important;
  display:block !important;
  object-fit:contain;
}
.hd-utility-icon--whatsapp{transform:scale(1.1);transform-origin:center}
.hd-utility-icon--eye{stroke-width:1.95 !important;transform:scale(1.08);transform-origin:center}
/* Pastilles rondes du bandeau (support / téléphone / WhatsApp) — icônes SVG nettes */
.hd-utility-pill{
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 40px;
}
.hd-utility-pill > svg{
  width:24px !important;height:24px !important;
  min-width:24px !important;min-height:24px !important;
  max-width:24px !important;max-height:24px !important;
  color:#FFFFFF !important;
  display:block !important;
}
.hd-utility-pill--wa{background:#25D366}
.hd-utility-link{text-decoration:none;transition:color .15s;color:#FFFFFF !important}
.hd-utility-link:visited{color:#FFFFFF !important}
.hd-utility-link:hover{color:#FFFFFF !important}
.hd-utility-link:hover svg{color:#FFFFFF !important}
.hd-utility-sep{width:1px;height:16px;background:rgba(255,255,255,.15);margin:0 .9rem;flex-shrink:0}
.hd-price-toggle{display:inline-flex;align-items:center;width:32px;height:18px;background:rgba(255,255,255,.2);border-radius:12px;position:relative;margin-left:.45rem;transition:background .3s;vertical-align:middle}
.hd-price-toggle::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:left .3s}
.hd-price-toggle.active{background:var(--orange)}
.hd-price-toggle.active::after{left:16px}

/* ══ HEADER PRINCIPAL ══ */
.site-header {
  background: #fff;
  border-bottom: none;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.hd-logo {
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}
.hd-logo-mark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .25rem;
}
.hd-logo-p {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  letter-spacing: .04em;
  color: var(--text);
  line-height: 1;
}
.hd-logo-d {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  letter-spacing: .04em;
  color: var(--orange);
  line-height: 1;
}
.hd-logo-d sup {
  font-size: .4em;
  color: var(--orange);
  vertical-align: super;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}
.hd-logo-sub {
  font-family: 'Outfit', sans-serif;
  font-size: .44rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .2rem .5rem;
  background: rgba(44, 54, 66, 0.08);
  border: 1px solid rgba(44, 54, 66, 0.28);
  border-radius: 4px;
  white-space: nowrap;
}
.hd-logo-sub::before,.hd-logo-sub::after {
  content: '';
  width: 12px;
  height: 1.5px;
  background: var(--text);
  opacity: .4;
  flex-shrink: 0;
}

/* Recherche */
.hd-search {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 280px;
  max-width: 520px;
}
.hd-search-input {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 400;
  color: var(--text);
  padding: .7rem 1.1rem;
  border: 1.5px solid #C8C0B8;
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: var(--input-bg);
  outline: none;
  transition: border-color .2s;
}
.hd-search-input::placeholder { color: var(--muted); font-weight: 300; font-size: .75rem; }
.hd-search-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(181,98,42,.15); }
.hd-search-btn {
  width: 48px;
  height: 44px;
  background: var(--orange);
  border: 1.5px solid var(--orange);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.hd-search-btn:hover { background: #C8743A; }
.hd-search{position:relative}
.hd-search-results{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid var(--dim);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.12);z-index:200;max-height:400px;overflow-y:auto}
.hd-search-results.open{display:block;animation:acPanelIn .2s ease}
.hd-sr-group{padding:.6rem 0}
.hd-sr-group:not(:last-child){border-bottom:1px solid var(--dim)}
.hd-sr-group-title{font-family:'Outfit',sans-serif;font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 1rem .4rem}
.hd-sr-item{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;cursor:pointer;text-decoration:none;color:var(--text);transition:background .15s}
.hd-sr-item:hover{background:var(--orange-bg)}
.hd-sr-icon{width:28px;height:28px;background:var(--input-bg);border:1px solid var(--dim);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hd-sr-icon svg{width:14px;height:14px;color:var(--orange)}
.hd-sr-info{flex:1;min-width:0}
.hd-sr-name{font-size:.75rem;font-weight:600;color:var(--text)}
.hd-sr-name mark{background:var(--orange-bg);color:var(--orange);font-weight:700;border-radius:2px;padding:0 1px}
.hd-sr-desc{font-size:.6rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-sr-arrow{font-size:.7rem;color:var(--orange);flex-shrink:0}
.hd-sr-empty{padding:1.2rem 1rem;text-align:center;font-size:.75rem;color:var(--muted)}

/* Actions */
.hd-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.hd-actions > * {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  padding: 0 .1rem;
}
.hd-act--devis .hd-act-icon {
  border-color: var(--orange-rim) !important;
  background: var(--orange-bg) !important;
}
.hd-act--devis .hd-act-icon svg {
  color: var(--orange) !important;
}
.hd-act--devis .hd-act-text {
  color: var(--orange) !important;
  font-weight: 700 !important;
}
.hd-act {
  display: flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  padding: .4rem .55rem;
  border-radius: 8px;
  transition: all .2s;
  position: relative;
  line-height: 1;
}
.hd-act:hover { background: var(--input-bg); }
.hd-act-icon {
  width: 36px;
  height: 36px;
  background: var(--input-bg);
  border: 1.5px solid var(--dim);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.hd-act-icon svg { color: var(--text); width: 20px; height: 20px; stroke-width: 1.7; transition: color .2s; }
.hd-act:hover .hd-act-icon {
  border-color: var(--orange-rim);
  background: var(--orange-bg);
}
.hd-act:hover .hd-act-icon svg { color: var(--orange); }
.hd-act-text {
  font-family: 'Outfit', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
  line-height: 1.2;
  transition: color .2s;
  white-space: nowrap;
}
.hd-act:hover .hd-act-text { color: var(--orange); }

/* User bar */
.hd-user-bar {
  border-top: 1px solid var(--dim);
  border-bottom: 1px solid var(--dim);
  background: #FAFAF8;
}
.hd-user-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 34px;
  gap: 0;
}
.hd-user-inner > * {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}
.hd-user-inner .hd-act {
  padding: .2rem .5rem;
  gap: .35rem;
}
.hd-user-inner .hd-act-icon {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
}
.hd-user-inner .hd-act-icon svg {
  width: 15px; height: 15px; color: var(--text);
}
.hd-user-inner .hd-act-text {
  font-size: .7rem; color: var(--text); letter-spacing: .03em; font-weight: 600;
}
.hd-user-inner .hd-act:hover .hd-act-text { color: var(--orange); }
.hd-user-inner .hd-act:hover .hd-act-icon { border-color: var(--orange-rim); background: var(--orange-bg); }
.hd-user-inner .hd-act:hover .hd-act-icon svg { color: var(--orange); }
.hd-user-inner .hd-panel-chevron { width: 8px; height: 8px; color: var(--text); }
.hd-user-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
  padding: 0 .8rem;
  height: 100%;
  transition: color .2s;
}
.hd-user-item svg { color: var(--muted); transition: color .2s; }
.hd-user-item:hover { color: var(--orange); }
.hd-user-item:hover svg { color: var(--orange); }

/* Cart */
.hd-cart-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hd-cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  background: var(--orange);
  color: #fff;
  font-size: .5rem;
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(181,98,42,.3);
}
/* Selection badge */
.hd-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hd-select-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  background: var(--orange);
  color: #fff;
  font-size: .5rem;
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(181,98,42,.3);
}
/* ── Tracking dropdown ── */
.hd-tracking-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hd-tracking-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
}
.hd-tracking-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid var(--dim);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 100;
  max-height: 80vh; overflow-y: auto;
}
.hd-tracking-wrap.open .hd-tracking-panel {
  display: block;
  animation: acPanelIn .2s ease;
  border-color: var(--orange);
}

/* ── Selection dropdown ── */
.hd-selection-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hd-selection-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
}
.hd-selection-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid var(--dim);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 100;
  max-height: 80vh; overflow-y: auto;
}
.hd-selection-wrap.open .hd-selection-panel {
  display: block;
  animation: acPanelIn .2s ease;
  border-color: var(--orange);
}
.hd-selection-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
}
.hd-selection-body {
  padding: 1.2rem 1.4rem;
}
.hd-selection-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  padding: .8rem 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}
.hd-selection-empty svg {
  color: var(--dim);
  margin-bottom: .3rem;
}
.hd-selection-hint {
  font-size: .68rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
}
.hd-selection-footer {
  padding: 0 1.4rem 1.3rem;
}

/* ── Shared panel chevron ── */
.hd-panel-chevron {
  margin-left: .1rem;
  transition: transform .2s;
  color: var(--muted);
  flex-shrink: 0;
}
.hd-tracking-wrap.open .hd-panel-chevron,
.hd-selection-wrap.open .hd-panel-chevron,
.hd-sav-wrap.open .hd-panel-chevron {
  transform: rotate(180deg);
}

/* ── SAV dropdown ── */
.hd-sav-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hd-sav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
}
.hd-sav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid var(--dim);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 100;
  max-height: 80vh; overflow-y: auto;
}
.hd-sav-wrap.open .hd-sav-panel {
  display: block;
  animation: acPanelIn .2s ease;
  border-color: var(--orange);
}
/* ══ SAV/Panel form fields ══ */
.hd-panel-phone { text-decoration:none; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
  margin:.6rem 0 .8rem; padding:.55rem .8rem;
  background:#f5f2ef; border-radius:7px; border-left:3px solid var(--border);
}
.hd-panel-phone svg { color:var(--text); flex-shrink:0; }
.hd-panel-phone-text { font-size:.68rem; color:#3D4A52; font-weight:500; }
.hd-panel-phone:hover { border-color:#B5622A; }
.hd-panel-phone:hover .hd-panel-phone-text { color:#B5622A; }
.hd-panel-phone:hover svg { color:#B5622A; }
.textarea-wrap { position:relative; }
.textarea-wrap textarea { width:100%; box-sizing:border-box; }
.char-count { position:absolute; bottom:.5rem; right:.6rem; font-size:.58rem; font-weight:500; color:#7A8A94; pointer-events:none; }
.char-count.warn { color:#B5622A; font-weight:600; }
.phone-wrap { display:flex; gap:0; align-items:stretch; }
.phone-prefix {
  flex-shrink:0; width:80px; padding:.55rem 1.6rem .55rem .6rem;
  border:1.5px solid #B0A89E; border-right:none;
  border-radius:7px 0 0 7px;
  background-color:#f5f2ef;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233D4A52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .5rem center;
  font-family:'Outfit',sans-serif; font-size:.75rem; font-weight:600;
  color:#3D4A52; cursor:pointer; outline:none;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.phone-prefix:focus { border-color:#3D4A52; }
.phone-wrap input[type="tel"] { flex:1; border-radius:0 7px 7px 0 !important; border-left:none !important; min-width:0; }
.phone-tel {
  flex:1 !important; min-width:0 !important;
  border:1.5px solid #B0A89E !important;
  border-left:0 !important;
  border-radius:0 7px 7px 0 !important;
}
.phone-tel:focus { border-color:#B5622A !important; box-shadow:0 0 0 3px rgba(181,98,42,.15) !important; }
.form-hint { display: block; font-size: .58rem; color: #7A8A94; font-style: italic; margin-top: .15rem; line-height: 1.4; }
.form-error-msg { display: none; font-size: .58rem; color: #C0392B; font-weight: 600; margin-top: .15rem; }
.form-field-error .hd-account-input { border-color: #C0392B !important; box-shadow: 0 0 0 2px rgba(192,57,43,.12) !important; }
.form-field-error .form-error-msg { display: block; }
.form-field-error .hd-account-label { color: #C0392B; }
.hd-panel-reassurance {
  display: flex; align-items: center; gap: .4rem;
  font-size: .58rem; color: #5FA535; font-weight: 600;
  background: rgba(95,165,53,.06); border: 1px solid rgba(95,165,53,.15);
  border-radius: 5px; padding: .4rem .6rem; margin-top: .5rem;
  line-height: 1.4; letter-spacing: .02em;
}
.hd-panel-reassurance svg { flex-shrink: 0; color: #5FA535; }


/* ── Cart dropdown ── */
.hd-cart-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hd-cart-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
}
.hd-cart-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid var(--dim);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 100;
  max-height: 80vh; overflow-y: auto;
}
.hd-cart-dropdown-wrap.open .hd-cart-panel {
  display: block;
  animation: acPanelIn .2s ease;
  border-color: var(--orange);
}
.hd-cart-dropdown-wrap.open .hd-panel-chevron {
  transform: rotate(180deg);
}
.hd-cart-panel-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
}
.hd-cart-panel-footer {
  padding: 0 1.4rem 1.3rem;
}
.hd-cart-panel-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 0;
  margin-bottom: .5rem;
  border-top: 1px solid var(--dim);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
}
.hd-cart-panel-price {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}

.hd-user-sep {
  width: 1px;
  height: 14px;
  background: var(--dim);
}

/* ── Account dropdown ── */
.hd-account-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hd-account-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
}
.hd-account-chevron {
  margin-left: .15rem;
  transition: transform .2s;
  color: var(--muted);
}
.hd-account-wrap.open .hd-account-chevron {
  transform: rotate(180deg);
}
.hd-account-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid var(--dim);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 100;
  max-height: 80vh; overflow-y: auto;
}
.hd-account-wrap.open .hd-account-panel {
  display: block;
  animation: acPanelIn .2s ease;
  border-color: var(--orange);
}
@keyframes acPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.hd-account-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem .8rem;
  border-bottom: 1px solid var(--dim);
}
.hd-account-panel-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .04em;
  color: var(--text);
}
.hd-account-panel-create {
  font-size: .72rem;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
.hd-account-panel-create:hover { text-decoration: underline; }
.hd-account-panel-body {
  padding: 1rem 1.4rem 1.3rem;
}
.hd-account-label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .35rem;
  letter-spacing: .03em;
}
.hd-account-label:not(:first-child) {
  margin-top: .8rem;
}
.hd-account-req {
  color: var(--orange);
  font-weight: 700;
}
.hd-account-input {
  width: 100%;
  font-family: 'Outfit', sans-serif;
  font-size: .8rem;
  color: var(--text);
  padding: .65rem .9rem;
  border: 1.5px solid var(--dim);
  border-radius: 7px;
  background: var(--input-bg);
  outline: none;
  transition: border-color .2s;
}
.hd-account-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(181,98,42,.15);
}
.hd-account-input::placeholder {
  color: var(--muted);
  font-weight: 300;
}
.hd-account-pw-wrap {
  position: relative;
}
.hd-account-pw {
  padding-right: 2.8rem;
}
.hd-account-pw-toggle {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: .2rem;
  transition: color .2s;
}
.hd-account-pw-toggle:hover { color: var(--orange); }
.hd-account-submit {
  width: 100%;
  margin-top: 1rem;
  padding: .7rem;
  font-family: 'Outfit', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: #3D4A52;
  border: 2px solid #3D4A52;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  transition: all .2s;
}
.hd-account-submit:hover {
  background: #B5622A;
  border-color: #B5622A;
}
.hd-account-submit span {
  font-size: .65rem;
}
.hd-account-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .8rem;
}
.hd-account-remember {
  font-size: .68rem;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
}
.hd-account-remember input[type="checkbox"] {
  width: 14px; height: 14px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--dim);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.hd-account-remember input[type="checkbox"]:checked {
  border-color: var(--orange);
  background: var(--orange);
}
.hd-account-remember input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
}
.hd-account-forgot {
  font-size: .68rem;
  font-weight: 500;
  color: var(--orange);
  text-decoration: none;
}
.hd-account-forgot:hover { text-decoration: underline; }
.hd-account-legal {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--dim);
  font-size: .6rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}
.hd-account-legal a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 500;
}
.hd-account-legal a:hover { text-decoration: underline; }
.hd-panel-consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .8rem;
  margin-bottom: .2rem;
}
.hd-panel-consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--dim);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.hd-panel-consent input[type="checkbox"]:checked {
  border-color: var(--orange);
  background: var(--orange);
}
.hd-panel-consent input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
}
.hd-panel-consent-text {
  font-size: .62rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}
.hd-panel-consent-text a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hd-panel-consent-text a:hover { opacity: .75; }


/* Partner CTA */
.hd-act--partner .hd-act-icon--partner {
  background: var(--orange-bg);
  border-color: var(--orange-rim);
}
.hd-act--partner .hd-act-icon--partner svg { color: var(--orange); }
.hd-act--partner .hd-act-text { color: var(--orange); }
.hd-act--partner:hover .hd-act-icon--partner {
  background: var(--orange);
  border-color: var(--orange);
}
.hd-act--partner:hover .hd-act-icon--partner svg { color: #fff; }


/* ══ Grille tarifaire pro ══ */
.hd-grille-wrap { position: relative; }
.hd-grille-wrap.open .hd-panel-chevron { transform: rotate(180deg); }
.hd-grille-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
}
.hd-grille-panel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 380px; max-width: 95vw;
  background: #fff; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
  z-index: 1000; overflow: hidden;
}
.hd-grille-wrap.open .hd-grille-panel { display: block; }

.nav-cta-partner {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem 1.2rem;
  background: var(--orange);
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(181,98,42,.2);
  border: none;
  cursor: pointer;
  line-height: 1;
}
.nav-cta-partner span { font-size: .55rem; }
.nav-cta-partner:hover {
  background: #C8743A;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(181,98,42,.3);
}
/* ── Partner dropdown ── */
.hd-partner-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hd-partner-toggle {
  cursor: pointer;
  border: none;
}
.hd-partner-toggle .hd-panel-chevron {
  color: #fff;
}
.hd-partner-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--dim);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 100;
}
.hd-partner-wrap.open .hd-partner-panel {
  display: block;
  animation: acPanelIn .2s ease;
  border-color: var(--orange);
}
.hd-partner-wrap.open .hd-panel-chevron {
  transform: rotate(180deg);
}
.hd-partner-intro {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: .6rem;
}
/* ══ MAIN NAV ══ */
/* C'est le bloc PARENT qui colle : la barre se declarait collante elle-meme,
   mais son parent faisait exactement sa hauteur, donc elle n'avait aucune
   place pour coller (Sam 28/08). */
.pd-nav-collante {
  position: sticky;
  top: 0;
  z-index: 60;
}
.main-nav {
  background: #fff;
  border-top: 1px solid var(--dim);
  border-bottom: 2px solid var(--dim);
  position: relative;
}
.main-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  height: 46px;
  gap: 0;
}
.nav-sep{display:inline-block;width:1px;height:15px;background:rgba(0,0,0,.12);margin:0 .6rem;flex-shrink:0;vertical-align:middle}
.main-nav-inner .nav-drop-wrap:first-child .nav-link {
  padding-left: 0;
}
.nav-link--drop {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.nav-link--drop svg { color: var(--text); transition: all .2s; margin-left: .15rem; }

/* ── NAV LINKS ── */
.nav-link {
  font-family: 'Outfit', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 1.2rem;
  transition: color .2s;
  white-space: nowrap;
}
.nav-link:hover {
  color: var(--orange);
}
.nav-link:hover svg { color: var(--orange); }
.nav-link.active {
  color: var(--orange);
}

/* ══ MEGA MENU ══ */
.nav-drop-wrap {
  position: static;
  display: flex;
  align-items: center;
  height: 50px;
}
.nav-drop-wrap .nav-link { cursor: pointer; }

/* Active state */
.nav-drop-wrap.open .nav-link { color: var(--orange); }
.nav-drop-wrap.open .nav-link--drop svg {
  transform: rotate(180deg);
  color: var(--orange);
}

/* Panel */
.mega-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 2px solid var(--orange);
  border-bottom: 1.5px solid var(--dim);
  box-shadow: 0 10px 35px rgba(0,0,0,.08);
  z-index: 50;
}
.nav-drop-wrap.open .mega-panel {
  display: block;
  animation: megaFade .2s ease;
}
@keyframes megaFade {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.mega-inner {
  max-width: 100%;
  margin: 0 auto;
  /* Plus d'air autour du panneau et entre les colonnes (Sam 07/09). */
  padding: 2.6rem 3.4rem 2.8rem;
  display: flex;
  gap: 2.4rem;
}

/* ── Colonnes type de sol ── */
.mega-col {
  flex: 1;
  min-width: 0;
  padding: 0 2.6rem;
  border-right: 1px solid var(--dim);
  display: flex;
  flex-direction: column;
  /* ⛔ Sam (11/09) : « je ne veux pas de la bande pour defiler a droite,
     supprime tout de suite ». La colonne etait plafonnee a 360 px et sortait
     une barre de defilement des qu'elle debordait. Elle prend la hauteur de
     son contenu : le panneau du menu montre tout, ou rien ne s'y met. */
  overflow: visible;
  scrollbar-width: thin;
  scrollbar-color: rgba(181,98,42,.3) rgba(181,98,42,.08);
}
.mega-col::-webkit-scrollbar { width: 6px; }
.mega-col::-webkit-scrollbar-track { background: rgba(181,98,42,.08); border-radius: 4px; }
.mega-col::-webkit-scrollbar-thumb { background: rgba(181,98,42,.3); border-radius: 4px; }
.mega-col::-webkit-scrollbar-thumb:hover { background: rgba(181,98,42,.5); }
.mega-col::-webkit-scrollbar-thumb:active { background: #B5622A; }
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { border-right: none; }

.mega-col-title {
  position: sticky; top: 0; background: #fff; padding: .4rem 0; z-index: 2;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .05em;
  color: var(--text);
  margin-bottom: .7rem;
  line-height: 1;
  text-align: center;
}

/* ── Mini-cartes marques ── */
.mega-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .8rem;
  margin-bottom: .35rem;
  border: 1.5px solid #C8C0B8;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  transition: all .2s;
}
.mega-brand:hover {
  border-color: var(--orange);
  box-shadow: 0 2px 12px rgba(181,98,42,.12);
}
.mega-brand-logo {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.mega-brand-logo svg { width: 30px; height: 30px; }
.mega-brand-info { flex: 1; min-width: 0; }
.mega-brand-name {
  font-family: 'Outfit', sans-serif;
  font-size: .72rem; font-weight: 700;
  color: var(--text); line-height: 1.2;
}
.mega-brand-desc {
  font-family: 'Outfit', sans-serif;
  font-size: .56rem; font-weight: 400;
  color: var(--muted); line-height: 1.3; margin-top: .1rem;
}
/* Les collections d'une marque, sous sa carte : matiere > marque > collection
   (Sam 27/08). Lignes sobres pour ne pas concurrencer la carte de marque. */
.mega-coll-liste { margin: .35rem 0 .5rem; display: flex; flex-direction: column; gap: .05rem; }
/* La liste masquee doit vraiment disparaitre : « display: flex » ci-dessus
   l'emportait sur l'attribut hidden, et les trois poses s'empilaient. */
.mega-coll-liste[hidden] { display: none; }
/* Le raccourci vers le catalogue filtre, en fin de liste : le menu montre les
   collections, la page montre les decors et laisse affiner (Sam 30/08). */
.mega-raccourci {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  margin: .5rem 0 .2rem; padding: .45rem .6rem;
  background: rgba(181,98,42,.07); border-radius: 7px;
  font-family: 'Outfit', sans-serif;
  font-size: .76rem; font-weight: 700;
  color: var(--orange); text-decoration: none;
  transition: background .15s;
}
.mega-raccourci:hover { background: rgba(181,98,42,.16); }
.mega-raccourci span { font-size: .6rem; }
/* Le mode de pose regroupe les collections : c'est la premiere question d'un
   poseur, avant meme la marque (Sam 28/08). */
/* La fleche d'invitation, sous le nombre de collections : elle descend
   doucement pour montrer que les collections suivent (Sam 30/08). Dessinee
   avec deux bordures, sans aucun caractere ni image. */
.mega-invite {
  display: flex; justify-content: center;
  height: 14px; margin-top: .35rem;
  pointer-events: none;
}
.mega-invite span {
  width: 9px; height: 9px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  border-radius: 1px;
  transform: rotate(45deg);
  animation: pdInvite 1.7s ease-in-out infinite;
}
@keyframes pdInvite {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}
/* Un client qui a demande moins d'animations n'en subit aucune. */
@media (prefers-reduced-motion: reduce) {
  .mega-invite span { animation: none; opacity: .7; }
}

/* Les modes de pose : des onglets, tous visibles en haut de la marque. En
   bandeaux empiles, « A coller » et « Pose plombante » se trouvaient enterres
   sous neuf collections (Sam 29/08). */
/* Une barre pleine largeur, une seule rangee, parts egales : en pastilles
   libres, les trois modes passaient sur deux lignes et flottaient
   (Sam 29/08). */
/* L'intitule dit que c'est un choix. Sans lui, trois mots poses sur un rail
   gris se lisent comme une etiquette, pas comme des boutons (Sam 30/08). */
.mega-poses-titre {
  font-family: 'Outfit', sans-serif;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  margin: .55rem 0 .3rem;
}
.mega-poses {
  display: flex; gap: 2px;
  margin: 0 0 .3rem;
  background: rgba(61,74,82,.07);
  border-radius: 8px; padding: 2px;
}
.mega-pose {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .38rem .3rem;
  /* Fond blanc et liseré : un onglet inactif doit avoir l'air d'un bouton
     qu'on peut enfoncer, pas d'un mot pose sur un fond gris. */
  background: #fff; border: 1px solid var(--dim); border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  /* Ni majuscules ni interlettrage : « PLOMBANT » demande un tiers de place
     en plus que « Plombant » et se coupait, alors que Sam veut du texte plus
     GROS, pas plus petit (Sam 29/08). */
  font-size: .82rem; font-weight: 700;
  letter-spacing: .005em; text-transform: none;
  color: var(--text); cursor: pointer;
  transition: background .15s, color .15s;
}
/* Un mode de pose unique garde la MEME forme que les onglets — meme rail,
   meme hauteur — mais reste neutre : rien a selectionner, donc ni couleur
   d'election, ni survol, ni curseur de clic (Sam 29/08). */
.mega-pose--seul {
  color: var(--text); cursor: default;
  background: transparent; border-color: transparent;
}

.mega-pose:not(.mega-pose--seul):hover {
  background: rgba(181,98,42,.1); color: var(--orange); border-color: var(--orange);
}
.mega-pose[aria-selected="true"] {
  background: var(--orange); color: #fff; border-color: var(--orange);
  box-shadow: 0 1px 4px rgba(181,98,42,.3);
}
.mega-pose-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-pose-nb {
  font-size: .76rem; font-weight: 600; letter-spacing: 0;
  opacity: .65;
}
.mega-pose[aria-selected="true"] .mega-pose-nb { opacity: .85; }
.mega-coll {
  display: flex; align-items: center; gap: .6rem;
  padding: .28rem 0;
  border-radius: 7px;
  font-family: 'Outfit', sans-serif;
  color: var(--text); text-decoration: none;
  transition: background .15s, color .15s;
}
.mega-coll:hover { background: rgba(181,98,42,.07); color: var(--orange); }
/* La photo de la matiere : c'est elle qui donne sa densite au menu, une liste
   de noms seuls paraissait vide (Sam 27/08). */
.mega-coll-img {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 9px; object-fit: cover;
  border: 1px solid var(--border);
  background: var(--dim);
  transition: border-color .15s, box-shadow .15s;
}
.mega-coll:hover .mega-coll-img {
  border-color: var(--orange);
  box-shadow: 0 2px 8px rgba(181,98,42,.22);
}
.mega-coll-vide { width: 64px; height: 64px; flex-shrink: 0; border-radius: 9px; background: var(--dim); }
.mega-coll-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mega-coll-nom {
  font-size: .96rem; font-weight: 600; line-height: 1.25;
}
/* Le nombre de decors se cale a droite du nom, comme celui des collections
   sur la ligne de marque : la ligne du dessous porte alors l'epaisseur et la
   resistance, les deux reperes d'achat (Sam 28/08). */
/* Un nom long passe sur deux lignes plutot que d'etre coupe : « Solide Click
   30 Herringbone » demande 145 px pour 94 disponibles, et il n'est pas
   question d'afficher « Solide Click 30 Herring... » (Sam 29/08). */
.mega-coll-haut { display: flex; align-items: flex-start; gap: .4rem; }
.mega-coll-nb {
  margin-left: auto; flex-shrink: 0; padding-top: .08rem;
  font-size: .74rem; color: var(--muted); line-height: 1.25; white-space: nowrap;
}
/* Le detail passe sur deux lignes s'il le faut, comme le nom : « 2,5 mm ·
   Classe 23/33/42 » etait coupe apres l'agrandissement (Sam 29/08). */
.mega-coll-spec {
  font-size: .8rem; color: var(--muted); line-height: 1.3;
}
.mega-coll:hover .mega-coll-spec { color: var(--orange); }
.mega-coll:hover .mega-coll-nb { color: var(--orange); }

.mega-brand-arrow {
  font-size: .6rem; color: var(--muted);
  flex-shrink: 0; transition: all .2s;
}
.mega-brand:hover .mega-brand-arrow { color: var(--orange); transform: translateX(2px); }
.mega-brand:hover .mega-brand-name { color: var(--orange); }

/* ── Méga-menu : marque active + panneau ressources dynamiques ── */
.mega-brand.mega-brand--active {
  border-color: var(--orange);
  box-shadow: 0 2px 12px rgba(181,98,42,.15);
  background: rgba(181,98,42,.04);
}
.mega-brand.mega-brand--active .mega-brand-name { color: var(--orange); }
.mega-brand.mega-brand--active .mega-brand-arrow { color: var(--orange); }
.mega-res-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem .5rem;
  min-height: 160px;
}
.mega-res-links { animation: megaResFade .2s ease; }
@keyframes megaResFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media(max-width: 900px) {
  .mega-res-hint { display: none !important; }
  #megaResLinks { display: block !important; }
}

/* ── Liens mega-menu (Accessoires / Marques) ── */
.mega-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  margin-bottom: .25rem;
  border: 1.5px solid #C8C0B8;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem; font-weight: 600;
  color: var(--text);
  transition: all .2s;
}
.mega-link:hover {
  border-color: var(--orange);
  color: var(--orange);
  box-shadow: 0 2px 12px rgba(181,98,42,.12);
}
.mega-link-arrow {
  margin-left: auto;
  font-size: .6rem; color: var(--muted);
  flex-shrink: 0; transition: all .2s;
}
.mega-link:hover .mega-link-arrow { color: var(--orange); transform: translateX(2px); }

/* ── Mega menu Accessoires — épuré UX/UI ── */
.mega-acc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1.8rem 3rem 1.2rem;
  gap: 1.5rem;
}
.mega-acc-col {
  padding: 0 2rem;
  border-right: 1.5px solid rgba(0,0,0,.07);
}
.mega-acc-col:first-child { padding-left: .2rem; }
.mega-acc-col:last-child { border-right: none; padding-right: .2rem; }
.mega-acc-col-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .05em;
  color: var(--text);
  margin-bottom: .9rem;
  padding-bottom: 0;
  border-bottom: none;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.mega-acc-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mega-acc-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .4rem;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,.04);
  border-radius: 4px;
  transition: color .15s, background .15s, padding-left .15s;
}
.mega-acc-link:last-child { border-bottom: none; }
.mega-acc-link:hover {
  color: var(--orange);
  background: rgba(181,98,42,.04);
  padding-left: .7rem;
}
.mega-acc-arrow {
  margin-left: auto;
  font-size: .65rem;
  color: rgba(0,0,0,.15);
  transition: all .2s;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.mega-acc-link:hover .mega-acc-arrow { color: var(--orange); transform: translateX(3px); }
.mega-acc-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  opacity: .7;
}
.mega-acc-icon svg { width: 15px; height: 15px; }
.mega-acc-icon--sc { background: #ECEFF1; color: #78909C; }
.mega-acc-icon--pl { background: #EFEBE9; color: #5D4037; }
.mega-acc-icon--co { background: var(--orange-bg); color: var(--orange); }
.mega-acc-footer {
  padding: .7rem 3rem 1rem;
  border-top: 1.5px solid rgba(0,0,0,.07);
  display: flex;
  align-items: center;
}
.mega-acc-all {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  transition: color .15s;
  padding: .3rem 0;
}
.mega-acc-all:hover { color: #C8743A; }
.mega-acc-all span { font-size: .55rem; transition: transform .15s; }
.mega-acc-all:hover span { transform: translateX(3px); }

/* ── Voir tout ── */
.mega-see-all {
  display: flex; align-items: center; gap: .4rem;
  font-family: 'Outfit', sans-serif;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--orange); text-decoration: none;
  margin-top: auto; padding: .45rem .8rem;
  border: 1.5px solid var(--orange);
  border-radius: 6px;
  background: transparent;
  transition: all .2s;
}
.mega-see-all:hover { background: var(--orange); color: #fff; }
.mega-see-all span { font-size: .5rem; transition: transform .15s; }
.mega-see-all:hover span { transform: translateX(3px); }
/* Colonnes « Nos revetements » : le lien colle au bas laissait un vide de
   plusieurs centimetres sous les colonnes courtes, la hauteur du panneau
   etant donnee par la carte Espace Pro. Il suit desormais la liste. */
/* Les trois boutons doivent tomber sur la MEME ligne : cales sous leur
   contenu, ils etaient a trois hauteurs differentes (Sam 28/08). Ils sont
   renvoyes au bas de la colonne, et les colonnes ont toutes la meme hauteur. */
.nav-drop-wrap[data-mega="revetements"] .mega-see-all {
  margin-top: auto;
  align-self: stretch;
  justify-content: space-between;
  white-space: nowrap;
}
.nav-drop-wrap[data-mega="revetements"] .mega-coll-liste:last-of-type { margin-bottom: 1rem; }
/* Les vignettes ont rendu les lignes plus hautes : la colonne dispose de la
   hauteur du panneau, donnee par la carte Espace Pro, au lieu de defiler. */
/* -- « Nos revetements » : une seule verticale ------------------------------
   Le titre etait centre, la carte de marque avait son propre retrait, les
   noms de collections un troisieme : quatre axes, l'oeil ne savait ou se
   poser (Sam 27/08). Tout part du bord gauche de la colonne ; seul le texte
   des collections est decale, de la largeur exacte de sa vignette. */
/* Le haut du titre doit garder de l'air : la colonne rogne ce qui deborde, et
   les accents de STRATIFIES/DECORS disparaissaient. */
.nav-drop-wrap[data-mega="revetements"] .mega-col-title {
  text-align: center;
  /* La taille maximale qui laisse « Parquets contrecolles · 30 decors » tenir
     sur UNE ligne dans la colonne, comme Sam l'a demande le 27/08. */
  font-size: 1.24rem;
  padding: .35rem 0 .5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--text);
}
.nav-drop-wrap[data-mega="revetements"] .mega-col--attente .mega-col-title {
  border-bottom-color: var(--dim);
  /* Seule cette colonne est etroite : son titre s'y plie sur deux lignes. */
  white-space: normal;
  line-height: 1.15;
}
.mega-marque {
  display: flex; align-items: center; gap: .45rem;
  /* Aucun filet ici : il separait la marque de ses propres matieres. */
  padding: 0;
  /* La MEME hauteur pour toutes les lignes, avec logo ou sans : celle de la
     boite du logo. Sans cela une entree en texte seul faisait 24 px contre 57,
     et les blocs des trois colonnes ne tombaient jamais en face. */
  height: 56px;
  text-decoration: none; color: var(--text);
  transition: color .15s;
}
.mega-marque-nom {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
}
/* ⛔ Sam (11/09) : « Catalogues et fiches techniques : je veux ce titre sur une
   ligne. Questions frequentes : sur une ligne. » En capitales avec .09em
   d'interlettrage, le titre depassait la largeur de la colonne et se coupait
   en deux — la ligne de 56 px se deformait. L'interlettrage et le corps se
   resserrent juste assez, et la coupure est interdite. */
/* ⛔ Sam (12/09) : « la bande de défilement de Questions fréquentes, je t'ai
   demandé de la supprimer, elle ne sert à rien, et je veux tout sur une
   ligne. » La colonne etait trop etroite pour son contenu : « CATALOGUES ET
   FICHES TE… » se coupait au bord, et les deux lignes de detail se pliaient
   en trois. Elle prend la largeur qu'il lui faut, et plus rien ne se coupe. */
/* Les trois colonnes ont chacune de quoi ecrire : sans largeur minimale, la
   colonne des ressources prenait la sienne et les deux autres se serraient a
   174 px — « LVT · SPC · Vinyle tisse » repassait sur deux lignes. */
.nav-drop-wrap[data-mega="marques"] .mega-col--marques {
  min-width: 274px;
}
.mega-col--ressources {
  flex: 0 0 auto;
  min-width: 330px;
}
.mega-col--ressources .mega-marque-nom {
  font-size: .76rem;
  letter-spacing: .045em;
  white-space: nowrap;
}
.mega-col--ressources .mega-marque-detail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* La hauteur de deux lignes servait a aligner les blocs des colonnes de
     marques, qui ont une ligne de matieres. Ici il n'y a qu'une phrase :
     elle occupe une ligne, pas deux. */
  min-height: 0;
}
/* ⛔ « Voir les 2 marques : je le veux sur une ligne, idem pour toutes les
   ressources. » Le bouton se pliait en deux parce qu'il suivait la largeur de
   sa colonne. Il prend la largeur de son texte.
   Uniquement dans ce panneau : les colonnes des deux autres sont plus etroites,
   et leur interdire de plier couperait leur texte. */
.nav-drop-wrap[data-mega="marques"] .mega-see-all {
  white-space: nowrap;
}
/* Meme exigence dans le panneau des accessoires, ou les quatre colonnes sont
   plus etroites : le texte y etait coupe au bord. Interlettrage et marges
   resserres juste assez pour que « Voir les produits » tienne entier. */
.nav-drop-wrap[data-mega="accessoires"] .mega-see-all {
  white-space: nowrap;
  letter-spacing: .02em;
  padding-left: .5rem;
  padding-right: .5rem;
  font-size: .75rem;
}
/* ⛔ Les quatre colonnes des accessoires tombaient a 145 px, dont 83 de marge
   interne : il restait 103 px pour un bouton qui en demande 144. Le texte
   etait coupe au bord. Chaque colonne a de quoi ecrire. */
.nav-drop-wrap[data-mega="accessoires"] .mega-col {
  min-width: 238px;
  padding: 0 1.5rem;
}
/* Meme raison pour « Vinyles / LVT / SPC / Tisse · 33 decors », le plus long
   des quatre titres de matiere. */
.nav-drop-wrap[data-mega="revetements"] .mega-col-title {
  font-size: 1.12rem;
}
/* Le logo officiel de la marque. Les dessins n'ont pas la meme forme : Pergo
   est un mot sur une ligne, Oneflor un bloc carre de trois lignes, et le
   fabricant n'en publie pas de version horizontale. Chacun recoit donc la MEME
   boite et s'y inscrit sans deformation : Pergo la remplit en largeur, Oneflor
   en hauteur. Une marque ajoutee demain entrera dans la meme boite. */
.mega-marque-logo {
  width: 124px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.mega-marque-logo img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  display: block;
  transition: opacity .15s;
}
.mega-marque:hover .mega-marque-logo img { opacity: .75; }
.mega-marque-nb {
  margin-left: auto;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem; color: var(--muted); white-space: nowrap;
}
.mega-marque-fleche { font-size: .6rem; color: var(--muted); }
.mega-marque:hover { color: var(--orange); }
.mega-marque:hover .mega-marque-nb,
.mega-marque:hover .mega-marque-fleche { color: var(--orange); }
.mega-attente-note {
  font-family: 'Outfit', sans-serif;
  font-size: .62rem; color: var(--muted);
  margin: 0; line-height: 1.5;
}
/* Marges laterales resserrees : elles prenaient 64 px par colonne, largeur
   qui manquait aux noms une fois l'epaisseur ajoutee. */
/* UNE seule verticale a droite. La liste laisse la place de la barre de
   defilement ; le titre et le bouton doivent laisser la meme, sinon ils
   finissent 19 px plus loin que tout le reste (Sam 29/08). */
.nav-drop-wrap[data-mega="revetements"] .mega-col {
  max-height: 600px; padding: 0 1.1rem; overflow: hidden;
  --pd-gouttiere: 19px;
}
.nav-drop-wrap[data-mega="revetements"] .mega-col-title,
.nav-drop-wrap[data-mega="revetements"] .mega-see-all {
  margin-right: var(--pd-gouttiere);
}
/* SEULE la liste defile : le titre de la matiere reste en haut et le bouton
   reste en bas. Sans cela, « Voir les 13 collections » disparaissait sous la
   zone de defilement des qu'un groupe long etait ouvert. */
/* La zone qui defile, et son repere de suite. */
.mega-col-corps {
  position: relative;
  flex: 1; min-height: 0; overflow-y: auto;
  padding-right: .55rem;
  scrollbar-gutter: stable;
  /* Le defilement reste DANS la liste : arrive en bas, il entrainait la page
     et le menu s'en allait avant qu'on ait vu les dernieres collections
     (Sam 29/08). */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #A79C92 #EDE8E3;
}
/* La barre doit SE VOIR : en gris tres clair, rien n'indiquait qu'il restait
   des collections en dessous. */
.mega-col-corps::-webkit-scrollbar { width: 9px; }
.mega-col-corps::-webkit-scrollbar-track { background: #EDE8E3; border-radius: 5px; }
.mega-col-corps::-webkit-scrollbar-thumb {
  background: #A79C92; border-radius: 5px;
  border: 2px solid #EDE8E3;
}
.mega-col-corps::-webkit-scrollbar-thumb:hover { background: var(--orange); }
/* Un degrade signale qu'il reste des collections sous la liste, tant qu'on
   n'est pas arrive au bout. La barre de defilement ne suffit pas : selon le
   navigateur elle est en superposition, donc invisible au repos. */
.mega-col { position: relative; }
.mega-col:has(.mega-col-corps.a-suite)::after {
  content: '';
  position: absolute; left: 1.1rem; right: 1.1rem;
  bottom: 58px; height: 46px;
  background: linear-gradient(rgba(255,255,255,0), #fff 92%);
  pointer-events: none;
}
.nav-drop-wrap[data-mega="revetements"] .mega-inner { gap: .7rem; padding: 1.5rem 1.6rem 1.6rem; }
/* Le bloc Espace professionnel prenait pres du tiers du menu : la place va
   aux colonnes de collections, pour que tout y soit plus gros (Sam 29/08). */
.nav-drop-wrap[data-mega="revetements"] .mega-visual {
  min-width: 230px; max-width: 250px; padding-left: 1.3rem;
}
/* La famille annoncee « a venir » ne porte que trois lignes de texte : elle
   prenait le quart de la largeur, prise sur les colonnes qui en ont besoin. */
.nav-drop-wrap[data-mega="revetements"] .mega-col--attente { flex: 0 1 195px; }

/* ── Menu « Accessoires » : les cinq produits de pose reellement vendus ── */
.nav-drop-wrap[data-mega="accessoires"] .mega-col {
  max-height: 600px; overflow: hidden; --pd-gouttiere: 19px;
}
.nav-drop-wrap[data-mega="accessoires"] .mega-col-title,
.nav-drop-wrap[data-mega="accessoires"] .mega-see-all { margin-right: var(--pd-gouttiere); }
.nav-drop-wrap[data-mega="accessoires"] .mega-col-title {
  text-align: center;
  /* ⛔ Un titre d'etape tient sur UNE ligne — regle posee le 27/08. A 1,24 rem,
     « 3. Plinthes, seuils et profils · 5 » et « 4. Nettoyer et entretenir · 8 »
     se coupaient au bord de leur colonne. */
  font-size: .9rem;
  letter-spacing: .02em;
  padding: .35rem 0 .5rem; margin-bottom: 1rem;
  border-bottom: 2px solid var(--text);
}
.nav-drop-wrap[data-mega="accessoires"] .mega-col--attente .mega-col-title {
  border-bottom-color: var(--dim);
}
/* Le logo de la marque dans la ligne, a la place de son nom. */
.mega-coll-logo { height: 14px; width: auto; vertical-align: -2px; margin-right: .15rem; }
.nav-drop-wrap[data-mega="accessoires"] .mega-coll-img {
  object-fit: contain; background: #fff; padding: 2px;
}

/* ── Menu « Marques & Catalogues » : les deux marques reellement vendues ── */
.nav-drop-wrap[data-mega="marques"] .mega-col {
  max-height: 600px; overflow: hidden; --pd-gouttiere: 19px;
}
.nav-drop-wrap[data-mega="marques"] .mega-col-title,
.nav-drop-wrap[data-mega="marques"] .mega-see-all { margin-right: var(--pd-gouttiere); }
/* Le bouton est pousse au bas de sa colonne : les trois se retrouvent sur la
   meme ligne, quel que soit le nombre de marques au-dessus (Sam 07/09). */
.nav-drop-wrap[data-mega="marques"] .mega-see-all { margin-top: auto; }
.nav-drop-wrap[data-mega="marques"] .mega-col-title {
  text-align: center; font-size: 1.24rem;
  padding-bottom: .4rem;
  /* ⛔ Un double filet noir soulignait chaque titre : trois traits epais dans
     un panneau qui en comptait deja une quinzaine. Le titre se detache par sa
     graisse et son interlettrage, pas par un trait. */
  padding: .35rem 0 .2rem; margin-bottom: 1.7rem;
}
.nav-drop-wrap[data-mega="marques"] .mega-marque { padding: .15rem 0 .4rem; }
/* Le filet ferme le bloc COMPLET : la marque et ses matieres vont ensemble. */
.mega-marque-detail {
  font-family: 'Outfit', sans-serif;
  font-size: .72rem; color: var(--muted);
  margin: .3rem 0 0; padding-bottom: 1.4rem; line-height: 1.45;
  /* Deux lignes reservees : « préparation du support · collage · finitions »
     en occupe deux, « entretien » une seule. Sans hauteur fixe, le bloc
     suivant se decalait et les colonnes ne tombaient plus en face. */
  min-height: 2.9em;
  border-bottom: 1px solid var(--dim);
}
.mega-marque-detail + .mega-marque { padding-top: 1.4rem; }
/* Le dernier bloc d'une colonne ne porte pas de trait : il n'a rien a
   separer de ce qui suit. */
.mega-col > .mega-marque-detail:last-child,
.mega-col-corps > .mega-marque-detail:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.nav-drop-wrap[data-mega="marques"] .mega-coll { align-items: flex-start; padding: .45rem 0; }

/* ── Barre réassurance mega menu ── */
.mega-reassure {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 0;
  border-top: 2px solid var(--orange);
  background: var(--text);
}
.mega-reassure-item {
  display: flex; align-items: center; gap: .7rem;
  flex: 1; justify-content: center;
  padding: 1rem 1.4rem;
  border-right: 1px solid rgba(255,255,255,.1);
  transition: background .15s;
}
.mega-reassure-item:last-child { border-right: none; }
.mega-reassure-item:hover { background: rgba(255,255,255,.06); }
.mega-reassure-item svg {
  width: 26px; height: 26px; color: var(--orange); flex-shrink: 0;
}
.mega-reassure-text {
  font-family: 'Outfit', sans-serif;
  font-size: .88rem; font-weight: 700; color: #fff;
  line-height: 1.3;
}
.mega-reassure-text span {
  font-weight: 400; color: #fff;
}
.mega-oney-logo {
  display: flex; align-items: center; justify-content: center;
  background: #5FA535; color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem; font-weight: 800;
  letter-spacing: .04em;
  padding: .5rem 1rem;
  border-radius: 7px;
  flex-shrink: 0;
  text-transform: lowercase;
}

/* ── Marques & Catalogues - grille marques ── */
.mega-brands-section {
  flex: 2;
  padding-right: 1.5rem;
  border-right: 1px solid var(--dim);
}
.mega-brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .15rem .6rem;
}
.mega-brand-link {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: 'Outfit', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: .45rem .9rem;
  margin: .18rem 0;
  border-radius: 7px;
  border: 1.5px solid #C8C0B8;
  background: transparent;
  transition: all .2s;
}
.mega-brand-link:hover { background: var(--orange); color: #fff; border-color: var(--orange); box-shadow: 0 2px 8px rgba(181,98,42,.2); }
.mega-brand-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  transition: background .2s;
}
.mega-brand-link:hover .mega-brand-dot { background: #fff; }
  flex-shrink: 0;
}

/* ── Bloc latéral promo (menus Revêtements & Marques) ── */
.mega-visual {
  min-width: 260px;
  max-width: 300px;
  padding-left: 2.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.mega-promo {
  background: var(--text);
  border-radius: 10px;
  padding: 1.2rem 1rem;
  color: #fff;
  border-left: 3px solid var(--orange);
}
.mega-promo-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1.2;
  margin-bottom: .3rem;
}
.mega-promo-desc {
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  font-weight: 400;
  color: rgba(255,255,255,.8);
  line-height: 1.5;
}
.mega-visual-cta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Outfit', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: .6rem 1rem;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 9px;
  margin-top: .4rem;
  transition: all .22s;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
}
.mega-visual-cta:hover {
  border-color: var(--orange);
  background: var(--orange) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(181,98,42,.3);
}
.mega-visual-cta span { font-size: .5rem; transition: transform .15s; }
.mega-visual-cta:hover span { transform: translateX(3px); }

/* Catalogues column */
.mega-cat-col {
  flex: 1;
  padding: 0 1.5rem;
}

/* ── Responsive mega ── */
@media(max-width: 900px) {
  .mega-inner {
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.2rem 1.5rem;
  }
  .mega-col {
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--dim);
    padding-bottom: .8rem;
  }
  .mega-col:last-child { border-bottom: none; padding-bottom: 0; }
  .mega-visual {
    width: 100%;
    padding-left: 0;
  }
  .mega-promo {
    padding: 1rem;
  }
  .mega-brands-section {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--dim);
    padding-bottom: .8rem;
  }
  .mega-brands-grid { grid-template-columns: repeat(2, 1fr); }
  .mega-cat-col { padding: 0; }
}
@media(max-width: 560px) {
  .mega-brands-grid { grid-template-columns: 1fr; }
}
.mega-cta-duo { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.mega-cta-duo .mega-visual-cta { margin-top: 0; font-size: .6rem; padding: .55rem .9rem; gap: .4rem; }
.mega-cta-duo .mega-visual-cta svg { flex-shrink: 0; }
.mega-pro-contact { background: var(--text); border-radius: 10px; padding: 1rem 1rem; color: #fff; border-left: 3px solid var(--orange); display: flex; flex-direction: column; gap: .3rem; }
.mega-pro-contact-title { font-family: 'Bebas Neue', sans-serif; font-size: .8rem; letter-spacing: .06em; color: #fff; display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }
.mega-pro-contact-title svg { color: var(--orange); }
.mega-pro-contact-item { display: flex; align-items: center; gap: .4rem; font-size: .6rem; font-weight: 600; color: #fff; }
.mega-pro-contact-item svg { color: #fff; flex-shrink: 0; }
.mega-pro-contact-link { text-decoration: none; transition: color .15s; cursor: pointer; }
.mega-pro-contact-link:hover { color: var(--orange); }
.mega-pro-contact-link:hover svg { color: #fff; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --orange: #B5622A;
  --orange-rim: rgba(181,98,42,0.22);
  --orange-bg: rgba(181,98,42,0.07);
  --bg: #FFFFFF;
  --text: #2C363E;
  --muted: #5F6E78;
  --dim: #B0A89E;
  --input-bg: #EDEAE6;
  --border: #B0A89E;
  --green: #2E7D32;
  --green-bg: #E8F5E9;
}
body { background: #EDEAE6; font-family: 'Outfit', sans-serif; color: var(--text); }

/* ══ BREADCRUMB ══ */
.bc { max-width: 1280px; margin: 0 auto; padding: 1rem 2rem .5rem; display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: var(--muted); }
.bc a { color: var(--muted); text-decoration: none; transition: color .15s; }
.bc a:hover { color: var(--orange); }
.bc svg { width: 10px; height: 10px; color: var(--dim); flex-shrink: 0; }
.bc-cur { color: var(--text); font-weight: 600; }

/* ══ PAGE GRID ══ */
.page { max-width: 1280px; margin: 0 auto; padding: .5rem 2rem 3rem; display: grid; grid-template-columns: 1fr 270px; gap: 1.4rem; align-items: start; }
.main { display: flex; flex-direction: column; gap: 0; }

/* ══════════════════════════════════════
   BRAND CARD — tout dans une seule carte
══════════════════════════════════════ */
.bcard {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,.04);
}

/* ── German flag band — top of card ── */
.bcard-flag-band {
  height: 4px;
  display: flex;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.bcard-flag-band span {
  flex: 1;
}
.bcard-flag-band span:nth-child(1) { background: #1A1A1A; }
.bcard-flag-band span:nth-child(2) { background: #DC3545; }
.bcard-flag-band span:nth-child(3) { background: #FFD700; }

/* ── Brand header — structured with hierarchy ── */
.bcard-header {
  background: #fff;
  padding: 0;
  border-bottom: 1.5px solid var(--border);
}
/* Top line: slogan + origin */
.bcard-topline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 2rem;
  background: var(--input-bg);
  border-bottom: 1px solid var(--dim);
}
.bcard-slogan {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.bcard-slogan em {
  font-style: italic;
  color: var(--text);
}
.bcard-de {
  font-style: normal;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}

/* ── Swiss Krono logo ── */
.sk-logo-wrap { display: flex; align-items: center; justify-content: center; width: 100%; }
.sk-logo-wrap svg.sk-logo { display: block; margin: 0 auto; }
.sk-logo { height: 52px; width: auto; }
.sk-logo-sm { height: 22px; width: auto; display: inline-block; vertical-align: middle; margin-left: .3rem; }
.sk-logo-xs { height: 16px; width: auto; display: inline-block; vertical-align: middle; margin-left: .2rem; }

/* Main row: logo + CTA */
.bcard-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem;
  gap: 1rem;
  text-align: center;
}
.bcard-cta {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1.3rem;
  background: var(--orange); border: none; border-radius: 9px;
  font-family: 'Outfit', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; text-decoration: none; transition: all .22s;
  white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(181,98,42,.3);
}
.bcard-cta:hover { background: #C8743A; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(181,98,42,.4); }

/* ── Intro ── */
.bcard-intro {
  padding: 1.4rem 2rem 1.2rem;
  font-size: .85rem;
  text-align: center;
  font-weight: 400;
  color: var(--text);
  line-height: 1.8;
  border-bottom: 1.5px solid var(--border);
}
.bcard-intro strong { font-weight: 700; color: var(--text); }


.bcard-scroll-cta {
  display: flex;
  justify-content: center;
  padding: .6rem 2rem 1rem;
}
.bcard-scroll-cta a {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Outfit', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  transition: all .2s;
}
.bcard-scroll-cta a:hover {
  gap: .6rem;
}
.bcard-scroll-cta svg {
  transition: transform .2s;
}
.bcard-scroll-cta a:hover svg {
  transform: translateY(3px);
}
/* ── Showcase: photo + labels side — SAME height ── */
.bcard-showcase {
  display: grid;
  grid-template-columns: 1fr 160px;
  border-bottom: 1.5px solid var(--border);
}
.bcard-photo {
  background: var(--dim);
  overflow: hidden;
  border-right: 1.5px solid var(--border);
  position: relative;
  cursor: zoom-in;
  aspect-ratio: 16/10;
  border-radius: 16px 0 0 16px;
}
.bcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.bcard-photo:hover img { transform: scale(1.05); }
/* Zoom hint — identique homepage */
.bcard-zoom {
  position: absolute; inset: 0;
  background: rgba(30,40,48,0);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: background .25s ease;
  pointer-events: none;
}
.bcard-zoom svg {
  color: #fff; opacity: 0; transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.bcard-photo:hover .bcard-zoom { background: rgba(30,40,48,.28); }
.bcard-photo:hover .bcard-zoom svg { opacity: 1; transform: scale(1); }
/* Germany badge — darker */

/* ── Labels / Certifications column — seamless ── */
.bcard-labels {
  background: linear-gradient(180deg, #E4E9EC 0%, #D8DFE3 100%);
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
.bcard-labels-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Features row below photo ── */
.bcard-feats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1.5px solid var(--border);
}
.bcard-feat {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: 1.1rem 1.3rem;
  border-right: none;
  position: relative;
}
.bcard-feat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(0,0,0,.12);
}
.bcard-feat:last-child { border-right: none; }
.bcard-feat-icon {
  width: 40px; height: 40px;
  background: var(--input-bg);
  border: 1.5px solid #C8C0B8;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bcard-feat-icon svg { color: var(--text); width: 18px; height: 18px; }
.bcard-feat-title {
  font-size: .75rem; font-weight: 700; color: var(--text);
  margin-bottom: .15rem; letter-spacing: .02em;
}
.bcard-feat-desc {
  font-size: .65rem; font-weight: 400; color: var(--text); line-height: 1.5;
}

/* ── Chiffres clés — titre centré avec traits ── */
.dt-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1.2rem 2rem .8rem;
}
.dt-title-line {
  flex: 1;
  max-width: 60px;
  height: 1.5px;
  background: var(--orange);
}
.dt-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: .1em;
  color: var(--text);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ── Stats row — short vertical separators ── */
.bcard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  border-bottom: 1.5px solid var(--border);
}
.bcard-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1.3rem;
  text-align: center;
  transition: background .15s;
  position: relative;
}
/* Short vertical separators — same method as feat cards */
.bcard-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(0,0,0,.12);
}
.bcard-stat:hover { background: var(--orange-bg); border-radius: 5px; }
.bcard-stat[data-tip] { cursor: help; position: relative; }
/* Tooltips CSS désactivés — gérés par le floatTip JS uniquement */
[data-tip]::after, [data-tip]::before { display: none !important; }
.bcard-stat[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: #fff;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  line-height: 1.5;
  padding: .55rem .9rem;
  border-radius: 8px;
  white-space: normal;
  max-width: 280px;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.bcard-stat[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.bcard-stat[data-tip]:hover::after,
.bcard-stat[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bcard-stat .bcard-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--text);color:#fff;font-size:.72rem;font-weight:400;letter-spacing:.04em;text-transform:none;line-height:1.6;padding:.55rem .9rem;border-radius:8px;white-space:normal;max-width:320px;min-width:200px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.18);text-align:center}
.bcard-stat .bcard-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--text)}
.bcard-stat:hover .bcard-tip{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.bcard-stat .tip-hint {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  margin-top: .3rem;
  opacity: .7;
  transition: all .2s;
  line-height: 1;
}
.bcard-stat .tip-hint svg {
  width: 10px; height: 10px;
  stroke: var(--text); fill: none;
  stroke-width: 2; stroke-linecap: round;
}
.bcard-stat:hover .tip-hint { opacity: 1; border-color: var(--orange); }
.bcard-stat:hover .tip-hint svg { stroke: var(--orange); }
.bcard-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: var(--text);
  line-height: 1;
  letter-spacing: .02em;
}
.bcard-stat-lbl {
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: .2rem;
}

/* ── Properties — 4×2 card grid like catalogue ── */
.bcard-bottom {
  padding: 0 2rem 1.8rem;
}
.bcard-bottom .dt-title-wrap {
  padding: 1.2rem 0 .8rem;
}
.bcard-prop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
.bcard-prop-card {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem .9rem;
  border: 1.5px solid #C8C0B8;
  border-radius: 12px;
  background: #fff;
  cursor: help;
  position: relative;
  transition: all .2s;
}

.bcard-prop-icon {
  width: 38px; height: 38px;
  min-width: 38px;
  background: #fff;
  border: 1px solid #E8E4E0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}

.bcard-prop-icon svg {
  width: 20px; height: 20px;
  color: var(--text);
  stroke-width: 1.3;
  transition: color .2s;
}

.bcard-prop-card .tip-hint {
  position: absolute;
  top: .4rem; right: .4rem;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  opacity: .7;
  transition: all .2s;
  line-height: 1;
}
.bcard-prop-card .tip-hint svg {
  width: 10px; height: 10px;
  stroke: var(--text); fill: none;
  stroke-width: 2; stroke-linecap: round;
}
.bcard-prop-card:hover .tip-hint { opacity: 1; border-color: var(--orange); }
.bcard-prop-card:hover .tip-hint svg { stroke: var(--orange); }
.bcard-prop-text {
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
/* Tooltip on prop cards */
.bcard-prop-card[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: #fff;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  line-height: 1.5;
  padding: .55rem .9rem;
  border-radius: 8px;
  white-space: normal;
  max-width: 300px;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.bcard-prop-card[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.bcard-prop-card[data-tip]:hover::after,
.bcard-prop-card[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════
   COLLECTIONS — identique au style homepage
══════════════════════════════════════ */
.coll-wrap {
  background: #fff;
  border: 1.5px solid #C8C0B8;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 1.4rem;
  box-shadow: 0 2px 20px rgba(0,0,0,.04);
}
.coll-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem;
}
.coll-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: .06em; color: var(--text); }
.coll-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1.2rem;
  border-radius: 8px; border: 1.5px solid var(--orange);
  font-family: 'Outfit', sans-serif; font-size: .68rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange); text-decoration: none; transition: all .2s; background: transparent;
}
.coll-link:hover { background: var(--orange); color: #fff; }

/* Visible hint message — centered below title */
.coll-hint-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .6rem 2rem;
  text-align: center;
}
.coll-hint {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  font-weight: 500;
  font-style: italic;
  color: var(--text);
}
.coll-hint .tip-hint {
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  opacity: .7;
  transition: all .2s;
  flex-shrink: 0;
  line-height: 1;
}
.coll-hint .tip-hint svg {
  width: 8px; height: 8px;
  stroke: var(--text); fill: none;
  stroke-width: 2; stroke-linecap: round;
}

/* ── Collection grid — 3+2 layout, bigger cards ── */
.coll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  padding: 1.4rem 1.8rem;
  justify-items: center;
  align-items: stretch;
}
.coll-grid-bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  padding: 0 1.8rem 1.6rem;
  max-width: 70%;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
}
/* AC class tag inside card */
.cc-ac-tag {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .3rem;
  margin-bottom: .35rem;
  white-space: nowrap;
}
.cc-ac-class {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  color: var(--text);
  letter-spacing: .03em;
}
.cc-ac-usage {
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
}

/* ── Card collection — pattern ch-card homepage ── */
.cc {
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #C8C0B8;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.cc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(61,74,82,.12);
}

/* Photo — même ratio, même zoom que homepage */
.cc-photo {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--dim);
  position: relative;
  border-radius: 12px 12px 0 0;
}
.cc-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .45s ease;
}
.cc:hover .cc-photo img { transform: scale(1.05); }

/* Loupe — identique homepage ch-zoom-hint */
.cc-zoom {
  position: absolute; inset: 0;
  background: rgba(30,40,48,0);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: background .25s ease;
  pointer-events: none;
}
.cc-zoom svg {
  color: #fff;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.cc:hover .cc-zoom {
  background: rgba(30,40,48,.28);
}
.cc:hover .cc-zoom svg {
  opacity: 1;
  transform: scale(1);
}

/* Badges sur la photo */
.cc-ep {
  position: absolute; top: -.6rem; right: -.1rem;
  width: 44px; height: 44px;
  background: rgba(190,195,200,.8);
  backdrop-filter: blur(4px);
  color: var(--text);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem; line-height: 1;
  z-index: 4;
}
.cc-ep small {
  font-family: 'Outfit', sans-serif;
  font-size: .4rem; font-weight: 600;
  letter-spacing: .06em; text-transform: lowercase;
  color: var(--text);
  margin-top: -.02rem; display: block;
}
.cc-ac {
  position: absolute; bottom: .6rem; right: .6rem;
  background: var(--orange); color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .75rem; padding: .18rem .5rem;
  border-radius: 5px; line-height: 1.1;
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(181,98,42,.3);
  z-index: 4;
}

/* Info — identique homepage ch-info */
.cc-info {
  padding: 1.2rem 1.4rem 1.2rem;
  border-top: 1.5px solid #C8C0B8;
  text-align: center;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cc-meta {
  font-size: .88rem; font-weight: 500;
  color: var(--text); line-height: 1.5;
  padding: .4rem 0;
  border-top: 1px solid #ddd8d2;
  border-bottom: 1px solid #ddd8d2;
  margin: .1rem 0;
}
.cc-meta strong { font-weight: 700; color: var(--text); }

/* Tech chips */
.cc-techs {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: .45rem;
  justify-content: center;
}
.cc-t {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .5rem;
  background: #f0ece7;
  border: none;
  border-radius: 3px;
  color: #6b7a82;
  transition: all .15s;
}

.cc-t--aqua { border-color: #1565C0; color: #1565C0; background: #E3F2FD; font-weight: 700; cursor: help; }
.cc-aqua-i { display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; background: #1565C0; color: #fff; border-radius: 50%; font-size: .45rem; font-weight: 700; font-style: normal; flex-shrink: 0; transition: background .15s; }
.cc-t--aqua:hover .cc-aqua-i { background: var(--orange); }
.cc-aqua-name{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;background:#E3F2FD;border:1px solid #1565C0;border-radius:5px;font-family:'Outfit',sans-serif;font-size:.55rem;font-weight:700;color:#1565C0;letter-spacing:.04em;text-transform:uppercase;line-height:1;white-space:nowrap;cursor:help;position:relative}
.cc-aqua-name .cc-aqua-tip{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--text);color:#fff;font-size:.72rem;font-weight:400;letter-spacing:.04em;text-transform:none;line-height:1.6;padding:.6rem 1rem;border-radius:7px;white-space:normal;max-width:300px;min-width:220px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,.18);text-align:center}
.cc-aqua-name .cc-aqua-tip::after{content:'';position:absolute;top:100%;left:30px;border:5px solid transparent;border-top-color:var(--text)}
.cc-aqua-name:hover .cc-aqua-tip{opacity:1;pointer-events:auto}
.cc-aqua-name .cc-aqua-i{width:11px;height:11px;font-size:.4rem}

/* Numéro — same line as title, right-aligned */
.cc-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .15rem;
}
.cc-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: .04em;
  color: var(--text);
  line-height: 1;
  transition: color .2s;
}

.cc-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text);
  flex-shrink: 0;
}


.cc-t[data-tip] {
  cursor: help;
  position: relative;
}
.cc-t[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: #fff;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: none;
  line-height: 1.5;
  padding: .5rem .8rem;
  border-radius: 8px;
  white-space: normal;
  max-width: 260px;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.cc-t[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.cc-t[data-tip]:hover::after,
.cc-t[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* CTA Voir collection — bouton outline identique homepage */
.cc-cta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: auto; padding-top: .8rem;
}
.cc-cta a {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.6rem;
  border-radius: 9px; border: 1.5px solid var(--orange);
  font-family: 'Outfit', sans-serif; font-size: .88rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange); text-decoration: none; transition: all .2s; background: transparent;
  white-space: nowrap;
  min-width: 200px;
}
.cc-cta a:visited,.cc-cta a:active,.cc-cta a:link{background:transparent !important;color:var(--orange) !important;border-color:var(--orange) !important}
.cc:hover .cc-cta a{background:transparent;color:var(--orange);border-color:var(--orange)}
.cc-cta a:hover{background:var(--orange) !important;color:#fff !important}

/* Conditionnement bar */
.cc-cond {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid #C8C0B8;
  background: var(--input-bg);
}
.cc-cond-item {
  padding: 1rem .8rem;
  text-align: center;
  position: relative;
  cursor: help;
}
.cc-cond-item + .cc-cond-item {
  border-left: 1px solid transparent;
  border-image: linear-gradient(to bottom, transparent 15%, #C8C0B8 15%, #C8C0B8 85%, transparent 85%) 1;
}
.cc-cond-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  color: var(--text);
  line-height: 1;
  margin-bottom: .2rem;
}
.cc-cond-lbl {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .1rem;
}


/* Tooltips on conditioning items */
.cc-cond-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: #fff;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  line-height: 1.5;
  padding: .55rem .9rem;
  border-radius: 8px;
  white-space: normal;
  max-width: 240px;
  min-width: 160px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.cc-cond-item[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.cc-cond-item[data-tip]:hover::after,
.cc-cond-item[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cc-cond-item .tip-hint {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  margin-top: .25rem;
  opacity: .7;
  transition: all .2s;
  line-height: 1;
}
.cc-cond-item .tip-hint svg {
  width: 10px; height: 10px;
  stroke: var(--text); fill: none;
  stroke-width: 2; stroke-linecap: round;
}
.cc-cond-item:hover .tip-hint { opacity: 1; border-color: var(--orange); }
.cc-cond-item:hover .tip-hint svg { stroke: var(--orange); }
/* ══ LIGHTBOX — identique homepage ══ */
.lb-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,26,30,.92);
  z-index: 1000;
  align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.lb-overlay.open { display: flex; }
.lb-box {
  position: relative;
  max-width: 1000px; width: 90vw;
  display: flex; flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.lb-close {
  position: absolute; top: .8rem; right: .8rem; z-index: 10;
  background: rgba(0,0,0,.4); border: 1.5px solid rgba(255,255,255,.3); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.9); font-size: 1.2rem;
  cursor: pointer; transition: color .2s; line-height: 1;
}
.lb-close:hover { color: #fff; }
.lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  width: 48px; height: 48px;
  color: #fff; font-size: 1.8rem; line-height: 1;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.lb-arrow:hover { background: var(--orange); border-color: var(--orange); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-img-wrap {
  width: 100%; border-radius: 14px 14px 0 0;
  background: #2C363E;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 2rem;
}
.lb-img-wrap img { max-width: 80%; max-height: 70vh; min-height: 200px; object-fit: contain; display: block; cursor: zoom-in; transition: transform .2s ease; border-radius: 8px; }
.lb-img-wrap img:hover { transform: scale(1.02); }
/* Zoom icon on lightbox image */
.lb-zoom-icon {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0);
  width: 52px;
  height: 52px;
  background: rgba(61,74,82,.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
  pointer-events: none;
  cursor: zoom-in;
  z-index: 5;
}
.lb-zoom-icon svg { width: 22px; height: 22px; }
.lb-img-wrap:hover .lb-zoom-icon { transform: translate(-50%,-50%) scale(1); }
/* Hint text under small images */
.lb-zoom-hint {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: .55rem;
  font-weight: 600;
  color: var(--muted);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.lb-img-wrap:hover .lb-zoom-hint { opacity: 1; }
/* Fullscreen zoom overlay */
.lb-fullscreen {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,14,18,.95);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  backdrop-filter: blur(8px);
}
.lb-fullscreen.open { display: flex; }
.lb-fullscreen img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

/* Collection tabs in lightbox */
.lb-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .7rem 1.2rem;
  background: #fff;
  border-bottom: 1.5px solid #C8C0B8;
  border-radius: 12px 12px 0 0;
  flex-wrap: wrap;
}
.lb-tab {
  padding: .4rem .9rem;
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  background: #fff;
  border: 1.5px solid #C8C0B8;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.lb-tab:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.lb-tab.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.lb-overlay-info {
  position: relative;
  background: #fff;
  border-radius: 0 0 14px 14px;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  border-radius: 0 0 12px 12px;
}
.lb-info-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}
.lb-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: .04em;
  color: var(--text);
  white-space: nowrap;
}
.lb-counter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--muted);
}
.lb-info-mid {
  font-family: 'Outfit', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.lb-info-mid:empty { display: none; }
.lb-aqua-badge {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .7rem;
  background: #E3F2FD;
  color: #1565C0;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 5px;
  cursor: help;
  position: relative;
}
.lb-aqua-i { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; background: #1565C0; color: #fff; border-radius: 50%; font-size: .55rem; font-weight: 700; font-style: normal; flex-shrink: 0; transition: background .15s; }
.lb-aqua-badge:hover .lb-aqua-i { background: var(--orange); }
.lb-aqua-badge[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: #fff;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  line-height: 1.5;
  padding: .55rem .9rem;
  border-radius: 8px;
  white-space: normal;
  max-width: 320px;
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.lb-aqua-badge[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
}
.lb-aqua-badge[data-tip]:hover::after,
.lb-aqua-badge[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lb-ac-badge {
  display: inline-block;
  padding: .2rem .6rem;
  background: var(--orange);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: .04em;
  border-radius: 5px;
  position: relative;
}
.lb-ac-badge[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  line-height: 1.5;
  padding: .55rem .9rem;
  border-radius: 8px;
  white-space: normal;
  max-width: 320px;
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.lb-ac-badge[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
}
.lb-ac-badge[data-tip]:hover::after,
.lb-ac-badge[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lb-info-bottom {
  width: 100%;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .02em;
  border-top: 1px solid var(--dim);
  padding-top: .4rem;
  margin-top: .3rem;
}
.lb-cond-cell {
  display: flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
}
.lb-cond-cell:last-child {
  border-right: none;
}
.lb-cond-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.lb-cond-val {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}
/* ── Bouton Voir ── */
.lb-cta-collection {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  border: none;
  border-radius: 9px;
  padding: .7rem 1.4rem;
  text-decoration: none;
  transition: all .22s;
  box-shadow: 0 4px 20px rgba(181,98,42,.3);
}
.lb-cta-collection:hover {
  background: #C8743A;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(181,98,42,.4);
}
.lb-cta-collection span:last-child { font-size: .6rem; transition: transform .15s; }
.lb-cta-collection:hover span:last-child { transform: translateX(3px); }
@media(max-width: 700px) {
  .lb-prev { left: .5rem; }
  .lb-next { right: .5rem; }
  .lb-arrow { width: 36px; height: 36px; font-size: 1.2rem; }
}

/* ══ CTA DEVIS ══ */
.cta-devis {
  background: var(--text);
  border-radius: 12px;
  border: 2px solid var(--orange);
  padding: 1.6rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 1.4rem;
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.cta-devis h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: .04em; color: #fff; line-height: 1; margin-bottom: .25rem; }
.cta-devis p { font-size: .7rem; color: #fff; }
.cta-btns { display: flex; gap: .5rem; flex-wrap: wrap; flex-shrink: 0; margin-left: auto; }
.btn-o {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1.4rem;
  background: var(--orange); border: none; border-radius: 9px;
  font-family: 'Outfit', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; text-decoration: none;
  transition: all .22s; box-shadow: 0 4px 20px rgba(181,98,42,.3);
}
.btn-o:hover { background: #C8743A; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(181,98,42,.4); }
.btn-g {
  display: flex; align-items: center; gap: .5rem;
  padding: .85rem 1.4rem;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 9px;
  font-family: 'Outfit', sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; text-decoration: none;
  transition: all .2s; background: transparent;
}
.btn-g:hover { border-color: #fff; background: rgba(255,255,255,.06); }

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.side { display: flex; flex-direction: column; gap: .8rem; position: sticky; top: 1rem; }

/* Resources card — light, matching page identity */
.sres {
  background: #fff;
  border: 1.5px solid #C8C0B8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
}
.sres-title {
  padding: .8rem 1.2rem .4rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .05em;
  color: var(--text);
}
.sres-links { padding: .2rem .7rem .4rem; display: flex; flex-direction: column; gap: .25rem; }
.sres-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem;
  border-radius: 8px;
  border: 1.5px solid #C8C0B8;
  background: #fff;
  font-size: .7rem; font-weight: 600; color: var(--text);
  text-decoration: none; transition: all .2s;
}
.sres-link svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; transition: color .2s; }
.sres-link:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.sres-link:hover svg { color: #fff; }
/* Sous-menu fiches techniques */
.sres-sub { position: relative; }
.sres-sub-toggle { cursor: pointer; width: 100%; border: 1.5px solid #C8C0B8; font-family: 'Outfit', sans-serif; }
.sres-sub-toggle:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.sres-sub-toggle:hover svg { color: #fff; }
.sres-sub-chevron { margin-left: auto; width: 10px; height: 10px; color: var(--muted); transition: transform .25s ease, color .15s; flex-shrink: 0; }
.sres-sub.open .sres-sub-chevron { transform: rotate(180deg); color: var(--orange); }
.sres-sub-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0; }
.sres-sub.open .sres-sub-body { max-height: 400px; padding-top: .25rem; }
.sres-sub-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem .8rem .4rem 2.2rem;
  font-family: 'Outfit', sans-serif; font-size: .65rem; font-weight: 600; color: var(--text);
  text-decoration: none; border-radius: 6px; transition: all .15s;
  border: 1px solid transparent;
}
.sres-sub-link:hover { background: var(--orange-bg); color: var(--orange); border-color: var(--orange-rim); }
.sres-link:hover svg { color: #fff; }
/* Link type badge */
.sres-type {
  margin-left: auto;
  font-size: .45rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  padding: .1rem .3rem;
  border: 1px solid #C8C0B8;
  border-radius: 5px;
}
.sres-link:hover .sres-type { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.4); }
.sres-type--soon { background: var(--orange-bg); color: var(--orange); border-color: var(--orange-rim); }


/* Other brands — same structure as resources */
.sbrands {
  background: #fff;
  border: 1.5px solid #C8C0B8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
}
.sbrands-title {
  padding: .8rem 1.2rem .4rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .05em;
  color: var(--text);
}
.sbrands-list { padding: .2rem .7rem .5rem; display: flex; flex-direction: column; gap: .25rem; }
.sbrands-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem;
  border-radius: 8px;
  border: 1.5px solid #C8C0B8;
  background: #fff;
  font-size: .7rem; font-weight: 600; color: var(--text);
  text-decoration: none; transition: all .2s;
}
.sbrands-link svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; transition: color .2s; }
.sbrands-link:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.sbrands-link:hover svg { color: #fff; }
.sbrands-arrow {
  margin-left: auto;
  font-size: .55rem;
  color: var(--muted);
  transition: all .2s;
}
.sbrands-link:hover .sbrands-arrow { color: #fff; transform: translateX(2px); }
.sres-sub-link .sbrands-arrow { margin-left: auto; font-size: .55rem; color: var(--muted); transition: all .2s; }
.sres-sub-link:hover .sbrands-arrow { color: var(--orange); transform: translateX(2px); }

/* ══ SIDEBAR — Accordeons (Ressources + Autres marques) ══ */
.side-acc {
  background: #fff;
  border: 1.5px solid #C8C0B8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
}
.side-acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.2rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  border: none; background: #fff; width: 100%;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  gap: .5rem;
}
.side-acc-header:hover { background: var(--input-bg); }
.side-acc-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .05em;
  color: var(--text);
  display: flex; align-items: center; gap: .3rem;
  flex-shrink: 0;
}
.side-acc-count {
  font-family: 'Outfit', sans-serif;
  font-size: .55rem; font-weight: 700;
  background: var(--input-bg); color: var(--muted);
  padding: .1rem .4rem; border-radius: 10px;
  letter-spacing: .03em;
  margin-left: auto;
}
.side-acc.open .side-acc-count {
  background: var(--orange-bg); color: var(--orange);
}
.side-acc-chevron {
  width: 18px; height: 18px;
  color: var(--muted);
  transition: transform .25s ease, color .15s;
  flex-shrink: 0;
}
.side-acc.open .side-acc-chevron {
  transform: rotate(180deg);
  color: var(--orange);
}
.side-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.side-acc.open .side-acc-body {
  border-top: 1px solid var(--dim);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(181,98,42,.25) transparent;
}
.side-acc.open .side-acc-body::-webkit-scrollbar { width: 4px; }
.side-acc.open .side-acc-body::-webkit-scrollbar-track { background: transparent; }
.side-acc.open .side-acc-body::-webkit-scrollbar-thumb { background: rgba(181,98,42,.25); border-radius: 4px; }
.side-acc.open .side-acc-body::-webkit-scrollbar-thumb:hover { background: rgba(181,98,42,.45); }
.side-acc.open .side-acc-body::-webkit-scrollbar-thumb:active { background: #B5622A; }

/* Reassurance Pro — same structure as resources/brands */
.sreassure {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 1rem 1.2rem;
}
.sreassure-title {
  padding: 0 0 .6rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .05em;
  color: var(--text);
}
.sreassure-items { padding: 0; display: flex; flex-direction: column; gap: 0; }
.sreassure-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
  transition: all .2s;
}
.sreassure-item:last-child { border-bottom: none; }

.sreassure-item .sreassure-icon { width: 38px; height: 38px; min-width: 38px; background: #F5F5F5; border: 1px solid #C5C5C5; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sreassure-item .sreassure-icon svg { width: 18px; height: 18px; color: var(--text); }

.sreassure-label {
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .15rem;
}
.sreassure-desc {
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.6;
}



/* ══ WHATSAPP FLOAT — identique homepage ══ */
.wa-float {
  position: fixed; bottom: 2rem; left: 2rem; z-index: 999;
  display: flex; align-items: center; gap: .5rem; background: #fff;
  border: 2px solid #25D366; border-radius: 50px;
  padding: .5rem 1.2rem .5rem .5rem; text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,.15);
  opacity: 0; transform: translateY(20px); transition: all .3s ease; pointer-events: none;
}
.wa-float.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wa-float:hover { box-shadow: 0 8px 30px rgba(37,211,102,.2); transform: translateY(-2px); }
.wa-float-icon {
  width: 42px; height: 42px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wa-float-icon svg { width: 22px; height: 22px; fill: #fff; }
.wa-float-text { display: flex; flex-direction: column; gap: .1rem; }
.wa-float-label { font-family: 'Outfit', sans-serif; font-size: .78rem; font-weight: 700; color: #3D4A52; white-space: nowrap; }
.wa-float-sub { font-family: 'Outfit', sans-serif; font-size: .68rem; font-weight: 600; color: #25D366; white-space: nowrap; }

/* ══ ONEY FLOAT — identique homepage ══ */
.oney-float {
  position: fixed; bottom: 2rem; right: 5.5rem; z-index: 998;
  display: flex; align-items: center; gap: .5rem; background: #fff;
  border: 2px solid #5FA535; border-radius: 50px;
  padding: .5rem 1.2rem .5rem .5rem; text-decoration: none;
  box-shadow: 0 4px 20px rgba(95,165,53,.15);
  opacity: 0; transform: translateY(20px); transition: all .3s ease; pointer-events: none;
}
.oney-float.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.oney-float:hover { border-color: #4a8829; box-shadow: 0 8px 30px rgba(95,165,53,.2); transform: translateY(-2px); }
.oney-float-icon {
  width: 42px; height: 42px; background: #edf7e6; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.oney-float-icon span { font-family: 'Outfit', sans-serif; font-size: .8rem; font-weight: 800; color: #5FA535; }
.oney-float-text { display: flex; flex-direction: column; gap: .1rem; }
.oney-float-label { font-family: 'Outfit', sans-serif; font-size: .78rem; font-weight: 700; color: #3D4A52; white-space: nowrap; }
.oney-float-sub { font-family: 'Outfit', sans-serif; font-size: .68rem; font-weight: 600; color: #5FA535; white-space: nowrap; }

/* ══ TRUSTED SHOPS FLOAT ══ */
.ts-float {
  position: fixed; right: 2rem; top: 50%; transform: translateY(-50%);
  z-index: 997; background: #fff; border: 2px solid #F0B323; border-radius: 14px;
  padding: .8rem .7rem; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.1); opacity: 0; pointer-events: none; transition: all .3s ease;
  text-decoration: none; width: 80px;
}
.ts-float.visible { opacity: 1; pointer-events: auto; }
.ts-float:hover { box-shadow: 0 8px 30px rgba(240,179,35,.25); transform: translateY(-50%) translateY(-2px); }
.ts-float-shield { width: 36px; height: 36px; background: #F0B323; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ts-float-shield svg { color: #fff; width: 20px; height: 20px; }
.ts-float-label { font-family: 'Outfit', sans-serif; font-size: .48rem; font-weight: 600; color: var(--text); text-align: center; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; }
.ts-float-stars { font-size: .65rem; color: #F0B323; letter-spacing: .05em; }
.ts-float-note { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: var(--text); line-height: 1; }
.ts-float-sub { font-family: 'Outfit', sans-serif; font-size: .48rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@media(max-width: 960px) { .ts-float { display: none; } }
/* ══ BACK TO TOP — identique homepage ══ */
.back-to-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 48px; height: 48px; background: #fff;
  border: 1.5px solid #C8C0B8; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 50;
  opacity: 0; pointer-events: none; transition: all .3s;
  box-shadow: 0 4px 16px rgba(0,0,0,.08); text-decoration: none;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { border-color: var(--orange); box-shadow: 0 6px 20px rgba(181,98,42,.15); }
.back-to-top svg { color: var(--muted); transition: color .2s; }
.back-to-top:hover svg { color: var(--orange); }

/* ══ ANIMATIONS ══ */
@keyframes fu { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bcard { animation: fu .45s ease both; }
.coll-wrap { animation: fu .45s .1s ease both; }
.cta-devis { animation: fu .45s .18s ease both; }
.side > *:nth-child(1) { animation: fu .4s .08s ease both; }
.side > *:nth-child(2) { animation: fu .4s .16s ease both; }

/* ══ RESPONSIVE ══ */
@media(max-width: 960px) {
  .page { grid-template-columns: 1fr; }
  .side { position: static; flex-direction: row; flex-wrap: wrap; }
  .sres, .sbrands, .side-acc { flex: 1; min-width: 240px; }
  .coll-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem; }
  .coll-grid-bottom { grid-template-columns: 1fr; max-width: 50%; gap: 1rem; padding: 0 1rem 1rem; }
  .cc:nth-child(n+4) { }
  .bcard-showcase { grid-template-columns: 1fr 140px; }
  .bcard-feats-row { grid-template-columns: 1fr; }
  .bcard-prop-grid { grid-template-columns: repeat(2, 1fr); }
  .bcard-feat { border-right: none; border-bottom: 1.5px solid #C8C0B8; }
  .bcard-feat:last-child { border-bottom: none; }
  .oney-float { right: 4.5rem; }
  .wa-float-text, .oney-float-text { display: none; }
  .wa-float { padding: .5rem; }
  .oney-float { padding: .5rem; }
}
@media(max-width: 600px) {
  .page { padding: .5rem 1rem 2rem; gap: 1rem; }
  .bc { padding: .8rem 1rem .4rem; }
  .bcard-showcase { grid-template-columns: 1fr; }
  .bcard-photo { border-right: none; border-bottom: 1.5px solid var(--border); }
  .bcard-labels { border-left: none; border-top: 1.5px solid var(--border); padding: .8rem; }
  .bcard-labels-img { height: 80px; object-fit: contain; }
  .bcard-feats-row { grid-template-columns: 1fr; }
  .bcard-feat + .bcard-feat { border-left: none; border-top: 1px solid var(--dim); }
  .bcard-feat { border-right: none; }
  .bcard-prop-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .bcard-stats { flex-wrap: wrap; }
  .bcard-stat { min-width: 33%; }
  .coll-grid { grid-template-columns: 1fr; gap: .8rem; padding: .8rem; }
  .coll-grid-bottom { grid-template-columns: 1fr; max-width: 100%; gap: .8rem; padding: 0 .8rem .8rem; }
  .cc { border-bottom: none; }
  .side { flex-direction: column; }
  .cta-devis { flex-direction: column; padding: 1.2rem 1.4rem; }
  .bcard-header { }
  .bcard-main { flex-wrap: wrap; padding: 1rem 1.4rem; }
  .sk-logo { height: 28px; }
  .bcard-intro { padding: 1.2rem 1.4rem; }
  .bcard-bottom { padding: .8rem 1.4rem 1rem; }
}
/* ══ Newsletter consent - proper white styling ══ */

/* ══ Footer brand trust block ══ */
.footer-brand-trust {
  margin-top: .8rem; padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-brand-trust .footer-pay { margin-bottom: .4rem; }
.footer-brand-trust .footer-pay-oney { margin-bottom: .4rem; }
.footer-brand-trust .footer-rea-item { margin-top: .2rem; }

.footer-nl-consent {
  display: flex; align-items: center; gap: .3rem;
  cursor: pointer;
}
.footer-nl-consent input[type="checkbox"] {
  width: 12px; height: 12px;
  accent-color: #B5622A; flex-shrink: 0;
  appearance: auto;
}
.footer-nl-consent-text {
  font-size: .52rem; color: rgba(255,255,255,.85);
  line-height: 1.2; font-weight: 400; white-space: nowrap;
}
.footer-nl-row {
  display: flex; align-items: center; gap: .5rem; width: 100%;
}
.footer-nl-consent-link {
  color: #fff; text-decoration: underline;
  text-underline-offset: 2px; font-weight: 600;
}
.footer-nl-consent-link:hover { color: var(--orange); }

/* ══ Footer Oney infobulle - much more visible ══ */
.footer-oney-tip {
  position: relative; display: flex;
  align-items: center; margin-left: .35rem;
}
.footer-oney-info {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.5);
  color: #fff; font-size: .55rem; font-weight: 700;
  font-family: 'Outfit', sans-serif;
  cursor: pointer; transition: all .2s;
  line-height: 1; font-style: italic;
}
.footer-oney-info:hover {
  background: #fff; color: var(--text); border-color: #fff;
}
.footer-oney-bubble {
  display: none; position: absolute;
  bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff;
  font-size: .72rem; line-height: 1.6;
  padding: .6rem 1rem; border-radius: 7px;
  width: 420px; max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  letter-spacing: .04em; z-index: 100;
}
.footer-oney-bubble-arrow {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}

.rdv-consent { margin:.8rem 0; }
.rdv-submit {
  width:100%; margin-top:1rem; padding:.7rem;
  border:2px solid #2E7D32;
  border-radius:7px;
  background:#2E7D32;
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:background .2s, border-color .2s, color .2s;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.rdv-submit:hover { background:#1B5E20 !important; border-color:#1B5E20 !important; color:#fff !important; }
.rdv-submit.rdv-disabled { cursor:default; opacity:.55; pointer-events:none; }
.rdv-submit span { font-size:.65rem; }
.rdv-legal {
  margin-top:.8rem; padding-top:.7rem; border-top:1px solid #B0A89E;
  font-size:.6rem; font-weight:400; color:#3D4A52; text-align:center; line-height:1.5;
}
.rdv-legal a { color:#2E7D32; text-decoration:none; font-weight:600; }
.rdv-legal a:hover { text-decoration:underline; }
@media(max-width:560px) {
  .rdv-body { padding:1.2rem; }
  .rdv-slots { grid-template-columns:repeat(2,1fr); }
  .rdv-form-row { grid-template-columns:1fr; }
  .oney-float { right:4.5rem; }
}

/* WhatsApp floating button */
.wa-float {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 2px solid #25D366;
  border-radius: 50px;
  padding: .5rem 1.2rem .5rem .5rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,.15);
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s ease;
  pointer-events: none;
}
.wa-float.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wa-float:hover {
  border-color: #25D366;
  box-shadow: 0 8px 30px rgba(37,211,102,.2);
  transform: translateY(-2px);
}
.wa-float-icon {
  width: 42px; height: 42px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wa-float-icon svg { width: 22px; height: 22px; fill: #fff; }
.wa-float-text {
  font-family: 'Outfit', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* ══ FORMULAIRE CONTACT ══ */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: .8rem;
}
.ct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.ct-form-field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.ct-form-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ct-form-input {
  font-family: 'Outfit', sans-serif;
  font-size: .8rem;
  font-weight: 400;
  color: var(--text);
  padding: .6rem .8rem;
  border: 1.5px solid #C8C0B8;
  border-radius: 8px;
  background: #fff;
  outline: none;
  transition: border-color .2s;
}
.ct-form-input::placeholder { color: var(--muted); font-weight: 300; }
.ct-form-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(181,98,42,.15); }
.ct-form-textarea { resize: vertical; min-height: 70px; }
.ct-form-consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .6rem;
}
.ct-form-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--dim);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.ct-form-checkbox:checked {
  border-color: var(--orange);
  background: var(--orange);
}
.ct-form-checkbox:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
}
.ct-form-consent-text {
  font-size: .68rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}
.ct-form-consent-link {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ct-form-consent-link:hover { opacity: .75; }
.ct-form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .75rem 1.4rem;
  background: #3D4A52;
  border: 2px solid #3D4A52;
  border-radius: 9px;
  font-family: 'Outfit', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .22s;
}
.ct-form-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 100%);
}
.ct-form-btn:hover {
  background: #B5622A;
  border-color: #B5622A;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(181,98,42,.35);
}
.ct-form-btn span { font-size: .85rem; }
.ct-form-btn { margin-bottom: 1rem; }

/* ══ NEWSLETTER FOOTER BAND ══ */
.footer-nl-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem 2rem;
  border-top: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.footer-nl-left {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
}
.footer-nl-left svg {
  color: #fff !important;
  flex-shrink: 0;
}
.footer-nl-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.footer-nl-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: .06em;
  color: #fff;
}
.footer-nl-desc {
  font-size: .62rem;
  color: #fff;
  font-weight: 400;
}
.footer-nl-right {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
  max-width: 480px;
}
.footer-nl-input {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 400;
  color: #fff;
  padding: .55rem .8rem;
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  outline: none;
  transition: border-color .2s;
}
.footer-nl-input::placeholder { color: rgba(255,255,255,.75); }
.footer-nl-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(181,98,42,.15); }
.footer-nl-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  background: #3D4A52;
  border: 2px solid #3D4A52;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.footer-nl-btn:hover {
  background: #B5622A;
  border-color: #B5622A;
  transform: translateY(-1px);
}
.footer-nl-btn span { font-size: .8rem; }
.footer-nl-unsub {
  font-size: .6rem;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: color .2s;
}
.footer-nl-unsub:hover { color: var(--orange); }



/* Response bar inside contact container */
.ct-response-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 0;
  margin: 0 0 .4rem;
  border-top: 1px solid #C8C0B8;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
}
.ct-response-bar::before {
  content: '✓';
  font-size: .7rem;
}
/* Barre contact haut footer */
.footer-contact-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 2rem;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 1.5rem;
}
.footer-contact-bar-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .62rem; color: #fff !important; text-decoration: none;
  transition: color .2s; white-space: nowrap; padding: .5rem .3rem; min-height: 44px;
}
.footer-contact-bar-item:hover { color: #B5622A; }
.footer-contact-bar-item:hover svg { color: #B5622A; }
.footer-contact-bar-item svg,
.footer-contact-bar-item img {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex-shrink: 0;
  display: block;
}
.footer-contact-bar-item svg { color: #fff !important; }
.footer-contact-bar-sep { width: 1px; height: 12px; background: rgba(255,255,255,.15); flex-shrink: 0; }
/* ══ FOOTER ══ */
.site-footer {
  background: var(--text);
  margin-top: 3rem;
  border-top: 2px solid var(--orange);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 0;
}



/* Footer brand info */
.footer-brand-info {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.footer-brand-info-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .65rem;
  color: #fff;
  font-weight: 400;
}
.footer-brand-info-item svg {
  color: #fff !important;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* Zone haute — 4 colonnes */
.footer-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-bottom: 2rem;
  align-items: start;
}
.footer-cell {
  padding: 0 2rem;
  border-left: 1px solid rgba(255,255,255,.15);
}
.footer-cell:first-child { border-left: none; padding-left: 0; }
.footer-cell:last-child { padding-right: 0; }

/* Logo */
.footer-brand {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.footer-logo { margin-bottom: .6rem; }
.footer-tagline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .9rem;
  color: #fff;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.3;
  margin-bottom: .8rem;
}
.footer-brand-desc {
  font-size: .75rem;
  color: rgba(255,255,255,.85);
  font-weight: 300;
  line-height: 1.7;
}

/* Colonnes nav */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-col-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: #fff;
  margin-bottom: .8rem;
}
.footer-link {
  font-size: .82rem;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  transition: color .2s, padding-left .2s;
  padding: .3rem 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-link::before {
  content: '·';
  color: rgba(255,255,255,.5);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  width: 6px;
  text-align: center;
}
.footer-link:hover {
  color: var(--orange);
  padding-left: .3rem;
}
.footer-link:visited, .footer-link:active { color: #fff; }
.footer-link:visited:hover, .footer-link:active:hover { color: var(--orange); }


/* Reassurance inline in trust bar */
.footer-rea {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer-pay {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.footer-pay-label {
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
}
.footer-pay-icons {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.footer-pay-icon {
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  opacity: .9;
  transition: opacity .2s;
}
.footer-pay-icon:hover { opacity: 1; }
.footer-pay-oney {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.footer-pay-oney-label {
  font-size: .62rem;
  color: rgba(255,255,255,.7);
}
.footer-pay-oney-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .15rem .45rem;
  background: var(--orange);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: .03em;
}
.footer-pay-oney-by {
  font-size: .62rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}
.footer-rea-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .62rem;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  letter-spacing: .02em;
}
.footer-rea-item svg {
  color: #fff !important;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

/* Trust bar */
.footer-trust-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.footer-google {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  padding: .5rem .9rem;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 8px;
  transition: all .2s;
  cursor: pointer;
}
.footer-google:hover {
  border-color: var(--orange);
  background: rgba(255,255,255,.05);
}
.footer-google-stars {
  font-size: .7rem;
  color: var(--orange);
}
.footer-google-note {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .95rem;
  color: #fff;
}
.footer-google-label {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.footer-social-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-social-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  margin-right: .3rem;
}
.footer-social-link {
  position: relative;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: all .2s;
}
.footer-social-link::after {
  content: '↗';
  position: absolute;
  top: -3px; right: -3px;
  font-size: .4rem;
  color: var(--orange);
  font-weight: 700;
}
.footer-social-link:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255,255,255,.05);
}
.footer-social-link--linkedin,
.footer-social-link--facebook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.footer-social-link--linkedin::after,
.footer-social-link--facebook::after {
  display: none;
}

/* Zone légale */
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 1.5rem 0;
}
.footer-legal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.footer-legal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .95rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.8);
}
.footer-legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.footer-legal-link {
  font-size: .75rem;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 400;
  transition: color .2s;
  padding: .2rem .8rem;
  border-right: 1px solid rgba(255,255,255,.2);
  white-space: nowrap;
}
.footer-legal-link:last-child { border-right: none; }
.footer-legal-link:hover { color: var(--orange); }

/* Barre copyright pleine largeur */
.footer-copyright-bar {
  background: #2A343B;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-copyright-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-copy {
  font-size: .72rem;
  color: rgba(255,255,255,.85);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: .3rem;
  flex: 1;
}
.footer-company {
  font-size: .72rem;
  color: rgba(255,255,255,.85);
  font-weight: 400;
  letter-spacing: .04em;
  flex: 1;
  text-align: right;
}

/* ── Responsive footer ── */
@media(max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-cell {
    padding: 1.5rem;
    border-left: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .footer-cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
  .footer-cell:nth-child(even) { border-right: none; }
  .footer-cell:first-child { padding-left: 1.5rem; }
}
@media(max-width: 560px) {
  .footer-inner { padding: 0; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-cell {
    padding: 0;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .footer-brand { padding: 2rem 1.5rem 1.5rem; }
  .footer-col { gap: 0; }
  .footer-col-title {
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-accordion-icon {
    display: block;
    font-size: .6rem;
    color: rgba(255,255,255,.4);
    transition: transform .2s;
  }
  .footer-col.open .footer-accordion-icon { transform: rotate(180deg); }
  .footer-col .footer-link { padding: .4rem 1.5rem; display: none; }
  .footer-col.open .footer-link { display: flex; }
  .footer-col.open .footer-link:last-child { padding-bottom: 1rem; }
  .footer-col.open {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(181,98,42,.25) transparent;
  }
  .footer-col.open::-webkit-scrollbar { width: 4px; }
  .footer-col.open::-webkit-scrollbar-track { background: transparent; }
  .footer-col.open::-webkit-scrollbar-thumb { background: rgba(181,98,42,.25); border-radius: 4px; }
  .footer-col.open::-webkit-scrollbar-thumb:hover { background: rgba(181,98,42,.45); }
  .footer-col.open::-webkit-scrollbar-thumb:active { background: rgba(181,98,42,.85); }
  .footer-trust-bar { flex-direction: column; gap: .8rem; padding: 1rem 1.5rem; }
  .footer-contact-bar { flex-direction: column; gap: .6rem; padding: .8rem 1.5rem; }
  .footer-contact-bar-sep { display: none; }
  .footer-legal { padding: 1.2rem 1.5rem; }
  .footer-legal-inner { align-items: flex-start; }
  .footer-legal-links { flex-direction: column; gap: .3rem; }
  .footer-legal-link { border-right: none; padding: .15rem 0; }
  .footer-copyright-inner {
    flex-direction: column;
    text-align: center;
    gap: .5rem;
    padding: 1rem 1.5rem;
  }
  .footer-copyright-inner .footer-copy,
  .footer-copyright-inner .footer-company {
    flex: none;
    text-align: center;
  }
}
@media(min-width: 561px) {
  .footer-accordion-icon { display: none; }
}

/* ══ BOUTON "NOUS TROUVER" ══ */
.footer-find-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.2rem;background:transparent;border:2px solid #fff;border-radius:7px;font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;cursor:pointer;transition:all .22s;flex-shrink:0}
.footer-find-btn svg{flex-shrink:0;color:#fff;transition:all .2s}
.footer-find-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff !important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(181,98,42,.3)}

/* ══ MODALE "NOUS TROUVER" ══ */
.find-overlay{display:none;position:fixed;inset:0;background:rgba(30,36,40,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;padding:1.5rem}
.find-overlay.find-open{display:flex;animation:findFadeIn .2s ease}
@keyframes findFadeIn{from{opacity:0}to{opacity:1}}
.find-modal{background:#fff;border-radius:14px;width:100%;max-width:720px;max-height:90vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:findSlideUp .3s ease;display:flex;flex-direction:column}
@keyframes findSlideUp{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.find-header{display:flex;align-items:center;justify-content:center;padding:1.1rem 1.4rem;border-bottom:1px solid var(--dim);background:#F7F5F2;position:relative}
.find-header-left{display:flex;align-items:center;gap:.5rem}
.find-header-icon{width:38px;height:38px;background:transparent;border:none;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center}
.find-header-icon svg{color:var(--orange)}
.find-close{position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;border:1.5px solid var(--dim);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;transition:all .2s}
.find-close:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-bg)}
.find-map{width:100%;height:260px;border:0;display:block;background:var(--dim)}
.find-body{padding:1.2rem 1.4rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.find-bloc{display:flex;flex-direction:column;gap:0;padding:0 1.2rem;border-right:1.5px solid var(--dim)}
.find-bloc:first-child{padding-left:.2rem}
.find-bloc:last-child{border-right:none;padding-right:.2rem}
.find-info{display:flex;align-items:flex-start;gap:.5rem;padding:.7rem 0;border-bottom:none}
.find-info:last-child{border-bottom:none}
.find-info-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;background:transparent;border:none;border-radius:0;box-shadow:none}
.find-info-icon svg,.find-info-icon img{width:20px;height:20px;min-width:20px;display:block}
.find-info-icon svg{color:var(--orange)}
.find-info-icon--wa{background:transparent;border:none}
.find-info-icon--wa svg{color:#25D366}
.find-info-label{font-size:.48rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.05rem}
.find-info-value{font-size:.78rem;font-weight:500;color:var(--text);line-height:1.35}
.find-info-value a{color:var(--orange);text-decoration:none;font-weight:600}
.find-info-value a:hover{text-decoration:underline}
.find-footer{padding:1rem 1.4rem 1.2rem;border-top:1.5px solid var(--dim);display:flex;gap:.8rem}
.find-btn-gmaps,.find-btn-itineraire{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1rem;border-radius:9px;font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:all .22s;cursor:pointer}
.find-btn-gmaps{background:transparent;border:2px solid var(--orange);color:var(--orange)}
.find-btn-gmaps svg{color:var(--orange);transition:color .2s}
.find-btn-gmaps:hover{background:var(--orange);color:#fff !important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(181,98,42,.25)}
.find-btn-gmaps:hover svg{color:#fff}
.find-btn-itineraire{background:transparent;border:2px solid var(--text);color:var(--text)}
.find-btn-itineraire svg{color:var(--text);transition:color .2s}
.find-btn-itineraire:hover{background:var(--text);color:#fff !important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(61,74,82,.25)}
.find-btn-itineraire:hover svg{color:#fff}
.find-btn-gmaps svg,.find-btn-itineraire svg{flex-shrink:0}
@media(max-width:600px){.find-modal{max-width:100%;border-radius:12px}.find-map{height:180px}.find-body{grid-template-columns:1fr;gap:.6rem}.find-bloc{padding:0;border-right:none;border-bottom:1px solid var(--dim);padding-bottom:.5rem}.find-bloc:last-child{border-bottom:none;padding-bottom:0}.find-footer{flex-direction:column}}

/* ══ Modal Devis ══ */
.dv-overlay{display:none;position:fixed;inset:0;background:rgba(30,36,40,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;padding:1.5rem}
.dv-overlay.dv-open{display:flex;animation:findFadeIn .2s ease}
.dv-modal{background:#fff;border-radius:14px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:findSlideUp .3s ease;display:flex;flex-direction:column}
.dv-header{display:flex;align-items:center;justify-content:center;padding:1rem 1.4rem;border-bottom:1px solid var(--dim);background:#F7F5F2;position:relative}
.dv-header-title{font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:700;color:var(--text)}
.dv-close{position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;border:1.5px solid var(--dim);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;transition:all .2s}
.dv-close:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-bg)}
.dv-body{padding:1.2rem 1.4rem}
.dv-recap{background:#F5F5F5;border:1px solid #C5C5C5;border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem}
.dv-recap-title{font-family:'Outfit',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:.5rem}
.dv-recap-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0;font-size:.72rem;border-bottom:1px solid rgba(181,98,42,.12)}
.dv-recap-row:last-child{border-bottom:none}
/* Rang qui porte une LISTE de produits : le libelle reste en haut a gauche, la
   liste occupe le reste et se lit de gauche a droite. Cale a droite, une pile
   de decors et de produits devenait illisible (Sam 24/08). */
.dv-recap-row--liste{align-items:flex-start;gap:1rem}
/* De l'air entre deux etapes : elles se touchaient et se lisaient comme un
   seul pave (Sam 25/08). */
.dv-recap-row--liste+.dv-recap-row--liste{padding-top:1.5rem}
.dv-recap-row--liste:not(:last-child){padding-bottom:1.1rem}
.dv-recap-row--liste>span:first-child{flex:0 0 auto;padding-top:.1rem;color:var(--muted);font-weight:500}
/* Ecran etroit : le libelle d'etape passe au-dessus de sa liste, ce qui rend
   toute la largeur au nom du produit et a sa reference (Sam 24/08). */
.dv-recap-row--etroit{flex-direction:column;align-items:stretch;gap:.2rem}
.dv-recap-row--etroit>span:first-child{padding-top:0}
/* Une SEULE grille pour toute la liste : les noms occupent la colonne 1, les
   references la colonne 2. Elles commencent donc toutes au meme endroit, quelle
   que soit la longueur du nom (Sam 24/08). Chaque produit se fond dans cette
   grille grace a display:contents. */
.dv-recap-row .dv-liste{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);column-gap:.6rem;row-gap:.12rem;flex:1 1 auto;text-align:left;min-width:0}
.dv-recap-row .dv-liste__item{display:contents}
.dv-recap-row .dv-liste__tete{display:contents}
/* La marque est une colonne, plus un intertitre : le bloc reste d'un seul
   tenant meme quand une etape melange deux marques (Sam 24/08). */
.dv-recap-row .dv-liste .dv-liste__marque{grid-column:1;font-weight:400;color:var(--muted);white-space:nowrap}
.dv-recap-row .dv-liste .dv-liste__item:first-child .dv-liste__marque{margin-top:0}
.dv-recap-row .dv-liste .dv-liste__nom{grid-column:2;font-weight:700;color:var(--text);white-space:nowrap}
/* Nom cliquable : souligne en permanence, jamais un lien deguise. */
.dv-recap-row .dv-liste .dv-liste__lien{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(181,98,42,.5);cursor:pointer}
.dv-recap-row .dv-liste .dv-liste__lien:hover{color:var(--orange);text-decoration-color:var(--orange)}
.dv-recap-row .dv-liste .dv-liste__ref{grid-column:3;font-weight:400;color:var(--muted);white-space:nowrap}
/* Repli sur ecran tres etroit : plus de colonnes, un produit par ligne de
   texte qui se replie normalement, jamais de debordement (Sam 24/08). */
.dv-recap-row .dv-liste--serre{display:flex;flex-direction:column;gap:.3rem}
.dv-recap-row .dv-liste--serre .dv-liste__item{display:block}
.dv-recap-row .dv-liste--serre .dv-liste__tete{display:block}
.dv-recap-row .dv-liste--serre .dv-liste__marque:after{content:" · "}
.dv-recap-row .dv-liste--serre .dv-liste__nom:after{content:" · "}
.dv-recap-row .dv-liste--serre .dv-liste__marque,
.dv-recap-row .dv-liste--serre .dv-liste__nom,
.dv-recap-row .dv-liste--serre .dv-liste__ref{white-space:normal}

.dv-recap-row span:first-child{color:var(--muted);font-weight:500}
.dv-recap-row span:last-child{color:var(--text);font-weight:600}
.dv-field{margin-bottom:.8rem}
.dv-field label{display:block;font-family:'Outfit',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.dv-field input,.dv-field textarea{width:100%;padding:.6rem .8rem;border:1.5px solid var(--dim);border-radius:8px;font-family:'Outfit',sans-serif;font-size:.78rem;color:var(--text);background:#fff;transition:border-color .2s;box-sizing:border-box}
.dv-field input:focus,.dv-field textarea:focus{outline:none;border-color:var(--orange)}
.dv-field textarea{resize:vertical;min-height:60px}
.dv-field input::placeholder,.dv-field textarea::placeholder{color:var(--dim)}
.dv-required{color:#C0392B}
.dv-submit{width:100%;padding:.8rem;background:var(--orange);color:#fff;font-family:'Outfit',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:none;border-radius:9px;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(181,98,42,.3);display:flex;align-items:center;justify-content:center;gap:.4rem}
.dv-submit:hover{background:#C8743A;transform:translateY(-1px)}
.dv-footer-note{text-align:center;font-size:.55rem;color:var(--muted);margin-top:.7rem;font-style:italic}
@media(max-width:600px){.dv-modal{max-width:100%;border-radius:12px;margin:.5rem}}

/* ══ Share modal ══ */
.sh-overlay{display:none;position:fixed;inset:0;background:rgba(30,36,40,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;padding:1.5rem}
.sh-overlay.sh-open{display:flex;animation:findFadeIn .2s ease}
.sh-modal{background:#fff;border-radius:14px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:findSlideUp .3s ease;overflow:hidden}
.sh-header{display:flex;align-items:center;justify-content:center;padding:1rem 1.4rem;border-bottom:1px solid var(--dim);background:#F7F5F2;position:relative}
.sh-header-title{font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:700;color:var(--text)}
.sh-close{position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;border:1.5px solid var(--dim);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;transition:all .2s}
.sh-close:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-bg)}
.sh-body{padding:1.2rem 1.4rem}
.sh-ref{background:#F5F5F5;border:1px solid #C5C5C5;border-radius:10px;padding:.7rem 1rem;margin-bottom:1rem;font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:600;color:var(--text);line-height:1.5;text-align:center}
.sh-options{display:flex;flex-direction:column;gap:.5rem}
.sh-btn{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border:1.5px solid var(--dim);border-radius:10px;background:#fff;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--text);font-family:'Outfit',sans-serif;font-size:.75rem;font-weight:600}
.sh-btn:hover{border-color:var(--orange);background:var(--orange-bg)}
.sh-btn-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sh-btn-icon--wa{background:rgba(37,211,102,.08)}
.sh-btn-icon--wa svg{color:#25D366}
.sh-btn-icon--email{background:var(--orange-bg)}
.sh-btn-icon--email svg{color:var(--orange)}
.sh-btn-icon--link{background:var(--input-bg)}
.sh-btn-icon--link svg{color:var(--text)}
.sh-btn-label{display:flex;flex-direction:column}
.sh-btn-label small{font-size:.58rem;font-weight:400;color:var(--muted)}
.sh-copied{font-size:.65rem;color:#5FA535;font-weight:600;text-align:center;margin-top:.5rem;opacity:0;transition:opacity .3s}
.sh-copied.visible{opacity:1}
@media(max-width:600px){.sh-modal{max-width:100%;border-radius:12px;margin:.5rem}}



/* ══ COOKIE BANNER ══ */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--dim); box-shadow: 0 -4px 20px rgba(0,0,0,.1); z-index: 10000; padding: 1.2rem 2rem; }
.cookie-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; }
.cookie-text { flex: 1; }
.cookie-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: .04em; color: var(--text); margin-bottom: .3rem; }
.cookie-desc { font-size: .7rem; color: var(--muted); line-height: 1.6; margin: 0; }
.cookie-more { font-size: .65rem; color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cookie-btn { font-family: 'Outfit', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .6rem 1.2rem; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: all .2s; }
.cookie-btn-reject { background: transparent; border: 1.5px solid #B0A89E; color: #3D4A52; }
.cookie-btn-reject:hover { border-color: #3D4A52; color: #3D4A52; }
.cookie-btn-prefs { background: transparent; border: 1.5px solid #3D4A52; color: #3D4A52; }
.cookie-btn-prefs:hover { background: #3D4A52; color: #fff; }
.cookie-btn-accept { background: #3D4A52; border: 1.5px solid #3D4A52; color: #fff; }
.cookie-btn-accept:hover { background: #B5622A; border-color: #B5622A; }
.cookie-btn-accept.accepted { background: #B5622A; border-color: #B5622A; color: #fff; pointer-events: none; }
.cookie-prefs-overlay { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.5); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.cookie-prefs-panel { background: #fff; border-radius: 10px; max-width: 520px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.cookie-prefs-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid #E8E4E0; }
.cookie-prefs-title { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: .04em; color: #3D4A52; }
.cookie-prefs-close { background: none; border: none; font-size: 1.4rem; color: #7A8A94; cursor: pointer; padding: 0 .3rem; transition: color .2s; }
.cookie-prefs-close:hover { color: #3D4A52; }
.cookie-prefs-body { padding: 1rem 1.2rem; }
.cookie-prefs-intro { font-size: .68rem; color: #7A8A94; line-height: 1.6; margin: 0 0 1rem; }
.cookie-cat { padding: .8rem 0; border-top: 1px solid #E8E4E0; }
.cookie-cat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.cookie-cat-name { font-size: .72rem; font-weight: 700; color: #3D4A52; }
.cookie-cat-status { font-size: .58rem; font-weight: 600; color: var(--text); }
.cookie-cat-desc { font-size: .62rem; color: #7A8A94; line-height: 1.5; }
.cookie-toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; }
.cookie-slider { position: absolute; inset: 0; background: #ccc; border-radius: 20px; cursor: pointer; transition: .3s; }
.cookie-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.cookie-toggle input:checked + .cookie-slider { background: #B5622A; }
.cookie-toggle input:checked + .cookie-slider::before { transform: translateX(16px); }
.cookie-prefs-footer { display: flex; gap: .5rem; padding: 1rem 1.2rem; border-top: 1px solid #E8E4E0; justify-content: flex-end; flex-wrap: wrap; }
/* Page /gestion-cookies : préférences intégrées (pas d'overlay sombre). */
.cookie-page-wrap { max-width: 920px; margin: 2.5rem auto; padding: 0 1.2rem 3rem; }
.cookie-page-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .03em; color: var(--text); margin: 0 0 .6rem; }
.cookie-page-intro { font-size: .78rem; color: var(--muted); line-height: 1.7; margin: 0 0 1.4rem; max-width: 680px; }
.cookie-page .cookie-prefs-panel--page { max-width: 100%; box-shadow: 0 2px 14px rgba(0,0,0,.06); border: 1px solid #E8E4E0; }
.cookie-saved { font-size: .68rem; font-weight: 600; color: #5FA535; padding: 0 1.2rem 1rem; margin: 0; }
/* ══ MODALE CONTACT ══ */
.ct-overlay{display:none;position:fixed;inset:0;background:rgba(30,36,40,.6);backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;padding:1.5rem}
.ct-overlay.ct-open{display:flex;animation:findFadeIn .2s ease}
.ct-modal{background:#fff;border-radius:14px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:findSlideUp .3s ease;display:flex;flex-direction:column}
.ct-modal-header{display:flex;align-items:center;justify-content:center;padding:1rem 1.4rem;border-bottom:1px solid var(--dim);background:#F7F5F2;position:relative;border-radius:14px 14px 0 0}
.ct-modal-title{font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:700;color:var(--text)}
.ct-modal-close{position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;border:1.5px solid var(--dim);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--text);transition:all .2s}
.ct-modal-close:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-bg)}
.ct-modal-body{padding:1.2rem 1.4rem}
.ct-modal-info{background:#F5F5F5;border:1.5px solid #C5C5C5;border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.4rem}
.ct-modal-info-row{display:flex;align-items:center;gap:.5rem;font-size:.65rem;color:var(--text)}
.ct-modal-info-row img,.ct-modal-info-row svg{width:24px;height:24px;min-width:24px;flex-shrink:0;display:block}
.ct-modal-info-row svg{color:var(--text)}
.ct-modal-info-row a{color:var(--orange);text-decoration:none;font-weight:600}
.ct-modal-info-row a:hover{text-decoration:underline}


.hd-panel-reassurance {
  display: flex; align-items: center; gap: .4rem;
  font-size: .58rem; color: #5FA535; font-weight: 600;
  background: rgba(95,165,53,.06); border: 1px solid rgba(95,165,53,.15);
  border-radius: 5px; padding: .4rem .6rem; margin-top: .5rem;
  line-height: 1.4; letter-spacing: .02em;
}
.hd-panel-reassurance svg { flex-shrink: 0; color: #5FA535; }

.textarea-wrap { position:relative; }
.textarea-wrap textarea { width:100%; box-sizing:border-box; }

.char-count { position:absolute; bottom:.5rem; right:.6rem; font-size:.58rem; font-weight:500; color:#7A8A94; pointer-events:none; }
.char-count.warn { color:#B5622A; font-weight:600; }

.ct-upload { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border: 1.5px dashed #C8C0B8; border-radius: 7px; cursor: pointer; transition: all .2s; background: rgba(200,192,184,.06); }
.ct-upload:hover { border-color: var(--orange); background: rgba(181,98,42,.04); }
.ct-upload svg { color: var(--muted); flex-shrink: 0; }
.ct-upload:hover svg { color: var(--orange); }
.ct-upload-text { font-family: 'Outfit', sans-serif; font-size: .72rem; font-weight: 600; color: var(--text); }
.ct-upload-name { font-family: 'Outfit', sans-serif; font-size: .6rem; color: var(--muted); font-weight: 400; }

/* ══ HAMBURGER MENU ══ */
.hd-hamburger{display:none;background:none;border:none;cursor:pointer;padding:.4rem;color:var(--text);flex-shrink:0}
.hd-hamburger svg{display:block}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(30,36,40,.6);backdrop-filter:blur(4px);z-index:9998}
.mobile-overlay.open{display:block}
.mobile-menu{display:none;position:fixed;top:0;right:0;width:300px;max-width:85vw;height:100vh;background:#fff;z-index:9999;box-shadow:-8px 0 30px rgba(0,0,0,.15);overflow-y:auto;transform:translateX(100%);transition:transform .3s ease}
.mobile-menu.open{display:block;transform:translateX(0)}
.mm-header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1.5px solid var(--dim)}
.mm-logo{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.04em}
.mm-logo-p{color:var(--text)}
.mm-logo-d{color:var(--orange)}
.mm-close{width:32px;height:32px;border:1.5px solid var(--dim);border-radius:7px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:.85rem;transition:all .2s}
.mm-close:hover{border-color:var(--orange);color:var(--orange)}
.mm-nav{padding:.8rem 0}
.mm-link{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;font-family:'Outfit',sans-serif;font-size:.8rem;font-weight:600;color:var(--text);text-decoration:none;transition:background .15s;border:none;background:none;cursor:pointer;width:100%;text-align:left}
.mm-link:hover{background:var(--orange-bg);color:var(--orange)}
.mm-link svg{width:18px;height:18px;color:var(--orange);flex-shrink:0}
.mm-sep{height:1px;background:var(--dim);margin:.4rem 1.4rem}
.mm-section{padding:.4rem 1.4rem;font-family:'Outfit',sans-serif;font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mm-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:1rem 1.4rem;padding:.8rem;background:var(--orange);color:#fff;border:none;border-radius:9px;font-family:'Outfit',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:all .2s;box-shadow:0 4px 16px rgba(181,98,42,.3)}
.mm-cta:hover{background:#C8743A}
.mm-contact{padding:1rem 1.4rem;background:#F5F5F5;border-top:1px solid #C5C5C5;margin-top:.5rem}
.mm-contact-item{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;font-size:.72rem;color:var(--text);text-decoration:none}
.mm-contact-item svg{width:14px;height:14px;color:var(--orange);flex-shrink:0}
@media(max-width:768px){
  .hd-utility{display:none}
  .hd-hamburger{display:flex}
  .hd-search{order:10;flex-basis:100%;min-width:0;max-width:100%}
  .header-inner{padding:.8rem 1rem;gap:.6rem;flex-wrap:wrap}
  .hd-logo-sub{display:none}
  .hd-act-text{display:none}
  .hd-act{padding:.3rem}
  .hd-act-icon{width:32px;height:32px}
  .hd-actions{gap:0}
  .main-nav{display:none}
  .hd-user-bar{display:none}
  .page{grid-template-columns:1fr;gap:1rem}
  .side{position:static}
  .prod-hero{grid-template-columns:1fr}
  .decors-grid{grid-template-columns:repeat(2,1fr)}
  .others-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero h1{font-size:1.8rem}
  .page-hero .subtitle{font-size:.75rem}
  .content-section{padding:0 1rem 1.5rem}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .cards-grid-3{grid-template-columns:1fr}
  .steps-row{grid-template-columns:1fr}
  .guarantee-cards{grid-template-columns:1fr}
  .security-grid{grid-template-columns:1fr}
  .payment-cards{grid-template-columns:repeat(2,1fr)}
  .services-list{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-col .footer-link{display:none;padding:.4rem 1.5rem}
  .footer-col.open .footer-link{display:flex}
  .footer-accordion-icon{display:inline}
  .footer-contact-bar{flex-direction:column;gap:.5rem;text-align:center}
  .footer-contact-bar-sep{display:none}
  .footer-nl-band{flex-direction:column;gap:.8rem}
  .footer-nl-right{width:100%}
  .footer-nl-btn{width:100%;justify-content:center}
  .footer-trust-bar{flex-direction:column;gap:.8rem;text-align:center}
  .footer-legal-links{flex-direction:column;gap:.3rem;text-align:center}
  .footer-legal-link{border-right:none;padding:.15rem 0}
  .footer-copyright-inner{flex-direction:column;gap:.8rem;text-align:center}
  .ts-float{display:none}
  .wa-float .wa-float-text{display:none}
  .oney-float .oney-float-text{display:none}
  .back-to-top{right:1rem;bottom:1rem;width:40px;height:40px}
  .faq-hero{padding:1.5rem 1rem}
  .faq-hero-title{font-size:1.8rem}
  .faq-section{margin:0 1rem 1rem}
  .policy-list li{flex-direction:column;gap:.2rem}
  .policy-list li strong{min-width:auto}
  .oney-features{grid-template-columns:1fr}
}
.rdv-overlay {
  position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.rdv-overlay.rdv-open { opacity:1; pointer-events:auto; }
.rdv-modal {
  background:#fff; border-radius:16px; width:480px; max-width:92vw;
  max-height:90vh; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,.25);
  padding:0; transform:translateY(20px) scale(.97); transition:transform .3s;
}
.rdv-overlay.rdv-open .rdv-modal { transform:translateY(0) scale(1); }
.rdv-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.8rem; background:#2E7D32; border-radius:16px 16px 0 0;
}
.rdv-header-title { font-family:'Bebas Neue',sans-serif; font-size:1.15rem; letter-spacing:.08em; color:#fff; }
.rdv-close {
  width:32px; height:32px; border:1.5px solid rgba(255,255,255,.25); border-radius:50%;
  background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0;
}
.rdv-close:hover { border-color:#fff; background:rgba(255,255,255,.1); }
.rdv-close svg { color:rgba(255,255,255,.6); transition:color .2s; }
.rdv-close:hover svg { color:#fff; }
.rdv-body { padding:1.5rem 1.8rem 1.8rem; }
.rdv-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.rdv-cal-month { font-family:'Outfit',sans-serif; font-size:.85rem; font-weight:600; color:#3D4A52; }
.rdv-cal-arrow {
  width:28px; height:28px; border:1.5px solid #B0A89E; border-radius:50%; background:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.rdv-cal-arrow:hover { border-color:#2E7D32; background:#E8F5E9; }
.rdv-cal-arrow svg { color:#7A8A94; }
.rdv-cal-arrow:hover svg { color:#2E7D32; }
.rdv-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:1.2rem; }
.rdv-cal-day-label { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#7A8A94; text-align:center; padding:.4rem 0; }
.rdv-cal-day {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:500; color:#3D4A52; border-radius:8px;
  cursor:pointer; transition:all .15s; border:1.5px solid transparent;
}
.rdv-cal-day:hover:not(.rdv-cal-day--disabled):not(.rdv-cal-day--empty) { background:#E8F5E9; border-color:#2E7D32; }
.rdv-cal-day--selected { background:#2E7D32 !important; color:#fff !important; border-color:#2E7D32 !important; }
.rdv-cal-day--today { border-color:#2E7D32; font-weight:700; }
.rdv-cal-day--disabled { color:#ccc; cursor:default; }
.rdv-cal-day--empty { cursor:default; }
.rdv-slots-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#7A8A94; margin-bottom:.6rem; }
.rdv-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin-bottom:1.2rem; }
.rdv-slot {
  padding:.5rem .3rem; text-align:center; font-size:.72rem; font-weight:500;
  border:1.5px solid #B0A89E; border-radius:7px; cursor:pointer; transition:all .15s;
  background:#fff; color:#3D4A52;
}
.rdv-slot:hover { border-color:#2E7D32; background:#E8F5E9; }
.rdv-slot--selected { background:#2E7D32 !important; border-color:#2E7D32 !important; color:#fff !important; }
.rdv-form-row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.5rem; }
.rdv-form-field { display:flex; flex-direction:column; gap:.2rem; margin-bottom:.5rem; }
.rdv-form-label { font-size:.7rem; font-weight:600; color:#3D4A52; }
.rdv-form-input {
  padding:.55rem .7rem; border:1.5px solid #B0A89E; border-radius:7px;
  font-family:'Outfit',sans-serif; font-size:.78rem; color:#3D4A52; transition:border-color .2s; outline:none;
}
.rdv-form-input::placeholder { color:#6B6058; }
.rdv-form-input:focus { border-color:#2E7D32; }

/* ══ FORM VALIDATION SYSTEM (Points 2-4) ══ */
.form-req { color: #C0392B; font-weight: 700; }
.hd-account-req { color: #C0392B; font-weight: 700; font-size: .7rem; }
.form-hint { display: block; font-size: .58rem; color: #7A8A94; font-style: italic; margin-top: .15rem; line-height: 1.4; }
.form-error-msg { display: none; font-size: .58rem; color: #C0392B; font-weight: 600; margin-top: .15rem; }
.form-field-error .hd-account-input,
.form-field-error .rdv-form-input,
.form-field-error .ct-form-input { border-color: #C0392B !important; box-shadow: 0 0 0 2px rgba(192,57,43,.12) !important; }
.form-field-error .form-error-msg { display: block; }
.form-field-error .hd-account-label,
.form-field-error .rdv-form-label,
.form-field-error .ct-form-label { color: #C0392B; }
.rdv-intro { font-size: .68rem; color: #fff; margin: .3rem 0 .8rem; line-height: 1.5; font-weight: 400; }

/* ══ MEGA CTA DUO (Points 9-10-12) ══ */
.mega-cta-duo { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; }
.mega-cta-duo .mega-visual-cta { margin-top: 0; font-size: .6rem; padding: .55rem .9rem; gap: .4rem; }
.mega-cta-duo .mega-visual-cta svg { flex-shrink: 0; }
.mega-pro-contact {
  background: #fff;
  border-radius: 10px;
  padding: .8rem 1rem;
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mega-pro-contact-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .3rem;
}
.mega-pro-contact-header-icon {
  width: 26px; height: 26px;
  background: var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mega-pro-contact-header-icon svg { width: 14px; height: 14px; color: #fff; }
.mega-pro-contact-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--text);
}
.mega-pro-contact-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .5rem;
  padding: .5rem 1rem;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: 'Outfit', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .2s;
}
.mega-pro-contact-cta:hover { background: #9E5425; box-shadow: 0 4px 16px rgba(181,98,42,.25); }


.mega-pro-contact-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  /* Plus de filet entre les lignes de contact : l'espace suffit a les
     separer, et le bloc en comptait trois de plus. */
  padding: .6rem 0;
  text-decoration: none;
  font-size: .68rem;
  font-weight: 500;
}
.mega-pro-contact-icon {
  width: 30px; height: 30px; min-width: 30px;
  background: var(--input-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.mega-pro-contact-icon svg,
.mega-pro-contact-icon img { width: 16px; height: 16px; display: block; color: var(--muted); transition: color .2s; }
a.mega-pro-contact-item:hover { color: var(--orange); }
a.mega-pro-contact-item:hover .mega-pro-contact-icon { background: var(--orange-bg); }
a.mega-pro-contact-item:hover .mega-pro-contact-icon svg { color: var(--orange); }

/* ══ POINT 6: WA float text matching Oney ══ */
.wa-float-label { font-family:'Outfit',sans-serif; font-size:.78rem; font-weight:700; color:#3D4A52; white-space:nowrap; }
.wa-float-sub { font-family:'Outfit',sans-serif; font-size:.68rem; font-weight:600; color:#25D366; white-space:nowrap; }
.wa-float-text { display:flex; flex-direction:column; gap:.1rem; }


/* ══ UX AUDIT — Reassurance blocks ══ */
.hd-panel-reassurance {
  display: flex; align-items: center; gap: .4rem;
  font-size: .58rem; color: #5FA535; font-weight: 600;
  background: rgba(95,165,53,.06); border: 1px solid rgba(95,165,53,.15);
  border-radius: 5px; padding: .4rem .6rem; margin-top: .5rem;
  line-height: 1.4; letter-spacing: .02em;
}
.hd-panel-reassurance svg { flex-shrink: 0; color: #5FA535; }

/* ══ RDV SMS confirmation notice ══ */

/* ══ RDV reassurance (green on dark) ══ */
.rdv-reassurance {
  display: flex; align-items: center; gap: .4rem;
  font-size: .6rem; color: #5FA535; font-weight: 600;
  background: rgba(95,165,53,.1); border: 1px solid rgba(95,165,53,.2);
  border-radius: 6px; padding: .4rem .65rem; margin: .4rem 0 .2rem;
  line-height: 1.4;
}
.rdv-reassurance svg { flex-shrink: 0; color: #5FA535; }

.rdv-confirm-notice {
  display: flex; align-items: center; gap: .4rem;
  font-size: .62rem; color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: .45rem .65rem; margin: .6rem 0 .2rem;
  line-height: 1.4;
}
.rdv-confirm-notice svg { flex-shrink: 0; color: rgba(255,255,255,.5); }
.social-proof {
  position: fixed;
  bottom: 6.5rem;
  left: 2rem;
  z-index: 998;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: #fff;
  border: 1.5px solid var(--dim);
  border-radius: 12px;
  padding: .7rem 1.2rem .7rem .7rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  opacity: 0;
  transform: translateY(20px);
  transition: all .4s ease;
  pointer-events: none;
  max-width: 380px;
}
.social-proof.sp-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.social-proof-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #E8F5E9;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.social-proof-icon svg { color: #43A047; }
.social-proof-body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.social-proof-text {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}
.social-proof-text strong {
  font-weight: 700;
  color: var(--text);
}
.social-proof-text .sp-product {
  color: var(--orange);
  font-weight: 600;
}
.social-proof-time {
  font-size: .62rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.social-proof-time svg { color: var(--muted); flex-shrink: 0; }
.social-proof-close {
  position: absolute;
  top: .4rem; right: .5rem;
  width: 18px; height: 18px;
  border: none; background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: .65rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all .2s;
}
.social-proof-close:hover { color: var(--text); background: var(--dim); }
@media (max-width: 600px) {
  .social-proof { left: 1rem; right: 1rem; max-width: none; bottom: 6rem; }
}

/* ══ TOGGLE MASQUER LES PRIX ══ */

/* Fix: masquer social-proof et ses enfants quand pas visible */
.social-proof { display: none; }
.social-proof.sp-visible { display: flex; }


/* ══ PAGE COLLECTION / PRODUIT ══ */
.prod-hero{display:grid;grid-template-columns:42fr 58fr;gap:2rem;background:#fff;border:1.5px solid #C5C5C5;border-radius:14px;padding:2rem;animation:fu .45s ease both;box-shadow:0 4px 28px rgba(0,0,0,.12)}
.prod-gallery{display:flex;flex-direction:column;gap:.8rem;position:sticky;top:1rem;align-self:start}
.prod-main-wrap{position:relative;cursor:zoom-in}
.prod-main-zoom{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:52px;height:52px;background:rgba(61,74,82,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .25s ease;pointer-events:none;z-index:5}
.prod-main-zoom svg{width:22px;height:22px;color:#fff;opacity:.6;transition:opacity .25s ease}
.prod-main-wrap:hover .prod-main-zoom{transform:translate(-50%,-50%) scale(1);background:rgba(61,74,82,.7)}
.prod-main-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:50%;width:40px;height:40px;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;z-index:6;opacity:0;pointer-events:none}
.prod-main-wrap:hover .prod-main-arrow{opacity:1;pointer-events:auto}
.prod-main-arrow:hover{background:var(--orange);border-color:var(--orange)}
.prod-main-prev{left:.6rem}.prod-main-next{right:.6rem}
.prod-main-wrap:hover .prod-main-zoom svg{opacity:1}
.prod-main-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1.5px solid var(--border);cursor:zoom-in;transition:border-color .2s}
.prod-main-img:hover{border-color:var(--orange)}
.prod-thumbs{display:flex;gap:.5rem;margin-top:.5rem}
.prod-thumb-wrap{position:relative;display:inline-block;flex:1}
.prod-thumb{width:100%;height:70px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:all .2s;opacity:.6;display:block}
.prod-thumb:hover,.prod-thumb.active{border-color:var(--orange);opacity:1;box-shadow:0 2px 12px rgba(181,98,42,.3)}
.thumb-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:#fff;font-size:.35rem;font-weight:600;text-align:center;padding:.1rem 0;letter-spacing:.03em;text-transform:uppercase;border-radius:0 0 4px 4px;pointer-events:none}
.prod-info{display:flex;flex-direction:column;gap:.8rem}
.prod-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:#F5F5F5;border:1px solid #C5C5C5;padding:.2rem .6rem;border-radius:5px;width:fit-content}
.prod-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.04em;color:var(--text);line-height:1.1}
.prod-title-sub{display:block;font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-bottom:.2rem}
.prod-ref{font-size:.8rem;font-weight:600;color:var(--muted)}
.prod-class{display:inline-flex;align-items:center;gap:.4rem;font-size:.62rem;font-weight:700;color:var(--text);letter-spacing:.03em;padding:.25rem .7rem;background:#F5F5F5;border-radius:6px;margin:.4rem 0;white-space:nowrap}
.tip-wrap{position:relative;display:inline-flex;align-items:center;cursor:help}
.tip-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--text);color:#fff;border-radius:50%;font-size:13px;font-weight:700;font-style:italic;font-family:Georgia,'Times New Roman',serif;margin-left:.3rem;flex-shrink:0;transition:background .15s;line-height:1}
.tip-wrap:hover .tip-icon{background:var(--orange)}
.tip-content{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--text);color:#fff;font-size:.68rem;font-weight:400;letter-spacing:.03em;text-transform:none;text-align:center;line-height:1.5;padding:.5rem .9rem;border-radius:7px;white-space:normal;width:max-content;max-width:300px;min-width:140px;z-index:99999;box-shadow:0 4px 12px rgba(0,0,0,.18);font-style:normal;pointer-events:none;opacity:0;transition:opacity .15s ease}
.tip-content::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--text)}
.tip-wrap:hover .tip-content{opacity:1;pointer-events:auto}
.tip-wrap,.tip-icon,.prod-class,.prod-title-sub,.prod-docs,.qty-note,.prod-spec{overflow:visible!important}
.prod-specs{display:flex;flex-direction:column;gap:.4rem;padding:.8rem 0;border-top:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim)}
.prod-spec{display:flex;align-items:center;gap:.5rem;font-size:.75rem}
.prod-spec-label{font-weight:600;color:var(--text);min-width:100px}.prod-spec-val{color:#000;font-weight:500}
.badge-soon{display:inline-block;font-size:.45rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text);background:#F5F5F5;border:1px solid #C5C5C5;padding:.1rem .35rem;border-radius:4px;margin-left:.3rem;vertical-align:middle}
.prod-cond{background:#fff;border-radius:8px;padding:.8rem 1rem}
.prod-cond-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text);margin-bottom:.5rem}
.prod-cond-grid{display:flex;flex-direction:column;gap:.3rem}
.prod-cond-row{display:flex;justify-content:space-between;font-size:.72rem}
.prod-cond-row span:first-child{color:var(--muted);font-weight:500}.prod-cond-row span:last-child{color:#000;font-weight:600}
.price-section{background:#fff;border:1.5px solid #C5C5C5;border-radius:10px;padding:1rem 1.2rem;margin:.2rem 0}
.price-top{display:flex;align-items:center;justify-content:space-between}
.price-toggle{display:flex;align-items:center;gap:.5rem;font-size:.65rem;font-weight:600;color:var(--muted)}
.price-toggle-btn{position:relative;width:40px;height:22px;background:var(--orange);border-radius:20px;cursor:pointer;border:none;transition:background .3s}
.price-toggle-btn::after{content:'HT';position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.3s;font-size:.42rem;font-weight:800;display:flex;align-items:center;justify-content:center;color:var(--orange)}
.price-toggle-btn.ttc{background:var(--text)}.price-toggle-btn.ttc::after{left:21px;content:'TTC';color:var(--text)}
.price-val{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--text);line-height:1}
.price-sub{font-size:.7rem;font-weight:600;color:var(--muted);margin-top:.2rem}
.price-total{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:#000;margin-top:.4rem;padding-top:.5rem;border-top:1px solid #C5C5C5;line-height:1}
.price-total-label{font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:.15rem}
/* ══ Paliers de remise ══ */
.tier-section{padding:.6rem 0}
.tier-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:.45rem}
.tier-card{background:#fff;border:1.5px solid var(--dim);border-radius:10px;padding:.6rem .5rem .55rem;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.tier-card:hover{border-color:var(--orange);background:var(--cream)}
.tier-card.active{border-color:var(--orange);box-shadow:0 2px 12px rgba(181,98,42,.13);background:var(--orange-bg)}
.tier-card-label{font-size:.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem;white-space:nowrap}
.tier-card-price{font-size:1.05rem;font-weight:800;color:var(--text);line-height:1.2}
.tier-card-price small{font-size:.65rem;font-weight:600;color:var(--muted);display:block;margin-top:.15rem}
.tier-card-badge{display:inline-block;font-size:.75rem;font-weight:800;color:#2E7D32;margin-top:.2rem;letter-spacing:-.02em}
.tier-card.active .tier-card-badge{color:#fff;background:var(--orange);padding:.12rem .5rem;border-radius:5px;font-size:.65rem}
.tier-hint{font-size:.75rem;color:var(--text);font-weight:600;margin-top:.6rem;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.2rem;background:#fff;border:1.5px solid #C5C5C5;border-radius:9px;width:100%;box-sizing:border-box;text-align:center}
.tier-hint svg{flex-shrink:0}
@media(max-width:380px){.tier-cards{grid-template-columns:repeat(2,1fr)}}

.qty-section{padding:.6rem 0}.qty-top{display:flex;align-items:center;gap:1rem;margin-bottom:.4rem}
.qty-label{font-size:.72rem;font-weight:600;color:var(--text)}
.qty-wrap{display:flex;align-items:center;border:1.5px solid #C5C5C5;border-radius:8px;overflow:hidden}
.qty-btn{width:36px;height:36px;border:none;background:var(--input-bg);font-size:1rem;font-weight:700;color:var(--text);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.qty-btn:hover{background:var(--orange);color:#fff}
.qty-input{width:40px;height:36px;border:none;text-align:center;font-family:'Outfit',sans-serif;font-size:.8rem;font-weight:700;color:var(--text);background:#fff;outline:none}
.qty-breakdown{background:#F5F5F5;border:1px solid #C5C5C5;border-radius:7px;padding:.6rem 1rem;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:nowrap;gap:0}
.qty-stat{display:flex;flex-direction:column;align-items:center;gap:.05rem;flex:0 0 auto;padding:0 .35rem}
.qty-stat-val{font-size:.75rem;font-weight:700;color:var(--text);white-space:nowrap}.qty-stat-lbl{font-size:.55rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.textarea-wrap{position:relative}
.char-count{position:absolute;bottom:.45rem;right:.7rem;font-family:'Outfit',sans-serif;font-size:.55rem;font-weight:500;color:var(--dim);pointer-events:none}
.char-count.warn{color:var(--orange)}
.qty-note{font-size:.65rem;color:var(--muted);font-style:italic;margin-bottom:.35rem}
.qty-sep{width:1.5px;align-self:stretch;margin:.35rem 0;background:var(--text);opacity:.45;flex:0 0 1.5px}
.prod-docs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding-top:.3rem}
.prod-doc{display:inline-flex;align-items:center;gap:.3rem;padding:.45rem .6rem;border:1.5px solid var(--dim);border-radius:9px;font-size:.65rem;font-weight:700;color:var(--text);text-decoration:none;transition:all .2s;letter-spacing:.04em;text-transform:uppercase;justify-content:center}
.prod-doc:hover{border-color:var(--orange);color:var(--orange)}.prod-doc svg{width:12px;height:12px;flex-shrink:0}
.prod-doc-arrow{font-size:.5rem;color:var(--muted)}
.photo-disclaimer{display:flex;gap:.5rem;align-items:center;font-size:.65rem;color:var(--muted);line-height:1;font-weight:500;margin-top:.3rem;white-space:nowrap}
.photo-disclaimer svg{width:14px;height:14px;flex-shrink:0;color:var(--muted)}
.prod-catalogue{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;background:var(--orange-bg);border:1.5px solid var(--orange-rim);border-radius:9px;font-size:.65rem;font-weight:700;color:var(--orange);text-decoration:none;transition:all .2s;letter-spacing:.06em;text-transform:uppercase;margin-top:.3rem}
.prod-catalogue:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.prod-catalogue svg{width:14px;height:14px;flex-shrink:0}
.prod-catalogue span{font-size:.65rem}
.prod-back{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.65rem;font-weight:700;color:var(--text);text-decoration:none;transition:all .2s;margin-top:.4rem;padding:.55rem 1rem;border:1.5px solid var(--dim);border-radius:9px;letter-spacing:.04em;text-transform:uppercase}
.prod-back:hover{border-color:var(--orange);color:var(--orange)}
.prod-back svg{width:16px;height:16px;flex-shrink:0}
.prod-ctas{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}
.btn-cart{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;background:var(--orange);border:none;border-radius:9px;font-family:'Outfit',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;cursor:pointer;transition:all .22s;box-shadow:0 4px 20px rgba(181,98,42,.3);text-decoration:none}
.btn-cart:hover{background:#C8743A;transform:translateY(-2px);box-shadow:0 8px 28px rgba(181,98,42,.4)}
.btn-row{display:flex;gap:.5rem}
.btn-sec{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:.7rem .8rem .8rem;border:1.5px solid var(--dim);border-radius:9px;font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:#fff;cursor:pointer;transition:all .2s;text-decoration:none;text-align:center;line-height:1.4}
.btn-sec:hover{border-color:var(--orange);color:var(--orange)}
.btn-sec--cta{border-color:var(--orange) !important;color:var(--orange) !important}
.btn-sec--cta:hover{background:var(--orange) !important;color:#fff !important}
.btn-sec--cta svg{color:var(--orange)}
.btn-sec--cta:hover svg{color:#fff}.btn-sec svg{width:18px;height:18px;flex-shrink:0}
.decors-section,.others-section{background:#fff;border:1.5px solid #C5C5C5;border-radius:14px;padding:2rem;margin-top:1.5rem}
.decors-section{animation:fu .45s .1s ease both}.others-section{animation:fu .45s .2s ease both}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.04em;color:var(--text);margin-bottom:.3rem;margin-top:0}
.section-desc{font-size:.72rem;color:var(--muted);margin-bottom:1.2rem}
.decors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.decor-card{border:1.5px solid #C5C5C5;border-radius:10px;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--text);position:relative;overflow:hidden}
.decor-card:hover,.decor-card.active{border-color:var(--orange);box-shadow:0 4px 16px rgba(181,98,42,.12)}
.decor-card.active{border-width:2px}
.decor-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .3s ease}
.decor-card:hover .decor-img{transform:scale(1.05)}
.decor-info{padding:.6rem .8rem}.decor-ref{font-size:.7rem;font-weight:700;color:var(--text)}
.decor-name{font-size:.65rem;color:var(--muted);margin-top:.1rem}
.decor-meta{display:flex;gap:.5rem;margin-top:.3rem;font-size:.65rem;color:var(--muted)}
.others-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.other-card{position:relative;border-radius:10px;overflow:hidden;text-decoration:none;display:block;border:1.5px solid #C5C5C5;transition:all .2s}
.other-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.other-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.other-badge{position:absolute;top:.6rem;right:.6rem;width:32px;height:32px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:.85rem;color:#fff}
.other-info{padding:.6rem .8rem;background:#fff}.other-name{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.03em;color:var(--text)}
.other-specs{font-size:.65rem;color:var(--muted);margin-top:.15rem}
.side{display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:1rem}
.cta-devis{background:var(--text);border-radius:12px;border:2px solid var(--orange);padding:1.6rem;box-shadow:0 4px 20px rgba(0,0,0,.1)}
.cta-devis h4{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.04em;color:#fff;line-height:1;margin-bottom:.25rem}
.cta-devis p{font-size:.68rem;color:#fff;line-height:1.5;margin-bottom:.8rem}
.btn-o{display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.4rem;background:var(--orange);border:none;border-radius:9px;font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-decoration:none;transition:all .22s;box-shadow:0 4px 20px rgba(181,98,42,.3);width:100%}
.btn-o:hover{background:#C8743A;transform:translateY(-2px)}
.side-summary{background:#fff;border:1.5px solid #C5C5C5;border-radius:12px;padding:1.2rem}
.side-summary-title{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;letter-spacing:.04em;color:var(--text);margin-bottom:.6rem}
.side-sum-row{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid #C5C5C5;font-size:.68rem}
.side-sum-row:last-child{border-bottom:none}
.side-sum-row span:first-child{color:var(--muted)}.side-sum-row span:last-child{font-weight:600;color:#000}
@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ══ LIGHTBOX — identique page marque ══ */
.lb-overlay{display:none;position:fixed;inset:0;background:rgba(20,26,30,.92);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.lb-overlay.open{display:flex}
.lb-box{position:relative;max-width:900px;width:90vw;display:flex;flex-direction:column}
.lb-close{position:absolute;top:-44px;right:0;background:none;border:none;color:rgba(255,255,255,.7);font-size:1.4rem;cursor:pointer;transition:color .2s;line-height:1;z-index:10}
.lb-close:hover{color:#fff}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;width:48px;height:48px;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;z-index:2}
.lb-arrow:hover{background:var(--orange);border-color:var(--orange)}
.lb-prev{left:-64px}.lb-next{right:-64px}
.lb-img-wrap{width:100%;border-radius:12px 12px 0 0;background:#fff;position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;padding:1rem}
.lb-img-wrap img{max-width:100%;max-height:55vh;min-height:200px;object-fit:contain;display:block;cursor:zoom-in;transition:transform .2s ease}
.lb-img-wrap img:hover{transform:scale(1.02)}
.lb-zoom-icon{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%) scale(.7);width:52px;height:52px;background:rgba(61,74,82,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .25s ease;pointer-events:none;cursor:zoom-in;z-index:5}
.lb-zoom-icon svg{width:22px;height:22px;opacity:.6;transition:opacity .25s ease}
.lb-img-wrap:hover .lb-zoom-icon{transform:translate(-50%,-50%) scale(1);background:rgba(61,74,82,.7)}
.lb-img-wrap:hover .lb-zoom-icon svg{opacity:1}
.lb-zoom-hint{position:absolute;bottom:8px;right:12px;font-family:'Outfit',sans-serif;font-size:.55rem;font-weight:600;color:var(--muted);opacity:0;transition:opacity .2s;pointer-events:none}
.lb-img-wrap:hover .lb-zoom-hint{opacity:1}
.lb-fullscreen{display:none;position:fixed;inset:0;background:rgba(10,14,18,.95);z-index:2000;align-items:center;justify-content:center;cursor:zoom-out}
.lb-fullscreen.open{display:flex}
.lb-fullscreen img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:8px}
.lb-tabs{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.7rem 1.2rem;background:#fff;border-bottom:1.5px solid #C8C0B8;border-radius:12px 12px 0 0;flex-wrap:wrap}
.lb-tab{padding:.4rem .9rem;font-family:'Outfit',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text);background:#fff;border:1.5px solid #C8C0B8;border-radius:8px;cursor:pointer;transition:all .2s;white-space:nowrap}
.lb-tab:hover{border-color:var(--orange);color:var(--orange)}
.lb-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}
.lb-overlay-info{position:absolute;bottom:0;left:0;right:0;background:#fff;padding:1.2rem 1.8rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;border-radius:0 0 12px 12px}
.lb-info-top{display:flex;align-items:center;justify-content:center;width:100%;position:relative}
.lb-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.04em;color:var(--text)}
.lb-counter{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.06em;color:var(--muted);position:absolute;right:0}
.lb-info-mid{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.04em;color:var(--text);text-align:center;line-height:2}
.lb-info-mid:empty{display:none}
.lb-ac-badge{display:inline-block;padding:.2rem .6rem;background:var(--orange);color:#fff;font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.04em;border-radius:5px}
.lb-info-bottom{display:grid;grid-template-columns:repeat(3,1fr);padding-top:.5rem;margin-top:.3rem;border-top:1.5px solid #C8C0B8;font-family:'Outfit',sans-serif}
.lb-cond-cell{text-align:center;padding:.6rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;border-right:1px solid transparent;border-image:linear-gradient(to bottom,transparent 15%,#C8C0B8 15%,#C8C0B8 85%,transparent 85%) 1}
.lb-cond-cell:last-child{border-right:none;border-image:none}
.lb-cond-label{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.lb-cond-val{font-size:.95rem;font-weight:600;color:var(--text)}
.lb-cta-collection{display:inline-flex;align-items:center;gap:.5rem;font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--orange);border:none;border-radius:9px;padding:.7rem 1.4rem;text-decoration:none;transition:all .22s;box-shadow:0 4px 20px rgba(181,98,42,.3)}
.lb-cta-collection:hover{background:#C8743A;transform:translateY(-2px);box-shadow:0 8px 28px rgba(181,98,42,.4)}
.lb-cta-collection span:last-child{font-size:.6rem;transition:transform .15s}
.lb-cta-collection:hover span:last-child{transform:translateX(3px)}
@media(max-width:700px){.lb-prev{left:.5rem}.lb-next{right:.5rem}.lb-arrow{width:36px;height:36px;font-size:1.2rem}}
.decor-card img,.other-card img{cursor:zoom-in}
.decor-img-wrap{position:relative;overflow:hidden;cursor:zoom-in;border-radius:10px 10px 0 0}
.decor-ep{position:absolute;top:-.6rem;right:-.1rem;width:44px;height:44px;background:rgba(190,195,200,.8);backdrop-filter:blur(4px);color:var(--text);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.15rem;line-height:1;z-index:4}
.decor-ep small{font-family:'Outfit',sans-serif;font-size:.4rem;font-weight:600;letter-spacing:.06em;text-transform:lowercase;color:var(--text);margin-top:-.02rem;display:block}
.decor-counter{font-family:'Bebas Neue',sans-serif;font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-align:right;padding:.15rem .3rem 0 0}
.decor-zoom-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:40px;height:40px;background:rgba(0,0,0,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;pointer-events:none;cursor:zoom-in}
.decor-zoom-icon svg{width:18px;height:18px;opacity:.6;transition:opacity .2s ease}
.decor-img-wrap:hover .decor-zoom-icon{transform:translate(-50%,-50%) scale(1);pointer-events:auto;background:rgba(0,0,0,.5)}
.decor-img-wrap:hover .decor-zoom-icon svg{opacity:1}
.decor-img-wrap:hover .decor-img{opacity:.85;transition:opacity .2s}
.other-card{position:relative}
.other-card::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background .2s;pointer-events:none;border-radius:10px}
.other-card:hover::after{background:rgba(0,0,0,.08)}

/* ══ SIDEBAR ACCORDÉON — Résumé produit ══ */
.side-acc{background:#fff;border:1.5px solid #C5C5C5;border-radius:12px;overflow:hidden}
.side-acc-main-header{padding:.9rem 1.2rem;border-bottom:1.5px solid #C5C5C5;background:#F5F5F5}
.side-acc-title{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;letter-spacing:.05em;color:var(--text)}
.sum-acc{border-bottom:1px solid #C5C5C5;cursor:pointer}
.sum-acc:last-child{border-bottom:none}
.sum-acc-header{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1.2rem;user-select:none;transition:background .15s}
.sum-acc-header:hover{background:var(--input-bg)}
.sum-acc-header span{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}
.sum-acc-chev{width:14px;height:14px;color:var(--muted);transition:transform .25s,color .15s;flex-shrink:0}
.sum-acc.open .sum-acc-chev{transform:rotate(180deg);color:var(--text)}
.sum-acc.open .sum-acc-header span{color:var(--text)}
.sum-acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 1.2rem}
.sum-acc.open .sum-acc-body{padding:0 1.2rem .5rem}

/* ══ GRILLE TARIFAIRE SIDEBAR ══ */
.side-tarif{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.2rem;background:#fff;border:1.5px solid #C5C5C5;border-radius:12px;text-decoration:none;transition:all .2s}
.side-tarif:hover{border-color:var(--orange);box-shadow:0 4px 16px rgba(181,98,42,.1)}
.side-tarif-icon{width:38px;height:38px;background:#F5F5F5;border:1px solid #C5C5C5;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.side-tarif-icon svg{width:20px;height:20px;color:var(--text)}
.side-tarif-txt{flex:1;min-width:0}
.side-tarif-txt strong{font-size:.7rem;font-weight:700;color:var(--text);display:block;line-height:1.3}
.side-tarif-txt span{font-size:.65rem;font-weight:500;color:var(--muted)}
.side-tarif-arrow{width:16px;height:16px;color:var(--dim);flex-shrink:0;transition:color .15s}
.side-tarif:hover .side-tarif-arrow{color:var(--orange)}

/* ══ SERVICES PRO ══ */
.side-services{background:#fff;border:1.5px solid #C5C5C5;border-radius:12px;padding:1rem 1.2rem}
.side-services-title{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.05em;color:var(--text);margin-bottom:.6rem}
.side-serv-item{display:flex;align-items:flex-start;gap:.7rem;padding:.65rem 0;border-bottom:1px solid #C5C5C5}
.side-serv-item:last-child{border-bottom:none}
.side-serv-item a{display:flex;align-items:flex-start;gap:.7rem;text-decoration:none;color:inherit;width:100%}
.side-serv-item:hover{background:var(--orange-bg);margin:0 -.8rem;padding-left:.8rem;padding-right:.8rem;border-radius:7px;cursor:pointer}
.side-serv-item:hover strong{color:var(--orange)}
.side-serv-item .serv-arrow{margin-left:auto;align-self:center;flex-shrink:0;transition:transform .2s}
.side-serv-item .serv-arrow svg{width:12px;height:12px;color:var(--muted);transition:color .2s}
.side-serv-item:hover .serv-arrow svg{color:var(--orange)}
.side-serv-item:hover .serv-arrow{transform:translateX(2px)}
.side-serv-icon{width:38px;height:38px;min-width:38px;background:#F5F5F5;border:1px solid #C5C5C5;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.side-serv-icon svg{width:18px;height:18px;color:var(--text)}
.side-serv-item strong{font-size:.78rem;font-weight:700;color:var(--text);display:block}
.side-serv-item span{font-size:.68rem;color:var(--muted)}

/* ══ ONEY SIDEBAR ══ */
.side-oney{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;background:#f0f8eb;border:2px solid #5FA535;border-radius:12px;text-decoration:none;color:inherit;cursor:pointer;transition:all .2s}
.side-oney:hover{background:#e6f3de;box-shadow:0 2px 8px rgba(95,165,53,.2)}
.side-oney-icon{width:44px;height:44px;background:#5FA535;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.side-oney-icon span{font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:800;color:#fff}
.side-oney-txt strong{font-size:.72rem;font-weight:700;color:var(--text);display:block;line-height:1.3}
.side-oney-txt span{font-size:.6rem;font-weight:600;color:#5FA535}

/* ══ CALCULATEUR SURFACE ══ */
.calc-surface{background:#fff;border:2px solid #C5C5C5;border-radius:14px;padding:1.2rem;margin-bottom:1rem}
.calc-title{font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:.04em;color:var(--text);margin-bottom:.7rem;display:flex;align-items:center}
.calc-label{font-family:'Outfit',sans-serif;font-size:.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:.35rem}
.calc-input-row{display:flex;align-items:center;gap:0;margin-bottom:.5rem}
.calc-input{flex:1;height:42px;border:1.5px solid var(--dim);border-right:none;border-radius:8px 0 0 8px;padding:0 .8rem;font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:700;color:var(--text);outline:none;background:#fff;transition:border-color .2s}
.calc-input:focus{border-color:var(--orange)}
.calc-input::placeholder{color:var(--dim);font-weight:400}
.calc-unit{height:42px;padding:0 .8rem;background:#F5F5F5;border:1.5px solid var(--dim);border-left:none;border-radius:0 8px 8px 0;display:flex;align-items:center;font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:700;color:var(--text)}
.calc-result{background:#F5F5F5;border:1px solid #C5C5C5;border-radius:8px;padding:.7rem .9rem;margin-bottom:.5rem}
.calc-result-row{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0}
.calc-result-label{font-size:.68rem;color:var(--muted)}
.calc-result-val{font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:700;color:var(--text)}
.calc-result-main{font-size:.85rem;color:#000;font-weight:800}
.calc-result-btn{display:block;width:100%;margin-top:.5rem;padding:.55rem;background:var(--orange);color:#fff;border:none;border-radius:8px;font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.calc-result-btn:hover{background:#C8743A;transform:translateY(-1px)}
.calc-note{font-size:.65rem;color:var(--muted);font-style:italic;margin:0;line-height:1.5}
.calc-inline{padding:.5rem 0}
.calc-sep{height:1px;background:var(--border);margin:.6rem 0}
/* ══ TRUSTED SHOPS FLOAT ══ */
.ts-float{position:fixed;right:2rem;top:50%;transform:translateY(-50%);z-index:997;background:#fff;border:2px solid #F0B323;border-radius:14px;padding:.8rem .7rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;box-shadow:0 4px 20px rgba(0,0,0,.1);opacity:0;pointer-events:none;transition:all .3s ease;text-decoration:none;width:80px}
.ts-float.visible{opacity:1;pointer-events:auto}
.ts-float:hover{box-shadow:0 8px 30px rgba(240,179,35,.25);transform:translateY(-50%) translateY(-2px)}
.ts-float-shield{width:36px;height:36px;background:#F0B323;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ts-float-shield svg{color:#fff;width:20px;height:20px}
.ts-float-label{font-family:'Outfit',sans-serif;font-size:.48rem;font-weight:600;color:var(--text);text-align:center;line-height:1.3;text-transform:uppercase;letter-spacing:.04em}
.ts-float-stars{font-size:.65rem;color:#F0B323;letter-spacing:.05em}
.ts-float-note{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--text);line-height:1}
.ts-float-sub{font-family:'Outfit',sans-serif;font-size:.48rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ══ BACK TO TOP ══ */
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:48px;height:48px;background:#fff;border:1.5px solid var(--dim);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:50;opacity:0;pointer-events:none;transition:all .3s;box-shadow:0 4px 16px rgba(0,0,0,.08);text-decoration:none}
.back-to-top.visible{opacity:1;pointer-events:auto}
.back-to-top:hover{border-color:var(--orange);box-shadow:0 6px 20px rgba(181,98,42,.15)}

/* ══ WHATSAPP FLOAT ══ */
.wa-float{position:fixed;bottom:2rem;left:2rem;z-index:999;display:flex;align-items:center;gap:.5rem;background:#fff;border:2px solid #25D366;border-radius:50px;padding:.5rem 1.2rem .5rem .5rem;text-decoration:none;box-shadow:0 4px 20px rgba(37,211,102,.15);opacity:0;transform:translateY(20px);transition:all .3s ease;pointer-events:none}
.wa-float.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.wa-float:hover{box-shadow:0 8px 30px rgba(37,211,102,.2);transform:translateY(-2px)}
.wa-float-icon{width:42px;height:42px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-float-text{display:flex;flex-direction:column;gap:.1rem}
.wa-float-label{font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:700;color:#3D4A52;white-space:nowrap}
.wa-float-sub{font-family:'Outfit',sans-serif;font-size:.68rem;font-weight:600;color:#25D366;white-space:nowrap}

@media(max-width:960px){.page{grid-template-columns:1fr}.side{position:static;flex-direction:row;flex-wrap:wrap}.prod-hero{grid-template-columns:1fr}.prod-gallery{position:static}.decors-grid,.others-grid{grid-template-columns:repeat(2,1fr)}.ts-float{display:none}.wa-float-text{display:none}.wa-float{padding:.5rem}}
@media(max-width:600px){.page{padding:.5rem 1rem 2rem}.prod-hero{padding:1.2rem}.decors-grid,.others-grid{grid-template-columns:1fr 1fr;gap:.6rem}.btn-row{flex-direction:column}}





/* ══ Le menu « Accessoires » ══
   Les lignes sont celles de « Nos revetements » (.mega-coll) : meme photo,
   meme rythme, meme allure — c'est la presentation que Sam a validee.
   Les quatre etapes se rangent en DEUX colonnes larges : une etape de 1 produit
   et une de 8 ne peuvent pas occuper deux colonnes de meme largeur sans laisser
   un trou blanc (Sam 13/09). */
.nav-drop-wrap[data-mega="accessoires"] .mega-col--pose {
  min-width: 320px;
  padding: 0 2rem;
}
.mega-etape + .mega-etape { margin-top: 1.7rem; }
/* ⛔ Le contenu debordait de la colonne : le bouton « Voir tous les produits
   de pose » tombait HORS du panneau, donc invisible. Les colonnes prennent la
   hauteur qu'il leur faut. */
.nav-drop-wrap[data-mega="accessoires"] .mega-col--pose {
  max-height: none;
  overflow: visible;
}
.mega-etape-titre {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.02rem;
  letter-spacing: .04em;
  color: var(--text);
  padding-bottom: .4rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--dim);
}
/* Le logo de la marque, une fois par etape, au bout de son titre. */
.mega-etape-logo {
  margin-left: auto;
  max-height: 18px;
  max-width: 84px;
  width: auto;
  object-fit: contain;
  opacity: .9;
}

/* Plus rien ne defile dans ce panneau : les dix-sept produits tiennent. */
.nav-drop-wrap[data-mega="accessoires"] .mega-etape-corps {
  overflow: visible;
  max-height: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   LA BANDE DES TABLETTES — de 769 a 1100 px.

   (!) L'en-tete n'etait traite qu'en dessous de 768 px : hamburger, barre
   utilitaire masquee, boutons en icone seule. Au-dessus, rien. Entre les
   deux, une tablette de 834 px recevait donc la mise en page d'un grand
   ecran : la barre du haut demandait 933 px pour 834 disponibles, et la
   rangee des boutons se terminait a 1151 px. La page debordait de 317 px
   (Sam 15/09).

   On ne refait pas l'en-tete : on lui donne seulement de quoi tenir dans
   cette largeur — le texte des boutons s'efface comme il le fait deja sur
   telephone, et la barre du haut passe a la ligne au lieu de sortir.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1100px) {
  .hd-utility-left {
    flex-wrap: wrap;
    row-gap: 0.15rem;
    justify-content: center;
  }
  .hd-utility-inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.15rem;
  }
  .hd-act-text {
    display: none;
  }
  .hd-act {
    padding: 0.3rem;
  }
  .header-inner {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .hd-search {
    order: 10;
    flex-basis: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .main-nav {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
  /* Le bouton « Devenir partenaire revendeur » terminait la rangee a 901 px
     pour 834 disponibles. Le borner ne suffisait pas : son contenu debordait
     alors du bouton lui-meme. C'est la RANGEE qui doit pouvoir passer a la
     ligne — le bouton prend alors la sienne, entier et lisible. */
  .main-nav-inner {
    flex-wrap: wrap;
    row-gap: 0.45rem;
  }
  /* La fleche « voir toutes les marques » terminait la rangee a 882 px pour
     834 disponibles. Elle passe sous les cartes, comme elle le fait deja en
     dessous de 768 px. */
  .brands-row {
    flex-direction: column;
  }
  .brands-more {
    width: 100%;
    height: 42px;
    border-radius: 9px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LE BANDEAU COOKIES SUR TELEPHONE.

   (!) Il n'avait AUCUNE regle responsive. `.cookie-inner` posait le texte et
   les trois boutons sur UNE ligne, sans passage a la ligne possible, avec
   2 rem d'ecart et 2 rem de marge de chaque cote. Sur 390 px il restait
   326 px pour des boutons qui en reclamaient 430 : « TOUT ACCEPTER », le
   dernier, sortait de l'ecran. Un visiteur sur telephone ne pouvait donc PAS
   accepter les cookies ni fermer le bandeau (Sam 15/09).

   Sur telephone : le texte au-dessus, les boutons en dessous. « TOUT
   ACCEPTER » prend toute la largeur en premier — c'est l'action principale et
   celle qu'on cherche ; les deux autres se partagent la ligne suivante.
   Au-dessus de 640 px, rien ne change.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cookie-banner {
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
    max-height: 70vh;
    overflow-y: auto;
  }
  .cookie-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }
  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    flex-shrink: 1;
    min-width: 0;
  }
  /* L'action principale, en entier, sur sa propre ligne. */
  .cookie-btn-accept {
    grid-column: 1 / -1;
    order: -1;
  }
  .cookie-btn {
    width: 100%;
    /* `white-space: nowrap` coupait les libelles longs ; ils peuvent aller a
       la ligne, et la hauteur de frappe reste confortable. */
    white-space: normal;
    padding: 0.7rem 0.6rem;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITE — ce qui doit passer APRES globals.css.

   (!) `common.css` est charge APRES `globals.css` : a specificite egale,
   c'est lui qui gagne. Deux corrections de contraste ecrites dans globals.css
   n'avaient donc aucun effet. Elles sont ici, au dernier mot.
   ═══════════════════════════════════════════════════════════════════════ */

/* LE FOCUS CLAVIER. Il etait invisible sur TOUTE la page, en-tete compris :
   `outline: none` un peu partout. `:focus-visible` ne se declenche qu'au
   CLAVIER — un clic a la souris ne dessine rien, et l'apparence au repos ne
   bouge pas d'un pixel. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid #94501F;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sur les fonds fonces — la barre du haut, le pied de page — le contour foncé
   ne se verrait pas. */
.hd-utility a:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.cookie-banner button:focus-visible {
  outline-color: #F0C9A8;
}

/* CONTRASTES : deux textes restaient sous le seuil. On ne touche pas a
   l'orange de la charte, seulement a ces deux usages en petits caracteres. */
.char-count {
  color: #7A7168;
}
.ct-form-consent-link {
  color: #94501F;
}

/* (!) LE LIBELLE DU BOUTON PRINCIPAL ETAIT A 4,43 POUR 4,5 REQUIS.
   « Il manque peu » n'est pas un critere : soit la combinaison atteint le
   seuil, soit elle ne l'atteint pas (Sam 15/09).

   On ne repeint pas le bouton : on cherche la variation MINIMALE de l'orange
   de la charte qui fait passer le texte blanc au-dessus du seuil, teinte et
   saturation inchangees.

      #B5622A   contraste 4,43   echec
      #B36129   contraste 4,53   atteint      <- retenu
      #94501F   contraste 6,13   (l'orange fonce, ecarte : trop different)

   L'ecart percu entre #B5622A et #B36129 vaut ΔE = 0,90. En dessous de 1,
   l'oeil ne distingue pas les deux couleurs, meme cote a cote. La charte n'est
   donc pas modifiee : `--orange` reste #B5622A partout ailleurs. */
.hero-cta-primary {
  background: #B36129;
}
.hero-cta-primary:hover {
  background: #C8743A;
}

/* (!) « Devenir Partenaire Revendeur » avait exactement le meme defaut que le
   bouton principal : blanc sur #B5622A, contraste 4,43 pour 4,5 requis — et
   son texte fait 10 px, donc il etait encore moins lisible.
   Meme correction, meme couleur : #B36129, contraste 4,53, ecart percu
   ΔE = 0,90 (imperceptible). SEULE la couleur de fond change : ni la taille,
   ni la graisse, ni l'emplacement, ni le reste de l'en-tete (Sam 15/09). */
.nav-cta-partner {
  background: #B36129;
}

/* ===== LE SEUIL DU MENU : 1024 px ===========================================
   ⛔ DEFAUT CORRIGE ICI. Le bouton « Menu » ne s'affichait que sous 768 px,
   alors que le nouveau tiroir prend le relais sous 1025 px. Entre les deux, la
   bande 769–1024 px se retrouvait SANS AUCUN MENU : le menu deroulant etait
   masque et le bouton n'apparaissait pas encore.

   Pourquoi 1024 et non 768 : mesure faite sur le menu deroulant a 834 px, il
   atteignait 1 079 px de haut, soit la quasi-totalite d'un ecran de tablette en
   portrait. Ce n'est plus un menu deroulant confortable (Sam 16/09).

   Consequence assumee : entre 769 et 1024 px, la barre de navigation laisse la
   place au tiroir. Ses quatre entrees — revetements, accessoires, marques,
   partenaire revendeur — y sont toutes reprises.
   ⛔ Ce bloc est dans common.css et non dans globals.css : common.css est
   charge APRES, il gagne a specificite egale. */
@media (max-width: 1024px) {
  .hd-hamburger { display: flex; }
  .pd-nav-collante { display: none; }
}

/* ===== LE HEADER ENTRE 769 ET 1024 px ======================================
   ⛔ PLAGE STRICTE. Sous 769 px l'en-tête mobile ne bouge pas ; à partir de
   1025 px l'en-tête d'ordinateur ne bouge pas. Cette adaptation ne concerne
   que la bande où le tiroir a remplacé la barre de navigation.

   CE QU'ELLE CORRIGE, MESURÉ. Sur cette bande, le logo (301 px), le bouton
   Menu (35 px) et les cinq actions (205 px) restaient collés à gauche : 541 px
   occupés, et 177 px de vide à 769, 242 à 834, 432 à 1024. L'en-tête
   ressemblait à une version téléphone agrandie.
   ⛔ Rien n'est étiré, agrandi ni centré pour combler ce vide : le logo garde
   sa place, les actions rejoignent le bord droit, et le vide devient la
   respiration entre deux groupes (Sam 17/09). */
@media (min-width: 769px) and (max-width: 1024px) {
  .header-inner { justify-content: space-between; }
  .hd-hamburger { order: 8; margin-left: auto; }
  .hd-actions { order: 9; }
  /* La recherche garde sa ligne pleine largeur : sa largeur lui sert. */
  .hd-search { order: 10; flex-basis: 100%; }

  /* LA BARRE SOMBRE TIENT SUR UNE LIGNE.
     Ses trois blocs demandent 874 px de texte : sous ~960 px, « Chat WhatsApp »
     passait seul sur une deuxième rangée, et la barre montait à 115 px.
     ⛔ AUCUNE information supprimée : horaires, téléphone et WhatsApp restent.
     Seuls s'effacent les trois MOTS que l'icône dit déjà. Et la typographie ne
     rétrécit pas : c'est ce qui était interdit. */
  .hd-utility-mot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hd-utility-inner { gap: 1.6rem; }
}
/* ⛔ `clip-path` et NON `display: none` : `display: none` retire aussi le mot
   de l'arbre d'accessibilité. Le lien resterait annoncé « +33 3 74 67 02 00 »
   sans dire de quoi il s'agit. Ici le nom accessible reste entier —
   « Téléphone : +33 3 74 67 02 00 » — alors que l'œil ne voit que l'icône et le
   numéro (Sam 17/09). */

/* ===== LE MENU PASSE DE TROIS COLONNES A QUATRE =============================
   ⛔ RIEN N'EST REDESSINE. Les photos, les onglets de pose, les logos et la
   carte professionnelle restent exactement ce qu'ils etaient : c'est la
   presentation que Sam a validee.

   Seule la PLACE change. Le menu comptait trois colonnes de sols ; il en compte
   quatre depuis que « Sol vinyle tisse » est sorti de la colonne des vinyles.
   Mesure : les colonnes passent de 246 a 234 px, et comme chacune porte
   2,6 rem de marge de chaque cote, il ne restait que 151 px de contenu contre
   163 avant. Resultat : « Plombant » coupe, « 19 collections » coupe, et les
   noms de collection sur trois lignes.

   On rend cette place en resserrant la gouttiere et les marges internes, sans
   toucher aux tailles de texte ni aux photos (Sam 17/09). */
/* (!) Mesures relevees sur l'ancien menu a trois colonnes : colonne 246 px,
   marge 17,6 px, bloc d'information 118 px. C'est cette valeur de 118 px qu'il
   faut retrouver, sinon « 13 decors » se coupe et les noms passent sur trois
   lignes. Ma premiere tentative mettait 24 px de marge : elle AGGRAVAIT le
   probleme (79 px d'information au lieu de 118). */
.nav-drop-wrap[data-mega="revetements"] .mega-inner {
  gap: 0.75rem;
  padding: 2.6rem 1.5rem 2.8rem;
}
.nav-drop-wrap[data-mega="revetements"] .mega-col { padding: 0 1.1rem; }
/* La carte professionnelle rend 70 px : c'est la seule reserve disponible pour
   que les QUATRE colonnes gardent la lisibilite des trois d'avant. Son contenu
   ne change pas. ⛔ `min-width` doit etre remis a zero, sinon la carte refuse
   de retrecir et le calcul ne sert a rien. */
.nav-drop-wrap[data-mega="revetements"] .mega-visual {
  flex: 0 0 180px;
  width: 180px;
  min-width: 0;
}
/* Un titre de colonne se met sur deux lignes plutot que de se couper. */
.nav-drop-wrap[data-mega="revetements"] .mega-col-title {
  white-space: normal;
  text-wrap: balance;
}
/* Trois onglets de pose dans une colonne etroite : ils passent a la ligne au
   lieu de rogner « Plombant ». */
.nav-drop-wrap[data-mega="revetements"] .mega-poses { flex-wrap: wrap; }
.nav-drop-wrap[data-mega="revetements"] .mega-pose { flex: 1 1 auto; }

/* LE TITRE D'UNE FAMILLE DANS LE MENU — plus visible (Sam 18/09, point 4).
   ⛔ Il etait LE TEXTE LE PLUS LEGER de sa colonne : 17,9 px en graisse 400,
   quand les noms de collections sont en 600 et les onglets de pose en 700.
   Plus gros mais plus leger, donc l'oeil voyait le gras d'abord.
   ⛔ L'epaissir est IMPOSSIBLE : la police est Bebas Neue, qui n'a qu'une
   graisse. On agit donc sur la taille, le contraste et le filet. */
.nav-drop-wrap[data-mega="revetements"] .mega-col-title {
  /* ⛔ L'AGRANDIR NE SUFFISAIT PAS (Sam 18/09) : « ils sont juste plus grands ».
     Le titre flottait au-dessus d'une liste ; il se lit maintenant comme
     l'EN-TETE d'un bloc — un bandeau beige pleine largeur, ferme par le filet
     orange. Les quatre colonnes deviennent quatre blocs au lieu d'un mur de
     texte.
     (!) Le beige est celui des etiquettes du site (#F6F2EC), pas une teinte
     nouvelle. (!) Le fond doit rester OPAQUE : ce titre est `sticky`, la liste
     defile dessous. */
  /* ⛔ 1,4 rem faisait passer « PARQUETS CONTRECOLLES · 30 DECORS » sur DEUX
     lignes : il lui fallait 261 px pour 251 disponibles. Son bandeau devenait
     plus haut que les trois autres. 1,3 rem lui rend les 10 px manquants, et
     reste bien au-dessus des 17,9 px d'origine.
     ⛔ Avant de regrossir ce titre, MESURER le plus long : « Parquets
     contrecolles » decide pour les quatre. */
  font-size: 1.3rem;
  color: #18232E;
  background: #F6F2EC;
  border-bottom: 2px solid #b5622a;
  border-radius: 7px 7px 0 0;
  padding: 0.5rem 0.6rem 0.42rem;
  margin-bottom: 0.9rem;
}
/* Le compte passe au second plan : c'est le NOM de la famille qu'on cherche.
   (!) `margin-left` en plus de l'espace du texte : colle au nom, il se lisait
   comme la fin du titre (Sam 18/09). */
.mega-col-title__nb {
  margin-left: 0.5em;
  font-size: 0.62em;
  color: #5F6E78;
  letter-spacing: 0.02em;
}

/* LES COLLECTIONS D'UNE MARQUE, FERMEES AU DEPART (Sam 18/09, point 2).
   ⛔ Les onglets de pose ne sont PAS dans ce repli : ils restent visibles
   avant l'ouverture, c'etait sa condition expresse. */
.mega-listes--ferme {
  display: none;
}
/* La marque etait un lien, c'est maintenant un bouton : on lui rend l'aspect
   qu'elle avait, sinon le navigateur la dessine en bouton gris. */
.nav-drop-wrap[data-mega="revetements"] button.mega-marque {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Le chevron se retourne quand les collections sont ouvertes : il dit dans
   quel sens le clic agit. */
/* ⛔ 180deg ETAIT FAUX : ce chevron est dessine avec DEUX BORDURES et deja
   tourne de 45deg. Lui imposer 180deg le mettait de travers au lieu de le
   retourner. Il faut 45 + 180 = 225deg.
   (!) L'animation qui l'invite a ouvrir s'arrete une fois ouvert. */
.mega-marque[aria-expanded="true"] + .mega-invite span {
  transform: rotate(225deg);
  animation: none;
}

/* Le chevron orange OUVRE les collections, comme la marque au-dessus de lui.
   ⛔ Il n'etait que decoratif : le client ne savait pas ou cliquer (Sam 18/09).
   Il doit donc AVOIR L'AIR cliquable — « cliquable = bouton visible ». */
.nav-drop-wrap[data-mega="revetements"] .mega-invite {
  /* ⛔ IL PORTAIT `pointer-events: none` : le clic le TRAVERSAIT et atteignait
     la colonne derriere. Il etait decoratif par construction, alors qu'il
     INVITE a ouvrir (Sam 18/09). */
  pointer-events: auto;
  cursor: pointer;
  padding: 0.25rem 0;
  border-radius: 6px;
  transition: background 0.15s;
}
.nav-drop-wrap[data-mega="revetements"] .mega-invite:hover {
  background: rgba(181, 98, 42, 0.08);
}
/* Le meme survol sur la marque : les deux commandes se repondent. */
.nav-drop-wrap[data-mega="revetements"] button.mega-marque:hover {
  background: rgba(181, 98, 42, 0.06);
  border-radius: 6px;
}

/* LA COLONNE PRO SORT DU MENU « NOS REVETEMENTS » (Sam 18/09).
   ⛔ Elle redisait ce que l'ecran affiche DEJA en permanence :
     · « Devenir partenaire revendeur » = le bouton orange de la barre de nav ;
     · les deux numeros = le bandeau sombre du haut ;
     · « Nous contacter » = le « Contact » de l'en-tete.
   ⛔ Et « Nos prix pro » n'est pas perdu : il reste atteignable par le bouton
   de l'en-tete (#grilleToggle), par « Tarifs & conditions » au pied de page,
   et par les DEUX autres menus, qui gardent cette colonne.
   (!) Limite a ce panneau : « Accessoires » et « Marques » ne bougent pas. */
.nav-drop-wrap[data-mega="revetements"] .mega-visual {
  display: none;
}

/* LES 4 CARTES DE FAMILLE DANS LE MENU (Sam 18/09).
   (!) Elles reprennent `pd-famcard` de l'accueil SANS LE REDEFINIR : seul le
   cadre change ici — la grille occupe toute la largeur du panneau, et la photo
   est un <img> et non le composant Next, donc on la recadre a la main. */
.nav-drop-wrap[data-mega="revetements"] .pd-famgrid--menu {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-drop-wrap[data-mega="revetements"] .pd-famcard__photo {
  /* ⛔ LA PHOTO FAISAIT 500 px DE HAUT DANS LE MENU. Sur l'accueil elle est
     reglee par un RAPPORT (16/9), qui se calcule sur la largeur : en pleine
     page la carte est etroite, dans le menu elle fait 350 px — la photo
     grandissait d'autant et remplissait l'ecran. On lui donne ici une hauteur
     FIXE, pour que le panneau tienne sur un ecran d'ordinateur portable. */
  aspect-ratio: auto;
  height: 150px;
}
.nav-drop-wrap[data-mega="revetements"] .pd-famcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* LE MENU N'EST PAS L'ACCUEIL (Sam 18/09).
   Meme carte, meme source, mais deux usages : sur l'accueil on DECOUVRE, dans
   le menu on NAVIGUE. Le menu pousse donc a partir — l'appel a l'action y
   devient un vrai bouton, et la carte entiere reagit au survol.
   ⛔ AUCUNE information n'est ajoutee ni retiree ici : les deux cartes disent
   exactement la meme chose, seule la MAIN change. */
.nav-drop-wrap[data-mega="revetements"] .pd-famcard__cta {
  display: block;
  /* ⛔ J'AVAIS MIS UNE MARGE FIXE ICI, et elle ECRASAIT le `margin-top: auto`
     qui cale le bouton en bas : le bouton des stratifies remontait de 18 px
     (Sam 18/09). Une regle plus precise gagne, meme si l'autre est plus juste. */
  margin-top: auto;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid #b5622a;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.nav-drop-wrap[data-mega="revetements"] .pd-famcard {
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
/* ⛔ LE SURVOL DE CETTE CARTE N'EST PLUS DEFINI ICI : il l'etait deux fois,
   avec deux ombres differentes. Le geste est commun a toutes les cartes du
   site, dans globals.css (Sam 18/09). Seul le BOUTON reagit en plus, parce
   que le menu sert a partir. */
.nav-drop-wrap[data-mega="revetements"] .pd-famcard:hover .pd-famcard__cta {
  background: #b5622a;
  color: #fff;
}

/* ⚠️ ESSAI 1 — les collections sous la carte de famille, dans le menu.
   Elles rendent au client l'endroit ou il choisissait sa collection avant que
   les cartes remplacent les colonnes (Sam 18/09). */
.nav-drop-wrap[data-mega="revetements"] .pd-famcolls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  max-height: 132px;
  overflow-y: auto;
}
.nav-drop-wrap[data-mega="revetements"] .pd-famcoll {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--pd-filet, #8f8474);
  border-radius: 999px;
  background: #fff;
  color: #18232E;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.nav-drop-wrap[data-mega="revetements"] .pd-famcoll:hover {
  background: #b5622a;
  border-color: #b5622a;
  color: #fff;
}
.nav-drop-wrap[data-mega="revetements"] .pd-famcoll__nb {
  opacity: 0.6;
  font-weight: 400;
}