/* ============================================================
   Blue Spirit Aero — Team page extra sections
   (Reconnaissance & Affiliations split + Rejoignez l'équipe)
   Toutes les nouvelles règles vivent ici ; main.css n'est jamais modifié.
   Réutilise les tokens (:root) et classes (.ring-title, .btn, .logo-grid…) de main.css.
   ============================================================ */

/* ------------------------------------------------------------
   TASK A — Section Reconnaissance & Affiliations (deux colonnes)
   Colonne gauche : titre + sous-titre + grille de logos.
   Colonne droite : grande image qui file jusqu'au bord droit.
   ------------------------------------------------------------ */
.recognition-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  /* le bloc média doit toucher le bord droit de la page → on annule le padding
     droit de la section et on le reporte dans la colonne texte */
  padding-right: 0;
}

.recognition-copy {
  max-width: 620px;
}

.recognition-copy .ring-title {
  font-size: clamp(26px, 3.2vw, var(--fs-h1));
  margin: 0 0 clamp(24px, 3vh, 40px);
}

/* Logos disposés en 2 colonnes dans la moitié gauche (réutilise .logo-cell) */
.recognition-logos {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 6px;
}

/* La moitié droite : image plein cadre, flush au bord droit, haute */
.recognition-media {
  position: relative;
  align-self: stretch;
  min-height: min(80vh, 720px);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  overflow: hidden;
  background: linear-gradient(145deg, #0A0F1A 0%, var(--color-accent-dark) 100%);
}

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

/* Empilement sous 920px : texte au-dessus, image en dessous (hauteur plafonnée) */
@media (max-width: 920px) {
  .recognition-split {
    grid-template-columns: 1fr;
    /* on rétablit un padding droit symétrique une fois empilé */
    padding-right: var(--pad-x);
  }

  .recognition-copy {
    max-width: none;
  }

  .recognition-media {
    min-height: 0;
    height: clamp(240px, 48vw, 340px);
    border-radius: var(--radius-card);
  }
}

@media (max-width: 560px) {
  .recognition-logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------------------
   TASK B — Section « Rejoignez l'équipe » + formulaire candidature
   ------------------------------------------------------------ */
.join-team {
  display: grid;
  justify-items: center;
  text-align: center;
}

.join-team .ring-title {
  margin-bottom: .5em;
}

.join-intro {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--color-grey);
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vh, 44px);
}

.join-form {
  width: 100%;
  max-width: 720px;
  text-align: left;
  display: grid;
  gap: 18px;
}

/* Deux colonnes pour les champs courts, pleine largeur pour le reste */
.join-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 560px) {
  .join-row {
    grid-template-columns: 1fr;
  }
}

.join-field {
  display: grid;
  gap: 7px;
}

/* L'attribut hidden doit l'emporter sur le display:grid ci-dessus
   (sinon le champ « Autre (préciser) », masqué par défaut, resterait visible). */
.join-field[hidden] {
  display: none;
}

.join-field label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.join-field .req {
  color: #8FC7FF;
}

.join-field input,
.join-field textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.join-field textarea {
  min-height: 120px;
  resize: vertical;
}

.join-field input::placeholder,
.join-field textarea::placeholder {
  color: rgba(255, 255, 255, .45);
}

.join-field input:focus,
.join-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 3px rgba(19, 104, 191, .35);
}

/* ----- Menu déroulant « Poste visé » : même habillage que les champs texte ----- */
.join-field select {
  width: 100%;
  padding: 12px 44px 12px 16px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, .3);
  background-color: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark; /* liste déroulante native lisible sur fond sombre */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FC7FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.join-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 3px rgba(19, 104, 191, .35);
}

/* Grise le libellé tant qu'aucun domaine n'est choisi (classe posée par le JS) */
.join-field select.is-placeholder {
  color: rgba(255, 255, 255, .45);
}

/* La liste déroulante elle-même : fond sombre + texte clair, cohérent même
   si le navigateur ignore color-scheme (fallback robuste multi-navigateurs). */
.join-field select option,
.join-field select optgroup {
  background-color: #0e2036;
  color: #eaf1fb;
}

@media (hover: none) and (pointer: coarse) {
  .join-field select {
    font-size: 16px;
  }
}

/* ----- Compteur de caractères du message ----- */
.join-count {
  justify-self: end;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .5);
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}

.join-count.is-near {
  color: #FFC48F;
}

.join-count.is-max {
  color: #FF9F8F;
}

