/* Feuille de style partagée Jercat — à utiliser par toutes les nouvelles pages */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0a0a08;
      --surface: #111110;
      --card: #141412;
      --gold: #c9a84c;
      --gold-light: #e8c97a;
      --gold-dark: #8b6914;
      --text: #f0e6d0;
      --muted: #8a7d65;
      --border: rgba(201,168,76,0.2);
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      overflow-x: hidden;
    }

    /* Gold divider ornament */
    .ornament {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin: 20px 0;
      color: var(--gold);
      font-size: 10px;
      letter-spacing: 0.3em;
    }
    .ornament::before, .ornament::after {
      content: '';
      height: 1px;
      width: 60px;
      background: linear-gradient(90deg, transparent, var(--gold));
    }
    .ornament::after { background: linear-gradient(90deg, var(--gold), transparent); }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 80px 40px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,168,76,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(201,168,76,0.04) 0%, transparent 60%);
    }


    .hero-tag {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.4em;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 40px;
      opacity: 0;
      animation: fadeUp 1s 0.2s forwards;
    }

    h1 {
      font-family: 'Cinzel', serif;
      font-size: clamp(52px, 8vw, 110px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.05em;
      color: var(--text);
      opacity: 0;
      animation: fadeUp 1s 0.4s forwards;
    }
    h1 em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 1.15em;
      color: var(--gold);
      display: block;
      line-height: 1;
    }

    .hero-sub {
      margin-top: 32px;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 20px;
      color: var(--muted);
      max-width: 520px;
      line-height: 1.7;
      opacity: 0;
      animation: fadeUp 1s 0.6s forwards;
    }

    .hero-actions {
      margin-top: 52px;
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 1s 0.8s forwards;
    }

    .btn-gold {
      padding: 16px 40px;
      background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light), var(--gold));
      background-size: 200% 200%;
      color: #0a0a08;
      font-family: 'Cinzel', serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: background-position 0.4s, transform 0.2s, box-shadow 0.3s;
      box-shadow: 0 4px 20px rgba(201,168,76,0.2);
    }
    .btn-gold:hover {
      background-position: right center;
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(201,168,76,0.35);
    }

    .btn-outline-gold {
      padding: 15px 40px;
      border: 1px solid var(--gold);
      color: var(--gold);
      font-family: 'Cinzel', serif;
      font-size: 11px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.3s, color 0.3s, transform 0.2s;
    }
    .btn-outline-gold:hover {
      background: rgba(201,168,76,0.08);
      transform: translateY(-2px);
    }

    /* ── STATS ── */
    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .stat-item {
      padding: 48px 40px;
      text-align: center;
      border-right: 1px solid var(--border);
    }
    .stat-item:last-child { border-right: none; }
    .stat-num {
      font-family: 'Cinzel', serif;
      font-size: 52px;
      color: var(--gold);
      line-height: 1;
    }
    .stat-label {
      margin-top: 10px;
      font-size: 11px;
      letter-spacing: 0.2em;
      color: var(--muted);
      text-transform: uppercase;
      font-family: 'Cinzel', serif;
    }

    /* ── SECTION COMMONS ── */
    .section { padding: 100px 80px; }
    .section-tag {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.4em;
      color: var(--gold);
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 16px;
    }
    .section-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(36px, 4vw, 64px);
      font-weight: 700;
      text-align: center;
      line-height: 1.1;
      margin-bottom: 12px;
    }
    .section-title em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      color: var(--gold);
    }
    .section-intro {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 18px;
      color: var(--muted);
      text-align: center;
      max-width: 560px;
      margin: 0 auto 60px;
      line-height: 1.7;
    }

    /* ── AVANTAGES — cartes 3D ── */
    .avantages { background: var(--surface); }

    .avantages-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      perspective: 1000px;
    }

    .card-3d {
      position: relative;
      background: var(--card);
      border: 1px solid var(--border);
      padding: 44px 32px;
      transform-style: preserve-3d;
      transition: transform 0.15s ease, box-shadow 0.3s;
      cursor: default;
    }
    .card-3d::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(201,168,76,0.06) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .card-3d:hover::before { opacity: 1; }
    .card-3d:hover {
      box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(201,168,76,0.08);
    }
    .card-3d::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .card-3d:hover::after { opacity: 1; }

    .card-icon {
      font-size: 28px;
      margin-bottom: 20px;
      display: block;
    }
    .card-num {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.3em;
      color: var(--gold-dark);
      margin-bottom: 16px;
    }
    .card-title {
      font-family: 'Cinzel', serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--gold-light);
      margin-bottom: 16px;
    }
    .card-desc {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.8;
      font-weight: 300;
    }

    /* ── SERVICES ── */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      perspective: 1000px;
    }

    /* ── PROCESS ── */
    .process { background: var(--surface); }
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      margin-top: 60px;
    }
    .step {
      text-align: center;
      padding-top: 32px;
      border-top: 1px solid var(--border);
      position: relative;
    }
    .step:hover { border-top-color: var(--gold); }
    .step-num {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 72px;
      color: rgba(201,168,76,0.08);
      line-height: 1;
      margin-bottom: -8px;
    }
    .step-title {
      font-family: 'Cinzel', serif;
      font-size: 14px;
      letter-spacing: 0.1em;
      margin-bottom: 12px;
      color: var(--gold-light);
    }
    .step-desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.8;
    }

    /* ── DÉMO VIDÉO ── */
    .video-demo {
      padding: 100px 80px;
      background: var(--bg);
      border-top: 1px solid var(--border);
      text-align: center;
    }
    .video-wrapper {
      max-width: 900px;
      margin: 0 auto;
      position: relative;
    }
    .video-wrapper video {
      width: 100%;
      border: 1px solid var(--border);
      display: block;
      background: #000;
    }
    .video-wrapper::before {
      content: '';
      position: absolute;
      inset: -1px;
      background: linear-gradient(135deg, var(--gold-dark), transparent 50%, var(--gold-dark));
      z-index: -1;
      opacity: 0.4;
      pointer-events: none;
    }
    @media (max-width: 768px) {
      .video-demo { padding: 60px 24px; }
    }

    /* ── TECH ── */
    .stack { padding: 60px 80px; border-top: 1px solid var(--border); }
    .stack-label {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.3em;
      color: var(--muted);
      text-transform: uppercase;
      margin-bottom: 28px;
      text-align: center;
    }
    .tech-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .tech-pill {
      padding: 8px 20px;
      border: 1px solid var(--border);
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.15em;
      color: var(--muted);
      text-transform: uppercase;
      transition: border-color 0.2s, color 0.2s;
    }
    .tech-pill:hover { border-color: var(--gold); color: var(--gold); }

    /* ── CTA ── */
    .cta {
      padding: 120px 80px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201,168,76,0.05) 0%, transparent 70%);
    }
    .cta h2 {
      font-family: 'Cinzel', serif;
      font-size: clamp(40px, 5vw, 80px);
      font-weight: 700;
      margin-bottom: 16px;
      position: relative;
    }
    .cta h2 em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      color: var(--gold);
      display: block;
    }
    .cta p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 20px;
      color: var(--muted);
      max-width: 480px;
      margin: 0 auto 48px;
      line-height: 1.7;
      position: relative;
    }
    .contact-row {
      margin-top: 32px;
      display: flex;
      justify-content: center;
      gap: 16px;
      font-family: 'Cinzel', serif;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--muted);
      flex-wrap: wrap;
      position: relative;
    }
    .contact-row a { color: var(--gold); text-decoration: none; }
    .contact-row a:hover { color: var(--gold-light); }
    .sep { color: var(--border); }

    /* ── FOOTER ── */
    footer {
      padding: 32px 80px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--surface);
    }
    .footer-logo {
      font-family: 'Cinzel', serif;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: var(--gold);
    }
    .footer-copy {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.15em;
      color: var(--muted);
      text-transform: uppercase;
    }

    /* ── GÉNÉRATEUR DE PUB ── */
    .gen-pub {
      padding: 100px 80px;
      background: var(--bg);
      border-top: 1px solid var(--border);
    }
    .gen-pub-inner {
      max-width: 800px;
      margin: 0 auto;
    }
    .api-key-block {
      background: var(--card);
      border: 1px solid var(--border);
      padding: 24px 28px;
      margin-bottom: 36px;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .api-key-block label {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.25em;
      color: var(--gold);
      text-transform: uppercase;
      white-space: nowrap;
    }
    .api-key-input {
      flex: 1;
      min-width: 220px;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      padding: 10px 16px;
      outline: none;
      transition: border-color 0.2s;
    }
    .api-key-input::placeholder { color: var(--muted); opacity: 0.6; }
    .api-key-input:focus { border-color: var(--gold); }
    .api-key-save {
      padding: 10px 22px;
      background: transparent;
      border: 1px solid var(--gold);
      color: var(--gold);
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.2em;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      white-space: nowrap;
    }
    .api-key-save:hover { background: rgba(201,168,76,0.1); }
    .api-key-status {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 13px;
      color: var(--muted);
      width: 100%;
    }
    .api-key-status.ok { color: #6dbf82; }
    .api-key-status.err { color: #e07070; }

    .gen-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    .gen-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .gen-field label {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.25em;
      color: var(--gold);
      text-transform: uppercase;
    }
    .gen-field input,
    .gen-field select,
    .gen-field textarea {
      background: var(--card);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      padding: 12px 16px;
      outline: none;
      transition: border-color 0.2s;
      resize: vertical;
    }
    .gen-field input::placeholder,
    .gen-field textarea::placeholder { color: var(--muted); opacity: 0.6; }
    .gen-field input:focus,
    .gen-field select:focus,
    .gen-field textarea:focus { border-color: var(--gold); }
    .gen-field select option { background: var(--card); }
    .gen-field-full { grid-column: 1 / -1; }

    .gen-btn {
      width: 100%;
      padding: 18px;
      background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light), var(--gold));
      background-size: 200% 200%;
      color: #0a0a08;
      font-family: 'Cinzel', serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: background-position 0.4s, transform 0.2s, box-shadow 0.3s;
      box-shadow: 0 4px 20px rgba(201,168,76,0.2);
      margin-top: 8px;
    }
    .gen-btn:hover:not(:disabled) {
      background-position: right center;
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(201,168,76,0.35);
    }
    .gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    .gen-result {
      margin-top: 32px;
      display: none;
    }
    .gen-result.visible { display: block; }
    .gen-result-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .gen-result-label {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.3em;
      color: var(--gold);
      text-transform: uppercase;
    }
    .gen-copy-btn {
      padding: 7px 18px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      font-family: 'Cinzel', serif;
      font-size: 9px;
      letter-spacing: 0.2em;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
    }
    .gen-copy-btn:hover { border-color: var(--gold); color: var(--gold); }
    .gen-output {
      background: var(--card);
      border: 1px solid var(--border);
      padding: 28px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 17px;
      line-height: 1.9;
      color: var(--text);
      white-space: pre-wrap;
      position: relative;
    }
    .gen-output::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    .gen-loading {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 16px;
    }
    .gen-spinner {
      width: 16px; height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .gen-fb-guide {
      margin-top: 24px;
      border: 1px solid var(--border);
      background: rgba(201,168,76,0.04);
    }
    .gen-fb-actions {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
    }
    .gen-fb-step-btn {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 24px;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
      border-right: 1px solid var(--border);
    }
    .gen-fb-step-btn:last-child { border-right: none; }
    .gen-fb-step-btn:hover { background: rgba(201,168,76,0.08); }
    .step-num {
      font-family: 'Cinzel', serif;
      font-size: 36px;
      font-weight: 700;
      color: var(--gold);
      line-height: 1;
      flex-shrink: 0;
    }
    .step-label {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.15em;
      color: var(--text);
      text-align: left;
      text-transform: uppercase;
      line-height: 1.6;
    }
    .step2 .step-num { color: #1877F2; }
    .gen-fb-steps {
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .gen-fb-step-item {
      font-family: 'Cormorant Garamond', serif;
      font-size: 15px;
      color: var(--muted);
      line-height: 1.6;
    }
    .gen-fb-step-num {
      color: var(--gold);
      font-weight: 600;
    }
    .gen-fb-step-item strong { color: var(--text); }
    .gen-fb-btn {
      padding: 7px 18px;
      background: #1877F2;
      border: none;
      color: #fff;
      font-family: 'Cinzel', serif;
      font-size: 9px;
      letter-spacing: 0.15em;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      font-weight: 600;
    }
    .gen-fb-btn:hover { background: #1464d4; transform: translateY(-1px); }

    @media (max-width: 900px) {
      .gen-pub { padding: 70px 28px; }
      .gen-fields { grid-template-columns: 1fr; }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 900px) {
      .stats { grid-template-columns: 1fr; }
      .avantages-grid, .services-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: repeat(2, 1fr); }
      .section, .cta { padding: 70px 28px; }
      .stack, footer { padding: 50px 28px; }
    }
    /* ── FORMULAIRE DEVIS ── */
    .devis-section {
      padding: 100px 80px;
      background: var(--surface);
    }
    .devis-form {
      max-width: 680px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .form-details {
      border: 1px solid var(--border);
      padding: 0;
    }
    .form-details[open] { padding-bottom: 20px; }
    .form-details-toggle {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.2em;
      color: var(--gold);
      text-transform: uppercase;
      cursor: pointer;
      padding: 14px 18px;
      list-style: none;
      user-select: none;
      transition: background 0.2s;
    }
    .form-details-toggle:hover { background: rgba(201,168,76,0.05); }
    .form-details-toggle::-webkit-details-marker { display: none; }
    .form-details-body {
      padding: 16px 18px 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .form-group label {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 0.25em;
      color: var(--gold);
      text-transform: uppercase;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      background: var(--card);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      padding: 14px 18px;
      outline: none;
      transition: border-color 0.3s, box-shadow 0.3s;
      width: 100%;
      appearance: none;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: var(--muted);
      font-style: italic;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 2px rgba(201,168,76,0.1);
    }
    .form-group select option { background: var(--card); color: var(--text); }
    .form-group textarea { resize: vertical; min-height: 130px; }
    .form-submit {
      text-align: center;
      margin-top: 10px;
    }
    .form-notice {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 14px;
      color: var(--muted);
      text-align: center;
      margin-top: 12px;
    }
    .form-success {
      display: none;
      text-align: center;
      padding: 32px;
      border: 1px solid var(--gold);
      background: rgba(201,168,76,0.05);
    }
    .form-success .success-icon { font-size: 40px; margin-bottom: 16px; }
    .form-success h3 {
      font-family: 'Cinzel', serif;
      font-size: 18px;
      color: var(--gold);
      margin-bottom: 10px;
    }
    .form-success p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      color: var(--muted);
      font-size: 16px;
    }
    @media (max-width: 600px) {
      .form-row { grid-template-columns: 1fr; }
      .devis-section { padding: 70px 24px; }
    }
    /* ── TARIFS ── */
    .tarifs { padding: 100px 80px; background: var(--bg); }
    .tarifs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; perspective: 1000px; }
    .tarif-card { background: var(--card); border: 1px solid var(--border); padding: 44px 32px; text-align: center; position: relative; transition: transform 0.3s, box-shadow 0.3s; }
    .tarif-card.featured { border-color: var(--gold); box-shadow: 0 0 40px rgba(201,168,76,0.12); }
    .tarif-card.featured::before { content: '⭐ POPULAIRE'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #0a0a08; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.2em; padding: 4px 16px; }
    .tarif-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
    .tarif-name { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; margin-bottom: 20px; }
    .tarif-price { font-family: 'Cormorant Garamond', serif; font-size: 68px; color: var(--gold); line-height: 1; font-weight: 300; }
    .tarif-price span { font-size: 24px; vertical-align: super; }
    .tarif-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: var(--muted); margin: 12px 0 28px; }
    .tarif-features { list-style: none; text-align: left; margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
    .tarif-features li { font-size: 13px; color: var(--text); display: flex; gap: 10px; align-items: flex-start; }
    .tarif-features li::before { content: '✦'; color: var(--gold); font-size: 10px; margin-top: 2px; flex-shrink: 0; }

    /* ── TÉMOIGNAGES ── */
    .temoignages { padding: 100px 80px; background: var(--surface); }
    .temoignages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .temo-card { background: var(--card); border: 1px solid var(--border); padding: 36px 28px; position: relative; }
    .temo-card::before { content: '"'; font-family: 'Cormorant Garamond', serif; font-size: 80px; color: rgba(201,168,76,0.12); position: absolute; top: 10px; left: 20px; line-height: 1; }
    .temo-stars { color: var(--gold); font-size: 14px; margin-bottom: 16px; letter-spacing: 3px; }
    .temo-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; color: var(--text); line-height: 1.8; margin-bottom: 24px; position: relative; z-index: 1; }
    .temo-author { display: flex; align-items: center; gap: 14px; }
    .temo-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-dark), var(--gold)); display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 16px; color: #0a0a08; font-weight: 700; flex-shrink: 0; }
    .temo-name { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.1em; color: var(--gold-light); }
    .temo-job { font-size: 11px; color: var(--muted); margin-top: 2px; }

    /* ── GARANTIES ── */
    .garanties { padding: 80px; border-top: 1px solid var(--border); background: var(--bg); }
    .garanties-row { display: flex; gap: 0; flex-wrap: wrap; justify-content: center; }
    .garantie-item { flex: 1; min-width: 180px; text-align: center; padding: 40px 24px; border-right: 1px solid var(--border); }
    .garantie-item:last-child { border-right: none; }
    .garantie-icon { font-size: 36px; margin-bottom: 14px; }
    .garantie-title { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.15em; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
    .garantie-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }

    /* ── LEGAL ── */
    .legal-bar { background: var(--surface); border-top: 1px solid var(--border); padding: 16px 80px; text-align: center; font-size: 11px; color: var(--muted); font-family: 'DM Sans', sans-serif; line-height: 1.8; }
    .legal-bar a { color: var(--gold); text-decoration: none; margin: 0 8px; }
    .legal-bar a:hover { text-decoration: underline; }
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9000; align-items: center; justify-content: center; padding: 20px; }
    .modal-overlay.open { display: flex; }
    .modal-box { background: var(--surface); border: 1px solid var(--border); max-width: 640px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 48px; position: relative; }
    .modal-box h3 { font-family: 'Cinzel', serif; font-size: 20px; color: var(--gold); margin-bottom: 24px; }
    .modal-box p, .modal-box li { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 12px; }
    .modal-box strong { color: var(--text); }
    .modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: var(--muted); font-size: 24px; cursor: pointer; }

    /* ── PORTFOLIO ── */
    .portfolio { padding: 100px 80px; background: var(--bg); }
    .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 0; }
    .portfolio-card {
      position: relative; overflow: hidden;
      border: 1px solid var(--border); background: var(--card);
      transition: transform 0.3s, box-shadow 0.3s;
      text-decoration: none; display: block;
    }
    .portfolio-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
    .portfolio-img-wrap { position: relative; overflow: hidden; height: 200px; }
    .portfolio-img-wrap iframe {
      width: 170%; height: 170%;
      transform: scale(0.59) translate(-25%, -25%);
      border: none; pointer-events: none;
    }
    .portfolio-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(10,10,8,0.95) 100%);
      opacity: 0; transition: opacity 0.3s;
    }
    .portfolio-card:hover .portfolio-overlay { opacity: 1; }
    .portfolio-visit {
      position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
      font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.25em;
      color: var(--gold); text-transform: uppercase; white-space: nowrap;
      opacity: 0; transition: opacity 0.3s;
    }
    .portfolio-card:hover .portfolio-visit { opacity: 1; }
    .portfolio-info { padding: 20px 22px; border-top: 1px solid var(--border); }
    .portfolio-title { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.1em; color: var(--gold-light); margin-bottom: 6px; }
    .portfolio-desc { font-size: 12px; color: var(--muted); font-family: 'DM Sans', sans-serif; line-height: 1.5; }
    .portfolio-tag { display: inline-block; margin-top: 10px; padding: 3px 10px; border: 1px solid var(--border); font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; }
    @media (max-width: 900px) { .portfolio-grid { grid-template-columns: 1fr; } .portfolio { padding: 70px 24px; } }


    /* ── AJOUTS SEO / CONVERSION (même charte) ── */
    h3.step-title, h3.portfolio-title, h3.tarif-name { font-weight: 400; }
    .card-cta {
      display: inline-block; margin-top: 18px;
      font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.25em;
      color: var(--gold); text-transform: uppercase; text-decoration: none;
      border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s;
      position: relative; z-index: 1;
    }
    .card-cta:hover { color: var(--gold-light); border-bottom-color: var(--gold); }
    .faq { padding: 100px 80px; background: var(--bg); border-top: 1px solid var(--border); }
    .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
    .faq-item { border: 1px solid var(--border); background: var(--card); transition: border-color 0.2s; }
    .faq-item[open] { border-color: var(--gold); }
    .faq-item summary {
      list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative;
      font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.06em; color: var(--gold-light); line-height: 1.5;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 18px; }
    .faq-item[open] summary::after { content: '−'; }
    .faq-item summary h3 { font: inherit; letter-spacing: inherit; color: inherit; display: inline; }
    .faq-answer { padding: 0 24px 22px; font-size: 14px; color: var(--muted); line-height: 1.8; font-weight: 300; }
    .faq-answer a, .section-intro a, .hero-sub a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.35); }
    .site-links { margin-top: 6px; }
    .site-links a { margin: 0 6px; }
    .cta-section { border-top: 1px solid var(--border); background: var(--surface); }
    .cta-section .btn-gold { position: relative; display: inline-block; }
    .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    @media (max-width: 900px) { .faq { padding: 70px 24px; } }

    @media (max-width: 900px) {
      .tarifs-grid, .temoignages-grid { grid-template-columns: 1fr; }
      .garanties-row { flex-direction: column; }
      .garantie-item { border-right: none; border-bottom: 1px solid var(--border); }
      .tarifs, .temoignages, .garanties { padding: 70px 24px; }
      .legal-bar { padding: 16px 24px; }
    }