/* ═══════════════════════════════════════════════════════════════════════════
   STAR-PIGEONS — Compte commun
   Feuille de style des écrans d'identification.

   Les couleurs ne sont PAS choisies ici : elles descendent de PHP
   (SP_Brand::css_vars(), qui reprend la palette du Studio). Modifier
   l'identité se fait donc en un seul endroit, et les trois produits restent
   assortis.

   Parti pris : crème, vert, or. Beaucoup d'air, des filets très fins, des
   ombres qu'on devine plus qu'on ne les voit. Pas de dégradé, pas de thème
   sombre, pas d'effet. Mobile d'abord — c'est là que la majorité des
   clients ouvriront ces pages.
   ═══════════════════════════════════════════════════════════════════════════ */

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

html { -webkit-text-size-adjust: 100%; }

body.spl {
  margin: 0;
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font-family: 'SPL Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }

/* ── Mise en page ────────────────────────────────────────────────────────
   Une seule colonne étroite, centrée, avec de la marge partout. La page ne
   « remplit » pas l'écran : c'est ce vide qui fait la différence entre un
   formulaire administratif et un service qu'on paie. */
.spl-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) 20px 48px;
  padding-bottom: max(48px, env(safe-area-inset-bottom));
}
.spl-col { max-width: 460px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════
   LA COMPOSITION DES DEUX MARQUES
   ═══════════════════════════════════════════════════════════ */

.spl-lockup { margin: 0 0 clamp(26px, 5vw, 40px); }

.spl-lockup__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 34px);
}

/* Chaque marque occupe une colonne de MÊME largeur : c'est ce qui fait
   qu'aucune des deux ne domine l'autre, quelles que soient les proportions
   respectives des deux fichiers. */
.spl-mark {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  min-width: 0;
  transition: opacity .18s ease;
}
.spl-mark:hover { opacity: .8; text-decoration: none; }
.spl-mark--spm    { justify-content: flex-end; }
.spl-mark--studio { justify-content: flex-start; }
.spl-mark img {
  /* Une SEULE dimension imposée — la hauteur. La largeur suit le rapport du
     fichier, donc aucun des deux logos ne peut se déformer. */
  height: clamp(42px, 8vw, 58px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ⚠ La même hauteur ne donne PAS le même poids visuel.
   Les deux logos officiels n'ont pas la même forme : celui du Studio est une
   plaque large (rapport 2,21 depuis la plaque crème de 11.35.0 ; 2,06 avant —
   7 % de largeur en moins, l'équilibre ci-dessous tient sans retouche),
   celui du Manager un bloc presque carré
   (rapport 1,29) dont le nom est empilé sous l'emblème. Posés à 58 px tous
   les deux, le Manager paraît deux fois plus petit et son texte devient
   illisible — c'est exactement ce que montrait la première capture.
   On égalise donc la surface optique (√largeur×hauteur) plutôt que la
   hauteur : le Manager reçoit 1,26 fois la hauteur du Studio. Les deux
   pèsent alors le même poids dans la composition, sans qu'aucun soit
   déformé. */
.spl-mark--spm img { height: clamp(53px, 10.1vw, 73px); }
.spl-lockup--solo .spl-mark { flex: 0 1 auto; justify-content: center; }

/* Le filet qui sépare : très fin, dégradé aux extrémités pour qu'il ne
   « coupe » pas la composition, et un losange doré en son milieu. */
.spl-lockup__sep {
  flex: 0 0 1px;
  align-self: stretch;
  min-height: 62px;
  position: relative;
  background: linear-gradient(to bottom,
      transparent, var(--gold-line) 22%, var(--gold-line) 78%, transparent);
}
.spl-lockup__gem {
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--gold);
  transform: rotate(45deg);
  border-radius: 1px;
}

.spl-lockup__claim {
  margin: 18px 0 0;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-d);
}

/* Sous 620 px, le filet bascule et les marques s'empilent : mieux vaut deux
   lignes lisibles que deux logos réduits de moitié. */
@media (max-width: 620px) {
  .spl-lockup__row { flex-direction: column; gap: 16px; }
  .spl-mark, .spl-mark--spm, .spl-mark--studio { justify-content: center; flex: 0 1 auto; }
  .spl-mark img { height: clamp(38px, 11vw, 50px); }
  .spl-mark--spm img { height: clamp(48px, 13.9vw, 63px); }
  .spl-lockup__sep {
    flex: 0 0 1px;
    align-self: center;
    width: 130px; min-height: 1px; height: 1px;
    background: linear-gradient(to right,
        transparent, var(--gold-line) 22%, var(--gold-line) 78%, transparent);
  }
  .spl-lockup__claim { margin-top: 14px; font-size: .72rem; letter-spacing: .12em; }
}

/* ═══════════════════════════════════════════════════════════
   LA CARTE
   ═══════════════════════════════════════════════════════════ */

.spl-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(26px, 5.5vw, 40px);
  /* Deux ombres très faibles plutôt qu'une forte : la première pose la carte
     sur le fond, la seconde lui donne une épaisseur. Au-delà, on tombe dans
     le relief des années 2010. */
  box-shadow: 0 1px 2px rgba(46, 39, 24, .04), 0 8px 26px -12px rgba(46, 39, 24, .10);
}
.spl-card--center { text-align: center; }

