/* Tendo — styles communs (espace entreprise, console, inscription) */
:root{
  --encre:#17131f;--encre2:#2a2435;--fond:#f6f4f0;--carte:#fff;--texte:#17131f;--doux:#6e6878;--trait:#e6e1d9;
  --accent:#ff5b2e;--accent-fonce:#e0441a;--accent-pale:#fff0ea;--or:#ffb547;--vert:#1d8a52;--vert-pale:#e7f6ee;
  --danger:#c62828;--danger-pale:#fdecec;--jaune-pale:#fff6dc;--rayon:16px;
  --ombre:0 1px 2px rgba(23,19,31,.04),0 8px 28px rgba(23,19,31,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--fond);color:var(--texte);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.45}
[hidden]{display:none!important}
a{color:inherit}
img{max-width:100%}
h1{font-family:'Archivo',sans-serif;font-stretch:112%;font-size:1.6rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
h2{font-size:1.02rem;font-weight:700;margin-bottom:12px}
h3{font-size:.95rem;font-weight:700}

/* ---------- barre ---------- */
.barre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:var(--encre);color:#fff;position:sticky;top:0;z-index:20}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Archivo',sans-serif;font-stretch:115%;font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:inherit;white-space:nowrap}
@media (max-width:480px){.marque small{display:none}}
.marque img{width:32px;height:32px;border-radius:9px}
.marque small{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:.78rem;opacity:.6;letter-spacing:0}
.barre nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.barre .lien{color:#fff;opacity:.85}
.barre .lien:hover{opacity:1}
.barre select{background:var(--encre2);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:7px 10px;font:inherit;font-size:.85rem;max-width:220px}

.lien{background:none;border:0;color:var(--accent-fonce);font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:none}
.lien:hover{text-decoration:underline}

.bandeau-etat{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 24px;font-size:.88rem;border-bottom:1px solid var(--trait);background:var(--jaune-pale);color:#6b4d00;text-align:center}
.bandeau-etat.ok{background:var(--vert-pale);color:#145c37}
.bandeau-etat.alerte{background:var(--danger-pale);color:#8a1c1c}
.bandeau-etat .btn{height:32px;font-size:.8rem;padding:0 12px}

main{max-width:1140px;margin:0 auto;padding:28px 24px 64px}
.centre{display:grid;place-items:center;min-height:72vh}
.boite{background:var(--carte);padding:32px;border-radius:20px;width:100%;max-width:420px;box-shadow:var(--ombre);display:grid;gap:14px}
.aide{color:var(--doux);font-size:.92rem;line-height:1.5}
.petit{color:var(--doux);font-size:.82rem;line-height:1.5}
.message{font-size:.88rem;min-height:1.2em}
.message.erreur{color:var(--danger)}
.message.ok{color:var(--vert)}

/* ---------- formulaires ---------- */
label{display:grid;gap:6px;font-size:.85rem;font-weight:600;color:#3b3546}
label small{font-weight:400;color:var(--doux);font-size:.78rem}
input,textarea,select{font:inherit;font-size:.95rem;padding:11px 12px;border:1.5px solid var(--trait);border-radius:11px;background:#fff;color:var(--texte);width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,91,46,.15)}
input:read-only{background:#f7f5f1;color:var(--doux)}
input[type=color]{padding:3px;height:44px;cursor:pointer}
input[type=range]{padding:0;accent-color:var(--accent)}
textarea{resize:vertical}
.case{display:flex;align-items:center;gap:9px;font-weight:500}
.case input{width:auto;accent-color:var(--accent);width:17px;height:17px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;font:inherit;font-weight:700;font-size:.92rem;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .1s,background .15s,border-color .15s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.principal{background:var(--accent);color:#fff}
.principal:hover{background:var(--accent-fonce)}
.sombre{background:var(--encre);color:#fff}
.sombre:hover{background:var(--encre2)}
.second{background:#fff;color:var(--texte);border:1.5px solid var(--trait)}
.second:hover{border-color:var(--encre)}
.danger{background:#fff;color:var(--danger);border:1.5px solid #f2c4c4}
.btn.mini{height:34px;padding:0 12px;font-size:.82rem;border-radius:9px}

/* ---------- onglets de page ---------- */
.onglets-page{display:flex;gap:4px;border-bottom:1.5px solid var(--trait);margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.onglets-page button{border:0;background:none;font:inherit;font-weight:600;font-size:.92rem;color:var(--doux);padding:12px 14px;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;cursor:pointer;white-space:nowrap}
.onglets-page button.actif{color:var(--texte);border-bottom-color:var(--accent)}

.entete{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.entete .lien{margin-bottom:6px;display:inline-block}

/* ---------- cartes de l'équipe ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.fiche{background:var(--carte);border-radius:var(--rayon);padding:18px;display:flex;gap:14px;align-items:center;cursor:pointer;border:1.5px solid transparent;transition:border-color .15s;box-shadow:var(--ombre)}
.fiche:hover{border-color:var(--encre)}
.fiche img,.fiche .ini{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none}
.ini{display:grid;place-items:center;color:#fff;font-weight:800;background:var(--encre)}
.fiche strong{display:block}
.fiche small{display:block;color:var(--doux);font-size:.8rem;margin-top:3px;line-height:1.35}
.pastille{display:inline-block;margin-top:5px;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--jaune-pale);color:#8a6d00}
.pastille.verte{background:var(--vert-pale);color:#145c37}
.pastille.rouge{background:var(--danger-pale);color:#8a1c1c}
.pastille.grise{background:#efece6;color:var(--doux)}

.deux-colonnes{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.pile{display:grid;gap:18px}
fieldset,.panneau{border:0;background:var(--carte);border-radius:var(--rayon);padding:22px;display:grid;gap:14px;box-shadow:var(--ombre);min-width:0}
legend{float:left;width:100%;font-weight:800;font-size:1rem;display:flex;align-items:center;gap:10px;margin-bottom:4px}
legend span{width:26px;height:26px;border-radius:50%;background:var(--accent-pale);color:var(--accent-fonce);display:grid;place-items:center;font-size:.8rem}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ligne3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.prefixe{display:flex;align-items:center;border:1.5px solid var(--trait);border-radius:11px;overflow:hidden;background:#fff}
.prefixe span{padding:0 4px 0 12px;color:var(--doux);font-weight:500;font-size:.88rem;white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis}
.prefixe input{border:0;padding-left:2px;min-width:0}
.prefixe input:focus{box-shadow:none}
.photo-zone{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.recadrage{position:relative;width:150px;height:150px;border-radius:50%;overflow:hidden;background:#f1ede6;cursor:grab;touch-action:none;flex:none}
.recadrage canvas{width:100%;height:100%;display:block}
.recadrage .vide{position:absolute;inset:0;display:grid;place-items:center;color:var(--doux);font-weight:600}
.photo-cmd{display:grid;gap:10px;flex:1;min-width:180px}
.fichier input{display:none}
.zoom{grid-template-columns:auto 1fr;align-items:center}
.lien-autre{display:grid;grid-template-columns:1fr 1.6fr auto;gap:8px;margin-bottom:8px}
.lien-autre button{border:0;background:none;color:var(--danger);font-size:1.2rem;cursor:pointer;padding:0 6px}
.pied-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;position:sticky;bottom:0;background:var(--fond);padding:12px 0;z-index:5}
.panneau-qr{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow-y:auto}
.qr{background:#fff;border:1.5px solid var(--trait);border-radius:14px;padding:14px;aspect-ratio:1}
.qr svg{width:100%;height:100%;display:block}
.url{font-size:.82rem;color:var(--accent-fonce);font-weight:600;word-break:break-all;text-align:center}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.duo .btn{padding:0 8px;font-size:.82rem;height:40px}
.titre-carte{margin-top:8px;padding-top:18px;border-top:1px solid var(--trait)}
.bascule{display:grid;grid-template-columns:1fr 1fr;background:#f1ede6;border-radius:10px;padding:3px}
.bascule button{border:0;background:none;font:inherit;font-weight:600;font-size:.85rem;padding:7px;border-radius:8px;cursor:pointer;color:var(--doux)}
.bascule button.actif{background:#fff;color:var(--texte);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.apercu{width:100%;height:auto;border-radius:8px;box-shadow:0 6px 20px rgba(23,19,31,.16);display:block;background:#eee}
.verrou{display:flex;gap:10px;align-items:flex-start;background:var(--jaune-pale);color:#6b4d00;border-radius:12px;padding:12px;font-size:.84rem;line-height:1.45}
.champ-num{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.sur-carte{height:46px;white-space:nowrap;font-size:.82rem;color:var(--doux)}

/* ---------- personnalisation ---------- */
.modeles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.modele{border:2px solid var(--trait);border-radius:14px;padding:8px;background:#fff;cursor:pointer;display:grid;gap:8px;text-align:left;font:inherit;transition:border-color .15s}
.modele:hover{border-color:var(--encre)}
.modele.actif{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,91,46,.15)}
.modele canvas,.modele img{width:100%;aspect-ratio:5/3;border-radius:6px;display:block;background:#f1ede6;object-fit:cover}
.modele span{font-size:.84rem;font-weight:700;padding:0 4px}
.modele small{font-size:.74rem;color:var(--doux);font-weight:500;padding:0 4px 2px}
.couleurs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.logo-zone{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logo-apercu{width:150px;height:80px;border-radius:12px;background:repeating-conic-gradient(#f1ede6 0 25%,#fff 0 50%) 50%/16px 16px;display:grid;place-items:center;border:1.5px solid var(--trait);overflow:hidden}
.logo-apercu img{max-width:88%;max-height:80%}
.placement{position:relative;touch-action:none;user-select:none}
.placement canvas{cursor:move}
.placement .aide-glisser{position:absolute;left:10px;top:10px;background:rgba(23,19,31,.78);color:#fff;font-size:.74rem;padding:4px 9px;border-radius:20px;pointer-events:none}

/* ---------- offres ---------- */
.offres{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.offre{background:#fff;border:1.5px solid var(--trait);border-radius:18px;padding:22px;display:grid;gap:12px;align-content:start;position:relative}
.offre.vedette{border-color:var(--accent);box-shadow:0 10px 30px rgba(255,91,46,.12)}
.offre .ruban{position:absolute;top:-11px;left:22px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px}
.offre .prix{font-family:'Archivo',sans-serif;font-stretch:112%;font-size:2rem;font-weight:800;line-height:1}
.offre .prix small{font-family:'Plus Jakarta Sans',sans-serif;font-size:.85rem;font-weight:500;color:var(--doux)}
.offre ul{list-style:none;display:grid;gap:7px;font-size:.88rem}
.offre li{display:flex;gap:8px;align-items:flex-start}
.offre li::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--vert-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231d8a52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
.offre .btn{width:100%}
.offre.actuelle{border-color:var(--vert)}

.etat-abo{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.etat-abo .grand{font-family:'Archivo',sans-serif;font-stretch:112%;font-size:1.35rem;font-weight:800}

/* ---------- tableaux ---------- */
.tableau{width:100%;border-collapse:collapse;font-size:.88rem}
.tableau th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--doux);font-weight:700;padding:10px 12px;border-bottom:1.5px solid var(--trait);white-space:nowrap}
.tableau td{padding:12px;border-bottom:1px solid var(--trait);vertical-align:middle}
.tableau tr:last-child td{border-bottom:0}
.tableau .actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.defile{overflow-x:auto;margin:0 -22px;padding:0 22px}

.chiffres{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.chiffre{background:#fff;border-radius:var(--rayon);padding:18px;box-shadow:var(--ombre)}
.chiffre small{display:block;color:var(--doux);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.chiffre strong{display:block;font-family:'Archivo',sans-serif;font-stretch:112%;font-size:1.7rem;font-weight:800;margin-top:6px}

/* ---------- dialogues ---------- */
dialog{border:0;border-radius:20px;padding:28px;width:min(520px,94vw);margin:auto;box-shadow:0 24px 70px rgba(0,0,0,.28);max-height:92vh;overflow-y:auto}
dialog::backdrop{background:rgba(23,19,31,.5)}
dialog form.contenu{display:grid;gap:14px}
.fermer{text-align:right;margin-bottom:6px}
.choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.choix label{border:1.5px solid var(--trait);border-radius:12px;padding:12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600}
.choix label:has(input:checked){border-color:var(--accent);background:var(--accent-pale)}
.choix input{width:auto;accent-color:var(--accent)}
.attente{display:grid;justify-items:center;gap:14px;text-align:center;padding:12px 0}
.roue{width:44px;height:44px;border-radius:50%;border:4px solid var(--accent-pale);border-top-color:var(--accent);animation:tourne 1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.liste-simple{list-style:none;margin:10px 0;display:grid;gap:6px}
.liste-simple li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:#f7f5f1;border-radius:10px;font-size:.9rem}
.liste-simple button{border:0;background:none;color:var(--danger);cursor:pointer;font:inherit;font-size:.82rem;font-weight:600}
.ligne-bas{display:flex;gap:8px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--encre);color:#fff;padding:12px 18px;border-radius:12px;font-size:.9rem;transition:transform .25s;z-index:100;max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0)}

@media (max-width:900px){
  .deux-colonnes{grid-template-columns:1fr}
  .panneau-qr{position:static;order:-1;max-height:none;overflow:visible}
  .qr{max-width:220px;margin:0 auto;width:100%}
}
@media (max-width:560px){
  main{padding:20px 16px 64px}
  .barre{padding:10px 16px}
  .barre nav{gap:12px;font-size:.85rem}
  .marque small{display:none}
  .ligne,.ligne3,.couleurs{grid-template-columns:1fr}
  fieldset,.panneau{padding:18px}
  .defile{margin:0 -18px;padding:0 18px}
  .lien-autre{grid-template-columns:1fr auto}
  .lien-autre input:first-child{grid-column:1/-1}
  .champ-num{grid-template-columns:1fr}
  .sur-carte{height:auto}
  .boite{padding:24px}
}

/* ---------- couverture du profil (aperçu) ---------- */
.couverture-apercu{height:130px;border-radius:12px;background:var(--encre) center/cover no-repeat;display:grid;place-items:center;align-content:center;text-align:center;color:#fff;overflow:hidden;padding:12px;gap:6px}
.couverture-apercu img{max-height:46px;max-width:60%}
.couverture-apercu img.blanc{filter:brightness(0) invert(1)}
.couverture-apercu p{font-weight:600;font-size:.9rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.modele .suppr{font-size:.74rem;color:var(--danger);font-weight:600;padding:0 4px 2px;background:none;border:0;cursor:pointer;justify-self:start}
.modele.ajout{place-items:center;align-content:center;min-height:150px;border-style:dashed;color:var(--doux);text-align:center}
.modele.ajout b{font-size:1.6rem;line-height:1;color:var(--accent)}
.modele[disabled]{opacity:.6;cursor:not-allowed}

/* palettes de couleurs */
.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.palettes button{aspect-ratio:1;border-radius:12px;border:2px solid #fff;box-shadow:0 0 0 1px var(--trait);cursor:pointer;padding:0}
.palettes button:hover,.palettes button.actif{box-shadow:0 0 0 2px var(--accent)}
/* détail du prix (paiement) */
.detail-prix{border:1px solid var(--trait);border-radius:12px;padding:10px 14px;display:grid;gap:4px;font-size:.9rem}
.detail-prix div{display:flex;justify-content:space-between;gap:12px}
.detail-prix .remise{color:#145c37}
.detail-prix .total{border-top:1px solid var(--trait);padding-top:6px;font-weight:700}
/* créateur IA */
.exemples-ia{display:flex;flex-wrap:wrap;gap:6px}
.exemples-ia button{border:1px solid var(--trait);background:#fff;border-radius:999px;padding:5px 10px;font:inherit;font-size:.8rem;cursor:pointer}
.apercus-ia{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.apercus-ia canvas{width:100%;height:auto;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.modele.ia b{background:linear-gradient(135deg,#7b2ff7,#ff5b2e);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:520px){.apercus-ia{grid-template-columns:1fr}}
.bouton-wa{border-color:#25d366 !important;color:#128c4a}
#form-code-email .bouton-wa{margin-top:8px}