:root {
      --blue:       #0A3D67;
      --blue-dark:  #071f3d;
      --blue-mid:   #0d2e5a;
      --blue-pale:  #e0ecf8;
      --blue-light: #1a5fa8;
      --orange:     #9C5300;
      --yellow:     #FFC500;
      --teal:       #30B4CD;
      --teal-mid:   #2B9FB6;
      --teal-dark:  #0e6b7a;
      --white:      #ffffff;
      --gray-50:    #f8fafc;
      --gray-100:   #f2f6fb;
      --gray-200:   #dce7f2;
      --gray-300:   #b8cfe4;
      --gray-500:   #4e6278;
      --gray-700:   #2d3e50;
      --gray-800:   #eeeff0;
      --f-title:    'Yanone Kaffeesatz', 'Arial Narrow', sans-serif;
      --f-body:     'Barlow', 'Arial', sans-serif;
      --r-sm:  4px;
      --r-md:  8px;
      --r-lg:  14px;
      --sh-sm: 0 1px 4px rgba(10,61,118,.10);
      --sh-md: 0 4px 20px rgba(10,61,118,.16);
    }

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

    body {
      font-family: var(--f-body);
      font-size: 1rem;
      color: var(--gray-800);
      background: var(--white);
      line-height: 1.65;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /*  ACCESSIBILITÉ  */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* Lien d'évitement (RGAA 12.7) */
    .skip {
      position: absolute; top: -100px; left: 1rem;
      background: var(--yellow); color: var(--gray-800);
      font-weight: 700; padding: .5rem 1rem;
      border-radius: var(--r-sm); z-index: 9999;
      transition: top .2s; text-decoration: none;
      font-family: var(--f-body); font-size: .95rem;
    }
    .skip:focus { top: 1rem; }

    :focus-visible {
      outline: 3px solid var(--orange);
      outline-offset: 2px;
    }

    /*  HEADER  */
    .site-header {
      background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
      box-shadow: 0 2px 20px rgba(0,0,0,.35);
      z-index: 200;
      flex-shrink: 0;
    }

    .header__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: .75rem 2rem;
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .header__brand {
      display: flex;
      align-items: center;
      gap: 1rem;
      text-decoration: none;
      flex-shrink: 0;
    }

    .header__logo-mark {
      width: auto; height: 44px;
      /* background: var(--white); */
      border-radius: var(--r-sm);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-size: 22px;
    }

    .header__logo-text strong {
      font-family: var(--f-title);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--white);
      letter-spacing: .02em;
      display: block;
      line-height: 1.15;
    }

    .header__logo-text span h1{
      font-size: .75rem;
      color: rgba(255,255,255,.75);
      text-transform: uppercase;
      letter-spacing: .1em;
    }
       .header__logo-text span{
      font-size: .60rem;
      color: rgba(255,255,255,.75);
      /* text-transform: uppercase; */
      letter-spacing: .1em;
    }

    .header__tagline {
      flex: 1;
      font-size: .875rem;
      color: rgba(255,255,255,.65);
      font-style: italic;
    }

    /*  BANDE COLORÉE  */
    .color-stripe {
      display: flex;
      height: 4px;
    }
    .color-stripe span { flex: 1; }

    /*  CARTE  */
    #map {
      flex: 1;
      min-height: 500px;
      width: 100%;
      z-index: 0;
    }

    /*  MARQUEURS  */
    .custom-marker {
      width: 32px; height: 38px;
      display: flex; flex-direction: column;
      align-items: center;
      cursor: pointer;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
      transition: filter .18s;
    }
    .custom-marker:hover,
    .custom-marker:focus-visible {
      filter: drop-shadow(0 3px 10px rgba(238,127,0,.65));
      outline: none;
    }

    .marker-circle {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--blue);
      border: 2.5px solid var(--white);
      color: var(--white);
      font-family: var(--f-title);
      font-size: 13px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      transition: background .18s;
    }
    .custom-marker:hover .marker-circle,
    .custom-marker:focus-visible .marker-circle,
    .custom-marker.active .marker-circle { background: var(--orange); }

    .marker-tail {
      width: 0; height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 7px solid var(--blue);
      transition: border-top-color .18s;
    }
    .custom-marker:hover .marker-tail,
    .custom-marker:focus-visible .marker-tail,
    .custom-marker.active .marker-tail { border-top-color: var(--orange); }

    /*  TOOLTIP  */
    .leaflet-tooltip.marker-tooltip {
      background: var(--blue-dark);
      color: var(--white);
      border: none;
      border-radius: var(--r-md);
      padding: 8px 14px;
      font-family: var(--f-body);
      font-size: .8125rem;
      line-height: 1.4;
      box-shadow: var(--sh-md);
      white-space: nowrap;
      pointer-events: none;
    }
    .leaflet-tooltip.marker-tooltip::before { border-top-color: var(--blue-dark); }
    .tooltip-name  { font-family: var(--f-title); font-size: 1rem; font-weight: 700; display: block; letter-spacing: .02em; }
    .tooltip-count { font-size: .75rem; color: var(--teal); display: block; margin-top: 2px; font-weight: 600; }

    /*  MODAL GALERIE  */
    .overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(7,31,61,.75);
      z-index: 2000;
      align-items: flex-start;
      justify-content: center;
      padding: 2rem 1rem 1rem;
      overflow-y: auto;
      backdrop-filter: blur(6px);
    }
    .overlay.open {
      display: flex;
      animation: overlayIn .25s ease;
    }
    @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

    .modal {
      background: var(--white);
      border-radius: var(--r-lg);
      width: 97%; 
      /* max-width: 880px; */
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(7,31,61,.4);
      animation: modalIn .32s cubic-bezier(.22,.68,0,1.2);
      margin: auto;
    }
    @keyframes modalIn {
      from { transform: translateY(40px) scale(.97); opacity: 0; }
      to   { transform: translateY(0) scale(1); opacity: 1; }
    }

    .modal-header {
      background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
      color: var(--white);
      padding: 1.25rem 1.5rem 1.1rem;
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 1rem;
    }

    /* Bande colorée sous le header modal */
    .modal-stripe {
      display: flex; height: 3px;
    }
    .modal-stripe span { flex: 1; }

    .modal-num {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--orange);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--f-title);
      font-size: 15px; font-weight: 700;
      flex-shrink: 0; margin-top: 2px;
    }

    .modal-header-text { flex: 1; }

    .modal-name {
      font-family: var(--f-title);
      font-size: 1.5rem; font-weight: 700;
      line-height: 1.2; letter-spacing: .02em;
    }

    .modal-addr {
      font-size: .8125rem; opacity: .7;
      margin-top: 4px;
      display: flex; align-items: center; gap: 5px;
    }

    .modal-close {
      background: rgba(255,255,255,.12);
      border: none; width: 36px; height: 36px;
      border-radius: 50%;
      color: var(--white); font-size: 20px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s; flex-shrink: 0;
    }
    .modal-close:hover { background: rgba(255,255,255,.25); }

    .modal-body { padding: 1.5rem; }

    .modal-intro {
      font-size: .9375rem; color: var(--gray-500);
      margin-bottom: 1.25rem; line-height: 1.65;
      border-left: 3px solid var(--teal);
      padding-left: .85rem;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 1rem;
    }

    /*  CARDS ŒUVRES  */
    .art-card {
      border-radius: var(--r-md);
      border: 1px solid var(--gray-200);
      overflow: hidden;
      background: var(--white);
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
    }
    .art-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--sh-md);
      border-color: var(--teal);
    }

    .art-card-desc {
      padding: .85rem 1rem .75rem;
      border-bottom: 1px solid var(--gray-100);
      background: var(--gray-50);
    }
    .art-card-title {
      font-family: var(--f-title);
      font-size: 1.05rem; font-weight: 700;
      color: var(--blue); line-height: 1.3;
      margin-bottom: 3px; letter-spacing: .01em;
    }
    .art-card-caption {
      font-size: .8rem; color: var(--gray-500); line-height: 1.5;
    }

    .art-card-img-wrap { position: relative; overflow: hidden; }
    .art-card-img {
      width: 100%; aspect-ratio: 4/3;
      object-fit: cover; display: block;
      transition: transform .3s ease;
    }
    .art-card:hover .art-card-img { transform: scale(1.05); }

    .art-card-placeholder {
      width: 100%; aspect-ratio: 4/3;
      background: var(--gray-100);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 6px; color: var(--gray-300); font-size: .8rem;
    }
    .art-card-placeholder svg { width: 32px; height: 32px; opacity: .4; }

    .zoom-layer {
      position: absolute; inset: 0;
      background: rgba(10,61,103,0);
      display: flex; align-items: center; justify-content: center;
      transition: background .2s;
    }
    .art-card:hover .zoom-layer { background: rgba(10,61,103,.22); }
    .zoom-icon {
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,.94);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transform: scale(.7);
      transition: opacity .2s, transform .2s;
      box-shadow: var(--sh-sm);
    }
    .art-card:hover .zoom-icon { opacity: 1; transform: scale(1); }
    .zoom-icon svg { width: 18px; height: 18px; color: var(--blue); }

    /*  LIGHTBOX  */
    .lightbox {
      display: none; position: fixed; inset: 0; z-index: 3000;
    }
    .lightbox.open { display: block; animation: lbIn .25s ease; }
    @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

    .lb-scrim {
      position: absolute; inset: 0;
      background: rgba(7,31,61,.9);
      cursor: pointer;
    }
    .lb-close {
      position: absolute; top: 1rem; right: 1rem;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 50%; width: 40px; height: 40px;
      color: var(--white); font-size: 20px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s; z-index: 10;
    }
    .lb-close:hover { background: rgba(255,255,255,.25); }

    .lb-frame {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 1.5rem; pointer-events: none;
    }
    .lb-img-wrap {
      pointer-events: auto;
      max-width: 800px; width: 100%;
      border-radius: var(--r-lg); overflow: hidden;
      box-shadow: 0 24px 80px rgba(0,0,0,.6);
      animation: lbImgIn .3s cubic-bezier(.22,.68,0,1.15);
      border: 3px solid var(--teal);
    }
    @keyframes lbImgIn {
      from { transform: scale(.88); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }
    .lb-img-wrap img {
      width: 100%; 
      object-fit: contain; display: block;
      background: var(--blue-dark);
    }
    .lb-placeholder {
      width: 100%; aspect-ratio: 16/9;
      background: var(--blue-dark);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 8px; color: var(--gray-300); font-size: .875rem;
    }
    .lb-placeholder svg { width: 44px; height: 44px; opacity: .3; }

    .lb-caption {
pointer-events: auto;
  margin: 1rem;
  text-align: center;
  animation: lbImgIn .35s .05s cubic-bezier(.22,.68,0,1.15) both;
  background: #132a44;
  color: white;
  width: fit-content;
  border-radius: 5px;
  padding: 1.5rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    }
    .lb-caption strong {
      display: block;
      font-family: var(--f-body);
      font-size: 1.15rem; font-weight: 700;
      color: var(--white); margin-bottom: 4px;
      letter-spacing: .02em;
    }
    .lb-caption span { font-size: .875rem; color: rgba(255, 255, 255, 0.819); padding: 10px;}

    .lb-nav {
      pointer-events: auto;
      display: flex; align-items: center; gap: 12px;
      margin-top: 1.1rem;
      animation: lbImgIn .35s .08s cubic-bezier(.22,.68,0,1.15) both;
    }
    .lb-btn {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: var(--r-sm);
      color: var(--white);
      padding: 6px 18px; font-size: .875rem;
      font-family: var(--f-body); font-weight: 500;
      cursor: pointer; transition: background .15s;
    }
    .lb-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--gray-800); }
    .lb-btn:disabled { opacity: .22; cursor: default; }
    .lb-btn:disabled:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: var(--white); }
    .lb-counter { font-size: .875rem; color: rgba(255,255,255,.45); min-width: 44px; text-align: center; }

    /*  FOOTER  */
    .site-footer {
      background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
      color: var(--white);
      padding: 1.5rem 2rem;
      flex-shrink: 0;
      font-size: .875rem;
    }
    .footer__inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: .75rem;
    }
    .footer__left { display: flex; flex-direction: column; gap: .35rem; }
    .footer__rgaa {
      display: inline-flex; align-items: center; gap: .5rem;
      background: rgba(48,180,205,.18);
      border: 1px solid var(--teal);
      border-radius: 50px;
      padding: .25rem .85rem;
      font-size: .8rem; font-weight: 600;
      color: var(--teal);
      width: fit-content;
    }
    .footer__rgaa svg { flex-shrink: 0; }
    .footer__copy { color: rgba(255,255,255,.6); }
    .footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
    .footer__privacy {
      display: inline-flex; align-items: center; gap: .45rem;
      background: rgba(255,197,0,.15);
      border: 1px solid rgba(255,197,0,.4);
      border-radius: 50px;
      padding: .25rem .85rem;
      font-size: .8rem; font-weight: 600;
      color: var(--yellow);
      width: fit-content;
    }
    .footer__privacy svg { flex-shrink: 0; }
    .footer__tech { color: rgba(255,255,255,.45); font-size: .78rem; }
    .footer__tech a { color: rgba(255,255,255,.6); }
    .footer__copy a { color: rgba(255,255,255,.6); }
    .footer__tech a:hover { color: var(--white); }

    /*  RESPONSIVE  */
    @media (max-width: 600px) {
      .gallery-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
      .modal-body { padding: 1rem; }
      .modal-header { padding: 1rem; }
      .header__tagline { display: none; }
      .footer__inner { flex-direction: column; align-items: flex-start; }
      .footer__right { align-items: flex-start; }
    }