/* ============================================================
   Source4You — Espace client (v1.8.0)
   Feuille AUTONOME : theme clair, menu lateral gauche, cartes
   blanches. Elle ne depend plus ni de ../style.css ni de la
   feuille de l'espace fournisseur (qui reste sombre).
   ============================================================ */

:root{
  --fond:#f4f6fa;
  --carte:#ffffff;
  --ligne:#e4e8ef;
  --ligne2:#cdd5e0;
  --encre:#1c2130;
  --gris:#5b6472;
  --muet:#8c95a5;
  --papaya:#ff8000;
  --papaya-2:#e67300;
  --papaya-doux:#fff3e6;
  --cyan:#0f8fc4;
  --cyan-doux:#e8f5fb;
  --vert:#1f9d5f;
  --vert-doux:#e7f6ee;
  --rouge:#d94848;
  --rouge-doux:#fdecec;
  --radius:12px;
  --ombre:0 1px 2px rgba(28,33,48,.06),0 4px 14px rgba(28,33,48,.05);
  --transition:.18s ease;
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* Theme sombre, au choix du client (bouton de la barre laterale).
   Seuls les jetons changent : toute la feuille suit. */
:root[data-theme="dark"]{
  --fond:#101114;
  --carte:#1a1c21;
  --ligne:#2a2e36;
  --ligne2:#383d47;
  --encre:#f2f4f7;
  --gris:#c9ced8;
  --muet:#8b93a1;
  --papaya:#ff8000;
  --papaya-2:#ff9e40;
  --papaya-doux:#2a1a06;
  --cyan:#47c7fc;
  --cyan-doux:#0d2530;
  --vert:#4fd490;
  --vert-doux:#0f2a1c;
  --rouge:#ff7a7a;
  --rouge-doux:#2b1414;
  --ombre:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body.portail-body{
  background:url('fond-clair.svg') center center / cover no-repeat fixed, var(--fond);
  color:var(--encre);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
}

/* En sombre, c'est le fond technique du site qui reprend la main. */
:root[data-theme="dark"] body.portail-body{
  background:url('../background.svg') center center / cover no-repeat fixed, var(--fond);
}
:root[data-theme="dark"] .portail-side{background:rgba(26,28,33,.86)}
:root[data-theme="dark"] .portail-nav{background:rgba(26,28,33,.9)}
:root[data-theme="dark"] .portail-piece-photo,
:root[data-theme="dark"] .portail-galerie a{background:#22252b}
:root[data-theme="dark"] .portail-societe-logo{background:#fff}
:root[data-theme="dark"] .portail-contact-carte{background:#22252b}

a{color:var(--cyan)}

/* ---------- Logo (repris du site, en sombre sur fond clair) ---------- */
.portail-logo{font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  color:var(--encre);text-decoration:none;letter-spacing:.01em}
.portail-logo .logo-s{color:var(--papaya)}
.portail-logo .logo-y{color:var(--papaya)}

/* ============================================================
   Gabarit : barre laterale gauche + contenu
   ============================================================ */
.portail-cadre{display:flex;min-height:100vh}

.portail-side{flex:0 0 232px;display:flex;flex-direction:column;gap:1.1rem;
  padding:1.4rem 1.1rem 1.1rem;background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-right:1px solid var(--ligne);position:sticky;top:0;height:100vh;
  overflow-y:auto}
.portail-side .portail-etiquette{align-self:flex-start}

.portail-menu{display:flex;flex-direction:column;gap:2px;margin-top:.3rem}
.portail-menu-lien{display:flex;align-items:center;gap:10px;
  padding:.55rem .7rem;border-radius:8px;text-decoration:none;
  color:var(--gris);font-size:.92rem;font-weight:500;
  transition:background var(--transition),color var(--transition);position:relative}
.portail-menu-lien svg{flex:0 0 auto;width:17px;height:17px;stroke:currentColor;
  fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.portail-menu-lien:hover{background:var(--fond);color:var(--encre)}
.portail-menu-actif,.portail-menu-actif:hover{background:var(--papaya-doux);color:var(--papaya-2)}
.portail-menu-badge{margin-left:auto;background:var(--papaya);color:#fff;
  font-size:.7rem;font-weight:600;border-radius:999px;padding:1px 7px;line-height:1.5}

.portail-side-bas{margin-top:auto;display:flex;flex-direction:column;gap:.5rem;
  padding-top:1rem;border-top:1px solid var(--ligne)}
.portail-qui{font-size:.82rem;font-weight:600;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portail-side-bas .nav-link{font-size:.85rem;color:var(--gris);text-decoration:none}
.portail-side-bas .nav-link:hover{color:var(--papaya-2)}

.portail-contenu{flex:1;min-width:0;display:flex;flex-direction:column}
.portail-main{flex:1;width:100%;max-width:1060px;margin:0 auto;
  padding:2.2rem 2rem 3.5rem}

/* ---------- Pages sans session (connexion, inscription) ---------- */
.portail-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ligne)}
.portail-nav .nav-inner{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;max-width:1060px;margin:0 auto;padding:.8rem 1.25rem}
.portail-nav .nav-links{display:flex;align-items:center;gap:1.1rem}
.portail-nav .nav-link{font-size:.88rem;color:var(--gris);text-decoration:none}
.portail-nav .nav-link:hover{color:var(--papaya-2)}
.portail-nav .logo,.portail-nav a.logo{font-family:var(--font-display);font-weight:800;
  font-size:1.15rem;color:var(--encre);text-decoration:none}
.portail-nav .logo-s,.portail-nav .logo-y{color:var(--papaya)}
.portail-seule{max-width:1060px;margin:0 auto;padding:2.2rem 1.25rem 3.5rem}

.portail-etiquette{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--papaya-2);background:var(--papaya-doux);
  border:1px solid #ffd9b3;border-radius:999px;padding:.28em .75em}

.lang-btn{background:none;border:1px solid var(--ligne2);border-radius:8px;
  color:var(--gris);font-family:var(--font-mono);font-size:.75rem;
  padding:.3em .7em;cursor:pointer;transition:var(--transition);align-self:flex-start}
.lang-btn:hover{border-color:var(--papaya);color:var(--papaya-2)}

/* ---------- Titres et textes ---------- */
.portail-page h1,.portail-connexion h1{font-family:var(--font-display);
  font-size:clamp(1.45rem,3vw,1.9rem);font-weight:700;color:var(--encre);margin:0 0 .5rem}
.portail-intro,.portail-aide{color:var(--gris);font-size:.92rem;line-height:1.6}
.portail-soustitre{font-family:var(--font-display);font-size:1.08rem;font-weight:700;
  color:var(--encre);margin:1.7rem 0 .8rem}

/* ---------- Boutons ---------- */
.btn-primary{display:inline-block;background:var(--papaya);color:#fff;border:none;
  border-radius:9px;font-family:var(--font-display);font-weight:700;font-size:.92rem;
  padding:.7rem 1.3rem;cursor:pointer;text-decoration:none;
  transition:background var(--transition)}
.btn-primary:hover{background:var(--papaya-2)}
.btn-secondaire{display:inline-block;background:var(--carte);color:var(--gris);
  border:1px solid var(--ligne2);border-radius:9px;font-weight:600;font-size:.88rem;
  padding:.62rem 1.1rem;cursor:pointer;text-decoration:none;
  transition:var(--transition);margin-right:8px}
.btn-secondaire:hover{border-color:var(--papaya);color:var(--papaya-2)}
.portail-bouton-lien{display:inline-block;text-decoration:none;
  padding:.7rem 1.1rem;border-radius:9px}

/* ---------- Formulaires ---------- */
.portail-connexion{max-width:440px;margin:3rem auto}
.portail-form{display:flex;flex-direction:column;gap:1.1rem;margin:1.6rem 0 1.2rem}
.portail-form label{display:flex;flex-direction:column;gap:.4rem}
.portail-form label>span{font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muet)}
.portail-form-demande{max-width:640px}

.portail-body input[type="text"],
.portail-body input[type="password"],
.portail-body input[type="search"],
.portail-body textarea{
  background:var(--carte);border:1px solid var(--ligne2);border-radius:9px;
  color:var(--encre);font-family:var(--font-body);font-size:.95rem;
  padding:.65rem .85rem;width:100%;
  transition:border-color var(--transition),box-shadow var(--transition)}
.portail-body input:focus,.portail-body textarea:focus{outline:none;
  border-color:var(--papaya);box-shadow:0 0 0 3px rgba(255,128,0,.14)}
.portail-body fieldset[disabled] input,
.portail-body fieldset[disabled] textarea{opacity:.55;cursor:not-allowed}
.portail-body input[type=file]{font-size:.85rem;color:var(--gris)}

/* Piege a robots : invisible pour un humain, present pour un robot. */
.portail-piege{position:absolute !important;left:-9999px !important;
  width:1px;height:1px;overflow:hidden}

/* ---------- Encadres d'etat ---------- */
.portail-erreur,.portail-succes,.portail-avis,.portail-vide{
  border-radius:var(--radius);padding:.85rem 1rem;font-size:.9rem;line-height:1.5;
  margin:1rem 0;background:var(--carte);border:1px solid var(--ligne);
  border-left-width:3px;box-shadow:var(--ombre)}
.portail-erreur{border-left-color:var(--rouge);background:var(--rouge-doux)}
.portail-succes{border-left-color:var(--vert);background:var(--vert-doux)}
.portail-avis{border-left-color:var(--cyan);background:var(--cyan-doux)}
.portail-vide{border-left-color:var(--ligne2);color:var(--gris)}

/* ---------- Badges ---------- */
.portail-badge{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.3em .7em;border-radius:999px;white-space:nowrap}
.portail-badge-ok{background:var(--vert-doux);color:var(--vert)}
.portail-badge-attente{background:var(--papaya-doux);color:var(--papaya-2)}

/* ---------- Recherche + bascule d'affichage (bibliotheque) ---------- */
.portail-outils{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:1.1rem 0 1.4rem}
.portail-outils .portail-recherche{margin:0;flex:1;min-width:220px}
.portail-vues{display:inline-flex;border:1px solid var(--ligne2);border-radius:9px;overflow:hidden}
.portail-vues button{background:var(--carte);border:none;padding:.5rem .7rem;cursor:pointer;
  color:var(--muet);display:flex;align-items:center;transition:var(--transition)}
.portail-vues button + button{border-left:1px solid var(--ligne2)}
.portail-vues button svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.portail-vues button:hover{color:var(--encre)}
.portail-vues .portail-vue-actif{background:var(--papaya-doux);color:var(--papaya-2)}

/* Vue en lignes : les cartes s'etirent en rangees */
.portail-pieces.portail-vue-lignes{display:flex;flex-direction:column;gap:8px}
.portail-vue-lignes .portail-piece-carte{flex-direction:row;align-items:stretch}
.portail-vue-lignes .portail-piece-carte:hover{transform:none}
.portail-vue-lignes .portail-piece-photo{width:84px;height:auto;min-height:56px;flex:0 0 84px}
.portail-vue-lignes .portail-piece-photo svg{width:24px;height:24px}
.portail-vue-lignes .portail-piece-corps{flex-direction:row;align-items:center;
  gap:8px 16px;flex:1;flex-wrap:wrap;padding:.55rem .9rem}
.portail-vue-lignes .portail-piece{flex:0 0 auto}
.portail-vue-lignes .portail-piece-label{flex:1;min-width:140px}
.portail-vue-lignes .portail-piece-meta{margin-left:auto}

.portail-recherche{position:relative;max-width:380px;margin:1.1rem 0 1.4rem}
.portail-recherche input{padding-left:2.3rem}
.portail-recherche svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--muet);fill:none;stroke-width:1.8;
  stroke-linecap:round;pointer-events:none}

/* ---------- Bibliotheque : grille des pieces ---------- */
.portail-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.portail-piece-carte{display:flex;flex-direction:column;gap:7px;padding:0;
  border:1px solid var(--ligne);border-radius:var(--radius);background:var(--carte);
  box-shadow:var(--ombre);text-decoration:none;color:var(--encre);overflow:hidden;
  transition:border-color var(--transition),transform var(--transition)}
.portail-piece-carte:hover{border-color:var(--papaya);transform:translateY(-2px)}
.portail-piece-photo{height:130px;background:#eef1f6;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.portail-piece-photo img{width:100%;height:100%;object-fit:contain;padding:6px}
.portail-piece-photo svg{width:34px;height:34px;stroke:var(--ligne2);fill:none;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.portail-piece-corps{display:flex;flex-direction:column;gap:5px;padding:.7rem .9rem .85rem}
.portail-piece{font-family:var(--font-mono);color:var(--papaya-2);font-size:.88rem}
.portail-piece-label{font-size:.86rem;color:var(--gris)}
.portail-piece-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-family:var(--font-mono);
  font-size:.7rem;color:var(--muet);align-items:center}
.portail-piece-3d{color:var(--cyan);border:1px solid var(--cyan);border-radius:999px;padding:0 8px}
.portail-lien-piece{color:inherit}
.portail-stock{font-family:var(--font-mono);font-size:.68rem;border-radius:999px;
  padding:2px 9px;background:var(--vert-doux);color:var(--vert);white-space:nowrap}
.portail-stock-zero{background:#eef1f6;color:var(--muet)}
.portail-stock-detail{display:flex;flex-wrap:wrap;gap:8px;margin:.4rem 0 1rem}

/* ---------- Bibliotheque : indices ---------- */
.portail-indice{border:1px solid var(--ligne);border-radius:var(--radius);
  background:var(--carte);box-shadow:var(--ombre);padding:1rem 1.2rem;margin:0 0 1rem}
.portail-indice-courant{border-color:var(--papaya)}
.portail-indice-tete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.portail-indice-archive summary{display:flex;align-items:baseline;gap:14px;
  flex-wrap:wrap;cursor:pointer;list-style:none}
.portail-indice-archive summary::before{content:"\25B8";color:var(--muet)}
.portail-indice-archive[open] summary::before{content:"\25BE"}
.portail-indice-badge{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--papaya-2);background:var(--papaya-doux);
  border:1px solid #ffd9b3;border-radius:999px;padding:2px 10px}
.portail-indice-badge-archive{color:var(--muet);background:#eef1f6;border-color:var(--ligne)}

/* ---------- Fichiers ---------- */
.portail-fichiers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 14px}
.portail-fichiers-titre{font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muet);margin-right:4px}
.portail-fichier{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid var(--ligne2);border-radius:8px;text-decoration:none;
  color:var(--encre);font-size:.86rem;background:var(--carte);transition:var(--transition)}
.portail-fichier:hover{border-color:var(--papaya);color:var(--papaya-2)}
.portail-fichier-3d{border-style:dashed}
.portail-taille{font-family:var(--font-mono);font-size:.68rem;color:var(--muet)}
.portail-fichiers-vide{font-size:.85rem;color:var(--muet);margin:8px 0 12px}
.portail-retour{display:inline-block;margin-bottom:1rem;font-size:.85rem;
  color:var(--cyan);text-decoration:none}
.portail-retour:hover{text-decoration:underline}

/* ---------- Visionneuse 3D permanente (deja claire) ---------- */
.portail-v3d{position:relative;height:420px;margin:10px 0 14px;
  border:1px solid var(--ligne);border-radius:var(--radius);background:#ebedf1;overflow:hidden}
.portail-v3d-petit{height:240px}
.portail-v3d-zone{position:absolute;inset:0}
.portail-v3d-zone canvas{width:100%;height:100%;display:block}
.portail-v3d-agrandir{position:absolute;top:8px;right:8px;z-index:5;
  background:rgba(255,255,255,.88);border:1px solid var(--ligne2);border-radius:8px;
  color:var(--gris);font-size:15px;line-height:1;padding:5px 9px;cursor:pointer}
.portail-v3d-agrandir:hover{color:var(--papaya-2);border-color:var(--papaya)}
.portail-v3d-attente{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--muet);font-size:13.5px;pointer-events:none}
.portail-v3d-attente[hidden]{display:none}
.portail-v3d-grand{position:fixed;inset:4vh 4vw;height:auto;z-index:10000;
  box-shadow:0 0 0 200vmax rgba(28,33,48,.45)}
.portail-v3d-ouvert{overflow:hidden}
@media (max-width:640px){.portail-v3d{height:300px}
  .portail-v3d-petit{height:200px}
  .portail-v3d-grand{inset:2vh 2vw}}

/* ---------- Demandes de prix ---------- */
.portail-demande{border:1px solid var(--ligne);border-radius:var(--radius);
  background:var(--carte);box-shadow:var(--ombre);padding:.95rem 1.15rem;margin:0 0 .9rem}
.portail-demande-tete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.portail-demande-date{font-family:var(--font-mono);font-size:.76rem;color:var(--muet)}
.portail-demande-statut{margin-left:auto;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);
  background:var(--cyan-doux);border:1px solid #bfe4f5;border-radius:999px;padding:2px 10px}
.portail-demande-traitee{color:var(--vert);background:var(--vert-doux);border-color:#bfe6d2}
.portail-demande-fichiers{display:flex;flex-wrap:wrap;gap:6px;margin-top:.5rem}
.portail-demande-fichier{font-family:var(--font-mono);font-size:.72rem;
  color:var(--gris);border:1px solid var(--ligne);border-radius:6px;padding:3px 9px}

/* ---------- Commandes ---------- */
.portail-cartes{display:grid;gap:.95rem;margin-top:1.6rem}
.portail-carte{display:block;text-decoration:none;color:inherit;background:var(--carte);
  border:1px solid var(--ligne);border-left:3px solid var(--papaya);
  border-radius:var(--radius);box-shadow:var(--ombre);padding:1.05rem 1.2rem;
  transition:border-color var(--transition)}
.portail-carte:hover{border-color:var(--ligne2);border-left-color:var(--papaya-2)}
.portail-carte-retard{border-left-color:var(--rouge)}
.portail-carte-haut{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:.7rem}
.portail-ref{font-family:var(--font-mono);font-size:.98rem;color:var(--encre)}
.portail-carte-corps{display:flex;flex-wrap:wrap;gap:1.4rem}
.portail-champ{display:flex;flex-direction:column;gap:.15rem}
.portail-cle{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muet)}
.portail-val{font-size:.92rem;color:var(--encre)}
.portail-val-retard{color:var(--rouge)}
.portail-cmd-refclient{font-size:.85rem;color:var(--gris)}
.portail-cmd-lignes{border-collapse:collapse;margin:8px 0;width:100%;font-size:.9rem}
.portail-cmd-lignes td{padding:4px 14px 4px 0;border-bottom:1px solid var(--ligne)}
.portail-cmd-ref{font-family:var(--font-mono);font-size:.8rem;white-space:nowrap}
.portail-cmd-qte{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.portail-cmd-info{font-size:.88rem;color:var(--gris);margin:6px 0 0}
.portail-cmd-num{font-family:var(--font-mono);color:var(--encre);letter-spacing:.04em}
.portail-cmd-exp{color:var(--papaya-2);background:var(--papaya-doux);border-color:#ffd9b3}
.portail-cmd-livree{color:var(--vert);background:var(--vert-doux);border-color:#bfe6d2}

/* ---------- Fiche technique (historique) ---------- */
.portail-fiche{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;
  margin:10px 0 12px;padding:10px 14px;background:var(--fond);
  border:1px solid var(--ligne);border-radius:10px}
.portail-carac{display:inline-flex;flex-direction:column;gap:1px}
.portail-carac-cle{font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muet)}
.portail-carac-val{font-size:.88rem;color:var(--encre);font-variant-numeric:tabular-nums}
.portail-desc{color:var(--gris);font-size:.88rem;line-height:1.6;margin:.5rem 0 1rem}
.portail-joindre{display:flex;flex-direction:column;gap:4px;font-size:.85rem}
.portail-cmd-tracking{margin-top:2px}

/* ---------- Fiche piece (v1.9.0) ---------- */
.portail-exigences{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:auto;align-self:center}
.portail-exigence{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cyan);background:var(--cyan-doux);
  border:1px solid #bfe4f5;border-radius:999px;padding:2px 9px}
@media (max-width:640px){.portail-exigences{margin-left:0}}
.portail-projets{display:flex;flex-direction:column;gap:8px}
.portail-projet{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border:1px solid var(--ligne);border-radius:10px;background:var(--carte);
  box-shadow:var(--ombre);padding:.6rem .9rem}
.portail-prix-moyen{font-size:.92rem;color:var(--gris);margin:.2rem 0 .7rem}
.portail-prix-moyen strong{color:var(--encre);font-variant-numeric:tabular-nums}
.portail-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;margin:.4rem 0 1rem}
.portail-galerie a{display:block;height:120px;border:1px solid var(--ligne);
  border-radius:10px;overflow:hidden;background:#eef1f6;box-shadow:var(--ombre);
  transition:border-color var(--transition)}
.portail-galerie a:hover{border-color:var(--papaya)}
.portail-galerie img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Historique ---------- */
.portail-nc{color:#b26a00;background:#fff4e0;border-color:#f0d9ac}
.portail-nc-close{color:var(--muet);background:#eef1f6;border-color:var(--ligne)}

/* ---------- Documents commerciaux ---------- */
.portail-docs{border:1px solid var(--ligne);border-radius:var(--radius);
  background:var(--carte);box-shadow:var(--ombre);padding:.4rem 1.2rem .6rem;
  margin:0 0 1.4rem;overflow-x:auto}
.portail-docs table{border-collapse:collapse;width:100%;font-size:.9rem}
.portail-docs th{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muet);text-align:left;font-weight:500;
  padding:.6rem 14px .45rem 0;border-bottom:1px solid var(--ligne)}
.portail-docs td{padding:.55rem 14px .55rem 0;border-bottom:1px solid var(--ligne)}
.portail-docs tr:last-child td{border-bottom:none}
.portail-doc-ref{font-family:var(--font-mono);font-size:.82rem;white-space:nowrap}
.portail-doc-montant{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.portail-doc-pdf{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;
  color:var(--cyan);text-decoration:none;border:1px solid var(--ligne2);
  border-radius:7px;padding:3px 10px;transition:var(--transition)}
.portail-doc-pdf:hover{border-color:var(--papaya);color:var(--papaya-2)}
.portail-doc-sans{font-size:.78rem;color:var(--muet)}

/* ---------- Fils de discussion ---------- */
.portail-fils{display:flex;gap:18px;align-items:flex-start}
.portail-fils-liste{flex:0 0 250px;display:flex;flex-direction:column;gap:8px;min-width:0}
.portail-fil{display:flex;flex-direction:column;gap:2px;position:relative;
  padding:10px 12px;border:1px solid var(--ligne);border-radius:10px;
  background:var(--carte);box-shadow:var(--ombre);text-decoration:none;
  color:var(--encre);transition:border-color var(--transition)}
.portail-fil:hover{border-color:var(--papaya)}
.portail-fil-actif{border-color:var(--papaya)}
.portail-fil-nom{font-family:var(--font-mono);font-size:.8rem;padding-right:56px}
.portail-fil-titre{font-size:.76rem;color:var(--muet);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.portail-fil-badge{position:absolute;top:8px;right:10px;background:var(--papaya);
  color:#fff;font-size:.7rem;font-weight:600;border-radius:999px;
  padding:1px 7px;line-height:1.5}
.portail-fil-archiver{position:absolute;bottom:6px;right:8px;background:none;
  border:none;color:var(--muet);font-size:.9rem;line-height:1;cursor:pointer;padding:2px}
.portail-fil-archiver:hover{color:var(--papaya-2)}
.portail-fils-archives{margin-top:.6rem}
.portail-fils-archives summary{cursor:pointer;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muet);
  padding:.3rem 0;list-style:none}
.portail-fils-archives summary::before{content:"\25B8  "}
.portail-fils-archives[open] summary::before{content:"\25BE  "}
.portail-fils-archives .portail-fil{opacity:.75;margin-top:8px}
.portail-fils-fil{flex:1;min-width:0}
@media (max-width:760px){.portail-fils{flex-direction:column}
  .portail-fils-liste{flex:none;width:100%}}

.portail-chat{max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;
  gap:10px;padding:4px 2px;margin:1rem 0}
.portail-bulle{max-width:85%;align-self:flex-start;background:var(--carte);
  border:1px solid var(--ligne);border-radius:12px 12px 12px 4px;
  box-shadow:var(--ombre);padding:.6rem .9rem}
.portail-bulle-s4y{align-self:flex-end;border-color:#ffd9b3;
  background:var(--papaya-doux);border-radius:12px 12px 4px 12px}
.portail-bulle-tete{display:flex;gap:12px;align-items:baseline;margin-bottom:3px}
.portail-bulle-auteur{font-size:.76rem;font-weight:600;color:var(--papaya-2)}
.portail-bulle-date{font-family:var(--font-mono);font-size:.68rem;color:var(--muet)}
.portail-bulle-texte{font-size:.92rem;line-height:1.55;white-space:pre-wrap}
.portail-chat-form{max-width:none}

/* ---------- Ma societe ---------- */
.portail-societe-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1rem;margin:1rem 0 1.4rem}
.portail-societe-carte{border:1px solid var(--ligne);border-radius:var(--radius);
  background:var(--carte);box-shadow:var(--ombre);padding:1.05rem 1.2rem}
.portail-societe-carte h2{font-family:var(--font-display);font-size:.98rem;
  font-weight:700;color:var(--encre);margin:0 0 .8rem;display:flex;
  align-items:center;gap:8px}
.portail-societe-carte h2 svg{width:16px;height:16px;stroke:var(--papaya);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.portail-societe-lignes{display:flex;flex-direction:column;gap:.55rem}
.portail-societe-ligne{display:flex;flex-direction:column;gap:.1rem}
.portail-societe-logo{width:130px;height:130px;display:flex;align-items:center;
  justify-content:center;background:#fff;border:1px solid var(--ligne);
  border-radius:var(--radius);padding:10px;overflow:hidden;margin-bottom:.8rem}
.portail-societe-logo img{max-width:100%;max-height:100%;object-fit:contain}
.portail-societe-nom{font-family:var(--font-display);font-size:1.25rem;
  font-weight:700;color:var(--encre);margin:0 0 .2rem}
.portail-contact-carte{border:1px solid var(--ligne);border-radius:10px;
  padding:.7rem .9rem;background:var(--fond)}
.portail-contact-carte + .portail-contact-carte{margin-top:.6rem}

/* ---------- Pied ---------- */
.portail-pied{border-top:1px solid var(--ligne);padding:1.4rem 1.25rem;text-align:center}
.portail-pied p{color:var(--muet);font-size:.8rem;margin:0}

/* ---------- Responsive : la barre laterale devient horizontale ---------- */
@media (max-width:860px){
  .portail-cadre{flex-direction:column}
  .portail-side{position:static;height:auto;flex:none;width:100%;
    flex-direction:row;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;
    padding:.8rem 1rem;border-right:none;border-bottom:1px solid var(--ligne)}
  .portail-menu{flex-direction:row;flex-wrap:wrap;gap:2px;margin:0;width:100%}
  .portail-menu-lien{padding:.4rem .6rem;font-size:.84rem}
  .portail-menu-lien svg{display:none}
  .portail-side-bas{margin:0;padding:0;border:none;flex-direction:row;
    align-items:center;gap:.8rem;margin-left:auto}
  .portail-qui{max-width:160px}
  .portail-main{padding:1.6rem 1rem 3rem}
  .portail-side .portail-etiquette{display:none}
}

/* ============================================================
   v1.10.0 — bascule de theme, carte d'identite, previsualisateurs
   2D + 3D cote a cote, caddie de recommande
   ============================================================ */

/* ---- Petits boutons d'entete (langue, theme) ---- */
.portail-btn-icone{background:none;border:1px solid var(--ligne2);border-radius:8px;
  color:var(--gris);padding:.3em .55em;cursor:pointer;display:inline-flex;
  align-items:center;transition:var(--transition)}
.portail-btn-icone svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.portail-btn-icone:hover{border-color:var(--papaya);color:var(--papaya-2)}
.portail-side-boutons{display:flex;gap:6px;align-items:center}

/* ---- Carte d'identite de la piece ---- */
.portail-identite{border:1px solid var(--ligne);border-radius:var(--radius);
  background:var(--carte);box-shadow:var(--ombre);padding:1.1rem 1.25rem;margin:0 0 1.3rem}
.portail-identite-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:.85rem 1.4rem}
.portail-identite-cell{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.portail-identite-cell .portail-cle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portail-identite-cell .portail-val{font-size:.94rem}
.portail-identite-bas{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--ligne)}
.portail-identite-vide{color:var(--muet);font-size:.88rem}

/* ---- Prix indicatif ---- */
.portail-prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  background:var(--papaya-doux);border:1px solid #ffd9b3;border-radius:10px;
  padding:.55rem .9rem;font-size:.9rem}
:root[data-theme="dark"] .portail-prix{border-color:#5a3a10}
.portail-prix strong{font-size:1.05rem;color:var(--papaya-2);
  font-variant-numeric:tabular-nums}
.portail-prix-note{color:var(--gris);font-size:.82rem}

/* ---- Previsualisateurs 2D + 3D cote a cote (moitie de hauteur) ---- */
.portail-visus{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 16px}
.portail-visu{display:flex;flex-direction:column;border:1px solid var(--ligne);
  border-radius:10px;background:var(--carte);overflow:hidden}
.portail-visu-barre{display:flex;align-items:center;gap:10px;padding:6px 10px;
  border-bottom:1px solid var(--ligne);font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muet)}
.portail-visu-barre span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:.76rem;
  color:var(--gris)}
.portail-visu-corps{position:relative;height:210px;background:#ebedf1}
:root[data-theme="dark"] .portail-visu-corps{background:#22252b}
.portail-visu-corps iframe{width:100%;height:100%;border:none;display:block;background:#fff}
.portail-visu-vide{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:0 12px;color:var(--muet);font-size:.82rem}
.portail-visu .portail-v3d{height:100%;margin:0;border:none;border-radius:0}
.portail-visu-agrandir{background:none;border:none;color:var(--muet);font-size:15px;
  line-height:1;padding:2px 4px;cursor:pointer}
.portail-visu-agrandir:hover{color:var(--papaya-2)}
.portail-visu-grand{position:fixed;inset:4vh 4vw;z-index:10000;height:auto;
  box-shadow:0 0 0 200vmax rgba(28,33,48,.55)}
.portail-visu-grand .portail-visu-corps{height:calc(92vh - 34px)}
@media (max-width:860px){.portail-visus{grid-template-columns:1fr}}

/* La visionneuse 3D isolee (hors paire) garde une demi-hauteur. */
.portail-v3d{height:210px}
@media (max-width:640px){.portail-v3d{height:190px}}

/* ---- Caddie : bouton flottant + zone de depot ---- */
.portail-caddie-btn{position:fixed;right:22px;bottom:22px;z-index:900;
  display:inline-flex;align-items:center;gap:9px;padding:.7rem 1.05rem;
  background:var(--papaya);color:#fff;border:2px solid transparent;border-radius:999px;
  box-shadow:0 6px 20px rgba(28,33,48,.22);text-decoration:none;font-weight:600;
  font-size:.9rem;transition:transform var(--transition),background var(--transition)}
.portail-caddie-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portail-caddie-btn:hover{background:var(--papaya-2);transform:translateY(-2px)}
.portail-caddie-cible{border-color:#fff;transform:scale(1.08)}
.portail-caddie-compte{background:#fff;color:var(--papaya-2);border-radius:999px;
  min-width:22px;text-align:center;padding:0 6px;font-size:.8rem}

/* ---- Bouton « recommander » sur une carte piece ---- */
.portail-piece-bloc{position:relative;display:flex;min-width:0}
.portail-piece-bloc .portail-piece-carte{flex:1;min-width:0}
.portail-piece-ajout{position:absolute;top:8px;right:8px;z-index:2;
  width:30px;height:30px;border-radius:999px;border:1px solid var(--ligne2);
  background:rgba(255,255,255,.92);color:var(--gris);font-size:17px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--transition)}
:root[data-theme="dark"] .portail-piece-ajout{background:rgba(26,28,33,.92)}
.portail-piece-ajout:hover{border-color:var(--papaya);color:var(--papaya-2)}
.portail-piece-ajout-ok{background:var(--papaya);color:#fff;border-color:var(--papaya)}
.portail-vue-lignes .portail-piece-ajout{top:50%;transform:translateY(-50%)}

/* ---- Page du caddie ---- */
.portail-caddie-vide{margin:1.2rem 0}
.portail-caddie-lignes{border:1px solid var(--ligne);border-radius:var(--radius);
  background:var(--carte);box-shadow:var(--ombre);padding:.4rem 1.2rem .6rem;
  margin:1rem 0;overflow-x:auto}
.portail-caddie-lignes table{border-collapse:collapse;width:100%;font-size:.9rem}
.portail-caddie-lignes th{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muet);text-align:left;font-weight:500;
  padding:.6rem 12px .45rem 0;border-bottom:1px solid var(--ligne)}
.portail-caddie-lignes td{padding:.5rem 12px .5rem 0;border-bottom:1px solid var(--ligne);
  vertical-align:middle}
.portail-caddie-lignes tr:last-child td{border-bottom:none}
.portail-caddie-lignes input[type=text]{width:90px;text-align:right;padding:.35rem .5rem}
.portail-caddie-total{text-align:right;font-variant-numeric:tabular-nums}
.portail-caddie-retirer{background:none;border:none;color:var(--muet);cursor:pointer;
  font-size:16px;line-height:1;padding:2px 6px}
.portail-caddie-retirer:hover{color:var(--rouge)}
.portail-caddie-pied{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:flex-end;margin:.4rem 0 1.2rem;font-size:.95rem}
.portail-caddie-pied strong{font-size:1.15rem;font-variant-numeric:tabular-nums}

/* ============================================================
   v1.10.1 — choix de langue explicite, quantite a l'ajout
   ============================================================ */
.portail-langues{display:inline-flex;border:1px solid var(--ligne2);border-radius:8px;
  overflow:hidden}
.portail-langues button{background:var(--carte);border:none;padding:.3em .6em;
  font-family:var(--font-mono);font-size:.72rem;color:var(--muet);cursor:pointer;
  transition:var(--transition)}
.portail-langues button + button{border-left:1px solid var(--ligne2)}
.portail-langues button:hover{color:var(--encre)}
.portail-langues .portail-langue-active{background:var(--papaya-doux);color:var(--papaya-2);
  font-weight:600}

.portail-ajout{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:1rem 0 1.4rem}
.portail-qte{display:flex;flex-direction:column;gap:.25rem}
.portail-qte input{width:110px;text-align:right}
.portail-ajout .portail-aide{flex:1;min-width:220px;font-size:.82rem}

/* ============================================================
   v1.11.0 — un prix ne s'affiche jamais sans sa tranche
   ============================================================ */
.portail-prix-tranche{font-size:.9rem;color:var(--gris)}
.portail-prix-tranche strong{font-size:.95rem;color:var(--encre);
  font-variant-numeric:tabular-nums}
.portail-prix-avis{flex-basis:100%;font-size:.82rem;color:var(--gris);margin-top:.2rem}
.portail-caddie-ecart{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--papaya-2);background:var(--papaya-doux);
  border-radius:999px;padding:1px 7px;white-space:nowrap}
.portail-caddie-neuf{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muet)}

/* ============================================================
   v1.12.0 — fiche client renseignable (propositions a valider)
   ============================================================ */
.portail-fiche-form{margin-top:.5rem}
.portail-bloc-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem 1.4rem;margin:0 0 1.2rem}
.portail-champ{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.portail-champ .portail-cle{white-space:normal}
.portail-champ textarea{min-height:74px;resize:vertical}
.portail-champ select{background:var(--carte);border:1px solid var(--ligne2);
  border-radius:9px;color:var(--encre);font-family:var(--font-body);font-size:.95rem;
  padding:.62rem .8rem;width:100%}
.portail-champ select:focus{outline:none;border-color:var(--papaya);
  box-shadow:0 0 0 3px rgba(255,128,0,.14)}
.portail-champ-aide{font-size:.78rem;color:var(--muet);line-height:1.45}
.portail-case{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;
  padding:.5rem 0}
.portail-case input[type=checkbox]{width:16px;height:16px;accent-color:var(--papaya)}

.portail-champ-attente{position:relative}
.portail-attente{display:inline-block;font-size:.76rem;color:var(--papaya-2);
  background:var(--papaya-doux);border:1px solid #ffd9b3;border-radius:8px;
  padding:3px 9px;line-height:1.4}
:root[data-theme="dark"] .portail-attente{border-color:#5a3a10}

.portail-contact-carte{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.portail-contact-retrait{font-size:.82rem;color:var(--gris);padding:0}
.portail-fiche-envoi{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:1.4rem 0 0}
.portail-fiche-envoi .portail-aide{font-size:.82rem}

/* ============================================================
   v1.12.1 — la touche cyan de la marque
   Papaya reste le signal d'action (boutons, alertes, actif) ;
   le cyan #47c7fc redevient ce qu'il est sur le site : l'accent
   TECHNIQUE — le Y du logo, les libelles de donnees, les icones
   de rubrique, les filets. Deux nuances : la vive pour les
   marques graphiques, une plus sourde pour le texte, lisible sur
   fond clair.
   ============================================================ */
:root{
  --cyan-vif:#0ea5d9;   /* le cyan de marque, assombri juste ce qu'il faut sur fond clair */
  --cyan-tech:#3d7e96;  /* libelles et petits textes techniques */
}
:root[data-theme="dark"]{
  --cyan-vif:#47c7fc;   /* la teinte exacte du site */
  --cyan-tech:#7fb3c9;
}

/* Le logo : le Y en cyan, comme sur la page principale. */
.portail-logo .logo-y,
.portail-nav .logo-y{color:var(--cyan-vif)}

/* L'etiquette « Espace client » : marqueur d'espace, pas d'action. */
.portail-etiquette{color:var(--cyan-tech);background:var(--cyan-doux);
  border-color:var(--cyan-vif)}

/* Filet cyan en tete de la colonne de contenu. */
.portail-contenu{border-top:2px solid var(--cyan-vif)}

/* Titres de section : petit tiret technique. */
.portail-soustitre::before{content:"";display:inline-block;width:3px;height:.8em;
  background:var(--cyan-vif);border-radius:1px;margin-right:.6rem;
  vertical-align:-0.02em}

/* Icones : cyan au repos dans le menu, papaya quand l'entree est active. */
.portail-menu-lien svg{stroke:var(--cyan-tech)}
.portail-menu-lien:hover svg{stroke:var(--cyan-vif)}
.portail-menu-actif svg,.portail-menu-actif:hover svg{stroke:var(--papaya-2)}
.portail-societe-carte h2 svg{stroke:var(--cyan-vif)}
.portail-recherche svg{stroke:var(--cyan-tech)}
.portail-piece-photo svg{stroke:var(--cyan-vif);opacity:.35}

/* Libelles de donnees : mono, majuscules, cyan sourd. */
.portail-cle,
.portail-carac-cle,
.portail-fichiers-titre,
.portail-visu-barre,
.portail-docs th,
.portail-caddie-lignes th,
.portail-fil-nom{color:var(--cyan-tech)}

/* La carte d'identite est un bloc de donnees : filet cyan. */
.portail-identite{border-left:3px solid var(--cyan-vif)}

/* Le cadre de previsualisation aussi : c'est de la technique. */
.portail-visu-barre .portail-visu-etiquette{color:var(--cyan-vif);font-weight:600}

/* Le retrait du champ de recherche : la regle generale des champs
   etait plus specifique et ecrasait le padding, l'icone chevauchait
   le texte. */
.portail-body .portail-recherche input{padding-left:2.6rem}

/* Quelques fonds et bordures avaient ete ecrits en dur, pensés pour le
   theme clair : ils detonnaient une fois en sombre. On les repasse en
   jetons, la teinte suit desormais le theme. */
:root{--neutre-doux:#eef1f6;--bord-papaya:#ffd9b3;--bord-cyan:#bfe4f5;--bord-vert:#bfe6d2}
:root[data-theme="dark"]{--neutre-doux:#22252b;--bord-papaya:#5a3a10;
  --bord-cyan:#1d4a5e;--bord-vert:#1d4a33}

.portail-piece-photo,
.portail-stock-zero,
.portail-indice-badge-archive,
.portail-nc-close,
.portail-galerie a{background:var(--neutre-doux)}
.portail-etiquette,
.portail-indice-badge,
.portail-cmd-exp,
.portail-attente{border-color:var(--bord-papaya)}
.portail-etiquette{border-color:var(--bord-cyan)}
.portail-demande-statut,
.portail-exigence{border-color:var(--bord-cyan)}
.portail-demande-traitee,
.portail-cmd-livree{border-color:var(--bord-vert)}

/* ============================================================
   ESPACE FOURNISSEUR — blocs propres a la consultation
   (le reste de la feuille est commun aux deux espaces)
   ============================================================ */

/* ---- Conditions et note de la consultation ---- */
.portail-conditions{display:flex;flex-wrap:wrap;gap:1.5rem;background:var(--carte);
  border:1px solid var(--ligne);border-radius:var(--radius);box-shadow:var(--ombre);
  padding:1rem 1.25rem;margin:1.25rem 0}
.portail-note{background:var(--carte);border:1px solid var(--ligne);
  border-left:3px solid var(--cyan-vif);border-radius:var(--radius);
  padding:.85rem 1rem;font-size:.9rem;line-height:1.6;box-shadow:var(--ombre)}

/* ---- Une ligne de consultation (une piece a chiffrer) ---- */
.portail-ligne{background:var(--carte);border:1px solid var(--ligne);
  border-radius:var(--radius);box-shadow:var(--ombre);padding:1.25rem;margin:1.25rem 0}
.portail-ligne legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem;padding:0 .5rem}
.portail-designation{font-family:var(--font-display);color:var(--encre);font-size:1.02rem;font-weight:700}
.portail-desc-note{color:var(--gris);font-style:italic}

.portail-tranches{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.1rem}
.portail-tranche{display:flex;flex-direction:column;gap:.35rem;min-width:150px;flex:1}
.portail-qte{font-family:var(--font-mono);font-size:.8rem;color:var(--cyan-tech)}
.portail-complements{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.1rem}
.portail-complements label{display:flex;flex-direction:column;gap:.35rem;min-width:150px;flex:1}
.portail-complements label>span,.portail-commentaire>span{font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-tech)}
.portail-commentaire{display:flex;flex-direction:column;gap:.35rem}
.portail-actions{margin-top:1.75rem;text-align:center}
.portail-actions .portail-aide{margin-top:.75rem}

/* ---- Contre-offre technique ---- */
.portail-contreoffre{margin-top:12px;padding:12px;border:1px dashed var(--ligne2);
  border-radius:10px;display:flex;flex-direction:column;gap:10px;background:var(--fond)}
.portail-contreoffre textarea{width:100%}
.portail-global{border-color:var(--cyan-vif)}
.portail-avis-soumis{border-left-color:var(--cyan-vif)}
.portail-volume{display:inline-flex;flex-direction:column;justify-content:center;
  padding:0 12px;font-size:.78rem;color:var(--gris)}
.portail-volume strong{color:var(--encre);font-size:.88rem}
.portail-transport{display:flex;align-items:center;gap:10px;font-size:.88rem;margin-top:10px}
.portail-transport input{width:140px}

/* ---- Conditions generales : elles valent pour toute la consultation ---- */
.portail-conditions-gen{border-color:var(--cyan-vif);background:var(--neutre-doux)}
.portail-conditions-gen .portail-desc{margin:0 0 .9rem}
.portail-conditions-gen .portail-complements{margin-bottom:.4rem}
.portail-devise-note{justify-content:flex-end;flex:0 0 auto;min-width:0!important}
.portail-devise-note .portail-val{font-family:var(--font-mono);color:var(--cyan-tech);
  padding:.55rem 0;font-size:.95rem}
.portail-masse-calc{color:var(--gris)}
.portail-fichier-depot{border-color:var(--cyan-vif)}
.portail-fichier-actif{border-color:var(--papaya);color:var(--papaya-2)}

/* ---- Encart de visualisation 2D (deja en place cote fournisseur) ---- */
.portail-encart{margin:14px 0 18px;border:1px solid var(--ligne);border-radius:10px;
  background:var(--carte);display:flex;flex-direction:column;height:300px;overflow:hidden}
.portail-encart[hidden]{display:none}
.portail-encart-barre{display:flex;align-items:center;gap:14px;padding:7px 12px;
  border-bottom:1px solid var(--ligne);background:var(--carte);color:var(--encre);
  font-size:.82rem;flex:0 0 auto}
.portail-encart-barre span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--gris)}
.portail-encart-barre a{color:var(--cyan);text-decoration:none;font-size:.78rem}
.portail-encart-barre button{background:none;border:none;color:var(--muet);font-size:20px;
  cursor:pointer;line-height:1;padding:0 4px}
.portail-encart-barre button:hover{color:var(--papaya-2)}
.portail-encart-corps{flex:1;position:relative;min-height:0;display:flex}
#s4y-encart-cadre{flex:1;width:100%;border:none;background:#fff}
#s4y-encart-3d{flex:1;width:100%;background:#ebedf1}
#s4y-encart-attente{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--muet);font-size:.88rem;pointer-events:none}

/* ---- Visionneuse plein ecran heritee ---- */
.portail-viewer{position:fixed;inset:0;background:rgba(28,33,48,.6);z-index:10000;
  display:flex;flex-direction:column;padding:10vh 20vw}
.portail-viewer[hidden]{display:none}
.portail-viewer-barre{display:flex;align-items:center;gap:16px;padding:8px 12px;
  background:var(--carte);border:1px solid var(--ligne);border-bottom:none;
  border-radius:10px 10px 0 0;color:var(--encre);font-size:.88rem}
.portail-viewer-barre span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portail-viewer-barre a{color:var(--cyan);text-decoration:none;font-size:.82rem}
.portail-viewer-barre button{background:none;border:none;color:var(--muet);font-size:22px;
  cursor:pointer;line-height:1;padding:0 4px}
#s4y-viewer-cadre,#s4y-viewer-3d{flex:1;width:100%;border:1px solid var(--ligne);
  border-radius:0 0 10px 10px;background:#fff}
#s4y-viewer-attente{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--muet);font-size:.88rem;pointer-events:none}
@media (max-width:1100px){.portail-viewer{padding:6vh 8vw}}
@media (max-width:640px){.portail-viewer{padding:2vh 3vw}}

/* ---- Certifications (Ma societe fournisseur) ---- */
.portail-certifs{display:flex;flex-direction:column;gap:10px}
.portail-certif{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  border:1px solid var(--ligne);border-radius:10px;background:var(--carte);
  box-shadow:var(--ombre);padding:.7rem .95rem}
.portail-certif-nom{font-family:var(--font-display);font-weight:700;color:var(--encre)}
.portail-certif-meta{font-size:.84rem;color:var(--gris)}
.portail-certif-fin{margin-left:auto;display:flex;align-items:center;gap:10px}
.portail-echeance{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:2px 10px;white-space:nowrap}
.portail-echeance-ok{background:var(--vert-doux);color:var(--vert)}
.portail-echeance-proche{background:var(--papaya-doux);color:var(--papaya-2)}
.portail-echeance-passee{background:var(--rouge-doux);color:var(--rouge)}
.portail-echeance-attente{background:var(--neutre-doux);color:var(--muet)}

/* ---- Coordonnees bancaires : sobre, et masquees ---- */
.portail-rib{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;
  border:1px solid var(--ligne);border-radius:10px;background:var(--fond);
  padding:.7rem .95rem;margin-bottom:.8rem}
.portail-rib-iban{font-family:var(--font-mono);font-size:.92rem;color:var(--encre)}
.portail-rib-avis{border-left:3px solid var(--rouge);background:var(--rouge-doux);
  border-radius:10px;padding:.8rem 1rem;font-size:.86rem;line-height:1.5;margin:.6rem 0 1rem}

/* ============================================================
   v2.3.0 — Suivi des consultations repondues
   Le fournisseur ne voit jamais un prix concurrent : le cadran
   ne rend qu'une zone. Les couleurs vont donc du cyan technique
   (moins cher) au papaya (plus cher), sans jamais suggerer
   qu'une zone est une faute.
   ============================================================ */

/* ---- Les quatre chiffres d'en-tete ---- */
.portail-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:.9rem;margin:1.2rem 0 1.6rem}
.portail-tuile{background:var(--carte);border:1px solid var(--ligne);border-radius:14px;
  padding:.95rem 1.1rem;display:flex;flex-direction:column;gap:.25rem}
.portail-tuile-cle{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cyan-tech)}
.portail-tuile-val{font-family:var(--font-display);font-size:1.75rem;line-height:1.1;
  color:var(--encre)}
.portail-tuile-ok{color:var(--vert)}
.portail-tuile-note{font-size:.76rem;color:var(--muet);line-height:1.35}
.portail-tuile-phare{border-color:var(--cyan-vif);box-shadow:inset 3px 0 0 var(--cyan-vif)}

/* ---- Une consultation repondue ---- */
.portail-suivi{background:var(--carte);border:1px solid var(--ligne);border-radius:16px;
  padding:1.1rem 1.2rem;margin-bottom:1rem;border-left:3px solid var(--ligne2)}
.portail-suivi-retenu{border-left-color:var(--vert)}
.portail-suivi-non_retenu{border-left-color:var(--ligne2)}
.portail-suivi-analyse{border-left-color:var(--cyan-vif)}
.portail-suivi-haut{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.85rem}
.portail-suivi-modifier{margin-left:auto;font-size:.82rem;color:var(--papaya-2);
  text-decoration:none;border-bottom:1px solid transparent}
.portail-suivi-modifier:hover{border-bottom-color:var(--papaya-2)}
.portail-badge-perdu{background:var(--neutre-doux);color:var(--muet)}
.portail-badge-lance{background:var(--vert-doux);color:var(--vert)}
.portail-badge-sanssuite{background:var(--neutre-doux);color:var(--muet)}

.portail-suivi-corps{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:flex-start}
.portail-suivi-faits{display:flex;gap:1.4rem;flex-wrap:wrap;flex:1 1 260px}
.portail-val-ok{color:var(--vert)}

/* ---- Le cadran de positionnement ---- */
.portail-cadran{flex:0 1 300px;min-width:250px;display:flex;flex-direction:column;gap:.35rem}
.portail-cadran-titre{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cyan-tech)}
.portail-cadran-piste{position:relative;display:flex;height:12px;border-radius:6px;
  overflow:visible;margin-top:.2rem}
.portail-cadran-zone{flex:1}
.portail-cadran-zone:first-child{border-radius:6px 0 0 6px}
.portail-cadran-zone:last-child{border-radius:0 6px 6px 0}
.portail-cadran-zone.z1{background:var(--cyan-vif);opacity:.85}
.portail-cadran-zone.z2{background:var(--cyan-vif);opacity:.5}
.portail-cadran-zone.z3{background:var(--neutre-doux)}
.portail-cadran-zone.z4{background:var(--papaya);opacity:.45}
.portail-cadran-zone.z5{background:var(--papaya);opacity:.8}
.portail-cadran-aiguille{position:absolute;top:-6px;bottom:-6px;width:3px;
  margin-left:-1.5px;background:var(--encre);border-radius:2px;
  box-shadow:0 0 0 2px var(--carte)}
.portail-cadran-bornes{display:flex;justify-content:space-between;font-size:.7rem;
  color:var(--muet)}
.portail-cadran-verdict{font-size:.9rem;font-weight:600}
.portail-cadran-verdict.z1,.portail-cadran-verdict.z2{color:var(--cyan-tech)}
.portail-cadran-verdict.z3{color:var(--encre)}
.portail-cadran-verdict.z4,.portail-cadran-verdict.z5{color:var(--papaya-2)}
.portail-cadran-note{font-size:.74rem;color:var(--muet)}
.portail-cadran-muet{font-size:.82rem;color:var(--muet);line-height:1.45;
  border-left:2px solid var(--ligne2);padding-left:.8rem}

/* ---- Les pieces de la consultation, et leur sort ---- */
.portail-suivi-pieces{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;
  padding-top:.8rem;border-top:1px solid var(--ligne)}
.portail-piece-puce{font-family:var(--font-mono);font-size:.76rem;padding:3px 9px;
  border-radius:8px;background:var(--neutre-doux);color:var(--encre);
  border:1px solid var(--ligne2)}
.portail-piece-retenue{background:var(--vert-doux);color:var(--vert);border-color:var(--bord-vert)}
.portail-piece-vide{color:var(--muet);opacity:.65}

/* ---- Les commandes reellement passees ---- */
.portail-suivi-commandes{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--ligne)}
.portail-cmd-puce{display:inline-flex;gap:.55rem;align-items:baseline;font-size:.8rem;
  padding:4px 10px;border-radius:9px;background:var(--vert-doux);color:var(--vert);
  border:1px solid var(--bord-vert)}
