/*
     * CLIENTE: Epicopi
     * Sector (← <services>): imprimerie / reprographie technique
     * Registro emocional: PRÉCISION TECHNIQUE + CONFIANCE + EFFICACITÉ
     * → RE-SKIN (actualización 15) — cambio de sistema visual, cero cambios de contenido:
     *   paleta azul pizarra/neutra-fría → paleta cálida crema/terracota/salvia, refuerza
     *   el registro de cercanía/calidez local del sector sin contradecir précision/confiance.
     *   Terracota #A24E22 verificado WCAG AA (≥4.5:1) contra bg/surface/dark-bg — ver
     *   script de contraste ejecutado antes de aplicar (10/10 pares ≥4.5:1).
     * → Display Fredoka (redondeada) reemplaza Fraunces en h1/h2/h3 + elementos numerados
     *   (process-num, formats-name, apropos-stat-num, raisons-num) — Nunito (sans redondeado)
     *   reemplaza Inter en el resto de la UI.
     * → Formas: radius aumentado en tarjetas, botones pill, círculos decorativos SVG inline.
     * VARIANTE=23 → DASHBOARD (mapeado de la referencia lmdplan.com) — arquetipo sin cambios
     */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Base crema cálida ← RE-SKIN: sustituye el blanco papel/crema frío anterior */
      --bg:           #F2F3FB;
      --bg2:          #DEE2F7;
      --surface:      #FFFFFF;
      --surface2:     #E7EBFB;
      /* Acento índigo — couleur de marque principale, plus vive/saturée */
      --accent:       #4F46E5;
      --accent-dk:    #4338CA;
      --accent-soft:  rgba(79,70,229,.10);
      --accent-line:  rgba(79,70,229,.25);
      /* Salvia — deuxième accent décoratif (cercles de fond, détails) */
      --sage:         #4C8C6E;
      --sage-soft:    rgba(76,140,110,.14);
      /* Ambre — troisième accent décoratif, pour éviter un rendu mono-couleur */
      --amber:        #D98C2B;
      --amber-soft:   rgba(217,140,43,.14);
      /* Rose/magenta — quatrième accent décoratif (badges multicolores) */
      --pink:         #C43D8E;
      --pink-soft:    rgba(196,61,142,.12);
      /* Texto — grafito cálido */
      --fg:           #2B211B;
      --fg2:          #3A2E24;
      --muted:        #6B5B4C;
      --border:       rgba(43,33,27,.12);
      --border-s:     rgba(43,33,27,.18);
      /* Bloques oscuros: FOOTER — bleu nuit quasi noir */
      --dark-bg:      #0B0E2E;
      --dark-fg:      #F5E9DC;
      --dark-muted:   rgba(245,233,220,.92);
      /* CTA — dégradé indigo → violet */
      --cta-bg:       #12153F;
      --cta-bg-2:     #1E1F5C;
      --cta-fg:       #FBF3E7;
      --cta-muted:    rgba(251,243,231,.95);
      /* Tipografía — display redondeada (Fredoka) en h1/h2/h3 + elementos numerados,
         sans redondeado (Nunito) en el resto */
      --font-display: 'Fredoka', Georgia, sans-serif;
      --font-head:    'Nunito', sans-serif;
      --font-body:    'Nunito', sans-serif;
      --font-mono:    'JetBrains Mono', monospace;
      --maxw:         1140px;
      /* Radios ← RE-SKIN: sistema de formas muy redondeadas */
      --radius-card:  22px;
      --radius-pill:  999px;
    }

    /* ── BASE ────────────────────────────────────────────────────── */
    html { scroll-behavior: smooth; }
    /* ← FIX: pages courtes (assistance, adaptation de fichiers, etc.) laissaient
       apparaître le fond blanc par défaut du navigateur sous le footer — body en
       colonne flex + footer poussé en bas via margin-top:auto */
    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--fg);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .footer { margin-top: auto; }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; }
    /* Display redondeada (Fredoka) en h1/h2/h3 — el resto de la UI (nav, botones, labels,
       tarjetas) permanece en sans redondeado (Nunito) */
    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: 600;
      line-height: 1.12;
    }

    /* ← RE-SKIN: tratamiento "lavado" (desaturado + bajo contraste) para todas las fotos
       reales existentes — ninguna imagen se reemplaza, solo se estiliza vía CSS filter */
    .photo-washed { filter: saturate(.72) contrast(.92) brightness(1.03); }

    .wrap    { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px,4vw,48px); }
    .section { padding: clamp(64px,7vw,96px) 0; }

    /* Sentence case, sin mayúsculas ni guion decorativo ← evita el registro "eyebrow SaaS" */
    .eyebrow {
      display: block;
      font-family: var(--font-body); font-size: 14px; font-weight: 500;
      font-style: italic; letter-spacing: normal; text-transform: none;
      color: var(--accent); margin-bottom: 10px;
    }
    .eyebrow-inv { color: var(--cta-fg); }

    .section-title {
      font-size: clamp(30px,4vw,46px);
      font-weight: 700; color: var(--fg); line-height: 1.1;
    }

    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 26px;
      font-family: var(--font-head); font-size: 15px; font-weight: 600;
      letter-spacing: .01em;
      text-decoration: none; border: none; cursor: pointer;
      transition: opacity .2s, background .2s;
      border-radius: var(--radius-pill);
      white-space: nowrap;
    }
    .btn:hover { opacity: .86; }
    .btn-primary  { background: var(--accent); color: #F2F6F8; }
    .btn-outline  { background: transparent; border: 1.5px solid var(--border-s); color: var(--fg); }
    .btn-inv      { background: #F2F6F8; color: var(--accent-dk); }
    /* ← PROMPT 7: variante outline pour boutons secondaires sur fond sombre (CTA final) */
    .btn-ghost-inv { background: transparent; border: 1.5px solid rgba(242,246,248,.4); color: var(--cta-fg); }
    .btn-ghost-inv:hover { background: rgba(242,246,248,.1); }

    /* ══════════════════════════════════════════════════════════════
       SECCIÓN 1 — NAV (DASHBOARD)
       Logo left · nav links · segmento ubicaciones en monospace (← teléfono ausente)
       · CTA right · borde-bottom
    ══════════════════════════════════════════════════════════════ */
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--surface);
      border-bottom: 1px solid var(--border-s);
    }
    .nav-inner {
      max-width: var(--maxw); margin: 0 auto;
      padding: 0 clamp(20px,4vw,48px);
      height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    }
    /* ← XML: <assets><logo> — lockup vertical (icônes + wordmark), pas de texte de secours nécessaire */
    .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .logo img { height: 54px; width: auto; max-width: none; display: block; flex-shrink: 0; }
    .logo-sub {
      font-family: var(--font-mono); font-size: 10px; color: var(--muted);
      letter-spacing: .06em; text-transform: uppercase;
    }
    .nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
    .nav-links a {
      font-family: var(--font-body); font-size: 14px; font-weight: 500;
      color: var(--muted); text-decoration: none; transition: color .2s;
      white-space: nowrap;
    }
    .nav-links a:hover { color: var(--fg); }
    /* Ubicaciones en monospace ← DASHBOARD: sustituye al teléfono (ausente en el brief) */
    .nav-locations {
      display: flex; align-items: center; gap: 6px;
      font-family: var(--font-mono); font-size: 12px; color: var(--accent);
      white-space: nowrap;
    }
    .nav-right { display: flex; align-items: center; gap: 22px; }
    /* ← FIX: home.html est autocontenu et ne charge pas oscar_theme/styles.css — le bouton
       panier (templates/oscar/partials/mini_basket.html, inclus via header.html) doit donc
       aussi être stylé ici, sinon le SVG s'affiche à sa taille par défaut (300×150px) faute
       de largeur/hauteur définies. Règles identiques à oscar_theme/styles.css. */
    .mini-basket-btn {
      position: relative; display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--surface2); color: var(--fg);
      transition: background .2s, color .2s;
    }
    .mini-basket-btn:hover { background: var(--accent-soft); color: var(--accent-dk); }
    .mini-basket-icon { width: 22px; height: 22px; }
    .mini-basket-count {
      position: absolute; top: -2px; right: -2px;
      min-width: 18px; height: 18px; padding: 0 4px;
      border-radius: 999px; background: var(--pink); color: #fff;
      font-family: var(--font-mono); font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; line-height: 1;
      border: 2px solid var(--surface);
    }
    .nav-burger {
      display: none; background: none; border: none; cursor: pointer;
      padding: 4px; flex-direction: column; gap: 5px;
    }
    .nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--fg); }
    .nav-mobile {
      display: none; flex-direction: column;
      background: var(--surface); border-bottom: 1px solid var(--border-s);
    }
    .nav-mobile a {
      display: block; padding: 14px clamp(20px,4vw,48px);
      font-family: var(--font-body); font-size: 14px; font-weight: 500;
      color: var(--muted); text-decoration: none; border-top: 1px solid var(--border);
    }
    .nav-mobile.open { display: flex; }

    /* ══════════════════════════════════════════════════════════════
       SECCIÓN 2 — HERO (DASHBOARD)
       Título left-aligned + panel de datos flotante derecha con borde
       Panel usa la foto real (façade Oloron, reutilizada de À propos) como fondo pleno,
       con overlay oscuro + texto en blanco superpuesto (ubicaciones/horaires)
       Ajuste XML: teléfono/email ausentes → panel muestra ubicaciones + horaires reales
    ══════════════════════════════════════════════════════════════ */
    /* ← FIX: la photo réelle (façade Oloron) passe en fond plein du hero (avant: confinée
       au panneau de droite) — scrim sombre superposé pour la lisibilité du texte, qui
       reprend les teintes déjà utilisées pour le CTA final (contexte texte-clair-sur-fond-
       sombre identique). Aucune donnée/texte supprimé : le texte, les CTA, le bandeau de
       réassurance, la trust-line et l'insignia (nom + tags) sont tous conservés, seule leur
       couleur change pour rester lisibles sur la photo. */
    .hero { position: relative; overflow: hidden; }
    .hero-bg-photo {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; display: block; z-index: 0;
    }
    .hero-bg-overlay {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(100deg, rgba(27,33,71,.88) 0%, rgba(27,33,71,.64) 42%, rgba(27,33,71,.34) 68%, rgba(27,33,71,.18) 100%);
    }
    .hero-inner {
      position: relative; z-index: 2;
      max-width: var(--maxw); margin: 0 auto;
      /* ← FIX: contenu remonté — padding-top réduit et alignement en haut (avant:
         justify-content:center laissait un vide au-dessus du sur-titre) */
      padding: clamp(28px,3.5vw,40px) clamp(20px,4vw,48px) clamp(32px,4.5vw,52px);
      min-height: clamp(260px,30vw,360px);
      display: flex; flex-direction: column; justify-content: flex-start;
    }
    /* ← FIX: élargi (620px → 860px) pour laisser le titre et l'insignia cohabiter sur la
       même ligne ; .hero-sub/.hero-proof-badges gardent leur propre max-width plus étroit */
    .hero-content { max-width: 860px; }
    /* ← FIX: l'insignia (nom + tags) se place maintenant à côté du titre, plus en dessous
       du bloc de texte complet */
    .hero-title-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: clamp(24px,4vw,40px); flex-wrap: wrap; margin-bottom: 22px;
    }
    .hero-title {
      font-size: clamp(38px,5.5vw,58px);
      font-weight: 700; line-height: 1.08; letter-spacing: -.01em;
      color: var(--cta-fg); margin-bottom: 0; max-width: 560px;
      flex: 1 1 360px;
    }
    .hero-title-accent { color: var(--accent); }
    .hero-sub {
      font-size: clamp(15px,1.6vw,17px); color: var(--cta-muted);
      line-height: 1.65; max-width: 520px; margin-bottom: 30px;
    }
    .hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
    .hero-proof {
      font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .05em;
      color: var(--cta-muted);
    }
    /* ← PROMPT 7: sur-titre (2e ligne) — même traitement que l'eyebrow, sans dupliquer la
       classe (garde l'eyebrow pour le libellé court, ceci pour la précision géographique) */
    .hero-kicker {
      font-size: 13px; color: var(--cta-fg); margin: -6px 0 14px; font-family: var(--font-body);
    }
    /* Bandeau de réassurance (4 items) ← remplace la ligne unique précédente, même style
       typographique (font-mono, petit, muted), séparateurs "·" littéraux dans le HTML */
    .hero-proof-badges {
      display: flex; flex-wrap: wrap; gap: 8px 10px;
    }
    /* ← FIX: insignia (nom + tags) à côté du titre (voir .hero-title-row), plus en dessous
       du bloc de texte complet */
    .hero-panel-badge {
      position: relative; z-index: 2; flex: 0 1 280px;
      max-width: 280px;
      background: var(--surface); border-radius: var(--radius-card);
      padding: clamp(16px,2vw,20px);
      box-shadow: 0 10px 30px rgba(43,33,27,.28);
    }
    .hero-panel-badge-name {
      font-family: var(--font-display); font-size: clamp(19px,2vw,23px); font-weight: 600;
      color: var(--fg); margin-bottom: 10px;
    }
    .hero-panel-badge-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .hero-panel-badge-tag {
      font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
      color: var(--accent-dk); background: var(--accent-soft);
      padding: 5px 12px; border-radius: var(--radius-pill);
    }
    /* Trust-line ← accueille les horaires/localisations réelles retirés du panneau photo,
       aucune donnée supprimée, juste déplacée sous le paragraphe hero */
    .hero-trust {
      display: flex; flex-wrap: wrap; gap: 10px 22px;
      margin-top: 4px; margin-bottom: 26px;
    }
    .hero-trust-item {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--cta-muted);
    }
    .hero-trust-item svg { flex: none; color: var(--cta-fg); }

    /* ══════════════════════════════════════════════════════════════
       SECCIÓN 4 — DIFFÉRENCIATION (DASHBOARD)
       2×2 grid keywords grandes ← 4 <differenciation> reales
    ══════════════════════════════════════════════════════════════ */
    /* Sin borde ni radius ← variación de tratamiento: diferencia solo por color de fondo,
       en damero (checkerboard) sobre las 2×2 keywords */
    /* ← FIX: lueurs douces (radial-gradient flouté) en haut-gauche/bas-droite, comme sur la
       référence — la section reste blanche mais gagne un peu de profondeur/atmosphère */
    .diff {
      background: var(--surface);
      position: relative; overflow: hidden;
    }
    .diff::before, .diff::after {
      content: ""; position: absolute; z-index: 0; pointer-events: none;
      width: 440px; height: 440px; border-radius: 50%;
      filter: blur(60px); opacity: .9;
    }
    .diff::before { top: -180px; left: -140px; background: rgba(79,70,229,.4); }
    .diff::after { bottom: -200px; right: -160px; background: rgba(196,61,142,.35); }
    .diff > .wrap { position: relative; z-index: 1; }
    .diff-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
    }
    .diff-item { padding: clamp(32px,4vw,48px); position: relative; overflow: hidden; }
    .diff-item { background: var(--surface); border: 1px solid var(--border); }
    /* ← RE-SKIN: círculo decorativo SVG inline (data-URI, sin librería externa) */
    .diff-item::after {
      content: ""; position: absolute; z-index: 0; pointer-events: none;
      width: 150px; height: 150px; right: -55px; bottom: -55px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%234F46E5' stroke-width='2' opacity='.2'/%3E%3C/svg%3E");
      background-size: contain; background-repeat: no-repeat;
    }
    .diff-item:nth-child(2n)::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%234C8C6E' stroke-width='2' opacity='.2'/%3E%3C/svg%3E");
    }
    .diff-item > * { position: relative; z-index: 1; }
    .diff-keyword {
      font-family: var(--font-head); font-size: clamp(20px,2.4vw,26px);
      font-weight: 700; color: var(--fg); margin-bottom: 8px;
    }
    .diff-desc { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 440px; }
    /* ← PROMPT 7: intro copy SEO (2 paragraphes) au-dessus de la grille existante */
    .diff-intro {
      font-size: 15.5px; color: var(--muted); line-height: 1.7;
      max-width: 640px; margin-bottom: 18px;
    }

    /* ══════════════════════════════════════════════════════════════
       SECCIÓN 3 — SERVICES (DASHBOARD)
       Grid sin gaps con bordes ← 4 <service> reales
       "Finitions" (5º service) vive fuera de la grilla, ver .finitions-section más abajo
    ══════════════════════════════════════════════════════════════ */
    .services { background: var(--surface); }
    /* ← PROMPT 7: "Comment commander vos plans" — 3 étapes, copy SEO ajouté avant la
       grille de services existante. Numérotation dans le même style que les autres
       compteurs du site (accent, font-head) */
    .process-intro { margin-bottom: clamp(48px,6vw,72px); }
    .process-steps {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px,3vw,32px); margin-bottom: 24px;
    }
    .process-num {
      font-family: var(--font-display); font-size: 28px; font-weight: 700;
      color: var(--accent); margin-bottom: 10px;
    }
    .process-step-title {
      font-family: var(--font-head); font-size: 17px; font-weight: 700;
      color: var(--fg); margin-bottom: 6px;
    }
    .process-step-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }
    .process-microtext { font-size: 13.5px; color: var(--muted); font-style: italic; }
    @media (max-width: 700px) {
      .process-steps { grid-template-columns: 1fr; }
    }
    /* ← PROMPT 7: tableau des formats A0/A1/A2 + liste "Nos principaux services" */
    .formats-block { margin-top: clamp(48px,6vw,72px); }
    .formats-table {
      border: 1px solid var(--border-s); border-radius: var(--radius-card); overflow: hidden;
      margin-bottom: clamp(32px,4vw,44px);
    }
    .formats-row {
      display: grid; grid-template-columns: .7fr 1fr 2fr;
      gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border-s);
      font-size: 14px; color: var(--muted);
    }
    .formats-row:last-child { border-bottom: none; }
    .formats-row-head {
      background: var(--bg2); font-family: var(--font-mono); font-size: 11px;
      letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    }
    .formats-name {
      font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 15px;
    }
    .formats-subtitle {
      font-family: var(--font-head); font-size: 19px; font-weight: 700;
      color: var(--fg); margin-bottom: 16px;
    }
    .formats-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .formats-list li { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
    .formats-list strong { color: var(--fg); }
    @media (max-width: 700px) {
      .formats-row { grid-template-columns: 1fr; gap: 4px; }
      .formats-row-head { display: none; }
    }
    .services-header {
      margin-bottom: clamp(32px,4vw,48px);
    }
    /* ← FIX: tarjetas individuales con espacio entre ellas (antes: grid con bordes
       compartidos) — 4 en una sola fila, imagen a sangre + separador punteado + texto,
       "Boutique en ligne" diferenciada como tarjeta acento con CTA (referencia visual) */
    .services-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: clamp(16px,2vw,22px);
    }
    .service-card {
      border-radius: var(--radius-card); overflow: hidden;
      background: var(--bg2);
      position: relative;
      display: flex; flex-direction: column;
    }
    /* ← RE-SKIN: círculo decorativo SVG inline (data-URI) — ambre plutôt que sauge, pour
       une troisième touche de couleur distincte de .diff-item/.metiers-section */
    .service-card::after {
      content: ""; position: absolute; z-index: 0; pointer-events: none;
      width: 110px; height: 110px; right: -40px; bottom: -40px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23D98C2B' stroke-width='2' opacity='.16'/%3E%3C/svg%3E");
      background-size: contain; background-repeat: no-repeat;
    }
    .service-card > * { position: relative; z-index: 1; }
    /* ← XML: <assets><images> — thumbnail réel par service (aucun substitut générique) ;
       filtre "lavé" (.photo-washed, appliqué en HTML) ← RE-SKIN. Image à sangre + séparateur
       pointillé (référence visuelle), au lieu d'une vignette flottante avec marge propre. */
    .service-thumb {
      width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
      border-bottom: 1.5px dashed var(--border-s);
    }
    /* "Boutique en ligne" n'a pas d'asset réel → icône SVG décorative, même emplacement */
    .service-icon {
      width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
      background: var(--surface2); border-bottom: 1.5px dashed var(--border-s);
    }
    .service-icon svg { width: 25%; height: auto; color: var(--accent); }
    .service-card-body { padding: clamp(18px,2.2vw,24px); }
    .service-name {
      font-family: var(--font-head); font-size: 17px; font-weight: 700;
      color: var(--fg); line-height: 1.25; margin-bottom: 8px;
    }
    .service-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

    /* ← FIX: section "Nos produits" (home) — mêmes cartes que /catalogue/ (render_product,
       templates/oscar/catalogue/partials/product.html), donc mêmes classes .product_pod
       que oscar_theme/styles.css. Dupliquées ici (au lieu d'une classe "produit-card" à
       part) car home.html est autocontenu et ne charge pas oscar_theme/styles.css. */
    .produits-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: clamp(16px,2vw,22px);
    }
    @media (max-width: 900px) { .produits-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .produits-grid { grid-template-columns: 1fr; } }
    .product_pod {
      display: flex; flex-direction: column; width: 100%; height: 100%;
      overflow: visible; text-align: center; padding: 20px 18px;
      background: var(--surface); border: 1px solid var(--border-s);
      border-radius: var(--radius-card);
      transition: box-shadow .2s ease, transform .2s ease;
    }
    .product_pod:hover { box-shadow: 0 10px 26px rgba(43,33,27,.12); transform: translateY(-2px); }
    .product_pod .image_container {
      background: var(--surface2); border-radius: calc(var(--radius-card) - 6px); padding: 14px;
      height: 155px; display: flex; align-items: center; justify-content: center;
    }
    .product_pod img.img-thumbnail {
      border: none; background: transparent;
      max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
    }
    .product_pod h3 { font-size: 15px; font-family: var(--font-body); font-weight: 700; margin-top: 12px !important; }
    .product_pod h3 a { color: var(--fg); }
    .product_pod .product_price {
      position: static; float: none; bottom: auto;
      font-family: var(--font-mono); color: var(--accent-dk); font-weight: 600;
      margin-top: auto; padding-top: 12px;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .product_pod .price_color { margin-top: 0; }
    .product_pod .availability { min-height: 30px; white-space: nowrap; margin-bottom: 0; }
    .availability.instock { color: #28a745; }
    .availability.outofstock { color: #dc3545; }
    .btn-block { display: block; width: 100%; }
    .product_pod .product_price .btn-block {
      white-space: normal; line-height: 1.3; font-size: 13.5px;
      padding: 12px 18px; border-radius: 14px; margin-top: 2px;
    }
    /* ← "Boutique en ligne" — tarjeta acento (pas de photo) : fond salvia clair, badge
       icône circulaire, CTA repris tel quel du bouton hero ("Imprimer mes plans" → #contact),
       aucun texte inventé */
    .service-card--accent { background: var(--sage-soft); }
    .service-card--accent .service-card-body {
      padding: clamp(22px,2.6vw,28px); display: flex; flex-direction: column; height: 100%;
    }
    .service-icon-badge {
      width: 44px; height: 44px; border-radius: 50%; background: var(--surface);
      display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
    }
    .service-icon-badge svg { width: 20px; height: 20px; color: var(--sage); }
    .service-card--accent .service-desc { margin-bottom: 20px; }
    .service-card--accent .btn { margin-top: auto; align-self: flex-start; }

    /* ── "Finitions" — bande de section alternée, comme "Nos engagements" / "À propos" ──
       Carrousel multi-items (plusieurs photos visibles à la fois, complètes, sans overlay
       sombre) ← réplique le carrousel du site Epicopi actuel : légende sous l'image (pas
       dessus), flèches rondes simples, puces en dessous. */
    .finitions-section { background: var(--bg); padding-top: clamp(64px,7vw,96px); }
    .finitions-header { margin-bottom: clamp(28px,3.5vw,40px); }
    .finitions-header .service-name { font-size: clamp(20px,2.4vw,26px); margin-bottom: 8px; }
    .finitions-header .service-desc { font-size: 15px; max-width: 640px; }
    .finitions-carousel { position: relative; }
    .finitions-carousel-viewport { overflow: hidden; }
    .finitions-carousel-track {
      display: flex; gap: clamp(12px,2vw,20px); transition: transform .4s ease;
    }
    /* 3 par vue en desktop, 2 en tablette, 1 en mobile — ajusté aussi en JS pour le calcul
       du déplacement par clic (voir script) */
    .finitions-carousel-slide {
      flex: 0 0 calc((100% - 2 * clamp(12px,2vw,20px)) / 3);
    }
    .finitions-carousel-slide img {
      width: 100%; aspect-ratio: 4/3; object-fit: contain;
      background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--radius-card);
      display: block;
    }
    /* Flèches — cercle clair simple, contour visible, comme le site Epicopi actuel */
    .finitions-carousel-arrow {
      position: absolute; top: 50%; margin-top: -20px;
      width: 40px; height: 40px; border-radius: 50%;
      border: 1px solid var(--border-s); background: var(--surface); color: var(--fg);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; padding: 0; transition: background .2s;
      box-shadow: 0 2px 8px rgba(11,20,26,.08);
    }
    .finitions-carousel-arrow:hover { background: var(--bg2); }
    .finitions-carousel-arrow svg { width: 18px; height: 18px; }
    .finitions-carousel-arrow-prev { left: -20px; }
    .finitions-carousel-arrow-next { right: -20px; }
    /* ← controles: puces centrées + bouton pause/lecture épinglé à droite de la même ligne */
    .finitions-carousel-controls {
      position: relative; display: flex; justify-content: center; align-items: center;
      margin-top: clamp(20px,3vw,28px);
    }
    .finitions-carousel-dots {
      display: flex; justify-content: center; align-items: center; gap: 8px;
    }
    .finitions-carousel-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--border-s); border: none; padding: 0; cursor: pointer;
      transition: background .2s, width .2s;
    }
    .finitions-carousel-dot.active { background: var(--accent); width: 20px; border-radius: 4px; }
    /* Bouton pause/lecture — même langage visuel que les flèches (cercle clair, contour) */
    .finitions-carousel-playpause {
      position: absolute; right: 0; top: 50%; transform: translateY(-50%);
      width: 30px; height: 30px; border-radius: 50%;
      border: 1px solid var(--border-s); background: var(--surface); color: var(--fg);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; padding: 0; transition: background .2s;
    }
    .finitions-carousel-playpause:hover { background: var(--bg2); }
    .finitions-carousel-playpause svg { width: 12px; height: 12px; }
    .finitions-carousel-playpause .ico-play { display: none; }
    .finitions-carousel-playpause.paused .ico-pause { display: none; }
    .finitions-carousel-playpause.paused .ico-play { display: block; }
    @media (max-width: 900px) {
      .finitions-carousel-slide { flex: 0 0 calc((100% - 12px) / 2); }
    }
    @media (max-width: 600px) {
      .finitions-carousel-slide { flex: 0 0 100%; }
      .finitions-carousel-arrow-prev { left: 4px; }
      .finitions-carousel-arrow-next { right: 4px; }
      /* ← espace pour le bouton pause/lecture à droite des puces sur petit écran */
      .finitions-carousel-controls { padding-right: 40px; }
    }

    /* ← PROMPT 7: franja "métiers" — alterna a var(--surface), mismo padding-top-only
       que .finitions-section (el padding-bottom lo aporta el cierre de la section) */
    .metiers-section {
      background: var(--surface); padding-top: clamp(64px,7vw,96px);
      position: relative; overflow: hidden;
    }
    /* ← RE-SKIN: círculo decorativo SVG inline de sección (data-URI, sin librería externa) */
    .metiers-section::before {
      content: ""; position: absolute; z-index: 0; pointer-events: none;
      width: 340px; height: 340px; right: clamp(-100px,-6vw,-40px); top: -80px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%234F46E5' stroke-width='1.2' opacity='.14'/%3E%3Ccircle cx='50' cy='50' r='34' fill='none' stroke='%234C8C6E' stroke-width='1.2' opacity='.14'/%3E%3C/svg%3E");
      background-size: contain; background-repeat: no-repeat;
    }
    .metiers-section > .wrap { position: relative; z-index: 1; }
    .metiers-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: clamp(20px,2.5vw,28px); margin-bottom: clamp(28px,3.5vw,36px);
    }
    .metiers-name {
      font-family: var(--font-head); font-size: 16px; font-weight: 700;
      color: var(--fg); margin-bottom: 8px;
    }
    .metiers-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
    .metiers-callout {
      border-left: 3px solid var(--accent-line); padding-left: 20px;
    }
    .metiers-callout strong {
      display: block; font-family: var(--font-head); font-size: 16px;
      color: var(--fg); margin-bottom: 6px;
    }
    .metiers-callout p { font-size: 14px; color: var(--muted); line-height: 1.6; }
    @media (max-width: 900px) {
      .metiers-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .metiers-grid { grid-template-columns: 1fr; }
    }

    /* ── Section "usages personnels" (Vos réalisations / évènements / assos / passions) ── */
    .cards-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: clamp(20px,2.5vw,28px); margin-bottom: clamp(28px,3.5vw,36px);
    }
    .cards-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .cards-grid .card-item-title {
      font-family: var(--font-head); font-size: 16px; font-weight: 700;
      color: var(--fg); margin-bottom: 8px;
    }
    .cards-grid .card-item-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
    @media (max-width: 900px) {
      .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .cards-grid-4 { grid-template-columns: 1fr; }
    }

    /* ← FIX: "Vos réalisations / évènements / assos / passions" éclaté en 4 sections pleine
       largeur indépendantes (au lieu d'une grille à 4 colonnes), alternant bg/surface comme
       le reste de la home ; toute la section fait office de lien (pas de bouton visible),
       le titre s'accentue au survol pour indiquer l'interactivité */
    .usage-block { padding: clamp(28px,3.5vw,40px) 0; border-top: 1px solid var(--border); }
    .usage-block-inner { display: block; text-decoration: none; color: inherit; }
    .usage-block-title {
      font-family: var(--font-head); font-size: clamp(18px,2vw,22px); font-weight: 700;
      color: var(--fg); margin-bottom: 8px; transition: color .2s;
    }
    .usage-block-inner:hover .usage-block-title { color: var(--accent); }
    .usage-block-desc { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 640px; }

    /* ← FIX: bande sombre "Pourquoi choisir Epicopi" — fond bleu nuit + trame de points,
       texte clair, pour retrouver le rythme clair/sombre/clair de la référence au lieu
       d'un enchaînement de sections toutes claires */
    .dark-band {
      background: var(--dark-bg) !important;
      border-top-color: rgba(255,255,255,.08) !important;
      position: relative; overflow: hidden;
    }
    .dark-band::before {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.5px);
      background-size: 20px 20px;
      -webkit-mask-image: radial-gradient(circle at 85% 30%, #000 0%, transparent 60%);
      mask-image: radial-gradient(circle at 85% 30%, #000 0%, transparent 60%);
    }
    .dark-band > .wrap, .dark-band > a.wrap { position: relative; z-index: 1; }
    .dark-band .eyebrow { color: var(--cta-muted); }
    .dark-band .section-title { color: var(--cta-fg); }
    .dark-band .diff-intro { color: var(--cta-muted); }
    .dark-band .usage-block-title { color: var(--cta-fg); }
    .dark-band .usage-block-desc { color: var(--cta-muted); }
    .dark-band .usage-block-inner:hover .usage-block-title { color: #fff; }
    .dark-band .btn-outline {
      background: transparent; border: 1.5px solid rgba(251,243,231,.35); color: var(--cta-fg);
    }
    .dark-band .btn-outline:hover { background: rgba(251,243,231,.1); }

    /* ══════════════════════════════════════════════════════════════
       SECCIÓN 5 — À PROPOS / GARANTIES (DASHBOARD)
       Fila de stats + texto debajo ← stats = conteos reales del brief
       IMAGEN_2 = null → sin panel fotográfico
    ══════════════════════════════════════════════════════════════ */
    /* Sin caja ni radius ← variación de tratamiento: fila abierta separada por un filete
       vertical de acento y espacio en blanco generoso, sin fondo de tarjeta */
    .apropos { background: var(--bg2); }
    /* ← RE-SKIN: 5 stats en cercles "semilla" — tamaños y colores variados, dispersos en
       la misma fila (align-self alterna la altura), en vez de la fila 3+2 anterior. El
       "[X] ans" placeholder es una semilla más del grupo, nunca aislado en su propia línea. */
    .apropos-stats {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
      gap: clamp(14px,2vw,20px); margin-bottom: clamp(40px,5vw,56px);
    }
    .apropos-stat {
      flex: none; border-radius: 50%;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 12px;
    }
    .apropos-stat-num {
      font-family: var(--font-display); font-weight: 700; line-height: 1; margin-bottom: 6px;
    }
    .apropos-stat-label {
      font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
      letter-spacing: .01em; line-height: 1.25; opacity: .88; max-width: 108px;
    }
    .apropos-stat:nth-child(1) {
      width: 158px; height: 158px; background: var(--accent); color: var(--cta-fg);
      align-self: flex-end;
    }
    .apropos-stat:nth-child(1) .apropos-stat-num { font-size: 32px; }
    .apropos-stat:nth-child(2) {
      width: 202px; height: 202px; background: var(--sage); color: #fff;
      align-self: flex-start;
    }
    .apropos-stat:nth-child(2) .apropos-stat-num { font-size: 44px; }
    .apropos-stat:nth-child(3) {
      width: 138px; height: 138px; background: var(--surface);
      border: 2px solid var(--accent-line); color: var(--fg);
      align-self: center;
    }
    .apropos-stat:nth-child(3) .apropos-stat-num { font-size: 25px; color: var(--accent); }
    .apropos-stat:nth-child(4) {
      width: 150px; height: 150px; background: var(--amber-soft); color: var(--amber);
      align-self: flex-end;
    }
    .apropos-stat:nth-child(4) .apropos-stat-num { font-size: 29px; }
    .apropos-stat:nth-child(5) {
      width: 122px; height: 122px; background: var(--bg2);
      border: 2px dashed var(--border-s); color: var(--muted);
      align-self: flex-start;
    }
    .apropos-stat:nth-child(5) .apropos-stat-num { font-size: 21px; }
    .apropos-text {
      max-width: 680px; font-size: 15.5px; color: var(--muted); line-height: 1.75;
    }
    /* ← PROMPT 7: "Pourquoi confier vos plans" — 6 raisons numérotées */
    .raisons-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: clamp(20px,2.5vw,28px); margin-bottom: 8px;
    }
    .raisons-item {
      background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--radius-card);
      padding: clamp(20px,2.4vw,26px);
      position: relative; overflow: hidden;
    }
    /* ← RE-SKIN: círculo decorativo SVG inline (data-URI), mismo tratamiento que .diff-item */
    .raisons-item::after {
      content: ""; position: absolute; z-index: 0; pointer-events: none;
      width: 90px; height: 90px; right: -32px; bottom: -32px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%234F46E5' stroke-width='2' opacity='.14'/%3E%3C/svg%3E");
      background-size: contain; background-repeat: no-repeat;
    }
    .raisons-item > * { position: relative; z-index: 1; }
    .raisons-num {
      font-family: var(--font-display); font-size: 13px; font-weight: 700;
      color: var(--accent); margin-bottom: 10px;
    }
    .raisons-title {
      font-family: var(--font-head); font-size: 16px; font-weight: 700;
      color: var(--fg); margin-bottom: 8px;
    }
    .raisons-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
    @media (max-width: 700px) {
      .raisons-grid { grid-template-columns: 1fr; }
    }
    /* ← XML: <assets><images> — 2 photos réelles de façade, une par atelier */
    .apropos-photos {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: clamp(16px,2vw,24px); margin-top: clamp(32px,4vw,48px);
    }
    .apropos-photo img {
      width: 100%; height: clamp(180px,22vw,240px); object-fit: cover;
      border-radius: var(--radius-card); display: block;
    }
    .apropos-photo-caption {
      margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted);
    }

    /* ══════════════════════════════════════════════════════════════
       SECCIÓN 6 — AVIS CLIENTS (DASHBOARD)
       3 cards iguales en fila — placeholders visibles, sin testimonios en el brief
    ══════════════════════════════════════════════════════════════ */
    .avis { background: var(--surface); }
    .avis-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px,2vw,22px); margin-top: clamp(32px,4vw,48px);
    }
    .avis-card {
      background: var(--bg); border: 1px solid var(--border-s); border-radius: var(--radius-card);
      padding: clamp(22px,2.6vw,28px);
    }
    .avis-placeholder-badge {
      display: inline-block; margin-bottom: 14px;
      font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
      text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-pill);
      background: var(--accent-soft); color: var(--accent);
    }
    /* ← RE-SKIN: étoiles décoratives (SVG inline) au-dessus de la citation — même badge
       placeholder conservé, aucun texte de témoignage inventé */
    .avis-stars { display: flex; gap: 3px; margin-bottom: 12px; color: var(--accent); }
    .avis-stars svg { width: 15px; height: 15px; }
    .avis-quote { font-size: 14.5px; color: var(--fg2); line-height: 1.65; font-style: italic; margin-bottom: 18px; }
    .avis-author { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--muted); }

    /* ══════════════════════════════════════════════════════════════
       SECCIÓN 7 — FAQ (DASHBOARD)
       ← FIX: la respuesta desplegada aparece al lado de la lista de preguntas (2 columnas
       parejas, ya no .8fr/1.2fr angosto — ese problema era la hoja de estilos externa
       obsoleta filtrándose por cascada, ver comentario junto al <link> eliminado en <head>,
       no el layout de 2 columnas en sí). El panel derecho es sticky y repite la pregunta en
       negrita para no perder contexto cuando varias respuestas están abiertas a la vez
       (comportamiento "multi-abierto" ya implementado en JS, sin cambios).
    ══════════════════════════════════════════════════════════════ */
    .faq { background: var(--bg); }
    .faq-layout {
      display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3vw,40px);
      align-items: start; margin-top: clamp(28px,3.5vw,40px);
    }
    .faq-q-list { display: flex; flex-direction: column; gap: 12px; }
    .faq-item {
      background: var(--surface); border: 1px solid var(--border-s);
      border-radius: var(--radius-card); overflow: hidden;
    }
    .faq-q {
      width: 100%; background: none; border: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
      padding: 20px 24px;
      font-family: var(--font-head); font-size: 15.5px; font-weight: 600;
      color: var(--fg); text-align: left; transition: color .2s;
    }
    .faq-q:hover { color: var(--accent); }
    .faq-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); transition: transform .25s; }
    .faq-item.open .faq-icon { transform: rotate(45deg); }
    .faq-answer-panel {
      background: var(--surface); border: 1px solid var(--border-s);
      border-radius: var(--radius-card); padding: clamp(22px,2.6vw,28px);
      display: flex; flex-direction: column; gap: 24px;
      position: sticky; top: clamp(92px,10vw,110px);
    }
    .faq-a { display: none; font-size: 14.5px; color: var(--muted); line-height: 1.7; }
    .faq-a.open { display: block; }
    .faq-a-q-label {
      font-family: var(--font-head); font-size: 15.5px; font-weight: 700;
      color: var(--fg); margin-bottom: 8px;
    }
    /* ← affiché seulement quand aucune question n'est ouverte (géré en JS) */
    .faq-answer-empty { font-size: 14px; color: var(--muted); font-style: italic; }

    /* ══════════════════════════════════════════════════════════════
       SECCIÓN 8 — CTA FINAL + CONTACTO (DASHBOARD)
       Barra full-width — 2 ubicaciones + horaires (teléfono/email ausentes)
    ══════════════════════════════════════════════════════════════ */
    /* ← FIX: dégradé indigo → violet (au lieu d'un aplat uni) + trame de points subtile,
       pour se rapprocher du traitement de la bande sombre de référence */
    .cta-final {
      background:
        radial-gradient(680px circle at 78% 15%, rgba(255,255,255,.10), transparent 62%),
        radial-gradient(520px circle at 8% 95%, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(135deg, var(--cta-bg) 0%, var(--cta-bg-2) 100%);
      padding-bottom: clamp(48px,6vw,72px);
      position: relative; overflow: hidden;
    }
    .cta-final::before {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
      background-size: 22px 22px;
      -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 55%);
      mask-image: linear-gradient(100deg, #000 0%, transparent 55%);
    }
    .cta-final > .wrap { position: relative; z-index: 1; }
    /* ← PROMPT 7: "Dernier bloc SEO" — paragraphe avant la barre CTA elle-même
       ← FIX espacement: séparateur + padding-bottom propres pour marquer la fin du bloc SEO,
       au lieu de compter uniquement sur le padding-top (trop grand) de .cta-final-inner */
    .cta-seo-block {
      font-size: 14.5px; color: var(--cta-muted); line-height: 1.7; max-width: 780px;
      padding: clamp(32px,4vw,44px) 0 clamp(24px,3vw,32px);
      border-bottom: 1px solid rgba(251,243,231,.14);
    }
    .cta-final-inner {
      display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
      gap: clamp(28px,4vw,48px); padding: clamp(32px,4vw,48px) 0 clamp(40px,5vw,64px);
    }
    .cta-final-copy { max-width: 480px; }
    .cta-final-copy .eyebrow { color: var(--cta-muted); }
    .cta-final-title { font-size: clamp(26px,3.4vw,38px); font-weight: 700; color: var(--cta-fg); margin-bottom: 14px; }
    .cta-final-sub { font-size: 14.5px; color: var(--cta-muted); line-height: 1.65; }
    /* ← FIX espacement: colonne dédiée avec bordure gauche en desktop (repère visuel clair
       face au bloc CTA), qui devient un séparateur horizontal quand elle passe sous le bloc
       CTA en mobile/étroit (voir media query plus bas) */
    .cta-final-locs {
      display: flex; gap: clamp(24px,3vw,40px); flex-wrap: wrap;
      padding-left: clamp(28px,4vw,48px); border-left: 1px solid rgba(251,243,231,.14);
    }
    .cta-loc-name {
      font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--cta-fg); margin-bottom: 6px;
    }
    .cta-loc-hours { font-family: var(--font-mono); font-size: 12px; color: var(--cta-muted); line-height: 1.6; }
    @media (max-width: 760px) {
      .cta-final-locs {
        padding-left: 0; border-left: none;
        padding-top: clamp(20px,3vw,28px); border-top: 1px solid rgba(251,243,231,.14);
        width: 100%;
      }
    }

    /* ── Formulaire de contact (section #contact) ────────────────────── */
    .cta-contact-form {
      margin-top: 0; padding-top: clamp(28px,3.5vw,40px);
      border-top: 1px solid rgba(251,243,231,.14); max-width: 560px;
    }
    .cta-contact-form-title {
      font-family: var(--font-display); color: var(--cta-fg);
      font-size: 22px; margin-bottom: 24px;
    }
    .cta-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 600px) { .cta-contact-row { grid-template-columns: 1fr; } }
    .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
    .field label {
      font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
      letter-spacing: .05em; color: var(--cta-muted);
    }
    .field input, .field textarea {
      font-family: var(--font-body); font-size: 15px; color: var(--fg);
      background: var(--surface); border: 1.5px solid transparent;
      border-radius: 14px; padding: 14px 16px; width: 100%;
      box-shadow: 0 1px 3px rgba(43,33,27,.14);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; }
    .field input:hover, .field textarea:hover { box-shadow: 0 2px 6px rgba(43,33,27,.18); }
    .field input:focus, .field textarea:focus {
      outline: none; border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 3px rgba(43,33,27,.14);
    }
    .field textarea { resize: vertical; min-height: 130px; }
    .cta-contact-form .btn { margin-top: 4px; }
    .field .errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: #ffb6a1; font-size: 12.5px; }
    .form-msg {
      border-radius: var(--radius-card); padding: 14px 18px; margin-bottom: 20px;
      font-size: 14.5px;
    }
    .form-msg.success { background: rgba(95,115,80,.18); border: 1px solid rgba(95,115,80,.4); color: #d7e3cf; }
    .form-msg.error { background: rgba(255,138,122,.16); border: 1px solid rgba(255,138,122,.4); color: #ffcfc4; }

    /* ← PROMPT 7: bandeau pré-footer ("Besoin d'imprimer plusieurs plans ?") */
    .prefooter-band { background: var(--bg2); padding: clamp(28px,3.5vw,40px) 0; text-align: center; }
    .prefooter-band strong {
      display: block; font-family: var(--font-head); font-size: 18px; color: var(--fg); margin-bottom: 6px;
    }
    .prefooter-band p { font-size: 14px; color: var(--muted); max-width: 560px; margin: 0 auto; }

    /* ══════════════════════════════════════════════════════════════
       FOOTER (DASHBOARD)
       Barra horizontal full-width: logo · segmentos de contacto · copyright right
    ══════════════════════════════════════════════════════════════ */
    .footer { background: var(--dark-bg); }
    /* ← FIX: colonne "marque" (logo + tagline) à gauche, colonnes de liens thématiques à
       droite ; séparateur horizontal avant le copyright */
    .footer-top {
      display: flex; flex-wrap: wrap; justify-content: space-between;
      gap: clamp(28px,4vw,56px); padding: clamp(32px,4vw,48px) 0 28px;
      border-bottom: 1px solid rgba(245,233,220,.12); margin-bottom: 18px;
    }
    .footer-brand { max-width: 320px; }
    .footer-logo-img { height: 34px; width: auto; display: block; margin-bottom: 14px; }
    .footer-tagline { font-size: 13px; color: var(--dark-muted); line-height: 1.65; }
    .footer-cols { display: flex; flex-wrap: wrap; gap: clamp(28px,4vw,56px); }
    .footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
    .footer-col-title {
      font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
      letter-spacing: .06em; color: var(--dark-fg); opacity: .8; margin-bottom: 2px;
    }
    .footer-col a, .footer-col span {
      font-family: var(--font-body); font-size: 13px; color: var(--dark-muted); text-decoration: none;
    }
    .footer-col a:hover { color: var(--dark-fg); }
    .footer-copyright { font-family: var(--font-mono); font-size: 11px; color: rgba(228,235,238,.35); padding-bottom: 28px; }

    /* ── RESPONSIVE ─────────────────────────────────────────────── */
    /* ← FIX: bascule vers le menu burger dès 1400px (pas seulement 900px) —
       en-dessous, logo + liens + locations + 2 boutons n'avaient pas assez de
       place (texte cassé ou chevauchant le logo) */
    @media (max-width: 1250px) {
      .nav-links, .nav-locations, .nav-boutique-btn { display: none; }
      .nav-burger { display: flex; }
    }
    @media (max-width: 900px) {
      /* ← FIX: hero avec photo de fond — sur mobile, scrim uniforme (le dégradé horizontal
         diagonal n'a plus de sens sur une colonne étroite) et hauteur mini réduite */
      .hero-bg-overlay { background: rgba(27,33,71,.74); }
      .hero-inner { min-height: 0; padding-top: clamp(64px,14vw,90px); }
      .hero-panel-badge { max-width: 100%; }
      .diff-grid { grid-template-columns: 1fr; }
      /* ← FIX: 4 tarjetas independientes → 2 columnas en tablette, 1 en mobile (≤600px) */
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      /* ← RE-SKIN: en mobile los círculos "semilla" se centran y reducen su tamaño para
         evitar solapamientos, en vez de apilarse en una lista con filete lateral */
      .apropos-stats { justify-content: center; }
      .apropos-stat:nth-child(1), .apropos-stat:nth-child(2),
      .apropos-stat:nth-child(3), .apropos-stat:nth-child(4),
      .apropos-stat:nth-child(5) { align-self: center; width: 118px; height: 118px; }
      .apropos-stat:nth-child(1) .apropos-stat-num, .apropos-stat:nth-child(2) .apropos-stat-num,
      .apropos-stat:nth-child(4) .apropos-stat-num { font-size: 26px; }
      .apropos-photos { grid-template-columns: 1fr; }
      .avis-grid { grid-template-columns: 1fr; }
      /* ← FIX: en mobile la lista y el panel de respuesta se apilan (ya no caben al lado) */
      .faq-layout { grid-template-columns: 1fr; }
      .faq-answer-panel { position: static; }
    }
    /* ← FIX: 1 seule colonne sous 600px (placé après le bloc ≤900px pour bien le
       remplacer en cascade — les deux media queries sont vraies en même temps ici) */
    @media (max-width: 600px) {
      .services-grid { grid-template-columns: 1fr; }
    }