/* Page « Nous connaître » (maquette du 15/10/2026, plan de Florian : photos à fournir, sans la méthode O-S-A-R-K). */
.nous { padding: 0 clamp(20px, 5vw, 72px) clamp(40px, 6vw, 72px); max-width: 1200px; margin: 0 auto; }
.nous-haut { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-top: clamp(32px, 6vw, 72px); }
.nous-haut h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.nous-haut__chapo { margin: 16px 0 24px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--texte-doux); line-height: 1.5; max-width: 34em; }
.photo-a-fournir { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; border: 2px dashed rgba(247, 246, 243, .25); background: rgba(16, 35, 58, .6); color: var(--texte-doux); text-align: center; font-size: .9rem; }
.photo-a-fournir--grande { aspect-ratio: 4 / 3; border-radius: 18px; font-size: 1rem; }
.nous-bloc { margin-top: clamp(48px, 7vw, 88px); }
.nous-bloc h2, .nous-fin h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.nous-bloc__intro { margin-top: 10px; color: var(--texte-doux); font-size: 1.1rem; }
.associes { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
.associe { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; border-radius: 16px; background: var(--fond-2); box-shadow: 0 0 0 1px var(--trait); }
.associe h3 { font-size: 1.3rem; font-weight: 800; }
.associe__role { color: var(--sarcelle); font-weight: 600; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; margin: 2px 0 8px; }
.associe p { line-height: 1.5; }
.a-completer { color: var(--texte-doux); font-style: italic; }
.raisons { list-style: none; padding: 0; margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px); counter-reset: r; }
.raisons li { counter-increment: r; padding: 22px; border-radius: 16px; background: var(--fond-2); box-shadow: 0 0 0 1px var(--trait); }
.raisons li::before { content: "0" counter(r); display: block; color: var(--sarcelle); font-weight: 800; font-size: 1.1rem; margin-bottom: 8px; }
.raisons h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.raisons p { margin-top: 8px; color: var(--texte-doux); line-height: 1.55; }
.vignettes { list-style: none; padding: 0; margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.vignette { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--texte); border-radius: 14px; overflow: hidden; background: var(--fond-2); box-shadow: 0 0 0 1px var(--trait); transition: transform .2s, box-shadow .2s; }
.vignette:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--sarcelle), 0 18px 36px -16px rgba(0, 0, 0, .7); }
.vignette img, .vignette__vide { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.vignette__vide { display: grid; place-items: center; background: #1b2b3d; color: var(--texte-doux); font-size: .9rem; }
.vignette__nom { padding: 14px 16px 0; font-weight: 800; font-size: 1.1rem; }
.vignette__texte { padding: 6px 16px 16px; color: var(--texte-doux); font-size: .95rem; line-height: 1.45; }
.nous-comment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: center; }
.nous-comment p { margin-top: 14px; color: var(--texte-doux); line-height: 1.6; font-size: 1.05rem; }
.preuve-jc { display: block; text-decoration: none; color: var(--texte); border-radius: 14px; overflow: hidden; background: var(--fond-2); box-shadow: 0 0 0 1px var(--trait), 0 24px 50px -20px rgba(0, 0, 0, .7); transition: box-shadow .2s; }
.preuve-jc:hover { box-shadow: 0 0 0 2px var(--sarcelle), 0 24px 50px -20px rgba(0, 0, 0, .7); }
.preuve-jc img { display: block; width: 100%; height: auto; }
.preuve-jc span { display: block; padding: 14px 16px; line-height: 1.5; }
.preuve-jc em { font-style: normal; color: var(--sarcelle); font-weight: 600; }
.reperes { margin-top: clamp(40px, 6vw, 64px); text-align: center; color: var(--texte-doux); letter-spacing: .08em; font-size: .9rem; }
.nous-fin { margin-top: 24px; text-align: center; padding: clamp(28px, 4vw, 44px); border-radius: 18px; background: var(--fond-2); box-shadow: 0 0 0 1px var(--trait); }
.nous-fin p { margin: 12px 0 20px; font-size: 1.1rem; }
.nous-fin p a { color: var(--texte); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 960px) { .vignettes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .raisons { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .nous-haut, .nous-comment, .associes { grid-template-columns: 1fr; }
  .associe { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (max-width: 480px) { .vignettes:not(.vignettes--mini) { grid-template-columns: 1fr; } }

/* Mini-vignettes (Florian, 15/10 : moins de place, moins de répétition avec l'accueil). */
.vignettes--mini { grid-template-columns: repeat(4, minmax(0, 200px)); gap: 14px; margin-top: 18px; }
.vignettes--mini .vignette { border-radius: 10px; }
.vignettes--mini .vignette__nom { padding: 8px 10px 10px; font-size: .92rem; }
.vignettes--mini .vignette__vide { font-size: .8rem; }

/* La méthode O-S-A-R-K remise (Florian, 15/10), animée comme sur la page en ligne (script de la page). */
.methode { margin-top: clamp(48px, 7vw, 88px); overflow-x: clip; }
.methode__tete { text-align: center; }
.methode__tete .lieu { justify-content: center; }
.methode__tete h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 600; max-width: 36em; margin: 0 auto; }
.methode__liste { list-style: none; padding: 0; margin: clamp(18px, 3vw, 28px) 0 0; }
.methode__liste li { display: grid; grid-template-columns: clamp(3.5rem, 10vw, 7rem) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(.6rem, 1.6vh, 1.1rem); border-top: 1px solid rgba(255, 255, 255, .10); }
.methode__liste li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .10); }
.methode__lettre { font-weight: 800; font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: .85; color: var(--sarcelle); text-align: center;
  text-shadow: 0 0 40px rgba(58, 188, 184, .22); animation: respire 4.2s ease-in-out infinite; }
.methode__liste li:nth-child(2) .methode__lettre { animation-delay: .42s; }
.methode__liste li:nth-child(3) .methode__lettre { animation-delay: .84s; }
.methode__liste li:nth-child(4) .methode__lettre { animation-delay: 1.26s; }
.methode__liste li:nth-child(5) .methode__lettre { animation-delay: 1.68s; }
@keyframes respire { 0%, 100% { transform: scale(1); } 42% { transform: scale(1.16); } }
.methode__cle { display: inline-block; font-size: clamp(1.15rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; }
.methode__def { margin-top: .2rem; color: var(--texte-doux); font-size: clamp(.95rem, 1.6vw, 1.12rem); line-height: 1.45; }
.methode__def .mot { display: inline-block; }
.methode__fin { display: flex; flex-direction: column; align-items: center; gap: clamp(.6rem, 1.6vw, 1.1rem); padding-block: clamp(36px, 6vw, 64px) 0; }
.methode__fin img { width: clamp(110px, 16vw, 220px); height: auto; }
.methode__mot { display: flex; gap: clamp(.5rem, 3vw, 2rem); line-height: 1; }
.methode__mot span { display: inline-block; font-weight: 800; font-size: clamp(2.6rem, 10vw, 7.5rem); color: var(--sarcelle); text-shadow: 0 0 50px rgba(58, 188, 184, .35); }
.methode__signature { font-style: italic; font-size: clamp(1rem, 2vw, 1.4rem); color: var(--texte-doux); text-align: center; }
@media (prefers-reduced-motion: reduce) { .methode__lettre { animation: none; } }
@media (max-width: 760px) { .vignettes--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.associe__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 1px var(--trait); }
.nous-haut--seul { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.associe__initiales { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: var(--fond); box-shadow: 0 0 0 1px var(--trait); color: var(--sarcelle); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: .04em; }

/* « Pourquoi Osark existe » en mot signé, sans cartes (Florian, 15/10 : moins « IA »). */
.mot-associes { max-width: 720px; }
.mot-associes__texte { margin-top: 18px; }
.mot-associes__texte p { font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.65; color: var(--texte); }
.mot-associes__texte p + p { margin-top: 14px; }
.mot-associes__signature { margin-top: 22px; display: flex; align-items: center; gap: 0; font-weight: 700; font-style: italic; color: var(--texte-doux); }
.mot-associes__signature img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--fond), 0 0 0 3px var(--trait); }
.mot-associes__signature img + img { margin-left: -10px; }
.mot-associes__signature span { margin-left: 14px; }
.nous-fin__delai { margin: 8px 0 0 !important; color: var(--sarcelle); font-weight: 700; font-size: 1rem !important; }
.methode__fin { padding-block: clamp(20px, 3vw, 32px) 0; }
/* Le cadre de fin ne fait plus « aplat » (Florian, 15/10) : verre légèrement transparent qui laisse voir les points du fond, avec les halos sarcelle et bleu du site. */
.nous-fin { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(58, 188, 184, .22), rgba(58, 188, 184, 0) 70%),
    radial-gradient(55% 80% at 92% 100%, rgba(66, 120, 220, .22), rgba(66, 120, 220, 0) 70%),
    rgba(16, 35, 58, .3);

  box-shadow: 0 0 0 1px rgba(58, 188, 184, .22), 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
/* Même verre que le cadre de fin pour les cartes des associés (Florian, 15/10). Halo sarcelle pour Flo, bleu pour Ozzie. */
.associe { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 120% at 0% 0%, rgba(58, 188, 184, .20), rgba(58, 188, 184, 0) 70%), rgba(16, 35, 58, .3);
  box-shadow: 0 0 0 1px rgba(58, 188, 184, .22), 0 24px 50px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
.associe + .associe { background: radial-gradient(70% 120% at 100% 100%, rgba(66, 120, 220, .22), rgba(66, 120, 220, 0) 70%), rgba(16, 35, 58, .3); }

/* Vignette Osark Système (retour T3, 15/10) : logo de l'app et nom, comme la vignette Service, en sarcelle sur nuit. */
.vignette__marque { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; width: 100%; aspect-ratio: 16 / 10; }
.vignette__marque--systeme { background: radial-gradient(90% 90% at 50% 30%, #12383d 0%, #08141f 75%); }
.vignette .vignette__marque img { width: 46%; height: auto; aspect-ratio: auto; object-fit: contain; }
.vignette__marque span { font-weight: 800; letter-spacing: .06em; color: #3abcb8; font-size: clamp(.7rem, 1.4vw, 1.05rem); }