/**
* Template Name: Axis
* Template URL: https://bootstrapmade.com/axis-bootstrap-corporate-template/
* Updated: Sep 13 2025 with Bootstrap v5.3.8
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat",  sans-serif;
  --nav-font: "Montserrat", sans-serif;
}

/*--------------------------------------------------------------
# Contact FAQ + NEMO chatbot
--------------------------------------------------------------*/
.contact-faq-hero {
  min-height: 48vh;
  display: flex;
  align-items: flex-end;
  padding: 8.5rem 0 4rem;
  background:
    linear-gradient(135deg, rgba(5, 20, 39, 0.94), rgba(10, 42, 72, 0.86)),
    url("../../contenus/images/heros/accueil.jpg") center/cover no-repeat;
  color: #fff;
}

.contact-faq-hero__inner {
  max-width: 760px;
}

.contact-faq-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  color: #d8b85c;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.contact-faq-hero h1 {
  margin: 0 0 1rem;
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 1;
}

.contact-faq-hero p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
  line-height: 1.75;
}

.contact-faq-page {
  background: #f5f7fb;
  padding: 4rem 0 5rem;
}

.contact-faq-search {
  margin: 0 0 2rem;
}

.contact-faq-search__field {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(15, 40, 68, 0.12);
  border-radius: 12px;
  padding: 0.2rem 0.5rem 0.2rem 1rem;
  box-shadow: 0 10px 30px rgba(10, 31, 55, 0.06);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-faq-search__field:focus-within {
  border-color: #c9a961;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18), 0 14px 32px rgba(10, 31, 55, 0.08);
}

.contact-faq-search__field i.bi-search {
  color: #8b9bb0;
  font-size: 1.1rem;
  margin-right: 0.6rem;
}

.contact-faq-search__field input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0.85rem 0;
  background: transparent;
  color: #122a46;
  font-size: 1rem;
  font-family: inherit;
}

.contact-faq-search__field input::placeholder {
  color: #8b9bb0;
}

.contact-faq-search__field input::-webkit-search-cancel-button {
  display: none;
}

.contact-faq-search__clear {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8b9bb0;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.contact-faq-search__clear:hover {
  color: #0a2540;
  background: rgba(10, 37, 64, 0.06);
}

.contact-faq-search__status {
  margin: 0.65rem 0 0;
  min-height: 1.2rem;
  color: #4a5870;
  font-size: 0.88rem;
  font-weight: 600;
}

.contact-faq-search__status:empty {
  display: none;
}

.contact-faq-item--hidden,
.contact-faq-group--hidden,
.contact-faq-nav a.is-hidden {
  display: none !important;
}

.contact-faq-item mark {
  background: rgba(201, 169, 97, 0.32);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

.contact-faq-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.contact-faq-nav {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 0.45rem;
}

.contact-faq-nav a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid rgba(189, 151, 54, 0.25);
  color: #19314f;
  background: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

.contact-faq-nav a:hover {
  border-left-color: #c7a348;
  color: #071a30;
  background: #fff;
}

.contact-faq-list {
  display: grid;
  gap: 1.4rem;
}

.contact-faq-group {
  scroll-margin-top: 100px;
}

.contact-faq-group h2 {
  margin: 0 0 0.9rem;
  color: #071a30;
  font-size: 1.35rem;
  font-weight: 800;
}

.contact-faq-item {
  padding: 1.15rem 1.25rem;
  margin-bottom: 0.8rem;
  border: 1px solid rgba(15, 40, 68, 0.1);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(10, 31, 55, 0.07);
}

.contact-faq-item h3 {
  margin: 0 0 0.55rem;
  color: #0d2948;
  font-size: 1.02rem;
  line-height: 1.4;
}

.contact-faq-item p {
  margin: 0;
  color: #4a5870;
  line-height: 1.7;
}

.contact-faq-item a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  color: #8b6a16;
  font-weight: 800;
}

.contact-faq-empty {
  max-width: 720px;
  padding: 2rem;
  border-radius: 6px;
  background: #fff;
  color: #34435a;
}

.contact-faq-empty i {
  color: #b9952f;
  font-size: 2rem;
}

.contact-faq-empty h2 {
  margin: 0.5rem 0;
  color: #071a30;
}

.nemo-chatbot {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 9998;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.nemo-chatbot__bubble {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  color: #0a2540;
  background: linear-gradient(145deg, #e2c270 0%, #c9a961 55%, #a98021 100%);
  box-shadow:
    0 14px 34px rgba(10, 37, 64, 0.35),
    0 4px 12px rgba(201, 169, 97, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease;
}

.nemo-chatbot.is-dragging .nemo-chatbot__bubble {
  cursor: grabbing;
  transition: none;
  transform: scale(1.08);
}

.nemo-chatbot.is-dragging .nemo-chatbot__bubble-ring,
.nemo-chatbot.is-dragging .nemo-chatbot__bubble-ring::after {
  animation: none;
  opacity: 0;
}

.nemo-chatbot__bubble:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 20px 42px rgba(10, 37, 64, 0.42),
    0 6px 16px rgba(201, 169, 97, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.nemo-chatbot.is-open .nemo-chatbot__bubble {
  transform: scale(0.9);
}

.nemo-chatbot__bubble-ring {
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(201, 169, 97, 0.6);
  border-radius: 50%;
  animation: nemo-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

.nemo-chatbot__bubble-ring::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 50%;
  animation: nemo-pulse 2.4s ease-out infinite 0.6s;
}

.nemo-chatbot.is-open .nemo-chatbot__bubble-ring,
.nemo-chatbot.is-open .nemo-chatbot__bubble-ring::after {
  animation: none;
  opacity: 0;
}

@keyframes nemo-pulse {
  0% { transform: scale(1); opacity: 0.85; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.nemo-chatbot__bubble img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(10, 37, 64, 0.25);
}

.nemo-chatbot__bubble-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font-size: 0;
  font-weight: 900;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(34, 197, 94, 0.4);
}

.nemo-chatbot__bubble-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: nemo-blink 1.6s ease-in-out infinite;
}

@keyframes nemo-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.nemo-chatbot__backdrop {
  display: none;
}

.nemo-chatbot__panel {
  position: fixed;
  right: 90px;
  top: 1.5rem;
  width: min(420px, calc(100vw - 110px));
  height: calc(100vh - 3rem);
  max-height: 720px;
  padding: 0;
  margin: 0;
  scroll-margin-top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 18px;
  background: #f5f7fb;
  box-shadow:
    0 30px 80px rgba(4, 14, 28, 0.38),
    0 12px 24px rgba(10, 37, 64, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: translateX(20px) scale(0.96);
  transform-origin: right top;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 9999;
}

.nemo-chatbot.is-open .nemo-chatbot__panel {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.nemo-chatbot__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background:
    radial-gradient(circle at top right, rgba(201, 169, 97, 0.25), transparent 60%),
    linear-gradient(135deg, #071a30 0%, #0a2540 50%, #143863 100%);
  color: #fff;
}

.nemo-chatbot__header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.5), transparent);
}

.nemo-chatbot__identity {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.nemo-chatbot__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(201, 169, 97, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.nemo-chatbot__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.nemo-chatbot__avatar i {
  color: #c9a961;
  font-size: 1.3rem;
}

.nemo-chatbot__avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0a2540;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  z-index: 2;
}

.nemo-chatbot__identity strong,
.nemo-chatbot__identity span {
  display: block;
}

.nemo-chatbot__identity strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.nemo-chatbot__identity span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.74rem;
  font-weight: 500;
}

.nemo-chatbot__close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.nemo-chatbot__close:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(90deg);
}

.nemo-chatbot__messages {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem 1rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at top left, rgba(201, 169, 97, 0.06), transparent 50%),
    #f5f7fb;
}

.nemo-chatbot__messages::-webkit-scrollbar {
  width: 6px;
}

.nemo-chatbot__messages::-webkit-scrollbar-thumb {
  background: rgba(10, 37, 64, 0.18);
  border-radius: 999px;
}

.nemo-chatbot__messages::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 37, 64, 0.32);
}

.nemo-message {
  max-width: 86%;
  padding: 0.7rem 0.95rem;
  border-radius: 16px;
  line-height: 1.55;
  font-size: 0.9rem;
  animation: nemo-fade-in 280ms ease-out;
}

@keyframes nemo-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.nemo-message p {
  margin: 0;
}

.nemo-message--bot {
  align-self: flex-start;
  background: #fff;
  color: #22344d;
  border: 1px solid rgba(10, 37, 64, 0.07);
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(10, 37, 64, 0.05);
}

.nemo-message--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #0a2540, #143863);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.22);
}

.nemo-message__note {
  margin-top: 0.5rem !important;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(201, 169, 97, 0.35);
  color: #a8842a;
  font-size: 0.74rem;
  font-weight: 700;
  font-style: italic;
}

.nemo-message__sources {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(10, 37, 64, 0.08);
}

.nemo-message__sources strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #a8842a;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nemo-message__sources ul {
  padding-left: 1.1rem;
  margin: 0;
}

.nemo-message__sources li {
  margin: 0.25rem 0;
  color: #4a5870;
  font-size: 0.78rem;
}

.nemo-message__sources a {
  color: #0d4f85;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.nemo-message__sources a:hover {
  border-bottom-color: #c9a961;
}

.nemo-message__suggestions {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(10, 37, 64, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nemo-message__suggestions strong {
  display: block;
  color: #a8842a;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nemo-message__suggestion {
  display: block;
  text-align: left;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #fdf6e3);
  color: #0a2540;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 160ms ease;
}

.nemo-message__suggestion:hover {
  border-color: #c9a961;
  background: linear-gradient(135deg, #fdf6e3, #f6e9c4);
  transform: translateX(2px);
  box-shadow: 0 3px 10px rgba(201, 169, 97, 0.22);
}

.nemo-message.is-waiting {
  padding: 0.85rem 1rem;
}

.nemo-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 12px;
}

.nemo-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9a961;
  animation: nemo-typing 1.3s ease-in-out infinite;
}

.nemo-typing span:nth-child(2) {
  animation-delay: 0.18s;
}

.nemo-typing span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes nemo-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.nemo-chatbot__suggestions {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 1rem 0.85rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.nemo-chatbot__suggestions::-webkit-scrollbar {
  display: none;
}

.nemo-chatbot__suggestions button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  background: #fff;
  color: #0a2540;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
  box-shadow: 0 1px 3px rgba(10, 37, 64, 0.06);
}

.nemo-chatbot__suggestions button:hover {
  border-color: #c9a961;
  background: linear-gradient(135deg, #fff, #fdf6e3);
  color: #071a30;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(201, 169, 97, 0.18);
}

.nemo-chatbot__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem 0.9rem;
  border-top: 1px solid rgba(10, 37, 64, 0.08);
  background: #fff;
}

.nemo-chatbot__form textarea {
  min-height: 44px;
  max-height: 110px;
  resize: none;
  border: 1px solid rgba(10, 37, 64, 0.14);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  color: #122a46;
  font-size: 0.88rem;
  font-family: inherit;
  background: #f7f9fc;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.nemo-chatbot__form textarea::placeholder {
  color: #8b9bb0;
}

.nemo-chatbot__form textarea:focus {
  border-color: #c9a961;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}

.nemo-chatbot__form button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #d8b85c, #c9a961 60%, #a98021);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(201, 169, 97, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.nemo-chatbot__form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(201, 169, 97, 0.45);
}

.nemo-chatbot__form button:active {
  transform: translateY(0);
}

.nemo-chatbot__form.is-loading button {
  opacity: 0.6;
  pointer-events: none;
}

.nemo-chatbot__form.is-loading button i {
  animation: nemo-spin 0.8s linear infinite;
}

@keyframes nemo-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 991px) {
  .contact-faq-layout {
    grid-template-columns: 1fr;
  }

  .contact-faq-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    padding-bottom: 0.35rem;
  }

  .contact-faq-nav a {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 3px solid rgba(189, 151, 54, 0.25);
  }
}

@media (max-width: 575px) {
  .nemo-chatbot {
    right: 1rem;
    bottom: 1rem;
  }

  .nemo-chatbot__bubble {
    width: 58px;
    height: 58px;
  }

  .nemo-chatbot__bubble img {
    width: 48px;
    height: 48px;
  }

  .nemo-chatbot__panel {
    width: calc(100vw - 1rem);
    height: min(85vh, calc(100vh - 2rem));
    border-radius: 16px;
  }

  .nemo-chatbot__header {
    padding: 0.85rem 0.95rem;
  }

  .nemo-chatbot__messages {
    padding: 0.9rem 0.85rem;
  }
}

/* Global Colors - Navy / White / Gold */
:root {
  --background-color: #ffffff;
  --default-color: #4a5568;
  --heading-color: #0a2540;
  --accent-color: #c9a961;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  --nav-color: #0a2540;
  --nav-hover-color: #c9a961;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #0a2540;
  --nav-dropdown-hover-color: #c9a961;
}

/* Color Presets */

.light-background {
  --background-color: #f4f7fb;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #0a2540;
  --default-color: #e3e3e3;
  --heading-color: #ffffff;
  --accent-color: #c9a961;
  --surface-color: #143863;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 48px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 22px;
  margin: 0;
  font-weight: 400;
  color: var(--heading-color);
}

.scrolled .header {
  isolation: isolate;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.scrolled .header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 14px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 18px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 18px;
  font-weight: 400;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  text-align: center;
  padding: 40px 0 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .breadcrumbs {
  margin-bottom: 1.5rem;
}

.page-title .breadcrumbs .breadcrumb {
  justify-content: center;
  margin: 0;
  padding: 0;
  background: none;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item.active {
  color: var(--accent-color);
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a:hover {
  color: var(--accent-color);
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a i {
  font-size: 0.9rem;
  margin-right: 0.2rem;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.page-title .title-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 0;
}

.page-title .title-wrapper h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 400;
  color: var(--heading-color);
}

.page-title .title-wrapper p {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-title .title-wrapper h1 {
    font-size: 2rem;
  }

  .page-title .title-wrapper p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .page-title .title-wrapper h1 {
    font-size: 1.75rem;
  }
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 87px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--heading-color);
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
}

@media (max-width: 768px) {
  .section-title h2 {
    font-size: 2.5rem;
  }
}

.section-title .subtitle {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  position: relative;
}

.section-title .subtitle::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--accent-color);
}

.section-title p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  max-width: 900px;
  margin: 0 auto;
  text-wrap: balance;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding: 120px 0 100px;
  position: relative;
  overflow: hidden;
}

.hero .hero-content h1 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 2rem;
  color: var(--heading-color);
}

@media (max-width: 768px) {
  .hero .hero-content h1 {
    font-size: 2.5rem;
  }
}

.hero .hero-content p {
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 3rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.hero .hero-cta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 4rem;
  align-items: center;
}

@media (max-width: 576px) {
  .hero .hero-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.hero .hero-cta .btn-primary {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 14px 32px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero .hero-cta .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.hero .hero-cta .btn-secondary {
  color: var(--heading-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.hero .hero-cta .btn-secondary i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.hero .hero-cta .btn-secondary:hover {
  color: var(--accent-color);
  transform: translateX(5px);
}

.hero .hero-stats {
  display: flex;
  gap: 3rem;
}

@media (max-width: 768px) {
  .hero .hero-stats {
    gap: 2rem;
  }
}

@media (max-width: 576px) {
  .hero .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.hero .hero-stats .stat-item .stat-number {
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent-color);
  margin-bottom: 0.25rem;
}

.hero .hero-stats .stat-item .stat-label {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.hero .hero-image {
  position: relative;
}

.hero .hero-image img {
  border-radius: 12px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.hero .hero-image .floating-card {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--surface-color);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--default-color), transparent 85%);
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 200px;
}

@media (max-width: 768px) {
  .hero .hero-image .floating-card {
    bottom: 10px;
    left: 10px;
    padding: 1rem;
    min-width: 160px;
  }
}

.hero .hero-image .floating-card .card-icon {
  width: 50px;
  height: 50px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .hero-image .floating-card .card-icon i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.hero .hero-image .floating-card .card-content h5 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--heading-color);
}

.hero .hero-image .floating-card .card-content .growth-percentage {
  font-size: 1.25rem;
  font-weight: 700;
  color: #22c55e;
}

@media (max-width: 992px) {
  .hero {
    padding: 80px 0 60px;
  }

  .hero::before {
    display: none;
  }

  .hero .row {
    flex-direction: column-reverse;
  }

  .hero .col-lg-6:first-child {
    margin-top: 3rem;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  padding-top: 120px;
  padding-bottom: 120px;
}

.about .content h2 {
  font-size: 42px;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 30px;
  font-family: var(--heading-font);
}

@media (max-width: 768px) {
  .about .content h2 {
    font-size: 32px;
  }
}

.about .content .lead {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 40px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.about .content p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 25px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.about .stats-row {
  display: flex;
  gap: 40px;
  margin: 60px 0;
}

@media (max-width: 576px) {
  .about .stats-row {
    flex-direction: column;
    gap: 30px;
  }
}

.about .stats-row .stat-item .stat-number {
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent-color);
  font-family: var(--heading-font);
}

.about .stats-row .stat-item .stat-label {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-top: 8px;
}

.about .cta-section {
  display: flex;
  gap: 20px;
  margin-top: 50px;
}

@media (max-width: 576px) {
  .about .cta-section {
    flex-direction: column;
  }
}

.about .cta-section .btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.about .cta-section .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  color: var(--contrast-color);
}

.about .cta-section .btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background-color: transparent;
  color: var(--heading-color);
  text-decoration: none;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.about .cta-section .btn-outline:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.about .image-wrapper {
  position: relative;
}

.about .image-wrapper img {
  border-radius: 12px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 90%);
}

.about .image-wrapper .floating-card {
  position: absolute;
  bottom: -30px;
  right: -30px;
  background-color: var(--surface-color);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 85%);
  max-width: 280px;
}

@media (max-width: 992px) {
  .about .image-wrapper .floating-card {
    position: static;
    margin-top: 30px;
    max-width: none;
  }
}

.about .image-wrapper .floating-card .card-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.about .image-wrapper .floating-card .card-content .icon {
  width: 60px;
  height: 60px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about .image-wrapper .floating-card .card-content .icon i {
  font-size: 24px;
  color: var(--accent-color);
}

.about .image-wrapper .floating-card .card-content .text h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 5px 0;
  color: var(--heading-color);
}

.about .image-wrapper .floating-card .card-content .text p {
  font-size: 14px;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.6;
}

@media (max-width: 992px) {
  .about .row {
    text-align: center;
  }

  .about .content {
    margin-bottom: 60px;
  }

  .about .stats-row {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  background-color: color-mix(in srgb, var(--background-color), var(--accent-color) 2%);
}

.services .service-item {
  padding: 60px 40px;
  background-color: var(--surface-color);
  border-radius: 8px;
  transition: all 0.4s ease-in-out;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.services .service-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 30%));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-in-out;
}

.services .service-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--default-color), transparent 90%);
}

.services .service-item:hover::before {
  transform: scaleX(1);
}

.services .service-item:hover .service-icon {
  transform: scale(1.1);
}

.services .service-item:hover .service-link {
  color: var(--accent-color);
}

.services .service-item:hover .service-link i {
  transform: translateX(8px);
}

.services .service-item .service-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 20%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  transition: transform 0.4s ease-in-out;
  flex-shrink: 0;
}

.services .service-item .service-icon i {
  font-size: 32px;
  color: var(--contrast-color);
}

.services .service-item h3 {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 20px;
  line-height: 1.3;
}

.services .service-item p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 32px;
  flex-grow: 1;
}

.services .service-item .service-link {
  color: var(--heading-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease-in-out;
  align-self: flex-start;
}

.services .service-item .service-link i {
  font-size: 16px;
  transition: transform 0.3s ease-in-out;
}

@media (max-width: 768px) {
  .services .service-item {
    padding: 40px 24px;
  }

  .services .service-item .service-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
  }

  .services .service-item .service-icon i {
    font-size: 28px;
  }

  .services .service-item h3 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .services .service-item p {
    font-size: 15px;
    margin-bottom: 24px;
  }
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us {
  padding: 100px 0;
}

.why-us .content {
  margin-bottom: 60px;
}

.why-us .content h2 {
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 30px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .why-us .content h2 {
    font-size: 2rem;
  }
}

.why-us .content p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.why-us .image-wrapper {
  position: relative;
}

.why-us .image-wrapper img {
  border-radius: 8px;
  box-shadow: 0 20px 40px color-mix(in srgb, var(--default-color), transparent 85%);
  transition: transform 0.4s ease-in-out;
}

.why-us .image-wrapper img:hover {
  transform: translateY(-8px);
}

.why-us .features-grid {
  margin-top: 80px;
}

.why-us .feature-item {
  display: flex;
  gap: 25px;
  padding: 40px 0;
  transition: transform 0.3s ease-in-out;
}

.why-us .feature-item:hover {
  transform: translateY(-5px);
}

.why-us .feature-item:hover .icon-wrapper {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .why-us .feature-item {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 30px 0;
  }
}

.why-us .icon-wrapper {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  transition: all 0.4s ease-in-out;
}

@media (max-width: 768px) {
  .why-us .icon-wrapper {
    margin: 0 auto;
  }
}

.why-us .feature-content {
  flex: 1;
}

.why-us .feature-content h3 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 15px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .why-us .feature-content h3 {
    font-size: 1.25rem;
  }
}

.why-us .feature-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

@media (max-width: 992px) {
  .why-us .content {
    margin-bottom: 40px;
    text-align: center;
  }

  .why-us .features-grid {
    margin-top: 60px;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 80px;
  padding: 0;
  list-style: none;
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters {
    margin-bottom: 60px;
    gap: 8px;
  }
}

.portfolio .portfolio-filters li {
  padding: 20px 0;
  margin: 0 40px;
  font-size: 0.95rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.4s ease;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  position: relative;
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters li {
    margin: 0 20px;
    padding: 16px 0;
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .portfolio .portfolio-filters li {
    margin: 0 12px;
    padding: 14px 0;
    font-size: 0.85rem;
  }
}

.portfolio .portfolio-filters li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background-color: var(--accent-color);
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

.portfolio .portfolio-filters li:hover {
  color: var(--default-color);
}

.portfolio .portfolio-filters li:hover::after {
  width: 100%;
}

.portfolio .portfolio-filters li.filter-active {
  color: var(--default-color);
  font-weight: 400;
}

.portfolio .portfolio-filters li.filter-active::after {
  width: 100%;
}

.portfolio .portfolio-card {
  height: 100%;
}

.portfolio .portfolio-card .project-visual {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.portfolio .portfolio-card .project-visual img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

@media (max-width: 768px) {
  .portfolio .portfolio-card .project-visual img {
    height: 250px;
  }
}

.portfolio .portfolio-card .project-visual .project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(54, 144, 231, 0.85), rgba(54, 144, 231, 0.75));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.portfolio .portfolio-card .project-visual .project-overlay .overlay-content {
  display: flex;
  gap: 20px;
}

.portfolio .portfolio-card .project-visual .project-overlay .overlay-content a {
  width: 48px;
  height: 48px;
  background-color: var(--contrast-color);
  color: var(--accent-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.portfolio .portfolio-card .project-visual .project-overlay .overlay-content a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.portfolio .portfolio-card .project-visual:hover img {
  transform: scale(1.05);
}

.portfolio .portfolio-card .project-visual:hover .project-overlay {
  opacity: 1;
  visibility: visible;
}

.portfolio .portfolio-card .project-details {
  padding: 20px 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.portfolio .portfolio-card .project-details .project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.portfolio .portfolio-card .project-details .project-header .project-category {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-color);
}

.portfolio .portfolio-card .project-details .project-header .project-year {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-weight: 300;
}

.portfolio .portfolio-card .project-details .project-title {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 20px;
  color: var(--heading-color);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .portfolio .portfolio-card .project-details .project-title {
    font-size: 1.35rem;
  }
}

.portfolio .portfolio-card .project-details .project-description {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 30px;
  line-height: 1.7;
  flex-grow: 1;
}

.portfolio .portfolio-card .project-details .project-meta {
  margin-top: auto;
}

.portfolio .portfolio-card .project-details .project-meta .client-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--default-color);
  margin-bottom: 16px;
}

.portfolio .portfolio-card .project-details .project-meta .project-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.portfolio .portfolio-card .project-details .project-meta .project-scope .scope-item {
  font-size: 0.8rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 6px 0;
  position: relative;
}

.portfolio .portfolio-card .project-details .project-meta .project-scope .scope-item:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -8px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.portfolio .portfolio-conclusion {
  margin-top: 120px;
  text-align: center;
}

@media (max-width: 768px) {
  .portfolio .portfolio-conclusion {
    margin-top: 80px;
  }
}

.portfolio .portfolio-conclusion .conclusion-content {
  max-width: 600px;
  margin: 0 auto;
}

.portfolio .portfolio-conclusion .conclusion-content h4 {
  font-size: 1.75rem;
  font-weight: 300;
  margin-bottom: 20px;
  color: var(--heading-color);
}

@media (max-width: 768px) {
  .portfolio .portfolio-conclusion .conclusion-content h4 {
    font-size: 1.5rem;
  }
}

.portfolio .portfolio-conclusion .conclusion-content p {
  font-size: 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 40px;
  line-height: 1.7;
}

.portfolio .portfolio-conclusion .conclusion-content .conclusion-actions {
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: center;
}

@media (max-width: 576px) {
  .portfolio .portfolio-conclusion .conclusion-content .conclusion-actions {
    flex-direction: column;
    gap: 20px;
  }
}

.portfolio .portfolio-conclusion .conclusion-content .conclusion-actions .primary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s ease;
}

.portfolio .portfolio-conclusion .conclusion-content .conclusion-actions .primary-action i {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.portfolio .portfolio-conclusion .conclusion-content .conclusion-actions .primary-action:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-1px);
}

.portfolio .portfolio-conclusion .conclusion-content .conclusion-actions .primary-action:hover i {
  transform: translateX(2px);
}

.portfolio .portfolio-conclusion .conclusion-content .conclusion-actions .secondary-action {
  color: var(--default-color);
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none;
  position: relative;
}

.portfolio .portfolio-conclusion .conclusion-content .conclusion-actions .secondary-action::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--default-color);
  transition: width 0.3s ease;
}

.portfolio .portfolio-conclusion .conclusion-content .conclusion-actions .secondary-action:hover {
  color: var(--default-color);
}

.portfolio .portfolio-conclusion .conclusion-content .conclusion-actions .secondary-action:hover::after {
  width: 100%;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  text-align: center;
  margin-bottom: 40px;
  transition: all 0.3s ease-in-out;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 30px;
}

.team .team-member .member-img img {
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: auto;
  filter: grayscale(100%);
}

.team .team-member .member-info h4 {
  font-weight: 300;
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--heading-color);
  line-height: 1.3;
}

.team .team-member .member-info span {
  display: block;
  font-size: 0.9rem;
  color: var(--accent-color);
  font-weight: 400;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.team .team-member .member-info p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 25px;
  padding: 0 10px;
}

.team .team-member .member-info .social {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.team .team-member .member-info .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 50%;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  transition: all 0.3s ease-in-out;
}

.team .team-member .member-info .social a:hover {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.team .team-member:hover .member-img img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

@media (max-width: 992px) {
  .team .team-member .member-info h4 {
    font-size: 1.3rem;
  }

  .team .team-member .member-info p {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .team .team-member .member-info h4 {
    font-size: 1.2rem;
  }

  .team .team-member .member-info p {
    padding: 0;
    font-size: 0.85rem;
  }

  .team .team-member .member-info .social {
    gap: 12px;
  }

  .team .team-member .member-info .social a {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  padding: 120px 0 100px;
}

.contact .info-item {
  margin-bottom: 80px;
}

.contact .info-item .info-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.contact .info-item .info-icon i {
  font-size: 24px;
  color: var(--accent-color);
}

.contact .info-item .info-content h4 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 16px;
  color: var(--heading-color);
  letter-spacing: -0.3px;
}

.contact .info-item .info-content p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

.contact .contact-details .detail-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 48px;
}

.contact .contact-details .detail-item:last-child {
  margin-bottom: 0;
}

.contact .contact-details .detail-item .detail-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact .contact-details .detail-item .detail-icon i {
  font-size: 18px;
  color: var(--accent-color);
}

.contact .contact-details .detail-item .detail-content {
  flex: 1;
}

.contact .contact-details .detail-item .detail-content .detail-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.contact .contact-details .detail-item .detail-content .detail-value {
  display: block;
  font-size: 16px;
  color: var(--default-color);
  line-height: 1.6;
}

.contact .form-header {
  margin-bottom: 48px;
}

.contact .form-header h3 {
  font-size: 32px;
  font-weight: 300;
  color: var(--heading-color);
  margin: 0;
  letter-spacing: -0.4px;
}

.contact .form-wrapper {
  background-color: var(--surface-color);
  padding: 20px 30px;
  border-radius: 10px;
}

.contact .form-wrapper .form-group {
  margin-bottom: 32px;
}

.contact .form-wrapper .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 12px;
  letter-spacing: 0.2px;
}

.contact .form-wrapper .form-group input,
.contact .form-wrapper .form-group select,
.contact .form-wrapper .form-group textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--default-color);
  background-color: var(--surface-color);
  transition: all 0.3s ease;
  font-family: inherit;
}

.contact .form-wrapper .form-group input:focus,
.contact .form-wrapper .form-group select:focus,
.contact .form-wrapper .form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.contact .form-wrapper .form-group input::placeholder,
.contact .form-wrapper .form-group select::placeholder,
.contact .form-wrapper .form-group textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.contact .form-wrapper .form-group select {
  cursor: pointer;
}

.contact .form-wrapper .form-group select option {
  padding: 10px;
}

.contact .form-wrapper .form-group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.contact .form-wrapper .submit-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  border-radius: 8px;
  padding: 18px 36px;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
}

.contact .form-wrapper .submit-btn i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.contact .form-wrapper .submit-btn:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.contact .form-wrapper .submit-btn:hover i {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .contact {
    padding: 80px 0 60px;
  }

  .contact .info-item {
    margin-bottom: 50px;
  }

  .contact .info-item .info-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
  }

  .contact .info-item .info-icon i {
    font-size: 20px;
  }

  .contact .info-item .info-content h4 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .contact .contact-details .detail-item {
    margin-bottom: 32px;
  }

  .contact .form-header {
    margin-bottom: 32px;
  }

  .contact .form-header h3 {
    font-size: 24px;
  }

  .contact .modern-form .form-group {
    margin-bottom: 24px;
  }
}
/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details {
  padding: 80px 0;
}

.service-details .service-content .service-hero {
  margin-bottom: 60px;
}

.service-details .service-content .service-hero .service-image {
  border-radius: 8px;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.service-details .service-content .service-description {
  margin-bottom: 80px;
}

.service-details .service-content .service-description .service-title {
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 24px;
  line-height: 1.3;
}

.service-details .service-content .service-description .lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 32px;
}

.service-details .service-content .service-description p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 24px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.service-details .service-content .service-features {
  margin-bottom: 80px;
}

.service-details .service-content .service-features h3 {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 40px;
}

.service-details .service-content .service-features .feature-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.service-details .service-content .service-features .feature-item .feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-details .service-content .service-features .feature-item .feature-icon i {
  font-size: 20px;
  color: var(--accent-color);
}

.service-details .service-content .service-features .feature-item .feature-content h4 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 12px;
}

.service-details .service-content .service-features .feature-item .feature-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

.service-details .service-content .service-process h3 {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 40px;
}

.service-details .service-content .service-process .process-timeline .process-step {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  position: relative;
}

.service-details .service-content .service-process .process-timeline .process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  width: 2px;
  height: 40px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
}

.service-details .service-content .service-process .process-timeline .process-step .step-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1rem;
}

.service-details .service-content .service-process .process-timeline .process-step .step-content {
  flex: 1;
}

.service-details .service-content .service-process .process-timeline .process-step .step-content h4 {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 12px;
}

.service-details .service-content .service-process .process-timeline .process-step .step-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

.service-details .service-sidebar .sidebar-widget {
  background-color: var(--surface-color);
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 32px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-sidebar .sidebar-widget h4 {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 24px;
}

.service-details .service-sidebar .service-info .service-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-details .service-sidebar .service-info .service-details-list li {
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  font-size: 0.95rem;
  line-height: 1.6;
}

.service-details .service-sidebar .service-info .service-details-list li:last-child {
  border-bottom: none;
}

.service-details .service-sidebar .service-info .service-details-list li strong {
  color: var(--heading-color);
  font-weight: 500;
}

.service-details .service-sidebar .related-services .related-service-list .related-service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-details .service-sidebar .related-services .related-service-list .related-service-item:last-child {
  border-bottom: none;
}

.service-details .service-sidebar .related-services .related-service-list .related-service-item:hover {
  color: var(--accent-color);
  transform: translateX(4px);
}

.service-details .service-sidebar .related-services .related-service-list .related-service-item i {
  font-size: 16px;
  width: 20px;
}

.service-details .service-sidebar .related-services .related-service-list .related-service-item span {
  font-size: 0.95rem;
}

.service-details .service-sidebar .cta-widget {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), transparent 20%));
  color: var(--contrast-color);
}

.service-details .service-sidebar .cta-widget .cta-content {
  text-align: center;
}

.service-details .service-sidebar .cta-widget .cta-content h4 {
  color: var(--contrast-color);
  margin-bottom: 16px;
}

.service-details .service-sidebar .cta-widget .cta-content p {
  color: color-mix(in srgb, var(--contrast-color), transparent 15%);
  margin-bottom: 24px;
  line-height: 1.6;
}

.service-details .service-sidebar .cta-widget .cta-content .btn-cta {
  display: inline-block;
  background-color: var(--contrast-color);
  color: var(--accent-color);
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.service-details .service-sidebar .cta-widget .cta-content .btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--default-color), transparent 85%);
  color: var(--accent-color);
}

.service-details .service-sidebar .contact-info .contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.service-details .service-sidebar .contact-info .contact-item:last-child {
  margin-bottom: 0;
}

.service-details .service-sidebar .contact-info .contact-item i {
  font-size: 18px;
  color: var(--accent-color);
  width: 24px;
}

.service-details .service-sidebar .contact-info .contact-item div strong {
  display: block;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 4px;
}

.service-details .service-sidebar .contact-info .contact-item div span {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .service-details {
    padding: 60px 0;
  }

  .service-details .service-content .service-hero {
    margin-bottom: 40px;
  }

  .service-details .service-content .service-hero .service-image {
    height: 300px;
  }

  .service-details .service-content .service-description {
    margin-bottom: 60px;
  }

  .service-details .service-content .service-description .service-title {
    font-size: 2rem;
  }

  .service-details .service-content .service-description .lead {
    font-size: 1.1rem;
  }

  .service-details .service-content .service-features,
  .service-details .service-content .service-process {
    margin-bottom: 60px;
  }

  .service-details .service-content .service-features h3,
  .service-details .service-content .service-process h3 {
    font-size: 1.7rem;
  }

  .service-details .service-content .process-timeline .process-step {
    gap: 16px;
  }

  .service-details .service-content .process-timeline .process-step:not(:last-child)::after {
    left: 19px;
  }

  .service-details .service-content .process-timeline .process-step .step-number {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .service-details .service-sidebar {
    margin-top: 40px;
  }

  .service-details .service-sidebar .sidebar-widget {
    padding: 24px;
  }
}

/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
.terms-of-service .tos-header {
  margin-bottom: 60px;
}

.terms-of-service .tos-header .last-updated {
  display: inline-block;
  padding: 8px 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 30px;
  color: var(--accent-color);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.terms-of-service .tos-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

/* ============================================================
   SECTION ACTUALITÉS — Bento éditorial asymétrique
   Archetype : Editorial Luxury (warm cream, variable serif, noise)
   ============================================================ */
.section-news {
  position: relative;
  padding: clamp(5rem, 10vh, 8rem) 0;
  background:
    radial-gradient(ellipse at 15% 0%,
      rgba(201, 169, 97, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%,
      rgba(10, 37, 64, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #fdfaf4 0%, #f7f2e8 100%);
  overflow: hidden;
}
.section-news::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.15  0 0 0 0 0.15  0 0 0 0.6 0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.045;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.section-news > .container { position: relative; z-index: 1; }

/* ── En-tête : eyebrow + titre éditorial ────────────────────── */
.news-heading {
  max-width: 720px;
  margin: 0 0 clamp(3rem, 6vh, 4.5rem);
}
.news-heading__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(201, 169, 97, 0.95);
  background: rgba(201, 169, 97, 0.07);
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 999px;
}
.news-heading__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #c9a961;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
  animation: newsPulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes newsPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25); }
  50%      { box-shadow: 0 0 0 7px rgba(201, 169, 97, 0); }
}
.news-heading__title {
  margin: 1.25rem 0 1rem;
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #0a2540;
}
.news-heading__accent {
  display: block;
  margin-top: 0.15em;
  font-style: italic;
  font-weight: 400;
  color: rgba(201, 169, 97, 0.95);
}
.news-heading__lead {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(10, 37, 64, 0.68);
  max-width: 58ch;
  margin: 0;
}
.news-heading__lead em {
  font-style: italic;
  color: rgba(10, 37, 64, 0.85);
}

/* ── Bento asymétrique : 1 feature + jusqu'à 4 secondaires ──── */
.news-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}
.news-card { grid-column: span 12; margin: 0; }

/* Desktop : feature prend 7 colonnes, 2 secondaires stack à droite (5 col) */
@media (min-width: 992px) {
  .news-card--feature { grid-column: span 7; grid-row: span 2; }
  .news-card--standard { grid-column: span 5; }

  /* Si un seul secondaire, il prend toute la hauteur */
  .news-bento--count-1 .news-card--standard { grid-row: span 2; }

  /* Avec 3 ou 4 secondaires, les 2 restants passent sous la feature */
  .news-bento--count-3 .news-card--standard:nth-child(4),
  .news-bento--count-4 .news-card--standard:nth-child(4),
  .news-bento--count-4 .news-card--standard:nth-child(5) {
    grid-column: span 6;
    grid-row: auto;
  }
}

/* ── Carte : double-bezel (outer cream + inner white) ───────── */
.news-card__shell {
  position: relative;
  height: 100%;
  padding: 0.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(145deg,
    rgba(253, 250, 244, 0.95) 0%,
    rgba(245, 238, 224, 0.85) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(201, 169, 97, 0.16),
    0 20px 40px -24px rgba(10, 37, 64, 0.2),
    0 6px 16px -10px rgba(10, 37, 64, 0.12);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-card__core {
  position: relative;
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: calc(1.5rem - 0.5rem);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}
.news-card__core::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg,
    #c9a961 0%,
    rgba(201, 169, 97, 0.3) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-card:hover .news-card__shell {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(201, 169, 97, 0.38),
    0 30px 60px -28px rgba(10, 37, 64, 0.3),
    0 10px 25px -14px rgba(10, 37, 64, 0.18);
}
.news-card:hover .news-card__core::after { transform: scaleX(1); }

/* ── Feature (À la une) : typographie éditoriale massive ────── */
.news-card--feature .news-card__core {
  padding: clamp(2rem, 3vw, 3rem);
  gap: 1.25rem;
  justify-content: center;
}
.news-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.news-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a2540;
  background: linear-gradient(135deg, #c9a961, #d4af37);
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(201, 169, 97, 0.4);
}
.news-chip i { font-size: 0.85rem; }
/* Badge « Réservé aux membres » : teinte marine distincte du chip doré. */
.news-chip--membre {
  color: #ffffff;
  background: linear-gradient(135deg, #0a2540, #17466f);
  box-shadow: 0 4px 12px -4px rgba(10, 37, 64, 0.5);
}
.news-card--standard .news-chip--membre {
  align-self: flex-start;
  margin-bottom: 0.6rem;
}
.news-card__date {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(10, 37, 64, 0.55);
  text-transform: uppercase;
}
.news-card__title {
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0a2540;
  margin: 0;
}
.news-card__title--xl {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
}
.news-card__excerpt {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(10, 37, 64, 0.72);
  margin: 0;
}
.news-card__excerpt--compact {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(10, 37, 64, 0.65);
}

/* ── CTA principal (feature) : button-in-button ─────────────── */
.news-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.7rem 0.9rem 0.7rem 1.4rem;
  background: #0a2540;
  color: #fdfaf4;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 999px;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.5s ease,
    box-shadow 0.5s ease;
}
.news-card__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: rgba(253, 250, 244, 0.12);
  border-radius: 999px;
  font-size: 0.9rem;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-card__cta:hover {
  background: #c9a961;
  color: #0a2540;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(201, 169, 97, 0.5);
}
.news-card__cta:hover .news-card__cta-icon {
  transform: translate(2px, -2px) rotate(4deg);
  background: rgba(10, 37, 64, 0.12);
}
.news-card__cta:active { transform: translateY(0) scale(0.98); }

/* ── Lien secondaire : lien texte souligné animé ───────────── */
.news-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.25rem;
  color: #0a2540;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  width: fit-content;
}
.news-card__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-card:hover .news-card__link::after { transform: scaleX(1); }
.news-card:hover .news-card__link i {
  transform: translateX(3px);
  color: #c9a961;
}
.news-card__link i { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease; }

/* ── Datebox standard : jour XXL + mois bloc ────────────────── */
.news-card__datebox {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: rgba(201, 169, 97, 0.1);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 0.75rem;
  width: fit-content;
}
.news-card__day {
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  color: #0a2540;
}
.news-card__month {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(201, 169, 97, 0.95);
}

/* ── État vide ──────────────────────────────────────────────── */
.news-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 2rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed rgba(201, 169, 97, 0.35);
  border-radius: 1.25rem;
  text-align: center;
}
.news-empty__icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(201, 169, 97, 0.12);
  color: #c9a961;
  border-radius: 50%;
  margin-bottom: 1.25rem;
}
.news-empty__text {
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-style: italic;
  color: rgba(10, 37, 64, 0.6);
  max-width: 36ch;
  margin: 0;
}

/* ── Reveal adapté au bento ─────────────────────────────────── */
/* ── Teaser accueil : présentation courte + lien vers /actualites ─ */
.news-teaser {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
.news-teaser__media {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  min-height: 340px;
  box-shadow: 0 24px 60px rgba(10, 37, 64, 0.14);
}
.news-teaser__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s cubic-bezier(0.32, 0.72, 0, 1);
}
.news-teaser:hover .news-teaser__media img { transform: scale(1.05); }
.news-teaser__media-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 37, 64, 0.05) 0%, transparent 45%, rgba(10, 37, 64, 0.55) 100%);
}
.news-teaser__media-badge {
  position: absolute; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(253, 250, 244, 0.92);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #0a2540;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.news-teaser__media-badge i { color: #c9a961; }

.news-teaser__panel { display: flex; flex-direction: column; justify-content: center; }
.news-teaser__list {
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  border-top: 1px solid rgba(10, 37, 64, 0.1);
}
.news-teaser__item { border-bottom: 1px solid rgba(10, 37, 64, 0.1); }
.news-teaser__item a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "date arrow" "title arrow";
  align-items: center;
  gap: 0.15rem 1rem;
  padding: 1.1rem 0.3rem;
  text-decoration: none;
  transition: padding-left 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.news-teaser__item a:hover { padding-left: 0.9rem; }
.news-teaser__item-date {
  grid-area: date;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: #c9a961;
}
.news-teaser__item-title {
  grid-area: title;
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: 1.12rem; line-height: 1.3; color: #0a2540;
  transition: color 0.25s;
}
.news-teaser__item-title i { color: #c9a961; font-size: 0.85em; }
.news-teaser__item a:hover .news-teaser__item-title { color: #c9a961; }
.news-teaser__item-arrow {
  grid-area: arrow;
  font-size: 1.4rem; color: rgba(10, 37, 64, 0.35);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), color 0.25s;
}
.news-teaser__item a:hover .news-teaser__item-arrow { color: #c9a961; transform: translateX(4px); }

.news-teaser__empty {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 1.4rem 0; margin: 0 0 1.6rem;
  color: rgba(10, 37, 64, 0.6); font-style: italic;
}
.news-teaser__empty i { color: #c9a961; }

.news-teaser__cta {
  display: inline-flex; align-items: center; gap: 0.8rem;
  align-self: flex-start;
  padding: 0.55rem 0.6rem 0.55rem 1.5rem;
  background: #0a2540; color: #fdfaf4;
  border-radius: 999px;
  font-weight: 600; font-size: 0.98rem; text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s;
}
.news-teaser__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10, 37, 64, 0.28); color: #fdfaf4; }
.news-teaser__cta:active { transform: translateY(0) scale(0.98); }
.news-teaser__cta-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #c9a961; color: #0a2540;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.news-teaser__cta:hover .news-teaser__cta-icon { transform: translate(3px, -3px); }

@media (max-width: 860px) {
  .news-teaser { grid-template-columns: 1fr; }
  .news-teaser__media { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .news-teaser__media img, .news-teaser__cta, .news-teaser__cta-icon,
  .news-teaser__item a, .news-teaser__item-arrow { transition: none; }
  .news-teaser:hover .news-teaser__media img { transform: none; }
}

.news-heading.reveal-on-scroll { transform: translateY(24px); }
.news-card--feature.reveal-on-scroll { transform: translateY(40px) translateX(-16px); }
.news-card--standard.reveal-on-scroll { transform: translateY(40px) translateX(16px); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .news-card--feature, .news-card--standard { grid-column: span 12; }
  .news-card__title--xl { font-size: clamp(1.5rem, 4vw, 2rem); }
}
@media (max-width: 575.98px) {
  .section-news { padding: 4rem 0; }
  .news-card__shell { padding: 0.35rem; border-radius: 1.15rem; }
  .news-card__core { border-radius: calc(1.15rem - 0.35rem); padding: 1.5rem; }
  .news-card--feature .news-card__core { padding: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .news-heading__dot { animation: none; }
  .news-card__shell,
  .news-card__cta,
  .news-card__cta-icon,
  .news-card__core::after,
  .news-card__link::after,
  .news-card__link i { transition: none; }
}

/* ============================================================
   DIPTYQUE CINÉMATOGRAPHIQUE — Images & Mémoire
   (après le Mot du Président)
   ============================================================ */
.cine-diptych {
  position: relative;
  margin: clamp(4rem, 10vh, 7rem) 0 clamp(3rem, 6vh, 4rem);
  padding: clamp(4rem, 10vh, 7rem) 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}
.cine-diptych__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 10%,
      rgba(10, 37, 64, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 90%,
      rgba(0, 0, 0, 0.7) 0%, transparent 60%),
    linear-gradient(135deg,
      rgba(5, 12, 24, 0.82) 0%,
      rgba(5, 12, 24, 0.72) 50%,
      rgba(5, 12, 24, 0.88) 100%);
  z-index: 1;
  pointer-events: none;
}
.cine-diptych__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='0.6'/></svg>");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}
.cine-diptych__inner {
  position: relative;
  z-index: 3;
}

/* ── En-tête cinématographique ──────────────────────────────── */
.cine-diptych__heading {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
.cine-diptych__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(201, 169, 97, 0.95);
}
.cine-diptych__line {
  display: inline-block;
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(201, 169, 97, 0.8) 50%, transparent 100%);
}
.cine-diptych__title {
  margin: 1rem 0 0;
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fdfaf4;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.cine-diptych__title em {
  font-style: italic;
  color: rgba(201, 169, 97, 0.95);
  font-weight: 300;
}

/* ── Grille diptyque ────────────────────────────────────────── */
.cine-diptych__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.cine-frame {
  grid-column: span 12;
  margin: 0;
  position: relative;
}
@media (min-width: 992px) {
  .cine-frame--01 { grid-column: 1 / 7; margin-top: 0; }
  .cine-frame--02 { grid-column: 7 / 13; margin-top: 3.5rem; }
}

/* ── Cadre double-bezel avec coins photographiques ──────────── */
.cine-frame__outer {
  position: relative;
  padding: 0.65rem;
  border-radius: 1.5rem;
  background:
    linear-gradient(145deg,
      rgba(253, 250, 244, 0.18) 0%,
      rgba(253, 250, 244, 0.08) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 0 1px rgba(201, 169, 97, 0.35),
    0 40px 80px -32px rgba(0, 0, 0, 0.7),
    0 15px 40px -20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.cine-frame__inner {
  position: relative;
  border-radius: calc(1.5rem - 0.65rem);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #0a2540;
  isolation: isolate;
}
.cine-frame__inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition:
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s ease;
}

/* ── Halo coloré derrière chaque cadre ──────────────────────── */
.cine-frame__glow {
  position: absolute;
  inset: -20%;
  z-index: -1;
  opacity: 0;
  filter: blur(40px);
  pointer-events: none;
  transition: opacity 1.4s ease;
}
.cine-frame--01 .cine-frame__glow {
  background: radial-gradient(circle at 70% 30%,
    rgba(80, 140, 200, 0.4), transparent 65%);
}
.cine-frame--02 .cine-frame__glow {
  background: radial-gradient(circle at 30% 70%,
    rgba(201, 169, 97, 0.4), transparent 65%);
}
.cine-frame.is-visible .cine-frame__glow { opacity: 1; }

/* ── Ligne de balayage cinématographique au reveal ──────────── */
.cine-frame__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(253, 250, 244, 0.25) 50%,
    transparent 100%);
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 2;
}
.cine-frame.is-visible .cine-frame__scan {
  animation: cineScan 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s 1 forwards;
}
@keyframes cineScan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(110%); }
}

/* ── Coins photographiques (crop marks) ─────────────────────── */
.cine-frame__corner {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid rgba(201, 169, 97, 0.85);
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cine-frame__corner--tl {
  top: -0.35rem;
  left: -0.35rem;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 0.35rem;
}
.cine-frame__corner--br {
  bottom: -0.35rem;
  right: -0.35rem;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 0.35rem;
}
.cine-frame:hover .cine-frame__corner--tl {
  transform: translate(-0.15rem, -0.15rem);
}
.cine-frame:hover .cine-frame__corner--br {
  transform: translate(0.15rem, 0.15rem);
}

/* ── Hover : lift + zoom image + ombre projetée ─────────────── */
.cine-frame:hover .cine-frame__outer {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(201, 169, 97, 0.6),
    0 50px 100px -32px rgba(0, 0, 0, 0.8),
    0 20px 50px -20px rgba(0, 0, 0, 0.6);
}
.cine-frame:hover .cine-frame__inner img {
  transform: scale(1.09);
}

/* ── Cartel d'exposition (plaque descriptive) ───────────────── */
.cine-plate {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0.25rem 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg,
    rgba(253, 250, 244, 0.08) 0%,
    rgba(253, 250, 244, 0.03) 100%);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 0.9rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cine-plate__num {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(201, 169, 97, 0.95);
  white-space: nowrap;
}
.cine-plate__divider {
  width: 1px;
  height: 1.4rem;
  background: linear-gradient(180deg,
    rgba(201, 169, 97, 0.6) 0%,
    rgba(201, 169, 97, 0.1) 100%);
}
.cine-plate__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.cine-plate__title {
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #fdfaf4;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.cine-plate__sub {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(253, 250, 244, 0.55);
}

/* ── Reveal cinématographique (fade + blur + slide) ────────── */
.cine-diptych.reveal-on-scroll { transform: translateY(30px); }
.cine-frame--01.reveal-on-scroll { transform: translateY(50px) translateX(-24px); }
.cine-frame--02.reveal-on-scroll { transform: translateY(50px) translateX(24px); }
.reveal-on-scroll .cine-frame__inner img {
  filter: blur(18px) saturate(0.8);
  transform: scale(1.15);
}
.reveal-on-scroll.is-visible .cine-frame__inner img {
  filter: blur(0) saturate(1);
  transform: scale(1.04);
  transition:
    filter 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Flottement idle désynchronisé ──────────────────────────── */
@keyframes cineFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.cine-frame--01.is-visible .cine-frame__outer {
  animation: cineFloat 9s ease-in-out 2s infinite;
}
.cine-frame--02.is-visible .cine-frame__outer {
  animation: cineFloat 9s ease-in-out 2.8s infinite reverse;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .cine-diptych { padding: 4rem 0; margin: 3rem 0; }
  .cine-frame--01, .cine-frame--02 { margin-top: 0; }
}
@media (max-width: 575.98px) {
  .cine-diptych { background-attachment: scroll; }
  .cine-frame__outer { padding: 0.5rem; border-radius: 1.15rem; }
  .cine-frame__inner { border-radius: calc(1.15rem - 0.5rem); }
  .cine-plate { padding: 0.85rem 1rem; gap: 0.75rem; }
  .cine-plate__title { font-size: 1rem; }
  .cine-frame.is-visible .cine-frame__outer { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-frame.is-visible .cine-frame__outer,
  .cine-frame.is-visible .cine-frame__scan { animation: none; }
  .cine-frame__outer,
  .cine-frame__inner img,
  .cine-frame__corner { transition: none; }
}

.terms-of-service .tos-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.terms-of-service .tos-content .content-section {
  margin-bottom: 50px;
  scroll-margin-top: 100px;
}

.terms-of-service .tos-content .content-section:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.terms-of-service .tos-content .content-section p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
  margin-bottom: 20px;
}

.terms-of-service .tos-content .content-section p:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .info-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .info-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .info-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .list-items {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.terms-of-service .tos-content .content-section .list-items li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .list-items li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .list-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .alert-box {
  display: flex;
  gap: 20px;
  padding: 25px;
  background-color: var(--surface-color);
  border-radius: 15px;
  border-left: 4px solid var(--accent-color);
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .alert-box i {
  font-size: 2rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content h5 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .prohibited-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-content .content-section .prohibited-list {
    grid-template-columns: 1fr;
  }
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background-color: var(--surface-color);
  border-radius: 12px;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item i {
  color: #dc3545;
  font-size: 1.2rem;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item span {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .disclaimer-box {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .disclaimer-box p {
  margin-bottom: 15px;
  font-weight: 500;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .notice-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .notice-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .notice-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-contact {
  margin-top: 60px;
}

.terms-of-service .tos-contact .contact-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-contact .contact-box {
    flex-direction: column;
    text-align: center;
  }
}

.terms-of-service .tos-contact .contact-box .contact-icon {
  width: 60px;
  height: 60px;
  background-color: var(--accent-color);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.terms-of-service .tos-contact .contact-box .contact-icon i {
  font-size: 1.8rem;
  color: var(--contrast-color);
}

.terms-of-service .tos-contact .contact-box .contact-content {
  flex: 1;
}

.terms-of-service .tos-contact .contact-box .contact-content h4 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-contact .contact-box .contact-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 15px;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media print {
  .terms-of-service .tos-contact {
    display: none;
  }

  .terms-of-service .content-section {
    page-break-inside: avoid;
  }
}

/*--------------------------------------------------------------
# Privacy Section
--------------------------------------------------------------*/
.privacy .privacy-content {
  font-size: 16px;
  line-height: 1.7;
}

.privacy .privacy-content .last-updated {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 40px;
  border-left: 4px solid var(--accent-color);
}

.privacy .privacy-content .last-updated p {
  margin: 0;
  color: var(--heading-color);
}

.privacy .privacy-content .privacy-section {
  margin-bottom: 50px;
}

.privacy .privacy-content .privacy-section h3 {
  font-size: 28px;
  margin-bottom: 25px;
  color: var(--heading-color);
  position: relative;
  padding-bottom: 15px;
}

.privacy .privacy-content .privacy-section h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

.privacy .privacy-content .privacy-section h4 {
  color: var(--heading-color);
  font-size: 22px;
  margin: 30px 0 15px 0;
}

.privacy .privacy-content .privacy-section h5 {
  color: var(--heading-color);
  font-size: 18px;
  margin-bottom: 10px;
}

.privacy .privacy-content .privacy-section p {
  margin-bottom: 20px;
  color: var(--default-color);
}

.privacy .privacy-content .privacy-section ul,
.privacy .privacy-content .privacy-section ol {
  margin: 20px 0;
  padding-left: 30px;
}

.privacy .privacy-content .privacy-section ul li,
.privacy .privacy-content .privacy-section ol li {
  margin-bottom: 10px;
  color: var(--default-color);
}

.privacy .privacy-content .privacy-section .info-box {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 10px;
  margin: 30px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-content .privacy-section .info-box h4 {
  color: var(--heading-color);
  margin-top: 0;
}

.privacy .privacy-content .privacy-section .highlight-box {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000000 20%));
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  color: var(--contrast-color);
  margin: 40px 0;
}

.privacy .privacy-content .privacy-section .highlight-box i {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.privacy .privacy-content .privacy-section .highlight-box h4 {
  color: var(--contrast-color);
  margin-bottom: 15px;
}

.privacy .privacy-content .privacy-section .highlight-box p {
  color: var(--contrast-color);
  margin: 0;
  opacity: 0.9;
}

.privacy .privacy-content .privacy-section .security-measures {
  margin: 30px 0;
}

.privacy .privacy-content .privacy-section .security-measures .measure-item {
  text-align: center;
  padding: 30px 20px;
  border-radius: 10px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
}

.privacy .privacy-content .privacy-section .security-measures .measure-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.privacy .privacy-content .privacy-section .security-measures .measure-item i {
  font-size: 36px;
  color: var(--accent-color);
  margin-bottom: 20px;
  display: block;
}

.privacy .privacy-content .privacy-section .security-measures .measure-item h5 {
  margin-bottom: 15px;
}

.privacy .privacy-content .privacy-section .security-measures .measure-item p {
  margin: 0;
  font-size: 14px;
}

.privacy .privacy-content .privacy-section .rights-list {
  margin: 30px 0;
}

.privacy .privacy-content .privacy-section .rights-list .right-item {
  display: flex;
  align-items: flex-start;
  padding: 25px;
  margin-bottom: 20px;
  background: var(--surface-color);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
}

.privacy .privacy-content .privacy-section .rights-list .right-item:hover {
  border-color: var(--accent-color);
  transform: translateX(5px);
}

.privacy .privacy-content .privacy-section .rights-list .right-item i {
  font-size: 24px;
  color: var(--accent-color);
  margin-right: 20px;
  margin-top: 5px;
  min-width: 24px;
}

.privacy .privacy-content .privacy-section .rights-list .right-item div {
  flex: 1;
}

.privacy .privacy-content .privacy-section .rights-list .right-item div h5 {
  margin-bottom: 10px;
}

.privacy .privacy-content .privacy-section .rights-list .right-item div p {
  margin: 0;
  font-size: 14px;
}

.privacy .privacy-content .privacy-section .cookie-types {
  margin: 30px 0;
}

.privacy .privacy-content .privacy-section .cookie-types h4 {
  margin-bottom: 20px;
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table {
  margin: 0;
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table thead {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table thead th {
  border: none;
  color: var(--heading-color);
  font-weight: 600;
  padding: 15px 20px;
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table tbody td {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 15px 20px;
  color: var(--default-color);
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 97%);
}

.privacy .privacy-content .contact-section {
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
  padding: 40px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

.privacy .privacy-content .contact-section h3 {
  color: var(--heading-color);
  margin-bottom: 20px;
}

.privacy .privacy-content .contact-section h3:after {
  background: var(--accent-color);
}

.privacy .privacy-content .contact-section .contact-info {
  margin-top: 30px;
}

.privacy .privacy-content .contact-section .contact-info .contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.privacy .privacy-content .contact-section .contact-info .contact-item i {
  font-size: 18px;
  color: var(--accent-color);
  margin-right: 15px;
  min-width: 18px;
}

.privacy .privacy-content .contact-section .contact-info .contact-item span {
  color: var(--default-color);
}

@media (max-width: 768px) {
  .privacy .privacy-content {
    font-size: 15px;
  }

  .privacy .privacy-content .privacy-section h3 {
    font-size: 24px;
  }

  .privacy .privacy-content .privacy-section h4 {
    font-size: 20px;
  }

  .privacy .privacy-content .privacy-section .security-measures .row>div {
    margin-bottom: 20px;
  }

  .privacy .privacy-content .privacy-section .rights-list .right-item {
    flex-direction: column;
    text-align: center;
  }

  .privacy .privacy-content .privacy-section .rights-list .right-item i {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
.error-404 {
  padding: 120px 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--surface-color), var(--accent-color) 3%) 100%);
}

.error-404 .error-content {
  margin-bottom: 80px;
}

.error-404 .error-content .error-number {
  font-size: 8rem;
  font-weight: 300;
  color: var(--accent-color);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .error-404 .error-content .error-number {
    font-size: 6rem;
  }
}

@media (max-width: 576px) {
  .error-404 .error-content .error-number {
    font-size: 4.5rem;
  }
}

.error-404 .error-content .error-title {
  font-size: 3rem;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 30px;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .error-404 .error-content .error-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .error-404 .error-content .error-title {
    font-size: 2rem;
  }
}

.error-404 .error-content .error-description {
  font-size: 1.125rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .error-404 .error-content .error-description {
    font-size: 1rem;
    margin-bottom: 40px;
  }
}

.error-404 .error-content .error-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.error-404 .error-content .error-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.error-404 .error-content .error-actions .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.error-404 .error-content .error-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background-color: transparent;
  color: var(--heading-color);
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.error-404 .error-content .error-actions .btn-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

@media (max-width: 576px) {
  .error-404 .error-content .error-actions {
    flex-direction: column;
    align-items: center;
  }

  .error-404 .error-content .error-actions .btn-primary,
  .error-404 .error-content .error-actions .btn-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

.error-404 .error-content .search-section .search-label {
  font-size: 1rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 500;
}

.error-404 .error-content .search-section .search-form {
  max-width: 400px;
  margin: 0 auto;
}

.error-404 .error-content .search-section .search-form .search-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.error-404 .error-content .search-section .search-form .search-input-group .search-input {
  width: 100%;
  padding: 16px 60px 16px 20px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 8px;
  font-size: 1rem;
  background-color: var(--surface-color);
  color: var(--default-color);
  transition: all 0.3s ease;
}

.error-404 .error-content .search-section .search-form .search-input-group .search-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.error-404 .error-content .search-section .search-form .search-input-group .search-input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.error-404 .error-content .search-section .search-form .search-input-group .search-btn {
  position: absolute;
  right: 8px;
  background: var(--accent-color);
  border: none;
  border-radius: 6px;
  padding: 12px;
  color: var(--contrast-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.error-404 .error-content .search-section .search-form .search-input-group .search-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
}

.error-404 .error-content .search-section .search-form .search-input-group .search-btn i {
  font-size: 1rem;
}

.error-404 .helpful-links .links-title {
  font-size: 2rem;
  font-weight: 300;
  color: var(--heading-color);
  text-align: center;
  margin-bottom: 60px;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .error-404 .helpful-links .links-title {
    font-size: 1.75rem;
    margin-bottom: 40px;
  }
}

.error-404 .helpful-links .link-item {
  text-align: center;
  padding: 40px 20px;
  height: 100%;
  transition: all 0.3s ease;
}

.error-404 .helpful-links .link-item:hover {
  transform: translateY(-10px);
}

.error-404 .helpful-links .link-item .link-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), black 20%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30px;
  transition: all 0.3s ease;
}

.error-404 .helpful-links .link-item .link-icon i {
  font-size: 1.75rem;
  color: var(--contrast-color);
}

.error-404 .helpful-links .link-item h4 {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 20px;
}

.error-404 .helpful-links .link-item p {
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 25px;
}

.error-404 .helpful-links .link-item .link-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.error-404 .helpful-links .link-item .link-cta:hover {
  color: color-mix(in srgb, var(--accent-color), black 15%);
  gap: 12px;
}

.error-404 .helpful-links .link-item .link-cta i {
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}

.error-404 .helpful-links .link-item .link-cta:hover i {
  transform: translateX(3px);
}

.error-404 .helpful-links .link-item:hover .link-icon {
  transform: scale(1.1);
  box-shadow: 0 15px 35px color-mix(in srgb, var(--accent-color), transparent 65%);
}

@media (max-width: 992px) {
  .error-404 {
    padding: 80px 0;
  }

  .error-404 .helpful-links .link-item {
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .error-404 {
    padding: 60px 0;
    min-height: auto;
  }

  .error-404 .error-content {
    margin-bottom: 60px;
  }

  .error-404 .helpful-links .links-title {
    margin-bottom: 40px;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*==============================================================
# CUSTOM STYLES - AMICALE DU TRIOMPHANT
==============================================================*/

/* Smooth scroll global */
html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 80px;
}

/* Header : bleu marine + semi-transparent au scroll */
.header {
  background-color: #0a2540 !important;
  border-bottom: 2px solid #c9a961;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.scrolled .header {
  background-color: rgba(10, 37, 64, 0.92) !important;
  border-bottom: 1px solid rgba(201, 169, 97, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.scrolled .header::before {
  display: none !important;
}
.header .sitename {
  color: #ffffff !important;
}
.header .navmenu ul li a {
  color: #ffffff !important;
}
.header .navmenu ul li a:hover,
.header .navmenu ul li a.active {
  color: #c9a961 !important;
}
.header .mobile-nav-toggle {
  color: #ffffff !important;
}
.header .btn-outline-light {
  color: #ffffff !important;
  border-color: #c9a961 !important;
}
.header .btn-outline-light:hover {
  background-color: #c9a961 !important;
  color: #0a2540 !important;
}

/* Hero : plein écran avec image de fond + blur */
.hero-cover {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-cover__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(3px) brightness(0.4);
  transform: scale(1.05);
  z-index: 0;
}
.hero-cover__content {
  position: relative;
  z-index: 1;
  color: #ffffff;
  text-align: center;
  max-width: 850px;
  padding: 120px 1.5rem 0;
}
.hero-cover__content h1 {
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  letter-spacing: 0.5px;
}
.hero-cover__content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hero-cover__content .btn-decouvrir {
  display: inline-block;
  margin-top: 2rem;
  padding: 12px 36px;
  background-color: #c9a961;
  color: #0a2540;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.hero-cover__content .btn-decouvrir:hover {
  background-color: #d4af37;
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3) !important;
}

/* Barre de recherche dans hero */
.hero-cover .input-group {
  max-width: 550px;
  margin: 2rem auto 0;
  transition: transform 0.3s ease;
}
.hero-cover .input-group:focus-within {
  transform: scale(1.02);
}

/* Divider décoratif sous les titres de section */
.title-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.title-divider span {
  display: inline-block;
  width: 40px;
  height: 2px;
  background: #c9a961;
  opacity: 0.6;
}
.title-divider i {
  color: #c9a961;
  font-size: 1.1rem;
}

/* Mot du président */
.section-president .president-card {
  background-color: #ffffff;
  border-left: 4px solid #c9a961;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(10, 37, 64, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.section-president .president-card:hover {
  box-shadow: 0 1rem 2.5rem rgba(10, 37, 64, 0.15);
}
.section-president .president-card p {
  line-height: 1.85;
}
.president-content {
  line-height: 1.85;
  text-align: justify;
}
.president-content p {
  margin-bottom: 1.1rem;
}
.quote-icon {
  position: absolute;
  color: #c9a961;
  opacity: 0.2;
  font-size: 5rem;
  line-height: 1;
}
.quote-start {
  top: -10px;
  left: 20px;
}
.quote-end {
  bottom: -30px;
  right: 20px;
  transform: scaleX(-1);
}

/* Rubrique Cards */
.rubrique-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  line-height: 1.75;
}
.rubrique-card:hover {
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.1) !important;
}
.rubrique-card h2,
.rubrique-card h3 {
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Event Cards */
.event-card {
  transition: all 0.3s ease;
  border-top: 3px solid #c9a961;
}
.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12) !important;
}
.event-date {
  font-size: 0.9rem;
}

/* Actualités Cards */
.actu-card {
  transition: all 0.35s ease;
}
.actu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12) !important;
}
.actu-card:hover .card-title {
  color: #c9a961 !important;
}

/* NAVMENU — Dropdown au hover (sous-rubriques) */
@media (min-width: 1200px) {
  .navmenu ul li.dropdown {
    position: relative;
  }
  .navmenu ul li.dropdown > ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
  }
  .navmenu ul li.dropdown:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .navmenu ul li.dropdown > ul li {
    display: block;
    width: 100%;
  }
  .header .navmenu ul li.dropdown > ul li a,
  .navmenu ul li.dropdown > ul li a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: #0a2540 !important;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
  }
  .header .navmenu ul li.dropdown > ul li a:hover,
  .navmenu ul li.dropdown > ul li a:hover {
    background: rgba(201, 169, 97, 0.1);
    color: #c9a961 !important;
    border-left-color: #c9a961;
  }
  .navmenu ul li.dropdown > a .toggle-dropdown {
    font-size: 0.7rem;
    margin-left: 4px;
    transition: transform 0.3s ease;
  }
  .navmenu ul li.dropdown:hover > a .toggle-dropdown {
    transform: rotate(180deg);
  }
}
@media (max-width: 1199px) {
  .navmenu ul li.dropdown > ul {
    padding-left: 1rem;
  }
}

/* Animations */
.section {
  animation-fill-mode: both;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero-cover__content h1 {
    font-size: 1.6rem;
  }
  .hero-cover__content p {
    font-size: 0.95rem;
  }
  .quote-icon {
    font-size: 3rem;
  }
  .title-divider span {
    width: 25px;
  }
}

/* ============================================================
   Diptyque éditorial — Images & Mémoire (après le Mot du Président)
   Layout : deux figures côte à côte avec offsets verticaux asymétriques
            + plaques descriptives façon cartel d'exposition
   ============================================================ */
.president-gallery--diptych {
  margin-top: 5rem;
  margin-bottom: 2rem;
  position: relative;
}

/* Étiquette de section ("Images & Mémoire") + trait doré */
.diptych-heading {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 3rem;
  padding-left: 0.5rem;
}
.diptych-heading__label {
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: #0a2540;
  white-space: nowrap;
}
.diptych-heading__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201, 169, 97, 0.7) 0%,
    rgba(201, 169, 97, 0.35) 50%,
    transparent 100%);
}

/* Grille asymétrique : 12 colonnes, deux items avec offsets verticaux */
.diptych {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.diptych__item {
  grid-column: span 12;
  margin: 0;
  position: relative;
}

/* Desktop : item 1 descendu, item 2 remonté — crée un chevauchement optique */
@media (min-width: 992px) {
  .diptych__item--01 {
    grid-column: 1 / 8;
    margin-top: 3rem;
  }
  .diptych__item--02 {
    grid-column: 6 / 13;
    margin-top: -3rem;
  }
}

/* Double-bezel : enveloppe extérieure crème + noyau intérieur avec image */
.diptych__frame {
  position: relative;
  padding: 0.55rem;
  border-radius: 1.75rem;
  background: linear-gradient(145deg,
    rgba(253, 250, 244, 0.95) 0%,
    rgba(245, 238, 224, 0.85) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(201, 169, 97, 0.18),
    0 30px 60px -28px rgba(10, 35, 66, 0.3),
    0 10px 25px -15px rgba(10, 35, 66, 0.15);
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.diptych__inner {
  position: relative;
  border-radius: calc(1.75rem - 0.55rem);
  overflow: hidden;
  isolation: isolate;
  background: #0a2540;
}
.diptych__inner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  transform: scale(1.01);
  transition:
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
}

/* Halo diffusé — révélé au reveal, couleurs distinctes par item */
.diptych__glow {
  position: absolute;
  inset: -25%;
  z-index: -1;
  filter: blur(40px);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.diptych__item--01 .diptych__glow {
  background: radial-gradient(circle at 70% 30%,
    rgba(10, 70, 120, 0.3), transparent 60%);
}
.diptych__item--02 .diptych__glow {
  background: radial-gradient(circle at 30% 70%,
    rgba(201, 169, 97, 0.3), transparent 60%);
}
.diptych__item.is-visible .diptych__glow { opacity: 1; }

/* Plaque descriptive façon cartel de musée */
.diptych__caption {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-left: 0.75rem;
  position: relative;
}
.diptych__caption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 2px;
  height: calc(100% - 0.7rem);
  background: linear-gradient(180deg,
    rgba(201, 169, 97, 0.9),
    rgba(201, 169, 97, 0.25));
  border-radius: 2px;
}
.diptych__num {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(201, 169, 97, 0.95);
  padding-top: 0.15rem;
  min-width: 2rem;
}
.diptych__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.diptych__label {
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: #0a2540;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.diptych__sub {
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10, 37, 64, 0.55);
}

/* Hover : lift + zoom image + ombre renforcée */
.diptych__item:hover .diptych__frame {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(201, 169, 97, 0.35),
    0 40px 80px -30px rgba(10, 35, 66, 0.42),
    0 15px 30px -15px rgba(10, 35, 66, 0.2);
}
.diptych__item:hover .diptych__inner img {
  transform: scale(1.06);
}

/* --- Reveal : transforms initiaux adaptés au diptyque --- */
.diptych-heading.reveal-on-scroll {
  transform: translateY(20px);
}
.diptych__item--01.reveal-on-scroll {
  transform: translateY(60px) translateX(-30px);
}
.diptych__item--02.reveal-on-scroll {
  transform: translateY(60px) translateX(30px);
}
.reveal-on-scroll .diptych__inner img {
  filter: blur(14px) saturate(0.85);
  transform: scale(1.1);
}
.reveal-on-scroll.is-visible .diptych__inner img {
  filter: blur(0) saturate(1);
  transform: scale(1.01);
  transition:
    filter 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Flottement idle — décalé entre les deux images pour du rythme */
@keyframes diptychFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.diptych__item--01.is-visible .diptych__frame {
  animation: diptychFloat 8s ease-in-out 1.6s infinite;
}
.diptych__item--02.is-visible .diptych__frame {
  animation: diptychFloat 8s ease-in-out 2.2s infinite reverse;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
  .president-gallery--diptych { margin-top: 3.5rem; }
  .diptych { gap: 2.5rem; }
  .diptych__item--01,
  .diptych__item--02 {
    grid-column: span 12;
    margin-top: 0;
  }
  .diptych__inner img { max-height: 400px; }
}
@media (max-width: 767.98px) {
  .diptych-heading { margin-bottom: 2rem; gap: 0.9rem; }
  .diptych-heading__label { font-size: 0.95rem; }
  .diptych__frame { padding: 0.4rem; border-radius: 1.25rem; }
  .diptych__inner { border-radius: calc(1.25rem - 0.4rem); }
  .diptych__inner img { max-height: 320px; }
  .diptych__item--01.reveal-on-scroll,
  .diptych__item--02.reveal-on-scroll {
    transform: translateY(40px);
  }
  .diptych__caption { margin-top: 1rem; }
  .diptych__label { font-size: 1.05rem; }
  .diptych__item.is-visible .diptych__frame { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .diptych__item.is-visible .diptych__frame { animation: none; }
  .diptych__frame,
  .diptych__inner img { transition: none; }
}

/* --- Animation générique .reveal-on-scroll (partagée avec d'autres sections) --- */
.reveal-on-scroll {
  opacity: 0;
  transition:
    opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) rotate(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Carte lien "Statuts" dans la section Amicale (accueil)
   ============================================================ */
.amicale-link-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border-radius: 1.25rem;
  border: 1px solid rgba(10, 35, 66, 0.08);
  box-shadow: 0 8px 30px -18px rgba(10, 35, 66, 0.2);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.amicale-link-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-color), transparent 92%) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.amicale-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -20px rgba(10, 35, 66, 0.3);
  border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  color: inherit;
}
.amicale-link-card:hover::before { opacity: 1; }

.amicale-link-card__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.7rem;
  background: linear-gradient(135deg, #f4d47a, var(--accent-color), #a8853d);
  box-shadow: 0 10px 22px -10px rgba(201, 169, 97, 0.6);
  position: relative;
  z-index: 1;
}

.amicale-link-card__body {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.amicale-link-card__label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 0.25rem;
}

.amicale-link-card__title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0a2342;
  margin: 0 0 0.35rem;
}

.amicale-link-card__text {
  color: #495057;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

.amicale-link-card__arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  font-size: 1.2rem;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
  position: relative;
  z-index: 1;
}

.amicale-link-card:hover .amicale-link-card__arrow {
  transform: translateX(6px);
  background: var(--accent-color);
  color: #fff;
}

/* Variante JORF : teinte bleu marine */
.amicale-link-card--jorf::before {
  background: linear-gradient(135deg,
    rgba(26, 95, 180, 0.08) 0%,
    transparent 60%);
}
.amicale-link-card--jorf:hover { border-color: rgba(26, 95, 180, 0.45); }
.amicale-link-card--jorf .amicale-link-card__icon {
  background: linear-gradient(135deg, #1a5fb4, #0a2342);
  box-shadow: 0 10px 22px -10px rgba(26, 95, 180, 0.55);
}
.amicale-link-card--jorf .amicale-link-card__label { color: #1a5fb4; }
.amicale-link-card--jorf .amicale-link-card__arrow {
  background: rgba(26, 95, 180, 0.12);
  color: #1a5fb4;
}
.amicale-link-card--jorf:hover .amicale-link-card__arrow {
  background: #1a5fb4;
  color: #fff;
}

/* Variante Règlement intérieur : doré sobre */
.amicale-link-card--reglement::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-color), transparent 88%) 0%,
    transparent 60%);
}
.amicale-link-card--reglement:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 40%);
}
.amicale-link-card--reglement .amicale-link-card__icon {
  background: linear-gradient(135deg, #f4d47a, var(--accent-color), #8a6a2f);
  box-shadow: 0 10px 22px -10px rgba(201, 169, 97, 0.55);
}
.amicale-link-card--reglement .amicale-link-card__label { color: #8a6a2f; }
.amicale-link-card--reglement .amicale-link-card__arrow {
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: #8a6a2f;
}
.amicale-link-card--reglement:hover .amicale-link-card__arrow {
  background: var(--accent-color);
  color: #fff;
}

/* Variante Guide du porte-drapeau : vert cérémoniel + navy */
.amicale-link-card--guide::before {
  background: linear-gradient(135deg,
    rgba(45, 106, 79, 0.08) 0%,
    transparent 60%);
}
.amicale-link-card--guide:hover { border-color: rgba(45, 106, 79, 0.45); }
.amicale-link-card--guide .amicale-link-card__icon {
  background: linear-gradient(135deg, #2d6a4f, #0a2342);
  box-shadow: 0 10px 22px -10px rgba(45, 106, 79, 0.55);
}
.amicale-link-card--guide .amicale-link-card__label { color: #2d6a4f; }
.amicale-link-card--guide .amicale-link-card__arrow {
  background: rgba(45, 106, 79, 0.12);
  color: #2d6a4f;
}
.amicale-link-card--guide:hover .amicale-link-card__arrow {
  background: #2d6a4f;
  color: #fff;
}

@media (max-width: 575.98px) {
  .amicale-link-card {
    flex-wrap: wrap;
    padding: 1.25rem;
    gap: 1rem;
  }
  .amicale-link-card__arrow {
    margin-left: auto;
  }
}

/* ============================================================
   PAGE STATUTS (Amicale > Statuts)
   ============================================================ */

/* ---- HERO ---- */
.statuts-page .statuts-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  padding: 10rem 1rem 6rem;
  text-align: center;
}

.statuts-hero__bg {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(2.5px) saturate(1.15) brightness(0.85);
  transform: scale(1.06);
  z-index: 0;
  animation: statutsHeroZoom 18s ease-in-out infinite alternate;
}

@keyframes statutsHeroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1.14); }
}

.statuts-hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(5, 20, 45, 0.35) 0%, rgba(5, 20, 45, 0.7) 80%),
    linear-gradient(180deg, rgba(5, 20, 45, 0.55) 0%, rgba(5, 20, 45, 0.75) 100%);
  z-index: 1;
}

.statuts-hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.statuts-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 1.5rem;
}

.statuts-hero__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
  background: linear-gradient(135deg, #f4d47a 0%, var(--accent-color) 50%, #a8853d 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
  filter: drop-shadow(0 2px 10px rgba(201, 169, 97, 0.35));
}

.statuts-hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 400;
  font-style: italic;
  opacity: 0.92;
  margin-bottom: 1.5rem;
}

.statuts-hero__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
  color: rgba(255, 255, 255, 0.85);
}
.statuts-hero__divider span {
  height: 1px;
  width: 60px;
  background: rgba(255, 255, 255, 0.6);
}
.statuts-hero__divider i {
  font-size: 1.4rem;
}

.statuts-hero__lead {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.9;
}

.statuts-hero__scroll {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
  z-index: 2;
  animation: statutsBounce 2.4s ease-in-out infinite;
  transition: background 0.3s ease, transform 0.3s ease;
}
.statuts-hero__scroll:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

@keyframes statutsBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

/* ---- CARD PRÉSENTATION DU DOCUMENT ---- */
.statuts-doc-intro {
  margin-top: -70px;
  position: relative;
  z-index: 3;
}

.statuts-doc-card {
  background: #fff;
  border: 1px solid rgba(13, 110, 253, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.statuts-doc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px -20px rgba(10, 35, 66, 0.25) !important;
}

.statuts-doc-icon {
  width: 84px;
  height: 84px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #dc3545, #b02a37);
  color: #fff;
  font-size: 2.4rem;
  box-shadow: 0 10px 25px -10px rgba(220, 53, 69, 0.5);
}

.statuts-doc-icon.jorf-doc-icon {
  background: linear-gradient(135deg, #1a5fb4, #0a2342);
  box-shadow: 0 10px 25px -10px rgba(26, 95, 180, 0.5);
}

.statuts-doc-icon.reglement-doc-icon {
  background: linear-gradient(135deg, #f4d47a, var(--accent-color), #8a6a2f);
  box-shadow: 0 10px 25px -10px rgba(201, 169, 97, 0.55);
}

.statuts-doc-icon.guide-doc-icon {
  background: linear-gradient(135deg, #2d6a4f, #0a2342);
  box-shadow: 0 10px 25px -10px rgba(45, 106, 79, 0.5);
}

.statuts-doc-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0d6efd;
  margin-bottom: 0.3rem;
}

.statuts-doc-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
}

.statuts-doc-version {
  color: #6c757d;
  font-size: 0.95rem;
}

.statuts-doc-desc {
  color: #495057;
  line-height: 1.6;
}

.btn-statuts {
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-statuts:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(13, 110, 253, 0.55);
}

/* ---- CARTES POINTS CLÉS ---- */
.statuts-highlights {
  padding-top: 5rem;
}

.statuts-key-card {
  background: #fff;
  padding: 2rem 1.75rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(13, 110, 253, 0.06);
  box-shadow: 0 8px 30px -18px rgba(10, 35, 66, 0.2);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  overflow: hidden;
}

.statuts-key-card::after {
  content: "";
  position: absolute;
  inset: auto -40% -40% auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(13, 110, 253, 0.08), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.5s ease;
}

.statuts-key-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(10, 35, 66, 0.3);
  border-color: rgba(13, 110, 253, 0.2);
}
.statuts-key-card:hover::after {
  transform: scale(1.3);
}

.statuts-key-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 8px 18px -8px rgba(13, 110, 253, 0.5);
}

.statuts-key-card__title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0a2342;
  margin-bottom: 0.5rem;
}

.statuts-key-card__text {
  color: #495057;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

/* ---- PDF VIEWER ---- */
.statuts-pdf-card {
  background: #fff;
  border: 1px solid rgba(13, 110, 253, 0.08);
  overflow: hidden;
}

.statuts-pdf-card__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.2rem;
  background: #f6f8fb;
  border-bottom: 1px solid rgba(10, 35, 66, 0.08);
  font-size: 0.92rem;
}

.statuts-pdf-card__filename {
  color: #0a2342;
  font-weight: 600;
}

.statuts-pdf-card__newtab {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.25s ease;
}
.statuts-pdf-card__newtab:hover {
  color: #0a58ca;
}

.statuts-pdf-card__frame {
  position: relative;
  width: 100%;
  background: #eceef2;
}
.statuts-pdf-card__frame iframe {
  width: 100%;
  height: 780px;
  border: 0;
  display: block;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 991.98px) {
  .statuts-pdf-card__frame iframe {
    height: 640px;
  }
}

@media (max-width: 767.98px) {
  .statuts-page .statuts-hero {
    min-height: 74vh;
    padding: 8rem 1rem 4.5rem;
  }
  .statuts-hero__scroll { bottom: 1rem; }
  .statuts-doc-intro { margin-top: -40px; }
  .statuts-doc-icon { width: 70px; height: 70px; font-size: 2rem; }
  .statuts-pdf-card__frame iframe { height: 520px; }
  .statuts-pdf-card__toolbar { flex-wrap: wrap; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .statuts-hero__bg,
  .statuts-hero__scroll {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   Section Amicale — Cover immersif (page d'accueil)
   ═══════════════════════════════════════════════════════════ */
.amicale-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0a2342;
  color: #fff;
}

.amicale-cover__bg {
  position: absolute;
  inset: -6%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(3px) saturate(1.05) brightness(0.95);
  transform: scale(1.08);
  animation: amicale-kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}

.amicale-cover__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10, 35, 66, 0.58) 0%,
      rgba(10, 35, 66, 0.78) 100%),
    radial-gradient(ellipse at center,
      rgba(10, 35, 66, 0.12) 0%,
      rgba(10, 35, 66, 0.55) 100%);
}

.amicale-cover__content {
  position: relative;
  z-index: 2;
}

@keyframes amicale-kenburns {
  0%   { transform: scale(1.08) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}

.amicale-cover .section-title .subtitle {
  color: #f4d47a;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.amicale-cover .section-title h2 {
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.amicale-cover .section-title .title-divider i {
  color: #f4d47a;
}
.amicale-cover .section-title .title-divider span {
  background-color: rgba(255, 255, 255, 0.35);
}

.amicale-cover .rubrique-card {
  background: rgba(255, 255, 255, 0.95) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
          backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
}

.amicale-cover .amicale-link-card {
  box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.55);
}

@media (max-width: 767.98px) {
  .amicale-cover__bg {
    filter: blur(2px) brightness(0.9);
    inset: -4%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amicale-cover__bg {
    animation: none;
    transform: scale(1.05);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM UPGRADE LAYER
   Éditorial Luxury — institutionnel / mémoriel / marine
   Double-bezel, macro-whitespace, motion premium
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --editorial-font: "Fraunces", "Montserrat", serif;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --hairline: rgba(10, 37, 64, 0.06);
  --hairline-strong: rgba(10, 37, 64, 0.1);
  --ambient-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(10, 37, 64, 0.04),
    0 8px 22px -14px rgba(10, 37, 64, 0.15),
    0 30px 60px -40px rgba(10, 37, 64, 0.25);
  --ambient-shadow-lift:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 2px 6px rgba(10, 37, 64, 0.06),
    0 18px 40px -18px rgba(10, 37, 64, 0.22),
    0 48px 90px -48px rgba(10, 37, 64, 0.35);
}

/* ─── Macro-whitespace : plus d'air entre les sections ─── */
body:not(.index-page-no-override) .section {
  padding: clamp(5rem, 9vw, 8rem) 0;
  scroll-margin-top: 96px;
}

/* ─── Typographie éditoriale pour les titres de section ─── */
.section-title h2,
.statuts-hero__title,
.hero-title {
  font-family: var(--editorial-font);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.section-title h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  margin-bottom: 1rem;
}

.section-title .subtitle,
.statuts-hero__eyebrow {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 72%);
  color: #8a6a2f;
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.amicale-cover .section-title .subtitle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #f4d47a;
  backdrop-filter: blur(8px);
}

.section-title .title-divider {
  margin-top: 1.5rem;
}
.section-title .title-divider span {
  height: 1px;
  opacity: 0.5;
}

/* ─── Double-Bezel : architecture "plaque dans un plateau" ─── */

/* Coque externe commune appliquée aux cartes premium existantes */
.president-card,
.statuts-doc-card,
.statuts-pdf-card,
.statuts-key-card,
.rubrique-card,
.event-card,
.actu-card,
.amicale-link-card {
  position: relative;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--ambient-shadow) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.92) 100%),
    #fff !important;
  transition:
    transform 0.7s var(--ease-premium),
    box-shadow 0.7s var(--ease-premium),
    border-color 0.7s var(--ease-premium);
}

/* Inner highlight (liseré supérieur très subtil) */
.president-card::after,
.statuts-doc-card::after,
.rubrique-card::after,
.event-card::after,
.actu-card::after,
.amicale-link-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.8) 0%,
    transparent 40%,
    transparent 100%);
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* Rayons plus généreux (squircle éditorial) */
.president-card,
.statuts-doc-card,
.statuts-pdf-card,
.rubrique-card { border-radius: 1.5rem !important; }

.event-card,
.actu-card,
.statuts-key-card,
.amicale-link-card { border-radius: 1.25rem !important; }

/* Hover lift premium */
.event-card:hover,
.actu-card:hover,
.statuts-key-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ambient-shadow-lift) !important;
  border-color: var(--hairline-strong) !important;
}

.amicale-link-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--ambient-shadow-lift) !important;
}

/* ─── Button-in-Button : flèche dans bulle ronde ─── */
.amicale-link-card__arrow {
  transition:
    transform 0.6s var(--ease-premium),
    background 0.6s var(--ease-premium),
    color 0.6s var(--ease-premium),
    box-shadow 0.6s var(--ease-premium);
}

.amicale-link-card:hover .amicale-link-card__arrow {
  transform: translate(6px, -2px) scale(1.06) !important;
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--accent-color), transparent 40%);
}

/* CTA "Découvrir" — magnetic hover physics */
.btn-decouvrir {
  border-radius: 999px !important;
  padding: 0.9rem 1.75rem 0.9rem 2rem !important;
  transition:
    transform 0.6s var(--ease-premium),
    box-shadow 0.6s var(--ease-premium),
    background 0.6s var(--ease-premium) !important;
}

.btn-decouvrir:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 24px 60px -28px rgba(10, 37, 64, 0.55) !important;
}

.btn-decouvrir:active {
  transform: translateY(0) scale(0.985);
}

.btn-decouvrir i {
  transition: transform 0.6s var(--ease-premium);
}

.btn-decouvrir:hover i {
  transform: translateX(3px) translateY(-1px);
}

/* ─── Navbar : Navy Glass renforcé au scroll (identité conservée) ─── */
body.scrolled .header {
  background: rgba(10, 37, 64, 0.78) !important;
  -webkit-backdrop-filter: saturate(1.3) blur(18px);
          backdrop-filter: saturate(1.3) blur(18px);
  border-bottom: 1px solid rgba(201, 169, 97, 0.35) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 34px -20px rgba(0, 0, 0, 0.55);
  transition:
    background 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium),
    border-color 0.5s var(--ease-premium);
}

.navmenu ul li > a {
  transition:
    color 0.5s var(--ease-premium),
    letter-spacing 0.5s var(--ease-premium);
}

.navmenu ul li > a:hover {
  letter-spacing: 0.01em;
}

/* Dropdowns : panneau clair premium */
.navmenu ul ul {
  border-radius: 1rem !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--ambient-shadow-lift) !important;
  padding: 0.5rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff) !important;
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}

.navmenu ul ul li a {
  color: #0a2540 !important;
  border-radius: 0.65rem !important;
  padding: 0.55rem 0.9rem !important;
  transition:
    background 0.4s var(--ease-premium),
    color 0.4s var(--ease-premium),
    transform 0.4s var(--ease-premium);
}

.navmenu ul ul li a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 90%) !important;
  color: #8a6a2f !important;
  transform: translateX(3px);
}

/* ─── Entrée au viewport : blur-fade-up cinématographique ─── */
.reveal-premium {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(8px);
  transition:
    opacity 900ms var(--ease-expo),
    transform 900ms var(--ease-expo),
    filter 900ms var(--ease-expo);
  will-change: transform, filter, opacity;
}

.reveal-premium.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ─── Quote icon (Mot du Président) : plus raffiné ─── */
.quote-icon {
  opacity: 0.08 !important;
  font-size: 5rem !important;
}

/* ─── Event-card : icône date élégante ─── */
.event-card .event-date {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1rem;
}

/* ─── Hero title : emphase éditoriale ─── */
.hero-title {
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  font-weight: 500;
}

/* ─── Lisibilité : renforcer l'ambiance sur la cover Amicale ─── */
.amicale-cover .rubrique-card,
.amicale-cover .amicale-link-card {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ─── Responsive : discipline mobile ─── */
@media (max-width: 767.98px) {
  body:not(.index-page-no-override) .section {
    padding: 3.5rem 0;
  }
  .section-title h2 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
  .section-title .subtitle {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
  }
  body.scrolled .header {
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
            backdrop-filter: saturate(1.2) blur(14px);
  }
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal-premium,
  .reveal-premium.is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .event-card, .actu-card, .amicale-link-card,
  .statuts-key-card {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PATTERN : .section-cover — Cover immersif réutilisable
   Variantes : --event (doré), --ctcl (navy acier), --snle (cinéma)
   ═══════════════════════════════════════════════════════════════════ */

.section-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0a2540;
  color: #fff;
}

.section-cover__bg {
  position: absolute;
  inset: -6%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(2.5px) saturate(1.08) brightness(0.92);
  transform: scale(1.08);
  animation: section-kenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}

.section-cover__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10, 37, 64, 0.55) 0%,
      rgba(10, 37, 64, 0.8) 100%);
}

.section-cover__content {
  position: relative;
  z-index: 2;
}

@keyframes section-kenburns {
  0%   { transform: scale(1.08) translate3d(0, 0, 0); }
  100% { transform: scale(1.16) translate3d(-2%, -1.2%, 0); }
}

/* Titres / divider sur fond sombre — commun à toutes les covers */
.section-cover .section-title .subtitle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #f4d47a;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.section-cover .section-title h2 {
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.section-cover .section-title .title-divider i {
  color: #f4d47a;
}
.section-cover .section-title .title-divider span {
  background-color: rgba(255, 255, 255, 0.35);
}

/* Cartes sur fond sombre : ombres renforcées + hairlines adaptées */
.section-cover .event-card,
.section-cover .actu-card,
.section-cover .rubrique-card {
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 55px -28px rgba(0, 0, 0, 0.7),
    0 48px 100px -48px rgba(0, 0, 0, 0.6) !important;
}

/* ─── Variante Événements : ambiance cérémonielle dorée ─── */
.section-cover--event .section-cover__veil {
  background:
    linear-gradient(180deg,
      rgba(10, 37, 64, 0.48) 0%,
      rgba(30, 18, 10, 0.72) 100%),
    radial-gradient(ellipse at 70% 30%,
      rgba(201, 169, 97, 0.18) 0%,
      transparent 55%);
}

/* ─── Variante CT/CL : navy acier patrimonial ─── */
.section-cover--ctcl .section-cover__veil {
  background:
    linear-gradient(180deg,
      rgba(8, 25, 48, 0.58) 0%,
      rgba(8, 25, 48, 0.85) 100%),
    radial-gradient(ellipse at 30% 40%,
      rgba(60, 100, 160, 0.15) 0%,
      transparent 60%);
}
.section-cover--ctcl .section-cover__bg {
  filter: blur(3px) saturate(0.9) brightness(0.85);
}

/* ─── Variante SNLE : deep navy cinématographique ─── */
.section-cover--snle {
  background-color: #050f1e;
}
.section-cover--snle .section-cover__veil {
  background:
    linear-gradient(180deg,
      rgba(5, 15, 30, 0.35) 0%,
      rgba(5, 15, 30, 0.6) 50%,
      rgba(5, 15, 30, 0.88) 100%),
    radial-gradient(ellipse at 50% 0%,
      transparent 0%,
      rgba(5, 15, 30, 0.5) 100%);
}
.section-cover--snle .section-cover__bg {
  filter: blur(2px) saturate(1.12) brightness(0.88) contrast(1.05);
  animation-duration: 40s;
}
.section-cover--snle .section-title h2 {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  letter-spacing: -0.025em;
}

/* ─── Pan signature centré (citation / tagline pour SNLE) ─── */
.section-cover__tagline {
  max-width: 820px;
  margin: 2rem auto 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--editorial-font);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.section-cover__tagline::before,
.section-cover__tagline::after {
  content: "—";
  color: var(--accent-color);
  margin: 0 0.75rem;
  opacity: 0.7;
}

/* ─── Actualités : mise en page éditoriale (magazine) ─── */
.actualites-editorial {
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}

.actu-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #fff;
  box-shadow: var(--ambient-shadow);
  transition: transform 0.7s var(--ease-premium), box-shadow 0.7s var(--ease-premium);
}
.actu-feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--ambient-shadow-lift);
}
.actu-feature__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
  color: #8a6a2f;
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.actu-feature__body {
  padding: clamp(1.75rem, 3vw, 3rem);
}
.actu-feature__title {
  font-family: var(--editorial-font);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #0a2540;
  margin: 0 0 1rem;
}
.actu-feature__excerpt {
  color: #4a5568;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.actu-feature__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #6b7280;
  font-size: 0.88rem;
}
.actu-feature__meta .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #c9a961;
  display: inline-block;
}

/* Empty state Actualités — éditorial */
.actu-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 1.5rem;
  border: 1px dashed var(--hairline-strong);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}
.actu-empty i {
  font-size: 3rem;
  color: var(--accent-color);
  opacity: 0.6;
}

/* ─── Responsive covers ─── */
@media (max-width: 767.98px) {
  .section-cover__bg {
    filter: blur(2px) brightness(0.85);
    inset: -4%;
  }
  .section-cover__tagline {
    font-size: 1rem;
  }
  .section-cover__tagline::before,
  .section-cover__tagline::after {
    display: block;
    margin: 0.5rem auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-cover__bg {
    animation: none;
    transform: scale(1.05);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MENU PREMIUM — polish high-end sur la navbar existante
   (CSS-only, aucune modification du HTML du menu)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Logo : typographie institutionnelle affinée ─── */
.header .logo {
  gap: 0.75rem;
  transition: opacity 0.5s var(--ease-premium);
}
.header .logo:hover {
  opacity: 0.92;
}
.header .logo img {
  transition: transform 0.6s var(--ease-premium);
}
.header .logo:hover img {
  transform: scale(1.05) rotate(-1.5deg);
}
.header .sitename {
  font-family: var(--editorial-font);
  font-weight: 500 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

/* ─── Liens de navigation desktop : tracking + underline animé ─── */
@media (min-width: 1200px) {
  .header .navmenu ul > li {
    margin: 0 0.15rem;
  }

  .header .navmenu ul > li > a {
    position: relative;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 18px 10px !important;
    transition:
      color 0.5s var(--ease-premium) !important;
  }

  /* Barre dorée animée (underline premium) */
  .header .navmenu ul > li > a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 1.5px;
    background: linear-gradient(90deg,
      transparent 0%,
      #c9a961 20%,
      #f4d47a 50%,
      #c9a961 80%,
      transparent 100%);
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition:
      transform 0.55s var(--ease-premium),
      opacity 0.55s var(--ease-premium);
    pointer-events: none;
  }

  .header .navmenu ul > li:hover > a::after,
  .header .navmenu ul > li > a.active::after {
    transform: scaleX(1);
    opacity: 1;
  }

  /* Chevron : rotation fluide lorsque le dropdown est hover */
  .header .navmenu .dropdown > a .toggle-dropdown {
    transition: transform 0.5s var(--ease-premium);
    font-size: 10px !important;
    margin-left: 6px !important;
    opacity: 0.8;
  }

  .header .navmenu .dropdown:hover > a .toggle-dropdown {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* ─── Dropdown : entrée premium (blur-fade-translateY) ─── */
  .header .navmenu .dropdown > ul {
    top: 110% !important;
    padding: 0.6rem !important;
    min-width: 240px;
    transform: translateY(-8px) scale(0.97);
    filter: blur(6px);
    transition:
      opacity 0.45s var(--ease-premium),
      transform 0.55s var(--ease-premium),
      filter 0.45s var(--ease-premium),
      visibility 0s linear 0.45s;
  }

  .header .navmenu .dropdown:hover > ul {
    top: 100% !important;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
      opacity 0.5s var(--ease-premium),
      transform 0.55s var(--ease-premium),
      filter 0.45s var(--ease-premium),
      visibility 0s linear 0s;
  }

  /* Items dropdown : stagger reveal */
  .header .navmenu .dropdown > ul > li {
    opacity: 0;
    transform: translateX(-8px);
    transition:
      opacity 0.45s var(--ease-premium),
      transform 0.45s var(--ease-premium);
  }

  .header .navmenu .dropdown:hover > ul > li {
    opacity: 1;
    transform: translateX(0);
  }

  .header .navmenu .dropdown:hover > ul > li:nth-child(1) { transition-delay: 0.06s; }
  .header .navmenu .dropdown:hover > ul > li:nth-child(2) { transition-delay: 0.11s; }
  .header .navmenu .dropdown:hover > ul > li:nth-child(3) { transition-delay: 0.16s; }
  .header .navmenu .dropdown:hover > ul > li:nth-child(4) { transition-delay: 0.21s; }
  .header .navmenu .dropdown:hover > ul > li:nth-child(5) { transition-delay: 0.26s; }
  .header .navmenu .dropdown:hover > ul > li:nth-child(6) { transition-delay: 0.31s; }
  .header .navmenu .dropdown:hover > ul > li:nth-child(n+7) { transition-delay: 0.36s; }
}

/* ─── Actions header : bouton Connexion premium "pill + icon bubble" ─── */
.header .header-actions {
  position: relative;
  z-index: 2;
  gap: 0.6rem !important;
}

.header .header-insigne {
  transition:
    transform 0.6s var(--ease-premium),
    filter 0.6s var(--ease-premium);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.header .header-insigne:hover {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 8px 18px rgba(201, 169, 97, 0.5));
}

.header .btn-outline-light {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201, 169, 97, 0.55) !important;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    transform 0.55s var(--ease-premium),
    background 0.55s var(--ease-premium),
    border-color 0.55s var(--ease-premium),
    box-shadow 0.55s var(--ease-premium) !important;
}

.header .btn-outline-light i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.18);
  border: 1px solid rgba(201, 169, 97, 0.35);
  font-size: 14px;
  margin: 0 !important;
  transition:
    transform 0.55s var(--ease-premium),
    background 0.55s var(--ease-premium);
}

.header .btn-outline-light:hover {
  background: rgba(201, 169, 97, 0.15) !important;
  border-color: rgba(201, 169, 97, 0.85) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px rgba(201, 169, 97, 0.45);
  color: #fff !important;
}

.header .btn-outline-light:hover i {
  background: var(--accent-color);
  color: #0a2540 !important;
  transform: translate(2px, -1px) scale(1.05);
}

/* ─── Mobile menu : overlay glass navy cinématographique ─── */
@media (max-width: 1199px) {
  .header .mobile-nav-toggle {
    color: #fff !important;
    transition:
      transform 0.5s var(--ease-premium),
      color 0.5s var(--ease-premium);
  }

  .header .mobile-nav-toggle:hover {
    transform: scale(1.08);
    color: var(--accent-color) !important;
  }

  /* Quand le menu est ouvert après avoir scrollé, le backdrop-filter ajouté
     au header (.scrolled) crée un bloc conteneur pour les éléments
     position:fixed : l'overlay du menu se retrouve alors confiné dans la
     barre du header (~60px) au lieu de couvrir l'écran (menu invisible).
     On neutralise les filtres du header tant que le menu est ouvert pour que
     l'overlay reprenne tout l'écran. */
  body.mobile-nav-active .header,
  body.scrolled.mobile-nav-active .header {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  .mobile-nav-active .navmenu {
    background: rgba(10, 37, 64, 0.92) !important;
    -webkit-backdrop-filter: saturate(1.3) blur(22px);
            backdrop-filter: saturate(1.3) blur(22px);
  }

  .mobile-nav-active .navmenu ul {
    inset: 80px 16px 20px 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 30px 80px -40px rgba(0, 0, 0, 0.7) !important;
    padding: 1rem 0.5rem !important;
  }

  .mobile-nav-active .navmenu a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.04em;
    padding: 0.85rem 1.25rem !important;
    border-radius: 0.65rem;
    margin: 0.1rem 0.4rem;
    transition:
      background 0.45s var(--ease-premium),
      color 0.45s var(--ease-premium),
      transform 0.45s var(--ease-premium);
  }

  .mobile-nav-active .navmenu a:hover,
  .mobile-nav-active .navmenu .active {
    background: rgba(201, 169, 97, 0.14);
    color: #f4d47a !important;
    transform: translateX(4px);
  }

  /* Staggered reveal des items mobile */
  .mobile-nav-active .navmenu > ul > li {
    opacity: 0;
    transform: translateY(12px);
    animation: mobile-nav-in 0.55s var(--ease-expo) forwards;
  }
  .mobile-nav-active .navmenu > ul > li:nth-child(1) { animation-delay: 0.08s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(2) { animation-delay: 0.14s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(3) { animation-delay: 0.20s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(4) { animation-delay: 0.26s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(5) { animation-delay: 0.32s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(6) { animation-delay: 0.38s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(n+7) { animation-delay: 0.44s; }

  @keyframes mobile-nav-in {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Sous-menu mobile raffiné */
  .mobile-nav-active .navmenu .dropdown ul {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.85rem !important;
    margin: 0.4rem 1rem !important;
    padding: 0.35rem 0 !important;
  }

  .mobile-nav-active .navmenu .dropdown ul a {
    font-size: 0.95rem !important;
  }
}

/* ─── Reduce motion ─── */
@media (prefers-reduced-motion: reduce) {
  .header .navmenu ul > li > a::after,
  .header .navmenu .dropdown > ul,
  .header .navmenu .dropdown > ul > li,
  .mobile-nav-active .navmenu > ul > li {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION GALLERY — Bento photos avec lightbox
   Utilisé dans Événements, CT/CL, SNLE
   ═══════════════════════════════════════════════════════════════════ */

.section-gallery__wrap {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.section-gallery__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
.section-gallery__label::before,
.section-gallery__label::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 169, 97, 0.8) 50%,
    transparent 100%);
}

.section-gallery {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 13rem;
}

/* ─── Variante 4 photos : grand gauche 2x2 + 1 paysage + 2 carrés ─── */
.section-gallery--4 > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.section-gallery--4 > :nth-child(2) { grid-column: span 2; grid-row: span 1; }
.section-gallery--4 > :nth-child(3) { grid-column: span 1; grid-row: span 1; }
.section-gallery--4 > :nth-child(4) { grid-column: span 1; grid-row: span 1; }

/* ─── Variante 3 photos : grand gauche 2x2 + 2 carrés empilés ─── */
.section-gallery--3 {
  grid-template-columns: repeat(3, 1fr);
}
.section-gallery--3 > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.section-gallery--3 > :nth-child(2) { grid-column: span 1; grid-row: span 1; }
.section-gallery--3 > :nth-child(3) { grid-column: span 1; grid-row: span 1; }

/* ─── Variante 2 photos : 60/40 cinématographique ─── */
.section-gallery--2 {
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: 18rem;
}
.section-gallery--2 > :nth-child(n) { grid-column: span 1; grid-row: span 1; }

/* ─── Item de galerie ─── */
.section-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 50px -28px rgba(0, 0, 0, 0.7);
  cursor: zoom-in;
  isolation: isolate;
  text-decoration: none;
  transition:
    transform 0.7s var(--ease-premium),
    box-shadow 0.7s var(--ease-premium),
    border-color 0.7s var(--ease-premium);
}

.section-gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition:
    transform 1.1s var(--ease-premium),
    filter 0.6s var(--ease-premium);
  will-change: transform;
}

.section-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 45%,
    rgba(0, 0, 0, 0.55) 100%);
  opacity: 0.7;
  transition: opacity 0.6s var(--ease-premium);
  pointer-events: none;
  z-index: 1;
}

.section-gallery__caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  z-index: 2;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transform: translateY(4px);
  opacity: 0.92;
  transition:
    transform 0.6s var(--ease-premium),
    opacity 0.6s var(--ease-premium);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.section-gallery__caption i {
  color: var(--accent-color);
  margin-right: 0.45rem;
  opacity: 0.9;
}

/* Hover : zoom image + lift carte + caption plus visible */
.section-gallery__item:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 97, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 32px 70px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(201, 169, 97, 0.2);
}
.section-gallery__item:hover img {
  transform: scale(1.08);
  filter: saturate(1.08) brightness(1.02);
}
.section-gallery__item:hover::after {
  opacity: 1;
}
.section-gallery__item:hover .section-gallery__caption {
  transform: translateY(0);
  opacity: 1;
}

/* Icône "expand" en coin supérieur droit */
.section-gallery__item::before {
  content: "\F4D0"; /* bi-arrows-angle-expand */
  font-family: "bootstrap-icons";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 37, 64, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.82rem;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.5s var(--ease-premium),
    transform 0.5s var(--ease-premium),
    background 0.5s var(--ease-premium);
  z-index: 3;
}
.section-gallery__item:hover::before {
  opacity: 1;
  transform: scale(1);
  background: rgba(201, 169, 97, 0.9);
  color: #0a2540;
}

/* ─── Responsive mobile : single column stack ─── */
@media (max-width: 767.98px) {
  .section-gallery,
  .section-gallery--3,
  .section-gallery--4,
  .section-gallery--2 {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 13rem !important;
  }
  .section-gallery > * {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  .section-gallery__label::before,
  .section-gallery__label::after {
    width: 22px;
  }
}

/* ─── Tablette : grille simplifiée 2 colonnes ─── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .section-gallery--4 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 12rem;
  }
  .section-gallery--4 > :nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .section-gallery--4 > :nth-child(n+2) { grid-column: span 1; grid-row: span 1; }

  .section-gallery--3 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 12rem;
  }
  .section-gallery--3 > :nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .section-gallery--3 > :nth-child(n+2) { grid-column: span 1; grid-row: span 1; }

  .section-gallery--2 {
    grid-template-columns: 1fr;
    grid-auto-rows: 14rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-gallery__item,
  .section-gallery__item img,
  .section-gallery__item::after,
  .section-gallery__item::before,
  .section-gallery__caption,
  .section-gallery__caption::before {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION GALLERY — UPGRADE PREMIUM (Ken Burns + draw underline + glow)
   Couches additionnelles, n'écrasent pas les rules du dessus.
   ═══════════════════════════════════════════════════════════════════ */

/* Ken Burns idle : zoom + drift très lents, en boucle alternée.
   Chaque item démarre avec un délai distinct (nth-child) pour que
   les images de la même galerie ne respirent pas en même temps. */
@keyframes sg-kenburns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0);          }
  50%  { transform: scale(1.09) translate3d(-1.2%, -0.8%, 0);  }
  100% { transform: scale(1.05) translate3d(1%, 0.6%, 0);      }
}

.section-gallery__item img {
  /* Désaturation légère au repos pour que le hover apporte un vrai
     contraste de couleur (effet éditorial premium). */
  filter: saturate(0.78) brightness(0.96);
  animation: sg-kenburns 26s ease-in-out infinite alternate;
}

/* Décalage de phase : les images bougent en sourdine, pas en chœur. */
.section-gallery > :nth-child(1) img { animation-delay:  0s; }
.section-gallery > :nth-child(2) img { animation-delay: -6s; }
.section-gallery > :nth-child(3) img { animation-delay: -12s; }
.section-gallery > :nth-child(4) img { animation-delay: -18s; }

/* Hover : on coupe Ken Burns (l'utilisateur regarde, on stabilise),
   on pousse couleur + luminosité, on garde le scale au max. */
.section-gallery__item:hover img {
  animation-play-state: paused;
  transform: scale(1.10);
  filter: saturate(1.18) brightness(1.05);
}

/* Glow doré tinté au hover (remplace l'ombre noire pure par une
   ombre teintée navy + halo or). Plus chaud, plus premium. */
.section-gallery__item:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 36px 80px -32px rgba(10, 37, 64, 0.85),
    0 0 0 1px rgba(201, 169, 97, 0.35),
    0 0 38px -8px rgba(201, 169, 97, 0.45);
}

/* Underline doré qui se "dessine" sous la caption au hover.
   Ligne fine de gauche à droite via scaleX origin-left. */
.section-gallery__caption {
  padding-bottom: 0.4rem;
}
.section-gallery__caption::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 56px;
  background: linear-gradient(90deg, var(--accent-color), rgba(201, 169, 97, 0.3));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-premium);
}
.section-gallery__item:hover .section-gallery__caption::before {
  transform: scaleX(1);
}

/* Petit "kicker" gold à gauche de l'icône caption au hover :
   l'icône monte légèrement et devient plus opaque. */
.section-gallery__caption i {
  transition: transform 0.5s var(--ease-premium), opacity 0.5s var(--ease-premium);
}
.section-gallery__item:hover .section-gallery__caption i {
  transform: translateY(-1px);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN UPGRADE LAYER v2
   Techniques du skill redesign-existing-projects + high-end-visual-design
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Grain / noise overlay (Editorial Luxury signature) ─── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ─── 2. Skip-to-content link (a11y premium) ─── */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--accent-color);
  color: #0a2540;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px -10px rgba(201, 169, 97, 0.6);
  transition: top 0.4s var(--ease-premium);
}
.skip-to-content:focus {
  top: 1rem;
  outline: none;
  color: #0a2540;
}

/* ─── 3. Premium focus ring (accessibilité) ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset 0.2s var(--ease-premium);
}

/* ─── 4. Text-wrap balance (anti-orphans) ─── */
.section-title h2,
.hero-title,
.statuts-hero__title,
.actu-feature__title,
h1, h2, h3 {
  text-wrap: balance;
}
.hero-content-text,
.actu-feature__excerpt,
.section-cover__tagline,
.president-content p {
  text-wrap: pretty;
}

/* ─── 5. Tinted colored shadows (plus de noir générique) ─── */
.event-card,
.actu-card,
.amicale-link-card,
.statuts-key-card,
.actu-feature {
  --shadow-tint: 10, 37, 64; /* navy */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(var(--shadow-tint), 0.04),
    0 8px 22px -14px rgba(var(--shadow-tint), 0.18),
    0 30px 60px -40px rgba(var(--shadow-tint), 0.3) !important;
}

.amicale-link-card {
  --shadow-tint: 138, 106, 47; /* gold warm (hover donne cette teinte) */
}
.amicale-link-card--jorf { --shadow-tint: 26, 95, 180; }
.amicale-link-card--guide { --shadow-tint: 45, 106, 79; }

/* ─── 6. Spotlight border (halo doré sous curseur) ─── */
.event-card,
.actu-card,
.amicale-link-card,
.actu-feature,
.statuts-key-card {
  position: relative;
  overflow: visible;
}

.spotlight-wrap {
  position: relative;
  border-radius: inherit;
}
.spotlight-wrap::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    360px circle at var(--mx, -200px) var(--my, -200px),
    rgba(201, 169, 97, 0.7) 0%,
    rgba(244, 212, 122, 0.15) 35%,
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.6s var(--ease-premium);
  pointer-events: none;
  z-index: 2;
}
.spotlight-wrap:hover::before,
.spotlight-wrap:focus-within::before {
  opacity: 1;
}

/* ─── 7. Events asymmetric bento grid (casse la grille 3-cols symétrique) ─── */
.events-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(14rem, auto);
  gap: 1.5rem;
}

.events-bento > * { grid-column: span 3; }

.events-bento--count-1 > :nth-child(1) { grid-column: span 6; grid-row: span 1; }

.events-bento--count-2 > :nth-child(1) { grid-column: span 4; }
.events-bento--count-2 > :nth-child(2) { grid-column: span 2; }

.events-bento--count-3 > :nth-child(1) { grid-column: span 4; grid-row: span 2; }
.events-bento--count-3 > :nth-child(2) { grid-column: span 2; }
.events-bento--count-3 > :nth-child(3) { grid-column: span 2; }

.events-bento--count-4 > :nth-child(1) { grid-column: span 4; grid-row: span 2; }
.events-bento--count-4 > :nth-child(2) { grid-column: span 2; }
.events-bento--count-4 > :nth-child(3) { grid-column: span 2; }
.events-bento--count-4 > :nth-child(4) { grid-column: span 6; }

.events-bento--count-5 > :nth-child(1) { grid-column: span 4; grid-row: span 2; }
.events-bento--count-5 > :nth-child(2) { grid-column: span 2; }
.events-bento--count-5 > :nth-child(3) { grid-column: span 2; }
.events-bento--count-5 > :nth-child(4) { grid-column: span 3; }
.events-bento--count-5 > :nth-child(5) { grid-column: span 3; }

.events-bento .event-card {
  height: 100%;
}

/* Event-card : structure BEM de base */
.events-bento .event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(10, 37, 64, 0.06);
  box-shadow: 0 1px 3px rgba(10, 37, 64, 0.04),
              0 8px 24px -8px rgba(10, 37, 64, 0.08);
  overflow: hidden;
  transition: transform 0.4s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 0.4s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.events-bento .event-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 0.5rem;
}
.events-bento .event-card__title {
  font-family: var(--editorial-font, "Fraunces", serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--heading-color, #0a2540);
  margin: 0 0 0.4rem 0;
  text-wrap: balance;
}
.events-bento .event-card__text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--default-color, #495057), transparent 10%);
  margin: 0;
  text-wrap: pretty;
}

/* Event-card featured : le premier (grand bloc) prend une typo plus grande */
.events-bento > :first-child .event-card__body {
  padding: 2rem;
}
.events-bento > :first-child .event-card__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.events-bento > :first-child .event-card__text {
  font-size: 1rem;
  line-height: 1.6;
}
.events-bento > :first-child .event-card::after {
  /* pastille "à la une" discrète */
  content: "Événement phare";
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
  color: #8a6a2f;
  font-family: "Montserrat", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 3;
}

/* Numbers in tabular nums (dates events) */
.event-card .event-date,
.event-card .event-date span,
.actu-feature__meta {
  font-variant-numeric: tabular-nums;
}
.events-bento .event-card .event-date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-color, #c9a961);
  display: inline-flex;
  align-items: center;
}
.events-bento .event-card .event-date i {
  color: var(--accent-color, #c9a961);
}
.events-bento .event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.08),
              0 18px 40px -12px rgba(10, 37, 64, 0.18);
}

/* Responsive events bento */
@media (max-width: 991.98px) {
  .events-bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .events-bento > * { grid-column: span 2 !important; grid-row: span 1 !important; }
  .events-bento > :nth-child(1) { grid-column: span 2 !important; }
  .events-bento > :first-child .event-card::after { display: none; }
}

@media (max-width: 575.98px) {
  .events-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .events-bento > * { grid-column: span 1 !important; }
}

/* ─── 8. Active press feedback (physical click) ─── */
.btn-decouvrir:active,
.amicale-link-card:active,
.section-gallery__item:active,
.actu-feature:active,
.event-card:active,
.header .btn-outline-light:active {
  transform: translateY(0) scale(0.985) !important;
  transition-duration: 0.12s !important;
}

/* ─── 9. Parallax très léger sur covers (CSS pure, zéro JS) ─── */
/* Utilise background-attachment fixed sur desktop uniquement */
@media (min-width: 992px) and (hover: hover) {
  .amicale-cover__bg,
  .section-cover__bg {
    background-attachment: fixed;
  }
}

/* ─── 10. Président section : ambiance éditoriale subtile ─── */
.section-president {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(201, 169, 97, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 100%, rgba(10, 37, 64, 0.04) 0%, transparent 50%),
    #ffffff;
}

/* ─── 11. Actualités empty state : composé (plus de "Contenu non disponible") ─── */
.actu-empty {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 169, 97, 0.06) 0%, transparent 50%),
    rgba(255, 255, 255, 0.6);
}

/* ─── 12. Reduce motion : neutralisation ─── */
@media (prefers-reduced-motion: reduce) {
  .spotlight-wrap::before,
  .btn-decouvrir:active,
  .amicale-link-card:active {
    transition: none !important;
    transform: none !important;
  }
  body::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SECTION CONTACT — Editorial Luxury + double-bezel shells
   ══════════════════════════════════════════════════════════════════ */
.section-contact {
  position: relative;
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
  background:
    radial-gradient(1200px 700px at 80% -10%,
      color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 60%),
    linear-gradient(180deg, #fdfbf7 0%, #f4f7fb 100%);
  overflow: hidden;
  isolation: isolate;
}
.section-contact__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  z-index: 0;
}
.section-contact > * { position: relative; z-index: 1; }

.section-contact__lead {
  max-width: 720px;
  margin: 1.5rem auto 0;
  color: #4a5568;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.75;
  text-wrap: balance;
}
.section-contact__lead strong {
  color: var(--accent-color, #c9a961);
  font-weight: 600;
}

/* ─── Double-bezel shell (carte formulaire & carte suivi) ─── */
.contact-shell {
  position: relative;
  display: block;
  padding: 6px;
  border-radius: 2rem;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--accent-color) 18%, #fff) 0%,
    rgba(10, 37, 64, 0.06) 55%,
    rgba(255, 255, 255, 0.9) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 30px 80px -30px rgba(10, 37, 64, 0.25),
    0 8px 24px -8px rgba(10, 37, 64, 0.10);
  transition: transform 0.7s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 0.7s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.contact-shell:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 40px 100px -30px rgba(10, 37, 64, 0.32),
    0 14px 32px -10px rgba(10, 37, 64, 0.14);
}
.contact-shell__inner {
  position: relative;
  background: #fff;
  border-radius: calc(2rem - 6px);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  height: 100%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* Carte suivi : teintée navy / différente de la principale */
.contact-shell--suivi {
  background: linear-gradient(145deg,
    rgba(10, 37, 64, 0.92) 0%,
    rgba(10, 37, 64, 0.78) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 30px 80px -30px rgba(10, 37, 64, 0.45),
    0 8px 24px -8px rgba(10, 37, 64, 0.22);
}
.contact-shell--suivi .contact-shell__inner {
  background: linear-gradient(180deg, #0a2540 0%, #102e4f 100%);
  color: #e7ecf4;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
.contact-shell--suivi .contact-shell__title { color: #fff; }
.contact-shell--suivi .contact-shell__intro { color: rgba(231, 236, 244, 0.72); }

/* ─── Eyebrow pill ─── */
.contact-shell__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
  color: #8a6a2f;
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.contact-shell__eyebrow i { font-size: 0.85rem; }
.contact-shell__eyebrow--gold {
  background: color-mix(in srgb, var(--accent-color) 22%, rgba(201, 169, 97, 0.1));
  border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
  color: #f4d47a;
}

.contact-shell__title {
  font-family: var(--editorial-font, "Fraunces", serif);
  font-size: clamp(1.4rem, 2.1vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: 0.6rem;
  color: var(--heading-color, #0a2540);
  text-wrap: balance;
}
.contact-shell__intro {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5a6270;
  margin-bottom: 1.75rem;
}

/* ─── Form fields ─── */
.contact-form__label {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.contact-shell--suivi .contact-form__label { color: rgba(231, 236, 244, 0.7); }

.contact-form__input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  font-family: inherit;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--heading-color, #0a2540);
  background: #fafbfc;
  border: 1px solid rgba(10, 37, 64, 0.10);
  border-radius: 0.9rem;
  box-shadow:
    inset 0 1px 2px rgba(10, 37, 64, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 0.35s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 0.35s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              background 0.35s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.contact-form__input::placeholder { color: #9aa3b2; }
.contact-form__input:hover {
  border-color: rgba(10, 37, 64, 0.20);
  background: #fff;
}
.contact-form__input:focus {
  outline: none;
  border-color: var(--accent-color, #c9a961);
  background: #fff;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent-color) 20%, transparent),
    inset 0 1px 2px rgba(10, 37, 64, 0.04);
}
.contact-form__input.is-invalid {
  border-color: #e06b6b;
  background: #fff7f7;
  box-shadow: 0 0 0 3px rgba(224, 107, 107, 0.12);
}
.contact-form__textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.6;
}
.contact-form__input--mono {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, Monaco, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.contact-shell--suivi .contact-form__input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.contact-shell--suivi .contact-form__input::placeholder { color: rgba(231, 236, 244, 0.38); }
.contact-shell--suivi .contact-form__input:focus {
  border-color: var(--accent-color, #c9a961);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent-color) 28%, transparent),
    inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.contact-form__error {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #c44a4a;
  font-weight: 500;
}

.contact-form__footer {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.contact-form__legal {
  margin: 0;
  font-size: 0.82rem;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.contact-form__legal i { color: var(--accent-color, #c9a961); }

/* Code group (suivi) : input + bouton rond accolé */
.contact-form__code-group {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}
.contact-form__code-group .contact-form__input { flex: 1 1 auto; }

/* ─── Button "nested icon" (Button-in-Button pattern) ─── */
.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.7rem 0.7rem 1.4rem;
  background: linear-gradient(135deg, #0a2540 0%, #133a63 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 6px 18px -8px rgba(10, 37, 64, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.4s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 0.4s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              background 0.4s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.contact-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #133a63 0%, #1b4a7d 100%);
  box-shadow:
    0 12px 28px -10px rgba(10, 37, 64, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
}
.contact-btn:active { transform: translateY(0) scale(0.985); }
.contact-btn:focus-visible {
  outline: 2px solid var(--accent-color, #c9a961);
  outline-offset: 3px;
}

/* Icône ronde imbriquée (button-in-button) */
.contact-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 85%, #fff);
  color: #0a2540;
  transition: transform 0.45s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.contact-btn:hover .contact-btn__icon {
  transform: translate(2px, -2px) scale(1.06);
}
.contact-btn__icon i { font-size: 1rem; line-height: 1; }

.contact-btn--icon {
  padding: 0.4rem;
  gap: 0;
}
.contact-btn--icon .contact-btn__icon {
  background: var(--accent-color, #c9a961);
  width: 2.75rem;
  height: 2.75rem;
}

/* ─── Bandeau succès (confirmation envoi) ─── */
.contact-success {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2.5rem;
  padding: 1.75rem 2rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(180px 120px at 10% 0%,
      color-mix(in srgb, var(--accent-color) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #fffbf1 0%, #fff 100%);
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 60px -20px rgba(201, 169, 97, 0.35);
}
.contact-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 999px;
  background: var(--accent-color, #c9a961);
  color: #fff;
  font-size: 1.85rem;
  box-shadow:
    0 10px 24px -8px rgba(201, 169, 97, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.contact-success__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: #8a6a2f;
  font-family: "Montserrat", sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.contact-success__title {
  font-family: var(--editorial-font, "Fraunces", serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--heading-color, #0a2540);
  margin: 0 0 0.45rem;
  text-wrap: balance;
}
.contact-success__text {
  color: #4a5568;
  margin: 0 0 0.85rem;
  font-size: 0.98rem;
}

/* ── Avertissement « gardez ce code » ──────────────────────────────────
   Le code de suivi n'est montré qu'une fois et n'est pas renvoyé par
   e-mail. Deux moments le rappellent, avec la MÊME pastille dorée :
   avant l'envoi (.contact-form__avis) et sur la confirmation
   (.contact-success__text--garder).

   Le glyphe est en navy SUR l'or (6,9:1) et non en or sur le fond crème
   du bloc, qui ne donnerait que 2,2:1 — soit une icône quasi invisible.
   Le halo est un pseudo-élément animé en transform/opacity uniquement,
   donc composité par le GPU sans repeindre la carte à chaque image. */
.contact-success__text--garder,
.contact-form__avis {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: #3d4655;
}

/* Rappel AVANT l'envoi : encart sobre, dans le fil du formulaire. */
.contact-form__avis {
  margin-top: 1.5rem;
  padding: 0.85rem 1.05rem;
  font-size: 0.88rem;
  line-height: 1.5;
  border-radius: 0.85rem;
  border: 1px solid rgba(201, 169, 97, 0.42);
  background: linear-gradient(180deg, #fffdf6 0%, #fffaef 100%);
}

.contact-warn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.05rem;
}
/* Disque doré */
.contact-warn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #e2c684 0%, #c9a961 55%, #b28c39 100%);
  box-shadow: 0 4px 10px -4px rgba(150, 112, 20, 0.65);
}
/* Halo lumineux, sous le disque */
.contact-warn::after {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201, 169, 97, 0.65) 0%,
    rgba(201, 169, 97, 0) 70%);
  opacity: 0.3;
  transform: scale(0.8);
  animation: contactWarnHalo 2.6s ease-in-out infinite;
  pointer-events: none;
}
.contact-warn i {
  position: relative;
  z-index: 2;
  font-size: 1rem;
  line-height: 1;
  color: #0a2540;
}
@keyframes contactWarnHalo {
  0%, 100% { opacity: 0.28; transform: scale(0.8); }
  50%      { opacity: 0.95; transform: scale(1.3); }
}

/* Mouvement réduit : le halo reste, figé sur son état haut. L'information
   ne dépend pas de l'animation. */
@media (prefers-reduced-motion: reduce) {
  .contact-warn::after {
    animation: none;
    opacity: 0.5;
    transform: scale(1.05);
  }
}
.contact-success__code {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: 999px;
  background: #0a2540;
  color: #f4d47a;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, Monaco, monospace;
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  box-shadow:
    0 10px 24px -10px rgba(10, 37, 64, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin-bottom: 1rem;
  max-width: 100%;
  overflow: hidden;
}
.contact-success__code code {
  font-family: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0.12em;
  overflow-x: auto;
  white-space: nowrap;
  padding-right: 0.25rem;
}
.contact-success__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 80%, #fff);
  color: #0a2540;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.35s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              background 0.35s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.contact-success__copy:hover { transform: translateY(-1px); background: #f4d47a; }
.contact-success__copy.is-copied { background: #9fd89f; color: #0a2540; }
.contact-success__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.82rem;
  color: #6b7280;
}
.contact-success__hint i { color: var(--accent-color, #c9a961); }

/* ─── Suivi : bloc résultat ─── */
.suivi-result {
  margin-top: 1.5rem;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.suivi-result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact-status--pending {
  background: color-mix(in srgb, var(--accent-color) 22%, rgba(201, 169, 97, 0.08));
  color: #f4d47a;
  border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
}
.contact-status--ok {
  background: rgba(87, 176, 120, 0.18);
  color: #8fe0a8;
  border: 1px solid rgba(143, 224, 168, 0.35);
}
.suivi-result__date {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, Monaco, monospace;
  font-size: 0.78rem;
  color: rgba(231, 236, 244, 0.7);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.suivi-result__dl { margin: 0; }
.suivi-result__dl dt {
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(231, 236, 244, 0.5);
  margin-bottom: 0.3rem;
  margin-top: 0.85rem;
}
.suivi-result__dl dt:first-child { margin-top: 0; }
.suivi-result__dl dd {
  margin: 0 0 0.5rem;
  color: #e7ecf4;
  font-size: 0.94rem;
  line-height: 1.6;
}
.suivi-result__text {
  white-space: pre-line;
  color: rgba(231, 236, 244, 0.82) !important;
}
.suivi-result__dt-gold { color: var(--accent-color, #c9a961) !important; }
.suivi-result__reply {
  background: color-mix(in srgb, var(--accent-color) 14%, rgba(201, 169, 97, 0.05));
  border: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  color: #f5ecd6 !important;
  line-height: 1.7;
}
.suivi-result__reply-date {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--accent-color) 30%, transparent);
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-color, #c9a961);
}

/* ─── Alertes inline ─── */
.contact-alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.9rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.contact-alert--error {
  background: #fdf1f1;
  border: 1px solid #f2c0c0;
  color: #a43b3b;
}
.contact-alert--error i { color: #c44a4a; font-size: 1.1rem; }
.contact-alert--inline {
  margin: 1rem 0 0;
  background: rgba(224, 107, 107, 0.14);
  border: 1px solid rgba(224, 107, 107, 0.35);
  color: #ffb8b8;
}

/* ─── Responsive ─── */
@media (max-width: 767.98px) {
  .section-contact { padding-top: 4rem; padding-bottom: 4rem; }
  .contact-success {
    grid-template-columns: 1fr;
    padding: 1.25rem;
    gap: 1rem;
  }
  .contact-success__icon { width: 3rem; height: 3rem; font-size: 1.5rem; }
  .contact-form__footer { flex-direction: column; align-items: flex-start; }
  .contact-btn { width: 100%; justify-content: space-between; }
}
/* ══════════════════════════════════════════════════════════════════
   HERO ASYMÉTRIQUE — variante activée via la classe .hero-cover--split
   Pour activer : ajouter la classe au <section> + <div class="hero-cover__bg">
   Pour revenir : retirer la classe. Zéro impact sur le hero centré par défaut.
   ══════════════════════════════════════════════════════════════════ */

.hero-cover--split {
  justify-content: flex-start;
  align-items: center;
}

/* Arrière-plan : photo en PLEINE intensité, aucun blur, léger boost
   de saturation et contraste pour faire vibrer les couleurs. Le
   contraste du texte est assuré uniquement par un pool radial très
   localisé derrière le bloc texte + un text-shadow discret. */
.hero-cover--split .hero-cover__bg {
  filter: brightness(1.05) saturate(1.12) contrast(1.05);
}
.hero-cover--split::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* 1) Pool sombre concentré derrière le bloc texte gauche.
          Plus petit qu'avant, qui s'éteint vite : la photo est
          visible quasi partout (~80 % de la surface). */
    radial-gradient(
      ellipse 50% 80% at 22% 55%,
      rgba(5, 12, 24, 0.65) 0%,
      rgba(5, 12, 24, 0.40) 35%,
      rgba(5, 12, 24, 0.10) 60%,
      rgba(5, 12, 24, 0)    78%
    ),
    /* 2) Très léger voile en bas seulement, pour ancrer le hero
          et amener de la profondeur cinéma — la moitié droite
          haute de l'image reste totalement libre. */
    linear-gradient(
      180deg,
      rgba(5, 12, 24, 0)    0%,
      rgba(5, 12, 24, 0)    65%,
      rgba(5, 12, 24, 0.18) 100%
    );
  pointer-events: none;
}

/* Sécurité lisibilité : un text-shadow très discret sur le titre et
   le lead, pour compenser la baisse du voile noir. Imperceptible
   sur fond sombre, garantit la lecture si la photo a une zone claire. */
.hero-cover--split .hero-title,
.hero-cover--split .hero-cover__content h1,
.hero-cover--split .hero-content-text,
.hero-cover--split .hero-cover__content p {
  text-shadow: 0 2px 18px rgba(5, 12, 24, 0.55);
}

/* Bloc contenu : ancré à gauche, aligné éditorial, whitespace généreux */
.hero-cover--split .hero-cover__content {
  z-index: 2;
  text-align: left;
  max-width: 640px;
  width: 100%;
  margin: 0;
  padding: clamp(7rem, 14vh, 11rem)
           clamp(1.5rem, 4vw, 3rem)
           clamp(3rem, 8vh, 5rem)
           clamp(1.5rem, 8vw, 6.5rem);
}

/* Eyebrow tag discret au-dessus du titre */
.hero-cover--split .hero-cover__content::before {
  content: "Amicale · Marine Nationale";
  display: inline-block;
  margin-bottom: 1.75rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(201, 169, 97, 0.95);
  background: rgba(201, 169, 97, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Titre éditorial : typographie massive, interlignage serré */
.hero-cover--split .hero-cover__content h1,
.hero-cover--split .hero-title {
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.75rem;
}

/* Lead : moins large que l'H1, teinte soft */
.hero-cover--split .hero-cover__content p,
.hero-cover--split .hero-content-text {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.75;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* CTA : ligne fine, button-in-button */
.hero-cover--split .btn-decouvrir {
  margin-top: 2.5rem;
  padding: 0.85rem 1.1rem 0.85rem 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  background: #c9a961;
  color: #0a2540;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(201, 169, 97, 0.22);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-cover--split .btn-decouvrir i {
  margin: 0 !important;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 37, 64, 0.12);
  border-radius: 999px;
  font-size: 0.95rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-cover--split .btn-decouvrir:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(201, 169, 97, 0.32);
  background: #d4af37;
}
.hero-cover--split .btn-decouvrir:hover i {
  transform: translate(2px, 2px) scale(1.05);
}
.hero-cover--split .btn-decouvrir:active {
  transform: translateY(0) scale(0.98);
}

/* Indicateur "scroll" minimal en bas-droite (détail éditorial) */
.hero-cover--split::after {
  content: "↓ Scroll";
  position: absolute;
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
  animation: hero-split-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes hero-split-pulse {
  0%, 100% { opacity: 0.35; transform: rotate(180deg) translateY(0); }
  50%      { opacity: 0.85; transform: rotate(180deg) translateY(-6px); }
}

/* Fallback mobile : on revient à un layout centré, plus lisible sur petit écran.
   Sur mobile le texte est CENTRÉ — donc le pool radial bascule au centre,
   et reste assez doux pour que la photo respire. */
@media (max-width: 767.98px) {
  .hero-cover--split { justify-content: center; }
  .hero-cover--split::before {
    background:
      radial-gradient(
        ellipse 75% 65% at 50% 65%,
        rgba(5, 12, 24, 0.55) 0%,
        rgba(5, 12, 24, 0.30) 50%,
        rgba(5, 12, 24, 0)    85%
      ),
      linear-gradient(180deg,
        rgba(5, 12, 24, 0)    0%,
        rgba(5, 12, 24, 0)    60%,
        rgba(5, 12, 24, 0.22) 100%);
  }
  .hero-cover--split .hero-cover__content {
    text-align: center;
    max-width: 100%;
    padding: 6rem 1.25rem 3rem;
  }
  .hero-cover--split .hero-cover__content::before { margin: 0 auto 1.25rem; }
  .hero-cover--split .hero-cover__content p,
  .hero-cover--split .hero-content-text { margin-left: auto; margin-right: auto; }
  .hero-cover--split::after { display: none; }
}

/* Accessibilité : respecte la préférence reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-cover--split::after { animation: none; }
  .hero-cover--split .btn-decouvrir,
  .hero-cover--split .btn-decouvrir i { transition: none; }
}

/* ============================================================
   AMICALE — Premium refresh (Ethereal Glass sur fond dark)
   Archetype : glass translucide, hairlines dorés, editorial typo
   Active via la classe .amicale-cover--premium uniquement.
   ============================================================ */
.amicale-cover--premium {
  padding: clamp(5rem, 10vh, 8rem) 0 clamp(4rem, 8vh, 6rem);
}

/* Grain cinéma par-dessus le veil */
.amicale-cover--premium .amicale-cover__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='0.55'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* Veil renforcé pour lisibilité du contenu clair */
.amicale-cover--premium .amicale-cover__veil {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(201, 169, 97, 0.1) 0%, transparent 55%),
    linear-gradient(180deg,
      rgba(5, 20, 40, 0.72) 0%,
      rgba(5, 20, 40, 0.86) 100%),
    radial-gradient(ellipse at center,
      rgba(5, 20, 40, 0.1) 0%,
      rgba(5, 20, 40, 0.5) 100%);
}

/* ── En-tête éditorial centré ──────────────────────────────── */
.amicale-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(3rem, 6vh, 4.5rem);
}
.amicale-heading__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(244, 212, 122, 0.95);
}
.amicale-heading__line {
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(244, 212, 122, 0.8), transparent);
}
.amicale-heading__title {
  margin: 1.25rem 0 1.25rem;
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fdfaf4;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}
.amicale-heading__title em {
  font-style: italic;
  font-weight: 300;
  color: rgba(244, 212, 122, 0.95);
}
.amicale-heading__lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(253, 250, 244, 0.8);
  max-width: 58ch;
  margin: 0 auto;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* ── Manifeste : glass card avec marque typographique ───────── */
.amicale-manifesto {
  max-width: 960px;
  margin: 0 auto clamp(3rem, 6vh, 4.5rem);
}
.amicale-manifesto__shell {
  position: relative;
  padding: 0.65rem;
  border-radius: 1.75rem;
  background: linear-gradient(145deg,
    rgba(253, 250, 244, 0.12) 0%,
    rgba(253, 250, 244, 0.04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 0 1px rgba(244, 212, 122, 0.28),
    0 40px 80px -32px rgba(0, 0, 0, 0.7),
    0 15px 40px -20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
.amicale-manifesto__core {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: calc(1.75rem - 0.65rem);
  background: linear-gradient(135deg,
    rgba(253, 250, 244, 0.97) 0%,
    rgba(248, 243, 232, 0.95) 100%);
  color: #0a2540;
  overflow: hidden;
}
.amicale-manifesto__mark {
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: clamp(8rem, 18vw, 14rem);
  font-weight: 400;
  line-height: 1;
  color: rgba(201, 169, 97, 0.14);
  pointer-events: none;
  user-select: none;
}
.amicale-manifesto__body {
  position: relative;
  line-height: 1.8;
  font-size: 1.02rem;
  color: rgba(10, 37, 64, 0.88);
}
.amicale-manifesto__body p:last-child { margin-bottom: 0; }
.amicale-manifesto__body h2,
.amicale-manifesto__body h3,
.amicale-manifesto__body h4 {
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-weight: 500;
  color: #0a2540;
  letter-spacing: -0.01em;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.amicale-manifesto__seal {
  position: absolute;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 50%;
  color: rgba(201, 169, 97, 0.95);
  font-size: 1.1rem;
  background: rgba(201, 169, 97, 0.08);
}

/* ── Documents : header + count ─────────────────────────────── */
.amicale-docs {
  max-width: 1140px;
  margin: 0 auto;
}
.amicale-docs__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 0 0.5rem 1.25rem;
  border-bottom: 1px solid rgba(244, 212, 122, 0.2);
}
.amicale-docs__eyebrow {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253, 250, 244, 0.75);
}
.amicale-docs__count {
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(244, 212, 122, 0.9);
  letter-spacing: 0.05em;
}

/* ── Grille 2x2 ─────────────────────────────────────────────── */
.amicale-docs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 767.98px) {
  .amicale-docs__grid { grid-template-columns: 1fr; }
}

/* ── Carte document : glass double-bezel + CTA button-in ───── */
.amicale-doc {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.amicale-doc__shell {
  position: relative;
  height: 100%;
  padding: 0.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(145deg,
    rgba(253, 250, 244, 0.14) 0%,
    rgba(253, 250, 244, 0.04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 0 1px rgba(244, 212, 122, 0.22),
    0 25px 50px -24px rgba(0, 0, 0, 0.55),
    0 10px 25px -14px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  transition:
    transform 0.7s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.7s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.amicale-doc__core {
  position: relative;
  height: 100%;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  border-radius: calc(1.5rem - 0.5rem);
  background: linear-gradient(145deg,
    rgba(10, 25, 45, 0.55) 0%,
    rgba(5, 18, 35, 0.65) 100%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  transition: background 0.7s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.amicale-doc__core::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--doc-accent, #c9a961) 0%,
    rgba(201, 169, 97, 0.3) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ── Tête de carte : num + icon ─────────────────────────────── */
.amicale-doc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.amicale-doc__num {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(244, 212, 122, 0.8);
  padding: 0.25rem 0.55rem;
  background: rgba(244, 212, 122, 0.08);
  border: 1px solid rgba(244, 212, 122, 0.22);
  border-radius: 999px;
}
.amicale-doc__icon {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: rgba(var(--doc-accent-rgb, 201, 169, 97), 0.12);
  color: var(--doc-accent, #c9a961);
  border: 1px solid rgba(var(--doc-accent-rgb, 201, 169, 97), 0.3);
  border-radius: 0.9rem;
  transition:
    transform 0.6s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    background 0.6s ease;
}

/* ── Textes ──────────────────────────────────────────────────── */
.amicale-doc__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--doc-accent, #c9a961);
  margin-top: 0.25rem;
}
.amicale-doc__title {
  font-family: var(--editorial-font, 'Fraunces'), Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fdfaf4;
  margin: 0;
}
.amicale-doc__text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(253, 250, 244, 0.7);
  margin: 0;
}

/* ── CTA : pill + button-in-button ──────────────────────────── */
.amicale-doc__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.55rem 0.65rem 0.55rem 1.1rem;
  background: rgba(253, 250, 244, 0.05);
  border: 1px solid rgba(244, 212, 122, 0.3);
  color: #fdfaf4;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition:
    background 0.5s ease,
    border-color 0.5s ease,
    transform 0.5s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.amicale-doc__cta-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 212, 122, 0.12);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--doc-accent, #c9a961);
  transition: transform 0.5s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ── Hover : lift, accent progress bar, icon kinetic ────────── */
.amicale-doc:hover .amicale-doc__shell {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px var(--doc-accent, #c9a961),
    0 35px 70px -28px rgba(0, 0, 0, 0.7),
    0 15px 35px -16px rgba(0, 0, 0, 0.5);
}
.amicale-doc:hover .amicale-doc__core {
  background: linear-gradient(145deg,
    rgba(10, 25, 45, 0.7) 0%,
    rgba(5, 18, 35, 0.82) 100%);
}
.amicale-doc:hover .amicale-doc__core::after { transform: scaleX(1); }
.amicale-doc:hover .amicale-doc__icon {
  transform: translateY(-2px) rotate(-3deg) scale(1.05);
  background: rgba(var(--doc-accent-rgb, 201, 169, 97), 0.22);
}
.amicale-doc:hover .amicale-doc__cta {
  background: var(--doc-accent, #c9a961);
  border-color: var(--doc-accent, #c9a961);
  color: #0a2540;
}
.amicale-doc:hover .amicale-doc__cta-icon {
  transform: translate(3px, -3px) rotate(6deg);
  background: rgba(10, 37, 64, 0.18);
  color: #0a2540;
}
.amicale-doc:active .amicale-doc__shell { transform: translateY(-4px) scale(0.99); }

/* ── Variantes de couleur (accent par type) ─────────────────── */
.amicale-doc--statuts   { --doc-accent: #c9a961; --doc-accent-rgb: 201, 169, 97; }
.amicale-doc--jorf      { --doc-accent: #6ba3e5; --doc-accent-rgb: 107, 163, 229; }
.amicale-doc--reglement { --doc-accent: #d4b86c; --doc-accent-rgb: 212, 184, 108; }
.amicale-doc--guide     { --doc-accent: #8dc49c; --doc-accent-rgb: 141, 196, 156; }

/* ── Reveal staggered ───────────────────────────────────────── */
.amicale-heading.reveal-on-scroll,
.amicale-manifesto.reveal-on-scroll { transform: translateY(30px); }
.amicale-docs__header.reveal-on-scroll { transform: translateY(24px); }
.amicale-doc.reveal-on-scroll:nth-child(odd)  { transform: translateY(40px) translateX(-16px); }
.amicale-doc.reveal-on-scroll:nth-child(even) { transform: translateY(40px) translateX(16px); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .amicale-cover--premium { padding: 4rem 0 3rem; }
  .amicale-manifesto__core { padding: 1.75rem; }
  .amicale-manifesto__mark { font-size: 6rem; top: -0.4rem; left: 0.75rem; }
  .amicale-doc__shell { padding: 0.4rem; border-radius: 1.25rem; }
  .amicale-doc__core { border-radius: calc(1.25rem - 0.4rem); padding: 1.5rem; }
  .amicale-doc__title { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .amicale-doc__shell,
  .amicale-doc__core,
  .amicale-doc__core::after,
  .amicale-doc__icon,
  .amicale-doc__cta,
  .amicale-doc__cta-icon { transition: none; }
}

/* =========================================================
   ÉVÉNEMENTS / CALENDRIER
   ---------------------------------------------------------
   Styles déplacés depuis :
     - app/Views/evenements/calendrier.php
     - app/Views/evenements/_card_evenement.php
   Pour ne plus avoir de bloc <style> dans les vues PHP.
   ========================================================= */

/* ── Variables locales (page calendrier) ─────────────────── */
.calendrier-page {
  --cal-navy: #0c2340;
  --cal-gold: #c9a34a;
  --cal-gold-soft: #e9d49a;
  --cal-bg: #fbfaf6;
  --cal-ink: #1a2332;
  --cal-ink-soft: #52606d;
  --cal-rule: #e8e3d5;
}

/* ── Hero ────────────────────────────────────────────────── */
.calendrier-hero {
  position: relative;
  min-height: 52vh;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  overflow: hidden;
}
.calendrier-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  transition: transform 8s cubic-bezier(.2,.7,.3,1);
}
.calendrier-page:hover .calendrier-hero__bg { transform: scale(1); }
.calendrier-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,35,64,.55) 0%, rgba(12,35,64,.82) 100%),
    radial-gradient(1200px 400px at 50% 110%, rgba(201,163,74,.25), transparent 60%);
}

.calendrier-hero::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: .08;
  mix-blend-mode: overlay;
}
.calendrier-hero__content {
  position: relative; z-index: 1;
  text-align: center;
  padding: 6rem 1rem 5rem;
}
.calendrier-hero__eyebrow {
  display: inline-block;
  padding: .35rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .75rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cal-gold-soft);
  border: 1px solid rgba(233,212,154,.35);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.calendrier-hero__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 500;
  line-height: 1.02;
  margin: 1.25rem 0 1rem;
  letter-spacing: -.01em;
  color: #fff;
}
.calendrier-hero__subtitle {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: rgba(255,255,255,.88);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Intro ───────────────────────────────────────────────── */
/* Pages libres : hero aligne sur le rendu Calendrier */
.cms-page {
  background: var(--cal-bg, #f8f5ed);
  margin-top: 0;
  overflow-x: hidden;
}
.cms-hero {
  position: relative;
  min-height: clamp(360px, 50vh, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  background:
    radial-gradient(1200px 400px at 50% 110%, rgba(201,163,74,.18), transparent 60%),
    #0c2340;
}
.cms-hero__bg {
  position: absolute;
  inset: -1px;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s cubic-bezier(.2,.7,.3,1);
  z-index: 0;
}
.cms-page:hover .cms-hero__bg {
  transform: scale(1);
}
.cms-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(12,35,64,.55) 0%, rgba(12,35,64,.82) 100%),
    radial-gradient(1200px 400px at 50% 110%, rgba(201,163,74,.25), transparent 60%);
}
.cms-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: .08;
  mix-blend-mode: overlay;
}
.cms-hero__content {
  position: relative;
  z-index: 3;
  max-width: 920px;
  min-width: 0;
  text-align: center;
  padding: 6.5rem 1rem 5rem;
  width: 100%;
}
.cms-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  max-width: 100%;
  padding: .35rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .75rem;
  letter-spacing: .24em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
  text-transform: uppercase;
  color: var(--cal-gold-soft, #e9d49a);
  border: 1px solid rgba(233,212,154,.35);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cms-hero__title {
  font-family: 'Fraunces', serif;
  font-size: 4.25rem;
  font-weight: 500;
  line-height: 1.02;
  margin: 1.25rem 0 1rem;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  max-width: 100%;
  white-space: normal !important;
  word-break: break-word;
  color: #fff;
}
.cms-hero__subtitle {
  font-size: 1.12rem;
  color: rgba(255,255,255,.88);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.cms-section {
  background: var(--cal-bg, #f8f5ed);
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}
.cms-section .cms-contenu {
  color: #1a2332;
}
.cms-section .cms-bloc a {
  color: #0a3a66;
}
@media (max-width: 991.98px) {
  .cms-hero {
    min-height: 420px;
  }
  .cms-hero__content {
    padding: 5.5rem 1rem 4rem;
  }
  .cms-hero__title {
    font-size: 3.2rem;
  }
}
@media (max-width: 575.98px) {
  .cms-hero {
    min-height: 360px;
  }
  .cms-hero__content {
    padding: 5rem 1rem 3.25rem;
  }
  .cms-hero__eyebrow {
    font-size: .68rem;
    letter-spacing: .14em;
  }
  .cms-hero__title {
    font-size: 2.35rem;
  }
  .cms-hero__subtitle {
    font-size: 1rem;
  }
}

/* ── Pages libres : sections structurées ─────────────────── */
.cms-section-bloc {
  max-width: 880px;
  margin: 0 auto 1.75rem;
  color: #1a2332;
}
.cms-section-bloc:last-child { margin-bottom: 0; }
.cms-section-bloc--image-pleine {
  max-width: 1080px;
}
.cms-section-bloc__titre {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: #0c2340;
}
.cms-section-bloc__texte {
  line-height: 1.7;
  font-size: 1.05rem;
  overflow-wrap: break-word;
}
.cms-section-bloc__texte a { color: #0a3a66; }
.cms-section-bloc__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}
.cms-section-bloc--texte-image-droite .cms-section-bloc__grille,
.cms-section-bloc--texte-image-gauche .cms-section-bloc__grille {
  grid-template-columns: 1.4fr 1fr;
}
.cms-section-bloc--texte-image-gauche .cms-section-bloc__media-col {
  order: -1;
}
.cms-section-bloc__media-col img {
  width: 100%;
  border-radius: .75rem;
  display: block;
  box-shadow: 0 8px 28px rgba(12, 35, 64, .14);
}
.cms-section-bloc__media-pleine {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: .9rem;
  display: block;
  margin: 0 0 1.25rem;
  box-shadow: 0 10px 34px rgba(12, 35, 64, .16);
}
@media (max-width: 767.98px) {
  .cms-section-bloc--texte-image-droite .cms-section-bloc__grille,
  .cms-section-bloc--texte-image-gauche .cms-section-bloc__grille {
    grid-template-columns: 1fr;
  }
  .cms-section-bloc--texte-image-gauche .cms-section-bloc__media-col {
    order: 0;
  }
  .cms-section-bloc__titre { font-size: 1.5rem; }
}

/* ── Pages libres : variantes de design (thèmes) ─────────── */
/* « classique » = rendu par défaut ci-dessus. */

/* Sobre : clair, minimal, hero éclairci, accents discrets. */
.cms-page--sobre { background: #ffffff; }
.cms-page--sobre .cms-hero {
  background: #eef1f5;
  color: #0c2340;
  min-height: clamp(280px, 38vh, 420px);
}
.cms-page--sobre .cms-hero__veil {
  background: linear-gradient(180deg, rgba(238,241,245,.2) 0%, rgba(238,241,245,.55) 100%);
}
.cms-page--sobre .cms-hero::after { display: none; }
.cms-page--sobre .cms-hero__title { color: #0c2340; }
.cms-page--sobre .cms-hero__subtitle { color: rgba(12,35,64,.75); }
.cms-page--sobre .cms-hero__eyebrow {
  color: #8a6d22;
  border-color: rgba(138,109,34,.35);
}
.cms-page--sobre .cms-section { background: #ffffff; }

/* Sombre : fond foncé, texte clair. */
.cms-page--sombre { background: #0c1626; }
.cms-page--sombre .cms-section { background: #0c1626; }
.cms-page--sombre .cms-section .cms-contenu,
.cms-page--sombre .cms-section-bloc,
.cms-page--sombre .cms-section-bloc__texte { color: #e6ecf5; }
.cms-page--sombre .cms-section-bloc__titre { color: #f1d99b; }
.cms-page--sombre .cms-section-bloc__texte a,
.cms-page--sombre .cms-section .cms-bloc a { color: #9ec5ff; }
.cms-page--sombre .membre-section__title { color: #f1d99b; }

/* Pages libres : modèles éditoriaux et composants enrichis */
.cms-contenu,
.cms-sections,
.cms-blocs,
.cms-bloc {
  max-width: 920px;
  margin-inline: auto;
  min-width: 0;
}
.cms-contenu {
  margin-bottom: 2.75rem;
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.cms-contenu > br,
.cms-section-bloc__texte > br,
.cms-bloc-complement__contenu > br {
  display: none;
}
.cms-sections,
.cms-blocs {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2.75rem;
}
.cms-section-bloc {
  width: 100%;
}
.cms-page .cms-section-bloc,
.cms-page .cms-bloc {
  background: transparent;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  padding: 0;
}
.cms-page .cms-section > .container,
.cms-page .cms-section-bloc__grille,
.cms-page .cms-section-bloc__corps,
.cms-page .cms-section-bloc__media-col {
  max-width: 100%;
  min-width: 0;
}
.cms-section-bloc__corps {
  min-width: 0;
}
.cms-contenu,
.cms-section-bloc__titre,
.cms-section-bloc__sous-titre,
.cms-section-bloc__texte {
  overflow-wrap: anywhere;
  white-space: normal;
}
.cms-section-bloc__sous-titre {
  color: #6b7280;
  font-size: 1.05rem;
  margin: -.55rem 0 1rem;
}
.cms-action {
  align-items: center;
  background: #0c2340;
  border: 1px solid #0c2340;
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 600;
  gap: .55rem;
  margin-top: 1rem;
  padding: .68rem 1rem;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.cms-action:hover {
  background: #9a7626;
  border-color: #9a7626;
  transform: translateY(-1px);
}
.cms-bloc {
  margin-bottom: 2.75rem;
}
.cms-bloc__titre,
.cms-bloc-complement h2 {
  color: #0c2340;
  font-family: 'Fraunces', serif;
  font-size: 1.55rem;
  margin: 0 0 1rem;
}
.cms-documents {
  display: grid;
  gap: .75rem;
}
.cms-document-card {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(12,35,64,.13);
  border-radius: .8rem;
  color: #0c2340 !important;
  display: flex;
  gap: .85rem;
  padding: .9rem 1rem;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.cms-document-card:hover {
  box-shadow: 0 10px 30px rgba(12,35,64,.1);
  transform: translateY(-2px);
}
.cms-document-card > i:first-child {
  color: #a32d2d;
  font-size: 1.5rem;
}
.cms-document-card span {
  display: grid;
  flex: 1;
  gap: .2rem;
}
.cms-document-card small {
  color: #667085;
  font-size: .86rem;
}
.cms-document-card em {
  background: #f5ead0;
  border-radius: 999px;
  color: #755818;
  font-size: .72rem;
  font-style: normal;
  padding: .25rem .55rem;
}
.cms-galerie {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cms-galerie__carte {
  background: #fff;
  border-radius: .8rem;
  box-shadow: 0 8px 24px rgba(12,35,64,.09);
  margin: 0;
  overflow: hidden;
}
.cms-galerie__carte img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
  width: 100%;
}
.cms-galerie__carte:hover img { transform: scale(1.025); }
.cms-galerie__carte figcaption {
  display: grid;
  gap: .2rem;
  padding: .75rem .85rem .85rem;
}
.cms-galerie__carte figcaption span {
  color: #667085;
  font-size: .86rem;
}
.cms-bloc-complement {
  background: #fff;
  border: 1px solid rgba(12,35,64,.12);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(12,35,64,.08);
  padding: 1.35rem 1.5rem;
}
.cms-bloc-complement__contenu {
  line-height: 1.7;
}
.cms-bloc-complement--citation {
  border-left: 5px solid #b48b2c;
}
.cms-bloc-complement--citation blockquote {
  color: #25344b;
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 0;
}
.cms-bloc-complement--information { border-left: 5px solid #2874a6; }
.cms-bloc-complement--retenir {
  background: #fff8df;
  border-color: #dfbd60;
}
.cms-chronologie {
  border-left: 2px solid #c9a34a;
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 1rem 0 0 .4rem;
  padding-left: 1.25rem;
}
.cms-chronologie li {
  display: grid;
  gap: .2rem;
  position: relative;
}
.cms-chronologie li::before {
  background: #c9a34a;
  border: 3px solid #fff;
  border-radius: 50%;
  content: "";
  height: 13px;
  left: -1.72rem;
  position: absolute;
  top: .3rem;
  width: 13px;
}
.cms-chronologie span { color: #566176; }
.cms-liens {
  display: grid;
  gap: .55rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.cms-liens a {
  align-items: center;
  border-bottom: 1px solid rgba(12,35,64,.12);
  display: flex;
  justify-content: space-between;
  padding: .55rem 0;
  text-decoration: none;
}
.cms-bloc-complement iframe {
  border: 0;
  border-radius: .75rem;
}

.cms-modele--simple .cms-hero--no-image {
  min-height: 280px;
}
.cms-modele--hero .cms-hero {
  min-height: clamp(480px, 65vh, 680px);
}
.cms-modele--documentaire .cms-documents {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cms-modele--documentaire .cms-document-card {
  align-items: flex-start;
  min-height: 110px;
}
.cms-modele--historique .cms-section-bloc {
  border-left: 2px solid rgba(180,139,44,.45);
  padding-left: 1.5rem;
  position: relative;
}
.cms-modele--historique .cms-section-bloc::before {
  background: #b48b2c;
  border: 4px solid #f8f5ed;
  border-radius: 50%;
  content: "";
  height: 16px;
  left: -9px;
  position: absolute;
  top: .25rem;
  width: 16px;
}
.cms-modele--galerie .cms-bloc--images,
.cms-modele--galerie .cms-bloc-complement--galerie {
  max-width: 1120px;
}
.cms-modele--galerie .cms-galerie {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cms-modele--cartes .cms-sections {
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1120px;
}
.cms-modele--cartes .cms-section-bloc {
  background: #fff;
  border: 1px solid rgba(12,35,64,.1);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(12,35,64,.08);
  margin: 0;
  overflow: hidden;
  padding: 1.25rem;
}
.cms-modele--alternee .cms-section-bloc:nth-child(even) .cms-section-bloc__media-col {
  order: -1;
}
.cms-modele--alternee .cms-sections {
  gap: 0;
  max-width: 1120px;
}
.cms-modele--alternee .cms-section-bloc {
  border-bottom: 1px solid rgba(12,35,64,.12);
  margin: 0;
  padding: clamp(2.25rem, 5vw, 4rem) 0;
}
.cms-modele--alternee .cms-section-bloc:first-child {
  border-top: 1px solid rgba(12,35,64,.12);
}
.cms-modele--alternee .cms-section-bloc__grille {
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
}
.cms-modele--alternee .cms-section-bloc__media-col img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cms-modele--alternee .cms-section-bloc__titre {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
}

.cms-page--sombre .cms-section-bloc__sous-titre,
.cms-page--sombre .cms-document-card small,
.cms-page--sombre .cms-galerie__carte figcaption span,
.cms-page--sombre .cms-chronologie span { color: #b9c4d5; }
.cms-page--sombre .cms-document-card,
.cms-page--sombre .cms-galerie__carte,
.cms-page--sombre .cms-bloc-complement,
.cms-page--sombre.cms-modele--cartes .cms-section-bloc {
  background: #132238;
  border-color: rgba(255,255,255,.12);
  color: #e6ecf5;
}
.cms-page--sombre .cms-bloc__titre,
.cms-page--sombre .cms-bloc-complement h2,
.cms-page--sombre .cms-document-card,
.cms-page--sombre .cms-bloc-complement--citation blockquote { color: #f1d99b !important; }
.cms-page--sombre .cms-bloc-complement--retenir { background: #2c291d; }

@media (max-width: 767.98px) {
  .cms-modele--hero .cms-hero { min-height: 420px; }
  .cms-modele--alternee .cms-section-bloc:nth-child(even) .cms-section-bloc__media-col { order: 0; }
  .cms-modele--alternee .cms-section-bloc__grille { grid-template-columns: 1fr; }
  .cms-document-card { align-items: flex-start; }
}
@media (max-width: 575.98px) {
  .cms-bloc-complement { padding: 1.1rem; }
  .cms-document-card { flex-wrap: wrap; }
  .cms-document-card em { order: 4; }
  .cms-galerie { grid-template-columns: 1fr; }
}

/* ── Pages libres : enrichissements (sommaire, blocs, retour haut) ── */
.cms-hero__meta {
  align-items: center;
  color: rgba(255,255,255,.85);
  display: inline-flex;
  font-size: .92rem;
  gap: .4rem;
  margin-top: .6rem;
}
.cms-page--sobre .cms-hero__meta { color: rgba(12,35,64,.7); }

.cms-toolbar {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 auto 2.25rem;
  max-width: 920px;
}
.cms-sommaire {
  background: #fff;
  border: 1px solid rgba(12,35,64,.12);
  border-left: 4px solid #b48b2c;
  border-radius: .8rem;
  flex: 1 1 320px;
  padding: 1rem 1.2rem;
}
.cms-sommaire__titre {
  align-items: center;
  color: #0c2340;
  display: flex;
  font-weight: 700;
  gap: .45rem;
  margin-bottom: .55rem;
}
.cms-sommaire ul {
  columns: 2;
  column-gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cms-sommaire li { break-inside: avoid; margin-bottom: .35rem; }
.cms-sommaire a {
  color: #0a3a66;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.cms-sommaire a:hover { border-bottom-color: #b48b2c; }
.cms-print-btn {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(12,35,64,.25);
  border-radius: 999px;
  color: #0c2340;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: .45rem;
  font-weight: 600;
  padding: .55rem 1rem;
  transition: background-color .2s ease, color .2s ease;
}
.cms-print-btn:hover { background: #0c2340; color: #fff; }

/* FAQ accordéon */
.cms-faq { display: grid; gap: .6rem; margin-top: 1rem; }
.cms-faq__item {
  background: #fbfaf6;
  border: 1px solid rgba(12,35,64,.12);
  border-radius: .7rem;
  padding: .35rem .9rem;
}
.cms-faq__item summary {
  color: #0c2340;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: .55rem 0;
  position: relative;
}
.cms-faq__item summary::-webkit-details-marker { display: none; }
.cms-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  color: #b48b2c;
  font-size: 1.2rem;
}
.cms-faq__item[open] summary::after { content: "−"; }
.cms-faq__reponse { color: #4d5156; line-height: 1.65; padding: 0 0 .7rem; }

/* Tableau */
.cms-tableau-wrap { margin-top: 1rem; overflow-x: auto; }
.cms-tableau { border-collapse: collapse; min-width: 100%; }
.cms-tableau th, .cms-tableau td {
  border: 1px solid rgba(12,35,64,.14);
  padding: .6rem .8rem;
  text-align: left;
}
.cms-tableau thead th { background: #0c2340; color: #fff; }
.cms-tableau tbody tr:nth-child(even) { background: rgba(12,35,64,.035); }

/* Chiffres-clés */
.cms-chiffres {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 1rem;
}
.cms-chiffres__carte {
  background: linear-gradient(160deg, #0c2340, #163a63);
  border-radius: .9rem;
  color: #fff;
  display: grid;
  gap: .25rem;
  padding: 1.2rem 1rem;
  text-align: center;
}
.cms-chiffres__carte strong {
  color: #f1d99b;
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  line-height: 1;
}
.cms-chiffres__carte span { color: rgba(255,255,255,.82); font-size: .9rem; }

/* Encart contact / appel aux dons */
.cms-bloc-complement--contact {
  background: #fff8df;
  border-color: #dfbd60;
  border-left: 5px solid #b48b2c;
}

/* Séparateur */
.cms-bloc-complement--separateur {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: center;
}
.cms-separateur {
  background: linear-gradient(90deg, transparent, #b48b2c, transparent);
  display: block;
  height: 2px;
  margin: 1rem auto;
  width: 70%;
}

/* Pages liées « À lire aussi » */
.cms-liees {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cms-liees__carte {
  background: #fff;
  border: 1px solid rgba(12,35,64,.12);
  border-radius: .85rem;
  color: #0c2340;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.cms-liees__carte:hover { box-shadow: 0 12px 32px rgba(12,35,64,.12); transform: translateY(-3px); }
.cms-liees__media {
  background-position: center;
  background-size: cover;
  display: block;
  height: 130px;
}
.cms-liees__corps { display: grid; gap: .35rem; padding: .9rem 1rem 1.1rem; }
.cms-liees__corps strong { color: #0c2340; font-size: 1.05rem; }
.cms-liees__corps small { color: #667085; line-height: 1.5; }
.cms-liees__corps em {
  align-items: center;
  color: #9a7626;
  display: inline-flex;
  font-style: normal;
  font-weight: 600;
  gap: .35rem;
  margin-top: .15rem;
}

/* Bouton retour en haut */
.cms-haut {
  align-items: center;
  background: #0c2340;
  border: 0;
  border-radius: 50%;
  bottom: 1.5rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 46px;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 1.5rem;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
  width: 46px;
  z-index: 1030;
}
.cms-haut.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cms-haut:hover { background: #9a7626; }

/* Variantes thème sombre */
.cms-page--sombre .cms-sommaire,
.cms-page--sombre .cms-faq__item,
.cms-page--sombre .cms-liees__carte { background: #132238; border-color: rgba(255,255,255,.12); }
.cms-page--sombre .cms-sommaire__titre,
.cms-page--sombre .cms-faq__item summary,
.cms-page--sombre .cms-liees__corps strong { color: #f1d99b; }
.cms-page--sombre .cms-faq__reponse,
.cms-page--sombre .cms-liees__corps small { color: #b9c4d5; }
.cms-page--sombre .cms-print-btn { border-color: rgba(255,255,255,.3); color: #e6ecf5; }
.cms-page--sombre .cms-print-btn:hover { background: #e6ecf5; color: #0c2340; }

@media (max-width: 575.98px) {
  .cms-sommaire ul { columns: 1; }
  .cms-print-btn { width: 100%; justify-content: center; }
}

/* Impression : version épurée sans navigation ni décor */
@media print {
  .site-header, .header, .navbar, .site-footer, .footer,
  .cms-hero__bg, .cms-hero__veil, .cms-print-btn, .cms-haut,
  .cms-toolbar .cms-print-btn { display: none !important; }
  .cms-hero { min-height: auto !important; padding: 0 !important; }
  .cms-hero__title { color: #000 !important; }
  .cms-page, .cms-section { background: #fff !important; }
  .cms-bloc-complement, .cms-liees__carte { box-shadow: none !important; }
  a[href]::after { content: ""; }
}

.calendrier-intro {
  background: var(--cal-bg);
  padding-top: 5rem;
  padding-bottom: 3rem;
  position: relative;
}
.calendrier-intro::before {
  content: ""; position: absolute;
  top: 2.5rem; left: 50%;
  width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, var(--cal-gold));
  opacity: .6;
}
.calendrier-intro__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cal-gold);
  font-weight: 600;
}
.calendrier-intro__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--cal-ink);
  font-weight: 500;
  margin: .75rem 0 1rem;
  letter-spacing: -.01em;
}
.calendrier-intro__lead {
  font-size: 1.05rem;
  color: var(--cal-ink-soft);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 1.5rem;
}
.calendrier-intro__stats {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .85rem; color: var(--cal-ink);
  font-weight: 500;
}
.calendrier-intro__stats i { color: var(--cal-gold); margin-right: .25rem; }
.calendrier-intro__dot {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--cal-gold);
}

/* ── Grid principal (calendrier + résultats) ─────────────── */
.calendrier-main { background: var(--cal-bg); padding-top: 1rem; padding-bottom: 5rem; }

.calendrier-card {
  background: #fff;
  border: 1px solid var(--cal-rule);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 30px 60px -40px rgba(12,35,64,.25);
  position: sticky;
  top: 100px;
}
.calendrier-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.calendrier-card__title {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.calendrier-card__year {
  font-family: 'Montserrat', sans-serif;
  font-size: .7rem; letter-spacing: .3em;
  color: var(--cal-gold); text-transform: uppercase; margin-bottom: .35rem;
}
.calendrier-card__title strong {
  font-family: 'Fraunces', serif;
  font-size: 1.55rem; font-weight: 500;
  color: var(--cal-ink);
}

/* ── Boutons mois prev/next ──────────────────────────────── */
.calendrier-nav-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--cal-rule);
  background: #fff;
  color: var(--cal-ink);
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.3,1),
              border-color .25s, background .35s, color .25s,
              box-shadow .35s;
}
.calendrier-nav-btn::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(201,163,74,.35), transparent 65%);
  opacity: 0; transition: opacity .35s ease;
}
.calendrier-nav-btn:hover::before { opacity: 1; }
.calendrier-nav-btn:hover {
  border-color: var(--cal-navy);
  background: var(--cal-navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(12,35,64,.55);
}
.calendrier-nav-btn:active { transform: translateY(0) scale(.97); }
.calendrier-nav-btn i { position: relative; z-index: 1; }

/* ── Sélecteur de date avancé (jour / mois / année) ──────── */
.calendrier-jump {
  margin: 0 0 1.25rem;
  padding: .85rem .9rem;
  background: linear-gradient(180deg, #fbf8ef, #f5f0e0);
  border: 1px solid var(--cal-rule);
  border-radius: 14px;
}
.calendrier-jump__label {
  display: flex; align-items: center; gap: .45rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--cal-ink-soft);
  margin-bottom: .6rem;
}
.calendrier-jump__label i { color: var(--cal-gold); font-size: 1rem; }
.calendrier-jump__controls {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch;
}
.calendrier-jump__select {
  flex: 1 1 auto; min-width: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem; font-weight: 500;
  color: var(--cal-ink);
  background: #fff;
  border: 1px solid var(--cal-rule);
  border-radius: 10px;
  padding: .5rem .55rem;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.calendrier-jump__select[data-jump="day"]  { flex: 0 0 66px; }
.calendrier-jump__select[data-jump="year"] { flex: 0 0 84px; }
.calendrier-jump__select:hover  { border-color: var(--cal-gold-soft); }
.calendrier-jump__select:focus {
  outline: none;
  border-color: var(--cal-gold);
  box-shadow: 0 0 0 3px rgba(201,163,74,.18);
}
.calendrier-jump__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .85rem; font-weight: 600;
  color: #fff;
  background: var(--cal-navy);
  border: 1px solid var(--cal-navy);
  border-radius: 10px;
  padding: .5rem .95rem;
  cursor: pointer;
  transition: background .25s, transform .2s, box-shadow .25s;
}
.calendrier-jump__btn i { font-size: 1.2rem; }
.calendrier-jump__btn:hover,
.calendrier-jump__btn:focus {
  background: #12315a;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(12,35,64,.65);
}
.calendrier-jump__btn:active { transform: translateY(0) scale(.98); }

/* ── Grille des jours ────────────────────────────────────── */
.calendrier-grid {
  display: flex; flex-direction: column; gap: .35rem;
}
.calendrier-grid__row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem;
}
.calendrier-grid__row--head span {
  font-family: 'Montserrat', sans-serif;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cal-ink-soft);
  text-align: center; padding: .35rem 0;
  font-weight: 600;
}

.calendrier-day {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 40px;
  font-family: 'Montserrat', sans-serif;
  font-size: .92rem; font-weight: 500;
  color: var(--cal-ink);
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid transparent;
  transition:
    background .25s cubic-bezier(.2,.7,.3,1),
    color .25s, border-color .25s, transform .2s;
}
.calendrier-day--empty { cursor: default; }
.calendrier-day:hover {
  background: rgba(201,163,74,.1);
  border-color: rgba(201,163,74,.35);
  color: var(--cal-navy);
}
.calendrier-day.has-event {
  color: var(--cal-navy);
  font-weight: 700;
}
.calendrier-day__dot {
  position: absolute; bottom: 5px; left: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cal-gold);
  transform: translateX(-50%);
}
.calendrier-day.is-today { border-color: var(--cal-navy); }
.calendrier-day.is-active {
  background: var(--cal-navy);
  color: #fff; border-color: var(--cal-navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(12,35,64,.6);
}
.calendrier-day.is-active .calendrier-day__dot { background: var(--cal-gold-soft); }

/* Mise en valeur renforcée des jours importants.
   :not(.is-active) : ne jamais écraser le fond marine du jour
   sélectionné (spécificité identique → sinon conflit visuel). */
.calendrier-day.is-today:not(.is-active) {
  font-weight: 700;
  background: rgba(12,35,64,.05);
}
.calendrier-day.has-event:not(.is-active) {
  background: rgba(201,163,74,.12);
  border-color: rgba(201,163,74,.4);
}
.calendrier-day.has-event .calendrier-day__dot {
  width: 5px; height: 5px;
  box-shadow: 0 0 0 2px rgba(201,163,74,.22);
}

/* ── Légende ─────────────────────────────────────────────── */
.calendrier-card__legend {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px dashed var(--cal-rule);
  font-family: 'Montserrat', sans-serif;
  font-size: .75rem; color: var(--cal-ink-soft);
}
.calendrier-card__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.calendrier-legend {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: transparent;
}
.calendrier-legend--today  { border: 1.5px solid var(--cal-navy); }
.calendrier-legend--event  { background: var(--cal-gold); }
.calendrier-legend--active { background: var(--cal-navy); }

/* ── Résultats / sous-titres ─────────────────────────────── */
.calendrier-results__title,
.calendrier-subtitle {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--cal-ink);
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.calendrier-results__title i,
.calendrier-subtitle i { color: var(--cal-gold); }

.calendrier-results__list,
.calendrier-list {
  display: flex; flex-direction: column; gap: 1rem;
}
.calendrier-results { transition: opacity .25s ease; }
.calendrier-results.is-loading { opacity: .55; }

/* Apparition en douceur des résultats (rendu initial + swap AJAX). */
@keyframes calFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.calendrier-results__list > *,
.calendrier-results .calendrier-empty {
  animation: calFadeUp .45s cubic-bezier(.2,.7,.3,1) both;
}
.calendrier-results__list > *:nth-child(2)     { animation-delay: .06s; }
.calendrier-results__list > *:nth-child(3)     { animation-delay: .12s; }
.calendrier-results__list > *:nth-child(n+4)   { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .calendrier-results__list > *,
  .calendrier-results .calendrier-empty { animation: none; }
}

.calendrier-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--cal-rule);
  border-radius: 16px;
  background: #fff;
  color: var(--cal-ink-soft);
}
.calendrier-empty i { font-size: 2rem; color: var(--cal-gold); display: block; margin-bottom: .75rem; }
.calendrier-empty p { font-size: 1.05rem; color: var(--cal-ink); font-weight: 500; }
.calendrier-empty small { font-size: .85rem; }

.calendrier-empty-inline {
  font-style: italic; color: var(--cal-ink-soft);
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--cal-gold-soft);
  background: #fff;
  border-radius: 0 10px 10px 0;
}

.calendrier-lists { background: #fff; padding-top: 4rem; padding-bottom: 5rem; }

/* ── Carte d'un événement (partial _card_evenement) ──────── */
.evenement-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e8e3d5;
  border-radius: 14px;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
}
.evenement-card:only-child { width: 100%; }
.evenement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -30px rgba(12,35,64,.35);
  border-color: #d8d0b8;
}
.evenement-card__media {
  grid-row: span 2;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f1ede0;
}
.evenement-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.evenement-card:hover .evenement-card__media img { transform: scale(1.04); }

.evenement-card__body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.evenement-card__meta {
  display: flex; flex-wrap: wrap; gap: .75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .75rem; color: #52606d;
  text-transform: uppercase; letter-spacing: .08em;
}
.evenement-card__meta i { margin-right: .25rem; color: #c9a34a; }
.evenement-card__chip {
  background: #f4efe0;
  color: #8b6d1f;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-weight: 600; letter-spacing: .08em;
}

.evenement-card__title {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem; font-weight: 500;
  color: #1a2332;
  margin: 0;
  line-height: 1.3;
}
.evenement-card__resume {
  font-size: .92rem; color: #52606d;
  margin: 0;
  line-height: 1.6;
}

.evenement-card__private {
  border-top: 1px dashed #e8e3d5;
  padding-top: .75rem;
  margin-top: .35rem;
}
.evenement-card__private summary {
  cursor: pointer; font-weight: 600; color: #0c2340;
  font-family: 'Montserrat', sans-serif; font-size: .9rem;
  display: inline-flex; align-items: center; gap: .5rem;
  list-style: none;
}
.evenement-card__private summary::-webkit-details-marker { display: none; }
.evenement-card__private summary i { color: #c9a34a; }
.evenement-card__private-body {
  margin-top: .5rem; font-size: .92rem; color: #1a2332; line-height: 1.7;
}

.badge-membre {
  background: #0c2340; color: #fff;
  padding: .15rem .55rem; border-radius: 999px;
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
}

.evenement-card__hint {
  font-size: .8rem; color: #8b6d1f;
  padding: .55rem .8rem;
  background: #faf6eb;
  border-radius: 8px;
  display: inline-flex; gap: .5rem; align-items: center;
}
.evenement-card__hint i { color: #c9a34a; }

/* ── Actions de la carte (inscription rapide depuis le calendrier) ── */
.evenement-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid #eee5cf;
}
.evenement-card__form { margin: 0; padding: 0; display: inline-flex; }
.evenement-card__btn {
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: .35rem .9rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.evenement-card__btn--primary {
  background: #c9a34a;
  color: #fff;
  border: 1px solid #c9a34a;
}
.evenement-card__btn--primary:hover,
.evenement-card__btn--primary:focus {
  background: #b58f3a;
  border-color: #b58f3a;
  color: #fff;
}

/* Bouton « Voir les détails » : plein bleu marine (couleur de marque),
   fortement contrasté et lisible sur la carte blanche — remplace
   l'ancien btn-outline-light quasi invisible. Légèrement plus grand
   et mieux espacé que les autres actions pour être repérable au premier
   coup d'œil. */
.evenement-card__btn--detail {
  background: #0c2340;
  color: #fff;
  border: 1px solid #0c2340;
  padding: .5rem 1.1rem;
  font-size: .9rem;
  box-shadow: 0 8px 18px -12px rgba(12,35,64,.7);
}
.evenement-card__btn--detail i {
  color: #e9d49a;
  transition: color .25s, transform .25s;
}
.evenement-card__btn--detail:hover,
.evenement-card__btn--detail:focus {
  background: #12315a;
  border-color: #12315a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(12,35,64,.75);
}
.evenement-card__btn--detail:hover i { color: #fff; transform: translateX(2px); }

/* Bouton « Annuler » : contour rouge doux, lisible au repos (là encore,
   l'ancien btn-outline-light était presque invisible sur fond blanc). */
.evenement-card__btn--annuler {
  background: #fff;
  color: #a33;
  border: 1px solid #e6b8b8;
}
.evenement-card__btn--annuler:hover,
.evenement-card__btn--annuler:focus {
  background: #fff3f3;
  color: #a33;
  border-color: #d99;
}
.evenement-card__statut {
  font-size: .85rem;
  color: #1c6b32;
  background: #e7f4ec;
  padding: .35rem .75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.evenement-card__statut i { color: #1c6b32; }

/* Bloc inscription cérémonie (select fonction dans la carte) */
.evenement-card__form--ceremonie {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: #faf6eb;
  padding: .85rem .9rem;
  border-radius: 10px;
  border: 1px solid #ede2c1;
}
.evenement-card__fonction {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.evenement-card__fonction-label {
  font-size: .85rem;
  font-weight: 600;
  color: #5a4516;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.evenement-card__fonction-label i { color: #c9a34a; }
.evenement-card__fonction select.form-select {
  font-size: .9rem;
}
.evenement-card__fonction-occupees {
  font-size: .78rem;
  color: #6b5a2c;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
}
.evenement-card__fonction-occupees i { color: #c9a34a; }

/* ── Flash de réservation au-dessus du calendrier ───────── */
.calendrier-flash { margin-bottom: 1.5rem; }
.calendrier-flash .alert {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* ── Responsive événements ───────────────────────────────── */
@media (max-width: 991.98px) {
  .calendrier-card { position: static; }
  .calendrier-hero { min-height: 42vh; }
  .calendrier-hero__content { padding: 4.5rem 1rem 3.5rem; }
}
@media (max-width: 575.98px) {
  .calendrier-day { height: 38px; font-size: .85rem; }
  .calendrier-card { padding: 1.25rem; }
  .calendrier-card__title strong { font-size: 1.3rem; }

  /* Sélecteur de date : jour/mois/année sur une ligne, bouton dessous
     en pleine largeur pour une cible tactile confortable. */
  .calendrier-jump__controls { gap: .45rem; }
  .calendrier-jump__select[data-jump="month"] { flex: 1 1 auto; }
  .calendrier-jump__btn { flex: 1 1 100%; justify-content: center; padding: .6rem; }

  .evenement-card { grid-template-columns: 1fr; }
  .evenement-card__media { aspect-ratio: 16 / 9; grid-row: auto; }
}

/* =========================================================
   ESPACE MEMBRE (accueil)
   ========================================================= */
.membre-page {
  --m-navy:      #0c2340;
  --m-navy-2:    #14304f;
  --m-gold:      #c9a34a;
  --m-cream:     #fbfaf6;
  --m-ink:       #1a2332;
  --m-ink-soft:  #52606d;
  --m-rule:      #e8e3d5;
  --m-success:   #1f7a4d;

  font-family: 'Montserrat', sans-serif;
  color: var(--m-ink);
  background: var(--m-cream);
  padding-top: 88px; /* compense le header fixed-top */
}
/* Variante immersive : le hero cover gère lui-même son offset via son
   propre padding-top (130px), inutile de doubler avec un padding parent
   — c'est ce qui crée la bande blanche entre le header et l'image.
   On force aussi le main à finir en navy pour qu'il n'y ait jamais de
   gap clair visible entre la dernière section et le footer dark. */
.membre-page--immersive {
  padding-top: 0;
  background: linear-gradient(180deg,
    var(--m-cream) 0%,
    var(--m-cream) 78%,
    rgba(12, 35, 64, 0.4) 92%,
    var(--m-navy) 100%);
}
/* Sécurité : force aussi le body en navy quand on est sur la page
   immersive. Ainsi, même si une marge accidentelle s'intercale entre
   <main> et <footer>, c'est du navy qui transparaît, plus du blanc. */
body:has(.membre-page--immersive) {
  background-color: var(--m-navy, #0c2340);
}

/* ───────────────────────────────────────────────────────────────────
   Sécurité globale — body en navy sur TOUTES les pages du site.
   Le :root déclare --background-color:#fff, ce que body consomme par
   défaut. Conséquence : la moindre micro-faille entre </main> et
   <footer> (gap flex, marge collapsée, fin de section transparente)
   laisse passer du blanc juste avant le footer dark.
   On force donc le body en navy partout, sauf sur la page de connexion
   (auth-page) qui est full-screen crème et masque header+footer.
   :has() / :not() sont supportés nativement depuis fin 2023. */
body:not(:has(main.auth-page)):not(.auth-mode) {
  background-color: var(--m-navy, #0c2340);
}

/* ════════════ Hero ════════════ */

/* Fond image discret (opt-in) pour .membre-hero et .membre-hero--compact :
   ajouter <div class="membre-hero__bg" style="background-image:url(...)"></div>
   et <div class="membre-hero__veil"></div> juste avant .container.
   Ne touche PAS la variante immersive --cover (qui a son propre traitement). */
.membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) {
  overflow: hidden;
  isolation: isolate;
}
.membre-hero:not(.membre-hero--cover) > .membre-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}
.membre-hero:not(.membre-hero--cover) > .membre-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247, 240, 226, 0.55) 0%, rgba(247, 240, 226, 0.92) 100%);
  z-index: 1;
  pointer-events: none;
}
.membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) > .container {
  position: relative;
  z-index: 2;
}

.membre-hero {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(900px 380px at 80% -10%, rgba(201,163,74,.18), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--m-cream) 100%);
  border-bottom: 1px solid var(--m-rule);
}
.membre-flash {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .55rem 1rem;
  margin-bottom: 1.5rem;
  background: rgba(31,122,77,.08);
  color: var(--m-success);
  border: 1px solid rgba(31,122,77,.2);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  animation: m-fade .5s cubic-bezier(.2,.7,.3,1) both;
}
.membre-flash i { font-size: 1.05rem; }

.membre-hero__eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--m-gold);
  font-weight: 600;
  margin-bottom: 1rem;
}
.membre-hero__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 1.25rem;
  color: var(--m-ink);
}
.membre-hero__name {
  color: var(--m-navy);
  font-style: italic;
}
.membre-hero__sep { color: var(--m-gold); font-style: normal; }

.membre-hero__lead {
  max-width: 680px;
  margin: 0 0 2rem;
  color: var(--m-ink-soft);
  line-height: 1.65;
  font-size: 1.02rem;
}

.membre-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.membre-meta-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .85rem 1.15rem;
  background: #fff;
  border: 1px solid var(--m-rule);
  border-radius: 12px;
  min-width: 200px;
  box-shadow: 0 1px 2px rgba(12,35,64,.04);
}
.membre-meta-card__label {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--m-ink-soft);
  font-weight: 600;
}
.membre-meta-card__value {
  font-weight: 600;
  color: var(--m-ink);
  font-size: .95rem;
  display: inline-flex; align-items: center; gap: .45rem;
}
.membre-meta-card__value i { color: var(--m-gold); }

.membre-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.btn-membre {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .3s cubic-bezier(.2,.7,.3,1),
              box-shadow .3s, background .25s, color .25s;
}
.btn-membre--primary {
  background: var(--m-navy);
  color: #fff;
}
.btn-membre--primary:hover {
  background: var(--m-navy-2);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(12,35,64,.6);
}
.btn-membre--ghost {
  background: transparent;
  color: var(--m-navy);
  border-color: var(--m-rule);
}
.btn-membre--ghost:hover {
  background: #fff;
  color: var(--m-navy);
  border-color: var(--m-navy);
  transform: translateY(-2px);
}

/* ════════════ Hero variant — cover image immersif ════════════
   .membre-hero--cover transforme le hero accueil-membre en bandeau
   photographique pleine largeur, dans l'esprit de l'accueil visiteur
   (hero-cover) mais avec sa propre identité (palette navy/gold, méta-
   cartes glassmorphism). Les règles ci-dessous SURCHARGENT la version
   « light » (.membre-hero seul) qui reste utilisable ailleurs. */

.membre-hero--cover {
  background: var(--m-navy);
  border-bottom: 0;
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: 130px 0 80px;
  overflow: hidden;
}
.membre-hero--cover .membre-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 14s cubic-bezier(.2,.7,.3,1);
  z-index: 0;
}
.membre-page:hover .membre-hero__bg,
.membre-page.aos-init .membre-hero__bg {
  transform: scale(1);
}
.membre-hero--cover .membre-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,35,64,.45) 0%, rgba(12,35,64,.82) 100%),
    radial-gradient(1200px 400px at 50% 110%, rgba(201,163,74,.28), transparent 60%);
  z-index: 1;
}
.membre-hero--cover .membre-hero__halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(201,163,74,.16) 0%, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(201,163,74,.12) 0%, transparent 40%);
  z-index: 1;
  pointer-events: none;
}
.membre-hero--cover .membre-hero__inner {
  position: relative;
  z-index: 2;
}

/* Eyebrow en pill or sur fond sombre */
.membre-hero--cover .membre-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.4rem;
  padding: .5rem 1.1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--m-gold);
  background: rgba(201,163,74,.14);
  border: 1px solid rgba(201,163,74,.45);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Titre blanc + nom or italique */
.membre-hero--cover .membre-hero__title {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
  margin-bottom: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.membre-hero--cover .membre-hero__name {
  color: var(--m-gold);
  font-style: italic;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
}

/* Lead en blanc atténué */
.membre-hero--cover .membre-hero__lead {
  color: rgba(255,255,255,.92);
  max-width: 720px;
  margin-bottom: 2.2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Méta-cartes en glassmorphism */
.membre-hero--cover .membre-hero__meta {
  margin-bottom: 2rem;
  gap: .9rem;
}
.membre-hero--cover .membre-meta-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: .85rem;
  align-items: center;
  padding: .9rem 1.1rem;
  min-width: 240px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(201,163,74,.35);
  border-radius: 14px;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .25s, background .25s, border-color .25s;
}
.membre-hero--cover .membre-meta-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.13);
  border-color: var(--m-gold);
}
.membre-hero--cover .membre-meta-card > div {
  display: flex; flex-direction: column;
}
.membre-meta-card__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  font-size: 1.15rem;
  color: var(--m-gold);
  background: rgba(201,163,74,.18);
  border: 1px solid rgba(201,163,74,.45);
  border-radius: 11px;
}
.membre-hero--cover .membre-meta-card__label {
  color: rgba(255,255,255,.72);
}
.membre-hero--cover .membre-meta-card__value {
  color: #fff;
  word-break: break-word;
}

/* Boutons hero adaptés au fond sombre */
.membre-hero--cover .btn-membre--primary {
  background: var(--m-gold);
  color: var(--m-navy);
  border-color: var(--m-gold);
}
.membre-hero--cover .btn-membre--primary:hover {
  background: #fff;
  color: var(--m-navy);
  border-color: #fff;
}
.membre-hero--cover .btn-membre--ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.membre-hero--cover .btn-membre--ghost:hover {
  background: #fff;
  color: var(--m-navy);
  border-color: #fff;
}
.btn-membre--logout {
  margin-left: auto;
}

/* Flash de succès en haut du hero, version cover */
.membre-hero--cover .membre-flash {
  background: rgba(31,122,77,.2);
  border-color: rgba(108,235,169,.4);
  color: #c9efd7;
  backdrop-filter: blur(6px);
}

/* Responsive : empilement vertical en dessous de 768 px */
@media (max-width: 768px) {
  .membre-hero--cover {
    min-height: auto;
    padding: 100px 0 50px;
  }
  .membre-hero--cover .membre-meta-card {
    min-width: 100%;
  }
  .btn-membre--logout { margin-left: 0; }
}

/* ════════════ Sections génériques ════════════ */
.membre-section {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

/* Sections avec image de fond — accueil membre.
   Pattern : <section class="membre-section--bg --bg-X">
              <div .__bg></div><div .__veil></div>
              <div .container>…</div>
            </section>
   __bg porte l'image, __veil un voile crème qui garantit la lisibilité
   du texte navy/foncé. Le container reste au-dessus (z-index: 2). */
.membre-section--bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.membre-section--bg > .container { position: relative; z-index: 2; }

.membre-section__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 16s cubic-bezier(.2,.7,.3,1);
  z-index: 0;
}
.membre-page:hover .membre-section__bg { transform: scale(1); }

/* Voile crème : permet aux titres navy de rester lisibles sur photo */
.membre-section__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(251, 250, 246, 0.92) 0%,
      rgba(251, 250, 246, 0.86) 40%,
      rgba(251, 250, 246, 0.92) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Image par section (chemins relatifs au fichier CSS pour rester valables en local comme sur OVH). */
.membre-section--bg-rubriques .membre-section__bg {
  background-image: url('../../contenus/images/fonds/farVague.jpg');
}
.membre-section--bg-outils .membre-section__bg {
  background-image: url('../../contenus/images/fonds/drapeauFr.jpg');
}
.membre-section--bg-events .membre-section__bg {
  background-image: url('../../contenus/images/fonds/far.jpg');
}

/* Accent visuel : un liseré or fin en haut de chaque section bg */
.membre-section--bg::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 80px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--m-gold), transparent);
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 2px;
}

/* Dernière section avant le footer : on supprime le padding-bottom et
   on fait fondre le voile dans le navy du footer. Plus de bande crème
   visible entre la dernière card et le footer dark. */
.membre-page .membre-section--bg:last-of-type {
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0;
}
.membre-page .membre-section--bg:last-of-type .membre-section__veil {
  background: linear-gradient(180deg,
    rgba(251, 250, 246, 0.92) 0%,
    rgba(251, 250, 246, 0.88) 35%,
    rgba(251, 250, 246, 0.78) 70%,
    rgba(12, 35, 64, 0.85) 100%);
}
.membre-section--soft {
  background: #fff;
  border-top: 1px solid var(--m-rule);
}
.membre-section__head {
  max-width: 720px;
  margin-bottom: 2.5rem;
}
.membre-section__eyebrow {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--m-gold);
  font-weight: 600;
  margin-bottom: .8rem;
}
.membre-section__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0 0 .75rem;
  color: var(--m-ink);
  letter-spacing: -.01em;
}
.membre-section__lead {
  color: var(--m-ink-soft);
  margin: 0;
  line-height: 1.6;
}

/* ════════════ Cards (raccourcis) ════════════ */
/* Carte My Maps réservée aux adhérents */
.membre-map-note {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  color: var(--m-navy);
  background: rgba(201, 163, 74, .1);
  border: 1px solid rgba(201, 163, 74, .35);
  border-radius: 14px;
}
.membre-map-note i {
  flex: 0 0 auto;
  margin-top: .15rem;
  color: var(--m-gold);
  font-size: 1.15rem;
}
.membre-map-note p {
  margin: 0;
  line-height: 1.6;
}
.membre-map-shell {
  overflow: hidden;
  padding: .55rem;
  background: #fff;
  border: 1px solid var(--m-rule);
  border-radius: 18px;
  box-shadow: 0 20px 45px -32px rgba(12, 35, 64, .55);
}
.membre-map-shell iframe {
  display: block;
  width: 100%;
  height: clamp(480px, 70vh, 760px);
  border: 0;
  border-radius: 12px;
}
.membre-map-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}
@media (max-width: 576px) {
  .membre-map-shell {
    padding: .3rem;
    border-radius: 12px;
  }
  .membre-map-shell iframe {
    height: 65vh;
    min-height: 420px;
    border-radius: 9px;
  }
  .membre-map-actions .btn-membre {
    width: 100%;
    justify-content: center;
  }
}

.membre-card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100%;
  padding: 1.5rem 1.4rem 1.3rem;
  background: #fff;
  border: 1px solid var(--m-rule);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .35s cubic-bezier(.2,.7,.3,1),
              box-shadow .35s, border-color .25s;
  position: relative;
  overflow: hidden;
}
.membre-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--m-gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.membre-card:hover {
  transform: translateY(-4px);
  border-color: rgba(12,35,64,.18);
  box-shadow: 0 24px 40px -28px rgba(12,35,64,.4);
  color: inherit;
}
.membre-card:hover::before { transform: scaleX(1); }

.membre-card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(12,35,64,.06);
  color: var(--m-navy);
  font-size: 1.25rem;
  transition: background .25s, color .25s;
}
.membre-card:hover .membre-card__icon {
  background: var(--m-navy);
  color: var(--m-gold);
}
.membre-card h3 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--m-ink);
  letter-spacing: -.005em;
}
.membre-card p {
  margin: 0;
  color: var(--m-ink-soft);
  line-height: 1.55;
  font-size: .92rem;
  flex: 1;
}
.membre-card__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .25rem;
  color: var(--m-navy);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: gap .3s cubic-bezier(.2,.7,.3,1);
}
.membre-card:hover .membre-card__cta { gap: .65rem; }

/* Variante « feature » : cartes premières lignes (3 sous-rubriques) */
.membre-card--feature {
  padding: 2rem 1.6rem 1.6rem;
  background: linear-gradient(180deg, #fff 0%, var(--m-cream) 100%);
}
.membre-card--feature::before {
  height: 4px;
  background: linear-gradient(90deg, var(--m-gold), var(--m-navy), var(--m-gold));
}
.membre-card--feature h3 {
  font-size: 1.4rem;
  font-weight: 600;
}
.membre-card--feature .membre-card__icon {
  width: 58px; height: 58px;
  font-size: 1.6rem;
  border-radius: 14px;
}
.membre-card__chip {
  display: inline-block;
  padding: .25rem .7rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m-navy);
  background: rgba(201,163,74,.15);
  border: 1px solid rgba(201,163,74,.4);
  border-radius: 999px;
  width: fit-content;
  margin: -.2rem 0 .2rem;
}

/* Couleur d'accent par sous-rubrique */
.membre-card--vie::before {
  background: linear-gradient(90deg, transparent, #2a5db0, transparent);
}
.membre-card--vie:hover .membre-card__icon {
  background: #2a5db0;
  color: #fff;
}
.membre-card--memoire::before {
  background: linear-gradient(90deg, transparent, var(--m-gold), transparent);
}
.membre-card--memoire:hover .membre-card__icon {
  background: linear-gradient(135deg, var(--m-navy), #122c47);
  color: var(--m-gold);
}
.membre-card--patrimoine::before {
  background: linear-gradient(90deg, transparent, #0f7a5a, transparent);
}
.membre-card--patrimoine:hover .membre-card__icon {
  background: #0f7a5a;
  color: #fff;
}

/* ════════════ Events ════════════ */
.membre-event {
  display: flex;
  gap: 1.1rem;
  padding: 1.25rem;
  background: var(--m-cream);
  border: 1px solid var(--m-rule);
  border-radius: 16px;
  height: 100%;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.membre-event:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -22px rgba(12,35,64,.35);
}
.membre-event__date {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  padding: .55rem 0;
  background: var(--m-navy);
  color: #fff;
  border-radius: 12px;
  align-self: flex-start;
}
.membre-event__day {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 600;
}
.membre-event__month {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-gold);
  margin-top: .2rem;
}
.membre-event__body { display: flex; flex-direction: column; gap: .35rem; }
.membre-event__title {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--m-ink);
}
.membre-event__meta {
  margin: 0;
  color: var(--m-ink-soft);
  font-size: .85rem;
}
.membre-event__meta i { color: var(--m-gold); }
.membre-event__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: .82rem;
  font-weight: 600;
  color: var(--m-navy);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: gap .25s;
}
.membre-event__link:hover { gap: .55rem; color: var(--m-navy-2); }

.btn-membre--danger {
  background: #fff;
  color: #9f2d2d;
  border-color: rgba(159,45,45,.28);
}
.btn-membre--danger:hover {
  background: #9f2d2d;
  color: #fff;
  border-color: #9f2d2d;
  transform: translateY(-2px);
}

.membre-hero--compact {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.membre-flash--error {
  background: rgba(159,45,45,.08);
  color: #9f2d2d;
  border-color: rgba(159,45,45,.22);
}

.reservations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.reservation-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 220px;
  background: #fff;
  border: 1px solid var(--m-rule);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 38px -32px rgba(12,35,64,.45);
}
.reservation-card__media {
  display: block;
  min-height: 100%;
  background: #f3eedf;
}
.reservation-card__media img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}
.reservation-card__body {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.2rem;
  min-width: 0;
}
.reservation-card__topline,
.reservation-card__meta,
.reservation-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}
.reservation-card__type,
.reservation-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reservation-card__type {
  color: var(--m-navy);
  background: rgba(12,35,64,.06);
}
.reservation-card__status {
  color: var(--m-success);
  background: rgba(31,122,77,.1);
  border: 1px solid rgba(31,122,77,.2);
}
.reservation-card__status--confirme {
  color: #0c5f91;
  background: rgba(12,95,145,.1);
  border-color: rgba(12,95,145,.2);
}
.reservation-card__title {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: 0;
}
.reservation-card__title a {
  color: var(--m-ink);
  text-decoration: none;
}
.reservation-card__title a:hover { color: var(--m-navy); }
.reservation-card__meta {
  margin: 0;
  color: var(--m-ink-soft);
  font-size: .88rem;
  line-height: 1.4;
}
.reservation-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.reservation-card__meta i { color: var(--m-gold); }
.reservation-card__actions {
  margin-top: auto;
}
.reservation-card__actions form { margin: 0; }
.reservation-card__actions .btn-membre {
  padding: .65rem 1rem;
  font-size: .84rem;
}

.reservation-empty {
  max-width: 720px;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--m-rule);
  border-radius: 16px;
}
.reservation-empty__icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(12,35,64,.06);
  color: var(--m-navy);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.reservation-empty h2 {
  margin: 0 0 .5rem;
  font-family: 'Fraunces', serif;
  font-size: 1.55rem;
}
.reservation-empty p {
  max-width: 560px;
  color: var(--m-ink-soft);
  line-height: 1.6;
  margin: 0 0 1.2rem;
}

@media (max-width: 767.98px) {
  .reservation-card {
    grid-template-columns: 1fr;
  }
  .reservation-card__media,
  .reservation-card__media img {
    min-height: 180px;
  }
  .reservation-card__actions,
  .reservation-card__actions form,
  .reservation-card__actions .btn-membre {
    width: 100%;
  }
}

/* ── Sous-pages de l'espace membre (rubrique générique + profil) ── */
/* ─────────────────────────────────────────────────────────────────
   MESSAGERIE INTERNE — UI 2-colonnes inspirée Messenger / Instagram
   ───────────────────────────────────────────────────────────────── */
.messagerie-section {
  background:
    radial-gradient(760px 320px at 88% 0%, rgba(201, 163, 74, 0.12), transparent 60%),
    var(--m-cream);
}

.messagerie-app {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  height: clamp(520px, 72vh, 760px);
  border: 1px solid var(--m-rule);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 60px -44px rgba(12, 35, 64, 0.62);
  overflow: hidden;
}

/* ───── Sidebar ───── */
.messagerie-app__sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--m-rule);
  background: linear-gradient(180deg, #fff, rgba(251, 250, 246, 0.85));
}

.messagerie-app__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--m-rule);
}

.messagerie-app__sidebar-eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-gold);
  font-weight: 800;
}

.messagerie-app__sidebar-title {
  margin: 0.15rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Fraunces", serif;
  font-size: 1.3rem;
  color: var(--m-ink);
}

.messagerie-app__nonlu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  color: #fff;
  background: #c0392b;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
}

.messagerie-app__new-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  color: #fff;
  background: var(--m-navy);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.messagerie-app__new-btn:hover {
  background: var(--m-gold);
  color: var(--m-navy);
  transform: translateY(-1px);
}

.messagerie-app__conv-list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
}

.messagerie-conv + .messagerie-conv {
  border-top: 1px solid rgba(12, 35, 64, 0.06);
}

.messagerie-conv__link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1.15rem;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease;
}

.messagerie-conv__link:hover {
  background: rgba(12, 35, 64, 0.04);
}

.messagerie-conv.is-active .messagerie-conv__link {
  background: rgba(201, 163, 74, 0.12);
}

.messagerie-conv__avatar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: var(--m-navy);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
}

.messagerie-conv.is-unread .messagerie-conv__avatar {
  background: var(--m-gold);
  color: var(--m-navy);
}

.messagerie-conv__body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.messagerie-conv__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}

.messagerie-conv__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  color: var(--m-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messagerie-conv.is-unread .messagerie-conv__name {
  color: var(--m-navy);
}

.messagerie-conv__time {
  flex: 0 0 auto;
  color: var(--m-ink-soft);
  font-size: 0.74rem;
}

.messagerie-conv__preview {
  display: block;
  color: var(--m-ink-soft);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messagerie-conv__preview em {
  color: var(--m-navy);
  font-style: normal;
  font-weight: 700;
}

.messagerie-conv.is-unread .messagerie-conv__preview {
  color: var(--m-ink);
  font-weight: 600;
}

.messagerie-conv__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  color: #fff;
  background: #c0392b;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
}

.messagerie-app__conv-empty {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--m-ink-soft);
}

.messagerie-app__conv-empty i {
  font-size: 2rem;
  color: var(--m-gold);
}

.messagerie-app__conv-empty p {
  margin: 0;
  line-height: 1.5;
}

/* ───── Thread (fil de discussion) ───── */
.messagerie-app__thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* C'est un <section> : on annule le padding global (section { padding:60px 0 })
     qui décalait l'en-tête (nom de l'interlocuteur) vers le bas. */
  padding: 0;
  background: var(--m-cream);
}

.messagerie-app__thread-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--m-rule);
  background: #fff;
}

/* Bouton « Quitter la conversation » poussé à droite de l'en-tête. */
.messagerie-app__thread-quit {
  margin-left: auto;
}

.messagerie-app__quit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid #e0b4b4;
  border-radius: 8px;
  background: #fff;
  color: #b03a3a;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.messagerie-app__quit-btn:hover {
  background: #b03a3a;
  color: #fff;
}

.messagerie-app__back {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--m-rule);
  border-radius: 999px;
  color: var(--m-navy);
  background: #fff;
  cursor: pointer;
}

.messagerie-app__thread-avatar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: var(--m-navy);
  font-weight: 800;
}

.messagerie-app__thread-id {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.messagerie-app__thread-id strong {
  color: var(--m-ink);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
}

.messagerie-app__thread-id small {
  color: var(--m-ink-soft);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messagerie-app__thread-stream {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.25rem 1.35rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.messagerie-app__day-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
}

.messagerie-app__day-sep span {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  color: var(--m-ink-soft);
  background: rgba(12, 35, 64, 0.06);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.messagerie-bulle {
  max-width: min(76%, 520px);
  padding: 0.65rem 0.95rem;
  border-radius: 18px;
  box-shadow: 0 12px 26px -22px rgba(12, 35, 64, 0.45);
  word-wrap: break-word;
  word-break: break-word;
}

.messagerie-bulle--autre {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  color: var(--m-ink);
  background: #fff;
  border: 1px solid var(--m-rule);
}

.messagerie-bulle--moi {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--m-navy), #143a64);
}

.messagerie-bulle__contenu {
  font-size: 0.94rem;
  line-height: 1.5;
}

.messagerie-bulle__time {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.messagerie-bulle--moi .messagerie-bulle__time {
  color: rgba(255, 255, 255, 0.78);
}

.messagerie-bulle--autre .messagerie-bulle__time {
  color: var(--m-ink-soft);
}

.messagerie-app__stream-empty {
  margin: auto;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
  color: var(--m-ink-soft);
}

.messagerie-app__stream-empty i {
  font-size: 2.2rem;
  color: var(--m-gold);
}

.messagerie-app__compose {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--m-rule);
  background: #fff;
}

.messagerie-app__compose textarea {
  flex: 1;
  min-height: 44px;
  max-height: 160px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--m-rule);
  border-radius: 18px;
  color: var(--m-ink);
  background: var(--m-cream);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  resize: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.messagerie-app__compose textarea:focus {
  outline: none;
  border-color: var(--m-gold);
  box-shadow: 0 0 0 3px rgba(201, 163, 74, 0.18);
}

.messagerie-app__send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  color: #fff;
  background: var(--m-navy);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.messagerie-app__send:hover:not(:disabled) {
  background: var(--m-gold);
  color: var(--m-navy);
  transform: translateY(-1px);
}

.messagerie-app__send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.messagerie-app__compose.is-sending textarea {
  opacity: 0.6;
}

.messagerie-app__thread-empty {
  margin: auto;
  max-width: 360px;
  padding: 2rem 1.5rem;
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  text-align: center;
  color: var(--m-ink-soft);
}

.messagerie-app__thread-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--m-navy);
  background: rgba(12, 35, 64, 0.06);
  font-size: 1.6rem;
}

.messagerie-app__thread-empty h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.35rem;
  color: var(--m-ink);
}

.messagerie-app__thread-empty p {
  margin: 0;
  line-height: 1.6;
}

/* ───── Modale Nouvelle conversation ───── */
.messagerie-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.messagerie-modal.is-open {
  display: flex;
}

.messagerie-modal__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(12, 35, 64, 0.55);
  cursor: pointer;
}

.messagerie-modal__panel {
  position: relative;
  width: min(440px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 60px -24px rgba(12, 35, 64, 0.5);
  overflow: hidden;
}

.messagerie-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--m-rule);
}

.messagerie-modal__head h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.2rem;
  color: var(--m-ink);
}

.messagerie-modal__close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--m-rule);
  border-radius: 999px;
  color: var(--m-navy);
  background: #fff;
  cursor: pointer;
}

.messagerie-modal__field {
  display: grid;
  gap: 0.5rem;
  padding: 1.2rem 1.35rem 0;
}

.messagerie-modal__field span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-gold);
  font-weight: 800;
}

.messagerie-modal__field select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--m-rule);
  border-radius: 12px;
  background: #fff;
  font: inherit;
}

.messagerie-modal__field select:focus {
  outline: none;
  border-color: var(--m-gold);
  box-shadow: 0 0 0 3px rgba(201, 163, 74, 0.18);
}

.messagerie-modal__notice {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 1.2rem 1.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(12, 35, 64, 0.12);
  border-radius: 12px;
  color: var(--m-ink-soft);
  background: rgba(12, 35, 64, 0.04);
}

.messagerie-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.2rem 1.35rem;
}

/* ───── Responsive ───── */
@media (max-width: 767.98px) {
  .messagerie-app {
    grid-template-columns: 1fr;
    height: clamp(560px, 80vh, 800px);
  }

  .messagerie-app__sidebar,
  .messagerie-app__thread {
    grid-column: 1;
    grid-row: 1;
  }

  .messagerie-app__thread {
    display: none;
  }

  .messagerie-app.thread-open .messagerie-app__sidebar {
    display: none;
  }

  .messagerie-app.thread-open .messagerie-app__thread {
    display: flex;
  }

  .messagerie-app__back {
    display: inline-flex;
  }

  .messagerie-modal__actions {
    flex-direction: column-reverse;
  }

  .messagerie-modal__actions .btn-membre {
    width: 100%;
    justify-content: center;
  }
}

.membre-rubrique .membre-hero { padding-top: 6.5rem; padding-bottom: 2.5rem; }

.membre-breadcrumb {
  display: inline-flex;
  margin-bottom: 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.membre-breadcrumb a {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--m-gold);
  text-decoration: none;
  transition: gap .25s, color .25s;
}
.membre-breadcrumb a:hover { gap: .55rem; color: #fff; }

/* Carte d'information (variante non cliquable de membre-card) */
.membre-card--info {
  cursor: default;
  display: flex; flex-direction: column;
}
.membre-card--info:hover { transform: none; box-shadow: none; }
.membre-card--info:hover::before { transform: none; }
.membre-card--info:hover .membre-card__icon { transform: none; }

.membre-card__badge {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .7rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--m-gold);
  background: rgba(201,163,74,.10);
  border: 1px solid rgba(201,163,74,.35);
  border-radius: 999px;
}
.membre-card__badge i { font-size: .85rem; }

.membre-rubrique__retour {
  margin-top: 2.5rem;
  text-align: center;
}

/* ── Mon profil — blocs d'information ── */
.membre-profil-bloc {
  height: 100%;
  padding: 1.6rem 1.4rem;
  background: #fff;
  border: 1px solid var(--m-rule, #e8e3d5);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(12,35,64,.06);
}
.membre-profil-bloc h3 {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1rem;
  font-family: 'Fraunces', serif;
  font-size: 1.2rem; font-weight: 500;
  color: var(--m-navy);
}
.membre-profil-bloc h3 i { color: var(--m-gold); }

.membre-profil-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .55rem 1.1rem;
  margin: 0;
}
.membre-profil-list dt {
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--m-ink-soft, #52606d);
  font-weight: 600;
}
.membre-profil-list dd {
  margin: 0;
  font-size: .98rem;
  color: var(--m-ink, #1a2332);
  word-break: break-word;
}

@keyframes m-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
  .membre-hero__title br { display: none; }
  .membre-meta-card { min-width: 100%; }
  .btn-membre { width: 100%; justify-content: center; }
  .membre-profil-list { grid-template-columns: 1fr; gap: .25rem .5rem; }
  .membre-profil-list dt { margin-top: .6rem; }
}

/* =========================================================
   ADHÉSION
   ========================================================= */
.adhesion-form-page {
  --adh-navy:      #0c2340;
  --adh-navy-2:    #14304f;
  --adh-gold:      #c9a34a;
  --adh-gold-soft: #e9d49a;
  --adh-cream:     #fbfaf6;
  --adh-ink:       #1a2332;
  --adh-ink-soft:  #52606d;
  --adh-rule:      #e8e3d5;
  --adh-error:     #b3261e;
  --adh-success:   #1f7a4d;
}

/* ── Hero compact ── */
.adh-form-hero {
  position: relative;
  min-height: 36vh;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  overflow: hidden;
}
.adh-form-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.adh-form-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,35,64,.55) 0%, rgba(12,35,64,.85) 100%),
    radial-gradient(700px 320px at 50% 110%, rgba(201,163,74,.25), transparent 60%);
}
.adh-form-hero__content {
  position: relative; z-index: 1;
  text-align: center;
  padding: 4rem 1rem 3rem;
}
.adh-form-hero__eyebrow {
  display: inline-block;
  padding: .35rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .73rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--adh-gold-soft);
  border: 1px solid rgba(233,212,154,.35);
  border-radius: 999px;
}
.adh-form-hero__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 500;
  margin: 1rem 0 .85rem;
  color: #fff;
  line-height: 1.1;
}
.adh-form-hero__subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,.85);
  max-width: 580px;
  margin: 0 auto;
}

/* ── Section formulaire ── */
.adh-form-section {
  background: var(--adh-cream);
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}
.adh-form-back {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .85rem;
  color: var(--adh-ink-soft);
  text-decoration: none;
  transition: gap .25s, color .2s;
}
.adh-form-back:hover { color: var(--adh-navy); gap: .65rem; }

/* ── Alertes ── */
.adh-form-alert {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: .95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.adh-form-alert--error {
  background: rgba(179,38,30,.08);
  color: var(--adh-error);
  border: 1px solid rgba(179,38,30,.2);
}
.adh-form-alert--success {
  background: rgba(31,122,77,.08);
  color: var(--adh-success);
  border: 1px solid rgba(31,122,77,.2);
}
.adh-form-alert i { font-size: 1.3rem; flex-shrink: 0; }

/* ── Form base ── */
.adh-form {
  font-family: 'Montserrat', sans-serif;
  color: var(--adh-ink);
}

.adh-form__group {
  background: #fff;
  border: 1px solid var(--adh-rule);
  border-radius: 16px;
  padding: 2rem 2rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 24px 48px -40px rgba(12,35,64,.25);
}
.adh-form__group legend {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1.5rem;
  padding: 0;
  width: 100%;
}
.adh-form__legend-num {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--adh-navy);
  color: var(--adh-gold-soft);
  border-radius: 999px;
  font-family: 'Fraunces', serif;
  font-size: .9rem;
  font-weight: 600;
}
.adh-form__legend-text {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem; font-weight: 500;
  color: var(--adh-ink);
}

.adh-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.adh-form__row--3 { grid-template-columns: 1fr 2fr 1fr; }

.adh-form__field {
  display: flex; flex-direction: column;
  gap: .45rem;
  margin-bottom: 1.1rem;
}
.adh-form__field label {
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--adh-ink);
  font-weight: 600;
}
.adh-form__req { color: var(--adh-gold); margin-left: .15rem; }

.adh-form__field input[type="text"],
.adh-form__field input[type="email"],
.adh-form__field input[type="tel"],
.adh-form__field input[type="date"] {
  width: 100%;
  border: 1px solid var(--adh-rule);
  background: #fff;
  border-radius: 10px;
  padding: .85rem 1rem;
  font-family: inherit;
  font-size: .98rem;
  color: var(--adh-ink);
  transition: border-color .25s, box-shadow .25s;
  outline: none;
}
.adh-form__field input:hover { border-color: #cfc8b3; }
.adh-form__field input:focus {
  border-color: var(--adh-navy);
  box-shadow: 0 0 0 3px rgba(12,35,64,.08);
}

.adh-form__error {
  font-size: .8rem;
  color: var(--adh-error);
  margin-top: .15rem;
}

/* ── Radio Civilité ── */
.adh-form__radios {
  display: flex; gap: .65rem;
  flex-wrap: wrap;
}
.adh-form__radio {
  cursor: pointer;
  position: relative;
}
.adh-form__radio input { position: absolute; opacity: 0; pointer-events: none; }
.adh-form__radio span {
  display: inline-flex; align-items: center;
  padding: .65rem 1.2rem;
  background: #fff;
  border: 1px solid var(--adh-rule);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--adh-ink);
  transition: border-color .25s, background .25s, color .25s;
}
.adh-form__radio:hover span { border-color: var(--adh-gold); }
.adh-form__radio input:checked + span {
  background: var(--adh-navy);
  color: #fff;
  border-color: var(--adh-navy);
}

/* ── Upload photo ── */
.adh-form__file { position: relative; }
.adh-form__file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
  pointer-events: none;
}
.adh-form__file-label {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .85rem 1.25rem;
  border: 1px dashed var(--adh-rule);
  border-radius: 10px;
  background: #fdfcf7;
  color: var(--adh-ink-soft);
  cursor: pointer;
  font-size: .9rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: border-color .25s, background .25s, color .25s;
}
.adh-form__file-label:hover {
  border-color: var(--adh-gold);
  background: #faf6eb;
  color: var(--adh-navy);
}
.adh-form__file-label i { color: var(--adh-gold); font-size: 1.1rem; }
.adh-form__file input:focus + .adh-form__file-label {
  border-color: var(--adh-navy);
  box-shadow: 0 0 0 3px rgba(12,35,64,.08);
}

/* ── Submit ── */
.adh-form__submit-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
  margin-top: .5rem;
}
.adh-form__submit {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1.75rem;
  border: 0; border-radius: 999px;
  background: var(--adh-navy);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .02em;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1),
              box-shadow .35s, background .25s;
}
.adh-form__submit::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(201,163,74,.4), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.adh-form__submit:hover {
  background: var(--adh-navy-2);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgba(12,35,64,.55);
}
.adh-form__submit:hover::before { opacity: 1; }
.adh-form__submit:active { transform: translateY(0) scale(.99); }
.adh-form__submit-icon {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background .25s;
  position: relative; z-index: 1;
}
.adh-form__submit:hover .adh-form__submit-icon {
  transform: translateX(3px);
  background: var(--adh-gold);
  color: var(--adh-navy);
}
.adh-form__legal {
  text-align: center;
  font-size: .8rem;
  color: var(--adh-ink-soft);
  max-width: 540px;
  margin: 0;
  line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .adh-form__row, .adh-form__row--3 { grid-template-columns: 1fr; }
  .adh-form__group { padding: 1.5rem 1.25rem; }
}

/* ── Page d'introduction : article 6, etapes, CTA ── */
.adhesion-intro-page .adh-intro-section {
  background: var(--adh-cream);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.adh-intro-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--adh-rule);
  border-radius: 18px;
  padding: 2rem 2rem 1.75rem 2.25rem;
  margin-bottom: 2.5rem;
  overflow: hidden;
  box-shadow: 0 22px 50px -32px rgba(12, 35, 64, 0.18);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.adh-intro-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--adh-gold-soft), var(--adh-gold));
}
.adh-intro-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 60px -28px rgba(12, 35, 64, 0.22);
}

.adh-intro-card__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.adh-intro-card__num {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--adh-gold);
  background: rgba(201, 163, 74, 0.10);
  border: 1px solid rgba(201, 163, 74, 0.25);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}
.adh-intro-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  color: var(--adh-ink);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.adh-intro-card__lead {
  font-size: 1.02rem;
  color: var(--adh-ink-soft);
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

.adh-intro-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.adh-intro-card__list li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.97rem;
  color: var(--adh-ink);
  line-height: 1.6;
}
.adh-intro-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 14px;
  height: 1.5px;
  background: var(--adh-gold);
}
.adh-intro-card__list li em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--adh-navy);
  font-weight: 500;
}

.adh-intro-card__note {
  font-size: 0.88rem;
  color: var(--adh-ink-soft);
  line-height: 1.65;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--adh-rule);
  font-style: italic;
}

/* ── Etapes du processus ── */
.adh-intro-steps {
  margin-bottom: 2.5rem;
}
.adh-intro-steps__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 500;
  color: var(--adh-ink);
  margin: 0 0 1.5rem;
  letter-spacing: -0.005em;
}
.adh-intro-steps__list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.adh-intro-steps__list li {
  counter-increment: step;
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  background: #fff;
  border: 1px solid var(--adh-rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
              border-color 0.45s ease,
              box-shadow 0.45s ease;
}
.adh-intro-steps__list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -14px;
  left: 1.25rem;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--adh-gold);
  background: var(--adh-cream);
  padding: 0 0.5rem;
}
.adh-intro-steps__list li:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 163, 74, 0.4);
  box-shadow: 0 18px 36px -22px rgba(12, 35, 64, 0.2);
}
.adh-intro-steps__list strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--adh-ink);
  letter-spacing: -0.005em;
  margin-top: 0.35rem;
}
.adh-intro-steps__list span {
  font-size: 0.88rem;
  color: var(--adh-ink-soft);
  line-height: 1.55;
}

/* ── CTA pill ── */
.adh-intro-cta {
  text-align: center;
  padding: 1rem 0 0;
}
.adh-intro-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.55rem 0.65rem 0.55rem 1.85rem;
  background: var(--adh-navy);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 36px -16px rgba(12, 35, 64, 0.55);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.4s ease,
              box-shadow 0.4s ease;
}
.adh-intro-cta__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(201,163,74,0.35), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.adh-intro-cta__btn:hover {
  background: var(--adh-navy-2);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 22px 50px -18px rgba(12, 35, 64, 0.7);
}
.adh-intro-cta__btn:hover::before { opacity: 1; }
.adh-intro-cta__btn span:first-child { position: relative; z-index: 1; }

.adh-intro-cta__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--adh-gold-soft);
  color: var(--adh-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.4s ease;
}
.adh-intro-cta__btn:hover .adh-intro-cta__icon {
  transform: translateX(4px) rotate(-8deg);
  background: #fff;
}

.adh-intro-cta__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
  color: var(--adh-ink-soft);
  font-style: italic;
}
.adh-intro-cta__hint i { color: var(--adh-gold); font-size: 0.95rem; }

/* ── Responsive intro ── */
@media (max-width: 767.98px) {
  .adh-intro-steps__list { grid-template-columns: 1fr; }
  .adh-intro-card { padding: 1.5rem 1.25rem 1.25rem 1.5rem; }
}

/* ================================================================
   PAGE CONNEXION — auth/login.php
   ----------------------------------------------------------------
   Reconstruction Editorial Luxury (Janvier 2026)
     Vibe   : warm cream + navy + brushed gold
     Layout : Editorial Split asymetrique 1.15fr / 1fr
     Motion : spring physics + staggered entry + floating labels
   ================================================================ */

.auth-page {
  --auth-navy:        #0a1f38;
  --auth-navy-deep:   #050f1d;
  --auth-cream:       #fbf7ef;
  --auth-cream-2:     #f3ebdb;
  --auth-gold:        #b08a3e;
  --auth-gold-bright: #d4a956;
  --auth-gold-soft:   rgba(176, 138, 62, 0.10);
  --auth-ink:         #14222f;
  --auth-ink-soft:    #6c7a89;
  --auth-ink-mute:    #a89e8a;
  --auth-rule:        #e8dfcc;
  --auth-rule-soft:   #f0e7d3;
  --auth-ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --auth-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --auth-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
}

body:has(main.auth-page) #header,
body:has(main.auth-page) .footer,
body:has(main.auth-page) .scroll-top,
body.auth-mode #header,
body.auth-mode .footer,
body.auth-mode .scroll-top { display: none !important; }

body:has(main.auth-page),
body.auth-mode { background: var(--auth-cream); }

.auth-page {
  min-height: 100dvh;
  background: var(--auth-cream);
  color: var(--auth-ink);
  font-family: var(--nav-font, "Montserrat", sans-serif);
}

.auth-shell {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100dvh;
}

/* ---- ASIDE (panneau gauche cinematique) ---- */
.auth-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: #fff;
  isolation: isolate;
}

.auth-aside__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-size: cover;
  background-position: center 35%;
  filter: brightness(0.78) saturate(1.15) contrast(1.05);
  transform: scale(1.04);
  transition: transform 14s var(--auth-ease);
  will-change: transform;
}
.auth-aside:hover .auth-aside__bg { transform: scale(1.08); }

.auth-aside__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(165deg,
      rgba(10, 31, 56, 0.30) 0%,
      rgba(10, 31, 56, 0.55) 45%,
      rgba(5, 15, 29, 0.85)  85%,
      rgba(5, 15, 29, 0.92) 100%);
}

.auth-aside__grain {
  position: absolute; inset: 0; z-index: -1;
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.auth-aside__silhouette { display: none; }

.auth-aside__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 2;
  animation: auth-fadeUp 0.9s var(--auth-ease-out) both;
  animation-delay: 0.15s;
}

.auth-aside__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: #fff;
  padding: 0.5rem 1.15rem 0.5rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 36px -18px rgba(0, 0, 0, 0.5);
  transition:
    background 0.5s var(--auth-ease),
    border-color 0.5s var(--auth-ease),
    transform 0.5s var(--auth-spring);
}
.auth-aside__brand:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(212, 169, 86, 0.4);
  transform: translateY(-2px);
}
.auth-aside__brand img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55);
}
.auth-aside__brand span {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.auth-aside__index {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-family: var(--nav-font, "Montserrat", sans-serif);
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
}
.auth-aside__index strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  font-style: italic;
  color: var(--auth-gold-bright);
  letter-spacing: 0.02em;
}
.auth-aside__index small {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.auth-aside__quote {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 0;
  padding: 0;
  animation: auth-fadeUp 1s var(--auth-ease-out) both;
  animation-delay: 0.35s;
}
.auth-aside__quote-mark {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 6rem;
  font-weight: 400;
  line-height: 0.7;
  color: var(--auth-gold-bright);
  opacity: 0.55;
  margin: 0 0 0.5rem -0.4rem;
  user-select: none;
}
.auth-aside__quote blockquote {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.75rem;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.auth-aside__quote figcaption {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.auth-aside__quote-line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--auth-gold-bright), transparent);
  flex-shrink: 0;
}

/* ---- PANEL (formulaire creme, cote droit) ---- */
.auth-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  background: var(--auth-cream);
  overflow: hidden;
}
.auth-panel::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    ellipse at center,
    rgba(176, 138, 62, 0.07) 0%,
    transparent 60%);
  pointer-events: none;
}
.auth-panel::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--auth-rule) 25%,
    var(--auth-rule) 75%,
    transparent 100%);
  pointer-events: none;
}

.auth-panel__inner {
  position: relative;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.auth-panel__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: var(--nav-font, "Montserrat", sans-serif);
  color: var(--auth-ink-soft);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: uppercase;
  align-self: flex-start;
  padding: 0.45rem 0.85rem 0.45rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.4s var(--auth-ease);
}
.auth-panel__back:hover {
  color: var(--auth-navy);
  border-color: var(--auth-rule);
  background: #fff;
  transform: translateX(-3px);
}
.auth-panel__back i {
  font-size: 0.95rem;
  transition: transform 0.45s var(--auth-spring);
}
.auth-panel__back:hover i { transform: translateX(-3px); }

.auth-panel__head {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-bottom: 0.5rem;
}

.auth-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--auth-gold);
  font-weight: 600;
  font-family: var(--nav-font, "Montserrat", sans-serif);
  padding: 0.4rem 0.95rem 0.4rem 0.55rem;
  border-radius: 999px;
  background: var(--auth-gold-soft);
  border: 1px solid rgba(176, 138, 62, 0.2);
}
.auth-panel__eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--auth-gold);
  box-shadow: 0 0 0 3px rgba(176, 138, 62, 0.18);
}

.auth-panel__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.2rem, 3.5vw, 2.85rem);
  font-weight: 400;
  color: var(--auth-ink);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.auth-panel__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--auth-navy);
}

.auth-panel__lead {
  font-size: 0.92rem;
  color: var(--auth-ink-soft);
  margin: 0;
  line-height: 1.65;
  max-width: 360px;
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  font-family: var(--nav-font, "Montserrat", sans-serif);
  animation: auth-shake 0.55s var(--auth-ease) both;
  border: 1px solid;
}
.auth-alert i { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.auth-alert--error  { background: #fdf3f3; color: #8a1f24; border-color: #f4d5d5; }
.auth-alert--error i { color: #c2474c; }
.auth-alert--success { background: #f1faf3; color: #1d633b; border-color: #c9ecd3; }
.auth-alert--success i { color: #2d8a52; }

@keyframes auth-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(4px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(2px); }
}

/* ---- Formulaire avec floating labels ---- */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-field { position: relative; }

.auth-field__input {
  position: relative;
  height: 60px;
  border: 1.5px solid var(--auth-rule);
  border-radius: 14px;
  background: #fff;
  transition:
    border-color 0.4s var(--auth-ease),
    box-shadow 0.4s var(--auth-ease),
    transform 0.3s var(--auth-ease);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(10, 31, 56, 0.03);
}
.auth-field__input:focus-within {
  border-color: var(--auth-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(176, 138, 62, 0.10),
    0 8px 24px -10px rgba(176, 138, 62, 0.18);
  transform: translateY(-1px);
}

.auth-field__icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--auth-ink-mute);
  font-size: 1.05rem;
  pointer-events: none;
  z-index: 1;
  transition: color 0.4s var(--auth-ease);
}
.auth-field__input:focus-within .auth-field__icon { color: var(--auth-gold); }

.auth-field__input input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--auth-ink);
  font-family: inherit;
  padding: 22px 1rem 6px 2.85rem;
}
.auth-field__input input[type="password"] { padding-right: 3.2rem; }
.auth-field__input input::placeholder { color: transparent; }

.auth-field__input label {
  position: absolute;
  left: 2.85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.92rem;
  color: var(--auth-ink-mute);
  font-family: var(--nav-font, "Montserrat", sans-serif);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: all 0.35s var(--auth-ease);
  margin: 0;
  padding: 0;
  background: transparent;
}
.auth-field__input input:focus ~ label,
.auth-field__input input:not(:placeholder-shown) ~ label {
  top: 11px;
  transform: translateY(0);
  font-size: 0.62rem;
  color: var(--auth-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

.auth-field__toggle {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--auth-ink-mute);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition:
    color 0.3s var(--auth-ease),
    background 0.3s var(--auth-ease),
    transform 0.35s var(--auth-spring);
  z-index: 2;
}
.auth-field__toggle:hover {
  color: var(--auth-gold);
  background: var(--auth-gold-soft);
}
.auth-field__toggle:active { transform: translateY(-50%) scale(0.92); }

/* ---- Bouton submit (Button-in-Button) ---- */
.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 0.55rem 0.5rem 1.6rem;
  height: 58px;
  border: none;
  border-radius: 999px;
  background: var(--auth-navy);
  color: #fff;
  font-family: var(--nav-font, "Montserrat", sans-serif);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-top: 0.5rem;
  transition:
    background 0.45s var(--auth-ease),
    transform 0.35s var(--auth-spring),
    box-shadow 0.45s var(--auth-ease);
  box-shadow: 0 12px 32px -16px rgba(10, 31, 56, 0.55);
}
.auth-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 80% 50%,
    rgba(212, 169, 86, 0.35) 0%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.55s var(--auth-ease);
}
.auth-submit:hover {
  background: var(--auth-navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 22px 50px -18px rgba(10, 31, 56, 0.7);
}
.auth-submit:hover::before { opacity: 1; }
.auth-submit:active { transform: translateY(0) scale(0.985); }

.auth-submit > span:first-child { position: relative; z-index: 1; }

.auth-submit__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--auth-gold-bright);
  color: var(--auth-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
  transition: transform 0.5s var(--auth-spring);
}
.auth-submit:hover .auth-submit__icon { transform: translateX(4px) rotate(-8deg); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 0;
  font-family: var(--nav-font, "Montserrat", sans-serif);
  font-size: 0.7rem;
  color: var(--auth-ink-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--auth-rule);
}
.auth-divider span { white-space: nowrap; }

.auth-cta {
  position: relative;
  padding: 1.4rem 1.5rem 1.4rem 1.75rem;
  background: #fff;
  border: 1px solid var(--auth-rule);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.5s var(--auth-ease), transform 0.5s var(--auth-ease);
}
.auth-cta::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    var(--auth-gold-bright) 0%,
    var(--auth-gold) 100%);
}
.auth-cta:hover {
  box-shadow: 0 16px 40px -22px rgba(10, 31, 56, 0.25);
  transform: translateY(-1px);
}
.auth-cta p {
  font-size: 0.85rem;
  color: var(--auth-ink-soft);
  margin: 0 0 0.85rem;
  line-height: 1.55;
}
.auth-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--auth-navy);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--nav-font, "Montserrat", sans-serif);
  transition: color 0.4s var(--auth-ease), gap 0.4s var(--auth-spring);
}
.auth-cta__link i:first-child { color: var(--auth-gold); font-size: 0.95rem; }
.auth-cta__link:hover { color: var(--auth-gold); gap: 0.85rem; }
.auth-cta__arrow {
  font-size: 0.72rem;
  transition: transform 0.45s var(--auth-spring);
}
.auth-cta__link:hover .auth-cta__arrow { transform: translate(3px, -3px); }

.auth-panel__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  color: var(--auth-ink-mute);
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--auth-rule-soft);
  letter-spacing: 0.04em;
  font-family: var(--nav-font, "Montserrat", sans-serif);
}
.auth-panel__foot a {
  color: var(--auth-ink-mute);
  text-decoration: none;
  transition: color 0.3s var(--auth-ease);
}
.auth-panel__foot a:hover { color: var(--auth-gold); }
.auth-panel__foot-sep { opacity: 0.4; }

/* ---- Animations entry ---- */
@keyframes auth-fadeUp {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.auth-panel__inner > * { animation: auth-fadeUp 0.75s var(--auth-ease-out) both; }
.auth-panel__inner > .auth-panel__back   { animation-delay: 0.30s; }
.auth-panel__inner > .auth-panel__head   { animation-delay: 0.40s; }
.auth-panel__inner > .auth-alert         { animation-delay: 0.45s; }
.auth-panel__inner > .auth-form          { animation-delay: 0.50s; }
.auth-panel__inner > .auth-divider       { animation-delay: 0.60s; }
.auth-panel__inner > .auth-cta           { animation-delay: 0.65s; }
.auth-panel__inner > .auth-panel__foot   { animation-delay: 0.72s; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside {
    min-height: 340px;
    padding: 2rem 1.75rem;
  }
  .auth-aside__quote blockquote { font-size: 1.15rem; }
  .auth-aside__quote-mark { font-size: 4.5rem; }
  .auth-panel { padding: 2.5rem 1.5rem; }
}

@media (max-width: 575.98px) {
  .auth-aside { min-height: 280px; padding: 1.5rem 1.25rem; }
  .auth-aside__brand img { height: 36px; width: 36px; }
  .auth-aside__brand span { font-size: 0.92rem; }
  .auth-aside__quote blockquote { font-size: 1rem; }
  .auth-aside__index { display: none; }

  .auth-panel { padding: 2rem 1rem; }
  .auth-panel__title { font-size: 1.95rem; }
  .auth-field__input { height: 56px; }
  .auth-field__input label { font-size: 0.88rem; }
  .auth-submit { height: 54px; }
  .auth-submit__icon { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-aside__bg,
  .auth-panel__inner > *,
  .auth-aside__top,
  .auth-aside__quote { animation: none !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM REFINEMENT LAYER — append-only polish
   ══════════════════════════════════════════════════════════════════
   Le site embarque déjà : grain global, focus-visible doré, skip-link
   premium, drop-shadow doré sur l'insigne. On ne duplique rien — on
   ajoute uniquement les pièces manquantes :
     • opsz auto pour Fraunces (axe variable inutilisé jusque-là)
     • tabular-nums sur les contextes numériques restants (dates,
       codes, numéros de section)
     • text-wrap balance/pretty sur les titres et leads non couverts
     • ombres teintées navy en remplacement des ombres noires (header
       scrolled, scroll-top)
     • Fraunces sur le sitename header/footer (cohérence éditoriale
       avec les heading des sections)
     • affordance "à venir" sur les liens cibles "#" du footer
     • antialiasing global + ::selection à la couleur de marque
   ══════════════════════════════════════════════════════════════════ */

:root {
  --shadow-tint: 10, 37, 64;       /* navy hue for tinted shadows */
}

html { font-optical-sizing: auto; }

::selection {
  background: rgba(201, 169, 97, 0.28);
  color: #0a2540;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tabular figures partout où on affiche dates / chiffres / codes. */
time,
.news-card__day,
.news-card__month,
.news-card__date,
.contact-success__code code,
.contact-form__input--mono,
.cine-plate__num,
.amicale-doc__num,
.amicale-docs__count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* text-wrap: balance/pretty sur les titres et excerpts non couverts. */
.section-title h2,
.news-card__title,
.news-card__title--xl,
.amicale-doc__title,
.contact-shell__title {
  text-wrap: balance;
}

.news-card__excerpt,
.amicale-doc__text,
.contact-shell__intro,
.section-cover__tagline {
  text-wrap: pretty;
}

/* opsz axis explicite sur les grands titres Fraunces — exploite l'axe
   variable opsz (9..144) qui est chargé mais jamais piloté. */
.news-heading__title,
.amicale-heading__title,
.cine-diptych__title,
.cine-diptych__title em {
  font-variation-settings: "opsz" 96;
}

/* Sitename : Fraunces + opsz pour le presence éditoriale cohérente
   avec les titres de section. Taille d'origine PRÉSERVÉE (30px). */
.header .logo h1.sitename {
  font-family: var(--editorial-font, "Fraunces"), Georgia, serif;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 36;
}
.footer .footer-about .logo .sitename {
  font-family: var(--editorial-font, "Fraunces"), Georgia, serif;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 28;
}

.info-legal-hero {
  padding: 155px 0 70px;
  color: #fff;
  background: linear-gradient(135deg, #06182c, #123f65);
}

.info-legal-hero h1 {
  color: #fff;
  margin: .5rem 0 1rem;
}

.info-legal-hero p {
  max-width: 850px;
  color: rgba(255, 255, 255, .82);
}

.info-legal-content {
  max-width: 980px;
}

.info-legal-content article {
  padding: 2rem;
  margin-bottom: 1.25rem;
  border-left: 4px solid #c9a961;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(7, 30, 53, .08);
}

.info-legal-content h2,
.info-legal-content h3 {
  color: #09233d;
}

.marins-page-hero {
  padding: 155px 0 75px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(6, 24, 44, 0.92), rgba(24, 80, 113, 0.74)),
    url("../../contenus/images/heros/recherche.jpg") center / cover no-repeat;
}
.marins-page-hero--ctcl {
  background:
    linear-gradient(135deg, rgba(6, 24, 44, 0.90), rgba(24, 80, 113, 0.70)),
    url("../../contenus/images/heros/ctcl-fnfl.jpg") center / cover no-repeat;
}
.marins-page-hero--snle {
  background:
    linear-gradient(135deg, rgba(6, 24, 44, 0.90), rgba(24, 80, 113, 0.70)),
    url("../../contenus/images/heros/snle-index.jpg") center / cover no-repeat;
}

.marins-page-hero h1 {
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.marins-page-hero p { max-width: 780px; color: rgba(255,255,255,.82); }
.marins-result-count { margin: 2rem 0 1rem; color: #17324b; }
.marins-toolbar__actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

/* Footer h4 : poids un cran supérieur pour la hiérarchie. */
.footer h4 {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--heading-color);
}

/* Footer links — micro-translation au hover, plus tactile. */
.footer .footer-links ul a {
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}
.footer .footer-links ul a:hover {
  transform: translateX(2px);
}

/* Liens placeholder href="#" du footer : on signale "à venir" plutôt
   que de laisser un lien apparemment cassé. Reste focusable. */
.footer .footer-links ul a[href="#"] {
  cursor: not-allowed;
  opacity: 0.6;
}
.footer .footer-links ul a[href="#"]::after {
  content: " · à venir";
  font-size: 0.72em;
  font-style: italic;
  color: rgba(201, 169, 97, 0.7);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Header (scrolled) : ombre teintée navy plutôt que noir pur. */
.scrolled .header {
  box-shadow: 0 8px 30px -16px rgba(var(--shadow-tint), 0.35);
}

/* Scroll-top : élévation tintée navy + hover qui passe doré. */
.scroll-top {
  box-shadow: 0 8px 24px -8px rgba(var(--shadow-tint), 0.45),
              0 2px 6px rgba(var(--shadow-tint), 0.18);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              visibility 0.4s ease,
              background-color 0.3s ease;
}
.scroll-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -8px rgba(201, 169, 97, 0.55),
              0 4px 10px rgba(var(--shadow-tint), 0.25);
}
.scroll-top:active {
  transform: translateY(-1px) scale(0.96);
}

/* Image baseline reset — empêche le gap fantôme sous les <img> en
   contexte inline (plate-forme par défaut "inline" → baseline). */
img { display: block; max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════════════════
   STATUTS HERO → ALIGNÉ SUR CALENDRIER-HERO
   ══════════════════════════════════════════════════════════════════
   Demande utilisateur : appliquer aux sous-rubriques Amicale (Statuts,
   JORF, Règlement intérieur, Trombinoscope, Guide porte-drapeau) le
   même style de hero/cover que /evenements/calendrier.

   On conserve le markup .statuts-hero* (5 vues partagent document.php),
   et on REDÉFINIT le visuel via cette couche de surcharges :
     • hauteur réduite (52vh, plus aérienne, moins "lourd")
     • bg net (plus de blur/saturate/zoom infinite)
     • veil double : navy linéaire + flaque dorée radiale en bas
     • grain ::after identique à calendrier
     • titre Fraunces 500 BLANC (annule le dégradé doré du gold-text)
     • eyebrow pill or-souple, plus discret
     • divider/lead/scroll : masqués (calendrier n'en a pas)
   La spécificité (page-class + bem) garantit que ces règles l'emportent
   sur celles aux lignes 5658+, 6128+, 7257+. ══════════════════════ */

.statuts-page .statuts-hero {
  min-height: 65vh;
  padding: 0;
  text-align: center;
}

.statuts-page .statuts-hero__bg {
  inset: 0;
  filter: none;
  transform: scale(1.04);
  transition: transform 8s cubic-bezier(.2,.7,.3,1);
  animation: none;
}
.statuts-page:hover .statuts-hero__bg { transform: scale(1); }

.statuts-page .statuts-hero__veil {
  background:
    linear-gradient(180deg, rgba(12, 35, 64, 0.55) 0%, rgba(12, 35, 64, 0.82) 100%),
    radial-gradient(1200px 400px at 50% 110%, rgba(201, 163, 74, 0.25), transparent 60%);
}

.statuts-page .statuts-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
}

.statuts-page .statuts-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 7.5rem 1rem 6rem;
  max-width: none;
}

/* Eyebrow pill — gold-soft, identique calendrier-hero */
.statuts-page .statuts-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 1rem;
  background: transparent;
  border: 1px solid rgba(233, 212, 154, 0.35);
  border-radius: 999px;
  color: rgba(233, 212, 154, 0.95);
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: 0;
}
.statuts-page .statuts-hero__eyebrow i {
  color: rgba(233, 212, 154, 0.95);
}

/* Titre Fraunces blanc — annule le dégradé doré + filter + text-shadow.
   On force background:none et -webkit-text-fill-color:currentColor pour
   éteindre le clip text qui rendait le texte transparent. */
.statuts-page .statuts-hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 1.25rem 0 1rem;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: #ffffff;
  text-shadow: none;
  filter: none;
}

.statuts-page .statuts-hero__subtitle {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 400;
  font-style: normal;
  color: rgba(255, 255, 255, 0.88);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 1;
}

/* Éléments masqués pour matcher exactement le calendrier-hero
   (qui n'a ni divider, ni lead long, ni flèche scroll). */
.statuts-page .statuts-hero__divider,
.statuts-page .statuts-hero__lead,
.statuts-page .statuts-hero__scroll {
  display: none;
}

/* Override responsive : la règle existante à la ligne 5993 force
   min-height: 74vh / padding 8rem 1rem 4.5rem en mobile. On remet
   le calendrier-hero feel : 52vh est suffisant, padding plus doux. */
@media (max-width: 767.98px) {
  .statuts-page .statuts-hero {
    min-height: 60vh;
    padding: 0;
  }
  .statuts-page .statuts-hero__content {
    padding: 6rem 1rem 4.5rem;
  }
}

/* La carte d'introduction qui chevauche le hero (margin-top: -70px)
   doit rester lisible. Avec un hero 52vh + un padding 5rem en bas,
   l'overlap reste visuellement OK. On ne touche pas .statuts-doc-intro. */

/* Header : logo + nom du site alignés à l'extrémité gauche */
.header > .container-fluid {
  max-width: none !important;
  width: 100%;
  padding-left: clamp(0.75rem, 1.4vw, 1.5rem);
  padding-right: clamp(0.75rem, 1.4vw, 1.5rem);
  gap: clamp(1rem, 1.8vw, 2.25rem);
}

.header .logo {
  flex: 0 0 auto;
  min-width: 0;
  margin-right: clamp(0.75rem, 1.5vw, 2rem);
}

.header .logo img {
  flex: 0 0 auto;
  max-height: 48px;
}

.header .logo h1.sitename,
.header .sitename {
  white-space: nowrap;
  min-width: max-content;
  line-height: 1;
  font-size: 1rem !important;
}

@media (min-width: 1200px) {
  .header .navmenu {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header .navmenu > ul {
    /* min-width: 0 propage le shrink jusqu'aux items pour éviter que
       le <ul> ne déborde de la place allouée au .navmenu (sinon la
       liste centrée bave à gauche sur le logo et à droite sur la
       barre de recherche, surtout sur Chrome). */
    min-width: 0;
    justify-content: center;
    gap: clamp(0.1rem, 0.25vw, 0.35rem);
  }

  .header .navmenu ul > li > a {
    padding-left: clamp(0.4rem, 0.55vw, 0.7rem) !important;
    padding-right: clamp(0.4rem, 0.55vw, 0.7rem) !important;
  }

  .header .header-actions {
    flex: 0 0 auto;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header .logo h1.sitename {
    /* On rétrécit le nom du site (au lieu de l'agrandir comme avant)
       pour que le menu n'empiète pas sur "Le Triomphant". */
    font-size: 16px !important;
  }

  .header .header-insigne {
    display: none !important;
  }

  /* On resserre encore les actions pour libérer de la place au menu. */
  .header .header-actions {
    gap: 0.4rem !important;
  }

  /* À cette largeur, on ne peut plus afficher la barre de recherche
     entière : on la masque et on garde l'icône-raccourci à la place
     (qui est sinon hidden au-dessus de 1200px via Bootstrap). */
  .header .site-search--header {
    display: none !important;
  }
  .header .site-search-shortcut {
    display: inline-flex !important;
  }
}

@media (max-width: 575.98px) {
  .header .logo h1.sitename {
    font-size: 18px !important;
  }

  .header .logo img {
    max-height: 40px;
  }
}

/* =========================================================
   CT / CL - Historique public
   ========================================================= */
.ctcl-page {
  --ctcl-navy: #071d33;
  --ctcl-blue: #0a2540;
  --ctcl-gold: #c9a961;
  --ctcl-cream: #f7f1e4;
  --ctcl-muted: #637083;
  background: #f6f3ec;
}

.ctcl-hero {
  position: relative;
  min-height: 54vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--ctcl-navy);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  isolation: isolate;
}

.ctcl-historique-hero {
  background-image: url("../../contenus/images/heros/ctcl-historique.jpg");
  background-position: center 42%;
}

.ctcl-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(7, 29, 51, 0.92) 0%, rgba(7, 29, 51, 0.74) 42%, rgba(7, 29, 51, 0.32) 100%),
    linear-gradient(180deg, rgba(7, 29, 51, 0.22), rgba(7, 29, 51, 0.74));
}

.ctcl-hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding-top: 8rem;
  padding-bottom: 5rem;
}

.ctcl-eyebrow,
.ctcl-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ctcl-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
}

.ctcl-eyebrow {
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(201, 169, 97, 0.42);
  border-radius: 999px;
  background: rgba(7, 29, 51, 0.35);
}

.ctcl-hero h1 {
  margin: 1.35rem 0 1rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.04;
}

.ctcl-hero p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.12rem;
  line-height: 1.75;
}

.ctcl-intro,
.ctcl-timeline-section,
.ctcl-detail-body {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.ctcl-intro__panel {
  max-width: 760px;
  margin-bottom: 2.5rem;
}

.ctcl-intro__panel h2 {
  margin: 0.7rem 0 0;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.65rem;
  font-weight: 600;
  line-height: 1.12;
}

.ctcl-intro__panel {
  padding: 2rem 0 0;
  border-top: 1px solid rgba(10, 37, 64, 0.16);
}

.ctcl-intro__panel p {
  max-width: 780px;
  margin: 1rem 0 0;
  color: #334155;
  font-size: 1.05rem;
  line-height: 1.8;
}

.ctcl-readmore,
.ctcl-pdf-link,
.ctcl-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.ctcl-readmore,
.ctcl-pdf-link {
  color: #ffffff;
  background: var(--ctcl-blue);
  padding: 0.75rem 1rem;
}

.ctcl-timeline {
  position: relative;
  display: grid;
  gap: 1.35rem;
  padding: 1rem 0;
}

.ctcl-periods {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.ctcl-periods__intro h2 {
  margin: 0.45rem 0 0.8rem;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.ctcl-periods__intro p {
  max-width: 62ch;
  margin: 0;
  color: #536176;
  line-height: 1.75;
}

.ctcl-periods__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ctcl-period-filter {
  min-height: 4.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(10, 37, 64, 0.14);
  border-radius: 0.75rem;
  color: var(--ctcl-blue);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 44px -36px rgba(10, 37, 64, 0.55);
  text-align: left;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.ctcl-period-filter:hover,
.ctcl-period-filter:focus-visible,
.ctcl-period-filter.is-active {
  border-color: rgba(197, 165, 90, 0.58);
  background: #ffffff;
  box-shadow: 0 22px 54px -34px rgba(10, 37, 64, 0.65);
  transform: translateY(-2px);
}

.ctcl-period-filter.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--ctcl-blue), #163c61);
}

.ctcl-period-filter span,
.ctcl-period-filter small {
  display: block;
}

.ctcl-period-filter span {
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
}

.ctcl-period-filter small {
  margin-top: 0.35rem;
  color: #6b7890;
  font-size: 0.74rem;
  line-height: 1.35;
}

.ctcl-period-filter.is-active small {
  color: rgba(255, 255, 255, 0.78);
}

.ctcl-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(10, 37, 64, 0.28), transparent);
}

.ctcl-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 5rem 1fr;
  align-items: center;
}

.ctcl-timeline__item[hidden] {
  display: none !important;
}

.ctcl-timeline__item:nth-child(odd) .ctcl-timeline__shell {
  grid-column: 1;
  justify-self: end;
}

.ctcl-timeline__item:nth-child(even) .ctcl-timeline__shell {
  grid-column: 3;
  justify-self: start;
}

.ctcl-timeline__marker {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 4.25rem;
  height: 4.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--ctcl-blue);
  border: 3px solid var(--ctcl-cream);
  box-shadow: 0 12px 28px -18px rgba(10, 37, 64, 0.75);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  z-index: 1;
}

.ctcl-timeline__shell {
  width: min(100%, 520px);
}

.ctcl-timeline__card {
  padding: 1.45rem;
  border-radius: 1rem;
  border: 1px solid rgba(10, 37, 64, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 58px -40px rgba(10, 37, 64, 0.6);
}

.ctcl-timeline__media {
  margin: 0 0 1.1rem;
  overflow: hidden;
  border-radius: 0.85rem;
  aspect-ratio: 16 / 9;
  background: #edf1f5;
}

.ctcl-timeline__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctcl-timeline__card:hover .ctcl-timeline__media img {
  transform: scale(1.035);
}

.ctcl-timeline__meta,
.ctcl-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.8rem;
  color: var(--ctcl-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
}

.ctcl-timeline__year,
.ctcl-detail-meta span {
  color: var(--ctcl-gold);
  font-weight: 700;
}

.ctcl-timeline__period {
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(197, 165, 90, 0.24);
  border-radius: 999px;
  color: var(--ctcl-blue);
  background: rgba(197, 165, 90, 0.1);
  font-size: 0.74rem;
  font-weight: 700;
}

.ctcl-timeline__card h3 {
  margin: 0 0 0.8rem;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
  line-height: 1.18;
}

.ctcl-timeline__card p {
  margin: 0 0 1.2rem;
  color: #40516a;
  line-height: 1.75;
}

.ctcl-readmore i,
.ctcl-pdf-link i {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctcl-readmore:hover i,
.ctcl-pdf-link:hover i {
  transform: translate(2px, -2px);
}

.ctcl-empty {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 2rem;
  text-align: center;
  color: #4b5870;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
}

.ctcl-empty i {
  display: block;
  margin-bottom: 1rem;
  color: var(--ctcl-gold);
  font-size: 2.4rem;
}

.ctcl-empty--filtered {
  margin-top: 2rem;
}

.ctcl-empty--filtered[hidden] {
  display: none !important;
}

.ctcl-detail-hero {
  padding: 8.5rem 0 4.5rem;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(7, 29, 51, 0.98), rgba(10, 37, 64, 0.88)),
    url("../../contenus/images/heros/ctcl-detail.jpg") center/cover;
}

.ctcl-back-link {
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.86);
}

.ctcl-detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 2rem;
  align-items: end;
}

.ctcl-detail-hero__text h1 {
  margin: 1rem 0;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 3.4rem;
  line-height: 1.08;
}

.ctcl-detail-media {
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 26px 70px -38px rgba(4, 14, 27, 0.85);
}

.ctcl-detail-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ctcl-detail-article {
  max-width: 920px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 1rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow: 0 24px 70px -46px rgba(10, 37, 64, 0.58);
}

.ctcl-detail-lead {
  margin: 0 0 1.5rem;
  color: var(--ctcl-blue);
  font-size: 1.18rem;
  line-height: 1.75;
}

.ctcl-detail-text {
  color: #334155;
  font-size: 1.04rem;
  line-height: 1.85;
}

.ctcl-pdf-link {
  margin-top: 2rem;
}

/* Groupe Consulter + Télécharger : aligné, avec wrap mobile. */
.ctcl-pdf-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.ctcl-pdf-actions .ctcl-pdf-link {
  margin-top: 0;
}
.ctcl-pdf-link--download {
  background: transparent !important;
  color: var(--ctcl-blue) !important;
  border: 1px solid rgba(10, 37, 64, 0.35);
}
.ctcl-pdf-link--download:hover {
  background: var(--ctcl-blue) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   « Document source » — Panneau premium PDF CT/CL Historique
   Vibe : Editorial Luxury (cream + or)
   Layout : Editorial Split (typo gauche, actions droite)
   Composition : Double-bezel (shell + core concentriques)
   ═══════════════════════════════════════════════════════════════════ */

.ctcl-source-pdf {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 10vw, 9rem);
  background:
    radial-gradient(circle at 20% 0%, rgba(201, 169, 97, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(10, 37, 64, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, #FDFBF7 0%, #F5EFDF 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Halos décoratifs (pointer-events:none, juste pour la profondeur) */
.ctcl-source-pdf__halo {
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.ctcl-source-pdf__halo--gold {
  width: 320px; height: 320px;
  top: -40px; left: -80px;
  background: rgba(201, 169, 97, 0.18);
}
.ctcl-source-pdf__halo--navy {
  width: 380px; height: 380px;
  bottom: -120px; right: -120px;
  background: rgba(10, 37, 64, 0.12);
}

/* Film grain SVG en overlay fixe — donne le toucher papier */
.ctcl-source-pdf__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

.ctcl-source-pdf .container { position: relative; z-index: 2; }

/* ─── DOUBLE-BEZEL ─────────────────────────────────────────────── */
/* Couche 1 : shell extérieur — finition machined hardware */
.ctcl-source-pdf__shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.5rem;
  border-radius: 2.25rem;
  background: linear-gradient(135deg,
    rgba(10, 37, 64, 0.06) 0%,
    rgba(201, 169, 97, 0.10) 50%,
    rgba(10, 37, 64, 0.06) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 60px 120px -60px rgba(10, 37, 64, 0.28),
    0 0 0 1px rgba(10, 37, 64, 0.06);
}

/* Couche 2 : core intérieur — rayon concentrique calculé */
.ctcl-source-pdf__core {
  padding: clamp(2rem, 4vw, 3.75rem) clamp(1.5rem, 4vw, 3.5rem);
  background: #ffffff;
  border-radius: calc(2.25rem - 0.5rem);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) inset;
}

/* ─── EDITORIAL SPLIT ──────────────────────────────────────────── */
.ctcl-source-pdf__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

/* Eyebrow : tag pill micro avec point doré */
.ctcl-source-pdf__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(10, 37, 64, 0.045);
  border: 1px solid rgba(10, 37, 64, 0.08);
  color: var(--ctcl-blue);
  font-family: "Montserrat", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ctcl-source-pdf__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ctcl-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}

/* Titre massif — typographie éditoriale */
.ctcl-source-pdf__title {
  margin: 1.5rem 0 1.25rem;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ctcl-source-pdf__title em {
  font-style: italic;
  color: var(--ctcl-gold);
  font-weight: 400;
}

.ctcl-source-pdf__lead {
  margin: 0 0 1.75rem;
  max-width: 42ch;
  color: var(--ctcl-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* Meta caption en bas du copy — typographie technique */
.ctcl-source-pdf__meta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(99, 112, 131, 0.85);
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ctcl-source-pdf__meta i {
  color: var(--ctcl-gold);
  font-size: 0.95rem;
}
.ctcl-source-pdf__meta span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28ch;
}

/* ─── ACTIONS — 2 boutons pill empilés ─────────────────────────── */
.ctcl-source-pdf__actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-self: end;
}

/* Bouton générique — pill avec layout button-in-button */
.ctcl-source-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0.55rem 1.05rem 1.6rem;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  /* Cubic-bezier custom : décélération à la Apple */
  transition:
    transform 0.7s cubic-bezier(0.32, 0.72, 0, 1),
    background 0.7s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.7s cubic-bezier(0.32, 0.72, 0, 1),
    color 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

.ctcl-source-btn--primary {
  background: var(--ctcl-blue);
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 14px 36px -14px rgba(10, 37, 64, 0.55),
    0 0 0 1px rgba(10, 37, 64, 0.4);
}
.ctcl-source-btn--primary:hover {
  background: #0e2e52;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 22px 50px -16px rgba(10, 37, 64, 0.7),
    0 0 0 1px rgba(201, 169, 97, 0.35);
}

.ctcl-source-btn--ghost {
  background: rgba(10, 37, 64, 0.04);
  color: var(--ctcl-blue);
  box-shadow:
    0 0 0 1px rgba(10, 37, 64, 0.12) inset;
}
.ctcl-source-btn--ghost:hover {
  background: rgba(10, 37, 64, 0.08);
  color: var(--ctcl-blue);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(10, 37, 64, 0.22) inset,
    0 16px 36px -18px rgba(10, 37, 64, 0.35);
}

.ctcl-source-btn:active {
  transform: scale(0.98) translateY(0);
}

/* Button-in-button : icône isolée dans son cercle nesté */
.ctcl-source-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition:
    transform 0.7s cubic-bezier(0.32, 0.72, 0, 1),
    background 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
.ctcl-source-btn--primary .ctcl-source-btn__icon {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}
.ctcl-source-btn--ghost .ctcl-source-btn__icon {
  background: rgba(10, 37, 64, 0.1);
  color: var(--ctcl-blue);
}

/* Magnetic hover : translation diagonale + scale subtil */
.ctcl-source-btn:hover .ctcl-source-btn__icon {
  transform: translate(2px, -2px) scale(1.05);
}
.ctcl-source-btn--primary:hover .ctcl-source-btn__icon {
  background: var(--ctcl-gold);
  color: var(--ctcl-blue);
}
.ctcl-source-btn--ghost:hover .ctcl-source-btn__icon {
  background: var(--ctcl-blue);
  color: #ffffff;
}

/* ─── Mobile collapse — single column, padding réduit ──────────── */
@media (max-width: 767.98px) {
  .ctcl-source-pdf__shell { padding: 0.35rem; border-radius: 1.5rem; }
  .ctcl-source-pdf__core {
    padding: 1.75rem 1.25rem;
    border-radius: calc(1.5rem - 0.35rem);
  }
  .ctcl-source-pdf__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ctcl-source-pdf__halo--gold,
  .ctcl-source-pdf__halo--navy { display: none; }
  .ctcl-source-btn { padding-right: 0.5rem; }
  .ctcl-source-btn__icon { width: 2.1rem; height: 2.1rem; }
}

/* ─── Reduced motion : on coupe tout le mouvement ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .ctcl-source-btn,
  .ctcl-source-btn__icon {
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   « HISTOIRE EN IMAGES » — EXPOSITION MUSEUM
   ─────────────────────────────────────────────────────────────────
   Refonte premium : dark navy #0a1628 + gold #C5A55A,
   frosted glass, cartes 3D mouse-follow (JS), parallax scroll,
   breathing animation au repos, glightbox cinématique.
   Data 100% en dur dans _histoire_images.php (pas de BDD).
   ═══════════════════════════════════════════════════════════════════ */

.ctcl-museum {
  --museum-navy:        #0a1628;
  --museum-navy-deep:   #050d18;
  --museum-gold:        #C5A55A;
  --museum-gold-soft:   #D6BE7A;
  --museum-paper:       #F4EFE2;
  --museum-text:        #E6E3DA;
  --museum-text-mute:   rgba(230, 227, 218, 0.65);

  position: relative;
  padding: clamp(5rem, 8vw, 7.5rem) 0 0;
  background:
    radial-gradient(circle at 15% 8%,  rgba(197, 165, 90, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(197, 165, 90, 0.04) 0%, transparent 45%),
    linear-gradient(180deg, #0a1628 0%, #050d18 60%, #0a1628 100%);
  color: var(--museum-text);
  isolation: isolate;
  overflow: hidden;
}

/* Halos décoratifs et grain papier — décor de salle */
.ctcl-museum__halo {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(110px);
  z-index: 0;
}
.ctcl-museum__halo--gold {
  width: 480px; height: 480px;
  top: 6%; left: -120px;
  background: rgba(197, 165, 90, 0.18);
}
.ctcl-museum__halo--navy {
  width: 540px; height: 540px;
  bottom: -160px; right: -160px;
  background: rgba(13, 35, 64, 0.55);
}
.ctcl-museum__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
.ctcl-museum > .container { position: relative; z-index: 3; }

/* ─── HEADER + NAV ─────────────────────────────────────────────── */
.ctcl-museum__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}
.ctcl-museum__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--museum-gold);
}
.ctcl-museum__eyebrow-rule {
  display: block;
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(197, 165, 90, 0.7),
    transparent);
}
.ctcl-museum__eyebrow--inverse { color: var(--ctcl-blue); }
.ctcl-museum__eyebrow--inverse .ctcl-museum__eyebrow-rule {
  background: linear-gradient(90deg,
    transparent,
    rgba(10, 22, 40, 0.4),
    transparent);
}
.ctcl-museum__title {
  margin: 1.25rem 0 1rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--museum-paper);
  text-wrap: balance;
}
.ctcl-museum__title em {
  font-style: italic;
  color: var(--museum-gold);
}
.ctcl-museum__lead {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--museum-text-mute);
  line-height: 1.75;
  font-size: 1rem;
}

/* Nav inter-galeries : glass pill sticky en haut */
.ctcl-museum__nav {
  position: sticky;
  top: 92px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin: 0 auto 3.5rem;
  padding: 0.45rem;
  width: max-content;
  max-width: 100%;
  background: rgba(10, 22, 40, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
          backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(197, 165, 90, 0.22);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 22px 50px -22px rgba(0, 0, 0, 0.7);
}
.ctcl-museum__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem 0.55rem 0.6rem;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--museum-text);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}
.ctcl-museum__chip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: rgba(197, 165, 90, 0.14);
  color: var(--museum-gold);
  font-size: 0.7rem;
  letter-spacing: 0;
}
.ctcl-museum__chip:hover {
  background: var(--museum-gold);
  color: var(--museum-navy-deep);
}
.ctcl-museum__chip:hover .ctcl-museum__chip-num {
  background: var(--museum-navy-deep);
  color: var(--museum-gold);
}

/* ─── SALLE D'EXPOSITION (chaque galerie) ─────────────────────── */
.ctcl-museum__room {
  position: relative;
  padding: clamp(5rem, 9vw, 8rem) 0;
  margin-top: 3rem;
  overflow: hidden;
  scroll-margin-top: 120px;
  isolation: isolate;
}

/* Fond : image en filigrane (parallax JS via data-parallax) */
.ctcl-museum__bg {
  position: absolute;
  inset: -10% 0;        /* déborde pour permettre la translation parallax */
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.12) translate3d(0, 0, 0);
  will-change: transform;
}
/* Voile sombre + vignette pour lisibilité maximale */
.ctcl-museum__bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 30%, rgba(197, 165, 90, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(10, 22, 40, 0.92) 0%, rgba(5, 13, 24, 0.95) 100%);
}
.ctcl-museum__bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}
.ctcl-museum__room-content {
  position: relative;
  z-index: 3;
}

/* Cartouche d'intro (titre + numéro de salle) */
.ctcl-museum__intro {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}
.ctcl-museum__room-num {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(197, 165, 90, 0.35);
  border-radius: 999px;
  background: rgba(10, 22, 40, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--museum-gold);
}
.ctcl-museum__room-num-sep { opacity: 0.5; }
.ctcl-museum__room-titre {
  margin: 1.4rem 0 0.85rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.05;
  color: var(--museum-paper);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ctcl-museum__room-desc {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--museum-text-mute);
  line-height: 1.75;
}

/* ─── STAGE : carte centrale + grille de miniatures ────────────── */
.ctcl-museum__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
  perspective: 1500px;
}

/* CARTE GÉNÉRIQUE : structure 3D (preserve-3d) */
.ctcl-museum__card {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  text-decoration: none;
  color: inherit;
  cursor: zoom-in;
}
.ctcl-museum__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.1rem;
  overflow: hidden;
  background: rgba(5, 13, 24, 0.5);
  border: 1px solid rgba(197, 165, 90, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 60px -28px rgba(0, 0, 0, 0.85);
  transform-style: preserve-3d;
  transition:
    transform 0.6s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.6s cubic-bezier(0.32, 0.72, 0, 1),
    border-color 0.6s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.ctcl-museum__card-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0) scale(1.01);
  transition: transform 1.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.ctcl-museum__card:hover .ctcl-museum__card-inner {
  border-color: rgba(197, 165, 90, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 50px 90px -32px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(197, 165, 90, 0.4),
    0 0 60px -10px rgba(197, 165, 90, 0.3);
}
.ctcl-museum__card:hover .ctcl-museum__card-inner img {
  transform: translateZ(20px) scale(1.06);
}

/* Reflet diagonal qui balaie la carte au hover */
.ctcl-museum__card-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg,
    transparent 35%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
.ctcl-museum__card:hover .ctcl-museum__card-shine { opacity: 1; }

/* HERO (pièce maîtresse) : grand format + breathing au repos */
.ctcl-museum__hero {
  aspect-ratio: 4 / 3;
  animation: museum-breathe 6s ease-in-out infinite;
}

/* MINIATURES : grid + breathing désynchronisé via nth-child delay */
.ctcl-museum__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 0.85rem;
  align-content: start;
  perspective: 1300px;
}
.ctcl-museum__thumb {
  aspect-ratio: 1 / 1;
  animation: museum-breathe 7s ease-in-out infinite;
}
.ctcl-museum__thumb:nth-child(2n)  { animation-delay: -1.2s; }
.ctcl-museum__thumb:nth-child(3n)  { animation-delay: -2.5s; }
.ctcl-museum__thumb:nth-child(4n)  { animation-delay: -3.8s; }
.ctcl-museum__thumb:nth-child(5n)  { animation-delay: -5.1s; }

/* Breathing : très subtil — translate Y de 3px max sur 6-7s */
@keyframes museum-breathe {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -4px, 0); }
}

/* Pause de la respiration au hover (la carte est en main du visiteur) */
.ctcl-museum__hero:hover,
.ctcl-museum__thumb:hover {
  animation-play-state: paused;
}

/* OVERLAY (caption frosted glass type cartel d'exposition) */
.ctcl-museum__card-overlay {
  position: absolute;
  inset: auto 0.85rem 0.85rem;
  z-index: 3;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  background: rgba(10, 22, 40, 0.65);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(197, 165, 90, 0.25);
  color: var(--museum-paper);
  transform: translateY(8px);
  opacity: 0.92;
  transition:
    transform 0.6s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.6s cubic-bezier(0.32, 0.72, 0, 1),
    background 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}
.ctcl-museum__card:hover .ctcl-museum__card-overlay {
  transform: translateY(0);
  opacity: 1;
  background: rgba(10, 22, 40, 0.82);
  border-color: rgba(197, 165, 90, 0.5);
}

.ctcl-museum__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.ctcl-museum__card-tag {
  font-family: "Montserrat", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--museum-gold);
}
.ctcl-museum__card-zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: rgba(197, 165, 90, 0.15);
  color: var(--museum-gold);
  font-size: 0.7rem;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.ctcl-museum__card:hover .ctcl-museum__card-zoom {
  background: var(--museum-gold);
  color: var(--museum-navy-deep);
  transform: rotate(45deg) scale(1.05);
}

.ctcl-museum__card-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--museum-paper);
  letter-spacing: 0;
}
.ctcl-museum__card-sub {
  margin: 0.15rem 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--museum-text-mute);
}

/* Variante miniatures : caption plus compacte (cartouche de musée mini) */
.ctcl-museum__card-overlay--mini {
  inset: auto 0.5rem 0.5rem;
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ctcl-museum__card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(197, 165, 90, 0.18);
  color: var(--museum-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.ctcl-museum__card-name {
  flex: 1;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--museum-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── BLOC PDF FINAL — sur fond cream pour rupture de noir ─────── */
.ctcl-museum__pdf {
  margin: 5rem auto 0;
  max-width: 1080px;
  padding: 0 0 6rem;
  position: relative;
  z-index: 3;
}
.ctcl-museum__pdf-shell {
  padding: 0.5rem;
  border-radius: 2.25rem;
  background: linear-gradient(135deg,
    rgba(197, 165, 90, 0.35),
    rgba(197, 165, 90, 0.15),
    rgba(197, 165, 90, 0.35));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 60px 120px -60px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(197, 165, 90, 0.3);
}
.ctcl-museum__pdf-core {
  padding: clamp(2.25rem, 4vw, 3.75rem);
  background: var(--museum-paper);
  border-radius: calc(2.25rem - 0.5rem);
  text-align: center;
}
.ctcl-museum__pdf-title {
  margin: 1.25rem 0 1rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: var(--ctcl-blue);
  text-wrap: balance;
}
.ctcl-museum__pdf-title em {
  font-style: italic;
  color: var(--museum-gold);
}
.ctcl-museum__pdf-lead {
  margin: 0 auto 2rem;
  max-width: 60ch;
  color: var(--ctcl-muted);
  line-height: 1.75;
}
.ctcl-museum__pdf-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* ─── MOBILE COLLAPSE — single column, sans tilt 3D ────────────── */
@media (max-width: 991.98px) {
  .ctcl-museum__stage { grid-template-columns: 1fr; }
  .ctcl-museum__hero { aspect-ratio: 16 / 10; }
}
@media (max-width: 767.98px) {
  .ctcl-museum__nav { top: 70px; padding: 0.4rem; }
  .ctcl-museum__chip { padding-left: 0.55rem; }
  .ctcl-museum__chip-label { font-size: 0.7rem; }
  .ctcl-museum__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; }
  .ctcl-museum__halo { display: none; }
}

/* ─── REDUCED MOTION : on coupe tous les mouvements ────────────── */
@media (prefers-reduced-motion: reduce) {
  .ctcl-museum__hero,
  .ctcl-museum__thumb,
  .ctcl-museum__card,
  .ctcl-museum__card-inner,
  .ctcl-museum__card-inner img,
  .ctcl-museum__card-overlay,
  .ctcl-museum__card-shine,
  .ctcl-museum__chip {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .ctcl-museum__bg { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   GLIGHTBOX — Override pour rendu cinématique muséal
   (overlay 96%, zoom-in animation, gold accents)
   ═══════════════════════════════════════════════════════════════════ */
.glightbox-clean .gslide-description { background: var(--museum-navy, #0a1628) !important; }
.goverlay { background: rgba(5, 13, 24, 0.96) !important; }
.gbtn.gprev, .gbtn.gnext, .gbtn.gclose {
  background: rgba(197, 165, 90, 0.12) !important;
  border: 1px solid rgba(197, 165, 90, 0.3) !important;
  border-radius: 999px !important;
  color: var(--museum-gold, #C5A55A) !important;
  transition: all 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.gbtn.gprev:hover, .gbtn.gnext:hover, .gbtn.gclose:hover {
  background: var(--museum-gold, #C5A55A) !important;
  color: #0a1628 !important;
  transform: scale(1.06) !important;
}
.gslide-image img {
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(197, 165, 90, 0.25) !important;
  border-radius: 6px;
  animation: museum-lightbox-zoom 0.7s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes museum-lightbox-zoom {
  from { opacity: 0; transform: scale(0.94); filter: blur(10px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
.gslide-title {
  font-family: "Fraunces", Georgia, serif !important;
  color: var(--museum-paper, #F4EFE2) !important;
  letter-spacing: -0.01em;
}
.gslide-desc {
  color: rgba(244, 239, 226, 0.7) !important;
  font-family: "Montserrat", sans-serif !important;
}

@media (max-width: 991.98px) {
  .ctcl-detail-hero__grid {
    grid-template-columns: 1fr;
  }

  .ctcl-periods {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ctcl-timeline::before {
    left: 2.1rem;
  }

  .ctcl-timeline__item {
    grid-template-columns: 4.5rem 1fr;
  }

  .ctcl-timeline__marker {
    grid-column: 1;
  }

  .ctcl-timeline__item:nth-child(odd) .ctcl-timeline__shell,
  .ctcl-timeline__item:nth-child(even) .ctcl-timeline__shell {
    grid-column: 2;
    justify-self: stretch;
  }
}

@media (max-width: 767.98px) {
  .ctcl-hero {
    min-height: 48vh;
  }

  .ctcl-hero__content {
    padding-top: 7rem;
    padding-bottom: 3.5rem;
  }

  .ctcl-hero h1,
  .ctcl-detail-hero__text h1 {
    font-size: 2.35rem;
  }

  .ctcl-intro,
  .ctcl-timeline-section,
  .ctcl-detail-body {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .ctcl-intro__panel h2 {
    font-size: 2rem;
  }

  .ctcl-periods__filters {
    grid-template-columns: 1fr;
  }

  .ctcl-period-filter {
    min-height: auto;
  }

  .ctcl-detail-article {
    padding: 1.35rem;
  }
}

/* =========================================================
   CT / CL > FNFL — page d'entrée + sous-rubriques
   Réutilise les variables --ctcl-* déjà déclarées sur
   .ctcl-page (navy / gold / cream / muted).
   ========================================================= */

/* Hero FNFL : photo centralisée dans /Assets/contenus/images/heros/ */
.ctcl-fnfl-hero {
  background-image: url("../../contenus/images/heros/ctcl-fnfl.jpg");
  background-position: center 38%;
}

.ctcl-fnfl-rubrique-hero {
  background-image: url("../../contenus/images/heros/ctcl-fnfl.jpg");
  background-position: center 30%;
  min-height: 44vh;
}

.ctcl-fnfl-hero .ctcl-hero__veil,
.ctcl-fnfl-rubrique-hero .ctcl-hero__veil {
  background:
    linear-gradient(120deg, rgba(7, 29, 51, 0.94) 0%, rgba(7, 29, 51, 0.78) 38%, rgba(7, 29, 51, 0.42) 100%),
    linear-gradient(180deg, rgba(7, 29, 51, 0.18), rgba(7, 29, 51, 0.74));
}

.ctcl-fnfl-back {
  margin-bottom: 1.25rem;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(7, 29, 51, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.5rem 1rem;
  width: max-content;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.ctcl-fnfl-back:hover {
  background: rgba(7, 29, 51, 0.65);
  border-color: rgba(201, 169, 97, 0.55);
}

/* ---- Page d'entrée FNFL : grille d'ancrage ---- */

.ctcl-fnfl-grid-section {
  padding-top: 4rem;
  padding-bottom: 6rem;
}

.ctcl-fnfl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: stretch;
}

.ctcl-fnfl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 320px;
  padding: 1.8rem 1.7rem 1.6rem;
  color: var(--ctcl-blue);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 244, 234, 0.96));
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 1.1rem;
  box-shadow: 0 22px 50px -34px rgba(10, 37, 64, 0.55);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctcl-fnfl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 169, 97, 0.16), transparent 55%);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.ctcl-fnfl-card:not(.is-locked):hover {
  transform: translateY(-6px);
  border-color: rgba(201, 169, 97, 0.5);
  box-shadow: 0 28px 70px -36px rgba(10, 37, 64, 0.72);
}

.ctcl-fnfl-card:not(.is-locked):hover::before {
  opacity: 1;
}

.ctcl-fnfl-card.is-locked {
  cursor: default;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 232, 220, 0.92));
  border-color: rgba(10, 37, 64, 0.18);
  filter: saturate(0.9);
}

.ctcl-fnfl-card.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(10, 37, 64, 0.04) 0 14px,
      rgba(10, 37, 64, 0) 14px 28px
    );
  pointer-events: none;
}

.ctcl-fnfl-card__num {
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(10, 37, 64, 0.32);
}

.ctcl-fnfl-card__icon {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.2rem;
  color: var(--ctcl-gold);
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid rgba(201, 169, 97, 0.28);
}

.ctcl-fnfl-card__lock,
.ctcl-fnfl-card__pin {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #ffffff;
  background: var(--ctcl-blue);
  box-shadow: 0 8px 18px -10px rgba(10, 37, 64, 0.7);
}

.ctcl-fnfl-card__pin {
  background: var(--ctcl-gold);
  color: var(--ctcl-blue);
}

.ctcl-fnfl-card h3 {
  margin: 0.4rem 0 0;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.18;
}

.ctcl-fnfl-card__sub {
  margin: 0;
  color: var(--ctcl-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ctcl-fnfl-card p {
  margin: 0;
  color: #4b5870;
  font-size: 0.98rem;
  line-height: 1.65;
}

.ctcl-fnfl-card__footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.ctcl-fnfl-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(10, 37, 64, 0.06);
  color: var(--ctcl-blue);
}

.ctcl-fnfl-card__badge--public {
  background: rgba(10, 37, 64, 0.06);
  color: var(--ctcl-blue);
}

.ctcl-fnfl-card__badge--member {
  background: rgba(201, 169, 97, 0.14);
  color: #8a6f2c;
}

.ctcl-fnfl-card.is-locked .ctcl-fnfl-card__badge {
  background: rgba(10, 37, 64, 0.85);
  color: #ffffff;
}

.ctcl-fnfl-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--ctcl-blue);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}

.ctcl-fnfl-card__cta i {
  transition: transform 0.3s ease;
}

.ctcl-fnfl-card:not(.is-locked):hover .ctcl-fnfl-card__cta i {
  transform: translate(2px, -2px);
}

.ctcl-fnfl-card__cta--ghost {
  color: var(--ctcl-blue);
  background: transparent;
  border: 1px solid rgba(10, 37, 64, 0.32);
}

.ctcl-fnfl-card__cta--ghost:hover {
  background: var(--ctcl-blue);
  color: #ffffff;
  border-color: var(--ctcl-blue);
}

/* ---- FNFL one-page : sections ancrées ---- */

.ctcl-fnfl-section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.ctcl-fnfl-section--alt {
  background: rgba(247, 241, 228, 0.55);
  border-top: 1px solid rgba(10, 37, 64, 0.06);
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
}

#fnfl-insignes.ctcl-fnfl-section {
  background:
    radial-gradient(circle at 90% 8%, rgba(201, 169, 97, 0.18), transparent 32%),
    linear-gradient(180deg, #fff7e6 0%, #f6e7c5 100%);
  border-top: 1px solid rgba(201, 169, 97, 0.24);
  border-bottom: 1px solid rgba(201, 169, 97, 0.24);
}

#fnfl-photos.ctcl-fnfl-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(201, 169, 97, 0.16), transparent 34%),
    linear-gradient(180deg, #fffaf0 0%, var(--ctcl-cream, #f7f1e4) 100%);
  border-top: 1px solid rgba(201, 169, 97, 0.22);
  border-bottom: 1px solid rgba(201, 169, 97, 0.22);
}

.ctcl-fnfl-section__header {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.ctcl-fnfl-section__header .ctcl-section-kicker {
  justify-content: center;
}

.ctcl-fnfl-section__header h2 {
  margin: 0.6rem 0 0;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.15;
}

/* Carte d'ancrage : indique au survol qu'on va scroller, pas naviguer */
.ctcl-fnfl-card .ctcl-fnfl-card__cta i {
  transition: transform 0.3s ease;
}

.ctcl-fnfl-card:hover .ctcl-fnfl-card__cta i {
  transform: translateY(3px);
}

/* ---- Ancien wrapper, conservé pour compat (anciennes vues) ---- */
.ctcl-fnfl-body {
  padding-top: 4rem;
  padding-bottom: 5.5rem;
}

/* =========================================================
   FNFL — composants spécifiques par type de contenu
   (Documentation = liste PDF, Insignes = grille mixte,
    Témoignages 4 blocs, Photos = lightbox, Vidéo/Audio = HTML5)
   ========================================================= */

/* ── Empty / "à venir" : pattern commun ── */
.ctcl-doc-coming {
  display: grid;
  gap: 2rem;
}

.ctcl-doc-coming__head {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 234, 0.92));
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
}

.ctcl-doc-coming__head > i {
  font-size: 2.4rem;
  color: var(--ctcl-gold);
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid rgba(201, 169, 97, 0.3);
  margin-bottom: 0.8rem;
}

.ctcl-doc-coming__head h3 {
  margin: 0.3rem 0 0.6rem;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
}

.ctcl-doc-coming__head p {
  margin: 0 0 1rem;
  color: #4b5870;
  line-height: 1.7;
}

/* ── Documentation : liste vraie ── */
.ctcl-doc-list {
  display: grid;
  gap: 0.8rem;
  max-width: 940px;
  margin: 0 auto;
}

.ctcl-doc-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.1rem 1.3rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 0.95rem;
  box-shadow: 0 18px 50px -42px rgba(10, 37, 64, 0.45);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.ctcl-doc-item:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 169, 97, 0.45);
  box-shadow: 0 24px 60px -36px rgba(10, 37, 64, 0.55);
}

.ctcl-doc-item__icon {
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: rgba(201, 169, 97, 0.14);
  color: var(--ctcl-gold);
  font-size: 1.25rem;
}

.ctcl-doc-item__year {
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ctcl-gold);
}

.ctcl-doc-item__body h3 {
  margin: 0.2rem 0 0.3rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  color: var(--ctcl-blue);
}

.ctcl-doc-item__body p {
  margin: 0;
  color: #4b5870;
  font-size: 0.95rem;
  line-height: 1.55;
}

.ctcl-doc-item__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.55rem 0.55rem 0.95rem;
  background: var(--ctcl-blue);
  color: #ffffff;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s ease;
}

.ctcl-doc-item__cta:hover {
  background: var(--ctcl-gold);
  color: var(--ctcl-blue);
}

.ctcl-doc-item__cta-icon {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctcl-doc-item:hover .ctcl-doc-item__cta-icon {
  transform: translate(2px, -2px);
}

/* ── Insignes : grille réelle ── */
.ctcl-insignes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
}

.ctcl-insigne-card {
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}

.ctcl-insigne-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px -36px rgba(10, 37, 64, 0.6);
}

.ctcl-insigne-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f7f1e4;
}

.ctcl-insigne-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctcl-insigne-card:hover .ctcl-insigne-card__media img {
  transform: scale(1.05);
}

.ctcl-insigne-card__media--ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10, 37, 64, 0.18);
  font-size: 2.2rem;
}

.ctcl-insigne-card__body {
  padding: 1rem 1.1rem 1.2rem;
}

.ctcl-insigne-card__body h3 {
  margin: 0 0 0.35rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem;
  color: var(--ctcl-blue);
}

.ctcl-insigne-card__body p {
  margin: 0 0 0.6rem;
  color: #4b5870;
  font-size: 0.92rem;
  line-height: 1.55;
}

.ctcl-mini-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ctcl-blue);
  text-decoration: none;
}

.ctcl-mini-link i {
  color: var(--ctcl-gold);
}

.ctcl-mini-link:hover {
  color: var(--ctcl-gold);
}

/* ── FNFL : cabinet des insignes ───────────────────────────────────── */
.ctcl-fnfl-insignes-showcase {
  --fnfl-ins-cream: #f7e8c7;
  --fnfl-ins-paper: #fffaf0;
  --fnfl-ins-navy: #071d33;
  --fnfl-ins-ink: #172337;
  --fnfl-ins-muted: #5d6979;
  --fnfl-ins-gold: #b89548;
  --fnfl-ins-gold-soft: #c9a961;

  position: relative;
  margin-top: 1rem;
  padding: clamp(2.2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  color: var(--fnfl-ins-ink);
  background:
    radial-gradient(circle at 16% 12%, rgba(184, 149, 72, 0.16), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(201, 169, 97, 0.18), transparent 38%),
    linear-gradient(180deg, var(--fnfl-ins-paper), var(--fnfl-ins-cream));
  border-top: 1px solid rgba(184, 149, 72, 0.22);
  border-bottom: 1px solid rgba(184, 149, 72, 0.22);
  overflow: hidden;
}

.ctcl-fnfl-insignes-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 29, 51, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(7, 29, 51, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  opacity: 0.55;
}

.ctcl-fnfl-insignes-showcase > * {
  position: relative;
  z-index: 1;
}

.ctcl-fnfl-insignes-showcase__intro {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.ctcl-fnfl-insignes-showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--fnfl-ins-gold);
}

.ctcl-fnfl-insignes-showcase__intro h3,
.ctcl-fnfl-insigne-featured__body h4,
.ctcl-fnfl-insigne-vitrine-card__body h4 {
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  color: var(--fnfl-ins-navy);
  letter-spacing: 0;
}

.ctcl-fnfl-insignes-showcase__intro h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 650;
  line-height: 1.05;
}

.ctcl-fnfl-insignes-showcase__intro h3 em {
  color: var(--fnfl-ins-gold);
  font-style: italic;
}

.ctcl-fnfl-insignes-showcase__intro p {
  max-width: 64ch;
  margin: 0 auto;
  color: var(--fnfl-ins-muted);
  line-height: 1.75;
}

.ctcl-fnfl-insigne-featured {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto clamp(2rem, 5vw, 3.2rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: rgba(253, 248, 235, 0.72);
  border: 1px solid rgba(184, 149, 72, 0.28);
  border-radius: 8px;
  box-shadow: 0 28px 60px -42px rgba(7, 29, 51, 0.45);
}

.ctcl-fnfl-insigne-featured__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  text-decoration: none;
  perspective: 1200px;
}

.ctcl-fnfl-insigne-featured__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.34), transparent 66%);
  filter: blur(18px);
  opacity: 0.78;
}

.ctcl-fnfl-insigne-featured__frame,
.ctcl-fnfl-insigne-vitrine-card__plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 241, 228, 0.9));
  border: 1px solid rgba(184, 149, 72, 0.34);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 24px 48px -34px rgba(7, 29, 51, 0.62);
  overflow: hidden;
}

.ctcl-fnfl-insigne-featured__frame img,
.ctcl-fnfl-insigne-vitrine-card__plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(0.9rem, 3vw, 1.6rem);
  transition:
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 620ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.ctcl-fnfl-insigne-featured__media:hover .ctcl-fnfl-insigne-featured__frame img,
.ctcl-fnfl-insigne-vitrine-card:hover .ctcl-fnfl-insigne-vitrine-card__plate img {
  transform: scale(1.045);
  filter: contrast(1.06) saturate(1.03);
}

.ctcl-fnfl-insigne-featured__zoom {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fnfl-ins-navy);
  background: var(--fnfl-ins-gold-soft);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 360ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ctcl-fnfl-insigne-featured__media:hover .ctcl-fnfl-insigne-featured__zoom,
.ctcl-fnfl-insigne-featured__media:focus-visible .ctcl-fnfl-insigne-featured__zoom {
  opacity: 1;
  transform: translateY(0);
}

.ctcl-fnfl-insigne-featured__body {
  min-width: 0;
}

.ctcl-fnfl-insigne-featured__kicker,
.ctcl-fnfl-insigne-featured__source,
.ctcl-fnfl-insigne-vitrine-card__body > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  color: var(--fnfl-ins-gold);
}

.ctcl-fnfl-insigne-featured__body h4 {
  margin: 0.55rem 0 0.9rem;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.08;
}

.ctcl-fnfl-insigne-featured__body p {
  margin: 0 0 1rem;
  color: var(--fnfl-ins-muted);
  font-size: 1rem;
  line-height: 1.78;
}

.ctcl-fnfl-insigne-featured__source {
  color: var(--fnfl-ins-navy);
  background: rgba(184, 149, 72, 0.12);
  border: 1px solid rgba(184, 149, 72, 0.28);
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
}

.ctcl-fnfl-insignes-vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(245px, 100%), 1fr));
  gap: clamp(1rem, 2.4vw, 1.45rem);
  max-width: 1180px;
  margin: 0 auto;
}

.ctcl-fnfl-insigne-vitrine-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(253, 248, 235, 0.78);
  border: 1px solid rgba(184, 149, 72, 0.24);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 42px -36px rgba(7, 29, 51, 0.5);
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: ctcl-fnfl-insigne-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--insigne-delay, 0ms);
}

@keyframes ctcl-fnfl-insigne-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.ctcl-fnfl-insigne-vitrine-card:hover {
  transform: translateY(-5px);
  border-color: rgba(184, 149, 72, 0.55);
  box-shadow: 0 30px 58px -34px rgba(7, 29, 51, 0.55);
}

.ctcl-fnfl-insigne-vitrine-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  padding: 0.75rem;
  text-decoration: none;
  background:
    radial-gradient(circle at 50% 28%, rgba(201, 169, 97, 0.12), transparent 48%),
    rgba(7, 29, 51, 0.04);
  overflow: hidden;
}

.ctcl-fnfl-insigne-vitrine-card__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.42) 50%, transparent 66%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    background-position 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ctcl-fnfl-insigne-vitrine-card:hover .ctcl-fnfl-insigne-vitrine-card__shine {
  opacity: 1;
  background-position: 0 0;
}

.ctcl-fnfl-insigne-vitrine-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.05rem 1.15rem;
}

.ctcl-fnfl-insigne-vitrine-card__body h4 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.16;
}

.ctcl-fnfl-insigne-vitrine-card__body p {
  margin: 0;
  color: var(--fnfl-ins-muted);
  font-size: 0.92rem;
  line-height: 1.62;
}

.ctcl-fnfl-insigne-featured__media:focus-visible,
.ctcl-fnfl-insigne-vitrine-card__media:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.72);
  outline-offset: 4px;
}

@media (max-width: 767.98px) {
  .ctcl-fnfl-insignes-showcase {
    padding-inline: 0.85rem;
  }

  .ctcl-fnfl-insigne-featured {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .ctcl-fnfl-insigne-featured__media {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctcl-fnfl-insigne-featured__frame img,
  .ctcl-fnfl-insigne-featured__zoom,
  .ctcl-fnfl-insigne-vitrine-card,
  .ctcl-fnfl-insigne-vitrine-card__plate img,
  .ctcl-fnfl-insigne-vitrine-card__shine {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Témoignages / Poèmes / Chansons / Livres : 4 blocs ── */
.ctcl-tpc-blocs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.ctcl-tpc-bloc {
  padding: 1.6rem 1.6rem 1.4rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
}

.ctcl-tpc-bloc__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(10, 37, 64, 0.08);
}

.ctcl-tpc-bloc__icon {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.14);
  color: var(--ctcl-gold);
  font-size: 1.1rem;
}

.ctcl-tpc-bloc__head h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem;
  color: var(--ctcl-blue);
}

.ctcl-tpc-bloc__fmt {
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ctcl-gold);
}

.ctcl-tpc-bloc__empty {
  text-align: center;
  padding: 1.2rem 0.6rem;
  color: #4b5870;
}

.ctcl-tpc-bloc__empty p {
  margin: 0 0 0.7rem;
  font-style: italic;
}

.ctcl-tpc-bloc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.ctcl-tpc-item {
  padding: 0.9rem 1rem;
  background: rgba(247, 241, 228, 0.55);
  border-left: 3px solid var(--ctcl-gold);
  border-radius: 0.7rem;
}

.ctcl-tpc-item h4 {
  margin: 0 0 0.4rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: var(--ctcl-blue);
}

.ctcl-tpc-item__lead {
  margin: 0 0 0.5rem;
  font-style: italic;
  color: var(--ctcl-blue);
  line-height: 1.6;
}

.ctcl-tpc-item__body {
  color: #40516a;
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 0.6rem;
}

/* ── Témoignages / Chansons : sections enrichies ── */
.ctcl-tpc-section {
  margin-bottom: 2.6rem;
}

.ctcl-tpc-section__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(10, 37, 64, 0.1);
}

.ctcl-tpc-section__icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.22), rgba(201, 169, 97, 0.08));
  color: var(--ctcl-gold);
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.3);
}

.ctcl-tpc-section__title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.7rem;
  color: var(--ctcl-blue);
}

.ctcl-tpc-section__fmt {
  display: inline-block;
  margin-top: 0.2rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ctcl-gold);
}

/* ── Grille des cartes témoignages ── */
.ctcl-tpc-temoignages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.ctcl-tpc-temoignage-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  animation: tpcCardIn 0.7s var(--tpc-delay, 0ms) backwards ease;
}

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

.ctcl-tpc-temoignage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 72px -36px rgba(10, 37, 64, 0.55);
}

.ctcl-tpc-temoignage-card__media {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--ctcl-blue), #14365f);
}

.ctcl-tpc-temoignage-card__frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ctcl-tpc-temoignage-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ctcl-tpc-temoignage-card:hover .ctcl-tpc-temoignage-card__frame img {
  transform: scale(1.06);
}

.ctcl-tpc-temoignage-card__initials {
  font-family: "Fraunces", Georgia, serif;
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(201, 169, 97, 0.85);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.ctcl-tpc-temoignage-card.is-no-portrait .ctcl-tpc-temoignage-card__media {
  background:
    radial-gradient(circle at 30% 30%, rgba(201, 169, 97, 0.18), transparent 60%),
    linear-gradient(135deg, var(--ctcl-blue), #0a2540);
}

.ctcl-tpc-temoignage-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 37, 64, 0.55));
  opacity: 0.7;
  transition: opacity 0.35s ease;
}

.ctcl-tpc-temoignage-card:hover .ctcl-tpc-temoignage-card__overlay {
  opacity: 1;
}

.ctcl-tpc-temoignage-card__badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ctcl-blue);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4);
}

.ctcl-tpc-temoignage-card__badge i {
  color: #c0392b;
}

.ctcl-tpc-temoignage-card__body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-grow: 1;
}

.ctcl-tpc-temoignage-card__kicker {
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ctcl-gold);
}

.ctcl-tpc-temoignage-card__title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ctcl-blue);
}

.ctcl-tpc-temoignage-card__author {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #40516a;
}

.ctcl-tpc-temoignage-card__author i {
  color: var(--ctcl-gold);
}

.ctcl-tpc-temoignage-card__desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #4b5870;
  flex-grow: 1;
}

.ctcl-tpc-temoignage-card__cta {
  margin-top: 0.4rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: var(--ctcl-blue);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}

.ctcl-tpc-temoignage-card__cta:hover {
  background: var(--ctcl-gold);
  color: var(--ctcl-blue);
  transform: translateX(2px);
}

.ctcl-tpc-card-actions {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ctcl-tpc-card-actions .ctcl-tpc-temoignage-card__cta,
.ctcl-tpc-card-actions .ctcl-tpc-chanson-card__cta,
.ctcl-tpc-card-actions .ctcl-tpc-livre-card__cta {
  margin-top: 0;
}

.ctcl-tpc-temoignage-card__cta--secondary {
  background: transparent;
  border: 1px solid rgba(10, 37, 64, 0.28);
  color: var(--ctcl-blue);
}

.ctcl-tpc-temoignage-card__cta--secondary:hover {
  background: var(--ctcl-blue);
  color: #ffffff;
}

/* ── Archives photographiques en bas du bloc témoignages ── */
.ctcl-tpc-archives {
  margin-top: 2rem;
  padding: 1.4rem 1.5rem;
  background: rgba(247, 241, 228, 0.6);
  border: 1px dashed rgba(201, 169, 97, 0.4);
  border-radius: 1rem;
}

.ctcl-tpc-archives__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ctcl-blue);
  margin-bottom: 1rem;
}

.ctcl-tpc-archives__label i {
  color: var(--ctcl-gold);
}

.ctcl-tpc-archives__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.ctcl-tpc-archives__item {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 0.7rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ctcl-tpc-archives__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -22px rgba(10, 37, 64, 0.45);
}

.ctcl-tpc-archives__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.ctcl-tpc-archives__item figcaption {
  padding: 0.55rem 0.8rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  color: var(--ctcl-blue);
  border-top: 1px solid rgba(10, 37, 64, 0.06);
}

/* ── Grille des cartes chansons ── */
.ctcl-tpc-chansons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

.ctcl-tpc-chanson-card {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  gap: 1.4rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  padding: 1.2rem;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  animation: tpcCardIn 0.7s var(--tpc-delay, 0ms) backwards ease;
}

.ctcl-tpc-chanson-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 72px -36px rgba(10, 37, 64, 0.55);
}

.ctcl-tpc-chanson-card__media {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 0.6rem;
  overflow: hidden;
  background: #f7f1e4;
  aspect-ratio: 3 / 4;
}

.ctcl-tpc-chanson-card__sheet {
  position: absolute;
  inset: 0;
  display: block;
}

.ctcl-tpc-chanson-card__sheet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ctcl-tpc-chanson-card:hover .ctcl-tpc-chanson-card__sheet img {
  transform: scale(1.04);
}

.ctcl-tpc-chanson-card__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 37, 64, 0.4);
  color: #ffffff;
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ctcl-tpc-chanson-card__media:hover .ctcl-tpc-chanson-card__zoom,
.ctcl-tpc-chanson-card__media:focus-visible .ctcl-tpc-chanson-card__zoom {
  opacity: 1;
}

.ctcl-tpc-chanson-card__pages {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  background: rgba(10, 37, 64, 0.85);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffffff;
}

.ctcl-tpc-chanson-card__extra {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ctcl-tpc-chanson-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  justify-content: center;
}

.ctcl-tpc-chanson-card__kicker {
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ctcl-gold);
}

.ctcl-tpc-chanson-card__title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ctcl-blue);
}

.ctcl-tpc-chanson-card__author {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #40516a;
}

.ctcl-tpc-chanson-card__author i {
  color: var(--ctcl-gold);
}

.ctcl-tpc-chanson-card__desc {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.65;
  color: #4b5870;
}

.ctcl-tpc-chanson-card__cta {
  margin-top: 0.6rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: var(--ctcl-gold);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ctcl-blue);
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.ctcl-tpc-chanson-card__cta:hover {
  background: var(--ctcl-blue);
  color: #ffffff;
  transform: translateX(2px);
}

.ctcl-tpc-chanson-card__cta--secondary {
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.55);
  color: var(--ctcl-blue);
}

.ctcl-tpc-chanson-card__cta--secondary:hover {
  background: var(--ctcl-blue);
  color: #ffffff;
}

/* ── Cartes LIVRES (mémoires FNFL — pleine fiche) ── */
.ctcl-tpc-livre-card {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 2rem;
  background: linear-gradient(135deg, #ffffff 0%, rgba(247, 241, 228, 0.4) 100%);
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-left: 4px solid var(--ctcl-gold);
  border-radius: 1rem;
  padding: 1.8rem;
  box-shadow: 0 28px 68px -42px rgba(10, 37, 64, 0.5);
  animation: tpcCardIn 0.7s var(--tpc-delay, 0ms) backwards ease;
}

.ctcl-tpc-livre-card__media {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 0.75rem;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--ctcl-blue), #14365f);
  box-shadow: 0 18px 40px -22px rgba(10, 37, 64, 0.6);
  transition: transform 0.4s ease;
}

.ctcl-tpc-livre-card__media:hover {
  transform: translateY(-3px);
}

.ctcl-tpc-livre-card__cover {
  position: absolute;
  inset: 0;
  display: block;
}

.ctcl-tpc-livre-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ctcl-tpc-livre-card__media:hover .ctcl-tpc-livre-card__cover img {
  transform: scale(1.05);
}

.ctcl-tpc-livre-card__badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ctcl-blue);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4);
}

.ctcl-tpc-livre-card__badge i {
  color: #c0392b;
}

.ctcl-tpc-livre-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  justify-content: center;
}

.ctcl-tpc-livre-card__kicker {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ctcl-gold);
}

.ctcl-tpc-livre-card__title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--ctcl-blue);
}

.ctcl-tpc-livre-card__subtitle {
  margin: -0.2rem 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: rgba(10, 37, 64, 0.7);
}

.ctcl-tpc-livre-card__author {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #40516a;
}

.ctcl-tpc-livre-card__author i {
  color: var(--ctcl-gold);
}

.ctcl-tpc-livre-card__desc {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: #4b5870;
}

.ctcl-tpc-livre-card__cta {
  margin-top: 0.6rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.3rem;
  background: var(--ctcl-blue);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.ctcl-tpc-livre-card__cta:hover {
  background: var(--ctcl-gold);
  color: var(--ctcl-blue);
  transform: translateX(3px);
}

.ctcl-tpc-livre-card__cta--secondary {
  background: transparent;
  border: 1px solid rgba(10, 37, 64, 0.28);
  color: var(--ctcl-blue);
}

.ctcl-tpc-livre-card__cta--secondary:hover {
  background: var(--ctcl-gold);
  color: var(--ctcl-blue);
}

/* ── Responsive : témoignages + chansons + livres ── */
@media (max-width: 1199.98px) {
  .ctcl-tpc-temoignages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .ctcl-tpc-temoignages-grid,
  .ctcl-tpc-chansons-grid {
    grid-template-columns: 1fr;
  }

  .ctcl-tpc-chanson-card,
  .ctcl-tpc-livre-card {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.3rem;
  }

  .ctcl-tpc-chanson-card__media,
  .ctcl-tpc-livre-card__media {
    max-width: 240px;
    margin: 0 auto;
  }

  .ctcl-tpc-livre-card__title {
    font-size: 1.3rem;
  }

  .ctcl-tpc-section__title {
    font-size: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctcl-tpc-temoignage-card,
  .ctcl-tpc-chanson-card,
  .ctcl-tpc-temoignage-card__frame img,
  .ctcl-tpc-chanson-card__sheet img,
  .ctcl-tpc-temoignage-card__overlay,
  .ctcl-tpc-chanson-card__zoom {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Audio HTML5 stylé ── */
.ctcl-audio {
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 999px;
}

audio.ctcl-audio::-webkit-media-controls-panel {
  background-color: rgba(247, 241, 228, 0.85);
}

/* La galerie photos passe en lien (lightbox) — ajustement caption */
a.ctcl-fnfl-gallery__item {
  display: block;
  text-decoration: none;
}

a.ctcl-fnfl-gallery__item figcaption {
  padding: 0.7rem 0.9rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  color: var(--ctcl-blue);
  background: #ffffff;
  border-top: 1px solid rgba(10, 37, 64, 0.08);
}

/* ── Vidéos / Audio : grille players ── */
.ctcl-media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.ctcl-media-card {
  padding: 1.4rem 1.4rem 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
}

.ctcl-media-card h3 {
  margin: 0 0 0.5rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  color: var(--ctcl-blue);
}

.ctcl-media-card p {
  margin: 0 0 0.9rem;
  color: #2d4058;
  line-height: 1.7;
}

.ctcl-media-card__player {
  width: 100%;
  border-radius: 0.7rem;
  background: #000;
  display: block;
}

/* Image dans un encart Vidéos/Audio : couverture cliquable (lightbox). */
.ctcl-media-card__image {
  display: block;
  border-radius: 0.7rem;
  overflow: hidden;
}

.ctcl-media-card__image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.ctcl-media-card__image:hover img {
  transform: scale(1.03);
}

/* Document (PDF, Word…) dans un encart : consulter / télécharger. */
.ctcl-fnfl-media-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .ctcl-tpc-blocs,
  .ctcl-media-grid {
    grid-template-columns: 1fr;
  }

  .ctcl-doc-item {
    grid-template-columns: auto 1fr;
  }

  .ctcl-doc-item__cta {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* Documentation / Insignes : grille d'articles avec image */
.ctcl-fnfl-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.ctcl-fnfl-article {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) 1.1fr;
  gap: 1.5rem;
  padding: 1.6rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -42px rgba(10, 37, 64, 0.55);
}

.ctcl-fnfl-article__media {
  margin: 0;
  overflow: hidden;
  border-radius: 0.85rem;
}

.ctcl-fnfl-article__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctcl-fnfl-article:hover .ctcl-fnfl-article__media img {
  transform: scale(1.04);
}

.ctcl-fnfl-article__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ctcl-fnfl-article__year {
  display: inline-flex;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ctcl-gold);
}

.ctcl-fnfl-article__body h3 {
  margin: 0;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
  line-height: 1.18;
}

.ctcl-fnfl-article__lead {
  margin: 0;
  color: var(--ctcl-blue);
  font-size: 1.03rem;
  line-height: 1.7;
  font-weight: 500;
}

.ctcl-fnfl-article__text {
  color: #40516a;
  font-size: 0.98rem;
  line-height: 1.8;
}

/* Documents PDF supplémentaires */
.ctcl-fnfl-docs {
  margin-top: 2rem;
  padding: 1.5rem 1.7rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  box-shadow: 0 18px 50px -42px rgba(10, 37, 64, 0.5);
}

.ctcl-fnfl-docs__title {
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem;
}

.ctcl-fnfl-docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.ctcl-fnfl-docs__list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: rgba(247, 241, 228, 0.7);
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 0.7rem;
  color: #40516a;
}

.ctcl-fnfl-docs__list li > i {
  color: var(--ctcl-gold);
  font-size: 1.15rem;
}

.ctcl-fnfl-docs__list li > span {
  flex: 1;
}

.ctcl-fnfl-docs__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ctcl-blue);
  text-decoration: none;
}

.ctcl-fnfl-docs__list a:hover {
  color: var(--ctcl-gold);
}

/* Témoignages / Poèmes / Chansons */
.ctcl-fnfl-stories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.ctcl-fnfl-story {
  position: relative;
  padding: 1.7rem 1.6rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-left: 3px solid var(--ctcl-gold);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -42px rgba(10, 37, 64, 0.55);
}

.ctcl-fnfl-story__head {
  margin-bottom: 1rem;
}

.ctcl-fnfl-story__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ctcl-gold);
}

.ctcl-fnfl-story__head h3 {
  margin: 0;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.2;
}

.ctcl-fnfl-story__lead {
  margin: 0 0 0.75rem;
  color: var(--ctcl-blue);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
}

.ctcl-fnfl-story__body {
  color: #40516a;
  font-size: 0.98rem;
  line-height: 1.85;
}

/* Galerie photos (membre) */
.ctcl-fnfl-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.ctcl-fnfl-gallery__item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 0.9rem;
  border: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.55);
  background: #ffffff;
}

#fnfl-photos .ctcl-fnfl-gallery__item {
  background: #fffaf0;
  border-color: rgba(201, 169, 97, 0.28);
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.65);
}

.ctcl-fnfl-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctcl-fnfl-gallery__item:hover img {
  transform: scale(1.05);
}

.ctcl-fnfl-gallery__item figcaption {
  padding: 0.7rem 0.9rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  color: var(--ctcl-blue);
  background: #ffffff;
  border-top: 1px solid rgba(10, 37, 64, 0.08);
}

#fnfl-photos .ctcl-fnfl-gallery__item figcaption,
#fnfl-photos a.ctcl-fnfl-gallery__item figcaption {
  background: #fffaf0;
  border-top-color: rgba(201, 169, 97, 0.22);
}

/* ─── Photos FNFL : groupes thématiques (membre) ─── */
.ctcl-fnfl-photo-group {
  margin-bottom: 2.5rem;
}
.ctcl-fnfl-photo-group:last-child { margin-bottom: 0; }

.ctcl-fnfl-photo-group__head {
  margin-bottom: 1.2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--ctcl-gold, #c9a34a);
}
.ctcl-fnfl-photo-group__head h3 {
  margin: 0 0 .35rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem;
  color: var(--ctcl-blue);
}
.ctcl-fnfl-photo-group__head p {
  margin: 0 0 .55rem;
  color: #40516a;
  line-height: 1.65;
  max-width: 70ch;
}
.ctcl-fnfl-photo-group__count {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: "Montserrat", sans-serif;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--ctcl-gold, #c9a34a);
}

/* ─── Vidéos / Audio FNFL : blocs structurés (membre) ─── */
.ctcl-fnfl-media-block {
  margin-bottom: 2.5rem;
}
.ctcl-fnfl-media-block:last-child { margin-bottom: 0; }

.ctcl-fnfl-media-block__head {
  margin-bottom: 1.1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--ctcl-gold, #c9a34a);
}
.ctcl-fnfl-media-block__kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: "Montserrat", sans-serif;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--ctcl-gold, #c9a34a);
  margin-bottom: .35rem;
}
.ctcl-fnfl-media-block__head h3 {
  margin: 0 0 .35rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem;
  color: var(--ctcl-blue);
}
.ctcl-fnfl-media-block__head p {
  margin: 0;
  color: #40516a;
  line-height: 1.65;
  max-width: 70ch;
}

/* Liste audio — cartes horizontales avec icône + player */
.ctcl-fnfl-audio-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.ctcl-fnfl-audio-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.1rem;
  padding: 1.2rem 1.4rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
}
.ctcl-fnfl-audio-card__icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,163,74,.15), rgba(201,163,74,.05));
  color: var(--ctcl-gold, #c9a34a);
  font-size: 1.8rem;
}
.ctcl-fnfl-audio-card__body { display: flex; flex-direction: column; gap: .35rem; }
.ctcl-fnfl-audio-card__author {
  font-family: "Montserrat", sans-serif;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600;
  color: var(--ctcl-gold, #c9a34a);
}
.ctcl-fnfl-audio-card h4 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem;
  color: var(--ctcl-blue);
}
.ctcl-fnfl-audio-card p {
  margin: 0 0 .35rem;
  color: #40516a;
  line-height: 1.6;
  font-size: .95rem;
}
.ctcl-fnfl-audio-card__player {
  width: 100%;
  margin-top: .35rem;
}

/* Archives sonores brutes (.aup3 etc.) */
.ctcl-fnfl-media-block--archives .ctcl-fnfl-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .8rem;
}
.ctcl-fnfl-archive-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: #fbfaf6;
  border: 1px dashed rgba(10, 37, 64, 0.18);
  border-radius: .8rem;
}
.ctcl-fnfl-archive-item h4 {
  margin: 0 0 .25rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: var(--ctcl-blue);
}
.ctcl-fnfl-archive-item p {
  margin: 0;
  color: #52606d;
  font-size: .9rem;
  line-height: 1.55;
}
.ctcl-fnfl-archive-item__author {
  font-family: "Montserrat", sans-serif;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600;
  color: var(--ctcl-gold, #c9a34a);
  display: block;
  margin-bottom: .2rem;
}
.ctcl-fnfl-archive-item__dl {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem;
  background: var(--ctcl-blue, #0c2340);
  color: #fff;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s, transform .25s;
}
.ctcl-fnfl-archive-item__dl:hover {
  background: var(--ctcl-gold, #c9a34a);
  transform: translateY(-1px);
  color: #fff;
}

@media (max-width: 575.98px) {
  .ctcl-fnfl-audio-card { grid-template-columns: 1fr; }
  .ctcl-fnfl-audio-card__icon { width: 56px; height: 56px; font-size: 1.5rem; }
  .ctcl-fnfl-archive-item { flex-direction: column; align-items: flex-start; }
  .ctcl-fnfl-archive-item__dl { align-self: stretch; justify-content: center; }
}

/* Médias vidéo / audio (membre) */
.ctcl-fnfl-medias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.ctcl-fnfl-media-card {
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.55);
}

.ctcl-fnfl-media-card h3 {
  margin: 0 0 0.6rem;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
}

.ctcl-fnfl-media-card p {
  margin: 0 0 1rem;
  color: #40516a;
  line-height: 1.7;
}

.ctcl-fnfl-media-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  background: var(--ctcl-blue);
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.ctcl-fnfl-media-card__link:hover {
  background: var(--ctcl-gold);
  color: var(--ctcl-blue);
}

/* ---- Responsive FNFL ---- */
@media (max-width: 991.98px) {
  .ctcl-fnfl-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ctcl-fnfl-article {
    grid-template-columns: 1fr;
  }

  .ctcl-fnfl-stories,
  .ctcl-fnfl-medias {
    grid-template-columns: 1fr;
  }

  .ctcl-fnfl-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .ctcl-fnfl-grid {
    grid-template-columns: 1fr;
  }

  .ctcl-fnfl-card {
    min-height: auto;
    padding: 1.5rem 1.3rem;
  }

  .ctcl-fnfl-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    top: 1.1rem;
    right: 1.1rem;
  }

  .ctcl-fnfl-gallery {
    grid-template-columns: 1fr;
  }

  .ctcl-fnfl-body {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
}

/* =========================================================
   Sous-menu imbriqué (3e niveau) : CT/CL > FNFL > items
   On override le défaut left:-100% du thème pour un flyout
   plus conventionnel : sous-menu qui sort à droite du parent.
   ========================================================= */
@media (min-width: 1200px) {
  .navmenu .dropdown .dropdown > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navmenu .dropdown .dropdown > a .toggle-dropdown {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
  }

  .navmenu .dropdown .dropdown:hover > a .toggle-dropdown {
    transform: translateX(2px);
  }

  /* Position au repos : sous-menu masqué, calé sur le parent */
  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: 100%;
    margin-left: 4px;
    visibility: hidden;
    opacity: 0;
  }

  /* Au survol : sous-menu visible à droite du parent */
  .navmenu .dropdown .dropdown:hover > ul {
    top: 0;
    left: 100%;
    visibility: visible;
    opacity: 1;
  }

  /* Indication discrète : barre dorée à gauche du sous-menu pour
     bien distinguer le 3e niveau des items du 2e niveau. */
  .navmenu .dropdown .dropdown ul {
    border-left: 2px solid rgba(201, 169, 97, 0.55);
  }

  /* Petit cadenas inline dans les items membre (Photos, Vidéos/Audio) */
  .navmenu .dropdown .dropdown ul a .bi-lock-fill {
    color: rgba(201, 169, 97, 0.85);
    font-size: 0.78rem;
  }
}

/* Mobile : on aplatit le 3e niveau dans la liste verticale */
@media (max-width: 1199.98px) {
  .navmenu .dropdown .dropdown > ul {
    padding-left: 1rem;
    border-left: 2px solid rgba(201, 169, 97, 0.4);
  }

  .navmenu .dropdown .dropdown ul a .bi-lock-fill {
    color: rgba(201, 169, 97, 0.9);
    font-size: 0.8rem;
  }
}

/* =========================================================
   CT / CL > Indochine — page de mémoire collective
   Réutilise les variables --ctcl-* déclarées sur .ctcl-page.
   ========================================================= */

/* Hero : photo centralisée dans /Assets/contenus/images/heros/ */
.ctcl-indochine-hero {
  background-image: url("../../contenus/images/heros/ctcl-indochine.jpg");
  background-position: center 38%;
}

.ctcl-indochine-hero .ctcl-hero__veil {
  background:
    linear-gradient(120deg, rgba(7, 29, 51, 0.94) 0%, rgba(7, 29, 51, 0.78) 38%, rgba(7, 29, 51, 0.42) 100%),
    linear-gradient(180deg, rgba(7, 29, 51, 0.18), rgba(7, 29, 51, 0.74));
}

/* ---- Sections génériques ---- */
.ctcl-indochine-section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.ctcl-indochine-section--alt {
  background: rgba(247, 241, 228, 0.55);
  border-top: 1px solid rgba(10, 37, 64, 0.06);
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
}

.ctcl-indochine-section__header {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.ctcl-indochine-section__title {
  margin: 0.6rem 0 1rem;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.15;
}

.ctcl-indochine-section__lead {
  color: var(--ctcl-blue);
  font-size: 1.08rem;
  line-height: 1.7;
  font-weight: 500;
}

.ctcl-indochine-section p {
  color: #40516a;
  line-height: 1.8;
}

.ctcl-indochine-section__media {
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow: 0 22px 60px -42px rgba(10, 37, 64, 0.55);
}

.ctcl-indochine-section__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctcl-indochine-section__media:hover img {
  transform: scale(1.04);
}

/* ---- 3 cartes "feature" pour Rôle des marins ---- */
.ctcl-indochine-feature {
  height: 100%;
  padding: 1.7rem 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

.ctcl-indochine-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 97, 0.45);
  box-shadow: 0 28px 70px -36px rgba(10, 37, 64, 0.65);
}

.ctcl-indochine-feature__icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid rgba(201, 169, 97, 0.32);
  color: var(--ctcl-gold);
  font-size: 1.2rem;
}

.ctcl-indochine-feature h3 {
  margin: 0 0 0.7rem;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem;
}

.ctcl-indochine-feature p {
  margin: 0;
  color: #40516a;
  font-size: 0.97rem;
  line-height: 1.7;
}

/* ---- Galerie photo ---- */
.ctcl-indochine-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: 0.9rem;
  border: 1px solid rgba(10, 37, 64, 0.1);
  background: #ffffff;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.55);
}

.ctcl-indochine-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctcl-indochine-gallery__item:hover img {
  transform: scale(1.05);
}

.ctcl-indochine-gallery__item figcaption {
  padding: 0.7rem 0.95rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  color: var(--ctcl-blue);
  background: #ffffff;
  border-top: 1px solid rgba(10, 37, 64, 0.08);
}

/* ---- Documents associés ---- */
.ctcl-indochine-doc {
  display: flex;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
}

.ctcl-indochine-doc__icon {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.14);
  color: var(--ctcl-gold);
  font-size: 1.3rem;
}

.ctcl-indochine-doc__body h3 {
  margin: 0 0 0.4rem;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.2rem;
}

.ctcl-indochine-doc__body p {
  margin: 0 0 0.7rem;
  color: #40516a;
  font-size: 0.95rem;
}

/* ---- Témoignages / archives ---- */
.ctcl-indochine-archive {
  height: 100%;
  padding: 1.6rem 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-left: 3px solid var(--ctcl-gold);
  border-radius: 1rem;
  box-shadow: 0 22px 60px -44px rgba(10, 37, 64, 0.5);
}

.ctcl-indochine-archive__head {
  margin-bottom: 1rem;
}

.ctcl-indochine-archive__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ctcl-gold);
}

.ctcl-indochine-archive__head h3 {
  margin: 0;
  color: var(--ctcl-blue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem;
  line-height: 1.2;
}

.ctcl-indochine-archive__lead {
  margin: 0 0 0.6rem;
  color: var(--ctcl-blue);
  font-style: italic;
  line-height: 1.7;
}

.ctcl-indochine-archive__body {
  color: #40516a;
  font-size: 0.97rem;
  line-height: 1.85;
}

.ctcl-indochine-contact-link {
  color: var(--ctcl-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ctcl-indochine-contact-link:hover {
  color: var(--ctcl-gold);
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .ctcl-indochine-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .ctcl-indochine-section__title {
    font-size: 1.85rem;
  }

  .ctcl-indochine-doc {
    flex-direction: column;
  }
}

/* ════════════════════════════════════════════════════════════
   Accueil — Héritage & Fraternité (editorial luxury)
   ════════════════════════════════════════════════════════════
   Split éditorial : copy à gauche (eyebrow + titre Fraunces XL +
   liste numérotée), diptyque photo à droite avec double-bezel et
   décalage subtil en Z. Fond cinématique partagé sous-saturé +
   voile navy/or pour préserver la lisibilité de la typo.

   Empilement (isolation:isolate) :
     z 0 → ::before  : photo maritime (filter + Ken Burns)
     z 1 → __atmosphere : voile navy + halos lumineux
     z 2 → __grain : bruit overlay
     z 3 → ::after : ruban or hairline en bas
     z 4 → __inner : contenu (copy + diptyque)
   ════════════════════════════════════════════════════════════ */
.heritage-fraternity {
  --hf-navy:        #061d33;
  --hf-navy-deep:   #04162a;
  --hf-gold:        #c9a34a;
  --hf-gold-soft:   #e9d49a;
  --hf-ink:         #f5efe2;
  --hf-line:        rgba(233, 212, 154, 0.18);
  --hf-line-strong: rgba(233, 212, 154, 0.42);

  position: relative;
  margin: 6rem 0 4.5rem;
  padding: 6.5rem 0 7rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--hf-ink);
  background-color: var(--hf-navy-deep);
}

/* Photo de fond cinématique sous-saturée + Ken Burns lent */
.heritage-fraternity::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 0;
  background: url("../../contenus/images/heros/recherche.jpg") center / cover no-repeat;
  filter: brightness(0.42) saturate(0.78) contrast(1.06) blur(1.5px);
  transform: scale(1.04);
  animation: heritageFraternityKen 26s cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  will-change: transform;
}

@keyframes heritageFraternityKen {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -0.9%, 0); }
}

.heritage-fraternity__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* voile navy principal pour la lisibilité (denser à gauche, où vit le texte) */
    linear-gradient(95deg, rgba(4, 22, 42, 0.88) 0%, rgba(6, 29, 51, 0.62) 55%, rgba(4, 22, 42, 0.78) 100%),
    /* halo bleu froid en haut-gauche */
    radial-gradient(ellipse 70% 50% at 18% 22%, rgba(20, 56, 95, 0.45), transparent 65%),
    /* glow doré chaud en bas-droite */
    radial-gradient(ellipse 80% 38% at 100% 100%, rgba(201, 163, 74, 0.22), transparent 65%),
    /* aération douce en haut */
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%);
}

.heritage-fraternity__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
}

.heritage-fraternity::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hf-line-strong), transparent);
  z-index: 3;
}

.heritage-fraternity__inner {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}

/* ───── Copy column ────────────────────────────────────── */
.heritage-fraternity__copy {
  max-width: 34rem;
}

.heritage-fraternity__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
  color: var(--hf-gold-soft);
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.heritage-fraternity__eyebrow-rule {
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.heritage-fraternity__title {
  margin: 0 0 1.5rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.heritage-fraternity__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--hf-gold-soft);
  padding: 0 0.05em;
}

.heritage-fraternity__lead {
  max-width: 32rem;
  margin: 0 0 2.75rem;
  color: rgba(245, 239, 226, 0.78);
  font-family: "Montserrat", sans-serif;
  font-size: 1.02rem;
  line-height: 1.8;
  font-weight: 400;
  text-wrap: pretty;
}

/* ───── Numbered values list ───────────────────────────── */
.heritage-fraternity__values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--hf-line);
}

.heritage-fraternity__value {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--hf-line);
  transition: padding-left 600ms cubic-bezier(0.32, 0.72, 0, 1);
}

.heritage-fraternity__value:hover {
  padding-left: 0.5rem;
}

.heritage-fraternity__value-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--hf-gold);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
}

.heritage-fraternity__value-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.heritage-fraternity__value-label {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0;
}

.heritage-fraternity__value-text {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(245, 239, 226, 0.62);
}

/* ───── Media : double-bezel diptych ──────────────────── */
.heritage-fraternity__media {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.78fr);
  grid-template-rows: auto;
  gap: 1.4rem;
  align-items: stretch;
  min-height: 30rem;
}

.heritage-fraternity__frame {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.heritage-fraternity__frame-shell {
  position: relative;
  flex: 1;
  padding: 0.45rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1.25rem;
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 700ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 500ms ease,
    box-shadow 500ms ease;
  will-change: transform;
}

.heritage-fraternity__frame-core {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(1.25rem - 0.45rem);
  background: rgba(0, 0, 0, 0.25);
}

.heritage-fraternity__frame-core img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms cubic-bezier(0.32, 0.72, 0, 1);
}

.heritage-fraternity__frame:hover .heritage-fraternity__frame-shell {
  border-color: var(--hf-line-strong);
  box-shadow:
    0 36px 80px -28px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
}

.heritage-fraternity__frame:hover .heritage-fraternity__frame-core img {
  transform: scale(1.04);
}

/* Captions hors-cadre, en typo éditoriale (pas un overlay sombre) */
.heritage-fraternity__caption {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  padding: 0;
  color: var(--hf-gold-soft);
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.heritage-fraternity__caption-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(201, 163, 74, 0.14);
  border: 1px solid rgba(201, 163, 74, 0.32);
  color: var(--hf-gold);
  font-size: 0.7rem;
}

/* Frame variants : main is taller, offset is smaller and shifted down */
.heritage-fraternity__frame--main .heritage-fraternity__frame-shell {
  min-height: 30rem;
}

.heritage-fraternity__frame--offset {
  align-self: end;
  transform: translateY(2.5rem);
}

.heritage-fraternity__frame--offset .heritage-fraternity__frame-shell {
  min-height: 22rem;
}

/* ───── Reveal-on-scroll choreography ─────────────────── */
.heritage-fraternity.reveal-on-scroll .heritage-fraternity__copy > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 900ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 900ms cubic-bezier(0.32, 0.72, 0, 1);
}

.heritage-fraternity.reveal-on-scroll .heritage-fraternity__frame {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1100ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 1100ms cubic-bezier(0.32, 0.72, 0, 1);
}

.heritage-fraternity.reveal-on-scroll .heritage-fraternity__frame--offset {
  transform: translateY(calc(2.5rem + 28px));
}

.heritage-fraternity.reveal-on-scroll.is-visible .heritage-fraternity__copy > * {
  opacity: 1;
  transform: translateY(0);
}

.heritage-fraternity.reveal-on-scroll.is-visible .heritage-fraternity__copy > *:nth-child(1) { transition-delay: 60ms; }
.heritage-fraternity.reveal-on-scroll.is-visible .heritage-fraternity__copy > *:nth-child(2) { transition-delay: 140ms; }
.heritage-fraternity.reveal-on-scroll.is-visible .heritage-fraternity__copy > *:nth-child(3) { transition-delay: 220ms; }
.heritage-fraternity.reveal-on-scroll.is-visible .heritage-fraternity__copy > *:nth-child(4) { transition-delay: 300ms; }

.heritage-fraternity.reveal-on-scroll.is-visible .heritage-fraternity__frame--main {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 220ms;
}

.heritage-fraternity.reveal-on-scroll.is-visible .heritage-fraternity__frame--offset {
  opacity: 1;
  transform: translateY(2.5rem);
  transition-delay: 360ms;
}

/* ───── Responsive ────────────────────────────────────── */
@media (max-width: 991.98px) {
  .heritage-fraternity {
    margin: 4.5rem 0 3.5rem;
    padding: 5rem 0 5.5rem;
  }

  .heritage-fraternity__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .heritage-fraternity__copy {
    max-width: 42rem;
  }

  .heritage-fraternity__lead {
    max-width: 38rem;
  }

  .heritage-fraternity__media {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.78fr);
    min-height: 24rem;
  }

  .heritage-fraternity__frame--main .heritage-fraternity__frame-shell {
    min-height: 24rem;
  }

  .heritage-fraternity__frame--offset .heritage-fraternity__frame-shell {
    min-height: 18rem;
  }
}

@media (max-width: 767.98px) {
  .heritage-fraternity {
    margin: 3.5rem 0 3rem;
    padding: 4rem 0 4.5rem;
  }

  .heritage-fraternity__media {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    min-height: 0;
  }

  .heritage-fraternity__frame--offset {
    transform: translateY(0);
  }

  .heritage-fraternity__frame--main .heritage-fraternity__frame-shell,
  .heritage-fraternity__frame--offset .heritage-fraternity__frame-shell {
    min-height: 16rem;
  }

  .heritage-fraternity.reveal-on-scroll .heritage-fraternity__frame--offset,
  .heritage-fraternity.reveal-on-scroll.is-visible .heritage-fraternity__frame--offset {
    transform: translateY(0);
  }

  .heritage-fraternity.reveal-on-scroll .heritage-fraternity__frame {
    transform: translateY(20px);
  }

  .heritage-fraternity.reveal-on-scroll.is-visible .heritage-fraternity__frame {
    transform: translateY(0);
  }

  .heritage-fraternity__value {
    grid-template-columns: 2.6rem 1fr;
    gap: 1rem;
    padding: 1.1rem 0;
  }

  .heritage-fraternity__value-label {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heritage-fraternity::before {
    animation: none;
    transform: scale(1.04);
  }

  .heritage-fraternity__frame-shell,
  .heritage-fraternity__frame-core img,
  .heritage-fraternity__value,
  .heritage-fraternity.reveal-on-scroll .heritage-fraternity__copy > *,
  .heritage-fraternity.reveal-on-scroll .heritage-fraternity__frame {
    transition: none;
  }
}

/* =========================================================
   Recherche publique
   ========================================================= */
.site-search {
  position: relative;
  align-items: center;
  gap: 0.35rem;
  width: 11rem;
  min-height: 2.75rem;
  padding: 0.25rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(233, 212, 154, 0.34);
  border-radius: 999px;
  box-shadow: 0 1.25rem 2.5rem -2rem rgba(1, 18, 34, 0.9);
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 260ms cubic-bezier(0.16, 1, 0.3, 1),
    background 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-search:focus-within {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(233, 212, 154, 0.72);
  transform: translateY(-1px);
}

.site-search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  color: #e9d49a;
}

.site-search input {
  width: 100%;
  min-width: 0;
  color: #ffffff;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
}

.site-search input::placeholder {
  color: rgba(255, 255, 255, 0.68);
}

.site-search button,
.site-search-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  color: #071d33;
  background: #e9d49a;
  border: 0;
  border-radius: 999px;
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    background 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-search button:hover,
.site-search-shortcut:hover {
  color: #071d33;
  background: #ffffff;
  transform: translate(1px, -1px);
}

.site-search button:active,
.site-search-shortcut:active {
  transform: scale(0.96);
}

.site-search-shortcut {
  text-decoration: none;
}

@media (min-width: 1200px) and (max-width: 1549.98px) {
  .site-search--header {
    width: 10.5rem;
  }

  .site-search--header input {
    font-size: 0.8rem;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-search--header {
    width: 7.5rem;
  }
}

.search-page {
  background: #f4f0e7;
}

.search-hero {
  position: relative;
  min-height: 32rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(115deg, rgba(6, 28, 49, 0.96), rgba(10, 37, 64, 0.76)),
    url("../../contenus/images/heros/recherche.jpg") center / cover no-repeat;
}

.search-hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(233, 212, 154, 0.16), transparent 32%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 7rem
    );
  opacity: 0.8;
}

.search-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(24rem, 1.18fr);
  align-items: end;
  gap: 3rem;
  padding-top: 7rem;
  padding-bottom: 4.75rem;
}

.search-hero__copy {
  max-width: 35rem;
}

.search-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  padding: 0.42rem 0.9rem;
  color: #f7e7b2;
  border: 1px solid rgba(233, 212, 154, 0.36);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.search-hero h1 {
  margin: 0;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}

.search-hero p {
  max-width: 34rem;
  margin: 1.15rem 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.08rem;
  line-height: 1.75;
}

.search-hero-form {
  width: 100%;
}

.search-hero-form__shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 5.75rem;
  padding: 0.65rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(233, 212, 154, 0.36);
  border-radius: 999px;
  box-shadow: 0 2rem 4.5rem -3rem rgba(1, 18, 34, 0.95);
}

.search-hero-form__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  color: #0a2540;
  background: #f5ead0;
  border-radius: 999px;
}

.search-hero-form input {
  width: 100%;
  color: #0a2540;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0;
}

.search-hero-form input::placeholder {
  color: #6c7888;
}

.search-hero-form button {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.8rem;
  padding: 0 0.75rem 0 1.45rem;
  color: #ffffff;
  background: #0a2540;
  border: 0;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0;
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    background 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.search-hero-form button i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: #0a2540;
  background: #e9d49a;
  border-radius: 999px;
  font-size: 1.25rem;
}

.search-hero-form button:hover {
  background: #123553;
  transform: translateY(-1px);
}

.search-hero-form button:active {
  transform: scale(0.98);
}

.search-results-section {
  padding: 4.5rem 0 5.5rem;
}

.search-empty {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.09);
  border-radius: 0.5rem;
  box-shadow: 0 1.8rem 4rem -3.25rem rgba(10, 37, 64, 0.7);
}

.search-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  color: #0a2540;
  background: #f5ead0;
  border-radius: 999px;
}

.search-empty h2,
.search-results-head h2 {
  margin: 0;
  color: #0a2540;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
}

.search-empty p {
  margin: 0.85rem auto 0;
  color: #58667a;
  line-height: 1.7;
}

.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.4rem;
}

.search-suggestions a {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  color: #0a2540;
  background: #f5ead0;
  border: 1px solid rgba(201, 169, 97, 0.38);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    background 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.search-suggestions a:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

.search-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.search-results-head__count {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0.35rem 0.85rem;
  color: #0a2540;
  background: #f5ead0;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0;
}

.search-results-grid {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.search-results-summary {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.09);
  border-radius: 0.5rem;
  box-shadow: 0 1.5rem 3.5rem -3rem rgba(10, 37, 64, 0.75);
}

.search-results-summary a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.85rem;
  padding: 0.55rem 0.7rem;
  color: #0a2540;
  border-radius: 0.45rem;
  text-decoration: none;
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    background 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.search-results-summary a:hover {
  background: #f5ead0;
  transform: translateX(2px);
}

.search-results-summary span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
}

.search-results-summary strong {
  color: #c09a42;
  font-variant-numeric: tabular-nums;
}

.search-results-list {
  display: grid;
  gap: 1.65rem;
}

.search-result-group {
  scroll-margin-top: 7rem;
}

.search-result-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(10, 37, 64, 0.12);
}

.search-result-group__head span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #0a2540;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.search-result-group__head strong {
  color: #c09a42;
  font-variant-numeric: tabular-nums;
}

.search-result-group__empty {
  margin: 0;
  padding: 1rem 0;
  color: #66758a;
}

.search-result-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0.85rem;
  padding: 1.1rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.09);
  border-radius: 0.5rem;
  box-shadow: 0 1.5rem 3.25rem -3rem rgba(10, 37, 64, 0.72);
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.search-result-card:hover {
  border-color: rgba(201, 169, 97, 0.42);
  box-shadow: 0 1.8rem 3.75rem -3rem rgba(10, 37, 64, 0.82);
  transform: translateY(-2px);
}

.search-result-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  color: #0a2540;
  background: #f5ead0;
  border-radius: 0.5rem;
  font-size: 1.1rem;
}

.search-result-card__type {
  display: inline-flex;
  margin-bottom: 0.35rem;
  color: #b48b38;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.search-result-card h3 {
  margin: 0;
  color: #0a2540;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
}

.search-result-card h3 a {
  color: inherit;
  text-decoration: none;
}

.search-result-card h3 a:hover {
  color: #b48b38;
}

.search-result-card p {
  max-width: 48rem;
  margin: 0.55rem 0 0;
  color: #4f6178;
  line-height: 1.75;
}

.search-result-card__meta {
  display: inline-flex;
  margin-top: 0.8rem;
  color: #6d7a8d;
  font-size: 0.92rem;
  line-height: 1.5;
}

.search-result-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #0a2540;
  background: #f5ead0;
  border-radius: 999px;
  text-decoration: none;
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    background 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.search-result-card__go:hover {
  color: #ffffff;
  background: #0a2540;
  transform: translate(2px, -2px);
}

@media (max-width: 991.98px) {
  .search-hero {
    min-height: auto;
  }

  .search-hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 6.5rem;
    padding-bottom: 3.25rem;
  }

  .search-hero h1 {
    font-size: 3.1rem;
  }

  .search-results-grid {
    grid-template-columns: 1fr;
  }

  .search-results-summary {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .search-hero__inner {
    padding-top: 6rem;
  }

  .search-hero h1 {
    font-size: 2.45rem;
  }

  .search-hero p {
    font-size: 1rem;
  }

  .search-hero-form__shell {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 0.8rem;
    border-radius: 0.5rem;
  }

  .search-hero-form__icon {
    display: none;
  }

  .search-hero-form input {
    min-height: 3rem;
    padding: 0 0.85rem;
    background: #f8f3e9;
    border-radius: 0.45rem;
    font-size: 1rem;
  }

  .search-hero-form button {
    justify-content: center;
    width: 100%;
    padding: 0 0.75rem;
  }

  .search-results-section {
    padding: 3rem 0 4rem;
  }

  .search-empty {
    padding: 2rem 1rem;
  }

  .search-results-head {
    display: block;
  }

  .search-results-head h2 {
    margin-top: 0.8rem;
    font-size: 1.85rem;
  }

  .search-results-summary {
    grid-template-columns: 1fr;
  }

  .search-result-card {
    grid-template-columns: 1fr auto;
  }

  .search-result-card__icon {
    display: none;
  }

  .search-result-card__go {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-search,
  .site-search button,
  .site-search-shortcut,
  .search-hero-form button,
  .search-suggestions a,
  .search-results-summary a,
  .search-result-card,
  .search-result-card__go {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RUBRIQUE SNLE — Sous-marin Nucléaire Lanceur d'Engins
   ─────────────────────────────────────────────────────────────────
   Les pages /snle/... partagent une palette navy/gold cohérente avec
   CT/CL, mais avec des accents légèrement plus froids (bleu profond)
   pour évoquer l'univers sous-marin. Les composants reprennent les
   conventions BEM des autres rubriques.
   ═══════════════════════════════════════════════════════════════════ */

.snle-page {
  --snle-deep:  #061425;
  --snle-navy:  #0a2540;
  --snle-steel: #143863;
  --snle-gold:  #c9a961;
  --snle-cream: #f7f1e4;
  --snle-muted: #5e6b7d;
  background: #f5f3ee;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.snle-hero {
  position: relative;
  min-height: 54vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--snle-deep);
  background-size: cover;
  background-position: center;
  color: #fff;
  isolation: isolate;
}

.snle-historique-page .snle-hero h1 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.24);
}

.snle-historique-page .snle-hero__name {
  color: var(--snle-gold);
  font-weight: 700;
  text-shadow: 0 0 26px rgba(201, 169, 97, 0.35);
}

.snle-index-hero {
  background-image: url("../../contenus/images/heros/snle-index.jpg");
  background-position: center 38%;
}
.snle-actualites-hero {
  background-image: url("../../contenus/images/heros/snle-actualites.jpg");
  background-position: center 45%;
}
.snle-historique-hero {
  background-image: url("../../contenus/images/heros/snle-historique.jpg");
  background-position: center 50%;
}
.snle-insignes-hero {
  background-image: url("../../contenus/images/heros/snle-insignes-general.jpg");
  background-position: center 55%;
}
.snle-documentation-hero {
  background-image: url("../../contenus/images/heros/snle-documentation-general.jpg");
  background-position: center 35%;
}
.snle-photos-hero,
.snle-medias-hero {
  background-image: url("../../contenus/images/heros/snle-medias.jpg");
  background-position: center 60%;
}

.snle-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(6, 20, 37, 0.94) 0%, rgba(6, 20, 37, 0.78) 42%, rgba(6, 20, 37, 0.36) 100%),
    linear-gradient(180deg, rgba(6, 20, 37, 0.22), rgba(6, 20, 37, 0.78));
}

.snle-hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding-top: 8rem;
  padding-bottom: 5rem;
}

.snle-hero h1 {
  margin: 1.35rem 0 1rem;
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.snle-hero p {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  max-width: 640px;
  line-height: 1.65;
}

/* ── Eyebrows + kickers ────────────────────────────────────────── */
.snle-eyebrow,
.snle-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--snle-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.snle-eyebrow {
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(201, 169, 97, 0.42);
  border-radius: 999px;
  background: rgba(6, 20, 37, 0.35);
}
.snle-eyebrow--member {
  border-color: rgba(201, 169, 97, 0.7);
  background: rgba(201, 169, 97, 0.18);
  color: #f3e0b3;
}

/* ── Intro panel ───────────────────────────────────────────────── */
.snle-intro {
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
}
.snle-intro__panel {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 18px;
  padding: 2rem 2.25rem;
  box-shadow: 0 18px 40px -28px rgba(10, 37, 64, 0.35);
}
.snle-intro__panel h2 {
  margin: 0.5rem 0 0.75rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--snle-navy);
}
.snle-intro__panel p {
  color: var(--snle-muted);
  line-height: 1.7;
  margin: 0;
}
.snle-intro__panel--member {
  border-color: rgba(201, 169, 97, 0.45);
  background: linear-gradient(180deg, #fffaef 0%, #fff 70%);
}
.snle-intro__hint,
.snle-intro__badge {
  margin-top: 1rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  font-size: 0.92rem;
}
.snle-intro__hint {
  background: rgba(10, 37, 64, 0.06);
  color: var(--snle-navy);
}
.snle-intro__badge {
  background: rgba(201, 169, 97, 0.18);
  color: #7a5e1f;
  font-weight: 600;
}

/* -- Galerie historique SNLE -------------------------------------- */
.snle-history-gallery {
  padding-top: 4.5rem;
  padding-bottom: 5.25rem;
  background:
    linear-gradient(135deg, rgba(6, 20, 37, 0.98) 0%, rgba(10, 37, 64, 0.96) 54%, rgba(20, 56, 99, 0.95) 100%);
  color: #ffffff;
}

.snle-history-gallery__header {
  max-width: 820px;
  margin-bottom: 2.25rem;
}

.snle-history-gallery__header h2 {
  margin: 0.55rem 0 0.8rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  font-weight: 600;
}

.snle-history-gallery__header p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
}

.snle-history-gallery .snle-section-kicker {
  color: #f1d58a;
}

.snle-history-gallery__grid {
  margin-top: 0;
}

.snle-history-gallery .section-gallery__item {
  border-color: rgba(255, 255, 255, 0.16);
}

/* ── Cartes de la page d'accueil SNLE ──────────────────────────── */
.snle-cards-section { padding-top: 1rem; padding-bottom: 5rem; }

.snle-cards {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.snle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.85rem 1.7rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  isolation: isolate;
}
.snle-card::before {
  content: "";
  position: absolute;
  inset: auto -25% -55% auto;
  width: 240px; height: 240px;
  background: radial-gradient(closest-side, rgba(201, 169, 97, 0.18), transparent 70%);
  z-index: 0;
}
.snle-card > * { position: relative; z-index: 1; }
.snle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 38px -22px rgba(10, 37, 64, 0.35);
  border-color: rgba(201, 169, 97, 0.45);
}
.snle-card.is-member {
  background: linear-gradient(180deg, #fffaef 0%, #fff 60%);
  border-color: rgba(201, 169, 97, 0.4);
}
.snle-card__num {
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--snle-gold);
}
.snle-card__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(10, 37, 64, 0.06);
  color: var(--snle-navy);
  font-size: 1.35rem;
}
.snle-card.is-member .snle-card__icon {
  background: rgba(201, 169, 97, 0.18);
  color: #7a5e1f;
}
.snle-card h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0.4rem 0 0;
  color: var(--snle-navy);
}
.snle-card__sub {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--snle-gold);
  text-transform: uppercase;
}
.snle-card p {
  margin: 0;
  color: var(--snle-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}
.snle-card__footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.snle-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.snle-card__badge--public {
  background: rgba(10, 37, 64, 0.08);
  color: var(--snle-navy);
}
.snle-card__badge--member {
  background: rgba(201, 169, 97, 0.22);
  color: #7a5e1f;
}
.snle-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--snle-navy);
}
.snle-card:hover .snle-card__cta i {
  transform: translate(2px, -2px);
}
.snle-card__cta i {
  transition: transform 0.25s ease;
}

/* ── État vide ─────────────────────────────────────────────────── */
.snle-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fff;
  border: 1px dashed rgba(10, 37, 64, 0.18);
  border-radius: 18px;
  color: var(--snle-muted);
}
.snle-empty i {
  font-size: 2.2rem;
  color: var(--snle-gold);
  margin-bottom: 0.6rem;
  display: block;
}

/* ── Lien mini (PDF, lien) ─────────────────────────────────────── */
.snle-mini-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--snle-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 169, 97, 0.55);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.snle-mini-link:hover {
  color: var(--snle-gold);
  border-color: var(--snle-gold);
}

/* ── Actualités : grille de cartes ─────────────────────────────── */
.snle-actu-list-section { padding-bottom: 5rem; }

.snle-actu-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.snle-actu-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.snle-actu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 36px -24px rgba(10, 37, 64, 0.35);
}
.snle-actu-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--snle-navy);
}
.snle-actu-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.snle-actu-card:hover .snle-actu-card__media img { transform: scale(1.04); }
.snle-actu-card__media--ghost {
  display: flex;
  align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 2.4rem;
}
.snle-actu-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.snle-actu-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--snle-gold);
  font-weight: 600;
  text-transform: uppercase;
}
.snle-actu-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--snle-navy);
  line-height: 1.3;
}
.snle-actu-card__lead {
  margin: 0;
  color: var(--snle-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ── Frise chronologique SNLE ──────────────────────────────────────
   Layout aligné sur celui de CT/CL : zigzag centré, marqueurs ronds
   sur l'axe vertical, cartes alternant gauche/droite. Couleurs SNLE
   (--snle-navy / --snle-gold / --snle-cream / --snle-muted). */
.snle-timeline-section {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.snle-timeline {
  position: relative;
  display: grid;
  gap: 1.35rem;
  padding: 1rem 0;
}

.snle-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(10, 37, 64, 0.28), transparent);
}

.snle-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 5rem 1fr;
  align-items: center;
}

.snle-timeline__item:nth-child(odd) .snle-timeline__shell {
  grid-column: 1;
  justify-self: end;
}

.snle-timeline__item:nth-child(even) .snle-timeline__shell {
  grid-column: 3;
  justify-self: start;
}

.snle-timeline__marker {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 4.25rem;
  height: 4.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--snle-navy);
  border: 3px solid var(--snle-cream);
  box-shadow: 0 12px 28px -18px rgba(10, 37, 64, 0.75);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  z-index: 1;
}

.snle-timeline__shell {
  width: min(100%, 520px);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: transform 0.3s ease;
}
.snle-timeline__item:hover .snle-timeline__shell { transform: translateY(-2px); }

.snle-timeline__card {
  padding: 1.45rem;
  border-radius: 1rem;
  border: 1px solid rgba(10, 37, 64, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 58px -40px rgba(10, 37, 64, 0.6);
}

.snle-timeline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.8rem;
  color: var(--snle-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
}

.snle-timeline__year {
  color: var(--snle-gold);
  font-weight: 700;
}

.snle-timeline__meta time {
  color: var(--snle-muted);
}

.snle-timeline__card h3 {
  margin: 0 0 0.8rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.snle-timeline__card p {
  margin: 0 0 1.2rem;
  color: #40516a;
  line-height: 1.75;
}

.snle-timeline__lead {
  color: var(--snle-muted);
  margin: 0;
  line-height: 1.65;
}

.snle-timeline__media {
  margin-top: 1rem;
  border-radius: 12px;
  overflow: hidden;
  max-height: 320px;
}
.snle-timeline__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.snle-timeline__details {
  margin-top: 1rem;
}
.snle-timeline__details > summary,
.snle-insigne-card__details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--snle-navy);
  background: rgba(10, 37, 64, 0.05);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  transition: background 0.25s ease;
}
.snle-timeline__details > summary::-webkit-details-marker,
.snle-insigne-card__details > summary::-webkit-details-marker { display: none; }
.snle-timeline__details > summary:hover,
.snle-insigne-card__details > summary:hover { background: rgba(201, 169, 97, 0.18); }
.snle-timeline__details[open] > summary > i,
.snle-insigne-card__details[open] > summary > i { transform: rotate(180deg); }
.snle-timeline__details > summary > i,
.snle-insigne-card__details > summary > i { transition: transform 0.3s ease; }
.snle-timeline__long {
  margin-top: 0.85rem;
  color: var(--snle-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ── Bouton "Lire la fiche" + lien PDF + retour (calque CT/CL) ── */
.snle-readmore,
.snle-pdf-link,
.snle-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.snle-readmore,
.snle-pdf-link {
  margin-top: 0.85rem;
  color: #ffffff;
  background: var(--snle-navy);
  padding: 0.7rem 1rem;
  transition: background 0.25s ease, transform 0.25s ease;
}
.snle-readmore:hover,
.snle-pdf-link:hover {
  background: var(--snle-gold);
  color: var(--snle-navy);
  transform: translateY(-2px);
}

.snle-readmore i,
.snle-pdf-link i {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-readmore:hover i,
.snle-pdf-link:hover i {
  transform: translate(2px, -2px);
  background: rgba(10, 37, 64, 0.12);
}

.snle-back-link {
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.86);
}
.snle-back-link:hover { color: var(--snle-gold); }

/* Groupe Consulter + Télécharger pour SNLE. */
.snle-pdf-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.snle-pdf-actions .snle-pdf-link { margin-top: 0; }
.snle-pdf-link--download {
  background: transparent !important;
  color: var(--snle-navy) !important;
  border: 1px solid rgba(10, 37, 64, 0.35);
}
.snle-pdf-link--download:hover {
  background: var(--snle-navy) !important;
  color: #ffffff !important;
}

/* ── Page de détail d'une archive historique SNLE ─────────────── */
.snle-detail-hero {
  padding: 8.5rem 0 4.5rem;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(7, 29, 51, 0.98), rgba(10, 37, 64, 0.88));
}

.snle-detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 2rem;
  align-items: end;
}
.snle-detail-hero__text h1 {
  margin: 1rem 0;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.08;
}

.snle-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
}
.snle-detail-meta span { color: var(--snle-gold); font-weight: 700; }

.snle-detail-media {
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 26px 70px -38px rgba(4, 14, 27, 0.85);
}
.snle-detail-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.snle-detail-body { padding: 4rem 0 5rem; }
.snle-detail-article { max-width: 920px; }
.snle-detail-lead {
  margin: 0 0 1.5rem;
  color: var(--snle-navy);
  font-size: 1.1rem;
  line-height: 1.75;
}
.snle-detail-text {
  color: #334155;
  font-size: 1rem;
  line-height: 1.85;
}

@media (max-width: 991.98px) {
  .snle-detail-hero__grid { grid-template-columns: 1fr; }
}

/* ── Insignes ──────────────────────────────────────────────────── */
.snle-insignes-section { padding-bottom: 5rem; }

.snle-insignes-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.snle-insigne-card {
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.snle-insigne-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 38px -24px rgba(10, 37, 64, 0.35);
}
.snle-insigne-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #0a2540 0%, #143863 100%);
}
.snle-insigne-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 1.2rem;
  background: #fff;
}
.snle-insigne-card__media--ghost {
  display: flex;
  align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 3rem;
}
.snle-insigne-card__body {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.snle-insigne-card__body h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--snle-navy);
}
.snle-insigne-card__lead {
  margin: 0;
  color: var(--snle-muted);
  line-height: 1.6;
  font-size: 0.92rem;
}
.snle-insigne-card__details p {
  margin: 0.85rem 0 0;
  color: var(--snle-muted);
  line-height: 1.65;
  font-size: 0.92rem;
}

/* ── Documentation : liste de documents ─────────────────────── */
.snle-doc-section { padding-bottom: 5rem; }

.snle-doc-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.snle-doc-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.snle-doc-item:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 169, 97, 0.45);
  box-shadow: 0 18px 32px -24px rgba(10, 37, 64, 0.3);
}
.snle-doc-item__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(201, 169, 97, 0.18);
  color: #7a5e1f;
  display: flex;
  align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.snle-doc-item__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.snle-doc-item__type {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--snle-gold);
}
.snle-doc-item__body h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: var(--snle-navy);
  font-weight: 600;
  line-height: 1.35;
}
.snle-doc-item__date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--snle-muted);
  margin-top: 0.15rem;
}
.snle-doc-item__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.snle-doc-item__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--snle-navy);
  color: #fff;
  border: 1px solid var(--snle-navy);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.snle-doc-item__cta:hover {
  background: var(--snle-steel);
  border-color: var(--snle-steel);
  color: #fff;
}
.snle-doc-item__cta--ghost {
  background: transparent;
  color: var(--snle-navy);
  border-color: rgba(10, 37, 64, 0.25);
}
.snle-doc-item__cta--ghost:hover {
  background: rgba(201, 169, 97, 0.18);
  color: #7a5e1f;
  border-color: rgba(201, 169, 97, 0.6);
}

/* ── Photos (membre) ───────────────────────────────────────────── */
.snle-photos-section { padding-bottom: 5rem; }

.snle-album {
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 18px;
  padding: 1.6rem 1.6rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 18px 36px -30px rgba(10, 37, 64, 0.3);
}

.snle-album__head {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.snle-album__cover {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.snle-album__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.snle-album__count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--snle-gold);
}
.snle-album__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.3rem 0 0.5rem;
  color: var(--snle-navy);
}
.snle-album__lead { margin: 0; color: var(--snle-muted); line-height: 1.6; }
.snle-album__empty {
  margin: 0;
  padding: 1.4rem;
  border-radius: 12px;
  background: rgba(10, 37, 64, 0.04);
  color: var(--snle-muted);
  font-style: italic;
  text-align: center;
}

.snle-photo-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.snle-photo-grid__item {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.snle-photo-grid__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -24px rgba(10, 37, 64, 0.4);
}
.snle-photo-grid__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.snle-photo-grid__item:hover img { transform: scale(1.06); }
.snle-photo-grid__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(180deg, rgba(6, 20, 37, 0) 0%, rgba(6, 20, 37, 0.78) 100%);
  color: #fff;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.snle-photo-grid__item:hover .snle-photo-grid__caption {
  opacity: 1;
  transform: translateY(0);
}
.snle-photo-grid__credit {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.78);
}

/* ── Médias (vidéos / audio) ───────────────────────────────────── */
.snle-medias-section { padding-bottom: 5rem; }

.snle-media-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.snle-media-card {
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 18px;
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.snle-media-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 38px -24px rgba(10, 37, 64, 0.35);
}
.snle-media-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.snle-media-card__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(10, 37, 64, 0.08);
  color: var(--snle-navy);
  display: flex;
  align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.snle-media-card--audio .snle-media-card__icon {
  background: rgba(201, 169, 97, 0.2);
  color: #7a5e1f;
}
.snle-media-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--snle-navy);
}
.snle-media-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--snle-muted);
}
.snle-media-card__player,
.snle-media-card__audio {
  width: 100%;
  border-radius: 10px;
  display: block;
}
.snle-media-card__player {
  background: #000;
}
.snle-media-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--snle-navy);
  color: #fff;
  align-self: flex-start;
  transition: background 0.25s ease;
}
.snle-media-card__link:hover { background: var(--snle-steel); color: #fff; }

/* -- Espaces membres SNLE : photos + medias -------------------------- */
.snle-member-brief {
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}

.snle-member-brief__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.7rem 1.8rem;
  background:
    radial-gradient(circle at 96% 0%, rgba(201, 169, 97, 0.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fffaef 100%);
  border: 1px solid rgba(201, 169, 97, 0.34);
  border-radius: 18px;
  box-shadow: 0 22px 48px -34px rgba(10, 37, 64, 0.45);
}

.snle-member-brief__copy h2,
.snle-private-docs__header h2,
.snle-media-block__head h2 {
  margin: 0.45rem 0 0.6rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  font-weight: 600;
}

.snle-member-brief__copy p,
.snle-private-docs__header p,
.snle-media-block__head p {
  max-width: 760px;
  margin: 0;
  color: var(--snle-muted);
  line-height: 1.7;
}

.snle-member-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 0.7rem;
}

.snle-member-stats span {
  min-width: 92px;
  padding: 0.85rem 0.9rem;
  text-align: center;
  color: var(--snle-muted);
  background: rgba(10, 37, 64, 0.06);
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.snle-member-stats strong {
  display: block;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.8rem;
  line-height: 1;
}

.snle-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.snle-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.45rem 0.8rem;
  color: var(--snle-navy);
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.snle-section-nav a:hover {
  color: #ffffff;
  background: var(--snle-navy);
  border-color: var(--snle-navy);
}

.snle-album--rich {
  scroll-margin-top: 92px;
}

.snle-album--rich .snle-album__cover {
  display: block;
  border: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow: 0 20px 42px -34px rgba(10, 37, 64, 0.65);
}

.snle-album--rich .snle-photo-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.snle-private-docs {
  padding: 0 0 5rem;
}

.snle-private-docs__header {
  max-width: 840px;
  margin-bottom: 1.5rem;
}

.snle-private-docs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.snle-private-doc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 1.1rem;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 14px;
  box-shadow: 0 18px 36px -32px rgba(10, 37, 64, 0.36);
}

.snle-private-doc__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7a5e1f;
  background: rgba(201, 169, 97, 0.18);
  border-radius: 12px;
  font-size: 1.35rem;
}

.snle-private-doc__body span {
  color: var(--snle-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.snle-private-doc__body h3 {
  margin: 0.25rem 0 0;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
}

.snle-private-doc__link {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.5rem 0.8rem;
  color: #ffffff;
  background: var(--snle-navy);
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.snle-private-doc__link:hover {
  color: #ffffff;
  background: var(--snle-steel);
}

.snle-media-block {
  margin-bottom: 2rem;
  scroll-margin-top: 92px;
}

.snle-media-block:last-child {
  margin-bottom: 0;
}

.snle-media-block__head {
  margin-bottom: 1.2rem;
  padding-left: 1rem;
  border-left: 4px solid var(--snle-gold);
}

.snle-media-grid--rich {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.snle-media-card__desc {
  margin: 0;
  color: var(--snle-muted);
  line-height: 1.62;
  font-size: 0.94rem;
}

.snle-media-card__archive {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem;
  color: var(--snle-muted);
  background: rgba(10, 37, 64, 0.05);
  border: 1px dashed rgba(10, 37, 64, 0.22);
  border-radius: 12px;
}

.snle-media-card__archive p {
  margin: 0;
  line-height: 1.5;
}

.snle-media-card__archive-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--snle-navy);
  background: rgba(201, 169, 97, 0.2);
  border-radius: 12px;
  flex-shrink: 0;
}

/* Image de couverture d'une carte média (colonne documents.image) */
.snle-media-card__cover {
  position: relative;
  display: block;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10, 37, 64, 0.05);
  line-height: 0;
}
.snle-media-card__cover img {
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  display: block;
}
.snle-media-card__cover--link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 37, 64, 0);
  transition: background 0.25s ease;
}
.snle-media-card__cover--link:hover::after {
  background: rgba(10, 37, 64, 0.2);
}
.snle-media-card__cover-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.2rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 6px 20px rgba(10, 37, 64, 0.6);
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .snle-member-brief__panel {
    grid-template-columns: 1fr;
  }

  .snle-member-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .snle-member-brief {
    padding-top: 2.5rem;
  }

  .snle-member-brief__panel {
    padding: 1.35rem 1.15rem;
  }

  .snle-member-stats {
    grid-template-columns: 1fr;
  }

  .snle-album--rich .snle-photo-grid,
  .snle-media-grid--rich,
  .snle-private-docs__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .snle-timeline::before {
    left: 2.1rem;
  }

  .snle-timeline__item {
    grid-template-columns: 4.5rem 1fr;
  }

  .snle-timeline__marker {
    grid-column: 1;
  }

  .snle-timeline__item:nth-child(odd) .snle-timeline__shell,
  .snle-timeline__item:nth-child(even) .snle-timeline__shell {
    grid-column: 2;
    justify-self: stretch;
  }
}

@media (max-width: 768px) {
  .snle-hero { min-height: 44vh; }
  .snle-hero__content { padding-top: 6rem; padding-bottom: 3rem; }
  .snle-intro__panel { padding: 1.5rem 1.4rem; }
  .snle-timeline-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .snle-album__head { grid-template-columns: 1fr; }
  .snle-doc-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .snle-doc-item__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   SNLE — DÉCORATIONS PREMIUM (hero historique + détail + bloc PDF)
   Réutilise la palette --snle-navy / --snle-gold / --snle-cream.
   Effets : halos lumineux, grain subtil, eyebrow à filets, drop-cap,
   parallax léger sur la media de la fiche détail.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Halos & grain sur le hero historique ──────────────────────── */
.snle-hero { position: relative; overflow: hidden; }

.snle-hero__halo {
  position: absolute;
  z-index: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.55;
  pointer-events: none;
  animation: snleHaloFloat 14s ease-in-out infinite alternate;
}
.snle-hero__halo--gold {
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.7), transparent 70%);
}
.snle-hero__halo--navy {
  bottom: -200px;
  left: -140px;
  background: radial-gradient(circle, rgba(10, 37, 64, 0.85), transparent 70%);
  animation-delay: -7s;
}

@keyframes snleHaloFloat {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0.45; }
  50%  { transform: translate(20px, -16px) scale(1.06); opacity: 0.6; }
  100% { transform: translate(-12px, 12px) scale(0.98); opacity: 0.5; }
}

.snle-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 71% 64%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px);
}

/* ── Eyebrow à filets (variant avec rules + version claire) ───── */
.snle-eyebrow--rule {
  padding: 0.5rem 1rem;
  gap: 0.7rem;
}
.snle-eyebrow__rule {
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--snle-gold), transparent);
}
.snle-eyebrow--light {
  color: #f3e0b3;
  border-color: rgba(243, 224, 179, 0.55);
  background: rgba(245, 241, 230, 0.08);
}
.snle-eyebrow--light .snle-eyebrow__rule {
  background: linear-gradient(90deg, transparent, #f3e0b3, transparent);
}

/* ════════════════════════════════════════════════════════════════
   FICHE DÉTAIL HISTORIQUE — refonte premium
   ════════════════════════════════════════════════════════════════ */

/* Hero : décor halos + grain + bandeau or au bas */
.snle-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 8.5rem 0 5rem;
  color: #ffffff;
  background:
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.12), transparent 55%),
    linear-gradient(135deg, rgba(7, 29, 51, 0.98), rgba(10, 37, 64, 0.92) 55%, rgba(15, 50, 86, 0.88));
}

.snle-detail-hero__container { position: relative; z-index: 2; }

.snle-detail-hero__halo {
  position: absolute;
  z-index: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
  animation: snleHaloFloat 16s ease-in-out infinite alternate;
}
.snle-detail-hero__halo--gold {
  top: -140px;
  right: -80px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.75), transparent 70%);
}
.snle-detail-hero__halo--navy {
  bottom: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(28, 76, 130, 0.8), transparent 70%);
  animation-delay: -8s;
}
.snle-detail-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 84% 72%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px);
}
.snle-detail-hero__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--snle-gold) 30%, var(--snle-gold) 70%, transparent);
  opacity: 0.7;
  z-index: 3;
}

.snle-detail-hero__grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 2.6rem;
  align-items: end;
}

.snle-detail-hero__text h1 {
  margin: 1rem 0 0.6rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.snle-detail-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.85);
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
}
.snle-detail-meta__year {
  color: var(--snle-gold);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.snle-detail-meta__sep { opacity: 0.4; }
.snle-detail-meta time { color: rgba(255, 255, 255, 0.78); }

/* Media : cadre + brillance + parallax */
.snle-detail-media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.snle-detail-media__frame {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.18) inset,
    0 30px 80px -42px rgba(4, 14, 27, 0.95);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-detail-media__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(7, 29, 51, 0.55));
  pointer-events: none;
  z-index: 1;
}
.snle-detail-media__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.snle-detail-media__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}
.snle-detail-media:hover .snle-detail-media__shine { transform: translateX(100%); }
.snle-detail-media:hover .snle-detail-media__frame { transform: translateY(-4px); }

.snle-detail-media__caption {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.65);
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.snle-detail-media__caption i { color: var(--snle-gold); }

/* Bouton retour en haut */
.snle-back-link {
  position: relative;
  z-index: 2;
}

/* ── Corps de l'article ──────────────────────────────────────── */
.snle-detail-body {
  padding: 4.5rem 0 5.5rem;
  background:
    radial-gradient(ellipse at top, rgba(201, 169, 97, 0.06), transparent 45%),
    var(--snle-cream, #f7f1e4);
}

.snle-detail-article {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 1.25rem;
  padding: 3rem 3rem 3.5rem;
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.1) inset,
    0 40px 80px -55px rgba(10, 37, 64, 0.45);
}
.snle-detail-article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--snle-navy);
  border: 3px solid var(--snle-cream);
  box-shadow: 0 12px 28px -14px rgba(10, 37, 64, 0.7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a961'%3E%3Cpath d='M12 2 9.5 9 2 9.5l6 4.5L5.5 22 12 17.5 18.5 22 16 14l6-4.5L14.5 9 12 2z'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  background-repeat: no-repeat;
  background-position: center;
}

.snle-detail-lead {
  margin: 1rem 0 1.8rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(10, 37, 64, 0.1);
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.7;
}

.snle-detail-text {
  color: #2f3e54;
  font-size: 1.02rem;
  line-height: 1.92;
}
.snle-detail-text + .snle-detail-text { margin-top: 1.2rem; }

/* Drop-cap éditorial sur la première lettre du long descriptif */
.snle-detail-text--dropcap::first-letter {
  float: left;
  margin: 0.25rem 0.65rem 0 0;
  color: var(--snle-gold);
  font-family: "Fraunces", Georgia, serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 0.9;
  text-shadow: 0 2px 0 rgba(10, 37, 64, 0.04);
}

.snle-detail-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.1rem;
  border-radius: 12px;
  background: rgba(10, 37, 64, 0.05);
  color: var(--snle-muted);
  font-style: italic;
}
.snle-detail-empty i { color: var(--snle-gold); }

/* Bloc PDF associé : carte horizontale élégante */
.snle-detail-pdf {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: stretch;
  padding: 1.6rem 1.7rem;
  border-radius: 1.1rem;
  background:
    linear-gradient(135deg, rgba(10, 37, 64, 0.97), rgba(15, 50, 86, 0.94));
  color: #f5f1e6;
  box-shadow: 0 30px 60px -40px rgba(10, 37, 64, 0.7);
  position: relative;
  overflow: hidden;
}
.snle-detail-pdf::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.35), transparent 70%);
  pointer-events: none;
}
.snle-detail-pdf__icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(201, 169, 97, 0.22);
  color: var(--snle-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
}
.snle-detail-pdf__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.snle-detail-pdf__eyebrow {
  color: var(--snle-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.snle-detail-pdf__title {
  margin: 0;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}
.snle-detail-pdf__lead {
  margin: 0;
  color: rgba(245, 241, 230, 0.78);
  font-size: 0.95rem;
  line-height: 1.65;
}
.snle-detail-pdf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.7rem;
}
/* Les boutons ctcl-source-btn--ghost sont sombres par défaut.
   Dans la carte PDF SNLE (fond navy), on inverse pour garder la lisibilité. */
.snle-detail-pdf .ctcl-source-btn--ghost {
  color: #f5f1e6;
  border-color: rgba(245, 241, 230, 0.45);
  background: rgba(245, 241, 230, 0.04);
}
.snle-detail-pdf .ctcl-source-btn--ghost:hover {
  background: rgba(245, 241, 230, 0.12);
  border-color: var(--snle-gold);
  color: #ffffff;
}

/* Footer : retour à la frise */
.snle-detail-footer {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(10, 37, 64, 0.1);
  display: flex;
  justify-content: center;
}
.snle-back-link--ground {
  color: var(--snle-navy);
  border: 1px solid rgba(10, 37, 64, 0.2);
  padding: 0.6rem 1.1rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.snle-back-link--ground:hover {
  background: var(--snle-navy);
  color: #ffffff;
}

/* ════════════════════════════════════════════════════════════════
   FONDS DE SECTION — pattern réutilisable .bg-pattern
   Affiche une image historique en arrière-plan d'une section
   (PAS d'un hero). Pattern visible mais atténué via blur léger
   + voile coloré (navy ou gold/cream) qui permet d'alterner les
   ambiances en zigzag sur une page (section navy → gold → navy…).

   Usage HTML :
     <section class="bg-pattern bg-pattern--navy bg-pattern--parchemin">
       <div class="container"> … contenu … </div>
     </section>

   Modificateurs disponibles :
     • Couleur du voile :
         .bg-pattern--navy   (texte clair, voile bleu sombre)
         .bg-pattern--gold   (texte sombre, voile crème/or chaud)
     • Image source :
         .bg-pattern--carte-navigation
         .bg-pattern--carte-monde
         .bg-pattern--carte-boussole
         .bg-pattern--parchemin
         .bg-pattern--papier-dechire
         .bg-pattern--collage-presse
         .bg-pattern--journal-mono
         .bg-pattern--museum-archives
         .bg-pattern--museum-galerie

   ════════════════════════════════════════════════════════════════ */

/* Base safety : les pages habillées avec bg-pattern reçoivent un
   fond navy par défaut (couleur du footer) pour éviter tout
   « débordement blanc » entre la dernière section et le footer.
   Les sections avec bg-pattern ou leur propre couleur s'affichent
   PAR-DESSUS ce fond — aucun changement visible sur ces sections. */
main.snle-page,
main.ctcl-page {
  background-color: #06182b;
}

.bg-pattern {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Calque image (sous le voile, sous le contenu) */
.bg-pattern::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.03);
  /* Filter par défaut — overridé par les variantes navy/gold */
  filter: blur(2px);
  pointer-events: none;
}

/* Calque voile coloré (au-dessus de l'image, sous le contenu) */
.bg-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Contenu remonté au-dessus des deux calques */
.bg-pattern > .container,
.bg-pattern > * {
  position: relative;
  z-index: 1;
}

/* ── Variantes de voile : NAVY (sombre, texte clair) ───────────
   Le filter `sepia + hue-rotate(190deg)` remappe les tons sépia
   naturels de l'image en TONS NAVY/BLEU, créant un effet monochrome
   bleu profond qui dialogue avec le voile navy au lieu de jurer. */
.bg-pattern--navy {
  color: #f5f1e6;
}
.bg-pattern--navy::before {
  filter:
    blur(2px)
    sepia(100%)
    hue-rotate(190deg)
    saturate(0.85)
    brightness(0.55)
    contrast(1.1);
}
.bg-pattern--navy::after {
  background:
    linear-gradient(135deg,
      rgba(7, 29, 51, 0.86) 0%,
      rgba(10, 37, 64, 0.66) 50%,
      rgba(7, 29, 51, 0.9) 100%),
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.22), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(28, 76, 130, 0.3), transparent 60%);
}
/* Texte standard remappé pour la lisibilité sur fond sombre.
   Le `text-shadow` léger gomme tout résidu de texture sous le texte. */
.bg-pattern--navy h2,
.bg-pattern--navy h3 {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
.bg-pattern--navy p,
.bg-pattern--navy .ctcl-fnfl-section__header,
.bg-pattern--navy .snle-section-kicker {
  color: rgba(245, 241, 230, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* ── Variantes de voile : GOLD/CREAM (clair, texte sombre) ─────
   Filtres `sepia + saturate` boostent les chauds : la texture
   semble baignée d'or et de cuivre, en harmonie avec le voile
   crème. Image plus brillante (0.98) pour qu'elle reste visible
   à travers le voile clair. */
.bg-pattern--gold {
  /* Pas d'override de color : on garde la navy par défaut */
}
.bg-pattern--gold::before {
  filter:
    blur(2px)
    sepia(55%)
    hue-rotate(-8deg)
    saturate(1.35)
    brightness(0.98)
    contrast(1.05);
}
.bg-pattern--gold::after {
  background:
    linear-gradient(135deg,
      rgba(247, 241, 228, 0.74) 0%,
      rgba(245, 224, 179, 0.5) 50%,
      rgba(247, 241, 228, 0.78) 100%),
    radial-gradient(ellipse at bottom left, rgba(201, 169, 97, 0.28), transparent 55%),
    radial-gradient(ellipse at top right, rgba(232, 197, 117, 0.22), transparent 60%);
}

/* ── Mappings image → fichier source ─────────────────────────── */
.bg-pattern--carte-navigation::before {
  background-image: url("../../contenus/images/fonds/fond-carte-ancienne-navigation.jpg");
}
.bg-pattern--carte-monde::before {
  background-image: url("../../contenus/images/fonds/fond-carte-monde-ancienne.jpg");
}
.bg-pattern--carte-boussole::before {
  background-image: url("../../contenus/images/fonds/fond-carte-marine-boussole.jpg");
}
.bg-pattern--parchemin::before {
  background-image: url("../../contenus/images/fonds/fond-parchemin-cartes-anciennes.jpg");
}
.bg-pattern--papier-dechire::before {
  background-image: url("../../contenus/images/fonds/fond-papier-ancien-journal-dechire.jpg");
}
.bg-pattern--collage-presse::before {
  background-image: url("../../contenus/images/fonds/fond-collage-presse-ancienne.jpg");
}
.bg-pattern--journal-mono::before {
  background-image: url("../../contenus/images/fonds/fond-journal-ancien-monochrome.jpg");
}
.bg-pattern--museum-archives::before {
  background-image: url("../../contenus/ct-cl/historique/images/fin.jpg");
}
.bg-pattern--museum-galerie::before {
  background-image: url("../../contenus/ct-cl/historique/images/milieu.jpg");
}

/* Ken Burns lent sur le fond pour donner une respiration cinéma */
.bg-pattern--ken-burns::before {
  animation: bgPatternKen 30s cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
}
@keyframes bgPatternKen {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1%, -0.6%, 0); }
}

/* ── Surclassements pour sections existantes ────────────────────
   Quand une section a déjà un fond crème (intro/list/featured),
   on désactive le `background` natif pour laisser passer le pattern. */
.snle-actu-featured.bg-pattern,
.snle-actu-list.bg-pattern,
.snle-doc-tableau.bg-pattern,
.snle-doc-faslane.bg-pattern,
.snle-actu-list.bg-pattern,
.ctcl-intro.bg-pattern,
.snle-intro.bg-pattern,
.ctcl-fnfl-section.bg-pattern,
.ctcl-fnfl-section--alt.bg-pattern {
  background: transparent;
}

/* En mode NAVY, on assombrit les cartes blanches existantes
   pour qu'elles tranchent bien avec le fond. */
.bg-pattern--navy .snle-actu-card,
.bg-pattern--navy .snle-cat-card,
.bg-pattern--navy .ctcl-fnfl-card {
  /* Cartes blanches restent blanches : contraste naturel */
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.55);
}

/* En mode NAVY, surcharger le header de section pour rester lisible */
.bg-pattern--navy .snle-actu-list__header h2,
.bg-pattern--navy .snle-doc-faslane__header h2,
.bg-pattern--navy .snle-actu-featured__title,
.bg-pattern--navy .ctcl-fnfl-section__header h2,
.bg-pattern--navy .snle-doc-tableau__body h2 { color: #ffffff; }
.bg-pattern--navy .snle-actu-featured__lead,
.bg-pattern--navy .snle-doc-tableau__text,
.bg-pattern--navy .snle-doc-tableau__lead,
.bg-pattern--navy .ctcl-fnfl-section__header p { color: rgba(245, 241, 230, 0.85); }

/* ── Responsive : on garde l'effet mais on réduit le blur ──── */
@media (max-width: 767.98px) {
  .bg-pattern--navy::before { filter: blur(1.5px) brightness(0.38) saturate(0.7); }
  .bg-pattern--gold::before { filter: blur(1.5px) brightness(0.9) saturate(0.8) sepia(0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-pattern--ken-burns::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   SNLE — PAGE ACTUALITÉS (refonte premium)
   Hero featured avec parallax + halos + grille stats. "À la une"
   en split image/texte + tilt 3D. Grille de cartes premium avec
   image zoom + badges date + boutons "Lire la suite". Modal de
   lecture avec image cliquable (GLightbox), date, titre, contenu
   complet (nl2br).
   ════════════════════════════════════════════════════════════════ */

/* ── Hero featured ──────────────────────────────────────────────── */
.snle-actu-hero {
  position: relative;
  overflow: hidden;
  padding: 9rem 0 5rem;
  color: #ffffff;
  background:
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(7, 29, 51, 0.97), rgba(10, 37, 64, 0.94) 50%, rgba(15, 45, 78, 0.93));
}
.snle-actu-hero__bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(28px) saturate(0.75) brightness(0.45);
  opacity: 0.6;
  z-index: 0;
  transform: scale(1.06);
}
.snle-actu-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(7, 29, 51, 0.35), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(7, 29, 51, 0.55) 100%);
}
.snle-actu-hero__content {
  position: relative;
  z-index: 3;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.snle-actu-hero__content h1 {
  margin: 1.1rem 0 1.2rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.snle-actu-hero__content h1 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-actu-hero__content p {
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  max-width: 60ch;
  line-height: 1.7;
}

/* Stats row */
.snle-actu-hero__stats {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.6rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(245, 241, 230, 0.18);
  backdrop-filter: blur(10px);
}
.snle-actu-hero__stat {
  padding: 0.75rem 1.4rem;
  border-radius: 0.85rem;
  background: rgba(7, 29, 51, 0.4);
  border: 1px solid rgba(201, 169, 97, 0.18);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 140px;
}
.snle-actu-hero__stat-num {
  color: var(--snle-gold);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1;
}
.snle-actu-hero__stat-label {
  color: rgba(245, 241, 230, 0.72);
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── « À la une » ───────────────────────────────────────────────── */
.snle-actu-featured {
  padding: 5.5rem 0;
  background:
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.1), transparent 55%),
    var(--snle-cream, #f7f1e4);
}
.snle-actu-featured__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}

.snle-actu-featured__media {
  display: block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}
.snle-actu-featured__media-frame {
  position: relative;
  border-radius: 1.3rem;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.16) inset,
    0 40px 80px -40px rgba(10, 37, 64, 0.55);
  aspect-ratio: 4 / 3;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.snle-actu-featured__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-actu-featured__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.snle-actu-featured__media:hover .snle-actu-featured__media-frame {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.4) inset,
    0 50px 100px -40px rgba(10, 37, 64, 0.7);
}
.snle-actu-featured__media:hover .snle-actu-featured__media-frame img { transform: scale(1.04); }
.snle-actu-featured__media:hover .snle-actu-featured__shine { transform: translateX(100%); }

.snle-actu-featured__media--ghost {
  border-radius: 1.3rem;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(10, 37, 64, 0.06), rgba(201, 169, 97, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10, 37, 64, 0.25);
  font-size: 4rem;
  border: 1px dashed rgba(10, 37, 64, 0.15);
}

.snle-actu-featured__body { padding: 0.5rem 0; }

.snle-actu-featured__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--snle-gold);
  color: var(--snle-navy);
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px -16px rgba(201, 169, 97, 0.7);
}
.snle-actu-featured__badge i { font-size: 0.9rem; }

.snle-actu-featured__date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.85rem 0 0.6rem;
  color: var(--snle-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.snle-actu-featured__date i { color: var(--snle-gold); }

.snle-actu-featured__title {
  margin: 0.3rem 0 1.1rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.snle-actu-featured__lead {
  margin: 0 0 1.6rem;
  color: #2f3e54;
  font-size: 1.02rem;
  line-height: 1.85;
}

.snle-actu-featured__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--snle-navy);
  background: var(--snle-navy);
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 36px -18px rgba(10, 37, 64, 0.7);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.snle-actu-featured__btn:hover {
  background: var(--snle-gold);
  color: var(--snle-navy);
  border-color: var(--snle-gold);
  transform: translateY(-3px);
  box-shadow: 0 22px 38px -16px rgba(201, 169, 97, 0.65);
}
.snle-actu-featured__btn i { font-size: 1rem; }

/* ── Liste : header + grille de cartes ─────────────────────────── */
.snle-actu-list {
  padding: 5rem 0 6rem;
  background:
    linear-gradient(180deg, var(--snle-cream, #f7f1e4) 0%, #ede4cf 100%);
}
.snle-actu-list__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.snle-actu-list__header h2 {
  margin: 0.6rem 0 1rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
}
.snle-actu-list__header h2 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-actu-list__header p {
  margin: 0;
  color: var(--snle-muted);
  line-height: 1.75;
}

.snle-actu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.6rem;
}

/* ── Carte actualité ───────────────────────────────────────────── */
.snle-actu-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(10, 37, 64, 0.08);
  box-shadow: 0 24px 50px -32px rgba(10, 37, 64, 0.4);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
.snle-actu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 70px -32px rgba(10, 37, 64, 0.55);
  border-color: rgba(201, 169, 97, 0.55);
}

.snle-actu-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: #0a2540;
}
.snle-actu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-actu-card:hover .snle-actu-card__media img { transform: scale(1.08); }

.snle-actu-card__media--ghost {
  background: linear-gradient(135deg, rgba(10, 37, 64, 0.07), rgba(201, 169, 97, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10, 37, 64, 0.3);
  font-size: 3rem;
}

.snle-actu-card__date-badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(7, 29, 51, 0.85);
  color: var(--snle-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.snle-actu-card__zoom {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(7, 29, 51, 0.85);
  color: var(--snle-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.snle-actu-card:hover .snle-actu-card__zoom {
  opacity: 1;
  transform: scale(1);
}

.snle-actu-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.3rem 1.4rem 1.5rem;
  flex: 1;
}
.snle-actu-card__title {
  margin: 0;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.28;
}
.snle-actu-card__lead {
  margin: 0;
  color: var(--snle-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  flex: 1;
}
.snle-actu-card__more {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--snle-navy);
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1.5px solid var(--snle-gold);
  padding-bottom: 0.15rem;
  transition: color 0.3s ease, gap 0.3s ease, border-color 0.3s ease;
}
.snle-actu-card__more:hover {
  color: var(--snle-gold);
  gap: 0.7rem;
  border-color: var(--snle-navy);
}
.snle-actu-card__more i { font-size: 0.92rem; }

/* ── Modal de lecture ──────────────────────────────────────────── */
.snle-actu-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
}
.snle-actu-modal[hidden] { display: none; }
.snle-actu-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  animation: snleActuModalFadeIn 0.25s ease;
}
@keyframes snleActuModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.snle-actu-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 14, 27, 0.78);
  backdrop-filter: blur(8px);
}

.snle-actu-modal__dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  border-radius: 1.4rem;
  background: #ffffff;
  border: 1px solid rgba(201, 169, 97, 0.3);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.15) inset,
    0 50px 100px -30px rgba(0, 0, 0, 0.7);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-actu-modal.is-open .snle-actu-modal__dialog {
  transform: translateY(0) scale(1);
}

.snle-actu-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(245, 241, 230, 0.4);
  background: rgba(7, 29, 51, 0.85);
  color: var(--snle-gold);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.snle-actu-modal__close:hover {
  background: var(--snle-gold);
  color: var(--snle-navy);
  transform: scale(1.08);
}

.snle-actu-modal__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: #0a2540;
  max-height: 60vh;
  cursor: zoom-in;
  text-decoration: none;
}
.snle-actu-modal__media img {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
}
.snle-actu-modal__zoom {
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(7, 29, 51, 0.85);
  color: var(--snle-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.snle-actu-modal__body {
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.8rem) clamp(2rem, 3vw, 3rem);
}

.snle-actu-modal__date {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.16);
  color: #8a6c2b;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.snle-actu-modal__date i { color: var(--snle-gold); }

.snle-actu-modal__title {
  margin: 0 0 1.2rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.snle-actu-modal__title em {
  font-style: italic;
  color: var(--snle-gold);
}

.snle-actu-modal__text {
  color: #2f3e54;
  font-size: 1.02rem;
  line-height: 1.92;
}
.snle-actu-modal__text br { margin-bottom: 0.7rem; }

/* Bloque le scroll du body quand modal ouvert */
body.snle-actu-modal-open { overflow: hidden; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .snle-actu-featured__inner { grid-template-columns: 1fr; gap: 2rem; }
  .snle-actu-hero__stats { gap: 0.55rem; padding: 0.5rem; }
  .snle-actu-hero__stat { min-width: auto; padding: 0.7rem 1.1rem; }
}

@media (max-width: 767.98px) {
  .snle-actu-hero { padding: 7rem 0 4rem; }
  .snle-actu-featured { padding: 3.5rem 0; }
  .snle-actu-list { padding: 3.5rem 0 4.5rem; }
  .snle-actu-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .snle-actu-modal { padding: 1rem 0.6rem; }
  .snle-actu-modal__dialog { max-height: calc(100vh - 2rem); }
  .snle-actu-modal__close { top: 0.7rem; right: 0.7rem; width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .snle-actu-featured__media-frame,
  .snle-actu-featured__media-frame img,
  .snle-actu-featured__shine,
  .snle-actu-card,
  .snle-actu-card__media img,
  .snle-actu-card__zoom,
  .snle-actu-card__more,
  .snle-actu-modal,
  .snle-actu-modal__dialog,
  .snle-actu-modal__close,
  .snle-actu-featured__btn {
    transition: none;
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   SNLE — PAGE DOCUMENTATION & MÉMOIRE
   Hero featured (tableau Dupont-Quinchon), section tableau,
   coverflow 3D pour l'album de patrouille, vidéo Faslane,
   carte PowerPoint téléchargeable. Palette navy/gold/cream.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero featured ──────────────────────────────────────────────── */
.snle-doc-hero {
  position: relative;
  overflow: hidden;
  padding: 9rem 0 5.5rem;
  color: #ffffff;
  background:
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(7, 29, 51, 0.95), rgba(10, 37, 64, 0.92) 50%, rgba(15, 45, 78, 0.92));
}
.snle-doc-hero__bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(12px) saturate(0.85) brightness(0.5);
  opacity: 0.65;
  z-index: 0;
  transform: scale(1.05);
}
.snle-doc-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(7, 29, 51, 0.3), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(7, 29, 51, 0.55) 100%);
}
.snle-doc-hero__content {
  position: relative;
  z-index: 3;
  max-width: 820px;
  text-align: center;
  margin: 0 auto;
}
.snle-doc-hero__content h1 {
  margin: 1.1rem 0 1.2rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.snle-doc-hero__content h1 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-doc-hero__content p {
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  max-width: 60ch;
  line-height: 1.7;
}

/* Quick-nav chips dans le hero */
.snle-doc-hero__quick {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.snle-doc-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(245, 241, 230, 0.25);
  color: #f5f1e6;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.snle-doc-hero__chip:hover {
  background: var(--snle-gold);
  border-color: var(--snle-gold);
  color: var(--snle-navy);
  transform: translateY(-2px);
}
.snle-doc-hero__chip i { color: var(--snle-gold); transition: color 0.3s ease; }
.snle-doc-hero__chip:hover i { color: var(--snle-navy); }

/* ── Section tableau Dupont-Quinchon ───────────────────────────── */
.snle-doc-tableau {
  padding: 6rem 0;
  background:
    radial-gradient(ellipse at top left, rgba(201, 169, 97, 0.1), transparent 55%),
    var(--snle-cream, #f7f1e4);
}
.snle-doc-tableau__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.snle-doc-tableau__media { margin: 0; }
.snle-doc-tableau__frame {
  position: relative;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.18) inset,
    0 35px 75px -40px rgba(10, 37, 64, 0.65);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-doc-tableau__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  background: #ffffff;
}
.snle-doc-tableau__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.snle-doc-tableau__media:hover .snle-doc-tableau__frame { transform: translateY(-4px); }
.snle-doc-tableau__media:hover .snle-doc-tableau__shine { transform: translateX(100%); }
.snle-doc-tableau__media figcaption {
  margin-top: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--snle-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.snle-doc-tableau__media figcaption i { color: var(--snle-gold); }

.snle-doc-tableau__body h2 {
  margin: 0.6rem 0 1.2rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.snle-doc-tableau__body h2 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-doc-tableau__lead {
  margin: 0 0 1.2rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.65;
}
.snle-doc-tableau__text {
  margin: 0;
  color: #2f3e54;
  font-size: 1rem;
  line-height: 1.85;
}

/* ── Section Album patrouille (sombre, parallax) ──────────────── */
.snle-doc-album {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0;
  color: #ffffff;
}
.snle-doc-album__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 38%;
  /* Image immersive nette (SNLE en mer) plutôt qu'un flou abstrait :
     on assombrit et sature légèrement pour garder le texte lisible. */
  filter: saturate(1.05) brightness(0.6) contrast(1.03);
  z-index: 0;
  transform: scale(1.06);
}
.snle-doc-album__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Overlay dégradé : clair en haut (l'image respire) et plus dense en
     bas (lisibilité du titre et de la carte). Touche dorée discrète. */
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(201, 169, 97, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(6, 22, 40, 0.70) 0%, rgba(8, 29, 51, 0.80) 45%, rgba(10, 37, 64, 0.93) 100%);
}
.snle-doc-album::before,
.snle-doc-album::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 1;
  pointer-events: none;
}
.snle-doc-album::before {
  top: 0;
  background: linear-gradient(180deg, rgba(6, 22, 40, 0.55), transparent);
}
.snle-doc-album::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(6, 20, 37, 0.65), transparent);
}

/* ── Accès réservé (visiteur non connecté) ─────────────────────────
   Carte élégante remplaçant le contenu média pour les visiteurs, tout
   en conservant la présentation de l'album au-dessus. */
.snle-doc-locked {
  position: relative;
  max-width: 560px;
  margin: 1.25rem auto 0;
  padding: 2.75rem 2rem;
  text-align: center;
  border-radius: 1.35rem;
  border: 1px solid rgba(201, 169, 97, 0.30);
  background: linear-gradient(180deg, rgba(12, 34, 58, 0.55), rgba(8, 24, 44, 0.66));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #f5f1e6;
}
.snle-doc-locked__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 1.15rem;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.16);
  border: 1px solid rgba(201, 169, 97, 0.42);
  color: var(--snle-gold);
  font-size: 1.4rem;
}
.snle-doc-locked h3 {
  margin: 0 0 0.65rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
}
.snle-doc-locked p {
  margin: 0 auto 1.65rem;
  max-width: 44ch;
  color: rgba(245, 241, 230, 0.82);
  line-height: 1.7;
  font-size: 0.95rem;
}
.snle-doc-locked__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #d8b45e, #c9a34a);
  color: #08243f;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(201, 169, 97, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.snle-doc-locked__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(201, 169, 97, 0.72);
  filter: brightness(1.05);
  color: #08243f;
}
/* Variante sur fond clair (section Faslane, parchemin) : texte navy. */
.snle-doc-locked--video {
  background: #ffffff;
  border-color: rgba(10, 37, 64, 0.14);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 24px 55px -30px rgba(10, 37, 64, 0.45);
  color: var(--snle-navy);
}
.snle-doc-locked--video h3 { color: var(--snle-navy); }
.snle-doc-locked--video p { color: var(--snle-muted); }
.snle-doc-album__content { position: relative; z-index: 2; }

.snle-doc-album__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.snle-doc-album__header h2 {
  margin: 1rem 0 1rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 500;
}
.snle-doc-album__header h2 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-doc-album__header p {
  margin: 0;
  color: rgba(245, 241, 230, 0.82);
  line-height: 1.75;
}

/* ── COVERFLOW 3D ───────────────────────────────────────────────── */
.snle-doc-coverflow {
  position: relative;
  perspective: 1800px;
  padding: 1rem 0 3rem;
}

.snle-doc-coverflow__track {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 3.5rem clamp(2rem, 30vw, 32vw);
  transform-style: preserve-3d;
  scroll-behavior: smooth;
}
.snle-doc-coverflow__track::-webkit-scrollbar { display: none; }
.snle-doc-coverflow__track:focus-visible { outline: 2px solid var(--snle-gold); outline-offset: 4px; }

.snle-doc-coverflow__card {
  flex: 0 0 clamp(220px, 28vw, 340px);
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;
  border-radius: 1.1rem;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  transform-origin: center center;
  /* Default state — sera mis à jour par le JS au scroll. */
  transform: perspective(1800px) rotateY(0deg) translateZ(0) scale(1);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, box-shadow 0.4s ease;
  box-shadow: 0 25px 60px -28px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  will-change: transform, opacity;
}

.snle-doc-coverflow__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  border: 1px solid rgba(201, 169, 97, 0.3);
  background: #0a2540;
}
.snle-doc-coverflow__card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.snle-doc-coverflow__card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.snle-doc-coverflow__card.is-active .snle-doc-coverflow__card-shine { transform: translateX(100%); }

.snle-doc-coverflow__card-num {
  position: absolute;
  top: 0.8rem;
  left: 0.9rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(7, 29, 51, 0.82);
  color: var(--snle-gold);
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 2;
}
.snle-doc-coverflow__card-zoom {
  position: absolute;
  bottom: 0.8rem;
  right: 0.9rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(7, 29, 51, 0.78);
  color: var(--snle-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}
.snle-doc-coverflow__card.is-active .snle-doc-coverflow__card-zoom {
  opacity: 1;
  transform: scale(1);
}
.snle-doc-coverflow__card.is-active {
  box-shadow:
    0 0 0 1px var(--snle-gold) inset,
    0 50px 100px -30px rgba(0, 0, 0, 0.85),
    0 0 60px -10px rgba(201, 169, 97, 0.5);
}
.snle-doc-coverflow__card--preview {
  margin: 0;
  cursor: default;
  user-select: none;
}
.snle-doc-coverflow__card--preview img {
  user-select: none;
  -webkit-user-drag: none;
}

/* Boutons navigation prev/next */
.snle-doc-coverflow__nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(245, 241, 230, 0.3);
  background: rgba(10, 37, 64, 0.7);
  color: var(--snle-gold);
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.snle-doc-coverflow__nav:hover {
  background: var(--snle-gold);
  color: var(--snle-navy);
  border-color: var(--snle-gold);
  transform: translateY(-50%) scale(1.08);
}
.snle-doc-coverflow__nav--prev { left: 1.5rem; }
.snle-doc-coverflow__nav--next { right: 1.5rem; }

/* Bloc bio commandant + CTA PDF */
.snle-doc-album__credit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.8rem 2rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(245, 241, 230, 0.16);
  backdrop-filter: blur(8px);
}
.snle-doc-album__bio { color: rgba(245, 241, 230, 0.88); }
.snle-doc-album__bio-eyebrow {
  display: inline-block;
  color: var(--snle-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.snle-doc-album__bio h3 {
  margin: 0 0 0.7rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
}
.snle-doc-album__bio p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
}
.snle-doc-album__bio em {
  font-style: italic;
  color: var(--snle-gold);
}

/* ── Section Faslane ────────────────────────────────────────────── */
.snle-doc-faslane {
  padding: 6rem 0;
  background:
    radial-gradient(ellipse at bottom right, rgba(201, 169, 97, 0.08), transparent 50%),
    var(--snle-cream, #f7f1e4);
}
.snle-doc-faslane__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.snle-doc-faslane__header h2 {
  margin: 0.6rem 0 1rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
}
.snle-doc-faslane__header h2 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-doc-faslane__header p {
  margin: 0;
  color: var(--snle-muted);
  line-height: 1.75;
}

.snle-doc-faslane__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  /* Empêche le stretch automatique des items du grid :
     chaque carte (vidéo / PPS) prend sa hauteur naturelle
     pour éviter qu'une carte plus courte ne s'étire en vide blanc. */
  align-items: start;
}
.snle-doc-faslane__grid--single {
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
}

/* Lecteur vidéo */
.snle-doc-video {
  display: flex;
  flex-direction: column;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow: 0 30px 70px -36px rgba(10, 37, 64, 0.5);
}
.snle-doc-video__frame {
  position: relative;
  background: #000000;
}
.snle-doc-video__frame video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}
.snle-doc-video__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(7, 29, 51, 0.78);
  color: var(--snle-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
.snle-doc-video__body { padding: 1.4rem 1.6rem 1.6rem; }
.snle-doc-video__body h3 {
  margin: 0 0 0.6rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
}
.snle-doc-video__body p {
  margin: 0 0 1.1rem;
  color: var(--snle-muted);
  line-height: 1.7;
}
.snle-doc-video__download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(10, 37, 64, 0.2);
  color: var(--snle-navy);
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.snle-doc-video__download:hover {
  background: var(--snle-navy);
  color: #ffffff;
  border-color: var(--snle-navy);
  transform: translateY(-2px);
}
.snle-doc-preview-only {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 999px;
  color: var(--snle-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.snle-doc-video__body .snle-doc-preview-only {
  color: var(--snle-navy);
  border-color: rgba(10, 37, 64, 0.18);
}

/* Carte PPS */
.snle-doc-pps {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 2rem 1.8rem 1.8rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, rgba(10, 37, 64, 0.97), rgba(15, 50, 86, 0.94));
  color: #f5f1e6;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 70px -36px rgba(10, 37, 64, 0.7);
}
.snle-doc-pps::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.3), transparent 70%);
  pointer-events: none;
}
.snle-doc-pps__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(201, 169, 97, 0.22);
  color: var(--snle-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.snle-doc-pps__type {
  color: var(--snle-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.snle-doc-pps h3 {
  margin: 0;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.snle-doc-pps p {
  margin: 0;
  color: rgba(245, 241, 230, 0.78);
  font-size: 0.92rem;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}
.snle-doc-pps code {
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: rgba(201, 169, 97, 0.18);
  color: var(--snle-gold);
  font-family: monospace;
  font-size: 0.85em;
}
.snle-doc-pps__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.6rem;
  position: relative;
  z-index: 1;
}
.snle-doc-pps__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(245, 241, 230, 0.65);
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
}
.snle-doc-pps__meta i { color: var(--snle-gold); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .snle-doc-tableau__inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .snle-doc-faslane__grid { grid-template-columns: 1fr; }
  .snle-doc-album__credit { grid-template-columns: 1fr; gap: 1.4rem; }
  .snle-doc-coverflow__track { padding: 3rem 18vw; }
}

@media (max-width: 767.98px) {
  .snle-doc-hero { padding: 7rem 0 4rem; }
  .snle-doc-tableau { padding: 4rem 0; }
  .snle-doc-album { padding: 4.5rem 0; }
  .snle-doc-faslane { padding: 4rem 0; }
  .snle-doc-coverflow__track { padding: 2.5rem 12vw 3rem; gap: 0.8rem; }
  .snle-doc-coverflow__card { flex-basis: 65vw; }
  .snle-doc-coverflow__nav { width: 42px; height: 42px; font-size: 1.1rem; }
  .snle-doc-coverflow__nav--prev { left: 0.6rem; }
  .snle-doc-coverflow__nav--next { right: 0.6rem; }
  .snle-doc-album__credit { padding: 1.4rem 1.2rem; }
  .snle-doc-video__body { padding: 1.2rem 1.2rem 1.4rem; }
  .snle-doc-pps { padding: 1.6rem 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .snle-doc-coverflow__card { transition: none; transform: none !important; opacity: 1 !important; }
  .snle-doc-tableau__frame, .snle-doc-tableau__shine,
  .snle-doc-coverflow__card-shine, .snle-doc-video__download,
  .snle-doc-hero__chip, .snle-doc-coverflow__nav {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   SNLE — PAGE INSIGNES & TAPE DE BOUCHE
   Hero éditorial avec emblème featured, features split alternées,
   galerie « Cloche » avec parallax, duo tape de bouche, grille
   héraldique. Palette navy/gold/cream partagée.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero featured ──────────────────────────────────────────────── */
.snle-insignes-hero {
  position: relative;
  overflow: hidden;
  padding: 8.5rem 0 5rem;
  color: #ffffff;
  background:
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(7, 29, 51, 0.97), rgba(10, 37, 64, 0.95) 50%, rgba(15, 45, 78, 0.93));
}
.snle-insignes-hero__bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(36px) saturate(0.85) brightness(0.45);
  opacity: 0.55;
  z-index: 0;
  transform: scale(1.06);
}
.snle-insignes-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(7, 29, 51, 0.3), transparent 50%),
    linear-gradient(180deg, transparent 0%, rgba(7, 29, 51, 0.4) 100%);
}
.snle-insignes-hero__content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 3rem;
  align-items: center;
}
.snle-insignes-hero__text h1 {
  margin: 1rem 0 1.1rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.snle-insignes-hero__text h1 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-insignes-hero__text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  max-width: 56ch;
  line-height: 1.7;
}

/* Emblème featured (Aiglon) à droite */
.snle-insignes-hero__emblem {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.snle-insignes-hero__emblem-frame {
  position: relative;
  width: clamp(220px, 28vw, 340px);
  aspect-ratio: 3 / 4;
  border-radius: 1.2rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 169, 97, 0.35);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.15) inset,
    0 30px 70px -36px rgba(0, 0, 0, 0.85),
    0 0 50px -10px rgba(201, 169, 97, 0.4);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-insignes-hero__emblem-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.snle-insignes-hero__emblem-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.snle-insignes-hero__emblem:hover .snle-insignes-hero__emblem-frame {
  transform: translateY(-4px) scale(1.02);
}
.snle-insignes-hero__emblem:hover .snle-insignes-hero__emblem-shine {
  transform: translateX(100%);
}
.snle-insignes-hero__emblem figcaption {
  color: rgba(255, 255, 255, 0.7);
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Feature split (Aiglon, Autocollant) ────────────────────────── */
.snle-ins-feature {
  padding: 5.5rem 0;
  background: var(--snle-cream, #f7f1e4);
  position: relative;
  overflow: hidden;
}
.snle-ins-feature--gold {
  background:
    radial-gradient(ellipse at top left, rgba(201, 169, 97, 0.12), transparent 50%),
    var(--snle-cream, #f7f1e4);
}
.snle-ins-feature__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}
.snle-ins-feature--reverse .snle-ins-feature__inner {
  grid-template-columns: 1.1fr 1fr;
}

/* Media : cadre avec halo doré + tilt */
.snle-ins-feature__media {
  margin: 0;
  position: relative;
}
.snle-ins-feature__media-frame {
  position: relative;
  border-radius: 1.3rem;
  overflow: hidden;
  border: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.18) inset,
    0 30px 70px -40px rgba(10, 37, 64, 0.6);
  background: #ffffff;
}
.snle-ins-feature__media-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  background: linear-gradient(180deg, #ffffff, #f7f1e4);
}
.snle-ins-feature__halo {
  position: absolute;
  z-index: -1;
  inset: -25px;
  border-radius: 2rem;
  background: radial-gradient(ellipse at center, rgba(201, 169, 97, 0.35), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.7;
}

/* Texte feature */
.snle-ins-feature__body h2 {
  margin: 0.6rem 0 1.2rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.snle-ins-feature__body h2 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-ins-feature__lead {
  margin: 0 0 1.2rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.65;
}
.snle-ins-feature__text {
  margin: 0 0 1.6rem;
  color: #2f3e54;
  font-size: 1rem;
  line-height: 1.85;
}

/* Bouton premium */
.snle-ins-feature__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  background: var(--snle-navy);
  color: #ffffff;
  border: 1px solid var(--snle-navy);
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 16px 32px -16px rgba(10, 37, 64, 0.65);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}
.snle-ins-feature__btn i { font-size: 1rem; }
.snle-ins-feature__btn:hover {
  background: var(--snle-gold);
  border-color: var(--snle-gold);
  color: var(--snle-navy);
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -16px rgba(201, 169, 97, 0.6);
}
.snle-ins-feature__btn--light {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(245, 241, 230, 0.45);
  color: #f5f1e6;
  backdrop-filter: blur(6px);
}
.snle-ins-feature__btn--light:hover {
  background: var(--snle-gold);
  border-color: var(--snle-gold);
  color: var(--snle-navy);
}

/* ── Galerie « La Cloche » ──────────────────────────────────────── */
.snle-ins-cloche {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
  color: #ffffff;
}
.snle-ins-cloche__bg {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(20px) saturate(0.8) brightness(0.4);
  opacity: 0.7;
  z-index: 0;
  transform: scale(1.1);
}
.snle-ins-cloche__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at top, rgba(201, 169, 97, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(7, 29, 51, 0.85), rgba(10, 37, 64, 0.92));
}
.snle-ins-cloche__content { position: relative; z-index: 2; }

.snle-ins-cloche__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.snle-ins-cloche__header h2 {
  margin: 1rem 0 1rem;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 500;
}
.snle-ins-cloche__header h2 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-ins-cloche__header p {
  margin: 0;
  color: rgba(245, 241, 230, 0.8);
  line-height: 1.75;
  font-size: 1rem;
}

.snle-ins-cloche__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.snle-ins-cloche__item {
  position: relative;
  display: block;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 169, 97, 0.25);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.snle-ins-cloche__item-inner {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.snle-ins-cloche__item-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-ins-cloche__item:hover { transform: translateY(-5px); box-shadow: 0 25px 50px -20px rgba(0, 0, 0, 0.5); border-color: var(--snle-gold); }
.snle-ins-cloche__item:hover .snle-ins-cloche__item-inner img { transform: scale(1.08); }
.snle-ins-cloche__item-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.snle-ins-cloche__item:hover .snle-ins-cloche__item-shine { transform: translateX(100%); }
.snle-ins-cloche__item-num {
  position: absolute;
  top: 0.6rem;
  left: 0.7rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(7, 29, 51, 0.78);
  color: var(--snle-gold);
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.snle-ins-cloche__item-label {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.4rem 0.65rem;
  border-radius: 0.6rem;
  background: rgba(7, 29, 51, 0.85);
  color: rgba(245, 241, 230, 0.95);
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.snle-ins-cloche__item:hover .snle-ins-cloche__item-label {
  opacity: 1;
  transform: translateY(0);
}
.snle-ins-cloche__cta {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

/* ── Duo « Tape de bouche » ─────────────────────────────────────── */
.snle-ins-tape {
  padding: 6rem 0;
  background:
    radial-gradient(ellipse at bottom right, rgba(201, 169, 97, 0.1), transparent 50%),
    var(--snle-cream, #f7f1e4);
}
.snle-ins-tape__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.snle-ins-tape__header h2 {
  margin: 0.6rem 0 1rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
}
.snle-ins-tape__header h2 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-ins-tape__header p {
  margin: 0;
  color: var(--snle-muted);
  line-height: 1.75;
}

.snle-ins-tape__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.8rem;
}
.snle-ins-tape__card {
  position: relative;
  background: #ffffff;
  border-radius: 1.3rem;
  overflow: hidden;
  border: 1px solid rgba(10, 37, 64, 0.08);
  box-shadow: 0 25px 60px -36px rgba(10, 37, 64, 0.4);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.snle-ins-tape__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 35px 70px -36px rgba(10, 37, 64, 0.55);
  border-color: rgba(201, 169, 97, 0.5);
}
.snle-ins-tape__card-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(10, 37, 64, 0.92);
  color: rgba(245, 241, 230, 0.95);
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.snle-ins-tape__card-tag--gold {
  background: var(--snle-gold);
  color: var(--snle-navy);
}
.snle-ins-tape__card-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f7f1e4);
}
.snle-ins-tape__card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 1.5rem;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-ins-tape__card:hover .snle-ins-tape__card-media img { transform: scale(1.05); }
.snle-ins-tape__card-body {
  padding: 1.4rem 1.6rem 1.8rem;
  border-top: 1px solid rgba(10, 37, 64, 0.06);
}
.snle-ins-tape__card-body h3 {
  margin: 0 0 0.5rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
}
.snle-ins-tape__card-body p {
  margin: 0;
  color: var(--snle-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
.snle-ins-tape__cta {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

/* ── Grille héraldique complémentaire ──────────────────────────── */
.snle-ins-extras {
  padding: 6rem 0;
  background:
    linear-gradient(180deg, var(--snle-cream, #f7f1e4) 0%, #ede4cf 100%);
}
.snle-ins-extras__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.snle-ins-extras__header h2 {
  margin: 0.6rem 0 1rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
}
.snle-ins-extras__header h2 em {
  font-style: italic;
  color: var(--snle-gold);
}
.snle-ins-extras__header p {
  margin: 0;
  color: var(--snle-muted);
  line-height: 1.75;
}

.snle-ins-extras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.4rem;
}
.snle-ins-extras__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(10, 37, 64, 0.08);
  box-shadow: 0 20px 45px -32px rgba(10, 37, 64, 0.4);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.snle-ins-extras__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -30px rgba(10, 37, 64, 0.5);
  border-color: rgba(201, 169, 97, 0.5);
}
.snle-ins-extras__card-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f7f1e4, #ede4cf);
  padding: 1rem;
}
.snle-ins-extras__card-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-ins-extras__card:hover .snle-ins-extras__card-media img { transform: scale(1.06); }
.snle-ins-extras__card-body {
  padding: 1rem 1.1rem 1.2rem;
  border-top: 1px solid rgba(10, 37, 64, 0.06);
}
.snle-ins-extras__card-body h3 {
  margin: 0 0 0.3rem;
  color: var(--snle-navy);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.snle-ins-extras__card-body p {
  margin: 0;
  color: var(--snle-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.snle-ins-extras__card-zoom {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 37, 64, 0.85);
  color: var(--snle-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.snle-ins-extras__card:hover .snle-ins-extras__card-zoom {
  opacity: 1;
  transform: scale(1);
}

/* Section catalogue PDF en bas de la page insignes */
.snle-ins-catalogue-section {
  padding: 5rem 0 1rem;
  background: linear-gradient(180deg, #ede4cf 0%, var(--snle-cream, #f7f1e4) 100%);
}
.snle-ins-catalogue-section .snle-catalogue { margin-top: 0; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .snle-insignes-hero__content { grid-template-columns: 1fr; gap: 2.2rem; }
  .snle-insignes-hero__emblem { align-self: center; }
  .snle-ins-feature__inner,
  .snle-ins-feature--reverse .snle-ins-feature__inner {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .snle-ins-feature--reverse .snle-ins-feature__body { order: 2; }
  .snle-ins-feature--reverse .snle-ins-feature__media { order: 1; }
}

@media (max-width: 767.98px) {
  .snle-insignes-hero { padding: 7rem 0 3.5rem; }
  .snle-ins-feature { padding: 3.5rem 0; }
  .snle-ins-cloche { padding: 4rem 0; }
  .snle-ins-tape { padding: 4rem 0; }
  .snle-ins-extras { padding: 4rem 0; }
  .snle-ins-catalogue-section { padding: 3rem 0 1rem; }
  .snle-ins-cloche__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
  .snle-ins-cloche__item-label { font-size: 0.65rem; padding: 0.3rem 0.5rem; }
  .snle-ins-tape__card-body { padding: 1.1rem 1.2rem 1.4rem; }
  .snle-ins-extras__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; }
}

/* ════════════════════════════════════════════════════════════════
   SNLE — CATALOGUE D'EXPOSITION (3 PDF sources)
   Bloc autonome avec encadré or, cartes premium navy/gold,
   ruban doré au hover, boutons "Consulter / Télécharger" propres.
   ════════════════════════════════════════════════════════════════ */
.snle-catalogue {
  margin: 5rem auto 0;
  max-width: 1180px;
  padding: 0 0 6rem;
  position: relative;
  z-index: 3;
}

.snle-catalogue__shell {
  padding: 0.55rem;
  border-radius: 2.25rem;
  background: linear-gradient(135deg,
    rgba(201, 169, 97, 0.45),
    rgba(201, 169, 97, 0.12),
    rgba(201, 169, 97, 0.45));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 60px 120px -60px rgba(4, 14, 27, 0.85),
    0 0 0 1px rgba(201, 169, 97, 0.32);
}

.snle-catalogue__core {
  padding: clamp(2.6rem, 4vw, 4rem) clamp(1.6rem, 3vw, 3rem);
  background: #f7f1e4;
  border-radius: calc(2.25rem - 0.55rem);
  position: relative;
}
.snle-catalogue__core::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(10, 37, 64, 0.06), transparent 50%);
}

.snle-catalogue__header {
  position: relative;
  text-align: center;
  margin-bottom: 2.6rem;
}

.snle-catalogue__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #8a6c2b;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.snle-catalogue__eyebrow-rule {
  display: inline-block;
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--snle-gold), transparent);
}

.snle-catalogue__title {
  margin: 0 0 1rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.75rem, 3.2vw, 2.55rem);
  font-weight: 500;
  color: var(--snle-navy);
  line-height: 1.2;
  text-wrap: balance;
}
.snle-catalogue__title em {
  font-style: italic;
  color: var(--snle-gold);
}

.snle-catalogue__lead {
  margin: 0 auto;
  max-width: 62ch;
  color: var(--snle-muted);
  line-height: 1.75;
  font-size: 1rem;
}

.snle-catalogue__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.4rem;
}

/* ── Carte PDF ──────────────────────────────────────────────────── */
.snle-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1.3rem;
  border: 1px solid rgba(10, 37, 64, 0.08);
  overflow: hidden;
  box-shadow: 0 24px 50px -32px rgba(10, 37, 64, 0.4);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}
.snle-cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 70px -32px rgba(10, 37, 64, 0.55);
  border-color: rgba(201, 169, 97, 0.55);
}

.snle-cat-card__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--snle-gold), #e6cd86, var(--snle-gold));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
.snle-cat-card:hover .snle-cat-card__ribbon { transform: scaleX(1); }

.snle-cat-card__top {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 1.5rem 1.4rem 1.2rem;
  background:
    linear-gradient(135deg, rgba(10, 37, 64, 0.05), rgba(201, 169, 97, 0.08));
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
}

.snle-cat-card__num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  font-style: italic;
  color: var(--snle-gold);
  line-height: 1;
}

.snle-cat-card__icon {
  justify-self: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--snle-navy) 0%, #133a64 100%);
  color: var(--snle-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 16px 30px -16px rgba(10, 37, 64, 0.75),
    0 0 0 4px rgba(201, 169, 97, 0.16);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.snle-cat-card:hover .snle-cat-card__icon {
  transform: scale(1.06) rotate(-3deg);
}

.snle-cat-card__type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.2);
  color: #8a6c2b;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.snle-cat-card__type i { font-size: 0.85rem; }

.snle-cat-card__body {
  flex: 1;
  padding: 1.4rem 1.4rem 0.9rem;
}

.snle-cat-card__title {
  margin: 0 0 0.6rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--snle-navy);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.snle-cat-card__desc {
  margin: 0;
  color: var(--snle-muted);
  font-size: 0.93rem;
  line-height: 1.65;
}

/* ── Boutons (autonomes, sans dépendance à .ctcl-source-btn) ──── */
.snle-cat-card__actions {
  display: flex;
  gap: 0.6rem;
  padding: 0 1.4rem 1.4rem;
}

.snle-cat-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.1rem;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.snle-cat-card__btn i { font-size: 1rem; }
.snle-cat-card__btn:active { transform: scale(0.97); }

.snle-cat-card__btn--primary {
  flex: 1;
  background: var(--snle-navy);
  color: #ffffff;
  border-color: var(--snle-navy);
  box-shadow: 0 14px 28px -14px rgba(10, 37, 64, 0.7);
}
.snle-cat-card__btn--primary:hover {
  background: var(--snle-gold);
  color: var(--snle-navy);
  border-color: var(--snle-gold);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(201, 169, 97, 0.55);
}

.snle-cat-card__btn--ghost {
  flex: 1;
  background: transparent;
  color: var(--snle-navy);
  border-color: rgba(10, 37, 64, 0.22);
}
.snle-cat-card__btn--ghost:hover {
  background: var(--snle-navy);
  color: #ffffff;
  border-color: var(--snle-navy);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(10, 37, 64, 0.55);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .snle-catalogue { padding: 0 0 4rem; }
  .snle-catalogue__core { padding: 2rem 1.2rem; }
  .snle-catalogue__header { margin-bottom: 1.8rem; }
  .snle-cat-card__top { padding: 1.2rem 1.1rem 0.9rem; }
  .snle-cat-card__icon { width: 54px; height: 54px; font-size: 1.5rem; }
  .snle-cat-card__body { padding: 1.1rem 1.1rem 0.7rem; }
  .snle-cat-card__actions {
    flex-direction: column;
    padding: 0 1.1rem 1.2rem;
  }
}

/* ── Responsive : empile detail-pdf et grid de cartes en mobile ── */
@media (max-width: 767.98px) {
  .snle-detail-hero { padding: 7rem 0 3.5rem; }
  .snle-detail-hero__grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .snle-detail-article {
    padding: 2rem 1.4rem 2.4rem;
    border-radius: 1rem;
  }
  .snle-detail-article::before {
    width: 44px;
    height: 44px;
    background-size: 22px 22px;
  }
  .snle-detail-lead { font-size: 1.1rem; }
  .snle-detail-text--dropcap::first-letter { font-size: 2.8rem; }
  .snle-detail-pdf {
    grid-template-columns: 1fr;
    padding: 1.3rem 1.2rem;
  }
  .snle-museum__pdf-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .snle-card,
  .snle-card__cta i,
  .snle-actu-card,
  .snle-actu-card__media img,
  .snle-timeline__shell,
  .snle-insigne-card,
  .snle-doc-item,
  .snle-photo-grid__item,
  .snle-photo-grid__item img,
  .snle-photo-grid__caption,
  .snle-media-card,
  .snle-timeline__details > summary > i,
  .snle-insigne-card__details > summary > i,
  .snle-hero__halo,
  .snle-detail-hero__halo,
  .snle-detail-media__frame,
  .snle-detail-media__shine,
  .snle-cat-card,
  .snle-cat-card__icon,
  .snle-cat-card__ribbon,
  .snle-cat-card__btn {
    transition: none;
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO — REFONTE ÉDITORIALE PREMIUM
   Vibe : Editorial Luxury — encres marines + or chaud + Fraunces italique
   Layout : Editorial Split (cohérent avec .hero-cover--split existant)
   ════════════════════════════════════════════════════════════════════════ */

/* Neutralise le pseudo-eyebrow texte historique : il est remplacé par
   un vrai composant .hero-eyebrow plus riche (rule + mark + texte). */
.hero-cover--split .hero-editorial::before {
  content: none;
}

/* Variables locales — palette éditoriale */
.hero-editorial {
  --he-gold: #c9a961;
  --he-gold-soft: rgba(201, 169, 97, 0.92);
  --he-ink: #f5f1e6;
  --he-ink-soft: rgba(245, 241, 230, 0.78);
  --he-ink-mute: rgba(245, 241, 230, 0.55);
  --he-hairline: rgba(245, 241, 230, 0.18);
  --he-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --he-glide: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Eyebrow ribbon : règle + marque + texte ─────────────────────────── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.85rem;
  padding: 0.45rem 0.95rem 0.45rem 0.55rem;
  background: linear-gradient(
    180deg,
    rgba(201, 169, 97, 0.10) 0%,
    rgba(201, 169, 97, 0.04) 100%
  );
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(5, 12, 24, 0.20);
}
.hero-eyebrow__rule {
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(201, 169, 97, 0) 0%,
    var(--he-gold-soft) 100%
  );
}
.hero-eyebrow__mark {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.16);
  color: var(--he-gold);
  font-size: 0.78rem;
  border: 1px solid rgba(201, 169, 97, 0.35);
}
.hero-eyebrow__text {
  font-family: var(--heading-font);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--he-gold-soft);
  white-space: nowrap;
}

/* ─── Titre éditorial multi-lignes ────────────────────────────────────── */
.hero-cover--split .hero-title--editorial,
.hero-cover--split .hero-cover__content h1.hero-title--editorial {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-family: var(--heading-font);
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--he-ink);
  text-shadow: 0 8px 38px rgba(5, 12, 24, 0.55);
  margin-bottom: 1.85rem;
}
.hero-title__line {
  display: block;
}
.hero-title__line--soft {
  font-weight: 400;
  color: var(--he-ink-soft);
  font-size: 0.62em;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-bottom: 0.25em;
}
.hero-title__line--accent {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.05em;
  font-style: normal;
  letter-spacing: -0.035em;
  /* « du « Le Triomphant » » reste sur une seule ligne. La boîte épouse la
     largeur du texte (width: max-content) : sans ça, le texte déborderait de
     la boîte et le dégradé doré (background-clip: text) ne couvrirait plus la
     fin du mot, qui deviendrait invisible. Sur mobile, on ré-autorise le
     retour à la ligne (cf. media query) pour éviter tout débordement. */
  white-space: nowrap;
  width: -moz-max-content;
  width: max-content;
  background: linear-gradient(
    180deg,
    #f5dca0 0%,
    var(--he-gold) 55%,
    #a8853f 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-title__line--accent em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
/* Repli mobile : sur très petit écran, on ré-autorise le retour à la ligne
   du nom pour éviter tout débordement horizontal (la boîte redevient fluide). */
@media (max-width: 575.98px) {
  .hero-title__line--accent {
    white-space: normal;
    width: auto;
  }
}

/* ─── Lead avec règle verticale ─────────────────────────────────────── */
.hero-lead {
  display: flex;
  align-items: stretch;
  gap: 1.1rem;
  max-width: 56ch;
  margin-bottom: 0.5rem;
}
.hero-lead__rule {
  flex: 0 0 1px;
  width: 1px;
  background: linear-gradient(
    180deg,
    var(--he-gold-soft) 0%,
    rgba(201, 169, 97, 0) 100%
  );
  position: relative;
  transform-origin: top;
  animation: hero-lead-rule-grow 1.2s var(--he-spring) 0.6s both;
}
@keyframes hero-lead-rule-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.hero-lead__text {
  margin: 0;
  font-family: var(--default-font);
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.7;
  font-weight: 300;
  color: var(--he-ink-soft);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* ─── CTA group : primaire + ghost ───────────────────────────────────── */
.hero-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 2.6rem;
}

/* Primary CTA : button-in-button (override du .btn-decouvrir existant
   uniquement quand il porte aussi .hero-cta-primary). */
.hero-cover--split .btn-decouvrir.hero-cta-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.65rem 0.7rem 1.6rem;
  margin-top: 0;
  background: linear-gradient(180deg, #d4b874 0%, var(--he-gold) 100%);
  color: #0a2540;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 14px 36px rgba(201, 169, 97, 0.28),
    0 2px 8px rgba(5, 12, 24, 0.15);
  transition:
    transform 0.55s var(--he-spring),
    box-shadow 0.55s var(--he-spring),
    background 0.55s var(--he-spring);
}
.hero-cta-primary__label {
  white-space: nowrap;
}
.hero-cover--split .btn-decouvrir.hero-cta-primary .hero-cta-primary__icon {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 37, 64, 0.92);
  color: var(--he-gold);
  border-radius: 999px;
  font-size: 0.92rem;
  margin: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 6px rgba(5, 12, 24, 0.30);
  transition: transform 0.55s var(--he-spring);
}
.hero-cover--split .btn-decouvrir.hero-cta-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #e0c585 0%, #d4af37 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 18px 44px rgba(201, 169, 97, 0.36),
    0 4px 12px rgba(5, 12, 24, 0.20);
}
.hero-cover--split .btn-decouvrir.hero-cta-primary:hover .hero-cta-primary__icon {
  transform: translate(2px, -1px) scale(1.05);
}
.hero-cover--split .btn-decouvrir.hero-cta-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Ghost CTA */
.hero-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.4rem;
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  color: var(--he-ink);
  text-decoration: none;
  background: transparent;
  border: 0;
  position: relative;
  transition: color 0.45s var(--he-glide);
}
.hero-cta-ghost::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 2rem;
  bottom: 0.55rem;
  height: 1px;
  background: var(--he-hairline);
  transform-origin: left;
  transform: scaleX(1);
  transition: background 0.45s var(--he-glide), transform 0.55s var(--he-spring);
}
.hero-cta-ghost__icon {
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--he-hairline);
  font-size: 0.78rem;
  transition:
    transform 0.55s var(--he-spring),
    background 0.45s var(--he-glide),
    border-color 0.45s var(--he-glide);
}
.hero-cta-ghost:hover {
  color: var(--he-gold);
}
.hero-cta-ghost:hover::after {
  background: var(--he-gold-soft);
}
.hero-cta-ghost:hover .hero-cta-ghost__icon {
  transform: translateX(3px);
  background: rgba(201, 169, 97, 0.14);
  border-color: rgba(201, 169, 97, 0.45);
  color: var(--he-gold);
}

/* ─── Meta stamp : port d'attache, bâtiment, service ─────────────────── */
.hero-meta {
  display: inline-flex;
  align-items: stretch;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 3rem 0 0;
  padding: 1.1rem 1.4rem;
  background: rgba(5, 12, 24, 0.32);
  border: 1px solid var(--he-hairline);
  border-radius: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hero-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.hero-meta__label {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--he-ink-mute);
}
.hero-meta__value {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--he-ink);
}
.hero-meta__divider {
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(245, 241, 230, 0) 0%,
    var(--he-hairline) 50%,
    rgba(245, 241, 230, 0) 100%
  );
}

/* ─── Mobile : repli centré, stack vertical, padding allégés ─────────── */
@media (max-width: 767.98px) {
  .hero-eyebrow {
    margin: 0 auto 1.4rem;
    max-width: 100%;
  }
  /* La phrase doit pouvoir revenir à la ligne sur mobile (sinon elle
     déborde de l'écran). On retire la ligne décorative et on resserre
     l'interlettrage pour gagner de la place. */
  .hero-eyebrow__rule {
    display: none;
  }
  .hero-eyebrow__text {
    min-width: 0;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.16em;
  }
  .hero-cover--split .hero-title--editorial,
  .hero-cover--split .hero-cover__content h1.hero-title--editorial {
    align-items: center;
    text-align: center;
    font-size: clamp(2rem, 8.5vw, 2.8rem);
  }
  .hero-lead {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .hero-actions {
    justify-content: center;
    width: 100%;
  }
  .hero-cover--split .btn-decouvrir.hero-cta-primary {
    width: 100%;
    justify-content: space-between;
  }
  .hero-meta {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    justify-content: space-between;
    gap: 0.9rem 1rem;
    padding: 0.9rem 1.1rem;
  }
  .hero-meta__divider {
    display: none;
  }
  .hero-meta__item {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-lead__rule {
    animation: none;
    transform: scaleY(1);
  }
  .hero-cover--split .btn-decouvrir.hero-cta-primary,
  .hero-cover--split .btn-decouvrir.hero-cta-primary .hero-cta-primary__icon,
  .hero-cta-ghost,
  .hero-cta-ghost::after,
  .hero-cta-ghost__icon {
    transition: none;
  }
}

/* =========================================================
   Header — passe finale : alignement vertical commun, tailles
   harmonisees logo/nom/menu/recherche/insigne/connexion.
   Tout est calibre sur une hauteur d'interaction de 40px.
   ========================================================= */
.header {
  padding: 12px 0;
}

.header > .container-fluid {
  align-items: center;
  gap: clamp(0.6rem, 1.2vw, 1.5rem);
  max-width: none !important;
  width: 100%;
  padding-left: clamp(0.75rem, 1.4vw, 1.5rem);
  padding-right: clamp(0.75rem, 1.4vw, 1.5rem);
}

/* ── Bloc identite : logo + nom du site ──────────────────── */
.header .logo {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  flex: 0 0 auto;
  min-width: max-content;
  margin-right: 0;
  text-decoration: none;
}

.header .logo img {
  display: block;
  height: 42px;
  width: auto;
  max-height: 42px;
  flex: 0 0 auto;
  margin-right: 0;
}

.header .logo h1.sitename,
.header .sitename {
  margin: 0;
  font-size: clamp(1rem, 0.9rem + 0.22vw, 1.16rem) !important;
  line-height: 1.12;
  white-space: normal;
  letter-spacing: -0.005em;
}

.footer .footer-about .logo img {
  height: 72px;
  width: auto;
  margin-right: 12px;
}

.footer .footer-about .logo .sitename {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
}

/* ── Menu de navigation : centre, espace homogene ───────── */
@media (min-width: 1200px) {
  .header .navmenu {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  .header .navmenu > ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.05rem, 0.3vw, 0.4rem);
    min-width: 0;
  }

  .header .navmenu ul > li {
    margin: 0;
    display: flex;
    align-items: center;
  }

  .header .navmenu ul > li > a {
    padding: 10px clamp(0.45rem, 0.65vw, 0.85rem) !important;
    font-size: clamp(0.78rem, 0.74rem + 0.1vw, 0.86rem);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    height: 40px;
  }

  .header .navmenu ul > li > a i.toggle-dropdown {
    font-size: 0.7rem;
    line-height: 1;
    margin-left: 2px;
  }

  .header .navmenu ul > li > a::after {
    left: clamp(0.45rem, 0.65vw, 0.85rem);
    right: clamp(0.45rem, 0.65vw, 0.85rem);
  }
}

/* ── Bloc actions : recherche + insigne + connexion ─────── */
.header .header-actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.45rem, 0.8vw, 0.85rem);
  flex: 0 0 auto;
}

.header .site-search--header {
  width: clamp(8.5rem, 11vw, 11rem);
  min-height: 40px;
  height: 40px;
  padding: 0.2rem 0.25rem 0.2rem 0.4rem;
  gap: 0.25rem;
  box-shadow: 0 0.45rem 1.1rem -0.7rem rgba(1, 18, 34, 0.55);
  align-self: center;
}

.header .site-search--header .site-search__icon {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.95rem;
  line-height: 1;
}

.header .site-search--header input {
  font-size: 0.82rem;
  height: 100%;
  line-height: 1;
  padding: 0;
}

.header .site-search--header button,
.header .site-search-shortcut {
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  line-height: 1;
  align-self: center;
}

.header .header-insigne {
  height: 42px;
  width: auto;
  flex: 0 0 auto;
  display: inline-block;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.header .btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 40px;
  padding: 0 0.95rem;
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
}

.header .btn-outline-light i {
  font-size: 0.95rem;
  line-height: 1;
}

/* ── Bouton de bascule vers le back-office : doré (charte du site) ── */
.header .btn-admin-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 40px;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid #c9a961;
  background: linear-gradient(135deg, #d8b85c, #c9a961 60%, #a98021);
  color: #0a2540;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0.45rem 1.1rem -0.7rem rgba(169, 128, 33, 0.7);
  transition: filter 0.3s, transform 0.3s, box-shadow 0.3s;
}

.header .btn-admin-switch i {
  font-size: 0.95rem;
  line-height: 1;
}

.header .btn-admin-switch:hover {
  color: #0a2540;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 0.7rem 1.4rem -0.7rem rgba(169, 128, 33, 0.85);
}

/* ── Laptop intermediaire (1200-1549) : on serre encore ─── */
@media (min-width: 1200px) and (max-width: 1549.98px) {
  .header .logo h1.sitename,
  .header .sitename {
    font-size: 1.02rem !important;
  }

  .header .navmenu ul > li > a {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    font-size: 0.78rem;
  }
}

/* ── Petits laptops (1200-1399) : remplace champ par icone */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header .site-search--header {
    display: none !important;
  }

  .header .site-search-shortcut {
    display: inline-flex !important;
  }

  .header .header-insigne {
    display: none !important;
  }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .header .logo img {
    height: 34px;
    max-height: 34px;
  }

  /* Le logo peut rétrécir pour laisser la place aux boutons ; le nom du
     site reste affiché (réduit) et passe sur 2 lignes si nécessaire. */
  .header .logo {
    min-width: 0;
    flex: 0 1 auto;
  }

  .header .logo h1.sitename,
  .header .sitename {
    min-width: 0;
    font-size: clamp(0.62rem, -0.06rem + 3.57vw, 0.85rem) !important;
    white-space: normal;
    line-height: 1.1;
  }

  /* Boutons d'action en icône seule + compacts : garantit qu'ils restent
     entièrement visibles sans rogner le nom du site, même pour un admin
     (recherche + Administration + Déconnexion). */
  .header .header-actions {
    gap: 0.25rem !important;
  }

  .header .header-actions .btn .btn-label {
    display: none;
  }

  .header .header-actions .btn,
  .header .site-search-shortcut {
    width: 32px;
    height: 32px;
    min-height: 0;
  }

  .header .header-actions .btn {
    padding: 0 !important;
    justify-content: center;
    gap: 0 !important;
  }
}

/* Header membre : garde les liens directs lisibles sans collision. */
@media (min-width: 1200px) {
  body:has(main.membre-page) .header > .container-fluid {
    gap: clamp(0.35rem, 0.75vw, 0.95rem);
  }

  body:has(main.membre-page) .header .logo {
    margin-right: 0;
  }

  body:has(main.membre-page) .header .navmenu {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
  }

  body:has(main.membre-page) .header .navmenu > ul {
    min-width: 0;
    flex-wrap: nowrap;
    gap: clamp(0rem, 0.18vw, 0.25rem);
  }

  body:has(main.membre-page) .header .navmenu ul > li > a {
    padding-left: clamp(0.32rem, 0.48vw, 0.62rem) !important;
    padding-right: clamp(0.32rem, 0.48vw, 0.62rem) !important;
  }

  body:has(main.membre-page) .header .header-actions {
    flex: 0 0 auto;
    min-width: max-content;
    gap: clamp(0.35rem, 0.55vw, 0.65rem) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1549.98px) {
  body:has(main.membre-page) .header .navmenu ul > li > a {
    font-size: 0.74rem !important;
    letter-spacing: 0.045em;
    padding-left: 0.34rem !important;
    padding-right: 0.34rem !important;
  }
}

/* =========================================================================
   « Le Journal de Saigon » — exhibit, scope .js-saigon-exhibit
   Inclus depuis app/Views/ct_cl/_journal_saigon.php (partial rendu dans
   la section Documentation de la one-page Indochine).
   ========================================================================= */
.js-saigon-exhibit {
  --js-navy:        #0a1628;
  --js-navy-deep:   #050d1c;
  --js-gold:        #b89548;
  --js-gold-soft:   #c9a961;
  --js-cream:       #f6f1e4;
  --js-cream-deep:  #efe6d2;
  --js-paper:       #fdf8eb;
  --js-ink:         #1a2638;
  --js-muted:       #5b6677;
  --js-serif:       "Playfair Display", "Fraunces", Georgia, serif;

  position: relative;
  margin: 1.5rem 0 2rem;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem);
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, #fdf8eb 0%, var(--js-cream) 38%, var(--js-cream-deep) 100%);
  color: var(--js-ink);
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 36px 80px -36px rgba(7, 29, 51, 0.18),
    0 0 0 1px rgba(184, 149, 72, 0.22);
}

.js-saigon-exhibit::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(184, 149, 72, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 82% 88%, rgba(7, 29, 51, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.js-saigon-exhibit > * { position: relative; z-index: 1; }

.js-saigon-exhibit__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}

.js-saigon-exhibit .js-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(184, 149, 72, 0.35);
  border-radius: 999px;
  background: rgba(253, 248, 235, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--js-gold);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

.js-saigon-exhibit__title {
  font-family: var(--js-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 1rem 0 0.8rem;
  letter-spacing: -0.01em;
  color: var(--js-navy);
  background: linear-gradient(180deg, #1a2638 0%, #3a4a64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.js-saigon-exhibit__date {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem;
  font-family: var(--js-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--js-gold);
  margin: 0 auto 1rem;
}

.js-saigon-exhibit .js-rule {
  display: inline-block;
  width: clamp(2rem, 5vw, 4rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--js-gold) 50%, transparent);
}

.js-saigon-exhibit__lead {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--js-muted);
  max-width: 56ch;
  margin: 0 auto;
}

.js-saigon-exhibit .js-stage {
  position: relative;
  perspective: 1800px;
  isolation: isolate;
}

.js-saigon-exhibit .js-stage__grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.10) 1px, transparent 1px);
  background-size: 5px 5px;
  /* mix-blend-mode retiré : il forçait un nouveau contexte de
     composition et provoquait des saccades de scroll. */
  opacity: 0.22;
  pointer-events: none;
}

.js-saigon-exhibit .js-pages {
  display: grid;
  gap: clamp(1.6rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: stretch;
}

@keyframes js-saigon-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}
@keyframes js-saigon-fade-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.js-saigon-exhibit .js-card {
  animation: js-saigon-fade-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--js-delay, 0ms);
}

.js-saigon-exhibit .js-card__perspective {
  perspective: 1400px;
  transform-style: preserve-3d;
  /* Animation « float » infinie retirée : elle repeignait chaque carte en
     permanence (transform 3D) et provoquait des saccades visibles sur le
     scroll de toute la page. Plus calme aussi, plus muséal. */
}

.js-saigon-exhibit .js-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  /* will-change est activé/désactivé via JS au survol (cf. main.js).
     En permanent il forçait une couche compositée par carte, coûteux. */
}

.js-saigon-exhibit .js-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  background: linear-gradient(180deg, #2a1f0e 0%, #11070a 100%);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(184, 149, 72, 0.30),
    0 30px 60px -25px rgba(7, 29, 51, 0.45),
    0 12px 24px -12px rgba(7, 29, 51, 0.25);
  transform-style: preserve-3d;
  transition: box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js-saigon-exhibit .js-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: sepia(0.55) contrast(1.08) saturate(0.92) brightness(0.96);
  transition: filter 700ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.js-saigon-exhibit .js-card__sepia {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(40, 22, 8, 0.35) 100%),
    linear-gradient(180deg, rgba(217, 178, 105, 0.10) 0%, rgba(60, 36, 10, 0.18) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.js-saigon-exhibit .js-card__grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}

.js-saigon-exhibit .js-card__shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 240, 200, 0.16) 48%,
    rgba(255, 240, 200, 0.04) 56%,
    transparent 75%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 600ms ease, background-position 1.4s ease;
  pointer-events: none;
}

.js-saigon-exhibit .js-card__edge {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(197, 165, 90, 0.45),
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    inset 0 0 4px rgba(20, 10, 0, 0.7);
}

.js-saigon-exhibit .js-card__zoom {
  position: absolute;
  right: 0.8rem; bottom: 0.8rem;
  width: 2.6rem; height: 2.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--js-navy);
  background: var(--js-gold);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
  font-size: 1.05rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
}

.js-saigon-exhibit .js-card:hover .js-card__media,
.js-saigon-exhibit .js-card:focus-within .js-card__media {
  box-shadow:
    0 0 0 1px rgba(184, 149, 72, 0.65),
    0 50px 90px -28px rgba(7, 29, 51, 0.55),
    0 18px 36px -16px rgba(184, 149, 72, 0.30);
}
.js-saigon-exhibit .js-card:hover .js-card__media img,
.js-saigon-exhibit .js-card:focus-within .js-card__media img {
  filter: sepia(0.42) contrast(1.12) saturate(1.0) brightness(1.02);
}
.js-saigon-exhibit .js-card:hover .js-card__shine,
.js-saigon-exhibit .js-card:focus-within .js-card__shine {
  opacity: 1; background-position: 0% 0%;
}
.js-saigon-exhibit .js-card:hover .js-card__zoom,
.js-saigon-exhibit .js-card:focus-within .js-card__zoom {
  opacity: 1; transform: translateY(0);
}

.js-saigon-exhibit .js-card__panel {
  position: relative;
  padding: 1.3rem 1.4rem 1.5rem;
  border-radius: 6px;
  background: rgba(253, 248, 235, 0.78);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(184, 149, 72, 0.32);
  color: var(--js-ink);
  box-shadow:
    0 24px 48px -28px rgba(7, 29, 51, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translateZ(40px);
}

.js-saigon-exhibit .js-card__num {
  display: inline-block;
  font-family: var(--js-serif);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--js-gold);
  margin-bottom: 0.4rem;
}

.js-saigon-exhibit .js-card__title {
  font-family: var(--js-serif);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.1;
  color: var(--js-navy);
  margin: 0 0 0.95rem;
  letter-spacing: -0.005em;
}

.js-saigon-exhibit .js-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.3rem;
  margin: 0;
}
.js-saigon-exhibit .js-card__meta > div { min-width: 0; }
.js-saigon-exhibit .js-card__meta dt {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--js-gold);
  margin-bottom: 0.2rem;
  font-weight: 600;
}
.js-saigon-exhibit .js-card__meta dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--js-ink);
}

@media (max-width: 540px) {
  .js-saigon-exhibit .js-card__meta {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

.js-saigon-exhibit__credit {
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--js-muted);
  font-style: italic;
}
.js-saigon-exhibit__credit i { color: var(--js-gold); margin-right: 0.4rem; }
.js-saigon-exhibit__credit strong {
  color: var(--js-navy);
  font-style: normal;
  font-weight: 600;
}

.js-saigon-exhibit .js-lightbox {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: radial-gradient(ellipse at center, rgba(10, 22, 40, 0.92) 0%, rgba(2, 6, 12, 0.98) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 420ms;
}
.js-saigon-exhibit .js-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.js-saigon-exhibit .js-lightbox__frame {
  position: relative;
  margin: 0;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
  transform: scale(0.92) translateY(18px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 500ms ease;
}
.js-saigon-exhibit .js-lightbox.is-open .js-lightbox__frame {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.js-saigon-exhibit .js-lightbox__frame img {
  max-width: 100%;
  max-height: 78vh;
  height: auto; width: auto;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(197, 165, 90, 0.4),
    0 60px 120px -30px rgba(0, 0, 0, 0.95);
  filter: sepia(0.32) contrast(1.1) saturate(0.96);
  user-select: none;
}

.js-saigon-exhibit .js-lightbox__caption {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--js-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--js-gold-soft);
  letter-spacing: 0.02em;
}
.js-saigon-exhibit .js-lightbox__sep { color: var(--js-gold); }

.js-saigon-exhibit .js-lightbox__close,
.js-saigon-exhibit .js-lightbox__nav {
  position: absolute;
  width: 3.2rem; height: 3.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--js-glass-edge);
  border-radius: 999px;
  background: var(--js-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--js-gold-soft);
  cursor: pointer;
  font-size: 1.2rem;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              background 320ms ease, color 320ms ease, border-color 320ms ease;
}
.js-saigon-exhibit .js-lightbox__close:hover,
.js-saigon-exhibit .js-lightbox__nav:hover {
  background: var(--js-gold);
  color: var(--js-navy);
  border-color: var(--js-gold);
  transform: scale(1.06);
}

.js-saigon-exhibit .js-lightbox__close {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
}
.js-saigon-exhibit .js-lightbox__nav--prev { left: clamp(0.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.js-saigon-exhibit .js-lightbox__nav--next { right: clamp(0.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.js-saigon-exhibit .js-lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.js-saigon-exhibit .js-lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }

@media (max-width: 600px) {
  .js-saigon-exhibit .js-lightbox__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-saigon-exhibit .js-card,
  .js-saigon-exhibit .js-card__perspective,
  .js-saigon-exhibit .js-card__inner,
  .js-saigon-exhibit .js-card__media,
  .js-saigon-exhibit .js-card__media img,
  .js-saigon-exhibit .js-card__shine,
  .js-saigon-exhibit .js-card__zoom,
  .js-saigon-exhibit .js-lightbox,
  .js-saigon-exhibit .js-lightbox__frame {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   Indochine — Insignes : galeries de l'équipage
   Albums photographiques d'anciens marins (scan filesystem).
   Scope : .ctcl-insignes-exhibit
   ========================================================================= */
.ctcl-insignes-exhibit {
  --ins-navy:        #071d33;
  --ins-navy-deep:   #050d1c;
  --ins-cream:       #f6f1e4;
  --ins-cream-deep:  #efe6d2;
  --ins-paper:       #fdf8eb;
  --ins-gold:        #b89548;
  --ins-gold-soft:   #c9a961;
  --ins-ink:         #1a2638;
  --ins-muted:       #5b6677;

  position: relative;
  margin: 1rem 0 0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem);
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, #fdf8eb 0%, var(--ins-cream) 38%, var(--ins-cream-deep) 100%);
  color: var(--ins-ink);
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 36px 80px -36px rgba(7, 29, 51, 0.18),
    0 0 0 1px rgba(184, 149, 72, 0.22);
}

.ctcl-insignes-exhibit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(184, 149, 72, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 82% 88%, rgba(7, 29, 51, 0.06) 0%, transparent 50%);
}

.ctcl-insignes-exhibit > * { position: relative; z-index: 1; }

/* ── Intro ───────────────────────────────────────────────────────────── */
.ctcl-insignes-exhibit__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.ctcl-insignes-exhibit__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ins-gold);
  font-weight: 600;
}
.ctcl-insignes-exhibit__rule {
  display: inline-block;
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ins-gold) 50%, transparent);
}
.ctcl-insignes-exhibit__title {
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0.8rem 0;
  letter-spacing: -0.01em;
  color: var(--ins-navy);
  background: linear-gradient(180deg, #1a2638 0%, #3a4a64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ctcl-insignes-exhibit__title em {
  font-style: italic;
  font-variation-settings: "opsz" 96;
  color: var(--ins-gold);
  background: none;
  -webkit-text-fill-color: var(--ins-gold);
}
.ctcl-insignes-exhibit__lead {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ins-muted);
  margin: 0 auto;
  max-width: 56ch;
}

/* ── Couvertures d'albums : polaroïd stack 3D ────────────────────────── */
.ctcl-insignes-albums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
  perspective: 1800px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

@keyframes ctcl-ins-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}

.ctcl-insignes-album {
  position: relative;
  aspect-ratio: 4 / 5;
  display: block;
  border-radius: 12px;
  text-decoration: none;
  isolation: isolate;
  transform-style: preserve-3d;
  cursor: pointer;
}
.ctcl-insignes-album__halo {
  position: absolute; inset: -10%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(184, 149, 72, 0.22), transparent 65%);
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 600ms ease;
}
.ctcl-insignes-album:hover .ctcl-insignes-album__halo,
.ctcl-insignes-album:focus-within .ctcl-insignes-album__halo {
  opacity: 1;
}

.ctcl-insignes-album__stack {
  position: absolute;
  inset: 6% 8% 30% 8%;
  transform-style: preserve-3d;
  animation: ctcl-ins-float 7s ease-in-out infinite;
}

.ctcl-insignes-album__photo {
  position: absolute; inset: 0;
  border-radius: 4px;
  background: var(--ins-paper);
  padding: 6% 6% 16%;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 18px 40px -18px rgba(0, 0, 0, 0.7),
    0 6px 16px -6px rgba(0, 0, 0, 0.4);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center 80%;
}
.ctcl-insignes-album__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 2px;
  filter: sepia(0.45) contrast(1.05) brightness(0.96);
  user-select: none;
  -webkit-user-drag: none;
}

/* État au repos : pile décalée */
.ctcl-insignes-album__photo:nth-child(1) { transform: rotate(-5deg) translateX(-3%); z-index: 1; }
.ctcl-insignes-album__photo:nth-child(2) { transform: rotate(2deg)  translateX(0%);  z-index: 2; }
.ctcl-insignes-album__photo:nth-child(3) { transform: rotate(7deg)  translateX(3%);  z-index: 3; }
.ctcl-insignes-album__photo:nth-child(4) { transform: rotate(-1deg) translateY(2%);  z-index: 4; opacity: 0; pointer-events: none; }

/* Hover : éventail 3D */
.ctcl-insignes-album:hover .ctcl-insignes-album__photo:nth-child(1),
.ctcl-insignes-album:focus-within .ctcl-insignes-album__photo:nth-child(1) {
  transform: rotate(-14deg) translate(-22%, -4%) translateZ(20px);
}
.ctcl-insignes-album:hover .ctcl-insignes-album__photo:nth-child(2),
.ctcl-insignes-album:focus-within .ctcl-insignes-album__photo:nth-child(2) {
  transform: rotate(-3deg) translate(-6%, -8%) translateZ(40px);
}
.ctcl-insignes-album:hover .ctcl-insignes-album__photo:nth-child(3),
.ctcl-insignes-album:focus-within .ctcl-insignes-album__photo:nth-child(3) {
  transform: rotate(8deg) translate(8%, -6%) translateZ(60px);
}
.ctcl-insignes-album:hover .ctcl-insignes-album__photo:nth-child(4),
.ctcl-insignes-album:focus-within .ctcl-insignes-album__photo:nth-child(4) {
  transform: rotate(18deg) translate(22%, -2%) translateZ(80px);
  opacity: 1;
}

/* Caption */
.ctcl-insignes-album__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.2rem 1.4rem 1.4rem;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(253, 248, 235, 0) 0%, rgba(253, 248, 235, 0.92) 32%, rgba(253, 248, 235, 0.98) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-top: 1px solid rgba(184, 149, 72, 0.28);
  text-align: center;
}
.ctcl-insignes-album__num {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ins-gold);
}
.ctcl-insignes-album__nom {
  font-family: "Fraunces", "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--ins-navy);
  margin: 0.3rem 0 0.4rem;
  letter-spacing: -0.005em;
}
.ctcl-insignes-album__sous {
  font-size: 0.82rem;
  margin: 0 0 0.7rem;
  color: var(--ins-muted);
}
.ctcl-insignes-album__sep {
  margin: 0 0.4rem;
  color: var(--ins-gold);
}
.ctcl-insignes-album__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ins-gold);
  transition: color 280ms ease, transform 280ms ease;
}
.ctcl-insignes-album:hover .ctcl-insignes-album__cta,
.ctcl-insignes-album:focus-within .ctcl-insignes-album__cta {
  color: var(--ins-navy);
  transform: translateX(2px);
}

/* ── Pièce maîtresse : insigne du Commando ──────────────────────────── */
.ctcl-insignes-featured {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(253, 248, 235, 0.6) 0%, rgba(246, 241, 228, 0.4) 100%);
  border: 1px solid rgba(184, 149, 72, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 24px 48px -28px rgba(7, 29, 51, 0.25);
  perspective: 1200px;
}

@media (max-width: 720px) {
  .ctcl-insignes-featured {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.4rem;
  }
}

.ctcl-insignes-featured__medal {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  text-decoration: none;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: zoom-in;
}

.ctcl-insignes-featured__halo {
  position: absolute; inset: -15%;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(184, 149, 72, 0.30) 0%, transparent 65%);
  pointer-events: none;
  animation: ctcl-ins-featured-breath 4s ease-in-out infinite;
}

@keyframes ctcl-ins-featured-breath {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.04); }
}

.ctcl-insignes-featured__ring {
  position: absolute; inset: 0;
  z-index: 1;
  border-radius: 10px;
  background:
    linear-gradient(135deg,
      rgba(255, 240, 200, 0.55) 0%,
      rgba(184, 149, 72, 0.30) 45%,
      rgba(255, 240, 200, 0.55) 55%,
      rgba(184, 149, 72, 0.30) 100%);
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.ctcl-insignes-featured__frame {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 0 0 6px #ffffff,
    0 0 0 7px rgba(184, 149, 72, 0.45),
    0 26px 50px -22px rgba(7, 29, 51, 0.45),
    0 8px 22px -10px rgba(7, 29, 51, 0.25);
  z-index: 2;
  transition: box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ctcl-insignes-featured__frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #ffffff;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.ctcl-insignes-featured__shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 65%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 500ms ease, background-position 1.3s ease;
  pointer-events: none;
}

.ctcl-insignes-featured__zoom {
  position: absolute;
  right: 1rem; bottom: 1rem;
  width: 2.6rem; height: 2.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--ins-navy);
  background: var(--ins-gold);
  box-shadow: 0 12px 26px -10px rgba(7, 29, 51, 0.5);
  font-size: 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
  z-index: 3;
  pointer-events: none;
}

/* Hover : tilt 3D + shine balaie + zoom badge */
.ctcl-insignes-featured__medal:hover {
  transform: rotateX(6deg) rotateY(-6deg) translateY(-4px);
}
.ctcl-insignes-featured__medal:hover .ctcl-insignes-featured__frame {
  box-shadow:
    0 0 0 6px #ffffff,
    0 0 0 7px rgba(184, 149, 72, 0.75),
    0 40px 70px -22px rgba(7, 29, 51, 0.55),
    0 14px 32px -10px rgba(184, 149, 72, 0.35);
}
.ctcl-insignes-featured__medal:hover .ctcl-insignes-featured__frame img {
  transform: scale(1.04);
}
.ctcl-insignes-featured__medal:hover .ctcl-insignes-featured__shine {
  opacity: 1;
  background-position: 0% 0%;
}
.ctcl-insignes-featured__medal:hover .ctcl-insignes-featured__zoom {
  opacity: 1;
  transform: translateY(0);
}

/* Caption éditoriale */
.ctcl-insignes-featured__caption {
  min-width: 0;
}
.ctcl-insignes-featured__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ins-gold);
  font-weight: 600;
}
.ctcl-insignes-featured__title {
  font-family: "Fraunces", "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: var(--ins-navy);
  margin: 0.7rem 0 0.8rem;
  letter-spacing: -0.005em;
}
.ctcl-insignes-featured__title em {
  font-style: italic;
  color: var(--ins-gold);
}
.ctcl-insignes-featured__lead {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ins-muted);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ctcl-insignes-featured__halo,
  .ctcl-insignes-featured__medal,
  .ctcl-insignes-featured__frame img,
  .ctcl-insignes-featured__shine {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Galeries individuelles ─────────────────────────────────────────── */
.ctcl-insignes-gallery {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(184, 149, 72, 0.32);
  scroll-margin-top: 6rem;
}
.ctcl-insignes-gallery__header {
  text-align: center;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.ctcl-insignes-gallery__num {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ins-gold);
}
.ctcl-insignes-gallery__sep {
  display: inline-block;
  margin: 0 0.4em;
  color: var(--ins-gold-soft);
}
.ctcl-insignes-gallery__nom {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.1;
  color: var(--ins-navy);
  margin: 0.6rem 0 0.4rem;
}
.ctcl-insignes-gallery__sous {
  font-size: 0.92rem;
  color: var(--ins-muted);
  margin: 0;
}
.ctcl-insignes-gallery__dot {
  margin: 0 0.4rem;
  color: var(--ins-gold);
}

/* ── Mosaïque musée ─────────────────────────────────────────────────── */
.ctcl-insignes-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
  perspective: 1400px;
}

@keyframes ctcl-ins-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.ctcl-insignes-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 6px;
  text-decoration: none;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: ctcl-ins-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--ins-delay, 0ms);
}

.ctcl-insignes-tile__inner {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ins-paper);
  box-shadow:
    0 0 0 1px rgba(184, 149, 72, 0.28),
    0 18px 40px -20px rgba(7, 29, 51, 0.35);
  transform-style: preserve-3d;
  transition: box-shadow 500ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ctcl-insignes-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.52) contrast(1.06) saturate(0.92) brightness(0.94);
  transition: filter 600ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.ctcl-insignes-tile__sepia {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(40, 22, 8, 0.38) 100%),
    linear-gradient(180deg, rgba(217, 178, 105, 0.10), rgba(60, 36, 10, 0.18));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.ctcl-insignes-tile__shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 240, 200, 0.18) 50%,
    transparent 65%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 500ms ease, background-position 1.2s ease;
  pointer-events: none;
}

.ctcl-insignes-tile__zoom {
  position: absolute;
  right: 0.7rem; bottom: 0.7rem;
  width: 2.2rem; height: 2.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--ins-navy);
  background: var(--ins-gold);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
}

.ctcl-insignes-tile__caption {
  position: absolute;
  left: 0.7rem; right: 3rem; bottom: 0.7rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.82rem;
  color: #fbf2dc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
  pointer-events: none;
}

/* Hover : tilt 3D + sépia atténuée + shine + UI */
.ctcl-insignes-tile:hover {
  transform: translateY(-4px) rotateX(4deg) rotateY(-4deg);
  z-index: 2;
}
.ctcl-insignes-tile:hover .ctcl-insignes-tile__inner {
  box-shadow:
    0 0 0 1px rgba(184, 149, 72, 0.65),
    0 30px 60px -20px rgba(7, 29, 51, 0.45);
}
.ctcl-insignes-tile:hover img {
  filter: sepia(0.32) contrast(1.1) saturate(1.0) brightness(1.02);
  transform: scale(1.06);
}
.ctcl-insignes-tile:hover .ctcl-insignes-tile__shine {
  opacity: 1;
  background-position: 0% 0%;
}
.ctcl-insignes-tile:hover .ctcl-insignes-tile__zoom,
.ctcl-insignes-tile:hover .ctcl-insignes-tile__caption {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 540px) {
  .ctcl-insignes-mosaic {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.7rem;
  }
  .ctcl-insignes-tile__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ctcl-insignes-album__stack,
  .ctcl-insignes-album__photo,
  .ctcl-insignes-tile,
  .ctcl-insignes-tile img,
  .ctcl-insignes-tile__shine {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   Indochine — Chansons : recueil des partitions de l'équipage
   Données = scan filesystem (un groupe = 1 chanson, ses pages triées).
   Scope : .ctcl-chansons-exhibit
   ========================================================================= */
.ctcl-chansons-exhibit {
  --ch-cream:       #f6f1e4;
  --ch-cream-deep:  #efe6d2;
  --ch-paper:       #fdf8eb;
  --ch-paper-aged:  #f3e9d2;
  --ch-navy:        #071d33;
  --ch-gold:        #b89548;
  --ch-gold-soft:   #c9a961;
  --ch-ink:         #1a2638;
  --ch-muted:       #5b6677;

  position: relative;
  margin: 1rem 0 0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem);
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, var(--ch-paper) 0%, var(--ch-cream) 38%, var(--ch-cream-deep) 100%);
  color: var(--ch-ink);
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 36px 80px -36px rgba(7, 29, 51, 0.18),
    0 0 0 1px rgba(184, 149, 72, 0.22);
}

.ctcl-chansons-exhibit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(184, 149, 72, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 82% 88%, rgba(7, 29, 51, 0.06) 0%, transparent 50%);
}

.ctcl-chansons-exhibit > * { position: relative; z-index: 1; }

/* ── Intro ───────────────────────────────────────────────────────────── */
.ctcl-chansons-exhibit__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.ctcl-chansons-exhibit__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ch-gold);
  font-weight: 600;
}
.ctcl-chansons-exhibit__rule {
  display: inline-block;
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ch-gold) 50%, transparent);
}
.ctcl-chansons-exhibit__title {
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0.8rem 0;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #1a2638 0%, #3a4a64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ctcl-chansons-exhibit__title em {
  font-style: italic;
  color: var(--ch-gold);
  -webkit-text-fill-color: var(--ch-gold);
}
.ctcl-chansons-exhibit__lead {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ch-muted);
  margin: 0 auto;
  max-width: 56ch;
}

/* ── Grille des cartes chansons ──────────────────────────────────────── */
.ctcl-chansons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  perspective: 1800px;
}

@keyframes ctcl-ch-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
@keyframes ctcl-ch-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.ctcl-chanson-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  isolation: isolate;
  transform-style: preserve-3d;
  animation: ctcl-ch-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--ch-delay, 0ms);
}

.ctcl-chanson-card__link {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  text-decoration: none;
  cursor: zoom-in;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: ctcl-ch-float 8s ease-in-out infinite;
  animation-delay: calc(var(--ch-delay, 0ms) + 200ms);
}

.ctcl-chanson-card__hidden {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── La page peek (page 2 derrière) ──────────────────────────────────── */
.ctcl-chanson-card__peek {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ch-paper);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 14px 30px -14px rgba(7, 29, 51, 0.35);
  transform: rotate(5deg) translate(6%, 2%);
  transform-origin: bottom left;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.92;
}
.ctcl-chanson-card__peek img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: sepia(0.18) brightness(0.96);
}

/* ── La feuille de partition principale (page 1) ─────────────────────── */
.ctcl-chanson-card__sheet {
  position: absolute; inset: 0;
  z-index: 2;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ch-paper);
  padding: 4%;
  box-shadow:
    0 0 0 1px rgba(184, 149, 72, 0.22),
    0 22px 44px -18px rgba(7, 29, 51, 0.32),
    0 8px 18px -8px rgba(7, 29, 51, 0.18);
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ctcl-chanson-card__sheet img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 2px;
  filter: sepia(0.18) contrast(1.04) brightness(0.99);
  transition: filter 600ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.ctcl-chanson-card__paper {
  position: absolute; inset: 4%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60, 36, 10, 0.10), transparent 65%),
    repeating-linear-gradient(0deg, rgba(184, 149, 72, 0.03) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 2px;
}

.ctcl-chanson-card__shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 65%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 500ms ease, background-position 1.3s ease;
  pointer-events: none;
}

.ctcl-chanson-card__zoom {
  position: absolute;
  right: 0.85rem; bottom: 0.85rem;
  width: 2.3rem; height: 2.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--ch-navy);
  background: var(--ch-gold);
  box-shadow: 0 10px 24px -10px rgba(7, 29, 51, 0.5);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
  z-index: 3;
}

/* ── Badge "X pages" en haut à droite ────────────────────────────────── */
.ctcl-chanson-card__badge {
  position: absolute;
  top: -0.6rem; right: -0.6rem;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--ch-navy);
  background: linear-gradient(135deg, #f5e3b8 0%, var(--ch-gold) 100%);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(7, 29, 51, 0.5);
  transform: rotate(2deg);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ctcl-chanson-card__badge i {
  font-size: 0.85rem;
  color: var(--ch-navy);
}

/* ── Hover : tilt 3D + peek qui sort + shine + UI ────────────────────── */
.ctcl-chanson-card__link:hover,
.ctcl-chanson-card__link:focus-visible {
  transform: rotateX(5deg) rotateY(-6deg) translateY(-6px);
}
.ctcl-chanson-card.is-multi .ctcl-chanson-card__link:hover .ctcl-chanson-card__peek,
.ctcl-chanson-card.is-multi .ctcl-chanson-card__link:focus-visible .ctcl-chanson-card__peek {
  transform: rotate(11deg) translate(14%, -4%);
  opacity: 1;
}
.ctcl-chanson-card__link:hover .ctcl-chanson-card__sheet,
.ctcl-chanson-card__link:focus-visible .ctcl-chanson-card__sheet {
  box-shadow:
    0 0 0 1px rgba(184, 149, 72, 0.55),
    0 38px 70px -22px rgba(7, 29, 51, 0.42),
    0 14px 32px -10px rgba(184, 149, 72, 0.25);
}
.ctcl-chanson-card__link:hover .ctcl-chanson-card__sheet img,
.ctcl-chanson-card__link:focus-visible .ctcl-chanson-card__sheet img {
  filter: sepia(0.10) contrast(1.06) brightness(1.02);
}
.ctcl-chanson-card__link:hover .ctcl-chanson-card__shine,
.ctcl-chanson-card__link:focus-visible .ctcl-chanson-card__shine {
  opacity: 1;
  background-position: 0% 0%;
}
.ctcl-chanson-card__link:hover .ctcl-chanson-card__zoom,
.ctcl-chanson-card__link:focus-visible .ctcl-chanson-card__zoom {
  opacity: 1;
  transform: translateY(0);
}
.ctcl-chanson-card__link:hover ~ .ctcl-chanson-card__caption .ctcl-chanson-card__nom,
.ctcl-chanson-card__link:focus-visible ~ .ctcl-chanson-card__caption .ctcl-chanson-card__nom {
  color: var(--ch-gold);
}

/* ── Caption (numéro + titre) ────────────────────────────────────────── */
.ctcl-chanson-card__caption {
  text-align: center;
  padding: 0.3rem 0.6rem 0;
}
.ctcl-chanson-card__num {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ch-gold);
}
.ctcl-chanson-card__nom {
  font-family: "Fraunces", "Playfair Display", serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--ch-navy);
  margin: 0.3rem 0 0;
  letter-spacing: -0.005em;
  transition: color 320ms ease;
}

@media (max-width: 540px) {
  .ctcl-chansons-grid {
    grid-template-columns: 1fr;
  }
  .ctcl-chanson-card__link {
    aspect-ratio: 3 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctcl-chanson-card,
  .ctcl-chanson-card__link,
  .ctcl-chanson-card__peek,
  .ctcl-chanson-card__sheet,
  .ctcl-chanson-card__sheet img,
  .ctcl-chanson-card__shine {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   Indochine — Témoignages : carnet du Typhon + Mémoires de marins
   Données = scan filesystem (images + 2 lots de PDFs).
   Scopes : .ctcl-temoin-storm  /  .ctcl-temoin-souvenirs
   ========================================================================= */
.ctcl-temoin-storm,
.ctcl-temoin-souvenirs {
  --t-cream:       #f6f1e4;
  --t-cream-deep:  #efe6d2;
  --t-paper:       #fdf8eb;
  --t-navy:        #071d33;
  --t-storm:       #2c4257;
  --t-gold:        #b89548;
  --t-gold-soft:   #c9a961;
  --t-ink:         #1a2638;
  --t-muted:       #5b6677;

  position: relative;
  margin: 1rem 0 0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem);
  border-radius: 14px;
  color: var(--t-ink);
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 36px 80px -36px rgba(7, 29, 51, 0.18),
    0 0 0 1px rgba(184, 149, 72, 0.22);
}

.ctcl-temoin-storm {
  background: radial-gradient(ellipse at 50% 0%, var(--t-paper) 0%, var(--t-cream) 38%, var(--t-cream-deep) 100%);
}
.ctcl-temoin-souvenirs {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: radial-gradient(ellipse at 50% 100%, var(--t-paper) 0%, var(--t-cream) 50%, var(--t-cream-deep) 100%);
}

.ctcl-temoin-storm::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(44, 66, 87, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(184, 149, 72, 0.14) 0%, transparent 50%);
}
.ctcl-temoin-souvenirs::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(184, 149, 72, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 18% 88%, rgba(7, 29, 51, 0.06) 0%, transparent 50%);
}

.ctcl-temoin-storm > *,
.ctcl-temoin-souvenirs > * { position: relative; z-index: 1; }

/* ── Intros communes ─────────────────────────────────────────────────── */
.ctcl-temoin-storm__intro,
.ctcl-temoin-souvenirs__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.ctcl-temoin-storm__eyebrow,
.ctcl-temoin-souvenirs__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-gold);
  font-weight: 600;
}
.ctcl-temoin-storm__rule {
  display: inline-block;
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--t-gold) 50%, transparent);
}
.ctcl-temoin-storm__title,
.ctcl-temoin-souvenirs__title {
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1.05;
  margin: 0.8rem 0;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #1a2638 0%, #3a4a64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ctcl-temoin-storm__title em,
.ctcl-temoin-souvenirs__title em {
  font-style: italic;
  color: var(--t-gold);
  -webkit-text-fill-color: var(--t-gold);
}
.ctcl-temoin-storm__lead,
.ctcl-temoin-souvenirs__lead {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--t-muted);
  margin: 0 auto;
  max-width: 56ch;
}

/* ── Pages du Typhon ─────────────────────────────────────────────────── */
.ctcl-temoin-storm__pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  perspective: 1800px;
}

@keyframes ctcl-t-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes ctcl-t-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}

.ctcl-temoin-storm__page {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  text-decoration: none;
  cursor: zoom-in;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: ctcl-t-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both,
             ctcl-t-float 8s ease-in-out infinite;
  animation-delay: var(--t-delay, 0ms), calc(var(--t-delay, 0ms) + 250ms);
}

.ctcl-temoin-storm__sheet {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--t-paper);
  padding: 4%;
  box-shadow:
    0 0 0 1px rgba(184, 149, 72, 0.25),
    0 22px 44px -18px rgba(7, 29, 51, 0.32),
    0 8px 18px -8px rgba(7, 29, 51, 0.18);
  transition:
    box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ctcl-temoin-storm__sheet img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 2px;
  filter: sepia(0.22) contrast(1.04) brightness(0.98);
  transition: filter 600ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-drag: none;
}
.ctcl-temoin-storm__paper {
  position: absolute; inset: 4%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60, 36, 10, 0.10), transparent 65%),
    repeating-linear-gradient(0deg, rgba(184, 149, 72, 0.04) 0 2px, transparent 2px 5px);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 2px;
}
.ctcl-temoin-storm__shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 500ms ease, background-position 1.3s ease;
  pointer-events: none;
}
.ctcl-temoin-storm__zoom {
  position: absolute;
  right: 0.85rem; bottom: 0.85rem;
  width: 2.3rem; height: 2.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--t-navy);
  background: var(--t-gold);
  box-shadow: 0 10px 24px -10px rgba(7, 29, 51, 0.5);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
}
.ctcl-temoin-storm__pagenum {
  position: absolute;
  top: -0.6rem; left: 1rem;
  z-index: 4;
  padding: 0.35rem 0.85rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-navy);
  background: linear-gradient(135deg, #f5e3b8 0%, var(--t-gold) 100%);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(7, 29, 51, 0.4);
}

.ctcl-temoin-storm__page:hover,
.ctcl-temoin-storm__page:focus-visible {
  transform: rotateX(5deg) rotateY(-6deg) translateY(-6px);
}
.ctcl-temoin-storm__page:hover .ctcl-temoin-storm__sheet,
.ctcl-temoin-storm__page:focus-visible .ctcl-temoin-storm__sheet {
  box-shadow:
    0 0 0 1px rgba(184, 149, 72, 0.55),
    0 40px 70px -22px rgba(7, 29, 51, 0.42),
    0 14px 32px -10px rgba(184, 149, 72, 0.25);
}
.ctcl-temoin-storm__page:hover .ctcl-temoin-storm__sheet img,
.ctcl-temoin-storm__page:focus-visible .ctcl-temoin-storm__sheet img {
  filter: sepia(0.10) contrast(1.06) brightness(1.02);
  transform: scale(1.03);
}
.ctcl-temoin-storm__page:hover .ctcl-temoin-storm__shine,
.ctcl-temoin-storm__page:focus-visible .ctcl-temoin-storm__shine {
  opacity: 1;
  background-position: 0% 0%;
}
.ctcl-temoin-storm__page:hover .ctcl-temoin-storm__zoom,
.ctcl-temoin-storm__page:focus-visible .ctcl-temoin-storm__zoom {
  opacity: 1;
  transform: translateY(0);
}

/* ── Récits associés (PDFs cyclone) ──────────────────────────────────── */
.ctcl-temoin-storm__docs {
  border-top: 1px dashed rgba(184, 149, 72, 0.4);
  padding-top: clamp(1.4rem, 2.5vw, 2rem);
}
.ctcl-temoin-storm__docs-title {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--t-navy);
  margin: 0 0 1.2rem;
}
.ctcl-temoin-storm__docs-title i { color: var(--t-gold); }

.ctcl-temoin-storm__docs-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.ctcl-temoin-doc {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: 10px;
  background: var(--t-paper);
  border: 1px solid rgba(184, 149, 72, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 30px -18px rgba(7, 29, 51, 0.25);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 320ms ease, border-color 320ms ease;
}
.ctcl-temoin-doc:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 149, 72, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 22px 38px -18px rgba(7, 29, 51, 0.30),
    0 0 0 1px rgba(184, 149, 72, 0.3);
}

.ctcl-temoin-doc__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #d94545 0%, #a31919 100%);
  font-size: 1.2rem;
  box-shadow: 0 8px 18px -8px rgba(163, 25, 25, 0.55);
}

.ctcl-temoin-doc__body { min-width: 0; flex: 1; }
.ctcl-temoin-doc__title {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--t-navy);
  margin: 0.1rem 0 0.3rem;
  letter-spacing: -0.005em;
}
.ctcl-temoin-doc__author {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--t-muted);
  margin: 0 0 0.7rem;
  font-style: italic;
}
.ctcl-temoin-doc__author i { color: var(--t-gold); }

.ctcl-temoin-doc__actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}

.ctcl-temoin-doc__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              background 280ms ease, color 280ms ease, border-color 280ms ease;
}
.ctcl-temoin-doc__btn--primary {
  color: var(--t-navy);
  background: var(--t-gold);
  border: 1px solid var(--t-gold);
}
.ctcl-temoin-doc__btn--primary:hover {
  background: var(--t-navy);
  color: var(--t-gold-soft);
  border-color: var(--t-navy);
  transform: translateY(-2px);
}
.ctcl-temoin-doc__btn--ghost {
  color: var(--t-navy);
  background: transparent;
  border: 1px solid rgba(184, 149, 72, 0.5);
}
.ctcl-temoin-doc__btn--ghost:hover {
  background: rgba(184, 149, 72, 0.12);
  border-color: var(--t-gold);
  color: var(--t-navy);
  transform: translateY(-2px);
}

/* ── Mémoires de marins (cartes souvenirs) ───────────────────────────── */
.ctcl-temoin-souvenirs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

.ctcl-temoin-memoir {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.4rem, 2.5vw, 2rem);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--t-paper) 0%, #f8efd9 100%);
  border: 1px solid rgba(184, 149, 72, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 22px 44px -22px rgba(7, 29, 51, 0.25);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 420ms ease, border-color 420ms ease;
  animation: ctcl-t-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--s-delay, 0ms);
  isolation: isolate;
}
.ctcl-temoin-memoir::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(184, 149, 72, 0.10), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms ease;
  z-index: -1;
}
.ctcl-temoin-memoir:hover {
  transform: translateY(-5px);
  border-color: rgba(184, 149, 72, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 32px 60px -22px rgba(7, 29, 51, 0.32);
}
.ctcl-temoin-memoir:hover::after { opacity: 1; }

.ctcl-temoin-memoir__quote {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
  color: var(--t-gold);
  background: rgba(184, 149, 72, 0.14);
  border: 1px solid rgba(184, 149, 72, 0.32);
  font-size: 1.6rem;
  line-height: 1;
}

.ctcl-temoin-memoir__title {
  font-family: "Fraunces", "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  color: var(--t-navy);
  margin: 0 0 0.7rem;
  letter-spacing: -0.005em;
}

.ctcl-temoin-memoir__author {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.96rem;
  color: var(--t-muted);
  margin: 0 0 1.2rem;
}
.ctcl-temoin-memoir__author-dash {
  color: var(--t-gold);
  font-weight: 600;
  font-style: normal;
}

.ctcl-temoin-memoir__actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.ctcl-temoin-memoir__actions .ctcl-temoin-doc__btn--ghost {
  width: 2.4rem; height: 2.4rem;
  padding: 0;
  justify-content: center;
}

@media (max-width: 540px) {
  .ctcl-temoin-storm__pagenum {
    left: 0.6rem;
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctcl-temoin-storm__page,
  .ctcl-temoin-storm__sheet img,
  .ctcl-temoin-storm__shine,
  .ctcl-temoin-doc,
  .ctcl-temoin-memoir,
  .ctcl-temoin-doc__btn {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   FNFL — Biographies des engagés volontaires du Triomphant.
   Données = PDF biographiques et portraits fournis.
   Scope : .ctcl-fnfl-biographies
   ========================================================================= */
.ctcl-fnfl-biographies {
  --bio-cream:       #f6f1e4;
  --bio-cream-deep:  #efe6d2;
  --bio-paper:       #fdf8eb;
  --bio-navy:        #071d33;
  --bio-gold:        #b89548;
  --bio-gold-soft:   #c9a961;
  --bio-ink:         #1a2638;
  --bio-muted:       #5b6677;
  --bio-mpf:         #b41f1f;

  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: radial-gradient(ellipse at 50% 0%, var(--bio-paper) 0%, var(--bio-cream) 38%, var(--bio-cream-deep) 100%);
  color: var(--bio-ink);
  isolation: isolate;
  overflow: hidden;
}

.ctcl-fnfl-biographies::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 14% 8%, rgba(184, 149, 72, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 86% 92%, rgba(7, 29, 51, 0.06) 0%, transparent 50%);
}
.ctcl-fnfl-biographies > * { position: relative; z-index: 1; }

/* ── Intro ───────────────────────────────────────────────────────────── */
.ctcl-fnfl-bio__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.ctcl-fnfl-bio__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--bio-gold);
  font-weight: 600;
}
.ctcl-fnfl-bio__rule {
  display: inline-block;
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bio-gold) 50%, transparent);
}
.ctcl-fnfl-bio__title {
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0.8rem 0;
  letter-spacing: 0;
  background: linear-gradient(180deg, #1a2638 0%, #3a4a64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ctcl-fnfl-bio__title em {
  font-style: italic;
  color: var(--bio-gold);
  -webkit-text-fill-color: var(--bio-gold);
}
.ctcl-fnfl-bio__lead {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--bio-muted);
  margin: 0 auto;
  max-width: 60ch;
}
.ctcl-fnfl-bio__intro--commandants {
  margin-top: clamp(3.2rem, 6vw, 5.2rem);
}

/* ── Grille des fiches ───────────────────────────────────────────────── */
.ctcl-fnfl-bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
}

@keyframes ctcl-bio-rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.ctcl-fnfl-bio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bio-paper);
  border: 1px solid rgba(184, 149, 72, 0.28);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 24px 50px -28px rgba(7, 29, 51, 0.25);
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms ease,
    border-color 420ms ease;
  animation: ctcl-bio-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--bio-delay, 0ms);
}

.ctcl-fnfl-bio-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 149, 72, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 36px 70px -22px rgba(7, 29, 51, 0.32);
}

.ctcl-fnfl-bio-card.is-mpf {
  border-color: rgba(180, 31, 31, 0.35);
}
.ctcl-fnfl-bio-card.is-mpf:hover {
  border-color: rgba(180, 31, 31, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 36px 70px -22px rgba(180, 31, 31, 0.22);
}

/* ── Portrait ────────────────────────────────────────────────────────── */
.ctcl-fnfl-bio-card__portrait {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  text-decoration: none;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2418 0%, #16110a 100%);
  isolation: isolate;
}

.ctcl-fnfl-bio-card__frame {
  position: absolute; inset: 0;
  display: block;
  overflow: hidden;
}
.ctcl-fnfl-bio-card__frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: grayscale(0.35) sepia(0.18) contrast(1.05) brightness(0.96);
  transition: filter 600ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.ctcl-fnfl-bio-card__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(7, 29, 51, 0.55) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(20, 14, 6, 0.35) 100%);
  pointer-events: none;
}

.ctcl-fnfl-bio-card__shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 500ms ease, background-position 1.3s ease;
  pointer-events: none;
}

.ctcl-fnfl-bio-card:hover .ctcl-fnfl-bio-card__frame img {
  filter: grayscale(0.18) sepia(0.10) contrast(1.08) brightness(1.02);
  transform: scale(1.04);
}
.ctcl-fnfl-bio-card:hover .ctcl-fnfl-bio-card__shine {
  opacity: 1;
  background-position: 0% 0%;
}

/* Badge "Mort pour la France" */
.ctcl-fnfl-bio-card__mpf {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--bio-mpf) 0%, #7e1212 100%);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(180, 31, 31, 0.55);
}
.ctcl-fnfl-bio-card__mpf i {
  font-size: 0.85rem;
  color: #ffeac9;
}

/* Médaille « Compagnon de la Libération » : même badge sur la photo que le
   MPLF, en vert. Placée en bas à gauche pour ne jamais recouvrir le MPLF
   lorsqu'un marin cumule les deux distinctions. */
.ctcl-fnfl-bio-card__compagnon {
  position: absolute;
  bottom: 1rem; left: 1rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(135deg, #1f7a3d 0%, #12532a 100%);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(31, 122, 61, 0.55);
}
.ctcl-fnfl-bio-card__compagnon i {
  font-size: 0.85rem;
  color: #eafff1;
}
.ctcl-fnfl-bio-card.is-compagnon {
  border-color: rgba(31, 122, 61, 0.35);
}
.ctcl-fnfl-bio-card.is-compagnon:hover {
  border-color: rgba(31, 122, 61, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 36px 70px -22px rgba(31, 122, 61, 0.22);
}

/* ── Corps de la fiche ───────────────────────────────────────────────── */
.ctcl-fnfl-bio-card__body {
  padding: clamp(1.4rem, 2.5vw, 1.8rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ctcl-fnfl-bio-card__engagement {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bio-navy);
  background: linear-gradient(135deg, #f5e3b8 0%, var(--bio-gold) 100%);
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 0.9rem;
}
.ctcl-fnfl-bio-card__engagement i { font-size: 0.85rem; }

.ctcl-fnfl-bio-card__nom {
  font-family: "Fraunces", "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  line-height: 1.1;
  color: var(--bio-navy);
  margin: 0 0 0.25rem;
  letter-spacing: 0;
}

.ctcl-fnfl-bio-card__grade {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--bio-gold);
  margin: 0 0 1rem;
}

.ctcl-fnfl-bio-card__dates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  padding: 0.8rem 0.95rem;
  margin: 0 0 1.1rem;
  background: rgba(184, 149, 72, 0.08);
  border-left: 3px solid var(--bio-gold);
  border-radius: 4px;
}
.ctcl-fnfl-bio-card__dates > div { min-width: 0; }
.ctcl-fnfl-bio-card__dates dt {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bio-gold);
  margin-bottom: 0.1rem;
}
.ctcl-fnfl-bio-card__dates dt i { font-size: 0.65rem; }
.ctcl-fnfl-bio-card__dates dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--bio-ink);
}

.ctcl-fnfl-bio-card__resume {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--bio-muted);
  margin: 0 0 1.1rem;
  flex: 1;
}

.ctcl-fnfl-bio-card__decos {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ctcl-fnfl-bio-card__decos li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--bio-ink);
  padding: 0.35rem 0.6rem;
  background: rgba(184, 149, 72, 0.10);
  border-radius: 4px;
  border-left: 2px solid rgba(184, 149, 72, 0.55);
}
.ctcl-fnfl-bio-card__decos i {
  color: var(--bio-gold);
  font-size: 0.95rem;
  flex: 0 0 auto;
}
.ctcl-fnfl-bio-card__decos--details li {
  background: rgba(7, 29, 51, 0.06);
  border-left-color: rgba(7, 29, 51, 0.24);
}

.ctcl-fnfl-bio-card__cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.6rem 1.1rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bio-navy);
  background: var(--bio-gold);
  border: 1px solid var(--bio-gold);
  border-radius: 999px;
  text-decoration: none;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              background 280ms ease, color 280ms ease, border-color 280ms ease;
}
.ctcl-fnfl-bio-card__cta:hover {
  background: var(--bio-navy);
  color: var(--bio-gold-soft);
  border-color: var(--bio-navy);
  transform: translateY(-2px);
}
.ctcl-fnfl-bio-card__cta--disabled,
.ctcl-fnfl-bio-card__cta--disabled:hover {
  color: var(--bio-muted);
  background: transparent;
  border-color: rgba(91, 102, 119, 0.35);
  transform: none;
  cursor: default;
}
.ctcl-fnfl-bio-card.is-mpf .ctcl-fnfl-bio-card__cta {
  background: var(--bio-mpf);
  color: #fff;
  border-color: var(--bio-mpf);
}
.ctcl-fnfl-bio-card.is-mpf .ctcl-fnfl-bio-card__cta:hover {
  background: #7e1212;
  color: #ffeac9;
  border-color: #7e1212;
}

@media (max-width: 540px) {
  .ctcl-fnfl-bio-card__portrait {
    aspect-ratio: 4 / 4.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctcl-fnfl-bio-card,
  .ctcl-fnfl-bio-card__frame img,
  .ctcl-fnfl-bio-card__shine,
  .ctcl-fnfl-bio-card__cta {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   FNFL — Documentation : bibliothèque enrichie (12 PDF + aperçus).
   Données = liste explicite + scan filesystem pour les pages d'images.
   Scope : .ctcl-fnfl-docs-rich
   ========================================================================= */
.ctcl-fnfl-docs-rich {
  --fd-cream:      #f6f1e4;
  --fd-cream-deep: #efe6d2;
  --fd-paper:      #fdf8eb;
  --fd-navy:       #071d33;
  --fd-gold:       #b89548;
  --fd-gold-soft:  #c9a961;
  --fd-ink:        #1a2638;
  --fd-muted:      #5b6677;

  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
  margin: 1rem 0 0;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, var(--fd-paper) 0%, var(--fd-cream) 38%, var(--fd-cream-deep) 100%);
  color: var(--fd-ink);
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 36px 80px -36px rgba(7, 29, 51, 0.18),
    0 0 0 1px rgba(184, 149, 72, 0.22);
}
.ctcl-fnfl-docs-rich::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 14% 8%, rgba(184, 149, 72, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 86% 92%, rgba(7, 29, 51, 0.06) 0%, transparent 50%);
}
.ctcl-fnfl-docs-rich > * { position: relative; z-index: 1; }

/* ── Intro ───────────────────────────────────────────────────────────── */
.ctcl-fnfl-docs-rich__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.ctcl-fnfl-docs-rich__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fd-gold);
  font-weight: 600;
}
.ctcl-fnfl-docs-rich__rule {
  display: inline-block;
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fd-gold) 50%, transparent);
}
.ctcl-fnfl-docs-rich__title {
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0.8rem 0;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #1a2638 0%, #3a4a64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ctcl-fnfl-docs-rich__title em {
  font-style: italic;
  color: var(--fd-gold);
  -webkit-text-fill-color: var(--fd-gold);
}
.ctcl-fnfl-docs-rich__lead {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--fd-muted);
  margin: 0 auto;
  max-width: 64ch;
}

/* ── Grille des cartes ───────────────────────────────────────────────── */
.ctcl-fnfl-docs-rich__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
}

@keyframes ctcl-fnfl-doc-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.ctcl-fnfl-doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fd-paper);
  border: 1px solid rgba(184, 149, 72, 0.28);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 24px 50px -28px rgba(7, 29, 51, 0.25);
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms ease,
    border-color 420ms ease;
  animation: ctcl-fnfl-doc-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d-delay, 0ms);
}
.ctcl-fnfl-doc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 149, 72, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 36px 70px -22px rgba(7, 29, 51, 0.32);
}

/* ── Couverture : polaroid stack 3D ──────────────────────────────────── */
.ctcl-fnfl-doc-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #e2d6b8 0%, #cfbf99 100%);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  perspective: 1200px;
}

.ctcl-fnfl-doc-card__cover--gallery {
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.ctcl-fnfl-doc-card__cover--gallery:focus-visible,
.ctcl-fnfl-doc-card__btn:focus-visible,
.ctcl-fnfl-coverflow button:focus-visible,
.ctcl-fnfl-coverflow a:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.72);
  outline-offset: 3px;
}

.ctcl-fnfl-doc-card__stack {
  position: absolute; inset: 0;
  display: block;
  transform-style: preserve-3d;
}

.ctcl-fnfl-doc-card__page {
  position: absolute;
  inset: 8% 14% 14% 14%;
  background: #fff;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 16px 32px -14px rgba(0, 0, 0, 0.45);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  transform-origin: center 80%;
}
.ctcl-fnfl-doc-card__page img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: contrast(1.02);
  user-select: none;
  -webkit-user-drag: none;
}

/* État au repos : pile décalée */
.ctcl-fnfl-doc-card__page[data-i="0"] { transform: rotate(-4deg) translateX(-4%); z-index: 1; }
.ctcl-fnfl-doc-card__page[data-i="1"] { transform: rotate(0deg)  translateX(0%);  z-index: 2; }
.ctcl-fnfl-doc-card__page[data-i="2"] { transform: rotate(5deg)  translateX(4%);  z-index: 3; }

/* Hover : éventail */
.ctcl-fnfl-doc-card:hover .ctcl-fnfl-doc-card__page[data-i="0"] {
  transform: rotate(-10deg) translate(-16%, -3%);
}
.ctcl-fnfl-doc-card:hover .ctcl-fnfl-doc-card__page[data-i="1"] {
  transform: rotate(-1deg) translate(-2%, -5%);
}
.ctcl-fnfl-doc-card:hover .ctcl-fnfl-doc-card__page[data-i="2"] {
  transform: rotate(11deg) translate(14%, -3%);
}

.ctcl-fnfl-doc-card__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  color: rgba(7, 29, 51, 0.25);
}

.ctcl-fnfl-doc-card__badge {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--fd-navy);
  background: linear-gradient(135deg, #f5e3b8 0%, var(--fd-gold) 100%);
  border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(7, 29, 51, 0.4);
}
.ctcl-fnfl-doc-card__badge i { font-size: 0.82rem; }

/* ── Corps de la carte ───────────────────────────────────────────────── */
.ctcl-fnfl-doc-card__body {
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ctcl-fnfl-doc-card__kicker {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fd-gold);
  margin-bottom: 0.45rem;
}

.ctcl-fnfl-doc-card__nom {
  font-family: "Fraunces", "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.32rem);
  line-height: 1.2;
  color: var(--fd-navy);
  margin: 0 0 0.7rem;
  letter-spacing: -0.005em;
}

.ctcl-fnfl-doc-card__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fd-muted);
  margin: 0 0 1.1rem;
  flex: 1;
}

.ctcl-fnfl-doc-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
}

.ctcl-fnfl-doc-card__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              background 280ms ease, color 280ms ease, border-color 280ms ease;
}
.ctcl-fnfl-doc-card__btn i { font-size: 0.95rem; }

.ctcl-fnfl-doc-card__btn--primary {
  color: var(--fd-navy);
  background: var(--fd-gold);
  border: 1px solid var(--fd-gold);
}
.ctcl-fnfl-doc-card__btn--primary:hover {
  background: var(--fd-navy);
  color: var(--fd-gold-soft);
  border-color: var(--fd-navy);
  transform: translateY(-2px);
}
.ctcl-fnfl-doc-card__btn--ghost {
  color: var(--fd-navy);
  background: transparent;
  border: 1px solid rgba(184, 149, 72, 0.5);
}
.ctcl-fnfl-doc-card__btn--ghost:hover {
  background: rgba(184, 149, 72, 0.12);
  border-color: var(--fd-gold);
  transform: translateY(-2px);
}

.ctcl-fnfl-doc-card__hidden {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Coverflow Documentation FNFL ───────────────────────────────────── */
.ctcl-fnfl-coverflow {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 2vw, 1.8rem);
  color: #fdf8eb;
}

.ctcl-fnfl-coverflow.is-open {
  display: flex;
}

.ctcl-fnfl-coverflow__backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(4, 16, 30, 0.96), rgba(9, 30, 50, 0.92)),
    rgba(4, 16, 30, 0.94);
}

.ctcl-fnfl-coverflow__panel {
  position: relative;
  width: min(1180px, 100%);
  max-height: min(92dvh, 940px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(0.8rem, 2vw, 1.2rem);
  padding: clamp(0.9rem, 2.5vw, 1.4rem);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(253, 248, 235, 0.08), rgba(253, 248, 235, 0.03)),
    #071d33;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 34px 90px -28px rgba(0, 0, 0, 0.64);
  overflow: hidden;
}

.ctcl-fnfl-coverflow__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(201, 169, 97, 0.12), transparent 18%, transparent 82%, rgba(201, 169, 97, 0.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 6px);
  opacity: 0.36;
}

.ctcl-fnfl-coverflow__panel > * {
  position: relative;
  z-index: 1;
}

.ctcl-fnfl-coverflow__header,
.ctcl-fnfl-coverflow__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ctcl-fnfl-coverflow__header h4 {
  margin: 0.2rem 0 0;
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  line-height: 1.12;
  color: #fff7df;
  letter-spacing: 0;
}

.ctcl-fnfl-coverflow__kicker,
.ctcl-fnfl-coverflow__footer span,
.ctcl-fnfl-coverflow__footer a,
.ctcl-fnfl-coverflow__meta span {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}

.ctcl-fnfl-coverflow__kicker {
  display: inline-flex;
  color: #c9a961;
}

.ctcl-fnfl-coverflow__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
}

.ctcl-fnfl-coverflow__meta span,
.ctcl-fnfl-coverflow__footer span {
  color: rgba(253, 248, 235, 0.78);
}

.ctcl-fnfl-coverflow__close,
.ctcl-fnfl-coverflow__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 169, 97, 0.38);
  color: #fdf8eb;
  background: rgba(253, 248, 235, 0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  cursor: pointer;
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    background 360ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ctcl-fnfl-coverflow__close {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
}

.ctcl-fnfl-coverflow__close:hover,
.ctcl-fnfl-coverflow__nav:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 169, 97, 0.75);
  background: rgba(201, 169, 97, 0.16);
}

.ctcl-fnfl-coverflow__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
}

.ctcl-fnfl-coverflow__stage {
  position: relative;
  min-height: clamp(420px, 66dvh, 690px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

.ctcl-fnfl-coverflow__track {
  position: relative;
  width: min(860px, 84vw);
  height: clamp(390px, 64dvh, 660px);
  transform-style: preserve-3d;
}

.ctcl-fnfl-coverflow__slide {
  position: absolute;
  inset: 0;
  width: min(620px, 58vw);
  height: 100%;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, -160px) scale(0.56);
  transition:
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ctcl-fnfl-coverflow__slide.is-active,
.ctcl-fnfl-coverflow__slide.is-prev,
.ctcl-fnfl-coverflow__slide.is-next,
.ctcl-fnfl-coverflow__slide.is-before-far,
.ctcl-fnfl-coverflow__slide.is-after-far {
  pointer-events: auto;
}

.ctcl-fnfl-coverflow__slide.is-active {
  z-index: 5;
  opacity: 1;
  filter: brightness(1.06) contrast(1.03);
  transform: translate3d(0, 0, 90px) scale(1) rotateY(0deg);
}

.ctcl-fnfl-coverflow__slide.is-prev {
  z-index: 4;
  opacity: 0.72;
  filter: brightness(0.58) saturate(0.78) blur(1.2px);
  transform: translate3d(-48%, 0, -70px) scale(0.72) rotateY(20deg);
}

.ctcl-fnfl-coverflow__slide.is-next {
  z-index: 4;
  opacity: 0.72;
  filter: brightness(0.58) saturate(0.78) blur(1.2px);
  transform: translate3d(48%, 0, -70px) scale(0.72) rotateY(-20deg);
}

.ctcl-fnfl-coverflow__slide.is-before-far {
  z-index: 2;
  opacity: 0.22;
  filter: brightness(0.44) saturate(0.7) blur(2px);
  transform: translate3d(-76%, 0, -180px) scale(0.54) rotateY(28deg);
}

.ctcl-fnfl-coverflow__slide.is-after-far {
  z-index: 2;
  opacity: 0.22;
  filter: brightness(0.44) saturate(0.7) blur(2px);
  transform: translate3d(76%, 0, -180px) scale(0.54) rotateY(-28deg);
}

.ctcl-fnfl-coverflow__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: clamp(0.45rem, 1vw, 0.8rem);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(253, 248, 235, 0.96), rgba(239, 230, 210, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 30px 80px -32px rgba(0, 0, 0, 0.78);
}

.ctcl-fnfl-coverflow__frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 10px 28px -20px rgba(7, 29, 51, 0.55);
}

.ctcl-fnfl-coverflow__nav {
  position: absolute;
  top: 50%;
  z-index: 7;
  width: clamp(2.7rem, 4vw, 3.35rem);
  height: clamp(2.7rem, 4vw, 3.35rem);
  border-radius: 999px;
  transform: translateY(-50%);
}

.ctcl-fnfl-coverflow__nav:hover {
  transform: translateY(calc(-50% - 2px));
}

.ctcl-fnfl-coverflow__nav--prev { left: clamp(0.3rem, 2vw, 1.2rem); }
.ctcl-fnfl-coverflow__nav--next { right: clamp(0.3rem, 2vw, 1.2rem); }

.ctcl-fnfl-coverflow__nav i {
  font-size: 1.35rem;
}

.ctcl-fnfl-coverflow__footer {
  padding-top: 0.15rem;
}

.ctcl-fnfl-coverflow__footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #071d33;
  background: #c9a961;
  border-radius: 999px;
  padding: 0.62rem 0.95rem;
  text-decoration: none;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    background 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ctcl-fnfl-coverflow__footer a:hover {
  transform: translateY(-2px);
  background: #f1d68d;
}

body.ctcl-coverflow-open {
  overflow: hidden;
}

body.ctcl-coverflow-open .scroll-top {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 540px) {
  .ctcl-fnfl-docs-rich__grid {
    grid-template-columns: 1fr;
  }
  .ctcl-fnfl-doc-card__page {
    inset: 6% 10% 12% 10%;
  }
}

@media (max-width: 767.98px) {
  .ctcl-fnfl-coverflow {
    padding: 0.45rem;
  }

  .ctcl-fnfl-coverflow__panel {
    max-height: 96dvh;
    border-radius: 12px;
    padding: 0.8rem;
  }

  .ctcl-fnfl-coverflow__header {
    align-items: flex-start;
  }

  .ctcl-fnfl-coverflow__header h4 {
    font-size: 1.05rem;
  }

  .ctcl-fnfl-coverflow__stage {
    min-height: 62dvh;
    padding-bottom: 3.7rem;
  }

  .ctcl-fnfl-coverflow__track {
    width: 100%;
    height: 60dvh;
  }

  .ctcl-fnfl-coverflow__slide {
    width: 76vw;
  }

  .ctcl-fnfl-coverflow__slide.is-active {
    transform: translate3d(0, 0, 70px) scale(1);
  }

  .ctcl-fnfl-coverflow__slide.is-prev {
    opacity: 0.46;
    transform: translate3d(-34%, 0, -80px) scale(0.62) rotateY(17deg);
  }

  .ctcl-fnfl-coverflow__slide.is-next {
    opacity: 0.46;
    transform: translate3d(34%, 0, -80px) scale(0.62) rotateY(-17deg);
  }

  .ctcl-fnfl-coverflow__slide.is-before-far,
  .ctcl-fnfl-coverflow__slide.is-after-far {
    opacity: 0;
    pointer-events: none;
  }

  .ctcl-fnfl-coverflow__nav {
    top: auto;
    bottom: 0.2rem;
    transform: none;
  }

  .ctcl-fnfl-coverflow__nav:hover {
    transform: translateY(-2px);
  }

  .ctcl-fnfl-coverflow__nav:disabled {
    transform: none;
  }

  .ctcl-fnfl-coverflow__nav--prev { left: calc(50% - 3.2rem); }
  .ctcl-fnfl-coverflow__nav--next { right: calc(50% - 3.2rem); }

  .ctcl-fnfl-coverflow__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctcl-fnfl-doc-card,
  .ctcl-fnfl-doc-card__page,
  .ctcl-fnfl-doc-card__btn,
  .ctcl-fnfl-coverflow__slide,
  .ctcl-fnfl-coverflow__close,
  .ctcl-fnfl-coverflow__nav,
  .ctcl-fnfl-coverflow__footer a {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   CT / CL > Indochine - ajustements colorimetriques cibles
   ========================================================================= */
.ctcl-indochine-page {
  --ind-navy-deep: #06182b;
  --ind-navy: #08233d;
  --ind-navy-soft: #123a5a;
  --ind-cream: #f7f1e3;
  --ind-paper: #fff8e8;
  --ind-gold: #c9a961;
  --ind-gold-deep: #b89548;
  --ind-text-light: #f8f3e7;
  --ind-text-muted: rgba(248, 243, 231, 0.78);
  --ind-ink: #18263a;
  --ind-muted: #536172;
}

.ctcl-indochine-page .bg-pattern--navy::after {
  background:
    linear-gradient(135deg, rgba(6, 24, 43, 0.94), rgba(8, 35, 61, 0.82)),
    radial-gradient(circle at 18% 15%, rgba(201, 169, 97, 0.13), transparent 36%),
    radial-gradient(circle at 82% 86%, rgba(18, 58, 90, 0.36), transparent 44%);
}

.ctcl-indochine-page .bg-pattern--gold::after {
  background:
    linear-gradient(135deg, rgba(255, 248, 232, 0.90), rgba(232, 216, 177, 0.76)),
    radial-gradient(circle at 20% 18%, rgba(184, 149, 72, 0.18), transparent 36%),
    radial-gradient(circle at 86% 82%, rgba(8, 35, 61, 0.12), transparent 42%);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-section__header .ctcl-section-kicker,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm__eyebrow,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-souvenirs__eyebrow,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chansons-exhibit__eyebrow,
.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit .js-eyebrow {
  color: var(--ind-gold);
}

.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-section__header .ctcl-section-kicker {
  color: var(--ind-gold-deep);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-section__header h2 {
  color: var(--ind-text-light);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-section__header h2 {
  color: var(--ind-navy);
}

.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-souvenirs,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chansons-exhibit,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-article,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-docs,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-story,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-media-card,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-coming__head,
.ctcl-indochine-page .bg-pattern--navy .ctcl-empty {
  background:
    radial-gradient(circle at 18% 12%, rgba(201, 169, 97, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(6, 24, 43, 0.96), rgba(8, 35, 61, 0.94) 58%, rgba(12, 45, 74, 0.93));
  border-color: rgba(201, 169, 97, 0.30);
  color: var(--ind-text-light);
  box-shadow:
    0 34px 90px -38px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(201, 169, 97, 0.12);
}

.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit::before,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm::before,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-souvenirs::before,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chansons-exhibit::before {
  background:
    radial-gradient(circle at 12% 10%, rgba(201, 169, 97, 0.13), transparent 42%),
    radial-gradient(circle at 88% 90%, rgba(255, 248, 232, 0.05), transparent 46%);
}

.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-souvenirs__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chansons-exhibit__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-article__body h3,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-docs__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-story__head h3,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-media-card h3,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-coming__head h3 {
  background: none;
  color: var(--ind-text-light);
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-souvenirs__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chansons-exhibit__title {
  -webkit-background-clip: initial;
  background-clip: initial;
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm__title em,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-souvenirs__title em,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chansons-exhibit__title em,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-article__year,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-story__kicker,
.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit__date,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-docs__title i,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-coming__head > i,
.ctcl-indochine-page .bg-pattern--navy .ctcl-empty i {
  color: var(--ind-gold);
  -webkit-text-fill-color: currentColor;
}

.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit__lead,
.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit__credit,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm__lead,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-souvenirs__lead,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chansons-exhibit__lead,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-article__lead,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-article__text,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-story__lead,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-story__body,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-media-card p,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-coming__head p,
.ctcl-indochine-page .bg-pattern--navy .ctcl-empty p {
  color: rgba(248, 243, 231, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit .js-rule,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm__rule,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chansons-exhibit__rule {
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.84), transparent);
}

.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit .js-eyebrow,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-coming__head > i,
.ctcl-indochine-page .bg-pattern--navy .ctcl-empty i {
  background: rgba(201, 169, 97, 0.12);
  border-color: rgba(201, 169, 97, 0.32);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-doc,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-memoir,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-item,
.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-docs__list li,
.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit .js-card__panel {
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.98), rgba(243, 233, 210, 0.96));
  border-color: rgba(201, 169, 97, 0.32);
  color: var(--ind-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 18px 44px -28px rgba(0, 0, 0, 0.42);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-doc__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-memoir__title,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-item__body h3,
.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit .js-card__title {
  color: var(--ind-navy);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-doc__author,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-memoir__author,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-item__body p,
.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit .js-card__meta,
.ctcl-indochine-page .bg-pattern--navy .js-saigon-exhibit .js-card__meta dd {
  color: var(--ind-muted);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-docs__list a {
  color: var(--ind-navy);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-docs__list a:hover {
  color: var(--ind-gold-deep);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-chanson-card__caption {
  color: var(--ind-text-light);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-chanson-card__nom,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm__docs-title {
  color: var(--ind-text-light);
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-chanson-card__num,
.ctcl-indochine-page .bg-pattern--navy .ctcl-temoin-storm__docs-title i,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chanson-card__link:hover ~ .ctcl-chanson-card__caption .ctcl-chanson-card__nom,
.ctcl-indochine-page .bg-pattern--navy .ctcl-chanson-card__link:focus-visible ~ .ctcl-chanson-card__caption .ctcl-chanson-card__nom {
  color: var(--ind-gold);
  -webkit-text-fill-color: currentColor;
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-media-card__link,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-item__cta {
  background: var(--ind-gold);
  color: var(--ind-navy-deep);
}

.ctcl-indochine-page .bg-pattern--navy .ctcl-fnfl-media-card__link:hover,
.ctcl-indochine-page .bg-pattern--navy .ctcl-doc-item__cta:hover {
  background: var(--ind-text-light);
  color: var(--ind-navy);
}

.ctcl-indochine-page .bg-pattern--gold .ctcl-insignes-exhibit,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-gallery__item,
.ctcl-indochine-page .bg-pattern--gold .ctcl-doc-item,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-article,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-docs,
.ctcl-indochine-page .bg-pattern--gold .ctcl-doc-coming__head,
.ctcl-indochine-page .bg-pattern--gold .ctcl-empty {
  background:
    radial-gradient(circle at 18% 12%, rgba(201, 169, 97, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.98), rgba(244, 234, 213, 0.95));
  border-color: rgba(184, 149, 72, 0.26);
  color: var(--ind-ink);
}

.ctcl-indochine-page .bg-pattern--gold .ctcl-insignes-exhibit__title,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-gallery__item figcaption,
.ctcl-indochine-page .bg-pattern--gold .ctcl-doc-item__body h3,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-article__body h3,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-docs__title,
.ctcl-indochine-page .bg-pattern--gold .ctcl-doc-coming__head h3 {
  color: var(--ind-navy);
}

.ctcl-indochine-page .bg-pattern--gold .ctcl-insignes-exhibit__lead,
.ctcl-indochine-page .bg-pattern--gold .ctcl-doc-item__body p,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-article__lead,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-article__text,
.ctcl-indochine-page .bg-pattern--gold .ctcl-doc-coming__head p,
.ctcl-indochine-page .bg-pattern--gold .ctcl-empty p {
  color: var(--ind-muted);
}

.ctcl-indochine-page .bg-pattern--gold .ctcl-doc-item__cta,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-media-card__link {
  background: var(--ind-navy);
  color: var(--ind-text-light);
}

.ctcl-indochine-page .bg-pattern--gold .ctcl-doc-item__cta:hover,
.ctcl-indochine-page .bg-pattern--gold .ctcl-fnfl-media-card__link:hover {
  background: var(--ind-gold);
  color: var(--ind-navy-deep);
}

/*══════════════════════════════════════════════════════════════════════
  CÉRÉMONIES (sous-rubrique d'Événements)
  ──────────────────────────────────────────────────────────────────────
  Page /evenements/ceremonies — listing par type + ancres
  Page /evenements/detail/{id} pour une cérémonie — galerie + PDF
══════════════════════════════════════════════════════════════════════*/

.ceremonies-page {
  background: #fbfaf6;
}

/* ── Hero ────────────────────────────────────────────────────────── */
.ceremonies-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  color: #fff;
  padding: 90px 0 60px;
  overflow: hidden;
}
.ceremonies-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55);
  z-index: 0;
}
.ceremonies-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 37, 64, 0.55) 0%,
    rgba(10, 37, 64, 0.75) 100%);
  z-index: 1;
}
.ceremonies-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.ceremonies-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a34a;
  background: rgba(10, 37, 64, 0.45);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 163, 74, 0.45);
  margin-bottom: 1rem;
}
.ceremonies-hero__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  margin: 0 0 0.8rem;
  letter-spacing: -0.01em;
  /* Force blanc : le sélecteur global `h1, h2, ... { color: var(--heading-color) }`
     a une spécificité 0-0-1 qui bat l'héritage `color:#fff` du parent. */
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.ceremonies-hero__subtitle {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

/* Ancres / navigation rapide */
.ceremonies-hero__anchors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.ceremonies-anchor {
  display: inline-flex;
  align-items: center;
  /* Cible tactile : 44px minimum (WCAG 2.5.5 / Apple HIG). Le seul padding
     donnait ~42px, juste sous le seuil — sensible depuis l'ajout de la 4e
     ancre « Rencontres », qui fait passer la rangée sur 2 lignes en mobile. */
  min-height: 44px;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
.ceremonies-anchor:hover,
.ceremonies-anchor:focus {
  background: rgba(201, 163, 74, 0.22);
  border-color: #c9a34a;
  color: #fff;
  transform: translateY(-2px);
}
.ceremonies-anchor i:first-child {
  color: #c9a34a;
}
.ceremonies-anchor__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.3rem;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0 0.4rem;
  background: rgba(201, 163, 74, 0.85);
  color: #0a2540;
  border-radius: 999px;
}

/* ── Intro ───────────────────────────────────────────────────────── */
.ceremonies-intro {
  padding-top: 60px;
  padding-bottom: 30px;
}
.ceremonies-intro__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a34a;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.ceremonies-intro__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  color: #0a2540;
  margin-bottom: 1rem;
}
.ceremonies-intro__lead {
  color: #4a5568;
  font-size: 1.02rem;
  line-height: 1.7;
}
.ceremonies-intro__hint {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #0a2540;
}
.ceremonies-intro__hint i {
  color: #c9a34a;
  margin-right: 0.3rem;
}
.ceremonies-intro__hint a {
  color: #0a2540;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #c9a34a;
  text-underline-offset: 3px;
}

/* ── Sections par type ───────────────────────────────────────────── */
.ceremonies-section {
  padding: 60px 0;
  scroll-margin-top: 100px;
}
.ceremonies-section--patriotiques {
  background: linear-gradient(180deg, #fbfaf6 0%, #fff 100%);
}
.ceremonies-section--militaires {
  background: linear-gradient(180deg, #fff 0%, #f5f1e8 100%);
}
.ceremonies-section--religieuses {
  background: linear-gradient(180deg, #f5f1e8 0%, #fbfaf6 100%);
}
/* Rencontres : dernière section, on reboucle sur le fond clair de départ. */
.ceremonies-section--rencontres {
  background: linear-gradient(180deg, #fbfaf6 0%, #fff 100%);
}

.ceremonies-section__head {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}
.ceremonies-section__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a34a;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.ceremonies-section__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  color: #0a2540;
  margin: 0 0 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.ceremonies-section__title i {
  color: #c9a34a;
  font-size: 0.9em;
}
.ceremonies-section__lead {
  max-width: 720px;
  margin: 0 auto;
  color: #4a5568;
  font-size: 1rem;
  line-height: 1.65;
}
.ceremonies-section__count {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #0a2540;
  background: rgba(201, 163, 74, 0.15);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}

/* ── État vide ───────────────────────────────────────────────────── */
.ceremonies-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed rgba(10, 37, 64, 0.15);
  border-radius: 16px;
}
.ceremonies-empty i {
  font-size: 2.2rem;
  color: #c9a34a;
  margin-bottom: 0.6rem;
  display: block;
}
.ceremonies-empty p {
  margin: 0;
  font-size: 0.98rem;
}

/* ── Cartes ──────────────────────────────────────────────────────── */
.ceremonies-grid {
  margin-top: 0.5rem;
}
.ceremonie-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(10, 37, 64, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ceremonie-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(10, 37, 64, 0.12);
  border-color: rgba(201, 163, 74, 0.55);
}
.ceremonie-card__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f3eedf;
  overflow: hidden;
}
.ceremonie-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ceremonie-card:hover .ceremonie-card__media img {
  transform: scale(1.05);
}
.ceremonie-card__media--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10, 37, 64, 0.22);
  font-size: 3rem;
}
.ceremonie-card__body {
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ceremonie-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  color: #4a5568;
}
.ceremonie-card__meta i {
  margin-right: 0.3rem;
  color: #c9a34a;
}
.ceremonie-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0a2540;
  background: rgba(201, 163, 74, 0.18);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
}
.ceremonie-card__chip i {
  color: #c9a34a !important;
}
.ceremonie-card__title {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.7rem;
  color: #0a2540;
}
.ceremonie-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(#c9a34a, #c9a34a);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
}
.ceremonie-card__title a:hover {
  background-size: 100% 2px;
}
.ceremonie-card__resume {
  color: #4a5568;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  flex: 1;
}
.ceremonie-card__membre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: #0a2540;
  background: rgba(10, 37, 64, 0.06);
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  margin-bottom: 0.8rem;
  align-self: flex-start;
}
.ceremonie-card__membre i {
  color: #c9a34a;
}
.ceremonie-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0a2540;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.15rem;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.ceremonie-card__link:hover {
  color: #c9a34a;
  border-color: #c9a34a;
  gap: 0.6rem;
}

/* ── Filtre par fonction (chips/onglets) ──────────────────────────
   Affichage du filtre sur la page Cérémonies. Le membre choisit une
   fonction parmi : président / vice-président / porte-drapeau / membre.
   La chip active passe en navy plein avec or en bordure. */
.ceremonies-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0.7rem;
  margin: 2rem auto 0;
  padding: 1.1rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(244,239,225,0.5));
  border: 1px solid #e8e3d5;
  border-radius: 14px;
  max-width: 920px;
}
.ceremonies-filter__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #52606d;
  margin-right: 0.4rem;
}
.ceremonies-filter__label i { color: #c9a34a; }

.ceremonies-filter__chip {
  display: inline-flex;
  align-items: center;
  /* Même seuil de 44px que les ancres du hero. */
  min-height: 44px;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0a2540;
  background: #fff;
  border: 1.5px solid #e8e3d5;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
              transform 0.15s ease, box-shadow 0.2s ease;
}
.ceremonies-filter__chip i { font-size: 1rem; color: #c9a34a; }
.ceremonies-filter__chip:hover {
  background: #faf6ec;
  border-color: #c9a34a;
  color: #0a2540;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(10,37,64,0.25);
}
.ceremonies-filter__chip.is-active {
  background: #0a2540;
  border-color: #c9a34a;
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(10,37,64,0.55);
}
.ceremonies-filter__chip.is-active i { color: #c9a34a; }

.ceremonies-filter__hint {
  margin: 1rem auto 0;
  max-width: 720px;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  color: #0a2540;
  background: #fbf6e8;
  border: 1px solid #efe6c8;
  border-left: 4px solid #c9a34a;
  border-radius: 8px;
  text-align: center;
}
.ceremonies-filter__hint i { color: #c9a34a; margin-right: 0.35rem; }
.ceremonies-filter__hint a {
  color: #0a2540;
  text-decoration: underline;
  font-weight: 600;
}
.ceremonies-filter__hint a:hover { color: #c9a34a; }

/* ── Badge « Ma fonction » sur chaque carte ──────────────────────── */
.ceremonie-card__fonction {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.5rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0a2540;
  background: #fbf6e8;
  border: 1px solid #efe6c8;
  border-left: 3px solid #c9a34a;
  border-radius: 6px;
  width: fit-content;
}
.ceremonie-card__fonction i { color: #c9a34a; }
.ceremonie-card__fonction strong { font-weight: 700; }

/* Variantes de couleur subtile selon la fonction (cohérence avec les
   chips du filtre). Le bord gauche reprend l'or de l'amicale ;
   uniquement le fond change un poil. */
.ceremonie-card__fonction--president      { background: #fff7e1; }
.ceremonie-card__fonction--vice_president { background: #fdf2d6; }
.ceremonie-card__fonction--porte_drapeau  { background: #fbf6e8; }
.ceremonie-card__fonction--membre         { background: #f6f1e3; }
.ceremonie-card__fonction--inscrit {
  background: #e8f5ec;
  border-left-color: #1f7a4d;
}
.ceremonie-card__fonction--inscrit i { color: #1f7a4d; }

/* ── Bloc fonction dans le formulaire de réservation (detail.php) ── */
.evenement-reservation__fonction-bloc {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.75rem 0 1rem;
  padding: 0.9rem 1rem;
  background: #faf6ec;
  border: 1px solid #efe6c8;
  border-left: 4px solid #c9a34a;
  border-radius: 8px;
}
.evenement-reservation__fonction-bloc--inscription { background: #fff; }
.evenement-reservation__fonction-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0a2540;
}
.evenement-reservation__fonction-label i { color: #c9a34a; }

.evenement-reservation__fonction-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.evenement-reservation__fonction-form .form-select { max-width: 280px; }

/* Rappel des fonctions uniques deja attribuees (sous le select
   d'inscription). Aide l'utilisateur a comprendre pourquoi une option
   est grisee. */
.evenement-reservation__fonction-occupees {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: #52606d;
  background: #fff;
  border: 1px dashed #efe6c8;
  border-radius: 6px;
}
.evenement-reservation__fonction-occupees i { color: #c9a34a; margin-right: 0.25rem; }
.evenement-reservation__fonction-occupees strong { color: #0a2540; }

/* ── Retour ──────────────────────────────────────────────────────── */
.ceremonies-retour {
  padding: 30px 0 60px;
}

/* ── Page détail : galerie + PDF ─────────────────────────────────── */
.ceremonie-galerie {
  background: #fff;
}
.ceremonie-galerie__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}
.ceremonie-galerie__grid--pages {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.ceremonie-galerie__item {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  background: #f3eedf;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ceremonie-galerie__grid--pages .ceremonie-galerie__item {
  aspect-ratio: 3 / 4;
}
.ceremonie-galerie__item:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(10, 37, 64, 0.16);
  border-color: rgba(201, 163, 74, 0.55);
}
.ceremonie-galerie__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ceremonie-pdfs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ceremonie-pdfs__list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: #fbfaf6;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 10px;
  color: #0a2540;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ceremonie-pdfs__list a:hover {
  background: rgba(201, 163, 74, 0.1);
  border-color: rgba(201, 163, 74, 0.55);
  transform: translateX(3px);
}
.ceremonie-pdfs__list a > i:first-child {
  color: #d32f2f;
  font-size: 1.3rem;
}
.ceremonie-pdfs__list a > span {
  flex: 1;
}
.ceremonie-pdfs__ext {
  color: #c9a34a;
  font-size: 0.9rem;
  opacity: 0.7;
}

.evenement-resume,
.evenement-detail-membre {
  background: #fff;
}

.evenement-reservation {
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
}
.evenement-reservation__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.evenement-reservation__eyebrow {
  display: inline-block;
  margin-bottom: .35rem;
  color: #c9a34a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.evenement-reservation__status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1f7a4d;
  background: rgba(31,122,77,.1);
  border: 1px solid rgba(31,122,77,.2);
  white-space: nowrap;
}
.evenement-reservation__status--confirme {
  color: #0c5f91;
  background: rgba(12,95,145,.1);
  border-color: rgba(12,95,145,.2);
}
.evenement-reservation__text {
  color: #52606d;
  line-height: 1.6;
  margin: 0 0 1.1rem;
}
.evenement-reservation__actions {
  margin: 0;
}
.evenement-reservation-flash {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  font-weight: 600;
}
.evenement-reservation-flash--success {
  color: #1f7a4d;
  background: rgba(31,122,77,.08);
  border: 1px solid rgba(31,122,77,.2);
}
.evenement-reservation-flash--error {
  color: #9f2d2d;
  background: rgba(159,45,45,.08);
  border: 1px solid rgba(159,45,45,.22);
}

@media (max-width: 575.98px) {
  .evenement-reservation__head {
    flex-direction: column;
  }
  .evenement-reservation__actions .btn {
    width: 100%;
  }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ceremonies-hero {
    min-height: 300px;
    padding: 70px 0 40px;
  }
  .ceremonies-hero__anchors {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .ceremonies-anchor {
    justify-content: space-between;
  }
  .ceremonies-section {
    padding: 40px 0;
  }
  .ceremonie-galerie__grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  .ceremonie-galerie__grid--pages {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/*══════════════════════════════════════════════════════════════════════
  EVENEMENT — Hero détail
  ──────────────────────────────────────────────────────────────────────
  Le hero de la page /evenements/detail/{id} : on flute la couverture en
  fond plein-largeur (atmosphère), et on affiche la même image dans un
  cadre central qui respecte ses proportions (object-fit: contain) —
  fini les portraits massacrés par un background-size:cover.
══════════════════════════════════════════════════════════════════════*/

.evenement-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: 120px 0 70px;
  overflow: hidden;
  color: #fff;
  background: #0a2540;
}

.evenement-hero__bg {
  position: absolute;
  inset: -30px; /* déborde pour cacher le bord flouté */
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.55) saturate(1.1);
  transform: scale(1.1);
  z-index: 0;
}

.evenement-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(10, 37, 64, 0.78) 0%,
    rgba(10, 37, 64, 0.55) 50%,
    rgba(10, 37, 64, 0.82) 100%);
  z-index: 1;
}

.evenement-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

/* Cadre central : montre l'image VRAIMENT (contain), pas recadrée */
.evenement-hero__media {
  margin: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 163, 74, 0.4);
  border-radius: 18px;
  padding: 14px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  max-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.evenement-hero__media::before {
  /* Liseré or discret en coin haut-gauche, signature graphique */
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  width: 22px;
  height: 22px;
  border-top: 2px solid #c9a34a;
  border-left: 2px solid #c9a34a;
  border-top-left-radius: 6px;
  pointer-events: none;
}
.evenement-hero__media::after {
  content: '';
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-bottom: 2px solid #c9a34a;
  border-right: 2px solid #c9a34a;
  border-bottom-right-radius: 6px;
  pointer-events: none;
}

.evenement-hero__media img {
  max-width: 100%;
  max-height: 440px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

/* Colonne texte */
.evenement-hero__text {
  min-width: 0; /* permet le wrap des titres longs en grid */
}

.evenement-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a34a;
  background: rgba(10, 37, 64, 0.5);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 163, 74, 0.45);
  margin-bottom: 1.2rem;
}
.evenement-hero__eyebrow i {
  color: #c9a34a;
  font-size: 0.95em;
}

.evenement-hero__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 1.3rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.evenement-hero__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}
.evenement-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.evenement-hero__meta i {
  color: #c9a34a;
  font-size: 1.05em;
}

/* Responsive : empilement vertical sur tablette / mobile */
@media (max-width: 992px) {
  .evenement-hero {
    min-height: auto;
    padding: 100px 0 50px;
  }
  .evenement-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem;
    text-align: center;
  }
  .evenement-hero__media {
    max-height: 360px;
    margin: 0 auto;
    max-width: 460px;
    width: 100%;
  }
  .evenement-hero__media img {
    max-height: 320px;
  }
  .evenement-hero__meta {
    justify-content: center;
  }
  .evenement-hero__eyebrow {
    margin-bottom: 0.9rem;
  }
}

@media (max-width: 576px) {
  .evenement-hero {
    padding: 90px 0 40px;
  }
  .evenement-hero__media {
    padding: 10px;
    max-height: 300px;
  }
  .evenement-hero__media img {
    max-height: 260px;
  }
  .evenement-hero__media::before,
  .evenement-hero__media::after {
    width: 16px;
    height: 16px;
  }
}

/*══════════════════════════════════════════════════════════════════════
  UI/UX ENHANCEMENT — Photos & Médias FNFL/SNLE + Cérémonies
  ──────────────────────────────────────────────────────────────────────
  Couche de polish ajoutée APRÈS les blocs spécifiques. Ne touche pas
  aux vues : tout est en sélecteurs ciblés avec assez de spécificité
  pour s'imposer sur le hover/transitions. Palette unique : navy
  --uipm-navy (#0a2540), or --uipm-gold (#c9a34a), crème --uipm-cream
  (#fbfaf6). Variables locales, pas de globale.
══════════════════════════════════════════════════════════════════════*/

:root {
  --uipm-navy:        #0a2540;
  --uipm-navy-soft:   #112d4e;
  --uipm-gold:        #c9a34a;
  --uipm-gold-soft:   #d8b76b;
  --uipm-cream:       #fbfaf6;
  --uipm-paper:       #f5f1e8;
  --uipm-ink:         #1a1f36;
  --uipm-muted:       #5b6473;
  --uipm-glow:        0 0 0 1px rgba(201, 163, 74, 0.55),
                      0 20px 50px -10px rgba(10, 37, 64, 0.35),
                      0 0 80px -20px rgba(201, 163, 74, 0.25);
  --uipm-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --uipm-fast:        180ms var(--uipm-ease);
  --uipm-slow:        420ms var(--uipm-ease);
}

/* ── Coin doré décoratif (réutilisable via .uipm-corner-frame) ───── */
.uipm-corner-frame { position: relative; }
.uipm-corner-frame::before,
.uipm-corner-frame::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--uipm-gold);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  transition: width 320ms var(--uipm-ease), height 320ms var(--uipm-ease);
}
.uipm-corner-frame::before {
  top: 12px; left: 12px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-top-left-radius: 6px;
}
.uipm-corner-frame::after {
  bottom: 12px; right: 12px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-bottom-right-radius: 6px;
}
.uipm-corner-frame:hover::before,
.uipm-corner-frame:hover::after {
  width: 36px;
  height: 36px;
}

/* ══════════ FNFL PHOTOS — grille immersive ══════════════════════ */

/* Section : transition cinématographique navy → cream */
#fnfl-photos.ctcl-fnfl-section,
#fnfl-photos.ctcl-fnfl-section--alt {
  background:
    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(201,163,74,0.06), transparent 60%),
    linear-gradient(180deg, var(--uipm-cream) 0%, #fff 100%);
}

/* Carte de groupe : ombre douce et liseré or */
.ctcl-fnfl-photo-group {
  border-radius: 22px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  background: #fff;
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.06);
  transition: box-shadow var(--uipm-slow), transform var(--uipm-slow);
  overflow: hidden;
}
.ctcl-fnfl-photo-group:hover {
  box-shadow: 0 18px 44px rgba(10, 37, 64, 0.14);
  transform: translateY(-3px);
}

.ctcl-fnfl-photo-group__head {
  position: relative;
  padding: 1.6rem 1.8rem 1.2rem;
  background: linear-gradient(135deg, var(--uipm-navy) 0%, var(--uipm-navy-soft) 100%);
  color: #fff;
}
.ctcl-fnfl-photo-group__head::after {
  content: "";
  position: absolute;
  left: 1.8rem;
  bottom: 0;
  width: 50px;
  height: 3px;
  background: var(--uipm-gold);
  border-radius: 2px;
}
.ctcl-fnfl-photo-group__head h3,
.ctcl-fnfl-photo-group__head .ctcl-fnfl-photo-group__title {
  color: #fff;
}
.ctcl-fnfl-photo-group__head p {
  color: rgba(245, 241, 230, 0.88);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.ctcl-fnfl-photo-group__count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uipm-gold);
  background: rgba(201, 163, 74, 0.12);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 163, 74, 0.35);
}

/* Grille masonry-friendly : la 1re image prend 2 colonnes */
.ctcl-fnfl-photo-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  padding: 1rem;
}
.ctcl-fnfl-photo-group__grid > a:first-child,
.ctcl-fnfl-photo-group__grid > .glightbox:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 4 / 3;
}

.ctcl-fnfl-photo-group__grid a,
.ctcl-fnfl-photo-group__grid .glightbox {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--uipm-paper);
  cursor: zoom-in;
  transition: transform var(--uipm-fast), box-shadow var(--uipm-fast);
}
.ctcl-fnfl-photo-group__grid a img,
.ctcl-fnfl-photo-group__grid .glightbox img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--uipm-ease), filter 320ms var(--uipm-ease);
}
.ctcl-fnfl-photo-group__grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 37, 64, 0.7) 100%);
  opacity: 0;
  transition: opacity var(--uipm-fast);
  pointer-events: none;
}
.ctcl-fnfl-photo-group__grid a:hover {
  transform: scale(1.02);
  box-shadow: var(--uipm-glow);
  z-index: 2;
}
.ctcl-fnfl-photo-group__grid a:hover img {
  transform: scale(1.08);
  filter: saturate(1.1) contrast(1.05);
}
.ctcl-fnfl-photo-group__grid a:hover::after { opacity: 1; }

/* Indicateur "loupe" en hover */
.ctcl-fnfl-photo-group__grid a::before {
  content: "\F52A"; /* bi-zoom-in unicode */
  font-family: "bootstrap-icons";
  position: absolute;
  bottom: 10px; right: 10px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--uipm-navy);
  border-radius: 50%;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--uipm-fast), transform var(--uipm-fast);
  z-index: 1;
}
.ctcl-fnfl-photo-group__grid a:hover::before {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .ctcl-fnfl-photo-group__grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .ctcl-fnfl-photo-group__grid > a:first-child,
  .ctcl-fnfl-photo-group__grid > .glightbox:first-child {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 16 / 10;
  }
}

/* ══════════ FNFL VIDÉOS / AUDIO — cards modernes ══════════════════ */

.ctcl-fnfl-media-block {
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  padding: 1.6rem 1.8rem 2rem;
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.05);
}
.ctcl-fnfl-media-block__head {
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
}
.ctcl-fnfl-media-block__head p {
  color: #2d4058;
}
.ctcl-fnfl-media-block__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uipm-gold);
  background: rgba(201, 163, 74, 0.12);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 163, 74, 0.35);
  margin-bottom: 0.6rem;
}

/* Cartes vidéo : badge + ratio 16/9 + play overlay */
.ctcl-fnfl-media-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(10, 37, 64, 0.08);
  transition: transform var(--uipm-fast), box-shadow var(--uipm-fast), border-color var(--uipm-fast);
}
.ctcl-fnfl-media-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(10, 37, 64, 0.14);
  border-color: rgba(201, 163, 74, 0.55);
}
.ctcl-fnfl-media-card video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--uipm-navy);
}
.ctcl-fnfl-media-card__body {
  padding: 1rem 1.1rem 1.2rem;
}

/* Cartes audio : icône, waveform CSS animée, lecteur stylé */
.ctcl-fnfl-audio-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, #fff 0%, var(--uipm-cream) 100%);
  border-radius: 14px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  margin-bottom: 0.7rem;
  transition: transform var(--uipm-fast), box-shadow var(--uipm-fast), border-color var(--uipm-fast);
}
.ctcl-fnfl-audio-card:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(10, 37, 64, 0.1);
  border-color: rgba(201, 163, 74, 0.55);
}
.ctcl-fnfl-audio-card__icon {
  width: 60px; height: 60px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--uipm-navy) 0%, var(--uipm-navy-soft) 100%);
  position: relative;
  overflow: hidden;
}
.ctcl-fnfl-audio-card__icon::after {
  /* Waveform CSS : 3 barres pulsantes */
  content: "";
  position: absolute;
  inset: auto 8px 8px;
  height: 14px;
  background:
    linear-gradient(90deg, var(--uipm-gold) 33%, transparent 33% 66%, var(--uipm-gold) 66%) 0 0 / 4px 100% repeat-x,
    linear-gradient(90deg, transparent 33%, var(--uipm-gold-soft) 33% 66%, transparent 66%) 2px 0 / 4px 100% repeat-x;
  opacity: 0.85;
  animation: uipm-wave 1.4s ease-in-out infinite alternate;
}
@keyframes uipm-wave {
  from { transform: scaleY(0.5); transform-origin: bottom; }
  to   { transform: scaleY(1);   transform-origin: bottom; }
}
.ctcl-fnfl-audio-card__player {
  width: 100%;
  height: 38px;
  margin-top: 0.4rem;
}

/* Items archive .aup3 — pastille format */
.ctcl-fnfl-archive-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  margin-bottom: 0.5rem;
  position: relative;
  transition: border-color var(--uipm-fast), background var(--uipm-fast);
}
.ctcl-fnfl-archive-item:hover {
  border-color: var(--uipm-gold);
  background: linear-gradient(135deg, #fff, rgba(201, 163, 74, 0.04));
}
.ctcl-fnfl-archive-item::before {
  content: "AUP3";
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--uipm-navy);
  color: var(--uipm-gold);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ══════════ SNLE PHOTOS — album premium ══════════════════════════ */

.snle-album,
.snle-album--rich {
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.05);
  overflow: hidden;
  margin-bottom: 2rem;
  transition: box-shadow var(--uipm-slow), transform var(--uipm-slow);
}
.snle-album:hover {
  box-shadow: 0 20px 48px rgba(10, 37, 64, 0.14);
}

.snle-album__head {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 1.8rem;
  padding: 1.6rem;
  background: linear-gradient(135deg, var(--uipm-navy) 0%, var(--uipm-navy-soft) 100%);
  color: #fff;
  align-items: center;
}
.snle-album__cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(201, 163, 74, 0.45);
  transition: transform var(--uipm-fast), border-color var(--uipm-fast);
}
.snle-album__cover:hover {
  transform: scale(1.02);
  border-color: var(--uipm-gold);
}
.snle-album__cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--uipm-ease);
}
.snle-album__cover:hover img { transform: scale(1.05); }

.snle-album__count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uipm-gold);
  background: rgba(201, 163, 74, 0.15);
  border: 1px solid rgba(201, 163, 74, 0.4);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.snle-album__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 0 0 0.6rem;
  color: #fff;
}
.snle-album__lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0;
}

/* Grille photos : masonry + featured */
.snle-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  padding: 1rem;
  background: var(--uipm-cream);
}
.snle-photo-grid > a:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.snle-photo-grid__item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--uipm-paper);
  cursor: zoom-in;
  transition: transform var(--uipm-fast), box-shadow var(--uipm-fast);
}
.snle-photo-grid__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--uipm-ease), filter 320ms var(--uipm-ease);
}
.snle-photo-grid__item:hover {
  transform: scale(1.02);
  box-shadow: var(--uipm-glow);
  z-index: 2;
}
.snle-photo-grid__item:hover img {
  transform: scale(1.08);
  filter: saturate(1.1);
}
.snle-photo-grid__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 37, 64, 0.88) 100%);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--uipm-fast), transform var(--uipm-fast);
}
.snle-photo-grid__item:hover .snle-photo-grid__caption {
  opacity: 1;
  transform: translateY(0);
}
.snle-photo-grid__credit {
  display: block;
  font-size: 0.7rem;
  color: var(--uipm-gold-soft);
  margin-top: 0.2rem;
}

/* Navigation horizontale d'albums (sticky soft) */
.snle-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 14px;
  margin-top: 1.4rem;
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.04);
}
.snle-section-nav a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--uipm-navy);
  text-decoration: none;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: var(--uipm-cream);
  border: 1px solid transparent;
  transition: all var(--uipm-fast);
}
.snle-section-nav a:hover {
  background: var(--uipm-navy);
  color: #fff;
  border-color: var(--uipm-gold);
}

@media (max-width: 768px) {
  .snle-album__head {
    grid-template-columns: 1fr;
  }
  .snle-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .snle-photo-grid > a:first-child {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 16 / 10;
  }
}

/* ══════════ SNLE VIDÉOS / AUDIO — média cards rich ════════════════ */

.snle-media-block {
  margin-bottom: 2.5rem;
  padding: 1.8rem;
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.05);
}
.snle-media-block__head {
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(10, 37, 64, 0.08);
}
.snle-media-block__head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--uipm-navy);
  margin: 0.3rem 0 0.6rem;
}

.snle-media-grid--rich,
.snle-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.2rem;
}

.snle-media-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(10, 37, 64, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform var(--uipm-fast), box-shadow var(--uipm-fast), border-color var(--uipm-fast);
}
.snle-media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(10, 37, 64, 0.14);
  border-color: rgba(201, 163, 74, 0.55);
}

.snle-media-card__head {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 1rem 1.2rem 0.5rem;
}
.snle-media-card__icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.3rem;
  color: var(--uipm-gold);
  background: linear-gradient(135deg, var(--uipm-navy) 0%, var(--uipm-navy-soft) 100%);
  flex-shrink: 0;
}
.snle-media-card--video .snle-media-card__icon {
  background: linear-gradient(135deg, var(--uipm-navy), #173863);
}
.snle-media-card--audio .snle-media-card__icon {
  background: linear-gradient(135deg, #6a4b1a 0%, var(--uipm-gold) 100%);
  color: #fff;
}
.snle-media-card--archive-video .snle-media-card__icon {
  background: linear-gradient(135deg, #5b6473 0%, var(--uipm-navy) 100%);
}

.snle-media-card__title {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--uipm-navy);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}
.snle-media-card__date {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uipm-muted);
}
.snle-media-card__desc {
  padding: 0 1.2rem 0.6rem;
  color: var(--uipm-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
.snle-media-card__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--uipm-navy);
}
.snle-media-card__audio {
  width: calc(100% - 2.4rem);
  margin: 0.4rem 1.2rem 0.6rem;
  height: 40px;
}

/* Bouton "Ouvrir / Télécharger" */
.snle-media-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin: 0.6rem 1.2rem 1.1rem;
  padding: 0.55rem 1rem;
  background: var(--uipm-navy);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all var(--uipm-fast);
}
.snle-media-card__link:hover {
  background: var(--uipm-gold);
  color: var(--uipm-navy);
  border-color: var(--uipm-navy);
  transform: translateX(2px);
}

/* PDF du fonds photos (cartes blanches) */
.snle-private-docs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.9rem;
  margin-top: 1.2rem;
}
.snle-private-doc {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 14px;
  transition: all var(--uipm-fast);
}
.snle-private-doc:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10, 37, 64, 0.1);
  border-color: rgba(201, 163, 74, 0.5);
}
.snle-private-doc__icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  color: #d32f2f;
  background: rgba(211, 47, 47, 0.08);
}
.snle-private-doc__body span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--uipm-gold);
}
.snle-private-doc__body h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--uipm-navy);
  margin: 0.15rem 0 0;
  font-family: inherit;
}
.snle-private-doc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.9rem;
  background: var(--uipm-navy);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.83rem;
  font-weight: 600;
  transition: all var(--uipm-fast);
}
.snle-private-doc__link:hover {
  background: var(--uipm-gold);
  color: var(--uipm-navy);
}

/* Panneau brief membre */
.snle-member-brief__panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.6rem;
  align-items: center;
  padding: 1.4rem 1.8rem;
  background: linear-gradient(135deg, var(--uipm-navy) 0%, var(--uipm-navy-soft) 100%);
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(10, 37, 64, 0.15);
  position: relative;
  overflow: hidden;
}
.snle-member-brief__panel::after {
  /* halo doré décoratif */
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(201,163,74,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.snle-member-brief__copy h2 {
  font-family: 'Fraunces', serif;
  color: #fff;
  margin: 0.4rem 0 0.6rem;
}
/* Le panneau est passé en fond navy : le paragraphe héritait encore du gris
   --snle-muted prévu pour un fond clair, donc illisible. On le repasse en
   blanc, comme le titre juste au-dessus (pages Photos et Vidéos / Audio). */
.snle-member-brief__copy p {
  color: #fff;
  position: relative;
  z-index: 1;
}
.snle-member-stats {
  display: flex;
  gap: 1.2rem;
  position: relative;
  z-index: 1;
}
.snle-member-stats span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(201, 163, 74, 0.35);
  border-radius: 12px;
  min-width: 80px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}
.snle-member-stats strong {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--uipm-gold);
  line-height: 1;
}
.snle-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uipm-gold);
}
.snle-eyebrow--member {
  background: rgba(201, 163, 74, 0.18);
  border-color: rgba(201, 163, 74, 0.5);
}

@media (max-width: 768px) {
  .snle-member-brief__panel { grid-template-columns: 1fr; }
  .snle-member-stats { justify-content: flex-start; flex-wrap: wrap; }
  .snle-media-grid--rich,
  .snle-media-grid { grid-template-columns: 1fr; }
}

/* ══════════ CÉRÉMONIES — polish premium ═══════════════════════════ */

/* Ancre badge : effet glow doré au survol */
.ceremonies-anchor {
  position: relative;
  overflow: hidden;
}
.ceremonies-anchor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(201, 163, 74, 0.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--uipm-fast);
  pointer-events: none;
}
.ceremonies-anchor:hover::before { opacity: 1; }

/* Cartes cérémonies : effet d'élévation 3D subtil */
.ceremonie-card {
  position: relative;
  isolation: isolate;
}
.ceremonie-card::before {
  /* Filet doré qui apparait au hover en haut de la carte */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--uipm-gold) 50%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--uipm-slow);
  z-index: 3;
}
.ceremonie-card:hover::before {
  transform: scaleX(1);
}

/* Photo de couverture : zoom + saturation au hover */
.ceremonie-card__media img {
  transition: transform 600ms var(--uipm-ease), filter 320ms var(--uipm-ease);
}
.ceremonie-card:hover .ceremonie-card__media img {
  transform: scale(1.06);
  filter: saturate(1.08) brightness(1.03);
}

/* Indicateur "membre" amélioré : pictogramme animé */
.ceremonie-card__membre {
  background: linear-gradient(135deg, rgba(201, 163, 74, 0.16) 0%, rgba(201, 163, 74, 0.05) 100%);
  border: 1px solid rgba(201, 163, 74, 0.35);
}
.ceremonie-card__membre i {
  animation: uipm-pulse 2s var(--uipm-ease) infinite;
}
@keyframes uipm-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Effet sur le compteur de section */
.ceremonies-section__count {
  background: linear-gradient(135deg, var(--uipm-gold) 0%, var(--uipm-gold-soft) 100%);
  color: var(--uipm-navy);
  border: none;
  box-shadow: 0 4px 12px rgba(201, 163, 74, 0.3);
}

/* Hero cérémonies : effet de particules-like (sans JS) */
.ceremonies-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(201, 163, 74, 0.12) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(201, 163, 74, 0.08) 0%, transparent 30%);
  pointer-events: none;
  z-index: 1;
}

/* ── Section vide : illustration plus expressive ─────────────────── */
.snle-empty,
.ceremonies-empty {
  padding: 3.5rem 1.5rem;
  background: linear-gradient(180deg, #fff 0%, var(--uipm-cream) 100%);
  border: 1px dashed rgba(201, 163, 74, 0.4);
  text-align: center;
}
.snle-empty i,
.ceremonies-empty i {
  font-size: 3rem;
  color: var(--uipm-gold);
  margin-bottom: 0.6rem;
  display: block;
  animation: uipm-float 3.5s var(--uipm-ease) infinite alternate;
}
@keyframes uipm-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

/* ── Animations d'entrée plus douces que les défauts AOS ────────── */
[data-aos] {
  transition-timing-function: var(--uipm-ease) !important;
}

/*══════════════════════════════════════════════════════════════════════
  VIE DE L'ASSOCIATION (espace membre)
  ──────────────────────────────────────────────────────────────────────
  Page one-page protégée /espace-membre/vie-association. Quatre blocs :
  Comptes-rendus, Journal Réveil Triomphant, Annuaire, Galeries 2016.
  Réutilise les variables --uipm-* déjà déclarées plus haut (navy, or,
  crème, glow). Aucune dépendance ; tout est CSS pur.
══════════════════════════════════════════════════════════════════════*/

.vie-asso-page {
  background: var(--uipm-cream);
}

/* ── HERO ────────────────────────────────────────────────────────── */
/*  Photo « Man the rails » en pleine largeur avec Ken-Burns zoom lent
    sur 12s, double voile navy + accent radial doré et grain SVG —
    même grammaire visuelle que le hero du Calendrier. L'image n'est
    PAS floutée : on veut qu'on reconnaisse l'équipage au pavois. */
.vie-asso-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  padding: 130px 0 70px;
  overflow: hidden;
  color: #fff;
  background: var(--uipm-navy);
}
.vie-asso-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  transform: scale(1.06);
  transition: transform 12s cubic-bezier(0.2, 0.7, 0.3, 1);
  z-index: 0;
  will-change: transform;
}
/* Ken-Burns : zoom déclenché soit en hover (desktop), soit dès le
   chargement de la page via la classe ajoutée par AOS init. */
.vie-asso-page:hover .vie-asso-hero__bg,
.vie-asso-page.aos-init .vie-asso-hero__bg {
  transform: scale(1);
}
.vie-asso-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 37, 64, 0.55) 0%, rgba(10, 37, 64, 0.82) 100%),
    radial-gradient(1200px 400px at 50% 110%, rgba(201, 163, 74, 0.28), transparent 60%);
  z-index: 1;
}
/* Grain photographique léger (SVG inline, ~1 Ko encodé). */
.vie-asso-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.09;
  mix-blend-mode: overlay;
}
/* Halo doré décoratif sur les deux flancs (réutilisé) */
.vie-asso-hero__pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(201, 163, 74, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(201, 163, 74, 0.14) 0%, transparent 40%);
  z-index: 1;
  pointer-events: none;
}
.vie-asso-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.vie-asso-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uipm-gold);
  background: rgba(201, 163, 74, 0.16);
  border: 1px solid rgba(201, 163, 74, 0.45);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.vie-asso-hero__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.vie-asso-hero__lead {
  max-width: 740px;
  margin: 0 auto 2.2rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Stats bar — 4 cellules glassmorphism */
.vie-asso-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  max-width: 720px;
  margin: 0 auto;
}
.vie-asso-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.9rem 0.6rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 163, 74, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--uipm-fast), background var(--uipm-fast),
              border-color var(--uipm-fast);
}
.vie-asso-stat:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--uipm-gold);
}
.vie-asso-stat i {
  font-size: 1.4rem;
  color: var(--uipm-gold);
}
.vie-asso-stat strong {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.vie-asso-stat span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

/* ── NAV ANCRES — sticky, glassmorphism ──────────────────────────── */
.vie-asso-nav {
  position: sticky;
  top: 80px;
  z-index: 40;
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow: 0 6px 16px rgba(10, 37, 64, 0.05);
}
.vie-asso-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.7rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.vie-asso-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--uipm-navy);
  text-decoration: none;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  transition: all var(--uipm-fast);
}
.vie-asso-nav a i { color: var(--uipm-gold); }
.vie-asso-nav a:hover {
  background: var(--uipm-navy);
  color: #fff;
  border-color: var(--uipm-gold);
  transform: translateY(-1px);
}
.vie-asso-nav a:hover i { color: var(--uipm-gold); }

/* ── COMMUNS aux 4 sections ──────────────────────────────────────── */
.vie-asso-section {
  padding: 70px 0;
  scroll-margin-top: 150px;
}
.vie-asso-section--cr {
  background: linear-gradient(180deg, #fff 0%, var(--uipm-cream) 100%);
}
.vie-asso-section--journal {
  background: linear-gradient(180deg, var(--uipm-cream) 0%, #fff 100%);
}
.vie-asso-section--annuaire {
  background:
    linear-gradient(135deg, rgba(10, 37, 64, 0.04) 0%, transparent 70%),
    #fff;
}
.vie-asso-section--galeries {
  background: linear-gradient(180deg, #fff 0%, var(--uipm-cream) 100%);
}

.vie-asso-section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}
.vie-asso-section__head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  color: var(--uipm-navy);
  margin: 0.5rem 0 1rem;
  letter-spacing: -0.01em;
}
.vie-asso-section__head p {
  color: var(--uipm-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}

.vie-asso-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uipm-gold);
}
.vie-asso-kicker--gold {
  background: rgba(201, 163, 74, 0.14);
  border: 1px solid rgba(201, 163, 74, 0.4);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
}

.vie-asso-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fff;
  border: 1px dashed rgba(201, 163, 74, 0.4);
  border-radius: 16px;
  color: var(--uipm-muted);
}
.vie-asso-empty i {
  font-size: 2.4rem;
  color: var(--uipm-gold);
  display: block;
  margin-bottom: 0.6rem;
}

.vie-asso-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all var(--uipm-fast);
  cursor: pointer;
}
.vie-asso-btn--solid {
  background: var(--uipm-navy);
  color: #fff;
}
.vie-asso-btn--solid:hover {
  background: var(--uipm-gold);
  color: var(--uipm-navy);
  border-color: var(--uipm-navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(10, 37, 64, 0.18);
}
.vie-asso-btn--ghost {
  background: transparent;
  color: var(--uipm-navy);
  border-color: rgba(10, 37, 64, 0.25);
}
.vie-asso-btn--ghost:hover {
  background: var(--uipm-navy);
  color: #fff;
  border-color: var(--uipm-gold);
}

/* ── COMPTES-RENDUS — cartes magazine inclinées ──────────────────── */
.vie-asso-cr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
}
.vie-asso-cr {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(10, 37, 64, 0.06);
  transition: transform var(--uipm-slow), box-shadow var(--uipm-slow),
              border-color var(--uipm-slow);
}
.vie-asso-cr:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(10, 37, 64, 0.14);
  border-color: rgba(201, 163, 74, 0.55);
}
.vie-asso-cr__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--uipm-paper);
  overflow: hidden;
}
.vie-asso-cr__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--uipm-ease);
}
.vie-asso-cr:hover .vie-asso-cr__media img {
  transform: scale(1.04);
}
.vie-asso-cr__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 3.5rem;
  color: rgba(10, 37, 64, 0.2);
  background: linear-gradient(135deg, var(--uipm-paper), #fff);
}
.vie-asso-cr__year {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--uipm-navy);
  background: rgba(255, 255, 255, 0.95);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 163, 74, 0.55);
  z-index: 2;
}
.vie-asso-cr__body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vie-asso-cr__title {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--uipm-navy);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.vie-asso-cr__sub {
  color: var(--uipm-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  flex: 1;
}

/* ── JOURNAL — numéro vedette + grille ───────────────────────────── */
.vie-asso-journal-featured {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 2.2rem;
  align-items: center;
  background: linear-gradient(135deg, var(--uipm-navy) 0%, var(--uipm-navy-soft) 100%);
  border-radius: 22px;
  padding: 2rem;
  color: #fff;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(10, 37, 64, 0.2);
}
.vie-asso-journal-featured::after {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201, 163, 74, 0.18), transparent 70%);
  pointer-events: none;
}
.vie-asso-journal-featured__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(201, 163, 74, 0.5);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  background: #000;
  transition: transform var(--uipm-fast);
}
.vie-asso-journal-featured__media:hover { transform: scale(1.02); }
.vie-asso-journal-featured__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--uipm-ease);
}
.vie-asso-journal-featured__media:hover img { transform: scale(1.06); }
.vie-asso-journal-featured__body {
  position: relative;
  z-index: 1;
}
.vie-asso-journal-featured__body h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  color: #fff;
  margin: 0.6rem 0 0.4rem;
}
.vie-asso-journal-featured__year {
  font-size: 0.95rem;
  color: var(--uipm-gold);
  margin: 0 0 1rem;
  font-weight: 600;
}
.vie-asso-journal-featured__desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.4rem;
}

.vie-asso-subhead {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--uipm-navy);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(10, 37, 64, 0.1);
}
.vie-asso-subhead i { color: var(--uipm-gold); }
.vie-asso-subhead span {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--uipm-muted);
  letter-spacing: 0.05em;
}

.vie-asso-journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.1rem;
}
.vie-asso-journal-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  overflow: hidden;
  text-decoration: none;
  color: var(--uipm-navy);
  display: flex;
  flex-direction: column;
  transition: transform var(--uipm-fast), box-shadow var(--uipm-fast),
              border-color var(--uipm-fast);
}
.vie-asso-journal-card:hover {
  transform: translateY(-4px) rotateZ(-0.4deg);
  box-shadow: 0 18px 36px rgba(10, 37, 64, 0.14);
  border-color: rgba(201, 163, 74, 0.55);
  color: var(--uipm-navy);
}
.vie-asso-journal-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--uipm-paper);
}
.vie-asso-journal-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms var(--uipm-ease);
}
.vie-asso-journal-card:hover .vie-asso-journal-card__media img {
  transform: scale(1.05);
}
.vie-asso-journal-card__year {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(10, 37, 64, 0.85);
  color: var(--uipm-gold);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.vie-asso-journal-card__body {
  padding: 0.7rem 0.85rem 0.95rem;
}
.vie-asso-journal-card__body h4 {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--uipm-navy);
  margin: 0 0 0.2rem;
  line-height: 1.25;
}
.vie-asso-journal-card__body span {
  font-size: 0.78rem;
  color: var(--uipm-muted);
}

/* ── ANNUAIRE — bloc sobre + warning ─────────────────────────────── */
.vie-asso-annuaire {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.6rem;
  align-items: center;
  padding: 1.8rem 2rem;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 22px;
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.06);
  position: relative;
  overflow: hidden;
}
.vie-asso-annuaire::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--uipm-gold), var(--uipm-gold-soft));
}
.vie-asso-annuaire__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--uipm-gold);
  background: linear-gradient(135deg, var(--uipm-navy) 0%, var(--uipm-navy-soft) 100%);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(10, 37, 64, 0.25);
}
.vie-asso-annuaire__body h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--uipm-navy);
  margin: 0 0 0.5rem;
}
.vie-asso-annuaire__warn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: #856404;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.4);
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  margin: 0 0 0.7rem;
}
.vie-asso-annuaire__warn i { color: #856404; flex-shrink: 0; }
.vie-asso-annuaire__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.85rem;
  color: var(--uipm-muted);
}
.vie-asso-annuaire__meta i { color: var(--uipm-gold); margin-right: 0.3rem; }

/* ── GALERIES — featured + previews mosaïque ─────────────────────── */
.vie-asso-album {
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  overflow: hidden;
  margin-bottom: 2.5rem;
  box-shadow: 0 8px 26px rgba(10, 37, 64, 0.06);
  transition: box-shadow var(--uipm-slow);
}
.vie-asso-album:hover {
  box-shadow: 0 20px 44px rgba(10, 37, 64, 0.14);
}
.vie-asso-album__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.8rem;
  background: linear-gradient(135deg, var(--uipm-navy) 0%, var(--uipm-navy-soft) 100%);
  color: #fff;
}
.vie-asso-album__head h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #fff;
  margin: 0.4rem 0 0.3rem;
}
.vie-asso-album__head p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  margin: 0;
  max-width: 600px;
}
.vie-asso-album__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.6rem 1rem;
  background: rgba(201, 163, 74, 0.18);
  border: 1px solid rgba(201, 163, 74, 0.45);
  border-radius: 14px;
  min-width: 80px;
}
.vie-asso-album__count strong {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  color: var(--uipm-gold);
  line-height: 1;
}
.vie-asso-album__count {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
}

.vie-asso-album__layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
  padding: 1rem;
  background: var(--uipm-cream);
}
.vie-asso-album__featured {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--uipm-paper);
  cursor: zoom-in;
  transition: transform var(--uipm-fast), box-shadow var(--uipm-fast);
}
.vie-asso-album__featured img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--uipm-ease);
}
.vie-asso-album__featured:hover {
  transform: scale(1.01);
  box-shadow: var(--uipm-glow);
  z-index: 2;
}
.vie-asso-album__featured:hover img {
  transform: scale(1.06);
}

.vie-asso-album__previews {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
}
.vie-asso-album__preview,
.vie-asso-album__more {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--uipm-paper);
  cursor: zoom-in;
  transition: transform var(--uipm-fast), box-shadow var(--uipm-fast);
}
.vie-asso-album__preview img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms var(--uipm-ease);
}
.vie-asso-album__preview:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 22px rgba(10, 37, 64, 0.18);
  z-index: 2;
}
.vie-asso-album__preview:hover img {
  transform: scale(1.08);
}

.vie-asso-album__more {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--uipm-navy) 0%, var(--uipm-navy-soft) 100%);
  color: var(--uipm-gold);
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid rgba(201, 163, 74, 0.5);
  transition: all var(--uipm-fast);
}
.vie-asso-album__more:hover {
  background: linear-gradient(135deg, var(--uipm-gold-soft) 0%, var(--uipm-gold) 100%);
  color: var(--uipm-navy);
  transform: scale(1.04);
  z-index: 2;
}

.vie-asso-bottom {
  padding: 40px 0 80px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .vie-asso-stats { grid-template-columns: repeat(2, 1fr); }
  .vie-asso-journal-featured { grid-template-columns: 1fr; }
  .vie-asso-journal-featured__media {
    max-width: 240px;
    margin: 0 auto;
  }
  .vie-asso-album__head { grid-template-columns: 1fr; }
  .vie-asso-album__count { align-self: flex-start; flex-direction: row; }
  .vie-asso-album__layout { grid-template-columns: 1fr; }
  .vie-asso-album__previews { grid-template-columns: repeat(4, 1fr); }
  .vie-asso-annuaire {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.5rem;
  }
  .vie-asso-annuaire__icon { margin: 0 auto; }
  .vie-asso-annuaire__warn { text-align: left; }
  .vie-asso-annuaire__meta { justify-content: center; }
}

@media (max-width: 576px) {
  .vie-asso-hero { min-height: 380px; padding: 100px 0 50px; }
  .vie-asso-stats { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .vie-asso-stat { padding: 0.7rem 0.4rem; }
  .vie-asso-stat strong { font-size: 1.4rem; }
  .vie-asso-cr-grid { grid-template-columns: 1fr; }
  .vie-asso-journal-grid { grid-template-columns: repeat(2, 1fr); }
  .vie-asso-album__previews { grid-template-columns: repeat(2, 1fr); }
  .vie-asso-nav {
    top: 70px;
  }
  .vie-asso-nav a { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
}

/*══════════════════════════════════════════════════════════════════════
  MÉMOIRE COLLECTIVE (espace membre)
  ──────────────────────────────────────────────────────────────────────
  Page « Hommes du Triomphant » version membre. Le pattern visuel
  s'inspire des biographies FNFL (.ctcl-fnfl-bio-card) : portrait
  sépia, cadre or, hover shine, badge MPLF. On l'enrichit ici avec :
    - badges de période multicolores (FNFL, CT/CL, SNLE) ;
    - filtres pills cliquables ;
    - section In Memoriam séparée avec encadrement plus solennel.
  Variables locales : on réutilise --bio-* déjà déclarées.
══════════════════════════════════════════════════════════════════════*/

:root {
  --memo-fnfl:   #2a5db0;
  --memo-ctcl:   #b41f1f;
  --memo-snle:   #0f7a5a;
  --memo-mpf:    #b41f1f;
  --memo-compagnon: #1f7a3d;
  --memo-paper:  #fdf8eb;
  --memo-cream:  #fbfaf6;
  --memo-navy:   #071d33;
  --memo-ink:    #1a2638;
  --memo-muted:  #5b6677;
  --memo-gold:   #b89548;
  --memo-gold-soft: #d4b76a;
}

.memoire-page {
  background:
    radial-gradient(ellipse 1100px 500px at 50% 0%, rgba(184, 149, 72, 0.05), transparent 65%),
    var(--memo-cream);
}

/* ── HERO ────────────────────────────────────────────────────────── */
.memoire-hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: center;
  padding: 130px 0 80px;
  overflow: hidden;
  color: #fff;
  background: var(--memo-navy);
}
.memoire-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(0.55) sepia(0.18) brightness(0.55) contrast(1.05);
  transform: scale(1.06);
  transition: transform 14s cubic-bezier(0.2, 0.7, 0.3, 1);
  z-index: 0;
}
.memoire-page:hover .memoire-hero__bg,
.memoire-page.aos-init .memoire-hero__bg {
  transform: scale(1);
}
.memoire-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 29, 51, 0.55) 0%, rgba(7, 29, 51, 0.88) 100%),
    radial-gradient(1200px 400px at 50% 110%, rgba(184, 149, 72, 0.28), transparent 60%);
  z-index: 1;
}
.memoire-hero__halo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(184, 149, 72, 0.15) 0%, transparent 35%),
    radial-gradient(circle at 82% 72%, rgba(184, 149, 72, 0.1) 0%, transparent 35%);
  z-index: 1;
  pointer-events: none;
}
.memoire-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.memoire-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--memo-gold-soft);
  background: rgba(184, 149, 72, 0.14);
  border: 1px solid rgba(184, 149, 72, 0.4);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.memoire-hero__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.2rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.memoire-hero__title em {
  color: var(--memo-gold-soft);
  font-style: italic;
}
.memoire-hero__lead {
  max-width: 760px;
  margin: 0 auto 2.4rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  line-height: 1.7;
}
.memoire-hero__lead em {
  color: var(--memo-gold-soft);
  font-style: italic;
}

/* Bandeau de statistiques en bas du hero */
.memoire-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
  max-width: 900px;
  margin: 0 auto;
}
.memoire-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.9rem 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(184, 149, 72, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 240ms ease, border-color 240ms ease;
}
.memoire-stat:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--memo-gold);
}
.memoire-stat strong {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--memo-gold-soft);
  line-height: 1;
}
.memoire-stat span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.35rem;
  text-align: center;
}
.memoire-stat--fnfl strong { color: #9bbef7; }
.memoire-stat--ctcl strong { color: #ff9b9b; }
.memoire-stat--snle strong { color: #6ad6b3; }
.memoire-stat--mpf strong  { color: #ffcfcf; }

/* ── COMMUNS aux 3 sections ──────────────────────────────────────── */
.memoire-section {
  padding: 80px 0;
  scroll-margin-top: 100px;
  position: relative;
}
.memoire-section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.8rem;
}
.memoire-section__head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2rem, 3.8vw, 2.6rem);
  color: var(--memo-navy);
  margin: 1rem 0 1rem;
  letter-spacing: -0.01em;
}
.memoire-section__head p {
  color: var(--memo-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}
.memoire-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--memo-gold);
}
.memoire-kicker--gold {
  color: var(--memo-gold);
}
.memoire-rule {
  display: inline-block;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--memo-gold), transparent);
}
.memoire-kicker--gold .memoire-rule {
  background: linear-gradient(90deg, transparent, var(--memo-gold-soft), transparent);
}

/* ── FILTRES PAR PÉRIODE ─────────────────────────────────────────── */
.memoire-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto 3rem;
  max-width: 920px;
}
.memoire-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--memo-navy);
  background: #fff;
  border: 1px solid rgba(7, 29, 51, 0.12);
  border-radius: 999px;
  cursor: pointer;
  transition: all 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.memoire-filter i { color: var(--memo-gold); }
.memoire-filter:hover {
  border-color: var(--memo-gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(7, 29, 51, 0.18);
}
.memoire-filter.is-active {
  background: linear-gradient(135deg, var(--memo-navy) 0%, #122c47 100%);
  color: #fff;
  border-color: var(--memo-navy);
  box-shadow: 0 12px 26px -10px rgba(7, 29, 51, 0.45);
}
.memoire-filter.is-active i { color: var(--memo-gold-soft); }
.memoire-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(184, 149, 72, 0.18);
  color: var(--memo-gold);
  border-radius: 999px;
  margin-left: 0.2rem;
}
.memoire-filter.is-active .memoire-filter__count {
  background: rgba(212, 183, 106, 0.25);
  color: var(--memo-gold-soft);
}
.memoire-filter--fnfl i { color: var(--memo-fnfl); }
.memoire-filter--ctcl i { color: var(--memo-ctcl); }
.memoire-filter--snle i { color: var(--memo-snle); }
.memoire-filter--mpf i  { color: var(--memo-mpf); }
.memoire-filter--compagnon i { color: var(--memo-compagnon); }

/* ── GRILLE DE CARTES BIOGRAPHIQUES ──────────────────────────────── */
.memoire-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
}
.memoire-grid__group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 0.8rem;
  border-bottom: 1px solid rgba(184, 149, 72, 0.34);
}
.memoire-grid__group-head span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Fraunces", serif;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 700;
  color: var(--memo-navy);
}
.memoire-grid__group-head i {
  color: var(--memo-gold);
}
.memoire-grid__group-head p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--memo-muted);
  text-align: right;
}
.memoire-grid__group-head:not(:first-child) {
  margin-top: clamp(0.6rem, 2vw, 1.4rem);
}
.memoire-grid__group-head--fnfl i { color: var(--memo-fnfl); }
.memoire-grid__group-head--ctcl i { color: var(--memo-ctcl); }
.memoire-grid__group-head--snle i { color: var(--memo-snle); }
.memoire-grid__group-head--inconnue i { color: var(--memo-muted); }

@keyframes memoire-rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.memoire-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--memo-paper);
  border: 1px solid rgba(184, 149, 72, 0.28);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 24px 50px -28px rgba(7, 29, 51, 0.25);
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms ease,
    border-color 420ms ease,
    opacity 320ms ease;
}
.memoire-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 149, 72, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 36px 70px -22px rgba(7, 29, 51, 0.32);
}
.memoire-card.is-hidden {
  display: none;
}
.memoire-card.is-mpf {
  border-color: rgba(180, 31, 31, 0.4);
}
.memoire-card.is-mpf::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--memo-mpf), transparent);
  z-index: 3;
}
.memoire-card.is-mpf:hover {
  border-color: rgba(180, 31, 31, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 36px 70px -22px rgba(180, 31, 31, 0.22);
}
.memoire-card.is-compagnon {
  border-color: rgba(31, 122, 61, 0.4);
}
.memoire-card.is-compagnon::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--memo-compagnon), transparent);
  z-index: 3;
}
.memoire-card.is-compagnon:hover {
  border-color: rgba(31, 122, 61, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 36px 70px -22px rgba(31, 122, 61, 0.22);
}
.memoire-card.is-complete {
  border-color: rgba(184, 149, 72, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 28px 58px -28px rgba(7, 29, 51, 0.32);
}
.memoire-card.is-simple {
  background: linear-gradient(180deg, #fff 0%, rgba(248, 246, 239, 0.86) 100%);
}

/* Portrait */
.memoire-card__portrait {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  text-decoration: none;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2418 0%, #16110a 100%);
  isolation: isolate;
}
.memoire-card__frame {
  position: absolute; inset: 0;
  display: block;
  overflow: hidden;
}
.memoire-card__frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: grayscale(0.32) sepia(0.16) contrast(1.05) brightness(0.96);
  transition: filter 600ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-drag: none;
}
.memoire-card__initials {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-family: 'Fraunces', serif;
  font-size: 4.5rem;
  font-weight: 600;
  color: rgba(212, 183, 106, 0.6);
}
.memoire-card__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(7, 29, 51, 0.62) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(20, 14, 6, 0.4) 100%);
  pointer-events: none;
}
.memoire-card__shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 500ms ease, background-position 1.3s ease;
  pointer-events: none;
}
.memoire-card:hover .memoire-card__frame img {
  filter: grayscale(0.15) sepia(0.08) contrast(1.1) brightness(1.02);
  transform: scale(1.04);
}
.memoire-card:hover .memoire-card__shine {
  opacity: 1;
  background-position: 0% 0%;
}

/* Badges de période en overlay haut-droit */
.memoire-card__periodes {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
  max-width: 70%;
}
.memoire-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.memoire-badge--fnfl  { background: rgba(42, 93, 176, 0.92); }
.memoire-badge--ct-cl { background: rgba(180, 31, 31, 0.92); }
.memoire-badge--indochine { background: rgba(180, 31, 31, 0.92); }
.memoire-badge--snle  { background: rgba(15, 122, 90, 0.92); }

/* Badge MPLF (réminiscence du pattern FNFL) */
.memoire-card__mpf {
  position: absolute;
  bottom: 0.9rem; left: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--memo-mpf) 0%, #7e1212 100%);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(180, 31, 31, 0.55);
}
.memoire-card__mpf i { font-size: 0.85rem; color: #ffeac9; }

/* Médaille « Compagnon de la Libération » (même logique que le MPLF, en vert) */
.memoire-card__compagnon {
  position: absolute;
  bottom: 0.9rem; left: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--memo-compagnon) 0%, #12532a 100%);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(31, 122, 61, 0.55);
}
.memoire-card__compagnon i { font-size: 0.85rem; color: #eafff1; }
/* Quand les deux distinctions coexistent, on empile la médaille verte au-dessus du MPLF. */
.memoire-card.is-mpf .memoire-card__compagnon { bottom: calc(0.9rem + 3.1rem); }

/* Corps */
.memoire-card__body {
  padding: clamp(1.4rem, 2.5vw, 1.8rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.memoire-card__quality {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-bottom: 0.85rem;
  padding: 0.32rem 0.65rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--memo-navy);
  background: rgba(184, 149, 72, 0.14);
  border: 1px solid rgba(184, 149, 72, 0.3);
  border-radius: 999px;
}
.memoire-card__quality i {
  color: var(--memo-gold);
}
.memoire-card__engagement {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--memo-navy);
  background: linear-gradient(135deg, #f5e3b8 0%, var(--memo-gold) 100%);
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 0.9rem;
}
.memoire-card__engagement i { font-size: 0.85rem; }
.memoire-card__nom {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  line-height: 1.1;
  color: var(--memo-navy);
  margin: 0 0 0.25rem;
}
.memoire-card__grade {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--memo-gold);
  margin: 0 0 1rem;
}
.memoire-card__dates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  padding: 0.8rem 0.95rem;
  margin: 0 0 1.1rem;
  background: rgba(184, 149, 72, 0.08);
  border-left: 3px solid var(--memo-gold);
  border-radius: 4px;
}
.memoire-card__dates > div { min-width: 0; }
.memoire-card__dates dt {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--memo-gold);
  margin-bottom: 0.1rem;
}
.memoire-card__dates dt i { font-size: 0.65rem; }
.memoire-card__dates dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--memo-ink);
}
.memoire-card__resume {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--memo-muted);
  margin: 0 0 1.1rem;
  flex: 1;
}
.memoire-card__decos {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.memoire-card__decos li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--memo-ink);
  padding: 0.35rem 0.6rem;
  background: rgba(184, 149, 72, 0.10);
  border-radius: 4px;
  border-left: 2px solid rgba(184, 149, 72, 0.55);
}
.memoire-card__decos i {
  color: var(--memo-gold);
  font-size: 0.95rem;
  flex: 0 0 auto;
}
.memoire-commandants-section {
  background: linear-gradient(180deg, #fff 0%, var(--memo-paper) 100%);
}
.memoire-featured-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(212, 183, 106, 0.18), transparent 32%),
    linear-gradient(180deg, #f8f4e9 0%, #fff 100%);
}
.memoire-featured-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 1px solid rgba(184, 149, 72, 0.28);
  border-bottom: 1px solid rgba(184, 149, 72, 0.28);
}
.memoire-featured-section > .container {
  position: relative;
}
.memoire-card--featured {
  border-color: rgba(184, 149, 72, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 34px 64px -30px rgba(105, 76, 18, 0.38);
}
.memoire-card--featured .memoire-card__portrait {
  aspect-ratio: 5 / 6;
}
.memoire-card__quality--featured {
  color: #fff;
  background: linear-gradient(135deg, var(--memo-navy), #183b5b);
  border-color: rgba(212, 183, 106, 0.62);
}
.memoire-card__quality--featured i {
  color: var(--memo-gold-soft);
}
.memoire-card__decos--details li {
  background: rgba(7, 29, 51, 0.06);
  border-left-color: rgba(7, 29, 51, 0.24);
}
.memoire-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.65rem 1.2rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--memo-navy);
  background: var(--memo-gold);
  border: 1px solid var(--memo-gold);
  border-radius: 999px;
  text-decoration: none;
  transition: all 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.memoire-card__cta:hover {
  background: var(--memo-navy);
  color: var(--memo-gold);
  border-color: var(--memo-navy);
  transform: translateX(2px);
}
.memoire-card__cta--disabled,
.memoire-card__cta--disabled:hover {
  color: var(--memo-muted);
  background: transparent;
  border-color: rgba(91, 102, 119, 0.35);
  transform: none;
  cursor: default;
}
.memoire-card__cta--ghost {
  background: transparent;
  color: var(--memo-navy);
  border-color: rgba(7, 29, 51, 0.25);
}
.memoire-card__cta--ghost:hover {
  background: var(--memo-navy);
  color: #fff;
  border-color: var(--memo-gold);
}

/* État vide / filtre sans résultat */
.memoire-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fff;
  border: 1px dashed rgba(184, 149, 72, 0.4);
  border-radius: 16px;
  color: var(--memo-muted);
  margin-top: 1.5rem;
}
.memoire-empty i {
  font-size: 2.4rem;
  color: var(--memo-gold);
  display: block;
  margin-bottom: 0.6rem;
}

/* ── IN MEMORIAM ─────────────────────────────────────────────────── */
.memoire-memoriam-section {
  background:
    radial-gradient(ellipse 800px 300px at 50% 0%, rgba(180, 31, 31, 0.05), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--memo-cream) 100%);
  padding: 80px 0;
}
.memoire-section__head--memoriam .memoire-kicker {
  color: var(--memo-mpf);
}
.memoire-section__head--memoriam .memoire-rule {
  background: linear-gradient(90deg, transparent, var(--memo-mpf), transparent);
}
.memoire-memoriam {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 2rem;
}
.memoire-memoriam__card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.4rem;
  padding: 1.6rem;
  background: #fff;
  border: 1px solid rgba(180, 31, 31, 0.18);
  border-left: 4px solid var(--memo-mpf);
  border-radius: 14px;
  box-shadow: 0 12px 28px -14px rgba(180, 31, 31, 0.18);
  align-items: start;
  transition: transform 320ms ease, box-shadow 320ms ease;
}
.memoire-memoriam__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -14px rgba(180, 31, 31, 0.25);
}
.memoire-memoriam__portrait {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--memo-paper);
  box-shadow: 0 8px 18px -8px rgba(7, 29, 51, 0.3);
}
.memoire-memoriam__portrait--link {
  cursor: zoom-in;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.memoire-memoriam__portrait--link:hover,
.memoire-memoriam__portrait--link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -16px rgba(7, 29, 51, 0.55);
  outline: none;
}
.memoire-memoriam__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) sepia(0.18) contrast(1.05) brightness(0.97);
}
.memoire-memoriam__text {
  min-width: 0;
}
.memoire-memoriam__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--memo-mpf) 0%, #7e1212 100%);
  border-radius: 999px;
  margin-bottom: 0.7rem;
}
.memoire-memoriam__mark i { color: #ffeac9; }
/* Variante verte : le marin cumule MPLF et Compagnon de la Libération. */
.memoire-memoriam__mark--compagnon {
  margin-left: 0.45rem;
  background: linear-gradient(135deg, var(--memo-compagnon) 0%, #12532a 100%);
}
.memoire-memoriam__mark--compagnon i { color: #eafff1; }
.memoire-memoriam__text h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--memo-navy);
  margin: 0 0 0.2rem;
}
.memoire-memoriam__grade {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--memo-gold);
  margin: 0 0 0.5rem;
}
.memoire-memoriam__deces {
  font-size: 0.88rem;
  color: var(--memo-mpf);
  margin: 0 0 0.8rem;
  font-weight: 500;
}
.memoire-memoriam__deces i { margin-right: 0.3rem; }
.memoire-memoriam__resume {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--memo-muted);
  margin: 0 0 1.1rem;
}

/* ── LISTE COMPLÈTE DES MARINS ───────────────────────────────────── */
.memoire-liste-section {
  background: linear-gradient(180deg, var(--memo-cream) 0%, #fff 100%);
  padding: 80px 0;
}
.memoire-liste {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  gap: 2rem;
  align-items: center;
  padding: 1.8rem;
  background: linear-gradient(135deg, var(--memo-navy) 0%, #122c47 100%);
  border-radius: 22px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 40px -18px rgba(7, 29, 51, 0.3);
  position: relative;
  overflow: hidden;
  transition: transform 320ms ease, box-shadow 320ms ease;
}
.memoire-liste::after {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(184, 149, 72, 0.18), transparent 70%);
  pointer-events: none;
}
.memoire-liste:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -18px rgba(7, 29, 51, 0.45);
  color: #fff;
}
.memoire-liste__cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(184, 149, 72, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  background: #000;
  z-index: 1;
}
.memoire-liste__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.memoire-liste:hover .memoire-liste__cover img {
  transform: scale(1.04);
}
.memoire-liste__body {
  position: relative;
  z-index: 1;
}
.memoire-liste__body h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: #fff;
  margin: 0.7rem 0 0.5rem;
}
.memoire-liste__body p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 1.3rem;
}
.memoire-liste__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--memo-navy);
  background: var(--memo-gold);
  border-radius: 999px;
  box-shadow: 0 10px 20px -8px rgba(184, 149, 72, 0.45);
}

.memoire-bottom {
  padding: 40px 0 80px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .memoire-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .memoire-stat:nth-child(n+4) {
    /* CT/CL et SNLE passent en ligne 2, MPF en ligne 3 — wrap natif */
  }
  .memoire-liste {
    grid-template-columns: 1fr;
  }
  .memoire-liste__cover {
    max-width: 220px;
    margin: 0 auto;
  }
  .memoire-memoriam__card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .memoire-memoriam__portrait {
    max-width: 200px;
    margin: 0 auto;
  }
  .memoire-memoriam__mark { margin-left: auto; margin-right: auto; }
}
@media (max-width: 576px) {
  .memoire-hero { min-height: 50vh; padding: 100px 0 50px; }
  .memoire-stats {
    grid-template-columns: repeat(2, 1fr);
    max-width: 360px;
  }
  .memoire-stat strong { font-size: 1.5rem; }
  .memoire-filters { gap: 0.4rem; }
  .memoire-filter { padding: 0.5rem 0.9rem; font-size: 0.82rem; }
  .memoire-filter__count { min-width: 18px; height: 18px; font-size: 0.65rem; }
  .memoire-card__periodes { max-width: 80%; }
  .memoire-grid__group-head {
    display: block;
  }
  .memoire-grid__group-head p {
    margin-top: 0.35rem;
    text-align: left;
  }
}

/*══════════════════════════════════════════════════════════════════════
  MÉMOIRE COLLECTIVE — LISTE COMPLÈTE DES MARINS DU TRIOMPHANT
  ──────────────────────────────────────────────────────────────────────
  Section #liste-marins : index nominatif filtrable (table
  marins_triomphant). Réutilise la palette --memo-* et l'esprit visuel
  des .memoire-card. Conçu dense, lisible, sans débordement de texte.
══════════════════════════════════════════════════════════════════════*/
.memoire-marins-section {
  background: linear-gradient(180deg, var(--memo-cream) 0%, #fff 100%);
  padding: 80px 0;
  scroll-margin-top: 100px;
  position: relative;
}

/* ── Bandeau de statistiques ─────────────────────────────────────── */
.marins-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
  max-width: 920px;
  margin: 0 auto 2.4rem;
}
.marins-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  padding: 0.9rem 0.6rem;
  background: #fff;
  border: 1px solid rgba(7, 29, 51, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 20px -16px rgba(7, 29, 51, 0.35);
}
.marins-stat strong {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--memo-gold);
}
.marins-stat span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--memo-muted);
  line-height: 1.25;
}

/* ── Barre d'outils de filtrage ──────────────────────────────────── */
.marins-toolbar {
  max-width: 960px;
  margin: 0 auto 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid rgba(7, 29, 51, 0.08);
  border-radius: 20px;
  box-shadow: 0 18px 44px -28px rgba(7, 29, 51, 0.4);
}

/* Boutons de période */
.marins-periodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.marins-pchip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--memo-navy);
  background: var(--memo-cream);
  border: 1px solid rgba(7, 29, 51, 0.12);
  border-radius: 999px;
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.marins-pchip i { color: var(--memo-gold); transition: color 220ms ease; }
.marins-pchip:hover {
  transform: translateY(-1px);
  border-color: var(--memo-gold);
  color: var(--memo-navy);
}
.marins-pchip.is-active {
  background: linear-gradient(135deg, var(--memo-navy) 0%, #122c47 100%);
  color: #fff;
  border-color: var(--memo-navy);
}
.marins-pchip.is-active i { color: var(--memo-gold-soft); }
.marins-pchip--fnfl.is-active { background: linear-gradient(135deg, #2a5db0, #1c4486); border-color: #2a5db0; }
.marins-pchip--ctcl.is-active { background: linear-gradient(135deg, #b41f1f, #8c1818); border-color: #b41f1f; }
.marins-pchip--snle.is-active { background: linear-gradient(135deg, #0f7a5a, #0b5e45); border-color: #0f7a5a; }
.marins-pchip--fnfl.is-active i,
.marins-pchip--ctcl.is-active i,
.marins-pchip--snle.is-active i { color: rgba(255, 255, 255, 0.9); }

/* Formulaire (recherche + selects + toggles) */
.marins-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}
.marins-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--memo-cream);
  border: 1px solid rgba(7, 29, 51, 0.12);
  border-radius: 12px;
  padding: 0 0.4rem 0 0.9rem;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.marins-search:focus-within {
  border-color: var(--memo-gold);
  box-shadow: 0 0 0 3px rgba(184, 149, 72, 0.15);
}
.marins-search > i {
  color: var(--memo-muted);
  font-size: 1rem;
  flex-shrink: 0;
}
.marins-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.75rem 0.6rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--memo-navy);
}
.marins-search input:focus { outline: none; }
.marins-search__go {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  padding: 0.55rem 1.1rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--memo-navy);
  background: var(--memo-gold);
  border-radius: 9px;
  transition: filter 200ms ease;
}
.marins-search__go:hover { filter: brightness(1.06); }

.marins-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
}
.marins-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.marins-field > span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--memo-muted);
}
.marins-field select {
  width: 100%;
  max-width: 100%;
  padding: 0.65rem 0.8rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--memo-navy);
  background: var(--memo-cream);
  border: 1px solid rgba(7, 29, 51, 0.12);
  border-radius: 10px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.marins-field select:focus {
  outline: none;
  border-color: var(--memo-gold);
  box-shadow: 0 0 0 3px rgba(184, 149, 72, 0.15);
}

.marins-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.marins-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.marins-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.marins-toggle__track {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(7, 29, 51, 0.18);
  transition: background 220ms ease;
}
.marins-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform 220ms ease;
}
.marins-toggle input:checked + .marins-toggle__track { background: var(--memo-gold); }
.marins-toggle input:checked + .marins-toggle__track::after { transform: translateX(18px); }
.marins-toggle input:focus-visible + .marins-toggle__track {
  box-shadow: 0 0 0 3px rgba(184, 149, 72, 0.3);
}
.marins-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--memo-navy);
}
.marins-toggle__label i { color: var(--memo-gold); }

/* Filtre alphabétique A-Z */
.marins-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(7, 29, 51, 0.08);
}
.marins-alpha__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.5rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--memo-navy);
  background: var(--memo-cream);
  border: 1px solid rgba(7, 29, 51, 0.1);
  border-radius: 8px;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.marins-alpha__item:hover {
  border-color: var(--memo-gold);
  color: var(--memo-navy);
}
.marins-alpha__item.is-active {
  background: var(--memo-navy);
  color: #fff;
  border-color: var(--memo-navy);
}

/* Ligne de réinitialisation / compteur */
.marins-reset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(7, 29, 51, 0.08);
}
.marins-reset__count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--memo-muted);
}
.marins-reset__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--memo-gold);
  text-decoration: none;
}
.marins-reset__link:hover { color: var(--memo-navy); }

/* ── Grille et cartes de marins ──────────────────────────────────── */
.marins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
  margin-bottom: 3rem;
}
.marin-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.3rem;
  background: #fff;
  border: 1px solid rgba(7, 29, 51, 0.08);
  border-radius: 18px;
  box-shadow: 0 14px 36px -24px rgba(7, 29, 51, 0.4);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
  min-width: 0;
}
.marin-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -24px rgba(7, 29, 51, 0.5);
  border-color: rgba(184, 149, 72, 0.4);
}
.marin-card.is-mpf {
  border-color: rgba(184, 149, 72, 0.5);
  background: linear-gradient(180deg, #fffdf7 0%, #fff 100%);
}
.marin-card.is-compagnon {
  border-color: rgba(31, 122, 61, 0.5);
  background: linear-gradient(180deg, #f6fdf8 0%, #fff 100%);
}

.marin-card__head {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0.9rem;
  align-items: start;
}
.marin-card__avatar {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--memo-navy) 0%, #1d3e5e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184, 149, 72, 0.4);
}
.marin-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.marin-card__avatar--link {
  cursor: zoom-in;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.marin-card__avatar--link:hover,
.marin-card__avatar--link:focus-visible {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 14px 28px -18px rgba(7, 29, 51, 0.65);
  border-color: rgba(184, 149, 72, 0.7);
  outline: none;
}
.marin-card__initials {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--memo-gold-soft);
  letter-spacing: 0.02em;
}
.marin-card__ident { min-width: 0; }
.marin-card__nom {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--memo-navy);
  margin: 0 0 0.2rem;
  overflow-wrap: anywhere;
}
.marin-card__grade {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--memo-gold);
  margin: 0 0 0.45rem;
  overflow-wrap: anywhere;
}
.marin-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
/* Période « inconnue » : pas de couleur dédiée dans le thème → neutre. */
.memoire-badge--inconnue { background: rgba(91, 102, 119, 0.92); }
.marin-badge-mpf {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.55rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5a3d0c;
  background: linear-gradient(135deg, #f2dca0, #e3c474);
  border-radius: 999px;
}
.marin-badge-compagnon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.55rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #eafff1;
  background: linear-gradient(135deg, #1f7a3d, #12532a);
  border-radius: 999px;
}

.marin-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.marin-card__meta li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--memo-ink);
  min-width: 0;
}
.marin-card__meta li i {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--memo-gold);
  font-size: 0.82rem;
}
.marin-card__meta li span { overflow-wrap: anywhere; min-width: 0; }

.marin-card__resume {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--memo-muted);
  margin: 0;
  overflow-wrap: anywhere;
}

.marin-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.marin-card__tags li {
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--memo-muted);
  background: var(--memo-cream);
  border: 1px solid rgba(7, 29, 51, 0.08);
  border-radius: 999px;
  overflow-wrap: anywhere;
}

.marin-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.6rem 1.1rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--memo-navy);
  background: var(--memo-gold);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 20px -10px rgba(184, 149, 72, 0.5);
  transition: transform 220ms ease, filter 220ms ease;
}
.marin-card__cta:hover { transform: translateY(-1px); filter: brightness(1.05); color: var(--memo-navy); }
.marin-card__note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--memo-muted);
}
.marin-card__note i { color: var(--memo-gold); }

/* État vide */
.marins-empty {
  text-align: center;
  max-width: 520px;
  margin: 1rem auto 3rem;
  padding: 2.6rem 1.5rem;
  background: #fff;
  border: 1px dashed rgba(7, 29, 51, 0.18);
  border-radius: 18px;
}
.marins-empty i {
  font-size: 2.4rem;
  color: var(--memo-gold);
  opacity: 0.6;
}
.marins-empty p {
  margin: 0.9rem 0 1.2rem;
  color: var(--memo-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.marins-empty__title {
  margin: 0.9rem 0 0.4rem !important;
  color: var(--memo-navy, #071d33);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
}
/* Invitation initiale (aucune fiche chargée) : cadre un peu plus présent. */
.marins-empty--invite {
  max-width: 620px;
  border-style: solid;
  border-color: rgba(201, 169, 97, 0.35);
  background: linear-gradient(180deg, #fffdf7 0%, #ffffff 70%);
  box-shadow: 0 20px 45px -30px rgba(7, 29, 51, 0.4);
}
.marins-empty--invite i {
  opacity: 0.85;
}

/* Document source (PDF d'origine, conservé en bas de section) */
.marins-source {
  margin-top: 1rem;
  text-align: center;
}
.marins-source .memoire-kicker {
  justify-content: center;
  margin-bottom: 1.2rem;
}
.marins-source .memoire-liste {
  text-align: left;
  max-width: 760px;
  margin: 0 auto;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .marins-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .marins-stats { grid-template-columns: repeat(2, 1fr); }
  .marins-selects { grid-template-columns: 1fr; }
  .marins-grid { grid-template-columns: 1fr; }
  .marins-toggles { gap: 1rem; }
  .marins-toolbar { padding: 1.1rem; }
  .marins-search__go { padding: 0.55rem 0.85rem; }
}
@media (max-width: 400px) {
  .marins-stats { grid-template-columns: 1fr 1fr; }
  .marins-alpha__item { min-width: 26px; height: 26px; font-size: 0.74rem; }
}

/*══════════════════════════════════════════════════════════════════════
  MEMBRES — rubrique publique « Nos adhérents »
  ──────────────────────────────────────────────────────────────────────
  Page /membres : visible visiteur (cards minimales) et membre (cards
  enrichies). Reprend les variables --uipm-* + --memo-* déjà déclarées
  pour rester cohérent avec l'identité du site.
══════════════════════════════════════════════════════════════════════*/

.membres-page {
  background:
    radial-gradient(ellipse 1100px 480px at 50% 0%, rgba(201, 163, 74, 0.05), transparent 65%),
    var(--uipm-cream, #fbfaf6);
}

/* ── HERO ────────────────────────────────────────────────────────── */
.membres-hero {
  position: relative;
  min-height: 44vh;
  display: flex;
  align-items: center;
  padding: 130px 0 60px;
  color: #fff;
  background: linear-gradient(135deg, var(--uipm-navy, #0a2540) 0%, #122c47 100%);
  overflow: hidden;
}
/* Image de fond (Ecole Navale) — placee derriere le veil pour rester
   lisible. Le z-index negatif evite tout chevauchement avec le contenu. */
.membres-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  filter: saturate(0.9);
}
.membres-hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 380px at 50% 110%, rgba(201, 163, 74, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(7, 29, 51, 0.55) 0%, rgba(7, 29, 51, 0.78) 100%);
  z-index: 0;
}
.membres-hero__halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(201, 163, 74, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 82% 72%, rgba(201, 163, 74, 0.12) 0%, transparent 40%);
  z-index: 0;
  pointer-events: none;
}
.membres-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.membres-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uipm-gold, #c9a34a);
  background: rgba(201, 163, 74, 0.14);
  border: 1px solid rgba(201, 163, 74, 0.42);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.membres-hero__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.3rem, 4.8vw, 3.4rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 1rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.membres-hero__lead {
  max-width: 720px;
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  line-height: 1.7;
}
.membres-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.membres-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 1.4rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 163, 74, 0.4);
  border-radius: 14px;
  min-width: 180px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.membres-hero__stat strong {
  font-family: 'Fraunces', serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--uipm-gold, #c9a34a);
  line-height: 1;
}
.membres-hero__stat span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.35rem;
}
.membres-hero__connect {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem;
  background: var(--uipm-gold, #c9a34a);
  color: var(--uipm-navy, #0a2540);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--uipm-gold, #c9a34a);
  transition: all 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.membres-hero__connect:hover {
  background: transparent;
  color: var(--uipm-gold, #c9a34a);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(201, 163, 74, 0.4);
}

/* ── SECTION ─────────────────────────────────────────────────────── */
.membres-section { padding: 70px 0 90px; }
.membres-section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2rem;
}
.membres-section__head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  color: var(--uipm-navy, #0a2540);
  margin: 0.6rem 0 0.8rem;
}
.membres-kicker {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--uipm-gold, #c9a34a);
}
.membres-section__notice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: rgba(201, 163, 74, 0.1);
  border: 1px solid rgba(201, 163, 74, 0.3);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--uipm-navy, #0a2540);
  margin-top: 0.6rem;
}
.membres-section__notice i { color: var(--uipm-gold, #c9a34a); }

/* ── BARRE DE RECHERCHE ──────────────────────────────────────────── */
.membres-search {
  max-width: 480px;
  margin: 0 auto 2.4rem;
}
.membres-search__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 999px;
  box-shadow: 0 8px 22px -10px rgba(10, 37, 64, 0.1);
  transition: border-color 200ms, box-shadow 200ms;
}
.membres-search__field:focus-within {
  border-color: var(--uipm-gold, #c9a34a);
  box-shadow: 0 8px 22px -10px rgba(201, 163, 74, 0.4);
}
.membres-search__field i { color: var(--uipm-gold, #c9a34a); }
.membres-search__field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.95rem;
  color: var(--uipm-ink, #1a1f36);
}
.membres-search__field input::placeholder { color: #94a3b8; }

/* ── GRILLE DE CARTES ────────────────────────────────────────────── */
.membres-grid {
  display: grid;
  gap: 1.2rem;
}
.membres-grid--public {
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.membres-grid--rich {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.membre-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 18px -10px rgba(10, 37, 64, 0.18);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 280ms, border-color 280ms;
}
.membre-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -16px rgba(10, 37, 64, 0.25);
  border-color: rgba(201, 163, 74, 0.5);
}
.membre-card.is-hidden { display: none; }

.membres-grid--rich .membre-card {
  flex-direction: column;
  align-items: stretch;
  padding: 1.4rem;
  text-align: center;
}

/* Avatar */
.membre-card__avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--uipm-navy, #0a2540) 0%, #122c47 100%);
  display: grid;
  place-items: center;
  border: 2px solid rgba(201, 163, 74, 0.5);
  box-shadow: 0 6px 14px -6px rgba(10, 37, 64, 0.3);
}
.membres-grid--rich .membre-card__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.8rem;
}
.membre-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.membre-card__initials {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--uipm-gold, #c9a34a);
  letter-spacing: 0.02em;
}
.membres-grid--rich .membre-card__initials { font-size: 2.2rem; }
.membre-card__role {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--uipm-gold, #c9a34a);
  color: var(--uipm-navy, #0a2540);
  border-radius: 50%;
  border: 2px solid #fff;
  font-size: 0.7rem;
  box-shadow: 0 4px 8px -2px rgba(201, 163, 74, 0.5);
}

/* Corps */
.membre-card__body {
  flex: 1;
  min-width: 0;
}
.membre-card__civ {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uipm-gold, #c9a34a);
}
.membre-card__nom {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--uipm-navy, #0a2540);
  margin: 0.15rem 0 0.3rem;
  line-height: 1.3;
}
.membre-card__nom strong {
  font-weight: 700;
  display: inline;
}
.membres-grid--rich .membre-card__nom { font-size: 1.2rem; }

.membre-card__grade,
.membre-card__ville {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--uipm-muted, #5b6473);
  margin: 0.25rem 0 0;
}
.membre-card__grade i,
.membre-card__ville i { color: var(--uipm-gold, #c9a34a); }

.membre-card__badge {
  display: inline-flex;
  align-items: center;
  margin-top: 0.6rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uipm-navy, #0a2540);
  background: linear-gradient(135deg, #f5e3b8 0%, var(--uipm-gold, #c9a34a) 100%);
  border-radius: 999px;
}

/* ── Card enrichie (membre connecté) : toutes les infos profil ──── */
.membre-card--detail {
  padding: 1.6rem;
}
.membre-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  background: rgba(201, 163, 74, 0.06);
  border-left: 3px solid var(--uipm-gold, #c9a34a);
  border-radius: 6px;
  text-align: left;
}
.membre-card__detail {
  margin: 0;
}
.membre-card__detail dt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uipm-gold, #c9a34a);
  margin-bottom: 0.15rem;
}
.membre-card__detail dt i { font-size: 0.78rem; }
.membre-card__detail dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--uipm-ink, #1a1f36);
  word-break: break-word;
}
.membre-card__detail dd a {
  color: var(--uipm-navy, #0a2540);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 163, 74, 0.45);
  transition: color 200ms, border-color 200ms;
}
.membre-card__detail dd a:hover {
  color: var(--uipm-gold, #c9a34a);
  border-color: var(--uipm-gold, #c9a34a);
}
.membre-card__email {
  word-break: break-all;
  font-size: 0.82rem;
}
.membre-card__pays {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--uipm-navy, #0a2540);
  color: var(--uipm-gold, #c9a34a);
  border-radius: 999px;
  vertical-align: middle;
}

/* Spécialité + Fonction sous le grade */
.membre-card__specialite {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0.3rem 0 0.45rem;
  font-size: 0.85rem;
  color: var(--uipm-muted, #52606d);
}
.membre-card__specialite span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.membre-card__specialite i { color: var(--uipm-gold, #c9a34a); }

/* Nom cliquable vers la fiche signalétique (membre uniquement) */
.membre-card__lien {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.membre-card__lien:hover {
  color: var(--uipm-gold, #c9a34a);
  border-color: var(--uipm-gold, #c9a34a);
}
.membre-card__lien strong { color: inherit; }

/* Bouton « Voir la fiche signalétique » */
.membre-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  background: var(--uipm-navy, #0a2540);
  border: 1.5px solid var(--uipm-navy, #0a2540);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  align-self: flex-start;
}
.membre-card__action:hover {
  background: var(--uipm-gold, #c9a34a);
  border-color: var(--uipm-gold, #c9a34a);
  color: var(--uipm-navy, #0a2540);
  transform: translateY(-1px);
}
.membre-card__action i { font-size: 0.95rem; }

/* Note de restriction visiteur */
.membre-card__visiteur {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  color: var(--uipm-muted, #52606d);
  background: #fbf6e8;
  border-left: 3px solid var(--uipm-gold, #c9a34a);
  border-radius: 4px;
}
.membre-card__visiteur i { color: var(--uipm-gold, #c9a34a); margin-right: 0.25rem; }

/* ──────────────────────────────────────────────────────────────────
   Barre de filtres avancés de l'annuaire (membres uniquement)
   ────────────────────────────────────────────────────────────────── */
.annuaire-filtres {
  margin: 2rem auto;
  padding: 1.4rem 1.4rem 1.2rem;
  background: linear-gradient(180deg, #fff, #faf6ec);
  border: 1px solid #e8e3d5;
  border-radius: 16px;
  box-shadow: 0 8px 24px -16px rgba(10,37,64,0.18);
}
.annuaire-filtres__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem 1rem;
}
.annuaire-filtres__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.annuaire-filtres__field > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--uipm-navy, #0a2540);
}
.annuaire-filtres__field > span i { color: var(--uipm-gold, #c9a34a); }
.annuaire-filtres__field input,
.annuaire-filtres__field select {
  width: 100%;
  padding: 0.45rem 0.7rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: #0a2540;
  background: #fff;
  border: 1.5px solid #e8e3d5;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.annuaire-filtres__field input:focus,
.annuaire-filtres__field select:focus {
  outline: none;
  border-color: var(--uipm-gold, #c9a34a);
  box-shadow: 0 0 0 3px rgba(201,163,74,0.15);
}
/* Chevron natif perdu avec appearance:none — on redessine en SVG
   inline pour rester coherent avec le reste du formulaire. */
.annuaire-filtres__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c9a34a'%3E%3Cpath d='M3.204 5L8 10.481 12.796 5H3.204z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.9rem;
  padding-right: 2rem;
  cursor: pointer;
}

.annuaire-filtres__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #e8e3d5;
}
.annuaire-filtres__count {
  margin-left: auto;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--uipm-muted, #52606d);
}

/* En détail, on permet une 2e colonne (card plus large) */
.membres-grid--rich {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* ──────────────────────────────────────────────────────────────────
   Fiche signalétique d'un adhérent (/membres/<id>)
   ────────────────────────────────────────────────────────────────── */
.fiche-membre-page {
  --fm-navy:   #0a2540;
  --fm-gold:   #c9a34a;
  --fm-cream:  #faf6ec;
  --fm-ink:    #0a2540;
  --fm-soft:   #52606d;
  --fm-rule:   #e8e3d5;
  background: var(--fm-cream);
  padding-top: 88px;
}

.fiche-membre-hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(900px 350px at 80% -10%, rgba(201,163,74,0.18), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--fm-cream) 100%);
  border-bottom: 1px solid var(--fm-rule);
}
.fiche-membre-hero__veil { display: none; }
.fiche-membre-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.8rem;
}
.fiche-membre-hero__avatar {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fm-navy);
  display: grid;
  place-items: center;
  border: 3px solid var(--fm-gold);
  box-shadow: 0 14px 30px -16px rgba(10,37,64,0.45);
}
.fiche-membre-hero__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.fiche-membre-hero__initials {
  font-family: 'Fraunces', serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--fm-gold);
}
.fiche-membre-hero__identite { min-width: 0; flex: 1 1 280px; }
.fiche-membre-hero__civ {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fm-gold);
  margin-bottom: 0.4rem;
}
.fiche-membre-hero__nom {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--fm-ink);
  margin: 0 0 0.6rem;
  line-height: 1.1;
}
.fiche-membre-hero__nom strong { font-weight: 700; }
.fiche-membre-hero__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  color: var(--fm-soft);
  font-size: 0.95rem;
}
.fiche-membre-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.fiche-membre-hero__meta i { color: var(--fm-gold); }

.fiche-membre-section {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.fiche-membre-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--fm-rule);
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 10px 24px -18px rgba(10,37,64,0.22);
}
.fiche-membre-card__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 2px solid var(--fm-gold);
}
.fiche-membre-card__head i {
  font-size: 1.25rem;
  color: var(--fm-gold);
}
.fiche-membre-card__head h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--fm-ink);
}
.fiche-membre-card__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fiche-membre-card__list > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.fiche-membre-card__list dt {
  font-weight: 600;
  color: var(--fm-soft);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.fiche-membre-card__list dt i { color: var(--fm-gold); margin-right: 0.25rem; }
.fiche-membre-card__list dd {
  margin: 0;
  color: var(--fm-ink);
}
.fiche-membre-card__list dd a {
  color: var(--fm-navy);
  border-bottom: 1px solid rgba(201,163,74,0.4);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.fiche-membre-card__list dd a:hover {
  color: var(--fm-gold);
  border-color: var(--fm-gold);
}

.fiche-membre-retour {
  margin-top: 2.5rem;
  text-align: center;
}

@media (max-width: 540px) {
  .fiche-membre-card__list > div {
    grid-template-columns: 1fr;
  }
  .fiche-membre-hero__avatar { width: 100px; height: 100px; }
  .fiche-membre-hero__initials { font-size: 2.3rem; }
}

/* État vide */
.membres-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fff;
  border: 1px dashed rgba(201, 163, 74, 0.4);
  border-radius: 16px;
  color: var(--uipm-muted, #5b6473);
}
.membres-empty i {
  font-size: 2.4rem;
  color: var(--uipm-gold, #c9a34a);
  display: block;
  margin-bottom: 0.5rem;
}

/* CTA adhésion (visible uniquement pour le visiteur) */
.membres-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  margin-top: 3rem;
  padding: 1.8rem 2rem;
  background: linear-gradient(135deg, var(--uipm-navy, #0a2540) 0%, #122c47 100%);
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 14px 38px -16px rgba(10, 37, 64, 0.3);
  position: relative;
  overflow: hidden;
}
.membres-cta::after {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(201, 163, 74, 0.18), transparent 70%);
  pointer-events: none;
}
.membres-cta__icon {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: rgba(201, 163, 74, 0.2);
  border: 1px solid rgba(201, 163, 74, 0.5);
  border-radius: 18px;
  font-size: 2rem;
  color: var(--uipm-gold, #c9a34a);
}
.membres-cta__text {
  position: relative;
  z-index: 1;
}
.membres-cta__text h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.4rem;
}
.membres-cta__text p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.membres-cta__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  background: var(--uipm-gold, #c9a34a);
  color: var(--uipm-navy, #0a2540);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border-radius: 999px;
  transition: all 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.membres-cta__link:hover {
  background: #fff;
  transform: translateX(4px);
  box-shadow: 0 12px 24px -10px rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  .membres-hero__stats { flex-direction: column; }
  .membres-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .membres-cta__icon { margin: 0 auto; }
  .membres-grid--rich {
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  }
}

/*══════════════════════════════════════════════════════════════════════
  PATRIMOINE TECHNIQUE & HISTORIQUE (espace membre)
  ──────────────────────────────────────────────────────────────────────
  Sous-rubrique /espace-membre/patrimoine. Trois blocs ancrés :
  Bibliothèque, Vidéos, Lexique. Réutilise les variables --uipm-*,
  --memo-* et --bio-* déjà déclarées dans les autres blocs.
══════════════════════════════════════════════════════════════════════*/

.patrimoine-page {
  background:
    radial-gradient(ellipse 1100px 480px at 50% 0%, rgba(184, 149, 72, 0.06), transparent 65%),
    var(--uipm-cream, #fbfaf6);
}

/* ── HERO ────────────────────────────────────────────────────────── */
.patrimoine-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: center;
  padding: 130px 0 70px;
  overflow: hidden;
  color: #fff;
  background: var(--uipm-navy, #0a2540);
}
.patrimoine-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  /* Image VISIBLE : pas de flou, juste un léger Ken-Burns lent. */
  transform: scale(1.04);
  transition: transform 12s cubic-bezier(0.2, 0.7, 0.3, 1);
  z-index: 0;
}
.patrimoine-page:hover .patrimoine-hero__bg,
.patrimoine-page.aos-init .patrimoine-hero__bg {
  transform: scale(1);
}
.patrimoine-hero__veil {
  position: absolute; inset: 0;
  /* Voile plus léger : on garde un contraste suffisant pour le texte
     blanc mais l'image reste clairement reconnaissable. */
  background:
    linear-gradient(180deg, rgba(7, 29, 51, 0.42) 0%, rgba(7, 29, 51, 0.78) 100%),
    radial-gradient(1200px 380px at 50% 110%, rgba(184, 149, 72, 0.22), transparent 60%);
  z-index: 1;
}
.patrimoine-hero__pattern {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(184, 149, 72, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 88% 78%, rgba(184, 149, 72, 0.12) 0%, transparent 40%);
  z-index: 1;
  pointer-events: none;
}
.patrimoine-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.patrimoine-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uipm-gold, #c9a34a);
  background: rgba(201, 163, 74, 0.16);
  border: 1px solid rgba(201, 163, 74, 0.45);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.3rem;
}
.patrimoine-hero__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.3rem, 4.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.2rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.patrimoine-hero__title em {
  color: var(--uipm-gold-soft, #d8b76b);
  font-style: italic;
}
.patrimoine-hero__lead {
  max-width: 740px;
  margin: 0 auto 2.2rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.7;
}

.patrimoine-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  max-width: 620px;
  margin: 0 auto;
}
.patrimoine-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.95rem 0.6rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 163, 74, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 240ms ease, border-color 240ms ease;
}
.patrimoine-stat:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--uipm-gold, #c9a34a);
}
.patrimoine-stat i {
  font-size: 1.45rem;
  color: var(--uipm-gold, #c9a34a);
}
.patrimoine-stat strong {
  font-family: 'Fraunces', serif;
  font-size: 1.85rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.patrimoine-stat span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

/* ── NAV ANCRES (sticky) ─────────────────────────────────────────── */
.patrimoine-nav {
  position: sticky;
  top: 80px;
  z-index: 40;
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(10, 37, 64, 0.1);
  box-shadow: 0 6px 16px rgba(10, 37, 64, 0.05);
}
.patrimoine-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.7rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.patrimoine-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--uipm-navy, #0a2540);
  text-decoration: none;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  transition: all 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.patrimoine-nav a i { color: var(--uipm-gold, #c9a34a); }
.patrimoine-nav a:hover {
  background: var(--uipm-navy, #0a2540);
  color: #fff;
  border-color: var(--uipm-gold, #c9a34a);
  transform: translateY(-1px);
}
.patrimoine-nav a:hover i { color: var(--uipm-gold, #c9a34a); }

/* ── COMMUNS aux 3 sections ──────────────────────────────────────── */
.patrimoine-section {
  padding: 70px 0;
  scroll-margin-top: 150px;
}
.patrimoine-section--biblio {
  background: linear-gradient(180deg, #fff 0%, var(--uipm-cream, #fbfaf6) 100%);
}
.patrimoine-section--videos {
  background: linear-gradient(180deg, var(--uipm-cream, #fbfaf6) 0%, #fff 100%);
}
.patrimoine-section--lexique {
  background: linear-gradient(180deg, #fff 0%, var(--uipm-cream, #fbfaf6) 100%);
}

.patrimoine-section__head {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 2.8rem;
}
.patrimoine-section__head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  color: var(--uipm-navy, #0a2540);
  margin: 0.9rem 0 0.9rem;
  letter-spacing: -0.01em;
}
.patrimoine-section__head p {
  color: var(--uipm-muted, #5b6473);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}
.patrimoine-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--uipm-gold, #c9a34a);
}
.patrimoine-rule {
  display: inline-block;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--uipm-gold, #c9a34a), transparent);
}

.patrimoine-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fff;
  border: 1px dashed rgba(201, 163, 74, 0.4);
  border-radius: 16px;
  color: var(--uipm-muted, #5b6473);
}
.patrimoine-empty i {
  font-size: 2.4rem;
  color: var(--uipm-gold, #c9a34a);
  display: block;
  margin-bottom: 0.5rem;
}

.patrimoine-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.patrimoine-btn--solid {
  background: var(--uipm-navy, #0a2540);
  color: #fff;
}
.patrimoine-btn--solid:hover {
  background: var(--uipm-gold, #c9a34a);
  color: var(--uipm-navy, #0a2540);
  border-color: var(--uipm-navy, #0a2540);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(10, 37, 64, 0.25);
}
.patrimoine-btn--ghost {
  background: transparent;
  color: var(--uipm-navy, #0a2540);
  border-color: rgba(10, 37, 64, 0.18);
}
.patrimoine-btn--ghost:hover {
  background: var(--uipm-navy, #0a2540);
  color: #fff;
  border-color: var(--uipm-gold, #c9a34a);
}

/* ── BIBLIOTHÈQUE ────────────────────────────────────────────────── */
.patrimoine-biblio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.2rem);
}
.patrimoine-doc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px -14px rgba(10, 37, 64, 0.2);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 380ms ease, border-color 380ms ease;
}
.patrimoine-doc:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -22px rgba(10, 37, 64, 0.3);
  border-color: rgba(201, 163, 74, 0.5);
}

.patrimoine-doc__cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(135deg, #f3eedf 0%, #ebe3cf 100%);
  isolation: isolate;
}
.patrimoine-doc__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.patrimoine-doc:hover .patrimoine-doc__cover img {
  transform: scale(1.05);
}
.patrimoine-doc__placeholder {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-size: 3.5rem;
  color: rgba(10, 37, 64, 0.2);
}
.patrimoine-doc__type {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 37, 64, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 163, 74, 0.5);
  border-radius: 999px;
  z-index: 2;
}

.patrimoine-doc__body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.patrimoine-doc__annee {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uipm-gold, #c9a34a);
  margin-bottom: 0.45rem;
}
.patrimoine-doc__title {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--uipm-navy, #0a2540);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.patrimoine-doc__auteur {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  font-style: italic;
  color: var(--uipm-muted, #5b6473);
  margin: 0 0 1rem;
}
.patrimoine-doc__auteur i { color: var(--uipm-gold, #c9a34a); }

.patrimoine-doc__resume {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--uipm-ink, #1a1f36);
  margin: 0 0 1.1rem;
  flex: 1;
}

.patrimoine-doc__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.patrimoine-doc__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uipm-navy, #0a2540);
  background: rgba(201, 163, 74, 0.14);
  border: 1px solid rgba(201, 163, 74, 0.4);
  border-radius: 999px;
}

.patrimoine-doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}
.patrimoine-doc__taille {
  margin-left: 0.3rem;
  font-size: 0.72rem;
  opacity: 0.7;
}

/* ── VIDÉOS ──────────────────────────────────────────────────────── */
.patrimoine-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 2rem;
}
.patrimoine-video {
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 20px;
  padding: 1.6rem;
  box-shadow: 0 8px 24px -14px rgba(10, 37, 64, 0.18);
  display: flex;
  flex-direction: column;
  transition: box-shadow 380ms ease, transform 380ms ease;
}
.patrimoine-video:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -22px rgba(10, 37, 64, 0.25);
}
.patrimoine-video__head {
  margin-bottom: 1.1rem;
}
.patrimoine-video__badge {
  display: inline-block;
  padding: 0.28rem 0.75rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uipm-gold, #c9a34a);
  background: rgba(201, 163, 74, 0.12);
  border: 1px solid rgba(201, 163, 74, 0.4);
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.patrimoine-video__title {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--uipm-navy, #0a2540);
  margin: 0 0 0.35rem;
}
.patrimoine-video__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.82rem;
  color: var(--uipm-muted, #5b6473);
  margin: 0;
}
.patrimoine-video__meta i {
  color: var(--uipm-gold, #c9a34a);
  margin-right: 0.25rem;
}
.patrimoine-video__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 12px;
  background: var(--uipm-navy, #0a2540);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 12px 28px -12px rgba(10, 37, 64, 0.4);
}
.patrimoine-video__desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--uipm-ink, #1a1f36);
  margin: 0 0 1.1rem;
}

/* ── LEXIQUE ─────────────────────────────────────────────────────── */
.patrimoine-lexique-search {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto 2.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.patrimoine-lexique-search__field {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.2rem;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 999px;
  box-shadow: 0 8px 22px -10px rgba(10, 37, 64, 0.12);
  transition: border-color 200ms, box-shadow 200ms;
}
.patrimoine-lexique-search__field:focus-within {
  border-color: var(--uipm-gold, #c9a34a);
  box-shadow: 0 8px 22px -10px rgba(201, 163, 74, 0.4);
}
.patrimoine-lexique-search__field i {
  color: var(--uipm-gold, #c9a34a);
  flex-shrink: 0;
}
.patrimoine-lexique-search__field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.95rem;
  color: var(--uipm-ink, #1a1f36);
}
.patrimoine-lexique-search__count {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--uipm-navy, #0a2540);
  background: rgba(201, 163, 74, 0.12);
  border: 1px solid rgba(201, 163, 74, 0.35);
  border-radius: 999px;
  white-space: nowrap;
}
.patrimoine-lexique-search__count strong {
  color: var(--uipm-gold, #c9a34a);
  margin-right: 0.25rem;
}

.patrimoine-lexique {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 0.75rem;
}
.patrimoine-lex-row {
  margin: 0;
  padding: 1rem 1.3rem;
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-left: 4px solid rgba(201, 163, 74, 0.55);
  border-radius: 12px;
  transition: transform 200ms, border-color 200ms, box-shadow 200ms;
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.patrimoine-lex-row.is-hidden {
  display: none;
}
.patrimoine-lex-row:hover {
  transform: translateX(3px);
  border-left-color: var(--uipm-gold, #c9a34a);
  border-color: rgba(201, 163, 74, 0.45);
  box-shadow: 0 10px 22px -12px rgba(10, 37, 64, 0.18);
}

.patrimoine-lex-row__terme {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Fraunces', serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--uipm-navy, #0a2540);
  margin: 0;
}
.patrimoine-lex-row__lettre {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--uipm-gold, #c9a34a);
  background: rgba(201, 163, 74, 0.14);
  border: 1px solid rgba(201, 163, 74, 0.4);
  border-radius: 50%;
  flex-shrink: 0;
}
.patrimoine-lex-row__def {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--uipm-ink, #1a1f36);
}

/* Bouton « Lexique complet en PDF » */
.patrimoine-lexique-pdf {
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2.4rem;
  padding: 1rem 1.4rem;
  background: linear-gradient(135deg, var(--uipm-navy, #0a2540) 0%, #122c47 100%);
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px -14px rgba(10, 37, 64, 0.3);
  transition: transform 240ms, box-shadow 240ms;
}
.patrimoine-lexique-pdf:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -14px rgba(10, 37, 64, 0.45);
  color: #fff;
}
.patrimoine-lexique-pdf > i:first-child {
  font-size: 1.8rem;
  color: var(--uipm-gold, #c9a34a);
}
.patrimoine-lexique-pdf strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.15rem;
}
.patrimoine-lexique-pdf em {
  display: block;
  font-style: normal;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}
.patrimoine-lexique-pdf > i:last-child {
  color: var(--uipm-gold, #c9a34a);
}

.patrimoine-bottom {
  padding: 40px 0 80px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .patrimoine-hero { min-height: 46vh; padding: 100px 0 50px; }
  .patrimoine-stats { grid-template-columns: 1fr; max-width: 280px; }
  .patrimoine-biblio-grid,
  .patrimoine-videos-grid,
  .patrimoine-lexique { grid-template-columns: 1fr; }
  .patrimoine-doc__cover { aspect-ratio: 16 / 10; }
  .patrimoine-lex-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .patrimoine-nav { top: 70px; }
  .patrimoine-nav a { font-size: 0.85rem; padding: 0.4rem 0.85rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Livre d'or — page publique
   Palette : navy / or / crème — esprit maritime sobre.
   ══════════════════════════════════════════════════════════════════ */
.livre-or-page {
  --lo-navy:  #0a2540;
  --lo-gold:  #c9a34a;
  --lo-cream: #faf6ec;
  --lo-ink:   #0a2540;
  --lo-soft:  #52606d;
  --lo-rule:  #e8e3d5;
  background: var(--lo-cream);
  /* Pas de padding-top : le hero prend en charge sa propre marge
     sous le header fixed-top (88px). Sinon une bande creme apparait
     entre le header et l'image du hero. */
}
body:has(.livre-or-page) {
  background-color: var(--lo-navy, #0a2540);
}

/* ── Hero ────────────────────────────────────────────────────────── */
.livre-or-hero {
  position: relative;
  /* 88px = hauteur du header fixed-top + padding visuel du hero.
     Le veil navy recouvre integralement la zone sous le header. */
  padding: calc(88px + clamp(2rem, 4vw, 3.5rem)) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.livre-or-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  filter: saturate(0.85);
}
.livre-or-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,37,64,0.85) 0%, rgba(10,37,64,0.7) 100%),
    radial-gradient(600px 240px at 80% 0%, rgba(201,163,74,0.25), transparent 60%);
}
.livre-or-hero__inner { text-align: center; max-width: 760px; margin: 0 auto; }
.livre-or-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lo-gold);
  margin-bottom: 1rem;
}
.livre-or-hero__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
  color: #fff;
}
.livre-or-hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: rgba(255,255,255,0.88);
  margin: 0 auto 1.4rem;
  max-width: 580px;
  line-height: 1.55;
}
.livre-or-hero__stats {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(201,163,74,0.4);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.livre-or-hero__stats strong {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  color: var(--lo-gold);
}
.livre-or-hero__stats span { font-size: 0.92rem; color: rgba(255,255,255,0.85); }

/* ── Liste des messages ──────────────────────────────────────────── */
.livre-or-liste { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.livre-or-liste__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.8rem 2rem;
  margin-bottom: 2rem;
}
.livre-or-liste__kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lo-gold);
  margin-bottom: 0.3rem;
}
.livre-or-liste__head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0;
  color: var(--lo-ink);
  flex: 1 1 auto;
}
.livre-or-liste__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--lo-navy);
  border: 1.5px solid var(--lo-gold);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.livre-or-liste__cta:hover {
  background: var(--lo-gold);
  color: var(--lo-navy);
  transform: translateY(-1px);
}

/* Grille de cartes : masonry-light en CSS columns pour respecter la
   variabilité de longueur des messages. */
.livre-or-grille {
  column-count: 1;
  column-gap: 1.5rem;
}
@media (min-width: 720px)  { .livre-or-grille { column-count: 2; } }
@media (min-width: 1080px) { .livre-or-grille { column-count: 3; } }

.livre-or-card {
  break-inside: avoid;
  background: #fff;
  border: 1px solid var(--lo-rule);
  border-radius: 14px;
  padding: 1.3rem 1.3rem 1.1rem;
  margin: 0 0 1.5rem;
  box-shadow: 0 8px 22px -18px rgba(10,37,64,0.25);
  display: inline-block;
  width: 100%;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.livre-or-card::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 16px;
  font-family: 'Fraunces', serif;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--lo-gold);
  opacity: 0.25;
  pointer-events: none;
}
.livre-or-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(10,37,64,0.35);
}

.livre-or-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px dashed var(--lo-rule);
}
.livre-or-card__avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--lo-navy);
  color: var(--lo-gold);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 600;
  border: 2px solid var(--lo-gold);
}
.livre-or-card__meta { flex: 1 1 auto; min-width: 0; }
.livre-or-card__nom {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--lo-ink);
  line-height: 1.2;
}
.livre-or-card__date {
  display: block;
  font-size: 0.78rem;
  color: var(--lo-soft);
  margin-top: 0.15rem;
}
.livre-or-card__note {
  display: inline-flex;
  gap: 0.1rem;
  font-size: 0.85rem;
  color: var(--lo-gold);
}
.livre-or-card__note i { line-height: 1; }
.livre-or-card__note .bi-star { color: var(--lo-rule); }

.livre-or-card__texte {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--lo-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Vide */
.livre-or-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: #fff;
  border: 1px dashed var(--lo-rule);
  border-radius: 16px;
}
.livre-or-empty i {
  font-size: 2.8rem;
  color: var(--lo-gold);
  display: block;
  margin-bottom: 0.7rem;
}
.livre-or-empty h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--lo-ink);
  margin: 0 0 0.4rem;
}
.livre-or-empty p { color: var(--lo-soft); margin: 0 0 1.2rem; }

/* ── Formulaire ──────────────────────────────────────────────────── */
.livre-or-formulaire {
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 5vw, 5rem);
  background:
    linear-gradient(180deg, var(--lo-cream) 0%, #fff 100%);
  border-top: 1px solid var(--lo-rule);
}
.livre-or-formulaire__head {
  text-align: center;
  margin-bottom: 1.8rem;
}
.livre-or-formulaire__kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lo-gold);
  margin-bottom: 0.35rem;
}
.livre-or-formulaire__head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.5rem;
  color: var(--lo-ink);
}
.livre-or-formulaire__head p {
  color: var(--lo-soft);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Flash messages */
.livre-or-flash {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.94rem;
  line-height: 1.45;
}
.livre-or-flash i { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.05rem; }
.livre-or-flash--success {
  color: #0f5132;
  background: #d1e7dd;
  border: 1px solid #a3cfbb;
  border-left: 4px solid #1f7a4d;
}
.livre-or-flash--error {
  color: #842029;
  background: #f8d7da;
  border: 1px solid #e9b8be;
  border-left: 4px solid #b02a37;
}

/* Form fields */
.livre-or-form {
  background: #fff;
  border: 1px solid var(--lo-rule);
  border-radius: 16px;
  padding: clamp(1.3rem, 2.5vw, 2rem);
  box-shadow: 0 14px 32px -22px rgba(10,37,64,0.25);
}
.livre-or-form__field { margin-bottom: 1.25rem; }
.livre-or-form__field > label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  font-weight: 600;
  color: var(--lo-ink);
  font-size: 0.92rem;
}
.livre-or-form__field > label i { color: var(--lo-gold); }
.livre-or-form__req { color: #b02a37; font-weight: 700; }

.livre-or-form input[type="text"],
.livre-or-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--lo-ink);
  background: #fff;
  border: 1.5px solid var(--lo-rule);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.livre-or-form input[type="text"]:focus,
.livre-or-form textarea:focus {
  outline: none;
  border-color: var(--lo-gold);
  box-shadow: 0 0 0 3px rgba(201,163,74,0.18);
}
.livre-or-form input.is-invalid,
.livre-or-form textarea.is-invalid {
  border-color: #b02a37;
}
.livre-or-form textarea { resize: vertical; min-height: 130px; line-height: 1.55; }

.livre-or-form__error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: #b02a37;
}
.livre-or-form__hint {
  margin: 0.4rem 0 0;
  font-size: 0.83rem;
  color: var(--lo-soft);
  font-style: italic;
}

/* Notation par étoiles : 5 radios inversés en flex pour permettre le
   hover « illuminé jusqu'à la note pointée ». */
.livre-or-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem 0.5rem;
  border: 1.5px solid var(--lo-rule);
  border-radius: 999px;
  background: var(--lo-cream);
}
.livre-or-rating input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.livre-or-rating label {
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--lo-rule);
  padding: 0.15rem 0.25rem;
  transition: color 0.15s, transform 0.15s;
}
.livre-or-rating label:hover,
.livre-or-rating label:hover ~ label,
.livre-or-rating input[type="radio"]:checked ~ label {
  color: var(--lo-gold);
}
.livre-or-rating label:hover { transform: scale(1.15); }
.livre-or-rating input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--lo-gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.livre-or-rating__clear {
  order: 99;
  background: transparent;
  border: 0;
  color: var(--lo-soft);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.45rem;
  margin-left: 0.4rem;
  border-left: 1px solid var(--lo-rule);
  transition: color 0.2s;
}
.livre-or-rating__clear:hover { color: #b02a37; }

.livre-or-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--lo-rule);
}
.livre-or-form__submit {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  background: var(--lo-navy);
  border-color: var(--lo-navy);
  border-radius: 999px;
  transition: background 0.2s, transform 0.15s;
}
.livre-or-form__submit:hover {
  background: var(--lo-gold);
  border-color: var(--lo-gold);
  color: var(--lo-navy);
  transform: translateY(-1px);
}
.livre-or-form__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--lo-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.livre-or-form__note i { color: var(--lo-gold); }

/* ══════════════════════════════════════════════════════════════════
   Édition du profil membre (/espace-membre/profil)
   Palette navy/or/crème, même langage visuel que l'annuaire.
   ══════════════════════════════════════════════════════════════════ */
.profil-form-section {
  --pf-navy:  #0a2540;
  --pf-gold:  #c9a34a;
  --pf-cream: #faf6ec;
  --pf-ink:   #0a2540;
  --pf-soft:  #52606d;
  --pf-rule:  #e8e3d5;
}

.profil-form {
  background: #fff;
  border: 1px solid var(--pf-rule);
  border-radius: 16px;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  box-shadow: 0 14px 32px -22px rgba(10,37,64,0.22);
}

.profil-form__group {
  border: 0;
  padding: 0;
  margin: 0 0 1.6rem;
}
.profil-form__group + .profil-form__group {
  padding-top: 1.4rem;
  border-top: 1px dashed var(--pf-rule);
}
.profil-form__group legend {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--pf-ink);
  margin-bottom: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.profil-form__group legend i { color: var(--pf-gold); }

.profil-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem 1rem;
}

.profil-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.88rem;
}
.profil-form__field--wide {
  grid-column: span 2;
}
@media (max-width: 540px) {
  .profil-form__field--wide { grid-column: span 1; }
}
.profil-form__field > span {
  font-weight: 600;
  color: var(--pf-ink);
  letter-spacing: 0.01em;
}
.profil-form__req { color: #b02a37; font-weight: 700; font-style: normal; }

.profil-form input,
.profil-form select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--pf-ink);
  background: #fff;
  border: 1.5px solid var(--pf-rule);
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.profil-form input:focus,
.profil-form select:focus {
  outline: none;
  border-color: var(--pf-gold);
  box-shadow: 0 0 0 3px rgba(201,163,74,0.18);
}
.profil-form input.is-invalid,
.profil-form select.is-invalid {
  border-color: #b02a37;
}
.profil-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c9a34a'%3E%3Cpath d='M3.204 5L8 10.481 12.796 5H3.204z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 0.9rem;
  padding-right: 2rem;
  cursor: pointer;
}

.profil-form__error {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #b02a37;
  font-size: 0.82rem;
  margin-top: 0.15rem;
}
.profil-form__error::before {
  content: "\F33A"; /* bi-exclamation-circle */
  font-family: 'bootstrap-icons';
}

.profil-form__note {
  margin: 0.8rem 0 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  color: var(--pf-soft);
  background: var(--pf-cream);
  border-left: 3px solid var(--pf-gold);
  border-radius: 6px;
}
.profil-form__note i { color: var(--pf-gold); margin-right: 0.25rem; }

.profil-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--pf-rule);
}

/* Flash messages au-dessus du formulaire */
.profil-flash {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.94rem;
  line-height: 1.45;
}
.profil-flash i { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.05rem; }
.profil-flash--success {
  color: #0f5132;
  background: #d1e7dd;
  border: 1px solid #a3cfbb;
  border-left: 4px solid #1f7a4d;
}
.profil-flash--error {
  color: #842029;
  background: #f8d7da;
  border: 1px solid #e9b8be;
  border-left: 4px solid #b02a37;
}

/* Variante "inline" de la liste compte (e-mail/role/connexion) :
   passe en 2 colonnes au lieu de 1 + tighten les paddings. */
.membre-profil-list--inline {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.45rem 1rem;
}
@media (max-width: 540px) {
  .membre-profil-list--inline { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   HARMONISATION VISUELLE — couche ajoutée (juin 2026)
   ───────────────────────────────────────────────────────────────────
   Objectif : unifier ombres, rayons, survols et accessibilité sur les
   pages prioritaires (rubriques mémoire CT/CL · FNFL · Indochine · SNLE
   et Événements / Calendrier), SANS refonte et sans toucher l'existant.

   Tout est ADDITIF et placé en fin de fichier : ces règles arrivent
   après celles d'origine, donc à spécificité égale elles l'emportent ;
   pour annuler, il suffit de supprimer ce bloc.

   ⚠ Les cartes du « musée » (.ctcl-museum__card) sont volontairement
     EXCLUES des règles transform/box-shadow : elles portent un effet
     tilt 3D piloté en JS (data-tilt) qu'il ne faut pas écraser. Elles
     reçoivent seulement le focus clavier + la garde reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Tokens globaux (alignés sur les valeurs déjà dominantes du fichier) */
:root {
  --ombre-douce:   0 1px 2px rgba(10, 37, 64, 0.05),
                   0 6px 18px -12px rgba(10, 37, 64, 0.18);
  --ombre-carte:   0 2px 6px rgba(10, 37, 64, 0.06),
                   0 14px 32px -18px rgba(10, 37, 64, 0.28);
  --ombre-survol:  0 6px 14px rgba(10, 37, 64, 0.10),
                   0 26px 54px -26px rgba(10, 37, 64, 0.36);
  --rayon-sm: 6px;
  --rayon-md: 12px;
  --rayon-lg: 16px;
  --transition-douce: 0.25s ease;
  --lift-survol: -4px;
}

/* 2. Harmonisation des cartes « plates » des pages prioritaires
      (ombre au repos + rayon + transition cohérents).
      Le musée est exclu : voir avertissement ci-dessus. */
.snle-card,
.ctcl-timeline__card,
.ctcl-fnfl-bio-card,
.ctcl-fnfl-doc-card,
.evenement-card,
.calendrier-card {
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-carte);
  transition: transform var(--transition-douce),
              box-shadow var(--transition-douce);
}

/* Survol homogène : léger soulèvement + ombre renforcée.
   (Aucune de ces familles n'utilise data-tilt → pas de conflit JS.) */
.snle-card:hover,
.ctcl-timeline__card:hover,
.ctcl-fnfl-bio-card:hover,
.ctcl-fnfl-doc-card:hover,
.evenement-card:hover {
  transform: translateY(var(--lift-survol));
  box-shadow: var(--ombre-survol);
}

/* La carte calendrier ne « monte » pas (elle contient la grille
   interactive) : on renforce seulement son ombre au survol. */
.calendrier-card:hover {
  box-shadow: var(--ombre-survol);
}

/* 3. Accessibilité — anneau de focus clavier cohérent (doré).
      Cible les cartes-liens et boutons des pages prioritaires.
      :focus-visible n'apparaît qu'au clavier : aucun impact à la souris. */
.snle-card:focus-visible,
.ctcl-fnfl-bio-card__portrait:focus-visible,
.ctcl-fnfl-bio-card__cta:focus-visible,
.ctcl-fnfl-doc-card__cover:focus-visible,
.ctcl-fnfl-doc-card__btn:focus-visible,
.ctcl-museum__card:focus-visible,
.ctcl-readmore:focus-visible,
.ctcl-period-filter:focus-visible,
.evenement-card__btn:focus-visible,
.calendrier-day:focus-visible,
.calendrier-nav-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

/* 4. Préférence « réduire les animations » : on neutralise les
      mouvements lourds (tilt, parallax, shine, soulèvements) pour les
      utilisateurs concernés. Sans effet pour les autres. */
@media (prefers-reduced-motion: reduce) {
  .snle-card,
  .ctcl-timeline__card,
  .ctcl-fnfl-bio-card,
  .ctcl-fnfl-doc-card,
  .ctcl-museum__card,
  .evenement-card,
  .calendrier-card {
    transition: none;
  }
  .snle-card:hover,
  .ctcl-timeline__card:hover,
  .ctcl-fnfl-bio-card:hover,
  .ctcl-fnfl-doc-card:hover,
  .evenement-card:hover {
    transform: none;
  }
  .ctcl-museum__card-shine,
  .ctcl-fnfl-bio-card__shine {
    display: none;
  }
  .ctcl-museum__bg[data-parallax] {
    transform: none !important;
  }
}

/* 5. Filet de sécurité responsive : les images des cartes ciblées ne
      débordent jamais de leur conteneur (utile sur petits écrans). */
.snle-card img,
.ctcl-timeline__card img,
.ctcl-fnfl-bio-card img,
.ctcl-fnfl-doc-card img,
.evenement-card__media img {
  max-width: 100%;
  height: auto;
}

/* 6. Page INDOCHINE — familles de cartes spécifiques.
      On harmonise seulement la carte « plate » (.ctcl-fnfl-media-card).
      Les cartes à effets 3D (.ctcl-chanson-card, .js-card) ne reçoivent
      QUE le focus clavier + la coupure du shine en reduced-motion :
      leurs transforms/perspective custom restent intactes. */
.ctcl-fnfl-media-card {
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-carte);
  transition: transform var(--transition-douce),
              box-shadow var(--transition-douce);
}
.ctcl-fnfl-media-card:hover {
  transform: translateY(var(--lift-survol));
  box-shadow: var(--ombre-survol);
}
.ctcl-fnfl-media-card img {
  max-width: 100%;
  height: auto;
}

.ctcl-fnfl-media-card__link:focus-visible,
.ctcl-chanson-card__link:focus-visible,
.js-card__media:focus-visible,
.js-trigger:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ctcl-fnfl-media-card { transition: none; }
  .ctcl-fnfl-media-card:hover { transform: none; }
  .ctcl-chanson-card__shine,
  .js-card__shine {
    display: none;
  }
}

/* 7. ACCUEIL — suppression du grand blanc sous « Héritage & Fraternité ».
      La bande sombre #heritage-fraternite est le DERNIER bloc de la
      section blanche #qui-sommes-nous (.section-president--portrait).
      Deux espacements bas s'y cumulaient (~190px de blanc) :
        - margin-bottom 4.5rem de la bande sombre ;
        - padding-bottom 120px de la section blanche.
      On les met à 0 pour que la bande rejoigne proprement la section
      « Actualités ». Le haut (séparation avec le Mot du Président) reste
      inchangé. ID utilisés pour passer devant le <style> inline de la vue. */
#qui-sommes-nous.section-president--portrait {
  padding-bottom: 0;
}
#heritage-fraternite.heritage-fraternity {
  margin-bottom: 0;
}

/* Galerie historique dynamique CT/CL + SNLE */
.historique-gallery-link {
  display: inline-flex;
  margin-top: 1rem;
}

.historique-gallery-page {
  background: #f6f3ec;
}

.historique-gallery-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(430px, 68vh, 700px);
  display: flex;
  align-items: flex-end;
  padding: 150px 0 82px;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.historique-gallery-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 20, 38, .92), rgba(7, 20, 38, .68) 48%, rgba(7, 20, 38, .34)),
    linear-gradient(0deg, rgba(7, 20, 38, .9), rgba(7, 20, 38, .05) 58%);
}

.historique-gallery-hero__content {
  max-width: 920px;
}

.historique-gallery-back {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.35rem;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.historique-gallery-back:hover {
  color: var(--accent-color);
}

.historique-gallery-hero h1 {
  max-width: 850px;
  margin: .75rem 0 1rem;
  font-family: var(--heading-font);
  font-size: clamp(2.25rem, 5vw, 5rem);
  line-height: .98;
  color: #fff;
  text-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}

.historique-gallery-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 1.08rem;
  line-height: 1.75;
}

.historique-gallery-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.35rem;
}

.historique-gallery-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 800;
}

.historique-gallery-section {
  padding-top: clamp(54px, 8vw, 96px);
}

.historique-gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.6rem, 4vw, 2.5rem);
}

.historique-gallery-heading h2 {
  margin: .35rem 0 0;
  font-family: var(--heading-font);
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.historique-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2.6vw, 1.5rem);
}

.historique-gallery-card {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid rgba(15, 34, 58, .12);
  border-radius: 8px;
  background: #101c2d;
  box-shadow: 0 18px 45px rgba(7, 20, 38, .14);
  text-decoration: none;
}

.historique-gallery-card__image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0f223a;
}

.historique-gallery-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.historique-gallery-card:hover .historique-gallery-card__image img {
  transform: scale(1.045);
}

.historique-gallery-card__caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  min-height: 86px;
  padding: .95rem;
  color: #fff;
}

.historique-gallery-card__index {
  color: var(--accent-color);
  font-weight: 900;
}

.historique-gallery-card__text {
  min-width: 0;
}

.historique-gallery-card__text strong,
.historique-gallery-card__text small {
  display: block;
  overflow-wrap: anywhere;
}

.historique-gallery-card__text strong {
  color: #fff;
  font-size: .98rem;
  line-height: 1.25;
}

.historique-gallery-card__text small {
  margin-top: .25rem;
  color: rgba(255, 255, 255, .66);
  font-size: .8rem;
}

.historique-gallery-card:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .historique-gallery-hero {
    min-height: 520px;
    padding: 132px 0 58px;
  }
  .historique-gallery-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .historique-gallery-grid {
    grid-template-columns: 1fr;
  }
  .historique-gallery-card__caption {
    min-height: 78px;
  }
}
/* ═══════════ FIN HARMONISATION VISUELLE ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM+ — Élévation des sections de contenu de l'espace membre
   ───────────────────────────────────────────────────────────────────
   Couche purement décorative (ombres, accents or, micro-interactions),
   ajoutée APRÈS les définitions de base pour les surcharger sans toucher
   au markup ni aux layouts (display/grid/position inchangés). Profite à
   profil, mes réservations, mes réunions et messagerie qui partagent ces
   composants. Respecte prefers-reduced-motion plus bas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Titres de section : filet or animé sous le titre ── */
.membre-page .membre-section__head { position: relative; }
.membre-page .membre-section__title { position: relative; }
.membre-page .membre-section__title::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: .85rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--m-gold), rgba(201,163,74,.15));
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.membre-page .membre-section:hover .membre-section__title::after { width: 92px; }

/* ── Cartes réservations / réunions : profondeur + lift + zoom photo ── */
.membre-page .reservation-card {
  position: relative;
  isolation: isolate;
  transition:
    transform .4s cubic-bezier(.2,.7,.3,1),
    box-shadow .4s cubic-bezier(.2,.7,.3,1),
    border-color .4s ease;
}
.membre-page .reservation-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(201,163,74,.55), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 3;
}
.membre-page .reservation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -30px rgba(12,35,64,.55);
  border-color: rgba(201,163,74,.45);
}
.membre-page .reservation-card:hover::before { opacity: 1; }
.membre-page .reservation-card__media { overflow: hidden; }
.membre-page .reservation-card__media img {
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.membre-page .reservation-card:hover .reservation-card__media img { transform: scale(1.06); }
.membre-page .reservation-card__title a {
  background-image: linear-gradient(var(--m-gold), var(--m-gold));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s cubic-bezier(.2,.7,.3,1), color .3s ease;
}
.membre-page .reservation-card:hover .reservation-card__title a { background-size: 100% 2px; }
.membre-page .reservation-card__type,
.membre-page .reservation-card__status { transition: transform .3s ease, box-shadow .3s ease; }
.membre-page .reservation-card:hover .reservation-card__status {
  box-shadow: 0 6px 16px -8px currentColor;
}

/* ── État vide : reflet doux + accent or ── */
.membre-page .reservation-empty,
.membre-page .sondage-card__empty {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 200px at 90% -30%, rgba(201,163,74,.10), transparent 60%),
    #fff;
}
.membre-page .reservation-empty__icon {
  background: linear-gradient(140deg, rgba(12,35,64,.10), rgba(201,163,74,.16));
  box-shadow: inset 0 0 0 1px rgba(201,163,74,.25);
}

/* ── Blocs d'information du profil : profondeur + accent latéral ── */
.membre-page .membre-profil-bloc {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.membre-page .membre-profil-bloc::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--m-gold), rgba(201,163,74,.1));
  transform: scaleY(.0);
  transform-origin: top;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.membre-page .membre-profil-bloc:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -32px rgba(12,35,64,.5);
}
.membre-page .membre-profil-bloc:hover::before { transform: scaleY(1); }

/* ── Formulaire profil : groupes en cartes vivantes + champs raffinés ── */
.membre-page .profil-form__group {
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.membre-page .profil-form__group:hover {
  box-shadow: 0 22px 46px -34px rgba(12,35,64,.5);
  border-color: rgba(201,163,74,.4);
}
.membre-page .profil-form input,
.membre-page .profil-form select,
.membre-page .profil-form textarea {
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.membre-page .profil-form input:focus,
.membre-page .profil-form select:focus,
.membre-page .profil-form textarea:focus {
  box-shadow: 0 0 0 4px rgba(201,163,74,.16);
  border-color: var(--m-gold);
}

/* ── Photo de profil : halo or au survol ── */
.membre-page .profil-photo-bloc__visuel {
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.membre-page .profil-photo-bloc__visuel:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 6px rgba(201,163,74,.16), 0 18px 36px -22px rgba(12,35,64,.55);
}

/* ── Flash messages : barre d'accent + relief ── */
.membre-page .membre-flash,
.membre-page .profil-flash {
  position: relative;
  box-shadow: 0 10px 26px -20px rgba(12,35,64,.45);
}

/* ── Boutons membre : éclat discret au survol ── */
.membre-page .btn-membre--primary {
  position: relative;
  overflow: hidden;
}
.membre-page .btn-membre--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.2,.7,.3,1);
}
.membre-page .btn-membre--primary:hover::after { left: 130%; }

/* ── Messagerie : conversations plus vivantes, bulles en relief ── */
.membre-page .messagerie-conv__link {
  transition: background .25s ease, padding-left .25s ease, box-shadow .25s ease;
}
.membre-page .messagerie-conv__link:hover { padding-left: 1.15rem; }
.membre-page .messagerie-conv.is-active .messagerie-conv__link {
  box-shadow: inset 3px 0 0 var(--m-gold);
}
.membre-page .messagerie-conv__avatar { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.membre-page .messagerie-conv__link:hover .messagerie-conv__avatar { transform: scale(1.06); }
.membre-page .messagerie-bulle {
  box-shadow: 0 8px 22px -18px rgba(12,35,64,.5);
  transition: transform .25s ease;
}
.membre-page .messagerie-bulle:hover { transform: translateY(-1px); }
.membre-page .messagerie-app__send { transition: transform .25s ease, box-shadow .25s ease; }
.membre-page .messagerie-app__send:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(12,35,64,.6);
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
  .membre-page .reservation-card,
  .membre-page .reservation-card__media img,
  .membre-page .membre-profil-bloc,
  .membre-page .profil-form__group,
  .membre-page .profil-photo-bloc__visuel,
  .membre-page .messagerie-conv__link,
  .membre-page .messagerie-bulle,
  .membre-page .membre-section__title::after,
  .membre-page .btn-membre--primary::after {
    transition: none !important;
  }
  .membre-page .reservation-card:hover,
  .membre-page .membre-profil-bloc:hover,
  .membre-page .profil-photo-bloc__visuel:hover { transform: none; }
}
/* ═══════════ FIN PREMIUM+ ESPACE MEMBRE ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   HERO MEMBRE — Bannière cinématographique (image plein cadre)
   ───────────────────────────────────────────────────────────────────
   Avant : l'image de fond était affichée à opacity .18 sous un voile
   crème → quasi invisible, effet « bandeau crème plat ». Désormais
   l'image devient le sujet : plein cadre, léger zoom (ken-burns),
   dégradé navy + halo or pour la lisibilité, titre blanc, filet or.
   Ne touche PAS la variante --cover (accueil membre) ni les héros sans
   image. S'applique à toutes les pages membre via :has(> __bg).
   ═══════════════════════════════════════════════════════════════════ */
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) {
  background: var(--m-navy);
  border-bottom: 0;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(260px, 36vh, 400px);
  display: flex;
  align-items: center;
}
/* Image plein cadre + léger zoom au chargement */
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) > .membre-hero__bg {
  opacity: 1;
  transform: scale(1.07);
  transition: transform 18s cubic-bezier(.2,.7,.3,1);
  filter: saturate(1.06) contrast(1.02);
}
.membre-page.aos-init .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) > .membre-hero__bg,
.membre-page:hover .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) > .membre-hero__bg {
  transform: scale(1);
}
/* Voile navy dégradé + lueur or (lisibilité du texte blanc) */
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) > .membre-hero__veil {
  background:
    linear-gradient(180deg, rgba(12,35,64,.46) 0%, rgba(12,35,64,.66) 52%, rgba(12,35,64,.92) 100%),
    radial-gradient(820px 320px at 85% -12%, rgba(201,163,74,.30), transparent 62%),
    radial-gradient(640px 300px at 8% 120%, rgba(201,163,74,.16), transparent 60%);
}
/* Filet or animé en bas de la bannière */
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--m-gold) 25%, #f0d894 50%, var(--m-gold) 75%, transparent);
  opacity: .9;
}
/* Eyebrow en pastille or vitrée */
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) .membre-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  color: var(--m-gold);
  background: rgba(201,163,74,.14);
  border: 1px solid rgba(201,163,74,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Titre blanc + nom or, ombré pour le détacher de l'image */
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) .membre-hero__title {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) .membre-hero__name {
  color: var(--m-gold);
}
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) .membre-hero__lead {
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
/* Méta-cartes en verre sur la bannière sombre (si présentes) */
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) .membre-meta-card {
  background: rgba(255,255,255,.08);
  border-color: rgba(201,163,74,.35);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) .membre-meta-card__label { color: rgba(255,255,255,.7); }
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) .membre-meta-card__value { color: #fff; }
/* Bouton fantôme lisible sur fond sombre */
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) .btn-membre--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) .btn-membre--ghost:hover {
  background: #fff;
  color: var(--m-navy);
  border-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) > .membre-hero__bg {
    transform: none !important;
    transition: none !important;
  }
}

/* Correctif bande crème header/héros : le `.membre-page` réserve un
   padding-top de 88px (crème) pour compenser le header fixe. Avec l'ancien
   héros crème c'était invisible ; le héros sombre le révèle en bande.
   On NE peut PAS cibler .membre-page via :has imbriqué (interdit en CSS).
   Solution : le héros image remonte via une marge négative qui annule
   ces 88px (l'image couvre alors toute la zone, jusque sous le header),
   et son contenu est repoussé via padding-top pour rester dégagé du menu. */
.membre-page .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg),
.membre-rubrique .membre-hero:not(.membre-hero--cover):has(> .membre-hero__bg) {
  margin-top: -88px;
  padding-top: calc(88px + clamp(2.25rem, 4vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* ═══════════ FIN HERO MEMBRE CINÉMATOGRAPHIQUE ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM+ SNLE — heros des sous-pages au niveau « Actualités »
   ───────────────────────────────────────────────────────────────────
   Les pages SNLE Index, Historique, Photos et Vidéos/Audio utilisent le
   hero partagé `.snle-hero` (image en background CSS + voile plat), plus
   sobre que les heros custom d'Actualités / Insignes / Documentation.
   On l'élève : ken-burns à l'ouverture, voile enrichi d'une lueur or, et
   filet or en bas — comme les autres heros premium. Insignes (.snle-
   insignes-hero), Documentation (.snle-doc-hero) et Actualités (.snle-
   actu-hero) utilisent d'autres classes : ils ne sont PAS impactés.
   ═══════════════════════════════════════════════════════════════════ */
.snle-page .snle-hero { isolation: isolate; }

/* Calque image animé (reprend l'image de fond du hero via inherit) :
   léger zoom arrière à l'ouverture. Repli silencieux : si inherit
   n'aboutit pas, l'image de fond statique de l'élément reste affichée. */
.snle-page .snle-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: inherit;
  background-size: cover;
  background-position: inherit;
  background-repeat: no-repeat;
  transform: scale(1.09);
  animation: snleHeroKenburns 20s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes snleHeroKenburns { to { transform: scale(1); } }

/* Voile enrichi : lisibilité du texte à gauche + lueur or en haut à
   droite + dégradé navy plus profond en bas (plus de relief). */
.snle-page .snle-hero > .snle-hero__veil {
  background:
    radial-gradient(680px 320px at 88% 10%, rgba(201,169,97,.30), transparent 60%),
    linear-gradient(90deg, rgba(6,20,37,.94) 0%, rgba(6,20,37,.74) 44%, rgba(6,20,37,.30) 100%),
    linear-gradient(180deg, rgba(6,20,37,.10), rgba(6,20,37,.84));
}

/* Filet or lumineux en bas de la bannière */
.snle-page .snle-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--snle-gold) 22%, #f0d894 50%, var(--snle-gold) 78%, transparent);
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  .snle-page .snle-hero::before { animation: none; transform: scale(1); }
}

/* Panneau d'intro SNLE : accent or en tête + léger relief au survol */
.snle-page .snle-intro__panel {
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.snle-page .snle-intro__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--snle-gold), transparent);
  transform: scaleX(.4);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.snle-page .snle-intro__panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 54px -30px rgba(10,37,64,.5);
}
.snle-page .snle-intro__panel:hover::before { transform: scaleX(1); }

/* Indochine - lisibilite renforcee pour la section Videos / Audio */
.ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-block {
  position: relative;
  overflow: hidden;
  padding: 1.7rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(201, 169, 97, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(5, 20, 36, 0.98), rgba(8, 35, 61, 0.95) 58%, rgba(14, 50, 78, 0.96));
  border: 1px solid rgba(201, 169, 97, 0.34);
  border-radius: 1rem;
  box-shadow:
    0 34px 84px -42px rgba(0, 0, 0, 0.74),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-block::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0.05), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 12px);
  opacity: 0.55;
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-block__head,
.ctcl-indochine-page #indochine-videos-audio .ctcl-media-grid {
  position: relative;
  z-index: 1;
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-block__head {
  margin-bottom: 1.25rem;
  padding: 0 0 1rem;
  border-left: 0;
  border-bottom: 1px solid rgba(201, 169, 97, 0.28);
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-block__kicker {
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid rgba(201, 169, 97, 0.40);
  color: var(--ind-gold);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38);
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-block__head h3 {
  color: var(--ind-text-light);
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-media-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-media-card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 1.15rem;
  background:
    linear-gradient(180deg, rgba(255, 250, 238, 0.99), rgba(244, 235, 214, 0.97));
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 0.85rem;
  box-shadow:
    0 24px 56px -38px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
  color: var(--ind-ink);
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-media-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.28rem;
  background: linear-gradient(180deg, var(--ind-gold), rgba(184, 149, 72, 0.34));
  border-radius: 0.85rem 0 0 0.85rem;
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-media-card h3 {
  margin-bottom: 0.6rem;
  color: var(--ind-navy);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-media-card p {
  margin-bottom: 1rem;
  color: #334559;
  line-height: 1.65;
  text-shadow: none;
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-media-card__player {
  aspect-ratio: 16 / 9;
  margin-top: auto;
  border: 1px solid rgba(6, 24, 43, 0.18);
  border-radius: 0.7rem;
  background: #02070d;
  box-shadow: 0 18px 36px -26px rgba(6, 24, 43, 0.78);
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-audio {
  margin-top: auto;
  background: rgba(6, 24, 43, 0.08);
  box-shadow: 0 12px 28px -24px rgba(6, 24, 43, 0.8);
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-card__link {
  margin-top: auto;
  align-self: flex-start;
  background: var(--ind-navy);
  color: var(--ind-text-light);
}

.ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-card__link:hover,
.ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-card__link:focus-visible {
  background: var(--ind-gold);
  color: var(--ind-navy-deep);
}

@media (max-width: 575.98px) {
  .ctcl-indochine-page #indochine-videos-audio .ctcl-fnfl-media-block {
    padding: 1.1rem;
  }

  .ctcl-indochine-page #indochine-videos-audio .ctcl-media-card {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snle-page .snle-intro__panel { transition: none; }
  .snle-page .snle-intro__panel:hover { transform: none; }
}
/* ═══════════ FIN PREMIUM+ SNLE HEROS ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   HISTORIQUE CT/CL + SNLE — titres élégants & ressources externes
   Ajouts cohérents avec l'identité navy/or partagée par les deux
   rubriques (mêmes valeurs : or #c9a961, navy #0a2540).
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Nom du bâtiment mis en valeur (doré) dans le hero CT/CL —
   aligné sur le traitement SNLE (.snle-hero__name). */
.ctcl-hero__name {
  color: var(--ctcl-gold);
  font-weight: 700;
  text-shadow: 0 0 26px rgba(201, 169, 97, 0.35);
}

.ctcl-historique-hero h1 {
  letter-spacing: -0.02em;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.24);
}

/* 2. Accent doré discret sous les titres de section — traitement
   identique CT/CL et SNLE pour une frise de titres cohérente. */
.ctcl-intro__panel h2,
.snle-intro__panel h2 {
  position: relative;
  padding-bottom: 0.9rem;
}

.ctcl-intro__panel h2::after,
.snle-intro__panel h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c9a961, rgba(201, 169, 97, 0));
}

/* 3. Bloc « Ressources complémentaires » (liens externes) affiché sur
   les fiches détaillées historiques CT/CL et SNLE. */
.hist-liens {
  margin-top: 2.5rem;
  padding: 1.6rem 1.75rem;
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-left: 4px solid #c9a961;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 60%);
  box-shadow: 0 18px 40px -30px rgba(10, 37, 64, 0.4);
}

.hist-liens__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.15rem;
}

.hist-liens__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(201, 169, 97, 0.16);
  color: #0a2540;
  font-size: 1.5rem;
}

.hist-liens__eyebrow {
  display: block;
  color: #b08d43;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hist-liens__title {
  margin: 0.15rem 0 0;
  color: #0a2540;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.hist-liens__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hist-liens__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 12px;
  background: #ffffff;
  color: #0a2540;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hist-liens__item:hover,
.hist-liens__item:focus-visible {
  border-color: rgba(201, 169, 97, 0.65);
  box-shadow: 0 12px 26px -18px rgba(10, 37, 64, 0.55);
  transform: translateY(-2px);
  color: #0a2540;
}

.hist-liens__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(10, 37, 64, 0.06);
  color: #b08d43;
  font-size: 1.15rem;
}

.hist-liens__item-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hist-liens__item-go {
  flex: 0 0 auto;
  color: #c9a961;
  font-size: 1.05rem;
  transition: transform 0.2s ease;
}

.hist-liens__item:hover .hist-liens__item-go {
  transform: translate(2px, -2px);
}

@media (max-width: 575.98px) {
  .hist-liens {
    padding: 1.25rem 1.15rem;
  }
  .hist-liens__list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hist-liens__item,
  .hist-liens__item-go {
    transition: none;
  }
  .hist-liens__item:hover,
  .hist-liens__item:focus-visible {
    transform: none;
  }
  .hist-liens__item:hover .hist-liens__item-go {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NOM DU BÂTIMENT — « Le Triomphant » en italique doré
   Traitement homogène sur tout le site (helper nom_triomphant()).
   Or #c9a961 = valeur partagée par --ctcl-gold / --snle-gold.
   ═══════════════════════════════════════════════════════════════════ */
.nom-triomphant {
  color: #c9a961;
  font-style: italic;
  font-weight: 600;
}

/* Cohérence : les noms dorés déjà présents dans les héros adoptent
   le même traitement italique. */
.ctcl-hero__name,
.snle-historique-page .snle-hero__name {
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════
   Footer — refonte visuelle (hiérarchie, organisation, dorures)
   ─────────────────────────────────────────────────────────────────
   Objectif : un pied de page plus soigné et mieux structuré, avec un
   traitement doré marquant sur « Le Triomphant » (dégradé + halo +
   léger balayage lumineux). Tout est scopé sous .footer pour ne rien
   changer ailleurs. Les sélecteurs reprennent la chaîne complète
   (.footer .footer-about .logo …) afin de dépasser la spécificité des
   anciennes règles génériques.
   ══════════════════════════════════════════════════════════════════ */
.footer {
  --footer-gold: #c9a961;
  --footer-gold-soft: #e9d49a;
  --footer-text-muted: rgba(227, 227, 227, 0.72);
  position: relative;
  background:
    radial-gradient(115% 130% at 12% -15%, rgba(201, 169, 97, 0.10), transparent 55%),
    linear-gradient(180deg, #0b2a49 0%, #081f38 100%);
}

/* Filet supérieur : dégradé doré centré plutôt qu'un simple trait gris. */
.footer .footer-top {
  padding-top: 60px;
  border-top: none;
}
.footer .footer-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 97, 0.65) 22%,
    rgba(233, 212, 154, 0.95) 50%,
    rgba(201, 169, 97, 0.65) 78%,
    transparent
  );
}

/* ── Bloc marque ──────────────────────────────────────────────────── */
.footer .footer-about .logo.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  text-decoration: none;
}
.footer .footer-about .logo.footer-brand img {
  height: 74px;
  width: auto;
  margin-right: 0;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}
.footer .footer-about .logo .footer-brand__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.1;
}
.footer .footer-about .logo .footer-brand__eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(227, 227, 227, 0.60);
}
.footer .footer-about .logo .footer-brand__name {
  font-family: var(--editorial-font, "Fraunces"), Georgia, serif;
  font-size: 1.62rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--footer-gold-soft); /* couleur des guillemets « » */
}

/* Traitement doré du nom « Le Triomphant » (marque + copyright).
   Dégradé clippé sur le texte + halo doux + balayage lumineux lent. */
.footer .footer-about .logo .footer-brand__name .nom-triomphant,
.footer .copyright .copyright__brand .nom-triomphant {
  font-family: var(--editorial-font, "Fraunces"), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(
    100deg,
    #c9a34a 0%,
    #d8b45e 30%,
    #fff4d6 50%,
    #d8b45e 70%,
    #c9a34a 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(201, 169, 97, 0.30));
  animation: footerGoldSheen 6s ease-in-out infinite;
}
@keyframes footerGoldSheen {
  0%, 55% { background-position: 120% center; }
  100%    { background-position: -20% center; }
}

/* ── Titres de colonnes : soulignés dorés dégradés ────────────────── */
.footer h4 {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 14px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}
.footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--footer-gold), rgba(201, 169, 97, 0));
}

/* ── Adresse ──────────────────────────────────────────────────────── */
.footer .footer-about .footer-address {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--footer-text-muted);
}
.footer .footer-about .footer-address i {
  color: var(--footer-gold);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Listes de liens : icônes dorées, hover doux ──────────────────── */
.footer .footer-links ul li {
  padding: 9px 0;
  gap: 9px;
}
.footer .footer-links ul i {
  padding-right: 0;
  font-size: 0.92rem;
  line-height: 1;
  color: var(--footer-gold);
  opacity: 0.92;
  transition: transform 0.3s ease;
}
.footer .footer-links ul a {
  color: rgba(227, 227, 227, 0.80);
}
.footer .footer-links ul li:hover i {
  transform: translateX(1px);
}
.footer .footer-links ul a:hover {
  color: var(--footer-gold-soft);
}

/* ── Barre de copyright ───────────────────────────────────────────── */
.footer .copyright {
  margin-top: 46px;
  padding: 22px 0;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(201, 169, 97, 0.16);
}
.footer .copyright .copyright__inner {
  text-align: center;
}
.footer .copyright .copyright__text {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--footer-text-muted);
}
.footer .copyright .copyright__mark {
  color: var(--footer-gold);
  font-weight: 600;
}
.footer .copyright .copyright__brand {
  font-weight: 600;
  color: #fff; /* libellé + guillemets « » en blanc ; seul le nom est doré */
}
.footer .copyright .copyright__sep {
  color: rgba(201, 169, 97, 0.55);
}
.footer .copyright .copyright__year {
  color: rgba(227, 227, 227, 0.62);
}

@media (max-width: 575.98px) {
  .footer .footer-about .logo .footer-brand__name {
    font-size: 1.42rem;
  }
  .footer .copyright .copyright__sep {
    display: none;
  }
  .footer .copyright .copyright__text {
    gap: 4px 8px;
  }
}

/* Accessibilité : on coupe le balayage lumineux si l'utilisateur
   demande à réduire les animations. */
@media (prefers-reduced-motion: reduce) {
  .footer .footer-about .logo .footer-brand__name .nom-triomphant,
  .footer .copyright .copyright__brand .nom-triomphant {
    animation: none;
    background-position: 50% center;
  }
}

/*══════════════════════════════════════════════════════════════════════
  GALERIES PHOTO — présentation « galerie d'art »
  ──────────────────────────────────────────────────────────────────────
  Couche commune aux albums Photos SNLE (.snle-photo-grid) et aux
  groupes Photos FNFL (.ctcl-fnfl-photo-group__grid). Elle vient APRÈS
  toutes les définitions existantes et n'utilise que la palette maison
  (navy --uipm-navy, or --uipm-gold, crème --uipm-cream).

  Principes tenus :
   · animations en transform/opacity uniquement (pas de reflow) ;
   · durées 180–600 ms, courbe ease-out maison --uipm-ease ;
   · les légendes restent lisibles SANS survol sur écran tactile ;
   · tout est neutralisé sous prefers-reduced-motion.
══════════════════════════════════════════════════════════════════════*/

/* ── 1. La vignette : passe-partout doré au survol ─────────────────── */
.snle-photo-grid__item,
.ctcl-fnfl-photo-group__grid > a {
  isolation: isolate;
  transition: transform 320ms var(--uipm-ease),
              box-shadow 320ms var(--uipm-ease);
}

/* Filet doré intérieur : évoque le passe-partout d'un tirage encadré.
   Posé en inset box-shadow sur un calque dédié, aucun impact layout. */
.snle-photo-grid__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 rgba(201, 163, 74, 0);
  transition: box-shadow 320ms var(--uipm-ease);
}
.snle-photo-grid__item:hover::before,
.snle-photo-grid__item:focus-visible::before {
  box-shadow:
    inset 0 0 0 1px rgba(201, 163, 74, 0.85),
    inset 0 0 0 6px rgba(251, 250, 246, 0.22);
}
.ctcl-fnfl-photo-group__grid > a:hover,
.ctcl-fnfl-photo-group__grid > a:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(201, 163, 74, 0.85),
    inset 0 0 0 6px rgba(251, 250, 246, 0.22),
    var(--uipm-glow);
}

/* ── 2. Balayage lumineux doré (effet « vitrine ») ──────────────────
   Une bande diagonale traverse la vignette une fois au survol.
   translate3d + opacity : composité par le GPU, hors du main thread. */
.snle-photo-grid__item::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 55%;
  height: 220%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 252, 240, 0.42) 45%,
    rgba(201, 163, 74, 0.28) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translate3d(0, 0, 0) rotate(14deg);
  opacity: 0;
  transition: transform 780ms var(--uipm-ease), opacity 220ms linear;
}
.snle-photo-grid__item:hover::after,
.snle-photo-grid__item:focus-visible::after {
  transform: translate3d(320%, 0, 0) rotate(14deg);
  opacity: 1;
}

/* ── 3. Légende : au survol, ET toujours visible au doigt ───────────
   Sur écran tactile il n'y a pas de survol : masquer la légende la
   rendait inaccessible. On l'affiche en permanence, avec un dégradé
   plus dense pour garantir le contraste du texte blanc. */
@media (hover: none) {
  .snle-photo-grid__caption {
    opacity: 1;
    transform: none;
    padding-top: 1.6rem;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(10, 37, 64, 0.55) 45%,
      rgba(10, 37, 64, 0.95) 100%);
  }
}

/* ── 4. Loupe au survol (parité avec la grille FNFL) ────────────────*/
.snle-photo-grid__item .snle-photo-grid__caption::after {
  content: "\F52A"; /* bi-zoom-in */
  font-family: "bootstrap-icons";
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.85rem;
  color: var(--uipm-navy);
  background: rgba(201, 163, 74, 0.92);
  transform: scale(0.6);
  opacity: 0;
  transition: transform 260ms var(--uipm-ease), opacity 200ms linear;
}
.snle-photo-grid__item:hover .snle-photo-grid__caption::after,
.snle-photo-grid__item:focus-visible .snle-photo-grid__caption::after {
  transform: scale(1);
  opacity: 1;
}

/* ── 5. En-tête d'album : halo doré discret ─────────────────────────*/
.snle-album__head,
.ctcl-fnfl-photo-group__head {
  position: relative;
  overflow: hidden;
}
.snle-album__head::before,
.ctcl-fnfl-photo-group__head::before {
  content: "";
  position: absolute;
  top: -55%;
  right: -12%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(201, 163, 74, 0.20) 0%,
    transparent 68%);
}
/* Le halo est un ::before positionné : sans cette remontée, il peindrait
   PAR-DESSUS le titre et le résumé (les enfants non positionnés passent
   en dessous d'un pseudo-élément absolu). */
.snle-album__head > *,
.ctcl-fnfl-photo-group__head > * {
  position: relative;
  z-index: 1;
}

/* La couverture d'album reçoit le même balayage doré que les vignettes. */
.snle-album__cover::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 252, 240, 0.38) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translate3d(0, 0, 0) rotate(14deg);
  opacity: 0;
  transition: transform 900ms var(--uipm-ease), opacity 220ms linear;
}
.snle-album__cover:hover::after,
.snle-album__cover:focus-visible::after {
  transform: translate3d(420%, 0, 0) rotate(14deg);
  opacity: 1;
}

/* ── 6. Révélation en cascade au scroll ─────────────────────────────
   L'état masqué n'est appliqué QUE si le script a posé
   .is-reveal-ready : sans JavaScript les photos restent visibles
   (jamais d'opacity 0 orpheline). Le délai est porté par
   --uipm-reveal-delay, calculé par grille. */
.snle-photo-grid.is-reveal-ready > a,
.ctcl-fnfl-photo-group__grid.is-reveal-ready > a {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
}
.snle-photo-grid.is-reveal-ready > a.is-revealed,
.ctcl-fnfl-photo-group__grid.is-reveal-ready > a.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 520ms var(--uipm-ease) var(--uipm-reveal-delay, 0ms),
              transform 520ms var(--uipm-ease) var(--uipm-reveal-delay, 0ms);
}

/* ── 7. Accessibilité : neutralisation complète des animations ──────*/
@media (prefers-reduced-motion: reduce) {
  .snle-photo-grid__item,
  .snle-photo-grid__item img,
  .snle-photo-grid__item::after,
  .snle-photo-grid__caption,
  .snle-album__cover,
  .snle-album__cover img,
  .snle-album__cover::after,
  .ctcl-fnfl-photo-group__grid > a,
  .ctcl-fnfl-photo-group__grid > a img {
    transition: none !important;
    animation: none !important;
  }
  .snle-photo-grid__item:hover,
  .snle-photo-grid__item:hover img,
  .snle-album__cover:hover,
  .snle-album__cover:hover img,
  .ctcl-fnfl-photo-group__grid > a:hover,
  .ctcl-fnfl-photo-group__grid > a:hover img {
    transform: none;
  }
  .snle-photo-grid__item::after,
  .snle-album__cover::after {
    display: none;
  }
  /* La légende reste affichée : l'information ne dépend pas du mouvement. */
  .snle-photo-grid__caption {
    opacity: 1;
    transform: none;
  }
  .snle-photo-grid.is-reveal-ready > a,
  .ctcl-fnfl-photo-group__grid.is-reveal-ready > a {
    opacity: 1;
    transform: none;
  }
}

/* ── 8. Mobile : mosaïque allégée ───────────────────────────────────*/
@media (max-width: 575.98px) {
  /* Une image maîtresse 2x2 sur 2 colonnes occuperait tout l'écran :
     on revient à une mosaïque régulière, plus lisible au pouce. */
  .snle-photo-grid,
  .ctcl-fnfl-photo-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .snle-photo-grid > a:first-child,
  .ctcl-fnfl-photo-group__grid > a:first-child {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 16 / 10;
  }
}