/* ==========================================================
   NGU — Never Give Up Group | style.css
   Mobile d'abord : les styles de base sont ceux du téléphone,
   les @media en bas de fichier adaptent pour tablette et ordinateur.
   ========================================================== */

/* ---------- 1. Couleurs et polices (à modifier ici seulement) ---------- */
:root {
  --bleu: #0F4A9C;          /* bleu du logo */
  --bleu-nuit: #0A1F44;     /* fonds sombres */
  --bleu-profond: #071634;  /* footer */
  --or: #C9A227;            /* or du logo */
  --or-fonce: #A8830F;      /* or lisible sur fond crème */
  --or-clair: #E6C964;      /* or lisible sur fond sombre */
  --creme: #F6F4EE;         /* fond de page (proche du fond du logo) */
  --texte: #1B2433;
  --texte-doux: #44506A;

  --police-titre: "Marcellus", Georgia, serif;
  --police-texte: "Figtree", system-ui, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* le header ne cache pas le titre d'une rubrique */
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--creme);
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 400;
  line-height: 1.1;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
}

/* Texte lu par les lecteurs d'écran mais invisible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Petites icônes (téléphone, lieu, e-mail) */
.icone {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--or-clair);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 3. Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: var(--creme);
  border-bottom: 1px solid rgba(10, 31, 68, 0.12);
}

.header__logo img { width: 48px; height: 48px; }

.menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 26px;
  height: 2px;
  margin: 5px auto;
  background: var(--bleu-nuit);
  transition: transform 0.25s, opacity 0.25s;
}

/* Menu ouvert : les 3 traits forment une croix */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu : caché sur téléphone tant qu'on ne l'ouvre pas */
.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem 0;
  background: var(--bleu-nuit);
}

.menu--ouvert { display: block; }

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

.menu a {
  display: block;
  padding: 0.9rem 1.25rem;
  color: #fff;
  font-size: 1.1rem;
  text-decoration: none;
}

.menu a:hover { color: var(--or-clair); }

/* Contact dans le menu (téléphone) */
.menu .menu__contact {
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.menu__contact li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.menu .menu__contact a {
  display: inline;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Barre de contact : cachée sur téléphone, visible sur ordinateur */
.barre-contact { display: none; }

/* ---------- 4. Accueil : plan bleu avec lueur dorée ---------- */
.accueil { background: var(--bleu-nuit); }

.banniere {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 34rem;
  min-height: calc(100svh - 4rem);   /* presque tout l'écran du téléphone */
  padding: 3.5rem max(1.5rem, calc((100% - 70rem) / 2)) 3.5rem;
  background: var(--bleu-nuit);
  color: #fff;
  overflow: hidden;
}

/* Les deux lueurs dorées en arrière-plan (elles « respirent » doucement) */
.banniere::before,
.banniere::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.banniere::before {
  top: -45vw;
  right: -50vw;
  width: 130vw;
  height: 130vw;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.45) 0%, rgba(201, 162, 39, 0.14) 38%, transparent 66%);
  animation: respirer 8s ease-in-out infinite alternate;
}

.banniere::after {
  bottom: -50vw;
  left: -55vw;
  width: 110vw;
  height: 110vw;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.24) 0%, rgba(201, 162, 39, 0.07) 40%, transparent 66%);
  animation: respirer 10s 1s ease-in-out infinite alternate;
}

@keyframes respirer {
  from { opacity: 0.65; transform: scale(0.95); }
  to   { opacity: 1;    transform: scale(1.05); }
}

.banniere__contenu { position: relative; z-index: 1; }

/* NEVER GIVE UP en or */
.h1__ligne {
  display: block;
  font-size: clamp(3.2rem, 16vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--or);
  text-shadow: 0 0 2.5rem rgba(201, 162, 39, 0.35);
}

/* L'Avenir Commence Ici en blanc */
.h1__sous {
  display: block;
  margin-top: 1.5rem;
  font-size: clamp(1.4rem, 6vw, 2.4rem);
  color: #fff;
}

/* Trait doré au-dessus du sous-titre */
.h1__sous::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-bottom: 1.25rem;
  background: var(--or);
}

.banniere p {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
}

