/* ==========================================================================
   Tradiant · tradiant.lu
   Charte graphique v1.1 : Georgia (titres) / Calibri (texte), cinq couleurs.
   ========================================================================== */

:root {
  color-scheme: light only; /* « only » : empêche aussi l'assombrissement automatique de Chrome */

  /* Charte : valeurs exactes */
  --bleu: #1F4E5F;     /* primaire */
  --or: #B8934A;       /* accent : filets, traits d'exergue, survols, jamais de texte */
  --ardoise: #4A6B78;  /* secondaire */
  --ivoire: #F5F1E8;   /* fond */
  --encre: #222222;    /* texte */

  /* Dérivés autorisés : blanc pur et filets neutres */
  --blanc: #FFFFFF;
  --filet: rgba(74, 107, 120, 0.22);  /* ardoise à faible opacité */
  --ivoire-fonce: #EBE9E1;            /* Ivoire assombri de 6 % d'Ardoise : barre du haut */
  --filet-clair: rgba(245, 241, 232, 0.2); /* ivoire à faible opacité, sur fond Bleu */

  --serif: Georgia, 'Times New Roman', serif;
  --sans: Calibri, Carlito, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --gouttiere: clamp(16px, 5vw, 40px);
  --texte: 720px;
  --large: 1080px;
  --header-h: 72px;
  --transition: 150ms ease;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: normal;
  color: var(--bleu);
  line-height: 1.25;
  margin: 0;
}

h1 {
  font-size: clamp(28px, 4.2vw, 36px);
}

h2 {
  font-size: clamp(22px, 2.8vw, 26px);
  margin-bottom: 24px;
}

h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--bleu);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition), color var(--transition);
}

a:hover {
  text-decoration-color: var(--or);
}

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

main:focus {
  outline: none;
}

::selection {
  background: var(--bleu);
  color: var(--ivoire);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Liens externes : flèche discrète, ignorée des lecteurs d'écran */
a.externe::after {
  content: "\2009\2197" / "";
  text-decoration: none;
  display: inline-block;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Bilinguisme : les deux versions sont dans le DOM, une seule est affichée.
   -------------------------------------------------------------------------- */

html:not(.lang-fr) :is(.lang-version, .site-nav, .skip-link)[lang="fr"],
html:not(.lang-en) :is(.lang-version, .site-nav, .skip-link)[lang="en"],
html:not(.lang-de) :is(.lang-version, .site-nav, .skip-link)[lang="de"] {
  display: none;
}

/* --------------------------------------------------------------------------
   Lien d'évitement
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--bleu);
  color: var(--blanc);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */

.wrap {
  max-width: calc(var(--texte) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.wrap--large {
  max-width: calc(var(--large) + 2 * var(--gouttiere));
}

.section {
  padding-block: clamp(56px, 9vw, 104px);
}

/* Sections ivoire : grain de papier d'archive presque imperceptible (bruit gris neutre, 4 %) */
.section--ivoire {
  background-color: var(--ivoire);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
}

.section--blanc {
  background: var(--blanc);
}

/* --------------------------------------------------------------------------
   En-tête fixe
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ivoire-fonce);
  border-bottom: 1px solid var(--filet);
  transition: background-color var(--transition), border-color var(--transition);
}

/* Après défilement : aplat Bleu Tradiant, logo en version fond sombre (trait et lettrage Ivoire, points Or) */
.site-header.is-scrolled {
  background: var(--bleu);
  border-bottom-color: var(--or);
}

.logo--horizontal path,
.logo--horizontal text {
  transition: stroke var(--transition), fill var(--transition);
}

.site-header.is-scrolled .logo--horizontal path {
  stroke: var(--ivoire);
}

.site-header.is-scrolled .logo--horizontal text {
  fill: var(--ivoire);
}

.site-header.is-scrolled :focus-visible {
  outline-color: var(--ivoire);
}

.site-header.is-scrolled .site-nav a,
.site-header.is-scrolled .lang-switch button,
.site-header.is-scrolled .lang-switch button[aria-pressed="true"] {
  color: var(--ivoire);
}

.site-header.is-scrolled .lang-switch button[aria-pressed="true"] {
  border-bottom-color: var(--ivoire);
}

.site-header.is-scrolled .lang-switch button:hover,
.site-header.is-scrolled .site-nav a:hover {
  border-bottom-color: var(--or);
}

.site-header.is-scrolled .menu-toggle__icon,
.site-header.is-scrolled .menu-toggle__icon::before,
.site-header.is-scrolled .menu-toggle__icon::after,
.site-header.is-scrolled .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before,
.site-header.is-scrolled .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  background: var(--ivoire);
}

.site-header.is-scrolled .menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(var(--large) + 2 * var(--gouttiere));
  min-height: var(--header-h);
  margin-inline: auto;
  padding: 6px var(--gouttiere);
}

.site-header__logo {
  display: block;
  flex: 0 1 auto;
  line-height: 0;
  margin-right: auto;
}

/* Logo de la barre : il apparaît progressivement, au rythme du défilement, à mesure que
   le mot TRADIANT du titre d'accueil passe sous la barre (valeur --logo calculée par script.js). */
html.js body:has(.wordmark) .site-header__logo {
  opacity: var(--logo, 0);
  transform: translateY(calc((1 - var(--logo, 0)) * 8px));
}

.site-header.logo-masque .site-header__logo {
  visibility: hidden;
}

.logo--horizontal {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
}

/* Navigation : panneau dépliant sous 1040 px, ligne de liens au-delà */
.site-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--gouttiere) 24px;
  background: var(--ivoire);
  border-bottom: 1px solid var(--filet);
}