.portail-cmd-puce strong{font-family:var(--font-mono)}

/* ============================================================
   v2.4.0 — Tableau de bord en quatre cadrans
   Une page d'accueil qui repond a quatre questions dans l'ordre
   ou elles se posent : qu'est-ce que je dois chiffrer, qu'est-ce
   qui attend une decision, qu'est-ce que je dois produire, et
   ou j'en suis. Chaque cadran porte un liseré de couleur : le
   papaya appelle a l'action, le cyan informe.
   ============================================================ */

.portail-cadrans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem;margin-top:1.4rem;align-items:start}
@media (max-width:860px){.portail-cadrans{grid-template-columns:1fr}}

.portail-cadre-tb{background:var(--carte);border:1px solid var(--ligne);
  border-radius:16px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;
  gap:.55rem;border-top:3px solid var(--ligne2)}
.portail-cadre-action{border-top-color:var(--papaya)}
.portail-cadre-attente{border-top-color:var(--cyan-vif)}
.portail-cadre-prod{border-top-color:var(--vert)}
.portail-cadre-perf{border-top-color:var(--cyan-tech)}

.portail-cadre-haut{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.portail-cadre-titre{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cyan-tech)}
.portail-cadre-nombre{font-family:var(--font-display);font-size:2rem;line-height:1;
  color:var(--encre)}
