/* Page « À propos », seconde version (2026-10-05).
   Aucune forme nouvelle : chaque element reprend une regle de la home.
   Filigrane = .force__eyebrow, titre = .force__titre (mots reveles comme
   .reveal-word), paragraphe = .force__lead, ligne manuscrite = .force__script,
   bandes et bloc final = module .force__suite de main.css, tel quel.
   Pas d'or sur le blanc : seule la fleche du lien le porte, comme sur la home. */

/* La barre suit la home : transparente sur l'ouverture, puis verre clair ou
   sombre selon la section empilee qui passe dessous (.stack-section, main.js). */

.apropos__cadre { max-width: var(--cadre-large); margin-inline: auto; padding-inline: var(--edge); min-width: 0; }

/* Ouverture : un ecran, comme le panneau de Force Commerciale */
.apropos__ouverture { position: sticky; top: 0; z-index: 0; background: var(--off-white); min-height: 100svh; display: flex; padding: 8rem 0 clamp(1.5rem, 4vh, 3.25rem); }
.apropos__ouverture .apropos__cadre { width: 100%; display: flex; flex-direction: column; }
.apropos__eyebrow {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(2.25rem, 1rem + 4.5vw, 5.5rem); line-height: 1;
  color: var(--ink);
}
.apropos__titre {
  margin: clamp(2rem, 1.4rem + 2.6vw, 4rem) 0 0; max-width: 72rem;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem); line-height: 1.14; letter-spacing: -0.01em;
}
.apropos__titre-part { display: block; }
.apropos__lead {
  margin: clamp(1.5rem, 1.1rem + 1.4vw, 2.75rem) 0 0; max-width: 56ch;
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem); line-height: 1.8; color: var(--ink-soft);
}
.apropos__script {
  margin: auto 0 0; padding-top: 2rem; align-self: flex-end; text-align: right;
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); color: var(--ink);
}
html[data-theme="dark"] .apropos__script {
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 50%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  padding-right: 0.35em;
}

/* Le mot du fondateur : la section .rise de la home, telle quelle (navy,
   coins arrondis, collee, filigrane a 5 %). La photo signe le mot, a cote
   de la ligne manuscrite : en haut, elle passait sous la barre une fois
   la section collee (05/10). */
.apropos__signature { display: flex; align-items: center; gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem); margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.apropos__signature .rise__script-echo { margin: 0; }
.apropos__portrait {
  display: block; flex: none; width: clamp(4.5rem, 4rem + 1.5vw, 5.75rem); height: auto;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35));
}
/* Le mot du fondateur prend l'ecran (demande d'Anthony, 05/10). Colle a top: -3rem (.rise),
   il lui faut 100svh + 3rem pour couvrir exactement la fenetre ; le contenu est centre dans ce
   qui reste sous la barre. (115vh, la hauteur de la home, le faisait coller trop haut.) */
/* `.rise` remonte la section de 3rem (top: -3rem) SANS que le flux suive : ce qui
   vient apres restait a sa place et laissait, pendant le defilement, une fenetre de
   48 px ouverte sur le titre de l'ouverture, qui est sticky juste derriere. Mesure du
   11/10 : 0 px de fuite a 1920x1080 (l'ecran de reference), 48 px a 1287x622 et a
   1366x768, 29 px a 360x740. La marge negative fait suivre le flux du meme montant :
   rien ne se deplace a l'ecran, la fenetre se ferme. */
.apropos__mot { min-height: calc(100svh + 3rem); margin-bottom: -3rem; display: flex; flex-direction: column; justify-content: center; }
.apropos__mot .rise__inner { width: 100%; padding-top: clamp(7rem, 5rem + 5vw, 10rem); padding-bottom: clamp(3rem, 2.5rem + 2vw, 4rem); }
.apropos__mot .rise__content { max-width: 62%; }
/* « 10 ans » est trois fois plus large que le « 0% » de la home : a la meme
   taille il sortait du cadre et perdait son « s ». Ancre a droite, taille
   bornee pour tenir en entier dans la section. */
.apropos__mot .rise__watermark { left: auto; right: var(--edge); top: clamp(5rem, 4rem + 4vw, 8rem); font-size: clamp(6rem, 2rem + 13vw, 17rem); transform: none; }
.apropos__mot h2 { max-width: 30ch; }
.apropos__mot .rise__lead { max-width: 42ch; }
.apropos__mot .rise__text { max-width: 52ch; line-height: 1.75; }
@media (max-width: 900px) { .apropos__mot .rise__content { max-width: 100%; } .apropos__signature { justify-content: center; } .apropos__mot .rise__watermark { right: auto; left: 50%; transform: translateX(-50%); font-size: clamp(5rem, 2rem + 14vw, 9rem); } }