.site-header.is-menu-open .site-menu {
  display: block;
}

.site-menu {
  background: var(--ivoire-fonce);
}

.site-header.is-scrolled .site-menu {
  background: var(--bleu);
  border-bottom-color: var(--or);
}

.site-header.is-scrolled .site-nav a {
  border-bottom-color: var(--filet-clair);
}

.site-menu .lang-switch--menu {
  display: none;
}

@media (max-width: 419px) {
  .lang-switch:not(.lang-switch--menu) {
    display: none;
  }

  .site-menu .lang-switch--menu {
    display: flex;
    margin-bottom: 8px;
  }
}

.site-nav ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
  color: var(--bleu);
  font-size: 18px;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.site-nav a:hover {
  border-bottom-color: var(--or);
}

.site-nav a[aria-current="location"] {
  font-weight: bold;
}

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

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--bleu);
  transition: transform var(--transition), background-color var(--transition);
}

.menu-toggle__icon {
  top: 21px;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  left: 0;
}

.menu-toggle__icon::before {
  top: -7px;
}

.menu-toggle__icon::after {
  top: 7px;
}

.menu-toggle:hover .menu-toggle__icon,
.menu-toggle:hover .menu-toggle__icon::before,
.menu-toggle:hover .menu-toggle__icon::after {
  background: var(--ardoise);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  transform: translateY(7px) rotate(45deg);
  background: var(--bleu);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--bleu);
}

.lang-switch {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}

.lang-switch button {
  min-width: 40px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ardoise);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.lang-switch button:hover {
  border-bottom-color: var(--or);
}

.lang-switch button[aria-pressed="true"] {
  color: var(--bleu);
  border-bottom-color: var(--bleu);
}

@media (min-width: 400px) {
  .logo--horizontal {
    height: 44px;
  }
}

@media (min-width: 480px) {
  :root {
    --header-h: 80px;
  }

  .site-header__inner {
    gap: 16px;
  }

  .logo--horizontal {
    height: 60px; /* taille minimale de la charte pour la version horizontale */
  }
}

@media (min-width: 1040px) {
  .site-header__inner {
    gap: 24px;
  }

  .menu-toggle {
    display: none;
  }

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

  .site-nav ul {
    flex-direction: row;
    gap: 28px;
  }

  .site-nav a {
    display: inline;
    padding: 4px 0;
    border-bottom-color: transparent;
    font-size: 16px;
  }

  .site-nav a[aria-current="location"] {
    font-weight: normal;
    border-bottom-color: var(--bleu);
  }

  .site-header.is-scrolled .site-menu {
    background: none;
  }

  .site-header.is-scrolled .site-nav a {
    border-bottom-color: transparent;
  }

  .site-header.is-scrolled .site-nav a[aria-current="location"] {
    border-bottom-color: var(--ivoire);
  }

  .site-nav a:hover {
    border-bottom-color: var(--or);
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Accueil : occupe tout l'écran sous la barre, contenu centré verticalement */
.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(48px, 8vw, 96px);
}

.hero > .wrap {
  width: 100%;
}

.hero h1 {
  max-width: 24ch;
}

/* Emblème de l'accueil : contour en filigrane (12 %), que le trait vient remplir aux couleurs du logo.
   Colonne à droite du texte, jamais derrière lui. */
.filigrane {
  display: none;
  pointer-events: none;
}

.filigrane svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Le tracé est redessiné point par point par script.js (sans pointillés, que Safari rend mal
   sur ce chemin). En attendant le script, le trait et le point de sortie restent invisibles ;
   sans JavaScript ou avec « Réduire les animations », l'emblème s'affiche directement complet. */
@media (prefers-reduced-motion: no-preference) {
  html.js .filigrane:not([data-trace]) .filigrane__trace {
    visibility: hidden;
  }

  html.js .filigrane__sortie {
    opacity: 0;
    transition: opacity 800ms ease;
  }

  html.js .filigrane.is-trace .filigrane__sortie {
    opacity: 1;
  }
}

@media (min-width: 760px) {
  .hero__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(200px, 30vw, 400px);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
    max-width: calc(var(--large) + 2 * var(--gouttiere));
  }

  .hero__texte {
    max-width: 640px;
  }

  .filigrane {
    display: block;
  }
}