.portail-cadre-sous{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;
  font-size:.82rem;color:var(--muet);margin:0}
.portail-cadre-sous strong{color:var(--encre);font-family:var(--font-mono)}
.portail-cadre-alerte{font-size:.8rem;color:var(--papaya-2);margin:0}

.portail-cadre-liste{list-style:none;margin:.3rem 0 0;padding:0;display:flex;
  flex-direction:column}
.portail-cadre-liste li{border-top:1px solid var(--ligne)}
.portail-cadre-liste li:first-child{border-top:0}
.portail-cadre-liste a{display:flex;flex-direction:column;gap:.15rem;padding:.55rem 0;
  text-decoration:none;color:inherit}
.portail-cadre-liste a:hover .portail-cadre-ref{color:var(--papaya-2)}
.portail-cadre-ref{font-family:var(--font-mono);font-size:.88rem;color:var(--encre)}
.portail-cadre-detail{font-size:.78rem;color:var(--muet)}
.portail-cadre-modif{color:var(--papaya-2);text-decoration:none;border-bottom:1px solid transparent}
.portail-cadre-modif:hover{border-bottom-color:var(--papaya-2)}
.portail-cadre-vide{font-size:.85rem;color:var(--muet);margin:.4rem 0 0;line-height:1.5}
.portail-cadre-pied{margin-top:auto;padding-top:.7rem;font-size:.8rem;
  color:var(--cyan-tech);text-decoration:none}