.spl-h1 {
  font-family: 'SPL Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4.6vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -.012em;
  margin: 0 0 .45em;
  color: var(--ink);
}
.spl-sub   { margin: 0 0 26px; color: var(--ink2); font-size: .98rem; }
.spl-body  { margin: 0 0 14px; color: var(--ink2); }
.spl-body--muted { color: var(--ink3); font-size: .93rem; }
.spl-legend {
  margin: 18px 0 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink3);
}
.spl-legend--center { text-align: center; }
.spl-mailto {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════
   FORMULAIRE
   ═══════════════════════════════════════════════════════════ */

.spl-form { margin: 0; }
.spl-field { margin: 0 0 18px; }
.spl-field--tight { margin-bottom: 14px; text-align: left; }

.spl-field label {
  display: block;
  margin: 0 0 7px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink2);
}

.spl-field input[type=text],
.spl-field input[type=email],
.spl-field input[type=password] {
  width: 100%;
  padding: 13px 14px;
  /* 16 px minimum : en dessous, iOS zoome à la mise au point et le formulaire
     saute hors de l'écran. C'est la règle la moins connue et la plus visible. */
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.spl-field input:hover { border-color: var(--gold-line); }
.spl-field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(20, 97, 78, .12);
}
.spl-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; }

.spl-hint { margin: 7px 0 0; font-size: .8rem; color: var(--ink3); }

/* Deux champs côte à côte, une seule colonne sur téléphone. */
.spl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 480px) { .spl-duo { grid-template-columns: 1fr; } }

/* Le champ « mot de passe » et son œil. */
.spl-reveal { position: relative; }
.spl-reveal input { padding-right: 46px; }
.spl-eye {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px;
  color: var(--ink3);
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.spl-eye:hover { color: var(--green); background: var(--gold-p); }
.spl-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.spl-eye[aria-pressed=true] svg { stroke-width: 2; color: var(--green); }

/* Jauge de robustesse — informative, jamais bloquante. */
.spl-meter { height: 3px; margin-top: 8px; background: var(--cream3); border-radius: 999px; overflow: hidden; }
.spl-meter span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s ease, background .25s ease; }
.spl-meter[data-level="1"] span { width: 33%;  background: var(--red); }
.spl-meter[data-level="2"] span { width: 66%;  background: var(--gold); }
.spl-meter[data-level="3"] span { width: 100%; background: var(--green2); }

.spl-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px;
}
.spl-check { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--ink2); cursor: pointer; }
.spl-check--block { margin: 4px 0 22px; text-align: left; }
.spl-check input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--green); flex: 0 0 auto; }
.spl-link { font-size: .88rem; color: var(--green); }

/* ═══════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════ */

.spl-btn {
  display: block;
  width: 100%;
  padding: 14px 22px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .1s ease;
}
.spl-btn:hover { text-decoration: none; }
.spl-btn:active { transform: translateY(1px); }
.spl-btn + .spl-btn { margin-top: 10px; }