/* Coordonnées : petites, avec icônes */
.coordonnees {
  display: grid;
  gap: 0.55rem;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(201, 162, 39, 0.35);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.coordonnees li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.coordonnees a {
  color: inherit;
  text-decoration: none;
}

.coordonnees a:hover { color: var(--or-clair); }

/* Apparition du texte, ligne après ligne */
.h1__ligne:nth-child(1) { animation: monter 0.9s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.h1__ligne:nth-child(2) { animation: monter 0.9s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.h1__sous               { animation: monter 0.9s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.banniere p             { animation: monter 0.9s 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.coordonnees            { animation: monter 0.9s 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes monter {
  from { opacity: 0; transform: translateY(1.5rem); }
}

/* ---------- 5. Accueil : les 4 valeurs ---------- */
.valeurs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4.5rem;
}

/* Une valeur : titre en bas à gauche, cercle en haut à droite, texte dessous */
.valeur {
  --d: min(56vw, 17rem);   /* diamètre du cercle */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--d);
  grid-template-areas:
    "titre cercle"
    "desc  desc";
  column-gap: 0.5rem;
  color: #fff;
}

.valeur__titre {
  grid-area: titre;
  position: relative;
  z-index: 1;
  align-self: end;           /* le mot est plus bas que le cercle */
  padding-bottom: 0.9rem;
}

.valeur__num {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--police-titre);
  letter-spacing: 0.2em;
  color: var(--or-clair);
}

.valeur h2 { font-size: clamp(1.55rem, 6.6vw, 2.1rem); }

.valeur h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 0.6rem;
  background: var(--or);
}

/* Le cercle qui flotte et se balance doucement */
.valeur__cercle {
  grid-area: cercle;
  width: var(--d);
  height: var(--d);
  overflow: hidden;
  border: 3px solid var(--or);
  border-radius: 50%;
  background: #16305F;   /* couleur visible tant que l'image n'est pas chargée */
  box-shadow: 0 1.5rem 2.5rem rgba(0, 0, 0, 0.35), 0 0 2.5rem rgba(201, 162, 39, 0.2);
  transform-origin: 50% 0;
  animation: flotter 7s ease-in-out infinite;
}

.valeur:nth-child(2) .valeur__cercle { animation-duration: 8s;   animation-delay: -2s; }
.valeur:nth-child(3) .valeur__cercle { animation-duration: 6.5s; animation-delay: -4s; }
.valeur:nth-child(4) .valeur__cercle { animation-duration: 7.5s; animation-delay: -1s; }

.valeur__cercle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes flotter {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-0.6rem) rotate(2deg); }
}

.valeur__desc {
  grid-area: desc;
  max-width: 30rem;
  margin: 1.25rem 0 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- 5b. Qui sommes-nous ---------- */
.apropos {
  padding: 4.5rem 1.5rem;
  background: var(--creme);
}

.apropos__conteneur {
  display: grid;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  grid-template-areas:
    "titre"
    "visuel"
    "texte";
}

.apropos__titre {
  grid-area: titre;
  font-size: clamp(2rem, 8.5vw, 3.4rem);
  color: var(--bleu-nuit);
}

/* « Vision » et « Philosophie » ressortent en or */
.mot-or { color: var(--or-fonce); }

.apropos__titre::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1.1rem;
  background: var(--or);
}

/* Image de groupe en arche, avec un cadre doré décalé derrière */
.apropos__visuel {
  grid-area: visuel;
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(88%, 26rem);
  margin-bottom: 1rem;
}

.apropos__visuel::before {
  content: "";
  position: absolute;
  inset: 1rem -1rem -1rem 1rem;
  z-index: -1;
  border: 2px solid var(--or);
  border-radius: 999px 999px 1.25rem 1.25rem;
}

.apropos__visuel img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 1.25rem 1.25rem;
  background: #D9DEE8;   /* couleur visible tant que l'image n'est pas chargée */
}

.apropos__texte { grid-area: texte; }

.apropos__texte p {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--texte-doux);
}

/* Phrase de conclusion */
.apropos__texte .apropos__phrase {
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--or);
  font-family: var(--police-titre);
  font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  line-height: 1.3;
  color: var(--bleu-nuit);
}

/* ---------- 5c. Activités ---------- */
.activites {
  padding: 4.5rem 1.5rem 5rem;
  background: var(--bleu-nuit);
  color: #fff;
}

.activites__conteneur {
  max-width: 72rem;
  margin: 0 auto;
}

.activites__titre { font-size: clamp(2rem, 8.5vw, 3.4rem); }

/* Sur fond bleu, « Industriels » et « Services » prennent l'or clair */
.activites .mot-or { color: var(--or-clair); }

.activites__titre::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1.1rem;
  background: var(--or);
}

.secteurs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  margin-top: 3rem;
}

/* Image en forme de feuille : deux grands coins arrondis, deux petits */
.secteur__image {
  overflow: hidden;
  border-radius: 2.5rem 0.75rem 2.5rem 0.75rem;
  background: #16305F;   /* couleur visible tant que l'image n'est pas chargée */
  box-shadow: 0 1.2rem 2rem rgba(0, 0, 0, 0.3);
}

.secteur__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.secteur h3 {
  margin-top: 1.5rem;
  font-size: clamp(1.6rem, 6vw, 2rem);
  color: var(--or-clair);
}