.portail-cadre-pied:hover{color:var(--cyan-vif)}

/* ---- Les indicateurs ---- */
.portail-perf-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem;margin-top:.3rem}
.portail-perf-case{display:flex;flex-direction:column;gap:.15rem;
  padding:.6rem .75rem;background:var(--fond);border-radius:11px;
  border:1px solid var(--ligne)}
.portail-perf-cle{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cyan-tech);line-height:1.35}
.portail-perf-val{font-family:var(--font-display);font-size:1.4rem;line-height:1.15;
  color:var(--encre)}
.portail-perf-unite{font-size:.8rem;font-family:var(--font-body);color:var(--muet)}
.portail-perf-note{font-size:.72rem;color:var(--muet);line-height:1.35}
.portail-perf-bon{color:var(--vert)}
.portail-perf-mauvais{color:var(--papaya-2)}

.portail-perf-note-globale{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .8rem;
  margin-top:.9rem;padding:.7rem .85rem;border-radius:11px;
  background:var(--cyan-doux);border:1px solid var(--bord-cyan)}
.portail-perf-globale{font-family:var(--font-display);font-size:1.5rem;color:var(--cyan-tech)}
.portail-perf-globale span{font-size:.8rem;color:var(--muet)}
.portail-perf-detail{font-size:.76rem;color:var(--muet)}