/* La suite claire recouvre le navy, coins arrondis, comme .cards-rise. */
.apropos .force__suite { border-radius: 2.5rem 2.5rem 0 0; padding-top: clamp(4rem, 3rem + 4vw, 7rem); }
.apropos__equipe { position: relative; z-index: 2; background: var(--off-white); }

/* L'equipe */
.apropos__equipe { padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.apropos__equipe-titre {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem); line-height: 1.14; letter-spacing: -0.01em;
}
.apropos__membres {
  list-style: none; margin: clamp(2rem, 1.5rem + 2.5vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
}
.apropos__photo {
  aspect-ratio: 4 / 5; border-radius: 0.75rem; overflow: hidden; transform-origin: 50% 0;
  display: grid; place-items: center;
  background: rgba(11, 5, 47, 0.035); border: 1px solid var(--ink-faint);
}
.apropos__photo img { width: 28%; height: auto; opacity: 0.14; }
html[data-theme="dark"] .apropos__photo { background: rgba(252, 252, 252, 0.04); }
html[data-theme="dark"] .apropos__photo img { opacity: 0.22; }
/* EN ATTENDANT LES PHOTOS (05/10, Anthony) : une ligne manuscrite au-dessus du badge, propre a
   chacun. A retirer avec le <p class="apropos__attente"> quand la vraie photo arrive. */
.apropos__photo:has(.apropos__attente) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; }
.apropos__attente {
  margin: 0; padding: 0 12%; max-width: 18rem; text-align: center;
  font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); line-height: 1.2;
  color: var(--ink-soft); transform: rotate(-3deg);
}
html[data-theme="dark"] .apropos__attente { color: var(--gold-2); }
@media (max-width: 36rem) { .apropos__photo:has(.apropos__attente) { gap: 0.7rem; } .apropos__attente { padding: 0 8%; font-size: 0.95rem; } }
.apropos__nom { margin: 1rem 0 0.15rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.25; }
.apropos__role { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }
/* Le bloc final suit l'equipe dans le flux : rien ne passe par-dessus (05/10). */
.apropos__fin { position: relative; z-index: 2; background: var(--off-white); padding: 0 0 clamp(4rem, 3rem + 5vw, 8rem); }
.apropos__final { margin-top: 0; }

/* ── La carte de visite qui sort de l'etui ──
   La photo est l'etui : au survol (ou au toucher), une carte navy remonte
   par son bord bas, tiree un peu de travers puis redressee. Elle porte le
   site et le LinkedIn de chacun : ce sont des independants, le lien compte. */