/* Wordmark recomposé en texte (charte § 4.3) : Georgia, capitales, espacement étendu */
.wordmark {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.lead {
  font-size: clamp(18px, 2.1vw, 20px);
  line-height: 1.6;
}

/* Filet d'or au losange : un seul par page */
.filet {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 168px;
  margin-block: 28px 32px;
}

.filet::before,
.filet::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--or);
}

.filet span {
  width: 7px;
  height: 7px;
  background: var(--or);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Pôles
   -------------------------------------------------------------------------- */

.poles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.pole {
  padding-top: 20px;
  border-top: 1px solid var(--filet);
}

.pole__num::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--or);
  vertical-align: 1px;
}

.pole__num {
  margin-bottom: 6px;
  color: var(--ardoise);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Ce que reçoit le client, sous chaque pilier : un livrable, détaché de la description */
.pole__livrable {
  margin-top: 16px;
  padding: 12px 16px 14px;
  background: var(--blanc);
  border-left: 2px solid var(--or);
  color: var(--encre);
  font-size: 15.5px;
  line-height: 1.55;
}

.pole__livrable strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ardoise);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Sur les écrans à souris : au repos, la case est entièrement masquée ; au survol du pilier,
   la case se déroule en même temps que le filet or se trace. La place est réservée :
   rien ne bouge dans la grille. Sur écran tactile, la case reste entièrement visible. */
@media (hover: hover) {
  .pole__livrable {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 700ms cubic-bezier(0.45, 0.05, 0.35, 1);
  }

  .pole:hover .pole__livrable {
    clip-path: inset(0 0 0 0);
  }
}

/* Encadré sous les quatre piliers : une respiration, au second plan */
.encadre {
  max-width: 640px;
  margin: clamp(64px, 8vw, 96px) auto 0;
  text-align: center;
}

.encadre {
  position: relative;
}

.encadre::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--or);
}

/* Onde qui part du point d'or : la parole d'une personne, qui porte puis s'efface */
.encadre::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border: 1px solid var(--or);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .encadre[data-anim]:not(.is-vu)::before {
    transform: scale(0);
  }

  .encadre::before {
    transition: transform 500ms cubic-bezier(0.34, 1.5, 0.64, 1) 100ms;
  }

  /* Une onde lente et très légère, en continu, avec une pause entre deux battements */
  .encadre.is-vu::after {
    animation: onde 4s ease-out 600ms infinite;
  }
}

@keyframes onde {
  0% { transform: scale(1); opacity: 0.45; }
  55% { transform: scale(5); opacity: 0; }
  100% { transform: scale(5); opacity: 0; }
}

.encadre h3 {
  margin-bottom: 10px;
  font-size: 20px; /* comme les titres des piliers */
}

/* Même taille que le texte des piliers ; bloc centré, texte justifié, dernière ligne à gauche */
.encadre p {
  margin: 0;
  color: var(--encre);
  font-size: 17px;
  line-height: 1.6;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (min-width: 760px) {
  .poles {
    grid-template-columns: 1fr 1fr;
    gap: 56px 64px;
  }
}

/* --------------------------------------------------------------------------
   Exergues : filet vertical or, Georgia italique bleu
   -------------------------------------------------------------------------- */

.exergue {
  position: relative;
  max-width: var(--texte);
  margin: 0;
  padding: 4px 0 4px 27px;
  color: var(--bleu);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.3vw, 22px);
  line-height: 1.5;
}

.exergue::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--or);
  transform-origin: top;
}