.spl-btn--primary { background: var(--green); color: #fff; }
.spl-btn--primary:hover { background: var(--green2); color: #fff; }

.spl-btn--outline { background: transparent; color: var(--green); border-color: var(--gold-line); }
.spl-btn--outline:hover { background: var(--gold-p); border-color: var(--gold); color: var(--green); }

.spl-btn--ghost {
  background: #fff; color: var(--green);
  border-color: var(--line);
  padding: 11px 18px; font-size: .92rem;
}
.spl-btn--ghost:hover { border-color: var(--green); }

.spl-actions { display: grid; gap: 10px; margin: 22px 0 0; text-align: left; }

/* Le séparateur « ou ». */
.spl-or {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 18px;
  color: var(--ink3); font-size: .8rem;
}
.spl-or::before, .spl-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.spl-switch { margin: 0 0 12px; text-align: center; color: var(--ink2); font-size: .93rem; }

/* ═══════════════════════════════════════════════════════════
   MESSAGES
   ═══════════════════════════════════════════════════════════ */

.spl-note {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid;
  border-radius: 12px;
  font-size: .92rem;
  line-height: 1.55;
}
.spl-note__icon {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .74rem; font-weight: 700;
  color: #fff;
}
.spl-note--ok  { background: #F0F7F4; border-color: var(--green-p); color: #14493C; }
.spl-note--ok  .spl-note__icon { background: var(--green2); }
.spl-note--err { background: var(--red-p); border-color: #E9C7BF; color: #7A2617; }
.spl-note--err .spl-note__icon { background: var(--red); }

/* L'encart « adresse non confirmée » : il porte une action, donc il a droit
   à plus de place qu'un simple message. */
.spl-alert {
  margin: 0 0 24px;
  padding: 18px 20px;
  background: var(--gold-p);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  text-align: left;
}
.spl-alert__title { margin: 0 0 6px; font-weight: 700; color: var(--ink); font-size: .96rem; }
.spl-alert__text  { margin: 0 0 14px; font-size: .89rem; line-height: 1.55; color: var(--ink2); }

/* ═══════════════════════════════════════════════════════════
   PICTOGRAMMES
   ═══════════════════════════════════════════════════════════ */

.spl-icon {
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 50%;
}
.spl-icon svg { width: 28px; height: 28px; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.spl-icon--mail { background: var(--gold-p); border: 1px solid var(--gold-line); }
.spl-icon--mail svg { stroke: var(--gold-d); }
.spl-icon--ok   { background: #EAF4F0; border: 1px solid var(--green-p); }
.spl-icon--ok   svg { stroke: var(--green); stroke-width: 2.4; }
.spl-icon--warn { background: var(--red-p); border: 1px solid #E9C7BF; }
.spl-icon--warn svg { stroke: var(--red); }

/* ═══════════════════════════════════════════════════════════
   LES DEUX PORTES (écran de confirmation)
   ═══════════════════════════════════════════════════════════ */

.spl-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 720px;
  margin: 20px auto 0;
}
.spl-door {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(46, 39, 24, .04);
}
.spl-door__logo { height: 46px; width: auto; max-width: 100%; margin: 0 auto 16px; object-fit: contain; }
/* Même correction d'équilibre optique que dans la composition d'en-tête. */
.spl-door--spm .spl-door__logo { height: 58px; }
.spl-door__name { font-family: 'SPL Display', Georgia, serif; font-weight: 700; font-size: 1.1rem; margin: 0 0 16px; }
.spl-door__desc { margin: 0 0 20px; font-size: .9rem; line-height: 1.55; color: var(--ink2); }

/* ═══════════════════════════════════════════════════════════
   LES DEUX CARTES DISCRÈTES (bas des écrans d'entrée)
   ═══════════════════════════════════════════════════════════ */

.spl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  max-width: 720px;
  margin: 34px auto 0;
}
.spl-card + .spl-cards { margin-top: 34px; }
.spl-cards .spl-card__name {
  display: block;
  font-family: 'SPL Display', Georgia, serif;
  font-weight: 700; font-size: .98rem;
  color: var(--ink); margin: 0 0 5px;
}
.spl-cards .spl-card__desc { display: block; font-size: .84rem; line-height: 1.5; color: var(--ink3); }
a.spl-card {
  display: block;
  padding: 18px 20px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: none;
  transition: border-color .16s ease, background .16s ease;
}
a.spl-card:hover { border-color: var(--gold-line); background: var(--card); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   PIED
   ═══════════════════════════════════════════════════════════ */

.spl-foot { margin: 40px auto 0; text-align: center; font-size: .8rem; color: var(--ink3); }
.spl-foot a { color: var(--ink3); }
.spl-foot__sep { margin: 0 8px; opacity: .5; }

/* ── Confort et accessibilité ────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}