/* =============================================================================
   DELTIC — STYLES PAGES VILLES (extrait du template v9 Niort)
   Chargé uniquement dans VilleLayout.astro pour ne pas polluer le DS global.
   ============================================================================= */

    /* Styles spécifiques au format store locator. Le reste vient du DS. */

    /* ---- HEADER / BREADCRUMB ----
       Source unique dans deltic-tokens.css (.site-header, .logo, .main-nav,
       .nav-toggle, .breadcrumb). Pas de duplication ici (avant : copier-coller
       identique 50 lignes qui creait des risques de divergence). */

    /* ===========================================================================
       LOCATION HERO — pattern store locator
       =========================================================================== */
    .location-hero {
      padding: 32px 0 0;
      background: var(--deltic-bg-page);
    }
    .location-photo-wrap {
      position: relative;
      border-radius: var(--deltic-radius-card);
      overflow: hidden;
      aspect-ratio: 21 / 9;
      background: var(--deltic-bg-card);
      box-shadow: var(--deltic-shadow-md);
    }
    .location-photo-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: brightness(0.62) saturate(0.95);
    }
    .location-photo-wrap::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,42,60,0.15) 0%, rgba(0,42,60,0.75) 100%);
      pointer-events: none;
    }
    .location-photo-overlay {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 32px 36px;
      color: #FFF;
      z-index: 1;
      display: flex; align-items: end; justify-content: space-between; gap: 24px;
      flex-wrap: wrap;
    }
    .location-photo-overlay h1 {
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 700;
      line-height: 1.1;
      color: #FFF;
      margin-bottom: 6px;
    }
    .location-photo-overlay .sub {
      font-size: 15px;
      color: rgba(255,255,255,0.86);
      letter-spacing: 0.02em;
    }
    .location-photo-overlay .credit {
      font-size: 10px;
      color: rgba(255,255,255,0.08);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Status temps réel (Ouvert / Fermé) */
    .status-strip {
      display: flex; align-items: center; gap: 28px;
      padding: 22px 0;
      flex-wrap: wrap;
    }
    .status-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 9px 18px;
      border-radius: var(--deltic-radius-pill);
      background: var(--deltic-bg-success);
      color: #1F6E3A;
      font-size: 13px; font-weight: 600;
      letter-spacing: 0.02em;
    }
    .status-pill.is-closed {
      background: var(--deltic-coral-light);
      color: var(--deltic-coral-dark);
    }
    .status-pill::before {
      content: "";
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #2EAA56;
      box-shadow: 0 0 0 4px rgba(46,170,86,0.18);
      animation: pulse 2s ease-in-out infinite;
    }
    .status-pill.is-closed::before {
      background: var(--deltic-coral);
      box-shadow: 0 0 0 4px rgba(240,91,83,0.18);
      animation: none;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(46,170,86,0.18); }
      50% { box-shadow: 0 0 0 8px rgba(46,170,86,0.06); }
    }
    @media (prefers-reduced-motion: reduce) {
      .status-pill::before { animation: none; }
    }
    .status-strip .text {
      font-size: 14px; color: var(--deltic-text-muted);
    }
    .status-strip .text strong { color: var(--deltic-blue); font-weight: 700; }
    .status-strip .actions {
      margin-left: auto;
      display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    }

    /* ===========================================================================
       INFO STRIP — adresse / tel / horaires / accès en 4 cards
       =========================================================================== */
    .info-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin: 8px 0 0;
    }
    .info-card {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 22px 24px;
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .info-card .head {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 12px;
    }
    .info-card .icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: var(--deltic-turquoise-light);
      color: var(--deltic-turquoise-dark);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .info-card .icon svg { width: 16px; height: 16px; }
    .info-card .label {
      font-size: 11.5px; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--deltic-turquoise-dark);
    }
    .info-card .body {
      font-size: 15px;
      color: var(--deltic-blue);
      font-weight: 500;
      line-height: 1.45;
    }
    .info-card .body a {
      color: var(--deltic-blue);
      transition: color 0.15s ease;
    }
    .info-card .body a:hover { color: var(--deltic-turquoise); text-decoration: underline; }
    .info-card .meta {
      font-size: 12.5px; color: var(--deltic-text-muted);
      margin-top: 6px;
    }
    .info-card .meta strong { color: var(--deltic-blue); font-weight: 600; }
    .info-card details { margin-top: 6px; }
    .info-card details summary {
      font-size: 12.5px; color: var(--deltic-turquoise-dark);
      font-weight: 600; cursor: pointer;
      list-style: none;
    }
    .info-card details summary::-webkit-details-marker { display: none; }
    .info-card details summary::after { content: " ▾"; }
    .info-card details[open] summary::after { content: " ▴"; }
    .info-card .hours-list {
      list-style: none; padding: 8px 0 0; margin: 0;
      font-size: 13px; color: var(--deltic-text);
    }
    .info-card .hours-list li {
      display: flex; justify-content: space-between;
      padding: 4px 0;
    }
    .info-card .hours-list li.today {
      color: var(--deltic-blue); font-weight: 700;
    }
    .info-card .hours-list li span:last-child { color: var(--deltic-text-muted); }

    /* Disclosure honnête */
    .info-disclosure {
      margin-top: 14px;
      padding: 16px 22px;
      background: var(--deltic-bg-card);
      border-left: 3px solid var(--deltic-turquoise);
      border-radius: 0 var(--deltic-radius-card) var(--deltic-radius-card) 0;
      font-size: 13.5px;
      color: var(--deltic-text);
      line-height: 1.6;
    }
    .info-disclosure strong { color: var(--deltic-blue); font-weight: 700; }

    /* ===========================================================================
       MAP — bien visible, prend toute la largeur container
       =========================================================================== */
    .map-section {
      padding: 64px 0 72px;
    }
    .map-head {
      display: flex; align-items: end; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .map-head h2 {
      font-size: clamp(1.6rem, 2.4vw, 1.9rem);
      color: var(--deltic-blue);
      font-weight: 700;
    }
    .map-head .legend {
      display: flex; gap: 20px;
      font-size: 13px; color: var(--deltic-text-muted);
    }
    .map-head .legend span { display: inline-flex; align-items: center; gap: 8px; }
    .map-head .legend .dot {
      width: 12px; height: 12px; border-radius: 50%;
    }
    .map-head .legend .dot--main { background: var(--deltic-coral); }
    .map-head .legend .dot--site { background: var(--deltic-turquoise); }
    .map-wrap {
      border-radius: var(--deltic-radius-card);
      overflow: hidden;
      border: 1px solid var(--deltic-border);
      background: var(--deltic-bg-card);
      height: 480px;
      position: relative;
    }
    #map { height: 100%; }
    .map-fallback {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      height: 100%; gap: 14px;
      color: var(--deltic-text-muted); font-size: 14px; text-align: center;
      padding: 28px;
    }
    .map-fallback a { color: var(--deltic-turquoise-dark); font-weight: 600; text-decoration: underline; }

    /* ===========================================================================
       SECTIONS communes
       =========================================================================== */
    .section { padding: 80px 0; }
    .section--soft { background: var(--deltic-bg-card); border-top: 1px solid var(--deltic-border); border-bottom: 1px solid var(--deltic-border); }
    .section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
    .section-head h2 {
      font-size: clamp(1.8rem, 2.8vw, 2.2rem);
      color: var(--deltic-blue);
      font-weight: 700;
      margin-top: 12px;
    }
    .section-head p {
      font-size: 16px; color: var(--deltic-text-muted);
      margin-top: 12px; line-height: 1.7;
    }

    /* ---- SERVICES GRID (icônes) ---- */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .service-card {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 24px;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .service-card .icon {
      width: 44px; height: 44px;
      border-radius: 10px;
      background: var(--deltic-turquoise-light);
      color: var(--deltic-turquoise-dark);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .service-card .icon svg { width: 22px; height: 22px; }
    .service-card h3 {
      font-size: 15px; font-weight: 700;
      color: var(--deltic-blue);
      margin-bottom: 6px;
    }
    .service-card p {
      font-size: 13.5px; color: var(--deltic-text-muted);
      line-height: 1.5;
    }

    /* ---- COMMENT ÇA SE PASSE / ACCESS ---- */
    .access-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .access-card {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 28px;
      position: relative;
    }
    .access-card .step {
      position: absolute;
      top: 24px; right: 28px;
      font-size: 38px; font-weight: 800;
      color: var(--deltic-turquoise);
      opacity: 0.18;
      line-height: 1;
    }
    .access-card .icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: var(--deltic-turquoise-light);
      color: var(--deltic-turquoise-dark);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .access-card .icon svg { width: 18px; height: 18px; }
    .access-card h3 {
      font-size: 17px; font-weight: 700;
      color: var(--deltic-blue);
      margin-bottom: 10px;
    }
    .access-card p {
      font-size: 14px; color: var(--deltic-text);
      line-height: 1.6;
    }

    /* ---- TEAM / RÉFÉRENT LOCAL ---- */
    .team-grid {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 56px;
      align-items: center;
      max-width: 1024px;
      margin: 0 auto;
    }
    .team-photo {
      width: 320px; height: 320px;
      border-radius: var(--deltic-radius-card);
      overflow: hidden;
      background: var(--deltic-bg-card);
      box-shadow: var(--deltic-shadow-md);
    }
    .team-photo img { width: 100%; height: 100%; object-fit: cover; }
    /* .team-info > prétitre : utilise désormais la chip pill .deltic-eyebrow
       commune (tokens.css), donc plus de règle locale ici. */
    .team-info .deltic-eyebrow { margin-bottom: 14px; }
    .team-info h2 {
      font-size: 32px; font-weight: 700;
      color: var(--deltic-blue);
      margin-bottom: 6px;
    }
    .team-info .title {
      font-size: 15px; color: var(--deltic-text-muted);
      margin-bottom: 22px;
      max-width: 36ch;
    }
    .team-info blockquote {
      font-size: 17px;
      color: var(--deltic-text);
      line-height: 1.7;
      font-style: italic;
      margin-bottom: 24px;
      padding-left: 20px;
      border-left: 3px solid var(--deltic-turquoise);
    }
    .team-info .ways {
      display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    }
    .team-info .ways .deltic-btn { font-size: 14px; padding: 11px 22px; }
    .team-info .ways .deltic-btn svg { margin-left: 4px; transition: transform 0.2s ease; }
    .team-info .ways .deltic-btn:hover svg { transform: translate(2px, -2px); }

    /* ---- AVIS GOOGLE ---- */
    .reviews-head {
      max-width: 920px; margin: 0 auto 48px;
    }
    .reviews-head .top {
      display: flex; align-items: center; justify-content: center;
      gap: 28px; flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .reviews-head .score-pill {
      display: inline-flex; align-items: center; gap: 14px;
      padding: 12px 22px;
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-pill);
      box-shadow: var(--deltic-shadow-sm);
    }
    .reviews-head .g-mark { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
    .reviews-head .g-mark .b { color: #4285F4; }
    .reviews-head .g-mark .r { color: #EA4335; }
    .reviews-head .g-mark .y { color: #FBBC05; }
    .reviews-head .g-mark .g { color: #34A853; }
    .reviews-head .score { font-size: 20px; font-weight: 700; color: var(--deltic-blue); }
    .reviews-head .stars { color: #FBBC05; font-size: 14px; letter-spacing: 1px; }
    .reviews-head .count { font-size: 13px; color: var(--deltic-text-muted); }
    .reviews-head .count a { color: var(--deltic-turquoise-dark); font-weight: 600; text-decoration: underline; }
    .reviews-head h2 {
      text-align: center;
      font-size: clamp(1.6rem, 2.4vw, 2rem);
      font-weight: 700; color: var(--deltic-blue);
    }

    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .review-card {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 24px 26px 22px;
      display: flex; flex-direction: column;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .review-card .top {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 14px;
    }
    .review-card .stars {
      color: #FBBC05; font-size: 14px; letter-spacing: 1px;
    }
    .review-card .platform {
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--deltic-text-muted);
    }
    .review-card .platform a { color: var(--deltic-turquoise-dark); }
    .review-card blockquote {
      font-size: 14.5px; color: var(--deltic-text);
      line-height: 1.65; flex: 1;
      margin-bottom: 16px;
    }
    .review-card figcaption {
      display: flex; align-items: center; gap: 12px;
      padding-top: 14px;
      border-top: 1px solid var(--deltic-border);
    }
    .review-card .avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--deltic-turquoise-light);
      color: var(--deltic-turquoise-dark);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 13px;
    }
    .review-card .who {
      font-size: 13.5px; font-weight: 700;
      color: var(--deltic-blue);
    }
    .review-card .what {
      font-size: 12px; color: var(--deltic-text-muted);
      margin-top: 2px;
    }
    .review-card .date {
      font-size: 11px; color: var(--deltic-text-faint);
      margin-top: 10px;
      letter-spacing: 0.04em;
    }

    /* ---- CONTEXTE LOCAL (chiffres + sources) ---- */
    .context-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 56px; align-items: center;
      max-width: 1080px; margin: 0 auto;
    }
    .context-text h2 {
      font-size: clamp(1.6rem, 2.4vw, 2rem);
      color: var(--deltic-blue);
      font-weight: 700;
      margin-bottom: 18px;
    }
    .context-text p {
      font-size: 15.5px; color: var(--deltic-text);
      line-height: 1.75;
    }
    .context-stats {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .context-stat {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 20px 22px;
      display: grid;
      grid-template-columns: 110px 1fr;
      align-items: center;
      gap: 18px;
      transition: border-color 0.2s ease;
    }
    .context-stat .num {
      font-size: 34px;
      font-weight: 300;
      color: var(--deltic-blue);
      line-height: 1;
      text-align: right;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.04em;
    }
    .context-stat .num em { font-style: normal; color: var(--deltic-turquoise-dark); }
    .context-stat .label {
      font-size: 13.5px; color: var(--deltic-text-muted);
      line-height: 1.5;
      border-left: 1px solid var(--deltic-border);
      padding-left: 18px;
    }
    .context-source {
      grid-column: 1 / -1;
      font-size: 12px; color: var(--deltic-text-faint);
      font-style: italic;
      margin-top: 4px;
    }

    /* ---- FAQ ---- */
    .faq-list { max-width: 820px; margin: 0 auto; }
    .faq-item {
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      margin-bottom: 12px;
      background: #FFF;
      overflow: hidden;
      transition: border-color 0.2s ease;
    }
    .faq-question {
      width: 100%; display: flex; justify-content: space-between; align-items: center;
      gap: 24px; padding: 20px 24px;
      background: transparent; border: none;
      font-family: var(--deltic-font);
      font-size: 16px; font-weight: 600;
      color: var(--deltic-blue);
      text-align: left; cursor: pointer;
    }
    .faq-question .icon {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--deltic-turquoise-light);
      color: var(--deltic-turquoise-dark);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700;
      transition: transform 0.25s ease, background 0.2s ease;
      flex-shrink: 0;
    }
    .faq-question[aria-expanded="true"] .icon {
      transform: rotate(45deg);
      background: var(--deltic-turquoise);
      color: #FFF;
    }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
    .faq-answer-inner {
      padding: 0 24px 22px;
      font-size: 14.5px; color: var(--deltic-text);
      line-height: 1.7;
      max-width: 70ch;
    }

    /* ---- NEARBY (villes voisines avec distance) ----
       .nearby-grid + .city-card sont definies dans deltic-tokens.css
       (source unique partagee villes + regions). */
    .back-hub {
      display: block; text-align: center;
      margin-top: 28px;
      font-size: 13.5px; font-weight: 600;
      color: var(--deltic-turquoise-dark);
    }
    .back-hub:hover { text-decoration: underline; }

    /* ---- CONTACT (form) ---- */
    .contact-section {
      background: var(--deltic-blue-darker);
      color: #FFF;
      padding: 80px 0;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 56px; align-items: start;
    }
    .contact-text h2 { color: #FFF; font-size: clamp(1.8rem, 3vw, 2.4rem); }
    .contact-text p {
      color: rgba(255,255,255,0.78);
      font-size: 16px; line-height: 1.7;
      margin-top: 16px; max-width: 50ch;
    }
    .contact-checks { list-style: none; padding: 0; margin-top: 24px; }
    .contact-checks li {
      padding: 8px 0; font-size: 15px;
      color: rgba(255,255,255,0.92);
      display: flex; gap: 12px; line-height: 1.6;
    }
    .contact-checks li::before {
      content: "✓"; color: var(--deltic-turquoise); flex-shrink: 0; font-weight: 700;
    }
    .form-card {
      background: #FFF;
      color: var(--deltic-text);
      border-radius: var(--deltic-radius-card);
      padding: 36px;
      box-shadow: var(--deltic-shadow-lg);
    }
    .form-card h3 { color: var(--deltic-blue); font-size: 20px; margin-bottom: 6px; }
    .form-card .sub { color: var(--deltic-text-muted); font-size: 14px; margin-bottom: 24px; }
    .form-row { margin-bottom: 18px; }
    .form-row label {
      display: block; font-size: 12px; font-weight: 600;
      color: var(--deltic-blue);
      text-transform: uppercase; letter-spacing: 0.1em;
      margin-bottom: 8px;
    }
    .form-row .req { color: var(--deltic-coral); margin-left: 2px; }
    .form-row textarea { resize: vertical; min-height: 90px; }
    .form-row.error input,
    .form-row.error select { border-color: var(--deltic-error); background: var(--deltic-error-bg); }
    .form-row .error-msg { color: var(--deltic-error); font-size: 12.5px; margin-top: 6px; display: none; }
    .form-row.error .error-msg { display: block; }
    .checkbox-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
    .checkbox-row input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--deltic-turquoise); }
    .checkbox-row label {
      font-size: 13px; color: var(--deltic-text-muted);
      line-height: 1.6; font-weight: 400;
      text-transform: none; letter-spacing: 0;
    }
    .checkbox-row label a { color: var(--deltic-turquoise-dark); text-decoration: underline; }
    .form-card .legal {
      font-size: 11.5px; color: var(--deltic-text-muted);
      margin-top: 14px; text-align: center; line-height: 1.5;
    }
    .form-success {
      display: none;
      padding: 22px; border-radius: var(--deltic-radius-input);
      background: var(--deltic-turquoise-light); color: var(--deltic-turquoise-dark);
      font-weight: 500; text-align: center;
    }
    .form-success.visible { display: block; }

    /* ---- FOOTER ---- */
    .footer {
      background: var(--deltic-blue-darker);
      color: rgba(255,255,255,0.65);
      padding: 56px 0 28px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .footer-grid {
      display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 48px; margin-bottom: 40px;
    }
    .footer-brand .logo { font-size: 28px; }
    .footer-brand .logo span { color: #FFF; }
    .footer-brand .logo img { height: 32px; filter: brightness(0) invert(1); }
    .footer-brand p { font-size: 13.5px; line-height: 1.7; margin: 12px 0 18px; max-width: 32ch; }
    .footer-partners {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 4px;
    }
    .footer-partner {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      padding: 14px 12px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
    }
    .footer-partner-name {
      font-size: 12.5px;
      font-weight: 600;
      color: #FFF;
      line-height: 1.3;
    }
    .footer-partner img {
      display: block;
      width: 100%;
      max-width: 100px;
      height: 56px;
      object-fit: contain;
      background: #FFF;
      border-radius: 6px;
      padding: 6px 8px;
    }
    .footer h4 {
      font-size: 13px; color: #FFF;
      text-transform: uppercase; letter-spacing: 0.14em;
      margin-bottom: 16px;
    }
    .footer ul { list-style: none; padding: 0; }
    .footer ul li { margin-bottom: 8px; }
    .footer ul a { font-size: 14px; color: rgba(255,255,255,0.65); }
    .footer ul a:hover { color: var(--deltic-turquoise); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 22px;
      display: flex; justify-content: space-between; align-items: center;
      font-size: 12.5px; flex-wrap: wrap; gap: 16px;
    }
    .footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
    .footer-legal a { font-size: 12.5px; color: rgba(255,255,255,0.65); }
    .footer-legal a:hover { color: var(--deltic-turquoise); }

    /* =========================================================================
       AJOUTS V6 — fusion contenu V1
       ========================================================================= */

    /* Trust banner (logos clients) */
    .trust-banner {
      padding: 48px 0;
      background: var(--deltic-bg-hero);
      border-bottom: 1px solid var(--deltic-border);
    }
    .trust-banner .label {
      text-align: center;
      font-size: 11.5px; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--deltic-text-muted);
      margin-bottom: 24px;
    }
    .trust-logos {
      display: flex; flex-wrap: wrap;
      justify-content: center; align-items: center;
      gap: 48px 56px;
    }
    .trust-logo {
      height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .trust-logo svg, .trust-logo img {
      height: 100%; width: auto; max-width: 120px;
      display: block; object-fit: contain;
      mix-blend-mode: multiply;
      filter: grayscale(100%);
      opacity: 0.45;
      transition: filter 0.25s ease, opacity 0.25s ease;
    }
    .trust-logo:hover svg, .trust-logo:hover img {
      filter: grayscale(0%);
      opacity: 1;
    }

    /* Solutions détaillées (2 cards profondes — remplace services-grid V5) */
    .solutions-detailed {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }
    .solution-block {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 36px;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .solution-block .badge {
      display: inline-block;
      font-size: 12px; font-weight: 600;
      color: var(--deltic-coral-dark);
      background: var(--deltic-coral-light);
      padding: 4px 12px;
      border-radius: var(--deltic-radius-pill);
      margin-bottom: 14px;
    }
    .solution-block h3 {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: var(--deltic-blue);
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 2px solid var(--deltic-turquoise-light);
    }
    .solution-block ul { list-style: none; padding: 0; margin: 0 0 22px; }
    .solution-block ul li {
      padding: 9px 0; font-size: 14.5px; color: var(--deltic-text);
      display: flex; gap: 12px; line-height: 1.6;
    }
    .solution-block ul li::before {
      content: ""; flex-shrink: 0;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--deltic-turquoise); margin-top: 9px;
    }

    /* Why-cards (3 alternées + CTA ressource) */
    .why-list {
      display: grid; gap: 28px;
      max-width: 1080px; margin: 0 auto;
    }
    .why-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "content image"
        "banner  banner";
      gap: 28px 48px;
      align-items: center;
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 40px;
      overflow: hidden;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .why-card > div:first-child { grid-area: content; }
    .why-card > .why-card-image { grid-area: image; }
    .why-card > .lead-magnet { grid-area: banner; }
    .why-card.reverse {
      grid-template-areas:
        "image   content"
        "banner  banner";
    }
    .why-card .step {
      display: inline-block;
      font-size: 12px; font-weight: 600;
      color: var(--deltic-coral-dark);
      background: var(--deltic-coral-light);
      padding: 4px 12px;
      border-radius: var(--deltic-radius-pill);
      margin-bottom: 14px;
    }
    .why-card h3 {
      font-size: 22px; font-weight: 700;
      color: var(--deltic-blue);
      line-height: 1.3;
      margin-bottom: 14px;
    }
    .why-card p {
      font-size: 15px; color: var(--deltic-text);
      line-height: 1.7;
      margin-bottom: 22px;
    }
    /* Lead-magnet banner — CTA téléchargement de ressource gratuite */
    .lead-magnet {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
      padding: 18px 22px;
      background: linear-gradient(135deg, var(--deltic-coral-light) 0%, #FFF 60%);
      border: 1px solid var(--deltic-coral);
      border-radius: var(--deltic-radius-card);
      text-decoration: none;
      color: var(--deltic-blue);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .lead-magnet:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(240, 91, 83, 0.16);
      border-color: var(--deltic-coral-dark);
    }
    .lead-magnet-icon {
      width: 56px; height: 56px;
      border-radius: 12px;
      background: var(--deltic-coral);
      color: #FFF;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .lead-magnet-icon svg { width: 24px; height: 24px; }
    .lead-magnet-body { min-width: 0; }
    .lead-magnet-kicker {
      display: inline-block;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--deltic-coral-dark);
      margin-bottom: 4px;
    }
    .lead-magnet-title {
      font-size: 16px; font-weight: 700;
      color: var(--deltic-blue);
      line-height: 1.3;
      margin: 0 0 6px;
    }
    .lead-magnet-pitch {
      font-size: 13.5px;
      color: var(--deltic-text-muted);
      line-height: 1.55;
      margin: 0;
    }
    .lead-magnet-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px;
      background: var(--deltic-coral);
      color: #FFF;
      border-radius: var(--deltic-radius-pill);
      font-size: 13px; font-weight: 600;
      white-space: nowrap;
      transition: background 0.2s ease, transform 0.2s ease;
      flex-shrink: 0;
    }
    .lead-magnet-cta svg { width: 13px; height: 13px; }
    .lead-magnet:hover .lead-magnet-cta { background: var(--deltic-coral-dark); }
    .lead-magnet:hover .lead-magnet-cta svg { transform: translate(2px, -2px); }
    .why-card-image {
      border-radius: 10px;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      background: var(--deltic-bg-card);
    }
    .why-card-image img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    /* Bénéfices (5 items) — base + responsive déplacés vers deltic-tokens.css
       (source unique partagée villes + régions, Laura 14 mai 2026). */

    /* Expert GED — argumentaire + stats + zones couvertes */
    .expert-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1024px;
      margin: 0 auto 40px;
    }
    .expert-stat {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 30px 26px;
      text-align: center;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .expert-stat .num {
      display: block;
      font-size: 44px;
      font-weight: 300;
      letter-spacing: -0.04em;
      color: var(--deltic-blue);
      line-height: 1;
      margin-bottom: 10px;
    }
    .expert-stat .num em {
      font-style: normal;
      font-size: 22px;
      font-weight: 300;
      letter-spacing: -0.02em;
      color: var(--deltic-turquoise-dark);
      margin-left: 4px;
    }
    .expert-stat .label {
      display: block;
      font-size: 13.5px; color: var(--deltic-text-muted);
      line-height: 1.5;
    }

    .expert-list {
      list-style: none; padding: 0;
      margin: 0 auto 40px;
      max-width: 920px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 36px;
    }
    .expert-list li {
      display: flex; gap: 14px;
      padding: 12px 0;
      font-size: 14.5px;
      color: var(--deltic-text);
      line-height: 1.55;
    }
    .expert-list li::before {
      content: "";
      flex-shrink: 0;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--deltic-turquoise-light)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E96A4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
        center/12px 12px no-repeat;
      margin-top: 1px;
    }

    /* Cas d'usage Niort (3 cards avec illustration) */
    .usecases-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .usecase-card {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .usecase-image {
      aspect-ratio: 3 / 2;
      overflow: hidden;
      background: var(--deltic-bg-card);
    }
    .usecase-image img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .usecase-body { padding: 26px 28px 28px; }
    .usecase-card .tag {
      display: inline-block;
      font-size: 11px; font-weight: 600;
      color: var(--deltic-turquoise-dark);
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 10px;
    }
    .usecase-card h3 {
      font-size: 17px; font-weight: 700;
      color: var(--deltic-blue);
      line-height: 1.3;
      margin-bottom: 12px;
    }
    .usecase-card p {
      font-size: 14px; color: var(--deltic-text);
      line-height: 1.65;
    }
    .usecases-cta {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 36px;
    }
    .usecases-cta .deltic-btn svg { margin-left: 4px; transition: transform 0.2s ease; }
    .usecases-cta .deltic-btn:hover svg { transform: translate(2px, -2px); }
    .cta-caption {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 12px;
      color: var(--deltic-text-muted);
      line-height: 1.4;
      letter-spacing: 0.01em;
    }
    .cta-caption span { display: block; }

    /* =========================================================================
       AJOUTS V7 — patterns Dougs / Hemea / Captain Contrat
       ========================================================================= */

    /* Bassin d'emploi — atomisation locale (communes + secteurs) */
    .local-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: start;
      max-width: 1080px;
      margin: 0 auto;
    }
    .local-block {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 28px 30px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .local-block .local-intro {
      font-size: 14.5px;
      color: var(--deltic-text-muted);
      line-height: 1.7;
      margin: 12px 0 20px;
    }
    .local-tags {
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .local-tags span {
      background: var(--deltic-turquoise-light);
      color: var(--deltic-turquoise-dark);
      padding: 7px 14px;
      border-radius: var(--deltic-radius-pill);
      font-size: 13px; font-weight: 600;
      border: 1px solid transparent;
    }
    .local-sector-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 14px;
    }
    .local-sector-list li {
      display: flex; gap: 14px; align-items: flex-start;
    }
    .local-sector-list .sector-icon {
      font-size: 18px; line-height: 1; flex-shrink: 0;
      width: 40px; height: 40px;
      background: var(--deltic-turquoise-light);
      color: var(--deltic-turquoise-dark);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
    }
    .local-sector-list strong {
      display: block;
      font-size: 14.5px; font-weight: 700;
      color: var(--deltic-blue);
      margin-bottom: 4px;
    }
    .local-sector-list small {
      font-size: 13px; color: var(--deltic-text-muted);
      line-height: 1.55;
    }

    /* Diagnostic GED 60s — mini-quiz conversion */
    .diag-card {
      background: #FFF;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      padding: 40px 44px;
      max-width: 768px;
      margin: 0 auto;
      box-shadow: var(--deltic-shadow-md);
    }
    .diag-step, .diag-result { display: none; }
    .diag-step.is-active, .diag-result.is-active {
      display: block;
      animation: diagIn 0.35s ease;
    }
    @keyframes diagIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .diag-step.is-active, .diag-result.is-active { animation: none; }
    }
    .diag-progress { margin-bottom: 18px; }
    .diag-progress span {
      display: inline-block;
      padding: 4px 12px;
      border-radius: var(--deltic-radius-pill);
      background: var(--deltic-turquoise-light);
      color: var(--deltic-turquoise-dark);
      font-size: 12px; font-weight: 700;
      letter-spacing: 0.06em;
    }
    .diag-step h3, .diag-result h3 {
      font-size: 22px; font-weight: 700;
      color: var(--deltic-blue);
      margin-bottom: 22px;
      line-height: 1.3;
    }
    .diag-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .diag-opt {
      padding: 14px 18px;
      border: 1px solid var(--deltic-border);
      border-radius: var(--deltic-radius-card);
      background: #FFF;
      color: var(--deltic-blue);
      font-family: var(--deltic-font);
      font-size: 14.5px; font-weight: 600;
      cursor: pointer;
      text-align: left;
      transition: all 0.18s ease;
    }
    .diag-opt:hover {
      border-color: var(--deltic-turquoise);
      background: var(--deltic-turquoise-light);
      transform: translateY(-1px);
    }
    .diag-opt:focus-visible {
      outline: 2px solid var(--deltic-turquoise);
      outline-offset: 2px;
    }
    .diag-result-eyebrow {
      display: inline-block;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--deltic-coral);
      margin-bottom: 12px;
    }
    .diag-result p.diag-desc {
      font-size: 15px;
      color: var(--deltic-text);
      line-height: 1.7;
      margin-bottom: 22px;
    }
    .diag-tarif {
      background: var(--deltic-turquoise-light);
      border-left: 4px solid var(--deltic-turquoise);
      border-radius: 0 12px 12px 0;
      padding: 16px 22px;
      margin-bottom: 24px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 14px;
    }
    .diag-tarif-label {
      font-size: 12px; font-weight: 700;
      color: var(--deltic-turquoise-dark);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .diag-tarif-num {
      font-size: 20px; font-weight: 800;
      color: var(--deltic-blue);
    }
    .diag-actions {
      display: flex; gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .diag-disclaimer {
      font-size: 12.5px;
      color: var(--deltic-text-faint);
      font-style: italic;
      line-height: 1.55;
    }

    /* CTA sous le texte de gauche (contexte local) */
    .context-cta {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 24px;
    }
    .context-cta .deltic-btn svg { margin-left: 4px; transition: transform 0.2s ease; }
    .context-cta .deltic-btn:hover svg { transform: translate(2px, -2px); }

    /* =========================================================================
       AJOUTS V8 — override .deltic-eyebrow (style "pastille")
       Remplace l'eyebrow en MAJUSCULES + letter-spacing du design system
       par une pastille turquoise + texte sentence case (pattern Vercel/Linear).
       À promouvoir dans deltic-tokens.css si validation après revue live.
       ========================================================================= */
    /* .deltic-eyebrow : chip pill universel défini dans deltic-tokens.css. */

    /* ---- RESPONSIVE ---- */
    @media (max-width: 1024px) {
      .info-strip { grid-template-columns: 1fr 1fr; }
      .services-grid { grid-template-columns: 1fr 1fr; }
      .access-grid { grid-template-columns: 1fr; }
      .reviews-grid { grid-template-columns: 1fr; }
      /* .nearby-grid responsive : voir deltic-tokens.css. */
      .team-grid { grid-template-columns: 1fr; gap: 32px; }
      .team-photo { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1/1; margin: 0 auto; }
      .context-grid { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      /* Ajouts V6 */
      .solutions-detailed { grid-template-columns: 1fr; }
      .why-card {
        grid-template-columns: 1fr;
        grid-template-areas: "content" "image" "banner";
        gap: 24px; padding: 32px;
      }
      .why-card.reverse {
        grid-template-areas: "content" "image" "banner";
      }
      .usecases-grid { grid-template-columns: 1fr; }
      .expert-stats { grid-template-columns: 1fr; gap: 14px; }
      .expert-list { grid-template-columns: 1fr; }
      /* Ajouts V7 */
      .local-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      /* Header/nav-toggle/main-nav mobile : source unique dans deltic-tokens.css. */
      .info-strip { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: 1fr; }
      /* .nearby-grid responsive : voir deltic-tokens.css. */
      .footer-grid { grid-template-columns: 1fr; }
      .map-wrap { height: 360px; }
      /* Hero ville mobile : on sort l'overlay du position absolute. Avant :
         aspect-ratio 4/3 + texte en absolute bottom -> H1 long (Paris,
         Provence-Alpes-Cote-d-Azur) deborde au-dessus de l'image et est coupe.
         Apres : empilement photo + texte sur fond foncé, hauteur libre. */
      .location-photo-wrap {
        aspect-ratio: auto;
        display: flex; flex-direction: column;
        background: linear-gradient(180deg, #002A3C 0%, #003E57 100%);
      }
      .location-photo-wrap img { height: 180px; flex-shrink: 0; }
      .location-photo-wrap::after {
        height: 180px; bottom: auto;
        background: linear-gradient(180deg, rgba(0,42,60,0.10) 0%, rgba(0,42,60,0.75) 100%);
      }
      .location-photo-overlay {
        position: static;
        padding: 22px 22px 26px;
        flex-direction: column; align-items: flex-start; gap: 10px;
      }
      .location-photo-overlay h1 { font-size: clamp(22px, 5.4vw, 28px); }
      .location-photo-overlay .sub { font-size: 14.5px; }
      .status-strip .actions { width: 100%; }
      .status-strip .actions .deltic-btn { flex: 1; justify-content: center; }
      .section { padding: 56px 0; }
      /* Ajouts V6 */
      .trust-logos { gap: 20px; }
      /* Ajouts V7 */
      .diag-card { padding: 28px 22px; }
      .diag-options { grid-template-columns: 1fr; }
      .diag-step h3, .diag-result h3 { font-size: 18px; }
      /* Lead magnet — passe en colonnes empilées sous 640px */
      .lead-magnet {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: left;
      }
      .lead-magnet-icon { margin-bottom: 4px; }
      .lead-magnet-cta { align-self: flex-start; }
    }

    /* Reveal animations */
    .js-reveal .reveal {
      opacity: 0; transform: translateY(20px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
      html { scroll-behavior: auto; }
    }

/* === FALLBACK : hero sans photo (villes sans hero.photo) === */
.location-photo-wrap.no-photo {
  background: linear-gradient(135deg, var(--deltic-blue) 0%, var(--deltic-turquoise-dark) 100%);
}
.location-photo-wrap.no-photo::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
}

/* ===========================================================
   Harmonisation H1 / H2 — modèle page région (Laura — 18 mai 2026)
   Source : .region-hero h1 et .section .section-head h2 de la page
   Nouvelle-Aquitaine. Même famille typographique sur toute la galaxie
   ged-villes : poids 600, tracking serré -0.035em, H2 fixé à 2.375rem.
   =========================================================== */
.location-photo-overlay h1 {
  font-weight: 600;
  /* Min 22px : indispensable a 375 pour que les titres longs (Paris, PACA, etc.)
     tiennent dans le hero mobile sans deborder. Max 42px desktop. */
  font-size: clamp(22px, 4.2vw, 42px);
  letter-spacing: -0.035em;
}
.section-head h2,
.map-head h2,
.reviews-head h2,
.context-text h2,
.contact-text h2,
.team-info h2 {
  font-weight: 600;
  font-size: 2.375rem;
  letter-spacing: -0.035em;
}