/* « Ce que nous faisons » : titre, exergue, puis les piliers, avec des respirations franches */
h2 + .exergue {
  margin-top: 36px;
}

.exergue + .poles {
  margin-top: clamp(56px, 7vw, 80px);
}

/* --------------------------------------------------------------------------
   Équipe
   -------------------------------------------------------------------------- */

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

.membre {
  padding-top: 20px;
  border-top: 1px solid var(--filet);
  transition: border-color var(--transition);
}

.membre:hover,
.membre:focus-within {
  border-top-color: var(--or);
}

.membre h3 {
  margin-bottom: 4px;
}

/* Portrait : prise de trois-quarts, remplacée au survol par la prise de face */
.membre__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--blanc);
}

.membre__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.membre__photo-survol {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition);
}

.membre:hover .membre__photo-survol,
.membre:focus-within .membre__photo-survol {
  opacity: 1;
}

.membre__lien {
  margin-top: 12px;
  font-size: 16px;
}

/* Présentation : s'affiche dans le cadre de la photo, sur un voile Bleu Tradiant,
   au survol ou après un clic (ou un toucher) sur le nom ou la photo. La carte ne s'allonge pas. */
.membre__nom {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition);
}

.membre__nom:hover {
  text-decoration-color: var(--or);
}

.membre--bio .membre__photo {
  cursor: pointer;
}

.membre__bio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.2vw, 24px);
  overflow-y: auto;
  background: rgba(31, 78, 95, 0.9); /* Bleu Tradiant, voile à 90 % */
  color: var(--ivoire);
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  cursor: auto;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.membre__bio > div {
  margin-block: auto;
}

.membre__bio p {
  margin-bottom: 0.8em;
}

.membre__bio .membre__lien {
  margin: 0;
  font-size: 15px;
}

.membre__bio a {
  color: var(--ivoire);
  text-decoration-color: var(--or);
}

.membre__bio :focus-visible {
  outline-color: var(--ivoire);
}

.membre.is-open .membre__bio {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 359px) {
  .membre__bio {
    padding: 14px;
    font-size: 13.5px;
  }
}

@media (hover: hover) {
  .membre:hover .membre__bio {
    opacity: 1;
    visibility: visible;
  }
}

.membre__role {
  margin-bottom: 12px;
  color: var(--ardoise);
  font-size: 16px;
}

/* Cartes de 340 px (la taille qu'elles avaient à trois par ligne).
   Jusqu'à trois profils : centrés. Au-delà : une rangée qui défile, avec boutons (script.js). */
.equipe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
}

.equipe > .membre {
  flex: 0 1 340px;
  min-width: 0;
}

.equipe--defilement {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.equipe--defilement::-webkit-scrollbar {
  display: none;
}

.equipe--defilement > .membre {
  flex: 0 0 min(340px, 85%);
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: no-preference) {
  .equipe--defilement {
    scroll-behavior: smooth;
  }
}

.equipe-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.equipe-nav button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ardoise);
  border-radius: 50%;
  background: none;
  color: var(--bleu);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.equipe-nav button:hover:not(:disabled) {
  border-color: var(--or);
}

.equipe-nav button:disabled {
  cursor: default;
  opacity: 0.35;
}

/* Portrait unique : léger rapprochement au survol */
.membre__photo--zoom img {
  transform-origin: 50% 32%;
  transition: transform 400ms ease;
}

.membre:hover .membre__photo--zoom img,
.membre:focus-within .membre__photo--zoom img {
  transform: scale(1.06);
}

/* Profil sans photo : silhouette neutre dans le même cadre que les portraits */
.membre__photo--silhouette img {
  object-fit: contain;
  object-position: center bottom;
}

/* « Le problème » : six fiches propres mais isolées (à l'arrivée sur la section), que les méthodes
   viennent relier (quand on lit le second paragraphe). Survoler une méthode dans le texte
   affiche sa définition et met en évidence ce qu'elle fait dans l'illustration. */
.illu {
  max-width: 380px;
  margin: 40px auto 0;
}

.illu svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.illu svg > g {
  transition: opacity 300ms ease;
}

.fiche__cadre {
  fill: var(--ivoire);
  stroke: var(--ardoise);
  stroke-opacity: 0.45;
  stroke-width: 1.2;
}

.fiche__ligne {
  stroke: var(--ardoise);
  stroke-opacity: 0.3;
  stroke-width: 3;
  stroke-linecap: round;
}

.fil {
  stroke: var(--or);
  stroke-width: 1.5;
}

