/* ═══════════════════════════════════════════════════════
       POLICE "JUSTICE STORY" — À ACTIVER QUAND LE FICHIER EST PRÊT
       ───────────────────────────────────────────────────────
       1. Achète la licence commerciale sur Creative Fabrica
          (obligatoire pour un usage pro / site d'entreprise)
       2. Dépose le fichier .woff2 à côté de ce index.html,
          dans un dossier /fonts/justice-story.woff2
       3. Décommente le bloc @font-face ci-dessous
       4. Dans les tokens plus bas, remplace :
             --ff-heading: 'Baloo 2', ...
          par :
             --ff-heading: 'Justice Story', 'Baloo 2', ...
       En attendant, Baloo 2 (gratuite, Google Fonts) sert de
       remplaçante visuelle : ronde, épaisse, ludique — le même
       esprit que Justice Story tant que la vraie police n'est
       pas chargée.
    ═══════════════════════════════════════════════════════ */
    /*
    @font-face {
      font-family: 'Justice Story';
      src: url('fonts/justice-story.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    */

    /* ───────────────────────────────
       TOKENS
    ─────────────────────────────── */
    :root {
      --burgundy:   #620d14;
      --dark-wine:  #240902;
      --cream:      #e0ddd2;
      --rose:       #84181c;
      --taupe:      #968A7A;
      --white:      #faf9f7;
      --text:       #240902;
      --sun:        #e8a23a; /* énergie / éclat */
      --sun-soft:   #f4e3c8;

      --ff-display: 'Cormorant Garamond', Georgia, serif;      /* titres élégants (H2, citations) */
      --ff-heading: 'Fraunces', Georgia, serif;     /* logo + gros titres ludiques — voir bloc ci-dessus */
      --ff-body:    'Muli', 'Helvetica Neue', sans-serif;       /* texte courant */

      --ease: cubic-bezier(.4,0,.2,1);
    }

    /* ───────────────────────────────
       RESET & BASE
    ─────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--ff-body);
      font-weight: 300;
      color: var(--text);
      background: var(--white);
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }

    /* ───────────────────────────────
       NAVIGATION
    ─────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.2rem 4rem;
      background: rgba(250,249,247,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(98,13,20,.12);
      transition: padding .3s var(--ease);
    }
    nav.scrolled { padding: .8rem 4rem; }
    .nav-logo {
      font-family: var(--ff-heading);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--burgundy);
      letter-spacing: 0;
    }
    .nav-logo span { color: var(--dark-wine); }
    .nav-links { display: flex; gap: 2.5rem; list-style: none; }
    .nav-links a {
      font-size: .78rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--dark-wine);
      position: relative;
      padding-bottom: 3px;
      font-weight: 400;
    }
    .nav-links a::after {
      content: '';
      position: absolute; bottom: 0; left: 0;
      width: 0; height: 1px;
      background: var(--burgundy);
      transition: width .3s var(--ease);
    }
    .nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

    .burger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
    .burger span { width: 24px; height: 1.5px; background: var(--dark-wine); transition: .3s; display: block; }

    /* ───────────────────────────────
       PAGE SYSTEM (SPA-style)
    ─────────────────────────────── */
    .page { display: none; padding-top: 80px; min-height: 100vh; }
    .page.active { display: block; }

    /* ───────────────────────────────
       SHARED COMPONENTS
    ─────────────────────────────── */
    .section { padding: 6rem 4rem; }
    .section-inner { max-width: 1100px; margin: 0 auto; }

    .eyebrow {
      font-family: var(--ff-body);
      font-size: .9rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--taupe);
      display: block;
      margin-bottom: 1rem;
    }
    h1, h2, h3 { font-family: var(--ff-display); font-weight: 400; line-height: 1.15; }
    h1 { font-family: var(--ff-heading); font-weight: 700; font-size: clamp(2.6rem, 5.5vw, 4.6rem); letter-spacing: -.01em; }
    h2 { font-size: clamp(2rem, 4vw, 3.2rem); color: var(--burgundy); }
    h3 { font-size: 1.6rem; color: var(--dark-wine); }

    p { line-height: 1.85; font-size: .95rem; }

    .btn {
      display: inline-block;
      padding: .85rem 2.2rem;
      border: 1.5px solid var(--burgundy);
      color: var(--burgundy);
      font-family: var(--ff-body);
      font-size: .72rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
      cursor: pointer;
      background: transparent;
    }
    .btn:hover { background: var(--burgundy); color: var(--white); transform: translateY(-2px); }
    .btn-solid { background: var(--burgundy); color: var(--white); }
    .btn-solid:hover { background: var(--dark-wine); border-color: var(--dark-wine); }

    /* ornement trait */
    .ornament {
      display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.5rem;
    }
    .ornament::before, .ornament::after {
      content: ''; flex: 1; height: 1px; background: rgba(98,13,20,.2);
    }
    .ornament-text {
      font-family: var(--ff-display);
      font-style: italic;
      color: var(--taupe);
      font-size: 1.2rem;
      white-space: nowrap;
    }

    /* divider */
    .divider { width: 48px; height: 1.5px; background: var(--burgundy); margin: 1.5rem 0; }
    .divider.sun { background: var(--sun); }

    /* highlight surligné façon stabilo */
    .hl {
      background: linear-gradient(transparent 60%, var(--sun-soft) 60%);
      padding: 0 .1em;
    }

    /* sticker / tag rotation */
    .sticker {
      display: inline-block;
      background: var(--sun);
      color: var(--dark-wine);
      font-family: var(--ff-heading);
      font-weight: 600;
      font-size: .68rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 100px;
      transform: rotate(-3deg);
      box-shadow: 0 4px 14px rgba(232,162,58,.35);
    }

    /* ───────────────────────────────
       PAGE ACCUEIL
    ─────────────────────────────── */
    .hero {
      min-height: calc(100vh - 80px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 0 4rem;
      gap: 4rem;
      background: var(--white);
      position: relative;
    }
    .hero::before {
      content: '';
      position: absolute; right: 0; top: 0; bottom: 0;
      width: 42%;
      background: var(--cream);
      z-index: 0;
    }
    .hero-content { position: relative; z-index: 1; }
    .hero-content .eyebrow { margin-bottom: 1.5rem; }
    .hero-title { margin-bottom: 1.5rem; color: var(--dark-wine); }
    .hero-title em { font-style: italic; color: var(--burgundy); }
    .hero-text { color: var(--taupe); margin-bottom: 1.6rem; max-width: 480px; }
    .hero-tagline {
      font-family: var(--ff-display);
      font-style: italic;
      font-size: 1.2rem;
      color: var(--dark-wine);
      margin-bottom: 2.2rem;
      max-width: 460px;
    }
    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

    .hero-visual {
      position: relative; z-index: 1;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-logo-wrap {
      width: 340px; height: 340px;
      border-radius: 50%;
      background: var(--cream);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(36,9,2,.12);
      position: relative;
    }
    .hero-logo-wrap img { width: 260px; height: auto; }
    .hero-sticker {
      position: absolute;
      top: 18px; right: -10px;
      z-index: 2;
    }

    /* features strip */
    .features {
      background: var(--dark-wine);
      padding: 3.5rem 4rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
    .feature-item { text-align: center; }
    .feature-item .icon { font-size: 1.8rem; margin-bottom: .8rem; }
    .feature-item h4 {
      font-family: var(--ff-display);
      font-size: 1.2rem;
      color: var(--cream);
      margin-bottom: .5rem;
    }
    .feature-item p { font-size: .82rem; color: rgba(224,221,210,.6); }

    /* intro section */
    .intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }
    .intro-img-wrap {
      position: relative;
    }
    .intro-img-placeholder {
      width: 100%; padding-bottom: 120%;
      background: var(--cream);
      position: relative;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .intro-img-placeholder .big-emoji {
      position: absolute;
      font-size: 5rem;
      opacity: .5;
    }
    .intro-img-placeholder::after {
      content: '✿';
      position: absolute;
      font-size: 6rem;
      color: rgba(98,13,20,.08);
      bottom: 2rem; right: 2rem;
    }
    .intro-img-accent {
      position: absolute;
      bottom: -1.5rem; right: -1.5rem;
      width: 60%;
      padding-bottom: 40%;
      background: var(--burgundy);
      opacity: .08;
    }

    /* ───────────────────────────────
       PAGE À PROPOS
    ─────────────────────────────── */
    .about-hero {
      background: var(--cream);
      padding: 5rem 4rem 4rem;
      text-align: center;
    }
    .about-hero h2 { color: var(--dark-wine); margin-bottom: 1rem; }
    .about-hero p { max-width: 620px; margin: 0 auto; color: var(--taupe); }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }
    .about-img-wrap {
      width: 100%;
      padding-bottom: 125%;
      background: var(--cream);
      position: relative;
      overflow: hidden;
    }
    .about-img-wrap::before {
      content: 'Fanny';
      position: absolute;
      font-family: var(--ff-display);
      font-style: italic;
      font-size: 5rem;
      color: rgba(98,13,20,.07);
      bottom: 2rem; right: 1rem;
    }
    .about-img-wrap img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }

    .values { margin-top: 3rem; }
    .value-item { display: flex; gap: 1.2rem; margin-bottom: 1.8rem; }
    .value-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--burgundy);
      flex-shrink: 0;
      margin-top: .5rem;
    }
    .value-item h4 {
      font-family: var(--ff-display);
      font-size: 1.05rem;
      margin-bottom: .3rem;
      color: var(--dark-wine);
    }
    .value-item p { font-size: .85rem; color: var(--taupe); }

    /* timeline parcours */
    .timeline { margin-top: 2.5rem; }
    .timeline-item {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 1.5rem;
      padding-bottom: 2.2rem;
      position: relative;
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: 49px; top: 1.6rem; bottom: 0;
      width: 1px;
      background: rgba(98,13,20,.15);
    }
    .timeline-item:last-child::before { display: none; }
    .timeline-year {
      font-family: var(--ff-display);
      font-style: italic;
      font-size: 1.1rem;
      color: var(--burgundy);
      text-align: right;
      padding-top: .15rem;
    }
    .timeline-content h4 {
      font-family: var(--ff-display);
      font-size: 1.15rem;
      color: var(--dark-wine);
      margin-bottom: .4rem;
    }
    .timeline-content p { font-size: .88rem; color: var(--taupe); }

    /* ───────────────────────────────
       PAGE SERVICES
    ─────────────────────────────── */
    .services-hero {
      background: var(--dark-wine);
      padding: 5rem 4rem;
      text-align: center;
    }
    .services-hero h2 { color: var(--cream); }
    .services-hero p { color: rgba(224,221,210,.65); max-width: 600px; margin: 1rem auto 0; }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2px;
      background: rgba(98,13,20,.08);
    }
    .service-card {
      background: var(--white);
      padding: 3rem;
      transition: background .25s var(--ease);
      cursor: default;
      position: relative;
      overflow: hidden;
    }
    .service-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--burgundy);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform .3s var(--ease);
    }
    .service-card:hover { background: var(--cream); }
    .service-card:hover::before { transform: scaleY(1); }
    .service-icon { font-size: 2rem; margin-bottom: 1rem; }
    .service-card h3 { margin-bottom: .3rem; }
    .service-subtitle {
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--taupe);
      margin-bottom: 1rem;
    }
    .service-card p { font-size: 1.2rem; color: rgba(36,9,2,.65); line-height: 1.4; }
    .service-quip {
      font-family: var(--ff-display);
      font-style: italic;
      color: var(--burgundy);
      font-size: .9rem;
      margin-top: 1rem;
    }

    /* ───────────────────────────────
       PAGE GALERIE
    ─────────────────────────────── */
    .gallery-hero {
      background: var(--cream);
      padding: 5rem 4rem 3rem;
      text-align: center;
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 280px;
      gap: 12px;
      padding: 3rem 4rem;
    }
    .gallery-item {
      background: var(--cream);
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .gallery-item:nth-child(1) { grid-row: span 2; }
    .gallery-item:nth-child(4) { grid-column: span 2; }
    .gallery-item:nth-child(7) { grid-row: span 2; }
    .gallery-placeholder {
      width: 100%; height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: .5rem;
      color: rgba(98,13,20,.35);
      font-family: var(--ff-display);
      font-style: italic;
      transition: transform .4s var(--ease);
      text-align: center;
      padding: 1rem;
    }
    .gallery-placeholder .gp-icon { font-size: 2.5rem; }
    .gallery-placeholder .gp-label { font-size: .9rem; }
    .gallery-item:hover .gallery-placeholder { transform: scale(1.04); }
    .gallery-overlay {
      position: absolute; inset: 0;
      background: rgba(36,9,2,0);
      display: flex; align-items: flex-end; padding: 1.2rem;
      transition: background .3s var(--ease);
    }
    .gallery-item:hover .gallery-overlay { background: rgba(36,9,2,.35); }
    .gallery-tag {
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--white);
      opacity: 0;
      transition: opacity .3s var(--ease);
    }
    .gallery-item:hover .gallery-tag { opacity: 1; }

    .gallery-coming-soon {
      text-align: center;
      padding: 2rem 4rem 5rem;
      color: var(--taupe);
      font-style: italic;
      font-family: var(--ff-display);
      font-size: 1.1rem;
    }

    /* ───────────────────────────────
       PAGE CONTACT
    ─────────────────────────────── */
    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: calc(100vh - 80px);
    }
    .contact-left {
      background: var(--dark-wine);
      padding: 5rem 4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .contact-left h2 { color: var(--cream); margin-bottom: 1rem; }
    .contact-left p { color: rgba(224,221,210,.6); margin-bottom: 2.5rem; }
    .contact-left .hero-tagline { color: var(--sun); }

    .contact-info-item {
      display: flex; gap: 1rem; align-items: flex-start;
      margin-bottom: 1.8rem;
    }
    .ci-icon {
      width: 40px; height: 40px;
      border: 1px solid rgba(224,221,210,.2);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; flex-shrink: 0;
    }
    .ci-label {
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--taupe);
      display: block;
      margin-bottom: .2rem;
    }
    .ci-value { color: var(--cream); font-size: .9rem; }

    .contact-right {
      padding: 5rem 4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--white);
    }
    .contact-right h3 { margin-bottom: .5rem; }
    .contact-right .lead-quip {
      font-size: .85rem; color: var(--taupe); margin-bottom: 2rem;
    }

    .form-group { margin-bottom: 1.5rem; }
    .form-group label {
      display: block;
      font-size: .7rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--taupe);
      margin-bottom: .5rem;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: .85rem 1rem;
      border: 1px solid rgba(98,13,20,.2);
      background: transparent;
      font-family: var(--ff-body);
      font-size: .9rem;
      color: var(--dark-wine);
      transition: border-color .2s var(--ease);
      outline: none;
      appearance: none;
    }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: var(--burgundy);
    }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

    /* radio cards excel-onglets */
    .onglet-choice {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .8rem;
    }
    .onglet-card {
      border: 1px solid rgba(98,13,20,.2);
      padding: 1rem;
      cursor: pointer;
      transition: border-color .2s var(--ease), background .2s var(--ease);
      font-size: .85rem;
    }
    .onglet-card:hover, .onglet-card.selected {
      border-color: var(--burgundy);
      background: var(--cream);
    }
    .onglet-card .oc-emoji { font-size: 1.4rem; margin-bottom: .4rem; display: block; }

    /* ───────────────────────────────
       FOOTER
    ─────────────────────────────── */
    footer {
      background: var(--dark-wine);
      padding: 3rem 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .footer-logo {
      font-family: var(--ff-heading);
      font-weight: 700;
      font-size: 1.3rem;
      color: var(--cream);
    }
    .footer-copy { font-size: .75rem; color: rgba(224,221,210,.4); }
    .footer-links { display: flex; gap: 1.5rem; }
    .footer-links a {
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(224,221,210,.5);
      transition: color .2s;
    }
    .footer-links a:hover { color: var(--cream); }

    /* ───────────────────────────────
       ANIMATIONS
    ─────────────────────────────── */
    .fade-up {
      opacity: 0; transform: translateY(28px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .fade-up.visible { opacity: 1; transform: none; }

    /* ───────────────────────────────
       MOBILE MENU
    ─────────────────────────────── */
    @media (max-width: 768px) {
      nav { padding: 1rem 1.5rem; }
      nav.scrolled { padding: .75rem 1.5rem; }
      .burger { display: flex; }
      .nav-links {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--white);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
        z-index: 99;
      }
      .nav-links.open { display: flex; }
      .nav-links a { font-size: 1rem; }

      .hero { grid-template-columns: 1fr; padding: 2rem 1.5rem; text-align: center; }
      .hero::before { display: none; }
      .hero-actions { justify-content: center; }
      .hero-tagline { margin: 0 auto 2.2rem; }
      .hero-visual { display: none; }

      .features { grid-template-columns: 1fr; padding: 2.5rem 1.5rem; }
      .section { padding: 4rem 1.5rem; }
      .intro-grid, .about-grid, .contact-layout { grid-template-columns: 1fr; }
      .about-img-wrap { display: none; }
      .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 180px;
        padding: 1.5rem;
      }
      .gallery-item:nth-child(1),
      .gallery-item:nth-child(4),
      .gallery-item:nth-child(7) { grid-column: auto; grid-row: auto; }
      .services-grid { grid-template-columns: 1fr; }
      .contact-left { padding: 3rem 1.5rem; }
      .contact-right { padding: 3rem 1.5rem; }
      .form-row, .onglet-choice { grid-template-columns: 1fr; }
      .timeline-item { grid-template-columns: 70px 1fr; gap: 1rem; }
      .timeline-item::before { left: 39px; }
      footer { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem; }
    }

    /* ───────────────────────────────
       QUOTE BAND
    ─────────────────────────────── */
    .quote-band {
      background: var(--cream);
      padding: 4rem;
      text-align: center;
    }
    .quote-band blockquote {
      font-family: var(--ff-display);
      font-style: italic;
      font-size: clamp(1.5rem, 3vw, 2.4rem);
      color: var(--dark-wine);
      max-width: 760px;
      margin: 0 auto;
      line-height: 1.4;
    }
    .quote-band cite {
      display: block;
      margin-top: 1rem;
      font-size: .75rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--taupe);
      font-style: normal;
    }

    /* ───────────────────────────────
       TÉMOIGNAGES (placeholder)
    ─────────────────────────────── */
    .temoignages-placeholder {
      text-align: center;
      padding: 5rem 2rem;
    }
    .temoignages-placeholder .big-quote {
      font-family: var(--ff-display);
      font-size: 8rem;
      color: rgba(98,13,20,.06);
      line-height: .8;
    }
    .temoignages-placeholder p {
      font-family: var(--ff-display);
      font-style: italic;
      font-size: 1.2rem;
      color: var(--taupe);
      margin-top: -1rem;
    }

    /* FAQ accordéon */
    .faq-item {
      border-bottom: 1px solid rgba(98,13,20,.12);
      padding: 1.5rem 0;
      cursor: pointer;
    }
    .faq-q {
      display: flex; justify-content: space-between; align-items: center;
      font-family: var(--ff-display);
      font-size: 1.15rem;
      color: var(--dark-wine);
    }
    .faq-q .plus { font-size: 1.4rem; color: var(--burgundy); transition: transform .3s var(--ease); }
    .faq-item.open .plus { transform: rotate(45deg); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s var(--ease);
      font-size: .9rem;
      color: var(--taupe);
    }
    .faq-item.open .faq-a { max-height: 200px; }
    .faq-a-inner { padding-top: 1rem; }