.secteur p {
  max-width: 34rem;
  margin: 0.75rem 0 0;
  font-size: 1.02rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- 6. Footer (Contact) ---------- */
.footer {
  padding: 3rem 1.5rem 2rem;
  background: var(--bleu-profond);
  border-top: 1px solid rgba(201, 162, 39, 0.4);
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.footer__blocs {
  display: grid;
  gap: 2rem;
  justify-items: center;
}

.footer__bloc {
  display: grid;
  justify-items: center;
  justify-self: stretch;     /* le bloc prend toute la largeur (pour le trait blanc) */
  gap: 0.5rem;
}

/* Trait blanc entre les blocs (téléphone) */
.footer__bloc + .footer__bloc {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

/* Le logo du footer n'apparaît que sur ordinateur */
.footer__logo { display: none; }

.footer__bloc h3 {
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--or-clair);
}

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

.footer__bloc p { margin: 0; }

.footer__bloc li + li { margin-top: 0.25rem; }

.footer__bloc a {
  color: inherit;
  text-decoration: none;
}

.footer__bloc a:hover { color: var(--or-clair); }

.footer__copyright {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
/* ---------- 7. Apparition au défilement ---------- */
/* Seulement si le JavaScript marche (classe "js" sur <html>) */
.js .reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s, transform 0.8s;
}

.js .reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- 8. Ordinateur (à partir de 900px) ---------- */
@media (min-width: 900px) {
  .header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* logo | menu | (vide) */
    padding-inline: max(1.5rem, calc((100% - 72rem) / 2));
  }

  .menu-toggle { display: none; }

  .menu {
    display: block;
    position: static;
    padding: 0;
    background: none;
  }

  .menu ul {
    display: flex;
    gap: 3.5rem;               /* espace entre les onglets */
  }

  .menu a {
    padding: 0.5rem 0;
    color: var(--bleu-nuit);
    font-size: 1rem;
    font-weight: 600;          /* texte en gras */
  }

  .menu a:hover { color: var(--bleu); }

  /* Contact du header : barre au-dessus du menu */
  .menu .menu__contact { display: none; }

  .barre-contact {
    display: block;
    background: var(--bleu-profond);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8rem;
  }

  .barre-contact ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.75rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.55rem 1.5rem;
    list-style: none;
  }

  .barre-contact li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  .barre-contact a {
    color: inherit;
    text-decoration: none;
  }

  .barre-contact a:hover { color: var(--or-clair); }

  .barre-contact .icone {
    width: 0.85rem;
    height: 0.85rem;
  }

  /* Les coordonnées du plan bleu ne servent que sur téléphone */
  .coordonnees { display: none; }

  .banniere__contenu { max-width: 44rem; }

  /* Qui sommes-nous : image à gauche, texte à droite */
  .apropos { padding-block: 6rem; }

  .apropos__conteneur {
    grid-template-columns: 5fr 6fr;
    grid-template-areas:
      "visuel titre"
      "visuel texte";
    column-gap: 5rem;
    align-items: start;
  }

  .apropos__titre { align-self: end; }

  .apropos__visuel {
    align-self: center;
    justify-self: start;
    width: 100%;
    max-width: 28rem;
  }

  /* Activités : 2 colonnes, la 2e colonne légèrement décalée vers le bas */
  .activites { padding-block: 6rem; }

  .secteurs {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 3rem;
  }

  .secteur:nth-child(even) { margin-top: 3rem; }

  .secteur__image { border-radius: 3.5rem 1rem 3.5rem 1rem; }

  /* Valeurs : 2 colonnes */
  .valeurs {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 3rem;
  }

  .valeur { --d: 14rem; }
  .valeur h2 { font-size: 1.9rem; }

  /* Footer : infos à gauche, logo à droite */
  .footer {
    padding: 4rem max(1.5rem, calc((100% - 72rem) / 2)) 2rem;
    text-align: left;
  }

  .footer__haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }

  .footer__blocs {
    grid-auto-flow: column;
    align-items: start;        /* les titres sont alignés en haut */
    justify-items: start;
    gap: 4.5rem;
  }

  .footer__bloc {
    grid-template-columns: auto 1fr;   /* icône à côté du titre */
    align-items: center;
    justify-items: start;
    justify-self: auto;
    column-gap: 0.6rem;
    row-gap: 0.9rem;
  }

  .footer__bloc + .footer__bloc {
    padding-top: 0;
    border-top: 0;
  }

  .footer__bloc h3 {
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .footer__bloc ul,
  .footer__bloc p { grid-column: 1 / -1; }

  .footer__logo {
    display: block;
    flex: none;
    width: 11rem;
    height: 11rem;
    border: 3px solid var(--or);
    border-radius: 50%;
  }

  .footer__copyright { text-align: center; }
}