.relation {
  fill: none;
  stroke: var(--bleu);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke-width 300ms ease, stroke-opacity 300ms ease;
}

.annot {
  stroke: var(--or);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.marque {
  fill: var(--or);
}

.marque--homonyme {
  fill: var(--blanc);
  stroke: var(--ardoise);
  stroke-width: 2;
}

.autorite {
  fill: var(--blanc);
  stroke: var(--or);
  stroke-width: 2;
}

.autorite__point {
  fill: var(--or);
}

.g-desamb {
  opacity: 0;
}

.desamb__lien {
  fill: none;
  stroke: var(--ardoise);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.desamb__signe {
  fill: var(--bleu);
  font-family: var(--serif);
  font-size: 18px;
}

/* Mise en évidence selon la méthode survolée */
.illu[data-focus] svg > g {
  opacity: 0.2;
}

.illu[data-focus="desamb"] :is(.g-fiches, .g-marques, .g-desamb),
.illu[data-focus="autorite"] :is(.g-fiches, .g-fils, .g-marques, .g-autorite),
.illu[data-focus="ontologie"] :is(.g-fiches, .g-relations),
.illu[data-focus="annotation"] :is(.g-fiches, .g-annot),
.illu[data-focus="tracabilite"] :is(.g-fiches, .g-fils, .g-marques, .g-autorite) {
  opacity: 1;
}

.illu[data-focus]:not([data-focus="desamb"]) .g-desamb {
  opacity: 0;
}

.illu[data-focus="ontologie"] .relation {
  stroke-opacity: 1;
  stroke-width: 2.5;
}

.illu[data-focus="tracabilite"] .fil {
  stroke-dasharray: 3 7;
  animation: flux 900ms linear infinite;
}

@keyframes flux {
  to { stroke-dashoffset: 10; }
}

/* Méthodes soulignées dans le texte, avec leur définition */
.terme {
  position: relative;
  cursor: help;
  background-image: linear-gradient(var(--or), var(--or));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 1px;
}

.terme:focus {
  outline: none;
}

.terme:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

/* La définition reste dans le texte pour les lecteurs d'écran (aria-describedby),
   mais n'est jamais affichée sur place : script.js la montre dans une case unique,
   posée au premier niveau de la page (évite les traces d'affichage sous Safari). */
.terme__def {
  display: none;
}

.infobulle {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px;
  background: var(--bleu);
  color: var(--ivoire);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.infobulle.is-visible {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 760px) {
  .probleme__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 32vw, 380px);
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
    max-width: calc(var(--large) + 2 * var(--gouttiere));
  }

  .probleme__texte {
    max-width: 640px;
  }

  .illu {
    margin: 0;
  }
}

/* Contact : le chemin part au-dessus de la question, la contourne par la droite
   et s'achève sur le point d'or, à côté du bouton « Copier l'adresse ».
   Le tracé est calculé par script.js d'après la position réelle des éléments. */
/* Contact : marges plus courtes que les autres sections, pour s'afficher avec le pied de page */
.section[data-section="contact"] {
  padding-block: clamp(44px, 5vw, 56px);
}

.contact-entete {
  position: relative;
  padding-top: 44px;
}

.contact-trace {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.contact-trace__chemin {
  fill: none;
  stroke: var(--bleu);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-trace__point {
  fill: var(--or);
}

/* Filet or sous certains titres de section, sur toute la largeur du titre */
.titre-filet {
  width: fit-content;
}

.titre-filet::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 14px;
  background: var(--or);
  transform-origin: left;
}

/* Pôles : au survol, le filet or se trace au-dessus du pôle et son point d'or s'affirme */
.pole {
  position: relative;
}

.pole::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.45, 0.05, 0.35, 1);
}

.pole__num::before {
  transition: transform 400ms cubic-bezier(0.34, 1.5, 0.64, 1);
}

.pole:hover::before {
  transform: scaleX(1);
}

.pole:hover .pole__num::before {
  transform: scale(1.5);
}

/* --------------------------------------------------------------------------
   Touches animées : décor uniquement (le texte ne bouge jamais), une seule fois,
   quand le bloc atteint le premier tiers de l'écran. Rien ne bouge si l'on a
   demandé moins d'animations : tout s'affiche directement dans son état final.
   -------------------------------------------------------------------------- */