/* ---- Les alertes : des faits, pas des reproches ---- */
.portail-alertes{list-style:none;margin:.9rem 0 0;padding:0;display:flex;
  flex-direction:column;gap:.4rem}
.portail-alerte{font-size:.82rem;line-height:1.45;padding:.45rem .7rem;
  border-radius:9px;border-left:3px solid var(--ligne2);background:var(--fond)}
.portail-alerte-urgent{border-left-color:var(--rouge);background:var(--rouge-doux);
  color:var(--rouge)}
.portail-alerte-attention{border-left-color:var(--papaya);background:var(--papaya-doux);
  color:var(--papaya-2)}

/* ============================================================
   v2.5.0 — Le referencement du fournisseur
   Il decouvre ici la ligne de matrice qui decide s'il recoit une
   consultation. Le ton compte : ce n'est pas une fiche de note,
   c'est une liste a corriger ensemble. D'ou le cyan technique
   partout, et le papaya reserve aux boutons d'envoi.
   ============================================================ */

.portail-attente-liste{list-style:none;margin:.5rem 0 0;padding:0;display:flex;
  flex-direction:column;gap:.25rem;font-size:.85rem}
.portail-attente-liste li::before{content:"\2192";margin-right:.45rem;color:var(--cyan-tech)}

.portail-capas{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.6rem}
.portail-capa{background:var(--carte);border:1px solid var(--ligne);border-radius:14px;
  padding:.95rem 1.1rem;border-left:3px solid var(--cyan-vif)}
