/* rejoind.re — site public et espace compte. Aucune police externe : rien n'est chargé ailleurs. */
:root {
  /* Couleurs du logo (18/10/2026) : bleu nuit du texte, bleu de la flèche, corail du « .re ».
     Contrastes vérifiés : blanc sur --accent 4,9:1 ; --chaud-texte sur blanc 5,2:1. Le corail du logo (--chaud,
     3:1 seulement) est un accent : points, badges, illustrations — jamais du texte ni un bouton à texte blanc. */
  --encre: #031638; --doux: #475569; --pale: #64748b; --trait: #e2e8f0; --fond: #fafbfc; --carte: #fff;
  --accent: #0e69ef; --accent-fonce: #0a56c8; --accent-voile: #e8f1ff; --chaud: #fe6145; --chaud-texte: #c43d22; --nuit: #031638;
  --ok: #15803d; --ok-voile: #f0fdf4; --att: #b45309; --att-voile: #fffbeb; --ko: #b91c1c; --ko-voile: #fef2f2;
  --rayon: 14px; --menu: 236px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--encre); background: var(--fond); }
a { color: var(--accent); }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Boutons et champs */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; padding: 11px 20px;
      border-radius: 12px; border: 1px solid var(--trait); background: #fff; color: var(--encre); cursor: pointer; text-decoration: none; }