.trace {
  stroke-dasharray: var(--l);
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html.js [data-anim]:not(.is-vu) .trace {
    stroke-dashoffset: var(--l);
  }

  html.js [data-anim]:not(.is-vu) .pop {
    transform: scale(0);
  }

  html.js .illu:not(.is-vu) .fiche {
    opacity: 0;
  }

  html.js .illu:not(.is-relie) .trace {
    stroke-dashoffset: var(--l);
  }

  html.js .illu:not(.is-relie) .pop {
    transform: scale(0);
  }

  html.js .methodes:not(.is-vu) .terme {
    background-size: 0% 2px;
  }

  .fiche {
    transition: opacity 500ms ease var(--d, 0ms);
  }

  .terme {
    transition: background-size 700ms cubic-bezier(0.45, 0.05, 0.35, 1) var(--d, 0ms);
  }

  html.js .titre-filet[data-anim]:not(.is-vu)::after {
    transform: scaleX(0);
  }

  html.js .exergue[data-anim]:not(.is-vu)::before {
    transform: scaleY(0);
  }

  .trace {
    transition: stroke-dashoffset 900ms cubic-bezier(0.45, 0.05, 0.35, 1) var(--d, 0ms);
  }

  .contact-trace__chemin {
    transition-duration: 3200ms;
  }


  .pop {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 500ms cubic-bezier(0.34, 1.5, 0.64, 1) var(--d, 0ms);
  }

  .titre-filet::after {
    transition: transform 1200ms cubic-bezier(0.45, 0.05, 0.35, 1) 200ms;
  }

  .exergue::before {
    transition: transform 1400ms cubic-bezier(0.45, 0.05, 0.35, 1) 150ms;
  }
}

/* --------------------------------------------------------------------------
   Contact : adresse e-mail et bouton « Copier l'adresse »
   -------------------------------------------------------------------------- */

.contact-direct {
  color: var(--ardoise);
}

.copier {
  margin-left: 4px;
  padding: 2px 10px;
  border: 1px solid var(--ardoise);
  border-radius: 0;
  background: none;
  color: var(--bleu);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.copier:hover {
  border-color: var(--or);
}

/* --------------------------------------------------------------------------
   Pied de page : fond Bleu Tradiant, logo version fond sombre (ivoire et or)
   -------------------------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 32px 20px;
  background: var(--bleu);
  color: var(--ivoire);
  font-size: 15px;
}

.site-footer > .wrap {
  width: 100%;
}

.site-footer a {
  color: var(--ivoire);
  text-decoration-color: var(--ivoire);
}

.site-footer a:hover {
  text-decoration-color: var(--or);
}

.site-footer :focus-visible {
  outline-color: var(--ivoire);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px 56px;
}

.site-footer__text {
  flex: 1 1 280px;
}

.site-footer__text p {
  margin-bottom: 4px;
}

.site-footer__legal {
  margin-bottom: 12px !important;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: bold;
}

.site-footer__adresse {
  margin-bottom: 16px;
  font-style: normal;
}


.site-footer__logo {
  flex: 0 0 auto;
  line-height: 0;
}

.logo--sombre {
  display: block;
  height: 190px;
  width: auto;
}

/* Filet or séparant les mentions légales */
.site-footer__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--or);
  font-size: 13px;
}

.site-footer__bas p {
  margin: 0;
}

/* Sur ordinateur, la hauteur du logo est ajustée par script.js (--logo-pied) pour que
   Contact et pied de page remplissent exactement l'écran ; 230 px sans script. */
@media (min-width: 760px) {
  .logo--sombre {
    height: var(--logo-pied, 230px);
  }
}

/* --------------------------------------------------------------------------
   Page des conditions d'utilisation
   -------------------------------------------------------------------------- */

.legal h1 {
  margin-bottom: 8px;
}

.legal__sous-titre {
  margin-bottom: 8px;
  color: var(--ardoise);
  font-family: var(--serif);
  font-size: 18px;
}

.legal__maj {
  color: var(--ardoise);
  font-size: 15px;
}

.legal h2 {
  margin: 48px 0 12px;
  font-size: 21px;
}

.legal dl {
  margin: 0 0 1em;
}

.legal dt {
  margin-top: 8px;
  font-weight: bold;
}

.legal dd {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Impression
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .skip-link,
  .filigrane,
  .copier,
  .retour-haut,
  .site-footer__logo {
    display: none !important;
  }

  body,
  .section,
  .site-footer {
    background: var(--blanc) !important;
    background-image: none !important;
    color: var(--encre) !important;
  }

  .site-footer a {
    color: var(--encre);
  }

  .section {
    padding-block: 24px;
  }

  a.externe::after {
    content: " (" attr(href) ")";
  }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}