.portail-capa-haut{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.6rem}
.portail-capa-nom{font-family:var(--font-display);font-size:1.05rem;color:var(--encre)}
.portail-capa-faits{display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.portail-capa-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.portail-capa-actions .btn-secondaire{font-size:.82rem;padding:.4rem .8rem}
.btn-lien{background:none;border:0;padding:.4rem 0;font:inherit;font-size:.82rem;
  color:var(--muet);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.btn-lien:hover{color:var(--rouge)}

.portail-capa-form{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--ligne2);
  display:flex;flex-direction:column;gap:.6rem}
.portail-capa-form .portail-actions{margin:0;justify-content:flex-start}
.portail-capa-form input[type=text]{width:100%}
.portail-capa-retrait{border-top-color:var(--rouge)}
.portail-capa-retrait .portail-aide{color:var(--rouge)}

/* ---- Les procedes ou il n'est pas encore ---- */
.portail-dispos{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:.6rem;margin:.9rem 0 1.4rem;align-items:start}
.portail-dispo{min-width:0}
.portail-dispo-nom{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:100%;font:inherit;font-size:.88rem;text-align:left;cursor:pointer;
  padding:.6rem .8rem;border-radius:11px;background:var(--fond);
  border:1px dashed var(--ligne2);color:var(--encre)}
.portail-dispo-nom:hover:not([disabled]){border-color:var(--papaya);border-style:solid;
  color:var(--papaya-2)}
.portail-dispo-nom[disabled]{cursor:default;opacity:.7}
.portail-dispo-plus{font-family:var(--font-mono);font-size:1.1rem;color:var(--papaya)}
.portail-dispo-etat{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--cyan-tech)}
.portail-dispo .portail-capa-form{background:var(--carte);border:1px solid var(--ligne);
  border-top:0;border-radius:0 0 11px 11px;padding:.9rem;margin-top:-4px}
