/* MonVendeur / PickForMe : épuré. Ce qui est à l'écran sert ; le reste n'y est pas. */
:root{--fond:#fff;--surface:#f6f7f9;--texte:#1a1f2b;--doux:#5f6675;--bord:#e3e6eb;--acc:#0b6e4f;--acc-fond:#e9f5ef;--client:#eef1f6;--ombre:0 1px 3px rgba(20,30,50,.08),0 4px 18px rgba(20,30,50,.06)}
@media (prefers-color-scheme:dark){:root{--fond:#101318;--surface:#181c23;--texte:#e7eaf0;--doux:#9aa2b1;--bord:#2a303b;--acc:#43d295;--acc-fond:#14302a;--client:#1d2430;--ombre:0 1px 3px rgba(0,0,0,.4)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fond);color:var(--texte)}
a{color:var(--acc)}
.cache{position:absolute;left:-9999px}
.doux{color:var(--doux);font-size:.92rem}

/* L'en-tête : le nom (sauf sur l'accueil), et trois liens discrets. */
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}
/* Sur l'accueil, le grand nom suffit ; le petit revient en haut dès que la conversation commence. */
.page-accueil:not(.en-conversation) header .marque{visibility:hidden}
header nav{display:flex;gap:18px;font-size:.92rem;white-space:nowrap}
header nav a{color:var(--doux);text-decoration:none}header nav a:hover{color:var(--texte);text-decoration:underline}
.marque{font-weight:800;font-size:1.2rem;letter-spacing:-.02em;text-decoration:none;color:var(--texte)}
.marque span,.logo span{color:var(--acc)}

main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:8px 20px 24px}
h1{font-size:1.65rem;line-height:1.25;letter-spacing:-.01em;margin:.4em 0 .5em}
h2{font-size:1.25rem;line-height:1.3}h3{font-size:1.05rem}

/* L'accueil : comme une page de recherche. Le nom, une phrase, la barre, trois exemples. */
.page-accueil main{display:flex;flex-direction:column}
.salle{display:flex;flex-direction:column;flex:1}
.tete{text-align:center;margin-top:14vh}
.logo{font-weight:800;font-size:clamp(2.6rem,9vw,3.6rem);letter-spacing:-.04em;line-height:1}
.tete h1{font-size:1.02rem;font-weight:400;color:var(--doux);margin:.9em 0 1.6em}
.barre{display:flex;align-items:flex-end;gap:6px;background:var(--fond);border:1px solid var(--bord);border-radius:28px;
       padding:6px 6px 6px 20px;box-shadow:var(--ombre);transition:box-shadow .15s}
.barre:focus-within{border-color:transparent;box-shadow:0 0 0 2px var(--acc),var(--ombre)}
.barre textarea{flex:1;border:0;outline:0;resize:none;background:transparent;color:var(--texte);font:inherit;font-size:1.05rem;
                padding:10px 0;max-height:9em;line-height:1.45}
.barre button{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--acc);color:#fff;display:grid;place-items:center;cursor:pointer}
.barre button:disabled{opacity:.5}
.suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.option{border:1px solid var(--bord);background:var(--fond);color:var(--texte);border-radius:999px;padding:7px 14px;font:inherit;font-size:.93rem;cursor:pointer}
.option:hover{border-color:var(--acc);color:var(--acc)}
.sous-barre{text-align:center;margin:10px 0 0}
button.lien{background:none;border:0;color:var(--doux);font:inherit;font-size:.92rem;text-decoration:underline;cursor:pointer;padding:4px}

.salle.en-conversation .vers-explorer{display:none}.vers-explorer a{color:var(--doux);font-size:.92rem}
/* La page complète (/explorer) : le vendeur en haut, puis tout ce qu'il y a à explorer. */
.salle.compacte{flex:none;margin-bottom:8px}.salle.compacte h1{margin-bottom:.2em}.salle.compacte .barre{margin-top:14px}
.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:18px 0}
.portes a{display:block;border:1px solid var(--bord);border-radius:14px;padding:12px 16px;text-decoration:none;color:var(--texte)}
.portes a:hover{border-color:var(--acc)}.portes h2{font-size:1.05rem;margin:.2em 0}.portes p{margin:.2em 0;color:var(--doux)}
.nuage{display:flex;flex-wrap:wrap;gap:8px}.nuage .option{cursor:default}
p.prix{font-size:1.3rem;margin:.2em 0}
/* La fiche d'un produit. */
.pour-qui{background:var(--surface);border-radius:12px;padding:6px 14px;margin:12px 0}.pour-qui p{margin:.5em 0}
table.caracteristiques th{width:40%;color:var(--doux);font-weight:500}
p.categorie{text-transform:uppercase;letter-spacing:.05em;font-size:.76rem;margin:0}
/* En conversation : le nom et les exemples s'effacent, la barre descend, comme une messagerie. */
.salle.en-conversation .tete,.salle.en-conversation .suggestions{display:none}
.salle.en-conversation #conversation{flex:1}
.salle.en-conversation .barre{position:sticky;bottom:12px;margin-top:12px}
#conversation{display:flex;flex-direction:column;gap:10px;margin:8px 0}
.bulle{max-width:85%;padding:10px 15px;border-radius:18px;white-space:pre-wrap}
.bulle.client{align-self:flex-end;background:var(--client);border-bottom-right-radius:6px}
.bulle.vendeur{align-self:flex-start;background:var(--acc-fond);border-bottom-left-radius:6px}
.bulle.attente{opacity:.75;font-style:italic}
.options{display:flex;flex-wrap:wrap;gap:8px}

