/* Variante I, bloc b (26/09/2026) — la page de liens réorganisée, sans rien changer au style (couleurs,
   polices, logos, fond et voile) : seulement l'ordre, les espacements et la fenêtre du formulaire.
   Téléphone et tablette : une colonne — identité compacte, réseaux, encart, poste de secours, mentions.
   Ordinateur (≥ 1 024 px) : à gauche l'identité et « Nous écrire », fixes ; à droite réseaux, encart, poste. */

.page-liens { display: flex; flex-direction: column; }
.page-liens .gauche { display: contents; }
.page-liens .profil { order: 1; }
.page-liens .actions-liens { order: 1; display: none; }    /* même rang que l'identité (juste après elle) ; sur petit écran, le bouton de l'encart suffit */
.page-liens .colonne { order: 2; display: grid; gap: 18px; margin-top: 22px; }
.page-liens .pied { order: 3; }

/* Réseaux en cartes compactes, en tête de la colonne. */
/* Présents dès le premier affichage (retour d'Arnaud du 26/09) : ni cascade ni délai, 150 ms au plus ; rien
   quand l'appareil demande moins d'animations (H.css coupe alors toute animation). */
.page-liens .corps, .page-liens .reseau-item { animation-delay: 0s !important; animation-duration: 150ms !important; }
.page-liens .corps { padding: 18px 16px 16px; }
.page-liens .reseaux { margin-top: 0; }
.page-liens .reseaux-titre { margin: 0 0 10px 4px; }
.page-liens .liste-reseaux { gap: 8px; }
.page-liens .reseau { min-height: 56px; padding: 8px 14px; gap: 12px; }
.page-liens .reseau-logo { width: 32px; height: 32px; }
.page-liens .reseau-logo img { width: 26px; height: 26px; }
.page-liens .reseau-nom { font-size: 16px; }
.page-liens .reseau-action { font-size: 13px; }

/* L'encart « Envie de nous rejoindre ? » garde le bloc en verre ; un seul bouton. */
.page-liens .immersion { padding: 24px 22px 22px; }
.page-liens .immersion .bouton-bloc { margin-top: 18px; }

/* « Venez découvrir » : trois étapes à la place des trois badges, avec les pastilles en verre existantes. */
.etapes-decouverte { display: grid; gap: 10px; margin-top: 16px; padding: 0; list-style: none; }
.etapes-decouverte li { display: flex; align-items: flex-start; gap: 12px; }
/* Verre sombre, pas clair : un voile blanc éclaircit la photo sous le chiffre (4,48:1 mesuré sur photo-14). */
.etape-numero { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: rgba(5, 13, 26, .45); border: 1px solid var(--verre-reflet); color: var(--sur-nuit); font-family: var(--police-titre); font-weight: 500; font-size: 14px; }
.etape-texte { display: flex; flex-direction: column; padding-top: 3px; font-size: 14px; line-height: 1.45; color: var(--sur-nuit-2); }
.etape-texte strong { font-weight: 500; color: var(--sur-nuit); }

/* Le nom ne se coupe qu'après « FFSS » (« Strasbourg OUEST » insécable, jamais « OUEST » seul). */
.nom-suite { white-space: nowrap; }

/* « Vous organisez un événement ? » : une seule ligne cliquable. */
/* Un texte continu (question discrète, action en gras) qui se replie comme une phrase ; la flèche à droite. */
.ligne-dps { display: block; width: 100%; min-height: 56px; padding: 15px 52px 15px 20px; text-align: left; font-size: 14px; line-height: 1.45; }
.ligne-dps-question { font-weight: 400; color: var(--sur-nuit-2); }
.ligne-dps-action { font-weight: 600; }
.ligne-dps .icone { position: absolute; right: 20px; top: 50%; margin-top: -9px; }

/* Identité compacte sur petit écran : les réseaux arrivent dans le premier écran. */
@media (max-width: 1023px) {
  .page-liens { padding-top: 26px; }
  .page-liens .ecusson img { height: 76px; }
  .page-liens .federation img { height: 79px; }
  .page-liens .emblemes-separateur { height: 52px; }
  .page-liens h1 { margin-top: 14px; }
  .page-liens .filet { margin-top: 10px; }
  .page-liens .sous-titre { margin-top: 10px; font-size: 14px; }
  .page-liens .etiquette { margin-top: 12px; }
}

/* Ordinateur : deux colonnes, la gauche reste en place pendant le défilement. */
@media (min-width: 1024px) {
  .page.page-liens { display: grid; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); grid-template-rows: auto; column-gap: 56px; align-items: start; padding: 44px 0 44px; }
  .page-liens .gauche { position: sticky; top: 44px; display: flex; flex-direction: column; max-height: calc(100vh - 44px); overflow-y: auto; grid-column: 1; grid-row: 1; }
  .page-liens .actions-liens { display: grid; margin-top: 26px; }
  .page-liens .colonne { grid-column: 2; grid-row: 1; margin-top: 0; gap: 18px; }
  .page-liens .pied { margin-top: 24px; }
  .page-liens .corps { padding: 20px 22px 20px; }
  .page-liens .liste-reseaux { grid-template-columns: 1fr 1fr; }
  .page-liens .immersion { padding: 26px 30px 24px; }
  .etapes-decouverte { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  /* Le nom sur une seule ligne : taille fluide bornée par la largeur de la colonne (12,6 : largeur du nom pour
     1 px de police, mesurée à 12,4, plus une marge), 34 px au plus comme dans H. */
  .page-liens .gauche { container-type: inline-size; }
  .page-liens h1 { white-space: nowrap; font-size: min(34px, calc(100cqi / 12.6)); }
}

/* Le formulaire : fenêtre centrée, compacte ; plein écran sur téléphone. */
.fenetre-liens h2 { margin-top: 0; }
.formulaire-compact { gap: 12px; margin-top: 16px; }
.formulaire-compact .champ { gap: 4px; }
.formulaire-compact .champ-duo { gap: 12px; }
/* Téléphone sur une demi-ligne ; « Je souhaite » sur toute la largeur, pour que son libellé le plus long se lise. */
@media (min-width: 600px) { .formulaire-compact .champ-telephone { grid-template-columns: 1fr 1fr; } }
.formulaire-compact .champ input, .formulaire-compact .champ select { min-height: 44px; padding: 9px 12px; }
.formulaire-compact .champ textarea { min-height: 0; padding: 9px 12px; }
.boite-rgpd { font-size: 12px; line-height: 1.5; color: var(--encre-3); }
.fenetre-succes:focus { outline: none; }
.succes-titre { font-family: var(--police-titre); font-weight: 500; font-size: clamp(23px, 5.8vw, 28px); line-height: 1.2; color: var(--nuit); }
.fenetre-liens .bouton-envoi:disabled { opacity: .6; cursor: progress; transform: none; }
@media (max-width: 599px) {
  .fenetre-liens { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .fenetre-liens .fenetre-panneau { min-height: 100%; }
}