.bt:hover { border-color: #a1a1aa; }
.bt.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bt.principal:hover { background: var(--accent-fonce); }
.bt.petit { padding: 6px 12px; font-size: 14px; border-radius: 9px; }
.bt.discret { background: none; border-color: transparent; color: var(--doux); }
.bt.danger { color: var(--ko); border-color: #fecaca; }
.bt:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #93c0fb; outline-offset: 1px; }
label { display: block; font-weight: 600; font-size: 14px; color: var(--doux); margin-bottom: 12px; }
label small { display: block; font-weight: 400; color: var(--pale); }
input[type=text], input[type=email], input[type=url], input[type=number], textarea, select {
  display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 15px; color: var(--encre); padding: 10px 12px;
  border: 1px solid #d4d4d8; border-radius: 10px; background: #fff; }
input[type=color] { display: block; width: 70px; height: 42px; padding: 3px; border: 1px solid #d4d4d8; border-radius: 10px; background: #fff; margin-top: 5px; }
textarea { min-height: 120px; resize: vertical; }
.prefixe { display: flex; align-items: stretch; margin-top: 5px; }
.prefixe span { display: flex; align-items: center; padding: 0 10px; background: #f4f4f5; border: 1px solid #d4d4d8; border-right: 0;
                border-radius: 10px 0 0 10px; color: var(--doux); font-weight: 600; white-space: nowrap; }
.prefixe input { margin-top: 0; border-radius: 0 10px 10px 0; }
.dispo { font-size: 13px; font-weight: 600; min-height: 1.3em; margin-top: 4px; }
.dispo.oui { color: var(--ok); } .dispo.non { color: var(--ko); }
.case { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; color: var(--encre); }
.case input { margin-top: 4px; }

/* Messages */
.note { padding: 12px 16px; border-radius: 12px; margin: 0 0 16px; font-weight: 600; }
.note.ok { background: var(--ok-voile); color: var(--ok); }
.note.erreur { background: var(--ko-voile); color: var(--ko); }
.note.info { background: var(--accent-voile); color: var(--accent-fonce); }
.note.att { background: var(--att-voile); color: var(--att); }
.etat { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.etat.actif { background: var(--ok-voile); color: var(--ok); }
.etat.en_attente { background: var(--att-voile); color: var(--att); }
.etat.refuse, .etat.bloque { background: var(--ko-voile); color: var(--ko); }
.etat.archive { background: #f4f4f5; color: var(--pale); }

/* ── Site public ─────────────────────────────────────────────────────────── */
.entete { position: sticky; top: 0; z-index: 5; background: #fafafaee; backdrop-filter: blur(8px); border-bottom: 1px solid #0000000a; }
.entete .conteneur { display: flex; align-items: center; gap: 16px; height: 64px; }
.marque { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; color: var(--encre); text-decoration: none; letter-spacing: -.01em; }
.marque img { height: 34px; width: auto; display: block; }   /* le logo complet d'Aziz (fichier image) */
.marque b { color: var(--chaud); }   /* le « .re » du logo */
.entete nav { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.heros { padding: 64px 0 40px; }
.heros .conteneur { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.heros h1 { font-size: clamp(36px, 5.4vw, 60px); letter-spacing: -.03em; margin-bottom: 18px; }
.heros h1 em { font-style: normal; color: var(--accent); }
.heros p.chapo { font-size: 19px; color: var(--doux); max-width: 34em; margin: 0 0 26px; }
.heros .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.heros .actions small { color: var(--pale); }
.exemple-url { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 15px; background: #fff;
               border: 1px solid var(--trait); border-radius: 999px; padding: 7px 16px; margin-bottom: 18px; color: var(--doux); }
.exemple-url b { color: var(--accent); }

/* Le téléphone d'exemple */
.telephone { justify-self: center; width: 290px; border-radius: 40px; padding: 12px; background: var(--nuit); box-shadow: 0 30px 60px -25px #0e69ef55, 0 10px 25px -10px #0004; }
.telephone .ecran { border-radius: 30px; overflow: hidden; background: linear-gradient(165deg, #dbe9ff, #fafbfc 60%); padding: 34px 18px 26px; text-align: center; min-height: 520px; }
.telephone .avatar { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 30px; font-weight: 800; }
.telephone h3 { font-size: 18px; margin: 0 0 4px; }
.telephone p { margin: 0 0 18px; font-size: 13px; color: var(--doux); }
.telephone .lien { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border-radius: 12px; padding: 12px 12px 12px 14px;
                   margin-bottom: 10px; font-weight: 700; font-size: 14px; border: 2px solid #bfd6fb; text-align: left; }
.telephone .lien:first-of-type { background: var(--accent); color: #fff; border-color: var(--accent); }
.telephone .lien i { flex: none; font-style: normal; font-size: 11px; font-weight: 700; background: #fff1ee; color: var(--chaud-texte); border-radius: 999px; padding: 1px 7px; }
.telephone .lien:first-of-type i { background: #ffffff33; color: #fff; }
.telephone small { display: block; margin-top: 16px; font-size: 11px; color: var(--pale); }

.bande { padding: 56px 0; }
.bande.blanche { background: #fff; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.bande h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; }
.bande p.intro { color: var(--doux); font-size: 18px; max-width: 40em; margin: 0 0 32px; }
.atouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.atout { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 22px; }
.bande.blanche .atout { background: var(--fond); }
.atout .picto { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-voile); color: var(--accent); margin-bottom: 14px; }
.atout .picto svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atout h3 { font-size: 18px; }
.atout p { margin: 0; color: var(--doux); }
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: e; }
.etape { padding: 6px 0 0 54px; position: relative; }
.etape::before { counter-increment: e; content: counter(e); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
                 background: var(--encre); color: #fff; display: grid; place-items: center; font-weight: 800; }
.etape h3 { font-size: 18px; } .etape p { margin: 0; color: var(--doux); }
.faq details { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin: 10px 0 0; color: var(--doux); }
.appel { text-align: center; padding: 64px 0; }
.appel h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; }
.pied { border-top: 1px solid var(--trait); padding: 26px 0 40px; color: var(--pale); font-size: 14px; }
.pied .conteneur { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.pied a { color: var(--doux); text-decoration: none; } .pied a:hover { text-decoration: underline; }
.pied .droite { margin-left: auto; }

.boite { max-width: 460px; margin: 56px auto; background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; padding: 30px; }
.boite h1 { font-size: 26px; }
.boite p { color: var(--doux); }
.texte-legal { max-width: 760px; margin: 40px auto 60px; background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; padding: 30px 34px; }
.texte-legal h1 { font-size: 30px; } .texte-legal h2 { font-size: 19px; margin-top: 26px; }
.texte-legal p, .texte-legal li { color: #3f3f46; }
.a-completer { background: var(--att-voile); color: var(--att); padding: 0 4px; border-radius: 4px; font-weight: 600; }

/* ── Espace compte : menu à gauche ───────────────────────────────────────── */
.espace { display: grid; grid-template-columns: var(--menu) minmax(0, 1fr); min-height: 100vh; }
.espace > aside { position: sticky; top: 0; height: 100vh; background: var(--nuit); color: #e4e4e7; display: flex; flex-direction: column; padding: 18px 12px; }
.espace > aside .marque { color: #fff; padding: 0 8px 18px; }
.espace > aside .marque b { color: var(--chaud); }
.espace nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: #cfe0ff; text-decoration: none; font-weight: 600; font-size: 15px; }
.espace nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.espace nav a:hover { background: #ffffff12; color: #fff; }
.espace nav a.actif { background: #ffffff1f; color: #fff; }
.espace nav a .nb { margin-left: auto; background: var(--chaud-texte); color: #fff; font-size: 12px; border-radius: 999px; padding: 0 8px; }
.espace nav .titre-menu { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8ea3c8; padding: 18px 12px 6px; font-weight: 700; }
.espace > aside .bas { margin-top: auto; font-size: 13px; color: #9fb3d9; padding: 0 8px; word-break: break-all; }
.espace > aside .bas form { margin-top: 8px; }
.espace > aside .bas button { background: none; border: 0; color: #cfe0ff; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.espace main { padding: 28px 34px 60px; min-width: 0; }
.espace main > h1 { font-size: 26px; letter-spacing: -.01em; }
.espace main > .sous { color: var(--doux); margin: -4px 0 22px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 20px 22px; margin-bottom: 18px; }
.carte h2 { font-size: 18px; }
.grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ligne-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
table.liste { width: 100%; border-collapse: collapse; font-size: 15px; }
table.liste th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--pale); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--trait); }
table.liste td { padding: 12px 10px; border-bottom: 1px solid #f4f4f5; vertical-align: top; }
table.liste td.n, table.liste th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.liste .code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
table.liste .vers { color: var(--doux); font-size: 14px; word-break: break-all; }
.defile { overflow-x: auto; }
.vide { color: var(--pale); text-align: center; padding: 26px 10px; }
.motif { display: block; font-size: 13px; color: var(--ko); margin-top: 3px; }

/* Éditeur de page : réglages à gauche, aperçu du téléphone à droite */
.editeur { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.apercu { position: sticky; top: 20px; }
.apercu iframe { width: 330px; height: 640px; border: 10px solid var(--nuit); border-radius: 36px; background: #fff; display: block; }
.apercu p { font-size: 13px; color: var(--pale); text-align: center; }
.bouton-ligne { border: 1px solid var(--trait); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fcfcfd; }
.bouton-ligne .tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bouton-ligne .tete b { flex: 1; }
.bouton-ligne .grille3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0 12px; }

/* Statistiques : barres horizontales simples */
.barres { display: flex; flex-direction: column; gap: 8px; }
.barre { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 60px; gap: 12px; align-items: center; font-size: 14px; }
.barre .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre .piste { height: 14px; background: #f4f4f5; border-radius: 0 4px 4px 0; }
.barre .piste i { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 2px; }
.barre .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.jours { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 6px; border-bottom: 1px solid var(--trait); }
.jours i { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 1px; }
.jours i.zero { background: #e4e4e7; }
.legende-jours { display: flex; justify-content: space-between; font-size: 12px; color: var(--pale); margin-top: 4px; }

@media (max-width: 900px) {
  .heros .conteneur, .atouts, .etapes, .grille2, .editeur, .bouton-ligne .grille3 { grid-template-columns: 1fr; }
  .heros { padding-top: 36px; }
  .telephone { width: 260px; }
  .espace { grid-template-columns: 1fr; }
  .espace > aside { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px; }
  .espace > aside .marque { padding: 0 8px; }
  .espace nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .espace nav .titre-menu { display: none; }
  .espace > aside .bas { display: none; }
  .espace main { padding: 20px 16px 50px; }
  .apercu { position: static; } .apercu iframe { width: 100%; max-width: 330px; margin: 0 auto; }
  .barre { grid-template-columns: 100px minmax(0, 1fr) 46px; }
  .entete nav .bt:not(.principal) { display: none; }
}