.apropos__etui { position: relative; border-radius: 0.75rem; overflow: hidden; isolation: isolate; }
.apropos__photo { transition: transform 0.8s var(--ease-out-expo), filter 0.6s ease; }
.apropos__carte {
  position: absolute; left: 7%; right: 7%; bottom: 6%; z-index: 2;
  padding: 0.9rem 0.9rem 0.8rem; border-radius: 0.5rem;
  background: var(--navy); color: var(--text-on-dark);
  box-shadow: 0 18px 34px -12px rgba(11, 5, 47, 0.55), inset 0 0 0 1px rgba(196, 184, 118, 0.18);
  transform: translateY(calc(100% + 1.5rem)) rotate(5deg); transform-origin: 20% 100%;
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.84, 0);
}
.apropos__carte-tete { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.7rem; }
.apropos__carte-tete > div { min-width: 0; }
.apropos__carte-tete .apropos__carte-poste { margin-bottom: 0; }
/* Le rond du logo de chacun : vide tant que le logo n'est pas fourni, une <img> s'y loge telle quelle */
.apropos__carte-logo { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background: rgba(252, 252, 252, 0.06); box-shadow: inset 0 0 0 1px rgba(196, 184, 118, 0.35); }
.apropos__carte-logo img { width: 100%; height: 100%; object-fit: cover; }
.apropos__carte-nom { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.apropos__carte-poste { margin: 0.15rem 0 0.7rem; font-size: 0.8rem; color: rgba(252, 252, 252, 0.62); }
.apropos__carte-liens { list-style: none; margin: 0; padding: 0.65rem 0 0; border-top: 1px solid rgba(252, 252, 252, 0.14); display: grid; gap: 0.15rem; }
.apropos__carte-liens a {
  display: flex; align-items: center; gap: 0.55rem; min-height: 2.25rem;
  font-size: 0.875rem; font-weight: 600; color: var(--text-on-dark); border-radius: 0.35rem;
}
.apropos__carte-liens svg { width: 1rem; height: 1rem; flex: none; color: var(--gold-2); }
.apropos__carte-liens a::after { content: "\2197"; margin-left: auto; font-size: 0.8rem; color: rgba(252, 252, 252, 0.45); transition: transform 0.35s var(--ease-out-expo), color 0.3s ease; }
.apropos__carte-liens a:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.apropos__carte-liens a.is-a-venir { pointer-events: none; opacity: 0.45; }
@media (hover: hover) and (pointer: fine) {
  .apropos__carte-liens a:hover::after { transform: translate(2px, -2px); color: var(--gold-1); }
}
/* Ouverte : au survol de la carte entiere, au focus clavier, ou au toucher */
.apropos__membre:hover .apropos__carte,
.apropos__etui:focus-within .apropos__carte,
.apropos__etui.is-ouvert .apropos__carte {
  transform: translateY(0) rotate(-1.2deg);
  transition: transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.apropos__membre:hover .apropos__photo,
.apropos__etui:focus-within .apropos__photo,
.apropos__etui.is-ouvert .apropos__photo { transform: scale(0.97) translateY(-3%); filter: brightness(0.93); }
/* Au toucher, toute la photo est le bouton qui tire la carte */
.apropos__tirer { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: none; cursor: pointer; opacity: 0; }
@media (hover: hover) and (pointer: fine) { .apropos__tirer { display: none; } }
.apropos__tirer:focus-visible { opacity: 1; outline: 2px solid var(--gold-2); outline-offset: -4px; border-radius: 0.75rem; }
@media (max-width: 36rem) {
  .apropos__carte { padding: 0.7rem 0.7rem 0.6rem; left: 5%; right: 5%; }
  .apropos__carte-nom { font-size: 0.95rem; }
  .apropos__carte-poste { margin-bottom: 0.45rem; }
  /* Carte de 150 px a 360 px : rond reduit a cote du nom ; le poste, deja ecrit sous la photo, quitte la
     carte (« Responsable des operations » sur trois lignes faisait deborder la carte de la photo, des avant le rond) */
  .apropos__carte-tete { gap: 0.4rem; margin-bottom: 0.45rem; }
  .apropos__carte-tete .apropos__carte-poste { display: none; }
  .apropos__carte-logo { width: 1.5rem; height: 1.5rem; }
  .apropos__carte-liens a { font-size: 0.8rem; gap: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .apropos__carte, .apropos__membre:hover .apropos__carte, .apropos__etui:focus-within .apropos__carte, .apropos__etui.is-ouvert .apropos__carte { transition: none; }
  .apropos__photo { transition: none; }
}

/* Montees : l'etat de repos n'existe que si le script a pose son drapeau,
   comme le module des bandes. Sans script, tout reste lisible. */
.apropos.js-monte [data-monte] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease, transform 1.1s var(--ease-out-expo); }
.apropos.js-monte .apropos__membre[data-monte] { transition-delay: calc(var(--m, 0) * 0.08s); }
.apropos.js-monte [data-monte].is-in { opacity: 1; transform: none; }

@media (max-width: 62rem) { .apropos__membres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) {
  .apropos__ouverture { padding-top: 6.5rem; }
  .apropos__membres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .apropos__script { align-self: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .apropos.js-monte [data-monte] { opacity: 1; transform: none; transition: none; }
}

/* Le mot du fondateur reste colle derriere tout le bas de page : quand une
   limite entre deux sections claires tombe entre deux pixels, son navy
   transparait en filet. Chevauchement d un pixel. */
.apropos__equipe, .apropos__fin { margin-top: -1px; }

/* Butee sur telephone : pas de defilement doux au doigt, c est l accroche
   native du navigateur qui arrete la page sur le titre de l equipe. */
@media (hover: none) and (pointer: coarse) {
  html:has([data-butee]) { scroll-snap-type: y proximity; }
  [data-butee] { scroll-snap-align: start; scroll-margin-top: 6rem; }
}


/* Vers L'equipage (06/10) : sous les cartes de l'equipe. */
.apropos__recrute { margin: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem) 0 0; }