/* ==========================================================================

       SITE STATIQUE GENEALOGIQUE FAMILIAL — STYLE MOBILE-FIRST & RESPONSIVE

       Palette : Parchemin chaud, encre sombre, accents dore vieilli

       ========================================================================== */



    

@font-face {

  font-family: 'Cinzel';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url('fonts/Cinzel-600-normal.woff2') format('woff2');

}


@font-face {

  font-family: 'Cinzel';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url('fonts/Cinzel-700-normal.woff2') format('woff2');

}


@font-face {

  font-family: 'Cinzel';

  font-style: normal;

  font-weight: Regular;

  font-display: swap;

  src: url('fonts/Cinzel-Regular.woff2') format('woff2');

}


@font-face {

  font-family: 'Lora';

  font-style: italic;

  font-weight: 400;

  font-display: swap;

  src: url('fonts/Lora-400-italic.woff2') format('woff2');

}


@font-face {

  font-family: 'Lora';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url('fonts/Lora-400-normal.woff2') format('woff2');

}


@font-face {

  font-family: 'Lora';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url('fonts/Lora-600-normal.woff2') format('woff2');

}


@font-face {

  font-family: 'PlayfairDisplay';

  font-style: italic;

  font-weight: 400;

  font-display: swap;

  src: url('fonts/PlayfairDisplay-400-italic.woff2') format('woff2');

}


@font-face {

  font-family: 'PlayfairDisplay';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url('fonts/PlayfairDisplay-600-normal.woff2') format('woff2');

}


@font-face {

  font-family: 'PlayfairDisplay';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url('fonts/PlayfairDisplay-700-normal.woff2') format('woff2');

}