/* Une recommandation : le produit, pourquoi, ce qu'il faut savoir, puis où voir le prix. */
.choix{border:1px solid var(--bord);border-radius:16px;padding:16px 18px;margin:12px 0;background:var(--fond)}
.choix.principal{border-color:var(--acc);box-shadow:var(--ombre)}
.choix h2,.choix h3{margin:.1em 0 .5em}.choix h4{margin:.8em 0 .2em;font-size:.95rem}
.choix ul{margin:.2em 0;padding-left:1.2em}
.liens{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:.9em 0 0}
.pastille{display:inline-block;border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:6px 14px;text-decoration:none;font-size:.93rem}
.pastille:hover{background:var(--acc);color:#fff}
.bouton{display:inline-block;background:var(--acc);color:#fff;padding:9px 16px;border-radius:999px;text-decoration:none}
.avis{background:var(--surface);border-radius:12px;padding:10px 14px;margin:10px 0}.avis h3{font-size:.98rem;margin:.1em 0}.avis ul{padding-left:1.1em;margin:.3em 0}

/* Les listes (dernières recommandations, plus demandés). */
.cartes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.cartes li{border:1px solid var(--bord);border-radius:14px;padding:12px 14px}.cartes p{margin:.3em 0 0}
.cartes .categorie{display:block;text-transform:uppercase;letter-spacing:.05em;font-size:.74rem;margin-bottom:4px}

/* Les formulaires. */
textarea,input,select{font:inherit;padding:9px 12px;border:1px solid var(--bord);border-radius:10px;background:var(--fond);color:var(--texte)}
textarea,input{width:100%}
button{font:inherit;padding:9px 18px;border-radius:999px;border:0;background:var(--acc);color:#fff;cursor:pointer;margin-top:8px}
input[type=checkbox]{width:auto}label input[size],form.enligne input{width:auto}form.enligne{display:inline}form.enligne button{margin:0 0 0 6px;padding:4px 12px}
button.danger{background:#b3261e}

/* Le bas de page : une ligne sur l'affiliation, et les liens utiles. */
footer{width:100%;max-width:760px;margin:0 auto;padding:18px 20px 26px;color:var(--doux);font-size:.84rem;border-top:1px solid var(--bord)}
footer p{margin:.3em 0}.liens-bas{display:flex;flex-wrap:wrap;gap:6px 16px}.liens-bas a{color:var(--doux)}
.page-accueil footer{border-top:0;text-align:center}.page-accueil .liens-bas{justify-content:center}

/* Mon compte et le panneau de contrôle. */
.menu{display:flex;flex-wrap:wrap;gap:6px}.note{background:var(--acc-fond);padding:8px 12px;border-radius:10px}
.outils{display:grid;gap:10px;margin-top:16px}.outils form{border:1px solid var(--bord);border-radius:14px;padding:12px 14px}
.outils h2{font-size:1.1rem;margin:0 0 6px}.conditions{list-style:none;padding:0;display:grid;gap:6px}
.defile{overflow-x:auto;margin:8px 0}table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{border-bottom:1px solid var(--bord);padding:6px 8px;text-align:left;vertical-align:top}th{color:var(--doux);font-weight:600}
td form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}td form button{margin:0;padding:5px 12px}
.attention{list-style:none;padding:0;display:grid;gap:6px}.attention li{padding:8px 12px;border-radius:10px;border-left:4px solid var(--doux);background:var(--surface)}
.attention .rouge{border-color:#d93025}.attention .jaune{border-color:#e8a400}.attention .info{border-color:var(--acc)}

@media (max-width:520px){header{padding:12px 14px;flex-wrap:wrap;row-gap:6px}header nav{gap:10px;font-size:.82rem;margin-left:auto}.marque{font-size:1.05rem}main{padding:4px 16px 20px}.tete{margin-top:9vh}.bulle{max-width:92%}}