/* Tendo — application (PWA) */
:root{--encre:#17131f;--fond:#f6f4f0;--carte:#fff;--doux:#6e6878;--trait:#e6e1d9;--accent:#ff5b2e;--accent-fonce:#e0441a;--c1:#17131f;--c2:#ff5b2e;--danger:#c62828;--vert:#1d8a52}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
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(--encre);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;overscroll-behavior-y:none}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative;background:var(--fond)}
.ecran{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.centre-ecran{display:grid;place-items:center;min-height:100dvh;padding:0}
.logo-app{width:72px;height:72px;border-radius:20px;box-shadow:0 10px 30px rgba(23,19,31,.18)}
.petit{color:var(--doux);font-size:.82rem;line-height:1.5}
.aide{color:var(--doux);font-size:.92rem;line-height:1.5}
.message{font-size:.88rem;min-height:1.2em;text-align:center;padding:0 24px}
.message.erreur{color:var(--danger)}
.message.ok{color:var(--vert)}
.pile{display:grid;gap:14px}
.centre-texte{text-align:center;font-size:.88rem;font-weight:600;color:var(--accent-fonce)}

/* connexion */
.connexion{padding:calc(48px + env(safe-area-inset-top)) 20px 40px;display:grid;gap:22px;align-content:start;min-height:100dvh}
.intro{display:grid;gap:14px;justify-items:start}
.intro h1{font-family:'Archivo',sans-serif;font-stretch:115%;font-size:1.9rem;line-height:1.08;font-weight:800;letter-spacing:-.02em}
.intro p{color:var(--doux);line-height:1.5}
.carte-blanche{background:var(--carte);border-radius:20px;padding:20px;display:grid;gap:14px;box-shadow:0 1px 2px rgba(23,19,31,.04),0 8px 28px rgba(23,19,31,.06)}
label{display:grid;gap:6px;font-size:.85rem;font-weight:600;color:#3b3546}
input,textarea{font:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--trait);border-radius:12px;background:#fff;color:var(--encre);width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,91,46,.15)}
.champ-code{font-size:1.6rem;letter-spacing:.3em;text-align:center;font-weight:700}
.bouton{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;border-radius:14px;font:inherit;font-weight:700;font-size:1rem;border:0;cursor:pointer;width:100%}
.bouton:disabled{opacity:.55}
.bouton.mini{height:38px;width:auto;font-size:.85rem;padding:0 14px;border-radius:10px}
.principal{background:var(--accent);color:#fff}
.second{background:#fff;color:var(--encre);border:1.5px solid var(--trait)}
.lien{background:none;border:0;color:var(--accent-fonce);font:inherit;font-weight:600;cursor:pointer;padding:0}
.fichier input{display:none}

/* ma carte */
.couverture{height:190px;padding-top:env(safe-area-inset-top);background:linear-gradient(120deg,var(--c1),var(--c2)) center/cover;position:relative;display:grid;place-items:center;color:#fff;text-align:center}
.couverture-texte{display:grid;gap:6px;justify-items:center;padding:0 24px 40px}
.couverture-texte img{max-height:44px;max-width:62%}
.couverture-texte img.blanc{filter:brightness(0) invert(1)}
.couverture-texte p{font-weight:600;font-size:.88rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.couverture-texte strong{font-family:'Archivo',sans-serif;font-stretch:112%;font-size:1.3rem}
#choix-carte{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;font:inherit;font-size:.8rem;padding:6px 10px;border-radius:20px;border:0;background:rgba(0,0,0,.35);color:#fff;max-width:60%}
.identite{text-align:center;padding:0 24px;margin-top:-58px;position:relative}
.avatar{width:116px;height:116px;border-radius:50%;border:5px solid var(--fond);object-fit:cover;background:#ddd;box-shadow:0 8px 24px rgba(23,19,31,.18)}
.avatar.initiales{display:inline-grid;place-items:center;font-size:2.4rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.identite h1{font-size:1.5rem;font-weight:500;margin-top:10px;letter-spacing:-.01em}
.identite h1 b{font-weight:800}
.titre{color:var(--doux);font-size:.92rem;margin-top:4px;line-height:1.4}
.org{display:inline-block;margin-top:8px;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c2)}
.alerte{margin:18px 20px 0;background:#fdecec;color:#8a1c1c;padding:12px 14px;border-radius:12px;font-size:.86rem;line-height:1.45}

.qr-bloc{display:grid;justify-items:center;gap:6px;margin:20px 20px 0;padding:22px 20px 18px;background:#fff;border-radius:24px;border:0;width:calc(100% - 40px);font:inherit;color:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(23,19,31,.04),0 10px 30px rgba(23,19,31,.08)}
.qr{width:min(64vw,250px);aspect-ratio:1}
.qr svg{width:100%;height:100%;display:block}
.qr-legende{font-weight:700;font-size:.95rem;margin-top:6px}
.qr-url{font-size:.8rem;color:var(--accent-fonce);font-weight:600;word-break:break-all}
.qr-agrandir{font-size:.72rem;color:var(--doux)}

.partage{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px 20px 0}
.action{display:grid;justify-items:center;gap:6px;padding:14px 6px;border-radius:16px;background:#fff;border:0;font:inherit;font-size:.78rem;font-weight:600;color:var(--encre);cursor:pointer;box-shadow:0 1px 2px rgba(23,19,31,.04),0 4px 14px rgba(23,19,31,.05)}
.action span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--fond);font-size:1.15rem;font-weight:700;color:var(--c1)}
.action svg{width:22px;height:22px;fill:currentColor}
.action:active{transform:scale(.97)}

.bloc{padding:24px 20px 0}
.bloc-titre{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.bloc h2{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);font-weight:700}
.bascule{display:flex;background:#ece8e1;border-radius:10px;padding:3px}
.bascule button{border:0;background:none;font:inherit;font-weight:600;font-size:.8rem;padding:6px 12px;border-radius:8px;color:var(--doux);cursor:pointer}
.bascule button.actif{background:#fff;color:var(--encre);box-shadow:0 1px 4px rgba(0,0,0,.08)}
#visuel{width:100%;height:auto;border-radius:10px;display:block;box-shadow:0 10px 30px rgba(23,19,31,.18);background:#eee}

/* profil */
.entete-ecran{padding:calc(28px + env(safe-area-inset-top)) 20px 16px;display:grid;gap:6px}
.entete-ecran h1{font-family:'Archivo',sans-serif;font-stretch:112%;font-size:1.6rem;font-weight:800}
#form-profil{padding:0 20px}
.photo-ligne{display:flex;align-items:center;gap:16px}
.photo-ligne img,.photo-vide{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.photo-vide{display:grid;place-items:center;background:var(--fond);color:var(--doux);font-size:.8rem;font-weight:600}
.photo-ligne .bouton{width:auto;height:44px;font-size:.88rem}

/* navigation */
.onglets-bas{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--trait);padding:8px 12px calc(8px + env(safe-area-inset-bottom));z-index:20}
.onglets-bas button{display:grid;justify-items:center;gap:3px;border:0;background:none;font:inherit;font-size:.74rem;font-weight:600;color:var(--doux);padding:6px;cursor:pointer}
.onglets-bas svg{width:24px;height:24px;fill:currentColor}
.onglets-bas button.actif{color:var(--accent-fonce)}

.installer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:456px;background:var(--encre);color:#fff;border-radius:16px;padding:12px;display:flex;align-items:center;gap:12px;z-index:25;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.installer img{width:40px;height:40px;border-radius:11px}
.installer div{flex:1;display:grid;gap:2px}
.installer strong{font-size:.9rem}
.installer small{font-size:.76rem;opacity:.75;line-height:1.35}
.installer .bouton{width:auto}
.fermer-x{border:0;background:none;color:#fff;opacity:.6;font-size:1rem;cursor:pointer;padding:4px}

.plein-ecran{position:fixed;inset:0;background:#fff;z-index:50;display:grid;place-items:center;align-content:center;gap:12px;padding:24px;text-align:center}
.qr-grand{width:min(86vw,72vh,520px);aspect-ratio:1}
.qr-grand svg{width:100%;height:100%;display:block}
.plein-ecran strong{font-size:1.3rem}
.plein-ecran span{color:var(--doux);font-weight:600}
.plein-ecran small{color:var(--doux);margin-top:12px}

.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(200px);background:var(--encre);color:#fff;padding:12px 18px;border-radius:12px;font-size:.9rem;transition:transform .25s;z-index:60;max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0)}
.bouton-wa{margin-top:10px;border-color:#25d366;color:#128c4a}
.bouton-wa::before{content:"";width:18px;height:18px;border-radius:50%;background:#25d366}
.installer.sans-onglets{bottom:calc(16px + env(safe-area-inset-bottom))}
.guide-fond{position:fixed;inset:0;background:rgba(10,8,16,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center;padding:12px}
.guide-fond[hidden]{display:none}
.guide{position:relative;background:#fff;color:var(--encre);border-radius:22px;padding:22px 20px calc(20px + env(safe-area-inset-bottom));width:100%;max-width:440px;text-align:center}
.guide .fermer-x{position:absolute;top:10px;right:10px;color:var(--encre)}
.guide-icone{width:64px;height:64px;border-radius:16px;margin:0 auto 6px;display:block}
.guide h2{margin:0 0 12px;font-size:1.2rem}
.guide ol{text-align:left;margin:0 0 12px;padding-left:22px;display:grid;gap:10px;line-height:1.45}
.guide .petit{opacity:.7}
.ico-partager{width:20px;height:20px;vertical-align:-4px;fill:#0a84ff}
#btn-installer-profil{margin-top:10px}

/* ---------- thème clair / sombre ----------
   data-theme="sombre" est posé par un petit script (réglage du téléphone ou choix dans « Mon profil »).
   On déclare nous-mêmes le thème sombre : le navigateur n'« inverse » plus les couleurs à sa façon. */
:root{color-scheme:light;--panneau:#fff;--champ:#fff;--label:#3b3546;--puce:var(--fond);--onglets:rgba(255,255,255,.94);--bascule:#ece8e1;--sombre-ui:#17131f}
:root[data-theme=sombre]{color-scheme:dark;
  --encre:#f1eef5;--fond:#16141b;--carte:#211e27;--panneau:#211e27;--champ:#1a1820;--doux:#aaa3b5;--trait:#35303f;--label:#dcd7e3;
  --accent:#ff6a3d;--accent-fonce:#ff9370;--danger:#ff7a7a;--vert:#5fd49a;--puce:#2c2833;--onglets:rgba(28,25,33,.96);--bascule:#2c2833;--sombre-ui:#2c2833}
#app{--icone:var(--c1);--c1-vif:var(--c1)}
[data-theme=sombre] #app{--icone:color-mix(in srgb,var(--c1) 25%,#fff);--c1-vif:color-mix(in srgb,var(--c1) 55%,var(--c2))}
[data-theme=sombre] .couverture{background-image:linear-gradient(120deg,var(--c1-vif),var(--c2))}
[data-theme=sombre] .couverture::after{content:"";position:absolute;inset:auto 0 0;height:60px;background:linear-gradient(transparent,rgba(22,20,27,.35));pointer-events:none}
[data-theme=sombre] .avatar.initiales{background:linear-gradient(135deg,var(--c1-vif),var(--c2))}
[data-theme=sombre] .logo-app{box-shadow:0 10px 30px rgba(0,0,0,.5)}
[data-theme=sombre] .carte-blanche,[data-theme=sombre] .action,[data-theme=sombre] .qr-bloc{box-shadow:none}
[data-theme=sombre] .carte-blanche,[data-theme=sombre] .action{border:1px solid var(--trait)}
[data-theme=sombre] .org{color:color-mix(in srgb,var(--c2) 50%,#fff)}
[data-theme=sombre] .titre{color:#c4bdcf}
[data-theme=sombre] .alerte{background:#3a1d22;color:#ffc9c9}
[data-theme=sombre] .avatar{box-shadow:0 8px 24px rgba(0,0,0,.45)}
[data-theme=sombre] #visuel{box-shadow:0 10px 30px rgba(0,0,0,.45)}
[data-theme=sombre] .bouton-wa{color:#5fd49a}
[data-theme=sombre] .installer,[data-theme=sombre] .toast{border:1px solid #3f394a}
[data-theme=sombre] .guide-fond{background:rgba(0,0,0,.7)}
[data-theme=sombre] .principal{background:var(--accent)}
[data-theme=sombre] input::placeholder,[data-theme=sombre] textarea::placeholder{color:#6f6879}
[data-theme=sombre] input[type=month]::-webkit-calendar-picker-indicator{filter:invert(1)}
[data-theme=sombre] select{background:var(--champ);color:var(--encre)}
label{color:var(--label)}
input,textarea{background:var(--champ)}
.second{background:var(--panneau)}
.action{background:var(--panneau)}
.action span{background:var(--puce);color:var(--icone)}
.bascule{background:var(--bascule)}
.bascule button.actif{background:var(--panneau);color:var(--encre)}
.onglets-bas{background:var(--onglets)}
.installer,.toast{background:var(--sombre-ui)}
.guide{background:var(--panneau);color:var(--encre)}
/* Le QR reste sur fond blanc pour être scanné facilement, même en mode sombre. */
.qr-bloc{background:#fff;color:#17131f}
.qr-bloc .qr-legende{color:#17131f}
.qr-bloc .qr-agrandir{color:#6e6878}
.qr-bloc .qr-url{color:#e0441a}
.plein-ecran{background:#fff;color:#17131f}
.plein-ecran span,.plein-ecran small{color:#6e6878}

/* ---------- portfolio (application) ---------- */
.onglets-bas{grid-template-columns:repeat(3,1fr)}
.portfolio-actions{padding:0 20px;display:grid;gap:10px}
.portfolio-liens{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.portfolio-liens .bouton{width:100%;height:42px}
.liste-real{padding:4px 20px 0;display:grid;gap:10px}
.vide-real{display:grid;gap:6px;text-align:center;padding:28px 18px;border:1.5px dashed var(--trait);border-radius:18px;color:var(--doux);font-size:.88rem;line-height:1.5}
.vide-real strong{color:var(--encre);font-size:1rem}
.ligne-real{display:flex;align-items:center;gap:12px;background:var(--panneau);border:1px solid var(--trait);border-radius:16px;padding:10px}
.vignette-real{flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;border:0;padding:0;background:var(--puce);cursor:pointer;display:grid;place-items:center;color:var(--doux);font-size:1.4rem}
.vignette-real img{width:100%;height:100%;object-fit:cover}
.texte-real{flex:1;min-width:0;text-align:left;border:0;background:none;font:inherit;color:var(--encre);cursor:pointer;padding:0;display:grid;gap:3px}
.texte-real strong{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.texte-real small{font-size:.76rem;color:var(--doux)}
.outils-real{display:flex;flex-direction:column;gap:4px}
.outils-real button{width:34px;height:26px;border-radius:8px;border:1px solid var(--trait);background:var(--champ);color:var(--encre);font-size:.72rem;cursor:pointer}
.outils-real button:disabled{opacity:.3}
.entete-retour{gap:10px}
.entete-retour .lien{justify-self:start;font-size:.92rem}
#form-real{padding:0 20px}
.photos-real{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photos-real:empty{display:none}
.photo-real{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--puce)}
.photo-real img{width:100%;height:100%;object-fit:cover}
.photo-real div{position:absolute;top:4px;right:4px;display:flex;gap:4px}
.photo-real button{width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:.75rem;cursor:pointer}
.photo-real .couv{position:absolute;left:4px;bottom:4px;background:var(--accent);color:#fff;font-size:.66rem;font-weight:700;padding:3px 7px;border-radius:8px}
.interrupteur{display:flex;align-items:center;gap:10px;font-weight:600}
.interrupteur input{width:22px;height:22px;accent-color:var(--accent);flex:none}
.bouton.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--trait))}
input[type=month]{min-height:50px}
.toast{opacity:0;pointer-events:none;transition:transform .25s,opacity .25s}
.toast.on{opacity:1}

/* choix du thème (Mon profil) */
.choix-theme{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--bascule);border-radius:12px;padding:4px}
.choix-theme button{border:0;background:none;font:inherit;font-weight:600;font-size:.85rem;padding:9px 4px;border-radius:9px;color:var(--doux);cursor:pointer}
.choix-theme button.actif{background:var(--panneau);color:var(--encre);box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* autres liens (portfolio) */
.autres-liens{display:grid;gap:8px}
.titre-champ{font-size:.85rem;font-weight:600;color:var(--label)}
#liens-real{display:grid;gap:8px}
#liens-real:empty{display:none}
.ligne-lien{display:grid;grid-template-columns:1fr 1.4fr 36px;gap:6px;align-items:center}
.ligne-lien input{padding:11px 10px;font-size:15px}
.ligne-lien button{height:36px;border-radius:10px;border:1px solid var(--trait);background:var(--champ);color:var(--doux);cursor:pointer}
.autres-liens .lien{justify-self:start;font-size:.9rem}