@font-face {

  font-family: 'PlayfairDisplay';

  font-style: normal;

  font-weight: Regular;

  font-display: swap;

  src: url('fonts/PlayfairDisplay-Regular.woff2') format('woff2');

}



    :root {

      --bg-primary: #f8f6f0;

      --bg-card: #ffffff;

      --bg-parchment: #faf6ee;

      --border-color: #e5ded2;

      --text-main: #2b2724;

      --text-muted: #6b645c;

      --gold-accent: #9e783d;

      --gold-hover: #7b5b2a;

      --gold-light: #f4ede2;

      --dark-header: #1e1b18;

      --font-body: 'Lora', Palatino, 'Book Antiqua', Georgia, serif;

      --font-title: 'Playfair Display', Baskerville, Georgia, serif;

      --font-cinzel: 'Cinzel', 'Trajan Pro', Georgia, serif;

    }



    *, *::before, *::after {

      box-sizing: border-box;

    }



    html, body {

      margin: 0;

      padding: 0;

      background-color: var(--bg-primary);

      color: var(--text-main);

      font-family: var(--font-body);

      font-size: 16px;

      line-height: 1.75;

      overflow-x: hidden;

      width: 100%;

      -webkit-text-size-adjust: 100%;

    }



    .font-title { font-family: var(--font-title); }

    .font-cinzel { font-family: var(--font-cinzel); }



    header.site-header {

      background: var(--dark-header);

      color: #f7f2ea;

      border-bottom: 1px solid #3d3731;

      position: sticky;

      top: 0;

      z-index: 50;

      box-shadow: 0 4px 12px rgba(0,0,0,0.15);

      width: 100%;

    }



    .header-inner {

      max-width: 1100px;

      margin: 0 auto;

      padding: 0.75rem 1rem;

      display: flex;

      flex-direction: column;

      gap: 0.75rem;

    }



    .brand-sub {

      font-size: 0.65rem;

      letter-spacing: 0.15em;

      text-transform: uppercase;

      color: #c7a97b;

      display: block;

    }



    .brand-title {

      font-size: 1.2rem;

      font-weight: 700;

      color: #fff;

      text-decoration: none;

      line-height: 1.25;

      display: inline-block;

    }



    .search-input {

      background: #2e2925;

      border: 1px solid #4a423b;

      color: #f7f2ea;

      border-radius: 999px;

      padding: 0.45rem 1rem 0.45rem 2.2rem;

      font-size: 0.85rem;

      width: 100%;

      outline: none;

      transition: border-color 0.2s;

    }



    .search-input:focus {

      border-color: #c7a97b;

    }



    .nav-branches {

      background: #27231f;

      border-top: 1px solid #352f2a;

      padding: 0.4rem 1rem;

      overflow-x: auto;

      white-space: nowrap;

      -webkit-overflow-scrolling: touch;

    }



    .nav-branches-inner {

      display: flex;

      gap: 0.4rem;

      max-width: 1100px;

      margin: 0 auto;

    }



    .branch-pill {

      font-size: 0.75rem;

      padding: 0.25rem 0.7rem;

      border-radius: 9999px;

      text-decoration: none;

      background: #38312b;

      color: #d1c7bc;

      transition: all 0.2s;

      flex-shrink: 0;

    }



    .branch-pill:hover, .branch-pill.active {

      background: #c7a97b;

      color: #1e1b18;

      font-weight: 600;

    }



    main.container {

      max-width: 960px;

      margin: 1.25rem auto;

      padding: 0 1rem;

      width: 100%;

    }



    .identity-card {

      background: #ffffff;

      border: 1px solid var(--border-color);

      border-radius: 12px;

      padding: 1.25rem;

      margin-bottom: 1.5rem;

      box-shadow: 0 2px 8px rgba(0,0,0,0.03);

    }



    .identity-badges {

      display: flex;

      flex-wrap: wrap;

      gap: 0.4rem;

      align-items: center;

      margin-bottom: 0.6rem;

    }



    .badge-branch {

      font-size: 0.7rem;

      font-weight: 600;

      color: var(--gold-accent);

      background: var(--gold-light);

      padding: 0.2rem 0.6rem;

      border-radius: 4px;

      text-transform: uppercase;

      letter-spacing: 0.05em;

    }



    .badge-date {

      font-size: 0.75rem;

      background: #eee8de;

      color: #55442d;

      padding: 0.2rem 0.6rem;

      border-radius: 4px;

      font-weight: 600;

    }



    .badge-geneanet {

      font-size: 0.75rem;

      background: #eef5e8;

      color: #2e6628;

      border: 1px solid #c2deba;

      padding: 0.2rem 0.6rem;

      border-radius: 4px;

      text-decoration: none;

      font-weight: 600;

      display: inline-flex;

      align-items: center;

      gap: 0.3rem;

      transition: background 0.15s;

    }



    .badge-geneanet:hover {

      background: #d8ebd0;

    }



    .identity-title {

      font-size: 1.6rem;

      margin: 0.4rem 0 0.6rem 0;

      line-height: 1.25;

      color: #1e1b18;

    }



    .identity-meta {

      font-size: 0.85rem;

      color: var(--text-muted);

      line-height: 1.5;

    }



    article.article-wrapper {

      border: 1px solid var(--border-color);

      border-radius: 14px;

      overflow: hidden;

      background: #fff;

      box-shadow: 0 4px 15px rgba(0,0,0,0.04);

      width: 100%;

    }



    .article-content {

      padding: 1.5rem 1.25rem;

      font-size: 1rem;

      line-height: 1.8;

      word-break: break-word;

    }



    .article-content p {

      margin: 0 0 1.25rem 0;

    }



    .article-content h1, .article-content h2, .article-content h3, .article-content h4 {

      color: #1a1715;

      line-height: 1.3;

      margin-top: 2rem;

      margin-bottom: 0.75rem;

    }



    .article-content h2 {

      font-size: 1.45rem;

      padding-bottom: 0.4rem;

      border-bottom: 1px solid var(--border-color);

    }



    .article-content h3 { font-size: 1.25rem; }



    details.letter-box {
      background: var(--bg-parchment);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.8rem 1.2rem;
      margin-bottom: 1.25rem;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }
    details.letter-box summary {
      cursor: pointer;
      user-select: none;
      font-weight: 600;
    }
    details.letter-box[open] {
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }
    details.letter-box[open] summary {
      border-bottom: 1px dashed var(--border-color);
      padding-bottom: 0.5rem;
      margin-bottom: 0.75rem;
    }
    details.toc-container {

      background: var(--bg-parchment);

      border: 1px solid var(--border-color);

      border-radius: 8px;

      padding: 0.75rem 1rem;

      margin: 1.25rem 0 2rem 0;

    }



    summary.toc-summary {

      font-weight: 700;

      color: var(--gold-accent);

      cursor: pointer;

      outline: none;

      user-select: none;

      font-size: 0.95rem;

    }



    .toc-nav {

      margin-top: 0.75rem;

      padding-top: 0.75rem;

      border-top: 1px solid #e5ded2;

      max-height: 320px;

      overflow-y: auto;

    }



    .toc-nav ul {

      margin: 0;

      padding-left: 1.25rem;

      font-size: 0.85rem;

      line-height: 1.8;

    }



    .toc-nav a {

      color: #4a423b;

      text-decoration: none;

    }



    .toc-nav a:hover {

      color: var(--gold-accent);

      text-decoration: underline;

    }



    .timeline-entry {

      display: flex;

      align-items: center;

      gap: 0.85rem;

      margin: 2.2rem 0 1.25rem 0;

      position: relative;

    }



    .timeline-marker {

      display: inline-flex;

      align-items: center;

      flex-shrink: 0;

    }



    .timeline-date {

      display: inline-block;

      background: var(--gold-light);

      color: var(--gold-hover);

      border-left: 3px solid var(--gold-accent);

      font-weight: 700;

      font-size: 1rem;

      padding: 0.25rem 0.75rem;

      border-radius: 0 4px 4px 0;

      letter-spacing: 0.04em;

    }



    .timeline-body {

      font-size: 1.05rem;

      font-weight: 600;

      color: var(--text-main);

    }



    .timeline-entry::after {

      content: "";

      flex: 1;

      height: 1px;

      background: linear-gradient(to right, var(--border-color), transparent);

    }





    .timeline-anchor {

      display: block;

      position: relative;

      top: -80px;

      visibility: hidden;

    }



    .image-gallery {

      display: grid;

      grid-template-columns: 1fr;

      gap: 0.85rem;

      margin: 1.75rem 0;

      width: 100%;

    }



    .gallery-item {

      margin: 0;

      background: #fcfaf7;

      border: 1px solid #e0d8cc;

      border-radius: 8px;

      overflow: hidden;

      box-shadow: 0 2px 6px rgba(0,0,0,0.04);

      display: flex;

      flex-direction: column;

    }



    .gallery-item img {

      width: 100%;

      height: 220px;

      object-fit: cover;

      display: block;

      cursor: zoom-in;

      transition: transform 0.2s, opacity 0.2s;

    }



    .gallery-item img:hover {

      opacity: 0.95;

    }



    .gallery-item figcaption {

      font-size: 0.8rem;

      color: var(--text-muted);

      padding: 0.5rem 0.75rem;

      font-style: italic;

      line-height: 1.4;

      background: #fff;

      border-top: 1px solid #eee8de;

      margin-top: auto;

    }



    .archive-image-wrapper.single-image {

      margin: 2rem auto;

      text-align: center;

      background: #ffffff;

      padding: 0.5rem;

      border: 1px solid #dfd8cc;

      border-radius: 10px;

      box-shadow: 0 3px 12px rgba(0,0,0,0.05);

      max-width: 100%;

    }



    .archive-image-wrapper img {

      max-width: 100%;

      height: auto;

      border-radius: 6px;

      cursor: zoom-in;

      display: block;

      margin: 0 auto;

    }



    .archive-image-wrapper figcaption.image-caption {

      font-size: 0.85rem;

      color: var(--text-muted);

      margin-top: 0.6rem;

      font-style: italic;

      padding: 0 0.5rem;

    }



    .zoom-hint {

      color: var(--gold-accent);

      font-size: 0.75rem;

    }



    .parchment-quote {

      background: var(--bg-parchment);

      border-left: 4px solid var(--gold-accent);

      padding: 1rem 1.25rem;

      margin: 1.75rem 0;

      border-radius: 0 8px 8px 0;

      color: #38322b;

      box-shadow: 0 2px 6px rgba(0,0,0,0.03);

      font-style: normal;

    }



    .quote-body {

      font-style: italic;

      line-height: 1.7;

    }



    .quote-signature {

      text-align: right;

      font-weight: 600;

      color: var(--gold-hover);

      margin-top: 0.75rem;

      font-size: 0.9rem;

    }



    .table-container {

      overflow-x: auto;

      max-width: 100%;

      margin: 1.5rem 0;

      -webkit-overflow-scrolling: touch;

      border: 1px solid var(--border-color);

      border-radius: 8px;

    }



    table.genealogie-table {

      width: 100%;

      border-collapse: collapse;

      font-size: 0.9rem;

      min-width: 480px;

    }



    table.genealogie-table th, table.genealogie-table td {

      padding: 0.65rem 0.9rem;

      border-bottom: 1px solid var(--border-color);

      text-align: left;

    }



    table.genealogie-table th {

      background: #f2ebe1;

      font-family: var(--font-cinzel);

      font-weight: 700;

      color: #4a423b;

    }



    table.genealogie-table tr:nth-child(even) {

      background: #faf8f5;

    }



    .open-questions {

      background: #fbf9f4;

      border: 1px solid #d9ccb8;

      border-left: 4px solid #b87b28;

      border-radius: 8px;

      padding: 1.25rem;

      margin: 2.5rem 0 1.5rem 0;

    }



    .open-questions-title {

      font-size: 1.1rem;

      font-weight: 700;

      color: #8c5511;

      margin-bottom: 0.5rem;

      display: flex;

      align-items: center;

      gap: 0.4rem;

    }



    .open-questions-intro {

      font-size: 0.9rem;

      color: var(--text-muted);

      margin-bottom: 0.75rem;

    }



    .open-questions-list {

      margin: 0 0 1.25rem 0;

      padding-left: 1.25rem;

      font-size: 0.95rem;

      line-height: 1.6;

      color: #3d352e;

    }



    .open-questions-list li {

      margin-bottom: 0.4rem;

    }



    .open-questions-action {

      padding-top: 0.75rem;

      border-top: 1px dashed #ded4c3;

    }



    .header-contact-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: #38312b;
      color: #e0d6c8;
      padding: 0.4rem 0.8rem;
      border-radius: 9999px;
      font-size: 0.78rem;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid #4a423b;
      white-space: nowrap;
      transition: all 0.2s;
    }

    .header-contact-btn:hover, .header-contact-btn.active {
      background: #c7a97b;
      color: #1e1b18;
      border-color: #c7a97b;
    }

    .footer-contact-link {
      color: #c7a97b;
      text-decoration: underline;
      font-weight: 600;
      margin-left: 0.4rem;
    }

    .footer-contact-link:hover {
      color: #ffffff;
    }

    /* Styles dedies a la page Contact & Echanges */
    .contact-profile-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.75rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }

    .direct-email-box {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }

    .direct-email-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      background: #faf7f2;
      border: 1px solid #e0d8cc;
      border-radius: 8px;
      padding: 0.9rem 1.25rem;
      margin-top: 0.75rem;
    }

    .direct-email-link {
      font-size: 1.15rem;
      font-weight: 700;
      color: #8c5511;
      text-decoration: underline;
      word-break: break-all;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .direct-email-link:hover {
      color: #6e410b;
    }

    .direct-copy-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: #ffffff;
      border: 1px solid #d4c8b6;
      color: #4a423b;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }

    .direct-copy-btn:hover {
      background: #f4ede2;
      border-color: #8c5511;
    }

    .platforms-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 768px) {
      .platforms-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .platform-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.4rem;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .platform-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    }

    .platform-card.master {
      border-color: #c7a97b;
      background: linear-gradient(180deg, #ffffff 0%, #faf6ee 100%);
    }

    .platform-badge {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 0.2rem 0.55rem;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: #ede6da;
      color: #6b645c;
    }

    .platform-badge.master {
      background: #f4ede2;
      color: #8c5511;
      font-weight: 700;
    }

    .platform-desc {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.55;
      margin: 0.5rem 0 1.25rem 0;
      flex-grow: 1;
    }

    .platform-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      padding: 0.55rem 0.9rem;
      border-radius: 6px;
      font-size: 0.85rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s;
      text-align: center;
    }

    .platform-btn.geneanet {
      background: #2e6b35;
      color: #ffffff;
    }

    .platform-btn.geneanet:hover {
      background: #235229;
    }

    .platform-btn.filae {
      background: #0077b6;
      color: #ffffff;
    }

    .platform-btn.filae:hover {
      background: #023e8a;
    }

    .platform-btn.myheritage {
      background: #c2593f;
      color: #ffffff;
    }

    .platform-btn.myheritage:hover {
      background: #9d3b24;
    }

    .contact-launcher-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }

    .webmail-buttons-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
      margin-top: 1rem;
    }

    @media (min-width: 640px) {
      .webmail-buttons-row {
        grid-template-columns: 1fr 1fr;
      }
    }

    .webmail-btn {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.75rem 1rem;
      background: #faf8f4;
      border: 1px solid #ded5c5;
      border-radius: 8px;
      color: #2b2724;
      text-decoration: none;
      font-size: 0.88rem;
      transition: all 0.2s;
    }

    .webmail-btn:hover {
      background: #ffffff;
      border-color: #8c5511;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    }

    .contact-faq-section {
      background: var(--bg-parchment);
      border: 1px solid #ded5c5;
      border-radius: 12px;
      padding: 1.75rem;
      margin-bottom: 2rem;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }

    .faq-card {
      background: var(--bg-card);
      border: 1px solid #e7dfd1;
      border-radius: 8px;
      padding: 1rem 1.2rem;
    }

    .faq-card h4 {
      margin: 0 0 0.4rem 0;
      font-size: 0.95rem;
      color: #8c5511;
    }

    .faq-card p {
      margin: 0;
      font-size: 0.85rem;
      color: #5c554e;
      line-height: 1.55;
    }


    .contact-btn {

      display: inline-block;

      background: #8c5511;

      color: #ffffff;

      text-decoration: none;

      padding: 0.5rem 1rem;

      border-radius: 6px;

      font-size: 0.85rem;

      font-weight: 600;

      transition: background 0.2s;

    }



    .contact-btn:hover {

      background: #6e410b;

    }



    .voir-aussi-section {

      margin-top: 2.5rem;

      padding-top: 1.5rem;

      border-top: 2px solid var(--border-color);

    }



    .voir-aussi-section h3 {

      font-size: 1.2rem;

      margin-top: 0;

      margin-bottom: 0.85rem;

      color: var(--gold-hover);

    }



    .voir-aussi-list {

      list-style: none;

      padding: 0;

      margin: 0;

      display: grid;

      grid-template-columns: 1fr;

      gap: 0.5rem;

    }



    .voir-aussi-list li {

      background: #faf7f2;

      border: 1px solid #ebd9c2;

      border-radius: 6px;

      padding: 0.5rem 0.85rem;

    }



    .wikilink {

      color: var(--gold-accent);

      text-decoration: underline;

      text-decoration-color: #d1b892;

      font-weight: 600;

      transition: color 0.15s;

    }



    .wikilink:hover {

      color: var(--gold-hover);

      text-decoration-color: var(--gold-hover);

    }



    .wikilink-unresolved {

      color: #8c7e70;

      font-style: italic;

    }



    .external-link {

      color: #3b6b99;

      text-decoration: none;

    }



    .external-link:hover {

      text-decoration: underline;

    }



    .article-card {

      background: var(--bg-card);

      border: 1px solid var(--border-color);

      border-radius: 12px;

      overflow: hidden;

      box-shadow: 0 2px 6px rgba(0,0,0,0.03);

      transition: transform 0.2s, box-shadow 0.2s;

      display: flex;

      flex-direction: column;

    }



    .article-card:hover {

      transform: translateY(-3px);

      box-shadow: 0 8px 20px rgba(0,0,0,0.08);

    }



    .card-thumb {

      height: 180px;

      background: #e8e2d8;

      overflow: hidden;

      position: relative;

    }



    .card-thumb img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      object-position: center 12%;

    }



    .card-body {

      padding: 1.25rem;

      flex: 1;

      display: flex;

      flex-direction: column;

    }



    .card-title {

      font-size: 1.2rem;

      font-weight: 700;

      margin: 0.2rem 0 0.5rem 0;

      line-height: 1.35;

    }



    .card-title a {

      color: var(--text-main);

      text-decoration: none;

    }



    .card-title a:hover {

      color: var(--gold-accent);

    }



    #lightbox-modal {

      display: none;

      position: fixed;

      top: 0;

      left: 0;

      width: 100vw;

      height: 100vh;

      background: rgba(12, 10, 8, 0.94);

      z-index: 1000;

      justify-content: center;

      align-items: center;

      flex-direction: column;

      padding: 1rem;

      box-sizing: border-box;

      touch-action: none;

    }



    #lightbox-img {

      max-width: 96%;

      max-height: 80vh;

      border-radius: 6px;

      box-shadow: 0 5px 25px rgba(0,0,0,0.6);

      object-fit: contain;

      user-select: none;

    }



    #lightbox-caption {

      color: #eae3d8;

      font-size: 0.9rem;

      margin-top: 0.75rem;

      text-align: center;

      max-width: 90%;

      line-height: 1.4;

    }



    #lightbox-close {

      position: absolute;

      top: 1rem;

      right: 1.25rem;

      color: #fff;

      font-size: 2.2rem;

      cursor: pointer;

      width: 44px;

      height: 44px;

      display: flex;

      align-items: center;

      justify-content: center;

      user-select: none;

    }



    .lightbox-nav-btn {

      position: absolute;

      top: 50%;

      transform: translateY(-50%);

      color: #ffffff;

      font-size: 2.5rem;

      cursor: pointer;

      background: rgba(0,0,0,0.3);

      width: 48px;

      height: 64px;

      display: flex;

      align-items: center;

      justify-content: center;

      border-radius: 4px;

      user-select: none;

      transition: background 0.2s;

    }



    .lightbox-nav-btn:hover {

      background: rgba(0,0,0,0.6);

    }



    #lightbox-prev { left: 0.75rem; }

    #lightbox-next { right: 0.75rem; }



    footer.site-footer {

      background: var(--dark-header);

      color: #8c8276;

      font-size: 0.85rem;

      text-align: center;

      padding: 2.5rem 1rem;

      margin-top: 3.5rem;

      border-top: 1px solid #332d27;

      width: 100%;

    }



    .footer-author {

      color: #d4cbbe;

      font-weight: 600;

      margin-bottom: 0.4rem;

    }



    @media (min-width: 640px) {

      .header-inner {

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

        padding: 0.85rem 1.5rem;

      }

      .search-input {

        width: 240px;

      }

      .search-input:focus {

        width: 290px;

      }

      .contact-profile-header {

        flex-direction: row;

        align-items: flex-start;

      }

      .contact-channels-grid {

        grid-template-columns: 1fr 1fr;

      }

      .form-row {

        grid-template-columns: 1fr 1fr;

      }

      .faq-grid {

        grid-template-columns: 1fr 1fr;

      }

      main.container {

        padding: 0 1.5rem;

        margin: 2rem auto;

      }

      .article-content {

        padding: 2.2rem 2rem;

      }

      .image-gallery {

        grid-template-columns: repeat(2, 1fr);

        gap: 1.25rem;

      }

      .voir-aussi-list {

        grid-template-columns: repeat(2, 1fr);

      }

    }



    @media (min-width: 1024px) {

      .article-content {

        padding: 2.5rem 3rem;

      }

      .image-gallery {

        grid-template-columns: repeat(3, 1fr);

      }

      .archive-image-wrapper.single-image {

        max-width: 90%;

      }

    }