/* =========================================================
   Pages « autour de la fiche » : accueil, comptes, erreurs.
   Charte Linkfo : Space Grotesk + Inter, fond Cloud, cartes
   blanches ombrées, accent piloté par variables CSS.
   La fiche publique aura sa propre feuille (fiche.css, session 2).
   ========================================================= */

:root{
  /* Palette de marque (mêmes clés que la maquette de référence) */
  --accent:#5B5FEF;  --accent-rgb:91,95,239;
  --sand:#FF6F61;    --sand-rgb:255,111,97;
  --grad:linear-gradient(120deg,#5B5FEF 0%,#8A5CF5 55%,#FF6F61 100%);

  /* Neutres : ne varient jamais */
  --ink:#111326;
  --cloud:#F8F8FC;
  --lavender:#E8E7FF;
  --grey:#70738A;

  --bg:var(--cloud);
  --card:#ffffff;
  --border:rgba(17,19,38,.14);
  --txt:var(--ink);
  --muted:var(--grey);
  --accent-soft:rgba(var(--accent-rgb),.14);
  --danger:#D93B2B;
  --ok:#0E9F6E;

  --r:20px;
  --ombre:0 2px 12px rgba(17,19,38,.07);
  --ombre-forte:0 10px 30px rgba(17,19,38,.10);
}

*{margin:0; padding:0; box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px 400px at 15% -5%, rgba(var(--accent-rgb),.13), transparent 60%),
    radial-gradient(500px 350px at 95% 20%, rgba(var(--sand-rgb),.14), transparent 60%);
}
h1,h2,h3,.num{font-family:'Space Grotesk',system-ui,sans-serif; letter-spacing:-.01em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

/* ---------- En-tête ----------
   Une pilule flottante qui suit le défilement : le même objet que sur la
   page d'accueil, pour que la marque se comporte pareil partout. */
.entete{
  position:sticky; top:12px; z-index:40;
  display:flex; align-items:center; gap:12px;
  max-width:1040px; width:calc(100% - 28px); margin:14px auto 0;
  padding:8px 10px 8px 18px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  box-shadow:0 10px 34px rgba(17,19,38,.10);
}
.marque{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  border-radius:14px;
}
.marque:hover{text-decoration:none}
.marque-logo{
  height:30px; width:auto; flex:0 0 auto;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.marque:hover .marque-logo{transform:translateY(-2px) rotate(-4deg)}
.wordmark{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;
  color:var(--txt); letter-spacing:-.4px;
}
.entete nav{margin-left:auto; display:flex; align-items:center; gap:6px; min-width:0}
/* Libellés longs par défaut, courts sur petits écrans (voir la requête média plus bas) */
.entete nav .court{display:none}
/* Dans l'en-tête, l'appel à l'action se fait encre : plus sobre que l'accent,
   et identique à la maquette de la page d'accueil. */
.entete .btn-principal{background:var(--ink); box-shadow:0 6px 18px rgba(17,19,38,.20)}
.entete .btn-principal:hover{background:#262a4d}

/* Focus visible homogène : la marque, les liens et les boutons */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 20px; border:0; border-radius:999px;
  font:600 15px 'Inter',sans-serif; cursor:pointer; text-decoration:none;
  transition:transform .12s, background .18s, box-shadow .18s, color .18s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-principal{background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(var(--accent-rgb),.28)}
.btn-principal:hover{background:#4A4EE0}
.btn-secondaire{background:var(--accent-soft); color:var(--accent); border:1px solid rgba(var(--accent-rgb),.28)}
.btn-secondaire:hover{background:rgba(var(--accent-rgb),.2)}
.btn-discret{background:transparent; color:var(--muted); min-height:38px; padding:8px 14px}
.btn-discret:hover{color:var(--txt); background:rgba(17,19,38,.05)}
.btn-large{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* ---------- Carte centrale ---------- */
main{position:relative; z-index:1; flex:1 0 auto; width:100%}
.centre{
  width:100%; max-width:460px; margin:0 auto; padding:26px 16px 40px;
}
.carte{
  background:var(--card); border:1px solid var(--border); border-radius:26px;
  box-shadow:var(--ombre-forte); padding:26px 22px;
}
.carte h1{font-size:26px; line-height:1.2; margin-bottom:6px}
.carte .sous{color:var(--muted); font-size:14.5px; margin-bottom:22px}
.carte + .sous-carte{
  margin-top:16px; text-align:center; font-size:14.5px; color:var(--muted);
}

/* ---------- Page compte : plusieurs blocs empilés ---------- */
.centre-large{max-width:560px}
.titre-page{font-size:26px; line-height:1.2; margin-bottom:4px}
.sous-titre{color:var(--muted); font-size:14px; margin-bottom:20px}
.bloc{margin-bottom:16px}
.bloc h2{font-size:17px; margin-bottom:14px}
.bloc form .btn{margin-top:2px}
.ligne-info{font-size:13.5px; line-height:1.55; color:var(--muted); margin-bottom:12px}
.ligne-info b{color:var(--txt); font-weight:600}
.ligne-info.petite{font-size:12.5px; margin-bottom:0}
.bloc-danger{border-color:rgba(217,59,43,.35)}
.bloc-danger h2{color:var(--danger)}
.btn-danger{background:rgba(217,59,43,.10); color:#9B291C; border:1px solid rgba(217,59,43,.35)}
.btn-danger:hover{background:rgba(217,59,43,.16)}
details > summary{list-style:none; user-select:none}
details > summary::-webkit-details-marker{display:none}
details[open] > summary{margin-bottom:16px}

/* ---------- Formulaires ---------- */
.champ{margin-bottom:16px}
.champ label{
  display:block; font:600 13.5px 'Inter',sans-serif; color:var(--txt); margin-bottom:6px;
}
.champ .aide{display:block; font-weight:400; font-size:12.5px; color:var(--muted); margin-top:4px}
.champ input[type=text],
.champ input[type=email],
.champ input[type=password]{
  width:100%; min-height:48px; padding:12px 14px;
  font:400 16px 'Inter',sans-serif;   /* 16px minimum : pas de zoom automatique sur iOS */
  color:var(--txt); background:#fff;
  border:1px solid var(--border); border-radius:14px;
  transition:border-color .15s, box-shadow .15s;
}
.champ input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);
}
.champ input::placeholder{color:#A8AAB9}
.champ.erreur input{border-color:var(--danger); box-shadow:0 0 0 3px rgba(217,59,43,.12)}
.champ .msg-erreur{display:block; color:var(--danger); font:600 12.5px 'Inter',sans-serif; margin-top:6px}

/* Bascule « Afficher le mot de passe » : cible tactile confortable */
.voir-mdp{
  display:inline-flex; align-items:center; gap:9px; margin-top:8px; padding:6px 2px;
  min-height:34px; font:400 13.5px 'Inter',sans-serif; color:var(--muted); cursor:pointer;
}
.voir-mdp:hover{color:var(--txt)}
.voir-mdp input{
  width:19px; height:19px; min-height:0; margin:0; accent-color:var(--accent); cursor:pointer;
}

/* Champ pseudo : préfixe d'URL collé au champ */
.prefixe{
  display:flex; align-items:stretch; border:1px solid var(--border); border-radius:14px;
  background:#fff; overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.prefixe:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
.prefixe span{
  display:flex; align-items:center; padding:0 4px 0 14px;
  font:600 15px 'Inter',sans-serif; color:var(--muted); background:#fff; white-space:nowrap;
}
.prefixe input{border:0!important; box-shadow:none!important; border-radius:0!important; padding-left:2px!important}
.champ.erreur .prefixe{border-color:var(--danger)}

/* Cases à cocher */
.case{
  display:flex; gap:11px; align-items:flex-start; margin-bottom:14px;
  padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:#FCFCFE;
  cursor:pointer;
}
.case:hover{border-color:rgba(var(--accent-rgb),.4)}
.case input{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px; accent-color:var(--accent); cursor:pointer;
}
.case .txt{font-size:13.5px; line-height:1.45}
.case .txt b{font-weight:600}
.case .txt small{display:block; color:var(--muted); font-size:12.5px; margin-top:3px}

/* ---------- Messages ---------- */
.message{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:14px; font-size:14px; margin-bottom:16px;
  border:1px solid transparent;
}
.message b{font-weight:600}
.message-ok{background:rgba(14,159,110,.10); border-color:rgba(14,159,110,.28); color:#08704E}
.message-erreur{background:rgba(217,59,43,.09); border-color:rgba(217,59,43,.28); color:#9B291C}
.message-info{background:var(--lavender); border-color:rgba(var(--accent-rgb),.25); color:#3B3E8C}
.message a{color:inherit; text-decoration:underline}
.message .lien-dev{
  display:block; margin-top:8px; word-break:break-all; font-size:12.5px;
  background:#fff; border:1px dashed rgba(var(--accent-rgb),.4); border-radius:10px; padding:8px 10px;
}

/* ---------- Pied de page ---------- */
.pied{
  position:relative; z-index:1; flex:0 0 auto;
  padding:24px 16px 34px; text-align:center; color:var(--muted); font-size:13px;
}
.pied a{color:var(--muted); text-decoration:underline}
.pied a:hover{color:var(--txt)}
.pied .partenaire{margin-top:8px; font-size:12.5px}
/* Les liens légaux : obligatoires, donc toujours atteignables, mais ils ne
   doivent pas prendre le pas sur le reste du pied. */
.pied-legal{
  margin-top:12px; font-size:12.5px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
}
.auth-pied a{color:inherit; text-decoration:underline}

/* ---------- Page d'accueil ---------- */
.pastille{
  display:inline-block; padding:6px 14px; border-radius:999px; margin-bottom:16px;
  background:var(--lavender); color:#3B3E8C; font:600 12.5px 'Inter',sans-serif;
}
.actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.btn-large-auto{min-width:240px; justify-content:center}

/* Les styles de la page d'accueil vivent désormais dans accueil.css. */


/* ---------- Page d'erreur ---------- */
.erreur-code{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:64px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:10px;
}

/* ---------- Petits écrans : l'en-tête reste sur une ligne ---------- */
@media (max-width:520px){
  .entete{padding:7px 8px 7px 14px; gap:8px; width:calc(100% - 20px); margin-top:10px; top:8px}
  .marque-logo{height:26px}
  .wordmark{font-size:17px}
  .entete nav{gap:4px}
  .entete nav .btn{padding:8px 13px; font-size:13.5px; min-height:38px}
  .entete nav .long{display:none}
  .entete nav .court{display:inline}
  .centre{padding-left:12px; padding-right:12px}
  .carte{padding:22px 18px; border-radius:22px}
  .carte h1{font-size:23px}
}

/* ---------- Grands écrans ---------- */
@media (min-width:720px){
  .carte{padding:32px 30px}
  .centre{padding-top:20px}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}