/*
     * 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 Bricolage Grotesque (redondeada) en h1/h2/h3 + elementos numerados
     *   (process-num, formats-name, apropos-stat-num, raisons-num) — Nunito (sans redondeado)
     *   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;
      /* Bleu du logo — couleur de marque principale (boutons/liens), assombri depuis
         le bleu clair du pictogramme (#00AEEE) pour rester lisible en texte (AA) */
      --accent:       #006F9E;
      --accent-dk:    #00567D;
      --accent-soft:  rgba(0,111,158,.10);
      --accent-line:  rgba(0,111,158,.25);
      /* Salvia — deuxième accent décoratif (cercles de fond, détails) */
      --sage:         #4C8C6E;
      --sage-soft:    rgba(76,140,110,.14);
      /* Ambre — quatrième teinte douce (rotation de fonds de carte), même valeur que
         static/oscar_theme/styles.css */
      --amber:        #D98C2B;
      --amber-soft:   rgba(217,140,43,.14);
      /* Jaune du logo — troisième couleur de marque (CTA sur fond sombre/photo) */
      --yellow:       #F6EE31;
      --yellow-dk:    #E0D400;
      /* Rose du logo — deuxième couleur de marque (boutons secondaires), assombri
         légèrement depuis le rose du pictogramme (#EC008D) pour rester lisible en texte (AA) */
      --pink:         #D6017D;
      --pink-dk:      #BF016E;
      --pink-soft:    rgba(214,1,125,.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 dérivé de --accent/--accent-dk (au lieu du
         brun quasi noir précédent, qui détonnait avec le reste de la palette bleu/rose/
         jaune/sauge) */
      --dark-bg:      #0D2530;
      --dark-fg:      #EAF4F8;
      --dark-muted:   rgba(234,244,248,.82);
      /* CTA — dégradé bleu nuit (même famille que --dark-bg, légèrement plus clair pour
         se distinguer du footer) */
      --cta-bg:       #0F2A38;
      --cta-bg-2:     #164459;
      --cta-fg:       #F3FAFC;
      --cta-muted:    rgba(243,250,252,.92);
      /* Tipografía — display redondeada (Bricolage Grotesque) en h1/h2/h3 + elementos numerados,
         sans redondeado (Nunito) en el resto */
      --font-display: 'Bricolage Grotesque', 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; }
    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 (Bricolage Grotesque) 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; }
    /* Action principale — bleu du logo */
    .btn-primary  { background: var(--accent); color: #F2F6F8; }
    /* Action secondaire — rose du logo, contour à plat pour rester discret à côté du bleu */
    .btn-outline  { background: transparent; border: 1.5px solid var(--pink); color: var(--pink); }
    .btn-outline:hover { background: var(--pink); color: #fff; border-color: var(--pink); }
    /* Sur fond sombre/photo — jaune du logo, seule couleur à assez de contraste dessus */
    .btn-inv      { background: var(--yellow); color: var(--dark-bg); }
    .btn-inv:hover { background: var(--yellow-dk); }
    /* ← PROMPT 7: variante outline pour boutons secondaires sur fond sombre (CTA final) */
    .btn-ghost-inv { background: transparent; border: 1.5px solid rgba(214,1,125,.55); color: var(--cta-fg); }
    .btn-ghost-inv:hover { background: rgba(214,1,125,.16); border-color: var(--pink); }

    /* ══════════════════════════════════════════════════════════════
       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(--fg);
      white-space: nowrap;
    }
    .nav-right { display: flex; align-items: center; gap: 22px; }
    /* CTA du menu — rose du logo, pour se distinguer du bleu utilisé comme action
       principale ailleurs (panier, checkout, formulaires) */
    .nav-right .btn-primary { background: var(--pink); color: #fff; }
    .nav-right .btn-primary:hover { background: var(--pink-dk); }
    /* Même taille sur la boutique (styles.css) et le site vitrine (site.css) : le
       bouton prenait la taille de .btn propre à chaque feuille de style. */
    .nav-right .btn-help {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 26px;
      letter-spacing: 0; padding: 10px 17px; border: 1px solid var(--pink);
    }
    .btn-help-icon { display: none; }
    /* ← Sur mobile, le libellé complet ("Besoin d'aide ?") prend trop de place à côté
       du panier et du burger — le bouton devient un rond avec juste l'icône téléphone,
       comme le panier juste à côté. */
    @media (max-width: 600px) {
      .btn-help {
        width: 44px; height: 44px; padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex; align-items: center; justify-content: center;
      }
      .btn-help-text { display: none; }
      .btn-help-icon { display: block; }
    }
    .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
    ══════════════════════════════════════════════════════════════ */
    .hero { position: relative; overflow: hidden; background: var(--bg2); }
    /* ← RE-SKIN: deux colonnes pleine hauteur — texte à gauche, image à droite qui
       s'étire (align-items:stretch) sur toute la hauteur du bloc texte, au lieu d'un
       petit badge accolé au titre (voir .hero-media / .hero-panel-badge) */
    .hero-inner {
      position: relative; z-index: 2;
      max-width: var(--maxw); margin: 0 auto;
      padding: clamp(28px,3.5vw,40px) clamp(20px,4vw,48px) clamp(32px,4.5vw,52px);
      min-height: clamp(260px,30vw,360px);
      display: flex; align-items: stretch;
      gap: clamp(28px,4vw,48px); flex-wrap: wrap;
    }
    .hero-content {
      flex: 2.2 1 420px; max-width: 780px;
      display: flex; flex-direction: column; justify-content: center;
    }
    .hero-title {
      font-size: clamp(38px,5.5vw,58px);
      font-weight: 700; line-height: 1.08; letter-spacing: -.01em;
      color: var(--fg); margin-bottom: 22px;
    }
    .hero-title-accent { color: var(--accent); }
    .hero-sub {
      font-size: clamp(15px,1.6vw,17px); color: var(--muted);
      line-height: 1.65; max-width: 740px; 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(--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(--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;
    }
    /* ← RE-SKIN: colonne image à part entière, pleine largeur/hauteur de sa colonne
       (voir .hero-inner align-items:stretch) au lieu d'un petit badge à côté du titre */
    .hero-media {
      flex: 1 1 260px; max-width: 340px;
      display: flex;
    }
    .hero-panel-badge {
      position: relative; z-index: 2;
      width: 100%; height: 100%; min-height: 320px;
      object-fit: cover; display: block;
      border-radius: 14px; border: 1px solid var(--border);
      box-shadow: 0 6px 18px rgba(43,33,27,.18);
    }
    /* 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(--muted);
    }
    .hero-trust-item svg { flex: none; color: var(--accent); }

    /* ══════════════════════════════════════════════════════════════
       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 */
    .diff {
      background: var(--surface);
      position: relative; overflow: hidden;
    }
    .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);
      border-left: 4px solid transparent;
    }
    .diff-item:nth-child(1) { border-left-color: var(--accent); }
    .diff-item:nth-child(2) { border-left-color: var(--pink); }
    .diff-item:nth-child(3) { border-left-color: var(--yellow); }
    .diff-item:nth-child(4) { border-left-color: var(--sage); }
    .diff-item:nth-child(1) .diff-keyword { color: var(--accent); }
    .diff-item:nth-child(2) .diff-keyword { color: var(--pink); }
    /* Le jaune vif (#F6EE31) n'est pas assez contrasté pour du texte sur fond blanc —
       version dorée plus soutenue, mais toujours nettement plus "jaune" que l'ambre */
    .diff-item:nth-child(3) .diff-keyword { color: #B8860B; }
    .diff-item:nth-child(4) .diff-keyword { color: var(--sage); }
    .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-step { position: relative; }
    .process-icon-wrap { position: relative; width: 56px; height: 56px; margin-bottom: 16px; }
    .process-icon {
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--accent-soft); color: var(--accent);
      display: flex; align-items: center; justify-content: center;
    }
    .process-icon svg { width: 26px; height: 26px; }
    .process-num {
      position: absolute; right: -4px; bottom: -4px;
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--accent); color: #fff; border: 2px solid var(--surface);
      font-family: var(--font-display); font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .process-step:nth-child(2) .process-icon { background: var(--pink-soft); color: var(--pink); }
    .process-step:nth-child(2) .process-num { background: var(--pink); }
    .process-step:nth-child(3) .process-icon { background: var(--sage-soft); color: var(--sage); }
    .process-step:nth-child(3) .process-num { background: var(--sage); }
    .process-step:not(:last-child)::after {
      content: ""; position: absolute; top: 28px; left: 56px;
      width: calc(100% - 56px + clamp(24px,3vw,32px));
      border-top: 2px dashed var(--border-s);
    }
    .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; }
      .process-step:not(:last-child)::after { display: none; }
    }
    /* ← 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);
    }
    .services-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px,2vw,22px); margin-bottom: clamp(16px,2vw,22px);
    }
    .service-card {
      background: var(--surface); border: 1px solid var(--border);
      border-left: 4px solid var(--accent);
      padding: clamp(18px,2.2vw,24px);
      display: flex; flex-direction: column;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .service-card:hover { box-shadow: 0 6px 20px rgba(43,33,27,.08); }
    .services-grid .service-card:nth-child(2) { border-left-color: var(--pink); }
    .services-grid .service-card:nth-child(3) { border-left-color: var(--sage); }
    .service-thumb-wrap {
      background: var(--bg);
      padding: 18px; aspect-ratio: 1/1; margin-bottom: 16px;
      display: flex; align-items: center; justify-content: center;
    }
    /* ← XML: <assets><images> — thumbnail réel par service (aucun substitut générique) ;
       filtre "lavé" (.photo-washed, appliqué en HTML) ← RE-SKIN */
    .service-thumb {
      max-width: 100%; max-height: 100%; width: auto; height: auto;
      object-fit: contain; display: block;
    }
    .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; }
    .service-banner {
      display: flex; align-items: center; gap: clamp(16px,2.4vw,28px);
      background: var(--surface); border: 1px solid var(--border);
      border-left: 4px solid var(--amber);
      padding: clamp(20px,2.6vw,28px) clamp(22px,3vw,32px);
    }
    .service-banner-text { flex: 1; }
    .service-banner .service-desc { margin: 0; }
    .service-banner .btn { flex: none; }

    .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 20px 22px;
      background: var(--surface); border: 1px solid var(--border-s);
      border-radius: var(--radius-card);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .product_pod:hover {
      border-color: var(--accent-line, var(--accent));
      box-shadow: 0 6px 20px rgba(43,33,27,.08);
    }
    .product_pod .image_container {
      background: var(--bg); border-radius: calc(var(--radius-card) - 8px); padding: 18px;
      aspect-ratio: 1 / 1; 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: 14.5px; font-family: var(--font-body); font-weight: 600; line-height: 1.35; margin-top: 16px !important; }
    .product_pod h3 a { color: var(--fg); text-decoration: none; }
    .product_pod .product_price {
      position: static; float: none; bottom: auto;
      color: var(--accent-dk); font-weight: 600;
      margin-top: auto; padding-top: 14px;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
    }
    .product_pod .price_color {
      margin-top: 0; color: var(--accent-dk); font-family: var(--font-display); font-size: 19px; font-weight: 700;
    }
    .price_color_from {
      font-size: 11px; font-weight: 600; color: var(--muted);
      text-transform: uppercase; letter-spacing: .04em; margin-bottom: 0;
    }
    .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; margin-top: 2px;
    }
    /* ← "Boutique en ligne" — bannière CTA (pas de photo) : badge icône circulaire, CTA
       repris tel quel du bouton hero ("Imprimer mes plans" → #contact), aucun texte inventé */
    .service-icon-badge {
      width: 44px; height: 44px; border-radius: 50%; background: var(--amber-soft);
      display: flex; align-items: center; justify-content: center; flex: none;
    }
    .service-icon-badge svg { width: 20px; height: 20px; color: var(--amber); }

    /* ── "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='%23006F9E' 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; }
    }

    .usage-section { padding: clamp(28px,3.5vw,40px) 0; border-top: 1px solid var(--border); }
    .usage-section-inner { display: flex; align-items: flex-start; gap: clamp(20px,3vw,32px); }
    .usage-section-icon {
      width: 44px; height: 44px; border-radius: 50%; flex: none;
      display: flex; align-items: center; justify-content: center;
    }
    .usage-section-icon svg { width: 20px; height: 20px; }
    .usage-icon--accent { background: var(--accent-soft); color: var(--accent); }
    .usage-icon--pink { background: var(--pink-soft); color: var(--pink); }
    .usage-icon--sage { background: var(--sage-soft); color: var(--sage); }
    .usage-icon--amber { background: var(--amber-soft); color: var(--amber); }
    .usage-section-title {
      font-family: var(--font-head); font-size: clamp(18px,2vw,22px); font-weight: 700;
      color: var(--fg); margin-bottom: 8px;
    }
    .usage-section-desc { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 640px; margin-bottom: 16px; }
    @media (max-width: 600px) {
      .usage-section-inner { flex-direction: column; gap: 14px; }
    }

    .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 .btn-outline {
      background: transparent; border: 1.5px solid rgba(214,1,125,.55); color: var(--cta-fg);
    }
    .dark-band .btn-outline:hover { background: rgba(214,1,125,.16); border-color: var(--pink); color: #fff; }

    /* ══════════════════════════════════════════════════════════════
       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(--surface); }
    /* ← RE-SKIN: fila plate — icône fine, chiffre, libellé — séparée par des filets
       verticaux, plutôt que des cercles colorés (traitement plus sobre/éditorial) */
    .apropos-stats {
      display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;
      row-gap: clamp(24px,4vw,32px); margin-bottom: clamp(40px,5vw,56px);
    }
    .apropos-stat {
      flex: 1 1 150px; display: flex; flex-direction: column; align-items: flex-start;
      text-align: left; padding: 0 clamp(20px,3vw,32px);
      border-left: 1px solid var(--border-s);
    }
    .apropos-stat:first-child { padding-left: 0; border-left: none; }
    .apropos-stat-icon {
      font-size: 20px; color: var(--muted); margin-bottom: 16px;
    }
    .apropos-stat-num {
      font-family: var(--font-display); font-weight: 700; line-height: 1;
      font-size: clamp(30px,3.6vw,40px); margin-bottom: 10px; color: var(--fg);
    }
    .apropos-stat-label {
      font-family: var(--font-body); font-size: 13px; font-weight: 500;
      letter-spacing: .01em; line-height: 1.35; color: var(--muted);
    }
    .apropos-stat:nth-child(1) .apropos-stat-num { color: var(--accent); }
    .apropos-stat:nth-child(2) .apropos-stat-num { color: var(--pink); }
    .apropos-stat:nth-child(3) .apropos-stat-num { color: #B8860B; }
    .apropos-stat:nth-child(4) .apropos-stat-num { color: var(--sage); }
    .apropos-text {
      max-width: 680px; font-size: 15.5px; color: var(--muted); line-height: 1.75;
    }
    .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);
      border-left: 4px solid transparent;
      padding: clamp(20px,2.4vw,26px);
    }
    .raisons-item:nth-child(1) { border-left-color: var(--accent); }
    .raisons-item:nth-child(2) { border-left-color: var(--pink); }
    .raisons-item:nth-child(3) { border-left-color: var(--sage); }
    .raisons-item:nth-child(4) { border-left-color: var(--amber); }
    .raisons-item:nth-child(5) { border-left-color: var(--accent-dk); }
    .raisons-item:nth-child(6) { border-left-color: var(--pink-dk); }
    .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)
       Accordéon standard : liste à une colonne, chaque réponse s'affiche
       directement sous sa question (pas de card, un simple filet
       border-bottom sépare les entrées).
    ══════════════════════════════════════════════════════════════ */
    .faq { background: var(--bg); }
    .faq-list {
      max-width: 800px; margin: clamp(28px,3.5vw,40px) auto 0;
      border-top: 1px solid var(--border-s);
    }
    .faq-item { border-bottom: 1px solid var(--border-s); }
    .faq-q {
      width: 100%; background: none; border: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
      padding: 20px 4px;
      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-a {
      max-height: 0; overflow: hidden; padding: 0 4px;
      font-size: 14.5px; color: var(--muted); line-height: 1.7;
      transition: max-height .3s ease, padding .3s ease, opacity .25s ease;
      opacity: 0;
    }
    .faq-a p { margin: 0 0 20px; }
    .faq-item.open .faq-a { max-height: 400px; opacity: 1; }

    /* ══════════════════════════════════════════════════════════════
       SECCIÓN 8 — CTA FINAL + CONTACTO (DASHBOARD)
       Barra full-width — 2 ubicaciones + horaires (teléfono/email ausentes)
    ══════════════════════════════════════════════════════════════ */
    .cta-final {
      background: var(--bg2);
      padding-bottom: clamp(48px,6vw,72px);
    }
    /* ← PROMPT 7: "Dernier bloc SEO" — paragraphe avant la barre CTA elle-même */
    .cta-seo-block {
      font-size: 14.5px; color: var(--muted); line-height: 1.7; max-width: 780px;
      padding: clamp(32px,4vw,44px) 0 clamp(24px,3vw,32px);
      border-bottom: 1px solid var(--border);
    }
    .cta-final-inner {
      display: grid; grid-template-columns: minmax(0,460px) minmax(0,480px);
      justify-content: space-between; align-items: start;
      gap: clamp(32px,4vw,64px); padding: clamp(32px,4vw,48px) 0 clamp(40px,5vw,64px);
    }
    .cta-final-text { display: flex; flex-direction: column; gap: clamp(24px,3vw,32px); }
    .cta-final-title { font-size: clamp(26px,3.4vw,38px); font-weight: 700; color: var(--fg); margin-bottom: 14px; }
    .cta-final-sub { font-size: 14.5px; color: var(--muted); line-height: 1.65; }
    .cta-final-locs {
      display: flex; gap: clamp(24px,3vw,40px); flex-wrap: wrap;
      padding-top: clamp(20px,3vw,28px); border-top: 1px solid var(--border);
    }
    .cta-loc-name {
      font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--fg); margin-bottom: 6px;
    }
    .cta-loc-hours { font-family: var(--font-mono); font-size: 12px; color: var(--muted); line-height: 1.6; }
    @media (max-width: 900px) {
      .cta-final-inner { grid-template-columns: 1fr; }
    }

    /* ── Formulaire de contact (section #contact) ────────────────────── */
    .cta-contact-form {
      padding: clamp(24px,3vw,32px);
      background: var(--surface); border: 1px solid var(--border-s);
      border-radius: var(--radius-card);
      box-shadow: 0 10px 28px rgba(43,33,27,.12);
    }
    @media (max-width: 900px) {
      .cta-contact-form { max-width: 560px; }
    }
    .cta-contact-form-title {
      font-family: var(--font-display); color: var(--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; } }
    /* Page contact (website/contact.html) — formulaire + infos ateliers, deux
       colonnes en desktop, empilées sous 900px (même seuil que .cta-final-inner
       et .assist-inner) au lieu d'un style inline sans repli mobile. */
    .contact-layout {
      display: grid; grid-template-columns: 1.1fr .9fr;
      gap: clamp(36px,5vw,64px); align-items: start;
    }
    @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
    .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
    /* Page devis (website/templates/website/devis.html) : les champs
       "option_group_<pk>" (papier, plastification...) sur une même ligne
       plutôt qu'empilés chacun sur toute la largeur — même motif que
       .cta-contact-row (Nom/Email), repli en colonne sous 600px. */
    .field-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 22px; }
    .field-row .field-compact { flex: 1 1 220px; margin-bottom: 0; }
    @media (max-width: 600px) { .field-row { flex-direction: column; } }
    /* Un champ à choix unique (ex: Plastification) n'a pas de libellé
       propre — <label for=""></label> vide (voir basket.forms.
       configuration_extra_fields, field_kwargs["label"] = "") — qui
       s'effondre à hauteur nulle au lieu de réserver la même hauteur que
       le libellé texte du champ voisin ("PAPIER"), décalant sa case à
       cocher vers le haut par rapport au menu déroulant à côté. */
    .field label:empty::before { content: "\00a0"; }
    .field label {
      font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
      letter-spacing: .05em; color: var(--muted);
    }
    .field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select {
      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 select {
      appearance: none; -webkit-appearance: none; -moz-appearance: none;
      cursor: pointer; padding-right: 40px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B5B4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 16px center;
    }
    .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; }
    .field input:not([type="checkbox"]):not([type="radio"]):hover, .field textarea:hover, .field select:hover { box-shadow: 0 2px 6px rgba(43,33,27,.18); }
    .field input:not([type="checkbox"]):not([type="radio"]):focus, .field textarea:focus, .field select: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; }
    /* Cases à cocher des options facturables (ex: Plastification, Reliure —
       voir basket.forms.configuration_extra_fields ; un seul choix dans un
       groupe rend une CheckboxSelectMultiple plutôt qu'un menu déroulant,
       et "Reliure" est une simple BooleanField) : rendu natif compact avec
       son intitulé à côté, pas le style plein largeur des autres champs
       (ci-dessus, exclu via :not([type=...])). Le sélecteur couvre à la
       fois la case nichée dans un groupe d'options (div[id^="id_option_
       group_"], libellé vide porté par la case elle-même) et une case
       "nue" directement dans .field (ex: "Reliure", avec son propre
       libellé texte au-dessus comme les autres champs). */
    .field div[id^="id_option_group_"] label {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-body); font-size: 14px; font-weight: 600;
      text-transform: none; letter-spacing: normal; color: var(--fg);
      cursor: pointer;
    }
    .field input[type="checkbox"], .field input[type="radio"] {
      width: 16px; height: 16px; margin: 0; accent-color: var(--accent);
      cursor: pointer; flex: none;
    }
    .cta-contact-form .btn { margin-top: 4px; }
    .field .errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: #C0392B; font-size: 12.5px; }
    /* Honeypot anti-spam (website.captcha.HoneypotCaptchaMixin) — masqué visuellement
       et pour les lecteurs d'écran, laissé dans le flux du DOM pour que les bots qui
       remplissent tous les champs le renseignent quand même. */
    .captcha-honeypot-field {
      position: absolute !important; left: -9999px; width: 1px; height: 1px;
      overflow: hidden; margin: 0;
    }
    .form-msg {
      border-radius: var(--radius-card); padding: 14px 18px; margin-bottom: 20px;
      font-size: 14.5px;
    }
    .form-msg.success { background: var(--sage-soft); border: 1px solid rgba(76,140,110,.4); color: #2F5943; }
    .form-msg.error { background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.35); color: #A5352A; }

    /* ══════════════════════════════════════════════════════════════
       PAGE ASSISTANCE — bandeau "disponibilité téléphonique"
       Texte à gauche, photo à droite (même schéma que .hero-media),
       pleine hauteur de la colonne texte. */
    .assist-band { background: var(--surface); }
    .assist-inner {
      display: flex; align-items: stretch; flex-wrap: wrap;
      gap: clamp(28px,4vw,48px);
    }
    .assist-content {
      flex: 1 1 380px; max-width: 480px;
      display: flex; flex-direction: column; justify-content: center;
    }
    .assist-title { margin-bottom: 14px; }
    .assist-text { color: var(--muted); font-size: 15px; line-height: 1.65; }
    .assist-call-btn { margin-top: 22px; }
    .assist-media { flex: 1 1 320px; max-width: 400px; display: flex; }
    /* ← Emplacement photo (ex: "epicopi_assistance_conseillere.jpg") — aucune photo
       fournie dans le brief, ce panneau reste en état "à compléter" tant que le
       client n'a pas transmis d'image (voir commentaire dans assistance.html). */
    .assist-photo-placeholder {
      width: 100%; min-height: 280px; border-radius: var(--radius-card);
      border: 1px solid var(--border-s); background: var(--surface2);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; padding: 24px; text-align: center; color: var(--muted);
    }
    .assist-photo-placeholder svg { color: var(--accent); }
    .assist-photo-placeholder span { font-size: 13px; }
    @media (max-width: 760px) { .assist-media { max-width: none; } }

    /* ← 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(--surface); border-top: 1px solid var(--border-s); }
    .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 var(--border); 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(--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(--fg); opacity: .7; margin-bottom: 2px;
    }
    .footer-col a, .footer-col span {
      font-family: var(--font-body); font-size: 13px; color: var(--muted); text-decoration: none;
    }
    .footer-col a:hover { color: var(--accent-dk); }
    .footer-copyright { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: .7; padding-bottom: 28px; }

    /* ── RESPONSIVE ─────────────────────────────────────────────── */
    @media (max-width: 1250px) {
      .nav-links, .nav-locations, .nav-boutique-btn { display: none; }
      .nav-burger { display: flex; }
    }
    @media (max-width: 900px) {
      .hero-inner { min-height: 0; padding-top: clamp(64px,14vw,90px); }
      .hero-panel-badge { max-width: 100%; }
      .diff-grid { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .service-banner { flex-wrap: wrap; }
      /* ← en mobile, 2 par ligne : les filets verticaux ne s'appliquent qu'aux paires */
      .apropos-stat { flex: 1 1 45%; border-left: none; padding: 0; }
      .apropos-stat:nth-child(2n) { padding-left: clamp(20px,4vw,28px); border-left: 1px solid var(--border-s); }
      .apropos-photos { grid-template-columns: 1fr; }
      .avis-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .services-grid { grid-template-columns: 1fr; }
    }

    /* ── Bannière cookies (website/components/cookie_bar.html, django-cookie-
       consent) — dupliquée dans oscar_theme/styles.css : la boutique ne
       charge pas cette feuille (même pattern que .mini-basket-btn). */
    .cookie-bar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
      background: var(--surface); border-top: 1px solid var(--border-s);
      box-shadow: 0 -6px 20px rgba(43,33,27,.12);
    }
    .cookie-bar-inner {
      max-width: var(--maxw); margin: 0 auto;
      padding: 18px clamp(20px,4vw,48px);
      display: flex; align-items: center; justify-content: space-between;
      gap: 20px; flex-wrap: wrap;
    }
    .cookie-bar-text { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; flex: 1 1 320px; }
    .cookie-bar-text a { color: var(--accent-dk); text-decoration: underline; }
    .cookie-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
    @media (max-width: 600px) {
      .cookie-bar-inner { flex-direction: column; align-items: stretch; }
      .cookie-bar-actions .btn { flex: 1; justify-content: center; }
    }

    /* ── Page "Préférences cookies" (templates/cookie_consent/*.html) —
       une carte par catégorie, même langage que .service-card/.diff-item
       (liseré de couleur à gauche, coins droits). */
    .cookie-group-card {
      background: var(--surface); border: 1px solid var(--border);
      border-left: 4px solid var(--accent);
      padding: clamp(20px,2.6vw,26px); margin-bottom: 20px;
    }
    .cookie-group-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 20px; flex-wrap: wrap; margin-bottom: 14px;
    }
    .cookie-group-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--fg); margin-bottom: 6px; }
    .cookie-group-desc { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
    .cookie-group-actions { display: flex; gap: 10px; flex: none; }
    .cookie-group-actions form { margin: 0; }
    .cookie-group-badge {
      display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
      border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700;
      font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
      white-space: nowrap;
    }
    .cookie-group-badge-required { background: var(--bg2); color: var(--muted); }
    .cookie-group-badge-accepted { background: var(--sage-soft); color: var(--sage); }
    .cookie-group-badge-declined { background: rgba(192,57,43,.1); color: #A5352A; }
    .cookie-group-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .cookie-group-table tr { border-top: 1px solid var(--border); }
    .cookie-group-table th, .cookie-group-table td { text-align: left; padding: 10px 0; font-weight: 600; color: var(--fg); vertical-align: top; }
    .cookie-group-table td { font-weight: 400; color: var(--muted); padding-left: 16px; }
    .cookie-group-domain { color: var(--muted); font-weight: 400; }
    @media (max-width: 600px) {
      .cookie-group-header { flex-direction: column; }
      .cookie-group-table th, .cookie-group-table td { display: block; padding: 2px 0; }
    }