/* Tactile (iOS/Android) : police des champs ≥ 16px → empêche le zoom
   automatique au focus (et la vue qui reste bloquée en zoom au retour).
   Ciblé sur les écrans tactiles uniquement : le desktop garde var(--fs-body). */
@media (hover: none) and (pointer: coarse) {
  .join-field input,
  .join-field textarea {
    font-size: 16px;
  }
}

/* ----- Zone de dépôt du CV ----- */
.join-dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 130px;
  padding: 22px;
  text-align: center;
  border: 2px dashed rgba(255, 255, 255, .35);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.join-dropzone:hover {
  border-color: rgba(143, 199, 255, .7);
  background: rgba(19, 104, 191, .08);
}

.join-dropzone.is-dragover {
  border-color: var(--color-primary);
  border-style: solid;
  background: rgba(19, 104, 191, .16);
  box-shadow: 0 0 0 3px rgba(19, 104, 191, .35);
}

.join-dropzone:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(19, 104, 191, .35);
}

.join-dropzone .dz-icon {
  width: 34px;
  height: 34px;
  opacity: .75;
}

.join-dropzone .dz-text {
  font-size: var(--fs-body);
  line-height: 1.4;
  max-width: 420px;
}

.join-dropzone .dz-file {
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: .02em;
  color: #8FC7FF;
  word-break: break-all;
}

.join-dropzone .dz-file:empty {
  display: none;
}

/* l'input fichier natif couvre la zone (clic n'importe où) mais reste invisible */
.join-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.join-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.join-msg {
  width: 100%;
  min-height: 1.4em;
  margin: 6px 0 0;
  text-align: center;
  font-size: var(--fs-body);
  color: #8FC7FF;
}

.join-msg.is-error {
  color: #FF9B9B;
}

/* ------------------------------------------------------------
   Fond animé « grille + halos » bleu sur TOUTE la page Équipe
   Hôte fixe plein écran ; grid-glow.js y injecte le <canvas>.
   Le canvas hérite de [data-grid-glow] > .grid-glow-canvas (main.css) :
   position:absolute; inset:0; z-index:-1; opacity:.65.
   On force l'hôte en `fixed` (override de [data-grid-glow]{position:relative})
   et en z-index:-1 → derrière le contenu, devant le dégradé du body.
   ------------------------------------------------------------ */
.page-bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Panneau « Leadership » : fond blanc nettement transparent pour
   bien distinguer les boules animées qui dérivent en arrière-plan.
   Flou minimal : on garde les boules visibles tout en aidant un peu
   la lisibilité du texte.
   ------------------------------------------------------------ */