/* ---------- 9. Grand écran (à partir de 1100px) ---------- */
@media (min-width: 1100px) {
  .valeur { --d: 17rem; }
  .valeur h2 { font-size: 2.2rem; }
}

/* ---------- 9b. Zoom des images d'activités au survol (souris uniquement) ---------- */
@media (hover: hover) {
  .secteur:hover .secteur__image img { transform: scale(1.06); }
}

/* ---------- 10. Accessibilité : moins d'animations si demandé ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================
   11. Logo animé de l'accueil (ordinateur seulement)
   ========================================================== */
.banniere__logo { display: none; }

@media (min-width: 900px) {
  .banniere__logo {
    --t: clamp(13rem, 26vw, 25rem);   /* taille du logo */
    display: block;
    position: absolute;
    z-index: 1;
    top: calc(50% - var(--t) / 2);
    right: max(1.5rem, calc((100% - 70rem) / 2));
    width: var(--t);
    height: var(--t);
  }

  /* L'anneau doré : part du haut et fait le tour en 1,6 s */
  .banniere__anneau {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 0.7rem rgba(201, 162, 39, 0.45));
  }

  .banniere__anneau circle {
    fill: none;
    stroke: var(--or);
    stroke-width: 2.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;   /* état final : cercle complet */
    animation: tracer-anneau 1.6s 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
  }

  /* Le logo apparaît quand l'anneau est presque fini, puis ne bouge plus */
  .banniere__logo img {
    position: absolute;
    inset: 6%;
    width: 88%;
    height: 88%;
    border-radius: 50%;
    object-fit: cover;
    animation: apparaitre-logo 1s 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@keyframes tracer-anneau   { from { stroke-dashoffset: 1; } }
@keyframes apparaitre-logo { from { opacity: 0; transform: scale(0.9); } }

/* ==========================================================
   12. Apparition au défilement : décalage et directions (ordinateur)
   ========================================================== */
@media (min-width: 900px) {
  /* Valeurs et secteurs sont sur 2 colonnes : la colonne de droite arrive un peu après */
  .js .valeur.reveal:nth-child(even),
  .js .secteur.reveal:nth-child(even) { transition-delay: 0.18s; }

  /* Qui sommes-nous : l'image arrive de la gauche, le texte de la droite */
  .apropos { overflow-x: clip; }

  .js .apropos__visuel.reveal { transform: translateX(-3rem); }
  .js .apropos__texte.reveal  { transform: translateX(3rem); transition-delay: 0.15s; }

  .js .apropos__visuel.reveal.visible,
  .js .apropos__texte.reveal.visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .apropos__visuel.reveal,
  .js .apropos__texte.reveal { transform: none; }
}

/* ==========================================================
   13. Menu actif : soulignement doré (ordinateur)
   ========================================================== */
@media (min-width: 900px) {
  .menu > ul:first-child a { position: relative; }

  .menu > ul:first-child a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1rem;
    height: 2px;
    background: var(--or);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
  }

  .menu > ul:first-child a.actif::after,
  .menu > ul:first-child a:hover::after { transform: scaleX(1); }
}

/* ==========================================================
   14. Menu du téléphone : rubriques centrées, séparées par un trait blanc
   ========================================================== */
@media (max-width: 899px) {
  .menu > ul:first-child li {
    margin: 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  }

  .menu > ul:first-child a { text-align: center; }
}


/* ==========================================================
   15. Citation de clôture de l'accueil
   ========================================================== */
.devise {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem 4.5rem;
  text-align: center;
}

/* Petit trait doré au-dessus de la citation */
.devise::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 0 auto 1.75rem;
  background: var(--or);
}

.devise__texte {
  max-width: 60rem;
  margin: 0 auto;
  font-family: var(--police-titre);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  line-height: 1.3;
  color: #fff;
  text-wrap: balance;
}

.devise__ligne { display: block; }
.devise__ligne--or { margin-top: 0.4rem; color: var(--or); }


/* ==========================================================
   16. Bandeau vers la page du club (section Activités)
   ========================================================== */
.club-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: #0A1F44;
  color: #fff;
  border-left: 4px solid var(--or);
  text-decoration: none;
}
.club-cta img { width: 3.5rem; height: auto; flex: none; }
.club-cta__texte { flex: 1; line-height: 1.5; }
.club-cta__texte strong { display: block; font-family: var(--police-titre); font-weight: 400; font-size: 1.3rem; color: var(--or); }
.club-cta__fleche { font-size: 1.8rem; color: var(--or); transition: transform 0.3s; }
.club-cta:hover .club-cta__fleche, .club-cta:focus-visible .club-cta__fleche { transform: translateX(0.4rem); }


/* ==========================================================
   17. Icône Facebook (pleine, contrairement aux autres icônes au trait)
   ========================================================== */
.icone.icone--fb { fill: var(--or); stroke: none; }