.portail-capa-pied{margin-top:1.6rem}

/* ============================================================
   SECURITE — double authentification (v3.0.0)

   Rien de neuf dans la charte : la carte est celle de la fiche
   societe, l'orange reste un signal (l'etape en cours, la cle a
   recopier) et jamais un aplat de fond, et le QR code est pose
   sur du blanc parce qu'un lecteur de code-barres n'a pas de
   theme sombre.
   ============================================================ */
.sec-case{border:1px solid var(--ligne);border-radius:var(--radius);
  background:var(--carte);box-shadow:var(--ombre);padding:1.1rem 1.25rem;
  margin:0 0 1.1rem}
.sec-case h2{font-family:var(--font-display);font-size:.98rem;font-weight:700;
  color:var(--encre);margin:0 0 .7rem}
.sec-texte{font-size:.9rem;color:var(--gris);line-height:1.6;margin:0 0 1rem}
.sec-texte-petit{font-size:.8rem;margin:.5rem 0 0}

/* Bandeau d'etat : la pastille porte l'information, le fond reste sobre. */
.sec-bandeau{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:700;font-size:.95rem;color:var(--encre);margin:0 0 .8rem}
.sec-pastille{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.sec-pastille-on{background:var(--vert);box-shadow:0 0 0 3px var(--vert-doux)}
.sec-pastille-off{background:var(--muet);box-shadow:0 0 0 3px var(--ligne)}
.sec-depuis{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.04em;color:var(--muet);font-weight:400}

/* Les deux etapes de la mise en place. */
.sec-entete{display:flex;align-items:center;gap:10px;margin:0 0 .6rem}
.sec-entete-2{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--ligne)}
.sec-entete h2{margin:0}
.sec-etape{flex:0 0 auto;width:22px;height:22px;border-radius:3px;
  background:var(--papaya);color:#fff;font-family:var(--font-mono);font-size:.78rem;
  font-weight:500;display:flex;align-items:center;justify-content:center}

.sec-qr-rangee{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:flex-start}
.sec-qr{flex:0 0 auto;width:184px;min-height:184px;background:#fff;
  border:1px solid var(--ligne2);border-radius:3px;padding:10px;
  display:flex;align-items:center;justify-content:center}
.sec-qr svg{width:100%;height:auto;display:block}
.sec-cle-bloc{flex:1 1 220px;min-width:200px}
/* Les libelles de donnees suivent la charte : mono, majuscules, discret. */
.sec-case .portail-piece-label{display:block;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muet);margin:0 0 .35rem}
.sec-cle{display:block;font-family:var(--font-mono);font-size:.95rem;
  letter-spacing:.09em;color:var(--encre);background:var(--fond);
  border:1px solid var(--ligne2);border-left:3px solid var(--papaya);
  border-radius:3px;padding:.7rem .8rem;margin:.45rem 0 0;
  word-break:break-all;user-select:all}

/* Le champ a six chiffres : large, mono, espace. On le lit du telephone
   en le tapant, il doit se relire d'un coup d'oeil. */
.sec-champ-code{font-family:var(--font-mono);font-size:1.5rem;letter-spacing:.42em;
  text-align:center;width:100%;max-width:230px;padding:.6rem .5rem .6rem .9rem;
  border:1px solid var(--ligne2);border-radius:3px;background:var(--carte);
  color:var(--encre)}
.sec-champ-code:focus{outline:none;border-color:var(--papaya);
  box-shadow:0 0 0 3px var(--papaya-doux)}
.sec-form-code{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.sec-form-code .portail-piece-label{flex:1 0 100%;margin:0}
.sec-form-defi .sec-champ-code{max-width:100%}
.sec-memoriser{flex-direction:row!important;align-items:center;gap:9px!important;
  font-size:.86rem;color:var(--gris)}
.sec-memoriser input[type=checkbox]{width:16px;height:16px;accent-color:var(--papaya)}
.sec-memoriser>span{font-family:var(--font-body)!important;font-size:.86rem!important;
  letter-spacing:0!important;text-transform:none!important;color:var(--gris)!important}

/* Navigateurs reconnus. */
.sec-appareils{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--ligne)}
.sec-appareil{display:flex;align-items:center;gap:12px;padding:.7rem 0;
  border-bottom:1px solid var(--ligne)}