.team-panel.on-light {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

/* ------------------------------------------------------------
   Bio au survol d'un portrait : la description apparaît sur un
   voile blanc (alpha 50%) par-dessus la photo. Masquée par défaut,
   fondu à l'apparition. Accessible au clavier via :focus-within.
   ------------------------------------------------------------ */
.member-bio {
  position: absolute;
  inset: 0;
  z-index: 1;                 /* au-dessus de la photo, sous l'anneau (.photo-glow::before z-index:2) */
  margin: 0;
  display: grid;
  align-content: safe center; /* centré, mais bascule en haut si le texte déborde (jamais rogné) */
  gap: 0;
  padding: clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #0b0e13;
  /* Police NON condensée + taille/interligne confortables pour un vrai
     paragraphe (Roboto Condensed est trop étroit en lecture courante). */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(12.5px, 1.15vw, 14.5px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .005em;
  text-align: left;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;       /* ne capte pas la souris → pas de clignotement, le survol reste sur la photo */
}

/* Survol → seulement sur appareils à pointeur réel (desktop). Sur tactile,
   la bio s'ouvre au tap via .is-open (cf. bloc mobile plus bas). */
@media (hover: hover) {
  .member .media-shell:hover .member-bio,
  .member .media-shell:focus-within .member-bio {
    opacity: 1;
  }
}

/* ------------------------------------------------------------
   Bandeau d'en-tête : photo paysage de toute l'équipe, pleine
   largeur, juste sous le header, avant la présentation des personnes.
   Tant que le fichier n'existe pas, le placeholder (.media-shell)
   affiche le dégradé + le nom de fichier attendu.
   ------------------------------------------------------------ */
.team-banner {
  padding: 0;
  margin-top: var(--header-h);
}

.team-banner .media-shell {
  width: 100%;
  border-radius: 0;
  aspect-ratio: 16 / 5;
}

/* Zoom de +30% sur la photo du bandeau (recadrée par overflow:hidden du cadre). */
.team-banner .media-shell img {
  transform: scale(1.3);
}

@media (max-width: 700px) {
  /* Mobile : bandeau pleine largeur (edge-to-edge). Hauteur réduite de 40%
     par rapport au 16/10 précédent (16/10 → 16/6) sans toucher à la largeur. */
  .team-banner .media-shell {
    aspect-ratio: 16 / 6;
  }
}

/* ------------------------------------------------------------
   Effet « glow » bleu qui suit le curseur sur le contour des
   photos (même principe que les boutons .glow-btn, adapté aux
   conteneurs en overflow:hidden : l'anneau est tracé à
   l'intérieur, inset:0, donc jamais rogné).
   --gx / --gy sont mis à jour en px par main.js (pointermove).
   ------------------------------------------------------------ */
.photo-glow {
  --gx: 50%;
  --gy: 50%;
  --glow: .28;            /* intensité au repos ; 1 au survol */
}

.photo-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;          /* épaisseur de l'anneau */
  background: radial-gradient(150px 150px at var(--gx) var(--gy),
      #38b6ff 0%, #1b8cff 28%, #2f6bff 48%, transparent 72%);
  -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;   /* ne garde que la bordure */
  opacity: var(--glow);
  transition: opacity .3s;
  pointer-events: none;
  z-index: 2;                /* au-dessus de l'image */
}

.photo-glow:hover {
  --glow: 1;
}

@media (prefers-reduced-motion: reduce) {
  .photo-glow::before,
  .team-grid .member,
  .team-grid .member .media-shell,
  .team-grid .member .member-bio,
  .team-grid .member::after {
    transition: none;
  }

  .team-grid .member .member-bio {
    transform: none;
  }
}

/* ============================================================
   MOBILE — refonte de l'annuaire équipe (≤ 700px)
   Objectif : compact et moderne. Les portraits passent en grille
   2 colonnes ; un tap ouvre la fiche en pleine largeur et révèle la
   bio (le survol n'existe pas au doigt). Badge « + » → « × » pour
   signaler l'interaction.
   ============================================================ */
@media (max-width: 700px) {
  /* Panneau : padding réduit → plus de largeur utile pour les cartes */
  .team-panel {
    padding: 18px 14px;
  }

  /* Grille compacte 2 colonnes — en FLEX (et non grid) pour que la largeur
     d'une carte soit ANIMABLE : à l'ouverture elle s'élargit de 50% → 100%
     en ease-out, ce qui pousse en douceur les cartes du dessous. */
  .team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
  }

  /* Carte membre : 2 par ligne (50% - moitié du gap), tappable, ancre du badge.
     La transition de width réalise l'extension douce. */
  .team-grid .member {
    width: calc(50% - 6px);
    position: relative;
    gap: 7px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: width .42s cubic-bezier(.22, .61, .36, 1);
  }

  .team-grid .member .media-shell {
    border-radius: 16px;
    /* La hauteur de la photo suit l'aspect-ratio, animé en douceur pendant
       que la carte s'élargit (et se replie). */
    transition: aspect-ratio .42s cubic-bezier(.22, .61, .36, 1);
  }

  .team-grid .member .name {
    font-size: 15px;
    line-height: 1.2;
  }

  .team-grid .member .role {
    font-size: 11.5px;
    line-height: 1.25;
  }

  /* Badge d'affordance « + » en coin de la photo */
  .team-grid .member::after {
    content: "+";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(11, 14, 19, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    z-index: 3;                 /* au-dessus de l'anneau (2) et de la bio (1) */
    pointer-events: none;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), background .4s ease;
  }

  /* Bio : glisse légèrement vers le haut en apparaissant (plus doux qu'un
     simple fondu net). */
  .team-grid .member .member-bio {
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
  }

  /* Carte ouverte : pleine largeur (la width s'anime de 50% → 100%) + photo
     un peu plus haute (mais ~30% moins qu'avant) + bio visible */
  .team-grid .member.is-open {
    width: 100%;
  }

  .team-grid .member.is-open .media-shell {
    aspect-ratio: 1.9 / 1;   /* ~30% moins haut que l'ancien 4/3 */
  }

  .team-grid .member.is-open .member-bio {
    opacity: 1;
    transform: translateY(0);
  }

  .team-grid .member.is-open::after {
    content: "+";              /* tourné à 45° → forme une croix « × » */
    transform: rotate(45deg);
    background: var(--color-primary);
  }
}