.sec-appareil-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.sec-appareil-nom{font-size:.9rem;font-weight:600;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-appareil-meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--muet)}
.sec-appareil form{margin-left:auto}
.sec-oublier{background:none;border:1px solid var(--ligne2);border-radius:3px;
  color:var(--gris);font-size:.8rem;font-weight:600;padding:.35rem .8rem;
  cursor:pointer;transition:var(--transition)}
.sec-oublier:hover{border-color:var(--rouge);color:var(--rouge)}
.sec-tous{margin-top:1rem}

@media (max-width:600px){
  .sec-qr{width:100%;max-width:240px;margin:0 auto}
  .sec-cle-bloc{flex:1 1 100%}
  .sec-form-code{gap:.7rem}
  .sec-form-code .btn-primary,.sec-form-code .btn-secondaire{flex:1 1 auto}
}

/* ============================================================
   PROJETS — la vue par projet (v3.2.0)

   Une carte par projet, une frise a cinq temps, une liste de
   jalons dates. L'orange marque l'etape en cours et rien
   d'autre : c'est un signal, pas une decoration.
   ============================================================ */
.pj-grille{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  margin:0 0 1.6rem}
.pj-grille-close{opacity:.72}

.pj-carte{display:flex;flex-direction:column;border:1px solid var(--ligne);border-radius:var(--radius);
  background:var(--carte);box-shadow:var(--ombre);padding:1rem 1.1rem;text-decoration:none;
  color:inherit;transition:var(--transition)}
.pj-carte:hover{border-color:var(--papaya);box-shadow:0 2px 6px rgba(255,128,0,.10),var(--ombre)}
.pj-carte-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;
  margin:0 0 .8rem}
.pj-ref{display:block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--muet)}
.pj-titre{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--encre);margin-top:.15rem}

.pj-phase{flex:0 0 auto;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:3px;white-space:nowrap;
  background:var(--fond);border:1px solid var(--ligne2);color:var(--gris)}
.pj-phase-production,.pj-phase-expedition{background:var(--papaya-doux);border-color:#ffd9b3;
  color:var(--papaya-2)}
.pj-phase-livre{background:var(--vert-doux);border-color:#b7e6cd;color:var(--vert)}
.pj-phase-grande{font-size:.74rem;padding:5px 12px}
:root[data-theme="dark"] .pj-phase-production,
:root[data-theme="dark"] .pj-phase-expedition{border-color:#5a3a10}
:root[data-theme="dark"] .pj-phase-livre{border-color:#1c4a33}

/* La frise : cinq puces reliees. Ce qui est passe est plein, ce qui
   vient est creux, l'etape en cours porte l'orange. */
.pj-frise{list-style:none;display:flex;margin:0;padding:0;counter-reset:none}
.pj-etape{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;
  gap:.35rem;min-width:0}
.pj-etape::before{content:"";position:absolute;top:5px;left:-50%;width:100%;height:2px;
  background:var(--ligne2)}
.pj-etape:first-child::before{display:none}
.pj-etape-passe::before,.pj-etape-courant::before{background:var(--papaya)}
.pj-puce{position:relative;width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  background:var(--carte);border:2px solid var(--ligne2);z-index:1}
.pj-etape-passe .pj-puce{background:var(--papaya);border-color:var(--papaya)}
.pj-etape-courant .pj-puce{background:var(--papaya);border-color:var(--papaya);
  box-shadow:0 0 0 4px var(--papaya-doux)}
.pj-etape-nom{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muet);text-align:center;line-height:1.3}
.pj-etape-courant .pj-etape-nom{color:var(--papaya-2);font-weight:500}
.pj-carte .pj-frise{margin-top:auto}
/* Sur une carte, les cinq libelles se chevauchent des que la langue
   allonge les mots (« en acheminement »). La pastille en haut a droite
   nomme deja l'etape en cours : la frise n'a plus qu'a montrer le
   chemin parcouru. Les libelles restent sur la fiche du projet, ou la
   largeur le permet. */
.pj-carte .pj-etape-nom{display:none}
.pj-carte .pj-frise{padding-bottom:.2rem}
.pj-frise-large{margin:.4rem 0 1.4rem}
.pj-frise-large .pj-etape-nom{font-size:.68rem}
.pj-frise-close{opacity:.55}

.pj-carte-bas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.9rem;padding-top:.7rem;
  border-top:1px solid var(--ligne);font-size:.82rem;color:var(--gris)}
.pj-carte-bas b{color:var(--encre)}
.pj-date{margin-left:auto;font-family:var(--font-mono);font-size:.7rem;color:var(--muet)}

/* Fiche d'un projet */
.pj-retour{margin:0 0 .8rem}
.pj-retour a{color:var(--papaya-2);text-decoration:none;font-size:.88rem}
.pj-retour a:hover{text-decoration:underline;text-underline-offset:3px}
.pj-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:0 0 1.2rem}
.pj-entete h1{margin:0}
.pj-entete-titre{margin:.2rem 0 0;color:var(--gris);font-size:1rem}

/* Les jalons : la date d'abord, elle est ce qu'on vient verifier. */
.pj-jalons{list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne)}
.pj-jalon{display:flex;align-items:baseline;gap:1rem;padding:.5rem 0;
  border-bottom:1px solid var(--ligne)}
.pj-jalon-date{flex:0 0 auto;font-family:var(--font-mono);font-size:.76rem;color:var(--papaya-2);
  min-width:88px}
.pj-jalon-nom{font-size:.9rem;color:var(--encre)}

/* Pieces et documents */
.pj-pieces{list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne)}
.pj-piece{padding:.6rem 0;border-bottom:1px solid var(--ligne)}
.pj-piece-ref{display:block;font-weight:600;font-size:.92rem;color:var(--encre)}
.pj-piece-ref a{color:var(--papaya-2);text-decoration:none}
.pj-piece-ref a:hover{text-decoration:underline;text-underline-offset:3px}
.pj-piece-meta{font-size:.82rem;color:var(--muet)}

.pj-docbloc{margin:0 0 1.1rem}
.pj-docbloc:last-child{margin-bottom:0}
.pj-docs{list-style:none;margin:.3rem 0 0;padding:0;border-top:1px solid var(--ligne)}
.pj-doc{display:flex;align-items:baseline;gap:.9rem;padding:.55rem 0;
  border-bottom:1px solid var(--ligne);flex-wrap:wrap}
.pj-doc-ref{font-weight:600;font-size:.9rem;color:var(--encre);flex:0 0 auto}
.pj-doc-meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;color:var(--muet);
  min-width:0;flex:1 1 auto}
.pj-doc-pdf{flex:0 0 auto;margin-left:auto;font-size:.78rem;font-weight:600;color:var(--papaya-2);
  text-decoration:none;border:1px solid var(--ligne2);border-radius:3px;padding:.2rem .7rem;
  transition:var(--transition)}
.pj-doc-pdf:hover{border-color:var(--papaya);background:var(--papaya-doux)}
.pj-doc-sans{margin-left:auto;font-size:.76rem;color:var(--muet)}
.pj-docs-qualite .pj-doc-ref{max-width:100%}

@media (max-width:600px){
  .pj-grille{grid-template-columns:1fr}
  /* Cinq libelles ne tiennent pas cote a cote sur un telephone : seul
     celui de l'etape en cours reste, les autres se lisent aux puces. */
  .pj-frise{padding-bottom:1.5rem}
  .pj-etape-nom{display:none;font-size:.62rem}
  .pj-etape-courant .pj-etape-nom{display:block;position:absolute;top:20px;left:50%;
    transform:translateX(-50%);white-space:nowrap}
  .pj-jalon{flex-direction:column;gap:.1rem}
  .pj-jalon-date{min-width:0}
  .pj-doc-pdf,.pj-doc-sans{margin-left:0}
}

/* ============================================================
   QUALITE — depot cote fournisseur (v3.2.0)
   ============================================================ */
.dq-form select,.dq-form input[type=file],.dq-form input[type=date]{
  border:1px solid var(--ligne2);border-radius:3px;background:var(--carte);
  color:var(--encre);padding:.55rem .6rem;font-family:var(--font-body);font-size:.9rem}
.dq-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne)}
.dq-ligne{display:flex;align-items:center;gap:1rem;padding:.65rem 0;
  border-bottom:1px solid var(--ligne);flex-wrap:wrap}
.dq-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1 1 auto}
.dq-type{font-weight:600;font-size:.9rem;color:var(--encre)}
.dq-meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.03em;color:var(--muet)}
.dq-etat{flex:0 0 auto;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 9px;border-radius:3px;
  background:var(--fond);border:1px solid var(--ligne2);color:var(--gris)}
.dq-etat-0,.dq-etat-1{background:var(--papaya-doux);border-color:#ffd9b3;color:var(--papaya-2)}
.dq-etat-2{background:var(--vert-doux);border-color:#b7e6cd;color:var(--vert)}
.dq-etat-3{background:var(--rouge-doux);border-color:#f5c2c2;color:var(--rouge)}
:root[data-theme="dark"] .dq-etat-0,:root[data-theme="dark"] .dq-etat-1{border-color:#5a3a10}
:root[data-theme="dark"] .dq-etat-2{border-color:#1c4a33}
:root[data-theme="dark"] .dq-etat-3{border-color:#5a2020}